/* ============================================================================
   Florida Health Insurance Web — approved site stylesheet
   /assets/site.css   (chronicle: created 2026-11-13, phase 15 redesign)

   WHY THIS FILE EXISTS: the site shipped with no external stylesheet at all
   (only a small inline <style> block per page), so it rendered like 1998:
   default blue underlined nav links, no header, no CTA, no type scale. This is
   now the ONE approved stylesheet. Any page edit must link it, and the design
   record (client registry 10-Design) pins its sha256.

   Tokens are contrast-checked against their own backgrounds (WCAG AA 4.5:1 for
   body text, 3:1 for large display type). Do not introduce a colour pair without
   re-running the visual gate: /home/work/services/pc_visual_gate.py
   ========================================================================== */

:root {
  /* colour tokens */
  --ink:        #0b1220;   /* body text on white — 17.4:1 */
  --ink-soft:   #33425a;   /* secondary text on white — 9.5:1 */
  --muted:      #4a5a70;   /* meta text on white — 7.4:1 */
  --brand:      #0e3a63;   /* deep navy — headings, header ground */
  --brand-2:    #10528c;   /* links on white — 7.9:1 */
  --accent:     #0f7355;   /* green CTA ground, white text — 5.3:1 */
  --accent-ink: #ffffff;
  --surface:    #f5f7fb;   /* card / panel ground (the colour that hid white links) */
  --surface-2:  #eef2f8;
  --line:       #d7e0ea;
  --white:      #ffffff;
  --warn:       #8a4b00;

  /* type scale */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --step--1: 0.86rem;
  --step-0:  1.0938rem;
  --step-1:  1.18rem;
  --step-2:  clamp(1.35rem, 2.2vw, 1.62rem);
  --step-3:  clamp(1.6rem, 3vw, 2.1rem);
  --step-4:  clamp(2rem, 4.2vw, 2.9rem);

  /* spacing system (8px base) */
  --s1: 0.5rem; --s2: 0.75rem; --s3: 1rem; --s4: 1.5rem;
  --s5: 2rem;   --s6: 3rem;    --s7: 4rem;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-1: 0 1px 2px rgba(11, 18, 32, .06), 0 8px 24px rgba(11, 18, 32, .06);
  --shadow-2: 0 2px 6px rgba(11, 18, 32, .08), 0 18px 44px rgba(11, 18, 32, .10);
  --measure: 68ch;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--step-0)/1.65 var(--font);
  color: var(--ink);
  background: var(--white);
  overflow-x: clip;            /* an off-canvas drawer must never make the page scroll */
}

img, iframe, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--brand-2); text-underline-offset: 2px; }
a:hover { color: var(--brand); }

:focus-visible {
  outline: 3px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: min(100% - 2 * var(--s4), var(--wrap)); margin-inline: auto; }

/* ---------------------------------------------------------------- skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: var(--white);
  padding: var(--s2) var(--s3); border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
}
.skip:focus { left: 0; }

/* -------------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(11, 18, 32, .02);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: 74px; padding-block: var(--s2);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s2);
  text-decoration: none; color: var(--brand);
  font-weight: 800; letter-spacing: -.01em;
}
.brand__mark {
  width: 40px; height: 40px; flex: none;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--brand) 0%, var(--brand-2) 100%);
  color: var(--white);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; letter-spacing: .02em;
}
.brand__name { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name b { font-size: 1.02rem; }
.brand__name span { font-size: 0.72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

.primary-nav { display: flex; align-items: center; gap: var(--s4); }
.primary-nav ul { display: flex; align-items: center; gap: var(--s4); list-style: none; margin: 0; padding: 0; }
.primary-nav a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.94rem;
  padding: var(--s1) 2px; border-bottom: 2px solid transparent;
}
.primary-nav a:hover { color: var(--brand-2); border-bottom-color: var(--brand-2); }

.header-actions { display: flex; align-items: center; gap: var(--s2); }
.header-phone {
  white-space: nowrap; font-weight: 800; color: var(--brand); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.header-phone:hover { color: var(--brand-2); }

/* mobile drawer: no JS, keyboard accessible via the checkbox pattern */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label {
  display: none; align-items: center; gap: var(--s1);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; font-weight: 700; font-size: 0.9rem;
  background: var(--white); color: var(--ink); cursor: pointer;
}

