/*
  Shuffle Code Claimer: the public pages (/, /guide, /terms, /privacy, /refunds).

  Built on theme.css and nothing else: every colour below is a theme token or a
  color-mix() of one, and every accent keeps its single meaning (lime = action
  or you, amber = money, red = live, azure = information).

  The pages are laid out the way the product is. The userscript's panel is a
  rail of grouped tabs beside one content area, and so are the tour
  (/how-it-works), the guide and the legal pages: a sticky rail on wide
  screens, the same rail as the menu sheet on phones. The home page is the
  front door instead: one column, its links in the top bar.
*/

:root {
  --topbar: 4rem;
  --gutter: 1rem;
  --rail-w: 14.75rem;
  --measure: 68ch;
}
@media (min-width: 48rem) { :root { --gutter: 1.5rem; } }
@media (min-width: 64rem) { :root { --gutter: 2rem; } }

html { scroll-padding-top: calc(var(--topbar) + 1.25rem); }
body { overflow-x: clip; }

/* A saved non-English choice is applied before first paint by i18n.js; until
   then the page holds back, so a Japanese visitor never sees English flash. */
html.i18n-wait body { visibility: hidden; }

/* A long word in a translated heading (Russian, German-style compounds) breaks
   inside its column instead of running off a phone screen. */
h1, h2, h3, .h1-name, .h1-line, .h2, .h3 { overflow-wrap: break-word; hyphens: auto; }

/* Scripts that do not fit Unbounded's or Manrope's character sets fall back
   to the system's own face. Those need room above and below the line, and
   tracking set for Latin only cramps them. */
:lang(ja) .display, :lang(zh) .display, :lang(ko) .display,
:lang(ja) .h1-name, :lang(zh) .h1-name, :lang(ko) .h1-name,
:lang(ja) .h1-line, :lang(zh) .h1-line, :lang(ko) .h1-line { letter-spacing: 0; line-height: 1.22; }
:lang(ja) .display, :lang(ja) .h1-line { word-break: auto-phrase; }
:lang(ko) body { word-break: keep-all; }
/* Tracked capitals are a Latin device: in CJK and Devanagari the extra spacing
   only pulls characters apart, and there are no capitals to set. */
:lang(ja) :is(.rail-label, .board-cols, .readout thead th, .readout td::before, .cmp thead th, .cmp-k, .foot-col h2, .doc-table thead th, .chip, .readline-k),
:lang(zh) :is(.rail-label, .board-cols, .readout thead th, .readout td::before, .cmp thead th, .cmp-k, .foot-col h2, .doc-table thead th, .chip, .readline-k),
:lang(ko) :is(.rail-label, .board-cols, .readout thead th, .readout td::before, .cmp thead th, .cmp-k, .foot-col h2, .doc-table thead th, .chip, .readline-k),
:lang(hi) :is(.rail-label, .board-cols, .readout thead th, .readout td::before, .cmp thead th, .cmp-k, .foot-col h2, .doc-table thead th, .chip, .readline-k) { letter-spacing: 0; }
:lang(hi) .display, :lang(hi) .h1-name, :lang(hi) .h1-line { letter-spacing: 0; line-height: 1.38; }
:lang(hi) body { line-height: 1.75; }

/* ---- Icons ---------------------------------------------------------------- */
.ic {
  width: 1.15em; height: 1.15em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.18em;
}

/* ---- Backdrop: the lit studio behind the top of every page ----------------- */
.studio {
  position: absolute; inset: 0 0 auto 0; height: min(120vh, 72rem);
  z-index: var(--z-base); overflow: hidden; pointer-events: none;
}
/* The studio's light and its wash fade out at its foot rather than stop on a line. */
.studio { -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent); mask-image: linear-gradient(to bottom, black 50%, transparent); }
.studio .floor-grid { mask-image: radial-gradient(ellipse 70% 55% at 62% 0%, black 10%, transparent 75%); }
.topbar, .frame, .site-foot { position: relative; z-index: var(--z-raised); }

/* ---- Top bar ------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: var(--topbar);
  background: color-mix(in oklab, var(--night) 80%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), background-color var(--t-base);
}
.topbar.is-stuck { border-bottom-color: var(--rule); background: color-mix(in oklab, var(--night) 90%, transparent); }
.topbar-in {
  max-width: 90rem; height: 100%; margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 0.5rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; margin-right: auto; color: var(--chalk); min-height: 2.75rem; min-width: 2.75rem; }
.brand:hover { color: var(--chalk); }
.brand img { width: 28px; height: 28px; display: block; }
.brand span { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: -0.02em; white-space: nowrap; }
@media (max-width: 29.99rem) { .brand span { display: none; } }

.toplinks { display: none; }
.toplinks a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 0.7rem;
  border-radius: 0.6rem; color: var(--steel); font-size: 0.9rem; font-weight: 600;
}
.toplinks a:hover { color: var(--chalk); background: color-mix(in oklab, var(--chalk) 5%, transparent); }
.toplinks a[aria-current="page"] { color: var(--chalk); background: color-mix(in oklab, var(--signal) 10%, transparent); }
/* The same six links on every page, wherever there is room for them. */
@media (min-width: 64rem) { .toplinks { display: flex; gap: 0.1rem; margin-right: 0.5rem; } }
.toplinks a { white-space: nowrap; }
/* Tablet to small laptop: the links take the room, so the mark stands alone and
   Log in is its icon (its name stays as the accessible label). */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .brand span { display: none; }
  .top-login { width: 2.75rem; padding: 0; }
  .top-login span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* The language switcher arrives with the dictionary, after the page: its slot
   keeps the room so nothing beside it moves. */
.lang-switch-slot { flex-shrink: 0; min-width: 4.875rem; display: flex; justify-content: flex-end; }

.btn--sm { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: 0.875rem; border-radius: 0.75rem; }
/* Labels run long in some languages: a button may wrap its text, never the page. */
.btn { max-width: 100%; text-align: center; }
.top-login { display: none; }
@media (min-width: 48rem) { .top-login { display: inline-flex; } }
.top-bot span { display: none; }
@media (min-width: 30rem) { .top-bot span { display: inline; } }
@media (max-width: 29.99rem) { .top-bot { width: 2.75rem; padding: 0; } }

.menu-btn {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 0.8rem; border: 1px solid var(--rule-strong);
  background: color-mix(in oklab, var(--chalk) 3%, transparent); color: var(--chalk); cursor: pointer;
}
.menu-btn:hover { background: color-mix(in oklab, var(--chalk) 7%, transparent); }
.menu-btn .ic { width: 1.25rem; height: 1.25rem; }
.menu-btn .ic-close { display: none; }
.menu-btn[aria-expanded="true"] .ic-open { display: none; }
.menu-btn[aria-expanded="true"] .ic-close { display: block; }
@media (min-width: 80rem) { .menu-btn { display: none; } }

/* ---- Frame: rail + content ----------------------------------------------- */
.frame { max-width: 90rem; margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 80rem) {
  .frame { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); column-gap: clamp(2.5rem, 4vw, 4.5rem); }
}
main { min-width: 0; }

