/* ============================================================
   Sage — the whole palette lives in these tokens:
     paper      the page
     ink        the darkest colour: all type, buttons and small accents
     tone-1..4  the main colour, palest to deepest (the hero's steps)
     accent     the second colour, for tags and small highlights
   ============================================================ */

:root {
  /* "Woods": birch-white page, deep forest-green type, lichen to fern
     greens for the tones, one dry-straw highlight */
  --paper: #FAF8F2;
  --ink: #1E2A21;
  --ink-2: #2B3B2F;
  --ink-soft: #4F5B51;
  --tone-1: #EEF0E4;
  --tone-2: #DCE2C8;
  --tone-3: #C3CEA6;
  --tone-4: #A3B383;
  --accent: #EBDDB0;
  --down: #A3B383;
  --white: #FFFFFF;
  --line: rgba(30, 42, 33, .12);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 3.2vw, 40px);
  --radius: 14px;
  --nav-h: 84px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--nav-h) + 12px); }
/* Lenis (vendor/) eases wheel scrolling and in-page links; without it the browser's own smooth scroll takes over */
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }

.serif {
  font-family: var(--serif);
  font-weight: 300;
  font-optical-sizing: auto;
}

.big { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.1; letter-spacing: -.03em; max-width: 13em; }
.statement { font-size: clamp(27px, 3.4vw, 42px); line-height: 1.32; letter-spacing: -.012em; }

.tag {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--accent);
  font-size: 14px;
  line-height: 1.4;
}
.tag-white { background: var(--white); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .25s, box-shadow .25s;
}
.btn svg { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.btn:hover { background: var(--ink-2); }
.btn:hover svg { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(30, 42, 33, .22); }
.btn-ghost:hover { background: var(--tone-1); }
.btn-tone { background: var(--tone-3); color: var(--ink); }
.btn-tone:hover { background: var(--tone-2); }

/* ---------- reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ============================== NAV ============================== */
.nav { position: sticky; top: 0; z-index: 50; background: var(--paper); }
.nav-row { height: var(--nav-h); display: flex; align-items: center; gap: 28px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 32px; font-weight: 500; letter-spacing: -.045em; margin-right: auto; }
.logo-mark { width: 36px; height: 32px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 12px; font-size: 14px; margin-right: auto; }
.nav-links a { padding: 6px 10px; border-radius: 6px; transition: background .2s; }
.nav-links a:hover { background: var(--tone-1); }

.menu-btn { display: none; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; }
.mobile-menu { display: none; }

/* ============================== HERO ============================== */
/* A full screen: the words on open paper at the top left, and four flat
   steps climbing to the top right, $100 to $2,500. */
.hero {
  position: relative;
  height: max(620px, calc(100svh - var(--nav-h)));
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 2; padding-top: clamp(36px, 8vh, 104px); }
.hero h1 {
  /* the vh cap keeps the words above the first step in short windows */
  font-size: min(clamp(56px, 8.2vw, 124px), 13.5vh);
  line-height: .96;
  letter-spacing: -.04em;
  margin-left: -.04em;
}
.hero-sub { margin-top: clamp(22px, 3.4vh, 34px); font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; max-width: 25em; }
.hero-ctas { display: flex; gap: 10px; margin-top: clamp(24px, 3.8vh, 38px); }

.stairs {
  position: absolute;
  left: 30%;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}
.step {
  padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px);
  transform: translateY(101%);
  transition: transform 1.1s cubic-bezier(.22, .8, .2, 1);
}
.step-in { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
/* step 1 sits under the words, so app.js caps it at the space they leave (--free) */
.step:nth-child(1) { height: min(32%, var(--free, 32%)); background: var(--tone-1); }
.step:nth-child(2) { height: 50%; background: var(--tone-2); transition-delay: .1s; }
.step:nth-child(3) { height: 68%; background: var(--tone-3); transition-delay: .2s; }
.step:nth-child(4) { height: 86%; background: var(--tone-4); transition-delay: .3s; }
.step span { font-size: 12.5px; color: var(--ink-soft); }
.step:nth-child(4) span { color: var(--ink); }
.step b { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.1; letter-spacing: -.025em; }
.step em { margin-top: 10px; font-style: normal; font-size: 12px; background: var(--accent); border-radius: 6px; padding: 3px 8px; }
.step-in > * { opacity: 0; transition: opacity .6s ease; }
.hero.up .step { transform: none; }
.hero.up .step-in > * { opacity: 1; transition-delay: .9s; }
.hero.up .step:nth-child(2) .step-in > * { transition-delay: 1s; }
.hero.up .step:nth-child(3) .step-in > * { transition-delay: 1.1s; }
.hero.up .step:nth-child(4) .step-in > * { transition-delay: 1.2s; }

/* one thin line runs along the ground and up every step */
.stairs-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.stairs-line path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: miter; }