/* -------------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  padding: 12px 20px; border-radius: 999px; border: 1px solid transparent;
  font: 700 var(--step-0)/1 var(--font); text-decoration: none; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-1); }
.btn--primary:hover { background: #0b5c44; color: var(--accent-ink); transform: translateY(-1px); }
.btn--ghost { background: var(--white); color: var(--brand); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand-2); color: var(--brand-2); }
.btn--onDark { background: var(--white); color: var(--brand); }
.btn--sm { padding: 9px 15px; font-size: 0.9rem; }

/* ----------------------------------------------------------------------- hero */
.hero { background: var(--brand); color: var(--white); padding-block: var(--s6) var(--s7); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--s6); align-items: start;
}
.hero h1 {
  font-size: var(--step-4); line-height: 1.1; letter-spacing: -.02em;
  margin: 0 0 var(--s3); color: var(--white);
}
.hero p.lede { font-size: var(--step-1); color: #dbe7f5; max-width: 46ch; margin: 0 0 var(--s4); }
.hero .eyebrow {
  display: inline-block; margin-bottom: var(--s3);
  font-size: .875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #a9c6e6;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.hero__proof { margin: var(--s4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s1); }
.hero__proof li { color: #cfe0f2; font-size: 0.94rem; padding-left: 26px; position: relative; }
.hero a:not(.btn) { color: #cfe4f8; text-decoration: underline; text-underline-offset: 2px; }
.hero a:not(.btn):hover { color: var(--white); }
/* the subsidy calculator sits INSIDE the hero but is a light card: the hero's
   light-on-navy link colour must not reach into it (measured 1.22:1 on the fine
   print link before this) */
.calc a:not(.btn) { color: var(--brand-2); }
.calc a:not(.btn):hover { color: var(--brand); }
.calc__note a { text-decoration: underline; }
.hero--page { padding-block: var(--s5) var(--s5); }
.hero--page h1 { font-size: var(--step-3); }
.hero__proof li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: #7fd3ac; font-weight: 800;
}

/* --------------------------------------------------- subsidy calculator card */
.calc {
  background: var(--white); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow-2);
  padding: var(--s4); border: 1px solid rgba(255,255,255,.4);
}
.calc h2 { margin: 0 0 var(--s1); font-size: var(--step-2); color: var(--brand); }
.calc__sub { margin: 0 0 var(--s3); color: var(--muted); font-size: var(--step--1); }
.calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-bottom: var(--s2); }
.calc label { display: block; font-size: .8rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 5px; }
.calc input, .calc select {
  width: 100%; padding: 11px 12px; font: inherit; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.calc input:focus, .calc select:focus { border-color: var(--brand-2); }
.calc__out {
  margin-top: var(--s3); padding: var(--s3); border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 0.94rem; color: var(--ink-soft); min-height: 62px;
}
.calc__out strong { color: var(--brand); font-size: var(--step-1); display: block; }
.calc__note { margin: var(--s2) 0 0; font-size: .85rem; color: var(--muted); line-height: 1.5; }

/* ------------------------------------------------------------------ sections */
main { display: block; }
.section { padding-block: var(--s6); }
.section--tight { padding-block: var(--s5); }
.section--alt { background: var(--surface); }
.section__head { max-width: 62ch; margin-bottom: var(--s4); }
.section__head h2 { font-size: var(--step-3); letter-spacing: -.015em; margin: 0 0 var(--s2); color: var(--brand); }
.section__head p { margin: 0; color: var(--ink-soft); }
.prose { max-width: var(--measure); overflow-wrap: anywhere; }
.prose p { margin: 0 0 var(--s3); }
.prose ul { margin: 0 0 var(--s3); padding-left: 1.2rem; }
.prose li { margin-bottom: var(--s1); }
/* the legacy inline <style> blocks that used to style page bodies are gone, so the
   design system has to carry the content elements those pages actually use */
.prose h2 { font-size: var(--step-2); margin: var(--s5) 0 var(--s2); color: var(--ink); }
.prose h3 { font-size: var(--step-1); margin: var(--s4) 0 var(--s2); color: var(--ink); }
.prose h4 { font-size: var(--step-0); margin: var(--s3) 0 var(--s1); }
.prose a { color: var(--brand-2); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--brand); }
.prose img, .prose iframe { max-width: 100%; height: auto; border-radius: var(--r2); }
.prose figure { margin: 0 0 var(--s4); }
.prose figcaption { font-size: var(--step--1); color: var(--muted); margin-top: var(--s1); }
.prose blockquote { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-left: 4px solid var(--accent);
  background: var(--paper-2); border-radius: 0 var(--r2) var(--r2) 0; color: var(--ink-2); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s4); font-size: var(--step--1); }
