/* MedicareInsights — navigation, search, explainer and 3D chart chrome.
   Loaded on every page after the inlined base stylesheet. Uses the same tokens
   (--ink, --muted, --border, --accent, --surface, --chip) so dark mode works
   without a second set of overrides. */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- header */
.site-header .wrap{gap:14px;height:60px}
.site-header svg{width:18px;height:18px;flex:none}

.nav-burger{display:none;align-items:center;justify-content:center;width:38px;height:38px;
  margin-left:auto;border:1px solid var(--border);background:var(--surface);color:var(--ink);
  border-radius:9px;cursor:pointer}
.nav-burger svg:last-child{display:none}
.nav-burger[aria-expanded="true"] svg:first-child{display:none}
.nav-burger[aria-expanded="true"] svg:last-child{display:block}

.main-nav{overflow:visible}
.nav-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-group{position:relative}

.nav-top{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border:0;border-radius:8px;
  background:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  white-space:nowrap;line-height:1.2}
.nav-top:hover{background:var(--chip);color:var(--ink)}
.nav-top[aria-current="true"]{color:var(--accent-ink);background:var(--chip)}
.nav-top .nav-caret{width:13px;height:13px;opacity:.6;transition:transform .16s ease}
.nav-top[aria-expanded="true"]{background:var(--chip);color:var(--ink)}
.nav-top[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}

.nav-panel{position:absolute;top:calc(100% + 8px);left:-8px;z-index:60;min-width:330px;
  background:var(--surface);border:1px solid var(--border);border-radius:13px;
  box-shadow:0 14px 38px rgba(16,32,43,.14),0 2px 6px rgba(16,32,43,.06);padding:7px}
.nav-panel[hidden]{display:none}
.nav-panel-inner{display:grid;gap:1px}
.nav-item{display:block;padding:9px 11px;border-radius:9px;color:var(--ink);text-decoration:none}
.nav-item:hover,.nav-item:focus-visible{background:var(--chip);text-decoration:none}
.nav-item-t{display:block;font-size:13.5px;font-weight:650;line-height:1.35}
.nav-item-d{display:block;font-size:12px;color:var(--faint);line-height:1.4;margin-top:1px}

/* ---------------------------------------------------------------- search */
.nav-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-search{position:relative;display:flex;align-items:center;gap:7px;
  background:var(--chip);border:1px solid var(--border);border-radius:9px;padding:0 9px;height:36px}
.nav-search:focus-within{border-color:var(--accent);background:var(--surface)}
.nav-search svg{width:15px;height:15px;color:var(--faint)}
.nav-search input{width:190px;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;
  outline:none;padding:0}
.nav-search input::placeholder{color:var(--faint)}
.nav-kbd{font:600 11px/1 var(--mono);color:var(--faint);border:1px solid var(--border);
  border-radius:4px;padding:3px 5px;background:var(--surface)}
.nav-search:focus-within .nav-kbd{display:none}

.nav-results{position:absolute;top:calc(100% + 7px);right:0;z-index:70;width:390px;max-height:60vh;
  overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 14px 38px rgba(16,32,43,.16);padding:6px}
.nav-results[hidden]{display:none}
.nav-results a{display:flex;align-items:baseline;gap:9px;padding:8px 10px;border-radius:8px;
  color:var(--ink);text-decoration:none;font-size:13.5px}
.nav-results a:hover,.nav-results a[aria-selected="true"]{background:var(--chip);text-decoration:none}
.nav-results .r-kind{font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;
  color:var(--faint);border:1px solid var(--border);border-radius:4px;padding:3px 5px;flex:none}
.nav-results .r-sub{margin-left:auto;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.nav-results .r-empty{padding:12px;color:var(--muted);font-size:13px}

/* ---------------------------------------------------------------- drawer */
.site-drawer{display:none;border-top:1px solid var(--border);background:var(--surface);
  padding:14px 20px 20px;max-height:calc(100vh - 60px);overflow:auto}
.site-drawer .drawer-group{padding:8px 0;border-bottom:1px solid var(--border)}
.site-drawer .drawer-group:last-child{border-bottom:0}
.drawer-h{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint)}
.site-drawer a{display:block;padding:8px 0;color:var(--ink);font-size:14.5px;font-weight:550}

@media (max-width:1080px){ .nav-search input{width:130px} .nav-kbd{display:none} }
@media (max-width:900px){
  .site-header .wrap{gap:10px}
  .nav-burger{display:inline-flex;order:3}
  .main-nav{display:none}
  .nav-tools{order:2;margin-left:auto}
  .nav-search input{width:110px}
  .nav-results{width:min(92vw,390px)}
  .site-drawer:not([hidden]){display:block}
}
@media (max-width:560px){ .nav-search{display:none} .site-drawer .nav-search{display:flex;margin-bottom:6px} }

/* ------------------------------------------------------- explain-this UI */
.explain{margin:10px 0 0}
.explain-btn{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--border);
  background:none;color:var(--muted);border-radius:100px;padding:4px 11px;font:inherit;font-size:12px;
  font-weight:600;cursor:pointer}
.explain-btn:hover{border-style:solid;border-color:var(--accent);color:var(--accent-ink)}
.explain-btn::before{content:"?";display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;background:var(--chip);font-size:10px;font-weight:800}
.explain-body{margin-top:9px;padding:12px 14px;border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;background:var(--surface);font-size:13.5px;line-height:1.6;color:var(--muted);
  max-width:70ch}
.explain-body[hidden]{display:none}
.explain-body p{margin:0 0 8px}
.explain-body p:last-child{margin:0}
.explain-body strong{color:var(--ink)}

/* glossary hover cards */
.dfn-card{position:absolute;z-index:80;max-width:320px;background:var(--surface);
  border:1px solid var(--border);border-radius:11px;box-shadow:0 12px 30px rgba(16,32,43,.16);
  padding:11px 13px;font-size:13px;line-height:1.55;color:var(--muted)}
.dfn-card strong{display:block;color:var(--ink);font-size:13px;margin-bottom:3px}
.dfn-card a{font-size:12px}

/* ------------------------------------------------------------ 3D charts */
.viz{border:1px solid var(--border);border-radius:13px;background:var(--surface);overflow:hidden;
  margin:18px 0}
.viz-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--border)}
.viz-title{font-size:13.5px;font-weight:700;margin:0}
.viz-ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto}
.viz-ctrls select,.viz-ctrls button{border:1px solid var(--border);background:var(--surface);
  color:var(--ink);border-radius:7px;padding:5px 9px;font:inherit;font-size:12.5px;cursor:pointer}
.viz-ctrls button:hover,.viz-ctrls select:hover{border-color:var(--accent)}
.viz-ctrls button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.viz-canvas{position:relative;width:100%;touch-action:none;cursor:grab;background:var(--bg)}
.viz-canvas:active{cursor:grabbing}
.viz-canvas canvas{display:block;width:100%;height:100%}
.viz-tip{position:absolute;pointer-events:none;z-index:5;background:var(--ink);color:var(--surface);
  border-radius:8px;padding:7px 10px;font-size:12px;line-height:1.45;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.22);opacity:0;transition:opacity .1s}
.viz-tip.on{opacity:1}
.viz-tip b{font-variant-numeric:tabular-nums}
.viz-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:9px 14px;
  border-top:1px solid var(--border);font-size:12px;color:var(--faint)}
.viz-legend{display:flex;align-items:center;gap:6px}
.viz-ramp{width:120px;height:9px;border-radius:100px;
  background:linear-gradient(90deg,#e8eef7,#9dc0ea,#4b8fd6,#1f5fae,#0b3b78)}
.viz-nojs{padding:16px;font-size:13px;color:var(--muted)}

/* ------------------------------------------------------ county explorer */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  border:1px solid var(--border);border-radius:13px;background:var(--surface);padding:14px;margin:18px 0}
.filters label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.filters input,.filters select{width:100%;border:1px solid var(--border);border-radius:8px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:13.5px;padding:7px 9px}
.filters input:focus,.filters select:focus{outline:2px solid var(--accent);outline-offset:-1px}
.filters .range-row{display:flex;align-items:center;gap:7px}
.filters .range-row input{width:100%}
.filter-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-4px 0 16px;
  font-size:13px;color:var(--muted)}
