/* ==========================================================================
   Medicaid landing pages - standalone stylesheet
   --------------------------------------------------------------------------
   /medicaid, /medicaid-transition and their Spanish mirrors, and NOTHING else.

   ITS OWN FILE ON PURPOSE. These four pages were rebuilt on main from the
   /v2/lp versions on the new-page branch, and the brief for that (see the
   project brain, medicaid-pages-to-main.md) set one constraint: no coupling to
   v2.css or v2-site.css, so that when new-page is merged these pages cannot
   collide with the lp/ subsystem arriving with it. new-page changes
   v2-site.css by about 4,000 lines; a rule added there would conflict.
   /general already works this way - see _v2_gen_inline() in app.py.

   GENERATED, then kept by hand. Sliced out of new-page's v2-site.css and
   main's v2.css by the classes templates/medicaid/_macros.html actually emits,
   with the :root tokens and element resets those rules lean on. Edit it here;
   there is no build step and nothing regenerates it.
   ========================================================================== */
/* ---- from assets/css/v2-site.css (origin/new-page) ---- */
/* 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. */

/* ----------------------------------------------------------------------------------
   0. Metric-matched font fallbacks — these exist to stop layout shift
   ----------------------------------------------------------------------------------
   Added 2026-10-12 after the QA pass measured CLS 0.13-0.16 on desktop. The font
   stylesheet loads non-blocking (media=print onload), so the page first paints in the
   fallback and reflows when League Spartan and Jost arrive: with fonts.gstatic.com
   blocked vs loaded, content moved up to 89px in the first phone screen and 179px
   further down. Same technique and same reasoning as the METRIC-MATCHED FALLBACKS
   block at the top of v2.css; read that before changing these.

   MEASURED, THEN TUNED. Starting points are the pages' own strings set in the DOM at
   100px in Edge, web font vs the local face at 100%: League Spartan 800 = 92.5% of a
   synthesised-bold Arial; Jost 400 = 96.2% of Arial; Jost 600 = 96.0% and 700 = 98.7%
   of the real Arial Bold. But re-wrapping is a staircase — one string a hair over a
   line width moves everything under it — so the final values were swept against
   measured CLS (Lighthouse desktop throttling, all four pages) and against how far the
   hero and the next section move at 1024-1920px:
     - The worst offender was not a heading but the 12.5px consent text under the hero
       form. One extra line in the fallback made the card 19px taller, and the swap
       pulled the hero copy, the submit button and the "Why" section up with it. Jost
       400 at 95.5% with 600 (its links) at 94% holds the hero still at 20 of 24
       page/width combinations.
     - Jost's bold weights get faces of their own on the real Arial Bold: on the
       regular face alone the 700-weight "Why families call" items fit one line in the
       fallback and wrapped to two in Jost.
     - League Spartan 93% and Jost 700 100% were flat-best in their sweeps.
   ascent/descent are the fonts' own fontBoundingBox at 100px (League Spartan 70/22,
   Jost 107/38) divided by size-adjust, because Chrome applies size-adjust to the
   overrides too. Re-tune if a template's copy changes much: the scripts that did this
   are not in the repo, but the method above is enough to repeat it.

   local() only: nothing downloads, and where no listed font exists the face does not
   match and the stack falls through exactly as before. */
