/* ============================================================
   GISTIL — THE CORE · v3
   Palette: near-black + gold on measurement, bone on action.
   Type: Bricolage Grotesque (display) / Source Serif 4
   (argument) / JetBrains Mono (data). The kern is WebGL;
   this file never fakes material.
   ============================================================ */

@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/BricolageGrotesque-var.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/JetBrainsMono-var.woff2') format('woff2');font-weight:100 800;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('../fonts/SourceSerif4-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('../fonts/SourceSerif4-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --bg:#07080A; --bg2:#0B0D11; --panel:#0F1116; --panel2:#14171C;
  --edge:#22262C; --edge2:#2E333B;
  --bone:#F2EEE6; --bone-dim:#C9C4BA; --mute:#8A9099; --mute2:#697077;
  --gold:#C9A227; --gold-bright:#DFBC55; --gold-deep:#8A6D1C;
  --worth:#3FA96A; --skip:#D2564A;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --axis-w:236px;          /* central column reserved for the core */
  --kern-half:56px;        /* half of the core's on-screen width */
  --gutter:clamp(24px,4.5vw,72px);
  --maxw:1480px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;position:relative;background:var(--bg);color:var(--bone-dim);
  font:400 16.5px/1.65 var(--serif);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
::selection{background:var(--gold);color:#0A0803}

h1,h2,h3{font-family:var(--display);color:var(--bone);margin:0;font-weight:800;letter-spacing:-.015em}
p{margin:0}
a{color:var(--bone-dim);text-decoration:none}
a:hover{color:var(--bone)}
img{display:block;max-width:100%}
.mono{font-family:var(--mono)}

.skip-link{position:fixed;left:12px;top:-48px;z-index:100;background:var(--gold);color:#0A0803;
  font:600 13px/1 var(--mono);padding:10px 16px;border-radius:4px;transition:top .2s}
.skip-link:focus{top:12px;color:#0A0803}

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

/* ============================ NAV ============================ */
.nav{position:fixed;inset:0 0 auto;z-index:40;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--edge) 60%,transparent)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);height:64px;
  display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:30px;height:30px}
.brand .word{font:800 17px/1 var(--display);color:var(--bone);letter-spacing:.14em}
.nav-links{display:flex;gap:22px;margin-left:8px}
.nav-links a{font:500 12.5px/1 var(--mono);letter-spacing:.04em;color:var(--mute);white-space:nowrap}
.nav-links a:hover{color:var(--bone)}
/* Blog and Pricing LEAVE this page; the other three jump inside it. Bone is
   this page's action colour, so the two that go somewhere are the two that
   look like they do — without a second weight, a box or an icon. */
.nav-links__out{color:var(--bone-dim)}
.nav-scrub{margin-left:auto;display:flex;align-items:baseline;gap:8px;
  font:500 12px/1 var(--mono);color:var(--mute2);letter-spacing:.05em}
.nav-scrub b{color:var(--gold);font-weight:500;min-width:5ch;text-align:right}
.nav-cta{font:600 12px/1 var(--mono);color:#0A0803;letter-spacing:.03em;background:var(--bone);
  border:1px solid var(--bone);border-radius:999px;padding:9px 16px;white-space:nowrap;cursor:default}

/* ============================================================
   ACCOUNT ENTRANCE — the one live control on this page
   ------------------------------------------------------------
   Bone is this page's action colour and gold its measurement
   colour. This button breaks that rule deliberately: every bone
   CTA here is inert ("coming soon"), so gold is what separates
   the control that actually does something today from the ones
   that only promise.
   It is built as INLAID metal rather than a filled pill — a seat
   cut into the dark with a bevelled gold edge, bright top facet
   and deep bottom facet, the same construction as the kern's
   veins. No sheen sweep, no metallic gradient: this file never
   fakes material.
   ============================================================ */
.acct{
  --acct-edge:color-mix(in srgb,var(--gold) 54%,transparent);
  --acct-wash:color-mix(in srgb,var(--gold) 9%,transparent);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  white-space:nowrap;cursor:pointer;color:var(--gold-bright);
  background:var(--acct-wash);border:1px solid var(--acct-edge);border-radius:999px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--gold-bright) 34%,transparent),
    inset 0 -1px 0 color-mix(in srgb,var(--gold-deep) 60%,transparent),
    0 10px 24px -18px color-mix(in srgb,var(--gold) 75%,transparent);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}
