/* ═══════════════════════════════════════════════════════════
   PIPER
   Design language: institutional fintech chrome, warm animal
   photography. One theme (dark), one accent (green), one
   radius system (16px surfaces, pill interactive).
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  /* Warm-tinted neutral ramp. Warm greys let the straw-lit
     photography sit in the page instead of on top of it. */
  --bg:          #0B0B0C;
  --surface:     #141315;
  --surface-2:   #1B1A1D;
  --line:        rgb(255 255 255 / .09);
  --line-strong: rgb(255 255 255 / .16);
  --text:        #F4F2EF;
  --muted:       #98938D;   /* 6.46:1 on --bg, 6.08:1 on --surface */
  --muted-dim:   #8E8983;   /* 4.74:1 on --surface-2, the tightest pairing on the page */

  /* Single UI accent, sampled straight off the locked brand mark
     so the site and the X header speak the same language. This is
     the lime from the Robinhood feather in the archer's cap, not
     Robinhood's own #00C805. Nowhere else, no second accent. */
  --accent:       #C2FB5E;
  --accent-hover: #D4FF85;
  --accent-ink:   #0B1405;

  /* Supporting brand tone, from the felt of the cap. Used for the
     one tinted surface, never for text or a control. */
  --forest:      #1F4A2A;

  /* Photographic tone only. Never a button, label, or border.
     It exists to blend scrims into the source imagery. */
  --straw:       #E0BC7C;

  --r-surface: 16px;
  --r-inner:   10px;
  --r-micro:   6px;    /* elements under 24px, where 10px reads as a circle */
  --r-pill:    999px;

  --wrap:  1280px;
  --pad:   clamp(1.25rem, 4vw, 3rem);
  --sect:  clamp(5rem, 11vw, 9.5rem);

  --font:  "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --ease:  cubic-bezier(.16, 1, .3, 1);
  --z-grain: 60;
  --z-nav:   40;
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

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

/* Numerals line up in columns everywhere. Non-negotiable for
   anything wearing financial chrome. */
.mono, code, .blotter__date, .spec dd, .quote-tile__value,
.wild__figure, .ticker__item {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ── INTRO ────────────────────────────────────────────────── */
/* Hidden unless JS proved it is alive. The exit runs on a fixed
   CSS timeline rather than a load event, so a stalled asset can
   never trap the visitor behind a curtain. */
.intro { display: none; }
.js.seen .intro { display: none; }

.js .intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--bg);
  clip-path: inset(0 0 0 0);
  animation: intro-lift .95s var(--ease) 1.75s forwards;
}

.intro__stack {
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 2rem;
  text-align: center;
}

.intro__mark {
  width: clamp(180px, 32vw, 300px);
  height: auto;
  animation: mark-settle 1s var(--ease) both;
}