/* ---- The rail ------------------------------------------------------------ */
.rail { display: none; }
.rail-list { position: relative; }
.rail-group + .rail-group { margin-top: 1.15rem; }
.rail-label {
  margin: 0 0 0.3rem; padding-inline: 0.8rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail-list a {
  position: relative; display: flex; align-items: center; gap: 0.7rem;
  min-height: 2.5rem; padding: 0.35rem 0.8rem; border-radius: 0.7rem;
  color: var(--steel); font-size: 0.9rem; font-weight: 600; line-height: 1.25;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.rail-list a .ic { width: 1.05rem; height: 1.05rem; color: var(--dim); transition: color var(--t-fast); }
.rail-list a:hover { color: var(--chalk); background: color-mix(in oklab, var(--chalk) 4%, transparent); }
.rail-list a[aria-current] { color: var(--chalk); background: color-mix(in oklab, var(--signal) 10%, transparent); }
.rail-list a[aria-current] .ic { color: var(--signal); }
.rail-sub { position: relative; margin: 0.1rem 0 0.25rem; }
.rail-sub::before {
  content: ""; position: absolute; left: 1.32rem; top: 0.3rem; bottom: 0.3rem; width: 1px;
  background: var(--rule-strong);
}
.rail-sub a { min-height: 2rem; padding-left: 2.35rem; font-size: 0.84rem; font-weight: 500; }
/* The lit marker, one element that glides to whichever item is current. */
.rail-ind {
  position: absolute; left: -0.95rem; top: 0; width: 3px; height: 1.15rem; border-radius: 3px;
  background: var(--signal);
  transform: translateY(var(--y, 0px)); opacity: 0;
  transition: transform 0.5s var(--ease-glide), opacity var(--t-base);
}
.rail-ind.is-on { opacity: 1; }
/* The site's own pages open every menu sheet; wide screens have them in the top bar. */
.rail-site { display: none; }
.rail-site + .rail-group { margin-top: 0; }
.rail.is-open .rail-site { display: block; }
.rail.is-open .rail-site + .rail-group { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--rule); }
.rail-foot { display: grid; gap: 0.6rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.rail-foot .btn { width: 100%; }

@media (min-width: 80rem) {
  .rail {
    display: block; position: sticky; top: var(--topbar); align-self: start;
    max-height: calc(100vh - var(--topbar)); overflow-y: auto; overscroll-behavior: contain;
    padding: 2rem 0.25rem 1.5rem 1rem; margin-left: -1rem;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
}
/* Phones and tablets: the same rail is the menu sheet. */
@media (max-width: 79.99rem) {
  .rail.is-open {
    display: block; position: fixed; inset: var(--topbar) 0 0 0; z-index: var(--z-overlay);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 1.25rem var(--gutter) 2.5rem;
    background: color-mix(in oklab, var(--night) 94%, transparent);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    animation: sheet-in 0.32s var(--ease-glide);
  }
  .rail.is-open .rail-ind { display: none; }
  .rail.is-open .rail-list { max-width: 30rem; }
  .rail-list a { min-height: 2.75rem; }
  html.sheet-open { overflow: hidden; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---- Sections ------------------------------------------------------------ */
.sec { padding-block: clamp(4.5rem, 3rem + 5vw, 7.5rem); border-top: 1px solid var(--rule); }
.sec--flush { border-top: 0; }
.sec-head { max-width: 46rem; }
.sec-head h2, .h2 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.85rem, 1.25rem + 2.3vw, 2.9rem); line-height: 1.06; letter-spacing: -0.035em;
  text-wrap: balance; color: var(--chalk);
}
.sec-head .lede, .sec-lede { margin: 1.1rem 0 0; max-width: 60ch; }
.h3 {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 1.02rem + 0.75vw, 1.55rem); line-height: 1.2; letter-spacing: -0.025em;
  text-wrap: balance; color: var(--chalk);
}
.copy p { margin: 0.9rem 0 0; color: var(--steel); text-wrap: pretty; max-width: var(--measure); }
.copy p strong, .copy li strong { color: var(--chalk); }
.copy a:not(.btn), .prose-link { color: var(--azure); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--azure) 40%, transparent); }
.copy a:not(.btn):hover, .prose-link:hover { color: var(--chalk); text-decoration-color: currentColor; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.note-line { margin: 0.9rem 0 0; font-size: 0.875rem; color: var(--dim); max-width: var(--measure); }
.note-line b, .money-inline { color: var(--purse); font-weight: 800; }

/* Ticks: a facts list with one quiet marker each. */
.ticks { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.55rem; max-width: var(--measure); }
.ticks li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.6rem; color: var(--steel); }
.ticks li > .ic { margin-top: 0.22em; color: var(--signal); width: 1.05rem; height: 1.05rem; }
.ticks--azure li > .ic { color: var(--azure); }
.ticks--tally li > .ic { color: var(--tally); }

/* ---- Reveal (only when script runs, never under reduced motion) ----------- */
.js [data-reveal] {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 0.85s var(--ease-glide), transform 0.85s var(--ease-glide);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---- Plates: the real UI ------------------------------------------------- */
.plate { margin: 0; }
.plate-frame {
  position: relative; overflow: hidden; border-radius: 1rem;
  background: var(--deck);
  border: 1px solid color-mix(in oklab, var(--chalk) 10%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--chalk) 7%, transparent),
    0 40px 90px -46px color-mix(in oklab, var(--haze) 80%, var(--night)),
    0 18px 40px -28px color-mix(in oklab, var(--night) 90%, transparent);
  transform: translate3d(0, var(--drift, 0px), 0);
  will-change: transform;
}
.plate-frame img, .plate-frame video { display: block; width: 100%; height: auto; }
.plate figcaption { margin-top: 0.7rem; font-size: 0.8rem; line-height: 1.5; color: var(--dim); max-width: 60ch; }
.plate-play {
  position: absolute; inset: auto 0.9rem 0.9rem auto; display: none;
  align-items: center; gap: 0.45rem; min-height: 2.5rem; padding: 0.45rem 0.9rem;
  border-radius: 999px; border: 1px solid color-mix(in oklab, var(--chalk) 18%, transparent);
  background: color-mix(in oklab, var(--night) 70%, transparent); color: var(--chalk);
  font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.plate-play .ic { width: 0.9rem; height: 0.9rem; }
.plate.is-paused .plate-play { display: inline-flex; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(2.25rem, 1.5rem + 4vw, 4.75rem) clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.h1 { margin: 0; }
.h1-name {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.45rem, 1.35rem + 4.7vw, 4.85rem); line-height: 0.98; letter-spacing: -0.045em;
  color: var(--chalk);
}
.h1-line {
  display: block; margin-top: 0.7rem; max-width: 21ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 0.95rem + 2.1vw, 2.55rem); line-height: 1.1; letter-spacing: -0.032em;
  color: var(--signal); text-wrap: balance;
}
.hero-lede {
  margin: 1.5rem 0 0; max-width: 58ch;
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.16rem); line-height: 1.68; color: var(--steel);
}
.hero-lede strong { color: var(--chalk); font-weight: 700; }
/* The buttons share rows as their labels allow: two short English ones sit
   side by side on a phone, a long Russian one takes its own row. */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.75rem; }
.hero-ctas .btn { flex: 1 1 auto; padding-inline: 1rem; }
.hero-ctas .btn--fill { flex-basis: 100%; }
@media (min-width: 40rem) { .hero-ctas .btn { flex: 0 0 auto; padding-inline: 1.6rem; } .hero-ctas .btn--fill { flex-basis: auto; } }
.hero-note { margin: 1.1rem 0 0; font-size: 0.92rem; color: var(--dim); max-width: 60ch; }
.hero-note b { color: var(--purse); font-weight: 800; }
.hero-plate { margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.hero-plate .plate-frame { border-radius: 1.15rem; }
.hero-plate .v-tight { display: block; }
.hero-plate .v-wide { display: none; }
@media (min-width: 48rem) { .hero-plate .v-tight { display: none; } .hero-plate .v-wide { display: block; } }

/* ---- Live board ---------------------------------------------------------- */
.board { margin-top: 2.25rem; overflow: hidden; }
.board-head {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule);
}
.board-title { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 0.95rem; color: var(--chalk); }
.board-upd { margin-left: auto; font-size: 0.8rem; color: var(--dim); }
/* The chase light: a red hairline that crosses the board once per refresh. */
.board-sweep {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--tally) 70%, transparent);
  transform-origin: left; transform: scaleX(0); opacity: 0.8;
}
.board-sweep.is-running { animation: sweep-x var(--poll, 5s) linear; }
@keyframes sweep-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .board-sweep { display: none; } }
.board-cols, .board-row {
  display: grid; align-items: center; column-gap: 1rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.7fr) minmax(0, 1.15fr) minmax(0, 0.8fr);
  padding: 0.85rem 1.25rem;
}
.board-cols {
  padding-block: 0.6rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--rule);
}
.board-row + .board-row { border-top: 1px solid var(--rule); }
.board-code { font-family: var(--mono); font-weight: 600; font-size: 1rem; letter-spacing: 0.04em; color: var(--chalk); overflow-wrap: anywhere; }
.board-val { font-weight: 800; color: var(--purse); font-variant-numeric: tabular-nums; }
.board-val.is-none { color: var(--dim); font-weight: 600; }
.board-speed { font-family: var(--mono); font-size: 0.9rem; color: var(--chalk); }
.board-speed.is-none { color: var(--dim); font-family: var(--font); font-size: 0.85rem; }
.board-claims, .board-when { font-size: 0.88rem; color: var(--steel); font-variant-numeric: tabular-nums; }
.board-when { text-align: right; }
.board-cols .board-when { font-size: inherit; color: inherit; }
.board-row.is-new { animation: row-in 0.9s var(--ease-glide); }
@keyframes row-in {
  from { opacity: 0; transform: translate3d(0, -8px, 0); background-color: color-mix(in oklab, var(--signal) 10%, transparent); }
  to { opacity: 1; transform: none; background-color: transparent; }
}
.board-empty { padding: 1.4rem 1.25rem; color: var(--steel); font-size: 0.92rem; }
.board-foot {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; justify-content: space-between;
  padding: 0.9rem 1.25rem; border-top: 1px solid var(--rule); font-size: 0.82rem; color: var(--dim);
}
.board-foot b { color: var(--steel); font-weight: 700; }
.board-skel { height: 1rem; margin: 1.05rem 1.25rem; border-radius: 0.4rem; }
@media (max-width: 47.99rem) {
  .board-cols { display: none; }
  .board-row {
    grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.3rem;
    grid-template-areas: "code val" "speed when";
  }
  .board-code { grid-area: code; }
  .board-val { grid-area: val; text-align: right; }
  .board-speed { grid-area: speed; font-size: 0.82rem; }
  .board-when { grid-area: when; }
}

