/* ═══════════════════════════════════════════════════════════════════════════
   Government Benefit Finder India - design system
   ---------------------------------------------------------------------------
   Mobile first. Large type. High contrast for outdoor screens on cheap phones.
   Deliberately does NOT look like a government portal: no emblem, no saffron/
   green banner, no dense navigation. Indigo carries the trust; marigold is the
   single warm accent and is never used as text on white (it fails contrast).
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  /* ground + ink */
  --ground:        #FFFFFF;
  --surface:       #F5F6FA;
  --surface-2:     #ECEEF6;
  --ink:           #14162A;
  --ink-2:         #4A4F6B;
  /* Was #757A96, which measured 4.22:1 on white and so failed AA for body
     text. It carries dates, captions and the "last verified" line - small
     grey type is exactly what an older reader loses first. Now 5.29:1. */
  --ink-3:         #656A88;
  --rule:          #DFE1EC;
  --rule-strong:   #C4C8DB;

  /* brand */
  --primary:       #312C8F;
  --primary-hover: #262180;
  --primary-ink:   #FFFFFF;
  --primary-soft:  #ECEBF8;
  --marigold:      #E4941C;
  --marigold-soft: #FDF1DE;

  /* semantic */
  --ok:            #0E7A55;
  --ok-soft:       #E2F3EC;
  --warn:          #96600A;
  --warn-soft:     #FBF0DB;
  --crit:          #B03225;
  --crit-soft:     #FBE9E6;

  --focus:         #312C8F;
  --shadow-sm:     0 1px 2px rgba(20,22,42,.06);
  --shadow:        0 2px 4px rgba(20,22,42,.05), 0 12px 28px -20px rgba(20,22,42,.35);

  --radius:        10px;
  --radius-lg:     14px;
  --container:     1120px;
  --measure:       66ch;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:        #0E0F1C;
    --surface:       #171930;
    --surface-2:     #1F2240;
    --ink:           #E9EAF5;
    --ink-2:         #A6AAC8;
    --ink-3:         #7B80A2;
    --rule:          #292D4A;
    --rule-strong:   #3A3F63;
    --primary:       #A49DFB;
    --primary-hover: #B7B1FC;
    --primary-ink:   #12132A;
    --primary-soft:  #22244C;
    --marigold:      #F0B85A;
    --marigold-soft: #33260F;
    --ok:            #46C795;   --ok-soft:   #12312A;
    --warn:          #E0A94F;   --warn-soft: #33280F;
    --crit:          #F0837A;   --crit-soft: #3A1D1B;
    --focus:         #A49DFB;
    --shadow-sm:     0 1px 2px rgba(0,0,0,.35);
    --shadow:        0 2px 4px rgba(0,0,0,.3), 0 12px 28px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#0E0F1C; --surface:#171930; --surface-2:#1F2240;
  --ink:#E9EAF5; --ink-2:#A6AAC8; --ink-3:#7B80A2;
  --rule:#292D4A; --rule-strong:#3A3F63;
  --primary:#A49DFB; --primary-hover:#B7B1FC; --primary-ink:#12132A; --primary-soft:#22244C;
  --marigold:#F0B85A; --marigold-soft:#33260F;
  --ok:#46C795; --ok-soft:#12312A; --warn:#E0A94F; --warn-soft:#33280F;
  --crit:#F0837A; --crit-soft:#3A1D1B; --focus:#A49DFB;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 2px 4px rgba(0,0,0,.3), 0 12px 28px -20px rgba(0,0,0,.8);
}

/* ── base ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Reader-controlled text size.
   --------------------------------------------------------------------------
   Every length that should grow with it is expressed in rem, and this one
   multiplier moves them all together. A reader who finds the page small can
   press A+ in the header instead of hunting through a browser menu they may
   not know exists - which, for the audience this site is for, is the
   difference between using it and giving up on it. */
:root{ --type-scale: 1; }
:root[data-text-size="large"]{ --type-scale: 1.15; }
:root[data-text-size="larger"]{ --type-scale: 1.32; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Mukta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:calc(17px * var(--type-scale));
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:768px){ body{font-size:calc(17.5px * var(--type-scale))} }

h1,h2,h3,h4{font-family:"Gabarito","Mukta",system-ui,sans-serif;line-height:1.14;
  letter-spacing:-.015em;text-wrap:balance;margin:0 0 .5em}
h1{font-size:clamp(2rem,6.4vw,3.15rem);font-weight:700}
h2{font-size:clamp(1.4rem,3.6vw,1.9rem);font-weight:600}
h3{font-size:1.16rem;font-weight:600}
p{margin:0 0 1em}
a{color:var(--primary);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--primary-hover)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
img,svg{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}
::selection{background:var(--primary-soft);color:var(--ink)}