/* ---------- the scroll scene ----------
   The inline script in <head> sets .scene on <html> (unless the reader prefers
   reduced motion), before first paint. The stage pins under the nav; scrolling
   grows the steps to the top and across the whole width, then the four bands
   part like doors onto the tokens behind. Without .scene the hero and the
   tokens simply stack.
   The stage's height is the pin plus 320vh of scroll for the scene. It is set
   here rather than from app.js so it exists before a reload restores its scroll
   position. The pin uses lvh, the height with a phone's browser bars hidden, so
   the bands still reach the bottom edge once those bars slide away. */
.scene .stage { height: calc(100lvh - var(--nav-h) + 320vh); }
.scene .stage-pin {
  position: sticky;
  top: var(--nav-h);
  height: calc(100lvh - var(--nav-h));
  overflow: hidden;
  contain: layout paint;   /* the per-frame step resizing never re-lays out the rest of the page */
}
.scene .hero { position: absolute; inset: 0; height: auto; z-index: 1; pointer-events: none; }
.scene .hero-copy { pointer-events: auto; }
.scene .stairs { position: absolute; inset: 0; height: auto; margin: 0; display: block; z-index: 3; }
.scene .stairs-line { z-index: 4; }
/* the bands catch the pointer, so nothing they cover can be hovered or clicked through them */
.scene .step { position: absolute; bottom: 0; will-change: transform, translate; pointer-events: auto; }
/* a little below centre, so the gap under the pills matches the page's usual section gap */
.scene .behind { position: absolute; inset: 0; z-index: 0; padding: 10vh var(--gutter) 0; opacity: 0; justify-content: safe center; }

/* ============================== TOKENS (behind the doors) ============================== */
.behind { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(80px, 10vw, 130px) var(--gutter); }
.behind-title { font-size: clamp(36px, 4.6vw, 62px); line-height: 1.08; letter-spacing: -.03em; }
.behind-sub { margin: 16px 0 40px; color: var(--ink-soft); font-size: 15px; text-wrap: balance; }
/* five to a row, every pill as wide as the widest (its full name included), so the
   block reads as one even grid */
.tokens { display: grid; grid-template-columns: repeat(5, 1fr); width: max-content; max-width: 100%; gap: 12px; }
/* each pill is a link to the coin's DexScreener page; the list item steps aside so the link is the grid cell */
.tokens > li { display: contents; }

/* A still pill. On hover it fills with ink from the left and its ticker rolls up
   into the token's full name. Ticker and name share one grid cell, so the pill is
   always as wide as the longer of the two and hovering never moves anything. */
.tok {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 22px 0 9px;
  border-radius: 999px;
  background: var(--tone-1);
  box-shadow: inset 0 0 0 1px rgba(30, 42, 33, .07);
  font-size: 16px;
  text-align: left;   /* pills in a column share a width; the text sits by its icon */
  cursor: pointer;
  isolation: isolate;
  outline: none;
  transition: color .35s var(--ease);
}
.tok::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--ink);
  clip-path: inset(0 100% 0 0 round 999px);
  transition: clip-path .5s var(--ease);
}
/* the token's own logo (tokens/*.webp, from CoinGecko, 96px) */
.tok img {
  flex: none;
  width: 34px;
  height: 34px;
  margin-right: 11px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(30, 42, 33, .08);
  transition: rotate .5s var(--ease), box-shadow .35s;
}
.tok-t { display: grid; overflow: hidden; height: 24px; line-height: 24px; }
.tok-t > * { grid-area: 1 / 1; white-space: nowrap; transition: transform .45s var(--ease), opacity .3s; }
.tok-t b { font-weight: 500; letter-spacing: .01em; }
.tok-t span { color: var(--tone-3); transform: translateY(100%); opacity: 0; }
/* The lit state: the pill fills with ink, its logo tilts inside a straw ring and the
   ticker rolls up into the name. Nothing changes size or position. Hover only counts on
   devices that really hover, so a tap on a phone never leaves a pill stuck dark; keyboard
   focus gets the same look. */
