:root{
  --bg:#0b1220; --panel:#111c31; --panel2:#0e1729; --ink:#e8eefc; --muted:#9fb0cc;
  --brand:#3b82f6; --brand2:#22d3ee; --line:#1e2c47; --good:#34d399; --chip:#16233c;
  --warn:#fbbf24; --max:900px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:linear-gradient(180deg,#0b1220,#0a1020 60%,#080d18);
  color:var(--ink); font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

/* cross-site nav */
.sitenav{position:sticky; top:0; z-index:6; backdrop-filter:blur(8px); background:rgba(9,14,26,.85); border-bottom:1px solid var(--line)}
.sitenav .wrap{display:flex; align-items:center; gap:18px; overflow-x:auto; padding:12px 20px; scrollbar-width:none}
.sitenav .wrap::-webkit-scrollbar{display:none}
.sitenav .brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); white-space:nowrap}
.sitenav .brand .logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;color:#04101f;font-weight:800;font-size:15px}
.sitenav .links{display:flex; gap:16px; margin-left:auto}
.sitenav .links a{color:var(--muted); font-size:14px; font-weight:600; white-space:nowrap}
.sitenav .links a:hover,.sitenav .links a[aria-current="page"]{color:var(--ink); text-decoration:none}
.sitenav .links a[aria-current="page"]{color:var(--brand2)}

header.hero{
  padding:56px 0 40px; border-bottom:1px solid var(--line);
  background:radial-gradient(1200px 500px at 50% -10%,rgba(59,130,246,.18),transparent);
}
.brandline{display:flex; align-items:center; gap:12px; color:var(--muted); font-weight:600; letter-spacing:.02em}
.logo{
  width:38px;height:38px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:grid;place-items:center;color:#04101f;font-weight:800;font-size:18px
}
h1{font-size:clamp(28px,5vw,42px); line-height:1.15; margin:18px 0 12px; letter-spacing:-.02em}
.lede{font-size:clamp(17px,2.4vw,20px); color:#cdd9f0; max-width:730px}
.meta-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.badge{background:var(--chip); border:1px solid var(--line); color:#cfe0ff; padding:7px 12px; border-radius:999px; font-size:13.5px; font-weight:600}
.badge b{color:var(--good)}

nav.toc{position:sticky; top:53px; z-index:5; backdrop-filter:blur(8px); background:rgba(9,14,26,.82); border-bottom:1px solid var(--line)}
nav.toc .wrap{display:flex; gap:18px; overflow-x:auto; padding:12px 20px; scrollbar-width:none}
nav.toc .wrap::-webkit-scrollbar{display:none}
nav.toc a{color:var(--muted); font-size:14px; font-weight:600; white-space:nowrap}
nav.toc a:hover{color:var(--ink); text-decoration:none}

main{padding:40px 0 20px}
section{padding:26px 0; border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
h2{font-size:clamp(22px,3.4vw,30px); margin:8px 0 14px; letter-spacing:-.01em}
h3{font-size:19px; margin:22px 0 8px}
p{color:#d5def2}
.muted{color:var(--muted)}
.grid{display:grid; gap:16px}
@media(min-width:640px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:1fr 1fr 1fr}}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:14px; padding:18px}
.card h3{margin-top:0}
ul.clean{list-style:none; padding:0; margin:12px 0}
ul.clean li{padding:8px 0 8px 28px; position:relative; border-bottom:1px dashed var(--line)}
ul.clean li:last-child{border-bottom:0}
ul.clean li::before{content:"✓"; position:absolute; left:0; top:8px; color:var(--good); font-weight:800}
table{width:100%; border-collapse:collapse; margin:14px 0; font-size:15px; overflow:hidden; border-radius:12px}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--chip); color:#dbe6ff; font-size:13px; text-transform:uppercase; letter-spacing:.04em}
tr:last-child td{border-bottom:0}
.vendors{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.vendor{background:var(--chip); border:1px solid var(--line); padding:8px 14px; border-radius:10px; font-weight:600; font-size:14px}
details{background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:0 16px; margin:10px 0}
details[open]{background:var(--panel)}
summary{cursor:pointer; padding:16px 0; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--brand2); font-size:22px; font-weight:400}
details[open] summary::after{content:"–"}
details .body{padding:0 0 16px; color:#d5def2}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px}
.btn{display:inline-block; padding:12px 20px; border-radius:11px; font-weight:700}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#04101f}
.btn.ghost{border:1px solid var(--line); color:var(--ink)}
.btn:hover{text-decoration:none; filter:brightness(1.06)}
.contact{display:grid; gap:14px}
@media(min-width:640px){.contact{grid-template-columns:1fr 1fr}}
.kicker{color:var(--brand2); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:13px}
.stat{font-size:30px; font-weight:800; background:linear-gradient(135deg,#fff,#9fc3ff); -webkit-background-clip:text; background-clip:text; color:transparent}
.note{background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.3); border-radius:12px; padding:14px 16px; color:#f6e6c0; font-size:15px}

/* related pages strip */
.related{margin-top:8px}
.related .grid{gap:14px}
.related .card{padding:16px}
.related .card .k{color:var(--brand2); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em}
.related .card h3{margin:6px 0 4px; font-size:17px}
.related .card p{margin:0; font-size:14px; color:var(--muted)}

footer{padding:34px 0 60px; color:var(--muted); font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center}