/* ==========================================================================
   Find Me Funders — pages beyond the homepage
   Geography, rankings, comparisons, editorial, inquiry, accounts, staff tools.
   Tokens come from main.css; nothing new is defined here that belongs there.
   ========================================================================== */

/* --- Layout --------------------------------------------------------------- */
.container--reading{ max-width: 820px; }
.container--narrow{ max-width: 680px; }

main > .container{ padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 104px); }

.sec{ margin-block: clamp(40px, 5vw, 72px); }
.sec__h{ font-size: clamp(1.32rem, 2.4vw, 1.85rem); letter-spacing:-.02em; margin-bottom: var(--s3); }
.sec__h .count{ margin-left: var(--s2); padding: 2px 10px; border-radius: var(--r-full);
  background: var(--bg-2); color: var(--ink-2); font-size: .72rem; font-weight: 800;
  vertical-align: middle; }
.sec__lede{ max-width: 68ch; color: var(--ink-2); margin-bottom: var(--s5); }

/* --- Breadcrumbs ---------------------------------------------------------- */
.crumbs{ margin-bottom: var(--s5); }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);
  list-style:none; margin:0; padding:0; font-size:.82rem; color:var(--ink-3); }
.crumbs li + li::before{ content:"/"; margin-right:var(--s2); color:var(--line-2); }
.crumbs a{ display:inline-block; padding-block:4px; color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid transparent; }
.crumbs a:hover{ color:var(--brand); border-bottom-color:currentColor; }
.crumbs [aria-current]{ color:var(--ink); font-weight:600; }

/* --- Page hero ------------------------------------------------------------ */
.phero{ margin-bottom: clamp(28px, 4vw, 48px); }
.phero h1{ font-size: clamp(1.9rem, 4.4vw, 3rem); line-height:1.08; letter-spacing:-.035em;
  margin: var(--s3) 0 var(--s4); }
.phero__lede{ max-width: 66ch; font-size: clamp(1rem, 1.4vw, 1.12rem); color: var(--ink-2); }
.phero__lede.prose p:last-child{ margin-bottom:0; }
.phero__cta{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top: var(--s6); }
.phero--split{ display:grid; gap: var(--s7); align-items:start; }
@media (min-width: 940px){ .phero--split{ grid-template-columns: minmax(0,1.35fr) minmax(320px,.9fr); } }

.eyebrow{ display:inline-flex; align-items:center; gap:var(--s2); padding:6px 12px;
  border-radius: var(--r-full); background: var(--brand-50); color: var(--brand-700);
  font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }

.byline{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4);
  margin-top: var(--s5); font-size:.83rem; color: var(--ink-3); }
.byline a{ display:inline-block; padding-block:4px; color: var(--brand); }
.byline > span{ display:inline-flex; align-items:center; gap:6px; }

/* --- Status pills --------------------------------------------------------- */
.pill{ display:inline-block; padding: 3px 10px; border-radius: var(--r-full);
  background: var(--bg-2); border:1px solid var(--line); color: var(--ink-2);
  font-size:.72rem; font-weight:700; line-height:1.5; white-space:nowrap; }