@font-face {
  font-family: "Spartan fb";
  src: local("Arial"), local("Roboto"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 93%;
  ascent-override: 75.27%;
  descent-override: 23.66%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jost fb";
  font-weight: 100 500;
  src: local("Arial"), local("Roboto"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 95.5%;
  ascent-override: 112.04%;
  descent-override: 39.79%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jost fb";
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"),
       local("HelveticaNeue-Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  size-adjust: 94%;
  ascent-override: 113.83%;
  descent-override: 40.43%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jost fb";
  font-weight: 700 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"),
       local("HelveticaNeue-Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  size-adjust: 100%;
  ascent-override: 107%;
  descent-override: 38%;
  line-gap-override: 0%;
}

/* ----------------------------------------------------------------------------------
   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;

  /* The "fb" faces (section 0) stand in until the web fonts arrive. */
  --display: "League Spartan", "Spartan fb", "Jost", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --body: "Jost", "Jost fb", 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: 17px;
  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;
}
/* :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 :focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; }
/* ----------------------------------------------------------------------------------
   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: 17px; 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--blue { background: var(--blue); color: #fff; }
.v2-site-btn--blue .v2-site-btn__ico,
.v2-site-btn--pink .v2-site-btn__ico { background: rgba(255, 255, 255, .22); }
/* 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; }
/* 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--yellow:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #e0c400, 0 16px 24px rgba(11, 60, 116, .22);
}
/* 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);
}
@keyframes v2-site-marquee { to { transform: translateX(-50%); } }
.v2-site-prog .v2-site-btn { align-self: flex-start; padding: 13px 26px; font-size: 14px; }
/* ----------------------------------------------------------------------------------
   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;
}
.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: 15px;
}
.v2-site-rev__who { flex: 1; min-width: 0; }
.v2-site-rev__name {
  font-family: var(--display); font-weight: 800; font-size: 16px;
  color: var(--blue-deep); display: block; text-transform: none;
}
.v2-site-rev__loc { font-size: 13px; 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: 14px; margin-bottom: 10px; }
.v2-site-rev blockquote {
  margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft);
  border-top: 1px solid var(--line); padding-top: 12px;
}
/* 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);
}
/* 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);
}
/* 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; }
.v2-site-bluecard .v2-site-btn { margin-top: auto; justify-content: center; }
.v2-site-bigoffice__acts .v2-site-btn { padding: 14px 26px; font-size: 14px; }
@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-btn { font-size: 15px; padding: 15px 22px; width: 100%; justify-content: center; }
}
body.v2-site .v2-site-cov__call:hover { transform: translateX(-50%) translateY(-1px); }
/* ----------------------------------------------------------------------------------
   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; }
/* 12, 33 */
.v2-site-h2r-hero__actions .v2-site-ico { width: 19px; height: 19px; }
@media (min-width: 641px) and (max-width: 1023px) {

  .v2-site-h2r-hero .v2-site-btn { width: auto; }
}
@keyframes v2-site-h2r-logos { to { transform: translateX(-50%); } }
.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; }
@keyframes v2-site-h2r-marquee { to { transform: translateX(-50%); } }
/* 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); }
/* 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: 100px; }
.v2-site-lp-hdr__logo { flex: 0 0 auto; line-height: 0; }
.v2-site-lp-hdr__logo img { height: 76px; 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; }
/* The not-a-government line, under the hero button and under every form (QC checklist,
   2026-10-18). It was only in the footer. Small, but at full --lp-mute contrast rather
   than faded: it is a disclosure, and Google's restricted-services review reads the
   page above the fold. The hero copy is white on navy, so it takes the hero's ink. */
.v2-site-lp-gov { margin: 14px 0 0 !important; font-size: 13.5px; line-height: 1.5; color: var(--lp-mute); }
.v2-site-lp-gov--hero { margin-top: 16px !important; max-width: 620px; font-size: 15px; color: rgba(255, 255, 255, .9); }
.v2-site-lp-formband .v2-site-lp-gov { 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; }
/* The crop is biased ABOVE centre because three of the photos are 730x894 portraits
   dropped into landscape cells (409x300 on desktop), and `cover` then throws away 179px
   top AND bottom. Centred, that slices the tops off people's heads — Kyle reported it on
   /medicaid, the father at the laptop. Faces sit in the upper third of all three, so
   holding the crop at 18% keeps every head in frame with headroom to spare.
   18% is as low as it goes: the highest head starts 85px down, and 18% of the 359px of
   croppable height puts the top edge at 64px — 21px of clearance. Lower and the laptops
   and tablet that carry the story start dropping out of the bottom.
   It is a no-op for the two photos that are not cropped vertically (the tall first cell
   and the landscape family shot), so one declaration covers the grid. */
.v2-site-lp-gal img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.v2-site-lp-gal figure.is-contain { display: grid; place-items: center; background: var(--lp-band); padding: 12px; }
/* The cut-out (the Caravana bus) is letterboxed, not cropped, so it takes the centre back
   — the 18% bias above would float it against the top of its panel. */
.v2-site-lp-gal figure.is-contain img { object-fit: contain; object-position: 50% 50%; }
/* ---- 08 · Reviews -------------------------------------------------------------------------- */
.v2-site-lp-stars { color: #fbbc05; font-size: 28px; letter-spacing: 4px; line-height: 1; margin: 0 0 12px !important; }
/* Columns follow the review count via --n (set on the element by the reviews macro), not a
   hard-coded 4: the English pages dropped the Spanish-language review and three cards in a
   four-column grid left an empty slot on the right.
   `stretch`, not `start`, so every card in a row is the same height. The quotes differ in
   length by a couple of lines and ragged card bottoms read as a broken layout. */
.v2-site-lp-revs { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.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; }
/* ---- 08b · FAQ ------------------------------------------------------------------------------ */
/* Added 2026-10-12 from the QC checklist (item 24). <details>, so it opens and closes with no
   JS, the same as the Cigna and Baylor FAQs. The question is set in the body face, not the
   uppercase display face the h2/h3s use: a full sentence in capitals is hard to read. */
.v2-site-lp-faq { max-width: 900px; margin-inline: auto; display: grid; gap: 14px; }
.v2-site-lp-faq__item { background: #fff; border: 1px solid #e3ebf2; border-radius: 18px; box-shadow: var(--lp-edge-shadow); }
.v2-site-lp-faq__q {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px; font-family: var(--body); font-weight: 700;
  font-size: clamp(18px, 1.1vw, 21px); line-height: 1.3; color: var(--lp-navy);
}
.v2-site-lp-faq__q::-webkit-details-marker { display: none; }
/* The yellow disc of the ticks elsewhere on the page, carrying + / − instead. */
.v2-site-lp-faq__q::after {
  content: "+"; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--lp-yellow); color: var(--lp-navy);
  font-size: 22px; font-weight: 800; line-height: 1;
}
.v2-site-lp-faq__item[open] .v2-site-lp-faq__q::after { content: "\2212"; }
.v2-site-lp-faq__q:focus-visible { border-radius: 18px; }
.v2-site-lp-faq__a { margin: 0 !important; padding: 0 24px 22px; font-size: 17px; line-height: 1.55; color: var(--lp-navy); }
/* ---- 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: 240px; 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: 260px; 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); }
/* NAP block (SEO board MD-05): offices in one wrapping row on desktop, stacked on a phone. */
.v2-site-lp-ft__nap { font-style: normal; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .88); margin: 0 auto 22px; max-width: 980px; }
.v2-site-lp-ft__nap p { margin-bottom: 6px; }
.v2-site-lp-ft p.v2-site-lp-ft__nap-h { color: var(--lp-yellow); font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.v2-site-lp-ft__offices { list-style: none; margin: 0 0 10px; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 28px; }
.v2-site-lp-ft__offices b { display: block; color: #fff; font-weight: 700; }
.v2-site-lp-ft__nap a { color: #fff; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* Section 1557 taglines (SEO board MD-21): small, but full contrast -- it is a notice. */
.v2-site-lp-ft__1557 { margin: 0 auto 18px; max-width: 980px; }
.v2-site-lp-ft .v2-site-lp-ft__1557 p { font-size: 13px; line-height: 1.5; color: #fff; margin-bottom: 4px; }
.v2-site-lp-ft__1557 a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.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, .85); margin: 22px auto 0; }
@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, .v2-site-lp-gov--hero { 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); }

  /* Two benefit cards a row on tablets (QA pass, 2026-10-12). The desktop third-width
     basis left 641-899px with two 235px cards whose headings were ~95px wide, so
     "Doctors, Hospital, Medicine" broke one word a line. */
  .v2-site-lp-benitem { flex-basis: calc((100% - 20px) / 2); }

  /* Reviews two-up on tablets, same QA pass. The desktop grid follows --n, which put the
     Spanish pages' four reviews in 148-180px columns at 700-820px: names and "Reseña de
     Google" broke a word a line and the G logo sat on top of "Pacífico". An odd last card
     (the English pages have three) takes the full row rather than leaving a hole. */
  .v2-site-lp-revs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .v2-site-lp-revs .v2-site-rev:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .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; }

  /* No full-row override on the last photo. The first already spans the row, which leaves
     photos 2-5 to fill two clean pairs. This used to force the last one full-width because
     the Caravana bus cut-out sat at position 4 and took a row of its own, stranding the
     fifth; the bus was replaced with an ordinary photo on 2026-10-12 and the pairing works
     out on its own. Put a cut-out back in the middle of the set and this needs revisiting. */

  .v2-site-lp-final__fairy { display: none; }
}
/* The header strip wraps here — it shares the row with the logo and the call key — and a
   wrapped line began with a lone "·" separator. Space separates the items instead, so
   either line reads cleanly whatever breaks where. Up to 1279, not 1023, since the call
   centre's hours joined "Open 7 Days" (SEO board MD-03): the strip then wrapped at 1024
   with the "·" leading the second line. Below 761 the strip has a row of its own (see the
   760 block). */
@media (min-width: 761px) and (max-width: 1279px) {

  .v2-site-lp-hdr__strip { gap: 2px 16px; justify-content: flex-end; }

  .v2-site-lp-hdr__strip li + li::before { content: 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: auto; width: min(150px, 30vw); }

  .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: clamp(46px, 12vw, 56px); font-size: clamp(15px, 3.9vw, 18px); padding-inline: clamp(14px, 4.2vw, 24px); gap: 8px; }

  .v2-site-lp-hdr__call .v2-site-ico { width: 22px; height: 22px; }

  .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; }

  /* "English · Agentes licenciados · Abierto los 7 días" was too long for one line on the
     narrowest phones and wrapped with a leading "·"; spaced, like the tablet strip above.
     Both languages since the call centre's hours joined the last item -- the English
     strip wraps on a phone now too. */
  .v2-site-lp-hdr__strip { gap: 2px 14px; }

  .v2-site-lp-hdr__strip li + li::before { content: none; }

  .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: 190px; }
}
@media (max-width: 560px) {

  /* The key keeps the number and drops the word; the handset icon still says call. */
  .v2-site-lp-hdr__call-w { display: none; }
}
@media (max-width: 400px) {

  .v2-site-lp-hdr__in { column-gap: 8px; }

  .v2-site-lp-hdr__logo img { width: min(150px, 28vw); }

  body.v2-site .v2-site-lp-hdr__call { font-size: 14px; padding-inline: 12px; gap: 6px; }
}