.acct:hover{
  --acct-edge:color-mix(in srgb,var(--gold-bright) 82%,transparent);
  --acct-wash:color-mix(in srgb,var(--gold) 17%,transparent);
  color:color-mix(in srgb,var(--gold-bright) 62%,var(--bone));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--gold-bright) 55%,transparent),
    inset 0 -1px 0 color-mix(in srgb,var(--gold-deep) 70%,transparent),
    0 12px 30px -16px color-mix(in srgb,var(--gold) 95%,transparent)}
.acct:active{transform:translateY(1px);
  box-shadow:
    inset 0 2px 5px -2px rgba(0,0,0,.85),
    inset 0 1px 0 color-mix(in srgb,var(--gold-bright) 22%,transparent)}
/* the product's own mark — the logo FILE, the same one that greets you on the
   other side. Never a typographic stand-in: a glyph that resembles the logo is
   not the logo. */
.acct__mark{width:17px;height:17px;flex:none;opacity:.72;transition:opacity .18s ease}
.acct:hover .acct__mark{opacity:1}

/* nav instance: geometry identical to the .nav-cta beside it, so the two pills
   read as one object in two materials — inert bone, live gold */
.acct--nav{font:600 12px/1 var(--mono);letter-spacing:.03em;padding:9px 16px}

/* end-of-page instance: the live sibling of the inert store button */
.acct--cta{font:700 13.5px/1 var(--mono);letter-spacing:.06em;padding:16px 30px}

/* ============================ CORE STAGE ============================ */
.stage{position:fixed;inset:0;z-index:1;pointer-events:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}