.tok:focus-visible { color: var(--paper); }
.tok:focus-visible::before { clip-path: inset(0 0 0 0 round 999px); }
.tok:focus-visible img { rotate: -14deg; box-shadow: 0 0 0 2px var(--accent); }
.tok:focus-visible .tok-t b { transform: translateY(-100%); opacity: 0; }
.tok:focus-visible .tok-t span { transform: none; opacity: 1; }
@media (hover: hover) {
  .tok:hover { color: var(--paper); }
  .tok:hover::before { clip-path: inset(0 0 0 0 round 999px); }
  .tok:hover img { rotate: -14deg; box-shadow: 0 0 0 2px var(--accent); }
  .tok:hover .tok-t b { transform: translateY(-100%); opacity: 0; }
  .tok:hover .tok-t span { transform: none; opacity: 1; }
}

/* ============================== NUMBERS ============================== */
.numbers { padding: clamp(80px, 10vw, 130px) 0 clamp(40px, 5vw, 70px); }
.numbers .statement { max-width: 21em; }
.scene .stage + .numbers { padding-top: 0; }
.swap {
  display: inline-block;
  vertical-align: bottom;
  height: 1.32em;
  overflow: hidden;
  padding: 0 .22em;
  margin: 0 .04em;
  border-radius: .22em;
  background: var(--accent);
  transition: width .6s var(--ease);
}
.swap-track { display: flex; flex-direction: column; align-items: flex-start; transition: transform .6s var(--ease); }
.swap-track span { height: 1.32em; white-space: nowrap; }
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); }
.nums div { padding: 4px 24px 4px; border-left: 1px solid var(--line); }
.nums div:first-child { border-left: 0; padding-left: 0; }
.nums b { display: block; font-size: clamp(42px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -.03em; }
.nums span { font-size: 13.5px; color: var(--ink-soft); }
.nums div:nth-child(2) { transition-delay: .06s; }
.nums div:nth-child(3) { transition-delay: .12s; }
.nums div:nth-child(4) { transition-delay: .18s; }

/* ============================== BEFORE / AFTER LINES ============================== */
.ps { position: relative; height: 270vh; }
.ps-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--ps-bg, var(--paper));
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--nav-h) + 6vh);
}
.ps-text { display: grid; }
/* one statement leaves before the other arrives, so they never overlap */
.ps-layer { grid-area: 1 / 1; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.ps-layer .tag { margin-bottom: 22px; }
.ps-layer .statement { max-width: 20em; }
.ps-problem { transition-delay: .32s; }
.ps-solution { opacity: 0; transform: translateY(16px); transition-delay: 0s; }
.ps.solved .ps-problem { opacity: 0; transform: translateY(-16px); transition-delay: 0s; }
.ps.solved .ps-solution { opacity: 1; transform: none; transition-delay: .32s; }
.ps-lines { width: 100%; height: 260px; margin-top: clamp(36px, 9vh, 96px); overflow: visible; }
.ps-lines path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }

/* ============================== HOW IT WORKS ============================== */
.how { padding: clamp(100px, 12vw, 150px) 0 clamp(60px, 8vw, 100px); }
.sec-head .big { margin-top: 20px; }
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: clamp(48px, 6vw, 72px); padding-top: 34px; }
.timeline::before, .timeline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 1.5px;
  background: var(--line);
}
.timeline::after { background: var(--ink); transform: scaleX(var(--tl, 0)); transform-origin: left; transition: transform 2.2s cubic-bezier(.45, .05, .25, 1); }
.timeline.in::after { --tl: 1; }
.tl-dot {
  position: absolute;
  top: -34px;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  z-index: 1;
  transition: background .3s;
}
.timeline li { position: relative; }
.timeline.in li .tl-dot { background: var(--tone-3); }
.timeline.in li:nth-child(1) .tl-dot { transition-delay: 0s; }
.timeline.in li:nth-child(2) .tl-dot { transition-delay: .55s; }
.timeline.in li:nth-child(3) .tl-dot { transition-delay: 1.1s; }
.timeline.in li:nth-child(4) .tl-dot { transition-delay: 1.65s; }
.timeline b { display: block; font-size: 15px; color: var(--ink-soft); margin-bottom: 30px; letter-spacing: .02em; }
.timeline h3 { font-size: 24px; font-weight: 400; letter-spacing: -.02em; margin-bottom: 12px; }
.timeline p { font-size: 14px; color: var(--ink-soft); max-width: 22em; }

