/* Generated by build.py. Edit shells/x2/{tokens,shell}.css and shared/css, not this file. */
@font-face{font-family:"Inter";src:url(fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jbmono-var.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
/* ---- shells/x2/tokens.css ---- */
/* x2 tokens. Dark is the default theme; light under [data-theme="light"].
   Same token contract as x1 (see shells/x1/tokens.css for the full list and the contrast rule). */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080d13; --bg-alt: #0b121a; --surface: #0f1822; --surface-2: #142030; --surface-3: #1b2a3d;
  --line: #223244; --line-2: #36506a; --thead-bg: #142030; --hdr-bg: rgba(8, 13, 19, .86); --row-hover: #142030;
  --text: #e9eff5; --text-2: #bccad8; --text-3: #a1b2c3; --focus: #9bd8ff; --field-line: #6f87a0;
  --accent: #62cdf2; --accent-hover: #8ad9f5; --accent-ink: #04151d; --accent-soft: #0f2a38; --accent-text: #62cdf2; --link: #7fd6f5;
  --pot: #b9a3f7; --pot-soft: #231d3c; --pot-text: #c9b8fa;
  --ver: #62cdf2; --ver-soft: #0f2a38; --ver-text: #7fd6f5;
  --col: #58d6a0; --col-soft: #0f2f23; --col-text: #6fe0b0;
  --good: #58d6a0; --good-soft: #0f2f23; --good-text: #6fe0b0;
  --warn: #f2a63b; --warn-soft: #2e2210; --warn-text: #f5b95e; --warn-line: #a8721f;
  --bad: #ff8e86; --bad-soft: #3a1a1c; --bad-text: #ffa7a0;
  --info: #7fb2e8; --info-soft: #13273b; --info-text: #9cc6f0;
  --c1: #62cdf2; --c2: #f2a63b; --c3: #b9a3f7; --c4: #cdd8e3; --c5: #58d6a0;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 16px;
  --shadow-1: 0 0 0 1px rgba(98, 205, 242, .03);
  --shadow-2: 0 24px 60px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(98, 205, 242, .06);
  --cta-bg: #0e2230; --cta-line: #1f3f55; --page-head-bg: transparent;
  --hero-glow: radial-gradient(60% 50% at 70% 0%, rgba(58, 167, 211, .20), transparent 70%), radial-gradient(40% 40% at 10% 10%, rgba(242, 166, 59, .08), transparent 70%);
  --grid-line: rgba(120, 160, 200, .07);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --heading-weight: 650; --heading-tracking: -0.025em; --eyebrow-font: "JetBrains Mono", ui-monospace, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f8; --bg-alt: #eaeef2; --surface: #ffffff; --surface-2: #f1f4f7; --surface-3: #e3e9ef;
  --line: #d3dbe3; --line-2: #aebccb; --thead-bg: #eef2f6; --hdr-bg: rgba(244, 246, 248, .88); --row-hover: #f1f4f7;
  --text: #0b1722; --text-2: #34475a; --text-3: #4c5f71; --focus: #0b5cd5; --field-line: #6f8296;
  --accent: #0a6290; --accent-hover: #08507a; --accent-ink: #ffffff; --accent-soft: #e2eef5; --accent-text: #0a6290; --link: #0a6290;
  --pot: #6b4bb8; --pot-soft: #ece7f8; --pot-text: #5a3da4;
  --ver: #0a6290; --ver-soft: #e2eef5; --ver-text: #0a6290;
  --col: #0c6b47; --col-soft: #dff1e8; --col-text: #0c6b47;
  --good: #0c6b47; --good-soft: #e3f4ec; --good-text: #0c6b47;
  --warn: #b8560b; --warn-soft: #fbeedd; --warn-text: #8a4000; --warn-line: #b8560b;
  --bad: #b3261e; --bad-soft: #fbe9e7; --bad-text: #a01d16;
  --info: #1f5f99; --info-soft: #e3eef9; --info-text: #1b568c;
  --c1: #0a6290; --c2: #a34a07; --c3: #6b4bb8; --c4: #55626f; --c5: #0c6b47;
  --shadow-1: 0 1px 2px rgba(20, 40, 60, .06);
  --shadow-2: 0 1px 2px rgba(20, 40, 60, .06), 0 12px 32px -16px rgba(20, 40, 60, .22);
  --cta-bg: #e2eef5; --cta-line: #bcd4e4;
  --hero-glow: none; --grid-line: transparent;
}

html:root { --container: 1360px; }

/* ---- shared/css/base.css ---- */
/* base.css: reset, spacing scale, typography, accessibility primitives.
   Shell-agnostic. Reads only the token contract (see the shell tokens.css and README).
   Shells may override anything here from shell.css. */

:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(16px, 4vw, 32px);
  --hdr-h: 64px;
  --sticky-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 24px); background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-base, 1rem)/var(--lh, 1.6) var(--font);
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word; overflow-x: clip;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; display: block; }
main:focus { outline: none; }
img, svg, video, canvas { max-width: 100%; height: auto; }
svg:not([height]) { height: auto; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display, var(--font)); font-weight: var(--heading-weight, 650);
  letter-spacing: var(--heading-tracking, -0.02em); line-height: 1.12; color: var(--text); text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.5rem); line-height: 1.05; margin-bottom: var(--s4); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.375rem); margin-bottom: var(--s4); }
h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: var(--s2); letter-spacing: -0.01em; }
h4 { font-size: 1rem; line-height: 1.4; margin-bottom: var(--s2); }
p { margin-bottom: var(--s4); }
p:last-child { margin-bottom: 0; }
a { color: var(--link, var(--accent-text)); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
strong, b { font-weight: 650; }
small, .small { font-size: 0.875rem; }
code, kbd, samp, .mono { font-family: var(--mono); font-size: 0.92em; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0 6px; text-align: center; line-height: 1.55;
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); color: var(--text);
}
.num, .mono, [data-num] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.r { text-align: right; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: 0; }

.vh, .sr {
  position: absolute !important; right: 100%; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 8px; top: -64px; z-index: 300; padding: 12px 18px; border-radius: 0 0 8px 8px;
  background: var(--accent); color: var(--accent-ink); font-weight: 650; text-decoration: none;
}
.skip:focus { top: 0; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer, .sticky-bar, .no-print, .skip, .theme-toggle, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---- shared/css/components.css ---- */
/* components.css: component classes used by every page body. Token driven, shell-agnostic.
   Page bodies use ONLY these classes (plus widget classes). Shells restyle by changing tokens
   and by overriding selectors in shell.css. Do not hard-code colours here. */

/* ---------------------------------------------------------------- layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(40px, 6vw, 88px); }
.section--tight { padding-block: clamp(24px, 4vw, 48px); }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section__head { max-width: 62ch; margin-bottom: var(--s6); }
.section__head h2 { margin-bottom: var(--s3); }
.section__head > p:last-child { color: var(--text-2); font-size: 1.0625rem; }
.eyebrow {
  display: block; margin-bottom: var(--s3); font: 650 0.78rem/1.4 var(--eyebrow-font, var(--font));
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-text);
}
.lede { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--text-2); max-width: 60ch; }
.stack > * + * { margin-top: var(--s4); }
.stack--lg > * + * { margin-top: var(--s6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.split { display: grid; gap: var(--s6); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.split--wide-left { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split, .split--wide-left, .split--wide-right { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* page head used on inner pages */
.page-head { padding-block: clamp(28px, 4.5vw, 64px) clamp(20px, 3vw, 40px); border-bottom: 1px solid var(--line); background: var(--page-head-bg, transparent); }
.page-head h1 { max-width: 20ch; }
.page-head--wide h1 { max-width: 26ch; }
.page-head .lede { margin-top: var(--s2); }
.page-head .actions { margin-top: var(--s5); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 0 0 var(--s4); font-size: 0.875rem; color: var(--text-2); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--text-3); }
.crumbs a { color: var(--text-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* prose */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { margin-top: var(--s7); font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); }
.prose h3 { margin-top: var(--s6); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--text-3); }
.prose .callout, .prose .formula, .prose .table-wrap, .prose .card { margin-block: var(--s5); }
.toc { font-size: 0.9375rem; }
.toc ol { padding-left: 1.2em; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px;
  border: 1px solid transparent; border-radius: var(--radius, 10px); font-weight: 650; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; background: var(--surface-2); color: var(--text); transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--btn-bg, var(--accent)); color: var(--btn-ink, var(--accent-ink)); }