/* ---- from assets/css/v2.css (origin/main) ---- */
@font-face {
  font-family: "Grotesque fb";
  src: local("Arial"), local("Roboto"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 81.33%;
  ascent-override: 108%;
  descent-override: 27%;
  line-gap-override: 0%;
}
:root {
  /* #0078cd is the blue the v2 artwork is actually drawn in — it is the fill in
     madrinas-header-logo.svg and the flat field of 1-mid-sec-bg-blue.webp. (The
     older #1488db in styles.css is v1's.) Using it keeps the eligibility panel
     from seaming against its own background image, and it clears WCAG AA for
     white text at 4.60:1, which #1488db did not (3.77:1).
     --v2-blue-deep is AA-safe on white (6.6:1) — used for blue text on white. */
  --v2-blue: #0078cd;
  --v2-blue-deep: #0b5fa5;
  --v2-blue-tint: #eef6fc;
  --v2-yellow: #ffeb00;
  --v2-yellow-dark: #e6be00;
  --v2-navy: #003e6b;
  --v2-body: #374151;
  /* #6b7a8c is 4.39:1 on white — just under AA. Darkened to clear 4.5:1. */
  --v2-muted: #5b6878;
  --v2-white: #ffffff;
  --v2-border: #e2e8f0;
  --v2-green: #5bbd2b;
  /* #00a2e4 is the logo's secondary blue — reused for the step tokens/route. */
  --v2-cyan: #00a2e4;
  --v2-pink: #cc0066;  /* darkened from the brand #ff399e so pink text (eyebrows, speaker roles) clears WCAG AA (4.5:1) on light backgrounds; the bright pink still lives in the fairy art (imagery) */
  --v2-navy-deep: #084b86;
  --v2-grey: #eef1f4;
  --v2-ice: #f4f9fd;

  /* Jost is a free Google Font drawn as a geometric homage to Futura PT — used
     as the site face while the design is on the "Futura" look. It self-covers
     Latin + Western-European (Spanish á é í ó ú ñ ¿ ¡), unlike the stripped
     Futura PT Cyrillic .ttf set in /futura-pt. Swap this token for the real
     Futura PT (Adobe Fonts kit) if/when a licensed web project is set up. */
  --v2-font-body: "Jost", "Century Gothic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --v2-font-head: "Jost", "Century Gothic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Buttons and header nav use the heading font (Jost). */
  --v2-font-btn: var(--v2-font-head);
  /* The hero H1 ONLY uses League Spartan — a free geometric face from the
     Spartan lineage (a 1930s Futura clone), chosen to sit closest to the design
     team's Futura PT Extra Bold. Everything else stays on Jost. Loaded at
     wght 800 via the Google Fonts <link>; falls back to Jost. */
  --v2-font-h1: "League Spartan", var(--v2-font-head);

  --v2-container: 1536px;
  --v2-pad: clamp(16px, 4vw, 48px);
  /* Gap from the centered container edge to the viewport edge. Clamped at 0 so
     it stays correct once the viewport is narrower than the container. */
  --v2-bleed: max(0px, calc((100vw - var(--v2-container)) / 2));

  /* How far the white trust panel laps up over the blue hero. Shared so the
     pink fairy's feet land exactly on that edge instead of being covered. */
  --v2-lap: clamp(24px, 3vw, 48px);

  --v2-radius: 20px;
  --v2-radius-lg: 28px;
  --v2-shadow-card: 0 24px 60px rgba(10, 42, 67, 0.18);
  --v2-shadow-btn: 0 6px 18px rgba(10, 42, 67, 0.14);
}
.v2-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--v2-navy);
  color: var(--v2-white);
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.v2-skip:focus {
  left: 0;
}
/* --------------------------------------------------------------------------
   reCAPTCHA-on-submit popup. Opens when a lead form is submitted; the reCAPTCHA
   checkbox lives inside it so the token posts with the form (see assets/js/v2.js).
   -------------------------------------------------------------------------- */
