/* ============================================================
   Generational Run ($RUN)
   tokens → base → layers → components → sections → motion → responsive
   ============================================================ */

/* ---------- Fonts (self-hosted, Latin subset) ---------- */
@font-face { font-family:"Schibsted Grotesk"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/schibsted-400.woff2") format("woff2"); }
@font-face { font-family:"Schibsted Grotesk"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/schibsted-500.woff2") format("woff2"); }
@font-face { font-family:"Schibsted Grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/schibsted-700.woff2") format("woff2"); }
@font-face { font-family:"Martian Mono"; font-style:normal; font-weight:300; font-display:swap; src:url("/assets/fonts/martianmono-300.woff2") format("woff2"); }
@font-face { font-family:"Martian Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/martianmono-500.woff2") format("woff2"); }
@font-face { font-family:"VT323"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/vt323-400.woff2") format("woff2"); }

/* ---------- Tokens (design.md §3) ---------- */
:root {
  /* Sky */
  --sky-hi:#F5E3B2; --sky:#F1DA9C; --sky-lo:#F3D68A;
  /* Field */
  --field-hi:#96A855; --field:#7E8F41; --field-lo:#697F33; --field-nt:#434D28;
  /* Objects */
  --bone:#E4DAB8; --timber:#92722D; --umber:#4E3A25;
  /* Night + dusk */
  --dusk:#1C2E4A; --dusk-hi:#384159; --night:#101A2E; --ember:#A65E3F; --ember-hi:#E08B4C;
  /* Screen */
  --phosphor:#B9F27A; --paper:#FFFDFA;
  /* Text */
  --ink:#23281A; --ink-soft:#5B6446;
  /* Live data */
  --gain:#276B29; --loss:#A33327; --gain-nt:#7FD98A; --loss-nt:#E88A7E;

  /* Live gradient stops (written by sky.js) */
  --sky-a:#F5E3B2; --sky-b:#F3D68A;

  /* Type */
  --ff-head:"Schibsted Grotesk", system-ui, sans-serif;
  --ff-mono:"Martian Mono", ui-monospace, monospace;
  --ff-screen:"VT323", ui-monospace, monospace;

  --fs-wordmark:clamp(2.75rem, 9vw, 8rem);
  --fs-h2:clamp(1.875rem, 4.5vw, 3.5rem);
  --fs-h3:clamp(1.25rem, 2.1vw, 1.625rem);
  --fs-stat:clamp(1.75rem, 4vw, 3rem);
  --fs-lead:clamp(1.0625rem, 1.3vw, 1.1875rem);
  --fs-body:1rem;
  --fs-data:clamp(0.9375rem, 1.4vw, 1.1875rem);
  --fs-label:0.6875rem;

  /* Space / layout */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px; --space-11:192px;
  --maxw:1240px; --maxw-text:60ch;
  --gutter:clamp(20px, 5vw, 64px);
  --section-y:clamp(112px, 15vh, 200px);
  --radius-sm:4px; --radius-md:10px; --radius-crt:18px; --radius-pill:999px;

  /* Motion */
  --dur-fast:180ms; --dur-base:420ms; --dur-slow:900ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
}

/* ---------- Day / night text mode ---------- */
.is-day {
  --fg:var(--ink); --fg-soft:var(--ink-soft);
  --gain-c:var(--gain); --loss-c:var(--loss);
  --on-accent:var(--sky);           /* text on a --fg pill/toast */
  --header-mix:var(--sky);
}
.is-night {
  --fg:var(--paper); --fg-soft:#A9B4C4;
  --gain-c:var(--gain-nt); --loss-c:var(--loss-nt);
  --on-accent:var(--night);
  --header-mix:var(--dusk);
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  font-family:var(--ff-head);
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--fg);
  background:var(--sky);            /* fallback under the fixed sky */
  overflow-x:clip;                  /* clip (not hidden) so root sticky isn't broken */
  max-width:100%;
  transition:color 600ms var(--ease-out);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,iframe { display:block; }
img { max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:where(a,button,[tabindex]):focus-visible {
  outline:2px solid var(--fg); outline-offset:3px; border-radius:2px;
}
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section { position:relative; padding-block:var(--section-y); scroll-margin-top:72px; }
.hero { scroll-margin-top:0; }
[hidden] { display:none !important; }

/* ---------- Fixed atmosphere layers ---------- */
#sky {
  position:fixed; inset:0; z-index:-2;
  background:linear-gradient(180deg, var(--sky-a), var(--sky-b));
}
#stars {
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  opacity:0; transition:opacity 1200ms var(--ease-out);
}
.is-night #stars { opacity:1; }
#stars { animation:starDrift 34s linear infinite; }
#stars .star {
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--paper);
}
@keyframes starDrift { from{ transform:translateY(0); } to{ transform:translateY(-42px); } }
#grass {
  position:fixed; left:0; right:0; bottom:0; height:7vh; z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, var(--field-hi), var(--field-lo));
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 24px);
  mask-image:linear-gradient(to bottom, transparent 0, #000 24px);
  transition:filter 600ms var(--ease-out);
}
.is-night #grass { filter:saturate(.5) brightness(.5); }
@media (max-height:600px){ #grass{ display:none; } }
#grain {
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.is-night #grain { mix-blend-mode:overlay; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family:var(--ff-mono); font-weight:300; text-transform:lowercase;
  letter-spacing:.18em; font-size:11px; color:var(--fg-soft);
  display:flex; align-items:center; gap:14px; margin-bottom:var(--space-5);
}
.eyebrow::before { content:""; width:28px; height:1px; background:currentColor; opacity:.55; }
.h2 {
  font-family:var(--ff-head); font-weight:500; letter-spacing:-.025em; line-height:1.05;
  font-size:var(--fs-h2); color:var(--fg);
}
.h2 em { font-style:normal; font-weight:700; color:var(--fg-soft); display:block; }
.h3 { font-family:var(--ff-head); font-weight:500; font-size:var(--fs-h3); line-height:1.15; color:var(--fg); }

