/* SPOTTED — a framed dark screen with film grain and a pill nav (after faze.fun). The hero renders
   Times Square live in grey ASCII; below it the same ASCII city continues, section titles speak
   like the wordmark (Chakra Petch 700, uppercase), data is mono, and the only colour on the page is
   what plays on SPOTTED screens, plus the red REC light and lime "live" marks. */

:root {
  --bg: #06080c;
  --surface: #0a0d13;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #f2f4f8;
  --muted: #9aa3b5;
  --dim: #69718a;

  --red: #e1121b;   /* brand: app icon, REC light */
  --lime: #b8f400;  /* live: screens on air, current step, the screen fund */
  --green: #32d583; /* money in: payouts, graduated */
  --gold: #f5b83d;  /* almost bonded */

  --memes: url("https://d8j0ntlcm91z4.cloudfront.net/user_3IZ46JVxauZ0jHoQOhOB9TUQiRS/hf_20260926_103500_0a523a1f-c9bf-42b1-9b6d-2464f3c64643_min.webp");

  --font-display: "Chakra Petch", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --inset: 12px;
  --pad-x: clamp(16px, 3vw, 44px);
  /* Content stops widening past this on big screens: sections centre it instead of pinning their
     parts to the far edges. --gutter is the side padding that does it (the hero stays full width). */
  --content: 1360px;
  --gutter: max(var(--pad-x), calc((100% - var(--content)) / 2));

  /* A compact scale: short pages, restrained type. */
  --t-title: clamp(30px, 3.2vw, 44px); /* page and section titles */
  --t-stat: 22px;
  --gap-section: clamp(80px, 9vw, 136px); /* room between the landing's sections */
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }

body {
  margin: 0;
  padding: var(--inset);
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- The frame, grain and fixed chrome ---------- */

/* The content scrolls under a fixed frame; its spread shadow paints the margin, like Faze's screen. */
.frame {
  position: fixed;
  inset: var(--inset);
  z-index: 40;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 0 0 80px var(--bg);
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.55;
}

.page { overflow: clip; border-radius: 18px; background: var(--surface); } /* clip, not hidden: the ladder stage sticks to the viewport */

.app-icon {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 45;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--red);
  box-shadow: 0 0 0 7px var(--bg); /* cuts a notch into the frame corner */
}

.app-icon svg { width: 24px; height: 24px; }
.app-icon path { fill: none; stroke: #fff; stroke-width: 2; }
.app-icon circle { fill: #fff; }

.pill-nav {
  position: fixed;
  top: calc(var(--inset) + 12px);
  left: 50%;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 42px;
  padding: 4px;
  transform: translateX(-50%);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(8, 10, 15, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* Each link is its own small pill: a soft fill on hover, a brighter one for the page you're on. */
.pill-nav a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 15px;
  border-radius: 999px;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.pill-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.pill-nav a[aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, 0.1); }
.pill-nav a:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }

/* ---------- Shared small parts ---------- */

.rec {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: rec 1.3s steps(2, jump-none) infinite;
}

@keyframes rec { 50% { opacity: 0.25; } }

.tag,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(8, 10, 15, 0.9);
  font: 600 11px/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip { color: var(--muted); }
.chip-quiet { font: 400 13px/1 var(--font-body); letter-spacing: 0; text-transform: none; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(8, 10, 15, 0.9);
}

.icon-btn svg { width: 17px; height: 17px; fill: var(--text); }

.enter {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 14px;
  height: 64px;
  padding: 0 22px 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(10, 12, 18, 0.9);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  font: 600 19px/1 var(--font-display);
  transition: border-color 0.2s ease;
}

.enter:hover { border-color: rgba(255, 255, 255, 0.3); }
.enter-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #141925; }
.enter-icon svg { width: 20px; height: 20px; }
.enter-icon path { fill: none; stroke: var(--lime); stroke-width: 2; }
.enter-icon circle { fill: var(--lime); }
.enter-arrow { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.15s ease; }
.enter:hover .enter-arrow { transform: translateX(3px); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: calc(100svh - var(--inset) * 2);
  min-height: 600px;
  overflow: hidden;
}

/* Scene source, shifted down so the billboard clears the pill nav. Never visible: the ASCII is. */
.scene-src {
  position: absolute;
  top: 6%;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  pointer-events: none;
}

.ascii {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 6px rgba(190, 205, 255, 0.18));
}

/* Fallback when the media can't be read into the canvas: the photo itself, dimmed. */
.hero.is-plain #scene-img { opacity: 0.45; filter: grayscale(1) contrast(1.1); }

.hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, var(--surface) 0%, rgba(10, 13, 19, 0.6) 22%, transparent 42%),
    radial-gradient(120% 90% at 50% 38%, transparent 45%, rgba(0, 0, 0, 0.7) 100%);
}