.v2-captcha-pop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 42, 67, 0.55);
}
/* [hidden] can't override display:flex above on its own — restore it explicitly. */
.v2-captcha-pop[hidden] {
  display: none;
}
.v2-captcha-pop__card {
  position: relative;
  max-width: 360px;
  padding: clamp(28px, 4vw, 40px) clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(10, 42, 67, 0.32);
}
.v2-captcha-pop__title {
  margin: 0 0 16px;
  font-family: var(--v2-font-head);
  font-weight: 800;
  font-size: 16px;
  text-align: center;
  color: var(--v2-navy);
}
.v2-captcha-pop__close {
  position: absolute;
  top: 6px;
  right: 12px;
  padding: 4px 8px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--v2-muted);
  cursor: pointer;
}
.v2-captcha-pop__close:hover {
  color: var(--v2-navy);
}
/* ==========================================================================
   23. Storefront walk-in campaign (body.v2--storefront)
   Scoped to .v2--storefront throughout, so it can never leak into the ACA,
   AEP or Harbor pages that share .v2-btn / .v2-trust / .v2-lead-form.

   SCALE — read this before changing a number.
   Both comps are 1920 wide and the hero is one flattened background image, so
   the band's height is set by the art's ratio (100vw / 2.783) and grows with
   the viewport. Copy laid over it therefore has to grow at exactly the same
   rate or it drifts out of register at every width but one. That is why almost
   every value here is a raw vw derived from the comp (comp px / 19.2), not a
   clamp() with a px ceiling — the same lesson §22 records for Harbor. The
   clamps that do appear only guard the extremes.

   Below 1024px the art can no longer carry the composition, so the vw system
   is switched off wholesale in the responsive block at the end.
   ========================================================================== */

