/* ══════════════════════════════════════════════════════════════════════
   FLORIDA SCHOLARSHIP DESK — DESIGN SYSTEM
   One stylesheet for every page. Edit here, every page changes.
   Built 2026-08-02. Replaces the 2026 "orange-crate" theme.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the display face ──────────────────────────────────────────────────
   Self-hosted. The system stack resolved to three different faces on three
   platforms and gave the site no typographic memory. Self-hosted rather
   than Google Fonts because this site's whole pitch is independence and a
   third-party font request undercuts that on every page load.
   Source Serif 4 Variable · SIL OFL 1.1 · see assets/fonts/LICENSE-*.txt */
@font-face{
  font-family:"Source Serif 4";
  src:url("/assets/fonts/source-serif-4-var.woff2") format("woff2-variations"),
      url("/assets/fonts/source-serif-4-var.woff2") format("woff2");
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
  /* Metric overrides keep the fallback the same height, so nothing reflows
     when the real face lands. */
  size-adjust:103%;
  ascent-override:96%;
  descent-override:28%;
  line-gap-override:0%;
}

:root{
  /* ink */
  --navy:#0D1B2A; --ink:#16283C; --ink-soft:#41546A;
  /* ⚠ CONTRAST. The old --muted #6B7C93 was 4.26:1 on white — under AA —
     and it carried the street address on all 3,608 school rows. --faint was
     2.60:1 on placeholders and --line-strong was 1.56:1 on every form
     border, which fails 1.4.11 outright. Verified by tools/audit-contrast.js;
     don't lighten any of these three without re-running it. */
  --muted:#5A6A80; --faint:#667588;
  /* surfaces — §5.1 the ground is paper, not white.
     The site is called a Desk. White-on-white-with-shadows read as floating
     rectangles and generic SaaS; a warm ground with flat ink-ruled cards
     reads as paper on a desk, and it costs no layout change at all. */
  --page:#FBF9F4; --paper:#FFFFFF; --wash:#F3EFE7; --wash-2:#EDE7DB; --wash-3:#E3DCCE;
  --line:#E3DCCE; --line-strong:#7E8DA3;
  /* brand */
  --brand:#0B6E4F; --brand-2:#08533C; --brand-3:#063D2C; --brand-tint:#E8F3EE; --brand-line:#B7DCCB;
  /* accent */
  --amber:#E9A23B; --amber-tint:#FDF4E3; --amber-line:#F2DCAF;
  /* --amber-deep is a TEXT colour. It was #B97C18 (3.23:1 on the tint) —
     it happened never to be used for text, which is the only reason it was
     not a live failure. Darkened so it can never become one. */
  --amber-deep:#7A5008;
  /* status */
  --red:#C0392B; --red-tint:#FCEEEC; --red-line:#F0C4BE;
  --blue:#1B5E9B; --blue-tint:#EAF2FA; --blue-line:#BFD8EE;
  /* program colours — the pills already define these, but the colour used
     to die inside the pill. §5.3 puts it on a 4px left edge as well. */
  --p-ftc:#0B6E4F; --p-eo:#5B3A8E; --p-ua:#1B5E9B; --p-pep:#B97C18;
  /* type */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  /* shape — §5.2 TWO radii, not four. 4px for anything holding data,
     16px for the three interactive instruments. Two radii used with intent
     read as a decision; four read as defaults. */
  --r-sm:4px; --r:4px; --r-lg:4px; --r-xl:4px;
  --r-tool:16px;
  /* §5.1 flat ink-ruled cards. The borders do the work the shadows did. */
  --sh-1:none;
  --sh-2:none;
  --sh-3:0 1px 2px rgba(13,27,42,.05), 0 12px 32px -18px rgba(13,27,42,.22);
  --ring:0 0 0 3px rgba(11,110,79,.20);
  /* ⚠ FOCUS. The old ring was 2.78:1 against every dark surface — i.e.
     invisible exactly where keyboard users needed it. A white halo makes it
     visible on navy and on paper both. */
  --focus:2px solid #0B6E4F;
  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* Every in-page anchor used to land 67px under the sticky header —
     including the site's own "start here" CTA. */
  scroll-padding-top:80px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  background:var(--page); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  /* ⛔ NO overflow-x:hidden here. It was HIDING horizontal overflow rather
     than preventing it — claim.html measured 529px wide inside a 390px
     viewport and nobody could see it. If a page pans sideways, find the
     element; do not paper over it. tools/audit-mobile.js catches it now. */
}
img,video{max-width:100%;height:auto;display:block}
svg{max-width:100%;display:inline-block;vertical-align:-.14em;flex:none}
a{color:var(--brand);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--brand-2);text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:var(--focus);outline-offset:3px;border-radius:4px;box-shadow:0 0 0 3px #fff}
/* on the navy surfaces the halo has to be the light one, not white-on-white */
.sec.navy :focus-visible,footer :focus-visible,.band :focus-visible,.calc-out :focus-visible,
.ribbon :focus-visible{outline:2px solid #FFD79A;box-shadow:0 0 0 3px rgba(13,27,42,.9)}
::selection{background:var(--brand-tint);color:var(--brand-3)}
hr{border:0;border-top:1px solid var(--line)}

h1,h2,h3,h4,.display{font-family:var(--display);color:var(--navy);letter-spacing:-.008em;line-height:1.14;font-weight:700}
/* the tight tracking below was tuned for a grotesque; a serif does not want it */
h1{font-size:clamp(32px,4.8vw,54px);letter-spacing:-.012em;line-height:1.06}
h2{font-size:clamp(24px,3.2vw,36px);letter-spacing:-.01em}
h3{font-size:clamp(19px,2.1vw,23px);letter-spacing:-.006em;line-height:1.26}
h4{font-size:17px;letter-spacing:0}
p{margin:0}
.lede{font-size:clamp(17.5px,1.75vw,20.5px);line-height:1.55;color:var(--ink-soft)}
.small{font-size:14.5px;line-height:1.55}
.tiny{font-size:13px;line-height:1.5;color:var(--muted)}
strong,b{font-weight:650;color:var(--navy)}
.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}

