/* Self-hosted webfonts (Comfortaa + Open Sans, latin/latin-ext/vietnamese).
   Variable fonts: one file per subset, weight set via the axis range.
   Self-hosted + preloaded => no Google Fonts CDN round-trip. */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/comfortaa-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/comfortaa-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/comfortaa-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/open-sans-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/open-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/open-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Open Sans italic (true italic, variable) — covers WYSIWYG editor-applied italics. */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/open-sans-italic-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/open-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/open-sans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
Theme Name: Clever Care
Theme URI: https://www.clevercarehealthplan.com/
Author: Traffik Creative
Author URI: https://traffikcreative.com/
Description: Custom WordPress theme for Clever Care Health Plan — a culturally attuned Medicare Advantage plan blending Eastern and Western medicine.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cc
*/

/* =========================================================================
   Clever Care Health Plan — Homepage
   Built from Figma "CCHP Website Design" (node 1836-7909)
   Plain HTML5 + CSS, no frameworks.
   Mobile-first: base rules target mobile, min-width queries enhance upward.
   Units: html is 62.5% so 1rem = 10px (e.g. 1.6rem = 16px).
   ========================================================================= */

/* ----------------------------- Design tokens ---------------------------- */
:root {
  /* Brand colors (Figma variables) */
  --dark-navy: #0a1e3f;
  --navy-bg: #00264c;          /* Color Scheme 1 / Background */
  --science-blue: #005fc0;     /* primary actions / links     */
  --persian-green: #00b3ab;    /* accent / eyelash dots       */
  --neutral-darkest: #0b0907;
  --navy-700: #1f3a40;         /* utility-row text (default nav) */
  --ink-teal: #122e38;         /* dark teal ink (cards, help link) */
  --muted-teal: #4d6b6e;       /* muted labels / sublabels */
  --body-copy: #404040;
  --white: #ffffff;
  --navy-100: #d4dcde;
  --navy-300: #94a6aa;
  --white-60: rgba(255, 255, 255, 0.6);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-10: rgba(255, 255, 255, 0.1);
  --border-on-light: rgba(11, 9, 7, 0.15);

  /* Surfaces */
  --surface-cream: #f7f4ef;
  --surface-lavender: #eaeef6;
  --surface-tan: #fbf6f4;      /* default-nav background (color/tan/50) */
  --surface-mint: #c8f1ec;     /* tagline pill background */

  /* Layout
     --content-max = inner content width (1280px / 128rem).
     --gutter      = horizontal page padding; added OUTSIDE the content width,
                     so the container's total max-width = content + 2 * gutter. */
  --content-max: 128rem;
  --gutter: 2rem;            /* mobile */
  --nav-h: 10.4rem;          /* nav height (mobile: utility row hidden) */
  --radius: 1.6rem;
  --radius-sm: 1rem;
  --radius-pill: 99.9rem;
  --border-width: 0.1rem;

  /* Type */
  --font-head: "Comfortaa", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-regular: 1.6rem;

  /* Brand gradient (gradient pill buttons) — science-blue → persian-green */
  --brand-gradient: linear-gradient(128deg, var(--science-blue) 0%, var(--persian-green) 100%);
}

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

html {
  font-size: 62.5%;          /* 1rem = 10px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;   /* no horizontal page scroll. The big real overflows are fixed at source (CTA/search/hero); this only guards against residual sub-pixel/transform bleed. Safe: no position:sticky on this site. */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-regular);
  line-height: 1.6;
  color: var(--body-copy);
  background: var(--surface-tan);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--dark-navy);
  margin: 0;
  line-height: 1.15;
  font-weight: 600;
}

p { margin: 0; }

a { color: var(--science-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

ul { margin: 0; padding: 0; list-style: none; }

/* ----------------------------- Utilities -------------------------------- */
/* Total max-width = content + gutters on both sides (border-box keeps the
   content area itself at exactly --content-max). */
.container {
  width: 100%;
  max-width: calc(var(--content-max) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(5.6rem, 8vw, 9.6rem);
}

/* Inner-page surface (the default nav itself is transparent, so the page
   provides the tan backdrop behind the nav + breadcrumbs). */
.page--tan { background: var(--surface-tan); }

/* Reusable decorative wave/seigaiha pattern along the bottom of a section.
   It's a transparent PNG, so it sits over whatever background color the section
   already has — add `.wave-bg` to any section regardless of its surface color.
   The pattern paints above the section background but below its content. */
.wave-bg { position: relative; isolation: isolate; }
.wave-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Default is the scallop pattern; override --wave-img to swap (e.g. mountains). */
  background: var(--wave-img, url("images/wave-pattern.png")) no-repeat bottom center / 100% auto;
  /* Per-section blend: the new Figma wave art is a pale-mint band exported with
     mix-blend-mode:multiply, so sections using it set --wave-blend:multiply.
     Default stays `normal` so scallop sections are untouched. */
  mix-blend-mode: var(--wave-blend, normal);
  pointer-events: none;
}
.wave-bg > * { position: relative; z-index: 1; }

.sr-only {
  position: absolute;
  width: 0.1rem; height: 0.1rem;
  padding: 0; margin: -0.1rem;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1.6rem;
  top: -4.8rem;
  z-index: 100;
  background: var(--science-blue);
  color: var(--white);
  padding: 1rem 1.6rem;
  border-radius: var(--radius-sm);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1.2rem; }

:focus-visible {
  outline: 0.3rem solid var(--science-blue);
  outline-offset: 0.2rem;
  border-radius: 0.4rem;
}
/* Form fields don't get the focus ring — the text caret (and the field's own
   border) indicate focus. Buttons/links keep the :focus-visible ring above for
   keyboard accessibility. */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: none;
}

/* Autofill: Chrome/Safari paint a blue/yellow field background that ignores
   `background-color`. The only reliable override is a large inset box-shadow
   (matched to the field's container) plus -webkit-text-fill-color for the text.
   Our inputs are transparent over a styled pill, so default to the white pill;
   the footer newsletter (on navy) is overridden below. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100rem var(--white) inset;
  box-shadow: 0 0 0 100rem var(--white) inset;
  -webkit-text-fill-color: var(--ink-teal);
  caret-color: var(--ink-teal);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.footer__subscribe input:-webkit-autofill,
.footer__subscribe input:-webkit-autofill:hover,
.footer__subscribe input:-webkit-autofill:focus,
.footer__subscribe input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 100rem var(--navy-bg) inset;
  box-shadow: 0 0 0 100rem var(--navy-bg) inset;
  -webkit-text-fill-color: var(--white);
  caret-color: var(--white);
}

/* We provide our own clear controls, so hide the native search ✕ / decoration */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Shared text pieces */
.section-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.8rem, 3.4vw, 3.9rem);
  line-height: 1.2;
  color: var(--dark-navy);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.section-title--center { text-align: center; }
.section-title--light { color: var(--white); }

.section-subtitle {
  text-align: center;
  color: var(--body-copy);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.5;
}

.section-title-block,
.benefits__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  max-width: 72rem;
  margin-inline: auto;
  margin-bottom: 6rem;
}

.lead { font-size: 1.7rem; color: var(--body-copy); }
.body-copy { color: var(--body-copy); }

/* Eyelash tag — a mint pill with a dot + uppercase label (Figma "Tagline") */
.eyelash {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.4rem 0.6rem 1.2rem;
  background: var(--tagline-bg, var(--surface-mint));
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-navy);
}
.eyelash--center { align-self: center; }
.eyelash--sm { font-size: 1.1rem; letter-spacing: 0.055em; color: var(--ink-teal); }
.eyelash__dot {
  width: 0.8rem; height: 0.8rem;
  border-radius: 50%;
  background: #0b8d85;
  flex: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 1.3rem 2.2rem;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--science-blue);
  color: var(--white);
}
.btn--primary:hover { background: #004a99; }

.btn--pill {
  background: var(--brand-gradient);
  border: none;
  color: var(--white);
}
.btn--pill:hover { filter: brightness(1.07); }

.btn--outline {
  background: transparent;
  color: var(--neutral-darkest);
  border-color: rgba(11, 9, 7, 0.5);
  font-weight: 700;
}
.btn--outline:hover { background: var(--neutral-darkest); color: var(--white); border-color: var(--neutral-darkest); }

.btn--outline-ink {
  background: transparent;
  color: var(--ink-teal);
  border-color: var(--ink-teal);
  font-weight: 400;
  padding: 1rem 2.4rem;
}
.btn--outline-ink:hover { background: var(--ink-teal); color: var(--white); }

.btn--outline-white {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
  font-weight: 400;
}
.btn--outline-white:hover { background: var(--white); color: var(--navy-bg); }

/* Borderless white text button (e.g. phone link beside a primary CTA) */
.btn--ghost-white {
  background: transparent;
  color: var(--white);
  border-color: transparent;
}
.btn--ghost-white:hover { background: rgba(255, 255, 255, 0.12); }
/* Borderless ink-teal text button (e.g. phone link on the tan bg) */
.btn--ghost-ink {
  background: transparent;
  color: var(--ink-teal);
  border-color: transparent;
}
.btn--ghost-ink:hover { background: rgba(18, 46, 56, 0.06); }

/* Arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.65rem;
  color: var(--neutral-darkest);
}
.link-arrow::after {
  content: "";
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206l6%206-6%206'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206l6%206-6%206'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.25s ease-in-out;
}
.link-arrow:hover { text-decoration: none; color: var(--science-blue); }
.link-arrow:hover::after { transform: translateX(0.5rem); }
.link-arrow--light { color: var(--white-60); }
.link-arrow--light:hover { color: var(--white); }

/* Image fills — figures hold a photo that covers their box */
.about__media,
.benefits__media,
.feature-card__media,
.plan-card__media,
.cta__media {
  margin: 0;
  overflow: hidden;
  background: var(--surface-lavender);
}
.about__media img,
.benefits__media img,
.feature-card__media img,
.plan-card__media img,
.cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================= BRAND / LOGO ============================ */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand__logo {
  height: 3.8rem;
  width: auto;
}

/* ================================ HERO =================================
   The transparent nav overlaps the hero: the hero is pulled up by the nav
   height so its landscape image fills behind the nav. Heading + body sit in
   dark ink over the light part of the image (no dark overlay), left-aligned,
   in the upper area — the landscape fills the rest of the tall hero. */
.hero {
  position: relative;
  /* The masthead overlays the top of the hero (position:absolute), so the hero
     sits at the page top and its content is padded down to clear the nav. */
  margin-top: 0;
  min-height: 66.7rem;
  background: var(--surface-lavender);
  isolation: isolate;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero { min-height: 80rem; }
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__content {
  padding-top: calc(var(--nav-h) + clamp(3rem, 9vh, 9rem));
  padding-bottom: 6rem;
}
.hero__title {
  max-width: 60rem;
  color: var(--dark-navy);
  font-size: clamp(3.6rem, 5.4vw, 6.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.hero__text {
  margin-top: 2.4rem;
  max-width: 61.8rem;
  color: var(--body-copy);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.4;
}
/* Thin brand gradient rule. CONVENTION: placed after every hero section and
   before every CTA section (as a sibling <div class="gradient-rule">). */
.gradient-rule {
  height: 1.35rem;
  background: linear-gradient(178deg, var(--science-blue) 0%, var(--persian-green) 100%);
}

/* ===================== HERO BUILD-IN ANIMATIONS =======================
   Staggered entrance for each hero. Runs on load (heroes are above the
   fold), so it is flash-free — the `both` fill keeps elements hidden until
   their turn. Content rises on Y; side visuals slide in on X. Each element
   animates for 280ms (ease-out); the last starts at 450ms, so the whole
   build finishes well within 1s. Disabled under prefers-reduced-motion.
   The build is held (paused → elements stay at their hidden from-state) until
   webfonts finish loading, so it plays in the correct font instead of animating
   in the fallback and then swapping. JS adds html.wf-loading and removes it on
   document.fonts.ready (or a timeout); no-JS never gets the class, so it just
   runs. */
.wf-loading { --wf-play: paused; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes heroRise    { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }
  @keyframes heroSlideX  { from { opacity: 0; transform: translateX(3rem); } to { opacity: 1; transform: none; } }
  @keyframes heroFade    { from { opacity: 0; } to { opacity: 1; } }
  @keyframes heroFadeDim { from { opacity: 0; } to { opacity: 0.55; } }
  /* Desktop mega menu: drop in ~20px + fade when a panel opens. */
  @keyframes cc-mega-drop { from { opacity: 0; transform: translateY(-2rem); } to { opacity: 1; transform: none; } }

  /* Resources tabs (member-benefits): active panel fades + drops in on switch. */
  @keyframes cc-tab-in { from { opacity: 0; transform: translateY(-2rem); } to { opacity: 1; transform: none; } }
  .resources__panels .tab-panel:not([hidden]) { animation: cc-tab-in 300ms ease-out both; }

  /* Content columns: direct children rise in, staggered by document order. */
  .hero__content > *,
  .find-hero__inner > *,
  .page-hero__content > *,
  .plan-hero__inner > *,
  .pd-hero__content > *,
  .fap-hero__content > *,
  .news-hero__inner > *,
  .ma-hero__head > *,
  .bk-hero__head > * {
    animation: heroRise 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-play-state: var(--wf-play, running);   /* held until webfonts load (html.wf-loading) */
  }
  .hero__content > *:nth-child(1), .find-hero__inner > *:nth-child(1), .page-hero__content > *:nth-child(1), .plan-hero__inner > *:nth-child(1), .pd-hero__content > *:nth-child(1), .fap-hero__content > *:nth-child(1), .news-hero__inner > *:nth-child(1), .ma-hero__head > *:nth-child(1), .bk-hero__head > *:nth-child(1) { animation-delay: 0ms; }
  .hero__content > *:nth-child(2), .find-hero__inner > *:nth-child(2), .page-hero__content > *:nth-child(2), .plan-hero__inner > *:nth-child(2), .pd-hero__content > *:nth-child(2), .fap-hero__content > *:nth-child(2), .news-hero__inner > *:nth-child(2), .ma-hero__head > *:nth-child(2), .bk-hero__head > *:nth-child(2) { animation-delay: 90ms; }
  .hero__content > *:nth-child(3), .find-hero__inner > *:nth-child(3), .page-hero__content > *:nth-child(3), .plan-hero__inner > *:nth-child(3), .pd-hero__content > *:nth-child(3), .fap-hero__content > *:nth-child(3), .news-hero__inner > *:nth-child(3), .ma-hero__head > *:nth-child(3), .bk-hero__head > *:nth-child(3) { animation-delay: 180ms; }
  .hero__content > *:nth-child(4), .find-hero__inner > *:nth-child(4), .page-hero__content > *:nth-child(4), .plan-hero__inner > *:nth-child(4), .pd-hero__content > *:nth-child(4), .fap-hero__content > *:nth-child(4), .news-hero__inner > *:nth-child(4), .ma-hero__head > *:nth-child(4), .bk-hero__head > *:nth-child(4) { animation-delay: 270ms; }
  .hero__content > *:nth-child(5), .find-hero__inner > *:nth-child(5), .page-hero__content > *:nth-child(5), .plan-hero__inner > *:nth-child(5), .pd-hero__content > *:nth-child(5), .fap-hero__content > *:nth-child(5), .news-hero__inner > *:nth-child(5), .ma-hero__head > *:nth-child(5), .bk-hero__head > *:nth-child(5) { animation-delay: 360ms; }
  .hero__content > *:nth-child(6), .find-hero__inner > *:nth-child(6), .plan-hero__inner > *:nth-child(6), .pd-hero__content > *:nth-child(6) { animation-delay: 450ms; }

  /* Side visuals slide in from the right, arriving as the copy builds. */
  .page-hero__visual,
  .fap-hero__visual,
  .ma-hero__collage,
  .pd-hero__stats,
  .bk-hero__media {
    animation: heroSlideX 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 160ms;
    animation-play-state: var(--wf-play, running);
  }
  .bk-hero__features {
    animation: heroRise 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 340ms;
    animation-play-state: var(--wf-play, running);
  }

  /* Homepage WebGL backdrop just fades in. */
  .hero__media { animation: heroFade 600ms ease-out both; }

  /* Hero background patterns fade in as the build starts. Scoped to heroes so
     the global `.wave-bg` sections below the fold are untouched. `backwards`
     fill reverts to each pattern's natural opacity once the fade ends. */
  .page-hero.wave-bg::before,
  .fap-hero.wave-bg::before,
  .ma-hero::before {
    animation: heroFade 500ms ease-out backwards;
  }
  .bk-hero::before {
    animation: heroFadeDim 500ms ease-out backwards;
  }

  /* Scroll-reveal for below-the-fold sections. Items start hidden (only once
     JS has added html.reveal-on, so no-JS users see everything) and rise + fade
     in when their section gets .is-revealed. The per-item stagger delay comes
     from --reveal-d (set in JS, capped so the build finishes within 0.5s). */
  .reveal-on .reveal-item { opacity: 0; transform: translateY(1.6rem); }
  .reveal-on .is-revealed .reveal-item {
    opacity: 1;
    transform: none;
    transition: opacity 200ms ease-out, transform 200ms ease-out;
    transition-delay: var(--reveal-d, 0ms);
  }
}

/* =============================== ABOUT ================================== */
.about {
  background: #ebf3f3;                          /* Figma About section field (multiplies with the wave art) */
  --wave-img: url("images/waves1.png");         /* new flowing-wave band (pale mint + white waves) */
  --wave-blend: multiply;                        /* as in Figma: field ×bg, white lines read as the section color */
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3.2rem, 5vw, 8rem);
  align-items: center;
}
.about__media {
  aspect-ratio: 600 / 640;
  border-radius: var(--radius);
}
.about__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.2rem;            /* heading block → button */
}
.about__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;            /* tagline → copy */
}
.about__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;            /* title → body */
}
.about__title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(2.8rem, 3.4vw, 3.9rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--dark-navy);
}
.about__text {
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--body-copy);
}

/* ============================== BENEFITS ================================ */
/* .benefits inherits the body's tan background */
.benefits__heading { max-width: 56rem; }   /* narrower so the title wraps to two lines */
.benefits__feature {
  --tagline-bg: #e0f2f0;        /* lighter mint on the white card */
  display: grid;
  grid-template-columns: 1fr;
  background: var(--white);
  border: var(--border-width) solid var(--navy-100);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem rgba(18, 46, 56, 0.08);
  margin-bottom: clamp(6.4rem, 9vw, 10rem);
}
.benefits__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2.4rem;
  padding: clamp(2.8rem, 4vw, 4.8rem);
}
.benefits__feature-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.8rem, 3.4vw, 3.9rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--dark-navy);
}
.benefits__feature-text {
  font-size: 1.7rem;
  line-height: 1.53;
  color: var(--body-copy);
}
.benefits__media {
  aspect-ratio: 16 / 11;
}

/* Feature cards */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
}
.feature-card {
  background: var(--white);
  border: var(--border-width) solid var(--border-on-light);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.feature-card__media {
  aspect-ratio: 7 / 4;
}
.feature-card__body {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;            /* copy block → action */
  padding: 2.4rem;
}
.feature-card__top {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;            /* label / title / text */
}
.feature-card__label {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--neutral-darkest);
}
.feature-card__title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(2.2rem, 2.2vw, 2.7rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--dark-navy);
}
.feature-card__text {
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--body-copy);
}

/* =============================== PLANS ================================== */
.plans {
  --tagline-bg: #e0f2f0;
  background: #fbf6f4;                          /* explicit tan (= body's --surface-tan) so the wave art multiplies against it */
  --wave-img: url("images/waves2.png");         /* new flowing-wave band */
  --wave-blend: multiply;
}
.plans .section-title { max-width: 54rem; }   /* matches Figma heading width */
.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
}
.plan-card {
  background: var(--white);
  border: 0.075rem solid rgba(0, 0, 0, 0.1);
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.plan-card__media { aspect-ratio: 624 / 360; }
.plan-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.2rem;            /* copy block → actions */
  padding: clamp(2.8rem, 4vw, 4.8rem);
}
.plan-card__top {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;            /* label → copy */
}
.plan-card__copy {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;            /* title → body */
}
.plan-card__label {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--neutral-darkest);
}
.plan-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.6rem, 3vw, 3.3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--dark-navy);
}
.plan-card__text {
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--body-copy);
}
.plan-card__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;
}

/* ============================ TESTIMONIALS ============================== */
.testimonials {
  position: relative;
  background: var(--surface-tan);
  overflow: hidden;
}
/* Decorative line-art mountains along the bottom (transparent PNG) */
.testimonials::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("images/testimonial-mountains.png") no-repeat bottom center / 100% auto;
  pointer-events: none;
}
.testimonials .container { position: relative; z-index: 1; }

.testimonial {
  max-width: 80rem;
  margin: 6rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;            /* slides viewport → controls */
}
/* Carousel: a clipped viewport with a horizontal track of full-width slides.
   Without JS the first slide simply shows and the rest stay clipped. */
.testimonial__viewport {
  overflow: hidden;
  touch-action: pan-y;
}
.testimonial__track {
  display: flex;
  transition: transform 0.4s ease;
}
.testimonial__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;         /* quote → avatar */
}
.testimonial__quote {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.4rem, 3vw, 3.3rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--neutral-darkest);
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.testimonial__avatar {
  width: 6rem; height: 6rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-lavender);
  flex: none;
}
.testimonial__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.testimonial__meta { display: flex; flex-direction: column; }
.testimonial__name { font-weight: 700; font-size: 1.65rem; color: var(--neutral-darkest); }
.testimonial__role { font-size: 1.35rem; color: var(--neutral-darkest); }

.testimonial__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.testimonial__nav { display: flex; gap: 0.8rem; }
.icon-btn {
  width: 5rem; height: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--border-width) solid var(--border-on-light);
  background: var(--white);
  color: var(--neutral-darkest);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.icon-btn:hover { background: var(--neutral-darkest); color: var(--white); }

.dots { display: inline-flex; align-items: center; gap: 0.8rem; }
.dots__dot {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: 0;
  cursor: pointer;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--navy-100);
  transition: background 0.18s ease, transform 0.18s ease;
}
.dots__dot:hover { transform: scale(1.15); }
.dots__dot.is-active { background: var(--neutral-darkest); }

/* ================================ CTA ==================================
   The CTA is deliberately NOT wrapped in .container: it is full-bleed so the
   image reaches the right edge of the screen. On mobile it is a single column
   and the image spans the full width (touching both edges); the text content
   keeps its own gutter padding. */
.cta {
  background: var(--navy-bg);   /* full-bleed navy */
  padding-block: 0;
}
.cta__grid {
  max-width: 144rem;            /* only the content+image container caps at 1440 */
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* minmax(0,…) so the track can shrink below the image's intrinsic width (no mobile overflow) */
}
.cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(5.6rem, 9vw, 11.25rem) var(--gutter);
}
.cta__content-inner {
  width: 100%;
  max-width: 56rem;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}
.cta__intro {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
/* Standalone CTA action button (variants without the white search card) */
.cta__action { align-self: flex-start; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 1.6rem; align-self: flex-start; }
.cta__title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(2.8rem, 3.4vw, 3.9rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
}
.cta__text {
  color: var(--white);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.5;
}
.cta__press {
  margin-top: 1.6rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.cta__press a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.cta__press a:hover { text-decoration: none; }

/* White search card */
.cta__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--white);
  border-radius: 1.5rem;
  padding: 2.4rem;
}
.cta__card-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.4rem;
  color: #000;
}

.search-form {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
}
.search-form__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--white);
  border: 0.075rem solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.2rem;
}
.search-form__icon { flex: none; color: rgba(0, 0, 0, 0.6); }
.search-form__field input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1.65rem;
  border: 0;
  background: none;
  color: var(--neutral-darkest);
}
.search-form__field input::placeholder { color: rgba(0, 0, 0, 0.6); }
.search-form .btn--pill { padding: 0.75rem 1.8rem; }

.cta__counties { display: flex; flex-direction: column; gap: 1.2rem; }
.cta__counties-label {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
}
.chip-list { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.chip {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  border-radius: 1.2rem;
  background: rgba(0, 0, 0, 0.1);
  border: 0.075rem solid rgba(255, 255, 255, 0.1);
  color: #000;
  font-size: 1.35rem;
  font-weight: 600;
}
.chip:hover { background: rgba(0, 0, 0, 0.16); text-decoration: none; }

.cta__card .link-arrow { color: var(--dark-navy); }

.cta__media {
  margin: 0;
  width: 100%;
  min-height: 28rem;
}

/* =============================== FOOTER ================================= */
.site-footer {
  background: var(--navy-bg);
  color: var(--white);
  padding-block: clamp(4.8rem, 7vw, 8rem);
}
.footer__container {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.footer__heading {
  color: var(--white);
  font-size: 1.65rem;
  font-weight: 600;
}
.footer__divider {
  width: 100%;
  border: 0;
  border-top: var(--border-width) solid var(--white-20);
  margin: 0;
}

/* Main: newsletter + links (stacks on mobile) */
.footer__main {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
}
.footer__newsletter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;
}
.footer__lede {
  color: var(--white);
  font-weight: 600;
  font-size: 1.65rem;
  line-height: 1.5;
  max-width: 44rem;
}

.footer__subscribe-group {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
  max-width: 50rem;
}
.footer__subscribe { display: flex; gap: 1.5rem; }
.footer__subscribe input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1.65rem;
  padding: 0.8rem 1.2rem;
  border-radius: 1.2rem;
  border: var(--border-width) solid var(--white-20);
  background: var(--white-10);
  color: var(--white);
}
.footer__subscribe input::placeholder { color: var(--white-60); }
.footer__subscribe-btn {
  flex: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.65rem;
  padding: 1rem 2.4rem;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--white-20);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  white-space: nowrap;
}
.footer__subscribe-btn:hover { background: var(--white-10); }
.footer__fineprint { font-size: 1.2rem; color: var(--white); }

.footer__service { display: flex; flex-direction: column; gap: 1.6rem; padding-top: 2rem; }
.footer__contact-row { display: flex; gap: 1rem; align-items: flex-start; }
.footer__icon { flex: none; width: 1.8rem; height: 1.8rem; margin-top: 0.2rem; color: var(--white); }
.footer__contact-row p { font-size: 1.35rem; line-height: 1.5; color: var(--white); }
.footer__contact-strong { font-size: 1.5rem; font-weight: 600; }
.footer__email { color: #66d9d9; text-decoration: underline; }
.footer__email:hover { color: #66d9d9; }

.footer__badges { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer__badge {
  position: relative;
  width: 11.1rem;
  height: 3.6rem;
  background: url("images/footer-badge.svg") no-repeat center / 100% 100%;
}
.footer__badge span {
  position: absolute;
  left: 4.4rem;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
}

/* Links area */
.footer__links { display: flex; flex-direction: column; gap: 4rem; }
.footer__links-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.2rem 4rem;
}
.footer__col { display: flex; flex-direction: column; gap: 1.6rem; }
.footer__col a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.8rem;
  font-size: 1.35rem;
  color: var(--white);
}
.footer__col a:hover { color: var(--white); text-decoration: underline; }
.footer__ext-icon { flex: none; width: 1.2rem; height: 1.2rem; }
.footer__social a { gap: 1.2rem; }
.footer__social-icon { flex: none; width: 2.2rem; height: 2.2rem; color: var(--white); }

/* Credits */
.footer__credits { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__credits .footer__divider { margin-bottom: 1.4rem; }
.footer__copyright { font-size: 1rem; line-height: 1.5; color: var(--white); opacity: 0.7; }
.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  margin-block: 0.8rem;
}
.footer__legal-links a { color: var(--white); text-decoration: underline; }
.footer__disclaimer { font-size: 1rem; line-height: 1.5; color: var(--white); opacity: 0.8; }

/* ========================================= FIND-A-PLAN HERO (page-specific)
   Left: heading + ZIP search + help link. Right: two overlapping rotated plan
   "preview" cards on a soft gradient blob. The visual is drawn at its design
   size (528×576) and scaled with `--scale` so it fits any column width. */
.fap-hero {
  background: #fbf6f4;                          /* explicit tan (= page --surface-tan) so the wave art multiplies against it */
  --wave-img: url("images/waves3.png");         /* new flowing-wave band */
  --wave-blend: multiply;
  padding-block: clamp(4rem, 7vw, 6rem);
}
.fap-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3.2rem, 5vw, 6.4rem);
  align-items: center;
}
.fap-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.fap-hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(3.4rem, 5vw, 5.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--dark-navy);
}
.fap-hero__text {
  font-size: 1.8rem;
  line-height: 1.55;
  color: var(--body-copy);
  max-width: 62rem;
}

/* ZIP search pill */
.zip-form {
  display: flex;
  align-items: stretch;
  gap: 1.2rem;
  width: 100%;
  max-width: 52rem;
  padding: 0.6rem;
  background: var(--white);
  border: var(--border-width) solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-pill);
}
.zip-form__field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.6rem 1.2rem 0.6rem 1.8rem;
  cursor: text;
}
.zip-form__label {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-teal);
}
.zip-form__input {
  width: 100%;
  font: inherit;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--ink-teal);
  border: 0;
  background: none;
  padding: 0;
}
.zip-form__input::placeholder { color: var(--ink-teal); opacity: 0.7; }
.zip-form__btn { flex: none; padding: 1.4rem 3rem; }

.fap-hero__help { font-size: 1.4rem; font-weight: 600; color: var(--ink-teal); }
.fap-hero__help a { color: var(--ink-teal); text-decoration: underline; }

/* Service-area result notices (Explore Plans hero, in-area / out-of-area) */
.fap-notice {
  max-width: 62rem;
  padding: 1.8rem 2.2rem;
  border-radius: 1.4rem;
  font-size: 1.7rem;
  line-height: 1.5;
  color: var(--dark-navy);
}
.fap-notice strong { font-weight: 700; }
.fap-notice--ok { background: #E0F2F0; }   /* mint — plans available */
.fap-notice--no { background: #F8E7E0; }   /* warm — not offered */

/* Centered ZIP-search hero (find-a-plan entry page) — reuses .zip-form. */
.plan-hero { padding-block: clamp(5.6rem, 9vw, 11.2rem); }
.plan-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.6rem;
  max-width: 68rem;
  margin-inline: auto;
}
.plan-hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(3.4rem, 5vw, 5.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--dark-navy);
  max-width: 54rem;
}
.plan-hero__text {
  font-size: 1.8rem;
  line-height: 1.55;
  color: var(--navy-bg);
  max-width: 62rem;
}
.plan-hero__form { margin-top: 0.8rem; max-width: 56rem; text-align: left; }
.plan-hero__help { font-size: 1.4rem; font-weight: 600; color: var(--ink-teal); }
.plan-hero__help a { color: var(--ink-teal); text-decoration: underline; text-underline-offset: 2px; }

.trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(2rem, 4vw, 3.2rem);
  margin-top: 1.6rem;
}
.trust-strip__item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; text-align: left; }
.trust-strip__num { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; line-height: 1.1; color: var(--ink-teal); }
.trust-strip__star { color: var(--ink-teal); }
.trust-strip__stars {
  font-size: 1.8rem;
  letter-spacing: 0.2rem;
  line-height: 1.1;
  background: linear-gradient(90deg, var(--ink-teal) 70%, rgba(18, 46, 56, 0.25) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.trust-strip__label { font-size: 1.3rem; color: #4d6b6e; }
.trust-strip__divider { flex: none; width: 1px; height: 3.2rem; background: rgba(18, 46, 56, 0.12); }

/* Visual */
.fap-hero__visual {
  --scale: 0.62;
  position: relative;
  width: calc(52.8rem * var(--scale));
  height: calc(57.6rem * var(--scale));
  margin-inline: auto;
}
.fap-hero__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 52.8rem;
  height: 57.6rem;
  transform: scale(var(--scale));
  transform-origin: top left;
  overflow: clip;   /* contain the decorative blob within the collage on narrow screens (reopened at desktop) */
}
.fap-hero__blob {
  position: absolute;
  left: 4.4rem;
  top: -2.4rem;
  width: 58.4rem;
  height: 58.4rem;
  background: url("images/hero-blob.svg") no-repeat center / contain;
  opacity: 0.45;
}
.plan-preview {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 2.4rem;
  padding: 2.8rem;
}
.plan-preview--back {
  left: 11.1rem;
  top: 1.9rem;
  width: 38.4rem;
  gap: 1.4rem;
  border: 0.12rem solid rgba(18, 46, 56, 0.06);
  box-shadow: 0 1.4rem 3.8rem rgba(18, 46, 56, 0.06);
  transform: rotate(4deg);
}
.plan-preview--front {
  left: 5.6rem;
  top: 16.2rem;
  width: 43.2rem;
  gap: 1.9rem;
  border: 0.12rem solid rgba(18, 46, 56, 0.08);
  box-shadow: 0 2.4rem 5.8rem rgba(18, 46, 56, 0.12);
  transform: rotate(-3deg);
  z-index: 1;
}
.plan-preview__tags { display: flex; gap: 1rem; }
.plan-tag {
  background: #e0f2f0;
  color: var(--ink-teal);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.plan-preview__title {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink-teal);
}
.plan-preview--back .plan-preview__title { font-size: 2.4rem; }
.plan-preview--front .plan-preview__title { font-size: 2.8rem; line-height: 1.25; }
.plan-preview__sub { font-size: 1.55rem; color: var(--muted-teal); }
.plan-preview__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.plan-preview__id { font-size: 1.45rem; color: var(--muted-teal); }
.plan-preview__price { display: flex; align-items: baseline; gap: 0.9rem; }
.plan-preview__amount {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 5.6rem;
  color: #0b8d85;
}
.plan-preview__per { font-size: 1.7rem; color: var(--muted-teal); }
.plan-preview__features { display: flex; gap: 0.9rem; }
.plan-feature {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--surface-tan);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-pill);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink-teal);
  white-space: nowrap;
}
.plan-feature__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #0b8d85;
  flex: none;
}
@media (min-width: 480px) { .fap-hero__visual { --scale: 0.8; } }
@media (min-width: 768px) { .fap-hero__visual { --scale: 0.92; } }
@media (min-width: 1024px) {
  .fap-hero__grid { grid-template-columns: 1fr auto; }
  .fap-hero__visual { --scale: 0.78; margin-inline: 0; }
  .fap-hero__stage { overflow: visible; }
}
@media (min-width: 1280px) { .fap-hero__visual { --scale: 1; } }

/* ===================================== FIND-A-PLAN: PLAN LIST ============
   Compare bar + filter chips + stacked plan "rows" (info | price stats |
   actions). Figma lays the cards out absolutely; here they're flex. */
.plan-list {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4.8rem, 8vw, 11.2rem);
}
/* Faint flowing line-art across the top of the section (transparent PNG, low
   opacity baked in), sitting over the page tan but below the content. */
.plan-list::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("images/plan-list-pattern.png") no-repeat top center / 100% auto;
  pointer-events: none;
}
.plan-list__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Compare bar */
.compare-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.6rem;
  padding: 1.8rem 2.4rem;
  background: var(--white);
  border: var(--border-width) solid #d9ebeb;
  border-radius: 1.6rem;
  box-shadow: 0 0.4rem 0.8rem rgba(18, 46, 56, 0.06);
}
.compare-bar__label { flex: none; color: var(--ink-teal); font-size: 1.6rem; }
.compare-bar__slots { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.8rem; }
.compare-bar__slot {
  flex: 1;
  min-width: 0;
  text-align: left;
  font: inherit;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink-teal);
  background: transparent;
  border: var(--border-width) solid #c7dbdb;
  border-radius: var(--radius-pill);
  padding: 0.8rem 1.6rem;
  cursor: pointer;
}
.compare-bar__vs { flex: none; color: var(--ink-teal); font-size: 1.6rem; }
.compare-bar__btn { flex: none; align-self: flex-start; }

/* Filters */
.plan-filters { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.filter-chip {
  font: inherit;
  font-size: 1.6rem;
  color: #000;
  background: var(--white);
  border: var(--border-width) solid #d2d2d2;
  border-radius: var(--radius-pill);
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.filter-chip:hover { border-color: var(--ink-teal); }
.filter-chip.is-active { background: var(--ink-teal); border-color: var(--ink-teal); color: var(--white); }

/* Plan rows */
.plan-list__items { list-style: none; display: flex; flex-direction: column; gap: 3rem; }
.plan-row {
  background: var(--white);
  border: var(--border-width) solid #d9ebeb;
  border-radius: 1.6rem;
  box-shadow: 0 0.4rem 1.6rem rgba(18, 46, 56, 0.06);
  overflow: hidden;
}
.plan-row__main { display: flex; flex-direction: column; gap: 2.4rem; padding: 2.4rem; }
.plan-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plan-row__tags { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.plan-row__tag {
  background: #e0f2f0;
  color: var(--ink-teal);
  font-size: 1.2rem;
  border-radius: var(--radius-pill);
  padding: 0.4rem 1.2rem;
}
.plan-row__title {
  margin-top: 2rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.6rem, 3.2vw, 4rem);
  line-height: 1.2;
  color: var(--dark-navy);
}
.plan-row__id { margin-top: 1rem; font-size: 1.4rem; color: var(--ink-teal); }
.plan-row__desc {
  margin-top: 1.6rem;
  font-size: 1.8rem;
  line-height: 1.5;
  color: var(--body-copy);
  max-width: 55rem;
}
.plan-row__features { padding-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.plan-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: var(--border-width) solid #eaeaea;
  border-radius: var(--radius-pill);
  padding: 0.6rem 0.9rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink-teal);
}
.plan-feature-pill__check { flex: none; width: 1.2rem; height: 1.2rem; color: #0b8d85; }

.plan-row__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 3.2rem;
}
.plan-stat { display: flex; flex-direction: column; }
.plan-stat__value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.8rem, 3vw, 4rem);
  line-height: 1.2;
  color: #0a8c85;
}
.plan-stat__label { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-teal); }

.plan-row__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem;
  padding: 1.6rem 2.4rem;
  border-top: var(--border-width) solid #eaeaea;
}
.plan-row__buttons { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.plan-row__actions .btn { padding: 1.2rem 2.4rem; }
.plan-row__compare { display: inline-flex; align-items: center; gap: 1rem; font-size: 1.6rem; color: var(--ink-teal); cursor: pointer; }
.plan-row__compare input {
  appearance: none;
  -webkit-appearance: none;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  border: var(--border-width) solid var(--ink-teal);
  border-radius: 0.6rem;
  cursor: pointer;
  position: relative;
}
.plan-row__compare input:checked { background: var(--ink-teal); }
.plan-row__compare input:checked::after {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 0.25rem;
  width: 0.6rem;
  height: 1.1rem;
  border: solid var(--white);
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg);
}

@media (min-width: 768px) {
  .compare-bar { flex-direction: row; align-items: center; gap: 2.4rem; }
  .compare-bar__btn { align-self: auto; }
}
@media (min-width: 1024px) {
  .plan-row__main { flex-direction: row; gap: 3.2rem; padding: 2.9rem; }
  .plan-row__features { margin-top: auto; }
  .plan-row__stats {
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
    text-align: right;
    gap: 2rem;
  }
}

/* ===================================== FIND-A-PLAN: COMPARISON TABLE ====== */
.comparison {
  --wave-img: url("images/comparison-mountains.png");   /* mountains, not scallops */
  padding-block: 4.6rem 10.4rem;
}
.comparison__inner { display: flex; flex-direction: column; align-items: center; gap: 3.2rem; }
.comparison__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  max-width: 76.8rem;
  text-align: center;
}
.comparison .section-title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); }
.comparison__subtitle { font-size: 1.8rem; line-height: 1.5; color: var(--body-copy); }

.compare-table-wrap {
  width: 100%;
  padding: 1.6rem;
  background: var(--white);
  border-radius: 1.6rem;
  box-shadow: 0 0.4rem 0.8rem rgba(18, 46, 56, 0.06);
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  min-width: 52rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;   /* all columns equal width (label + each plan) */
}
.compare-table td, .compare-table tbody th { overflow-wrap: break-word; }
.compare-table th,
.compare-table td { padding: 1.4rem 1.6rem; vertical-align: middle; }
.compare-table thead th {
  padding: 2.4rem 1.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 2rem;
  color: var(--ink-teal);
  text-align: center;
}
.compare-table tbody th {
  width: 42%;
  text-align: left;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--body-copy);
}
.compare-table tbody td {
  text-align: center;
  font-size: 1.6rem;
  color: var(--ink-teal);
}
.compare-table strong { font-weight: 600; }
/* zebra: shade odd rows as rounded bars */
.compare-table tbody tr:nth-child(odd) th,
.compare-table tbody tr:nth-child(odd) td { background: rgba(0, 95, 192, 0.04); }
.compare-table tbody tr:nth-child(odd) th { border-radius: 0.8rem 0 0 0.8rem; }
.compare-table tbody tr:nth-child(odd) td:last-child { border-radius: 0 0.8rem 0.8rem 0; }
.cmp-icon { width: 2.4rem; height: 2.4rem; color: var(--ink-teal); display: inline-block; vertical-align: middle; }

/* Dynamic value comparison: left-aligned, top-aligned real values */
.compare-table--values tbody th,
.compare-table--values tbody td { text-align: left; vertical-align: top; line-height: 1.4; }
.compare-empty { padding: 2.4rem; text-align: center; color: var(--body-copy); font-size: 1.6rem; }

/* Compare-bar filled slot (a selected plan, click to remove) + disabled button */
.compare-bar__slot.is-filled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: rgba(0, 95, 192, 0.06);
  border-color: var(--ink-teal);
}
.compare-bar__x { flex: none; font-size: 1.8rem; line-height: 1; opacity: 0.7; }
.compare-bar__slot.is-filled:hover .compare-bar__x { opacity: 1; }
.compare-bar__btn:disabled { opacity: 0.45; cursor: not-allowed; }

@media (min-width: 768px) {
  .compare-table th,
  .compare-table td { padding: 1.6rem 2.4rem; }
}

/* ===================== PAGE HERO (photo collage, reusable) =============== */
/* Content + a fixed-design photo collage (520×600) scaled with --scale, like
   the find-a-plan hero. Mountains pattern at the bottom (not the scallops). */
.page-hero {
  --wave-img: url("images/comparison-mountains.png");   /* mountains, not scallops */
  padding-block: clamp(2.4rem, 5vw, 4rem) clamp(4rem, 7vw, 6rem);
  overflow-x: clip;                                     /* inset photo sticks out left */
}
.page-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(4rem, 6vw, 6.4rem);
  align-items: center;
}
.page-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;
}
.page-hero__title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(3.4rem, 5vw, 5.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--dark-navy);
  max-width: 16ch;
}
.page-hero__text {
  font-size: 1.8rem;
  line-height: 1.55;
  color: var(--body-copy);
  max-width: 59rem;
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem 2.4rem;
}
.page-hero__link { color: var(--ink-teal); font-size: 1.6rem; }

/* Visual: scaled stage */
.page-hero__visual {
  --scale: 0.66;
  position: relative;
  width: calc(52rem * var(--scale));
  height: calc(60rem * var(--scale));
  margin-inline: auto;
}
.page-hero__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 52rem;
  height: 60rem;
  transform: scale(var(--scale));
  transform-origin: top left;
}
.page-hero__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 48rem;
  height: 60rem;
  margin: 0;
  border-radius: 2.4rem;
  overflow: hidden;
  box-shadow: 0 2rem 4.8rem rgba(18, 46, 56, 0.1);
}
.page-hero__inset {
  position: absolute;
  left: -6rem;
  top: 36rem;
  width: 18rem;
  height: 22rem;
  margin: 0;
  border: 0.6rem solid var(--white);
  border-radius: 2rem;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 1.6rem 3.2rem rgba(18, 46, 56, 0.14);
}
.page-hero__photo img,
.page-hero__inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__badge {
  position: absolute;
  left: 36rem;
  top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.6rem 2rem;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  box-shadow: 0 1.2rem 3.2rem rgba(18, 46, 56, 0.12);
  white-space: nowrap;
}
.page-hero__badge-score {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 3rem;
  color: #0b8d85;
}
.page-hero__badge-label { font-size: 1.2rem; color: var(--muted-teal); }

@media (min-width: 480px) { .page-hero__visual { --scale: 0.82; } }
@media (min-width: 768px) { .page-hero__visual { --scale: 1; } }
@media (min-width: 1024px) {
  .page-hero__grid { grid-template-columns: 1fr auto; }
  .page-hero__visual { margin-inline: 0 6rem; }   /* room for the inset's left overhang */
}

/* ====================== MEMBER BENEFITS: COVERAGE CARDS =================== */
/* White section over a faint flowing line-art graphic (#ebebeb @~30%). */
.coverage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--white);
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.coverage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("images/coverage-pattern.png") no-repeat top center / 100% auto;
  pointer-events: none;
}
.coverage__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4rem, 6vw, 8rem);
}
.coverage__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  max-width: 72rem;
}
.coverage__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); }
.coverage__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: 100%;
}
.coverage__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  width: 100%;
}
.coverage-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem rgba(18, 46, 56, 0.08);
}
.coverage-card__media { margin: 0; height: 22rem; }
.coverage-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.coverage-card__text {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem 2.4rem 2.4rem;
}
.coverage-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.27;
  color: var(--dark-navy);
}
.coverage-card__desc {
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--body-copy);
}
.coverage__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.6rem 2.4rem;
}
.coverage__link { color: var(--ink-teal); font-size: 1.5rem; }

@media (min-width: 600px) { .coverage__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .coverage__cards { grid-template-columns: repeat(4, 1fr); } }

/* =========================== MEDIA SPLIT (50/50) ========================= */
/* Reusable text + image two-column (e.g. Medications, Wellness). Tan body by
   default; add --media-split-bg (or .media-split--tint) to tint, and
   .media-split--reverse to put the image first at the desktop breakpoint. */
.media-split {
  background: var(--media-split-bg, transparent);
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.media-split--tint { --media-split-bg: rgba(190, 217, 217, 0.3); }
.media-split--white { --media-split-bg: var(--white); }
/* Faint flowing line-art behind the section (same motif as the coverage cards) */
.media-split--lines { position: relative; isolation: isolate; overflow: clip; }
.media-split--lines::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("images/coverage-pattern.png") no-repeat top center / 100% auto;
  pointer-events: none;
}
.media-split--lines > * { position: relative; z-index: 1; }
.media-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(4rem, 6vw, 8rem);
  align-items: center;
}
.media-split__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.2rem;
}
.media-split__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}
.media-split__copy { display: flex; flex-direction: column; gap: 2.4rem; }
.media-split__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); }
.cc-model {   /* white field (via media-split--white); wave art shows as-is under multiply */
  --wave-img: url("images/waves3.png");
  --wave-blend: multiply;
}
.cc-model .media-split__title { font-size: clamp(2.8rem, 3.4vw, 3.8rem); }
/* Careers "Purpose": 40px ink-teal title + a green-icon value list */
.careers-purpose .media-split__title,
.cr-mission .media-split__title,
.um-fits .media-split__title { font-size: clamp(3.2rem, 3.6vw, 4rem); color: var(--ink-teal); }
.careers-purpose .media-split__text,
.cr-mission .media-split__text,
.um-compare .media-split__text,
.um-fits .media-split__text { font-size: 1.7rem; line-height: 1.55; color: rgba(18, 46, 56, 0.72); }
/* Understanding Medicare "Your coverage": 24px img radius + teal-icon list */
.um-fits .media-split__media { border-radius: 2.4rem; }
.coverage-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.6rem; }
.coverage-list__item { display: flex; align-items: center; gap: 1.4rem; }
.coverage-list__icon { flex: none; width: 2.4rem; height: 2.4rem; display: flex; }
.coverage-list__icon img { display: block; width: 2.4rem; height: 2.4rem; }
.coverage-list__text { font-size: 1.6rem; line-height: 1.5; color: rgba(18, 46, 56, 0.78); }
/* Understanding Medicare "Compare options": 36px title, 24px img radius, 2-col sub-list */
.um-compare .media-split__title { font-size: clamp(2.8rem, 3.4vw, 3.6rem); color: var(--ink-teal); }
.um-compare .media-split__media { border-radius: 2.4rem; box-shadow: 0 1.2rem 1.6rem -0.4rem rgba(0, 0, 0, 0.08), 0 0.4rem 0.6rem -0.2rem rgba(0, 0, 0, 0.03); }
.compare-cols { list-style: none; margin: 0; padding: 0.8rem 0; display: grid; grid-template-columns: 1fr; gap: 2.4rem; width: 100%; }
.compare-cols__item { display: flex; flex-direction: column; gap: 1.6rem; }
.compare-cols__title { font-family: var(--font-head); font-weight: 700; font-size: 1.8rem; line-height: 1.3; color: var(--ink-teal); }
.compare-cols__text { font-size: 1.4rem; line-height: 1.5; color: rgba(18, 46, 56, 0.7); }
@media (min-width: 480px) { .compare-cols { grid-template-columns: 1fr 1fr; } }
/* Community-resources "Our mission": larger 24px image radius + wave scallop */
.cr-mission {
  --wave-img: url("images/waves3.png");         /* new flowing-wave band (white field -> shows as-is under multiply) */
  --wave-blend: multiply;
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.cr-mission .media-split__media { border-radius: 2.4rem; }
.cv-list { list-style: none; margin: 0; padding: 0.8rem 0; display: flex; flex-direction: column; gap: 1.6rem; }
.cv-list__item { display: flex; align-items: center; gap: 1.6rem; }
.cv-list__icon { flex: none; width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; }
.cv-list__icon img { display: block; width: 3.2rem; height: 3.2rem; }
.cv-list__text { font-size: 1.7rem; line-height: 1.55; color: rgba(18, 46, 56, 0.72); }
/* "Let's work together": ink-teal text + a small meta line on the teal tint */
.join-net { --tagline-bg: #c7eae4; }
.join-net .media-split__title,
.join-net .media-split__text { color: var(--ink-teal); }
.join-net__meta { font-weight: 600; font-size: 1.4rem; line-height: 1.5; color: rgba(18, 46, 56, 0.6); }

/* ===================== FOR PROVIDERS: CONTACT DIRECTORY =============== */
.directory {
  --tagline-bg: #e0f2f0;
  background: var(--white);
  padding-block: clamp(5.6rem, 9vw, 11.2rem) 14.8rem;
}
.directory__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(4rem, 6vw, 8rem); }
.directory__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 76.8rem; text-align: center; }
.directory__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); }
.directory__subtitle { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); }
.directory__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 4.8rem; width: 100%; }
.dir-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2.4rem; }
.dir-card__icon { flex: none; width: 4.8rem; height: 4.8rem; display: flex; align-items: center; justify-content: center; }
.dir-card__icon img { display: block; width: 3.8rem; height: 3.8rem; }
.dir-card__title { font-family: var(--font-head); font-weight: 700; font-size: 3.2rem; line-height: 1.3; color: var(--dark-navy); }
.dir-card__text { display: flex; flex-direction: column; gap: 0.8rem; }
.dir-card__text p { margin: 0; font-size: 1.6rem; line-height: 1.5; color: var(--body-copy); }
.dir-card__email a { color: var(--science-blue, #005fc0); font-weight: 600; text-decoration: none; word-break: break-word; }
.dir-card__email a:hover { text-decoration: underline; }

@media (min-width: 768px) { .directory__grid { grid-template-columns: repeat(3, 1fr); gap: 4.8rem; } }
.media-split__text { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); }
.media-split__media {
  margin: 0;
  aspect-ratio: 600 / 640;
  border-radius: 1.6rem;
  overflow: hidden;
}
.media-split__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .media-split__grid { grid-template-columns: 1fr 1fr; }
  .media-split--reverse .media-split__media { order: -1; }
}

/* =============================== VISION CALLOUT ========================== */
/* White rounded card on tan: content + checklist | image. */
.vision {
  --tagline-bg: #e0f2f0;
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.vision__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3.2rem, 5vw, 6.4rem);
  align-items: center;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.06);
  border-radius: 3.2rem;
  box-shadow: 0 2.4rem 6.4rem rgba(18, 46, 56, 0.08);
  padding: clamp(2.8rem, 4vw, 4.8rem);
}
.vision__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;
}
.vision__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(3.2rem, 4.5vw, 4.8rem);
  line-height: 1.17;
  color: var(--dark-navy);
}
.vision__text { font-size: 1.7rem; line-height: 1.53; color: var(--body-copy); }
.vision__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
}
.vision__item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--ink-teal);
}
.vision__check { flex: none; width: 2.4rem; height: 2.4rem; }
.vision__check svg { width: 100%; height: 100%; display: block; }
.vision__media {
  margin: 0;
  aspect-ratio: 540 / 560;
  border-radius: 2.4rem;
  overflow: hidden;
}
.vision__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) { .vision__card { grid-template-columns: 1.1fr 1fr; } }

/* ================================ VALUES GRID =========================== */
/* Centered intro + 6 floating value cards (icon badge + title + desc). White. */
.values {
  --tagline-bg: #e0f2f0;
  background: var(--white);
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.values__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4rem, 6vw, 8rem);
}
.values__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  max-width: 76.8rem;
}
.values__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); }
.values__intro { font-size: 1.8rem; line-height: 1.55; color: var(--ink-teal); text-align: center; }
.values__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4.8rem 2.4rem;
}
.value-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}
.value-card__badge {
  flex: none;
  width: 9.6rem;
  height: 9.6rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0.6rem 1.6rem rgba(18, 46, 56, 0.08);
  display: grid;
  place-items: center;
}
.value-card__badge img { width: 4.8rem; height: 4.8rem; display: block; }
.value-card__body { display: flex; flex-direction: column; gap: 1.2rem; max-width: 34rem; }
.value-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.25;
  color: var(--dark-navy);
}
.value-card__desc { font-size: 1.4rem; line-height: 1.5; color: var(--body-copy); }

@media (min-width: 600px) { .values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values__grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================ PERKS ("Why work here") ==================== */
/* Centered head + 4-across image-top cards, over the mountains graphic at the
   bottom of the white section (via .wave-bg + --wave-img comparison-mountains). */
.perks {
  position: relative;
  background: var(--white);
  --wave-img: url("images/comparison-mountains.png");   /* mountains graphic (was the scallop ::after) */
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
  overflow: hidden;
}
.perks__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4rem, 6vw, 8rem);
}
.perks__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 76.8rem; }
.perks__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); color: var(--dark-navy); }
.perks__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
}
.perk-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem rgba(18, 46, 56, 0.08);
}
.perk-card__media { position: relative; height: 20rem; margin: 0; overflow: hidden; }
.perk-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.perk-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 2rem 2.4rem 2.4rem; }
.perk-card__tag {
  background: #e0f2f0;
  color: var(--ink-teal);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.06rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
}
.perk-card__title { font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; line-height: 1.27; color: var(--ink-teal); }
.perk-card__text { font-size: 1.4rem; line-height: 1.5; color: #4d6b6e; }

@media (min-width: 640px) { .perks__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .perks__grid { grid-template-columns: repeat(4, 1fr); } }

/* ================================= TIMELINE ============================= */
/* Year stepper (progress fills up to the active year) + a content pane that
   swaps per year. On the teal tint with the scallop wave. JS: data-timeline. */
.timeline {
  /* Solid field color (Figma) — also used for the dots' box-shadow ring so it
     matches the bg exactly. The wave art multiplies against this. */
  --timeline-bg: #ecf4f4;
  background: var(--timeline-bg);
  --wave-img: url("images/waves1.png");         /* new flowing-wave band */
  --wave-blend: multiply;
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.timeline__inner { display: flex; flex-direction: column; gap: clamp(4rem, 6vw, 6.4rem); }

/* Stepper */
.timeline__progress {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.timeline__progress::-webkit-scrollbar { display: none; }
.timeline-step {
  flex: 1 0 auto;
  min-width: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0;   /* zero inline padding so adjacent line halves meet (no gap) */
  background: none;
  border: 0;
  cursor: pointer;
}
.timeline-step__year {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.4;
  color: var(--ink-teal);
  opacity: 0.3;
  transition: opacity 0.2s ease;
}
/* Continuous line: the two halves fill the full track and meet at center; the
   dot sits ON TOP (absolute) so the line is never broken at a marker. */
.timeline-step__track { position: relative; display: flex; align-items: center; width: 100%; height: 1.5rem; }
.timeline-step__line { flex: 1; height: 0.3rem; background: var(--ink-teal); opacity: 0.3; transition: opacity 0.2s ease; }
.timeline-step__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #a8b4b6;   /* solid faded color (matches the line); turns ink-teal when on */
  /* 8px ring in the section bg masks the line right around each dot -> slight gap */
  box-shadow: 0 0 0 0.8rem var(--timeline-bg);
  transition: background 0.2s ease;
}
/* completed years (before current): fully solid */
.timeline-step.is-done .timeline-step__year { opacity: 1; }
.timeline-step.is-done .timeline-step__line { opacity: 1; }
.timeline-step.is-done .timeline-step__dot { background: var(--ink-teal); }
/* current year: label + dot solid, line solid up to the dot (left only) */
.timeline-step.is-current .timeline-step__year { opacity: 1; }
.timeline-step.is-current .timeline-step__line:first-child { opacity: 1; }
.timeline-step.is-current .timeline-step__dot { background: var(--ink-teal); }
.timeline-step:hover .timeline-step__year { opacity: 1; }

/* Panes */
.timeline-pane {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3.2rem, 5vw, 8rem);
  align-items: stretch;
}
.timeline-pane[hidden] { display: none; }
.timeline-pane__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.2rem;
}
.timeline-pane__text { display: flex; flex-direction: column; gap: 2.4rem; }
.timeline-pane__titles { display: flex; flex-direction: column; gap: 1.6rem; color: var(--dark-navy); }
.timeline-pane__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(18, 46, 56, 0.55);
}
.timeline-pane__copy strong { font-weight: 700; color: var(--ink-teal); }
.timeline-pane__year {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(3.2rem, 4vw, 4rem);
  line-height: 1.2;
}
.timeline-pane__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  line-height: 1.3;
}
.timeline-pane__copy { display: flex; flex-direction: column; gap: 1.9rem; font-size: 1.8rem; line-height: 1.5; color: var(--body-copy); }
.timeline-pane__copy p { margin: 0; }
.timeline__nav { display: flex; gap: 1.2rem; }
.timeline__arrow {
  width: 4.8rem;
  height: 4.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.15);
  color: var(--ink-teal);
  cursor: pointer;
  transition: background 0.18s ease, opacity 0.18s ease;
}
.timeline__arrow svg { width: 2rem; height: 2rem; }
.timeline__arrow:hover:not(:disabled) { background: #eef4f4; }
.timeline__arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.timeline-pane__media {
  margin: 0;
  aspect-ratio: 1;
  border-radius: 1.6rem;
  overflow: hidden;
}
.timeline-pane__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) { .timeline-pane { grid-template-columns: 1fr 1fr; } }

/* ============================ LEADERSHIP / TEAM ========================== */
/* Centered intro + a 3-col grid of leader cards (photo + role + name + link). */
.team {
  --tagline-bg: #e0f2f0;
  background: var(--white);
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.team__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4rem, 6vw, 8rem);
}
.team__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  max-width: 76.8rem;
}
.team__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); }
.team__intro { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); text-align: center; }
.team__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 28rem);
  justify-content: center;
  gap: 4.8rem;
}
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.06);
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 0.6rem 2rem rgba(18, 46, 56, 0.06);
}
.team-card__photo { margin: 0; height: 32rem; }
.team-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 2rem 2rem 2.4rem;
}
.team-card__id { display: flex; flex-direction: column; gap: 0.8rem; }
.team-card__role { font-size: 1.4rem; line-height: 1.43; color: var(--muted-teal); }
.team-card__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.3;
  color: var(--ink-teal);
}
.team-card__foot { display: flex; flex-direction: column; gap: 1rem; }
.team-card__divider { border: 0; height: 1px; width: 100%; margin: 0; background: rgba(18, 46, 56, 0.08); }
.team-card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.8rem;
  padding-top: 0.4rem;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink-teal);
  text-decoration: none;
}
.team-card__link:hover { text-decoration: underline; }
.team-card__badge {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
  background: #0b8d85;
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

@media (min-width: 600px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 28rem)); column-gap: 4.8rem; row-gap: 6.4rem; } }
@media (min-width: 1024px) { .team__grid { grid-template-columns: repeat(3, minmax(0, 28rem)); } }

/* ========================= BROKER PARTNERS: HERO ======================== */
/* Centered hero: heading + 2 buttons, a wide image, then a 3-up feature row,
   over a faint flowing line-art bg. Tan body. */
.bk-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4.8rem, 7vw, 8rem);
}
.bk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("images/coverage-pattern.png") repeat-y top center / 100% auto;
  opacity: 0.55;
  pointer-events: none;
}
.bk-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4rem, 6vw, 6rem);
}
.bk-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  max-width: 76.8rem;
}
.bk-hero__copy { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; }
.bk-hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(3.6rem, 6vw, 5.6rem);
  line-height: 1.2;
  color: var(--dark-navy);
}
.bk-hero__text { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); }
.bk-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.bk-hero .btn--outline-ink { font-weight: 600; }   /* SemiBold to balance the gradient button */
.bk-hero__cta { display: inline-flex; align-items: center; gap: 0.8rem; }
.bk-hero__cta-arrow { flex: none; }