.v2--storefront {
  /* ---- ARTWORK SLOTS — the only lines to touch when the images land ----
     Each is a plain url(). A file that does not exist simply does not paint,
     so the fallbacks below (brand blue + CSS dot texture / the pale ice field)
     carry the page until then and no measurement changes when they arrive. */
  /* The delivered set is named by comp frame, not by subject: the campaign deck
     numbers the frames 1 hero / 2 visit-info / 3 hold / 4 pain / 5 solutions /
     6 why / 7 reassurance / 8 open-enrollment / 9 how-it-works / 10 find-us /
     11 reviews / 12 service-area / 13 close+footer, and every file is a 4x
     export. That is what fixes each one to a slot below: the width divided by 4
     matches the element it belongs to (1920 = full bleed, 1876 = §23.7's 1864
     panel, 1480 = §23.15's plate), and left/right/bg in the name matches the
     column it sits in. Anything still pointing at a name that has not been
     delivered is marked TODO and falls back as described above. */
  --sf-hero-art: url("../images/v2/storefront/hero-section.webp");
  --sf-hero-art-mobile: url("../images/v2/storefront/mobile/mobile-hero-section-bg-img.webp");
  --sf-logo: url("../images/v2/storefront/logo-white.svg");                /* TODO not delivered */
  --sf-info-art: url("../images/v2/storefront/visit-stars.webp");          /* TODO not delivered */
  /* §23.5 — the whole collage as ONE transparent PNG (photos, orange offset,
     white ring and the wand all baked in). 480 x 560, portrait. */
  --sf-hold-art: url("../images/v2/storefront/section-3-left-img.webp");
  /* §23.7 — flattened art for the blue panel, 1876 wide against the panel's
     1864; the top sweep still renders as a layer over it. */
  --sf-sol-art: url("../images/v2/storefront/section-5-bg-img.webp");
  /* §23.8 — laptop mock and the pink hand-drawn arrow, both transparent PNG/SVG. */
  --sf-why-laptop: url("../images/v2/storefront/section-6-right-img.webp");
  --sf-why-arrow: url("../images/v2/storefront/section-6-arrow-above-right-img.webp");
  /* §23.9 / §23.10 — flattened compositions; see the notes on those sections. */
  /* -nobg: the delivered file has a pale #f4f9fe plate baked in behind the
     collage, which is 28% of its canvas. Flood-filled from the edges to
     transparent and cropped to the artwork, so the collage itself can be sized
     instead of the padding around it. The original file is untouched. */
  --sf-reassure-art: url("../images/v2/storefront/section-7-left-img-nobg.webp");
  --sf-oe-art: url("../images/v2/storefront/section-8-bg-img.webp");
  /* §23.12 — four plain RECTANGULAR crops; the oval mask is CSS. The grid is
     two columns in source order, so 1/2 are the top row and 3/4 the bottom.
     The bottom row takes its two files straight from the names. The top row is
     crossed on purpose: the file called left-top is the Suite 120 door shot
     from the parking lot and right-top is the lit sign hanging inside the mall,
     which is the reverse of what cards 1 and 2 say and of what their aria-labels
     describe. Matching each photo to its own caption wins over matching the
     filename — a customer reading "look for the Madrinas sign" next to a
     picture of a car park is being sent to the wrong place. Swap these two
     back if it is the card order in the markup that should change instead. */
  --sf-find-1: url("../images/v2/storefront/section-10-right-top-img.webp");
  --sf-find-2: url("../images/v2/storefront/section-10-left-top-img.webp");
  /* The "This is the desk" photo is delivered with the OVAL ALREADY MASKED IN,
     white outside it, and the card clips to its own ellipse (border-radius: 50%
     on .v2-sf-find-card__photo). Re-crop a replacement to the card's 320x422
     ratio and the two ellipses stop coinciding, which shows as white crescents
     at the left and right of the oval. Keep the source aspect and let `cover`
     do the fitting: the baked oval then contains the CSS one at every point. */
  --sf-find-3: url("../images/v2/storefront/section-10-left-bottom-img.webp");
  --sf-find-4: url("../images/v2/storefront/section-10-right-bottom-img.webp");
  /* §23.13 — reviewer avatars, square crops; the circle is CSS. */
  --sf-rev-1: url("../images/v2/storefront/reviews/1.webp");
  --sf-rev-2: url("../images/v2/storefront/reviews/2.webp");
  --sf-rev-3: url("../images/v2/storefront/reviews/3.webp");
  --sf-rev-4: url("../images/v2/storefront/reviews/4.webp");
  --sf-rev-5: url("../images/v2/storefront/reviews/5.webp");
  --sf-rev-6: url("../images/v2/storefront/reviews/6.webp");
  /* Only six reviewer photos came through against nine reviews, so 7-9 take the
     Google mark instead. Not a stand-in for a face: reusing 1-6 would put one
     reviewer's photo against another's name, where the G reads as "no profile
     photo on the review" — which is what it is. */
  --sf-rev-7: url("../images/v2/storefront/reviews/google.webp");
  --sf-rev-8: url("../images/v2/storefront/reviews/google.webp");
  --sf-rev-9: url("../images/v2/storefront/reviews/google.webp");
  /* §23.15 — the star field on the dark band (1920 wide, full bleed) and the
     flattened bright plate (1480, the plate's own width). */
  --sf-close-art: url("../images/v2/storefront/footer-bg-img.webp");
  /* Portrait crop of the same band for the stacked layout — the desktop file is
     1920 x 500 and would crop to a sliver in a tall narrow band. */
  --sf-close-art-mobile: url("../images/v2/storefront/mobile/mobile-footer-bg-img.webp");
  --sf-close-plate: url("../images/v2/storefront/footer-form-bg-img.webp");
  /* TODO not delivered — and if the wand and heart turn out to be baked into
     the plate art above, these two stay unset rather than double up. */
  --sf-close-wand: url("../images/v2/storefront/wand-stars.webp");
  --sf-close-heart: url("../images/v2/storefront/heart.svg");

  /* The comp's navy reads a shade deeper and bluer than --v2-navy (#003e6b),
     which is tuned for the ACA pages. Kept as its own token rather than
     bending the shared one. */
  --sf-ink: #0b2f5e;
  /* Pale field behind the visit-info cards. */
  --sf-ice: #f2f7fd;
  /* Card body copy: a soft slate-blue, 4.9:1 on white — clears AA. */
  /* Darkened from #5a7794 on 2026-08-15. This is the storefront body-copy
     colour and it sat between 4.25 and 4.41 against the three near-white
     section backgrounds it lands on (#eff5fc, #f2f7fd, #f5f9fd), so it failed
     AA on five blocks at once — the how-it-works steps, the OE note and the
     reviews subhead. #57728e is the lightest value on the same hue that clears
     4.5 against ALL of them, worst case 4.55. Three points per channel; the
     copy still reads as the same muted slate. */
  --sf-card-body: #57728e;
  /* Darker blue for the lead paragraphs that sit directly under a headline
     (§23.5, §23.6, §23.10). 7.4:1 on white. */
  --sf-body-ink: #22568c;
  /* Outline + numeral of the pain-point tokens. 4.5:1 on white. */
  --sf-red: #de2430;
  /* Pale blue plate used behind the step panel and the two media panels. */
  --sf-panel: #eff5fc;
  /* Solid-blue CTA fill. 5.6:1 against white — clears AA at any size. */
  --sf-cta-blue: #0a6ac2;
  /* Input chrome. */
  --sf-field-bd: #cfe2f2;
  --sf-field-bg: #f6fbfe;
  --sf-field-ph: #8ea6bb;

  /* Handset glyph for the phone comp's header pill (§23.16). Same path the
     hero's CALL NOW button carries inline; here it is a mask, so it takes the
     pill's own colour. Not an artwork slot — nothing to deliver. */
  --sf-phone-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}