.pill--verified,.pill--high,.pill--complete,.pill--validated,.pill--matched,.pill--create{
  background: var(--ok-50); border-color:#B7E2D3; color: var(--ok); }
.pill--stale,.pill--needs-review,.pill--medium,.pill--short,.pill--reviewing,.pill--update{
  background: var(--flag-50); border-color:#F0D5AC; color: var(--flag); }
.pill--disputed,.pill--error,.pill--failed,.pill--unreachable,.pill--unverified{
  background:#FDECEC; border-color:#F3C4C4; color:#A32020; }
.pill--applied,.pill--best,.pill--new{ background: var(--brand-50); border-color: var(--brand-100);
  color: var(--brand-700); }
.pill--rolled-back,.pill--skip,.pill--closed,.pill--withdrawn,.pill--archived{
  background: var(--bg-2); color: var(--ink-3); }

.flag{ display:inline-block; padding:3px 10px; border-radius: var(--r-full);
  background: var(--flag); color:#fff; font-size:.68rem; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; }
.flag--sm{ font-size:.62rem; padding:2px 8px; }

.chiprow{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.chip--link{ display:inline-flex; align-items:center; min-height:38px; padding:var(--s2) var(--s4);
  background: var(--surface); border:1px solid var(--line-2); border-radius: var(--r-full);
  color: var(--ink-2); font-size:.85rem; font-weight:600; text-decoration:none; }
.chip--link:hover{ border-color: var(--brand); color: var(--brand); }
.chip--link.is-on{ background: var(--grad); border-color:transparent; color:#fff; }

/* --- Notices -------------------------------------------------------------- */
.notice{ display:flex; gap:var(--s3); padding: var(--s4) var(--s5); margin-block: var(--s5);
  border:1px solid var(--line); border-left-width:4px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--sh-1); }
.notice svg{ flex:none; width:20px; height:20px; margin-top:2px; }
.notice p{ margin:0; font-size:.92rem; color: var(--ink-2); }
.notice p b{ color: var(--ink); }
.notice--info{ border-left-color: var(--brand); }
.notice--info svg{ color: var(--brand); }
.notice--warn{ border-left-color: var(--flag); background: var(--flag-50); }
.notice--warn svg{ color: var(--flag); }
.notice--error{ border-left-color:#A32020; background:#FDECEC; }
.notice--error svg{ color:#A32020; }

.flashes{ display:grid; gap:var(--s2); padding-top: var(--s5); }
.flash{ padding: var(--s3) var(--s5); border-radius: var(--r-md); font-size:.9rem; font-weight:600;
  background: var(--brand-50); color: var(--brand-700); border:1px solid var(--brand-100); }
.flash--success{ background: var(--ok-50); color: var(--ok); border-color:#B7E2D3; }
.flash--error{ background:#FDECEC; color:#A32020; border-color:#F3C4C4; }
.flash--warning{ background: var(--flag-50); color: var(--flag); border-color:#F0D5AC; }

/* --- Empty states --------------------------------------------------------- */
.empty{ padding: clamp(40px, 6vw, 72px) var(--s6); text-align:center;
  background: var(--surface); border:1px dashed var(--line-2); border-radius: var(--r-lg); }
.empty h2,.empty h3{ margin-bottom: var(--s3); }
.empty p{ max-width: 54ch; margin-inline:auto; color: var(--ink-2); }
.empty .btn{ margin-top: var(--s5); }
.empty--inline{ padding: var(--s6); text-align:left; }
.empty--inline p{ margin-inline:0; margin-bottom:0; }
.empty--inline .btn{ margin-top: var(--s4); }
.filter-empty{ padding: var(--s6); text-align:center; color: var(--ink-3); }

/* --- Callouts ------------------------------------------------------------- */
.callout{ padding: clamp(24px, 3.4vw, 40px); border-radius: var(--r-lg); }
.callout h2{ font-size: 1.2rem; margin-bottom: var(--s3); }
.callout p{ max-width: 72ch; margin-bottom:0; color: var(--ink-2); }
.callout--soft{ background: var(--grad-soft); border:1px solid var(--brand-100); }

/* --- Cards ---------------------------------------------------------------- */
.grid--2{ grid-template-columns:1fr; }
@media (min-width: 760px){ .grid--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width: 1000px){ .grid--3{ grid-template-columns:repeat(3,1fr); } .grid--4{ grid-template-columns:repeat(4,1fr); } }
@media (min-width: 760px) and (max-width: 999px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); } }

.scard{ display:flex; flex-direction:column; gap:4px; padding: var(--s5);
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); text-decoration:none; transition: transform var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.scard:hover{ transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--brand-100); }
.scard__code{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  margin-bottom: var(--s2); border-radius: var(--r-sm); background: var(--grad-soft);
  color: var(--brand-700); font-size:.82rem; font-weight:800; }
.scard b{ color: var(--ink); font-size:1.02rem; }
.scard em{ font-style:normal; font-size:.83rem; color: var(--ink-3); }

.acard{ display:flex; flex-direction:column; gap:var(--s2); padding: var(--s5);
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); text-decoration:none; transition: transform var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.acard:hover{ transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--brand-100); }
.acard__kind{ align-self:flex-start; padding:3px 9px; border-radius: var(--r-full);
  background: var(--brand-50); color: var(--brand-700); font-size:.68rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; }
.acard b{ color: var(--ink); font-size:1.05rem; line-height:1.32; letter-spacing:-.015em; }
.acard em{ font-style:normal; font-size:.88rem; color: var(--ink-2); line-height:1.55; }
.acard__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);
  margin-top:auto; padding-top: var(--s3); font-size:.78rem; color: var(--ink-3); }
.acard--lg{ padding: var(--s6); }
.acard--lg b{ font-size:1.18rem; }

.lcard{ position:relative; display:flex; flex-direction:column; padding: var(--s5);
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.lcard:hover{ transform: translateY(-3px); box-shadow: var(--sh-2); }
.lcard--partner{ border-color:#EFD6B4; }
.lcard--partner > .flag{ align-self:flex-start; margin-bottom: var(--s3); }
.lcard__name{ font-size:1.1rem; letter-spacing:-.02em; margin-bottom:4px; }
.lcard__name a{ display:inline-block; padding-block:3px; color: var(--ink); text-decoration:none; }
.lcard__name a:hover{ color: var(--brand); }
.lcard__tag{ font-size:.86rem; color: var(--ink-2); margin-bottom: var(--s4); }
.lcard__facts{ display:grid; grid-template-columns:repeat(2,1fr); gap: var(--s3);
  padding-block: var(--s4); border-top:1px solid var(--line); margin-bottom: var(--s4); }
.lcard__facts dt{ font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color: var(--ink-3); margin-bottom:2px; }
.lcard__facts dd{ margin:0; font-size:.9rem; font-weight:600; color: var(--ink); }
.lcard__actions{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--s2); margin-top:auto; }

.vcard{ padding: var(--s6); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.vcard h3{ font-size:1.12rem; margin-bottom: var(--s2); }
.vcard h4{ margin-top: var(--s4); font-size:.72rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color: var(--ink-3); }
.vcard__best{ font-size:.85rem; color: var(--brand-700); font-weight:700; }

/* --- Stat box ------------------------------------------------------------- */
.statbox{ padding: var(--s6); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.statbox__h{ font-size:.74rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color: var(--ink-3); margin-bottom: var(--s4); }
.statbox dl{ margin:0; }
.statbox dl > div + div{ margin-top: var(--s4); padding-top: var(--s4); border-top:1px solid var(--line); }
.statbox dt{ font-size:.85rem; color: var(--ink-2); }
.statbox dd{ margin:2px 0 0; font-size:1.5rem; font-weight:800; letter-spacing:-.03em; color: var(--ink); }
.statbox__src{ margin:6px 0 0; font-size:.74rem; color: var(--ink-3); line-height:1.5; }
.statbox__src a{ color: var(--ink-2); }
.statbox__foot{ margin: var(--s5) 0 0; padding-top: var(--s4); border-top:1px solid var(--line);
  font-size:.76rem; color: var(--ink-3); }

/* --- Rankings ------------------------------------------------------------- */
.ranklist{ list-style:none; margin:0; padding:0; display:grid; gap: var(--s5); }
.rankrow{ display:grid; grid-template-columns: 56px minmax(0,1fr); gap: var(--s4);
  padding: var(--s5); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); }
@media (min-width: 700px){ .rankrow{ grid-template-columns: 72px minmax(0,1fr); padding: var(--s6); } }
.rankrow__num{ display:flex; align-items:center; justify-content:center; width:48px; height:48px;
  border-radius: var(--r-md); background: var(--grad); color:#fff; font-size:1.28rem; font-weight:800; }
.rankrow__head{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--s2) var(--s3); }
.rankrow__head h2{ font-size:1.22rem; letter-spacing:-.022em; margin:0; }
.rankrow__head h2 a{ color: var(--ink); text-decoration:none; }
.rankrow__head h2 a:hover{ color: var(--brand); }
.rankrow__why{ margin: var(--s3) 0 0; color: var(--ink-2); font-size:.94rem; }
.rankrow__facts{ display:grid; grid-template-columns:repeat(2,1fr); gap: var(--s3);
  margin: var(--s4) 0; padding-top: var(--s4); border-top:1px solid var(--line); }
@media (min-width: 700px){ .rankrow__facts{ grid-template-columns:repeat(4,1fr); } }
.rankrow__facts dt{ font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color: var(--ink-3); }
.rankrow__facts dd{ margin:2px 0 0; font-size:.94rem; font-weight:600; }
.rankrow__actions{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--s2); }

/* --- Comparison table ----------------------------------------------------- */
.cmp-controls{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--s4);
  margin-bottom: var(--s4); }
.cmp-controls__note{ font-size:.82rem; color: var(--ink-3); }
.switch{ display:inline-flex; align-items:center; gap: var(--s3); min-height:44px; cursor:pointer;
  font-size:.9rem; font-weight:600; }
.switch input{ appearance:none; width:44px; height:26px; border-radius: var(--r-full);
  background: var(--line-2); border:1px solid var(--field-line); position:relative; cursor:pointer;
  transition: background var(--dur) var(--ease); flex:none; }
.switch input::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease); }
.switch input:checked{ background: var(--brand); border-color: var(--brand); }
.switch input:checked::after{ transform: translateX(18px); }
.switch input:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; }

table.cmp{ width:100%; border-collapse:collapse; font-size:.9rem; }
table.cmp th, table.cmp td{ padding: var(--s3) var(--s4); text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); }
table.cmp thead th{ position:sticky; top: var(--stick-top, 0px); z-index:2;
  background: var(--bg-2); font-size:.76rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color: var(--ink-2); }