/* Broker hero tabs — links to the related broker resource pages. */
.bk-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 3.2rem; width: 100%; }
.bk-tabs__tab {
  font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; line-height: 1.3;
  color: #122e38; white-space: nowrap;
  padding-block: 1.6rem;
  border-bottom: 0.1rem solid rgba(18, 46, 56, 0.15);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.bk-tabs__tab:hover { color: #0b8d85; }
.bk-tabs__tab.is-active { border-bottom-width: 0.3rem; border-bottom-color: #0b8d85; }
@media (min-width: 1024px) { .bk-tabs { flex-wrap: nowrap; width: auto; max-width: none; } }
.bk-hero__media {
  width: 100%;
  margin: 0;
  aspect-ratio: 1280 / 640;
  border-radius: 2.4rem;
  overflow: hidden;
  box-shadow: 0 1.2rem 1.6rem -0.4rem rgba(0, 0, 0, 0.08), 0 0.4rem 0.6rem -0.2rem rgba(0, 0, 0, 0.03);
}
.bk-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bk-hero__features {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem 3rem;
}
.bk-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.6rem;
}
.bk-feature__icon { width: 4.8rem; height: 4.8rem; }
.bk-feature__icon img { display: block; width: 100%; height: 100%; }
.bk-feature__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.4;
  color: var(--dark-navy);
}
.bk-feature__desc { font-size: 1.6rem; line-height: 1.5; color: var(--body-copy); }
/* Only the broker-partners feature descriptions keep a constrained width */
.bk-hero--broker .bk-feature__desc { max-width: 28rem; }

@media (min-width: 768px) { .bk-hero__features { grid-template-columns: repeat(3, 1fr); align-items: start; } }
/* Broker hero now shows two feature items, centred. */
@media (min-width: 768px) {
  .bk-hero--broker .bk-hero__features { grid-template-columns: repeat(2, minmax(0, 46.8rem)); justify-content: center; gap: 4rem 3rem; }
}

/* Broker "Process" — three steps on a pale-teal band. */
.bk-process { --tagline-bg: #fff; background: rgba(190, 217, 217, 0.3); padding-block: clamp(6.4rem, 10vw, 11.2rem); }
.bk-process__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 3.2rem; }
.bk-process__grid { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: 1fr; gap: 4rem 5.4rem; }
.bk-process__step { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.bk-process__body { display: flex; flex-direction: column; gap: 0.9rem; }
.bk-process__kicker { font-family: var(--font-head); font-weight: 700; font-size: 2.8rem; line-height: 1.2; color: var(--ink-teal); }
.bk-process__title { font-family: var(--font-body); font-weight: 600; font-size: 2rem; line-height: 1.2; color: var(--ink-teal); }
.bk-process__text { font-size: 1.7rem; line-height: 1.55; color: rgba(18, 46, 56, 0.72); }
.bk-process__btn { padding-block: 1rem; font-size: 1.5rem; }

@media (min-width: 768px) {
  .bk-process__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* Certification — "How to Complete Your Certification" (copy + info cards | step box). */
.cert-howto {
  --tagline-bg: #e0f2f0;
  --wave-img: url("images/waves3.png");   /* new flowing-wave band (white field) */
  --wave-blend: multiply;                  /* white waves read as pale mint on the white section */
  background: var(--white);
  border-top: var(--border-width) solid #d4dcde;
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.cert-howto__inner { display: grid; grid-template-columns: 1fr; gap: clamp(3.2rem, 5vw, 5rem); align-items: start; }
.cert-howto__col { display: flex; flex-direction: column; align-items: flex-start; gap: 3.2rem; }
.cert-howto__head { display: flex; flex-direction: column; gap: 2.4rem; }
.cert-howto__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.2rem, 5vw, 4.8rem); line-height: 1.2; color: var(--dark-navy); }
.cert-howto__text { font-size: 1.8rem; line-height: 1.5; color: var(--body-copy); }

.cert-cards { display: flex; flex-direction: column; gap: 2rem; width: 100%; }
.cert-card { display: flex; flex-direction: column; gap: 1.2rem; padding: 2.1rem; background: rgba(225, 242, 239, 0.4); border: var(--border-width) solid rgba(11, 141, 133, 0.35); border-radius: 1.6rem; }
.cert-card__title { font-family: var(--font-body); font-weight: 700; font-size: 1.4rem; line-height: 1.4; color: var(--ink-teal); }
.cert-card__title::before { content: "✦"; margin-right: 0.6rem; color: #0b8d85; }
.cert-card__body { font-size: 1.3rem; line-height: 1.55; color: rgba(18, 46, 56, 0.78); }

.cert-howto__steps { align-self: start; width: 100%; background: var(--white); border: var(--border-width) solid #15b8ad; border-radius: 3rem; padding: clamp(2.8rem, 6vw, 6rem); }
.cert-howto__steps ol { margin: 0; padding-left: 2.6rem; list-style: decimal; }
.cert-howto__steps > ol > li { font-family: var(--font-body); font-size: 2rem; line-height: 1.4; color: var(--dark-navy); margin-bottom: 2rem; }
.cert-howto__steps > ol > li:last-child { margin-bottom: 0; }
.cert-howto__steps > ol > li::marker { font-family: var(--font-head); font-weight: 700; }
.cert-howto__steps ul { margin: 1.2rem 0 0; padding-left: 2.2rem; list-style: disc; }
.cert-howto__steps ul li { font-size: 1.6rem; line-height: 1.4; color: var(--dark-navy); margin-bottom: 1.2rem; }
.cert-howto__steps ul li:last-child { margin-bottom: 0; }
.cert-howto__steps a { color: #0b8d85; text-decoration: underline; text-underline-offset: 0.2rem; }
.cert-howto__steps a:hover { color: #096e68; }

@media (min-width: 1024px) {
  .cert-howto__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 65.2rem); }
}

/* Sales Tools & Resources — three form/resource cards with bottom-aligned buttons. */
.str-cards { border-top: var(--border-width) solid #d4dcde; padding-block: clamp(5.6rem, 9vw, 8rem); background: #fff; }
.str-cards__grid { display: grid; grid-template-columns: 1fr; gap: clamp(4rem, 6vw, 8rem); align-items: stretch; }
.str-card { display: flex; flex-direction: column; justify-content: space-between; gap: 2.4rem; height: 100%; }
.str-card__body { display: flex; flex-direction: column; gap: 1.6rem; }
.str-card__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.6rem, 3vw, 3.4rem); line-height: 1.2; color: var(--dark-navy); }
.str-card__text { font-size: 1.8rem; line-height: 1.5; color: var(--body-copy); }
.str-card__btn { align-self: flex-start; gap: 0.8rem; }
.str-card__arrow { flex: none; }

@media (min-width: 768px) {
  .str-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sales Tools & Resources — "Preventive Care Rewards" (centred head + one doc card). */
.str-rewards { --tagline-bg: #e0f2f0; background: var(--surface-tan); border-top: var(--border-width) solid #d4dcde; padding-block: clamp(5.6rem, 9vw, 8rem); }
.str-rewards__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(3.2rem, 5vw, 4.8rem); }
.str-rewards__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 76.8rem; text-align: center; }
.str-rewards__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.2rem, 4.5vw, 4.8rem); line-height: 1.2; color: var(--dark-navy); }
.str-rewards__text { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); }
.str-rewards__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4rem; width: 100%; }
.str-rewards__cards .doc-card { width: 100%; max-width: 34.4rem; }

/* Sales Tools & Resources — "Tools Inside the Broker Portal" (4 icon cards + button). */
.str-tools { background: var(--white); border-top: var(--border-width) solid #d4dcde; padding-block: clamp(5.6rem, 9vw, 8rem); display: flex; flex-direction: column; align-items: center; gap: clamp(4rem, 6vw, 6.4rem); }
.str-tools__head { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; text-align: center; padding-inline: var(--gutter); }
.str-tools__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.2rem, 4.5vw, 4.8rem); line-height: 1.2; color: var(--dark-navy); }
.str-tools__text { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); }
.str-tools__grid { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
.str-tool { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; height: 100%; padding: 2rem 3.6rem; }
.str-tool__icon { flex: none; width: 5.2rem; height: 5.2rem; display: flex; align-items: center; justify-content: center; background: var(--brand-gradient); color: var(--white); border-radius: 1.2rem; }
.str-tool__icon svg { display: block; width: 2.4rem; height: 2.4rem; }
.str-tool__title { font-family: var(--font-head); font-weight: 700; font-size: 2rem; line-height: 1.3; color: var(--dark-navy); }
.str-tool__text { font-size: 1.6rem; line-height: 1.5; color: var(--body-copy); }

@media (min-width: 600px) { .str-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .str-tools__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Enrollment — "Online Enrollment Process" (media-split + waves3, portals + list). */
.enroll-process {
  --media-split-bg: var(--white);
  --wave-img: url("images/waves3.png");
  --wave-blend: multiply;
}
.enroll-process .media-split__media { aspect-ratio: 615 / 762; }
.enroll-portals { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; width: 100%; }
.enroll-portals__btn { gap: 0.8rem; }
.enroll-portals__arrow { flex: none; }
@media (min-width: 1360px) { .enroll-portals { flex-direction: row; align-items: center; } }
.enroll-process__list ul { margin: 0; padding-left: 2.2rem; list-style: disc; display: flex; flex-direction: column; gap: 0.8rem; }
.enroll-process__list ul ul { margin-top: 0.8rem; }
.enroll-process__list li { font-size: 1.6rem; line-height: 1.5; color: var(--ink-teal); }

/* Enrollment — "Documentation Requirements" (image | copy + contact + address). */
.doc-req { --tagline-bg: #e0f2f0; }
.doc-req .media-split__media { aspect-ratio: 297 / 368; }
.doc-req__body { display: flex; flex-direction: column; gap: 1.2rem; }
.doc-req__body p { font-size: 1.8rem; line-height: 1.5; color: var(--ink-teal); }
.doc-req__contact { font-size: 1.8rem; line-height: 1.5; color: var(--ink-teal); }
.doc-req__contact a { color: var(--science-blue, #005fc0); font-weight: 600; text-decoration: underline; word-break: break-word; }
.doc-req__address { font-size: 1.6rem; line-height: 1.6; color: var(--ink-teal); }

/* Certification — "Why Partner with Clever Care?" (uses .media-split). */
.cert-why .media-split__media { aspect-ratio: 297 / 368; }
.cert-why__list { list-style: disc; margin: 0; padding-left: 2.4rem; display: flex; flex-direction: column; gap: 1.2rem; }
.cert-why__list li { font-size: 1.6rem; line-height: 1.5; color: var(--ink-teal); }
.cert-why__note { font-size: 1.6rem; line-height: 1.5; color: var(--ink-teal); }

/* HRA Incentive Program — reusable full-bleed gradient promo band (from options). */
.hra { background: linear-gradient(90deg, #095c4f 0%, #00264c 100%); padding-block: clamp(4.8rem, 7vw, 6rem); color: var(--white); }
.hra__inner { display: flex; flex-direction: column; align-items: center; gap: 3.2rem; text-align: center; }
.hra__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; width: 100%; }
.hra__eyebrow { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.15); border-radius: var(--radius-pill); padding: 0.6rem 1.4rem; font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.12rem; text-transform: uppercase; color: var(--white); }
.hra__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.2rem, 5vw, 4.8rem); line-height: 1.2; color: var(--white); }
.hra__text { max-width: 82rem; font-size: 1.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.hra__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4rem; }
.hra__card { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; min-width: 16rem; padding: 3.2rem; background: rgba(255, 255, 255, 0.1); border: var(--border-width) solid rgba(255, 255, 255, 0.2); border-radius: 1.6rem; }
.hra__card-amount { font-family: var(--font-head); font-weight: 700; font-size: 4.8rem; line-height: 1; color: var(--white); }
.hra__card-label { font-family: var(--font-body); font-weight: 600; font-size: 1.6rem; color: var(--white); }

/* Broker "Get Contracted" — intro copy + form placeholder (form embed to come). */
.bk-form { border-top: var(--border-width) solid #d4dcde; padding-block: clamp(6.4rem, 10vw, 11.2rem); }
.bk-form__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 4.8rem; }
.bk-form__head { display: flex; flex-direction: column; align-items: flex-start; gap: 3.2rem; width: 100%; }
.bk-form__titlegroup { display: flex; flex-direction: column; gap: 2.4rem; width: 100%; }
.bk-form__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.2rem, 5vw, 4.8rem); line-height: 1.2; color: var(--dark-navy); }
.bk-form__text { font-size: 1.8rem; line-height: 1.5; color: var(--body-copy); }
.bk-form__placeholder { width: 100%; min-height: clamp(44rem, 60vw, 72.8rem); background: var(--white); border: var(--border-width) solid #15b8ad; border-radius: 3rem; }
/* FEMA SEP Updates — "Hello Broker Partners," intro. */
.fema-intro { --tagline-bg: #e0f2f0; background: var(--surface-tan); padding-block: clamp(5.6rem, 9vw, 8rem); }
.fema-intro__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.fema-intro__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.2rem, 4.5vw, 4.8rem); line-height: 1.2; color: var(--dark-navy); }
.fema-intro__body { display: flex; flex-direction: column; gap: 1.6rem; }
.fema-intro__body p { font-size: 1.8rem; line-height: 1.5; color: var(--body-copy); }

/* FEMA SEP Updates — "Active Declarations" card list. */
.fema-decl { background: var(--white); padding-block: clamp(5.6rem, 9vw, 8rem); }
.fema-decl__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 3.2rem; }
.fema-decl__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.8rem, 3.6vw, 4rem); line-height: 1.2; color: var(--dark-navy); }
.fema-decl__list { width: 100%; display: flex; flex-direction: column; gap: 2.4rem; }
.decl-card { width: 100%; display: flex; flex-direction: column; gap: 2.4rem; padding: 3.2rem; background: var(--white); border: var(--border-width) solid rgba(18, 46, 56, 0.08); border-radius: 1.6rem; box-shadow: 0 0.2rem 0.4rem rgba(18, 46, 56, 0.04); }
.decl-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem 2.4rem; width: 100%; flex-wrap: wrap; }
.decl-card__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.decl-card__title { font-family: var(--font-head); font-weight: 700; font-size: 2rem; line-height: 1.3; color: var(--dark-navy); }
.decl-card__badge { display: inline-flex; align-items: center; background: #e0f2f0; color: #0b8d85; font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; padding: 0.4rem 1rem; border-radius: var(--radius-pill); }
.decl-card__btn { flex: none; }
.decl-card__details { margin: 0; display: flex; flex-direction: column; gap: 1.2rem; width: 100%; }
.decl-card__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.decl-card__row dt { margin: 0; font-size: 1.4rem; line-height: 1.5; color: rgba(18, 46, 56, 0.55); flex: none; }
.decl-card__row dd { margin: 0; font-size: 1.4rem; line-height: 1.5; font-weight: 600; color: var(--ink-teal); text-align: right; }

/* FEMA SEP Updates — "Eligibility Requirements" bullet list. */
.fema-elig { background: var(--surface-tan); padding-block: clamp(5.6rem, 9vw, 8rem); }
.fema-elig__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 3.2rem; }
.fema-elig__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.8rem, 3.6vw, 4rem); line-height: 1.2; color: var(--dark-navy); }
.fema-elig__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.fema-elig__list li { position: relative; padding-left: 1.8rem; font-size: 1.6rem; line-height: 1.5; color: var(--body-copy); }
.fema-elig__list li::before { content: ""; position: absolute; left: 0; top: 0.7rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #0b8d85; }

/* Training — upcoming events: month calendar (JS) + grouped list. */
.tr-events { background: var(--surface-tan); padding-block: clamp(5.6rem, 9vw, 9rem); }
.tr-events__grid { display: grid; grid-template-columns: 1fr; gap: clamp(3.2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 1200px) { .tr-events__grid { grid-template-columns: minmax(0, 76rem) minmax(0, 1fr); } }

/* Calendar card (rendered by initTrainingCalendar); full width is 760px. */
.tr-cal { width: 100%; max-width: 76rem; background: var(--white); border: var(--border-width) solid #d4dcde; border-radius: 1.2rem; overflow: hidden; align-self: start; }
.tr-cal:empty { min-height: 40rem; }
.tr-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; background: var(--navy-bg); color: var(--white); padding: 1.4rem 1.6rem; }
.tr-cal__title { font-family: var(--font-head); font-weight: 700; font-size: 1.8rem; }
.tr-cal__nav { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border: 0; background: transparent; color: var(--white); font-size: 2rem; line-height: 1; cursor: pointer; border-radius: 999px; }
.tr-cal__nav:hover { background: rgba(255, 255, 255, 0.14); }
.tr-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.tr-cal__dow { padding: 1rem 0.8rem; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; color: rgba(18, 46, 56, 0.5); border-bottom: var(--border-width) solid #eef1f2; }
.tr-cal__cell { min-height: 7.2rem; padding: 0.8rem; border-right: var(--border-width) solid #eef1f2; border-bottom: var(--border-width) solid #eef1f2; font-size: 1.4rem; color: var(--ink-teal); }
.tr-cal__grid > :nth-child(7n) { border-right: 0; }
.tr-cal__cell.is-empty { background: #fafbfb; }
.tr-cal__daynum { display: block; line-height: 1.1; }
.tr-cal__cell.is-today .tr-cal__daynum { color: var(--persian-green); font-weight: 700; }
.tr-cal__ev { display: block; margin-top: 0.4rem; font-size: 1.05rem; line-height: 1.25; text-decoration: none; }
.tr-cal__ev:hover { text-decoration: underline; }

/* Grouped list */
.tr-list { display: flex; flex-direction: column; gap: clamp(2.4rem, 4vw, 3.6rem); }
.tr-list__month { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-teal); text-align: center; padding-bottom: 1.6rem; border-bottom: var(--border-width) solid #d4dcde; }
.tr-list__events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.4rem; }
.tr-list__empty { font-size: 1.6rem; color: rgba(18, 46, 56, 0.6); }
.tr-event { display: flex; flex-direction: column; gap: 0.6rem; }
.tr-event__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 0; font-size: 1.3rem; color: rgba(18, 46, 56, 0.6); }
.tr-event__date, .tr-event__time { display: inline-flex; align-items: center; gap: 0.5rem; }
.tr-event__title { font-weight: 700; font-size: 1.6rem; line-height: 1.4; color: var(--science-blue); text-decoration: none; }
.tr-event__title:hover { text-decoration: underline; }

/* Single training-event detail page. */
.trev-hero { background: var(--surface-tan); padding-block: clamp(4.8rem, 8vw, 8rem) clamp(3.2rem, 5vw, 4.8rem); }
.trev-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.trev-chip { display: inline-flex; align-items: center; padding: 0.5rem 1.4rem; border-radius: var(--radius-pill); background: var(--trev-color, var(--persian-green)); color: var(--white); font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; }
.trev-hero__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.2rem, 5vw, 5.2rem); line-height: 1.15; color: var(--dark-navy); max-width: 84rem; }
.trev-hero__meta { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; margin: 0; font-size: 1.6rem; color: rgba(18, 46, 56, 0.7); }
.trev-hero__metaitem { display: inline-flex; align-items: center; gap: 0.8rem; }

.trev-detail { background: var(--white); padding-block: clamp(4rem, 7vw, 7.2rem); }
.trev-detail__grid { display: grid; grid-template-columns: 1fr; gap: clamp(3.2rem, 5vw, 5.6rem); align-items: start; }
@media (min-width: 900px) { .trev-detail__grid { grid-template-columns: minmax(0, 1fr) 34rem; } }
.trev-detail__main { font-size: 1.7rem; line-height: 1.6; color: var(--body-copy); }
.trev-detail__main > * + * { margin-top: 1.6rem; }
.trev-detail__main h2, .trev-detail__main h3 { font-family: var(--font-head); font-weight: 700; color: var(--dark-navy); line-height: 1.25; margin-top: 3.2rem; }
.trev-detail__main h2 { font-size: 2.6rem; }
.trev-detail__main h3 { font-size: 2.1rem; }
.trev-detail__main ul, .trev-detail__main ol { padding-left: 2.2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.trev-detail__main ul { list-style: disc; }
.trev-detail__main ol { list-style: decimal; }
.trev-detail__main a { color: var(--science-blue); text-decoration: underline; word-break: break-word; }
.trev-detail__main strong { color: var(--ink-teal); }
.trev-detail__main img { max-width: 100%; height: auto; border-radius: 1.2rem; }

.trev-detail__side { display: flex; flex-direction: column; gap: 2rem; }
.trev-card { display: flex; flex-direction: column; gap: 2.4rem; padding: clamp(2.4rem, 3vw, 3.2rem); background: var(--white); border: var(--border-width) solid rgba(18, 46, 56, 0.1); border-radius: 1.6rem; box-shadow: 0 0.4rem 1.2rem rgba(18, 46, 56, 0.05); }
.trev-card__register { width: 100%; }
.trev-card__facts { margin: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.trev-card__fact dt { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(18, 46, 56, 0.5); }
.trev-card__fact dd { margin: 0.4rem 0 0; font-size: 1.6rem; color: var(--ink-teal); }
.trev-card__block { display: flex; flex-direction: column; gap: 1.2rem; padding-top: 2rem; border-top: var(--border-width) solid rgba(18, 46, 56, 0.08); }
.trev-card__label { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(18, 46, 56, 0.5); }
.trev-person { display: flex; align-items: center; gap: 1.2rem; }
.trev-person + .trev-person { margin-top: 0.4rem; }
.trev-person__avatar, .trev-person__logo { flex: none; width: 4.8rem; height: 4.8rem; overflow: hidden; background: #eef2f2; display: flex; align-items: center; justify-content: center; }
.trev-person__avatar { border-radius: 50%; }
.trev-person__logo { border-radius: 1rem; }
.trev-person__avatar img { width: 100%; height: 100%; object-fit: cover; }
.trev-person__logo img { width: 100%; height: 100%; object-fit: contain; padding: 0.4rem; }
.trev-person__meta { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.trev-person__name { font-weight: 700; font-size: 1.5rem; color: var(--ink-teal); }
.trev-person__role { font-size: 1.3rem; color: rgba(18, 46, 56, 0.6); }
.trev-person__link { font-size: 1.3rem; color: var(--science-blue); text-decoration: none; word-break: break-word; }
.trev-person__link:hover { text-decoration: underline; }
.trev-detail__back { align-self: flex-start; }

/* Register an Event — "Event Request Form" intro + form box (reuses .bk-form__embed). */
.rae-form { --tagline-bg: #e0f2f0; background: var(--surface-tan); padding-block: clamp(5.6rem, 9vw, 11.2rem); }
.rae-form__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 4rem; }
.rae-form__head { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; max-width: 81.5rem; }
.rae-form__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.8rem, 3.5vw, 3.2rem); line-height: 1.2; color: var(--dark-navy); }
.rae-form__body { display: flex; flex-direction: column; gap: 1.6rem; }
.rae-form__body p { font-size: 1.8rem; line-height: 1.5; color: var(--body-copy); }
.rae-form__body a { color: var(--science-blue, #005fc0); font-weight: 600; text-decoration: underline; word-break: break-word; }

.bk-form__embed { width: 100%; background: var(--white); border: var(--border-width) solid #15b8ad; border-radius: 3rem; padding: clamp(2.4rem, 4vw, 4rem); }
/* Fluent Forms step nav buttons inside the box — restyled to match the site's
   pill buttons. Scoped to .bk-form__embed so no other Fluent Forms are affected.
   Next / Submit = gradient pill; Previous = outline. Tweak values freely. */
.bk-form__embed .ff-btn { font-family: var(--font-body); font-weight: 600; font-size: 1.6rem; line-height: 1.5; padding: 1.3rem 2.8rem; border-radius: var(--radius-pill); border: var(--border-width) solid transparent; cursor: pointer; transition: filter 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
.bk-form__embed .ff-btn-next,
.bk-form__embed .ff-btn-submit { background: var(--brand-gradient); color: var(--white); }
.bk-form__embed .ff-btn-next:hover,
.bk-form__embed .ff-btn-submit:hover { filter: brightness(1.07); }
.bk-form__embed .ff-btn-prev { background: transparent; color: var(--ink-teal); border-color: var(--ink-teal); }
.bk-form__embed .ff-btn-prev:hover { background: rgba(18, 46, 56, 0.06); }

/* For Providers hero: same .bk-hero shell, but plain tan (no line-art),
   a tagline + bigger heading + a disclaimer note. */
.bk-hero--providers { --tagline-bg: #e1f2ef; }
.bk-hero--providers::before { content: none; }
.bk-hero__titlegroup { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.bk-hero--providers .bk-hero__title { font-size: clamp(4rem, 7vw, 6.4rem); line-height: 1.15; }
.bk-hero--providers .bk-hero__copy { gap: 2.4rem; }
.bk-hero--providers .bk-feature__title { font-size: 2.2rem; }
.bk-hero--providers .bk-feature__desc { font-size: 1.5rem; }
.bk-hero__note { font-size: 1.4rem; line-height: 1.5; color: rgba(18, 46, 56, 0.6); text-align: center; max-width: 72rem; }

/* Certification / Enrollment hero: let the head span full width so the tabs
   stay on one line; cap only the subtitle. */
.bk-hero--cert .bk-hero__head,
.bk-hero--enroll .bk-hero__head,
.bk-hero--training .bk-hero__head,
.bk-hero--str .bk-hero__head,
.bk-hero--rae .bk-hero__head,
.bk-hero--fema .bk-hero__head,
.bk-hero--resources .bk-hero__head { max-width: none; }

/* Resources hero: bespoke in-page anchor links that wrap across rows. */
.res-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 3.2rem; max-width: 116.8rem; }

/* Resources page — reusable document-card section (eyebrow + copy + card grid). */
.res-sec { --tagline-bg: #e0f2f0; background: rgba(255, 255, 255, 0.8); border-bottom: var(--border-width) solid #d4dcde; padding-block: clamp(6.4rem, 10vw, 11.2rem); scroll-margin-top: 10rem; }
.res-sec__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.res-sec__head { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; max-width: 80rem; }
.res-sec__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.8rem, 3.6vw, 3.2rem); line-height: 1.2; color: var(--dark-navy); }
.res-sec__text { font-size: 1.8rem; line-height: 1.5; color: var(--body-copy); }
.res-sec__cards { display: flex; flex-wrap: wrap; gap: 2.4rem; width: 100%; }
.res-sec__cards .doc-card { flex: 1 1 28rem; max-width: 30rem; }
.res-sec__cards--grid4 { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
.res-sec__cards--grid4 .doc-card { flex: none; width: 100%; max-width: none; }
@media (min-width: 600px) { .res-sec__cards--grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .res-sec__cards--grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#printable-enrollment-resources,
#star-ratings,
#customizable-sales-materials,
#flyers { background: #fbf6f4; }
.bk-hero--cert .bk-hero__text,
.bk-hero--training .bk-hero__text { max-width: 64rem; }
.bk-hero--enroll .bk-hero__copy { max-width: 80rem; }

/* ===================== MEDICARE ADVANTAGE HMO: HERO ===================== */
/* Centered heading + 2 buttons, then a 3-photo staggered collage, over the
   mountain line-art. Tan body. */
.ma-hero {
  --tagline-bg: #e0f2f0;
  position: relative;
  isolation: isolate;
  overflow-x: clip;   /* collage shadows can graze the viewport edge on mobile */
  padding-block: clamp(4.8rem, 9vw, 11.2rem) clamp(5.6rem, 9vw, 11.2rem);
}
.ma-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("images/ma-hero-mountains.png") no-repeat bottom center / 100% auto;
  pointer-events: none;
}
.ma-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4rem, 6vw, 8rem);
}
.ma-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  max-width: 84rem;
}
.ma-hero__copy { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; text-align: center; }
.ma-hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(3.6rem, 6vw, 5.6rem);
  line-height: 1.2;
  color: var(--dark-navy);
}
.ma-hero__text { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); max-width: 68rem; }
.ma-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; }
.ma-hero .btn--outline-ink { font-weight: 600; }

/* 3-photo collage (absolute %-positioned in a 1280x768 stage) */
.ma-hero__collage { position: relative; width: 100%; aspect-ratio: 1280 / 768; }
.ma-collage__item {
  position: absolute;
  margin: 0;
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 2rem 2.4rem -0.4rem rgba(0, 0, 0, 0.08), 0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.03);
}
.ma-collage__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ma-collage__center {
  left: 27.66%;
  right: 27.66%;
  top: 0;
  aspect-ratio: 572 / 604;
  z-index: 1;
  box-shadow: 0 1.2rem 1.6rem -0.4rem rgba(0, 0, 0, 0.08), 0 0.4rem 0.6rem -0.2rem rgba(0, 0, 0, 0.03);
}
.ma-collage__right { left: 65.78%; right: 0; top: 10.81%; aspect-ratio: 1; z-index: 2; }
.ma-collage__left { left: 0; right: 62.5%; top: 43.75%; aspect-ratio: 512 / 384; z-index: 3; }

/* C-SNP hero: same head/bg, different collage — left is square, right is
   landscape, and the center photo sits ON TOP of the two side photos. */
.csnp-hero .ma-collage__center { z-index: 2; }
.csnp-hero .ma-collage__left { left: 0; right: 62.58%; top: 31.9%; aspect-ratio: 1; z-index: 1; }
.csnp-hero .ma-collage__right { left: 62.58%; right: 0; top: 10.42%; aspect-ratio: 512 / 384; z-index: 1; }

/* ===================== C-SNP: QUALIFYING CONDITIONS =================== */
.qualify {
  --tagline-bg: #edd9cd;
  background: #fbf6f4;
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.qualify__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(3.2rem, 5vw, 4rem); }
.qualify__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 76.8rem; }
.qualify__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); max-width: 48rem; }
.qualify__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 3.2rem; width: 100%; }
.qualify-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: rgba(237, 217, 205, 0.3);
  border: var(--border-width) solid #edd9cd;
  border-radius: 1.6rem;
  padding: 2.4rem;
}
.qualify-card__title { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; line-height: 1.4; color: var(--dark-navy); }
.qualify-card__text { font-size: 1.6rem; line-height: 1.5; color: var(--body-copy); }

@media (min-width: 768px) { .qualify__grid { grid-template-columns: repeat(3, 1fr); } }

/* ===================== "HOW IT WORKS" + SPLIT CARD ===================== */
/* Section header (title | intro) + a big content|image card. White + scallops. */
.howto {
  --tagline-bg: #e0f2f0;
  background: var(--white);
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
/* HMO + C-SNP "how it works" (both reuse .howto). White field, so the wave art
   shows as-is; multiply is a no-op on white but kept consistent. */
.howto {
  --wave-img: url("images/waves4.png");
  --wave-blend: multiply;
}
.howto__inner { display: flex; flex-direction: column; gap: clamp(4rem, 6vw, 8rem); }
.howto__head { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
.howto__head-left { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.howto__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); }
.howto__intro { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); }

.split-card {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--white);
  border: var(--border-width) solid #d4dcde;
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem rgba(18, 46, 56, 0.08);
}
.split-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.2rem;
  padding: clamp(2.8rem, 4vw, 4.8rem);
}
.split-card__top { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.split-card__copy { display: flex; flex-direction: column; gap: 2.4rem; }
.split-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.8rem, 3.6vw, 4rem);
  line-height: 1.2;
  color: var(--dark-navy);
}
.split-card__text { font-size: 1.6rem; line-height: 1.55; color: var(--body-copy); }
.split-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; }
.split-card__link { color: var(--ink-teal); font-size: 1.6rem; }
.split-card__media { margin: 0; min-height: 28rem; }
.split-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .howto__head { grid-template-columns: 1fr 1fr; gap: clamp(4rem, 6vw, 10rem); }
  .csnp-understand .howto__head { align-items: end; }   /* intro bottom-aligns with the heading */
  .split-card { grid-template-columns: 1fr 1fr; min-height: 64rem; }
}

/* ===================== HMO vs ORIGINAL MEDICARE TABLE ================== */
/* Comparison table on the teal section, faint line-art, zebra (white on teal). */
.hmo-compare {
  --tagline-bg: #92d2cb;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #e1f2f0;
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.hmo-compare::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("images/coverage-pattern.png") repeat-y top center / 100% auto;
  opacity: 0.45;
  pointer-events: none;
}
.hmo-compare__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3.2rem, 5vw, 5rem);
}
.hmo-compare__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  max-width: 76.8rem;
}
.hmo-compare__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); }
.hmo-compare__table-wrap { width: 100%; max-width: 102.4rem; overflow-x: auto; }
.hmo-table { width: 100%; min-width: 46rem; border-collapse: separate; border-spacing: 0; }
.hmo-table th,
.hmo-table td { padding: 1.8rem 1.6rem; vertical-align: middle; }
.hmo-table thead th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.8rem;
  color: var(--ink-teal);
  text-align: center;
}
.hmo-table tbody th {
  text-align: left;
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--ink-teal);
}
.hmo-table tbody td { text-align: center; }
/* zebra: odd rows are white rounded bars over the teal */
.hmo-table tbody tr:nth-child(odd) th,
.hmo-table tbody tr:nth-child(odd) td { background: var(--white); }
.hmo-table tbody tr:nth-child(odd) th { border-radius: 1rem 0 0 1rem; }
.hmo-table tbody tr:nth-child(odd) td:last-child { border-radius: 0 1rem 1rem 0; }
.hmo-compare__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.6rem 2.4rem;
}
.hmo-compare__link { color: var(--ink-teal); font-size: 1.6rem; }

