/*
  THE MARKETING SITE'S DESIGN LAYER (2026-11 redesign, docs/ux-redesign).

  Every public page loads this AFTER its own inline <style>. The inline block keeps the shared colour
  tokens (test/marketing-dogfood holds every page to the same :root) and whatever is truly page-specific;
  this file sets the look they share: Geist, the type scale, the spacing, one radius, the header, the
  buttons, cards, tables, questions, the closer and the footer. Same class names the pages already use,
  so no page's markup, i18n keys or generated regions had to move.

  Colours only ever come from the tokens. Served from /media, so its <link> carries a ?v= content stamp
  (scripts/stamp-assets.mjs) and the year-long immutable cache is safe.
*/

@font-face{font-family:'Geist';src:url('/media/fonts/Geist-Variable.woff2?v=46525b05bb') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/media/fonts/GeistMono-Variable.woff2?v=3ef2c50dc1') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--r:8px;--r-lg:12px;--ease:cubic-bezier(.16,1,.3,1);--cell-x:28px}

/* ── base ─────────────────────────────────────────────────────────────────────────────────────── */
html{scroll-padding-top:80px;overflow-x:clip}
body{background:var(--surface);color:var(--ink);font-family:'Geist',var(--sans);line-height:1.6;font-size:16px;
  -webkit-font-smoothing:antialiased;font-feature-settings:'ss01','cv11';overflow-x:clip}
.container{padding:0 32px}
h1,h2,h3{text-wrap:balance;font-weight:600;letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(2.3rem,4.6vw,3.5rem);letter-spacing:-.035em;line-height:1.04}
h2{font-size:clamp(1.7rem,3vw,2.2rem)}
h3{font-size:1.03rem;letter-spacing:-.01em;line-height:1.3}
p{text-wrap:pretty}
.lead{font-size:clamp(1.05rem,1.6vw,1.15rem);color:var(--muted);line-height:1.6;max-width:60ch}
.mono,code,kbd,pre{font-family:'Geist Mono',var(--mono)}
.num{font-family:'Geist Mono',var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{display:inline-block;font-family:inherit;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--accent-ink)}
.kicker{font-family:inherit;font-size:14px;letter-spacing:0;line-height:1.6;color:var(--muted)}
.sectionlead,.sec-head p{font-size:17px;line-height:1.6;color:var(--muted)}
.sectionfoot{font-size:14.5px;color:var(--muted)}
a:focus-visible,.btn:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ── header (markup owned by build-nav and site-chrome.js) ────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:20;backdrop-filter:saturate(1.4) blur(10px);
  background:color-mix(in srgb,var(--surface) 86%,transparent);border-bottom:1px solid var(--line)}
.bar .container{gap:16px;height:64px}
.brand{font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em;gap:8px}
/* the brand mark, sized wherever the header is drawn (the blog and legal pages carry their own CSS) */
.brand .mark{width:20px;height:20px;flex:none}
@media (max-width:720px){
  .bar{position:static}
  .bar .container{height:auto}
  .bar nav{gap:2px !important}
  .bar .chrome-navlink{padding:6px 8px;font-size:13.5px}
}

/* ── buttons ──────────────────────────────────────────────────────────────────────────────────── */
.btn{font-family:inherit;font-weight:500;font-size:15px;height:44px;padding:0 18px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 1px 2px rgba(14,17,22,.05);transition:background .12s,border-color .12s}
.btn:hover{transform:none;border-color:color-mix(in srgb,var(--ink) 22%,var(--line));background:var(--surface-2)}
.btn.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff;position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 1px 2px rgba(30,91,255,.25),inset 0 1px 0 rgba(255,255,255,.12)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent-fill) 88%,#000)}
.btn.primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-110%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.24) 50%,transparent 70%)}
.btn.primary:hover::after{transform:translateX(110%);transition:transform .75s var(--ease)}
.btn.sm,.bar-cta{height:34px;padding:0 14px !important;font-size:13.5px !important}
.cta-row{gap:12px}
.lang-btn,.lang-search{border-radius:var(--r)}
.lang-menu{border-radius:var(--r-lg)}
.authslot::before{content:none}

/* ── rhythm: whitespace between sections, no rules ────────────────────────────────────────────── */
section{border-top:0;padding:64px 0}
section>h2+p,section>h2+div,section>h2+ul,section>h2+table{margin-top:14px}
section>p+p{margin-top:12px}
/* the first section of an inner page is its head: the soft blue wash the prototype uses, full bleed */
.container>section:first-child,.container>.hero{position:relative;isolation:isolate;padding-top:80px}
.container>section:first-child::after,.container>.hero::after{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);pointer-events:none;
  background:radial-gradient(46% 90% at 30% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 72%),linear-gradient(180deg,var(--surface),var(--bg) 160%)}
.hero h1{margin-top:14px}
.hero .lead{margin-top:20px}
.sec-head{max-width:660px;margin-bottom:40px}
.sec-head h2{margin-top:0}