.btn--primary:hover { background: var(--btn-hover, var(--accent-hover)); color: var(--btn-ink, var(--accent-ink)); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--line-2); }
.btn--secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-3); }
.btn--ghost { background: transparent; color: var(--link, var(--accent-text)); border-color: transparent; padding-inline: 12px; }
.btn--ghost:hover { background: var(--accent-soft); color: var(--accent-text); }
.btn--sm { min-height: 36px; padding: 6px 14px; font-size: 0.9375rem; }
.btn--lg { min-height: 52px; padding: 14px 28px; font-size: 1.0625rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* ---------------------------------------------------------------- badges, state chips */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--text-2); font: 650 0.72rem/1.6 var(--font); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.badge--synth { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-line, var(--warn)); font-family: var(--mono); letter-spacing: .03em; }
.badge--muted { background: transparent; }
.badge--live { background: var(--good-soft); color: var(--good-text); border-color: var(--good); }
.badge--pot { background: var(--pot-soft); color: var(--pot-text); border-color: var(--pot); }
.badge--ver { background: var(--ver-soft); color: var(--ver-text); border-color: var(--ver); }
.badge--col { background: var(--col-soft); color: var(--col-text); border-color: var(--col); }
.badge--bad { background: var(--bad-soft); color: var(--bad-text); border-color: var(--bad); }
.badge--warn { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn); }
.badge--info { background: var(--info-soft, var(--accent-soft)); color: var(--info-text, var(--accent-text)); border-color: var(--info, var(--accent)); }

/* certainty ramp: hatched = potential, half = verified, solid = collected */
.state { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.state::before { content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none; box-sizing: border-box; }
.state--pot::before { border: 2px dashed var(--pot); }
.state--ver::before { border: 2px solid var(--ver); background: linear-gradient(90deg, var(--ver) 50%, transparent 50%); }
.state--col::before { border: 2px solid var(--col); background: var(--col); }
.swatch { display: inline-block; width: 28px; height: 12px; border-radius: 3px; vertical-align: middle; }
.swatch--pot { background: repeating-linear-gradient(135deg, var(--pot) 0 2px, transparent 2px 5px); border: 1px solid var(--pot); }
.swatch--ver { background: var(--ver); opacity: .75; }
.swatch--col { background: var(--col); }

/* ---------------------------------------------------------------- cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); padding: var(--s5); box-shadow: var(--shadow-1); min-width: 0; }
.card--flat { box-shadow: none; background: var(--surface-2); }
.card__title { margin-bottom: var(--s2); }
.card p { color: var(--text-2); }
.card > h3 + p, .card > h2 + p { margin-top: 0; }
.card--link { padding: 0; transition: border-color .15s, box-shadow .15s; }
.card--link:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.card--link .card__link { display: block; padding: var(--s5); color: inherit; text-decoration: none; height: 100%; border-radius: inherit; }
.card--link .card__link:hover .card__title { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.card--link .badge { margin-top: var(--s3); }
.card-grid { list-style: none; display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); padding: 0; margin: 0; }
.card-grid > li { display: flex; flex-direction: column; }
.card-grid .card { height: 100%; }
.card__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); margin-bottom: var(--s3); }
.card__icon svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- callouts */
.callout {
  border: 1px solid var(--line-2); border-left-width: 4px; border-radius: var(--radius, 10px); padding: var(--s4) var(--s5);
  background: var(--surface-2); color: var(--text);
}
.callout > :first-child { margin-top: 0; }
.callout--info { border-left-color: var(--info, var(--accent)); }
.callout--warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout--ok { border-left-color: var(--good); background: var(--good-soft); }
.callout--bad { border-left-color: var(--bad); background: var(--bad-soft); }
.callout__title { font-weight: 700; margin-bottom: 4px; }
.callout p { color: inherit; }

/* ---------------------------------------------------------------- formula blocks, facts, definitions */
.formula {
  font-family: var(--mono); font-size: 0.9rem; line-height: 1.7; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius, 10px); padding: var(--s3) var(--s4); overflow-x: auto; white-space: pre-wrap; color: var(--text);
}
.formula b { color: var(--accent-text); font-weight: 600; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--s5); margin: 0; }
dl.facts dt { color: var(--text-2); font-weight: 600; }
dl.facts dd { margin: 0; }
@media (max-width: 520px) { dl.facts { grid-template-columns: 1fr; gap: 0; } dl.facts dd { margin-bottom: var(--s3); } }
.placeholder-block {
  border: 2px dashed var(--warn); background: var(--warn-soft); color: var(--text); border-radius: var(--radius, 10px); padding: var(--s4) var(--s5);
}
.placeholder-block__title { font-weight: 700; color: var(--warn-text); margin-bottom: 4px; }