.live-tag {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(8, 10, 15, 0.9);
  font: 600 12px/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  visibility: hidden;
}

.live-tag.is-placed { visibility: visible; }
.live-tag span { color: var(--muted); }
.live-tag b { color: var(--lime); font-weight: 600; }

.hero-foot {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(20px, 2.8vw, 40px) clamp(20px, 2.4vw, 32px);
}

/* Above the wordmark: its tight line box reaches up over the chips and would take their clicks. */
.chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }

.wordmark,
.footer-word {
  display: flex;
  align-items: flex-end;
  font: 700 clamp(84px, 14.4vw, 232px)/0.78 var(--font-display);
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

/* Faze ends its wordmark on a red stop; ours is a camera's REC light. */
.wordmark-dot {
  flex: none;
  width: 0.15em;
  height: 0.15em;
  margin: 0 0 0.02em 0.05em;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0.15em rgba(225, 18, 27, 0.55);
  animation: rec 1.6s steps(2, jump-none) infinite;
}

/* ---------- Billboard posters (content on the scene) ---------- */

.screen-poster {
  --c: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 450px;
  height: 750px;
  overflow: hidden;
  background: #000;
  transform-origin: 0 0;
  box-shadow:
    0 0 50px 6px color-mix(in srgb, var(--c) 45%, transparent),
    0 0 180px 40px color-mix(in srgb, var(--c) 18%, transparent);
  transition: box-shadow 0.8s ease;
  will-change: transform;
}

.screen-poster:not([style*="transform"]) { visibility: hidden; }

.screen-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 4px),
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.16), transparent 60%);
}

.poster-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 0;
  background: var(--c);
  color: var(--ink, #000);
  clip-path: inset(0 0 100% 0);
}

.poster-slide.is-active { clip-path: inset(0 0 0 0); transition: clip-path 0.72s steps(12, end); }

