/* 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;
    --wrap: 1280px;
    --hatch-art: #FF6651;
  }
  * { box-sizing: border-box; }
  html, body { 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: 100%;
    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; }

  /* ---- global scroll progress bar ----
     Fixed hairline at the very top edge. Fill scrubs 1:1 with page scroll
     (--sp written by story.js), so even while a section is pinned there is
     always visible proof the page is moving. The bright tip lights up only
     while actively scrolling. */
  .scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    z-index: 60; pointer-events: none;
    background: rgba(231, 234, 240, .08);
  }
  .scroll-progress > i {
    position: absolute; inset: 0;
    transform: scaleX(var(--sp, 0)); transform-origin: left center;
    background: linear-gradient(90deg, rgba(255, 210, 92, .55), var(--serial));
    box-shadow: 0 0 10px rgba(255, 210, 92, .4);
    will-change: transform;
  }
  .scroll-progress::after {
    content: ""; position: absolute; top: -2px; bottom: -2px; width: 5px;
    left: calc(var(--sp, 0) * 100%); margin-left: -3px;
    background: var(--serial);
    box-shadow: 0 0 12px rgba(255, 210, 92, .9);
    opacity: 0; transition: opacity .25s;
  }
  .scroll-progress.is-scrolling::after { opacity: 1; }

  .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;
      /* keep the navbar out of the hero on mobile — it overlaps the LAUNCH
         typeset. Only reveal it once the hero has scrolled out of view. */
      opacity: 0;
      transform: translateY(-100%);
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    body.hero-cleared .top-hud {
      opacity: 1;
      transform: none;
    }
    .top-hud .status-pill {
      display: none;
    }
    .top-hud .btn {
      padding: 7px 10px;
      font-size: 11px;
    }
    /* sublines were overflowing the viewport — shrink them on phones */
    .hero-sub-default,
    .hero-sub-alt {
      font-size: clamp(13px, 3.4vw, 18px);
      letter-spacing: 0.01em;
    }
    .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; }
    /* story comic reduced-motion */
    [class^="st-"], [class*=" st-"] {
      animation: none !important;
      transition: none !important;
    }
    /* Do NOT un-pin or force end-states here. The scroll scrub is user-controlled
       (it only moves when you scroll), so the pinned beats KEEP scrubbing under
       reduced motion — story.js attaches the scrub regardless. Only the autoplay
       loops/punches (silenced by `animation: none` above) stop. The WORTHLESS
       stamp can't punch, so resolve it to its at-rest visible state. */
    .st-bill-inner.is-zero .st-bill-flat { opacity: 1; transform: rotate(-6deg) scale(1); }
    .st-chapter [data-reveal],
    .st-seat01 [data-reveal],
    .st-cabin [data-reveal],
    .st-fineprint [data-reveal] {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    @keyframes st-punch { 0%, 100% { opacity: 1; transform: rotate(-13deg) scale(1); } }
    @keyframes st-pulse  { 0%, 100% { opacity: 1; transform: scale(1); } }
    @keyframes st-nextpulse { 0%, 100% { box-shadow: none; } }
    @keyframes st-blink  { 0%, 100% { opacity: 1; } }
  }

/* ===== STORY COMIC (st- namespace) ===== */

/* ---- rail (chapter progress dots, fixed right side) ---- */
.st-rail {
  position: fixed; right: 18px; top: 50%;
  transform: translateY(-50%); z-index: 50;
  display: flex; flex-direction: column; gap: 11px;
}
.st-rail a {
  display: flex; align-items: center; gap: 9px;
  justify-content: flex-end; text-decoration: none;
  color: var(--dim); font-family: "VT323", monospace;
  font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; transition: color .25s;
}
.st-rail-d {
  width: 8px; height: 8px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  transition: all .25s;
}
.st-rail-t {
  opacity: 0; transform: translateX(6px);
  transition: all .25s; white-space: nowrap;
}
.st-rail a:hover .st-rail-t,
.st-rail a.active .st-rail-t { opacity: 1; transform: translateX(0); }
.st-rail a.active { color: var(--text); }
.st-rail a.active .st-rail-d {
  background: var(--hatch); border-color: var(--hatch);
  box-shadow: 0 0 10px var(--hatch);
}
@media (max-width: 820px) { .st-rail { display: none; } }

/* ---- shared chapter scaffold ---- */
.st-chapter {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: flex; align-items: center;
  padding: 88px clamp(20px, 6vw, 90px);
  overflow: hidden;
}

/* ---- pinned + scrubbed slide scaffold ---- */
.st-slide { position: relative; z-index: 1; height: 180vh; --p: 1; }
/* The bill is the slow beat — value bleeds to $0 in your hands, so it pins long. */
.st-slide.st-bill { height: 360vh; }
.st-pin { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; align-items: center; padding: 88px clamp(20px, 6vw, 90px); }
/* Copy fades in over the first quarter of the pin, then keeps a slow continuous
   rise (the `var(--p) * -12px` term) so it drifts on every scrolled frame instead
   of freezing once the fade completes. */
.st-slide .st-inner { opacity: clamp(0, calc(var(--p) * 4), 1); transform: translateY(calc((1 - clamp(0, calc(var(--p) * 4), 1)) * 28px + var(--p) * -12px)); will-change: opacity, transform; }
/* Base scale 1.06 gives the continuous upward drift headroom — the bg pans + zooms
   through the WHOLE pin, never sitting still. */