/* ============================== TOUR ============================== */
.tour { padding: clamp(60px, 8vw, 100px) 0 clamp(90px, 10vw, 130px); }
.tour-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 36px; }
.tour-head .big { margin-top: 20px; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--tone-1); }
.tabs button { height: 40px; padding: 0 18px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--ink-soft); transition: background .25s, color .25s; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tour-card {
  border-radius: var(--radius);
  padding: clamp(28px, 4.4vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  min-height: 540px;
  animation: panel-in .5s var(--ease);
}
.tour-card[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
.t1 { background: var(--tone-3); }
.t2 { background: var(--tone-2); }
.t3 { background: var(--tone-1); }
.tour-copy h3 { font-size: clamp(25px, 2.5vw, 32px); font-weight: 400; letter-spacing: -.025em; margin-bottom: 14px; }
.tour-copy p { font-size: 14.5px; max-width: 27em; }
.ticks { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.ticks li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ticks li::before { content: ""; width: 18px; height: 1.5px; background: var(--ink); flex: none; }

.mock { background: var(--white); border-radius: 10px; padding: 22px 22px 18px; font-size: 11px; box-shadow: 0 1px 2px rgba(30, 42, 33, .06), 0 18px 40px -26px rgba(30, 42, 33, .35); }
.mock-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mock-head b { display: block; font-size: 25px; line-height: 1.05; letter-spacing: -.02em; }
.mock-head small { color: var(--ink-soft); font-size: 10.5px; }
.mock-right { margin-left: auto; align-self: flex-start; }
.mock-mark { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--tone-1); display: grid; place-items: center; }
.mock-mark svg { width: 20px; height: 18px; }
.mock-logo { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(30, 42, 33, .08); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.chips span { background: var(--tone-1); border-radius: 4px; padding: 4px 8px; font-size: 10.5px; }
.bar-row { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-soft); margin-bottom: 6px; }
.bar { height: 6px; border-radius: 6px; background: var(--tone-1); margin-bottom: 14px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); border-radius: 6px; }
.mtable { width: 100%; border-collapse: collapse; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.mtable th { text-align: left; font-weight: 400; color: var(--ink-soft); padding: 7px 4px; border-bottom: 1px solid var(--line); }
.mtable td { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.mtable .pos { font-weight: 600; }
.st { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.st.ok::before { background: var(--ink); }
.st.run::before { background: var(--tone-3); box-shadow: inset 0 0 0 1.5px var(--ink); }
.mock-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.mbtn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 5px; background: var(--ink); color: var(--paper); font-size: 10.5px; font-weight: 500; }
.mbtn.ghost { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.candles { width: 100%; height: 130px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 10px; }
.eq { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px 0; margin-bottom: 10px; }
.eq-top { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-soft); }
.eq-top span:last-child { color: var(--ink); font-weight: 500; }
.eq-chart { width: 100%; height: 100px; }

/* ============================== RULES ============================== */
.rules { padding: clamp(90px, 10vw, 130px) 0; border-top: 1px solid var(--line); }
.rules-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); }
.rules-side { display: flex; flex-direction: column; align-items: flex-start; }
.rules-side .big { margin: 20px 0 18px; max-width: 8em; }
.rules-side p { font-size: 14.5px; max-width: 25em; color: var(--ink-soft); }
.steps { width: 100%; max-width: 420px; height: auto; margin-top: auto; padding-top: 48px; }
[data-draw] path { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.spec { margin: 0; border-top: 1px solid var(--ink); }
.spec div { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: baseline; padding: 19px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-size: 13px; color: var(--ink-soft); }
.spec dd { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; letter-spacing: -.01em; }

/* ============================== FAQ ============================== */
.faq { padding: clamp(60px, 8vw, 110px) 0 clamp(90px, 10vw, 130px); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); }
.faq .big { margin-top: 20px; max-width: 7em; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--ink); }
.faq-list summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: -.01em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { width: 22px; height: 22px; flex: none; transition: transform .3s var(--ease); }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list details p { font-size: 14.5px; color: var(--ink-soft); max-width: 38em; padding: 0 40px 24px 0; }