.filter-actions .count{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.filter-actions button{border:1px solid var(--border);background:var(--surface);color:var(--ink);
  border-radius:7px;padding:5px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.filter-actions button:hover{border-color:var(--accent);color:var(--accent-ink)}

.tbl-wrap{border:1px solid var(--border);border-radius:13px;overflow:auto;max-height:70vh;
  background:var(--surface)}
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th,table.data td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);
  white-space:nowrap}
table.data thead th{position:sticky;top:0;z-index:2;background:var(--surface);font-size:11.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--faint);cursor:pointer;user-select:none}
table.data thead th:hover{color:var(--ink)}
table.data thead th[aria-sort]{color:var(--accent-ink)}
table.data thead th[aria-sort="ascending"]::after{content:" ↑"}
table.data thead th[aria-sort="descending"]::after{content:" ↓"}
table.data td.num{text-align:right;font-variant-numeric:tabular-nums}
table.data tbody tr:hover{background:var(--chip)}
table.data .pos{color:var(--good);font-weight:600}
table.data .neg{color:var(--bad);font-weight:600}
.tbl-more{padding:12px;text-align:center}
.tbl-more button{border:1px solid var(--border);background:var(--surface);color:var(--ink);
  border-radius:8px;padding:7px 16px;font:inherit;font-size:13px;cursor:pointer}

/* ============================================================================
   MODERNISATION LAYER — July 2026
   Loaded on every page after the inlined base stylesheet, so everything here
   refines the existing components rather than replacing them. Same blue /
   neutral analyst palette; what changes is the surface treatment, the type
   scale, the spacing rhythm and the focus behaviour.
   ========================================================================== */

:root{
  /* Surfaces get a little warmth and the borders get lighter, so panels read
     as raised rather than as boxes drawn on the page. */
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#fbfcfd;
  --border:#e5e8ed;
  --border-strong:#d2d8e0;
  --chip:#eef2f7;

  /* --faint was #8b95a1, about 2.6:1 on white — below the 4.5:1 that WCAG 2.2
     AA requires for body text. This passes at ~4.9:1 and still reads as quiet. */
  --faint:#66707c;
  --ink:#131c26;
  --muted:#525d6b;

  --accent:#0b5bd3;
  --accent-ink:#0a4cb0;
  --accent-soft:#eaf1fd;

  /* Elevation: three steps, all low-spread and tinted with the ink colour so
     shadows never look grey-on-grey. */
  --sh-1:0 1px 2px rgba(19,28,38,.05), 0 1px 3px rgba(19,28,38,.04);
  --sh-2:0 2px 4px rgba(19,28,38,.05), 0 6px 16px rgba(19,28,38,.06);
  --sh-3:0 8px 24px rgba(19,28,38,.10), 0 2px 6px rgba(19,28,38,.05);

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;

  --map-nodata:#e9edf2;
  --map-border:rgba(255,255,255,.55);
  --map-state:rgba(28,42,58,.42);
  --map-plate:#eef1f5;
  --ease:cubic-bezier(.2,.7,.3,1);
}

html[data-theme="dark"]{
  --surface-2:#1b2028;
  --border-strong:#333b46;
  --accent-soft:#152238;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 4px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.35);
  --sh-3:0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  --map-nodata:#252b34;
  --map-border:rgba(10,14,20,.55);
  --map-state:rgba(190,205,220,.40);
  --map-plate:#181d24;
}

/* ------------------------------------------------------------- typography */
body{
  font-family:"Inter var","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    Helvetica,Arial,"Helvetica Neue",sans-serif;
  font-size:15.5px;
  line-height:1.6;
  /* Tabular figures everywhere: this is a site of numbers, and columns of
     numbers that shift width as they update are hard to compare. */
  font-variant-numeric:tabular-nums;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{letter-spacing:-.021em;line-height:1.22;text-wrap:balance}
p{text-wrap:pretty}
.answer-h1{font-size:clamp(28px,3.4vw,38px);line-height:1.16;letter-spacing:-.028em;margin:10px 0 12px}
.hub-hero h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.03em;margin:10px 0 12px}
.hub-hero{margin:44px 0 10px}
.hub-hero p,.lede{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.58;color:var(--muted)}
.lede strong,.lede b{color:var(--ink);font-weight:650}
.hub-kicker{font-size:11.5px;letter-spacing:.14em}
.panel h2{font-size:17px}
.wrap{max-width:1140px;padding:0 24px}

/* ------------------------------------------------------------------ links */
a{text-underline-offset:2px}
a:hover{text-decoration-thickness:1.5px}

/* WCAG 2.2 asks for focus that is visible and not obscured. One ring style,
   applied to everything, drawn outside the element so nothing clips it. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
.qcard:focus-visible,.panel:focus-visible{outline-offset:3px}

/* -------------------------------------------------------------- header */
.site-header{
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--border);box-shadow:var(--sh-1)}
.brand{font-size:16.5px;letter-spacing:-.03em}
.nav-top{border-radius:9px;transition:background .14s var(--ease),color .14s var(--ease)}
.nav-panel{border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:8px}
.nav-search{border-radius:10px;transition:border-color .15s var(--ease),background .15s var(--ease)}
.nav-search:focus-within{box-shadow:0 0 0 3px var(--accent-soft)}
.nav-results{border-radius:var(--r-md);box-shadow:var(--sh-3)}

/* -------------------------------------------------------- cards & panels */
.panel{
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:24px 26px;
  margin:22px 0;
}
.qgrid{gap:16px}
.qcard{
  border-radius:var(--r-lg);
  padding:22px 24px 46px;
  box-shadow:var(--sh-1);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.qcard:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:var(--sh-2);
}
.qcard .q{font-size:16.5px;font-weight:680;line-height:1.35}
.qcard .stat{font-size:29px;letter-spacing:-.03em}
.qcard .go{
  right:20px;bottom:16px;
  display:inline-flex;align-items:center;gap:5px;
  transition:gap .18s var(--ease);
}
.qcard:hover .go{gap:9px}
.qcard.roadmap{box-shadow:none}
.qcard.roadmap:hover{transform:none}

/* ---------------------------------------------------------------- KPIs */
.kpi-row{gap:14px;margin:20px 0}
.kpi{
  border-radius:var(--r-md);
  padding:16px 18px;
  box-shadow:var(--sh-1);
  position:relative;
  overflow:hidden;
}
/* A hairline of accent along the top edge groups the KPI strip visually
   without adding another border or background colour. */
.kpi::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:var(--accent);
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent));
  opacity:.85;
}
.kpi .v{font-size:27px;letter-spacing:-.03em;line-height:1.15}
.kpi .l{font-size:12.5px;margin-top:4px;color:var(--muted)}

/* --------------------------------------------------------------- tables */
.tbl-wrap{border-radius:var(--r-lg);box-shadow:var(--sh-1)}
table.data thead th{
  background:var(--surface);
  box-shadow:inset 0 -1px 0 var(--border-strong);
  border-bottom:0;
  padding-top:11px;padding-bottom:11px;
}
table.data tbody tr{transition:background .1s linear}
table.data tbody tr:nth-child(even) td{background:var(--surface-2)}
@supports (background:color-mix(in srgb,red 50%,transparent)){
  table.data tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--chip) 45%,transparent)}
}
table.data tbody tr:hover td{background:var(--accent-soft)}
table.data td.num,table.data th.n{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- buttons & forms */
.action-bar a,.action-bar button,.filter-actions button,.tbl-more button,
.viz-ctrls select,.viz-ctrls button{
  border-radius:9px;
  box-shadow:var(--sh-1);
  transition:border-color .14s var(--ease),color .14s var(--ease),
             background .14s var(--ease),transform .1s var(--ease);
}
.action-bar a:hover,.action-bar button:hover,.filter-actions button:hover,
.tbl-more button:hover,.viz-ctrls button:hover,.viz-ctrls select:hover{
  border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);
}
.action-bar button:active,.filter-actions button:active{transform:translateY(1px)}
.filters{border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:18px;gap:14px}
.filters input,.filters select{
  border-radius:9px;padding:8px 10px;background:var(--surface);
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
.filters input:focus,.filters select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}

