/* self-hosted (2026-08-22): the latin subset of the Google Fonts CSS the site loaded, files fetched by publish/build_site.py's helper; see design/fonts/README.md */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/assets/fonts/Archivo-400-800-75-125-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Itasca Research — design tokens · v2 (2026-08-15)
   v1 (2026-07-31): selected UI direction (e-combined, 2026-07-24)
   + brand palette (itascagroup/brand). Component picks:
   1B panel matrix · 2B split header · 3A outline chips ·
   4C washed KPI · 5A footnote provenance · 6A timeline changelog.
   v2 (2026-08-15): brand-lab pass G "Intelligence Desk, Daylight —
   house colors" promoted. Same palette (teal · navy ramp · ink ·
   status green/amber/red — NO new colors); ground lifted to
   paper-white, --muted darkened for 4.5:1 on washed tiles, role
   tokens added (--accent identity teal · --btn/--btn-text/--btn-hover
   navy actions · --emblem · --ref · --focus · --wire-*), plus an
   opt-in dark scheme under [data-theme="dark"] (explicit toggle
   only — never reads the OS). --cream stays only as the token for
   the alternate navy state-band header; no cream surface ships.
   Pages load Archivo (wdth 75..125, wght 400..800), Inter
   (400/500/600) and IBM Plex Mono (400/500/600) themselves.
   ============================================================ */
:root{
  color-scheme:light;

  /* surfaces */
  --bg:#FCFCFB;
  --card:#FFFFFF;
  --wash:#F0F2F3;
  --line:#DFE3E6;
  --line-strong:#8895A0;
  --row-hover:#F7F9FA;

  /* ink */
  --ink:#0F1B26;
  --ink-2:#3B4650;
  --muted:#5F6B75;

  /* brand — master */
  --teal:#406878;
  --cream:#F2EAD8;
  --emblem:#406878;          /* crisp kit emblem at UI scale */

  /* brand — Electrification arm ink */
  --accent:#406878;          /* identity accent — house teal: RESEARCH, eyebrow, links */
  --btn:#12405E;             /* solid action buttons — house navy */
  --btn-text:#FFFFFF;
  --btn-hover:#0E3049;
  --ghost-hover:#EDF1F3;
  --hot-shadow:rgba(18,64,94,.10);

  /* navy ordinal family — tier grades A → D, never semantic status */
  --navy:#12405E;
  --navy-2:#4A7291;
  --navy-3:#8FA6B5;
  --navy-4:#C2CDD4;
  --ref:#12405E;             /* structural refs: footnote nums, crumbs */

  /* semantic status — always dot/icon + label, never color alone */
  --green:#1E7A46;  --green-soft:#E7F2EB;   /* open · verified */
  --amber:#A66A00;  --amber-soft:#F8EFDD;   /* waitlist · stale */
  --red:#B33A2B;    --red-soft:#F7EAE7;     /* exhausted · removed */

  /* chart pair (CVD-validated on light surfaces, per build brief) */
  --chart-blue:#2E6FB3;
  --chart-green:#1E7A46;

  /* wire */
  --wire-bg:#FFFFFF;
  --wire-accent:#406878;

  /* focus */
  --focus:#12405E;

  /* type */
  --disp:"Archivo",sans-serif;              /* display: font-stretch 108–120% */
  --sans:"Inter",system-ui,sans-serif;      /* body */
  --mono:"IBM Plex Mono",ui-monospace,monospace; /* every figure + labels */

  /* shape */
  --r-card:8px;
  --r-chip:4px;
}

/* ---- optional brand-ink dark scheme (explicit toggle only; light is
       the designed default — no prefers-color-scheme auto-switch) ---- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0D1821;
  --card:#13222E;
  --wash:#1B2D3B;
  --line:#25384A;
  --line-strong:#557089;
  --row-hover:#182835;
  --ink:#F2EAD8;
  --ink-2:#C3CDD3;
  --muted:#8FA0AB;
  --emblem:#85AEBE;          /* teal lifted for dark surfaces */
  --accent:#85AEBE;          /* teal lifted for dark-surface text/borders */
  --btn:#8FB4CE;             /* navy lifted for dark; ink text */
  --btn-text:#0F1B26;
  --btn-hover:#A9C6DA;
  --ghost-hover:#1B2D3B;
  --hot-shadow:rgba(0,0,0,.45);
  --navy-2:#8FB4CE;
  --navy-3:#5E7A90;
  --navy-4:#33475A;
  --ref:#85AEBE;
  --green:#62BE8C;  --green-soft:#14382B;
  --amber:#D9A855;  --amber-soft:#3A2F14;
  --red:#E0785C;    --red-soft:#3C201A;
  --chart-blue:#5E9AD0;
  --wire-bg:#0A141C;
  --wire-accent:#85AEBE;
  --focus:#85AEBE;
}


/* ============================================================
   Itasca Research — tracker components · v2 (2026-08-15)
   Requires tokens.css. Seven components (six selected 2026-07-31,
   the wire added with pass G 2026-08-15):
     0  .wire         — datestrip above the brand (figures from data)
     1  .matrix       — panel matrix table            (option 1B)
     2  .state-header — split header + meta card      (option 2B)
        .state-band   — ALTERNATE navy band header    (option 2C)
     3  .chip / .verify — tier & status chips         (option 3A)
     4  .kpi          — washed KPI tiles              (option 4C)
     5  .fn           — provenance footnote rows      (option 5A)
     6  .changelog    — timeline changelog entries    (option 6A)
   v2: every figure in IBM Plex Mono (KPI values, meta-card values,
   state-dek figures); colors via role tokens so the dark scheme
   themes them; matrix rows 44px.
   ============================================================ */