/* Axis rail: ticks, annotations, cutoff — one rigid world, one transform. */
.rail{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.rail-world{position:absolute;left:50%;top:0;width:0;will-change:transform}

.tick{position:absolute;right:calc(var(--kern-half) + 16px);height:1px;background:var(--edge2);width:10px}
.tick.maj{width:18px;background:#3A404A}
.tick-lab{position:absolute;right:calc(var(--kern-half) + 44px);transform:translateY(-52%);
  font:400 10.5px/1 var(--mono);color:var(--mute2);letter-spacing:.04em}

.rail-lead{position:absolute;top:-640px;height:614px;left:0;width:0;display:flex;flex-direction:column;align-items:center}
.rail-lead i{flex:1;width:0;border-left:1px dashed #33383F}
.rail-lead-lab{position:absolute;top:auto;bottom:12px;left:14px;white-space:nowrap;
  font:500 10.5px/1 var(--mono);color:var(--mute2);letter-spacing:.22em;writing-mode:vertical-rl}

.cutoff{position:absolute;left:calc(-1*var(--kern-half) - 30px);width:calc(var(--kern-half)*2 + 60px);
  border-top:1px dashed color-mix(in srgb,var(--gold) 66%,transparent)}
.cutoff span{position:absolute;left:calc(100% + 12px);top:-.7em;white-space:nowrap;
  font:500 11px/1 var(--mono);color:var(--gold);letter-spacing:.05em}

/* Callout labels riding the axis */
.callout{position:absolute;left:calc(var(--kern-half) + 14px);display:flex;align-items:center;gap:10px;
  transform:translateY(-50%);opacity:0;transition:opacity .45s ease,transform .45s ease}
.callout--left{left:auto;right:calc(var(--kern-half) + 14px);flex-direction:row-reverse}
.callout .dash{width:26px;height:1px;background:var(--gold);transform-origin:left;transform:scaleX(0);transition:transform .45s ease .05s}
.callout--left .dash{transform-origin:right}
.callout .txt{font:400 12.5px/1 var(--mono);color:var(--bone-dim);white-space:nowrap;letter-spacing:.02em}
.callout .txt b{color:var(--gold);font-weight:500}
.callout.is-on{opacity:1}
.callout.is-on .dash{transform:scaleX(1)}

/* Connector overlay */
.wires{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.wires path{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.9}
.wires circle{fill:var(--bg);stroke:var(--gold);stroke-width:1.6}

/* ============================ LAYOUT GRID ============================ */
main{position:relative;z-index:4;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) var(--axis-w) minmax(0,1fr);
  column-gap:34px}
.sec{grid-column:1;min-width:0;padding:6vh 0;align-self:center;scroll-margin-top:76px}
.sec--r{grid-column:3}
.sec--wide{grid-column:1 / -1;text-align:center}
/* The hero copy is ~490px tall and that is all the height the first row gets.
   It used to claim min-height:100vh: top-anchoring had already moved the dead
   air from above the pill to below the micro-line, where it sat as a black
   band between the hero and row 2 — 165px at 800 tall, 240px at 900, growing
   with the window. The core does not need the tall row either: 00:00 is
   pinned to the viewport centre at scroll 0, and the axis scale is derived
   from the document height, not the other way round. So the row is sized by
   content and row 2 rides up underneath, hinting there is a page to scroll.
   The remaining air under the nav is a decided number: ~100px at 700 tall,
   ~110 at 900, capped at 136. The pill and the verdict card share this
   padding, so their tops stay on the same line. */
.sec--hero{display:flex;flex-direction:column;justify-content:flex-start;
  padding-top:clamp(96px,calc(64px + 5vh),136px);padding-bottom:4vh}

.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px;
  font:500 11.5px/1 var(--mono);letter-spacing:.22em;color:var(--mute)}
.eyebrow .num{color:var(--gold)}
.eyebrow .rule{flex:0 1 64px;height:1px;background:var(--edge2)}
.eyebrow--center{justify-content:center}

.h2{font-size:clamp(26px,2.6vw,38px);line-height:1.12;margin-bottom:14px}
.h2--center{margin-bottom:8px}
.lede{font:400 17.5px/1.66 var(--serif);color:var(--bone-dim);max-width:52ch}
.lede b{color:var(--bone);font-weight:400;font-style:italic}
/* An outbound link inside prose has to look like one: bone-dim on bone-dim is
   invisible, and the two links that matter here lead off the site. */
.lede a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--edge2);text-underline-offset:3px}
.lede a:hover{text-decoration-color:var(--gold)}

/* ============================ HERO ============================ */
.pill{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;align-self:flex-start;
  font:500 11px/1 var(--mono);letter-spacing:.24em;color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 36%,transparent);border-radius:999px;padding:8px 15px}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
#hero h1{font-size:clamp(38px,4.3vw,62px);line-height:1.03;letter-spacing:-.028em;max-width:12ch}
.hero-sub{font:400 18.5px/1.6 var(--serif);color:var(--bone-dim);max-width:46ch;margin:22px 0 28px}
.btn{display:inline-flex;align-items:center;gap:10px;cursor:default;align-self:flex-start;
  font:700 14.5px/1 var(--display);letter-spacing:.01em;color:#0A0803;
  background:var(--bone);border:none;border-radius:999px;padding:16px 28px;
  box-shadow:0 10px 30px -14px rgba(242,238,230,.35)}
.btn-note{margin-top:12px;font:400 12px/1.5 var(--mono);color:var(--mute)}
.hero-micro{margin-top:26px;font:400 12.5px/1 var(--mono);color:var(--mute2);letter-spacing:.03em}
/* The one live install path in the hero — everything else there ("Add to
   Chrome") is still disabled, so this stays a plain badge link, not a second
   button, and sits quietly under the micro-line rather than competing with it. */
.hero-play{display:inline-block;margin-top:18px;align-self:flex-start;opacity:.92}
.hero-play:hover{opacity:1}
.hero-play img{display:block;width:130px;height:auto}

/* ============================ HERO CARD STACK (money shot) ============================ */
.cardstack{position:relative;margin-left:auto;width:min(440px,100%);min-height:480px}
.ycard{background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--edge);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 30px 70px -30px rgba(0,0,0,.9)}
.ycard--front{position:relative;z-index:2;width:min(400px,92%)}
.ycard--back{position:absolute;z-index:1;right:-10px;top:44px;width:min(340px,80%);
  transform:rotate(2.6deg);opacity:.55;filter:saturate(.8) brightness(.8)}