.intro__word {
  font-size: clamp(2.75rem, 10vw, 5rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  /* Wipes up from its own baseline instead of fading, so it reads
     as the name being printed rather than appearing. */
  clip-path: inset(0 0 100% 0);
  animation: word-print .7s var(--ease) .35s forwards;
}

.intro__feather { width: .58em; height: auto; }

.intro__meter {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  animation: fade-in .4s var(--ease) .55s forwards;
}
.intro__meter small { font-size: .62em; color: var(--muted); margin-left: .2em; }

/* The progress rule is the loading bar. It finishes exactly when
   the counter reaches her real weight. */
.intro__rule {
  width: clamp(140px, 26vw, 240px);
  height: 2px;
  margin-top: .6rem;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transform-origin: left center;
}
.intro__rule::after {
  content: "";
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  animation: rule-fill 1.15s var(--ease) .55s forwards;
}

@keyframes intro-lift  { to { clip-path: inset(0 0 100% 0); visibility: hidden; pointer-events: none; } }
@keyframes mark-settle { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes word-print  { to { clip-path: inset(0 0 0 0); } }
@keyframes rule-fill   { to { transform: scaleX(1); } }
@keyframes fade-in     { to { opacity: 1; } }

/* ── ATMOSPHERE ───────────────────────────────────────────── */
/* Fixed and pointer-events-none so it never triggers repaints
   on scrolling containers. */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ── TICKER ───────────────────────────────────────────────── */
.ticker {
  position: relative;
  z-index: calc(var(--z-nav) + 1);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  height: 40px;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker__track { display: flex; width: max-content; }

.ticker__group {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding-right: 1.75rem;
  white-space: nowrap;
}

.ticker__item {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticker__item.accent { color: var(--accent); }

.ticker__sep {
  width: 1px;
  height: 11px;
  background: var(--line-strong);
  flex: none;
}

/* ── NAV ──────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgb(11 11 12 / .78);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  height: 68px;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.brand { display: flex; align-items: center; gap: .6rem; flex: none; }

/* The feather from the archer's cap. It is the Robinhood mark and
   the Robin Hood mark at the same time, which is the entire brand
   idea, so it never gets redrawn as a generic shape. */
.brand__mark { width: 26px; height: auto; flex: none; }
.brand__mark--lg { width: 38px; }

.brand__word {
  font-weight: 800;
  letter-spacing: -.035em;
  font-size: 1.35rem;
  line-height: 1;
}

.nav__links {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
  font-size: .875rem;
  color: var(--muted);
}
.nav__links a { transition: color .2s var(--ease); }
.nav__links a:hover { color: var(--text); }

.nav__tg {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: 1.2rem;
  color: var(--muted);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav__tg:hover { color: var(--accent); border-color: var(--line-strong); }

.nav__toggle { display: none; font-size: 1.4rem; margin-left: auto; }

.nav__drawer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem var(--pad) 2rem;
  border-top: 1px solid var(--line);
}
.nav__drawer[hidden] { display: none; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  white-space: nowrap;
  border-radius: var(--r-pill);
  padding: .8rem 1.5rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: transform .18s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.btn--sm { padding: .55rem 1.1rem; font-size: .875rem; }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover { border-color: rgb(255 255 255 / .38); background: rgb(255 255 255 / .04); }

/* ── SECTION HEADINGS ─────────────────────────────────────── */
.sect__title {
  font-size: clamp(1.85rem, 4.2vw, 3.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.032em;
  max-width: 18ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-wrap: balance;
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: var(--sect);
}

.hero__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__title {
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.05em;
}

.hero__sub {
  margin-top: 1.5rem;
  max-width: 34ch;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  color: var(--muted);
  line-height: 1.55;
}

.hero__cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__asset {
  position: relative;
  border-radius: var(--r-surface);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  aspect-ratio: 9 / 10;
}
.hero__asset > video,
.hero__asset > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Scrim pulls the straw tone out of the photograph so the
   readout tile has something to sit against. */
.hero__asset::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgb(11 11 12 / .88) 0%, rgb(11 11 12 / 0) 46%),
    radial-gradient(120% 70% at 50% 100%, rgb(224 188 124 / .12), transparent 62%);
}

.asset__mute {
  position: absolute;
  top: .875rem;
  right: .875rem;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgb(11 11 12 / .6);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  font-size: 1.05rem;
  transition: background-color .2s var(--ease);
}
.asset__mute:hover { background: rgb(11 11 12 / .85); }

.quote-tile {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: grid;
  gap: .2rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-inner);
  background: rgb(20 19 21 / .72);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.quote-tile__label {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.quote-tile__value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.quote-tile__value small { font-size: .42em; font-weight: 500; color: var(--muted); margin-left: .25em; }

/* ── MARKET (live readout rail) ───────────────────────────── */
/* A rail, not a card. Cards are already doing work in the bento
   and the terms grid, and a broker readout is a rule of numbers
   anyway, not a container. */
.market { padding-bottom: clamp(3rem, 6vw, 5rem); }

.market__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.25rem clamp(1.75rem, 4.5vw, 3.5rem);
  padding-block: 1.35rem;
  border-block: 1px solid var(--line);
}

.stat { display: grid; gap: .15rem; }

.stat__label {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.stat__value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -.02em;
  min-height: 1.4em;
  display: block;
}
.stat__value.is-missing { font-size: .9375rem; font-weight: 500; color: var(--muted-dim); }

/* Skeleton matches the shape of the value it replaces, so the
   strip does not reflow when real numbers land. */
.skel {
  display: block;
  width: 5.5ch;
  height: 1em;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
}

/* DexScreener's own embed. Given its own height rather than an
   aspect ratio, because a 16:9 box on a phone leaves a chart too
   short to read the candles in. */
.chart {
  margin-top: 1.5rem;
  height: clamp(380px, 58vh, 560px);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  overflow: hidden;
  background: var(--surface);
}
.chart iframe { display: block; width: 100%; height: 100%; border: 0; }

.market__src {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  font-size: .8125rem;
  color: var(--muted);
  transition: color .2s var(--ease);
}
.market__src:hover { color: var(--accent); }

/* ── LOG (trade blotter) ──────────────────────────────────── */
.log { padding-block: var(--sect); border-top: 1px solid var(--line); }

/* An artifact, not a layout. Offset right against the left
   aligned headline so the section reads as a document sitting on
   a desk rather than another full width band. */
.receipt {
  position: relative;
  max-width: 42rem;
  margin-left: auto;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--surface);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.receipt__head {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--muted-dim);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.receipt__rows { display: grid; gap: 0; }

.receipt__rows > div {
  display: grid;
  grid-template-columns: 6.5rem 8rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-block: .85rem;
  border-bottom: 1px solid var(--line);
}
.receipt__rows > div:last-child { border-bottom: 0; }

.receipt__rows dt {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.receipt__key { font-size: .875rem; font-weight: 700; color: var(--text); }
.receipt__val { font-size: .8125rem; line-height: 1.55; color: var(--muted); }

/* The perforation. Notches are punched in the page background so
   the edge reads as a real tear, not a dashed border. */
.receipt__tear {
  position: relative;
  height: 1px;
  margin: 1.75rem calc(clamp(1.75rem, 3.5vw, 2.75rem) * -1);
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 11px);
}
.receipt__tear::before,
.receipt__tear::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--line);
}
.receipt__tear::before { left: -8px; }
.receipt__tear::after  { right: -8px; }

.receipt__quote {
  font-family: var(--font);
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.018em;
  text-wrap: pretty;
}
.receipt__quote::before { content: "\201C"; color: var(--accent); }
.receipt__quote::after  { content: "\201D"; color: var(--accent); }

.receipt__attrib {
  margin-top: .9rem;
  font-size: .8125rem;
  color: var(--text);
}

.receipt__src {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--muted-dim);
}

/* ── THE FILE (bento) ─────────────────────────────────────── */
.file { padding-block: var(--sect); border-top: 1px solid var(--line); }

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.cell {
  border-radius: var(--r-surface);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.cell:hover { border-color: var(--line-strong); }

.cell--name    { grid-column: span 7; }
.cell--photo   { grid-column: span 5; padding: 0; overflow: hidden; }
.cell--parents { grid-column: span 4; }
.cell--sister  { grid-column: span 4; }
.cell--spec    { grid-column: span 4; }

.cell--photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cell--photo:hover { transform: none; }

/* Tinted cell so the grid is not five identical dark boxes. */
.cell--sister {
  background:
    linear-gradient(155deg, rgb(194 251 94 / .09), transparent 58%),
    var(--surface);
}

/* Pattern cell. Hairline rule, not decoration for its own sake:
   it reads as ledger paper behind a spec list. */
.cell--spec {
  background-image:
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 44px);
  background-position: 0 3.5rem;
}

.cell__h { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.cell p { color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.cell__note { font-size: .875rem !important; }

.pull {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.pull::before { content: "\201C"; color: var(--accent); }
.pull::after  { content: "\201D"; color: var(--accent); }

.attrib { font-size: .875rem !important; color: var(--text) !important; font-weight: 600; line-height: 1.45; }
.attrib span { color: var(--muted); font-weight: 400; }

.cell__badge {
  align-self: flex-start;
  margin-top: auto;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  border: 1px solid rgb(194 251 94 / .28);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
}

.spec { display: grid; gap: 0; }
.spec > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; height: 44px; }
.spec dt { font-size: .875rem; color: var(--muted); }
.spec dd { font-size: .875rem; text-align: right; }

/* ── THE WILD ─────────────────────────────────────────────── */
.wild {
  position: relative;
  isolation: isolate;
  padding-block: clamp(6rem, 14vw, 11rem);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.wild__bg { position: absolute; inset: 0; z-index: -1; }
.wild__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.wild__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--bg) 4%, rgb(11 11 12 / .82) 52%, rgb(11 11 12 / .55)),
    linear-gradient(to top, var(--bg), transparent 58%);
}

.wild__inner {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  gap: .5rem;
  justify-items: start;
}

.wild__kicker { max-width: 40ch; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.125rem); }