.st-slide .st-bg { transform: scale(calc(1.06 + var(--p) * 0.08)) translate3d(0, calc(var(--p) * -1.6%), 0); transform-origin: center; will-change: transform; }

/* Per-pin scrub meter — small bar at the bottom of every pinned frame that fills
   1:1 with the pin's scroll progress (--p, written by story.js on every scrolled
   frame). Direct feedback that scrolling is working while a beat is pinned. */
.st-pin::before {
  content: ""; position: absolute; z-index: 7;
  left: 50%; bottom: 18px; width: 140px; height: 3px; margin-left: -70px;
  background: rgba(231, 234, 240, .16);
  pointer-events: none;
}
.st-pin::after {
  content: ""; position: absolute; z-index: 7;
  left: 50%; bottom: 18px; width: 140px; height: 3px; margin-left: -70px;
  background: var(--serial);
  box-shadow: 0 0 10px rgba(255, 210, 92, .5);
  transform: scaleX(var(--p, 0)); transform-origin: left center;
  pointer-events: none; will-change: transform;
}

.st-pin--fork { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding: 0; }
@media (max-width: 760px) { .st-pin--fork { grid-template-columns: 1fr; grid-template-rows: auto 1fr 1fr; } }
.st-pin--fork .st-ic, .st-pin--fork .st-seam-head { opacity: clamp(0, calc(var(--p) * 4), 1); transform: translateY(calc((1 - clamp(0, calc(var(--p) * 4), 1)) * 20px)); will-change: opacity, transform; }

.st-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  image-rendering: auto;
}
.st-scrim {
  position: absolute; inset: 0; z-index: 1;
}
.st-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); margin: 0 auto;
}
.st-kicker {
  font-family: "VT323", monospace;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--serial); margin: 0 0 14px;
}
.st-h-beat {
  font-family: "Anton", sans-serif; font-weight: 400;
  line-height: .94; margin: 0;
  font-size: clamp(40px, 7vw, 104px);
  letter-spacing: .005em;
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
.st-h-beat em { font-style: normal; color: var(--hatch); }
.st-body-line {
  font-size: clamp(17px, 2vw, 24px); color: var(--text);
  max-width: 46ch; margin: 20px 0 0; font-weight: 400;
  text-shadow: 0 1px 14px rgba(7,9,12,.85), 0 0 2px rgba(7,9,12,.7);
}
.st-body-line--dim { color: #B6BDCB; }

/* ---- stamp--airlocked (check: stamp and stamp--signal/serial already exist) ---- */
.stamp--airlocked {
  color: var(--hatch);
  border-color: var(--hatch);
  box-shadow: 3px 3px 0 var(--hatch-deep);
}
/* stamp punch animation */
@keyframes st-punch {
  0%   { opacity: 0; transform: rotate(-13deg) scale(2.2); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(-13deg) scale(1); }
}
.stamp.is-punching { animation: st-punch .5s cubic-bezier(.2,1.4,.3,1) both; }

/* ---- P1 drift ---- */
/* flip-sign: two faces, keyboard-operable */
.st-flip {
  display: inline-block; cursor: pointer;
  background: rgba(7,9,12,.6); border: 1px solid var(--line-2);
  color: var(--text); padding: 12px 18px;
  font-family: "VT323", monospace;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: .04em; margin-top: 22px;
  text-align: left; max-width: 38ch;
  box-shadow: 0 0 30px rgba(156,210,255,.08);
}
.st-flip:focus-visible { outline: 2px dashed var(--hatch); outline-offset: 3px; }
.st-flip-back { display: none; }
.st-flip[aria-pressed="true"] .st-flip-front { display: none; }
.st-flip[aria-pressed="true"] .st-flip-back { display: inline; }

/* ---- P2 bill: scrub-driven value bleed ---- */
/* --bill-fill 1→0 (cash remaining) · --bill-empty 0→1 (drained), both written by story.js */
.st-bill-inner { --bill-fill: 1; --bill-empty: 0; }

.st-ledger { position: relative; display: inline-block; margin: 2px 0 4px; }

.st-ledger-label {
  display: block;
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--serial); opacity: .8; margin: 0 0 6px;
}

.st-bill-num {
  position: relative;
  font-family: "Anton", sans-serif; font-weight: 400;
  font-size: clamp(96px, 24vw, 380px);
  line-height: .78; letter-spacing: -.012em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  /* cash → ice/gold, drained → ember red; crossfades with scroll */
  color: color-mix(in oklab,
    var(--ice) calc(var(--bill-fill) * 100%),
    var(--hatch-art));
  text-shadow:
    0 2px 30px rgba(7,9,12,.7),
    0 0 calc(18px + var(--bill-empty) * 80px) rgba(255,102,81, calc(.08 + var(--bill-empty) * .42));
  transition: text-shadow .18s linear;
}

/* terminal scanlines over the number, faint until it empties then they bite */
.st-ledger-scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  mix-blend-mode: overlay;
  opacity: calc(.12 + var(--bill-empty) * .35);
  background: repeating-linear-gradient(
    0deg, rgba(7,9,12,.55) 0 1px, transparent 1px 4px);
  /* scanlines crawl with the scroll so the long $0 hold (last 35% of the 360vh
     pin) never reads as frozen */
  background-position: 0 calc(var(--p, 0) * -96px);
}