.prose th, .prose td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.prose th { background: var(--paper-2); color: var(--ink); font-weight: 700; }
.prose details { margin: 0 0 var(--s2); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s2) var(--s3); }
.prose summary { cursor: pointer; font-weight: 650; color: var(--ink); }
.prose code { background: var(--paper-2); padding: .1em .35em; border-radius: 4px; font-size: .92em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }

/* --------------------------------------------------------------------- cards */
.card-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  align-items: stretch;                 /* equal heights: no orphan title row */
}
.card {
  display: flex; flex-direction: column; gap: var(--s1);
  height: 100%;                          /* one card, one block, one height */
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s4);
  text-decoration: none; color: var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: #b9cde2; }
.card__icon {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: var(--surface-2); color: var(--brand);
  display: grid; place-items: center; margin-bottom: var(--s1);
}
.card__icon svg { width: 20px; height: 20px; }
.card h3, .card h2 { font-size: var(--step-1); margin: 0; color: var(--brand); letter-spacing: -.01em; }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.card__more { margin-top: auto; padding-top: var(--s2); font-weight: 700; font-size: .88rem; color: var(--brand-2); }

/* ------------------------------------------------------------------ takeover */
.takeaways {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--brand-2);
  border-radius: var(--radius-sm); padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  color: var(--ink);                      /* never white-on-pale */
}
.takeaways h2 { margin: 0 0 var(--s1); font-size: var(--step-1); color: var(--brand); }
.takeaways p { margin: 0; color: var(--ink-soft); }

/* ----------------------------------------------------------------------- FAQ */
.faq { display: grid; gap: var(--s2); }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); padding: var(--s3) var(--s4);
}
.faq details[open] { box-shadow: var(--shadow-1); }
.faq summary {
  cursor: pointer; font-weight: 700; color: var(--brand);
  list-style: none; display: flex; justify-content: space-between; gap: var(--s3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--brand-2); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: var(--s2) 0 0; color: var(--ink-soft); }

/* ------------------------------------------------------------------- byline */
.byline {
  border-top: 1px solid var(--line); margin-top: var(--s5); padding-top: var(--s3);
  font-size: var(--step--1); color: var(--muted);
}
.byline strong { color: var(--ink); }

