/* Fadenstack website. Tokens follow brand/tokens; dark first, light by preference or toggle. */
:root{
  color-scheme: dark;
  --bg:#0A0E1A; --bg-2:#0D1220; --paper:#111827; --paper-2:#172033;
  --line:#1E2638; --line-2:#2D3649;
  --ink:#F3F4F6; --ink-2:#B9C0CC; --ink-3:#8A92A3;
  --accent:#81A1C1; --accent-strong:#A5BFD9; --accent-soft:rgba(129,161,193,.16); --on-accent:#0A0E1A;
  --thread:#FF4D6D;
  --btn:#F3F4F6; --btn-ink:#0A0E1A; --btn-hover:#FFFFFF;
  --ok:#2E7D32;
  --res-1:#81A1C1; --res-2:#5E81AC; --res-3:#B48EAD; --res-4:#4B5263;
  --iso-top:#1A2234; --iso-left:#141B2A; --iso-right:#0E1421; --iso-edge:#465169;
  --plate-fill:#101726; --plate-stroke:#F3F4F6;
  --code-bg:#070B15; --code-line:#1A2132;
  --shadow:0 30px 60px -30px rgba(0,0,0,.7);
  --radius:12px;
  --font-display:"Sora","IBM Plex Sans",system-ui,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-h1:clamp(2.5rem,1.3rem + 3.9vw,4.1rem);
  --fs-h2:clamp(1.9rem,1.25rem + 2.2vw,2.9rem);
  --fs-lead:clamp(1.08rem,1rem + .4vw,1.26rem);
  --section:clamp(72px,9vw,128px);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg:#F5F7FB; --bg-2:#ECF0F6; --paper:#FFFFFF; --paper-2:#F1F4F9;
    --line:#DCE2EB; --line-2:#C5CEDB;
    --ink:#0A0E1A; --ink-2:#343B4C; --ink-3:#5A6273;
    --accent:#486A91; --accent-strong:#355478; --accent-soft:rgba(72,106,145,.12); --on-accent:#FFFFFF;
    --thread:#E2325A;
    --btn:#0A0E1A; --btn-ink:#F3F4F6; --btn-hover:#1C2336;
    --res-1:#486A91; --res-2:#8FAACA; --res-3:#8E6A87; --res-4:#B3BAC6;
    --iso-top:#FFFFFF; --iso-left:#E4E9F1; --iso-right:#CFD7E4; --iso-edge:#56607A;
    --plate-fill:#FFFFFF; --plate-stroke:#0A0E1A;
    --shadow:0 30px 60px -34px rgba(10,14,26,.35);
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#F5F7FB; --bg-2:#ECF0F6; --paper:#FFFFFF; --paper-2:#F1F4F9;
  --line:#DCE2EB; --line-2:#C5CEDB;
  --ink:#0A0E1A; --ink-2:#343B4C; --ink-3:#5A6273;
  --accent:#486A91; --accent-strong:#355478; --accent-soft:rgba(72,106,145,.12); --on-accent:#FFFFFF;
  --thread:#E2325A;
  --btn:#0A0E1A; --btn-ink:#F3F4F6; --btn-hover:#1C2336;
  --res-1:#486A91; --res-2:#8FAACA; --res-3:#8E6A87; --res-4:#B3BAC6;
  --iso-top:#FFFFFF; --iso-left:#E4E9F1; --iso-right:#CFD7E4; --iso-edge:#56607A;
  --plate-fill:#FFFFFF; --plate-stroke:#0A0E1A;
  --shadow:0 30px 60px -34px rgba(10,14,26,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink-2);font:400 1.0625rem/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--accent)}
a:hover{color:var(--accent-strong)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3{color:var(--ink);font-family:var(--font-display);text-wrap:balance}
code,pre{font-family:var(--font-mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:100;background:var(--btn);color:var(--btn-ink);padding:8px 12px;border-radius:var(--radius)}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,5vw,72px);position:relative;z-index:2}
main{position:relative;display:block}
section{scroll-margin-top:72px}
#thread{position:absolute;top:0;left:0;z-index:1;pointer-events:none;overflow:visible}
#thread path{fill:none;stroke:var(--thread);stroke-width:2;stroke-linecap:round;opacity:.9}