@media (min-width: 768px) {
  .hmo-table th,
  .hmo-table td { padding: 2.4rem; }
  .hmo-table thead th { font-size: 2rem; }
  .hmo-table thead th:first-child { width: 44rem; }
}

/* ===================== OUR APPROACH + BENEFITS BENTO ==================== */
/* Tan section: reverse split-card (image left) + a 4-card benefits bento. */
.approach {
  --tagline-bg: #e0f2f0;
  background: #fbf6f4;
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.approach__inner { display: flex; flex-direction: column; gap: clamp(4rem, 6vw, 8rem); }
.approach__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; max-width: 56rem; }

/* White variant (C-SNP): white section over faint line-art, white bento cards */
.approach--lines {
  background: var(--white);
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.approach--lines::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("images/coverage-pattern.png") repeat-y top center / 100% auto;
  opacity: 0.5;
  pointer-events: none;
}
.approach--lines .approach__inner { position: relative; z-index: 1; }
.approach--lines .bento-card { background: var(--white); border-color: #d4dcde; }
.split-card--reverse .split-card__content { padding-inline: clamp(2.8rem, 5vw, 8rem); }

/* Benefits bento */
.benefits { display: flex; flex-direction: column; align-items: center; gap: 3.2rem; }
.benefits__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.4;
  color: var(--dark-navy);
  text-align: center;
  max-width: 40rem;
}
.bento { display: flex; flex-direction: column; gap: 3.2rem; width: 100%; }
.bento-card {
  background: rgba(237, 217, 205, 0.3);
  border: var(--border-width) solid #edd9cd;
  border-radius: 1.6rem;
  overflow: hidden;
}
.bento-card__body { display: flex; flex-direction: column; gap: 1.6rem; padding: 3.2rem; }
.bento-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.3;
  letter-spacing: -0.032rem;
  color: var(--dark-navy);
}
.bento-card__text { font-size: 1.8rem; line-height: 1.5; color: var(--body-copy); opacity: 0.6; }
.bento-card__media { position: relative; margin: 0; min-height: 22rem; overflow: hidden; }
.bento-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento-card--media-top { display: flex; flex-direction: column; }
.bento-card--media-top .bento-card__media { flex: 1 1 auto; }
.bento-card--split .bento-card__media { min-height: 24rem; }

@media (min-width: 1024px) {
  .bento { display: grid; grid-template-columns: 384fr 864fr; align-items: stretch; }
  .bento__primary .bento-card__media { min-height: 41.6rem; }
  .bento__col { display: flex; flex-direction: column; gap: 3.2rem; }
  .bento__col > .bento-card--split { flex: 1 1 auto; }   /* Eastern grows to fill the column */
  .bento__pair { display: flex; gap: 3.2rem; flex: 0 0 auto; }   /* pair sits at natural height */
  .bento__pair > .bento-card { flex: 1 1 0; }
  .bento-card--split { display: flex; flex-direction: row; align-items: stretch; }
  .bento-card--split .bento-card__body { flex: 1 1 0; justify-content: center; }
  .bento-card--split .bento-card__media { flex: 0 0 43.2rem; min-height: 0; }
}

/* ==================== "WHAT'S INCLUDED" BENEFIT CARDS =================== */
/* White section: 3 text+photo cards over one full-width image card. */
.plan-benefits {
  --tagline-bg: #e0f2f0;
  background: var(--white);
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
/* Tan variant (C-SNP): tan section + tan cards */
.plan-benefits--tan { --tagline-bg: #edd9cd; background: #fbf6f4; }
.plan-benefits--tan .benefit-card { background: rgba(237, 217, 205, 0.3); border-color: #edd9cd; }
.plan-benefits--tan .benefit-card--wide { border-color: #d4dcde; }
.plan-benefits__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(4rem, 6vw, 8rem); }
.plan-benefits__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 76.8rem; text-align: center; }
.plan-benefits__subtitle { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); }
.plan-benefits__cards { display: flex; flex-direction: column; gap: 4rem; width: 100%; }
.plan-benefits__row { display: grid; grid-template-columns: 1fr; gap: 3.2rem; }

.benefit-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border-width) solid #d4dcde;
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem rgba(18, 46, 56, 0.08);
}
.benefit-card__content { flex: 1; display: flex; flex-direction: column; gap: 2.4rem; padding: 3.2rem; }
.benefit-card__top { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
.benefit-card__copy { display: flex; flex-direction: column; gap: 1.6rem; }
.benefit-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.3;
  color: var(--dark-navy);
}
.benefit-card__text { font-size: 1.6rem; line-height: 1.5; color: var(--body-copy); }
.benefit-card__link { color: var(--ink-teal); font-weight: 700; font-size: 1.6rem; }
.benefit-card__media { position: relative; margin: 0; height: 22rem; overflow: hidden; }
.benefit-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plan-benefits__row .benefit-card__media { border-top-left-radius: 1.6rem; }

/* Full-width grocery card: image | content */
.benefit-card--wide { box-shadow: 0 0.8rem 1.2rem rgba(18, 46, 56, 0.08); }
.benefit-card--wide .benefit-card__media { height: 26rem; }

@media (min-width: 768px) {
  .plan-benefits__row { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .benefit-card { min-height: 54rem; }
  .benefit-card--wide { flex-direction: row; align-items: stretch; min-height: 40rem; }
  .benefit-card--wide .benefit-card__media { flex: 1 1 0; height: auto; }
  .benefit-card--wide .benefit-card__content { flex: 1 1 0; justify-content: center; padding: 3.2rem clamp(3.2rem, 5vw, 6.4rem); }
}

/* ========================= NEWS & MEDIA: HERO ========================== */
/* Simple centered text hero on the tan page background. */
.news-hero { padding-block: clamp(4rem, 7vw, 6rem); }
.news-hero__inner { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; text-align: center; }
.news-hero__title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(3.6rem, 5vw, 5.2rem);
  line-height: 1.2;
  letter-spacing: -0.052rem;
  color: var(--dark-navy);
  max-width: 70.2rem;
}
.news-hero__text { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); }

/* ========================== FIND CARE: HERO =========================== */
/* Centered tagline + big heading + subtext + 2 buttons, on the tan bg. */
.find-hero {
  --tagline-bg: #e1f2ef;
  padding-block: 6.4rem;
}
@media (min-width: 768px) {
  .find-hero { padding-block: 11.2rem; }
}
.find-hero__inner { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; text-align: center; }
.find-hero__copy { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; }
.find-hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(4rem, 7vw, 6.4rem);
  line-height: 1.15;
  color: var(--dark-navy);
  max-width: 70.8rem;
}
.find-hero__text { font-size: 1.8rem; line-height: 1.55; color: rgba(18, 46, 56, 0.78); max-width: 52rem; }
.find-hero--full .find-hero__title { max-width: none; }
/* Wider subtext column (find-groceries — Figma 697px) */
.find-hero--wide-text .find-hero__text { max-width: 69.7rem; }
/* Formulary Resources hero — Figma subtitle column 768px */
.fr-hero .find-hero__text { max-width: 76.8rem; }
.find-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 2rem; }
.find-hero .btn--outline-ink { font-weight: 600; }
/* Optional ZIP search pill in a centered find-hero (community-resources) */
.find-hero__form { max-width: 56rem; margin-top: 0.8rem; text-align: left; }
.find-hero:has(.find-hero__form) .find-hero__text { max-width: 62rem; }

/* ===================== FIND CARE: PROVIDER DIRECTORY ================== */
/* Centered header + 2 tiles and a wide pharmacy card, white over line-art. */
.find-dir {
  --tagline-bg: #e1f2ef;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--white);
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.find-dir::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("images/coverage-pattern.png") repeat-y top center / 100% auto;
  opacity: 0.5;
  pointer-events: none;
}
.find-dir__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(4rem, 6vw, 8rem); }
.find-dir__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 76.8rem; text-align: center; }
.find-dir__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); color: var(--ink-teal); }
.find-dir__phone { font-weight: 600; font-size: 1.4rem; line-height: 1.5; color: #0b8d85; }
.find-dir__grid { display: flex; flex-direction: column; gap: 3.2rem; width: 100%; }
.find-dir__cards { display: grid; grid-template-columns: 1fr; gap: 3.2rem; }

.dir-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4rem;
  background: var(--white);
  border: var(--border-width) solid #d4dcde;
  border-radius: 1.6rem;
  box-shadow: 0 1.2rem 1.6rem -0.4rem rgba(0, 0, 0, 0.08), 0 0.4rem 0.6rem -0.2rem rgba(0, 0, 0, 0.03);
  padding: 2.4rem;
  min-height: 34rem;
}
.dir-tile__top { display: flex; flex-direction: column; gap: 1.6rem; }
.dir-tile__icon { flex: none; width: 4.8rem; height: 4.8rem; display: flex; align-items: center; justify-content: center; }
.dir-tile__icon img { display: block; width: 3.8rem; height: 3.8rem; }
.dir-tile__copy { display: flex; flex-direction: column; gap: 0.8rem; }
.dir-tile__title { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; line-height: 1.4; color: var(--ink-teal); }
.dir-tile__text { font-size: 1.6rem; line-height: 1.5; color: var(--ink-teal); }
.dir-tile__link { color: var(--ink-teal); }

/* Wide pharmacy card: image + content */
.dir-tile--wide { padding: 0; overflow: hidden; gap: 0; justify-content: stretch; }
.dir-tile--wide .dir-tile__media { position: relative; margin: 0; min-height: 22rem; overflow: hidden; }
.dir-tile--wide .dir-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dir-tile--wide .dir-tile__body { display: flex; flex-direction: column; justify-content: center; gap: 2.4rem; padding: 2.4rem; }
.dir-tile--wide .dir-tile__top { gap: 0.8rem; }
.dir-tile .eyelash { align-self: flex-start; }   /* pill hugs its text, not the card width */

@media (min-width: 768px) {
  .find-dir__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dir-tile--wide { flex-direction: row; }
  .dir-tile--wide .dir-tile__media { flex: 1 1 0; min-height: 0; }
  .dir-tile--wide .dir-tile__body { flex: 1 1 0; }
}

/* ===================== FIND CARE: LEAD PLACEHOLDERS ==================
   Section-title-only sections whose real content is coming soon. Until then
   each reserves its Figma height (nodes 1594:12622 & 2512:13375, 729px) so
   the page doesn't collapse to a bare heading. Drop `min-height` per section
   once its content lands. `--tan` puts it on the tan surface; default is white. */
.find-lead {
  background: var(--white);
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
  min-height: 72.9rem;
}
.find-lead--tan { background: var(--surface-tan); }
.find-lead__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(3.2rem, 5vw, 4.8rem); }
.find-lead__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  max-width: 76.8rem;
  text-align: center;
  --tagline-bg: #e1f2ef;
}
.find-lead__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); color: var(--ink-teal); }
/* Once a section has real content it no longer needs the reserved height. */
.find-lead--filled { min-height: 0; }
.find-lead__embed {
  width: 100%;
  padding-block: 4rem;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.1);
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem -0.4rem rgba(18, 46, 56, 0.08);
}
.find-lead__embed.provider-embed {
  padding-block: 0;
}
.find-lead__frame { display: block; width: 100%; height: 65rem; border: 0; }
.find-lead__frame.provider-frame { height: 148.6rem; }

/* Formulary Resources — online formulary search: left-aligned head + the
   Find-Care iframe treatment (.find-lead__embed / .find-lead__frame). */
.fr-tool { background: var(--white); padding-block: clamp(5.6rem, 9vw, 11.2rem); }
.fr-tool__inner { display: flex; flex-direction: column; gap: clamp(3.2rem, 5vw, 4rem); }
.fr-tool__head { display: flex; flex-direction: column; gap: 1.2rem; }
.fr-tool__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.8rem, 3.6vw, 4rem); line-height: 1.2; color: var(--dark-navy); }
.fr-tool__text { font-size: 1.8rem; line-height: 1.5; color: var(--body-copy); }

/* Formulary Resources — "Formulary book and PA/ST" (tan section, two white cards). */
.fr-book { padding-block: clamp(5.6rem, 9vw, 8rem); }
.fr-book__inner { display: flex; flex-direction: column; gap: clamp(3.2rem, 5vw, 4rem); }
.fr-book__head { display: flex; flex-direction: column; gap: 1.2rem; }
.fr-book__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.8rem, 3.6vw, 4rem); line-height: 1.2; color: var(--dark-navy); }
.fr-book__intro { max-width: 71.3rem; font-size: 1.8rem; line-height: 1.5; color: rgba(18, 46, 56, 0.78); }
.fr-book__grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
.fr-book__col {
  display: flex; flex-direction: column; gap: 1.6rem;
  background: var(--white);
  border-radius: 2.4rem;
  padding: clamp(2.4rem, 4vw, 4rem);
}
.fr-book__col-title { font-family: var(--font-head); font-weight: 700; font-size: 1.8rem; line-height: 1.3; color: var(--ink-teal); }
.fr-book__col-text { font-size: 1.6rem; line-height: 1.5; color: var(--body-copy); }
.fr-book__col .doc-card { width: 100%; max-width: 34.4rem; margin-top: 0.4rem; }
.fr-book__pa { display: flex; flex-direction: column; gap: 1.2rem; }
.fr-book__pa p { font-size: 1.6rem; line-height: 1.6; color: var(--body-copy); }
.fr-book__pa strong { color: var(--ink-teal); }
.fr-book__links { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 0.4rem; }
.fr-book__link { display: inline-flex; align-items: flex-start; gap: 0.8rem; font-size: 1.5rem; font-weight: 600; line-height: 1.4; color: #0b8d85; text-decoration: underline; text-underline-offset: 0.3rem; }
.fr-book__link:hover { color: #096e68; }
.fr-book__link-icon { flex: none; margin-top: 0.2rem; }

.fr-book__note {
  font-size: 1.5rem; line-height: 1.6; color: var(--ink-teal);
  background: #e1f2ef; border-radius: 1.6rem;
  padding: 1.6rem 2rem; margin-top: 0.4rem;
}

@media (min-width: 768px) {
  .fr-book__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .fr-book__col--full { grid-column: 1 / -1; }
}

/* ===================== FIND CARE: OUR NETWORK (list + image) ========= */
.network {
  --tagline-bg: #e1f2ef;
  background: #ebf3f3;                          /* same field as the home About section */
  --wave-img: url("images/waves1.png");         /* new flowing-wave band */
  --wave-blend: multiply;
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.network__inner { display: flex; flex-direction: column; gap: clamp(4rem, 6vw, 8rem); }
/* White variant (investor): white section over faint line-art, no scallop */
.network--lines { background: var(--white); position: relative; isolation: isolate; overflow: clip; }
.network--lines::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("images/coverage-pattern.png") repeat-y top center / 100% auto;
  opacity: 0.5;
  pointer-events: none;
}
.network--lines .network__inner { position: relative; z-index: 1; }
.network__cta { margin-top: 0.8rem; }
.network__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 76.8rem; margin-inline: auto; text-align: center; }
.network__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); color: var(--ink-teal); }
.network__subtitle { font-size: 1.8rem; line-height: 1.55; color: var(--ink-teal); }
.network__body { display: grid; grid-template-columns: 1fr; gap: clamp(4rem, 6vw, 8rem); align-items: center; }
.network__list { list-style: none; margin: 0; padding: 0; }
.network-item { display: flex; flex-direction: column; gap: 1.6rem; padding-block: 2.4rem; border-bottom: var(--border-width) solid #94baba; }
.network-item:last-child { border-bottom: 0; }
.network-item__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.8rem, 3.2vw, 3.2rem); line-height: 1.3; color: var(--ink-teal); }
.network-item__text { font-size: 1.6rem; line-height: 1.5; color: var(--ink-teal); }
.network__media {
  margin: 0;
  aspect-ratio: 1;
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 2rem 2.4rem -0.4rem rgba(0, 0, 0, 0.08), 0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.03);
}
.network__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) { .network__body { grid-template-columns: 616fr 584fr; } }

/* ===================== INVESTOR RELATIONS: GROWTH CARDS =============== */
.growth {
  --tagline-bg: #e1f2ef;
  background: #fbf6f4;                          /* Figma field (tan) — multiplies with the wave art */
  --wave-img: url("images/waves3.png");         /* new flowing-wave band */
  --wave-blend: multiply;
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.growth__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(4rem, 6vw, 8rem); }
.growth__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 76.8rem; text-align: center; }
.growth__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.2rem, 3.6vw, 4rem); line-height: 1.2; color: var(--ink-teal); }
.growth__subtitle { font-size: 1.7rem; line-height: 1.55; color: rgba(18, 46, 56, 0.72); }
.growth__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 3.2rem; width: 100%; }
.growth-card {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 2rem;
  box-shadow: 0 0.4rem 1.2rem rgba(18, 46, 56, 0.04);
  padding: 3.2rem 2.8rem;
}
.growth-card__icon { flex: none; width: 4.8rem; height: 4.8rem; display: flex; align-items: center; justify-content: center; }
.growth-card__icon img { display: block; width: 4.8rem; height: 4.8rem; }
.growth-card__copy { display: flex; flex-direction: column; gap: 1.6rem; }
.growth-card__title { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; line-height: 1.25; color: var(--ink-teal); }
.growth-card__text { font-size: 1.5rem; line-height: 1.55; color: rgba(18, 46, 56, 0.72); }

@media (min-width: 768px) { .growth__grid { grid-template-columns: repeat(3, 1fr); } }

/* ===================== INVESTOR RELATIONS: "BY THE NUMBERS" ========== */
/* Heading (left) | two tan stat cards (right). White. */
.ir-stats { background: var(--white); padding-block: clamp(5.6rem, 9vw, 11.2rem); }
.ir-stats__grid { display: grid; grid-template-columns: 1fr; gap: clamp(4rem, 6vw, 8rem); align-items: start; }
.ir-stats__head { display: flex; flex-direction: column; gap: 2rem; }
.ir-stats__eyebrow { font-weight: 600; font-size: 2rem; line-height: 1.4; color: var(--navy-bg); }
.ir-stats__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.2rem, 3.6vw, 4rem); line-height: 1.2; color: var(--ink-teal); }
.ir-stats__cards { display: grid; grid-template-columns: 1fr; gap: 3.2rem; }
.ir-stat {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: rgba(237, 217, 205, 0.3);
  border: var(--border-width) solid #edd9cd;
  border-radius: 1.6rem;
  padding: 4rem 3.2rem;
}
.ir-stat__num { font-family: var(--font-head); font-weight: 700; font-size: clamp(5.6rem, 7vw, 7rem); line-height: 1.2; color: var(--navy-bg); }
.ir-stat__label { font-weight: 600; font-size: 2rem; line-height: 1.4; color: var(--navy-bg); }
.ir-stat__text { font-size: 1.6rem; line-height: 1.5; color: var(--body-copy); }

@media (min-width: 768px) {
  .ir-stats__grid { grid-template-columns: 341fr 859fr; }
  .ir-stats__cards { grid-template-columns: 1fr 1fr; }
}

/* ===================== INVESTOR RELATIONS: COMPLIANCE ================= */
.compliance {
  --tagline-bg: #e1f2ef;
  background: var(--white);
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.compliance__inner { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; text-align: center; }
.compliance__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.2rem, 4.5vw, 4.8rem); line-height: 1.2; color: var(--ink-teal); max-width: 76.8rem; }
.compliance__text { font-size: 1.8rem; line-height: 1.55; color: var(--ink-teal); max-width: 76.8rem; }
.compliance__badges { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; }
.comp-badge {
  position: relative;
  width: 15.4rem;
  height: 5rem;
  background: url("images/compliance-badge.svg") no-repeat center / 100% 100%;
}
.comp-badge span {
  position: absolute;
  left: 6rem;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: #005fc0;
}

/* ===================== INVESTOR RELATIONS: CONTACT =================== */
.contact {
  --tagline-bg: #e0f2f0;
  background: #fbf6f4;
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.contact__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(4rem, 6vw, 8rem); }
.contact__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 76.8rem; text-align: center; }
.contact__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.2rem, 3.6vw, 4rem); line-height: 1.2; color: var(--ink-teal); }
.contact__subtitle { font-size: 1.8rem; line-height: 1.55; color: var(--ink-teal); }
.contact__body { display: grid; grid-template-columns: 1fr; gap: clamp(2.4rem, 4vw, 4rem); width: 100%; align-items: stretch; }
.contact__cards { display: flex; flex-direction: column; gap: 1.6rem; }
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--white);
  border: var(--border-width) solid var(--navy-100);
  border-radius: 1.6rem;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05);
  padding: 1.6rem;
}
.contact-card__icon { flex: none; width: 3.2rem; height: 3.2rem; }
.contact-card__icon img { display: block; width: 3.2rem; height: 3.2rem; }
.contact-card__info { display: flex; flex-direction: column; gap: 0.8rem; }
.contact-card--office .contact-card__info { gap: 1.6rem; }
.contact-card__copy { display: flex; flex-direction: column; gap: 0.8rem; }
.contact-card__title { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; line-height: 1.4; color: var(--ink-teal); }
.contact-card__text { font-size: 1.6rem; line-height: 1.5; color: var(--ink-teal); }
.contact-card__text a { color: inherit; }
.contact-card__link { color: var(--ink-teal); }
.contact__media {
  margin: 0;
  min-height: 28rem;
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 1.2rem 1.6rem -0.4rem rgba(0, 0, 0, 0.08), 0 0.4rem 0.6rem -0.2rem rgba(0, 0, 0, 0.03);
}
.contact__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .contact__body { grid-template-columns: minmax(0, 40rem) 1fr; }
}

/* ============================== FAQ ACCORDION ========================= */
/* Native <details> accordion: centered head + a list of expandable items. */
.faq { background: var(--white); padding-block: clamp(5.6rem, 9vw, 8rem); }
.faq--tan { background: var(--surface-tan); }
.faq__inner { display: flex; flex-direction: column; align-items: center; gap: 4rem; }
.faq__head { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; max-width: 76.8rem; text-align: center; }
.faq__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.2rem, 4.5vw, 4.8rem); line-height: 1.2; color: var(--ink-teal); }
.faq__subtitle { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); max-width: 46.4rem; }
.faq__subtitle--ink { color: var(--ink-teal); max-width: 55.2rem; }
.faq__list { width: 100%; max-width: 76.8rem; }
.faq-item { border-bottom: var(--border-width) solid var(--navy-100); }
.faq-item:first-child { border-top: var(--border-width) solid var(--navy-100); }
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding-block: 3rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.5;
  color: var(--ink-teal);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item[open] .faq-item__q { padding-bottom: 1.6rem; }
.faq-item__icon { flex: none; width: 2.4rem; height: 2.4rem; color: var(--ink-teal); transition: transform 0.2s ease; }
.faq-item[open] .faq-item__icon { transform: rotate(180deg); }
.faq-item__a { margin: 0; padding-bottom: 3rem; font-size: 1.6rem; line-height: 1.5; color: var(--ink-teal); max-width: 64rem; }
/* Animate the open/close ~300ms ease-out. Uses the native <details> content
   pseudo (progressive enhancement — browsers without ::details-content /
   interpolate-size just toggle instantly). The icon + summary padding transition
   both ways via [open], so everything stays in sync. */
@media (prefers-reduced-motion: no-preference) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item__q { transition: padding-bottom 300ms ease-out; }
  .faq-item__icon { transition: transform 300ms ease-out; }
  .faq-item::details-content {
    height: 0;
    overflow: hidden;
    transition: height 300ms ease-out, content-visibility 300ms allow-discrete;
  }
  .faq-item[open]::details-content { height: auto; }
}

/* ===================== NEWS & MEDIA: PRESS CAROUSEL =================== */
/* 3-up responsive card slider (slide by 1). Reuses .icon-btn + .dots. */
.press { padding-block: 1.2rem clamp(6.4rem, 10vw, 11.2rem); }
.press__carousel { display: flex; flex-direction: column; gap: 3.2rem; }
/* Clip off-screen cards horizontally, but let the card shadows breathe
   vertically (overflow-x: clip + overflow-y: visible avoids a scroll box). */
.press__viewport { overflow-x: clip; overflow-y: visible; }
.press__track { display: flex; gap: 3.2rem; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.press-card {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem rgba(18, 46, 56, 0.06);
}
/* Whole card clickable — stretch the "Read more" link over the card (::after is the arrow icon). */
.press-card__link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.press-card:hover { box-shadow: 0 1.6rem 4rem rgba(18, 46, 56, 0.16); }
@media (prefers-reduced-motion: no-preference) {
  /* Hover lift uses the individual `scale` property so it composes with the
     scroll-reveal's `transform: translateY()` rather than overriding it. */
  .press-card { transition: scale 0.25s ease-out, box-shadow 0.25s ease-out; }
  .press-card:hover { scale: 1.025; z-index: 1; }
  /* On revealed cards the reveal owns `transition`; re-add scale + box-shadow so the
     hover animates too (opacity/transform still drive the staggered reveal-in). */
  .reveal-on .is-revealed .press-card.reveal-item {
    transition: opacity 200ms ease-out, transform 200ms ease-out, scale 250ms ease-out, box-shadow 250ms ease-out;
    transition-delay: var(--reveal-d, 0ms), var(--reveal-d, 0ms), 0ms, 0ms;
  }
}
.press-card__media { position: relative; height: 22rem; margin: 0; overflow: hidden; }
.press-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.press-card__body { flex: 1; display: flex; flex-direction: column; gap: 1.2rem; padding: 2rem 2.4rem 2.4rem; }
.press-card__meta { display: flex; align-items: center; gap: 1.2rem; }
.press-card__badge {
  background: #e0f2f0;
  color: var(--ink-teal);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
}
.press-card__read { color: #4d6b6e; font-size: 1.2rem; }
.press-card__title { font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; line-height: 1.27; color: var(--ink-teal); }
.press-card__text { font-size: 1.4rem; line-height: 1.5; color: var(--body-copy); }
.press-card__link { margin-top: auto; padding-top: 0.4rem; color: var(--ink-teal); font-weight: 600; font-size: 1.4rem; }
.press-card__link::after { width: 1.5rem; height: 1.5rem; }
.press__controls { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; }
.press__nav { display: flex; gap: 1.2rem; }
.icon-btn[disabled] { opacity: 0.4; cursor: default; }
.icon-btn[disabled]:hover { background: var(--white); color: var(--neutral-darkest); }

@media (min-width: 640px) { .press-card { flex: 0 0 calc((100% - 3.2rem) / 2); } }
@media (min-width: 1024px) { .press-card { flex: 0 0 calc((100% - 6.4rem) / 3); } }

/* ===================== NEWS & MEDIA: ARTICLES + GRID ================== */
.articles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4rem, 6vw, 8rem);
  background: #fbf6f4;
  padding-block: 0 clamp(6.4rem, 9vw, 11.2rem);
}
.articles__inner { display: flex; flex-direction: column; gap: clamp(4rem, 6vw, 6.4rem); }

/* Shared media box (cover photos, or contained logos on a bg) */
.article-media { position: relative; margin: 0; overflow: hidden; background: var(--white); }
.article-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-media--logo img { object-fit: contain; padding: clamp(2rem, 4vw, 3.2rem); }
.article-media--brand { background: linear-gradient(180deg, #e0f2f0, #bed9d9); }
.article-media--brand img { object-fit: contain; padding: clamp(2.4rem, 4vw, 3.6rem); }

.article-tag {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  z-index: 1;
  background: #e0f2f0;
  border: var(--border-width) solid rgba(1, 10, 10, 0.15);
  color: var(--dark-navy);
  font-weight: 600;
  font-size: 1.4rem;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.12);
}
.article-tag--left { right: auto; left: 1.6rem; }

/* Featured (most recent) article */
.featured-article {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.125);
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem rgba(18, 46, 56, 0.06);
}
.featured-article__media { aspect-ratio: 16 / 11; }
.featured-article__body {
  background: #e0f2f0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4rem;
  padding: clamp(2.8rem, 4vw, 4.8rem);
}
.featured-article__head { display: flex; flex-direction: column; gap: 1.6rem; }
.article-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.6rem; }
.article-meta__item { display: inline-flex; align-items: center; gap: 0.8rem; font-size: 1.4rem; color: var(--ink-teal); }
.article-meta__icon { flex: none; color: var(--ink-teal); }
.featured-article__title { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; line-height: 1.4; color: var(--dark-navy); }
.featured-article__detail { display: flex; flex-direction: column; gap: 0.8rem; font-size: 1.6rem; line-height: 1.5; }
.featured-article__label { font-weight: 600; color: var(--ink-teal); }
.featured-article__detail > p:not(.featured-article__label) { color: var(--ink-teal); }
.featured-article__overview { color: var(--body-copy) !important; }
.featured-article__cta { align-self: flex-start; }

/* Article grid (2 rows of 3) */
.article-grid { display: grid; grid-template-columns: 1fr; column-gap: 3.2rem; row-gap: clamp(4rem, 6vw, 6.4rem); }
.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem rgba(18, 46, 56, 0.06);
}
/* Whole card clickable — stretch the "Read more" link over the card (::after is the arrow icon). */
.article-card__link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.article-card:hover { box-shadow: 0 1.6rem 4rem rgba(18, 46, 56, 0.16); }
@media (prefers-reduced-motion: no-preference) {
  /* Hover lift uses the individual `scale` property so it composes with the
     scroll-reveal's `transform: translateY()` rather than overriding it. */
  .article-card { transition: scale 0.25s ease-out, box-shadow 0.25s ease-out; }
  .article-card:hover { scale: 1.025; z-index: 1; }
  /* On revealed cards the reveal owns `transition`; re-add scale + box-shadow so the
     hover animates too (opacity/transform still drive the staggered reveal-in). */
  .reveal-on .is-revealed .article-card.reveal-item {
    transition: opacity 200ms ease-out, transform 200ms ease-out, scale 250ms ease-out, box-shadow 250ms ease-out;
    transition-delay: var(--reveal-d, 0ms), var(--reveal-d, 0ms), 0ms, 0ms;
  }
}
.article-card .article-media { aspect-ratio: 405 / 270; }
.article-card__body { flex: 1; display: flex; flex-direction: column; gap: 1.6rem; padding: 2.4rem; }
.article-card__title { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; line-height: 1.4; color: var(--dark-navy); }
.article-card__text { font-size: 1.6rem; line-height: 1.5; color: var(--body-copy); }
.article-card__link { margin-top: auto; padding-top: 0.8rem; color: var(--ink-teal); font-size: 1.6rem; }

