/* Nordstern — tokens per 06_BRAND_IDENTITY §4–5; components per 09_WEBSITE_DESIGN §4 */
@font-face{font-family:"Inter Var";src:url(/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JBMono";src:url(/fonts/jbmono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JBMono";src:url(/fonts/jbmono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Fb";src:local("Helvetica Neue"),local("Arial");size-adjust:107%;ascent-override:90.2%;descent-override:22.24%;line-gap-override:0%}
:root{
  --ink-0:#0a0a0f;--ink-1:#0f0f14;--ink-2:#131318;--ink-3:#17171d;
  --line-1:#1c1c22;--line-2:#26262d;
  --amber:#ffaf36;--amber-h:#f0a028;--amber-p:#e0941f;
  --coral:#ff5a49;--green:#57c99b;--magenta:#e8399f;--ochre:#c9973b;
  --n-100:#f4f3ef;--n-200:#c9c7c1;--n-300:#a3a19b;--n-400:#7c7a75;--n-500:#55534f;
  --sans:"Inter Var","Inter Fb",system-ui,sans-serif;
  --mono:"JBMono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ink-0);color:var(--n-200);font:400 17px/1.7 var(--sans)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
::selection{background:var(--line-2);color:var(--n-100)}
a{color:var(--amber);text-underline-offset:3px;transition:color .12s ease}
a:hover{color:var(--amber-h)}
h1,h2,h3,h4{color:var(--n-100);text-wrap:balance;margin:0 0 20px}
h1{font-size:clamp(40px,3.1vw + 22px,64px);line-height:1.06;font-weight:650;letter-spacing:-.02em}
.t-page h1{font-size:clamp(34px,1.8vw + 24px,48px);line-height:1.12;letter-spacing:-.015em}
h2{font-size:clamp(28px,1vw + 22px,36px);line-height:1.17;font-weight:600;letter-spacing:-.01em}
h3{font-size:clamp(22px,.8vw + 18px,28px);line-height:1.25;font-weight:600;letter-spacing:-.008em}
h4{font-size:clamp(19px,.4vw + 17px,22px);line-height:1.36;font-weight:600;letter-spacing:-.005em}
.prose h3,.prose h4{margin-top:44px}
.prose h2+h3,.prose h3+h4{margin-top:0}
p{margin:0 0 20px}
ul,ol{margin:0 0 20px;padding-left:24px}
li{margin-bottom:10px}
li>ul,li>ol{margin-top:10px;margin-bottom:0}
.lead{font-size:20px;line-height:1.6;color:var(--n-100)}
.cap,figcaption{font-size:13px;line-height:1.46;letter-spacing:.005em;color:var(--n-300)}
p .cap,li .cap{font-size:12px;color:var(--n-400)}
.cap a,figcaption a,.src a{color:inherit}
.eyebrow{font:500 12px/1.33 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--n-300);margin:0 0 16px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:14px;height:14px;flex:none;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><circle cx="11" cy="11" r="3" fill="%23a3a19b"/><g stroke="%23a3a19b" stroke-width="1.5"><path d="M11 0v5"/><path d="M11 17v5"/><path d="M0 11h5"/><path d="M17 11h5"/></g></svg>') center/contain no-repeat}
.num,.fig{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:1184px;margin-inline:auto;padding-inline:24px}
.prose{max-width:68ch}
.wrap.prose{max-width:1184px}
.wrap.prose>*{max-width:68ch}
.wrap.prose>.tw,.wrap.prose>.stats,.wrap.prose>.cards,.wrap.prose>.duo,.wrap.prose>figure,.wrap.prose>.strip,.wrap.prose>.fn{max-width:none}
section{padding:64px 0;border-top:1px solid var(--line-1)}
section:first-of-type{border-top:0}
main>section:nth-of-type(n+3){content-visibility:auto;contain-intrinsic-size:auto 720px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink-2);color:var(--n-100);padding:12px 16px}
.skip:focus{left:8px;top:8px}
/* nav */
header{position:sticky;top:0;z-index:50;background:rgba(10,10,15,.98);border-bottom:1px solid var(--line-1)}
.navbar{display:flex;align-items:center;gap:24px;min-height:64px}
.lockup{display:inline-flex;flex:none}
.lockup img{display:block}
.navlinks{display:none;gap:20px;margin-left:8px}
.navlinks a,.mlinks a{font-size:14px;color:var(--n-200);text-decoration:none;white-space:nowrap;transition:color .12s ease}
.navlinks a:hover,.mlinks a:hover{color:var(--n-100)}
.navlinks a[aria-current=page],.mlinks a[aria-current=page]{color:var(--n-100);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:4px}
.navctas{display:none;gap:12px;margin-left:auto}
.mnav{margin-left:auto;border:0}
.mnav summary{font:500 14px/1 var(--sans);color:var(--n-100);padding:12px;cursor:pointer;list-style:none;border:1px solid var(--line-2);border-radius:6px}
.mnav summary::-webkit-details-marker{display:none}
.mnav .mlinks{position:absolute;left:0;right:0;top:100%;background:var(--ink-1);border-bottom:1px solid var(--line-1);display:flex;flex-direction:column;padding:8px 24px 16px}
.mlinks a{padding:10px 0}
@media(min-width:768px){.navlinks{display:flex}.mnav{display:none}}
@media(min-width:1024px){.navctas{display:flex}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 20px;border-radius:6px;font:600 16px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background-color .14s cubic-bezier(.22,1,.36,1),border-color .14s cubic-bezier(.22,1,.36,1),transform .14s cubic-bezier(.22,1,.36,1)}
.btn-p{background:var(--amber);color:var(--ink-0)}
.btn-p:hover{background:var(--amber-h);color:var(--ink-0);transform:translateY(-1px)}
.btn-p:active{background:var(--amber-p);transform:translateY(0)}
.btn-s{border:1px solid var(--line-2);color:var(--n-100);font-weight:500;background:transparent}
.btn-s:hover{border-color:var(--n-300);color:var(--n-100)}
.btn-s:active{background:var(--ink-2)}
.btn-c{height:40px;font-size:14px;padding:0 16px}
.ctarow{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:32px 0 0}
.ctarow .cap{margin:0;flex-basis:100%}
/* hero */
.hero{display:grid;gap:48px;align-items:center;padding-top:16px}
.hero .lead{max-width:52ch}
.demo{margin:0;min-width:0}
.demo pre{margin:0;font-size:13.5px;line-height:1.75;padding:24px 28px;tab-size:2}
.demo .codecap{margin:14px 0 0;letter-spacing:.04em}
@media(min-width:1024px){.hero{grid-template-columns:1.1fr 1fr;gap:64px}}
/* stat blocks */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:40px 32px;border-top:1px solid var(--line-1);padding-top:36px;margin-top:56px}
.stat .fig{font:500 clamp(28px,1vw + 24px,40px)/1.12 var(--mono);font-variant-numeric:tabular-nums;color:var(--n-100);margin:8px 0 6px}
.stat .basis{font-size:14px;line-height:1.5;color:var(--n-200);margin:0 0 10px}
.src{font:500 12px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--n-300);margin:0}
/* tier badges */
.b{display:inline-block;font:500 12px/1.33 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:4px;white-space:nowrap;vertical-align:middle}
.b-i{background:var(--n-100);color:var(--ink-0)}
.b-p{border:1px solid var(--n-300);color:var(--n-200)}
.b-t{border:1px dashed var(--n-500);color:var(--n-300)}
/* tables */
.tw{overflow-x:auto;margin:32px 0}
table{border-collapse:collapse;width:100%;min-width:560px}
caption{caption-side:top;text-align:left;font-size:13px;color:var(--n-300);padding-bottom:12px}
th{font:500 12px/1.33 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--n-300);text-align:left}
th,td{padding:14px 20px 14px 0;border-bottom:1px solid var(--line-1);font-size:14px;line-height:1.55;vertical-align:top}
td{color:var(--n-200)}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--n-100);white-space:nowrap}
.tw th:first-child,.tw td:first-child{position:sticky;left:0;background:var(--ink-0)}
tbody tr:hover td{background:var(--ink-1)}
.tw tbody tr:hover td:first-child{background:var(--ink-1)}
tfoot td{border-bottom:0;font-size:13px;color:var(--n-300)}
/* code */
pre{background:var(--ink-1);border:1px solid var(--line-1);border-radius:8px;padding:16px 20px;overflow-x:auto;font:400 14px/1.57 var(--mono);color:var(--n-200);margin:0 0 8px;max-height:480px}
code{font-family:var(--mono)}
p code,li code{font-size:.9em;color:var(--n-100);background:var(--ink-2);padding:1px 5px;border-radius:4px}
.ck{color:var(--n-100)}
.cp{color:var(--n-300)}
.chl{color:var(--amber)}
.codecap{font:500 12px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--n-300);margin:0 0 24px}
/* two-column contrast */
.duo{display:grid;gap:24px;margin:32px 0}
.duo>div{border:1px solid var(--line-1);border-radius:8px;padding:28px;background:var(--ink-1)}
.duo .eyebrow{margin-bottom:12px}
.duo ul{margin:0;padding-left:20px}
.duo li{margin-bottom:12px;font-size:15px;line-height:1.6}
.duo .fail{color:var(--coral)}
.duo .hold{color:var(--green)}
@media(min-width:768px){.duo{grid-template-columns:1fr 1fr}}
/* cards */
.cards{display:grid;gap:24px;margin:32px 0}
.card{background:var(--ink-2);border:1px solid var(--line-1);border-radius:8px;padding:28px;position:relative;transition:border-color .16s ease,transform .16s ease}
.card h3{font-size:22px;line-height:1.36;margin-bottom:8px}
.card p{font-size:15px;line-height:1.6;color:var(--n-200);margin-bottom:12px}
.card .go{font-size:14px}
.card:hover,.card:focus-within{border-color:var(--n-500);transform:translateY(-2px)}
@media(min-width:768px){.cards{grid-template-columns:1fr 1fr}}
/* faq + details */
details.fold{border-top:1px solid var(--line-1)}
details.fold:last-of-type{border-bottom:1px solid var(--line-1)}
details.fold summary{cursor:pointer;font:600 17px/1.5 var(--sans);color:var(--n-100);padding:20px 0;list-style:none;display:flex;gap:14px}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::before{content:"\203A";color:var(--n-400);display:inline-block;transition:transform .16s cubic-bezier(.22,1,.36,1);flex:none}
details.fold[open] summary::before{transform:rotate(90deg);color:var(--amber)}
details.fold summary:hover::before{color:var(--n-100)}
details.fold .body{padding:0 0 28px 33px;max-width:68ch}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details.fold::details-content{block-size:0;overflow-y:clip;transition:block-size .22s ease,content-visibility .22s allow-discrete}
  details.fold[open]::details-content{block-size:auto}
}
/* figure / map */
figure{margin:32px 0}
.map svg{width:100%;height:auto;display:block;background:var(--ink-0)}
figcaption{margin-top:12px}
/* invariant / callout */
.callout{border-left:2px solid var(--amber);padding:4px 0 4px 20px;margin:32px 0;color:var(--n-100)}
.callout p{margin:0}
/* strip */
.strip{display:flex;flex-wrap:wrap;gap:48px;margin:32px 0 0}
.strip .name{font:600 18px/1.2 var(--sans);color:var(--n-300);margin:0 0 6px}
/* footnote */
.fn{border-top:1px solid var(--line-1);margin-top:48px;padding-top:16px}
/* footer */
footer{border-top:1px solid var(--line-1);margin-top:64px;padding:48px 0 32px}
.fcols{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.fcols .eyebrow{margin-bottom:12px}
.fcols ul{list-style:none;margin:0;padding:0}
.fcols li{margin-bottom:10px}
.fcols a{font-size:14px;color:var(--n-300);text-decoration:none}
.fcols a:hover{color:var(--n-100);text-decoration:underline}
.fcols .cap{margin-top:4px}
.fbottom{margin-top:48px;padding-top:24px}
.aurora{height:2px;width:180px;background:linear-gradient(90deg,var(--amber),var(--coral),var(--magenta));margin-bottom:20px}
.fbottom img{margin-bottom:16px}
.fbottom .cap{margin-bottom:6px}
@media(min-width:768px){
  .wrap{padding-inline:32px}
  section{padding:96px 0}
}
@media(max-width:767px){
  details.fold summary{font-size:16px}
  .stat .fig{font-size:28px}
  details.fold .body{padding-left:0}
  body{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation:none!important}
}
/* placeholder slots — working-build only; .ph must not survive to deploy */
.ph{border:1px dashed var(--ochre);border-radius:6px;padding:16px 20px;margin:24px 0}
.ph>.cap:first-child{color:var(--ochre);letter-spacing:.06em;text-transform:uppercase;font:500 12px/1.6 var(--mono);margin-bottom:12px}
/* copy button (progressive enhancement; JS on pages with runnable samples) */
pre{position:relative}
.copybtn{position:absolute;top:10px;right:10px;font:500 12px/1 var(--mono);letter-spacing:.05em;color:var(--n-300);background:var(--ink-2);border:1px solid var(--line-2);border-radius:5px;padding:7px 10px;cursor:pointer;transition:color .12s ease,border-color .12s ease}
.copybtn:hover{color:var(--n-100);border-color:var(--n-300)}
/* mechanism diagram */
.mech svg{width:100%;height:auto;display:block}
/* logo strip marks — monochrome n-300 via mask (06 §4.9: no full-colour logo soup) */
.strip>div{display:flex;flex-direction:column;justify-content:flex-end}
.strip .lg{display:block;height:30px;background:var(--n-300);-webkit-mask:var(--m) no-repeat left center/contain;mask:var(--m) no-repeat left center/contain;margin-bottom:8px}
.strip .cap{margin:0}