/* One h2 carrying both the figure and the sentence, so the
   heading reads as "2,500 left in the wild..." in a screen
   reader's heading list instead of as an orphan number. */
.wild__head { display: grid; justify-items: start; font-weight: 400; }

.wild__figure {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(4.5rem, 15vw, 11rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--accent);
  margin-block: .5rem;
}

.wild__label {
  display: block;
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.015em;
  margin-bottom: 1.75rem;
}

/* ── VERIFY ───────────────────────────────────────────────── */
/* Hairline rows, not cards. The bento and the terms grid already
   own the card register, and a list of outbound checks should
   read as a reference table anyway. */
.verify { padding-block: var(--sect); border-top: 1px solid var(--line); }

.verify__grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.verify__list { border-top: 1px solid var(--line); }

.vrow {
  display: grid;
  gap: .3rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line);
  transition: background-color .25s var(--ease);
}
.vrow:hover { background: rgb(255 255 255 / .022); }

.vrow__name {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.015em;
}
.vrow__name i { font-size: .95rem; color: var(--muted-dim); transition: color .2s var(--ease); }
.vrow:hover .vrow__name i { color: var(--accent); }

.vrow__yes { font-size: .9375rem; line-height: 1.6; color: var(--muted); }

/* The honest half. Marked with a rule rather than a colour so it
   does not read as an error state. */