/* ── layout ─────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;width:100%}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 24px;width:100%}
.sec{padding:clamp(48px,6.5vw,86px) 0}
.sec-tight{padding:clamp(34px,4vw,54px) 0}
.sec.wash{background:var(--wash);border-block:1px solid var(--line)}
.sec.navy{background:var(--navy);color:#D7E0EA}
.sec.navy h2,.sec.navy h3{color:#fff}
.stack>*+*{margin-top:14px}
.stack-lg>*+*{margin-top:26px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.center{text-align:center}

/* ── eyebrow / micro labels ─────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--amber);border-radius:2px}
.eyebrow.plain::before{display:none}
.sec-head{max-width:660px;margin-bottom:34px}
.sec-head.center{margin-inline:auto}
.sec-head p{margin-top:12px}

/* ── buttons ────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--r);border:1px solid var(--line-strong);
  background:var(--paper);color:var(--navy);font-size:15.5px;font-weight:650;
  letter-spacing:-.008em;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .08s,box-shadow .15s;
  box-shadow:var(--sh-1);
}
.btn:hover{background:var(--wash);border-color:var(--faint);color:var(--navy);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn svg{flex:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(6,61,44,.24),0 10px 24px -12px rgba(6,61,44,.55)}
.btn.primary:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.dark:hover{background:#0A1622;color:#fff}
.btn.amber{background:var(--amber);border-color:var(--amber);color:#3A2A08}
.btn.amber:hover{background:#DE9526;color:#3A2A08}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--brand)}
.btn.ghost:hover{background:var(--brand-tint);border-color:transparent}
.btn.lg{padding:16px 28px;font-size:16.5px;border-radius:var(--r-lg)}
.btn.sm{padding:9px 15px;font-size:14px;border-radius:var(--r-sm)}
.btn.block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}

/* ── cards ──────────────────────────────────────────────────────── */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-1)}
.card.raised{box-shadow:var(--sh-2)}
.card.pad-lg{padding:clamp(24px,3.4vw,38px)}
.card.tint{background:var(--brand-tint);border-color:var(--brand-line)}
.card.amber{background:var(--amber-tint);border-color:var(--amber-line)}
.card.alert{background:var(--red-tint);border-color:var(--red-line)}
.card.info{background:var(--blue-tint);border-color:var(--blue-line)}
a.card{color:inherit;display:block;transition:border-color .15s,box-shadow .15s,transform .12s}
a.card:hover{border-color:var(--brand-line);box-shadow:var(--sh-2);transform:translateY(-2px);text-decoration:none}