/* depleting value bar */
.st-bill-meter {
  position: relative; height: 7px; margin-top: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.st-bill-meter > i {
  position: absolute; inset: 0; transform-origin: left center;
  transform: scaleX(var(--bill-fill));
  background: linear-gradient(90deg, var(--serial), var(--hatch));
  box-shadow: 0 0 14px rgba(255,102,81,.55);
  transition: transform .12s linear;
}

/* WORTHLESS flatline stamp — punches in only at $0, then holds */
.st-bill-flat {
  position: absolute; left: 0; top: calc(100% + 18px); z-index: 3;
  font-family: "Anton", sans-serif; font-size: clamp(20px, 3.6vw, 48px);
  letter-spacing: .14em; color: var(--bg);
  background: var(--hatch-art); padding: 4px 16px 2px;
  box-shadow: 4px 4px 0 var(--hatch-deep);
  transform: rotate(-6deg) scale(.4); transform-origin: left center;
  opacity: 0; pointer-events: none;
}
.st-bill-inner.is-zero .st-bill-flat {
  animation: st-bill-flat-punch .42s cubic-bezier(.2,1.5,.3,1) both;
}
@keyframes st-bill-flat-punch {
  0%   { opacity: 0; transform: rotate(-6deg) scale(.4); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(-6deg) scale(1); }
}

/* ironic stat ledger — commits climb while value drains */
.st-bill-stats {
  display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 3vw, 44px);
  margin-top: 22px; color: var(--ice); opacity: .8;
  font-size: clamp(15px, 1.6vw, 20px); letter-spacing: .04em;
}
.st-bill-stats div { display: flex; align-items: baseline; gap: 8px; }
.st-bill-stats dt { color: var(--serial); opacity: .7; text-transform: uppercase; letter-spacing: .12em; font-size: .8em; }
.st-bill-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.st-bill-stats [data-bill-commits] { color: var(--text); }

/* ---- P3 gate: two-column inner ---- */
.st-gate-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 860px) { .st-gate-inner { grid-template-columns: 1fr; } }
/* mobile: the live 100-seat widget is far taller than the viewport — un-pin the gate
   so it grows and scrolls (clearing the sticky HUD) instead of being clipped by the pin */
@media (max-width: 760px) {
  .st-gate.st-slide { height: auto; }
  .st-gate .st-pin {
    position: static; height: auto; min-height: 100dvh;
    overflow: visible; padding-top: 96px; padding-bottom: 56px;
    /* dark fill: the board owns most of the section and the bg art can't be
       seen full-bleed on mobile anyway — blend the rest into the page bg */
    background: var(--bg);
  }
  .st-gate .st-inner { opacity: 1 !important; transform: none !important; }
  /* gate is un-pinned on mobile — its scrub meter would be meaningless */
  .st-gate .st-pin::before, .st-gate .st-pin::after { display: none; }
  /* Show the boarding-gate art as a COVER band pinned to the top of the
     section — cover fills the band so there are NO letterbox bars (contain
     would bar a square image in a tall section), and the rest of the section
     below the band is just the dark pin fill. */
  .st-gate .st-bg {
    transform: none !important;
    inset: 0 0 auto 0;            /* pin to top, release the bottom */
    height: min(100vw, 50vh);     /* square art fills this top band */
    object-fit: cover;
    object-position: center;
  }
  /* darken the top image band for headline legibility, then fade into the dark
     fill below so the band blends in with no visible seam */
  .st-gate .st-scrim {
    background: linear-gradient(180deg, rgba(7,9,12,.42), rgba(7,9,12,.92) 46%) !important;
  }
}
.st-gate-copy { /* left column, no extra styles needed */ }
.st-board {
  position: relative;
  background: linear-gradient(180deg, rgba(14,18,24,.92), rgba(7,9,12,.92));
  border: 1px solid var(--line-2);
  padding: 6px;
  box-shadow:
    0 0 0 1px rgba(255,210,92,.08),
    0 30px 80px -30px rgba(91,255,168,.25),
    inset 0 0 60px rgba(91,255,168,.04);
}
/* decorative reticle — positioned by story.js */
.st-reticle {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  border: 1px solid var(--serial);
  box-shadow: 0 0 10px rgba(255,210,92,.4);
  display: none; /* shown by story.js after measure */
}

