/* Postmatch - the app's own look: a near-black canvas, purple (#A78BFA) as the one accent,
   cyan for good news, red only for REC, gold only for clips. Space Grotesk for text, IBM Plex
   Mono for numbers and labels, Silkscreen (pixel) for the wordmark and small tags. */
:root {
  --bg: #0b0c10;
  --bg-alt: #0f1015;
  --panel: #15171d;
  --panel2: #1c1f27;
  --line: #22252d;
  --line2: #2a2e38;
  --text: #f4f4f1;
  --soft: #c9ccd5;
  --muted: #a1a6b4;
  --dim: #8a8f9c;
  --purple: #a78bfa;
  --purple-deep: #8b5cf6;
  --purple-tint: #1e1830;
  --cyan: #22d3ee;
  --red: #ff4d6a;
  --gold: #ffd23f;
  --on-accent: #0b0c10;
  --radius: 16px;
  --body: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --pixel: "Silkscreen", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.narrow { max-width: 800px; }

/* ---- buttons, tags ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border-radius: 14px; border: 1px solid var(--purple);
  background: var(--purple); color: var(--on-accent);
  font: 600 17px var(--body); text-decoration: none;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.btn:hover { background: #b9a2fc; box-shadow: 0 0 0 6px #a78bfa22, 0 10px 40px #a78bfa44; transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line2); }
.btn-ghost:hover { background: var(--panel2); box-shadow: none; }
.btn-small { min-height: 42px; padding: 0 18px; font-size: 15px; border-radius: 12px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font: 11px var(--pixel); letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 9px; border-radius: 7px;
  color: var(--purple); background: #a78bfa1f;
}
.tag.cyan { color: var(--cyan); background: #22d3ee1a; }
.tag.gold { color: var(--gold); background: #ffd23f1a; }
.tag.red { color: var(--red); background: #ff4d6a1f; }

/* ---- nav -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: #0b0c10d9; backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { border-radius: 8px; }
.wordmark {
  font: 700 18px var(--pixel); letter-spacing: 2px;
  text-shadow: -1.5px 0 #22d3ee99, 1.5px 0 #ff4d6a88;
}
.links { display: flex; gap: 24px; margin-left: auto; }
.links a { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; }
.links a:hover { color: var(--text); }
.nav .btn { flex: none; }

/* ---- hero ------------------------------------------------------------------------- */
/* the hero fills the screen; the 3D scene (hero3d.js) draws behind the headline */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100svh - 68px);
  display: flex; align-items: center;
  padding: 72px 0 96px;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 70% 10%, #8b5cf633, transparent 70%),
    radial-gradient(40% 40% at 10% 0%, #22d3ee14, transparent 70%),
    repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 4px);
}
#scene {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.2s ease;
}
#scene.live, #scene:not(.live) { opacity: 1; }
/* keeps the headline readable over the scene, and fades the scene into the page below */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 46% at 50% 48%, #0b0c10e0, #0b0c1080 55%, transparent 80%),
    linear-gradient(to bottom, transparent 70%, var(--bg));
}
.hero > .wrap { position: relative; z-index: 1; width: 100%; }
.hero-copy { position: relative; max-width: 820px; margin: 0 auto; text-align: center; }
.hero h1 { text-shadow: 0 4px 40px #0b0c10; }
.scroll-cue {
  position: absolute; z-index: 1; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: 26px; height: 42px; border-radius: 14px; border: 2px solid var(--line2);
}
.scroll-cue span {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: var(--purple); animation: cue 1.8s infinite;
}
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.showcase { padding: 8px 0 30px; }
.showcase .hero-shot { margin-top: 0; }

/* how it works: a match timeline with three live stops */
.flow {
  --p: 0;
  position: relative; list-style: none; padding: 0; margin: 48px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
/* the track runs through the dots (they sit 24px under the media) */
.flow::before, .flow::after {
  content: ""; position: absolute; left: 16.6%; right: 16.6%; top: calc(var(--media-h) + 31px);
  height: 4px; border-radius: 2px;
}
.flow { --media-h: 220px; }
.flow::before { background: var(--line2); }
.flow::after {
  right: auto; width: calc(66.8% * var(--p));
  background: linear-gradient(90deg, var(--red), var(--cyan) 50%, var(--gold));
  background-size: calc(100% / max(var(--p), .01)) 100%;
  box-shadow: 0 0 18px #a78bfa66;
}
.flow-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.flow-media {
  position: relative; width: 100%; height: var(--media-h); border-radius: 18px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line2);
  box-shadow: 0 24px 60px #0009;
  transition: border-color .4s, box-shadow .4s, transform .4s;
}
.flow-step.lit .flow-media { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 24px 60px #0009, 0 0 40px color-mix(in srgb, var(--c) 25%, transparent); }
.flow-media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.flow-media.clip { background: radial-gradient(60% 80% at 50% 50%, #ffd23f22, transparent 70%), #0e0a16; display: grid; place-items: center; }
.flow-media.clip img { height: calc(var(--media-h) * .88); width: calc(var(--media-h) * .88 * 9 / 16); border-radius: 10px; border: 2px solid var(--gold); object-position: center; }
.badge {
  position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 9px; font: 600 13px var(--mono);
  background: #0b0c10d9; border: 1px solid #ff4d6a66; color: var(--red); backdrop-filter: blur(6px);
}
.badge b { color: var(--text); font-weight: 500; }
.badge.cyan { color: var(--cyan); border-color: #22d3ee55; }
.badge.gold { color: var(--on-accent); background: var(--gold); border-color: var(--gold); }
.flow-dot {
  position: relative; z-index: 1; width: 22px; height: 22px; margin: 22px 0 18px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--line2); transition: border-color .4s, box-shadow .4s, background .4s;
}
.flow-step.lit .flow-dot { border-color: var(--c); background: color-mix(in srgb, var(--c) 30%, var(--bg)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent), 0 0 24px var(--c); }
.flow-step .step-n { margin: 0; font: 12px var(--pixel); letter-spacing: 1.5px; text-transform: uppercase; color: var(--c); }
.flow-step h3 { font-size: 30px; margin: 6px 0 10px; }
.flow-step > p:last-child { color: var(--muted); margin: 0; max-width: 340px; }
@media (max-width: 860px) {
  /* phones: the track runs down the left side */
  .flow { grid-template-columns: 1fr; gap: 44px; padding-left: 40px; --media-h: 200px; }
  .flow::before, .flow::after { left: 10px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .flow::after { bottom: auto; height: calc(100% * var(--p)); background: linear-gradient(var(--red), var(--cyan) 50%, var(--gold)); background-size: 100% calc(100% / max(var(--p), .01)); }
  .flow-step { align-items: flex-start; text-align: left; }
  .flow-dot { position: absolute; left: -41px; top: calc(var(--media-h) + 10px); margin: 0; }
  .flow-step .step-n { margin-top: 18px; }
}

/* Medal-style numbered pitch sections */
.pitch-row { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
.pitch-rev .pitch-copy { order: 2; }
.pitch-n {
  display: inline-grid; place-items: center; min-width: 64px; height: 44px; padding: 0 12px; margin-bottom: 20px;
  font: 700 26px var(--pixel); color: var(--purple);
  border: 2px solid var(--purple); border-radius: 10px 10px 10px 0;
  box-shadow: 0 0 24px #a78bfa44, inset 0 0 12px #a78bfa22;
}
.pitch h2 { font-size: clamp(36px, 5.4vw, 60px); }
.pitch-media {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line2); box-shadow: 0 30px 80px #000b, 0 0 60px #8b5cf622;
}
.pitch-media > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.games { margin-top: 56px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.games-track { display: flex; gap: 14px; width: max-content; }
.games-track.moving { animation: reel 40s linear infinite; }
/* each game: its store art (460x215) as a small card */
.game {
  flex: none; display: block; width: 196px; height: 92px; border-radius: 14px; object-fit: cover;
  border: 1px solid var(--line2); background: var(--panel); box-shadow: 0 12px 30px #0008;
  filter: saturate(.85) brightness(.9); transition: filter .2s, transform .2s, border-color .2s;
}
.game:hover { filter: none; transform: translateY(-3px); border-color: #a78bfa88; }
.game-icon, .game-more {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-weight: 700; font-size: 17px; letter-spacing: .5px;
}
.game-icon { background: linear-gradient(135deg, #2a0f14, #15171d); }
.game-icon img { width: 52px; height: 52px; border-radius: 12px; }
.game-more { color: var(--purple); font: 600 15px var(--mono); background: var(--purple-tint); border-color: #a78bfa55; }
@media (max-width: 680px) { .game { width: 156px; height: 73px; } .game-icon img { width: 40px; height: 40px; } }

/* 02: a key being pressed for nothing, next to the whole match already on tape */
.pitch-media.keys { overflow: visible; border: 0; box-shadow: none; display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.keycap {
  position: relative; width: 120px; height: 120px; border-radius: 22px;
  background: linear-gradient(#262a35, #171a21); border: 1px solid #3a3f4c;
  box-shadow: 0 10px 0 #0e1015, 0 18px 40px #000a;
  display: grid; place-items: center; animation: press 2.4s infinite;
}
.keycap span { font: 700 40px var(--mono); color: var(--soft); }
.keycap::after { /* struck through: not needed */
  content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 4px; border-radius: 2px;
  background: var(--red); transform: rotate(-35deg); box-shadow: 0 0 14px var(--red);
}
@keyframes press { 0%, 70%, 100% { transform: translateY(0); box-shadow: 0 10px 0 #0e1015, 0 18px 40px #000a; } 78% { transform: translateY(8px); box-shadow: 0 2px 0 #0e1015, 0 8px 20px #000a; } }
.whole-match { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line2); box-shadow: 0 30px 80px #000b; }
.whole-match img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.match-bar {
  position: absolute; left: 14px; right: 14px; bottom: 14px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--purple-deep), var(--cyan)); box-shadow: 0 0 16px #a78bfa88;
}
.match-bar i { position: absolute; top: -5px; width: 6px; height: 18px; margin-left: -3px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.match-bar span { position: absolute; left: 0; bottom: 16px; font: 600 12px var(--mono); color: var(--text); text-shadow: 0 1px 6px #000; }
@media (max-width: 980px) {
  .pitch-row { grid-template-columns: 1fr; gap: 32px; }
  .pitch-rev .pitch-copy { order: 0; }
}
@media (max-width: 680px) {
  .pitch-media.keys { grid-template-columns: 1fr; justify-items: center; }
  .keycap { width: 90px; height: 90px; }
  .keycap span { font-size: 30px; }
}

/* the reel: real gameplay loops scrolling past, like a highlight feed */
.reel { padding: 28px 0 12px; overflow: hidden; }
.reel-title { text-align: center; margin: 0 0 18px; }
.reel-track { display: flex; gap: 16px; width: max-content; padding: 0 16px; }
.reel-track.moving { animation: reel 70s linear infinite; }
.reel:hover .reel-track.moving, .games:hover .games-track.moving { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(calc(-50% - 8px)); } }
.snip {
  position: relative; margin: 0; flex: none;
  width: 340px; height: 191px; border-radius: 16px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line2);
  box-shadow: 0 18px 50px #0008;
  transition: transform .2s, border-color .2s;
}
.snip.tall { width: 108px; }
.snip:hover { transform: translateY(-4px); border-color: #a78bfa88; }
.snip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 10px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; font-weight: 600;
  background: linear-gradient(transparent, #0b0c10e6);
}
.snip figcaption small { color: var(--muted); font-weight: 500; }
.snip.tall figcaption small { display: none; }
@media (max-width: 680px) {
  .snip { width: 260px; height: 146px; }
  .snip.tall { width: 82px; }
}

/* the pixel-logo scene puts the headline on the left, the logo on the right */
.hero[data-align="left"] .hero-copy { text-align: left; margin: 0; max-width: 560px; }
.hero[data-align="left"] .lead { margin-left: 0; }
.hero[data-align="left"] .cta-row { justify-content: flex-start; }
.hero[data-align="left"]::after {
  background:
    radial-gradient(40% 60% at 22% 50%, #0b0c10d0, #0b0c1060 60%, transparent 85%),
    linear-gradient(to bottom, transparent 70%, var(--bg));
}
@media (max-width: 980px) {
  .hero[data-align="left"] .hero-copy { text-align: center; margin: 0 auto; }
  .hero[data-align="left"] .lead { margin-left: auto; }
  .hero[data-align="left"] .cta-row { justify-content: center; }
  .hero[data-align="left"] { padding-top: 290px; align-items: flex-start; }
}

/* ?variants: the scene switcher */
.variant-bar {
  position: fixed; z-index: 50; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 5px; max-width: calc(100vw - 32px); overflow-x: auto;
  border-radius: 14px; background: #15171df2; border: 1px solid var(--line2);
  box-shadow: 0 14px 40px #000a; backdrop-filter: blur(10px);
}
.variant-bar a {
  flex: none; padding: 9px 14px; border-radius: 10px; text-decoration: none;
  font-size: 14px; font-weight: 600; color: var(--muted);
}
.variant-bar a:hover { color: var(--text); background: var(--panel2); }
.variant-bar a[aria-current] { background: var(--purple); color: var(--on-accent); }

/* sections slide in as they come into view */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.features .reveal:nth-child(3n + 2), .steps .reveal:nth-child(2) { transition-delay: .08s; }
.features .reveal:nth-child(3n), .steps .reveal:nth-child(3) { transition-delay: .16s; }
.eyebrow { display: inline-flex; margin: 0 0 22px; }
.rec-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 10px var(--red); animation: blink 1.6s infinite;
}
@keyframes blink { 50% { opacity: .25; } }
.hero h1 { font-size: clamp(40px, 7vw, 76px); font-weight: 700; }
.hero h1 em { font-style: normal; color: var(--purple); }
.lead { color: var(--soft); font-size: clamp(17px, 2.2vw, 20px); max-width: 640px; margin: 22px auto 0; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.fine { color: var(--dim); font-size: 14px; margin: 16px 0 0; }
.fine a { color: var(--muted); }
.hint { margin-top: 6px; }

.hero-shot { position: relative; margin: 56px auto 0; max-width: 1120px; }
.frame {
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line2); background: var(--panel);
  box-shadow: 0 40px 120px #000c, 0 0 0 1px #ffffff06, 0 0 80px #8b5cf62e;
}
.frame-bar {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  background: #0f1116; border-bottom: 1px solid var(--line);
  font: 12px var(--mono); color: var(--dim);
}
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
.frame-bar span { margin-left: 8px; }
.float {
  position: absolute; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  background: #15171dee; border: 1px solid var(--line2); backdrop-filter: blur(8px);
  font-size: 14px; font-weight: 600; box-shadow: 0 14px 40px #0009;
}
.float small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.float-rec { left: -18px; top: 70px; }
.float-clip { right: -18px; bottom: -22px; }

/* ---- stats strip ------------------------------------------------------------------ */
.stats { padding: 30px 0 10px; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat {
  padding: 20px 22px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
}
.stat b { display: block; font: 600 30px var(--mono); letter-spacing: -0.02em; }
.stat span { color: var(--muted); font-size: 15px; }
.stat:first-child b { color: var(--cyan); }

/* ---- sections --------------------------------------------------------------------- */
.section { padding: 96px 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kicker { font: 12px var(--pixel); letter-spacing: 2px; color: var(--purple); margin: 0 0 14px; text-transform: uppercase; }
.section h2 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; max-width: 820px; }
.sub { color: var(--soft); font-size: 18px; max-width: 680px; margin: 16px 0 0; }

.steps { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps li {
  position: relative; padding: 26px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
}
.steps li:nth-child(1) { border-top: 3px solid var(--red); }
.steps li:nth-child(2) { border-top: 3px solid var(--cyan); }
.steps li:nth-child(3) { border-top: 3px solid var(--gold); }
.step-n { font: 13px var(--mono); color: var(--dim); }
.steps h3 { font-size: 24px; margin: 8px 0 8px; }
.steps p { color: var(--muted); margin: 0; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.features article {
  padding: 24px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .15s, transform .15s;
}
.features article:hover { border-color: var(--purple-tint); transform: translateY(-2px); border-color: #a78bfa55; }
.features .ico {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--purple-tint); color: var(--purple); margin-bottom: 16px;
}
.features .ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.features h3 { font-size: 19px; margin-bottom: 8px; }
.features p { color: var(--muted); margin: 0; font-size: 16px; }

/* ---- tour (screenshots with copy) ------------------------------------------------- */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.split-rev { grid-template-columns: 7fr 5fr; }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; color: var(--soft); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 6px;
  background: var(--purple-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23A78BFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* ---- benchmark -------------------------------------------------------------------- */
.bars { margin-top: 40px; padding: 28px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.bars-title { margin: 0 0 18px; font: 12px var(--pixel); letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 90px; gap: 16px; align-items: center; margin-top: 12px; }
.bar-row span { color: var(--soft); font-size: 15px; }
.bar-row b { font: 500 15px var(--mono); text-align: right; color: var(--muted); }
.track { height: 12px; border-radius: 6px; background: var(--panel2); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 6px; background: #3a3f4c; }
.bar-row.ours span, .bar-row.ours b { color: var(--text); font-weight: 600; }
.bar-row.ours i { background: linear-gradient(90deg, var(--purple-deep), var(--purple)); box-shadow: 0 0 16px #a78bfa88; }

.table-wrap { margin-top: 20px; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
thead th { font: 11px var(--pixel); letter-spacing: 1px; color: var(--dim); text-transform: uppercase; }
tbody th { color: var(--soft); font-weight: 500; }
td { font-family: var(--mono); color: var(--muted); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
.ours { color: var(--text); background: #a78bfa12; }
thead .ours { color: var(--purple); }
.note { color: var(--dim); font-size: 14px; margin: 16px 0 0; }

/* ---- coming soon ------------------------------------------------------------------ */
.soon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.soon div { padding: 22px; border-radius: var(--radius); border: 1px dashed var(--line2); background: #15171d80; }
.soon h3 { font-size: 17px; margin: 12px 0 6px; }
.soon p { color: var(--muted); font-size: 15px; margin: 0; }

/* ---- promise ---------------------------------------------------------------------- */
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.promise div { padding: 26px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.promise h3 { font-size: 20px; margin-bottom: 8px; }
.promise p { color: var(--muted); margin: 0; }

/* ---- faq -------------------------------------------------------------------------- */
details { border-bottom: 1px solid var(--line); }
details:first-of-type { margin-top: 32px; border-top: 1px solid var(--line); }
summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-size: 18px; font-weight: 600;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; position: absolute; right: 6px; top: 16px;
  font: 400 24px var(--mono); color: var(--purple); transition: transform .15s;
}
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--muted); margin: 0 0 20px; }
details a { color: var(--purple); }

/* ---- final call ------------------------------------------------------------------- */
.final { padding: 40px 0 110px; }
.final-box {
  position: relative; overflow: hidden; text-align: center;
  padding: 64px 24px; border-radius: 24px;
  background: radial-gradient(70% 90% at 50% 0%, #8b5cf640, transparent 70%), var(--panel);
  border: 1px solid #a78bfa44;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.final-box img { border-radius: 18px; box-shadow: 0 0 60px #8b5cf688; }
.final-box h2 { font-size: clamp(28px, 4.4vw, 44px); max-width: 720px; }

.footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--dim); font-size: 14px; }
.footer-row { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.brand.small .wordmark { font-size: 13px; }

/* ---- smaller screens -------------------------------------------------------------- */
@media (max-width: 980px) {
  .links { display: none; }
  .nav .btn { margin-left: auto; }
  .features, .promise { grid-template-columns: 1fr 1fr; }
  .soon { grid-template-columns: 1fr 1fr; }
  .split, .split-rev { grid-template-columns: 1fr; gap: 32px; }
  .split-rev > :first-child { order: 2; } /* the words before the picture on small screens */
  .float { display: none; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .hero { padding-top: 56px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .steps, .features, .promise, .soon { grid-template-columns: 1fr; }
  .section { padding: 68px 0; }
  .bar-row { grid-template-columns: 88px 1fr 72px; gap: 10px; }
  .stat b { font-size: 24px; }
  .btn { width: 100%; justify-content: center; }
  .nav .btn { width: auto; }
}
/* reduced motion: no slide-ins or blinking; the strips keep scrolling (slowly) - they're the point */
@media (prefers-reduced-motion: reduce) {
  *:not(.moving) { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .moving { animation-duration: 140s !important; }
}