/* ── pills / badges ─────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:650;letter-spacing:-.005em;background:var(--wash-2);color:var(--ink-soft);border:1px solid var(--line);white-space:nowrap}
.pill.ftc{background:var(--brand-tint);color:var(--brand-3);border-color:var(--brand-line)}
.pill.pep{background:var(--amber-tint);color:var(--amber-deep);border-color:var(--amber-line)}
.pill.ua{background:var(--blue-tint);color:#134A7C;border-color:var(--blue-line)}
.pill.eo{background:#F1EAFB;color:#5B3A8E;border-color:#DECDF3}
.pill.verified{background:var(--brand);color:#fff;border-color:var(--brand)}
.pill.claimed{background:var(--navy);color:#fff;border-color:var(--navy)}
.pill.unclaimed{background:var(--paper);color:var(--muted);border-style:dashed}
.pill-row{display:flex;flex-wrap:wrap;gap:6px}

/* ── forms ──────────────────────────────────────────────────────── */
.field{display:block;margin-bottom:16px}
.field>label,.lbl{display:block;font-size:14px;font-weight:650;color:var(--navy);margin-bottom:6px;letter-spacing:-.005em}
.field .hint{font-size:13px;color:var(--muted);margin-top:5px}
.input,input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search],input[type=number],select,textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--paper);font-size:16px;color:var(--navy);transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;appearance:none;
}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7C93' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
textarea{min-height:110px;resize:vertical;line-height:1.55}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--faint)}
.check{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:border-color .15s,background .15s;background:var(--paper)}
.check:hover{border-color:var(--brand-line);background:var(--brand-tint)}
.check input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--brand)}
.check span{font-size:14.5px;line-height:1.45}
.check.on{border-color:var(--brand);background:var(--brand-tint)}
.form-note{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5}
.err{color:var(--red);font-size:13.5px;font-weight:600;margin-top:6px}
.ok-msg{display:none;background:var(--brand-tint);border:1px solid var(--brand-line);color:var(--brand-3);padding:14px 16px;border-radius:var(--r);font-weight:600;font-size:15px}
.ok-msg.show{display:block}

/* ── header ─────────────────────────────────────────────────────── */
.ribbon{background:var(--navy);color:#BFCEDD;font-size:13px;text-align:center;padding:9px 20px;line-height:1.45}
.ribbon b{color:#fff;font-weight:650}
.ribbon a{color:var(--amber);font-weight:600}
.hd{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:18px;height:66px}
.logo{display:flex;align-items:center;gap:11px;flex:none;color:var(--navy)}
.logo:hover{text-decoration:none}
.logo .mark{width:36px;height:36px;border-radius:10px;background:var(--brand);display:grid;place-items:center;flex:none;box-shadow:0 2px 8px -2px rgba(11,110,79,.5)}
.logo .nm{font-family:var(--display);font-weight:750;font-size:16px;letter-spacing:-.028em;line-height:1.1;color:var(--navy)}
.logo .nm small{display:block;font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.hd nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.hd nav a{font-size:14.5px;font-weight:600;color:var(--ink-soft);padding:8px 12px;border-radius:var(--r-sm)}
.hd nav a:hover{background:var(--wash-2);color:var(--navy);text-decoration:none}
.hd nav a.cta{background:var(--brand);color:#fff;margin-left:8px;padding:9px 16px;box-shadow:0 1px 2px rgba(6,61,44,.2)}
.hd nav a.cta:hover{background:var(--brand-2);color:#fff}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 10px;cursor:pointer}
@media(max-width:940px){
  .hd nav{position:fixed;inset:66px 0 auto;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:10px 18px 18px;gap:2px;display:none;box-shadow:var(--sh-2)}
  .hd nav.open{display:flex}
  .hd nav a{padding:13px 12px;font-size:16px}
  .hd nav a.cta{margin:8px 0 0;text-align:center;justify-content:center}
  .burger{display:block}
}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{padding:clamp(38px,5.5vw,72px) 0 clamp(30px,4vw,52px);background:var(--page)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(26px,4vw,56px);align-items:start}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:30px}}
/* ⛔ THE HIGHLIGHTER NEVER RENDERED. z-index:-1 with no stacking context
   painted it behind the opaque hero background, so the site's single
   signature mark was invisible on every page it appeared on. Own stacking
   context + a real z-order fixes it. §5.3 then rations it to three places
   site-wide: this h1, the "accepting is separate from applying" line on
   /account, and the deadline in the timeline. */
.hero h1 em{font-style:normal;color:var(--brand);position:relative;white-space:nowrap;isolation:isolate;z-index:0}
.hero h1 em::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.04em;height:.30em;background:var(--amber);opacity:.42;z-index:-1;border-radius:2px}
.mark-amber{position:relative;isolation:isolate;z-index:0;font-style:normal}
.mark-amber::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.04em;height:.30em;background:var(--amber);opacity:.42;z-index:-1;border-radius:2px}
.hero .lede{margin-top:18px;max-width:54ch}

/* trust strip */
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:13.5px;color:var(--ink-soft);font-weight:600}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{color:var(--brand);flex:none}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:28px}
@media(max-width:620px){.stats{grid-template-columns:repeat(2,1fr)}}
/* was `.stats div` — it matched the .n and .l children too and added
   about 65px of padding to the hero stat strip. */