/* ---- How it works: four stations on one line ---------------------------- */
.stations { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; gap: 0; counter-reset: st; }
.station { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 1rem; padding-bottom: 2rem; }
.station::before {
  counter-increment: st; content: counter(st);
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px;
  font-family: var(--mono); font-weight: 600; font-size: 0.9rem; color: var(--signal);
  background: color-mix(in oklab, var(--signal) 10%, var(--deck));
  border: 1px solid color-mix(in oklab, var(--signal) 32%, transparent);
  position: relative; z-index: 1;
}
.station::after {
  content: ""; position: absolute; left: 1.25rem; top: 2.5rem; bottom: 0; width: 1px;
  background: linear-gradient(var(--rule-strong), color-mix(in oklab, var(--signal) 30%, var(--rule)));
}
.station:last-child::after { display: none; }
.station h3 { margin: 0.35rem 0 0; font-size: 1.05rem; font-weight: 800; color: var(--chalk); }
.station p { margin: 0.4rem 0 0; font-size: 0.95rem; color: var(--steel); }
@media (min-width: 64rem) {
  .stations { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.5rem; }
  .station { grid-template-columns: 1fr; padding-bottom: 0; }
  .station::after { left: 2.5rem; right: -1.5rem; top: 1.25rem; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, color-mix(in oklab, var(--signal) 35%, var(--rule)), var(--rule-strong)); }
  .station h3 { margin-top: 1.1rem; }
}

/* The measured-speed readout: a small reference table. */
.readout { margin-top: 3rem; padding: 1.4rem clamp(1.1rem, 2.5vw, 1.75rem) 1.25rem; }
.readout h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--chalk); }
.readout table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: 0.95rem; }
.readout th, .readout td { padding: 0.75rem 0.5rem 0.75rem 0; text-align: left; border-top: 1px solid var(--rule); vertical-align: baseline; }
.readout thead th { border-top: 0; padding-top: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.readout tbody th { font-weight: 700; color: var(--chalk); }
.readout td { font-family: var(--mono); color: var(--chalk); white-space: nowrap; }
.readout td.is-none { color: var(--dim); font-family: var(--font); white-space: normal; }
.readout .method { margin: 1rem 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--dim); max-width: 75ch; }
@media (max-width: 40rem) {
  .readout thead { display: none; }
  .readout tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); padding-block: 0.6rem; }
  .readout tbody th { grid-column: 1 / -1; border: 0; padding: 0 0 0.3rem; }
  .readout td { border: 0; padding: 0; white-space: normal; }
  .readout td::before { content: attr(data-k); display: block; font-family: var(--font); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
}

/* ---- Script tour: one block per tool -------------------------------------- */
.tool { display: grid; gap: 1.75rem; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); border-top: 1px solid var(--rule); }
.tool:first-of-type { margin-top: 3rem; }
.tool-copy { min-width: 0; }
.tool-copy .h3 { display: flex; align-items: flex-start; gap: 0.7rem; }
.tool-copy .h3 .ic { width: 1.4rem; height: 1.4rem; margin-top: 0.12em; color: var(--signal); }
@media (min-width: 64rem) {
  .tool { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .tool-copy { position: sticky; top: calc(var(--topbar) + 2rem); }
  .tool--flip .tool-copy { order: 2; }
  .tool--wide { grid-template-columns: 1fr; }
  .tool--wide .tool-copy { position: static; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 4vw, 3.5rem); }
}
.tool-pair { display: grid; gap: 1.25rem; }
.tool-defs { margin: 1.25rem 0 0; display: grid; gap: 0; max-width: var(--measure); }
.tool-defs div { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 0.65rem; padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.tool-defs dt { grid-column: 2; font-weight: 700; color: var(--chalk); }
.tool-defs dd { grid-column: 2; margin: 0.2rem 0 0; font-size: 0.93rem; color: var(--steel); }
.tool-defs .ic { grid-row: 1 / span 2; margin-top: 0.2rem; color: var(--azure); }
.theme-names { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }

/* How it works: the same switcher as the tools, each tool's picture and then
   its whole story; the list of tools stays in view while you read. */
.tools-x--deep { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 64rem) {
  .tools-x--deep .tools-view { position: static; }
  .tools-x--deep .tools-list { position: sticky; top: calc(var(--topbar) + 1.5rem); }
}
.tools-x--deep .tools-panel .plate-frame { aspect-ratio: auto; }
.tools-x--deep .tools-panel img { height: auto; object-fit: fill; }
.tools-x--deep .tools-panel figcaption { display: block; }
.tool-deep .tool-copy { position: static; margin-top: 1.75rem; }

/* What to expect, and the risks: two columns of plain facts. */
.honest { display: grid; gap: 2.25rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 64rem) { .honest { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); } }
.honest .ticks { margin-top: 0; }
.honest .h3 { font-size: 1.15rem; }
.honest .h3 + .ticks { margin-top: 1.1rem; }
.honest strong { color: var(--chalk); }
.honest a:not(.btn) { color: var(--azure); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--azure) 40%, transparent); text-underline-offset: 3px; }
.honest a:not(.btn):hover { color: var(--chalk); text-decoration-color: currentColor; }
.closer-more { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; }

/* ---- Virtual Claimer ------------------------------------------------------ */
.vc-steps { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 0; counter-reset: vc; }
.vc-step { display: grid; gap: 1.5rem; padding-block: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); border-top: 1px solid var(--rule); }
.vc-step-n { font-family: var(--mono); font-size: 0.8rem; font-weight: 600; color: var(--signal); }
.vc-step-n::before { counter-increment: vc; content: "0" counter(vc); }
@media (min-width: 64rem) {
  .vc-step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
}
.phone-plate { max-width: 20rem; margin-inline: auto; }
.phone-plate .plate-frame { border-radius: 1.6rem; }
.evidence {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.75rem; margin-top: 2.25rem;
  padding: 1.1rem 1.25rem; border-radius: var(--radius-ctl);
  background: color-mix(in oklab, var(--azure) 6%, var(--deck));
  border: 1px solid color-mix(in oklab, var(--azure) 20%, transparent);
  font-size: 0.9rem; color: var(--steel); max-width: 52rem;
}
.evidence .ic { color: var(--azure); margin-top: 0.18em; }
.evidence strong { color: var(--chalk); }