/* -------------------------------------------------------------------- footer */
.site-footer { background: var(--brand); color: #d9e6f4; padding-block: var(--s6) var(--s4); }
.site-footer a:not(.btn) { color: #cfe4f8; text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--white); text-decoration: underline; }
/* the footer's link colour must never leak into a button (this is the same class
   of cascade bug that made gsgicorp's link text invisible) */
.site-footer a.btn, .site-footer a.btn:hover { color: var(--accent-ink); text-decoration: none; }
.site-footer a.btn--ghost { color: var(--brand); }
.site-footer h2 {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: #a9c6e6; margin: 0 0 var(--s2);
}
.site-footer__grid {
  display: grid; gap: var(--s5);
  grid-template-columns: 1.4fr repeat(3, 1fr) 1.1fr;
  align-items: start;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 0.92rem; }
.site-footer address { font-style: normal; font-size: 0.95rem; line-height: 1.7; color: #d9e6f4; }
.site-footer address strong { color: var(--white); }
.site-footer__nap .btn { margin-top: var(--s2); }
.site-footer__areas ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__map iframe {
  width: 100%; height: 190px; border: 0; border-radius: var(--radius-sm);
  background: var(--surface); display: block;
}
.site-footer__legal {
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .78rem; line-height: 1.6; color: #b9cde2;
}
.site-footer__legal p { margin: 0 0 var(--s2); }

/* ------------------------------------------------------------- cookie notice */
/* A consent notice is a bar, not a modal. As a floating 268px card it sat on top
   of the hero checklist and the calculator in every screenshot (the design review
   named it the page's worst feature twice). One line at the bottom, never
   covering content, dismissable in one click. */
.cookie-note {
  /* In the flow, not fixed: a consent strip that overlays the hero reads as a
     modal and buries the call to action. It sits above the footer and never
     covers a single pixel of content. */
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  justify-content: center; padding: 10px 14px; margin: 0;
  background: var(--paper-2); color: var(--ink-2);
  border-top: 1px solid var(--line);
  font-size: .85rem; line-height: 1.45;
}
.cookie-note strong { color: var(--ink); }
.cookie-note a { color: var(--brand-2); }
.cookie-note button {
  border: 0; border-radius: 7px; padding: 5px 12px;
  background: var(--brand); color: var(--white); font: 700 .8rem var(--font); cursor: pointer;
}
@media (max-width: 600px) {
  .cookie-note { font-size: .8rem; padding: 8px 12px; gap: 6px; text-align: center; }
}

/* ------------------------------------------------------------- related links */
.related-links { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.related-links a {
  display: inline-block; padding: 7px 13px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--brand-2); font-size: .88rem; font-weight: 600; text-decoration: none;
}
.related-links a:hover { border-color: var(--brand-2); }
.related-links li { max-width: 100%; }
.related-links a { overflow-wrap: anywhere; }

/* ----------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__map { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s5); }
  .hero { padding-block: var(--s5) var(--s6); }
  .calc__row { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav-toggle-label { display: inline-flex; }
  .primary-nav {
    display: none; position: absolute; inset: 100% 0 auto 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-1); padding: var(--s3) var(--s4) var(--s4);
  }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .primary-nav li + li { border-top: 1px solid var(--line); }
  .primary-nav a { display: block; padding: var(--s3) 0; font-size: 1.02rem; }
  .nav-toggle:checked ~ .primary-nav { display: block; }
  .header-phone { display: none; }
  .site-header__bar { gap: var(--s2); }
  .header-actions .btn { padding: 8px 12px; font-size: .84rem; }
  .brand__name b { font-size: .95rem; }
}
@media (max-width: 420px) {
  .header-actions .btn { padding: 7px 10px; font-size: .8rem; }
  .brand__mark { width: 34px; height: 34px; font-size: 13px; }
}
@media (max-width: 560px) {
  /* a 300px card on a 390px screen is a modal, not a notice — keep it slim */
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__areas ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand__name span { display: none; }
}

@media print {
  .site-header, .cookie-note, .hero__cta { display: none; }
}
/* "Add us as a preferred source" and similar inline-styled notices: the inline
   colours were producing measured 1.08:1 text over section backgrounds, so the
   design system owns them now (the markup keeps only the class) */
.preferred-source, .prose .preferred-source {
  margin: var(--s4) 0; padding: var(--s3) var(--s4); text-align: center;
  border: 1px solid var(--line); border-radius: var(--r3); background: var(--paper-2);
  font-size: var(--step--1); line-height: 1.6; max-width: 100%;
}
.preferred-source p { margin: .55rem 0 0; color: var(--ink-2); }
.preferred-source a { color: var(--brand-2); font-weight: 600; text-decoration: underline; }
.notice { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r2);
  padding: var(--s2) var(--s3); font-size: var(--step--1); color: var(--ink-2); margin: var(--s3) 0; }
.notice a { color: var(--brand-2); }

/* ── service grid + callout (home density pass, 2026-11-13) ─────────────────
   The first vision review scored the home page 6/10: "overwhelming density of
   small, dense text". The content did not need less information, it needed
   structure, air and a bigger reading size. */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s4); }