/* ---------------------------------------------------------------- KPI */
.kpi-row { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); padding: var(--s4) var(--s5); border-top: 3px solid var(--line-2); min-width: 0; }
.kpi__label { font-size: 0.8125rem; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.kpi__value { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi__note { font-size: 0.875rem; color: var(--text-2); margin-top: 4px; }
.kpi--pot { border-top-color: var(--pot); } .kpi--pot .kpi__value { color: var(--pot-text); }
.kpi--ver { border-top-color: var(--ver); } .kpi--ver .kpi__value { color: var(--ver-text); }
.kpi--col { border-top-color: var(--col); } .kpi--col .kpi__value { color: var(--col-text); }
.kpi--bad { border-top-color: var(--bad); } .kpi--bad .kpi__value { color: var(--bad-text); }
.kpi--warn { border-top-color: var(--warn); } .kpi--warn .kpi__value { color: var(--warn-text); }

/* ---------------------------------------------------------------- steps, checklists */
.steps { list-style: none; counter-reset: step; display: grid; gap: var(--s4); padding: 0; margin: 0; }
.steps > li { counter-increment: step; position: relative; padding: var(--s4) var(--s5) var(--s4) calc(var(--s5) + 44px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); }
.steps > li::before {
  content: counter(step); position: absolute; left: var(--s4); top: var(--s4); width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-variant-numeric: tabular-nums;
}
.steps h3 { margin-bottom: 4px; font-size: 1.125rem; }
.steps p { color: var(--text-2); }
.steps--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.steps--row > li { padding: calc(var(--s4) + 44px) var(--s5) var(--s4); }
.checklist, .xlist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.checklist > li, .xlist > li { position: relative; padding-left: 32px; }
.checklist > li::before, .xlist > li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 20px; height: 20px; border-radius: 50%; }
.checklist > li::after, .xlist > li::after { content: ""; position: absolute; left: 4px; top: calc(0.28em + 4px); width: 12px; height: 12px; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.checklist > li::before { background: var(--good-soft); border: 1.5px solid var(--good); }
.checklist > li::after { background: var(--good-text); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.xlist > li::before { background: var(--bad-soft); border: 1.5px solid var(--bad); }
.xlist > li::after { background: var(--bad-text); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.checklist > li > strong:first-child, .xlist > li > strong:first-child { color: var(--text); }
.bullets { padding-left: 1.2em; display: grid; gap: 6px; } .bullets li::marker { color: var(--text-3); }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius, 10px); background: var(--surface); -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: -2px; }
table.data { width: 100%; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
table.data caption { text-align: left; padding: var(--s3) var(--s4); font-weight: 650; color: var(--text); caption-side: top; border-bottom: 1px solid var(--line); }
table.data th, table.data td { padding: 10px var(--s4); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { background: var(--thead-bg, var(--surface-2)); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); font-weight: 650; white-space: nowrap; }
table.data tbody th { font-weight: 600; }
table.data tbody tr:last-child > * { border-bottom: 0; }
table.data tfoot td, table.data tfoot th { background: var(--surface-2); font-weight: 650; border-top: 1px solid var(--line-2); }
table.data .r, table.data td.num, table.data th.num { text-align: right; }
table.data tbody tr:hover > * { background: var(--row-hover, var(--surface-2)); }
table.data th .sort {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; padding: 2px 4px; margin: -2px -4px; border-radius: 4px;
}
table.data th .sort::after { content: "\2195"; opacity: .5; font-size: .9em; }
table.data th[aria-sort="ascending"] .sort::after { content: "\2191"; opacity: 1; color: var(--accent-text); }
table.data th[aria-sort="descending"] .sort::after { content: "\2193"; opacity: 1; color: var(--accent-text); }
table.data th .sort:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.cell-pot { color: var(--pot-text); } .cell-ver { color: var(--ver-text); } .cell-col { color: var(--col-text); } .cell-bad { color: var(--bad-text); }
.table-note { font-size: 0.875rem; color: var(--text-2); margin-top: var(--s3); }

/* ---- table scroll hint (wider than 640px, only when the wrapper actually overflows) ----
   Preferred: scroll-driven edge fade (no JS). Fallback: classic background-attachment shadows. */
@property --tw-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --tw-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@media (min-width: 641px) {
  @supports (animation-timeline: scroll(self inline)) {
    .table-wrap {
      animation: tw-edge linear both; animation-timeline: scroll(self inline);
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--tw-l), #000 calc(100% - var(--tw-r)), transparent 100%);
      mask-image: linear-gradient(to right, transparent 0, #000 var(--tw-l), #000 calc(100% - var(--tw-r)), transparent 100%);
    }
  }
  @supports not (animation-timeline: scroll(self inline)) {
    .table-wrap {
      background:
        linear-gradient(to right, var(--surface) 30%, transparent) left center / 40px 100% local no-repeat,
        linear-gradient(to left, var(--surface) 30%, transparent) right center / 40px 100% local no-repeat,
        radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 28%, transparent), transparent) left center / 12px 100% scroll no-repeat,
        radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 28%, transparent), transparent) right center / 12px 100% scroll no-repeat,
        var(--surface);
    }
  }
}
@keyframes tw-edge {
  0% { --tw-l: 0px; --tw-r: 32px; }
  3% { --tw-l: 32px; --tw-r: 32px; }
  97% { --tw-l: 32px; --tw-r: 32px; }
  100% { --tw-l: 32px; --tw-r: 0px; }
}

/* ---- tables as cards on phones. build.py adds data-stack + td[data-label]; opt out with data-no-stack ---- */
@media (max-width: 640px) {
  .table-wrap:has(> table[data-stack]) { overflow: visible; border: 0; background: none; border-radius: 0; }
  .table-wrap table[data-stack], .table-wrap table[data-stack] :is(tbody, tfoot, tr, th, td, caption) { display: block; }
  .table-wrap table[data-stack] { min-width: 0; width: 100%; font-size: 0.9375rem; }
  .table-wrap table[data-stack] caption { padding: 0 0 var(--s3); border: 0; font-size: 1rem; }
  /* header row leaves the visual flow but stays in the accessibility tree (labels come from data-label) */
  .table-wrap table[data-stack] thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table-wrap table[data-stack][data-stack-sort] thead { display: none; }
  .table-wrap table[data-stack] tbody, .table-wrap table[data-stack] tfoot { display: grid; gap: var(--s3); }
  .table-wrap table[data-stack] tfoot { margin-top: var(--s3); }
  .table-wrap table[data-stack] tr { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius, 10px); background: var(--surface); overflow: hidden; }
  .table-wrap table[data-stack] tbody tr:hover > * { background: transparent; }
  .table-wrap table[data-stack] :is(th, td) { padding: 10px var(--s4); border: 0; border-bottom: 1px solid var(--line); text-align: left; min-width: 0; overflow-wrap: anywhere; }
  .table-wrap table[data-stack] :is(tbody, tfoot) tr > :last-child { border-bottom: 0; }
  .table-wrap table[data-stack] tbody th, .table-wrap table[data-stack] tfoot th { order: -2; position: static; background: var(--surface-2); font-size: 1rem; font-weight: 650; color: var(--text); text-transform: none; letter-spacing: 0; white-space: normal; }
  .table-wrap table[data-stack] td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 0.75rem; font-weight: 650; line-height: 1.4; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
  .table-wrap table[data-stack] td.r, .table-wrap table[data-stack] td.num { text-align: left; }
  .table-wrap table[data-stack] tfoot :is(td, th) { background: var(--surface-2); border-top: 0; }
  .table-wrap table[data-stack] td:empty { display: none; }
  /* comparison table: MileCFO cell first, highlighted */
  .table-wrap table.pl-cmp[data-stack] { min-width: 0; }
  .table-wrap table.pl-cmp[data-stack] td.pl-us { order: -1; background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); border-bottom-color: var(--line-2); font-weight: 500; }
  .table-wrap table.pl-cmp[data-stack] td.pl-us::before { color: var(--accent-text); }
  .table-wrap table.pl-cmp[data-stack] td .pl-tag { margin-bottom: 2px; }
}

/* ---------------------------------------------------------------- FAQ accordion */
.faq { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); background: var(--surface); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; padding: var(--s4) var(--s5); font-weight: 650; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--accent-text); flex: none; transition: transform .15s; }
.faq details[open] > summary::after { content: "\2212"; }
.faq summary:hover { background: var(--surface-2); }
.faq summary:focus-visible { outline-offset: -3px; }
.faq details > :not(summary) { padding: 0 var(--s5) var(--s4); color: var(--text-2); max-width: 75ch; }
.faq details > :not(summary) + :not(summary) { margin-top: calc(-1 * var(--s2)); }