/* ---- P4 declaration ---- */
.st-term {
  font-family: "VT323", monospace;
  font-size: clamp(20px, 2.6vw, 34px);
  color: var(--ice); letter-spacing: .04em;
  background: rgba(7,9,12,.6);
  border: 1px solid rgba(156,210,255,.25);
  padding: 14px 18px; display: inline-block;
  margin-top: 22px;
  box-shadow: 0 0 30px rgba(156,210,255,.1);
}
@keyframes st-blink { 50% { opacity: 0; } }
.st-caret {
  display: inline-block; width: .6ch;
  background: var(--ice);
  animation: st-blink 1s steps(1) infinite;
  margin-left: 2px;
}
.st-stencils { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.st-stencil {
  font-family: "VT323", monospace; letter-spacing: .16em;
  text-transform: uppercase; font-size: 15px;
  padding: 8px 14px; border: 1px solid var(--line-2);
  color: var(--dim); background: rgba(7,9,12,.5);
  opacity: .4; transition: all .4s;
}
.st-stencil.st-lit {
  color: var(--serial); border-color: rgba(255,210,92,.5);
  opacity: 1; box-shadow: 0 0 16px rgba(255,210,92,.2);
}

/* ---- P5 fate reveal (hatch + fork merged, 300vh scrubbed) ---- */
.st-reveal { height: 300vh; }
.st-pin--reveal {
  display: block; padding: 0;
  background: radial-gradient(80% 80% at 50% 50%, rgba(201,70,26,.16), var(--bg) 70%);
}
.st-reveal-fork {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 760px) {
  /* stack the two fates and let them SHARE the viewport so the split reads.
     padding-top drops the whole stack below the fixed top-hud so the seam-head
     heading ("THE HATCH OPENS…") isn't overlapped by the bar on mobile. */
  .st-reveal-fork { grid-template-columns: 1fr; grid-template-rows: auto 1fr 1fr; padding-top: 64px; }
  .st-reveal-fork .st-half { min-height: 0; align-items: flex-start; padding: 18px clamp(18px, 5vw, 28px); }
  .st-reveal-fork .st-half .st-ic { align-self: flex-end; }
  /* flatten the LAUNCHED / AIRLOCKED fate stamps on mobile — the punch
     end-state (rotate(-13deg)) tips the long labels out of the narrow halves.
     Equal-specificity + later source order beats .stamp.is-punching, no !important. */
  .st-reveal-fork .stamp { animation: none; transform: none; }
}
.st-reveal-hatch { position: absolute; inset: 0; z-index: 2; }
.st-door-half {
  position: absolute; top: 0; height: 100%; width: 50%;
  background-color: var(--bg);
  background-image: url("/story/panel-05-hatch.webp");
  background-size: 200% 100%;
  background-repeat: no-repeat;
  image-rendering: auto; will-change: transform;
}
/* mobile: don't vertically stretch the square door — keep aspect, dark fill above/below */
@media (max-width: 760px) {
  .st-door-half { background-size: 200% auto; background-position: left center; }
  .st-door-half.st-r { background-position: right center; }
}
.st-door-half.st-l {
  left: 0; background-position: left center;
  transform: translateX(calc(clamp(0, (var(--p) - 0.45) / 0.25, 1) * -110%));
}
.st-door-half.st-r {
  right: 0; background-position: right center;
  transform: translateX(calc(clamp(0, (var(--p) - 0.45) / 0.25, 1) * 110%));
}
.st-seam-flash {
  position: absolute; inset: 0; z-index: 3;
  background: #fff; opacity: 0;
  pointer-events: none; mix-blend-mode: screen; will-change: opacity;
}
.st-copy {
  position: absolute; z-index: 4;
  left: 50%; bottom: 9vh;
  transform: translateX(-50%);
  text-align: center; width: min(560px, 88vw);
  padding: 20px clamp(20px, 4vw, 32px);
  background: rgba(7, 9, 12, .82);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-2);
  box-shadow: 0 18px 50px -16px rgba(0, 0, 0, .9);
  opacity: clamp(0, (0.6 - var(--p)) / 0.15, 1);
  will-change: opacity;
}
.st-count {
  font-family: "Anton", sans-serif;
  font-size: clamp(40px, 8vw, 92px);
  color: var(--hatch); letter-spacing: .02em;
  text-shadow: 0 0 30px rgba(255,102,81,.5), 0 0 70px rgba(255,102,81,.25);
  line-height: 1;
}
.st-copy .st-body-line { margin: 10px auto 0; text-align: center; }
.st-reveal-fork .st-ic,
.st-reveal-fork .st-seam-head {
  opacity: clamp(0, (var(--p) - 0.70) / 0.30, 1);
  /* extra (1 - var(--p)) term keeps the fork copy rising continuously through
     the tail of the reveal instead of snapping still at the fade's end */
  transform: translateY(calc((1 - clamp(0, (var(--p) - 0.70) / 0.30, 1)) * 20px + (1 - var(--p)) * 14px));
  will-change: opacity, transform;
}

/* ---- fork layout (used inside .st-reveal-fork) ---- */
.st-half {
  position: relative; min-height: 100dvh;
  display: flex; align-items: flex-end;
  padding: clamp(28px, 5vw, 72px); overflow: hidden;
}
.st-half .st-bg { object-fit: cover; width: 100%; height: 100%; }
.st-sc { position: absolute; inset: 0; z-index: 1; }
.st-ic { position: relative; z-index: 2; }
.st-fork-lbl {
  font-family: "VT323", monospace; letter-spacing: .16em;
  text-transform: uppercase; font-size: 15px; margin-bottom: 10px;
}
.st-win .st-fork-lbl { color: var(--signal); }
.st-fail .st-fork-lbl { color: var(--hatch); }
.st-reveal-fork h3 {
  font-family: "Anton", sans-serif;
  font-size: clamp(30px, 3.6vw, 52px);
  margin: 0 0 14px; line-height: .96;
}
.st-reveal-fork p { color: var(--muted); max-width: 34ch; margin: 0 0 16px; }
.st-fail .stamp { filter: grayscale(0.6); }
.st-seam-head {
  position: absolute; z-index: 4;
  /* center via auto-margins, NOT transform — the reveal scrub rule
     (.st-reveal-fork .st-seam-head) overrides `transform` with translateY,
     which would clobber a translateX(-50%) centering and shove the box right. */
  top: 9vh; left: 0; right: 0; margin-inline: auto;
  text-align: center; width: min(680px, 92vw);
  padding: 18px 26px;
  background: rgba(7,9,12,.74); backdrop-filter: blur(7px);
  border: 1px solid var(--line-2);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.8);
}
.st-seam-head .st-kicker { margin-bottom: 8px; }
.st-seam-head h2 {
  font-family: "Anton", sans-serif;
  font-size: clamp(26px, 3.4vw, 50px);
  margin: 0; line-height: .98;
}
@media (max-width: 760px) {
  .st-seam-head {
    position: static; transform: none;
    width: auto; padding: 14px 20px;
    grid-column: 1;
  }
  .st-seam-head h2 { font-size: clamp(20px, 6vw, 28px); }
}