.ythumb{position:relative;aspect-ratio:16/9;
  background:radial-gradient(130% 150% at 22% 0%,#232833 0%,#141821 55%,#0B0D12 100%)}
/* Real pictures under the verdicts: a YouTube card with a blank grey thumb
   reads as an unfinished mockup, not as YouTube. Each still is graded to the
   page (near-black, amber on the worthy, cold and dim on the skip) and sits
   under a dark wash so the duration badge and the play glyph keep contrast.
   The 55:10 video appears twice — hero back card and third verdict row — so
   both point at the same file. */
.ycard--front .ythumb{background:linear-gradient(180deg,rgba(7,8,10,.06),rgba(7,8,10,.42) 92%),
  url('../img/thumbs/hero_learn.webp') center/cover}
.ycard--back .ythumb{background:linear-gradient(180deg,rgba(7,8,10,.18),rgba(7,8,10,.55) 92%),
  url('../img/thumbs/verdict_45.webp') center/cover}
.ythumb--lit::before{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 42%,rgba(255,244,214,.045) 50%,transparent 58%)}
.play{position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-50%,-50%);
  border-left:16px solid #4A515C;border-top:10px solid transparent;border-bottom:10px solid transparent}
.ybar{position:absolute;left:0;bottom:0;height:3px;width:34%;background:#C33F33}
.dur{position:absolute;right:8px;bottom:8px;font:500 11px/1 var(--mono);color:var(--bone-dim);
  background:rgba(0,0,0,.72);border-radius:4px;padding:4px 6px}
.ytitle{padding:14px 18px 12px;font:700 16px/1.35 var(--display);color:var(--bone);letter-spacing:-.01em}
.ytitle span{display:block;margin-top:4px;font:400 11.5px/1 var(--mono);color:var(--mute2);letter-spacing:.04em}
.gpanel{display:flex;align-items:center;gap:16px;padding:14px 18px 16px;border-top:1px solid var(--edge)}
.gring{width:76px;height:76px;flex:0 0 auto}
.gring-base{fill:none;stroke:var(--edge2);stroke-width:5}
.gring-arc{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round}
.gring-num{font:800 26px/1 var(--display);fill:var(--bone);letter-spacing:-.02em}
.gp-main{display:flex;flex-direction:column;gap:9px;align-items:flex-start;min-width:0}
.gp-score{font:800 34px/1 var(--display);color:var(--bone)}
.gp-meta{font:400 11.5px/1.4 var(--mono);color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.gp-meta b{color:var(--gold);font-weight:500}
.jump{margin-left:auto;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font:600 12px/1 var(--mono);color:var(--gold);letter-spacing:.04em;
  border:1px solid color-mix(in srgb,var(--gold) 42%,transparent);border-radius:999px;padding:10px 14px}
.jump img{width:16px;height:auto}
.ycard--back .gpanel{gap:12px;padding:12px 16px}
.ycard--back .gp-score{font-size:28px}
.ycard--back .gp-meta{text-transform:none;letter-spacing:.04em}

/* ============================ SHARED CHIPS ============================ */
.chip{display:inline-flex;align-items:center;gap:7px;justify-self:start;
  font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--edge2);border-radius:999px;padding:6px 11px;color:var(--bone-dim)}
.chip i{width:6px;height:6px;border-radius:50%}
.chip--worth i{background:var(--worth)}
.chip--skim i{background:var(--gold)}
.chip--skip i{background:var(--skip)}

/* ============================ VERDICT ROWS ============================ */
.verdicts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.vcard{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:center;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--edge);border-radius:12px;padding:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 34px -20px rgba(0,0,0,.8);
  transition:transform .3s ease,border-color .3s ease}
.vcard:hover{transform:translateY(-3px);border-color:var(--edge2)}
.thumb{position:relative;aspect-ratio:16/9;border-radius:7px;overflow:hidden;
  background:radial-gradient(120% 140% at 20% 0%,#20242B 0%,#13161B 55%,#0C0E12 100%)}
.thumb::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-50%,-50%);
  border-left:11px solid #454B55;border-top:7px solid transparent;border-bottom:7px solid transparent}
#vcard-1 .thumb{background:linear-gradient(180deg,rgba(7,8,10,.08),rgba(7,8,10,.45) 92%),
  url('../img/thumbs/verdict_92.webp') center/cover}
#vcard-2 .thumb{background:linear-gradient(180deg,rgba(7,8,10,.08),rgba(7,8,10,.45) 92%),
  url('../img/thumbs/verdict_68.webp') center/cover}