table.cmp thead th a{ color: var(--ink); font-size:.95rem; letter-spacing:-.01em;
  text-transform:none; display:inline-block; padding-block:3px; }
table.cmp tbody th{ font-weight:700; color: var(--ink-2); width: 210px; }
table.cmp tbody tr:hover{ background: var(--bg); }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td{ border-bottom:0; }
.cmp__rowhead{ width: 210px; }
.cmp__cta td{ padding-top: var(--s5); }
.cmp__cta .btn{ margin-right: var(--s2); margin-bottom: var(--s2); }
.cmp--rows tbody th{ width:auto; }
.cmp--rows .sub{ font-size:.78rem; color: var(--ink-3); }
.is-diffonly tbody tr[data-same="1"]{ display:none; }
.tnote{ margin-top: var(--s3); font-size:.8rem; color: var(--ink-3); }

.cmp-bar{ position:sticky; top: var(--stick-top, 0px); z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap: var(--s4);
  padding: var(--s3) var(--s5); margin-bottom: var(--s5);
  background: var(--ink); color:#fff; border-radius: var(--r-md); box-shadow: var(--sh-2); }
.cmp-bar__count{ font-size:.88rem; font-weight:700; }
.cmp-pick{ display:inline-flex; align-items:center; gap: var(--s2); min-height:40px;
  padding-inline: var(--s2); font-size:.82rem; font-weight:600; color: var(--ink-2); cursor:pointer; }
.cmp-pick input{ width:18px; height:18px; accent-color: var(--brand); }

/* --- Comparison builder --------------------------------------------------- */
.builder{ padding: var(--s6); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.builder__list{ display:grid; gap: var(--s2); max-height: 420px; overflow-y:auto;
  padding: var(--s2); margin-block: var(--s4);
  border:1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
@media (min-width: 760px){ .builder__list{ grid-template-columns:repeat(2,1fr); } }
.pick{ display:flex; align-items:center; gap: var(--s3); min-height:52px; padding: var(--s2) var(--s3);
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-sm);
  cursor:pointer; transition: border-color var(--dur) var(--ease); }
.pick:hover{ border-color: var(--brand); }
.pick input{ width:18px; height:18px; accent-color: var(--brand); flex:none; }
.pick__name{ font-weight:600; font-size:.9rem; }
.pick__meta{ margin-left:auto; font-size:.76rem; color: var(--ink-3); text-align:right; }
.pick.is-max input:not(:checked){ opacity:.4; pointer-events:none; }
.builder__foot{ display:flex; align-items:center; justify-content:space-between; gap: var(--s4); }
#builder-count{ font-size:.86rem; font-weight:700; color: var(--ink-2); }

/* --- Sources -------------------------------------------------------------- */
.sources{ margin-top: clamp(40px, 5vw, 72px); padding: var(--s6);
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); }
.sources__h{ font-size:1.15rem; margin-bottom: var(--s2); }
.sources__lede{ max-width: 68ch; font-size:.88rem; color: var(--ink-2); margin-bottom: var(--s5); }
.sources__list{ display:grid; gap: var(--s5); margin:0; padding-left: var(--s5); }
.source__claim{ font-weight:600; color: var(--ink); }
.source__claim code{ margin-left: var(--s2); font-size:.76rem; }
.source__ev{ margin: var(--s2) 0; padding-left: var(--s4); border-left:3px solid var(--brand-100);
  font-size:.88rem; color: var(--ink-2); font-style:italic; }
.source__meta{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--s2) var(--s3);
  margin-top: var(--s2); font-size:.78rem; color: var(--ink-3); }
