:root{
  --bg:#fff;--text:#000;--muted:#6b6f76;--faint:#c3c6cc;--line:#E5E7EB;--soft:#f6f7f9;--primary:#4B67A0;
  --gutter:clamp(20px,5vw,48px);
  --hover:rgba(0,0,0,.045);--hover-strong:rgba(0,0,0,.07);
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
code{font:14px "Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--soft);padding:1px 5px;border-radius:4px}
.col{max-width:880px;margin:0 auto;padding-inline:var(--gutter)}
.wide{max-width:1120px;margin:0 auto;padding-inline:var(--gutter)}

.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px)}
.nav .wide{display:flex;align-items:center;height:56px}
.brand{display:flex;flex:none;align-items:center;gap:8px;font-weight:500;font-size:14px;text-decoration:none}
.brand img{width:24px;height:24px;border-radius:6px}
.nav-links{position:relative;display:flex;gap:4px;margin-left:auto;margin-right:12px}
.nav-links a{position:relative;z-index:1;padding:4px 8px;border-radius:6px;font-size:14px;color:var(--muted);text-decoration:none;transition:color .08s ease}
.nav-links a:hover{color:var(--text);background:var(--hover)}
.nav-links.fluid a:hover{background:none}
.nav-links a[aria-current]{color:var(--text)}
.nav-pill{position:absolute;top:0;left:0;height:0;border-radius:6px;background:var(--hover);pointer-events:none;opacity:0;transition:transform .16s cubic-bezier(.25,1,.5,1),width .16s cubic-bezier(.25,1,.5,1),height .16s ease,opacity .08s ease}
@media (max-width:640px){.brand span{display:none}.nav-links a.opt{display:none}.nav-links{margin-right:8px;gap:0}.nav-links a{padding:4px 6px}}