#vcard-3 .thumb{background:linear-gradient(180deg,rgba(7,8,10,.16),rgba(7,8,10,.5) 92%),
  url('../img/thumbs/verdict_45.webp') center/cover}
.thumb .dur{right:6px;bottom:6px;font-size:10.5px}
.vbody{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;gap:6px 12px;align-items:center}
.vbody .chip{grid-column:1}
.vscore{grid-column:2;grid-row:1 / span 2;font:800 38px/1 var(--display);color:var(--bone);justify-self:end}
.vprog{grid-column:1;position:relative;height:4px;border-radius:2px;background:var(--edge);overflow:visible}
.vprog b{position:absolute;inset:0 auto 0 0;border-radius:2px;background:var(--edge2)}
.vprog i{position:absolute;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 25%,transparent)}
.vmeta{grid-column:1 / -1;display:flex;justify-content:space-between;
  font:400 11px/1 var(--mono);color:var(--mute);letter-spacing:.12em;text-transform:uppercase}
.vmeta b{color:var(--gold);font-weight:500;letter-spacing:.02em}

/* ============================ DENSITY CHART ============================ */
.density{margin-top:26px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--edge);border-radius:12px;padding:26px 20px 14px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 34px -20px rgba(0,0,0,.8)}
.dbars{position:relative;display:flex;align-items:flex-end;gap:3px;height:148px}
.dbar{flex:1;min-width:0;background:#2A2F37;border-radius:1.5px 1.5px 0 0;transform-origin:bottom}
.dbar.gold{background:var(--gold)}
.dbar:hover{filter:brightness(1.25)}
.dcut{position:absolute;left:-8px;right:-8px;border-top:1px dashed color-mix(in srgb,var(--gold) 65%,transparent)}
.dcut span{position:absolute;right:0;top:-19px;font:500 10.5px/1 var(--mono);color:var(--gold);letter-spacing:.06em;
  background:rgba(15,17,22,.88);border-radius:3px;padding:3px 6px}
.dmark{position:absolute;bottom:100%;transform:translateX(-50%);margin-bottom:6px;text-align:center}
.dmark i{display:block;width:7px;height:7px;margin:4px auto 0;border-radius:50%;background:var(--gold)}
.dmark span{font:500 11px/1 var(--mono);color:var(--gold);white-space:nowrap;letter-spacing:.04em}
.daxis{position:relative;height:22px;margin-top:8px}
.daxis i{position:absolute;top:0;width:1px;height:6px;background:var(--edge2)}
.daxis span{position:absolute;top:9px;transform:translateX(-50%);font:400 10.5px/1 var(--mono);color:var(--mute2)}
.daxis span.first{transform:none}
.daxis span.last{transform:translateX(-100%)}
.dlegend{list-style:none;display:flex;gap:22px;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--edge);
  font:400 11.5px/1 var(--mono);color:var(--mute);letter-spacing:.04em}