/* ---------- shared primitives ---------- */
.label-mono{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);font-weight:500}
.fig{font-family:var(--mono);font-weight:600}          /* inline figure */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:1px}
.dot--green{background:var(--green)}
.dot--amber{background:var(--amber)}
.dot--red{background:var(--red)}
.dot--slate{background:var(--navy-3)}
.crumb{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  color:var(--muted);text-transform:uppercase}
.crumb b{color:var(--ink);font-weight:600}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px}

/* ============================================================
   0 · WIRE — landing: Grade A available-per-truck figures (TK 2026-08-15);
       state pages: the page's own verified facts. Printed
   as a datestrip above the brand. Nothing invented; hover or
   focus pauses; static (and pannable) under reduced motion.
   ============================================================ */
.wire{background:var(--wire-bg);border-bottom:1px solid var(--line);
  display:flex;align-items:stretch;overflow:hidden}
.wire-label{flex:none;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--wire-accent);
  padding:8px 18px;border-right:1px solid var(--line);white-space:nowrap}
.wire-track{flex:1;overflow:hidden;display:flex;align-items:center}
.wire-belt{display:flex;width:max-content;
  animation:wire-roll 60s linear infinite}
.wire:hover .wire-belt,.wire:focus-within .wire-belt{animation-play-state:paused}
.wire-seq{display:inline-flex;gap:36px;padding-left:36px;white-space:nowrap}
.wire-seq .w{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.wire-seq .w b{color:var(--ink);font-weight:500}
@keyframes wire-roll{to{transform:translateX(-50%)}}
@media (max-width:560px){.wire-label{display:none}}
@media (prefers-reduced-motion:reduce){
  .wire-belt{animation:none}
  .wire-seq[aria-hidden="true"]{display:none}
  .wire-track{overflow-x:auto}
}

/* ============================================================
   1 · MATRIX TABLE — white panel, washed mono head, dense rows
   ============================================================ */
.matrix{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;overflow-x:auto}
.matrix table{border-collapse:collapse;width:100%}
.matrix th{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;
  padding:8px 12px;background:var(--wash);border-bottom:1px solid var(--line)}
.matrix td{padding:0 12px;font-size:.86rem;height:44px;border-top:1px solid var(--line)}
.matrix tbody tr:first-child td{border-top:none}
.matrix tbody tr:hover td{background:var(--row-hover)}
.matrix .state{font-weight:600}
.matrix .num,.matrix th.num{text-align:right}
.matrix td.num{font-family:var(--mono);font-size:.78rem}
.matrix .chev{color:var(--navy-3);font-size:.9rem;text-align:right}
.status-dots{display:flex;gap:10px;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.status-dots span{display:flex;align-items:center;gap:5px}

/* ============================================================
   2 · STATE-PAGE HEADER — name + dek left, meta card right
   ============================================================ */
.state-header{display:flex;gap:28px;align-items:flex-start}
.state-header-main{flex:1}
.state-name{font-family:var(--disp);font-stretch:112%;font-weight:700;
  font-size:2.5rem;letter-spacing:-.02em;line-height:1.05;margin:8px 0}
.state-dek{color:var(--muted);max-width:48ch}
.state-dek b{color:var(--ink);font-weight:600;font-family:var(--mono);font-size:.92em}
.meta-card{width:280px;flex:none;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);padding:4px 16px}
.meta-card .row{display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-top:1px solid var(--line);font-size:.82rem}
.meta-card .row:first-child{border-top:none}
.meta-card .key{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  color:var(--muted);text-transform:uppercase}
.meta-card .val{font-family:var(--mono);font-size:.76rem;font-weight:600}
.meta-card .val--ok{color:var(--green);display:flex;align-items:center;gap:6px}
.meta-card .val--link{font-family:var(--mono);font-size:.7rem;color:var(--ref)}
@media (max-width:760px){
  .state-header{flex-direction:column}
  .meta-card{width:100%}
}

/* --- ALTERNATE (2C): navy band, reserved for special pages --- */
.state-band{background:var(--navy);border-radius:var(--r-card) var(--r-card) 0 0;
  padding:30px 28px 26px;color:#fff;position:relative;overflow:hidden}
.state-band .crumb{color:#9FB6C6}
.state-band .crumb b{color:#fff}
.state-band .state-name{color:var(--cream);margin-bottom:0}
.state-band-strip{background:var(--card);border:1px solid var(--line);border-top:none;
  border-radius:0 0 var(--r-card) var(--r-card);display:flex;gap:26px;padding:12px 28px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted)}
.state-band-strip b{color:var(--ink);font-weight:600}
.state-band-strip .ok{color:var(--green);font-weight:600}

/* ============================================================
   3 · CHIPS — outline mono. Tier = navy family (grade);
       status/verification = semantic + dot/icon + label.
   ============================================================ */
.chip{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;
  border-radius:var(--r-chip);padding:4px 10px;border:1px solid var(--line);
  background:var(--card);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* tier grades */
.chip--tier-a{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-theme="dark"] .chip--tier-a{border-color:var(--line-strong)}
.chip--tier-ab{border-color:var(--navy);color:var(--ref)}
.chip--tier-b{border-color:var(--navy-3);color:var(--navy-2)}
.chip--tier-c{border-style:dashed;color:var(--muted)}
.chip--tier-d{border-style:dotted;color:var(--navy-3)}
/* program status */
.chip--open{border-color:#BFD9C9;color:var(--green)}
.chip--wait{border-color:#E3CD9E;color:var(--amber)}
.chip--paused{border-color:var(--line);color:var(--muted)}
.chip--exhausted{border-color:#E4C0B9;color:var(--red)}
/* signals (2026-08-16, TK): list + state-page status chips — OPEN reuses
   chip--open; UPCOMING in the identity accent; COMPETITIVE in navy-2.
   Label text distinguishes them, never color alone (3A rule) */
.chip--upcoming{border-color:var(--accent);color:var(--accent)}
.chip--competitive{border-color:var(--navy-3);color:var(--navy-2)}
:root[data-theme="dark"] .chip--open{border-color:#2E5B45}
:root[data-theme="dark"] .chip--wait{border-color:#5C4A1E}
:root[data-theme="dark"] .chip--exhausted{border-color:#5C2E24}
/* verification marks — bare mono, no box: "✓ VERIFIED 07/28" */
.verify{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.06em}
.verify--ok{color:var(--green)}
.verify--rep{color:var(--ink)}
.verify--stale{color:var(--amber)}

/* ============================================================
   4 · KPI TILES — washed fill, mono figures in ink
   ============================================================ */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--wash);border-radius:var(--r-card);padding:14px 16px}
.kpi .label{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  color:var(--muted);text-transform:uppercase}
.kpi .value{font-family:var(--mono);font-weight:600;
  letter-spacing:-.01em;font-size:1.5rem;margin:6px 0 2px;color:var(--ink)}
.kpi .sub{font-size:.76rem;color:var(--muted)}
.delta{font-family:var(--mono);font-size:.7rem;font-weight:600}
.delta--up{color:var(--green)}
.delta--warn{color:var(--amber)}
@media (max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   5 · PROVENANCE — superscript refs + footnote rows at card foot
   ============================================================ */
.fn-ref{font-family:var(--mono);font-size:.62rem;color:var(--ref);font-weight:600}
.fn{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;gap:10px;align-items:baseline;
  font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.fn + .fn{margin-top:10px}
.fn .n{color:var(--ref);font-weight:600}
.fn a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--navy-4)}
.fn-chip{font-size:.62rem;font-weight:600;letter-spacing:.08em;
  border-radius:var(--r-chip);padding:2px 7px;white-space:nowrap}
.fn-chip--ok{color:var(--green);background:var(--green-soft)}
.fn-chip--rep{color:var(--muted);background:var(--wash)}
.fn-chip--stale{color:var(--amber);background:var(--amber-soft)}

/* ============================================================
   6 · CHANGELOG — date rail + spine timeline
   ============================================================ */
.changelog{display:grid;grid-template-columns:92px 1fr}
.changelog .date{font-family:var(--mono);font-size:.7rem;color:var(--muted);
  padding:14px 20px 14px 0;text-align:right}
.changelog .entry{border-left:2px solid var(--line);padding:14px 0 14px 20px;position:relative}
.changelog .entry::before{content:"";position:absolute;left:-5px;top:20px;
  width:8px;height:8px;border-radius:50%;background:var(--navy);border:2px solid var(--bg)}
.changelog .head{display:flex;gap:8px;align-items:center;margin-bottom:3px}
.changelog .state{font-weight:600;font-size:.86rem}
.changelog .entry p{font-size:.86rem;color:var(--ink-2);max-width:60ch}
.changelog .entry p b{font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--ink)}
.changelog .src{font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-top:3px}
/* change-type chips (shared with monthly summaries/email) */
.chg{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.12em;
  border-radius:var(--r-chip);padding:2px 7px}
.chg--new{background:var(--green-soft);color:var(--green)}
.chg--changed{background:#E1E9EF;color:var(--navy)}
.chg--closed{background:var(--red-soft);color:var(--red)}
:root[data-theme="dark"] .chg--changed{background:#22384A;color:#9CC0D8}




/* ============ site chrome (generated by publish/build_site.py) ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:15px}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh}
/* the footer sits at the bottom of the viewport on short pages (TK 2026-08-15):
   body is a flex column, the footer takes the slack; the last section keeps
   the 62px gap it always had when content is long */
body>section:last-of-type{padding-bottom:62px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}

/* nav — lockup: emblem (teal, crisp) · ITASCA (ink) · RESEARCH (teal) */
.nav{border-bottom:1px solid var(--line);background:var(--card)}
.nav .wrap{display:flex;align-items:center;gap:28px;padding-top:14px;padding-bottom:14px}
/* menu: on wide screens the items sit in the bar (display:contents keeps the
   flex row exactly as before); on phones the bar is brand + a hamburger and
   the items drop into a panel under it (TK 2026-08-16 mobile pass) */
.nav-menu{display:contents}
.nav-toggle{display:none}
.wordmark{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:1.02rem;letter-spacing:.02em;display:flex;align-items:center;gap:10px;color:var(--ink)}
.wordmark span{color:var(--accent);font-weight:600;margin-left:.28em}
.wordmark .emblem{height:26px;width:27px;display:block;color:var(--emblem)}
.nav a.item{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav a.item:hover,.nav a.item.on{color:var(--ink)}
.nav .spacer{flex:1}
.theme-btn{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);background:transparent;
  border:1px solid var(--line-strong);border-radius:var(--r-chip);
  padding:5px 9px;cursor:pointer;white-space:nowrap}
.theme-btn:hover{color:var(--ink);border-color:var(--muted)}

/* hero — short teal rule, teal eyebrow, ink headline */
.hero{position:relative;overflow:hidden;padding:46px 0 34px}
.hero .wm{position:absolute;right:-70px;top:-50px;height:430px;width:452px;
  color:var(--emblem);opacity:.07;pointer-events:none}
/* A′ (TK 2026-08-15): fan nudged from .05 — the v2 ground is lighter than
   old staging; lifted a step further on the dark desk where it reads faintest */
:root[data-theme="dark"] .hero .wm{opacity:.09}
@media (max-width:900px){.hero .wm{display:none}}
.hero .eyebrow{font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;color:var(--accent);text-transform:uppercase}
.hero .eyebrow::before{content:"";display:block;width:72px;height:2px;background:var(--accent);margin-bottom:10px}
.hero[style*="text-align:center"] .eyebrow::before{margin-left:auto;margin-right:auto}
.hero h1{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:2.5rem;letter-spacing:-.02em;line-height:1.1;max-width:24ch;margin:14px 0 16px}
/* A (TK 2026-08-15, design/hero-align-options.html): the landing headline keeps
   the left axis but its measure opens to the wrap — one sentence per line, each
   line balancing on its own where it has to break (no orphan "Truck.") */
.hero h1.lines{max-width:none}
.hero h1.lines .ln{display:block;text-wrap:balance}
.hero .dek{color:var(--ink-2);max-width:62ch;font-size:1.02rem}
.hero .hero-cta{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.hero .dek .mono{font-family:var(--mono);font-size:.9em}
.sp-heronote{margin:-6px 0 18px;max-width:78ch}
.statstrip{display:flex;gap:26px;flex-wrap:wrap;margin-top:24px;padding-top:14px;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.statstrip b{color:var(--ink);font-weight:600}

section.band{padding:28px 0 10px}
.sechead{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.sechead h2{font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:1.25rem}
.sechead .note{font-size:.8rem;color:var(--muted)}
.morelink{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
.prose{max-width:66ch;font-size:.95rem;color:var(--ink-2)}
.prose+.prose{margin-top:12px}
.prose b{color:var(--ink);font-weight:600}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 24px}

.matrix a.staterow{font-weight:600;color:var(--ink)}
.matrix a.staterow:hover{color:var(--accent)}
.matrix td.ver{font-family:var(--mono);font-size:.72rem;color:var(--ink-2)}
.matrix td.ver:not(:empty)::before{content:"✓ ";color:var(--green);font-weight:600}
.tierstrip{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:14px;font-family:var(--mono);font-size:.72rem;color:var(--muted);align-items:center}
.legend .lg-row{display:flex;gap:14px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.legend .lg-row:first-child{border-top:none}
.legend .lg-row .chip{flex:0 0 auto}

.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tier-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;display:flex;flex-direction:column}
.tier-card .t-name{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.tier-card .t-price{font-family:var(--mono);font-weight:600;font-size:1.3rem;color:var(--ink);margin:8px 0 2px}
.tier-card .t-per{font-family:var(--mono);font-size:.68rem;color:var(--muted);margin-bottom:10px}
.tier-card ul{list-style:none;font-size:.82rem;color:var(--ink-2);margin-bottom:14px}
.tier-card li{padding:5px 0;border-top:1px solid var(--line)}
.tier-card li:first-child{border-top:none}
.tier-card.hot{border-color:var(--btn);box-shadow:0 1px 10px var(--hot-shadow)}
.tier-card .btn{margin-top:auto;text-align:center}
.tier-card .t-note{font-family:var(--mono);font-size:.6rem;color:var(--muted);margin-top:auto;padding:8px 0;text-align:center;letter-spacing:.06em}
.tier-card:has(.t-note) .btn{margin-top:0}
.tier-card .buy{margin-top:auto;display:flex;flex-direction:column;gap:4px}
.tier-card .t-note~.buy{margin-top:0}
.buy .btn{width:100%;cursor:pointer}
.buy .buy-alt{background:none;border:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);cursor:pointer;padding:3px 0}
.buy .buy-alt:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tiers{grid-template-columns:1fr}}
.tiers--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.tiers--3{grid-template-columns:1fr}}
.tiers--2{grid-template-columns:repeat(2,1fr);max-width:720px}
@media (max-width:600px){.tiers--2{grid-template-columns:1fr}}
.cardhead{text-align:center;font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:1.15rem;color:var(--ink)}
.cardsub{text-align:center;font-size:.8rem;color:var(--muted);margin:2px 0 8px}
ul.plainlist{list-style:none;margin-top:8px}
ul.plainlist li{padding:6px 0;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink-2)}
ul.plainlist li:first-child{border-top:none}
ul.plainlist li b{color:var(--ink);font-weight:600}
/* the compact Pro strip (25D) — state list foot */
.strip-pitch{display:flex;gap:26px;align-items:center;flex-wrap:wrap;background:var(--wash);border-radius:var(--r-card);padding:24px 28px;margin-top:22px}
.strip-pitch .txt{flex:1;min-width:300px}
.strip-pitch .txt b{font-weight:600;font-size:1rem}
.strip-pitch .txt p{font-size:.88rem;color:var(--ink-2);margin-top:6px}
.strip-pitch .cta{margin-left:auto}
/* landing: the named Pro features (TK 2026-08-15) */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px}
.feat b{display:block;font-weight:600;color:var(--ink);margin-bottom:4px}
.feat p{font-size:.84rem;color:var(--ink-2)}
@media (max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.feat-grid{grid-template-columns:1fr}}

table.compare{width:100%;border-collapse:collapse;margin:8px 0 6px;font-size:.85rem}
table.compare th{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--line);text-align:center}
table.compare th:first-child{text-align:left;padding-left:0}
table.compare td{padding:8px 12px;border-bottom:1px solid var(--line);color:var(--ink-2);text-align:center}
table.compare td:first-child{text-align:left;padding-left:0;color:var(--ink)}
table.compare td.y{color:var(--green);font-weight:600}
table.compare td.n{color:var(--muted)}

.wall{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 30px;margin-top:26px}
.wall h2{font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:1.2rem;margin-bottom:6px}
.wall .lede{font-size:.95rem;color:var(--ink-2);max-width:70ch}
.wall .lede b{color:var(--ink);font-weight:600}

/* ============================================================
   STATE PAGE, signed out (TK picks 2026-08-15: 21A · 26B · 27A · 28A)
   header: verified dateline top-right · headline figure (or program
   count in light states) · strip: grade + meaning, second figure, open
   badge · pitch block: placeholder table, this-page/full-page columns,
   Start Pro row.
   ============================================================ */
.sp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-top:26px}
.vmark{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:600;color:var(--green);font-size:.82rem;letter-spacing:.02em}
.vmark .ck{width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.66rem;flex:none}
h1.state-name{margin:8px 0 14px}
.sp-hero{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin:6px 0 20px}
.sp-fig{font-family:var(--mono);font-weight:600;font-size:3.1rem;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.sp-figlabel{font-size:.9rem;color:var(--muted);max-width:44ch;line-height:1.45}
.sp-figlabel b{color:var(--ink);font-weight:600;display:block;font-size:.98rem;margin-bottom:2px}
.sp-strip{display:flex;gap:28px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.sp-strip>span{display:inline-flex;align-items:baseline;gap:9px}
.sp-strip b{font-family:var(--mono);font-weight:600;color:var(--ink)}
.sp-strip b.n{font-size:1.15rem;line-height:1}
.sp-strip .sm{color:var(--muted)}
.sp-strip .live,.sp-strip .chip{align-self:center}
/* signals (2026-08-16): matrix Signals column, pair-of-figures hero (30A), signal lines */
.matrix td.sig{white-space:nowrap}
.matrix td.sig .chip{font-size:.58rem;padding:2px 7px;letter-spacing:.12em;margin-right:4px}
.matrix td.num.lump{color:var(--muted)}
/* TK 2026-08-16 (afternoon): figures on a two-column grid so the pair aligns;
   signal chips sit under the verified date; strip centered with the per-truck
   footnote beneath; signals block behind a hairline with one label column */
.sp-topright{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.sp-topright .sp-chips{display:flex;gap:6px}
.sp-hero--pair{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;align-items:start;margin:10px 0 18px}
.sp-kpi{display:flex;gap:18px;align-items:center}
.sp-kpi .sp-fig{min-width:8ch}
.sp-kpi .sp-figlabel{max-width:32ch}
.sp-fig.lump{font-size:2.05rem;line-height:1.5}
/* TK 2026-08-16 (34A+34C mix): under the figure hairline, one band — signals
   left, the kit meta card right (Grade · Programs tracked · Basis); the strip
   and the per-truck footnote fold into the card, verified + chips stay top-right */
.sp-band{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px 40px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);align-items:start}
@media (max-width:820px){.sp-band{grid-template-columns:1fr}}
/* signal rows: the chip is the row label (same chips as top-right), sentence beside it */
.sp-signals{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:16px;row-gap:12px;align-items:start}
.sp-signals-head{grid-column:1/-1;font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:2px}
.sp-signals .sig{display:contents}
.sp-signals .sig .chip{margin-top:1px;justify-self:start}
.sp-signals .sig>span:last-child{font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.sp-signals .sig b{font-family:var(--mono);color:var(--ink);font-weight:600}
.sp-signals .sig a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
/* the meta card as a ledger: key eyebrow, then value + note on one line */
.sp-meta{width:auto;padding:2px 16px}
.sp-meta .row.stack{display:block;padding:11px 0}
.sp-meta .row.stack .key{display:block;margin-bottom:5px}
.sp-meta .vline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sp-meta .vline .chip{align-self:center}
.sp-meta .val.txt{font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--ink)}
.sp-meta .sub{font-size:.76rem;color:var(--muted);line-height:1.4}
@media (max-width:760px){.sp-hero--pair{grid-template-columns:1fr}.sp-topright{align-items:flex-start}}
/* the key under the list (TK 2026-08-16 pm): ruled rows, terms set like the column headers */
.key{margin-top:18px}
.key-head{font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:8px}
.key-row{display:grid;grid-template-columns:10.5rem minmax(0,1fr);column-gap:20px;padding:11px 0;border-top:1px solid var(--line);font-size:.88rem;line-height:1.5;color:var(--ink-2)}
.key-row:last-of-type{border-bottom:1px solid var(--line)}
.key-term{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;padding-top:5px}
.key-def{max-width:76ch}
.key-sigs{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 12px;align-items:center}
.key-sigs .chip{justify-self:start}
.key-note{margin-top:10px;font-size:.8rem;color:var(--muted)}
@media (max-width:640px){.key-row{grid-template-columns:1fr;row-gap:4px}}
/* state list: sortable headers (TK 2026-08-16 — sort, not filter) */
.matrix th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.matrix th.sortable::after{content:"↕";display:inline-block;margin-left:6px;opacity:.35;font-family:var(--sans)}
.matrix th.sortable:hover{color:var(--ink)}
.matrix th.sortable[aria-sort="ascending"]{color:var(--ink)}
.matrix th.sortable[aria-sort="ascending"]::after{content:"↑";opacity:1}
.matrix th.sortable[aria-sort="descending"]{color:var(--ink)}
.matrix th.sortable[aria-sort="descending"]::after{content:"↓";opacity:1}
.matrix th.sortable:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* sorting is for the full list only (TK 2026-08-16): the home page's Grade A
   list and the signed-out state list are partial — headers stay plain until
   the body carries .unlocked */
.matrix--home th.sortable,body:not(.unlocked) .matrix--list th.sortable{pointer-events:none;cursor:default}
.matrix--home th.sortable::after,body:not(.unlocked) .matrix--list th.sortable::after{display:none}
/* state list, phones only: "View the full state list" opens the unlock ask as a dialog (hidden once unlocked) */
.jump-unlock{display:none}
@media (max-width:640px){.jump-unlock{display:block;text-align:right;margin-top:14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);text-decoration:underline;text-underline-offset:3px}}
body.unlocked .jump-unlock{display:none}
/* the unlock ask as a dialog (native <dialog>; the link falls back to the band's anchor without JS) */
.unlock-dialog{margin:auto;border:0;border-radius:var(--r-card);padding:0;max-width:min(440px,calc(100vw - 32px));background:transparent;color:var(--ink)}
.unlock-dialog::backdrop{background:rgba(15,27,38,.55)}
.unlock-dialog .capture{margin:0;position:relative;padding:24px 22px 22px}
.unlock-dialog .dlg-close{position:absolute;top:8px;right:10px;background:none;border:0;font-size:1.4rem;line-height:1;color:var(--muted);cursor:pointer;padding:6px}
.unlock-dialog .dlg-close:hover{color:var(--ink)}
@media (max-width:600px){.sp-fig{font-size:2.4rem}}
/* open badge — semantic green + dot + label; pulse only for motion-ok readers */
.live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green);border:1px solid #BFD9C9;background:var(--green-soft);border-radius:var(--r-chip);padding:4px 10px 4px 9px;white-space:nowrap}
:root[data-theme="dark"] .live{border-color:#2E5B45}
.live .p{position:relative;width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.live .p::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--green);opacity:0;animation:live-pulse 2s ease-out infinite}
@keyframes live-pulse{0%{transform:scale(.55);opacity:.85}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.live .p::after{animation:none}}
.live--off{color:var(--muted);background:var(--wash);border-color:var(--line)}
.live--off .p{background:var(--navy-4)}
.live--off .p::after{display:none}
/* pitch block */
.sp-pitch{margin-top:30px}
.sp-hook{margin-top:16px;font-size:.92rem;color:var(--ink-2)}
.sp-hook a{text-decoration:underline;text-underline-offset:3px}
.skel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:14px}
.skel table{border-collapse:collapse;width:100%}
.skel th{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding:8px 14px;background:var(--wash);border-bottom:1px solid var(--line)}
.skel td{padding:0 14px;height:42px;border-top:1px solid var(--line)}
.skel tbody tr:first-child td{border-top:none}
.skel .bar{display:block;height:9px;border-radius:5px;background:var(--navy-4);opacity:.55}
.skel .bar.s{width:38%}.skel .bar.m{width:62%}.skel .bar.l{width:84%}
.skel tr.more td{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ref);background:var(--wash);height:38px}
.two-col{display:grid;grid-template-columns:1fr 1.35fr;gap:16px;margin-top:16px;align-items:stretch}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}
.colcard{border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px;background:var(--bg)}
.colcard.pro{border-color:var(--btn);box-shadow:0 1px 10px var(--hot-shadow);background:var(--card)}
.colcard .ch{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.colcard .ch .tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:2px 6px}
.colcard.pro .ch .tag{color:var(--btn-text);background:var(--btn);border-color:var(--btn)}
.colcard ul{list-style:none;margin:6px 0 0}
.colcard li{list-style:none;font-size:.86rem;padding:6px 0 6px 20px;border-top:1px solid var(--line);color:var(--ink-2);position:relative}
.colcard li::before{content:"·";position:absolute;left:6px;color:var(--accent);font-weight:700}
.colcard li b{color:var(--ink);font-weight:600}
.colcard li.ok::before{content:"✓";color:var(--green);left:2px}
.sp-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-top:20px}
.sp-foot .fine{margin-top:0;max-width:60ch;flex:1 1 440px}
.cta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-left:auto}
.cta-row{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.cta .btn{display:inline-flex;align-items:center;line-height:1.2}
.cta .buy-alt{background:none;border:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);cursor:pointer;padding:8px 0 0;line-height:1.2;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cta .buy-alt:hover{color:var(--ink)}
.cta .buy-alt--static{cursor:default;text-decoration:none;color:var(--muted)}
.cta .buy-alt--static:hover{color:var(--muted)}
@media (max-width:700px){.sp-foot{flex-direction:column-reverse}.cta{align-items:flex-start;margin-left:0}.cta-row{justify-content:flex-start}}
.fine{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--muted);margin-top:10px;text-transform:uppercase;line-height:1.7}
.fine a{text-decoration:underline;text-underline-offset:3px}

.capture{background:var(--wash);border-radius:var(--r-card);padding:24px 28px;margin:26px 0 8px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.capture .txt{flex:1;min-width:260px}
.capture .txt b{font-weight:600}
.capture .txt p{font-size:.86rem;color:var(--ink-2)}
.capture .em{flex:1;min-width:200px;max-width:280px;padding:11px 14px;border:1px solid var(--line-strong);border-radius:6px;font-family:var(--mono);font-size:.78rem;background:var(--card);color:var(--ink)}
.capture button.btn{cursor:pointer}
/* signed-out state list (2026-08-22, TK ruling G): every row shows its name
   and grade; the figures and signals of non-Grade-A rows are masked until the
   body carries .unlocked */
body:not(.unlocked) tr.locked td.num,body:not(.unlocked) tr.locked td.sig{position:relative;color:transparent}
body:not(.unlocked) tr.locked td.num .chip,body:not(.unlocked) tr.locked td.sig .chip{visibility:hidden}
body:not(.unlocked) tr.locked td.num::after{content:"";position:absolute;right:14px;top:50%;height:9px;width:46%;margin-top:-4px;border-radius:5px;background:var(--navy-4);opacity:.45}
body:not(.unlocked) tr.locked td.sig::after{content:"";position:absolute;left:14px;top:50%;height:9px;width:40%;margin-top:-4px;border-radius:5px;background:var(--navy-4);opacity:.45}
body:not(.unlocked) tr.locked{cursor:pointer}
body.unlocked #unlock-band{display:none}
/* program pages (2026-08-22): other names, the public summary, the signals head as an h2 */
.sp-aka{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:-6px 0 10px}
.sp-summary{max-width:72ch;margin:0 0 18px}
h2.sp-signals-head{font:inherit;margin:0}
.sp-how{max-width:72ch;margin:18px 0 0}
.sp-how h2{font-size:1.05rem;margin:0 0 6px}
.sp-how p{font-size:.9rem;color:var(--ink-2);margin:0 0 8px}
.sp-how .fine{text-transform:none;letter-spacing:0;font-size:.66rem}
.semi-index{columns:3;column-gap:28px;margin:14px 0 8px;padding:0;list-style:none}
.semi-index li{break-inside:avoid;padding:4px 0;border-top:1px solid var(--line);font-size:.88rem}
.semi-index li a{text-decoration:none}
.semi-index li a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.semi-index{columns:2}}
@media (max-width:480px){.semi-index{columns:1}}
/* footer: the names-only state index */
.states-index{font-size:.74rem;line-height:1.9;color:var(--muted);margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.states-index b{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
.states-index a{color:var(--ink-2);text-decoration:none;white-space:nowrap}
.states-index a:hover{text-decoration:underline;text-underline-offset:3px}
.matrix tr[data-href]{cursor:pointer}
/* signed-out state list: placeholder rows + "more states" line (hidden once unlocked) */
.matrix .bar{display:block;height:9px;border-radius:5px;background:var(--navy-4);opacity:.55}
.matrix .bar.s{width:38%}.matrix .bar.m{width:62%}.matrix .bar.l{width:84%}
.matrix td.num .bar{margin-left:auto}
.matrix tr.more td{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ref);background:var(--wash);height:40px}
.matrix tr.more a{text-decoration:underline;text-underline-offset:3px}
body.unlocked tr.tease{display:none}


/* account forms (15B): full-width sentence-case primary button */
.btn--form{display:block;width:100%;text-align:center;font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;border:none;cursor:pointer}

/* account shell (16A): sidebar + pane */
.portal{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start;max-width:880px}
.portal .side{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.portal .side a{display:block;padding:11px 16px;font-size:.85rem;border-top:1px solid var(--line);color:var(--ink-2)}
.portal .side a:first-child{border-top:none}
.portal .side a.on{background:var(--wash);font-weight:600;color:var(--ink);border-left:3px solid var(--navy);padding-left:13px}
.portal .pane{display:flex;flex-direction:column;gap:0;min-width:0}
@media (max-width:760px){.portal{grid-template-columns:1fr}}
.kv{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;border-top:1px solid var(--line);font-size:.86rem}
.kv:first-child{border-top:none}
.kv .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.kv .v{font-weight:600;text-align:right}

/* notifications (17C): toggle checkboxes + watch-row remove */
input.tgl{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:11px;background:var(--navy-4);position:relative;cursor:pointer;vertical-align:middle;transition:background .15s;margin:0}
input.tgl::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
input.tgl:checked{background:var(--green)}
input.tgl:checked::after{left:19px}
.tglall{background:var(--card);border:1px solid var(--line);border-radius:var(--r-chip);font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ref);cursor:pointer;padding:2px 7px}
.tglall:hover{background:var(--wash)}
tr.allrow td{background:var(--wash);font-size:.78rem;color:var(--muted)}
.savenote{font-size:.85rem;color:var(--green);font-weight:600;margin-left:10px}
.linkdanger{background:none;border:none;font:inherit;font-size:.9rem;color:var(--red);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.linkdanger:hover{color:#8F2E22}

/* welcome flow (18B) */
.f2col{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
@media (max-width:560px){.f2col{grid-template-columns:1fr}}
.stgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}
@media (max-width:560px){.stgrid{grid-template-columns:repeat(2,1fr)}}

/* Standing rule (TK, 2026-08-04): the browser-default bevel border must
   never appear — every button class defines its own border explicitly.
   Action buttons are solid house navy, white text (staging convention). */
.btn{display:inline-block;background:var(--btn);color:var(--btn-text);font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:12px 20px;border-radius:6px;border:1px solid var(--btn);cursor:pointer}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn--ghost{background:transparent;color:var(--btn);border:1px solid var(--btn)}
.btn--ghost:hover{background:var(--ghost-hover)}

.mth h2{font-family:var(--disp);font-stretch:110%;font-weight:700;font-size:1.2rem;margin:30px 0 10px}
.mth .prose{margin-bottom:10px}
table.plain{border-collapse:collapse;margin:8px 0 14px;font-size:.86rem}
table.plain th{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 18px 6px 0;border-bottom:1px solid var(--line)}
table.plain td{padding:7px 18px 7px 0;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
table.plain td:first-child{font-family:var(--mono);font-size:.78rem;color:var(--ink);white-space:nowrap}

/* ============================================================
   FOOTER — house surfaces, tokenized (themes with the page).
   TK 2026-08-15: cream out ("doesn't fit at this point"). Keeps
   the 2px teal top rule and the textured teal emblem on a
   transparent ground as the one print-scale accent.
   ============================================================ */
.pagefoot{margin:auto 0 0;border-top:2px solid var(--teal);background:var(--card)}
.pagefoot .wrap{padding-top:26px;padding-bottom:34px}
.pagefoot .emblem-foot{height:36px;width:auto;display:block;margin-bottom:12px}
/* the textured mark is an SVG filter; iOS rasterizes filtered <img> SVGs at 1x
   and it reads fuzzy on a phone (TK 2026-08-16) — phones get the crisp kit
   emblem, wide screens keep the textured print-scale accent */
.pagefoot .emblem-foot--crisp{display:none;width:38px;height:36px;color:var(--emblem)}
.pagefoot .cols{display:flex;gap:40px;flex-wrap:wrap;font-size:.8rem;color:var(--ink-2)}
.pagefoot .cols .col{max-width:44ch}
.pagefoot .cols b{color:var(--ink);font-weight:600;display:block;margin-bottom:6px}
.pagefoot a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--navy-4)}
.pagefoot a:focus-visible{outline-color:var(--focus)}
.pagefoot .legal{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--muted);margin-top:22px}
@media (max-width:760px){.hero h1{font-size:1.9rem}}

/* ============================================================
   MOBILE (TK 2026-08-16): state pages travel by text message, so
   every shared page has to read cleanly at phone width. Not every
   figure survives — the columns that go are named at each rule.
   ============================================================ */
@media (max-width:760px){
  .wrap{padding:0 20px}
  /* nav: brand + hamburger on one row; the menu drops below as a panel */
  .nav .wrap{flex-wrap:wrap;gap:0 12px;padding-top:12px;padding-bottom:12px}
  .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:40px;height:36px;padding:0 9px;background:transparent;border:1px solid var(--line-strong);
    border-radius:var(--r-chip);cursor:pointer;flex:none}
  .nav-toggle span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;
    transition:transform .18s ease,opacity .18s ease}
  .nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .nav-toggle span:nth-child(2){opacity:0}
  .nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-menu{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;
    margin-top:12px;border-top:1px solid var(--line)}
  .nav.open .nav-menu{display:flex}
  .nav-menu a.item{display:block;padding:13px 0;border-bottom:1px solid var(--line);font-size:.74rem}
  .nav-menu .theme-btn{align-self:flex-start;margin:12px 0 2px}
  /* rhythm */
  .hero{padding:32px 0 26px}
  .hero .statstrip{display:none}
  /* iOS zooms the page when a focused input's font is under 16px — every
     email/search field is 16px on phones (also keeps the unlock dialog in place) */
  input[type=email],input[type=search],input[type=text]{font-size:16px !important}
  .hero .dek{font-size:.98rem}
  .statstrip{gap:8px 20px;margin-top:18px}
  section.band{padding:22px 0 8px}
  .sechead{flex-wrap:wrap;gap:4px 12px}
  .sechead h2{flex-basis:100%}
  .sechead .note{max-width:none}
  .card{padding:16px 18px}
  .wall{padding:20px 18px}
  .capture{padding:20px 18px;gap:14px}
  .capture .em{max-width:none;width:100%}
  .capture button.btn{width:100%;justify-content:center}
  .pagefoot .wrap{padding-top:22px;padding-bottom:26px}
  .pagefoot .cols{gap:20px 32px}
  .pagefoot img.emblem-foot{display:none}
  .pagefoot .emblem-foot--crisp{display:block}
}
@media (max-width:640px){
  /* the state list: scrolls sideways under a sticky State column — every
     column stays (TK 2026-08-16: Potential too) */
  .matrix{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .matrix table{min-width:640px}
  .matrix th:first-child,.matrix td:first-child{position:sticky;left:0;z-index:1;background:var(--card)}
  .matrix th:first-child{background:var(--wash)}
  .matrix tbody tr:hover td:first-child{background:var(--row-hover)}
  .matrix td,.matrix th{padding-left:10px;padding-right:10px}
  /* the "more states" line stays readable while the table scrolls sideways */
  .matrix tr.more .more-txt{position:sticky;left:10px;display:inline-block;max-width:calc(100vw - 62px);white-space:normal;line-height:1.5;padding:6px 0}
  /* state page: the signals key, the meta card, and the "this page · free"
     card leave the phone view (TK 2026-08-16) */
  .sp-band{display:none}
  /* program pages keep the band on phones — the signal sentence and who
     runs it are the page's free facts, not a key */
  .sp-band--program{display:grid}
  .two-col .colcard:not(.pro){display:none}
  /* pricing: the plan cards carry the comparison; the wide table stays on desktop */
  section.band--compare{display:none}
  /* state page: figure above its label; the pitch's placeholder table keeps
     Program · Pays per truck · Status; the fine print stops taking a flex basis */
  .sp-kpi{flex-direction:column;align-items:flex-start;gap:6px}
  .sp-kpi .sp-figlabel{max-width:none}
  .sp-hero--pair{gap:16px}
  .sp-foot .fine{flex:0 0 auto}
  .skel th:nth-child(n+4),.skel td:nth-child(n+4){display:none}
  .skel th,.skel td{padding-left:12px;padding-right:12px}
  .cta-row{width:100%}
  .cta-row .btn{flex:1 1 auto;justify-content:center;text-align:center}
  .strip-pitch{flex-direction:column;align-items:stretch;padding:20px 18px}
  .tierstrip{gap:10px 14px}
}