.service {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r3);
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2);
  box-shadow: 0 1px 2px rgba(16,42,67,.04);
}
.service h3 { font-size: var(--step-1); margin: 0; color: var(--ink); }
.service p { margin: 0; color: var(--ink-2); font-size: var(--step-0); line-height: 1.65; }
.service a:not(.btn) { margin-top: auto; font-weight: 650; color: var(--brand-2); text-decoration: none; }
.service a.btn { margin-top: auto; }
.service a:hover { text-decoration: underline; }
.service--cta { background: var(--brand); border-color: var(--brand); }
.service--cta h3 { color: #fff; }
.service--cta p { color: #d7e5f2; }
.service--cta .btn { align-self: flex-start; }

.callout {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  flex-wrap: wrap; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r3); padding: var(--s4) var(--s5);
}
.callout h2 { margin: 0 0 var(--s1); font-size: var(--step-1); }
.callout p { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) { .callout { padding: var(--s4); } .callout .btn { width: 100%; } }

/* legacy page bodies mix wrapped and bare sections; a bare one had zero side
   padding, which the design review saw as text running edge to edge */
main > section:not([class]) {
  padding: var(--s5) var(--s4);
  max-width: calc(var(--measure) + 2 * var(--s4));
  margin-inline: auto;
}
main > section:not([class]) > h2 { font-size: var(--step-2); margin: 0 0 var(--s2); }
main > section:not([class]) > p { margin: 0 0 var(--s3); color: var(--ink-2); }

/* the hero checklist reads as one row of chips, not three stacked lines */
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); list-style: none; margin: var(--s4) 0 0; padding: 0; }
.hero__proof li { padding-left: 22px; }
.hero__proof li::before { left: 0; top: .45em; }

/* Container link colours must not reach a button. Scoped per container instead
   of forced globally: a blanket `a.btn { color:#fff }` turned the ghost CTA white
   on white on the pages where it sits on a light section (measured 1:1), which is
   the same invisible-text failure in the other direction. */
.site-footer a:not(.btn) { color: #cfe4f8; }
.calc a:not(.btn) { color: var(--brand-2); }
.service a:not(.btn) { color: var(--brand-2); }


/* ── page body + rail ──────────────────────────────────────────────────────
   The vision layer's second finding: on a 1440 screen a single 720px column of
   text sat hard against the left edge with a dead gutter on the right. The page
   body is now a two-column grid on wide screens: readable measure on the left,
   a sticky "talk to an agent" card on the right that uses the gutter. */
.fhiw-body { padding-block: var(--s5) var(--s6); }
.fhiw-body .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.fhiw-body .section { padding: 0; }
/* only make room for the rail when a rail exists, otherwise the grid leaves a
   dead 320px column on the right (the reviewer called it "an unbalanced page") */
@media (min-width: 1000px) {
  .fhiw-body .wrap:has(.page-rail) { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
.page-rail { position: sticky; top: calc(75px + var(--s4)); }
.page-rail__card {
  border: 1px solid var(--line); border-radius: var(--r3); background: var(--paper-2);
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2);
}
.page-rail__card h2 { font-size: var(--step-1); margin: 0; }
.page-rail__card p { margin: 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.55; }
.page-rail__card .btn { width: 100%; text-align: center; }
.page-rail__note { color: var(--muted) !important; font-size: .8rem !important; }
@media (max-width: 999px) {
  .page-rail { position: static; order: 2; }
}

/* "wall of text" fix: a scannable fact grid opens prose pages, so the reader gets
   the credentials and the contact in one glance before the paragraphs start */
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s3); margin: 0 0 var(--s5); }
.fact { border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3) var(--s4);
  background: var(--paper-2); display: flex; flex-direction: column; gap: 2px; }
