/* v2-site.css — the /v2 corporate website (Home, About, Contact, FAQ, blog, state pages…).
   Kept separate from v2.css on purpose. Everything is namespaced `.v2-site` / `.v2-site-*`;
   a bare class here is a collision risk. Sizing: capped column, px/rem, clamp() on display
   sizes, comp px in trailing comments. `.v2-site-ph` slots hold layout for art not yet
   supplied — do not delete them. */
/* ----------------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------------------- */
.v2-site {
  /* Brand blues, read off the comps. */
  --blue: #0f7fd4;
  --blue-deep: #0b3c74;
  --blue-bright: #0d8bee;
  --blue-dark: #0a63ad;

  --yellow: #ffe000;
  --yellow-ink: #0b3c74;
  --pink: #f0308c;
  --green: #7cb93f;
  --cyan: #14b3ea;

  --ink: #10406f;          /* body copy on white — blue-tinted, never pure black */
  --ink-soft: #4a6b8f;
  --line: #dbe6f2;

  --bg: #ffffff;
  --bg-tint: #f2f7fc;      /* the pale blue band behind alternating sections */

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 48px;
  --radius-pill: 999px;

  /* Must match the sky strip's fade colour (hero-section.png row 0). */
  --home-sky: #e8faff;

  --shadow-card: 0 6px 24px rgba(16, 64, 111, .08);
  --shadow-lift: 0 14px 40px rgba(16, 64, 111, .14);

  /* Measured off the artboards. Prose that must stay narrow is capped where it lives
     (.v2-site-head, .v2-site-legal__body), not here. */
  --wrap: 1520px;
  --wrap-wide: 1840px;
  --gutter: 24px;

  --display: "League Spartan", "Jost", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --body: "Jost", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ----------------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------------------- */
.v2-site *,
.v2-site *::before,
.v2-site *::after { box-sizing: border-box; }

body.v2-site {
  margin: 0;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;      /* the fairy art deliberately overhangs its section */
}

/* :where() keeps element defaults at zero specificity so any class beats them. */
.v2-site :where(img) { max-width: 100%; height: auto; display: block; }
.v2-site :where(a) { color: var(--blue); text-decoration: none; }
.v2-site :where(a):hover { text-decoration: underline; }

/* :where(): defaults only — any one-class rule must win. */
.v2-site :where(h1, h2, h3, h4) {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--blue-deep);
  text-transform: uppercase;
}
/* Wrap the "$" (never the number) in League Spartan prices: its "$" loses its bar at
   800/900 and under background-clip: text. Jost's does not. */
.v2-site-cur {
  font-family: "Jost", var(--body);
  background: inherit;
  -webkit-background-clip: text; background-clip: text;
}
/* :where(), as above. */
.v2-site :where(p) { margin: 0 0 1em; }
.v2-site :where(p:last-child) { margin-bottom: 0; }

/* Screen-reader-only, same contract as .v2-sr on the campaign pages. */
.v2-site-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.v2-site-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--yellow); color: var(--blue-deep);
  padding: 12px 20px; font-weight: 700; border-radius: 0 0 var(--radius-sm) 0;
}
.v2-site-skip:focus { left: 0; }

.v2-site :focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; }

/* Placeholder for artwork that has not been supplied — see the header comment. */
.v2-site-ph {
  background: linear-gradient(135deg, #e6eef6, #d5e3f0);
  box-shadow: inset 0 0 0 1px rgba(16, 64, 111, .08);
  border-radius: var(--radius);
  width: 100%;
}

/* ----------------------------------------------------------------------------------
   3. Layout
   ---------------------------------------------------------------------------------- */
.v2-site-wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gutter);
}
.v2-site-wrap--wide { max-width: var(--wrap-wide); }

.v2-site-sec { padding-block: 84px; }            /* 84 */
.v2-site-sec--tight { padding-block: 56px; }     /* 56 */
.v2-site-sec--tint { background: var(--bg-tint); }

/* Section heading block, centred — used by almost every section on every page. */
.v2-site-head { text-align: center; max-width: 780px; margin: 0 auto 44px; }
.v2-site-head--left { text-align: left; margin-inline: 0; max-width: 640px; }
/* For headings the 780 box breaks mid-phrase. The copy under it keeps 780, so
   only the line length changes. Spanish runs ~20% longer and still wraps. */
.v2-site-head--wide { max-width: 960px; }
/* Two classes: `.v2-site-head p` further down sets the `margin` shorthand, which
   resets margin-inline and leaves this box flush left in the wider head. */
.v2-site-head.v2-site-head--wide > p { max-width: 780px; margin-inline: auto; }
.v2-site-eyebrow {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; font-size: 15.5px; color: var(--blue-bright);
  margin: 0 0 10px;
}
.v2-site-h2 { font-size: clamp(28px, 3.1vw, 46px); }   /* 46 */
/* <em> is the two-tone half of a headline. #0078CD is sampled off the artboards, not --blue-bright. */
.v2-site-h2 em { font-style: normal; color: #0078cd; }
/* Navy, not --ink-soft: the artboards set the lede in body navy. */
.v2-site-head p { margin: 14px 0 0; color: var(--blue-deep); font-size: 18px; line-height: 1.6; }

/* The short blue rule under the left-aligned headings on Why Choose Us. */
.v2-site-rule {
  display: block; width: 56px; height: 4px; border-radius: 2px;
  background: var(--blue-bright); margin: 16px 0 20px;
}

/* ----------------------------------------------------------------------------------
   4. Buttons
   ---------------------------------------------------------------------------------- */
.v2-site-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .01em; font-size: 18px; line-height: 1;
  padding: 17px 30px; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  text-decoration: none; white-space: nowrap;
}
.v2-site-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.v2-site-btn:active { transform: none; }

.v2-site-btn--yellow { background: var(--yellow); color: var(--yellow-ink); }
.v2-site-btn--yellow:hover { background: #ffe93d; }
.v2-site-btn--white { background: #fff; color: var(--blue-deep); }
.v2-site-btn--blue { background: var(--blue); color: #fff; }
.v2-site-btn--pink { background: var(--pink); color: #fff; }
.v2-site-btn--ghost { background: transparent; color: var(--blue-deep); border-color: var(--blue); }
.v2-site-btn--ghost:hover { background: rgba(15, 127, 212, .08); }

/* The negative margin pulls the chip into the pill's left padding. */
.v2-site-btn__ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue); color: #fff;
  margin-left: -14px;
}
.v2-site-btn--blue .v2-site-btn__ico,
.v2-site-btn--pink .v2-site-btn__ico { background: rgba(255, 255, 255, .22); }
.v2-site-btn__ico svg { width: 17px; height: 17px; fill: currentColor; }
/* A supplied SVG chip (become-an-agent.svg): larger because the drawing is inset in its box. */
.v2-site-btn__ico img { width: 28px; height: 28px; }

/* A bare inline icon (no chip) — header call button, info strip, footer socials. */
.v2-site-ico { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }

.v2-site-actions { display: flex; flex-wrap: wrap; gap: 16px; }
/* Centred section CTA. */
.v2-site-actions--center { justify-content: center; margin-top: 34px; }

/* ----------------------------------------------------------------------------------
   5. Header
   ---------------------------------------------------------------------------------- */
.v2-site-hdr {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  box-shadow: 0 1px 0 rgba(16, 64, 111, .07);
}
.v2-site-hdr__in { display: flex; align-items: center; gap: 22px; min-height: 86px; }  /* 86 */

/* Trust strip. Hidden by request (2026-10-12); the markup stays in base.html. */
.v2-site-hdr__strip {
  display: none;
  background: var(--blue-deep);
  color: rgba(255, 255, 255, .92);
}
.v2-site-hdr__strip p {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 2px 16px; margin: 0; padding: 7px 0;
  font-size: 14.5px; line-height: 1.35;
}
.v2-site-hdr__strip-stars { color: var(--yellow); letter-spacing: 1px; }

/* Must track the sticky header's height (120 + air). */
:where([id]) { scroll-margin-top: 136px; }

/* Every page but Home: Home's floating pill (§36a) on scroll, without its transparent
   overlay of the hero. [data-top] comes from base.html's script. */
.v2-site:where(:not(.v2-site--home), .v2-site--glp) .v2-site-hdr {
  background: none; box-shadow: none; pointer-events: none;
  padding: 17px 25px 10px;
}
.v2-site:where(:not(.v2-site--home), .v2-site--glp) .v2-site-hdr__in {
  pointer-events: auto; max-width: none; min-height: 93px; padding-inline: 45px;
  background: #fff; border-radius: 20px;
  box-shadow: 0 4px 2px rgba(0, 0, 0, .25);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.v2-site:where(:not(.v2-site--home), .v2-site--glp) .v2-site-hdr[data-top] .v2-site-hdr__in { box-shadow: none; }
@media (max-width: 1500px) {
  .v2-site:where(:not(.v2-site--home), .v2-site--glp) .v2-site-hdr { padding-inline: 8px; }
  .v2-site:where(:not(.v2-site--home), .v2-site--glp) .v2-site-hdr__in { padding-inline: 16px; }
}
@media (max-width: 1023px) {
  .v2-site:where(:not(.v2-site--home), .v2-site--glp) .v2-site-hdr { padding: 10px 12px; }
  .v2-site:where(:not(.v2-site--home), .v2-site--glp) .v2-site-hdr__in { min-height: 85px; border-radius: 16px; }
}

.v2-site-logo { flex: 0 0 auto; display: block; }
.v2-site-logo:hover { text-decoration: none; }
.v2-site-logo img { width: 168px; height: auto; }   /* 168 */

.v2-site-nav { display: flex; align-items: center; gap: 22px; margin-right: auto; }
.v2-site-nav__item { position: relative; }
.v2-site-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 17.5px; font-weight: 500; color: var(--ink);
  padding: 8px 0; white-space: nowrap;
  background: none; border: 0; font-family: var(--body); cursor: pointer;
}
.v2-site-nav__link:hover { color: var(--blue); text-decoration: none; }
.v2-site-nav__link svg { width: 11px; height: 11px; fill: currentColor; opacity: .7; }

/* Current page: bold, with the pink underline from the comp. */
.v2-site-nav__link[aria-current="page"] {
  font-weight: 700; color: var(--blue-deep);
  box-shadow: inset 0 -3px 0 0 var(--pink);
}

/* Hover opens it for pointers; aria-expanded (page script) for keyboard and touch. */
.v2-site-nav__panel {
  position: absolute; top: 100%; left: -18px; min-width: 250px;
  background: #fff; border-radius: var(--radius); padding: 10px;
  box-shadow: var(--shadow-lift); border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.v2-site-nav__item:hover > .v2-site-nav__panel,
.v2-site-nav__item:focus-within > .v2-site-nav__panel,
.v2-site-nav__link[aria-expanded="true"] + .v2-site-nav__panel {
  opacity: 1; visibility: visible; transform: none;
}
.v2-site-nav__panel a {
  display: block; padding: 9px 14px; border-radius: var(--radius-sm);
  font-size: 16.5px; color: var(--ink); font-weight: 500;
}
.v2-site-nav__panel a:hover { background: var(--bg-tint); color: var(--blue); text-decoration: none; }
.v2-site-nav__panel:not(.v2-site-nav__panel--two) a { white-space: nowrap; }
/* Insurance Plans carries every product page. In one column it is ~750px tall and fills a
   laptop screen, so a panel of more than eight links splits in two (burger menu: one). */
@media (min-width: 1024px) {
  .v2-site-nav__panel--two { columns: 2; column-gap: 8px; min-width: 500px; }
  .v2-site-nav__panel--two a { break-inside: avoid; }
}

.v2-site-hdr__cta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
/* Shown only inside the burger panel below 640px. */
.v2-site-nav__item--call { display: none; }
.v2-site-nav__head, .v2-site-nav__foot { display: none; }
.v2-site-veil { display: none; }

.v2-site-search {
  width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer;
  color: var(--blue-deep); display: grid; place-items: center; border-radius: 50%;
}
.v2-site-search:hover { background: var(--bg-tint); }
.v2-site-search svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; }

.v2-site-hdr__pill { font-size: 14px; padding: 13px 22px; }
.v2-site-hdr__pill-num { display: none; }
.v2-site-hdr__pill-lbl, .v2-site-hdr__pill-num { white-space: nowrap; }

.v2-site-burger {
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  cursor: pointer; color: var(--blue-deep); border-radius: var(--radius-sm);
}
.v2-site-burger svg {
  width: 26px; height: 26px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round;
}

/* ----------------------------------------------------------------------------------
   6. (Removed; the number is kept so §6a and §6b keep theirs.)
   ---------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------
   6a. Compact page head (Privacy, Terms, FAQ, Enrollment Deadlines, Glossary)
   No hero on informative pages, by client request: the content starts under this band.
   ---------------------------------------------------------------------------------- */
.v2-site-phead {
  background: var(--bg-tint);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  padding-block: 56px 48px;
}
.v2-site-phead h1 {
  color: var(--blue-deep); font-weight: 900; line-height: .95;
  font-size: clamp(34px, 3.4vw, 62px);
}
.v2-site-phead__kicker {
  display: block; color: var(--blue-bright);
  font-size: clamp(18px, 1.3vw, 24px); line-height: 1.2; margin-top: 10px;
}
.v2-site-phead__sub { margin: 16px 0 0; max-width: 820px; color: var(--ink-soft); }
.v2-site-phead__meta {
  font-family: var(--display); font-weight: 800; color: var(--blue);
  font-size: 16.5px; margin: 14px 0 0;
}
.v2-site-phead .v2-site-gloss__tools { margin-top: 26px; background: #fff; box-shadow: var(--shadow-card); }
.v2-site-phead + main > .v2-site-sec:first-child { padding-top: 48px; }
@media (max-width: 640px) {
  .v2-site-phead { padding-block: 34px 30px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}

/* ----------------------------------------------------------------------------------
   6b. Contact hero (site.chero()) — Contact, template pages, Why Choose Us, Careers, states
   The comp's pink pill reads "800.390.1730T": unverified, so the pill keeps its link until
   the client confirms a number (CLAUDE.md, phone numbers).
   ---------------------------------------------------------------------------------- */
.v2-site-chero {
  position: relative; overflow: hidden;
  background: #0078cd url("../images/v2/site/contact/hero2-bg.webp") no-repeat center top / cover;
  border-radius: 0 0 64px 64px;                    /* 64 */
  min-height: clamp(380px, 22.19vw, 426px);        /* 426 */
  display: flex; align-items: center; justify-content: center;
}
.v2-site-chero__fairy {
  position: absolute; top: -31px; z-index: 0; pointer-events: none;
  width: 21.8%; max-width: 420px; height: auto;    /* 418 / 420 of 1920 */
}
.v2-site-chero__fairy--l { left: .31%; }
.v2-site-chero__fairy--r { right: .31%; }
.v2-site-chero__in {
  position: relative; z-index: 1; text-align: center;
  padding: 58px 24px 48px; max-width: 1122px;      /* copy block 1122 wide */
}
.v2-site-chero h1 {
  color: #003e6b; text-transform: uppercase; font-weight: 900;
  font-size: clamp(34px, 3.33vw, 64px);            /* 64 */
  line-height: .9; letter-spacing: -.04em;
}
.v2-site-chero h1 em { font-style: normal; color: #0078cd; }
.v2-site-chero__sub {
  margin: 16px auto 0; color: #003e6b; letter-spacing: -.02em;
  font-size: clamp(17.5px, 1.04vw, 20px);            /* 20 */
}
.v2-site-chero__sub b { color: #0078cd; }
/* Keeps the line between the two fairies. */
@media (min-width: 1024px) {
  .v2-site-chero__sub { max-width: min(860px, 56vw); text-wrap: balance; }
  .v2-site:not(.v2-site--state) .v2-site-chero h1 { max-width: min(1000px, 58vw); margin-inline: auto; text-wrap: balance; }
}
.v2-site-chero__badge {
  display: inline-block; margin: 16px 0 0;
  background: #00b6ed; color: #003e6b; border-radius: 8px;
  padding: 8px 16px; box-shadow: 0 4px 0 #008eb9;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(14.5px, .91vw, 17.5px);             /* 16 */
  /* Cap-height trim centres the label; browsers without text-box keep the old look. */
  text-box: trim-both cap alphabetic;
  padding-block: 11px 10px;
}
.v2-site-chero__actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
  margin-top: 30px;
}
.v2-site-chero__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 32px; border-radius: 999px;
  border-bottom: 4px solid; text-decoration: none;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(16.5px, .94vw, 18px); letter-spacing: -.02em;   /* 18 */
  color: #003e6b;
  text-box: trim-both cap alphabetic;   /* centres the label; see the badge above */
}
.v2-site-chero__btn:hover { text-decoration: none; filter: brightness(1.04); }
.v2-site-chero__btn--yellow { background: #ffeb00; border-color: #d3c304; }
.v2-site-chero__btn--white  { background: #fff; border-color: #d9d9d9; padding-inline: 30px; }
.v2-site-chero__btn--pink   { background: #ff399e; border-color: #d82d84; color: #fff; }
/* Below desktop: fairies hidden, arch cropped from its centre, pills stack. */
@media (max-width: 1023px) {
  .v2-site-chero__fairy { display: none; }
  .v2-site-chero { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
}
.v2-site-chero__btn--phone { display: none; }
.v2-site-chero__sub--wrap { max-width: 740px; }
/* Why Choose Us and Careers: the taller variant of the same hero. */
.v2-site-chero--tall { min-height: clamp(400px, 23.75vw, 456px); }   /* 456 */
.v2-site-chero--tall .v2-site-chero__fairy { top: -1px; }
.v2-site-chero--tall .v2-site-chero__in { padding-top: 64px; }
.v2-site-chero--tall .v2-site-chero__actions { margin-top: clamp(40px, 4.53vw, 87px); }  /* 87 */
/* Careers' pink second line. */
.v2-site-chero__kicker {
  margin: 16px 0 0; color: #ff399e; text-transform: uppercase;
  font-family: var(--display); font-weight: 900; letter-spacing: -.02em; line-height: 1;
  font-size: clamp(20px, 1.67vw, 32px);            /* 32 */
}
.v2-site-chero__kicker + .v2-site-chero__sub { margin-top: 16px; }
.v2-site--careers .v2-site-chero--tall .v2-site-chero__actions { margin-top: clamp(36px, 3.6vw, 70px); }
/* PHONE. hero2-bg-mobile.webp is the comp frame less the 105px under the header. */
@media (max-width: 640px) {
  .v2-site-chero {
    display: block;
    background-image: url("../images/v2/site/contact/hero2-bg-mobile.webp");
    background-size: 100% auto;
    border-radius: 0 0 32px 32px;                  /* 32 */
  }
  .v2-site-chero__fairy { display: block; top: auto; max-width: none; }
  /* Bottom-anchored: the copy is px and the fairies vw, so a top offset slid them behind the pills. */
  .v2-site-chero__fairy--l { left: .8%; right: auto; width: 50.4%; bottom: -37.07vw; }  /* 189 wide, 139 cut */
  .v2-site-chero__fairy--r { left: 46.4%; right: auto; width: 52.8%; bottom: -37.87vw; } /* 198 wide, 142 cut */
  .v2-site-chero__in { padding: 14px 2px 37.6vw; margin-inline: auto; }                /* 141 at 375 */
  /* Narrower than the column so the headline breaks in three lines, as drawn. */
  .v2-site-chero h1 { font-size: 40px; letter-spacing: -.04em; max-width: 310px; margin-inline: auto; }   /* 40 */
  .v2-site-chero h1 br { display: none; }
  .v2-site-chero__sub { font-size: 18px; line-height: 1.5; max-width: 297px; }   /* 18 */
  .v2-site-chero__sub b { color: inherit; font-weight: inherit; }
  /* Both phone comps that carry a badge draw it (contact 4854:7255, terms
     4854:7238); only the gap above it is per page. */
  .v2-site-chero__badge { font-size: 16px; padding-block: 13px 12px; }  /* 37 tall */
  .v2-site-chero__actions {
    flex-direction: column; align-items: stretch; gap: 8px;
    width: 292px; margin: 27px auto 0;             /* 292 wide, top at 219 */
  }
  .v2-site-chero__btn { font-size: 18px; }
  .v2-site-chero__btn--desk { display: none; }
  .v2-site-chero__btn--phone { display: inline-flex; }
  .v2-site-chero--tall .v2-site-chero__fairy { top: auto; }
  .v2-site-chero--tall .v2-site-chero__in { padding-top: 14px; }
  .v2-site-chero--tall .v2-site-chero__actions { margin-top: 27px; }
  .v2-site-chero--tall .v2-site-chero__sub { font-size: 16px; max-width: min(345px, calc(100vw - 32px)); }   /* two lines, as the comp */
  .v2-site-chero--tall .v2-site-chero__sub b { color: #0078cd; font-weight: 700; }
  .v2-site-chero__kicker { font-size: 20px; max-width: 290px; margin-inline: auto; }   /* two lines, as the phone comp */
  .v2-site--careers .v2-site-chero--tall .v2-site-chero__actions { margin-top: 20px; }
}

/* ----------------------------------------------------------------------------------
   7. Home hero (the old home design; now used by general-lp)
   Art is cut into __sky and __photo by tools/build-site-images.py. The sky strip is anchored
   to the BOTTOM of the copy so it meets the photo — do not switch it to `top`.
   ---------------------------------------------------------------------------------- */
.v2-site-home-hero { position: relative; background: var(--home-sky); overflow: hidden; }
.v2-site-home-hero__sky {
  background: url("../images/v2/site/home/hero-sky.webp") no-repeat center bottom / 100% auto;
}
/* The fairies are positioned against the hero, not this block: change this top padding and move .v2-site-home-hero__fairy's `top` by the same amount. */
.v2-site-home-hero__copy { position: relative; z-index: 2; text-align: center; padding-block: 22px 34px; }
/* The base h1 size; general-lp overrides it in §7a (one markup shape per rule). §34 restates the phone size. */
.v2-site-home-hero h1 {
  font-size: clamp(46px, 8.7vw, 132px);            /* 122 on the comp */
  font-weight: 900;
  letter-spacing: -.02em; margin: 0;
}
/* A fraction of the h1 so the pair scales together. */
.v2-site-home-hero__pre {
  display: block; font-size: .42em; line-height: 1; letter-spacing: .02em;
  color: var(--blue-bright); margin-bottom: .06em;
}
.v2-site-home-hero__checks {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 34px;
  margin: 14px 0 0; padding: 0; list-style: none;
}
.v2-site-home-hero__checks li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(14.5px, 1.16vw, 18px); color: var(--blue-deep);
}
.v2-site-home-hero__checks svg { width: 19px; height: 19px; fill: var(--green); flex: 0 0 auto; }

/* A <p> after the h1, so face, weight, case and colour are set here, not inherited. */
.v2-site-home-hero__price { margin-top: 26px; }
.v2-site-home-hero__price > span {
  display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  color: var(--blue-deep); letter-spacing: .28em; font-size: clamp(16.5px, 1.7vw, 26px);
}
/* Sized as a pair with the h1 — change one, check the other. */
.v2-site-home-hero__price strong {
  display: block; font-family: var(--display); font-weight: 900;
  color: var(--blue-bright); font-size: clamp(42px, 7.2vw, 110px);   /* 100 on the comp */
  line-height: 1; letter-spacing: -.01em; text-transform: uppercase;
}

/* ----------------------------------------------------------------------------------
   7a. General-LP headline (body.v2-site--glp) — /v2/general-lp ONLY
   The whole sentence is the h1, as three sized spans. Deltas over §7 only.
   ---------------------------------------------------------------------------------- */
.v2-site--glp .v2-site-home-hero h1 {
  /* The h1 owns face, weight, case and tracking; only size differs between its lines. */
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: 1.02;
  color: var(--blue-deep);
  /* Stated to beat §7's clamp; the spans set their own sizes. */
  font-size: inherit;
}
.v2-site--glp .v2-site-home-hero__checks { margin-top: 22px; }

/* A <span> inside the h1 here, not a <p> after it. */
.v2-site--glp .v2-site-home-hero__price { display: block; margin-top: 4px; }
/* The same size as __tail, so the two frame the price. */
.v2-site--glp .v2-site-home-hero__price > span {
  display: block;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  color: var(--blue-deep); letter-spacing: -.02em;
  font-size: clamp(19px, 2.9vw, 48px);
}
/* "$10 A MONTH" has no rule here on purpose: §7 sizes it. The ~2.3x ratio to the lines
   around it is the design — change §7's vw term and this section's together. */
/* The closing clause, the same size as the first line. */
.v2-site--glp .v2-site-home-hero__tail {
  display: block;
  margin-top: 6px;
  font-size: clamp(19px, 2.9vw, 48px);
  /* The one line that wraps, so looser leading. */
  line-height: 1.08;
}

.v2-site-home-hero__lede {
  max-width: 620px; margin: 20px auto 0; color: var(--ink-soft);
}
.v2-site-home-hero .v2-site-actions { justify-content: center; margin-top: 28px; }

/* The hero buttons sit on a ledge: the first box-shadow is a solid offset, out of layout. Overrides :hover's lift. */
.v2-site-home-hero .v2-site-btn--yellow {
  box-shadow: 0 6px 0 #e0c400, 0 12px 20px rgba(11, 60, 116, .18);
}
.v2-site-home-hero .v2-site-btn--white {
  box-shadow: 0 6px 0 #d7dee6, 0 12px 20px rgba(11, 60, 116, .14);
}
.v2-site-home-hero .v2-site-btn--yellow:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #e0c400, 0 16px 24px rgba(11, 60, 116, .22);
}
.v2-site-home-hero .v2-site-btn--white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #d7dee6, 0 16px 24px rgba(11, 60, 116, .18);
}
/* Pressed: the face travels the full 6px ledge. */
.v2-site-home-hero .v2-site-btn--yellow:active,
.v2-site-home-hero .v2-site-btn--white:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 4px 8px rgba(11, 60, 116, .16);
}

/* Rating pill above the headline. */
.v2-site-rating {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border-radius: var(--radius-pill);
  padding: 7px 18px; box-shadow: var(--shadow-card);
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  margin-bottom: 18px;
}
.v2-site-rating__stars { color: #fbbc05; letter-spacing: 1px; }
.v2-site-rating img { width: 56px; }

/* Hidden below 1024px. */
.v2-site-home-hero__fairy {
  /* Positioned against the section, not the copy: move with __copy's top padding. */
  position: absolute; top: 103px; z-index: 1; pointer-events: none;
  width: clamp(160px, 18.5vw, 345px);              /* 336 */
  /* A percentage of its own height, so the drop holds at every width. */
  transform: translateY(20%);
}
.v2-site-home-hero__fairy--l { left: 3%; }
.v2-site-home-hero__fairy--r { right: 2.5%; }

/* The negative margin IS the layout: the copy sits inside the swoosh's dip. Corners are in the file's alpha. */
.v2-site-home-hero__photo { position: relative; display: block; width: 100%; margin-top: -11%; }
/* display: contents keeps the <img> as the flow item for the negative margin. */
.v2-site-home-hero picture { display: contents; }

/* Carrier / press logo strip. */
.v2-site-logos {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 26px 40px; padding-block: 26px;
}
.v2-site-logos img { max-height: 42px; width: auto; opacity: .9; }  /* 42 */

/* Home carrier banner. Seamless only because the track is the list twice and moves
   exactly -50%; spacing is per-item padding, never `gap` (a gap makes the halves unequal). */
/* Outer box positions the pause button; the inner __view clips and fades (a mask would fade the button too). */
.v2-site-marquee { position: relative; display: flex; align-items: center; gap: 12px; padding-block: 26px; }
.v2-site-marquee__view {
  flex: 1; min-width: 0; overflow: hidden;
  /* Fade the ends so logos slide in and out rather than being cut at the gutter. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.v2-site-marquee__track {
  display: flex; align-items: center; width: max-content;
  list-style: none; margin: 0; padding: 0;
  animation: v2-site-marquee 45s linear infinite;
}
.v2-site-marquee__track li { flex: 0 0 auto; padding-inline-end: 64px; }
.v2-site-marquee__track img { display: block; height: 44px; width: auto; max-width: 180px; object-fit: contain; }  /* 44 */
.v2-site-marquee__track .is-tall img { height: 62px; }  /* 62 */
/* No :focus-within: it would keep the banner frozen after "Play". */
.v2-site-marquee:hover .v2-site-marquee__track,
.v2-site-marquee[data-paused] .v2-site-marquee__track { animation-play-state: paused; }
@keyframes v2-site-marquee { to { transform: translateX(-50%); } }

/* The pause control is a flex item after the clipped view, outside the mask. */
.v2-site-marquee__toggle {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--blue-deep); display: grid; place-items: center;
  cursor: pointer; padding: 0;
}
.v2-site-marquee__toggle[hidden] { display: none; }
.v2-site-marquee__toggle svg { width: 14px; height: 14px; fill: currentColor; }
.v2-site-marquee__play,
.v2-site-marquee[data-paused] .v2-site-marquee__pause { display: none; }
.v2-site-marquee[data-paused] .v2-site-marquee__play { display: block; }

/* Reduced motion: no animation, the duplicate half dropped, a static centred row. */
@media (prefers-reduced-motion: reduce) {
  .v2-site-marquee__view { -webkit-mask-image: none; mask-image: none; }
  .v2-site-marquee__track {
    animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 26px 48px;
  }
  .v2-site-marquee__track li { padding-inline-end: 0; }
  .v2-site-marquee__track li[aria-hidden="true"] { display: none; }
}

/* Media marks under the banner. Static: four marks do not need to move. */
.v2-site-press { display: flex; align-items: center; justify-content: center; gap: 18px 40px; flex-wrap: wrap; padding-bottom: 26px; }
.v2-site-press__lbl {
  margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: 13.5px; color: var(--ink-soft);
}
.v2-site-press__row { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.v2-site-press__row img { display: block; height: 44px; width: auto; }  /* 44 */

@media (max-width: 640px) {
  /* Bleed to the screen edge. */
  .v2-site-marquee { margin-inline: calc(var(--gutter) * -1); padding-block: 20px; }
  .v2-site-marquee__track li { padding-inline-end: 40px; }
  .v2-site-marquee__track img { height: 36px; }  /* 36 */
  .v2-site-marquee { padding-inline-end: var(--gutter); }
  .v2-site-marquee__track .is-tall img { height: 50px; }
  .v2-site-press__row img { height: 36px; }
}

/* ----------------------------------------------------------------------------------
   8. Info strip (About / Contact) — call, hours, email, languages
   ---------------------------------------------------------------------------------- */
.v2-site-info {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  background: var(--bg-tint); border-radius: var(--radius);
  padding: 24px 30px; margin-block: 26px;
}
/* The bottom margin matters as much as the top: the strip closes the hero block,
   so without it the next section starts flush against the card and a TINTED one
   (why-choose-us) reads as the card being cut off. */
/* No override at the top end: the base four equal columns put the icons on a
   regular pitch. Content-sized columns (the old auto/1fr/max-content/1fr) and
   space-between both land them unevenly, because the four items differ by
   ~170px of text and only the gaps, not the starts, come out equal. */
/* Equal columns need more room than content-sized ones. The email column wraps
   at a 358 pitch and holds at 378, which the four columns only reach at 1600 --
   measured, not derived; the first two guesses at this number were both short. */
@media (min-width: 1024px) and (max-width: 1599px) {
  .v2-site-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.v2-site-info__item { display: flex; align-items: center; gap: 14px; }
.v2-site-info__ico {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  background: var(--blue); color: #fff; display: grid; place-items: center;
}
.v2-site-info__ico svg { width: 19px; height: 19px; fill: currentColor; }
.v2-site-info__lbl {
  display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 2px;
}
/* anywhere (not break-word): the email is one long token and body overflow-x is hidden. */
.v2-site-info__val {
  font-weight: 600; font-size: 17.5px; color: var(--blue-deep);
  overflow-wrap: anywhere;
}
a.v2-site-info__val { color: var(--blue); }

/* ----------------------------------------------------------------------------------
   9. Card grids
   ---------------------------------------------------------------------------------- */
.v2-site-grid { display: grid; gap: 24px; }
.v2-site-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-site-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-site-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v2-site-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Careers' six-card row: one band, not 3x2. */
.v2-site-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.v2-site-grid--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: start; }
/* Classes, never an inline grid-template: an inline one beats media queries and never stacks. */
.v2-site-grid--wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.v2-site-grid--wide-right { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }

/* The white quote card used for the "objections" row on Home. */
.v2-site-card {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.v2-site-card--tinted { background: var(--bg-tint); box-shadow: none; }
.v2-site-card__ico {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  flex: 0 0 auto;
}
.v2-site-card__ico svg { width: 21px; height: 21px; }
.v2-site-card__hd { display: flex; align-items: flex-start; gap: 13px; }
.v2-site-card__t { font-size: 17.5px; line-height: 1.25; }
.v2-site-card p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; margin: 0; }

/* Icon chip tints, cycled across a row the way the comps do. */
.v2-site-t--blue { background: #e4f1fd; color: var(--blue); }
.v2-site-t--yellow { background: #fff6cc; color: #c79a00; }
.v2-site-t--pink { background: #fde3ef; color: var(--pink); }
.v2-site-t--green { background: #e9f5db; color: #5f9226; }
.v2-site-t--cyan { background: #e0f6fd; color: #0b93c4; }

/* Star-bullet card (About §"Bright, honest", Why Choose Us §"What sets us apart") */
.v2-site-star { display: flex; gap: 14px; align-items: flex-start; }
.v2-site-star__ico {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--yellow); color: #c79a00; display: grid; place-items: center;
}
.v2-site-star__ico svg { width: 20px; height: 20px; fill: currentColor; }

/* ----------------------------------------------------------------------------------
   10. Blue slab — a full-width blue panel; --slab-art picks the star field
   ---------------------------------------------------------------------------------- */
.v2-site-slab {
  background: var(--blue) var(--slab-art, url("../images/v2/site/shared/slab-bg.webp"))
              no-repeat center / cover;
  color: #fff; border-radius: var(--radius-lg);
  padding: 56px 48px; position: relative; overflow: hidden;
}
.v2-site-slab--flat { border-radius: 0; }
.v2-site-slab--steps    { --slab-art: url("../images/v2/site/home/how-it-works-bg.webp"); }
.v2-site-slab--offices  { --slab-art: url("../images/v2/site/home/our-offices-bg.webp"); }
.v2-site-slab--founder  { --slab-art: url("../images/v2/site/shared/consult-bg.webp"); }
.v2-site-slab--bright   { --slab-art: url("../images/v2/site/about-us/bright-honest-bg.webp"); }
.v2-site-slab--onboard  { --slab-art: url("../images/v2/site/careers/easy-system-integration-bg.webp"); }
.v2-site-slab--carriers { --slab-art: url("../images/v2/site/careers/built-for-scale-bg.webp"); }
/* Stars knocked back by client request (white title over busy stars). Raise .62 to fade more. */
.v2-site-slab--carriers {
  background-image: linear-gradient(rgba(15, 127, 212, .62), rgba(15, 127, 212, .62)),
                    var(--slab-art);
}
.v2-site-slab__fairy {
  position: absolute; right: 2%; bottom: -20px; z-index: 1; pointer-events: none;
  width: clamp(170px, 18vw, 330px);                /* 341 */
}
/* Slabs with a fairy let her overhang the bottom edge. */
.v2-site-slab--founder,
.v2-site-slab--bright { overflow: visible; }
/* The founders fairy is cut at the thigh, so this slab clips her at its bottom edge instead. */
.v2-site-slab--founder { overflow: hidden; }
.v2-site-slab--founder .v2-site-slab__fairy { bottom: -56px; }
/* Room for the fairy. */
.v2-site-slab--bright .v2-site-grid { padding-right: 250px; }
.v2-site-slab :where(h2, h3) { color: #fff; }
.v2-site-slab :where(p) { color: rgba(255, 255, 255, .88); }
.v2-site-slab .v2-site-head p { color: rgba(255, 255, 255, .88); }
.v2-site-slab .v2-site-eyebrow { color: var(--yellow); }

/* Translucent tile inside a slab. */
.v2-site-tile {
  background: rgba(255, 255, 255, .12); border-radius: var(--radius);
  padding: 18px 22px;
}
.v2-site-tile__t {
  font-family: var(--display); font-weight: 800; font-size: 18px;
  text-transform: uppercase; color: #fff; margin: 0 0 4px;
}
.v2-site-tile p { font-size: 16.5px; line-height: 1.55; margin: 0; }

/* ----------------------------------------------------------------------------------
   11. How it works (Home §3)
   ---------------------------------------------------------------------------------- */
.v2-site-steps {
  display: flex; align-items: stretch; justify-content: center;
  gap: 20px; flex-wrap: wrap; margin-top: 58px;
}
/* Top padding is the badge's clearance (it hangs 39px above the card): move it with __n's size. */
.v2-site-step {
  background: #fff; border-radius: var(--radius);
  border-bottom: 4px solid var(--cyan);
  padding: 58px 26px 26px; width: 300px; text-align: center; position: relative;
}
/* `top` keeps the badge on the card's edge: change it with the size. */
.v2-site-step__n {
  position: absolute; top: -39px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--blue); border: 4px solid var(--cyan);
  color: #fff; font-family: var(--display); font-weight: 800; font-size: 34px;
  display: grid; place-items: center;
}
/* After .v2-site-slab h3: these sit on a white card inside the slab. */
.v2-site-step h3 { font-size: 21px; margin-bottom: 8px; color: var(--blue-deep); }
.v2-site-step p { color: var(--ink-soft); font-size: 16.5px; margin: 0; }
.v2-site-steps__arrow { align-self: center; }
.v2-site-steps__arrow img { width: 64px; height: 64px; display: block; }

/* ----------------------------------------------------------------------------------
   12. Programs carousel (Home §4)
   A scroll-snap scroller; the arrows only scroll it. Works with JS off.
   ---------------------------------------------------------------------------------- */
.v2-site-carousel__hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 30px;
}
.v2-site-carousel__hd > p { color: var(--ink-soft); text-align: right; margin: 0; max-width: 340px; }
/* Sized to max-content it lost its last word to sub-pixel rounding. */
.v2-site-carousel__hd > .v2-site-h2 { flex: 1 1 auto; }
.v2-site-carousel__nav { display: flex; gap: 10px; }
.v2-site-carousel__btn {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--blue); background: #fff; color: var(--blue);
  display: grid; place-items: center;
}
.v2-site-carousel__btn:last-child { background: var(--blue); color: #fff; }
.v2-site-carousel__btn svg { width: 17px; height: 17px; fill: currentColor; }

.v2-site-carousel__track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px; scrollbar-width: none;
}
.v2-site-carousel__track::-webkit-scrollbar { display: none; }

.v2-site-prog {
  flex: 0 0 300px; scroll-snap-align: start;
  border-radius: var(--radius); overflow: hidden;
  background: var(--blue); color: #fff;
  display: flex; flex-direction: column;
}
.v2-site-prog__media { position: relative; aspect-ratio: 4 / 3; }
.v2-site-prog__media .v2-site-ph,
.v2-site-prog__media img { height: 100%; width: 100%; object-fit: cover; border-radius: 0; }
/* Uneven stops on purpose. Use rgba(15,127,212,0), never `transparent` (it greys the ramp). */
.v2-site-prog__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(to bottom,
              rgba(15, 127, 212, 0) 0%,
              rgba(15, 127, 212, .35) 45%,
              rgba(15, 127, 212, .8) 78%,
              var(--blue) 100%);
  pointer-events: none;
}
.v2-site-prog__badge {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--blue); display: grid; place-items: center;
}
.v2-site-prog__badge svg { width: 19px; height: 19px; fill: currentColor; }
.v2-site-prog__body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.v2-site-prog h3 { color: #fff; font-size: 19px; }
.v2-site-prog p { color: rgba(255, 255, 255, .9); font-size: 16.5px; line-height: 1.55; flex: 1; }
.v2-site-prog .v2-site-btn { align-self: flex-start; padding: 13px 26px; font-size: 14px; }

/* ----------------------------------------------------------------------------------
   13. CTA banner — blue bar with a fairy standing out of its left edge
   ---------------------------------------------------------------------------------- */
.v2-site-cta { position: relative; margin-block: 78px; }
.v2-site-cta__bar {
  background: var(--blue) url("../images/v2/site/shared/cta-band-bg.webp")
              no-repeat center / cover;
  border-radius: var(--radius-lg); color: #fff;
  padding: 44px 48px 44px 280px;                  /* left padding clears the fairy */
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
/* The negative offset is intentional: she stands through the bar. */
.v2-site-cta__fairy {
  position: absolute; left: 24px; bottom: -30px; width: 235px; z-index: 2;
  pointer-events: none;
}
.v2-site-cta h2 { color: #fff; font-size: clamp(22px, 2.5vw, 38px); }
.v2-site-cta p { color: rgba(255, 255, 255, .9); margin: 12px 0 0; max-width: 620px; }
.v2-site-cta__copy { flex: 1 1 420px; }
/* The second sentence on its own line; smaller only on phones (§34). */
.v2-site-cta__sub { display: block; }

/* Disc key: #0078CD label, solid blue chip, chevron in the pill's colour. Only where a comp draws it. */
.v2-site-btn--disc { color: #0078cd; }
.v2-site-btn--disc .v2-site-btn__ico { background: #0078cd; color: var(--yellow); }
.v2-site-btn--disc.v2-site-btn--white .v2-site-btn__ico { color: #fff; }
/* Stroked, not filled: the chevron path is open. */
.v2-site-btn--disc .v2-site-btn__ico svg {
  fill: none; stroke: currentColor; stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
}

.v2-site-cta__note {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  color: var(--yellow); margin-top: 14px; letter-spacing: .04em;
}
.v2-site-cta .v2-site-actions { flex-direction: column; align-items: stretch; }

/* ----------------------------------------------------------------------------------
   14. Reviews
   Quote text is verbatim Google review copy (CLAUDE.md): never reword it.
   ---------------------------------------------------------------------------------- */
.v2-site-rev {
  background: #fff; border-radius: var(--radius); padding: 26px 24px;
  box-shadow: var(--shadow-card); position: relative; margin-top: 16px;
}
/* quote.svg mark; fill comes from `color`. */
.v2-site-rev__mark {
  position: absolute; top: -20px; left: 26px;
  width: 32px; height: 23px; fill: currentColor;
  /* quote.svg's own #0078CD — not --blue or --blue-bright. */
  color: #0078cd;
}
.v2-site-rev__hd { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.v2-site-rev__av {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  background: #e4f1fd; color: var(--blue); display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 16.5px;
}
.v2-site-rev__who { flex: 1; min-width: 0; }
.v2-site-rev__name {
  font-family: var(--display); font-weight: 800; font-size: 17.5px;
  color: var(--blue-deep); display: block; text-transform: none;
}
.v2-site-rev__loc { font-size: 14.5px; color: var(--ink-soft); }
.v2-site-rev__g { width: 22px; height: 22px; flex: 0 0 22px; }
.v2-site-rev__stars { color: #fbbc05; letter-spacing: 2px; font-size: 15.5px; margin-bottom: 10px; }
.v2-site-rev blockquote {
  margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-soft);
  border-top: 1px solid var(--line); padding-top: 12px;
}

/* Trust strip — carriers on the left, press on the right. */
.v2-site-trust { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.v2-site-trust__t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .16em; font-size: 17.5px; color: var(--blue-bright); margin: 0 0 14px;
}
.v2-site-trust__lbl {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: 13.5px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.v2-site-trust__lbl::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.v2-site-trust__row { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.v2-site-trust__row img { max-height: 40px; width: auto; }

/* ----------------------------------------------------------------------------------
   15. Why-Madrinas split (Home §7) — blue panel, feature list, yellow card
   ---------------------------------------------------------------------------------- */
.v2-site-why { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.v2-site-why__list { display: grid; gap: 14px; }
.v2-site-why__item {
  display: flex; gap: 16px; align-items: center;
  background: rgba(255, 255, 255, .12); border-radius: var(--radius);
  padding: 16px 20px;
}
.v2-site-why__ico {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;   /* 43 desktop, 47 phone */
  background: var(--yellow); color: var(--blue-deep); display: grid; place-items: center;
}
/* Line icons: stroked, not filled. */
.v2-site-why__ico svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.v2-site-why__t { font-family: var(--display); font-weight: 800; font-size: 18px; color: #fff; margin: 0 0 3px; }
@media (min-width: 641px) { .v2-site-why__t { font-size: 20px; } }

.v2-site-why__card {
  background: var(--yellow); border-radius: var(--radius-lg);
  padding: 38px 34px; position: relative; color: var(--blue-deep);
}
/* Navy: this card is yellow inside the blue slab. */
.v2-site-why__card h2 {
  font-size: clamp(26px, 2.8vw, 42px); color: var(--blue-deep);
  font-weight: 900;
}
.v2-site-why__card p {
  color: var(--blue-deep); font-weight: 500;
  margin: 16px 0 26px; max-width: 78%;
}
/* A solid white chip; must come after .v2-site-btn--blue to win the (0,2,0) tie. */
.v2-site-why__card .v2-site-btn__ico {
  background: #fff; color: var(--blue);
  width: 40px; height: 40px; flex: 0 0 40px;        /* 34 elsewhere */
  box-shadow: 0 2px 4px rgba(6, 40, 78, .22);
}
.v2-site-why__card .v2-site-btn__ico svg { width: 20px; height: 20px; }

/* A ledge shadow like the home hero's; overrides :hover's lift. */
.v2-site-why__card .v2-site-btn {
  box-shadow: 0 6px 0 #0a5fa0, 0 12px 20px rgba(11, 60, 116, .22);
  /* The chip drives the pill's height. */
  padding-block: 8px;
}
.v2-site-why__card .v2-site-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #0a5fa0, 0 16px 24px rgba(11, 60, 116, .26);
}
.v2-site-why__card .v2-site-btn:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 4px 8px rgba(11, 60, 116, .18);
}
/* Width, offsets, card height and the clearance in .v2-site--home .v2-site-why__card p are one measurement — change them together. */
.v2-site-why__fairy {
  position: absolute; right: -42px; bottom: -165px; width: 244px; pointer-events: none;
}

/* Why Choose Us: a portrait card; the blue strip to its right is where the fairy stands. */
@media (min-width: 1024px) {
  /* The fairy's clearance, not spacing. */
  .v2-site--home .v2-site-why__card p { margin-bottom: 144px; }

  /* Desktop-only cap: it shares a column with the tile grid. */
  .v2-site--why .v2-site-slab .v2-site-h2 { font-size: clamp(28px, 2.5vw, 34px); }

  .v2-site--why .v2-site-why { grid-template-columns: minmax(0, 1.48fr) minmax(0, 1fr); }
  .v2-site--why .v2-site-why__card { max-width: 478px; justify-self: start; }
/* The fairy's clearance: card height, this gap and her `bottom` move together. */
  .v2-site--why .v2-site-why__card p { margin-bottom: 190px; }
  .v2-site--why .v2-site-why__fairy { width: 273px; right: -63px; bottom: -187px; }
}

/* ----------------------------------------------------------------------------------
   16. Accordion / FAQ
   <details>, so it works with JS off.
   ---------------------------------------------------------------------------------- */
.v2-site-acc { border-top: 3px solid var(--blue-bright); border-radius: 6px 6px 0 0; padding-top: 22px; }
.v2-site-acc__t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 19px; color: var(--blue-bright); margin: 0 0 16px;
}
.v2-site-q {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 12px; box-shadow: 0 2px 8px rgba(16, 64, 111, .05);
}
.v2-site-q > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 16.5px; color: var(--blue-deep);
}
.v2-site-q > summary::-webkit-details-marker { display: none; }
.v2-site-q > summary svg {
  width: 15px; height: 15px; flex: 0 0 15px; fill: none;
  stroke: var(--blue); stroke-width: 2.4; transition: transform .18s ease;
}
.v2-site-q[open] > summary svg { transform: rotate(180deg); }
.v2-site-q__a { padding: 0 18px 16px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.65; }

/* ----------------------------------------------------------------------------------
   17. Offices
   ---------------------------------------------------------------------------------- */
.v2-site-offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.v2-site-office {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.v2-site-office__map { aspect-ratio: 16 / 10; }
.v2-site-office__map .v2-site-ph { height: 100%; border-radius: 0; }
/* Maps are 2.21:1 and the slot 1.6:1: crop the sides (the pin is centred). */
.v2-site-office__map img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Corners are baked into the file; §33 re-crops it square and restores the radius. */
.v2-site-missionpic { margin-top: 20px; }
.v2-site-office__body { padding: 18px 20px 20px; }
.v2-site-office__t {
  display: flex; align-items: center; gap: 8px; font-size: 18px; margin-bottom: 8px;
}
.v2-site-office__t svg { width: 17px; height: 17px; fill: var(--yellow); flex: 0 0 auto; }
.v2-site-office__addr { color: var(--ink-soft); font-size: 16.5px; margin: 0 0 12px; }
.v2-site-office__tel {
  border-top: 1px solid var(--line); padding-top: 12px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 15.5px; color: var(--blue-deep); letter-spacing: .04em; margin: 0;
}

/* Home's office band: blue slab, three maps, and the eligibility form beside them. */
.v2-site-offband { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start; }
.v2-site-offband__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.v2-site-offband__hours { font-family: var(--display); font-weight: 800; color: #fff; }
/* Colour restated: it ties `.v2-site-slab :where(p)` on specificity. */
.v2-site-offband__copy {
  max-width: 62ch; margin: 0 0 26px;
  color: rgba(255, 255, 255, .88);
}
.v2-site-offband .v2-site-office { background: rgba(255, 255, 255, .1); }
.v2-site-offband .v2-site-office__t { color: #fff; }
.v2-site-offband .v2-site-office__addr,
.v2-site-offband .v2-site-office__tel { color: rgba(255, 255, 255, .85); }
.v2-site-offband .v2-site-office__tel { border-color: rgba(255, 255, 255, .22); }

/* ----------------------------------------------------------------------------------
   18. Forms
   ---------------------------------------------------------------------------------- */
.v2-site-form-card {
  background: #fff; border-radius: var(--radius-lg); padding: 30px 28px;
  box-shadow: var(--shadow-lift); position: relative; z-index: 2;
}
.v2-site-form-card h2 { font-size: clamp(21px, 2vw, 30px); color: var(--blue-deep); }
.v2-site-form-card__note {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; font-size: 13.5px; color: var(--ink-soft); margin: 6px 0 20px;
}
/* Colour restated: this white card sits inside a .v2-site-slab, whose paragraphs are white. */
.v2-site-form-card__sub {
  margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft);
}
/* The call alternative under the button, rather than above the fields. */
.v2-site-form-card__sub--alt { margin: 14px 0 0; }
.v2-site-form-card__sub a { font-weight: 700; color: var(--blue); }

.v2-site-form { display: grid; gap: 12px; }
.v2-site-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v2-site-form__in {
  width: 100%; border: 1px solid var(--line); background: var(--bg-tint);
  border-radius: var(--radius-sm); padding: 14px 16px;
  font-family: var(--body); font-size: 17.5px; color: var(--ink);
}
.v2-site-form__in::placeholder { color: #8fa8c1; }
.v2-site-form__in:focus { outline: none; border-color: var(--blue); background: #fff; }
.v2-site-form__agree {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 4px 0;
}
.v2-site-form__agree input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; }
/* Consent links: --blue-dark (6.2:1), not --blue (4.2:1, under AA at this size). */
.v2-site-form__agree a { color: var(--blue-dark); font-weight: 600; text-decoration: underline; }
.v2-site-form__submit { width: 100%; justify-content: center; }
.v2-site-form__fine { font-size: 13.5px; color: var(--ink-soft); margin: 0; text-align: center; }
/* A visible note under a field, e.g. the careers NPN's "Required if you are licensed". */
.v2-site-form__hint { font-size: 14px; line-height: 1.4; color: var(--ink-soft); margin: 6px 2px 0; }

/* reCAPTCHA popup: the markup contract v2.js expects (.v2-captcha-pop / .v2-recaptcha). */
.v2-site .v2-captcha-pop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 40, 74, .55);
  display: grid; place-items: center; padding: 20px;
}
.v2-site .v2-captcha-pop[hidden] { display: none; }
.v2-site .v2-captcha-pop__card {
  background: #fff; border-radius: var(--radius); padding: 26px 24px;
  position: relative; max-width: 360px; text-align: center;
}
.v2-site .v2-captcha-pop__close {
  position: absolute; top: 8px; right: 12px; border: 0; background: none;
  font-size: 26px; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.v2-site .v2-captcha-pop__title { font-weight: 600; margin: 0 0 14px; color: var(--blue-deep); }
.v2-site .v2-recaptcha { display: flex; justify-content: center; }

/* The starred form band on Contact — fairies flanking the card. */
.v2-site-formband {
  background: var(--blue) url("../images/v2/site/shared/consult-bg.webp")
              no-repeat center / cover;
  position: relative; overflow: hidden; padding-block: 64px;
}
/* Negative margins tuck the fairies under the card; the files are padded differently, hence unequal pulls. */
.v2-site-formband__in {
  display: grid;
  grid-template-columns: 1fr minmax(0, clamp(480px, 36.9vw, 708px)) 1fr;
  align-items: center; gap: 0;
}
/* Different widths because the files are trimmed differently; they render the same size. */
.v2-site-formband__fairy { justify-self: center; }
.v2-site-formband__fairy--l {
  width: clamp(150px, 15.5vw, 298px);
  justify-self: end; margin-right: clamp(-48px, -2.43vw, -18px);
}
.v2-site-formband__fairy--r {
  width: clamp(170px, 17.66vw, 339px);
  justify-self: start; margin-left: clamp(-95px, -4.9vw, -40px);
}
/* The card paints over both fairies. */
.v2-site-form-card { position: relative; z-index: 1; }

/* ----------------------------------------------------------------------------------
   19. Stats (About)
   ---------------------------------------------------------------------------------- */
.v2-site-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.v2-site-stat { border-radius: var(--radius); padding: 34px 26px; text-align: center; color: #fff; }
@media (min-width: 1024px) and (max-width: 1279px) { .v2-site-stat { padding-inline: 16px; } }
.v2-site-stat--cyan { background: var(--cyan); }
.v2-site-stat--pink { background: var(--pink); }
.v2-site-stat--green { background: var(--green); }
.v2-site-stat__n {
  font-family: var(--display); font-weight: 800; font-size: clamp(38px, 4.4vw, 66px);
  line-height: 1; display: block;
}
.v2-site-stat__l { font-weight: 700; font-size: 16.5px; display: block; margin-top: 10px; }
.v2-site-stat__s {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; font-size: 13.5px; display: block; margin-top: 10px;
  color: rgba(255, 255, 255, .85);
}

/* Founder card on the blue slab. */
.v2-site-founder {
  background: #f7fbff; border-radius: var(--radius-pill);
  border-bottom: 4px solid var(--cyan);
  padding: 24px 34px; display: flex; gap: 22px; align-items: center;
  max-width: 880px; margin-inline: auto;
}
/* No border: the portrait carries its ring in the artwork. */
.v2-site-founder__av {
  width: 84px; height: 84px; flex: 0 0 84px; border-radius: 50%;
  overflow: hidden; background: #e4f1fd;
}
.v2-site-founder__av img { width: 100%; height: 100%; object-fit: cover; }
.v2-site-founder h3 { font-size: 24px; color: var(--blue-deep); }
.v2-site-founder__role {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  color: var(--blue-bright); font-size: 17.5px; margin: 2px 0 8px;
}
.v2-site-founder p { color: var(--ink-soft); font-size: 16.5px; margin: 0; }

/* Dictionary-definition card (About §2). */
.v2-site-def { background: var(--blue); color: #fff; border-radius: var(--radius); padding: 28px 30px; }
.v2-site-def__lbl {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; font-size: 15.5px; color: var(--yellow); margin: 0 0 14px;
}
.v2-site-def__word {
  font-family: var(--display); font-weight: 800; font-size: 38px; color: #fff;
  text-transform: lowercase; display: inline; margin-right: 10px;
}
.v2-site-def__ipa { font-size: 16.5px; color: rgba(255, 255, 255, .8); }
.v2-site-def__body {
  border-top: 2px solid var(--pink); margin-top: 16px; padding-top: 14px;
  color: rgba(255, 255, 255, .92); font-size: 16.5px;
}

/* Compare All Plans' reasons row has four cards, not the five star_row assumes. Desktop
   only: below 1280 the shared grid rules already step 5 -> 3 -> 2 -> 1. */
@media (min-width: 1280px) {
  .v2-site--cmp .v2-site-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------------------------------
   20. Licence table (About)
   ---------------------------------------------------------------------------------- */
.v2-site-lic__hd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 34px; align-items: start; margin-bottom: 30px; }
.v2-site-lic__entity {
  background: #fff; border-radius: var(--radius); padding: 24px 28px;
  box-shadow: var(--shadow-card); border-left: 5px solid var(--blue);
}
.v2-site-lic__entity h3 { font-size: 19px; margin-bottom: 14px; }
.v2-site-lic__kv { display: grid; grid-template-columns: 70px 1fr; gap: 6px 14px; font-size: 16.5px; }
.v2-site-lic__k { font-family: var(--display); font-weight: 800; color: var(--pink); }

.v2-site-lic__tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.v2-site-lic__search {
  flex: 1 1 320px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 13px 22px; font-family: var(--body); font-size: 16.5px; background: #fff; color: var(--ink);
}
.v2-site-lic__search:focus { outline: none; border-color: var(--blue); }
.v2-site-lic__select {
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 13px 20px; font-family: var(--body); font-size: 16.5px; background: #fff; color: var(--ink);
}
.v2-site-lic__count { font-family: var(--display); font-weight: 800; color: var(--blue); font-size: 16.5px; }
.v2-site-lic__count span { color: var(--ink-soft); font-family: var(--body); font-weight: 500; }

/* Scrolls sideways rather than squashing. */
.v2-site-lic__scroll { overflow-x: auto; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); }
.v2-site-lic__table { width: 100%; border-collapse: collapse; min-width: 900px; font-size: 15.5px; }
.v2-site-lic__table th {
  background: var(--blue); color: #fff; text-align: left; padding: 13px 14px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 14.5px; letter-spacing: .04em; white-space: nowrap;
}
.v2-site-lic__table td { padding: 11px 14px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.v2-site-lic__table tbody tr:nth-child(odd) { background: #f7fbff; }
.v2-site-lic__st { font-family: var(--display); font-weight: 800; color: var(--blue); }
.v2-site-lic__badge {
  display: inline-block; background: #e9f5db; color: #4d7d18;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 5px; border: 1px solid #c6e39c;
}
.v2-site-lic__note { font-size: 14.5px; color: var(--ink-soft); margin-top: 18px; line-height: 1.7; }
.v2-site-lic__empty { padding: 26px; text-align: center; color: var(--ink-soft); }

/* PHONE: each row becomes a card (client request). Labels come from data-label — keep
   them in step with the <th>. tr[hidden] is restated so the search filter still hides rows. */
@media (max-width: 640px) {
  .v2-site-lic__table { min-width: 0; }
  .v2-site-lic__table thead { display: none; }
  .v2-site-lic__table tbody tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
    padding: 18px 20px; border-top: 1px solid var(--line);
  }
  .v2-site-lic__table tbody tr[hidden] { display: none; }
  .v2-site-lic__table td { display: block; padding: 0; border: 0; }
  .v2-site-lic__table td.v2-site-lic__st { grid-column: 1 / -1; font-size: 18px; }
  .v2-site-lic__table td.v2-site-lic__loa { grid-column: 1 / -1; }
  .v2-site-lic__table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--display); font-weight: 800; font-size: 11px;
    text-transform: uppercase; letter-spacing: .06em; color: var(--blue);
  }
}

/* ----------------------------------------------------------------------------------
   21. FAQ hub category cards
   ---------------------------------------------------------------------------------- */
.v2-site-cat {
  background: #fff; border-radius: var(--radius); padding: 26px 24px;
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 10px;
}
.v2-site-cat__t { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.v2-site-cat__dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; }
.v2-site-cat p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; margin: 0; flex: 1; }
.v2-site-cat__more {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 15.5px; color: var(--blue); letter-spacing: .03em;
}
.v2-site-cat__more svg { width: 13px; height: 13px; fill: currentColor; }
/* The "coming soon" variant: the phone number itself must not wrap. */
.v2-site-cat__more { flex-wrap: wrap; row-gap: 2px; }
.v2-site-cat__more a { white-space: nowrap; }
a.v2-site-cat__more { flex-wrap: nowrap; }
.v2-site-d--pink { background: var(--pink); }
.v2-site-d--cyan { background: var(--cyan); }
.v2-site-d--yellow { background: #ffd400; }
.v2-site-d--green { background: var(--green); }
.v2-site-d--blue { background: var(--blue); }

/* ----------------------------------------------------------------------------------
   22. Footer
   ---------------------------------------------------------------------------------- */
/* The family photo is meant to be felt, not seen: anchored bottom-right. */
.v2-site-ft {
  background: var(--blue) url("../images/v2/site/shared/footer-bg.webp")
              no-repeat right bottom / cover;
  color: #fff;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin-top: 40px;
  padding-block: 52px 30px; position: relative; overflow: hidden;
}
.v2-site-ft__in { display: grid; grid-template-columns: 1fr 1.55fr .75fr 1.05fr; gap: 36px; align-items: start; }
.v2-site-ft__logo img { width: 260px; }            /* 260 */
/* :where(): as `.v2-site-ft p` it beat every single-class colour below it. */
.v2-site-ft :where(p) { color: rgba(255, 255, 255, .88); font-size: 16.5px; line-height: 1.6; }
.v2-site-ft__habla {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  color: var(--yellow); font-size: 17.5px; margin: 18px 0 2px;
}
.v2-site-ft__tel {
  font-family: var(--display); font-weight: 800; color: #fff;
  font-size: clamp(20px, 1.7vw, 26px); display: inline-block;
}
.v2-site-ft__tel:hover { color: var(--yellow); text-decoration: none; }
.v2-site-ft__hours { font-size: 15.5px; color: rgba(255, 255, 255, .8); margin-top: 4px; }
.v2-site-ft__h {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  color: var(--yellow); font-size: 17.5px; margin: 0 0 14px; letter-spacing: .04em;
}
.v2-site-ft__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v2-site-ft__links a { color: rgba(255, 255, 255, .9); font-size: 16.5px; }
.v2-site-ft__links a:hover { color: var(--yellow); text-decoration: none; }
.v2-site-ft__contact { display: grid; gap: 8px; font-size: 16.5px; color: rgba(255, 255, 255, .9); }
.v2-site-ft__contact a { color: rgba(255, 255, 255, .9); }
.v2-site-ft__soc { display: flex; gap: 12px; margin-top: 18px; }
.v2-site-ft__soc a {
  width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
  color: #fff;
}
.v2-site-ft__soc a:hover { background: rgba(255, 255, 255, .16); }
.v2-site-ft__soc svg { width: 20px; height: 20px; fill: currentColor; }

.v2-site-ft__addrs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 36px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.v2-site-ft__addr p { margin: 0; font-size: 15.5px; }
.v2-site-ft__addr-t {
  font-family: var(--display); font-weight: 800; font-size: 15.5px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--yellow);
  margin-bottom: 3px;
}

.v2-site-ft__base {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
  margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18);
}
.v2-site-ft__bbb img { width: 130px; height: auto; display: block; }
.v2-site-ft__disc { font-size: 13.5px; color: rgba(255, 255, 255, .72); line-height: 1.6; margin: 0; }
.v2-site-ft__copy { font-size: 13.5px; color: rgba(255, 255, 255, .72); white-space: nowrap; }

/* ----------------------------------------------------------------------------------
   23. Topic card — pale panel, headline over a cyan rule, checklist, closing note
   ---------------------------------------------------------------------------------- */
.v2-site-topic {
  background: var(--bg-tint); border-radius: var(--radius-lg);
  padding: 34px 32px; display: flex; flex-direction: column; gap: 14px;
}
.v2-site-topic h3 { font-size: clamp(20px, 1.9vw, 27px); color: var(--blue-bright); }
.v2-site-topic__rule {
  display: block; width: 54px; height: 4px; border-radius: 2px;
  background: var(--cyan); margin: 10px 0 4px;
}
.v2-site-topic p { color: var(--ink); font-size: 18px; line-height: 1.65; margin: 0; }
/* !important beats `.v2-site-topic p` (same specificity). */
.v2-site-topic__note { color: var(--blue-dark) !important; font-weight: 500; }
@media (min-width: 641px) {
  .v2-site-topic .v2-site-checks { gap: 14px; }
  .v2-site-topic .v2-site-checks li { font-size: 18px; }
}

/* Check bullets; --plain drops the bold. */
.v2-site-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.v2-site-checks li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 17px; line-height: 1.5; font-weight: 700; color: var(--blue-deep);
}
.v2-site-checks--plain li { font-weight: 400; color: var(--ink); }
.v2-site-checks--plain b { color: var(--blue-deep); }
.v2-site-checks__sub { display: block; position: relative; padding-left: 14px; }
.v2-site-checks__sub::before { content: "\2022"; position: absolute; left: 0; color: var(--blue-bright); }
.v2-site-checks svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 4px; fill: var(--blue-bright); }
.v2-site-checks--green svg { fill: var(--green); }
.v2-site-checks--white li { color: #fff; font-weight: 400; }
.v2-site-checks--white svg { fill: #8ed15a; }

/* The left-bordered pale callout that closes the intro section on several pages. */
.v2-site-callout {
  background: var(--bg-tint); border-left: 4px solid var(--blue-bright);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px; color: var(--ink); font-size: 18px; font-weight: 500; line-height: 1.65;
}

/* ----------------------------------------------------------------------------------
   24. Solid blue feature card (What's included in our plans)
   ---------------------------------------------------------------------------------- */
.v2-site-bluecard {
  background: var(--blue); color: #fff; border-radius: var(--radius-lg);
  padding: 32px 30px; display: flex; flex-direction: column; gap: 14px;
}
.v2-site-bluecard h3 { color: #fff; font-size: clamp(19px, 1.8vw, 25px); }
.v2-site-bluecard h4 { color: #fff; font-size: 17.5px; margin-bottom: 8px; }
.v2-site-bluecard p { color: rgba(255, 255, 255, .9); font-size: 16.5px; line-height: 1.6; margin: 0; }
.v2-site-bluecard .v2-site-btn { margin-top: auto; justify-content: center; }
.v2-site-bluecard__sub {
  border-top: 1px solid rgba(255, 255, 255, .28); padding-top: 16px; margin-top: 4px;
}

/* Metal-tier tiles inside a blue card. */
.v2-site-tier { background: rgba(255, 255, 255, .14); border-radius: var(--radius-sm); padding: 13px 18px; }
.v2-site-tier b {
  display: block; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; font-size: 16.5px; letter-spacing: .03em; margin-bottom: 3px;
}
.v2-site-tier span { font-size: 15px; color: rgba(255, 255, 255, .85); }

/* The product pages' intro photo. WordPress's originals are ~560-790px wide: 720px caps the
   upscale at ~1.3x. The Medicare logo stays at its own size (--logo). */
.v2-site-prod__photo {
  width: 100%; max-width: 720px; height: auto;
  justify-self: center; border-radius: var(--radius-xl);
}
.v2-site-prod__photo--logo { width: auto; max-width: 100%; border-radius: 0; }
/* Obamacare's photo: under the checklist, beside it from 1200px (narrower, it would be too small). */
.v2-site-fhc__photo {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 35%;
  margin-top: 28px; border-radius: var(--radius-xl);
}
@media (min-width: 1200px) {
  /* The copy column stretches to the form's height and the photo takes what is left, so both
     columns end on the same line. */
  .v2-site-fhc__copy { align-self: stretch; display: flex; flex-direction: column; }
  .v2-site-fhc__row {
    flex: 1 1 0; min-height: 280px; display: grid; grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr); gap: 48px; align-items: stretch;
  }
  .v2-site-fhc__row .v2-site-checks { gap: 18px; align-content: start; }
  .v2-site-fhc__row .v2-site-checks li { font-size: clamp(18px, 1.2vw, 22px); }
  .v2-site-fhc__row .v2-site-checks svg { width: 20px; height: 20px; flex-basis: 20px; margin-top: .3em; }
  .v2-site-fhc__photo { margin-top: 0; height: 100%; min-height: 0; aspect-ratio: auto; }
}
/* The copy beside it grows with the screen so it holds its half of the row. */
.v2-site-grid:has(> .v2-site-prod__photo) > div :where(p) { font-size: clamp(18px, 1.25vw, 22px); }

/* Protect Your Family's intro photo: cropped 2:1 from 1500px up, anchored top. The radius
   restores the baked-in corners the crop cuts off. */
@media (min-width: 1500px) {
  .v2-site-pyf__photo {
    aspect-ratio: 2 / 1; height: auto; object-fit: cover; object-position: 50% 0;
    border-radius: var(--radius-xl);
  }
}

/* ----------------------------------------------------------------------------------
   25. Generic data table (Enrollment Deadlines)
   Scrolls sideways rather than squashing.
   ---------------------------------------------------------------------------------- */
.v2-site-tbl__scroll { overflow-x: auto; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); }
.v2-site-tbl { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 16.5px; }
.v2-site-tbl th {
  background: var(--blue); color: #fff; text-align: left; padding: 15px 22px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 15px; letter-spacing: .04em;
}
.v2-site-tbl td { padding: 16px 22px; border-top: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; }
.v2-site-tbl tbody tr:nth-child(odd) { background: #f7fbff; }
.v2-site-tbl th:first-child, .v2-site-tbl td:first-child { width: 28%; }
.v2-site-tbl td:first-child { font-weight: 700; color: var(--blue-deep); }
.v2-site-tbl__empty { color: var(--ink-soft); font-style: italic; }

/* PHONE: rows become cards, as §20. Scoped to .v2-site--cal: the state pages use this table too. */
@media (max-width: 640px) {
  .v2-site--cal .v2-site-tbl { min-width: 0; }
  .v2-site--cal .v2-site-tbl thead { display: none; }
  .v2-site--cal .v2-site-tbl tr { display: block; padding: 18px 20px; border-top: 1px solid var(--line); }
  .v2-site--cal .v2-site-tbl td { display: block; width: auto; padding: 0; border: 0; }
  .v2-site--cal .v2-site-tbl td + td { margin-top: 10px; }
  .v2-site--cal .v2-site-tbl td:first-child { font-size: 17px; }
  .v2-site--cal .v2-site-tbl td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--display); font-weight: 800; font-size: 11px;
    text-transform: uppercase; letter-spacing: .06em; color: var(--blue);
  }
}

/* Same card treatment on /qualify-for-a-special-enrollment-period, but up to
   1023: its table needs 760 and the wrap is under that until 1024, so stopping
   at 640 left the whole tablet range scrolling sideways with the second column
   cut off. */
@media (max-width: 1023px) {
  .v2-site--lmc .v2-site-tbl { min-width: 0; }
  .v2-site--lmc .v2-site-tbl thead { display: none; }
  .v2-site--lmc .v2-site-tbl tr { display: block; padding: 18px 20px; border-top: 1px solid var(--line); }
  .v2-site--lmc .v2-site-tbl td { display: block; width: auto; padding: 0; border: 0; }
  .v2-site--lmc .v2-site-tbl td + td { margin-top: 10px; }
  .v2-site--lmc .v2-site-tbl td:first-child { font-size: 17px; }
  .v2-site--lmc .v2-site-tbl td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--display); font-weight: 800; font-size: 11px;
    text-transform: uppercase; letter-spacing: .06em; color: var(--blue);
  }
}

.v2-site-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 15.5px; color: var(--ink-soft); }
.v2-site-note svg { width: 15px; height: 15px; fill: var(--ink-soft); flex: 0 0 15px; }
.v2-site-note b { color: var(--blue-deep); }

/* ----------------------------------------------------------------------------------
   26. Timeline step card (Enrollment Deadlines)
   ---------------------------------------------------------------------------------- */
.v2-site-tl {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px;
}
.v2-site-tl__hd { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.v2-site-tl__n {
  background: #e0f1fd; color: var(--blue); border-radius: 6px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 13px; letter-spacing: .09em; padding: 5px 11px;
}
.v2-site-tl__when { font-size: 15.5px; color: var(--blue-bright); text-align: right; }
.v2-site-tl h3 { font-size: 19px; }
.v2-site-tl p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; margin: 0; }

/* ----------------------------------------------------------------------------------
   27. Careers / agent-recruiting components
   ---------------------------------------------------------------------------------- */
/* Big blue icon tile. The icons are supplied art of different heights, contained in a fixed box. */
.v2-site-icard {
  background: var(--blue); color: #fff; border-radius: var(--radius-lg);
  padding: 44px 20px 30px; text-align: center; min-height: 340px;   /* 355 */
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 22px;
}
.v2-site-icard svg { width: 76px; height: 76px; fill: #fff; }
.v2-site-icard img { width: 150px; height: 150px; object-fit: contain; }   /* 154 */
.v2-site-icard b {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 16.5px; line-height: 1.3; letter-spacing: .02em;
}

/* Photo + caption card. (why-agents-*.webp are the icons in .v2-site-icard, not these.) */
.v2-site-media__img { aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; }
.v2-site-media__img .v2-site-ph,
.v2-site-media__img img { height: 100%; width: 100%; object-fit: cover; border-radius: 0; }
/* Subgrid lines up each row's captions when a title wraps. */
.v2-site-media { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.v2-site-media h3 { font-size: 17.5px; margin: 16px 0 5px; }
.v2-site-media p { color: var(--ink-soft); font-size: 16px; margin: 0; }

/* White panel of carrier logos on a blue slab. */
/* The Careers carrier wall: one supplied image, only centred here. */
.v2-site-logowall { margin-inline: auto; }

/* Unused today; kept as the pattern for a grid of individual logo files. */
.v2-site-logogrid {
  background: #fff; border-radius: var(--radius-lg);
  border-bottom: 5px solid var(--cyan);
  padding: 40px 36px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 28px 44px;
}
.v2-site-logogrid img { max-height: 44px; width: auto; }
.v2-site-logogrid__todo {
  flex-basis: 100%; text-align: center; font-size: 14.5px; color: var(--ink-soft);
  border-top: 1px solid var(--line); padding-top: 18px; margin: 0;
}

/* The Careers office block (the shared footer is kept, so the addresses live here). */
.v2-site-offrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.v2-site-offrow__item { background: var(--bg-tint); border-radius: var(--radius); padding: 20px 22px; }
.v2-site-offrow__t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 15.5px; letter-spacing: .05em; color: var(--blue-bright); margin: 0 0 8px;
}
.v2-site-offrow p { font-size: 16.5px; color: var(--ink-soft); margin: 0 0 6px; }
.v2-site-offrow a { font-weight: 700; }

/* ----------------------------------------------------------------------------------
   28. Visible form labels
   The <label> is always in the markup; this class only decides whether it shows.
   ---------------------------------------------------------------------------------- */
.v2-site-form__lbl {
  display: block; font-size: 15px; font-weight: 600;
  color: var(--blue-deep); margin-bottom: 6px;
}

/* ----------------------------------------------------------------------------------
   29. Glossary
   ---------------------------------------------------------------------------------- */
.v2-site-gloss__intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 44px; align-items: start; }

/* The "need instant clarity?" helper card beside the intro. */
.v2-site-helpcard { background: var(--bg-tint); border-radius: var(--radius-lg); padding: 28px 30px; }
.v2-site-helpcard__t { display: flex; align-items: center; gap: 12px; font-size: 18px; margin-bottom: 14px; }
.v2-site-helpcard__ico {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  background: var(--blue); color: #fff; display: grid; place-items: center;
}
.v2-site-helpcard__ico svg { width: 18px; height: 18px; fill: currentColor; }
.v2-site-helpcard p { color: var(--ink-soft); font-size: 16.5px; }
.v2-site-helpcard__lbl {
  font-size: 14.5px; color: var(--ink-soft); margin: 16px 0 2px;
}
.v2-site-helpcard__tel {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(26px, 2.6vw, 38px); color: var(--blue); display: block; margin-bottom: 16px;
}

/* The letter buttons are real anchors; the script only adds filtering. */
.v2-site-gloss__tools {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--bg-tint); border-radius: var(--radius-lg); padding: 16px 20px;
}
.v2-site-gloss__jump { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; flex: 1; }
.v2-site-gloss__jump b { font-size: 15.5px; color: var(--ink-soft); font-weight: 600; margin-right: 4px; }
.v2-site-gloss__key {
  min-width: 34px; height: 34px; padding: 0 9px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--blue-deep);
  font-family: var(--display); font-weight: 800; font-size: 15.5px; cursor: pointer;
  display: inline-grid; place-items: center; text-decoration: none;
}
.v2-site-gloss__key:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.v2-site-gloss__key[aria-current="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.v2-site-gloss__search {
  flex: 0 1 300px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 11px 18px 11px 40px; font-family: var(--body); font-size: 16.5px;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6b8f' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") no-repeat 14px center / 16px;
  color: var(--ink);
}
.v2-site-gloss__search:focus { outline: none; border-color: var(--blue); }
@media (min-width: 641px) and (max-width: 1279px) { .v2-site-gloss__search { flex-basis: 240px; } }

.v2-site-gloss__group { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 26px; padding-block: 30px; }
.v2-site-gloss__group + .v2-site-gloss__group { border-top: 1px solid var(--line); }
.v2-site-gloss__letter {
  width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 24px;
  scroll-margin-top: 148px;   /* clears the sticky header when jumped to */
}
.v2-site-gloss__terms { display: grid; gap: 14px; }

.v2-site-term { background: var(--bg-tint); border-radius: var(--radius); padding: 22px 24px; }
.v2-site-term h3 { font-size: 18px; color: var(--blue-deep); margin-bottom: 8px; }
.v2-site-term p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; margin: 0; }
.v2-site-term__eg {
  background: #fff; border-left: 4px solid var(--blue-bright);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px; margin-top: 14px; font-size: 16px; color: var(--ink-soft);
}
.v2-site-term__eg b { color: var(--blue-bright); }
.v2-site-gloss__none { padding: 30px; text-align: center; color: var(--ink-soft); }

/* ----------------------------------------------------------------------------------
   30. Legal documents (Privacy Policy, Terms and Conditions)
   One scope class: the styling has to work on bare <h2>/<p>/<ul>.
   ---------------------------------------------------------------------------------- */
.v2-site-legal__band {
  background: var(--blue); color: #fff; border-radius: var(--radius-lg);
  padding: 44px 48px; text-align: center; position: relative; overflow: hidden;
}
.v2-site-legal__band h2 { color: #fff; font-size: clamp(22px, 2.6vw, 38px); }
.v2-site-legal__band p { color: rgba(255, 255, 255, .9); max-width: 620px; margin: 16px auto 0; font-size: 17px; }
.v2-site-legal__band p:first-child { margin-top: 0; }

.v2-site-legal__meta {
  font-family: var(--display); font-weight: 800; color: var(--yellow);
  font-size: 16.5px; margin-top: 16px;
}

/* Prose capped at a 900px measure; minmax keeps the sticky TOC beside the text. */
.v2-site-legal__body { display: grid; grid-template-columns: 250px minmax(0, 900px); gap: 52px; align-items: start; }
.v2-site-legal__body--solo { grid-template-columns: minmax(0, 900px); }

/* Sticky TOC on desktop, a plain list on narrow screens. */
.v2-site-toc { position: sticky; top: 110px; max-height: calc(100vh - 140px); overflow-y: auto; }
.v2-site-toc__t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 14.5px; letter-spacing: .1em; color: var(--ink-soft); margin: 0 0 12px;
}
.v2-site-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.v2-site-toc a {
  display: block; padding: 4px 12px; border-radius: 8px;
  font-size: 15.5px; line-height: 1.35; color: var(--ink-soft);
  border-left: 3px solid transparent;
}
.v2-site-toc a:hover { background: var(--bg-tint); color: var(--blue); text-decoration: none; }
.v2-site-toc a[aria-current="true"] {
  background: var(--bg-tint); color: var(--blue-deep); font-weight: 600;
  border-left-color: var(--blue-bright);
}

.v2-site-legal { color: var(--ink-soft); font-size: 17px; line-height: 1.75; }
.v2-site-legal > section { padding-block: 26px; scroll-margin-top: 148px; }
.v2-site-legal > section + section { border-top: 1px solid var(--line); }
.v2-site-legal h2 { font-size: clamp(21px, 2.1vw, 29px); margin-bottom: 14px; }
.v2-site-legal h2:not(:first-child) { margin-top: 38px; }
.v2-site-legal h3 { font-size: 18px; color: var(--blue-bright); margin: 26px 0 10px; }
.v2-site-legal h4 { font-size: 17px; color: var(--blue-deep); text-transform: none; margin: 20px 0 8px; }
.v2-site-legal p { margin: 0 0 14px; }
.v2-site-legal strong { color: var(--blue-deep); }
.v2-site-legal ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 9px; }
.v2-site-legal li { padding-left: 20px; position: relative; }
.v2-site-legal li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--pink);
}
.v2-site-legal ul ul { margin: 9px 0 0; }
.v2-site-legal a { word-break: break-word; }
/* The all-caps clauses: slightly smaller and looser. */
.v2-site-legal__caps { font-size: 16px; letter-spacing: .01em; }

/* ----------------------------------------------------------------------------------
   31. State pages (RETIRED t1/t2 design — unused since 2026-10-06, see §42)
   ---------------------------------------------------------------------------------- */
/* The white card that overlaps the bottom of the hero. */
.v2-site-statement {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 34px 48px; text-align: center; margin-top: -30px; position: relative; z-index: 2;
}
.v2-site-statement p { color: var(--ink-soft); max-width: 900px; margin-inline: auto; }
.v2-site-statement strong { color: var(--blue-deep); display: inline-block; margin-top: 10px; }

/* "After you enroll" bar — blue, copy left, call button right. */
.v2-site-after {
  background: var(--blue); border-radius: var(--radius-lg); color: #fff;
  padding: 30px 34px; display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap; margin-top: 22px;
}
.v2-site-after h3 { color: #fff; font-size: clamp(20px, 2vw, 28px); margin-bottom: 8px; }
.v2-site-after p { color: rgba(255, 255, 255, .9); font-size: 16.5px; margin: 0; max-width: 760px; }

/* Small four-up reason cards. */
.v2-site-reason { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 24px 22px; }
.v2-site-reason__ico {
  width: 38px; height: 38px; border-radius: 50%; background: #e0f1fd; color: var(--blue);
  display: grid; place-items: center; margin-bottom: 14px;
}
.v2-site-reason__ico svg { width: 18px; height: 18px; fill: currentColor; }
.v2-site-reason h3 { font-size: 17.5px; margin-bottom: 8px; }
.v2-site-reason p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin: 0; }

/* Big office card: map on top, blue body under it. */
.v2-site-bigoffice { background: var(--blue); border-radius: var(--radius-lg); overflow: hidden; color: #fff; }
/* The ratio sets the shape; the cap stops a single full-width card's map running tall. */
.v2-site-bigoffice__map {
  aspect-ratio: 16 / 7; max-height: 340px; margin: 10px 10px 0;
  border-radius: var(--radius); overflow: hidden;
}
.v2-site-bigoffice__map .v2-site-ph { height: 100%; border-radius: 0; }
.v2-site-bigoffice__body { padding: 26px 30px 30px; }
.v2-site-bigoffice h3 { color: #fff; font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 16px; }
.v2-site-bigoffice p { color: rgba(255, 255, 255, .9); font-size: 16px; line-height: 1.65; }
.v2-site-bigoffice a { color: #fff; text-decoration: underline; }
.v2-site-bigoffice__sub {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  color: #fff; font-size: 16.5px; letter-spacing: .04em; margin: 22px 0 10px;
}
.v2-site-bigoffice .v2-site-checks li { color: #fff; font-weight: 400; font-size: 16px; }
.v2-site-bigoffice .v2-site-checks svg { fill: var(--yellow); }
.v2-site-bigoffice .v2-site-checks b { color: #fff; font-weight: 700; }
.v2-site-bigoffice__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.v2-site-bigoffice__acts .v2-site-btn { padding: 14px 26px; font-size: 14px; }

/* A table on the blue card (Rio Grande Valley drive times). */
.v2-site-bigoffice table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 12px 0 16px; }
.v2-site-bigoffice th {
  text-align: left; padding: 10px 14px; background: rgba(255, 255, 255, .16); color: #fff;
  font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .05em;
}
.v2-site-bigoffice td { padding: 9px 14px; color: rgba(255, 255, 255, .9); border-top: 1px solid rgba(255, 255, 255, .14); }

/* Its star field has a gold wand lower left, so the background is anchored. */
.v2-site-enroll {
  background: var(--blue) url("../images/v2/site/state/aca-enrollment-bg.webp")
              no-repeat center / cover;
  border-radius: var(--radius-lg); color: #fff;
  padding: 30px 28px; text-align: center; position: relative; overflow: hidden;
}
/* Must stay FIRST and in :where(), so __t/__s/__d below win on order. Do not restate it later. */
.v2-site-enroll :where(p) { color: rgba(255, 255, 255, .85); font-size: 15px; margin: 0; }
.v2-site-enroll__t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  color: var(--yellow); font-size: clamp(22px, 2.3vw, 32px); margin: 0;
}
.v2-site-enroll__s {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  color: #fff; font-size: clamp(16.5px, 1.5vw, 21px); margin: 6px 0 0;
}
.v2-site-enroll__d {
  font-family: var(--display); font-weight: 800; color: var(--yellow);
  font-size: clamp(34px, 4vw, 58px); line-height: 1; margin: 4px 0 12px;
}

/* Compliance notice box (the CMS Medicare disclaimer). */
.v2-site-infobox {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--bg-tint); border-radius: var(--radius); padding: 20px 24px;
  color: var(--ink-soft); font-size: 16px; line-height: 1.65;
}
.v2-site-infobox svg { width: 26px; height: 26px; flex: 0 0 26px; fill: var(--blue); margin-top: 1px; }

/* City pill cloud. */
.v2-site-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.v2-site-pills span {
  background: var(--blue); color: #fff; border-radius: var(--radius-pill);
  padding: 9px 18px; font-size: 15.5px;
}

/* Licensing note block. */
.v2-site-licnote { background: var(--bg-tint); border-radius: var(--radius); padding: 22px 26px; margin-top: 30px; }
.v2-site-licnote h3 { font-size: 16.5px; color: var(--blue-bright); margin-bottom: 8px; }
.v2-site-licnote p { color: var(--ink-soft); font-size: 15.5px; margin: 0; }

/* ----------------------------------------------------------------------------------
   32. Responsive
   1024px is the tablet break (matches the campaign pages); 640px the phone break.
   ---------------------------------------------------------------------------------- */
/* Header compaction: the full bar needs ~1700px. */
@media (max-width: 1680px) {
  .v2-site-hdr__in { gap: 16px; }
  .v2-site-logo img { width: 150px; }
  .v2-site-nav { gap: 14px; }
  .v2-site-nav__link { font-size: 16.5px; }
  .v2-site-hdr__pill { font-size: 13px; padding: 12px 17px; }
}
@media (min-width: 1280px) and (max-width: 1400px) {
  .v2-site-hdr__in { gap: 12px; }
  .v2-site-nav__link { font-size: 15.5px; }
  .v2-site-hdr__pill { padding: 12px 14px; }
}

/* At 1280 the bold current-page link (Careers) tips the bar over. */
@media (min-width: 1280px) and (max-width: 1320px) {
  .v2-site-nav { gap: 10px; }
}

@media (max-width: 1279px) {
  .v2-site-hdr__pill { font-size: 13px; padding: 12px 16px; }
  .v2-site-grid--5, .v2-site-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2-site-ft__in { grid-template-columns: 1fr 1fr; gap: 34px; }

  /* The burger arrives at 1200, not 1023: the full nav needs ~1240px and overflow-x is hidden, so Call Now would be unreachable. */
  .v2-site-burger { display: grid; place-items: center; order: 3; }
  .v2-site-hdr__in { position: relative; flex-wrap: wrap; }
  /* A left drawer, not a dropdown: logo and close at the top, the links down the
     left, the legal pair pinned to the foot. The veil sits outside the header so
     it covers the page; the header's z-index 100 keeps the drawer above it. */
  .v2-site-nav {
    position: fixed; inset: 0 auto 0 0; width: min(86vw, 340px);
    background: #fff; border-top: 0; box-shadow: 4px 0 24px rgba(0, 20, 45, .18);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 0 0 24px; margin: 0; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .28s ease, visibility .28s;
  }
  .v2-site-nav[data-open="true"] { transform: none; visibility: visible; }
  .v2-site-veil {
    display: block; position: fixed; inset: 0; z-index: 90;
    background: rgba(0, 20, 45, .55); opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
  }
  .v2-site-veil[data-open="true"] { opacity: 1; pointer-events: auto; }
  .v2-site-navlock, .v2-site-navlock body { overflow: hidden; }
  /* The language pill is fixed at z-index 200 and would float over the veil. */
  .v2-site-navlock .v2-site-langfab { display: none; }

  .v2-site-nav__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 18px 24px 26px;
  }
  .v2-site-nav__logo img { width: 145px; height: auto; display: block; }
  .v2-site-nav__x {
    flex: none; width: 44px; height: 44px; margin-right: -10px;
    display: grid; place-items: center; background: none; border: 0;
    color: var(--blue-deep); cursor: pointer;
  }
  .v2-site-nav__x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

  .v2-site-nav__item { width: 100%; }
  .v2-site-nav__link {
    width: 100%; justify-content: space-between; padding: 15px 24px;
    border-bottom: 0; font-size: 17px;
  }
  /* The current page is marked by a short rule under it, as on the reference. */
  .v2-site-nav__link[aria-current="page"] {
    box-shadow: none; color: var(--blue-deep); position: relative;
  }
  .v2-site-nav__link[aria-current="page"]::after {
    content: ""; position: absolute; left: 24px; bottom: 8px;
    width: 42px; height: 3px; border-radius: 2px; background: var(--yellow);
  }

  .v2-site-nav__foot {
    margin-top: auto; padding: 24px 24px 0; display: flex;
    align-items: center; justify-content: space-between; gap: 16px;
  }
  .v2-site-nav__foot a { color: var(--ink-soft); font-size: 14px; text-decoration: none; }
  .v2-site-nav__foot a:hover { color: var(--blue); text-decoration: underline; }

  @media (prefers-reduced-motion: reduce) {
    .v2-site-nav, .v2-site-veil { transition: none; }
  }
  /* In the panel only aria-expanded opens a submenu; hover is switched off. */
  .v2-site-nav__panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 2px 24px 10px 36px; min-width: 0;
    display: none;
  }
  .v2-site-nav__item:hover > .v2-site-nav__panel { display: none; }
  .v2-site-nav__link[aria-expanded="true"] + .v2-site-nav__panel { display: block; }
}

@media (max-width: 1023px) {
  .v2-site-sec { padding-block: 56px; }
  .v2-site-sec--tight { padding-block: 40px; }

  .v2-site-home-hero__fairy { display: none; }

  .v2-site-grid--4, .v2-site-grid--5, .v2-site-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-site-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-site-grid--split,
  .v2-site-grid--wide-left,
  .v2-site-grid--wide-right { grid-template-columns: 1fr; gap: 32px; }

  .v2-site-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-site-why { grid-template-columns: 1fr; }
  .v2-site-why__fairy { display: none; }
  .v2-site-offices { grid-template-columns: 1fr; }
  .v2-site-offband { grid-template-columns: 1fr; }
  .v2-site-stats { grid-template-columns: 1fr; }
  .v2-site-lic__hd { grid-template-columns: 1fr; }
  .v2-site-slab { padding: 40px 26px; }
  /* Slab fairies are hidden below desktop. */
  .v2-site-slab__fairy { display: none; }
  .v2-site-slab--bright .v2-site-grid { padding-right: 0; }

  .v2-site-cta__bar { padding: 40px 28px; text-align: left; }
  .v2-site-cta__fairy { display: none; }

  .v2-site-formband__in { grid-template-columns: 1fr; }
  .v2-site-formband__fairy { display: none; }

  .v2-site-founder { flex-direction: column; text-align: center; border-radius: var(--radius-lg); }

  .v2-site-carousel__hd p { text-align: left; }
  .v2-site-trust { justify-content: flex-start; }

  .v2-site-offrow { grid-template-columns: 1fr; }
  .v2-site-topic { padding: 26px 24px; }
  .v2-site-bluecard { padding: 26px 22px; }
  .v2-site-icard { padding: 26px 16px 20px; gap: 16px; min-height: 0; }
  .v2-site-icard svg { width: 60px; height: 60px; }
  .v2-site-icard img { width: 84px; height: 84px; }
  .v2-site-logogrid { padding: 28px 20px; gap: 22px 30px; }
  .v2-site-logogrid img { max-height: 34px; }

  .v2-site-gloss__intro { grid-template-columns: 1fr; gap: 28px; }
  /* The TOC becomes a plain list above the prose. */
  .v2-site-legal__body { grid-template-columns: 1fr; gap: 26px; }
  .v2-site-toc { position: static; max-height: none; }
  .v2-site-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
  .v2-site-statement { padding: 26px 24px; margin-top: -20px; }
  .v2-site-pills { justify-content: flex-start; }
}

@media (max-width: 640px) {
  body.v2-site { font-size: 16px; }
  /* A smaller radius on phones. */
  /* The phone gutter, measured off the phone artboards; bleeds follow it via calc(var(--gutter) * -1). */
  .v2-site { --gutter: 30px; --radius-xl: 24px; }
  .v2-site-sec { padding-block: 44px; }
  .v2-site-head { margin-bottom: 30px; }

  /* Phone header: logo centred, burger out of flow on the right. The CTAs go; the number
     moves into the burger panel (.v2-site-nav__item--call). */
  .v2-site-hdr__in { min-height: 100px; gap: 10px; }
  /* Sticky header (Harry, 2026-10-18): at the top the row is the logo centred
     with the burger out of flow; once the page scrolls, the call button opens
     beside the logo and the logo slides left into the space left over. max-width
     is what animates - the logo's position follows it, so there is no second
     transition to keep in step. The number is server-rendered: gtag and CallRail
     swap text nodes and tel: hrefs, never anything a script writes. */
  /* The row wraps by default; with the call button in it a wrap drops the button
     under the logo, so on phones it is one line that shrinks instead. */
  /* gap 0: with the nav and burger out of flow the only siblings are the logo and
     the call button, and a gap beside a zero-width button is dead space the logo
     centres around. The open state carries its own spacing as padding instead. */
  .v2-site-hdr__in { flex-wrap: nowrap; gap: 0; }
  .v2-site-hdr__cta {
    display: flex; gap: 0;
    /* The yellow button's ledge is `box-shadow: 0 4px 0`, which the clip would cut
       off and leave the button looking sliced along the bottom. Room for it below;
       vertical padding costs the closed state nothing, only width is clamped. */
    padding-bottom: 4px; align-items: flex-start;
    max-width: 0; overflow: hidden; visibility: hidden; opacity: 0;
    transition: max-width .22s ease, margin-right .22s ease, opacity .18s ease, visibility .22s;
  }
  .v2-site-hdr__cta .v2-site-search,
  .v2-site-hdr__cta .v2-site-hdr__pill--ghost { display: none; }
  .v2-site-hdr__pill-lbl { display: none; }
  .v2-site-hdr__pill-num { display: inline; }
  /* Sized on the sticky state alone: a later block and the LP header both
     out-specify a plain .v2-site-hdr__pill here. */
  .v2-site-hdr:not([data-top]) .v2-site-hdr__pill {
    font-size: 15px; padding: 12px 15px; gap: 7px; min-height: 0;      /* ~48 tall */
    margin-left: 10px;              /* the gap, inside the clip so it costs 0 closed */
  }
  .v2-site-hdr:not([data-top]) .v2-site-hdr__pill .v2-site-ico { width: 18px; height: 18px; }
  /* The burger clearance belongs to the open state only: carried at the top it
     is 44px of dead space on the right and the logo centres 22px left of true. */
  .v2-site-hdr:not([data-top]) .v2-site-hdr__cta {
    max-width: 185px; margin-right: 40px; visibility: visible; opacity: 1;  /* pill + 10, burger + 12 */
  }
  .v2-site-logo img { transition: width .22s ease; }
  .v2-site-hdr:not([data-top]) .v2-site-logo img { width: clamp(100px, 28vw, 116px); }
  @media (prefers-reduced-motion: reduce) {
    .v2-site-hdr__cta, .v2-site-logo img { transition: none; }
  }
  /* Under 360 the number will not fit beside the logo; the icon alone still dials. */
  @media (max-width: 359px) {
    .v2-site-hdr__pill-num { display: none; }
    .v2-site-hdr__pill { padding: 11px; }
    .v2-site-hdr:not([data-top]) .v2-site-hdr__cta { max-width: 110px; }
  }
  /* `margin-inline: auto` is what slides the logo: it re-centres in whatever the
     call button leaves over, so the move follows that one animating width. */
  .v2-site-logo { flex: 0 1 auto; display: flex; justify-content: center; margin-inline: auto; }
  .v2-site-logo img { width: 165px; }
  /* Both header logos carry ALL their empty space on the right -- the English SVG's ink
     ends at 151 of its 195-unit canvas, the Spanish WebP's at 485 of 586 -- so a logo
     centred by its box reads ~19px left of centre. Nudge by half the dead space, as a
     share of the image's own width so it holds at the 192px data-top size too. Phone only:
     the logo is left-aligned above this, where the padding is what the desktop widths were
     measured against (see the note at the top of the home header block). */
  .v2-site-logo img { transform: translateX(11.3%); }
  html:lang(es) .v2-site-logo img { transform: translateX(8.6%); }
  .v2-site-burger { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .v2-site-nav__item--call { display: block; }
  /* Overrides the mobile link's space-between. */
  .v2-site-nav__item--call .v2-site-nav__link {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    border-bottom: 0; color: var(--blue); font-weight: 700;
    font-size: 15px; align-items: flex-start; white-space: normal;
  }
  /* nowrap keeps the icon beside the label; the label itself still wraps. */
  .v2-site-nav__item--call .v2-site-ico { flex: none; margin-top: 2px; }

  .v2-site-btn { font-size: 15px; padding: 15px 22px; width: 100%; justify-content: center; }
  .v2-site-hdr__pill, .v2-site-cat__more { width: auto; }
  .v2-site-actions { flex-direction: column; align-items: stretch; }

  .v2-site-grid--2, .v2-site-grid--3, .v2-site-grid--4, .v2-site-grid--5, .v2-site-grid--6,
  .v2-site-grid--split, .v2-site-grid--wide-left,
  .v2-site-grid--wide-right { grid-template-columns: 1fr; }
  .v2-site-info { grid-template-columns: 1fr; padding: 20px; }
  /* One field per row below 640, first/last name included (user, 2026-10-18).
     They used to stay side by side here; at 375 that is ~124 per field, and with
     a label over each it is tighter still. */
  .v2-site-form__row { grid-template-columns: 1fr; }
  .v2-site-steps { margin-top: 44px; gap: 40px; }
  /* Top padding keeps the badge's clearance (§11). */
  .v2-site-step { width: 100%; padding: 74px 28px 40px; }
  .v2-site-steps__arrow { display: none; }
  .v2-site-prog { flex: 0 0 82%; }
  /* The slab bleeds back out of the gutter on phones (to 12px off the edge). */
  .v2-site-slab { padding: 32px 14px; border-radius: var(--radius); }
  /* Only slabs inside .v2-site-wrap: --flat slabs are already full bleed and would overflow. */
  .v2-site-slab:not(.v2-site-slab--flat) { margin-inline: -18px; }
  .v2-site-cta { margin-block: 48px; }
  .v2-site-cta__bar { padding: 30px 22px; border-radius: var(--radius); }

  .v2-site-topic { padding: 22px 20px; }
  .v2-site-tl__hd { flex-direction: column; align-items: flex-start; gap: 6px; }
  .v2-site-tl__when { text-align: left; }
  /* The caption card's 4:5 portrait is too tall once it is full-width on a phone. */
  .v2-site-media__img { aspect-ratio: 16 / 10; }
  .v2-site-logogrid img { max-height: 28px; }

  .v2-site-gloss__group { grid-template-columns: 1fr; gap: 14px; }
  .v2-site-gloss__tools { padding: 14px; }
  .v2-site-gloss__search { flex-basis: 100%; }
  .v2-site-toc ol { grid-template-columns: 1fr; }
  .v2-site-legal__band { padding: 28px 22px; }
  .v2-site-statement { padding: 22px 18px; }
  .v2-site-after { padding: 24px 20px; }
  .v2-site-bigoffice__body { padding: 20px 18px 24px; }
  /* Eight-column-wide drive-time tables cannot reflow; let them scroll instead. */
  .v2-site-bigoffice table { display: block; overflow-x: auto; white-space: nowrap; }

  .v2-site-ft { margin-inline: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-inline: 0; }
  .v2-site-ft__in { grid-template-columns: 1fr; gap: 28px; }
  /* Centred throughout BY REQUEST, not the comp — deliberate, do not "restore" it. The flex
     rows need justify-content too. */
  .v2-site-ft__in { text-align: center; }
  .v2-site-ft__logo { display: flex; justify-content: center; }
  .v2-site-ft__logo img { width: 230px; }
  .v2-site-ft__soc { justify-content: center; gap: 14px; }
  .v2-site-ft__soc a { width: 46px; height: 46px; border-radius: 11px; }
  .v2-site-ft__soc svg { width: 25px; height: 25px; }
  .v2-site-ft__base { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  /* The BBB badge's type is in the artwork, so it needs the width to stay legible. */
  .v2-site-ft__bbb img { width: 200px; }
  .v2-site-ft__copy { white-space: normal; }
  .v2-site-def__word { font-size: 30px; }
}

/* ----------------------------------------------------------------------------------
   33. Phone artwork
   Portrait redraws (mobile-design/) replace the landscape backgrounds below 640px. All the
   swaps live here rather than in each component's section.
   ---------------------------------------------------------------------------------- */
@media (max-width: 640px) {

  /* --- Home hero ------------------------------------------------------------- */
  /* The phone sky has the fairies painted in, so the <img> fairies stay hidden. */
  .v2-site-home-hero__sky {
    background-image: url("../images/v2/site/mobile/home-hero-sky.webp");
  }
  /* No pull on phones (a shallow swoosh). The ratio is restated: the <img> carries the desktop crop's width/height. */
  .v2-site-home-hero__photo { margin-top: 0; aspect-ratio: 800 / 783; }

  /* --- Slabs ------------------------------------------------------------------ */
  /* One portrait star field for every slab on phones. */
  /* Pinned top: the file is the tallest artboard's crop. */
  .v2-site-slab {
    --slab-art: url("../images/v2/site/mobile/slab-bg.webp");
    background-position: top center;
  }
  /* Careers draws its own (an extra star cluster). */
  .v2-site-slab--carriers { --slab-art: url("../images/v2/site/mobile/slab-carriers-bg.webp"); }

  /* --- Home's why-slab ---------------------------------------------------------- */
  /* Home only: full bleed (its comp runs the blue to the edges; Why Choose Us does not). */
  .v2-site--home .v2-site-slab:not(.v2-site-slab--flat) {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: 24px;
  }

  /* --- The why-list tiles ------------------------------------------------------- */
  .v2-site-why__list { gap: 20px; }
  .v2-site-why__item { padding: 20px 24px; gap: 21px; }
  .v2-site-why__ico { width: 48px; height: 48px; flex-basis: 48px; }
  .v2-site-why__ico svg { width: 26px; height: 26px; }

  /* --- Bands ------------------------------------------------------------------ */
  .v2-site-cta__bar    { background-image: url("../images/v2/site/mobile/panel-bg.webp"); }
  /* Home keeps the short wide panel with the fairy off the left edge. */
  .v2-site--home .v2-site-cta__bar {
    background-image: url("../images/v2/site/mobile/cta-band-bg.webp");
  }
  /* No phone drawing was supplied; this file is not regenerated by
     tools/build-site-images-mobile.py — read its header before deleting anything in mobile/. */
  .v2-site-formband    { background-image: url("../images/v2/site/mobile/consult-bg.webp"); }
  /* Centred, not top: this drawing's subject is at the bottom. */
  .v2-site-enroll      { background-image: url("../images/v2/site/mobile/enroll-bg.webp"); }
  .v2-site-legal__band { background-image: url("../images/v2/site/mobile/star-band-bg.webp"); }
  .v2-site-ft          { background-image: url("../images/v2/site/mobile/footer-bg.webp"); }
  /* Top-pinned like the slabs. The footer is handled below. */
  .v2-site-cta__bar, .v2-site-legal__band { background-position: top center; }
  /* Full bleed, pinned top so the cyan lip along the top edge is never cropped. */
  .v2-site-ft { background-position: top center; margin-inline: 0; }

  /* --- CTA band, phone ---------------------------------------------------------- */
  /* Phone: she comes back, centred on top of the panel. */
  .v2-site-cta__fairy {
    display: block;
    left: 50%; right: auto; bottom: auto; top: 0;
    transform: translateX(-50%);
    width: 260px;                                   /* 259 */
  }
  /* Her overhang is the section's padding (a margin on the bar would collapse through it). */
  .v2-site-cta { margin-block: 54px; padding-top: 60px; }
  .v2-site-cta__bar {
    /* Top = her height inside the bar plus clearance: moves with .v2-site-cta__fairy's width. */
    padding: 344px 22px 44px;
    border-radius: var(--radius-xl);
    text-align: left;
    display: block;
  }

  /* Home: the headline is indented past her; copy and button run full width. */
  /* Her offsets and the headline indent below share 40vw — keep them one expression. */
  /* top: 0: the section's padding is already her overhang. */
  .v2-site--home .v2-site-cta__fairy {
    left: -21px; top: 0; transform: none;
    width: clamp(110px, 40vw, 150px);               /* 150 at 375 */
  }
  .v2-site--home .v2-site-cta { padding-top: 22px; }
  .v2-site--home .v2-site-cta__bar { padding: 22px 24px 39px; }
  /* The indent is her right edge (the same 40vw), capped where she stops growing. */
  .v2-site--home .v2-site-cta h2 {
    padding-left: clamp(58px, calc(40vw - 52px), 98px);
    margin-right: -19px;
  }
  .v2-site--home .v2-site-cta__copy p { text-align: left; }
  .v2-site--home .v2-site-cta .v2-site-actions { margin-inline: -9px; }

  /* --- The quote key --------------------------------------------------------------- */
  /* The last ask: taller, label left-ranged past the pinned chip, vw-scaled below 375 so the nowrap label fits. */
  .v2-site-cta__bar .v2-site-btn--disc {
    justify-content: flex-start;
    font-size: clamp(16px, 5.33vw, 20px);
    padding: 21px 24px 21px clamp(63px, calc(13.3vw + 21px), 71px);
  }
  .v2-site-cta__bar .v2-site-btn--disc .v2-site-btn__ico {
    width: clamp(42px, 13.3vw, 50px); height: clamp(42px, 13.3vw, 50px);
  }
  .v2-site-cta__bar .v2-site-btn--disc .v2-site-btn__ico svg {
    width: clamp(18px, 5.9vw, 22px); height: clamp(18px, 5.9vw, 22px);
  }

  /* The gap under the copy (pages without the tagline need it too). */
  .v2-site-cta__bar .v2-site-actions { margin-top: 26px; }

  /* --- Full-width buttons ------------------------------------------------------- */
  /* Full-width buttons; the chip is pinned so the label centres on the whole pill. */
  .v2-site-cta__bar .v2-site-btn,
  .v2-site-home-hero .v2-site-btn {
    width: 100%; justify-content: center; position: relative;
  }
  .v2-site-cta__bar .v2-site-btn__ico,
  .v2-site-home-hero .v2-site-btn__ico {
    position: absolute; left: 8px; top: 50%; margin-left: 0;
    transform: translateY(-50%);
  }
  .v2-site-home-hero .v2-site-actions { flex-direction: column; align-items: stretch; }

  /* The home hero pair is not full width; align-items: center makes max-width apply. Clamped for the nowrap label. */
  .v2-site-home-hero .v2-site-actions { align-items: center; }
  .v2-site-home-hero .v2-site-btn {
    max-width: 300px;
    font-size: clamp(16.5px, 4.8vw, 18px);
    padding: clamp(16px, 5.1vw, 19px) clamp(14px, 5.3vw, 20px);
  }

  /* --- The why-card fairy comes back -------------------------------------------- */
  /* This fairy comes back on phones, in the card's bottom-right corner. */
  /* Clipped by the slab's overflow, not the card. -106 keeps her hair clear of the copy. */
  .v2-site-why__fairy {
    display: block;
    right: -28px; bottom: -106px; width: 193px;
  }
  .v2-site-why__card { padding: 24px; }
  /* Her clearance: moves together with .v2-site-why__fairy's `bottom`. */
  .v2-site-why__card p { max-width: none; margin-top: 12px; margin-bottom: 148px; }
  /* Not full width: it would run under her. */
  .v2-site-why__card .v2-site-btn {
    width: auto; font-size: 19px; padding: 8px 26px 8px 22px;
  }
  .v2-site-why__card .v2-site-btn__ico { width: 42px; height: 42px; flex-basis: 42px; }
  .v2-site-why__card .v2-site-btn__ico svg { width: 21px; height: 21px; }

  /* A square crop on phones; the radius is restated because the crop cuts the baked corners. */
  .v2-site-missionpic {
    aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius);
    /* 52%, not 50%: keeps the crop edge off a face. */
    object-position: 52% center;
  }

  /* --- Trust strip -------------------------------------------------------------- */
  /* Phone: one centred column, not the desktop two-column strip. */
  .v2-site-trust { display: block; }
  .v2-site-trust > div + div { margin-top: 44px; }        /* 48 cap-to-cap */
  .v2-site-trust__t {
    font-size: 23px; line-height: 1.14; margin-bottom: 40px;   /* cap 17, 26 leading */
  }
  .v2-site-trust__lbl { margin-bottom: 18px; }            /* 24 cap-to-ink */
  .v2-site-trust__lbl--mid { justify-content: center; }
  .v2-site-trust__lbl--mid::before {
    content: ""; flex: 1; height: 1px; background: var(--line);
  }
  /* Art at its own size; the desktop height cap is lifted. */
  .v2-site-trust__row { justify-content: center; gap: 16px; }   /* 16.3 both axes */
  .v2-site-trust__row img { height: auto; max-height: none; }
  /* Pinned: these files are drawn far larger than their neighbours. */
  .v2-site-trust__row img[src$="ambetter.svg"] { height: 37px; width: auto; }
  .v2-site-trust__row img[src$="footer-bbb-logo.webp"] { height: 40px; width: auto; }
  /* Source-sized art, pinned to the neighbours' height. */
  .v2-site-trust__row img[src*="webp-logo/"],
  .v2-site-trust__row img[src$="cigna-logo.svg"] { height: 37px; width: auto; }
  .v2-site-trust__row--press { gap: 36px; }

  /* --- Carrier / press logos ---------------------------------------------------- */
  /* One scrolling row, bled past the gutter. */
  .v2-site-logos {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none;
    gap: 30px; padding-block: 22px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .v2-site-logos::-webkit-scrollbar { display: none; }
  .v2-site-logos img { flex: 0 0 auto; }

  /* --- Programs rail ------------------------------------------------------------ */
  /* The header is display: contents so `order` can move the nav under the track. */
  [data-rail-wrap] > .v2-site-wrap { display: flex; flex-direction: column; }
  [data-rail-wrap] .v2-site-carousel__hd { display: contents; }
  [data-rail-wrap] .v2-site-carousel__hd p { margin-bottom: 26px; text-align: left; }
  .v2-site-carousel__track {
    order: 2;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: 45px;
    scroll-padding-inline: 45px;
  }
  .v2-site-carousel__nav { order: 3; justify-content: center; margin-top: 24px; }
}

/* ----------------------------------------------------------------------------------
   34. Phone type scale
   A ladder: one phone size per desktop text tier (desktop tiers: new-site-notes §11). A new component's
   font-size needs a line here. .v2-site-enroll :where(p) is left out on purpose (see its note).
   ---------------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body.v2-site { font-size: 18px; }

  /* Out of tier order on purpose, so __disc and __hours keep their sizes. */
  .v2-site-ft :where(p) { font-size: 16.5px; }

  /* 11 -> 12 */
  .v2-site-lic__badge
  { font-size: 12px; }

  /* 11.5 -> 12.5 */
  .v2-site-tl__n
  { font-size: 12.5px; }

  /* 12 -> 13 */
  .v2-site-form-card__note, .v2-site-form__fine, .v2-site-ft__copy, .v2-site-ft__disc, .v2-site-info__lbl,
  .v2-site-stat__s, .v2-site-trust__lbl
  { font-size: 13px; }

  /* 12.5 -> 13.5 */
  .v2-site-bigoffice th, .v2-site-form__agree
  { font-size: 13.5px; }

  /* 13 -> 14 */
  .v2-site-hdr__pill, .v2-site-helpcard__lbl, .v2-site-lic__note, .v2-site-lic__table th,
  .v2-site-logogrid__todo, .v2-site-rev__loc, .v2-site-toc__t
  { font-size: 14px; }

  /* 13.5 -> 14.5 */
  .v2-site-form__lbl, .v2-site-tbl th, .v2-site-tier span
  { font-size: 14.5px; }

  /* 14 -> 15 */
  .v2-site-bigoffice table, .v2-site-bigoffice__acts .v2-site-btn, .v2-site-cat__more, .v2-site-def__lbl,
  .v2-site-eyebrow, .v2-site-ft__hours, .v2-site-gloss__jump b, .v2-site-gloss__key, .v2-site-lic__table,
  .v2-site-licnote p, .v2-site-note, .v2-site-office__tel, .v2-site-offrow__t, .v2-site-pills span,
  .v2-site-prog .v2-site-btn, .v2-site-rating, .v2-site-rev__stars, .v2-site-tl__when, .v2-site-toc a
  { font-size: 15px; }

  /* 14.5 -> 16 */
  .v2-site-bigoffice .v2-site-checks li, .v2-site-bigoffice p, .v2-site-infobox, .v2-site-legal__caps,
  .v2-site-media p, .v2-site-reason p, .v2-site-term__eg
  { font-size: 16px; }

  /* 15 -> 16.5 */
  .v2-site-after p, .v2-site-bigoffice__sub, .v2-site-bluecard p, .v2-site-btn, .v2-site-card p,
  .v2-site-cat p, .v2-site-def__body, .v2-site-def__ipa, .v2-site-founder p,
  .v2-site-ft__contact, .v2-site-ft__links a, .v2-site-gloss__search, .v2-site-helpcard p,
  .v2-site-icard b, .v2-site-legal__meta, .v2-site-lic__count, .v2-site-lic__kv, .v2-site-lic__search,
  .v2-site-lic__select, .v2-site-licnote h3, .v2-site-nav__link, .v2-site-nav__panel a, .v2-site-office__addr,
  .v2-site-offrow p, .v2-site-prog p, .v2-site-q > summary, .v2-site-q__a, .v2-site-rev blockquote,
  .v2-site-rev__av, .v2-site-stat__l, .v2-site-step p, .v2-site-tbl, .v2-site-term p, .v2-site-tier b,
  .v2-site-tile p, .v2-site-tl p
  { font-size: 16.5px; }

  /* 15.5 -> 17 */
  .v2-site-callout, .v2-site-checks li, .v2-site-legal, .v2-site-legal h4, .v2-site-legal__band p,
  .v2-site-topic p
  { font-size: 17px; }

  /* 16 -> 17.5 */
  .v2-site-bluecard h4, .v2-site-card__t, .v2-site-form__in, .v2-site-founder__role, .v2-site-ft__h,
  .v2-site-ft__habla, .v2-site-info__val, .v2-site-media h3, .v2-site-reason h3, .v2-site-rev__name,
  .v2-site-trust__t
  { font-size: 17.5px; }

  /* --- Section headings ---------------------------------------------------------- */
  /* Each is the clamp's floor, restated for phones. */
  /* The largest size that keeps "INSURANCE APART?" to three lines. */
  .v2-site-h2 {
    font-size: clamp(26px, calc(10.6vw - 6.5px), 33px);   /* 31 on the artboard */
    line-height: .99; font-weight: 900;                   /* 800 on the artboard */
  }
  .v2-site-head p        { font-size: 15px; line-height: 1.71; }
  .v2-site-cta h2        { font-size: 30px; overflow-wrap: break-word; }   /* was 22 */
  /* Solved from the column so "ENROLLMENT" fits beside the indent; re-measure if the word changes. */
  .v2-site--home .v2-site-cta h2 { font-size: clamp(22px, calc(9.6vw - 6px), 32px); line-height: .87; }
  .v2-site--home .v2-site-cta__sub { font-size: .585em; line-height: 1; margin-top: 10px; }
  .v2-site-why__card h2  { font-size: 32px; }   /* was 26 */
  .v2-site-legal__band h2 { font-size: 28px; }  /* was 22 */
  .v2-site-legal h2      { font-size: 26px; }   /* was 21 */
  .v2-site-form-card h2  { font-size: 26px; }   /* was 21 */
  .v2-site-bigoffice h3  { font-size: 26px; }   /* was 22 */
  .v2-site-topic h3      { font-size: 24px; }   /* was 20 */
  .v2-site-after h3      { font-size: 24px; }   /* was 20 */
  .v2-site-bluecard h3   { font-size: 23px; }   /* was 19 */

  /* --- Home hero: the headline and the price ------------------------------------- */
  /* Clamps, not flat sizes: each is one unbreakable word, solved from the column width. */
  /* Solved for the word "Marketplace": change the word, re-measure. §7a overrides it on general-lp. */
  .v2-site-home-hero h1 { font-size: clamp(36px, calc(14.2vw - 9px), 52px); }
  /* Shared: both pages set the price the same way. */
  .v2-site-home-hero__price strong { font-size: clamp(40px, 12.3vw, 48px); }  /* was 42 */
  /* general-lp: keeps §7a's ~2.3x ratio on phones. */
  .v2-site--glp .v2-site-home-hero__price > span,
  .v2-site--glp .v2-site-home-hero__tail { font-size: clamp(17px, 5.3vw, 21px); }
}

/* ----------------------------------------------------------------------------------
   34a. About Us — "Coverage for every stage of life" (Figma 4524:6219)
   ---------------------------------------------------------------------------------- */
.v2-site-cov {
  /* Matches the star file's baked background. */
  background: #e5eef4 url("../images/v2/site/about-us/cov-stars.webp") no-repeat center bottom / 100% auto;
}
.v2-site-cov__in {
  display: grid; grid-template-columns: minmax(0, 513fr) minmax(0, 394fr) minmax(0, 513fr);
  align-items: center; max-width: 1420px;
}
.v2-site-cov__col { display: flex; flex-direction: column; gap: 20px; }
.v2-site-cov__card {
  background: #eaf2f6; border: 1px solid rgba(0, 62, 107, .1); border-radius: 16px;
  padding: 24px; text-align: center; width: 69.2%;                /* 355 of 513 */
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.v2-site-cov__col--l .v2-site-cov__card { margin-left: 30.8%; }   /* 158 */
.v2-site-cov__col--l .v2-site-cov__card:nth-child(2) { margin-left: 0; }
.v2-site-cov__col--r .v2-site-cov__card:nth-child(2) { margin-left: 30.8%; }
.v2-site-cov__card:nth-child(3) { width: 65.3%; }                /* 335 */
.v2-site-cov__ico {
  width: 60px; height: 60px; border-radius: 50%; background: #0078cd;
  display: grid; place-items: center;
}
.v2-site-cov__ico img { width: 28px; height: 28px; }
.v2-site-cov__card h3 { color: #003e6b; font-size: clamp(19px, 1.25vw, 24px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; margin: 0; }
.v2-site-cov__card p { color: #003e6b; font-size: clamp(16.5px, .94vw, 18px); line-height: 1.5; margin: 0; }
.v2-site-cov__mid { text-align: center; padding-inline: 12px; }
.v2-site-cov__mid h2 {
  color: #003e6b; text-transform: uppercase; line-height: 1; letter-spacing: -.05em;
  font-size: clamp(24px, 1.67vw, 32px);            /* 32 */
}
.v2-site-cov__mid h2 em { display: block; font-style: normal; color: #0078cd; }
.v2-site-cov__mid > p { color: #003e6b; font-size: clamp(17.5px, 1.04vw, 20px); line-height: 1.5; margin: 8px 0 0; }
.v2-site-cov__art { position: relative; width: min(324px, 100%); margin: 48px auto 0; }
.v2-site-cov__art img { width: 100%; height: auto; }
.v2-site-cov__call { position: absolute; left: 48.5%; top: 79.3%; transform: translateX(-50%); width: auto; }
body.v2-site .v2-site-cov__call:hover { transform: translateX(-50%) translateY(-1px); }
@media (max-width: 1023px) {
  .v2-site-cov__in { display: flex; flex-direction: column; gap: 20px; }
  .v2-site-cov__mid { order: -1; margin-bottom: 8px; }
  .v2-site-cov__col { display: contents; }
  .v2-site-cov__card, .v2-site-cov__card:nth-child(3) { width: 100%; margin: 0 !important; }
  .v2-site-cov__art { margin: 24px auto 28px; }
}

/* ----------------------------------------------------------------------------------
   35. The button rule — one size, one font, one edge for every .v2-site-btn
   56px pill, display 18px bold uppercase, a 4px solid bottom edge on filled buttons, no blur
   or hover lift. Last in the file and scoped body.v2-site to beat the older sizes.
   Do not reintroduce a per-section button size.
   ---------------------------------------------------------------------------------- */
body.v2-site .v2-site-btn {
  min-height: 56px; padding-block: 0; justify-content: center;
  font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  text-box: trim-both cap alphabetic;
  box-shadow: 0 4px 0 var(--btn-edge, transparent);
}
body.v2-site .v2-site-btn:hover  { transform: translateY(-1px); box-shadow: 0 4px 0 var(--btn-edge, transparent); }
body.v2-site .v2-site-btn:active { transform: translateY(2px);  box-shadow: 0 2px 0 var(--btn-edge, transparent); }
body.v2-site .v2-site-btn--yellow { --btn-edge: #d3c304; }
body.v2-site .v2-site-btn--white  { --btn-edge: #d9d9d9; }
body.v2-site .v2-site-btn--pink   { --btn-edge: #d82d84; }
body.v2-site .v2-site-btn--blue   { --btn-edge: #0a5fa0; }
body.v2-site .v2-site-btn--ghost  { --btn-edge: transparent; }
body.v2-site .v2-site-btn__ico {
  width: 40px; height: 40px; flex-basis: 40px;
}
/* The §6b hero pills draw this edge as a border-bottom. */
body.v2-site .v2-site-chero__btn { box-shadow: none; }

/* Honour reduced motion for every transition. */
@media (prefers-reduced-motion: reduce) {
  .v2-site *, .v2-site *::before, .v2-site *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   36. Home r2 — header + hero + featured logos (Figma 3724:18)
   ========================================================================== */
/* 36a. HEADER, HOME ONLY. A white floating pill, transparent while base.html's script
   sets [data-top]. 120px tall in both states, and the -120px margin pulls the hero under it —
   change both. :where(:not(.v2-site--glp)): general-lp also carries .v2-site--home. */
.v2-site--home:where(:not(.v2-site--glp)) .v2-site-hdr {
  background: none; box-shadow: none;
  padding: 17px 25px 10px;                  /* 17 top, 25 sides */
  margin-bottom: -120px;
  pointer-events: none;
}
.v2-site--home:where(:not(.v2-site--glp)) .v2-site-hdr__in {
  pointer-events: auto;
  max-width: none; min-height: 93px;        /* 93 */
  padding-inline: 45px;                     /* 45: logo lands at 70 in both states */
  background: #fff; border-radius: 20px;    /* 20 */
  box-shadow: 0 4px 2px rgba(0, 0, 0, .25);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.v2-site--home:where(:not(.v2-site--glp)) .v2-site-hdr[data-top] .v2-site-hdr__in { background-color: transparent; box-shadow: none; }
/* The widths allow for the SVG's ~21% side padding. Above 1500 only (§32 compacts below). */
@media (min-width: 1501px) {
  .v2-site--home:where(:not(.v2-site--glp)) .v2-site-logo img { width: 165px; transition: width .2s ease; }   /* 130 */
  .v2-site--home:where(:not(.v2-site--glp)) .v2-site-hdr[data-top] .v2-site-logo img { width: 192px; }         /* 151 */
  /* A fixed logo box so the nav does not shift on scroll; falls back below ~1575. */
  .v2-site--home:where(:not(.v2-site--glp)) .v2-site-logo { width: clamp(0px, 100% - 1202px, 233px); min-width: max-content; }  /* 325 - 70 - 22 */
  .v2-site--home:where(:not(.v2-site--glp)) .v2-site-search svg { width: 40px; height: 40px; stroke-width: 1.8; }  /* 30 drawn */
}
/* 1280-1400: tighter gaps so CALL NOW stays inside the inset bar. */
@media (min-width: 1280px) and (max-width: 1400px) {
  .v2-site--home:where(:not(.v2-site--glp)) .v2-site-hdr__in { gap: 12px; }
  .v2-site--home:where(:not(.v2-site--glp)) .v2-site-nav { gap: 12px; }
  .v2-site--home:where(:not(.v2-site--glp)) .v2-site-hdr__cta { gap: 8px; }
}
/* At or below 1500 the float gives back its inset. */
@media (max-width: 1500px) {
  .v2-site--home:where(:not(.v2-site--glp)) .v2-site-hdr { padding-inline: 8px; }
  .v2-site--home:where(:not(.v2-site--glp)) .v2-site-hdr__in { padding-inline: 16px; }
}
@media (max-width: 1023px) {
  /* Phone comp 3750:23191: 105px of header, logo centred, burger 14px off the edge. */
  .v2-site--home:where(:not(.v2-site--glp)) .v2-site-hdr { padding: 10px 12px; margin-bottom: -105px; }
  .v2-site--home:where(:not(.v2-site--glp)) .v2-site-hdr__in { min-height: 85px; padding-inline: 16px; border-radius: 16px; }
  .v2-site--home:where(:not(.v2-site--glp)) .v2-site-burger { right: 2px; }
  .v2-site--home:where(:not(.v2-site--glp)) .v2-site-logo img { width: 165px; }
  .v2-site--home:where(:not(.v2-site--glp)) .v2-site-hdr[data-top] .v2-site-logo img { width: 192px; }         /* 151 */
}

/* 36b. HERO. The copy is live text; all the art is ONE pre-composited image per breakpoint
   (r2/hero-art*.webp), pulled up under the copy in cqw. That <img> is the LCP: eager and
   fetchpriority=high, never lazy. "4 out of 5 people PAY LESS…" is the client's verbatim
   claim. The Call now number stays in the markup, never printed from JS. */
.v2-site-h2r-hero {
  position: relative; isolation: isolate;
  container-type: inline-size;
  overflow: clip;
  background: #f5fdff;                      /* the comp's frame fill */
  border-radius: 0 0 64px 64px;             /* 64 */
}
.v2-site-h2r-hero__copy {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 161px var(--gutter) 0;           /* 161: rating pill top, under the 120 bar */
}

.v2-site-h2r-hero__rating {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 8px 24px;             /* 8 24 */
  border-radius: 500px;
  background: linear-gradient(rgba(241, 233, 199, .08), rgba(241, 233, 199, .47));
  font-size: 15.5px; line-height: 1.5; color: #1a3934;
}
/* Five stars as one background; the text carries the meaning. */
.v2-site-h2r-hero__stars {
  width: 84px; height: 16px;                /* 5 x 16 + 4 x 1 */
  background: url("../images/v2/site/home/r2/hero-star.svg") 0 50% / 17px 16px repeat-x;
}
.v2-site-h2r-hero__rating img { width: 59px; height: 20px; opacity: .88; }

.v2-site-h2r-hero h1 {
  margin: 24px 0 0;                         /* 24 */
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(36px, 3.8vw, 73px);      /* 72.9 */
  letter-spacing: 0; line-height: 1.1;
  color: var(--blue-deep);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.v2-site-h2r-hero__checks {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px;  /* 36 */
  margin: 24px 0 0; padding: 0; list-style: none;
}
.v2-site-h2r-hero__checks li {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(17.5px, 1.25vw, 24px);     /* 24 */
  letter-spacing: -.02em; line-height: 1;
  color: var(--blue-deep);
}
.v2-site-h2r-hero__checks img { width: 1.083em; height: 1.083em; flex: none; }  /* 26 */

.v2-site-h2r-hero__price {
  display: flex; flex-direction: column; align-items: center; gap: 16px;  /* 16 */
  margin: 33px 0 0;                         /* 33 */
  font-family: var(--display); text-transform: uppercase;
}
.v2-site-h2r-hero__price > span {
  font-weight: 900; color: var(--blue-deep);
  font-size: clamp(18px, 1.667vw, 32px);    /* 32 */
  letter-spacing: .25em; line-height: 1;    /* 8px tracking */
  margin-right: -.25em;                     /* the last letter's tracking, so it centres */
}
.v2-site-h2r-hero__price strong {
  font-weight: 900;
  /* Above the comp's 96 on purpose: League Spartan, not Futura. */
  font-size: clamp(48px, 5.417vw, 104px);   /* 96 */
  letter-spacing: -.03em; line-height: .9;
  background: linear-gradient(#2a9ced, #0078cd 114.84%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-box: trim-both cap alphabetic;
}
.v2-site-h2r-hero__lede {
  max-width: 680px; margin: 38px 0 0;       /* 680, 38 */
  /* 22, not 24: Jost is wider than Futura. */
  font-size: clamp(17.5px, 1.146vw, 22px);    /* 24 */
  line-height: 1.5; letter-spacing: -.02em; color: var(--blue-deep);
}
.v2-site-h2r-hero__actions { justify-content: center; gap: 12px; margin-top: 33px; }  /* 12, 33 */
.v2-site-h2r-hero__actions .v2-site-ico { width: 19px; height: 19px; }                /* 19 */

.v2-site-h2r-hero__art {
  position: relative; z-index: 1;
  margin-top: -32.656cqw;                   /* 627 of 1920 */
}
.v2-site-h2r-hero__art picture { display: block; }
.v2-site-h2r-hero__photo { width: 100%; }
.v2-site-h2r-hero__fairy { position: absolute; pointer-events: none; }
.v2-site-h2r-hero__fairy--l {   /* 110, 250, 391 */
  top: 13.021cqw;
  width: min(20.365%, 50% - 320px);
  left: min(5.729%, 50% - 320px - min(20.365%, 50% - 320px));
}
.v2-site-h2r-hero__fairy--r {   /* 1419, 283, 420 */
  top: 14.74cqw;
  left: max(73.906%, 50% + 320px);
  width: min(21.875%, 50% - 320px);
}

@media (max-width: 1023px) {
  .v2-site-h2r-hero__copy { padding-top: 127px; }                                /* 127 */
  .v2-site-h2r-hero__art { margin-top: calc(-32.656cqw + 60px); }               /* rim clear of the pills, see 36b */
  /* Tablet keeps the desktop art, where the fairies would land on the buttons. */
  .v2-site-h2r-hero__fairy { display: none; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  /* Stays a row on tablet (§32 stacks .v2-site-actions). */
  .v2-site-h2r-hero__actions { flex-direction: row; align-items: center; }
  .v2-site-h2r-hero .v2-site-btn { width: auto; }
}
@media (max-width: 640px) {
  /* The rating pill is 12px, not the comp's 9.6, for legibility. */
  .v2-site-h2r-hero { border-radius: 0 0 40px 40px; }                            /* 40 */
  .v2-site-h2r-hero__rating { gap: 4px; padding: 5px 16px; font-size: 12px; }
  .v2-site-h2r-hero__stars { width: 59px; height: 11px; background-size: 12px 11px; }
  .v2-site-h2r-hero__rating img { width: 41px; height: 14px; }
  /* Spacing opened up past the comp by request; the comp values are in the trailing comments. */
  .v2-site-h2r-hero h1 { margin-top: 16px; font-size: 36px; line-height: .9; white-space: normal; }  /* 36; comp .77 / 10 */
  .v2-site-h2r-hero__checks { flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }  /* comp 6 / 10 */
  .v2-site-h2r-hero__checks li { font-size: 16px; gap: 5px; }                  /* 16 */
  .v2-site-h2r-hero__checks img { width: 11px; height: 11px; }                 /* 10.9 */
  .v2-site-h2r-hero__price { gap: 12px; margin-top: 30px; }                      /* comp 6.7 / 33 */
  .v2-site-h2r-hero__price > span { font-size: 16px; }                            /* 16 */
  .v2-site-h2r-hero__price strong { font-size: 40px; }                          /* 40 */
  .v2-site-h2r-hero__lede { max-width: 320px; margin-top: 20px; font-size: 16px; line-height: 1.5; }  /* comp 16; 286 in Futura, Jost needs 320 for the same break */
  .v2-site-h2r-hero__actions { width: min(100%, 303px); gap: 8px; }             /* 302, 8 */
  .v2-site-h2r-hero__art { margin-top: -148.53cqw; }                            /* 557 of 375 */
  .v2-site-h2r-hero__fairy { display: block; }
  .v2-site-h2r-hero__fairy--l { left: -10.667%; top: calc(62.133cqw + 14px); width: 27.733%; }  /* -40, 233, 104 */
  .v2-site-h2r-hero__fairy--r { left: 82.667%; top: calc(61.6cqw + 14px); width: 26.933%; }     /* 310, 231, 101 */
}

/* 36c. FEATURED LOGOS. A marquee: the list printed twice, the track moves exactly -50%,
   spacing is per-item padding (never gap). Only logos the client supplied — add one as a
   tuple in home.html's list. */
.v2-site-h2r-logos {
  display: flex; align-items: center; gap: 12px;
  padding: 19px var(--gutter);              /* 79 tall */
  margin-top: 2px;                          /* 1294 - 1292 */
  background: #fff;
}
.v2-site-h2r-logos__view { flex: 1; min-width: 0; overflow: hidden; }
.v2-site-h2r-logos__track {
  display: flex; align-items: center; width: max-content;
  list-style: none; margin: 0; padding: 0;
  animation: v2-site-h2r-logos 50s linear infinite;
}
.v2-site-h2r-logos__track li { flex: none; display: flex; align-items: center; padding-inline-end: 104px; }  /* 104 */
.v2-site-h2r-logos__track img { height: 40px; width: auto; max-width: 175px; object-fit: contain; }         /* 40 */
.v2-site-h2r-logos__track .is-tall img { height: 47px; }                                                     /* 47 */
.v2-site-h2r-logos__press { gap: 12px; }
.v2-site-h2r-logos__press span {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: 13.5px; line-height: 1; white-space: nowrap; color: var(--ink-soft);
}
.v2-site-h2r-logos:hover .v2-site-h2r-logos__track,
.v2-site-h2r-logos[data-paused] .v2-site-h2r-logos__track { animation-play-state: paused; }
@keyframes v2-site-h2r-logos { to { transform: translateX(-50%); } }
.v2-site-h2r-logos__toggle {
  flex: none; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--blue-deep);
}
.v2-site-h2r-logos__toggle[hidden] { display: none; }
.v2-site-h2r-logos__toggle svg { width: 14px; height: 14px; fill: currentColor; }
.v2-site-h2r-logos__play,
.v2-site-h2r-logos[data-paused] .v2-site-h2r-logos__pause { display: none; }
.v2-site-h2r-logos[data-paused] .v2-site-h2r-logos__play { display: block; }
/* animation: none, not §35's .01ms: an infinite loop at .01ms strobes. */
@media (prefers-reduced-motion: reduce) {
  .v2-site-h2r-logos__track { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; gap: 20px 48px; }
  .v2-site-h2r-logos__track li { padding-inline-end: 0; }
  .v2-site-h2r-logos__track li[aria-hidden="true"] { display: none; }
}
@media (max-width: 640px) {
  .v2-site-h2r-logos { margin-top: 21px; padding-block: 0 19px; padding-inline: 0 var(--gutter); }  /* 982 - 961 */
  .v2-site-h2r-logos__track li { padding-inline-end: 40px; }                                        /* 40 */
}
/* end 36 */

/* ==========================================================================
   37. Home r2 — Real help + How it works
   ========================================================================== */
/* The redesign palette (#003E6B, #0078CD), not the §1 tokens; scoped to these sections. */
.v2-site-h2r-help,
.v2-site-h2r-how {
  --h2r-navy: #003e6b;     /* Main Palette/Black */
  --h2r-blue: #0078cd;     /* Main Palette/Primary */
}
.v2-site-h2r-help__title,
.v2-site-h2r-how__title {
  font-size: clamp(36px, 3.4vw, 48px);   /* 48, 36 on the phone */
  line-height: 1;
  letter-spacing: -.04em;                /* -1.92 at 48 */
  color: var(--h2r-navy);
}
.v2-site-h2r-help__title em,
.v2-site-h2r-how__title em { font-style: normal; color: var(--h2r-blue); }

/* ---- Real help ------------------------------------------------------------------ */
.v2-site-h2r-help {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding-block: 96px;                   /* the 821 frame centres 627 of content */
}
/* An opaque white star field: use it only on white bands. */
.v2-site-h2r-help__stars {
  position: absolute; top: 0; left: 0;
  width: 292px;                          /* 291.5 x 491 */
  pointer-events: none;
}
.v2-site-h2r-help__in {
  position: relative;
  max-width: calc(1480px + 2 * var(--gutter));   /* the 1480 row */
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.v2-site-h2r-help__head { text-align: center; max-width: 832px; margin: 0 auto 40px; }  /* gap 40 */
.v2-site-h2r-help__head p {
  max-width: 680px; margin: 8px auto 0;  /* 680 wide, gap 8 */
  font-size: 20px; line-height: 1.5; letter-spacing: -.02em;
  color: var(--h2r-navy);
}

/* The question pills are a radio group (native keyboard and a11y). Panels switch via
   :has(); without :has() all four answers show stacked. */
.v2-site-h2r-help__qs { margin: 0; padding: 0; border: 0; min-width: 0; }
.v2-site-h2r-help__track { display: flex; flex-direction: column; gap: 24px; }  /* 24 */
.v2-site-h2r-help__q {
  --q-fill: var(--h2r-blue);             /* Option 1 fill */
  --q-bar: #ff399e;                      /* ...and the tab peeking out under it */
  position: relative;
  overflow: hidden;                      /* clips the tab to its 8px sliver */
  display: block;
  padding: 20px 40px;                    /* 20 / 40 */
  border-radius: 500px;
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(10, 13, 18, .1), 0 2px 4px -2px rgba(10, 13, 18, .06);
  font-family: var(--display); font-weight: 700;
  font-size: 24px; line-height: 1; letter-spacing: -.02em;   /* 24, -0.48 */
  text-transform: uppercase; text-align: center;
  color: var(--h2r-navy);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.v2-site-h2r-help__q--2 { --q-fill: #ff399e; --q-bar: #fbab18; }
.v2-site-h2r-help__q--3 { --q-fill: #fbab18; --q-bar: #00b6ed; }
.v2-site-h2r-help__q--4 { --q-fill: #7cc242; --q-bar: #00b6ed; }
.v2-site-h2r-help__q input {
  position: absolute; top: 0; left: 50%;
  width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}

.v2-site-h2r-help__txt {
  margin: 0;
  font-size: 20px; line-height: 1.5; letter-spacing: -.02em;
  color: var(--h2r-navy);
}
/* A faint shadow so the white frame has an edge on the white band. */
.v2-site-h2r-help__fig {
  margin: 0;
  width: 365px; max-width: 100%;         /* 365 */
  aspect-ratio: 365 / 447;
  border: 5px solid #fff;
  border-radius: 34px;
  overflow: hidden;
  background: #d9d9d9;
  box-shadow: 0 4px 16px rgba(10, 13, 18, .12);
  rotate: var(--fig-rot, 0deg);
}
.v2-site-h2r-help__fig img { width: 100%; height: 100%; object-fit: cover; }

/* Per-state geometry; the custom properties inherit through the panel's display: contents. */
.v2-site-h2r-help__a--1 { --fig-rot: 4.02deg;  --txt-dy: -80px; --fig-dy: 0px;  --txt-w: 363px; }
.v2-site-h2r-help__a--2 { --fig-rot: -5.46deg; --txt-dy: 53px;  --fig-dy: 11px; }
.v2-site-h2r-help__a--3 { --fig-rot: 0deg;     --txt-dy: 154px; --fig-dy: 0px; }
.v2-site-h2r-help__a--4 { --fig-rot: 2.1deg;   --txt-dy: 53px;  --fig-dy: 12px; }

@supports selector(:has(*)) {
  .v2-site-h2r-help__q:has(:checked) {
    background: var(--q-fill);
    color: #fff;
    /* shadow-sm */
    box-shadow: 0 1px 3px rgba(10, 13, 18, .1), 0 1px 2px -1px rgba(10, 13, 18, .1);
  }
  /* Navy, not the comp's white: white fails contrast on orange and green. Do not restore white without darker fills. */
  .v2-site-h2r-help__q--3:has(:checked),
  .v2-site-h2r-help__q--4:has(:checked) { color: var(--h2r-navy); }
  /* The coloured "tab" peeking under the selected pill. */
  .v2-site-h2r-help__q:has(:checked)::after {
    content: "";
    position: absolute; left: 50%; bottom: -30px;
    width: 252px; height: 38px; margin-left: -126px;   /* 252 x 38 */
    border-radius: 61px;
    background: var(--q-bar);
  }
  .v2-site-h2r-help__q:has(:focus-visible) { outline: 3px solid var(--blue-bright); outline-offset: 3px; }

  .v2-site-h2r-help__a { display: none; }
  .v2-site-h2r-help__tabs:has(.v2-site-h2r-help__q--1 :checked) .v2-site-h2r-help__a--1,
  .v2-site-h2r-help__tabs:has(.v2-site-h2r-help__q--2 :checked) .v2-site-h2r-help__a--2,
  .v2-site-h2r-help__tabs:has(.v2-site-h2r-help__q--3 :checked) .v2-site-h2r-help__a--3,
  .v2-site-h2r-help__tabs:has(.v2-site-h2r-help__q--4 :checked) .v2-site-h2r-help__a--4 {
    display: contents;
  }

  /* Inside @supports: without :has() all four panels are open. */
  @media (min-width: 1024px) {
    .v2-site-h2r-help__tabs {
      display: grid;
      grid-template-columns: minmax(0, 400px) 442px minmax(0, 400px);
      grid-template-areas: "l m r";
      justify-content: space-between;
      align-items: center;
      column-gap: 24px;
      min-height: 471px;                 /* the tilted photo's bounding box */
    }
    .v2-site-h2r-help__qs { grid-area: m; }
    .v2-site-h2r-help__txt {
      justify-self: center;
      max-width: var(--txt-w, 395px);    /* 363 in state 1, 395 in the others */
      font-size: clamp(20px, 1.6vw, 24px);   /* 24 */
      translate: 0 var(--txt-dy);
    }
    .v2-site-h2r-help__fig { justify-self: center; translate: 0 var(--fig-dy); }
    /* Shrinks the tilted photo so it stays inside the gutter. */
    @media (max-width: 1599px) {
      .v2-site-h2r-help__fig { width: min(365px, 89%); }
    }
    .v2-site-h2r-help__a--1 .v2-site-h2r-help__txt,
    .v2-site-h2r-help__a--3 .v2-site-h2r-help__txt { grid-area: l; }
    .v2-site-h2r-help__a--1 .v2-site-h2r-help__fig,
    .v2-site-h2r-help__a--3 .v2-site-h2r-help__fig { grid-area: r; }
    .v2-site-h2r-help__a--2 .v2-site-h2r-help__fig,
    .v2-site-h2r-help__a--4 .v2-site-h2r-help__fig { grid-area: l; }
    .v2-site-h2r-help__a--2 .v2-site-h2r-help__txt,
    .v2-site-h2r-help__a--4 .v2-site-h2r-help__txt { grid-area: r; }
  }
}

/* ---- How it works --------------------------------------------------------------- */
.v2-site-h2r-how {
  background: #f4f7fa;
  padding-block: 96px;                   /* 96 */
  overflow: hidden;                      /* the wave overhangs the column by 28 / 17 */
}
.v2-site-h2r-how__in {
  max-width: calc(1640px + 2 * var(--gutter));   /* 1920 - 2 x 140 */
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.v2-site-h2r-how__head {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  margin-bottom: 56px;                   /* gap 56 */
}
.v2-site-h2r-how__cta {
  /* The comp's 351; Jost runs wider than Futura, so the blurb drops to 19px rather than widening this. */
  flex: 0 0 auto; width: 351px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.v2-site-h2r-how__cta .v2-site-btn { gap: 9px; padding-inline: 32px; }   /* 9 / 32 */
.v2-site-h2r-how__cta .v2-site-ico { width: 19px; height: 19px; }         /* 19 */
.v2-site-h2r-how__cta p {
  margin: 0;
  font-size: 19px; line-height: 1.5; letter-spacing: -.02em;   /* 20 in Futura; see above */
  color: var(--h2r-navy);
}

/* The wave stretches sideways only; the dot and the arrowhead are separate elements pinned with the same x formula. */
.v2-site-h2r-how__track { position: relative; padding-top: 32px; }      /* pt 32 */
.v2-site-h2r-how__wave,
.v2-site-h2r-how__dot,
.v2-site-h2r-how__tip {
  position: absolute;
  filter: drop-shadow(0 24px 12px rgba(0, 0, 0, .25));   /* dy 24, std-dev 6, 25% */
}
.v2-site-h2r-how__wave {
  top: 47.72px; left: -27.6px;
  width: calc(100% + 44.67px); height: 260px;
  overflow: visible;
  fill: none; stroke: var(--h2r-blue); stroke-width: 3;
}
.v2-site-h2r-how__wave path { vector-effect: non-scaling-stroke; }
.v2-site-h2r-how__dot {
  width: 21.33px; height: 21.33px; border-radius: 50%;
  background: var(--h2r-blue);
  top: calc(47.72px + 147.24px - 10.67px);
  left: calc(-27.6px + (100% + 44.67px) * .013457 - 10.67px);   /* x 22.67 */
}
.v2-site-h2r-how__tip {
  width: 23.08px; height: 20.49px;
  fill: var(--h2r-blue);
  top: calc(47.72px + 147.24px);
  left: calc(-27.6px + (100% + 44.67px) * .979177);              /* x 1649.59 */
}

.v2-site-h2r-how__steps {
  position: relative;
  list-style: none; margin: 0; padding: 0 32px;   /* px 32 */
  display: flex; justify-content: space-between; align-items: flex-start;
}
.v2-site-h2r-how__step {
  position: relative;
  width: var(--step-w);
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;   /* 32 */
}
/* Card widths, gradient angles and numeral positions per step, off 4741:5313/22/27. */
.v2-site-h2r-how__step--1 { --step-w: 194px; --card-deg: 126.39deg; --n-x: 85.5px;  --n-y: -52.78px; }
.v2-site-h2r-how__step--2 { --step-w: 290px; --card-deg: 137.77deg; --n-x: 277.5px; --n-y: 54px; }
.v2-site-h2r-how__step--3 { --step-w: 257px; --card-deg: 134.32deg; --n-x: 241.5px; --n-y: -49.28px; }
/* The badge comes first visually; the card stays first in the source. */
.v2-site-h2r-how__step--2 .v2-site-h2r-how__badge { order: -1; }

.v2-site-h2r-how__card {
  position: relative;
  width: 100%;
  padding: 16px;                         /* 16 */
  border-left: 2px solid var(--h2r-blue);
  border-radius: 16px;
  background: linear-gradient(var(--card-deg), #fff 1.39%, rgba(255, 255, 255, 0) 99.93%);
  color: var(--h2r-navy);
}
.v2-site-h2r-how__card h3 {
  margin: 0 0 4px;                       /* gap 4 */
  font-size: 32px; line-height: 1; letter-spacing: -.05em;   /* H6: 32, -1.6 */
  color: var(--h2r-navy);
  white-space: nowrap;
}
.v2-site-h2r-how__card p { margin: 0; font-size: 18px; line-height: 1.5; }   /* Body/MD */

.v2-site-h2r-how__n {
  position: absolute;
  left: var(--n-x); top: var(--n-y);
  translate: -50% 0;
  font-family: var(--display); font-weight: 800;
  font-size: 128px; line-height: 1.1; letter-spacing: -.04em;   /* Title: 128 */
  text-box: trim-both cap alphabetic;
  background: linear-gradient(180deg, var(--h2r-blue), rgba(0, 120, 205, 0));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  opacity: .5;
  pointer-events: none;
}
.v2-site-h2r-how__badge {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 80px; height: 80px;             /* 80 */
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 21px 48px rgba(0, 120, 205, .2);   /* dy 21, std-dev 24, #0078CD 20% */
}
.v2-site-h2r-how__badge svg { width: 100%; height: 100%; fill: var(--h2r-blue); }

/* ---- Tablet and phone ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .v2-site-h2r-help { padding-block: 48px; }                 /* 48 */
  .v2-site-h2r-help__stars { display: none; }                /* not on the phone comp */
  .v2-site-h2r-help__head { margin-bottom: 45px; }           /* gap 48, less the track's extra 3 of top pad */
  .v2-site-h2r-help__head p { font-size: 18px; letter-spacing: 0; }   /* Body/MD */

  .v2-site-h2r-help__tabs {
    display: flex; flex-direction: column; align-items: center;
    gap: 48px;                           /* 48 */
    text-align: center;
  }
  .v2-site-h2r-help__qs {
    align-self: stretch;
    margin-inline: calc(-1 * var(--gutter));
  }
  .v2-site-h2r-help__track {
    flex-direction: row; gap: 12px;      /* 12 */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    /* Room inside the scroll clip for the shadows and the focus outline. */
    padding: 7px var(--gutter) 12px;
    scrollbar-width: none;
  }
  .v2-site-h2r-help__track::-webkit-scrollbar { display: none; }
  /* Unselected pills get a pale fill so the peeking neighbour reads as a button (departs from the comp by request). */
  .v2-site-h2r-help__q {
    flex: 0 0 min(327px, 100%);          /* 327 */
    background: #eef6fd;
    box-shadow: inset 0 0 0 2px #bcdaf3, 0 4px 6px -1px rgba(10, 13, 18, .1);
    min-height: 72px;                    /* 72 */
    display: flex; align-items: center; justify-content: center;
    padding: 16px 32px;                  /* 16 / 32 */
    font-size: 20px; letter-spacing: -.02em;   /* 20, -0.4 */
    /* Centre snap so both neighbours peek; the auto-advance script scrolls to the centre too. */
    scroll-snap-align: center;
  }
  .v2-site-h2r-help__q:has(:checked)::after { bottom: -32px; }   /* top 66 of 72 */
  .v2-site-h2r-help__txt { max-width: 560px; }
  .v2-site-h2r-help__fig { width: 327px; }                   /* 326.6 x 400 */

  .v2-site-h2r-how { padding-block: 48px; }
  .v2-site-h2r-how__head {
    flex-direction: column; align-items: center; gap: 24px;
    margin-bottom: 40px;
    text-align: center;
  }
  .v2-site-h2r-how__cta { width: 100%; max-width: 420px; align-items: stretch; }
  .v2-site-h2r-how__cta p { font-size: 18px; letter-spacing: 0; }

  /* No phone comp: the wave becomes a vertical rule. */
  .v2-site-h2r-how__wave,
  .v2-site-h2r-how__dot,
  .v2-site-h2r-how__tip { display: none; }
  .v2-site-h2r-how__track { padding-top: 0; max-width: 520px; margin-inline: auto; }
  .v2-site-h2r-how__steps { flex-direction: column; gap: 32px; padding: 0; }
  .v2-site-h2r-how__steps::before {
    content: "";
    position: absolute; left: 30.5px; top: 32px; bottom: 32px;
    width: 3px; border-radius: 2px;
    background: var(--h2r-blue);
  }
  .v2-site-h2r-how__step {
    width: 100%;
    display: grid; grid-template-columns: 64px minmax(0, 1fr);
    align-items: center; column-gap: 16px;
  }
  .v2-site-h2r-how__badge { grid-column: 1; grid-row: 1; width: 64px; height: 64px; }
  .v2-site-h2r-how__card { grid-column: 2; grid-row: 1; padding-right: 56px; }   /* clears the numeral */
  .v2-site-h2r-how__card h3 { font-size: 26px; white-space: normal; }
  .v2-site-h2r-how__n { left: auto; right: 8px; top: -14px; translate: none; font-size: 88px; }
}
/* Below 375 the card leaves ~120px for text: "COMPARE" and "INSCRÍBASE" must still fit whole. */
@media (max-width: 374px) {
  .v2-site-h2r-how__card { padding-right: min(56px, calc(46px + (100vw - 320px) * .25)); }   /* 46 at 320, 56 from 360 */
  .v2-site-h2r-how__card h3 { font-size: min(26px, calc(20px + (100vw - 320px) * .15)); }  /* 20 at 320, 26 from 360 */
}
/* A 24px gutter here, not §32's 30. */
@media (max-width: 640px) {
  .v2-site-h2r-help { --gutter: 24px; }
}
/* Auto-advance fade (home.html's script, 3s). Only keyboard focus pauses it; it also
   pauses off-screen and never runs under reduced motion. */
@keyframes v2-site-h2r-help-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.v2-site-h2r-help__a .v2-site-h2r-help__txt,
.v2-site-h2r-help__a .v2-site-h2r-help__fig {
  animation: v2-site-h2r-help-in .45s ease-out both;
}
/* end 37 */

/* ==========================================================================
   38. Home r2 — Programs we offer + open-enrollment CTA
   ========================================================================== */
/* Home only — its own classes, since .v2-site-prog / .v2-site-cta still style other pages.
   The rail is base.html's [data-rail] scroll-snap rail. */
.v2-site-h2r-prog { padding-block: 96px 60px; }                         /* 96 top */
.v2-site-h2r-prog__hd {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  column-gap: 32px;                                                     /* 32 */
  width: min(1780px, 100% - 2 * var(--gutter)); margin-inline: auto;   /* 1780 */
}
.v2-site-h2r-prog__title {
  margin: 0; color: #003e6b;
  font: 800 clamp(40px, 4.5vw, 64px)/1 var(--display);                   /* 64 */
  letter-spacing: -.04em; text-transform: uppercase;                    /* -2.56 */
}
.v2-site-h2r-prog__title span { color: #0078cd; }
.v2-site-h2r-prog__lede {
  margin: 0; max-width: 360px; text-align: right;                      /* 348 box */
  color: #003e6b; font-size: 20px; line-height: 1.5; letter-spacing: -.02em;
}
.v2-site-h2r-prog__nav { display: flex; gap: 16px; }                   /* 72 - 56 */
.v2-site-h2r-prog__arrow {
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  border: 1px solid #0078cd; border-radius: 50%;
  background: #fff; color: #0078cd; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.v2-site-h2r-prog__arrow--next,
.v2-site-h2r-prog__arrow:hover { background: #0078cd; color: #fff; }
.v2-site-h2r-prog__arrow--next:hover { background: #0a63ad; }
.v2-site-h2r-prog__arrow svg {
  width: 56px; height: 56px;
  fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
}

/* Padding so the card shadows are not clipped by the scroller. */
.v2-site-h2r-prog__rail {
  display: flex; gap: 24px;                                            /* 24 */
  max-width: 1920px; margin: 48px auto 0;                             /* 56 - 8 */
  padding: 8px var(--gutter) 36px;
  scroll-padding-inline: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.v2-site-h2r-prog__rail::-webkit-scrollbar { display: none; }
.v2-site-h2r-prog__rail:focus-visible { outline-offset: -3px; }

.v2-site-h2r-prog__card {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 0 0 450px; height: 550px;                                     /* 450 x 550 */
  display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
  padding: 32px 16px 16px;                                             /* 32 / 16 */
  border: 1px solid rgba(0, 120, 205, .1); border-radius: 24px;        /* 24 */
  box-shadow: 0 10px 24px rgba(15, 23, 42, .1);
  scroll-snap-align: start;
  background: #dbe6f2;
}
.v2-site-h2r-prog__photo {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
}
.v2-site-h2r-prog__photo--low { object-position: bottom; }
.v2-site-h2r-prog__badge { display: block; width: 64px; height: 64px; margin: -4px -8px -12px; }
.v2-site-h2r-prog__body {
  align-self: stretch;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 32px 24px; border-radius: 16px; background: #0078cd; color: #fff;   /* 32 / 24 */
}
.v2-site-h2r-prog__body h3 {
  margin: 0; color: #fff;
  font: 800 24px/1 var(--display); letter-spacing: -.02em; text-transform: uppercase;  /* 24 */
}
/* Full white for contrast (the comp's 70% fails AA). min-height reserves three lines so the panels align. */
.v2-site-h2r-prog__body p { margin: 0; min-height: 4.5em; font-size: 18px; line-height: 1.5; } /* 18 */
/* The site focus ring is invisible on these blue panels. */
.v2-site-h2r-prog__body :focus-visible,
.v2-site-h2r-cta__banner :focus-visible { outline-color: #fff; }
/* §35 owns height, font and edge; only the ink and side padding are set here. */
.v2-site-h2r-prog__btn { color: #0078cd; padding-inline: 32px; width: auto; }

/* ---- Enrollment banner ------------------------------------------------------- */
/* The fairy hangs 50px below, so the banner does not clip on desktop. */
.v2-site-h2r-cta {
  max-width: 1920px; margin-inline: auto; padding: 32px var(--gutter) 82px;   /* 32 + fairy overhang */
  /* The floor is load-bearing: under 475 the photo crops from the side and the fairy slides onto the family. */
  --ph: clamp(475px, 28.65vw, 550px);                                   /* 550 */
}
.v2-site-h2r-cta__banner {
  position: relative; display: flex; align-items: center; min-height: 400px;  /* 400 */
  border-radius: 32px; background: #0078cd; color: #fff;               /* 32 */
}
.v2-site-h2r-cta__photo {
  position: relative; z-index: 1; align-self: stretch;
  flex: 0 0 var(--ph);                                                  /* 550 */
  border-right: 24px solid #00b6ed;                                    /* 24 */
  border-radius: 32px 0 333px 32px; overflow: hidden;
}
.v2-site-h2r-cta__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  width: calc(100% + 24px);                                           /* 550 incl. border */
  /* max-width: none, so the img runs under the cyan edge (the site's img rule caps it at 100%). */
  max-width: none;
  object-fit: cover; object-position: 0 32%;
}
.v2-site-h2r-cta__fairy {
  position: absolute; z-index: 2; top: 0;
  left: calc(var(--ph) - 131px);                                        /* 419 */
  width: 309px; height: 450px; object-fit: contain;                    /* 309 x 450 */
}
.v2-site-h2r-cta__stars {
  position: absolute; right: 0; top: 5px; width: 696px; height: 400px;  /* 696 x 400 */
  max-width: 55%; object-fit: cover; object-position: left top;
  border-radius: 0 32px 32px 0; pointer-events: none;
}
.v2-site-h2r-cta__copy {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;   /* 16 */
  margin-left: 202px; padding: 40px clamp(24px, 7.3vw, 140px) 40px 0;   /* 752 - 550; pr 140 */
}
.v2-site-h2r-cta__copy h2 {
  margin: 0; color: #fff;
  font: 800 clamp(34px, 2.5vw, 48px)/1 var(--display);                  /* 48 */
  letter-spacing: -.04em; text-transform: uppercase;                    /* -1.92 */
  text-wrap: balance;   /* at 1024-1279 a sentence wraps; balanced, "SAVE." isn't left alone */
}
.v2-site-h2r-cta__copy h2 span { display: block; }
.v2-site-h2r-cta__copy p { margin: 0; font-size: 20px; line-height: 1.5; letter-spacing: -.02em; text-wrap: balance; } /* 20; white, not the comp's 70%: see the card blurb */
.v2-site-h2r-cta__btn { padding-inline: 32px; width: auto; }            /* 32 */

/* 1024-1279: the fairy at 80%, so the copy fits and the banner stays 400 tall. */
@media (max-width: 1279px) {
  .v2-site-h2r-cta__fairy { left: calc(var(--ph) - 105px); top: 30px; width: 247px; height: 360px; }
  .v2-site-h2r-cta__copy { margin-left: 166px; padding-right: 24px; }
  .v2-site-h2r-cta__copy p { font-size: 18px; letter-spacing: 0; }     /* 18 */
}

/* Tablet and phone: the header stacks; display: contents lets `order` reach the nav. */
@media (max-width: 1023px) {
  .v2-site-h2r-prog { display: flex; flex-direction: column; padding-block: 48px; }  /* 48 */
  .v2-site-h2r-prog__hd { display: contents; }
  .v2-site-h2r-prog__title,
  .v2-site-h2r-prog__lede { width: min(1780px, 100% - 2 * var(--gutter)); margin-inline: auto; }
  .v2-site-h2r-prog__lede { max-width: none; margin-top: 12px; text-align: left; font-size: 18px; letter-spacing: 0; } /* 12 / 18 */
  /* align-self + zeroed margins: an auto margin turned off stretch and scrolled the page sideways. */
  .v2-site-h2r-prog__rail { order: 2; align-self: stretch; margin: 40px 0 0; padding-bottom: 32px; } /* 48 - 8 */
  .v2-site-h2r-prog__nav {
    order: 3; justify-content: flex-end;
    width: min(1780px, 100% - 2 * var(--gutter)); margin: 16px auto 0;              /* 48 - 32 */
  }

  .v2-site-h2r-cta { padding-block: 32px; }                            /* 32 */
  .v2-site-h2r-cta__banner {
    flex-direction: column; align-items: stretch; justify-content: space-between;
    overflow: hidden;
  }
  .v2-site-h2r-cta__photo {
    flex: 0 0 auto; height: clamp(238px, 40vw, 340px);                  /* 238 */
    margin-right: -34px;                                                /* 361 on a 327 card */
    border-right-width: 16px; border-radius: 32px 0 333px 0;             /* 16 */
  }
  .v2-site-h2r-cta__photo img { width: calc(100% + 16px); object-position: 50% 15%; }
  .v2-site-h2r-cta__fairy { left: 16px; top: calc(clamp(238px, 40vw, 340px) - 119px); width: 227px; height: 331px; } /* 16, 119; 227 x 331 */
  .v2-site-h2r-cta__stars {
    top: calc(clamp(238px, 40vw, 340px) + 45px); width: 327px; height: 188px;       /* 283; 327 x 188 */
    max-width: none; border-radius: 0;
  }
  .v2-site-h2r-cta__copy { margin: 190px 0 0; padding: 32px 16px; }      /* 32 / 16 */
  .v2-site-h2r-cta__copy h2 { font-size: 32px; letter-spacing: -.05em; } /* 32, -1.6 */
  .v2-site-h2r-cta__copy p { font-size: 18px; letter-spacing: 0; }      /* 18 */
}

/* Phone: 327 x 450 cards with a 16px gap (the next card peeks at the edge), and the
   banner heading runs as one paragraph rather than two lines. */
@media (max-width: 640px) {
  /* A 24px gutter, not §32's 30. */
  .v2-site-h2r-prog, .v2-site-h2r-cta { --gutter: 24px; }
  .v2-site-h2r-prog__title { font-size: 36px; letter-spacing: -.05em; }  /* 36, -1.8 */
  .v2-site-h2r-prog__title span { display: block; }
  .v2-site-h2r-prog__rail { gap: 16px; }                                 /* 16 */
  .v2-site-h2r-prog__card { flex-basis: min(327px, 100vw - 2 * var(--gutter)); height: 450px; }  /* 327 x 450 */
  .v2-site-h2r-prog__body h3 { font-size: 20px; line-height: 1.15; }    /* 20 */
  .v2-site-h2r-prog__body p { min-height: 0; font-size: 16px; letter-spacing: -.02em; } /* 16 */
  .v2-site-h2r-cta__banner { min-height: 800px; }                      /* 800 */
  .v2-site-h2r-cta__copy { margin-top: 0; }
  .v2-site-h2r-cta__copy h2 span { display: inline; }
}
/* Below 375 the heading wraps to six lines and climbs into the fairy's feet. */
@media (max-width: 374px) {
  .v2-site-h2r-cta__banner { min-height: calc(800px + (375px - 100vw) * 1.3); }   /* 871 at 320, 800 at 375 */
}
/* end 38 */

/* ==========================================================================
   39. Home r2 — Testimonials + Why choose Madrinas
   ========================================================================== */
/* The redesign palette; the why tiles are a tint of #0078cd, so do not swap in --blue. */

/* --- Testimonials ---------------------------------------------------------------- */
.v2-site-h2r-revs {
  position: relative;                          /* anchors the focused pause control */
  background: #f4f7fa;
  padding-block: 96px;                         /* 96 */
  color: #003e6b;
  overflow: hidden;                            /* the marquee tracks run past both edges */
}
.v2-site-h2r-revs__head {
  max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.v2-site-h2r-revs__chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 16px; padding: 8px 24px;         /* 8 24 */
  border-radius: var(--radius-pill);
  background: linear-gradient(rgba(241, 233, 199, .08), rgba(241, 233, 199, .47));
  font-size: 15.5px; line-height: 1.5; color: #1a3934;
}
.v2-site-h2r-revs__chipstars {
  width: 84px; height: 16px;
  background: url("../images/v2/site/home/r2/reviews-chip-star.svg") 0 50% / 16px 15.2px space;
}
.v2-site-h2r-revs__chip img { width: 59px; height: auto; opacity: .88; margin-top: 3px; }
.v2-site-h2r-revs__title {
  margin: 0;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(36px, 4vw, 48px);           /* 48 */
  line-height: 1; letter-spacing: -.04em;      /* -1.92 */
  color: #003e6b;
}
.v2-site-h2r-revs__title em { font-style: normal; color: #0078cd; }
/* Both spellings are in the markup and one is hidden, so a screen reader hears one. */
.v2-site-h2r-revs__short { display: none; }
.v2-site-h2r-revs__sub {
  margin: 8px 0 0; max-width: 1760px;
  font-size: 20px; line-height: 1.5; letter-spacing: -.02em; opacity: .7;   /* 20 */
}

/* Marquee: each track holds its content twice and moves -50%; per-card margin, not gap. Row 2 is decorative. */
.v2-site-h2r-revs__row {
  margin-top: 40px;                            /* 56 from the subline to the card top, less the 16 below */
  padding-block: 16px 32px;                    /* room for the quote mark above and the shadow below */
  overflow: hidden;
  /* Capped at one half-track so the track's end never shows. */
  max-width: 1896px; margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 min(18%, 360px), #000 calc(100% - min(18%, 360px)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 min(18%, 360px), #000 calc(100% - min(18%, 360px)), transparent);
}
.v2-site-h2r-revs__row + .v2-site-h2r-revs__row { margin-top: 8px; }   /* 56 between rows, card to card */
.v2-site-h2r-revs__track,
.v2-site-h2r-revs__dup { display: flex; align-items: stretch; width: max-content; }
.v2-site-h2r-revs__track { animation: v2-site-h2r-marquee 90s linear infinite; }
.v2-site-h2r-revs__row--rev .v2-site-h2r-revs__track {
  /* Started 1.5 cards along so the rows stagger. */
  animation-direction: reverse; animation-delay: -56.25s;
}
@keyframes v2-site-h2r-marquee { to { transform: translateX(-50%); } }
.v2-site-h2r-revs__row:hover .v2-site-h2r-revs__track,
.v2-site-h2r-revs:has(.v2-site-h2r-revs__pause input:checked) .v2-site-h2r-revs__track {
  animation-play-state: paused;
}
/* The WCAG 2.2.2 pause: invisible until keyboard focus; pure CSS via :has(). */
.v2-site-h2r-revs__pause {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.v2-site-h2r-revs__pause:focus-within {
  width: auto; height: auto; clip: auto;
  left: 50%; bottom: 40px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-size: 17.5px; color: #003e6b;
}

.v2-site-h2r-revs__card {
  position: relative; flex: 0 0 min(450px, 80vw);   /* 450 */
  margin-inline-end: 24px;                           /* 24 */
  display: flex; flex-direction: column; gap: 16px;
  padding: 32px; border-radius: 32px;                /* 32 */
  background: #fff;
  box-shadow: 0 16px 16px rgba(0, 62, 107, .05);
}
.v2-site-h2r-revs__card::before {
  content: ""; position: absolute; left: 36px; top: -11.4px;   /* the 32px frame at -16, glyph inset 14.29% */
  width: 32px; height: 22.86px;
  background: url("../images/v2/site/home/r2/reviews-quote.svg") center / contain no-repeat;
}
.v2-site-h2r-revs__hd { display: flex; align-items: center; gap: 16px; }
.v2-site-h2r-revs__av {
  flex: 0 0 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: #edf7fd; color: #0078cd;
  font-family: var(--display); font-weight: 700; font-size: 17.5px;
}
.v2-site-h2r-revs__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.5; }
.v2-site-h2r-revs__name { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: #003e6b; }
.v2-site-h2r-revs__loc { font-size: 17.5px; letter-spacing: -.02em; color: #0078cd; }
.v2-site-h2r-revs__g {
  flex: 0 0 32px; height: 32px;
  background: url("../images/v2/site/home/r2/reviews-g.svg") center / contain no-repeat;
}
/* The rating is the visually-hidden text inside. */
.v2-site-h2r-revs__stars {
  width: 106px; height: 18px; margin: 0;
  background: url("../images/v2/site/home/r2/reviews-star.svg") 0 0 / 18px 18px space;
}
.v2-site-h2r-revs__card blockquote {
  margin: 0; padding-top: 16px;
  border-top: 1px solid rgba(0, 62, 107, .1);        /* the comp's divider: #003e6b at 10% */
  font-size: 18px; line-height: 1.5; color: rgba(0, 62, 107, .7);   /* 18, 70% */
}

/* --- Why choose Madrinas ----------------------------------------------------------- */
.v2-site-h2r-why { padding: 24px; }                   /* 24 */
.v2-site-h2r-why__slab {
  position: relative; isolation: isolate;
  max-width: 1872px; margin-inline: auto;             /* 1920 less the 24 either side */
  /* A grid, so paired tiles share rows and stay aligned. */
  display: grid; grid-template-columns: 1fr 500px 1fr; grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
  column-gap: 32px; row-gap: 16px;                    /* 32, 16 */
  padding: 96px max(32px, calc((100% - 1472px) / 2));
  border-radius: 32px;
  background: #0078cd;
  overflow: clip;                                     /* crops the fairy at the slab edge, as drawn */
  color: #fff;
}
.v2-site-h2r-why__slab::before,
.v2-site-h2r-why__slab::after {
  content: ""; position: absolute; z-index: -1; top: 24px;
  width: 605px; height: 1184px;
  background: url("../images/v2/site/home/r2/reviews-sprinkles.svg") center / contain no-repeat;
  pointer-events: none;
}
.v2-site-h2r-why__slab::after  { right: -417px; transform: rotate(-5.03deg); }
.v2-site-h2r-why__slab::before { left: -417px;  transform: scaleX(-1) rotate(-5.03deg); }

/* The card is first in the source (its h2 before the tiles' h3s); placement centres it. */
.v2-site-h2r-why__col { display: contents; }
.v2-site-h2r-why__col--l .v2-site-h2r-why__tile { grid-column: 1; }
.v2-site-h2r-why__col--r .v2-site-h2r-why__tile { grid-column: 3; }
.v2-site-h2r-why__tile:first-child { grid-row: 2; }
.v2-site-h2r-why__tile:last-child  { grid-row: 3; }
/* Darker than the comp's #1582cf for AA contrast. */
.v2-site-h2r-why__tile {
  min-height: 182px;                                  /* 182 */
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 24px; border-radius: 16px;
  background: #006cb9;                                /* comp #1582cf, see above */
}
.v2-site-h2r-why__ico {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .2);
}
.v2-site-h2r-why__ico img { width: 24px; height: 24px; }
.v2-site-h2r-why__tile h3 {
  margin: 0; font-family: var(--display); font-weight: 700; text-transform: none;
  font-size: 24px; line-height: 1.15; color: #fff;   /* 24 */
}
.v2-site-h2r-why__tile p { margin: 0; font-size: 18px; line-height: 1.5; color: #fff; }   /* comp 70% white, see the tile note */

.v2-site-h2r-why__card {
  position: relative; grid-column: 2; grid-row: 1 / -1; min-height: 445px;   /* 500 x 445 */
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 32px; border-radius: 32px;
  background: #fff; color: #003e6b;
  box-shadow: 0 8px 0 #00b6ed;
}
.v2-site-h2r-why__title {
  margin: 0 0 8px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 64px; line-height: 1; letter-spacing: -.04em;   /* 64, -2.56 */
  color: #003e6b;
}
.v2-site-h2r-why__card p { margin: 0 0 24px; font-size: 20px; line-height: 1.5; letter-spacing: -.02em; }
.v2-site-h2r-why__btn { margin-top: auto; gap: 9px; padding-inline: 30px; position: relative; z-index: 1; width: auto; }   /* content-width on phones too (178 in 4781:7363), against §32's full-width pills */
.v2-site-h2r-why__btn img { width: 19px; height: 19px; }
/* Stands on the card's bottom edge and runs out of it; the slab's overflow crops her,
   which is how the comp draws it. */
.v2-site-h2r-why__fairy {
  /* Lower than the comp's 229, so her hair clears the lede. */
  position: absolute; left: 209px; top: 262px;        /* 209, 229 */
  width: 305px; height: auto;                         /* 305 */
  transform: rotate(.48deg);
  pointer-events: none;
}

@media (max-width: 1279px) {
  .v2-site-h2r-why__slab { grid-template-columns: 1fr 440px 1fr; }
  .v2-site-h2r-why__title { font-size: 56px; }
  .v2-site-h2r-why__fairy { left: 170px; }
}

/* Tablet from 1199: below 1200 the tile columns get too narrow. */
@media (max-width: 1199px) {
  .v2-site-h2r-why__slab {
    grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 16px; align-items: stretch;
    padding: 48px 32px;
  }
  .v2-site-h2r-why__slab::before,
  .v2-site-h2r-why__slab::after { display: none; }
  .v2-site-h2r-why__col .v2-site-h2r-why__tile { grid-column: auto; grid-row: auto; }
  .v2-site-h2r-why__card { grid-row: auto; grid-column: 1 / -1; margin-bottom: 16px; min-height: 420px; }
  .v2-site-h2r-why__card p { max-width: 60%; }
  .v2-site-h2r-why__fairy { left: auto; right: 40px; top: auto; bottom: 0; width: 240px; }
}

@media (max-width: 640px) {
  .v2-site-h2r-revs { padding-block: 48px; }          /* 48 */
  .v2-site-h2r-revs__chip { display: none; }          /* not in the phone comp */
  .v2-site-h2r-revs__title { font-size: 36px; letter-spacing: -.05em; }   /* 36, -1.8 */
  .v2-site-h2r-revs__long { display: none; }
  .v2-site-h2r-revs__short { display: inline; }
  .v2-site-h2r-revs__sub { font-size: 18px; letter-spacing: 0; }          /* 18 */

  /* Phone: the reviews stack; the copies, second row, fade and pause go. */
  .v2-site-h2r-revs__row { margin-top: 32px; padding: 16px var(--gutter) 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .v2-site-h2r-revs__row--rev,
  .v2-site-h2r-revs__dup,
  .v2-site-h2r-revs__pause { display: none; }
  .v2-site-h2r-revs__track { animation: none; flex-direction: column; gap: 40px; width: auto; }   /* 24 + the 16 the quote mark rides in */
  .v2-site-h2r-revs__card { flex: none; margin: 0; padding: 24px; border-radius: 24px; }          /* 24 */
  .v2-site-h2r-revs__card::before { left: 33px; }
  .v2-site-h2r-revs__card blockquote { font-size: 16px; letter-spacing: -.02em; }                /* 16 */

  .v2-site-h2r-why { padding: 24px 0; }               /* the phone slab is full bleed */
  .v2-site-h2r-why__slab { grid-template-columns: 1fr; padding: 48px 16px; }   /* 48 16 */
  .v2-site-h2r-why__card { min-height: 447px; margin-bottom: 16px; overflow: visible clip; }   /* 447 */
  .v2-site-h2r-why__card p { max-width: none; font-size: 18px; letter-spacing: 0; }
  .v2-site-h2r-why__title { font-size: 32px; letter-spacing: -.05em; }         /* 32, -1.6 */
  .v2-site-h2r-why__fairy { right: -45px; bottom: auto; top: 206px; width: 238px; }   /* 147 from the card's left on a 343 card */
  .v2-site-h2r-why__tile p { font-size: 16px; letter-spacing: -.02em; }        /* 16 */
}
/* Below 375 the lede wraps to six lines and reaches 206. */
@media (max-width: 374px) {
  .v2-site-h2r-why__fairy { top: 266px; }
}

/* Reduced motion or touch-only: the tracks stop and row 1 becomes a swipeable strip. animation: none (a .01ms loop strobes). */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .v2-site-h2r-revs__track { animation: none; }
  .v2-site-h2r-revs__pause,
  .v2-site-h2r-revs__pause:focus-within { display: none; }   /* nothing left to pause; out of the tab order too */
}
@media (prefers-reduced-motion: reduce) and (min-width: 641px), (hover: none) and (min-width: 641px) {
  .v2-site-h2r-revs__row:not(.v2-site-h2r-revs__row--rev) { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
/* end 39 */

/* ==========================================================================
   40. Home r2 — FAQ + Caravana / Our offices / eligibility form
   ========================================================================== */
/* New classes only: the old FAQ/office/form classes are shared with other /v2 pages.
   home.html's script turns the FAQ jump card into a tablist at >=1024px only (.is-tabbed);
   no rule here hides a panel on its own. */

.v2-site-h2r-faq { background: #fff; padding: 96px 0 112px; }   /* 96 top; 112 = the comp's two 56px gaps under the panel */
.v2-site-h2r-faq__wrap {
  max-width: calc(1480px + 2 * var(--gutter));   /* 1480: 220..1700 on the 1920 artboard */
  margin-inline: auto; padding-inline: var(--gutter);
}
.v2-site-h2r-faq__head { text-align: center; }
.v2-site-h2r-faq__h2 {
  font-size: clamp(32px, 3.4vw, 48px);           /* 48 desktop, 32 phone */
  line-height: 1; letter-spacing: -.04em;        /* -1.92 */
  color: #003e6b;
}
.v2-site-h2r-faq__h2 em { font-style: normal; color: #0078cd; }
.v2-site-h2r-faq__head p {
  max-width: 720px; margin: 8px auto 0;          /* 680 in Futura; Jost sets wider, 720 keeps the comp's line break */
  font-size: 20px; line-height: 1.5; letter-spacing: -.02em; color: #003e6b;   /* 20 */
}

.v2-site-h2r-faq__grid {
  display: grid; grid-template-columns: 317px minmax(0, 1fr);   /* card 317, list 1080 */
  column-gap: 83px; align-items: start;                          /* 620 - 220 - 317 */
  margin-top: 56px;                                              /* 268 - 212 */
}

/* Jump card */
.v2-site-h2r-faq__jump {
  background: #fff; border-radius: 20px; padding: 23px 20px;    /* 20 / 23 x 20 */
  box-shadow: 0 4px 6.25px rgba(0, 0, 0, .12);
}
.v2-site-h2r-faq__jump-t {
  margin: 0 0 25px;                                              /* gap 25 */
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 24px; line-height: 1; letter-spacing: -.04em; color: #003e6b;
}
.v2-site-h2r-faq__tabs { display: flex; flex-direction: column; }
.v2-site-h2r-faq__tab {
  display: block; text-decoration: none;
  font-family: var(--body); font-weight: 700; font-size: 20px; line-height: 1;   /* Futura Heavy 20 */
  letter-spacing: -.04em; color: #0078cd;
}
.v2-site-h2r-faq__tab + .v2-site-h2r-faq__tab {
  margin-top: 24px; padding-top: 24px; border-top: 1px solid #ededed;           /* gap 24, rule, gap 24 */
}
.v2-site-h2r-faq__tab > span { display: inline-block; border-radius: 70px; white-space: nowrap; }
.v2-site-h2r-faq__tab.is-active > span { background: #0078cd; color: #fff; padding: 16px 24px; }   /* pill 16 x 24 */
.v2-site-h2r-faq__tab:hover { text-decoration: none; }
.v2-site-h2r-faq__tab:not(.is-active):hover > span { color: #003e6b; }

/* Category panels */
.v2-site-h2r-faq__panel + .v2-site-h2r-faq__panel {
  margin-top: 56px; padding-top: 56px; border-top: 1px solid #ededed;           /* 56 / rule / 56 */
}
.v2-site-h2r-faq__grid.is-tabbed .v2-site-h2r-faq__panel { margin: 0; padding: 0; border: 0; }
.v2-site-h2r-faq__cat {
  margin: 0 0 16px; text-align: center;                          /* gap 16 */
  font-size: 32px; line-height: 1; letter-spacing: -.05em; color: #0078cd;   /* 32, -1.6 */
}

/* Borders on all sides in both states, so opening never shifts the row. */
.v2-site-h2r-faq__q {
  background: #fff; border-radius: 12px;                         /* 12 */
  border: 1px solid transparent; border-bottom-color: #0078cd;
  transition: background-color .18s ease;
}
.v2-site-h2r-faq__q + .v2-site-h2r-faq__q { margin-top: 16px; }  /* gap 16 */
.v2-site-h2r-faq__q > summary {
  display: flex; align-items: center; gap: 12px;                 /* gap 12 */
  padding: 16px; cursor: pointer; list-style: none;              /* 16 */
  font-family: var(--body); font-weight: 600; font-size: 18px; line-height: 1.5;   /* Futura Demi 18 */
  letter-spacing: -.02em; color: #003e6b;
}
.v2-site-h2r-faq__q > summary::-webkit-details-marker { display: none; }
.v2-site-h2r-faq__q > summary::after {
  content: ""; flex: 0 0 28px; height: 27px; margin-left: auto;  /* star 28 x 27 */
  background: url("../images/v2/site/home/r2/faq-star.svg") center / contain no-repeat;
}
.v2-site-h2r-faq__q > summary:hover { color: #0078cd; }
.v2-site-h2r-faq__q[open] {
  background: #0078cd; border-color: rgba(0, 120, 205, .15);
}
.v2-site-h2r-faq__q[open] > summary { color: #fff; padding-bottom: 12px; }        /* gap 12 to the answer */
.v2-site-h2r-faq__q[open] > summary::after { background-image: url("../images/v2/site/home/r2/faq-star-open.svg"); }
/* The site-wide focus ring is --blue-bright, which all but vanishes on the open card. */
.v2-site-h2r-faq__q[open] > summary:focus-visible { outline-color: #fff; outline-offset: -4px; }
.v2-site-h2r-faq__a {
  padding: 0 16px 16px;
  font-size: 17.5px; line-height: 1.5; letter-spacing: -.02em;     /* 16 */
  /* Solid white for contrast (the comp's 70% is ~3:1). */
  color: #fff;
}

/* ---- Caravana photo + offices panel + eligibility card ---------------------------- */
.v2-site-h2r-off { background: #fff; }
.v2-site-h2r-off__wrap {
  max-width: calc(1872px + 2 * var(--gutter));   /* 1872 = the band edge-to-edge inside 24px */
  margin-inline: auto; padding: 32px var(--gutter);              /* 32 / 24 */
}
/* The bus is baked into the photo and a cut-out sits on it: every offset in this box is
   a % of the box, or the two separate. */
.v2-site-h2r-off__photo {
  position: relative; aspect-ratio: 1872 / 283;  /* 259 visible + 24 under the panel */
  margin-bottom: -1.2821%;                       /* 24 / 1872 */
}
/* Fills the panel's corner gap with the road's colour. */
.v2-site-h2r-off__photo::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 24px;
  background: linear-gradient(90deg, #b6babf 0 50%, #49494b 50%);
}
/* --solo (About): no panel beneath. Do not clip this box — the bus overhangs its top; margin-top reserves that. */
.v2-site-h2r-off__photo--solo { margin-top: 3.46%; margin-bottom: 26px; }
.v2-site-h2r-off__photo--solo::after { content: none; }
.v2-site-h2r-off__photo--solo .v2-site-h2r-off__park { border-radius: 24px; }

.v2-site-h2r-off__park { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Positioned in % of the photo box, so it stays on the baked-in bus. */
.v2-site-h2r-off__bus {
  position: absolute; left: 24.15%; bottom: 13.43%; width: 49.66%; height: auto;
}

.v2-site-h2r-off__panel {
  position: relative; z-index: 1;
  display: flex; align-items: stretch;
  background: #0078cd; border-radius: 24px;                      /* 24 */
  isolation: isolate;
}
/* A clipped wrapper, so the form card's shadow is not clipped. */
.v2-site-h2r-off__deco {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
}
.v2-site-h2r-off__deco::before {
  content: ""; position: absolute; left: 54.15%; top: 0;
  width: 33.15%; aspect-ratio: 620.64 / 344.47;                  /* 620 x 344 art, rotated -30 */
  background: url("../images/v2/site/home/r2/faq-stars-trail.svg") center / 100% 100% no-repeat;
  transform: translate(-50%, 12.8%) rotate(-30deg);
}
.v2-site-h2r-off__main {
  position: relative; z-index: 1; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 32px; padding: 32px;   /* 32 / 32 */
}
.v2-site-h2r-off__hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 24px; flex-wrap: wrap; padding-top: 2px;
}
.v2-site-h2r-off__h2 {
  font-size: clamp(32px, 3.4vw, 48px); line-height: 1;           /* 48 desktop, 32 phone */
  letter-spacing: -.04em; color: #fff;
}
.v2-site-h2r-off__hours {
  margin: 0; font-family: var(--body); font-weight: 700;         /* Futura Bold 20 */
  font-size: 20px; line-height: 1.5; letter-spacing: -.02em; color: #fff;
}
.v2-site-h2r-off__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }   /* gap 16 */
.v2-site-h2r-off__office { display: flex; flex-direction: column; gap: 4px; min-width: 0; }            /* gap 4 */
.v2-site-h2r-off__t {
  display: flex; align-items: flex-start; gap: 8px;              /* gap 8 */
  font-size: 24px; line-height: 1; letter-spacing: -.02em; color: #fff;   /* 24 */
}
.v2-site-h2r-off__t img { flex: 0 0 16px; width: 16px; height: 21px; }    /* pin 16 x 21 */
.v2-site-h2r-off__map {
  display: block; width: 100%; height: 200px; object-fit: cover; border-radius: 8px;   /* h 200, r 8 */
}
/* The form card beside these is taller than the three offices, which left a
   block of empty blue under the maps (240 on /qualify-for-a-special-enrollment-
   period, 184 on the home page). The list takes the slack and each map grows
   into it, down to the drawn 200. Pages without the card (offices_band's
   --noform) have no taller sibling, so this is a no-op there. */
@media (min-width: 1024px) {
  .v2-site-h2r-off__list { flex: 1; }
  .v2-site-h2r-off__map { flex: 1; height: auto; min-height: 200px; }   /* 200 floor */
}
.v2-site-h2r-off__addr {
  margin: 0; font-size: 15.5px; line-height: 1.3; letter-spacing: -.02em; color: #fff;   /* 14 */
}

.v2-site-h2r-off__tel {
  margin: 2px 0 0; font-size: 15.5px; line-height: 1.3; letter-spacing: -.02em;
  font-weight: 700; color: #fff;
}
.v2-site-h2r-off__tel a { color: inherit; text-decoration: none; }

/* --noform (/v2/contact): no form, header row or hours; the star trail moves into the corner. */
.v2-site-h2r-off--noform .v2-site-h2r-off__deco::before { left: 86%; top: -4%; }

/* A scoped restyle of the shared lead form; the submit keeps §35's size. */
.v2-site-h2r-off__card {
  position: relative; z-index: 2; flex: 0 0 450px;               /* w 450 */
  display: flex; flex-direction: column; gap: 16px;              /* gap 16 */
  background: #fff; border-radius: 24px; padding: 32px;          /* r 24, p 32 */
  box-shadow: 0 12px 16px rgba(0, 40, 80, .15);
}
.v2-site-h2r-off__card-t {
  text-align: center; font-size: 32px; line-height: 1;           /* 32 */
  letter-spacing: -.05em; color: #003e6b;
}
.v2-site-h2r-off__card-note {
  margin: -8px 0 0; text-align: center; text-transform: uppercase;   /* gap 8 under the title */
  font-size: 17.5px; line-height: 1.2; letter-spacing: .04em;      /* 16, +0.64 */
  color: rgba(0, 62, 107, .7);
}
.v2-site-h2r-off__card .v2-site-form__in {
  min-height: 52px; padding: 15px 19px;                          /* 52, 15 x 19 */
  background: #f7fafd; border: 1px solid #c9dcec; border-radius: 14px;
  font-size: 18px; line-height: 1.2; color: #003e6b;             /* 17 */
}
.v2-site-h2r-off__card .v2-site-form__in::placeholder { color: #8aa5bc; }
.v2-site-h2r-off__card .v2-site-form__in:focus { border-color: #0078cd; background: #fff; }
/* The long TCPA consent: leading opened up. The consent text is not ours to shorten. */
.v2-site-h2r-off__card .v2-site-form__agree {
  gap: 10px; margin: 0; font-size: 13.5px; line-height: 18px;      /* 12 / 16 in the comp */
}
.v2-site-h2r-off__card .v2-site-form__agree input {
  width: 20px; height: 20px; margin: 0; accent-color: #0078cd;   /* 20 */
}

@media (max-width: 1279px) {
  .v2-site-h2r-faq__grid { grid-template-columns: 280px minmax(0, 1fr); column-gap: 48px; }
  .v2-site-h2r-off__card { flex-basis: 400px; padding: 28px; }
}

/* Tablet and phone: no jump card; the offices stack above the form. */
@media (max-width: 1023px) {
  .v2-site-h2r-faq { padding: 64px 0 80px; }
  .v2-site-h2r-faq__grid { display: block; margin-top: 48px; }
  .v2-site-h2r-faq__jump { display: none; }
  .v2-site-h2r-off__panel { flex-direction: column; }
  .v2-site-h2r-off__card { flex-basis: auto; }
  .v2-site-h2r-off__deco { display: none; }
}

@media (max-width: 640px) {
  .v2-site-h2r-faq { padding: 48px 0; }                          /* 48 */
  .v2-site-h2r-faq__head p { font-size: 18px; letter-spacing: 0; }   /* 18 */
  .v2-site-h2r-faq__grid { margin-top: 48px; }                   /* gap 48 */
  .v2-site-h2r-faq__panel + .v2-site-h2r-faq__panel { margin-top: 32px; padding-top: 32px; }   /* 32 */
  .v2-site-h2r-faq__cat { font-size: 24px; letter-spacing: -.02em; }   /* 24 */
  /* The site-wide phone gutter is 30px; this comp's cards sit at x=24, 326 wide. */
  .v2-site-h2r-faq { --gutter: 24px; }                           /* 24 */

  /* Phone: the photo box is widened and shifted so the bus lands where the comp draws it; the section clips the sides. */
  .v2-site-h2r-off { overflow-x: clip; }
  /* About's --solo photo sits in a plain section: clip that instead, or the page scrolls sideways. */
  .v2-site-sec:has(> .v2-site-wrap > .v2-site-h2r-off__photo--solo) { overflow-x: clip; }
  .v2-site-h2r-off__wrap { padding: 40px 0 32px; }
  .v2-site-h2r-off__photo {
    width: calc((100% - 29px) * 2.0129);                          /* bus 346 of 375 */
    margin-left: calc(24px - (100% - 29px) * .48602);             /* bus at x=24 */
    margin-bottom: calc((100% - 29px) * -.025806);                /* 24/1872 of the box */
  }
  .v2-site-h2r-off__main { padding: 24px; }                      /* 24 */
  .v2-site-h2r-off__hd { flex-direction: column; align-items: flex-start; }
  .v2-site-h2r-off__hours { font-size: 16px; }                   /* 16 */
  .v2-site-h2r-off__list { grid-template-columns: 1fr; }
  .v2-site-h2r-off__card { padding: 24px; }                      /* 24 */
  .v2-site-h2r-off__card-t { font-size: 24px; letter-spacing: -.02em; }   /* 24 */
}

@media (prefers-reduced-motion: reduce) {
  .v2-site-h2r-faq__q { transition: none; }
}
/* end 40 */

/* ==========================================================================
   41. Home r2 — Footer
   ========================================================================== */
/* EVERY page's footer since 2026-10-17 (base.html). It was home and the state pages only,
   and .v2-site-ft was the one on everything else; that second footer is gone.
   --st-* are the state pages' tokens (§33), copied because the office cards below are
   .v2-site-st-foff and would otherwise render with unset colours off a state page. */
.v2-site-h2r-ft {
  --st-navy: #003e6a;
  --st-blue: #0078cd;
  --st-line: #e3ebf2;
  --ft-blue: #0078cd;
  --ft-cyan: #00b6ed;
  --ft-yellow: #ffeb00;
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff;
  /* The photo's 10% opacity is baked into its alpha. */
  background: url("../images/v2/site/home/r2/footer-family.webp") no-repeat right -36px bottom / auto 100%,
              var(--ft-blue);
  border-top: 8px solid var(--ft-cyan);                 /* 8 */
  border-radius: 64px 64px 0 0;                         /* 64 */
  padding: 70px clamp(24px, 3.65vw, 70px) 32px;         /* 70 / 70 / 32 */
}
/* The wand trail; x as a % of the width so it stays between the logo and HABLAMOS. */
.v2-site-h2r-ft::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 848.5px; height: 456.6px;
  left: calc(25.36% - 424.25px); top: calc(551px - 228.3px - 8px);
  background: url("../images/v2/site/home/r2/footer-wand.svg") no-repeat 0 0 / 100% 100%;
  transform: rotate(-43.45deg) skewX(3.17deg);
}
.v2-site-h2r-ft__in { max-width: 1780px; margin-inline: auto; }   /* 1920 - 2x70 */
/* The site focus ring is invisible on this blue. */
.v2-site-h2r-ft :focus-visible { outline-color: #fff; }

.v2-site-h2r-ft__top {
  display: grid; align-items: center; justify-content: space-between; gap: 32px;
  grid-template-columns: minmax(0, 400px) minmax(0, 531px) minmax(0, 400px); /* 400/531/400 */
  grid-template-areas: "brand habla contact";
}
.v2-site-h2r-ft__brand {
  grid-area: brand;
  display: flex; flex-direction: column; align-items: center; gap: 32px;   /* 32 */
}
.v2-site-h2r-ft__logo { width: 260px; }                 /* 260 x 125 */
.v2-site-h2r-ft :where(p) { margin: 0; }
.v2-site-h2r-ft__tag { font-size: 18px; line-height: 1.5; color: #fff; }   /* Body/MD 18 */
/* The tagline alone overflows its track a little (Jost is wider than Futura). */
@media (min-width: 1024px) {
  .v2-site-h2r-ft__tag { align-self: flex-start; width: 440px; max-width: calc(100% + 24px); }   /* 400 + 40 */
}

/* One paragraph sized in em: the phone scales the whole lock-up through one font-size. */
.v2-site-h2r-ft__habla {
  grid-area: habla;
  display: flex; flex-direction: column; align-items: center; gap: .1667em;   /* 16 */
  font-size: clamp(52px, 5vw, 96px);                    /* 96 */
  text-align: center;
}
.v2-site-h2r-ft__es {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1em; line-height: .9; letter-spacing: 0;   /* 96 / 0.9 / -3.84 */
}
.v2-site-h2r-ft__es1 { color: var(--ft-yellow); position: relative; z-index: 1; }
/* Transforms take no layout space, so the margins stand in for the rotated box. */
.v2-site-h2r-ft__es2 {
  display: block; position: relative; z-index: 2;
  margin: -.145em 0 .3em;
  padding: .1667em .21em .1em;                          /* 16 / 20 / 16 (less League Spartan's descender room) */
  background: #fff; color: var(--ft-blue);
  border: .0833em solid var(--ft-cyan);                 /* 8 */
  border-radius: .1667em;                               /* 16 */
  transform: rotate(-5.28deg);
}
.v2-site-h2r-ft__es2 > span { display: block; }
.v2-site-h2r-ft__tel {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: .3333em; line-height: 1; letter-spacing: .045em;  /* 32 / -1.6; opened up to the comp's ~497px width, for the same reason as the lock-up */
  color: #fff; white-space: nowrap;
}
.v2-site-h2r-ft__tel:hover { color: var(--ft-yellow); text-decoration: none; }

.v2-site-h2r-ft__contact {
  grid-area: contact;
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;   /* 32 */
}
.v2-site-h2r-ft__h {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 20px; line-height: 1.15; letter-spacing: -.02em;   /* Header/H- 20 */
  color: var(--ft-yellow);
  margin-bottom: -24px;                                 /* 32 stack gap -> 8 */
}
.v2-site-h2r-ft__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;                              /* 8 */
  font-size: 18px; line-height: 1.5;                    /* 18 */
}
/* The lines may wrap; the number and the address never break mid-token. */
.v2-site-h2r-ft__list a { color: #fff; white-space: nowrap; }
.v2-site-h2r-ft__row { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.v2-site-h2r-ft__soc { display: flex; gap: 16px; }        /* 16 */
.v2-site-h2r-ft__soc a { display: block; border-radius: 6px; transition: opacity .15s; }
.v2-site-h2r-ft__soc a:hover { opacity: .75; }
.v2-site-h2r-ft__soc img { width: 32px; height: 32px; }   /* 32 */
/* The client's BBB artwork as delivered: do not recolour or recrop it. */
.v2-site-h2r-ft__bbb { width: 183px; }                  /* 183 x 63 */

/* Not in the comp, kept on purpose: the addresses are one of the NAP copies Google cross-checks. */
.v2-site-h2r-ft__more {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 12px 40px; margin-top: 40px;
  /* Solid white for AA contrast. */
  font-size: 16.5px; line-height: 1.5; color: #fff;
}
.v2-site-h2r-ft__links, .v2-site-h2r-ft__addrs {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px;
}
.v2-site-h2r-ft__links a { color: #fff; }
.v2-site-h2r-ft__soon { opacity: .6; }
.v2-site-h2r-ft__addrs b {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ft-yellow); margin-right: 6px;
}

/* The disclaimer is the general-lp.docx wording (Medicare, Medicaid, endorsement) — do not trim it to the comp's line. */
/* The language switcher is position:fixed bottom-right, so at the end of the
   page it lands on this row. The collision is only ever with the copyright, so
   the reserve is horizontal where that sits beside the disclaimer (>=1024) and
   vertical only where the row goes full width and centres (<=640). Between the
   two it does not reach the fab. Reserve a blanket 76px and it shows as dead
   blue under the copyright on every page -- size it off the fab. */
.v2-site-h2r-ft__base {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 48px;
  margin-top: 24px; padding-top: 16px;                  /* 16 */
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 17.5px; line-height: 1.5; letter-spacing: -.02em;   /* Body/SM 16 */
  color: rgba(255, 255, 255, .7);                       /* opacity .7 */
}
.v2-site-h2r-ft__disc { max-width: 1380px; }
@media (min-width: 1024px) {
  .v2-site-h2r-ft__copy { padding-right: 160px; }       /* fab 154 + 20 right - gutter */
}
.v2-site-h2r-ft__copy { white-space: nowrap; flex-shrink: 0; }

@media (max-width: 1023px) {
  .v2-site-h2r-ft {
    border-radius: 48px 48px 0 0;
    padding: 56px 32px 32px;
    background-position: right bottom, 0 0;
    background-size: min(100%, 681px) auto, auto;       /* 681 = 1260 x 830/1536 */
  }
  .v2-site-h2r-ft__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "habla habla" "brand contact";
    gap: 48px 40px; align-items: start;
  }
  .v2-site-h2r-ft__habla { font-size: 72px; }
  .v2-site-h2r-ft__brand { align-items: flex-start; }
  .v2-site-h2r-ft__base { flex-direction: column; }
}

@media (max-width: 640px) {
  .v2-site-h2r-ft {
    border-radius: 32px 32px 0 0;                       /* 32 */
    padding: 24px 24px 32px;                            /* 24 / 24 / 32 */
    background-position: right -123px bottom, 0 0;
    background-size: 434px auto, auto;                  /* 804 x 830/1536 */
  }
  .v2-site-h2r-ft::before {
    width: 623.8px; height: 335.7px;
    left: calc(50% - 187.5px + 205.1px - 311.9px); top: calc(507.8px - 167.85px - 8px);
  }
  .v2-site-h2r-ft__top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "habla" "contact";
    gap: 48px;                                          /* 48 */
  }
  .v2-site-h2r-ft__brand { align-items: center; }
  .v2-site-h2r-ft__tag { font-size: 16px; letter-spacing: -.02em; }   /* Body/SM 16 */
  .v2-site-h2r-ft__habla { font-size: 59px; }
  .v2-site-h2r-ft__tel { font-size: .34em; }            /* ~20 */
  .v2-site-h2r-ft__list { font-size: 16px; letter-spacing: -.02em; }  /* 16 */
  .v2-site-h2r-ft__contact { align-self: stretch; }
  .v2-site-h2r-ft__row {
    flex-direction: row; align-items: center; justify-content: space-between;
    align-self: stretch; gap: 16px;
  }
  .v2-site-h2r-ft__more { flex-direction: column; gap: 16px; margin-top: 32px; font-size: 14px; }
  .v2-site-h2r-ft__addrs { flex-direction: column; gap: 6px; }
  .v2-site-h2r-ft__base {
    align-items: center; text-align: center; gap: 20px;  /* 20 */
    margin-top: 32px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));   /* fab 14+48, minus the footer's own 32, +10 gap */
  }
  .v2-site-h2r-ft__copy { white-space: normal; }
}
@media (max-width: 359px) {
  .v2-site-h2r-ft__habla { font-size: 50px; }
  .v2-site-h2r-ft__bbb { width: 150px; }
}
/* end 41 */

/* ==========================================================================
   42. State pages r2 — /health-insurance/<state> (templates/state/)
   ========================================================================== */
/* All classes are new and prefixed .v2-site-st-. §31 is dead, but its classes are still in
   §32-§34's selector lists — remove them together. The palette is custom properties here so
   one edit moves all eight states. Phone rules are §42b. */
.v2-site--state {
  --st-navy: #003e6a;
  --st-blue: #0078cd;
  --st-cyan: #00b6ed;
  --st-yellow: #ffeb00;
  --st-pink: #ff399e;
  --st-band: #dceff5;     /* After you enroll, Why families, What to bring */
  --st-pale: #f4f8fb;     /* Medicaid sections, note boxes, licensing */
  --st-callout: #deecf5;  /* the info callout under the Medicaid cards */
  --st-mute: #829fb6;     /* the "no state-funded subsidy" footnote */
  --st-line: #e3ebf2;
  --st-card-shadow: 0 2px 4px rgba(0, 62, 106, .05), 0 10px 30px rgba(0, 62, 106, .07);
  --st-edge-shadow: 0 3px 0 rgba(0, 62, 106, .09), 0 8px 24px rgba(0, 62, 106, .06);
}
body.v2-site--state { color: var(--st-navy); }

.v2-site-st-wrap {
  width: 100%; max-width: calc(1480px + 2 * var(--gutter));                      /* 1480 */
  margin-inline: auto; padding-inline: var(--gutter);
}
.v2-site-st-wrap--wide { max-width: var(--wrap-wide); }

.v2-site-st-sec { padding-block: clamp(56px, 5.2vw, 100px); position: relative; }   /* 100 */
.v2-site-st-sec--band { background: var(--st-band); }
.v2-site-st-sec--pale { background: var(--st-pale); }
.v2-site-st-sec--flush-top { padding-top: 0; }

.v2-site-st-h2 { font-size: clamp(32px, 3.34vw, 64px); color: var(--st-navy); }   /* 64 */
.v2-site-st-h2--md { font-size: clamp(30px, 2.92vw, 56px); }                     /* 56 */
.v2-site-st-h2--sm { font-size: clamp(28px, 2.5vw, 48px); }                      /* 48 */
.v2-site-st-h2 em { font-style: normal; color: var(--st-blue); }
.v2-site-st-h3 { font-size: clamp(22px, 1.67vw, 32px); color: var(--st-navy); }  /* 32 */
/* The heading is uncapped (League Spartan sets wider); only the lede has a measure. */
.v2-site-st-head { text-align: center; margin: 0 auto clamp(36px, 3.6vw, 70px); }
.v2-site-st-head p {
  margin: 16px auto 0; max-width: 960px;
  font-size: clamp(18px, 1.05vw, 20px); line-height: 1.5;                        /* 20 */
}
.v2-site-st-head--tight { margin-bottom: clamp(32px, 2.6vw, 50px); }
.v2-site-st-lede { font-size: clamp(18px, 1.05vw, 20px); line-height: 1.5; margin: 14px 0 0; }   /* 20 */
.v2-site-st-body { font-size: 18px; line-height: 1.6; }                           /* 18 at the comp's Futura; Jost sets ~6% wider */
.v2-site-st-body :where(p) { margin: 0 0 1em; }
.v2-site-st-body :where(p:last-child) { margin-bottom: 0; }
.v2-site-st-body b, .v2-site-st-body strong { font-weight: 700; }
.v2-site-st-body a { color: inherit; text-decoration: underline; }
.v2-site-st-body a.v2-site-st-link { color: var(--st-blue); font-weight: 700; }
.v2-site-st-blue { color: var(--st-blue); }
.v2-site-st-blue-b { color: var(--st-blue); font-weight: 700; font-size: 17.5px; line-height: 1.45; }   /* 16 */

/* ---- Statement card under the hero -------------------------------------------- */
.v2-site-st-statement {
  max-width: 1254px; margin: 37px auto 0;                                         /* 1254 / 37 */
  display: flex; align-items: center; gap: 34px;                                  /* 34 */
  background: #fff; border-radius: 28px; box-shadow: var(--st-edge-shadow);      /* 28 */
  padding: 30px 64px 30px 60px;                                                   /* 30 / 64 / 30 / 60 */
}
.v2-site-st-statement p { font-size: clamp(18px, 1.05vw, 20px); line-height: 1.5; margin: 0; }   /* 20 */
.v2-site-st-statement p + p { margin-top: 18px; }
.v2-site-st-statement strong { font-weight: 700; }
/* The star bead: a pale disc with a soft drop, the star the comp's #0078cd. */
.v2-site-st-star {
  flex: 0 0 115px; width: 115px; height: 115px; border-radius: 50%;              /* 115 */
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #fff 0, var(--st-pale) 72%);
  box-shadow: 0 6px 12px rgba(0, 62, 106, .14);
}
.v2-site-st-star svg { width: 62px; height: 62px; fill: var(--st-blue); }         /* 62 */

/* ---- What Madrinas offers ------------------------------------------------------- */
.v2-site-st-offers { position: relative; padding-top: 70px; overflow: hidden; }   /* 70 */
.v2-site-st-sprinkle { position: absolute; top: 0; width: 360px; height: 900px; pointer-events: none; }
.v2-site-st-sprinkle--l { left: 0; }
.v2-site-st-sprinkle--r { right: 0; transform: scaleX(-1); }
.v2-site-st-offers > .v2-site-st-wrap { position: relative; }
.v2-site-st-subhead { text-align: center; margin: clamp(48px, 4vw, 78px) 0 clamp(36px, 3.95vw, 76px); }   /* 78 / 76 */

.v2-site-st-cards { display: grid; gap: 20px; }                                   /* 20 */
.v2-site-st-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-site-st-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.v2-site-st-card {
  background: #fff; border-radius: 20px; box-shadow: var(--st-card-shadow);      /* 20 */
  padding: 22px 26px 28px;                                                        /* 22 / 26 / 28 */
}
.v2-site-st-card img { width: 60px; height: 60px; }                               /* 60 */
.v2-site-st-card h3 {
  font-family: var(--body); text-transform: none; letter-spacing: 0;
  font-size: 20px; font-weight: 700; line-height: 1.3; margin: 32px 0 10px;       /* 20 / 32 */
}
.v2-site-st-card p { font-size: 18px; line-height: 1.55; margin: 0; }
.v2-site-st-card b { font-weight: 700; }

.v2-site-st-trio {
  display: grid; grid-template-columns: minmax(0, 551fr) minmax(0, 378fr) minmax(0, 551fr);   /* 551 / 378 / 551 */
  align-items: end; margin-top: 70px; position: relative;                         /* 70 */
}
.v2-site-st-trio::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 18%; right: 18%; top: 12%; bottom: -26%;
  background: radial-gradient(closest-side, rgba(255, 235, 0, .30), rgba(255, 235, 0, 0));
}
.v2-site-st-big {
  position: relative; z-index: 1; align-self: end;
  background: #fff; border-radius: 20px; box-shadow: var(--st-edge-shadow);
  padding: 62px 50px 53px 60px;                                                   /* 62 / 50 / 53 / 60 */
}
.v2-site-st-big--right { padding: 52px 46px 53px 42px; }                          /* 52 / 46 / 53 / 42 */
.v2-site-st-big__top { display: flex; align-items: center; gap: 42px; margin-bottom: 40px; }   /* 42 / 40 */
.v2-site-st-big--right .v2-site-st-big__top { gap: 26px; }
.v2-site-st-big__top img { width: 111px; height: 111px; flex: 0 0 111px; }       /* 111 */
.v2-site-st-big h3 { font-size: clamp(30px, 2.5vw, 48px); line-height: .98; }    /* 48 */
.v2-site-st-big h3 em { font-style: normal; color: var(--st-cyan); }
.v2-site-st-big p { font-size: 18px; line-height: 1.55; margin: 0; }
.v2-site-st-big b { font-weight: 700; }
.v2-site-st-fairies { position: relative; z-index: 2; align-self: stretch; min-height: 500px; }
/* z-index 2: hands and wings overlap their neighbours, as drawn. */
.v2-site-st-fairies img { position: absolute; height: auto; max-width: none; }
.v2-site-st-fairies__b { width: 301px; left: 113px; bottom: 53px; }              /* pink: 301 x 462 */
.v2-site-st-fairies__a { width: 320px; left: -18px; bottom: -55px; }             /* yellow: 320 x 487 */
.v2-site-st-fairies svg { position: absolute; }

.v2-site-st-after {
  display: grid; grid-template-columns: 234px minmax(0, 1fr) auto; align-items: center;   /* 234 */
  gap: 24px 56px; margin-top: 46px; position: relative; z-index: 1;               /* 46 */
  background: var(--st-band); border-radius: 24px; box-shadow: var(--st-edge-shadow);
  padding: 26px 24px 26px 33px;                                                   /* 33 */
}
.v2-site-st-after h3 { font-size: clamp(26px, 1.88vw, 36px); line-height: 1; }   /* 36 */
.v2-site-st-after p { font-size: clamp(17.5px, 1.05vw, 20px); line-height: 1.5; margin: 0; max-width: 780px; }   /* 20 */
.v2-site-st-after__cta { display: grid; justify-items: center; gap: 12px; padding-right: 8px; }
.v2-site-st-after__cta span {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 20px;   /* 20 */
}

/* ---- Why families work with a Madrina -------------------------------------------- */
.v2-site-st-why { background: var(--st-band); position: relative; overflow: hidden; }
.v2-site-st-why__stars { position: absolute; top: 0; height: 100%; width: 520px; pointer-events: none; }
.v2-site-st-why__stars--l { left: 0; }
.v2-site-st-why__stars--r { right: 0; transform: scaleX(-1); }
.v2-site-st-why .v2-site-st-wrap { position: relative; }
.v2-site-st-why .v2-site-st-head { margin-bottom: 50px; }                          /* 50 */
.v2-site-st-why .v2-site-st-head p { font-size: 18px; margin-top: 18px; }
.v2-site-st-reasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 27px; }   /* 424 x4, 27 */
.v2-site-st-reason { background: #fff; border-radius: 20px; padding: 24px 24px 30px; }
.v2-site-st-reason img { width: 72px; height: 72px; }                             /* 72 */
.v2-site-st-reason h3 { font-size: 20px; line-height: 1.05; margin: 20px 0 12px; } /* 20 */
.v2-site-st-reason p { font-size: 16.5px; line-height: 1.45; margin: 0; }          /* 15 */

/* ---- Offices (Florida, Texas) ------------------------------------------------------ */
.v2-site-st-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }   /* 724 x2, 32 */
.v2-site-st-offices--one { grid-template-columns: minmax(0, 1fr); }
.v2-site-st-office {
  background: var(--st-blue); color: #fff; border-radius: 28px; padding: 32px;    /* 28 / 32 */
  display: flex; flex-direction: column;
}
.v2-site-st-office__map {
  display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 660 / 240; /* 660 x 240 */
  background: #e8edf2;
}
.v2-site-st-offices--one .v2-site-st-office__map { aspect-ratio: 1416 / 240; }
.v2-site-st-office__map img { width: 100%; height: 100%; object-fit: cover; }
.v2-site-st-office h3 { color: #fff; font-size: clamp(32px, 2.5vw, 48px); margin: 34px 0 22px; }   /* 48 */
.v2-site-st-office :where(p) { color: #fff; }
/* :where(), or this beats .v2-site-btn--white's ink. */
.v2-site-st-office :where(a) { color: #fff; }
.v2-site-st-olist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 18px; line-height: 1.5; }
.v2-site-st-olist li { display: flex; gap: 12px; align-items: flex-start; }
.v2-site-st-olist img { width: 36px; height: 36px; flex: 0 0 36px; margin-top: -3px; }   /* 36 */
.v2-site-st-olist b { font-weight: 700; }
.v2-site-st-olist__sub { display: block; margin-top: 8px; }
/* Texas's single card runs its list in two columns. */
.v2-site-st-olist--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; align-items: start; }
.v2-site-st-olist--2 > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.v2-site-st-octx { margin-top: 24px; font-size: 16px; line-height: 1.45; }      /* 14.5 */
.v2-site-st-octx h4 { color: #fff; font-size: 18px; margin: 0 0 6px; }            /* 18 */
.v2-site-st-octx p { margin: 0 0 8px; }
.v2-site-st-octx b { font-weight: 700; }
.v2-site-st-drive {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 4px 0 10px;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 12px; overflow: hidden; font-size: 15.5px;
}
.v2-site-st-drive th {
  text-align: left; padding: 14px 24px; color: #fff;
  font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 17.5px;
}
.v2-site-st-drive td { padding: 13px 24px; }
.v2-site-st-drive tbody tr:nth-child(odd) { background: rgba(0, 0, 0, .045); }
.v2-site-st-drive td:first-child { font-size: 16.5px; }
.v2-site-st-office__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 24px; }
.v2-site-st-offices--one .v2-site-st-office__acts { justify-content: center; }
/* An outline key on blue: navy ink would fail contrast. */
body.v2-site .v2-site-st-btn-line { background: transparent; color: #fff; border-color: #fff; --btn-edge: transparent; }
body.v2-site .v2-site-st-btn-line:hover { background: rgba(255, 255, 255, .12); }
/* A blue label: the :where(a) above would otherwise paint it white on white. */
.v2-site-st-office .v2-site-btn--white { color: var(--st-blue); }

/* ---- Contact us (the six states with no office) ---------------------------------- */
.v2-site-st-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 598px); gap: 64px; align-items: center; }   /* 598 */
.v2-site-st-rule { display: block; width: 50px; height: 6px; border-radius: 3px; background: var(--st-cyan); margin: 18px 0 20px; }   /* 50 x 6 */
.v2-site-st-ticks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; font-size: 18px; line-height: 1.45; }
.v2-site-st-ticks li { display: flex; gap: 10px; align-items: baseline; }
.v2-site-st-ticks svg {
  width: 17px; height: 17px; flex: 0 0 17px; transform: translateY(2px);
  fill: none; stroke: #1ea8e8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.v2-site-st-ticks b { font-weight: 700; }
.v2-site-st-ctx h3 { font-size: 18px; margin: 4px 0 4px; }                        /* 18 */
.v2-site-st-ctx p { font-size: 16.5px; line-height: 1.45; margin: 0; }              /* 15 */
/* The photo in a white frame on a wide blue glow. */
.v2-site-st-frame { background: #fff; border-radius: 28px; padding: 11px; box-shadow: 0 10px 60px rgba(0, 120, 205, .16); }   /* 28 / 11 */
.v2-site-st-frame img { border-radius: 18px; width: 100%; }

/* ---- Copy | photo split (What to bring, and the per-state feature rows) --------- */
.v2-site-st-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 64px; align-items: center; }   /* 600 */
.v2-site-st-split--wide-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 704px); gap: 52px; }   /* 704 */
.v2-site-st-split--photo-left { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 72px; }
.v2-site-st-split--top { align-items: start; }
.v2-site-st-photo { border-radius: 24px; width: 100%; height: auto; }             /* 24 */
.v2-site-st-split .v2-site-st-h2 + .v2-site-st-lede,
.v2-site-st-split .v2-site-st-h2 + .v2-site-st-body { margin-top: 22px; }
.v2-site-st-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.v2-site-st-checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 18px; line-height: 1.45; }
.v2-site-st-checks svg { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 1px; }
/* The pale note with the blue rule down its left edge. */
.v2-site-st-note {
  background: var(--st-pale); border-left: 6px solid var(--st-blue); border-radius: 12px;
  padding: 20px 24px; font-size: 16.5px; line-height: 1.6; margin-top: 8px;
}
.v2-site-st-note b { font-weight: 700; }

/* ---- How coverage works --------------------------------------------------------- */
.v2-site-st-cov { position: relative; overflow: hidden; }
.v2-site-st-cov__grid { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 72px; align-items: center; }   /* 600 / 72 */
.v2-site-st-cov__fairy { position: absolute; z-index: 0; pointer-events: none; max-width: none; }
.v2-site-st-cov__fairy--l { width: 262px; left: -54px; top: 161px; }             /* 262 x 402, cut by the viewport */
.v2-site-st-cov__fairy--r { width: 284px; right: -36px; top: 167px; }            /* 284 x 432 */
.v2-site-st-cov .v2-site-st-wrap { position: relative; z-index: 1; }
.v2-site-st-enroll {
  aspect-ratio: 600 / 296; border-radius: 28px; color: #fff; text-align: center;  /* 600 x 296 */
  background: var(--st-blue) url("../images/v2/site/state/aca-enrollment-bg.webp") no-repeat center / cover;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px;
}
.v2-site-st-enroll :where(p) { margin: 0; }
.v2-site-st-enroll__t, .v2-site-st-enroll__s, .v2-site-st-enroll__d {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 1;
}
.v2-site-st-enroll__t { color: var(--st-yellow); font-size: clamp(30px, 2.5vw, 48px); }   /* 48 */
.v2-site-st-enroll__s { color: #fff; font-size: clamp(20px, 1.67vw, 32px); margin-top: 14px; }   /* 32 */
.v2-site-st-enroll__d { color: var(--st-yellow); font-size: clamp(48px, 3.75vw, 72px); margin-top: 14px; }   /* 72 */
.v2-site-st-enroll__n { font-size: 15.5px; margin-top: 18px; max-width: 460px; margin-inline: auto; }                      /* 14 */
/* Shown only in §42b. */
.v2-site-st-enroll__fairy { display: none; }

/* ---- Medicare -------------------------------------------------------------------- */
.v2-site-st-mhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.v2-site-st-mhead .v2-site-st-lede { font-size: 18px; margin-top: 10px; }
.v2-site-st-tbl {
  margin-top: 26px; border-radius: 20px; overflow: hidden;                        /* 20 */
  border: 1px solid var(--st-line); box-shadow: var(--st-edge-shadow);
}
.v2-site-st-tbl table { width: 100%; border-collapse: collapse; font-size: 17.5px; }
.v2-site-st-tbl th {
  background: var(--st-blue); color: #fff; text-align: left; padding: 24px 24px 22px;   /* 68 tall */
  font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 18px;
}
.v2-site-st-tbl td { padding: 25px 24px; border-top: 1px solid var(--st-line); vertical-align: top; }   /* 78 rows */
.v2-site-st-tbl th:nth-child(-n+2), .v2-site-st-tbl td:nth-child(-n+2) { width: 29.2%; }   /* 432 / 1480 */
.v2-site-st-tbl td:first-child { font-size: 18px; }
.v2-site-st-tbl tbody tr:nth-child(even) { background: #fff; }
.v2-site-st-tbl tbody tr:nth-child(odd) { background: var(--st-pale); }
.v2-site-st-tbl tbody tr:first-child { background: var(--st-band); }
.v2-site-st-tbl tr.is-key td:nth-child(-n+2) { font-weight: 700; }
.v2-site-st-mnote {
  position: relative; overflow: hidden; margin-top: 24px; text-align: center;
  background: var(--st-pale); border: 1px solid var(--st-line); border-radius: 20px; box-shadow: var(--st-edge-shadow);
  padding: 30px 60px 26px; font-size: 17.5px; line-height: 1.5;
}
.v2-site-st-mnote > * { position: relative; }
.v2-site-st-mnote b { font-weight: 700; }
.v2-site-st-mnote a { color: var(--st-blue); font-weight: 700; text-decoration: underline; }
/* The pale bulb in the corner is decoration under the copy. */
.v2-site-st-mnote > .v2-site-st-mnote__bulb { position: absolute; left: -22px; bottom: -34px; width: 150px; height: 190px; }
.v2-site-st-mnote__lead { max-width: 560px; margin: 0 auto 14px; }
.v2-site-st-mnote__two { font-weight: 700; margin: 0 0 16px; }
.v2-site-st-steps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px;
  text-align: left; max-width: 980px; margin: 0 auto 24px;
}
.v2-site-st-step { display: flex; gap: 20px; align-items: center; }
.v2-site-st-step p { margin: 0; line-height: 2.05; }   /* the comp's airy 33px pitch */
.v2-site-st-num {
  flex: 0 0 82px; width: 82px; height: 82px; border-radius: 50%;                 /* 82 */
  display: grid; place-items: center; background: #fff; box-shadow: 0 5px 12px rgba(0, 62, 106, .16);
}
.v2-site-st-num span {
  width: 56px; height: 56px; border-radius: 50%; background: var(--st-blue); color: #fff;   /* 56 */
  display: grid; place-items: center; padding-top: 4px;
  font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1;
}
.v2-site-st-mnote__ship { margin: 0 auto; max-width: 1000px; }
.v2-site-st-mnote__ship + .v2-site-st-mnote__ship { margin-top: 12px; }
.v2-site-st-info {
  display: flex; gap: 18px; align-items: center; margin-top: 12px;
  background: var(--st-pale); border: 1px solid var(--st-line); border-radius: 16px; box-shadow: var(--st-edge-shadow);
  padding: 18px 24px; font-size: 17.5px; line-height: 1.5;
}
.v2-site-st-info p { margin: 0; }
.v2-site-st-ico-i { width: 36px; height: 36px; flex: 0 0 36px; }                  /* 36 */
.v2-site-st-ico-bulb { width: 40px; height: 44px; flex: 0 0 40px; }

/* ---- Banner sections (Medicaid / financial help over the family photo) ---------- */
/* One strip with the wave baked in, so photo and wave never drift; min-height is the strip's aspect. */
.v2-site-st-banner { background: var(--st-pale); }
.v2-site-st-banner__head {
  position: relative; overflow: hidden;
  background: #fff url("../images/v2/site/state/banner-family.webp") no-repeat center bottom / 100% auto;
  min-height: calc(100vw * 369 / 1920);                                           /* 1920 x 369 */
  padding: clamp(40px, 4.4vw, 84px) 0 clamp(64px, 6.5vw, 125px);
}
.v2-site-st-banner__head .v2-site-st-wrap { position: relative; z-index: 1; }
.v2-site-st-banner__copy { max-width: 920px; }   /* the artboard's heading runs ~900 */
.v2-site-st-banner__copy .v2-site-st-h2 { font-size: clamp(28px, 2.5vw, 48px); }  /* 48 */
.v2-site-st-banner__copy p { font-size: 18px; line-height: 1.6; margin: 14px 0 0; }
@media (min-width: 1024px) { .v2-site-st-banner__copy p { max-width: min(640px, 52vw); } }
/* The state outline (see tools/build-state-images.py), positioned in % of the strip. */
.v2-site-st-banner__state {
  position: absolute; right: 1.6%; bottom: calc(100vw * 369 / 1920 * .12);
  width: 16%; height: calc(100vw * 369 / 1920 * .86);
  object-fit: contain; object-position: center; pointer-events: none;
}
.v2-site-st-banner__body { padding: clamp(28px, 2.1vw, 40px) 0 clamp(56px, 5.2vw, 100px); }
.v2-site-st-banner__sub { font-size: 20px; line-height: 1.5; margin: 8px 0 0; }   /* 20 */
.v2-site-st-gcards { display: grid; grid-template-columns: repeat(2, minmax(0, 580px)); gap: 16px 20px; margin-top: 34px; max-width: 1180px; }   /* 580 x2 */
.v2-site-st-gcard {
  display: flex; gap: 22px; align-items: center;
  background: #fff; border-radius: 16px; box-shadow: var(--st-edge-shadow);
  padding: 22px 24px; font-size: 17.5px; line-height: 1.6;
}
.v2-site-st-gcard--span { grid-column: 1 / -1; max-width: 1180px; }               /* 1180 */
.v2-site-st-gcard p { margin: 0; }
.v2-site-st-gcard b { font-weight: 700; }
.v2-site-st-gcard small { display: block; font-size: 14.5px; margin-top: 6px; }
.v2-site-st-gdisc {
  flex: 0 0 80px; width: 80px; height: 80px; border-radius: 50%; background: #fff;   /* 80 */
  display: grid; place-items: center; box-shadow: 0 5px 12px rgba(0, 62, 106, .16);
}
.v2-site-st-gdisc img { width: 56px; height: 56px; }
.v2-site-st-callout {
  display: flex; gap: 18px; align-items: center; margin-top: 18px;
  background: var(--st-callout); border-radius: 16px; padding: 22px 24px; font-size: 18px; line-height: 1.6;
}
.v2-site-st-callout p { margin: 0; }
.v2-site-st-callout b { font-weight: 700; }
.v2-site-st-callout--bulb {
  align-items: flex-start; font-size: 17.5px;
  background: var(--st-pale); border: 1px solid var(--st-line); box-shadow: var(--st-edge-shadow);
}
.v2-site-st-callout--bulb h3 { font-size: 20px; margin: 4px 0 10px; }
.v2-site-st-callout--bulb p + p { margin-top: 12px; }
.v2-site-st-callout--bulb .v2-site-st-blue { font-size: 18px; }

/* ---- Illinois: When a plan or carrier changes ----------------------------------- */
.v2-site-st-caps {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; text-align: center;
  font-size: clamp(20px, 1.67vw, 32px); line-height: 1.75; margin: 0;              /* 32 */
}
.v2-site-st-q2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.v2-site-st-q2__card { position: relative; background: #fff; border-radius: 22px; padding: 11px; box-shadow: 0 10px 60px rgba(0, 120, 205, .14); }
.v2-site-st-q2__in { border-radius: 16px; color: #fff; text-align: center; padding: 30px 30px 32px; height: 100%; }
.v2-site-st-q2__in h3 { color: #fff; font-size: clamp(22px, 1.67vw, 32px); line-height: 1.6; }   /* 32 */
.v2-site-st-q2__in p { margin: 8px 0 0; font-weight: 700; font-size: 18px; }
.v2-site-st-q2__card:first-child .v2-site-st-q2__in { background: var(--st-navy); }
.v2-site-st-q2__card:last-child .v2-site-st-q2__in { background: var(--st-blue); }
.v2-site-st-q2__n {
  position: absolute; left: calc(50% - 30px); bottom: -30px; width: 60px; height: 60px; border-radius: 50%;
  background: #fff; box-shadow: 0 5px 14px rgba(0, 62, 106, .16);
  display: grid; place-items: center; font-weight: 700; font-size: 17.5px;
}
.v2-site-st-q2__after { text-align: center; margin-top: 50px; font-size: 18px; }
.v2-site-st-q2__after p { margin: 0 0 18px; }

/* ---- Financial help ---------------------------------------------------------------- */
.v2-site-st-foot { color: var(--st-mute); font-size: 18px; }                      /* 18 */

/* ---- Communities --------------------------------------------------------------------- */
.v2-site-st-comm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 60px; align-items: start; }   /* 460 */
.v2-site-st-comm .v2-site-st-body { margin-top: 18px; font-size: 18px; }
.v2-site-st-pills { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.v2-site-st-pills span {
  background: var(--st-blue); color: #fff; border-radius: 999px; padding: 12px 24px;   /* 51 tall */
  font-size: 17.5px; line-height: 1.6;
}
.v2-site-st-lic {
  margin-top: 54px; background: var(--st-pale); border: 1px solid #dfe8f0; border-radius: 24px;   /* 24 */
  padding: 30px 32px;
}
.v2-site-st-lic h3 { font-size: 18px; color: var(--st-blue); margin: 0 0 12px; }  /* 18 */
.v2-site-st-lic p { font-size: 15.5px; line-height: 1.5; margin: 0; color: #4a6b8f; }

/* ---- FAQ ---------------------------------------------------------------------------- */
.v2-site-st-faq { max-width: 1080px; margin-inline: auto; position: relative; padding: 32px 16px 0; }   /* 1048 list */
/* The bracket rule over the list: top + side borders, masked to fade the turns. */
.v2-site-st-faq::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px;      /* 30 */
  border: solid var(--st-blue); border-width: 2px 1px 0;                          /* 2 / 1 */
  border-radius: 40px 40px 0 0 / 30px 30px 0 0;                                   /* 40 x 30 */
  -webkit-mask-image: linear-gradient(#000 65%, transparent 100%);
          mask-image: linear-gradient(#000 65%, transparent 100%);
  pointer-events: none;
}
.v2-site-st-faq .v2-site-q { border-color: #d9ebf7; border-radius: 10px; box-shadow: none; margin-bottom: 14px; }   /* 10 */
.v2-site-st-faq .v2-site-q > summary { font-size: 18px; font-weight: 700; color: var(--st-navy); padding: 14px 16px; }   /* 57 tall */
.v2-site-st-faq .v2-site-q__a { font-size: 17.5px; color: var(--st-navy); padding: 0 16px 16px; }

/* ---- Talk to a Madrina --------------------------------------------------------------- */
/* Not §13's banner: the fairy is centred, standing out of the bar's top edge. */
.v2-site-st-cta-wrap { padding: clamp(70px, 4.7vw, 90px) clamp(12px, 1.3vw, 25px) clamp(32px, 2.6vw, 50px); }   /* 25 / 50 */
.v2-site-st-cta {
  position: relative; display: grid; align-items: end;
  grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr);                     /* 320 */
  min-height: 170px;                                                               /* 170 */
  background: var(--st-blue); border-radius: 28px; border-top: 4px solid #3f9ee3;
  padding: 0 clamp(20px, 2.3vw, 44px) 0 clamp(20px, 4.8vw, 92px);
}
/* Clipped here, not by overflow on the bar, which would cut off the fairy. */
.v2-site-st-cta__stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 24px; }
.v2-site-st-cta__copy { position: relative; text-align: center; justify-self: start; padding-top: 22px; }
.v2-site-st-cta__copy h2 { color: #fff; font-size: clamp(34px, 2.92vw, 56px); line-height: 1; }   /* 56 */
.v2-site-st-cta__copy > p {
  margin: 6px 0 0; color: #fff; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; font-size: clamp(14.5px, .95vw, 18px);                     /* 18 */
}
.v2-site-st-cta__pill {
  display: inline-block; position: relative; margin-top: 14px;
  background: var(--st-pink); color: #fff; border-radius: 16px 16px 0 0;
  font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(15.5px, .95vw, 18px);
  padding: 14px 20px 12px;
}
.v2-site-st-cta__wand { position: absolute; bottom: 0; width: 36px; height: 46px; }
.v2-site-st-cta__wand--l { left: -52px; }
.v2-site-st-cta__wand--r { right: -52px; transform: scaleX(-1); }
/* clip-path, not overflow, so the fairy can stand out of the top. */
.v2-site-st-cta__art { position: relative; align-self: stretch; clip-path: inset(-200px -40px 0 -200px); }
.v2-site-st-cta__halo {
  position: absolute; left: calc(50% - 119px); top: 0; width: 257px; height: 257px; border-radius: 50%;   /* 257 */
  background: rgba(255, 255, 255, .1);
}
/* Offsets from the column's centre, so the art stays on the bar when it narrows. */
.v2-site-st-cta__bigwand { position: absolute; left: calc(50% - 146px); top: 18px; width: 120px; height: 180px; }
.v2-site-st-cta__fairy { position: absolute; left: calc(50% - 42px); top: -61px; width: 209px; max-width: none; }   /* 209 x 286 */
.v2-site-st-cta__acts { position: relative; align-self: center; display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- Footer: §41's footer with the state row and base ---------------------------- */
.v2-site-st-foff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 44px; }   /* 572 x3, 32 */
.v2-site-st-foff__card { background: #fff; color: var(--st-navy); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.v2-site-st-foff__map { display: block; aspect-ratio: 572 / 220; }                 /* 572 x 220 */
.v2-site-st-foff__map img { width: 100%; height: 100%; object-fit: cover; }
.v2-site-st-foff__body { padding: 20px 22px; }
.v2-site-st-foff__t { display: flex; align-items: center; gap: 8px; }
.v2-site-st-foff__t h3 { font-size: 20px; color: var(--st-navy); margin-right: auto; }   /* 20 */
.v2-site-st-foff__t > svg { width: 17px; height: 22px; fill: var(--st-blue); flex: 0 0 17px; }
.v2-site-st-foff__t a { display: block; line-height: 0; }
.v2-site-st-foff__t img { height: 32px; width: auto; }                             /* 32 */
.v2-site-st-foff__addr { font-size: 15.5px; margin: 8px 0 12px; color: var(--st-navy); }
.v2-site-st-foff__row { display: grid; grid-template-columns: 34% 1fr; border-top: 1px solid var(--st-line); padding-top: 14px; }
.v2-site-st-foff__row > div + div { border-left: 1px solid var(--st-line); padding-left: 20px; }
.v2-site-st-foff__row h4 { font-size: 15.5px; color: var(--st-blue); margin: 0 0 4px; }
.v2-site-st-foff__row a { color: var(--st-navy); font-weight: 700; font-size: 17.5px; white-space: nowrap; }
.v2-site-st-foff__row p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--st-navy); }
.v2-site-st-foff__row b { font-weight: 700; }
@media (min-width: 1280px) {
  .v2-site-st-foff__row { grid-template-columns: max-content minmax(0, 1fr); }
  .v2-site-st-foff__row > div:first-child { padding-right: 16px; }
}
/* Solid white: §41's dimmed base fails contrast at this size. */
.v2-site-st-fbase {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14);
  text-align: center; font-size: 15px; line-height: 1.55; color: #fff;
}
.v2-site-st-fbase p { margin: 0 auto 14px; max-width: 1760px; }
.v2-site-st-fbase p:last-child { margin-bottom: 0; }

/* ---- Responsive ------------------------------------------------------------------------ */
@media (max-width: 1279px) {
  .v2-site-st-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-site-st-cov__grid, .v2-site-st-split, .v2-site-st-split--wide-photo,
  .v2-site-st-split--photo-left, .v2-site-st-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .v2-site-st-comm { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; }
  .v2-site-st-foff__row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .v2-site-st-foff__row > div + div { border-left: 0; padding-left: 0; }
  .v2-site-st-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 20px; }
  .v2-site-st-trio::before, .v2-site-st-fairies { display: none; }
  .v2-site-st-big, .v2-site-st-big--right { padding: 36px 32px; align-self: stretch; }
  .v2-site-st-cov__fairy { display: none; }
  .v2-site-st-cta { grid-template-columns: minmax(0, 1fr) 300px; }
  .v2-site-st-cta__acts { grid-column: 1 / -1; justify-content: center; padding: 6px 0 26px; }
  .v2-site-st-cta__copy { justify-self: center; }
}
@media (max-width: 1023px) {
  .v2-site-st-statement { flex-direction: column; text-align: center; padding: 28px 24px; gap: 18px; margin-top: 24px; }
  .v2-site-st-star { flex-basis: 84px; width: 84px; height: 84px; }
  .v2-site-st-star svg { width: 44px; height: 44px; }
  .v2-site-st-sprinkle { width: 200px; height: 520px; }
  .v2-site-st-cards--2, .v2-site-st-cards--3, .v2-site-st-trio { grid-template-columns: minmax(0, 1fr); }
  .v2-site-st-after { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; padding: 28px 24px; gap: 14px; }
  .v2-site-st-offices, .v2-site-st-contact, .v2-site-st-split, .v2-site-st-split--wide-photo,
  .v2-site-st-split--photo-left, .v2-site-st-cov__grid, .v2-site-st-comm, .v2-site-st-q2,
  .v2-site-st-olist--2, .v2-site-st-gcards, .v2-site-st-steps, .v2-site-st-foff { grid-template-columns: minmax(0, 1fr); }
  .v2-site-st-offices, .v2-site-st-contact, .v2-site-st-split, .v2-site-st-cov__grid, .v2-site-st-comm { gap: 36px; }
  .v2-site-st-split--photo-left > :first-child { order: 2; }
  .v2-site-st-q2 { gap: 60px; }
  .v2-site-st-mnote { padding: 26px 22px; }
  .v2-site-st-mnote > .v2-site-st-mnote__bulb { display: none; }
  .v2-site-st-step p { line-height: 1.6; }
  .v2-site-st-banner__head {
    min-height: 0; background-size: 180% auto; background-position: 92% bottom;
    padding-bottom: calc(180vw * 369 / 1920 + 12px);
  }
  .v2-site-st-banner__state { display: none; }
  .v2-site-st-cta { grid-template-columns: minmax(0, 1fr); padding: 0 20px 26px; }
  .v2-site-st-cta__art { display: none; }
  .v2-site-st-cta__copy { padding-top: 32px; }
  .v2-site-st-cta__pill { border-radius: 16px; }
}
@media (max-width: 640px) {
  .v2-site-st-sprinkle { display: none; }
  .v2-site-st-card h3 { margin-top: 20px; }
  .v2-site-st-reasons { grid-template-columns: minmax(0, 1fr); }
  .v2-site-st-big__top { gap: 18px; margin-bottom: 22px; }
  .v2-site-st-big__top img { width: 80px; height: 80px; flex-basis: 80px; }
  .v2-site-st-office { padding: 18px; }
  .v2-site-st-office h3 { margin: 22px 0 16px; }
  .v2-site-st-olist { font-size: 16px; }
  .v2-site-st-drive th, .v2-site-st-drive td { padding: 10px 12px; }
  .v2-site-st-drive th { font-size: 16px; }
  .v2-site-st-drive td { font-size: 14px; }
  .v2-site-st-drive td:first-child { font-size: 15px; }
  .v2-site-st-tbl { overflow-x: auto; }
  .v2-site-st-tbl table { min-width: 640px; font-size: 15px; }
  .v2-site-st-tbl th, .v2-site-st-tbl td { padding: 16px 14px; }
  .v2-site-st-gcard { flex-direction: column; align-items: flex-start; }
  .v2-site-st-callout, .v2-site-st-info { flex-direction: column; align-items: flex-start; }
  .v2-site-st-cta__wand { display: none; }
  .v2-site-st-cta__pill { font-size: 13px; }
  .v2-site-st-cta__acts { flex-direction: column; align-items: stretch; }
  .v2-site-st-foff__row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .v2-site-st-foff__row > div + div { border-left: 0; padding-left: 0; }
}
/* ---- 42b. PHONE — mobile-dez/<state>.jpg ------------------------------------------------- */
/* Measured off the eight phone comps at 375. The copy comes from the templates, not the
   comps (the client's edit docs are newer). */
@media (max-width: 640px) {

  /* At the top the bar is the hero sky's own colour (one surface); the pill floats once scrolled. */
  .v2-site--state .v2-site-hdr[data-top] { background: #e9faff; }
  .v2-site--state .v2-site-hdr[data-top] .v2-site-hdr__in { background-color: transparent; }
  .v2-site--state .v2-site-hdr__in { min-height: 105px; }
  .v2-site--state .v2-site-logo img { width: 192px; }
  .v2-site--state .v2-site-burger { right: 12px; top: calc(50% - 10.5px); }
  .v2-site--state .v2-site-burger svg { width: 30px; height: 30px; stroke-width: 1.92; stroke-linecap: butt; }

  /* Hero: §6b's phone hero retuned; the art is pushed down 118px, the sky and glow fill the gaps. */
  .v2-site--state .v2-site-chero {
    background:
      url("../images/v2/site/state/hero-bg-phone.webp") no-repeat center 118px / 100% auto,
      linear-gradient(90deg, #0379cc, #329de2 25%, #66c2f5 50%, #35a1e3 75%, #067ace) no-repeat center bottom / 100% 50%,
      #e9faff;
  }
  .v2-site--state .v2-site-chero__in { padding-top: 37px; }
  .v2-site--state .v2-site-chero__in { padding-bottom: calc(37.6vw + 35px); }
  .v2-site--state .v2-site-chero__fairy--l { bottom: calc(-37.07vw + 13.5px); }
  .v2-site--state .v2-site-chero__fairy--r { bottom: calc(-37.87vw + 13.5px); }
  /* Per-state hero lengths, as each comp draws them. */
  .v2-site--state-florida .v2-site-chero__in { padding-bottom: calc(37.6vw + 24.75px); }
  .v2-site--state-florida .v2-site-chero__fairy--l { bottom: calc(-37.07vw + 3.25px); }
  .v2-site--state-florida .v2-site-chero__fairy--r { bottom: calc(-37.87vw + 3.25px); }
  .v2-site--state-illinois .v2-site-chero__in { padding-bottom: calc(37.6vw + 26.5px); }
  .v2-site--state-illinois .v2-site-chero__fairy--l { bottom: calc(-37.07vw + 18.5px); }
  .v2-site--state-illinois .v2-site-chero__fairy--r { bottom: calc(-37.87vw + 18.5px); }
  .v2-site--state-kentucky .v2-site-chero__in { padding-bottom: calc(37.6vw + 11.5px); }
  .v2-site--state-kentucky .v2-site-chero__fairy--l { bottom: calc(-37.07vw + 3.75px); }
  .v2-site--state-kentucky .v2-site-chero__fairy--r { bottom: calc(-37.87vw + 3.75px); }
  .v2-site--state-new-jersey .v2-site-chero__in { padding-bottom: calc(37.6vw + 38.75px); }
  .v2-site--state-new-jersey .v2-site-chero__fairy--l { bottom: calc(-37.07vw + 28.5px); }
  .v2-site--state-new-jersey .v2-site-chero__fairy--r { bottom: calc(-37.87vw + 28.5px); }
  .v2-site--state-pennsylvania .v2-site-chero__in { padding-bottom: calc(37.6vw + 12px); }
  .v2-site--state-pennsylvania .v2-site-chero__fairy--l { bottom: calc(-37.07vw + 3.75px); }
  .v2-site--state-pennsylvania .v2-site-chero__fairy--r { bottom: calc(-37.87vw + 3.75px); }
  .v2-site--state-virginia .v2-site-chero__in { padding-bottom: calc(37.6vw + 49.25px); }
  .v2-site--state-virginia .v2-site-chero__fairy--l { bottom: calc(-37.07vw + 35px); }
  .v2-site--state-virginia .v2-site-chero__fairy--r { bottom: calc(-37.87vw + 35px); }
  .v2-site--state-texas .v2-site-chero__in { padding-bottom: calc(37.6vw + 12px); }
  .v2-site--state-texas .v2-site-chero__fairy--l { bottom: calc(-37.07vw + 3.5px); }
  .v2-site--state-texas .v2-site-chero__fairy--r { bottom: calc(-37.87vw + 3.5px); }
  .v2-site--state .v2-site-chero h1 { line-height: 39.6px; }                        /* 40 / 39.6 */
  .v2-site--state .v2-site-chero__kicker { max-width: 330px; line-height: 19.4px; margin-top: 19px; }
  .v2-site--state .v2-site-chero__kicker + .v2-site-chero__sub { margin-top: 10px; }
  .v2-site--state .v2-site-chero__sub { font-size: 16.5px; line-height: 27px; max-width: 352px; letter-spacing: 0; }
  .v2-site--state .v2-site-chero__actions { margin-top: 13px; }
  :is(.v2-site--state-florida, .v2-site--state-texas) .v2-site-chero__actions { margin-top: 25px; }

  /* The statement card, 17px off each edge on the page's pale ground. */
  .v2-site--state .v2-site-st-wrap:has(> .v2-site-st-statement) { background: var(--st-pale); padding: 11px 17px 16px; }
  .v2-site--state .v2-site-st-statement { margin: 0; border-radius: 28px; padding: 35px 20px 23px; gap: 6px; }
  .v2-site--state .v2-site-st-star { flex-basis: 80px; width: 80px; height: 80px; }
  .v2-site--state .v2-site-st-star svg { width: 42px; height: 42px; }
  .v2-site--state .v2-site-st-statement p { font-size: 18.3px; line-height: 30px; }
  :is(.v2-site--state-florida, .v2-site--state-texas) .v2-site-st-statement p { font-size: 16.5px; line-height: 27px; }
  .v2-site--state .v2-site-st-statement p + p { margin-top: 62px; }
  .v2-site--state .v2-site-st-statement strong { font-weight: 800; letter-spacing: .03em; }

  /* The template's &nbsp; holds "offers in" together. */
  .v2-site--state .v2-site-st-offers { padding: 38px 0 115px; }
  .v2-site--state .v2-site-st-offers > .v2-site-st-wrap { padding-inline: 20px; }
  .v2-site--state .v2-site-st-offers .v2-site-st-head { margin-bottom: 0; }
  .v2-site--state .v2-site-st-offers .v2-site-st-h2 {
    font-size: 40px; line-height: 39.5px; max-width: 300px; margin-inline: auto;   /* 40 */
  }
  .v2-site--state .v2-site-st-offers .v2-site-st-head p { font-size: 18.5px; line-height: 30px; margin-top: 18px; }
  /* Three classes, to beat the offers heading's rule. */
  .v2-site--state .v2-site-st-offers .v2-site-st-subhead { font-size: 48px; line-height: 47px; width: auto; margin: 66px 0 26px; }   /* 48 */
  .v2-site--state .v2-site-st-cards { gap: 28px; }
  .v2-site--state .v2-site-st-cards--3 { margin-top: 28px; }
  .v2-site--state .v2-site-st-card { border-radius: 20px; padding: 24px 24px 16px; }
  .v2-site--state .v2-site-st-card h3 { font-size: 20px; line-height: 30px; letter-spacing: -.01em; margin: 24px 0 8px; }
  .v2-site--state .v2-site-st-card p { font-size: 16.5px; line-height: 27px; }

  /* The fairies are positioned against the trio itself (position: relative). */
  .v2-site--state .v2-site-st-trio { display: flex; flex-direction: column; gap: 25px; margin-top: 71px; }
  .v2-site--state .v2-site-st-trio::before {
    display: block; left: -40px; right: -40px; top: 38%; bottom: -150px;
    background: radial-gradient(closest-side, rgba(255, 235, 0, .26), rgba(255, 235, 0, 0));
  }
  .v2-site--state .v2-site-st-fairies { display: block; position: static; min-height: 0; height: 0; margin: -25px 0 0; }
  .v2-site--state .v2-site-st-fairies__a { width: 108px; left: auto; right: -15px; top: 12px; bottom: auto; }    /* yellow */
  .v2-site--state .v2-site-st-fairies__b { width: 112px; left: -10px; bottom: 250px; }                          /* pink */
  /* !important: the desktop offsets are inline styles. */
  .v2-site--state .v2-site-st-fairies svg:nth-of-type(1) { left: -12px !important; top: 83px; bottom: auto !important; width: 38px !important; height: 38px !important; }
  .v2-site--state .v2-site-st-fairies svg:nth-of-type(2) { left: 102px !important; top: -27px; bottom: auto !important; width: 35px !important; height: 35px !important; }
  .v2-site--state .v2-site-st-fairies svg:nth-of-type(3) { left: 258px !important; top: -22px; bottom: auto !important; width: 35px !important; height: 35px !important; }
  .v2-site--state .v2-site-st-fairies svg:nth-of-type(4) { left: 10px !important; bottom: -69px !important; width: 36px !important; height: 36px !important; }
  .v2-site--state .v2-site-st-fairies svg:nth-of-type(5) { left: 280px !important; bottom: 403px !important; width: 53px !important; height: 53px !important; }
  .v2-site--state .v2-site-st-big,
  .v2-site--state .v2-site-st-big--right { padding: 27px 24px 34px; border-radius: 20px; }
  .v2-site--state .v2-site-st-big--right { padding-top: 32px; }
  .v2-site--state .v2-site-st-big__top { flex-direction: column; gap: 24px; margin-bottom: 12px; text-align: center; }
  .v2-site--state .v2-site-st-big__top img { width: 110px; height: 110px; flex-basis: auto; }
  .v2-site--state .v2-site-st-big h3 { font-size: 40px; line-height: 40px; }        /* 40 */
  .v2-site--state .v2-site-st-big p { font-size: 16.5px; line-height: 27px; }

  .v2-site--state .v2-site-st-after {
    grid-template-columns: minmax(0, 1fr); text-align: left; justify-items: stretch;
    gap: 0; margin-top: 63px; border-radius: 20px; padding: 24px 24px 24px;
  }
  .v2-site--state .v2-site-st-after h3 { font-size: 24px; line-height: 1; }        /* 24 */
  .v2-site--state .v2-site-st-after p { font-size: 18px; line-height: 30px; margin-top: 10px; }
  .v2-site--state .v2-site-st-after__cta { justify-items: stretch; gap: 8px; padding: 0; margin-top: 14px; }
  .v2-site--state .v2-site-st-after__cta span { font-size: 24px; line-height: 1; }
  .v2-site--state .v2-site-st-after__cta .v2-site-btn { width: 100%; }

  .v2-site--state .v2-site-st-why {
    padding: 52px 0 53px;
    background: var(--st-band) url("../images/v2/site/state/why-stars-phone.webp") no-repeat center top / 375px auto;
  }
  .v2-site--state .v2-site-st-why__stars { display: none; }
  .v2-site--state .v2-site-st-why .v2-site-st-wrap { padding-inline: 25px; }
  .v2-site--state .v2-site-st-why .v2-site-st-h2 {
    font-size: 48px; line-height: 48px; width: min-content; margin-inline: auto;   /* 48 */
  }
  .v2-site--state .v2-site-st-why .v2-site-st-head { margin-bottom: 32px; }
  .v2-site--state .v2-site-st-why .v2-site-st-head p { font-size: 18px; line-height: 30.6px; margin-top: 7px; }
  .v2-site--state .v2-site-st-reasons { gap: 18px; }
  .v2-site--state .v2-site-st-reason { border-radius: 20px; padding: 23px 24px 24px; }
  .v2-site--state .v2-site-st-reason h3 { font-size: 20px; line-height: 20px; margin: 16px 0 12px; }
  .v2-site--state .v2-site-st-reason p { font-size: 14.6px; line-height: 20px; }
  .v2-site--state #v2-site-st-local { padding-top: 51px; }
  .v2-site--state #v2-site-st-local > .v2-site-st-wrap { padding-inline: 24px; }
  .v2-site--state #v2-site-st-local .v2-site-st-head { margin-bottom: 53px; }
  .v2-site--state #v2-site-st-local .v2-site-st-h2 { font-size: 33px; line-height: 33px; }   /* 33 */
  .v2-site--state #v2-site-st-local .v2-site-st-head p { font-size: 16.5px; line-height: 27px; margin-top: 16px; }
  .v2-site--state .v2-site-st-offices { gap: 32px; }
  .v2-site--state .v2-site-st-office { border-radius: 28px; padding: 16px 24px 24px; }
  .v2-site--state .v2-site-st-office__map { aspect-ratio: auto; height: 240px; border-radius: 16px; }
  .v2-site--state .v2-site-st-office h3 { font-size: 33px; line-height: 33px; margin: 35px 0 28px; }   /* 33 */
  .v2-site--state .v2-site-st-olist { font-size: 15px; line-height: 20px; gap: 12px; }
  .v2-site--state .v2-site-st-olist img { margin-top: 0; }
  .v2-site--state .v2-site-st-octx { font-size: 14.4px; line-height: 20px; margin-top: 24px; }
  .v2-site--state .v2-site-st-octx h4 { font-size: 21px; line-height: 21px; margin-bottom: 6px; }
  .v2-site--state .v2-site-st-office__acts { flex-direction: column; gap: 12px; padding-top: 24px; }
  .v2-site--state .v2-site-st-office__acts .v2-site-btn { width: 100%; }

  .v2-site--state #v2-site-st-local:has(.v2-site-st-offices--one) .v2-site-st-h2 { font-size: 49px; line-height: 48.5px; letter-spacing: -.04em; }   /* 49 */
  .v2-site--state #v2-site-st-local:has(.v2-site-st-offices--one) .v2-site-st-head { margin-bottom: 36px; }
  .v2-site--state #v2-site-st-local:has(.v2-site-st-offices--one) .v2-site-st-head p { font-size: 17.9px; line-height: 30px; margin-top: 22px; }
  .v2-site--state .v2-site-st-offices--one .v2-site-st-office { padding: 24px 24px 28px; }
  .v2-site--state .v2-site-st-offices--one .v2-site-st-office h3 { font-size: 49px; line-height: 48.2px; margin: 31px 0 30px; }   /* 49 */
  .v2-site--state .v2-site-st-offices--one .v2-site-st-olist { font-size: 17.5px; line-height: 27px; gap: 20px; }
  .v2-site--state .v2-site-st-offices--one .v2-site-st-olist img { width: 36px; height: 36px; flex-basis: 36px; }

  .v2-site--state .v2-site-st-sec:has(> .v2-site-st-wrap > .v2-site-st-contact) { padding: 48px 0 56px; }
  .v2-site--state .v2-site-st-wrap:has(> .v2-site-st-contact) { padding-inline: 24px; }
  .v2-site--state .v2-site-st-contact { gap: 50px; }
  .v2-site--state .v2-site-st-contact .v2-site-st-h2 { font-size: 33px; line-height: 32px; text-align: center; }   /* 33 */
  .v2-site--state .v2-site-st-contact .v2-site-st-rule { margin: 20px 0 19px; }
  .v2-site--state .v2-site-st-ticks { gap: 12px; margin-bottom: 28px; font-size: 16px; line-height: 20px; }
  .v2-site--state .v2-site-st-ticks svg { width: 19px; height: 19px; flex-basis: 19px; transform: translateY(3px); }
  .v2-site--state .v2-site-st-ticks a { color: inherit; }
  .v2-site--state .v2-site-st-ctx h3 { font-size: 19.5px; line-height: 1; text-transform: none; margin: 0 0 14px; }
  .v2-site--state .v2-site-st-ctx p { font-size: 14.6px; line-height: 20.1px; }
  .v2-site--state .v2-site-st-frame { padding: 12px; border-radius: 28px; }
  .v2-site--state .v2-site-st-frame img { height: 301px; object-fit: cover; border-radius: 20px; }

  /* Illinois: the verify section. !important only where the template sets the value inline. */
  .v2-site--state .v2-site-st-sec:has(#v2-site-st-verify-title) { padding-bottom: 97px; }
  .v2-site--state .v2-site-st-sec:has(#v2-site-st-verify-title) > .v2-site-st-wrap { padding-inline: 24px; }
  .v2-site--state #v2-site-st-verify-title { font-size: 35px; line-height: 36px; }   /* 35 */
  .v2-site--state #v2-site-st-verify-title + .v2-site-st-split { margin-top: 40px !important; gap: 32px; }
  .v2-site--state #v2-site-st-verify-title + .v2-site-st-split .v2-site-st-body { font-size: 16.3px !important; line-height: 27px; }
  .v2-site--state #v2-site-st-verify-title + .v2-site-st-split .v2-site-st-body :where(p) { margin-bottom: 24px; }
  .v2-site--state .v2-site-st-note { margin-top: 0; padding: 19px 16px 17px 18px; font-size: 14.5px; line-height: 20px; }
  .v2-site--state #v2-site-st-verify-title + .v2-site-st-split .v2-site-st-photo { height: 439px; object-fit: cover; }

  /* Illinois: When a plan or carrier changes. */
  .v2-site--state .v2-site-st-sec:has(#v2-site-st-change-title) > .v2-site-st-wrap { padding-inline: 24px; }
  .v2-site--state #v2-site-st-change-title { font-size: 49px; line-height: 47.5px; }   /* 49 */
  .v2-site--state .v2-site-st-head:has(#v2-site-st-change-title) p { font-size: 18.3px !important; line-height: 30px; margin-top: 18px; }
  .v2-site--state .v2-site-st-caps { font-size: 32px; line-height: 32px; margin-top: 18px; }   /* 32 */
  .v2-site--state .v2-site-st-q2 { gap: 75px; margin-top: 36px; }
  .v2-site--state .v2-site-st-q2__card { padding: 8px; border-radius: 22px; }
  .v2-site--state .v2-site-st-q2__in { padding: 16px 16px 40px; border-radius: 16px; }
  .v2-site--state .v2-site-st-q2__in h3 { font-size: 24.5px; line-height: 24px; }
  .v2-site--state .v2-site-st-q2__in p { font-size: 20px; line-height: 30px; margin-top: 20px; }
  .v2-site--state .v2-site-st-q2__n { width: 50px; height: 50px; left: calc(50% - 25px); bottom: -25px; font-size: 15px; }
  .v2-site--state .v2-site-st-q2__after { margin-top: 42px; font-size: 18.3px; line-height: 30px; }
  .v2-site--state .v2-site-st-q2__after p { margin-bottom: 16px; }

  /* Medicaid split (Illinois, Kentucky, Virginia). */
  .v2-site--state .v2-site-st-sec:has(#v2-site-st-medicaid-title) > .v2-site-st-wrap { padding-inline: 24px; }
  .v2-site--state #v2-site-st-medicaid-title { font-size: 33px; line-height: 32px; margin-bottom: 20px !important; }   /* 33 */
  .v2-site--state .v2-site-st-body:has(> #v2-site-st-medicaid-title) { font-size: 14.5px; line-height: 20px; }
  .v2-site--state .v2-site-st-body:has(> #v2-site-st-medicaid-title) :where(p) { margin-bottom: 20px; }
  .v2-site--state .v2-site-st-split:has(#v2-site-st-medicaid-title) { gap: 26px; }
  .v2-site--state .v2-site-st-split:has(#v2-site-st-medicaid-title) .v2-site-st-photo { height: 210px; object-fit: cover; }

  /* Kentucky: the market section. */
  .v2-site--state .v2-site-st-sec:has(#v2-site-st-market-title) > .v2-site-st-wrap { padding-inline: 24px; }
  .v2-site--state #v2-site-st-market-title { font-size: 49px; line-height: 48.2px; }   /* 49 */
  .v2-site--state #v2-site-st-market-title + .v2-site-st-split { margin-top: 36px !important; gap: 24px; }
  .v2-site--state #v2-site-st-market-title + .v2-site-st-split .v2-site-st-body { font-size: 14.5px !important; line-height: 20px; }
  .v2-site--state #v2-site-st-market-title + .v2-site-st-split .v2-site-st-body :where(p) { margin-bottom: 24px; }
  .v2-site--state #v2-site-st-market-title + .v2-site-st-split .v2-site-st-note { padding: 24px 20px; font-size: 16.5px; line-height: 27px; }
  .v2-site--state #v2-site-st-market-title + .v2-site-st-split .v2-site-st-photo { height: 438px; object-fit: cover; }

  /* Pennsylvania: Path to Pennie. */
  .v2-site--state .v2-site-st-sec:has(#v2-site-st-path-title) > .v2-site-st-wrap { padding-inline: 24px; }
  .v2-site--state #v2-site-st-path-title { font-size: 33px; line-height: 32px; }   /* 33 */
  .v2-site--state #v2-site-st-path-title + .v2-site-st-split { margin-top: 36px !important; gap: 24px; }
  .v2-site--state #v2-site-st-path-title + .v2-site-st-split .v2-site-st-body { font-size: 14.5px !important; line-height: 20px; }
  .v2-site--state #v2-site-st-path-title + .v2-site-st-split .v2-site-st-body :where(p) { margin-bottom: 25px; }
  .v2-site--state #v2-site-st-path-title + .v2-site-st-split .v2-site-st-note { padding: 24px 20px; font-size: 16.5px; line-height: 27px; }
  .v2-site--state #v2-site-st-path-title + .v2-site-st-split .v2-site-st-photo { height: 438px; object-fit: cover; }

  /* Pennsylvania: PA CHIP. */
  .v2-site--state .v2-site-st-split:has(#v2-site-st-chip-title) { margin-top: 56px !important; gap: 28px; }
  .v2-site--state #v2-site-st-chip-title { font-size: 33px; line-height: 32px; margin-bottom: 26px !important; }   /* 33 */
  .v2-site--state .v2-site-st-body:has(> #v2-site-st-chip-title) { font-size: 14.5px; line-height: 20px; }
  .v2-site--state .v2-site-st-body:has(> #v2-site-st-chip-title) :where(p) { margin-bottom: 22px; }
  .v2-site--state .v2-site-st-split:has(#v2-site-st-chip-title) .v2-site-st-photo { height: 210px; object-fit: cover; }

  /* New Jersey: the coverage mandate. */
  .v2-site--state .v2-site-st-sec:has(#v2-site-st-mandate-title) > .v2-site-st-wrap { padding-inline: 24px; }
  .v2-site--state #v2-site-st-mandate-title { font-size: 33px; line-height: 32px; margin-bottom: 26px !important; }   /* 33 */
  .v2-site--state .v2-site-st-body:has(> #v2-site-st-mandate-title) { font-size: 14.5px; line-height: 20px; }
  .v2-site--state .v2-site-st-body:has(> #v2-site-st-mandate-title) :where(p) { margin-bottom: 22px; }
  .v2-site--state #v2-site-st-mandate-title + p { font-size: 16.5px !important; line-height: 27px; }
  .v2-site--state .v2-site-st-split:has(#v2-site-st-mandate-title) { gap: 2px; }
  .v2-site--state .v2-site-st-split:has(#v2-site-st-mandate-title) .v2-site-st-photo { height: 276px; object-fit: cover; }

  /* !important: the desktop size is inline. */
  .v2-site--state .v2-site-st-banner__body .v2-site-st-wrap > .v2-site-st-h3[style] { font-size: 33px !important; line-height: 32px !important; }
  .v2-site--state .v2-site-st-banner__body .v2-site-st-wrap > .v2-site-st-h3[style] br { display: none; }

  /* What to bring. */
  .v2-site--state .v2-site-st-sec--band { padding: 50px 0 48px; }
  .v2-site--state .v2-site-st-sec--band > .v2-site-st-wrap { padding-inline: 24px; }
  .v2-site--state .v2-site-st-sec--band .v2-site-st-split { gap: 45px; }
  .v2-site--state .v2-site-st-sec--band .v2-site-st-h2 { font-size: 33px; line-height: 33px; }   /* 33 */
  /* !important against the inline font-size/margin the macro sets for desktop. */
  .v2-site--state .v2-site-st-sec--band .v2-site-st-lede { font-size: 16.5px !important; line-height: 27px; margin-top: 20px !important; }
  .v2-site--state .v2-site-st-checks { gap: 16.3px; margin-top: 21px; }
  .v2-site--state .v2-site-st-checks li { font-size: 15.5px; font-weight: 700; line-height: 20px; align-items: center; }
  .v2-site--state .v2-site-st-checks svg { margin-top: 0; }
  .v2-site--state .v2-site-st-sec--band .v2-site-st-photo { height: 250px; object-fit: cover; border-radius: 24px; }

  /* How coverage works. */
  .v2-site--state .v2-site-st-cov { padding: 53px 0 20px; overflow: visible; }
  .v2-site--state .v2-site-st-cov > .v2-site-st-wrap { padding-inline: 24px; }
  .v2-site--state .v2-site-st-cov__fairy--l { display: block; width: 71px; left: 2px; top: 6px; }
  .v2-site--state .v2-site-st-cov .v2-site-st-head { margin-bottom: 40px; }
  .v2-site--state .v2-site-st-cov .v2-site-st-head--tight { margin-bottom: 51px; }
  .v2-site--state .v2-site-st-cov .v2-site-st-h2 { font-size: 33px; line-height: 32px; padding-left: 10px; }   /* 33 */
  .v2-site--state .v2-site-st-cov .v2-site-st-head p { font-size: 16.5px; line-height: 27px; margin-top: 12px; }
  .v2-site--state .v2-site-st-cov__grid { gap: 26px; }
  .v2-site--state .v2-site-st-enroll { position: relative; aspect-ratio: auto; border-radius: 20px; padding: 28px 16px 23px; }   /* 264 tall, every comp */
  /* z-index -1, behind the card; the wrap is the stacking context. */
  .v2-site--state .v2-site-st-enroll__fairy { display: block; position: absolute; z-index: -1; width: 82px; right: -6px; top: -72px; }
  .v2-site--state .v2-site-st-enroll__t { font-size: 33px; }                       /* 33 */
  .v2-site--state .v2-site-st-enroll__s { font-size: 24px; line-height: 24px; margin-top: 15px; max-width: 220px; }   /* 24 */
  .v2-site--state .v2-site-st-enroll__d { font-size: 49px; margin-top: 18px; }    /* 49 */
  .v2-site--state .v2-site-st-enroll__n { font-size: 14.5px; line-height: 20px; margin-top: 10px; }
  .v2-site--state .v2-site-st-cov .v2-site-st-body { font-size: 14.5px; line-height: 20px; }
  .v2-site--state .v2-site-st-cov .v2-site-st-body :where(p) { margin-bottom: 20px; }
  .v2-site--state .v2-site-st-cov .v2-site-st-blue-b { font-size: 16px; line-height: 20px; }

  /* Medicare: the table re-stacks as blocks. */
  .v2-site--state .v2-site-st-sec:has(> .v2-site-st-wrap > .v2-site-st-mhead) { padding-top: 44px; }
  .v2-site--state .v2-site-st-wrap:has(> .v2-site-st-mhead) { display: flex; flex-direction: column; padding-inline: 16px; }
  .v2-site--state .v2-site-st-mhead { display: contents; }
  .v2-site--state .v2-site-st-mhead > div { padding-inline: 2px; }
  .v2-site--state .v2-site-st-mhead .v2-site-st-h2 { font-size: 49px; line-height: 49px; }   /* 49 */
  .v2-site--state .v2-site-st-mhead .v2-site-st-lede { font-size: 18.5px; line-height: 30px; margin-top: 11px; }
  /* Not full width; min-width lets a longer label grow. */
  .v2-site--state .v2-site-st-mhead > .v2-site-btn { order: 10; align-self: center; width: auto; min-width: 233px; margin-top: 16px; }
  .v2-site--state-texas .v2-site-st-sec:has(> .v2-site-st-wrap > .v2-site-st-mhead) { padding-bottom: 0; }
  .v2-site--state .v2-site-st-tbl { margin-top: 13px; overflow: hidden; border-radius: 16px; }
  .v2-site--state .v2-site-st-tbl table { min-width: 0; }
  .v2-site--state .v2-site-st-tbl :is(table, thead, tbody, tr, th, td) { display: block; width: auto !important; }
  .v2-site--state .v2-site-st-tbl thead tr { background: var(--st-blue); padding: 9px 16px 8px; }
  .v2-site--state .v2-site-st-tbl th { padding: 0; font-size: 21px; line-height: 31px; }   /* 21 */
  .v2-site--state .v2-site-st-tbl tbody tr { padding: 15px 16px 18px; border-top: 1px solid var(--st-line); }
  .v2-site--state .v2-site-st-tbl td { padding: 0; border: 0; }
  .v2-site--state .v2-site-st-tbl td:first-child { font-size: 18.6px; line-height: 27px; }
  .v2-site--state .v2-site-st-tbl td:nth-child(2) { font-size: 17px; line-height: 27px; margin-top: 14px; }
  .v2-site--state .v2-site-st-tbl td:nth-child(3) { font-size: 16.5px; line-height: 24px; margin-top: 12px; }
  .v2-site--state .v2-site-st-mnote { margin-top: 28px; padding: 24px 16px 26px; border-radius: 16px; font-size: 16.5px; line-height: 27px; }
  .v2-site--state .v2-site-st-mnote > .v2-site-st-mnote__bulb { display: block; left: -2px; bottom: auto; top: 170px; width: 70px; height: 89px; }
  .v2-site--state .v2-site-st-mnote__two { margin-bottom: 26px; }
  .v2-site--state .v2-site-st-steps { gap: 24px; margin-bottom: 24px; }
  .v2-site--state .v2-site-st-step { align-items: flex-start; gap: 13px; }
  .v2-site--state .v2-site-st-step p { line-height: 27px; }
  .v2-site--state .v2-site-st-num { flex-basis: 46px; width: 46px; height: 46px; }
  .v2-site--state .v2-site-st-num span { width: 34px; height: 34px; font-size: 22px; padding-top: 2px; }
  .v2-site--state .v2-site-st-mnote__ship { font-size: 16.5px; line-height: 27px; }
  :is(.v2-site--state-florida, .v2-site--state-georgia) .v2-site-st-mnote__ship { font-size: 14.5px; line-height: 20px; }
  .v2-site--state .v2-site-st-info { margin-top: 17px; padding: 24px 16px; gap: 13px; border-radius: 16px; flex-direction: row; align-items: flex-start; font-size: 16.5px; line-height: 27px; }
  .v2-site--state .v2-site-st-info .v2-site-st-ico-i { width: 30px; height: 30px; flex-basis: 30px; }

  /* The Medicaid / financial-help banner. */
  .v2-site--state .v2-site-st-banner__head {
    background-image: url("../images/v2/site/state/banner-family-phone.webp");
    background-size: 100% auto; background-position: center bottom;
    padding: 58px 0 calc(100vw * 466 / 375 + 30px);
  }
  .v2-site--state .v2-site-st-banner .v2-site-st-wrap { padding-inline: 20px; }
  .v2-site--state .v2-site-st-banner__copy .v2-site-st-h2 { font-size: 49px; line-height: 48px; }   /* 49 */
  .v2-site--state .v2-site-st-banner__copy p { font-size: 18.5px; line-height: 30px; margin-top: 18px; }
  .v2-site--state .v2-site-st-banner__body { padding: 60px 0 24px; }
  .v2-site--state .v2-site-st-banner .v2-site-st-h3 { font-size: 33px; line-height: 32px; }   /* 33 */
  .v2-site--state .v2-site-st-banner__sub { font-size: 21px; line-height: 36px; margin-top: 12px; }
  .v2-site--state .v2-site-st-gcards { gap: 17px; margin-top: 27px; }
  .v2-site--state .v2-site-st-gcard { flex-direction: row; align-items: center; gap: 24px; padding: 24px; border-radius: 16px; font-size: 14.5px; line-height: 20px; }
  /* Per-state type size, as each comp draws it. */
  .v2-site--state-florida .v2-site-st-gcard { font-size: 16.5px; line-height: 27px; }
  .v2-site--state .v2-site-st-gcard small { font-size: 14.5px; line-height: 20px; }
  .v2-site--state .v2-site-st-callout { flex-direction: row; align-items: flex-start; gap: 20px; margin-top: 17px; padding: 24px 20px 24px 26px; border-radius: 16px; font-size: 18.5px; line-height: 30px; }
  .v2-site--state .v2-site-st-callout > .v2-site-st-ico-i { width: 44px; height: 44px; flex-basis: 44px; }
  .v2-site--state .v2-site-st-callout--bulb { flex-direction: column; gap: 18px; padding: 24px; font-size: 18.5px; line-height: 30px; }
  .v2-site--state .v2-site-st-callout--bulb h3 { font-size: 21px; line-height: 25px; margin: 0 0 12px; }
  .v2-site--state .v2-site-st-callout--bulb .v2-site-st-blue { font-size: 18.5px; }
  .v2-site--state .v2-site-st-ico-bulb { width: 50px; height: 55px; flex-basis: auto; }

  /* Understanding financial help. */
  .v2-site--state .v2-site-st-sec:has(.v2-site-st-split--photo-left) > .v2-site-st-wrap { padding-inline: 24px; }
  .v2-site--state .v2-site-st-sec:has(.v2-site-st-split--photo-left) .v2-site-st-h2 { font-size: 33px; line-height: 32.5px; }   /* 33 */
  /* !important against the macro's inline desktop font-size. */
  .v2-site--state .v2-site-st-sec:has(.v2-site-st-split--photo-left) .v2-site-st-head p { font-size: 16.5px !important; line-height: 27px; margin-top: 8px; }
  /* Photo first on phones (§42's 1023 rule moves it after the copy). */
  .v2-site--state .v2-site-st-split--photo-left { gap: 34px; }
  .v2-site--state .v2-site-st-split--photo-left > :first-child { order: 0; }
  .v2-site--state .v2-site-st-split--photo-left .v2-site-st-photo { height: 250px; object-fit: cover; border-radius: 24px; }
  .v2-site--state .v2-site-st-split--photo-left .v2-site-st-body { font-size: 14.5px; line-height: 20px; }
  .v2-site--state .v2-site-st-split--photo-left .v2-site-st-body :where(p) { margin-bottom: 24px; }
  /* Per-state type size, as drawn. */
  :is(.v2-site--state-georgia, .v2-site--state-illinois, .v2-site--state-new-jersey) .v2-site-st-split--photo-left .v2-site-st-body { font-size: 16.5px; line-height: 27px; }
  :is(.v2-site--state-georgia, .v2-site--state-illinois, .v2-site--state-new-jersey) .v2-site-st-split--photo-left .v2-site-st-body :where(p) { margin-bottom: 18px; }
  .v2-site--state .v2-site-st-foot { font-size: 16.3px; line-height: 32.5px; }

  /* Serving communities. */
  .v2-site--state .v2-site-st-sec:has(.v2-site-st-comm) > .v2-site-st-wrap { padding-inline: 24px; }
  .v2-site--state .v2-site-st-comm { gap: 24px; }
  .v2-site--state .v2-site-st-comm .v2-site-st-h2 { font-size: 33px; line-height: 32.3px; }   /* 33 */
  .v2-site--state .v2-site-st-comm .v2-site-st-body { font-size: 16.5px; line-height: 27px; margin-top: 12px; }
  .v2-site--state .v2-site-st-comm .v2-site-st-body :where(p) { margin-bottom: 23px; }
  /* Per-state type size, as drawn. */
  :is(.v2-site--state-kentucky, .v2-site--state-pennsylvania, .v2-site--state-virginia) .v2-site-st-comm .v2-site-st-body { font-size: 14.5px; line-height: 20px; }
  :is(.v2-site--state-kentucky, .v2-site--state-pennsylvania, .v2-site--state-virginia) .v2-site-st-comm .v2-site-st-body :where(p) { margin-bottom: 16px; }
  .v2-site--state .v2-site-st-pills { gap: 8px 5px; }
  .v2-site--state .v2-site-st-pills span { font-size: 15px; line-height: 20px; padding: 8px 15.5px; }
  .v2-site--state .v2-site-st-lic { margin-top: 32px; padding: 32px; border-radius: 24px; }
  .v2-site--state .v2-site-st-lic h3 { font-size: 21px; line-height: 21px; }
  .v2-site--state .v2-site-st-lic p { font-size: 14.5px; line-height: 20px; }

  /* FAQ. */
  .v2-site--state .v2-site-st-sec:has(.v2-site-st-faq) > .v2-site-st-wrap { padding-inline: 24px; }
  .v2-site--state .v2-site-st-sec:has(.v2-site-st-faq) .v2-site-st-h2 { font-size: 33px; line-height: 32px; }   /* 33 */
  .v2-site--state .v2-site-st-sec:has(.v2-site-st-faq) .v2-site-st-head p { font-size: 16.5px; line-height: 27px; margin-top: 6px; }
  .v2-site--state .v2-site-st-faq { padding: 32px 16px 0; }
  .v2-site--state .v2-site-st-faq .v2-site-q { margin-bottom: 13px; }
  .v2-site--state .v2-site-st-faq .v2-site-q > summary { font-size: 15.3px; line-height: 20px; padding: 14.5px 16px; }
  .v2-site--state-florida .v2-site-st-faq .v2-site-q > summary { padding-block: 8px; min-height: 56px; }
  .v2-site--state .v2-site-st-sec:has(.v2-site-st-faq) { padding-bottom: 0; }
  .v2-site--state .v2-site-st-faq .v2-site-q__a { font-size: 14.5px; line-height: 20px; }

  /* Talk to a Madrina: full bleed, art kept. */
  .v2-site--state .v2-site-st-cta-wrap { padding: 36px 0 45px; }
  .v2-site--state .v2-site-st-cta {
    grid-template-columns: minmax(0, 1fr); align-items: stretch; min-height: 0;
    border: 5px solid #3997d7; border-bottom: 0; border-radius: 28px;
    padding: 0 19px 24px;
  }
  .v2-site--state .v2-site-st-cta__stars { border-radius: 23px; }
  .v2-site--state .v2-site-st-cta__copy { justify-self: stretch; padding-top: 16px; }
  .v2-site--state .v2-site-st-cta__copy h2 { font-size: 49px; line-height: 49px; }   /* 49 */
  .v2-site--state .v2-site-st-cta__copy > p { font-size: 17.75px; line-height: 18px; letter-spacing: .07em; margin-top: 2px; }
  /* The extra class: `.v2-site-st-cta__copy > p` also matches the pill. */
  .v2-site--state .v2-site-st-cta__copy > .v2-site-st-cta__pill {
    display: block; margin: 38px 2px 0; padding: 0; border-radius: 16px 16px 0 0;
    height: 41px; line-height: 43px; font-size: 19px; letter-spacing: 0;
  }
  .v2-site--state .v2-site-st-cta__wand { display: block; bottom: 100%; width: 40px; height: 51px; }
  .v2-site--state .v2-site-st-cta__wand--l { left: 30px; }
  .v2-site--state .v2-site-st-cta__wand--r { right: 30px; }
  .v2-site--state .v2-site-st-cta__art { display: block; height: 115px; margin-inline: -19px; clip-path: inset(0 0 0 0); }
  .v2-site--state .v2-site-st-cta__halo { width: 194px; height: 194px; left: calc(50% - 101px); top: 1px; }
  .v2-site--state .v2-site-st-cta__bigwand { width: 87px; height: 131px; left: calc(50% - 98.5px); top: 7px; }
  .v2-site--state .v2-site-st-cta__fairy { width: 82px; left: calc(50% - 34px); top: 27px; }
  .v2-site--state .v2-site-st-cta__acts { flex-direction: column; align-items: stretch; gap: 15px; padding: 0; justify-content: flex-start; }
  .v2-site--state .v2-site-st-cta__acts .v2-site-btn { width: 100%; }

  /* Footer: §41's phone footer, scoped so Home is untouched. */
  .v2-site--state .v2-site-h2r-ft__tag { text-align: center; font-size: 17.4px; line-height: 27.6px; }
  .v2-site--state .v2-site-h2r-ft__habla { font-size: 50px; }
  .v2-site--state .v2-site-h2r-ft__tel { font-size: 18.3px; }
  .v2-site--state .v2-site-h2r-ft__h { font-size: 23.5px; line-height: 1; }
  .v2-site--state .v2-site-h2r-ft__list { font-size: 15.5px; line-height: 28px; gap: 0; }

  /* The rows become display: contents so the badge sits beside the phone without moving markup. */
  .v2-site--state .v2-site-st-foff { gap: 40px; margin-top: 40px; }
  .v2-site--state .v2-site-st-foff__card { border-radius: 20px; }
  .v2-site--state .v2-site-st-foff__map { aspect-ratio: auto; height: 211px; }
  .v2-site--state .v2-site-st-foff__body {
    display: grid; grid-template-columns: 17px minmax(0, 1fr) auto auto;
    column-gap: 8px; align-items: center; padding: 24px 24px 15px;
  }
  .v2-site--state .v2-site-st-foff__t,
  .v2-site--state .v2-site-st-foff__row { display: contents; }
  .v2-site--state .v2-site-st-foff__t > svg { grid-row: 1; grid-column: 1; width: 15px; height: 20px; }
  .v2-site--state .v2-site-st-foff__t h3 { grid-row: 1; grid-column: 2 / -1; margin: 0; font-size: 25px; line-height: 25px; letter-spacing: -.01em; }
  .v2-site--state .v2-site-st-foff__t a { grid-row: 3; padding-top: 18px; }
  .v2-site--state .v2-site-st-foff__t a:nth-of-type(1) { grid-column: 3; }
  .v2-site--state .v2-site-st-foff__t a:nth-of-type(2) { grid-column: 4; }
  .v2-site--state .v2-site-st-foff__addr {
    grid-row: 2; grid-column: 1 / -1; margin: 15px 0 0; padding-bottom: 14px;
    border-bottom: 1px solid var(--st-line); font-size: 14.6px; line-height: 20px;
  }
  .v2-site--state .v2-site-st-foff__row > div { line-height: 20px; }
  .v2-site--state .v2-site-st-foff__row > div:first-child { grid-row: 3; grid-column: 1 / 3; padding-top: 16px; }
  .v2-site--state .v2-site-st-foff__row > div + div { grid-row: 4; grid-column: 1 / -1; padding-top: 20px; }
  .v2-site--state .v2-site-st-foff__row h4 { font-size: 16.5px; line-height: 1; margin: 0 0 1.5px; }
  .v2-site--state .v2-site-st-foff__row a { display: block; font-size: 15px; line-height: 18px; }
  .v2-site--state .v2-site-st-foff__row p { font-size: 13.3px; line-height: 18px; margin-top: 5px; }
  /* Solid white for contrast. */
  .v2-site--state .v2-site-st-fbase { margin-top: 26px; padding-top: 26px; font-size: 12.8px; line-height: 18px; }
  .v2-site--state .v2-site-st-fbase p { margin-bottom: 18px; }
  .v2-site--state .v2-site-st-fbase p:last-child { font-size: 14.7px; line-height: 20px; margin-top: 22px; }
}

/* Below 375: the single-word display heads scale with vw from the artboard size. */
@media (max-width: 374px) {
  .v2-site--state .v2-site-st-offers .v2-site-st-h2,
  .v2-site--state .v2-site-st-big h3 { font-size: 10.67vw; line-height: 1; }                 /* 40 */
  .v2-site--state .v2-site-st-offers .v2-site-st-subhead,
  .v2-site--state .v2-site-st-why .v2-site-st-h2 { font-size: 12.8vw; line-height: 1; }        /* 48 */
  .v2-site--state #v2-site-st-local:has(.v2-site-st-offices--one) .v2-site-st-h2,
  .v2-site--state .v2-site-st-offices--one .v2-site-st-office h3,
  .v2-site--state #v2-site-st-change-title,
  .v2-site--state #v2-site-st-market-title,
  .v2-site--state .v2-site-st-enroll__d,
  .v2-site--state .v2-site-st-mhead .v2-site-st-h2,
  .v2-site--state .v2-site-st-banner__copy .v2-site-st-h2,
  .v2-site--state .v2-site-st-cta__copy h2 { font-size: 13.07vw; line-height: 1; }              /* 49 */
  .v2-site--state .v2-site-st-fairies svg:nth-of-type(3) { left: auto !important; right: 42px; }
  .v2-site--state .v2-site-st-fairies svg:nth-of-type(5) { left: auto !important; right: 2px; }
}
/* end 42 */

/* ==========================================================================
   43. Ad landing pages — /v2/<slug> (templates/lp/), the Medicaid four first
   ========================================================================== */
/* No comp: built from §42's palette and components. The palette is restated, because
   adding .v2-site--state would pull in every §42 rule. */
.v2-site--lp {
  --lp-navy: #003e6a;
  --lp-blue: #0078cd;
  --lp-cyan: #00b6ed;
  --lp-yellow: #ffeb00;
  --lp-pale: #f4f8fb;
  --lp-band: #dceff5;
  --lp-line: #d5e2ee;
  --lp-mute: #4a6b8f;
  --lp-edge-shadow: 0 3px 0 rgba(0, 62, 106, .09), 0 8px 24px rgba(0, 62, 106, .06);
  --lp-card-shadow: 0 2px 4px rgba(0, 62, 106, .05), 0 10px 30px rgba(0, 62, 106, .07);
}
body.v2-site--lp { color: var(--lp-navy); }

.v2-site-lp-wrap {
  width: 100%; max-width: calc(1320px + 2 * var(--gutter));
  margin-inline: auto; padding-inline: var(--gutter);
}
.v2-site-lp-sec { padding-block: clamp(56px, 5.2vw, 100px); position: relative; }
.v2-site-lp-sec--pale { background: var(--lp-pale); }
.v2-site-lp-sec--band { background: var(--lp-band); }

.v2-site-lp-h2 { text-align: center; font-size: clamp(30px, 2.9vw, 56px); color: var(--lp-navy); }
.v2-site-lp-h2 em, .v2-site-lp-formcard__h em { font-style: normal; color: var(--lp-blue); }
.v2-site-lp-head { text-align: center; max-width: 860px; margin: 0 auto clamp(32px, 3vw, 56px); }
.v2-site-lp-head p { margin: 14px auto 0; font-size: clamp(17px, 1.05vw, 20px); line-height: 1.5; }
.v2-site-lp-kicker {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; font-size: 15px; color: var(--lp-blue); margin: 0 0 12px !important;
}
.v2-site-lp-acts { display: flex; justify-content: center; margin-top: clamp(32px, 3vw, 48px); }

/* The tick: a yellow disc with a navy check. */
.v2-site-lp-tick { width: 26px; height: 26px; flex: 0 0 26px; }
.v2-site-lp-tick circle { fill: var(--lp-yellow); }
.v2-site-lp-tick path { fill: none; stroke: var(--lp-navy); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* An icon in a white disc — the §42 banner cards' glyph treatment. */
.v2-site-lp-disc {
  flex: 0 0 88px; width: 88px; height: 88px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; box-shadow: 0 5px 14px rgba(0, 62, 106, .16);
}
.v2-site-lp-disc img { width: 58px; height: 58px; }

/* ---- 01 · Header ------------------------------------------------------------------ */
/* Sticky, so the number stays on screen. */
.v2-site-lp-hdr {
  position: sticky; top: 0; z-index: 100;
  background: #fff; box-shadow: 0 1px 0 rgba(0, 62, 106, .08), 0 6px 18px rgba(0, 62, 106, .06);
}
.v2-site-lp-hdr__in { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.v2-site-lp-hdr__logo { flex: 0 0 auto; line-height: 0; }
.v2-site-lp-hdr__logo img { height: 56px; width: auto; }
.v2-site-lp-hdr__strip {
  list-style: none; margin: 0 0 0 auto; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  font-weight: 600; font-size: 16px; line-height: 1.3;
}
.v2-site-lp-hdr__strip li + li::before { content: "\00b7"; margin: 0 12px; color: var(--lp-blue); font-weight: 800; }
.v2-site-lp-hdr__strip a { color: var(--lp-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.v2-site-lp-hdr__call .v2-site-ico { width: 20px; height: 20px; }
/* Under the sticky bar, not behind it: the CTAs all jump to #lp-form. */
.v2-site--lp #lp-form, .v2-site--lp #lp-top { scroll-margin-top: 104px; }

/* ---- 02 + 03 · Hero with the top form --------------------------------------------- */
.v2-site-lp-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(0, 182, 237, .35), rgba(0, 182, 237, 0) 70%),
    linear-gradient(135deg, var(--lp-navy) 0%, var(--lp-blue) 78%);
  padding: clamp(44px, 4.6vw, 88px) 0 clamp(52px, 5vw, 96px);
}
.v2-site-lp-hero__stars { position: absolute; top: 0; width: 360px; height: 900px; opacity: .55; pointer-events: none; }
.v2-site-lp-hero__stars--l { left: 0; }
.v2-site-lp-hero__stars--r { right: 0; transform: scaleX(-1); }
.v2-site-lp-hero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(32px, 4vw, 80px); align-items: center;
}
.v2-site-lp-eyebrow {
  display: inline-block; margin: 0 0 22px !important;
  background: var(--lp-yellow); color: var(--lp-navy); border-radius: 999px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; font-size: 15px; line-height: 1.2; padding: 10px 18px 8px;
}
.v2-site-lp-hero__title { color: #fff; font-size: clamp(40px, 4vw, 76px); line-height: .98; }
.v2-site-lp-hero__title em { display: block; font-style: normal; color: var(--lp-yellow); margin-top: .12em; }
.v2-site-lp-hero__sub {
  margin: 22px 0 0 !important; max-width: 620px;
  font-size: clamp(18px, 1.25vw, 24px); line-height: 1.45; color: rgba(255, 255, 255, .94);
}
.v2-site-lp-hero__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 32px; }
.v2-site-lp-hero__call { margin: 0 !important; font-size: 17px; }
.v2-site-lp-hero__call a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.v2-site-lp-badges { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.v2-site-lp-badges li { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }

/* ---- 03 / 10 · Form card ------------------------------------------------------------ */
.v2-site-lp-formcard {
  background: #fff; color: var(--lp-navy); border-radius: 28px;
  padding: clamp(24px, 2.1vw, 40px); box-shadow: 0 24px 60px rgba(0, 30, 60, .28);
}
.v2-site-lp-formcard__h { font-size: clamp(24px, 1.7vw, 32px); color: var(--lp-navy); line-height: 1.05; }
.v2-site-lp-formcard__sub { margin: 10px 0 20px !important; font-size: 16px; line-height: 1.5; color: var(--lp-mute); }
.v2-site-lp-form { display: grid; gap: 12px; }
.v2-site-lp-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v2-site-lp-form__in {
  width: 100%; border: 1px solid var(--lp-line); background: var(--lp-pale);
  border-radius: 12px; padding: 15px 16px; min-height: 54px;
  font-family: var(--body); font-size: 16px; color: var(--lp-navy);
}
.v2-site-lp-form__in::placeholder { color: #7f98b1; }
.v2-site-lp-form__in:focus { outline: none; border-color: var(--lp-blue); background: #fff; box-shadow: 0 0 0 3px rgba(0, 120, 205, .15); }
.v2-site-lp-form__sel {
  -webkit-appearance: none; appearance: none; padding-right: 46px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 4l5 5 5-5' fill='none' stroke='%230078cd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 14px;
}
/* Placeholder grey while the value is "". */
.v2-site-lp-form__sel:invalid { color: #7f98b1; }
.v2-site-lp-form__sel option { color: var(--lp-navy); }
.v2-site-lp-form__agree {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.5; color: var(--lp-mute); margin: 4px 0;
}
.v2-site-lp-form__agree input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--lp-blue); }
/* --blue-dark for the consent links' contrast. */
.v2-site-lp-form__agree a { color: var(--blue-dark); font-weight: 600; text-decoration: underline; }
.v2-site-lp-form__submit { width: 100%; }

.v2-site-lp-formband .v2-site-lp-formcard { max-width: 760px; margin-inline: auto; box-shadow: var(--lp-card-shadow); }
.v2-site-lp-formband .v2-site-lp-formcard__h { text-align: center; }
.v2-site-lp-formband .v2-site-lp-formcard__sub { text-align: center; }

/* ---- 04 · Why trust us ----------------------------------------------------------------- */
.v2-site-lp-why {
  list-style: none; margin: clamp(32px, 3vw, 52px) auto 0; padding: 0; max-width: 1200px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px;
}
.v2-site-lp-why li {
  flex: 0 1 370px; display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 18px; box-shadow: var(--lp-edge-shadow);
  padding: 18px 22px; font-size: 18px; font-weight: 700; line-height: 1.35;
}

/* ---- 05 · Services ----------------------------------------------------------------------- */
/* 3 + 2: §35 forbids shrinking the key to fit five across. */
.v2-site-lp-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.v2-site-lp-card {
  flex: 0 1 calc((100% - 44px) / 3); max-width: 420px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border-radius: 22px; box-shadow: var(--lp-card-shadow);
  border: 1px solid #e3ebf2; padding: 30px 26px 26px;
}
.v2-site-lp-card h3 { font-size: clamp(21px, 1.4vw, 26px); color: var(--lp-navy); margin: 22px 0 10px; line-height: 1.08; }
.v2-site-lp-card p { font-size: 17px; line-height: 1.5; margin: 0 0 22px !important; flex: 1; }
.v2-site-lp-card__btn { width: 100%; }

/* ---- 06 · Benefits ----------------------------------------------------------------------- */
.v2-site-lp-ben { background: var(--lp-blue); color: #fff; overflow: hidden; }
.v2-site-lp-ben__stars { position: absolute; top: 0; height: 100%; width: 520px; opacity: .35; pointer-events: none; }
.v2-site-lp-ben__stars--l { left: 0; }
.v2-site-lp-ben__stars--r { right: 0; transform: scaleX(-1); }
.v2-site-lp-ben .v2-site-lp-wrap { position: relative; }
.v2-site-lp-ben .v2-site-lp-h2 { color: #fff; }
.v2-site-lp-ben .v2-site-lp-h2 em { color: var(--lp-yellow); }
.v2-site-lp-ben .v2-site-lp-head p { color: #fff; }
.v2-site-lp-bens { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.v2-site-lp-benitem {
  flex: 0 1 calc((100% - 40px) / 3); max-width: 430px;
  display: flex; align-items: center; gap: 18px;
  background: #fff; color: var(--lp-navy); border-radius: 20px; padding: 22px 24px;
  box-shadow: 0 3px 0 rgba(0, 40, 80, .25);
}
.v2-site-lp-benitem .v2-site-lp-disc { flex-basis: 76px; width: 76px; height: 76px; background: var(--lp-pale); box-shadow: none; }
.v2-site-lp-benitem .v2-site-lp-disc img { width: 50px; height: 50px; }
.v2-site-lp-benitem h3 { font-size: 20px; color: var(--lp-navy); margin: 0 0 6px; line-height: 1.1; }
.v2-site-lp-benitem p { font-size: 16px; line-height: 1.45; margin: 0 !important; }

/* ---- 07 · Gallery ------------------------------------------------------------------------- */
/* .is-contain holds a cut-out that `cover` would crop. */
.v2-site-lp-gal {
  display: grid; gap: 16px; margin-top: clamp(32px, 3vw, 52px);
  grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: repeat(2, clamp(200px, 16vw, 300px));
}
.v2-site-lp-gal figure { margin: 0; border-radius: 20px; overflow: hidden; background: var(--lp-pale); }
.v2-site-lp-gal figure:first-child { grid-row: span 2; }
.v2-site-lp-gal img { width: 100%; height: 100%; object-fit: cover; }
.v2-site-lp-gal figure.is-contain { display: grid; place-items: center; background: var(--lp-band); padding: 12px; }
.v2-site-lp-gal figure.is-contain img { object-fit: contain; }

/* ---- 08 · Reviews -------------------------------------------------------------------------- */
.v2-site-lp-stars { color: #fbbc05; font-size: 28px; letter-spacing: 4px; line-height: 1; margin: 0 0 12px !important; }
.v2-site-lp-revs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.v2-site-lp-revs .v2-site-rev { margin-top: 0; border-radius: 20px; box-shadow: var(--lp-edge-shadow); }
.v2-site-lp-revs .v2-site-rev blockquote { color: var(--lp-navy); font-size: 16px; }
.v2-site-lp-revlink { text-align: center; margin: clamp(28px, 2.6vw, 44px) 0 0 !important; }
.v2-site-lp-revlink a {
  display: inline-flex; align-items: center; gap: 8px; color: var(--lp-blue);
  font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 17px;
}
.v2-site-lp-revlink svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 09 · Final CTA ------------------------------------------------------------------------- */
.v2-site-lp-final-wrap { padding: clamp(72px, 5.6vw, 108px) 0 clamp(48px, 4.2vw, 80px); }
.v2-site-lp-final {
  position: relative; text-align: center; color: #fff;
  background: var(--lp-blue); border-radius: 32px; border-top: 4px solid #3f9ee3;
  padding: clamp(40px, 3.8vw, 72px) clamp(24px, 4vw, 80px);
}
.v2-site-lp-final__stars { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; pointer-events: none; }
/* Desktop only: on phones she would sit on the headline. */
.v2-site-lp-final__fairy { position: absolute; right: clamp(16px, 4vw, 90px); bottom: 0; width: clamp(170px, 14vw, 260px); max-width: none; pointer-events: none; }
.v2-site-lp-final__in { position: relative; max-width: 760px; margin-inline: auto; }
.v2-site-lp-final__logo { width: 190px; margin: 0 auto 22px; }
.v2-site-lp-final h2 { color: #fff; font-size: clamp(30px, 3vw, 56px); }
.v2-site-lp-final h2 em { display: block; font-style: normal; color: var(--lp-yellow); }
.v2-site-lp-final p { margin: 16px auto 28px !important; font-size: clamp(17px, 1.1vw, 20px); color: #fff; }
.v2-site-lp-final .v2-site-btn .v2-site-ico { width: 20px; height: 20px; }
.v2-site-lp-final p.v2-site-lp-final__under { margin: 18px auto 0 !important; font-size: 15px; opacity: .92; }

/* ---- 11 · Footer --------------------------------------------------------------------------- */
.v2-site-lp-ft { background: var(--lp-navy); color: #fff; text-align: center; padding: 52px 0 40px; }
.v2-site-lp-ft__logo { width: 200px; margin: 0 auto 26px; }
.v2-site-lp-ft p { margin: 0 auto 16px; max-width: 980px; }
.v2-site-lp-ft__lic { font-size: 15px; line-height: 1.5; }
.v2-site-lp-ft__lic b { color: var(--lp-yellow); font-weight: 700; }
.v2-site-lp-ft__copy { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.v2-site-lp-ft__links { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; }
.v2-site-lp-ft__links a { color: #fff; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.v2-site-lp-ft p.v2-site-lp-ft__credit { font-size: 13px; color: rgba(255, 255, 255, .7); margin: 22px auto 0; }

/* ---- Responsive ------------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .v2-site-lp-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
  .v2-site-lp-revs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-site-lp-benitem { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 1023px) {
  .v2-site-lp-hdr__strip { font-size: 14px; }
  .v2-site-lp-hero__in { grid-template-columns: minmax(0, 1fr); }
  .v2-site-lp-hero__copy { text-align: center; }
  .v2-site-lp-hero__sub { margin-inline: auto !important; }
  .v2-site-lp-hero__acts, .v2-site-lp-badges { justify-content: center; }
  .v2-site-lp-hero .v2-site-lp-formcard { max-width: 640px; width: 100%; justify-self: center; }
  .v2-site-lp-card { flex-basis: calc((100% - 22px) / 2); }
  .v2-site-lp-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .v2-site-lp-gal figure { aspect-ratio: 4 / 5; }
  .v2-site-lp-gal figure:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .v2-site-lp-gal figure.is-contain { aspect-ratio: auto; grid-column: 1 / -1; }
  /* Five photos in two columns leave one alone; the last takes the full row. */
  .v2-site-lp-gal figure:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .v2-site-lp-final__fairy { display: none; }
}
@media (max-width: 760px) {
  .v2-site-lp-hdr__in { flex-wrap: wrap; gap: 8px 12px; min-height: 0; padding-block: 10px 0; }
  .v2-site-lp-hdr__logo img { height: 42px; }
  .v2-site-lp-hdr__call { margin-left: auto; }
  /* width: auto beats §32's full-width phone buttons. */
  body.v2-site .v2-site-lp-hdr__call { width: auto; min-height: 46px; font-size: 16px; padding-inline: 18px; gap: 8px; }
  .v2-site-lp-hdr__strip {
    order: 3; flex: 1 0 100%; justify-content: center; margin: 0 calc(-1 * var(--gutter));
    padding: 7px var(--gutter); border-top: 1px solid #e3ebf2; font-size: 13px;
  }
  .v2-site-lp-hdr__strip li + li::before { margin: 0 8px; }
  .v2-site--lp #lp-form, .v2-site--lp #lp-top { scroll-margin-top: 112px; }
}
@media (max-width: 640px) {
  .v2-site-lp-hero__title { font-size: clamp(34px, 9.6vw, 44px); }
  .v2-site-lp-eyebrow { font-size: 13px; padding: 9px 14px 7px; }
  .v2-site-lp-hero__acts { flex-direction: column; align-items: stretch; }
  .v2-site-lp-hero__acts .v2-site-btn { width: 100%; }
  .v2-site-lp-badges { flex-direction: column; align-items: center; gap: 10px; }
  .v2-site-lp-formcard { border-radius: 22px; }
  .v2-site-lp-form__row { grid-template-columns: minmax(0, 1fr); }
  .v2-site-lp-why li { flex-basis: 100%; font-size: 17px; padding: 16px 18px; }
  .v2-site-lp-card { flex-basis: 100%; }
  .v2-site-lp-benitem { flex-basis: 100%; align-items: flex-start; padding: 20px; }
  .v2-site-lp-revs { grid-template-columns: minmax(0, 1fr); }
  .v2-site-lp-gal { gap: 10px; }
  .v2-site-lp-final { border-radius: 24px; padding-inline: 20px; }
  .v2-site-lp-final__stars { border-radius: 20px; }
  .v2-site-lp-final .v2-site-btn { width: 100%; }
  .v2-site-lp-final__logo { width: 150px; }
}
@media (max-width: 400px) {
  /* The key keeps the number and drops the word; the handset icon still says call. */
  .v2-site-lp-hdr__call-w { display: none; }
}
/* end 43 */

/* ----------------------------------------------------------------------------------
   44. Blog (.v2-blog-*) — /v2/blog/ (templates/blog/)
   The layout widths (1200 wrap, 260 sidebar, 40 gap, 55/45 banner) and --gutter feed the
   *_SIZES in blog/sanitize.py: change one, change both.
   ---------------------------------------------------------------------------------- */
.v2-blog-wrap { max-width: calc(1200px + 2 * var(--gutter)); }

/* --blue-dark for contrast (white text at AA). The 55/45 split is in FEATURED_IMG_SIZES. */
.v2-blog-banner {
  background: var(--blue-dark); color: #fff;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  padding-block: 40px 56px;
}
.v2-blog-banner__in {
  display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: 48px; align-items: center;
}
/* No featured image: the text takes the whole band. */
.v2-blog-banner__in:not(:has(.v2-blog-banner__img)) { grid-template-columns: minmax(0, 1fr); }
/* The site focus ring is invisible on this band. */
.v2-blog-banner :focus-visible { outline-color: #fff; }
.v2-blog-banner .v2-blog-post__t { color: #fff; }
.v2-blog-banner .v2-blog-trail ol,
.v2-blog-banner .v2-blog-trail li + li::before,
.v2-blog-banner .v2-blog-trail [aria-current],
.v2-blog-banner .v2-blog-byline,
.v2-blog-banner .v2-blog-byline b { color: #fff; }
.v2-blog-banner a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.v2-blog-cats { margin: 16px 0 0; font-size: 16.5px; }
.v2-blog-cats span { font-weight: 600; margin-right: 4px; }
/* Keeps its own ratio (no crop: imports have baked-in text); width/height attributes prevent CLS. */
.v2-blog-banner__img { margin: 0; }
.v2-blog-banner__img img {
  display: block; width: 100%; height: auto;
  border-radius: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

/* The 260 sidebar is part of the *_SIZES arithmetic in blog/sanitize.py. */
.v2-blog-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px; align-items: start; padding-block: 48px 72px;
}
.v2-blog-side__t { font-size: 22px; margin-bottom: 18px; }
.v2-blog-side__grid { display: grid; gap: 22px; }
.v2-blog-side .v2-blog-card__body { padding: 14px 16px 18px; gap: 6px; }
.v2-blog-side .v2-blog-card__t { font-size: 18px; }
.v2-blog-side .v2-blog-card__ex { font-size: 15.5px; line-height: 1.55; }

/* "Explore Our Insurance Plans" — WordPress's six links after every post, as tiles. */
.v2-blog-explore__t { margin-bottom: 24px; font-size: clamp(24px, 2.2vw, 34px); }   /* 34 */
.v2-blog-explore ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.v2-blog-explore a {
  display: block; height: 100%; padding: 16px 22px; background: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  font-family: var(--display); font-weight: 800; color: var(--blue-deep);
}
.v2-blog-explore a:hover { box-shadow: var(--shadow-lift); }

/* Breadcrumbs — post page and category band. */
.v2-blog-trail ol {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0;
  font-size: 15.5px; color: var(--ink-soft);
}
.v2-blog-trail li + li::before { content: "\203A"; margin: 0 8px; color: var(--ink-soft); }
.v2-blog-trail [aria-current] { color: var(--blue-deep); }
.v2-site-phead .v2-blog-trail { margin-bottom: 14px; }

/* The page's one h1. */
/* Mixed case, not the uppercase heading default (client decision). */
.v2-blog-post__t {
  margin-top: 16px; font-weight: 900; line-height: 1.12;
  font-size: clamp(30px, 2.6vw, 46px);                    /* 46 */
}
.v2-blog-post__t, .v2-blog-card__t { text-transform: none; }
.v2-blog-byline {
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 18px 0 0;
  font-size: 16.5px; color: var(--ink-soft);
}
.v2-blog-byline b { color: var(--blue-deep); font-weight: 600; }

/* Stored, sanitized HTML (blog/sanitize.py): style bare elements. */
.v2-blog-body { font-size: 18px; line-height: 1.75; color: var(--ink); overflow-wrap: break-word; }
.v2-blog-body p { margin: 0 0 1.1em; }
.v2-blog-body h2 { font-size: clamp(22px, 2.1vw, 30px); margin: 1.6em 0 .55em; }   /* 30 */
.v2-blog-body h3 { font-size: 19px; color: var(--blue-bright); margin: 1.4em 0 .5em; }
.v2-blog-body a { text-decoration: underline; text-underline-offset: 2px; }
.v2-blog-body ul,
.v2-blog-body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.v2-blog-body li { margin-bottom: .4em; }
.v2-blog-body li::marker { color: var(--blue-bright); }
.v2-blog-body blockquote {
  margin: 1.4em 0; padding: 14px 22px; border-left: 4px solid var(--blue-bright);
  background: var(--bg-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.v2-blog-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin-block: 1.2em; }

/* Body images: two allowlisted classes from the editor (admin.js, blog/sanitize.py).
   No class = full width. The widths must match IMG_SIZES in blog/sanitize.py. */
.v2-blog-body { display: flow-root; }
.v2-blog-body h2, .v2-blog-body h3 { clear: both; }
.v2-blog-body ul, .v2-blog-body ol, .v2-blog-body blockquote { display: flow-root; }
.v2-blog-body img.v2-blog-img--left { float: left; margin: .35em 24px 16px 0; }
.v2-blog-body img.v2-blog-img--right { float: right; margin: .35em 0 16px 24px; }
.v2-blog-body img.v2-blog-img--center { display: block; margin-inline: auto; }
.v2-blog-body img.v2-blog-img--sm { width: 33.333%; }
.v2-blog-body img.v2-blog-img--md { width: 50%; }
.v2-blog-body img.v2-blog-img--lg { width: 66.667%; }

/* The post's one CTA box. */
.v2-blog-cta {
  margin-block: 48px; padding: 36px 40px; text-align: center;
  background: var(--blue); color: #fff; border-radius: var(--radius-lg);
}
.v2-blog-cta h2 { color: #fff; font-size: clamp(24px, 2.2vw, 34px); }   /* 34 */
.v2-blog-cta p { margin: 12px auto 22px; max-width: 520px; color: rgba(255, 255, 255, .9); }

.v2-blog-author {
  display: flex; gap: 20px; align-items: flex-start;
  padding-top: 32px; border-top: 1px solid var(--line);
}
.v2-blog-author__img { width: 88px; height: 88px; flex: 0 0 88px; border-radius: 50%; object-fit: cover; }
.v2-blog-author__name {
  margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  color: var(--blue-deep); font-size: 18px;
}
.v2-blog-author__job { margin: 2px 0 0; color: var(--blue); font-size: 16.5px; font-weight: 500; }
.v2-blog-author__bio { margin: 10px 0 0; color: var(--ink-soft); font-size: 17px; }

/* Card grid — index and category pages. The card itself is also the post sidebar's. */
.v2-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.v2-blog-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card);
  overflow: hidden; transition: box-shadow .15s ease, transform .15s ease;
}
.v2-blog-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.v2-blog-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.v2-blog-card__link:hover { text-decoration: none; }
.v2-blog-card__link:hover .v2-blog-card__t { text-decoration: underline; }
/* Every thumbnail cropped to one ratio so a row of cards lines up whatever was uploaded. */
.v2-blog-card__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.v2-blog-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.v2-blog-card__cat {
  margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; font-size: 14.5px; color: var(--blue-bright);
}
.v2-blog-card__t { font-size: 20px; line-height: 1.15; }
.v2-blog-card__ex { margin: 0; color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; }
.v2-blog-card__date { margin: auto 0 0; padding-top: 4px; font-size: 15.5px; color: var(--ink-soft); }

.v2-blog-empty { text-align: center; font-size: 18px; color: var(--ink-soft); padding-block: 40px; }

/* The search and no-results states: topic links as the glossary's key chips, centred. */
.v2-blog-empty p { margin: 0 0 14px; }
/* Visitor text: break long tokens (body overflow-x is hidden). */
.v2-blog-q, .v2-blog-empty p { overflow-wrap: anywhere; }
.v2-blog-q-note { font-size: 16.5px; color: var(--ink-soft); }
.v2-blog-topics {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.v2-blog-topics a {
  display: inline-block; padding: 10px 18px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); background: #fff; color: var(--blue-deep);
  font-family: var(--display); font-weight: 800; font-size: 16.5px;
}
.v2-blog-topics a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
/* Same chips as the topic bar under every list page's search box (44px targets there). */
.v2-blog-topics--bar { margin: 22px 0 0; }
.v2-blog-topics--bar a { display: inline-flex; align-items: center; min-height: 44px; }
.v2-blog-topics a[aria-current] { background: var(--blue); border-color: var(--blue); color: #fff; }

/* The focus ring is on the form, not the input. 16px text, or iOS zooms on focus. */
.v2-blog-search {
  display: flex; align-items: center; max-width: 620px; margin: 28px auto 0;
  background: #fff; border: 2px solid var(--line); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
}
.v2-blog-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(15, 127, 212, .18); }
.v2-blog-search__in {
  flex: 1; min-width: 0; height: 52px; padding: 0 8px 0 24px;
  border: 0; background: transparent; border-radius: var(--radius-pill);
  font-family: var(--body); font-size: 17.5px; color: var(--ink);
}
.v2-blog-search__in:focus { outline: none; }
/* The only visible label, so it must pass AA (4.73:1). opacity: 1 for Firefox. */
.v2-blog-search__in::placeholder { color: #587695; opacity: 1; }
.v2-blog-search__btn {
  flex: 0 0 44px; width: 44px; height: 44px; margin-right: 4px; border: 0; cursor: pointer;
  border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center;
}
.v2-blog-search__btn:hover { background: var(--blue-deep); }
.v2-blog-search__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* 44px targets; wraps rather than scrolls. */
.v2-blog-pager {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; margin-top: 44px;
}
.v2-blog-pager__n,
.v2-blog-pager__step {
  min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 2px solid var(--line); background: #fff; color: var(--blue-deep);
  font-family: var(--display); font-weight: 800; font-size: 17.5px;
}
.v2-blog-pager__step { border-color: var(--blue); text-transform: uppercase; font-size: 16.5px; padding-inline: 20px; }
.v2-blog-pager__icon { width: .75em; height: .75em; flex: 0 0 auto; }
/* Cap-height trim so the capitals centre with the arrow. */
.v2-blog-pager__word, .v2-blog-pager__num { text-box: trim-both cap alphabetic; }
/* The numbers use __num, not __word: <=640px hides __word and the numbers must stay visible. */
.v2-blog-pager__icon--prev { transform: scaleX(-1); }
.v2-blog-pager a:hover { border-color: var(--blue); background: rgba(15, 127, 212, .08); text-decoration: none; }
.v2-blog-pager__n[aria-current] { background: var(--blue); border-color: var(--blue); color: #fff; }
.v2-blog-pager__gap { min-width: 20px; text-align: center; color: var(--ink-soft); }

@media (max-width: 1023px) {
  .v2-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  /* No room for a sidebar: it follows the body, two cards a row (WordPress's tablet). */
  .v2-blog-cols { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .v2-blog-side__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-blog-explore ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Stacks; FEATURED_IMG_SIZES switches to the full column at this width. */
@media (max-width: 767px) {
  .v2-blog-banner__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
  /* Every topic visible, as on desktop (user, 2026-10-18) - this was one
     swipeable row and three of the fourteen could be seen without a guess that
     it scrolled. Tighter chips keep the wrap off the first post. */
  .v2-blog-topics--bar { gap: 8px; }
  .v2-blog-topics--bar a {
    white-space: nowrap; padding: 10px 14px; font-size: 15px;
  }
  .v2-blog-banner { padding-block: 24px 36px; }
  .v2-blog-cols { padding-block: 32px 48px; }
  .v2-blog-side__grid, .v2-blog-explore ul { grid-template-columns: minmax(0, 1fr); }
  .v2-blog-body { font-size: 17px; }
  /* Full width on phones (IMG_SIZES' phone term assumes this). */
  .v2-blog-body img[class*="v2-blog-img--"] { float: none; display: block; width: 100%; margin: 1.2em 0; }
  .v2-blog-cta { margin-block: 36px; padding: 28px 22px; border-radius: var(--radius); }
  .v2-blog-author__img { width: 64px; height: 64px; flex-basis: 64px; }
  .v2-blog-grid { grid-template-columns: minmax(0, 1fr); }
  .v2-blog-search { max-width: none; margin-top: 22px; }
  /* Previous/Next shrink to arrows; the word is visually hidden, the aria-label kept. */
  .v2-blog-pager { gap: 6px; }
  .v2-blog-pager__step { padding-inline: 0; }
  .v2-blog-pager__icon { width: 18px; height: 18px; }
  .v2-blog-pager__word {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
/* end 44 */

/* ----------------------------------------------------------------------------------
   45. Spanish — /v2/es/ (same templates, i18n/es.json). Spanish runs ~20% longer, so
   these let it wrap where English fits. Scoped off the Medicaid LPs, which predate it.
   ---------------------------------------------------------------------------------- */
/* Floating language switcher, bottom right. <details>: works without JS. */
.v2-site-langfab {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 200;
  font-family: var(--display); font-weight: 800; font-size: 17.5px;
}
.v2-site-langfab summary {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 18px;
  border-radius: var(--radius-pill); cursor: pointer; list-style: none;
  background: var(--blue-deep); color: var(--yellow);
  box-shadow: 0 8px 24px rgba(11, 60, 116, .28);
}
.v2-site-langfab summary::-webkit-details-marker { display: none; }
.v2-site-langfab[open] summary { background: var(--yellow); color: var(--blue-deep); }
.v2-site-langfab summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.v2-site-langfab[open] summary:focus-visible { outline-color: var(--blue-deep); }
.v2-site-langfab__ico { width: 22px; height: 22px; fill: currentColor; }
.v2-site-langfab__chev {
  width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.v2-site-langfab[open] .v2-site-langfab__chev { transform: rotate(180deg); }
.v2-site-langfab a {
  position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 100%;
  display: flex; align-items: center; min-height: 48px; padding: 0 22px;
  border-radius: 16px; white-space: nowrap;
  background: var(--blue-deep); color: #fff; box-shadow: 0 8px 24px rgba(11, 60, 116, .28);
}
.v2-site-langfab a:hover { background: var(--blue-dark); text-decoration: none; }
.v2-site-langfab a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
@media (max-width: 640px) {
  .v2-site-langfab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); font-size: 15px; }
}
.v2-site-langfab summary { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
.v2-site-langfab__ico, .v2-site-langfab__chev { transition: transform .25s ease; }
.v2-site-langfab a { transition: background-color .15s ease; }
@media (hover: hover) {
  .v2-site-langfab summary:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(11, 60, 116, .36); }
  .v2-site-langfab summary:hover .v2-site-langfab__ico { transform: rotate(-12deg) scale(1.12); }
  .v2-site-langfab:not([open]) summary:hover .v2-site-langfab__chev { transform: translateY(2px); }
}
.v2-site-langfab[open] a { animation: v2-site-langfab-in .2s ease-out; }
@keyframes v2-site-langfab-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .v2-site-langfab summary, .v2-site-langfab__ico, .v2-site-langfab__chev, .v2-site-langfab a { transition: none; animation: none; }
  .v2-site-langfab summary:hover, .v2-site-langfab summary:hover .v2-site-langfab__ico { transform: none; }
}
@media print { .v2-site-langfab { display: none; } }

.v2-site:lang(es):not(.v2-site--lp) :where(h1, h2, h3) { overflow-wrap: break-word; }
/* The Spanish h1 outruns the home hero's nowrap between 641 and 1023. */
.v2-site:lang(es):not(.v2-site--lp) .v2-site-h2r-hero h1 { white-space: normal; }
/* One line on desktop: the lede needs 713px at the 22px the hero reaches past 1600.
   Gated at 1024 so it cannot outrank the 320px phone width below it. */
@media (min-width: 1024px) {
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-h2r-hero__lede { max-width: 760px; }
}
/* "Inscríbete rápido" needs 264px against step 3's comp width of 257, and the
   how-it-works headings are nowrap by design. Widening the card is the only
   change that keeps them on one line; the badge and numeral are placed apart. */
@media (min-width: 1024px) {
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-h2r-how__step--3 { --step-w: 300px; }
}
/* Balanced lines keep a short first line clear of the state pages' phone fairy. */
.v2-site:lang(es):not(.v2-site--lp) .v2-site-st-big h3 { text-wrap: balance; }
.v2-site:lang(es):not(.v2-site--lp) .v2-site-helpcard .v2-site-btn {
  white-space: normal; text-align: center; justify-content: center; max-width: 100%;
}
/* "Obtén mi cotización gratis" is 316px against the 280px the phone banner leaves. */
.v2-site:lang(es):not(.v2-site--lp) .v2-site-h2r-cta__btn {
  white-space: normal; text-align: center; justify-content: center; max-width: 100%;
}
/* The Spanish nav is ~20px longer; the 1280-1400 bar has no slack for it. */
@media (min-width: 1280px) and (max-width: 1400px) {
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-nav { gap: 9px; }
}
@media (min-width: 1280px) and (max-width: 1320px) {
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-nav { gap: 6px; }
}
/* The why-card fairy is placed for the English copy's length. */
@media (max-width: 1199px) {
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-h2r-why__title { max-width: 60%; }
}
@media (max-width: 640px) {
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-h2r-why__title { max-width: none; }
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-h2r-why__fairy { top: 236px; }
}
@media (max-width: 374px) {
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-h2r-why__fairy { top: 266px; }
}
@media (max-width: 1023px) {
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-gloss__intro { grid-template-columns: minmax(0, 1fr); }
}
.v2-site:lang(es):not(.v2-site--lp) .v2-site-form__submit {
  white-space: normal; text-align: center; justify-content: center; max-width: 100%;
}
@media (min-width: 1280px) and (max-width: 1499px) {
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-nav { gap: 6px; }
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-nav__link { font-size: 14.5px; }
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-hdr__cta { gap: 8px; }
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-hdr__pill { padding: 12px 11px; }
}
@media (min-width: 1280px) and (max-width: 1320px) {
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-hdr__in { gap: 6px; }
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-nav { gap: 5px; }
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-hdr__pill { padding: 12px 9px; }
}
@media (min-width: 1024px) {
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-pyf-cta__h2b {
    font-size: clamp(10px, 1.0417vw, 20px); letter-spacing: .03em;
  }
}
@media (min-width: 1024px) {
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-pyf-sav__band p {
    font-size: clamp(11px, 1.04vw, 17px);
  }
}
.v2-site:lang(es):not(.v2-site--lp) .v2-site-lic__table th { white-space: normal; }
@media (min-width: 1024px) {
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-stat__s { font-size: clamp(11px, 1.21vw, 18px); }
}
@media (max-width: 1023px) {
  .v2-site:lang(es):not(.v2-site--lp) .v2-site-stat__s { font-size: clamp(10px, 3.3vw, 15px); }
}
/* end 45 */

/* ----------------------------------------------------------------------------------
   46. Pop-up form (#v2-site-pop) — desktop [data-pop] buttons open it; phones dial instead
   ---------------------------------------------------------------------------------- */
.v2-site-pop {
  position: fixed; inset: 0; z-index: 250; display: grid; padding: 24px;
  overflow-y: auto; overscroll-behavior: contain; background: rgba(8, 37, 72, .6);
}
.v2-site-pop[hidden] { display: none; }
.v2-site-pop__box {
  position: relative; width: min(560px, 100%); margin: auto;
  animation: v2-site-pop-in .25s ease-out;
}
.v2-site-pop__slot .v2-site-form-card { margin: 0; }
.v2-site-pop__slot .v2-site-form-card h2 { padding-right: 48px; }
.v2-site-pop__x {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--bg-tint); color: var(--blue-deep); transition: background .15s, transform .15s;
}
.v2-site-pop__x:hover { background: #e2eefa; transform: rotate(90deg); }
.v2-site-pop__x svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round;
}
html.v2-site-pop-open { overflow: hidden; }
@keyframes v2-site-pop-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
/* end 46 */

/* ==========================================================================
   45. Obamacare (/obamacare) — the 2026 redesign
   ==========================================================================
   Figma 3747:4752 (1920 desktop) and 3747:10228 (375 phone).

   THE CANVAS, which explains most of this file. The comp does not lay this page
   out in the site's 1840 wrap. Every section sits in a 1480 content box (1920
   less its 220 gutters); the testimonials get 1780, the FAQ a 1640 header over
   a 1080 column, and the CTA band is 1872 inside a 24 gutter. Built inside
   --wrap-wide (1792 inner) each one came out 1.21x too large, which is what
   broke the H1 after the wrong word, spread the four topic cards, stretched the
   photo and moved the green panel off its percentages. Every canvas below is
   capped and centred and its children are shares of it, so the arrangement is
   the same at 1024, 1440 and 1920 and only the scale changes. Type is clamped
   from its value at 1024 to the comp's value at 1920 for the same reason.

   Two traps worth keeping in mind before editing any number here. Figma strokes
   are drawn INSIDE the box, CSS borders outside it, so a bordered box built on
   the comp's padding lands 2px over (the FAQ rows are 15px padding, not 16).
   And a comp's node style can be overridden character by character: the phone
   testimonial heading reads 36 at the node and 32 on every character of it.

   The phone block at the end is the 375 comp, which is a different design. */

/* --- Canvas, ink and section rhythm ------------------------------------- */
.v2-site--fhc .v2-site-sec { padding-block: 96px; }                     /* 96 */
/* The about band is flush with the section above it and carries its own top
   padding; the 96 below the topic cards stays on the section. */
.v2-site--fhc .v2-site-sec--tight { padding-block: 0 96px; }
.v2-site--fhc .v2-site-sec .v2-site-wrap--wide { max-width: 1528px; }   /* 1480 + 2x24 */
/* One ink colour for the whole page, inherited. The site's --ink (#10406f) and
   --blue-deep (#0b3c74) are both close to it and neither is it. */
.v2-site--fhc #v2-site-form,
.v2-site--fhc .v2-site-fhc-about,
.v2-site--fhc .v2-site-fhc-about .v2-site-h2,
.v2-site--fhc .v2-site-fhc-about__sub { color: #003e6b; }

/* --- Hero (5066:9727) --------------------------------------------------- */
/* The comp's hero frame is 576 INCLUDING the 120.6 header drawn over it, so the
   band below the header is 455.4, not the 426 the shared chero gets.
   The plate keeps the shared `cover` / `center top` of
   /individual-family-health-plans (client, 2026-10-17): pinning it to the
   bottom at `100% auto` registered the arc against the comp but showed the
   blue of the image's own top corners above it. `cover` crops the sides
   instead, which is the look the four 2026 pages now share.
   Do NOT re-export this plate from the hero frame: that node has the headline,
   the subtitle and the buttons in it, and they render under the live ones. */
.v2-site--fhc .v2-site-chero {
  min-height: clamp(380px, 23.72vw, 455px);                             /* 455.4 */
}
.v2-site--fhc .v2-site-chero__in { width: min(1040px, 100%); }          /* 992 + 2x24 */
.v2-site--fhc .v2-site-chero h1 {
  font-weight: 800; line-height: 1;
  font-size: clamp(32px, 3.125vw, 60px);                                /* 60/60 */
  letter-spacing: -2.56px;                                              /* absolute, not em */
}
.v2-site--fhc .v2-site-chero__sub {
  line-height: 1.5; letter-spacing: 0;
  font-size: clamp(13px, 1.25vw, 24px);                                 /* 24/36 */
}
.v2-site--fhc .v2-site-chero__actions { margin-top: clamp(22px, 2.135vw, 41px); }  /* 41 */
.v2-site--fhc .v2-site-chero__btn { font-weight: 700; font-size: 18px; }           /* 18 */
@media (min-width: 1024px) {
  /* The hard break belongs to the PHONE comp; the desktop string is unbroken and
     its 992 box wraps after "HEALTH". The shared rules balance both lines, which
     the comp does not: it wraps greedily, long line first. */
  .v2-site--fhc .v2-site-chero h1 br { display: none; }
  .v2-site.v2-site--fhc .v2-site-chero h1,
  .v2-site.v2-site--fhc .v2-site-chero__sub { max-width: 992px; text-wrap: wrap; }  /* 992 */
  /* The comp starts both fairies at y=119, 1.6 below the 120.6 header; the
     shared -31 pulls them up until the header clips the crown of the pink
     one's head. Desktop only — the phone block places them by `bottom`. */
  .v2-site--fhc .v2-site-chero__fairy { top: -1px; }                    /* 119 - 120.6 */
}

/* --- Get help enrolling (5049:2947) ------------------------------------- */
.v2-site--fhc #v2-site-form .v2-site-grid--split {
  grid-template-columns: minmax(0, 908fr) minmax(0, 500fr);             /* 908 / 500 */
  column-gap: 72px;                                                     /* 72 */
}
.v2-site--fhc .v2-site-fhc__copy .v2-site-h2 {
  letter-spacing: -.04em; line-height: 1;
  font-size: clamp(26px, 2.5vw, 48px);                                  /* 48/48 */
}
.v2-site--fhc .v2-site-fhc__copy .v2-site-rule {
  width: 80px; height: 6px; border-radius: 3px;                         /* 80x6 */
  background: #00b6ed; margin: 16px 0 32px;                             /* 32 */
}
.v2-site--fhc .v2-site-fhc__copy > p,
.v2-site--fhc .v2-site-fhc__lede-a {
  font-size: clamp(11px, 1.042vw, 20px); line-height: 1.5;              /* 20/30 */
}
.v2-site--fhc .v2-site-fhc__copy > p { margin-bottom: 32px; }           /* 32 */
/* The comp sets the two city pairs in blue, the word between them in the body
   ink (5049:2957 characterStyleOverrides). */
.v2-site--fhc .v2-site-fhc__copy > p strong { color: #003e6b; }
.v2-site--fhc .v2-site-fhc__copy > p strong.is-blue { color: #0078cd; }
/* The lede stops 126 short of the column in the comp; it does not fill it. */
.v2-site--fhc .v2-site-fhc__lede {
  display: grid; align-items: start; column-gap: 24px; margin-bottom: 16px;
  grid-template-columns: minmax(0, 342fr) minmax(0, 392fr);
  max-width: 86.12%;                                                    /* 782 of 908 */
}
.v2-site--fhc .v2-site-fhc__lede-a { margin: 0; }
/* The divider is a 55-tall line inside a 60-tall row, not a border on a
   full-height column. */
.v2-site--fhc .v2-site-fhc__lede-q {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1; position: relative;
  color: #003e6b; margin: 0; padding-right: 24px;
  font-size: clamp(16px, 1.5625vw, 30px);                               /* 30/30 */
  border-right: 0;
}
.v2-site--fhc .v2-site-fhc__lede-q::after {
  content: ""; position: absolute; right: 0; top: 2px;
  width: 1px; height: 55px;                                             /* 55 */
  background: rgba(77, 77, 77, .24);
}
.v2-site--fhc .v2-site-fhc__start {
  background: rgba(238, 248, 255, .96); border-radius: 32px; padding: 32px;  /* 32 */
}
.v2-site--fhc .v2-site-fhc__start-h {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  color: #0078cd; letter-spacing: -.04em; line-height: 1;
  font-size: clamp(16px, 1.5625vw, 30px);                               /* 30/30 */
  margin: 0 0 24px;
}
/* Two colours in one sentence, as the comp sets it (5049:2959). */
.v2-site--fhc .v2-site-fhc__start-h em { font-style: normal; color: #003e6b; }

/* THE THREE TICKS. The comp draws three different check glyphs and the shared
   macro emits one filled path that CSS cannot reshape, so the macro's <svg> is
   hidden and each context draws its own as a background. Editing the macro or
   the global .v2-site-checks rule would change every checklist on the /v2 site.
   Green scalloped seal (5049:2909) here and in the CTA band; white seal with a
   green tick (5076:5102) on the green panel; a stroked check everywhere else. */
.v2-site--fhc .v2-site-fhc__start .v2-site-checks li,
.v2-site--fhc .v2-site-fhc-cta__ticks li { align-items: center; }
.v2-site--fhc .v2-site-fhc__start .v2-site-checks svg { display: none; }
.v2-site--fhc .v2-site-fhc__start .v2-site-checks li::before,
.v2-site--fhc .v2-site-fhc-cta__ticks li::before {
  content: ""; flex: 0 0 24px; width: 24px; height: 24px;               /* 24 */
  background: url("data:image/svg+xml,%3Csvg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Ccircle cx=%2211.9994%22 cy=%2212.0009%22 r=%226.99993%22 fill=%22white%22/%3E %3Cpath d=%22M23.4166 10.5856L21.7798 8.94906C21.3913 8.56058 21.073 7.79288 21.073 7.24233V4.92785C21.073 3.82687 20.1735 2.92744 19.0728 2.92686H16.7574C16.2075 2.92686 15.4389 2.60793 15.0504 2.21974L13.4139 0.583204C12.6363 -0.194401 11.3631 -0.194401 10.5855 0.583204L8.94892 2.22091C8.56009 2.60939 7.79062 2.92744 7.24189 2.92744H4.92741C3.82789 2.92744 2.9273 3.82687 2.9273 4.92785V7.24239C2.9273 7.79077 2.60901 8.56088 2.22047 8.94912L0.583643 10.5857C-0.194548 11.3633 -0.194548 12.6365 0.583643 13.4153L2.22047 15.0518C2.60925 15.4403 2.9273 16.2101 2.9273 16.7586V19.0731C2.9273 20.1729 3.82789 21.0735 4.92741 21.0735H7.24195C7.79186 21.0735 8.56044 21.3918 8.94898 21.78L10.5855 23.4172C11.3631 24.1942 12.6363 24.1942 13.4139 23.4172L15.0505 21.78C15.4393 21.3916 16.2076 21.0735 16.7575 21.0735H19.0729C20.1736 21.0735 21.073 20.1729 21.073 19.0731V16.7586C21.073 16.2078 21.3916 15.4401 21.7798 15.0518L23.4167 13.4153C24.1936 12.6365 24.1936 11.3632 23.4166 10.5856ZM10.4121 16.5002L5.99934 12.0868L7.41357 10.6729L10.4124 13.6718L16.5856 7.50008L17.9995 8.91402L10.4121 16.5002Z%22 fill=%22%237CC242%22/%3E %3C/svg%3E") center / contain no-repeat;
  border-radius: 0;
}
.v2-site--fhc .v2-site-fhc__start .v2-site-checks { gap: 12px; }        /* 12 */
.v2-site--fhc .v2-site-fhc__start .v2-site-checks li {
  gap: 12px; font-weight: 600; line-height: 1.5;                        /* 12 */
  font-size: clamp(13px, 1.25vw, 24px);                                 /* 24/36 */
}

/* The form card (5049:2973). */
.v2-site--fhc .v2-site-form-card {
  padding: 32px;                                                        /* 32 */
  border: 1px solid rgba(0, 120, 205, .15);
  box-shadow: 0 8px 16px rgba(0, 62, 107, .05);
}
.v2-site--fhc .v2-site-form-card > h2 {
  letter-spacing: -.04em; line-height: 1;
  font-size: clamp(19px, 1.875vw, 36px);                                /* 36/36 */
}
/* The shared note is an uppercase display eyebrow; the comp sets it as body
   copy, which is why the template used to carry an inline style. */
.v2-site--fhc .v2-site-form-card__note {
  font-family: var(--body); font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: clamp(10px, .9375vw, 18px); line-height: 1.5;              /* 18/27 */
  color: #003e6b; margin: 8px 0 24px;                                   /* 8 / 24 */
}
.v2-site--fhc .v2-site-form__lbl { font-weight: 400; margin-bottom: 8px; }
.v2-site--fhc .v2-site-form__in {
  padding: 12px; border-radius: 8px; border: 0; background: #f4f7fa;    /* 12 / 8 */
}
.v2-site--fhc .v2-site-form__agree { gap: 12px; line-height: 1.25; }    /* 12 */
.v2-site--fhc .v2-site-form__submit {
  background: #ffeb00; margin-top: 24px;                                /* 24 */
  border: 1px solid #d9d9d9;                                            /* the comp's hairline */
}

/* --- What is Obamacare (5066:9831) -------------------------------------- */
/* The comp draws this as a 1920-wide rounded card, i.e. its border and corner
   radii land on the viewport edge where nobody can see them. It is a full-bleed
   band here, carrying the comp's top-fading tint and nothing else. */
.v2-site--fhc .v2-site-fhc-about {
  margin-inline: calc(50% - 50vw); width: 100vw;
  padding: 55px max(24px, calc(50vw - 740px)) 78px;                     /* 220 at 1920 */
  margin-bottom: 96px;                                                  /* 96 */
  border: 0; border-radius: 0;
  background: linear-gradient(180deg, #f4f7fa 0%, rgba(244, 247, 250, 0) 23.17%);
}
/* The comp's top row is 1630 wide against the photo's 1479: the benefits column
   deliberately overhangs the content box to the right, stopping 70 from the
   edge. The clamp hands that back as soon as the viewport cannot afford it. */
.v2-site--fhc .v2-site-fhc-about__top {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 740fr) minmax(0, 714fr);             /* 740 / 714 */
  column-gap: 10.798%;                                                  /* 176 of 1630 */
  margin-right: calc(-1 * clamp(0px, 50vw - 764px, 150px));             /* 1850 - 1700 */
}
/* The two columns are staggered by 9 in the comp, not top-aligned. */
.v2-site--fhc .v2-site-fhc-about__top > div:first-child { padding-top: 9px; }  /* 64 - 55 */
.v2-site--fhc .v2-site-fhc-about .v2-site-h2 {
  letter-spacing: -.04em; line-height: 1;
  font-size: clamp(19px, 1.875vw, 36px);                                /* 36/36 */
}
.v2-site--fhc .v2-site-fhc-about .v2-site-rule {
  width: 60px; background: #00b6ed; margin: 8px 0 13px;                 /* 60x4, 8, 13 */
}
/* :first-child, not > div > p: the benefits sub-heading is also a direct child
   p of a column, and this rule out-specifies .v2-site-fhc-about__sub. */
.v2-site--fhc .v2-site-fhc-about__top > div:first-child > p {
  font-size: clamp(11px, 1.042vw, 20px); line-height: 1.5;              /* 20/30 */
  max-width: 730px;                                                     /* 730 */
}
.v2-site--fhc .v2-site-fhc-about__many {
  padding: 32px; margin-top: 16px; border-radius: 24px;                 /* 32 / 16 / 24 */
  background: rgba(238, 248, 255, .965);
}
.v2-site--fhc .v2-site-fhc-about__many p:last-child { margin: 0; }
.v2-site--fhc .v2-site-fhc-about__sub {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1; margin: 0 0 8px;              /* 8 */
  font-size: clamp(13px, 1.25vw, 24px);                                 /* 24/24 */
}
.v2-site--fhc .v2-site-fhc-about__benefits .v2-site-fhc-about__sub { margin-bottom: 21px; }  /* 21 */
.v2-site--fhc .v2-site-fhc-about__benefits .v2-site-checks { gap: 0; }
.v2-site--fhc .v2-site-fhc-about__benefits .v2-site-checks li {
  align-items: center; gap: 12px; font-weight: 700;                     /* 12 */
  font-size: clamp(13px, 1.25vw, 24px); line-height: 1.5;               /* 24/36 */
}
/* The benefits and topic-card tick: a 2px stroked check whose ink is 10.7x7.3
   inside a 24 slot — the comp's CheckIcon frame is empty, the glyph is its
   16x16 child, so sizing the macro's filled path to 24 would draw it 2x. */
.v2-site--fhc .v2-site-fhc-about__benefits .v2-site-checks svg,
.v2-site--fhc .v2-site-topic .v2-site-checks svg { display: none; }
.v2-site--fhc .v2-site-fhc-about__benefits .v2-site-checks li::before,
.v2-site--fhc .v2-site-topic .v2-site-checks li::before {
  content: ""; flex: 0 0 24px; width: 24px; height: 24px;               /* 24 */
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230078cd%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6.67 12.6 10.3 16.2 17.33 7.8%22/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The green panel (5076:5060): still a share of the photo, which is back to the
   comp's 1479 now that the band's content box is 1480. */
.v2-site--fhc .v2-site-fhc-about__who {
  color: #fff; border-radius: 32px;                                     /* 32 */
  border: 7px solid transparent;                                        /* 7 */
  /* The comp's star field (5076:5126) is the panel's LAST child, i.e. drawn
     over the copy — white stars across white text. It goes behind it here. */
  background:
    url("../images/v2/site/find-health-coverage/who-stars.webp") no-repeat right bottom / cover padding-box,
    linear-gradient(#7cc242, #7cc242) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, .099), rgba(255, 255, 255, .66)) border-box;
  box-shadow: 0 5px 5px -2.5px rgba(10, 13, 18, .04),
              0 32px 64px -12px rgba(10, 13, 18, .14);
  padding: clamp(14px, 1.667vw, 32px) clamp(18px, 2.292vw, 44px)
           clamp(12px, 1.51vw, 29px) clamp(15px, 1.927vw, 37px);        /* 39/51/36/44 incl. border */
}
.v2-site--fhc .v2-site-fhc-about__who h3 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1; color: #fff;
  font-size: clamp(19px, 1.875vw, 36px);                                /* 36/36 */
  margin: 0 0 clamp(6px, .73vw, 14px);                                  /* 14 */
}
.v2-site--fhc .v2-site-fhc-about__who-lead {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .23em; line-height: 1;
  margin: 0 0 clamp(18px, 2.344vw, 45px);                               /* 45 */
  font-size: clamp(10px, 1.042vw, 20px);                                /* 20/20 */
}
.v2-site--fhc .v2-site-fhc-about__who .v2-site-checks {
  gap: clamp(6px, .625vw, 12px); margin-bottom: clamp(16px, 2.083vw, 40px);  /* 12 / 40 */
}
.v2-site--fhc .v2-site-fhc-about__who .v2-site-checks li {
  align-items: center; gap: clamp(6px, .625vw, 12px); line-height: 1.5; /* 12 */
  color: #fff; font-weight: 600;
  font-size: clamp(10px, 1.042vw, 20px);                                /* 20/30 */
}
/* White seal with a green tick in here (5076:5102), against the green panel. */
.v2-site--fhc .v2-site-fhc-about__who .v2-site-checks svg { display: none; }
.v2-site--fhc .v2-site-fhc-about__who .v2-site-checks li::before {
  content: ""; flex: 0 0 auto;
  width: clamp(12px, 1.25vw, 24px); height: clamp(12px, 1.25vw, 24px);  /* 24 */
  background: url("data:image/svg+xml,%3Csvg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cg clip-path=%22url(%23clip0_5076_5102)%22%3E %3Ccircle cx=%2212%22 cy=%2212%22 r=%227%22 fill=%22%237CC242%22/%3E %3Cpath d=%22M23.4168 10.5857L21.78 8.94915C21.3915 8.56067 21.0732 7.79296 21.0732 7.2424V4.9279C21.0732 3.82691 20.1737 2.92747 19.073 2.92689H16.7576C16.2077 2.92689 15.4391 2.60796 15.0506 2.21976L13.414 0.58321C12.6364 -0.194403 11.3632 -0.194403 10.5856 0.58321L8.94901 2.22094C8.56017 2.60942 7.7907 2.92747 7.24196 2.92747H4.92746C3.82793 2.92747 2.92733 3.82691 2.92733 4.9279V7.24246C2.92733 7.79085 2.60904 8.56096 2.2205 8.94921L0.583649 10.5858C-0.19455 11.3634 -0.19455 12.6366 0.583649 13.4154L2.2205 15.052C2.60927 15.4405 2.92733 16.2103 2.92733 16.7587V19.0733C2.92733 20.1731 3.82793 21.0737 4.92746 21.0737H7.24202C7.79193 21.0737 8.56052 21.392 8.94907 21.7803L10.5856 23.4174C11.3632 24.1944 12.6364 24.1944 13.4141 23.4174L15.0506 21.7803C15.4394 21.3918 16.2077 21.0737 16.7577 21.0737H19.0731C20.1738 21.0737 21.0732 20.1731 21.0732 19.0733V16.7587C21.0732 16.2079 21.3918 15.4402 21.7801 15.052L23.4169 13.4154C24.1939 12.6366 24.1939 11.3633 23.4168 10.5857ZM10.4122 16.5003L5.9994 12.087L7.41365 10.673L10.4125 13.6719L16.5857 7.50016L17.9996 8.91411L10.4122 16.5003Z%22 fill=%22white%22/%3E %3C/g%3E %3Cdefs%3E %3CclipPath id=%22clip0_5076_5102%22%3E %3Crect width=%2224%22 height=%2224%22 fill=%22white%22/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E") center / contain no-repeat;
}
.v2-site--fhc .v2-site-fhc-about__who-note {
  font-size: clamp(10px, .9375vw, 18px); line-height: 1.5;              /* 18/27 */
  border-left: 2px solid #fff;
  max-width: 310px; margin: 0 0 0 13px; padding-left: 11px;             /* 310 / 11 */
}
/* The comp's rhythm inside the panel is 14 / 45 / 40, set on the blocks above,
   not space-between's even spread. */
@media (min-width: 1024px) {
  .v2-site--fhc .v2-site-fhc-about__who { display: block; }
  .v2-site--fhc .v2-site-fhc-about__who-note { font-weight: 500; }      /* Futura Medium 450 */
}

/* The photo and the carrier row keep their percentages of the photo — all of
   them matched the comp already; only the photo's own width was wrong. */
.v2-site--fhc .v2-site-fhc-about__media { margin-top: 46px; }           /* 1848 - 1802 */
.v2-site--fhc .v2-site-fhc-about__shot { position: relative; }
.v2-site--fhc .v2-site-fhc-about__photo {
  display: block; width: 100%; height: auto; border-radius: 35px;       /* 35 */
}
@media (min-width: 1024px) {
  /* min-height is a % of the photo, so top 22.8 + 93.5 puts the panel's bottom
     edge at 116.3% of it: the comp's overhang, at every width. */
  .v2-site--fhc .v2-site-fhc-about__who {
    position: absolute; left: 61.5%; right: 4.9%; top: 22.8%;           /* 1130 / 73 / 489 */
    width: auto; min-height: 93.5%;                                     /* 476 of 509 */
  }
}
.v2-site--fhc .v2-site-fhc-about__carriers {
  list-style: none; margin: 27px 0 0; padding: 0;                       /* 909 - 882 */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 20px clamp(18px, 2.1vw, 40px); max-width: 59%;                   /* 866 of 1479 */
}
.v2-site--fhc .v2-site-fhc-about__carriers img {
  height: clamp(26px, 2.1vw, 40px); width: auto; display: block;
}
.v2-site--fhc .v2-site-fhc-about__carriers--sm img { height: clamp(18px, 1.4vw, 27px); }

/* --- The four topic cards (3747:4923) ----------------------------------- */
.v2-site--fhc .v2-site-grid--2 { gap: 32px; }                           /* 32 */
.v2-site--fhc .v2-site-topic {
  padding: clamp(24px, 3.333vw, 64px);                                  /* 64 */
  background: #f4f7fa; border: 1px solid rgba(0, 120, 205, .15);
  border-radius: 32px; gap: 24px;                                       /* 32 / 24 */
}
.v2-site--fhc .v2-site-topic > div { margin-bottom: 8px; }
.v2-site--fhc .v2-site-topic h3 {
  color: #003e6b; letter-spacing: -.04em; line-height: 1;
  font-size: clamp(19px, 1.875vw, 36px);                                /* 36/36 */
}
.v2-site--fhc .v2-site-topic__rule {
  width: 60px; background: #00b6ed; margin: 8px 0 0;                    /* 60x4, 8 */
}
.v2-site--fhc .v2-site-topic p {
  color: #003e6b;
  font-size: clamp(11px, 1.042vw, 20px); line-height: 1.5;              /* 20/30 */
}
.v2-site--fhc .v2-site-topic .v2-site-checks { gap: 12px; }             /* 12 */
.v2-site--fhc .v2-site-topic .v2-site-checks li {
  align-items: center; gap: 12px; color: #003e6b;                       /* 12 */
  font-size: clamp(13px, 1.25vw, 24px); line-height: 1.5;               /* 24/36 */
}
/* Size and weight from the comp; NOT its colour — #0078cd on #f4f7fa is 4.28:1
   and fails AA at this size. The element is in the selector so it beats the
   `.v2-site-topic p` rule above, which is otherwise equally specific. */
.v2-site--fhc p.v2-site-topic__note {
  font-weight: 400;
  font-size: clamp(10px, .9375vw, 18px); line-height: 1.5;              /* 18/27 */
}

/* --- Testimonials (5066:9272) ------------------------------------------- */
/* The comp draws the home page's marquee wall — the same component, from the
   same design — so the page uses it rather than re-deriving a pill, a star run
   and two scrolling rows. Its cards hug their quotes instead of taking the
   comp's fixed 294: those are sized to a 4-line placeholder, the real Google
   reviews run longer, and a verbatim review may not be clamped. */
.v2-site--fhc .v2-site-h2r-revs { background: #f4f7fa; padding-block: 96px; }   /* 96 */
.v2-site--fhc .v2-site-h2r-revs__head { max-width: 1780px; margin-bottom: 56px; }  /* 1780 / 56 */
.v2-site--fhc .v2-site-h2r-revs__title {
  color: #003e6b; letter-spacing: -.04em; line-height: 1;
  font-size: clamp(26px, 2.5vw, 48px);                                  /* 48/48 */
}
.v2-site--fhc .v2-site-h2r-revs__sub {
  margin-top: 8px;                                                      /* 8 */
  font-size: clamp(11px, 1.042vw, 20px); line-height: 1.5;              /* 20/30 */
}
.v2-site--fhc .v2-site-h2r-revs__card { box-shadow: 0 16px 32px rgba(0, 62, 107, .05); }

/* --- FAQ (3747:5219) ---------------------------------------------------- */
/* Its canvas is a 1640 header over a 1080 column, not the 1480 the rest of the
   page uses — and the shared wrap caps at 1520, so the wrap moves too. */
.v2-site--fhc .v2-site-sec > .v2-site-wrap:not(.v2-site-wrap--wide) { max-width: 1688px; }  /* 1640 + 2x24 */
.v2-site--fhc .v2-site-head { max-width: 1640px; margin-bottom: 56px; }  /* 1640 / 56 */
.v2-site--fhc .v2-site-head p {
  margin-top: 8px; max-width: 680px; margin-inline: auto;               /* 8 / 680 */
  font-size: clamp(11px, 1.042vw, 20px); line-height: 1.5;              /* 20/30 */
}
.v2-site--fhc .v2-site-h2 {
  letter-spacing: -.04em; line-height: 1;
  font-size: clamp(26px, 2.5vw, 48px);                                  /* 48/48 */
}
/* 30/15 rather than the comp's 32/16: its 2px top stroke is drawn inside the
   box, a CSS border is not. Same reason for the rows' 15. */
.v2-site--fhc .v2-site-acc {
  max-width: 1080px; margin-inline: auto;                               /* 1080 */
  padding: 30px 15px 0;                                                 /* 32 / 16 incl. stroke */
  border-top: 2px solid #0078cd; border-radius: 32px 32px 0 0;          /* 2 / 32 */
  display: flex; flex-direction: column; gap: 12px;                     /* 12 */
}
/* The shared row margin would otherwise hang 12px below the last row, which the
   comp's column does not have. */
.v2-site--fhc .v2-site-q {
  border-radius: 12px; border-color: rgba(0, 120, 205, .15);            /* 12 */
  box-shadow: none; margin-bottom: 0;
}
.v2-site--fhc .v2-site-q > summary {
  padding: 15px; gap: 12px;                                             /* 16 / 12 incl. border */
  font-size: clamp(10px, .9375vw, 18px); line-height: 1.5;              /* 18/27 */
}
.v2-site--fhc .v2-site-q > summary svg {
  width: 16px; height: 16px; flex: 0 0 16px;                            /* 16 */
  stroke: #0078cd; stroke-width: 2;
}

/* --- CTA band (5076:8191) ----------------------------------------------- */
/* The band is 1872 wide inside the comp's 24 gutter, which is wider than the
   1792 the shared wrap gives it. The width/margin pair re-centres it on the
   viewport and can never overflow a narrower one, which a flat negative margin
   would (the wrap is already full-bleed at 1440). */
.v2-site--ctaslim .v2-site-cta {
  width: min(1872px, 100vw - 48px);                                     /* 1872 */
  margin: 28px calc((100% - min(1872px, 100vw - 48px)) / 2);            /* 28 */
}
/* The comp's two soft discs (Ellipse 67/68) are concentric at (999,101) of the
   band, r=101 and r=158, white at 6% — a glow behind the fairy. */
.v2-site--ctaslim .v2-site-cta__bar {
  border-radius: 32px; background-color: #0078cd;                       /* 32 */
  /* The comp's text frames here are leading-trimmed — "Get Covered Today" is a
     43-tall box for 64px type — so its 29/16/16/25 are CAP-to-cap. Measured in
     the live face the 64px ascent is also 43, so each value is the comp's less
     the half-leading: 29-10, 16-12.5, 16-5.5, 25-3. Pasting the comp's own
     numbers onto full line boxes made the band 200 against its 172. */
  padding: 19px 3.2% 25px 3.9%;                                         /* 29 / 25 cap, 73 / 60 */
  position: relative; overflow: hidden; flex-wrap: nowrap;
  background-image:
    radial-gradient(circle 5.26vw at 53.37% 58.7%, rgba(255, 255, 255, .06) 100%, transparent 0),
    radial-gradient(circle 8.23vw at 53.37% 58.7%, rgba(255, 255, 255, .06) 100%, transparent 0),
    url("../images/v2/site/shared/cta-band-bg.webp");
  background-repeat: no-repeat; background-position: center;
  background-size: auto, auto, cover;
}
/* The comp's 5px rim, white fading to nothing at 51%, drawn INSIDE the
   1872x172 — a masked ring rather than a border, so the band keeps its size.
   It goes on the wrapper because the bar's two pseudo-elements are the star and
   the fairy. */
.v2-site--ctaslim .v2-site-cta::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: 32px; padding: 5px;                                    /* 5, INSIDE */
  background: linear-gradient(180deg, rgba(255, 255, 255, .51), rgba(255, 255, 255, 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.v2-site--ctaslim .v2-site-cta__copy,
.v2-site--ctaslim .v2-site-cta .v2-site-actions { position: relative; z-index: 2; }
.v2-site--ctaslim .v2-site-cta h2 {
  letter-spacing: -.04em; line-height: 1;
  font-size: clamp(34px, 3.333vw, 64px);                                /* 64/64 */
}
.v2-site--ctaslim .v2-site-cta p {
  font-family: var(--display); font-weight: 600; color: #fff;
  text-transform: uppercase; letter-spacing: .08em; line-height: 1;
  font-size: clamp(11px, 1.042vw, 20px);                                /* 20/20 */
  margin-top: 3.5px; max-width: none;                                   /* 16 cap */
}
.v2-site--fhc .v2-site-fhc-cta__ticks {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap;
  font-family: var(--display); font-weight: 600;
  margin: 10.5px 0 0; gap: 8px 12px;                                    /* 16 cap / 12 */
  font-size: clamp(11px, 1.042vw, 20px); line-height: 1.5;              /* 20/30 */
}
.v2-site--fhc .v2-site-fhc-cta__ticks li { display: flex; gap: 12px; }  /* 12 */
.v2-site--ctaslim .v2-site-cta__copy { flex: 1 1 auto; }
.v2-site--ctaslim .v2-site-cta .v2-site-actions {
  flex: 0 0 auto; flex-direction: row; align-items: center; gap: 16px;  /* 16 */
}
/* The comp's yellow pill carries a bare 20px glyph, not the shared blue disc. */
.v2-site--ctaslim .v2-site-cta .v2-site-btn { color: #003e6b; }
.v2-site--ctaslim .v2-site-cta .v2-site-btn--yellow { background: #ffeb00; gap: 8px; }  /* 8 */
.v2-site--ctaslim .v2-site-cta .v2-site-btn--yellow .v2-site-btn__ico {
  width: 20px; height: 20px; background: none; color: #003e6b; margin: 0;  /* 20 */
}
.v2-site--ctaslim .v2-site-cta .v2-site-btn--yellow .v2-site-btn__ico svg { width: 20px; height: 20px; }
.v2-site--ctaslim .v2-site-cta .v2-site-btn--white { min-width: 254px; justify-content: center; }  /* 254 */
/* The sitewide focus ring (--blue-bright) is 1.19:1 on this blue. */
.v2-site--ctaslim .v2-site-cta :focus-visible { outline-color: #fff; }

/* The star (5076:8204) and the fairy (5076:8215) are both drawn INSIDE the band
   and clipped by it: the star runs 59 past the bottom edge, the fairy 68 above
   the top. The shared <img> fairy is a different crop standing below the bar,
   so she is hidden and the comp's own art used here.
   The star node is rotated -30deg, so its 209.7x257 box is the UNROTATED one —
   the painted star is 150.5x206 about the same centre, which is what these
   numbers are. Taking the box would have put it 20 left and 25 high. */
.v2-site--ctaslim .v2-site-cta__fairy { display: none; }
.v2-site--ctaslim .v2-site-cta__bar::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 44.636%; top: 14.83%;                     /* 835.6 of 1872, 25.5 of 172 */
  width: 8.039%; aspect-ratio: 150.5 / 206;       /* 150.5 of 1872 */
  background: url("../images/v2/site/shared/cta-wand-star.svg") no-repeat top center / contain;
}
/* She is a sibling of the band in the comp, not a child of it, so she stands
   68 proud of its top edge — drawn on the wrapper, which does not clip. On the
   band she lost her head to its overflow. The star stays on the band because
   the comp does clip that one. */
.v2-site--ctaslim .v2-site-cta::before {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  left: 49.252%; bottom: 0;                       /* 922 of 1872 */
  width: 12.553%; aspect-ratio: 235 / 240;        /* 235 of 1872, 68 above the top */
  background: url("../images/v2/site/find-health-coverage/cta-fairy.webp") no-repeat bottom center / contain;
}

/* --- The 375 comp (3747:10228) ------------------------------------------
   A different design, not the desktop one narrowed: the lede's divider turns
   from a column rule into a full-width line, the green panel loses most of its
   padding and half its border, the headline carries a hard break the desktop
   string does not, and the testimonial wall becomes a short stack. 1023, not
   767: there is no tablet comp and the desktop grid is verified only to 1024.
   These rules sit after the shared @media (max-width: 640px) blocks and match
   their specificity, so they win there and also cover 641-1023. */
@media (max-width: 1023px) {
  /* Everything on the 375 artboard sits in a 24 gutter; the site's own is 30. */
  .v2-site--fhc .v2-site-wrap { padding-inline: 24px; }                 /* 24 */
  .v2-site--fhc .v2-site-sec,
  .v2-site--fhc .v2-site-h2r-revs { padding-block: 48px; }              /* 48 */
  .v2-site--fhc .v2-site-sec--tight { padding-block: 0 48px; }

  /* Hero (4618:4028): 643 with the 105 header over it. The comp's title has a
     hard break after "(ACA)" and wraps to four lines in Futura; League Spartan
     keeps "OBAMACARE (ACA)" on one line in the comp's own 353 box, so the box
     is sized to the real single-word width instead. */
  .v2-site--fhc .v2-site-chero { min-height: 538px; }                   /* 538 */
  .v2-site--fhc .v2-site-chero__in { padding-bottom: 35.73vw; }         /* 134 at 375 */
  .v2-site.v2-site--fhc .v2-site-chero h1 {
    font-size: 40px; line-height: .9; letter-spacing: -1.6px;           /* 40/36 */
    max-width: 235px;                                                   /* 4 lines, as drawn */
  }
  .v2-site--fhc .v2-site-chero h1 br { display: revert; }
  .v2-site.v2-site--fhc .v2-site-chero__sub { font-size: 18px; line-height: 1.5; max-width: 353px; }  /* 18/27 */
  .v2-site--fhc .v2-site-chero__actions { margin-top: 29px; }           /* 29 */
  .v2-site--fhc .v2-site-chero__btn { width: 292px; max-width: 100%; }  /* 292 */
  /* The comp stands both fairies lower than the shared rule does. */
  .v2-site--fhc .v2-site-chero__fairy--l { bottom: -39.84vw; }          /* 149.4 at 375 */
  .v2-site--fhc .v2-site-chero__fairy--r { bottom: -40.27vw; }          /* 151 at 375 */

  /* Get help enrolling (3747:10347). */
  .v2-site--fhc #v2-site-form .v2-site-grid--split {
    grid-template-columns: minmax(0, 1fr); gap: 48px;                   /* 48 */
  }
  .v2-site--fhc .v2-site-fhc__copy .v2-site-h2 { font-size: 30px; }     /* 30/30 */
  .v2-site--fhc .v2-site-fhc__copy .v2-site-rule { margin-bottom: 24px; }
  .v2-site--fhc .v2-site-fhc__lede { row-gap: 12px; max-width: none; }  /* 12 */
  /* The column rule becomes a full-width line under the question. */
  .v2-site--fhc .v2-site-fhc__lede-q {
    font-size: 24px; padding: 0 0 12px;                                 /* 24/24, 12 */
    border-bottom: 1px solid rgba(77, 77, 77, .24);
  }
  .v2-site--fhc .v2-site-fhc__lede-q::after { display: none; }
  .v2-site--fhc .v2-site-fhc__lede-a { font-size: 18px; }               /* 18/27 */
  /* The start box is a child of the lede group on the phone comp, a sibling of
     it on desktop, so the gap above it is 16 here and 32 there. */
  .v2-site--fhc .v2-site-fhc__copy > p {
    font-size: 16px; line-height: 1.25; margin-bottom: 16px;            /* 16/20, 16 */
  }
  .v2-site--fhc .v2-site-fhc__start { padding: 16px; border-radius: 24px; }     /* 16 / 24 */
  .v2-site--fhc .v2-site-fhc__start-h { font-size: 20px; margin-bottom: 16px; } /* 20/20 */
  .v2-site--fhc .v2-site-fhc__start .v2-site-checks li { font-size: 18px; }     /* 18/27 */
  .v2-site--fhc .v2-site-form-card { padding: 24px; }                   /* 24 */
  .v2-site--fhc .v2-site-form-card > h2 { font-size: 24px; }            /* 24/24 */
  .v2-site--fhc .v2-site-form-card__note { font-size: 16px; line-height: 1.25; }  /* 16/20 */
  .v2-site--fhc .v2-site-form__in { font-size: 16px; }                  /* h 44 */
  .v2-site--fhc .v2-site-form__submit { padding-inline: 30px; }         /* 30 */

  /* What is Obamacare (5081:9136). */
  .v2-site--fhc .v2-site-fhc-about {
    padding: 24px; margin-bottom: 48px;                                 /* 24 / 48 */
    background: #f4f7fa;
  }
  .v2-site--fhc .v2-site-fhc-about__top {
    grid-template-columns: minmax(0, 1fr); gap: 32px; margin-right: 0;
  }
  .v2-site--fhc .v2-site-fhc-about__top > div:first-child { padding-top: 0; }
  .v2-site--fhc .v2-site-fhc-about .v2-site-h2 { font-size: 30px; }     /* 30/30 */
  .v2-site--fhc .v2-site-fhc-about .v2-site-rule { margin-bottom: 12px; }  /* 12 */
  .v2-site--fhc .v2-site-fhc-about__top > div:first-child > p {
    font-size: 18px; line-height: 1.5;                                  /* 18/27 */
  }
  .v2-site--fhc .v2-site-fhc-about__sub { font-size: 20px; }            /* 20/20 */
  .v2-site--fhc .v2-site-fhc-about__benefits .v2-site-checks li {
    font-size: 18px; font-weight: 600;                                  /* 18/27 */
  }
  .v2-site--fhc .v2-site-fhc-about__media { margin-top: 17px; }         /* 17 */
  .v2-site--fhc .v2-site-fhc-about__shot { margin-inline: -24px; }
  .v2-site--fhc .v2-site-fhc-about__photo {
    /* The comp's own window is 68.75% wide AND 80.39% tall, squashed into the
       376x228 box — no object-position reproduces that. This keeps all four of
       the family in, which a centred crop does not. */
    aspect-ratio: 376 / 228; object-fit: cover; object-position: 10% 50%;
    border-radius: 0;
  }
  .v2-site--fhc .v2-site-fhc-about__who {
    position: relative; z-index: 1;
    width: 87.7%; margin: -53px auto 0;                                 /* 329 of 375 */
    border-width: 4px; border-radius: 10.6px;                           /* 4 / 10.62 */
    padding: 8px 17px 18px 20px;                                        /* 12/24/21/22 incl. border */
    /* The comp's own phone pair, not the desktop shadows at a third the size. */
    box-shadow: 0 1.66px 1.66px -.83px rgba(10, 13, 18, .04),
                0 10.62px 21.24px -3.98px rgba(10, 13, 18, .14);
  }
  .v2-site--fhc .v2-site-fhc-about__who h3 { font-size: 20px; line-height: 1; }  /* 20/20 */
  .v2-site--fhc .v2-site-fhc-about__who-lead {
    font-size: 12px; line-height: 1; margin-bottom: 12px;               /* 12/12 */
  }
  .v2-site--fhc .v2-site-fhc-about__who .v2-site-checks { gap: 4px; margin-bottom: 14px; }  /* 4 / 14 */
  .v2-site--fhc .v2-site-fhc-about__who .v2-site-checks li { font-size: 12px; line-height: 1.25; gap: 4px; }  /* 12/15 */
  .v2-site--fhc .v2-site-fhc-about__who-note {
    font-size: 12px; line-height: 1.25;                                 /* 12/15 */
    border-left-width: 1px; padding-left: 4px; margin: 0 0 0 13px;
  }
  .v2-site--fhc .v2-site-fhc-about__carriers {
    max-width: none; justify-content: center; align-items: center;
    gap: 18px 22px; margin-top: 28px;
  }
  /* Equal cells so the seven logos fall 3 + 3 + 1 with the short row centred;
     natural widths vary enough that plain wrapping gave 4 + 2 + 1. */
  .v2-site--fhc .v2-site-fhc-about__carriers li {
    flex: 0 0 calc(33.333% - 15px); min-width: 0;
    display: grid; place-items: center;
  }
  .v2-site--fhc .v2-site-fhc-about__carriers img {
    height: auto; width: auto; max-height: 40px; max-width: 100%;
  }
  .v2-site--fhc .v2-site-fhc-about__carriers--sm img { max-height: 28px; }

  /* The four topic cards (3747:10405). The comp stacks them with no gap at all,
     which would butt two 32px corners together — almost certainly an unset
     auto-layout gap, so the desktop's 32 is kept. */
  .v2-site--fhc .v2-site-topic { padding: 24px; gap: 24px; }            /* 24 / 24 */
  .v2-site--fhc .v2-site-topic h3 { font-size: 24px; letter-spacing: -.02em; }  /* 24/24 */
  .v2-site--fhc .v2-site-topic p { font-size: 18px; line-height: 1.5; } /* 18/27 */
  .v2-site--fhc p.v2-site-topic__note { font-size: 18px; line-height: 1.5; }
  .v2-site--fhc .v2-site-topic .v2-site-checks li { font-size: 16px; line-height: 1.5; }  /* 16/24 */

  /* Testimonials (5142:5258): the comp stacks four cards, and every character
     of its heading overrides the node's 36 to 32. */
  .v2-site--fhc .v2-site-h2r-revs__head { margin-bottom: 48px; }        /* 48 */
  .v2-site--fhc .v2-site-h2r-revs__title { font-size: 32px; letter-spacing: -1.6px; }  /* 32/32 */
  .v2-site--fhc .v2-site-h2r-revs__sub { font-size: 18px; }             /* 18/27 */
  .v2-site--fhc .v2-site-h2r-revs__card:nth-child(n + 5) { display: none; }

  /* FAQ (4854:7355). The shared phone rule sets the H2 to 900; the comp is 800
     on both artboards. */
  .v2-site--fhc .v2-site-head { margin-bottom: 48px; }                  /* 48 */
  .v2-site--fhc .v2-site-h2 { font-size: 36px; font-weight: 800; letter-spacing: -.05em; }  /* 36/36 */
  .v2-site--fhc .v2-site-head p { font-size: 18px; max-width: none; }   /* 18/27 */
  .v2-site--fhc .v2-site-q > summary { font-size: 16px; font-weight: 500; line-height: 1.5; }  /* 16/24 */

  /* CTA band (5142:5547): 327 card, 48 above and below. The shared phone rule
     reserves 60px of padding for a fairy this page hides, and sets the bar to
     display:block — so the rhythm here is margins, not gaps. */
  .v2-site--ctaslim .v2-site-cta {
    width: auto; margin: 48px 0; padding-top: 0;                        /* 48 */
  }
  .v2-site--ctaslim .v2-site-cta__bar {
    padding: 37px 24px 211px;                                           /* 638 - 427 */
    text-align: left; background-image: url("../images/v2/site/shared/mobile/panel-bg.webp");
    background-size: 100% 100%;
  }
  /* The bar is only display:block below 640, so from 641 to 1023 it is still a
     wrapping flex row. At 0 0 auto the copy took its natural width -- 1273px of
     unwrapped line -- and ran off the right edge; a full-row basis wraps the
     actions underneath instead. */
  .v2-site--ctaslim .v2-site-cta__copy { flex: 1 1 100%; }
  .v2-site--ctaslim .v2-site-cta h2 { font-size: 36px; }                    /* 36/36 */
  .v2-site--ctaslim .v2-site-cta p {
    font-size: 18px; line-height: 1.1; letter-spacing: .06em; margin-top: 8px;  /* 18/19.8, 8 */
  }
  .v2-site--fhc .v2-site-fhc-cta__ticks {
    flex-direction: column; gap: 8px; margin-top: 16px;                 /* 8 / 16 */
    font-size: 18px;
  }
  .v2-site--ctaslim .v2-site-cta .v2-site-actions {
    flex-direction: column; align-items: stretch; margin-top: 28px; gap: 8px;  /* 28 / 8 */
  }
  .v2-site--ctaslim .v2-site-cta .v2-site-btn { justify-content: center; }
  .v2-site--ctaslim .v2-site-cta .v2-site-btn--white { min-width: 0; }
  /* The phone comp re-cuts both: star 210x257 at (-5, 449) and fairy 231x240 at
     (86, 433) of the 327x638 card, each running past the bottom edge and cut
     off by it. Same two boxes as desktop, different art and offsets. */
  .v2-site--ctaslim .v2-site-cta__bar::before {
    left: -1.5%; top: auto; bottom: -10.7%;        /* -5/327, (706-638)/638 */
    width: 64.2%; aspect-ratio: 210 / 257;
    background-image: url("../images/v2/site/shared/cta-band-star.webp");
    background-position: center;
  }
  /* On the phone she IS inside the card and clipped by it, so she goes back on
     the band and the desktop one is switched off. */
  .v2-site--ctaslim .v2-site-cta::before { display: none; }
  .v2-site--ctaslim .v2-site-cta__bar::after {
    content: ""; position: absolute; z-index: 2; pointer-events: none;
    left: 26.3%; bottom: -5.5%;                    /* 86/327, (673-638)/638 */
    width: 70.6%; aspect-ratio: 231 / 240;
    background: url("../images/v2/site/shared/cta-fairy-mobile.webp") no-repeat bottom center / contain;
  }
}

/* ==========================================================================
   46. Individual & Family plans (/individual-family-health-plans) — 2026 redesign
   ==========================================================================
   Figma 3747:3865. Three pieces the old page did not have: the benefits ring,
   the four tier cards and the savings band. All three are laid out as % of the
   comp's own canvas, so desktop widths differ in scale, never in arrangement. */

/* Every canvas below is the comp's own 1440 centred in 1920, NOT the 1840 wrap.
   Letting them fill the wrap scaled the ring, the tiers and the savings band by
   1.24x -- which is what pushed the ring's cards apart and broke every y. */
.v2-site--pyf .v2-site-pyf-ring,
.v2-site--pyf .v2-site-pyf-tiers,
.v2-site--pyf .v2-site-pyf-sav__in { max-width: 1440px; margin-inline: auto; }

/* --- Hero. The comp's frame is 576 tall WITH the 120.6 header drawn over it, so
   the section under our sticky header is 455.4, not the 426 every other chero gets. --- */
.v2-site--pyf .v2-site-chero { min-height: clamp(400px, 23.72vw, 455px); }      /* 455.4 */
.v2-site--pyf .v2-site-chero__actions { margin-top: 57px; }                     /* 472 - 415 */
@media (min-width: 1024px) {
  .v2-site--pyf .v2-site-chero h1 { max-width: 846px; }                         /* 846 */
  .v2-site--pyf .v2-site-chero__sub { max-width: 792px; }                       /* 792 */
  /* The comp starts both fairies at y=119, 1.6 below the 120.6 header; the
     shared -31 pulls them up until the header clips the crown of the pink
     one's head. Desktop only — the phone block places them by `bottom`. */
  .v2-site--pyf .v2-site-chero__fairy { top: -1px; }                            /* 119 - 120.6 */
}

/* --- Section rhythm. Every pad here is the comp's: 96 around the standalone
   sections, and the three "plans" sections are ONE 1987-tall frame in Figma, so
   they carry its internal gaps (100.8 and 132/140) instead of 84 + 84. --- */
.v2-site--pyf .v2-site-sec { padding-block: 96px; }
.v2-site--pyf .v2-site-pyf-incl { padding-block: 95.6px 0; }
.v2-site--pyf .v2-site-pyf-tiers-sec { padding-block: 100.8px 0; }
.v2-site--pyf .v2-site-pyf-sav { padding-block: 132px 140px; }

/* --- Section heads. 48/40px headings on the comp's own block widths, so
   "Why Choose Madrinas Insurance?" sits on one line as it does in Figma. --- */
.v2-site--pyf .v2-site-head { max-width: 886px; margin-bottom: 56px; }
.v2-site--pyf .v2-site-head .v2-site-h2 { font-size: clamp(28px, 2.5vw, 48px); }   /* 48 */
.v2-site--pyf .v2-site-head p {
  max-width: 680px; margin: 8px auto 0;
  font-size: clamp(14px, 1.04vw, 20px); line-height: 1.5;                          /* 20 / 30 */
}
.v2-site--pyf .v2-site-pyf-incl .v2-site-head,
.v2-site--pyf .v2-site-pyf-tiers-sec .v2-site-head { max-width: 704px; margin-bottom: 0; }
.v2-site--pyf .v2-site-pyf-incl .v2-site-head .v2-site-h2,
.v2-site--pyf .v2-site-pyf-tiers-sec .v2-site-head .v2-site-h2 { font-size: clamp(24px, 2.0833vw, 40px); }
.v2-site--pyf .v2-site-pyf-incl .v2-site-head p,
.v2-site--pyf .v2-site-pyf-tiers-sec .v2-site-head p { max-width: 704px; }
.v2-site--pyf .v2-site-pyf-tiers { margin-top: 64px; }

/* --- The ring. Canvas 1440x691.6; every card is 355 wide, every y is the comp's. --- */
.v2-site--pyf .v2-site-pyf-ring {
  position: relative; aspect-ratio: 1440 / 691.6; margin-top: 64px;
}
.v2-site--pyf .v2-site-pyf-ring__b {
  position: absolute; width: 24.65%;                 /* 355 / 1440 */
  background: #eaf2f6; border: 1px solid rgba(0, 62, 107, .10);
  border-radius: 16px; padding: 1.67%; text-align: center;   /* 24 / 1440 */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3.38%;                                        /* 12 of the card's own 355 */
}
.v2-site--pyf .v2-site-pyf-ring__b p {
  margin: 0; font-weight: 700; color: var(--blue-deep);
  font-size: clamp(12px, 1.04vw, 20px); line-height: 1.5;    /* 20 / 30 */
  /* The comp's label frames overhang the card's 24 padding (319 and 307 inside a
     355 card) so each label sits on ONE line -- all but "Emergency services &
     trauma support", which is two in the comp too. Jost is wider than the comp's
     Futura PT, so the box is the widest of those labels (325) rather than 319;
     anything narrower wraps four of the seven and the ring's heights go wrong. */
  width: 106.6%;                                             /* 325 of the 305 content box */
}
/* 60 of the card's own 355, not of the ring -- a % here resolves against the card. */
.v2-site--pyf .v2-site-pyf-ring__ico {
  display: grid; place-items: center; border-radius: 50%;
  width: 16.9%; aspect-ratio: 1; flex: 0 0 auto;
  background: var(--blue); color: #fff;
}
.v2-site--pyf .v2-site-pyf-ring__ico svg { width: 46.7%; height: 46.7%; }   /* 28 / 60 */
.v2-site--pyf .v2-site-pyf-ring__b--0 { left: 37.01%; top: 0;      height: 26.03%; }  /* 533, 0,   180 */
.v2-site--pyf .v2-site-pyf-ring__b--1 { left: 10.97%; top: 10.41%; height: 21.69%; }  /* 158, 72,  150 */
.v2-site--pyf .v2-site-pyf-ring__b--2 { left: 63.06%; top: 10.41%; height: 21.69%; }  /* 908, 72 */
.v2-site--pyf .v2-site-pyf-ring__b--3 { left: 0;      top: 35.00%; height: 21.69%; }  /* 0,   242 */
.v2-site--pyf .v2-site-pyf-ring__b--6 { left: 75.35%; top: 35.00%; height: 21.69%; }  /* 1085 */
.v2-site--pyf .v2-site-pyf-ring__b--4 { left: 10.97%; top: 60.29%; height: 21.69%; }  /* 158, 417 */
.v2-site--pyf .v2-site-pyf-ring__b--5 { left: 63.06%; top: 60.29%; height: 21.69%; }  /* 908, 417 */
.v2-site--pyf .v2-site-pyf-ring__core {
  position: absolute; left: 32.57%; top: 40.05%; width: 33.47%; text-align: center;  /* 469, 277, 482 */
}
.v2-site--pyf .v2-site-pyf-ring__core h3 {
  font-size: clamp(16px, 1.5625vw, 30px); color: var(--blue-deep); margin: 0 0 8px;
}
.v2-site--pyf .v2-site-pyf-ring__core p {
  font-size: clamp(11px, 1.04vw, 20px); line-height: 1.5; margin: 0;                 /* 20 / 30 */
}
.v2-site--pyf .v2-site-pyf-ring__fairy { position: absolute; height: auto; z-index: 2; }
.v2-site--pyf .v2-site-pyf-ring__fairy--pink   { left: 38.40%; top: 60.96%; width: 16.88%; }  /* 553, 421.6, 243 */
.v2-site--pyf .v2-site-pyf-ring__fairy--yellow { left: 47.99%; top: 69.21%; width: 12.90%; }  /* 691, 478.7, 185.7 */
.v2-site--pyf .v2-site-pyf-ring__call {
  position: absolute; left: 43.96%; top: 91.90%; width: 10.69%;    /* 633, 635.6, 154 */
  justify-content: center; padding: 0; height: 8.10%;              /* 56 / 691.6 */
  font-size: clamp(10px, .9375vw, 18px); z-index: 3;
}

/* --- The four tiers. Row 1440: 345-wide cards 20 apart, badge overhanging the
   top-right corner by 10. A % padding here resolves against the CARD's 345. --- */
.v2-site--pyf .v2-site-pyf-tiers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.39%;  /* 20 / 1440 */
}
.v2-site--pyf .v2-site-pyf-tier {
  position: relative; background: #eaf2f6; border: 1px solid var(--blue);
  border-radius: 16px; padding: 9.28% 6.96%;                      /* 32 / 345, 24 / 345 */
}
.v2-site--pyf .v2-site-pyf-tier h3 {
  font-size: clamp(17px, 1.6667vw, 32px); line-height: 1; margin: 0 0 16px;
  text-transform: uppercase; letter-spacing: -.05em;
  /* The comp paints each tier name with a metal gradient, not a flat colour. */
  background-image: linear-gradient(90deg, #c29502, #e5b415, #c59c16, #e5c764, #c59c16, #e5b415, #c29502);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v2-site--pyf .v2-site-pyf-tier p {
  margin: 0; font-size: clamp(12px, .9375vw, 18px); line-height: 1.5;   /* 18 / 27 */
}
.v2-site--pyf .v2-site-pyf-tier--silver h3 {
  background-image: linear-gradient(90deg, #cdcdcd, #ddd, #d5d5d5, #e4e4e4, #d5d5d5, #ddd, #cdcdcd);
}
.v2-site--pyf .v2-site-pyf-tier--gold h3 {
  background-image: linear-gradient(90deg, #c2b302, #e0d65b, #e3da6a, #faf4b1, #e4d308, #e0d65b, #d2c636);
}
.v2-site--pyf .v2-site-pyf-tier--platinum h3 {
  background-image: linear-gradient(90deg, #0078cd, #00b6ed, #43a3c0, #62dafe, #43a3c0, #00b6ed, #0078cd);
}
.v2-site--pyf .v2-site-pyf-tier__badge {
  position: absolute; top: -10px; right: -10px; height: 26px;
  display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 16px; line-height: 20px; letter-spacing: -.04em; white-space: nowrap;
  background: #ffeb00; border: 1px solid #b9ab04; color: var(--blue-deep);
}
.v2-site--pyf .v2-site-pyf-tier--platinum .v2-site-pyf-tier__badge {
  background: var(--blue); border-color: #035996; color: #fff;
}

/* --- The savings band. Canvas 1440x315: the blue bar is 963 wide from y=80, the
   card 500 wide at x=940 runs the full height and laps the bar's right end by 23,
   and both fairies lap the bar's left. The bar's own padding is a % of the CANVAS,
   because a % padding on an absolute box resolves against its containing block. --- */
.v2-site--pyf .v2-site-pyf-sav__in { position: relative; aspect-ratio: 1440 / 315; }
.v2-site--pyf .v2-site-pyf-sav__band {
  position: absolute; left: 0; top: 25.40%; width: 66.88%; height: 48.89%;   /* 80, 963, 154 */
  background: var(--blue); border-radius: 16px; color: #fff;
  display: flex; align-items: center; gap: 6.75%;                            /* 65 of its own 963 */
  padding-left: 9.51%; padding-right: 4.44%;                                 /* 137, 64 of 1440 */
}
.v2-site--pyf .v2-site-pyf-sav__band h2 {
  color: #fff; margin: 0; flex: 0 0 auto;
  font-size: clamp(16px, 2.0833vw, 40px); line-height: 1;                    /* 40 */
}
.v2-site--pyf .v2-site-pyf-sav__band p {
  margin: 0; color: #fff; font-size: clamp(11px, 1.04vw, 20px); line-height: 1.5;
}
.v2-site--pyf .v2-site-pyf-sav__card {
  position: absolute; left: 65.28%; top: 0; width: 34.72%; height: 100%;     /* 940, 500 */
  background: #eaf2f6; border: 1px solid rgba(0, 120, 205, .15);
  border-radius: 24px; padding: 2.222%;                                      /* 32 / 1440 */
  display: flex; flex-direction: column; z-index: 2;
  box-shadow: 0 0 100px rgba(0, 48, 82, .24);     /* the node's own DROP_SHADOW, r=100 */
}
.v2-site--pyf .v2-site-pyf-sav__card h3 {
  font-size: clamp(16px, 1.875vw, 36px); line-height: 1; margin: 0;          /* 36 */
  color: var(--blue-deep);
}
.v2-site--pyf .v2-site-pyf-sav__card p {
  margin: 20px 0 0; font-size: clamp(11px, 1.04vw, 20px); line-height: 1.5;
}
.v2-site--pyf .v2-site-pyf-sav__btn {
  align-self: flex-end; margin-top: 13px; background: #ff399e; border: 1px solid #d31676;
  color: #fff; font-size: clamp(10px, .9375vw, 18px);
}
.v2-site--pyf .v2-site-pyf-sav__btn:hover { background: #ff4ea8; }
.v2-site--pyf .v2-site-pyf-sav__fairy {
  position: absolute; left: -8.68%; top: -9.84%; width: 17.43%; height: auto;  /* -125, -31, 251 */
  z-index: 3; pointer-events: none;
}
.v2-site--pyf .v2-site-pyf-sav__fairy--sm {
  left: 4.44%; top: 70.16%; width: 5.97%;                                      /* 64, 221, 86 */
}

/* --- Intro: the comp's labelled blocks, and the photo tilted as it is drawn. --- */
/* Comp 3747:3978: content 1480 wide, two 704 columns 72 apart; the photo is a PORTRAIT
   564x706 sitting 87px into its column and turned 0.047rad (2.69deg). It was a landscape
   crop here, which is why the section never matched however the text was arranged. */
/* 1480, NOT the page's usual 1780: this section is padded 220 in the comp while the
   others are padded 70. The cap goes on the WRAP, not just the grid -- on the grid alone
   the H2 stayed at full width while the columns pulled in, so the heading no longer lined
   up with the copy beneath it. */
.v2-site--pyf .v2-site-pyf-introwrap { max-width: calc(1480px + 2 * var(--gutter)); }
/* The comp's TextTitleGroup is INSIDE the left column, so the heading, the rule and
   the copy share one 704 column and the photo starts on the heading's own top line
   (y=96) rather than below it -- which is what makes the photo span title to callout.
   Hoisting the heading out of the grid is what shortened the photo. */
.v2-site--pyf .v2-site-pyf-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px; align-items: start;
}
.v2-site--pyf .v2-site-pyf-intro > div > .v2-site-h2 {
  margin-top: 0; font-size: clamp(28px, 2.5vw, 48px); line-height: 1;   /* 48 / 48 */
}
/* The comp breaks the headline after the comma, which is where the <em> starts. */
.v2-site--pyf .v2-site-pyf-intro .v2-site-h2 em { display: block; }
/* 80x6 here, not the shared 56x4; 16 under the heading and 40 before the lede. */
.v2-site--pyf .v2-site-pyf-intro .v2-site-rule { width: 80px; height: 6px; border-radius: 3px; margin: 16px 0 40px; }
/* Both numbers are shares of the 704 column: the photo is 564 wide (80.1%) and starts
   87px in (12.36%). Applying the inset as padding alone left the image at full column
   width, which is why it came out oversized. */
.v2-site--pyf .v2-site-pyf-intro__shot { margin-left: 12.36%; width: 80.11%; }
/* 308 text + 24 | hairline | 24 + 348 of the column's 704, centred on each other. */
.v2-site--pyf .v2-site-pyf-intro__lede {
  display: grid; grid-template-columns: 332fr 348fr;
  gap: 24px; align-items: center; margin-bottom: 16px;
}
.v2-site--pyf .v2-site-pyf-intro__lede h3,
.v2-site--pyf .v2-site-pyf-intro__h,
.v2-site--pyf .v2-site-pyf-intro__box h3 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1.1; color: var(--blue-deep);
  font-size: clamp(18px, 1.56vw, 30px); margin: 0;
}
.v2-site--pyf .v2-site-pyf-intro__lede h3 { padding-right: 24px; border-right: 1px solid rgba(77, 77, 77, .24); }
.v2-site--pyf .v2-site-pyf-intro__lede p { margin: 0; }
.v2-site--pyf .v2-site-pyf-intro__h { margin: 26px 0 10px; }
.v2-site--pyf .v2-site-pyf-intro__hl { color: var(--blue-bright); font-weight: 700; }
.v2-site--pyf .v2-site-pyf-intro__box {
  background: rgba(238, 248, 255, .96); border-radius: 24px; padding: 28px 32px; margin-top: 24px;
}
.v2-site--pyf .v2-site-pyf-intro__box p { margin: 10px 0 0; }
/* The shared h2 em is italic; the comp only recolours it. */
.v2-site--pyf .v2-site-pyf-intro__box h3 em { font-style: normal; color: var(--blue-bright); }
/* The comp photographs it at a slight angle; the shadow follows the rotation. */
/* No border-radius and NO box-shadow here: the export carries Figma's rounded corners
   and soft shadow in its alpha, and a box-shadow on a transparent PNG is cast by the
   element's rectangle, not the artwork -- which drew a hard dark slab behind it. */
.v2-site--pyf .v2-site-pyf-intro .v2-site-pyf__photo {
  /* aspect-ratio: auto is load-bearing -- the older .v2-site-pyf__photo rule pins 2/1
     with object-fit: cover, which squashed this portrait export into a letterbox. */
  display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: fill;
  transform: rotate(2.69deg);                                      /* 0.047 rad */
}

/* --- Why choose: icon above the title, five across, white cards. --- */
.v2-site--pyf .v2-site-pyf-why {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin-top: 40px;
}
.v2-site--pyf .v2-site-pyf-why__card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 24px;
}
.v2-site--pyf .v2-site-pyf-why__ico { display: block; color: var(--blue); margin-bottom: 18px; }
.v2-site--pyf .v2-site-pyf-why__ico svg { width: 38px; height: 38px; }
.v2-site--pyf .v2-site-pyf-why__card h3 {
  font-size: clamp(14px, 1.04vw, 20px); text-transform: uppercase; margin: 0 0 10px;
  color: var(--blue-deep); letter-spacing: -.02em;
}
.v2-site--pyf .v2-site-pyf-why__card p { margin: 0; font-size: 16px; line-height: 1.5; }

/* --- The ring sits on the comp's star field. The group's box is 2124x1284 starting
   543.6 ABOVE this section, so only its lower third is ever on screen; Figma's export
   trims to the ink (2010x1161), hence the vw sizing and the negative top rather than
   a stretched background. Showing it from the top instead -- which is what
   `center top / 100% auto` did -- put the field's dense middle in the corners. --- */
.v2-site--pyf .v2-site-pyf-incl { position: relative; overflow: hidden; }
.v2-site--pyf .v2-site-pyf-incl::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: -28.31vw; width: 104.69vw; height: 60.47vw;              /* -543.6, 2010, 1161 */
  background: url("../images/v2/site/protect-your-family/stars-bg.webp") no-repeat center / 100% 100%;
  pointer-events: none; z-index: 0;
}
.v2-site--pyf .v2-site-pyf-incl > * { position: relative; z-index: 1; }

/* --- CTA band. The comp's banner is 1872x172 (x=24 of 1920) with everything placed
   on it, not flowed: copy at 55, the pink pill overhanging the top edge by 9 at 655,
   the buttons at 1286. Flowing it left the buttons under the headline whatever the
   widths were, so the bar is an aspect-ratio canvas and each piece carries its own
   share of the comp's 1872 -- the same trick as the ring and the savings band. --- */
/* 1872 of 1920 kept as a share of the viewport, not a fixed negative margin: at
   1440 a -2.232% bleed made the bar wider than the window and the page scrolled
   sideways. */
.v2-site--pyf .v2-site-cta {
  width: 97.5vw; margin-inline: calc(50% - 48.75vw);                /* 1872 / 1920 */
}
.v2-site--pyf .v2-site-cta__bar {
  display: block; position: relative; padding: 0; min-height: 0;
  aspect-ratio: 1872 / 172;
}
.v2-site--pyf .v2-site-cta__copy {
  position: absolute; left: 2.94%; top: 22.67%; width: 37.66%;      /* 55, 39, 705 */
}
.v2-site--pyf .v2-site-cta__copy h2 {
  font-size: clamp(18px, 2.0833vw, 40px); line-height: 1; margin: 0;    /* 40 */
}
.v2-site--pyf .v2-site-pyf-cta__h2b {
  display: block; margin-top: .025em; letter-spacing: .08em;            /* ls 1.92 */
  font-size: clamp(11px, 1.25vw, 24px); line-height: 1; font-weight: 600;
}
.v2-site--pyf .v2-site-cta__copy p {
  margin: 12px 0 0; font-size: clamp(9px, 1.0417vw, 20px); line-height: 1.25;
}
.v2-site--pyf .v2-site-pyf-cta__mid {
  position: absolute; left: 33.81%; top: -5.23%; width: 19.93%;     /* 633, -9, 373 */
  text-align: center; margin: 0;
}
.v2-site--pyf .v2-site-pyf-cta__pill {
  display: inline-grid; gap: 5px; background: #ff399e; color: #fff;
  border-radius: 22px; padding: 2.1% 0; width: 91.96%;              /* r=22, 343 of 373 */
}
.v2-site--pyf .v2-site-pyf-cta__pill b {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(11px, 1.25vw, 24px); line-height: 1; letter-spacing: -.04em;
}
.v2-site--pyf .v2-site-pyf-cta__pill i {
  font-style: normal; font-weight: 500; text-transform: uppercase;
  font-size: clamp(8px, .8333vw, 16px); line-height: 1.25; letter-spacing: -.01em;
}
.v2-site--pyf .v2-site-pyf-cta__mid p {
  color: #fff; margin: 11px 0 0;                                    /* 155 - 48 - 87 - 9 */
  font-size: clamp(9px, 1.0417vw, 20px); line-height: 1.25;
}
.v2-site--pyf .v2-site-cta .v2-site-actions {
  position: absolute; left: 68.70%; top: 33.72%; width: 28.10%;     /* 1286, 58, 526 */
  display: flex; flex-direction: row; align-items: center; gap: 16px;
}
/* The comp's yellow star is a VECTOR inside the banner, behind the fairy -- not part
   of her artwork and not part of the bar's background, so it has to be drawn here. */
.v2-site--pyf .v2-site-cta__bar::after {
  content: ""; position: absolute; left: 52.99%; top: -8.14%;      /* 992, -14 */
  width: 11.20%; aspect-ratio: 209.7 / 257; z-index: 1;            /* 209.7 x 257 */
  background: url("../images/v2/site/protect-your-family/cta-star.webp") no-repeat center / contain;
  pointer-events: none;
}
/* The comp's banner fairy is a different cut from the shared one. */
.v2-site--pyf .v2-site-cta__fairy {
  content: url("../images/v2/site/protect-your-family/cta-fairy.webp");
  left: 56.62%; right: auto; top: -36.63%; bottom: auto;            /* 1060, -63 */
  width: 10.94%; height: auto; z-index: 2;                          /* 204.8 */
}

/* --- FAQ: the comp's column is 1080 wide, not the 800 this page used, and its
   header block is 1640 -- wide enough to keep the headline on one line. --- */
.v2-site--pyf .v2-site-pyf-acc { max-width: 1080px; margin-inline: auto; }
.v2-site--pyf .v2-site-pyf-faq .v2-site-head { max-width: 1640px; }

/* --- Phone and tablet. Figma 3747:10809, a 375 artboard: content 327 inside a 24
   gutter. Nothing above was stacked, so at 1023 the five "why" cards were still
   five columns and the page scrolled sideways by 31px at 375. The three absolute
   canvases keep the same trick as desktop, on the mobile comp's own boxes. --- */
@media (max-width: 1023px) {
  /* Section rhythm: 48 around the standalone sections, and the plans screen is one
     3418-tall frame padded 32/20 with its own internal gaps. */
  .v2-site--pyf .v2-site-sec { padding-block: 48px; }
  .v2-site--pyf .v2-site-pyf-incl { padding-block: 32px 0; }
  .v2-site--pyf .v2-site-pyf-tiers-sec { padding-block: 24px 0; }
  .v2-site--pyf .v2-site-pyf-sav { padding-block: 24px 34px; }

  /* --- Hero: 643 with the 105 header over it, so 538 below ours. --- */
  .v2-site--pyf .v2-site-chero { min-height: 538px; }
  .v2-site--pyf .v2-site-chero__actions { margin-top: 38px; gap: 8px; flex-direction: column; align-items: center; }
  .v2-site--pyf .v2-site-chero__btn { width: 292px; max-width: 100%; }

  /* --- Intro: one column, photo last, and the comp runs the lede as plain flowing
     paragraphs -- the desktop sub-headings and the callout's heading are inline body
     text here, not headings, so each block reads as one 18/27 paragraph. --- */
  .v2-site--pyf .v2-site-pyf-introwrap { max-width: none; }
  .v2-site--pyf .v2-site-pyf-intro { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .v2-site--pyf .v2-site-pyf-intro > div > .v2-site-h2 { font-size: 32px; }           /* 32 / 32 */
  .v2-site--pyf .v2-site-pyf-intro .v2-site-h2 em { display: inline; }
  .v2-site--pyf .v2-site-pyf-intro .v2-site-rule { margin: 8px 0 48px; }
  .v2-site--pyf .v2-site-pyf-intro__lede { display: block; margin-bottom: 0; }
  /* The comp sets all of this as plain 18/27 body -- the desktop sub-headings are not
     headings here. They stay separate blocks, though: the comp merges each pair into
     one sentence with a comma, and that is a copy rewrite we do not have strings for. */
  .v2-site--pyf .v2-site-pyf-intro__lede h3,
  .v2-site--pyf .v2-site-pyf-intro__h,
  .v2-site--pyf .v2-site-pyf-intro__box h3 {
    font-family: inherit; font-weight: 400; text-transform: none;
    font-size: inherit; line-height: inherit; letter-spacing: -.02em;
    padding: 0; border: 0; margin: 0;
  }
  .v2-site--pyf .v2-site-pyf-intro__box h3 { display: inline; }
  .v2-site--pyf .v2-site-pyf-intro__box p { display: inline; }
  .v2-site--pyf .v2-site-pyf-intro__box h3 em { color: inherit; }
  .v2-site--pyf .v2-site-pyf-intro > div > p,
  .v2-site--pyf .v2-site-pyf-intro__lede { font-size: 18px; line-height: 1.5; margin: 0 0 24px; }
  .v2-site--pyf .v2-site-pyf-intro__hl { color: var(--blue); font-weight: 400; }
  /* #f4f7fa with a 6px blue edge, not the desktop's tinted panel. */
  .v2-site--pyf .v2-site-pyf-intro__box {
    background: #f4f7fa; border-left: 6px solid var(--blue); border-radius: 16px;
    padding: 24px; margin: 0; font-size: 16px; line-height: 1.5;
  }
  .v2-site--pyf .v2-site-pyf-intro__shot { margin-left: 0; width: 100%; }
  .v2-site--pyf .v2-site-pyf-intro .v2-site-pyf__photo {
    aspect-ratio: 327 / 250; object-fit: cover; border-radius: 32px; transform: none;
  }

  /* --- Why choose: one column, the icon on a plate beside the text. --- */
  .v2-site--pyf .v2-site-pyf-why { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 0; }
  .v2-site--pyf .v2-site-pyf-why__card {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 16px;
    align-items: start; padding: 24px; border-radius: 16px;
  }
  /* The comp plates every icon in #ffeb00 at 20% with the glyph in #fbab18. */
  .v2-site--pyf .v2-site-pyf-why__ico {
    grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 235, 0, .2); color: #fbab18;
  }
  .v2-site--pyf .v2-site-pyf-why__ico svg { width: 24px; height: 24px; }
  .v2-site--pyf .v2-site-pyf-why__card h3 {
    font-size: 20px; line-height: 1.5; text-transform: none; margin: 0 0 8px;   /* 20 / 30 */
  }
  .v2-site--pyf .v2-site-pyf-why__card p { font-size: 16px; line-height: 1.25; }  /* 16 / 20 */

  /* --- The ring unrolls into one column: Core Health Benefits first, the seven
     cards, then the two fairies with the full-width Call now across their feet. --- */
  .v2-site--pyf .v2-site-pyf-ring {
    max-width: none; aspect-ratio: auto; margin-top: 0;
    display: flex; flex-direction: column; gap: 20px;
    padding-bottom: 48.53vw;                                /* the 162 fairy block + its 20 gap */
  }
  .v2-site--pyf .v2-site-pyf-ring__b {
    position: static; width: 100%; height: auto; padding: 24px; gap: 12px; order: 1;
  }
  .v2-site--pyf .v2-site-pyf-ring__b p { width: 100%; font-size: 20px; }
  .v2-site--pyf .v2-site-pyf-ring__ico { width: 60px; height: 60px; }
  .v2-site--pyf .v2-site-pyf-ring__ico svg { width: 28px; height: 28px; }
  .v2-site--pyf .v2-site-pyf-ring__core {
    position: static; width: 100%; order: 0; margin-bottom: 4px;
  }
  .v2-site--pyf .v2-site-pyf-ring__core h3 { font-size: 24px; }                   /* 24 */
  .v2-site--pyf .v2-site-pyf-ring__core p { font-size: 18px; line-height: 1.5; }  /* 18 / 27 */
  /* Both stand on the ring's foot, but the pink one stops 41 short of it so the button
     crosses her shins instead of her waist. A % bottom resolves against the ring's whole
     (content-driven) height, which is what buried her -- these are the comp's px. */
  .v2-site--pyf .v2-site-pyf-ring__fairy { bottom: 0; top: auto; }
  .v2-site--pyf .v2-site-pyf-ring__fairy--pink   { left: 19.88%; width: 34.25%; bottom: 11.04vw; }  /* 65, 112, 120.6 of 162 */
  .v2-site--pyf .v2-site-pyf-ring__fairy--yellow { left: 35.17%; width: 42.51%; bottom: 0;    }  /* 115, 139 */
  .v2-site--pyf .v2-site-pyf-ring__call {
    position: absolute; left: 0; top: auto; bottom: 0; width: 100%; height: 56px;
    font-size: 18px;
  }
  /* The foot and the pink fairy's lift are vw, not px: the fairies are a share of the
     ring, so a fixed foot left her 155 taller than it by the time the phone layout is
     still running at 768. */

  /* --- Tiers: one column, the comp's 327x168 card. --- */
  .v2-site--pyf .v2-site-pyf-tiers {
    max-width: none; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 24px;
  }
  .v2-site--pyf .v2-site-pyf-tier { padding: 32px 24px; }
  .v2-site--pyf .v2-site-pyf-tier h3 { font-size: 32px; }
  .v2-site--pyf .v2-site-pyf-tier p { font-size: 18px; }
  .v2-site--pyf .v2-site-pyf-tier__badge { right: 0; }                 /* 361 of a card ending 351 */

  /* --- Savings: the comp's own 375x684 frame, bled out of the gutter, with the card
     lapping the blue panel's bottom by 42 and the fairies straddling the seam. --- */
  .v2-site--pyf .v2-site-pyf-sav__in {
    max-width: none; aspect-ratio: 375 / 684;
    margin-inline: calc(var(--gutter) * -1);
  }
  .v2-site--pyf .v2-site-pyf-sav__band {
    left: 6.4%; top: 0; width: 91.47%; height: 49.42%;                 /* 24, 343, 338 */
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 12px; padding: 8.53% 6.93% 0;                                 /* 32, 26 of 375 */
  }
  /* 40 is the comp's, but Jost breaks "FINANCIAL HELP" over the band's 291 at 40. */
  .v2-site--pyf .v2-site-pyf-sav__band h2 { font-size: clamp(24px, 9.07vw, 34px); }
  /* The copy stops short of the fairies' lane rather than running behind them. */
  .v2-site--pyf .v2-site-pyf-sav__band p { font-size: clamp(14px, 4.8vw, 18px); width: 66%; }
  .v2-site--pyf .v2-site-pyf-sav__card {
    left: 8.53%; top: 43.27%; width: 87.2%; height: auto; min-height: 56.73%;   /* 32, 296, 327, 388 */
    padding: 8.53% 8.53%;                                                       /* 32 of 375 */
    border-radius: 24px;
  }
  .v2-site--pyf .v2-site-pyf-sav__card h3 { font-size: clamp(24px, 9.6vw, 36px); }
  .v2-site--pyf .v2-site-pyf-sav__card p { font-size: clamp(14px, 4.8vw, 18px); margin-top: 20px; }
  .v2-site--pyf .v2-site-pyf-sav__btn { align-self: center; margin-top: 20px; font-size: 16px; }
  /* The comp stands both of them over the middle of the card, where they cover
     "Coverage for Your Household". Moved to the card's right instead (user, 2026-10-17):
     same pair, same 29-right/92-down offset between them, right-aligned to the card's
     edge and stopped 12 CLEAR of its heading, so nothing sits behind the text. */
  .v2-site--pyf .v2-site-pyf-sav__fairy      { left: 67.2%;  top: 22.07%; width: 29.6%; }  /* 252, 151, 111 */
  .v2-site--pyf .v2-site-pyf-sav__fairy--sm  { left: 74.93%; top: 34.65%; width: 13.87%; } /* 281, 237, 52 */

  /* --- Testimonials: the comp stacks THREE cards; the home component's own phone
     rules already stop the marquee and drop the duplicate row. --- */
  .v2-site--pyf .v2-site-h2r-revs__card:nth-child(n + 4) { display: none; }

  /* --- CTA banner: a 327x819 card, the pink band bleeding past both its edges.
     The shared phone rules stand her on TOP of the bar (translateX(-50%), 344 of
     padding to clear her); the comp puts her inside it, so both are undone here. --- */
  .v2-site--pyf .v2-site-cta { width: auto; margin: 48px 0 0; padding-top: 0; }
  .v2-site--pyf .v2-site-cta__bar {
    aspect-ratio: 327 / 819; border-radius: 32px; overflow: hidden; padding: 0;
  }
  /* The star is its own vector on the phone comp too, just lower and further left. */
  .v2-site--pyf .v2-site-cta__bar::after {
    left: -1.53%; top: 73.02%; width: 64.13%;                   /* -5, 598, 209.7 of 327 */
  }
  .v2-site--pyf .v2-site-cta__copy {
    left: 7.34%; top: 4.76%; width: 85.32%;                     /* 24, 39, 279 of 327 */
  }
  .v2-site--pyf .v2-site-cta__copy h2 { font-size: 36px; line-height: 1; }        /* 36 / 36 */
  .v2-site--pyf .v2-site-pyf-cta__h2b { font-size: 20px; line-height: 1; margin-top: 8px; }
  .v2-site--pyf .v2-site-cta__copy p { font-size: 18px; line-height: 1.5; margin-top: 15px; }
  .v2-site--pyf .v2-site-pyf-cta__mid {
    left: -12.84%; top: 33.45%; width: 122.94%; text-align: center;   /* -42, 274, 402 of 327 */
  }
  .v2-site--pyf .v2-site-pyf-cta__pill {
    width: 100%; border-radius: 0; padding: 11px 0 12px; gap: 5px;  /* the band is square and full-bleed */
  }
  .v2-site--pyf .v2-site-pyf-cta__pill b { font-size: 24px; }
  .v2-site--pyf .v2-site-pyf-cta__pill i { font-size: 16px; }
  .v2-site--pyf .v2-site-pyf-cta__mid p {
    font-size: 18px; line-height: 1.5; text-align: left;
    width: 66.67%; margin: 16px 0 0 16.42%;                        /* 268 at the card's own 24 */
  }
  .v2-site--pyf .v2-site-cta .v2-site-actions {
    left: 7.34%; top: 56.41%; width: 85.32%;                       /* 24, 462, 279 */
    flex-direction: column; gap: 8px;
  }
  .v2-site--pyf .v2-site-cta .v2-site-actions > * { width: 100%; }
  /* Her own cut for the phone comp -- this one carries the yellow star and wand. */
  .v2-site--pyf .v2-site-cta__fairy {
    content: url("../images/v2/site/protect-your-family/cta-fairy-mobile.webp");
    left: 26.3%; right: auto; top: 71.06%; bottom: auto; width: 70.64%;   /* 86, 582, 231 of 327 */
    transform: none; z-index: 2;
  }
}

/* ==========================================================================
   47. Retirement planning (/retirement-planning) — 2026 redesign
   ==========================================================================
   Figma 3747:4338 (1920 desktop) and 3747:11285 (375 phone). A second desktop
   frame, 4529:3954, is the older variant — hero 426, its own header, no urgency
   banner. 3747:4338 is the one this is built to.

   EVERY SECTION HAS ITS OWN CANVAS, which is why nothing here is scoped to the
   page: intro and "What's included" sit in a 1480 box (1920 less 220 gutters),
   "Why choose" and the testimonials in 1780 (less 70), the FAQ in a 1640 header
   over a 1080 column, and the CTA band is 1872 inside a 24 gutter. The page
   wears `.v2-site--pyv` but `.v2-site-sec` is on all five sections, so a
   page-wide wrap rule would put four of them on the wrong box. Each section has
   a `.v2-site-pyv-*` hook instead.

   Desktop lives in `@media (min-width: 1024px)` and the phone in
   `@media (max-width: 1023px)`, deliberately: a page-scoped rule outside a
   query is (0,2,0) and beats the shared phone block's (0,1,0) whatever the
   source order, so an unguarded desktop value silently wins at 375.

   League Spartan is served at 800 and 900 only (base.html). The comp's 600 and
   700 display weights resolve to 800 — they are written as 800 here rather than
   as a number that does nothing. */

/* --- Hero (4618:4390) ---------------------------------------------------
   576 including the 120.6 header drawn over it, so the band is 455.4. The
   plate keeps the shared `cover` / `center top`, as on
   /individual-family-health-plans (client, 2026-10-17). The comp's arch is a
   shallower ellipse than the plate's and the plate is shared by 20 templates,
   so the curve itself is not reproduced. */
.v2-site--pyv .v2-site-chero h1 { line-height: 1; }                     /* 64/64 */
.v2-site--pyv .v2-site-chero__sub { letter-spacing: 0; line-height: 1.5; }  /* 20/30 */
/* The label's cap box sits above the 4px bottom border, not inside it. */
.v2-site--pyv .v2-site-chero__btn { padding-top: 4px; }

/* --- Intro: copy left, the tilted photo right (5137:6141) --------------- */
.v2-site-pyv-intro .v2-site-h2 { color: #003e6b; letter-spacing: -.04em; line-height: 1; }
.v2-site-pyv-intro .v2-site-rule {
  width: 80px; height: 6px; border-radius: 3px; background: #00b6ed;    /* 80x6, r3 */
}
.v2-site-pyv-intro .v2-site-grid > div > p { color: #003e6b; }
/* Each paragraph opens with its own sub-head on the desktop comp and runs as
   one flat paragraph on the phone one — one markup, two treatments. */
.v2-site-pyv-intro .v2-site-grid > div > p > b {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1; color: #003e6b;
}
.v2-site-pyv-intro .v2-site-grid > div > p.v2-site-callout {
  background: rgba(238, 248, 255, .96); border: 0; border-radius: 16px;  /* 16 */
  padding: 24px; color: #003e6b;                                        /* 24 */
}
.v2-site-pyv-intro .v2-site-callout b { color: #003e6b; }
.v2-site-pyv-intro .v2-site-callout em { font-style: normal; color: #0078cd; }
/* The export is ALREADY rotated (Figma renders the node with its transform), so
   the 2.68deg tilt, the 30 radius and the white inner rim are baked in and
   there is no CSS transform here. Sizes are the rotated bbox, 564x706.3. */
.v2-site-pyv-intro .v2-site-prod__photo {
  max-width: none; border-radius: 0; box-shadow: none;
  aspect-ratio: 564 / 706.3;
}

/* --- Why choose: five feature cards (3747:4462) ------------------------- */
.v2-site-pyv-why .v2-site-h2 { color: #003e6b; letter-spacing: -.04em; line-height: 1; }
.v2-site-pyv-why .v2-site-head p { color: #003e6b; margin-top: 8px; }   /* 8 */
.v2-site-pyv-why .v2-site-card {
  border: 1px solid rgba(0, 62, 107, .1); box-shadow: none;             /* 1px INSIDE */
}
.v2-site-pyv-why .v2-site-card__t { color: #003e6b; letter-spacing: -.04em; }
.v2-site-pyv-why .v2-site-card p { color: #003e6b; }
/* The five glyphs are the comp's own, one per card. They are masked rather
   than drawn as <img> so one asset can take the comp's two colours: #0078cd on
   desktop, #fbab18 on the phone's yellow plate. The URL rides on --ico. */
.v2-site-pyv-why .v2-site-star__ico::before {
  content: ""; display: block; width: 100%; height: 100%;
  background-color: #0078cd;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

/* --- What's included: copy left, four blue cards right (3747:4497) ------ */
.v2-site-pyv-incl .v2-site-h2 { color: #003e6b; letter-spacing: -.04em; line-height: 1; }
.v2-site-pyv-incl .v2-site-head p { color: #003e6b; margin-top: 12px; } /* 12 */
.v2-site-pyv-incl .v2-site-grid { gap: 16px; }                          /* 16 */
/* 39 + the 1px border = the comp's 40 inset, because Figma draws its stroke
   inside the box and a CSS border sits outside the padding. */
.v2-site-pyv-incl .v2-site-bluecard {
  background: #0078cd; border: 1px solid #c9dcec;                       /* #0078cd */
  padding: 39px; gap: 16px;                                             /* 40 / 16 */
}
.v2-site-pyv-incl .v2-site-bluecard h3 { letter-spacing: -.04em; line-height: 1; }
/* Solid white, not the shared 90%: on the comp's #0078cd that is 4.60:1 and
   passes AA, where 90% on the live --blue was 3.69:1 and did not. */
.v2-site-pyv-incl .v2-site-bluecard p { color: #fff; }

/* --- Testimonials: three static cards (3747:4514) ----------------------- */
.v2-site-pyv-stories { background: #f4f7fa; }
.v2-site-pyv-stories .v2-site-h2 { color: #003e6b; letter-spacing: -.04em; line-height: 1; }
.v2-site-pyv-stories .v2-site-head p {
  color: #003e6b; margin-top: 8px; max-width: 680px; margin-inline: auto;  /* 8 / 680 */
}
.v2-site-pyv-stories .v2-site-rev {
  padding: 32px; border-radius: 24px;                                   /* 32 / 24 */
  box-shadow: 0 16px 32px rgba(0, 62, 107, .05);
}
/* The mark is a child of the card in the comp and overhangs its top edge; the
   card does not clip. -11 is the drawn glyph, not the 32x32 frame around it. */
.v2-site-pyv-stories .v2-site-rev__mark {
  top: -11px; left: 33px; width: 32px; height: 23px;                    /* 32x22.9 */
}
.v2-site-pyv-stories .v2-site-rev__hd { margin-bottom: 16px; }          /* 16 */
.v2-site-pyv-stories .v2-site-rev__av {
  width: 40px; height: 40px; flex: 0 0 40px;                            /* 40 */
  background: #edf7fd; color: #0078cd; font-size: 16px;
}
.v2-site-pyv-stories .v2-site-rev__name { color: #003e6b; font-size: 20px; line-height: 1.5; }  /* 20/30 */
.v2-site-pyv-stories .v2-site-rev__loc { color: #0078cd; font-size: 16px; line-height: 1.25; }
.v2-site-pyv-stories .v2-site-rev__g { width: 32px; height: 32px; flex: 0 0 32px; }  /* 32 */
/* 7px of tracking, not the comp's 4: the star glyph's own advance is 15, so 4
   gives a 95-wide row against the comp's 106. */
.v2-site-pyv-stories .v2-site-rev__stars {
  font-size: 18px; letter-spacing: 7px; color: #fbab18;                 /* 18, pitch 22 */
  line-height: 1; margin-bottom: 16px;                                  /* 16 */
}
/* The comp's quote is #003e6b at 70% opacity, which composites to #4d7897 —
   LIGHTER than the live --ink-soft, not darker. */
.v2-site-pyv-stories .v2-site-rev blockquote {
  border-top-color: rgba(0, 62, 107, .1); padding-top: 16px;            /* 16 */
  color: #4d7897; line-height: 1.5;
}

/* --- FAQ (3747:4615) — the same comp as /obamacare's ------------------- */
.v2-site-pyv-faq .v2-site-h2 { color: #003e6b; letter-spacing: -.04em; line-height: 1; }
.v2-site-pyv-faq .v2-site-head p { color: #003e6b; margin-top: 8px; }   /* 8 */
/* 30/16: only the TOP stroke is drawn inside the box (individualStrokeWeights
   top 2, the other three 0), so only padding-top loses its 2px. */
.v2-site-pyv-faq .v2-site-acc {
  max-width: 1080px; margin-inline: auto;                               /* 1080 */
  padding: 30px 16px 0;                                                 /* 32 / 16 */
  border-top: 2px solid #0078cd; border-radius: 32px 32px 0 0;          /* 2 / 32 */
  display: flex; flex-direction: column; gap: 12px;                     /* 12 */
}
.v2-site-pyv-faq .v2-site-q {
  border-radius: 12px; border-color: rgba(0, 120, 205, .15);            /* 12 */
  box-shadow: none; margin-bottom: 0;
}
.v2-site-pyv-faq .v2-site-q > summary {
  padding: 15px; gap: 12px; color: #003e6b;                             /* 16 / 12 incl. border */
}
.v2-site-pyv-faq .v2-site-q__a { padding: 0 15px 16px; }                /* line up with the question */
.v2-site-pyv-faq .v2-site-q > summary svg {
  width: 16px; height: 16px; flex: 0 0 16px;                            /* 16 */
  stroke: #0078cd; stroke-width: 2; stroke-linecap: round;
}

/* --- CTA band (5081:8391) ----------------------------------------------
   1872 inside the comp's 24 gutter, against the 1792 the shared wrap gives it.
   The width/margin pair re-centres it on the viewport and cannot overflow a
   narrower one. This band is 172 tall like /obamacare's, but its section is 286
   (57 above and below, not 28) and it carries a second copy column. */
.v2-site--pyv .v2-site-cta {
  width: min(1872px, 100vw - 48px);                                     /* 1872 */
  margin: 57px calc((100% - min(1872px, 100vw - 48px)) / 2);            /* 57 */
}
.v2-site--pyv .v2-site-cta__bar {
  border-radius: 32px; background-color: #0078cd;                       /* 32 */
  position: relative; overflow: hidden;
  /* Ellipse 67 and 68 are concentric at (1078,101) of the band, r 101 and 158,
     white at 6% — the glow the fairy stands in. */
  background-image:
    radial-gradient(circle 5.26vw at 57.59% 58.72%, rgba(255, 255, 255, .06) 100%, transparent 0),
    radial-gradient(circle 8.23vw at 57.59% 58.72%, rgba(255, 255, 255, .06) 100%, transparent 0),
    url("../images/v2/site/shared/cta-band-bg.webp");
  background-repeat: no-repeat; background-position: center;
  background-size: auto, auto, cover;
}
/* The wand star is a child of the band and clipped by it. Its node is rotated
   -30deg, so the 209.7x257 box is the UNROTATED one: the painted star is
   150.5x206 about the same centre. Same art as /obamacare's band. */
.v2-site--pyv .v2-site-cta__bar::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 47.79%; top: 8.43%;                                             /* 894.6 of 1872, 14.5 of 172 */
  width: 8.039%; aspect-ratio: 150.5 / 206;
  background: url("../images/v2/site/shared/cta-wand-star.svg") no-repeat top center / contain;
}
/* The two white sparkle stars are the band's LAST children — they paint over
   the copy, not under it. Rotated too: the group's 540.7x92.7 box renders 529x77. */
.v2-site--pyv .v2-site-cta__bar::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  left: -.061%; top: 65.61%;                                            /* -1.15, 112.85 */
  width: 28.26%; aspect-ratio: 529 / 77;
  background: url("../images/v2/site/plan-your-future/cta-sparkles.svg") no-repeat center / contain;
}
/* She is a child of the SECTION, a sibling of the band, so she is not clipped:
   63 proud above it and 63 below. */
.v2-site--pyv .v2-site-cta__fairy {
  left: 50.3%; right: auto; top: -63px; bottom: auto;                   /* 942.4 of 1872, -63 */
  width: 11.645%; z-index: 4;                                           /* 218 of 1872 */
}
.v2-site--pyv .v2-site-cta__copy,
.v2-site--pyv .v2-site-cta .v2-site-actions { position: relative; z-index: 2; }
.v2-site--pyv .v2-site-cta h2 { letter-spacing: -.04em; line-height: 1; }
/* The second sentence is its own smaller, letter-spaced line in the comp. */
.v2-site--pyv .v2-site-cta__sub {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  line-height: 1; color: #fff;
}
.v2-site--pyv .v2-site-cta__copy p { color: #fff; }
.v2-site--pyv .v2-site-cta .v2-site-btn { color: #003e6b; }
.v2-site--pyv .v2-site-cta .v2-site-btn--yellow { background: #ffeb00; gap: 8px; }  /* 8 */
.v2-site--pyv .v2-site-cta .v2-site-btn--yellow .v2-site-btn__ico {
  width: 20px; height: 20px; flex: 0 0 20px;                            /* 20 */
  background: none; color: #003e6b; margin: 0; position: static; transform: none;
}
.v2-site--pyv .v2-site-cta .v2-site-btn--yellow .v2-site-btn__ico svg { width: 20px; height: 20px; }
/* The comp's secondary pill has no icon at all. */
.v2-site--pyv .v2-site-cta .v2-site-btn--white .v2-site-btn__ico { display: none; }
/* The sitewide focus ring is --blue-bright, 1.1:1 on this blue. */
.v2-site--pyv .v2-site-cta :focus-visible { outline-color: #fff; }

/* ======================= DESKTOP (the 1920 comp) ======================== */
@media (min-width: 1024px) {
  .v2-site--pyv .v2-site-sec { padding-block: 96px; }                   /* 96 */

  /* Hero — the comp's column is 102.4 below the header, one 64px line, then
     16 to the sub and 109 to the buttons, leaving the shared 48 at the foot. */
  .v2-site--pyv .v2-site-chero { min-height: clamp(400px, 23.72vw, 455px); }  /* 455.4 */
  .v2-site--pyv .v2-site-chero__in { padding: 102px 24px 48px; }        /* 102.4 / 48 */
  .v2-site--pyv .v2-site-chero__fairy { top: -1px; }                    /* 119 - 120.6 */
  .v2-site--pyv .v2-site-chero__actions { margin-top: 109px; }          /* 472 - 363 */
  /* 840 with the tracking removed, and greedy: the shared rule balances both
     lines, which moves the break two words earlier than the comp's. */
  .v2-site.v2-site--pyv .v2-site-chero__sub { max-width: 840px; text-wrap: wrap; }  /* 792 */

  /* Intro — 1480 box, 704 | 72 | 704, columns top-aligned. */
  .v2-site-pyv-intro .v2-site-wrap--wide { max-width: 1528px; }         /* 1480 + 2x24 */
  .v2-site-pyv-intro .v2-site-grid--2 {
    grid-template-columns: minmax(0, 704fr) minmax(0, 704fr);           /* 704 | 704 */
    gap: 72px; align-items: start;                                      /* 72 */
  }
  /* The comp breaks the heading after the dash, where its colour changes. */
  .v2-site-pyv-intro .v2-site-h2 { font-size: 48px; }                   /* 48/48 */
  .v2-site-pyv-intro .v2-site-h2 em { display: block; }
  .v2-site-pyv-intro .v2-site-rule { margin: 16px 0 40px; }             /* 16 / 40 */
  .v2-site-pyv-intro .v2-site-grid > div > p {
    font-size: 20px; line-height: 30px; letter-spacing: -.02em;         /* 20/30 */
    margin-bottom: 40px;                                                /* 40 */
  }
  .v2-site-pyv-intro .v2-site-grid > div > p > b { display: block; }
  .v2-site-pyv-intro .v2-site-grid > div > p:first-of-type > b {
    font-size: 30px; margin-bottom: 16px;                               /* 30/30, 16 */
  }
  /* 23, not the comp's 24: at 24 this string is 2.01 lines in a 704 box and
     sets as three against the comp's two. */
  .v2-site-pyv-intro .v2-site-grid > div > p:nth-of-type(2) > b {
    font-size: 23px; margin-bottom: 8px;                                /* 24/24, 8 */
  }
  .v2-site-pyv-intro .v2-site-grid > div > p:nth-of-type(2) { margin-bottom: 24px; }  /* 24 */
  .v2-site-pyv-intro .v2-site-callout b {
    display: block; font-size: 30px; margin-bottom: 16px;               /* 30/30, 16 */
  }
  /* 22, not 24: the comp's own box is 656 and this sentence needs 694 at 24. */
  .v2-site-pyv-intro .v2-site-grid > div > p.v2-site-callout { font-size: 22px; line-height: 36px; }  /* 24/36 */
  .v2-site-pyv-intro .v2-site-prod__photo {
    width: 80.11%; margin-left: 12.34%; justify-self: start;            /* 564 / 86.9 of 704 */
  }

  /* Why choose — 1780 box, five 343.2 cards, icon above the text. */
  .v2-site-pyv-why .v2-site-wrap--wide { max-width: 1828px; }           /* 1780 + 2x24 */
  .v2-site-pyv-why {
    background: linear-gradient(180deg, #f4f7fa 0, rgba(244, 247, 250, 0) 149px) #fff;
    border-block: 1px solid rgba(0, 120, 205, .15);
  }
  .v2-site-pyv-why .v2-site-head { max-width: 956px; margin-bottom: 56px; }  /* 956 / 56 */
  .v2-site-pyv-why .v2-site-head p { max-width: 680px; margin-inline: auto;  /* 680 */
    font-size: 20px; line-height: 1.5; }                                /* 20/30 */
  .v2-site-pyv-why .v2-site-h2 { font-size: 48px; }                     /* 48/48 */
  .v2-site-pyv-why .v2-site-grid { gap: 16px; }                         /* 16 */
  .v2-site-pyv-why .v2-site-card { padding: 31px; min-height: 233px; }  /* 32 incl. border, 233 */
  .v2-site-pyv-why .v2-site-star { flex-direction: column; gap: 16px; } /* 16 */
  .v2-site-pyv-why .v2-site-star__ico {
    width: 40px; height: 40px; flex: 0 0 40px;                          /* 40 */
    background: none; border-radius: 0;
  }
  .v2-site-pyv-why .v2-site-card__t { font-size: 24px; line-height: 1; margin-bottom: 8px; }  /* 24/24, 8 */
  .v2-site-pyv-why .v2-site-card p { font-size: 18px; line-height: 1.5; }  /* 18/27 */

  /* What's included — 1480 box split 452 | 64 | 964, copy left. The columns are
     shares, not px: the comp's fixed axis is the 964 grid and a px track
     collapsed the cards to 222 at 1024. */
  .v2-site-pyv-incl .v2-site-wrap--wide {
    max-width: 1528px;                                                  /* 1480 + 2x24 */
    display: grid; align-items: start;
    grid-template-columns: 30.54% minmax(0, 1fr);                       /* 452 of 1480 */
    column-gap: 4.3243%;                                                /* 64 of 1480 */
  }
  .v2-site-pyv-incl .v2-site-head {
    max-width: none; margin: 0; text-align: left;
  }
  .v2-site-pyv-incl .v2-site-h2 { font-size: 48px; }                    /* 48/48 */
  /* The comp's break coincides with the colour change; the natural one strands
     a blue "IN" at the end of the navy line. */
  .v2-site-pyv-incl .v2-site-h2 em { display: block; }
  .v2-site-pyv-incl .v2-site-head p { font-size: 20px; line-height: 30px; }  /* 20/30 */
  .v2-site-pyv-incl .v2-site-bluecard h3 { font-size: 24px; }           /* 24/24 */
  .v2-site-pyv-incl .v2-site-bluecard p { font-size: 20px; line-height: 30px; }  /* 20/30 */

  /* Testimonials — 1780 box, three 577.33 cards. */
  .v2-site-pyv-stories .v2-site-wrap--wide { max-width: 1828px; }       /* 1780 + 2x24 */
  .v2-site-pyv-stories .v2-site-head { max-width: 834px; margin-bottom: 40px; }  /* 834, 56 less the card's 16 */
  .v2-site-pyv-stories .v2-site-h2 { font-size: 48px; }                 /* 48/48 */
  .v2-site-pyv-stories .v2-site-head p { font-size: 20px; line-height: 1.5; }  /* 20/30 */
  .v2-site-pyv-stories .v2-site-rev blockquote { font-size: 18px; }     /* 18/27 */

  /* FAQ — a 1640 header over a 1080 column. */
  .v2-site-pyv-faq .v2-site-wrap { max-width: 1688px; }                 /* 1640 + 2x24 */
  .v2-site-pyv-faq .v2-site-head { max-width: 1640px; margin-bottom: 56px; }  /* 1640 / 56 */
  .v2-site-pyv-faq .v2-site-head p { max-width: 680px; margin-inline: auto;   /* 680 */
    font-size: 20px; line-height: 1.5; }                                /* 20/30 */
  .v2-site-pyv-faq .v2-site-h2 { font-size: 48px; }                     /* 48/48 */
  .v2-site-pyv-faq .v2-site-q > summary { font-size: 18px; line-height: 1.5; }  /* 18/27 */

  /* CTA band — headline 527 and the paragraph 238 side by side at the left,
     buttons right, the art standing in the gap between them. */
  .v2-site--pyv .v2-site-cta__bar {
    min-height: 172px; padding: 24px 60px 24px 55px;                    /* 172, 60 / 55 */
    align-items: center; justify-content: space-between; gap: 24px 0;
    /* The comp's four columns need 1451px and the band is 976 at 1024, where
       `nowrap` put the second button 125px outside it and overflow:hidden ate
       it. The row wraps instead: one line at 1920, actions under the copy
       below ~1570. She is pinned in px so she does not drift when it does. */
    flex-wrap: wrap;
  }
  .v2-site--pyv .v2-site-cta__copy {
    flex: 0 1 auto; display: flex; align-items: flex-start; gap: 45px;  /* 45 */
  }
  .v2-site--pyv .v2-site-cta h2 { font-size: 40px; max-width: 527px; }  /* 40/40, 527 */
  .v2-site--pyv .v2-site-cta__sub {
    font-size: 24px; letter-spacing: 1.92px; margin-top: 15px;          /* 24/24, 15 */
  }
  /* 238, not the comp's 244: any wider and the copy runs under the wand star,
     whose left edge is at 865 of the band. */
  .v2-site--pyv .v2-site-cta__copy p {
    font-size: 20px; line-height: 25px; width: 238px; margin: 0;        /* 20/25 */
  }
  .v2-site--pyv .v2-site-cta .v2-site-actions {
    flex: 0 0 auto; flex-direction: row; align-items: center; gap: 16px;  /* 16 */
  }
  .v2-site--pyv .v2-site-cta .v2-site-btn--yellow { min-width: 256px; padding-inline: 32px; }  /* 256 / 32 */
  .v2-site--pyv .v2-site-cta .v2-site-btn--white { min-width: 254px; padding-inline: 30px; justify-content: center; }  /* 254 / 30 */
}

/* ======================== PHONE (the 375 comp) =========================== */
@media (max-width: 1023px) {
  /* Every phone section on this artboard is 327 inside a 24 gutter. */
  .v2-site--pyv .v2-site-wrap { padding-inline: 24px; }                 /* 24 */
  .v2-site--pyv .v2-site-sec { padding-block: 48px; }                   /* 48 */

  /* Hero — 576 with the 105 header over it, so 471 of band. */
  .v2-site.v2-site--pyv .v2-site-chero h1 { font-size: 48px; max-width: 353px; }  /* 48/48 */
  .v2-site.v2-site--pyv .v2-site-chero__sub { max-width: min(353px, calc(100vw - 22px)); }  /* 353 */
  .v2-site--pyv .v2-site-chero__actions { margin-top: 9px; }            /* 321 - 312 */
  .v2-site--pyv .v2-site-chero__in { padding: 14px 2px 36vw; }          /* 135 at 375 */
  .v2-site--pyv .v2-site-chero__fairy--l { top: auto; bottom: -38.51vw; }  /* 144.4 at 375 */
  .v2-site--pyv .v2-site-chero__fairy--r { top: auto; bottom: -38.93vw; }  /* 146 at 375 */

  /* Intro — one column, the photo last, no tilt. */
  .v2-site-pyv-intro .v2-site-grid--2 { grid-template-columns: minmax(0, 1fr); gap: 72px; }  /* 72 */
  .v2-site-pyv-intro .v2-site-h2 { font-size: 32px; font-weight: 800; letter-spacing: -.05em; }  /* 32/32 */
  .v2-site-pyv-intro .v2-site-h2 em { display: inline; }
  .v2-site-pyv-intro .v2-site-rule { margin: 8px 0 48px; }              /* 8 / 48 */
  .v2-site-pyv-intro .v2-site-grid > div > p {
    font-size: 18px; line-height: 27px; letter-spacing: -.02em;         /* 18/27 */
    margin-bottom: 24px;                                                /* 24 */
  }
  /* The phone comp runs each block as one flat paragraph, so the sub-head is
     body copy here — only the callout's keeps its weight. */
  .v2-site-pyv-intro .v2-site-grid > div > p > b {
    font-family: var(--body); font-weight: 400; text-transform: none;
    letter-spacing: -.02em; font-size: 18px; line-height: 27px;
  }
  .v2-site-pyv-intro .v2-site-grid > div > p.v2-site-callout {
    background: #f4f7fa; border-left: 6px solid #0078cd;                /* 6 INSIDE */
    border-radius: 16px; padding: 24px 24px 24px 18px;                  /* 24, less the 6 */
    font-size: 16px; line-height: 24px; letter-spacing: -.02em; font-weight: 400;  /* 16/24 */
  }
  .v2-site-pyv-intro .v2-site-callout b { font-weight: 700; }
  .v2-site-pyv-intro .v2-site-prod__photo {
    width: 100%; margin-left: 0; aspect-ratio: 327 / 250;               /* 327x250 */
    object-fit: cover; border-radius: 32px;                             /* 32 */
  }

  /* Why choose — flat tint, no hairline, the icon back beside the text on the
     comp's yellow plate. Each card keeps its own glyph: the phone comp swaps
     all five for one generic star, which reads as an unfinished mock. */
  .v2-site-pyv-why { background: #f4f7fa; border-block: 0; }
  .v2-site-pyv-why .v2-site-head { margin-bottom: 48px; }               /* 48 */
  .v2-site-pyv-why .v2-site-h2 { font-size: 30px; font-weight: 800; letter-spacing: -.04em; }  /* 30/30 */
  .v2-site-pyv-why .v2-site-h2 br { display: none; }
  .v2-site-pyv-why .v2-site-head p { font-size: 18px; line-height: 1.5; }  /* 18/27 */
  .v2-site-pyv-why .v2-site-grid { gap: 20px; }                         /* 20 */
  .v2-site-pyv-why .v2-site-card { padding: 23px; }                     /* 24 incl. border */
  .v2-site-pyv-why .v2-site-star { gap: 16px; }                         /* 16 */
  .v2-site-pyv-why .v2-site-star__ico {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 100px;    /* 40 */
    background: rgba(255, 235, 0, .2); padding: 8px;                    /* #ffeb00 @20% */
  }
  /* The comp swaps all five glyphs for one generic star here; each card keeps
     its own, as on /individual-family-health-plans — but the plate and the
     amber glyph are the comp's. */
  .v2-site-pyv-why .v2-site-star__ico::before { background-color: #fbab18; }  /* 24x24 */
  .v2-site-pyv-why .v2-site-card__t {
    font-size: 20px; line-height: 1.5; text-transform: none;            /* 20/30 */
    letter-spacing: 0; margin-bottom: 8px;
  }
  .v2-site-pyv-why .v2-site-card p { font-size: 16px; line-height: 1.25; }  /* 16/20 */

  /* What's included — stacked, head centred. */
  .v2-site-pyv-incl .v2-site-head { margin-bottom: 48px; }              /* 48 */
  .v2-site-pyv-incl .v2-site-h2 { font-size: 30px; font-weight: 800; letter-spacing: -.04em; }  /* 30/30 */
  .v2-site-pyv-incl .v2-site-head p { font-size: 18px; line-height: 27px; }  /* 18/27 */
  .v2-site-pyv-incl .v2-site-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .v2-site-pyv-incl .v2-site-bluecard h3 { font-size: 20px; }           /* 20/20 */
  .v2-site-pyv-incl .v2-site-bluecard p { font-size: 18px; line-height: 27px; }  /* 18/27 */

  /* Testimonials — one column. */
  .v2-site-pyv-stories .v2-site-head { margin-bottom: 32px; }           /* 48 less the card's 16 */
  .v2-site-pyv-stories .v2-site-h2 { font-size: 30px; font-weight: 800; letter-spacing: -.04em; }  /* 30/30 */
  .v2-site-pyv-stories .v2-site-head p { font-size: 18px; line-height: 1.5; }  /* 18/27 */
  .v2-site-pyv-stories .v2-site-grid--3 { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }  /* 24 less the card's 16 */
  .v2-site-pyv-stories .v2-site-rev blockquote { font-size: 16px; line-height: 1.25; }  /* 16/20 */

  /* FAQ. */
  .v2-site-pyv-faq .v2-site-head { margin-bottom: 48px; }               /* 48 */
  .v2-site-pyv-faq .v2-site-h2 { font-size: 30px; font-weight: 800; letter-spacing: -.04em; }  /* 30/30 */
  .v2-site-pyv-faq .v2-site-head p { font-size: 18px; line-height: 1.5; max-width: none; }  /* 18/27 */
  .v2-site-pyv-faq .v2-site-q > summary { font-size: 16px; line-height: 1.25; }  /* 16/20 */

  /* CTA band — 327 card, 48 clear above and below, and here the fairy IS a
     child of the band in the comp, cut off by its bottom edge. The live art is
     a sibling, so she is placed inside the bar's box instead and the bar
     reserves her height. */
  .v2-site--pyv .v2-site-cta {
    width: auto; margin: 48px 0; padding-top: 0;                        /* 48 */
  }
  .v2-site--pyv .v2-site-cta__bar {
    padding: 39px 24px 255px; text-align: left;                         /* 39 / 24 */
  }
  .v2-site--pyv .v2-site-cta h2 { font-size: 30px; letter-spacing: -1.2px; }  /* 30/30 */
  .v2-site--pyv .v2-site-cta__sub {
    font-size: 18px; line-height: 1.1; letter-spacing: 1.08px; margin-top: 8px;  /* 18/19.8, 8 */
  }
  .v2-site--pyv .v2-site-cta__copy p {
    font-size: 18px; line-height: 27px; width: auto; margin-top: 19px;  /* 18/27, 19 */
  }
  .v2-site--pyv .v2-site-cta .v2-site-actions { gap: 8px; margin-top: 28px; }  /* 8 */
  .v2-site--pyv .v2-site-cta .v2-site-btn--white { min-width: 0; }
  /* The phone comp re-cuts her to 231x240; the shared <img> is the desktop
     700x957 crop, which at 231 wide stands 316 tall and climbs over the second
     button. She is drawn from the phone asset instead, inside the band, with
     the bar's bottom padding reserving her height. */
  .v2-site--pyv .v2-site-cta__fairy { display: none; }
  .v2-site--pyv .v2-site-cta__bar::before {
    left: -1.5%; top: auto; bottom: -10.7%;                             /* -5 of 327 */
    width: 64.2%; aspect-ratio: 210 / 257;
  }
  .v2-site--pyv .v2-site-cta__bar::after {
    display: block; z-index: 2;
    left: 26.3%; top: auto; bottom: 0;                                  /* 86 of 327 */
    width: 70.6%; aspect-ratio: 231 / 240;                              /* 231x240 */
    background: url("../images/v2/site/shared/cta-fairy-mobile.webp") no-repeat bottom center / contain;
  }
}

/* ==========================================================================
   48. Enrollment deadlines (/enrollment-deadlines) — 2026 redesign
   ==========================================================================
   Figma 5078:6049 (1920 desktop) and 5078:7254 (375 phone).

   Three things the comp changes structurally, all done in markup:
   the hero is the full chero (title, pink kicker, sub, two buttons) where the
   page had the plain page_head; the first table is drawn as six CARDS that
   repeat each column's head as a coloured pill, so the <table> stays and its
   `data-label`s become those pills at every width rather than only below 640;
   and "How the timeline works" is the site's own carousel, whose arrows the
   /v2 shell already drives off `data-rail`.

   Section canvases, each its own: intro 1480 with 64/64 padding, key dates
   1480 on #edf7fd, the state table 1480 on white, the timeline 1480 on
   #f4f7fa, the CTA band 1872x250. The phone gutter here is 16, not the 24 of
   the other 2026 pages, and the phone cards are left-aligned where the desktop
   ones centre. Desktop sits in min-width:1024 and the phone in max-width:1023
   so neither can out-specify the other. */

/* --- Hero (5078:6050) ---------------------------------------------------
   The plate keeps the shared `cover` / `center top`, as on
   /individual-family-health-plans (client, 2026-10-17). */
/* The whole title is blue here, not the two-tone of the other heroes. */
.v2-site--cal .v2-site-chero h1 { color: #0078cd; line-height: 1; }     /* 64/64 */
.v2-site--cal .v2-site-chero__kicker {
  color: #ff399e; line-height: 1;                                       /* 30/30 */
  margin: 0;
}
.v2-site--cal .v2-site-chero__sub { letter-spacing: 0; line-height: 1.5; }  /* 20/30 */
.v2-site--cal .v2-site-chero__btn { padding-top: 4px; }

/* --- Intro (5078:6155) and the two section heads ----------------------- */
.v2-site-cal-intro .v2-site-h2,
.v2-site-cal-key .v2-site-h2,
.v2-site-cal-state .v2-site-h2,
.v2-site-cal-tl .v2-site-h2 { color: #003e6b; letter-spacing: -.04em; line-height: 1; }
.v2-site-cal-intro .v2-site-head p { color: #003e6b; margin-top: 16px; }  /* 16 */
/* The comp's star field and the two fairies that flank the header. All three
   are children of the section and clipped by it — the fairies' heads are cut
   by its top edge, which is why the section needs the overflow. */
.v2-site-cal-key {
  background: #edf7fd url("../images/v2/site/enrollment-deadlines/kd-stars.webp") no-repeat;
  background-size: 132% auto; background-position: -18.7% -52%;        /* 2541 of 1920 */
  position: relative; overflow: hidden;
}
.v2-site-cal-key::before,
.v2-site-cal-key::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-size: contain;
}
.v2-site-cal-key::before {
  left: 11.25%; top: -5.4%;                                             /* 216, -51 */
  width: 23.95%; aspect-ratio: 459.9 / 507.3;                           /* 459.9 of 1920 */
  background-image: url("../images/v2/site/enrollment-deadlines/kd-fairy-l.webp");
}
.v2-site-cal-key::after {
  left: 66.15%; top: -6.2%;                                             /* 1270, -59 */
  width: 21.83%; aspect-ratio: 419.1 / 503.9;                           /* 419.1 of 1920 */
  background-image: url("../images/v2/site/enrollment-deadlines/kd-fairy-r.webp");
}
.v2-site-cal-key > .v2-site-wrap { position: relative; z-index: 1; }
.v2-site-cal-tl { background: #f4f7fa; }                                /* #f4f7fa */
.v2-site-cal-state { background: #fff; }
.v2-site-cal-key .v2-site-topic__rule,
.v2-site-cal-state .v2-site-topic__rule,
.v2-site-cal-tl .v2-site-topic__rule {
  width: 60px; background: #00b6ed; margin: 8px 0 0;                    /* 60x4, 8 */
}
.v2-site-cal-key .v2-site-head .v2-site-topic__rule { margin-inline: auto; }

/* --- Key dates: the table drawn as the comp's six cards (5078:6168) -----
   The <table> stays — it is tabular data and the SEO lead reads this page —
   so tbody becomes the grid, each row a card, and each cell's `data-label`
   the pill above it. The shared ≤640 version of this is in §20. */
.v2-site-cal-cards { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
.v2-site-cal-cards .v2-site-tbl { min-width: 0; }
.v2-site-cal-cards .v2-site-tbl thead { display: none; }
.v2-site-cal-cards .v2-site-tbl tbody { display: grid; gap: 20px; }     /* 20 */
.v2-site-cal-cards .v2-site-tbl tr {
  display: block; background: #fff; border-radius: 16px;                /* 16 */
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  border-top: 0;
}
.v2-site-cal-cards .v2-site-tbl tbody tr:nth-child(odd) { background: #fff; }
.v2-site-cal-cards .v2-site-tbl td {
  display: block; width: auto; padding: 0; border: 0; color: #003e6b;
}
/* Pill: 30 tall, 6/12 padding, the label's own colour at 10-20% behind it. */
.v2-site-cal-cards .v2-site-tbl td[data-label]::before {
  /* flex + fit-content, not inline-flex: the pill sits on its own line above
     the cell's text, as the comp draws it. */
  content: attr(data-label); display: flex; width: fit-content; align-items: center;
  height: 30px; padding: 0 12px; border-radius: 999px;                  /* 30, 6/12 */
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 14px; line-height: 1; letter-spacing: 0;                   /* 14/17.5 */
  background-repeat: no-repeat; background-position: left 12px center;
  background-size: 16px 16px;                                           /* 16 */
}
.v2-site-cal-cards .v2-site-tbl td[data-label]:nth-child(1)::before {
  color: #0078cd; background-color: rgba(0, 182, 237, .1);              /* #00b6ed @10% */
  padding-left: 36px;                                                   /* 12 + 16 + 8 */
  background-image: url("../images/v2/site/enrollment-deadlines/icon-calendar.svg");
}
.v2-site-cal-cards .v2-site-tbl td[data-label]:nth-child(2)::before {
  color: #7cc242; background-color: rgba(124, 194, 66, .2);             /* #7cc242 @20% */
}
.v2-site-cal-cards .v2-site-tbl td[data-label]:nth-child(3)::before {
  color: #ff399e; background-color: rgba(255, 57, 158, .2);             /* #ff399e @20% */
  padding-left: 36px;
  background-image: url("../images/v2/site/enrollment-deadlines/icon-bell.svg");
}
.v2-site-cal-cards .v2-site-tbl td:nth-child(1) {
  font-weight: 700; font-size: 24px; line-height: 1;                    /* 24/24 */
}
.v2-site-cal-cards .v2-site-tbl td:nth-child(n + 2) {
  font-size: 18px; line-height: 1;                                      /* 18/18 */
}
.v2-site-cal-cards .v2-site-tbl td[data-label]::before { margin-bottom: 16px; }     /* 16 */
.v2-site-cal-cards .v2-site-tbl td + td { margin-top: 24px; }           /* 24 */

/* --- The timeline carousel (5078:6257) ---------------------------------
   Both arrows are white with a blue chevron on both artboards; the shared
   component fills the second one solid blue. */
.v2-site-cal-tl .v2-site-carousel__hd { align-items: flex-start; }
.v2-site-cal-tl .v2-site-carousel__btn,
.v2-site-cal-tl .v2-site-carousel__btn:last-child {
  background: #fff; color: #0078cd;
}
.v2-site-cal-tl .v2-site-carousel__track { gap: 20px; }                 /* 20 */

/* --- CTA band (5078:6315) ----------------------------------------------
   1872x250 inside the comp's 24 gutter, 32 clear above and below, and the
   fairy is 450 tall against the band's 250 — she overhangs 100 top and
   bottom, so she stays on the wrapper where nothing clips her. */
.v2-site--cal .v2-site-cta {
  width: min(1872px, 100vw - 48px);                                     /* 1872 */
  margin: 32px calc((100% - min(1872px, 100vw - 48px)) / 2);            /* 32 */
}
.v2-site--cal .v2-site-cta__bar {
  border-radius: 32px; background-color: #0078cd;                       /* 32 */
}
.v2-site--cal .v2-site-cta h2 { letter-spacing: -.04em; line-height: 1; }
.v2-site--cal .v2-site-cta__copy p { color: #fff; }
.v2-site--cal .v2-site-cta .v2-site-btn { color: #003e6b; }
.v2-site--cal .v2-site-cta .v2-site-btn--yellow { background: #ffeb00; }
.v2-site--cal .v2-site-cta :focus-visible { outline-color: #fff; }
/* The comp's yellow pill carries a bare 20px glyph and its white pill none. */
.v2-site--cal .v2-site-cta .v2-site-btn--yellow { gap: 8px; }
.v2-site--cal .v2-site-cta .v2-site-btn--yellow .v2-site-btn__ico {
  width: 20px; height: 20px; flex: 0 0 20px;                            /* 20 */
  background: none; color: #003e6b; margin: 0; position: static; transform: none;
}
.v2-site--cal .v2-site-cta .v2-site-btn--yellow .v2-site-btn__ico svg { width: 20px; height: 20px; }
.v2-site--cal .v2-site-cta .v2-site-btn--white .v2-site-btn__ico { display: none; }
.v2-site--cal .v2-site-cta .v2-site-btn--white { justify-content: center; }

/* ======================= DESKTOP (the 1920 comp) ======================== */
@media (min-width: 1024px) {
  .v2-site--cal .v2-site-sec { padding-block: 96px; }                   /* 96 */
  .v2-site-cal-intro { padding-block: 64px; }                           /* 64 */
  .v2-site--cal .v2-site-sec .v2-site-wrap--wide { max-width: 1528px; } /* 1480 + 2x24 */

  /* Hero — the copy column is 93.4 below the header and the buttons 88 below
     the sub, leaving the shared 48 at the foot. */
  .v2-site--cal .v2-site-chero { min-height: clamp(400px, 23.72vw, 455px); }  /* 455.4 */
  .v2-site--cal .v2-site-chero__in { padding: 93px 24px 48px; }         /* 214 - 120.6 */
  .v2-site--cal .v2-site-chero__fairy { top: -1px; }                    /* 119 - 120.6 */
  .v2-site--cal .v2-site-chero h1 { font-size: 64px; }                  /* 64/64 */
  .v2-site--cal .v2-site-chero__kicker { font-size: 30px; }             /* 30/30 */
  .v2-site.v2-site--cal .v2-site-chero__sub {
    max-width: 840px; text-wrap: wrap; margin-top: 16px;                /* 792 */
  }
  .v2-site--cal .v2-site-chero__actions { margin-top: 88px; }           /* 472 - 384 */

  /* Intro — the title fills the 1480 box, the lede is capped at 680. */
  .v2-site-cal-intro .v2-site-head { max-width: 1480px; margin-bottom: 0; }  /* 1480 */
  .v2-site-cal-intro .v2-site-h2 { font-size: 48px; }                   /* 48/48 */
  .v2-site-cal-intro .v2-site-head p {
    font-size: 20px; line-height: 1.5; max-width: 680px; margin-inline: auto;  /* 20/30 */
  }

  /* Key dates — a centred header, then three 480 cards to a row. */
  .v2-site-cal-key .v2-site-head { max-width: 1480px; margin-bottom: 56px; }  /* 56 */
  .v2-site-cal-key .v2-site-h2 { font-size: 48px; }                     /* 48/48 */
  .v2-site-cal-cards .v2-site-tbl tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2-site-cal-cards .v2-site-tbl tr { padding: 32px 24px; text-align: center; }  /* 32/24 */
  .v2-site-cal-cards .v2-site-tbl td[data-label]::before { margin-inline: auto; }

  /* The state table keeps its table shape — the comp draws it as one — and
     its heading is 36, not the 48 of the other section heads. */
  .v2-site-cal-state .v2-site-h2 { font-size: 36px; }                   /* 36/36 */

  /* Timeline — header left, arrows right, 480 cards on a 20 gap. */
  .v2-site-cal-tl .v2-site-h2 { font-size: 48px; }                      /* 48/48 */
  .v2-site-cal-tl .v2-site-carousel__track > * { flex: 0 0 480px; }     /* 480 */
  /* The comp runs the track past the content box so the next card peeks at the
     viewport edge. `overflow-x: clip` on the section (not hidden — it must not
     become a scroll container) keeps that off the document's own scrollWidth. */
  .v2-site-cal-tl { overflow-x: clip; }
  .v2-site-cal-tl .v2-site-carousel__track {
    margin-right: calc(50% - 50vw); padding-right: calc(50vw - 50%);
  }

  /* CTA — copy inset 378 to clear the fairy, buttons stacked 253 wide. */
  .v2-site--cal .v2-site-cta__bar {
    min-height: 250px; padding: 24px 80px 24px 378px;                   /* 250, 80 / 378 */
    align-items: center;
  }
  .v2-site--cal .v2-site-cta__fairy {
    left: .988%; bottom: auto; top: -40%;                               /* 18.5 of 1872, -100 of 250 */
    width: 16.51%;                                                      /* 309 of 1872 */
  }
  .v2-site--cal .v2-site-cta h2 { font-size: 36px; max-width: 1024px; }  /* 36/36, 1024 */
  .v2-site--cal .v2-site-cta__copy p {
    font-size: 20px; line-height: 1.5; max-width: 863px; margin-top: 8px;  /* 20/30 */
  }
  .v2-site--cal .v2-site-cta .v2-site-actions { gap: 16px; }            /* 16 */
  .v2-site--cal .v2-site-cta .v2-site-btn { min-width: 253px; }         /* 253 */
}

/* ======================== PHONE (the 375 comp) =========================== */
@media (max-width: 1023px) {
  /* This artboard's gutter is 16, not the 24 the other 2026 pages use. */
  /* 24 like the rest of the 2026 phone artboards; only the key-dates section
     is drawn at 16, which is not worth a one-off gutter. Set as the TOKEN, not
     as padding: the shared carousel bleeds itself by `--gutter * -1`, so a
     24px padding against a 30px token overflowed the page by 6. */
  .v2-site--cal { --gutter: 24px; }                                     /* 24 */
  .v2-site--cal .v2-site-sec { padding-block: 48px; }                   /* 48 */

  /* 553 of band below the 105 header; the copy column is 353 at an 11 gutter
     and the buttons sit 48 under the sub. */
  .v2-site--cal .v2-site-chero { min-height: 553px; }                   /* 658 - 105 */
  .v2-site--cal .v2-site-chero__in { padding-top: 32px; }               /* 137 - 105 */
  .v2-site.v2-site--cal .v2-site-chero h1 { font-size: 40px; max-width: 353px; }  /* 40/40, 353 */
  .v2-site--cal .v2-site-chero__kicker { font-size: 20px; max-width: 353px; margin-inline: auto; }  /* 20/20 */
  .v2-site.v2-site--cal .v2-site-chero__sub { max-width: 353px; }       /* 353 */
  .v2-site--cal .v2-site-chero__actions { margin-top: 48px; }           /* 378 - 330 */
  .v2-site--cal .v2-site-chero__btn { width: 292px; max-width: 100%; }  /* 292 */
  .v2-site--cal .v2-site-chero__fairy--l { bottom: -37.44vw; }          /* 140.4 at 375 */
  .v2-site--cal .v2-site-chero__fairy--r { bottom: -37.87vw; }          /* 142 at 375 */

  .v2-site-cal-key .v2-site-h2,
  .v2-site-cal-state .v2-site-h2 { font-size: 36px; font-weight: 800; }  /* 36/36 */
  .v2-site-cal-intro .v2-site-h2 { font-size: 32px; font-weight: 800; }  /* 32/32 */
  .v2-site-cal-tl .v2-site-h2 { font-size: 32px; font-weight: 800; }    /* 32/32 */
  .v2-site--cal .v2-site-cta__copy p { line-height: 1.5; }              /* 18/27 */
  .v2-site-cal-intro .v2-site-head p { font-size: 18px; line-height: 1.5; }  /* 18/27 */

  /* Cards stack and go left-aligned — the phone comp does not centre them. */
  .v2-site-cal-cards .v2-site-tbl tbody { grid-template-columns: minmax(0, 1fr); }
  .v2-site-cal-key .v2-site-wrap { padding-inline: 16px; }              /* 343 at 375 */
  .v2-site-cal-cards .v2-site-tbl tr { padding: 16px 20px; text-align: left; }  /* 16/20 */
  .v2-site-cal-cards .v2-site-tbl td:nth-child(1) { font-size: 20px; line-height: 1.5; }  /* 20/30 */
  .v2-site-cal-cards .v2-site-tbl td:nth-child(n + 2) { font-size: 18px; line-height: 1.5; }  /* 18/27 */
  /* The phone comp drops the colour coding and both icons: all three plates are
     the blue one. Desktop keeps green and pink — the two artboards disagree. */
  .v2-site-cal-cards .v2-site-tbl td[data-label]:nth-child(n)::before {
    color: #0078cd; background-color: rgba(0, 182, 237, .1);            /* #00b6ed @10% */
    background-image: none; padding-left: 12px;                         /* no icon */
  }
  /* Everything inside the phone card is 10 apart. */
  .v2-site-cal-cards .v2-site-tbl td[data-label]::before { margin-bottom: 10px; }  /* 10 */
  .v2-site-cal-cards .v2-site-tbl td + td { margin-top: 10px; }         /* 10 */

  /* The phone comp centres the heading and the arrows above the track and runs
     the cards at the full 327 content width. (The shared [data-rail-wrap]
     phone rules do not apply here: they target a wrapper around the header,
     and this page puts the attribute on the header itself.) */
  .v2-site-cal-tl .v2-site-carousel__hd {
    display: block; text-align: center; margin-bottom: 32px;            /* 32 */
  }
  .v2-site-cal-tl .v2-site-carousel__hd .v2-site-topic__rule { margin-inline: auto; }
  .v2-site-cal-tl .v2-site-carousel__nav { justify-content: center; margin-top: 32px; }  /* 32 */
  .v2-site-cal-tl .v2-site-carousel__btn { width: 53px; height: 53px; }  /* 52.7 */
  .v2-site-cal-tl .v2-site-carousel__track > * { flex: 0 0 327px; }     /* 327 */
  /* The comp keeps the step pill and its date on one row, as on desktop. */
  .v2-site-cal-tl .v2-site-tl__hd { flex-direction: row; align-items: center; gap: 14px; }
  .v2-site-cal-tl .v2-site-tl__when { text-align: right; }

  /* The phone comp keeps both fairies but much smaller, beside the header. */
  .v2-site-cal-key { background-size: 180% auto; background-position: -30% -8%; }
  .v2-site-cal-key::before {
    left: 4.53%; top: 4.86%;                                            /* 17, 108 of 2222 */
    width: 37.55%; aspect-ratio: 140.8 / 155.2;                         /* 140.8 of 375 */
  }
  .v2-site-cal-key::after {
    left: 61.07%; top: 4.86%;                                           /* 229 */
    width: 31.39%; aspect-ratio: 117.7 / 141.6;                         /* 117.7 of 375 */
  }
}

/* ==========================================================================
   49. Why choose Madrinas Insurance (/why-choose-madrinas-insurance)
   ==========================================================================
   Figma 3747:12908 (1920 desktop) and 3747:15247 (375 phone).

   The comp restructures most of this page, so several blocks are markup
   changes rather than CSS: the intro becomes a centred heading over a
   photo-left / copy-right row with a pink mission sub-head and a pink button;
   "What sets us apart" becomes a BLUE slab with translucent cards where the
   build had a pale tint; and the services block becomes a radial arrangement
   of seven cards around a centre column, which is an absolutely positioned
   canvas like /individual-family-health-plans' benefits ring.

   Canvases: the intro, slab and services sections are 1480 (1920 less 220);
   the reviews and FAQ keep their own. Desktop sits in min-width:1024 and the
   phone in max-width:1023 so neither out-specifies the other. */

/* --- Intro: "Protection with heart" (5204:15291) ----------------------- */
.v2-site-why-heart { background: #e5eef4; }                             /* #e5eef4 */
.v2-site-why-heart .v2-site-h2 {
  color: #003e6b; letter-spacing: -.04em; line-height: 1; text-align: center;
}
.v2-site-why-heart .v2-site-h2 em { font-style: normal; color: #0078cd; }
.v2-site-why-heart p { color: #003e6b; }
/* 12px white rim, 32 radius and a wide blue shadow — the comp's own frame. */
.v2-site-why-heart__media {
  margin: 0; border: 12px solid #fff; border-radius: 32px;              /* 12 / 32 */
  box-shadow: 0 8px 100px rgba(38, 145, 234, .28);
  overflow: hidden;
}
.v2-site-why-heart__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-site-why-heart__sub {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1; color: #003e6b;
}
.v2-site-why-heart__sub em { font-style: normal; }
.v2-site-why-heart__cta b { color: #003e6b; }
/* The phone comp boxes the intro into three cards; `display: contents` lets the
   photo and the mission copy sit in one box there and in two different grid
   cells on desktop, off one set of markup. */
.v2-site-why-heart__mcard { display: contents; }
.v2-site-why-heart__seal { display: none; }

/* --- "What sets Madrinas Insurance apart?" - the blue slab (4659:3818) --- */
.v2-site-why-apart { position: relative; overflow: hidden; background: #0078cd; }
.v2-site-why-apart__stars {
  position: absolute; top: 0; right: 0; width: 28.958%; height: auto;    /* 556 of 1920 */
  pointer-events: none; z-index: 0;
}
.v2-site-why-apart__in { position: relative; z-index: 1; margin-inline: auto; }
.v2-site-why-apart .v2-site-h2 { color: #fff; letter-spacing: -.04em; line-height: 1; }
/* The comp paints the whole heading white - no second colour on the emphasis. */
.v2-site-why-apart .v2-site-h2 em { font-style: normal; color: inherit; }
.v2-site-why-apart__aside p { margin: 0; color: #fff; }
.v2-site-why-apart__card {
  background: #1582cf; border: 1px solid rgba(0, 62, 107, .10); border-radius: 16px;
  display: flex; flex-direction: column;
}
.v2-site-why-apart__ico {
  flex: 0 0 auto; display: block; border-radius: 999px;
  background: rgba(255, 255, 255, .20);                                  /* #ffffff @20% */
}
.v2-site-why-apart__card h3 {
  color: #fff; font-weight: 700; text-transform: none; letter-spacing: 0;
}
.v2-site-why-apart__card p { margin: 0; color: #fff; }

/* --- "We got you covered." - the services ring (4478:4815) -------------- */
.v2-site-why-svc { position: relative; overflow: hidden; }
/* The star spray hangs 501 above the section and 45 wide of each edge; the
   section clips it. Figma trims a PNG export to its own content, so these two
   offsets were measured against a render of the comp, not read off the node. */
.v2-site-why-svc__stars {
  position: absolute; top: 0; left: -2.344%; width: 104.688%; height: auto;  /* 2010 at -45 */
  transform: translateY(-43.152%);                                           /* -501 of 1161 */
  pointer-events: none; z-index: 0;
}
.v2-site-why-svc__hd { position: relative; z-index: 1; text-align: center; margin-inline: auto; }
.v2-site-why-svc .v2-site-h2 { letter-spacing: -.04em; line-height: 1; }
.v2-site-why-svc__hd p { margin: 8px 0 0; }
.v2-site-why-ring { position: relative; z-index: 1; }
.v2-site-why-ring__b {
  background: #eaf2f6; border: 1px solid rgba(0, 62, 107, .10); border-radius: 16px;
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.v2-site-why-ring__ico {
  flex: 0 0 auto; display: block; border-radius: 999px; background: var(--blue);
}
.v2-site-why-ring__b h3 {
  color: var(--blue-deep); font-weight: 700; text-transform: none; letter-spacing: 0;
}
.v2-site-why-ring__b p { margin: 0; }
.v2-site-why-ring__core { text-align: center; }
.v2-site-why-ring__core h3 { color: var(--blue-deep); letter-spacing: -.04em; line-height: 1; margin: 0; }
.v2-site-why-ring__core p { margin: 8px 0 0; }
.v2-site-why-ring__fairy { position: absolute; height: auto; z-index: 2; }
/* Both icon sets ship as one-colour SVGs; masking is what lets the plate paint them. */
.v2-site-why-apart__ico::before,
.v2-site-why-ring__ico::before {
  content: ""; display: block; width: 100%; height: 100%; background-color: #fff;
  -webkit-mask: var(--ico) center no-repeat; mask: var(--ico) center no-repeat;
}
.v2-site-why-apart__ico::before {
  -webkit-mask-size: 60%; mask-size: 60%;                                /* 24 of 40 */
}
.v2-site-why-ring__ico::before {
  -webkit-mask-size: 46.667%; mask-size: 46.667%;                        /* 28 of 60 */
}

/* ======================= DESKTOP (the 1920 comp) ======================== */
@media (min-width: 1024px) {
  .v2-site--why .v2-site-sec { padding-block: 96px; }                   /* 96 */
  .v2-site--why .v2-site-sec .v2-site-wrap--wide { max-width: 1528px; } /* 1480 + 2x24 */

  .v2-site-why-heart .v2-site-h2 { font-size: 48px; margin-bottom: 64px; }  /* 48/48, 64 */
  /* The heading spans both columns, the photo holds column 1 and the three copy
     blocks stack down column 2 — the comp's layout, out of the phone's DOM. */
  .v2-site-why-heart__row {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 600fr) minmax(0, 808fr);           /* 600 | 808 */
    column-gap: 72px;                                                   /* 892 - 820 */
  }
  .v2-site-why-heart__intro { display: contents; }
  .v2-site-why-heart .v2-site-h2 { grid-column: 1 / -1; }
  .v2-site-why-heart__media { grid-column: 1; grid-row: 2 / span 3; aspect-ratio: 600 / 450; }
  .v2-site-why-heart__intro p,
  .v2-site-why-heart__mission,
  .v2-site-why-heart__cta { grid-column: 2; }
  .v2-site-why-heart__media { align-self: start; }
  .v2-site-why-heart p { font-size: 20px; line-height: 1.5; margin-bottom: 8px; }  /* 20/30 */
  /* The whole line is pink on the desktop comp; only the second half is on the phone. */
  .v2-site-why-heart__sub, .v2-site-why-heart__sub em {
    font-size: 30px; color: #ff399e;                                    /* 30/30, #ff399e */
  }
  .v2-site-why-heart__sub { margin: 48px 0 16px; }                      /* 48 / 16 */
  .v2-site-why-heart__cta {
    display: flex; align-items: center; gap: 27px; margin-top: 48px;    /* 27 / 48 */
  }
  .v2-site-why-heart__cta .v2-site-btn { min-width: 377px; }            /* 377 */
  .v2-site-why-heart__cta b {
    font-size: 20px; line-height: 1.5; max-width: 404px;                /* 20/30, 404 */
  }

  /* --- Apart slab. The header row sits on the comp's 1480, the cards on its
     1780, so the two rows get different widths inside one section. --- */
  .v2-site-why-apart__in { max-width: 1828px; padding-inline: 24px; }   /* 1780 + 2x24 */
  .v2-site-why-apart__hd {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 534fr) minmax(0, 768fr);           /* 534 | 768 */
    column-gap: 12.027%;                                                /* 178 of 1480 */
    max-width: 1480px; margin: 0 auto 63px;                             /* 1480, 63 */
  }
  .v2-site-why-apart .v2-site-h2 { font-size: clamp(28px, 2.5vw, 48px); }   /* 48/48 */
  .v2-site-why-apart__aside {
    display: flex; align-items: center; gap: clamp(16px, 1.6667vw, 32px);   /* 32 */
  }
  .v2-site-why-apart__aside p {
    flex: 1 1 auto; font-size: clamp(14px, 1.0417vw, 20px); line-height: 1.5;  /* 20/30 */
  }
  .v2-site-why-apart__aside .v2-site-btn { flex: 0 0 auto; white-space: nowrap; }
  .v2-site-why-apart__grid {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px; align-items: center;                                     /* 20, cards centred */
  }
  .v2-site-why-apart__card {
    padding: clamp(20px, 1.6667vw, 32px); gap: clamp(10px, .8333vw, 16px);   /* 32 / 16 */
  }
  .v2-site-why-apart__ico { width: clamp(28px, 2.0833vw, 40px); aspect-ratio: 1; }  /* 40 */
  .v2-site-why-apart__card h3 {
    font-size: clamp(14px, 1.0417vw, 20px); line-height: 1.5; margin: 0 0 8px;   /* 20/30, 8 */
  }
  .v2-site-why-apart__card p { font-size: clamp(13px, .9375vw, 18px); line-height: 1.5; }  /* 18/27 */

  /* --- The ring. Canvas 1920x848.4 - the comp's section less its 281.6 head,
     so every left/top below is the comp's own, as a share of that box. --- */
  .v2-site--why .v2-site-why-svc { padding-block: 95.6px 0; }           /* 95.6 */
  .v2-site-why-svc__hd { max-width: 704px; }                            /* 704 */
  .v2-site-why-svc .v2-site-h2 { font-size: clamp(24px, 2.0833vw, 40px); }  /* 40/40 */
  .v2-site-why-svc__hd p { font-size: clamp(14px, 1.0417vw, 20px); line-height: 1.5; }
  /* The comp's ring is 848.4 tall and holds seven cards. The client split
     "Private & Group" into two (2026-10-17), and the eighth has nowhere to go
     inside the arc -- the fairies and Call now own the bottom centre -- so it
     closes the ring below them, mirroring the Health card at the top centre.
     That is the only change: every other left/top below is still the comp's. */
  .v2-site-why-ring {
    max-width: 1920px; margin: 108px auto 0; aspect-ratio: 1920 / 1114.4;  /* 848.4 + 266 */
  }
  .v2-site-why-ring__b {
    position: absolute; justify-content: center;
    padding: 1.25%; gap: clamp(8px, .625vw, 12px);                      /* 24 of 1920, 12 */
  }
  .v2-site-why-ring__b--0 { left: 40.781%; top: 0;       width: 18.490%; height: 19.652%; }  /* 783, 281.6, 355x219 */
  .v2-site-why-ring__b--1 { left: 21.250%; top: 6.461%;  width: 18.490%; height: 18.934%; }  /* 408, 353.6, 355x211 */
  .v2-site-why-ring__b--2 { left: 60.313%; top: 6.461%;  width: 18.490%; height: 18.934%; }  /* 1158 */
  .v2-site-why-ring__b--3 { left: 13.021%; top: 27.190%; width: 18.490%; height: 18.934%; }  /* 250, 584.6 */
  .v2-site-why-ring__b--6 { left: 69.531%; top: 27.190%; width: 17.448%; height: 19.652%; }  /* 1335, 335x219 */
  .v2-site-why-ring__b--4 { left: 21.250%; top: 47.649%; width: 17.448%; height: 19.383%; }  /* 408, 812.6, 335x216 */
  .v2-site-why-ring__b--5 { left: 61.354%; top: 47.649%; width: 17.448%; height: 19.652%; }  /* 1178 */
  .v2-site-why-ring__b--7 { left: 40.781%; top: 71.788%; width: 18.490%; height: 19.652%; }  /* 783, 1081.6 */
  .v2-site-why-ring__ico { width: clamp(40px, 3.125vw, 60px); aspect-ratio: 1; }   /* 60 */
  .v2-site-why-ring__b h3 {
    font-size: clamp(13px, 1.0417vw, 20px); line-height: 1.5; margin: 0 0 12px;    /* 20/30, 12 */
  }
  .v2-site-why-ring__b p { font-size: clamp(12px, .9375vw, 18px); line-height: 1.5; }  /* 18/27 */
  .v2-site-why-ring__core {
    position: absolute; left: 37.448%; top: 32.035%; width: 25.104%;    /* 719, 638.6, 482 */
  }
  .v2-site-why-ring__core h3 { font-size: clamp(16px, 1.5625vw, 30px); }   /* 30/30 */
  .v2-site-why-ring__core p { font-size: clamp(11px, 1.0417vw, 20px); line-height: 1.5; }
  .v2-site-why-ring__fairy--pink   { left: 41.823%; top: 43.341%; width: 12.656%; }  /* 803, 764.6, 243 */
  .v2-site-why-ring__fairy--yellow { left: 49.016%; top: 48.464%; width:  9.672%; }  /* 941.1, 821.7, 185.7 */
  .v2-site-why-ring__call {
    position: absolute; left: 45.990%; top: 62.545%; width: 8.021%;     /* 883, 978.6, 154 */
    height: 5.025%; padding: 0; justify-content: center;                /* 56 of 1114.4 */
    font-size: clamp(10px, .9375vw, 18px); z-index: 3;
  }

  /* --- Reviews, FAQ and hero. The reviews and the FAQ are the comp
     /retirement-planning already carries, so both sections reuse its hooks;
     only the four values below differ on this page. --- */
  .v2-site--why .v2-site-pyv-stories .v2-site-wrap--wide { max-width: 1828px; }  /* 1780 + 2x24 */
  .v2-site--why .v2-site-pyv-faq .v2-site-wrap { max-width: 1688px; }            /* 1640 + 2x24 */
  .v2-site--why .v2-site-pyv-faq .v2-site-head p { max-width: 1640px; }          /* 1640, one line */
  .v2-site--why .v2-site-pyv-faq .v2-site-q > summary {
    font-size: 24px; line-height: 1.5;                                           /* 24/36 */
  }
  .v2-site--why .v2-site-chero__sub { max-width: 992px; }                        /* 992 */
}

/* ======================== PHONE (the 375 comp) =========================== */
@media (max-width: 1023px) {
  .v2-site--why .v2-site-sec { padding-block: 48px; }

  /* --- Hero (4586:633). The comp frame is 682 with its own 105 header drawn in,
     so the section under our sticky header is 577. The shared --tall phone sizes
     belong to another page's comp; these four are this one's. --- */
  .v2-site--why .v2-site-chero--tall { min-height: 577px; }             /* 682 - 105 */
  .v2-site--why .v2-site-chero h1 { font-size: 48px; line-height: 1; margin-bottom: 16px; }  /* 48/48, 16 */
  .v2-site--why .v2-site-chero--tall .v2-site-chero__sub {
    font-size: 20px; line-height: 1.5; max-width: min(353px, calc(100vw - 22px));  /* 20/30, 353 */
  }
  .v2-site--why .v2-site-chero--tall .v2-site-chero__actions { margin-top: 14px; }  /* 383 - 369 */

  /* --- Intro: three cards, not a photo-and-copy row (4659:3797). The section
     is white here, and the heading sits INSIDE the first card. --- */
  .v2-site--why .v2-site-why-heart { padding-block: 24px; background: #fff; }   /* 24 */
  .v2-site-why-heart .v2-site-wrap--wide { padding-inline: 16px; }              /* 16 */
  .v2-site-why-heart__row { display: flex; flex-direction: column; gap: 16px; } /* 16 */
  /* 12 padding + the 12 border is the comp's 24, measured from the frame edge. */
  .v2-site-why-heart__intro,
  .v2-site-why-heart__mcard {
    display: flex; flex-direction: column; border: 12px solid #fff;             /* 12 */
    border-radius: 32px; background: linear-gradient(#e9f2f6, #f3f5f6);         /* 32 */
  }
  .v2-site-why-heart__intro { padding: 12px; gap: 8px; align-items: center; }   /* 24 / 8 */
  .v2-site-why-heart__seal { margin-bottom: 12px; }                            /* 8 + 12 */
  .v2-site-why-heart__mcard { padding-top: 0; gap: 16px; }                      /* 12 / 16 */
  .v2-site-why-heart .v2-site-h2 { font-size: 48px; margin: 0 0 8px; }          /* 48/48, 8 + 8 */
  .v2-site-why-heart__intro p { font-size: 20px; line-height: 1.5; margin: 0; text-align: center; }
  /* Three concentric plates at 10 / 50 / 100% blue, the glyph knocked out of the last. */
  .v2-site-why-heart__seal {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 136px; height: 136px; border-radius: 50%;                            /* 136 */
    background: rgba(0, 120, 205, .10);
  }
  .v2-site-why-heart__seal > span {
    display: grid; place-items: center; width: 104px; height: 104px;            /* 104 */
    border-radius: 50%; background: rgba(0, 120, 205, .50);
  }
  .v2-site-why-heart__seal > span > span {
    display: block; width: 72px; height: 72px; border-radius: 50%;              /* 72 */
    background: var(--blue);
  }
  .v2-site-why-heart__seal > span > span::before {
    content: ""; display: block; width: 100%; height: 100%; background-color: #f4f7fa;
    -webkit-mask: url("../images/v2/site/why-choose-us/heart-handshake.svg") center / 55% no-repeat;
    mask: url("../images/v2/site/why-choose-us/heart-handshake.svg") center / 55% no-repeat;
  }
  .v2-site-why-heart__media {
    border: 0; border-radius: 20px; box-shadow: none; aspect-ratio: 319 / 220;  /* 20 */
  }
  .v2-site-why-heart__mission { padding: 24px 12px 12px; }                      /* 24 */
  .v2-site-why-heart__mission p { font-size: 20px; line-height: 1.5; margin: 0; }
  .v2-site-why-heart__mission p.v2-site-why-heart__sub {
    font-size: 48px; line-height: 1; margin: 0 0 16px; color: #003e6b;          /* 48/48, 16 */
  }
  .v2-site-why-heart__sub em { color: var(--blue); }                            /* #0078cd */
  /* The comp drops the pink button here and prints the line as copy in a box;
     the whole box is the tap target so the CTA still clears 44px. */
  .v2-site-why-heart__cta {
    position: relative; display: block; text-align: center;
    padding: 24px; border-radius: 16px;                                         /* 24 / 16 */
    background: #f4f7fa; border: 1px solid rgba(0, 120, 205, .20);
    font-size: 20px; line-height: 1.5; color: var(--blue);                      /* 20/30 */
  }
  body.v2-site .v2-site-why-heart__cta .v2-site-btn {
    all: unset; color: inherit; font: inherit; cursor: pointer;
  }
  /* A no-break space keeps the dash off the start of the next line. */
  .v2-site-why-heart__cta .v2-site-btn::after { content: "\00a0\2014 "; }
  .v2-site-why-heart__cta .v2-site-btn::before { content: ""; position: absolute; inset: 0; }
  .v2-site-why-heart__cta b { font: inherit; color: inherit; }

  /* --- Apart slab (4659:3910). Centred head, one column of cards. --- */
  .v2-site--why .v2-site-why-apart { padding-block: 48px; }             /* 48 */
  .v2-site-why-apart__in { padding-inline: 20px; }                      /* 20 */
  /* Same 556x319 node as desktop, still flush right — it just hangs 181 off a
     375 frame instead of 1364 into a 1920 one. */
  .v2-site-why-apart__stars { width: 148.267%; }                        /* 556 of 375 */
  .v2-site-why-apart__hd { margin-bottom: 32px; text-align: center; }   /* 32 */
  .v2-site-why-apart .v2-site-h2 { font-size: 30px; margin-bottom: 24px; }  /* 30/30, 24 */
  .v2-site-why-apart__aside { display: grid; gap: 16px; justify-items: center; }  /* 16 */
  /* The shared phone rule stretches every button to 100%; the comp keeps this one 227. */
  .v2-site-why-apart__aside .v2-site-btn { width: auto; min-width: 227px; }     /* 227 */
  .v2-site-why-apart__aside p { font-size: 18px; line-height: 1.5; }    /* 18/27 */
  .v2-site-why-apart__grid { display: grid; gap: 16px; }                /* 16 */
  .v2-site-why-apart__card { padding: 24px; gap: 16px; }                /* 24 / 16 */
  .v2-site-why-apart__ico { width: 40px; height: 40px; }                /* 40 */
  .v2-site-why-apart__card h3 { font-size: 20px; line-height: 1.5; margin: 0 0 8px; }  /* 20/30, 8 */
  .v2-site-why-apart__card p { font-size: 16px; line-height: 1.25; }    /* 16/20 */

  /* --- The ring unrolls (4659:4081). The comp breaks the column after the third
     card for the centre copy, then runs the rest, then the two fairies with Call
     now across their feet. The phone fairies are the smaller pair, and they swap
     sides: pink left and yellow right, where desktop has pink on the left. --- */
  .v2-site--why .v2-site-why-svc { padding-block: 32px; }               /* 32 */
  .v2-site-why-svc__stars {
    left: -4.800%; width: 104.267%;                                     /* 391 at -18 */
    transform: translateY(-18.584%);                                    /* -42 of 226 */
  }
  .v2-site-why-svc__hd { padding-inline: 20px; }                        /* 20 */
  .v2-site-why-svc .v2-site-h2 { font-size: 48px; }                     /* 48/48 */
  .v2-site-why-svc__hd p { font-size: 16px; line-height: 1.25; }        /* 16/20 */
  .v2-site-why-ring {
    aspect-ratio: auto; margin-top: 24px; padding: 0 20px 46.88vw;      /* 24 / 20 / 175.8 */
    display: flex; flex-direction: column; gap: 24px;                   /* 24 */
  }
  .v2-site-why-ring__b {
    position: static; width: 100%; height: auto; padding: 24px; gap: 12px; order: 2;
  }
  .v2-site-why-ring__b--0,
  .v2-site-why-ring__b--1,
  .v2-site-why-ring__b--2 { order: 0; }
  .v2-site-why-ring__core { position: static; width: 100%; order: 1; }
  .v2-site-why-ring__ico { width: 60px; height: 60px; }                 /* 60 */
  .v2-site-why-ring__b h3 { font-size: 18px; line-height: 1.5; margin: 0 0 12px; }  /* 18/27, 12 */
  .v2-site-why-ring__b p { font-size: 16px; line-height: 1.25; }        /* 16/20 */
  .v2-site-why-ring__core h3 { font-size: 24px; }                       /* 24/24 */
  .v2-site-why-ring__core p { font-size: 18px; line-height: 1.5; }      /* 18/27 */
  /* The fairies are a share of the ring, so their foot is vw and not a fixed px. */
  .v2-site-why-ring__fairy { bottom: 0; top: auto; }
  .v2-site-why-ring__fairy--pink   { left: 25.067%; width: 29.867%; bottom: 10.987vw; }  /* 94, 112 */
  .v2-site-why-ring__fairy--yellow { left: 38.400%; width: 37.067%; bottom: 0; }         /* 144, 139 */
  .v2-site-why-ring__call {
    position: absolute; left: 20px; right: 20px; top: auto; bottom: 2.613vw;  /* 9.8 */
    width: auto; height: 56px; font-size: 16px;                         /* 56, 16/20.5 */
    /* The fairies carry z-index 2, so the button needs its own here too -- the
       desktop block had it and the phone one did not, and they walked over it. */
    z-index: 3;
  }
}
/* ==========================================================================
   50. FAQ hub (/faq)
   ==========================================================================
   Figma 3747:1856. The comp replaces the old category-card grid with a
   two-column hub: a "Jump to a section" card on the comp's 362, and the
   grouped accordions on its 1054, 64 apart inside its 1480.

   The closing band is /obamacare's, byte for byte, so the page carries
   .v2-site--ctaslim and nothing about it is written here. */

/* individualStrokeWeights: top 9, the other three 0 — a blue cap on a white
   card, not a ring. It is drawn INSIDE the 362 box, so it comes off the top
   padding rather than adding to the height. */
.v2-site-faqnav {
  background: #fff; border: 0; border-top: 9px solid var(--blue);         /* 9 */
  border-radius: 20px; display: grid; align-content: start;               /* 20 */
}
.v2-site-faqnav__t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1; color: var(--blue-deep); margin: 0;
}
.v2-site-faqnav ul { list-style: none; margin: 0; padding: 0; display: grid; }
/* The li strut, not the link, was setting the row height: the body leading
   added 10 to every entry and the card came out 104 taller than the comp. */
.v2-site-faqnav li { line-height: 1; }
/* Phone: twelve rows filled the screen and pushed every answer below the fold,
   so the list collapses to the active topic behind an "All topics" disclosure.
   The button is hidden in the markup and the script shows it, so with no script
   the full list stays and the entries are in-page anchors as before. */
/* Drawn as a control, not a label: a bordered row with the number of topics
   behind it, because "All topics" on its own did not read as something to tap. */
.v2-site-faqnav__toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; cursor: pointer;                        /* 44 floor */
  padding: 0 14px; border-radius: 999px; color: var(--blue);
  background: rgba(238, 248, 255, .96); border: 1px solid var(--blue);
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: -.02em; font-size: 16px; line-height: 1;
}
.v2-site-faqnav__toggle > span:first-child { margin-right: auto; }
.v2-site-faqnav__count {
  display: grid; place-items: center; min-width: 24px; height: 24px;
  padding: 0 7px; border-radius: 999px; background: var(--blue); color: #fff;
  font-size: 13px; line-height: 1;
}
.v2-site-faqnav__toggle svg {
  width: 16px; height: 16px; flex: 0 0 16px; fill: none;
  stroke: currentColor; stroke-width: 2.4; transition: transform .18s ease;
}
.v2-site-faqnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* display:flex above beats the hidden attribute, same as the panels do. */
.v2-site-faqnav__toggle[hidden] { display: none; }
.v2-site-faqnav.is-collapsed li:not(.v2-site-faqnav__lead) { display: none; }
.v2-site-faqnav.is-collapsed li.v2-site-faqnav__lead { border-top: 0; padding-top: 0; }
/* The picker scrolls itself into view after a pick and the header is sticky. */
.v2-site-faqnav { scroll-margin-top: 117px; }                           /* 105 + 12 */
.v2-site-faqnav a {
  font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--blue);
  text-decoration: none;
}
.v2-site-faqnav a:hover { text-decoration: underline; }
/* The comp draws a hairline BETWEEN entries, never above the first or below the
   last, and the lead card is the first entry rather than a header. */
.v2-site-faqnav li + li { border-top: 1px solid #ededed; }
/* individualStrokeWeights again: left 7, the rest 0. */
.v2-site-faqnav__lead {
  background: rgba(238, 248, 255, .96);                                    /* #eef8ff @96% */
  border: 0; border-left: 7px solid var(--blue);                           /* 7 */
  border-radius: 8px; display: grid; gap: 10px;                            /* 8 / 10 */
}
.v2-site-faqnav__lead p { margin: 0; color: var(--blue-deep); }
/* Only the active entry shows its blurb, and the script moves __lead onto it.
   Without the script every panel stays on the page and these are plain
   in-page anchors, which is also what the WordPress redirects land on. */
.v2-site-faqnav li p { display: none; }
.v2-site-faqnav .v2-site-faqnav__lead p { display: block; }
.v2-site-faqnav li + li.v2-site-faqnav__lead { border-top-color: transparent; }
/* The panels are grids, so the hidden attribute needs saying out loud. */
.v2-site-faqgrp[hidden] { display: none; }

/* Switching panels, moving the lead card and opening a row all go from
   display:none to displayed, which restarts a CSS animation on its own -- no
   JS hook, and the sitewide reduced-motion block already shortens them. */
@keyframes v2-site-faqrise {
  from { opacity: 0; transform: translateY(10px); }
}
.v2-site-faqgrp { animation: v2-site-faqrise .3s ease both; }
.v2-site-faqnav .v2-site-faqnav__lead p { animation: v2-site-faqrise .3s ease both; }
.v2-site-faqgrp .v2-site-q[open] .v2-site-q__a { animation: v2-site-faqrise .24s ease both; }
/* The badge keeps its own transition: the svg no longer rotates on open (that
   would stand the star on its head), so the chevron path is what moves. */
.v2-site-faqgrp .v2-site-q > summary svg path { transition: transform .18s ease; }
.v2-site-faqnav a { transition: color .15s ease; }
.v2-site-faqnav li:not(.v2-site-faqnav__lead) a:hover { color: var(--blue-deep); }

.v2-site-faqgrp h3 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1; color: var(--blue); margin: 0;
}
/* The comp's rows are the shared accordion with a blue ring, no shadow and the
   open one inverted to solid blue. */
/* A closed row carries a 1px rule under it only (individualStrokeWeights
   bottom 1); the open one is the single full ring in this section. */
.v2-site-faqgrp .v2-site-q {
  margin: 0; border-radius: 12px; box-shadow: none;
  border: 0; border-bottom: 1px solid var(--blue);
}
.v2-site-faqgrp .v2-site-q[open] {
  background: var(--blue); border: 1px solid rgba(0, 120, 205, .15);       /* @15% */
}
.v2-site-faqgrp .v2-site-q > summary { font-weight: 600; color: var(--blue-deep); }
.v2-site-faqgrp .v2-site-q[open] > summary,
.v2-site-faqgrp .v2-site-q[open] .v2-site-q__a { color: #fff; }
/* The toggle is a star badge with the chevron knocked out of it, and the two
   states swap the colours. Rotating the whole svg on open would stand the star
   on its head, so the base rule's rotate is dropped and the path flips alone. */
.v2-site-faqgrp .v2-site-q > summary svg {
  width: 28px; height: 27px; flex: 0 0 28px; box-sizing: border-box;       /* 28x27 */
  padding: 9px 8px; stroke: #fff; stroke-width: 2.6;
  background: url("../images/v2/site/faq/star-blue.svg") center / contain no-repeat;
}
.v2-site-faqgrp .v2-site-q[open] > summary svg {
  transform: none; stroke: var(--blue);
  background-image: url("../images/v2/site/faq/star-white.svg");
}
.v2-site-faqgrp .v2-site-q[open] > summary svg path {
  transform: scaleY(-1); transform-box: view-box; transform-origin: center;
}

/* ======================= DESKTOP (the 1920 comp) ======================== */
@media (min-width: 1024px) {
  /* The shared chero runs 0.9 leading on the h1, a 32 kicker and 1.65 on the
     sub; this comp is 64/64, 30/30 and 20/30. */
  .v2-site--faq .v2-site-chero h1 { line-height: 1; }                   /* 64/64 */
  .v2-site--faq .v2-site-chero__kicker { font-size: 30px; line-height: 1; }  /* 30/30 */
  .v2-site--faq .v2-site-chero__sub { line-height: 1.5; max-width: 792px; }  /* 20/30, 792 */

  /* The BAND is /obamacare's; its copy block is not. That comp sets the line
     uppercase at 20/20 across the full width, this one runs it sentence case at
     20/30 on 733, faded to 70%. */
  .v2-site--faq .v2-site-cta__copy { flex: 0 1 733px; }                 /* 733 */
  .v2-site--faq .v2-site-cta p {
    font-family: inherit; font-weight: 400; text-transform: none;
    letter-spacing: 0; line-height: 1.5; margin-top: 11px;              /* 20/30, 16 cap */
    color: rgba(255, 255, 255, .7);                                     /* #ffffff @70% */
  }

  .v2-site--faq .v2-site-sec { padding-block: 97px; }                   /* 97 */
  .v2-site--faq .v2-site-sec .v2-site-wrap--wide { max-width: 1528px; } /* 1480 + 2x24 */
  .v2-site-faqhub__row {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 362fr) minmax(0, 1054fr);          /* 362 | 1054 */
    column-gap: 64px;                                                   /* 64 */
  }
  /* 14 top, not 23: the 9px cap is drawn inside the box and eats the padding. */
  .v2-site-faqnav { padding: 14px 20px 23px; gap: 25px; }               /* 23 / 20, 25 */
  .v2-site-faqnav__t { font-size: 24px; }                               /* 24/24 */
  .v2-site-faqnav ul { gap: 16px; }                                     /* 16 */
  .v2-site-faqnav li + li { padding-top: 16px; }                        /* 16 */
  .v2-site-faqnav a { font-size: 20px; }                                /* 20/20 */
  .v2-site-faqnav__lead { padding: 16px 24px 16px 17px; }               /* 16 / 24 less the 7 */
  .v2-site-faqnav__lead p { font-size: 16px; line-height: 1.25; }       /* 16/20 */
  .v2-site-faqhub__col { display: grid; gap: 56px; }                    /* 56 */
  .v2-site-faqgrp { display: grid; gap: 26px; }                         /* 26 */
  .v2-site-faqgrp h3 { font-size: 48px; }                               /* 48/48 */
  .v2-site-faqgrp .v2-site-q > summary {
    padding: 16px 16px 15px; gap: 12px;                                 /* 16, less the 1 rule */
    font-size: 20px; line-height: 1.5;                                  /* 20/30 */
  }
  .v2-site-faqgrp .v2-site-q[open] > summary { padding: 15px 23px 0; }  /* 16 / 24 */
  .v2-site-faqgrp .v2-site-q__a {
    padding: 12px 23px 15px; font-size: 18px; line-height: 1.5;         /* 12, 18/27 */
  }
}

/* ======================== PHONE ========================================= */
@media (max-width: 1023px) {
  .v2-site--faq .v2-site-sec { padding-block: 48px; }
  .v2-site-faqhub__row { display: grid; gap: 32px; }
  .v2-site-faqnav { padding: 14px 20px 23px; gap: 20px; }
  .v2-site-faqnav__t { font-size: 20px; }
  .v2-site-faqnav ul { gap: 14px; }
  .v2-site-faqnav li + li { padding-top: 14px; }
  .v2-site-faqnav a { font-size: 18px; line-height: 1.25; }
  .v2-site-faqnav__lead { padding: 16px 20px 16px 13px; }
  .v2-site-faqnav__lead p { font-size: 15px; line-height: 1.3; }
  .v2-site-faqhub__col { display: grid; gap: 40px; }
  .v2-site-faqgrp { display: grid; gap: 20px; }
  .v2-site-faqgrp h3 { font-size: 30px; }
  .v2-site-faqgrp .v2-site-q > summary {
    padding: 16px 16px 15px; gap: 12px; font-size: 17px; line-height: 1.35;
  }
  .v2-site-faqgrp .v2-site-q[open] > summary { padding: 15px 15px 0; }
  .v2-site-faqgrp .v2-site-q__a { padding: 10px 15px 15px; font-size: 16px; line-height: 1.5; }
  .v2-site-faqgrp .v2-site-q > summary svg { width: 24px; height: 23px; flex-basis: 24px; padding: 8px 7px; }
}
/* ==========================================================================
   51. Glossary (/glossary)
   ==========================================================================
   Figma 5097:7620. The intro and the filters bar are ONE section over a photo
   (1479 canvas, x=221); the listing is its own (1640, x=140). Each letter is a
   blue capsule with a spine and a dot down its column, drawn as pseudo-elements
   rather than markup. */

/* The image sits under a left-to-right wash that is opaque white to 44% and
   #999 at 9% from 86% on -- the comp's own handles. Exposure -0.21 is baked
   into the file, since a per-layer filter is not a thing in CSS. */
.v2-site-gloss-intro {
  position: relative; overflow: hidden;
  background:
    linear-gradient(to right, #fff 44.3%, rgba(153, 153, 153, .09) 86.2%),
    url("../images/v2/site/glossary/intro-bg.webp") center / cover no-repeat;
}
.v2-site-gloss-intro > .v2-site-wrap { position: relative; z-index: 1; }
/* The fairies hang off the WRAP, not the section: past 1527 the wrap stops
   growing and a viewport-% fairy walks away from the card it stands beside.
   Their tops are px for the same reason -- a % there resolves against a
   content-driven height, which put them 21 low at 1024. */
.v2-site-gloss-intro__fairy { position: absolute; height: auto; z-index: 0; pointer-events: none; }
.v2-site--gloss .v2-site-gloss__intro p { color: rgba(0, 62, 107, .8); }     /* 80% */

/* The help card: a tinted panel with the number set as a display line over a
   hairline, not a button. */
.v2-site--gloss .v2-site-helpcard {
  background: #f4f7fa; border: 1px solid rgba(0, 120, 205, .15);
  border-radius: 24px;                                                  /* 24 */
}
.v2-site--gloss .v2-site-helpcard__t {
  text-transform: uppercase; letter-spacing: -.04em; color: var(--blue-deep);
}
.v2-site--gloss .v2-site-helpcard__ico { background: none; color: var(--blue); }
.v2-site--gloss .v2-site-helpcard p { color: rgba(0, 62, 107, .7); }    /* 70% */
.v2-site--gloss .v2-site-helpcard__lbl {
  color: rgba(0, 62, 107, .5); text-transform: none; letter-spacing: 0;  /* 50% */
}
/* individualStrokeWeights: the rule is on TOP of the number, nothing else. */
.v2-site--gloss .v2-site-helpcard__tel {
  display: block; border-top: 1px solid rgba(0, 0, 0, .10);
  font-family: var(--display); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; color: var(--blue);
}

/* Filters bar (5097:7743) */
.v2-site--gloss .v2-site-gloss__tools {
  background: #f4f7fa; border: 1px solid rgba(0, 120, 205, .15);
  border-radius: 16px; box-shadow: none;                                /* 16 */
}
.v2-site--gloss .v2-site-gloss__key {
  border-radius: 8px; border: 1px solid rgba(0, 120, 205, .15);         /* 8 */
  background: #fff; color: var(--blue-deep); font-weight: 400;
}
.v2-site--gloss .v2-site-gloss__key[aria-current="true"] {
  background: var(--blue); border-color: #dce6f1; color: #fff;
}
.v2-site--gloss .v2-site-gloss__search {
  border-radius: 99px; border: 1px solid var(--blue); background: #fff;
  color: var(--blue-deep);
}

/* Listing (5097:7773). The hairline is the group's own bottom stroke. */
.v2-site--gloss .v2-site-gloss__group {
  position: relative; border-top: 0;
  border-bottom: 1px solid rgba(0, 120, 205, .15);
}
/* The filter script hides an emptied group with the hidden attribute, and the
   display:grid above beats it -- the letter capsule and its spine were left
   standing with no terms under them. Same for a term the search rules out. */
.v2-site-gloss__group[hidden], .v2-site-term[hidden] { display: none; }
.v2-site--gloss .v2-site-gloss__letter {
  display: grid; place-items: center; border-radius: 99px;
  background: var(--blue); color: #fff; margin: 0;
  font-family: var(--display); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; text-transform: uppercase;
}
/* The spine and its dot: a 2px line from under the capsule, ending in a 12
   circle. Both are drawn, so a group with one term gets a shorter spine. */
.v2-site--gloss .v2-site-gloss__group::before,
.v2-site--gloss .v2-site-gloss__group::after {
  content: ""; position: absolute; background: var(--blue);
}
.v2-site--gloss .v2-site-term {
  background: #f4f7fa; border: 1px solid rgba(0, 120, 205, .15);
  border-radius: 16px;                                                  /* 16 */
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);                             /* the comp's own */
}
.v2-site--gloss .v2-site-term h3 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1; color: var(--blue-deep);
}
.v2-site--gloss .v2-site-term p { color: rgba(0, 62, 107, .8); }        /* 80% */
/* individualStrokeWeights: left 4, the rest 0 -- a cyan bar, not a box. */
.v2-site--gloss .v2-site-term__eg {
  background: #fff; border: 0; border-left: 4px solid #00b6ed;          /* 4 */
  border-radius: 0; color: var(--blue-deep);
}
.v2-site--gloss .v2-site-term__eg b { color: var(--blue-deep); }

/* ======================= DESKTOP (the 1920 comp) ======================== */
@media (min-width: 1024px) {
  /* Same three shared chero defaults as /faq: 0.9 leading on the h1 and 1.65
     on the sub. This comp also paints the whole title blue, not just an em. */
  .v2-site--gloss .v2-site-chero h1 { line-height: 1; color: var(--blue); }  /* 64/64 */
  .v2-site--gloss .v2-site-chero__sub { line-height: 1.5; max-width: 658px; }  /* 20/30, 658 */

  .v2-site--gloss .v2-site-gloss-intro { padding-block: 96px 32px; }    /* 96 */
  .v2-site--gloss .v2-site-gloss-intro .v2-site-wrap--wide { max-width: 1527px; }  /* 1479 + 2x24 */
  .v2-site--gloss .v2-site-gloss-list .v2-site-wrap--wide { max-width: 1688px; }   /* 1640 + 2x24 */
  .v2-site--gloss .v2-site-gloss-list { padding-block: 32px 96px; }     /* 32 / 96 */

  /* The tops are measured from the SECTION, and the wrap starts 96 into it. */
  .v2-site-gloss-intro__fairy--l { left: 50.82%; top: -22px; width: 23.81%; }  /* 973, 74 - 96 */
  .v2-site-gloss-intro__fairy--r { left: 86.25%; top: -29px; width: 26.67%; }  /* 1514, 67 - 96 */

  .v2-site--gloss .v2-site-gloss__intro {
    grid-template-columns: minmax(0, 979fr) minmax(0, 500fr); gap: 0;   /* 979 | 500 */
  }
  .v2-site--gloss .v2-site-gloss__intro > div:first-child { max-width: 984px; }
  .v2-site--gloss .v2-site-gloss__intro .v2-site-h2 {
    font-size: 48px; line-height: 1; letter-spacing: -.04em;            /* 48/48 */
  }
  .v2-site--gloss .v2-site-gloss__intro p {
    max-width: 745px; font-size: 20px; line-height: 1.5;                /* 20/30, 745 */
  }
  .v2-site--gloss .v2-site-gloss__intro > div:first-child > p:first-of-type { margin-top: 24px; }  /* 24 */

  .v2-site--gloss .v2-site-helpcard { padding: 31px; }                  /* 32 less the ring */
  .v2-site--gloss .v2-site-helpcard__t {
    font-size: 20px; line-height: 1; gap: 12px; margin-bottom: 20px;    /* 20/20, 12, 20 */
  }
  .v2-site--gloss .v2-site-helpcard__ico { width: 40px; height: 40px; flex-basis: 40px; }
  .v2-site--gloss .v2-site-helpcard__ico svg { width: 40px; height: 40px; }
  .v2-site--gloss .v2-site-helpcard p {
    font-size: 16px; line-height: 1.5; margin-bottom: 20px;             /* 16/24, 20 */
  }
  /* p.__lbl, not .__lbl: the card paragraph rule above is (0,2,1) and wins. */
  .v2-site--gloss .v2-site-helpcard p.v2-site-helpcard__lbl {
    font-size: 14px; line-height: 1.25; margin: 0 0 4px;                 /* 14/17.5, 4 */
  }
  .v2-site--gloss .v2-site-helpcard__tel {
    font-size: 48px; padding: 10px 0; margin-bottom: 20px;              /* 48/48, 10, 20 */
  }
  .v2-site--gloss .v2-site-helpcard .v2-site-btn { margin-top: 0; min-height: 58px; }  /* 58 */
  /* The comp breaks the heading at the colon, not where 979 happens to wrap. */
  .v2-site--gloss .v2-site-gloss__intro .v2-site-h2 em { display: block; }

  .v2-site--gloss .v2-site-gloss__tools { padding: 23px; margin-top: 56px; }   /* 24, 513 - 457 */
  .v2-site--gloss .v2-site-gloss__jump { gap: 8px; }                    /* 8 */
  .v2-site--gloss .v2-site-gloss__jump b { font-size: 16px; line-height: 1.25; }  /* 16/20 */
  .v2-site--gloss .v2-site-gloss__key {
    padding: 7px 13px; font-size: 18px; line-height: 1.5;               /* 8 / 14, 18/27 */
  }
  .v2-site--gloss .v2-site-gloss__search {
    flex: 0 0 360px; padding: 11px 19px; font-size: 18px; line-height: 1.5;  /* 360, 12 / 20 */
  }

  .v2-site--gloss .v2-site-gloss__group {
    grid-template-columns: 120px minmax(0, 1456fr);                     /* 120 | 1456 */
    gap: 64px; padding: 0 0 48px;                                       /* 64 / 48 */
    margin-bottom: 56px;                                                /* 56 */
  }
  .v2-site--gloss .v2-site-gloss__letter { width: 80px; height: 80px; font-size: 36px; }  /* 80, 36/36 */
  .v2-site--gloss .v2-site-gloss__group::before {
    left: 39px; top: 80px; width: 2px; bottom: 60px;                    /* centre of the 80 */
  }
  .v2-site--gloss .v2-site-gloss__group::after {
    left: 34px; bottom: 54px; width: 12px; height: 12px; border-radius: 50%;   /* 12 */
  }
  .v2-site--gloss .v2-site-gloss__terms { gap: 16px; }                  /* 16 */
  .v2-site--gloss .v2-site-term { padding: 23px; }                      /* 24 less the ring */
  .v2-site--gloss .v2-site-term h3 { font-size: 24px; margin-bottom: 12px; }   /* 24/24, 12 */
  .v2-site--gloss .v2-site-term p { font-size: 18px; line-height: 1.5; }       /* 18/27 */
  .v2-site--gloss .v2-site-term__eg {
    margin-top: 12px; padding: 12px 16px; font-size: 18px; line-height: 1.5;   /* 12 / 16 */
  }
}

/* ======================== PHONE ========================================= */
@media (max-width: 1023px) {
  /* --- Intro (5103:9114). Same photo, one column, and the two desktop fairies
     give way to a smaller pair that straddles the help card's top edge. --- */
  .v2-site--gloss .v2-site-gloss-intro { padding-block: 24px; }         /* 24 */
  .v2-site--gloss .v2-site-gloss-intro .v2-site-wrap { padding-inline: 16px; }  /* 16 */
  .v2-site-gloss-intro__fairy { display: none; }
  .v2-site--gloss .v2-site-gloss__intro { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .v2-site--gloss .v2-site-gloss__intro .v2-site-h2 { font-size: 32px; line-height: 1; }  /* 32/32 */
  .v2-site--gloss .v2-site-gloss__intro .v2-site-h2 em { display: block; }
  .v2-site--gloss .v2-site-gloss__intro p { font-size: 18px; line-height: 1.5; max-width: none; }
  .v2-site--gloss .v2-site-gloss__intro > div:first-child > p:first-of-type { margin-top: 16px; }

  .v2-site--gloss .v2-site-helpcard { position: relative; padding: 23px; }   /* 24 less the ring */
  .v2-site--gloss .v2-site-helpcard__t {
    font-size: 18px; line-height: 1.5; gap: 12px; margin-bottom: 16px;  /* 18/27, 12, 16 */
  }
  .v2-site--gloss .v2-site-helpcard__ico { width: 32px; height: 32px; flex-basis: 32px; }
  .v2-site--gloss .v2-site-helpcard__ico svg { width: 32px; height: 32px; }
  .v2-site--gloss .v2-site-helpcard p { font-size: 16px; line-height: 1.25; margin-bottom: 16px; }
  .v2-site--gloss .v2-site-helpcard p.v2-site-helpcard__lbl {
    font-size: 14px; line-height: 1.25; margin: 0 0 8px;                /* 14/17.5, 8 */
  }
  .v2-site--gloss .v2-site-helpcard__tel {
    font-size: 32px; padding: 10px 0; margin-bottom: 16px;              /* 32/32, 10, 16 */
  }
  .v2-site--gloss .v2-site-helpcard .v2-site-btn { margin-top: 0; min-height: 48px; }  /* 48 */
  /* Backgrounds, not <img>: they are decoration and they hang off the card's
     TOP edge, which is the one thing in this column whose position is fixed. */
  .v2-site--gloss .v2-site-helpcard::before,
  .v2-site--gloss .v2-site-helpcard::after {
    content: ""; position: absolute; pointer-events: none;
    background: center / contain no-repeat;
  }
  .v2-site--gloss .v2-site-helpcard::before {
    left: -4.66%; top: -24px; width: 15.45%; aspect-ratio: 53 / 73.2;   /* 0, 584, 53 */
    background-image: url("../images/v2/site/glossary/char-yellow.webp");
  }
  .v2-site--gloss .v2-site-helpcard::after {
    left: 81.9%; top: -41px; width: 21.02%; aspect-ratio: 72.1 / 96.7;  /* 297, 567, 72.1 */
    background-image: url("../images/v2/site/glossary/char-pink.webp");
  }

  /* Filters bar: the letters sit over the search on a phone. */
  .v2-site--gloss .v2-site-gloss__tools {
    flex-direction: column; align-items: stretch; gap: 12px;            /* 12 */
    padding: 15px; margin-top: 20px;                                    /* 16, 20 */
  }
  .v2-site--gloss .v2-site-gloss__jump { gap: 8px; }                    /* 8 */
  .v2-site--gloss .v2-site-gloss__key {
    padding: 7px 13px; font-size: 16px; line-height: 1.25;              /* 8 / 14, 16/20 */
  }
  .v2-site--gloss .v2-site-gloss__search {
    flex: 0 0 auto; padding: 11px 19px; font-size: 16px; line-height: 1.25;  /* 44, 12 / 20 */
  }

  /* --- Listing (5103:9163). The capsule moves ABOVE its terms and the spine
     turns into a rule running out of it to the group's right edge. --- */
  .v2-site--gloss .v2-site-gloss-list { padding-block: 48px; }          /* 48 */
  .v2-site--gloss .v2-site-gloss-list .v2-site-wrap { padding-inline: 24px; }  /* 24 */
  .v2-site--gloss .v2-site-gloss__group {
    grid-template-columns: minmax(0, 1fr); gap: 32px;                   /* 32 */
    padding: 0 0 48px; margin-bottom: 32px;                             /* 48 / 32 */
  }
  .v2-site--gloss .v2-site-gloss__letter { width: 80px; height: 80px; font-size: 36px; }  /* 80, 36/36 */
  .v2-site--gloss .v2-site-gloss__group::before {
    left: 95px; top: 39px; right: 12px; height: 2px; width: auto; bottom: auto;   /* 224 at y=40 */
  }
  .v2-site--gloss .v2-site-gloss__group::after {
    right: 0; left: auto; top: 34px; bottom: auto;
    width: 12px; height: 12px; border-radius: 50%;                      /* 12 */
  }
  .v2-site--gloss .v2-site-gloss__terms { gap: 16px; }                  /* 16 */
  .v2-site--gloss .v2-site-term { padding: 23px; }                      /* 24 less the ring */
  .v2-site--gloss .v2-site-term h3 { font-size: 20px; line-height: 1; margin-bottom: 12px; }  /* 20/20, 12 */
  .v2-site--gloss .v2-site-term p { font-size: 16px; line-height: 1.25; }        /* 16/20 */
  /* p.__eg, not .__eg: .v2-site-term p above is (0,2,1) and takes the leading. */
  .v2-site--gloss .v2-site-term p.v2-site-term__eg {
    margin-top: 12px; padding: 12px 16px; font-size: 16px; line-height: 1.5;     /* 12 / 16, 16/24 */
  }
  .v2-site--gloss .v2-site-gloss__jump b { font-size: 16px; line-height: 1.25; }  /* 16/20 */

  /* Hero (5103:9039): 658 less its own 105 header. */
  /* The two artboards disagree on case and colour here, so both are written
     out: the desktop title is #0078cd and its buttons are caps, the phone
     title is #003e6b and its buttons are sentence case. */
  .v2-site--gloss .v2-site-chero--tall { min-height: 553px; }           /* 658 - 105 */
  .v2-site--gloss .v2-site-chero h1 {
    font-size: 40px; line-height: 1; margin-bottom: 16px;               /* 40/40, 16 */
    color: var(--blue-deep);                                            /* #003e6b */
  }
  .v2-site--gloss .v2-site-chero__btn { text-transform: none; font-size: 18px; }  /* 18/27 */
  .v2-site--gloss .v2-site-helpcard__t { text-transform: none; }
  .v2-site--gloss .v2-site-chero--tall .v2-site-chero__sub {
    font-size: 18px; line-height: 1.5; max-width: min(353px, calc(100vw - 22px));  /* 18/27, 353 */
  }
}
/* ==========================================================================
   52. About us (/about-us)
   ==========================================================================
   Figma 3747:6549. Eleven sections on three canvases: 1480 (1920 less 220) for
   the story rows and the stats, 1780 (less 70) for the blue card slab, and the
   1872 contact bar that sits 24 off each edge. The closing band is the short
   one, so the page carries .v2-site--ctaslim and nothing about it is here. */

/* --- Contact bar (3747:6671): its own sizes, not the shared strip's. --- */
/* The About Us frame is #e5eef4 throughout, so the bar FLOATS on the tint and
   runs continuously into the row beneath it. On white it read as a cut-off card. */
/* The 32 is the WRAPPER's padding, not the bar's margin: a child margin with
   nothing to stop it collapses out of the wrapper, which pushed the tint down
   and showed a 32px band of body white between the hero and the bar. */
.v2-site-ab-bar { background: #e5eef4; padding-top: 32px; }             /* #e5eef4, 32 */
.v2-site--about .v2-site-info {
  border-radius: 32px; background: #f4f7fa; margin-block: 0;            /* 32 */
}
.v2-site--about .v2-site-info__ico {
  width: 48px; height: 48px; flex-basis: 48px;                          /* 48 */
}
.v2-site--about .v2-site-info__ico svg { width: 24px; height: 24px; }   /* 24 */
.v2-site--about .v2-site-info__lbl {
  text-transform: uppercase; letter-spacing: .04em; color: var(--blue-deep);
  margin-bottom: 2px;                                                   /* 2 */
}
.v2-site--about .v2-site-info__val { color: var(--blue-deep); }
.v2-site--about a.v2-site-info__val { color: var(--blue); }
/* Only the PHONE is the 24 display line; the email is a link too and was
   taking that size, which is what wrapped the address onto two lines. */

/* --- The two story rows (5204:15175, 3747:6710): a 600x450 photo in a 12
   white rim against 808 of copy, 72 apart. --- */
.v2-site-ab-way { background: #e5eef4; }                                /* #e5eef4 */
.v2-site-ab-story { background: #fff; }
.v2-site-ab-shot {
  margin: 0; border: 12px solid #fff; border-radius: 32px;              /* 12 / 32 */
  overflow: hidden; aspect-ratio: 600 / 450;                            /* 600x450 */
}
.v2-site-ab-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The leadership portrait is 4:5, so at full column width it stood 323 taller
   than its copy and left the text floating between two gaps. The figure takes
   its height from the ROW -- the copy sets that -- and the photo fills it. */
.v2-site-ab-portrait {
  margin: 0; position: relative; align-self: stretch; overflow: hidden;
  border: 12px solid #fff; border-radius: 32px; min-height: 420px;      /* 12 / 32 */
}
.v2-site-ab-portrait img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
}
.v2-site--about .v2-site-rule {
  display: block; width: 50px; height: 6px; border-radius: 3px;         /* 50x6, 3 */
  background: #00b6ed; border: 0;
}
/* The dictionary stops being a card here: the comp sets it as copy under the
   paragraph, with the label in pink. */
.v2-site--about .v2-site-def {
  background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0;
}
.v2-site--about .v2-site-def__lbl {
  color: #ff399e; font-family: var(--display); font-weight: 800;        /* #ff399e */
  text-transform: uppercase; letter-spacing: -.04em; line-height: 1;
}
.v2-site--about .v2-site-def__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.v2-site--about .v2-site-def__word {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1; color: var(--blue-deep);
}
.v2-site--about .v2-site-def__ipa { font-weight: 700; color: var(--blue-deep); }
/* p.__x, not .__x: .v2-site-ab-row p above is (0,2,1) and takes these. */
.v2-site--about p.v2-site-def__body {
  color: var(--blue-deep); border-top: 0; padding-top: 0; margin-top: 0;
}

/* --- Founder slab (3747:6717): a 1880 rounded blue panel, not a full band. --- */
/* 1880, not the full width: the comp draws it as a rounded panel inset 20. */
.v2-site--about .v2-site-slab--founder {
  border-radius: 32px; background: var(--blue);                         /* 32 */
  max-width: 1880px; margin-inline: auto;                               /* 1880 */
  position: relative; overflow: hidden;
}
/* The panel is a star field, not flat blue. The export is trimmed, so these two
   offsets were measured against a render of the panel, not read off the node. */
.v2-site-ab-found__stars {
  position: absolute; left: -5.904%; top: 50%; width: 111.809%; height: auto;
  transform: translateY(-59.32%);                                       /* centred, 115 high */
  pointer-events: none; z-index: 0;
}
.v2-site--about .v2-site-slab--founder > .v2-site-wrap { position: relative; z-index: 1; }
/* 294x440 at (1210, 150) of the 1880 panel. Scoped to THIS slab: the bright
   honest section below uses the same class for a different character. */
/* Anchored to the panel's FLOOR, not its top: her feet are 2 off the bottom in
   the comp, and this panel runs taller than 592 once the copy wraps. */
.v2-site--about .v2-site-slab--founder .v2-site-slab__fairy {
  position: absolute; left: 64.362%; bottom: 2px; top: auto;            /* 1210, 294 */
  width: 15.638%; height: auto; z-index: 2; pointer-events: none;
}
.v2-site--about .v2-site-founder {
  background: #f4f7fa; border: 1px solid rgba(0, 120, 205, .15);
  border-radius: 32px; margin-inline: auto;                             /* 32 */
}
.v2-site--about .v2-site-founder__av {
  border-radius: 999px; overflow: hidden; flex: 0 0 auto;
  box-shadow: 0 0 0 5px var(--blue);                                    /* 5 outside */
  border: 5px solid #fff;                                               /* 5 inside */
}
.v2-site--about .v2-site-founder__av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-site--about .v2-site-founder h3 {
  color: var(--blue-deep); letter-spacing: -.04em; line-height: 1; margin: 0;
}
.v2-site--about .v2-site-founder__role {
  color: var(--blue); font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.04em; line-height: 1;
}
.v2-site--about .v2-site-founder > div > p:last-child { color: rgba(0, 62, 107, .8); }

/* --- Bright, honest (4524:6311): six 340 cards in two rows of three, the same
   card as /why-choose-madrinas-insurance's apart slab, with the two characters
   and the star field placed by the comp's own pixels. --- */
.v2-site-ab-bright { position: relative; overflow: hidden; background: var(--blue); }
.v2-site-ab-bright__stars {
  position: absolute; left: 68.177%; bottom: 0; width: 31.823%; height: auto;  /* 1309, 611 */
  z-index: 0; pointer-events: none;
}
/* Tops in px, not %: the section runs past 920 once the copy wraps and a
   percentage would walk these two down the page. */
.v2-site-ab-bright__fairy { position: absolute; height: auto; z-index: 3; pointer-events: none; }
.v2-site-ab-bright__fairy--pink   { left: 14.375%; top: 53px;  width: 12.292%; }  /* 276, 236 */
.v2-site-ab-bright__fairy--yellow { left: 72.760%; top: 392px; width:  9.125%; }  /* 1397, 175.2 */
.v2-site-ab-bright__in {
  position: relative; z-index: 2; margin-inline: auto;
  display: grid; justify-items: center;
}
.v2-site-ab-bright .v2-site-h2 {
  color: #fff; letter-spacing: -.04em; line-height: 1; text-align: center; margin: 0;
}
.v2-site-ab-bright__card {
  background: #1582cf; border: 1px solid rgba(0, 62, 107, .10); border-radius: 16px;
  display: flex; flex-direction: column;
}
.v2-site-ab-bright__ico {
  flex: 0 0 auto; display: block; border-radius: 999px;
  background: rgba(255, 255, 255, .20);                                  /* #ffffff @20% */
}
.v2-site-ab-bright__ico::before {
  content: ""; display: block; width: 100%; height: 100%; background-color: #fff;
  -webkit-mask: var(--ico) center / 60% no-repeat; mask: var(--ico) center / 60% no-repeat;
}
.v2-site-ab-bright__card h3 {
  color: #fff; font-weight: 700; text-transform: none; letter-spacing: 0;
}
.v2-site-ab-bright__card p { margin: 0; color: #fff; }

/* --- Stats (3747:6826): three 480 cards, each a flat colour inside an 11px
   white rim, with a pill under the number. --- */
.v2-site--about .v2-site-stat {
  border: 11px solid #fff; border-radius: 24px; text-align: center;     /* 11 / 24 */
  display: grid; justify-items: center; box-shadow: none;
}
.v2-site--about .v2-site-stat:nth-child(1) { background: var(--blue-deep); }   /* #003e6b */
.v2-site--about .v2-site-stat:nth-child(2) { background: var(--blue); }        /* #0078cd */
.v2-site--about .v2-site-stat:nth-child(3) { background: #ff399e; }            /* #ff399e */
.v2-site--about .v2-site-stat b,
.v2-site--about .v2-site-stat__n {
  color: #fff; font-family: var(--display); font-weight: 800;
  letter-spacing: -.11em; line-height: .9;                              /* 96/86.4 */
}
.v2-site--about .v2-site-stat__l { color: #fff; font-weight: 700; margin-top: 0; }
/* The pill straddles the card's bottom edge in the comp, which is why a 480x225
   card holds 303 of content: it is out of flow. */
.v2-site--about .v2-site-stat { position: relative; }
.v2-site--about .v2-site-stat__s {
  position: absolute; left: 50%; bottom: 0; translate: -50% 50%;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  border-radius: 333px; background: #fff; color: var(--blue-deep);     /* 333 */
  border: 4px solid #d9d9d9; font-weight: 700; text-transform: uppercase;  /* 4 inside */
}

/* The pill hangs half its height below the card, so the row reserves 23 before
   the caption's own 16 (comp: 225 card in a 248 row). */
.v2-site--about .v2-site-stats { padding-bottom: 23px; }               /* 248 - 225 */
.v2-site-stat-cap { text-align: center; color: var(--blue); }          /* #0078cd */

/* ======================= DESKTOP (the 1920 comp) ======================== */
@media (min-width: 1024px) {
  /* The same hero as /obamacare: the comp frame is 576 with its own 120.6
     header drawn in, so the section is 455.4, and the fairies start at y=119
     -- the shared -31 pulls them up until the header clips the pink one's head. */
  .v2-site--about .v2-site-chero { min-height: clamp(400px, 23.72vw, 455px); }  /* 455.4 */
  .v2-site--about .v2-site-chero__fairy { top: -1px; }                  /* 119 - 120.6 */

  .v2-site--about .v2-site-sec { padding-block: 96px; }                 /* 96 */
  .v2-site--about .v2-site-sec .v2-site-wrap--wide { max-width: 1528px; }  /* 1480 + 2x24 */

  /* The bar is 1872 wide, 24 off each edge rather than inside the 1480. */
  .v2-site-ab-bar > .v2-site-wrap--wide { max-width: none; padding-inline: 24px; }
  .v2-site--about .v2-site-info { padding: 32px 70px; gap: 32px; }      /* 32 / 70, 32 */
  /* Only from here up: on a 375 phone an unwrappable address is 23 wider than
     the screen, and the bar is a single column there anyway. */
  .v2-site--about .v2-site-info__item { flex: 0 0 auto; }
  .v2-site--about .v2-site-info__val { white-space: nowrap; }
  .v2-site--about .v2-site-info__lbl { font-size: 16px; line-height: 1.28; }  /* 16/20.5 */
  .v2-site--about .v2-site-info__val { font-size: 18px; line-height: 1.5; }   /* 18/27 */
  .v2-site--about .v2-site-info__item:first-child a.v2-site-info__val {
    font-size: 24px; line-height: 1;                                    /* 24/24 */
  }

  .v2-site-ab-row {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 600fr) minmax(0, 808fr);           /* 600 | 808 */
    column-gap: 72px;                                                   /* 72 */
  }
  .v2-site-ab-story .v2-site-ab-row {
    grid-template-columns: minmax(0, 808fr) minmax(0, 600fr);           /* 808 | 600 */
  }
  .v2-site-ab-lead .v2-site-ab-row__copy { gap: 0; }
  /* Three siblings now, so each breakpoint can order them: the photo holds
     column 1 across both rows, the copy and the dictionary stack in column 2. */
  .v2-site-ab-way .v2-site-ab-row { grid-template-rows: auto auto; align-items: start; }
  .v2-site-ab-way .v2-site-ab-shot { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .v2-site-ab-way .v2-site-ab-row__copy { grid-column: 2; grid-row: 1; }
  .v2-site-ab-way .v2-site-def { grid-column: 2; grid-row: 2; margin-top: 32px; }
  /* The desktop comp has no kicker on this row; the phone one does. */
  .v2-site-ab-way .v2-site-eyebrow { display: none; }
  .v2-site-ab-row__copy { display: grid; gap: 0; }
  .v2-site--about .v2-site-ab-row .v2-site-h2 { font-size: 48px; line-height: 1; }  /* 48/48 */
  .v2-site--about .v2-site-rule { margin: 8px 0; }                      /* 8 */
  .v2-site-ab-way .v2-site-ab-row p { font-size: 20px; line-height: 1.5; }   /* 20/30 */
  .v2-site-ab-story .v2-site-ab-row p { font-size: 18px; line-height: 1.5; } /* 18/27 */
  .v2-site--about .v2-site-def { display: grid; gap: 16px; }            /* 16 */
  .v2-site--about p.v2-site-def__lbl { font-size: 30px; line-height: 1; }  /* 30/30 */
  .v2-site--about .v2-site-def__word { font-size: 40px; }               /* 40/40 */
  .v2-site--about .v2-site-def__ipa { font-size: 20px; line-height: 1.5; }   /* 20/30 */
  .v2-site--about p.v2-site-def__body { font-size: 20px; line-height: 1.5; }  /* 20/30 */

  .v2-site--about .v2-site-slab--founder { padding: 96px 220px; }       /* 96 / 220 */
  .v2-site--about .v2-site-slab--founder .v2-site-head { max-width: 746px; margin-bottom: 56px; }
  .v2-site--about .v2-site-slab--founder .v2-site-head p { max-width: 571px; margin-inline: auto; }  /* 571 */
  .v2-site--about .v2-site-slab--founder .v2-site-h2 { font-size: 48px; line-height: 1; }
  .v2-site--about .v2-site-founder {
    max-width: 737px; padding: 47px; gap: 48px;                         /* 737, 48 / 48 */
    display: flex; align-items: center;
  }
  .v2-site--about .v2-site-founder__av { width: 140px; height: 140px; }  /* 140 */
  .v2-site--about .v2-site-founder h3 { font-size: 36px; }              /* 36/36 */
  .v2-site--about .v2-site-founder__role { font-size: 24px; margin: 4px 0 16px; }  /* 24/24, 4 / 16 */
  .v2-site--about .v2-site-founder > div > p:last-child { font-size: 20px; line-height: 1.5; }

  /* The reach head runs to 1327 on one line in the comp; the shared .v2-site-head
     caps it narrower and wraps it. */
  .v2-site--about .v2-site-head { max-width: 1327px; }                  /* 1327 */
  .v2-site--about .v2-site-stats { gap: 20px; }                         /* 20 */
  /* Closing band (5150:5436). The shared ctaslim band runs a 64 heading and one
     uppercase 20/20 line; this comp sets a 40 heading, a tracked caps lead, a
     sentence line under it and the sign-off in yellow. */
  .v2-site--about .v2-site-cta h2 { font-size: 40px; }                  /* 40/40 */
  .v2-site--about .v2-site-cta p {
    font-size: 20px; line-height: 1; letter-spacing: .08em;             /* 20/20, 1.6 */
    font-weight: 500; margin-top: 8px;                                  /* 8 */
  }
  .v2-site--about p.v2-site-cta__line {
    font-family: inherit; font-weight: 400; text-transform: none;
    letter-spacing: 0; font-size: 18px; line-height: 1.5;               /* 18/27 */
    /* 558 is the comp node, but Jost wraps there where Futura PT does not;
       the copy column is 626 and the line sits on one at that width. */
    max-width: 626px; margin-top: 12px;                                 /* 558 */
  }
  .v2-site--about p.v2-site-cta__note {
    color: #ffeb00; font-family: var(--display); font-weight: 800;      /* #ffeb00 */
    text-transform: uppercase; letter-spacing: -.04em; line-height: 1;
    font-size: 28.47px; margin-top: 12px;                               /* 28.47/28.5 */
  }
  .v2-site--about .v2-site-cta__copy { flex: 0 1 626px; }               /* 626 */
  /* She stands at 866 on this comp, not /obamacare's 922. */
  .v2-site--about .v2-site-cta::before { left: 46.260%; }               /* 866 of 1872 */
  /* The comp's gaps are cap-to-cap on leading-trimmed frames: 8 / 4 / 12.8
     between four blocks that sit 25 below the bar top and 14 above its foot. */
  .v2-site--about .v2-site-cta__bar { padding-block: 22px 15px; }      /* 172 tall */
  .v2-site--about p.v2-site-cta__line { margin-top: 4px; }              /* 4 */
  .v2-site--about p.v2-site-cta__note { margin-top: 8px; }              /* 12.8 cap */

  /* Bright honest: 1780 inner, 63 between the three blocks, cards 340 by 20. */
  .v2-site--about .v2-site-ab-bright { padding-block: 96px; }           /* 96 */
  .v2-site-ab-bright__in { max-width: 1920px; padding-inline: 70px; gap: 63px; }  /* 70, 63 */
  .v2-site-ab-bright .v2-site-h2 { font-size: 48px; }                   /* 48/48 */
  .v2-site-ab-bright__grid {
    display: grid; grid-template-columns: repeat(3, 340px); gap: 20px;  /* 340, 20 */
  }
  .v2-site-ab-bright__card { padding: 31px; gap: 16px; }                /* 32 less the ring */
  .v2-site-ab-bright__ico { width: 40px; height: 40px; }                /* 40 */
  .v2-site-ab-bright__card h3 { font-size: 20px; line-height: 1.5; margin: 0 0 8px; }  /* 20/30, 8 */
  .v2-site-ab-bright__card p { font-size: 18px; line-height: 1.5; }     /* 18/27 */

  .v2-site--about .v2-site-stat { padding: 37px; gap: 16px; }           /* 48 less the rim */
  .v2-site--about .v2-site-stat b,
  .v2-site--about .v2-site-stat__n { font-size: 96px; }                 /* 96/86.4 */
  .v2-site--about .v2-site-stat__l { font-size: 20px; line-height: 1.5; }  /* 20/30 */
  .v2-site--about .v2-site-stat__s { padding: 12px 16px; font-size: 18px; line-height: 1.5; }  /* 12 / 16, 18/27 */
  .v2-site-stat-cap { font-size: 20px; line-height: 1.5; margin-top: 16px; }  /* 20/30, 16 */
}

/* ======================== PHONE ========================================= */
@media (max-width: 1023px) {
  .v2-site--about .v2-site-info { border-radius: 24px; }
  .v2-site--about .v2-site-info__ico { width: 40px; height: 40px; flex-basis: 40px; }
  .v2-site-ab-row { display: grid; gap: 24px; }
  /* Row 1 on the phone comp (5078:5378) drops the photograph and turns the
     dictionary into a blue card above the copy; row 2 keeps its photo, under. */
  .v2-site-ab-way .v2-site-ab-shot { display: none; }
  .v2-site-ab-way .v2-site-ab-row { gap: 48px; }                        /* 48 */
  .v2-site-ab-way .v2-site-def { order: 0; margin-top: 0; }
  .v2-site-ab-way .v2-site-ab-row__copy { order: 1; }
  .v2-site-ab-way .v2-site-eyebrow { display: block; margin-bottom: 8px; }  /* 8 */
  .v2-site-ab-way .v2-site-rule { display: none; }
  .v2-site--about .v2-site-ab-way .v2-site-def {
    background: var(--blue); border-radius: 20px; padding: 32px; gap: 16px;   /* 20 / 32, 16 */
  }
  .v2-site--about .v2-site-ab-way p.v2-site-def__lbl {
    color: #ffeb00; font-size: 20px; line-height: 1.15;                 /* #ffeb00, 20/23 */
  }
  .v2-site--about .v2-site-ab-way .v2-site-def__head { display: block; }
  .v2-site--about .v2-site-ab-way .v2-site-def__word,
  .v2-site--about .v2-site-ab-way .v2-site-def__ipa { color: #fff; }
  .v2-site--about .v2-site-ab-way .v2-site-def__word { font-size: 40px; }  /* 40/51.3 */
  .v2-site--about .v2-site-ab-way .v2-site-def__ipa { font-size: 20px; display: block; }
  .v2-site-ab-way .v2-site-eyebrow { font-size: 20px; line-height: 1.28; letter-spacing: .15em; }  /* 20/25.6, 3 */
  .v2-site--about .v2-site-ab-way p.v2-site-def__body { color: #fff; }
  /* A 50x4 pink rule sits between the word and the definition. */
  .v2-site--about .v2-site-ab-way p.v2-site-def__body::before {
    content: ""; display: block; width: 50px; height: 4px;              /* 50x4 */
    background: #ff399e; margin-bottom: 16px;
  }
  .v2-site-ab-shot { border-width: 8px; border-radius: 24px; }
  /* The phone comp stacks each copy block at 8 (5078:5385 / 5078:5390). The 24
     grid gap plus every child's own margin was giving 34 / 40 / 44. */
  .v2-site-ab-row__copy { display: grid; gap: 8px; }
  .v2-site-ab-row__copy > .v2-site-eyebrow { margin: 0; }
  .v2-site-ab-row__copy > .v2-site-rule { margin: 8px 0; }              /* 8 */
  .v2-site-ab-row__copy > p { margin: 0 0 8px; }                        /* 16 between */
  .v2-site-ab-row__copy > p:last-child { margin-bottom: 0; }
  .v2-site--about .v2-site-ab-row .v2-site-h2 { font-size: 32px; line-height: 1; }  /* 32/32 */
  .v2-site--about .v2-site-def { display: grid; gap: 12px; }
  .v2-site--about p.v2-site-def__lbl { font-size: 22px; line-height: 1; }
  .v2-site--about .v2-site-def__word { font-size: 30px; }
  .v2-site--about .v2-site-def__ipa { font-size: 16px; line-height: 1.25; }
  .v2-site--about p.v2-site-def__body { font-size: 18px; line-height: 1.5; }
  .v2-site--about .v2-site-slab--founder { border-radius: 24px; }
  .v2-site--about .v2-site-founder { padding: 24px; gap: 20px; }
  .v2-site--about .v2-site-founder__av { width: 96px; height: 96px; }
  .v2-site--about .v2-site-founder h3 { font-size: 26px; }
  .v2-site--about .v2-site-founder__role { font-size: 18px; margin: 4px 0 12px; }
  /* The phone comp (5078:5444) is a different composition: a rounded panel with
     no characters, no star field and no button, and the cards become translucent
     white rows with a yellow-tinted plate and a yellow glyph. */
  .v2-site--about .v2-site-ab-bright {
    padding-block: 48px; background: none; overflow: visible;           /* 48 */
  }
  .v2-site-ab-bright__stars,
  .v2-site-ab-bright__fairy,
  .v2-site-ab-bright__in > .v2-site-btn { display: none; }
  .v2-site-ab-bright__in {
    background: var(--blue); border-radius: 32px; padding: 24px;        /* 32 / 24 */
    gap: 56px; justify-items: stretch;                                  /* 56 */
  }
  .v2-site-ab-bright .v2-site-h2 { font-size: 32px; text-align: left; }  /* 32/32 */
  .v2-site-ab-bright__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .v2-site-ab-bright__card {
    background: rgba(255, 255, 255, .10); border: 0; padding: 24px;     /* #ffffff @10%, 24 */
    display: grid; grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px; row-gap: 12px; align-items: center;               /* 16 / 12 */
  }
  .v2-site-ab-bright__ico { width: 40px; height: 40px; background: rgba(255, 235, 0, .20); }
  .v2-site-ab-bright__ico::before { background-color: #ffeb00; }        /* #ffeb00 */
  .v2-site-ab-bright__card > div { display: contents; }
  .v2-site-ab-bright__card h3 {
    grid-column: 2; font-size: 20px; line-height: 1.15; margin: 0;      /* 20/23 */
    text-transform: uppercase; letter-spacing: -.02em;
  }
  .v2-site-ab-bright__card p {
    grid-column: 1 / -1; font-size: 16px; line-height: 1.25;            /* 16/20 */
    color: rgba(255, 255, 255, .8);                                     /* 80% */
  }

  .v2-site--about .v2-site-stat { padding: 24px; gap: 12px; }
  .v2-site--about .v2-site-stat__n { font-size: 54px; }
  .v2-site--about .v2-site-stat__s { padding: 9px 13px; font-size: 15px; line-height: 1.25; }
  .v2-site-stat-cap { font-size: 17px; line-height: 1.5; margin-top: 16px; }
}
/* ==========================================================================
   53. Careers (/careers) — 2026 redesign
   ==========================================================================
   Figma desktop 3747:3062, phone 3747:9710. Every section has its own canvas:
   "why agents" and the steps are 1480 (1920 less 220), the testimonials 1760,
   the programs 1780, the FAQ 1640, and both banners 1872. */

/* --- Why agents choose Madrinas (4673:1688 / 4854:1070). Five numbered
   flower badges over three concentric arcs the section clips. --- */
.v2-site-car-why { position: relative; overflow: hidden; background: #fff; }
.v2-site-car-why .v2-site-wrap { position: relative; }
.v2-site-car-why__ring {
  position: absolute; left: 50%; translate: -50% 0; pointer-events: none;
  border: 4px solid #edf7fd; border-radius: 50%;                      /* #edf7fd, 4 */
}
.v2-site-car-why__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
}
.v2-site-car-why__it { display: flex; align-items: center; }
/* The export carries the badge's drop shadow, so its 130x148 ink sits around a
   114 frame: the negative margins hand the row the comp's 114 box back. */
.v2-site-car-why__it img { flex: none; width: 130px; height: auto; margin: 0 -8px -34px; }
.v2-site-car-why__it b {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1; color: var(--blue-deep);    /* -0.96/24 */
}

/* ======================= DESKTOP (the 1920 comp) ======================== */
@media (min-width: 1024px) {
  .v2-site-car-why { padding-block: 96px; }                           /* 96 */
  .v2-site-car-why .v2-site-wrap--wide { max-width: 1480px; }         /* 1480 */
  .v2-site-car-why .v2-site-head { max-width: 772px; margin-bottom: 56px; }  /* 772, 56 */
  .v2-site-car-why .v2-site-h2 { font-size: 48px; line-height: 1; }   /* 48/48 */
  .v2-site-car-why .v2-site-head p {
    font-size: 20px; line-height: 1.5; max-width: 680px;              /* 20/30, 680 */
    margin: 8px auto 0;                                               /* 8 */
  }
  .v2-site-car-why__ring--1 { top: 141px; width: 814.7px; height: 814.7px; }
  .v2-site-car-why__ring--2 { top: 112.5px; width: 900.1px; height: 888.2px; }
  .v2-site-car-why__ring--3 { top: 174px; width: 725.2px; height: 725.2px; }
  .v2-site-car-why__list { column-gap: 24px; row-gap: 92px; }         /* 24 / 474-382 */
  .v2-site-car-why__it { gap: 20px; }                                 /* 395-261-114 */
  .v2-site-car-why__it b { font-size: 24px; }                         /* 24/24 */
}

/* ======================== PHONE (the 375 comp) =========================== */
@media (max-width: 1023px) {
  .v2-site-car-why { padding-block: 48px; }                           /* 48 */
  .v2-site-car-why .v2-site-head { margin-bottom: 32px; }             /* 32 */
  .v2-site-car-why .v2-site-h2 { font-size: 48px; line-height: 1; }   /* 48/48 */
  .v2-site-car-why .v2-site-head p { font-size: 20px; line-height: 1.5; margin-top: 8px; }
  .v2-site-car-why__ring { opacity: .5; }
  .v2-site-car-why__ring--1 { top: 56px; width: 284.6px; height: 284.6px; }
  .v2-site-car-why__ring--2 { top: 28px; width: 325.2px; height: 325.2px; }
  .v2-site-car-why__ring--3 { top: 72px; width: 243.9px; height: 243.9px; }
  .v2-site-car-why__list { flex-direction: column; row-gap: 24px; }   /* 460-436 */
  .v2-site-car-why__it { gap: 16px; }                                 /* 154-138 */
  .v2-site-car-why__it b { font-size: 24px; }                         /* 24/24 */
}
/* --- Get started in 3 simple steps (3747:3201 / 3747:9857). The band's blue is
   #0078cd exactly: the star strip is flattened onto that colour (it has no alpha
   channel), so changing the background here leaves a visible seam. --- */
.v2-site-car-steps { background: #0078cd; background-image: none; }
.v2-site-car-steps .v2-site-wrap { position: relative; z-index: 1; }
.v2-site-car-steps__stars,
.v2-site-car-steps__ghost { position: absolute; height: auto; max-width: none; pointer-events: none; }
.v2-site-car-steps__stars { top: 0; left: .688%; width: 98.646%; }     /* 13.2, 1894 of 1920 */
.v2-site-car-steps__stars--phone { display: none; }
.v2-site-car-steps__ghost { width: 22.448%; }                          /* 431 of 1920 */
.v2-site-car-steps__ghost--l { left: -.651%; bottom: -68px; }          /* -12.5 */
.v2-site-car-steps__ghost--r { left: 82.214%; bottom: -82px; }         /* 1578.5 */

.v2-site-car-steps .v2-site-eyebrow { color: #ffeb00; letter-spacing: .15em; margin: 0 0 8px; }  /* 2.4/16, 8 */
.v2-site-car-steps .v2-site-h2 { color: #fff; text-transform: uppercase; letter-spacing: -.04em; }
.v2-site-car-steps .v2-site-steps { align-items: start; }
/* The comp draws the cyan ledge as a hard 8px drop shadow, not a bottom border. */
.v2-site-car-steps .v2-site-step {
  border-bottom: 0; border-radius: 32px; box-shadow: 0 8px 0 #00b6ed;   /* 32, 0 8 0 #00b6ed */
}
.v2-site-car-steps .v2-site-step__n {
  background: #0078cd; border: 4px solid #00b6ed;                       /* #0078cd, 4 #00b6ed */
  font-family: var(--display); font-weight: 800; line-height: 1;
}
.v2-site-car-steps .v2-site-step h3 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1; color: var(--blue-deep);      /* 24/24 */
}
.v2-site-car-steps .v2-site-step p { color: var(--blue-deep); }
.v2-site-car-steps .v2-site-steps__arrow img { width: 60px; height: 60px; }  /* 60 */

/* ======================= DESKTOP (the 1920 comp) ======================== */
@media (min-width: 1024px) {
  .v2-site-car-steps { padding: 96px 220px; }                           /* 96 / 220 */
  .v2-site-car-steps .v2-site-wrap { max-width: 1480px; }               /* 1480 */
  .v2-site-car-steps .v2-site-head { max-width: 717px; margin-bottom: 88px; }  /* 717, 56 + 32 */
  .v2-site-car-steps .v2-site-h2 { font-size: 48px; line-height: 1; }   /* 48/48 */
  .v2-site-car-steps .v2-site-eyebrow { font-size: 16px; line-height: 1.28; }  /* 16/20.5 */
  .v2-site-car-steps .v2-site-steps { gap: 16px; margin-top: 0; }       /* 16 */
  .v2-site-car-steps .v2-site-step { width: 400px; padding: 64px 32px 32px; }  /* 400, 64/32/32 */
  /* The comp sets the badge 135 from the card's left edge, not on its centre. */
  .v2-site-car-steps .v2-site-step__n {
    width: 80px; height: 80px; font-size: 48px;                         /* 80, 48/48 */
    top: -40px; left: 135px; transform: none;                           /* 221.4 vs 261, 403-268 */
  }
  .v2-site-car-steps .v2-site-step h3 { font-size: 24px; margin-bottom: 4px; }  /* 24/24, 4 */
  .v2-site-car-steps .v2-site-step p { font-size: 16px; line-height: 1.25; }    /* 16/20 */
}

/* ======================== PHONE (the 375 comp) =========================== */
@media (max-width: 1023px) {
  .v2-site-car-steps { padding: 48px 24px; }                            /* 48 / 24 */
  .v2-site-car-steps__stars,
  .v2-site-car-steps__ghost { display: none; }
  .v2-site-car-steps__stars--phone {
    display: block; top: 0; left: -14.667%; width: 129.6%;              /* -55, 486 of 375 */
  }
  .v2-site-car-steps .v2-site-wrap { padding-inline: 0; }
  .v2-site-car-steps .v2-site-head { margin-bottom: 80px; }             /* 48 + 32 */
  .v2-site-car-steps .v2-site-h2 { font-size: 36px; line-height: 1; }   /* 36/36 */
  .v2-site-car-steps .v2-site-eyebrow { font-size: 16px; line-height: 1.28; }
  .v2-site-car-steps .v2-site-steps { gap: 64px; margin-top: 0; flex-direction: column; }  /* 64 */
  .v2-site-car-steps .v2-site-step { width: 100%; padding: 64px 32px 32px; }
  .v2-site-car-steps .v2-site-step__n {
    width: 80px; height: 80px; font-size: 48px; top: -40px;
    left: 50%; transform: translateX(-50%);
  }
  .v2-site-car-steps .v2-site-step h3 { font-size: 24px; margin-bottom: 4px; }
  .v2-site-car-steps .v2-site-step p { font-size: 16px; line-height: 1.25; }
  /* The phone comp drops the arrows between the cards. */
  .v2-site-car-steps .v2-site-steps__arrow { display: none; }
}
/* ==========================================================================
   54. Contact us (/contact-us) — 2026 redesign
   ==========================================================================
   Figma desktop 3747:14374, phone 3747:15695. The offices + secure block and
   the logo-wall/form row share one 1780 canvas (1920 less 70); the closing
   trust band is 1480. */

/* --- Visit one of our local offices (3747:14534 / 3747:15854): three map
   cards, 572 of the 1780 canvas, 32 apart. --- */
.v2-site-con-off__grid { display: grid; gap: 32px; }                   /* 32 */
.v2-site-con-off__card {
  background: #fff; border: 1px solid #0078cd; border-radius: 24px;    /* 1 #0078cd, 24 */
  overflow: hidden; display: flex; flex-direction: column;
}
.v2-site-con-off__map { display: block; width: 100%; height: 220px; object-fit: cover; }  /* 220 */
.v2-site-con-off__body { padding: 24px; display: grid; gap: 12px; }    /* 24, 12 */
.v2-site-con-off__card h3 {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1; color: var(--blue-deep);     /* 24/24 */
}
/* The shared pin is yellow; the comp's is the section blue. */
.v2-site-con-off__pin {
  flex: none; width: 16px; height: 21px; background-color: #0078cd;    /* #0078cd */
  -webkit-mask: var(--ico) no-repeat center / contain;
          mask: var(--ico) no-repeat center / contain;
}
.v2-site-con-off__card p { margin: 0; color: var(--blue-deep); }
/* The comp runs the rule the full width of the card, outside the body's 24. */
.v2-site-con-off__tel {
  border-top: 1px solid #ecf5fb; margin-inline: -24px;                 /* #ecf5fb */
  padding: 12px 24px 0; font-weight: 700; text-transform: uppercase;
}
.v2-site-con-off__tel,
.v2-site-con-off__tel a { color: #0078cd; text-decoration: none; }     /* #0078cd */
.v2-site-con-off__tel a:hover { text-decoration: underline; }
/* The comp draws this as a text line; on a phone it is a dial target, so the
   hit area is padded to 44 without moving the baseline. */
.v2-site-con-off__tel a { display: inline-block; padding-block: 12px; margin-block: -12px; }

/* --- Your information is secure (4854:7282 / 4854:7269). --- */
.v2-site-con-secure { text-align: center; }
.v2-site-con-secure h2 {
  color: #0078cd; font-family: var(--display); font-weight: 800;       /* #0078cd */
  text-transform: uppercase; letter-spacing: -.04em; line-height: 1; margin: 0;
}
.v2-site-con-secure p {
  color: var(--blue-deep); font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.04em; line-height: 1;
}

/* ======================= DESKTOP (the 1920 comp) ======================== */
@media (min-width: 1024px) {
  .v2-site-con-off { padding-block: 96px; }                            /* 96 */
  .v2-site-con-off .v2-site-wrap--wide { max-width: 1828px; }          /* 1780 + 2x24 */
  .v2-site-con-off .v2-site-head { max-width: 753px; margin-bottom: 56px; }  /* 753, 56 */
  .v2-site-con-off .v2-site-h2 { font-size: 48px; line-height: 1; }    /* 48/48 */
  .v2-site-con-off .v2-site-head p {
    font-size: 20px; line-height: 1.5; max-width: 680px; margin: 8px auto 0;  /* 20/30, 680, 8 */
  }
  .v2-site-con-off__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The caravana photo above the cards keeps the section's own 56 rhythm. */
  .v2-site-con-off .v2-site-h2r-off__photo--solo { margin-bottom: 56px; }
  .v2-site-con-off__card h3 { font-size: 24px; }                       /* 24/24 */
  .v2-site-con-off__card p { font-size: 16px; line-height: 1.25; }     /* 16/20 */
  .v2-site-con-secure { margin-top: 56px; }                            /* 692 - 636 */
  .v2-site-con-secure h2 { font-size: 48px; }                          /* 48/48 */
  .v2-site-con-secure p { font-size: 24px; margin: 24px 0 0; }         /* 24/24, 24 */
}

/* ======================== PHONE (the 375 comp) =========================== */
@media (max-width: 1023px) {
  .v2-site-con-off { padding-block: 48px; }                            /* 48 */
  .v2-site-con-off .v2-site-wrap { padding-inline: 24px; }             /* 24 */
  .v2-site-con-off .v2-site-head { margin-bottom: 48px; }              /* 245 - 197 */
  .v2-site-con-off .v2-site-h2r-off__photo--solo { margin-bottom: 40px; }
  .v2-site-con-off .v2-site-h2 { font-size: 30px; line-height: 1; }    /* 30/30 */
  .v2-site-con-off .v2-site-head p { font-size: 18px; line-height: 1.5; margin-top: 8px; }  /* 18/27 */
  .v2-site-con-off__card h3 { font-size: 24px; }
  .v2-site-con-off__card p { font-size: 16px; line-height: 1.25; }
  .v2-site-con-secure { margin-top: 48px; }                            /* 1501 - 1453 */
  .v2-site-con-secure h2 { font-size: 30px; }                          /* 30/30 */
  .v2-site-con-secure p { font-size: 20px; margin: 24px 0 0; }         /* 20/20, 24 */
}
/* --- Logo wall + form (4513:5697 / 3747:15882). One 1282.8 row, 74 apart,
   with the star field behind the whole section. --- */
.v2-site-con-off { position: relative; overflow: hidden; }
.v2-site-con-off > .v2-site-wrap { position: relative; z-index: 1; }
/* The art is flattened onto white like the band on /careers, so this section's
   background must stay #fff. */
/* The plume is 1284 tall and the comp's section clips all but its pale top,
   so the section hides its overflow and this sits on the row, not the page. */
.v2-site-con-form { position: relative; }
.v2-site-con-form > :not(.v2-site-con-form__stars) { position: relative; z-index: 1; }
.v2-site-con-form__stars {
  position: absolute; left: 50%; translate: -50% 0; max-width: none;
  width: 104.688vw; height: auto; pointer-events: none;                /* 2010 of 1920 */
}
.v2-site-con-form__t {
  margin: 0; color: #0078cd; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .19em; line-height: 1.084;  /* 4.56/24, 26/24 */
}
.v2-site-con-form__lbl {
  display: flex; align-items: center; gap: 16px; margin: 0;
  color: var(--blue-deep); font-weight: 500; text-transform: uppercase;
  letter-spacing: .33em; font-size: 12px; line-height: 1.28;           /* 4/12, 12/15.4 */
}
.v2-site-con-form__lbl::after {
  content: ""; flex: 1; height: 1px; background: #0078cd; opacity: .35;
}
.v2-site-con-form__logos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center; justify-items: center;
  column-gap: 24px; row-gap: 30px;                                     /* 69 pitch less 40 */
}
.v2-site-con-form__logos img { max-width: 100%; max-height: 40px; width: auto; height: auto; }  /* 40 */
.v2-site-con-off .v2-site-form-card { box-shadow: 0 12px 32px rgba(0, 40, 80, .15); }  /* 0 12 32, .15 */

/* ======================= DESKTOP (the 1920 comp) ======================== */
@media (min-width: 1024px) {
  .v2-site-con-form__stars { top: 137px; }                             /* 981 - 844 */
  /* Proportional, not fixed: at 1024 a 1282.8 row pushed the card off the
     section. The ratio is the comp's, the cap is its width. */
  .v2-site-con-form {
    display: grid; gap: 74px;                                          /* 74 */
    grid-template-columns: minmax(0, 529.8fr) minmax(0, 679fr);        /* 529.8 | 679 */
    max-width: 1282.8px; margin: 56px auto 0;                          /* 1282.8, 844 - 788 */
    align-items: center;
  }
  .v2-site-con-form__trust { display: grid; gap: 22px; align-content: start; }  /* 22 */
  .v2-site-con-form__t { font-size: 24px; }                            /* 24/26 */
  .v2-site-con-form__logos { margin-top: 18px; }                       /* 956 - 908 - 30 */
  .v2-site-con-off .v2-site-form-card { padding: 32px; border-radius: 24px; }  /* 32, 24 */
}

/* ======================== PHONE (the 375 comp) =========================== */
@media (max-width: 1023px) {
  /* The phone comp drops the logo wall and keeps the card on its own. */
  .v2-site-con-form__trust { display: none; }
  .v2-site-con-form { margin-top: 48px; }                              /* 48 */
  .v2-site-con-off .v2-site-form-card { padding: 24px; border-radius: 24px; }  /* 24, 24 */
  .v2-site-con-form__stars { top: 40%; width: 180vw; }
}
/* --- Closing trust band (3747:14616 / 3747:15907): a 1480 canvas, the secure
   line over the two label groups side by side. --- */
.v2-site-con-trust__t {
  margin: 0 0 16px; color: #0078cd; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .19em; line-height: 1.084;  /* 4.56/24, 26/24, 16 */
}
/* The full carrier set is in the wall above; the comp's closing band repeats
   only the first five and three. */
.v2-site-con-trust .v2-site-trust__t { display: none; }
.v2-site-con-trust .v2-site-trust__row > :nth-child(n+6) { display: none; }
.v2-site-con-trust .v2-site-trust__row--press > :nth-child(n+4) { display: none; }

@media (min-width: 1024px) {
  .v2-site-con-trust { padding-block: 32px; }                          /* 32 */
  .v2-site-con-trust .v2-site-wrap--wide { max-width: 1528px; }        /* 1480 + 2x24 */
  .v2-site-con-trust__t { font-size: 24px; }                           /* 24/26 */
  .v2-site-con-trust .v2-site-trust { flex-wrap: nowrap; align-items: center; }
}

@media (max-width: 1023px) {
  .v2-site-con-trust { padding-block: 48px; }                          /* 48 */
  .v2-site-con-trust__t { font-size: 18px; }
}
/* --- Phone-only deltas the desktop comp does not show (3747:15695). --- */
.v2-site-con-trust__t--phone { display: none; }

@media (max-width: 1023px) {
  /* The phone comp carries the secure line in the offices section instead, and
     heads the closing band with the families line. */
  .v2-site-con-trust .v2-site-con-trust__t { display: none; }
  .v2-site-con-trust .v2-site-con-trust__t--phone { display: block; font-size: 24px; }  /* 24/26 */

  /* The hero badge is hidden site-wide on phones; this comp draws it (4854:7255). */
  .v2-site--contact .v2-site-chero__badge { margin-top: 23px; }        /* 356 - 333 */
  /* This comp runs a 48 headline where the shared phone rule sets 40. */
  .v2-site--contact .v2-site-chero h1 { font-size: 48px; line-height: 1; max-width: 371px; }  /* 48/48, 371 */
  .v2-site--contact .v2-site-chero__actions { margin-top: 38px; }      /* 431 - 393 */
  .v2-site--contact .v2-site-chero__btn { min-height: 56px; }          /* 56 */

  /* Contact info bar (3747:15822): a 327 card, not the shared strip's sizes. */
  .v2-site--contact .v2-site-chero + .v2-site-wrap { padding-inline: 24px; }  /* 327 */
  .v2-site--contact .v2-site-info {
    border-radius: 32px; padding: 32px; gap: 32px;                     /* 32 */
  }
  .v2-site--contact .v2-site-info__item { align-items: flex-start; gap: 16px; }  /* 120 - 104 */
  .v2-site--contact .v2-site-info__ico {
    width: 48px; height: 48px; flex-basis: 48px; flex: none;           /* 48 */
  }
  .v2-site--contact .v2-site-info__ico svg { width: 24px; height: 24px; }  /* 24 */
  .v2-site--contact .v2-site-info__lbl {
    text-transform: uppercase; color: var(--blue-deep); font-weight: 700;
    font-size: 16px; line-height: 1.25; margin-bottom: 2px;            /* 16/20 */
  }
  .v2-site--contact .v2-site-info__val {
    color: var(--blue-deep); font-weight: 700; font-size: 16px; line-height: 1.25;  /* 16/20 */
  }
  .v2-site--contact a.v2-site-info__val {
    color: #0078cd;                                                    /* #0078cd */
    display: inline-block; padding-block: 10px; margin-block: -10px;   /* 44 tap target */
  }
  .v2-site--contact a.v2-site-info__val[href^="tel:"] {
    color: #0078cd; font-family: var(--display); font-weight: 800;     /* #0078cd */
    text-transform: uppercase; letter-spacing: -.04em;
    font-size: 24px; line-height: 1;                                   /* 24/24 */
  }
}
/* ==========================================================================
   55. Legal pages (/terms-and-conditions, /privacy-policy) — 2026 redesign
   ==========================================================================
   Figma: terms 3747:12457 / 3747:17547, privacy 3747:13359 / 3747:16534. Both are
   one 1480 column (1920 less 220) with no sidebar — the comps drop the "On this
   page" nav — so they share .v2-site--legaldoc. Only the gap between a section's
   blocks differs: 16 on terms, 24 on privacy. */
.v2-site--legaldoc { --legal-gap: 16px; }
.v2-site--privacy { --legal-gap: 24px; }                              /* 24 */

.v2-site--legaldoc .v2-site-legal__body { grid-template-columns: minmax(0, 1fr); }
.v2-site--legaldoc .v2-site-legal { color: var(--blue-deep); }
.v2-site--legaldoc .v2-site-legal__intro {
  color: var(--blue-deep); font-weight: 700; max-width: none;
}
/* A Spanish reader reaches this page from the Spanish consent checkbox, whose
   "Términos de Uso" link has no Spanish twin to point at. The page's own
   section 9 already offers an agent who will explain it in Spanish; this
   surfaces that sentence at the top rather than leaving it nine sections down.
   Same words, no new legal text. */
/* Not flex: the sentence has an inline <a> in it, and flex would make the text,
   the link and the closing full stop three flex items with the gap between them
   ("855-623-7462 ."). The icon is positioned instead. */
.v2-site--legaldoc .v2-site-legal__es {
  position: relative; margin: 20px 0 0;
  background: #e3f1fc; border-radius: 16px; padding: 18px 22px 18px 56px;
  color: var(--blue-deep); font-weight: 600; line-height: 1.5;
}
.v2-site--legaldoc .v2-site-legal__es::before {
  content: ""; position: absolute; left: 22px; top: 19px;
  width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.v2-site--legaldoc .v2-site-legal__es a { color: var(--blue); font-weight: 700; white-space: nowrap; }
/* .v2-site-legal is a grid item, so these margins never collapse with the
   intro's -- the gap belongs to the section alone or it doubles. */
.v2-site--legaldoc .v2-site-legal > section { padding-block: 0; border-top: 0; }
/* Every section is preceded by the rule, the intro included, so the first one
   gets it too. 1493 of the 1480 column, hence the negative inline margin. */
.v2-site--legaldoc .v2-site-legal > section::before {
  content: ""; display: block; height: 2px;                            /* 2 */
  background: rgba(0, 120, 205, .15);                                  /* #0078cd @15% */
}
.v2-site--legaldoc .v2-site-legal h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; color: var(--blue-deep);                     /* -1.44/36 */
  margin: 0 0 var(--legal-gap);
}
.v2-site--legaldoc .v2-site-legal h2:not(:first-child) { margin-top: 0; }
.v2-site--legaldoc .v2-site-legal p { margin: 0 0 var(--legal-gap); }
.v2-site--legaldoc .v2-site-legal p:last-child { margin-bottom: 0; }
.v2-site--legaldoc .v2-site-legal__caps { font-size: inherit; letter-spacing: 0; }
/* Terms opens with the intro prose and a rule under it; privacy opens straight on
   its first section, which the comp leaves unruled. */
.v2-site--privacy .v2-site-legal > section:first-child::before { content: none; }

/* --- The blue banner above privacy's body (3747:13482). --- */
.v2-site--privacy .v2-site-legal__band {
  border-radius: 32px; text-align: center;                             /* 32 */
}
/* The banner is 1872 — 24 off each edge, not inside the content wrap. */
.v2-site--privacy .v2-site-chero + .v2-site-wrap--wide {
  max-width: none; padding-inline: 24px;                               /* 1872 */
}
.v2-site--privacy .v2-site-legal__band h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1; margin: 0;                   /* -1.92/48 */
}
.v2-site--privacy .v2-site-legal__band p {
  color: rgba(255, 255, 255, .85); max-width: 1158px;                  /* 85%, 1158 */
}

/* ======================= DESKTOP (the 1920 comp) ======================== */
@media (min-width: 1024px) {
  .v2-site--legaldoc .v2-site-sec { padding-block: 64px; }                /* 64 */
  /* Only the legal column. Unscoped this also caught the header's own
     .v2-site-wrap--wide and squeezed it from 1870 to 1528. */
  .v2-site--legaldoc .v2-site-sec > .v2-site-wrap--wide { max-width: 1528px; }  /* 1480 + 2x24 */
  .v2-site--legaldoc .v2-site-legal { font-size: 18px; line-height: 1.5; }  /* 18/27 */
  .v2-site--legaldoc .v2-site-legal__intro {
    font-size: 20px; line-height: 1.5; margin: 0;                      /* 20/30 */
  }
  .v2-site--legaldoc .v2-site-legal > section { margin-top: 56px; }       /* 56 */
  .v2-site--legaldoc .v2-site-legal > section::before {
    margin: 0 -6.5px 56px;                                             /* 1493 of 1480, 56 */
  }
  .v2-site--legaldoc .v2-site-legal h2 { font-size: 36px; line-height: 1; }  /* 36/36 */
  /* The hero runs a 40 headline where the shared chero sets 64. */
  .v2-site--legaldoc .v2-site-chero h1 { font-size: 40px; line-height: 1; }  /* 40/40 */
  .v2-site--legaldoc .v2-site-chero__sub { font-size: 20px; line-height: 1.5; max-width: 839px; }  /* 20/30, 839 */
  .v2-site--privacy .v2-site-legal__band { padding: 32px 48px; }       /* 32 */
  .v2-site--privacy .v2-site-legal__band h2 { font-size: 48px; }       /* 48/48 */
  .v2-site--privacy .v2-site-legal__band p { font-size: 20px; line-height: 1.5; margin: 16px auto 0; }  /* 20/30, 16 */
  .v2-site--privacy .v2-site-legal > section:first-child { margin-top: 0; }
}

/* ======================== PHONE (the 375 comp) =========================== */
@media (max-width: 1023px) {
  .v2-site--legaldoc .v2-site-sec { padding-block: 48px; }                /* 48 */
  .v2-site--legaldoc .v2-site-sec > .v2-site-wrap { padding-inline: 24px; }  /* 327 */
  .v2-site--legaldoc .v2-site-legal { font-size: 16px; line-height: 1.25; }  /* 16/20 */
  .v2-site--legaldoc .v2-site-legal__intro {
    font-size: 18px; line-height: 1.5; opacity: .7; margin: 0;         /* 18/27, 70% */
  }
  .v2-site--legaldoc .v2-site-legal > section { margin-top: 32px; }       /* 32 */
  .v2-site--legaldoc .v2-site-legal > section::before { margin: 0 0 32px; }
  .v2-site--legaldoc .v2-site-legal h2 { font-size: 30px; line-height: 1; }  /* 30/30 */
  .v2-site--legaldoc .v2-site-chero h1 { font-size: 48px; line-height: 1; max-width: 353px; }  /* 48/48, 353 */
  .v2-site--privacy .v2-site-legal__band { padding: 32px 24px; }       /* 32 / 24 */
  .v2-site--privacy .v2-site-legal__band h2 { font-size: 30px; }       /* 30/30 */
  .v2-site--privacy .v2-site-legal__band p { font-size: 16px; line-height: 1.25; margin: 16px auto 0; }
  .v2-site--privacy .v2-site-legal > section:first-child { margin-top: 0; }
  .v2-site--legaldoc .v2-site-chero__sub { font-size: 18px; line-height: 1.5; max-width: 353px; }  /* 18/27 */
  .v2-site--terms .v2-site-chero__badge { margin-top: 18px; max-width: 327px; }  /* 429 - 411, 307 */
}
/* ==========================================================================
   56. Components from the retired 4842 Medicaid/SEP build
       Both pages moved to the 5284 comps on 2026-10-19 (sections 58 and 59),
       so nothing here is on a page any more. It is kept because macros.html's
       elig_band() and offices_form_band() still draw .v2-site-elig* and
       .v2-site-sep-offhours, and the client asked for that eligibility band
       by name. Delete this section and those two macros together, or not at all.
   ==========================================================================
   Figma 4842:3765 — desktop 4842:3766, phone 4842:4469 in one container.
   That comp is an HTML page imported into Figma (Container/Section/Margin frame
   names, Material ligatures sitting in it as literal text, empty map boxes), so
   it is read here as a content and structure spec and drawn with the site's own
   components. Canvas 1480, the same as the other /v2 pages. */

.v2-site--lmc .v2-site-rule--yellow { background: var(--yellow); }
.v2-site-sep-works { overflow-x: clip; }

/* Check and cross lists. */
.v2-site-sep-checks, .v2-site-sep-crosses {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
}
.v2-site-sep-checks li, .v2-site-sep-crosses li {
  position: relative; padding-left: 32px; color: var(--ink-soft); line-height: 1.5;
}
.v2-site-sep-checks li::before, .v2-site-sep-crosses li::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green) no-repeat center / 12px 12px;
  -webkit-mask: none;
}
.v2-site-sep-checks li::after {
  content: ""; position: absolute; left: 5px; top: calc(.15em + 6px);
  width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  rotate: -45deg;
}
.v2-site-sep-crosses li::before { background-color: var(--pink); }
.v2-site-sep-crosses li::after {
  content: "\00d7"; position: absolute; left: 0; top: .15em; width: 20px;
  color: #fff; font-weight: 700; font-size: 14px; line-height: 20px; text-align: center;
}

/* --- Intro: copy beside the eligibility form. --- */
.v2-site-sep-intro__in { display: grid; gap: 48px; align-items: start; }
.v2-site--lmc .v2-site-eyebrow { color: var(--pink); }

/* --- How it works: two cards with the event between them. --- */
.v2-site-sep-line { list-style: none; margin: 0; padding: 0; display: grid; align-items: center; }
.v2-site-sep-line__step {
  background: #eaf4fd; border-radius: 24px; padding: 28px;             /* 24 */
}
.v2-site-sep-line__step--after { background: var(--blue); color: #fff; }
.v2-site-sep-line__n {
  font-family: var(--display); font-weight: 800; color: var(--blue);
  line-height: 1; margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px;
}
.v2-site-sep-line__step--after .v2-site-sep-line__n { color: var(--yellow); }
.v2-site-sep-line__n span { font-size: 16px; }
.v2-site-sep-line__step h3 {
  font-size: 20px; margin: 0 0 10px; color: var(--blue-deep);
}
.v2-site-sep-line__step p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
/* These come after .v2-site-sep-line__step p, which is the same weight (0,2,0)
   and would otherwise take the number's size and colour. */
.v2-site-sep-line__step p.v2-site-sep-line__n { color: var(--blue); }
.v2-site-sep-line__step--after h3,
.v2-site-sep-line__step--after p { color: #fff; }
.v2-site-sep-line__step--after p.v2-site-sep-line__n { color: var(--yellow); }
.v2-site-sep-line__mid { display: grid; justify-items: center; gap: 12px; position: relative; }
/* The dashed rail runs the width of the row and past the last card; the cards
   are painted over it and the dot sits on it in a white break. */
.v2-site-sep-line__mid::before {
  content: ""; position: absolute; left: -100vw; right: -100vw; top: 36px;  /* half the 72 dot */
  border-top: 3px dashed #0078cd; z-index: 0;                               /* 3, #0078cd */
}
.v2-site-sep-line__step { position: relative; z-index: 1; }
.v2-site-sep-line__dot { position: relative; z-index: 2; box-shadow: 0 0 0 10px #fff; }
.v2-site-sep-line__dot {
  width: 72px; height: 72px; border-radius: 50%; background: var(--yellow);
  display: grid; place-items: center;
}
.v2-site-sep-line__mid p { position: relative; z-index: 2; }
.v2-site-sep-line__dot svg { width: 30px; height: 30px; fill: var(--blue-deep); }
.v2-site-sep-line__mid p {
  margin: 0; background: var(--blue-deep); color: #fff; border-radius: 999px;
  padding: 7px 16px; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; font-size: 13px; white-space: nowrap;
}

.v2-site-sep-notes { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; }
.v2-site-sep-notes li {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px 18px 50px; position: relative;
  color: var(--ink-soft); font-size: 16px; line-height: 1.5;
}
.v2-site-sep-notes li::before {
  content: "i"; position: absolute; left: 18px; top: 19px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--blue);
  color: #fff; font-family: var(--display); font-weight: 800; font-size: 13px;
  line-height: 20px; text-align: center;
}
.v2-site-sep-notes b { color: var(--blue-deep); }

.v2-site-sep-pills { justify-content: flex-start; margin-top: 32px; }
/* Both comps draw this pill the same way: #e3f1fc at radius 999, 16 of side
   padding, a 6 gap and Jost 15/600 in #0068b5 (LMC 4842:5414, SEP 4842:3932). */
.v2-site-sep-pills a {
  display: inline-flex; align-items: center; gap: 6px;
  background: #e3f1fc; color: #0068b5; border-radius: 999px;
  padding: 10px 16px; font-weight: 600; font-size: 15px; text-decoration: none;
  line-height: 22px;                                       /* 42 = 22 + 2x10 */
}
/* Material arrow_forward, which is what the comp sets: a long shaft and a
   chevron head. The "→" character is neither, and does not take a size.
   Masked rather than inlined so it follows the link's colour on hover. */
.v2-site-sep-pills a::after,
.v2-site-sep-more a::after {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.v2-site-sep-pills a:hover { background: var(--blue); color: #fff; }

/* --- Qualifying life events. --- */
.v2-site-sep-events__hd { display: grid; gap: 16px; align-items: end; margin-bottom: 32px; }
.v2-site-sep-events__hd p { margin: 0; color: var(--ink-soft); }
.v2-site-sep-note {
  background: #f4f7fa; border-radius: 12px; padding: 14px 16px;
  color: var(--ink-soft); font-size: 15px; margin: 16px 0 0;
}
.v2-site-sep-more { margin: 16px 0 0; }
/* The chrome-less version of the pill, same arrow: comp 4842:5358 / 4842:5469. */
.v2-site-sep-more a {
  display: inline-flex; align-items: center; gap: 6px;
  color: #0078ce; font-weight: 600; font-size: 15px; text-decoration: none;
}
.v2-site-sep-more a:hover { text-decoration: underline; }

/* --- Qualifying life events (4842:3942): a list of pills on the left, the chosen
   one's panel on the right. Radios, not JavaScript: the pattern works with the
   script off and keyboard arrows move between the pills for free. --- */
.v2-site-sep-tabs { display: grid; }
.v2-site-sep-tabs__r {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.v2-site-sep-tabs__t {
  grid-column: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; cursor: pointer; background: #fff; color: var(--blue-deep);
  border: 1px solid var(--line); border-radius: 999px; padding: 18px 24px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 15px; letter-spacing: -.01em;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* The marker is a plus until the pill is the open one, then the comp's arrow. */
.v2-site-sep-tabs__t::after {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.v2-site-sep-tabs__t:hover { border-color: var(--blue); color: var(--blue); }
.v2-site-sep-tabs__r:focus-visible + .v2-site-sep-tabs__t {
  outline: 3px solid var(--blue); outline-offset: 2px;
}
.v2-site-sep-tabs__r:checked + .v2-site-sep-tabs__t {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.v2-site-sep-tabs__r:checked + .v2-site-sep-tabs__t::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 5l7 7-7 7-1.4-1.4 4.6-4.6H4v-2h12.2l-4.6-4.6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 5l7 7-7 7-1.4-1.4 4.6-4.6H4v-2h12.2l-4.6-4.6z'/%3E%3C/svg%3E");
}

.v2-site-sep-tabs__p {
  background: #fff; border-radius: 24px; padding: 40px;                /* 24, 40 */
  box-shadow: 0 18px 40px rgba(0, 48, 82, .07);
}
.v2-site-sep-tabs__p h3 {
  color: var(--blue); font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1;
  font-size: 30px; margin: 0 0 16px;                                   /* 29.8 */
}
.v2-site-sep-tabs__p > p { color: var(--ink-soft); margin: 0 0 20px; }
.v2-site-sep-tabs__p .v2-site-sep-checks { gap: 16px; }

/* --- The closing band. --- */
.v2-site-sep-close {
  background: var(--blue); color: #fff; border-radius: 32px; text-align: center;  /* 32 */
}
.v2-site-sep-close h2 {
  color: #fff; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.04em; line-height: 1; margin: 0;
}
.v2-site-sep-close p { color: rgba(255, 255, 255, .9); margin: 12px 0 0; }
.v2-site-sep-close { text-align: left; }
.v2-site-sep-close .v2-site-sep-checks li { color: #fff; }
.v2-site-sep-close .v2-site-sep-checks li::before { background-color: var(--yellow); }
.v2-site-sep-close .v2-site-sep-checks li::after { border-color: var(--blue-deep); }

/* --- What no longer qualifies. --- */
.v2-site-sep-no__grid { display: grid; gap: 24px; align-items: start; }
.v2-site-sep-no__card {
  background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px;
}
.v2-site-sep-no__card h3 {
  font-size: 26px; margin: 10px 0 14px; color: var(--blue-deep);
}
.v2-site-sep-no__card p { color: var(--ink-soft); line-height: 1.6; margin: 0; }
.v2-site-sep-tag {
  display: inline-block; margin: 0; background: #ffe6f1; color: var(--pink);
  border-radius: 999px; padding: 5px 12px; font-family: var(--display);
  font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: .06em;
}
.v2-site-sep-after { color: var(--ink-soft); line-height: 1.6; margin: 32px 0 0; }

/* --- Proving your event: the comp leaves the left column empty here. --- */
.v2-site-sep-proof { display: grid; gap: 32px; align-items: start; }
.v2-site-sep-proof__body { display: grid; gap: 18px; }
.v2-site-sep-proof__body p { margin: 0; color: var(--ink-soft); line-height: 1.6; }

/* --- How Madrinas helps. --- */
.v2-site-sep-helps {
  background: var(--blue); border-radius: 32px; color: #fff;
  display: grid; gap: 40px; align-items: stretch;
}
/* The comp's quote card, which the shared .v2-site-rev differs from in four
   ways: the mark sits inside the card, the quote runs above the attribution,
   the stars sit under the name, and there is no Google wordmark or "Google
   review" line. `order` and a few overrides do it here rather than in the macro
   every other page uses; the screen-reader "Rated 5 out of 5 on Google" the
   macro emits stays, so the attribution survives where it matters. */
.v2-site-sep-helps > .v2-site-rev {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  overflow: visible;
}
.v2-site-sep-helps > .v2-site-rev > .v2-site-rev__mark {
  position: static; order: 0; width: 38px; height: 28px; margin-bottom: 4px;
}
/* The shared card rules the quote off from the head with a top border; with the
   order flipped that line would sit above the quote at the top of the card. */
.v2-site-sep-helps > .v2-site-rev > blockquote {
  order: 1; margin: 0; border-top: 0; padding-top: 0;
  font-size: 22px; line-height: 1.5; color: var(--blue-deep);          /* 22 */
}
.v2-site-sep-helps > .v2-site-rev > .v2-site-rev__hd {
  order: 2; border: 0; padding: 0; margin: 0; align-items: center; gap: 14px;
}
.v2-site-sep-helps .v2-site-rev__av { width: 42px; height: 42px; flex-basis: 42px; font-size: 18px; }
.v2-site-sep-helps .v2-site-rev__who { flex: 0 1 auto; }
.v2-site-sep-helps .v2-site-rev__name { font-size: 19px; }
/* The comp drops the wordmark and the "Google review" line and puts the rating
   under the name instead. */
.v2-site-sep-helps .v2-site-rev__g,
.v2-site-sep-helps .v2-site-rev__loc { display: none; }
/* The panel's own `p` rule is (0,2,0) and was painting the stars white on the
   white card; this needs the element in the selector to win. */
.v2-site-sep-helps > .v2-site-rev > .v2-site-rev__stars {
  order: 3; margin: -16px 0 0 56px; font-size: 17px;                   /* under the name */
  color: #fbbc05;                                                      /* #fbbc05 */
}
.v2-site-sep-helps h2 { color: #fff; }
/* .9 over --blue is 4.19:1, under AA. */
.v2-site-sep-helps p { color: #fff; line-height: 1.6; }
.v2-site-sep-helps .v2-site-rule { margin: 14px 0 20px; }

/* --- FAQ. --- */
.v2-site-sep-faq__in { display: grid; gap: 48px; align-items: start; }
.v2-site-sep-faq__lead { color: var(--ink-soft); margin: 16px 0 0; }
.v2-site-sep-faq__card {
  background: #eaf4fd; border-radius: 24px; padding: 24px; margin-top: 28px;
}
.v2-site-sep-faq__t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  color: var(--blue-deep); margin: 0 0 8px; font-size: 18px;
}
.v2-site-sep-faq__card p { color: var(--ink-soft); font-size: 15px; margin: 0 0 16px; }

/* The lock line under the quote button (comp 4842:3870). */
.v2-site-sep-private {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink-soft); font-size: 14px; margin: 14px 0 0;
}
.v2-site-sep-private::before {
  content: ""; width: 14px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Labels above the fields, as the comp draws them. */
.v2-site--lmc .v2-site-form__lbl {
  display: block; font-size: 13px; font-weight: 600; color: var(--blue-deep);
  margin-bottom: 6px;
}
/* --- The blue "Check My Eligibility" band: photo left, form right. Drawn by
   Figma 4842:5424 on the Medicaid page; the same band serves SEP. --- */
.v2-site-elig {
  background: var(--blue); border-radius: 38px; overflow: hidden;
  display: grid; align-items: center;
}
.v2-site-elig__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-site-elig__body h2 {
  color: #fff; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.02em; line-height: 1; margin: 0;
}
/* Full white, not a tint: .92 over --blue is 4.19:1, under AA, and the comp
   draws both of these plain white anyway. */
.v2-site-elig__note { color: #fff; margin: 10px 0 20px; }
.v2-site-elig__hours {
  color: #fff; font-size: 14px; margin: 14px 0 0;
  display: flex; align-items: center; gap: 8px;
}
.v2-site-elig__clock { flex: 0 0 18px; height: 18px; }
.v2-site-elig__clock svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.v2-site-elig .v2-site-form__agree span { color: rgba(255, 255, 255, .85); }
.v2-site-elig .v2-site-form__agree a { color: #fff; }

.v2-site-sep-disc { color: var(--ink-soft); font-size: 13px; line-height: 1.6; margin: 40px 0 0; }

/* ======================= DESKTOP (the 1920 comp) ======================== */
@media (min-width: 1024px) {
  /* The 4842 build's canvas rules lived here. They were removed when the page
     moved to 5284: .v2-site--lmc is still on that page, and section 58 sets the
     same selector at the same (0,3,1), so the two were separated only by source
     order. Section 58 owns this page's canvases now. */
  /* The comp insets this block 64 inside the 1480 frame and runs the two columns
     flush: the copy column is 811 wide but its text only 731, so the air between
     them is the column's own padding, not a gap. */
  /* The comp's 811:520 split, filling the 1480 rather than its 64 inset: that
     inset only exists on this one section and left the block out of line with
     every heading below it. */
  .v2-site-sep-intro__in { grid-template-columns: 811fr 520fr; gap: 0; }    /* 811 | 520 */
  .v2-site-sep-intro__in > div:first-child { padding-right: 80px; }         /* 731 of 811 */
  .v2-site-sep-intro__in .v2-site-sep-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin-top: 28px;
  }
  .v2-site-sep-line {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 32px;
  }
  .v2-site-sep-line__step p.v2-site-sep-line__n { font-size: 72px; }
  .v2-site-sep-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2-site-sep-events__hd { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
  /* The panels all sit in one cell of column 2 and only the checked one shows. */
  .v2-site-sep-tabs {
    grid-template-columns: minmax(0, 375fr) minmax(0, 946fr);          /* 375 | 946 */
    /* The sixth track is the slack row: without it the panel, which spans every
       row, grows the five pill rows and stretches the open pill down the page. */
    grid-template-rows: repeat(5, min-content) 1fr;
    column-gap: 32px; row-gap: 12px;
  }
  .v2-site-sep-tabs__p { grid-column: 2; grid-row: 1 / -1; display: none; }
  .v2-site-sep-tabs__r:checked ~ .v2-site-sep-tabs__p { display: block; }
  .v2-site-sep-tabs__r:checked ~ .v2-site-sep-tabs__r ~ .v2-site-sep-tabs__p { display: none; }
  .v2-site-sep-events__hd p { text-align: right; }
  .v2-site-sep-no__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-site-sep-proof { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; }
  /* 724 | 869 flush, inside the comp's 115 side padding: the quote card is the
     wider of the two, not a 480 sidebar. */
  .v2-site-sep-helps {
    grid-template-columns: minmax(0, 724fr) minmax(0, 869fr); gap: 40px;    /* 724 | 869 */
    padding: 84px 115px;                                                    /* 84 / 115 */
  }
  .v2-site-sep-helps > .v2-site-rev { padding: 48px; }                      /* 48 */

  .v2-site-sep-offhours { color: rgba(255, 255, 255, .85); font-size: 15px; margin: 0; }
  .v2-site-sep-faq__in { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; }
  .v2-site-sep-close {
    padding: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px; align-items: center;
  }
  .v2-site-sep-close h2 { font-size: 40px; }
  .v2-site-sep-close .v2-site-sep-checks--row {
    grid-template-columns: repeat(3, auto); justify-content: start; gap: 24px; margin-top: 20px;
  }
  .v2-site-sep-close .v2-site-actions { flex-direction: column; }

  /* 746 | 1078 of the 1824 band, with the comp's 58 inset on the copy. */
  .v2-site-elig { grid-template-columns: minmax(0, 746fr) minmax(0, 1078fr); }
  .v2-site-elig__photo { min-height: 400px; }
  .v2-site-elig__body { padding: 60px 58px; }
  .v2-site-elig__body h2 { font-size: 51px; }
  /* One row of pill fields and the button, as the comp draws it; the names row
     hands its two children straight to the flex line. */
  .v2-site-elig .v2-site-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .v2-site-elig .v2-site-form__row { display: contents; }
  .v2-site-elig .v2-site-form > div { flex: 1 1 180px; }
  .v2-site-elig .v2-site-form__in { border-radius: 999px; }
  .v2-site-elig .v2-site-form__agree { flex: 1 1 100%; }
  .v2-site-elig .v2-site-form__submit { flex: 0 0 auto; margin: 0; }
  .v2-site-elig .v2-captcha-pop { flex: 1 1 100%; }
}

/* ======================== PHONE (the 375 comp) =========================== */
@media (max-width: 1023px) {
  .v2-site-sep-intro__in, .v2-site-sep-faq__in, .v2-site-sep-proof,
  .v2-site-sep-helps { grid-template-columns: minmax(0, 1fr); }
  .v2-site-sep-line { grid-template-columns: minmax(0, 1fr); row-gap: 20px; justify-items: stretch; }
  .v2-site-sep-line__mid::before { content: none; }
  .v2-site-sep-line__dot { box-shadow: none; }
  .v2-site-sep-line__step p.v2-site-sep-line__n { font-size: 54px; }
  .v2-site-sep-notes { grid-template-columns: minmax(0, 1fr); }
  .v2-site-sep-no__grid { grid-template-columns: minmax(0, 1fr); }
  .v2-site-sep-helps { padding: 32px 24px; border-radius: 24px; }
  .v2-site-sep-offhours { color: rgba(255, 255, 255, .85); font-size: 14px; margin: 0; }
  .v2-site-sep-close { padding: 32px 24px; border-radius: 24px; }
  .v2-site-sep-close h2 { font-size: 28px; }
  .v2-site-sep-close .v2-site-actions { margin-top: 24px; }
  .v2-site-sep-events__hd p { text-align: left; }
  /* Stacked: each pill keeps its own panel under it, as the comp draws the phone. */
  .v2-site-sep-tabs { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .v2-site-sep-tabs__t { grid-column: 1; }
  .v2-site-sep-tabs__p { display: none; padding: 24px; border-radius: 20px; }
  .v2-site-sep-tabs__r:checked + .v2-site-sep-tabs__t + .v2-site-sep-tabs__p { display: block; }
  .v2-site-sep-tabs__p h3 { font-size: 22px; }

  /* Stacked, photo on top. The phone comp drops the photo, but the band reads as
     a bare form without it (user, 2026-10-18). height:auto keeps the file's own
     aspect, so whatever photo a page passes the macro is never cropped here. */
  .v2-site-elig { grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
  /* max-height keeps it a header strip on a tablet, where the full 3:2 would be
     480 tall and swamp the form; a phone is under the cap, so nothing crops. */
  .v2-site-elig__photo { height: auto; max-height: 260px; }
  .v2-site-elig__body { padding: 28px 28px 32px; }
  .v2-site-elig__body h2 { font-size: 30px; }
}
/* ==========================================================================
   58. Find Health Coverage sub-pages (.v2-site--fhc) — Figma 5284:18659
   ==========================================================================
   Nine 1920 artboards sharing one design: an intro with a photo slot, five
   "why choose" cards, an FAQ and an urgency band are the same component on
   every one. They are .v2-site-fhc-* and live here; a page's own blocks go in
   its own section with its own prefix. Carrying .v2-site--sep alone was enough
   to style the Medicaid page's FAQ by accident before the family class existed.
   Desktop only in Figma -- no artboard in that set is under 1920, so everything
   below 1024 here is ours.
   Each section is on its own canvas: 1480 intro and events, 1780 why and
   stories, 1640 FAQ, 1872 band. Read them off the comp, never assume one
   page width. */

/* --- The intro: copy left, photo right, on 1480. --- */
.v2-site-fhc-top__in { display: grid; gap: 40px; align-items: center; }
/* 40 between the title block and the first row, as the comp spaces them. */
.v2-site-fhc-top__copy .v2-site-h2 { margin-bottom: 40px; }              /* 40 */
.v2-site-fhc-top__copy > p { color: var(--ink-soft); line-height: 1.5; margin: 0 0 16px; }
.v2-site-fhc-top__row h3 {
  color: var(--blue-deep); font-family: var(--display); font-weight: 800;
  font-size: 30px; line-height: 1; margin: 0 0 8px;                    /* 30 */
}
.v2-site-fhc-top__row p { color: var(--ink-soft); line-height: 1.5; margin: 0; }
.v2-site-fhc-top__lead b { color: var(--blue-deep); }
/* A blue emphasis line between the lead and the callout (Group Health). */
.v2-site-fhc-top__em {
  color: var(--blue); font-weight: 600; font-size: 20px; line-height: 1.5;  /* 20 / 30 */
  margin: 16px 0 0;
}
.v2-site-fhc-top__callout {
  background: #e3f1fc; border-radius: 16px; padding: 24px;             /* 24 */
  margin-top: 24px;
}
/* The element is in the selector: .v2-site-fhc-top__callout p below is (0,2,0)
   and was shrinking this to the body size. */
.v2-site-fhc-top__callout p.v2-site-fhc-top__callout-t {
  color: var(--blue-deep); font-family: var(--display); font-weight: 800;
  text-transform: uppercase;
  font-size: 30px; line-height: 1; margin: 0 0 12px;                   /* 30 */
}
/* "Free Consultation" is a colour run in the comp (characters 9-25, #0078CD),
   not emphasis -- em is the page's accent hook everywhere else, so no italic. */
.v2-site-fhc-top__callout-t em { color: var(--blue); font-style: normal; }
.v2-site-fhc-top__callout p { color: var(--ink-soft); margin: 0; font-size: 18px; }
/* The comp leaves this slot empty -- a white 704x736 frame with a grey plate
   rotated inside it, which is what reads as a shadow in the render. Held as a
   placeholder until the designer supplies the photo (user, 2026-10-19); swapping
   in an <img class="v2-site-fhc-top__photo"> is then the only change needed. */
.v2-site-fhc-top__slot {
  background: #fff; border-radius: 32px; aspect-ratio: 704 / 736;       /* 32 */
  display: grid; place-items: center; overflow: hidden;
}
.v2-site-fhc-top__slot span {
  width: 80.1%; height: 95.9%; background: #d9d9d9; border-radius: 30px; /* 564/704, 706/736 */
  transform: rotate(2.9deg);                                             /* comp: 0.05 rad */
}
.v2-site-fhc-top__photo {
  width: 100%; height: 100%; object-fit: cover; border-radius: 32px; display: block;  /* 32 */
}

/* --- "Why choose": five cards on 1780, over the comp's pale gradient. --- */
.v2-site-fhc-why { background: linear-gradient(180deg, #f7fbff 0%, #eef6fd 100%); }
.v2-site-fhc-why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.v2-site-fhc-why__list li {
  background: #fff; border-radius: 16px; padding: 32px;                /* 32 */
  box-shadow: 0 10px 30px rgba(0, 48, 82, .05);
}
.v2-site-fhc-why__ico { display: block; width: 40px; height: 40px; margin-bottom: 16px; }
.v2-site-fhc-why__ico svg { width: 40px; height: 40px; fill: var(--blue); display: block; }
.v2-site-fhc-why__list h3 {
  color: var(--blue-deep); font-family: var(--display); font-weight: 800;
  text-transform: uppercase; font-size: 24px; line-height: 1; margin: 0 0 8px;   /* 24 */
}
.v2-site-fhc-why__list p { color: var(--ink-soft); font-size: 18px; line-height: 1.5; margin: 0; }

/* --- Life events: photo and heading left, six numbered rows right. --- */
.v2-site-fhc-ev { overflow-x: clip; }
.v2-site-fhc-ev__in { display: grid; gap: 72px; align-items: start; }
.v2-site-fhc-ev__left > p { color: var(--ink-soft); font-size: 20px; line-height: 1.5; margin: 0; }
/* The export carries the comp's rotation and drop shadow in its pixels, so it
   takes no transform and no box-shadow here -- either would double them. */
.v2-site-fhc-ev__photo { width: 100%; height: auto; display: block; margin-top: 36px; }
.v2-site-fhc-ev__list { list-style: none; margin: 0; padding: 0; }
.v2-site-fhc-ev__row {
  position: relative; display: grid; grid-template-columns: 100px minmax(0, 1fr);
  gap: 38px; align-items: center; padding: 25px 24px;                  /* 100 | 38 */
  border-bottom: 1px solid var(--line);
}
.v2-site-fhc-ev__row:last-child { border-bottom: 0; }
.v2-site-fhc-ev__ico {
  width: 100px; height: 100px; border-radius: 50%; display: grid; place-items: center;
}
.v2-site-fhc-ev__ico svg { width: 48px; height: 48px; display: block; }
/* Title case: the comp sets textCase=NONE on these alone -- every other heading
   on the page is UPPER -- and .v2-site :where(h1,h2,h3,h4) would shout them.
   It also keeps the longest title clear of the ghost number behind it. */
.v2-site-fhc-ev__row h3 {
  color: var(--blue-deep); font-family: var(--display); font-weight: 800;
  font-size: 24px; line-height: 1.2; margin: 0 0 8px;                  /* 24 */
  text-transform: none;
}
.v2-site-fhc-ev__row > div > p { color: var(--ink-soft); font-size: 18px; line-height: 1.5; margin: 0; }
/* The ghost number sits behind the copy at the row's right edge. */
.v2-site-fhc-ev__n {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-weight: 800; font-size: 96px; line-height: 1;
  opacity: .1; pointer-events: none; z-index: 0;                       /* comp: 0.10 */
}
/* Reserve the number's width. The comp lets the title graze it by ~40 at 1920,
   but the gap closes as the column narrows and the text ends up sitting on the
   glyph, so the copy column stops short of it at every width instead. */
.v2-site-fhc-ev__row > div { position: relative; z-index: 1; padding-right: 125px; }
.v2-site-fhc-ev__row--blue  .v2-site-fhc-ev__ico { background: rgba(0, 182, 237, .1); }
.v2-site-fhc-ev__row--blue  .v2-site-fhc-ev__ico svg { fill: #0078cd; }
.v2-site-fhc-ev__row--blue  .v2-site-fhc-ev__n { color: #0078ce; }
.v2-site-fhc-ev__row--green .v2-site-fhc-ev__ico { background: rgba(124, 194, 66, .2); }
.v2-site-fhc-ev__row--green .v2-site-fhc-ev__ico svg { fill: #7cc242; }
.v2-site-fhc-ev__row--green .v2-site-fhc-ev__n { color: #7cc242; }
.v2-site-fhc-ev__row--pink  .v2-site-fhc-ev__ico { background: rgba(255, 57, 158, .2); }
.v2-site-fhc-ev__row--pink  .v2-site-fhc-ev__ico svg { fill: #ff399e; }
.v2-site-fhc-ev__row--pink  .v2-site-fhc-ev__n { color: #ff399e; }

/* ======================= DESKTOP (the 1920 comp) ======================== */
@media (min-width: 1024px) {
  /* Per-section canvases, read off the comp's own frames. */
  .v2-site--fhc .v2-site-sec > .v2-site-wrap--wide { max-width: 1528px; }                      /* 1480 */
  .v2-site--fhc .v2-site-sec > .v2-site-wrap--wide.v2-site-fhc-wide { max-width: 1828px; }     /* 1780 */
  .v2-site--fhc .v2-site-sec > .v2-site-wrap--wide.v2-site-fhc-faq-wrap { max-width: 1688px; } /* 1640 */

  .v2-site-fhc-top__in { grid-template-columns: 704fr 704fr; gap: 72px; }     /* 704 | 72 | 704 */
  .v2-site-fhc-top__row { display: grid; grid-template-columns: 308fr 348fr; gap: 48px; align-items: start; }
  .v2-site-fhc-why__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .v2-site-fhc-ev__in { grid-template-columns: 726fr 682fr; }                 /* 726 | 682 */
}

/* ======================== PHONE (ours, no comp) ========================== */
@media (max-width: 1023px) {
  .v2-site-fhc-top__in, .v2-site-fhc-ev__in { grid-template-columns: minmax(0, 1fr); }
  .v2-site-fhc-top__row h3, .v2-site-fhc-top__callout-t { font-size: 24px; }
  .v2-site-fhc-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-site-fhc-why__list li { padding: 24px; }
  .v2-site-fhc-ev__row { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 20px 0; }
  .v2-site-fhc-ev__ico { width: 64px; height: 64px; }
  .v2-site-fhc-ev__ico svg { width: 32px; height: 32px; }
  .v2-site-fhc-ev__row h3 { font-size: 20px; }
  .v2-site-fhc-ev__n { font-size: 56px; }
  .v2-site-fhc-ev__row > div { padding-right: 76px; }
}
@media (max-width: 640px) {
  .v2-site-fhc-why__list { grid-template-columns: minmax(0, 1fr); }
}
/* --- FAQ: the comp puts a 1080 bordered column under a 1640 header, with each
   row a white card outlined in the same blue. Not the site's default accordion,
   which is a 3px rule over borderless rows. (Comp I5284:30015;4565:671.) --- */
/* The comp's column carries individualStrokeWeights {top:2, 0, 0, 0} with
   rectangleCornerRadii [32,32,0,0]: a 2px top rule with rounded top corners,
   NOT the outlined box this was. strokeWeight alone reads "1px all round",
   which is what I built from -- read the individual weights too. */
/* The comp runs this lede across the full 1640 header; the site's default 780
   wraps it onto two lines. The column under it stays 1080. */
.v2-site-fhc-faq .v2-site-head,
.v2-site-fhc-faq .v2-site-head p { max-width: 1640px; }               /* 1640 */
.v2-site-fhc-faq .v2-site-acc {
  max-width: 1080px; margin-inline: auto;                               /* 1080 */
  border: 0; border-top: 2px solid #0078cd;                             /* 2 */
  border-radius: 32px 32px 0 0;                                         /* 32 */
  padding: 32px 16px 0;                                                 /* 32 / 16 */
}
.v2-site-fhc-faq .v2-site-q {
  border: 1px solid #0078cd; border-radius: 12px; box-shadow: none;     /* 12 */
  margin-bottom: 16px;                                              /* itemSpacing */
}
.v2-site-fhc-faq .v2-site-q:last-child { margin-bottom: 0; }
.v2-site-fhc-faq .v2-site-q > summary { padding: 16px; font-size: 20px; }
.v2-site-fhc-faq .v2-site-q > summary svg { width: 16px; height: 16px; flex-basis: 16px; }

/* --- The urgency banner. The site's default .v2-site-cta is a different
   layout (fairy left, one copy column), so this page overrides the block:
   1872x172 bar, copy left, the pink chip and its line centre, buttons right,
   and the fairy standing in front of the bar's top edge. --- */
.v2-site-fhc-cta {
  position: relative; background: var(--blue) url("../images/v2/site/shared/cta-band-bg.webp") center / cover;
  border-radius: 40px; display: grid; align-items: center;
  padding: 29px 36px 29px 55px;                                         /* 29 / 55 */
  /* The comp's section is 286 tall around a 172 bar: 57 above and 57 below. The
     fairy needs more than that at the top (she starts 63 up) and hangs 63 below,
     which is why the footer has to be pushed clear or she lands on top of it. */
  margin: 63px 0 72px;                                         /* 63 up, 57 + her 15 */
}
.v2-site-fhc-cta__copy h2 {
  color: #fff; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 40px; line-height: 1; margin: 0; letter-spacing: -.04em;   /* 40, -1.6/40 */
}
.v2-site-fhc-cta__sub {
  color: #fff; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 24px; letter-spacing: .08em; line-height: 1; margin: 1px 0 0;    /* 1.92/24 */
}
/* 20/1.3 and a 12 gap: the comp's own 38-tall copy frame is leading-trimmed, so
   its number cannot be used directly -- but at 18px with 1.45 the block ran 1px
   PAST the bar's bottom edge and left no gap at all. */
.v2-site-fhc-cta__copy > p:last-child,
.v2-site-fhc-cta__mid > p { color: #fff; font-size: 20px; line-height: 1.3; margin: 12px 0 0; }
.v2-site-fhc-cta__chip {
  /* Vertical padding here, not only in the 1440+ rule: that one sets an explicit
     height and horizontal padding, so without this the chip collapsed to 42px --
     the text with no breathing room at all -- everywhere below 1440. */
  background: var(--pink); border-radius: 14px; padding: 20px 23px; margin: 0;
  display: inline-block; text-align: center;                            /* 343x87 */
}
.v2-site-fhc-cta__mid { position: relative; }
.v2-site-fhc-cta__chip b {
  display: block; color: #fff; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; font-size: 24px; line-height: 1;           /* 24 */
  letter-spacing: -.04em;                                               /* -0.96/24 */
}
.v2-site-fhc-cta__chip span {
  display: block; color: #fff; font-weight: 600; font-size: 16px; line-height: 1.25;
  text-transform: uppercase; letter-spacing: -.01em;        /* comp: UPPER, -0.16/16 */
}
.v2-site-fhc-cta__actions { display: flex; gap: 16px; justify-content: flex-end; }
.v2-site-fhc-cta__fairy, .v2-site-fhc-cta__star { position: absolute; pointer-events: none; }
/* She is a sibling of the bar in the comp and stands clear of its top edge, so
   the bar carries no overflow:hidden -- that would cut her head off. */
/* Sized off the band's 172 height, not its width, because that is what the
   comp pins her to: 298 tall starting 63 above the bar. */
.v2-site-fhc-cta__fairy { height: 173.3%; width: auto; left: 56.6%; top: -36.6%; z-index: 2; }
.v2-site-fhc-cta__star  { height: 149.4%; width: auto; left: 53%;   top: -8.1%;  z-index: 1; }

/* 1440-1920+: every length is a share of the comp's 1920, so the whole bar
   scales as one piece and nothing re-wraps into anything else. Mixing fixed
   text widths with percentage positions was the mistake -- it only held at
   exactly 1920, and below that the heading ran into the chip (and in Spanish,
   at 1920 too). min() caps each value at the comp's own number past 1920. */
@media (min-width: 1440px) {
  .v2-site--fhc .v2-site-fhc-cta-wrap { max-width: 1920px; }            /* 1872 + 2x24 */
  .v2-site-fhc-cta {
    display: block; padding: 0;
    height: min(172px, 8.958vw);                                        /* 172 */
  }
  .v2-site-fhc-cta > div { position: absolute; }
  /* Centred rather than pinned to the comp's 29: our copy renders taller than
     the comp's leading-trimmed frame, so a fixed top left 29 above and only 14
     below. Centring keeps the two equal at any text height, in either language. */
  .v2-site-fhc-cta__copy   { left: 2.94%; top: 50%; transform: translateY(-50%); width: 37.66%; }
  .v2-site-fhc-cta__mid    { left: 33.8%; top: -5.2%; width: 21.2%; }   /* 633, -9, 397 */
  .v2-site-fhc-cta__actions { left: 68.7%; top: 33.7%; width: 28.1%; }  /* 1286, 58, 526 */

  .v2-site-fhc-cta__copy h2  { font-size: min(40px, 2.083vw); white-space: nowrap; }  /* 40 */
  .v2-site-fhc-cta__sub      { font-size: min(24px, 1.25vw); }          /* 24 */
  .v2-site-fhc-cta__copy > p:last-child,
  .v2-site-fhc-cta__mid > p  { font-size: min(20px, 1.042vw); }         /* 20 */

  /* The element and the parent are both in the selector: .v2-site-fhc-cta__mid > p
     is (0,1,1) and was adding its 16px top margin to the chip. The chip is a <p>
     too, so any rule on "> p" moves the pair of them. */
  .v2-site-fhc-cta__mid > p.v2-site-fhc-cta__chip {
    position: absolute; left: 5.5%; top: 0;                             /* 655 - 633 */
    width: 86.4%; height: min(87px, 4.53vw); margin: 0;                 /* 343x87 */
    padding: 0 min(23px, 1.198vw);
    /* the box is a fixed height here, so the two lines are centred in it */
    display: grid; align-content: center; gap: min(6px, 0.313vw);
  }
  .v2-site-fhc-cta__chip b    { font-size: min(24px, 1.25vw); white-space: nowrap; }
  .v2-site-fhc-cta__chip span { font-size: min(16px, 0.833vw); }
  .v2-site-fhc-cta__mid > p + p {
    position: absolute; left: 0; top: min(107px, 5.573vw); width: 100%; margin: 0;
  }
  /* Spanish runs ~20% longer (section 45). The left copy takes a third line the
     comp's 172 cannot hold, so the bar gets the room; and the heading measures
     804 against the 584 there is before the chip, so it takes the size that
     fits on one line rather than wrapping into the chip. */
  .v2-site:lang(es) .v2-site-fhc-cta { height: min(196px, 10.2vw); }
  .v2-site:lang(es) .v2-site-fhc-cta__copy h2 { font-size: min(28px, 1.458vw); }  /* 584/804 */
  /* ...and the copy column stops where the middle one starts (633 - 55), which
     in English it never reaches. */
  .v2-site:lang(es) .v2-site-fhc-cta__copy { width: 30.8%; }            /* 578 of 1872 */
}
/* 1024-1439: the comp's fixed offsets do not fit, so the band becomes a grid
   that can take its own height. Same parts, same order, no overlap. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .v2-site-fhc-cta {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 28px; align-items: center; padding: 32px 36px;
  }
  .v2-site-fhc-cta__fairy, .v2-site-fhc-cta__star { display: none; height: auto; }
  .v2-site-fhc-cta__copy h2 { font-size: 32px; }
  .v2-site-fhc-cta__chip { width: 100%; max-width: 343px; }
  .v2-site-fhc-cta__actions { flex-direction: column; }
}
@media (max-width: 1023px) {
  .v2-site-fhc-cta {
    grid-template-columns: minmax(0, 1fr); gap: 20px; border-radius: 24px;
    padding: 28px 24px; text-align: center;
    margin: 158px 0 40px;                       /* clears the fairy standing above */
  }
  .v2-site-fhc-cta__copy h2 { font-size: 26px; letter-spacing: -.02em; }
  .v2-site-fhc-cta__sub { font-size: 16px; letter-spacing: .06em; }
  /* The desktop sizes make this bar ~690 tall on a phone; the body copy comes
     down to the site's phone size and the chip stops being a slab. */
  .v2-site-fhc-cta__copy > p:last-child,
  .v2-site-fhc-cta__mid > p { font-size: 17px; line-height: 1.45; }
  .v2-site-fhc-cta__chip { display: block; padding: 16px 20px; }
  .v2-site-fhc-cta__chip b { font-size: 20px; }
  .v2-site-fhc-cta__chip span { font-size: 14px; }
  .v2-site-fhc-cta__actions { flex-direction: column; align-items: stretch; }
  /* She stands on the bar's top edge, not in it: her feet landed on the heading
     before. height must be reset -- the desktop rule sizes her off the band's
     height, and the stacked band is several times taller. */
  .v2-site-fhc-cta__fairy { height: auto; width: 124px; left: 50%; transform: translateX(-50%); top: -152px; }
  /* The star is white-and-yellow: above the stacked band it is on white page, invisible. */
  .v2-site-fhc-cta__star { display: none; }
}
/* --------------------------------------------------------------------------
   58b. The steps panel (.v2-site-fhc-steps)
   --------------------------------------------------------------------------
   A blue full-bleed panel: star spray across the top, four white cards each
   with a circular badge straddling its top edge and an arrow to its left.
   Figma 5284:25482 on Losing Medicaid (badges 01-04) and 5284:26116 on
   Medicare (badges A-D, plus a note under the last card) are the same
   component. It is on its own 1163 canvas, NOT the 1480 its section padding
   implies. Art lives in assets/images/v2/site/losing-medicaid/ because that
   page shipped first; it is shared, not page-specific. */

/* --- The steps panel. Section fill #0078CD with the comp's star spray across
   the top; clipsContent is on, so the art is positioned and the panel clips. --- */
.v2-site-fhc-steps {
  position: relative; overflow: hidden; background: #0078CD;
  /* The section's own padding is 220, but the steps column inside it is a FIXED
     1163, so the gutter that actually shows is (1920-1163)/2 = 378.5. Centring
     the column reproduces that exactly at 1920 and keeps it centred below it,
     where a flat 220 left the cards 317 too narrow. */
  padding: 96px max(24px, (100% - 1163px) / 2);                        /* 96 / 1163 */
}
/* The corner glows are 12%-opacity white radials seen through a star-shaped
   cutout, and it is the cutout's EDGE that reads, not the brightness -- a plain
   radial-gradient left the corners visibly flat beside the comp. Figma trims an
   export to its ink, so these offsets are not the nodes' own (-172,665 / 1419,679):
   they were found by correlating each export against the comp render. */
/* The glows sit at different heights on each page, anchored to neither the top
   nor the bottom of the panel, so each page sets its own pair. Every offset was
   found by correlating the export against that page's comp render -- deriving
   Medicare's from Medicaid's was 40px out. */
.v2-site-fhc-steps { --glow-lx: -131px; --glow-ly: 827px; --glow-rx: 1562px; --glow-ry: 841px; }
.v2-site-fhc-steps__glow {
  position: absolute; width: 430px; height: 389px; pointer-events: none;
}
.v2-site-fhc-steps__glow--l { left: var(--glow-lx); top: var(--glow-ly); }
.v2-site-fhc-steps__glow--r { left: var(--glow-rx); top: var(--glow-ry); }
.v2-site--mcr .v2-site-fhc-steps { --glow-lx: -133px; --glow-ly: 982px; --glow-rx: 1564px; --glow-ry: 996px; }

/* Medicare closes the panel with a note under the last card; Medicaid has none. */
.v2-site-fhc-steps__note {
  color: #fff; font-size: 20px; line-height: 1.5; text-align: center;   /* 20 / 30 */
  max-width: 1164px; margin: 56px auto 0;                               /* 1164, itemSpacing 56 */
}
.v2-site-fhc-steps__stars {
  position: absolute; left: -41px; top: -163px;                        /* -41.273, -162.579 */
  width: 2003px; height: 705px; pointer-events: none;                  /* 2002.546 x 705.298 */
}
.v2-site-fhc-steps__in { position: relative; z-index: 1; }
.v2-site-fhc-steps__h {
  color: #fff; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 48px; line-height: 1; letter-spacing: -.04em;             /* 48, -1.92 */
  text-align: center; margin: 0 0 56px;                                /* itemSpacing 56 */
}

/* 1163 = 60 arrow + 23 gap + 1080 card. The section's 220 padding reads as a
   1480 canvas; the steps column is a fixed 1163 inside it. */
.v2-site-fhc-steps__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 73px;                                            /* card gap 73 */
}
.v2-site-fhc-step { display: grid; grid-template-columns: 60px 1080fr; gap: 23px; align-items: center; }
.v2-site-fhc-step__arrow { width: 60px; height: 60px; display: block; }
/* The badge is an absolute child of the CARD, centred on its top edge, and the
   card must not clip or its top half goes. The card's 64 top padding is what
   clears it -- double the 32 at the foot. */
.v2-site-fhc-step__card {
  position: relative; background: #fff; border-radius: 32px;           /* 32 */
  padding: 64px 32px 32px; text-align: center;                         /* 64 / 32 / 32 */
}
/* DROP_SHADOW radius 0, spread 0, offset (0,8), opaque #00B6ED -- a hard cyan
   lip under the card, not a glow. A blur here reads wrong on the flat blue. */
.v2-site-fhc-step__card { box-shadow: 0 8px 0 0 #00B6ED; }
.v2-site-fhc-step__n {
  position: absolute; left: 50%; top: -40px; transform: translateX(-50%);
  width: 80px; height: 80px; border-radius: 50%;                       /* 80 */
  background: #0078CD; color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 48px; line-height: 1;  /* 48 */
  letter-spacing: -.04em;                                              /* -1.92 */
  text-shadow: 0 2px 2px rgba(0, 0, 0, .25);
}
/* strokeAlign OUTSIDE: the 4px ring sits outside the 80 disc (88 painted). A
   CSS border would eat into it and leave a 72 disc. */
.v2-site-fhc-step__n { box-shadow: 0 0 0 4px #00B6ED; }
.v2-site-fhc-step__card h3 {
  color: #003E6B; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 30px; line-height: 1; letter-spacing: -.04em;             /* 30, -1.2 */
  margin: 0 0 4px;                                                     /* 4 */
}
.v2-site-fhc-step__card p {
  color: #003E6B; font-size: 20px; line-height: 1.5; margin: 0;        /* 20 / 30 */
}
.v2-site-fhc-step__card p a { color: inherit; font-weight: 700; text-decoration: underline; }

@media (max-width: 1023px) {
  .v2-site-fhc-steps { padding: 56px 24px; }
  .v2-site-fhc-steps__stars { left: -30%; top: -80px; width: 160%; height: auto; }
  .v2-site-fhc-steps__h { font-size: 30px; margin-bottom: 40px; }
  .v2-site-fhc-steps__list { gap: 64px; }
  /* The arrow points along the row on desktop; stacked, it would point at the
     gutter, so the card takes the full width and the arrow goes. */
  .v2-site-fhc-step { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .v2-site-fhc-step__arrow { display: none; }
  .v2-site-fhc-step__card { padding: 52px 20px 24px; border-radius: 24px; }
  .v2-site-fhc-step__n { width: 64px; height: 64px; top: -32px; font-size: 36px; }
  .v2-site-fhc-step__card h3 { font-size: 22px; }
  .v2-site-fhc-step__card p { font-size: 17px; }
}
/* end 58b */
/* ==========================================================================
   59. Medicare (/medicare-plans)
   ==========================================================================
   Figma 5284:25949, one of the "Find Health Coverage sub-pages". Its hero,
   intro, steps panel and FAQ are the family's shared components in 58; the two
   blocks here are this page's own. Each sits on its own canvas: 1421 for the
   badge row (not the 1480 its 220 gutter implies) and 1480 for the carriers. */

/* --- "What is Medicare?": three stroke-only circles behind a row of three
   flower badges. The circles run 888 tall in a 521 section, and the section
   clips them -- that is what reads as arcs; there is no arc artwork. --- */
.v2-site-mcr-wis {
  position: relative; overflow: hidden; background: #fff;
  /* The 220 gutter is nominal -- the badge row is a FIXED 1421, so the gutter
     that shows at 1920 is (1920-1421)/2 = 249.5. Centring the row's own canvas
     keeps it at 1421 down to 1469 instead of letting a flat 220 squeeze it. */
  padding: 96px max(24px, (100% - 1421px) / 2) 83px;         /* 96 / 1421 / 83 */
}
/* 83 at the foot, not 96: the comp's auto-layout sums to 534 inside a frame
   pinned at 521 and clipsContent swallows the 13. */
.v2-site-mcr-wis__arcs {
  position: absolute; pointer-events: none;
  left: 26.615%; top: min(24px, 1.25vw);                     /* 511, 24 */
  width: min(900px, 46.878vw); height: min(888px, 46.261vw); /* 900.06 x 888.21 */
}
/* strokeAlign INSIDE: the ring is drawn inside the listed box, so border-box.
   The three are NOT concentric -- 20px of spread in y -- so each is placed. */
.v2-site-mcr-wis__arcs span {
  position: absolute; box-sizing: border-box; border-radius: 50%;
  border: 4px solid #EDF7FD; opacity: .5;
}
.v2-site-mcr-wis__arcs span:nth-child(1) { left: 0; top: 0; width: 100%; height: 100%; }
.v2-site-mcr-wis__arcs span:nth-child(2) { left: 4.799%; top: 3.206%; width: 90.514%; height: 91.721%; }
.v2-site-mcr-wis__arcs span:nth-child(3) { left: 9.737%; top: 6.922%; width: 80.57%; height: 81.646%; }
.v2-site-mcr-wis__in { position: relative; }
.v2-site-mcr-wis__head { max-width: 680px; margin-inline: auto; text-align: center; }   /* 680 */
.v2-site-mcr-wis__head .v2-site-h2 { margin: 0; }
.v2-site-mcr-wis__head > p {
  color: var(--ink-soft); font-size: 20px; line-height: 1.5; margin: 8px 0 0;   /* 20 / 8 */
}
.v2-site-mcr-wis__row {
  list-style: none; padding: 0;
  display: flex; justify-content: center; align-items: center; gap: 68px;       /* 68 */
  max-width: 1421px; margin: 56px auto 0;                                       /* 1421, 56 */
}
/* The three columns are FIXED 330 / 506 / 449 in the comp, not content-sized.
   Letting them hug and centring the row pulls badge 1 about 60 to the right. */
.v2-site-mcr-wis__row > li { display: flex; align-items: center; gap: 19.5px; }  /* 19.5 */
.v2-site-mcr-wis__row > li:nth-child(1) { flex: 0 0 330px; }                     /* 330 */
.v2-site-mcr-wis__row > li:nth-child(2) { flex: 0 0 506px; }                     /* 506 */
.v2-site-mcr-wis__row > li:nth-child(3) { flex: 0 0 449px; }                     /* 449 */
/* The comp gives column 3 a 34.5 badge-to-label gap where 1 and 2 have 19.5 --
   its 449 box is 30.5 wider than its content needs. Built uniform at 19.5. */
.v2-site-mcr-wis__badge { position: relative; flex: 0 0 114px; width: 114px; height: 114px; }
/* The export is ink-trimmed and carries the badge's shadow, so it is bigger
   than the 114 frame and hangs 7.85 to its left. */
.v2-site-mcr-wis__badge img {
  position: absolute; left: -7.85px; top: 0; width: 129.72px; height: 147.66px;
  max-width: none; display: block;
}
/* The break in each label is a PARAGRAPH break with paragraphSpacing 24, not a
   wrap: two 24px lines 48 apart. line-height: 48 looks identical until it wraps. */
.v2-site-mcr-wis__lbl {
  display: grid; gap: 24px;                                  /* paragraphSpacing 24 */
  color: var(--blue-deep); font-family: var(--display); font-weight: 800;
  text-transform: uppercase; font-size: 24px; line-height: 1; letter-spacing: -.04em;  /* 24, -0.96 */
}
.v2-site-mcr-wis__note {
  max-width: 760px; margin: 56px auto 0; text-align: center;    /* 680 + Jost, 56 */
  color: var(--ink-soft); font-size: 20px; line-height: 1.5;    /* 20 / 30 */
}
/* 760, not the comp's 680: Jost needs 741 for this string where Futura PT fits
   it in 680, and at 680 it wraps to two lines and the section grows 30. */

/* --- Carriers: copy and a tinted callout on one 1480 row, logos below. --- */
/* Same as the row above: hold the 1480 canvas by centring it rather than by a
   flat 220, which at 1440 leaves only 1000. */
.v2-site-mcr-car { background: #fff; padding: 96px max(24px, (100% - 1480px) / 2); }  /* 96 / 1480 */
.v2-site-mcr-car__in { max-width: 1480px; margin-inline: auto; }   /* 1480 */
/* minmax(0, …): a plain fr takes min-content as its floor, and the 560px rule
   under the eyebrow pins the copy column at 560 — which starved the callout to
   270 at 1440 instead of shrinking both. */
.v2-site-mcr-car__top {
  display: grid; grid-template-columns: minmax(0, 580fr) minmax(0, 730fr);
  gap: min(170px, 11.49%);                                   /* 580 | 170 | 730 */
}
.v2-site-mcr-car__eyebrow {
  color: var(--blue-deep); font-family: var(--display); font-weight: 800;
  text-transform: uppercase; font-size: 24px; line-height: 1; letter-spacing: .12em;  /* 24, +2.88 */
  margin: 0;
}
/* strokeAlign CENTER on a 2px line: it paints 1px either side of y=132. */
.v2-site-mcr-car__rule {
  display: block; width: 560px; max-width: 100%; height: 2px;  /* 560 x 2 */
  background: #0078CE; margin: 12px 0 0;                       /* itemSpacing 12 */
}
.v2-site-mcr-car__copy > p {
  color: var(--ink-soft); font-size: 20px; line-height: 1.5; letter-spacing: -.02em;  /* 20 / 30 */
  margin: 16px 0 0;                                            /* itemSpacing 16 */
}
/* Its strokes array is empty: individualStrokeWeights.left = 6 is a leftover
   from an earlier design and paints nothing. There is no left accent bar. */
.v2-site-mcr-car__callout {
  background: #EEF8FF; border-radius: 16px; padding: 24px;     /* 16 / 24 */
  margin-top: -9px; align-self: start;                         /* 87 against the copy's 96 */
}
/* The comp's heading frame is 706 wide inside a 682 content box -- it runs to
   the card's right EDGE, overhanging the 24 padding. That overhang is what
   keeps it on one line: in Jost the string needs 688, which 682 cannot hold. */
.v2-site-mcr-car__callout h2 {
  color: var(--blue-deep); font-family: var(--display); font-weight: 800;
  text-transform: uppercase; font-size: 24px; line-height: 1; letter-spacing: -.04em;  /* 24, -0.96 */
  margin: 0 -24px 0 0;                                       /* 706 inside 682 */
}
.v2-site-mcr-car__callout p {
  color: var(--ink-soft); font-size: 18px; line-height: 1.5; margin: 16px 0 0;  /* 18 / 27, 16 */
}
.v2-site-mcr-car__logos {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-top: 56px;                                 /* 264 - 208 */
}
/* Comp widths, which are not the files' intrinsic sizes. */
.v2-site-mcr-car__logos img { height: auto; display: block; }
.v2-site-mcr-car__logos img:nth-child(1) { width: 281.61px; }   /* Humana */
.v2-site-mcr-car__logos img:nth-child(2) { width: 356.87px; }   /* UnitedHealthcare */
.v2-site-mcr-car__logos img:nth-child(3) { width: 303.25px; }   /* Aetna */
.v2-site-mcr-car__logos img:nth-child(4) { width: 199.82px; }   /* Cigna */

@media (max-width: 1468px) {
  /* The row is a fixed 1421 + 2x24 gutter; below that it squeezes the labels
     rather than shrinking, so it stacks here and not at the usual 1023. */
  .v2-site-mcr-wis__row { flex-direction: column; align-items: flex-start; gap: 32px; max-width: 760px; }
  .v2-site-mcr-wis__row > li,
  .v2-site-mcr-wis__row > li:nth-child(1),
  .v2-site-mcr-wis__row > li:nth-child(2),
  .v2-site-mcr-wis__row > li:nth-child(3) { flex: 0 0 auto; width: 100%; }
}
@media (max-width: 1439px) {
  .v2-site-mcr-wis, .v2-site-mcr-car { padding-inline: 24px; }
  .v2-site-mcr-car__top { gap: 48px; }
  .v2-site-mcr-car__logos img { width: auto; max-width: 20%; }
}
@media (max-width: 1023px) {
  .v2-site-mcr-wis { padding: 56px 24px; }
  .v2-site-mcr-wis__arcs { display: none; }
  .v2-site-mcr-wis__row { flex-direction: column; align-items: flex-start; gap: 32px; }
  .v2-site-mcr-wis__row > li { width: 100%; }
  .v2-site-mcr-wis__lbl { font-size: 20px; gap: 10px; }
  .v2-site-mcr-wis__note { margin-top: 40px; }
  .v2-site-mcr-car { padding: 56px 24px; }
  .v2-site-mcr-car__top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .v2-site-mcr-car__callout { margin-top: 0; }
  .v2-site-mcr-car__logos { flex-wrap: wrap; justify-content: center; gap: 28px 40px; }
  .v2-site-mcr-car__logos img { max-width: 40%; }
}
/* end 59 */
/* --------------------------------------------------------------------------
   58c. "What's included" (.v2-site-fhc-inc)
   --------------------------------------------------------------------------
   A 1480 canvas split 579 | 137 | 764: a two-tone heading, a tinted box and
   any number of outlined notes on the left; illustrated benefit cards on the
   right, each a 314fr/450fr grid with a coloured blob hung off its left edge.
   Figma 6109:22243 on Private Health (two cards, two pink notes) and
   6110:22918 on Dental (three cards, no notes) are the same component; the
   blob's colour is per card, so it is a custom property. */

/* The em is the brand. Spanish is long enough to split it across lines at the
   phone cap AND at 1920, so it is kept whole everywhere: 297 at 30px against a
   312 column at 360, 475 at 48px against 704 on the desktop canvas. */
.v2-site--prv .v2-site-fhc-top__copy .v2-site-h2 em { white-space: nowrap; }

/* The comp draws this section as a card -- white, 32 radius, one hairline border
   -- but at the full 1920, so its left and right sides land on the viewport edge
   as a stray line down the page (client, 2026-10-19). The top and bottom strokes
   do the real work of separating it from the white sections either side, so only
   those are kept. The radius goes with them: the fill is white on a white page,
   so it was only ever visible through the border. */
.v2-site-fhc-inc {
  background: #fff; border-block: 1px solid rgba(0, 120, 205, .15);
  /* 76/99, not the comp's 77/100: Figma strokes INSIDE the box and CSS borders
     outside it, so the 1px top and bottom have to come out of the padding or
     the section lands 2 taller than the 880 it is pinned at. */
  padding: 76px 24px 99px;                                   /* 77 / 100 less the border */
}
/* The canvas is on the inner wrapper, not the section's padding: the section's
   own 1px border is inside its padding box, so a percentage gutter there left
   the content 1478 rather than 1480. */
.v2-site-fhc-inc__in {
  max-width: 1480px; margin-inline: auto;                    /* 1480 */
  display: grid; grid-template-columns: 579fr 764fr; gap: 137px;  /* 579 | 137 | 764 */
  align-items: start;
}

/* --- Left column --- */
.v2-site-fhc-inc__h {
  color: var(--blue-deep); font-family: var(--display); font-weight: 800;
  text-transform: uppercase; font-size: 64px; line-height: 1; letter-spacing: -.04em;  /* 64, -2.56 */
  margin: 0 0 29px;                                          /* 77+192 -> 298 */
}
.v2-site-fhc-inc__h em { color: var(--blue); font-style: normal; }
.v2-site-fhc-inc__box {
  background: #EEF8FF; border-radius: 24px; padding: 32px;   /* 24 / 32 */
  margin-bottom: 42px;                                       /* 298+178 -> 518 */
}
.v2-site-fhc-inc__box h3 {
  color: var(--blue-deep); font-family: var(--display); font-weight: 800;
  text-transform: uppercase; font-size: 30px; line-height: 1; letter-spacing: -.04em;  /* 30, -1.2 */
  margin: 0;
}
/* A LINE node, stroke 4 with round caps -- a 75 rule, not a full-width border. */
.v2-site-fhc-inc__box span {
  display: block; width: 75px; height: 4px; border-radius: 2px;   /* 75.1 x 4 */
  /* The LINE's 4px stroke is CENTRE-aligned on y=76, so it paints 74..78. */
  background: var(--pink); margin: 12px 0 8px;                    /* 62 -> 74..78 -> 86 */
}
.v2-site-fhc-inc__box p {
  color: var(--blue-deep); font-size: 20px; line-height: 1.5; margin: 0;   /* 20 / 30 */
}
/* The two outlined notes: pink hairline, tinted fill, icon and copy side by side. */
.v2-site-fhc-inc__note {
  display: flex; align-items: center; gap: 16px;             /* itemSpacing 16 */
  background: #F4F7FA; border: 1px solid var(--pink); border-radius: 32px;  /* 32 */
  /* The comp's frame declares 24 all round but is pinned at 122, which its own
     94-tall content overflows -- auto-layout then centres it at 14 top and
     bottom. Reproduce the result: 24 beside, centred within 122. */
  padding: 0 24px; min-height: 122px;                        /* 24 | 122 */
}
.v2-site-fhc-inc__note + .v2-site-fhc-inc__note { margin-top: 18px; }   /* 640 -> 658 */
.v2-site-fhc-inc__note svg { flex: 0 0 50px; width: 50px; height: 50px; display: block; }  /* 50 */
.v2-site-fhc-inc__note h3 {
  color: var(--blue-deep); font-weight: 700; font-size: 24px; line-height: 1.5;  /* 24 / 36 */
  text-transform: none; margin: 0 0 4px;                     /* no textCase; 36 -> 40 */
}
.v2-site-fhc-inc__note p {
  color: var(--blue-deep); font-size: 18px; line-height: 1.5; margin: 0;   /* 18 / 27 */
}
/* The comp's run carries weight 700 and an underline but NO fill override, so
   the link stays body navy rather than taking the site's link blue. */
.v2-site-fhc-inc__note p a { color: inherit; font-weight: 700; text-decoration: underline; }

/* --- Right column: two illustrated cards --- */
.v2-site-fhc-inc__cards { display: grid; gap: 23px; }        /* 417 -> 440 */
/* A grid, not two absolutely-placed halves. In the comp both children are
   vertically centred in the 340 (image 15 top and bottom, text 50 and 50), and
   the split is 314 | 450 of the 764 card -- so a 314fr/450fr grid reproduces it
   exactly at 1920 AND survives the narrower card below 1528, where a fixed
   `left: 314px; width: 450px` ran the heading out past the card's clip. */
.v2-site-fhc-inc__card {
  position: relative; overflow: hidden;                      /* clipsContent TRUE */
  background: #F4F7FA; border: 1px solid rgba(0, 120, 205, .15); border-radius: 32px;  /* 32 */
  min-height: 340px;                                         /* 340 */
  display: grid; grid-template-columns: 314fr 450fr; align-items: center;  /* 314 | 450 */
}
/* An ellipse hung off the card's left edge; the card's clip is what turns it
   into the shape behind the illustration. Colour and box are both per card:
   Private Health runs every card blue at 361x354, Dental runs blue / pink /
   yellow, and Vision's taller middle card carries a 392x398 one. */
.v2-site-fhc-inc__card {
  --inc-blob: #0078CE;
  --inc-blob-x: -113px; --inc-blob-y: 47px;                  /* -113, 47 */
  --inc-blob-w: 361px;  --inc-blob-h: 354px;                 /* 361 x 354 */
  --inc-img-top: 15px;                                       /* card--a */
}
.v2-site-fhc-inc__card::before {
  content: ""; position: absolute;
  left: var(--inc-blob-x); top: var(--inc-blob-y);
  width: var(--inc-blob-w); height: var(--inc-blob-h); border-radius: 50%;
  background: var(--inc-blob);
}
/* Shares of the 314 column. The comp does NOT centre these vertically -- card
   1 happens to land on centre, the others do not -- so each carries its own
   top rather than relying on the grid's alignment. */
/* max-width: none -- Dental's tooth and Vision's glasses are WIDER than the 314
   column (108.7% and 101.6%), and the site's global img { max-width: 100% }
   silently clamped them to it. */
.v2-site-fhc-inc__card img {
  position: relative; z-index: 1; display: block; height: auto; max-width: none;
  align-self: start; margin-top: var(--inc-img-top);
}
.v2-site-fhc-inc__card--a img { width: 98.726%; }                         /* 310 / 314 */
.v2-site-fhc-inc__card--b { --inc-img-top: 36px; }                        /* y36 */
.v2-site-fhc-inc__card--b img { width: 89.172%; margin-left: 6.051%; }    /* 280, x19 */
/* The column is 450, not the comp's 437: its own longest bullet is a 407 text
   node in a 437 block, i.e. it already overhangs, and in Jost that bullet needs
   403 of the 401 a 437 block leaves after the icon -- two pixels short, one wrap. */
.v2-site-fhc-inc__card > div { position: relative; z-index: 1; }
.v2-site-fhc-inc__card h3 {
  color: var(--blue-deep); font-family: var(--display); font-weight: 800;
  text-transform: uppercase; font-size: 36px; line-height: 1; letter-spacing: -.04em;  /* 36, -1.44 */
  /* The comp breaks every one of these after the "&", and no single width can
     do that in Jost: on Dental "Specialized Services" (354) is wider than
     "Preventive & Basic" (325), so any box that keeps the first whole also
     keeps the second together. The break is in the markup instead. */
  margin: 0 0 8px;                                           /* 8 to the rule */
}
.v2-site-fhc-inc__card h3 + span {
  display: block; width: 60px; height: 4px; border-radius: 2px;   /* 60 x 4, r2 */
  background: #00B6ED; margin-bottom: 24px;                       /* itemSpacing 24 */
}
.v2-site-fhc-inc__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }  /* 12 */
/* counterAxisAlignItems is CENTER: on the two-line row the icon sits 24 down,
   centred across BOTH lines, not on the first one. For a one-line row that
   resolves to the same 6 a fixed offset would give, so centring serves both. */
.v2-site-fhc-inc__card li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px;   /* 24, 1286-1274 */
  align-items: center;
  color: var(--blue-deep); font-weight: 700; font-size: 24px; line-height: 1.5;  /* 24 / 36 */
}
.v2-site-fhc-inc__card li svg { width: 24px; height: 24px; display: block; }

@media (max-width: 1599px) {
  .v2-site-fhc-inc__in { gap: 64px; }
  .v2-site-fhc-inc__h { font-size: 48px; }
}
@media (max-width: 1199px) {
  .v2-site-fhc-inc { padding: 56px 24px; }
  /* "Private Health Insurance Made Simple with Madrinas Insurance" is 58
     characters and ran to five lines at the shared 36. Scoped to this page:
     its siblings' intro headings are half the length and sit fine at 36. */
  .v2-site--prv .v2-site-fhc-top__copy .v2-site-h2 { font-size: 30px; }
  .v2-site-fhc-inc__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .v2-site-fhc-inc__h { font-size: 34px; }
  /* Stacked, the card is content-height and the art sits above the copy rather
     than beside it -- at 437 the text block would overrun a narrow card. */
  .v2-site-fhc-inc__card { min-height: 0; padding: 24px; }
  /* The blob is absolutely positioned, so a STATIC text block paints underneath
     it and the heading's first letters disappear into the blue. Both children
     are lifted above it rather than the blob being pushed down -- it has to stay
     behind the illustration, which overlaps it by design. */
  .v2-site-fhc-inc__card::before { left: -60px; top: -60px; width: 260px; height: 260px; z-index: 0; }
  .v2-site-fhc-inc__card { grid-template-columns: minmax(0, 1fr); align-items: start; }
  /* --inc-img-top positions the art beside the copy on the desktop canvas; the
     stacked card puts it above instead, so every page's value is reset here. */
  .v2-site-fhc-inc__card { --inc-img-top: 0px; }
  .v2-site-fhc-inc__card img,
  .v2-site-fhc-inc__card--b img { width: 180px; margin-left: 0; }
  .v2-site-fhc-inc__card > div { margin-top: 16px; }
  .v2-site-fhc-inc__card h3 { font-size: 24px; max-width: none; }
  .v2-site-fhc-inc__card li { font-size: 18px; line-height: 1.45; }
  .v2-site-fhc-inc__card li svg { margin-top: 2px; }
  /* The desktop rule is `padding: 0 24px` + `min-height: 122` because the comp
     pins the frame and lets its taller content centre. Stacked, the content is
     taller still, so flex-start pinned the icon 1px off the top edge. */
  .v2-site-fhc-inc__note {
    align-items: flex-start; padding: 20px; min-height: 0; gap: 14px;
  }
  .v2-site-fhc-inc__note svg { flex-basis: 40px; width: 40px; height: 40px; }
  .v2-site-fhc-inc__note h3 { font-size: 20px; margin-bottom: 6px; }
  .v2-site-fhc-inc__note + .v2-site-fhc-inc__note { margin-top: 20px; }
  .v2-site-fhc-inc__box h3 { font-size: 24px; }
}
/* Phone only: break the heading "Private Health / Insurance Made / Simple with /
   Madrinas Insurance" (client, 2026-10-19). Its longest wanted line is 297 and
   its shortest unwanted pair 310, so 300 is the only window -- and the 360
   column is 312, two pixels too wide to find it on its own. Not applied above
   480, where the heading has room to run full width. */
@media (max-width: 480px) {
  .v2-site--prv:lang(en) .v2-site-fhc-top__copy .v2-site-h2 { max-width: 300px; }
}
/* end 58c */
/* ==========================================================================
   61. Dental (/dental-insurance)
   ==========================================================================
   Figma 5284:26994. Everything is the family's shared components in 58 and
   58c; only the per-card colours and the third card's rotated illustration
   are this page's. The comp also carries an EARLIER draft of the same section
   (5284:27173) holding six cards -- the three Private Health ones and the
   three dental ones -- which is not built; 6110:22918 is the finished one. */

/* 77 at the foot, against Private Health's 100. */
.v2-site--dnt .v2-site-fhc-inc { padding-bottom: 76px; }     /* 77 less the border */
/* The heading runs four lines here, three there, and the comp spaces this one
   41 off the tinted box rather than 29. */
.v2-site--dnt .v2-site-fhc-inc__h { margin-bottom: 41px; }   /* 333 -> 374 */
.v2-site--dnt .v2-site-fhc-inc__box { margin-bottom: 0; }    /* nothing follows it here */

.v2-site--dnt .v2-site-fhc-inc__card--a { --inc-blob: #0078CE; }
.v2-site--dnt .v2-site-fhc-inc__card--b { --inc-blob: #FF399E; }
.v2-site--dnt .v2-site-fhc-inc__card--c { --inc-blob: #FFEB00; }

/* The only rotated illustration in the family: -11.056deg, and its axis-aligned
   box (341.4) overhangs the card's left edge by 31.2, where the card clips it.
   The export arrives already rotated, so the transform is NOT reapplied -- the
   width is the rotated box as a share of the 314 column. */
.v2-site--dnt .v2-site-fhc-inc__card--c { --inc-img-top: 21px; }          /* 20.8 */
.v2-site--dnt .v2-site-fhc-inc__card--c img { width: 108.726%; margin-left: -9.936%; }  /* 341.4, x-31.2 */

@media (max-width: 1199px) {
  .v2-site--dnt .v2-site-fhc-inc__h { margin-bottom: 0; }
  .v2-site-fhc-inc__card--c img { width: 180px; margin-left: 0; }
}
/* end 61 */
/* ==========================================================================
   62. Vision (/vision-insurance)
   ==========================================================================
   Figma 5284:27687. Every section is the family's: this page adds only its
   three card colours, a wider blob on the taller middle card, and the two
   illustrations that are not shared. */

.v2-site--vsn .v2-site-fhc-inc { padding-bottom: 76px; }     /* 77 less the border */
.v2-site--vsn .v2-site-fhc-inc__h { margin-bottom: 51px; }   /* 333 -> 384 */
.v2-site--vsn .v2-site-fhc-inc__box { margin-bottom: 0; }

.v2-site--vsn .v2-site-fhc-inc__card--a { --inc-blob: #0078CE; }
/* The middle card runs 384 tall for its three bullets and carries a bigger
   blob than the family's 361x354. */
.v2-site--vsn .v2-site-fhc-inc__card--b {
  --inc-blob: #FF399E;
  --inc-blob-x: -131px; --inc-blob-y: 55px;                  /* -131, 55 */
  --inc-blob-w: 392px;  --inc-blob-h: 398px;                 /* 392 x 398 */
  --inc-img-top: 74px;                                       /* y74, not centred */
}
.v2-site--vsn .v2-site-fhc-inc__card--b img { width: 89.172%; margin-left: 5.414%; }  /* 280, x17 */
.v2-site--vsn .v2-site-fhc-inc__card--c { --inc-blob: #FFEB00; --inc-img-top: 77px; }
/* The only landscape illustration in the family -- 318.9 x 211.6, overhanging
   the card's left edge by 14 where the card clips it. */
.v2-site--vsn .v2-site-fhc-inc__card--c img { width: 101.561%; margin-left: -4.459%; }  /* 318.9, x-14 */

@media (max-width: 1199px) {
  .v2-site--vsn .v2-site-fhc-inc__h { margin-bottom: 0; }
  .v2-site--vsn .v2-site-fhc-inc__card--b img,
  .v2-site--vsn .v2-site-fhc-inc__card--c img { width: 180px; margin-left: 0; }
  .v2-site--vsn .v2-site-fhc-inc__card--b,
  .v2-site--vsn .v2-site-fhc-inc__card--c { --inc-img-top: 0px; }
}
/* end 62 */
/* ==========================================================================
   63. Compare all plans (/compare-all-plans)
   ==========================================================================
   Figma 5284:28373. Its intro, reviews, FAQ and band are the family's; this
   page's own section is the comparison table and the blue "why compare"
   panel under it, both on the 1480 canvas. The table is the site's own
   .v2-site-tbl restyled, not a new component -- it keeps the real <table>
   and the row-per-card stacking the phone block already has. */

.v2-site-cmp-tbl { background: #fff; padding: 78px max(24px, (100% - 1480px) / 2) 78px; }  /* 78 / 1480 */
.v2-site-cmp-tbl__in { max-width: 1480px; margin-inline: auto; }
.v2-site-cmp-tbl__h {
  color: var(--blue-deep); font-family: var(--display); font-weight: 800;
  text-transform: uppercase; font-size: 48px; line-height: 1; letter-spacing: -.04em;  /* 48 */
  text-align: center; margin: 0 0 36px;                      /* 174 -> 210 */
}
.v2-site-cmp-tbl__h em { color: var(--blue); font-style: normal; }

/* The comp wraps the table in a clipped, rounded, shadowed card. */
.v2-site--cmp .v2-site-tbl__scroll {
  border: 1px solid #CBD5E1; border-radius: 12px;            /* 12 */
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);                  /* 0 4 4 25% */
  background: #fff;
}
.v2-site--cmp .v2-site-tbl { min-width: 1000px; font-size: 18px; }
.v2-site--cmp .v2-site-tbl th {
  background: #0078CD; color: #fff;                          /* header band */
  font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.8;  /* 20 / 36 */
  text-transform: none; letter-spacing: 0;
  padding: 22px 24px; border: 0; text-align: left;           /* 80 tall, 24 inset */
}
/* 310 | 390 | 390 | 390 of 1480. */
.v2-site--cmp .v2-site-tbl th:nth-child(1) { width: 20.946%; }
.v2-site--cmp .v2-site-tbl th:nth-child(2),
.v2-site--cmp .v2-site-tbl th:nth-child(3),
.v2-site--cmp .v2-site-tbl th:nth-child(4) { width: 26.351%; }
.v2-site--cmp .v2-site-tbl td {
  padding: 28px 24px; border-top: 0; border-bottom: 1px solid #E2E8F0;  /* 28 / 24 */
  color: var(--blue-deep); font-size: 18px; line-height: 1.667;         /* 18 / 30 */
  vertical-align: middle;
}
.v2-site--cmp .v2-site-tbl td:first-child {
  width: auto; font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.8;
}
/* Every row is a fixed 116 in the comp, whether its cells run to one line or
   two. On a tr, `height` behaves as a minimum, which is what is wanted. */
.v2-site--cmp .v2-site-tbl tbody tr { height: 116px; }       /* 116 */
/* The comp stripes on EVEN rows (the first is white), which is the opposite of
   the site default. */
.v2-site--cmp .v2-site-tbl tbody tr:nth-child(odd) { background: #fff; }
.v2-site--cmp .v2-site-tbl tbody tr:nth-child(even) { background: #EDF5FB; }
.v2-site--cmp .v2-site-tbl tbody tr:last-child td { border-bottom: 0; }

/* --- The blue "why compare" panel: 1480x316, a fairy clipped off each end. --- */
.v2-site-cmp-why {
  position: relative; overflow: hidden;                      /* clipsContent TRUE */
  background: #0078CD; border-radius: 32px;                  /* 32 */
  margin-top: 36px;                                          /* 1334 -> 1370 */
  min-height: 316px; padding: 32px 140px;                    /* 316, 32 / 140 */
  display: flex; align-items: center;
}
/* The sparkle field is one group, ink-trimmed on export (1452x852 from a
   1531.5x880.9 box), so it is centred on that box rather than pinned: it is a
   diffuse field, and a few px either way is invisible. */
.v2-site-cmp-why__stars {
  position: absolute; left: -11px; top: -263px;              /* box -51,-277 + half the trim */
  width: 1452px; height: 852px; max-width: none; pointer-events: none;
}
.v2-site-cmp-why__fairy { position: absolute; max-width: none; pointer-events: none; }
/* Shares of the 1480 panel, not fixed px: at 1200 a fixed left: 1313 put the
   right fairy off a 1152 panel entirely and it vanished. */
.v2-site-cmp-why__fairy--l { left: -4.730%; top: 10px; width: 14.162%; }   /* -70, 10, 209.6 */
.v2-site-cmp-why__fairy--r { left: 88.716%; top: -8px; width: 15.770%; }   /* 1313, -8, 233.4 */
.v2-site-cmp-why__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 339fr 741fr; gap: 120px;  /* 339 | 120 | 741 */
  align-items: center; width: 100%;
}
.v2-site-cmp-why__h {
  color: #fff; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 40px; line-height: 1.05; letter-spacing: -.02em; margin: 0;
}
.v2-site-cmp-why__h em { color: var(--yellow); font-style: normal; }
.v2-site-cmp-why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }  /* 24 */
.v2-site-cmp-why__list li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px;  /* 24, 635-623 */
  align-items: center; color: #fff; font-size: 18px; line-height: 2;     /* 18 / 36 */
}
.v2-site-cmp-why__list li b { font-weight: 700; }
.v2-site-cmp-why__list li svg { width: 24px; height: 24px; display: block; }

@media (max-width: 1599px) {
  .v2-site-cmp-why { padding-inline: 90px; }
  .v2-site-cmp-why__in { gap: 64px; }
}
@media (max-width: 1199px) {
  .v2-site-cmp-tbl { padding: 56px 24px; }
  .v2-site-cmp-tbl__h { font-size: 34px; }
  /* The star field is a fixed 1452 wide: at 1480 it covers the panel at its
     natural size, but in a 342 panel the visible window is its dense middle at
     full scale and the copy sits on top of it. It covers the panel instead,
     and a mask fades it out across the bullet block.

     The mask is not decoration -- it is the readability fix. White text on this
     blue is 4.60:1, and AA for normal text wants 4.5, so the headroom is 0.005
     of luminance: even 2% white over the blue breaks it. There is no opacity at
     which a star can sit behind the bullets and pass. So the stars live where
     the heading is (28px/800 is large text, floor 3:1, which allows about 25%
     white) and along the foot behind the fairies, and fade to nothing over the
     copy (client: keep the stars, keep it readable, 2026-10-19). */
  /* The field's stars are two swooshes at its far left and right; the middle
     four eighths are empty (alpha 0.0-0.1), so any centre crop shows nothing --
     the whole 1452 is scaled to the panel instead, putting a swoosh in each top
     corner at 201 tall. Masked out by 70% of that, which clears the bullets.
     .28 is the measured ceiling: the heading is 28px/800, so WCAG large text at
     a 3:1 floor, and the brightest star behind it reads 3.21:1. The bullets are
     normal text at 4.5 and no star reaches them (4.60:1 throughout). */
  /* height is a share of the PANEL, not auto. With `height: auto` the mask's
     percentages are relative to the image, which grows as the panel widens --
     at 768 the field was 422 tall against a 422 panel and the fade no longer
     cleared the copy. The copy starts at 20-25% of the panel at every width
     from 360 to 1199, so a box of 18% with the fade inside it is always above
     it. object-position: top keeps the swooshes' tops in frame.
     .21 is the measured ceiling across 360-1199: the heading is 28px/800, so
     WCAG large text at a 3:1 floor, and the brightest star behind it reads
     3.26:1 at the worst width. The bullets are normal text at 4.5 and no star
     reaches them -- 4.60:1 at every width in both languages. */
  .v2-site-cmp-why__stars {
    left: 0; top: 0; width: 100%; height: 18%; opacity: .21;
    object-fit: cover; object-position: top center;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0 55%, transparent 100%);
  }
  /* The fairies flank the copy at 1480; stacked there is no room beside it, so
     they sit along the foot instead and the panel reserves 120 for them. */
  /* 136 at the foot: a 92-wide fairy stands 141 tall and sits 14 proud of the
     bottom edge, so the copy has to end 127 above it -- 120 left the last
     bullet 7 short and the fairy clipped its descenders. */
  .v2-site-cmp-why { padding: 32px 24px 136px; min-height: 0; margin-top: 32px; }
  .v2-site-cmp-why__fairy--l { left: -18px; right: auto; top: auto; bottom: -14px; width: 92px; }
  .v2-site-cmp-why__fairy--r { left: auto; right: -18px; top: auto; bottom: -14px; width: 98px; }
  .v2-site-cmp-why__in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .v2-site-cmp-why__h { font-size: 28px; }
  .v2-site-cmp-why__list li { font-size: 17px; line-height: 1.5; align-items: start; }
  .v2-site-cmp-why__list li svg { margin-top: 2px; }
}
/* The same card treatment on /compare-all-plans, and up to 1199: its table is
   a 1000 minimum against a wrap that is under that until 1200. */
@media (max-width: 1199px) {
  .v2-site--cmp .v2-site-tbl { min-width: 0; font-size: 17px; }
  .v2-site--cmp .v2-site-tbl thead { display: none; }
  /* tbody in the selector: the 116 is set on `tbl tbody tr` (0,2,2) and a
     plain `tbl tr` (0,2,1) loses to it however late it comes. */
  .v2-site--cmp .v2-site-tbl tbody tr,
  .v2-site--cmp .v2-site-tbl tr { display: block; height: auto; padding: 18px 20px; }
  .v2-site--cmp .v2-site-tbl td {
    display: block; width: auto; padding: 0; border: 0;
    font-size: 17px; line-height: 1.5;
  }
  .v2-site--cmp .v2-site-tbl td + td { margin-top: 10px; }
  .v2-site--cmp .v2-site-tbl td:first-child { font-size: 19px; }
  .v2-site--cmp .v2-site-tbl td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--display); font-weight: 800; font-size: 11px;
    text-transform: uppercase; letter-spacing: .06em; color: var(--blue);
  }
  .v2-site--cmp .v2-site-tbl tbody tr:last-child td { border-bottom: 0; }
}
/* end 63 */
/* ==========================================================================
   64. Group health (/group-health-insurance)
   ==========================================================================
   Figma 5284:32331. Hero, intro, "why choose", reviews, FAQ and band are the
   family's. Its "What's included" is a second VARIANT of 58c rather than the
   illustrated one: a 452 heading column beside a 2x2 grid of solid blue
   cards, on the same 1480. Figma calls it "What's Included Section" where the
   other pages call theirs "MainSectionWrapper" -- different node, same slot. */

.v2-site-fhc-inc--grid {
  border-block: 0;                                           /* no rule on this one */
  padding: 96px max(24px, (100% - 1480px) / 2);              /* 96 / 1480 */
}
.v2-site-fhc-inc--grid .v2-site-fhc-inc__in {
  grid-template-columns: 452fr 964fr; gap: 64px;             /* 452 | 64 | 964 */
}
/* 48 here against the illustrated variant's 64. The 400 cap is what gives the
   comp's three lines: Jost fits "What's Included in" in the comp's own 452 box
   and drops to two. It needs to be under 432 to break after "Included" and
   under about 418 to break after "Group", and over 375 to hold line one. */
.v2-site-fhc-inc--grid .v2-site-fhc-inc__h {
  font-size: 48px; margin: 0; max-width: 400px;              /* 48, 452 -> Jost */
}

.v2-site-fhc-inc__grid {
  /* stretch, not start: the comp's rows are equal-height pairs (210/210 then
     234/234) -- it is the taller card in each row that sets both. */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;                                                 /* 474 + 16 + 474 = 964 */
}
.v2-site-fhc-inc__gcard {
  background: #0078CD; border: 1px solid #C9DCEC; border-radius: 24px;  /* 24 */
  padding: 40px;                                             /* 40 */
}
.v2-site-fhc-inc__gcard h3 {
  color: #fff; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; font-size: 24px; line-height: 1; letter-spacing: -.04em;  /* 24 */
  /* 340: "Flexible Employer Contributions" is 385 in Jost and the card's inner
     width is 392, so it would sit on one line where the comp has two -- which
     is also what makes the second row 234 tall rather than 210. */
  margin: 0 0 16px; max-width: 340px;                        /* itemSpacing 16 */
}
.v2-site-fhc-inc__gcard p {
  color: #fff; font-size: 20px; line-height: 1.5; margin: 0;  /* 20 / 30 */
}

@media (max-width: 1199px) {
  .v2-site-fhc-inc--grid { padding: 56px 24px; }
  .v2-site-fhc-inc--grid .v2-site-fhc-inc__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .v2-site-fhc-inc--grid .v2-site-fhc-inc__h { font-size: 34px; }
  .v2-site-fhc-inc__gcard { padding: 28px; }
  .v2-site-fhc-inc__gcard h3 { font-size: 20px; }
  .v2-site-fhc-inc__gcard p { font-size: 17px; }
}
@media (max-width: 640px) {
  .v2-site-fhc-inc__grid { grid-template-columns: minmax(0, 1fr); }
}
/* end 64 */

/* ---------------------------------------------------------------------------
   65. Mortgage protection (/mortgage-protection) -- Figma 5284:40096

   Each section sits on its OWN canvas, as on /retirement-planning: Why Choose
   1780, What's Included 1480. .v2-site-wrap--wide already measures 1780 inner
   at desktop (1840 - 2x30 gutter), so Why Choose needs no wrap override.

   The comp prints "over two million families served". The client figure is
   2.5 million -- see the brain's stale-two-million note. Do not copy the comp.
--------------------------------------------------------------------------- */

/* --- Why Choose: five white cards on a fading band (5284:40224). ---
   Reuses .v2-site-fhc-why__list wholesale -- radius 16, padding 32, gap 16, a
   40px icon with 16 under it, 24px uppercase title, 18/1.5 body, and the
   5 / 2 / 1 column steps -- because both comps draw the identical card. Only
   the band and the card EDGE differ, so only those are scoped here. */
/* INSET shadows, not borders, on both the band and the cards. Figma draws a
   stroke INSIDE the box; a CSS border sits outside it and is added to a
   content-driven height -- which put the band 2 over and every card 2 over,
   for 4 on the section. inset box-shadow is the faithful translation. */
.v2-site-mtg-why {
  background: linear-gradient(180deg, #f4f7fa 0%, rgba(244, 247, 250, 0) 23.17%);
  box-shadow: inset 0 1px 0 rgba(0, 120, 205, .15),
              inset 0 -1px 0 rgba(0, 120, 205, .15);       /* #0078CD @15, 1w INSIDE */
}
/* --wrap-wide (1840) less the 24 gutter is 1792 at 1920, but this section is
   drawn on 1780 -- 1920 less its own 70 padding. 12px of slack spread across
   five cards put each one 2.4 wide. Carry the gutter so the inner box is the
   comp's number at every width. */
.v2-site-mtg-why > .v2-site-wrap--wide { max-width: calc(1780px + 2 * var(--gutter)); }
/* The comp draws an edge and no shadow: stroke #003E6B @10 1w INSIDE, effects []. */
.v2-site--mtg .v2-site-fhc-why__list li {
  box-shadow: inset 0 0 0 1px rgba(0, 62, 107, .1);
}
/* The glyphs are exported from the comp and carry its blue, #0078CD -- the one
   sampled off the artboards, not --blue (#0F7FD4) that the shared rule fills
   them with. Same note as .v2-site-h2 em. */
.v2-site--mtg .v2-site-fhc-why__ico svg { fill: #0078cd; }

@media (min-width: 1024px) {
  .v2-site-mtg-why { padding-block: 96px; }                                   /* 96 / 96 */
  /* 895, not the shared 780: at 780 the headline breaks a word early and the
     comp's two lines become three. */
  .v2-site-mtg-why .v2-site-head { max-width: 895px; margin-bottom: 56px; }   /* 895, gap 56 */
  .v2-site-mtg-why .v2-site-h2 {
    font-size: 48px; line-height: 1; letter-spacing: -.04em;                  /* 48 / 48 / -1.92 */
  }
  /* 726, not the comp's 680. The comp is Futura PT and the site is Jost, which
     is wider: this sentence measures 725.5 on one line here, so a 680 box wraps
     it and the head grows 30. Sized to the measured number, as the comp draws
     it -- one line. */
  .v2-site-mtg-why .v2-site-head p {
    max-width: 726px; margin: 8px auto 0;                                     /* 680 -> 726, gap 8 */
    font-size: 20px; line-height: 1.5;                                        /* 20 / 30 */
  }
}
/* --- What's Included: heading column left, 2x2 blue cards right (5284:47738).
   Canvas 1480 (1920 less its own 220 padding), laid out HORIZONTAL with a 64
   gap: 452 heading + 64 + 964 grid. The grid itself is .v2-site-fhc-inc__grid
   unchanged -- #0078CD, radius 24, padding 40, 474 + 16 + 474 = 964, 24px
   uppercase title with 16 under it are all identical in both comps. --- */
.v2-site-mtg-inc > .v2-site-wrap { max-width: calc(1480px + 2 * var(--gutter)); }
.v2-site-mtg-inc__h { margin: 0; }
/* Same #C9DCEC edge as fhc, but its strokeAlign is INSIDE: as a CSS border it
   is added to each content-driven card, which put both rows 2 over and the
   grid 4. Inset shadow draws it without taking space. */
.v2-site--mtg .v2-site-fhc-inc__gcard {
  border: 0;
  box-shadow: inset 0 0 0 1px #c9dcec;                           /* 1w INSIDE */
}

@media (min-width: 1024px) {
  .v2-site-mtg-inc { padding-block: 96px; }                      /* 96 / 96 */
  .v2-site-mtg-inc__in {
    display: grid; grid-template-columns: 452fr 964fr; gap: 64px; /* 452 | 64 | 964 */
    align-items: start;
  }
  .v2-site-mtg-inc__h {
    font-size: 48px; line-height: 1; letter-spacing: -.04em;      /* 48 / 48 / -1.92 */
    /* The comp's frame is 452 and it wraps after "Included" -- Futura PT's caps
       run wider than Jost's here, so at 452 Jost pulls "in" up onto line one and
       the headline is the same four lines in a different shape. 392 sits between
       "What's included" (344.4) and "What's included in" (397.6) as measured in
       the browser, which restores the drawn break. The COLUMN stays 452. */
    max-width: 392px;                                             /* 452 frame, 392 text */
  }
  /* fhc pins its h3 to 340 for one long German-ish string of its own; these
     four titles are shorter and must be free to use the full 394 inner width,
     or "Living Benefits (Optional)" wraps where the comp has it on one line. */
  .v2-site--mtg .v2-site-fhc-inc__gcard h3 { max-width: none; }
}
/* --- Testimonials: a two-row marquee drifting in opposite directions
   (5284:40347). The comp's row holds FIVE 450-wide cards on a 1780 canvas
   (5*450 + 4*24 = 2346) and ends in a 428-wide #F4F7FA fade rectangle, which
   is what says marquee rather than grid.

   CONTENT: the comp draws eight identical "Maria Rodriguez / Miami Florida"
   cards quoting an Obamacare $0 plan, under the FAQ's heading. All three are
   comp errors. We ship the 7 real verbatim Google reviews, our own heading,
   and no location line -- we have no locations for these reviewers and will
   not invent them. Each row's set is duplicated once, aria-hidden, which is
   how a seamless loop works and is not invented content. --- */
.v2-site-mtg-tst { background: #f4f7fa; overflow: hidden; }
.v2-site-mtg-tst__head { text-align: center; }
.v2-site-mtg-tst__chip {
  display: inline-flex; align-items: center; gap: 10px;        /* gap 10 */
  padding: 8px 24px; border-radius: 500px;                     /* 8/24, r500 */
  background: linear-gradient(90deg, rgba(241, 233, 199, .16), #f1e9c7);
  color: var(--blue-deep); font-size: 14px; font-weight: 600;
  /* 35 tall = 8 + 19 + 8; the rating row inside the comp's chip is 19. */
  line-height: 19px;
}
.v2-site-mtg-tst__chipstars { display: inline-flex; gap: 1px; }
.v2-site-mtg-tst__chipstars svg { width: 16px; height: 16px; fill: #fbab18; display: block; }  /* 16 */
.v2-site-mtg-tst__chipg { display: inline-flex; }
.v2-site-mtg-tst__chipg svg { width: 56px; height: 18px; display: block; object-fit: contain; }
.v2-site-mtg-tst__rows { display: grid; gap: 56px; }           /* row gap 56 */
.v2-site-mtg-tst__row { overflow: hidden; }
/* The fade the comp draws as a 428 rectangle, on both edges. */
.v2-site-mtg-tst__row {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 140px, #000 calc(100% - 140px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 140px, #000 calc(100% - 140px), transparent);
}
.v2-site-mtg-tst__track {
  display: flex; gap: 24px; width: max-content;                /* gap 24 */
  animation: v2-site-mtg-drift 70s linear infinite;
  padding-top: 16px;                                           /* the mark sits at -16 */
}
.v2-site-mtg-tst__row--rev .v2-site-mtg-tst__track { animation-direction: reverse; }
.v2-site-mtg-tst__track:hover { animation-play-state: paused; }
@keyframes v2-site-mtg-drift { to { transform: translateX(calc(-50% - 12px)); } }
@media (prefers-reduced-motion: reduce) {
  .v2-site-mtg-tst__track { animation: none; }
  .v2-site-mtg-tst__row { overflow-x: auto; }
}

.v2-site-mtg-tst__card {
  position: relative; flex: 0 0 450px; min-height: 294px;      /* 450 x 294 */
  margin: 0; padding: 32px; border-radius: 32px;               /* 32, r32 */
  background: #fff; box-shadow: 0 0 100px rgba(0, 48, 82, .08);
  /* no overflow:hidden -- the quote mark is a child at y -16 and must escape */
}
.v2-site-mtg-tst__mark { position: absolute; top: -16px; left: 36px; width: 32px; height: 32px; }
.v2-site-mtg-tst__mark svg { width: 32px; height: 32px; fill: #0078cd; display: block; }
.v2-site-mtg-tst__top { display: flex; align-items: center; gap: 16px; }   /* 40 then x=88 */
.v2-site-mtg-tst__av {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;           /* 40 */
  display: grid; place-items: center;
  background: #e8f3fb; color: var(--blue-deep); font-weight: 700; font-size: 18px;
}
.v2-site-mtg-tst__who { flex: 1 1 auto; color: var(--blue-deep); font-size: 20px; line-height: 1.5; }
.v2-site-mtg-tst__g { flex: 0 0 32px; width: 32px; height: 32px; }         /* 32 at x=386 */
.v2-site-mtg-tst__g svg { width: 32px; height: 32px; display: block; }
.v2-site-mtg-tst__stars { display: inline-flex; gap: 4px; margin-top: 16px; }  /* y 104, pitch 22 */
.v2-site-mtg-tst__stars svg { width: 18px; height: 18px; fill: #fbab18; display: block; }
.v2-site-mtg-tst__card blockquote {
  margin: 16px 0 0; padding-top: 16px;                          /* line at 138, text at 154 */
  border-top: 1px solid rgba(0, 62, 107, .12);
  color: var(--ink-soft); font-size: 18px; line-height: 1.5;    /* 18 / 27 */
}

@media (min-width: 1024px) {
  .v2-site-mtg-tst { padding-block: 96px; }                     /* 96 / 96 */
  .v2-site-mtg-tst__head { margin-bottom: 56px; }               /* 137 head, 56 gap */
  .v2-site-mtg-tst__head .v2-site-h2 { font-size: 48px; line-height: 1; letter-spacing: -.04em; margin-top: 16px; }
}
@media (max-width: 1023px) {
  .v2-site-mtg-tst__card { flex-basis: 320px; min-height: 0; padding: 24px; }
  .v2-site-mtg-tst__rows { gap: 24px; }
}
/* --- Intro "Keep Your Family in Their Home" (5284:40201). Canvas 1480,
   laid out 704 | 72 | 704. The comp's right-hand photo is an EMPTY grey
   placeholder, rotated 2.68deg with a 30 radius -- we keep the page's real
   photo and reproduce the treatment rather than shipping a grey block. --- */
.v2-site-mtg-intro > .v2-site-wrap { max-width: calc(1480px + 2 * var(--gutter)); }
.v2-site-mtg-intro__h { margin: 0; }
.v2-site-mtg-intro__rule {
  display: block; width: 80px; height: 6px; border-radius: 3px;   /* 80 x 6, r3 */
  background: #00b6ed; margin: 16px 0 0;                          /* 240 -> 256 */
}
.v2-site-mtg-intro__cont, .v2-site-mtg-intro__body { color: var(--blue-deep); }
.v2-site-mtg-intro__callout {
  background: #eef8ff; border-radius: 16px; padding: 24px;        /* #EEF8FF, r16, 24 */
}
.v2-site-mtg-intro__callout p { margin: 0; color: var(--blue-deep); }
.v2-site-mtg-intro__callout-h em { font-style: normal; color: #0078cd; }
.v2-site-mtg-intro__photo img {
  display: block; width: 100%; height: auto; border-radius: 30px; /* r30 */
  transform: rotate(2.68deg);                                     /* rotation .0468 rad */
}

@media (min-width: 1024px) {
  .v2-site-mtg-intro { padding-block: 96px; }                     /* 96 / 96 */
  .v2-site-mtg-intro__in {
    display: grid; grid-template-columns: 704fr 704fr; gap: 72px; /* 704 | 72 | 704 */
    align-items: start;
  }
  .v2-site-mtg-intro__h {
    font-size: 48px; line-height: 1; letter-spacing: -.04em;      /* 48 / 48 / -1.92 */
    /* The comp sets this on three lines in its 704 frame, breaking after the
       dash and after "in". Jost is narrower here, so at 704 it collapses to
       two. Measured UPPERCASE and with the -.04em tracking, which is what it
       actually renders as: "MORTGAGE PROTECTION -" 544, + "KEEP" 655.4;
       "KEEP YOUR FAMILY IN" 442.8, + "THEIR" 568.6. Any box in [544, 568.6)
       restores both breaks. The COLUMN stays 704. */
    max-width: 556px;                                             /* 704 frame, 556 text */
  }
  /* The lede is ONE sentence the comp breaks into two columns with a 1px rule
     between them: 308 text, then the rule at 552, then 348 text from 576. The
     second column carries the rule as its own left border plus 24 of padding,
     so the 24 grid gap lands the line exactly on 552. */
  .v2-site-mtg-intro__lede {
    display: grid; grid-template-columns: 308fr 372fr;            /* 308 | 24 | (24 + 348) */
    column-gap: 24px; margin: 40px 0 0;                           /* 262 -> 302 */
  }
  .v2-site-mtg-intro__lede strong {
    font-family: var(--display); font-weight: 800; text-transform: uppercase;
    font-size: 30px; line-height: 1; letter-spacing: -.04em;      /* 30 / 30 / -1.2 */
    color: var(--blue-deep);
  }
  .v2-site-mtg-intro__lede span {
    border-left: 1px solid #4d4d4d; padding-left: 24px;           /* line at 552 */
    font-size: 20px; line-height: 1.5; color: var(--blue-deep);   /* 20 / 30 */
  }
  .v2-site-mtg-intro__cont {
    margin: 16px 0 0; font-size: 20px; line-height: 1.5;          /* 392 -> 408, 20 / 30 */
  }
  .v2-site-mtg-intro__body {
    margin: 40px 0 0; font-size: 20px; line-height: 1.5;          /* 438 -> 478 */
  }
  /* 24 upper on its own line, then the sentence continues at 20 -- the comp
     draws them as two blocks, so the lead is display:block inside the same p. */
  .v2-site-mtg-intro__body strong {
    display: block; margin-bottom: 8px;                           /* 502 -> 510 */
    font-family: var(--display); font-weight: 800; text-transform: uppercase;
    font-size: 24px; line-height: 1; letter-spacing: -.04em;      /* 24 / 24 / -.96 */
  }
  .v2-site-mtg-intro__callout { margin-top: 24px; }               /* 570 -> 594 */
  .v2-site-mtg-intro__callout-h {
    font-family: var(--display); font-weight: 800; text-transform: uppercase;
    font-size: 30px; line-height: 1; letter-spacing: -.04em;      /* 30 / 30 / -1.2 */
    margin-bottom: 16px !important;                               /* 678 -> 694 */
  }
  .v2-site-mtg-intro__callout p + p { font-size: 24px; line-height: 1.5; }  /* 24 / 36 */
}
/* end 65 */