.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.measure{max-width:var(--measure)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--primary);
  color:var(--primary-ink);padding:12px 18px;z-index:100;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ── header ──────────────────────────────────────────────────────────────── */
.site-header{border-bottom:1px solid var(--rule);background:var(--ground);
  position:sticky;top:0;z-index:40}
.site-header .bar{display:flex;align-items:center;gap:16px;
  min-height:64px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-family:"Gabarito",sans-serif;font-weight:700;font-size:1.03rem;letter-spacing:-.01em}
.brand:hover{color:var(--ink)}
.brand .mark{width:30px;height:30px;flex:none}
.brand .sub{display:block;font-family:"Mukta",sans-serif;font-weight:400;
  font-size:11.5px;color:var(--ink-3);letter-spacing:.02em;line-height:1.2}
.nav{display:none;gap:22px;align-items:center}
@media (min-width:880px){ .nav{display:flex} }
.nav a{color:var(--ink-2);text-decoration:none;font-size:15.5px;font-weight:500}
.nav a:hover{color:var(--primary)}

/* independence strip - the first thing under the header, on every page */
.independence{background:var(--surface);border-bottom:1px solid var(--rule);
  font-size:13.5px;color:var(--ink-2);padding:8px 0;line-height:1.45}
.independence b{color:var(--ink);font-weight:600}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:"Gabarito",sans-serif;font-weight:600;font-size:1.06rem;
  padding:15px 26px;border-radius:var(--radius);border:2px solid transparent;
  text-decoration:none;cursor:pointer;min-height:52px;
  transition:background-color .12s ease, border-color .12s ease;
}
.btn-primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);
  color:var(--primary-ink)}
.btn-secondary{background:var(--ground);color:var(--primary);border-color:var(--rule-strong)}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}
.btn-lg{font-size:1.18rem;padding:18px 34px;min-height:60px;width:100%}
@media (min-width:560px){ .btn-lg{width:auto} }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{padding:44px 0 8px}
@media (min-width:768px){ .hero{padding:72px 0 16px} }
.hero h1{max-width:15ch}
.hero h1 .accent{
  /* Sits below the baseline so it reads as a highlighter stroke rather than a
     line through the glyphs. box-decoration-break keeps it consistent when the
     span wraps across lines. */
  background-image:linear-gradient(transparent 83%, var(--marigold) 83%,
                                   var(--marigold) 96%, transparent 96%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding:0 .04em;
}
.hero .sub{font-size:1.16rem;color:var(--ink-2);max-width:44ch;margin-bottom:28px}
@media (min-width:768px){ .hero .sub{font-size:1.28rem} }
.hero-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
@media (min-width:560px){ .hero-actions{flex-direction:row;align-items:center} }

.hero-grid{display:grid;gap:32px;grid-template-columns:1fr;align-items:start}
@media (min-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:56px}
}

/* The reassurance panel. Real content, not filler: it answers the four things
   a first-time visitor is actually wondering before they click. */
.hero-panel{
  border:1px solid var(--rule);border-radius:var(--radius-lg);
  background:var(--surface);padding:20px 22px;box-shadow:var(--shadow-sm);
}
@media (min-width:980px){ .hero-panel{margin-top:8px} }
.hero-panel h2{font-family:"Mukta",sans-serif;font-size:.82rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.hero-panel ul{list-style:none;margin:0 0 16px;padding:0;
  display:flex;flex-direction:column;gap:11px}
.hero-panel li{display:grid;grid-template-columns:20px 1fr;gap:10px;
  font-size:15.4px;line-height:1.42;color:var(--ink)}
.hero-panel li span{color:var(--ink-2);display:block;font-size:13.8px;margin-top:1px}
.hero-panel .foot{margin:0;padding-top:14px;border-top:1px solid var(--rule);
  font-size:13.5px;color:var(--ink-2)}
.tick{width:18px;height:18px;flex:none;color:var(--ok);margin-top:3px}

/* ── entry point cards ───────────────────────────────────────────────────── */
.section{padding:38px 0}
@media (min-width:768px){ .section{padding:54px 0} }
.section-title{font-size:.83rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;
  font-family:"Mukta",sans-serif}
.cards{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:600px){ .cards{grid-template-columns:1fr 1fr} }
@media (min-width:960px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{
  display:flex;flex-direction:column;gap:3px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--ground);padding:17px 18px;text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:border-color .12s ease, transform .12s ease;
}
.card:hover{border-color:var(--primary);color:var(--ink);transform:translateY(-1px)}
.card b{font-family:"Gabarito",sans-serif;font-size:1.05rem;font-weight:600}
.card span{font-size:14.5px;color:var(--ink-2)}

/* ── how it works ────────────────────────────────────────────────────────── */
.steps{display:grid;gap:20px;grid-template-columns:1fr;counter-reset:step}
@media (min-width:760px){ .steps{grid-template-columns:repeat(3,1fr);gap:28px} }
.steps .step{padding-top:14px;border-top:3px solid var(--marigold);
  counter-increment:step}
.steps .step::before{
  content:"Step " counter(step);
  display:block;font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;
}
.steps .step h3{margin-bottom:5px}
.steps .step p{font-size:15.2px;color:var(--ink-2);margin:0}

/* ── trust panel ─────────────────────────────────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:24px}
@media (min-width:768px){ .panel{padding:30px 34px} }
.panel h2{margin-bottom:14px}
.panel ul{margin:0;padding-left:1.1em}
.panel li{margin-bottom:9px;color:var(--ink-2)}
.panel li b{color:var(--ink)}

/* ── prose (legal pages) ─────────────────────────────────────────────────── */
.prose{max-width:var(--measure)}
.prose h2{margin-top:2em;font-size:1.32rem}
.prose h3{margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.25em;margin-bottom:1em}
.prose li{margin-bottom:.45em}
.prose table{border-collapse:collapse;width:100%;font-size:15px;margin-bottom:1.2em}
.prose th,.prose td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule)}
.prose th{font-weight:600;background:var(--surface)}
.prose blockquote{margin:0 0 1em;padding:14px 18px;background:var(--surface);
  border-left:3px solid var(--marigold);border-radius:0 var(--radius) var(--radius) 0}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{font-family:ui-monospace,"Cascadia Code",Menlo,monospace;font-size:.88em;
  background:var(--surface-2);padding:1px 5px;border-radius:4px}