.fact__label { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; }
.fact__value { font-size: var(--step-0); color: var(--ink); font-weight: 600; }
.fact__value a { color: var(--brand-2); text-decoration: none; }
.fact__value a:hover { text-decoration: underline; }

/* legacy offer cards used a bare <a class="cta">; with the design system loaded it
   read as a default underlined link sitting on a card (the design review called it
   "looks like raw HTML"). Any .cta anchor is a button now. */
a.cta, .prose a.cta {
  display: inline-block; margin-top: var(--s2); padding: 10px 18px; border-radius: var(--r2);
  background: var(--brand); color: var(--white); font-weight: 700; text-decoration: none;
}
a.cta:hover, .prose a.cta:hover { background: var(--brand-2); color: var(--white); text-decoration: none; }

/* ---------------------------------------------------------------- injected blocks
   The SEO generators append their OWN wrapper classes (.container, .aeo-facts,
   .upg-b, .linker-hub, .preferred-source) that this design system never knew
   about, and they land OUTSIDE .wrap — so the FAQ, the At a Glance fact grid and
   the guide section ran edge to edge with zero side padding (measured in Chromium:
   <section class=faq> H2 left=0 right=1440). The fix is at the design-system
   level, not per page, so every page the generators touch is covered. */
main > section, body > section { padding-inline: var(--s4); }
main > section:has(.wrap), body > section:has(.wrap) { padding-inline: 0; }
main > section:not(:has(.wrap)) > .container,
body > section:not(:has(.wrap)) > .container,
.aeo-facts > .container, .upg-b > * {
  width: min(100%, var(--wrap)); margin-inline: auto;
}
section.faq:not(:has(.wrap)), section.aeo-facts, section.upg-b, section.linker-hub {
  padding-block: var(--s6);
}
/* .upg-b is emitted AFTER </main> by the guide generator: give it the band
   treatment so it does not read as orphaned text under the footer */
section.upg-b { background: var(--paper); }
section.upg-b h2 { font-size: var(--step-2); color: var(--brand); margin: 0 0 var(--s3); }
section.upg-b h3 { font-size: var(--step-0); color: var(--brand); margin: var(--s4) 0 var(--s2); }
section.upg-b p, section.upg-b li { max-width: var(--measure); overflow-wrap: anywhere; }
section.upg-b img { max-width: 100%; height: auto; border-radius: var(--r2); }
section.linker-hub { background: var(--surface); }
section.linker-hub ul { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none;
  margin: 0; padding: 0; }
section.linker-hub a { display: inline-block; padding: 7px 13px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line); color: var(--brand);
  text-decoration: none; font-size: var(--step--1); font-weight: 600; }
section.linker-hub a:hover { border-color: var(--brand-2); color: var(--brand-2); }
/* At a Glance fact list */
.aeo-facts h2 { font-size: var(--step-2); margin: 0 0 var(--s2); color: var(--brand); }
.aeo-facts-intro { margin: 0 0 var(--s4); color: var(--ink-soft); }
.aeo-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s3); margin: 0; }
.aeo-fact { background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r2); padding: var(--s3) var(--s4); }
.aeo-fact dt { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; }
.aeo-fact dd { margin: 2px 0 0; font-size: var(--step-0); color: var(--ink); font-weight: 600; }
/* the Google preferred source block is injected with INLINE styles by badge.py /
   the AEO pack, which is why it kept reappearing unstyled after each sweep. Pin it
   to the design system; !important is the only way to beat an inline style. */
.preferred-source {
  margin: var(--s5) auto !important; max-width: var(--wrap) !important;
  padding: var(--s4) var(--s5) !important; text-align: center;
  background: var(--surface); border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important; font-size: var(--step--1) !important;
  line-height: 1.6 !important;
}
.preferred-source p { margin: var(--s2) 0 0 !important; color: var(--ink-soft) !important; }
.preferred-source a { color: var(--brand-2) !important; font-weight: 600; }
@media (max-width: 560px) {
  main > section, body > section { padding-inline: 16px; }
  section.faq:not(:has(.wrap)), section.aeo-facts, section.upg-b, section.linker-hub {
    padding-block: var(--s5);
  }
}