/* Pagination (visual only for now) */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; }
.pagination__arrow,
.pagination__page,
.pagination__ellipsis {
  width: 4.8rem;
  height: 4.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.6rem;
  color: #023830;
}
.pagination__arrow { border: var(--border-width) solid var(--navy-300); border-radius: 100px; }
.pagination__arrow:hover { background: var(--navy-300); color: var(--white); }
.pagination__page { border-radius: 0.6rem; }
.pagination__page:hover { background: rgba(24, 91, 195, 0.1); }
.pagination__page.is-active { background: #185bc3; color: var(--white); }
.pagination__page.is-active:hover { background: #185bc3; }

@media (min-width: 640px) {
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .pagination__arrow,
  .pagination__page,
  .pagination__ellipsis { width: 6.4rem; height: 6.4rem; font-size: 1.8rem; }
}
@media (min-width: 768px) {
  .featured-article { grid-template-columns: 1fr 1fr; }
  .featured-article__media { aspect-ratio: auto; }
}
@media (min-width: 1024px) {
  .article-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===================== NUMBERED FEATURE ROW (reusable) ================== */
/* Top divider + "NN  Label" header, then text|image two-column. Reversible.
   White bg with the scallop wave along the bottom. */
.feature-row {
  --tagline-bg: #e0f2f0;
  --wave-img: url("images/waves3.png");   /* new flowing-wave band (white field) */
  --wave-blend: multiply;                  /* on the white section, white waves read as pale mint */
  background: var(--white);
  border-top: var(--border-width) solid #d4dcde;
}
.feature-row__container {
  display: flex;
  flex-direction: column;
  gap: clamp(3.2rem, 5vw, 4.8rem);
  padding-block: clamp(2.8rem, 4vw, 4rem) clamp(5.6rem, 9vw, 11.2rem);
}
.feature-row__info {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  margin: 0;
  font-weight: 600;
  font-size: 1.8rem;
  color: var(--ink-teal);
}
.feature-row__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(4rem, 6vw, 8rem);
  align-items: center;
}
.feature-row__content { display: flex; flex-direction: column; align-items: flex-start; gap: 3.2rem; }
.feature-row__copy { display: flex; flex-direction: column; gap: 2.4rem; }
.feature-row__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); }
.feature-row__text { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); }
.feature-row .btn--outline-ink { font-weight: 600; }
/* Optional two-up contact block (label + gradient button), e.g. Multilingual support. */
.feature-row__contacts { display: flex; flex-wrap: wrap; gap: 2.4rem; width: 100%; }
.feature-row__contact { flex: 1 1 24rem; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.feature-row__contact-label { font-size: 1.8rem; line-height: 1.5; color: var(--body-copy); }
.feature-row__contact .btn { max-width: 100%; white-space: normal; }
.feature-row__media {
  margin: 0;
  aspect-ratio: 1;
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 2rem 2.4rem -0.4rem rgba(0, 0, 0, 0.08), 0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.03);
}
.feature-row__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .feature-row__grid { grid-template-columns: 1fr 1fr; }
  .feature-row--reverse .feature-row__media { order: -1; }
}

/* ======================= BROKER PARTNERS: STATS ========================= */
/* Heading | intro, then a 3-col mix of stat cards and images. Tan body. */
.stats { padding-block: clamp(5.6rem, 9vw, 11.2rem); }
.stats__inner { display: flex; flex-direction: column; gap: clamp(4rem, 6vw, 8rem); }
.stats__head { display: grid; grid-template-columns: 1fr; gap: 2.4rem; align-items: start; }
.stats__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.8rem, 4vw, 4rem);
  line-height: 1.2;
  color: var(--dark-navy);
}
.stats__intro { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); }
.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
  align-items: stretch;
}
.stats__col { display: flex; flex-direction: column; gap: 3.2rem; }
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  text-align: center;
  min-height: 19.6rem;
  padding: 3.2rem;
  background: rgba(237, 217, 205, 0.3);
  border: var(--border-width) solid #edd9cd;
  border-radius: 1.6rem;
}
.stat-card__num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(5.6rem, 8vw, 8rem);
  line-height: 1.1;
  color: var(--dark-navy);
}
.stat-card__label { font-weight: 600; font-size: 2rem; line-height: 1.4; color: var(--navy-bg); }
.stats__media { margin: 0; aspect-ratio: 416 / 277; border-radius: 1.6rem; overflow: hidden; }
.stats__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .stats__head { grid-template-columns: 1fr 1fr; gap: 8rem; }
  .stats__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===================== FOR PROVIDERS: SERVICE-AREA STATS =============== */
/* Centered header + 3 number cards (number, bold label, small desc) on white
   over faint line-art. */
.provider-stats {
  --tagline-bg: #e1f2ef;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--white);
  padding-block: 0 clamp(5.6rem, 9vw, 11.2rem);
}
.provider-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("images/coverage-pattern.png") no-repeat top center / 100% auto;
  pointer-events: none;
}
.provider-stats__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(4rem, 6vw, 5.6rem); }
.provider-stats__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; text-align: center; }
.provider-stats__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.2rem, 4vw, 4rem); line-height: 1.2; color: var(--dark-navy); }
.provider-stats__intro { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); max-width: 72rem; }
.provider-stats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2.4rem; width: 100%; }
.pstat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  background: #fbf6f4;
  border: var(--border-width) solid rgba(18, 46, 56, 0.06);
  border-radius: 2.4rem;
  padding: clamp(3.2rem, 3.5vw, 4rem) clamp(2.8rem, 3vw, 3.6rem);
}
.pstat__num { font-family: var(--font-head); font-weight: 700; font-size: clamp(5.6rem, 7vw, 8rem); line-height: 1; color: var(--dark-navy); }
/* Match the big-number line box so the label/desc rows align across cards */
.pstat__num--text { font-size: clamp(3.4rem, 4.2vw, 4.8rem); line-height: clamp(5.6rem, 7vw, 8rem); }
.pstat__label { font-weight: 700; font-size: 1.7rem; line-height: 1.4; color: var(--dark-navy); }
.pstat__desc { font-size: 1.3rem; line-height: 1.55; color: rgba(18, 46, 56, 0.55); }

@media (min-width: 768px) { .provider-stats__grid { grid-template-columns: repeat(3, 1fr); } }

/* ===================== FOR PROVIDERS: "WHAT YOU GAIN" =============== */
/* 2-col header (title | intro + button) + a 3-up icon feature row. Tan. */
.gain {
  --tagline-bg: #e0f2f0;
  background: #fbf6f4;
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.gain__inner { display: flex; flex-direction: column; gap: clamp(4rem, 6vw, 8rem); }
.gain__head { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.gain__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); }
.gain__head-right { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.gain__intro { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); opacity: 0.8; }
.gain__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 4rem; }
.gain-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.gain-item__icon { flex: none; width: 4.8rem; height: 4.8rem; display: flex; align-items: center; justify-content: center; }
.gain-item__icon img { display: block; width: 3.8rem; height: 3.8rem; }
.gain-item__copy { display: flex; flex-direction: column; gap: 1.6rem; }
.gain-item__title { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; line-height: 1.3; color: var(--dark-navy); }
.gain-item__desc { font-size: 1.6rem; line-height: 1.5; color: var(--body-copy); opacity: 0.75; }

@media (min-width: 768px) {
  /* Tagline top-left; heading and the intro/button block share row 2 so the
     intro aligns with the heading's first line and the button sits below. */
  .gain__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2.4rem, 3vw, 3.2rem);
    row-gap: 2.4rem;
    align-items: start;
  }
  .gain__tag { grid-column: 1; grid-row: 1; justify-self: start; }
  .gain__title { grid-column: 1; grid-row: 2; }
  .gain__head-right { grid-column: 2; grid-row: 2; }
  .gain__grid { grid-template-columns: repeat(3, 1fr); gap: 4rem clamp(4rem, 6vw, 8rem); }
}

/* =============== MEMBER BENEFITS: DENTAL / VISION / HEARING =============== */
/* Centered intro + 3 image cards (each with a small category tag), white bg
   with the mountains wave along the bottom. */
.dvh {
  --wave-img: url("images/comparison-mountains.png");   /* mountains, not scallops */
  --tagline-bg: #e0f2f0;
  background: var(--white);
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.dvh__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4rem, 6vw, 8rem);
}
.dvh__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  max-width: 76.8rem;
}
.dvh__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); }
.dvh__intro { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); text-align: center; }
.dvh__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
  width: 100%;
}
.dvh-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem rgba(18, 46, 56, 0.08);
}
.dvh-card__media { margin: 0; height: 20rem; }
.dvh-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dvh-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 2rem 2.4rem 2.4rem;
}
.dvh-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.27;
  color: var(--ink-teal);
}
.dvh-card__desc { font-size: 1.4rem; line-height: 1.5; color: var(--body-copy); }

@media (min-width: 768px) { .dvh__cards { grid-template-columns: repeat(3, 1fr); } }

/* ===================== MEMBER BENEFITS: EXTRA BENEFITS ==================== */
/* Centered intro + 3 equal-height cards (tag, title, desc, Learn-more link)
   on the tan body, with the scallop wave along the bottom. */
.extra {
  --tagline-bg: #e0f2f0;
  background: #fbf6f4;                          /* explicit tan (= page --surface-tan) so the wave art multiplies against it */
  --wave-img: url("images/waves4.png");         /* new flowing-wave band */
  --wave-blend: multiply;
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.extra__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4rem, 6vw, 8rem);
}
.extra__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  max-width: 76.8rem;
}
.extra__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); }
.extra__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
  width: 100%;
}
.extra-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem rgba(18, 46, 56, 0.08);
}
.extra-card__media { margin: 0; height: 28rem; }
.extra-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.extra-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 2.8rem;
}
.extra-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}
.extra-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.23;
  color: var(--dark-navy);
}
.extra-card__desc { font-size: 1.5rem; line-height: 1.53; color: var(--body-copy); }
.extra-card__link { font-size: 1.5rem; }

@media (min-width: 768px) { .extra__cards { grid-template-columns: repeat(3, 1fr); } }

/* ===================== MEMBER BENEFITS: RESOURCES TABS ==================== */
/* Vertical tabs: active panel (left) + tab menu (right). White section. */
.resources {
  --tagline-bg: #e0f2f0;
  background: var(--white);
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.resources__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4rem, 6vw, 8rem);
}
.resources__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  max-width: 76.8rem;
}
.resources__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); }
.resources__intro { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); text-align: center; }

.resources__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
}
/* Panels (the bordered box) */
.resources__panels {
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid #94a6aa;
  border-radius: 1.9rem;
  padding: clamp(2.8rem, 4vw, 6.4rem);
}
.tab-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.2rem;
}
.tab-panel[hidden] { display: none; }
.tab-panel__top { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.tab-panel__icon { width: 4.8rem; height: 4.8rem; color: var(--ink-teal); }
.tab-panel__icon svg { width: 100%; height: 100%; display: block; }
.tab-panel__text { display: flex; flex-direction: column; gap: 2.4rem; }
.tab-panel__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.8rem, 3.6vw, 4rem);
  line-height: 1.2;
  color: var(--dark-navy);
}
.tab-panel__desc { font-size: 1.6rem; line-height: 1.55; color: var(--body-copy); }
.tab-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }

/* Tab menu */
.resources__menu { display: flex; flex-direction: column; gap: 0.8rem; }
.tab-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  width: 100%;
  padding: 2rem 2rem 2rem 2.4rem;
  background: #f2f5f6;
  border: 0;
  border-radius: 1.2rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease;
}
.tab-link:hover { background: #e8eef0; }
.tab-link__label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.3;
  color: var(--ink-teal);
}
.tab-link__chevron {
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.15);
  color: var(--ink-teal);
}
.tab-link__chevron svg { width: 2rem; height: 2rem; display: block; }
.tab-link[aria-selected="true"] { background: #e0f2f0; }
.tab-link[aria-selected="true"]:hover { background: #d4ecea; }
.tab-link[aria-selected="true"] .tab-link__chevron {
  background: #0b8d85;
  border-color: #0b8d85;
  color: var(--white);
}

@media (min-width: 1024px) {
  .resources__card { grid-template-columns: 1.7fr 1fr; align-items: stretch; }
}

/* ============================================================== BREAKPOINTS
   Mobile-first: everything above is the mobile base. The queries below only
   ever use min-width to progressively enhance for larger screens.
   ========================================================================= */

/* --- Small phones and up: allow simple side-by-side groupings ----------- */
@media (min-width: 480px) {
  .plan-card__actions {
    flex-direction: row;
    align-items: center;
    gap: 2.4rem;
  }
}

/* --- Tablet ------------------------------------------------------------- */
@media (min-width: 768px) {
  :root { --gutter: 4rem; }

  /* Two-column section layouts */
  .about__grid { grid-template-columns: 1fr 1fr; }
  .about__content { padding-inline: clamp(2rem, 6vw, 9rem); }
  .benefits__feature { grid-template-columns: 1fr 1fr; min-height: 60rem; }
  .benefits__media { aspect-ratio: auto; min-height: 100%; }
  .plan-grid { grid-template-columns: 1fr 1fr; }

  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-card--wide { grid-column: 1 / -1; }

  .footer__links-row { grid-template-columns: repeat(3, 1fr); }
}

/* --- Desktop ------------------------------------------------------------ */
@media (min-width: 1024px) {
  :root { --gutter: 6.4rem; }   /* --nav-h moves to the 1280 masthead block (desktop nav reveal) */

  /* Three-up feature row with a wide lead card (≈585 : 300 : 300) */
  .feature-grid { grid-template-columns: 1.9fr 1fr 1fr; }
  .feature-card--wide {
    grid-column: auto;
    flex-direction: row;
    align-items: stretch;
  }
  .feature-card--wide .feature-card__media {
    flex: 0 0 46%;
    aspect-ratio: auto;
  }
  .feature-card--wide .feature-card__body { justify-content: center; }

  /* CTA becomes two columns; image is flush to the (capped) section's right
     edge, with its bottom-left corner rounded per Figma. */
  .cta__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .cta__media {
    min-height: auto;
    align-self: stretch;
    border-bottom-left-radius: 1.6rem;
  }
  /* Image kept at the design's fixed aspect (not stretched to short content),
     so object-cover center-crops it like Figma instead of showing full width. */
  .cta--media-fixed .cta__media { align-self: center; aspect-ratio: 720 / 537; }

  /* Footer: newsletter column beside the link columns */
  .footer__main { flex-direction: row; gap: clamp(4rem, 9vw, 12.8rem); }
  .footer__newsletter { flex: 0 1 50rem; }
  .footer__links { flex: 1 1 0; min-width: 0; }
}

/* Not sticky — scrolls away with the page. Kept positioned with a z-index so it
   still layers above the hero, which is pulled up underneath it on the homepage. */

/* Utility row (hidden on mobile, shown from tablet up) */

/* Pill bar */

/* Primary menu — full-screen overlay on mobile (fills the viewport below the
   header pill, which stays visible so the toggle can close it). */

/* Mobile toggle */

/* Breadcrumbs (page-specific element that sits under the default nav) */
.breadcrumbs { background: var(--surface-tan); font-size: 1.4rem; }
.breadcrumbs__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  padding-block: 0.4rem 0;
}
.breadcrumbs a { color: #4d6b6e; }
.breadcrumbs a:hover { color: var(--dark-navy); }
.breadcrumbs__sep { color: #8ca6a8; }
.breadcrumbs [aria-current="page"] { color: #000; font-weight: 600; }

/* Homepage modifier (transparent over hero). Only the surface/text colors
   change here. The overlap with the hero is done by the
   hero's negative margin-top (see .hero / --nav-h); the white logo is set in the
   homepage markup directly. */

/* Inline nav from desktop up. Kept on the mobile dropdown below 1024px because
   the full menu + utility row only fit comfortably at desktop widths. */
@media (min-width: 1024px) {
        /* On the homepage variant the desktop nav sits over the hero: clear dropdown
     background and white links. */
      }

/* --- Motion preference -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ================= COMMUNITY RESOURCES: search results ================== */
/* Directory listing: results header + category filter chips + two-tone
   resource cards (tan header band / white body: description + contact). */
.cr-results { padding-block: clamp(4rem, 6vw, 6.4rem) clamp(6.4rem, 9vw, 11.2rem); scroll-margin-top: 9rem; }
.cr-results__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 2.6vw, 2.4rem); color: var(--dark-navy); }

.cr-filters { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.4rem; }
.cr-filter {
  font: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink-teal);
  background: #fff;
  border: 0.1rem solid rgba(18, 46, 56, 0.14);
  border-radius: 999px;
  padding: 1rem 2rem;
  cursor: pointer;
}
.cr-filter:hover { border-color: rgba(18, 46, 56, 0.3); }
.cr-filter.is-active { background: var(--science-blue); border-color: var(--science-blue); color: #fff; }

.cr-list { list-style: none; margin: 3.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 2.4rem; }

.res-card {
  background: #fff;
  border: 0.1rem solid rgba(18, 46, 56, 0.1);
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 0.6rem 1.8rem rgba(18, 46, 56, 0.05);
}
.res-card__header {
  background: rgba(237, 217, 205, 0.35);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem 2.4rem;
  padding: 2rem clamp(2.4rem, 3vw, 4rem);
}
.res-card__head-main { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.res-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(224, 168, 120, 0.22);
  color: var(--ink-teal);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
}
.res-tag__dot { flex: none; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #d5895f; }
.res-card__name { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 2.4vw, 2.2rem); line-height: 1.25; color: var(--dark-navy); }
.res-card__org { font-size: 1.4rem; color: #6b8184; }
.res-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; text-align: left; }
.res-card__distance { font-size: 1.4rem; color: #4d6b6e; }
.res-card__visit { display: inline-flex; align-items: center; gap: 0.8rem; padding: 1rem 2rem; font-size: 1.5rem; }
.res-card__visit svg { flex: none; }

.res-card__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 3.2rem;
  padding: 2.4rem clamp(2.4rem, 3vw, 4rem) 3.2rem;
}
.res-card__desc-wrap { min-width: 0; }
.res-card__desc { font-size: 1.4rem; line-height: 1.55; color: #4d6b6e; }
.res-card__desc--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.res-card__readmore { display: inline-block; margin-top: 0.8rem; font-size: 1.4rem; font-weight: 700; color: var(--ink-teal); }

.res-card__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.res-contact { display: flex; align-items: flex-start; gap: 1.2rem; font-size: 1.4rem; }
.res-contact__icon { flex: none; color: #0b8d85; display: flex; margin-top: 0.1rem; }
.res-contact__strong { color: var(--ink-teal); font-weight: 700; }
.res-contact__link { color: #0b8d85; font-weight: 600; }
.res-contact__lines { display: flex; flex-direction: column; gap: 0.4rem; }
.res-contact__addr { color: var(--ink-teal); line-height: 1.45; }

.cr-loadmore { display: flex; justify-content: center; margin-top: 4rem; }
.cr-loadmore[hidden] { display: none; }
.res-card[hidden], .res-card.is-hidden { display: none; }   /* [hidden]/is-hidden must beat the flex item */
.cr-empty { padding: 3.2rem; text-align: center; color: #4d6b6e; font-size: 1.5rem; }

@media (min-width: 768px) {
  .res-card__header { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
  .res-card__meta { align-items: flex-end; text-align: right; margin-left: auto; }
}
@media (min-width: 900px) {
  .res-card__body { grid-template-columns: minmax(0, 1fr) 40rem; }
}

/* ================= COMMUNITY CENTERS: locations grid =================== */
/* 2x2 grid of horizontal location cards (image left / body right) on a white
   section with faint topographic line art anchored in the four corners. */
.cc-locations {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.cc-locations__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cc-deco { position: absolute; width: 55%; height: auto; opacity: 0.7; }
.cc-deco--tl { top: 0; left: 0; }
.cc-deco--tr { top: 0; right: 0; }
.cc-deco--bl { bottom: 0; left: 0; }
.cc-deco--br { bottom: 0; right: 0; }
.cc-locations > .container { position: relative; z-index: 1; }

.cc-locations__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 3.2rem;
}
.loc-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border-width) solid #d4dcde;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 1.2rem 1.6rem -0.4rem rgba(0, 0, 0, 0.08), 0 0.4rem 0.6rem -0.2rem rgba(0, 0, 0, 0.03);
}
.loc-card__media { position: relative; margin: 0; min-height: 20rem; }
.loc-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loc-card__body { flex: 1; display: flex; flex-direction: column; gap: 2rem; padding: 2.8rem; }
.loc-card__content { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.loc-card__title { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; line-height: 1.4; color: var(--ink-teal); }
.loc-card__addr { font-size: 1.6rem; line-height: 1.5; color: rgba(18, 46, 56, 0.78); }
.loc-card__hours {
  display: inline-flex; align-items: center; gap: 0.8rem;
  background: #e1f2ef; color: var(--ink-teal);
  font-size: 1.3rem; font-weight: 600;
  padding: 0.6rem 1.2rem 0.6rem 1rem; border-radius: 999px;
}
.loc-card__dot { flex: none; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #0b8d85; }
.loc-card__link { color: #0b8d85; font-weight: 600; font-size: 1.6rem; }

@media (min-width: 640px) {
  .loc-card { flex-direction: row; align-items: stretch; }
  .loc-card__media { flex: 0 0 44%; min-height: auto; }
  .loc-card__body { flex: 1 1 0; justify-content: space-between; }
}
@media (min-width: 900px) {
  .cc-locations__grid { grid-template-columns: 1fr 1fr; }
}

/* ============= COMMUNITY CENTERS: "What happens" events ================ */
/* Centered head + 2 image-top event cards on the teal tint + scallop wave. */
.cc-events {
  --tagline-bg: #e1f2ef;
  position: relative;
  background: #ecf4f4;                          /* Figma field — multiplies with the wave art */
  --wave-img: url("images/waves4.png");         /* new flowing-wave band */
  --wave-blend: multiply;
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.cc-events__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(3.2rem, 5vw, 5rem); }
.cc-events__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 76.8rem; }
.cc-events__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); color: var(--ink-teal); }
.cc-events__grid { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: 1fr; gap: 3.2rem; }
.event-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 2rem; overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem -0.4rem rgba(18, 46, 56, 0.06);
}
.event-card__media { position: relative; margin: 0; height: 34rem; }
.event-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-card__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 2.4rem; padding: 3.2rem; }
.event-card__content { display: flex; flex-direction: column; gap: 1.6rem; }
.event-card__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.6rem, 3vw, 3.2rem); line-height: 1.3; color: var(--ink-teal); }
.event-card__text { font-size: 1.6rem; line-height: 1.5; color: rgba(18, 46, 56, 0.78); }
.event-card__link { color: #0b8d85; }

@media (min-width: 768px) { .cc-events__grid { grid-template-columns: 1fr 1fr; } }

/* ============= COMMUNITY CENTERS: "Upcoming events" calendar =========== */
.cc-calendar { background: var(--white); padding-block: clamp(5.6rem, 9vw, 11.2rem); scroll-margin-top: 2.4rem; }
.cc-calendar__inner { display: flex; flex-direction: column; gap: 3.2rem; }
.cc-calendar__head { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.cc-calendar__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); color: var(--dark-navy); }

/* Toolbar: date + nav buttons; anchors the datepicker popover */
.cal-toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.cal-toolbar__lead { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.cal-toolbar__date { font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; color: var(--ink-teal); }
.cal-toolbar__clear {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.4rem; border: var(--border-width) solid rgba(18, 46, 56, 0.15);
  border-radius: 9999px; background: var(--white);
  font-family: var(--font-body); font-weight: 600; font-size: 1.4rem; color: var(--ink-teal);
  cursor: pointer; transition: background 0.15s ease;
}
.cal-toolbar__clear:hover { background: var(--surface-tan); }
.cal-toolbar__clear[hidden] { display: none; }
.cal-toolbar__nav { display: flex; gap: 1rem; }
.cal-iconbtn {
  width: 4rem; height: 4rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-width) solid rgba(18, 46, 56, 0.14);
  border-radius: 50%; background: var(--white); color: var(--ink-teal); cursor: pointer;
}
.cal-iconbtn:hover { border-color: rgba(18, 46, 56, 0.32); }

/* Datepicker popover (open by default per design; toggled by the calendar button) */
.datepicker {
  position: absolute; top: calc(100% + 1.2rem); right: 0; z-index: 5;
  width: 30rem;
  display: flex; flex-direction: column; gap: 1.4rem;
  padding: 2rem;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  box-shadow: 0 1.2rem 3.2rem -0.8rem rgba(18, 46, 56, 0.12);
}
.datepicker[hidden] { display: none; }
.datepicker__head { display: flex; align-items: center; justify-content: space-between; }
.datepicker__month { font-family: var(--font-head); font-weight: 700; font-size: 1.8rem; color: var(--ink-teal); }
.datepicker__nav { display: flex; gap: 0.6rem; }
.datepicker__navbtn {
  width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: #e1f2f0; color: #0b8d85; font-size: 1.6rem; cursor: pointer;
}
.datepicker__weekdays, .datepicker__days { display: grid; grid-template-columns: repeat(7, 1fr); }
.datepicker__weekdays { gap: 0; }
.datepicker__weekdays span { text-align: center; font-size: 1.2rem; font-weight: 600; color: rgba(18, 46, 56, 0.5); padding: 0.4rem 0; }
.datepicker__days { gap: 0.2rem; }
.datepicker__days button {
  position: relative;
  aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 50%; cursor: pointer;
  font-size: 1.4rem; color: var(--ink-teal);
}
.datepicker__days button:hover { background: #eef4f3; }
.datepicker__days button.is-muted { color: rgba(18, 46, 56, 0.3); }
.datepicker__days button.is-selected { background: var(--ink-teal); color: #fff; }
.datepicker__days button.is-selected:hover { background: var(--ink-teal); }
.datepicker__dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #0b8d85; }
.datepicker__days button .datepicker__dot { position: absolute; bottom: 0.3rem; left: 50%; transform: translateX(-50%); }
.datepicker__days button.is-selected .datepicker__dot { background: #fff; }
.datepicker__legend { display: flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; color: #0b8d85; }

/* Location filter */
.cal-filter { display: flex; flex-direction: column; gap: 1.2rem; }
.cal-filter__label { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.08rem; text-transform: uppercase; color: rgba(18, 46, 56, 0.6); }
.cal-chips { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.3rem; }
.cal-chip {
  font: inherit; font-size: 1.4rem; font-weight: 600; color: var(--ink-teal);
  background: var(--white); border: var(--border-width) solid rgba(18, 46, 56, 0.14);
  border-radius: 999px; padding: 0.8rem 1.6rem; cursor: pointer;
}
.cal-chip:hover { border-color: rgba(18, 46, 56, 0.32); }
.cal-chip.is-active { background: var(--ink-teal); border-color: var(--ink-teal); color: #fff; }

/* Event cards (horizontal: image left / body right) */
.cal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3.2rem; }
.ev-card[hidden] { display: none !important; }   /* filtered out by the calendar/chips */
.cal-more-wrap { display: flex; justify-content: center; margin-top: 3.2rem; }
.cal-more[hidden] { display: none !important; }   /* .btn is inline-flex, so [hidden] needs !important */
.cal-empty { margin: 1.6rem 0 0; padding: 3.2rem; text-align: center; font-size: 1.6rem; color: var(--body-copy); background: var(--white); border: var(--border-width) solid rgba(18, 46, 56, 0.08); border-radius: 1.6rem; }
.cal-empty[hidden] { display: none; }

/* List / Calendar view toggle */
.cal-viewtoggle { display: inline-flex; gap: 0.4rem; padding: 0.4rem; border-radius: 9999px; }
.cal-viewbtn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.8rem; border: 0; border-radius: 9999px; background: transparent;
  font-family: var(--font-body); font-weight: 600; font-size: 1.4rem; color: var(--ink-teal);
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.cal-viewbtn svg { opacity: 0.6; }
.cal-viewbtn.is-active { background: var(--ink-teal); color: var(--white); }
.cal-viewbtn.is-active svg { opacity: 1; }
.cc-cal-view[hidden] { display: none; }
.cc-cal-view[data-view-panel="list"] { margin-top: 2.4rem; }
.cc-fullcal { margin-top: 2.4rem; }

/* WP FullCalendar (FullCalendar v3) — brand-aligned */
.cc-fullcal .fc { font-family: var(--font-body); font-size: 1.4rem; color: var(--ink-teal); }
.cc-fullcal .fc-toolbar.fc-header-toolbar { margin-bottom: 2rem; align-items: center; flex-wrap: wrap; gap: 1.2rem; }
.cc-fullcal .fc-toolbar h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 3vw, 2.6rem); color: var(--ink-teal); }
.cc-fullcal .fc-button {
  height: auto; padding: 0.8rem 1.4rem; margin: 0; box-shadow: none; text-shadow: none;
  background: var(--white); border: var(--border-width) solid rgba(18, 46, 56, 0.15); border-radius: 9999px;
  color: var(--ink-teal); font-family: var(--font-body); font-weight: 600; font-size: 1.3rem;
}
.cc-fullcal .fc-button:hover { background: var(--surface-tan); }
.cc-fullcal .fc-button.fc-state-active, .cc-fullcal .fc-state-active { background: var(--ink-teal); color: var(--white); border-color: var(--ink-teal); }
.cc-fullcal .fc-button.fc-state-disabled { opacity: 0.4; }
.cc-fullcal .fc-button-group > * { margin: 0 0 0 0.4rem; }
.cc-fullcal .fc-day-header { padding: 1rem 0; font-weight: 700; font-size: 1.2rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(18, 46, 56, 0.55); }
.cc-fullcal .fc-unthemed th, .cc-fullcal .fc-unthemed td, .cc-fullcal .fc-unthemed thead, .cc-fullcal .fc-unthemed tbody, .cc-fullcal .fc-unthemed .fc-divider, .cc-fullcal .fc-unthemed .fc-row, .cc-fullcal .fc-unthemed .fc-popover { border-color: rgba(18, 46, 56, 0.08); }
.cc-fullcal .fc-day-number { padding: 0.6rem 0.9rem; font-size: 1.3rem; color: var(--ink-teal); }
.cc-fullcal .fc-unthemed td.fc-today { background: var(--surface-mint); }
.cc-fullcal .fc-event {
  background: #0b8d85 !important; border-color: #0b8d85 !important; color: var(--white) !important;
  border-radius: 0.6rem; padding: 0.2rem 0.6rem; font-size: 1.2rem; font-weight: 600;
}
.cc-fullcal .fc-event .fc-time { font-weight: 700; }
.cc-fullcal .fc-event:hover { filter: brightness(0.95); }
.cc-fullcal .fc-day-grid-event { margin: 0.3rem 0.5rem 0; }
.cc-fullcal .fc-right { display: none; }   /* month-only: hide the month/week/day view switcher */
.cc-fullcal .cal-filter--cal { margin-bottom: 2.4rem; }

/* ===================== SINGLE EVENT DETAILS ========================== */
.event-hero .eyelash { --tagline-bg: #e1f2ef; }
.event-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(3.2rem, 6vw, 6.4rem); align-items: center; }
.event-hero__media { margin: 0; border-radius: 1.6rem; overflow: hidden; box-shadow: 0 2rem 4.8rem rgba(18, 46, 56, 0.1); aspect-ratio: 1 / 1; }
.event-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* No-featured-image placeholder: white logo centered on a dark panel. object-fit
   contain keeps it centered and uncropped in both the square detail hero and the
   variable-ratio community-centers card. (0,2,1) beats the base `img` rules. */
.event-hero__media img.event-media-logo,
.ev-card__media img.event-media-logo {
  object-fit: contain; box-sizing: border-box;
  background: var(--navy-bg); padding: clamp(2.4rem, 21%, 10rem);
}
@media (min-width: 900px) {
  .event-hero__grid { grid-template-columns: minmax(0, 1fr) 46rem; }
}

.event-body { background: var(--white); padding-block: clamp(4.8rem, 8vw, 8rem); }
.event-body__grid { display: grid; grid-template-columns: 1fr; gap: clamp(3.2rem, 5vw, 6.4rem); }
@media (min-width: 1024px) { .event-body__grid { grid-template-columns: minmax(0, 1fr) 36rem; align-items: start; } }
.event-about__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.6rem, 3.4vw, 3.2rem); color: var(--ink-teal); margin-bottom: 1.6rem; }
.event-about__body { font-size: 1.7rem; line-height: 1.65; color: var(--body-copy); }
.event-about__body p { margin: 0 0 1.4rem; }
.event-about__body p:last-child { margin-bottom: 0; }
.event-about__body h2, .event-about__body h3 { font-family: var(--font-head); font-weight: 700; font-size: 2rem; color: var(--ink-teal); margin: 2.8rem 0 1rem; }
.event-about__body strong { font-weight: 600; }
.event-about__body a { color: var(--science-blue); }

.event-rail__card { display: flex; flex-direction: column; gap: 1.8rem; padding: 2.8rem; background: var(--white); border: var(--border-width) solid rgba(18, 46, 56, 0.1); border-radius: 2rem; box-shadow: 0 0.8rem 2.4rem -0.4rem rgba(18, 46, 56, 0.08); }
@media (min-width: 1024px) { .event-rail__card { position: sticky; top: 2.4rem; } }
.event-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.event-rail__price { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; color: var(--ink-teal); }
.event-rail__badge { flex: none; background: #e1f2ef; color: #0b8d85; font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.02em; text-transform: uppercase; padding: 0.5rem 1.2rem; border-radius: 9999px; }
.event-rail__note { font-size: 1.3rem; line-height: 1.4; color: rgba(18, 46, 56, 0.6); }
.event-rail__divider { height: var(--border-width); background: rgba(18, 46, 56, 0.1); }
.event-rail__row { display: flex; align-items: flex-start; gap: 1.2rem; }
.event-rail__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #e1f2ef; color: #0b8d85; }
.event-rail__rowtext { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.event-rail__label { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.073em; text-transform: uppercase; color: rgba(18, 46, 56, 0.5); }
.event-rail__value { font-family: var(--font-body); font-weight: 600; font-size: 1.5rem; line-height: 1.4; color: var(--ink-teal); overflow-wrap: break-word; }
.event-rail__cta { display: block; width: 100%; margin-top: 0.4rem; padding: 1.5rem; text-align: center; border: 0; border-radius: 9999px; background: linear-gradient(90deg, #1f6fcc, #1fa8b8); color: var(--white); font-family: var(--font-body); font-weight: 600; font-size: 1.6rem; text-decoration: none; transition: opacity 0.2s ease; }
.event-rail__cta:hover { opacity: 0.94; }

.event-reserve { background: var(--surface-tan); padding-block: clamp(4.8rem, 8vw, 8rem); }
.event-reserve__inner { display: flex; flex-direction: column; align-items: center; gap: 3.2rem; }
.event-reserve__head { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; max-width: 60rem; margin-inline: auto; }
.event-reserve__sub { font-size: 1.7rem; line-height: 1.55; color: var(--body-copy); }
.event-reserve__placeholder { width: 100%; max-width: 64rem; padding: 6rem 2.4rem; text-align: center; font-family: var(--font-head); font-weight: 700; color: rgba(18, 46, 56, 0.45); background: var(--white); border: var(--border-width) solid rgba(18, 46, 56, 0.08); border-radius: 2.4rem; }

/* Events Manager booking form — matched to the Contact Us form: fields on a
   white card, clean labels (no EM grey section bars), gradient pill submit. */
.event-reserve__form {
  width: 100%; max-width: 64rem; margin-inline: auto; text-align: left;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 2.4rem;
  box-shadow: 0 0.8rem 2.4rem -0.4rem rgba(18, 46, 56, 0.08);
  padding: clamp(2.8rem, 4vw, 4rem);
}
.event-reserve .em-booking-form { display: flex; flex-direction: column; gap: 2.4rem; text-align: left; }
/* Drop EM's default grey section boxes; render the section heading as a plain
   label like the Contact form (no left accent bar / grey fill). */
.event-reserve .em-booking-form > section,
.event-reserve .em-booking-section { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
.event-reserve .em-booking-section-title {
  padding: 0 !important; margin: 0 0 1.2rem !important; background: transparent !important; border: 0 !important;
  font-family: var(--font-body); font-weight: 700; font-size: 1.5rem; color: var(--ink-teal);
}
/* Session picker (EM tickets table -> option rows) */
.event-reserve .em-tickets, .event-reserve .em-tickets tbody { display: block; width: 100%; }
.event-reserve .em-tickets thead { display: none; }
.event-reserve .em-tickets tr.em-ticket { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; padding: 1.4rem 1.6rem; border: var(--border-width) solid rgba(18, 46, 56, 0.15); border-radius: 1rem; }
.event-reserve .em-tickets tr.em-ticket + tr.em-ticket { margin-top: 1rem; }
.event-reserve .em-tickets td { display: block; padding: 0; border: 0; }
.event-reserve .em-bookings-ticket-table-type { font-family: var(--font-body); font-weight: 600; font-size: 1.5rem; color: var(--ink-teal); }
.event-reserve .em-ticket-name { font-weight: 600; }
.event-reserve .em-ticket-select { border: var(--border-width) solid rgba(18, 46, 56, 0.15); border-radius: 0.8rem; padding: 0.7rem 1rem; font-family: var(--font-body); font-size: 1.4rem; color: var(--ink-teal); background: var(--white); }
/* Single-ticket events: drop EM's "Choose a session" heading + the Spaces
   quantity — a simple RSVP only needs the details fields. The block stays in the
   DOM (display:none) so its quantity still submits its default of 1 space. */
.event-reserve--single .em-booking-form-section-tickets { display: none; }
/* Registration fields */
.event-reserve .em-booking-form-details { display: flex; flex-direction: column; gap: 1.8rem; }
.event-reserve .input-user-field { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; }
.event-reserve .input-user-field label { font-family: var(--font-body); font-weight: 600; font-size: 1.4rem; color: var(--ink-teal); }
/* Registration fields (Name/Email/Phone) — beat EM's pixelbones reset
   `.em.pixelbones.input input` (0,4,1, all !important: 38px height / 4px radius /
   grey border) so the fields match the Contact Us form exactly. The container is
   `.em.pixelbones.input`; each field is `input.input`. */
.event-reserve .em.pixelbones.input input.input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.event-reserve .em.pixelbones.input textarea,
.event-reserve .em.pixelbones.input select {
  width: 100% !important; height: auto !important; box-sizing: border-box !important;
  border: var(--border-width) solid rgba(18, 46, 56, 0.15) !important; border-radius: 1rem !important;
  padding: 1.2rem 1.6rem !important; font-family: var(--font-body) !important; font-size: 1.5rem !important;
  line-height: 1.4 !important; color: var(--ink-teal) !important; background-color: var(--white) !important; box-shadow: none !important;
}
.event-reserve .em.pixelbones.input textarea { min-height: 9.6rem !important; resize: vertical; }
.event-reserve .em.pixelbones.input input.input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.event-reserve .em.pixelbones.input textarea:focus,
.event-reserve .em.pixelbones.input select:focus {
  outline: 0 !important; border-color: #1f6fcc !important; box-shadow: 0 0 0 0.3rem rgba(31, 111, 204, 0.12) !important;
}
.event-reserve .em.pixelbones.input input.input::placeholder,
.event-reserve .em.pixelbones.input textarea::placeholder { color: rgba(18, 46, 56, 0.4); }

/* Selects — the recurring "Select a date" picker (outside .pixelbones) and any
   pixelbones select: Contact-form field + custom down-chevron (overrides EM's
   own chevron on pixelbones selects). */
.event-reserve select,
.event-reserve .em.pixelbones.input select {
  -webkit-appearance: none !important; appearance: none !important; padding-right: 4rem !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22rgba%2818%2C46%2C56%2C0.55%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 1.4rem center !important; background-size: 1.8rem 1.8rem !important; background-color: var(--white) !important;
}
.event-reserve select {
  width: 100%; border: var(--border-width) solid rgba(18, 46, 56, 0.15); border-radius: 1rem;
  padding: 1.2rem 4rem 1.2rem 1.6rem; font-family: var(--font-body); font-size: 1.5rem; color: var(--ink-teal); line-height: 1.4;
}
.event-reserve select:focus { outline: 0; border-color: #1f6fcc; box-shadow: 0 0 0 0.3rem rgba(31, 111, 204, 0.12); }
/* comment field not in the design — must out-specify EM's `.em-booking-form .input-group{display:block!important}` (0,3,0) */
.event-reserve .em-booking-form .input-group.input-field-booking_comment { display: none !important; }
.event-reserve .em-consent-checkbox { display: flex; align-items: flex-start; gap: 1rem; font-family: var(--font-body); font-size: 1.3rem; line-height: 1.45; color: rgba(18, 46, 56, 0.7); }
.event-reserve .em-consent-checkbox input[type="checkbox"] { flex: none; width: 2rem; height: 2rem; margin: 0.1rem 0 0; }
/* Submit */
.event-reserve .em-booking-form-buttons, .event-reserve .em-booking-buttons { display: block; }
/* Beat EM's pixelbones button reset (.em.pixelbones … input[type=submit], all
   !important at 0,4,1) by chaining more of the input's own classes (0,5,1). */
.event-reserve .em-booking-form input.em-form-submit.em-booking-submit.em-button {
  display: block !important; width: 100% !important; height: auto !important; border: 0 !important; border-radius: 9999px !important;
  padding: 1.6rem 2rem !important;
  background: linear-gradient(90deg, #1f6fcc, #1fa8b8) !important; color: var(--white) !important;
  font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 1.6rem !important; line-height: 1.4 !important;
  text-transform: none !important; letter-spacing: normal !important; text-align: center !important;
  cursor: pointer; transition: opacity 0.2s ease;
}
.event-reserve .em-booking-form input.em-form-submit.em-booking-submit.em-button:hover { opacity: 0.94; }
.event-reserve .em-booking-message { margin-top: 1.6rem; padding: 1.4rem 1.6rem; border-radius: 1rem; font-size: 1.5rem; }

/* Heading row: stacked on mobile (head above the toggle), and at ≥1024 the
   toggle moves up onto the heading line, aligned to the right edge. */
.cc-calendar__topbar { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
@media (min-width: 1024px) {
  .cc-calendar__topbar { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 2rem; }
  .cal-toolbar__date { font-size: 2.8rem; }
}
.ev-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 2rem; overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem -0.4rem rgba(18, 46, 56, 0.06);
}
.ev-card__media { position: relative; margin: 0; min-height: 22rem; }
.ev-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-card__tag {
  position: absolute; top: 1.6rem; left: 1.6rem;
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: #e1f2f0; color: var(--ink-teal);
  font-size: 1.3rem; font-weight: 600;
  padding: 0.5rem 0.9rem; border-radius: 0.6rem;
}
.ev-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 3.2rem; }
.ev-card__time { font-size: 2rem; color: var(--neutral-darkest); }
.ev-card__date { font-weight: 700; color: var(--ink-teal); }
.ev-card__date::after { content: " \00b7 "; font-weight: 400; color: rgba(18, 46, 56, 0.4); }
.cc-calendar.is-day-view .ev-card__date { display: none; }   /* redundant when a specific day is chosen (shown in the header) */
.ev-card__title { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; line-height: 1.3; color: var(--ink-teal); margin-bottom: 0.4rem; }
.ev-meta { display: flex; flex-direction: column; gap: 0.4rem; }
.ev-meta__label { font-size: 1.4rem; font-weight: 700; color: var(--ink-teal); }
.ev-meta__value { font-size: 1.5rem; line-height: 1.5; color: rgba(18, 46, 56, 0.78); }
.ev-card__btn {
  margin-top: 0.8rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2.4rem; border-radius: 360px;
  border: var(--border-width) solid #d4dcde; color: var(--ink-teal); font-weight: 600; font-size: 1.5rem;
}
.ev-card__btn:hover { background: #f4f8f7; }

@media (min-width: 768px) {
  .ev-card { flex-direction: row; align-items: stretch; }
  .ev-card__media { flex: 0 0 46%; min-height: auto; }
  .ev-card__body { flex: 1 1 0; justify-content: center; padding: 4rem; }
}
@media (max-width: 560px) {
  .datepicker { right: auto; left: 0; width: min(30rem, 100%); }
}

/* ============ UNDERSTANDING MEDICARE: four parts (icon cards) ========== */
.med-parts { background: var(--white); padding-block: clamp(5.6rem, 9vw, 11.2rem); }
.med-parts__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(4rem, 6vw, 8rem); }
.med-parts__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 76.8rem; }
.med-parts__title { font-size: clamp(3.2rem, 3.6vw, 4rem); color: var(--ink-teal); }
.med-parts__subtitle { font-size: 1.7rem; line-height: 1.55; color: rgba(18, 46, 56, 0.72); text-align: center; }
.med-parts__grid {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: 1fr; gap: 3.2rem;
}
.part-card {
  display: flex; flex-direction: column; gap: 1.6rem;
  background: var(--surface-tan);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  padding: 2.8rem 2.4rem;
  box-shadow: 0 0.4rem 1.2rem rgba(18, 46, 56, 0.04);
}
.part-card__icon { flex: none; width: 4.8rem; height: 4.8rem; display: flex; align-items: center; justify-content: center; }
.part-card__icon img { display: block; width: 4.8rem; height: 4.8rem; }
.part-card__copy { display: flex; flex-direction: column; gap: 1.6rem; }
.part-card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; line-height: 1.3; color: var(--ink-teal); }
.part-card__text { font-size: 1.3rem; line-height: 1.5; color: rgba(18, 46, 56, 0.7); text-wrap: pretty; }

@media (min-width: 600px) { .med-parts__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .med-parts__grid { grid-template-columns: repeat(4, 1fr); } }

/* ============ UNDERSTANDING MEDICARE: enrollment tabs ================== */
/* Centered head + horizontal tab menu + panel (white text card / image),
   on the teal tint with the scallop wave. Reuses [data-tabs] JS. */
.enroll-tabs {
  --tagline-bg: #e1f2ef;
  position: relative;
  background: #ecf4f4;                          /* Figma field */
  --wave-img: url("images/waves5.png");         /* pre-composited teal band -> normal blend (not multiply) */
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.enroll-tabs__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(4rem, 6vw, 8rem); }
.enroll-tabs__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 76.8rem; }
.enroll-tabs__title { font-size: clamp(3.2rem, 3.6vw, 4rem); color: var(--ink-teal); }
.enroll-tabs__widget { width: 100%; display: flex; flex-direction: column; gap: clamp(4rem, 6vw, 6.4rem); }

.enroll-tabs__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 3.2rem; }
.enroll-tab {
  font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; line-height: 1.3;
  color: var(--ink-teal); background: none; cursor: pointer;
  padding: 1.6rem 0;
  border: 0; border-bottom: 0.1rem solid rgba(18, 46, 56, 0.15);
}
.enroll-tab[aria-selected="true"] { border-bottom: 0.3rem solid #0b8d85; }

.enroll-panel { display: grid; grid-template-columns: 1fr; gap: 2.4rem; align-items: stretch; }
.enroll-panel[hidden] { display: none; }
.enroll-panel__card {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3.2rem;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 2.4rem;
  padding: clamp(3.2rem, 5vw, 5.6rem);
  box-shadow: 0 1.2rem 1.6rem rgba(18, 46, 56, 0.08);
}
.enroll-panel__copy { display: flex; flex-direction: column; gap: 2.4rem; max-width: 56rem; }
.enroll-panel__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.6rem, 3vw, 3.2rem); line-height: 1.2; color: var(--ink-teal); }
.enroll-panel__text { font-size: 1.6rem; line-height: 1.55; color: rgba(18, 46, 56, 0.72); }
.enroll-panel__media { position: relative; margin: 0; border-radius: 2.4rem; overflow: hidden; aspect-ratio: 640 / 640; min-height: 26rem; }
.enroll-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .enroll-panel { grid-template-columns: 1fr 1fr; min-height: 64rem; }
  .enroll-panel__media { aspect-ratio: auto; }
}

/* ================= PLAN MATERIALS: document center ===================== */
.plan-docs { background: var(--white); padding-block: clamp(5.6rem, 9vw, 11.2rem); }
.plan-docs__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(4rem, 6vw, 8rem); }
.plan-docs__intro { display: grid; grid-template-columns: 1fr; gap: 2.4rem; width: 100%; }
.plan-docs__lead { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.2rem, 2.6vw, 2.8rem); line-height: 1.4; color: var(--ink-teal); }
.plan-docs__text { font-size: 1.7rem; line-height: 1.55; color: rgba(18, 46, 56, 0.72); }

