/* Hangar page: blue-to-indigo accent from the app icon, plus the hero grid demo. Shared look comes from /styles.css. */
.hg { --hg: #4a5ee8; --blue: #4a5ee8; --hg-soft: color-mix(in srgb, #4a5ee8 12%, transparent);
      --work: #34a853; --need: #c98a12; --need-soft: color-mix(in srgb, #e0a020 18%, transparent); --term: #0f1012; --term-ink: #e7e7ea; }
@media (prefers-color-scheme: dark) { .hg { --blue: #8b9bff; --hg-soft: color-mix(in srgb, #6b7cff 20%, transparent); --need: #f2b84b; --term: #0b0b0d; } }
.hg .eyebrow, .hg .feature .q { color: var(--blue); }
.hg .cta { background: linear-gradient(135deg, #3b82f6, #4f46e5); color: #fff; }
.hg .btn[aria-disabled="true"] { opacity: .55; cursor: default; transform: none; }
.hg-icon { width: 112px; height: 112px; filter: drop-shadow(0 10px 22px rgba(74,94,232,.28)); }
.hg .shot img { height: auto; }
.hg .shot.small img { margin: 0 auto; } /* small sheets keep their 2x size instead of being stretched */
.hg kbd, .hg .card code, .hg details code, .hg .privacy-band code, .hg .feature code { font: .88em ui-monospace, "SF Mono", Menlo, monospace; background: var(--line); padding: 1px 6px; border-radius: 6px; }

/* ---------- hero: a Hangar window with a grid of four terminals ---------- */
.hx-wrap { max-width: 1000px; margin: 54px auto 0; }
.hx { display: grid; grid-template-columns: 220px 1fr; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-align: left;
      box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.14), 0 8px 20px rgba(0,0,0,.05); }
.hx-side { background: var(--bg2); border-right: 1px solid var(--line); padding: 14px 10px; font-size: 13px; }
.hx-side .lights { display: flex; gap: 7px; padding: 0 6px 14px; } .hx-side .lights i { width: 11px; height: 11px; border-radius: 99px; background: #ff5f57; }
.hx-side .lights i:nth-child(2) { background: #febc2e; } .hx-side .lights i:nth-child(3) { background: #28c840; }
.hx-side h5 { margin: 12px 6px 6px; font: 600 10.5px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .1em; color: var(--soft); }
.hx-f { display: flex; justify-content: space-between; padding: 6px 6px 3px; font-weight: 650; }
.hx-f small { font-weight: 600; color: var(--work); font-size: 11.5px; }
.hx-s { display: flex; gap: 8px; align-items: flex-start; padding: 5px 8px; border-radius: 9px; transition: background .3s; }
.hx-s.on { background: var(--line); }
.hx-s b { display: block; font-weight: 600; }
.hx-s span { display: block; color: var(--soft); font-size: 11.5px; transition: color .3s; }
.dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 99px; background: var(--work); transition: background .3s; }
.dot.idle { background: var(--soft); opacity: .5; }
[data-state="need"] .dot { background: var(--need); }
[data-state="need"] .hx-s span, .hx-s[data-state="need"] span { color: var(--need); }

.hx-main { min-width: 0; display: flex; flex-direction: column; }
.hx-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.hx-head h4 { margin: 0; font-size: 16px; letter-spacing: -.01em; flex: 1; }
.pill-need { font-size: 12.5px; font-weight: 650; color: var(--need); background: var(--need-soft); padding: 4px 10px; border-radius: 99px;
             opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s; }
.hx.need .pill-need { opacity: 1; transform: none; }
.hx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
.tm { position: relative; border-radius: 12px; background: var(--term); color: var(--term-ink); overflow: hidden; height: 196px;
      box-shadow: 0 0 0 1px var(--line); transition: box-shadow .35s; }
.tm.focus { box-shadow: 0 0 0 2px var(--hg); }
.tm[data-state="need"] { box-shadow: 0 0 0 2px var(--need); }
.tm-top { display: flex; align-items: center; gap: 7px; padding: 8px 11px; font-size: 12px; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.06); }
.tm-top .dot { margin: 0; }
.tm-top em { font-style: normal; color: #8a8b92; } .tm-top b { font-weight: 600; }
.tm pre { margin: 0; padding: 9px 11px; font: 11.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.tm pre span { display: block; } .tm pre [hidden] { display: none; }
.tm .g { color: #5fd47a; } .tm .r { color: #ff6b6b; } .tm .d { color: #8a8b92; } .tm .y { color: #f2b84b; } .tm .w { color: #fff; font-weight: 600; }
.tm .ask { margin-top: 2px; padding: 6px 8px; border: 1px solid rgba(242,184,75,.5); border-radius: 7px; }
.tm .ask .sel { color: #f2b84b; }

.hx-foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; color: var(--soft); font-size: 15px; }
.hx-foot b { color: var(--ink); font-weight: 600; }
.keycap { display: inline-flex; gap: 4px; }
.keycap span { display: grid; place-items: center; min-width: 44px; height: 42px; padding: 0 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line);
               font-weight: 600; font-size: 16px; box-shadow: 0 3px 0 var(--line), 0 6px 14px rgba(0,0,0,.06); transition: transform .12s, box-shadow .12s; }
.keycap.press span { transform: translateY(3px); box-shadow: 0 0 0 var(--line), 0 0 0 4px var(--hg-soft); color: var(--hg); }

@media (max-width: 760px) {
  .hx { grid-template-columns: 1fr; }
  .hx-side { display: none; }
  .hx-grid { grid-template-columns: 1fr; }
  .tm.extra { display: none; }
  .hx-foot { font-size: 14px; text-align: left; }
}

/* ---------- keyboard ---------- */
.keys { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; max-width: 900px; margin: 0 auto; padding: 20px; text-align: left;
        background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.krow { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; }
.krow b { font-weight: 600; font-size: 15px; margin-left: 8px; }
.krow small { color: var(--soft); font-size: 14px; margin-left: auto; text-align: right; }
.kc { min-width: 32px; height: 32px; padding: 0 8px; display: grid; place-items: center; border-radius: 8px; background: var(--bg); border: 1px solid var(--line);
      font-weight: 600; font-size: 14px; box-shadow: 0 2px 0 var(--line); }
@media (max-width: 760px) { .keys { grid-template-columns: 1fr; padding: 12px; } .krow small { display: none; } }

/* ---------- more: two small sheets, then cards ---------- */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.pair .card { display: flex; flex-direction: column; gap: 16px; }
.pair picture { display: grid; place-items: center; flex: 1; background: var(--bg); border-radius: 14px; padding: 22px; }
.pair img { display: block; max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 14px 34px rgba(0,0,0,.12); }
#more .grid { margin-top: 14px; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

/* ---------- privacy band, as on the other app pages ---------- */
.textlink { color: var(--blue); font-weight: 600; }
.privacy-band { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; background: var(--card); border: 1px solid var(--line);
                border-radius: 28px; padding: 44px; box-shadow: var(--shadow); }
.privacy-band h2 { margin-top: 10px; }
.privacy-band ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.privacy-band li { display: flex; gap: 12px; color: var(--soft); }
.privacy-band li::before { content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-size: 13px; font-weight: 700;
                           color: var(--blue); background: var(--hg-soft); }
.privacy-band li b { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .privacy-band { grid-template-columns: 1fr; padding: 26px; gap: 22px; } }

.final { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 54px 26px; box-shadow: var(--shadow); }
.final .hg-icon { width: 88px; height: 88px; }

@media (prefers-reduced-motion: reduce) {
  .hx *, .keycap span { transition: none !important; animation: none !important; }
}