/* ============================================================
   Components
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 26px; border-radius:var(--radius-pill);
  font-family:var(--ff-head); font-weight:500; font-size:14px; text-transform:lowercase;
  white-space:nowrap; transition:transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out), color 600ms var(--ease-out);
}
.btn-primary { background:var(--fg); color:var(--on-accent); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(16,26,46,.55); }
.btn-primary:active { transform:translateY(0); }
.btn-ghost { background:transparent; color:var(--fg); border:1px solid color-mix(in srgb, var(--fg) 28%, transparent); }
.btn-ghost:hover { border-color:color-mix(in srgb, var(--fg) 60%, transparent); background:color-mix(in srgb, var(--fg) 6%, transparent); }
.btn-sm { height:34px; padding:0 18px; font-size:13px; }

/* ---------- Contract chip ---------- */
.ca-chip {
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--fg) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--fg) 20%, transparent);
  transition:background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color 600ms var(--ease-out);
}
.ca-chip:hover { border-color:color-mix(in srgb, var(--fg) 45%, transparent); background:color-mix(in srgb, var(--fg) 9%, transparent); }
.ca-label { font-family:var(--ff-mono); font-weight:300; font-size:10px; text-transform:lowercase; color:var(--fg-soft); }
.ca-value { font-family:var(--ff-mono); font-weight:500; font-size:14px; color:var(--fg); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.ca-icon { color:var(--fg-soft); flex:none; }
.ca-chip.copied .ca-value { color:var(--gain-c); }

/* ---------- Stat rail ---------- */
.stat-rail {
  display:grid; grid-template-columns:repeat(5,1fr);
  margin-top:var(--space-7); border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--fg) 4%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  overflow:hidden; position:relative;
}
.stat-cell { padding:14px 16px; display:flex; flex-direction:column; gap:6px; text-align:left; }
.stat-cell + .stat-cell { border-left:1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.stat-label { font-family:var(--ff-mono); font-weight:300; font-size:10px; text-transform:lowercase; color:var(--fg-soft); }
.stat-value { font-family:var(--ff-mono); font-weight:500; font-size:var(--fs-data); color:var(--fg); font-variant-numeric:tabular-nums; }
.stat-value.is-placeholder { color:color-mix(in srgb, var(--fg) 35%, transparent); }
.stat-value.up { color:var(--gain-c); } .stat-value.down { color:var(--loss-c); }
.stat-cell.flash-up { animation:flashUp 220ms var(--ease-out); }
.stat-cell.flash-down { animation:flashDown 220ms var(--ease-out); }
@keyframes flashUp { from{ background:color-mix(in srgb, var(--gain-c) 8%, transparent);} to{ background:transparent;} }
@keyframes flashDown { from{ background:color-mix(in srgb, var(--loss-c) 8%, transparent);} to{ background:transparent;} }
.stat-delayed { position:absolute; right:12px; bottom:-20px; font-family:var(--ff-mono); font-size:10px; color:var(--fg-soft); }

/* ---------- Docked mini rail (slides down under the header) ---------- */
.rail-dock {
  position:absolute; top:100%; right:var(--gutter);
  display:flex; align-items:center; gap:18px;
  padding:9px 16px; border-radius:0 0 var(--radius-md) var(--radius-md);
  background:color-mix(in srgb, var(--header-mix) 82%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-top:0;
  font-family:var(--ff-mono); font-size:12px; font-variant-numeric:tabular-nums;
  transform:translateY(-140%); opacity:0; pointer-events:none;
  transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.dock-show .rail-dock { transform:translateY(0); opacity:1; }
.rail-dock b { font-weight:500; color:var(--fg); }
.rail-dock .dock-cell:nth-child(2) b.up { color:var(--gain-c); }
.rail-dock .dock-cell:nth-child(2) b.down { color:var(--loss-c); }

/* ---------- Toast ---------- */
.toast {
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,12px);
  background:var(--fg); color:var(--on-accent);
  border-radius:var(--radius-sm); padding:12px 18px; font-size:14px;
  z-index:9999; opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.toast.show { opacity:1; transform:translate(-50%,0); }

/* ============================================================
   Header
   ============================================================ */
#site-header {
  position:fixed; top:0; left:0; right:0; height:56px; z-index:100;
  background:transparent; transition:background-color var(--dur-base) var(--ease-out),
    backdrop-filter var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  border-bottom:1px solid transparent;
}
#site-header.scrolled {
  background:color-mix(in srgb, var(--header-mix) 72%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:color-mix(in srgb, var(--fg) 12%, transparent);
}
.header-inner { max-width:var(--maxw); height:100%; margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; }
.brand-mark { height:19px; width:auto; color:var(--fg); }
.nav { display:flex; gap:26px; }
.nav a { position:relative; font-family:var(--ff-head); font-weight:500; font-size:13px; text-transform:lowercase; color:var(--fg-soft); transition:color var(--dur-base) var(--ease-out); }
.nav a::after { content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--dur-base) var(--ease-out); }
.nav a:hover { color:var(--fg); } .nav a:hover::after { transform:scaleX(1); }
.header-right { display:flex; align-items:center; gap:14px; }
.nav-toggle { display:none; width:44px; height:44px; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.nav-toggle span { width:22px; height:2px; background:var(--fg); transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.nav-open .nav-toggle span:first-child { transform:translateY(3.5px) rotate(45deg); }
.nav-open .nav-toggle span:last-child { transform:translateY(-3.5px) rotate(-45deg); }

.mobile-nav {
  position:fixed; inset:0; z-index:99; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--header-mix) 98%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity var(--dur-base) var(--ease-out);
}
.nav-open .mobile-nav { opacity:1; }
.mobile-nav nav { display:flex; flex-direction:column; align-items:center; gap:var(--space-6); }
.mobile-nav a { font-family:var(--ff-head); font-weight:500; font-size:var(--fs-h3); text-transform:lowercase; color:var(--fg);
  opacity:0; transform:translateY(10px); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.nav-open .mobile-nav a { opacity:1; transform:none; }
.nav-open .mobile-nav a:nth-child(1){ transition-delay:.06s; }
.nav-open .mobile-nav a:nth-child(2){ transition-delay:.12s; }
.nav-open .mobile-nav a:nth-child(3){ transition-delay:.18s; }
.nav-open .mobile-nav a:nth-child(4){ transition-delay:.24s; }
.nav-open .mobile-nav a:nth-child(5){ transition-delay:.30s; }
.mobile-nav a.mobile-buy { color:var(--on-accent); } /* beats .mobile-nav a */

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position:relative; min-height:660px; height:100svh;
  display:flex; flex-direction:column; justify-content:flex-start;
  overflow:hidden;
}
.hero-backdrop { position:absolute; left:0; right:0; top:-8%; height:116%; z-index:0; will-change:transform; }
.hero-backdrop img {
  width:100%; height:100%; object-fit:cover; object-position:center bottom;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 34%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 34%);
  opacity:0; transform:scale(1.04);
}
.loaded .hero-backdrop img { opacity:1; transform:scale(1); transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.hero-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center bottom;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 34%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 34%);
  opacity:0; transition:opacity 900ms var(--ease-out); pointer-events:none;
}
.hero-video.ready { opacity:1; }
.hero-content {
  position:relative; z-index:1; width:100%; max-width:1080px;
  margin-inline:auto; padding-inline:var(--gutter);
  padding-top:clamp(96px, 15vh, 168px); padding-bottom:40vh;
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.hero .eyebrow { justify-content:center; }
.wordmark { line-height:1; margin:var(--space-2) 0 var(--space-5); }
.wordmark-svg {
  width:min(1000px, 90vw); height:auto; margin-inline:auto; color:var(--ink);
  /* DEVIATION from design.md §7.2 (fill:paper): white is unreadable on the
     cream hero sky. A dark mark reads at 10.97:1, matches the other hero
     text, and keeps the artwork's quiet restraint. A light lift + warm sky
     bloom keep it luminous rather than flat. */
  filter:
    drop-shadow(0 1px 0 rgba(255,253,250,.55))
    drop-shadow(0 8px 22px rgba(78,58,37,.28))
    drop-shadow(0 0 46px rgba(245,227,178,.5));
}
.hero-sub { font-size:var(--fs-lead); color:var(--fg); max-width:38ch; margin:0 auto var(--space-6); }
.cta-row { display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:center; margin-top:var(--space-6); }
.social-row { display:flex; gap:8px; justify-content:center; margin-top:var(--space-7); color:var(--fg-soft); }
.social-row a { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; transition:transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.social-row a:hover { transform:translateY(-3px); color:var(--fg); }
.hero .stat-rail { width:100%; }

/* ============================================================
   The Thesis
   ============================================================ */
.thesis-grid { display:grid; grid-template-columns:5fr 7fr; gap:clamp(32px,6vw,88px); align-items:start; }
.thesis-left { position:sticky; top:120px; }
.thesis-left .h2 { margin-top:var(--space-4); }
.lead { font-size:var(--fs-lead); color:var(--fg-soft); max-width:var(--maxw-text); }
.lead p + p { margin-top:var(--space-5); }
.lead .lead-strong { color:var(--fg); font-weight:500; }
.spec-grid { display:grid; grid-template-columns:repeat(2,1fr); margin-top:var(--space-8);
  border-top:1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.spec-cell { padding:var(--space-5) var(--space-4);
  border-bottom:1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.spec-cell:nth-child(odd){ border-right:1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.spec-cell dt { font-family:var(--ff-mono); font-weight:300; font-size:11px; text-transform:lowercase; color:var(--fg-soft); margin-bottom:8px; }
.spec-cell dd { font-family:var(--ff-head); font-weight:500; font-size:var(--fs-h3); color:var(--fg); font-variant-numeric:tabular-nums; }

/* ============================================================
   The Tape (horizon marquee)
   ============================================================ */
.tape { position:relative; width:100%; height:60px; overflow:hidden;
  background:color-mix(in srgb, var(--fg) 5%, transparent);
  border-top:1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  display:flex; align-items:center; }
.tape-track { display:inline-flex; align-items:center; white-space:nowrap; will-change:transform; }
.tape-item { font-family:var(--ff-mono); font-weight:300; font-size:12px; letter-spacing:.24em; text-transform:lowercase; color:var(--fg-soft); padding:0 20px; }
.tape-item a { color:inherit; transition:color var(--dur-fast) var(--ease-out); }
.tape-item a:hover { color:var(--fg); }
.tape-sep { opacity:.4; padding:0 4px; }

/* ============================================================
   The Run
   ============================================================ */
.run-standfirst { font-size:var(--fs-lead); color:var(--fg-soft); max-width:56ch; margin-top:var(--space-5); }
.run-band { position:relative; width:100%; height:42vh; margin-block:var(--section-y); overflow:hidden; }
.run-band img { width:100%; height:100%; object-fit:cover; object-position:center 40%;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%); }
.ledger { display:flex; gap:var(--space-5); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:var(--space-4); scrollbar-width:none; }
.ledger::-webkit-scrollbar { display:none; }
.entry { flex:0 0 300px; scroll-snap-align:start; border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--fg) 4%, transparent);
  border:1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); }
.entry-meta { font-family:var(--ff-mono); font-weight:300; font-size:11px; text-transform:lowercase; color:var(--fg-soft); }
.entry-value { font-family:var(--ff-head); font-weight:700; font-size:var(--fs-stat); line-height:1; color:var(--fg); font-variant-numeric:tabular-nums; }
.entry-note { font-size:14px; color:var(--fg-soft); }
.ledger-progress { height:1px; margin-top:var(--space-4); background:color-mix(in srgb, var(--fg) 12%, transparent); position:relative; }
.ledger-progress span { position:absolute; left:0; top:0; height:100%; width:0; background:var(--fg); opacity:.5; }

/* ============================================================
   How to Buy
   ============================================================ */
.buy #nightfall { position:absolute; top:0; left:0; width:1px; height:1px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); margin-top:var(--space-8); }
.step { position:relative; border-radius:var(--radius-md); padding:var(--space-6);
  background:color-mix(in srgb, var(--paper) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.step:hover { transform:translateY(-4px); background:color-mix(in srgb, var(--paper) 10%, transparent); border-color:color-mix(in srgb, var(--paper) 40%, transparent); }
.step-num { position:absolute; top:-8px; right:6px; font-family:var(--ff-head); font-weight:700; font-size:52px;
  color:color-mix(in srgb, var(--paper) 18%, transparent); font-variant-numeric:tabular-nums; }
.step .h3 { margin-bottom:var(--space-3); }
.step p { font-size:15px; color:var(--fg-soft); }
.buy-cta { display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:center; margin-top:var(--space-8); }

/* ============================================================
   The Field (meme wall)
   ============================================================ */
.field .wrap { margin-bottom:var(--space-7); }
.wall { display:flex; flex-direction:column; gap:var(--space-4); overflow-x:clip; }
.wall-row { display:flex; gap:var(--space-4); width:max-content; will-change:transform; }
.wall-row-a { animation:wallLeft 62s linear infinite; }
.wall-row-b { animation:wallRight 78s linear infinite; }
@media (hover:hover){ .wall:hover .wall-row { animation-play-state:paused; } }
@keyframes wallLeft { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes wallRight { from{ transform:translateX(-50%);} to{ transform:translateX(0);} }
.wall-img { position:relative; height:250px; flex:none; border-radius:var(--radius-md);
  border:1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  outline:4px solid var(--night); overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.wall-img img { height:100%; width:auto; object-fit:cover; }
@media (hover:hover){ .wall-row .wall-img:hover { transform:translateY(-6px) scale(1.03); border-color:color-mix(in srgb, var(--paper) 40%, transparent); z-index:2; } }

/* ============================================================
   Live — the CRT
   ============================================================ */
.crt-scene { max-width:940px; margin:var(--space-9) auto 0; position:relative; }
.crt-desk { position:relative; }
.crt {
  position:relative; z-index:2; padding:22px 22px 46px; border-radius:var(--radius-crt);
  background:linear-gradient(168deg, #EFE6C6, var(--bone) 45%, #CFC3A0);
  box-shadow:0 2px 0 rgba(255,255,255,.5) inset, 0 -3px 8px rgba(78,58,37,.28) inset, 0 30px 60px -20px rgba(16,26,46,.65);
}
.crt-screen { position:relative; background:#0C1410; border-radius:6px; overflow:hidden;
  aspect-ratio:4/3; min-height:460px;
  box-shadow:0 0 0 2px rgba(78,58,37,.35) inset, 0 8px 26px rgba(0,0,0,.6) inset; }
#dex-frame { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1; background:#0C1410; }
.crt-scan { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); }
.crt-glow { position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--phosphor) 5%, transparent), transparent 60%),
             radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45)); }