/* ---------------------------------------------------------------- CTA band */
.cta-band { background: var(--cta-bg, var(--accent-soft)); border: 1px solid var(--cta-line, var(--line)); border-radius: var(--radius-lg, 14px); padding: clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; justify-content: space-between; }
.cta-band h2 { margin-bottom: var(--s2); font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
.cta-band p { color: var(--text-2); max-width: 56ch; }
.cta-band .actions { flex: 0 1 auto; max-width: 100%; }

/* ---------------------------------------------------------------- provenance chips */
.prov { border: 1px solid var(--line); border-radius: var(--radius, 10px); background: var(--surface-2); padding: var(--s3) var(--s4); font-size: 0.875rem; }
.prov__title { font-weight: 700; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.prov dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px var(--s5); margin: 0; }
.prov dt { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.prov dd { margin: 0; color: var(--text); }
.prov .not-live { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-2); font-weight: 600; color: var(--warn-text); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 2px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 0.8125rem; background: var(--surface); color: var(--text-2); }
.chip b { color: var(--text); font-weight: 650; }

/* ---------------------------------------------------------------- forms */
.form { display: grid; gap: var(--s4); }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field > .label, legend.label { font-weight: 650; font-size: 0.9375rem; }
.field .hint, .hint { font-weight: 400; font-size: 0.875rem; color: var(--text-2); display: block; }
.opt { font-weight: 400; color: var(--text-2); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="search"], input:not([type]), select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--field-line, var(--text-3)); border-radius: var(--radius, 10px); background: var(--field-bg, var(--surface)); color: var(--text); font-size: 1rem;
}
textarea { min-height: 110px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); border-width: 2px; }
.err { color: var(--bad-text); font-size: 0.875rem; font-weight: 600; min-height: 0; }
.err:empty { display: none; }
.check { display: flex; gap: var(--s3); align-items: flex-start; }
.check input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.check label { font-weight: 400; font-size: 0.9375rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { display: none; padding: var(--s3) var(--s4); border-radius: var(--radius, 10px); border: 1px solid var(--line-2); font-size: 0.9375rem; }
.status.show { display: block; }
.status.ok { background: var(--good-soft); border-color: var(--good); color: var(--text); }
.status.bad { background: var(--bad-soft); border-color: var(--bad); color: var(--text); }
.status.load { background: var(--surface-2); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 28px; }
.inline-fields { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius, 10px); overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: transparent; padding: 8px 14px; min-height: 40px; cursor: pointer; font-weight: 600; color: var(--text-2); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------------------- tools */
.tool { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .tool { grid-template-columns: minmax(0, 1fr); } }
.tool__panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); padding: var(--s5); min-width: 0; }
.tool__result { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-lg, 14px); padding: var(--s5); position: sticky; top: calc(var(--hdr-h) + 16px); min-width: 0; box-shadow: var(--shadow-1); }
@media (max-width: 900px) { .tool__result { position: static; } }
.tool__result h2 { font-size: 1.0625rem; margin-bottom: var(--s3); }
.result-big { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.result-big--bad { color: var(--bad-text); }
.result-sub { color: var(--text-2); margin-bottom: var(--s4); }
dl.result-list { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s4); margin: var(--s3) 0; }
dl.result-list dt, dl.result-list dd { padding: 8px 0; border-bottom: 1px solid var(--line); margin: 0; }
dl.result-list dt { color: var(--text-2); }
dl.result-list dd { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.result-empty { color: var(--text-2); }
.tool__note { font-size: 0.875rem; color: var(--text-2); margin-top: var(--s4); }
.tool__formulas { margin-top: var(--s4); }
details.more { border: 1px solid var(--line); border-radius: var(--radius, 10px); background: var(--surface); }
details.more > summary { cursor: pointer; padding: var(--s3) var(--s4); font-weight: 650; min-height: 44px; display: flex; align-items: center; }
details.more > :not(summary) { padding: 0 var(--s4) var(--s4); }

/* ---------------------------------------------------------------- bars (simple CSS charts) */
.bars { display: grid; gap: 8px; }
.bars__row { display: grid; grid-template-columns: minmax(80px, 150px) 1fr auto; gap: var(--s3); align-items: center; font-size: 0.9375rem; }
.bars__track { height: 12px; background: var(--surface-3, var(--surface-2)); border-radius: 6px; overflow: hidden; }
.bars__fill { display: block; height: 100%; background: var(--c1, var(--accent)); border-radius: 6px; }
.bars__val { font-variant-numeric: tabular-nums; font-weight: 650; }

/* widget shell: figures, captions */
.figure { margin: 0; }
.figure figcaption { font-size: 0.875rem; color: var(--text-2); margin-top: var(--s2); }
.widget { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-1); overflow: clip; }
.widget__head { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.widget__head h2, .widget__head h3 { margin: 0; font-size: 1.0625rem; }
.widget__body { padding: var(--s5); }
.noscript-note { padding: var(--s4); border: 1px dashed var(--warn); background: var(--warn-soft); border-radius: var(--radius, 10px); }

/* quote-like statement (not a testimonial) */
.statement { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.35; font-weight: 600; letter-spacing: -.015em; max-width: 34ch; }

/* sticky call bar (markup lives in the shell layout) */
.sticky-bar { display: none; }
@media (max-width: 760px) {
  :root { --sticky-h: 68px; }
  .sticky-bar {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--hdr-bg, var(--surface)); border-top: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .sticky-bar .btn { min-height: 48px; }
  body { padding-bottom: var(--sticky-h); }
  .sticky-bar { transition: transform .2s ease, visibility .2s; }
  .sticky-bar.is-idle { transform: translateY(110%); visibility: hidden; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .sticky-bar { transition: none; } }

/* ---------------------------------------------------------------- input affix (tool forms) */
.input-affix { display: flex; align-items: stretch; border: 1px solid var(--field-line, var(--text-3)); border-radius: var(--radius, 10px); background: var(--field-bg, var(--surface)); overflow: hidden; }
.input-affix:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.input-affix input { border: 0 !important; border-radius: 0; outline: 0 !important; min-width: 0; flex: 1; background: transparent; }
.input-affix .affix { display: grid; place-items: center; padding: 0 12px; color: var(--text-2); background: var(--surface-2); font-size: .9375rem; white-space: nowrap; }
.input-affix .affix--end { border-left: 1px solid var(--line); }
.input-affix .affix:not(.affix--end) { border-right: 1px solid var(--line); }
.input-affix:has(input[aria-invalid="true"]) { border-color: var(--bad); border-width: 2px; }
.tool__panel fieldset { display: grid; gap: var(--s4); margin-bottom: var(--s5); }
.tool__panel legend { font-weight: 700; font-size: 1rem; padding: 0; margin-bottom: var(--s3); }
.tool__panel .actions { margin-top: var(--s4); }
.tool-example { margin-top: var(--s2); }
.field { align-content: start; }
.inline-fields { align-items: start; }
.input-affix input { min-height: 44px; }

/* ---------------------------------------------------------------- split page head + stat card + equal cards */
.page-head--split .container { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--s6) var(--s7); align-items: center; }
.page-head--split h1 { max-width: 24ch; }
.page-head__aside { align-self: center; }
.stat-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-lg, 16px); padding: var(--s5); box-shadow: var(--shadow-1); }
.stat-card__k { font-size: .8125rem; font-weight: 650; color: var(--text-2); margin: 0 0 var(--s2); }
.stat-card__v { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.05; margin: 0; font-variant-numeric: tabular-nums; }
.stat-card__v small { font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.stat-card__d { margin: var(--s2) 0 0; color: var(--text); font-size: .9375rem; }
.stat-card__s { margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: .8125rem; color: var(--text-2); line-height: 1.5; }
.stat-card .checklist { margin: 0; }
.grid--equal { align-items: stretch; }
.grid--equal > .card { display: flex; flex-direction: column; }
.grid--equal > .card .card__foot { margin-top: auto; padding-top: 20px; }
@media (max-width: 860px) { .page-head--split .container { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- figures (inline SVG illustrations, token driven) */
.fig { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); padding: var(--s4); min-width: 0; }
.fig svg { display: block; width: 100%; height: auto; max-width: 560px; margin-inline: auto; }
.fig--wide svg { max-width: 860px; }
.fig figcaption { font-size: .875rem; color: var(--text-2); margin-top: var(--s3); max-width: 70ch; }
.fig__key { margin: 0 0 var(--s2); padding-left: 1.4em; display: grid; gap: 3px; }
.fig__tag { display: inline-block; font: 600 .72rem/1.6 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--warn-text); background: var(--warn-soft); border: 1px solid var(--warn-line, var(--warn)); border-radius: 999px; padding: 0 8px; }
.fig-split { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 980px) { .fig-split { grid-template-columns: minmax(0, 1fr); } }
.fig svg text { font-family: var(--font); }
.fig svg .sv-m { font-family: var(--mono); }
.sv-paper { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1.2; }
.sv-field { fill: var(--bg); stroke: var(--line); }
.sv-node, .sv-doc rect { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1.2; }
.sv-bar { fill: var(--line-2); } .sv-bar2 { fill: var(--text-3); } .sv-acc { fill: var(--accent); } .sv-acc2 { fill: var(--accent); opacity: .6; }
.sv-warnfill { fill: var(--warn); } .sv-badfill { fill: var(--bad); }
.sv-t { fill: var(--text); } .sv-t2 { fill: var(--text-2); } .sv-t3 { fill: var(--text-3); }
.sv-ti, .sv-tw { fill: var(--accent-ink); } .sv-tb { fill: var(--bad-text); }
.sv-gap { fill: var(--bad-soft); stroke: var(--bad); stroke-dasharray: 4 3; } .sv-gapfill { fill: var(--bad-soft); stroke: var(--bad); }
.sv-gaptag rect { fill: var(--bad-soft); stroke: var(--bad); }
.sv-warnbox { stroke: var(--warn); stroke-width: 1.5; }
.sv-free { fill: var(--surface-3); } .sv-bill { fill: var(--warn); }
.sv-band { fill: var(--accent-soft); } .sv-set { stroke: var(--accent); stroke-dasharray: 5 4; }
.sv-trace { stroke: var(--accent); fill: none; stroke-width: 2.5; stroke-linejoin: round; } .sv-dot { fill: var(--warn); }
.sv-rule { stroke: var(--line-2); } .sv-tick line { stroke: var(--text-3); stroke-width: 1.5; }
.sv-sign { stroke: var(--text-2); fill: none; stroke-width: 2; stroke-linecap: round; }
.sv-pin circle { fill: var(--accent); } .sv-pin text { fill: var(--accent-ink); font: 700 12px var(--font); }
.sv-link { stroke: var(--accent); fill: none; stroke-width: 2; } .sv-link path { stroke: var(--accent); fill: none; }
.sv-dash { stroke: var(--bad); stroke-dasharray: 4 3; fill: none; }

/* ---------------------------------------------------------------- glossary, compare, case study, jump nav */
.jump { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: var(--s4) 0 0; }
.jump a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--text); text-decoration: none; font: 600 .9375rem var(--mono); }
.jump a:hover { border-color: var(--accent); color: var(--accent-text); }
.gloss { margin: 0; display: grid; gap: 0; }
.gloss__letter { font: 700 1.5rem var(--mono); color: var(--accent-text); margin: var(--s6) 0 var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--hdr-h, 64px) + 12px); }
.gloss dt { font-weight: 700; margin-top: var(--s4); }
.gloss dt abbr { text-decoration: none; }
.gloss dd { margin: 4px 0 0; color: var(--text-2); max-width: 70ch; }
.gloss dd a { color: var(--link); }
.compare th[scope="col"].is-us, .compare td.is-us { background: var(--accent-soft); }
.compare td, .compare th { vertical-align: top; }
.compare .yes { color: var(--good-text); font-weight: 650; } .compare .no { color: var(--bad-text); font-weight: 650; } .compare .mid { color: var(--warn-text); font-weight: 650; }
.src { font-size: .8125rem; color: var(--text-2); border-top: 1px solid var(--line); margin-top: var(--s5); padding-top: var(--s3); }
.casefile { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.casefile .card { border-top: 3px solid var(--accent); }
.case-fill { border: 1px dashed var(--warn); background: var(--warn-soft); color: var(--warn-text); border-radius: 4px; padding: 0 6px; font-family: var(--mono); font-size: .875em; }
.faq-group + .faq-group { margin-top: var(--s7); }
.faq-group > h2 { margin-bottom: var(--s3); scroll-margin-top: calc(var(--hdr-h, 64px) + 12px); }
.tile-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.tile { display: flex; flex-direction: column; gap: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); padding: var(--s5); min-width: 0; }
.tile svg { width: 44px; height: 44px; color: var(--accent-text); flex: none; }
.tile h3 { font-size: 1.0625rem; } .tile p { color: var(--text-2); font-size: .9375rem; }
.noscript-card { border: 1px solid var(--line-2); border-radius: var(--radius-lg, 14px); background: var(--surface); padding: var(--s4) var(--s5); }
.noscript-card h2 { font-size: 1.125rem; margin-bottom: var(--s2); }
.jump--text a { font-family: var(--font); font-size: .875rem; padding: 0 14px; }