.page-head{padding:34px 0 10px;border-bottom:1px solid var(--rule);margin-bottom:30px}
.page-head p{color:var(--ink-2);margin:0;max-width:var(--measure)}
.updated{font-size:13.5px;color:var(--ink-3);margin-top:8px}

/* ── ad slot placeholder (Phase 8 activates; the box reserves the space) ─── */
.ad-slot{margin:28px 0;text-align:center}
.ad-slot .label{font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px}
.ad-slot .box{border:1px dashed var(--rule-strong);border-radius:var(--radius);
  min-height:90px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);font-size:13px;background:var(--surface)}

/* ── footer ──────────────────────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--rule);background:var(--surface);
  margin-top:56px;padding:34px 0 44px}
.footer-grid{display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:720px){ .footer-grid{grid-template-columns:1.6fr 1fr 1fr} }
.site-footer h4{font-family:"Mukta",sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:7px}
.site-footer a{color:var(--ink-2);text-decoration:none;font-size:15px}
.site-footer a:hover{color:var(--primary);text-decoration:underline}
.disclaimer-block{font-size:14px;color:var(--ink-2);line-height:1.55;max-width:52ch}
.disclaimer-block b{color:var(--ink)}
.footer-bottom{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:13.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 18px;
  justify-content:space-between}

/* ── notices ─────────────────────────────────────────────────────────────── */
.notice{border:1px solid var(--rule);border-left:3px solid var(--warn);
  background:var(--warn-soft);border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 16px;font-size:14.5px;color:var(--ink);margin-bottom:22px}
.notice b{display:block;margin-bottom:3px}

/* The "not yet checked by a person" notice. Given its own colour rather than
   the warning treatment: it is not a caveat about the scheme, it is a
   statement about how far WE have got with it, and the two should not look
   alike. Indigo, the site's own voice. */
.notice-tier{border-left-color:var(--primary);background:var(--primary-soft)}
.notice-tier b{color:var(--primary)}