.stats>div{background:var(--paper);padding:16px 14px;text-align:center}
.stats .n{font-family:var(--display);font-weight:780;font-size:clamp(20px,2.6vw,27px);color:var(--navy);letter-spacing:-.03em;line-height:1.1}
.stats .l{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:5px}

/* ── the big search ─────────────────────────────────────────────── */
.searchbar{display:flex;gap:8px;margin-top:26px;padding:9px;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-tool);box-shadow:var(--sh-3);align-items:center;flex-wrap:nowrap}
.searchbar .btn{flex:none}
.searchbar .sb-field{flex:1 1 0;display:flex;align-items:center;gap:8px;padding-left:11px;min-width:0}
.searchbar .sb-field svg{color:var(--muted);flex:none}
/* the `background` shorthand below used to wipe background-image, which
   is where the chevron lived — the selects looked like plain text. */
.searchbar select,.searchbar input{border:none;box-shadow:none!important;padding:11px 0;background-color:transparent;font-size:16px;font-weight:600;min-width:0}
.searchbar input{background-image:none}
.searchbar select{background-position:right 4px center;padding-right:26px}
.searchbar .sep{width:1px;align-self:stretch;background:var(--line);margin:4px 0}
@media(max-width:720px){.searchbar{flex-wrap:wrap;border-radius:var(--r-lg)}.searchbar .sep{display:none}
  .searchbar .sb-field{flex:1 1 100%;border:1px solid var(--line);border-radius:var(--r);padding:2px 12px}
  .searchbar .btn{width:100%}}

/* ── path cards (start here) ────────────────────────────────────── */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.paths{grid-template-columns:1fr}}
.path{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px 24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:transform .14s,box-shadow .16s,border-color .16s;color:inherit;overflow:hidden}
.path::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--brand)}
.path.b2::before{background:var(--blue)} .path.b3::before{background:var(--amber)}
.path:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--line-strong);text-decoration:none}
.path .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand);margin-bottom:4px}
.path.b2 .ico{background:var(--blue-tint);color:var(--blue)}
.path.b3 .ico{background:var(--amber-tint);color:var(--amber-deep)}
.path h3{font-size:19.5px}
.path p{font-size:15px;color:var(--ink-soft);line-height:1.5}
.path .go{margin-top:auto;padding-top:12px;font-size:14.5px;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:6px}
.path.b2 .go{color:var(--blue)} .path.b3 .go{color:var(--amber-deep)}

/* ── quiz / stepper ─────────────────────────────────────────────── */
.quiz{border:1px solid var(--line);border-radius:var(--r-tool);background:var(--paper);box-shadow:var(--sh-3);overflow:hidden}
.quiz-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-bottom:1px solid var(--line);background:var(--wash)}
.quiz-hd h2{font-size:19px;letter-spacing:-.02em}
.quiz-body{padding:24px}
.dots{display:flex;gap:6px}
.dots i{width:26px;height:5px;border-radius:3px;background:var(--wash-3);transition:background .25s}
.dots i.on{background:var(--brand)} .dots i.done{background:var(--brand-line)}
.q{display:none} .q.active{display:block;animation:qin .28s ease}
@keyframes qin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.q>h3{margin-bottom:16px}
.opts{display:grid;gap:9px}
.opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:15px 17px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);cursor:pointer;font-size:16px;font-weight:600;color:var(--navy);transition:border-color .14s,background .14s,transform .08s}
.opt:hover{border-color:var(--brand);background:var(--brand-tint)}
.opt:active{transform:translateY(1px)}
.opt .ic{width:32px;height:32px;border-radius:9px;background:var(--wash-2);color:var(--ink-soft);display:grid;place-items:center;flex:none;transition:background .14s,color .14s}
.opt:hover .ic{background:var(--brand);color:#fff}
.backlink{background:none;border:none;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;padding:10px 2px 0;text-align:left}
.backlink:hover{color:var(--brand);text-decoration:underline}
.verdict{display:none} .verdict.show{display:block}
.verdict .vhead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.verdict .vic{width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none}

/* ── directory ──────────────────────────────────────────────────── */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:18px;background:var(--wash);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:22px}
.dir-meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.dir-count{font-size:14.5px;color:var(--muted);font-weight:600}
.dir-count b{color:var(--navy)}
.listing{display:grid;grid-template-columns:1fr auto;gap:14px 20px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s}
.listing:hover{border-color:var(--line-strong);box-shadow:var(--sh-2)}
.listing+.listing{margin-top:12px}
.listing h3{font-size:18.5px;margin-bottom:3px}
.listing .addr{font-size:14.5px;color:var(--muted);line-height:1.5}
.listing .facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;font-size:13.5px;color:var(--ink-soft)}
.listing .facts span{display:inline-flex;align-items:center;gap:6px}
.listing .side{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-end;gap:8px;max-width:340px}
.listing .side .btn{white-space:nowrap}
@media(max-width:820px){.listing{grid-template-columns:1fr}.listing .side{justify-content:flex-start;max-width:none}}
.listing.featured{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),var(--sh-2);background:linear-gradient(180deg,var(--amber-tint),var(--paper) 70px)}
.empty{padding:44px 26px;text-align:center;border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--wash)}