.dlegend li{display:flex;align-items:center;gap:8px}
.dlegend i{width:9px;height:9px;border-radius:2px;background:#2A2F37}
.dlegend i.g{background:var(--gold)}
.dlegend i.c{height:0;border-top:1px dashed var(--gold);border-radius:0}
.corelog{list-style:none;margin:22px 0 0;padding:0;display:none;flex-direction:column;gap:8px;
  font:400 13px/1.6 var(--mono);color:var(--mute)}
.corelog .tc{color:var(--gold)}

/* ============================ HOW / STEPS ============================ */
.steps{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.step{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--edge);
  border-radius:12px;padding:14px 20px 16px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 34px -20px rgba(0,0,0,.8)}
.step .k{font:500 10.5px/1 var(--mono);color:var(--gold);letter-spacing:.18em;margin:0 0 7px}
.step h3{display:inline;font-size:16.5px;font-weight:700;margin:0 8px 0 0;letter-spacing:-.01em}
.step p{display:inline;font:400 14.5px/1.55 var(--serif);color:var(--mute)}

/* ============================ HONESTY ============================ */
.honesty{margin-top:26px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--edge);border-left:3px solid var(--gold);border-radius:12px;padding:24px 26px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 34px -20px rgba(0,0,0,.8);max-width:560px}
.honesty-top{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.honesty-num{font:800 54px/1 var(--display);color:var(--bone)}
.honesty p{font:400 16.5px/1.65 var(--serif);color:var(--bone-dim);max-width:40ch}
.kicker{margin-top:22px;font:italic 400 21px/1.5 var(--serif);color:var(--bone);max-width:30ch}
.kicker em{font-style:normal;color:var(--gold);white-space:nowrap}

/* ============================ CTA (core end) ============================ */
#cta{padding-top:5vh;padding-bottom:5vh;display:flex;flex-direction:column;align-items:center}
.cta-logo{width:96px;height:96px;filter:drop-shadow(0 10px 34px rgba(0,0,0,.6))}
.cta-tag{margin:20px 0 26px;font:500 12px/1 var(--mono);color:var(--gold);letter-spacing:.4em}
#cta .btn{align-self:center;margin-top:20px}
.cta-micro{margin-top:20px;font:400 12.5px/1.7 var(--mono);color:var(--mute2)}
/* the account entrance, hung off the store CTA as its live alternative */
.cta-alt{display:flex;flex-direction:column;align-items:inherit;margin-top:30px}
.cta-or{display:flex;align-items:center;gap:12px;margin-bottom:18px;
  font:500 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mute2)}
.cta-or i{display:block;width:34px;height:1px;background:var(--edge2)}
.cta-alt .btn-note{max-width:46ch}

/* ============================ THE APP ============================ */
/* Same panels and eyebrow as the rest of the page — the app section is another
   section, not a second design. Only the store badge is foreign, and it has to
   be: Google ships that artwork and its shape is not ours to restyle. */
/* #score, #goals, #who, #extension and #rights are the same section shape as
   #app — one rule, six sections, so a change to the wide-centred column can
   never drift apart. */
#app,#score,#goals,#who,#extension,#rights{padding-top:5vh;padding-bottom:6vh;display:flex;flex-direction:column;align-items:center;text-align:center}
#rights{padding-bottom:4vh}
.lede--center{margin-inline:auto;text-align:center;max-width:58ch}
.app-steps{width:100%;max-width:840px;text-align:left}
/* The prose that follows the cards: same lede voice, one notch quieter, and
   held to the width of the card block above it so the column reads as one. */
.app-note{margin-top:26px;font-size:16px;max-width:66ch}

.stores{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:10px}
/* Live link to the Google Play listing — the app shipped 2026-08-16. */
.store{display:inline-flex;align-items:center;gap:12px}
.store img{display:block;width:180px;height:auto}
/* The label is two words and the rules on either side will happily break it. */
#app .eyebrow .label,#score .eyebrow .label,#goals .eyebrow .label,#who .eyebrow .label,#extension .eyebrow .label,#rights .eyebrow .label{white-space:nowrap}
.store__note{max-width:46ch;text-align:center}
/* The store lines of the extension: no artwork exists for a listing that is not
   live, so the status is set in the same mono note the app section uses. */
.storelines{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:8px}
.storelines .btn-note{margin-top:0}