/* ==========================================================================
   24. State landing pages (body.v2--state)
   Shared by every state page — Illinois, Georgia, and any that follow. Each page
   adds its own body modifier (.v2--il, .v2--ga) supplying nothing but that
   state's artwork slots, plus anything its comp does differently (see §25).
   Scoped to .v2--state throughout, so it cannot leak into the ACA, AEP, Harbor
   or Storefront pages that share .v2-btn / .v2-trust / .v2-lead-form.

   SCALE: the comps are 1920 wide and the hero is one flattened background
   image, so values here are raw vw derived from the comp (comp px / 19.2) for
   the same reason as sections 22 and 23 — copy laid over art has to grow at the
   art's rate. The max() floors keep small type legible on narrower desktops.
   Below 1024px the vw system is switched off in 24.11.
   ========================================================================== */

.v2--state {
  --state-ink: #0a2f5f;
  --state-blue: #1585d8;
  /* Darkened from the comp's #29b6e8 on 2026-08-15. That value is the eyebrow's
     TEXT colour and nothing else — it is referenced exactly once, by
     .v2-state-eyebrow--cyan — so this cannot shift a border or a fill. At
     #29b6e8 it measured 2.35:1 on white and 2.09:1 on the #e9f3fc band, well
     under the 4.5:1 AA needs for text this size, and Lighthouse failed it on
     every state page. #11779b is the lightest value on the same hue that
     clears 4.5 against BOTH backgrounds (4.52 on the darker one). */
  --state-cyan: #11779b;
  /* AA-safe blue for TEXT on the pale tints this family uses. --v2-blue is
     #0078cd, which is fine on white (4.60) but fails on both #f4f9fe (the says
     band, 4.34) and #eff6fd (the area panels, 4.22) — the panel titles only
     surfaced on DESKTOP, where they render smaller than the mobile clamp.
     #0073c5 is the lightest value on the same hue clearing 4.5 on white and
     both tints. Fills, borders and artwork keep --v2-blue. */
  --state-blue-text: #0073c5;
  --state-pink: #ec1a7c;
  --state-body: #35597f;
  --state-field-bd: #d8e6f3;
  --state-field-bg: #f7fbfe;
  --state-panel: #eff6fd;
}
@keyframes v2-state-card-arrive {
  0%   { outline: 0 solid rgba(255, 214, 0, 0); outline-offset: 14px; }
  25%  { outline: 5px solid rgba(255, 214, 0, 0.95); outline-offset: 6px; }
  100% { outline: 5px solid rgba(255, 214, 0, 0); outline-offset: 6px; }
}
/* ==========================================================================
   26. Cigna Transition campaign (body.v2--cigna)
   Self-contained: its own prefix (/cigna-transition), its own artwork folder
   (assets/images/v2/cigna/) and its own component namespace .v2-cig-*. Only the
   genuinely shared, token-complete primitives are borrowed — .v2-btn (themed
   through --_bg/--_fg/--_bd), .v2-logogroup / .v2-logomark, .v2-captcha-pop,
   .v2-sr, .v2-skip. Nothing from .v2-sf-*, .v2-state-* or .v2-harbor-* is worn,
   because a large minority of each of those families is compound-scoped to its
   own body class and their rules consume tokens that exist only there — so
   borrowing a class gets you most of a layout with dead tokens.

   SCALE: the comp is 1920 wide and every band is full-bleed with vw-derived
   padding, so desktop values are raw vw off the comp (comp px / 19.2) — the same
   system as §22-§25. Copy laid over art has to grow at the art's rate. The
   max() floors keep small type legible on narrower desktops. Below 1024 the vw
   system is switched off wholesale in 26.13.
   ========================================================================== */

:is(.v2--cigna, .v2--baylor) {
  --cig-navy: #003e6b;
  --cig-blue: #0078cd;
  --cig-yellow: #ffeb00;
  --cig-pink: #ff399e;
  --cig-red: #ed383f;
  --cig-red-dark: #bc2c32;
  --cig-red-deep: #ac292e;      /* the countdown's digit tiles */
  --cig-icon-bg: #e1eff9;
  --cig-icon-bd: #b5d8f1;
  --cig-field-bg: #f7fafd;
  --cig-field-bd: #c9dcec;
  --cig-hint: #8aa5bc;          /* input placeholders */
  /* #647a8e measured 4.45:1 on white — 0.05 under AA on the consent line that
     sits beside every Cigna and Baylor form. */
  --cig-consent: #64798d;
  --cig-body: #404040;
  --cig-fine: #4d4d4d;
  --cig-panel: #ebf4fc;         /* §3 field */
  --cig-tint: #f4f9fe;          /* §4 and §7 field */
  --cig-step-tint: #e9f3fc;     /* foot of the §2 gradient */
  --cig-faq-bd: #e3edf5;

  /* ---- Artwork. One line each; a missing file simply does not paint, so the
       page stays laid out and every measurement is already final. ---- */
  --cig-hero-art: url("../images/v2/cigna/hero-art.webp");
  --cig-agency-art: url("../images/v2/cigna/agency-art.webp");
  /* §3's far-right room wash. Shipped OPAQUE, pre-composited over --cig-panel:
     it lies directly on that field with nothing between, and keeping the alpha
     channel cost 390KB against 23KB for a layer no one can tell apart. */
  --cig-agency-wash: url("../images/v2/cigna/agency-wash.webp");
  --cig-how-map: url("../images/v2/cigna/how-map.webp");
  --cig-sheen: url("../images/v2/cigna/diagonal-overlay.webp");
  --cig-fairy-a: url("../images/v2/cigna/fairy-avatar-a.webp");
  --cig-fairy-b: url("../images/v2/cigna/fairy-avatar-b.webp");
  --cig-fairy-c: url("../images/v2/cigna/fairy-avatar-c.webp");
  --cig-case-1: url("../images/v2/cigna/case-1.webp");
  --cig-case-2: url("../images/v2/cigna/case-2.webp");
  --cig-case-3: url("../images/v2/cigna/case-3.webp");
  --cig-case-4: url("../images/v2/cigna/case-4.webp");

  background: var(--v2-white);
  color: var(--cig-navy);
}
/* ==========================================================================
   35. Harbor Health — agent contracting (body.v2--hha)

   The "13 new Texas counties" comp set, templates/harbor-health-agent/
   page-designs/1..11.png. A SECOND Harbor page: section 22 (.v2--harbor) still
   owns /harbor-health-campaign and nothing here touches it. Every selector is
   .v2-hha-* and every rule is scoped to .v2--hha, so this section cannot reach
   the ACA pages, the state pages, Cigna, Baylor, AmeriHealth, Storefront,
   Momentum or the other Harbor page — all of which share .v2-btn, .v2-trust,
   .v2-form__input and .v2-lead-form with it.

   SCALE: the comps are 1920 wide, so values are raw vw derived from the comp
   (comp px / 19.2) with the comp pixel in a trailing comment — the same system
   as sections 24 and 28, and for the same reason: copy laid over full-bleed art
   has to grow at the art's rate, and a clamp() would drift away from the
   artwork's own scaling. max() floors keep small type legible on narrow
   desktops. Below 1024 the vw system is switched off entirely — see 35.12.

   COLOUR, AND THE TWO PLACES THE COMP'S VALUES ARE NOT USED:
   Every fill, border and piece of artwork uses the comp's colour. Two TEXT
   colours are darkened because the comp's fail WCAG AA at the size they are set:
     — the small pink eyebrows. The comp's brand pink #ff399e is 3.13:1 on the
       #f4f9fe cards; 15px/800 is small text and needs 4.5. The site already
       keeps a darkened pink for exactly this (--v2-pink, 5.27:1) and that is
       what they use. The 32px figures stay #ff399e: large text needs 3:1 and
       they clear it.
     — the cyan "16M Texans" figure. The comp's #00b6ed is 2.22:1 and fails even
       the large-text threshold; #0091cf is the lightest value on the same hue
       that clears 3:1 (3.33). The cyan FILL on the active tab is untouched,
       because a fill has no text ratio to meet.
   ========================================================================== */

