/* ============================================================================
   GoCheckMyStorm — shared design system (Storm skin on the Parents chassis)
   Background #F7F3E8 (warm sand) · primary deep storm slate #3D5A6C · CTA
   slate #2F4757 · headings #25313A in serif (Fraunces) · body slate gray
   #5D6771. Never pure black text. Never clinical white page backgrounds.
   ONE alert amber (#BE7E2F) carries every time-sensitive accent.
   RED IS RESERVED: --warnred exists for future ACTIVE-WARNING banners only
   (NWS phase 2). It must never appear in the general palette, verdicts, or
   the 48-hour page. The site's tone is calm competence, not alarm.
   No stock photography — inline SVG line illustrations in muted tones only.
   NOTE: legacy var names (--sage/--sage-deep/--blue/...) are kept from the
   chassis so shared component CSS transfers unchanged; their VALUES are the
   Storm slates. Same convention Parents (blues) and Estate (greens) used.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  color-scheme:light;
  --bg:#F7F3E8;            /* warm sand background */
  --surface:#FFFDF6;
  --ink:#25313A;           /* deep slate headings */
  --body:#5D6771;          /* body text — never pure black */
  --muted:#5D6771;
  --line:#E6DFCE;
  --sage:#3D5A6C;          /* primary deep storm slate (legacy var name kept) */
  --sage-deep:#2F4757;     /* CTA slate */
  --sagesoft:#E6EDF1;
  --blue:#3D5A6C;          /* legacy alias → slate */
  --blue-deep:#2F4757;
  --bluesoft:#E9EFF2;
  --sand:#BE7E2F;          /* THE single alert amber: eyebrows, time-sensitive */
  --sandsoft:#F5EAD6;
  --warnred:#B3492F;       /* RESERVED for active-warning banners only. Unused at launch. */
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;color:var(--body);font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.7;min-height:100vh}
h1,h2,h3,h4,.serif{color:var(--ink)}
.wrap{max-width:620px;margin:0 auto;padding:22px 22px 44px}
.wrap.wide{max-width:1040px}
.serif{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.18;letter-spacing:-.01em}
a{color:var(--sage-deep)}

/* ===== Marketing type scale (articles + homepage); tool stays compact =====
   Serif-forward register: article leads and pull-lines render in Fraunces. */
article{font-size:17px;line-height:1.72}
article p,article li{font-size:17px;line-height:1.72}
article li{margin-bottom:6px}
article h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:32px;line-height:1.22;margin-top:34px;letter-spacing:-.01em}
article h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:24px;line-height:1.28;margin-top:26px}
article .pull{font-family:'Fraunces',Georgia,serif;font-weight:500;font-style:italic;font-size:20px;line-height:1.5;color:var(--ink);border-left:3px solid var(--sand);padding:2px 0 2px 18px;margin:24px 0}

.pill{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
h1.hero{font-size:40px;font-weight:600;margin:14px 0 0}
.lead{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:19px;line-height:1.58;color:var(--muted);margin-top:14px;max-width:560px}
.chips{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;background:var(--surface);border:1px solid var(--line);padding:8px 12px;border-radius:99px}

.btn{cursor:pointer;border:none;border-radius:14px;padding:16px 24px;font-weight:600;font-size:16px;font-family:'Fraunces',Georgia,serif;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--sage-deep),var(--sage));color:#fff;box-shadow:0 12px 28px -10px rgba(37,49,58,.5)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.btn-block{width:100%;justify-content:center}

.opt{width:100%;text-align:left;cursor:pointer;margin-bottom:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:13px;padding:15px 17px;font-weight:600;font-size:15.5px;font-family:'Inter',system-ui,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:border-color .14s,background .14s}
.opt:hover{border-color:var(--sage)}
.opt.on{border-color:var(--sage);background:var(--sagesoft)}

.card{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:20px;margin-top:20px}
.fine{font-size:11.5px;color:var(--muted);margin-top:22px;line-height:1.55}

.progress{flex:1;height:7px;background:var(--line);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--sage),var(--sage-deep));transition:width .3s}