/* ============================ FAQ ============================ */
#faq{padding-top:4vh;padding-bottom:6vh}
#faq .h2--center{margin-bottom:26px}
.faq{margin:0 auto;max-width:1100px;text-align:left;
  display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
.faq details{border-bottom:1px solid var(--edge);padding:4px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:14px;padding:12px 0;
  font:700 15.5px/1.4 var(--display);color:var(--bone);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{margin-left:auto;flex:0 0 auto;position:relative;top:2px;width:12px;height:12px;color:var(--gold)}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;background:currentColor;transition:transform .3s ease}
.faq summary .plus::before{left:0;top:5px;width:12px;height:2px}
.faq summary .plus::after{left:5px;top:0;width:2px;height:12px}
.faq details[open] summary .plus::after{transform:scaleY(0)}
.faq-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s ease}
.faq-body>div{overflow:hidden}
.faq-body p{font:400 14.5px/1.6 var(--serif);color:var(--mute);padding:0 24px 14px 0;max-width:58ch}
.faq details:not([open]) .faq-body{grid-template-rows:0fr}

/* ============================ FOOTER ============================ */
footer{position:relative;z-index:6;border-top:1px solid var(--edge);
  background:linear-gradient(180deg,#08090C,#050607)}
.fwrap{max-width:var(--maxw);margin:0 auto;padding:38px var(--gutter) 24px}
/* brand · on this page · product · legal — the last two are the same set,
   under the same headings, as shared/_site_footer on every other page. */
.fcols{display:grid;grid-template-columns:minmax(220px,1.25fr) 1fr 1fr .8fr;gap:34px;margin-bottom:30px}
.fcol h4{font:500 11px/1 var(--mono);letter-spacing:.24em;color:var(--mute);margin:0 0 16px;text-transform:uppercase}
.fcol p{font:400 14.5px/1.65 var(--serif);color:var(--mute);max-width:34ch}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fcol a,.fcol .soon{font:400 13.5px/1.4 var(--serif);color:var(--bone-dim)}
.fcol .soon{color:var(--mute)}
.fcol .soon em{font-style:normal;color:var(--mute2);font-family:var(--mono);font-size:11px}
.fbrandrow{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.fbrandrow img{width:34px;height:34px}
.fbrandrow span{font:800 16px/1 var(--display);color:var(--bone);letter-spacing:.14em}
.fbot{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;border-top:1px solid var(--edge);
  padding-top:20px;font:400 11.5px/1.6 var(--mono);color:var(--mute2)}
/* The trademark line: same mono voice as .fbot, but its own paragraph — it is
   two sentences and must not fight the copyright line for the same row. */
.fdisc{margin-top:14px;max-width:104ch;font:400 11.5px/1.7 var(--mono);color:var(--mute2)}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1150px){
  :root{--axis-w:170px}
  #hero h1{font-size:clamp(34px,4.4vw,52px)}
  .tick-lab{display:none}
  .callout .txt{font-size:11.5px}
  .cardstack{width:min(400px,100%)}
}
@media (max-width:900px){
  /* Axis docks to the left edge; content becomes one column. */
  :root{--axis-w:0px;--kern-half:32px}
  main{grid-template-columns:1fr;padding-left:calc(var(--gutter) + 66px)}
  .sec,.sec--r{grid-column:1 !important;grid-row:auto !important;padding:3.5vh 0}
  .sec--wide{grid-column:1 !important;text-align:left}
  #hero{padding-top:calc(64px + 6vh);padding-bottom:2vh}
  #hero-card{padding-top:2vh}
  .cardstack{margin:0;min-height:0}
  .ycard--back{display:none}
  .ycard--front{width:min(400px,100%)}
  #cta{padding-top:7vh;align-items:flex-start}
  #cta .btn{align-self:flex-start}
  .eyebrow--center{justify-content:flex-start}
  .faq{grid-template-columns:1fr;max-width:640px;margin:0}
  .rail-world{left:44px}
  .tick{right:auto;left:calc(-1*var(--kern-half) - 16px);width:8px}
  .tick.maj{width:14px}
  .cutoff span{display:none}
  .callout,.callout--left{left:calc(var(--kern-half) + 10px);right:auto;flex-direction:row}
  .callout--left .dash{transform-origin:left}
  .callout .txt{background:rgba(7,8,10,.82);padding:4px 7px;border-radius:4px}
  .nav-scrub{display:none}
  /* an inert pill is not worth a cramped nav: below 900 the links stop
     wrapping mid-phrase and the coming-soon chip yields the room */
  .nav-cta{display:none}
  .nav-links{margin-left:auto;gap:14px}
  .nav-links a{font-size:11px}
  .fcols{grid-template-columns:1fr 1fr;gap:32px 40px}
  /* one column, one spine: every eyebrow reads "NN Label ——" flush left,
     no leading rule faking an indent */
  .eyebrow .rule:first-child{display:none}
  /* the app section joins the single left-aligned column like everything
     else on a narrow screen (CTA and FAQ are already left) */
  #app,#score,#goals,#who,#extension,#rights{align-items:flex-start;text-align:left;padding-top:4vh;padding-bottom:3.5vh}
  .storelines{align-items:flex-start}
  .lede--center{margin-inline:0;text-align:left}
  .h2--center{margin-bottom:14px}
  .stores{align-items:flex-start}
  .store__note{text-align:left}
  #cta{padding-bottom:3.5vh}
  #faq{padding-top:2.5vh}
  /* the lone hero card can carry more width than the 400px it inherits
     from the two-column layout */
  .cardstack,.ycard--front{width:min(480px,100%)}
  /* the footer keeps the same left text spine as the column above it */
  .fwrap{padding-left:calc(var(--gutter) + 66px)}
}
@media (max-width:620px){
  :root{--kern-half:26px}
  main{padding-left:calc(var(--gutter) + 40px)}
  .rail-world{left:30px}
  .brand .word{display:none}
  .daxis span:not(.first):not(.last){display:none}
  .dcut span{display:none}
  .dmark span{display:none}
  .callout{display:none}
  .corelog{display:flex}
  .vcard{grid-template-columns:96px 1fr;gap:14px}
  .vscore{font-size:34px}
  .gpanel{flex-wrap:wrap;gap:12px}
  .jump{margin-left:0}
  /* the live account pill stays — on a phone it is the only thing in the
     nav that leads anywhere */
  .acct--nav{padding:8px 13px;font-size:11.5px;letter-spacing:.02em}
  .nav-in{gap:12px}
  /* On a phone the in-page anchors are the cheapest thing in this row — the
     page is one scroll and the footer indexes every section anyway. What a
     phone CANNOT otherwise reach is the rest of the site, so at this width the
     anchors yield and the two destinations stay. Measured, not guessed: with
     all five present the sign-in pill ran 10px past a 390px viewport. */
  .nav-links a:not(.nav-links__out){display:none}
  .nav-links{gap:14px}
  .nav-links a{font-size:11px;letter-spacing:.02em}
  .fcols{grid-template-columns:1fr}
  .fwrap{padding-left:calc(var(--gutter) + 40px)}
  .cta-logo{width:72px;height:72px}
}

/* ============================ NO-JS / REDUCED MOTION ============================ */
/* Without JS there is no WebGL: show the pre-baked core strip.
   On wide screens it is a grid item spanning rows 1–3, so it ends
   exactly where the core ends; on phones a capped, fading strip. */
.kern-fallback{display:none;position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:112px;height:auto;max-height:100%;opacity:.95}
.kern-fallback-wrap{display:none}
.no-js .stage{position:absolute;inset:0;overflow:hidden}
/* zero-footprint grid cell: rows are sized by the sections alone,
   the strip stretches to whatever rows 1–3 add up to */
.no-js .kern-fallback-wrap{display:block;grid-column:2;grid-row:1 / 4;justify-self:center;
  position:relative;width:112px;min-height:0}
.no-js .kern-fallback-grid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;opacity:.95}
.no-js .rail,.no-js .wires,.no-js .nav-scrub{display:none}
@media (max-width:900px){
  .no-js .kern-fallback-wrap{display:none}
  .no-js .kern-fallback{display:block;left:44px;transform:none;width:64px;top:38vh;height:220vh;
    object-fit:cover;object-position:center top;
    -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);
    mask-image:linear-gradient(180deg,#000 82%,transparent)}
}
@media (max-width:620px){
  .no-js .kern-fallback{left:30px;width:52px}
}

@media (prefers-reduced-motion:reduce){
  .callout,.callout .dash,.vcard,.faq-body,.faq summary .plus::before,.faq summary .plus::after,
  .acct,.acct__mark{transition:none}
}