.source__meta a{ display:inline-block; padding-block:3px; color: var(--brand); }

/* --- Review snapshots ----------------------------------------------------- */
.revsnap__h{ font-size:1.15rem; margin-bottom: var(--s2); }
.revsnap__note{ max-width:66ch; font-size:.86rem; color: var(--ink-2); margin-bottom: var(--s5); }
.revsnap__grid{ display:grid; gap: var(--s4); }
@media (min-width: 760px){ .revsnap__grid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } }
.revsnap__card{ padding: var(--s5); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-md); }
.revsnap__top{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--s3); }
.revsnap__score{ font-size:1.5rem; font-weight:800; letter-spacing:-.03em; color: var(--ink); }
.revsnap__score em{ font-style:normal; font-size:.8rem; font-weight:600; color: var(--ink-3); }
.revsnap__meta{ margin-top:4px; font-size:.78rem; color: var(--ink-3); }
.revsnap__warn{ margin: var(--s3) 0 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  background: var(--flag-50); color: var(--flag); font-size:.78rem; font-weight:600; }
.revsnap__note-txt{ margin: var(--s3) 0 0; font-size:.8rem; color: var(--ink-2); }
.revsnap__link{ display:inline-block; margin-top: var(--s3); padding-block:4px; font-size:.8rem; }

/* --- Editorial ------------------------------------------------------------ */
.art__head{ margin-bottom: var(--s7); }
.art__dek{ font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--ink-2); max-width: 62ch; }
.art__ai{ margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  background: var(--bg-2); font-size:.8rem; color: var(--ink-2); }
.answerbox{ padding: var(--s6); margin-bottom: var(--s7); border-radius: var(--r-lg);
  background: var(--grad-soft); border:1px solid var(--brand-100); }
.answerbox h2{ font-size:1.1rem; margin-bottom: var(--s3); }
.answerbox .prose p:last-child{ margin-bottom:0; }
.prose{ max-width: 68ch; color: var(--ink-2); line-height:1.72; }
.prose p{ margin-bottom: var(--s4); }
.prose h2{ margin: var(--s7) 0 var(--s3); font-size:1.4rem; color: var(--ink); letter-spacing:-.02em; }
.prose h3{ margin: var(--s6) 0 var(--s3); font-size:1.12rem; color: var(--ink); }
.prose a{ color: var(--brand); }
.prose ul,.prose ol{ margin: 0 0 var(--s4) var(--s5); }
.prose li{ margin-bottom: var(--s2); }
.art__body{ max-width:none; }
.art__body > *{ max-width: 68ch; }

