/* ══════════════════════════════════════════════════════════════
   Redemptus landing v3.2 「Porthole」
   The app's own welcome grammar, unrolled into a scroll: the cabin
   photograph blurred to a wash is the floor, the real MCTS replay is
   the hero's living canvas, and every section after it is a real
   iOS 1.1 (101) still: in a phone cut to the device's real display
   mask, as a large frameless card, or as the section's background.

   One grid for every section: copy in a 5-column, the picture in a
   7-column, both starting on the same line. Type is the app's: the
   system sans (SF Pro on Apple devices) for UI, Newsreader (a web
   stand-in for New York) as the ceremony serif, the system mono only
   for the hero readout, the fact strip and the credits. Tokens are the
   shipped DesignSystem.swift values (graphite and champagne, both
   colour schemes). Laws kept here: one glow per screen, champagne as a
   micro-accent only, serif hero numerals, mono at 11 to 13px only, no
   blue anywhere, no middle dot, no em dash, glass only where something
   moves behind it.
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: dark light;
  --bg:#161513; --raised:#1F1E1B; --raised-2:#282621;
  --hairline:rgba(255,255,255,0.08); --hairline-strong:rgba(255,255,255,0.14);
  --ink-hi:#F4F4F5; --ink-mid:#A0A0A8; --ink-low:#6B6B74;
  --accent:#BF9C5E; --accent-bright:#D2B57C; --accent-deep:#8A6D3B; --arc:#EFE3C8; --accent-rgb:191,156,94;
  --ok:#4FAE7F; --warn:#D99A43; --danger:#D96A5E;
  --glow:radial-gradient(60% 45% at 50% 0%, rgba(210,181,124,0.10), transparent 72%);
  --glass-hi:#FFFFFF; --glass-mid:rgba(255,255,255,0.72); --glass-low:rgba(255,255,255,0.48);
  --glass-stroke:rgba(255,255,255,0.18); --glass-fill:rgba(255,255,255,0.10); --glass-fill-flat:rgba(255,255,255,0.12); --glass-fill-on:rgba(255,255,255,0.18);
  --surface-fill:rgba(31,30,27,0.52); --surface-shadow:none;
  --nav-fill:rgba(22,21,19,0.60);
  --foot:22,21,19;
  --wash-opacity:0.55; --wash-veil:rgba(0,0,0,0.35);
  --map-style:dark; --map-tiles:none;
  --text-hi:#F4F4F5; --text-mid:#A0A0A8; --text-low:#6B6B74;
  --gold:#BF9C5E; --gold-bright:#D2B57C; --bg-base:#161513;

  --r-card:16px; --r-inner:10px; --r-pill:999px;
  --font-serif:'Newsreader', ui-serif, 'New York', Georgia, serif;
  --font-sans:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif;
  --font-mono:ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-settle:cubic-bezier(0.22,1,0.36,1);
  --t-fast:160ms; --t-normal:260ms; --t-reveal:560ms; --t-rise:760ms; --t-frame:960ms;
  --max-w:1180px; --gutter:36px; --col-gap:72px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#F4F5F6; --raised:#FFFFFF; --raised-2:#F8F9FA;
    --hairline:rgba(0,0,0,0.08); --hairline-strong:rgba(0,0,0,0.12);
    --ink-hi:#17181A; --ink-mid:#565A60; --ink-low:#8A8F96;
    --accent:#7E6136; --accent-bright:#A8854E; --accent-deep:#664E2C; --arc:#8A6D3B; --accent-rgb:126,97,54;
    --ok:#2E7D5B; --warn:#A8701F; --danger:#B3453A;
    --glow:radial-gradient(60% 45% at 50% 0%, rgba(168,133,78,0.06), transparent 72%);
    --glass-hi:#17181A; --glass-mid:#565A60; --glass-low:#8A8F96;
    --glass-stroke:rgba(0,0,0,0.10); --glass-fill:rgba(255,255,255,0.55); --glass-fill-flat:rgba(255,255,255,0.66); --glass-fill-on:rgba(255,255,255,0.88);
    --surface-fill:rgba(255,255,255,0.62);
    --surface-shadow:0 1px 2px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.06);
    --nav-fill:rgba(244,245,246,0.70);
    --foot:244,245,246;
    --wash-opacity:0.28; --wash-veil:rgba(255,255,255,0.45);
    --map-style:light;
    --text-hi:#17181A; --text-mid:#565A60; --text-low:#8A8F96;
    --gold:#7E6136; --gold-bright:#A8854E; --bg-base:#F4F5F6;
  }
  ::selection { background: rgba(126,97,54,0.22); }
}

html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink-hi);
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: rgba(191,156,94,0.28); color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }

/* the instrument voice: 11 to 13px data labels only */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0; }
.ic { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── The floor: the cabin photograph blurred to a wash, drifting ─ */
.wash { position: fixed; inset: -8vh 0; z-index: 0; pointer-events: none; background: var(--bg); }
.wash img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: var(--wash-opacity); filter: blur(14px) saturate(0.9); transform: scale(1.12); }
.wash::after { content: ''; position: absolute; inset: 0; background: var(--wash-veil); }
main, .nav, .site-foot { position: relative; z-index: 1; }