.crt-sweep { position:absolute; left:0; right:0; top:0; height:3px; z-index:4; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,0)); opacity:0; }
.crt-sweep.play { animation:sweep 300ms linear 1; }
@keyframes sweep { 0%{ opacity:1; transform:translateY(0);} 100%{ opacity:0; transform:translateY(var(--sweep-h,460px)); } }
.crt-boot { position:absolute; inset:0; z-index:5; background:#0C1410; padding:26px;
  display:flex; flex-direction:column; gap:6px; font-family:var(--ff-screen); font-size:22px; color:var(--phosphor);
  transition:opacity 400ms var(--ease-out); }
.crt-boot.hide { opacity:0; pointer-events:none; }
.crt-cursor { animation:blink 1.1s step-end infinite; }
@keyframes blink { 50%{ opacity:0; } }
.crt-chin { display:flex; align-items:center; justify-content:space-between; padding:14px 6px 0; }
.crt-brand { font-family:var(--ff-screen); font-size:18px; color:color-mix(in srgb, var(--umber) 60%, transparent); letter-spacing:.05em; }
.crt-led { width:6px; height:6px; border-radius:50%; background:var(--phosphor); box-shadow:0 0 8px var(--phosphor); animation:breathe 3.2s var(--ease-in-out) infinite; }
@keyframes breathe { 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.crt-desk::after {
  content:""; display:block; height:26px; margin:0 6% ; border-radius:0 0 6px 6px;
  background:linear-gradient(180deg, var(--timber), #6B5220);
  transform:perspective(600px) rotateX(38deg); transform-origin:top;
  box-shadow:0 18px 30px -10px rgba(16,26,46,.6);
}
.crt-shadow { position:absolute; left:12%; right:12%; bottom:-6px; height:26px; z-index:0;
  background:radial-gradient(ellipse at center, rgba(16,26,46,.5), transparent 70%); filter:blur(4px); }
.live-link { text-align:right; margin-top:var(--space-6); }
.live-link a { display:inline-flex; align-items:center; gap:6px; font-family:var(--ff-head); font-weight:500; font-size:14px; text-transform:lowercase; color:var(--fg-soft); transition:color var(--dur-base) var(--ease-out); }
.live-link a:hover { color:var(--fg); }

/* ============================================================
   Footer
   ============================================================ */
.footer { position:relative; background:var(--night); color:var(--paper); overflow:hidden; padding-block:var(--space-10) var(--space-7); }
.footer-bg { position:absolute; inset:0; z-index:0; opacity:.35; }
.footer-bg img { width:100%; height:100%; object-fit:cover; object-position:center;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 40%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 40%); }
.footer-inner { position:relative; z-index:1; }
.footer-cols { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-7); }
.footer-wordmark { height:21px; width:auto; color:var(--paper); }
.footer-tag { margin-top:var(--space-4); font-size:14px; color:color-mix(in srgb, var(--paper) 70%, transparent); max-width:40ch; }
.footer-col h4 { font-family:var(--ff-mono); font-weight:300; font-size:10px; text-transform:lowercase; letter-spacing:.2em; color:var(--fg-soft); margin-bottom:var(--space-4); }
.footer-col a, .footer-ca { display:block; text-align:left; font-size:14px; color:color-mix(in srgb, var(--paper) 70%, transparent); padding:5px 0; transition:color var(--dur-base) var(--ease-out); }
.footer-col a:hover, .footer-ca:hover { color:var(--paper); }
.disclaimer { margin-top:var(--space-9); padding-top:var(--space-6); border-top:1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  font-size:12px; line-height:1.7; color:color-mix(in srgb, var(--paper) 55%, transparent); max-width:90ch; }
.footer-bottom { display:flex; justify-content:space-between; margin-top:var(--space-7);
  font-family:var(--ff-mono); font-weight:300; font-size:10px; text-transform:lowercase; color:color-mix(in srgb, var(--paper) 55%, transparent); }