/* ---- Comparison table ----------------------------------------------------- */
.cmp { margin-top: 2.5rem; overflow: hidden; }
.cmp table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.cmp th, .cmp td { padding: 0.95rem 1.15rem; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.cmp thead th { border-top: 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.cmp thead th + th { color: var(--chalk); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: none; }
.cmp tbody th { width: 26%; font-weight: 700; color: var(--chalk); }
.cmp td { color: var(--steel); }
.cmp td + td, .cmp th + th, .cmp th + td { border-left: 1px solid var(--rule); }
.cmp .y { color: var(--signal); font-weight: 700; }
.cmp .money-inline { color: var(--purse); }
.cmp-k { display: none; }
@media (max-width: 47.99rem) {
  .cmp thead { display: none; }
  .cmp tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--rule); }
  .cmp tbody tr:first-child { border-top: 0; }
  .cmp th, .cmp td { border: 0 !important; padding: 0.55rem 1rem; }
  .cmp tbody th { grid-column: 1 / -1; width: auto; padding-top: 0.95rem; padding-bottom: 0.15rem; }
  .cmp td { padding-bottom: 0.95rem; font-size: 0.88rem; }
  .cmp-k { display: block; margin-bottom: 0.15rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
}

/* ---- Panel, Telegram ------------------------------------------------------ */
.split { display: grid; gap: 2rem; margin-top: 2.75rem; }
@media (min-width: 64rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; } }
.tg { display: grid; gap: 0; margin-top: 2.5rem; }
.tg-item { display: grid; gap: 1.5rem; padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--rule); }
@media (min-width: 64rem) {
  .tg-item { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 3rem; align-items: center; }
  .tg-item--text { grid-template-columns: minmax(0, 1fr); }
}
.tg-handle { font-family: var(--mono); font-size: 0.9rem; color: var(--azure); }
.langs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.lang-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0.4rem 0.8rem;
  border-radius: 999px; border: 1px solid var(--rule-strong); background: color-mix(in oklab, var(--chalk) 2.5%, transparent);
  color: var(--steel); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.lang-chip:hover { color: var(--chalk); border-color: color-mix(in oklab, var(--signal) 40%, transparent); }
.lang-chip[aria-pressed="true"] { color: var(--chalk); border-color: color-mix(in oklab, var(--signal) 55%, transparent); background: color-mix(in oklab, var(--signal) 10%, transparent); }

/* ---- Security: where each request goes ------------------------------------ */
.routes { display: grid; gap: 1.25rem; margin-top: 2.75rem; }
@media (min-width: 64rem) { .routes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.route { padding: 1.5rem clamp(1.15rem, 2.5vw, 1.75rem); }
.route .h3 { font-size: 1.15rem; }
/* Both ends share the width and wrap their labels: a translated "Your
   browser" can be twice as long as the English. */
.route-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(1.75rem, 0.6fr) minmax(0, 1fr); align-items: center; gap: 0.6rem; margin-top: 1.25rem; }
.route-node {
  display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.55rem 0.8rem; border-radius: 0.7rem;
  background: var(--deck-2); border: 1px solid var(--rule-strong); font-size: 0.86rem; font-weight: 700; color: var(--chalk); overflow-wrap: anywhere;
}
.route-node .ic { color: var(--azure); }
.route-line { position: relative; height: 1px; background: color-mix(in oklab, var(--signal) 60%, transparent); }
.route-line::after { content: ""; position: absolute; right: -1px; top: -4px; border: 4.5px solid transparent; border-left: 7px solid color-mix(in oklab, var(--signal) 80%, transparent); border-right: 0; }
.route-tag { grid-column: 2; justify-self: center; margin-top: -0.35rem; font-size: 0.72rem; font-weight: 700; color: var(--signal); }

/* ---- Setup ---------------------------------------------------------------- */
.setup { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 64rem) { .setup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.setup-card { padding: 1.5rem clamp(1.15rem, 2.5vw, 1.75rem); }
.setup-card .h3 { font-size: 1.2rem; display: flex; align-items: center; gap: 0.6rem; }
.setup-card .h3 .ic { color: var(--signal); }
.steps { list-style: none; margin: 1.1rem 0 0; padding: 0; counter-reset: sp; }
.steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.6rem; padding: 0.75rem 0; border-top: 1px solid var(--rule); color: var(--steel); font-size: 0.95rem; }
.steps li::before { counter-increment: sp; content: counter(sp, decimal-leading-zero); font-family: var(--mono); font-size: 0.8rem; font-weight: 600; color: var(--signal); padding-top: 0.15rem; }
.steps li strong { color: var(--chalk); }
.setup-card .plate { margin-top: 1.25rem; }

/* ---- Pricing: two rate cards ----------------------------------------------- */
.rates { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 64rem) { .rates { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; } }
.rate { padding: 1.5rem clamp(1.15rem, 2.5vw, 1.75rem) 1.25rem; }
.rate-head { display: flex; align-items: flex-start; gap: 0.85rem; }
.rate-head .ic { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; color: var(--signal); }
.rate-head .h3 { font-size: 1.2rem; }
.rate-head p { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--steel); }
.rate-list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.rate-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; row-gap: 0.2rem;
  padding: 0.95rem 0; border-top: 1px solid var(--rule);
}
.rate-name { font-weight: 700; color: var(--chalk); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.rate-sub { grid-column: 1; font-size: 0.82rem; color: var(--dim); }
.rate-price { grid-row: 1 / span 2; grid-column: 2; text-align: right; }
.rate-amt { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); letter-spacing: -0.02em; color: var(--purse); font-variant-numeric: tabular-nums; }
.rate-was { display: block; font-size: 0.82rem; color: var(--dim); text-decoration: line-through; }
.rate-ends { display: block; font-size: 0.78rem; color: var(--purse); font-variant-numeric: tabular-nums; }
.rate-row.is-best .rate-name::after { content: none; }
.rate-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.rate-cta .btn { flex: 1 1 auto; }
.rate-skel { height: 3.3rem; margin: 0.5rem 0; }
.pay-notes { display: grid; gap: 0.6rem; margin-top: 1.75rem; max-width: var(--measure); }

/* ---- FAQ ----------------------------------------------------------------- */
.faq { margin-top: 2.25rem; max-width: 52rem; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: 1rem 0.25rem; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.02rem; color: var(--chalk);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { width: 1.1rem; height: 1.1rem; color: var(--steel); transition: transform var(--t-base); }
.faq details[open] summary .ic { transform: rotate(45deg); color: var(--signal); }
.faq summary:hover { color: var(--signal); }
.faq .faq-a { padding: 0 0.25rem 1.25rem; color: var(--steel); max-width: var(--measure); }
.faq details[open] .faq-a { animation: faq-in 0.4s var(--ease-glide); }
@keyframes faq-in { from { opacity: 0; transform: translate3d(0, -4px, 0); } }

/* ---- Final call to action -------------------------------------------------- */
.closer { position: relative; overflow: hidden; isolation: isolate; text-align: left; }
/* Its light fades out well inside the section, so no edge of the box shows. */
.closer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 36% 58% at 72% 45%, color-mix(in oklab, var(--haze) 50%, transparent), transparent 70%);
}
.closer .h2 { max-width: 18ch; }

/* ---- Footer --------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--rule); padding-block: 3rem 3.5rem; color: var(--dim); font-size: 0.88rem; }
.foot-in { max-width: 90rem; margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: 2rem; }
@media (min-width: 64rem) { .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); column-gap: clamp(2.5rem, 5vw, 5rem); } }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
@media (min-width: 48rem) { .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foot-brand { display: flex; gap: 0.85rem; align-items: flex-start; }
.foot-brand img { width: 36px; height: 36px; }
.foot-brand p { margin: 0 0 0.45rem; max-width: 46ch; line-height: 1.6; }
.foot-brand strong { color: var(--steel); }
.foot-col h2 { margin: 0 0 0.6rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.foot-col a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--dim); overflow-wrap: anywhere; }
.foot-col a:hover { color: var(--chalk); }
.foot-help a { color: var(--steel); text-decoration: underline; text-decoration-color: transparent; }
.foot-help a:hover { color: var(--chalk); text-decoration-color: currentColor; }

/* ---- Home: the front page --------------------------------------------------
   No rail here: on wide screens the top bar carries the links, below that the
   menu button opens them as a sheet (the same sheet as every other page).
   Every section opens the same way, its heading on the left and one sentence
   beside it on the right, so the page reads as one structure top to bottom. */
@media (min-width: 80rem) {
  .rail--sheet { display: none; }
  .frame--solo { display: block; }
}
@media (min-width: 64rem) {
  .sec-head--split {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 6rem); align-items: end;
  }
  .sec-head--split h2 { max-width: 17ch; }
  .sec-head--split .lede { margin: 0; justify-self: end; max-width: 50ch; }
}
.sec-head .lede strong { color: var(--chalk); font-weight: 700; }

