:root{color-scheme:light dark;--ink:#11161c;--ink2:#3b4652;--mut:#5d6975;--line:#e3e7eb;--bg:#fff;--soft:#f5f6f8;--card:#fff;--tint:#fff8e8;--tint2:#fffdf7;--dark:#0e1318;--acc:#f5a30a;--acc-d:#a86600;--link:#9a4a00;--ok:#1b7a43;--r:10px;--w:1120px}
@media (prefers-color-scheme:dark){:root{--ink:#e8edf1;--ink2:#c5ced6;--mut:#9aa6b1;--line:#2a333d;--bg:#0b0f13;--soft:#161d25;--card:#141b22;--tint:#2a2110;--tint2:#1d1a11;--acc-d:#f5a30a;--link:#ffb84d;--ok:#59c98a}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);padding-bottom:64px}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:2px}
a:hover{color:var(--ink)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--card);padding:8px 12px;z-index:99;outline:3px solid var(--acc-d)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,5vw,2.9rem)}
h2{font-size:clamp(1.4rem,3.2vw,1.9rem);margin-top:2.2em;scroll-margin-top:84px}
h3{font-size:1.15rem;margin-top:1.4em}
p{margin:0 0 1em}
ul,ol{padding-left:1.25em;margin:0 0 1em}
li{margin:.25em 0}

/* top bar + header */
.topbar{background:var(--acc);color:#111;font-size:.85rem;font-weight:600;text-align:center;padding:6px 12px}
.hdr{background:var(--dark);color:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid #27303a}
.hdr .wrap{display:flex;align-items:center;gap:16px;min-height:60px}
.logo{color:#fff;text-decoration:none;font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo svg{width:28px;height:28px;flex:none}
.nav{margin-left:auto;display:flex;gap:16px;align-items:center}
.nav a{color:#dfe5ea;text-decoration:none;font-size:.93rem;font-weight:500;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--acc)}
.hdr .btn{padding:9px 14px;font-size:.95rem;white-space:nowrap}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;color:#fff;border:1px solid #39434d;border-radius:8px;padding:7px 12px;font-weight:600;font-size:.9rem}
.menu summary::-webkit-details-marker{display:none}
.menu[open] .menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--dark);border-top:1px solid #27303a;padding:8px 16px 16px;display:grid;max-height:calc(100vh - 120px);overflow:auto}
.menu-panel a{color:#fff;text-decoration:none;padding:12px 4px;border-bottom:1px solid #27303a;font-weight:500}
@media(max-width:1100px){.nav{display:none}.menu{display:block}}
@media(max-width:560px){.hdr .btn.hide-s{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--acc);color:#111;font-weight:800;text-decoration:none;border-radius:var(--r);padding:14px 20px;border:2px solid var(--acc);line-height:1.2;cursor:pointer;font-size:1rem;font-family:inherit}
.btn:hover{background:#ffb829;color:#111}
.btn.alt{background:transparent;color:#fff;border-color:#fff}
.btn.alt:hover{background:#fff;color:#111}
.btn.dark{background:var(--dark);border-color:var(--dark);color:#fff}
.btn svg{width:18px;height:18px;flex:none}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px}

/* hero */
.hero{background:linear-gradient(160deg,#0e1318 0%,#1b242d 100%);color:#fff;padding:34px 0 38px}
.hero .wrap{display:grid;gap:28px;grid-template-columns:1.25fr .9fr;align-items:center}
.hero.slim .wrap{grid-template-columns:1fr}
.hero h1{color:#fff}
.hero .lede{font-size:1.12rem;color:#d6dde3;max-width:46em}
.ticks{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.95rem;color:#e8edf1}
.ticks li::before{content:"\2713";color:var(--acc);font-weight:800;margin-right:6px}
.crumbs{font-size:.85rem;color:#aab4bd;margin:0 0 12px}
.crumbs a{color:#cfd7de}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px}
.crumbs li+li::before{content:"/";margin:0 6px;color:#6f7b86}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}}

/* main */
main .wrap{padding-top:8px;padding-bottom:40px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.cols>article>h2:first-child{margin-top:1.2em}
.side{position:sticky;top:84px;display:grid;gap:16px;margin-top:24px;max-height:calc(100vh - 100px);overflow:auto}
@media(max-width:960px){.cols{grid-template-columns:minmax(0,1fr)}.side{position:static;max-height:none}}
.box{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--card)}
.box h2,.box h3,.box .box-h{font-size:1.05rem;margin:0 0 .5em;font-weight:800}
.box ul{margin:0;padding-left:1.1em;font-size:.95rem}
.box.call{background:var(--dark);color:#fff;border-color:#27303a}
.box.call .btn{width:100%;margin-top:8px}
.box.call p{color:#cfd7de;font-size:.95rem;margin:.3em 0 .4em}
.side nav a{display:block;padding:5px 0;font-size:.95rem}

.answer{background:var(--tint);border-left:5px solid var(--acc);border-radius:0 var(--r) var(--r) 0;padding:14px 18px;margin:22px 0;font-size:1.05rem}
.answer strong{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--acc-d);margin-bottom:4px}
.facts{background:var(--soft);border-radius:var(--r);padding:16px 20px;margin:22px 0}
.facts .box-h{font-weight:800;margin:0 0 .4em}
.facts ul{margin:0}
.ready{border:2px dashed var(--acc);border-radius:var(--r);padding:16px 20px;margin:22px 0;background:var(--tint2)}
.ready .box-h{font-weight:800;margin:0 0 .4em}
.ready ul{margin:0}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:16px 0 8px;padding:0;list-style:none}
.cards li{margin:0}
.card{display:block;height:100%;border:1px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);background:var(--card);transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--acc);box-shadow:0 4px 14px rgba(0,0,0,.07)}
.card b{display:block;font-size:1.05rem;margin-bottom:4px;color:var(--ink)}
.card span{color:var(--mut);font-size:.93rem;display:block}
.card em{font-style:normal;color:var(--link);font-weight:700;font-size:.9rem;display:block;margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:14px 0}
.chips li{margin:0}
.chips a,.chips span{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:.93rem;text-decoration:none;color:var(--ink);background:var(--card)}
.chips a:hover{border-color:var(--acc);background:var(--tint)}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:12px;margin:16px 0}
.steps li{counter-increment:s;position:relative;padding:14px 16px 14px 58px;border:1px solid var(--line);border-radius:var(--r);margin:0}
.steps li::before{content:counter(s);position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--acc);color:#111;font-weight:800;display:grid;place-items:center}
.steps b{display:block}
.tbl{overflow-x:auto;margin:16px 0}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--soft);font-weight:700;white-space:nowrap}
.faq h3{margin-top:1.2em}
.links{list-style:none;padding:0}
.links li{padding:7px 0;border-bottom:1px solid var(--line);margin:0}
.links a{font-weight:600}
.links small{display:block;color:var(--mut)}
.src{font-size:.85rem;color:var(--mut);word-break:break-word}
.src a{color:var(--mut)}
.note,.updated{font-size:.9rem;color:var(--mut)}
.updated{margin-top:2.4em;border-top:1px solid var(--line);padding-top:12px}
.ok{color:var(--ok);font-weight:700}

/* diagrams */
.fig{margin:24px 0;border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--card)}
.fig figcaption{font-size:.9rem;color:var(--mut);margin-top:8px}
.dg{width:100%;height:auto;display:block;color:var(--ink);font:13px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.dg text{fill:currentColor}
.dg .dg-b{font-weight:700}
.dg-fill{fill:var(--soft);stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.dg-hole{fill:var(--card);stroke:currentColor;stroke-width:2}
.dg-chip{fill:var(--acc);fill-opacity:.35;stroke:var(--acc-d);stroke-width:2;stroke-dasharray:4 3}
.dg-thin{stroke:currentColor;stroke-width:1.2;opacity:.55;fill:none}
.dg-lead{stroke:var(--mut);stroke-width:1;fill:none}
.dg-box{fill:var(--soft);stroke:currentColor;stroke-width:1.6}
.dg-arrow{stroke:var(--acc-d);stroke-width:2.5;fill:none}
.dg-head{fill:var(--acc-d)}
.dg-dot{stroke:var(--card);stroke-width:1.5}
.dg-a0{fill:var(--acc-d)}.dg-a1{fill:#2f7fd1}.dg-a2{fill:#2a9d6a}
.dg a{text-decoration:none}
.dg a:hover text{text-decoration:underline}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;padding:0;margin:8px 0 0;font-size:.88rem;color:var(--mut)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.legend .l0{background:var(--acc-d)}.legend .l1{background:#2f7fd1}.legend .l2{background:#2a9d6a}

/* tools */
.tool{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--card);margin:20px 0}
.tool-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.fld{display:grid;gap:4px;font-size:.9rem;font-weight:600}
.fld[hidden]{display:none}
.tool input,.tool select{font:inherit;font-size:1rem;padding:11px 12px;border:1px solid var(--mut);border-radius:8px;background:var(--bg);color:var(--ink);width:100%;min-height:46px}
.tool-out h3{margin-top:1.2em}
.gloss dt{font-weight:800;margin-top:1em;scroll-margin-top:84px}
.gloss dd{margin:0 0 .4em}
.record{border:2px solid var(--ink);border-radius:var(--r);padding:18px;margin:20px 0;max-width:560px}
.record p{margin:0 0 14px;border-bottom:1px solid var(--mut);padding-bottom:18px;font-size:.9rem;color:var(--mut)}
.record .box-h{font-weight:800;margin:0 0 12px;color:var(--ink);border:0;padding:0;font-size:1.1rem}
.reviews{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));list-style:none;padding:0}
.reviews li{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--card);margin:0}
.reviews cite{display:block;font-style:normal;font-weight:700;margin-top:8px;font-size:.92rem}

/* photo placeholders */
.photo{margin:22px 0}
.photo img{border-radius:var(--r);width:100%;object-fit:cover}
.ph{aspect-ratio:var(--ar,16/9);border:2px dashed #b9c2cb;border-radius:var(--r);background:repeating-linear-gradient(45deg,#f1f3f5,#f1f3f5 14px,#e9ecef 14px,#e9ecef 28px);display:grid;place-content:center;text-align:center;padding:16px;color:#4b5661;gap:4px}
.ph b{font-size:.8rem;letter-spacing:.08em}
.ph span{font-size:.92rem;max-width:34em}
.ph code{font-size:.78rem;color:#6b7680}
.hero .ph{background:repeating-linear-gradient(45deg,#232d37,#232d37 14px,#1d262f 14px,#1d262f 28px);border-color:#4a5661;color:#c5ced6}
.hero .ph code{color:#93a0ab}

/* cta band */
.band{background:var(--dark);color:#fff;border-radius:14px;padding:26px 24px;margin:34px 0;border:1px solid #27303a}
.band .band-h{font-size:1.5rem;font-weight:800;margin:0 0 .3em;line-height:1.2}
.band p{color:#cfd7de;margin:0 0 .4em;max-width:46em}
.band .band-links{font-size:.9rem;margin:.8em 0 0;color:#aab4bd}
.band .band-links a{color:#e8edf1}

/* footer */
.ftr{background:var(--dark);color:#b8c2cb;font-size:.92rem;padding:38px 0 26px;margin-top:20px;border-top:1px solid #27303a}
.ftr .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px}
.ftr .f-h{color:#fff;font-weight:800;margin:0 0 .6em;font-size:.95rem}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin:.3em 0}
.ftr a{color:#b8c2cb;text-decoration:none}
.ftr a:hover{color:var(--acc)}
.ftr .legal{border-top:1px solid #27303a;margin-top:26px;padding-top:16px;font-size:.84rem;color:#8a96a1}

/* sticky mobile call bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;background:rgba(14,19,24,.97);border-top:1px solid #27303a}
.bar .btn{padding:12px 8px;font-size:1rem}
@media(min-width:901px){.bar{display:none}body{padding-bottom:0}}

/* keyboard focus */
:focus-visible{outline:3px solid var(--acc-d);outline-offset:2px;border-radius:4px}
.hdr :focus-visible,.hero :focus-visible,.band :focus-visible,.ftr :focus-visible,.bar :focus-visible,.box.call :focus-visible,.topbar :focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}

@media print{.hdr,.bar,.topbar,.side,.band,.ftr,.hero .cta-row,.ticks,.crumbs,.updated,[data-print]{display:none!important}body{padding:0;color:#000;background:#fff}.hero{background:none;color:#000;padding:0}.hero h1{color:#000}.hero .lede{color:#000}.cols{display:block}a{color:#000;text-decoration:none}}

/* two sides: chooser panels, side label in the header, switch link in the top bar */
.topbar a{color:#111;text-underline-offset:2px}
.logo small{font-weight:600;font-size:.72rem;color:var(--acc);border:1px solid #39434d;border-radius:6px;padding:2px 6px;margin-left:2px}
@media(max-width:400px){.logo small{display:none}}
.cols.one{grid-template-columns:minmax(0,1fr)}
.regions{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 10px}
.region{background:var(--dark);color:#fff;border:1px solid #27303a;border-radius:14px;padding:24px;display:flex;flex-direction:column;align-items:flex-start}
.region h2{color:#fff;margin:0 0 .3em;font-size:1.5rem}
.region p{color:#d6dde3;margin:0 0 1em}
.region .cta-row{margin:12px 0 0}
.region .cta-row .btn{padding:10px 14px;font-size:.95rem}
.region-links{margin:16px 0 0!important;font-size:.92rem}
.region-links a{color:#fff}
.region :focus-visible{outline-color:#fff}
@media(max-width:760px){.regions{grid-template-columns:1fr}}
/* on phones the top bar keeps only the side name and the switch links */
@media(max-width:700px){.topbar .tb-x{display:none}}