.poster-top {
  display: flex;
  justify-content: space-between;
  font: 600 15px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.poster-ticker { margin-top: 42px; font: 700 96px/0.86 var(--font-display); letter-spacing: -0.04em; }
.poster-meta { margin-top: 18px; font: 600 15px/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.poster-stat { margin-top: 8px; font: 500 22px/1.2 var(--font-display); }

.poster-art {
  flex: none;
  height: 251px;
  margin: auto -26px 0;
  background: var(--memes) no-repeat;
  background-size: 904px 506px;
}

/* ---------- Below the hero: the same grey ASCII city ---------- */

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.kicker b { color: var(--text); font-weight: 500; }
.live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }

/* Section titles speak like the wordmark (Chakra Petch 700, uppercase, tight), at a quiet size. */
.display {
  font: 700 var(--t-title)/0.92 var(--font-display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.lede { max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ---------- Live spot log ---------- */

.ticker { overflow: hidden; padding: 14px 0; border-block: 1px solid var(--line); }
.ticker-track { display: flex; width: max-content; animation: band 80s linear infinite; }
.log { display: inline-flex; gap: 10px; padding-right: 56px; font: 400 13px/1 var(--font-mono); color: var(--dim); white-space: nowrap; }
.log time { color: var(--muted); }
.log b { color: var(--text); font-weight: 500; }
.log .up { color: var(--green); }

/* ---------- How it works ---------- */

.how { padding: 40px var(--gutter) 0; }
.how-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.how-list li { padding: 22px 28px 0 0; }
.how-list li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.how-num { font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--lime); }
.how-name { margin: 12px 0 8px; font: 700 18px/1 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; }
.how-text { max-width: 42ch; font-size: 14px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ---------- The ladder: one stage, four scenes, switched by its steps ---------- */

.ladder { padding: var(--gap-section) var(--gutter) 0; }

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  align-items: center;
  gap: 48px;
  height: 440px;
}

.stage-copy { position: relative; z-index: 2; display: grid; align-content: center; gap: 18px; }

.stage-facts { display: flex; gap: 40px; }
.stage-facts dt { margin-bottom: 6px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.stage-facts dd { font: 600 var(--t-stat)/1 var(--font-display); letter-spacing: -0.01em; }
.stage-facts dd.is-coin { color: var(--c, var(--text)); transition: color 0.4s ease; }
/* Two lines reserved, so the copy block keeps its height from level to level. */
.stage-desc { max-width: 46ch; min-height: 3em; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: balance; }

.stage-steps { max-width: 440px; border-top: 1px solid var(--line); }

.stage-steps button {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  width: 100%;
  height: 38px;
  border-bottom: 1px solid var(--line);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.3s ease;
}

.stage-steps button:hover { color: var(--muted); }
.stage-steps button[aria-current="step"] { color: var(--text); }
.stage-steps button[aria-current="step"] span:first-child { color: var(--lime); }

.stage-scene {
  position: relative;
  align-self: stretch;
  -webkit-mask-image: radial-gradient(90% 85% at 50% 48%, #000 55%, transparent 100%);
  mask-image: radial-gradient(90% 85% at 50% 48%, #000 55%, transparent 100%);
}

.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s steps(6, end); }
.stage-canvas.is-on { opacity: 1; }

.scene-tag {
  position: absolute;
  right: 8%;
  bottom: 10%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(8, 10, 15, 0.9);
  font: 600 12px/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.scene-tag span { color: var(--muted); }
.scene-tag b { color: var(--c, var(--lime)); font-weight: 600; transition: color 0.4s ease; }

/* ---------- On air: the coins, colour only in their memes ---------- */

.board { padding: var(--gap-section) var(--gutter) 0; }
.board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 24px; }
.board-head .kicker { margin-bottom: 14px; }
.board-tools { display: grid; justify-items: end; gap: 18px; }

.tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; font: 500 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.tab { padding: 6px 0; color: var(--dim); transition: color 0.15s ease; }
.tab:hover { color: var(--muted); }
.tab.is-on { color: var(--text); }
.tab.is-on::before { content: "["; color: var(--lime); }
.tab.is-on::after { content: "]"; color: var(--lime); }

.search { display: flex; align-items: center; gap: 10px; width: 300px; max-width: 100%; height: 40px; border-bottom: 1px solid var(--line-2); transition: border-color 0.2s ease; }
.search:focus-within { border-color: var(--text); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: 400 14px/1 var(--font-mono); }
.search input::placeholder { color: var(--dim); }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { font: 500 11px/1 var(--font-mono); color: var(--dim); }

.coin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 28px 16px; }
.coin-link { display: grid; gap: 9px; }

.coin-art {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  background-color: #151924;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

.coin-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px); }
.coin-link:hover .coin-art { transform: translateY(-4px); }

.coin-v2 {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 4px 6px;
  border-radius: 3px;
  background: rgba(6, 8, 12, 0.8);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
}

.coin-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 500 13px/1 var(--font-mono); }
.coin-live { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }
.coin-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 6px var(--lime); }
.coin-live.is-idle { color: var(--dim); }
.coin-live.is-idle::before { background: var(--dim); box-shadow: none; }
.coin-name { margin-top: -4px; overflow: hidden; font-size: 13px; color: var(--dim); text-overflow: ellipsis; white-space: nowrap; }
.coin-mc { font: 700 20px/1 var(--font-display); letter-spacing: -0.01em; }
.coin.is-buy .coin-mc { animation: buy 1.1s ease-out; }

@keyframes buy { from { color: var(--green); } }

/* Rolling digits: every digit is a 0–9 strip moved by translateY. */
.odo { position: relative; }
.odo-cols { display: inline-flex; }
.odo-d { display: inline-block; height: 1em; overflow: hidden; }
.odo-d > span { display: block; text-align: center; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }

.coin-bar { height: 2px; background: rgba(255, 255, 255, 0.08); }
.coin-bar i { display: block; width: var(--p, 0%); height: 100%; background: var(--text); transition: width 0.7s ease; }
.coin[data-state="almost"] .coin-bar i { background: var(--gold); }
.coin[data-state="graduated"] .coin-bar i { background: var(--green); }
.coin-foot { display: flex; justify-content: space-between; gap: 8px; font: 400 11px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.coin[data-state="almost"] .coin-pct { color: var(--gold); }
.coin[data-state="graduated"] .coin-pct { color: var(--green); }

.coins-empty { padding: 56px 0; font: 400 14px/1.4 var(--font-mono); color: var(--muted); }
.coins-empty a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.coin-yours {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  padding: 4px 6px;
  border-radius: 3px;
  background: var(--lime);
  color: #0a0d05;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Links from the landing's sections to the app pages. */
.more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.15s ease;
}

.more:hover { color: var(--text); }
.more span { color: var(--lime); transition: transform 0.15s ease; }
.more:hover span { transform: translateX(3px); }
.more-center { display: flex; width: max-content; margin: 28px auto 0; }
.stage-copy .more { margin-top: 0; }

/* ---------- Spot & earn ---------- */

.spot { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: center; gap: 32px 48px; padding: var(--gap-section) var(--gutter) 0; }
.spot-copy { display: grid; justify-items: start; gap: 16px; }
.spot-copy .more { margin-top: 4px; }
.spots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.spot-media { display: block; width: 100%; aspect-ratio: 4 / 5; border: 1px solid var(--line); border-radius: 4px; background: #0b0e14; }
.spot-meta { display: grid; gap: 6px; padding-top: 12px; font: 400 12px/1.3 var(--font-mono); color: var(--dim); }
.spot-meta b { color: var(--text); font-weight: 500; }
.spot-meta .up { color: var(--green); }

/* ---------- Fees ---------- */

.fees { padding: var(--gap-section) var(--gutter) 0; }
.fees-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: 40px 64px; }
.fees-intro { display: grid; gap: 16px; }

.spec { margin-top: 12px; border-top: 1px solid var(--line); }
.spec div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.spec dt { font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.spec dd { font: 500 13px/1.3 var(--font-mono); text-align: right; }

.split { padding-top: 6px; }

.split-input {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.split-input output { font: 700 32px/1 var(--font-display); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }

.split input[type="range"] {
  --fill: 10%;
  width: 100%;
  height: 2px;
  margin: 20px 0 6px;
  background: linear-gradient(90deg, var(--lime) var(--fill), rgba(255, 255, 255, 0.14) var(--fill));
  appearance: none;
  cursor: pointer;
}

.split input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(184, 244, 0, 0.22);
  appearance: none;
}

.split input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(184, 244, 0, 0.22);
}

.split-rows { margin-top: 20px; border-top: 1px solid var(--line); }
.split-rows li { display: grid; grid-template-columns: 170px minmax(0, 1fr) 100px; align-items: center; gap: 20px; height: 44px; border-bottom: 1px solid var(--line); }
.split-name { font: 500 13px/1 var(--font-mono); white-space: nowrap; }
.split-name small { margin-left: 8px; font-size: 12px; color: var(--dim); }
.split-bar { overflow: hidden; font: 400 14px/1 var(--font-mono); font-style: normal; color: var(--dim); white-space: nowrap; }
.split-rows b { font: 600 16px/1 var(--font-display); text-align: right; font-variant-numeric: tabular-nums; }
.split-rows .is-hero .split-bar,
.split-rows .is-hero b { color: var(--lime); }
.split-rows .is-hero b { font-size: 20px; }

.split-note { margin-top: 18px; font: 400 12px/1.5 var(--font-mono); color: var(--dim); }

/* ---------- Final: Times Square again, the screen empty ---------- */

.final { position: relative; height: 440px; margin-top: var(--gap-section); overflow: hidden; }

/* The scene sits right of centre so the copy has the left side, and starts a little low like the hero's. */
/* Capped in width: the photo scales with it, and past ~1360px its screen (half the photo high) grows
   taller than the section and loses its top. */
.final-scene { position: absolute; top: 5%; left: 22%; width: min(100%, 1360px); height: 100%; }

.final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--surface) 0%, rgba(10, 13, 19, 0.75) 26%, transparent 52%),
    linear-gradient(0deg, var(--surface) 0%, transparent 22%),
    linear-gradient(180deg, var(--surface) 0%, transparent 8%);
}