/* --------------------------------------------------------- so-what panel */
.sowhat{
  border-left-width:3px;
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  box-shadow:var(--sh-1);
  padding:22px 26px;
}
.sowhat h2{font-size:11.5px;letter-spacing:.11em}
details.provenance{border-radius:var(--r-lg)}

/* ============================================================ FLAT MAP */
.viz{border-radius:var(--r-lg);box-shadow:var(--sh-1);margin:22px 0}
.viz-head{padding:14px 18px;gap:12px}
.viz-title{font-size:15px;font-weight:700;letter-spacing:-.015em}
.viz-foot{padding:11px 18px;gap:14px}
.viz-nojs{padding:20px}

.mimap{position:relative;background:var(--map-plate);touch-action:none;overflow:hidden}
.mimap-svg{
  display:block;width:100%;height:auto;max-height:74vh;
  cursor:grab;
  /* The zoom transform is animated, not the individual counties: transitioning
     3,100 fill changes at once would drop frames on every filter keystroke. */
}
.mimap.zoomed .mimap-svg{cursor:grab}
.mimap.panning .mimap-svg{cursor:grabbing}
.mimap-svg:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mimap-zoom{--mimap-sw:1;transition:transform .28s var(--ease)}
.mimap.panning .mimap-zoom{transition:none}

.mimap-c{
  stroke:var(--map-border);
  stroke-width:calc(.35px * var(--mimap-sw));
  stroke-linejoin:round;
  cursor:pointer;
  transition:fill .18s linear;
}
.mimap-c.nodata{fill:var(--map-nodata)}
.mimap-c.hot{
  stroke:var(--ink);
  stroke-width:calc(1.6px * var(--mimap-sw));
  paint-order:stroke fill;
}
.mimap-c.sel{stroke:var(--accent);stroke-width:calc(2px * var(--mimap-sw))}
.mimap-s{fill:none;stroke:var(--map-state);stroke-width:calc(.7px * var(--mimap-sw));
  stroke-linejoin:round;pointer-events:none}

.mimap-tip{
  position:absolute;pointer-events:none;z-index:6;
  background:var(--ink);color:#fff;border-radius:10px;padding:9px 12px;
  font-size:12.5px;line-height:1.45;white-space:nowrap;box-shadow:var(--sh-3);
  opacity:0;transform:translateY(3px);transition:opacity .12s var(--ease),transform .12s var(--ease);
}
.mimap-tip.on{opacity:1;transform:none}
.mimap-tip b{display:block;font-size:13.5px;font-weight:650}
.mimap-tip span{display:block;color:rgba(255,255,255,.78);margin-top:2px}
html[data-theme="dark"] .mimap-tip{background:#0d1117;border:1px solid var(--border)}

.mimap-zoombar{
  position:absolute;right:12px;top:12px;z-index:5;
  display:flex;flex-direction:column;gap:4px;
}
.mimap-zoombar button{
  min-width:32px;height:32px;padding:0 8px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  border-radius:9px;font:inherit;font-size:15px;font-weight:600;line-height:1;
  cursor:pointer;box-shadow:var(--sh-1);
}
.mimap-zoombar button[data-z="reset"]{font-size:11.5px;font-weight:650;letter-spacing:.02em}
.mimap-zoombar button:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}

/* Legend lives in the chart footer and is a real key, not a gradient bar:
   the fills are quantile bins, so the swatches must be discrete to match. */
.mimap-legend{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--faint)}
.mimap-lg-t{font-weight:650;color:var(--muted)}
.mimap-lg-scale{display:inline-flex;border-radius:4px;overflow:hidden;box-shadow:var(--sh-1)}
.mimap-lg-sw{width:26px;height:11px;display:block}
.mimap-lg-e{font-variant-numeric:tabular-nums}
.mimap-lg-hi{margin-right:6px}
.mimap-lg-nd{display:inline-flex;align-items:center;gap:5px}
.mimap-lg-nd i{width:11px;height:11px;border-radius:3px;background:var(--map-nodata);
  border:1px solid var(--border-strong)}

/* ======================================================== FLAT SCATTER */
.miplot{position:relative;background:var(--surface)}
.miplot-svg{display:block;width:100%;height:auto;max-height:64vh}
.miplot-grid .g{stroke:var(--border);stroke-width:1}
.miplot-grid .g.zero{stroke:var(--border-strong);stroke-width:1.5}
.miplot-tick{font-size:11.5px;fill:var(--faint)}
.miplot-axis{font-size:12.5px;font-weight:650;fill:var(--muted)}
.miplot-q{font-size:11.5px;font-weight:700;fill:var(--faint);letter-spacing:.04em;
  text-transform:uppercase}
.miplot-quad .q{fill:var(--accent);opacity:.035}
.miplot-p{
  cursor:pointer;fill-opacity:.72;
  stroke:rgba(19,28,38,.28);stroke-width:.8;
  transition:fill-opacity .12s linear;
}
.miplot-p.hot{fill-opacity:1;stroke:var(--ink);stroke-width:2}
html[data-theme="dark"] .miplot-p{stroke:rgba(255,255,255,.22)}
html[data-theme="dark"] .miplot-p.hot{stroke:#fff}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .qcard:hover{transform:none}
}

@media (max-width:700px){
  .wrap{padding:0 16px}
  .panel{padding:18px 16px;border-radius:var(--r-md)}
  .qcard{padding:18px 18px 42px}
  .mimap-svg{max-height:56vh}
  .mimap-zoombar{right:8px;top:8px}
}

/* Shapes are wrapped in links; the link must not add underlines or its own
   focus ring on top of the shape's. */
.mimap-a{text-decoration:none;outline:none}
.mimap-a:focus{outline:none}

/* ============================================================ workspace layer
   Added Aug 2026. Uses only existing tokens so light/dark and the editorial
   look are inherited; no new colour values are introduced. */

/* header commercial links */
.nav-commerce{display:flex;align-items:center;gap:4px;margin-left:2px}
.nav-commerce a{display:inline-flex;align-items:center;padding:7px 10px;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;
  transition:background .15s var(--ease),color .15s var(--ease)}
.nav-commerce a:hover,.nav-commerce a:focus-visible{background:var(--chip);color:var(--ink)}
.nav-commerce a[aria-current="page"]{color:var(--accent-ink);background:var(--accent-soft)}
.nav-commerce a.cta{background:var(--accent);color:#fff;border:1px solid var(--accent);
  box-shadow:var(--sh-1)}
.nav-commerce a.cta:hover,.nav-commerce a.cta:focus-visible{background:var(--accent-ink);color:#fff}
@media (max-width:1080px){.nav-commerce .hide-md{display:none}}
@media (max-width:860px){.nav-commerce{display:none}}
.drawer-commerce{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--border)}
.drawer-commerce a{padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);
  border:1px solid var(--border);font-weight:500}
.drawer-commerce a.cta{background:var(--accent);border-color:var(--accent);color:#fff}

/* save buttons live inside the existing .action-bar and inherit its rhythm */
.mi-save{cursor:pointer}
.mi-save[aria-pressed="true"]{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-soft)}

/* toast */
.mi-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);z-index:60;
  max-width:min(560px,calc(100vw - 32px));background:var(--surface);color:var(--ink);
  border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--sh-3);
  padding:12px 14px;font-size:14px;opacity:0;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.mi-toast.in{opacity:1;transform:translate(-50%,0)}
.mi-toast a{color:var(--accent-ink)}
.mi-toast-x{margin-left:8px;background:none;border:0;color:var(--faint);cursor:pointer;font-size:14px}
.mi-toast .mi-upgrade{margin:0}

/* inline upgrade prompt: explains value, never just "upgrade required" */
.mi-upgrade{border:1px solid var(--border);background:var(--surface-2);border-radius:var(--r-md);
  padding:14px 16px;margin:16px 0}
.mi-upgrade p{margin:0 0 8px}
.mi-upgrade p:last-child{margin-bottom:0}
.mi-btn-primary{display:inline-block;background:var(--accent);color:#fff;border-radius:var(--r-sm);
  padding:8px 14px;text-decoration:none;font-weight:600;font-size:14px}