.ticks{ list-style:none; margin:0; padding:0; display:grid; gap: var(--s3); }
.ticks li{ position:relative; padding-left: var(--s6); color: var(--ink-2); font-size:.92rem; }
.ticks li::before{ content:""; position:absolute; left:0; top:.45em; width:12px; height:7px;
  border-left:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand);
  transform: rotate(-45deg); }
/* nextsteps, not steps: main.css owns .steps as a three-column card grid for
   the homepage's how-it-works section. */
.nextsteps{ display:grid; gap: var(--s4); margin: 0 0 0 var(--s5); color: var(--ink-2); }
.nextsteps li{ padding-left: var(--s2); }
.nextsteps b{ color: var(--ink); }

.method{ padding: var(--s6); background: var(--bg-2); border-radius: var(--r-lg); }
.method__foot{ margin-top: var(--s5); padding-top: var(--s4); border-top:1px solid var(--line-2);
  font-size:.8rem; color: var(--ink-3); }
/* Named ourread, not verdict: main.css already owns .verdict for the
   homepage qualifier's inline yes/no badge, and that rule is inline-flex. */
.ourread{ padding: var(--s6); background: var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--brand); border-radius: var(--r-lg); }
.ourread .prose{ max-width:68ch; }
.ourread__foot{ margin-top: var(--s4); padding-top: var(--s4);
  border-top:1px solid var(--line); font-size:.78rem; color: var(--ink-3); max-width:68ch; }
.disclosure{ padding: var(--s6); background: var(--bg-2); border-radius: var(--r-lg); }