.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:var(--radius);font:600 .98rem/1.1 var(--font-body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--btn);color:var(--btn-ink)}
.btn-primary:hover{background:var(--btn-hover);color:var(--btn-ink)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-3);background:var(--paper-2);color:var(--ink)}
.btn-sm{padding:9px 14px;font-size:.9rem}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:0;background:transparent;color:var(--ink-2);cursor:pointer}
.icon-btn:hover{background:var(--paper-2);color:var(--ink)}
.icon-btn svg{width:20px;height:20px}
.icon-btn .i-moon{display:none}
.icon-btn[data-mode="light"] .i-sun{display:none}
.icon-btn[data-mode="light"] .i-moon{display:block}

.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand .mark{width:30px;height:30px}
.wordmark{font:600 1.32rem/1 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.m-plate{stroke:var(--plate-stroke)}
.m-thread{stroke:var(--thread)}
.primary{display:flex;gap:2px;margin-left:10px}
.primary a{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:var(--radius);color:var(--ink-2);text-decoration:none;font-weight:500;font-size:.95rem;white-space:nowrap}
.primary a:hover{background:var(--paper-2);color:var(--ink)}
.primary a svg,.ext svg{width:12px;height:12px;opacity:.7}
.head-tools{margin-left:auto;display:flex;align-items:center;gap:6px}
/* The phone menu takes over below 920px, and wherever the header's items do not fit on one line in the page's
   language (site.js measures the header and sets nav-tight on <html>). */
.fab{display:none;place-items:center;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;border:0;background:var(--btn);color:var(--btn-ink);box-shadow:0 12px 30px -8px rgba(0,0,0,.55);z-index:61;cursor:pointer}
.fab svg{width:24px;height:24px}
.fab .i-close{display:none}
.fab[aria-expanded="true"] .i-menu{display:none}
.fab[aria-expanded="true"] .i-close{display:block}
@media (max-width: 919px){
  .primary,.head-tools .icon-btn{display:none}
  .fab{display:grid}
}
:root.nav-tight :is(.primary,.head-tools .icon-btn){display:none}
:root.nav-tight .fab{display:grid}
.sheet{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow)}
.sheet nav{display:grid}
.sheet nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:var(--radius);color:var(--ink);text-decoration:none;font:600 1.05rem var(--font-display)}
.sheet nav a:hover{background:var(--paper-2)}
.sheet-tools{display:flex;justify-content:flex-end;border-top:1px solid var(--line);margin-top:8px;padding:8px 6px 2px}

.eyebrow{position:relative;display:inline-flex;align-items:center;gap:12px;margin:0;font:500 .76rem/1.3 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.knot{display:none;position:absolute;left:-37px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;border:2px solid var(--thread);background:var(--knot-fill,var(--bg))}
@media (min-width: 1000px){.knot{display:block}}
.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);letter-spacing:.04em}
.planned{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px dashed var(--ink-3);color:var(--ink-2);font:500 .72rem/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.planned::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid currentColor}
h2{font-weight:600;font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.028em;margin:18px 0 18px}
.sec-head{max-width:780px}
.sec-lead{font-size:1.14rem;line-height:1.6;color:var(--ink-2);max-width:40em;margin:0}
.section{padding-block:var(--section)}
.alt{background:var(--bg-2);--knot-fill:var(--bg-2)}