.mi-btn-primary:hover{background:var(--accent-ink);color:#fff}
.mi-link{color:var(--accent-ink);font-size:14px;margin-left:10px}

/* pricing */
.price-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin:22px 0 8px}
.price-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px;display:flex;flex-direction:column;box-shadow:var(--sh-1)}
.price-card.featured{border-color:var(--accent);box-shadow:var(--sh-2);position:relative}
.price-card.featured::before{content:"";position:absolute;inset:-1px -1px auto -1px;height:3px;
  background:var(--accent);border-radius:var(--r-lg) var(--r-lg) 0 0}
.price-pill{display:inline-block;background:var(--accent-soft);color:var(--accent-ink);
  border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;margin-bottom:8px}
.price-name{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.price-amt{font-size:34px;font-weight:700;line-height:1.1;margin:6px 0 2px;color:var(--ink)}
.price-amt small{font-size:15px;font-weight:500;color:var(--muted)}
.price-alt{font-size:13px;color:var(--muted);margin:0 0 10px}
.price-for{font-size:14px;color:var(--muted);margin:0 0 14px}
.price-card ul{list-style:none;padding:0;margin:0 0 18px;font-size:14px;line-height:1.55}
.price-card li{padding-left:22px;position:relative;margin-bottom:7px}
.price-card li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.price-card .cta-row{margin-top:auto}
.price-card .cta-row a{display:block;text-align:center;padding:11px 14px;border-radius:var(--r-sm);
  text-decoration:none;font-weight:600;font-size:15px;border:1px solid var(--border-strong);color:var(--ink)}
.price-card .cta-row a.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.price-card .cta-row a.primary:hover{background:var(--accent-ink)}
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.cmp th,table.cmp td{border-bottom:1px solid var(--border);padding:10px 12px;text-align:left}
table.cmp td.c,table.cmp th.c{text-align:center;white-space:nowrap}
table.cmp thead th{position:sticky;top:0;background:var(--surface);z-index:1;font-size:13px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
table.cmp tbody tr:hover{background:var(--chip)}
table.cmp .grp td{background:var(--surface-2);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.yes{color:var(--accent);font-weight:700}
.no{color:var(--faint)}

/* workspace */
.ws-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));margin:14px 0}
.ws-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;
  box-shadow:var(--sh-1)}
.ws-card h3{margin:0 0 2px;font-size:16px}
.ws-card .ws-sub{font-size:13px;color:var(--faint);margin:0 0 10px}
.ws-metric{font-size:26px;font-weight:700;line-height:1.15}
.ws-metric small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px}
.ws-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ws-actions a,.ws-actions button{font-size:13px;padding:6px 10px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:transparent;color:var(--muted);text-decoration:none;cursor:pointer}
.ws-actions a:hover,.ws-actions button:hover{color:var(--accent-ink);border-color:var(--accent)}
.ws-empty{border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:22px;
  text-align:center;color:var(--muted);background:var(--surface-2)}
.ws-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin:18px 0 6px;flex-wrap:wrap}
.ws-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 12px;
  font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.ws-tabs button[aria-selected="true"]{color:var(--accent-ink);border-bottom-color:var(--accent)}
.ws-note{font-size:13px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:10px 12px;margin:10px 0}

/* next-action cards */
.next-actions{margin:26px 0 6px}
.next-actions h2{font-size:18px;margin:0 0 10px}
.na-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.na-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:14px 16px;text-decoration:none;color:var(--ink);transition:border-color .15s var(--ease),
  box-shadow .15s var(--ease)}
.na-card:hover{border-color:var(--accent);box-shadow:var(--sh-1)}
.na-card strong{display:block;font-size:15px;margin-bottom:3px}
.na-card span{font-size:13px;color:var(--muted)}

/* opportunity score */
.opp-wrap{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin:8px 0 4px}
.opp-score{flex:0 0 auto;text-align:center;border:1px solid var(--border);border-radius:var(--r-md);
  padding:14px 20px;background:var(--surface-2);min-width:132px}
.opp-score b{display:block;font-size:40px;line-height:1;font-weight:700;color:var(--accent-ink)}
.opp-score span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.opp-band{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink)}
.opp-table{flex:1 1 300px;min-width:280px}
.opp-table table{width:100%;border-collapse:collapse;font-size:14px}
.opp-table td{padding:6px 0;border-bottom:1px solid var(--border)}
.opp-table td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.opp-bar{display:inline-block;height:6px;border-radius:3px;background:var(--accent);vertical-align:middle;
  margin-right:8px;min-width:2px}
.opp-bar.na{background:var(--border-strong)}
.opp-missing{color:var(--faint);font-style:normal}
.wc-note{display:block;font-size:12px;color:var(--faint);line-height:1.45;margin-top:2px;max-width:46ch}
#what-changed .status-pill{font-size:11px}

/* ============================================================ NAV REBUILD
   Aug 2026. Mobile-first navigation. Appended last so it wins the cascade
   without editing the rules above, which the inline critical CSS also relies on.

   Fixes, in order of how much they hurt:
     1. Primary nav vanished below 900px, so an iPad in portrait got a burger
        despite having room for real navigation. Now it survives to 1024px and
        the burger is a phone affordance, not a tablet one.
     2. Pricing / Sign in / Request demo disappeared below 860px. Request demo
        is the primary commercial CTA and is now visible at every width.
     3. Tap targets were 32-38px. Everything interactive in the header is now
        at least 44px, per the WCAG 2.5.8 target-size minimum.
     4. The drawer pushed the page down instead of covering it, with no scroll
        lock, no focus trap and no way out but the burger.                    */

/* ---------- shared: bigger targets, sticky header, safe areas ---------- */
.site-header{
  position:sticky;top:0;z-index:70;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--border);
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
}
@supports not (backdrop-filter:blur(1px)){ .site-header{background:var(--surface)} }
.site-header .wrap{height:60px}
.site-header a,.site-header button{-webkit-tap-highlight-color:transparent}

.nav-burger{width:44px;height:44px;border-radius:10px}
.theme-toggle{width:44px;height:44px}
.nav-top{padding:11px 12px;min-height:44px}
.nav-commerce a{min-height:44px;padding:10px 12px}