.btn{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 10px;border-radius:6px;font:400 13px/16px Geist,ui-sans-serif,system-ui,sans-serif;text-decoration:none;white-space:nowrap;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 1px -.5px rgba(0,0,0,.06),0 2px 3px -1.5px rgba(0,0,0,.06)}
.btn-dark{background:#171717;color:#FAFAFA}
.btn-dark:hover{background:#262626}
.btn-lg{height:36px;padding:0 16px;border-radius:8px;font-size:15px;line-height:20px}
.btn .ext{margin-left:4px;opacity:.7;flex:none}
.btn:focus-visible,.theme:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.theme{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;margin-right:8px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.theme:hover{color:var(--text);background:rgba(0,0,0,.04)}
.theme svg{display:block}
.lang{font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;padding:4px 8px;margin-right:8px;line-height:18px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line)}
.lang:hover{color:var(--text);background:rgba(0,0,0,.04)}
.theme .sun{display:none}

.crumbs{padding-top:clamp(32px,6vw,64px);font-size:13px;color:var(--muted)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--text)}
article h1{text-wrap:balance;font-weight:300;font-size:clamp(34px,5.6vw,56px);line-height:1.08;letter-spacing:-.045em;margin:16px 0 20px}
.lede{font-size:19px;line-height:1.55;margin:0 0 12px}
.meta{font-size:13px;color:var(--muted);margin:0 0 40px}
article h2{text-wrap:balance;font-weight:500;font-size:clamp(22px,3vw,28px);line-height:1.25;letter-spacing:-.025em;margin:56px 0 16px;scroll-margin-top:72px}
article h3{font-weight:500;font-size:18px;margin:32px 0 8px}
article p,article li{color:var(--text)}
article p{margin:0 0 16px;text-wrap:pretty}
article ul,article ol{padding-left:22px;margin:0 0 16px}
article li{margin:6px 0}
.muted{color:var(--muted)}
.answer{position:relative;margin:0 0 32px;padding:14px 18px 14px 46px;border-radius:12px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.answer::before{content:"i";position:absolute;left:16px;top:17px;width:18px;height:18px;border-radius:50%;background:var(--primary);color:var(--bg);font:600 12px/18px Geist,system-ui,sans-serif;text-align:center}
.answer p:last-child{margin:0}

.table{position:relative;overflow-x:auto;margin:16px -12px 8px}
table{position:relative;z-index:1;font-variant-numeric:tabular-nums;border-collapse:collapse;width:100%;min-width:640px;font-size:14px;line-height:1.45}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line);min-width:112px}
th{font-weight:500;color:var(--text);white-space:nowrap}
td{color:var(--muted);transition:color .08s ease}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td,tbody tr.on td{color:var(--text)}
td.svc{font-weight:500;color:var(--text);white-space:nowrap}
td.b{white-space:nowrap}
.row-hover{position:absolute;z-index:0;top:0;left:0;height:0;border-radius:8px;background:var(--hover);pointer-events:none;opacity:0;transition:transform .08s ease-out,height .08s ease-out,opacity .08s ease}
/* 5. badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:1px 8px 1px 7px;border-radius:999px;background:var(--hover);color:var(--text);font-size:12.5px;line-height:20px;white-space:nowrap;vertical-align:1px}
.badge+.badge{margin-left:4px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
.badge.yes::before{background:#30a46c}
.badge.plain{padding-left:8px}
.badge.plain::before{display:none}
.note{font-size:13px;color:var(--muted);margin:0 0 24px}

.cta{margin:56px 0 0;padding:28px;border-radius:12px;background:var(--soft);border:1px solid var(--line)}
.cta h2{margin-top:0}
.cta p{color:var(--muted)}
.faq h3{margin-top:28px}
.sources{font-size:14px;color:var(--muted)}
.sources a{color:var(--muted)}
.next{position:relative;z-index:1;display:block;margin-top:40px;padding:16px 18px;border-radius:12px;background:var(--soft);text-decoration:none;transition:background-color .15s ease}
.next:hover{background:var(--hover-strong)}
.next span{display:block;font-size:13px;color:var(--muted)}

footer{margin-top:clamp(64px,10vw,120px);border-top:1px solid var(--line);padding-block:24px;font-size:13px;color:var(--muted)}
footer{padding-block:40px 28px}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px 32px;margin-bottom:32px}
footer nav{display:flex;flex-direction:column;gap:8px}
footer nav b{font-weight:500;color:var(--text);margin-bottom:4px}
footer a{text-decoration:none}
footer a:hover,footer a[aria-current]{color:var(--text)}
.copy{display:block}
.hub{position:relative;display:grid;gap:2px;margin:8px -18px 0}
.hub .next{margin:0;background:none}
.hub .next:hover{background:none}
.hub:not(.fluid) .next:hover{background:var(--hover)}
.card-hover{position:absolute;z-index:0;top:0;left:0;right:0;height:0;border-radius:12px;background:var(--hover);pointer-events:none;opacity:0;transition:transform .08s ease-out,height .08s ease-out,opacity .08s ease}

@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){--bg:#0a0a0a;--text:#f5f5f5;--muted:#a1a1a1;--faint:#4b4b4f;--line:#262626;--soft:#141414;--primary:#8ea7dc;--hover:rgba(255,255,255,.06);--hover-strong:rgba(255,255,255,.09);color-scheme:dark}
:root:not([data-theme="light"]) .nav{background:rgba(10,10,10,.82)}
:root:not([data-theme="light"]) .nav-links:not(.fluid) a:hover,:root:not([data-theme="light"]) .lang:hover,:root:not([data-theme="light"]) .theme:hover{background:rgba(255,255,255,.06)}
:root:not([data-theme="light"]) .btn{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
:root:not([data-theme="light"]) .btn-dark{background:#FAFAFA;color:#171717}
:root:not([data-theme="light"]) .btn-dark:hover{background:#e5e5e5}
:root:not([data-theme="light"]) .theme .sun{display:block}
:root:not([data-theme="light"]) .theme .moon{display:none}
}
:root[data-theme="dark"]{--bg:#0a0a0a;--text:#f5f5f5;--muted:#a1a1a1;--faint:#4b4b4f;--line:#262626;--soft:#141414;--primary:#8ea7dc;--hover:rgba(255,255,255,.06);--hover-strong:rgba(255,255,255,.09);color-scheme:dark}
:root[data-theme="dark"] .nav{background:rgba(10,10,10,.82)}
:root[data-theme="dark"] .nav-links:not(.fluid) a:hover,:root[data-theme="dark"] .lang:hover,:root[data-theme="dark"] .theme:hover{background:rgba(255,255,255,.06)}
:root[data-theme="dark"] .btn{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
:root[data-theme="dark"] .btn-dark{background:#FAFAFA;color:#171717}
:root[data-theme="dark"] .btn-dark:hover{background:#e5e5e5}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}

/* FAQ: an accordion after Fluid Functionalism — one open at a time, a hover that slides between rows */
.faq-list{position:relative;margin:8px -12px 0;display:flex;flex-direction:column;gap:2px}
.faq-hover{position:absolute;left:0;right:0;top:0;height:0;border-radius:8px;background:var(--hover);opacity:0;pointer-events:none;transition:transform .08s ease-out,height .08s ease-out,opacity .08s ease}
.qa{position:relative;z-index:1;border-radius:12px;transition:background-color .2s ease}
.qa[open]{background:var(--soft)}
.qa summary{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;cursor:pointer;list-style:none;color:var(--muted);font-size:15px;line-height:1.45;transition:color .08s ease}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover,.qa[open] summary{color:var(--text)}
.qa summary:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.qa .q{flex:1;display:inline-grid}
.qa .q>span,.qa .q::after{grid-area:1/1}
.qa .q::after{content:attr(data-q);visibility:hidden;font-weight:500}
.qa[open] .q>span{font-weight:500}
.qa .chev{flex:none;width:16px;height:16px;transition:transform .16s cubic-bezier(.25,1,.5,1)}
.qa[open] .chev{transform:rotate(90deg)}
.qa .a{padding:0 12px 14px;color:var(--muted);font-size:15px;line-height:1.6}
.qa .a p{margin:0;color:inherit}
@supports (interpolate-size:allow-keywords){
  .faq-list{interpolate-size:allow-keywords}
  .qa::details-content{height:0;overflow:clip;opacity:0;transition:height .16s cubic-bezier(.25,1,.5,1),opacity .12s ease,content-visibility .16s allow-discrete}
  .qa[open]::details-content{height:auto;opacity:1}
}
@media (prefers-reduced-motion:reduce){.faq-hover,.qa .chev,.qa::details-content{transition:none!important}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .faq-hover{background:rgba(255,255,255,.06)}}
:root[data-theme="dark"] .faq-hover{background:rgba(255,255,255,.06)}

/* Wide tables: a quiet scrollbar, and edges that fade where there is more to scroll (after Fluid Functionalism's scroll-fade) */
.table{scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
.table::-webkit-scrollbar{height:6px}
.table::-webkit-scrollbar-thumb{background:var(--faint);border-radius:999px}
.table.fade-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
.table.fade-l{-webkit-mask-image:linear-gradient(to right,transparent,#000 48px);mask-image:linear-gradient(to right,transparent,#000 48px)}
.table.fade-l.fade-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent)}