/* Sysprobs Data hub stylesheet. Values taken from the live sysprobs.com theme on 2026-10-08
   (docs/SYSPROBS-LOOK.md). This file is the only stylesheet the hub loads; the WordPress theme's
   combined CSS is never referenced because LiteSpeed regenerates its filename. No web fonts are loaded:
   the stacks below fall through to the same system fonts the theme uses when Public Sans and Roboto
   are not installed. Light and dark designs follow the theme's s-light and site-s-dark schemes; the choice is
   stored under the theme's own key (bunyad-scheme), so it is shared with the rest of sysprobs.com. */

:root{
  --font-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-title:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --c-main:#d71d4f;
  --c-main-rgb:215,29,79;
  --c-accent-text:#d71d4f;  /* accent used as text; dark mode lightens it (UX audit 2026-10-21) */
  --focus:#161616;
  --c-grad-a:#e40666;
  --c-grad-b:#3c3fde;
  --c-bg:#fff;
  --c-text:#333;
  --c-body:#444;
  --c-headings:#161616;
  --c-links:#161616;
  --c-excerpt:#424449;
  --c-sub:#5b5b5b;
  --c-muted:#666;
  --c-meta:#6b6b6b;
  --c-faint:#707070;
  --c-soft:#f7f7f7;
  --c-head-border:#efefef;
  --c-sep:#e8e8e8;
  --c-sep2:#e2e2e2;
  --c-rgba:0,0,0;
  --c-head-bg:#fff;
  --c-nav:#161616;
  --c-nav-drop-bg:#fff;
  --c-nav-drop-sep:#eee;
  --c-nav-drop-hov:rgba(0,0,0,.03);
  --footer-bg:#0f0f11;
  --footer-lower-bg:#040404;
  --footer-text:#c0c0c0;
  --footer-links:#d1d1d1;
  --footer-lower-text:#bbb;
  --main-width:1170px;
  --wrap-padding:36px;
  --measure:940px;
  --content-size:17px;
  --content-lh:1.7;
  /* Chart tokens: python tools/chartkit.py --css prints these; keep the two in step. */
  --viz-surface:#ffffff;--viz-ink:#161616;--viz-ink2:#52514e;--viz-grid:#e4e3df;--viz-axis:#8f8e88;
  --viz-s1:#2a78d6;--viz-s2:#eb6834;--viz-s3:#1baf7a;--viz-s4:#eda100;--viz-s5:#e87ba4;--viz-s6:#008300;--viz-s7:#6250d6;--viz-s8:#e34948;
  --viz-wash:0.32;--viz-lite:0.45;
}
/* Dark design: the theme's site-s-dark values (contrast scale, body #151516, footer #070708). */
.site-s-dark{
  --c-accent-text:#f25c82;
  --focus:#f0f0f0;
  --c-bg:#151516;
  --c-text:#d1d1d1;
  --c-body:#ccc;
  --c-headings:#ececec;
  --c-links:#f0f0f0;
  --c-excerpt:#ccc;
  --c-sub:#bbb;
  --c-muted:#999;
  --c-meta:#a6a6a6;
  --c-faint:#8c8c8c;
  --c-soft:#1e1e1f;
  --c-head-border:#222;
  --c-sep:#2f2f30;
  --c-sep2:#3a3a3b;
  --c-rgba:255,255,255;
  --c-head-bg:#151516;
  --c-nav:#f0f0f0;
  --c-nav-drop-bg:#070707;
  --c-nav-drop-sep:rgba(255,255,255,.1);
  --c-nav-drop-hov:rgba(255,255,255,.05);
  --footer-bg:#070708;
  --viz-surface:#151516;--viz-ink:#ececec;--viz-ink2:#c3c2b7;--viz-grid:#2e2e2c;--viz-axis:#6b6a65;
  --viz-s1:#3987e5;--viz-s2:#d95926;--viz-s3:#199e70;--viz-s4:#c98500;--viz-s5:#d55181;--viz-s6:#008300;--viz-s7:#9085e9;--viz-s8:#e66767;
  --viz-wash:0.5;--viz-lite:0.62;
  color-scheme:dark;
}
@media (min-width:1200px){:root{--content-size:18px}}
@media (max-width:940px){:root{--wrap-padding:35px}}
@media (max-width:767px){:root{--wrap-padding:25px}}
@media (max-width:540px){:root{--wrap-padding:20px}}
@media (max-width:350px){:root{--wrap-padding:15px}}