/* Year segmented toggle */
.plan-docs__toolbar { display: flex; justify-content: center; }
.year-toggle { display: inline-flex; gap: 0; padding: 0.4rem; border: var(--border-width) solid #d4dcde; border-radius: 360px; background: var(--white); }
.year-toggle__btn { font: inherit; font-size: 1.6rem; color: var(--ink-teal); background: none; border: 0; padding: 1rem 4rem; border-radius: 999px; cursor: pointer; }
.year-toggle__btn.is-active { background: linear-gradient(128deg, var(--science-blue) 0%, var(--persian-green) 100%); color: #fff; font-weight: 600; }

/* Tab container: plan menu (left) + doc panes (right) */
.pm-tabs {
  width: 100%;
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  background: var(--white);
  border: var(--border-width) solid #d4dcde;
  border-radius: 2rem;
  box-shadow: 0 2rem 2.4rem -0.4rem rgba(0, 0, 0, 0.08), 0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.03);
  padding: 1rem;
}
.pm-tabs__menu { display: flex; flex-direction: column; gap: 0.8rem; padding: 0.8rem; }
.pm-tabs__label { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.12rem; text-transform: uppercase; color: rgba(18, 46, 56, 0.45); padding: 0.8rem 1.8rem 0.6rem; }
.pm-tab {
  font-family: var(--font-head); font-weight: 700; font-size: 1.8rem; line-height: 1.3;
  color: var(--ink-teal); text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.4rem 1.6rem 1.4rem 1.8rem; border-radius: 1rem;
}
.pm-tab:hover { background: #f2f7f6; }
.pm-tab[aria-selected="true"] { background: #e1f2ef; }

.pm-tabs__panes { min-width: 0; }
.pm-pane { display: flex; flex-direction: column; gap: 2.4rem; padding: 1.2rem 1.2rem 2rem; }
.pm-pane[hidden] { display: none; }
.pm-pane__label { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.12rem; text-transform: uppercase; color: rgba(18, 46, 56, 0.5); }
.pm-docgrid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
/* Shared-doc wrapper carries the plan year so the year toggle can filter it. */
.pm-other-item { display: flex; }
.pm-other-item > .doc-card { width: 100%; }
.pm-tab[hidden], .pm-other-item[hidden] { display: none; }

.doc-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  padding: 2rem;
  box-shadow: 0 0.2rem 0.4rem rgba(18, 46, 56, 0.04);
}
.doc-card__icon { flex: none; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; background: #e1f2ef; border-radius: 999px; }
.doc-card__icon img { display: block; width: 2rem; height: 2rem; }
.doc-card__stack { display: flex; flex-direction: column; gap: 0.4rem; }
.doc-card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; line-height: 1.3; color: var(--ink-teal); }
.doc-card__titlelink { text-decoration: none; }
.doc-card__titlelink:hover { text-decoration: underline; }
.doc-card__meta { font-size: 1.1rem; line-height: 1.5; color: rgba(18, 46, 56, 0.55); }

.doc-lang {
  width: 100%; display: flex; flex-direction: column; gap: 0.2rem;
  background: #fafbfd; border: var(--border-width) solid rgba(18, 46, 56, 0.12);
  border-radius: 1rem; padding: 0.7rem 1.2rem 0.7rem 1.4rem; cursor: pointer;
}
.doc-lang__caption { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08rem; text-transform: uppercase; color: rgba(18, 46, 56, 0.5); }
.doc-lang__select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 1.3rem; font-weight: 600; color: var(--ink-teal);
  border: 0; background: transparent; padding: 0 2rem 0 0; margin: 0; cursor: pointer; width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122e38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: 1.6rem;
}
.doc-card__download {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  padding: 1.2rem 1.6rem; border-radius: 999px;
  border: var(--border-width) solid #d4dcde; background: var(--white);
  color: var(--navy-bg); font-weight: 600; font-size: 1.3rem;
}
.doc-card__download:hover { background: #f4f8f7; }
.doc-card__download--primary { background: var(--brand-gradient); border: none; color: var(--white); gap: 0.8rem; }
.doc-card__download--primary:hover { background: var(--brand-gradient); filter: brightness(1.07); }

/* Other Documents — shared docs shown full-width below the plan tabs. */
.pm-other { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2.4rem; padding: 2.4rem 1.2rem 1.2rem; border-top: var(--border-width) solid rgba(18, 46, 56, 0.1); }
.pm-other__label { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.12rem; text-transform: uppercase; color: rgba(18, 46, 56, 0.5); }
.pm-empty { font-size: 1.4rem; color: rgba(18, 46, 56, 0.55); padding: 0.8rem 0; }

@media (min-width: 560px) { .pm-docgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .plan-docs__intro { grid-template-columns: 1fr 1fr; align-items: start; gap: 2.4rem clamp(3.2rem, 5vw, 6.4rem); }
  .pm-tabs { grid-template-columns: 30rem 1fr; gap: 2rem; padding: 1.2rem; }
  .pm-tabs__menu { border-right: var(--border-width) solid rgba(18, 46, 56, 0.08); }
  .pm-docgrid { grid-template-columns: repeat(3, 1fr); }
}

/* =================== PLAN DETAILS: hero (info + stat cards) ============= */
.pd-hero { background: var(--surface-tan); padding-block: clamp(4.8rem, 8vw, 9.6rem); }
.pd-hero__grid { display: flex; flex-direction: column; gap: clamp(3.2rem, 5vw, 6.4rem); }
.pd-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; max-width: 71.8rem; }
.pd-hero__meta { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.08rem; text-transform: uppercase; color: rgba(18, 46, 56, 0.55); }
.pd-hero__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(4rem, 6vw, 6.4rem); line-height: 1.15; color: var(--dark-navy); }
.pd-hero__desc { font-size: 1.8rem; line-height: 1.55; color: rgba(18, 46, 56, 0.78); max-width: 56rem; }
.pd-hero__actions { display: flex; flex-wrap: wrap; gap: 1.6rem; }

.pd-hero__stats { display: flex; flex-direction: column; gap: 1.2rem; }
.pd-stat {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; text-align: right;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  padding: 2rem 2.4rem;
}
.pd-stat__num { font-family: var(--font-head); font-weight: 700; font-size: 4.4rem; line-height: 1.1; color: var(--ink-teal); }
.pd-stat__label { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1rem; text-transform: uppercase; color: rgba(18, 46, 56, 0.65); }

@media (min-width: 560px) {
  .pd-hero__stats { flex-direction: row; flex-wrap: wrap; }
  .pd-stat { flex: 1 1 20rem; }
}
@media (min-width: 1024px) {
  .pd-hero__grid { flex-direction: row; justify-content: space-between; align-items: center; }
  .pd-hero__stats { flex-direction: column; flex: none; }
  .pd-stat { width: 24rem; flex: none; }
}

/* ================= PLAN DETAILS: benefits/costs body =================== */
.pd-body { background: var(--white); padding-block: clamp(4.8rem, 8vw, 9.6rem); }
.pd-body__grid { display: grid; grid-template-columns: 1fr; gap: clamp(3.2rem, 4vw, 4rem); align-items: start; }
.pd-body__main { display: flex; flex-direction: column; gap: 2.4rem; min-width: 0; }

.pd-panel { background: var(--white); border: var(--border-width) solid rgba(18, 46, 56, 0.08); border-radius: 2.4rem; padding: clamp(2.4rem, 3vw, 2.9rem); box-shadow: 0 0.8rem 2.4rem -0.4rem rgba(18, 46, 56, 0.06); }
#benefits-overview { scroll-margin-top: 2.4rem; }
.pd-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 1.6rem; margin-bottom: 2.8rem; }
.pd-panel__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 2.4vw, 2.4rem); line-height: 1.3; color: var(--ink-teal); }
.pd-tag { background: #e1f2ef; color: var(--ink-teal); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.08rem; text-transform: uppercase; padding: 0.5rem 1.2rem; border-radius: 999px; }

/* Cost at a Glance */
.glance__grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
.glance-card {
  background: var(--surface-tan);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  padding: 2.4rem;
  display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start;
  box-shadow: 0 0.2rem 0.4rem rgba(18, 46, 56, 0.04);
}
.glance-card__ic { flex: none; width: 4.8rem; height: 4.8rem; display: flex; align-items: center; justify-content: center; background: #e1f2ef; border-radius: 999px; }
.glance-card__ic img { display: block; width: 2.4rem; height: 2.4rem; }
.glance-card__num { font-family: var(--font-head); font-weight: 700; font-size: 3.6rem; line-height: 1.1; color: var(--ink-teal); }
.glance-card__label { font-weight: 600; font-size: 1.4rem; color: var(--ink-teal); }
.glance-card__sub { font-size: 1.3rem; line-height: 1.5; color: rgba(18, 46, 56, 0.62); }
.glance__note { margin-top: 2rem; font-size: 1.1rem; line-height: 1.65; color: rgba(18, 46, 56, 0.5); }

/* Benefits Overview */
.benefits-ov__note { font-size: 1.3rem; color: rgba(18, 46, 56, 0.6); }
.benefits-ov__note a { color: var(--ink-teal); font-weight: 700; }
.benefits-list { list-style: none; margin: 0; padding: 0; }
.benefit-row { display: grid; grid-template-columns: 1fr; gap: 0.6rem 4rem; padding: 1.5rem 0; border-bottom: var(--border-width) solid rgba(18, 46, 56, 0.06); }
.benefit-row:last-child { border-bottom: 0; }
.benefit-row__head { display: flex; align-items: center; gap: 1.4rem; }
.pd-check { flex: none; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; background: #e1f2ef; border-radius: 999px; }
.pd-check img { display: block; width: 1.4rem; height: 1.4rem; }
.benefit-row__label { font-weight: 600; font-size: 1.4rem; line-height: 1.4; color: var(--ink-teal); }
.benefit-row__value { font-size: 1.4rem; line-height: 1.55; color: rgba(18, 46, 56, 0.72); padding-left: 3.8rem; }
.benefit-row__value strong { font-weight: 600; color: var(--ink-teal); }
@media (min-width: 620px) {
  .benefit-row { grid-template-columns: 22rem minmax(0, 1fr); align-items: center; }
  .benefit-row__value { padding-left: 0; }
}

/* Eastern Wellness Therapies */
.ewt__intro { font-size: 1.4rem; line-height: 1.55; color: rgba(18, 46, 56, 0.72); margin-bottom: 2.8rem; }
.ewt__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.ewt-item {
  display: flex; align-items: center; gap: 1.6rem;
  background: var(--surface-tan);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  padding: 2.1rem;
  box-shadow: 0 0.2rem 0.4rem rgba(18, 46, 56, 0.04);
}
.ewt-item .pd-check { width: 3.2rem; height: 3.2rem; }
.ewt-item .pd-check img { width: 1.8rem; height: 1.8rem; }
.ewt-item__copy { display: flex; flex-direction: column; gap: 0.4rem; }
.ewt-item__title { font-family: var(--font-body); font-weight: 700; font-size: 1.5rem; line-height: 1.4; color: var(--ink-teal); }
.ewt-item__sub { font-size: 1.3rem; line-height: 1.5; color: rgba(18, 46, 56, 0.65); }

/* Additional Benefits (inside a pd-panel) */
.addl__title { margin-bottom: 2rem; }
.addl__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
.addl-card { display: flex; flex-direction: column; gap: 0.7rem; background: var(--surface-tan); border: var(--border-width) solid rgba(18, 46, 56, 0.08); border-radius: 1.6rem; padding: 2.5rem; text-align: center; align-items: center; box-shadow: 0 0.2rem 0.4rem rgba(18, 46, 56, 0.04); }
.addl-card__ic { width: 4rem; height: 4rem; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; background: #e1f2ef; border-radius: 999px; }
.addl-card__ic img { display: block; width: 2.2rem; height: 2.2rem; }
.addl-card__title { font-family: var(--font-body); font-weight: 700; font-size: 1.5rem; line-height: 1.4; color: var(--ink-teal); }
.addl-card__sub { font-size: 1.3rem; line-height: 1.5; color: rgba(18, 46, 56, 0.65); }

/* Sidebar */
.pd-body__side { display: flex; flex-direction: column; gap: 1.6rem; }
.side-card { background: var(--surface-tan); border: var(--border-width) solid rgba(18, 46, 56, 0.08); border-radius: 2rem; padding: 2.5rem; box-shadow: 0 0.8rem 1.2rem rgba(18, 46, 56, 0.06); }
.side-card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.8rem; line-height: 1.25; color: var(--ink-teal); margin-bottom: 0.8rem; }
.side-card__rows { display: flex; flex-direction: column; }
.side-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; padding: 1.2rem 0; border-bottom: var(--border-width) solid rgba(18, 46, 56, 0.08); }
.side-row:last-child { border-bottom: 0; }
.side-row__k { font-size: 1.2rem; color: rgba(18, 46, 56, 0.78); }
.side-row__v { font-size: 1.3rem; font-weight: 600; color: var(--ink-teal); text-align: right; }
.side-card__subhead { margin: 1.6rem 0 0; font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; line-height: 1.25; color: var(--ink-teal); }

.premium-card { background: var(--surface-tan); border-color: rgba(18, 46, 56, 0.08); border-radius: 2rem; padding: 2.7rem; }
.premium-card__label { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1rem; text-transform: uppercase; color: rgba(18, 46, 56, 0.55); }
.premium-card__price { font-family: var(--font-head); font-weight: 700; font-size: 5.6rem; line-height: 1; color: var(--ink-teal); margin-top: 0.8rem; display: flex; align-items: baseline; }
.premium-card__per { font-family: var(--font-body); font-weight: 400; font-size: 1.4rem; color: rgba(18, 46, 56, 0.6); margin-left: 0.4rem; }
.premium-card__sub { font-size: 1.2rem; line-height: 1.4; color: rgba(18, 46, 56, 0.7); margin-top: 0.6rem; }
.premium-card__rows { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.9rem; padding-top: 1.9rem; border-top: var(--border-width) solid rgba(0, 0, 0, 0.1); }
.premium-card__rows .side-row { padding: 0; border-bottom: 0; }
.premium-card__rows .side-row__k { font-size: 1.2rem; color: rgba(18, 46, 56, 0.7); }
.premium-card__rows .side-row__v { font-size: 1.4rem; font-weight: 600; color: var(--ink-teal); }
.premium-card__actions { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.9rem; }
.premium-card__enroll, .questions-card__phone { width: 100%; }
.premium-card__dl { width: 100%; background: transparent; border: 0.15rem solid rgba(18, 46, 56, 0.6); border-radius: 999px; color: var(--ink-teal); font-weight: 600; font-size: 1.3rem; }
.premium-card__dl:hover { background: rgba(18, 46, 56, 0.06); }

.csnp-note {
  display: flex; flex-direction: column; gap: 1.2rem;
  background: rgba(225, 242, 239, 0.15);
  border: var(--border-width) solid rgba(11, 141, 133, 0.35);
  border-radius: 1.6rem;
  padding: 2.1rem;
}
.csnp-note__title { font-weight: 700; font-size: 1.4rem; line-height: 1.4; color: var(--ink-teal); }
.csnp-note__text { font-size: 1.3rem; line-height: 1.55; color: rgba(18, 46, 56, 0.78); }

.questions-card { background: var(--white); }
.questions-card__text { font-size: 1.3rem; line-height: 1.55; color: rgba(18, 46, 56, 0.7); margin-bottom: 1.6rem; }
.pd-fineprint { font-size: 1.1rem; line-height: 1.65; color: #4c4c4c; }

@media (min-width: 520px) {
  .glance__grid { grid-template-columns: 1fr 1fr; }
  .ewt__grid { grid-template-columns: 1fr 1fr; }
  .addl__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .glance__grid { grid-template-columns: repeat(3, 1fr); }
  .addl__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .pd-body__grid { grid-template-columns: minmax(0, 1fr) 34rem; gap: 4rem; }
}

/* ============ PLAN DETAILS: dual CTA (advisor / enroll) ================ */
.pd-dual-cta {
  --tagline-bg: #e1f2ef;
  position: relative;
  background: #ecf4f4;                          /* Figma field — multiplies with the wave art */
  --wave-img: url("images/waves3.png");         /* new flowing-wave band */
  --wave-blend: multiply;
  padding-block: clamp(5.6rem, 9vw, 11.2rem);
}
.pd-dual-cta__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.4rem, 4vw, 4rem); }
.dual-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3.2rem;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 2rem;
  padding: clamp(2.8rem, 4vw, 4rem);
}
.dual-card__ic { flex: none; width: 6rem; height: 6rem; display: flex; align-items: center; justify-content: center; background: #e1f2ef; border-radius: 999px; }
.dual-card__ic img { display: block; width: 3.2rem; height: 3.2rem; }
.dual-card__copy { display: flex; flex-direction: column; gap: 2.4rem; }
.dual-card__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.8rem, 3.4vw, 3.6rem); line-height: 1.2; color: var(--ink-teal); }
.dual-card__text { font-size: 1.7rem; line-height: 1.55; color: rgba(18, 46, 56, 0.72); }
.dual-card__actions { display: flex; flex-wrap: wrap; gap: 1.6rem; }