/* Hero: what it is and the action on one side, live claims on the other. */
.hero--home { display: grid; gap: clamp(2.5rem, 2rem + 2.5vw, 3.5rem); align-items: center; padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem); }
@media (min-width: 64rem) {
  .hero--home { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(2.5rem, 5vw, 5.5rem); }
  .hero--home .h1-name { font-size: clamp(2.45rem, 1.1rem + 3.7vw, 4.5rem); }
}
.hero--home .h1-line { max-width: none; }
.hero--home .hero-lede { max-width: 42ch; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); }
.hero-copy, .hero-live { min-width: 0; }
.hero-live .board { margin-top: 0; }
.hero-live-note { margin: 0.75rem 0 0; padding-inline: 0.25rem; font-size: 0.8rem; color: var(--dim); }

/* The live board, compact: two lines per claim. */
.board--compact .board-title { margin: 0; font-family: var(--font); }
.board--compact .board-row {
  grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; row-gap: 0.3rem;
  grid-template-areas: "code val" "speed when";
  padding: 0.85rem 1.2rem;
}
.board--compact .board-code { grid-area: code; }
.board--compact .board-val { grid-area: val; text-align: right; }
.board--compact .board-speed { grid-area: speed; font-size: 0.82rem; }
.board--compact .board-when { grid-area: when; font-size: 0.82rem; }

/* Measured speed: one instrument line under the hero. */
.proof { padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.readline { display: grid; gap: 1.1rem 2.5rem; align-items: center; padding: 1.2rem clamp(1.15rem, 2.5vw, 1.75rem); }
@media (min-width: 64rem) { .readline { grid-template-columns: minmax(0, 1fr) auto; } }
.readline-main { min-width: 0; }
.readline-k {
  display: flex; align-items: center; gap: 0.5rem; margin: 0;
  font-family: var(--font); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.readline-k .ic { width: 1rem; height: 1rem; color: var(--azure); }
.readline-figs { margin: 0.55rem 0 0; font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem); font-weight: 600; line-height: 1.55; color: var(--steel); text-wrap: pretty; }
.readline-figs .fig {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4em; letter-spacing: -0.02em;
  color: var(--chalk); font-variant-numeric: tabular-nums;
}
.readline-sub { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--dim); }
.readline-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.readline-facts li {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.4rem 0.9rem;
  border-radius: 999px; border: 1px solid var(--rule-strong); background: color-mix(in oklab, var(--chalk) 2.5%, transparent);
  font-size: 0.86rem; font-weight: 700; color: var(--steel);
}
.readline-facts .ic { color: var(--signal); }

/* How it works: the claim itself, large, then the four steps. */
.showcase { max-width: 68rem; margin: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem) auto 0; }
.showcase .plate-frame { border-radius: 1.25rem; }
.showcase figcaption { margin-inline: auto; text-align: center; }
#how .stations { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

/* Two ways to claim: two matched cards, price and action at the foot. */
.prods { display: grid; gap: 1.25rem; margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.25rem); }
@media (min-width: 64rem) { .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.prod { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); }
.prod-top { display: flex; align-items: center; gap: 0.9rem; }
.prod-ic {
  display: grid; place-items: center; flex-shrink: 0; width: 2.9rem; height: 2.9rem; border-radius: 0.9rem;
  color: var(--signal); background: color-mix(in oklab, var(--signal) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--signal) 26%, transparent);
}
.prod-ic .ic { width: 1.35rem; height: 1.35rem; }
.prod-h {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.95rem);
  line-height: 1.1; letter-spacing: -0.03em; color: var(--chalk);
}
.prod-p { margin: 1.1rem 0 0; color: var(--steel); max-width: 50ch; text-wrap: pretty; }
.prod .ticks { margin: 1.25rem 0 1.75rem; }
.prod-foot { margin-top: auto; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.prod-price { margin: 0; color: var(--steel); }
.prod-price .money-inline { font-family: var(--font-display); font-size: 1.3em; letter-spacing: -0.02em; }
.prod .cta-row { margin-top: 1.1rem; }
.prod .note-line { margin-top: 0.9rem; }
.prods-more { display: flex; justify-content: center; margin-top: 1.75rem; }

/* What the script does: the bar, then one tool at a time at a size you can read. */
.feat-bar { display: block; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); color: inherit; }
.feat-bar-t { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; color: var(--chalk); transition: color var(--t-fast); }
.feat-bar-t .ic { color: var(--signal); }
.feat-bar:hover .feat-bar-t { color: var(--signal); }
.feat-bar-img {
  display: block; overflow: hidden; margin-top: 0.85rem; border-radius: 0.8rem; background: var(--deck);
  border: 1px solid color-mix(in oklab, var(--chalk) 10%, transparent);
  box-shadow: 0 24px 60px -40px color-mix(in oklab, var(--haze) 80%, var(--night));
}
.feat-bar-img img { display: block; width: 100%; height: auto; }
/* On a phone the whole bar is too small to read: show its left end at size. */
@media (max-width: 47.99rem) { .feat-bar-img img { width: auto; max-width: none; height: 3.25rem; } }

.tools-x { display: grid; gap: 1.25rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 64rem) {
  .tools-x { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .tools-view { position: sticky; top: calc(var(--topbar) + 1.5rem); }
}
.tools-list { display: grid; gap: 0.35rem; }
.tools-tab {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1.35rem minmax(0, 1fr);
  column-gap: 0.85rem; row-gap: 0.25rem; align-items: start; width: 100%; padding: 1rem 1.1rem;
  border-radius: 0.95rem; border: 1px solid transparent; background: none;
  font: inherit; text-align: left; color: var(--steel); cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.tools-tab .ic { grid-row: 1 / span 2; width: 1.2rem; height: 1.2rem; margin-top: 0.12rem; color: var(--dim); transition: color var(--t-fast); }
.tools-t { font-weight: 800; color: var(--steel); transition: color var(--t-fast); }
.tools-p { font-size: 0.9rem; line-height: 1.5; color: var(--dim); }
.tools-tab:hover .tools-t { color: var(--chalk); }
.tools-tab[aria-selected="true"] { background: color-mix(in oklab, var(--chalk) 3.5%, transparent); border-color: var(--rule-strong); }
.tools-tab[aria-selected="true"] .ic { color: var(--signal); }
.tools-tab[aria-selected="true"] .tools-t { color: var(--chalk); }
.tools-tab[aria-selected="true"] .tools-p { color: var(--steel); }
/* While the tools move on by themselves, the open one shows its time running out. */
.tools-prog {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--signal); opacity: 0; transform: scaleX(0); transform-origin: left;
}
.tools-x.is-auto .tools-tab[aria-selected="true"] .tools-prog { opacity: 0.8; animation: tools-fill 6s linear forwards; }
@keyframes tools-fill { to { transform: scaleX(1); } }
.tools-view { min-width: 0; }
.tools-panel .plate-frame { aspect-ratio: 1200 / 830; }
.tools-panel img { height: 100%; object-fit: cover; object-position: 0 0; }
.tools-panel:not([hidden]) { animation: tools-in 0.5s var(--ease-glide); }
@keyframes tools-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
.tools-panel figcaption { display: none; }
.tools-more { margin-top: 1.25rem; }
@media (max-width: 63.99rem) {
  .tools-list {
    display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter) * -1); padding: 0.1rem var(--gutter) 0.35rem;
  }
  .tools-list::-webkit-scrollbar { display: none; }
  .tools-tab {
    flex: 0 0 auto; width: auto; grid-template-columns: auto auto; align-items: center;
    padding: 0.55rem 0.95rem; border-radius: 999px; border-color: var(--rule-strong); scroll-snap-align: start;
  }
  .tools-tab .ic { grid-row: auto; margin: 0; }
  .tools-p { display: none; }
  .tools-prog { left: 0.95rem; right: 0.95rem; }
  .tools-panel figcaption { display: block; }
}
@media (prefers-reduced-motion: reduce) { .tools-panel:not([hidden]) { animation: none; } }