/* ---- overflow guards at phone width: grid tracks must be allowed to shrink below content min-size ---- */
.cab-k2 .k2-drop, .cab-k2 .k2-panel, .cab-k2 .k2-empty { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.cab-k2 .k2-drop > *, .cab-k2 .k2-panel > *, .cab-k2 .k2-empty > * { min-width: 0; max-width: 100%; }
.cab-k2 .k2-drop input[type=file] { width: 100%; }

/* ---- shells/x2/shell.css ---- */
/* x2 shell: header, nav, footer, chrome. Character: dark console, mono eyebrows, hairline grid. */

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 80; background: var(--hdr-bg); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.site-header__in { display: flex; align-items: center; gap: var(--s5); min-height: var(--hdr-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; font-size: 1.0625rem; letter-spacing: -.01em; text-decoration: none; flex: none; }
.brand:hover { color: var(--text); text-decoration: none; }
.brand__mark { flex: none; }
.nav { display: flex; gap: 2px; margin-left: var(--s2); }
.nav__link { color: var(--text-2); text-decoration: none; font-size: .9375rem; font-weight: 550; padding: 8px 11px; border-radius: 8px; white-space: nowrap; }
.nav__link:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.header-phone { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--text); font-weight: 650; font-size: .9375rem; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.header-phone:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.header-phone .icon { color: var(--accent-text); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; width: 40px; padding: 0; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); border-radius: 10px; cursor: pointer; font-size: .875rem; font-weight: 600; }
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.nav-toggle { display: none; width: 44px; height: 40px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 10px; cursor: pointer; position: relative; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; position: absolute; left: 12px; width: 18px; height: 2px; background: var(--text); border-radius: 2px; content: ""; }
.nav-toggle__bars { top: 18px; } .nav-toggle__bars::before { top: -6px; left: 0; } .nav-toggle__bars::after { top: 6px; left: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }
.link-btn { all: unset; cursor: pointer; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (max-width: 1239px) {
  .nav-toggle { display: inline-block; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; margin: 0; padding: var(--s3) var(--gutter) var(--s4); background: var(--surface); border-bottom: 1px solid var(--line-2); box-shadow: var(--shadow-2); display: none; max-height: calc(100vh - var(--hdr-h) - var(--sticky-h)); overflow-y: auto; }
  .nav.is-open { display: flex; }
  .nav__link { padding: 14px 8px; font-size: 1.0625rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav__link:last-child { border-bottom: 0; }
}
@media (max-width: 1239px) and (min-width: 761px) { .site-header__actions .btn { display: inline-flex; } }
@media (max-width: 1099px) { .header-phone span { display: none; } .header-phone { width: 40px; height: 40px; justify-content: center; padding: 0; border: 1px solid var(--line-2); background: var(--surface); } }
@media (max-width: 760px) { .site-header__actions > .btn--primary { display: none; } .header-phone { display: none; } .theme-toggle__label { display: none; } .theme-toggle { width: 44px; padding: 0; justify-content: center; } }

/* ---------- footer ---------- */
.site-footer { margin-top: var(--s9); background: var(--bg-alt); border-top: 1px solid var(--line); padding-block: var(--s8) var(--s6); font-size: .9375rem; }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--s7); }
.site-footer__about p { color: var(--text-2); max-width: 44ch; margin-top: var(--s3); }
.site-footer__about .placeholder-block { margin-top: var(--s4); font-size: .875rem; }
.site-footer__cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s5); }
.footer__h { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); margin-bottom: var(--s3); font-weight: 700; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer__col a { color: var(--text); text-decoration: none; } .footer__col a:hover { color: var(--accent-text); text-decoration: underline; }
.site-footer__legal { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--text-2); font-size: .8125rem; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: space-between; }
.site-footer__legal p { max-width: 90ch; }
@media (max-width: 1100px) { .site-footer__top { grid-template-columns: minmax(0, 1fr); } .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer { margin-top: var(--s8); } }