/* ---- P7 wake ---- */
.st-redeem {
  display: flex; align-items: center;
  gap: 14px; margin-top: 24px; flex-wrap: wrap;
}
.st-arrow { color: var(--dim); font-family: "VT323", monospace; font-size: 22px; }
/* the [REDEEMED] stamp keeps a rotate(-13deg) punch end-state; drop the note
   below it onto its own line with clearance so they never overlap */
.st-wake .st-redeem + .marginalia {
  display: block;
  margin-top: 22px;
}

/* ---- P8 seat 01 ---- */
.st-seat01 {
  min-height: 100dvh; display: flex;
  align-items: flex-start; justify-content: center;
  text-align: center; padding: clamp(72px, 9vh, 110px) 24px;
  position: relative; z-index: 1;
  overflow: visible;
  background: radial-gradient(60% 60% at 50% 45%, rgba(255,122,61,.06), transparent), var(--bg);
}
.st-seat01 .st-inner { max-width: 760px; }
.st-portrait {
  position: relative; width: 220px; height: 220px;
  margin: 0 auto 24px;
}
.st-portrait img {
  width: 100%; height: 100%; object-fit: cover;
}
.st-portrait::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(91,255,168,.4), transparent 32%, transparent 68%, rgba(255,122,61,.42));
  mix-blend-mode: screen;
}
.st-plate {
  display: inline-block; font-family: "VT323", monospace;
  letter-spacing: .18em; color: var(--serial);
  border: 1px solid rgba(255,210,92,.4);
  padding: 5px 12px; font-size: 14px;
  margin-bottom: 18px; text-transform: uppercase;
}
.st-quote {
  font-family: "Anton", sans-serif;
  font-size: clamp(26px, 4vw, 52px); line-height: 1; margin: 0;
}
.st-seat01 .st-body-line { margin-inline: auto; }
.st-clock {
  font-family: "VT323", monospace; color: var(--hatch);
  letter-spacing: .08em; margin-top: 8px; font-size: 18px;
}

/* ---- P9 boarding cta ---- */
.st-board-cta .st-inner { text-align: left; }
.st-board-cta .st-h-beat { max-width: 18ch; }
.st-cta-row {
  display: flex; gap: 18px; align-items: center;
  margin-top: 30px; flex-wrap: wrap;
}
.st-micro {
  font-family: "VT323", monospace; color: var(--muted);
  letter-spacing: .16em; text-transform: uppercase; font-size: 14px;
}

/* ---- fine print: price ladder ---- */
.st-fineprint {
  position: relative; z-index: 1;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  padding: 60px clamp(20px, 6vw, 90px);
}
.st-fineprint-inner { max-width: var(--wrap); margin: 0 auto; }
.st-fineprint h4 {
  font-family: "VT323", monospace; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  font-size: 15px; margin: 0 0 18px;
  text-align: center;
}
/* ladder is the FAQ header band — centered, with clearance before the Q&A */
.st-fineprint .manifest-seat-ladder { margin: 8px auto 30px; }
/* FAQ accordion — scoped, NEVER bare details/summary */
.st-fineprint details {
  border-top: 1px solid var(--line); padding: 14px 0;
}
.st-fineprint details:last-child { border-bottom: 1px solid var(--line); }
.st-fineprint summary {
  cursor: pointer; font-weight: 500; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.st-fineprint summary::-webkit-details-marker { display: none; }
.st-fineprint summary::after {
  content: "+"; font-family: "VT323", monospace;
  color: var(--hatch); font-size: 22px;
}
.st-fineprint details[open] summary::after { content: "–"; }
.st-fineprint details p {
  color: var(--muted); margin: 12px 0 0; max-width: 70ch;
  line-height: 1.6;
}
.st-fineprint summary:focus-visible {
  outline: 2px dashed var(--hatch); outline-offset: 3px;
}

/* ---- story footer ---- */
.st-footer {
  position: relative; z-index: 1;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 30px 0 50px;
}
.st-footer .row {
  display: flex; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; align-items: center;
  font-family: "VT323", monospace; font-size: 11px;
  color: var(--muted); letter-spacing: .16em;
  text-transform: uppercase;
}
.st-footer .links { display: flex; gap: 22px; flex-wrap: wrap; }
.st-footer .links a:hover { color: var(--text); }
.st-footer .row > div:last-child span { color: var(--signal); }

/* ---- data-d reveal delays (shared with existing) ---- */
[data-reveal][data-d="1"] { transition-delay: .12s; }
[data-reveal][data-d="2"] { transition-delay: .24s; }
[data-reveal][data-d="3"] { transition-delay: .36s; }

/* ===== WORKSTREAM 1 — scroll-snap removed; pinned+scrubbed slides own scroll ===== */
.st-deck { position: relative; z-index: 1; }

/* ===== WORKSTREAM 2 — cabin slide ===== */
/* overflow:visible + flex-start so the 100-cell board grows & scrolls instead of being clipped by .st-chapter's overflow:hidden */
.st-cabin {
  overflow: visible;
  align-items: flex-start;
  background: radial-gradient(80% 90% at 50% 30%, rgba(91,255,168,.05), transparent 70%), var(--bg-1);
}
.st-scrim--cabin { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,12,.4), transparent 30%, rgba(7,9,12,.6)); }
.st-cabin-inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(8px, 4vh, 48px);
}
.st-cabin-board { width: 100%; }
@media (max-width: 900px) {
  .st-cabin-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== WORKSTREAM 3 — seat 01 founder bio + receipts ===== */
.st-quote-line { font-family:"VT323",monospace; color:var(--ice); font-size:clamp(16px,2vw,22px); letter-spacing:.03em; margin:14px 0 0; }
.st-founder-bio { color:var(--muted); line-height:1.65; font-size:clamp(15px,1.6vw,17px); max-width:60ch; margin:20px auto 0; }
.st-receipts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 24px auto 0; max-width: 680px; }
.st-receipts .receipt-card { flex: 1 1 280px; min-width: 240px; max-width: 330px; }