/* ── cards: one radius, one border, air between them ──────────────────────────────────────────── */
.grid,.channels,.doors,.grid-2,.proofgrid,.dialrow,.tiers,.tier-grid,.states,.demo{gap:16px}
.card,.channel,.tier,.state,.proofcard,.dialcard,.persona,.license,.tool,.panel,.demoframe,.wl-wrap{
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);box-shadow:none}
.card,.channel,.tier,.state,.proofcard,.persona{padding:28px var(--cell-x) 30px}
.card p,.channel p,.state p,.proofcard p,.tier li,.persona p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.channel.is-default,.dialcard.rec,.tier.paid,.tier.feat{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.channel h3,.card h3,.state h3{font-size:1.03rem}
.proofcard .pc-n{font-weight:600;letter-spacing:-.03em}
.proofcard .pc-l,.dialcard .dc-sub,.tier .best,.panel-head .t,.tool-head .t,.telemetry .k,.chart-cap .l,.wl-k,.stepno{
  font-family:inherit;letter-spacing:0;text-transform:none;font-size:13px;font-weight:500}
.proofcard .pc-l{font-size:15px;font-weight:600;color:var(--ink)}
.panel-head,.tool-head{background:var(--surface);padding:14px 22px}
.panel-note{font-family:inherit;font-size:13px;letter-spacing:0}
.license{border-style:solid;background:var(--surface)}
.cardlink a,.cardlink{color:var(--accent-ink);font-weight:500}
.provenance{font-family:inherit;letter-spacing:0;text-transform:none;font-size:12px;font-weight:500;padding:3px 9px}
.pill{font-family:inherit;letter-spacing:0;text-transform:none;font-size:12px}
.st,.sev,.tag{font-family:inherit;letter-spacing:0;text-transform:none;font-size:12px;font-weight:500;border-radius:999px}
.loop{border-radius:var(--r-lg)}
.chip{font-family:inherit}
.demoframe figcaption{background:var(--surface-2)}

/* ── tables ───────────────────────────────────────────────────────────────────────────────────── */
table th{font-family:inherit !important;letter-spacing:0 !important;text-transform:none !important;font-size:13px !important;font-weight:500}
.table-scroll,.wl-scroll{border-radius:var(--r-lg)}
.ledger th,.ledger td{padding:12px 14px}

/* ── questions: rows on hairlines, not a boxed stack ──────────────────────────────────────────── */
.faq{gap:0;border:0;border-radius:0;background:none;border-top:1px solid var(--line)}
.qa{background:none;padding:22px 0;border-bottom:1px solid var(--line)}
.qa h3{font-size:16.5px;font-weight:600}
.qa p{font-size:15.5px;line-height:1.65;color:var(--muted)}

/* ── the blog's list: one rounded panel, a row per post ───────────────────────────────────────── */
.posts{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.posts li:last-child{border-bottom:0}
.posts a.card{border:0;border-radius:0;padding:24px var(--cell-x);transition:background .15s}
.posts a.card:hover{background:var(--surface-2)}
.posts time{font-family:'Geist Mono',var(--mono);letter-spacing:0}

/* ── the closer ───────────────────────────────────────────────────────────────────────────────── */
.cta-final{position:relative;isolation:isolate;text-align:center;padding:96px 0}
.cta-final::after{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);pointer-events:none;
  background:radial-gradient(48% 80% at 50% 100%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 72%),var(--bg)}
.container>section.cta-final+*{margin-top:0}

/* ── footer (the same markup on every page) ───────────────────────────────────────────────────── */
.foot{padding:56px 0 28px;background:var(--surface);color:var(--muted);font-size:14px;border-top:0}
.foot .container{display:block}
.foot-in{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px}
.foot-brand p{margin-top:12px;max-width:34ch;font-size:14px}
.foot-brand strong{color:var(--ink)}
.foot-col{display:flex;flex-direction:column;gap:8px}
.foot-h{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:4px}
.foot-col a:hover,.foot-legal a:hover{color:var(--ink)}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px}
.foot-legal span:last-child{display:flex;gap:16px}

/* ── motion ───────────────────────────────────────────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(10px);filter:blur(3px)}}
.container>section:first-child>*,.container>.hero>*{animation:rise .9s var(--ease) both}
.container>section:first-child>:nth-child(2),.container>.hero>:nth-child(2){animation-delay:70ms}
.container>section:first-child>:nth-child(n+3),.container>.hero>:nth-child(n+3){animation-delay:140ms}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}

/* ── narrow screens ───────────────────────────────────────────────────────────────────────────── */
@media (max-width:1080px){.foot-in{grid-template-columns:repeat(4,1fr)}.foot-brand{grid-column:1/-1}}
@media (max-width:860px){
  .container{padding:0 20px}
  :root{--cell-x:20px}
  section{padding:56px 0}
  .container>section:first-child,.container>.hero{padding-top:48px}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-col a{min-height:44px;display:flex;align-items:center}
}