/* THE PAGE CONTAINER IS vw ON THIS PAGE, NOT PIXELS. This is the single most
   load-bearing rule in the family and it is not optional — remove it and the
   desktop layout comes apart at every width between 1024 and 1919.
     Every measure in section 35 is stated in `vw` against the 1920 comp: columns,
   cards, gutters, the star strips, the fairies, the domes. The shared container
   is not — `--v2-container: 1536px` with `--v2-pad` clamped at 48px. Those two
   scales move in OPPOSITE directions as the viewport narrows. Below 1536 the
   container is the whole viewport less a FIXED 96, so its content grows as a
   share of the screen (1440 of 1920 is 75%; 1184 of 1280 is 92.5%) while every
   vw child shrinks in step with the viewport. The children therefore under-fill
   their own container by more and more, and the page reads as broken in a way
   that looks like a dozen separate bugs:
     .v2-hha-faq__cols     102.6% of the container at 1920 -> 83.2% at 1280
     .v2-hha-commit__list  100.0% -> 83.3%
     .v2-hha-lic__figure    42.0% -> 34.1%
     .v2-hha-web__card      39.2% -> 31.1%
     .v2-hha-ans__intro     35.1% -> 27.9%
     .v2-hha-cf__form       55.6% -> 45.0%
   — centred blocks looked narrow, two-column sections left a 200-300px void of
   background beside the card, and the FAQ's two columns sat left of centre with
   a quarter of the viewport empty on the right.
     Restating the container in the same units the page is drawn in makes every
   width a uniform scale of the comp, which is what the design is: 1536/1920 is
   80vw and 48/1920 is 2.5vw, so at 1920 these are byte-identical to the shared
   tokens and every narrower width holds the comp's proportions exactly.
     The pad keeps its 48px ceiling so nothing changes ABOVE 1920 either: past
   that point min() takes the 1536px branch, the container stops growing, and the
   content box stays 1440 as it does today.
     Scoped to min-width 1024 on purpose. Phones have their own measures in the
   35.12 block — several of them fixed px, deliberately — and must not inherit a
   container that shrinks with the viewport. */