/* hero */
.hero{padding-block:clamp(44px,6vw,88px) clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,64px);align-items:center}
.hero h1{font-weight:600;font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.035em;margin:22px 0 22px}
.lead{font-size:var(--fs-lead);line-height:1.58;color:var(--ink-2);max-width:34em;margin:0}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.install{display:flex;align-items:stretch;max-width:440px;margin-top:28px;background:var(--code-bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.install pre{margin:0;padding:14px 16px;flex:1;min-width:0;overflow-x:auto;font-size:.9rem;line-height:1.7;color:#E5E9F0}
.copy{display:flex;align-items:center;gap:8px;padding:0 16px;border:0;border-left:1px solid var(--code-line);background:transparent;color:#9AA3B4;font:500 .8rem var(--font-mono);cursor:pointer}
.copy:hover{color:#FFFFFF}
.copy svg{width:16px;height:16px}
.copy.copied{color:#A3BE8C}
.install-note{margin:10px 0 0;font-size:.9rem;color:var(--ink-3)}
.hero-visual{position:relative;width:100%;max-width:640px;margin-inline:auto}
.stage{position:relative;width:100%;aspect-ratio:640/550}
.stage svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible}
.plate-labels{list-style:none;margin:0;padding:0}
.plate-labels li{position:absolute;left:68.5%;width:31.5%;transform:translateY(-50%)}
.plate-labels li:nth-child(1){top:25.45%}
.plate-labels li:nth-child(2){top:50.9%}
.plate-labels li:nth-child(3){top:76.36%}
.pl-title{display:flex;align-items:center;gap:8px;font:600 1.02rem/1.2 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.pl-title .dash{display:block;width:16px;height:3px;border-radius:2px;background:var(--thread);flex:none}
.pl-sub{display:block;margin-top:4px;font:400 .76rem/1.5 var(--font-mono);color:var(--ink-3)}
.iso .plate .f-t{fill:var(--plate-fill);stroke:var(--plate-stroke);stroke-width:2;stroke-linejoin:round}
.iso .plate .f-l{fill:var(--iso-left);stroke:var(--plate-stroke);stroke-width:2;stroke-linejoin:round}
.iso .plate .f-r{fill:var(--iso-right);stroke:var(--plate-stroke);stroke-width:2;stroke-linejoin:round}
.iso .plate.tp .f-t,.iso .plate.tp .f-l,.iso .plate.tp .f-r{stroke:var(--thread);stroke-width:2.5}
.iso .obj .f-t{fill:var(--iso-top);stroke:var(--iso-edge);stroke-width:1.25;stroke-linejoin:round}
.iso .obj .f-l{fill:var(--iso-left);stroke:var(--iso-edge);stroke-width:1.25;stroke-linejoin:round}
.iso .obj .f-r{fill:var(--iso-right);stroke:var(--iso-edge);stroke-width:1.25;stroke-linejoin:round}
.iso .ghost polygon{fill:none;stroke:var(--ink-3);stroke-width:1.25;stroke-dasharray:4 4;stroke-linejoin:round}
.iso .thr{stroke:var(--thread);stroke-width:3;stroke-linecap:round}
.iso .thr-dot{fill:var(--thread)}
.iso .led{stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.iso .leader{stroke:var(--line-2);stroke-width:1.5}
.iso .pulse{fill:var(--thread)}
.iso .pulse-halo{fill:var(--thread);opacity:.22}
@media (max-width: 999px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero-visual{margin-top:8px}}
@media (max-width: 640px){
  .stage{aspect-ratio:430/550;overflow:hidden}
  .stage svg{width:148.84%}
  .iso .leader{display:none}
  .plate-labels{display:grid;gap:14px;margin-top:12px}
  .plate-labels li{position:static;width:auto;transform:none}
}

.strip{background:var(--bg-2);border-block:1px solid var(--line)}
.strip .wrap{background:var(--bg-2)}
.strip ul{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;margin:0;padding:18px 0;list-style:none;font:500 .8rem/1.3 var(--font-mono);letter-spacing:.02em;color:var(--ink-3)}

/* one system */
.compare-wrap{margin-top:48px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.compare{width:100%;border-collapse:collapse;min-width:620px}
.compare th,.compare td{padding:16px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line);font-size:.97rem}
.compare thead th{border-top:0;font:500 .74rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-2)}
.compare tbody th{font:600 1rem/1.3 var(--font-display);color:var(--ink);width:22%}
.compare td.usual{color:var(--ink-3)}
.compare td.ours{color:var(--ink)}
.compare td.ours::before{content:"";display:inline-block;width:12px;height:3px;border-radius:2px;background:var(--thread);margin:0 10px 3px 0}

/* audiences */
.aud-rows{display:grid;gap:clamp(56px,7vw,96px);margin-top:56px}
.aud-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center}
.aud-row.flip > :first-child{order:2}
.aud-label{font:500 .76rem/1.3 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.aud-row h3{font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);line-height:1.15;letter-spacing:-.02em;margin:12px 0 14px}
.aud-row p{margin:0;max-width:34em}
.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:.98rem}
.ticks svg{width:18px;height:18px;color:var(--accent);margin-top:4px}
.shot{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow);background:#0A0E1A}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:10px 14px;font:.78rem var(--font-mono);color:#8A92A3;border-top:1px solid #1F2739;background:#0D1220}
.code-win{background:var(--code-bg);border:1px solid var(--code-line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.code-bar{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--code-line);font:500 .74rem/1 var(--font-mono);color:#8A92A3}
.b-dots{display:inline-flex;gap:6px}
.b-dots i{display:block;width:10px;height:10px;border-radius:50%;background:#2A3346}
.code-win pre{margin:0;padding:20px;overflow-x:auto;font-size:.86rem;line-height:1.75;color:#E5E9F0}
.c-dim{color:#7B8496}.c-ok{color:#A3BE8C}.c-q{color:#EBCB8B}.c-str{color:#A3BE8C}.c-kw{color:#B48EAD}.c-fn{color:#88C0D0}.c-num{color:#D08770}
@media (max-width: 999px){.aud-row{grid-template-columns:minmax(0,1fr)}.aud-row.flip > :first-child{order:0}}

/* agents */
.agents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:52px;align-items:start}
.agent{display:grid;gap:14px}
.panel{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow);background:#1C1C1C;max-width:360px;width:100%;justify-self:center}
.panel img{display:block;width:100%;height:auto}
.agent h3{font-size:1.15rem;margin:4px 0 0}
.agent p{margin:0;font-size:.96rem}
.agent .where{font:500 .74rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.agent-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.note{border-top:1px solid var(--line);padding-top:16px}
.note b{display:block;font:600 1rem/1.3 var(--font-display);color:var(--ink);margin-bottom:6px}
.note p{margin:0;font-size:.95rem}
@media (max-width: 999px){.agents{grid-template-columns:minmax(0,1fr);gap:40px}.agent-notes{grid-template-columns:minmax(0,1fr)}}

/* managed once */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;margin-top:52px;border-top:1px solid var(--line)}
.three article{padding:30px 0 34px;border-bottom:1px solid var(--line)}
.three .kicker{display:flex;align-items:center;gap:10px;margin:0;font:500 .74rem/1.3 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.three .kicker svg{width:22px;height:22px;color:var(--accent)}
.three h3{font-size:1.3rem;line-height:1.25;letter-spacing:-.015em;margin:14px 0 10px}
.three p{margin:0;font-size:.97rem}
.router-note{margin-top:36px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.router-note .modes{display:flex;gap:8px;flex-wrap:wrap}
.router-note .modes span{font:500 .78rem var(--font-mono);padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2)}
.router-note p{margin:0}
@media (max-width: 999px){.three{grid-template-columns:minmax(0,1fr)}.router-note{grid-template-columns:minmax(0,1fr)}}

/* path */
.path{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.path li{position:relative}
.node{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--thread);background:var(--knot-fill,var(--bg));font:600 .95rem/1 var(--font-display);color:var(--ink)}
.path h3{font-size:1.02rem;line-height:1.25;margin:18px 0 6px}
.path p{margin:0;font-size:.92rem;line-height:1.5}
@media (max-width: 999px){
  .path{grid-template-columns:minmax(0,1fr);gap:0}
  .path li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;padding-bottom:28px}
  .path .node{grid-row:1 / span 2}
  .path h3{margin-top:10px}
  .path li:not(:last-child)::before{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--thread)}
}
.trace-card{margin:48px 0 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.trace-card figcaption{display:flex;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);font:500 .74rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.tr{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:14px 20px;border-top:1px solid var(--line);align-items:baseline}
.tr:first-of-type{border-top:0}
.tr-k{font:500 .74rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.tr-v{font:400 .95rem/1.6 var(--font-mono);color:var(--ink)}
.pii{background:var(--accent-soft);color:var(--ink);border-radius:999px;padding:1px 8px}
.tok{color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:1px 8px;font-weight:500}
@media (max-width: 640px){.tr{grid-template-columns:minmax(0,1fr);gap:4px}}

/* trust */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
.res-card{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.rc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.rc-head b{display:block;font:600 1.08rem/1.2 var(--font-display);color:var(--ink)}
.rc-head small{display:block;font-size:.86rem;color:var(--ink-3);margin-top:2px}
.rc-range{font:500 .74rem/1 var(--font-mono);color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:6px 10px;white-space:nowrap}
.rc-body{display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px;margin:22px 0}
.donut{width:168px;height:168px;flex:none}
.d-track{fill:none;stroke:var(--line);stroke-width:14}
.d-seg{fill:none;stroke-width:14}
.d-big{font:600 22px var(--font-display);fill:var(--ink);text-anchor:middle}
.d-small{font:500 8.5px var(--font-mono);fill:var(--ink-3);text-anchor:middle;letter-spacing:.06em;text-transform:uppercase}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:10px;flex:1;min-width:200px}
.legend li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:.93rem;color:var(--ink-2)}
.legend i{width:12px;height:12px;border-radius:50%}
.legend b{font:600 .93rem var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums}
.res-card figcaption{margin-top:6px;font:.76rem var(--font-mono);color:var(--ink-3);text-align:right}
@media (max-width: 999px){.split{grid-template-columns:minmax(0,1fr)}}

/* watch */
.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.video{display:grid;gap:10px;align-content:start;margin:0}
.thumb{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#0A0E1A;border:1px solid var(--line-2)}
.thumb svg.th{position:absolute;inset:0;width:100%;height:100%}
.thumb iframe,.thumb video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.thumb .play{position:absolute;left:14px;bottom:12px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(243,244,246,.94);color:#0A0E1A;display:grid;place-items:center;padding:0;cursor:pointer;transition:transform .15s}
.thumb .play svg{width:18px;height:18px;margin-left:2px}
.thumb button.play:hover{transform:scale(1.06)}
.thumb .play.off{background:rgba(243,244,246,.16);color:#C9CED8;cursor:default}
.thumb .len{position:absolute;right:10px;bottom:10px;font:500 .74rem/1 var(--font-mono);color:#F3F4F6;background:rgba(10,14,26,.82);padding:5px 7px;border-radius:999px}
.thumb .soon{position:absolute;right:10px;top:10px;font:500 .68rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#C9CED8;border:1px dashed #8A92A3;padding:5px 8px;border-radius:999px;background:rgba(10,14,26,.72)}
.video .for{font:500 .74rem/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.video h3{font:600 1.05rem/1.3 var(--font-display);color:var(--ink);margin:0;letter-spacing:-.005em}
.video p{margin:0;font-size:.95rem}
.video .rel{font-size:.9rem}
.watch-note{margin-top:24px;font-size:.9rem;color:var(--ink-3);max-width:46em}
@media (max-width: 999px){.videos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.videos{grid-template-columns:minmax(0,1fr)}}
/* start */
.start{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,64px);margin-top:48px;align-items:start}
.steps{display:grid;border-top:1px solid var(--line);min-width:0}
.panels{min-width:0}
.step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:18px;width:100%;padding:20px 12px 20px 0;background:none;border:0;border-bottom:1px solid var(--line);color:inherit;font:inherit;text-align:left;cursor:pointer}
.num{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2px solid var(--line-2);background:var(--knot-fill,var(--bg));font:600 .9rem/1 var(--font-display);color:var(--ink);transition:background-color .15s,border-color .15s,color .15s}
.step-t{display:block;font:600 1.1rem/1.3 var(--font-display);color:var(--ink);margin-top:6px}
.step-d{display:block;margin-top:6px;font-size:.96rem;line-height:1.55;color:var(--ink-2)}
.step-d code{font-size:.88em;color:var(--ink)}
.step:hover .step-t{color:var(--accent)}
.step[aria-selected="true"] .num{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.panels .code-win pre{min-height:300px}
@media (max-width: 999px){.start{grid-template-columns:minmax(0,1fr)}}

/* docs + editions */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px}
.three-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.card-url{margin:0;font:500 .78rem var(--font-mono);color:var(--accent)}
.card h3{font-size:1.55rem;letter-spacing:-.02em;margin:10px 0 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card > p{margin:0 0 18px;color:var(--ink-2)}
.list{list-style:none;margin:0 0 26px;padding:0;display:grid}
.list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:.96rem;color:var(--ink-2)}
.list svg{width:18px;height:18px;color:var(--accent);margin-top:3px}
.card .btn{margin-top:auto;align-self:flex-start}
.price{margin:12px 0 4px;font:600 1.8rem/1.1 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.price-note{margin:0 0 20px;font-size:.95rem;color:var(--ink-2)}
.card.planned-card{border-style:dashed}
.fine{margin-top:18px;font-size:.88rem;color:var(--ink-3)}
@media (max-width: 999px){.three-cards{grid-template-columns:minmax(0,1fr)}}
@media (max-width: 800px){.two{grid-template-columns:minmax(0,1fr)}}

/* name */
.name-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,88px);align-items:center}
.marks{display:flex;align-items:center;gap:clamp(16px,3vw,32px)}
.marks .iso-mark{width:clamp(140px,18vw,210px);height:auto;flex:none}
.marks .front-f{width:clamp(56px,7vw,84px);height:auto;flex:none}
.marks .turn{display:flex;flex-direction:column;align-items:center;gap:6px;font:500 .72rem/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.marks .turn svg{width:36px;height:12px;color:var(--ink-3)}
.name-grid h2 em{font-style:italic;font-weight:600}
.name-text{margin:0 0 14px;font-size:1.06rem;line-height:1.7;color:var(--ink-2);max-width:38em}
.name-text em{color:var(--ink)}
@media (max-width: 999px){.name-grid{grid-template-columns:minmax(0,1fr)}}

.final{padding-block:clamp(80px,10vw,140px);border-top:1px solid var(--line)}
.final h2{font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem);max-width:15ch;margin-top:0}
.foot{background:var(--bg-2);border-top:1px solid var(--line);padding-block:56px 32px;font-size:.93rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:32px}
.foot-brand p{margin:12px 0 0;color:var(--ink-2)}
.foot-brand .muted{color:var(--ink-3);margin-top:6px}
.foot nav{display:grid;gap:8px;align-content:start}
.foot-h{margin:0 0 4px;font:500 .74rem/1.3 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.foot nav a{color:var(--ink-2);text-decoration:none}
.foot nav a:hover{color:var(--ink)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-3);font-size:.85rem}
@media (max-width: 999px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1 / -1}}
@media (max-width: 919px){.foot{padding-bottom:104px}}

/* residency colours as classes, so the page needs no inline styles */
.d-seg.r1{stroke:var(--res-1)}.d-seg.r2{stroke:var(--res-2)}.d-seg.r3{stroke:var(--res-3)}
.legend i.r1{background:var(--res-1)}.legend i.r2{background:var(--res-2)}.legend i.r3{background:var(--res-3)}.legend i.r4{background:var(--res-4)}

/* navigation state */
.primary a[aria-current="page"]{color:var(--ink);background:var(--paper-2)}
.sheet nav a[aria-current="page"]{background:var(--paper-2)}
.more-link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-weight:600;text-decoration:none}
.more-link svg{width:18px;height:18px}

/* inner pages */
.page-head{padding-block:clamp(48px,7vw,104px) clamp(36px,5vw,64px);border-bottom:1px solid var(--line)}
.page-head h1{font-weight:600;font-size:clamp(2.3rem,1.4rem + 3vw,3.5rem);line-height:1.06;letter-spacing:-.032em;margin:20px 0 20px;max-width:18ch}
.page-head .lead{max-width:40em}
.page-head .cta-row{margin-top:28px}
.on-page{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.on-page a{display:inline-flex;padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2);text-decoration:none;font:500 .85rem/1.3 var(--font-body)}
.on-page a:hover{border-color:var(--ink-3);color:var(--ink)}
h3{text-wrap:balance}

.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;margin-top:56px}
.feature + .feature{padding-top:56px;border-top:1px solid var(--line)}
.feature.flip > :first-child{order:2}
.feature h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.8rem);line-height:1.2;letter-spacing:-.02em;margin:10px 0 12px}
.feature p{margin:0 0 14px;max-width:36em}
.feature .panel{max-width:340px}
.feature .shot{align-self:center}
@media (max-width: 999px){.feature{grid-template-columns:minmax(0,1fr)}.feature.flip > :first-child{order:0}}

.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.fact{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.fact svg{width:24px;height:24px;color:var(--accent)}
.fact h3{font-size:1.12rem;line-height:1.3;margin:14px 0 8px}
.fact p{margin:0;font-size:.96rem}
.fact ul{margin:10px 0 0;padding-left:1.1em;font-size:.95rem}
.fact li + li{margin-top:4px}
@media (max-width: 999px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.facts{grid-template-columns:minmax(0,1fr)}}

.req{width:100%;border-collapse:collapse;margin-top:40px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.96rem}
.req-wrap{overflow-x:auto;border-radius:var(--radius)}
.req th,.req td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.req thead th{border-top:0;font:500 .74rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-2)}
.req tbody th{font:600 .98rem/1.35 var(--font-display);color:var(--ink);width:24%}
.req td{color:var(--ink-2)}
.req td.yes{color:var(--ink)}
.req td.no{color:var(--ink-3)}
.req .planned{margin-left:0}

.callout{margin-top:40px;padding:22px 24px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);background:var(--paper)}
.callout b{display:block;color:var(--ink);font:600 1.02rem/1.3 var(--font-display);margin-bottom:6px}
.callout p{margin:0}
.callout p + p{margin-top:8px}

.faq{margin-top:40px;border-top:1px solid var(--line);max-width:52em}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;list-style:none;font:600 1.08rem/1.35 var(--font-display);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.4rem/1 var(--font-body);color:var(--ink-3)}
.faq details[open] summary::after{content:"–"}
.faq details > div{padding:0 0 22px}
.faq details p{margin:0 0 10px;max-width:44em}

.cmd{margin:16px 0 0;background:var(--code-bg);border:1px solid var(--code-line);border-radius:var(--radius);padding:16px 18px;overflow-x:auto;font-size:.88rem;line-height:1.75;color:#E5E9F0}

/* legal and long text */
.prose{max-width:46em;padding-block:clamp(40px,6vw,80px)}
.prose h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.8rem);margin:48px 0 12px;letter-spacing:-.02em}
.prose h3{font-size:1.12rem;margin:28px 0 8px}
.prose p,.prose ul,.prose ol,.prose address{margin:0 0 14px}
.prose address{font-style:normal}
.prose li + li{margin-top:6px}
.prose .lang-switch{display:flex;gap:8px;margin:0 0 8px}
.prose hr{border:0;border-top:1px solid var(--line);margin:56px 0}
.prose .muted{color:var(--ink-3);font-size:.92rem}
.ph{background:var(--accent-soft);color:var(--ink);border-radius:4px;padding:0 4px}

/* 404 */
.lost{padding-block:clamp(80px,12vw,160px)}
.lost h1{font-size:clamp(2.4rem,1.5rem + 3vw,3.6rem);letter-spacing:-.03em;margin:18px 0}

.agents.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.agents.four .panel{max-width:300px}
@media (max-width: 1199px){.agents.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px}}
@media (max-width: 640px){.agents.four{grid-template-columns:minmax(0,1fr)}}
.feature .ticks + h3{margin-top:36px}
kbd{font:500 .85em var(--font-mono);padding:1px 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;color:var(--ink);background:var(--paper)}
.split > .callout{margin-top:0}
/* agent cards line up their labels even when the screenshots differ in height */
@supports (grid-template-rows: subgrid){
  .agents{row-gap:0}
  .agent{grid-row:span 4;grid-template-rows:subgrid;row-gap:14px;margin-bottom:28px}
  .agent .panel{align-self:start}
}
.req.wide-first tbody th{width:46%}

/* Languages: the menu in the header, the row in the phone menu, the hint for a visitor whose browser prefers
   another language, and type for Chinese and for long German words. */
.lang-menu{position:relative}
.lang-menu summary{list-style:none;width:auto;padding:0 10px;gap:6px;display:flex;align-items:center;border-radius:999px;font:500 .78rem/1 var(--font-mono);letter-spacing:.04em}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary svg{width:18px;height:18px}
.lang-menu[open] summary{background:var(--paper-2);color:var(--ink)}
.lang-list{position:absolute;right:0;top:calc(100% + 8px);z-index:70;display:grid;min-width:170px;padding:6px;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow)}
.lang-list a{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--radius);color:var(--ink-2);text-decoration:none;font-weight:500}
.lang-list a:hover{background:var(--paper-2);color:var(--ink)}
.lang-list a[aria-current]{color:var(--ink);font-weight:600}
.lang-list a[aria-current]::after{content:"";width:6px;height:6px;margin-left:auto;border-radius:50%;background:var(--accent)}
.sheet-tools{justify-content:space-between;align-items:center;gap:8px}
.sheet .sheet-langs{display:flex;flex-wrap:wrap;gap:2px}
.sheet .sheet-langs a{min-height:40px;padding:0 10px;font:500 .95rem var(--font-body);color:var(--ink-2)}
.sheet .sheet-langs a[aria-current]{color:var(--ink);background:var(--paper-2);font-weight:600}
.lang-hint{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;padding:8px 56px 8px 16px;position:relative;background:var(--paper-2);border-bottom:1px solid var(--line);color:var(--ink);font-size:.93rem}
.lang-hint a{font-weight:600}
.lang-hint button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px}
.binding{max-width:46em;margin:clamp(32px,5vw,56px) 0 calc(-1 * clamp(16px,3vw,40px));padding:12px 16px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--paper);font-size:.95rem}
:root:lang(zh){
  --font-display:"Sora","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC",system-ui,sans-serif;
  --font-body:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC",system-ui,sans-serif;
}
:lang(zh) :is(h1,h2,h3,.eyebrow,.aud-label,.kicker,.foot-h,.where,.for){letter-spacing:0}
:lang(zh) .page-head h1{max-width:14em}
:is(:lang(de),:lang(fr),:lang(es)) :is(h1,h2,h3,.prose){-webkit-hyphens:auto;hyphens:auto}
h1,h2,h3{overflow-wrap:break-word}
/* The header on narrower screens: the menu items closer together and the language menu as the globe alone,
   so the button keeps one line in every language. Below 920px the phone menu takes over. */
.head-tools .btn{white-space:nowrap}
@media (max-width: 1199px){
  .head-row{gap:14px}
  .primary{margin-left:4px}
  .primary a{padding:8px 9px}
  .lang-menu summary{width:40px;padding:0;justify-content:center}
  .lang-code{display:none}
}
/* The hero's plate labels beside the picture need room; where the picture is narrow (two columns on a small
   laptop, or long labels in some languages) they go below it, as on phones. Pills keep one line. */
.hero-visual{container-type:inline-size}
@container (max-width: 520px){
  .stage{aspect-ratio:430/550;overflow:hidden}
  .stage svg{width:148.84%}
  .iso .leader{display:none}
  .plate-labels{display:grid;gap:14px;margin-top:12px}
  .plate-labels li{position:static;width:auto;transform:none}
}
.tag,.planned{white-space:nowrap}