:root{--ink:#070D1A;--ink-2:#0A1426;--panel:#0D1729;--panel-2:#121E34;--line:#1B2940;--line-2:#2A3C58;--bone:#F4F6FB;--bone-dim:#9BA6B4;--bone-faint:#5A6573;--cyan:#5B9DF9;--cyan-deep:#2F6BD4;--violet:#8FA6F2;--amber:#C9A227;--display:'Space Grotesk',sans-serif;--body:'Inter',sans-serif;--mono:'JetBrains Mono',monospace;--maxw:760px;--ease:cubic-bezier(.22,.61,.36,1)}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:var(--body);line-height:1.75;-webkit-font-smoothing:antialiased;font-weight:300}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.wide{max-width:1180px;margin:0 auto;padding:0 28px}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.15;color:var(--bone)}
.logo-svg{height:24px}.logo-svg .stroke{fill:none;stroke:var(--bone);stroke-width:6}.logo-svg .node{fill:var(--cyan)}.logo-svg .edge{stroke:var(--cyan);stroke-width:4}
nav{position:sticky;top:0;z-index:100;background:rgba(7,11,18,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 28px}
.nav-links{display:flex;gap:30px;font-size:14px;color:var(--bone-dim);font-weight:400}
.nav-links a{color:var(--bone-dim)}.nav-links a:hover{color:var(--bone);text-decoration:none}
.progress{position:fixed;top:0;left:0;height:2px;background:var(--cyan);z-index:200;width:0}
.crumb{font-family:var(--mono);font-size:12px;color:var(--bone-faint);padding:26px 0 0}
.crumb a{color:var(--bone-faint)}
.arthead{padding:40px 0 30px;border-bottom:1px solid var(--line);margin-bottom:40px}
.arthead .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.arthead h1{font-size:clamp(30px,4.6vw,46px);margin:16px 0 20px;font-weight:500;line-height:1.1}
.artmeta{display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:12px;color:var(--bone-faint);flex-wrap:wrap}
.artmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--bone-faint)}
.lede{font-size:20px;color:var(--bone);font-weight:300;line-height:1.6;margin-bottom:14px}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 30px;margin:0 0 44px}
.toc h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:16px}
.toc ol{list-style:none;counter-reset:t}
.toc li{counter-increment:t;margin-bottom:10px;font-size:15px}
.toc li::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--cyan);margin-right:12px}
.toc a{color:var(--bone-dim)}.toc a:hover{color:var(--bone);text-decoration:none}
article h2{font-size:clamp(24px,3.2vw,32px);margin:56px 0 18px;font-weight:500;scroll-margin-top:90px}
article h3{font-size:21px;margin:36px 0 12px;font-weight:500}
article p{margin-bottom:20px;font-size:17px;color:#D8D5CD}
article strong{color:var(--bone);font-weight:500}
article ul{margin:0 0 22px 0;padding-left:0;list-style:none}
article ul li{position:relative;padding-left:24px;margin-bottom:12px;font-size:17px;color:#D8D5CD}
article ul li::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--cyan-deep)}
.callout{background:linear-gradient(135deg,rgba(91,157,249,.06),var(--panel));border:1px solid var(--cyan-deep);border-radius:14px;padding:26px 30px;margin:34px 0}
.callout .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--cyan);margin-bottom:10px}
.callout p{margin:0;font-size:16px;color:var(--bone)}
.pullquote{font-family:var(--display);font-size:clamp(22px,2.8vw,28px);font-weight:400;line-height:1.35;color:var(--bone);border-left:3px solid var(--cyan);padding-left:24px;margin:40px 0}
.figure{margin:34px 0;text-align:center}
.figure svg{max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.figure figcaption{font-family:var(--mono);font-size:12px;color:var(--bone-faint);margin-top:12px}
.refs{margin-top:50px;padding-top:30px;border-top:1px solid var(--line)}
.refs h3{font-size:18px;margin-bottom:16px}
.refs ol{padding-left:20px;color:var(--bone-dim);font-size:14px}
.refs li{margin-bottom:10px}
.faq{margin:50px 0}
.faq h2{margin-bottom:24px}
.faq details{border:1px solid var(--line);border-radius:12px;padding:0;margin-bottom:10px;background:var(--panel);overflow:hidden}
.faq summary{padding:18px 24px;cursor:pointer;font-family:var(--display);font-size:17px;font-weight:500;color:var(--bone);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--cyan);font-size:20px}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 24px 20px;margin:0;color:var(--bone-dim);font-size:16px}
.relbox{margin:50px 0;background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:32px}
.relbox h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:18px}
.relbox a{display:block;padding:12px 0;border-bottom:1px solid var(--line);color:var(--bone);font-family:var(--display);font-size:16px}
.relbox a:last-child{border:none}.relbox a:hover{color:var(--cyan);text-decoration:none}
.cta-end{margin:30px 0 80px;text-align:center;background:linear-gradient(180deg,var(--panel),var(--ink-2));border:1px solid var(--line);border-radius:18px;padding:46px 30px}
.cta-end h3{font-size:24px;margin-bottom:12px}
.cta-end p{color:var(--bone-dim);margin-bottom:22px;font-weight:300}
.btn{display:inline-block;background:var(--bone);color:var(--ink);padding:13px 26px;border-radius:10px;font-weight:500;font-size:15px}
.btn:hover{text-decoration:none}
footer{border-top:1px solid var(--line);padding:40px 0;background:var(--ink-2);font-size:13px;color:var(--bone-faint);font-weight:300}
.footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}.mono{font-family:var(--mono)}
@media(max-width:760px){.nav-links{display:none}}
/* Ecosystem footer row (cross-brand links) */
.foot-eco{display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}
.foot-eco-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-faint)}
.foot-eco a{color:var(--cyan);font-size:13px;font-weight:400}
.foot-eco a:hover{color:var(--bone)}