@media (min-width: 1024px) {
  .v2--hha {
    --v2-container: min(1536px, 80vw);
    --v2-pad: min(2.5vw, 48px);
  }
}
/* ==========================================================================
   38. SanitasCare — agent contracting (body.v2--sanitas)

   Figma 3568:15462 "Sanitas Care Agent". The first AGENT-facing page in this
   file that is not a Momentum event page: it recruits in-network Madrinas /
   Sunshine agents in Florida and Texas to get contracted to sell SanitasCare,
   then books them onto a training session. This block is the header and hero
   only; the rest of the page lands in later passes under the same namespace.

   Every selector is .v2-san-* and every rule is scoped to .v2--sanitas, so
   nothing here can reach the ACA pages, the state pages, Cigna, Baylor,
   AmeriHealth, Storefront, Momentum or either Harbor page — all of which share
   .v2-btn, .v2-trust and .v2-lead-form with it. The buttons in particular are
   .v2-san-btn rather than .v2-btn for that reason: the comp's yellow plate
   carries a 4px #c8b800 under-edge and a 2px drop that .v2-btn does not, and
   widening .v2-btn to reach it would change eight other campaigns.

   SCALE: the comp is 1920 wide, so values are raw vw derived from it
   (comp px / 19.2) with the comp pixel in a trailing comment — the same system
   as sections 24, 28 and 35, and for the same reason: copy laid over full-bleed
   art has to grow at the art's rate.

   THERE ARE DELIBERATELY NO max() FLOORS ON TYPE HERE, unlike section 35. The
   requirement on this page is that the layout match the comp at EVERY desktop
   width (Steve, 2026-09-11), and a floor is exactly what breaks that: it stops the
   type scaling below some width while the boxes around it keep shrinking, so the
   proportions stop matching and lines re-wrap. Measured with floors in place, the
   benefits sub-head held one line at 1600 and above and broke to two at 1440, 1366
   and 1280 — a different layout from the approved one on the three commonest
   laptop widths. Pure vw means every break is identical at every width because the
   whole page is one proportional scale of the 1920 comp.

   WHAT THAT COSTS, stated plainly: at 1280 the 12-px trust labels render at 8px and
   the 14-px compliance strip at 9.3px. That is small. It is the price of exact
   proportional fidelity and it was chosen knowingly — if it ever needs revisiting,
   the fix is a floor plus a re-measure of every line count in this section, not a
   floor on its own. Below 1024 the vw system switches off; that pass is not written
   yet, so the page is desktop-only for now rather than half-working.

   TYPE IS JOST, NOT FUTURA PT, and that is a licensing decision, not a
   preference (Steve, 2026-09-11). The comp is entirely Futura PT — Book, Demi,
   Medium, Bold, Extra Bold — which this project has never had a licence for;
   the note elsewhere in this file about "Futura PT (Adobe Fonts kit) if/when a
   licensed web project is set up" still stands. Everything reads through
   --v2-san-font so that swap is one line here rather than forty. What it costs
   today is the headline measure, and it is 1027 rather than the comp's 980 for a
   measured reason. The comp breaks after "TO": line 1 "GET CONTRACTED TO", line 2
   "SELL SANITAS CARE" with only SANITAS CARE in yellow. Chrome at 1920, Jost 800 at
   96, three measures tried:
     - 980, the comp's own value: THREE lines. Jost needs more room than Futura PT
       for the same words, so the first line cannot hold "GET CONTRACTED TO";
     - 1027: two lines, breaking after "TO" exactly as the comp does. This one;
     - 1123 or wider: two lines, but SELL climbs onto line 1 and strands SANITAS
       CARE alone in yellow, which is a different headline from the approved one.
   So the window is narrow in BOTH directions and 1027 sits inside it. ANY copy or
   size change to this block needs the wrap re-measured against the comp rather than
   reasoned about — both neighbouring values are wrong in different ways, and the
   1123 mistake was made and caught here on 2026-09-11.

   THE HAIRLINES AND THE PULSE DOT ARE CSS, NOT THE EXPORTED SVGS. Figma exports
   the three rules as <line stroke="white"> at 1px and the eyebrow dot as
   <circle r="4" fill="#FFEB00">. Both are primitives that a border and a
   border-radius draw exactly, so shipping four image requests to place a
   hairline would be waste with no fidelity gain. Every real asset — the two
   logo halves, the five carrier marks, the three press marks, the background
   texture, the swoosh and the character art — is the exported file.

   THE HERO IS ONE FLATTENED IMAGE, not the comp's three layers. Figma exports the
   hero as a background texture, a swoosh vector and a separately-positioned
   character render — the last of which needs a wrapper box and a 2.78deg
   rotation to land correctly. The client supplied the whole thing already
   composited at 4x (Hero-sanitas.png, 7680x3800, exactly 1920x950 x4), so all
   three collapse into one <img> at inset 0 and the rotation maths goes away.
   The rounded bottom corners are in the file's alpha as well, so the WebP is
   written WITH alpha and the frame keeps its own border-radius as the clip.
   Shipped as a 1920/3840 srcset at sizes=100vw: this is the LCP element on a
   full-bleed hero, so a 1080p laptop pays 65 KB and only a retina or 4K display
   fetches the 160 KB copy. Do not replace it with a single 3840 src.
   ========================================================================== */
.v2--sanitas {
  --v2-san-font: "Jost", "Futura", system-ui, sans-serif;
  --v2-san-blue: #0078cd;
  --v2-san-navy: #003e6b;
  --v2-san-yellow: #ffeb00;
  --v2-san-yellow-edge: #c8b800;
  --v2-san-pill-edge: #d9d9d9;
  background: #fff;
  font-family: var(--v2-san-font);
}
/* ---- "Start with Step 1" prompt ----------------------------------------- */
/* Not in either comp. Step 2 sends the contracting details step 1 collects, so
   submitting it on its own posts without them and lands on the error page — a
   full navigation, away from the six options the agent just picked, to be told
   they filled in the wrong card. This says it in place instead and puts them
   back at step 1 with the cursor in the first field.

   It borrows .v2-captcha-pop wholesale — the overlay, the card, the close
   button and the [hidden] handling are all already there and already used twice
   on this page — so only the copy and the one action button are new. */
.v2--sanitas .v2-san-step1-pop__text {
  margin: 0 0 18px;
  color: var(--v2-san-navy);
  font-family: var(--v2-san-font);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

.v2-credit-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.v2-credit-link:hover,
.v2-credit-link:focus-visible {
  text-decoration: none;
}

p:has(> .v2-credit-seg) {
  text-align: center;
}

/* In caps, and stacked below 768 rather than 480, since 2026-10-27: the second
   half became "Performance marketing that cares.", about twice the width of the
   "Miami SEO Experts" the 479 point was set for. Same change as v2.css. */
.v2-credit-seg {
  white-space: nowrap;
  text-transform: uppercase;
}

.v2-credit-sep {
  margin-inline: 6px;
}

@media (max-width: 767px) {
  .v2-credit-seg {
    display: block;
  }

  .v2-credit-sep {
    display: none;
  }
}