/* ── steps ──────────────────────────────────────────────────────── */
.steps{counter-reset:s;display:grid;gap:12px}
.step{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.step::before{counter-increment:s;content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--display);font-weight:750;font-size:16px;display:grid;place-items:center;flex:none}
.step h3{font-size:18px;margin-bottom:5px}
.step p{font-size:15.5px;color:var(--ink-soft)}

/* ── timeline ───────────────────────────────────────────────────── */
.tl{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.tl-row{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:16px 22px;border-bottom:1px solid var(--line);align-items:baseline}
.tl-row:last-child{border-bottom:0}
.tl-row.past{opacity:.55}
.tl-row.next{background:var(--brand-tint)}
.tl-date{font-size:14px;font-weight:700;color:var(--brand);letter-spacing:-.01em}
.tl-row.past .tl-date{color:var(--muted)}
.tl-what{font-size:16px;font-weight:650;color:var(--navy)}
.tl-sub{font-size:14px;color:var(--muted);margin-top:2px}
@media(max-width:620px){.tl-row{grid-template-columns:1fr;gap:3px}}

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:18px 54px 18px 22px;font-weight:650;font-size:16.5px;color:var(--navy);cursor:pointer;position:relative;list-style:none;transition:background .14s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--wash)}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;border-right:2.2px solid var(--muted);border-bottom:2.2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary{background:var(--wash)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:2px 22px 20px;color:var(--ink-soft);font-size:16px;line-height:1.62}
.faq .a p+p{margin-top:10px}