/* =========================================================
   MOBILE PUNCH-LIST — all fixes ≤ 760px (and 600px for HUD)
   ========================================================= */

/* FIX 8 (NICE) — fineprint heading: base scroll-margin so anchor
   links clear the fixed HUD on all screen sizes */
.st-fineprint { scroll-margin-top: 72px; }

/* ---------- @media (max-width: 600px) ---------- */
/* FIX 1 (BLOCKER) — top HUD CTA wraps on mobile.
   Hide version chip + status pill; keep brand word + CTA on one row. */
@media (max-width: 600px) {
  .top-hud { padding: 10px 14px; }
  .top-hud .brand-version,
  .top-hud .status-pill { display: none; }
  .top-hud .brand-word { white-space: nowrap; }
  .top-hud .right .btn { white-space: nowrap; font-size: 12px; padding: 8px 12px; letter-spacing: 0; }
}

/* ---------- @media (max-width: 760px) — consolidated mobile block ---------- */
@media (max-width: 760px) {

  /* FIX 2 (BLOCKER) — c2 "WORTHLESS" stamp: pull out of absolute flow
     so it doesn't land on the body copy on narrow viewports. */
  .st-bill-flat {
    position: static;
    transform: rotate(-6deg);
    margin: 14px 0 6px;
    display: inline-block;
  }
  /* keep the punched-in state working when bill hits $0 */
  .st-bill-inner.is-zero .st-bill-flat {
    animation: st-bill-flat-punch .42s cubic-bezier(.2,1.5,.3,1) both;
  }

  /* MOBILE Y-LOCK RESTORED — keep the hero-style pin + scrub on mobile and
     FIT the content to the viewport, instead of un-pinning it (which
     flattened the whole story into a plain scroll). Each pinned beat now
     locks to the viewport on mobile exactly like the hero.
       • The full-bleed reveal pin (.st-pin--reveal) MUST keep padding:0 — its
         door/fork layers are position:absolute; inset:0, so any padding would
         inset them off-screen. Hence :not(.st-pin--reveal).
       • The c5 fork already stacks 1-col (seam-head → SHIPPED → AIRLOCKED) via
         the @media rule next to .st-reveal-fork, so both fates share the
         locked viewport once the doors scrub open.
       • The .st-gate keeps its own dedicated un-pin (the live 100-seat board
         is a scrollable artifact, not a scrub beat). */
  .st-pin:not(.st-pin--reveal) {
    padding: 78px clamp(16px, 5vw, 26px) 34px;
  }
  .st-h-beat { font-size: clamp(30px, 8.4vw, 56px); }
  .st-pin .st-body-line { font-size: clamp(15px, 4vw, 19px); margin-top: 14px; }
  /* c4 carries the tallest headline (3 lines) + stencils + stamp — trim it a
     touch more so the pinned frame never clips on a short phone. */
  .st-declare .st-h-beat { font-size: clamp(26px, 7.4vw, 44px); }

  /* FIX 5 (SHOULD) — c3 gate compact seat cells: min tap target */
  .seat-grid--compact .seat-cell { min-height: 34px; }
  .live-100-body { padding: 14px; }

  /* FIX 6 (SHOULD) — c4 declare "BOARDED" stamp: give stencils row
     bottom clearance so the rotated stamp can't tip into it. */
  .st-declare .st-stencils { margin-bottom: 20px; }
  .st-declare .stamp { display: inline-block; }

  /* FIX 7 (SHOULD) — c-cabin large grid: per-cell AIRLOCKED stamp
     overflows neighbours on small screens; hide it (orange wash + frame
     already mark vacated cells visually). */
  .seat-grid--large .seat-stamp { display: none; }

  /* FIX 8 (NICE) — fineprint heading: extra top breathing room on mobile */
  .st-fineprint { padding-top: 40px; }

  /* FIX 9 (NICE) — seat-01 founder bio: left-align on mobile for readability */
  .st-founder-bio { text-align: left; }
}

/* FIX 10 (NICE) — reduced-motion: stop infinite animation loops.
   Added to the existing prefers-reduced-motion block pattern inline. */
@media (prefers-reduced-motion: reduce) {
  .prompt-hand,
  .status-pill .dot,
  .panel-head .live .dot,
  .blink { animation: none !important; }
}