/* ============================== FOOTER ============================== */
.foot { padding-bottom: 20px; }
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 72px);
  min-height: 380px;
  display: flex;
  align-items: center;
}
.cta-waves { position: absolute; right: 0; top: 0; height: 100%; width: 62%; }
.cta-waves path { fill: none; stroke: var(--tone-3); stroke-opacity: .55; stroke-width: 1.2; }
.cta-copy { position: relative; max-width: 560px; }
.cta-copy h2 { font-size: clamp(38px, 4.8vw, 62px); line-height: 1.06; letter-spacing: -.03em; }
.cta-copy p { color: var(--tone-2); font-size: 16px; margin: 18px 0 30px; max-width: 26em; }
.foot-row { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding: 48px 0 36px; }
.foot-brand p { margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); max-width: 22em; }
.foot-brand .logo { font-size: 26px; }
.foot-brand .logo-mark { width: 30px; height: 27px; }
.fcols { display: grid; grid-template-columns: repeat(2, 160px); gap: 24px; font-size: 13.5px; }
.fcols div { display: flex; flex-direction: column; gap: 10px; }
.fcols span { color: var(--ink-soft); font-size: 12.5px; margin-bottom: 2px; }
.fcols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 1080px) {
  .nav-links { gap: 4px; }
}

/* Five equal columns need about 1020px; below that, two even columns make a tidy
   5 x 2 block with straight edges. */
@media (max-width: 1100px) {
  .tokens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(100%, 420px); }
}

@media (max-width: 900px) {
  :root { --nav-h: 68px; }
  .logo { font-size: 26px; }
  .logo-mark { width: 30px; height: 27px; }
  .nav-links, .nav-cta { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  /* floats over the page, so closing it never shifts what you scrolled to */
  .mobile-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); box-shadow: 0 18px 30px -22px rgba(30, 42, 33, .4); display: flex; flex-direction: column; gap: 4px; padding: 0 var(--gutter); max-height: 0; overflow: hidden; transition: max-height .35s var(--ease), padding .35s; }
  .mobile-menu a { padding: 10px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
  .mobile-menu .btn { margin-top: 12px; justify-content: center; border: 0; font-size: 15px; }
  .nav.menu-open .mobile-menu { max-height: 420px; padding-bottom: 20px; }

  /* the steps move under the words and span the full width */
  .hero { height: auto; }
  .hero-copy { padding-top: 36px; }
  .stairs { position: relative; left: auto; height: 340px; margin-top: 56px; }
  .step:nth-child(1) { height: 28%; }
  .step:nth-child(2) { height: 48%; }
  .step:nth-child(3) { height: 70%; }
  .step:nth-child(4) { height: 94%; }
  .tok { height: 46px; font-size: 15px; padding-right: 16px; }
  .tok img { width: 30px; height: 30px; margin-right: 9px; }

  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .nums div:nth-child(3) { border-left: 0; padding-left: 0; }

  .ps { height: 220vh; }
  .ps-sticky { justify-content: center; padding-top: var(--nav-h); }
  .ps-lines { height: 180px; }

  /* the timeline turns vertical */
  .timeline { grid-template-columns: 1fr; gap: 36px; padding: 0 0 0 40px; }
  .timeline::before, .timeline::after { left: 7px; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; }
  .timeline::after { transform: scaleY(var(--tl, 0)); transform-origin: top; }
  .tl-dot { top: 2px; left: -40px; }
  .timeline b { margin-bottom: 8px; }

  .tour-head { align-items: flex-start; }
  .tour-card { grid-template-columns: 1fr; min-height: 0; }

  .rules-grid, .faq-grid { grid-template-columns: 1fr; }
  .steps { display: none; }
  .spec div { grid-template-columns: 1fr; gap: 4px; }

  .cta-waves { width: 100%; opacity: .45; }
}

/* Narrow phones: two columns leave little room for the longest full name ("Pudgy
   Penguins", about 7.37em), so the pill text scales with the screen to keep it whole. */
@media (max-width: 389px) {
  .tokens { gap: 6px; }
  .tok { padding: 0 12px 0 7px; font-size: clamp(11px, calc(6.8vw - 10.4px), 15px); }
  .tok img { width: 28px; height: 28px; margin-right: 8px; }
}

@media (max-width: 520px) {
  .hero-ctas { width: 100%; }
  .hero-ctas .btn { flex: 1; justify-content: center; padding: 0 12px; }
  .stairs { height: 300px; }
  .step { padding: 10px 8px; }
  .step span { font-size: 10.5px; }
  .step b { font-size: 23px; }
  .step em { display: none; }
  .tabs { width: 100%; }
  .tabs button { flex: 1; padding: 0 8px; }
  .mock { padding: 16px 14px; }
  .mock-right { display: none; }
  .mtable th:nth-child(2), .mtable td:nth-child(2) { display: none; }
  .fcols { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .foot-bar { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html, html:not(.lenis) { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .timeline::after { transition: none; }
  .tour-card { animation: none; }
  .step, .step-in > * { transition: none !important; }
}