.vrow__no {
  margin-top: .35rem;
  padding-left: .9rem;
  border-left: 1px solid var(--line-strong);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--muted-dim);
}

.verify__note {
  display: grid;
  gap: .9rem;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border-radius: var(--r-surface);
  background:
    linear-gradient(160deg, rgb(194 251 94 / .07), transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
}
.verify__note h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.verify__note p { font-size: .875rem; line-height: 1.65; color: var(--muted); }

/* ── TERMS ────────────────────────────────────────────────── */
.terms { padding-block: var(--sect); border-top: 1px solid var(--line); }

.terms__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.term {
  border-radius: var(--r-surface);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  display: grid;
  gap: .9rem;
  align-content: start;
}
.term h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.term p { color: var(--muted); font-size: .9375rem; line-height: 1.62; }
.term__hint { font-size: .8125rem !important; color: var(--muted-dim) !important; }

.term__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  justify-self: start;
  font-size: .875rem;
  font-weight: 600;
  color: var(--muted);
  transition: color .2s var(--ease);
}
.term__link:hover { color: var(--accent); }

.ca {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .9rem 1rem;
  border-radius: var(--r-inner);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.ca__label {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-dim);
  width: 100%;
}
.ca__value {
  font-family: var(--mono);
  font-size: .875rem;
  word-break: break-all;
  flex: 1 1 12rem;
}
.ca[data-state="pending"] .ca__value { color: var(--muted-dim); }
.ca[data-state="live"] .ca__value { color: var(--text); }

.ca__copy {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: .8125rem;
  font-weight: 600;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.ca__copy:disabled { opacity: .4; cursor: not-allowed; }
.ca__copy:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.ca__copy.is-done { color: var(--accent); border-color: var(--accent); }

/* ── BUY (flow) ───────────────────────────────────────────── */
.buy { padding-block: var(--sect); border-top: 1px solid var(--line); }

.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}

.flow__step {
  padding: 2rem 1.75rem 2rem 0;
  display: grid;
  gap: .65rem;
  align-content: start;
  border-right: 1px solid var(--line);
  padding-left: 1.75rem;
}
.flow__step:first-child { padding-left: 0; }
.flow__step:last-child { border-right: 0; }

.flow__icon { font-size: 1.5rem; color: var(--accent); }
.flow__step h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.flow__step p { color: var(--muted); font-size: .9375rem; line-height: 1.6; }

