/* =========================================================================
   Support Scan — ONE marketing design system.

   THE HOMEPAGE IS THE BASE. Bret, 2026-08-16: "every single page except
   https://www.supportscan.org/ has a different top bar and color scheme...
   the homepage should be the base. every other page should look like that
   and have the same layout."

   This file is that base, lifted out of the homepage's inline <style> so
   there is exactly ONE definition of the tokens, the top bar, the ground,
   the type scale, the buttons and the footer. EVERY page loads it, the
   homepage included — that is what keeps them from drifting apart again.

   Load order matters:
     1. site-base.css   (this file — chrome + tokens; every page)
     2. site.css        (page components; every page except the homepage)
   site.css no longer defines tokens, nav, footer, buttons or the ground.
   An earlier attempt did the reverse — an override sheet stacked on top of
   an untouched site.css — and the two fought (logo over links, footer at
   the top). Do not reintroduce a second chrome. Change it HERE.
   ========================================================================= */

:root{
  /* Palette — the homepage's, verbatim. */
  --teal:#0d83d1;
  --teal-dark:#0a68ab;
  --teal-deep:#084e83;
  --navy:#12293e;
  --ink:#1b3348;
  --slate:#4e657c;
  --mist:#ddecfa;
  --mist-2:#cfe3f6;
  --porcelain:#e9f1f9;
  --white:#f7fafd;
  --amber:#b45309;
  --amber-bg:#fef3e2;
  --red:#b91c1c;
  --red-bg:#fdeaea;
  --green:#15803d;
  --green-bg:#e8f6ec;
  --radius:18px;
  --shadow-sm:0 1px 3px rgba(18,41,62,.07),0 4px 14px rgba(18,41,62,.06);
  --shadow-md:0 4px 10px rgba(18,41,62,.08),0 18px 44px rgba(18,41,62,.12);
  --shadow-lg:0 8px 20px rgba(18,41,62,.12),0 32px 80px rgba(18,41,62,.18);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Legacy aliases. The 22 sub-pages were authored against these names, so
     remapping them here re-skins every one of their components in the
     homepage's palette without touching their markup. Keep them pointing
     at the tokens above — never give them independent values. */
  --bg:var(--porcelain);
  --surface:rgba(255,255,255,.42);
  --card:var(--white);
  --ink-2:var(--slate);
  --ink-3:#6f89a0;
  --accent:var(--teal);
  --accent-ink:var(--teal-deep);
  --accent-soft:var(--mist);
  --navy-ink:#eef5fb;
  --navy-mut:#b9cde0;
  --cyan:#5cb6f2;
  --line:rgba(18,41,62,.10);
  --good:var(--green);
  --bad:var(--red);
  --shell:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* The ground. A page that keeps the old flat near-white read as a
   different site the moment you left the homepage. */
body{
  font-family:var(--font);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:linear-gradient(180deg,#e3edf7 0%,#cfdfee 40%,#b9cfe2 100%);
  background-attachment:fixed;
}
img,video{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
p{text-wrap:pretty}

/* .shell is the sub-pages' container, .wrap is the homepage's. Same
   measure, or "the same layout" is a claim the page does not keep. */
.wrap,.shell{max-width:var(--shell);margin:0 auto;padding:0 28px}

.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}

/* ---------- type scale ---------- */
h1,h2,h3{text-wrap:balance;color:var(--navy)}
h1{font-size:clamp(38px,5.2vw,60px);line-height:1.06;font-weight:900;letter-spacing:-.035em}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.12;font-weight:900;letter-spacing:-.03em;margin-bottom:16px}
h3{font-size:24px;font-weight:800;letter-spacing:-.02em}
h1 .accent{background:linear-gradient(120deg,var(--teal),var(--teal-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- THE top bar. One definition, every page. ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(12,25,40,.82);
     backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
     border-bottom:1px solid rgba(255,255,255,.08);transition:box-shadow .3s}
#nav.scrolled{box-shadow:0 2px 22px rgba(6,15,26,.35)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:18px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:#eef5fb;letter-spacing:-.02em;white-space:nowrap}
.logo .mark{width:34px;height:34px;border-radius:9px;flex-shrink:0;object-fit:cover;box-shadow:0 2px 8px rgba(18,41,62,.25)}
.logo em{font-style:normal;color:var(--teal)}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{font-size:14.5px;font-weight:600;color:#b9cde0;transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-links a[aria-current]{color:#fff}
.nav-links a.nav-cta[aria-current]{color:#fff}

/* Every page carries the same 68px fixed bar, so every page owes it the
   same clearance. The homepage pays for this inside its hero padding; the
   sub-pages never did, and their first heading sat under the bar. */
body{padding-top:68px}
body.has-hero{padding-top:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;
     border-radius:12px;padding:12px 24px;cursor:pointer;border:none;text-decoration:none;
     transition:transform .15s,box-shadow .15s,background .2s;font-family:var(--font)}
.btn:active{transform:scale(.98)}
.btn-primary,.btn.primary,.btn.accent{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;box-shadow:0 4px 14px rgba(13,131,209,.35)}
.btn-primary:hover,.btn.primary:hover,.btn.accent:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(13,131,209,.42);color:#fff}
.btn-ghost,.btn.quiet{background:transparent;color:var(--navy);border:1.5px solid rgba(18,41,62,.16)}
.btn-ghost:hover,.btn.quiet:hover{border-color:var(--teal);color:var(--teal)}
.btn-lg{padding:16px 32px;font-size:16.5px;border-radius:14px}
.nav-cta{padding:10px 20px;font-size:14px}

/* ---------- mobile menu ----------
   The homepage used to simply hide its nav links under 900px, which is
   survivable when every link is an anchor on the page you are already on.
   It is not survivable on a sub-page, where hiding the links leaves no way
   to navigate at all. One real menu, shared. */
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;
           background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:10px;cursor:pointer;padding:0 9px}
.navtoggle span{display:block;height:2px;border-radius:2px;background:#dbe8f5;transition:transform .2s,opacity .2s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  .navtoggle{display:flex}
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;
             background:rgba(12,25,40,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
             flex-direction:column;align-items:stretch;gap:2px;padding:12px 28px 22px;
             border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px rgba(6,15,26,.35)}
  .nav-links.open{display:flex}
  .nav-links a{font-size:16px;padding:11px 2px}
  .nav-links a.nav-cta{margin-top:10px;align-self:flex-start;padding:12px 24px}
}

/* ---------- section scaffolding ---------- */
.sec,section{padding:96px 0;position:relative}
.sec-tint,.surface{background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.14))}
.sec-head{max-width:780px;margin:0 auto 64px;text-align:center}
.sec-head p{font-size:17.5px;color:var(--slate)}
.kicker,.eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.lead{font-size:19px;color:var(--slate);max-width:42rem}
.center{text-align:center}
.center .lead{margin-inline:auto}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.center .btnrow{justify-content:center}
.fine{font-size:13px;color:var(--ink-3)}
@media(max-width:700px){.sec,section{padding:64px 0}}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1px solid rgba(18,41,62,.1);
      border-radius:999px;padding:8px 15px;font-size:13px;font-weight:600;color:var(--ink);box-shadow:var(--shadow-sm)}
.chip svg{width:15px;height:15px;flex-shrink:0}

/* ---------- THE footer. One definition, every page. ---------- */
footer{background:#0d1a28;color:var(--navy-mut);padding:64px 0 40px;margin-top:0;border-top:none}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
@media(max-width:760px){.footgrid{grid-template-columns:1fr 1fr}}
footer .brand{color:#fff;font-size:17px;font-weight:800;letter-spacing:-.02em}
footer .brand span{color:var(--teal)}
footer .logo{color:#eef5fb;margin-bottom:10px}
footer h3{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
footer nav a{display:block;color:var(--navy-mut);text-decoration:none;font-size:14px;padding:4px 0}
footer nav a:hover{color:#fff}
footer .fine{color:#8fa6bb}
.footnote{margin-top:44px;border-top:1px solid #223047;padding-top:22px}
.footnote p{margin:6px 0}
.disclaimer{margin-top:26px;font-size:12px;color:#6e8399;max-width:880px}

/* ---------- reveal on scroll ----------
   .rv/.on is the homepage's, .reveal/.in the sub-pages'. Both stay: the
   markup that uses them is not worth churning, and they behave identically. */
@media(prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
  .rv.on{opacity:1;transform:none}
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
}