*,*::before,*::after{box-sizing:border-box}
html{font-size:14px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:var(--content-size);line-height:var(--content-lh);color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased}
a{color:var(--c-accent-text);text-decoration:none;transition:color .25s ease-in-out}
a:hover{color:var(--c-links)}
h1,h2,h3,h4{font-family:var(--font-title);font-weight:700;color:var(--c-headings);line-height:1.25;margin:1.35em 0 .55em}
h1{font-size:clamp(28px,1.27vw + 24.7px,43px);font-weight:600;letter-spacing:-.0075em;margin:.35em 0 .4em}
h2{font-size:1.5em}
h3{font-size:1.2em}
p,ul,ol,dl{margin:0 0 1.2em}
img,svg{max-width:100%}
code{font-family:var(--font-mono);font-size:.9em;background:rgba(var(--c-rgba),.06);padding:1px 4px;border-radius:2px;overflow-wrap:anywhere}
::selection{background:var(--c-main);color:#fff}
.muted{color:var(--c-muted)}
.skip{position:absolute;left:-9999px;top:0;background:var(--c-main);color:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px;top:8px}

/* Layout shell: the theme's --main-width plus --wrap-padding on each side. */
.wrap{width:100%;max-width:calc(var(--main-width) + var(--wrap-padding) * 2);margin:0 auto;padding:0 var(--wrap-padding)}
.site-main{padding-top:30px;padding-bottom:60px;min-height:50vh}

/* Header: the theme's 3px gradient top stripe, then logo, primary menu with dropdowns, and the light/dark switch
   and search on the right (smart-head-mid, nav-hov-b). Below 940px: the theme's dark mobile bar. */
.site-header{background:var(--c-head-bg);border-bottom:1px solid var(--c-head-border);position:relative;z-index:20}
.top-bar{background:#000}
.top-bar-inner{display:flex;justify-content:flex-end;align-items:center;min-height:38px}
.top-social{display:flex;gap:6px}
.top-social .social{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff}
.top-social .social:hover{background:var(--c-main);color:#fff}
.top-social svg{width:12px;height:12px}
.site-header-stripe{height:3px;background:linear-gradient(90deg,var(--c-grad-a) 0%,var(--c-grad-b) 100%)}
.site-header-inner{display:flex;align-items:center;gap:24px;min-height:76px}
.logo-link{display:flex;align-items:center;flex-shrink:0}
.logo-link img{display:block;height:50px;width:auto}
.logo-dark{display:none!important}
.site-s-dark .logo-dark{display:block!important}
.site-s-dark .logo-light{display:none!important}
.site-nav{height:76px;flex:1 1 auto;min-width:0}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav>.menu{display:flex;align-items:center;height:100%}
.site-nav>.menu>li{position:relative;height:100%;display:flex;align-items:center}
.site-nav>.menu>li>a{display:flex;align-items:center;height:100%;padding:0 15px;font-family:var(--font-body);font-size:15.4px;font-weight:600;letter-spacing:.01em;color:var(--c-nav);white-space:nowrap;position:relative}
.site-nav>.menu>li>a::before{content:"";position:absolute;left:15px;right:15px;bottom:0;height:3px;background:var(--c-main);opacity:0;transition:opacity .2s}
.site-nav>.menu>li:hover>a,.site-nav>.menu>li:focus-within>a{color:var(--c-accent-text)}
.site-nav>.menu>li:hover>a::before,.site-nav>.menu>li:focus-within>a::before,.site-nav>.menu>li.is-current>a::before{opacity:1}
.site-nav>.menu>li.has-children>a::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-4px 0 0 8px;opacity:.55}
.site-nav .menu-data>a{color:var(--c-accent-text)}
.site-nav .menu-data>a::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c-main);margin-left:7px}
.site-nav .sub-menu{position:absolute;top:100%;left:0;min-width:235px;background:var(--c-nav-drop-bg);box-shadow:0 4px 18px rgba(0,0,0,.1);border-top:3px solid var(--c-main);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:30}
.site-nav .sub-menu .sub-menu{top:-9px;left:100%}
.site-nav li:hover>.sub-menu,.site-nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.site-nav .sub-menu li{position:relative}
.site-nav .sub-menu li+li{border-top:1px solid var(--c-nav-drop-sep)}
.site-nav .sub-menu a{display:flex;align-items:center;justify-content:space-between;padding:9px 20px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--c-nav);white-space:nowrap}
.site-nav .sub-menu a:hover{color:var(--c-accent-text);background:var(--c-nav-drop-hov)}
.site-nav .sub-menu .has-children>a::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);margin-left:14px;opacity:.55}
.head-icons{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
.scheme-toggle,.search-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;background:none;color:var(--c-nav);cursor:pointer;padding:0;border-radius:50%}
.scheme-toggle:hover,.search-icon:hover{color:var(--c-accent-text)}
.scheme-toggle .icon-sun,.site-s-dark .scheme-toggle .icon-moon{display:none}
.site-s-dark .scheme-toggle .icon-sun{display:block}
.mobile-menu{display:none}
@media (max-width:1200px){.site-nav>.menu>li>a{padding:0 11px;font-size:14.5px}.site-nav>.menu>li>a::before{left:11px;right:11px}}
@media (max-width:940px){
  .site-header{background:#000;border-bottom:0}
  .top-bar{display:none}
  .site-header-inner{min-height:64px;gap:0;justify-content:space-between}
  .site-nav,.head-icons .scheme-toggle{display:none}
  .head-icons{margin-left:0;width:44px;justify-content:flex-end}
  .search-icon{color:#fff}
  .logo-link img{height:40px}
  .logo-light{display:none!important}
  .logo-dark{display:block!important}
  .mobile-menu{display:block;width:44px}
  .mobile-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;height:44px;width:44px}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .hamburger,.hamburger span,.hamburger::before,.hamburger::after{display:block;width:22px;height:2px;background:#fff;border-radius:1px}
  .hamburger{position:relative;background:none}
  .hamburger::before,.hamburger::after{content:"";position:absolute;left:0}
  .hamburger::before{top:-7px}
  .hamburger::after{top:7px}
  .mobile-menu[open] .hamburger span{opacity:0}
  .mobile-menu[open] .hamburger::before{top:0;transform:rotate(45deg)}
  .mobile-menu[open] .hamburger::after{top:0;transform:rotate(-45deg)}
  .mobile-panel{position:absolute;left:0;right:0;top:100%;background:var(--c-bg);border-bottom:1px solid var(--c-sep);box-shadow:0 10px 24px rgba(0,0,0,.18);padding:10px var(--wrap-padding) 22px;max-height:calc(100vh - 70px);overflow-y:auto}
  .mobile-nav,.mobile-nav ul{list-style:none;margin:0;padding:0}
  .mobile-nav a{display:block;padding:11px 0;font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--c-nav);border-bottom:1px solid var(--c-sep)}
  .mobile-nav .sub-menu a{padding-left:16px;font-size:14px;font-weight:500}
  .mobile-nav .sub-menu .sub-menu a{padding-left:32px}
  .mobile-nav .menu-data>a{color:var(--c-accent-text)}
  .scheme-toggle-text{display:inline-flex;width:auto;height:auto;border-radius:3px;margin-top:16px;padding:9px 14px;border:1px solid var(--c-sep2);font:600 13px var(--font-body);color:var(--c-nav)}
  .scheme-toggle-text .to-light,.site-s-dark .scheme-toggle-text .to-dark{display:none}
  .site-s-dark .scheme-toggle-text .to-light{display:inline}
}

/* Breadcrumbs, as the theme renders them: 12px, grey, no underline. */
.breadcrumbs{font-size:12px;color:var(--c-faint);line-height:1;margin:0 0 26px}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.breadcrumbs li{display:inline}
.breadcrumbs li+li::before{content:"\203A";margin:0 7px;color:var(--c-faint)}
.breadcrumbs a{color:var(--c-meta)}
.breadcrumbs a:hover{color:var(--c-links)}

/* Reading column. Header, body and panels share one measure; reference tables may go wider. */
.asset,.page,.list,.hub-intro,.hub-list,.hub-method{max-width:var(--measure);margin-left:auto;margin-right:auto}
.asset-reference,.list{max-width:none}
.asset-reference .asset-header,.asset-reference .faq,.asset-reference .sources,.asset-reference .cite,.asset-reference .embed,.asset-reference .changelog,.asset-reference .related{max-width:var(--measure);margin-left:auto;margin-right:auto}
.asset-reference .body-wide{max-width:none}
.eyebrow{font-family:var(--font-body);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-accent-text);margin:0 0 6px}
.lede{font-size:1.1em;line-height:1.55;color:var(--c-sub);margin:0 0 .9em}
.meta{font-family:var(--font-body);font-size:11px;line-height:2;text-transform:uppercase;letter-spacing:.03em;color:var(--c-meta);margin:0 0 1.5em}
.meta span{display:inline;white-space:nowrap}
.meta span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--c-meta);margin:0 9px;vertical-align:middle}
.meta a{color:var(--c-accent-text)}
.meta a:hover{color:var(--c-links)}
.asset-header{padding-bottom:4px}

