/* Layout: same shell as oceantoken.ai (cream light / abyss dark, Bricolage + Martian Mono), single-column ad landing with one CTA per band.
   Colour (src/site/COLOR.md): the build appends the colour-role tokens (saving bands, ours, official, hot, focus) in both
   schemes, and discount-badge.css. A colour here plays one of those roles, or is the accent of a button, a link or a
   selected control; everything else is the ink ladder. Code-syntax colours in the code blocks stay as they are. */
:root{
  --bg:#e9eeeb; --bg-alt:#e0e8e4; --surface:#f4f8f6; --surface-2:#e2eae6;
  --ink:#062a30; --text:#2f4a4f; --muted:#4c6468; --faint:#53676a;
  --line:#cbdad4; --line-2:#b3c8c1;
  --accent:#007463; --accent-ink:#006760; --accent-soft:#d4eae5;
  --solid:#062a30; --on-solid:#ffffff; --solid-hover:#006760;
  --band:#062a30; --band-text:#a6c2be; --band-ink:#e6f6f2; --band-accent:#5ef2d6; --band-line:#1b414b;
  --code-bg:#03181d; --code-text:#a6c2be;
  --sans:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:12px; --container:1320px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#03181d; --bg-alt:#041d23; --surface:#06222a; --surface-2:#092a33;
  --ink:#e6f6f2; --text:#a6c2be; --muted:#7f9e9a; --faint:#7a9a96;
  --line:#12313a; --line-2:#1b414b;
  --accent:#5ef2d6; --accent-ink:#5ef2d6; --accent-soft:#0b3540;
  --solid:#5ef2d6; --on-solid:#021014; --solid-hover:#e6f6f2;
  --band:#072a31; --band-text:#a6c2be; --band-ink:#e6f6f2; --band-accent:#5ef2d6; --band-line:#1b414b;
  --code-bg:#0a2f37; --code-text:#a6c2be; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#03181d; --bg-alt:#041d23; --surface:#06222a; --surface-2:#092a33;
  --ink:#e6f6f2; --text:#a6c2be; --muted:#7f9e9a; --faint:#7a9a96;
  --line:#12313a; --line-2:#1b414b;
  --accent:#5ef2d6; --accent-ink:#5ef2d6; --accent-soft:#0b3540;
  --solid:#5ef2d6; --on-solid:#021014; --solid-hover:#e6f6f2;
  --band:#072a31; --band-text:#a6c2be; --band-ink:#e6f6f2; --band-accent:#5ef2d6; --band-line:#1b414b;
  --code-bg:#0a2f37; --code-text:#a6c2be; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans)}
img,video{max-width:100%;display:block}
a{color:var(--accent-ink)}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ot-focus);outline-offset:2px;border-radius:6px}
h1,h2,h3{color:var(--ink);font-family:var(--sans);text-wrap:balance;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(34px,5.2vw,56px);line-height:1.05;font-weight:700}
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.1;font-weight:700}
h3{font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.eyebrow{font:400 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.wrap{max-width:var(--container);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media(min-width:720px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
section{padding-block:72px}
section+section{border-top:1px solid var(--line)}
/* The sections beside "On this page" (site/toc.css, render.js withToc): the rule under the hero stays. */
.toc-flow{border-top:1px solid var(--line)}
.lede{font-size:18px;max-width:60ch;color:var(--text)}
.sec-head{display:grid;gap:12px;margin-bottom:32px;max-width:760px}
.sec-head p{max-width:62ch}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none}
.logo-svg{height:30px;width:auto;display:block}
.hdr nav{display:flex;gap:20px;margin-left:auto;align-items:center}
.hdr nav a.lnk{color:var(--text);text-decoration:none;font-size:14px;font-weight:500}
.hdr nav a.lnk:hover{color:var(--ink)}
@media(max-width:640px){.hdr nav a.lnk{display:none}.logo-svg{height:22px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:999px;font:600 16px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn-s{height:38px;padding:0 16px;font-size:14px}
.btn-solid{background:var(--solid);color:var(--on-solid)}
.btn-solid:hover{background:var(--solid-hover)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-note{font-size:13px;color:var(--muted)}

/* hero */
.hero{padding-block:56px 64px}
.hero-grid{display:grid;gap:40px;grid-template-columns:1fr}
@media(min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr;align-items:center}}
.hero-copy{display:grid;gap:22px;min-width:0}
.hero h1 em{font-style:normal;color:var(--accent-ink)}
/* A headline whose emphasis is a saving: that saving's band (render.js heroSave); our price keeps the accent above. */
.hero-copy.is-save-low h1 em{color:var(--ot-save-low-ink)}.hero-copy.is-save-mid h1 em{color:var(--ot-save-mid-ink)}.hero-copy.is-save-high h1 em{color:var(--ot-save-high-ink)}
/* The HOT tag (discount-badge.css .ot-hot) after an eyebrow or a model's name. */
:is(.eyebrow,.lab) .ot-hot{margin-left:8px;vertical-align:1px}
/* The sign-up offer: a promotion, not a price or a saving, so no colour role (no "pop" highlight): the ink ladder. */
.offer{max-width:60ch;padding:12px 16px;border-left:3px solid var(--line-2);background:var(--surface);border-radius:0 var(--r) var(--r) 0;font-size:15px;color:var(--text)}
.offer b{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;color:var(--text)}
.chip b{color:var(--ink);font-weight:600}
.chip .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted);margin-right:7px;vertical-align:middle}

/* price ticket in hero */
.ticket{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0}
.ticket-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.ticket table{width:100%;border-collapse:collapse}
.ticket th,.ticket td{padding:14px 20px;text-align:right;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.ticket th:first-child,.ticket td:first-child{text-align:left}
.ticket th{font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ticket td{font:500 15px/1.3 var(--mono);color:var(--ink)}
.ticket td.ref{color:var(--muted);font-weight:400}
/* The ticket is a price comparison (COLOR.md): the official column struck through in the official tone, ours marked as
   ours (the mint line over its head, the mint wash) with our price in the strongest ink. */
.ticket th.off{color:var(--ot-official)}
.ticket td.off{color:var(--ot-official);text-decoration:line-through;text-decoration-color:currentColor;font-weight:400}
.ticket th.ours{background:var(--ot-ours-head);color:var(--ot-ours-head-ink);box-shadow:inset 0 2px 0 var(--ot-ours)}
.ticket td.ours{background:var(--ot-ours-wash);color:var(--ink);font-weight:700;font-size:17px}
.ticket tr:last-child td{border-bottom:0}
@media(max-width:520px){.ticket th,.ticket td{padding:12px 10px}.ticket td{font-size:13px}.ticket td.ours{font-size:15px}.ticket th{font-size:12px;letter-spacing:.04em}.ticket-head{flex-wrap:wrap}}
.ticket-foot{padding:12px 20px;background:var(--surface-2);font-size:13px;color:var(--muted)}
/* A label chip ("Tier 1", a mock screen's status): no meaning beyond its words, so neutral. A saving is the pill. */
.save-badge{white-space:nowrap;display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2);font:600 12px/1.2 var(--mono)}
.unit{font:400 12px/1.3 var(--sans);color:var(--muted);display:block}

/* $10 calculator */
.calc{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:900px){.calc{grid-template-columns:340px 1fr}}
.calc-ctl{display:grid;gap:18px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;min-width:0}
.calc-ctl label{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.amounts{display:flex;flex-wrap:wrap;gap:8px}
.amounts button,.seg button{font:600 14px/1 var(--sans);height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer}
.amounts button[aria-pressed="true"],.seg button[aria-pressed="true"]{background:var(--solid);color:var(--on-solid);border-color:var(--solid)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.calc-out{display:grid;gap:12px;min-width:0}
.bar-row{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:14px;align-items:center}
@media(max-width:560px){.bar-row{grid-template-columns:1fr;gap:6px}}
.bar-lab{font-size:14px;color:var(--text)}
.bar-lab b{display:block;color:var(--ink);font-weight:600}
.bar{display:flex;align-items:center;gap:10px;height:40px;min-width:0}
/* Ours against the official price: our bar in the ours colour, the official one in the official tone. */
.bar i{display:block;height:100%;flex:none;background:var(--ot-official);border-radius:6px;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.bar.is-ours i{background:var(--ot-ours)}
.bar span{font:600 14px/1 var(--mono);color:var(--ink);white-space:nowrap}
.bar.is-ours span{color:var(--ink)}
.calc-sum{font-size:15px;color:var(--text);padding-top:6px}
.calc-sum b{color:var(--ink)}

/* result tiles */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.tile{display:grid;gap:6px;align-content:start;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);min-width:0}
.tile-n{font:700 clamp(26px,3vw,34px)/1.05 var(--mono);color:var(--ink);letter-spacing:-.02em}
.tile-s{font-size:13px;color:var(--muted)}

/* reason cards */
.reasons{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:820px){.reasons{grid-template-columns:repeat(3,1fr)}}
.reason{display:grid;gap:10px;align-content:start;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);min-width:0}
.reason .big{font:700 30px/1 var(--mono);color:var(--ink);letter-spacing:-.02em}
.reason.is-save-low .big{color:var(--ot-save-low-ink)}.reason.is-save-mid .big{color:var(--ot-save-mid-ink)}.reason.is-save-high .big{color:var(--ot-save-high-ink)}
.reason p{font-size:15px}

/* tiers */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.tiers{width:100%;border-collapse:collapse;min-width:600px}
table.tiers th,table.tiers td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-variant-numeric:tabular-nums}
table.tiers thead th{font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--surface-2)}
/* The top-up line under each tier name: a <small> would shrink to 10px; it keeps the header's 12px. */
table.tiers thead th small{font-size:12px}
table.tiers td.p{font:500 14px/1.4 var(--mono);color:var(--ink)}
table.tiers td.lab{color:var(--ink);font-weight:600}
table.tiers td.lab small{display:block;font-weight:400;color:var(--muted);font-size:13px}
table.tiers tr:last-child td{border-bottom:0}
.tier-cards{display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:20px}
@media(min-width:820px){.tier-cards{grid-template-columns:repeat(3,1fr)}}
.tier{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);display:grid;gap:6px;align-content:start;min-width:0}
.tier.is-you{border-color:var(--accent);background:var(--accent-soft)}
.tier .t{font:600 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tier.is-you .t{color:var(--accent-ink)}
.tier .k{font-size:20px;font-weight:700;color:var(--ink)}
.tier p{font-size:14px}

/* compare slider */
.cmp{margin-inline:auto;max-width:960px;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;max-width:100%;background:var(--surface-2);user-select:none;touch-action:pan-y}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .top{clip-path:inset(0 0 0 var(--x,50%))}
.cmp .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;transform:translateX(-1px)}
.cmp .knob{position:absolute;top:50%;left:var(--x,50%);width:48px;height:48px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);display:grid;place-items:center;box-shadow:0 2px 10px #0006;color:#062a30;font:700 14px/1 var(--mono)}
.cmp .tag{position:absolute;bottom:12px;padding:6px 10px;border-radius:8px;background:#062a30d9;color:#fff;font:600 12px/1.3 var(--sans)}
.cmp .tag small{display:block;font-weight:400;opacity:.85}
.cmp .tag.l{left:12px}.cmp .tag.r{right:12px;text-align:right}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cap{font-size:13px;color:var(--muted);margin-top:10px}
.cmp+.cap{max-width:960px;margin-inline:auto}

/* choose table */
.choose{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:820px){.choose{grid-template-columns:1fr 1fr}}
.opt{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);display:grid;gap:14px;align-content:start;min-width:0}
.opt h3{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.opt dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:14px}
.opt dt{color:var(--muted);font:500 12px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.opt dd{margin:0;color:var(--ink);min-width:0}
.fit{display:grid;gap:6px;font-size:14px;padding:0;margin:0;list-style:none}
.fit li{display:flex;gap:8px}
.fit li::before{content:"✓";color:var(--ink);font-weight:700}
.fit.no li::before{content:"✕";color:var(--muted)}

/* proof band (dark in both themes) */
.band{background:var(--band);color:var(--band-text)}
.band h2,.band h3{color:var(--band-ink)}
.band .eyebrow{color:var(--band-accent)}
.band section,.band{border-top:0}
.proof{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:900px){.proof{grid-template-columns:1fr 1fr;align-items:center}}
.idcard{border:1px solid var(--band-line);border-radius:var(--r);padding:20px;font:400 13px/1.8 var(--mono);color:var(--band-text);overflow-x:auto;min-width:0}
.idcard .row{display:grid;grid-template-columns:15ch 1fr;gap:12px}
@media(max-width:520px){.idcard .row{grid-template-columns:1fr;gap:0;margin-bottom:6px}}
.idcard .k{color:#7f9e9a}
.idcard .v{color:var(--band-ink)}
.idcard .hl{color:var(--band-accent);font-weight:600}
.band ul.fit li::before{color:var(--band-ink)}
.band .fit{color:var(--band-text);font-size:15px}

/* code */
@media(max-width:520px){pre.code{font-size:12px;padding:16px}}
pre.code{background:var(--code-bg);color:var(--code-text);border-radius:var(--r);padding:20px;overflow-x:auto;font:400 13px/1.7 var(--mono);margin:0;border:1px solid var(--line-2)}
pre.code .s{color:#5ef2d6}.pre.code .c{color:#7a9a96}
pre.code .c{color:#7a9a96}
.code-grid{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:900px){.code-grid{grid-template-columns:.9fr 1.1fr;align-items:start}}
.code-grid>*{min-width:0}
.steps{display:grid;gap:16px;list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;counter-increment:s}
.steps li::before{content:counter(s);width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font:600 13px/1 var(--mono);color:var(--ink)}
.steps b{color:var(--ink);display:block}

/* faq */
.faq{display:grid;gap:0;border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:600;color:var(--ink);font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding-top:10px;display:grid;gap:10px;max-width:70ch}

/* final cta */
.final{background:var(--bg-alt)}
.final .wrap{display:grid;gap:18px;justify-items:start}
.foot{padding-block:32px;background:#01080a;color:#7f9e9a;font-size:13px}
.foot .brand{color:#e6f6f2}
.foot .disc{flex-basis:100%}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between}
.foot a{color:#a6c2be}
.scroll-hint{display:none;font-size:12px;color:var(--muted);margin:0 0 8px}

/* sticky mobile CTA */
.mcta{display:none}
@media(max-width:720px){
  .mcta{display:flex;transform:translateY(110%);transition:transform .25s;box-shadow:0 -6px 20px var(--shadow,#0003);position:fixed;left:0;right:0;bottom:0;z-index:6;gap:12px;align-items:center;justify-content:space-between;background:var(--surface);border-top:1px solid var(--line);padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .mcta .p{font:600 13px/1.3 var(--mono);color:var(--ink)}
  .mcta .p small{display:block;font:400 12px/1.3 var(--sans);color:var(--muted)}
  .mcta.is-on{transform:none}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .amounts button,.seg button{height:44px}
  .foot a{display:inline-block;padding-block:8px}
  .scroll-hint{display:block}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* setup carousel: illustrated steps */
.setup{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:900px){.setup{grid-template-columns:.85fr 1.15fr;align-items:center}}
.setup>*{min-width:0}
.steps button{all:unset;cursor:pointer;display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;padding:10px 12px;border-radius:10px;width:100%;box-sizing:border-box}
.steps button:focus-visible{outline:2px solid var(--ot-focus)}
.steps li{display:block}
.steps li::before{content:none}
.steps .n{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font:600 13px/1 var(--mono);color:var(--ink)}
.steps button[aria-current="true"]{background:var(--surface)}
.steps button[aria-current="true"] .n{background:var(--solid);color:var(--on-solid);border-color:var(--solid)}
.steps .tx{color:var(--text);font-size:15px}
.steps .tx b{color:var(--ink);display:block}
.car{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--bg-alt);overflow:hidden}
.car-track{display:flex;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.slide{flex:0 0 100%;min-width:0;padding:28px;display:grid;gap:14px;align-content:center;min-height:340px}
@media(max-width:520px){.slide{padding:18px;min-height:320px}}
.slide-cap{font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.car-nav{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-top:1px solid var(--line);background:var(--surface)}
.dots{display:flex;gap:8px}
.dots button{width:28px;height:6px;border-radius:3px;border:0;background:var(--line-2);cursor:pointer;padding:0}
.dots button{position:relative;overflow:hidden}
.dots button[aria-current="true"]{background:var(--line-2)}
.dots button[aria-current="true"]::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(1)}
.car.is-playing .dots button.run::after{animation:dotfill 4s linear forwards}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:899px){.setup .car{order:-1}}
.car-nav .arrows{display:flex;gap:6px}
.car-nav .arrows button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;font:600 15px/1 var(--mono)}
/* mock UI pieces inside slides */
.mock{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:12px;box-shadow:0 10px 30px -18px var(--ink)}
.mock-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mock-btn{height:38px;border-radius:999px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--sans);border:1px solid var(--line-2);color:var(--ink);background:var(--bg)}
.mock-btn.solid{background:var(--solid);color:var(--on-solid);border-color:var(--solid)}
.mock-field{height:38px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg);display:flex;align-items:center;padding:0 12px;color:var(--faint);font-size:14px}
.mock-amt{height:44px;min-width:64px;border-radius:10px;border:1px solid var(--line-2);display:grid;place-items:center;font:600 15px/1 var(--mono);color:var(--ink)}
.mock-amt.on{border:2px solid var(--accent);background:var(--accent-soft)}
.mock-k{font:500 12px/1.4 var(--mono);color:var(--muted)}
.mock-v{font:600 15px/1.3 var(--mono);color:var(--ink)}
.mock-code{background:var(--code-bg);color:var(--code-text);border-radius:10px;padding:14px;font:400 12.5px/1.75 var(--mono);overflow-x:auto;white-space:pre}
.mock-code .hl{background:#5ef2d633;color:#5ef2d6;border-radius:3px;padding:0 2px}
.ladder{display:grid;gap:10px}
.rung{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.rung.on{border-color:var(--accent);background:var(--accent-soft)}
.rung .t{font:600 12px/1 var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.rung .w{color:var(--ink);font-weight:600;font-size:14px}
.rung .p{font:600 14px/1 var(--mono);color:var(--ink)}
.tiny{font-size:13px;color:var(--muted)}
/* A tier's discount: the site's badge (src/site/discount-badge.css, appended to this file by the build); placed here. */
.disc-pill{margin-left:6px}
@media(max-width:560px){.bar span{font-size:12.5px}}

.cmp20{margin-top:28px;display:grid;gap:10px}
.cmp20-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:14px}
table.tiers.mini{min-width:520px}
table.tiers.mini td,table.tiers.mini th{padding:10px 14px}
@media(max-width:520px){.mock-code{font-size:12px}.rung{grid-template-columns:auto 1fr}.rung .p{grid-column:1/-1}.rung .w{white-space:nowrap}}
.scroll-hint{color:var(--text);font-weight:600;font-size:13px}
/* 2.5 vs 2.0 shot cards */
.shots{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.shots{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.shots{grid-template-columns:repeat(4,1fr)}}
.shot{position:relative;display:grid;gap:8px;align-content:start;padding:18px 18px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);min-width:0}
.shot h3{font-size:16px}
.shot p{font-size:14px}
.shot .src{font:400 12px/1.4 var(--mono);color:var(--faint);letter-spacing:.04em}
.tag25,.tag20{justify-self:start;padding:2px 9px;border-radius:999px;font:600 12px/1.6 var(--mono)}
.tag25{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2)}
.tag20{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2)}
/* The hub's links to the model pages and the wider site (render.js hubLinks). */
.hub{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.hub li{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface,transparent)}
.hub a{font-weight:600;text-decoration:none;color:var(--ink)}
.hub a:hover{color:var(--accent-ink);text-decoration:underline}
.hub .tiny{color:var(--muted)}

/* /go/<slug>/: one promoted model (src/landing/direct.js) */
.direct .hero{padding-block:40px 56px}
.direct h1{font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:0}
.dl-price{margin:0;font-size:18px;color:var(--text);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.dl-price b{font:600 clamp(32px,4vw,44px)/1 var(--sans);color:var(--ink)}
.dl-from,.dl-unit{color:var(--muted)}
.direct .disc-pill{margin-left:0}
.dl-table{min-width:0;overflow-x:auto}
.dl-table table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:14px}
.dl-table th,.dl-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
.dl-table thead th{font:400 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dl-table th small{color:var(--muted);font-weight:400}
.dl-table td.is-start b{color:var(--ink);font-size:16px}
.dl-table td.is-official s{color:var(--ot-official)}
.dl-table .model-blend,.dl-table .model-long{margin:8px 0 0;font-size:13px;color:var(--muted)}
.dl-table .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dl-plain{margin:0;color:var(--text)}
.dl-side{min-width:0}
.dl-sample{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.dl-sample video,.dl-sample img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000}
.dl-sample figcaption{padding:10px 14px;font-size:13px;color:var(--muted)}
.dl-code{margin:0;border-radius:var(--r);overflow:hidden;background:var(--code-bg);color:var(--code-text)}
.dl-code figcaption{padding:10px 16px;font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--band-line)}
.dl-code pre{margin:0;padding:16px;overflow-x:auto;font:400 13px/1.6 var(--mono)}
.direct .tiny{font-size:13px;color:var(--muted);margin:0;overflow-wrap:anywhere}
.direct .tiny a{color:var(--accent-ink)}
.dl-off{color:var(--ot-official);text-decoration-color:currentColor;font-size:20px}
.dl-down{flex-basis:100%;font-size:15px;color:var(--text)}
/* Phone: title, price and buttons, then the sample, then the table. Wide: the sample beside both. */
.dl-grid{display:grid;gap:24px;grid-template-columns:1fr;grid-template-areas:"top" "side" "bottom"}
.dl-top{grid-area:top}.dl-side{grid-area:side}.dl-bottom{grid-area:bottom}
@media(min-width:960px){.dl-grid{grid-template-columns:1.05fr .95fr;column-gap:40px;grid-template-areas:"top side" "bottom side";align-items:start}.dl-side{align-self:center}}

/* The landing pages' first screen (src/landing/hero.js; round 1 of the board's feedback, 2026-11-01): the model's own
   discount at a glance. Every rule is under .lh (the hero) or .lh-band (layout C's strip), so nothing else on a page
   changes. Colours: the landing pages' own grounds and ink (--ink, --surface, --line, --band, lp.css) and the site's
   colour roles only (src/site/COLOR.md, tokens.css, which the landing stylesheet carries): the pill is discountBadge
   (its saving's band), the official price --ot-official, ours the strongest ink. */
.lh .lh-h1{color:var(--ink);font-family:var(--sans);font-size:clamp(34px,5.2vw,56px);line-height:1.05;font-weight:700;letter-spacing:-.02em;text-wrap:balance;margin:0}
.lh .lh-h1 em{font-style:normal;color:var(--accent-ink)}
/* The page's own h1 keeps lp.css's look; the gallery's stand-in (a <p class="lh-h1">) takes the same. */

/* A: the price card on the right, a price tag on it. On a phone the card comes right under the title (the copy column
   opens up so the card can sit between its lines), then the buttons, then the paragraph. */
.lh-card{position:relative;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r,12px);overflow:hidden;box-shadow:0 18px 40px -24px color-mix(in srgb,var(--ink) 40%,transparent)}
.lh-card video{width:100%;aspect-ratio:16/9;object-fit:cover}
.lh-card-in{position:relative;display:grid;gap:6px;padding:22px 24px 20px}
.lh-card .lh-tag{justify-self:start;margin-bottom:6px}
.lh-k{font:500 13px/1.4 var(--mono);letter-spacing:.04em;color:var(--muted)}
.lh-was{margin-top:6px;font:400 15px/1.3 var(--mono);color:var(--ot-official,var(--faint))}
.lh-was s{color:var(--ot-official,var(--faint))}
.lh-now{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.lh-now b{font:700 clamp(44px,5vw,60px)/1 var(--mono);letter-spacing:-.04em;color:var(--ink)}
.lh-now span{font:600 13px/1.2 var(--mono);color:var(--muted);padding:4px 8px;border-radius:6px;background:var(--surface-2)}
.lh-line{margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--text)}
.lh-also{display:grid;gap:8px;margin:6px 0 0;padding:12px 0 0;border-top:1px dashed var(--line);list-style:none}
.lh-also li{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font:500 14px/1.3 var(--mono);color:var(--muted)}
.lh-also .lh-also-n{flex:1 1 auto;min-width:0;font-family:var(--sans);font-weight:600;color:var(--ink)}
.lh-also s{color:var(--ot-official,var(--faint));font-weight:400}
.lh-also b{color:var(--ink);font-size:16px}
@media(max-width:959.98px){
  .lh-A .hero-grid{gap:18px}
  .lh-A .hero-copy{display:contents}
  .lh-A .hero-copy>.eyebrow{order:1}.lh-A .hero-copy>:is(h1,.lh-h1){order:2}.lh-A .lh-card{order:3}.lh-A .hero-copy>.cta-row{order:4}
  .lh-A .hero-copy>.lede{order:5}.lh-A .hero-copy>.offer{order:6}.lh-A .hero-copy>.chips{order:7}
  .lh-A :is(h1,.lh-h1){font-size:clamp(28px,7.4vw,40px)}
  .lh-A .lh-card video{display:none}
}
@media(max-width:420px){.lh-card-in{padding:16px 16px 14px}}

/* B: the biggest discount first, very large, its price line under it; then the title, smaller. */
.lh-big{margin:0;line-height:1}
.lh-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font:500 16px/1.35 var(--mono);color:var(--muted)}
.lh-price .lh-price-n{font-family:var(--sans);font-weight:600;color:var(--ink)}
.lh-price s{color:var(--ot-official,var(--faint))}
.lh-price b{font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.lh-price .lh-price-u{font-size:13px}
.lh-B :is(h1,.lh-h1){font-size:clamp(26px,3.4vw,40px);line-height:1.12}

/* C: a deal-coloured strip across the top of the page, the first screen under it as it was. */
.lh-band{background:var(--band);color:var(--band-text)}
.lh-band-in{display:flex;align-items:center;flex-wrap:wrap;gap:10px 28px;min-height:72px;padding-top:12px;padding-bottom:12px}
.lh-band-tag{display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--band-ink)}
.lh-band .lh-ico{width:22px;height:22px;align-self:center;margin-right:4px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.lh-band-list{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0;padding:0;list-style:none}
.lh-band-list li{display:inline-flex;align-items:baseline;gap:8px;font:500 15px/1.3 var(--mono);white-space:nowrap}
.lh-band-n{font-family:var(--sans);font-weight:600;color:var(--band-ink)}
.lh-band-list s{color:var(--band-text);opacity:.8}
.lh-band-list b{font-size:20px;letter-spacing:-.02em;color:var(--band-ink)}
.lh-band-u{font-size:12px;opacity:.85}
.lh-band-k{font:600 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.lh-band .lh-band-cta{margin-left:auto;background:var(--band-accent);color:var(--band)}
.lh-band .lh-band-cta:hover{background:var(--band-ink)}
@media(max-width:719.98px){.lh-band-in{gap:8px 16px}.lh-band-list li{flex-wrap:wrap;white-space:normal;min-width:0}.lh-band-u{flex-basis:100%}.lh-band .lh-band-cta{display:none}.lh-band-list li{font-size:14px}.lh-band-list b{font-size:17px}}

/* The policy beside Get API Key (hero.js perksRow; round 3, #14): three marked items in a row, each an icon in the
   brand colour and its words, prominent, never a line of small print; on a phone they stack. The preview note on a
   staging build sits under the sign-up credit. */
.lh-perks{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.lh-perk{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 14px 8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:15px;line-height:1.3;color:var(--text)}
.lh-perk b{color:var(--ink);font-weight:700}
.lh-perk-i{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;background:var(--accent-soft);fill:none;stroke:var(--accent-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box}
.lh-perk>span{display:block}
.lh-perk-note{display:block;margin-top:2px;font:500 11px/1.3 var(--mono);letter-spacing:.02em;color:var(--muted)}
.lh-perk.is-preview{border-style:dashed}
@media(max-width:959.98px){.lh .lh-perks{order:5}.lh-A .hero-copy>.lede{order:6}}
@media(max-width:959.98px){
  /* A phone: the first screen holds the title, the price card, Get API Key and the policy; the card keeps its pill,
     its two prices and the Tier 1 line, the second model waits for the table below. */
  .lh.hero{padding-top:20px}
  .lh-A .lh-also{display:none}
  .lh-A .lh-now b{font-size:44px}
  .lh-A .lh-line{margin-top:6px;padding-top:8px;font-size:13px}
  .lh-perks{gap:6px}
  .lh-perk{min-height:40px;padding:5px 10px 5px 6px;gap:8px;border-radius:10px;font-size:13px}
  .lh-perk-i{width:24px;height:24px;padding:4px}
}

/* "Cheapest", with its dated basis (hero.js cheapLine; the page's own evidence only). */
.lh-cheap{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:14px;line-height:1.4;color:var(--text)}
.lh-cheap b{color:var(--ink)}
.lh-cheap-i{flex:none;width:20px;height:20px;margin-top:-1px;fill:none;stroke:var(--accent-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lh-card .lh-cheap{margin-bottom:4px}

:root{--ot-save-low:#dde5e2;--ot-save-low-on:#2f4a4f;--ot-save-low-ink:#53676a;--ot-save-mid:#8db7ff;--ot-save-mid-on:#05161a;--ot-save-mid-ink:#1d5bc0;--ot-save-high:#5ef3d6;--ot-save-high-on:#05161a;--ot-save-high-ink:#007463;--ot-save-track:#d4dfdb;--ot-ours:#007463;--ot-ours-head:#d6ebe3;--ot-ours-head-ink:#00574a;--ot-ours-wash:rgba(0,116,99,.06);--ot-ours-wash-hover:rgba(0,116,99,.11);--ot-official:#5b6f71;--ot-hot:#ff9f5a;--ot-hot-on:#05161a;--ot-focus:#2563c9}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ot-save-low:#323c3e;--ot-save-low-on:#f2f4f3;--ot-save-low-ink:#b4bebc;--ot-save-mid:#8db7ff;--ot-save-mid-on:#05161a;--ot-save-mid-ink:#8db7ff;--ot-save-high:#5ef3d6;--ot-save-high-on:#05161a;--ot-save-high-ink:#5ef3d6;--ot-save-track:rgba(255,255,255,.08);--ot-ours:#5ef3d6;--ot-ours-head:#0f2124;--ot-ours-head-ink:#5ef3d6;--ot-ours-wash:rgba(94,243,214,.055);--ot-ours-wash-hover:rgba(94,243,214,.1);--ot-official:#c3ccca;--ot-hot:#ff9f5a;--ot-hot-on:#05161a;--ot-focus:#7fb2ff}}:root[data-theme="dark"]{--ot-save-low:#323c3e;--ot-save-low-on:#f2f4f3;--ot-save-low-ink:#b4bebc;--ot-save-mid:#8db7ff;--ot-save-mid-on:#05161a;--ot-save-mid-ink:#8db7ff;--ot-save-high:#5ef3d6;--ot-save-high-on:#05161a;--ot-save-high-ink:#5ef3d6;--ot-save-track:rgba(255,255,255,.08);--ot-ours:#5ef3d6;--ot-ours-head:#0f2124;--ot-ours-head-ink:#5ef3d6;--ot-ours-wash:rgba(94,243,214,.055);--ot-ours-wash-hover:rgba(94,243,214,.1);--ot-official:#c3ccca;--ot-hot:#ff9f5a;--ot-hot-on:#05161a;--ot-focus:#7fb2ff}
/* The colours that carry information (src/site/COLOR.md; the designer's guideline, board 2026-11-01): the saving pill,
   the savings bar, the saving legend, the HOT tag, price tables (ours and official columns) and the price-basis line.
   One file for every page: site.css imports it, the landing pages get it inside their one stylesheet. The colours are
   tokens.css --ot-save-*, --ot-ours*, --ot-official and --ot-hot; a dark theme (the deep sea .ot-ink, the model page's
   dark guide, the landing pages' dark scheme) redefines them and everything here follows. Fonts and greys fall back to
   the landing pages' own names (--muted, --line) where the site's (--ot-muted, --ot-line) are not defined. */

/* The saving pill: "−40%", filled in its band (low grey, mid blue, high mint), the text on it deep (never white on mint
   or blue), with a hairline edge in the band's own ink so a light fill still reads as a shape on the paper. Placement
   stays the caller's (its own class); look and size are these. The colours sit on two classes, so a page's own link
   colour (.ot-compare a, .ot-publisher a) does not repaint a pill that is a link. */
.ot-db{display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;height:1.8em;padding:0 .62em;border:0;border-radius:999px;font-family:inherit;font-size:13px;font-style:normal;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;vertical-align:middle}
.ot-db.is-s{font-size:12px}
.ot-db.is-l{height:auto;padding:.1em .34em;border-radius:.22em;font-size:clamp(34px,4.4vw,56px);line-height:1;letter-spacing:-.02em}
.ot-db.is-low{--db-bg:var(--ot-save-low);--db-fg:var(--ot-save-low-on);--db-ink:var(--ot-save-low-ink)}
.ot-db.is-mid{--db-bg:var(--ot-save-mid);--db-fg:var(--ot-save-mid-on);--db-ink:var(--ot-save-mid-ink)}
.ot-db.is-high{--db-bg:var(--ot-save-high);--db-fg:var(--ot-save-high-on);--db-ink:var(--ot-save-high-ink)}
.ot-db:is(.is-low,.is-mid,.is-high){background:var(--db-bg);color:var(--db-fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--db-ink) 45%,transparent)}
/* Quiet: the band as an outline and text on the page's own ground (the top bar's small tag). */
.ot-db.is-quiet:is(.is-low,.is-mid,.is-high){background:transparent;color:var(--db-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--db-ink) 60%,transparent)}
a.ot-db:is(.is-low,.is-mid,.is-high):is(:hover,:focus-visible){color:var(--db-fg);text-decoration:underline;text-underline-offset:2px}
a.ot-db.is-quiet:is(:hover,:focus-visible){color:var(--db-ink)}
a.ot-db:focus-visible{outline:2px solid var(--ot-focus);outline-offset:2px}

/* The savings bar: the track is the official price, the fill what OceanToken charges, in the saving's band (its ink, so
   it reads on the paper's track as well as on the deep sea's). */
.ot-sb{display:inline-block;flex:none;width:88px;max-width:100%;height:8px;border-radius:1px;background:var(--ot-save-track);overflow:hidden;vertical-align:middle}
.ot-sb i{display:block;height:100%}
.ot-sb.is-low i{background:var(--ot-save-low-ink)}
.ot-sb.is-mid i{background:var(--ot-save-mid-ink)}
.ot-sb.is-high i{background:var(--ot-save-high-ink)}
/* A pill with its bar, side by side (a price table's Saving cell). */
.ot-save{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}

/* The saving legend: what the three pill colours mean, once per pricing page. */
.ot-sl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 12px;padding:0;list-style:none;font-size:13px;line-height:1.4;color:var(--ot-muted,var(--muted))}
.ot-sl li{display:inline-flex;align-items:center;min-width:0}
.ot-sl .ot-sl-label{margin-right:4px}

/* The HOT tag: the one use of the hot colour. */
.ot-hot{display:inline-flex;align-items:center;flex:none;padding:3px 6px;border-radius:3px;background:var(--ot-hot);color:var(--ot-hot-on);font-family:var(--ot-mono,ui-monospace,monospace);font-size:11px;font-weight:600;line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
:is(:lang(zh),:lang(ja),:lang(ko)) .ot-hot{font-family:inherit;letter-spacing:0}

/* A price table (class ot-tt): the official column in the official tone, struck through in the same tone (never red);
   OceanToken's columns marked as ours (a mint line over the header, a mint wash on the cells, the prices in the
   strongest ink). Which of our prices is cheapest is said by the pills in the cells, in their band's colour. */
.ot-tt :is(th,td).is-official{color:var(--ot-official)}
.ot-tt :is(th,td).is-official s{color:var(--ot-official);text-decoration-color:currentColor}
.ot-tt thead :is(th,td).is-ours{background:var(--ot-ours-head);color:var(--ot-ours-head-ink);box-shadow:inset 0 2px 0 var(--ot-ours)}
.ot-tt tbody td.is-ours{background:var(--ot-ours-wash)}
.ot-tt tbody tr:hover td.is-ours{background:var(--ot-ours-wash-hover)}
.ot-tt td.is-ours :is(b,strong){color:var(--ot-strong,var(--ink))}

/* The price-basis line: the one line of small print under a price comparison. */
.ot-basis{margin:12px 0 0;max-width:72em;font-size:13px;line-height:1.55;color:var(--ot-muted,var(--muted));text-wrap:pretty}
.ot-basis a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* "On this page" (site/toc.js): the site's one contents list, on every long page (round 1 of the board's feedback,
   2026-11-01), compact, an icon before each entry and there from the first screen on (round 2, #6 and #8). Three looks
   from the same markup, the layout's class (toc.js TOC_STYLE; the board picks in /_gallery, 47-toc):
     .toc-side  a column on the left, sticky under the top bar;
     .toc-top   a row of links at the top of the page, sticky under the top bar;
     .toc-slim  a column of icons on the left, the words opening on hover or focus.
   On a phone (under 1120px) each is the row. site.css imports this file for every page of the site, the landing pages
   carry it in their one stylesheet (scripts/build-model-pages.mjs). The colours are the page's own: the site's tokens
   (--ot-*), the model page's (--accent, --g-card) or the landing pages' (--line, --ink, --surface, src/landing/lp.css). */
.guide-toc{
  --toc-line:var(--ot-line,var(--line,#cbdad4));--toc-muted:var(--ot-muted,var(--muted,#4c6468));--toc-strong:var(--ot-strong,var(--ink,#062a30));
  --toc-text:var(--ot-text,var(--text,#2f4a4f));--toc-accent:var(--accent,var(--ot-accent,#007463));--toc-bg:var(--ot-bg,var(--bg,#e9eeeb));
  --toc-card:var(--g-card,var(--ot-surface,var(--surface,#f4f8f6)));--toc-mono:var(--ot-mono,var(--mono,ui-monospace,monospace));--toc-top:var(--ot-bar-h,64px);
  --toc-hover:color-mix(in srgb,var(--toc-strong) 7%,transparent);--toc-on:color-mix(in srgb,var(--toc-accent) 15%,transparent);
  --toc-on-ink:color-mix(in srgb,var(--toc-accent) 72%,var(--toc-strong));
  position:relative;min-width:0;box-sizing:border-box;font:400 14px/1.3 var(--ot-sans,var(--sans,system-ui,sans-serif))}
.guide-toc-h{margin:0 0 8px;padding:0 10px;font:500 11px/1.3 var(--toc-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--toc-muted)}
.guide-toc-stage{display:none}
.guide-toc-bar{height:2px;margin:0 10px 8px;border-radius:2px;background:var(--toc-line);overflow:hidden}
.guide-toc-bar span{display:block;height:100%;background:var(--toc-accent);transform:scaleX(0);transform-origin:left;transition:transform .15s linear}
.guide-toc ul{display:grid;gap:2px;list-style:none;margin:0;padding:0}
.guide-toc a{display:flex;align-items:center;gap:10px;min-height:32px;padding:5px 10px;border-radius:8px;color:var(--toc-muted);text-decoration:none;transition:background-color .15s,color .15s}
.guide-toc a::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--toc-glyph) center/contain no-repeat;mask:var(--toc-glyph) center/contain no-repeat}
.guide-toc a:hover{background:var(--toc-hover);color:var(--toc-strong)}
.guide-toc a[aria-current]{background:var(--toc-on);color:var(--toc-on-ink);font-weight:600}
.guide-toc a:focus-visible{outline:2px solid var(--ot-focus,var(--toc-accent));outline-offset:-2px}
.guide-toc li.is-sub a{padding-left:24px;font-size:13px}
.guide-toc li.is-sub a::before{width:14px;height:14px}

/* Where a link lands: under the top bar and a row list, with room to breathe. */
:root:has(.guide-toc) :is(section,h2,h3,header,div,details)[id]{scroll-margin-top:calc(var(--ot-bar-h,64px) + 72px)}

/* The layouts. A page in one container: the list, then the page (.toc-shell > nav + .toc-body). A page of full-width
   sections: the list pinned beside them (.toc-flow > .toc-pin > nav), each section's content moved right by its column
   (a flow page's measure: its sections' container width and side padding). */
.toc-shell,.toc-body{min-width:0}
.toc-flow{--toc-max:var(--ot-container,1320px);--toc-pad:var(--ot-gutter,clamp(16px,4vw,48px));--toc-col:0px}
.toc-flow.is-lp{--toc-max:1320px;--toc-pad:16px}
@media(min-width:720px){.toc-flow.is-lp{--toc-pad:32px}}
.toc-pin{box-sizing:border-box;width:100%;max-width:var(--toc-max);margin:0 auto;padding:0 var(--toc-pad)}

/* The row: every look on a phone, and .toc-top everywhere. One line under the top bar, sticky, scrolling sideways; its
   background reaches the window's edges as paint only (border-image), so nothing scrolls sideways. */
.toc-top>.guide-toc,.toc-top>.toc-pin{position:sticky;top:var(--toc-top,var(--ot-bar-h,64px));z-index:30}
.toc-top>.guide-toc,.toc-top>.toc-pin>.guide-toc{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:6px 0;
  border-image:linear-gradient(to top,var(--toc-line) 1px,var(--toc-bg) 1px) fill 0 / / 0 100vmax}
.toc-top .guide-toc-h{flex:none;margin:0;padding:0}
.toc-top .guide-toc-bar{position:absolute;left:0;right:0;bottom:0;height:2px;margin:0;border-radius:0;background:none}
.toc-top .guide-toc ul{display:flex;flex:1;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.toc-top .guide-toc ul::-webkit-scrollbar{display:none}
.toc-top .guide-toc li{flex:none}
.toc-top .guide-toc li.is-sub{display:none}
.toc-top .guide-toc a{min-height:36px;padding:4px 12px 4px 10px;border-radius:999px;white-space:nowrap}
@media(max-width:1119.98px){
  :is(.toc-side,.toc-slim)>.guide-toc,:is(.toc-side,.toc-slim)>.toc-pin{position:sticky;top:var(--toc-top,var(--ot-bar-h,64px));z-index:30}
  :is(.toc-side,.toc-slim)>.guide-toc,:is(.toc-side,.toc-slim)>.toc-pin>.guide-toc{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:4px 0;
    border-image:linear-gradient(to top,var(--toc-line) 1px,var(--toc-bg) 1px) fill 0 / / 0 100vmax}
  :is(.toc-side,.toc-slim) .guide-toc-h{flex:none;margin:0;padding:0}
  :is(.toc-side,.toc-slim) .guide-toc-bar{position:absolute;left:0;right:0;bottom:0;height:2px;margin:0;border-radius:0;background:none}
  :is(.toc-side,.toc-slim) .guide-toc ul{display:flex;flex:1;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  :is(.toc-side,.toc-slim) .guide-toc ul::-webkit-scrollbar{display:none}
  :is(.toc-side,.toc-slim) .guide-toc li{flex:none}
  :is(.toc-side,.toc-slim) .guide-toc li.is-sub{display:none}
  :is(.toc-side,.toc-slim) .guide-toc a{min-height:36px;padding:4px 12px 4px 10px;border-radius:999px;white-space:nowrap}
}
@media(max-width:599.98px){.guide-toc-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

@media(min-width:1120px){
  /* The column (.toc-side): beside the page from its first screen, sticky under the top bar. */
  .toc-shell.toc-side{display:grid;grid-template-columns:184px minmax(0,1fr);column-gap:40px;align-items:start}
  .toc-shell.toc-side>.guide-toc{position:sticky;top:calc(var(--toc-top) + 24px);max-height:calc(100vh - var(--toc-top) - 48px);overflow:auto;margin:24px 0 32px -10px;scrollbar-width:thin}
  /* Icons only (.toc-slim): a narrow column; hovering it or moving focus into it opens the words over the page. */
  .toc-shell.toc-slim{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:28px;align-items:start}
  .toc-shell.toc-slim>.guide-toc{position:sticky;top:calc(var(--toc-top) + 24px);z-index:20;margin:24px 0 32px -6px}
  .toc-slim .guide-toc{width:48px;padding:6px 0;border-radius:12px;transition:width .15s,box-shadow .15s,background-color .15s}
  .toc-slim .guide-toc-h,.toc-slim .guide-toc-bar{display:none}
  .toc-slim .guide-toc a{gap:12px;padding:8px 14px;overflow:hidden;white-space:nowrap}
  .toc-slim .guide-toc li.is-sub a{padding-left:14px}
  .toc-slim .guide-toc a>span{opacity:0;transition:opacity .1s}
  .toc-slim .guide-toc:is(:hover,:focus-within){width:232px;background:var(--toc-card);box-shadow:0 12px 32px rgba(0,0,0,.16),0 0 0 1px var(--toc-line)}
  .toc-slim .guide-toc:is(:hover,:focus-within) a>span{opacity:1}
  /* Full-width sections: their content moves right by the column, the list pinned in that room on the page's background
     (so it reads over a dark or tinted band) and stopping at the end of the sections (toc-client.js sets --toc-h, its
     height; without it the list is cut there instead). */
  .toc-flow.toc-side{--toc-col:224px}
  .toc-flow.toc-slim{--toc-col:64px}
  .toc-flow:is(.toc-side,.toc-slim){position:relative;overflow-y:clip}
  .toc-flow:is(.toc-side,.toc-slim)>.toc-pin{position:sticky;z-index:20;top:var(--toc-top,64px);height:var(--toc-h,0px);margin-bottom:calc(-1 * var(--toc-h,0px));padding-top:24px;pointer-events:none}
  /* /video's breadcrumb sits over the top of its first section: the list starts under it. */
  .toc-flow.is-vx>.toc-pin{padding-top:56px}
  .toc-flow.toc-side>.toc-pin>.guide-toc{width:200px;max-height:calc(100vh - var(--toc-top) - 48px);overflow:auto;margin-left:-10px;padding:12px 0;border-radius:12px;background:var(--toc-bg);pointer-events:auto}
  .toc-flow.toc-slim>.toc-pin>.guide-toc{margin-left:-6px;background:var(--toc-bg);pointer-events:auto}
  /* Four classes deep, so a page block's own padding (its variant's CSS, three deep) does not undo the move. */
  .toc-flow:is(.toc-side,.toc-slim).is-lp .wrap,.toc-flow:is(.toc-side,.toc-slim).is-vx :is(.vx-wrap,.vx-hero-in),.toc-flow:is(.toc-side,.toc-slim).is-ig :is(.ig-wrap,.cc-wrap),.toc-flow:is(.toc-side,.toc-slim).is-gx .gx-wrap{padding-left:calc(var(--toc-pad) + var(--toc-col))}
}
@media (prefers-reduced-motion:reduce){.guide-toc :is(.guide-toc-bar span,a,a>span){transition:none}.toc-slim .guide-toc{transition:none}}
@media print{.guide-toc{display:none}}

/* The icons, one per kind of section (toc.js TOC_ICONS; drawn as masks, so each takes the link's colour). */
.guide-toc a[data-i="faq"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")}
.guide-toc a[data-i="calc"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2'/%3E%3Cpath d='M8.5 6.5h7M8.5 11h.01M12 11h.01M15.5 11h.01M8.5 14.5h.01M12 14.5h.01M15.5 14.5h.01M8.5 18h.01M12 18h3.5'/%3E%3C/svg%3E")}
.guide-toc a[data-i="tiers"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M6 16.5V13M11 16.5V9M16 16.5V5'/%3E%3C/svg%3E")}
.guide-toc a[data-i="price"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19M16.5 6H10a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6H7'/%3E%3C/svg%3E")}
.guide-toc a[data-i="compare"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3.5 4 7.5l4 4M4 7.5h16M16 12.5l4 4-4 4M20 16.5H4'/%3E%3C/svg%3E")}
.guide-toc a[data-i="specs"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 5h-7M9 5H4M20 12h-9M7 12H4M20 19h-5M11 19H4M13 3v4M7 10v4M15 17v4'/%3E%3C/svg%3E")}
.guide-toc a[data-i="overview"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16.5V11M12 7.5h.01'/%3E%3C/svg%3E")}
.guide-toc a[data-i="can"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3.5 12.9 8.6 18 10.5l-5.1 1.9L11 17.5l-1.9-5.1L4 10.5l5.1-1.9z'/%3E%3Cpath d='M18.5 3v4M20.5 5h-4'/%3E%3C/svg%3E")}
.guide-toc a[data-i="agents"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='12' rx='2'/%3E%3Cpath d='M12 8V4.5M9.5 13v2M14.5 13v2M2 13.5h2M20 13.5h2'/%3E%3C/svg%3E")}
.guide-toc a[data-i="perf"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5 4.5 13.5H11l-1 8 8.5-11H12z'/%3E%3C/svg%3E")}
.guide-toc a[data-i="chat"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15a2 2 0 0 1-2 2H8l-4 3.5V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
.guide-toc a[data-i="limit"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 18.5a9 9 0 1 1 15.6 0'/%3E%3Cpath d='m12 14 4-4.5'/%3E%3C/svg%3E")}
.guide-toc a[data-i="plans"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 4.5-9 4.5-9-4.5z'/%3E%3Cpath d='m3 12 9 4.5 9-4.5M3 16.5 12 21l9-4.5'/%3E%3C/svg%3E")}
.guide-toc a[data-i="shield"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7.5-3 7.5-9.5V5.5L12 3 4.5 5.5v6C4.5 18 12 21 12 21z'/%3E%3C/svg%3E")}
.guide-toc a[data-i="code"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.5 17.5 5.5-5.5-5.5-5.5M8.5 6.5 3 12l5.5 5.5'/%3E%3C/svg%3E")}
.guide-toc a[data-i="docs"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5h5.5A3.5 3.5 0 0 1 12 8v12.5a2.5 2.5 0 0 0-2.5-2.5H3zM21 4.5h-5.5A3.5 3.5 0 0 0 12 8v12.5a2.5 2.5 0 0 1 2.5-2.5H21z'/%3E%3C/svg%3E")}
.guide-toc a[data-i="video"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='13.5' height='12' rx='2'/%3E%3Cpath d='m16 10.5 5.5-3v9l-5.5-3'/%3E%3C/svg%3E")}
.guide-toc a[data-i="image"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='18' height='17' rx='2'/%3E%3Ccircle cx='9' cy='9.5' r='1.8'/%3E%3Cpath d='m21 15.5-4.5-4.5L6 20.5'/%3E%3C/svg%3E")}
.guide-toc a[data-i="makers"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='3' width='15' height='18' rx='1.5'/%3E%3Cpath d='M9.5 21v-3.5h5V21M8.5 7h.01M12 7h.01M15.5 7h.01M8.5 10.5h.01M12 10.5h.01M15.5 10.5h.01M8.5 14h.01M12 14h.01M15.5 14h.01'/%3E%3C/svg%3E")}
.guide-toc a[data-i="models"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
.guide-toc a[data-i="more"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5z'/%3E%3C/svg%3E")}
.guide-toc a[data-i="dot"]{--toc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14M5 15h14M10 4 8 20M16 4l-2 16'/%3E%3C/svg%3E")}