.final-copy {
  position: absolute;
  top: 50%;
  left: var(--gutter);
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 18px;
  transform: translateY(-50%);
}

.final-note { font: 400 13px/1.4 var(--font-mono); color: var(--muted); }

/* ---------- Footer ---------- */

@keyframes band { to { transform: translateX(-50%); } }

.footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px 40px;
  margin-top: var(--gap-section);
  padding: 26px var(--gutter) 28px;
  border-top: 1px solid var(--line);
}

.footer-word { font-size: 24px; letter-spacing: -0.03em; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; font-size: 13px; color: var(--muted); }
.footer-links a:hover { color: var(--text); }
.footer-note { max-width: 68ch; font: 400 12px/1.5 var(--font-mono); color: var(--dim); text-wrap: pretty; }
.footer-note:last-child { justify-self: end; text-align: right; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .fees-grid { gap: 48px; }
  .split-rows li { grid-template-columns: 150px minmax(0, 1fr) 96px; gap: 14px; }
}

@media (max-width: 860px) {
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .wordmark { font-size: 17vw; }

  .how-list { grid-template-columns: 1fr; }
  .how-list li,
  .how-list li + li { padding: 16px 0; border-left: 0; }
  .how-list li + li { border-top: 1px solid var(--line); }

  /* The stage stacks: the scene on top, the copy underneath. */
  .stage { grid-template-columns: 1fr; height: auto; gap: 18px; }
  .stage-scene { order: -1; height: 280px; }
  .stage-copy { gap: 14px; }
  .stage-desc { min-height: 0; }
  .stage-steps { max-width: none; }
  .stage-copy .more { display: none; }

  .spot { grid-template-columns: 1fr; }

  .board-head { flex-direction: column; align-items: flex-start; }
  .board-tools { justify-items: start; }
  .tabs { justify-content: flex-start; }

  .spots { gap: 12px; }
  .fees-grid { grid-template-columns: 1fr; }

  .final-scene { left: 0; }
  .final::after { background: linear-gradient(0deg, var(--surface) 0%, rgba(10, 13, 19, 0.7) 34%, transparent 58%), linear-gradient(180deg, var(--surface) 0%, transparent 8%); }
  .final-copy { top: auto; bottom: 28px; transform: none; }
  .footer { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .footer-note:last-child { justify-self: start; text-align: left; }
}

@media (max-width: 720px) {
  .pill-nav a:nth-child(n + 3) { display: none; }
  .chip-quiet { display: none; }
  .wordmark { font-size: 19.5vw; } /* "SPOTTED" + REC dot ≈ 4.4em: fits the phone width */
  .enter { height: 56px; font-size: 17px; }
}

@media (max-width: 560px) {
  /* The spotters' photos become a swipe carousel. */
  .spots {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad-x);
    margin-inline: calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
    scrollbar-width: none;
  }

  .spot-card { scroll-snap-align: start; }
  .coin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  /* Phones: two rows of coins and no spec list on the landing; the app pages have the rest. */
  .board .coin-grid > :nth-child(n + 5),
  .fees .spec { display: none; }
  .coin-mc { font-size: 20px; }
  .search kbd { display: none; }
  .search { width: 100%; }
  .board-tools { width: 100%; }
  .split-input output { font-size: 28px; }
  .split-rows li { grid-template-columns: minmax(0, 1fr) 84px; height: auto; padding: 12px 0; gap: 8px 12px; }
  .split-bar { grid-column: 1 / -1; grid-row: 2; }
  .split-rows .is-hero b { font-size: 22px; }
  .spec div { flex-direction: column; gap: 6px; }
  .spec dd { text-align: left; }
  .footer-links { gap: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rec,
  .wordmark-dot,
  .ticker-track { animation: none; }
  .poster-slide.is-active,
  .stage-canvas,
  .odo-d > span,
  .coin-bar i,
  .coin-art { transition: none; }
  .coin.is-buy .coin-mc { animation: none; }
}