.endcta{ margin-top: clamp(48px, 6vw, 80px); padding: clamp(28px,4vw,48px); text-align:center;
  background: var(--grad); color:#fff; border-radius: var(--r-xl); box-shadow: var(--sh-brand); }
.endcta h2{ color:#fff; font-size: clamp(1.3rem,2.6vw,1.85rem); margin-bottom: var(--s3); }
.endcta p{ max-width:52ch; margin-inline:auto; color: rgba(255,255,255,.86); }
.endcta .btn{ margin-top: var(--s5); background:#fff; color: var(--ink); box-shadow:none; }
.endcta .btn:hover{ color: var(--ink); }
.endcta__row{ display:flex; flex-wrap:wrap; gap: var(--s3); justify-content:center; }
.endcta--quiet{ background: var(--bg-2); color: var(--ink); box-shadow:none; }
.endcta--quiet h2{ color: var(--ink); }
.endcta--quiet p{ color: var(--ink-2); }

/* --- Calculators ---------------------------------------------------------- */
.calc{ padding: var(--s6); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.calc h2{ font-size:1.22rem; margin-bottom: var(--s2); }
.calc__lede{ font-size:.88rem; color: var(--ink-2); margin-bottom: var(--s5); }
.calc__form{ display:grid; gap: var(--s3); }
@media (min-width: 560px){ .calc__form{ grid-template-columns:repeat(2,1fr); } }
.calc__out{ display:grid; gap: var(--s3); margin: var(--s5) 0 0; padding: var(--s5);
  background: var(--grad-soft); border-radius: var(--r-md); }
@media (min-width: 560px){ .calc__out{ grid-template-columns:repeat(2,1fr); } }
.calc__out dt{ font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color: var(--ink-3); }
.calc__out dd{ margin:2px 0 0; font-size:1.36rem; font-weight:800; letter-spacing:-.03em;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__note{ margin-top: var(--s4); font-size:.79rem; color: var(--ink-3); line-height:1.6; }
.calc__warn{ margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  background: var(--flag-50); color: var(--flag); font-size:.84rem; font-weight:600; }
.field__prefix{ display:flex; align-items:center; }
.field__prefix span{ display:flex; align-items:center; align-self:stretch; padding-inline: var(--s3);
  border:1px solid var(--field-line); border-right:0; border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: var(--bg-2); color: var(--ink-2); font-weight:700; }
.field__prefix input{ border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* --- Forms ---------------------------------------------------------------- */
.field textarea{ width:100%; min-width:0; padding: var(--s3) var(--s4); font: inherit;
  font-size:.92rem; color: var(--ink); background: var(--surface);
  border:1px solid var(--field-line); border-radius: var(--r-sm); resize:vertical; }
.field textarea:focus{ box-shadow:0 0 0 4px var(--brand-50); }
.field__help{ margin:6px 0 0; font-size:.78rem; color: var(--ink-3); line-height:1.5; }
.field__err{ margin:6px 0 0; font-size:.8rem; font-weight:600; color:#A32020; }
.field--error input,.field--error select,.field--error textarea{ border-color:#A32020; }
.field--search{ max-width: 420px; margin-bottom: var(--s5); }
.field__icon{ position:relative; }
.field__icon svg{ position:absolute; left: var(--s4); top:50%; transform:translateY(-50%);
  width:17px; height:17px; color: var(--ink-3); pointer-events:none; }
.field__icon input{ padding-left: 42px; }
.req{ margin-left:3px; color:#A32020; }
.field input[type=checkbox]{ width:18px; height:18px; min-height:0; accent-color: var(--brand); }
.field:has(input[type=checkbox]){ display:flex; align-items:flex-start; gap: var(--s3); }
.field:has(input[type=checkbox]) label{ order:2; margin:0; font-weight:600; color: var(--ink-2); }
.field:has(input[type=checkbox]) input{ order:1; margin-top:3px; flex:none; }

.check,.radio{ display:flex; align-items:flex-start; gap: var(--s3); min-height:44px;
  padding: var(--s3); border-radius: var(--r-sm); cursor:pointer; }
.check:hover,.radio:hover{ background: var(--bg); }
.check input,.radio input{ width:18px; height:18px; margin-top:3px; accent-color: var(--brand); flex:none; }
.check b,.radio b{ display:block; font-size:.9rem; }
.check em,.radio em{ display:block; font-style:normal; font-size:.79rem; color: var(--ink-3);
  line-height:1.5; margin-top:2px; }
.check--inline{ min-height:40px; font-size:.85rem; }
.inline-form{ display:inline-flex; align-items:center; gap: var(--s2); }
.linkbtn{ padding: 4px 0; background:none; border:0; color: var(--brand); font: inherit;
  font-size:.83rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.linkbtn:hover{ color: var(--brand-700); }

/* --- Wizard --------------------------------------------------------------- */
.wiz{ padding: clamp(24px,3.6vw,40px); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.wiz__head h1{ font-size: clamp(1.45rem,3vw,2rem); letter-spacing:-.03em; margin: var(--s3) 0 var(--s5); }
.wiz__bar{ height:6px; border-radius: var(--r-full); background: var(--bg-2); overflow:hidden;
  margin-bottom: var(--s7); }
.wiz__bar span{ display:block; height:100%; border-radius: var(--r-full); background: var(--grad);
  transition: width var(--dur-2) var(--ease); }
.wiz__foot{ display:flex; align-items:center; justify-content:space-between; gap: var(--s4);
  margin-top: var(--s6); }
.wiz__aside{ margin-top: var(--s7); padding-top: var(--s6); border-top:1px solid var(--line); }
.wiz__aside h2{ display:flex; align-items:center; gap: var(--s2); font-size:.86rem;
  text-transform:uppercase; letter-spacing:.06em; color: var(--ink-3); margin-bottom: var(--s3); }
.wiz__aside h2 svg{ width:17px; height:17px; color: var(--ok); }
.wiz__aside p{ font-size:.84rem; color: var(--ink-2); margin-bottom: var(--s3); }
.wiz__aside-2{ color: var(--ink-3) !important; }

.done{ padding: clamp(28px,4vw,48px); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.done__mark{ display:flex; align-items:center; justify-content:center; width:56px; height:56px;
  margin-bottom: var(--s5); border-radius:50%; background: var(--ok-50); color: var(--ok); }
.done__mark svg{ width:28px; height:28px; }
.done__ref{ font-size:1rem; color: var(--ink-2); }
.done__ref b{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.done__lede{ margin-top: var(--s4); color: var(--ink-2); }
.done__h{ margin: var(--s7) 0 var(--s3); font-size:1.05rem; }
.done__list{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.done__list li{ display:flex; align-items:center; justify-content:space-between; gap: var(--s4);
  padding: var(--s3) 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.done__list span{ font-size:.82rem; color: var(--ink-3); }
.done__more{ margin-top: var(--s3); font-size:.84rem; color: var(--ink-3); }
.done__next{ margin-top: var(--s6); }
.done__cta{ margin-top: var(--s7); padding: var(--s6); border-radius: var(--r-lg);
  background: var(--grad-soft); border:1px solid var(--brand-100); }
.done__cta h2{ font-size:1.1rem; margin-bottom: var(--s2); }
.done__cta p{ font-size:.9rem; color: var(--ink-2); }

/* --- Accounts ------------------------------------------------------------- */
.authbox{ padding: clamp(28px,4vw,44px); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.authbox h1{ font-size: clamp(1.4rem,2.8vw,1.9rem); letter-spacing:-.03em; margin-bottom: var(--s3); }
.authbox__lede{ color: var(--ink-2); font-size:.94rem; margin-bottom: var(--s6); }
.authbox__alt{ margin-top: var(--s5); text-align:center; font-size:.86rem; color: var(--ink-3); }
.authbox__note{ margin-top: var(--s5); padding-top: var(--s4); border-top:1px solid var(--line);
  font-size:.79rem; color: var(--ink-3); }
.authbox--wide{ max-width:none; }
.authbox ul.errorlist{ list-style:none; margin:6px 0 0; padding:0; font-size:.8rem; color:#A32020; }

.dash__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap: var(--s5); margin-bottom: var(--s7); }
.dash__head h1{ font-size: clamp(1.6rem,3.2vw,2.3rem); letter-spacing:-.032em; margin: var(--s3) 0 4px; }
.dash__sub{ color: var(--ink-3); font-size:.88rem; }
.dash__actions{ display:flex; flex-wrap:wrap; gap: var(--s2); }
.savedcol{ padding: var(--s5); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); }
.savedcol h3{ font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color: var(--ink-3); margin-bottom: var(--s3); }
.savedlist{ list-style:none; margin:0; padding:0; display:grid; gap: var(--s2); }
.savedlist li a{ display:inline-block; padding-block:4px; font-size:.9rem; font-weight:600; }

/* --- Staff tools ---------------------------------------------------------- */
.staffbar{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s5); margin-bottom: var(--s6);
  background: var(--ink); border-radius: var(--r-md); }
.staffbar a{ display:inline-block; padding-block:4px; color: var(--on-dark-2); font-size:.85rem;
  font-weight:600; text-decoration:none; }
.staffbar a:hover{ color:#fff; }
.staffbar__tag{ padding:3px 9px; border-radius: var(--r-full); background: rgba(255,255,255,.14);
  color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }

.impgrid{ display:grid; gap: var(--s6); align-items:start; }
@media (min-width: 1000px){ .impgrid{ grid-template-columns: minmax(0,1.25fr) minmax(300px,.85fr); } }
.imp{ padding: var(--s6); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.imp__tabs{ display:flex; gap: var(--s2); margin-block: var(--s5) var(--s4);
  border-bottom:1px solid var(--line); }
.imp__tab{ min-height:44px; padding: var(--s2) var(--s4); background:none; border:0;
  border-bottom:2px solid transparent; color: var(--ink-3); font: inherit; font-size:.88rem;
  font-weight:700; cursor:pointer; }
.imp__tab.is-on{ color: var(--brand); border-bottom-color: var(--brand); }
.imp__opts{ margin-block: var(--s5); padding: var(--s4); border:1px solid var(--line);
  border-radius: var(--r-md); }
.imp__opts legend{ padding-inline: var(--s2); font-size:.74rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color: var(--ink-3); }
.drop{ display:flex; flex-direction:column; align-items:center; gap:6px; padding: var(--s8) var(--s5);
  border:2px dashed var(--line-2); border-radius: var(--r-md); background: var(--bg);
  text-align:center; cursor:pointer; transition: border-color var(--dur) var(--ease); }
.drop:hover,.drop.is-over{ border-color: var(--brand); background: var(--brand-50); }
.drop svg{ width:28px; height:28px; color: var(--ink-3); }
.drop b{ font-size:.95rem; }
.drop em{ font-style:normal; font-size:.8rem; color: var(--ink-3); }
.drop input{ position:absolute; width:1px; height:1px; opacity:0; }
.drop__name{ margin-top: var(--s2); font-size:.82rem; font-weight:700; color: var(--brand); }

.impside{ padding: var(--s6); background: var(--bg-2); border-radius: var(--r-lg); }
.impside h2{ font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color: var(--ink-3); margin-bottom: var(--s4); }
.impside h2 + *{ margin-bottom: var(--s7); }
.sem > div + div{ margin-top: var(--s3); }
.sem dt{ font-size:.84rem; font-weight:700; color: var(--ink); }
.sem dd{ margin:2px 0 0; font-size:.8rem; color: var(--ink-2); line-height:1.55; }
.schemalist{ list-style:none; margin:0; padding:0; display:grid; gap: var(--s3); }
.schemalist li{ padding-bottom: var(--s3); border-bottom:1px solid var(--line-2); }
.schemalist li > a{ display:inline-block; padding-block:3px; font-weight:700; font-size:.9rem; }
.schemalist__key,.schemalist__dl{ display:block; font-size:.75rem; color: var(--ink-3); }
.schemalist__dl a{ display:inline-block; padding-block:3px; }

.batchmeter{ padding: var(--s5); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); }
.batchmeter__bar{ display:flex; height:12px; border-radius: var(--r-full); overflow:hidden;
  background: var(--bg-2); margin-bottom: var(--s4); }
.batchmeter__bar span{ display:block; }
.s-create{ background: var(--ok); } .s-update{ background: var(--brand); }
.s-skip{ background: var(--line-2); } .s-error{ background:#A32020; }
.batchmeter__key{ display:grid; grid-template-columns:repeat(4,1fr); gap: var(--s2); margin:0; }
.batchmeter__key dt{ font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color: var(--ink-3); }
.batchmeter__key dd{ margin:2px 0 0; font-size:1.28rem; font-weight:800; letter-spacing:-.03em; }
.s-create-t::before,.s-update-t::before,.s-skip-t::before,.s-error-t::before{
  content:""; display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:2px; }
.s-create-t::before{ background: var(--ok); } .s-update-t::before{ background: var(--brand); }
.s-skip-t::before{ background: var(--line-2); } .s-error-t::before{ background:#A32020; }

.batchactions{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--s3); margin-block: var(--s6); }
.batchactions__blocked{ flex:1 1 320px; padding: var(--s4); border-radius: var(--r-md);
  background: var(--flag-50); color: var(--flag); font-size:.86rem; margin:0; }
.rowfilter{ display:flex; flex-wrap:wrap; gap: var(--s2); margin-bottom: var(--s4); }
.rowtable .r-error{ background:#FDECEC; }
.rowerrs{ list-style:none; margin:0; padding:0; font-size:.82rem; color:#A32020; }
.rowerrs li + li{ margin-top:4px; }
.changed{ font-size:.78rem; color: var(--ink-3); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.82rem; }
.code{ padding: var(--s5); background: var(--ink); color:#E8EDFA; border-radius: var(--r-md);
  overflow-x:auto; font-size:.8rem; line-height:1.6; }
.code code{ background:none; color:inherit; padding:0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pager{ display:flex; align-items:center; justify-content:center; gap: var(--s4);
  margin-top: var(--s6); font-size:.86rem; color: var(--ink-3); }
.pager a{ display:inline-block; padding: var(--s2) var(--s4); border:1px solid var(--line-2);
  border-radius: var(--r-sm); }

/* --- Header additions ----------------------------------------------------- */
.header__actions{ display:flex; align-items:center; gap: var(--s3); }
.header__account{ display:none; align-items:center; gap:6px; min-height:40px; padding-inline: var(--s2);
  color: var(--ink-2); font-size:.85rem; font-weight:600; text-decoration:none; }
.header__account svg{ width:17px; height:17px; }
.header__account:hover{ color: var(--brand); }
@media (min-width: 1080px){ .header__account{ display:inline-flex; } }
.mega__grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

.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; }

/* --- Motion ---------------------------------------------------------------
   Scoped to .js: without JavaScript nothing ever adds .is-in, so an
   unscoped rule would leave half the page permanently invisible. The
   animation is an enhancement; the content is not. */
.js .reveal{ opacity:0; transform: translateY(14px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .switch input::after,.wiz__bar span{ transition:none; }
}

.done__note{ margin-top: var(--s3); font-size:.84rem; color: var(--ink-3); }

/* --- Target size (WCAG 2.2 SC 2.5.8) -------------------------------------
   Links inside a sentence are exempt, so citation links in the source list
   and the stat footnotes are left inline. Standalone controls are not
   exempt, and these are the ones that were under 24px. */
.revsnap__link{ display:inline-block; min-height:24px; padding-block:4px; }
.rankrow__head h2 a{ display:inline-block; padding-block:3px; }
table.cmp tbody th a,
table.cmp td a:not(.btn){ display:inline-block; padding-block:4px; }
.savedlist li a,
.schemalist li > a{ min-height:24px; }
.pick input,
.cmp-pick input,
.check input,
.radio input{ width:20px; height:20px; }
/* The label is the real target for these: it is full-width and at least 44px
   tall, and clicking anywhere on it toggles the box. */
.pick{ min-height:56px; }
.cmp-pick{ min-height:44px; }
.check,.radio{ min-height:48px; }
.switch input{ min-height:26px; }
/* Batch-number links are short, so width is the failing dimension. */
.cmp--rows tbody th a{ min-width:24px; text-align:center; }

/* Headings inside editorial body copy, emitted by the prose filter. */
.prose h2:first-child,.prose h3:first-child{ margin-top:0; }
.prose h4{ margin: var(--s5) 0 var(--s2); font-size:1rem; color: var(--ink); }
.prose b{ color: var(--ink); }

/* --- Locations menu -------------------------------------------------------
   51 states will not read as one list. Grouped by census region, four short
   columns, each state prefixed by its postal code so the eye can jump to a
   two-letter target instead of reading names. */
.statesmenu{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5) var(--s6); }
.statesmenu__col h4{ margin-bottom:var(--s3); font-size:.7rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); }
.statesmenu__col ul{ list-style:none; margin:0; padding:0; }
.statesmenu__col li + li{ margin-top:1px; }
.statesmenu__col a{ display:flex; align-items:center; gap:var(--s2); min-height:26px;
  padding:3px var(--s2); border-radius:6px; font-size:.84rem; color:var(--ink-2);
  text-decoration:none; }
.statesmenu__col a:hover{ background:var(--brand-50); color:var(--brand-700); }
.statesmenu__code{ flex:none; width:24px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem; font-weight:700; color:var(--ink-3); letter-spacing:.03em; }
.statesmenu__col a:hover .statesmenu__code{ color:var(--brand); }
@media (max-width: 1180px){ .statesmenu{ grid-template-columns:repeat(2,minmax(0,1fr)); } }