/* The close: one centred call, the free channels beside it for anyone not ready to buy. */
.home .closer { text-align: center; }
.cta-band { display: grid; justify-items: center; padding: clamp(2.25rem, 1.5rem + 4vw, 4.5rem) clamp(1.25rem, 1rem + 3vw, 4rem); }
.cta-band .h2 { max-width: 18ch; margin-inline: auto; }
.cta-band .lede { margin: 1rem auto 0; max-width: 46ch; }
.cta-band .cta-row { justify-content: center; margin-top: 2rem; }
.channels {
  display: grid; gap: 1.25rem; margin-top: 1.25rem; padding: 1.4rem clamp(1.15rem, 2.5vw, 1.75rem);
  border: 1px solid var(--rule); border-radius: var(--radius-card); text-align: left;
}
@media (min-width: 64rem) { .channels { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2.5rem; } }
.channels .h3 { font-size: 1.1rem; }
.channels p { margin: 0.45rem 0 0; font-size: 0.93rem; color: var(--steel); max-width: 62ch; }
.channels .cta-row { margin-top: 0; }
.closer-age { margin: 1.5rem auto 0; text-align: center; }

/* Pricing: the shorter card shares its column with the buy buttons and the
   payment note, so the section closes as one block. */
.rates-aside .cta-row { margin-top: 0.5rem; }
.rates-aside .note-line { margin-top: 1.1rem; }
@media (min-width: 64rem) {
  .home .rates { grid-template-rows: auto 1fr; }
  .home .rates > .rate:first-child { grid-row: 1 / span 2; }
  .rates-aside { padding: 0.75rem 0.25rem 0; }
}
.faq-more { margin-top: 1.25rem; }

/* ---- Documents: the guide and the legal pages ------------------------------ */
.doc-head { padding-block: clamp(2.25rem, 1.5rem + 3.5vw, 4.25rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.doc-head .h1-name { font-size: clamp(1.85rem, 1.25rem + 2.3vw, 2.9rem); line-height: 1.06; letter-spacing: -0.035em; max-width: 24ch; text-wrap: balance; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.25rem; font-size: 0.85rem; color: var(--dim); }
.doc-sec { padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); border-top: 1px solid var(--rule); }
.doc-sec h2 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.8rem); line-height: 1.15; letter-spacing: -0.03em; color: var(--chalk); text-wrap: balance;
}
.doc-sec h2 a:not(.btn) { color: inherit; text-decoration: none; }
.doc-sec h2 a:hover .anchor { opacity: 1; }
.anchor { margin-left: 0.4rem; color: var(--dim); opacity: 0; font-family: var(--mono); font-size: 0.7em; transition: opacity var(--t-fast); }
.doc-sec h3 { margin: 2rem 0 0; font-size: 1.05rem; font-weight: 800; color: var(--chalk); }
.doc-sec p, .doc-sec li { color: var(--steel); line-height: 1.75; text-wrap: pretty; }
.doc-sec p { margin: 0.9rem 0 0; max-width: var(--measure); }
.doc-sec > ul, .doc-sec > ol { max-width: var(--measure); }
.doc-sec strong { color: var(--chalk); }
.doc-sec a:not(.btn) { color: var(--azure); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--azure) 40%, transparent); text-underline-offset: 3px; }
.doc-sec a:not(.btn):hover { color: var(--chalk); text-decoration-color: currentColor; }
.doc-sec code, .doc-sec kbd {
  font-family: var(--mono); font-size: 0.86em; padding: 0.1em 0.38em; border-radius: var(--radius-chip);
  background: var(--deck-2); border: 1px solid var(--rule); color: var(--chalk);
}
.doc-sec .ticks { margin-top: 1.1rem; }
.note {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.75rem;
  margin-top: 1.5rem; padding: 1rem 1.15rem; border-radius: var(--radius-ctl); max-width: var(--measure);
  background: color-mix(in oklab, var(--note, var(--azure)) 7%, var(--deck));
  border: 1px solid color-mix(in oklab, var(--note, var(--azure)) 22%, transparent);
  color: var(--steel); font-size: 0.95rem; line-height: 1.7;
}
.note > .ic { margin-top: 0.22em; color: var(--note, var(--azure)); }
.note--purse { --note: var(--purse); }
.note--tally { --note: var(--tally); }
.note--signal { --note: var(--signal); }
.doc-step { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); padding: 1.6rem 0; border-top: 1px solid var(--rule); max-width: 52rem; }
.doc-step:first-of-type { border-top: 0; }
.doc-step-n { font-family: var(--mono); font-size: 0.82rem; font-weight: 600; color: var(--signal); padding-top: 0.15rem; }
.doc-step h3 { margin: 0; }
.doc-step .plate { margin-top: 1.25rem; }
.doc-table { margin-top: 1.5rem; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-card); background: color-mix(in oklab, var(--deck) 80%, transparent); }
.doc-table table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.92rem; }
.doc-table th, .doc-table td { padding: 0.9rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.doc-table tr:last-child td, .doc-table tr:last-child th { border-bottom: 0; }
.doc-table thead th { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.doc-table tbody th { color: var(--chalk); font-weight: 700; }
.doc-table td { color: var(--steel); }
.doc-table td + td, .doc-table th + td, .doc-table th + th { border-left: 1px solid var(--rule); }
.codebox { position: relative; margin: 1rem 0 0.6rem; max-width: 52rem; }
.codebox pre {
  margin: 0; padding: 1rem 1rem 0.9rem; overflow: auto; max-height: 20rem;
  background: var(--night); border: 1px solid var(--rule); border-radius: var(--radius-card);
}
.codebox code { font: 500 12.5px/1.65 var(--mono); color: var(--chalk); white-space: pre; tab-size: 2; }
.codebox-copy { position: absolute; top: 0.55rem; right: 0.55rem; z-index: var(--z-raised); }
@media (max-width: 36rem) {
  .codebox-copy { position: static; width: 100%; margin-bottom: 0.5rem; }
  .codebox code { font-size: 11.5px; }
}
.legal h2 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: 0.35rem; }

/* ---- The guide: steps you can tick, the pictures for your browser, fixes ------ */
.doc-head .note { margin-top: 1.5rem; }
.doc-sec p.aside { font-size: 0.92rem; color: var(--dim); }

/* Start here: three ways in. */
.pick { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; max-width: 66rem; }
@media (min-width: 48rem) { .pick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.doc-sec a.pick-card {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.35rem; align-content: start; height: 100%;
  padding: 1.15rem 1.2rem; border-radius: var(--radius-card); border: 1px solid var(--rule-strong);
  background: color-mix(in oklab, var(--deck) 80%, transparent); color: var(--steel); text-decoration: none;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.doc-sec a.pick-card:hover { color: var(--steel); border-color: color-mix(in oklab, var(--signal) 45%, transparent); background: color-mix(in oklab, var(--signal) 5%, var(--deck)); }
.pick-card .ic { grid-row: 1 / span 3; margin-top: 0.2em; color: var(--signal); }
.pick-t { font-weight: 800; color: var(--chalk); }
.pick-p { font-size: 0.92rem; line-height: 1.55; }
.pick-n { font-size: 0.8rem; line-height: 1.5; color: var(--dim); }

/* Your browser, and how far you are. */
.gbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 1.5rem; max-width: 52rem; }
.btabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.btabs-l { margin-right: 0.35rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.btabs button {
  min-height: 2.75rem; padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid var(--rule-strong);
  background: none; color: var(--steel); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.btabs button:hover { color: var(--chalk); }
.btabs button[aria-pressed="true"] { color: var(--chalk); border-color: color-mix(in oklab, var(--signal) 55%, transparent); background: color-mix(in oklab, var(--signal) 12%, transparent); }
.doc-sec .gprog { min-height: 1.5em; margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.doc-sec .gprog.is-done { color: var(--signal); }
.gbar .btn--quiet { margin-left: auto; }
/* Only the chosen browser's pictures and words; without the script, all of them. */
[data-guide-browser="chrome"] [data-for]:not([data-for~="chrome"]),
[data-guide-browser="edge"] [data-for]:not([data-for~="edge"]),
[data-guide-browser="brave"] [data-for]:not([data-for~="brave"]),
[data-guide-browser="firefox"] [data-for]:not([data-for~="firefox"]) { display: none; }

/* Numbered steps, each with a tick. */
.gsteps { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 52rem; }
.gstep { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.5rem; padding: 1.75rem 0; border-top: 1px solid var(--rule); }
.gstep:first-child { border-top: 0; }
.gstep-n { padding-top: 0.55rem; font-family: var(--mono); font-size: 0.82rem; font-weight: 600; color: var(--signal); }
.gstep-b { min-width: 0; }
.gstep-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.doc-sec .gstep-h h3 { margin: 0; padding-top: 0.45rem; }
.gstep.is-done .gstep-n { color: var(--dim); }
.gstep .plate { margin-top: 1.25rem; }
.gstep .phone-plate { max-width: 20rem; }
.gdone {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.95rem;
  border-radius: 999px; border: 1px solid var(--rule-strong); cursor: pointer; user-select: none;
  font-size: 0.85rem; font-weight: 700; color: var(--steel);
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.gdone:hover { color: var(--chalk); }
.gdone input, .check input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--signal); cursor: pointer; }
.gdone:has(input:checked) { color: var(--chalk); border-color: color-mix(in oklab, var(--signal) 55%, transparent); background: color-mix(in oklab, var(--signal) 12%, transparent); }

/* It worked if... and Stuck? */
.doc-sec p.ok {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.6rem;
  margin: 1.1rem 0 0; padding: 0.85rem 1rem; border-radius: var(--radius-ctl); font-size: 0.95rem; line-height: 1.65;
  background: color-mix(in oklab, var(--signal) 6%, var(--deck)); border: 1px solid color-mix(in oklab, var(--signal) 22%, transparent);
}
.ok > .ic { margin-top: 0.25em; color: var(--signal); }
.ok b { color: var(--chalk); }
.stuck { margin-top: 0.75rem; max-width: var(--measure); border: 1px solid var(--rule); border-radius: var(--radius-ctl); }
.stuck summary {
  display: flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.4rem 1rem;
  list-style: none; cursor: pointer; font-size: 0.92rem; font-weight: 700; color: var(--steel);
}
.stuck summary::-webkit-details-marker { display: none; }
.stuck summary .ic { color: var(--azure); }
.stuck summary:hover, .stuck[open] summary { color: var(--chalk); }
.stuck-a { padding: 0 1rem 1rem; }
.doc-sec .stuck-a p { margin: 0; }
.stuck.snippet { max-width: 52rem; }
.stuck.snippet .codebox { margin: 0 1rem 1rem; }

/* The pictures: the control the step is about is ringed. */
.shot .plate-frame { box-shadow: inset 0 1px 0 color-mix(in oklab, var(--chalk) 7%, transparent); }
.ring {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border-radius: 0.5rem; outline: 3px solid var(--signal); outline-offset: 3px; pointer-events: none;
}
/* The bar is too small to read across a phone: its left end, at size. */
@media (max-width: 47.99rem) {
  .plate--bar .plate-frame { overflow-x: auto; }
  .plate--bar img { width: auto; max-width: none; height: 3.25rem; }
}

/* Addresses to type, a link to copy. */
.addr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.9rem; }
.doc-sec .addr code { font-size: 1rem; padding: 0.5rem 0.8rem; }
.doc-sec p.url-line { margin-top: 0.6rem; font-size: 0.8rem; }
.doc-sec .url-line code { word-break: break-all; font-size: 0.78rem; }

/* Three ways to connect a Virtual Claimer. */
.ways { display: grid; gap: 1rem; margin-top: 1.25rem; }
.way { min-width: 0; padding: 1.25rem clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--rule); border-radius: var(--radius-card); background: color-mix(in oklab, var(--deck) 60%, transparent); }
.way h4 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--chalk); }
.way .note { margin-top: 1rem; }