.center-narrow{max-width:38rem;margin:0 auto;text-align:center;padding:60px 0 30px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── scheme cards and listing ─────────────────────────────────────────────── */
.scheme-grid{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:30px}
@media (min-width:820px){ .scheme-grid{grid-template-columns:1fr 1fr} }
.scheme-card{
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--ground);
  padding:19px 20px;display:flex;flex-direction:column;gap:9px;
  box-shadow:var(--shadow-sm);
}
.scheme-card h3{margin:0;font-size:1.1rem;line-height:1.25}
.scheme-card h3 a{text-decoration:none;color:var(--ink)}
.scheme-card h3 a:hover{color:var(--primary);text-decoration:underline}
.sc-dept{margin:3px 0 0;font-size:13.5px;color:var(--ink-3)}
.sc-desc{margin:0;font-size:15.3px;color:var(--ink-2)}
.sc-benefit{margin:0;font-size:15.5px;font-weight:600}
.sc-benefit .label{display:block;font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sc-benefit .unit{font-weight:400;color:var(--ink-2);font-size:14px}
.sc-foot{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  justify-content:space-between;margin-top:auto;padding-top:11px;
  border-top:1px solid var(--rule)}
.verified{font-size:13px;color:var(--ok);display:inline-flex;align-items:center;gap:6px}
.verified::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.sc-more{font-size:14.5px;font-weight:600;text-decoration:none}
.sc-more:hover{text-decoration:underline}
.pager{display:flex;gap:18px;align-items:center;justify-content:center;
  padding:20px 0;font-size:15px}

/* ── scheme detail ────────────────────────────────────────────────────────── */
.detail{max-width:820px}
.crumbs{font-size:13.5px;color:var(--ink-3);padding:20px 0 0;
  display:flex;flex-wrap:wrap;gap:7px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.detail-head{padding:16px 0 26px;border-bottom:1px solid var(--rule);margin-bottom:28px}
.kicker{font-size:13.5px;color:var(--ink-3);margin:0 0 8px;letter-spacing:.01em}
.detail-head h1{font-size:clamp(1.8rem,5vw,2.5rem);margin-bottom:12px}
.lede{font-size:1.13rem;color:var(--ink-2);max-width:60ch;margin-bottom:20px}
.trust-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.tb-item{border:1px solid var(--rule);background:var(--surface);
  border-radius:8px;padding:8px 13px;font-size:14px;line-height:1.3}
.tb-item b{display:block;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.detail-actions{display:flex;flex-wrap:wrap;gap:11px}

.detail-body section{padding:0 0 30px;margin-bottom:4px}
.detail-body h2{font-size:1.35rem;margin-bottom:12px;padding-top:6px}
.detail-body h3{font-size:1rem;margin:22px 0 8px}
.detail-body p{max-width:64ch}
.benefit-figure{font-family:"Gabarito",sans-serif;font-size:1.6rem;font-weight:700;
  color:var(--primary);margin-bottom:8px;line-height:1.15}
.benefit-figure span{display:block;font-family:"Mukta",sans-serif;font-size:14px;
  font-weight:400;color:var(--ink-3);letter-spacing:.02em}

.criteria-list{list-style:none;margin:0 0 18px;padding:0;
  display:flex;flex-direction:column;gap:12px}
.criteria-list li{display:grid;grid-template-columns:22px 1fr;gap:11px;
  font-size:15.8px;line-height:1.45}
.c-mark{width:18px;height:18px;border-radius:50%;margin-top:3px;flex:none;
  border:2px solid var(--ok);position:relative}
.c-mark.soft{border-color:var(--rule-strong)}
.c-mark::after{content:"";position:absolute;left:3px;top:5px;width:8px;height:4px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);
  transform:rotate(-45deg)}
.c-mark.soft::after{border-color:var(--ink-3)}
.c-soft{display:block;font-size:13.3px;color:var(--ink-3);font-style:normal}
.c-quote{margin-top:6px}
.c-quote summary{font-size:13.2px;color:var(--ink-2);cursor:pointer;
  display:inline-block;padding:2px 0}
.c-quote summary:hover{color:var(--primary)}
.c-quote blockquote{margin:8px 0;padding:11px 14px;background:var(--surface);
  border-left:3px solid var(--rule-strong);border-radius:0 6px 6px 0;
  font-size:14px;color:var(--ink-2)}
.c-quote a{font-size:13.2px}
.notes-list{padding-left:1.2em;max-width:64ch}
.notes-list li{margin-bottom:8px;color:var(--ink-2);font-size:15.4px}
.micro-disclaimer{font-size:14px;color:var(--ink-3);border-top:1px dashed var(--rule);
  padding-top:12px;max-width:64ch}
.gap{color:var(--ink-2);background:var(--surface);border:1px dashed var(--rule-strong);
  border-radius:var(--radius);padding:13px 15px;font-size:15px}
.modes{font-size:15px;color:var(--ink-2)}
.source-block,.report-block,.related-block{background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:20px 22px;margin-bottom:22px}
.source-block h2,.report-block h2,.related-block h2{margin-top:0;font-size:1.15rem}

/* Related schemes. Two columns on a wide screen, one on a phone. Each row is
   a link, a department and a clipped summary - enough to tell whether the
   scheme is worth a click without pretending to be the page itself. */
.related-sub{font-size:14px;color:var(--ink-3);margin:0 0 14px}
.related-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:720px){.related-list{grid-template-columns:1fr 1fr;gap:14px 26px}}
.related-list li{display:flex;flex-direction:column;gap:3px;
  padding-bottom:12px;border-bottom:1px solid var(--rule)}
.related-list li:last-child{border-bottom:0;padding-bottom:0}
@media (min-width:720px){
  .related-list li:nth-last-child(2):nth-child(odd){border-bottom:0;padding-bottom:0}
}
.related-list a{font-weight:600;text-decoration:none;color:var(--primary);
  font-size:15.5px;line-height:1.35}
.related-list a:hover{text-decoration:underline}
.rl-dept{font-size:12.5px;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.03em}
.rl-desc{font-size:14px;color:var(--ink-2);line-height:1.45}
.cats{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.cats a{font-size:13.5px;text-decoration:none;border:1px solid var(--rule-strong);
  border-radius:20px;padding:4px 12px;color:var(--ink-2);background:var(--ground)}
.cats a:hover{border-color:var(--primary);color:var(--primary)}
.page-disclaimer{font-size:13.5px;color:var(--ink-3);border-top:1px solid var(--rule);
  padding-top:18px;margin-top:8px;max-width:70ch}

/* ── questionnaire ────────────────────────────────────────────────────────── */
.quiz-wrap{max-width:720px;padding-top:26px;padding-bottom:40px}
.quiz-head h1{font-size:clamp(1.7rem,4.6vw,2.3rem);margin-bottom:10px}
.quiz-sub{color:var(--ink-2);font-size:1.02rem;max-width:56ch;margin-bottom:20px}
.progress{margin-bottom:26px}
.progress-bar{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.progress-bar span{display:block;height:100%;background:var(--primary);
  border-radius:99px;transition:width .2s ease;width:0}
.progress-text{margin:7px 0 0;font-size:13px;color:var(--ink-3);
  letter-spacing:.03em;font-variant-numeric:tabular-nums}

.step{border:0;margin:0;padding:0}
.step[hidden]{display:none}
.step legend{padding:0;margin-bottom:20px;display:block;width:100%}
.step-title{display:block;font-family:"Gabarito",sans-serif;font-weight:600;
  font-size:1.32rem;letter-spacing:-.01em;outline:none}
.step-blurb{display:block;font-size:15px;color:var(--ink-2);margin-top:4px}

.q{margin-bottom:26px}
.q[hidden]{display:none}
.q-label{display:block;font-weight:600;font-size:1.03rem;margin-bottom:4px}
.q-optional{font-weight:400;font-size:12.5px;color:var(--ink-3);
  border:1px solid var(--rule);border-radius:20px;padding:1px 9px;margin-left:8px;
  vertical-align:2px}
.q-help{font-size:14.2px;color:var(--ink-2);margin:0 0 10px;max-width:56ch}
.q-input{font:inherit;font-size:1.05rem;padding:13px 15px;border-radius:var(--radius);
  border:2px solid var(--rule-strong);background:var(--ground);color:var(--ink);
  width:100%;max-width:220px}
.q-input:focus{border-color:var(--primary);outline:none}

.q-choices{display:flex;flex-wrap:wrap;gap:9px;margin-top:9px}
.q-choices.stack{flex-direction:column;align-items:flex-start}
.chip-choice{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:2px solid var(--rule-strong);border-radius:var(--radius);
  background:var(--ground);padding:11px 15px;font-size:15.5px;line-height:1.3;
  min-height:48px;transition:border-color .12s ease,background-color .12s ease;
}
.chip-choice:hover{border-color:var(--primary)}
.chip-choice input{width:19px;height:19px;accent-color:var(--primary);flex:none;margin:0}
.chip-choice:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.chip-choice:focus-within{outline:3px solid var(--focus);outline-offset:2px}

.quiz-nav{display:flex;flex-wrap:wrap;gap:11px;align-items:center;
  padding-top:12px;border-top:1px solid var(--rule);margin-top:8px}
.quiz-nav .btn-lg{width:auto;flex:1 1 220px}
.quiz-privacy{font-size:13.5px;color:var(--ink-3);margin-top:20px;max-width:60ch}

/* ── results ──────────────────────────────────────────────────────────────── */
.results-wrap{max-width:840px;padding-top:26px}
.results-head{padding-bottom:24px;border-bottom:1px solid var(--rule);margin-bottom:26px}
.results-head h1{font-size:clamp(1.65rem,4.6vw,2.4rem);margin-bottom:12px;max-width:20ch}
.results-sub{font-size:1.05rem;color:var(--ink-2);max-width:60ch}
.results-meta{font-size:13.5px;color:var(--ink-3);margin-bottom:18px}
.results-actions{display:flex;flex-wrap:wrap;gap:10px}

.results-list{display:flex;flex-direction:column;gap:16px;margin-bottom:30px}
.result-card{border:1px solid var(--rule);border-radius:var(--radius-lg);
  background:var(--ground);padding:21px 22px;box-shadow:var(--shadow-sm)}
.rc-top{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.rc-title h2{font-size:1.2rem;margin:0 0 3px;line-height:1.25}
.rc-title h2 a{text-decoration:none;color:var(--ink)}
.rc-title h2 a:hover{color:var(--primary);text-decoration:underline}
.rc-dept{margin:0;font-size:13.4px;color:var(--ink-3)}
.rc-score{flex:none;text-align:center;border:1px solid var(--rule);
  border-radius:var(--radius);padding:7px 13px;background:var(--surface);min-width:74px}
.rc-score b{display:block;font-family:"Gabarito",sans-serif;font-size:1.3rem;
  font-weight:700;color:var(--primary);line-height:1;font-variant-numeric:tabular-nums}
.rc-score span{display:block;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.rc-desc{margin:13px 0 0;font-size:15.4px;color:var(--ink-2)}
.rc-benefit{margin:13px 0 0;font-size:15.8px;font-weight:600}
.rc-benefit .label{display:block;font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.rc-benefit .unit{font-weight:400;color:var(--ink-2);font-size:14px}
.rc-benefit .subject{display:block;font-weight:400;font-size:13px;color:var(--ink-3)}
.rc-caveat{margin:13px 0 0;font-size:14.2px;color:var(--ink);background:var(--warn-soft);
  border-left:3px solid var(--warn);border-radius:0 8px 8px 0;padding:11px 14px}

.rc-why{margin-top:17px;padding-top:15px;border-top:1px solid var(--rule)}
.rc-why h3{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px;font-family:"Mukta",sans-serif}
.why-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.why-list li{display:grid;grid-template-columns:20px 1fr;gap:9px;font-size:15.3px;
  line-height:1.42}
.why-list li span{font-weight:700;text-align:center}
.why-list li.met span{color:var(--ok)}
.why-list li.unknown{color:var(--ink-2)}
.why-list li.unknown span{color:var(--warn)}
.rc-gates{margin:12px 0 0;font-size:13.6px;color:var(--ink-3)}

.rc-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between;margin-top:17px;padding-top:14px;
  border-top:1px solid var(--rule)}
.rc-buttons{display:flex;flex-wrap:wrap;gap:9px}
.rc-buttons .btn{font-size:.97rem;padding:11px 18px;min-height:44px}

.score-note{margin-bottom:24px}
.score-note h2{font-size:1.15rem;margin-top:0}
.score-note p{font-size:15px;color:var(--ink-2);max-width:66ch}
.score-note b{color:var(--ink)}

/* ── browse layout, filters ───────────────────────────────────────────────── */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.browse-layout{display:grid;gap:26px;grid-template-columns:1fr;align-items:start}
@media (min-width:940px){ .browse-layout{grid-template-columns:250px minmax(0,1fr);gap:36px} }
.browse-results{min-width:0}

.search-form{display:flex;gap:8px;margin-bottom:20px}
.search-form.wide{max-width:640px;margin-bottom:26px}
.search-form input[type=search]{flex:1;min-width:0;font:inherit;font-size:15.5px;
  padding:11px 14px;border-radius:var(--radius);border:2px solid var(--rule-strong);
  background:var(--ground);color:var(--ink)}
.search-form input[type=search]:focus{border-color:var(--primary);outline:none}
.search-form .btn{padding:11px 18px;min-height:0;font-size:.97rem}

.active-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.pill-clear{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  text-decoration:none;border:1px solid var(--primary);color:var(--primary);
  background:var(--primary-soft);border-radius:20px;padding:4px 12px}
.pill-clear:hover{background:var(--primary);color:var(--primary-ink)}
.pill-clear.all{border-color:var(--rule-strong);color:var(--ink-2);background:none}

.filter-group{margin-bottom:22px}
.filter-group h3{font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 9px;
  font-family:"Mukta",sans-serif}
.filter-group ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:1px}
.filter-group a{display:flex;justify-content:space-between;gap:10px;
  text-decoration:none;color:var(--ink-2);font-size:14.8px;padding:5px 8px;
  border-radius:6px;line-height:1.35}
.filter-group a:hover{background:var(--surface);color:var(--primary)}
.filter-group a.on{background:var(--primary-soft);color:var(--primary);font-weight:600}
.filter-group .n{color:var(--ink-3);font-size:13px;font-variant-numeric:tabular-nums}
@media (max-width:939px){
  .filters{border:1px solid var(--rule);border-radius:var(--radius-lg);
    padding:18px;background:var(--surface)}
  .filter-group ul{flex-direction:row;flex-wrap:wrap;gap:6px}
  .filter-group a{border:1px solid var(--rule);background:var(--ground);padding:5px 11px}
}

/* ── category and state indexes ───────────────────────────────────────────── */
.cat-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:600px){ .cat-grid{grid-template-columns:1fr 1fr} }
@media (min-width:960px){ .cat-grid{grid-template-columns:repeat(3,1fr)} }
.cat-intro{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:26px;max-width:70ch}
.cat-intro p:last-child{margin-bottom:0}

.state-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.state-link{display:flex;justify-content:space-between;gap:10px;align-items:center;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--ground);
  padding:12px 15px;text-decoration:none;color:var(--ink);font-size:15.3px}
.state-link:hover{border-color:var(--primary);color:var(--primary)}
.state-link .n{font-size:12.5px;color:var(--ink-3);background:var(--surface-2);
  border-radius:20px;padding:1px 8px;font-variant-numeric:tabular-nums}

/* ── report form ──────────────────────────────────────────────────────────── */
.q-textarea{font:inherit;font-size:1rem;padding:12px 14px;border-radius:var(--radius);
  border:2px solid var(--rule-strong);background:var(--ground);color:var(--ink);
  width:100%;resize:vertical;line-height:1.5}
.q-textarea:focus{border-color:var(--primary);outline:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── language switcher ────────────────────────────────────────────────────── */
.lang-switch{margin-left:auto;display:flex;align-items:center;gap:6px}
.lang-switch select{
  font:inherit;font-size:14.5px;padding:7px 10px;border-radius:8px;
  border:1px solid var(--rule-strong);background:var(--ground);color:var(--ink);
  cursor:pointer;max-width:150px;
}
.lang-switch select:focus{border-color:var(--primary);outline:2px solid var(--focus);
  outline-offset:1px}
.lang-go{font:inherit;font-size:13.5px;padding:7px 11px;border-radius:8px;
  border:1px solid var(--rule-strong);background:var(--ground);
  color:var(--ink);cursor:pointer}
.lang-go[hidden]{display:none}
@media (max-width:879px){
  .site-header .bar{gap:10px}
  .lang-switch select{font-size:14px;padding:6px 8px;max-width:120px}
}
.mt-badge{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--warn-soft);border:1px solid var(--rule);
  border-left:3px solid var(--warn);border-radius:0 8px 8px 0;
  padding:9px 13px;font-size:13.6px;color:var(--ink);margin:0 0 18px;
}
.mt-badge a{font-weight:600}

/* ═══════════════════════════════════════════════════════════════════════════
   Illustrations
   ---------------------------------------------------------------------------
   Every drawing is inline SVG using the palette's own variables, so it follows
   the light and dark themes rather than sitting on a white square. All of them
   together weigh less than one small photograph, which matters: a slow page
   loses both search ranking and advertising views.

   Decorative throughout - each carries aria-hidden and sits beside a heading
   that already says what the page is.
   ═════════════════════════════════════════════════════════════════════════ */
.hero-art{display:none}
@media (min-width:900px){
  .hero-art{display:block;grid-column:1/-1;order:3;margin-top:8px}
  .hero-illo{width:100%;max-width:420px;height:auto}
}
@media (min-width:1120px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(280px,.7fr)}
  .hero-art{grid-column:auto;order:2;margin-top:0;align-self:center}
}

.cat-illo{width:100%;height:auto;display:block}

/* The line and fill weights for every category drawing, defined once here
   rather than repeated inside each of the twenty-one files. On the category
   index that saved twenty duplicate copies of the same rules. */
.cat-illo .ink{stroke:var(--primary);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
.cat-illo .fill{fill:var(--primary-soft)}
.cat-illo .warm{fill:var(--marigold)}
.cat-illo .warmsoft{fill:var(--marigold-soft)}
.cat-illo .ground{fill:var(--surface-2)}

/* A category card leads with its picture, so the grid can be scanned by shape
   before it is read. */
.card-illo{display:flex;flex-direction:column;gap:10px}
.card-art{display:block;width:76px}
.card-art .cat-illo{width:76px}

/* A category page: the drawing sits beside the heading on a wide screen and
   above it on a phone, where horizontal space is worth more than decoration. */
.page-head.with-art{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.page-head.with-art .ph-art{width:96px;flex:0 0 auto}
@media (min-width:720px){
  .page-head.with-art{flex-direction:row;align-items:center;gap:26px}
  .page-head.with-art .ph-art{width:132px}
  .page-head.with-art .ph-text{flex:1 1 auto}
}

/* On a scheme page the drawing is a quiet marker, not a picture: small, beside
   the department line, and never competing with the scheme's own name. */
.detail-illo{width:64px;flex:0 0 auto}
@media (min-width:720px){.detail-illo{width:88px}}

/* Respect a reader who has asked their system for less motion; nothing here
   animates, but the rule keeps that true if a future drawing does. */
@media (prefers-reduced-motion:reduce){
  .cat-illo *,.hero-illo *{animation:none!important;transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   The text-size control
   ═════════════════════════════════════════════════════════════════════════ */
.text-size{display:flex;align-items:center;gap:2px;margin-inline-start:10px}
.text-size button{
  min-width:44px;min-height:44px;                 /* a thumb, not a cursor */
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule-strong);background:var(--ground);
  color:var(--ink-2);border-radius:8px;cursor:pointer;
  font-family:inherit;line-height:1;padding:0 6px}
.text-size button:first-child{font-size:13px}
.text-size button:nth-child(2){font-size:16px}
.text-size button:last-child{font-size:19px}
.text-size button:hover{border-color:var(--primary);color:var(--primary)}
.text-size button[aria-pressed="true"]{
  background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.text-size button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Touch targets. A link that is comfortable with a mouse can be a struggle
   with an older hand on a bus, so every control the site owns gets at least
   44 by 44 - the size Apple and the WCAG guidance both settle on. */
.btn,.nav a,.chip-choice,.state-link,.sc-more,.pager a{min-height:44px}
.btn{display:inline-flex;align-items:center;justify-content:center}
.chip-choice{display:inline-flex;align-items:center}

/* Focus must be visible for anyone navigating by keyboard, including readers
   who cannot use a mouse steadily. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}

/* The sidebar unit follows the reader down a long results page. A unit that
   stays on screen longer is worth more per impression, which is the honest
   way to raise what a page earns - unlike reloading it, which manufactures
   impressions nobody looked at. */
.sidebar-ad{margin-top:22px}
@media (min-width:900px){
  .sidebar-ad{position:sticky;top:88px}
}
.ad-divider{border:0;border-top:1px solid var(--rule);margin:34px 0 0}

/* The localhost outline. Deliberately unlike a real advertisement - dashed,
   flat, and captioned - so that it can never be mistaken for one in a
   screenshot or a demo. */
.ad-preview .box{
  border:2px dashed var(--rule-strong);border-radius:var(--radius);
  background:repeating-linear-gradient(45deg,transparent,transparent 10px,
    var(--surface) 10px,var(--surface) 20px);
  padding:20px 18px;text-align:center;color:var(--ink-2);
  display:flex;flex-direction:column;gap:6px;min-height:96px;
  align-items:center;justify-content:center}
.ad-preview .box b{display:block;font-size:14px;color:var(--ink);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.ad-preview p.box{font-size:13.5px;max-width:52ch;line-height:1.5;margin:0 auto}

/* ═══════════════════════════════════════════════════════════════════════════
   Onward navigation at the foot of a scheme page
   ---------------------------------------------------------------------------
   These shipped once as bare links and were indistinguishable from body text:
   two blue sentences in a row, with no way to tell they were separate
   destinations. Now each is a card - a labelled direction, an arrow, and the
   scheme's name - so the two read as two choices rather than one paragraph.
   ═════════════════════════════════════════════════════════════════════════ */
.scheme-pager{
  display:grid;gap:14px;grid-template-columns:1fr;
  margin:34px 0 22px;padding-top:26px;border-top:1px solid var(--rule)}
@media (min-width:720px){.scheme-pager{grid-template-columns:1fr 1fr;gap:18px}}

.scheme-pager a{
  display:flex;flex-direction:column;gap:6px;
  min-height:44px;padding:16px 18px;
  border:1px solid var(--rule-strong);border-radius:var(--radius-lg);
  background:var(--surface);text-decoration:none;
  transition:border-color .12s ease,background-color .12s ease}
.scheme-pager a:hover,.scheme-pager a:focus-visible{
  border-color:var(--primary);background:var(--primary-soft)}
.scheme-pager .sp-prev{align-items:flex-start;text-align:left}
.scheme-pager .sp-next{text-align:right;align-items:flex-end}
/* On a phone the two cards stack, and a right-aligned second card reads as a
   mistake rather than a direction. Both go left. */
@media (max-width:719px){
  .scheme-pager .sp-next{text-align:left;align-items:flex-start}
}

.sp-dir{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.06em}
.scheme-pager a:hover .sp-dir{color:var(--primary)}
.sp-name{
  font-family:"Gabarito","Mukta",system-ui,sans-serif;
  font-size:16.5px;font-weight:600;line-height:1.3;color:var(--primary)}

/* The action buttons, once they sit below the content rather than in the
   header. Given their own bordered band so they read as the end of the page's
   argument rather than another paragraph of it. */
.detail-actions.below{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin:30px 0 6px;padding:22px;border-radius:var(--radius-lg);
  background:var(--primary-soft);border:1px solid var(--rule-strong)}
.detail-actions.below .act-note{
  flex:1 1 220px;font-size:14.5px;color:var(--ink-2);line-height:1.45;margin:0}
.source-peek{font-size:14px;color:var(--ink-2);margin:10px 0 0}
.source-peek a{color:var(--primary)}