/* ---------- 1024px and below: condense, do not delete ---------- */
@media (max-width:1024px){
  /* Nav stays. It scrolls horizontally rather than disappearing, so an iPad
     keeps one-tap access to every section. */
  .main-nav{display:block;min-width:0;overflow:visible}
  .nav-list{flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;
    scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity}
  .nav-list::-webkit-scrollbar{display:none}
  .nav-group{scroll-snap-align:start;flex:none}
  .nav-top{padding:11px 10px;font-size:14px}
  .nav-search input{width:104px}
  /* A dropdown anchored to a scrolling row would clip. Pin it to the header. */
  .nav-panel{position:fixed;left:8px;right:8px;top:60px;min-width:0;
    max-height:calc(100dvh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* ---------- 860px and below: commerce links stay, condensed ---------- */
@media (max-width:1080px){ .nav-commerce .hide-md{display:none} }
@media (max-width:860px){
  .nav-commerce{display:flex}
  .nav-commerce .hide-md{display:none}
  .nav-commerce a.cta{padding:10px 13px;font-size:13.5px}
}

/* ---------- 768px and below: phone. Burger + overlay drawer ---------- */
@media (max-width:768px){
  .site-header .wrap{height:56px;gap:8px}
  .main-nav{display:none}
  .nav-burger{display:inline-flex;order:-1}
  .nav-tools{order:2;margin-left:auto;gap:6px}
  .nav-search{display:none}
  .brand{font-size:17px}

  /* Overlay rather than a pushed block: covers the page, scrolls on its own,
     and leaves the header visible so the close control never moves. */
  .site-drawer{
    display:block;position:fixed;inset:56px 0 0 0;z-index:65;
    background:var(--bg);border-top:1px solid var(--border);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:8px 16px calc(24px + env(safe-area-inset-bottom));
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .18s var(--ease),transform .18s var(--ease);
  }
  .site-drawer[hidden]{display:block}          /* keep it animatable */
  .site-drawer.open{transform:none;opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}

  .site-drawer .nav-search{display:flex;width:100%;margin:6px 0 14px;
    height:48px;border-radius:12px}
  .site-drawer .nav-search input{width:100%;font-size:16px}  /* 16px stops iOS zoom-on-focus */

  .site-drawer .drawer-group{padding:0;border-bottom:1px solid var(--border)}
  .site-drawer .drawer-h{margin:0;padding:14px 2px 6px;font-size:12px;font-weight:700;
    letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
  .site-drawer a{display:flex;align-items:center;min-height:48px;padding:2px;
    font-size:16px;font-weight:550;border-radius:8px}
  .site-drawer a:active{background:var(--chip)}

  /* Commercial actions pinned to the end, full width, thumb-reachable */
  .site-drawer .drawer-commerce{border-bottom:0;padding-top:18px;gap:10px}
  .site-drawer .drawer-commerce a{justify-content:center;min-height:50px;
    border:1px solid var(--border-strong);font-weight:650}
  .site-drawer .drawer-commerce a.cta{background:var(--accent);border-color:var(--accent);color:#fff}
}

/* ---------- 480px and below ---------- */
@media (max-width:480px){
  /* .nav-commerce a.cta above is (0,2,1); this has to match or the font-size:0
     that collapses the long label never applies and the button overflows. */
  .nav-commerce a.cta{padding:10px 14px;font-size:0;justify-content:center}
  .nav-commerce a.cta::after{content:"Demo";font-size:13.5px;font-weight:650;letter-spacing:0}
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .site-drawer{transition:none}
}

/* ============================================================ LEARN LESSONS
   /learn/ — "How to read the data". Scoped to .learn-toc and .lesson so
   nothing here can affect an existing page. Appended 2026-08-24. */

.learn-toc{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;
  margin:22px 0 30px;padding:0;
}
.learn-toc a{
  display:flex;align-items:center;gap:10px;min-height:52px;
  padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md,10px);
  background:var(--surface);color:var(--ink);text-decoration:none;
  font-size:14px;font-weight:600;line-height:1.3;
  transition:border-color .12s linear,box-shadow .12s linear,transform .12s linear;
}
.learn-toc a span{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:100px;
  background:var(--accent-soft,#eaf1fc);color:var(--accent-ink,#0b5bd3);
  font-size:11.5px;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.learn-toc a:hover,.learn-toc a:focus-visible{
  border-color:var(--accent);box-shadow:var(--sh-1);transform:translateY(-1px);
}

.lesson{scroll-margin-top:76px;margin:0 0 20px}
.lesson h2{margin:6px 0 14px;font-size:22px;line-height:1.25;letter-spacing:-.01em}
.lesson p{margin:0 0 12px;max-width:74ch;line-height:1.65}
.lesson p:last-child{margin-bottom:0}
.lesson-n{
  margin:0 0 2px !important;font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-ink,#0b5bd3);
}
.lesson-eg{
  border-left:3px solid var(--accent);background:var(--accent-soft,#eaf1fc);
  padding:12px 14px;border-radius:0 var(--r-sm,7px) var(--r-sm,7px) 0;
  font-size:14.5px;
}
.lesson .tbl-wrap{max-height:none;margin:4px 0 14px}
.lesson-go{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;
  margin:6px 10px 0 0;padding:8px 14px;
  border:1px solid var(--border);border-radius:100px;
  background:var(--surface);color:var(--accent-ink,#0b5bd3);
  font-size:13.5px;font-weight:650;text-decoration:none;white-space:nowrap;
  transition:border-color .12s linear,background .12s linear;
}
.lesson-go::after{content:"→";font-weight:700}
.lesson-go:hover,.lesson-go:focus-visible{border-color:var(--accent);background:var(--accent-soft,#eaf1fc)}

@media (max-width:768px){
  .learn-toc{grid-template-columns:1fr;gap:8px;margin:18px 0 24px}
  .lesson h2{font-size:19px}
  .lesson p{font-size:15px}
  .lesson-go{width:100%;justify-content:space-between;margin-right:0}
}

.learn-note{
  display:block;margin:14px 0 0;padding:12px 14px;
  border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:0 var(--r-md,10px) var(--r-md,10px) 0;
  background:var(--surface-2,var(--surface));
  font-size:14.5px;line-height:1.6;
}
.learn-note a{font-weight:650}

/* ============================================================================
   READABILITY PASS — August 2026
   The complaint this answers is "scattered". The cause was not the palette; it
   was that section headings (19px), card headings (17px) and body text
   (15.5px) sat within four points of each other, so nothing on a data-dense
   page told the eye where one idea ended and the next began — and five
   different small-text classes each picked their own size and colour.

   Two things change: heading hierarchy gets real separation, and every quiet
   annotation is pulled onto one three-step scale. Nothing here changes colour
   semantics, layout structure or component markup.
   ========================================================================== */

/* ------------------------------------------------- heading hierarchy
   The site is a stack of <section class="panel"> cards, 1,008 of them across
   180 pages, each opening with a plain <h2>. At 17px against 15.5px body text
   those headings did not announce anything, so a long page read as one
   undifferentiated wall. The fix is an accent tick and real weight — not a
   rule under every heading, which at this count would be heavier than the
   content. */
.panel > h2{
  position:relative;
  font-size:18px;line-height:1.28;font-weight:680;letter-spacing:-.022em;
  margin:0 0 14px;padding-left:14px;
  scroll-margin-top:78px;
}
.panel > h2::before{
  content:"";position:absolute;left:0;top:.28em;
  width:4px;height:.86em;border-radius:2px;background:var(--accent);
}
/* The so-what panel already uses its own eyebrow treatment. */
.sowhat > h2,.lesson > h2{padding-left:0}
.sowhat > h2::before,.lesson > h2::before{display:none}

h2.section{
  font-size:clamp(21px,2.2vw,25px);line-height:1.2;letter-spacing:-.024em;
  margin:46px 0 14px;scroll-margin-top:78px;
}
h3{font-size:16px;line-height:1.3;margin:26px 0 8px;letter-spacing:-.015em}
.panel h3:first-child{margin-top:2px}
section[id],div[id]{scroll-margin-top:78px}

/* --------------------------------------------- one scale for annotations
   .note, .chart-note, .wc-note and .vin were 12.5 / 12 / unset / 10.5px in
   three different colours. Three steps now, and 10.5px is retired — it was
   below the point where a vintage stamp is actually readable. */
.note,.interp .note{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 10px}
.chart-note,.wc-note{font-size:12.5px;line-height:1.55;color:var(--faint);margin:8px 0 0}
.wc-note{display:block;margin-top:3px}
.vin{font-size:11.5px;line-height:1.45;color:var(--faint);margin-top:5px}
.interp{margin:0 0 14px;max-width:68ch;line-height:1.65}

/* ---------------------------------------------------------- rhythm */
main.wrap{padding-bottom:64px}
.panel{margin:26px 0}
.panel + .panel{margin-top:22px}
.badge-row{margin:14px 0 22px}
.freshness{font-size:12px;padding:4px 13px;min-height:26px}
.action-bar{margin:18px 0 6px;gap:10px}

/* ------------------------------------------------------------ tables */
table.data th.num{text-align:right}
table.data th,table.data td{vertical-align:top}
table.data td:first-child{font-weight:550}
.tbl-wrap + .chart-note{margin-top:10px}

/* ------------------------------------------------------- peer cards */
.peer{border-radius:var(--r-md);padding:13px 15px;box-shadow:var(--sh-1);
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease)}
.peer:hover{border-color:var(--border-strong);box-shadow:var(--sh-2)}
.pn{font-size:14px}
.pv{font-size:11.5px;color:var(--faint)}

/* ---------------------------------------------------------- charts */
.chart svg,svg.chart{max-width:100%;height:auto}
.c-val{font-size:11.5px}
.c-label{font-size:11.5px}

/* ------------------------------------------------------ small screens */
@media (max-width:768px){
  .wrap{padding:0 16px}
  h2.section{margin:34px 0 12px}
  h3{margin:20px 0 6px}
  .panel > h2{font-size:16.5px;padding-left:12px;margin-bottom:12px}
  .panel{padding:18px 16px;margin:18px 0}
  .panel + .panel{margin-top:16px}
  .qgrid{gap:12px;margin:18px 0}
  .qcard{padding:18px 18px 42px}
  .kpi-row{gap:10px;margin:16px 0}
  .kpi{padding:14px 14px}
  .kpi .v{font-size:24px}
  table.data{font-size:13px}
  table.data th,table.data td{padding:9px 10px}
  .sowhat{padding:18px 16px}
  main.wrap{padding-bottom:44px}
}
@media (max-width:420px){
  .kpi-row{grid-template-columns:1fr 1fr}
  .kpi .v{font-size:21px}
  .kpi .l{font-size:11.5px}
}

/* One vintage line under a KPI row, in place of the same stamp repeated on
   every card. See tools/build_kpi_vintage.py. */
.vin-shared{
  margin:-6px 0 22px;font-size:12px;line-height:1.5;color:var(--faint);
}

/* .qcard reserves 46px of bottom padding for the ".go" corner link. Cards that
   have no link were left with a block of empty space under the number. */
@supports selector(:has(*)){
  .qcard:not(:has(.go)){padding-bottom:22px}
}

/* ============================================================ BETA ACCOUNT
   The sign-up panel on /workspace/. Deliberately plain: no lock icons, no
   "secure login" chrome. It is an access record, and dressing it as
   authentication would be a lie the markup shouldn't tell. */

.acct{
  border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:0 var(--r-lg) var(--r-lg) 0;background:var(--surface);
  box-shadow:var(--sh-1);padding:24px 26px;margin:22px 0 20px;
}
.acct h2{font-size:19px;margin:0 0 8px;letter-spacing:-.02em}
.acct-lede{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0 0 18px;max-width:66ch}
.acct-lede strong{color:var(--ink)}

.acct-form{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px 18px;align-items:end;margin:0 0 16px;max-width:760px;
}
.acct-row{display:flex;flex-direction:column;gap:5px;min-width:0}
.acct-row label{font-size:12.5px;font-weight:650;color:var(--muted)}
.acct-row .req{color:var(--bad);margin-left:2px}
.acct-row input,.acct-row select{
  width:100%;min-height:44px;padding:10px 12px;
  font:inherit;font-size:16px;              /* 16px stops iOS zoom-on-focus */
  color:var(--ink);background:var(--surface);
  border:1.5px solid var(--border);border-radius:var(--r-sm,9px);
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
.acct-row input:focus,.acct-row select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.acct-form .mi-btn-primary{grid-column:1/-1;justify-self:start;min-height:46px;padding:0 22px}

.acct-err{
  grid-column:1/-1;margin:0;padding:10px 13px;border-radius:var(--r-sm,9px);
  background:var(--warn-bg);color:var(--warn);border:1px solid currentColor;
  font-size:14px;font-weight:600;
}
.acct-fine{
  font-size:13px;line-height:1.6;color:var(--faint);margin:16px 0 0;max-width:74ch;
  padding-top:14px;border-top:1px solid var(--border);
}
.acct-fine strong{color:var(--muted)}

.acct .ws-actions{margin-top:14px}

@media (max-width:768px){
  .acct{padding:18px 16px;border-radius:0 var(--r-md,12px) var(--r-md,12px) 0}
  .acct h2{font-size:17.5px}
  .acct-form{grid-template-columns:1fr;gap:12px}
  .acct-form .mi-btn-primary{width:100%;justify-self:stretch;text-align:center}
}

/* .price-card is a column flexbox, so its children stretch to full width by
   default — display:inline-block on the pill does nothing against that. */
.price-pill{align-self:flex-start}
/* "Talk to us" is not a number and should not be set at $34px like one. */
.price-amt{text-wrap:balance}


/* ==================================================== MOBILE NAV CORRECTIONS
   Two defects found by rendering the built zip at 390px, not by reading CSS.

   1. THE DRAWER WAS 33px TALL.
      .site-drawer is a child of <header class="site-header">, and the
      modernisation layer gives that header `backdrop-filter`. A backdrop-filter
      (like transform and filter) makes an element a CONTAINING BLOCK for its
      position:fixed descendants. So `inset:56px 0 0 0` on the drawer resolved
      against the 56px-tall header instead of the viewport: 56 - 56 - 0 = 0,
      plus 32px padding and a 1px border = the 33px strip that shipped.
      Dropping the blur below 768px restores the viewport as the containing
      block. Phones lose a translucency effect they were paying for in
      compositing cost anyway; nothing else changes.

   2. TAP TARGETS UNDER 44px.
      WCAG 2.5.8 asks for 44x44 CSS px. The theme toggle was 34px on every page
      and the action-bar controls were ~30px on the 78 county pages. */

@media (max-width:768px){
  .site-header{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:var(--surface);
  }
  .theme-toggle{width:44px;height:44px}
  .theme-toggle svg{width:19px;height:19px}
  .action-bar{gap:8px}
  .action-bar a,.action-bar button{min-height:44px;padding:10px 16px;font-size:13.5px}
  .tbl-more button{min-height:44px;padding:10px 18px}
  .filter-actions button{min-height:44px}
  /* the search cloned into the drawer by nav.js */
  .site-drawer .nav-search{
    display:flex;align-items:center;gap:8px;width:100%;margin:4px 0 14px;
    min-height:48px;padding:0 12px;border:1.5px solid var(--border);
    border-radius:12px;background:var(--surface);position:relative;
  }
  .site-drawer .nav-search svg{width:18px;height:18px;flex:0 0 auto;color:var(--faint)}
  .site-drawer .nav-search input{
    flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
    font:inherit;font-size:16px;          /* 16px stops iOS zoom-on-focus */
    padding:12px 0;outline:none;
  }
  .site-drawer .nav-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .site-drawer .nav-kbd{display:none}
}

/* Horizontal scroll for tables that are not in a .tbl-wrap. Overflow only —
   deliberately no border, radius, shadow or height cap, so 156 existing tables
   keep the look they shipped with. See tools/build_table_scroll.py. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll > table.data{margin-top:0}


/* "Why trust this number?" — the provenance receipt on every key metric.
   Same component as details.provenance, pulled up next to the figure it
   explains and given an accent edge so it reads as attached to the number
   rather than as another panel. */
details.receipt{
  margin:10px 0 18px;border-left:3px solid var(--accent);
  border-radius:0 var(--r-md,12px) var(--r-md,12px) 0;
}
details.receipt>summary{font-weight:650;color:var(--accent-ink)}
details.receipt .prov-body dl{grid-template-columns:170px 1fr}
details.receipt .prov-body dd{font-variant-numeric:tabular-nums}
@media (max-width:768px){
  details.receipt .prov-body dl{grid-template-columns:1fr;gap:2px 0}
  details.receipt .prov-body dt{margin-top:8px}
}

/* Changelog: the update reads first, the implementation opens on demand. */
.cl-tech{margin:8px 0 0;border:0;background:none}
.cl-tech>summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:650;color:var(--accent-ink);
  padding:4px 0;min-height:32px;
}
.cl-tech>summary::-webkit-details-marker{display:none}
.cl-tech>summary::before{content:"▸";transition:transform .15s var(--ease);font-size:11px}
.cl-tech[open]>summary::before{transform:rotate(90deg)}
.cl-tech-body{
  margin-top:6px;padding:10px 12px;border-left:2px solid var(--border);
  background:var(--surface-2,var(--surface));border-radius:0 var(--r-sm,8px) var(--r-sm,8px) 0;
  font-size:13.5px;line-height:1.6;color:var(--muted);
}

/* ===================================================== HEADER SEARCH ROW
   The search used to sit inside .nav-tools, competing with four nav groups,
   a theme toggle and three commerce links for one row. Measured on the built
   homepage, "About the data" was overlapped by the search field at 1440, 1280,
   1180, 900, 860 and 769px — unclickable at every desktop width. It now has a
   row of its own. See tools/build_header_search.py. */
.header-search{
  border-top:1px solid var(--border);
  background:var(--surface);
}
.header-search .wrap{
  display:flex;align-items:center;
  padding-top:8px;padding-bottom:8px;
}
.header-search .nav-search{
  display:flex;align-items:center;gap:8px;width:100%;position:relative;
  min-height:38px;padding:0 12px;
  border:1px solid var(--border);border-radius:10px;
  background:var(--bg);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease);
}
.header-search .nav-search:focus-within{
  border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.header-search .nav-search svg{width:16px;height:16px;flex:0 0 auto;color:var(--faint)}
.header-search .nav-search input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font:inherit;font-size:14px;padding:9px 0;outline:none;
}
.header-search .nav-kbd{flex:0 0 auto}
.header-search .nav-results{top:calc(100% + 6px);left:0;right:0}

/* Below 769px the drawer already carries a copy of the search, so a second
   field here would just push the page down. */
@media (max-width:768px){
  .header-search{display:none}
}

/* The header is two rows on desktop now (nav + search), so deep links need a
   bigger offset or the heading they target lands underneath it. Mobile keeps
   the single-row offset because the search row is hidden there. */
@media (min-width:769px){
  .panel > h2,
  h2.section,
  section[id],
  div[id],
  .lesson,
  .glossary-entry{scroll-margin-top:134px}
}

/* mi-longword-wrap */
.prov-body dd,.prov-body dt,.prov-body code,.prov-body a,
.panel h2,.panel h3,.reg-row dd,.reg-row dt,
td code,dd code,p code{overflow-wrap:anywhere;word-break:normal}
@media (max-width:520px){
  .prov-body dl{grid-template-columns:1fr}
}

/* =========================================================== NAV v2 (Aug 2026)
   Two reported problems, both about being able to actually pick something.

   1. DESKTOP: the panel sits 8px below its button (.nav-panel top:calc(100% + 8px)),
      and the old script closed on `mouseleave` with no delay. Crossing that 8px
      gap left .nav-group, so the menu shut while the pointer was on its way to
      an item. The script now waits out a grace period, and the ::before strip
      below covers the gap so the pointer never leaves the group's hit area in
      the first place. Both, deliberately: the bridge handles the straight-down
      path, the timer handles diagonal paths and the tablet layout where the
      panel is position:fixed and no longer adjacent to its button.

   2. MOBILE: the drawer was a flat list of 22 links. It is now four accordion
      sections (nav.js), so the whole menu is one screen. */

.nav-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-panel{animation:mi-nav-panel-in .14s ease both}
@keyframes mi-nav-panel-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.nav-group.is-open > .nav-top{background:var(--chip);color:var(--ink)}
.nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

@media (max-width:900px){
  /* The panel is pinned to the header here, so there is no gap to bridge and a
     14px strip over the page would swallow taps on whatever sits beneath it. */
  .nav-panel::before{display:none}
}

@media (max-width:768px){
  .site-drawer button.drawer-h{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;min-height:56px;margin:0;padding:15px 4px;
    border:0;background:none;color:var(--ink);
    font:inherit;font-size:16px;font-weight:650;letter-spacing:0;text-transform:none;
    text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .site-drawer button.drawer-h:active{background:var(--chip)}
  .site-drawer button.drawer-h[aria-expanded="true"]{color:var(--accent-ink)}
  .site-drawer .drawer-caret{width:20px;height:20px;flex:0 0 auto;color:var(--faint);
    transition:transform .18s ease}
  .site-drawer button.drawer-h[aria-expanded="true"] .drawer-caret{transform:rotate(180deg)}

  .site-drawer .drawer-panel{padding:0 0 12px}
  .site-drawer .drawer-panel[hidden]{display:none}
  .site-drawer .drawer-panel a{
    min-height:48px;margin-left:3px;padding:4px 12px;
    font-size:15.5px;font-weight:500;color:var(--muted);
    border-left:2px solid var(--border);border-radius:0 8px 8px 0;
  }
  .site-drawer .drawer-panel a:active{background:var(--chip)}
  .site-drawer .drawer-panel a.is-current{
    color:var(--accent-ink);font-weight:650;background:var(--chip);border-left-color:var(--accent);
  }
  .site-drawer .drawer-commerce{padding-top:16px;border-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  .nav-panel{animation:none}
  .site-drawer .drawer-caret{transition:none}
}

/* mi-brief */
/* Weekly brief. Editorial layout on top of the existing tokens: no new colours
   beyond the two semantic ones for risk and opportunity, which have to read as
   opposites at a glance and cannot borrow the accent. */
.brief-sum{margin:0;padding-left:20px}
.brief-sum li{margin-bottom:14px;line-height:1.65}
.brief-item{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.brief-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.brief-item h3{margin:0 0 10px;font-size:17px;line-height:1.35}
.brief-num{color:var(--faint);font-variant-numeric:tabular-nums}
.brief-item p{margin:0 0 10px;line-height:1.65}
.brief-lab{font-weight:700;color:var(--ink)}
.brief-note{font-size:13px;color:var(--muted);border-left:2px solid var(--border);padding-left:10px}
.brief-links{font-size:13.5px}
.brief-cite{display:block;margin-top:6px;font-size:11.5px;color:var(--faint);line-height:1.5}
.brief-meta{border-collapse:collapse;margin-top:10px;font-size:11.5px}
.brief-meta th,.brief-meta td{border:1px solid var(--border);padding:5px 9px;text-align:left;
  font-weight:500;color:var(--muted)}
.brief-meta th{background:var(--chip);color:var(--ink);font-weight:650;white-space:nowrap}
/* table.data is built for numbers and sets white-space:nowrap. These two carry
   sentences, so they opt out and get sane column widths instead. */
table.data.brief-lob{table-layout:fixed}
table.data.brief-lob td,table.data.brief-lob th{white-space:normal;vertical-align:top}
table.data.brief-lob td:first-child,table.data.brief-lob th:first-child{width:190px}
table.data.brief-glance td,table.data.brief-glance th{white-space:normal;vertical-align:top}
table.data.brief-glance td:first-child{min-width:280px}
table.data.brief-glance td:nth-child(2),table.data.brief-glance td:nth-child(3){white-space:nowrap}
.ro-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ro h3{margin:0 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.ro ul{margin:0;padding-left:20px}
.ro li{margin-bottom:12px;line-height:1.6}
.ro-risk h3{color:#8a1c1c}
.ro-opp h3{color:#1c5e2f}
:root[data-theme="dark"] .ro-risk h3{color:#f08d8d}
:root[data-theme="dark"] .ro-opp h3{color:#7fd39b}
.brief-latest{margin:0;font-size:15px;font-weight:600}
.brief-srcs{margin:0;padding-left:22px;font-size:13.5px}
.brief-srcs li{margin-bottom:8px;line-height:1.55}
.brief-how li{margin-bottom:10px;line-height:1.6}
.brief-legal p{margin:0 0 8px;font-size:12px;line-height:1.55}
.brief-legal p:last-child{margin:0;padding-top:8px;border-top:1px solid var(--border)}
@media (max-width:720px){
  .ro-grid{grid-template-columns:1fr;gap:18px}
  table.data.brief-lob{table-layout:auto}
  table.data.brief-lob td:first-child,table.data.brief-lob th:first-child{width:auto}
}
/* end mi-brief */

/* mi-marketing */
/* Marketing Intelligence. No new colour system: everything below is the
   existing tokens, plus the two semantic score colours already used for good
   and bad elsewhere in the site. */
.mi-mode{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border);
  border-radius:10px;background:var(--chip);margin:0 0 4px}
.mi-mode button{border:0;background:none;font:inherit;font-size:13px;font-weight:650;
  color:var(--muted);padding:8px 14px;border-radius:8px;cursor:pointer;min-height:40px}
.mi-mode button[aria-pressed="true"]{background:var(--surface);color:var(--accent-ink);
  box-shadow:0 1px 2px rgba(16,32,43,.08)}
.mi-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  margin:14px 0}
.mi-filters label{display:block;font-size:11.5px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.mi-filters select,.mi-filters input{width:100%;min-height:40px;padding:8px 10px;font:inherit;
  font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--border);
  border-radius:8px}
.mi-filters select:focus,.mi-filters input:focus{outline:2px solid var(--accent);outline-offset:1px}
.mi-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.mi-actions button,.mi-actions a.mi-btn{min-height:44px;padding:10px 16px;font:inherit;
  font-size:13.5px;font-weight:650;border-radius:9px;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center}
.mi-actions button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.mi-actions button[disabled]{opacity:.55;cursor:not-allowed}
.mi-count{font-size:12.5px;color:var(--muted);align-self:center}
.mi-score{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.mi-bar{display:inline-block;width:54px;height:6px;border-radius:3px;background:var(--chip);
  position:relative;overflow:hidden}
.mi-bar i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:3px}
.mi-band{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:100px;border:1px solid var(--border)}
.mi-band.HIGH{color:var(--good);background:#eaf6ef}
.mi-band.MODERATE{color:var(--accent-ink);background:#eaf1fc}
.mi-band.LOW,.mi-band.MINIMAL{color:var(--muted);background:var(--chip)}
:root[data-theme="dark"] .mi-band.HIGH{background:rgba(46,160,90,.16)}
:root[data-theme="dark"] .mi-band.MODERATE{background:rgba(37,99,235,.18)}
table.data.mi-wrap td,table.data.mi-wrap th{white-space:normal;vertical-align:top}
table.data.mi-wrap td.num,table.data.mi-wrap th.num{white-space:nowrap;text-align:right;
  font-variant-numeric:tabular-nums}
.mi-lim{margin:0;padding-left:20px}
.mi-lim li{margin-bottom:9px;line-height:1.6}
.mi-arch{display:inline-block;font-size:11px;font-weight:650;padding:3px 9px;border-radius:100px;
  background:var(--chip);border:1px solid var(--border);color:var(--ink);white-space:nowrap}
.mi-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:14px 0}
.mi-card{border:1px solid var(--border);border-radius:12px;padding:15px 17px;background:var(--surface)}
.mi-card h3{margin:0 0 4px;font-size:15px}
.mi-card .v{font-size:22px;font-weight:800;letter-spacing:-.02em}
.mi-card .l{font-size:12px;color:var(--muted);line-height:1.5;margin-top:3px}
.mi-pol{border-bottom:1px solid var(--border);padding:16px 0}
.mi-pol:last-child{border-bottom:0}
.mi-pol h3{margin:0 0 6px;font-size:15.5px;line-height:1.35}
.mi-pol .meta{font-size:11.5px;color:var(--faint);margin:0 0 8px}
.mi-pol p{margin:0 0 8px;line-height:1.6}
.mi-pol .q{font-size:13.5px;color:var(--ink);background:var(--chip);border-radius:8px;
  padding:9px 12px;margin:8px 0 0}
.mi-st{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 8px;border-radius:100px;border:1px solid var(--border);margin-right:8px}
.mi-st.FINAL{color:var(--good);background:#eaf6ef}
.mi-st.PROPOSED{color:var(--warn);background:var(--warn-bg)}
.mi-st.GUIDANCE{color:var(--accent-ink);background:#eaf1fc}
.mi-st.ENFORCEMENT{color:var(--bad);background:#fbeef0}
.mi-st.STATUTORY{color:var(--good);background:#eaf6ef}
.mi-st.CADENCE{color:var(--accent-ink);background:#eaf1fc}
.mi-st.CURATED{color:var(--muted);background:var(--chip)}
.mi-cal{border-left:2px solid var(--border);margin:14px 0;padding-left:18px}
.mi-cal .ev{position:relative;padding:0 0 20px}
.mi-cal .ev:last-child{padding-bottom:0}
.mi-cal .ev::before{content:"";position:absolute;left:-24px;top:6px;width:9px;height:9px;
  border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.mi-cal .w{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint)}
.mi-cal h3{margin:3px 0 5px;font-size:15px}
.mi-cal p{margin:0 0 6px;line-height:1.6}
.mi-tracks{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.mi-tracks button{font:inherit;font-size:12.5px;font-weight:600;min-height:36px;padding:6px 13px;
  border-radius:100px;border:1px solid var(--border);background:var(--surface);color:var(--muted);
  cursor:pointer}
.mi-tracks button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.mi-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:14px 0}
.mi-form label{display:block;font-size:12px;font-weight:650;color:var(--ink);margin-bottom:5px}
.mi-form .hint{display:block;font-size:11px;font-weight:400;color:var(--faint);margin-top:3px}
.mi-form input,.mi-form select{width:100%;min-height:44px;padding:9px 11px;font:inherit;
  font-size:15px;border:1px solid var(--border);border-radius:9px;background:var(--surface);
  color:var(--ink)}
.mi-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:14px 0}
.mi-out .o{border:1px solid var(--border);border-radius:10px;padding:13px 15px;background:var(--surface)}
.mi-out .o .v{font-size:21px;font-weight:800;letter-spacing:-.02em}
.mi-out .o .l{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.mi-brief h3{margin:18px 0 6px;font-size:15.5px}
.mi-brief section{border-top:1px solid var(--border);padding-top:4px;margin-top:14px}
.mi-brief section:first-child{border-top:0;margin-top:0}
.mi-empty{color:var(--muted);font-size:13.5px;padding:14px 0}
.mi-xlink{margin-top:12px}
.ok{color:var(--good);font-weight:650}
.pending{color:var(--muted);font-weight:650}
.mi-note-strong{border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:10px;padding:13px 16px;margin:16px 0;background:var(--surface);font-size:13.5px;
  line-height:1.6}
@media (max-width:640px){
  .mi-mode{width:100%}
  .mi-mode button{flex:1}
  .mi-actions button,.mi-actions a.mi-btn{flex:1;justify-content:center}
}
/* end mi-marketing */

/* mi-data-trust */
/* Basis badge and claim classes, added by the 2026-08-26 data QA.
   Both are deliberately quiet: they qualify a number, they do not decorate it. */
.basis-note{font-size:12.5px;line-height:1.55;color:var(--muted);background:var(--chip);
  border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
  padding:10px 13px;margin:10px 0}
.basis-note code{font-size:11.5px}
.claim-class{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:var(--chip);border:1px solid var(--border);
  border-radius:100px;padding:2px 8px;margin-right:6px;vertical-align:middle}
/* end mi-data-trust */

/* mi-status */
/* One status vocabulary for the whole site: LIVE, BETA, PLANNED. Deliberately
   distinct from the provenance pills (live / static extract / curated /
   modeled), which describe DATA. These describe a FEATURE. */
.mi-st-label{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:2px 8px;border-radius:100px;border:1px solid var(--border);
  vertical-align:middle;white-space:nowrap}
.mi-st-label.live{color:var(--good);background:#eaf6ef}
.mi-st-label.beta{color:var(--accent-ink);background:#eaf1fc}
.mi-st-label.planned{color:var(--muted);background:var(--chip)}
:root[data-theme="dark"] .mi-st-label.live{background:rgba(46,160,90,.16)}
:root[data-theme="dark"] .mi-st-label.beta{background:rgba(37,99,235,.18)}
.mi-tip{position:relative;display:inline-block;color:var(--faint);cursor:help;font-size:13px;
  margin-left:4px}
.mi-tip-body{position:absolute;left:0;top:120%;z-index:80;display:none;width:280px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  font-size:12px;line-height:1.5;color:var(--ink);box-shadow:0 10px 28px rgba(16,32,43,.16);
  font-weight:400;text-transform:none;letter-spacing:0}
.mi-tip:hover .mi-tip-body,.mi-tip:focus .mi-tip-body{display:block}
.mi-vint{font-size:11px;font-weight:400;color:var(--faint);white-space:nowrap}
.mi-local-banner{border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;background:var(--surface);padding:14px 18px;margin:18px 0}
.mi-local-banner strong{display:block;margin-bottom:4px}
.mi-local-banner p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
/* end mi-status */

/* mi-markets */
.mk-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:18px 0}
.mk-list h3{margin:0 0 2px;font-size:14px}
.mk-list .note{margin:0 0 8px;font-size:11.5px}
.mk-ol{margin:0;padding-left:20px;font-size:13.5px}
.mk-ol li{margin-bottom:6px;line-height:1.45}
.mk-ol li span{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:6px}
.mk-dir{margin-top:8px}
/* end mi-markets */

/* mi-today */
.mk-ul{margin:0;padding-left:18px;font-size:13.5px}
.mk-ul li{margin-bottom:6px;line-height:1.45}
/* end mi-today */

/* mi-derived */
/* CMS publishes Star Ratings at the contract level only. Any carrier-level
   number on this site is a MedicareInsights enrollment-weighted aggregation of
   those official contract ratings, and says so where it is shown. */
.mi-derived{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:2px 8px;border-radius:100px;cursor:help;
  color:var(--accent-ink);background:var(--chip);border:1px solid var(--border);
  vertical-align:middle;white-space:nowrap;margin-right:8px}
.price-terms{margin:14px 0 4px;max-width:70ch;font-size:14px;line-height:1.6}
.price-terms dt{font-weight:650;color:var(--ink);margin-top:10px}
.price-terms dd{margin:2px 0 0;color:var(--muted)}
/* end mi-derived */