/* ── calculator ─────────────────────────────────────────────────── */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:center}
@media(max-width:800px){.calc{grid-template-columns:1fr}}
.slider-row{margin-bottom:20px}
.slider-row .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.slider-row .top b{font-family:var(--display);font-size:23px;color:var(--brand);font-weight:780}
/* the visible track stays 6px; the HIT BOX is 44px, because a 6px touch
   target on the calculator was unusable with a thumb. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;border-radius:4px;background:transparent;outline:none;padding:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:var(--wash-3)}
input[type=range]::-moz-range-track{height:6px;border-radius:4px;background:var(--wash-3)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--brand);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px -1px rgba(6,61,44,.45)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--brand);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px -1px rgba(6,61,44,.45)}
.calc-out{background:var(--navy);border-radius:var(--r-tool);padding:clamp(22px,3vw,32px);color:#C8D5E2;text-align:center}
.calc-out .big{font-family:var(--display);font-size:clamp(38px,6vw,58px);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1}
.calc-out .lbl2{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#8AA3BC;margin-top:8px}
.calc-out .split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13)}
.calc-out .split .n{font-family:var(--display);font-size:clamp(20px,3vw,26px);font-weight:750;color:var(--amber);letter-spacing:-.03em}

/* ── alert box ──────────────────────────────────────────────────── */
.alertbox{border:1px solid var(--red-line);background:var(--red-tint);border-radius:var(--r-lg);padding:24px}
.alertbox h3{color:#8E2A1F;display:flex;align-items:center;gap:10px;font-size:19px}
.alertbox ul{list-style:none;margin-top:14px;display:grid;gap:10px}
.alertbox li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:15.5px;color:#5C2019;line-height:1.55}
.alertbox li svg{color:var(--red);margin-top:4px}
.alertbox a{color:#8E2A1F;font-weight:650;text-decoration:underline}

/* ── callout / CTA band ─────────────────────────────────────────── */
/* §5 the soft radial bloom is deleted — it is the most recognisable
   AI-hero tell of the last three years. */
.band{background:var(--navy);border-radius:var(--r-tool);padding:clamp(28px,4vw,48px);color:#C8D5E2;position:relative;overflow:hidden}
.band h2,.band h3{color:#fff;position:relative}
.band p{position:relative;color:#B3C4D4}
.band .row{position:relative;margin-top:22px}

/* ── footer ─────────────────────────────────────────────────────── */
footer{background:var(--navy);color:#95A9BD;padding:56px 0 30px;font-size:14.5px;margin-top:0}
footer h3{color:#fff;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
footer a{color:#C3D2E0}
footer a:hover{color:var(--amber)}
footer ul{list-style:none;display:grid;gap:9px}
.f-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
@media(max-width:880px){.f-cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-cols{grid-template-columns:1fr}}
.f-legal{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.11);font-size:12.8px;line-height:1.62;color:#7F93A8}
.f-legal b{color:#B3C4D4}

/* ── misc ───────────────────────────────────────────────────────── */
.badge-src{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600}
.print-only{display:none}
@media print{
  .hd,.ribbon,footer,.no-print{display:none!important}
  body{font-size:12pt;background:#fff}
  .print-only{display:block}
  .card,.listing,.step{break-inside:avoid;box-shadow:none}
  a{color:#000;text-decoration:none}
  .sec{padding:14px 0}
}

/* ══════════════════════════════════════════════════════════════════════
   ARTICLE PAGES — guides, checklist, flyer, privacy, 404
   Restyles the existing markup of the legacy pages in the new system.
   ══════════════════════════════════════════════════════════════════════ */
body.doc{background:var(--wash);padding:0}
.doc article{max-width:760px;margin:clamp(26px,5vw,56px) auto;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);
  padding:clamp(26px,4.4vw,54px)}
.doc article::before{display:none}
.doc .crumb{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.doc .back{display:inline-flex;align-items:center;gap:7px;margin-bottom:18px;font-weight:650;
  font-size:14px;text-decoration:none;color:var(--brand)}
.doc .back:hover{text-decoration:underline}
.doc h1{font-size:clamp(26px,4.2vw,40px);margin:10px 0 8px}
.doc h2{font-size:clamp(19px,2.4vw,25px);color:var(--navy);margin:32px 0 10px;letter-spacing:-.022em}
.doc h3{font-size:18px;margin:22px 0 6px}
.doc .meta{font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:8px}
.doc p{margin:14px 0;color:var(--ink-soft);font-size:16.5px;line-height:1.66}
.doc article>p:first-of-type{font-size:18px;color:var(--ink)}
.doc ul,.doc ol{padding-left:22px;margin:12px 0;color:var(--ink-soft)}
.doc li{margin:7px 0;font-size:16.5px;line-height:1.6}
.doc table{width:100%;border-collapse:separate;border-spacing:0;margin:20px 0;font-size:15px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.doc th,.doc td{border-bottom:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.doc tr:last-child td{border-bottom:0}
.doc th{background:var(--wash);font-family:var(--display);font-weight:700;color:var(--navy);
  font-size:13px;letter-spacing:.03em;text-transform:uppercase}
.doc .big{font-family:var(--display);font-weight:800;font-size:clamp(34px,6vw,50px);color:var(--brand);
  line-height:1.03;margin:16px 0 2px;letter-spacing:-.035em}
.doc .big small{font-size:.34em;color:var(--muted);font-weight:650;letter-spacing:0}
.doc .callout{border:1px solid var(--amber-line);background:var(--amber-tint);border-left:4px solid var(--amber);
  padding:14px 18px;margin:20px 0;font-size:15.5px;border-radius:0 var(--r) var(--r) 0;color:var(--ink-soft)}
.doc .fine{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:30px;line-height:1.6}
.doc .more-guides{border-top:1px solid var(--line);margin-top:32px;padding-top:20px}
.doc .more-guides h2{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.doc .more-guides li{font-size:15.5px}
.doc .doc-nav{max-width:760px;margin:0 auto;padding:20px 24px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media print{.doc article{box-shadow:none;border:0;margin:0;padding:0;max-width:none}
  .doc .back,.doc .doc-nav,.doc .more-guides{display:none}}

/* ══════════════════════════════════════════════════════════════════════
   ADDED 2026-08-03 — the capture block, the county mesh, the program edge
   ══════════════════════════════════════════════════════════════════════ */

/* ── active nav item ────────────────────────────────────────────────── */
.hd nav a.on{background:var(--wash-2);color:var(--navy)}

/* ── §5.3 the program-coloured left edge ────────────────────────────────
   Every listing and school row carries a 4px edge in its first program's
   colour. The pills already defined these colours; the colour used to die
   inside the pill and never reach the row. */
.listing{border-left-width:1px}
.listing.edge-ftc{border-left:4px solid var(--p-ftc)}
.listing.edge-eo {border-left:4px solid var(--p-eo)}
.listing.edge-ua {border-left:4px solid var(--p-ua)}
.listing.edge-pep{border-left:4px solid var(--p-pep)}
.listing .blurb{font-size:15px;color:var(--ink-soft);margin-top:8px;line-height:1.55;max-width:60ch}

/* ── C1 the county capture block ────────────────────────────────────────
   Sits directly under the four stat tiles and ABOVE the listing wall,
   because nobody scrolls past 203 listings. A second copy goes in after
   row ten. This is the only thing connecting the traffic engine to the
   email list. */
.capture{margin:26px 0 0;border:1px solid var(--brand-line);border-left:4px solid var(--brand);
  border-radius:var(--r);background:var(--brand-tint)}
.listing + .capture{margin:12px 0}
.capture-in{padding:clamp(20px,3vw,28px)}
.capture h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:10px}
.capture p{color:var(--ink-soft);font-size:16px;line-height:1.6;max-width:62ch}
.capture p + p{margin-top:8px}
.capture .small{font-size:14px;color:var(--muted)}
.capture-form{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;align-items:center}
.capture-form input[type=email]{flex:1 1 260px;min-width:0;background:var(--paper)}
.capture-form .btn{flex:0 0 auto}
@media(max-width:560px){.capture-form .btn{width:100%}}
.capture .ok-msg{margin-top:14px}
.capture .err{margin-top:12px}
/* the honeypot: off-screen, never focusable, never announced. A real person
   cannot fill a field they cannot see or tab to. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ── C7 the county mesh ─────────────────────────────────────────────── */
.near-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.near-grid .card{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;font-weight:650;color:var(--navy)}
.county-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.county-card{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;font-weight:650;color:var(--navy)}

/* ── C7 the by-city index ───────────────────────────────────────────── */
.city-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.city-block h2{font-size:16px;letter-spacing:-.004em;margin-bottom:8px;color:var(--navy)}
.city-block ul{list-style:none;display:grid;gap:5px}
.city-block li{font-size:14.5px;line-height:1.45}
.city-block a{color:var(--ink-soft)}
.city-block a:hover{color:var(--brand)}

/* ── B3 the claim page columns ──────────────────────────────────────────
   claim.html measured 529px inside a 390px viewport because this grid was
   an inline style, which no breakpoint can reach. The business-acquisition
   page was unusable on a phone. Inline layout styles do not belong in the
   markup; they belong here, where a media query can see them. */
.claim-cols{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:start}
@media(max-width:860px){.claim-cols{grid-template-columns:1fr;gap:22px}}

/* ── §5.3 the rationed highlighter, second and third uses ───────────── */
.tl-row.next .tl-date{position:relative;isolation:isolate;z-index:0}
.tl-row.next .tl-date::after{content:"";position:absolute;left:-.15em;right:-.15em;bottom:0;height:.55em;background:var(--amber);opacity:.38;z-index:-1;border-radius:2px}

/* ── H11 live regions must not collapse the layout when empty ───────── */
[role=status]:empty,[role=alert]:empty{display:none}
.err[hidden]{display:none!important}

/* ── layouts lifted out of inline styles so breakpoints can reach them ── */
.plan-cols{display:grid;grid-template-columns:.85fr 1.15fr;gap:30px;align-items:start}
@media(max-width:980px){.plan-cols{grid-template-columns:1fr;gap:24px}}
.tl-row.status-row{grid-template-columns:170px 1fr}
@media(max-width:620px){.tl-row.status-row{grid-template-columns:1fr;gap:3px}}

/* ── §5 mobile: the 60-second check is the point of the page ─────────────
   At 390px it used to begin at y=940 in an 844px viewport — below the fold,
   which is literally the owner's own complaint that starting was not easy
   or obvious enough. Below 980px the quiz moves directly under the lede and
   the search bar drops beneath it. */
@media(max-width:980px){
  .hero-grid{display:flex;flex-direction:column}
  /* display:contents lifts the left column's children into the flex line so
     the quiz can slot between them. Everything then needs an explicit
     order — anything left at the default 0 jumps to the TOP, which is
     exactly what happened to the "3,600+ schools" line on the first pass:
     a supporting caption rendered above the headline. */
  .hero-grid > :first-child{display:contents}
  .hero-grid > :first-child > *{order:1}
  .hero-grid .quiz{order:2;margin-top:24px}
  .hero-grid .searchbar{order:3;margin-top:24px}
  .hero-grid .search-note{order:3}
  .hero-grid .trust{order:4}
}
/* the disclaimer ribbon was a 75px block on a phone for a sentence that is
   repeated in full in the footer */
@media(max-width:620px){
  .ribbon{font-size:12.5px;padding:7px 14px;line-height:1.35}
}

/* ══════════════════════════════════════════════════════════════════════
   THE STEP UP EXPLAINER  (added 2026-08-03)
   Parents call it "Step Up". The paperwork calls it four other things.
   This is the block that finally says so.
   ══════════════════════════════════════════════════════════════════════ */
.explainer{max-width:820px}
.explainer h2{font-size:clamp(23px,3vw,32px);margin-bottom:14px}
.explainer > p{color:var(--ink-soft);font-size:17px;line-height:1.62}
.explainer > p + p{margin-top:12px}
.explainer .small{color:var(--muted);font-size:14.5px;margin-top:16px}

.lane-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 4px}
@media(max-width:820px){.lane-grid{grid-template-columns:1fr}}
.lane{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--muted);
  border-radius:var(--r);padding:18px 20px}
.lane-ftc{border-left-color:var(--p-ftc)}
.lane-ua {border-left-color:var(--p-ua)}
.lane-pep{border-left-color:var(--p-pep)}
.lane h3{font-size:17.5px;line-height:1.28;margin-bottom:6px}
.lane p{font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.lane .lane-codes{color:var(--muted);font-size:13px;margin-bottom:9px}
.lane .lane-who{font-weight:650;color:var(--navy);margin-bottom:6px}

/* ⛔ The "we are not them" block. It gets LOUDER wherever the Step Up name
   gets louder — it is not a legal footnote, it is the product. The most
   common scam in this space is a site that lets a parent believe it is
   Step Up and then charges an "application fee". */
.not-them h3{font-size:17px;margin-bottom:8px}
.not-them p{color:#5C2019}
.not-them p + p{margin-top:8px}
.not-them a{color:#8E2A1F;font-weight:650;text-decoration:underline}

/* the county-page key that turns FTC/FES-EO/FES-UA into English */
.lane-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 20px;
  margin-top:14px;padding:16px 18px;background:var(--wash);border:1px solid var(--line);border-radius:var(--r)}
.lane-key div{font-size:14px;line-height:1.45;color:var(--ink-soft)}
.lane-key b{display:block;color:var(--navy)}
.lane-key .code{color:var(--muted);font-size:12.5px}

/* ── the abbreviation glossary ──────────────────────────────────────────
   Teddy: "If the abbreviations are what people may use, make sure its in
   the meta data". Published as visible text as well as schema, because a
   search engine reads what renders — and because a parent staring at
   "FES-EO" on a form deserves the answer somewhere. */
.glossary{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.glossary > div{padding:16px 20px;border-bottom:1px solid var(--line)}
.glossary > div:last-child{border-bottom:0}
.glossary dt{font-size:16px;line-height:1.35;margin-bottom:5px}
.glossary dt b{font-family:var(--display);font-size:19px;color:var(--navy);margin-right:9px}
.glossary dt span{color:var(--ink-soft);font-weight:600;font-size:15px}
.glossary dd{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0}
@media(max-width:520px){.glossary dt b{display:block;margin-bottom:2px}}

/* ── "things families get wrong" ─────────────────────────────────────── */
.myths{display:grid;gap:14px}
.myth{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--amber);
  border-radius:var(--r);padding:20px 22px}
.myth h3{font-size:18.5px;line-height:1.3;margin-bottom:8px}
.myth p{font-size:15.5px;line-height:1.6;color:var(--ink-soft);max-width:70ch}