@media (min-width: 768px) { .pd-dual-cta__grid { grid-template-columns: 1fr 1fr; } }

/* ---- Mobile: inline accordion inside the hamburger dropdown ---- */
/* heading+desc hidden on mobile */

/* icon chips hidden on mobile */
/* descriptions hidden on mobile */

/* ---- Desktop: floating full-width mega panel ---- */
@media (min-width: 1024px) {
                                
  /* Active trigger: gradient text + flipped chevron */
    
          
  /* Open state swaps the hero navbar to its solid surface */
          /* ...but the "Find a plan" pill button keeps white text (the darken rule above
     would otherwise catch it as a direct > a child of the menu). */
          }

/* ==================== FIND GROCERIES: RETAIL BRANDS =================== */
/* Left-aligned head + wrapping brand pills, on the teal tint + scallop wave. */
.retail-brands {
  --tagline-bg: #e1f2ef;
  background: #f7fafa;                          /* Figma field — multiplies with the wave art */
  --wave-img: url("images/waves3.png");         /* new flowing-wave band */
  --wave-blend: multiply;
  padding-block: 7.2rem;
}
.retail-brands__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 2.8rem; }
.retail-brands__head { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.retail-brands__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.3;
  color: var(--ink-teal);
}
.retail-brands__text { font-size: 1.7rem; line-height: 1.5; color: rgba(18, 46, 56, 0.72); }
.brand-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.brand-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.8rem;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.12);
  border-radius: 999px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink-teal);
}

/* ============================================================================
   MASTHEAD — nav/mega rebuild (find-care.html only for now)
   Mobile-first. Bar = translucent pill; open = full-screen white sheet with
   search + accordion + bottom action bar. Desktop bar is interim (mega next).
   ============================================================================ */
.masthead { position: relative; z-index: 50; background: var(--surface-tan); }
.masthead__container { padding: 1.6rem 1rem 1rem; }

/* Pill bar */
.masthead__bar {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-height: 5.4rem;
  padding: 0.5rem 1.6rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 36rem;
  box-shadow: 0 0.375rem 1.5rem rgba(53, 53, 53, 0.1);
}
.masthead__brand { display: inline-flex; flex: none; }
.masthead__brand img { height: 2.8rem; width: auto; display: block; }

/* Mobile icon controls */
.masthead__controls { display: flex; align-items: center; gap: 0.2rem; margin-left: auto; }
.masthead__iconbtn {
  width: 4.4rem; height: 4.4rem;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-teal);
}
.masthead__burger { display: flex; flex-direction: column; gap: 0.5rem; }
.masthead__burger span { width: 2rem; height: 0.2rem; border-radius: 0.1rem; background: var(--ink-teal); }
.masthead__close { display: none; }
.masthead.is-open .masthead__burger { display: none; }
.masthead.is-open .masthead__close { display: block; }

/* Whole nav goes white while the sheet is open */
.masthead.is-open { background: var(--white); }

/* Desktop-only pieces hidden on mobile (mobile uses the sheet/accordion) */
.masthead__utility,
.masthead__nav,
.masthead__mega { display: none; }
.masthead__panel { display: none; }

/* Full-screen sheet */
.masthead__sheet {
  display: none;
  position: fixed;
  left: 0; right: 0; top: 8rem; bottom: 0;
  z-index: 55;
  flex-direction: column;
  background: var(--white);
}
.masthead.is-open .masthead__sheet { display: flex; }
.masthead__sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.6rem 2rem; }

.masthead__searchfield {
  display: flex; align-items: center; gap: 1rem;
  height: 4.8rem; padding: 0 1.4rem; margin-bottom: 1.2rem;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.15);
  border-radius: 1rem;
  color: rgba(18, 46, 56, 0.45);
}
.masthead__searchfield svg { flex: none; }
.masthead__searchfield input {
  flex: 1; min-width: 0;
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 1.5rem; color: var(--ink-teal);
}
.masthead__searchfield input::placeholder { color: rgba(18, 46, 56, 0.45); }

/* Accordion */
.masthead__accordion { list-style: none; margin: 0; padding: 0; }
.macc__row {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 5.6rem; padding: 0;
  background: none; border: 0; border-bottom: 0.05rem solid #e5e5e5;
  font: inherit; font-weight: 600; font-size: 1.7rem; color: var(--ink-teal);
  text-align: left; cursor: pointer; text-decoration: none;
}
.macc__chevron { flex: none; transition: transform 0.2s ease; }
.macc.is-open .macc__chevron { transform: rotate(180deg); }
.macc__panel { display: none; padding-bottom: 0.8rem; }
.macc.is-open .macc__panel { display: block; }

/* Bottom action bar */
.masthead__actions {
  display: flex; gap: 1.2rem;
  padding: 1.6rem 2rem 2.4rem;
  border-top: var(--border-width) solid rgba(18, 46, 56, 0.1);
  background: var(--white);
}
.masthead__actions .btn { flex: 1; justify-content: center; }

/* ---------------------------- Desktop bar (interim) ---------------------- */
@media (min-width: 1280px) {
  :root { --nav-h: 14rem; }   /* desktop nav = utility row + bar; front-page hero offset */
  /* Container caps at 1440 and is the CARD width: full-bleed at <=1440 (open
     panel touches the screen edges), 1440 centered above. No horizontal padding
     so the card can reach the edges; the pill + panel content are inset to 1320
     via a 6rem side margin. */
  .masthead__container {
    max-width: 144rem;
    margin-inline: auto;
    padding: 1.5rem 0;
    display: flex; flex-direction: column; gap: 1.2rem;
    position: relative;   /* positioning context for the mega card */
  }
  .masthead__utility {
    display: flex; list-style: none; margin: 0 6rem; padding: 0; gap: 2rem;
    justify-content: flex-end;
    position: relative; z-index: 3;   /* above the mega card AND the bar (z-index:2), so the language dropdown overlays the nav row below it */
  }
  .masthead__util {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-weight: 600; font-size: 1.4rem; color: var(--navy-700);
  }

  /* Shell spans the full container; static so the mega card positions relative to
     the container (from the very top), not the shell. */
  .masthead__shell { width: 100%; position: static; }
  .masthead__bar { margin-inline: 6rem; min-height: 7.2rem; padding: 1.2rem 2.4rem; gap: 2.4rem; }

  html[lang="es-ES"] .masthead__bar {
    gap: 1.6rem;
  }

  html[lang="vi"] .masthead__bar {
    gap: 1.2rem;
  }

  .masthead__brand img { height: 3.8rem; }
  .masthead__controls { display: none; }
  .masthead__sheet { display: none !important; }

  .masthead__nav {
    display: flex; align-items: center; gap: clamp(1.6rem, 1.8vw, 2.8rem);
    margin-left: auto;
  }

  html[lang="es-ES"] .masthead__nav {
    gap: 1.6rem;
  }

  html[lang="vi"] .masthead__nav {
    gap: 1.2rem;
  }

  .masthead__navitem { display: inline-flex; position: static; }
  .masthead__navlink {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-weight: 600; font-size: 1.6rem; color: #000;
    white-space: nowrap; text-decoration: none;
  }

  html[lang="es-ES"] .masthead__navlink {
    font-size: 1.4rem;
  }

  html[lang="vi"] .masthead__navlink {
    font-size: 1.2rem;
  }

  .masthead__navlink:hover { color: var(--science-blue); }
  .masthead__navlink--search svg { flex: none; }
  .masthead__cta { color: var(--white); }

  /* Inline search field (revealed by clicking "Search") — matches the Figma
     search-active navbar: white pill, magnifier, "Search" placeholder, × close. */
  .masthead__search {
    display: none;
    align-items: center;
    gap: 1.1rem;
    width: 34.3rem;
    max-width: 100%;
    padding: 1rem 1.6rem;
    background: var(--white);
    border: 1px solid #d4dcde;
    border-radius: var(--radius-pill);
  }
  .masthead__search-icon { flex: none; color: #1f3a40; }
  .masthead__search-input {
    flex: 1; min-width: 0;
    font: inherit; font-size: 1.5rem; font-weight: 600;
    color: #1f3a40; border: 0; background: none; padding: 0;
  }
  .masthead__search-input::placeholder { color: #747474; opacity: 0.7; font-weight: 600; }
  .masthead__search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .masthead__search-close {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; padding: 0;
    background: none; border: 0; cursor: pointer; color: #1f3a40;
  }
  .masthead__search-close:hover { color: var(--science-blue); }
  /* Open state: the field takes the place of the Search link + CTA */
  .masthead__nav.is-search-open .masthead__navlink--search,
  .masthead__nav.is-search-open .masthead__cta { display: none; }
  .masthead__nav.is-search-open .masthead__search { display: flex; }

  /* ---- Desktop mega: overlay card (bar sits on top, panel below) ----
     The mega is absolutely positioned from the shell's top so it OVERLAYS the
     page (no push-down); its card bg/shadow spans behind the bar + panel so the
     whole thing reads as one card. The bar (z-index 2, transparent when open)
     rides on top; padding-top clears the bar height. */
  /* The pill keeps its white bg + shadow when a mega is open (appearance
     unchanged); it floats on top of the mega card. */
  .masthead__bar { position: relative; z-index: 2; }

  .masthead__mega {
    position: absolute; top: 0; left: 0; right: 0; z-index: 1;
    padding-top: 12.7rem;   /* clears the utility row + pill (nav height) */
    background: #f8f4f2;
    border-radius: 0 0 3.6rem 3.6rem;
    box-shadow: 0 2.8rem 5.6rem -1.4rem rgba(10, 30, 63, 0.18);
  }
  .masthead.is-mega-open .masthead__mega { display: block; }
  .masthead__panel { padding-top: 4.5rem; }
  .masthead__panel.is-active { display: block; animation: cc-mega-drop 300ms ease-out both; }

  .mm-panel__inner { display: flex; gap: 3rem; margin-inline: 6rem; padding: 0.4rem 0 4rem; }
  .mm-aside { flex: none; width: 34rem; padding-right: 4rem; border-right: var(--border-width) solid rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 2.4rem; }
  .mm-aside__intro { display: flex; flex-direction: column; gap: 0.8rem; }
  .mm-aside__title { font-family: var(--font-head); font-weight: 500; font-size: 2.8rem; line-height: 1.4; letter-spacing: -0.028rem; color: var(--neutral-darkest); }
  .mm-aside__desc { font-size: 1.6rem; line-height: 1.5; color: rgba(1, 10, 10, 0.7); }
  .mm-aside__cta { display: flex; flex-direction: column; gap: 1.6rem; }
  .mm-aside__cta .btn { width: 100%; justify-content: center; }
  .mm-or { display: flex; align-items: center; gap: 0.7rem; font-size: 1.2rem; font-weight: 600; color: #808080; }
  .mm-or::before, .mm-or::after { content: ""; flex: 1; height: 1px; background: rgba(0, 0, 0, 0.1); }

  .mm-cols { flex: 1; display: flex; gap: 2.4rem; }
  .mm-col { flex: 1; display: flex; flex-direction: column; gap: 1.6rem; }
  .mm-col__label { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.12rem; text-transform: uppercase; color: #122e38; opacity: 0.7; }
  .mm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2rem; }
  .mm-item { display: flex; gap: 1.6rem; padding: 0.8rem 0; text-decoration: none; }
  .mm-item__ic { flex: none; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; background: #e1f2ef; border-radius: 999px; }
  .mm-item__ic img { width: 2.4rem; height: 2.4rem; display: block; }
  .mm-item__body { display: flex; flex-direction: column; gap: 0.8rem; }
  .mm-item__title { font-family: var(--font-head); font-weight: 700; font-size: 1.8rem; line-height: 1.4; letter-spacing: -0.018rem; color: var(--neutral-darkest); }
  .mm-item:hover .mm-item__title { color: var(--science-blue); }
  .mm-item__desc { font-size: 1.4rem; line-height: 1.5; color: rgba(1, 10, 10, 0.7); }

  /* Active trigger: gradient text + flipped chevron */
  .masthead__navitem.is-open .masthead__navlink {
    background: linear-gradient(90deg, #1f6fcc, #1fa8b8);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .masthead__navitem.is-open .masthead__chevron { transform: rotate(180deg); color: #1f3a40; }

  /* Utility-row trigger (For Brokers / For Providers) active state */
  .masthead__util-item { position: static; }
  .masthead__util-item.is-open .masthead__util {
    background: linear-gradient(90deg, #1f6fcc, #1fa8b8);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .masthead__util-item.is-open .masthead__chevron { transform: rotate(180deg); color: #1f3a40; }

  /* Language switcher dropdown */
  .masthead__lang { position: relative; }
  .masthead__lang.is-open .masthead__chevron { transform: rotate(180deg); }
  .masthead__lang-menu {
    display: none; position: absolute; top: calc(100% + 0.8rem); right: 0; z-index: 60;
    min-width: 15rem; margin: 0; padding: 0.6rem; list-style: none;
    background: var(--white); border: var(--border-width) solid rgba(18, 46, 56, 0.1);
    border-radius: 1.2rem; box-shadow: 0 1.2rem 3.2rem -0.8rem rgba(18, 46, 56, 0.18);
  }
  .masthead__lang.is-open .masthead__lang-menu { display: block; }
  .masthead__lang-opt {
    display: block; padding: 0.9rem 1.2rem; border-radius: 0.8rem;
    font-family: var(--font-body); font-size: 1.5rem; line-height: 1.3; color: var(--ink-teal); text-decoration: none;
  }
  .masthead__lang-opt:hover { background: rgba(18, 46, 56, 0.06); color: var(--ink-teal); }

  /* Promo-image panel variant (Brokers / Providers) */
  #mm-brokers .mm-item__desc,
  #mm-providers .mm-item__desc { max-width: 31rem; }
  .mm-cols--promo { align-items: stretch; }
  .mm-promo { flex: none; width: 37rem; align-self: stretch; margin: 0; border-radius: 1.5rem; overflow: hidden; }
  .mm-promo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* For Providers mega panel: promo image on the left, Provider Portal aside on
     the right — reverse both the panel row and the promo column, and move the
     aside divider to its left edge. (Nav is ACF-driven, so this targets the
     panel's stable id rather than a per-menu flag.) */
  #mm-for-providers .mm-panel__inner { flex-direction: row-reverse; }
  #mm-for-providers .mm-aside { padding-right: 0; padding-left: 4rem; border-right: 0; border-left: var(--border-width) solid rgba(0, 0, 0, 0.1); }
  #mm-for-providers .mm-cols--promo { flex-direction: row-reverse; }
}

@media (min-width: 1440px) {
  html[lang="vi"] .masthead__nav {
    gap: 1.6rem;
  }

  html[lang="es-ES"] .masthead__nav {
    gap: 2rem;
  }

  html[lang="vi"] .masthead__navlink {
    font-size: 1.3rem;
  }

  html[lang="es-ES"] .masthead__navlink {
    font-size: 1.5rem;
  }
}

/* ===================== MASTHEAD — HOMEPAGE (hero) VARIANT =====================
   Transparent nav overlaying the hero: white logo/text, dark translucent pill.
   The masthead is absolutely positioned so the hero fills the top behind it. */
.masthead__brand .masthead__logo--color { display: none; }   /* white logo shows by default */

.masthead--hero {
  position: absolute;
  top: var(--ann-h, 0); left: 0; right: 0;   /* --ann-h = announcement bar height, so the overlay nav clears it */
  z-index: 50;
  background: transparent;
}
.masthead--hero .masthead__bar { background: rgba(18, 46, 56, 0.16); }
.masthead--hero .masthead__util { color: var(--white); }
.masthead--hero .masthead__util:hover { color: var(--navy-100); }
.masthead--hero .masthead__iconbtn { color: var(--white); }
.masthead--hero .masthead__burger span { background: var(--white); }

@media (min-width: 1280px) {
  .masthead--hero .masthead__logo { height: 3.8rem; }
  .masthead--hero .masthead__navlink { color: var(--white); }
  .masthead--hero .masthead__navlink:hover { color: var(--navy-100); }
  /* Mega triggers hover to the same gradient as the other pages (not the light
     hero hover) — overrides the navy-100 rule above for the 3 dropdown links. */
  .masthead--hero .masthead__navitem .masthead__navlink:hover {
    background: linear-gradient(90deg, #1f6fcc, #1fa8b8);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  .masthead--hero .masthead__cta { color: var(--white); }
}

/* Hero variant — open states (mobile sheet / desktop mega) switch to the light
   look so logo + text stay readable against the white sheet / light card. */
.masthead--hero.is-open { background: var(--white); }
.masthead--hero.is-open .masthead__bar { background: transparent; box-shadow: none; }
.masthead--hero.is-open .masthead__iconbtn { color: var(--ink-teal); }
.masthead--hero.is-open .masthead__brand .masthead__logo--white,
.masthead--hero.is-mega-open .masthead__brand .masthead__logo--white { display: none; }
.masthead--hero.is-open .masthead__brand .masthead__logo--color,
.masthead--hero.is-mega-open .masthead__brand .masthead__logo--color { display: block; }

@media (min-width: 1280px) {
  .masthead--hero.is-mega-open .masthead__bar { background: rgba(255, 255, 255, 0.5); }
  .masthead--hero.is-mega-open .masthead__util { color: var(--navy-700); }
  .masthead--hero.is-mega-open .masthead__navitem:not(.is-open) .masthead__navlink,
  .masthead--hero.is-mega-open .masthead__nav > a.masthead__navlink { color: #000; }
}

/* ---- Masthead accordion: expanded panel content (mobile) ---- */
.macc.is-open > .macc__row {
  border-bottom-color: transparent;
  background: linear-gradient(90deg, #1f6fcc, #1fa8b8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.macc__chevron { color: var(--ink-teal); }   /* stays visible when row text goes gradient */

.macc__ic {
  flex: none; width: 4rem; height: 4rem;
  display: flex; align-items: center; justify-content: center;
  background: #e1f2ef; border-radius: 999px;
}
.macc__ic img { display: block; width: 2.4rem; height: 2.4rem; }

.macc__features { display: flex; flex-direction: column; gap: 2rem; padding-top: 0.4rem; }
.macc__feature { display: flex; flex-direction: column; gap: 1.2rem; padding-left: 0.4rem; text-decoration: none; }
.macc__ftitle { font-family: var(--font-head); font-weight: 600; font-size: 1.6rem; line-height: 1.35; color: var(--ink-teal); }
.macc__fdesc { font-size: 1.4rem; line-height: 1.5; color: rgba(1, 10, 10, 0.7); }

.macc__divider { height: 0.1rem; background: rgba(18, 46, 56, 0.1); margin: 1.6rem 0; }
.macc__label { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.12rem; text-transform: uppercase; color: var(--ink-teal); opacity: 0.7; margin-bottom: 0.8rem; }

.macc__list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.macc__item { display: flex; align-items: center; gap: 1.2rem; min-height: 5.6rem; padding-left: 0.4rem; text-decoration: none; }
.macc__itemtitle { font-family: var(--font-head); font-weight: 600; font-size: 1.6rem; color: var(--ink-teal); }

.macc__help { width: 100%; justify-content: center; }
.macc__list--flush { margin-bottom: 0.4rem; }
.macc__buttons { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.6rem; }
.macc__buttons .btn { width: 100%; justify-content: center; }

/* ====================== NEWS ARTICLE (single) HERO ==================== */
.article-hero { background: var(--surface-tan); padding-block: 6.4rem 5.6rem; }
@media (min-width: 1024px) { .article-hero { padding-top: 10.4rem; } }
.article-hero__inner { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.article-hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(3.2rem, 4.4vw, 4.4rem);
  line-height: 1.25;
  color: var(--ink-teal);
  max-width: 88rem;
}
.article-hero__sub { font-size: 2rem; line-height: 1.55; color: rgba(18, 46, 56, 0.72); max-width: 82rem; }
.article-hero__share { display: flex; align-items: center; gap: 1rem; margin-top: 0.4rem; }
.article-hero__share-label { font-size: 1.4rem; font-weight: 600; color: rgba(18, 46, 56, 0.55); }
.article-hero__share-btn {
  display: flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem;
  background: #e1f2ef; border-radius: 999px;
}
.article-hero__share-btn img { width: 2rem; height: 2rem; display: block; }

/* ------- News article featured image ------- */
.article-featured { background: var(--surface-tan); padding-bottom: 4rem; }
.article-featured__media {
  margin: 0;
  aspect-ratio: 1280 / 520;
  border-radius: 2rem;
  overflow: hidden;
}
.article-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------- News article body ------- */
.article-body { background: var(--white); padding-block: 7.2rem; }
.article-body__col {
  /* 700px content column with the gutter added OUTSIDE it (not eaten by padding). */
  max-width: calc(70rem + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; flex-direction: column; gap: 2.8rem;
}
.article-body__p,
.article-body__col > p { font-size: 1.8rem; line-height: 1.7; color: rgba(18, 46, 56, 0.8); }
.article-body__name,
.article-body__col > p > strong:first-child { font-family: var(--font-head); font-weight: 600; font-size: 2rem; color: var(--ink-teal); }
.article-quote,
.article-body__col > blockquote { display: flex; gap: 2rem; margin: 0; padding-block: 0.4rem; }
.article-quote::before,
.article-body__col > blockquote::before {
  content: ""; flex: none; align-self: stretch;
  width: 0.3rem; border-radius: 0.2rem; background: #0b8d85;
}
.article-quote p,
.article-body__col > blockquote p { font-family: var(--font-head); font-weight: 500; font-size: 1.9rem; line-height: 1.6; color: rgba(18, 46, 56, 0.9); }
.article-about {
  background: var(--surface-tan);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  padding: 3.2rem;
  display: flex; flex-direction: column; gap: 1.4rem;
}
.article-about__title { font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; color: var(--ink-teal); }
.article-about__text { font-size: 1.5rem; line-height: 1.65; color: rgba(18, 46, 56, 0.75); }

/* ------- News article: related articles ("More from News & Media") ------- */
.related { background: var(--surface-tan); padding-block: 7.2rem; }
.related__inner { display: flex; flex-direction: column; gap: 3.2rem; }
.related__title { font-family: var(--font-head); font-weight: 700; font-size: 3.2rem; color: var(--ink-teal); }
.related__grid { display: grid; grid-template-columns: 1fr; gap: 3.2rem; }
@media (min-width: 640px) { .related__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .related__grid { grid-template-columns: repeat(3, 1fr); } }

/* ==================== FIND GROCERIES: STORE LOCATOR ================== */
.store-locator { background: var(--surface-tan); padding-block: 7.2rem; }
.store-locator__inner { display: flex; flex-direction: column; gap: 3.2rem; }
.store-locator__head { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.store-locator__title { font-family: var(--font-head); font-weight: 700; font-size: 3.2rem; color: var(--ink-teal); }
.store-locator__text { font-size: 1.7rem; line-height: 1.5; color: rgba(18, 46, 56, 0.72); }
.store-locator__text p { margin: 0; }
.store-locator__text p + p { margin-top: 0.8em; }
.store-locator__text a { text-decoration: underline; font-weight: 600; }

.county-tabs { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.county-tab {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2rem; border-radius: 999px;
  background: var(--white); border: var(--border-width) solid rgba(18, 46, 56, 0.15);
  font: inherit; font-weight: 600; font-size: 1.5rem; color: var(--ink-teal); cursor: pointer;
}
.county-tab.is-active { background: var(--ink-teal); border-color: var(--ink-teal); color: var(--white); }

.store-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; }
.store-search {
  display: flex; align-items: center; gap: 1rem;
  width: 46rem; max-width: 100%;
  padding: 1.2rem 1.6rem;
  background: var(--white); border: var(--border-width) solid rgba(18, 46, 56, 0.15); border-radius: 1rem;
}
.store-search svg { flex: none; opacity: 0.5; color: var(--ink-teal); }
.store-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font: inherit; font-size: 1.5rem; color: var(--ink-teal); }
.store-search input::placeholder { color: rgba(18, 46, 56, 0.45); }
.store-count { font-size: 1.4rem; font-weight: 600; color: rgba(18, 46, 56, 0.6); }

.store-results { display: flex; flex-direction: column; align-items: center; gap: 3.2rem; }
.store-grid { display: grid; grid-template-columns: 1fr; gap: 2rem 2.4rem; width: 100%; }
@media (min-width: 600px) { .store-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .store-grid { grid-template-columns: repeat(3, 1fr); } }

.store-card {
  display: flex; flex-direction: column; gap: 1.2rem;
  padding: 2.4rem;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  box-shadow: 0 0.6rem 1.8rem -0.4rem rgba(18, 46, 56, 0.06);
}
.store-card[hidden] { display: none; }   /* [hidden] must beat display:flex */
.store-card__name { font-family: var(--font-head); font-weight: 700; font-size: 1.8rem; color: #0b8d85; }
.store-card__row { display: flex; align-items: flex-start; gap: 0.8rem; font-size: 1.4rem; line-height: 1.4; color: rgba(18, 46, 56, 0.78); }
.store-card__row svg { flex: none; margin-top: 0.1rem; }
.store-card__link a { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.store-more {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.2rem 2.8rem; border-radius: 999px;
  background: none; border: 0.15rem solid rgba(18, 46, 56, 0.6);
  font: inherit; font-weight: 600; font-size: 1.5rem; color: var(--ink-teal); cursor: pointer;
}
.store-more[hidden] { display: none; }

/* ============================================================
   Legal / compliance pages (page-legal.php)
   Tan title header -> gradient stripe -> 800px reading column
   (editor prose) -> optional PDF downloads box.
   ============================================================ */
.legal-hero { background: var(--surface-tan); padding-block: clamp(4.8rem, 6vw, 8rem); }
.legal-hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(3rem, 4.2vw, 4.2rem);
  line-height: 1.2;
  color: var(--dark-navy);
}

.legal-body { background: var(--white); padding-block: clamp(5.6rem, 9vw, 11.2rem); }
.legal-body__col {
  /* 800px reading column, gutter added OUTSIDE it (not eaten by padding). */
  max-width: calc(80rem + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- editor (the_content) typography --- */
.legal-content { color: var(--ink-teal); }
.legal-content > * { margin: 0 0 1.6rem; }
.legal-content > *:last-child { margin-bottom: 0; }
.legal-content h2,
.legal-content h3 {
  color: var(--ink-teal);
  margin-top: 4rem;
}
.legal-content h2 { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; line-height: 1.3; }
.legal-content h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.7rem; line-height: 1.45; }
.legal-content > h2:first-child,
.legal-content > h3:first-child { margin-top: 0; }
.legal-content p,
.legal-content li { font-size: 1.6rem; line-height: 1.6; }
.legal-content ul,
.legal-content ol {
  margin: 0 0 1.6rem;
  padding-left: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content ol ol { list-style: lower-alpha; }
.legal-content ul ul,
.legal-content ul ol,
.legal-content ol ul,
.legal-content ol ol { margin: 0.8rem 0 0; }
.legal-content a { color: var(--science-blue); text-decoration: underline; }
.legal-content strong { font-weight: 700; }

/* --- PDF downloads box: breaks out to the full 1280 container, wider than the
   800px prose column; light-teal fill, no border, generous padding (Figma). --- */
.legal-docs-wrap { margin-top: clamp(3.2rem, 5vw, 4.8rem); }
.legal-docs {
  background: #ebf4f4;
  border-radius: 1.5rem;
  padding: clamp(3.2rem, 5vw, 8rem);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.legal-docs__intro { font-size: 1.7rem; font-weight: 600; color: var(--ink-teal); }
.legal-docs__list { list-style: none; display: flex; flex-wrap: wrap; gap: 1.6rem; }
.legal-docs__link { text-decoration: none; }

/* ===================== EXTERNAL-LINK INTERSTITIAL ===================== */
.interstitial { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.interstitial[hidden] { display: none; }
html.interstitial-open { overflow: hidden; }
.interstitial__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }
.interstitial__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 69.4rem;
  max-height: calc(100dvh - 4rem);
  overflow: hidden auto;
  background: #ebf4f4;
  border-radius: 1.5rem;
  box-shadow: 0 3rem 6rem rgba(10, 30, 63, 0.25);
}
.interstitial__close {
  position: absolute;
  top: clamp(1.6rem, 3vw, 5rem);
  right: clamp(1.6rem, 3vw, 5rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #4d6b6e;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.interstitial__close:hover { background: rgba(18, 46, 56, 0.08); color: var(--dark-navy); }
.interstitial__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(2rem, 3vw, 3rem);
  padding: clamp(4rem, 6vw, 7rem) clamp(2.4rem, 5vw, 8rem);
}
.interstitial__logo { width: 15.5rem; height: auto; }
.interstitial__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 2.6vw, 2.4rem);
  line-height: 1.29;
  color: var(--dark-navy);
  max-width: 34rem;
}
.interstitial__body { display: flex; flex-direction: column; gap: 1rem; max-width: 46.7rem; }
.interstitial__body p { font-size: 1.7rem; line-height: 1.55; color: rgba(18, 46, 56, 0.72); }
.interstitial__ok { font-size: clamp(1.8rem, 2.2vw, 2.3rem); padding: 1.25rem clamp(3.6rem, 5vw, 4.9rem); }

/* Seigaiha wave graphic along the bottom — the same transparent
   images/wave-pattern.png used site-wide (see .wave-bg). */
.interstitial__waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Pre-composited teal band with baked-in opacity, over the dialog's #ebf4f4 field. */
  background: url("images/intwaves.png") no-repeat bottom center / 100% auto;
}

/* ========================= SEARCH RESULTS (search.php) ==================== */
.search-hero {
  background: var(--surface-tan);
  padding-block: clamp(4.8rem, 8vw, 8rem);
  text-align: center;
}
.search-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.search-hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(3rem, 5vw, 4.2rem);
  line-height: 1.15;
  color: var(--dark-navy);
}
/* Search field (query + Clear chip + Search button) */
.search-field {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  max-width: 61.8rem;
  padding: 1.1rem 1.1rem 1.1rem 1.6rem;
  background: var(--white);
  border: 1px solid #d4dcde;
  border-radius: var(--radius-pill);
  box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.06);
}
.search-field__icon { flex: none; color: #1f3a40; }
.search-field__input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 1.6rem; font-weight: 600;
  color: #010a0a; border: 0; background: none; padding: 0;
}
.search-field__input::placeholder { color: #747474; opacity: 0.7; }
.search-field__clear {
  flex: none; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.7rem 1.2rem;
  font: inherit; font-size: 1.2rem; color: #747474;
  background: #e1f2ef; border: 0; border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap;
}
.search-field__clear svg { flex: none; }
.search-field__submit { flex: none; padding: 1rem 2.1rem; }

/* Results */
/* Scoped to the section — WordPress body_class() also outputs "search-results"
   on the <body>, so a bare .search-results rule would pad the whole page. */
main .search-results {
  background: var(--white);
  padding-block: clamp(4.8rem, 9vw, 11.2rem);
}
.search-results__bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem;
  margin-bottom: 2.4rem;
}
.search-results__count { font-size: 1.6rem; color: #122e38; }
.search-sort {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.9rem 1.2rem 0.9rem 1.6rem;
  background: #fefefe; border: 1px solid #d9e5e5; border-radius: 2.4rem;
}
.search-sort__label { font-size: 1.4rem; color: #8ca6a8; }
.search-sort__control { position: relative; display: inline-flex; align-items: center; }
.search-sort__select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 1.4rem; font-weight: 600; color: #122e38;
  background: none; border: 0; margin: 0; padding: 0 2rem 0 0; cursor: pointer;
}
.search-sort__chevron { position: absolute; right: 0; color: #122e38; pointer-events: none; }

.search-results__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.search-card {
  background: var(--white);
  border: 0.75px solid rgba(0, 0, 0, 0.1);
  border-radius: 1.5rem;
  padding: clamp(2.4rem, 4vw, 4.8rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-wrap: break-word;   /* long titles/URLs wrap instead of overflowing */
}
.search-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.4;
  letter-spacing: -0.024rem;
}
.search-card__title a { color: var(--dark-navy); text-decoration: none; }
.search-card__title a:hover { color: var(--science-blue); }
.search-card__desc { font-size: 1.4rem; line-height: 1.5; color: var(--body-copy); }

/* Empty state */
.search-empty__title {
  font-family: var(--font-head); font-weight: 700; font-size: 2.4rem;
  color: var(--dark-navy); margin-bottom: 0.8rem;
}
.search-empty__text { font-size: 1.6rem; color: var(--body-copy); }
.search-empty__text a { color: var(--science-blue); }

/* Pagination — reuses the shared .pagination styles (same as News & Media) */
main .search-results .pagination { margin-top: 4rem; }

@media (min-width: 768px) {
  .search-results__bar { flex-direction: row; align-items: center; }
  .search-results__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ========================= ENROLL NOW (self-enroll) ====================== */
#se-hero-title { max-width: none; }
.enroll-how { background: var(--white); padding-block: clamp(4.8rem, 7vw, 8rem); }
.enroll-how__inner { display: flex; flex-direction: column; gap: clamp(3.2rem, 5vw, 4.8rem); }
.enroll-how__title { text-align: left; }
.enroll-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3.2rem, 5vw, 4rem);
}
.enroll-step { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.enroll-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--persian-green); color: var(--white);
  font-family: var(--font-head); font-weight: 700; font-size: 1.8rem;
}
.enroll-step__title { font-family: var(--font-head); font-weight: 700; font-size: 2rem; color: var(--dark-navy); }
.enroll-step__desc { font-size: 1.6rem; line-height: 1.55; color: var(--body-copy); }

.enroll-apply { background: var(--white); padding-block: 0 clamp(6.4rem, 10vw, 11.2rem); }
.enroll-apply__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3.2rem, 5vw, 4.8rem); align-items: start; }
.enroll-apply__head { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2.8rem; }
.enroll-apply__title { text-align: left; }
.enroll-apply__sub { font-size: 1.6rem; line-height: 1.55; color: var(--body-copy); }
.enroll-langs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.enroll-lang {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem;
  background: var(--white); border: 1px solid rgba(18, 46, 56, 0.1); border-radius: 1.8rem;
  padding: 2.8rem;
  box-shadow: 0 0.8rem 2.4rem -0.4rem rgba(18, 46, 56, 0.06);
  overflow: clip;
}
.enroll-lang__name { font-family: var(--font-head); font-weight: 500; font-size: 3rem; color: var(--ink-teal); }
.enroll-lang__meta { font-size: 1.4rem; color: rgba(18, 46, 56, 0.6); }
.enroll-lang__cta {
  font-size: 1.5rem; font-weight: 600; color: #0b8d85;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem;
}
.enroll-lang__cta:hover { color: var(--science-blue); text-decoration: none; }
.enroll-lang__arrow { transition: transform 0.15s ease; }
.enroll-lang__cta:hover .enroll-lang__arrow { transform: translateX(0.3rem); }

.enroll-help {
  background: var(--surface-tan);
  border: 1px solid rgba(18, 46, 56, 0.08);
  border-radius: 2rem;
  padding: 2.8rem;
  display: flex; flex-direction: column; gap: 1.8rem;
  overflow: clip;
}
.enroll-help__title { font-family: var(--font-head); font-weight: 700; font-size: 2rem; color: var(--ink-teal); }
.enroll-help__sub { font-size: 1.5rem; line-height: 1.5; color: rgba(18, 46, 56, 0.72); }
.enroll-help__rows { display: flex; flex-direction: column; gap: 1.8rem; }
.enroll-help__row { display: flex; align-items: flex-start; gap: 1.2rem; }
.enroll-help__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 3.8rem; height: 3.8rem; border-radius: 50%;
  background: #e1f2ef; color: var(--ink-teal);
}
.enroll-help__icon svg { width: 1.8rem; height: 1.8rem; }
.enroll-help__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.enroll-help__label { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(18, 46, 56, 0.5); }
.enroll-help__value { font-size: 1.6rem; font-weight: 600; color: var(--ink-teal); line-height: 1.4; }
.enroll-help__value a { color: var(--ink-teal); text-decoration: none; }
.enroll-help__value a:hover { color: var(--science-blue); }

@media (min-width: 768px) {
  .enroll-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.4rem, 4vw, 4rem); }
  .enroll-langs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .enroll-apply__grid { grid-template-columns: minmax(0, 1fr) 34rem; gap: clamp(3.2rem, 4vw, 6.4rem); }
}

/* =============================== CONTACT US ============================== */
.contact-hero {
  --tagline-bg: #e1f2ef;                 /* matches the Figma eyelash pill */
  padding-block: clamp(4.8rem, 7vw, 7.2rem) clamp(3.2rem, 5vw, 5.6rem);
}
.contact-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}
.contact-hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(3.2rem, 5vw, 4.4rem);
  line-height: 1.15;
  color: var(--ink-teal);
}
.contact-hero__deck {
  max-width: 64rem;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: 1.5;
  color: rgba(18, 46, 56, 0.72);
}

/* Contact form section: white band with the form card + "Prefer to call?" aside. */
.contact-form-section {
  background: var(--white);
  padding-block: clamp(4.8rem, 8vw, 7.2rem);
}
.contact-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.4rem;
}
@media (min-width: 1024px) {
  .contact-form-layout {
    grid-template-columns: minmax(0, 1fr) 36rem;
    gap: 4.8rem;
    align-items: start;
  }
}

/* Form card — holds the "FORM GOES HERE" placeholder until the real form lands. */
.contact-form-card {
  display: grid;
  place-items: center;
  min-height: 44rem;
  padding: clamp(2.4rem, 4vw, 4rem);
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 2.4rem;
  box-shadow: 0 0.8rem 2.4rem -0.4rem rgba(18, 46, 56, 0.08);
}
.contact-form-card__placeholder {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.6rem);
  letter-spacing: 0.02em;
  color: rgba(18, 46, 56, 0.45);
}

/* Prefer to call? aside */
.contact-callcard {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  padding: 2.8rem;
  background: var(--surface-tan);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 2rem;
}
.contact-callcard__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2rem;
  color: var(--ink-teal);
}
.contact-callcard__row { display: flex; align-items: flex-start; gap: 1.2rem; }
.contact-callcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: #e1f2ef;
  color: var(--ink-teal);                 /* phone — ink */
}
.contact-callcard__icon--portal { color: #0b8d85; }   /* folder — teal */
.contact-callcard__icon svg { width: 1.8rem; height: 1.8rem; }
.contact-callcard__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.contact-callcard__label {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.073em;
  text-transform: uppercase;
  color: rgba(18, 46, 56, 0.5);
}
.contact-callcard__value {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--ink-teal);
  overflow-wrap: break-word;
}
.contact-callcard__value a { color: inherit; text-decoration: none; }
.contact-callcard__value a:hover { text-decoration: underline; }
.contact-callcard__divider { height: var(--border-width); background: rgba(18, 46, 56, 0.1); }
.contact-callcard__note { font-size: 1.3rem; line-height: 1.4; color: rgba(18, 46, 56, 0.65); }

/* ===================== CONTACT: FLUENT FORM (5 audience variants) ======
   Styles the Fluent Form (id 3) embedded on the contact page to match the
   Figma: a white form card on the left, a reactive tan contact card on the
   right, both driven by the "I am a…" dropdown via the plugin's conditional
   logic. Scoped under .contact-form-fluent so it never touches other forms. */

/* Layout: stacked on mobile, form + 36rem sidebar on desktop. Overrides
   Fluent's own flex row (cells carry an inline flex-basis:50%). */
.contact-form-fluent .cc-contact-grid.ff-t-container { display: flex; flex-direction: column; gap: 2.4rem; }
.contact-form-fluent .cc-contact-grid > .ff-t-cell { flex-basis: auto !important; padding: 0 !important; }
@media (min-width: 1024px) {
  .contact-form-fluent .cc-contact-grid.ff-t-container { flex-direction: row; gap: 4.8rem; align-items: flex-start; }
  .contact-form-fluent .cc-contact-grid > .ff-t-column-1 { flex: 1 1 auto !important; }
  .contact-form-fluent .cc-contact-grid > .ff-t-column-2 { flex: 0 0 36rem !important; }
}

/* Form card + field pairing (email/phone, zip/county sit side by side) */
.contact-form-fluent .cc-contact-grid > .ff-t-column-1 {
  display: grid !important;
  grid-template-columns: 1fr;
  column-gap: 1.6rem;
  row-gap: 1.8rem;
  align-content: start;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 2.4rem;
  box-shadow: 0 0.8rem 2.4rem -0.4rem rgba(18, 46, 56, 0.08);
  /* !important: beats the `.ff-t-cell { padding:0 }` reset above (this cell IS the card). */
  padding: clamp(2.8rem, 4vw, 3.6rem) clamp(2.4rem, 4vw, 4rem) !important;
}
.contact-form-fluent .cc-contact-grid > .ff-t-column-1 > .ff-el-group { margin: 0; min-width: 0; }
/* At ≥560px, two columns: full-width fields span both, .cc-half fields pair up. */
@media (min-width: 560px) {
  .contact-form-fluent .cc-contact-grid > .ff-t-column-1 { grid-template-columns: 1fr 1fr; }
  .contact-form-fluent .cc-contact-grid > .ff-t-column-1 > .ff-el-group { grid-column: 1 / -1; }
  .contact-form-fluent .cc-contact-grid > .ff-t-column-1 > .ff-el-group.cc-half { grid-column: auto; }
}
/* Divider beneath the "I am a…" selector (Figma node 2612:18661) */
.contact-form-fluent .cc-audience { border-bottom: var(--border-width) solid rgba(18, 46, 56, 0.08); padding-bottom: 1.8rem; }

/* Labels + inputs */
.contact-form-fluent .ff-el-input--label { padding: 0; margin-bottom: 0.6rem; }
/* .ff-el-group in the selector outranks Fluent's `.ff-default … label { font-weight:500 }`. */
.contact-form-fluent .ff-el-group .ff-el-input--label label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--ink-teal);
}
.contact-form-fluent .ff-el-input--content input:not([type="checkbox"]):not([type="radio"]),
.contact-form-fluent .ff-el-input--content select,
.contact-form-fluent .ff-el-input--content textarea {
  width: 100%;
  border: var(--border-width) solid rgba(18, 46, 56, 0.15);
  border-radius: 1rem;
  padding: 1.2rem 1.6rem;
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: var(--ink-teal);
  background: var(--white);
  line-height: 1.4;
}
.contact-form-fluent .ff-el-input--content textarea { min-height: 9.6rem; resize: vertical; }
/* Custom down-chevron on selects (matches the Figma icon-park-outline:down) */
.contact-form-fluent .ff-el-input--content select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 4rem;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22rgba%2818%2C46%2C56%2C0.55%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 1.4rem center;
  background-size: 1.8rem 1.8rem;
}
.contact-form-fluent .ff-el-input--content input::placeholder,
.contact-form-fluent .ff-el-input--content textarea::placeholder { color: rgba(18, 46, 56, 0.4); }
.contact-form-fluent .ff-el-input--content input:focus,
.contact-form-fluent .ff-el-input--content select:focus,
.contact-form-fluent .ff-el-input--content textarea:focus {
  outline: 0;
  border-color: #1f6fcc;
  box-shadow: 0 0 0 0.3rem rgba(31, 111, 204, 0.12);
}

