/* Self-hosted Google Fonts (latin subset) — keeps the design's typography
   working under the site's strict CSP without allowing fonts.googleapis.com. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url('/fonts/space-grotesk-var.woff2') format('woff2-variations'),
       url('/fonts/space-grotesk-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/anton-400.woff2') format('woff2');
}
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  /* VT323 has a small x-height / lots of internal em padding, so it reads
     much smaller than its nominal font-size. Scale every glyph up ~25%
     uniformly so all VT323 labels/mono across the site gain legibility
     without having to touch each font-size declaration. */
  size-adjust: 125%;
  src: url('/fonts/vt323-400.woff2') format('woff2');
}

  :root {
    --bg: #07090C;
    --bg-1: #0B0E13;
    --bg-2: #11151C;
    --panel: #0E1218;
    --line: rgba(255,255,255,0.07);
    --line-2: rgba(255,255,255,0.12);
    --text: #E7EAF0;
    --muted: #8A93A4;
    --dim: #5A6371;
    --hatch: #FF7A3D;
    --hatch-deep: #C9461A;
    --signal: #5BFFA8;
    --signal-deep: #1F8C5B;
    --ice: #9CD2FF;
    --serial: #FFD25C;
  }
  * { box-sizing: border-box; }
  html { overflow-x: clip; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: "Space Grotesk", ui-sans-serif, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
  }
  .mono { font-family: "VT323", ui-monospace, monospace; }
  .term { font-family: "VT323", monospace; letter-spacing: 0.02em; }
  a { color: inherit; text-decoration: none; }

  /* =========================================================
     CINEMATIC STAGE — bold two-state hero, ship-or-die style
     ========================================================= */
  .cinematic-stage {
    position: relative;
    height: 220vh;
    z-index: 1;
  }
  .cinematic-pin {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #07090C;
    z-index: 2;
    transition: opacity 0.4s ease;
  }
  .cinematic-pin.is-hidden {
    opacity: 0;
    pointer-events: none;
  }
  #cinematic-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    background: #07090C;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
  }
  .post-cinematic {
    position: relative;
    z-index: 3;
    background: var(--bg);
    border-top: 1px solid var(--line);
  }

  .hero-typeset {
    position: absolute;
    inset: 0;
    padding: 6vh 5vw 6vh;
    z-index: 3;
    pointer-events: none;
  }
  .hero-title-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 0.85;
  }
  .hero-title-main,
  .hero-title-alt {
    font-family: "Anton", "Bebas Neue", "Space Grotesk", sans-serif;
    font-weight: 400;
    margin: 0;
    line-height: 0.82;
    letter-spacing: 0.005em;
    text-rendering: optimizeLegibility;
    /* keep each title on a single line — "OR AIRLOCK" must never wrap into the
       overflow:hidden alt-slot, which would clip "AIRLOCK" out of view */
    white-space: nowrap;
  }
  .hero-title-main {
    font-size: clamp(96px, min(22vw, 30vh), 320px);
    color: #F2EBDD;
    text-shadow: 0 0 32px rgba(242, 235, 221, 0.06);
  }
  .hero-alt-slot {
    overflow: hidden;
    height: 0;
    width: 100%;
    transition: height 0.05s linear;
  }
  .hero-title-alt {
    /* floor lowered from 88px: on phones the old floor exceeded 20vw, forcing
       "OR AIRLOCK" wider than the viewport so it wrapped and got clipped. The
       low floor lets the 20vw track engage and fit on narrow screens. */
    font-size: clamp(48px, min(20vw, 27vh), 290px);
    color: var(--hatch);
    margin: 0;
    /* full line-box so the alt-slot's overflow:hidden doesn't clip
       the cap-height — Anton ascender ≈ font-size, so anything < 1
       overflows above the line-box and gets cut. */
    line-height: 1;
    opacity: 0;
    transform: translateY(40px);
    text-shadow:
      0 0 24px rgba(255, 102, 81, 0.35),
      0 0 60px rgba(255, 102, 81, 0.15);
  }
  .hero-sub-slot {
    position: relative;
    margin-top: 18px;
  }
  .hero-sub-default,
  .hero-sub-alt {
    font-family: "VT323", monospace;
    font-size: clamp(18px, 1.6vw, 24px);
    color: #C9C2B0;
    letter-spacing: 0.025em;
    margin: 0;
    text-transform: lowercase;
    white-space: nowrap;
  }
  .hero-sub-default {
    text-indent: var(--hero-sub-default-indent, clamp(1px, 0.18vw, 4px));
  }
  .hero-sub-alt {
    text-indent: var(--hero-sub-alt-indent, clamp(5px, 1.16vw, 17px));
  }
  .hero-sub-default {
    transition: opacity 0.3s linear;
  }
  .hero-sub-alt {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--hatch);
    opacity: 0;
    transform: translateY(8px);
  }

  .scroll-prompt {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "VT323", monospace;
    font-size: 18px;
    color: #C9C2B0;
    letter-spacing: 0.04em;
    white-space: nowrap;
    z-index: 4;
    pointer-events: none;
    padding: 10px 18px;
    background: rgba(7, 9, 12, 0.55);
    border: 1px solid rgba(255, 210, 92, 0.20);
    border-radius: 3px;
    backdrop-filter: blur(6px);
  }
  .prompt-hand {
    color: var(--serial);
    font-size: 20px;
    animation: prompt-bounce 1.4s ease-in-out infinite;
  }
  @keyframes prompt-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
  }

  .scroll-hint { display: none; }

  .top-hud {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    padding: 14px 24px; display: flex; justify-content: space-between;
    align-items: center; pointer-events: none;
    font-family: "VT323", monospace; font-size: 15px;
    color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase;
    background: linear-gradient(to bottom, rgba(7,9,12,0.85), transparent);
  }
  .top-hud .brand {
    display: flex; align-items: center; gap: 12px; pointer-events: auto;
    color: var(--text);
  }
  .top-hud .brand-mark {
    width: 22px; height: 22px; position: relative;
    border: 1px solid var(--line-2); border-radius: 3px;
    display: grid; place-items: center;
    background: linear-gradient(180deg, #11151C, #0A0D12);
  }
  .top-hud .brand-mark::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--hatch);
    box-shadow: 0 0 0 2px rgba(255,122,61,0.18), 0 0 12px rgba(255,122,61,0.55);
  }
  .top-hud .right { display: flex; align-items: center; gap: 18px; pointer-events: auto; }
  .top-hud .status-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px; border: 1px solid var(--line-2);
    border-radius: 2px; color: var(--muted);
    background: rgba(7,9,12,0.6);
  }
  .top-hud .status-pill .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--signal); box-shadow: 0 0 8px var(--signal);
    animation: pulse 2.2s infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.7); }
  }

  /* =========================================================
     SHARED LAYOUT
     ========================================================= */
  .wrap { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 720px) { .wrap { padding: 0 18px; } }

  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 20px; border-radius: 0;
    font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 14px;
    letter-spacing: 0.01em; cursor: pointer; border: 1px solid transparent;
    transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .12s ease;
  }
  .btn:hover { transform: translate(-1px, -1px); }
  .btn:active { transform: translate(1px, 1px); }
  .btn:focus-visible {
    outline: 2px dashed var(--hatch);
    outline-offset: 3px;
  }
  .btn-primary {
    background: var(--hatch); color: #110903;
    border-color: var(--hatch-deep);
    box-shadow: 3px 3px 0 var(--hatch-deep);
  }
  .btn-primary:hover {
    background: #ff8a52;
    box-shadow: 4px 4px 0 var(--hatch-deep);
  }
  .btn-primary:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--hatch-deep);
  }
  .btn-ghost {
    background: rgba(7,9,12,0.6); color: var(--text);
    border-color: var(--line-2); backdrop-filter: blur(6px);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.45);
  }
  .btn-ghost:hover {
    border-color: rgba(255,122,61,0.45);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.45);
  }
  .btn-ghost:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 rgba(0,0,0,0.45);
  }
  .btn-sm { padding: 8px 14px; font-size: 13px; }
  .arrow { font-family: monospace; transform: translateY(-1px); }

  /* =========================================================
     CONTENT AFTER CINEMATIC
     ========================================================= */
  .starfield {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    overflow: hidden;
  }
  .stars {
    position: absolute; inset: 0; opacity: 0.4;
    background-image:
      radial-gradient(1px 1px at 12% 18%, #fff, transparent 50%),
      radial-gradient(1px 1px at 47% 73%, #fff, transparent 50%),
      radial-gradient(1px 1px at 82% 36%, #fff, transparent 50%),
      radial-gradient(1px 1px at 23% 88%, #fff, transparent 50%),
      radial-gradient(1px 1px at 67% 22%, #fff, transparent 50%),
      radial-gradient(1px 1px at 92% 64%, #fff, transparent 50%),
      radial-gradient(1px 1px at 33% 44%, #fff, transparent 50%),
      radial-gradient(1px 1px at 56% 12%, #fff, transparent 50%),
      radial-gradient(1px 1px at 7% 56%, #fff, transparent 50%),
      radial-gradient(1px 1px at 75% 81%, #fff, transparent 50%);
  }
  .grid-overlay {
    position: absolute; inset: 0; opacity: 0.3;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
  }

  .section {
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
    z-index: 2;
  }
  .section-head {
    display: flex; align-items: end; justify-content: space-between;
    margin-bottom: 40px; gap: 24px; flex-wrap: wrap;
  }
  .section-head .label {
    font-family: "VT323", monospace; font-size: clamp(14px, 1.2vw, 16px);
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em;
    display: flex; align-items: center; gap: 12px;
  }
  .section-head .label .n {
    color: var(--hatch); margin-right: 0;
  }
  .section-head .label .pixel-icon,
  .section-head .label .pixel-sprite {
    width: 18px; height: 18px; flex-shrink: 0;
    image-rendering: pixelated;
  }
  .section-head .label::after {
    content: ""; width: 42px; height: 1px;
    background: var(--warm-line);
    flex-shrink: 1;
  }
  .section-head h2 {
    font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02;
    margin: 14px 0 0; letter-spacing: -0.02em; font-weight: 500;
    max-width: 780px; text-wrap: balance;
  }
  .section-head h2 em,
  .anchor-copy h1 em,
  .crew-copy h2 em,
  .final-cta h2 em {
    font-style: normal; color: var(--hatch);
    padding-bottom: 0.05em;
    background-image: repeating-linear-gradient(90deg, var(--hatch) 0 6px, transparent 6px 10px);
    background-size: 10px 2px;
    background-position: 0 100%;
    background-repeat: repeat-x;
  }
  .section-head .right {
    color: var(--muted); font-size: 14px; max-width: 360px;
  }

  [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
  }
  [data-reveal].is-visible { opacity: 1; transform: none; }
  [data-stagger-child] {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  [data-stagger].is-visible [data-stagger-child] {
    opacity: 1; transform: none;
  }

  .panel {
    position: relative;
    background: linear-gradient(180deg, rgba(17,21,28,0.6), rgba(11,14,19,0.6));
    border: 1px solid var(--line-2);
    border-radius: 0;
    overflow: hidden;
  }
  /* pixel-notch corners — stepped 2px-quantized brackets, hand-cut
     like the astronaut SVG frame (each box-shadow = one 2x2 pixel) */
  .panel::before, .panel::after,
  .panel > .corners > i {
    content: ""; position: absolute; width: 2px; height: 2px;
    background: var(--hatch); border: 0; pointer-events: none;
  }
  .panel::before {
    top: 0; left: 0;
    box-shadow:
      2px 0 var(--hatch), 4px 0 var(--hatch), 6px 0 var(--hatch),
      0 2px var(--hatch), 0 4px var(--hatch), 0 6px var(--hatch),
      2px 2px var(--hatch-deep);
  }
  .panel::after {
    top: 0; right: 0;
    box-shadow:
      -2px 0 var(--hatch), -4px 0 var(--hatch), -6px 0 var(--hatch),
      0 2px var(--hatch), 0 4px var(--hatch), 0 6px var(--hatch),
      -2px 2px var(--hatch-deep);
  }
  .panel > .corners { position: absolute; inset: 0; pointer-events: none; }
  .panel > .corners > i:nth-child(1) {
    bottom: 0; left: 0;
    box-shadow:
      2px 0 var(--hatch), 4px 0 var(--hatch), 6px 0 var(--hatch),
      0 -2px var(--hatch), 0 -4px var(--hatch), 0 -6px var(--hatch),
      2px -2px var(--hatch-deep);
  }
  .panel > .corners > i:nth-child(2) {
    bottom: 0; right: 0;
    box-shadow:
      -2px 0 var(--hatch), -4px 0 var(--hatch), -6px 0 var(--hatch),
      0 -2px var(--hatch), 0 -4px var(--hatch), 0 -6px var(--hatch),
      -2px -2px var(--hatch-deep);
  }

  .panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--line);
    font-family: "VT323", monospace; font-size: 14px;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.13em;
    /* 2px warm checker dither — pixel-art shading, not a gradient */
    background-color: rgba(255,255,255,0.015);
    background-image: conic-gradient(
      rgba(255,122,61,0.05) 25%, transparent 0 50%,
      rgba(255,122,61,0.05) 0 75%, transparent 0);
    background-size: 4px 4px;
  }
  .panel-head .live {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--signal); text-transform: uppercase;
  }
  .panel-head .live .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--signal); box-shadow: 0 0 8px var(--signal);
    animation: pulse 2.2s infinite;
  }

  /* =========================================================
     POST-CINEMATIC HERO RESTATEMENT + CTA RAIL
     ========================================================= */
  .anchor-section {
    padding-top: 80px;
    padding-bottom: 40px;
  }
  .anchor-row {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center;
  }
  @media (max-width: 980px) { .anchor-row { grid-template-columns: 1fr; gap: 36px; } }
  .anchor-copy h1 {
    font-size: clamp(40px, 5.6vw, 76px); line-height: 1.0;
    letter-spacing: -0.025em; font-weight: 500; margin: 16px 0 0;
    text-wrap: balance;
  }
  .anchor-copy h1 em { font-style: normal; color: var(--hatch); }
  .anchor-copy p {
    margin: 22px 0 0; max-width: 520px;
    color: #B6BCC8; font-size: 16px; line-height: 1.55;
  }
  .anchor-copy .cta-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

  .hatch-panel { padding: 0; }
  .hatch-body { padding: 22px 22px 24px; }
  .hatch-title {
    font-family: "VT323", monospace; font-size: 14px;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.15em;
  }
  .countdown {
    margin-top: 12px; display: flex; align-items: baseline; gap: 12px;
    font-family: "VT323", monospace; font-weight: 500;
  }
  .cd-group { display: flex; align-items: baseline; gap: 6px; }
  .cd-num { font-size: clamp(38px, 5.4vw, 52px); color: var(--hatch); letter-spacing: -0.02em; }
  .cd-lbl { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; }
  .cd-sep { color: var(--dim); font-size: 34px; transform: translateY(-4px); }
  .hatch-meta {
    margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
    font-family: "VT323", monospace; font-size: 14px;
  }
  .hatch-meta .k { color: var(--muted); text-transform: uppercase; letter-spacing: 0.13em; font-size: 12px; }
  .hatch-meta .v { color: var(--text); margin-top: 2px; }
  .hatch-bar {
    margin-top: 22px; height: 6px; background: rgba(255,255,255,0.05);
    border-radius: 3px; overflow: hidden; position: relative;
  }
  .hatch-bar > i {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--hatch), #FFB07A);
    width: 64%;
    box-shadow: 0 0 12px rgba(255,122,61,0.6);
  }
  .hatch-bar-meta {
    margin-top: 8px; display: flex; justify-content: space-between;
    font-family: "VT323", monospace; font-size: 12px;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em;
  }
  .hatch-foot {
    border-top: 1px solid var(--line);
    padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: "VT323", monospace; font-size: 14px;
    color: var(--muted); background: rgba(0,0,0,0.2);
  }
  .hatch-foot .blink { color: var(--hatch); animation: blink 1.4s infinite; }
  @keyframes blink { 50% { opacity: 0.2; } }

  .steps {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  }
  @media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
  .step {
    padding: 20px 20px 24px; position: relative;
    border: 1px solid var(--line); border-radius: 0;
    background: var(--bg-1);
    min-height: 260px;
    display: flex; flex-direction: column;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .step:hover {
    transform: translateY(-2px);
    border-color: rgba(255,122,61,0.32);
    box-shadow:
      0 3px 0 0 rgba(201,70,26,0.30),
      0 18px 36px -18px var(--glow);
  }
  .step .pixel-sprite {
    width: 64px; height: 64px;
    image-rendering: pixelated;
    margin-bottom: 6px;
  }
  .step .n {
    font-family: "VT323", monospace; font-size: 14px;
    color: var(--hatch); letter-spacing: 0.12em;
  }
  .step h3 {
    margin: 12px 0 8px; font-size: 22px; font-weight: 500;
    letter-spacing: -0.01em;
  }
  .step p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; }
  .step .icon {
    margin-top: 14px; display: inline-flex; align-items: center;
    padding: 4px 8px; border: 1px dashed var(--line-2);
    font-family: "VT323", monospace; font-size: 12px;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em;
    border-radius: 2px; align-self: flex-start;
  }
  .step.fail .n { color: var(--hatch); }
  .step.fail::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(45deg, rgba(255,122,61,0.045) 0 6px, transparent 6px 12px);
  }

  .log-panel { overflow: hidden; }
  .log-tabs {
    display: flex; gap: 4px; padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,0.015);
    font-family: "VT323", monospace; font-size: 11px;
    flex-wrap: wrap;
  }
  .log-tabs .tab {
    padding: 6px 10px; color: var(--muted); border: 1px solid transparent;
    border-radius: 2px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.14em;
  }
  .log-tabs .tab.active { color: var(--text); border-color: var(--line-2); background: rgba(255,255,255,0.03); }
  .log-tabs .right { margin-left: auto; color: var(--dim); }
  .log-table { width: 100%; border-collapse: collapse; }
  .log-table thead th {
    text-align: left; padding: 12px 18px;
    font-family: "VT323", monospace; font-size: 10px;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.18em;
    border-bottom: 1px solid var(--line); font-weight: 500;
    background: rgba(0,0,0,0.15);
  }
  .sort-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    padding: 0;
    cursor: pointer;
  }
  .sort-button.is-active {
    color: var(--text);
  }
  .sort-button.is-active::after {
    content: " " attr(data-sort-dir);
    color: var(--signal);
  }
  .log-table tbody td {
    padding: 16px 18px; border-bottom: 1px solid var(--line);
    font-size: 14px; vertical-align: middle;
  }
  .log-table tbody tr:hover td { background: rgba(255,255,255,0.015); }
  .log-table .crew {
    display: flex; align-items: center; gap: 12px;
  }
  .pixel-avatar,
  .crew-avatar {
    width: 32px; height: 32px;
    flex-shrink: 0;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
  }
  .pixel-avatar { image-rendering: pixelated; }
  .crew-avatar {
    display: block;
    object-fit: cover;
    image-rendering: auto;
  }
  .crew-meta { line-height: 1.2; }
  .crew-name { font-weight: 500; font-size: 14px; }
  .crew-handle { font-family: "VT323", monospace; font-size: 11px; color: var(--muted); }
  .mission-text { color: var(--text); }
  .mission-text .quiet { color: var(--muted); }
  .deadline { font-family: "VT323", monospace; font-size: 12px; color: var(--text); }
  .deadline.soon { color: var(--hatch); }
  .deadline .sub { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; margin-top: 2px; }
  .badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px; border-radius: 2px;
    font-family: "VT323", monospace; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.14em;
    border: 1px solid;
  }
  .badge .b-dot { width: 6px; height: 6px; }
  .badge.confirmed { color: var(--signal); border-color: rgba(91,255,168,0.3); background: rgba(91,255,168,0.06); }
  .badge.confirmed .b-dot { background: var(--signal); box-shadow: 0 0 8px var(--signal); }
  .badge.pending { color: var(--ice); border-color: rgba(156,210,255,0.3); background: rgba(156,210,255,0.05); }
  .badge.pending .b-dot { background: var(--ice); animation: pulse 1.6s infinite; }
  .badge.airlocked { color: var(--hatch); border-color: rgba(255,122,61,0.4); background: rgba(255,122,61,0.07); }
  .badge.airlocked .b-dot { background: var(--hatch); box-shadow: 0 0 8px var(--hatch); }
  .streak {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: "VT323", monospace; font-size: 13px;
    color: var(--text);
  }
  .streak .bars { display: inline-flex; gap: 2px; align-items: center; }
  .streak .bars i {
    width: 3px; height: 12px; background: var(--signal); display: block;
    opacity: 0.95;
  }
  .streak .bars i.dim { background: var(--dim); opacity: 0.6; }
  .streak .bars i.miss { background: var(--hatch); }
  .streak .num { color: var(--muted); }

  .protocol-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  }
  @media (max-width: 1080px) { .protocol-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 640px) { .protocol-grid { grid-template-columns: 1fr 1fr; } }
  .protocol-card {
    border: 1px solid var(--line); padding: 18px 16px 20px;
    background: var(--bg-1); border-radius: 0; position: relative;
    min-height: 220px;
    display: flex; flex-direction: column;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .protocol-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,122,61,0.32);
    box-shadow:
      0 3px 0 0 rgba(201,70,26,0.30),
      0 18px 36px -18px var(--glow);
  }
  .protocol-card .pixel-sprite {
    width: 36px; height: 36px;
    image-rendering: pixelated;
    margin-bottom: 12px;
  }
  .protocol-card .code {
    font-family: "VT323", monospace; font-size: 13px;
    color: var(--hatch); letter-spacing: 0.18em;
  }
  .protocol-card h4 {
    margin: 8px 0 8px; font-size: 17px; font-weight: 500; letter-spacing: -0.005em;
  }
  .protocol-card p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }

  .crew-row {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: stretch;
  }
  @media (max-width: 980px) { .crew-row { grid-template-columns: 1fr; } }
  .crew-copy h2 {
    font-size: clamp(32px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -0.02em;
    font-weight: 500; margin: 12px 0 18px; max-width: 480px; text-wrap: balance;
  }
  .crew-copy h2 em { font-style: normal; color: var(--hatch); }
  .crew-copy p { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 440px; }
  .crew-list { margin-top: 24px; display: flex; flex-direction: column; gap: 0; }
  .crew-list .item {
    padding: 14px 0; border-top: 1px solid var(--line);
    display: flex; align-items: baseline; gap: 14px;
    font-family: "VT323", monospace; font-size: 13px;
  }
  .crew-list .item:last-child { border-bottom: 1px solid var(--line); }
  .crew-list .item .k { color: var(--hatch); letter-spacing: 0.16em; font-size: 10px; min-width: 70px; }
  .crew-list .item .v { color: var(--text); }

  .deck-mock { padding: 0; height: 100%; }
  .deck-head {
    display: grid; grid-template-columns: 1fr auto auto; gap: 18px;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
    font-family: "VT323", monospace; font-size: 11px;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em;
    background: rgba(255,255,255,0.015);
    align-items: center;
  }
  .deck-head .name { color: var(--text); letter-spacing: 0.02em; text-transform: none; font-size: 13px; }
  .deck-head .name .tag { color: var(--hatch); margin-left: 8px; }
  .deck-roster { padding: 16px 18px; }
  .roster-row {
    display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px;
    align-items: center; padding: 10px 0;
    border-bottom: 1px dashed var(--line);
  }
  .roster-row:last-child { border-bottom: 0; }
  .roster-row .who { display: flex; align-items: center; gap: 10px; }
  .roster-row .pixel-avatar { width: 26px; height: 26px; }
  .roster-row .mission { font-family: "VT323", monospace; font-size: 12px; color: var(--muted); }
  .roster-row .badge { padding: 3px 7px; font-size: 10px; }
  .deck-foot {
    border-top: 1px solid var(--line); padding: 12px 18px;
    display: flex; justify-content: space-between;
    font-family: "VT323", monospace; font-size: 11px;
    color: var(--muted); background: rgba(0,0,0,0.15);
  }
  .deck-foot .ok { color: var(--signal); }
  .deck-foot .bad { color: var(--hatch); }

  .cases {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line);
  }
  @media (max-width: 1080px) { .cases { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .cases { grid-template-columns: 1fr; } }
  .case {
    padding: 24px; background: var(--bg);
    display: flex; flex-direction: column; gap: 14px; min-height: 240px;
    transition: background .2s ease, box-shadow .2s ease;
  }
  .case:hover {
    background: var(--bg-1);
    box-shadow: inset 0 -36px 56px -44px var(--glow);
  }
  .case .pixel-sprite { width: 32px; height: 32px; image-rendering: pixelated; margin-bottom: 4px; }
  .case .who-label {
    font-family: "VT323", monospace; font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.18em; color: var(--hatch);
  }
  .case .quote { font-size: 16px; line-height: 1.4; letter-spacing: -0.005em; }
  .case .proof {
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
    font-family: "VT323", monospace; font-size: 11px; color: var(--muted);
    display: flex; flex-direction: column; gap: 4px;
  }
  .case .proof span.k { color: var(--dim); text-transform: uppercase; letter-spacing: 0.14em; font-size: 9px; }
  .case .proof span.v { color: var(--text); }

  .feed-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  }
  @media (max-width: 980px) { .feed-row { grid-template-columns: 1fr; } }
  .feed-panel { padding: 0; }
  .feed { padding: 8px 0; max-height: 380px; overflow: hidden; position: relative; }
  .feed::after {
    content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
    background: linear-gradient(to bottom, transparent, var(--bg-1));
    pointer-events: none;
  }
  .feed .entry {
    padding: 9px 18px; display: grid;
    grid-template-columns: 76px 1fr auto; gap: 16px; align-items: baseline;
    font-family: "VT323", monospace; font-size: 12px;
    border-bottom: 1px dashed var(--line);
  }
  .feed .entry.is-new {
    animation: feed-entry-in 420ms cubic-bezier(.2, .9, .2, 1);
  }
  @keyframes feed-entry-in {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .feed .ts { color: var(--dim); }
  .feed .msg { color: var(--text); }
  .feed .msg .who { color: var(--ice); }
  .feed .msg.airlock { color: var(--hatch); }
  .feed .msg.launch { color: var(--signal); }
  .feed .tag {
    font-size: 10px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.14em;
  }
  .metrics-panel { padding: 0; }
  .metrics-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  }
  .metric { padding: 22px 20px; background: var(--bg-1); }
  .metric .k {
    font-family: "VT323", monospace; font-size: 10px;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.18em;
  }
  .metric .v {
    font-family: "VT323", monospace;
    font-size: 32px; letter-spacing: -0.02em; margin-top: 8px;
  }
  .metric .v.green { color: var(--signal); }
  .metric .v.amber { color: var(--hatch); }
  .metric .v.ice { color: var(--ice); }
  .metric .delta {
    font-family: "VT323", monospace; font-size: 11px;
    color: var(--muted); margin-top: 4px;
  }

  .final-cta {
    padding: 130px 0 140px; text-align: center; position: relative;
    background:
      radial-gradient(600px 240px at 50% 50%, rgba(255,122,61,0.12), transparent 70%),
      var(--bg);
  }
  .final-cta .pixel-banner {
    width: 240px; max-width: 60vw; height: 60px;
    image-rendering: pixelated; margin: 0 auto 30px;
    display: block;
  }
  .final-cta h2 {
    font-size: clamp(44px, 7vw, 96px); line-height: 0.98;
    letter-spacing: -0.03em; font-weight: 500; margin: 0 auto; max-width: 980px;
    text-wrap: balance;
  }
  .final-cta h2 em { color: var(--hatch); font-style: normal; }
  .final-cta p {
    margin: 22px auto 0; max-width: 520px; color: var(--muted); font-size: 15px;
  }
  .final-cta .cta-row {
    margin-top: 36px; display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  }
  .final-cta .micro {
    margin-top: 28px; font-family: "VT323", monospace;
    font-size: 11px; color: var(--dim); letter-spacing: 0.22em; text-transform: uppercase;
  }

  footer.site {
    border-top: 1px solid var(--line);
    padding: 30px 0 50px;
    font-family: "VT323", monospace; font-size: 11px;
    color: var(--muted);
    position: relative; z-index: 2;
  }
  footer.site .row {
    display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    align-items: center; text-transform: uppercase; letter-spacing: 0.16em;
  }
  footer.site .links { display: flex; gap: 22px; flex-wrap: wrap; }
  footer.site .links a:hover { color: var(--text); }

  .divider-line {
    height: 1px; background: var(--line);
    position: relative;
  }
  .divider-line::before {
    content: ""; position: absolute; left: 0; top: -1px; width: 80px; height: 3px;
    background: var(--hatch);
  }

  /* =========================================================
     SPEC v1 LANDING SURFACE
     ========================================================= */
  .brand-word {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text);
  }
  .brand-version {
    color: var(--muted);
    font-size: 12px;
  }
  code {
    font-family: "VT323", ui-monospace, monospace;
    color: var(--ice);
    background: rgba(156,210,255,0.06);
    border: 1px solid rgba(156,210,255,0.12);
    border-radius: 2px;
    padding: 0 4px;
  }
  .mirror-section {
    position: relative;
    z-index: 2;
    padding: 96px 24px 70px;
    background:
      linear-gradient(180deg, rgba(7,9,12,0), rgba(7,9,12,0.88) 18%, rgba(7,9,12,0.88) 82%, rgba(7,9,12,0)),
      var(--bg);
  }
  .mirror-copy {
    max-width: 620px;
    margin: 0 auto;
    color: #C9D0DA;
    font-size: clamp(18px, 2.1vw, 23px);
    line-height: 1.56;
    letter-spacing: 0;
  }
  .mirror-copy p {
    margin: 0 0 24px;
  }
  .mirror-copy p:first-child,
  .mirror-copy p:last-child {
    color: var(--text);
  }
  .section-head--tight {
    margin-bottom: 0;
  }
  .live-100-panel {
    min-height: 520px;
    /* override .panel's overflow:hidden so seat-grid tooltips (which extend
       beyond the panel for inner columns) aren't clipped at the panel edges */
    overflow: visible;
  }
  .live-100-body {
    padding: 20px;
  }
  .live-100-grid-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 150px;
    gap: 20px;
    align-items: center;
  }
  .live-counts {
    display: grid;
    gap: 12px;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }
  .live-counts span {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 8px;
    align-items: center;
  }
  .live-counts strong {
    color: var(--text);
    font-size: 16px;
  }
  .panel-rule {
    height: 1px;
    background: var(--line);
    margin: 18px -20px;
  }
  .nearest-hatch {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }
  .nearest-hatch strong {
    color: var(--text);
    font-size: 16px;
    letter-spacing: 0.04em;
  }
  .next-seat-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 0.09em;
  }
  .sub-label {
    font-family: "VT323", ui-monospace, monospace;
    font-size: 14px;
    color: var(--muted);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .protocol-split {
    display: grid;
    gap: 26px;
  }
  .protocol-grid--floor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .protocol-grid--stacks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .protocol-card.is-muted {
    opacity: 0.62;
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,0.026) 0 8px, transparent 8px 16px),
      var(--bg-1);
  }
  .reentry-note,
  .cabin-note {
    margin: 22px 0 0;
    color: var(--muted);
    max-width: 840px;
    line-height: 1.6;
  }
  .seat-grid-shell {
    position: relative;
  }
  .seat-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px;
  }
  .seat-grid--compact {
    gap: 4px;
  }
  .seat-cell {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    background: rgba(7,9,12,0.55);
    color: var(--dim);
    font-family: "VT323", ui-monospace, monospace;
    font-size: 11px;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
  }
  .seat-grid--large .seat-cell {
    min-height: 54px;
    font-size: 13px;
  }
  .seat-cell:hover {
    transform: translateY(-1px);
    border-color: rgba(255,122,61,0.55);
    z-index: 3;
  }
  .seat-cell::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(280px, 78vw);
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    background: var(--bg-1);
    border: 1px solid var(--line-2);
    color: var(--text);
    padding: 8px 10px;
    font-family: "VT323", ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 14px 28px rgba(0,0,0,0.35);
    /* sit above neighbouring seats and the panel header */
    z-index: 5;
    transition: opacity 0.14s ease;
  }
  .seat-cell:hover::after,
  .seat-cell:focus-visible::after {
    opacity: 1;
  }
  /* The grid is always repeat(10) and its panel has overflow:hidden, so the
     edge cells need their tooltip anchored inward (these rules are orthogonal
     — top-row sets top/bottom, edge-columns set left/right/transform — so the
     four corner cells get both without conflicting). */
  /* top row: flip below the seat so it never collides with the header above */
  .seat-grid > .seat-cell:nth-child(-n+10)::after {
    bottom: auto;
    top: calc(100% + 8px);
  }
  /* left column: anchor to the cell's left edge so it isn't clipped */
  .seat-grid > .seat-cell:nth-child(10n + 1)::after {
    left: 0;
    right: auto;
    transform: none;
  }
  /* right column: anchor to the cell's right edge so it isn't clipped */
  .seat-grid > .seat-cell:nth-child(10n)::after {
    left: auto;
    right: 0;
    transform: none;
  }
  /* avatar that fills an occupied / vacated seat */
  .seat-cell .seat-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
  }
  /* seat number tucked in the corner over the avatar */
  .seat-cell .seat-tag {
    position: absolute;
    right: 3px;
    bottom: 1px;
    z-index: 2;
    font-family: "VT323", ui-monospace, monospace;
    font-size: 11px;
    line-height: 1;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.95);
    pointer-events: none;
  }
  /* OCCUPIED — green frame, full-colour portrait */
  .seat-cell.is-occupied {
    color: var(--signal);
    background: rgba(7,9,12,0.55);
    border-color: var(--signal);
    box-shadow: inset 0 0 0 1px rgba(91,255,168,0.45), 0 0 14px rgba(91,255,168,0.14);
  }
  .seat-cell.is-open:hover {
    color: var(--hatch);
  }
  /* VACATED — orange frame, greyscale portrait, AIRLOCKED stamp */
  .seat-cell.is-vacated {
    color: var(--hatch);
    background: rgba(7,9,12,0.55);
    border-color: var(--hatch);
    box-shadow: inset 0 0 0 1px rgba(255,122,61,0.45);
    text-decoration: none;
  }
  .seat-cell.is-vacated .seat-avatar {
    filter: grayscale(1) contrast(0.92) brightness(0.6);
  }
  /* orange wash so a vacated seat reads "off the boat" even at a glance */
  .seat-cell.is-vacated::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(201,70,26,0.28);
    pointer-events: none;
  }
  .seat-cell .seat-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%) rotate(-13deg);
    font-family: "VT323", ui-monospace, monospace;
    font-size: clamp(8px, 0.95vw, 12px);
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hatch);
    background: rgba(7,9,12,0.42);
    border: 1.5px solid var(--hatch);
    padding: 2px 4px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(7,9,12,0.5);
  }
  /* compact hero grid is too small for the stamp / corner number */
  .seat-grid--compact .seat-stamp,
  .seat-grid--compact .seat-tag {
    display: none;
  }
  .seat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
    font-family: "VT323", ui-monospace, monospace;
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.10em;
  }
  .seat-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .legend-box {
    width: 10px;
    height: 10px;
    display: inline-block;
    border: 1px solid var(--line-2);
    background: transparent;
  }
  .legend-box.occupied { background: var(--signal); border-color: var(--signal); }
  .legend-box.vacated { background: var(--hatch); border-color: var(--hatch); }
  .legend-box.open { background: transparent; }
  .table-scroll {
    overflow-x: auto;
  }
  .log-tabs button.tab {
    font: inherit;
    background: transparent;
  }
  .log-tabs button.tab.active {
    color: var(--text);
    border-color: var(--line-2);
    background: rgba(255,255,255,0.03);
  }
  .log-table th:first-child,
  .log-table td:first-child {
    min-width: 142px;
  }
  .log-table th:nth-child(3),
  .log-table td:nth-child(3) {
    min-width: 340px;
  }
  .log-table tbody tr {
    cursor: pointer;
  }
  .log-table tbody tr.is-hidden {
    display: none;
  }
  .seat-number-cell {
    font-family: "VT323", ui-monospace, monospace;
    font-size: 11px;
    color: var(--ice);
    letter-spacing: 0.08em;
  }
  .is-airlocked .seat-number-cell {
    color: var(--hatch);
    text-decoration: line-through;
  }
  .badge.declared {
    color: var(--ice);
    border-color: rgba(156,210,255,0.3);
    background: rgba(156,210,255,0.05);
  }
  .badge.declared .b-dot {
    background: var(--ice);
  }
  .badge.proof-pending {
    color: var(--serial);
    border-color: rgba(255,210,92,0.34);
    background: rgba(255,210,92,0.06);
    animation: pending-pulse 1.6s ease-in-out infinite;
  }
  .badge.proof-pending .b-dot {
    background: var(--serial);
  }
  .badge.occupied,
  .badge.open,
  .badge.vacated {
    color: var(--muted);
    border-color: var(--line-2);
  }
  @keyframes pending-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255,210,92,0); }
    50% { box-shadow: 0 0 18px rgba(255,210,92,0.16); }
  }
  .mission-types {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .boarding-row {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 18px;
    align-items: start;
  }
  .boarding-card {
    overflow: visible;
  }
  .boarding-body {
    padding: 24px;
  }
  .boarding-lede {
    margin: 0 0 18px;
    color: var(--text);
    font-family: "VT323", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .boarding-body ul {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    color: var(--muted);
  }
  .boarding-body li {
    position: relative;
    padding-left: 18px;
    line-height: 1.5;
  }
  .boarding-body li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--hatch);
    font-family: "VT323", ui-monospace, monospace;
  }
  .boarding-micro {
    margin: 16px 0 0;
    color: var(--dim);
    font-family: "VT323", ui-monospace, monospace;
    font-size: 11px;
    line-height: 1.55;
  }
  .price-ladder {
    overflow: hidden;
  }
  .ladder-list {
    display: grid;
    gap: 18px;
    padding: 22px;
  }
  .ladder-row {
    display: grid;
    gap: 8px;
  }
  .ladder-meta {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    color: var(--muted);
    font-family: "VT323", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .ladder-meta span:first-child {
    color: var(--text);
  }
  .ladder-bar {
    height: 10px;
    background: rgba(255,255,255,0.045);
    overflow: hidden;
    border: 1px solid var(--line);
  }
  .ladder-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--hatch), #FFB07A);
    box-shadow: 0 0 16px rgba(255,122,61,0.36);
    transition: width 0.4s cubic-bezier(.17,.84,.44,1);
  }
  .ladder-foot {
    border-top: 1px solid var(--line);
    padding: 16px 22px;
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-family: "VT323", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .founder-panel {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 30px 0;
  }
  .founder-avatar {
    aspect-ratio: 1;
    width: 100%;
    height: auto;
    border: 1px solid var(--line-2);
    background:
      linear-gradient(135deg, rgba(255,122,61,0.12), transparent 42%),
      var(--bg-1);
    display: block;
    object-fit: cover;
    object-position: 58% 42%;
    image-rendering: pixelated;
    box-shadow: 0 24px 54px rgba(0,0,0,0.34);
  }
  .founder-copy {
    max-width: 820px;
  }
  .founder-copy p {
    margin: 0 0 18px;
    color: var(--muted);
    line-height: 1.65;
    font-size: 16px;
  }
  .founder-copy strong {
    color: var(--text);
  }
  .receipt-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
  }
  .receipt-card {
    border: 1px solid var(--line);
    background: var(--bg-1);
    padding: 10px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }
  .receipt-card:hover {
    border-color: rgba(255,122,61,0.4);
  }
  .receipt-thumb {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--line);
    padding: 6px;
  }
  .receipt-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: auto;
  }
  .receipt-logo-fallback {
    color: var(--text);
    font-family: "Anton", Impact, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
  }
  .receipt-card strong,
  .receipt-card small {
    display: block;
  }
  .receipt-card strong {
    color: var(--text);
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .receipt-card small {
    margin-top: 3px;
    color: var(--muted);
    font-family: "VT323", ui-monospace, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .faq-section .section-head {
    align-items: start;
  }
  .faq-list {
    max-width: 720px;
    display: grid;
    gap: 0;
  }
  .faq-list details {
    border-top: 1px solid var(--line);
    padding: 16px 0;
  }
  .faq-list details:last-child {
    border-bottom: 1px solid var(--line);
  }
  .faq-list summary {
    cursor: pointer;
    color: var(--text);
    font-size: 18px;
    font-weight: 500;
    list-style: none;
  }
  .faq-list summary::-webkit-details-marker {
    display: none;
  }
  .faq-list summary::before {
    content: "▸";
    color: var(--hatch);
    display: inline-block;
    width: 22px;
    font-family: "VT323", monospace;
    font-size: 1.1em;
    line-height: 1;
  }
  .faq-list details[open] summary::before {
    content: "▾";
  }
  .faq-list details[open] {
    border-top-color: rgba(255,122,61,0.30);
    background: linear-gradient(90deg, rgba(255,122,61,0.045), transparent 56%);
  }
  .faq-list summary:focus-visible {
    outline: 2px dashed var(--hatch);
    outline-offset: 3px;
  }
  .faq-list p {
    margin: 12px 0 0 22px;
    color: var(--muted);
    line-height: 1.6;
  }
  .final-inner .label {
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .final-inner .label span,
  footer.site .row > div:last-child span {
    color: var(--signal);
  }

  @media (max-width: 1100px) {
    .protocol-grid--stacks,
    .mission-types,
    .receipt-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .boarding-row,
    .founder-panel {
      grid-template-columns: 1fr;
    }
    .founder-avatar {
      max-width: 260px;
    }
  }
  @media (max-width: 760px) {
    .top-hud {
      padding: 12px 14px;
      gap: 12px;
    }
    .top-hud .status-pill {
      display: none;
    }
    .top-hud .btn {
      padding: 7px 10px;
      font-size: 11px;
    }
    .mirror-section {
      padding-top: 72px;
    }
    .live-100-grid-row,
    .protocol-grid--floor,
    .protocol-grid--stacks,
    .mission-types,
    .receipt-row {
      grid-template-columns: 1fr;
    }
    .next-seat-callout {
      align-items: stretch;
      flex-direction: column;
    }
    .seat-grid--large .seat-cell {
      min-height: auto;
      font-size: 10px;
    }
    .ladder-meta {
      grid-template-columns: 1fr;
      gap: 4px;
    }
    .feed .entry {
      grid-template-columns: 68px 1fr;
    }
    .feed .tag {
      grid-column: 2;
    }
    .metrics-grid {
      grid-template-columns: 1fr;
    }
  }

  /* =========================================================
     PUBLIC ROUTES
     ========================================================= */
  .page-shell {
    min-height: 100vh;
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 28px 96px;
  }
  .page-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 16px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .page-nav a:hover {
    color: var(--text);
  }
  .page-hero {
    padding: 76px 0 48px;
  }
  .page-hero .label,
  .empty-state .label {
    font-family: "VT323", ui-monospace, monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .page-hero .label .n,
  .empty-state .label .n {
    color: var(--hatch);
  }
  .page-hero h1,
  .empty-state h1 {
    max-width: 880px;
    margin: 14px 0 0;
    font-size: clamp(42px, 6vw, 82px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    font-weight: 500;
  }
  .page-hero p,
  .empty-state p {
    max-width: 620px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.55;
  }
  .profile-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
  }
  .profile-avatar {
    width: 72px;
    height: 72px;
  }
  .profile-header h1 {
    margin: 0;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1;
    font-weight: 500;
  }
  .profile-header h1 span {
    color: var(--muted);
    font-size: 0.42em;
    margin-left: 10px;
  }
  .profile-header p {
    margin: 8px 0 0;
    color: var(--muted);
    font-family: "VT323", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .profile-history {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 10px;
    color: var(--dim);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .profile-history a,
  .seat-history-list a {
    color: var(--hatch);
  }
  .profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 18px;
    margin-top: 28px;
  }
  .profile-card-body {
    padding: 24px;
  }
  .profile-card-body h2 {
    margin: 0 0 16px;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.04;
    font-weight: 500;
  }
  .profile-card-body p,
  .muted-line {
    color: var(--muted);
    line-height: 1.6;
  }
  .stat-list {
    margin: 0;
    padding: 18px;
    display: grid;
    gap: 12px;
  }
  .stat-list div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    font-family: "VT323", ui-monospace, monospace;
  }
  .stat-list dt {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .stat-list dd {
    margin: 0;
    color: var(--text);
    font-size: 12px;
  }
  .profile-section {
    margin-top: 70px;
  }
  .seat-history-list {
    display: grid;
    gap: 8px;
  }
  .empty-state {
    padding: 96px 0;
  }
  .empty-state--panel {
    border: 1px solid var(--line);
    background: var(--bg-1);
    padding: 34px;
  }
  .empty-state h2 {
    margin: 12px 0 0;
    font-size: clamp(30px, 4vw, 56px);
    line-height: 1;
    font-weight: 500;
  }
  .wake-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
  }
  .wake-filters button {
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--muted);
    padding: 8px 10px;
    font: inherit;
    cursor: pointer;
  }
  .wake-filters button.active,
  .wake-filters button:hover {
    color: var(--text);
    border-color: rgba(255,122,61,0.45);
  }
  .wake-stream {
    display: grid;
    gap: 14px;
  }
  .wake-entry {
    border-top: 1px solid var(--line);
    padding: 22px 0;
  }
  .wake-entry.is-hidden {
    display: none;
  }
  .wake-entry time,
  .wake-entry a {
    color: var(--hatch);
    font-family: "VT323", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .wake-entry h2 {
    margin: 10px 0;
  }
  .wake-entry p {
    color: var(--muted);
  }
  .legal-shell {
    max-width: 1220px;
  }
  .legal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 34px;
    align-items: end;
  }
  .legal-hero p {
    max-width: 700px;
  }
  .legal-status {
    position: relative;
    padding: 22px;
    background:
      linear-gradient(135deg, rgba(255,122,61,0.10), transparent 42%),
      var(--bg-1);
  }
  .legal-status > span {
    display: block;
    color: var(--hatch);
    font-size: 12px;
    letter-spacing: 0.16em;
  }
  .legal-status strong {
    display: block;
    margin-top: 8px;
    font-size: 28px;
    font-weight: 500;
  }
  .legal-status p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
  }
  .legal-status a,
  .legal-doc a {
    color: var(--hatch);
    text-decoration: underline;
    text-decoration-color: rgba(255,122,61,0.35);
    text-underline-offset: 3px;
  }
  .legal-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 54px;
    margin-top: 44px;
  }
  .legal-index {
    position: sticky;
    top: 22px;
    align-self: start;
    display: grid;
    gap: 8px;
    padding: 16px 0;
    color: var(--dim);
    font-size: 12px;
    letter-spacing: 0.12em;
  }
  .legal-index a {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
  }
  .legal-index a:hover {
    color: var(--text);
    border-color: rgba(255,122,61,0.42);
  }
  .legal-doc {
    display: grid;
    gap: 18px;
  }
  .legal-section {
    position: relative;
    border-top: 1px solid var(--line);
    padding: 28px 0 10px;
  }
  .legal-section:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .legal-callout {
    border: 1px solid rgba(255,122,61,0.22);
    background:
      linear-gradient(180deg, rgba(255,122,61,0.075), rgba(255,122,61,0.015)),
      var(--bg-1);
    padding: 28px;
  }
  .legal-kicker {
    color: var(--hatch);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .legal-section h2 {
    margin: 10px 0 14px;
    font-size: clamp(28px, 3vw, 46px);
    line-height: 1.04;
    font-weight: 500;
    letter-spacing: 0;
  }
  .legal-section p,
  .legal-section li {
    max-width: 790px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.68;
  }
  .legal-section p {
    margin: 12px 0;
  }
  .legal-section ul {
    max-width: 830px;
    margin: 14px 0 0;
    padding-left: 19px;
  }
  .legal-section li {
    margin: 9px 0;
  }
  .legal-section strong {
    color: var(--text);
    font-weight: 600;
  }
  .manifest-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .flow-step {
    border: 1px solid var(--line);
    background: var(--bg-1);
    padding: 22px;
  }
  .flow-step.is-current {
    border-color: rgba(255,122,61,0.42);
    box-shadow: inset 0 0 0 1px rgba(255,122,61,0.08);
  }
  .flow-step span {
    color: var(--hatch);
    font-family: "VT323", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
  }
  .flow-step h2 {
    margin: 12px 0 8px;
    font-size: 24px;
    font-weight: 500;
  }
  .flow-step p {
    color: var(--muted);
    line-height: 1.55;
  }
  .dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
  }
  .dashboard-actions button {
    border: 1px solid var(--line-2);
    background: rgba(255,255,255,0.03);
    color: var(--muted);
    padding: 10px 12px;
    font-family: "VT323", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
  }
  .mission-form {
    margin-top: 22px;
    display: grid;
    gap: 10px;
  }
  .mission-form--stacked {
    margin-top: 0;
  }
  .mission-form label,
  .form-status {
    font-family: "VT323", ui-monospace, monospace;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .stack-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.025);
  }
  .mission-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .mission-form input,
  .mission-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(5,8,12,0.84);
    color: var(--text);
    padding: 12px 13px;
    font: 13px/1.5 "VT323", ui-monospace, monospace;
    border-radius: 2px;
    outline: none;
  }
  .mission-form textarea {
    resize: vertical;
    min-height: 132px;
  }
  .mission-form .stack-toggle input {
    width: 18px;
    height: 18px;
    padding: 0;
    accent-color: var(--accent);
  }
  .mission-form input:focus,
  .mission-form textarea:focus {
    border-color: rgba(114,231,255,0.55);
    box-shadow: 0 0 0 2px rgba(114,231,255,0.08);
  }
  .mission-form button {
    border: 1px solid rgba(255,122,61,0.52);
    background: rgba(255,122,61,0.12);
    color: var(--text);
    padding: 12px 14px;
    font-family: "VT323", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .mission-form button:disabled {
    cursor: wait;
    color: var(--dim);
    border-color: var(--line);
  }
  .form-status {
    margin: 0;
    color: var(--dim);
  }

  /* =========================================================
     LEADGEN · [10] "watch the hatch" transmission receiver
     A single console field — input + button as one stamped
     unit. No raw browser input. Terminal/boarding-pass look.
     ========================================================= */
  .leadgen-row {
    max-width: 620px;
  }
  .leadgen-form { margin: 0; }
  .leadgen-console {
    display: flex;
    align-items: stretch;
    position: relative;
    border: 1px solid var(--line-2);
    background:
      linear-gradient(180deg, rgba(255,122,61,0.04), rgba(5,8,12,0)) ,
      rgba(5,8,12,0.86);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
    transition: border-color .2s ease, box-shadow .15s ease, transform .12s ease;
  }
  /* scanline that lights up on focus */
  .leadgen-console::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hatch), transparent);
    opacity: 0;
    transition: opacity .25s ease;
  }
  .leadgen-console:focus-within {
    border-color: rgba(255,122,61,0.6);
    box-shadow: 6px 6px 0 rgba(201,70,26,0.45), 0 0 0 2px rgba(255,122,61,0.1);
    transform: translate(-1px, -1px);
  }
  .leadgen-console:focus-within::before { opacity: 0.9; }

  .leadgen-rx {
    display: flex;
    align-items: center;
    padding: 0 12px 0 16px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.24em;
    color: var(--dim);
    border-right: 1px solid var(--line);
    background: rgba(255,255,255,0.015);
    transition: color .2s ease;
  }
  .leadgen-console:focus-within .leadgen-rx { color: var(--hatch); }

  .leadgen-input {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 14px;
    min-width: 0;
  }
  @keyframes leadgen-blink { 50% { opacity: 0; } }
  .leadgen-input input {
    flex: 1;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    caret-color: var(--hatch);
    caret-shape: block;
    padding: 15px 0;
    font: 15px/1.4 "VT323", ui-monospace, monospace;
    letter-spacing: 0.01em;
    outline: none;
  }
  .leadgen-input input::placeholder {
    color: var(--dim);
    letter-spacing: 0;
  }
  .leadgen-input input:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px rgba(5,8,12,0.96) inset;
    caret-color: var(--text);
  }

  .leadgen-submit {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-left: 1px solid var(--hatch-deep);
    background: var(--hatch);
    color: #110903;
    padding: 0 22px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background .2s ease;
  }
  .leadgen-submit:hover { background: #ff8a52; }
  .leadgen-submit:active { background: var(--hatch-deep); color: #fff; }
  .leadgen-submit:focus-visible {
    outline: 2px dashed #110903;
    outline-offset: -5px;
  }
  .leadgen-submit .arrow {
    font-family: monospace;
    transition: transform .15s ease;
  }
  .leadgen-submit:hover .arrow { transform: translateX(3px); }

  .leadgen-micro {
    margin-top: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
  }
  .leadgen-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--signal);
    text-transform: uppercase;
  }
  .leadgen-status .dot {
    width: 6px; height: 6px;
    background: var(--signal);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--signal);
    animation: leadgen-blink 1.6s steps(1) infinite;
  }

  @media (max-width: 520px) {
    .leadgen-console { flex-wrap: wrap; }
    .leadgen-rx {
      padding: 10px 14px;
      border-right: 0;
      border-bottom: 1px solid var(--line);
      width: 100%;
    }
    .leadgen-input {
      flex: 1 1 100%;
      padding: 0 14px;
      border-bottom: 1px solid var(--line);
    }
    .leadgen-submit {
      flex: 1 1 100%;
      border-left: 0;
      justify-content: center;
      padding: 14px 22px;
    }
  }

  .manifest-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.68fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    min-height: 620px;
  }
  .manifest-hero-copy {
    position: relative;
    z-index: 2;
  }
  .manifest-launchpad {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.09);
    background: #07090C;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.035),
      0 24px 80px rgba(0,0,0,0.35);
    isolation: isolate;
  }
  .manifest-launchpad::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: url("/manifest-cape-canaveral.jpg") 50% 62% / auto 118% no-repeat;
    filter: grayscale(0.20) saturate(0.56) contrast(1.16) brightness(0.28);
    opacity: 0.94;
    pointer-events: none;
    z-index: 0;
  }
  .manifest-launchpad::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 24px),
      radial-gradient(ellipse at 50% 78%, rgba(91,255,168,0.12), transparent 30%),
      linear-gradient(180deg, rgba(7,9,12,0.72) 0%, rgba(7,9,12,0.36) 30%, rgba(7,9,12,0.20) 54%, rgba(7,9,12,0.78) 100%),
      linear-gradient(90deg, rgba(7,9,12,0.66), transparent 46%, rgba(7,9,12,0.46));
    z-index: 1;
    pointer-events: none;
  }
  .launchpad-grade {
    position: absolute;
    left: 50%;
    bottom: 28px;
    width: 318px;
    height: 42px;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
  }
  .launchpad-grade::before {
    content: "";
    position: absolute;
    inset: 0 14px 12px;
    background:
      repeating-linear-gradient(90deg, rgba(122,130,148,0.14) 0 26px, transparent 26px 32px),
      linear-gradient(180deg, rgba(70,80,94,0.82) 0, rgba(42,51,62,0.88) 24%, rgba(21,26,34,0.90) 74%, rgba(9,12,17,0.94) 100%);
    border-top: 2px solid rgba(122,130,148,0.46);
    box-shadow:
      inset 0 1px 0 rgba(231,234,240,0.12),
      0 20px 32px rgba(0,0,0,0.42);
  }
  .launchpad-grade::after {
    content: "";
    position: absolute;
    left: 86px;
    right: 86px;
    bottom: 20px;
    height: 16px;
    background: radial-gradient(ellipse at 50% 50%, rgba(91,255,168,0.16), rgba(7,9,12,0.00) 64%);
    filter: blur(2px);
  }
  .launchpad-grade span {
    position: absolute;
    bottom: 0;
    width: 9px;
    height: 28px;
    background: linear-gradient(180deg, #1B222B, #090C11);
  }
  .launchpad-grade span:nth-child(1) { left: 76px; }
  .launchpad-grade span:nth-child(2) { left: 50%; transform: translateX(-50%); }
  .launchpad-grade span:nth-child(3) { right: 76px; }
  .launch-service-frame {
    position: absolute;
    left: calc(50% + 92px);
    bottom: 82px;
    width: 136px;
    height: 354px;
    z-index: 2;
    opacity: 0.72;
    pointer-events: none;
    filter: drop-shadow(0 16px 18px rgba(0,0,0,0.38));
  }
  .launch-service-frame::before {
    content: "";
    position: absolute;
    right: 0;
    top: 48px;
    bottom: 34px;
    width: 54px;
    background:
      linear-gradient(90deg, #4A5462 0 5px, transparent 5px 47px, #1A222D 47px 54px),
      repeating-linear-gradient(180deg, transparent 0 38px, rgba(122,130,148,0.34) 38px 43px),
      repeating-linear-gradient(135deg, transparent 0 30px, rgba(255,122,61,0.22) 30px 33px, transparent 33px 60px),
      repeating-linear-gradient(45deg, transparent 0 30px, rgba(122,130,148,0.16) 30px 33px, transparent 33px 60px),
      linear-gradient(90deg, rgba(32,39,50,0.84), rgba(12,16,22,0.88));
    border-top: 5px solid #46505E;
    border-bottom: 6px solid #090C11;
    box-shadow:
      inset 0 0 0 1px rgba(231,234,240,0.06),
      0 0 0 1px rgba(7,9,12,0.42);
  }
  .launch-service-frame::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: 22px;
    width: 116px;
    height: 12px;
    background:
      repeating-linear-gradient(90deg, #343D49 0 19px, #242B35 19px 24px),
      #343D49;
    border-top: 2px solid rgba(122,130,148,0.48);
    box-shadow:
      0 11px 0 -5px #090C11,
      0 16px 24px rgba(0,0,0,0.30);
  }
  .launch-service-frame span {
    position: absolute;
    display: block;
  }
  .service-deck {
    right: 0;
    height: 10px;
    background:
      linear-gradient(180deg, #4A5462 0 2px, #343D49 2px 7px, #171D26 7px 10px);
    border-top: 2px solid rgba(122,130,148,0.62);
    box-shadow:
      inset 0 -2px 0 #171D26,
      0 8px 0 -5px #090C11;
  }
  .service-deck::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 7px;
    top: -9px;
    height: 5px;
    background: repeating-linear-gradient(90deg, #606A78 0 3px, transparent 3px 12px);
  }
  .service-deck--top {
    top: 96px;
    width: 96px;
  }
  .service-deck--mid {
    top: 184px;
    width: 112px;
  }
  .service-arm {
    right: 46px;
    height: 8px;
    background:
      linear-gradient(180deg, rgba(122,130,148,0.54) 0 2px, #343D49 2px 6px, #161D26 6px 8px);
    transform-origin: right center;
    box-shadow:
      0 1px 0 rgba(10,13,18,0.82);
  }
  .service-arm::after {
    content: "";
    position: absolute;
    left: -7px;
    top: -3px;
    width: 8px;
    height: 13px;
    background: #D95A48;
    box-shadow:
      inset 0 -3px 0 #7C2D24,
      0 0 12px rgba(255,122,61,0.16);
  }
  .service-arm--upper {
    top: 136px;
    width: 78px;
    transform: rotate(-1deg);
  }
  .service-arm--lower {
    top: 238px;
    width: 68px;
    transform: rotate(5deg);
    opacity: 0.82;
  }
  .service-brace {
    right: 20px;
    height: 4px;
    background: #47505E;
    transform-origin: right center;
  }
  .service-brace--one {
    top: 268px;
    width: 92px;
    transform: rotate(-21deg);
  }
  .service-brace--two {
    bottom: 78px;
    width: 70px;
    transform: rotate(18deg);
    opacity: 0.52;
  }
  .service-light {
    right: 18px;
    width: 5px;
    height: 5px;
  }
  .service-light--green {
    top: 116px;
    background: #5BFFA8;
    box-shadow: 0 0 12px rgba(91,255,168,0.62);
  }
  .service-light--amber {
    top: 208px;
    background: #FFD25C;
    box-shadow: 0 0 10px rgba(255,210,92,0.42);
    opacity: 0.72;
  }
  .manifest-cruiser-canvas {
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 300px;
    height: 548px;
    transform: translateX(-50%);
    z-index: 3;
    image-rendering: auto;
    filter: drop-shadow(0 28px 34px rgba(0,0,0,0.56));
  }
  .manifest-join {
    display: grid;
    justify-items: center;
    gap: 18px;
    padding: 28px 0 16px;
  }
  .ground-support-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    border: 1px solid rgba(91,255,168,0.24);
    background: rgba(91,255,168,0.07);
    color: var(--muted);
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .ground-support-badge strong {
    color: var(--signal);
    font-weight: 600;
  }
  .ground-support-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 10px rgba(91,255,168,0.72);
  }
  .join-now-card {
    width: min(780px, 100%);
    border: 1px solid rgba(255,122,61,0.34);
    background:
      radial-gradient(circle at 50% 0%, rgba(255,122,61,0.16), transparent 36%),
      linear-gradient(180deg, rgba(17,21,28,0.96), rgba(8,11,15,0.98));
    padding: clamp(28px, 5vw, 52px);
    text-align: center;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.035),
      0 28px 90px rgba(0,0,0,0.34);
  }
  .join-now-card h2 {
    margin: 14px auto 12px;
    max-width: 680px;
    font-size: clamp(40px, 6vw, 78px);
    line-height: 0.95;
    font-weight: 500;
  }
  .join-now-card p {
    margin: 0 auto;
    max-width: 600px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.55;
  }
  .manifest-buy-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 380px);
    min-height: 66px;
    margin: 30px auto 12px;
    padding: 0 28px;
    border: 1px solid rgba(255,210,92,0.48);
    border-radius: 0;
    background:
      linear-gradient(180deg, rgba(255,210,92,0.22), rgba(255,122,61,0.14)),
      rgba(255,122,61,0.10);
    color: var(--text);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.04),
      0 0 0 1px rgba(255,122,61,0.18),
      0 18px 48px rgba(255,122,61,0.16);
    font-family: "VT323", ui-monospace, monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  }
  .manifest-buy-button:hover {
    border-color: rgba(255,210,92,0.76);
    color: #F4F7FB;
    transform: translateY(-1px);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.06),
      0 0 0 1px rgba(255,210,92,0.20),
      0 22px 60px rgba(255,122,61,0.22);
  }
  .manifest-buy-button:disabled {
    cursor: not-allowed;
    color: var(--dim);
    border-color: var(--line-2);
    background: rgba(255,255,255,0.035);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
    transform: none;
  }
  .manifest-buy-button:active {
    transform: translateY(1px);
  }
  .manifest-buy-button:focus-visible {
    outline: 2px solid rgba(255,210,92,0.80);
    outline-offset: 5px;
  }
  .manifest-seat-ladder {
    width: min(620px, 100%);
    margin: 24px auto 8px;
    display: grid;
    gap: 13px;
  }
  .manifest-seat-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    padding: 0 8px;
    min-height: 24px;
  }
  .manifest-seat-track::before {
    content: "";
    position: absolute;
    left: 13%;
    right: 13%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, rgba(91,255,168,0.38), rgba(255,210,92,0.34), rgba(90,99,113,0.42));
    transform: translateY(-50%);
  }
  .manifest-seat-node {
    position: relative;
    justify-self: center;
    width: 15px;
    height: 15px;
    border: 1px solid rgba(122,130,148,0.62);
    background: rgba(10,14,20,0.94);
    box-shadow:
      inset 0 0 0 3px rgba(122,130,148,0.10),
      0 0 0 3px rgba(7,9,12,0.92);
  }
  .manifest-seat-node.is-past {
    border-color: rgba(91,255,168,0.40);
    background: rgba(91,255,168,0.12);
  }
  .manifest-seat-node.is-current {
    width: 21px;
    height: 21px;
    border-color: rgba(91,255,168,0.86);
    background: rgba(91,255,168,0.24);
    box-shadow:
      inset 0 0 0 4px rgba(91,255,168,0.12),
      0 0 0 4px rgba(7,9,12,0.92),
      0 0 20px rgba(91,255,168,0.24);
  }
  .manifest-seat-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .manifest-seat-step {
    display: grid;
    gap: 3px;
    min-width: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--dim);
  }
  .manifest-seat-step strong {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
  }
  .manifest-seat-step span {
    color: var(--dim);
    font-size: 10px;
  }
  .manifest-seat-step small {
    color: rgba(138,147,164,0.72);
    font-size: 9px;
  }
  .manifest-seat-step.is-current strong,
  .manifest-seat-step.is-current span {
    color: var(--signal);
  }
  .manifest-seat-step.is-past strong {
    color: rgba(138,147,164,0.74);
  }
  .join-now-card .join-micro {
    color: var(--dim);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  @media (max-width: 820px) {
    .page-shell {
      padding: 20px 18px 72px;
    }
    .page-nav {
      display: grid;
    }
    .legal-hero,
    .legal-layout {
      grid-template-columns: 1fr;
    }
    .legal-index {
      position: static;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px 14px;
    }
    .legal-index a {
      padding: 7px 0;
    }
    .legal-callout {
      padding: 22px;
    }
    .profile-header,
    .profile-grid,
    .manifest-flow {
      grid-template-columns: 1fr;
    }
    .manifest-hero {
      grid-template-columns: 1fr;
      min-height: auto;
      gap: 26px;
      padding-top: 48px;
    }
    .manifest-launchpad {
      min-height: 480px;
    }
    .manifest-cruiser-canvas {
      width: 244px;
      height: 454px;
      bottom: 20px;
    }
    .launchpad-grade {
      width: 268px;
      height: 38px;
      bottom: 24px;
    }
    .launch-service-frame {
      left: calc(50% + 40px);
      bottom: 66px;
      width: 150px;
      height: 348px;
      transform: scale(0.86);
      transform-origin: bottom center;
    }
    .profile-header .btn {
      justify-self: start;
    }
    .mission-form-row {
      grid-template-columns: 1fr;
    }
  }

  /* astronaut suit avatars (identity panel + public profile) */
  .suit-avatar {
    width: 256px;
    height: 256px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    flex-shrink: 0;
  }
  .profile-avatar.suit-avatar {
    width: 256px;
    height: 256px;
  }
  .suit-panel {
    display: flex;
    gap: 18px;
    align-items: flex-start;
  }
  .suit-panel-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .suit-panel-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
  }
  .suit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .suit-actions button {
    flex: 1 1 auto;
  }
  .suit-btn-ghost {
    border: 1px solid var(--line) !important;
    background: rgba(255,255,255,0.025) !important;
    color: var(--muted) !important;
  }
  .suit-btn-ghost:hover {
    border-color: var(--line-2) !important;
    color: var(--text) !important;
  }
  .mission-form input[type="file"] {
    padding: 9px 11px;
    cursor: pointer;
  }

  @media (max-width: 820px) {
    .suit-panel {
      flex-direction: column;
    }
  }

  /* =========================================================
     DASHBOARD COMMAND CONSOLE — identity strip, tabs, trophy wall
     ========================================================= */
  .id-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding: 16px 18px;
    border: 1px solid var(--line-2);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(17,21,28,0.6), rgba(11,14,19,0.6));
  }
  .id-strip-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }
  .id-strip-mark {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 1px solid var(--line-2);
    border-radius: 3px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #11151C, #0A0D12);
  }
  .id-strip-mark::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hatch);
    box-shadow: 0 0 0 2px rgba(255,122,61,0.18), 0 0 12px rgba(255,122,61,0.55);
  }
  .id-strip-id {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .id-strip-handle {
    color: var(--text);
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .id-strip-seat {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(156,210,255,0.3);
    border-radius: 2px;
    color: var(--ice);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(156,210,255,0.05);
  }
  .id-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }
  .id-tab {
    appearance: none;
    cursor: pointer;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
    color: var(--muted);
    font-family: "VT323", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
  }
  .id-tab:hover {
    color: var(--text);
    border-color: var(--line-2);
  }
  .id-tab[data-active] {
    color: var(--text);
    border-color: rgba(255,122,61,0.45);
    background: rgba(255,122,61,0.07);
  }

  .tab-panel {
    display: none;
    margin-top: 22px;
  }
  .tab-panel[data-active] {
    display: block;
  }
  [data-tab-panel="crew"][data-active] {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 18px;
  }

  .console-countdown {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 14px;
  }
  .console-countdown .cc-readout {
    font-family: "VT323", ui-monospace, monospace;
    font-size: clamp(26px, 3.6vw, 38px);
    color: var(--hatch);
    letter-spacing: -0.01em;
    text-shadow: 0 0 18px rgba(255,122,61,0.28);
  }
  .console-countdown .cc-cap {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .mission-form.is-transmitting {
    opacity: 0.74;
  }
  .mission-sequence-lock {
    overflow: hidden;
  }
  .mission-launch-sequence {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    color: var(--text);
    background:
      linear-gradient(180deg, rgba(7,9,12,0.98), rgba(9,13,18,0.96) 48%, rgba(3,5,8,0.99)),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 72px);
  }
  .mission-launch-sequence::before {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: -2;
    background:
      linear-gradient(116deg, transparent 0 36%, rgba(156,210,255,0.10) 37%, transparent 39% 100%),
      linear-gradient(244deg, transparent 0 54%, rgba(255,210,92,0.12) 55%, transparent 58% 100%);
    opacity: 0.85;
    transform: skewY(-6deg);
  }
  .mission-launch-sequence::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px);
    mix-blend-mode: screen;
    opacity: 0.45;
  }
  .mission-launch-sequence.is-leaving {
    opacity: 0;
    transition: opacity 0.32s ease;
  }
  .launch-grid {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(rgba(255,122,61,0.12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,122,61,0.12) 1px, transparent 1px);
    background-size: 96px 96px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 76%, transparent);
    opacity: 0.24;
  }
  .launch-telemetry {
    position: absolute;
    top: 28px;
    left: 28px;
    right: 28px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--serial);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .launch-count {
    position: relative;
    z-index: 2;
    font-family: "Anton", "Space Grotesk", sans-serif;
    font-size: clamp(74px, 15vw, 210px);
    line-height: 0.9;
    letter-spacing: 0;
    color: #f4ead8;
    text-shadow:
      0 0 28px rgba(255,210,92,0.28),
      0 0 90px rgba(255,122,61,0.28);
  }
  .launch-count.is-pop {
    animation: launch-count-pop 0.42s cubic-bezier(.18,.82,.22,1);
  }
  .launch-mission {
    position: absolute;
    left: 22px;
    right: 22px;
    top: calc(50% + 94px);
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
    color: var(--muted);
    text-align: center;
    font-size: clamp(14px, 2vw, 22px);
    line-height: 1.35;
  }
  .launch-pad {
    position: absolute;
    left: 50%;
    bottom: 4vh;
    width: min(460px, 82vw);
    height: min(520px, 64vh);
    transform: translateX(-50%);
    pointer-events: none;
  }
  .launch-service-arm {
    position: absolute;
    left: calc(50% + 54px);
    bottom: 54px;
    width: 76px;
    height: 320px;
    border-left: 2px solid rgba(156,210,255,0.22);
    border-right: 2px solid rgba(156,210,255,0.12);
    background:
      repeating-linear-gradient(135deg, transparent 0 17px, rgba(156,210,255,0.18) 17px 19px, transparent 19px 34px),
      rgba(255,255,255,0.02);
  }
  .launch-service-arm::before,
  .launch-service-arm::after {
    content: "";
    position: absolute;
    left: -78px;
    width: 92px;
    height: 12px;
    border: 1px solid rgba(255,210,92,0.28);
    background: rgba(255,210,92,0.06);
  }
  .launch-service-arm::before { top: 68px; }
  .launch-service-arm::after { top: 154px; }
  .launch-rocket-stack {
    position: absolute;
    left: 50%;
    bottom: 68px;
    width: 94px;
    height: 222px;
    transform: translateX(-50%);
    transform-origin: 50% 90%;
  }
  .launch-rocket {
    position: absolute;
    inset: 0 8px 42px;
    clip-path: polygon(50% 0, 82% 18%, 74% 100%, 26% 100%, 18% 18%);
    background:
      linear-gradient(90deg, #8a98a4 0 12%, #f2eadc 13% 50%, #cfd8de 51% 88%, #667380 89%),
      linear-gradient(180deg, transparent 0 58%, var(--hatch) 59% 66%, transparent 67%);
    box-shadow:
      inset 0 0 0 2px rgba(7,9,12,0.42),
      0 0 28px rgba(156,210,255,0.22);
  }
  .launch-rocket::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 35px;
    width: 24px;
    height: 24px;
    transform: translateX(-50%);
    border: 3px solid #1f2a34;
    border-radius: 50%;
    background: var(--ice);
    box-shadow: inset -5px -5px 0 rgba(7,9,12,0.22), 0 0 18px rgba(156,210,255,0.7);
  }
  .launch-rocket::after {
    content: "";
    position: absolute;
    left: 24%;
    right: 24%;
    bottom: 18px;
    height: 12px;
    background: var(--hatch);
    box-shadow: 0 -19px 0 rgba(255,210,92,0.86);
  }
  .launch-flame {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 46px;
    height: 72px;
    transform: translateX(-50%) scaleY(0.2);
    transform-origin: 50% 0;
    clip-path: polygon(50% 100%, 8% 12%, 38% 26%, 50% 0, 62% 26%, 92% 12%);
    background: linear-gradient(180deg, #f8f0c8, var(--serial) 30%, var(--hatch) 66%, transparent);
    opacity: 0;
    filter: drop-shadow(0 0 22px rgba(255,122,61,0.85));
  }
  .launch-smoke {
    position: absolute;
    left: 50%;
    bottom: 42px;
    width: 22px;
    height: 22px;
    transform: translateX(-50%) scale(0);
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(156,210,255,0.10);
    opacity: 0;
  }
  .launch-smoke-b {
    bottom: 30px;
    background: rgba(255,210,92,0.10);
  }
  .launch-impact {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%) scale(0);
    border: 2px solid var(--serial);
    opacity: 0;
  }
  .mission-launch-sequence.is-liftoff .launch-rocket-stack {
    animation: rocket-liftoff 1.08s cubic-bezier(.16,.84,.24,1) forwards;
  }
  .mission-launch-sequence.is-liftoff .launch-service-arm {
    animation: service-arm-release 0.52s ease forwards;
  }
  .mission-launch-sequence.is-liftoff .launch-flame {
    opacity: 1;
    animation: flame-burn 0.1s steps(2) infinite;
  }
  .mission-launch-sequence.is-liftoff .launch-smoke-a {
    animation: launch-smoke-a 0.92s ease-out forwards;
  }
  .mission-launch-sequence.is-liftoff .launch-smoke-b {
    animation: launch-smoke-b 0.92s 0.08s ease-out forwards;
  }
  .mission-launch-sequence.is-impact {
    animation: sequence-impact-flash 0.72s ease-out;
  }
  .mission-launch-sequence.is-impact .launch-impact {
    animation: launch-impact-ring 0.72s ease-out forwards;
  }
  .mission-clock-landing {
    position: relative;
    padding: 12px 0 10px;
    border-top: 1px solid rgba(255,210,92,0.24);
    border-bottom: 1px solid rgba(255,210,92,0.12);
    animation: clock-landing 0.9s cubic-bezier(.18,.82,.22,1);
  }
  .mission-impact-lock {
    overflow: visible;
    animation: mission-card-hit 0.7s cubic-bezier(.18,.82,.22,1);
  }
  .mission-impact-burst {
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 8;
    width: 18px;
    height: 18px;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }
  .mission-impact-burst::before,
  .mission-impact-burst::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .mission-impact-burst::before {
    border: 2px solid var(--serial);
    box-shadow: 0 0 22px rgba(255,210,92,0.58);
    animation: card-burst-ring 1.05s ease-out forwards;
  }
  .mission-impact-burst::after {
    background:
      conic-gradient(from 0deg, transparent 0 8%, var(--hatch) 9% 13%, transparent 14% 24%, var(--serial) 25% 29%, transparent 30% 45%, var(--ice) 46% 49%, transparent 50% 100%);
    animation: card-burst-sparks 0.82s ease-out forwards;
  }
  .mission-locked-state {
    display: grid;
    justify-items: start;
    gap: 12px;
  }

  @keyframes launch-count-pop {
    0% { transform: scale(0.72); opacity: 0; }
    52% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes rocket-liftoff {
    0% { transform: translateX(-50%) translateY(0) rotate(0deg); }
    22% { transform: translateX(-50%) translateY(-36px) rotate(-1deg); }
    100% { transform: translateX(-50%) translateY(-92vh) rotate(1deg); }
  }
  @keyframes service-arm-release {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(34px); opacity: 0.52; }
  }
  @keyframes flame-burn {
    0% { transform: translateX(-50%) scaleY(0.96) skewX(-3deg); }
    100% { transform: translateX(-50%) scaleY(1.18) skewX(3deg); }
  }
  @keyframes launch-smoke-a {
    0% { transform: translateX(-50%) scale(0); opacity: 0; }
    25% { opacity: 0.78; }
    100% { transform: translateX(calc(-50% - 130px)) translateY(46px) scale(8); opacity: 0; }
  }
  @keyframes launch-smoke-b {
    0% { transform: translateX(-50%) scale(0); opacity: 0; }
    25% { opacity: 0.68; }
    100% { transform: translateX(calc(-50% + 142px)) translateY(54px) scale(9); opacity: 0; }
  }
  @keyframes sequence-impact-flash {
    0% { filter: brightness(1); }
    18% { filter: brightness(1.9); }
    100% { filter: brightness(1); }
  }
  @keyframes launch-impact-ring {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(34); opacity: 0; }
  }
  @keyframes clock-landing {
    0% { opacity: 0; transform: translateY(20px) scale(0.96); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes mission-card-hit {
    0% { box-shadow: 0 0 0 rgba(255,210,92,0); transform: translateY(0); }
    32% { box-shadow: 0 0 52px rgba(255,210,92,0.28); transform: translateY(-3px); }
    100% { box-shadow: 0 0 0 rgba(255,210,92,0); transform: translateY(0); }
  }
  @keyframes card-burst-ring {
    0% { transform: scale(0); opacity: 0; }
    18% { opacity: 1; }
    100% { transform: scale(24); opacity: 0; }
  }
  @keyframes card-burst-sparks {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    24% { opacity: 1; }
    100% { transform: scale(16) rotate(34deg); opacity: 0; }
  }

  @media (max-width: 720px) {
    .launch-telemetry {
      top: 18px;
      left: 18px;
      right: 18px;
      flex-direction: column;
      gap: 4px;
      font-size: 12px;
    }
    .launch-mission {
      top: calc(50% + 76px);
      font-size: 15px;
    }
    .launch-pad {
      height: min(430px, 58vh);
      bottom: 1vh;
    }
    .launch-service-arm {
      height: 248px;
      left: calc(50% + 48px);
      bottom: 44px;
      transform: scale(0.86);
      transform-origin: bottom center;
    }
    .launch-rocket-stack {
      width: 78px;
      height: 190px;
      bottom: 48px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mission-launch-sequence,
    .launch-count,
    .launch-rocket-stack,
    .launch-service-arm,
    .launch-flame,
    .launch-smoke,
    .launch-impact,
    .mission-clock-landing,
    .mission-impact-lock,
    .mission-impact-burst::before,
    .mission-impact-burst::after {
      animation: none !important;
      transition: none !important;
    }
  }

  .record-panel {
    overflow: visible;
  }
  .record-body {
    padding: 22px;
    display: grid;
    gap: 26px;
  }
  .trophy-branch {
    display: grid;
    gap: 12px;
  }
  .trophy-branch-head {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .trophy-branch-head .n {
    color: var(--hatch);
  }
  .trophy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .trophy-node {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 14px 14px 16px;
    background: var(--bg-1);
    display: grid;
    gap: 8px;
  }
  .trophy-node.is-locked {
    opacity: 0.5;
    border-style: dashed;
  }
  .trophy-node-state {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dim);
  }
  .trophy-node-label {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--text);
  }
  .trophy-node-desc {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.45;
  }
  .trophy-node.is-earned.tone-ice {
    border-color: rgba(156,210,255,0.4);
    background:
      linear-gradient(180deg, rgba(156,210,255,0.06), transparent),
      var(--bg-1);
  }
  .trophy-node.is-earned.tone-ice .trophy-node-state {
    color: var(--ice);
  }
  .trophy-node.is-earned.tone-ice .trophy-node-label {
    color: var(--ice);
  }
  .trophy-node.is-earned.tone-hatch {
    border-color: rgba(255,122,61,0.45);
    background:
      linear-gradient(180deg, rgba(255,122,61,0.08), transparent),
      var(--bg-1);
  }
  .trophy-node.is-earned.tone-hatch .trophy-node-state {
    color: var(--hatch);
  }
  .trophy-node.is-earned.tone-hatch .trophy-node-label {
    color: var(--hatch);
  }

  .telemetry-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .telemetry-line .tl-k {
    color: var(--muted);
  }
  .telemetry-line .tl-dot {
    color: var(--dim);
  }
  .telemetry-line .tl-v {
    color: var(--ice);
    font-size: 14px;
    letter-spacing: 0;
  }
  .quarters-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--hatch);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .quarters-link:hover {
    color: #ff8a52;
  }

  .crew-door {
    align-self: start;
  }
  .crew-door-body {
    display: grid;
    gap: 16px;
  }
  .crew-door-body p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
  }
  .crew-door-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px dashed var(--line-2);
    border-radius: 3px;
    color: var(--dim);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  @media (max-width: 820px) {
    .trophy-grid {
      grid-template-columns: 1fr;
    }
    [data-tab-panel="crew"][data-active] {
      grid-template-columns: 1fr;
    }
  }

  /* =========================================================
     ARTISAN LAYER — opt-in utilities. Hand-built warmth on top
     of the HUD: grain, ember washes, dither bands, stamps,
     marginalia, pixel frames. Pages adopt these classes;
     nothing here is applied automatically.
     ========================================================= */
  :root {
    /* warm ember wash (use behind key sections, 4-6% alpha) */
    --ember: rgba(255,122,61,0.05);
    --ember-strong: rgba(255,122,61,0.10);
    /* warm-tinted hairline, to sit next to the pure-white ones */
    --warm-line: rgba(255,154,102,0.16);
    /* shared ember glow for hover under-shadows */
    --glow: rgba(255,122,61,0.30);
  }

  /* ---- film grain: fixed full-page overlay (feTurbulence data-URI).
     Add <div class="grain" aria-hidden="true"></div> once per page. */
  .grain {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    mix-blend-mode: screen;
  }
  /* contained variant: grain scoped to a positioned wrapper instead of the
     viewport — use when part of the page (e.g. the cinematic hero) must stay
     pristine. z-index stays above siblings inside the wrapper only. */
  .grain--contained {
    position: absolute;
    z-index: 10;
  }

  /* ---- ember wash: positionable warm radial behind a section.
     Parent needs position:relative. Tune with --wash-x/--wash-y/
     --wash-w/--wash-h. Decorative: add aria-hidden="true". */
  .ember-wash {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
      var(--wash-w, 640px) var(--wash-h, 320px)
      at var(--wash-x, 50%) var(--wash-y, 28%),
      var(--ember), transparent 70%);
  }
  .ember-wash--strong {
    background: radial-gradient(
      var(--wash-w, 640px) var(--wash-h, 320px)
      at var(--wash-x, 50%) var(--wash-y, 28%),
      var(--ember-strong), transparent 70%);
  }

  /* ---- dither band: 2px checker transition strip between sections
     (fades downward by default; --flip fades upward). */
  .dither-band {
    height: 10px;
    pointer-events: none;
    background-image: conic-gradient(
      var(--db-tone, rgba(255,122,61,0.16)) 25%, transparent 0 50%,
      var(--db-tone, rgba(255,122,61,0.16)) 0 75%, transparent 0);
    background-size: 4px 4px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent);
    mask-image: linear-gradient(180deg, #000, transparent);
  }
  .dither-band--flip {
    -webkit-mask-image: linear-gradient(0deg, #000, transparent);
    mask-image: linear-gradient(0deg, #000, transparent);
  }
  .dither-band--signal { --db-tone: rgba(91,255,168,0.14); }
  .dither-band--dim { --db-tone: rgba(138,147,164,0.12); }

  /* ---- stamps & seals: rubber-stamp marks for cards.
     BOARDED / AIRLOCKED / REDEEMED / SEAT 01 etc. */
  .stamp {
    display: inline-block;
    font-family: "VT323", monospace;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--hatch);
    border: 2px solid currentColor;
    padding: 5px 9px 3px;
    transform: rotate(-2deg);
    opacity: 0.92;
    /* ink texture — desaturated noise speckle, slightly uneven alpha */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='72' height='72' filter='url(%23i)' opacity='0.14'/%3E%3C/svg%3E");
    background-size: 72px 72px;
    user-select: none;
  }
  .stamp--signal { color: var(--signal); }   /* shipped / boarded */
  .stamp--serial { color: var(--serial); }   /* special: SEAT 01, redeemed */
  .stamp--sm { font-size: 14px; padding: 4px 7px 2px; }
  .stamp--lg { font-size: 22px; padding: 7px 12px 5px; border-width: 3px; }
  .stamp--tilt-r { transform: rotate(2deg); }
  .stamp--flat { transform: none; }

  /* ---- marginalia: small VT323 builder's notes in the margin.
     Sparse — 1-2 per page max. */
  .marginalia {
    display: inline-block;
    font-family: "VT323", monospace;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.03em;
    color: var(--muted); /* AA against --bg/--bg-1; readable notes stay readable */
  }
  .marginalia--serial { color: var(--serial); opacity: 0.82; }
  .marginalia--dim { color: var(--dim); } /* below AA — aria-hidden ornaments only */
  .marginalia--sm { font-size: 14px; }
  .marginalia--lg { font-size: 19px; }
  .marginalia--tilt { transform: rotate(-1.2deg); }

  /* ---- pixel frame: stepped pixel border for avatars/images,
     cut like the astronaut SVG corners. --hatch variant for warm. */
  .pixel-frame {
    --pf-line: var(--line-2);
    position: relative;
    border: 2px solid var(--pf-line);
    background: var(--bg-2);
    image-rendering: pixelated;
    clip-path: polygon(
      0 6px, 2px 6px, 2px 4px, 4px 4px, 4px 2px, 6px 2px, 6px 0,
      calc(100% - 6px) 0, calc(100% - 6px) 2px, calc(100% - 4px) 2px,
      calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 6px, 100% 6px,
      100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px),
      calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px),
      calc(100% - 4px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px),
      calc(100% - 6px) 100%,
      6px 100%, 6px calc(100% - 2px), 4px calc(100% - 2px),
      4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 6px),
      0 calc(100% - 6px));
  }
  .pixel-frame--hatch { --pf-line: var(--hatch-deep); }

  /* ---- ornament sprite sizing helpers (sprites.js: sparkle /
     divider / seal / wing render via data-sprite) */
  canvas.pixel-sprite { image-rendering: pixelated; }
  .sprite-inline { width: 16px; height: 16px; vertical-align: -3px; }
  .sprite-seal { width: 32px; height: 32px; }
  .sprite-wing { width: 48px; height: 21px; }
  .sprite-divider {
    display: block;
    width: min(256px, 100%);
    height: 24px;
    margin: 0 auto;
  }

  /* ---- warm hairline rule (sits next to the pure-white ones) */
  .warm-rule { height: 1px; border: 0; background: var(--warm-line); }

  /* ---- tactile press recipe: the .btn-primary feel for buttons that
     can't take .btn (form submits, Clerk's primary, checkout CTA).
     Single source of truth — --press-lift tunes the shadow throw. */
  .btn-tactile,
  button.btn-tactile,
  .hatch .cl-formButtonPrimary {
    --press-lift: 3px;
    border: 1px solid var(--hatch-deep);
    border-radius: 0;
    background: var(--hatch);
    color: #110903;
    box-shadow: var(--press-lift) var(--press-lift) 0 var(--hatch-deep);
    transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  }
  .btn-tactile:hover,
  button.btn-tactile:hover,
  .hatch .cl-formButtonPrimary:hover {
    background: #ff8a52;
    color: #110903;
    transform: translate(-1px, -1px);
    box-shadow: calc(var(--press-lift) + 1px) calc(var(--press-lift) + 1px) 0 var(--hatch-deep);
  }
  .btn-tactile:active,
  button.btn-tactile:active,
  .hatch .cl-formButtonPrimary:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--hatch-deep);
  }
  .btn-tactile:focus-visible,
  button.btn-tactile:focus-visible,
  .hatch .cl-formButtonPrimary:focus-visible {
    outline: 2px dashed var(--hatch);
    outline-offset: 3px;
  }
  .btn-tactile:disabled,
  button.btn-tactile:disabled {
    background: rgba(255,255,255,0.04);
    color: var(--dim);
    border-color: var(--line);
    box-shadow: none;
    transform: none;
  }

  /* ---- auth hatch: shared shell for /auth/login and /auth/signup.
     Markup in src/components/AuthHatch.astro; Clerk theme in
     src/lib/clerk-appearance.ts. */
  .login-shell {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 24px;
  }
  /* the hatch door — small airlock card around the Clerk widget */
  .hatch {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
  }
  .hatch-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--warm-line);
  }
  .hatch-prompt {
    font-family: "VT323", monospace;
    font-size: 19px;
    letter-spacing: 0.08em;
    color: var(--signal);
  }
  .hatch-cursor { animation: hatch-blink 1.1s steps(1) infinite; }
  @keyframes hatch-blink { 50% { opacity: 0; } }
  .hatch-body { padding: 10px 14px 16px; }
  /* Clerk internals: blend the card into the panel, warm hairline
     inputs; the primary button takes the tactile recipe above. */
  .hatch .cl-rootBox { width: 100%; }
  .hatch .cl-card,
  .hatch .cl-cardBox {
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  /* monochrome provider logos ship black; lift them onto the dark panel */
  .hatch .cl-providerIcon__x { filter: invert(1); }
  .hatch .cl-formFieldInput {
    border-radius: 0;
    background: var(--bg-1);
    border: 1px solid transparent;
    border-bottom: 1px solid var(--warm-line);
    box-shadow: none;
    color: var(--text);
  }
  .hatch .cl-formFieldInput:focus {
    border-bottom-color: var(--hatch);
    box-shadow: none;
  }
  .hatch .cl-formButtonPrimary {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
  }

  /* ---- restraint: kill new motion for reduced-motion users */
  @media (prefers-reduced-motion: reduce) {
    .btn:hover, .btn:active,
    .btn-tactile:hover, .btn-tactile:active,
    button.btn-tactile:hover, button.btn-tactile:active,
    .hatch .cl-formButtonPrimary:hover, .hatch .cl-formButtonPrimary:active,
    .step:hover, .protocol-card:hover { transform: none; }
    .btn, .btn-tactile, .hatch .cl-formButtonPrimary,
    .step, .protocol-card, .case { transition: none; }
    .hatch-cursor { animation: none; }
  }