/* ---------- x2 character: console feel, mono eyebrows, hairline grid behind page heads ---------- */
.page-head { background-image: var(--hero-glow); position: relative; }
.page-head::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; mask-image: linear-gradient(#000, transparent); -webkit-mask-image: linear-gradient(#000, transparent); }
.page-head > .container { position: relative; }
.eyebrow { font-family: var(--mono); font-weight: 500; font-size: .75rem; letter-spacing: .1em; display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 16px; height: 1px; background: currentColor; }
.brand__name { letter-spacing: -.02em; }
.nav__link[aria-current="page"] { background: var(--accent-soft); }
.card { border-radius: var(--radius-lg); }
.site-header .btn, .sticky-bar .btn { white-space: nowrap; }



/* ---------- revision 2: one container for chrome and every page ( --container is set in tokens.css ) ---------- */

/* More menu (desktop). Mobile shows the flat list instead. */
.nav__more { position: relative; }
.nav__more-btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav__more-btn::-webkit-details-marker { display: none; }
.nav__more-btn::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav__more[open] > .nav__more-btn { color: var(--text); background: var(--surface-2); }
.nav__more[data-current] > .nav__more-btn { color: var(--accent-text); }
.nav__more-menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 210px; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-2); z-index: 90; display: grid; }
.nav__more-link { color: var(--text); text-decoration: none; padding: 10px 12px; border-radius: 8px; font-size: .9375rem; font-weight: 550; }
.nav__more-link:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.nav__more-link[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); }
.nav__flat { display: none; }
@media (max-width: 1239px) { .nav__more { display: none; } .nav__flat { display: block; } }
.header-phone .icon { flex: none; }