/* ============================================================
   Reveal / load motion
   ============================================================ */
.reveal { opacity:0; transform:translateY(24px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in { opacity:1; transform:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1200px){
  .spec-grid { grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1201px){
  .spec-grid { grid-template-columns:repeat(4,1fr); }
  .spec-cell { border-right:1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
  .spec-cell:last-child { border-right:0; }
}
@media (max-width:1100px){
  .ca-value { } /* truncation handled in JS/markup */
}
@media (max-width:900px){
  .thesis-grid { grid-template-columns:1fr; }
  .thesis-left { position:static; }
  .spec-grid { grid-template-columns:repeat(2,1fr) !important; }
  .spec-cell:nth-child(odd){ border-right:1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
}
@media (max-width:860px){
  .steps { grid-template-columns:1fr; }
}
@media (max-width:720px){
  .nav { display:none; }
  .nav-toggle { display:flex; }
  .rail-dock { display:none !important; }
  .header-right > .btn-primary { display:none; } /* moved into the overlay menu */
  .brand-mark { height:16px; }
  .mobile-buy { margin-top:var(--space-4); }
  .stat-rail { grid-template-columns:1fr 1fr; }
  .stat-cell { border-left:0 !important; border-top:1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
  .stat-cell:nth-child(-n+2){ border-top:0; }
  .stat-cell:nth-child(odd){ border-right:1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
  .stat-liq { grid-column:1 / -1; }
  .wordmark-svg { width:96%; }
  .footer-cols { grid-template-columns:1fr; gap:var(--space-6); }
  .footer-bottom { flex-direction:column; gap:8px; }
  .crt-screen { aspect-ratio:3/4; min-height:420px; }
  .crt { padding:12px 12px 34px; border-radius:12px; }
  .crt-desk::after { height:16px; }
  .wall-img { height:170px; }
  .run-band { height:38vh; }

  /* --- mobile audit fixes --- */
  /* let the hero grow to fit its content so the stat rail isn't clipped */
  .hero { height:auto; min-height:100svh; }
  .hero-content { padding-top:clamp(84px,12vh,120px); padding-bottom:var(--space-9); }
  /* stack the ledger so each card reveals on scroll instead of needing a swipe */
  .ledger { flex-direction:column; overflow-x:hidden; scroll-snap-type:none; }
  .entry { flex:none; }
  .ledger-progress { display:none; }
  /* larger tap targets */
  .ca-chip { padding:13px 16px; }
  .footer-col a, .footer-ca { padding:9px 0; }
}
@media (min-width:721px){ .mobile-nav{ display:none; } }

/* ============================================================
   Reduced motion (design.md §10.5) — sky arc is kept
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .reveal { transform:none; transition:opacity 200ms var(--ease-out); }
  .loaded .hero-backdrop img { transform:none; transition:opacity 200ms var(--ease-out); }
  .wall-row-a, .wall-row-b { animation:none; }
  .wall { flex-wrap:wrap; }
  .wall-row { flex-wrap:wrap; width:100%; }
  .crt-led { animation:none; }
  .crt-sweep.play { animation:none; }
  .crt-cursor { animation:none; }
  #stars, #stars .star { animation:none !important; }
}