.headline-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:0 0 28px}
.headline-figures .figure{background:var(--c-soft);border-left:3px solid var(--c-main);padding:14px 16px;font-size:.92em;line-height:1.5}
.headline-figures p{margin:0;font-weight:600;color:var(--c-headings)}

/* Body text and inline source keys. */
.body{font-size:var(--content-size);line-height:var(--content-lh);color:var(--c-text)}
.body>:first-child{margin-top:0}
.body h2{margin-top:1.6em}
.body li{margin:.3em 0}
.body strong{color:var(--c-headings)}
sup.src{font-size:.68em;line-height:0;vertical-align:super;margin-left:1px}
sup.src a,sup.src span{color:var(--c-accent-text);font-weight:600;letter-spacing:.02em}
sup.src a:hover{color:var(--c-links)}
sup.src-derived a,sup.src-derived span{font-style:italic;font-weight:500;color:var(--c-muted)}
.source:target{background:rgba(var(--c-main-rgb),.06);outline:2px solid rgba(var(--c-main-rgb),.3);outline-offset:6px}

/* Tables: the theme's 1px #e2e2e2 grid with a faint header fill. Wide tables scroll inside their box. */
.body table{border-collapse:collapse;border-spacing:0;width:100%;font-size:.86em;line-height:1.45;margin:1.4em 0;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.body thead{border-bottom:2px solid var(--c-sep2)}
.body th,.body td{padding:6px 9px;border:1px solid var(--c-sep2);text-align:left;vertical-align:top}
.body th{background:rgba(var(--c-rgba),.05);font-weight:600;color:var(--c-headings)}
@media (min-width:768px){.body-wide table{display:table}}

/* Charts: inline SVGs from the bundle, drawn by tools/chartkit.py. Each chart ships a wide drawing (740 units,
   shown from 768px) and a narrow one (340 units, phones), so labels render at 11px or more at any width. The SVGs
   paint with the --viz-* tokens (top of this file, light and dark), so the dark design repaints them; standalone files fall
   back to the light values. Title and subtitle sit above the drawing, notes and source under it. */
figure.chart{margin:1.8em 0;padding:16px;border:1px solid var(--c-sep);background:var(--c-bg)}
figure.chart svg{width:100%;height:auto;display:block}
figure.chart svg.cv-narrow{display:none}
.chart-head{margin:0 0 12px}
.chart-title{display:block;font-family:var(--font-title);font-weight:600;font-size:17px;line-height:1.35;color:var(--c-headings)}
.chart-sub{display:block;font-size:14px;line-height:1.5;color:var(--c-sub);margin-top:4px}
.chart-foot{font-size:13px;line-height:1.5;color:var(--c-sub);margin-top:12px}
.chart-notes{margin:0 0 6px;padding-left:1.1em}
.chart-notes li{margin:.15em 0}
.chart-foot p{margin:0;color:var(--c-muted)}
.chart-foot a{color:var(--c-accent-text)}
@media (max-width:767px){
  figure.chart{padding:12px}
  figure.chart svg.cv-wide{display:none}
  figure.chart svg.cv-narrow{display:block;max-width:480px}
}
.missing{color:var(--c-accent-text);font-weight:600}

/* FAQ */
.faq details{border-bottom:1px solid var(--c-sep);padding:12px 0}
.faq details:first-of-type{border-top:1px solid var(--c-sep)}
.faq summary{cursor:pointer;font-weight:600;color:var(--c-headings);font-family:var(--font-title);font-size:1.02em}
.faq summary::marker{color:var(--c-accent-text)}
.faq details p{margin:10px 0 0;font-size:.95em}

/* Per-figure source panel */
.sources>p{font-size:.92em;color:var(--c-body)}
.source-list{list-style:none;padding:0;margin:0}
.source{border:1px solid var(--c-sep);border-left:3px solid var(--c-sep2);padding:14px 16px;margin:0 0 12px;font-size:.88em;line-height:1.5;scroll-margin-top:24px}
.source-head{margin:0 0 8px;color:var(--c-body);overflow-wrap:anywhere}
.source-key{display:inline-block;font-family:var(--font-mono);font-size:.85em;font-weight:700;color:var(--c-accent-text);border:1px solid rgba(var(--c-main-rgb),.35);padding:1px 6px;border-radius:2px;margin-right:6px;vertical-align:middle}
.source-head a{color:var(--c-headings);font-weight:600}
.source-head a:hover{color:var(--c-accent-text)}
.source-facts{display:grid;grid-template-columns:110px minmax(0,1fr);gap:3px 12px;margin:0}
.source-facts dt{color:var(--c-meta);font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding-top:2px}
.source-facts dd{margin:0;color:var(--c-text);min-width:0;overflow-wrap:anywhere}
.source-question,.source-snippet{font-style:italic;color:var(--c-body)}
.source-snippet q{quotes:"\201C" "\201D"}
.derived-note{font-size:.88em;color:var(--c-muted);margin-top:14px}
@media (max-width:480px){.source-facts{grid-template-columns:minmax(0,1fr);gap:0}.source-facts dt{margin-top:8px}}

/* Citation, embed, changelog, related */
.cite dt{font-weight:600;color:var(--c-headings);margin-top:14px;font-size:.92em}
.cite dd{margin:4px 0 0}
.cite code,.cite textarea,.embed textarea{display:block;width:100%;font:13px/1.5 var(--font-mono);background:var(--c-soft);border:1px solid var(--c-sep);border-radius:2px;padding:10px 12px;white-space:pre-wrap;word-break:break-word;color:var(--c-text);resize:vertical}
.embed p,.cite>p{font-size:.92em}
.changelog ul{padding-left:0;list-style:none}
.changelog li{padding:8px 0;border-bottom:1px solid var(--c-sep);font-size:.92em}
.changelog time{font-family:var(--font-mono);font-size:.9em;color:var(--c-muted);margin-right:8px}
.related ul{list-style:none;padding:0}
.related li{padding:10px 0;border-bottom:1px solid var(--c-sep)}
.related a{font-family:var(--font-title);font-weight:600;color:var(--c-headings)}
.related a:hover{color:var(--c-accent-text)}

/* Buttons, after the theme's .ts-button. */
.button{display:inline-flex;align-items:center;height:40px;padding:0 18px;background:var(--c-main);color:#fff;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;border-radius:3px;border:0}
.button:hover{background:var(--c-headings);color:var(--c-bg)}
.tool-link{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 28px;font-size:.9em}

/* Hub index and section lists */
.hub-intro h1{margin-top:0}
.lede-body{font-size:1.08em;color:var(--c-sub)}
.hub-list{margin-top:34px}
.hub-list h2{font-size:1.25em;padding-bottom:8px;border-bottom:1px solid var(--c-sep);position:relative;margin-bottom:6px}
.hub-list h2::after{content:"";position:absolute;left:0;bottom:-1px;width:48px;height:3px;background:var(--c-main)}
.hub-list>.muted{font-size:.92em;margin:8px 0 4px}
.asset-list{list-style:none;padding:0;margin:0}
.asset-list li{padding:16px 0;border-bottom:1px solid var(--c-sep)}
.asset-list-title{font-family:var(--font-title);font-size:1.08em;font-weight:500;color:var(--c-headings);line-height:1.36}
.asset-list-title:hover{color:var(--c-accent-text)}
.asset-list-desc{margin:5px 0 0;font-size:.88em;color:var(--c-excerpt);line-height:1.55}
.asset-list-meta{margin:6px 0 0;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--c-meta)}
.hub-method{margin-top:40px;font-size:.92em;color:var(--c-body)}
.notfound ul{padding-left:1.2em}

/* Footer: the theme's bold footer. Upper band with the site's footer widgets in three columns; lower band centred
   with logo, round social buttons, the uppercase footer menu and the copyright. The colours stay dark in both
   designs, as on the live site. */
.site-footer{--c-accent-text:#f25c82;--focus:#fff;margin-top:60px;background:var(--footer-bg);color:var(--footer-text);font-size:13.5px;line-height:1.65}
.site-footer a{color:var(--footer-links)}
.site-footer a:hover{color:var(--c-accent-text)}
.footer-upper .footer-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:55px 40px;padding-top:70px;padding-bottom:60px}
.footer-heading{font-family:var(--font-title);font-size:15px;font-weight:700;letter-spacing:.02em;color:#fff;margin:0 0 26px;padding-bottom:12px;position:relative;border-bottom:1px solid rgba(255,255,255,.13)}
.footer-heading::after{content:"";position:absolute;left:0;bottom:-2px;width:32px;height:3px;background:var(--c-main)}
.footer-widget p{margin:0 0 1em}
.footer-widget-links{list-style:none;margin:0;padding:0}
.footer-widget-links li{padding:4px 0}
.footer-widget-links.is-inline li{padding:0}
.footer-widget-links.is-inline a{color:var(--c-accent-text)}
.footer-widget-links.is-inline a:hover{color:#fff}
.footer-widget-links a{color:#f0f0f0}
.footer-lower{background:var(--footer-lower-bg);color:#8a8a8a;font-size:13px}
.footer-lower-inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding:50px 20px}
.footer-logo{margin-bottom:34px}
.footer-logo img{display:block;height:55px;width:auto}
.footer-social{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:-9px 0 24px}
.footer-social .social{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;transition:background .2s,color .2s}
.footer-social .social:hover{background:var(--c-main);color:#fff}
.footer-menu ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:11px 20px}
.footer-menu a{font-family:var(--font-title);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#fff}
.footer-hub{max-width:78ch;margin:0 0 12px;color:#999;font-size:12.5px;line-height:1.6}
.footer-hub a,.footer-copy a{color:#bbb}
.footer-copy{color:#8a8a8a}
@media (max-width:940px){.footer-upper .footer-widgets{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.footer-upper .footer-widgets{grid-template-columns:1fr;gap:40px;padding-top:50px;padding-bottom:45px}}

/* Hub landing page (layouts/index.html). The hero band uses the footer's dark in both designs, so the header and
   footer frame it; the price curve is drawn by the page script at the panel's real pixel size, so its labels stay
   12px or more at any width. */
.hub-home .site-main{max-width:none;padding:0}
.land-hero{background:#0f0f11;color:#c9c9cc;padding:34px 0 44px}
.land-hero-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:center}
.land-hero .breadcrumbs{margin-bottom:22px}
.land-hero .breadcrumbs a{color:#a6a6ab}
.land-hero h1{font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.12;letter-spacing:-.018em;color:#fff;margin:0 0 18px}
.land-lede{font-size:17px;line-height:1.6;margin:0 0 24px;color:#b9b9bd;max-width:40ch}
.land-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:0}
.land-hero .button:hover{background:#fff;color:#0f0f11}
.land-alt{color:#e6e6e8;font-weight:600;font-size:15px;border-bottom:1px solid rgba(255,255,255,.3)}
.land-alt:hover{color:#fff;border-color:#fff}
.land-chart{position:relative;margin:0}
.land-chart figcaption{margin:0 0 6px}
.land-chart-title{display:block;font-family:var(--font-title);font-size:15px;font-weight:600;line-height:1.45;color:#fff}
.land-chart-sub{display:block;font-size:13px;color:#9a9a9f;margin-top:2px}
.land-curve{display:block;width:100%;height:360px}
.land-curve .land-draw{animation:land-draw .4s ease both}
@keyframes land-draw{from{opacity:0}to{opacity:1}}
.land-chart-note{font-size:12.5px;color:#8c8c91;margin:8px 0 0;line-height:1.5}
.land-chart-note a{color:#e6e6e8}
.land-tip{position:absolute;pointer-events:none;background:#fff;color:#161616;font-size:13px;line-height:1.4;padding:7px 10px;border-radius:3px;box-shadow:0 4px 16px rgba(0,0,0,.35);opacity:0;transition:opacity .12s;white-space:nowrap;z-index:2}
.land-tip b{display:block;font-family:var(--font-title)}
@media (max-width:900px){.land-hero-grid{grid-template-columns:1fr;gap:28px}.land-curve{height:300px}}
@media (prefers-reduced-motion:reduce){.land-curve .land-draw{animation:none}.land-tip{transition:none}}

/* Standard or Datacenter slider */
.land-calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start;padding-top:64px}
.land-calc h2,.land-dir h2,.land-process h2{font-size:clamp(24px,2.4vw,30px);line-height:1.2;letter-spacing:-.01em;margin:0 0 12px}
.land-calc-intro p{color:var(--c-sub);max-width:46ch;margin:0 0 14px}
.land-calc-intro a{font-weight:600}
.land-panel{border:1px solid var(--c-sep2);border-top:3px solid var(--c-main);padding:22px 24px 20px}
.land-panel label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;color:var(--c-headings);font-size:15px}
.land-panel output{font-family:var(--font-title);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.land-panel input[type=range]{width:100%;margin:12px 0 22px;accent-color:var(--c-main)}
.land-bars{display:grid;gap:14px}
.land-bar{display:grid;grid-template-columns:100px minmax(0,1fr) 84px;gap:12px;align-items:center;font-size:14.5px}
.land-bar-name{color:var(--c-headings);font-weight:600}
.land-track{display:block;height:18px;background:var(--c-soft);border-radius:0 4px 4px 0}
.land-fill{display:block;height:100%;width:0;border-radius:0 4px 4px 0;background:#9a9a9a;transition:width .25s ease}
.site-s-dark .land-fill{background:#6f6f72}
.land-fill.is-cheaper,.site-s-dark .land-fill.is-cheaper{background:var(--c-main)}
.land-amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--c-headings)}
.land-verdict{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--c-sep);font-size:15px}
.land-verdict b{color:var(--c-headings)}
.land-fine{font-size:12.5px;color:var(--c-muted);margin:8px 0 0}
@media (max-width:900px){.land-calc{grid-template-columns:1fr;gap:24px;padding-top:44px}}
@media (prefers-reduced-motion:reduce){.land-fill{transition:none}}

/* All pages: one table, with the source line from the figure ledger under each page's key figures. */
.land-dir{padding-top:64px}
.land-dir-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap;margin-bottom:8px}
.land-dir-head p{margin:0;color:var(--c-muted);font-size:14.5px}
.land-table{width:100%;border-collapse:collapse;font-size:15px}
.land-table th{text-align:left;font-size:13px;font-weight:600;color:var(--c-muted);padding:10px 14px 10px 0;border-bottom:2px solid var(--c-headings)}
.land-table td{padding:16px 14px 16px 0;border-bottom:1px solid var(--c-sep2);vertical-align:top;line-height:1.5}
.land-page a{font-family:var(--font-title);font-weight:600;font-size:16.5px;color:var(--c-headings)}
.land-page a:hover{color:var(--c-accent-text)}
.land-kind{color:var(--c-sub);white-space:nowrap}
.land-prov{display:block;margin-top:6px;padding-left:10px;border-left:2px solid var(--c-main);font-size:13px;color:var(--c-muted)}
.land-when{white-space:nowrap;color:var(--c-muted);font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .land-table thead{display:none}
  .land-table,.land-table tbody,.land-table tr,.land-table td{display:block}
  .land-table tr{padding:14px 0;border-bottom:1px solid var(--c-sep2)}
  .land-table td{border:0;padding:2px 0}
  .land-table td.land-kind,.land-table td.land-when{display:inline;font-size:13px}
  .land-table td.land-kind::after{content:", "}
  .land-table td.land-fig{margin-top:4px}
}

/* How a figure gets onto these pages: a real sequence, so the steps are numbered. */
.land-process{margin-top:72px;background:var(--c-soft);padding:44px 0 46px}
.land-process .wrap>p{color:var(--c-sub);max-width:62ch;margin:0 0 26px}
.land-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:step}
.land-steps li{counter-increment:step;position:relative;padding-top:46px;font-size:15px;line-height:1.55}
.land-steps li::before{content:counter(step);position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;background:var(--c-headings);color:var(--c-bg);font:700 15px/32px var(--font-title);text-align:center}
.land-steps li::after{content:"";position:absolute;top:16px;left:44px;right:-16px;height:1px;background:var(--c-sep2)}
.land-steps li:last-child::after{display:none}
.land-steps b{display:block;color:var(--c-headings);font-family:var(--font-title);font-size:16.5px;margin-bottom:4px}
.land-process .land-more{margin:26px 0 0;font-size:15px}
@media (max-width:860px){.land-steps{grid-template-columns:1fr 1fr}.land-steps li::after{display:none}}
@media (max-width:480px){.land-steps{grid-template-columns:1fr}}
.hub-home .site-footer{margin-top:0}
/* Hero figure rows, shown when the price curve's page is not in the build. */
.land-figs{display:grid;gap:12px}
.land-hero-fig{display:block;padding:16px 18px;border-left:3px solid var(--c-main);background:rgba(255,255,255,.04)}
.land-hero-fig:hover{background:rgba(255,255,255,.08)}
.land-fig-text{display:block;font-family:var(--font-title);font-size:18px;font-weight:600;line-height:1.4;color:#fff}
.land-fig-src{display:block;margin-top:6px;font-size:13px;color:#a6a6ab}
/* A bundle chart in the hero: the band is dark in both designs, so the chart tokens take their dark values here. */
.land-hero{--viz-surface:#0f0f11;--viz-ink:#ececec;--viz-ink2:#c3c2b7;--viz-grid:#2e2e2c;--viz-axis:#6b6a65;
  --viz-s1:#3987e5;--viz-s2:#d95926;--viz-s3:#199e70;--viz-s4:#c98500;--viz-s5:#d55181;--viz-s6:#008300;--viz-s7:#9085e9;--viz-s8:#e66767;
  --viz-wash:0.5;--viz-lite:0.62}
.land-svg svg{display:block;width:100%;height:auto}
.land-svg svg.cv-narrow{display:none}
@media (max-width:767px){.land-svg svg.cv-wide{display:none}.land-svg svg.cv-narrow{display:block;max-width:480px}}

/* Calculators inside the hub (layouts/_default/single.calculator.html). Each calculator brings its own stylesheet,
   scoped to .calc-app by tools/tool_fragment.py and loaded after this file. The hub classes below share a name with a
   calculator class, so their hub-only properties are neutralised here; the calculator's own rules then apply. */
.calc-app .wrap{width:auto;max-width:none;padding:0}
.calc-app .eyebrow{font-family:inherit;font-weight:inherit}
.calc-app .lede{font-size:inherit;line-height:inherit}
.calc-app .meta{font-family:inherit;line-height:inherit;text-transform:none;letter-spacing:normal;margin:0 0 10px}
.calc-app .meta span{white-space:normal}
.calc-app .meta span+span::before{content:none}
.calc-app .sources>p{font-size:inherit;color:inherit}
.calc-app .related ul{list-style:revert;padding:revert}
.calc-app .related li{padding:0;border:0}
.calc-app .related a{font-family:inherit;font-weight:inherit;color:var(--accent)}
.calc-app figure.chart{margin:0;padding:0;border:0;background:none}
.calc-app sup.src{font-size:inherit;line-height:inherit;vertical-align:baseline;margin-left:0}
/* The calculator title reads as the page title, at the hub's h1 size. */
body.hub-calc .calc-app header h1{font-size:clamp(28px,1.27vw + 24.7px,43px);font-weight:600;line-height:1.15;margin:.2em 0 .4em}
/* Dark design: the calculator's own dark values, on the hub's dark surfaces. */
.site-s-dark body.hub-calc .calc-app{--bg:#151516;--soft:#1e1e1f}

/* Code blocks in page copy (embed snippets): the same box as the citation and embed text boxes, wrapping long lines. */
.body pre{font:13px/1.55 var(--font-mono);background:var(--c-soft);color:var(--c-text);border:1px solid var(--c-sep);border-radius:2px;padding:12px 14px;margin:1.2em 0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-width:100%}
.body pre code{font:inherit;background:none;padding:0;border-radius:0;color:inherit}
/* Copy buttons (baseof.html script). The box keeps room on the right so the button never covers text. */
.copy-wrap{position:relative}
.copy-wrap>pre,.copy-wrap>textarea,.copy-wrap>code{padding-right:76px}
.copy-btn{position:absolute;top:8px;right:8px;height:28px;padding:0 12px;border:1px solid var(--c-sep2);border-radius:3px;background:var(--c-bg);color:var(--c-headings);font:600 12px var(--font-body);cursor:pointer}
.copy-btn:hover{border-color:var(--c-main);color:var(--c-accent-text)}
.copy-wrap>pre{margin:0}
.copy-wrap{margin:1.2em 0}


/* UX audit 2026-10-21, group A (docs/UX-AUDIT-2026-10-21.md). */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Focus: a 2px ring in a colour that contrasts with the surface it sits on. */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.land-hero,.top-bar{--focus:#fff}
@media (max-width:940px){.site-header{--focus:#fff}}
main:focus{outline:none}
/* Links inside running text are underlined, so they do not rely on colour alone. */
.body p a,.body li a,.lede-body a,.sources>p a,.derived-note a,.faq a,.source-head a,.land-calc-intro a,.land-more a,.land-chart-note a,.chart-foot a,.asset-list-meta a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.source-head a{color:var(--c-headings)}
sup.src a{text-decoration:none;display:inline-block;min-width:24px;padding:3px 2px;margin:-3px 0;text-align:center}
.button{text-decoration:none}
/* Larger touch targets. */
.faq details{padding:2px 0}
.faq summary{padding:11px 0;min-height:44px}
.meta a{display:inline-block;padding:4px 0}
.copy-btn{height:34px}
/* Desktop menu: Escape closes the open dropdown until focus or the pointer leaves it. */
.site-nav li.is-dismissed>.sub-menu{opacity:0!important;visibility:hidden!important}
/* Phone menu: sub-menus fold behind a button; Data and the light/dark switch sit at the top. */
@media (max-width:940px){
  .mobile-panel .scheme-toggle-text{margin:6px 0 12px}
  .mobile-nav li{position:relative}
  .mobile-nav li.has-children>a{padding-right:52px}
  .mobile-nav .sub-menu{display:none}
  .mobile-nav li.is-open>.sub-menu{display:block}
  .sub-toggle{position:absolute;right:0;top:0;width:48px;height:44px;border:0;background:none;color:var(--c-nav);cursor:pointer}
  .sub-toggle span{display:block;width:8px;height:8px;margin:0 auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
  .mobile-nav li.is-open>.sub-toggle span{transform:rotate(-135deg)}
}
/* Tables that scroll sideways inside their box say so. */
.scroll-hint{display:none;margin:1em 0 -.9em;font-size:13px;color:var(--c-muted)}
.scroll-hint.is-on{display:block}
/* Back to top, on long pages only. */
.to-top{position:fixed;right:16px;bottom:16px;z-index:40;display:none;padding:10px 14px;border-radius:3px;background:var(--c-headings);color:var(--c-bg);font:600 13px var(--font-body);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.to-top.is-shown{display:inline-block}
.to-top:hover{background:var(--c-main);color:#fff}
/* Hub page: page types link to their section; on phones the type and date read as one line. */
.land-kind a{color:var(--c-sub)}
.land-kind a:hover{color:var(--c-accent-text)}
@media (max-width:760px){
  .land-table td.land-kind::after{content:", updated "}
  .land-steps{margin-bottom:10px}
}
.land-process .land-more{margin-top:32px}
.list-subhead{font-size:1.25em;margin-top:2em}
@media (prefers-reduced-motion:reduce){.sub-toggle span{transition:none}}

/* Print: the page content and results only; no site chrome, buttons or form fields. */
@media print{
  .top-bar,.site-header,.site-header-stripe,.site-footer,.skip,.breadcrumbs,.copy-btn,.to-top,.scroll-hint,.embed,.cite,.related,.related-posts,.land-actions,.land-calc,.mobile-menu,.chart-foot p{display:none!important}
  body{background:#fff!important;color:#000!important;font-size:11pt}
  .wrap,.site-main{max-width:none!important;padding:0!important}
  a{color:#000!important;text-decoration:underline}
  .land-hero{background:#fff!important;color:#000!important}
  .land-hero h1,.land-chart-title{color:#000!important}
  .faq details>*{display:block}
  .faq details>summary{list-style:none}
  .calc-app #assumptions,.calc-app .panel:not([open]){display:none!important}
  .calc-app footer a[href]::after{content:" (" attr(href) ")";font-size:9pt}
  .calc-app fieldset,.calc-app button,.calc-app .hubbar,.calc-app input,.calc-app label,.calc-app .hint,.calc-app .err{display:none!important}
  .calc-app details:not([open]){display:none!important}
  .calc-app table,.body table{font-size:9pt}
  table,figure,tr{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
}