/* You're ready: a list you tick. */
.checks { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.5rem; max-width: 52rem; }
.check {
  display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.8rem; align-items: start; min-height: 2.75rem;
  padding: 0.85rem 1rem; border: 1px solid var(--rule); border-radius: var(--radius-ctl); cursor: pointer;
  color: var(--steel); line-height: 1.6; transition: border-color var(--t-fast), background-color var(--t-fast);
}
.check input { margin-top: 0.3em; }
.check:has(input:checked) { color: var(--chalk); border-color: color-mix(in oklab, var(--signal) 40%, transparent); background: color-mix(in oklab, var(--signal) 6%, transparent); }

/* Troubleshooting: what you see, why, what to do. On a phone each row is a card. */
.doc-sec .fixes table { min-width: 0; }
.fix-k { display: none; }
@media (min-width: 48rem) { .fixes tbody th { width: 34%; } }
@media (max-width: 47.99rem) {
  .fixes thead { display: none; }
  .fixes table, .fixes tbody, .fixes tr, .fixes th, .fixes td { display: block; width: auto; }
  .fixes tr { padding: 1rem 1.1rem; border-bottom: 1px solid var(--rule); }
  .fixes tr:last-child { border-bottom: 0; }
  .doc-table.fixes th, .doc-table.fixes td { padding: 0; border: 0; }
  .fixes td { margin-top: 0.65rem; }
  .fix-k { display: block; margin-bottom: 0.15rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
}

/* ---- 404: one short message and the four ways back ------------------------- */
.nf { max-width: 54rem; padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(4rem, 3rem + 4vw, 7rem); }
.nf-code { margin: 0 0 1rem; font-family: var(--mono); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.2em; color: var(--tally); }
.nf-links { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 48rem) { .nf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nf-link {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.85rem; height: 100%;
  padding: 1.1rem 1.2rem; border-radius: var(--radius-card); color: var(--steel);
  border: 1px solid var(--rule-strong); background: color-mix(in oklab, var(--deck) 80%, transparent);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.nf-link:hover { color: var(--steel); border-color: color-mix(in oklab, var(--signal) 45%, transparent); background: color-mix(in oklab, var(--signal) 5%, var(--deck)); }
.nf-link .ic { margin-top: 0.15em; color: var(--signal); }
.nf-link b { display: block; color: var(--chalk); font-weight: 800; }
.nf-link b + span { display: block; margin-top: 0.2rem; font-size: 0.9rem; line-height: 1.5; color: var(--dim); }

/* ---- Atmosphere and motion ----------------------------------------------------
   The light at the top of the page carries on down it, in quieter pools behind
   the sections that matter; the hairlines between sections fade at their ends;
   a fine grain keeps the big gradients from banding. Motion has three authored
   moments: the hero's entrance, a line that draws through the four steps, and
   a light that follows the pointer across the cards. Everything else only
   fades in, and nothing moves under reduced motion. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --hairline: linear-gradient(90deg, transparent, var(--rule-strong) 16%, var(--rule-strong) 84%, transparent);
}

/* Grain: one fixed layer behind the content, over the backdrop. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--grain); background-size: 180px 180px; opacity: 0.1; mix-blend-mode: overlay;
}
/* Overlay leaves true black alone and only textures the gradients. Phones skip
   it, as they skip the drifting light: a blended full-screen layer costs
   more there than it gives. */
@media (max-width: 40rem) { body::after { display: none; } }

/* Section edges: a hairline that fades out at both ends. */
.sec { position: relative; isolation: isolate; border-top: 0; background: var(--hairline) top center / 100% 1px no-repeat; }
.sec--flush { background: none; }
.site-foot { border-top: 0; background: var(--hairline) top center / 100% 1px no-repeat; }

/* Pools of light behind the sections that carry the story. */
#how::before, #products::before, #features::before, #pricing::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
#how::before {
  background: radial-gradient(ellipse 46% 34% at 50% 52%, color-mix(in oklab, var(--haze) 42%, transparent), transparent 72%);
}
#products::before {
  background:
    radial-gradient(ellipse 30% 40% at 24% 62%, color-mix(in oklab, var(--signal-deep) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 30% 40% at 76% 62%, color-mix(in oklab, var(--azure-deep) 16%, transparent), transparent 70%);
}
#features::before {
  background: radial-gradient(ellipse 40% 42% at 66% 64%, color-mix(in oklab, var(--haze) 30%, transparent), transparent 72%);
}
#pricing::before {
  background: radial-gradient(ellipse 36% 38% at 32% 60%, color-mix(in oklab, var(--purse) 5%, transparent), transparent 70%);
}

/* The film of a claim sits on a low lime light. */
.showcase .plate-frame {
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--chalk) 8%, transparent),
    0 60px 140px -60px color-mix(in oklab, var(--signal-deep) 60%, var(--night)),
    0 30px 70px -36px color-mix(in oklab, var(--night) 92%, transparent);
}