/* sticky call bar: lift it off the page in both themes */
@media (max-width: 760px) {
  .sticky-bar { box-shadow: 0 -10px 24px -12px rgba(0, 0, 0, .45); border-top-color: var(--line-2); background: var(--surface); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  :root[data-theme="light"] .sticky-bar { box-shadow: 0 -10px 24px -12px rgba(20, 40, 60, .35); }
  :root { --sticky-h: 72px; }
}

/* legibility floor for mono microcopy: 12px, higher-contrast ink */
.w-fps .ctl-l, .w-fps .tip .m, .w-fps .eq, .w-fps .syn, .w-fps .axis, .w-fps .chip, .w-fps .prov dt, .w-fps .prov .not span,
.w-fps .status-t, .w-fps .trail li { font-size: .75rem; }
.w-fps .tbl th .syn { font-size: .75rem; }
.w-fps .ctl-l, .w-fps .prov dt, .w-fps .hint, .w-fps .axis, .w-fps .ak { color: var(--text-2); }
.w-fps .map .ak { fill: var(--text-2); }
.eyebrow { font-size: .8125rem; }
.rcard .rm { font-size: .8125rem; }

/* map: dark-theme parity. Land and borders separate from the panel, alert fill is a bright single hue so low counts stay visible. */
:root[data-theme="dark"] .page-home, :root:not([data-theme]) .page-home, :root[data-theme="dark"] .w-fps { --land: #24394f; --land-line: #6c8aa8; }
:root[data-theme="dark"] .w-fps .map .st.on { fill: #ffc36b; }
:root[data-theme="dark"] .w-fps .map.dz .st.on { fill: #62cdf2; }
:root[data-theme="dark"] .w-fps .ramp b { background: linear-gradient(90deg, var(--land), #ffc36b); }
:root[data-theme="dark"] .w-fps .ramp.dz b { background: linear-gradient(90deg, var(--land), #62cdf2); }
:root[data-theme="light"] .w-fps { --land: #dfe7ee; --land-line: #8499ad; }

/* nav has 8 primary items: free room between 1240 and 1479px by showing the phone as an icon only */
@media (max-width: 1479px) { .header-phone span { display: none; } .header-phone { width: 40px; height: 40px; justify-content: center; padding: 0; border: 1px solid var(--line-2); background: var(--surface); } }
@media (min-width: 1240px) and (max-width: 1479px) { .nav__list { gap: 0; } .nav__link { padding-inline: 8px; } }

/* ---- shells/x2/home.css ---- */
/* Ported from s. Scoped under .page-home; legacy tokens aliased to the unified token contract. */
.page-home { --bg-2:var(--bg-alt);--panel:var(--surface);--panel-2:var(--surface-2);--ink:var(--text);--ink-2:var(--text-2);--ink-3:var(--text-3);--signal:var(--accent);--signal-2:var(--accent-hover);--signal-ink:var(--accent-ink);--signal-soft:var(--accent-soft);--alert:var(--c2);--alert-ink:var(--warn-text);--alert-soft:var(--warn-soft);--bad:var(--bad-text);--good:var(--good-text);--warn:var(--warn-text);--btn-line:var(--line-2);--land:var(--surface-3);--land-line:var(--line-2);--lane:var(--accent);--lane-glow:none;--map-hi:var(--text);--sev-extreme:var(--bad-text);--sev-severe:var(--c2);--sev-moderate:var(--warn-text);--sev-minor:var(--info-text);--sev-unknown:var(--text-3);--shadow:var(--shadow-2);--r-1:var(--radius-sm);--r-2:var(--radius);--r-3:var(--radius-lg); }
.page-home .hero{position:relative;padding:56px 0 0;background:var(--hero-glow),linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/100% 48px,linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/48px 100%;overflow:hidden}
.page-home .hero::after{content:"";position:absolute;inset:auto 0 0 0;height:160px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.page-home .hero-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end;margin-bottom:40px}
.page-home .hero h1{margin-bottom:0;max-width:17ch}
.page-home .hero .lede{font-size:1.125rem;color:var(--ink-2);margin:0 0 24px;max-width:52ch}
.page-home .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.page-home .assure{font-size:.8125rem;color:var(--ink-3);margin:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.page-home .assure span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--signal);margin-right:8px;vertical-align:middle}
.page-home .hero .console{position:relative;z-index:1;margin-bottom:-1px}
@media (max-width:1100px){
.page-home .hero-top{grid-template-columns:1fr;gap:24px;align-items:start}
}
@media (max-width:720px){
.page-home .hero{padding-top:32px}
.page-home .cta-row .btn{flex:1 1 100%}
}
.page-home .hero{padding:32px 0 48px}
.page-home .hero::after{display:none}
.page-home .hero-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:32px;align-items:start}
.page-home .hero-copy .eyebrow{margin-bottom:12px}
.page-home .hero h1{font-size:clamp(1.875rem,3.3vw,2.875rem);line-height:1.06;max-width:none;margin:0 0 16px}
.page-home .hero .lede{font-size:1rem;line-height:1.55;margin:0 0 20px;max-width:44ch}
.page-home .hero .cta-row{margin-bottom:12px}
.page-home .assure{font-size:.8125rem}
.page-home .hero .console{border-radius:var(--r-3);margin:0}
.page-home .hero-grid>*{min-width:0}
.page-home .rcard{margin-top:24px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.page-home .rcard .rh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel-2);font:600 .75rem var(--font);color:var(--ink)}
.page-home .rcard .rb{padding:12px}
.page-home .rcard .rt{font-weight:650;font-size:.9375rem;margin:0 0 4px;color:var(--ink)}
.page-home .rcard .rm{font:400 .75rem var(--mono);color:var(--ink-2);margin:0 0 8px}
.page-home .rcard .amt{font:650 1.5rem/1 var(--font);font-feature-settings:"tnum";color:var(--ink);border-bottom:1px dotted var(--ink-3);display:inline-block;padding-bottom:2px}
.page-home .rcard .rsyn{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-top:8px}
.page-home .hero .cgrid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.page-home .hero .pane{padding:12px 16px 16px}
.page-home .hero .ph{margin-bottom:8px}
.page-home .mini-card{display:none}
.page-home .mini-card .tbl td, .page-home .mini-card .tbl th{padding-inline:6px}
@media (max-width:1100px){
.page-home .hero-grid{grid-template-columns:1fr;gap:24px}
.page-home .hero-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 32px;align-items:start}
.page-home .hero-copy>*{grid-column:1}
.page-home .hero-copy .rcard{grid-column:2;grid-row:1/6;margin-top:0}
.page-home .hero .cgrid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}
@media (max-width:820px){
.page-home .hero-copy{display:block}
.page-home .hero-copy .rcard{margin-top:24px}
.page-home .hero .cgrid{grid-template-columns:1fr}
}
@media (max-width:720px){
.page-home .hero{padding:16px 0 32px}
.page-home .hero-copy .eyebrow{display:none}
.page-home .hero h1{font-size:1.875rem;margin-bottom:12px}
.page-home .hero .lede{font-size:.9375rem;margin-bottom:16px}
.page-home .hero .cta-row{gap:8px;margin-bottom:12px}
.page-home .hero .cta-row .btn{min-height:48px;flex:1 1 100%}
.page-home .hero .cta-row .btn.ghost{min-height:44px}
.page-home .assure span:not(:first-child):not(:nth-child(2)){display:none}
.page-home .assure{gap:4px 12px}
.page-home .mini-card{display:block;margin:16px 0 0}
.page-home .hero .rcard{display:none}
.page-home .hero .console{margin-top:24px}
}
.page-home .hero .tbl td, .page-home .hero .tbl th{padding-inline:6px}
.page-home .hero .tbl th:first-child, .page-home .hero .tbl td:first-child{padding-left:4px}
.page-home .hero .rcard .trail{gap:8px}

/* ---------- revision 2 ---------- */
.page-home .hero-grid { align-items: stretch; }
.page-home .hero-copy { display: flex; flex-direction: column; }
.page-home .hero-copy .hero-card { margin-top: auto; padding-top: 24px; }
.page-home .hero-copy .hero-card .rcard { margin-top: 0; }
.page-home .hero-call { margin: 4px 0 0; font-size: .9375rem; color: var(--ink-2); }
.page-home .assure span { white-space: nowrap; }
.page-home .hero h1 { font-size: clamp(1.875rem, 3.4vw, 3rem); }
.page-home .hero .lede { font-size: 1.0625rem; }

/* console header: labelled groups */
.page-home .hero .cbar { align-items: flex-end; }
.page-home .hero .cbar .ttl { align-self: center; }
.page-home .ctl { display: flex; flex-direction: column; gap: 4px; }
.page-home .ctl-l { font: 500 .75rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.page-home .cset > summary { display: none; list-style: none; }
.page-home .cset > summary::-webkit-details-marker { display: none; }

/* console panes fill the same height */
.page-home .hero .cgrid { align-items: stretch; }
.page-home .hero .pane { display: flex; flex-direction: column; }
.page-home .hero .pane .mapbox { flex: none; }
.page-home .pane-note { font-size: .8125rem; line-height: 1.5; color: var(--ink-2); margin: 8px 0 0; }
.page-home .hero .pane.rel [data-lanes] { flex: 1; display: flex; flex-direction: column; }
.page-home .hero .pane.rel .tscroll { flex: 1; }
.page-home .hero .pane.rel .tbl { height: 100%; }
.page-home .hero .tbl th .syn { display: none; }
.page-home .hero .ph .syn { font: 600 .75rem/1.1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--warn); border: 1px solid currentColor; border-radius: 4px; padding: 3px 6px; white-space: nowrap; }
.page-home .hero .ph h2 { margin-right: auto; }
.page-home .hint-keys { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.page-home .lane-more { width: 100%; margin-top: 8px; min-height: 44px; }

/* mobile tabs for the data panels, hidden on desktop */
.page-home .mtabs { display: none; }
.page-home .mfold > summary { display: none; }

@media (max-width: 1100px) {
  .page-home .hero-copy .hero-card { margin-top: 0; padding-top: 0; }
  .page-home .hero-copy .hero-card { grid-column: 2; grid-row: 1/6; }
}
@media (max-width: 820px) {
  .page-home .hero-copy .hero-card { margin-top: 24px; padding-top: 0; }
}

@media (max-width: 720px) {
  /* S hook first: headline, CTAs, then the flagged KPI and bar, then the console */
  .page-home .hero { padding: 12px 0 28px; }
  .page-home .hero-grid { display: flex; flex-direction: column; gap: 16px; }
  .page-home .hero-copy { display: block; }
  .page-home .hero h1 { font-size: 1.75rem; margin-bottom: 10px; }
  .page-home .hero .lede { font-size: .9375rem; margin-bottom: 14px; }
  .page-home .hero .cta-row { flex-wrap: nowrap; margin-bottom: 0; }
  .page-home .hero .cta-row .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: .9375rem; min-height: 48px; }
  .page-home .hero .cta-row .btn span { display: none; }
  .page-home .assure, .page-home .hero-call, .page-home .hero-card { display: none; }
  .page-home .hero .console { margin-top: 0; display: flex; flex-direction: column; }
  .page-home .hero .console .kpis { order: -1; border-bottom: 1px solid var(--line); border-top: 0; }
  .page-home .hero .cbar { align-items: stretch; gap: 8px; }
  .page-home .hero .cbar .ttl { display: none; }
  .page-home .hero .cbar .ctl { flex: 1 1 100%; }
  .page-home .hero .cbar .seg { display: flex; }
  .page-home .hero .cbar .seg button { flex: 1; }
  .page-home .hero .cbar .ctl-l { display: none; }
  .page-home .cset { flex: 1 1 100%; }
  .page-home .cset > summary { display: block; cursor: pointer; font: 500 .8125rem var(--font); color: var(--ink-2); padding: 8px 0; min-height: 36px; }
  .page-home .cset > summary::after { content: " +"; }
  .page-home .cset[open] > summary::after { content: " \2212"; }
  .page-home .cset .ctl .ctl-l { display: none; }

  /* ledger folds */
  .page-home .mfold > summary { display: flex; flex-direction: column; gap: 2px; cursor: pointer; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--panel); font-weight: 600; color: var(--ink); list-style: none; min-height: 48px; justify-content: center; }
  .page-home .mfold > summary::-webkit-details-marker { display: none; }
  .page-home .mfold > summary .syn-t { font: 500 .75rem var(--mono); color: var(--ink-2); }
  .page-home .mfold[open] > summary { margin-bottom: 12px; }

  /* diesel / weather tabs */
  .page-home .mtabs { display: flex; gap: 0; margin: 0 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 2px; background: var(--bg-2); }
  .page-home .mtabs button { flex: 1; min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 500 .875rem var(--font); cursor: pointer; }
  .page-home .mtabs button[aria-pressed="true"] { background: var(--signal-soft); color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
  .page-home [data-show="0"] [data-pidx="1"], .page-home [data-show="1"] [data-pidx="0"] { display: none; }
}

@media (max-width: 720px) {
  .page-home .pane-note { display: none; }
  .page-home .section { padding-block: 32px; }
  .page-home .section__head { margin-bottom: 16px; }
  .page-home .section__head p:not(.eyebrow) { font-size: .9375rem; }
  .page-home .cards-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .page-home .cards-compact .card { padding: 12px; }
  .page-home .cards-compact h3, .page-home .cards-compact .card__title { font-size: .9375rem; margin-bottom: 4px; }
  .page-home #fleets .cards-compact p { display: none; }
  .page-home .cards-compact p { font-size: .8125rem; line-height: 1.4; margin: 0; }
  .page-home .kpi-row { gap: 10px; }
  .page-home .kpi { padding: 12px 14px; }
  .page-home .steps li { padding-block: 10px; }
}
.page-home .mfold2 > summary { list-style: none; cursor: default; }
.page-home .mfold2 > summary::-webkit-details-marker { display: none; }
.page-home .mfold2 > summary h3 { margin: 0 0 12px; }
@media (max-width: 720px) {
  .page-home .mfold2 > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .page-home .mfold2 > summary h3 { margin: 0; font-size: 1rem; }
  .page-home .mfold2 > summary::after { content: "+"; font-size: 1.25rem; color: var(--ink-2); }
  .page-home .mfold2[open] > summary::after { content: "\2212"; }
  .page-home .mfold2[open] > summary { margin-bottom: 12px; }
  .page-home .split { gap: 20px; }
  .page-home .checklist li { padding-block: 2px; }
  .page-home .kpi-row .kpi__note { font-size: .875rem; margin: 4px 0 0; }
  .page-home .steps--row li { padding: 12px 14px; }
  .site-footer { padding-block: 32px 24px; }
  .site-footer__cols { gap: 16px 12px; }
  .footer__col ul { gap: 2px; }
  .footer__col a { display: inline-block; padding-block: 6px; font-size: .875rem; }
}
.page-home .plain { border: 0; background: none; padding: 0; }
@media (max-width: 720px) {
  .page-home .mfold > .cards-compact { margin-bottom: 12px !important; }
  .page-home .plain > summary h3 { font-size: 1rem; }
  .site-footer__cols .footer__col:nth-child(n+3):nth-child(-n+4) { display: none; }
}
@media (max-width: 720px) { .page-home [data-trend-sum] { display: none !important; } }

/* ---------- x2 polish: hero route backdrop, consistent card rhythm ---------- */
.page-home .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1360 520' fill='none' preserveAspectRatio='xMaxYMin slice'%3E%3Cg stroke='%2362cdf2' stroke-opacity='.16' stroke-width='1.5'%3E%3Cpath d='M700 460 C 820 300 980 340 1100 200 S 1300 80 1360 40'/%3E%3Cpath d='M620 520 C 760 380 900 420 1020 300 S 1240 200 1360 150' stroke-dasharray='5 7'/%3E%3C/g%3E%3Cg fill='%2362cdf2' fill-opacity='.35'%3E%3Ccircle cx='1100' cy='200' r='4'/%3E%3Ccircle cx='1020' cy='300' r='4'/%3E%3Ccircle cx='700' cy='460' r='4'/%3E%3C/g%3E%3C/svg%3E") right top / cover no-repeat; }
:root[data-theme="light"] .page-home .hero::before { opacity: .55; }
.page-home .hero > .container { position: relative; z-index: 1; }
@media (max-width: 720px) { .page-home .hero::before { opacity: .45; } }
.page-home .card .card__icon { margin-bottom: var(--s3); }
.page-home .cards-compact .card { display: flex; flex-direction: column; }
.page-home #pre-invoice .fig { background: var(--surface); }
@media (prefers-reduced-motion: no-preference) { .card--link { transition: transform .15s, border-color .15s, box-shadow .15s; } .card--link:hover { transform: translateY(-2px); } }