.rise{animation:rise .4s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

input[type=text],input[type=email],input[type=tel],select.qz-sel{font-family:'Inter',system-ui,sans-serif;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;font-size:16px;font-weight:600;background:#fff;color:var(--ink)}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,select.qz-sel:focus{outline:none;border-color:var(--sage)}
select.qz-sel{width:100%;appearance:auto}

/* encouraging reassurance line */
.reassure{margin:12px 0 2px;background:var(--sagesoft);border:1px solid #D3DEE5;border-left:4px solid var(--sage);border-radius:12px;padding:11px 14px;font-size:14px;line-height:1.5;color:var(--ink)}
.reassure b{color:var(--sage-deep)}

/* contextual affiliate slot (content pages; rendered by affiliates.js) */
.aff-slot{margin:26px 0}
.aff-disc{font-size:11px;color:var(--muted);line-height:1.45;margin:0 0 8px}
.aff-card{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--sagesoft);border:1px solid #D3DEE5;border-radius:14px;padding:15px 17px}
.aff-card b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.02rem;color:var(--ink);line-height:1.3}
.aff-card .aff-why{display:block;font-size:.84rem;color:var(--muted);line-height:1.45;margin-top:2px}
.aff-go{flex-shrink:0;display:inline-flex;background:var(--sage-deep);color:#fff;font-weight:700;font-size:.85rem;padding:10px 16px;border-radius:10px;text-decoration:none;white-space:nowrap}
.aff-go.soon{background:var(--bg);color:var(--muted);border:1px solid var(--line)}

/* ============================================================================
   PRESENTATION SYSTEM — shell, bands, kicker, ReadySpectrum
   Palette adds: linen #F0E9D6 · accent slate-mist #E9EEF0 · amber kicker #A8752E
   ============================================================================ */
:root{--linen:#F0E9D6;--accentband:#E9EEF0;--kicker:#A8752E;
  --spGood:#3D5A6C;--spMid:#BE7E2F;--spLow:#CDC4AC}

/* content shell + prose measure */
.shell{max-width:1100px;margin:0 auto;padding:0 24px}
.measure{max-width:740px}
.measure-c{max-width:740px;margin-left:auto;margin-right:auto}

/* full-width alternating bands */
.band{width:100%}
.band>.shell{padding:66px 24px}
.band-linen{background:var(--linen)}
.band-std{background:var(--bg)}
.band-accent{background:var(--accentband)}
@media(max-width:720px){.band>.shell{padding:44px 20px}}

/* amber kicker label above serif heads */
.kicker{display:block;font-family:'Inter',system-ui,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--kicker);margin:0 0 10px}
.serif-head{font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--ink);letter-spacing:-.015em;line-height:1.16;margin:0}
.serif-head em{font-style:italic;color:var(--sage)}

/* ---- ReadySpectrum: the 0–100 readiness score on a labeled spectrum --------
   Descendant of the Parents careSpectrum. Zones: Unprepared → Storm-ready.
   Teaser mode (homepage): neutral track, no marker score. */
.spectrum{width:100%;padding:6px 0 2px}
.sp-track{position:relative;height:14px;border-radius:99px;background:linear-gradient(90deg,#E3DAC2,#E9D9BC 30%,#D6D6C4 55%,#BFCCD4 78%,#3D5A6C)}
.sp-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--surface);border:3px solid var(--sage-deep);box-shadow:0 4px 12px -4px rgba(37,49,58,.5);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:11px;color:var(--sage-deep);transition:left .8s cubic-bezier(.2,.7,.3,1)}
.spectrum.teaser .sp-marker{border-color:#B9AE93;color:#8D8467}
.sp-ends{display:flex;justify-content:space-between;margin-top:9px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.sp-zone{margin-top:6px;text-align:center;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.05rem;color:var(--ink)}
.sp-zone .sc{color:var(--sage-deep)}
.sp-caption{margin:10px auto 0;font-style:italic;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}

/* ---- two-up secondary offramp rows (desktop) ---- */
@media(min-width:680px){.rs-rows-2up{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rs-rows-2up .rs-row{margin-top:0}}

/* ---- usability controls (a11y.js) ---- */
.a11y-widget{position:fixed;left:14px;bottom:14px;z-index:80}
.a11y-toggle{width:46px;height:46px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);color:var(--ink);font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:19px;cursor:pointer;box-shadow:0 6px 18px -8px rgba(37,49,58,.45);display:flex;align-items:baseline;justify-content:center;line-height:1;gap:1px}
.a11y-toggle span{font-size:13px}
.a11y-panel{position:absolute;left:0;bottom:54px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 16px 40px -20px rgba(37,49,58,.5);width:186px}
.a11y-cap{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.a11y-grp{display:flex;gap:6px;margin-bottom:8px}
.a11y-b{flex:1;min-height:44px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;font-family:'Inter',system-ui,sans-serif}
.a11y-b:hover{border-color:var(--sage)}
.a11y-b.on{background:var(--sage);color:#fff;border-color:var(--sage)}
.a11y-wide{width:100%;font-size:13px;min-height:44px}
html.a11y-contrast{--body:#2A343C;--muted:#3A444C}
html.a11y-contrast a:not(.btn):not([class*="cta"]):not([class*="-go"]){text-decoration:underline}
@media print{.a11y-widget{display:none}}

/* shared footer */
.gc-foot{border-top:1px solid var(--line);margin-top:0;padding:26px 22px 34px;background:var(--surface)}
.gc-foot .fin{max-width:1040px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px 34px;align-items:flex-start;justify-content:space-between}
.gc-foot .fbrand{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:16px;color:var(--ink)}
.gc-foot .flinks{display:flex;flex-wrap:wrap;gap:16px}
.gc-foot .flinks a{font-size:13px;color:var(--muted);text-decoration:none}
.gc-foot .flinks a:hover{color:var(--ink)}
.gc-foot .fnote{width:100%;font-size:11.5px;color:var(--muted);line-height:1.6;margin-top:6px}

/* ============================================================================
   Data layer (storm-data.js / storm-live.js): NFIP claims, NRI, disasters,
   live flood zone, and storm-watch banner. Amber-family emphasis only; the
   reserved --warnred appears ONLY in .sw-banner (an active NWS alert).
   ============================================================================ */
.sd-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:16px 0;box-shadow:0 10px 30px -22px rgba(37,49,58,.5)}
.sd-tag{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#A8752E;margin-bottom:8px}
.sd-lede{font-size:1.12rem;line-height:1.6;color:var(--ink);margin:0 0 6px}
.sd-lede b{color:var(--ink)}
.sd-note{background:var(--sandsoft);border-left:4px solid var(--sand);border-radius:10px;padding:11px 15px;font-size:.95rem;color:var(--ink);margin:12px 0}
.sd-stats{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 6px}
.sd-stat{flex:1;min-width:120px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:center}
.sd-n{display:block;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.5rem;color:var(--sage-deep);line-height:1.1}
.sd-l{display:block;font-size:.78rem;color:var(--muted);margin-top:4px;line-height:1.3}
.sd-fine{font-size:.82rem;color:var(--muted);line-height:1.55;margin:10px 0 0}
.sd-caveats{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.sd-caveats h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.05rem;color:var(--ink);margin:0 0 8px}
.sd-caveats ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sd-caveats li{font-size:.9rem;line-height:1.55;color:var(--body);padding-left:0}
.sd-caveats li b{color:var(--ink)}
.sd-asof{font-size:.8rem;color:var(--muted);text-align:center;margin:10px 0 0;font-style:italic}
.sd-empty .sd-lede,.sd-empty h3{color:var(--ink)}
.sd-empty h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.1rem;margin:0 0 6px}
.sd-loading{opacity:.75}
/* NRI risk grid */
.sd-riskgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:14px 0 6px}
.sd-risk{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:10px 13px}
.sd-rk{font-size:.9rem;color:var(--ink);font-weight:600}
.sd-rv{font-size:.78rem;font-weight:800;letter-spacing:.02em;padding:3px 9px;border-radius:99px;white-space:nowrap}
.r-vh{background:#F0D9B8;color:#8A5A16}
.r-h{background:#F5EAD6;color:#A8752E}
.r-m{background:var(--sagesoft);color:var(--sage-deep)}
.r-l{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
/* disaster list */
.sd-dislist{list-style:none;margin:12px 0 4px;padding:0;display:grid;gap:7px}
.sd-dislist li{font-size:.95rem;line-height:1.4}
.sd-dislist a{color:var(--sage-deep);font-weight:600}
.sd-dm{color:var(--muted);font-size:.82rem}
/* live flood zone badges */
.fz-badge{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.03em;padding:3px 9px;border-radius:99px;margin-left:6px;vertical-align:middle}
.fz-high{background:#F0D9B8;color:#8A5A16}
.fz-out{background:var(--sagesoft);color:var(--sage-deep)}
/* ZIP entry */
.zip-form{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
.zip-form input{flex:1;min-width:160px;font-size:1.15rem;font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;padding:14px 16px;border:1.5px solid var(--line);border-radius:13px;background:#fff;color:var(--ink)}
.zip-form input:focus{outline:none;border-color:var(--sage)}
.zip-form button{background:linear-gradient(135deg,var(--sage-deep),var(--sage));color:#fff;border:none;border-radius:13px;padding:14px 24px;font-weight:600;font-size:1rem;font-family:'Fraunces',Georgia,serif;cursor:pointer;min-height:52px}
.zip-priv{font-size:.82rem;color:var(--muted);margin:8px 0 0;line-height:1.5}

/* ---- STORM-WATCH MODE: the ONLY place the reserved warning red appears ---- */
#stormWatchBanner{max-width:1040px;margin:0 auto;padding:0 22px}
.sw-banner{background:#FBEBE6;border:1.5px solid var(--warnred);border-left:6px solid var(--warnred);border-radius:14px;padding:16px 20px;margin:14px 0}
.sw-head{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.15rem;color:var(--warnred);margin-bottom:8px}
.sw-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.sw-list li{font-size:.98rem;color:var(--ink);line-height:1.45}
.sw-area{color:var(--body);font-size:.85rem}
.sw-src{font-size:.82rem;font-weight:700}
.sw-route{font-size:.9rem;color:var(--ink);line-height:1.55;margin:8px 0 0}
/* two-speed compression: when an alert is live, tighten planning-depth content */
body.storm-watch .sd-planning,body.storm-watch .sw-hide{display:none}
body.storm-watch .wrap{padding-top:10px}
@media print{.sd-caveats,.sw-banner{border-color:#999}}