/* ── Glass primitives ──────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px; border-radius: var(--r-pill);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 0 0 0.5px var(--glass-stroke);
  color: var(--glass-hi); font: 500 13.5px/1 var(--font-sans); letter-spacing: -0.005em; white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out);
}
.pill .ic { width: 12px; height: 12px; }
.pill.on { background: var(--glass-fill-on); font-weight: 600; }
.pill.accent { color: var(--accent-bright); }
.pill.low { color: var(--glass-mid); }
/* section pills sit on the static wash: flat fills, no blur (blur is spent where something moves) */
.pills .pill, .tape .pill { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-fill-flat); }
.pills .pill.on { background: var(--glass-fill-on); }
.glass {
  background: var(--surface-fill);
  -webkit-backdrop-filter: blur(40px) saturate(1.3); backdrop-filter: blur(40px) saturate(1.3);
  border-radius: var(--r-card); padding: 22px 26px;
  box-shadow: inset 0 0 0 0.5px var(--glass-stroke), var(--surface-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pill { background: var(--raised-2); }
  .glass { background: var(--raised); }
  .nav { background: var(--bg); }
}

/* ── Buttons: neutral fills, champagne only as a hairline ──── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 15px/1 var(--font-sans); letter-spacing: -0.005em; padding: 15px 26px; border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform 200ms var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: #1F1E1B; color: #FFFFFF; box-shadow: inset 0 0 0 0.5px rgba(191,156,94,0.9), 0 8px 24px rgba(0,0,0,0.25); }
.btn-primary:hover { background: #282621; box-shadow: inset 0 0 0 0.5px var(--accent-bright), 0 10px 28px rgba(0,0,0,0.28); }
.btn-ghost { background: var(--glass-fill); color: var(--glass-hi); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: inset 0 0 0 0.5px var(--glass-stroke); }
.btn-ghost:hover { background: var(--glass-fill-on); }
.btn-white { background: #FFFFFF; color: #161513; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.btn-white:hover { background: #F4F4F5; }

/* ── Nav ───────────────────────────────────────────────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--nav-fill); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); border-bottom: 1px solid var(--hairline); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.nav-mark { display: flex; align-items: center; gap: 10px; font: 500 17px/1 var(--font-serif); letter-spacing: 0.01em; color: var(--ink-hi); }
.nav-mark svg { display: block; }
.nav-links { display: flex; gap: 24px; font-size: 14px; color: var(--ink-mid); }
.nav-links a { transition: color var(--t-fast) var(--ease-out); }
.nav-links a:hover { color: var(--ink-hi); }
.nav .btn { padding: 10px 18px; font-size: 13.5px; }

/* ── The phone: a still cut to the device's real display mask ─ */
.phone {
  --w: 320px; --bz: 11px; --sw: calc(var(--w) - 2 * var(--bz)); --r: calc(var(--sw) * 0.175);
  position: relative; width: var(--w); padding: var(--bz); margin: 0;
  border-radius: calc(var(--r) + var(--bz));
  background: linear-gradient(155deg, #3B3B3E 0%, #1E1E20 38%, #121214 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), inset 0 0 0 4px #0A0A0B, 0 44px 80px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.5);
}
.phone::before, .phone::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(#3B3B3E, #1A1A1C); }
.phone::before { left: -3px; top: 21%; height: 11%; box-shadow: 0 calc(var(--sw) * 0.22) 0 0 #26262A; }
.phone::after { right: -3px; top: 25%; height: 15%; }
.phone img { width: 100%; border-radius: var(--r); background: #000; }
.phone figcaption, .still figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── A large frameless still: the app's own card, lifted off the wash ─ */
.still { width: 100%; margin: 0; border-radius: var(--r-card); overflow: hidden; background: #131210; box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.16), 0 36px 70px rgba(0,0,0,0.38); }
.still img { width: 100%; }

/* ── Reveals (IntersectionObserver adds .in; no timers) ──────── */
.sr { opacity: 0; transform: translateY(14px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.sr.in { opacity: 1; transform: none; }
.sr-frame { opacity: 0; transform: translateY(36px) scale(0.965); transition: opacity var(--t-frame) var(--ease-settle), transform var(--t-frame) var(--ease-settle); transition-delay: calc(var(--i, 0) * 60ms); }
.sr-frame.in { opacity: 1; transform: none; }
/* .par depth, the wash drift and the closing photograph's settle are written by
   hero.js from a passive scroll listener (no timers). Reduced motion: at rest. */

/* ── Hero ──────────────────────────────────────────────────── */
.hero { position: relative; overflow: clip; isolation: isolate; min-height: 100svh; display: grid; align-items: end; padding: 96px 0 40px; scroll-margin-top: 64px; }
.hero::before { content: ''; position: absolute; inset: 0; background: var(--glow); pointer-events: none; z-index: 2; }
#skymap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.foot { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 2; pointer-events: none; }
.foot::before { content: ''; position: absolute; inset: 0; -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%); mask-image: linear-gradient(to bottom, transparent 0%, #000 55%); }
.foot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--foot),0) 0%, rgba(var(--foot),0.62) 55%, rgba(var(--foot),0.94) 100%); }
.hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.hero-h1 { margin-top: 20px; text-wrap: balance; font-family: var(--font-serif); font-weight: 300; font-size: clamp(44px, 4.9vw, 72px); line-height: 1.0; letter-spacing: -0.016em; color: var(--ink-hi); }
.hero-h1 .h1-2 { color: var(--ink-mid); }
.hero-sub { max-width: 50ch; text-wrap: pretty; margin-top: 22px; font-size: 18px; line-height: 1.55; color: var(--ink-mid); }
.hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-legal { margin-top: 30px; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-low); }
.hero-right { display: grid; justify-items: end; }
.hero-phone { --w: clamp(268px, 37svh, 344px); }
.hero-stat { text-align: left; margin-top: 22px; min-height: 54px; }
.stat-line { font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-mid); min-height: 15px; max-width: 460px; word-break: keep-all; overflow-wrap: normal; }
.stat-line.swap { animation: statSwap 360ms var(--ease-out); }
@keyframes statSwap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.stat-num { margin-top: 4px; font-family: var(--font-serif); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; color: var(--accent); opacity: 0; transform: translateY(6px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.stat-num .stat-unit { font-family: var(--font-sans); font-size: 11.5px; font-weight: 400; color: var(--ink-low); margin-left: 7px; }
.hero[data-num="on"] .stat-num { opacity: 1; transform: none; }
.hero[data-num="on"][data-lock="0"] .stat-num { opacity: 0.35; }
.hero[data-hero="nodata"] .hero-stat, .hero[data-hero="nodata"] .hero-legal { display: none; }
.hero[data-hero=""] .stat-line { opacity: 0; }
.rise { opacity: 0; transform: translateY(16px); animation: rise var(--t-rise) var(--ease-out) forwards; }
.r1 { animation-delay: 60ms; } .r2 { animation-delay: 150ms; } .r3 { animation-delay: 240ms; } .r4 { animation-delay: 330ms; }
.rise-frame { opacity: 0; transform: translateY(36px) scale(0.965); animation: riseFrame var(--t-frame) var(--ease-settle) 380ms forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes riseFrame { to { opacity: 1; transform: none; } }

/* ── The tape ─────────────────────────────────────────────── */
.ribbon { padding: 48px 0 24px; overflow: clip; scroll-margin-top: 64px; }
.ribbon-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ribbon-head h2 { font: 400 15px/1.3 var(--font-sans); color: var(--ink-mid); }
.ribbon-head p { font-family: var(--font-serif); font-weight: 400; font-size: 22px; color: var(--ink-hi); }
.tape { margin-top: 20px; display: flex; width: max-content; animation: tape 70s linear infinite; }
.tape:hover { animation-play-state: paused; }
.tape .pill { margin-right: 10px; }
.tape .pill.warn { color: var(--warn); background: rgba(217,154,67,0.12); }
.tape .pill.danger { color: var(--danger); background: rgba(217,106,94,0.10); }
@keyframes tape { to { transform: translateX(-50%); } }

/* ── Sections: one grid ────────────────────────────────────── */
.sec { padding: 128px 0; scroll-margin-top: 64px; }
.sec + .sec { border-top: 1px solid var(--hairline); }
.eyebrow { font: 500 13px/1 var(--font-sans); color: var(--accent); letter-spacing: 0.01em; }
.sec h2, .bgsec h2 { margin-top: 14px; text-wrap: balance; font-family: var(--font-serif); font-weight: 400; font-size: clamp(34px, 3.8vw, 52px); line-height: 1.08; letter-spacing: -0.012em; color: var(--ink-hi); max-width: 16ch; }
.lead { margin-top: 18px; text-wrap: pretty; font-size: 18px; line-height: 1.55; color: var(--ink-mid); max-width: 44ch; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.note { margin-top: 14px; text-wrap: pretty; font-size: 15px; line-height: 1.55; color: var(--ink-mid); max-width: 44ch; }
.note.quiet { font-size: 13.5px; color: var(--ink-low); }
.note.wide { max-width: 60ch; }
/* copy 5 / picture 7, both starting on the same line */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: start; }
.split.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.reverse > .copy { order: 2; }
.split.reverse > .stage { order: 1; }
.stage { display: flex; justify-content: center; padding-top: 6px; }
.stage > .par { width: 100%; display: flex; justify-content: center; }
.stage .still { max-width: 600px; }
.stage .phone { --w: 320px; }
/* a header on the left column, then a row under it */
.head { max-width: 640px; }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: start; margin-top: 52px; }
.row.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.row .still { max-width: 640px; }
/* the wide strip: one picture across the whole grid */
.wide { margin-top: 52px; }
.wide .still { max-width: none; }
.wide img { width: 100%; }
/* the collage: the chart card with the phone standing beside it, bottoms aligned */
.collage { display: grid; grid-template-columns: minmax(0, 640px) 320px; justify-content: center; align-items: end; column-gap: 40px; margin-top: 52px; }
.collage .card { grid-column: 1; }
.collage .card .still { max-width: none; }
.collage .stand { grid-column: 2; position: relative; z-index: 2; display: flex; justify-content: flex-end; }
.captions { display: grid; grid-template-columns: minmax(0, 640px) 320px; justify-content: center; column-gap: 40px; margin-top: 28px; }
.captions p { font-size: 14.5px; line-height: 1.5; color: var(--ink-mid); }
.captions p b { font-weight: 600; color: var(--ink-hi); }

/* ── Sections that stand on a still ───────────────────────── */
.bgsec { position: relative; overflow: clip; isolation: isolate; padding: 0; border-top: 0; scroll-margin-top: 64px; }
.bgsec .bg { position: absolute; inset: 0; z-index: 0; }
.bgsec .bg img { width: 100%; height: 100%; object-fit: cover; }
.bgsec .scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bgsec .foot { height: 62%; z-index: 1; }
.bgsec .inner { position: relative; z-index: 2; }
.bgsec .eyebrow { color: var(--accent-bright); }
.bgsec h2, .bgsec .lead, .bgsec .note, .bgsec p { color: #fff; }
.bgsec .lead, .bgsec .note, .bgsec p { color: rgba(255,255,255,0.76); }
.bgsec .pill { -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); background: rgba(255,255,255,0.10); color: #fff; box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.18); }
.bgsec .pill.on { background: rgba(255,255,255,0.18); }
.bgsec .pill.low { color: rgba(255,255,255,0.72); }
/* Describe: the searching earth behind, the Agent panel standing on it */
.describe { --foot: 8,8,10; }
.describe .bg img { object-position: 50% 30%; }
.describe .scrim { background: linear-gradient(90deg, rgba(8,8,10,0.80) 0%, rgba(8,8,10,0.50) 45%, rgba(8,8,10,0.08) 100%); }
.describe .inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: center; min-height: 92svh; padding-top: 140px; padding-bottom: 120px; }
.describe .still { max-width: 560px; margin-left: auto; }
/* Close: the photograph, the door */
.close { --foot: 22,21,19; }
.close .bg img { object-position: 50% 30%; transform: scale(1.06); }
.close .foot { height: 70%; }
.close .inner { min-height: 88svh; display: grid; align-items: end; padding-top: 160px; padding-bottom: 56px; }
.close .door { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--col-gap); align-items: end; }
.close .door h2 { max-width: 18ch; }
.close .cta { display: grid; gap: 12px; justify-items: end; }
.close .cta .quiet { font-size: 12.5px; color: rgba(255,255,255,0.48); text-align: right; }

/* ── Seat: the verdict ladder ──────────────────────────────── */
.ladder { position: relative; display: grid; grid-template-columns: 1fr; padding: 6px 0 6px 20px; }
.ladder-bar { position: absolute; left: 0; top: 6px; width: 3px; height: calc((100% - 12px) / 6); border-radius: 2px; background: var(--accent); }
@supports (animation-timeline: view()) {
  .ladder-bar { animation: ladder linear both; animation-timeline: view(); animation-range: entry 60% exit 40%; }
  @keyframes ladder { from { transform: translateY(0); } to { transform: translateY(500%); } }
}
.rung { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; padding: 13px 0; border-top: 1px solid var(--hairline); }
.rung:first-child { border-top: 0; }
.rung .word { font: 500 18px/1.3 var(--font-sans); letter-spacing: -0.01em; color: var(--glass-hi); }
.rung.ceremony .word { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 21px; letter-spacing: 0; }
.rung.special .word { color: var(--accent-bright); }
.rung.quiet .word { color: var(--glass-low); }
.rung.abstain .word { color: var(--glass-mid); }
.rung .band { font-size: 12.5px; color: var(--glass-low); }
.facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 12px; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.facts b { font-weight: 500; color: var(--ink-hi); }

/* ── Ask: the step rail ────────────────────────────────────── */
.rail { display: grid; }
.rail-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 15.5px; line-height: 1.45; color: var(--glass-hi); }
.rail-row:first-child { border-top: 0; }
.rail-row .ic { margin-top: 4px; color: var(--glass-low); }
.rail-row .n { color: var(--glass-mid); }
.spent { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font: 600 11.5px/1 var(--font-sans); color: var(--accent-bright); box-shadow: inset 0 0 0 0.5px var(--accent); }
.rail-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 13.5px; color: var(--glass-mid); }

/* ── Investors: agent, ledger, price as one flow; the ledger as a calendar ─ */
.hero-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-pills a.pill { position: relative; }
.hero-pills a.pill::after { content: ''; position: absolute; inset: -6px 0; }
.hero-pills a.pill:hover { background: var(--glass-fill-on); }
/* two sentences, one line each: the second must not leave its last word alone */
#investors h2 { max-width: 22ch; }
.flow .rail-row { position: relative; grid-template-columns: 18px 1fr; border-top: 0; padding: 13px 0; }
.flow .rail-row > span { display: grid; gap: 4px; font: 500 17px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.flow .rail-row .ic { margin-top: 5px; color: var(--accent-bright); }
.flow .n { font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-wrap: pretty; }
/* the connector: one hairline from each mark down to the next */
.flow .rail-row:not(:last-child)::after { content: ''; position: absolute; left: 6.5px; top: 40px; bottom: -14px; width: 1px; background: linear-gradient(rgba(var(--accent-rgb), 0.55), rgba(var(--accent-rgb), 0.12)); transform: scaleY(0); transform-origin: 50% 0; transition: transform 900ms var(--ease-settle) 260ms; }
.sr.in .flow .rail-row:not(:last-child)::after { transform: none; }
.flow .rail-row:nth-child(2)::after { transition-delay: 520ms; }
.ledger { position: relative; margin: 0; padding: 22px 26px 18px; }
.ledger-head { display: grid; gap: 6px; font-size: 13.5px; color: var(--glass-mid); }
.ledger-num { font-family: var(--font-serif); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; font-size: clamp(36px, 3.6vw, 46px); line-height: 1; letter-spacing: -0.01em; color: var(--glass-hi); }
.ledger-cal { display: block; width: 100%; height: auto; margin-top: 18px; }
.ledger-cal text { font: 11px var(--font-mono); fill: var(--glass-mid); }
.ledger-cal rect { stroke: var(--glass-stroke); stroke-width: 0.5; opacity: 0; transform: scale(0.55); transform-box: fill-box; transform-origin: 50% 50%; transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-settle); transition-delay: calc(var(--c, 0) * 34ms + 240ms); }
.ledger.in .ledger-cal rect { opacity: 1; transform: none; }
.ledger-cal rect:hover { stroke: var(--accent-bright); }
.d0 { fill: var(--glass-fill-flat); }
.d1 { fill: rgba(var(--accent-rgb), 0.38); }
.d2 { fill: rgba(var(--accent-rgb), 0.68); }
.d3 { fill: var(--accent); }
.ledger-foot { margin-top: 14px; display: flex; gap: 8px 22px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--glass-mid); font-variant-numeric: tabular-nums; }
.ledger-foot b { font-weight: 500; color: var(--glass-hi); }
.legend { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; }
.legend i { width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 0.5px var(--glass-stroke); }
.legend i.d0 { background: var(--glass-fill-flat); } .legend i.d1 { background: rgba(var(--accent-rgb), 0.38); } .legend i.d2 { background: rgba(var(--accent-rgb), 0.68); } .legend i.d3 { background: var(--accent); }
.legend i + i { margin-left: -1px; }
.ctas { display: flex; align-items: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.ctas .quiet { font-size: 12.5px; color: var(--ink-low); }
.close .cta .ctas { margin-top: 0; justify-content: flex-end; }

/* ── Footer ────────────────────────────────────────────────── */
.site-foot { position: relative; z-index: 2; padding: 36px 0 40px; border-top: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.48); background: rgba(22,21,19,0.72); }
.foot-grid { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; font-size: 13px; }
.foot-grid .mono { font-size: 12px; color: rgba(255,255,255,0.48); }
.foot-credits { display: grid; gap: 4px; }

/* ── Reduced motion: everything lands, nothing plays ──────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .rise-frame { animation: none; opacity: 1; transform: none; }
  .sr, .sr-frame { opacity: 1; transform: none; transition: none; }
  .ladder-bar { animation: none; }
  .ledger-cal rect { opacity: 1; transform: none; transition: none; }
  .flow .rail-row:not(:last-child)::after { transform: none; transition: none; }
  .par, .wash img, .close .bg img { transform: none !important; }
  .tape { animation: none; flex-wrap: wrap; width: auto; padding: 0 20px; row-gap: 10px; }
  .tape .dup { display: none; }
  .stat-line.swap { animation: none; }
  .btn, .pill, .stat-num { transition: none; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --col-gap: 48px; }
  .stage .still, .row .still { max-width: 520px; }
  .hero-phone { --w: 330px; }
  .collage { grid-template-columns: minmax(0, 560px) 280px; column-gap: 32px; }
  .collage .stand .phone { --w: 280px; }
  .captions { grid-template-columns: minmax(0, 560px) 280px; column-gap: 32px; }
}
@media (max-width: 900px) {
  .split, .split.reverse, .row, .row.reverse, .describe .inner, .close .door { grid-template-columns: 1fr; gap: 40px; }
  .split.reverse > .copy { order: 1; } .split.reverse > .stage { order: 2; }
  .stage, .stage > .par { justify-content: flex-start; }
  .describe .still { margin-left: 0; }
  .describe .inner { min-height: 0; padding-top: 120px; padding-bottom: 96px; }
  .describe .scrim { background: linear-gradient(180deg, rgba(8,8,10,0.80) 0%, rgba(8,8,10,0.66) 55%, rgba(8,8,10,0.30) 100%); }
  .collage { grid-template-columns: 1fr; gap: 32px; }
  .collage .stand { grid-column: 1; justify-content: center; }
  .captions { grid-template-columns: 1fr; gap: 16px; }
  .close .cta { justify-items: start; }
  .close .cta .quiet { text-align: left; }
  .close .cta .ctas { justify-content: flex-start; }
  .hero { align-items: start; padding-top: 108px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-right { justify-items: center; margin-top: 250px; }
  .hero-phone { --w: 300px; }
  .hero-stat { display: none; }
  .foot { height: 44%; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
}
@media (max-width: 760px) {
  .nav .btn { min-height: 44px; padding: 12px 18px; }
}
@media (max-width: 639px) {
  :root { --gutter: 20px; }
  .sec { padding: 80px 0; }
  .hero-phone, .stage .phone, .collage .stand .phone { --w: 272px; }
  .describe .bg img { transform: scale(1.14); transform-origin: 50% 100%; }
  #investors h2 { font-size: min(34px, 8vw); }
  .ledger-foot .legend { flex-basis: 100%; }
  .rung { grid-template-columns: 1fr; gap: 2px; }
  .ribbon-head p { font-size: 19px; }
  .close .inner { min-height: 0; padding-top: 40vh; padding-bottom: 40px; }
}