/* ── FOOTER ───────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem); }

.foot__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem 2rem;
  align-items: start;
}

.foot__brand { display: grid; gap: .9rem; justify-items: start; }
.foot__tag { color: var(--muted); font-size: .9375rem; max-width: 30ch; }

.foot__social { display: flex; flex-wrap: wrap; gap: .5rem; }

.foot__social-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 40px;
  padding-inline: 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--muted);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot__social-link i { font-size: 1.15rem; }
.foot__social-link:hover { color: var(--text); border-color: var(--line-strong); }

.foot__legal {
  grid-column: 1 / -1;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .6rem;
  max-width: 90ch;
}
.foot__legal p { font-size: .8125rem; color: var(--muted-dim); line-height: 1.6; }

/* ── MOTION ───────────────────────────────────────────────── */
/* Every animation below answers one question: what does the
   reader look at next. Nothing loops for decoration. */
@media (prefers-reduced-motion: no-preference) {

  /* HERO. Purpose: storytelling. Runs on a CSS animation, not on
     an observer, because this content is already in the viewport
     at load. Gating it on JS would push LCP by a full frame plus
     the transition duration for no benefit. */
  .enter { animation: enter-rise .8s var(--ease) var(--d, 0ms) both; }

  /* The hero asset holds the LCP element. It moves, but its
     keyframes never touch opacity, so first paint is never
     blocked by the animation. */
  .enter--asset { animation-name: enter-lift; }

  /* EVERYTHING BELOW THE FOLD. Purpose: sequence. Gated on the
     .js class so a failed or blocked script leaves the page fully
     readable instead of blank. */
  .js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease) var(--d, 0ms),
                transform .7s var(--ease) var(--d, 0ms);
  }
  .js .reveal.in { opacity: 1; transform: none; }

  /* Purpose: feedback. Direct response to a pointer. */
  .btn:active { transform: translateY(1px) scale(.985); }
  .cell { transition: border-color .25s var(--ease), transform .25s var(--ease); }
  .cell:hover { transform: translateY(-2px); }

  /* Purpose: state. The one marquee on the page, carrying real
     facts. Pauses on hover so it can actually be read. */
  .ticker__track { animation: ticker-run 46s linear infinite; }
  .ticker:hover .ticker__track { animation-play-state: paused; }

  /* Purpose: state. Says "still fetching" rather than "empty". */
  .skel { animation: skel-shift 1.4s ease-in-out infinite; }
}

@keyframes skel-shift {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@keyframes ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes enter-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes enter-lift {
  from { transform: translateY(16px); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .intro { display: none; }
  .reveal, .enter { opacity: 1; transform: none; animation: none; }
  .ticker__track { animation: none; }
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cell--name    { grid-column: span 12; }
  .cell--photo   { grid-column: span 6; min-height: 240px; }
  .cell--parents { grid-column: span 6; }
  .cell--sister  { grid-column: span 6; }
  .cell--spec    { grid-column: span 6; }

  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow__step:nth-child(2) { border-right: 0; }
  .flow__step:nth-child(3) { padding-left: 0; border-top: 1px solid var(--line); }
  .flow__step:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__inner > .btn,
  .nav__tg { display: none; }
  .nav__toggle { display: block; }

  .hero { padding-top: 2.5rem; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__asset { aspect-ratio: 4 / 5; max-height: 62vh; }
  .hero__title { font-size: clamp(2.9rem, 14vw, 4.5rem); }

  .receipt { margin-left: 0; }
  .receipt__rows > div { grid-template-columns: 1fr; gap: .25rem; padding-block: 1rem; }
  .receipt__key { font-size: 1rem; }

  .terms__grid { grid-template-columns: 1fr; }
  .verify__grid { grid-template-columns: 1fr; }

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

@media (max-width: 620px) {
  .cell--name, .cell--photo, .cell--parents,
  .cell--sister, .cell--spec { grid-column: span 12; }
  .cell--photo { min-height: 280px; }

  .flow { grid-template-columns: 1fr; }
  .flow__step {
    padding: 1.5rem 0;
    border-right: 0;
    border-top: 1px solid var(--line);
  }
  .flow__step:first-child { border-top: 0; padding-top: 1.5rem; }
  .flow__step:nth-child(3) { padding-left: 0; }
}