/* =========================================================
   SEAT 00 verdict badges (VERA P7.T7) — APPEND-ONLY BLOCK
   Appended at end of file on purpose: styles.css carries another session's
   uncommitted work (D-74). Nothing above this line was touched.

   StatusBadge.astro and dashboard.js's createStatusBadge both derive the
   badge class the same way — status.toLowerCase().replaceAll("_", "-") —
   and neither checks the result against a list. A state with no rule here
   therefore renders as a bare .badge: `border: 1px solid` with no colour,
   i.e. an inherited-colour outline. INCONCLUSIVE was exactly that.

   The tone bands match the admin dossier's scoped .dossier-verdict tones
   (apps/web/src/pages/admin/review.astro) so one verdict reads the same
   wherever it is shown:
     --signal  settled and good        PASS      (as CONFIRMED)
     --hatch   negative but PROVISIONAL FAIL
     --serial  the question is open    INCONCLUSIVE (as PROOF PENDING)
     --ice     in flight, no outcome   INSPECTING

   BORDER STYLE CARRIES THE INVARIANT. Solid border = the registry has
   ruled (CONFIRMED, AIRLOCKED, PASS). Dashed border = it has not
   (FAIL, INCONCLUSIVE, INSPECTING). A FAIL is SEAT 00's report, not a
   decision — spec §2, "if my proof fails the agent's walk, nothing public
   happens yet" — so it must never be able to be mistaken for AIRLOCKED.
   That is also why FAIL gets no glowing dot: the 8px glow on .badge.confirmed
   and .badge.airlocked is this design's mark of a final state, and no UI may
   present a rejection as already made (D-01).
   ========================================================= */

/* PASS — settled. A PASS confirms in the same request (D-06), so it wears
   the same green as CONFIRMED and the same final-state glow. */
.badge.pass {
  color: var(--signal);
  border-color: rgba(91,255,168,0.3);
  background: rgba(91,255,168,0.06);
}
.badge.pass .b-dot { background: var(--signal); box-shadow: 0 0 8px var(--signal); }

/* FAIL — bad news, no decision. Hatch hue, dashed edge, flat dot. */
.badge.fail {
  color: var(--hatch);
  border-color: rgba(255,122,61,0.4);
  border-style: dashed;
  background: rgba(255,122,61,0.07);
}
.badge.fail .b-dot { background: var(--hatch); }

/* INCONCLUSIVE — the default arm for every anomaly (D-05). Reads as the
   open question it is, in the same serial yellow as PROOF PENDING. */
.badge.inconclusive {
  color: var(--serial);
  border-color: rgba(255,210,92,0.34);
  border-style: dashed;
  background: rgba(255,210,92,0.06);
}
.badge.inconclusive .b-dot { background: var(--serial); }

/* INSPECTING — a state, not an outcome (D-83). The pulsing dot is the only
   live signal in the set; it says SEAT 00 has the run, and says nothing
   about how the run is going. */
.badge.inspecting {
  color: var(--ice);
  border-color: rgba(156,210,255,0.3);
  border-style: dashed;
  background: rgba(156,210,255,0.05);
}
.badge.inspecting .b-dot { background: var(--ice); animation: pulse 1.6s infinite; }

@media (prefers-reduced-motion: reduce) {
  .badge.inspecting .b-dot { animation: none; }
}

/* ==========================================================================
   BEACON INSTALL — P8.T6, appended block.
   APPEND ONLY. Nothing above this comment was edited or reformatted: this
   file carries uncommitted work from a sibling session (D-74).
   ========================================================================== */

/* The install snippet lives inside .profile-card-body on the DECLARED console
   branch, under MISSION URL. It is a copy target, not a form, so it borrows
   the mission form's field skin without joining .mission-form — a form
   descendant would inherit the submit lifecycle from public/dashboard.js. */