/* Consent checkbox — checkbox and text on one row */
.contact-form-fluent .cc-consent .ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.45;
  color: rgba(18, 46, 56, 0.7);
}
.contact-form-fluent .cc-consent .ff-el-form-check-input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 2rem;
  height: 2rem;
  margin: 0.1rem 0 0;
  border: 0.2rem solid rgba(18, 46, 56, 0.3);
  border-radius: 0.4rem;
  background: var(--white);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.contact-form-fluent .cc-consent .ff-el-form-check-input:checked {
  background: #1f6fcc url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2012%205%205%209-10%22%2F%3E%3C%2Fsvg%3E") center/1.4rem no-repeat;
  border-color: #1f6fcc;
}
.contact-form-fluent .cc-consent .ff-el-form-check-input:focus-visible { outline: 0.2rem solid rgba(31, 111, 204, 0.4); outline-offset: 0.2rem; }

/* Submit — hide Fluent's always-rendered global button, keep the in-card one */
.contact-form-fluent .ff_submit_btn_wrapper:not(.ff_submit_btn_wrapper_custom) { display: none !important; }
.contact-form-fluent .cc-submit { flex: 0 0 100%; margin-top: 0.6rem; }
.contact-form-fluent .cc-submit .ff-btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 9999px;
  padding: 1.6rem 2rem;
  background: linear-gradient(90deg, #1f6fcc, #1fa8b8);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.6rem;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.contact-form-fluent .cc-submit .ff-btn:hover { opacity: 0.94; }

/* Reactive contact card (right column) */
.contact-form-fluent .cc-aside { margin: 0; }
.contact-form-fluent .cc-cc {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  padding: 2.8rem;
  background: var(--surface-tan);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 2rem;
}
.contact-form-fluent .cc-cc__title { font-family: var(--font-head); font-weight: 700; font-size: 2rem; color: var(--ink-teal); margin: 0; }
.contact-form-fluent .cc-cc__row { display: flex; align-items: flex-start; gap: 1.2rem; }
.contact-form-fluent .cc-cc__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: #e1f2ef;
  color: #0b8d85;
}
/* Icon glyph is a CSS mask (kept out of the form HTML so the plugin's
   sanitizer can't touch it); tinted with the icon's currentColor. */
.contact-form-fluent .cc-cc__icon::before {
  content: "";
  width: 1.8rem;
  height: 1.8rem;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.contact-form-fluent .cc-cc__icon--phone::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.8%2019.8%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.12%204.18%202%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.8%2019.8%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.12%204.18%202%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E"); }
.contact-form-fluent .cc-cc__icon--mail::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-10%205L2%207%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-10%205L2%207%22%2F%3E%3C%2Fsvg%3E"); }
.contact-form-fluent .cc-cc__icon--globe::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203a14%2014%200%200%201%200%2018M12%203a14%2014%200%200%200%200%2018%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203a14%2014%200%200%201%200%2018M12%203a14%2014%200%200%200%200%2018%22%2F%3E%3C%2Fsvg%3E"); }
.contact-form-fluent .cc-cc__icon--pin::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.contact-form-fluent .cc-cc__rowtext { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.contact-form-fluent .cc-cc__eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.073em; color: rgba(18, 46, 56, 0.5); }
.contact-form-fluent .cc-cc__value { font-family: var(--font-body); font-weight: 600; font-size: 1.6rem; line-height: 1.4; color: var(--ink-teal); text-decoration: none; overflow-wrap: break-word; }
.contact-form-fluent a.cc-cc__value:hover { color: #0b8d85; }
.contact-form-fluent .cc-cc__divider { height: var(--border-width); background: rgba(18, 46, 56, 0.1); }
.contact-form-fluent .cc-cc__note { font-family: var(--font-body); font-size: 1.3rem; line-height: 1.4; color: rgba(18, 46, 56, 0.65); margin: 0; }

/* Other ways to reach us */
.contact-more { padding-block: clamp(4.8rem, 8vw, 7.2rem); }
.contact-more__inner { display: flex; flex-direction: column; gap: 3.2rem; }
.contact-more__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.6rem, 4vw, 3.2rem);
  color: var(--ink-teal);
}
.contact-more__note { font-size: 1.4rem; line-height: 1.5; color: rgba(18, 46, 56, 0.7); }

.contact-portals,
.contact-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.4rem;
}
@media (min-width: 768px) {
  .contact-portals,
  .contact-info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Icon circles (shared) */
.contact-portal__icon,
.contact-info__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  background: #e1f2ef;
}

/* Portal cards */
.contact-portal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 2.4rem;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
  box-shadow: 0 0.8rem 2.4rem -0.4rem rgba(18, 46, 56, 0.06);
}
.contact-portal__icon { width: 4.4rem; height: 4.4rem; color: #0b8d85; }  /* folder — teal */
.contact-portal__icon svg { width: 2.2rem; height: 2.2rem; }
.contact-portal__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.8rem;
  color: var(--ink-teal);
}
.contact-portal__visit { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--ink-teal); }
.contact-portal__linkwrap { display: inline-flex; align-items: center; gap: 0.4rem; }
.contact-portal__glyph { display: inline-flex; flex: none; }
.contact-portal__glyph--globe svg { width: 1.6rem; height: 1.6rem; }
.contact-portal__glyph--ext svg { width: 1.4rem; height: 1.4rem; }
.contact-portal__link {
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--ink-teal);
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}
.contact-portal__link:hover { text-decoration: none; }

/* Info cards */
.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 2rem;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.08);
  border-radius: 1.6rem;
}
.contact-info__icon { width: 4rem; height: 4rem; color: var(--ink-teal); }  /* pin / mail / phone — ink */
.contact-info__icon svg { width: 1.8rem; height: 1.8rem; }
.contact-info__text { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.contact-info__label {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.073em;
  text-transform: uppercase;
  color: rgba(18, 46, 56, 0.5);
}
.contact-info__value {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--ink-teal);
  overflow-wrap: break-word;
}
.contact-info__value a { color: inherit; text-decoration: none; }
.contact-info__value a:hover { text-decoration: underline; }

/* =========================== CAREERS — OPENINGS ========================= */
/* "Current positions" — embeds the Paycom ATS career portal in an iframe. */
.careers-openings { padding-block: clamp(5.6rem, 9vw, 11.2rem); background: #fff; }
.careers-openings__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3.2rem, 5vw, 4.8rem);
}
.careers-openings__head { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.careers-openings__embed {
  width: 100%;
  max-width: 96rem;
  background: var(--white);
  border: var(--border-width) solid rgba(18, 46, 56, 0.1);
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem -0.4rem rgba(18, 46, 56, 0.08);
}
.careers-openings__frame {
  display: block;
  width: 100%;
  height: 85vh;
  min-height: 128rem;
  border: 0;
  margin-top: -7rem;   /* pull up to hide the Paycom portal's own top nav bar + its drop shadow (clipped by the wrapper's overflow) */
}

/* ===================== HELP ME FIND A PLAN (modal) ===================== */
.hmfp {
  --tagline-bg: #e0f2f0;
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.hmfp[hidden] { display: none; }
body.hmfp-open { overflow: hidden; }
.hmfp__overlay { position: absolute; inset: 0; background: rgba(10, 30, 63, 0.55); }
.hmfp__dialog {
  position: relative;
  width: 100%;
  max-width: 108rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  background: var(--surface-tan);
  border-radius: 1.5rem;
  padding: clamp(3.2rem, 5vw, 6.4rem);
  box-shadow: 0 3.2rem 8rem rgba(10, 30, 63, 0.35);
}
@media (prefers-reduced-motion: no-preference) {
  .hmfp:not([hidden]) .hmfp__dialog { animation: hmfp-in 240ms ease-out both; }
  @keyframes hmfp-in { from { opacity: 0; transform: translateY(1.6rem) scale(0.99); } to { opacity: 1; transform: none; } }
}
.hmfp__close {
  position: absolute;
  top: 1.6rem; right: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-teal);
  cursor: pointer;
}
.hmfp__close:hover { background: rgba(18, 46, 56, 0.06); }

/* Steps */
.hmfp-step { display: flex; flex-direction: column; align-items: flex-start; gap: 2.2rem; }
.hmfp-step[hidden] { display: none; }
.hmfp__eyelash { align-self: flex-start; }
.hmfp__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.6rem, 3.6vw, 3.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--dark-navy);
  max-width: 52rem;
}
.hmfp__lede,
.hmfp__text { font-size: 1.8rem; line-height: 1.55; color: var(--body-copy); max-width: 64rem; }
.hmfp__fineprint { font-size: 1.3rem; color: rgba(64, 64, 64, 0.7); }
.hmfp__error { font-size: 1.4rem; color: #b3261e; }
.hmfp__error[hidden] { display: none; }

/* ZIP step: "Or select your county" + county buttons */
.hmfp-counties { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.hmfp-or { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(64, 64, 64, 0.7); }
button.hmfp-chip { font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; line-height: 1.2; }
button.hmfp-chip:hover { background: rgba(0, 0, 0, 0.16); }

/* Medi-Cal step "Why we're asking" + persistent privacy footer */
.hmfp__why { margin: 1.6rem 0 0; max-width: 64rem; font-size: 1.3rem; line-height: 1.5; color: rgba(64, 64, 64, 0.7); }
.hmfp__why strong { color: var(--body-copy); }
.hmfp__privacy { margin: 2.4rem 0 0; max-width: 64rem; font-size: 1.2rem; line-height: 1.5; color: rgba(64, 64, 64, 0.62); }
.hmfp__privacy a, .hmfp__fineprint a { color: var(--science-blue); text-decoration: underline; }

/* Buttons */
.hmfp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.4rem 2.8rem;
  border-radius: 999rem;
  border: 0.1rem solid transparent;
  font-family: var(--font-body);
  font-size: 1.6rem; font-weight: 600;
  line-height: 1.4;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.hmfp-btn--primary { background: linear-gradient(90deg, #1f6fcc, #1fa8b8); color: var(--white); }
.hmfp-btn--primary:hover { filter: brightness(1.06); color: var(--white); }
.hmfp-btn--outline { background: transparent; border-color: var(--ink-teal); color: var(--ink-teal); font-weight: 400; }
.hmfp-btn--outline:hover { background: var(--ink-teal); color: var(--white); }

.hmfp__choices { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; width: 100%; }
.hmfp__choices--stack { flex-direction: column; align-items: flex-start; }
.hmfp__choices .hmfp-btn { text-align: left; }

/* Back button */
.hmfp__back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 5rem; height: 5rem; padding: 0; flex: none;
  border: 0.1rem solid var(--ink-teal); border-radius: 50%;
  background: transparent; color: var(--ink-teal);
  font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.hmfp__back:hover { background: var(--ink-teal); color: var(--white); }

/* ZIP / email field */
.hmfp-field {
  display: flex; align-items: stretch; gap: 1.2rem;
  background: var(--white);
  border: 0.1rem solid rgba(0, 0, 0, 0.15);
  border-radius: 999rem;
  padding: 0.6rem 0.6rem 0.6rem 2.4rem;
  max-width: 52rem; width: 100%;
}
.hmfp-field__box { display: flex; flex-direction: column; gap: 0.4rem; justify-content: center; flex: 1; min-width: 0; padding: 0.6rem 0; }
.hmfp-field__label { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #4d6b6e; }
.hmfp-field__input {
  border: 0; background: transparent; padding: 0; width: 100%;
  font-family: var(--font-body); font-size: 1.8rem; font-weight: 600; color: var(--ink-teal);
}
.hmfp-field__input:focus { outline: none; }
.hmfp-field__input::placeholder { color: #c0c0c0; opacity: 0.7; font-weight: 600; }
.hmfp-field .hmfp-btn { flex: none; white-space: nowrap; }

/* Result step */
.hmfp-result { display: flex; flex-direction: column; gap: 3.2rem; align-items: flex-start; width: 100%; }
.hmfp-result[hidden] { display: none; }
.hmfp-result__col { display: flex; flex-direction: column; align-items: flex-start; gap: 2.2rem; flex: 1; min-width: 0; }
.hmfp-result__chip {
  align-self: flex-start;
  background: rgba(18, 46, 56, 0.08); border-radius: 0.6rem;
  padding: 0.4rem 1rem; font-size: 1.8rem; color: var(--body-copy);
}

/* Result plan card */
.hmfp-card {
  flex: none;
  width: 100%; max-width: 43.2rem;
  display: flex; flex-direction: column; gap: 1.9rem;
  background: var(--white);
  border: 0.12rem solid rgba(18, 46, 56, 0.08);
  border-radius: 2.4rem;
  box-shadow: 0 2.4rem 5.76rem rgba(18, 46, 56, 0.12);
  padding: 2.8rem;
}
.hmfp-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hmfp-card__badges { display: flex; gap: 1rem; flex-wrap: wrap; }
.hmfp-card__badge {
  background: #e0f2f0; border-radius: 999rem; padding: 0.5rem 1.2rem;
  font-size: 1.3rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-teal);
}
.hmfp-card__id { font-size: 1.4rem; color: #4d6b6e; white-space: nowrap; }
.hmfp-card__name { font-family: var(--font-head); font-weight: 700; font-size: 2.8rem; color: var(--ink-teal); }
.hmfp-card__price { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.hmfp-card__amount { font-family: var(--font-head); font-weight: 700; font-size: 5.6rem; line-height: 1; color: #0b8d85; }
.hmfp-card__per { font-size: 1.7rem; color: #4d6b6e; }
.hmfp-card__chips { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hmfp-card__chip {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: var(--surface-tan); border-radius: 999rem; padding: 0.7rem 1.2rem;
  font-size: 1.4rem; font-weight: 600; color: var(--ink-teal);
}
.hmfp-card__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #0b8d85; flex: none; }

@media (min-width: 900px) {
  .hmfp__dialog {
    min-height: min(70rem, calc(100vh - 4rem));
    display: flex; flex-direction: column; justify-content: center;
  }
  .hmfp-result { flex-direction: row; align-items: flex-end; gap: 3.8rem; }
  .hmfp-result__col { max-width: 47rem; }
}
@media (min-width: 1280px) {
  .hmfp__dialog { padding-inline: 9.6rem; }
}

/* Newsletter submission messages (footer = on navy; modal = on tan) */
.footer__subscribe-msg { margin-top: 0.8rem; font-size: 1.3rem; font-weight: 600; }
.footer__subscribe-msg--ok { color: var(--persian-green); }
.footer__subscribe-msg--error { color: #ff9d8f; }
.hmfp__thanks { font-size: 1.8rem; font-weight: 600; color: var(--ink-teal); }

/* ===================== ANNOUNCEMENT BANNER ===================== */
.ann-dismissed .announcement-bar { display: none; }
.announcement-bar { background: #92d2cb; color: var(--navy-bg); }
.announcement-bar__inner {
  display: flex; align-items: center; gap: 1.2rem;
  max-width: 144rem; margin-inline: auto;
  padding: 0.8rem clamp(1.6rem, 4vw, 6rem);
}
/* Balances the close button so the message stays centered on the bar. */
.announcement-bar--dismissible .announcement-bar__inner::before { content: ""; flex: none; width: 2.8rem; }
.announcement-bar__content {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-family: var(--font-body); font-weight: 600; font-size: 1.6rem; line-height: 1.5;
}
.announcement-bar__content p { margin: 0; }
.announcement-bar__content p + p { margin-top: 0.4rem; }
.announcement-bar__content a { color: inherit; text-decoration: underline; text-underline-offset: 0.2rem; }
.announcement-bar__content a:hover { text-decoration: none; }
.announcement-bar__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem; padding: 0;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--navy-bg); cursor: pointer;
}
.announcement-bar__close:hover { background: rgba(0, 38, 76, 0.12); }
.announcement-bar__close svg { width: 2.2rem; height: 2.2rem; }

/* ============================== 404 ============================== */
.notfound { padding-block: clamp(6.4rem, 12vw, 12rem); text-align: center; }
.notfound__inner { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 64rem; margin: 0 auto; }
.notfound__code { font-family: var(--font-head); font-weight: 700; font-size: clamp(8rem, 18vw, 16rem); line-height: 1; letter-spacing: -0.02em; color: var(--science-blue); }
.notfound__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.8rem, 4vw, 4rem); line-height: 1.15; color: var(--dark-navy); }
.notfound__text { font-size: 1.8rem; line-height: 1.6; color: var(--body-copy); }
.notfound__search { display: flex; align-items: center; gap: 0.8rem; width: 100%; max-width: 44rem; margin-top: 0.8rem; padding: 0.6rem 0.6rem 0.6rem 1.6rem; background: #fff; border: var(--border-width) solid #d4dcde; border-radius: var(--radius-pill); }
.notfound__search svg { flex: none; color: var(--ink-teal); }
.notfound__search input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--font-body); font-size: 1.6rem; color: var(--ink-teal); }
.notfound__search input:focus { outline: none; }
.notfound__search button { flex: none; border: 0; border-radius: var(--radius-pill); padding: 1rem 2rem; background: var(--science-blue); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 1.5rem; cursor: pointer; }
.notfound__search button:hover { background: var(--dark-navy); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; margin-top: 0.8rem; }
.notfound__links { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: center; margin-top: 1.6rem; }
.notfound__links a { color: var(--science-blue); text-decoration: none; font-weight: 600; font-size: 1.5rem; }
.notfound__links a:hover { text-decoration: underline; }