/* The hero's entrance: the name, the promise, the action, then the live board. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.i18n-wait) .hero--home .h1-name { animation: enter-rise 1s var(--ease-glide) both; }
  .js:not(.i18n-wait) .hero--home .h1-line { animation: enter-rise 1s var(--ease-glide) 0.08s both; }
  .js:not(.i18n-wait) .hero--home .hero-lede { animation: enter-rise 0.9s var(--ease-glide) 0.18s both; }
  .js:not(.i18n-wait) .hero--home .hero-ctas { animation: enter-rise 0.9s var(--ease-glide) 0.26s both; }
  .js:not(.i18n-wait) .hero--home .hero-note { animation: enter-rise 0.9s var(--ease-glide) 0.32s both; }
  .js:not(.i18n-wait) .hero--home .hero-live { animation: enter-board 1.1s var(--ease-glide) 0.2s both; }
  .js:not(.i18n-wait) .home .proof { animation: enter-rise 1s var(--ease-glide) 0.42s both; }
}
@keyframes enter-rise { from { opacity: 0; transform: translate3d(0, 20px, 0); filter: blur(8px); } }
@keyframes enter-board { from { opacity: 0; transform: translate3d(28px, 0, 0) scale(0.98); filter: blur(6px); } }

/* The four steps: the line between them draws as they arrive. */
.js .station::after { transform: scaleY(0); transform-origin: top; transition: transform 1.1s var(--ease-glide); transition-delay: calc(var(--i, 0) * 140ms + 250ms); }
.js .station.is-in::after { transform: none; }
@media (min-width: 64rem) {
  .js .station::after { transform: scaleX(0); transform-origin: left; }
  .js .station.is-in::after { transform: none; }
}

/* A light under the pointer across the cards. */
@media (hover: hover) and (pointer: fine) {
  .spot::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 0%), color-mix(in oklab, var(--signal) 6%, transparent), transparent 42%);
    opacity: 0; transition: opacity 0.45s var(--ease-glide);
  }
  .spot:hover::after { opacity: 1; }
}

/* If the page script never runs, nothing stays hidden. */
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }
.js:not(.reveal-ready) [data-reveal] { animation: reveal-fallback 0.6s ease 2.5s forwards; }

/* The hero board keeps its height while the first claims load. */
.board--compact #live-rows { min-height: var(--board-rows, 24.85rem); }
.board--compact .board-skel { height: 3.1rem; margin: 0.85rem 1.2rem; border-radius: 0.6rem; }

/* ---- Colour and depth ---------------------------------------------------------
   The page is lit all the way down, not only at the top: pools of the brand's
   light at fixed points of the page, so scrolling moves through them. */
body {
  background:
    radial-gradient(58rem 40rem at 90% 21%, color-mix(in oklab, var(--azure-deep) 26%, transparent), transparent 70%),
    radial-gradient(66rem 46rem at 4% 40%, color-mix(in oklab, var(--haze) 40%, transparent), transparent 70%),
    radial-gradient(58rem 42rem at 94% 59%, color-mix(in oklab, var(--signal-deep) 20%, transparent), transparent 70%),
    radial-gradient(66rem 46rem at 8% 79%, color-mix(in oklab, var(--haze) 34%, transparent), transparent 70%),
    radial-gradient(60rem 36rem at 50% 99%, color-mix(in oklab, var(--signal-deep) 14%, transparent), transparent 70%),
    var(--night);
}

/* The hero stands on a lit floor that runs away from the viewer. */
.hero--home { position: relative; isolation: isolate; }
.hero--home::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: -6rem; height: 26rem;
  background-image:
    linear-gradient(color-mix(in oklab, var(--signal) 13%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--signal) 13%, transparent) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center bottom;
  transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
  mask-image: radial-gradient(ellipse 60% 85% at 50% 100%, black 20%, transparent 72%);
}

/* The real Rewards screen, lit and turned, behind the live board. */
.hero-stage { display: none; }
@media (min-width: 64rem) {
  .hero-live { position: relative; padding-top: 6.5rem; }
  .hero-stage {
    display: block; position: absolute; z-index: 0; top: -0.5rem; right: -0.5rem; width: 94%;
    border-radius: 1.1rem; overflow: hidden; pointer-events: none;
    transform: perspective(1600px) rotateY(-16deg) rotateX(7deg); transform-origin: 100% 0;
    border: 1px solid color-mix(in oklab, var(--chalk) 12%, transparent);
    box-shadow:
      0 60px 120px -40px color-mix(in oklab, var(--signal-deep) 55%, var(--night)),
      0 40px 80px -30px color-mix(in oklab, var(--night) 90%, transparent);
    mask-image: linear-gradient(to bottom, black 55%, transparent 96%);
  }
  .hero-stage img { display: block; width: 100%; height: auto; }
  .hero-live::before {
    content: ""; position: absolute; z-index: 0; inset: -12% 0 8% 4%; pointer-events: none;
    background: radial-gradient(ellipse 50% 46% at 66% 30%, color-mix(in oklab, var(--signal) 15%, transparent), transparent 70%);
  }
  .hero-stage::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, color-mix(in oklab, var(--night) 30%, transparent), transparent 50%);
  }
  .hero-live .board, .hero-live .hero-live-note { position: relative; z-index: 1; width: 86%; }
  .hero-live .board {
    box-shadow:
      inset 0 1px 0 color-mix(in oklab, var(--chalk) 7%, transparent),
      0 40px 90px -30px color-mix(in oklab, var(--night) 95%, transparent),
      0 0 0 1px color-mix(in oklab, var(--chalk) 6%, transparent);
    background: color-mix(in oklab, var(--deck) 97%, transparent);
  }
}

/* Speed as a picture: a code drops at zero, then each claimer's median. */
.track { position: relative; height: 6.25rem; margin: 1.1rem 0 0.4rem; }
.track-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
  background: linear-gradient(90deg, var(--rule-strong), color-mix(in oklab, var(--rule-strong) 30%, transparent));
}
.track-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill, 0%); border-radius: inherit;
  background: linear-gradient(90deg, var(--signal), var(--azure));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.5s var(--ease-glide) 0.35s;
}
.track.is-set .track-fill { transform: none; }
.track-mark { position: absolute; top: 50%; left: 0; display: flex; flex-direction: column; align-items: flex-start; }
.track-mark[data-at] { transition: left 1.5s var(--ease-glide) 0.35s; }
.track.is-set .track-mark[data-at] { left: var(--at, 0%); }
.track-dot {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 999px;
  background: var(--night); border: 2px solid var(--steel);
}
.track-mark[data-at] .track-dot { border-color: var(--signal); background: var(--signal); box-shadow: 0 0 0 4px color-mix(in oklab, var(--signal) 18%, transparent); }
.track-mark[data-at="virtual"] .track-dot { border-color: var(--azure); background: var(--azure); box-shadow: 0 0 0 4px color-mix(in oklab, var(--azure) 18%, transparent); }
.track-lbl { position: absolute; top: 0.9rem; left: -6px; white-space: nowrap; font-size: 0.82rem; color: var(--dim); }
.track-mark--up .track-lbl { top: auto; bottom: 0.9rem; }
.track-mark[data-at] .track-lbl { left: auto; right: auto; transform: translateX(-50%); }
.track-name { font-weight: 700; color: var(--steel); }
.track-val { margin-left: 0.3rem; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--chalk); }
.track-val b { font-weight: inherit; }

/* The finale: the mark, lit, over a stronger band of light. */
.cta-band {
  background:
    radial-gradient(ellipse 55% 75% at 50% 0%, color-mix(in oklab, var(--signal) 13%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 70% at 50% 115%, color-mix(in oklab, var(--azure-deep) 34%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--chalk) 4.5%, transparent), color-mix(in oklab, var(--chalk) 1%, transparent)),
    color-mix(in oklab, var(--deck) 72%, color-mix(in oklab, var(--haze) 12%, transparent));
}
.cta-mark {
  width: 4.75rem; height: 4.75rem; margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 28px color-mix(in oklab, var(--signal) 45%, transparent)) drop-shadow(0 10px 24px color-mix(in oklab, var(--night) 80%, transparent));
}

/* Touch: the same 44px rule theme.css applies to its own controls. */
@media (pointer: coarse) {
  .rail-list a, .lang-chip, .faq summary { min-height: 2.75rem; }
}