.beacon-install {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.beacon-install-label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.beacon-snippet {
  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;
  resize: vertical;
  white-space: pre-wrap;
  word-break: break-all;
}

/* A copy target should hand over the whole line on one click, not a word. */
.beacon-snippet:focus {
  border-color: rgba(114,231,255,0.55);
  box-shadow: 0 0 0 2px rgba(114,231,255,0.08);
}

/* Status is derived from last_seen_at at read time (D-52); these three are the
   only values it takes. UNREACHABLE and NOT_INSTALLED are not failures and are
   not coloured like one — no beacon is ever required to pass an inspection. */
[data-beacon-status="ACTIVE"] { color: var(--signal); }
[data-beacon-status="UNREACHABLE"] { color: var(--serial); }
[data-beacon-status="NOT_INSTALLED"],
[data-beacon-status="UNAVAILABLE"] { color: var(--muted); }

/* ==========================================================================
   CREW FEED TONES — P8.T7, appended block.
   APPEND ONLY. Nothing above this comment was edited or reformatted: this
   file carries uncommitted work from a sibling session (D-74).
   ========================================================================== */

/* `.feed .msg.airlock` and `.feed .msg.launch` already exist above. These are
   the two tones D-54's web halves add, and they borrow the colours the badge
   system already assigns to the same two states, so a row in the feed and a
   badge on a mission never disagree about what a colour means:
     pending → --serial, the PROOF PENDING badge (.badge.proof-pending)
     inspect → --ice,    the SEAT 00 INSPECTING badge (.badge.inspecting)
   Ice is deliberately dimmed here: `.feed .msg .who` is full --ice, so an
   undimmed line would swallow the handle it is supposed to sit behind. */
.feed .msg.pending { color: var(--serial); }
.feed .msg.inspect { color: rgba(156,210,255,0.74); }

/* ==========================================================================
   BEACON CAVEAT — Phase 8 review fix, appended block.
   APPEND ONLY. Nothing above this comment was edited or reformatted: this
   file carries uncommitted work from a sibling session (D-74).
   ========================================================================== */

/* The second hint line under the install snippet. It says the BEACON status
   reports pings received rather than proof of install — an unauthenticated,
   CORS-simple heartbeat (D-79) carrying ids that /state already publishes
   cannot prove who sent it. Set below the first hint so the ordering reads
   instruction first, limitation second, and never in an alarm colour: the
   limitation costs the founder nothing (D-44, D-45 — a ping earns nothing). */
.beacon-caveat {
  color: var(--muted);
  opacity: 0.82;
}

/* ==========================================================================
   SEAT 00 CONSOLE PANEL — P9.T3, appended block.
   APPEND ONLY. Nothing above this comment was edited or reformatted: this
   file carries uncommitted work from a sibling session (D-74). The two blocks
   above (BEACON INSTALL, CREW FEED TONES, BEACON CAVEAT) are untouched — this
   block reuses `.beacon-install` and `[data-beacon-status]` from the first of
   them rather than restyling them for their new home.
   ========================================================================== */

/* The fourth .profile-grid child. Column placement in that grid is purely
   positional — `.profile-card--wide` carries no rule anywhere in this file —
   so appending the card last is what puts it in row 2 / column 2, the narrow
   `minmax(280px, 0.55fr)` track. Everything below is sized for that width, and
   for the single-column stack the grid collapses to at max-width 820px. */
.seat-zero-body {
  display: grid;
  gap: 14px;
  align-content: start;
}

/* VERA in her own voice, in the page's reading face rather than the terminal
   one. The mono/uppercase `.form-status` treatment is the console SPEAKING TO
   the founder about state; this line is a crewmate speaking, and flattening it
   into an all-caps status string would erase exactly the difference spec §5
   draws between the two registers. */
.seat-zero-intro {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

/* The lifted blocks arrive already spaced by their own rules; the grid gap
   above supplies the rhythm, so drop the margins that assumed a flow layout.
   .beacon-install keeps its border-top — in this card it reads as the divider
   between VERA's line and the machinery, which is what it was doing before. */
.seat-zero-body .beacon-install {
  margin-top: 0;
}
.seat-zero-body .mission-form {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   THE LAST SUMMON'S OUTCOME
   Filled client-side from /api/missions/<id>/summon-dossier. Findings only —
   there is no verdict on the wire and no rule here that could render one
   (spec §3, D-75), and no state below is coloured as a pass or a failure.
   -------------------------------------------------------------------------- */
.summon-panel {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Ice, not hatch and not signal. Ice is already this codebase's SEAT 00 colour
   (`.badge.inspecting`, `.feed .msg.inspect`), so the panel announces who is
   speaking with the colour the rest of the console already assigns her — and
   it is neither of the two colours that mean an outcome. */
.summon-headline {
  margin: 0;
  color: var(--ice);
  font-size: 15px;
  letter-spacing: 0.1em;
}
.summon-line {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.summon-findings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

/* One typed fact per row, keyed by the closed enum's tone. A rule bar rather
   than coloured text: the sentence is VERA talking to the founder and stays
   readable, while the tone sits beside it where it can be scanned. */
.summon-finding {
  display: grid;
  gap: 2px;
  padding-left: 11px;
  border-left: 2px solid var(--dim);
}

/* `bad` is HATCH, deliberately not the airlock red. A summon cannot airlock
   anything and has no effect on the seat at all, so borrowing the colour this
   site uses for the hatch closing would state an outcome the finding does not
   have. Hatch is the deadline colour: something to fix before the door shuts.
   `open` is SERIAL — VERA could not see it, which is not a fault of the
   founder's and is not drawn as one. */
.summon-finding[data-tone="good"] {
  border-left-color: var(--signal);
}
.summon-finding[data-tone="bad"] {
  border-left-color: var(--hatch);
}
.summon-finding[data-tone="open"] {
  border-left-color: var(--serial);
}

.summon-finding-code {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
}
.summon-finding-line {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}

/* VERA's own commentary on the walk, rendered verbatim from the API with
   textContent. Set apart as a quotation because that is what it is. */
.summon-commentary {
  margin: 0;
  padding: 10px 12px;
  border-left: 2px solid var(--ice);
  background: rgba(156, 210, 255, 0.05);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

/* Presigned, five-minute, owner-only evidence (D-41, D-77). Thumbnails rather
   than a gallery: this card is 280px wide at its narrowest and the full-size
   image is one click away. */
.summon-shots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.summon-shot {
  display: block;
  width: 76px;
  height: 52px;
  border: 1px solid var(--line-2);
  background: rgba(5, 8, 12, 0.84);
  overflow: hidden;
}
.summon-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.summon-shot:hover {
  border-color: var(--ice);
}
.summon-shot:focus-visible {
  outline: 2px dashed var(--hatch);
  outline-offset: 2px;
}

.summon-expiry,
.summon-note {
  margin: 0;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.5;
}

/* The refresh control is not decoration. Those signed URLs die in five minutes
   and the panel refuses to hide that behind a spinner, so there is always a
   way to ask again — including after the bounded poll gives up. */
.summon-refresh {
  justify-self: start;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-family: "VT323", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
}
.summon-refresh:hover {
  color: var(--text);
  border-color: var(--hatch);
}
.summon-refresh:focus-visible {
  outline: 2px dashed var(--hatch);
  outline-offset: 2px;
}

/* A read that failed is about us, never about the founder's product, so it is
   not drawn in VERA's speaking colour. */
.summon-panel[data-summon-state="UNAVAILABLE"] .summon-headline {
  color: var(--muted);
}