/* ============================================
   Medicare Rights Center — Redesign Stylesheet
   Mobile-first, accessible, WCAG AA compliant
   Aligned with MRC Brand Design System (Flock & Rally)
   ============================================ */

/* --- @font-face: Avenir LT Std (primary, licensed) --- */
@font-face { font-family: 'Avenir LT Std'; font-weight: 300; font-style: normal;  src: url('../fonts/avenir/AvenirLTStd-Light.otf') format('opentype');         font-display: swap; }
@font-face { font-family: 'Avenir LT Std'; font-weight: 300; font-style: italic;  src: url('../fonts/avenir/AvenirLTStd-LightOblique.otf') format('opentype');  font-display: swap; }
@font-face { font-family: 'Avenir LT Std'; font-weight: 400; font-style: normal;  src: url('../fonts/avenir/AvenirLTStd-Book.otf') format('opentype');          font-display: swap; }
@font-face { font-family: 'Avenir LT Std'; font-weight: 400; font-style: italic;  src: url('../fonts/avenir/AvenirLTStd-BookOblique.otf') format('opentype');   font-display: swap; }
@font-face { font-family: 'Avenir LT Std'; font-weight: 450; font-style: normal;  src: url('../fonts/avenir/AvenirLTStd-Roman.otf') format('opentype');         font-display: swap; }
@font-face { font-family: 'Avenir LT Std'; font-weight: 450; font-style: italic;  src: url('../fonts/avenir/AvenirLTStd-Oblique.otf') format('opentype');       font-display: swap; }
@font-face { font-family: 'Avenir LT Std'; font-weight: 500; font-style: normal;  src: url('../fonts/avenir/AvenirLTStd-Medium.otf') format('opentype');        font-display: swap; }
@font-face { font-family: 'Avenir LT Std'; font-weight: 500; font-style: italic;  src: url('../fonts/avenir/AvenirLTStd-MediumOblique.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Avenir LT Std'; font-weight: 800; font-style: normal;  src: url('../fonts/avenir/AvenirLTStd-Heavy.otf') format('opentype');         font-display: swap; }
@font-face { font-family: 'Avenir LT Std'; font-weight: 800; font-style: italic;  src: url('../fonts/avenir/AvenirLTStd-HeavyOblique.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Avenir LT Std'; font-weight: 900; font-style: normal;  src: url('../fonts/avenir/AvenirLTStd-Black.otf') format('opentype');         font-display: swap; }
@font-face { font-family: 'Avenir LT Std'; font-weight: 900; font-style: italic;  src: url('../fonts/avenir/AvenirLTStd-BlackOblique.otf') format('opentype');  font-display: swap; }

/* --- @font-face: Franklin Gothic ITC (accent, licensed) --- */
@font-face { font-family: 'Franklin Gothic'; font-weight: 400; font-style: normal; src: url('../fonts/franklin-gothic/FranklinGothic-Book.ttf') format('truetype');   font-display: swap; }
@font-face { font-family: 'Franklin Gothic'; font-weight: 500; font-style: normal; src: url('../fonts/franklin-gothic/FranklinGothic-Medium.ttf') format('truetype'); font-display: swap; }
/* Demi (600) and Heavy (700) weights pending — Medium used as fallback */
@font-face { font-family: 'Franklin Gothic'; font-weight: 600; font-style: normal; src: url('../fonts/franklin-gothic/FranklinGothic-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Franklin Gothic'; font-weight: 700; font-style: normal; src: url('../fonts/franklin-gothic/FranklinGothic-Medium.ttf') format('truetype'); font-display: swap; }

/* --- CSS Custom Properties --- */
:root {
  /* Primary palette (brand guide: Flock & Rally) */
  --blue-900: #03386e;
  --blue-950: #022a54;
  --blue-800: #0e4a8a;
  --blue-700: #1a5fa8;
  --blue-600: #2570b8;
  --blue-500: #3d8fd4;
  --blue-400: #6aaee0;
  --blue-100: #dbeafe;
  --blue-50: #f0f6ff;

  /* Green accent — kelly green per brand guide */
  --green-accent: #47ab47;
  --green-dark: #3c9a3c;
  --green-700: #1f7a20;  /* AA on white — safe for text */
  --green-800: #166534;  /* AAA on white — safe for small-caps labels */
  --green-light: #e8f4e4;
  --lime-accent: #a8d159;

  /* Teal set */
  --teal-800: #1a6a5e;
  --teal-700: #1a7a6d;
  --teal-600: #338233;
  --teal-500: #3d9a3d;
  --teal-100: #e6f4e6;

  /* Gold */
  --gold-500: #d4a843;
  --gold-100: #fef9c3;
  --gold-800: #8b6914;  /* AA on --gold-100 — safe for press-tag text */

  /* Blue tint step — fills the gap between 100 and 400 */
  --blue-200: #bfdbfe;

  /* Brand secondary palette */
  --coral: #ed664a;
  --amber: #faa340;
  --teal-brand: #038cad;
  --blue-brand: #0a4f8f;
  --mint: #63c4bf;

  /* Red — alerts, errors */
  --red-600: #c8553d;
  --red-500: #dc6b55;
  --red-100: #fde8e4;

  /* Neutrals — navy-harmonized per brand guide */
  --gray-900: #0d1f36;
  --gray-800: #3c4a5e;
  --gray-700: #4a5568;
  --gray-600: #6b7a8f;
  --gray-500: #8a95a6;
  --gray-400: #aab4c2;
  --gray-300: #d9dee5;
  --gray-200: #e3e7ed;
  --gray-100: #f4f6f9;
  --gray-50: #f4f6f9;
  --white: #ffffff;
  --cream: #fbfaf6;

  /* Semantic aliases */
  --ink: var(--gray-900);
  --graphite: var(--gray-800);
  --slate: var(--gray-600);
  --mist: var(--gray-400);
  --fog: var(--gray-300);
  --paper: var(--gray-100);
  --border-1: var(--gray-200);
  --border-2: #c7cfd9;
  --bg-accent-soft: #e8f4e4;
  --bg-navy-soft: #e6ecf3;
  --photo-overlay: #476169;

  /* Typography */
  --font-primary: 'Avenir LT Std', 'Avenir', 'Avenir Next', 'Nunito Sans', system-ui, sans-serif;
  --font-accent: 'Franklin Gothic', 'Franklin Gothic Medium', 'Libre Franklin', Arial, sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 3.5rem;
  --space-4xl: 5rem;

  /* Sizing */
  --max-width: 1200px;
  --header-height: 72px;

  /* Shadows — navy-tinted per brand guide */
  --shadow-sm: 0 2px 6px rgba(3,56,110,0.08), 0 1px 2px rgba(3,56,110,0.04);
  --shadow-md: 0 8px 20px rgba(3,56,110,0.10), 0 2px 6px rgba(3,56,110,0.06);
  --shadow-lg: 0 20px 40px rgba(3,56,110,0.14), 0 6px 12px rgba(3,56,110,0.08);
  --shadow-xl: 0 20px 40px rgba(3,56,110,0.14), 0 6px 12px rgba(3,56,110,0.08);
  --shadow-card-hover: 0 16px 48px rgba(3,56,110,0.14);
  --shadow-focus: 0 0 0 3px rgba(71,171,71,0.35);

  /* Radii — brand guide: 4/8/14/22/pill */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Animation */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;

  /* --- Design System semantic aliases (v4.5.51) --- */
  /* Text tokens — every alias points at an AA-safe color on white.
     fg1 = primary body (gray-900), fg2 = secondary body (gray-700),
     fg-meta = small caption/label text (gray-700, AAA-safe at small sizes). */
  --fg1: var(--ink);
  --fg2: var(--gray-700);
  --fg-meta: var(--gray-700);
  --fg-inverse: var(--white);

  /* Surface tokens */
  --bg: var(--white);
  --bg-soft: var(--paper);
  --bg-tint-navy: var(--bg-navy-soft);
  --bg-tint-green: var(--bg-accent-soft);
  --bg-inverse: var(--blue-900);
  --hairline: var(--border-1);

  /* Link tokens */
  --link: var(--blue-brand);
  --link-hover: var(--blue-900);

  /* Brand name aliases */
  --navy: var(--blue-900);
  --navy-deep: var(--blue-950);
  --kelly: var(--green-accent);
  --kelly-dark: var(--green-dark);

  /* Missing radius */
  --radius-xs: 2px;
  --radius-button: 24px;

  /* Missing shadow */
  --shadow-xs: 0 1px 2px rgba(3,56,110,0.06);

  /* Missing spacing */
  --space-2xs: 4px;

  /* Layout aliases */
  --container-max: var(--max-width);
  --container-pad: var(--space-lg);

  /* Motion — additional values */
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --duration-xs: 120ms;
  --duration-md: 240ms;
  --duration-lg: 320ms;

  /* Font aliases */
  --font-sans: var(--font-primary);
  --font-display: var(--font-accent);

}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-primary);
  overflow-x: hidden;
  font-size: 1.125rem; /* 18px — accessible base */
  line-height: 1.7; /* generous for readability */
  color: var(--gray-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--blue-brand, #0a4f8f);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  transition: color 120ms var(--ease-out, ease-out);
}

a:hover {
  color: var(--blue-900, #03386e);
  text-decoration-thickness: 2px;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-accent);
  font-weight: 600;
  line-height: 1.25;
  color: var(--blue-900);
}

ul {
  list-style: none;
}

/* --- Skip Link --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  background: var(--blue-800);
  color: var(--white);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: 1000;
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-md);
  color: var(--white);
}

/* --- Container --- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* --- Utility Bar — calm, persistent, never shouts --- */
.utility-bar {
  background: var(--blue-900);
  color: var(--white);
  padding: var(--space-sm) 0;
  font-size: 0.8rem;
  overflow: hidden;
  transition:
    transform 0.3s var(--ease-out, ease-out),
    opacity   0.3s var(--ease-out, ease-out);
}

/* Dismiss/hide: slide + fade on compositor; collapse space instantly.
   Animating max-height/padding triggers layout per frame; the dismiss
   is user-initiated and the below-content jump is intentional. */
.utility-bar.hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.utility-bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
}

.utility-text {
  opacity: 0.8;
}

.helpline-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  padding: 6px 16px;
  min-height: 44px;  /* WCAG AAA 2.5.5 — critical tap-to-call */
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  transition: background-color 0.2s var(--ease-out, ease-out);
  text-decoration: none;
}

.helpline-link:hover {
  background: rgba(255,255,255,0.25);
  color: var(--white);
}

.utility-bar-dismiss {
  background: none;
  border: none;
  color: var(--white);
  opacity: 0.6;
  cursor: pointer;
  width: 44px;   /* WCAG AAA 2.5.5 touch target */
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s var(--ease-out, ease-out);
}

.utility-bar-dismiss:hover,
.utility-bar-dismiss:focus-visible {
  opacity: 1;
}

.utility-bar-dismiss svg {
  width: 14px;
  height: 14px;
}

/* --- Header --- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.3s;
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--space-lg);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-mark {
  display: flex;
  align-items: center;
  background: var(--blue-800);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  gap: 1px;
}

.logo-mark span {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--white);
  letter-spacing: -0.5px;
}

.logo-mark .logo-r {
  color: var(--gold-500);
}

/* v4.6.133: retired .logo-text + .logo-name + .logo-tagline rules. The
   prior header fallback (MRC monogram + text wordmark) used these classes;
   the new fallback renders a single SVG wordmark instead. The .logo-mark
   family is preserved above because the footer's last-resort fallback in
   template-parts/footer-about.php still uses it. */

/* SVG wordmark — theme-default header logo when no Customizer logo set.
   Sized to match .logo-custom's 280×48 desktop / 200×42 mobile envelope
   so the visual weight is consistent whether the editor uploads their
   own logo via Customizer or falls back to the brand-spine SVG. */
.logo-svg {
  display: block;
  height: 48px;
  width: auto;
  max-width: 280px;
}

/* Custom Logo (uploaded via Site Identity)
   Aggressive constraints to handle any image size.
   WordPress outputs: .logo-custom > a.custom-logo-link > img.custom-logo */
.logo-custom {
  flex-shrink: 0;
  max-width: 280px;
  max-height: 48px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.logo-custom a,
.logo-custom .custom-logo-link {
  display: block;
  line-height: 0;
  max-height: 48px;
}

/* Target every possible way the image could be rendered */
.logo-custom img,
.logo-custom a img,
.header-inner .custom-logo-link img,
.header-inner img.custom-logo,
.site-header img.custom-logo {
  display: block;
  max-height: 48px !important;
  max-width: 280px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 1024px) {
  .logo-custom,
  .logo-custom a {
    max-height: 42px;
    max-width: 200px;
  }
  .logo-custom img,
  .header-inner img.custom-logo {
    max-height: 42px !important;
    max-width: 200px !important;
  }
  .logo-svg {
    height: 42px;
    max-width: 200px;
  }
}

@media (max-width: 768px) {
  .logo-custom,
  .logo-custom a {
    max-height: 36px;
    max-width: 160px;
  }
  .logo-custom img,
  .header-inner img.custom-logo {
    max-height: 36px !important;
    max-width: 160px !important;
  }
  .logo-svg {
    height: 36px;
    max-width: 160px;
  }
}

/* Nav */
.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  align-items: stretch;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list > li {
  display: flex;
  align-items: center;
}

.nav-list a {
  color: var(--gray-800);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  transition:
    background-color 0.2s var(--ease-out, ease-out),
    color            0.2s var(--ease-out, ease-out);
  white-space: nowrap;
  text-decoration: none;
}

.nav-list a:hover {
  color: var(--blue-800);
  background: var(--blue-50);
}

.nav-list a.nav-active {
  color: var(--blue-700);
}

/* Parent nav item with children */
.nav-item-parent {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0;
}

.nav-item-parent a {
  padding-right: var(--space-xs);
}

.submenu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--fg-meta);
  display: flex;
  align-items: center;
  transition: transform 0.2s;
}

.submenu-open > .nav-item-parent .submenu-toggle {
  transform: rotate(180deg);
}

/* Desktop sub-menu dropdown */
.has-submenu {
  position: relative;
}

/* Mobile disclosure: max-height transition is intentional — the <ul>
   has multiple direct <li> children, so the grid-template-rows: 0fr→1fr
   pattern would require restructuring the nav HTML with a wrapper. */
.sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-out, ease-out);
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  padding: 0;
  z-index: 100;
  list-style: none;
}

.sub-menu.is-open {
  max-height: 500px;
  padding: var(--space-sm) 0;
}

/* Desktop: open sub-menu on hover */
@media (min-width: 769px) {
  .sub-menu {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.2s var(--ease-out, ease-out),
      visibility 0.2s var(--ease-out, ease-out);
  }

  .has-submenu:hover > .sub-menu,
  .has-submenu:focus-within > .sub-menu,
  .sub-menu.is-open {
    max-height: none;
    overflow: visible;
    padding: var(--space-sm) 0;
    opacity: 1;
    visibility: visible;
  }

  .has-submenu:hover > .nav-item-parent .submenu-toggle svg {
    transform: rotate(180deg);
  }
}

.sub-menu li {
  margin: 0;
}

.sub-menu a {
  display: block;
  padding: var(--space-sm) var(--space-lg) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--fg2) !important;
  white-space: nowrap;
  border-radius: 0 !important;
  text-decoration: none !important;
}

.sub-menu a:hover {
  background: var(--gray-50) !important;
  color: var(--blue-700) !important;
}

/* Mobile-only elements (hidden on desktop). v4.6.78: .mobile-nav-donate-top
   added to this rule — the v4.6.76 mobile donate elevation was rendering
   on desktop too (lives inside .main-nav which is the visible nav bar on
   desktop), producing two donate buttons on the header. */
.mobile-nav-header,
.mobile-nav-helpline,
.mobile-nav-search,
.mobile-nav-donate-top,
.mobile-nav-footer {
  display: none;
}

/* Mobile nav overlay backdrop */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s;
}

.mobile-nav-overlay.is-open {
  display: block;
  opacity: 1;
}

/* Hide donate button on mobile (it's inside the slide menu) */
.desktop-only {
  display: inline-flex;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

.search-btn {
  background: var(--teal-600);
  border: none;
  cursor: pointer;
  color: var(--white);
  padding: var(--space-sm);
  width: 44px;   /* WCAG AAA 2.5.5 touch target */
  height: 44px;
  border-radius: 50%;
  transition:
    background-color 0.2s var(--ease-out, ease-out),
    color            0.2s var(--ease-out, ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-btn:hover {
  background: #2a6e2a;
  color: var(--white);
}

/* =============================================================================
   SEARCH OVERLAY — Full-screen overlay with live results
   ============================================================================= */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out, ease-out), visibility 0.25s var(--ease-out, ease-out);
}

.search-overlay.is-active {
  visibility: visible;
  opacity: 1;
}

.search-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.search-overlay__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  margin: 10vh auto 0;
  background: var(--white, #fff);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 20px 60px rgba(3, 56, 110, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  transform: translateY(-20px);
  transition: transform 0.25s var(--ease-out, ease-out);
}

.search-overlay.is-active .search-overlay__inner {
  transform: translateY(0);
}

.search-overlay__header {
  border-bottom: 1px solid var(--gray-200, #e5e5ea);
}

.search-overlay__form {
  display: flex;
  align-items: center;
  padding: var(--space-md, 1rem) var(--space-xl, 2rem);
  gap: var(--space-md, 1rem);
}

.search-overlay__icon {
  flex-shrink: 0;
  color: var(--gray-400, #b0b0ba);
}

.search-overlay__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-primary);
  font-size: 1.25rem;
  color: var(--gray-900, #1a1a2e);
  background: transparent;
  padding: var(--space-sm, 0.5rem) 0;
}

.search-overlay__input::placeholder {
  color: var(--gray-400, #b0b0ba);
}

.search-overlay__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400, #b0b0ba);
  padding: var(--space-xs, 0.25rem);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.search-overlay__close:hover {
  color: var(--gray-700, #4a4a5a);
  background: var(--gray-100, #f3f4f6);
}

/* Results */
.search-overlay__results {
  overflow-y: auto;
  padding: 0 var(--space-xl, 2rem) var(--space-md, 1rem);
  flex: 1;
}

.search-overlay__group {
  padding-top: var(--space-md, 1rem);
}

.search-overlay__group + .search-overlay__group {
  border-top: 1px solid var(--gray-100, #f3f4f6);
}

.search-overlay__group-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500, #8b8b98);
  margin: 0 0 var(--space-sm, 0.5rem);
  padding: 0;
}

.search-overlay__group-count {
  font-weight: 400;
  color: var(--gray-400, #b0b0ba);
}

.search-overlay__item {
  display: block;
  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  margin: 0 calc(-1 * var(--space-md, 1rem));
  border-radius: var(--radius-md, 10px);
  text-decoration: none;
  color: var(--gray-800, #2d2d3a);
  transition: background 0.15s;
}

.search-overlay__item:hover {
  background: var(--gray-50, #f8f9fb);
  color: var(--gray-800, #2d2d3a);
}

.search-overlay__item-title {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 2px;
}

.search-overlay__item-title mark {
  background: var(--blue-100, #dbeafe);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.search-overlay__item-excerpt {
  display: block;
  font-size: 0.82rem;
  color: var(--gray-500, #8b8b98);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-overlay__item-date {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-400, #b0b0ba);
  margin-top: 2px;
}

.search-overlay__view-all {
  text-align: center;
  padding: var(--space-lg, 1.5rem) 0 var(--space-sm, 0.5rem);
}

.search-overlay__empty {
  text-align: center;
  color: var(--gray-500, #8b8b98);
  padding: var(--space-2xl, 2rem) 0;
  font-size: 0.95rem;
}

/* Loading animation */
.search-overlay__loading {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: var(--space-2xl, 2rem) 0;
}

.search-overlay__loading span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-300, #d1d1d8);
  animation: searchPulse 1.2s ease-in-out infinite;
}

.search-overlay__loading span:nth-child(2) { animation-delay: 0.2s; }
.search-overlay__loading span:nth-child(3) { animation-delay: 0.4s; }

@keyframes searchPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

.search-overlay__footer {
  padding: var(--space-sm, 0.5rem) var(--space-xl, 2rem);
  border-top: 1px solid var(--gray-100, #f3f4f6);
  text-align: center;
}

.search-overlay__hint {
  font-size: 0.75rem;
  color: var(--gray-400, #b0b0ba);
}

/* Mobile */
@media (max-width: 768px) {
  .search-overlay__inner {
    margin: 0;
    max-height: 100vh;
    border-radius: 0;
    max-width: 100%;
  }

  .search-overlay__form {
    padding: var(--space-md, 1rem);
  }

  .search-overlay__input {
    font-size: 1.1rem;
  }

  .search-overlay__results {
    padding: 0 var(--space-md, 1rem) var(--space-md, 1rem);
  }
}

/* =============================================================================
   SEARCH RESULTS PAGE
   ============================================================================= */
.search-results-section {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.search-refine {
  margin-bottom: var(--space-2xl);
}

.search-refine-form {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.search-refine-form svg {
  flex-shrink: 0;
  color: var(--gray-400);
}

.search-refine-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1rem;
  font-family: var(--font-primary);
  color: var(--gray-900);
  outline: none;
}

.search-result {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--gray-200);
}

.search-result:first-child {
  padding-top: 0;
}

.search-result__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.search-result__meta time {
  font-size: 0.85rem;
  color: var(--fg-meta);
}

.search-result__title {
  font-size: 1.15rem;
  line-height: 1.4;
  margin: 0 0 var(--space-xs);
}

.search-result__title a {
  color: var(--gray-900);
  text-decoration: none;
}

.search-result__title a:hover {
  color: var(--blue-700);
}

.search-result__excerpt {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

.search-pagination {
  padding-top: var(--space-2xl);
  text-align: center;
}

.search-no-results {
  text-align: center;
  padding: var(--space-3xl) 0;
}

.search-no-results h2 {
  font-size: 1.5rem;
  color: var(--gray-800);
  margin-bottom: var(--space-sm);
}

.search-no-results p {
  color: var(--gray-600);
  margin-bottom: var(--space-xl);
}

.search-no-results .search-form {
  max-width: 500px;
  margin: 0 auto var(--space-2xl);
}

.search-suggestions {
  max-width: 400px;
  margin: 0 auto;
  text-align: left;
}

.search-suggestions h3 {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-meta);
  margin-bottom: var(--space-md);
}

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

.search-suggestions li {
  margin-bottom: var(--space-sm);
}

.search-suggestions a {
  color: var(--blue-700);
  font-weight: 500;
}

@media (max-width: 768px) {
  .search-refine-form {
    padding: var(--space-sm) var(--space-md);
  }

  .search-result__title {
    font-size: 1.05rem;
  }
}

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  width: 44px;
  height: 44px;
}

.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gray-700);
  transition:
    transform        0.3s var(--ease-out, ease-out),
    background-color 0.3s var(--ease-out, ease-out),
    opacity          0.3s var(--ease-out, ease-out);
  border-radius: 2px;
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Icon system (v4.6.67) ---
   Base styling for SVGs rendered via mrc_icon() / mrc_icon_e(). Width and
   height come from the helper's `size` arg (inline width/height attrs);
   .mrc-icon just ensures consistent inline-flex behavior and currentColor
   inheritance. Per-icon overrides come via the `class` arg or the
   per-icon variant `.mrc-icon--<name>` automatically applied by the
   helper. See inc/icons.php for usage. */
.mrc-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  fill: currentColor;
}

.mrc-icon path,
.mrc-icon circle,
.mrc-icon rect,
.mrc-icon line,
.mrc-icon polyline,
.mrc-icon polygon {
  /* SVGs in the library are committed with either stroke=currentColor or
     fill=currentColor on the root. These per-shape declarations don't
     override that — they're a defensive belt for any future icons whose
     authors forget the root attribute. */
}

/* --- Buttons (brand guide: rounded-rect, sentence case, navy primary) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 15px;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color            var(--duration-fast) var(--ease-standard),
    border-color     var(--duration-fast) var(--ease-standard),
    box-shadow       var(--duration-fast) var(--ease-standard),
    transform        var(--duration-fast) var(--ease-standard);
  text-decoration: none;
  line-height: 1.4;
  min-height: 48px; /* WCAG touch target */
}

.btn:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-xs);
}

/* Primary — navy background, white text */
.btn.btn-primary,
a.btn-primary,
button.btn-primary {
  background: var(--blue-900) !important;
  background-color: var(--blue-900) !important;
  color: var(--white) !important;
  border-color: var(--blue-900) !important;
}

.btn.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  background: var(--blue-950) !important;
  background-color: var(--blue-950) !important;
  border-color: var(--blue-950) !important;
  color: var(--white) !important;
}

/* Accent — kelly green, white text (the CTA "call to action" variant) */
.btn.btn-accent,
a.btn-accent,
button.btn-accent {
  background: var(--green-accent) !important;
  background-color: var(--green-accent) !important;
  color: var(--white) !important;
  border-color: var(--green-accent) !important;
}

.btn.btn-accent:hover,
a.btn-accent:hover,
button.btn-accent:hover {
  background: var(--green-dark) !important;
  background-color: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
  color: var(--white) !important;
}

/* Secondary — alias for accent (backward compat: was navy, now green) */
.btn.btn-secondary,
a.btn-secondary,
button.btn-secondary {
  background: var(--green-accent) !important;
  background-color: var(--green-accent) !important;
  color: var(--white) !important;
  border-color: var(--green-accent) !important;
}

.btn.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
  background: var(--green-dark) !important;
  background-color: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
  color: var(--white) !important;
}

/* Ghost / tertiary — white bg, navy border */
.btn-tertiary,
.btn-ghost {
  background: var(--white);
  color: var(--blue-900);
  border-color: var(--blue-900);
}

.btn-tertiary:hover,
.btn-ghost:hover {
  background: var(--bg-navy-soft);
  color: var(--blue-900);
}

/* Outline — navy border, transparent bg */
.btn-outline {
  background: transparent;
  color: var(--blue-900);
  border-color: var(--blue-900);
}

.btn-outline:hover {
  background: var(--bg-navy-soft);
}

/* Outline light — for dark backgrounds */
.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}

.btn-outline-light:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--white);
  color: var(--white);
}

/* Link button — text-only with underline */
.btn-link {
  background: transparent;
  color: var(--blue-brand);
  border: none;
  padding: 11px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: auto;
}

.btn-link:hover {
  color: var(--blue-900);
}

/* Donate — v4.6.76 (Brand-spine v5.0): confident signal-color chrome.
   The kelly green accent (var(--green-accent) #47ab47) is the rare-by-
   design accent the brief licenses for "primary action, campaign flag,
   highlighted verdict." Donate is the canonical primary-action moment —
   it earns the full green weight. Bumped padding (14px 32px) + weight
   700 make the button unmissable amid nav links and close-stack siblings.
   Border-radius stays --radius-md (preserves brand-spine continuity —
   not a full pill, not a generic-nonprofit affordance). */
.btn.btn-donate,
a.btn-donate {
  background: var(--green-accent) !important;
  background-color: var(--green-accent) !important;
  color: var(--white) !important;
  border-color: var(--green-accent) !important;
  padding: 14px 32px;
  font-weight: 700;
}

.btn.btn-donate:hover,
a.btn-donate:hover,
.btn.btn-donate:focus-visible,
a.btn-donate:focus-visible {
  background: var(--green-dark) !important;
  background-color: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
  color: var(--white) !important;
  outline: none;
}

.btn-lg {
  padding: 14px 26px;
  font-size: 16px;
}

.btn-xl {
  padding: 16px 32px;
  font-size: 16px;
}

/* Hero CTA variant — wider padding + slightly smaller text so the button
   doesn't compete with display headlines on the navy hero. */
.btn-hero {
  padding: 16px 36px;
  font-size: 0.95rem;
}

.btn-sm {
  font-size: 14px;
  padding: 7px 14px;
  min-height: 44px;  /* WCAG AAA 2.5.5 touch target */
}

/* --- Section Helpers --- */
/* Editorial kicker: Franklin Gothic, uppercase, letterspaced kelly green.
   No colored side-stripe — hierarchy comes from the typography alone. */
.section-label {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-800);
  margin-bottom: var(--space-md);
}

/* Centered sections simply re-align — no stripe to undo */
.stories .section-label,
.latest .section-label,
.stories-spotlight .section-label {
  display: block;
  text-align: center;
}

/* Section h2 — one fluid scale shared by the `.section-title` class and by the
   raw `<h2>`s that live inside opinionated section containers (policy, get-help).
   Keeping them on one rule prevents the mobile inversion that was happening
   when `.section-title` shrank to 1.75rem while `.policy-content h2` stayed
   pinned at 2rem. Scale is tuned so the ratio to the hero h1 above stays
   ≥1.25 from 360px through 1600px — verified by hand. */
.section-title,
.policy-content h2,
.get-help-content h2 {
  font-family: var(--font-accent);
  /* 28px @ 400px → 42px @ 1600px. */
  font-size: clamp(1.75rem, 1.2vw + 1.45rem, 2.625rem);
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--blue-900);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-family: var(--font-accent);
  font-size: 1.15rem;
  font-weight: 400;
  font-style: italic;
  color: var(--gray-600);
  max-width: 640px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.6;
}

/* Full-bleed section: breaks out of container */
.section-full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

/* Editorial arrow-link — one shared idiom for every "go somewhere" affordance
   that isn't a filled button. Replaces .pathways-primary-link,
   .pathways-secondary-cue, .latest-strip-more, .stories-spotlight-more.
   The arrow lives in `::after` so HTML stays free of inline glyph spans. */
.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-family: var(--font-accent);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--blue-800);
  text-decoration: none;
  min-height: 44px; /* WCAG 2.5.5 touch target when standalone */
  transition: color 0.2s var(--ease-out, ease-out);
}

.arrow-link::after {
  content: '→';
  display: inline-block;
  transition: transform 0.25s var(--ease-out, ease-out);
  will-change: transform;
}

.arrow-link:hover,
.arrow-link:focus-visible {
  color: var(--green-800);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.arrow-link:hover::after,
.arrow-link:focus-visible::after {
  transform: translateX(4px);
}

/* Compact variant for cues nested inside block-level parent links (e.g. the
   cue inside .pathways-secondary-item). Drops the touch-target floor because
   the parent <a> carries it, and drops the underline because a :hover on the
   parent cascades to the descendant span and an underlined cue inside an
   already-signaling parent reads as a second nested link. */
.arrow-link--cue {
  font-size: 0.875rem;
  min-height: 0;
}

.arrow-link--cue:hover,
.arrow-link--cue:focus-visible {
  text-decoration: none;
}

/* --- Hero — warm, layered, people-forward --- */

/* Entrance cascade: each content element fades + slides up 10px on mount.
   Staggered 100ms apart; full cascade settles in ~900ms. Respects
   prefers-reduced-motion via the global reset at `@media (prefers-reduced-
   motion: reduce)` which zeros animation-duration theme-wide. */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero {
  position: relative;
  background: var(--blue-900, #03386e);
  color: var(--white);
  padding: var(--space-4xl) 0;
  overflow: hidden;
  isolation: isolate;
}

/* Hero decoration intentionally removed in the /quieter pass.
   The previous version stacked six decorative layers (lime radial glow, lime
   blade gradient, network SVG watermark, lime figure-accent block, dotted
   particle flourish, skewed highlighter underline) that collectively read as
   the corporate-healthtech hero signature and reduced contrast on copy for
   low-vision users. The single surviving lime accent is `.hero-figure-accent`
   below — one assertive block behind the photo, matching the brand's
   "kelly green as rare accent" principle (60-30-10 by visual weight). */

.hero-watermark {
  position: absolute;
  top: 50%;
  right: clamp(-1rem, -2vw, -3rem);
  transform: translateY(-50%);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(5rem, 13vw, 13rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  text-align: right;
}

@media (max-width: 720px) {
  .hero-watermark {
    display: none;
  }
}

/* Inner grid — content left, optional figure right */
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-4xl);
  align-items: center;
}

.hero--no-image .hero-inner {
  grid-template-columns: minmax(0, 1fr);
}

.hero--no-image .hero-content {
  max-width: 760px;
}

.hero-content {
  position: relative;
}

/* Eyebrow — Franklin Gothic, lime, all-caps. Bare letterspaced caps,
   no pill chrome. Tinted-pill kickers are an AI/SaaS-marketing tell —
   none of the editorial references (ACLU, ProPublica, Marshall Project,
   Atlantic) use them; the 60-30-10 accent rule also forbids decorative
   tinted surfaces. Treatment matches `.section-label` elsewhere. */
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime-accent, #a8d159);
  margin-bottom: var(--space-md);
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
}

.hero h1 {
  font-family: var(--font-primary);
  font-weight: 800;
  /* Fluid between 2.25rem @ 400px (36px) and 4rem @ 1200px viewport (64px).
     Floor raised so the ratio to .section-title stays ≥1.25 on mobile —
     previously a 30px h1 vs 28px section-title was nearly indistinguishable. */
  font-size: clamp(2.25rem, 3.2vw + 1.45rem, 4rem);
  color: var(--white);
  margin-bottom: var(--space-lg);
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 100ms;
}

/* Accent word — lime color + native lime underline. Using `text-decoration`
   instead of an absolutely-positioned `::after` rule means the underline
   tracks the word naturally when it wraps across lines — no more need for
   `white-space: nowrap` (which could force the h1 to overflow on narrow
   viewports if an editor chose a long accent word). */
.hero-accent-word {
  color: var(--lime-accent, #a8d159);
  text-decoration-line: underline;
  text-decoration-color: var(--lime-accent, #a8d159);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

.hero-subtitle {
  font-size: 1.2rem;
  opacity: 0.92;
  line-height: 1.6;
  margin-bottom: var(--space-xl);
  max-width: 34em;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 200ms;
}

.hero-cta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 300ms;
  margin-bottom: var(--space-lg);
}

/* Trust row — small, warm, letterspaced. Weight and opacity raised so the line
   stays legible against the hero's decorated navy ground (the 13px/72%-white
   version previously sat near the AA contrast boundary for low-vision users). */
.hero-trust {
  font-family: var(--font-accent);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 400ms;
}

/* Figure — photo card with lime accent block peeking behind */
.hero-figure {
  position: relative;
  aspect-ratio: 4 / 4.4;
  max-width: 520px;
  justify-self: end;
  width: 100%;
}

/* The one surviving lime element in the hero — a solid block peeking behind
   the photo. No opacity (this IS the hero's accent — it should be committed);
   no dotted flourish `::before` (that was faux-editorial AI decoration). */
.hero-figure-accent {
  position: absolute;
  top: 6%;
  right: -4%;
  width: 70%;
  height: 60%;
  background: var(--lime-accent, #a8d159);
  border-radius: var(--radius-xl);
  z-index: 0;
}

.hero-figure-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 50px -15px rgba(2, 42, 84, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.06);
  background: var(--blue-950, #022a54);
}

.hero-figure-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive — stack at tablet, tighten at mobile */
@media (max-width: 960px) {
  .hero {
    padding: var(--space-2xl) 0 var(--space-3xl);
  }
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
  }
  .hero-figure {
    order: -1;
    max-width: 420px;
    justify-self: start;
    aspect-ratio: 5 / 4;
  }
}

@media (max-width: 640px) {
  .hero h1 {
    line-height: 1.12;
  }
  .hero-subtitle {
    /* Meet the brand's 18px body floor at the page's most emotionally
       loaded reading moment — older eyes are the baseline reader, not an
       edge case. Was 1rem / 16px, below floor. */
    font-size: 1.125rem;
    line-height: 1.6;
  }
  .hero-cta {
    flex-direction: column;
    width: 100%;
  }
  .hero-cta .btn {
    width: 100%;
    text-align: center;
  }
  .hero-figure {
    max-width: 100%;
  }
  .hero-figure-accent {
    right: -6%;
  }
  .hero-trust {
    /* Was 0.75rem / 12px — below any reasonable legibility floor for a
       tinted-white line on a decorated navy ground. */
    font-size: 0.875rem;
  }
}

/* --- Pathways (asymmetric, help-seeker-dominant) ---

   Reshaped in the /shape pass from a symmetric 3-up icon-heading-paragraph
   grid (verbatim Anti-reference #1) into a 60/40 editorial composition:
   left column leads with the helpline phone as a typographic display element,
   right column is a quiet editorial list of the two supporting paths. The
   point is the cognitive-load fix — an anxious 72-year-old no longer has to
   self-identify from three parallel buttons before finding a phone number.

   Matches stories-spotlight's no-card-in-card discipline and policy-lede's
   left-aligned editorial voice. This is the page's "two registers, one
   system" showcase: help-seeker register gets visual weight, advocate
   register gets editorial restraint, same tokens. */

.pathways {
  padding: var(--space-4xl) 0;
  background: var(--cream);
  /* v4.6.112: scroll-margin-top so in-page anchors (#pathways from
     the homepage hero secondary CTA) land BELOW the 72px sticky
     header after smooth-scroll, not under it. */
  scroll-margin-top: var(--header-height, 72px);
}

.pathways-split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-4xl);
  align-items: start;
}

/* LEFT — primary / help-seeker path */
.pathways-primary-figure {
  margin: 0 0 var(--space-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5 / 3;
  background: var(--blue-100);
}

.pathways-primary-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pathways-primary-heading {
  font-family: var(--font-accent);
  /* Between .section-title and .hero h1 — the column's lede heading.
     Clamps 32px → 48px. */
  font-size: clamp(2rem, 2vw + 1.5rem, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--blue-900);
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}

.pathways-primary-desc {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--fg2);
  max-width: 36em;
  margin: 0 0 var(--space-xl);
}

/* Helpline phone as a display element, not a button. Franklin Gothic large
   and tabular-numbered so the number itself reads as the primary action. */
.pathways-phone {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: clamp(2.25rem, 2vw + 1.75rem, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--blue-900);
  text-decoration: none;
  padding: var(--space-xs) 0;
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid transparent;
  transition:
    color 0.2s var(--ease-out, ease-out),
    border-color 0.2s var(--ease-out, ease-out);
}

.pathways-phone:hover,
.pathways-phone:focus-visible {
  color: var(--green-800);
  border-bottom-color: var(--green-800);
}

.pathways-phone-meta {
  margin: 0 0 var(--space-xl);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--fg-meta);
  letter-spacing: 0.02em;
}

/* RIGHT — supporting paths (editorial list, not tiles) */
.pathways-secondary {
  padding-top: var(--space-md);
}

.pathways-secondary-label {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-accent);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-800);
}

.pathways-secondary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-1);
}

.pathways-secondary-list > li {
  border-bottom: 1px solid var(--border-1);
}

.pathways-secondary-item {
  display: block;
  padding: var(--space-lg) 0;
  text-decoration: none;
  color: inherit;
}

.pathways-secondary-heading {
  font-family: var(--font-accent);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--blue-900);
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.005em;
  transition: color 0.2s var(--ease-out, ease-out);
}

.pathways-secondary-item:hover .pathways-secondary-heading,
.pathways-secondary-item:focus-visible .pathways-secondary-heading {
  color: var(--green-800);
}

.pathways-secondary-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--fg2);
  margin: 0 0 var(--space-sm);
}

/* Stack at tablet width — primary column stays on top so the helpline
   phone remains the first thing a help-seeker sees. */
@media (max-width: 900px) {
  .pathways-split {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }
}

/* --- Get Help --- */
.get-help {
  padding: var(--space-4xl) 0;
  background: var(--white);
}

.get-help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

/* Simplified 2-column: content + photo only (no topics list) */
.get-help-grid-simple {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/* `.get-help-content h2` size now comes from the unified .section-title rule;
   this block keeps only the margin-bottom override the fluid rule already
   sets, so it's intentionally empty. */

.get-help-content > p {
  color: var(--gray-600);
  margin-bottom: var(--space-xl);
}

.get-help-topics h3 {
  font-size: 1.15rem;
  margin-bottom: var(--space-lg);
  color: var(--gray-800);
}

.topics-list li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--gray-100);
  color: var(--fg2);
  font-size: 1.05rem;
}

.topics-list li svg {
  color: var(--teal-600);
  flex-shrink: 0;
}

/* --- Medicare Interactive Callout —
   Card chrome stripped in the /distill pass. Content sits directly on
   the section ground. Matches the chromeless aside pattern the
   homepage's `.get-help-mi` already uses.
   v4.6.142: section ground changed from --cream to --white per user
   direction. Prior cream-as-warm-middle-beat rhythm comment retired —
   the page reads quieter with the section on white. */
.mi-callout {
  padding: var(--space-3xl) 0;
  background: var(--white);
}

/* v4.6.80: MI Callout rewrite — lighter 2-col rebalance.
   The prior .mi-card / .mi-content / .mi-badge / .mi-features /
   .mi-feature / .mi-visual rules read as Action-Center editorial
   density on a help-seeker page. New .mi-callout-* rules:
     - 2-col grid only when a photo is set; collapses to 1-col
       (no image) without leaving a blank right column
     - Features render as a hairline-divided list (matches
       help-topics discipline) — no decorative dots
     - Eyebrow uses the canonical .section-label class (mi-callout-
       eyebrow is just a margin modifier)
     - Photo carries hairline-frame discipline (no rounded corners,
       no box-shadow) */
.mi-callout-grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

.mi-callout-grid--has-image {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.mi-callout-grid--no-image {
  grid-template-columns: minmax(0, 1fr);
  max-width: 640px;
}

.mi-callout-eyebrow {
  margin-bottom: var(--space-md);
}

.mi-callout-heading {
  font-family: var(--font-accent);
  font-size: clamp(1.75rem, 1.5vw + 1rem, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  margin: 0 0 var(--space-md);
  text-wrap: balance;
  max-width: 22ch;
}

.mi-callout-desc {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0 0 var(--space-xl);
  max-width: 56ch;
}

.mi-callout-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.mi-callout-features li {
  padding: var(--space-md) 0;
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--fg1);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.mi-callout-figure {
  /* v4.6.81: bg + border dropped — the MI laptop PNG has a transparent
     background and is meant to look like it's floating on the section's
     cream ground. The v4.6.80 .bg-tint-navy fill + hairline frame turned
     it into a framed product photo, which broke the floating effect. */
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.mi-callout-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Kept: .mi-callout-img is used by mrc_image_output() helper for the
   image element itself (img classname). Maps onto .mi-callout-figure
   structure above; img fills the framed figure cleanly. */
.mi-callout-img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- MI Part Index (learn-medicare + get-help fallback) ---
   Course-catalog style: big Franklin-Gothic part letter + title + blurb.
   Used where content is the four Medicare coverage parts. */
.mi-part-index,
.lm-fallback-index {
  width: 100%;
  max-width: 440px;
  padding: var(--space-2xl) var(--space-xl);
  background: var(--cream);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}

.mi-part-index-eyebrow,
.lm-fallback-index-eyebrow {
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-800);
  margin: 0 0 var(--space-lg);
}

.mi-part-index-list,
.lm-fallback-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mi-part-index-list li,
.lm-fallback-index-list li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  align-items: baseline;
}

.mi-part-index-list li + li,
.lm-fallback-index-list li + li {
  border-top: 1px solid var(--border-1);
}

.mi-part-letter,
.lm-fallback-marker {
  font-family: var(--font-accent);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--green-800);
  font-variant-numeric: tabular-nums;
}

.mi-part-body,
.lm-fallback-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mi-part-title,
.lm-fallback-title {
  font-family: var(--font-accent);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--blue-900);
  line-height: 1.25;
}

.mi-part-desc,
.lm-fallback-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--fg-meta);
}

/* --- MI Preview (homepage fallback when no image is set) ---
   Editorial "table of contents" — numeric markers + topic names, no
   fake browser chrome. Reads as an index, not a screenshot. */
.mi-preview {
  width: 100%;
  max-width: 440px;
  padding: var(--space-2xl) var(--space-xl);
  background: var(--cream);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}

.mi-preview-eyebrow {
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-800);
  margin: 0 0 var(--space-lg);
}

.mi-preview-topics {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
}

.mi-preview-topics li {
  padding: var(--space-md) 0;
  font-family: var(--font-accent);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--blue-900);
  line-height: 1.3;
}

.mi-preview-topics li + li {
  border-top: 1px solid var(--border-1);
}

.mi-preview-footer {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg2);
  font-style: italic;
}

/* --- Get Help · MI aside (right column of merged get-help section) --- */
/* MI aside — chromeless on cream. Border + radius dropped for the same
   no-card discipline as the stories spotlight; the cream-on-white shift
   alone provides the visual separation from the helpline column on the
   left, with internal padding for breathing room. */
.get-help-mi {
  padding: var(--space-2xl) var(--space-xl);
  background: var(--cream);
}

.get-help-mi .mi-preview-eyebrow {
  margin: 0 0 var(--space-md);
}

.get-help-mi-heading {
  font-family: var(--font-accent);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--blue-900);
  margin: 0 0 var(--space-sm);
}

.get-help-mi-desc {
  margin: 0 0 var(--space-lg);
  color: var(--fg2);
  line-height: 1.6;
}

.get-help-mi .mi-preview-topics {
  margin-bottom: var(--space-lg);
}

.get-help-mi .btn {
  margin-top: var(--space-sm);
}

/* v4.6.79: Wired-up editor fields — section photos + topics list.
   .get-help-figure and .get-help-mi-figure: optional editorial photos
   for the Get Help section and the MI aside. Hairline framing, no
   rounded corners, no box-shadow (brand-spine discipline). Mirrors
   the .hero-figure-frame pattern from v4.6.76.
   .get-help-topics, .get-help-topics-heading, .get-help-topics-list:
   editor-managed list of common Medicare help topics, rendered in
   the Get Help left column (was hardcoded inside the MI aside;
   relocated semantically — "common questions" is a Get Help concern,
   not an MI concern). */
.get-help-figure {
  margin: 0 0 var(--space-lg);
  border: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  overflow: hidden;
  aspect-ratio: 6 / 5;
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
}

.get-help-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.get-help-mi-figure {
  margin: 0 0 var(--space-lg);
  border: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  overflow: hidden;
  aspect-ratio: 6 / 4;
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
}

.get-help-mi-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.get-help-topics {
  margin: var(--space-lg) 0 var(--space-xl);
}

.get-help-topics-heading {
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin: 0 0 var(--space-md);
}

.get-help-topics-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.get-help-topics-list li {
  padding: var(--space-md) 0;
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--fg1);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

/* MI aside eyebrow — v4.6.79: the .mi-preview-eyebrow hardcoded
   "Or learn at your own pace" was retired; the eyebrow now uses the
   canonical .section-label class (matches other homepage sections)
   with a small modifier for the cream aside ground. */
.get-help-mi-eyebrow {
  margin: 0 0 var(--space-md);
}

/* --- Stories --- */
.stories {
  padding: var(--space-4xl) 0;
  background: var(--white);
}

.stories .section-title {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.story-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  transition: box-shadow 0.3s, transform 0.3s;
}

.story-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px) scale(1.015);
}

.story-featured {
  grid-column: 1;
  grid-row: 1 / 3;
}

.story-image {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.story-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-featured .story-image {
  height: 100%;
  min-height: 320px;
}

.story-image-placeholder {
  /* Stroke color inherits from parent .story-spotlight-image's `color`
     (--blue-400 — gentle navy tint on the pale blue-100 ground). */
  opacity: 1;
}

.story-content {
  padding: var(--space-xl);
}

.story-content h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-md);
  color: var(--gray-900);
}

.story-featured .story-content h3 {
  font-size: 1.5rem;
}

.story-content p {
  color: var(--gray-600);
  font-size: 0.95rem;
  margin-bottom: var(--space-md);
}

/* --- The Latest --- */
.latest {
  padding: var(--space-4xl) 0;
  background: var(--gray-50);
}

.latest .section-title {
  text-align: center;
}

.content-filters {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}

.filter-btn {
  background: var(--white);
  border: 1px solid var(--gray-300);
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: 0.9rem;
  min-height: 44px;
  font-weight: 500;
  color: var(--fg2);
  cursor: pointer;
  transition:
    border-color 0.2s var(--ease-out, ease-out),
    background-color 0.2s var(--ease-out, ease-out),
    color 0.2s var(--ease-out, ease-out);
}

.filter-btn:hover {
  border-color: var(--blue-500);
  color: var(--blue-700);
}

.filter-btn.active {
  background: var(--blue-900);
  border-color: var(--blue-900);
  color: var(--white);
}

.latest-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

/* Contextual tag spacing — add bottom margin when tag is above content.
   v4.6.45: retired .issue-post-card (markup migrating to .issue-posts-list
   in /layout, which carries its own scoped margin) and .article-meta
   (class no longer present in any markup since the v4.6.31 / v4.6.34
   brand-spine rebuilds). */
.news-card .news-tag {
  margin-bottom: var(--space-sm);
}

/* Tags inside inline layouts (activity feed, resource meta) — no bottom margin */
.policy-activity-item .news-tag,
.issue-resource-meta .news-tag {
  margin-bottom: 0;
}

/* Note: .news-card h3 a color is set further down in the News Cards block
   (line ~11593) to --blue-900 per the brand-spine pass. The stale duplicate
   that lived here previously was dropped in /typeset. */

.news-meta {
  font-size: 0.85rem;
  color: var(--fg-meta);
}

.latest-cta {
  text-align: center;
  margin-top: var(--space-2xl);
}

/* --- Homepage: slim editorial news strip ---
   Left-aligned date + headline rows, hairline separators, no cards.
   Deliberately avoids the news-card vocabulary used by stories-spotlight
   and by page-the-latest so the homepage stops repeating itself.        */
.latest--strip {
  background: var(--white);
}

.latest--strip .section-title {
  text-align: left;
  margin: 0;
}

/* Latest header — clean section title with a hairline divider beneath.
   The earlier mast-tag (right-aligned badge) was distilled out: having both
   "The Latest" badge and "News & Updates" h2 was two names for one section. */
.latest-strip-header {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-1);
}

.latest-strip-header .section-title {
  margin: 0;
}

.latest-strip {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
}

/* Hairlines between items only — no wrapper border-top (redundant with the
   header's border-bottom above) and no trailing rule on the last item
   (the strip opens down to whitespace instead of closing in a box). */
.latest-strip-item {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--space-xl);
  align-items: baseline;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border-1);
}

.latest-strip-item:last-child {
  border-bottom: 0;
}

.latest-strip-item time {
  font-family: var(--font-primary);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-meta);
  font-variant-numeric: tabular-nums;
}

.latest-strip-item a {
  font-family: var(--font-accent);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--blue-900);
  text-decoration: none;
  transition: color 0.2s var(--ease-out, ease-out);
}

.latest-strip-item a:hover,
.latest-strip-item a:focus-visible {
  color: var(--green-800);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.latest-strip-footer {
  margin-top: var(--space-lg);
}

@media (max-width: 720px) {
  .latest-strip-item {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) 0;
  }

  .latest-strip-item a {
    font-size: 1.15rem;
  }
}

/* --- Policy --- */
.policy {
  padding: var(--space-4xl) 0;
  /* Cream ground breaks the white-on-white boundary with the latest strip
     above, and gives the italic Franklin Gothic pullquote lede a warmer
     editorial read. Brackets the page — pathways opens in cream, policy
     closes the editorial register in cream before the navy donate close. */
  background: var(--cream);
}

/* Policy lede — italic Franklin Gothic pull-quote that opens the section
   in the same register as stories-spotlight's client quote. The lede is
   from MRC's voice (not a client), giving a journalist something quotable
   within the first few seconds of the page. */
.policy-lede {
  max-width: 880px;
  margin: var(--space-3xl) 0 0;
  padding: 0;
}

.policy-pullquote {
  margin: 0;
  padding: 0;
  border: 0;
}

.policy-pullquote p {
  margin: 0;
  font-family: var(--font-accent);
  /* Sits one step below .section-title at the top end so the pullquote feels
     weighty but doesn't out-shout the headline below. Fluid 24px → 34px. */
  font-size: clamp(1.5rem, 1.2vw + 1.2rem, 2.125rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.3;
  color: var(--blue-900);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.policy-lede-attribution {
  margin-top: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--fg2);
  line-height: 1.3;
}

/* Separate element (not a border) — the em-dash rule that stories-spotlight
   lacks, giving policy its own editorial fingerprint. Using a span keeps this
   clear of the anti-slop ban on `border-left > 1px` colored stripes. */
.policy-lede-rule {
  display: inline-block;
  width: 2.5rem;
  height: 2px;
  background: var(--green-800);
  flex-shrink: 0;
}

.policy-lede-attribution strong {
  font-weight: 700;
  color: var(--blue-900);
}

.policy-lede-role {
  font-style: italic;
  color: var(--fg-meta);
}

@media (max-width: 720px) {
  .policy-lede {
    margin-bottom: var(--space-2xl);
  }
  .policy-lede-attribution {
    gap: var(--space-sm);
  }
  .policy-lede-rule {
    width: 1.5rem;
  }
}

.policy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

/* `.policy-content h2` size now comes from the unified .section-title rule above. */

.policy-content > p {
  color: var(--gray-600);
  margin-bottom: var(--space-xl);
}

.policy-stats {
  display: flex;
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.stat {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--blue-800);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--fg-meta);
}

.policy-resources h3 {
  font-size: 1.15rem;
  margin-bottom: var(--space-lg);
}

.resource-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  transition:
    border-color 0.2s var(--ease-out, ease-out),
    background-color 0.2s var(--ease-out, ease-out);
  text-decoration: none;
  color: var(--gray-800);
}

.resource-item:hover {
  border-color: var(--blue-500);
  background: var(--blue-50);
  color: var(--gray-800);
}

/* Homepage policy resources — chromeless hairline rows, matching the latest
   strip rhythm. Single-post sidebars (press release, resource) keep the
   base `.resource-item` bordered-card treatment via the looser scope. */
.policy-resources .resource-item {
  padding: var(--space-md) 0;
  border: 0;
  border-radius: 0;
  margin: 0;
}

.policy-resources .resource-item + .resource-item {
  border-top: 1px solid var(--border-1);
}

.policy-resources .resource-item:hover,
.policy-resources .resource-item:focus-visible {
  background: transparent;
  color: var(--gray-800);
}

.policy-resources .resource-item:hover h4,
.policy-resources .resource-item:focus-visible h4 {
  color: var(--green-800);
}

.resource-icon {
  flex-shrink: 0;
  color: var(--blue-600);
  margin-top: 2px;
}

.resource-item h4 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.resource-date {
  font-size: 0.85rem;
  color: var(--fg-meta);
}

/* --- Action CTA --- */
.action-cta {
  padding: var(--space-4xl) 0;
  background: var(--blue-900, #03386e);
  position: relative;
  overflow: hidden;
}

/* v4.6.60: When the helpline banner sits directly above the action CTA
   (11 templates render this adjacency — single.php, page-stories,
   page-financials, search.php, the CPT singles, etc.), both sections
   share var(--blue-900) and bleed into a single oversized navy mass.
   The hairline marks the boundary at 16% white-alpha — same alpha as
   the policy-hero masthead/spotlight divider at main.css:15355, the
   established idiom for dividing same-colored navy sections.

   The adjacent-sibling selector means the rule doesn't fire when a
   different-bg section (.newsletter-cta on --bg-navy-soft) sits
   between them, or when the helpline banner appears without a follow-
   on action-cta (page-get-involved.php, 404.php). Also covers the
   .action-cta--receipts modifier since it inherits .action-cta. */
.helpline-banner + .action-cta {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Pattern overlay removed — clean flat navy background */

/* Person image — bottom-right, flush with section bottom */
.action-cta-person {
  position: absolute;
  bottom: 0;
  right: 3%;
  height: 100%;
  max-height: 440px;
  width: auto;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  z-index: 1;
  opacity: 0.92;
}

/* Keep card content above the person image */
.action-cta .container {
  position: relative;
  z-index: 2;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

/* CTA card on navy: soft white ground + hairline. Kelly-green hint
   is earned on hover — signals interactivity without a decorative stripe. */
.action-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  color: var(--white);
  transition:
    transform 0.3s var(--ease-out, ease-out),
    background-color 0.3s var(--ease-out, ease-out),
    border-color 0.3s var(--ease-out, ease-out);
}

.action-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: color-mix(in oklch, var(--green-accent) 55%, transparent);
  transform: translateY(-2px);
}

.action-card h3 {
  font-size: 1.3rem;
  color: var(--white);
  margin-bottom: var(--space-md);
}

.action-card p {
  opacity: 0.85;
  font-size: 0.95rem;
  margin-bottom: var(--space-xl);
}

.action-donate {
  background: transparent;
  border-color: transparent;
}

/* --- Donate CTA — standalone centered layout (no card bg) --- */
.action-cta .action-donate {
  background: transparent;
  border: none;
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
  color: var(--white);
}

.action-cta .action-donate h3 {
  font-size: 2.25rem;
  color: var(--white);
  margin-bottom: var(--space-md);
}

.action-cta .action-donate p {
  font-size: 1.05rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-xl);
  opacity: 0.85;
}

.action-cta .action-donate .btn {
  padding: 16px 48px;
  font-size: 1.1rem;
}

/* --- Homepage donate close · typographic receipts ending ---
   The `--receipts` variant replaces the former cutout-person layout. Scoped
   to the homepage via the variant class so the old `.action-donate` rules
   above continue to serve policy, the-latest, and generic take-action
   templates unchanged. */
.action-cta--receipts {
  /* Inherits navy ground + position from `.action-cta`. Bump the vertical
     breathing room because this is the page's final statement — it deserves
     more air than a mid-page section. */
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* Inline modifier — for receipts in mid-page positions (e.g. impact stats)
   so the pattern doesn't compete with the actual page-end close. Tighter
   vertical padding so it reads as a section in the flow, not a peak-end. */
.action-cta--receipts.action-cta--receipts--inline {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.action-cta--receipts--inline .action-cta-receipts {
  max-width: 960px;
}

.action-cta-receipts {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
}

.action-cta-heading {
  font-family: var(--font-accent);
  /* 40px @ 360px → 72px @ 1200px+. One step below hero h1 in scale but the
     boldest typographic moment the user sees on the way out. */
  font-size: clamp(2.5rem, 3.2vw + 2rem, 4.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
  text-wrap: balance;
  /* Narrow enough to force an intentional 2–3 line break on the default
     headline — keeps the statement visually dense instead of running wide. */
  max-width: 18ch;
}

.action-cta-stats {
  width: 100%;
  margin: 0;
  padding: var(--space-lg) 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(var(--space-2xl), 8vw, var(--space-4xl));
  flex-wrap: wrap;
  /* Hairline top/bottom — a magazine "receipts spread" frame. Not a card,
     not a border stripe; just two 1px rules bracketing the numbers. */
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.action-cta-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.action-cta-stat-num {
  font-family: var(--font-accent);
  font-size: clamp(3.5rem, 6vw + 1.5rem, 7rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0;
}

.action-cta-stat-label {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  /* AAA on navy at 15px — was 0.72 which sat right at the AAA floor for
     small type and risked falling below for low-vision viewers. */
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.35;
  margin: 0;
  max-width: 20ch;
  text-align: center;
}

.action-cta-body {
  font-family: var(--font-primary);
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 48ch;
}

.action-cta-btn {
  margin-top: var(--space-sm);
}

@media (max-width: 640px) {
  .action-cta-stats {
    flex-direction: column;
    gap: var(--space-xl);
    padding: var(--space-md) 0;
  }
  .action-cta-heading {
    max-width: 100%;
  }
}

/* --- Asymmetric receipts variant (Policy page) ---
   Continues the policy page's editorial 2-column register through the
   final beat: heading occupies its own left column, the receipts column
   (stats + body + button) stacks on the right. Mobile (<960px) collapses
   to the same single-column stack as the centered variant — the wrapper
   becomes a transparent flex column with the same gap rhythm.

   The `.action-cta-content` wrapper is emitted only by `policy-close.php`
   (homepage closer keeps its flat structure). On desktop it acts as the
   single right-column grid item so its internal items size tightly and
   never get pushed apart by the heading's height — the bug-prone behavior
   of letting stats / body / button each be their own grid row. */

.action-cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
  width: 100%;
  margin: 0;
}

@media (min-width: 960px) {
  .action-cta--asymmetric .action-cta-receipts {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 4vw, 4.5rem);
    text-align: left;
    align-items: start;
  }

  .action-cta--asymmetric .action-cta-heading {
    max-width: none;
    text-align: left;
  }

  .action-cta--asymmetric .action-cta-content {
    align-items: flex-start;
    text-align: left;
  }

  .action-cta--asymmetric .action-cta-stats {
    justify-content: flex-start;
    gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  }

  .action-cta--asymmetric .action-cta-stat {
    align-items: flex-start;
  }

  .action-cta--asymmetric .action-cta-stat-label {
    text-align: left;
  }

  .action-cta--asymmetric .action-cta-body {
    max-width: none;
  }
}

/* --- Newsletter CTA — standalone section above donate --- */
.newsletter-cta {
  padding: var(--space-2xl) 0;
  background: var(--bg-navy-soft);
}

.newsletter-cta-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}

.newsletter-cta-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsletter-cta-icon svg {
  width: 100%;
  height: 100%;
}

.newsletter-cta-text {
  flex-shrink: 0;
}

.newsletter-cta-text h3 {
  font-size: 1.1rem;
  color: var(--blue-900);
  margin-bottom: 4px;
}

.newsletter-cta-text p {
  font-size: 0.9rem;
  color: var(--fg2);
  margin-bottom: 0;
}

.newsletter-cta-form {
  flex: 1;
  min-width: 0;
  max-width: 400px;
}

.newsletter-cta .mrc-newsletter--compact input[type="email"] {
  border: 2px solid var(--blue-900);
  background: var(--white);
  color: var(--gray-900);
}

.newsletter-cta .mrc-newsletter--compact input[type="email"]::placeholder {
  color: var(--blue-900);
}

.newsletter-cta .mrc-newsletter--compact input[type="email"]:focus {
  border-color: var(--green-accent);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(71,171,71,0.15);
}

.newsletter-cta .mrc-newsletter--compact .btn,
.newsletter-cta .mrc-newsletter--compact button[type="submit"] {
  background: var(--green-accent);
  border-color: var(--green-accent);
  color: var(--white);
}

.newsletter-cta .mrc-newsletter--compact .btn:hover,
.newsletter-cta .mrc-newsletter--compact button[type="submit"]:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
}

.newsletter-cta .newsletter-prefs-link {
  display: none;
}

.newsletter-cta-choose {
  margin-top: var(--space-xs);
  font-size: 0.8rem;
}

.newsletter-cta-choose a {
  color: var(--blue-900);
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.newsletter-cta-choose a:hover {
  opacity: 1;
}

/* Legacy newsletter form styles (kept for backward compat) */
.newsletter-form {
  display: flex;
  gap: var(--space-sm);
}

.newsletter-form input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1);
  color: var(--white);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  min-height: 48px;
}

.newsletter-form input::placeholder {
  color: rgba(255,255,255,0.5);
}

.newsletter-form input:focus {
  outline: none;
  border-color: var(--green-accent);
  box-shadow: 0 0 0 3px rgba(71,171,71,0.25);
  background: rgba(255,255,255,0.15);
}

.action-card .btn-outline {
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
}

.action-card .btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--white);
}

/* --- Interstitial CTA Banner --- */
.interstitial-cta {
  background: var(--blue-900);
  color: var(--white);
  padding: var(--space-2xl) 0;
  text-align: center;
}

.interstitial-cta .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.interstitial-cta p {
  font-family: var(--font-accent);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  color: var(--white);
}

.interstitial-cta .btn-primary {
  flex-shrink: 0;
}

/* ── Dark-background button fix ──────────────────────────────
   btn-primary is navy on navy — invisible on dark sections.
   Override to green (accent) so buttons are always visible.   */
.hero .btn-primary,
.action-cta .btn-primary,
.interstitial-cta .btn-primary {
  background: var(--green-accent) !important;
  background-color: var(--green-accent) !important;
  border-color: var(--green-accent) !important;
  color: var(--white) !important;
}

.hero .btn-primary:hover,
.action-cta .btn-primary:hover,
.interstitial-cta .btn-primary:hover {
  background: var(--green-dark) !important;
  background-color: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
  color: var(--white) !important;
}

/* --- Footer --- */
.site-footer {
  background: var(--gray-900);
  color: #cbd7e6;
  padding: var(--space-3xl) 0 var(--space-xl);
}

/* Footer grid — default fallback uses auto-fit so editor-customized
   section counts (3 or 5 sections) stay legible. The 4-section default
   keeps the asymmetric "about wider, links narrower" pattern. */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.footer-grid--cols-4 {
  grid-template-columns: 2fr 1fr 1fr 1fr;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.logo-mark-light {
  background: rgba(255,255,255,0.1);
}

.footer-logo-name {
  font-weight: 700;
  color: var(--white);
  font-size: 1.1rem;
}

.footer-about p {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.footer-social {
  display: flex;
  gap: var(--space-md);
}

.footer-social a {
  color: var(--gray-400);
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;   /* WCAG AAA 2.5.5 touch target */
  height: 44px;
  border-radius: var(--radius-sm);
}

.footer-social a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.1);
}

.footer-links h4 {
  color: var(--lime-accent, #a8d159);
  font-family: var(--font-accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-lg);
}

.footer-links ul li {
  margin-bottom: var(--space-sm);
}

.footer-links a {
  color: #cbd7e6;
  font-size: 0.9rem;
  transition: color 0.2s;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--white);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-xl);
  text-align: center;
  font-size: 0.875rem;
}

.footer-bottom a {
  color: var(--gray-400);
}

.footer-bottom a:hover {
  color: var(--white);
}

/* v4.6.148: minimal footer modifier — used by the "Full Page" page
   template (page-templates/page-full-page.php). The default .site-
   footer reserves 3xl top + xl bottom padding because a footer-grid
   sits above the footer-bottom band. With the grid omitted, the
   3xl top padding leaves a tall empty navy band before the single
   copyright line; tighten to a more proportional space-lg/lg. And
   .footer-bottom's hairline top border + xl top padding are also
   designed to separate from the grid above — drop both when nothing
   sits above. */
.site-footer--minimal {
  padding: var(--space-lg) 0;
}

.site-footer--minimal .footer-bottom {
  border-top: 0;
  padding-top: 0;
}

/* v4.6.149: sticky-footer treatment for the Full Page template.
   Without this, short pages (e.g. a single-paragraph landing) leave
   a big white gap below the content and the footer floats up
   mid-viewport. Standard flex-column sticky footer: body becomes a
   min-100vh flex column; <main> grows (flex: 1 0 auto) to push the
   footer to the viewport bottom. On taller pages, main grows past
   100vh naturally and the footer ends up at content-bottom as
   expected.
   Scoped via the WP body class auto-generated from the template
   slug (basename of page-templates/page-full-page.php minus .php =
   "page-full-page", prefixed "page-template-"). Doesn't affect any
   other page. */
body.page-template-page-full-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.page-template-page-full-page #main {
  flex: 1 0 auto;
}

body.page-template-page-full-page .site-footer--minimal {
  flex-shrink: 0;
}

/* v4.6.150: opt this template out of the global overflow-x: hidden
   guard that html + body get at the top of main.css. That guard is
   defensive (prevents accidental horizontal scroll from rogue full-
   bleed elements site-wide), but it creates a scroll context that
   can break position:sticky descendants and clip dropdowns/tooltips
   that legitimately extend past the viewport edge. For Full Page-
   templated surfaces (landing pages, focused single-action pages,
   embed hosts) we'd rather give those affordances a chance to work.
   Body rule handles the common case; html :has() rule handles
   cases where the html-level overflow is also a constraint. :has()
   is supported in all evergreen browsers (Safari 15.4+, Chrome 105+,
   Firefox 121+); older browsers ignore that rule cleanly and still
   pick up the body rule. */
html:has(body.page-template-page-full-page) {
  overflow-x: visible;
}

body.page-template-page-full-page {
  overflow-x: visible;
}

/* ============================================
   Responsive Design — Mobile First Breakpoints
   ============================================ */

@media (max-width: 1024px) {
  .get-help-grid,
  .mi-callout-grid--has-image,
  .policy-grid {
    grid-template-columns: 1fr;
  }

  .stories-grid {
    grid-template-columns: 1fr;
  }

  .story-featured {
    grid-column: 1;
    grid-row: auto;
  }

  .action-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .footer-about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 1rem;
  }

  .utility-text {
    display: none;
  }

  /* Mobile: tap targets define the bar height — no extra padding stack. */
  .utility-bar {
    padding: 0;
  }

  .utility-bar-inner {
    justify-content: center;
    position: relative;
  }

  .utility-bar-dismiss {
    position: absolute;
    right: var(--space-sm);
  }

  .helpline-link {
    font-size: 1.1rem;
  }

  /* Mobile: full-screen slide-in menu from right */
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    background: var(--blue-900);
    z-index: 999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav.is-open {
    transform: translateX(0);
  }

  /* Mobile menu header — logo + close */
  .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
  }

  .mobile-nav-title {
    font-family: var(--font-accent);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
  }

  .mobile-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-sm);
    transition: color 0.15s var(--ease-out, ease-out);
  }

  .mobile-nav-close:hover,
  .mobile-nav-close:focus-visible {
    color: var(--white);
  }

  /* Mobile helpline — prominent at top */
  .mobile-nav-helpline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-xl);
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
  }

  .mobile-nav-phone {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 700;
    font-size: 1rem;
    color: var(--green-accent);
    text-decoration: none;
  }

  .mobile-nav-hours {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
  }

  /* v4.6.78: Mobile donate button — top-of-drawer placement, shown only
     inside the mobile menu (paired with the desktop-hide rule above so
     the button never doubles up on desktop next to the right-side
     .btn-donate). */
  .mobile-nav-donate-top {
    display: block;
    padding: var(--space-md) var(--space-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
  }

  .mobile-nav-donate-top .btn-donate {
    width: 100%;
    text-align: center;
    display: block;
  }

  /* Mobile search */
  .mobile-nav-search {
    padding: var(--space-md) var(--space-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
  }

  .mobile-search-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 0 var(--space-md);
  }

  .mobile-search-wrap svg {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.4);
  }

  .mobile-search-wrap input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    color: var(--white);
    outline: none;
  }

  .mobile-search-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }

  /* Nav links — bold, large, Robin Hood inspired */
  .nav-list {
    flex-direction: column;
    gap: 0;
    padding: var(--space-sm) 0;
    flex: 1;
  }

  .nav-list > li {
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav-list > li:last-child {
    border-bottom: none;
  }

  .nav-list a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-lg) var(--space-xl);
    font-size: 1.15rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--white);
    text-decoration: none;
    min-height: 56px;
    transition: color 0.15s var(--ease-out, ease-out);
  }

  .nav-list a:hover,
  .nav-list a:focus {
    color: var(--green-accent);
    background: rgba(255, 255, 255, 0.04);
  }

  /* Active page indicator — weight + tint carry the state, no stripe */
  .nav-list .current-menu-item > a,
  .nav-list .current-menu-parent > a,
  .nav-list a.nav-active {
    color: var(--green-accent);
    font-weight: 700;
    background: rgba(168, 209, 89, 0.12);
  }

  /* Parent items with submenus */
  .nav-item-parent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
  }

  .nav-item-parent a {
    flex: 1;
  }

  /* Chevron toggle — right-aligned, rotates on expand */
  .submenu-toggle {
    padding: var(--space-md) var(--space-xl);
    min-height: 56px;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.15s var(--ease-out, ease-out), transform 0.3s var(--ease-out, ease-out);
  }

  .submenu-toggle:hover {
    color: var(--white);
  }

  .submenu-toggle[aria-expanded="true"] {
    color: var(--white);
  }

  /* Override desktop rotation — apply to SVG directly for mobile */
  .submenu-open > .nav-item-parent .submenu-toggle {
    transform: none;
  }

  .submenu-toggle svg {
    transition: transform 0.3s var(--ease-out, ease-out);
  }

  .submenu-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* Expanded parent — keep bottom border as separator */
  .has-submenu.submenu-open {
    border-bottom: none;
  }

  /* Sub-menu — hidden by default, opens below parent on toggle */
  .sub-menu {
    position: static;
    border: none;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    padding: 0;
    background: transparent;
    border-left: none;
    margin-left: 0;
  }

  .sub-menu.is-open {
    padding: var(--space-sm) 0 var(--space-md);
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .sub-menu li {
    border-bottom: none;
  }

  .sub-menu a {
    padding: var(--space-sm) var(--space-xl) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    min-height: 44px !important;
    border-bottom: none !important;
  }

  .sub-menu a:hover {
    color: var(--white) !important;
    background: transparent !important;
  }

  /* Mobile nav footer — donate button */
  .mobile-nav-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
  }

  .mobile-nav-donate {
    text-align: center;
    width: 100%;
    font-size: 1rem;
    padding: 16px;
    background: var(--green-accent);
    color: var(--white);
    border-radius: var(--radius-pill);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .mobile-nav-donate:hover {
    background: var(--green-dark);
    color: var(--white);
  }

  .mobile-menu-btn {
    display: flex;
  }

  .desktop-only {
    display: none;
  }

  .header-inner {
    gap: var(--space-sm);
  }

  .header-actions {
    gap: var(--space-sm);
  }

  .btn-donate {
    padding: 8px 16px;
    font-size: 0.85rem;
  }

  .interstitial-cta .container {
    flex-direction: column;
    text-align: center;
  }

  .interstitial-cta p {
    font-size: 1.1rem;
  }

  .pathways {
    padding: var(--space-2xl) 0;
  }

  .get-help, .mi-callout, .stories, .latest, .policy, .action-cta {
    padding: var(--space-2xl) 0;
  }

  .policy-stats {
    flex-direction: column;
    gap: var(--space-md);
  }

  .stat {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
  }

  .latest-grid {
    grid-template-columns: 1fr;
  }

  .content-filters {
    gap: var(--space-xs);
  }

  .filter-btn {
    font-size: 0.8rem;
    padding: 6px 14px;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-about {
    grid-column: auto;
  }

  /* v4.6.133: retired .logo-text mobile display:none — the header's
     wordmark text is now baked into the SVG itself, so there's no
     separate .logo-text node to hide. */
}

/* --- Accessibility: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Print --- */
@media print {
  .utility-bar, .site-header, .hero-cta, .action-cta, .site-footer {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
  }
}

/* ============================================
   Policy & Research Page Styles
   ============================================ */

/* --- Active Nav (desktop only) --- */
@media (min-width: 769px) {
  .nav-active {
    color: var(--blue-900) !important;
    font-weight: 800 !important;
    position: relative;
  }

  .nav-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-md);
    right: var(--space-md);
    height: 3px;
    background: var(--green-accent);
    border-radius: 2px;
  }
}

/* --- Page Hero (compact interior) --- */
.page-hero {
  background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 100%);
  color: var(--white);
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

.page-hero-watermark {
  position: absolute;
  top: 50%;
  right: clamp(-1rem, -2vw, -3rem);
  transform: translateY(-50%);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(5rem, 13vw, 13rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  text-align: right;
}

@media (max-width: 720px) {
  .page-hero-watermark {
    display: none;
  }
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
  margin-bottom: var(--space-lg);
  opacity: 0.7;
}

.breadcrumb a {
  color: var(--white);
  opacity: 0.8;
  transition: opacity 0.2s;
  text-decoration: none;
}

.breadcrumb a:hover {
  opacity: 1;
  color: var(--white);
}

.breadcrumb span[aria-current] {
  opacity: 1;
}

.page-hero-eyebrow {
  color: var(--green-accent, #47ab47);
  margin-bottom: var(--space-md);
}

.page-hero-actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}

.page-hero-cta-primary {
  font-size: 1.0625rem;
  padding: 16px 30px;
  font-weight: 700;
  letter-spacing: 0.005em;
}

.page-hero-cta-secondary {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness 0.2s var(--ease-out, ease-out);
}

.page-hero-cta-secondary:hover,
.page-hero-cta-secondary:focus-visible {
  color: var(--white);
  text-decoration-thickness: 2px;
}

.page-hero-exit-ramp {
  margin: var(--space-lg) 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.page-hero-exit-ramp a {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  margin-left: 0.25em;
}

.page-hero-exit-ramp a:hover,
.page-hero-exit-ramp a:focus-visible {
  text-decoration-thickness: 2px;
}

.page-hero h1 {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

.page-hero-subtitle {
  font-size: 1.15rem;
  opacity: 0.85;
  max-width: 680px;
  line-height: 1.7;
}

/* =============================================================================
   Get Help page — navy bookends (hero + reassurance close).
   Scoped away from the shared `.page-hero` so this page can go flat-navy
   without touching every other interior page. Both sections share the
   .get-help-display-phone treatment — one typographic vocabulary for the
   helpline number, repeated at both ends of the page.
   ============================================================================= */
.get-help-hero {
  padding: var(--space-4xl) 0;
  background: var(--blue-900, #03386e);
  color: var(--white);
}

.get-help-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;
}

.get-help-hero--has-image .get-help-hero-inner {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.get-help-hero-content {
  position: relative;
}

/* Entrance cascade: each hero child fades + slides up 10px on mount, staggered
   100ms apart. Full settle in ~900ms. Respects prefers-reduced-motion via the
   global reset (zeroes animation-duration theme-wide). Reuses the homepage's
   `heroFadeUp` keyframe rather than duplicating motion vocabulary. */
.get-help-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime-accent, #a8d159);
  margin: 0 0 var(--space-md);
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
}

.get-help-hero-heading {
  font-family: var(--font-accent);
  font-size: clamp(2.25rem, 3.2vw + 1.45rem, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0 0 var(--space-lg);
  text-wrap: balance;
  max-width: 18ch;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 100ms;
}

.get-help-hero-subtitle {
  font-family: var(--font-primary);
  font-size: 1.2rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--space-xl);
  max-width: 40ch;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 200ms;
}

/* Shared display-phone treatment — used by both hero and close. Structurally
   mirrors the homepage's `.pathways-phone` (same size clamp, weight,
   tabular-nums, bottom-border hover pattern) but with navy-ground colors. */
.get-help-display-phone {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: clamp(2.25rem, 2vw + 1.75rem, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--white);
  text-decoration: none;
  padding: var(--space-xs) 0;
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid transparent;
  transition:
    color 0.2s var(--ease-out, ease-out),
    border-color 0.2s var(--ease-out, ease-out);
}

/* Hero phone participates in the entrance cascade (scoped so the close-section
   copy of the same class stays static). The hero version also bumps to
   billboard scale — the phone number is the page's primary action and
   anxious help-seekers should see the path to a counselor unmistakably. */
.get-help-hero .get-help-display-phone {
  font-size: clamp(3.25rem, 5vw + 1.5rem, 5.5rem);
  letter-spacing: -0.025em;
  line-height: 1;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 300ms;
}

.get-help-display-phone:hover,
.get-help-display-phone:focus-visible {
  color: var(--lime-accent, #a8d159);
  border-bottom-color: var(--lime-accent, #a8d159);
}

.get-help-hero-meta {
  margin: var(--space-sm) 0 var(--space-xl);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.02em;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 400ms;
}

/* Live helpline status — JS replaces the static hours fallback on mount. Dot
   pulses gently when the helpline is open so the "Open now" label reads as
   live rather than static. Muted gray-on-navy when closed. */
.helpline-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.helpline-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.helpline-status[data-helpline-open="true"] .helpline-status-dot {
  background: var(--lime-accent, #a8d159);
  box-shadow: 0 0 0 0 rgba(168, 209, 89, 0.6);
  animation: helpline-pulse 2.4s var(--ease-out, ease-out) infinite;
}

.helpline-status[data-helpline-open="true"] .helpline-status-label {
  color: var(--lime-accent, #a8d159);
  font-weight: 600;
}

.helpline-status-meta {
  color: rgba(255, 255, 255, 0.72);
}

@keyframes helpline-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(168, 209, 89, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(168, 209, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(168, 209, 89, 0); }
}

.get-help-hero-callback-link {
  display: inline-flex;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 500ms;
}

/* Arrow-link color override on navy ground — shared by hero and close. */
.get-help-hero .arrow-link,
.get-help-close .arrow-link {
  color: rgba(255, 255, 255, 0.88);
}

.get-help-hero .arrow-link:hover,
.get-help-hero .arrow-link:focus-visible,
.get-help-close .arrow-link:hover,
.get-help-close .arrow-link:focus-visible {
  color: var(--lime-accent, #a8d159);
  text-decoration: underline;
}

.get-help-hero-figure {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  justify-self: end;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 20px 50px -15px rgba(2, 42, 84, 0.55);
}

.get-help-hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 960px) {
  .get-help-hero {
    padding: var(--space-2xl) 0 var(--space-3xl);
  }
  .get-help-hero--has-image .get-help-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
  }
  .get-help-hero-figure {
    order: -1;
    max-width: 420px;
    justify-self: start;
    aspect-ratio: 5 / 4;
  }
}

@media (max-width: 640px) {
  .get-help-hero-heading {
    line-height: 1.12;
  }
  .get-help-hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
  }
}

/* --- Reassurance close — navy bookend echoing the hero.
   Centered typography; the helpline phone is the page's last anchor.
   The tertiary donate link is deliberately muted (help-seeker pages
   should not pressure a donation). */
.get-help-close {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--blue-900, #03386e);
  color: var(--white);
  text-align: center;
}

.get-help-close-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.get-help-close-heading {
  font-family: var(--font-accent);
  font-size: clamp(2rem, 2.5vw + 1.4rem, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
  text-wrap: balance;
  max-width: 18ch;
}

.get-help-close-meta {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.02em;
  margin: 0;
}

/* Support link: quieter than the hero's callback arrow-link — tertiary
   opacity, slightly smaller, never competes with the phone number above.
   Specificity (two classes on the same element) wins over the `.get-help-close
   .arrow-link` navy override that precedes this in source order. */
.get-help-close-support-link.arrow-link {
  margin-top: var(--space-xl);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
}

.get-help-close-support-link.arrow-link:hover,
.get-help-close-support-link.arrow-link:focus-visible {
  color: var(--lime-accent, #a8d159);
}

@media (max-width: 640px) {
  .get-help-close-heading {
    max-width: 100%;
  }
}

/* Page-hero entrance cascade — mirrors the homepage hero's arrival.
   Positional nth-child means it works whether breadcrumb, h1 alone,
   or h1 + subtitle are present. Reuses @keyframes heroFadeUp. */
.page-hero > .container > * {
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
}
.page-hero > .container > *:nth-child(2) { animation-delay: 100ms; }
.page-hero > .container > *:nth-child(3) { animation-delay: 200ms; }

/* --- Priority Issues --- */
.priority-issues {
  padding: var(--space-4xl) 0;
  background: var(--white);
}

/* v4.6.73: Editorial platform grid. Replaces the prior hairline row list
   (which read too similarly to the adjacent Activity Feed ticker on
   /policy/). Now a 2-column cross-grid: equal-weight cells, display-weight
   titles, hairlines travel both vertically (between columns) and
   horizontally (between rows). The cross-grid is produced by the
   gap-as-hairline technique: container bg is hairline-colored, gap is 1px,
   cells have opaque bg → gaps reveal the hairline through. New reusable
   spine pattern for "platform statement" content (equal-weight, no rank).
   `.section-title` and `.section-label` inherit from canonical rules. */

.priority-issues-header {
  max-width: 720px;
  margin: 0 auto var(--space-2xl);
  text-align: center;
}

.priority-issues-header .section-subtitle {
  margin-left: auto;
  margin-right: auto;
  max-width: 52ch;
}

.priority-issues-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--hairline, rgba(3, 56, 110, 0.12));
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  max-width: 1080px;
  margin: 0 auto;
}

.priority-issues-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg);
  min-height: 240px;
  background-color: var(--bg, #ffffff);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s var(--ease-out, ease-out);
}

.priority-issues-cell:hover,
.priority-issues-cell:focus-visible {
  background-color: var(--bg-tint-navy);
  outline: none;
}

.priority-issues-title {
  font-family: var(--font-accent);
  /* Display-weight platform-statement title. Larger than the row-title
     scale used by activity feed / resource library so Focus Areas reads
     as a manifesto, not another ticker. */
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--blue-900);
  margin: 0;
  text-wrap: balance;
}

.priority-issues-desc {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0;
  max-width: 38ch;
}

.priority-issues-cue {
  /* Pinned to the cell's bottom edge so the arrow cues line up across
     cells regardless of description length. */
  margin-top: auto;
  align-self: flex-start;
  color: var(--blue-700);
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.9375rem;
}

/* --- Resource Library — editorial archive (hairline rows) --- */
.resource-library {
  padding: clamp(var(--space-3xl), 6vw, var(--space-4xl)) 0;
  background: var(--white);
}

.resource-library-header {
  max-width: 720px;
  margin: 0 auto var(--space-2xl);
  text-align: center;
}

.resource-library-empty-state {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
  color: var(--fg-meta);
  font-family: var(--font-primary);
  font-size: 1rem;
}

/* Primary control bar: search · topic. Sort demoted to the meta row below
   the list so the first-read decision set is two axes, not four. On phone
   everything stacks. */
.resource-controls {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: end;
  max-width: 960px;
  margin: 0 auto var(--space-lg);
}

.resource-controls-label {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-700);
  margin-bottom: var(--space-xs);
}

.resource-search {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border-2, var(--gray-300));
  border-bottom: 2px solid var(--blue-700);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--fg1);
  transition: border-color 0.2s var(--ease-out, ease-out);
}

.resource-search::placeholder {
  color: var(--fg-meta);
}

.resource-search:focus {
  outline: none;
  /* Navy focus — kelly green is reserved as a rare accent. A text-input
     focus state doesn't earn a rare-accent charge. */
  border-bottom-color: var(--blue-900);
  box-shadow: 0 1px 0 0 var(--blue-900);
}

.resource-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 36px 10px 14px;
  border: 1px solid var(--border-2, var(--gray-300));
  border-radius: var(--radius-sm, 4px);
  background: var(--white);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--fg1);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2303386e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color 0.2s var(--ease-out, ease-out);
}

.resource-select:focus {
  outline: none;
  border-color: var(--blue-700);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(3, 56, 110, 0.2));
}

/* Type filter pills — scrollable on narrow viewports, quiet band below
   the control bar so the filter set reads as a secondary axis. */
.resource-type-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  max-width: 960px;
  margin: 0 auto var(--space-md);
}

.resource-type-filter {
  appearance: none;
  background: transparent;
  border: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-radius: var(--radius-pill, 999px);
  padding: 6px 14px;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg2);
  cursor: pointer;
  min-height: 36px;
  transition:
    border-color 0.2s var(--ease-out, ease-out),
    background-color 0.2s var(--ease-out, ease-out),
    color 0.2s var(--ease-out, ease-out);
}

.resource-type-filter:hover,
.resource-type-filter:focus-visible {
  border-color: var(--blue-700);
  color: var(--blue-800);
  outline: none;
  /* Preserve the pill shape on focus — the global `button:focus-visible`
     rule sets `border-radius: 2px` for rectangular focus rings, which
     would flash-square an otherwise-pill button. */
  border-radius: var(--radius-pill, 999px);
}

.resource-type-filter.is-active {
  background: var(--blue-900);
  border-color: var(--blue-900);
  color: var(--white);
}

/* "+N more" toggle — same pill shape as the type filters but quieter
   (dashed border signals "this opens more options"). Paired with a hidden
   sibling container that the JS toggles via `hidden`. */
.resource-type-filter--more {
  border-style: dashed;
  color: var(--blue-700);
}

.resource-type-filter--more.is-expanded {
  border-style: solid;
  background: var(--blue-50, rgba(3, 56, 110, 0.04));
  color: var(--blue-900);
}

.resource-type-filters-overflow {
  display: contents;
}

.resource-type-filters-overflow[hidden] {
  display: none;
}

/* Meta row: list count on the left, demoted Sort on the right. Sort is
   information density, not a primary decision — putting it next to the
   count signals that. */
.resource-library-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  max-width: 960px;
  margin: 0 auto var(--space-md);
}

.resource-library-count {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--fg-meta);
}

.resource-library-count [data-resource-count-num] {
  font-variant-numeric: tabular-nums;
  color: var(--blue-900);
  font-weight: 700;
}

.resource-library-sort {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.resource-library-sort-label {
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-meta);
}

.resource-library-sort-select {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 20px 4px 4px;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue-900);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2303386e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.2s var(--ease-out, ease-out);
}

.resource-library-sort-select:hover {
  border-bottom-color: var(--blue-700);
}

.resource-library-sort-select:focus-visible {
  outline: none;
  border-bottom-color: var(--blue-700);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(3, 56, 110, 0.2));
}

/* Hairline row list — mirrors `.policy-series-list` and
   `.partners-featured-list` discipline. No card chrome. */
.resource-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 960px;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

/* The `<li>` is a 2-column grid: date | body. Both the main link and the
   meta row (topic + Download PDF) live as children inside the grid; the
   meta row uses `subgrid` so its content aligns with the body column
   without recomputing the date-column width. Keeping the download outside
   the main link avoids the invalid nested-anchor pattern. */
.resource-library-item {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  column-gap: clamp(var(--space-md), 3vw, var(--space-2xl));
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  transition: background-color 0.2s var(--ease-out, ease-out);
}

.resource-library-item[hidden] {
  display: none;
}

/* The main link spans both columns and reuses the parent grid via subgrid
   so `.resource-library-item-date` and `.resource-library-item-body` sit
   in the same date/body columns the meta row also uses. Fallback duplicates
   the parent's column definition for browsers without subgrid support. */
.resource-library-item-link {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  column-gap: clamp(var(--space-md), 3vw, var(--space-2xl));
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  padding: 0;
  transition: color 0.2s var(--ease-out, ease-out);
}

@supports (grid-template-columns: subgrid) {
  .resource-library-item-link {
    grid-template-columns: subgrid;
    column-gap: inherit;
  }
}

/* Hover/focus bg tint is applied to the whole `<li>` (not just the inner
   `<a>`) so the meta row below — topic + Download PDF, which is a sibling
   of the link rather than a descendant — participates in the same visual
   state. Without this, the tint covered only the link's content and the
   meta row sat stranded under an untinted strip. `:has()` is supported in
   all major browsers since 2023. Browsers without `:has()` degrade to no
   row-tint on hover; the title-underline affordance still fires. */
.resource-library-item:has(.resource-library-item-link:hover),
.resource-library-item:has(.resource-library-item-link:focus-visible) {
  background-color: rgba(3, 56, 110, 0.03);
}

.resource-library-item-link:hover,
.resource-library-item-link:focus-visible {
  color: var(--blue-900);
  outline: none;
}

.resource-library-item-link:hover .resource-library-item-title,
.resource-library-item-link:focus-visible .resource-library-item-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.resource-library-item-date {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fg-meta);
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 6px;
}

.resource-library-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.resource-library-item-type {
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-700);
}

.resource-library-item-title {
  font-family: var(--font-accent);
  font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  margin: 0;
  text-wrap: balance;
}

.resource-library-item-excerpt {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0;
  max-width: 62ch;
}

/* Meta row — sibling of the main link, sits below it. Topic + Download
   PDF read as inline editorial metadata (like a masthead line on a
   magazine index page), not as a button action. Takes the right grid
   column so it aligns with the body content above. */
.resource-library-item-meta {
  grid-column: 2 / 3;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-sm);
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--fg-meta);
}

.resource-library-item-topic {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--fg-meta);
}

.resource-library-item-meta-sep {
  color: var(--fg-meta);
  user-select: none;
}

/* Download PDF — an inline arrow-link sitting in the meta row. Overrides
   `.arrow-link`'s defaults for the compact inline context: drops the 44px
   touch-target minimum (padding on the `<a>` recovers the tappable area),
   smaller type, matches the meta row's Avenir register. Color and hover
   behavior inherit from `.arrow-link`. */
.resource-library-item-download {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 0;
  padding: var(--space-xs) 0;
  letter-spacing: 0;
}

/* v4.6.147: client-side "Show more" pagination wrapper. Centered
   below the resource list. Hidden via [hidden] when matchingTotal
   <= visibleLimit (managed by resource-library.js apply()). */
.resource-library-load-more {
  text-align: center;
  margin: var(--space-2xl) auto 0;
}

.resource-library-empty {
  max-width: 720px;
  margin: var(--space-2xl) auto 0;
  padding: var(--space-2xl) 0;
  text-align: center;
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--fg2);
}

.resource-library-empty-headline {
  margin: 0 0 var(--space-md);
  font-family: var(--font-accent);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--blue-900);
  line-height: 1.35;
}

/* Pivot suggestions — "Try instead: N testimony documents across all topics
   · N documents on Drug Pricing".  Each count is a clickable button that
   relaxes one filter.  Dot separators match the hairline-list rhythm used
   elsewhere on the page. */
.resource-library-pivots {
  margin: 0 0 var(--space-lg);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg2);
}

.resource-library-pivots[hidden] {
  display: none;
}

.resource-library-pivots-lead {
  font-weight: 600;
  color: var(--blue-900);
}

.resource-library-pivots-sep {
  color: var(--fg-meta);
}

.resource-library-pivot {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s var(--ease-out, ease-out);
}

.resource-library-pivot strong {
  font-family: var(--font-accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--blue-900);
}

.resource-library-pivot:hover,
.resource-library-pivot:focus-visible {
  color: var(--blue-900);
  outline: none;
}

.resource-library-clear {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--fg-meta);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.resource-library-clear:hover,
.resource-library-clear:focus-visible {
  color: var(--blue-900);
  outline: none;
}

@media (max-width: 720px) {
  .resource-controls {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Phone: collapse the 2-column grid to a single column so the date sits
     as a caption above the body, and the meta row sits flush-left under
     the body instead of being offset by the now-absent date column. */
  .resource-library-item {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-md) 0;
  }

  .resource-library-item-meta {
    grid-column: 1 / -1;
  }

  .resource-library-item-date {
    padding-top: 0;
  }
}

/* 2-column action grid variant */
.action-grid-2col {
  grid-template-columns: repeat(2, 1fr);
}

/* --- Policy Page Responsive --- */
@media (max-width: 1024px) {
  .action-grid-2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  /* --- 1. Hero: tighter on Policy page --- */
  .page-hero {
    padding: var(--space-lg) 0 var(--space-xl);
  }

  .page-hero h1 {
    margin-bottom: var(--space-sm);
  }

  .page-hero-subtitle {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .breadcrumb {
    margin-bottom: var(--space-md);
  }

  /* --- 3. Priority issues: 2×2 grid collapses to 1-col stack on phone.
     Cells lose horizontal padding for edge-to-edge mobile rhythm; the
     hairline gaps between cells become full-width horizontal rules. --- */
  .priority-issues {
    padding: var(--space-2xl) 0;
  }

  .priority-issues-header {
    margin-bottom: var(--space-lg);
  }

  .priority-issues-grid {
    grid-template-columns: 1fr;
  }

  .priority-issues-cell {
    padding: var(--space-lg) var(--space-md);
    min-height: 0;
    gap: var(--space-sm);
  }

  .priority-issues-desc {
    font-size: 0.95rem;
    max-width: none;
  }

  .priority-issues-cue {
    font-size: 0.875rem;
  }

  /* --- 4. Resource library: compact control bar + row list --- */
  .resource-library {
    padding: var(--space-2xl) 0;
  }

  .resource-library-header {
    margin-bottom: var(--space-lg);
  }

  .resource-type-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding-bottom: var(--space-xs);
  }

  .resource-type-filters::-webkit-scrollbar {
    display: none;
  }

  .resource-type-filter {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* --- 6. Section spacing: tighter throughout --- */
  .section-label {
    margin-bottom: var(--space-sm);
  }

  .action-cta {
    padding: var(--space-xl) 0;
  }

  .action-cta-person {
    display: none;
  }

  .action-card .btn {
    width: 100%;
    text-align: center;
  }

  /* Donate CTA — mobile */
  .action-cta .action-donate {
    padding: var(--space-2xl) var(--space-xl);
  }

  .action-cta .action-donate h3 {
    font-size: 1.5rem;
  }

  .action-cta .action-donate .btn {
    width: 100%;
    padding: 14px 24px;
  }

  /* Newsletter CTA — mobile */
  .newsletter-cta {
    padding: var(--space-xl) 0;
  }

  .newsletter-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .newsletter-cta-form {
    width: 100%;
    max-width: none;
  }
}

/* ============================================
   Resource Detail Page Styles
   ============================================ */

.article-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.article-meta .meta-separator {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  vertical-align: middle;
  align-self: baseline;
  position: relative;
  top: -0.35em;
}

.article-meta .news-tag {
  font-size: 0.75rem;
}

/* Article Actions Bar */
.article-actions {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--space-lg) 0;
}

.article-actions .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.actions-download .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

/* v4.6.74: .actions-share / .actions-share-label / .share-btn rule
   block retired. The circular icon-only share buttons on press release
   + resource pages were a pre-spine variant (hardcoded inline SVGs,
   missing Facebook, no header). All four share-button surfaces now use
   the canonical .action-share-* treatment via mrc_render_share_buttons()
   in inc/template-tags.php. */

/* Article Layout - Two Column */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) 300px;
  gap: var(--space-3xl);
  padding: var(--space-3xl) 0;
  max-width: 1084px;
}

.article-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-xl));
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Executive Summary */
.article-summary {
  background: #f6f8fb;
  border: 1px solid #e8ecf1;
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  margin-bottom: var(--space-3xl);
  position: relative;
  overflow: hidden;
}

.article-summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-400));
}

.article-summary h2 {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-600);
  margin-bottom: var(--space-md);
}

.article-summary p {
  font-size: 1.05rem;
  color: var(--fg2);
  line-height: 1.8;
  margin: 0;
}

.article-summary p + p {
  margin-top: var(--space-md);
}

/* =====================================================================
   BLOCK EDITOR & CONTENT TYPOGRAPHY
   Applies to all content output by the WordPress editor:
   .article-body, .article-content, .page-content .container, .entry-content
   ===================================================================== */

/* -- Paragraphs -- */
.article-body p,
.article-content p,
.page-content .container > p,
.entry-content p {
  margin-top: 0;
  margin-bottom: var(--space-lg);
  color: var(--fg2);
  line-height: var(--line-height-body, 1.6);
}

/* -- Headings -- */
.article-body h1,
.article-content h1,
.page-content .container > h1,
.entry-content h1 {
  font-family: var(--font-primary);
  font-size: 2.75rem;
  font-weight: var(--weight-heading, 700);
  color: var(--gray-900);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-lg);
  line-height: var(--line-height-heading, 1.3);
}

.article-body h2,
.article-content h2,
.post-content h2,
.page-content .container > h2,
.entry-content h2 {
  font-size: 1.65rem;
  font-weight: var(--weight-heading, 700);
  color: var(--gray-900);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-lg);
  line-height: 1.3;
}

.article-body h3,
.article-content h3,
.post-content h3,
.page-content .container > h3,
.entry-content h3 {
  font-size: 1.2rem;
  font-weight: var(--weight-heading, 700);
  color: var(--gray-900);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  line-height: 1.3;
}

.article-body h4,
.article-content h4,
.page-content .container > h4,
.entry-content h4 {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: var(--weight-heading, 700);
  color: var(--gray-900);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  line-height: var(--line-height-heading, 1.3);
}

.article-body h5,
.article-content h5,
.page-content .container > h5,
.entry-content h5 {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: var(--weight-heading, 700);
  color: var(--gray-900);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  line-height: var(--line-height-heading, 1.3);
}

.article-body h6,
.article-content h6,
.page-content .container > h6,
.entry-content h6 {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: var(--weight-heading, 700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-600);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  line-height: var(--line-height-heading, 1.3);
}

/* Remove top margin on first heading in a content area */
.article-body > h1:first-child,
.article-body > h2:first-child,
.article-body > h3:first-child,
.article-content > h1:first-child,
.article-content > h2:first-child,
.article-content > h3:first-child,
.page-content .container > h1:first-child,
.page-content .container > h2:first-child,
.page-content .container > h3:first-child,
.entry-content > h1:first-child,
.entry-content > h2:first-child,
.entry-content > h3:first-child {
  margin-top: 0;
}

/* -- Lists -- */
.article-body ul,
.article-body ol,
.article-content ul,
.article-content ol,
.page-content .container > ul,
.page-content .container > ol,
.entry-content ul,
.entry-content ol {
  padding-left: var(--space-xl);
  margin-top: 0;
  margin-bottom: var(--space-lg);
}

.article-body li,
.article-content li,
.page-content .container li,
.entry-content li {
  margin-bottom: var(--space-sm);
  color: var(--fg2);
  padding-left: var(--space-xs);
  line-height: var(--line-height-body, 1.6);
}

.article-body ul,
.article-content ul,
.page-content .container > ul,
.entry-content ul {
  list-style: disc;
}

.article-body ol,
.article-content ol,
.page-content .container > ol,
.entry-content ol {
  list-style: decimal;
}

/* -- Blockquotes -- Editorial pullquote: tinted ground + oversized
   opening mark as the decorative cue. No colored side-stripe. */
.article-body > blockquote:not([class*="mrc-"]),
.article-content > blockquote:not([class*="mrc-"]),
.page-content .container > blockquote:not([class*="mrc-"]),
.entry-content > blockquote:not([class*="mrc-"]) {
  position: relative;
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-xl) 0;
  font-style: italic;
  color: var(--gray-800);
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.article-body > blockquote:not([class*="mrc-"])::before,
.article-content > blockquote:not([class*="mrc-"])::before,
.page-content .container > blockquote:not([class*="mrc-"])::before,
.entry-content > blockquote:not([class*="mrc-"])::before {
  content: "\201C";
  position: absolute;
  top: -0.1em;
  left: 0.4rem;
  font-family: var(--font-accent);
  font-size: 4rem;
  line-height: 1;
  color: var(--blue-100);
  pointer-events: none;
}

.article-body > blockquote:not([class*="mrc-"]) p:last-child,
.article-content > blockquote:not([class*="mrc-"]) p:last-child,
.page-content .container > blockquote:not([class*="mrc-"]) p:last-child,
.entry-content > blockquote:not([class*="mrc-"]) p:last-child {
  margin-bottom: 0;
}

/* Ensure blockquotes inside custom blocks are completely clean */
[class*="wp-block-mrc-"] blockquote,
[class*="mrc-pullquote"] blockquote {
  border: none;
  padding: 0;
  margin: 0;
  background: none;
  font-style: inherit;
  color: inherit;
  border-radius: 0;
}

/* -- Horizontal Rules -- */
.article-body hr,
.article-content hr,
.page-content .container > hr,
.entry-content hr {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: var(--space-2xl) 0;
}

/* -- Tables -- */
.article-body table,
.article-content table,
.page-content .container table,
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-xl) 0;
  font-size: 0.95rem;
}

.article-body th,
.article-content th,
.page-content .container th,
.entry-content th {
  background: var(--gray-50);
  font-weight: 700;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 2px solid var(--gray-200);
}

.article-body td,
.article-content td,
.page-content .container td,
.entry-content td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--gray-200);
  color: var(--fg2);
}

/* -- Images & Figures -- */
.article-body img,
.article-content img,
.page-content .container img,
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.article-body figure,
.article-content figure,
.page-content .container figure,
.entry-content figure {
  margin: var(--space-xl) 0;
}

.article-body figcaption,
.article-content figcaption,
.page-content .container figcaption,
.entry-content figcaption {
  font-size: 0.85rem;
  color: var(--fg-meta);
  margin-top: var(--space-sm);
  text-align: center;
}

/* -- WordPress Block Spacing -- */
.page-content .container > .wp-block-group,
.entry-content > .wp-block-group,
.article-content > .wp-block-group {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.page-content .container > .wp-block-separator,
.entry-content > .wp-block-separator,
.article-content > .wp-block-separator {
  margin: var(--space-2xl) 0;
}

.page-content .container > .wp-block-image,
.entry-content > .wp-block-image,
.article-content > .wp-block-image {
  margin: var(--space-xl) 0;
}

.page-content .container > .wp-block-columns,
.entry-content > .wp-block-columns,
.article-content > .wp-block-columns {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

/* Key Findings */
.findings-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: var(--space-xl) 0 var(--space-2xl);
}

.finding-card {
  display: flex;
  gap: var(--space-lg);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  align-items: flex-start;
}

.finding-number {
  font-family: var(--font-accent);
  font-size: 2rem;
  font-weight: 700;
  color: var(--blue-600);
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
  text-align: center;
}

.finding-content h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

.finding-content p {
  font-size: 0.95rem;
  color: var(--gray-600);
  margin: 0;
  line-height: 1.7;
}

/* Article Pull Quote — matches testimonial card style */
.article-pullquote {
  margin: var(--space-3xl) 0;
  padding: 2.75rem 3rem 2.25rem;
  background: #f4f5f7;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.article-pullquote::before {
  content: '\201C';
  position: absolute;
  top: 1.25rem;
  right: 1.75rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 6.5rem;
  line-height: 1;
  color: #c8cdd4;
  opacity: 0.45;
  pointer-events: none;
}

.article-pullquote .quote-icon {
  display: none;
}

.article-pullquote blockquote {
  font-family: var(--font-accent);
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 500;
  color: var(--blue-900);
  line-height: 1.4;
  margin: 0 0 1.75rem;
  padding: 0;
  max-width: 88%;
  position: relative;
  z-index: 1;
  text-wrap: balance;
}

.article-pullquote cite {
  font-style: normal;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-800);
  display: block;
  position: relative;
  z-index: 1;
}

/* Sidebar Components */
.sidebar-card.sidebar-cta {
  text-align: center;
  background: #f6f8fb;
  border-color: #e8ecf1;
}

.sidebar-cta .cta-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-600);
  margin: 0 auto var(--space-md);
}

.sidebar-cta h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

.sidebar-cta p {
  font-size: 0.9rem;
  color: var(--gray-600);
  margin-bottom: var(--space-lg);
}

.sidebar-cta .btn {
  width: 100%;
}

.sidebar-heading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue-600);
  margin-bottom: var(--space-lg);
}

.sidebar-resources .resource-item {
  border-bottom: 1px solid var(--gray-100);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
}

.sidebar-resources .resource-item:last-child {
  border-bottom: none;
  padding-bottom: var(--space-xs);
  margin-bottom: 0;
}

.sidebar-newsletter h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

.sidebar-newsletter p {
  font-size: 0.9rem;
  color: var(--gray-600);
  margin-bottom: var(--space-lg);
}

.sidebar-newsletter .newsletter-form {
  flex-direction: column;
}

.sidebar-newsletter .newsletter-form input {
  font-size: 0.9rem;
}

/* Back Link */
.back-link-section {
  padding: var(--space-xl) 0 var(--space-2xl);
  border-top: 1px solid var(--gray-200);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--blue-700);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition:
    color 0.2s var(--ease-out, ease-out),
    gap   0.2s var(--ease-out, ease-out);
  padding: var(--space-sm) 0;
}

.back-link:hover {
  color: var(--blue-900);
  gap: var(--space-md);
}

.back-link svg {
  transition: transform 0.2s var(--ease-out, ease-out);
}

.back-link:hover svg {
  transform: translateX(-3px);
}

/* Endnotes / Footnotes styling */
/* --- Footnotes & Endnotes (Tooltip Popover + Collapsible Section) --- */

/* Inline reference links: [i], [ii], etc → superscript badges */
.article-content a[href^="#_edn"],
.entry-content a[href^="#_edn"],
.article-body a[href^="#_edn"] {
  font-size: 0.7em;
  font-weight: 700;
  color: var(--blue-600, #2563eb);
  text-decoration: none;
  vertical-align: super;
  line-height: 0;
  padding: 0 2px;
  cursor: pointer;
  transition: color 0.15s;
}

.article-content a[href^="#_edn"]:hover,
.entry-content a[href^="#_edn"]:hover,
.article-body a[href^="#_edn"]:hover {
  color: var(--blue-800, #1e3a5f);
}

/* Highlight animation when scrolling back to a reference */
.mrc-endnote-highlight {
  background: var(--blue-100, #dbeafe) !important;
  border-radius: var(--radius-sm, 6px);
  transition: background 0.8s var(--ease-out, ease-out);
}

/* ==========================================================================
   TOOLTIP POPOVER — appears on click of inline reference
   ========================================================================== */
.mrc-endnote-tooltip {
  position: absolute;
  z-index: 10000;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e5ea);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 8px 32px rgba(3, 56, 110, 0.12), 0 2px 8px rgba(3, 56, 110, 0.06);
  overflow: hidden;
  animation: mrcTooltipIn 0.15s ease-out;
}

@keyframes mrcTooltipIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mrc-endnote-tooltip--above {
  animation-name: mrcTooltipInAbove;
}

@keyframes mrcTooltipInAbove {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mrc-endnote-tooltip__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: var(--gray-50, #f8f9fb);
  border-bottom: 1px solid var(--gray-200, #e5e5ea);
}

.mrc-endnote-tooltip__ref {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blue-700, #1a5fa8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mrc-endnote-tooltip__close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--gray-400, #b0b0ba);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition:
    background-color 0.15s var(--ease-out, ease-out),
    color            0.15s var(--ease-out, ease-out);
}

.mrc-endnote-tooltip__close:hover {
  color: var(--gray-700, #4a4a5a);
  background: var(--gray-100, #f3f4f6);
}

.mrc-endnote-tooltip__body {
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--gray-700, #4a4a5a);
  max-height: 180px;
  overflow-y: auto;
  word-break: break-word;
}

.mrc-endnote-tooltip__body a {
  color: var(--blue-600, #2563eb);
  word-break: break-all;
}

.mrc-endnote-tooltip__footer {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--gray-100, #f3f4f6);
  text-align: center;
}

.mrc-endnote-tooltip__all {
  background: none;
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue-600, #2563eb);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm, 6px);
  transition:
    background-color 0.15s var(--ease-out, ease-out),
    color            0.15s var(--ease-out, ease-out);
}

.mrc-endnote-tooltip__all:hover {
  background: var(--blue-50, #f0f6ff);
  color: var(--blue-800, #1e3a5f);
}

/* ==========================================================================
   COLLAPSIBLE ENDNOTES SECTION — toggle at the bottom of content
   ========================================================================== */
.mrc-endnotes {
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
  background: var(--gray-50, #f8f9fb);
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--gray-200, #e5e5ea);
  overflow: hidden;
}

.mrc-endnotes__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-700, #4a4a5a);
  transition: background 0.15s, color 0.15s;
}

.mrc-endnotes__toggle:hover {
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-900, #1a1a2e);
}

.mrc-endnotes__toggle-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mrc-endnotes__toggle-icon {
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out, ease-out);
}

.mrc-endnotes__toggle[aria-expanded="true"] .mrc-endnotes__toggle-icon {
  transform: rotate(180deg);
}

.mrc-endnotes__content {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid var(--gray-200, #e5e5ea);
}

.mrc-endnotes__content p {
  font-size: 0.82rem !important;
  color: var(--gray-600, #636370) !important;
  line-height: 1.65;
  margin: 0 0 0.5rem;
  padding: 0.35rem 0 0.35rem 1.75rem;
  text-indent: -1.75rem;
  word-break: break-word;
}

.mrc-endnotes__content p:first-child {
  margin-top: 1rem;
}

.mrc-endnotes__content p:last-child {
  margin-bottom: 0;
}

/* Back-to-text link */
.mrc-endnotes__content a[href^="#_ednref"] {
  font-weight: 700;
  color: var(--blue-700, #1a5fa8);
  text-decoration: none;
  margin-right: 0.25rem;
}

.mrc-endnotes__content a[href^="#_ednref"]:hover {
  text-decoration: underline;
}

/* External citation links */
.mrc-endnotes__content a:not([href^="#_ednref"]) {
  color: var(--blue-600, #2563eb);
  word-break: break-all;
}

/* Legacy .footnotes wrapper */
.article-body .footnotes,
.article-content .footnotes,
.entry-content .footnotes {
  margin-top: var(--space-3xl);
  padding: var(--space-xl) var(--space-2xl);
  background: var(--gray-50, #f8f9fb);
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--gray-200, #e5e5ea);
  font-size: 0.85rem;
  color: var(--fg-meta);
  line-height: 1.6;
}

.article-body .footnotes p,
.article-content .footnotes p,
.entry-content .footnotes p {
  font-size: 0.85rem;
  color: var(--fg-meta);
  margin-bottom: var(--space-sm);
  word-break: break-word;
}

.article-body .footnotes a,
.article-content .footnotes a,
.entry-content .footnotes a {
  word-break: break-all;
}

/* sup a (generic superscript links) */
.article-body sup a,
.article-content sup a,
.entry-content sup a {
  color: var(--blue-600);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.75em;
}

.article-body sup a:hover,
.article-content sup a:hover,
.entry-content sup a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .mrc-endnote-tooltip {
    width: calc(100vw - 32px);
    left: 16px !important;
    right: 16px;
  }

  .mrc-endnotes__toggle {
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
  }

  .mrc-endnotes__content {
    padding: 0 1rem 1rem;
  }

  .mrc-endnotes__content p {
    font-size: 0.78rem !important;
    padding-left: 1.25rem;
    text-indent: -1.25rem;
  }
}

/* In-article download CTA — mobile-only.
   v4.6.107: reverted to mobile-only visibility (was promoted to all-
   viewport in v4.6.106). On desktop the sidebar Download block on the
   right rail is already prominent, so an inline CTA above the article
   content was a redundant second above-the-fold surface. On mobile the
   sidebar gets pushed below the article content when .article-layout
   collapses to 1-col, so the inline CTA still serves as the primary
   above-content download affordance. Layout + button rules live in the
   @media (max-width: 1024px) block further down. */
.article-inline-cta {
  display: none;
}

/* Resource Detail Responsive */
@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .article-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {

  /* --- Hero: keep display register tight on small viewports --- */
  .page-hero h1 {
    line-height: 1.1;
  }

  /* Breadcrumb: truncate current page, wrap if needed */
  .breadcrumb {
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 4px;
    margin-bottom: var(--space-md);
  }

  .breadcrumb span[aria-current] {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  /* Article meta: pill aligned with date */
  .article-meta {
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.85rem;
    align-items: baseline;
    margin-top: var(--space-md);
  }

  .article-meta .meta-separator {
    display: none;
  }

  .article-meta .news-tag {
    font-size: 0.75rem;
    vertical-align: baseline;
    position: relative;
    top: -1px;
  }

  /* --- Actions bar: compact band for the download/external-link button.
     v4.6.74: share buttons moved out of this band to live below article
     content via mrc_render_share_buttons(); the band is download-only
     now. The .actions-share mobile rule has been retired. --- */
  .article-actions {
    padding: var(--space-sm) 0;
  }

  .article-actions .container {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
  }

  /* Hide actions bar download on mobile (press release "View original
     article" external link — single-mrc_press_release.php). Resource
     pages no longer use this band at all (v4.6.106 retirement); on
     mobile the .article-inline-cta inside .article-main handles the
     download, while desktop relies on the sidebar Download block
     (v4.6.107). */
  .actions-download {
    display: none;
  }

  /* --- Content area --- */
  .article-summary {
    padding: var(--space-lg);
  }

  .article-body h2,
  .article-content h2,
  .post-content h2,
  .page-content .container > h2,
  .entry-content h2 {
    font-size: 1.35rem;
    margin-top: var(--space-2xl);
  }

  .article-body h3,
  .article-content h3,
  .post-content h3,
  .page-content .container > h3,
  .entry-content h3 {
    font-size: 1.1rem;
  }

  .finding-card {
    flex-direction: column;
    gap: var(--space-md);
  }

  .finding-number {
    width: auto;
    text-align: left;
  }

  .article-pullquote {
    padding: 2rem 1.5rem 1.5rem;
  }

  .article-pullquote::before {
    font-size: 4.5rem;
    top: 0.75rem;
    right: 1rem;
  }

  .article-pullquote blockquote {
    font-size: 1.1rem;
    padding-left: 1.25rem;
    max-width: 100%;
  }

  .article-body table,
  .article-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Sidebar: compact on mobile --- */
  .article-layout {
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
  }

  .article-sidebar {
    gap: var(--space-md);
  }

  /* Download CTA card — compact horizontal layout */
  .sidebar-card.sidebar-cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    text-align: left;
  }

  .sidebar-cta .cta-icon {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .sidebar-cta h3 {
    font-size: 0.95rem;
    margin-bottom: var(--space-xs);
  }

  .sidebar-cta p {
    display: none;
  }

  .sidebar-cta .btn,
  .sidebar-newsletter .btn {
    width: 100%;
    text-align: center;
  }

  /* Related resources — tighter */
  .sidebar-resources {
    padding: var(--space-md);
  }

  .resource-item {
    padding: var(--space-sm) 0;
  }

  .resource-item h4 {
    font-size: 0.9rem;
  }

  /* Newsletter card — compact */
  .sidebar-newsletter {
    padding: var(--space-lg);
  }

  .sidebar-newsletter h3 {
    font-size: 0.95rem;
    margin-bottom: var(--space-xs);
  }

  .sidebar-newsletter p {
    font-size: 0.85rem;
    margin-bottom: var(--space-sm);
  }

  /* --- Back link: card-style, more prominent --- */
  .back-link-section {
    padding: var(--space-lg) 0 var(--space-xl);
    border-top: 1px solid var(--gray-200);
    margin-top: var(--space-sm);
  }

  .back-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--blue-700);
    background: var(--gray-50);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    text-decoration: none;
  }

  .back-link:hover {
    background: var(--blue-50);
  }

  /* --- In-article inline CTA: mobile-only surface.
     v4.6.107: full styling lives here (the desktop base rule is
     display:none). On mobile the sidebar Download block flows below
     the article content, so this inline CTA above-content is the
     primary download affordance. --- */
  .article-inline-cta {
    display: block;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--gray-200);
  }

  .article-inline-cta .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: 0.9rem;
  }
}

/* ============================================
   Get Help Page Styles
   ============================================ */

/* --- Helpline Spotlight — counselor feature.
   Reshaped from duplicate-hero (second phone number + icon chrome + CTAs)
   into a photo + named-counselor pull-quote. The hero owns the phone; the
   close owns the final ask. This section gives the number a face. Pattern
   mirrors the homepage's `.policy-lede` (italic Franklin Gothic quote +
   em-dash rule + attribution). */
.helpline-spotlight {
  padding: var(--space-3xl) 0;
  background: var(--gray-50);
}

.helpline-spotlight-header {
  max-width: 720px;
  margin: 0 0 var(--space-xl);
}

.helpline-spotlight-header .section-label {
  margin-bottom: var(--space-md);
}

.helpline-spotlight-feature-heading {
  font-family: var(--font-accent);
  font-size: clamp(1.75rem, 1.5vw + 1.25rem, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  margin: 0;
  text-wrap: balance;
  max-width: 22ch;
}

.helpline-spotlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-2xl);
  align-items: center;
}

.helpline-spotlight-photo {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--blue-100);
  box-shadow: 0 16px 40px -14px rgba(2, 42, 84, 0.35);
}

.helpline-spotlight-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.helpline-spotlight-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.helpline-spotlight-quote {
  margin: 0;
  padding: 0;
  border: 0;
}

.helpline-spotlight-quote p {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(1.25rem, 0.8vw + 1.1rem, 1.625rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.35;
  color: var(--blue-900);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.helpline-spotlight-attribution {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--fg2);
  line-height: 1.3;
  margin: 0;
}

/* Separate span element (not a border) matching the homepage .policy-lede-rule
   pattern, staying clear of the anti-slop side-stripe ban. */
.helpline-spotlight-attribution-rule {
  display: inline-block;
  width: 2.5rem;
  height: 2px;
  background: var(--green-800);
  flex-shrink: 0;
}

.helpline-spotlight-attribution strong {
  font-weight: 700;
  color: var(--blue-900);
}

.helpline-spotlight-attribution-title {
  font-style: italic;
  color: var(--fg-meta);
}

/* Reassurance line — moves below the attribution. Still addressed to the
   help-seeker (free / confidential / real counselor / wait time). */
.helpline-spotlight-reassurance {
  font-family: var(--font-accent);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-800);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px) {
  .helpline-spotlight-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
  }
  .helpline-spotlight-photo {
    max-width: 420px;
    aspect-ratio: 4 / 3;
  }
}

/* --- How We Can Help —
   Hairline-separated editorial list. Replaces the former 3-up icon-card
   grid (verbatim anti-reference #1). No icons, no card chrome, no accent
   dots — just typography + hairlines + whitespace, matching the homepage's
   latest-strip and policy-resources rhythm. */
.help-topics {
  padding: var(--space-3xl) 0;
  background: var(--white);
}

.help-topics-header {
  margin-bottom: var(--space-xl);
}

.help-topics-header .section-title,
.help-topics .section-title {
  margin: 0;
}

.help-topics-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.help-topic-item {
  padding: var(--space-xl) 0;
}

.help-topic-item + .help-topic-item {
  border-top: 1px solid var(--border-1);
}

.help-topic-heading {
  font-family: var(--font-accent);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--blue-900);
  margin: 0 0 var(--space-sm);
}

.help-topic-desc {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg2);
  margin: 0 0 var(--space-md);
  max-width: 65ch;
}

.help-topic-link {
  font-size: 0.9rem;
}

/* --- Callback Form Section --- */
.callback-section {
  padding: var(--space-3xl) 0;
  background: var(--gray-50);
}

.callback-header {
  margin-bottom: var(--space-xl);
}

.callback-header .section-subtitle {
  max-width: 640px;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.callback-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-2xl);
  align-items: start;
}

.callback-intro {
  font-size: 1.05rem;
  color: var(--gray-600);
  margin-bottom: var(--space-2xl);
}

.callback-form {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
}

/* --- Callback form runtime states ---
   Status region for AJAX success/error messages (and no-JS error replay).
   Field-level error rendered beneath each input with aria-describedby. */
.callback-status {
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  outline: none;
}

.callback-status[hidden] {
  display: none;
}

.callback-status--success {
  background: var(--green-light, #ebf4dd);
  color: var(--blue-900);
  border-top: 2px solid var(--green-800);
}

/* Success checkmark — strokes in via `stroke-dasharray` over ~500ms. Stays
   drawn after. Tactile confirmation ("it went through") without the sugar
   of a celebratory animation. `prefers-reduced-motion` zeros duration
   theme-wide, so the mark appears already drawn for motion-sensitive users. */
.callback-status-check {
  display: block;
  margin: 0 auto var(--space-md);
  color: var(--green-800);
}

.callback-status-check polyline {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: callback-check-draw 0.5s var(--ease-out, ease-out) 0.1s forwards;
}

@keyframes callback-check-draw {
  to { stroke-dashoffset: 0; }
}

.callback-status-message {
  margin: 0;
}

/* When the status region renders inline (no-JS path), its layout needs to
   center the checkmark + message stack. */
.callback-status--success {
  text-align: center;
}

.callback-status--error {
  background: var(--blue-50, #eef3f9);
  color: var(--blue-900);
  border-top: 2px solid var(--blue-600);
}

.callback-form[aria-busy="true"] button[type="submit"] {
  opacity: 0.7;
  cursor: progress;
}

.form-field-error {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--blue-800);
  font-weight: 500;
}

.callback-form input[aria-invalid="true"],
.callback-form select[aria-invalid="true"],
.callback-form textarea[aria-invalid="true"] {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 1px var(--blue-600);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Single-child rows collapse to a single column so the lone field doesn't
   sit next to an empty grid track. The zip-code row is the current use. */
.form-row:has(> .form-group:only-child) {
  grid-template-columns: 1fr;
}

.form-row:has(> .form-group:only-child) .form-group {
  max-width: 260px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group-full {
  margin-bottom: var(--space-lg);
}

/* Form labels — sentence case, readable on mobile at night. Was 12px uppercase
   tracked (SaaS-form aesthetic tell + below the site's legibility floor for
   older readers). */
.form-group label {
  font-family: var(--font-accent);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg1, var(--blue-900));
  margin-bottom: var(--space-xs);
}

.required {
  color: var(--red-600);
}

.optional {
  font-weight: 400;
  color: var(--fg-meta);
  font-size: 0.85rem;
}

.callback-form input,
.callback-form select,
.callback-form textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--border-2, #c7cfd9);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--gray-800);
  min-height: 48px;
  background: var(--white);
  transition: border-color 0.2s;
}

.callback-form input:focus,
.callback-form select:focus,
.callback-form textarea:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--green-accent);
}

.callback-form textarea {
  resize: vertical;
  min-height: 100px;
}

.callback-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b6b7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.form-help-text {
  font-size: 0.8rem;
  color: var(--fg-meta);
  line-height: 1.4;
  margin: var(--space-xs) 0 0;
}

.form-privacy {
  font-size: 0.85rem;
  color: var(--fg-meta);
  margin: 0;
}

/* Checkbox label */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 0.9rem;
  color: var(--fg2);
  cursor: pointer;
  line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--blue-600);
}

/* Form tooltip */
.form-tooltip {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-xs);
  color: var(--gray-400);
  cursor: help;
  vertical-align: middle;
}

/* Input with prefix ($ symbol) */
.input-prefix-wrap {
  position: relative;
}

.input-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-meta);
  font-size: 0.95rem;
  pointer-events: none;
}

.input-prefix-wrap input {
  padding-left: 28px;
}

/* MSP inline fields (conditional) */
.msp-inline-fields {
  border-top: 1px solid var(--gray-200);
  padding-top: var(--space-xl);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* NY-zip reveal banner — blue-grounded utility note (shifted from gold in the
   /colorize pass). A state-eligibility reveal is informational, not a campaign
   flag; the brand brief reserves gold for story/board/testimonial warmth. */
.msp-inline-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.msp-inline-banner-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.msp-inline-banner strong {
  display: block;
  font-size: 0.95rem;
  color: var(--gray-900);
  margin-bottom: var(--space-xs);
}

.msp-inline-banner p {
  font-size: 0.9rem;
  color: var(--fg2);
  line-height: 1.5;
  margin: 0;
}

/* Savings sidebar card — matches `.callback-tip-card`'s blue treatment so
   the two swapping sidebar cards share one visual vocabulary. */
.callback-savings-card {
  background: var(--blue-50);
  border-color: var(--blue-200);
}

.callback-savings-card h3 {
  color: var(--blue-900);
}

/* Callback Sidebar */
.callback-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.callback-info-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  flex: 1;
  margin-bottom: var(--space-lg);
}

.callback-info-card h3 {
  font-size: 1.1rem;
  color: var(--gray-900);
  margin-bottom: var(--space-lg);
}

.expect-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.expect-list li {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  align-items: flex-start;
}

.expect-list li:last-child {
  margin-bottom: 0;
}

.expect-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.expect-list strong {
  display: block;
  font-size: 0.95rem;
  color: var(--gray-900);
  margin-bottom: 2px;
}

.expect-list p {
  font-size: 0.85rem;
  color: var(--gray-600);
  margin: 0;
  line-height: 1.5;
}

.callback-tip-card {
  background: var(--blue-50);
  border-color: var(--blue-200);
}

.callback-tip-card h3 {
  color: var(--blue-800);
}

.callback-tip-card > p {
  font-size: 0.9rem;
  color: var(--gray-600);
  margin-bottom: var(--space-md);
}

.tip-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tip-list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.9rem;
  color: var(--fg2);
  padding: var(--space-xs) 0;
}

/* Dot marker — replaces the former teal checkmark SVG. Navy dot matches the
   .mi-feature rhythm and keeps the page's palette tight (navy + kelly). */
.tip-list li::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue-400);
  flex-shrink: 0;
}

/* --- MSP (inline, callback-form NY-zip reveal only) ---
   The standalone `.msp-section` was removed in the Get Help distill pass;
   its NY-eligibility + savings content is now owned exclusively by the
   callback form's progressive-disclosure reveal in `get-help-callback.php`.
   The remaining rules below power that inline treatment. */
.msp-savings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(3, 56, 110, 0.12);
}

.msp-savings-item:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.msp-savings-label {
  font-size: 0.9rem;
  color: var(--fg2);
}

.msp-savings-value {
  font-weight: 700;
  color: var(--gray-900);
  font-size: 1rem;
}

.msp-savings-highlight {
  color: var(--blue-900);
  font-size: 1.15rem;
}

.msp-savings-note {
  font-size: 0.8rem;
  color: var(--fg-meta);
  margin-top: var(--space-md);
  margin-bottom: 0;
  line-height: 1.5;
}

/* --- Client Story Spotlight ---
   v4.6.81: Profile register, differentiated from .helpline-spotlight
   directly above on the same page. Earlier v4.6.80 had aligned the two
   sections onto the same hairline pattern — but they serve different
   editorial purposes:
     - Helpline Spotlight = service intro (counselor). Quote leads.
     - Story Spotlight = human-interest profile (client we served).
       Name leads as a display moment.

   Visual differentiators from helpline:
     - Cream section ground (warm human-scale per .impeccable.md
       Principle 3) vs helpline's gray-50 cool institutional ground
     - Dominant 5/7 grid (photo column wider) vs helpline's 1/1.2
     - Hairline-framed documentary photo (no radius, no shadow) vs
       helpline's rounded portrait with navy shadow
     - Name-led typography (display Franklin Gothic) vs helpline's
       quote-led typography
     - Closes with arrow-link to full story vs helpline's kelly-green
       reassurance line. */
.story-spotlight {
  padding: var(--space-3xl) 0;
  background: var(--cream);
}

.story-spotlight-header {
  max-width: 720px;
  margin: 0 0 var(--space-xl);
}

.story-spotlight-header .section-label {
  margin-bottom: var(--space-md);
}

.story-spotlight-feature-heading {
  font-family: var(--font-accent);
  font-size: clamp(1.75rem, 1.5vw + 1.25rem, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  margin: 0;
  text-wrap: balance;
  max-width: 28ch;
}

.story-spotlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-3xl);
  align-items: center;
}

.story-spotlight-photo {
  /* v4.6.82: rounded radius + navy-tinted shadow restored per user
     feedback. The v4.6.81 hairline-framed documentary treatment read
     as too flat; the user wanted the polished portrait look back.
     Differentiation from helpline-spotlight still strong through the
     other dimensions (cream ground vs gray-50, 5/7 grid vs 1/1.2,
     name-led typography vs quote-led, eyebrow location, description
     paragraph, arrow-link close). Photo chrome is the one piece that
     can match helpline without the sections feeling like twins. */
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 40px -14px rgba(2, 42, 84, 0.35);
}

.story-spotlight-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-spotlight-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Location eyebrow — small caps Franklin Gothic, letterspaced. Sits
   ABOVE the name as a "where this person lives" tag, not as a name
   attribution. */
.story-spotlight-eyebrow {
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-meta);
  margin: 0;
}

/* Display name — the visual lead. This is the "meet the person" moment.
   Franklin Gothic display, navy, weight 600. Sized between the section
   feature heading (clamp 1.75–2.5rem) and the quote (clamp 1.125–
   1.375rem) so the hierarchy reads:
       feature heading > name > quote > description */
.story-spotlight-name {
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--blue-900);
  margin: 0;
  text-wrap: balance;
}

.story-spotlight-quote {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Quote becomes supporting (not leading). Smaller than the name. Still
   italic Franklin Gothic to preserve the "this is what they said" voice. */
.story-spotlight-quote p {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  color: var(--blue-900);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.story-spotlight-desc {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0;
  max-width: 56ch;
}

.story-spotlight-link {
  margin-top: var(--space-xs);
}

/* --- Get Help Page Responsive --- */
@media (max-width: 1024px) {
  .callback-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

@media (max-width: 900px) {
  .story-spotlight-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
  }
  .story-spotlight-photo {
    max-width: 480px;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 768px) {
  .helpline-spotlight {
    padding: var(--space-2xl) 0;
  }

  .help-topics, .callback-section, .story-spotlight {
    padding: var(--space-2xl) 0;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .callback-form {
    padding: var(--space-xl);
  }

  .form-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .story-spotlight-content {
    padding: var(--space-xl);
  }

  .story-spotlight-content blockquote p {
    font-size: 1.2rem;
  }
}

/* ============================================
   Learn Medicare Page Styles
   ============================================ */

/* --- Editorial hero — masthead + pinned spotlight + optional photo.
   Mirrors the policy-hero composition (asymmetric 2-col on desktop with
   a column-rule hairline) and the get-help-hero photo modifier
   (`.lm-hero--has-image` shifts to a 2-col grid). The spotlight is
   editor-pinned only — MI / MI Pro / MM live on external domains, so
   there's no auto-feed to pull from. When no spotlight is pinned, the
   masthead carries the section alone. */

.lm-hero {
  background: var(--blue-900);
  color: var(--white);
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 4rem);
  position: relative;
  overflow: hidden;
}

.lm-hero-watermark {
  position: absolute;
  top: 50%;
  right: clamp(-1rem, -2vw, -3rem);
  transform: translateY(-50%);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(5rem, 13vw, 13rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  text-align: right;
}

@media (max-width: 720px) {
  .lm-hero-watermark {
    display: none;
  }
}

.lm-hero-inner {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  position: relative;
  z-index: 1;
}

.lm-hero-masthead {
  display: flex;
  flex-direction: column;
}

.lm-hero-masthead > *:first-child {
  margin-top: 0;
}

.lm-hero-eyebrow {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
}

.lm-hero-heading {
  font-family: var(--font-accent);
  font-size: clamp(2rem, 2.4vw + 1.4rem, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
  max-width: 22ch;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 100ms;
}

.lm-hero-subtitle {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: var(--space-md) 0 0;
  max-width: 58ch;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 200ms;
}

.lm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0 0;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 300ms;
}

.lm-hero-cta-primary {
  font-size: 1.0625rem;
  padding: 16px 30px;
  font-weight: 700;
  letter-spacing: 0.005em;
}

.lm-hero-cta-secondary {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease-out, ease-out), border-bottom-color 0.2s var(--ease-out, ease-out);
}

.lm-hero-cta-secondary:hover,
.lm-hero-cta-secondary:focus-visible {
  color: var(--white);
  border-bottom-color: var(--white);
}

.lm-product-logo-sm {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  margin-right: 0.4em;
}

.lm-hero-figure {
  /* v4.6.39: sharp corners, no shadow. Matches the v4.6.37 editorial
     photography decision on .post-hero-image. The previous border-
     radius + heavy navy-tinted drop shadow was the last bit of
     decorative photo chrome on this page. */
  overflow: hidden;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 480px;
  align-self: center;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 200ms;
}

.lm-hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .lm-hero-heading {
    font-size: clamp(1.75rem, 5vw + 1rem, 2.25rem);
  }
  .lm-hero-subtitle {
    font-size: 1rem;
  }
}

@media (min-width: 960px) {
  .lm-hero-inner {
    max-width: var(--container-max);
  }

  .lm-hero:not(.lm-hero--has-image) .lm-hero-masthead {
    max-width: 60ch;
  }

  .lm-hero--has-image .lm-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: center;
  }

  .lm-hero-figure {
    justify-self: end;
    max-width: 480px;
  }
}

/* --- Comparison Surface (MI / MI Pro / MM spec sheet) --- */
.lm-compare {
  padding: var(--space-4xl) 0;
  background: var(--gray-50);
}

.lm-compare-header {
  max-width: 60ch;
  margin: 0 0 var(--space-2xl);
}

.lm-compare-heading {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw + 1rem, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--blue-900);
  margin: 0.25em 0 0;
  max-width: 18ch;
  text-wrap: balance;
}

.lm-compare-subtitle {
  margin: var(--space-md) 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fg2, var(--gray-700));
  max-width: 60ch;
}

/* v4.6.49: optional "Recommended starting point" cue. Quiet
   editorial recommendation rendered between the section header
   and the 3-up product grid. Italic + navy color carries the
   "this is a recommendation, not body copy" register without
   chrome. No side-stripe border (banned per .impeccable.md as
   AI-template side-stripe pattern). */
.lm-compare-starter-cue {
  margin: var(--space-md) 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--blue-900);
  max-width: 60ch;
  font-style: italic;
}

/* v4.6.132: retired .lm-exit-ramp rules. The .lm-exit-ramp helpline CTA
   on the Learn Medicare comparison section was retired (duplicated the
   hero's secondary CTA). .lm-quiet-link styling preserved below — still
   used by the Learn Medicare product section actions rows. */
.lm-quiet-link {
  font-size: 0.95rem;
  color: var(--blue-900, var(--fg1));
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.lm-quiet-link:hover,
.lm-quiet-link:focus-visible {
  text-decoration-thickness: 2px;
}

.lm-compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.16));
}

.lm-compare-product {
  padding: var(--space-xl) 0 var(--space-lg);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.16));
  display: flex;
  flex-direction: column;
}

.lm-compare-product-num {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(2.75rem, 6vw + 1rem, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--blue-900);
  margin: 0 0 var(--space-md);
  display: block;
}

/* v4.6.41: restored. v4.6.40 retired this in error — the "redundant
   divider that changes color on hover" the user wanted gone was the
   persistent border-bottom underline on the CTA, not this decorative
   hairline under the number. The kelly-green mark between the
   numeral and the product name is the editorial accent the page
   uses to mark each product card; preserved. */
.lm-compare-product-num::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--green-accent, #47ab47);
  margin-top: var(--space-sm);
}

.lm-compare-product-name {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(1.625rem, 1.4vw + 1rem, 2.125rem);
  line-height: 1.1;
  color: var(--blue-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.lm-compare-product-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}

.lm-compare-product-tagline {
  margin: var(--space-xs) 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg2, var(--gray-700));
}

/* v4.6.40: retired .lm-compare-specs / .lm-compare-spec (and the
   mobile override below at the 720px breakpoint) + .lm-compare-spec-sep.
   The comparison surface dropped its dl spec block in favor of a
   minimal 4-element card (number → name + icon → tagline → CTA).
   Audience / cost / time / output info now lives on the dedicated
   MI / MI Pro / MM detail sections below this one — the comparison
   surface stops trying to be a spec sheet and becomes "here are the
   three products available." */

/* v4.6.41: dropped the persistent border-bottom underline. The
   .arrow-link shared class (also on this element) supplies a
   text-decoration: underline on hover/focus-visible plus an arrow
   that slides 4px right — those carry the interaction signal.
   Default state is now clean text + arrow with no underline; hover
   adds the underline + kelly-green color + arrow movement. */
.lm-compare-product-cta {
  margin: var(--space-lg) 0 0;
  align-self: flex-start;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 1rem;
  color: var(--blue-900);
  text-decoration: none;
}

.lm-compare-product-cta:hover,
.lm-compare-product-cta:focus-visible {
  color: var(--green-accent, #47ab47);
}

@media (min-width: 720px) {
  .lm-compare-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: none;
  }

  .lm-compare-product {
    padding: var(--space-xl) var(--space-xl);
    border-bottom: none;
    border-left: 1px solid var(--hairline, rgba(3, 56, 110, 0.16));
  }

  .lm-compare-product:first-child {
    padding-left: 0;
    border-left: none;
  }

  .lm-compare-product:last-child {
    padding-right: 0;
  }
  /* v4.6.40: mobile-specific .lm-compare-specs / .lm-compare-spec
     overrides retired alongside the spec block in the markup. */
}

/* --- Product Sections (MI, MI Pro, Medicare Minute) --- */
.lm-product-section {
  padding: var(--space-4xl) 0;
}

/* v4.6.39: vertical rhythm differentiation across the three product
   sections. MI is the flagship (free, navy-bg, biggest audience) —
   gets generous breathing room. MM is the most contained (slide deck
   toolkit) — gets the tightest. Reader scrolls with cadence instead
   of three monotone slabs. */
/* v4.6.42: MI section flipped from navy to cream. The Medicare
   Interactive logo (navy + lime over white circle) was getting lost
   on the navy --blue-900 background — the user flagged it as a real
   contrast problem. Cream gives the logo room to breathe and lets all
   inner elements (h2, stats, fallback aside, quiet links) fall back
   to their light-context defaults — matching MI Pro's register.
   Flagship "generous breathing" padding preserved. */
.lm-mi-section {
  background: var(--cream);
  position: relative;
  padding: clamp(5rem, 7vw, 7.5rem) 0;
}
.lm-pro-section {
  background: var(--gray-50);
  /* keeps base var(--space-4xl) padding */
}
.lm-mm-section {
  background: var(--white);
  /* v4.6.40: restored to inherit base var(--space-4xl) padding. The
     v4.6.39 reduction to var(--space-3xl) made the section edges
     tighter than its internal sample-block gap, so the section felt
     uneven. Now matches MI Pro's vertical rhythm; rhythm-
     differentiation across the three product sections comes from
     background color alternation (MI cream → MI Pro gray-50 → MM
     white) and the MI flagship-padding clamp, not from differing
     base padding. */
}

/* v4.6.42: retired 11 .lm-mi-section dark-overlay override rules
   (.section-label, .lm-product-content h2, .lm-product-content > p,
   .lm-stats-row borders, .lm-stat-number, .lm-stat-label,
   .lm-quiet-link, .mi-part-index bg + border, .mi-part-index-eyebrow
   + .mi-part-letter, .mi-part-title, .mi-part-desc, .mi-part-index-list
   li+li border). All inner elements now inherit their default light-
   context styling — matches MI Pro section's rendering exactly. */

.lm-product-section .section-label {
  display: block;
  margin-bottom: var(--space-sm);
}

.lm-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

/* v4.6.43: MM is the only product section that puts the h2 in a
   separate .lm-product-section-header ABOVE the grid (MI and MI Pro
   have the h2 inside .lm-product-content, in the left column). So
   the MM left column is shorter than the right (image or fallback
   index), and the base .lm-product-grid's align-items: center
   centered the short content column vertically — producing a large
   gap between the section header above and the body paragraph below.
   align-items: start on .lm-mm-context tops the columns so the body
   paragraph starts immediately under the section header. */
.lm-mm-context {
  align-items: start;
}

.lm-product-grid-reversed .lm-product-content {
  order: 2;
}

.lm-product-grid-reversed .lm-product-visual {
  order: 1;
}

.lm-product-content h2,
.lm-product-section-header h2 {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(2.25rem, 3vw + 1rem, 3.5rem);
  color: var(--gray-900);
  margin-bottom: var(--space-lg);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.lm-product-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.lm-product-content > p {
  /* v4.6.83: bumped from 1.05rem (16.8px) to a clamp with 18px floor.
     .impeccable.md Principle 1: legibility is a design value, not a
     compliance tax — 18px body minimum on a help-seeker page (Learn
     Medicare is the quieter register where older eyes are the
     baseline reader). The prior 1.05rem desktop / 0.95rem mobile
     values were both below floor. Clamp enforces ≥18px across every
     viewport, with gentle scaling on larger screens. */
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.2rem);
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

/* Stats row — receipts, not metrics */
.lm-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  margin: 0 0 var(--space-xl);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.lm-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs, 4px);
  margin: 0;
  min-width: 0;
}

.lm-stat-number {
  font-family: var(--font-accent);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--blue-900);
  line-height: 1;
  letter-spacing: -0.01em;
}

.lm-stat-label {
  margin: 0;
  font-size: 0.875rem;
  color: var(--fg-meta);
  line-height: 1.4;
  max-width: 24ch;
}

.lm-mipro-features {
  margin: 0 0 var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.lm-mipro-feature {
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.lm-mipro-feature dt {
  /* v4.6.83: bumped from 1.0625rem (17px) to 1.125rem (18px) to meet
     the body legibility floor. Also widens the hierarchy ratio with
     the dd description below: was 1.0625 / 0.95 = 1.118 (below the
     ≥1.25 contrast target of Principle 2); now 1.125 / 0.95 = 1.184
     — closer, paired with the weight bump 600 → 700 to amplify
     hierarchy without further size growth. */
  font-family: var(--font-accent);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: var(--space-2xs, 4px);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.lm-mipro-feature dd {
  font-size: 1rem;
  color: var(--fg2);
  line-height: 1.6;
  margin: 0;
  max-width: 60ch;
}

.lm-mipro-actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.lm-mm-actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.lm-product-grid--solo {
  grid-template-columns: minmax(0, 760px);
  justify-content: start;
}

.lm-product-section-header {
  margin: 0 0 var(--space-2xl);
  max-width: 60ch;
}

.lm-product-section-header h2 {
  margin: 0;
}

.lm-product-section-header .section-label {
  display: block;
  margin-bottom: var(--space-sm);
}

/* v4.6.131: MI Pro full-width intro band modifier. MM's
   .lm-product-section-header default has max-width: 60ch (suits MM's
   label+H2-only header), but MI Pro's intro band carries label + H2 +
   lead. The lead wants a wider host while the H2 wants editorial wrap
   balance, so .lm-pro-section-header spans full container width and the
   internal elements constrain themselves via their own max-widths for
   line length. Also restores the H2-to-lead margin that the base
   .lm-product-section-header h2 rule zeroes (MM has no lead, so its
   margin: 0 on h2 is correct in context). */
.lm-pro-section-header {
  max-width: none;
  margin: 0 0 var(--space-xl);
}

.lm-pro-section-header h2 {
  margin: 0 0 var(--space-lg);
  max-width: 22ch;
}

.lm-pro-section-header .lm-pro-lead {
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.2rem);
  color: var(--gray-600);
  line-height: 1.7;
  margin: 0;
  max-width: 60ch;
}

/* v4.6.131: MI Pro stats row override. The base .lm-stats-row is
   display: flex + flex-wrap, which at full container width (~1200px)
   leaves three content-sized stats clustered on the left with empty
   space on the right. Grid with repeat(3, 1fr) spreads them evenly
   across the band so the hairline-framed receipts read as a confident
   editorial moment between intro and 2-col body, not a flex tail. */
.lm-pro-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

/* v4.6.131: MI Pro 2-col body top-alignment. Mirrors MM's .lm-mm-context
   align-items: start fix. With the H2 + lead + stats elevated to a band
   above the grid, the .lm-product-content (now just features + actions)
   is shorter than the visual column (cream box or product image). Base
   .lm-product-grid's align-items: center centers the short content
   vertically, producing a large gap above the features dl. align-items:
   start tops both columns so features dl begins immediately under the
   stats row, in editorial register. */
.lm-pro-section .lm-product-grid {
  align-items: start;
}

/* v4.6.39: retired .lm-mm-sample-lead + .lm-product-sample + .lm-mm-context
   rules. MM section was reordered from "sample-lead → context" to
   "context → sample-after" for consistency with MI + MI Pro (which
   put their preview blocks AFTER the 2-col context). The standard
   .lm-product-extra hairline-top + padding-top rules now apply to the
   sample block, matching how MI Pro's "Course preview" block renders. */

/* --- Product Extra (course preview / sample presentation) ---
   v4.6.40: margin-top tightened from var(--space-3xl) to
   var(--space-2xl). The block still has its own padding-top + hairline
   border so the separator stays clear, just no longer feels heavy.
   Affects MI Pro's "Course preview" block + MM's "Sample presentation"
   block uniformly. */
.lm-product-extra {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  max-width: 960px;
}

.lm-product-extra-header {
  margin-bottom: var(--space-xl);
}

.lm-product-extra-header .section-label {
  display: block;
  margin-bottom: var(--space-sm);
}

.lm-product-extra-title {
  font-family: var(--font-accent);
  font-size: clamp(1.375rem, 1.5vw + 0.85rem, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--blue-900);
  margin: 0 0 var(--space-sm);
  max-width: 28ch;
}

.lm-product-extra-caption {
  font-size: 1rem;
  color: var(--fg2);
  line-height: 1.6;
  margin: 0;
  max-width: 60ch;
}

.lm-product-extra-media {
  margin: 0 0 var(--space-lg);
}

.lm-product-extra-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--gray-100);
  overflow: hidden;
}

.lm-product-extra-video iframe,
.lm-product-extra-video embed,
.lm-product-extra-video object,
.lm-product-extra-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.lm-product-extra-img {
  display: block;
  width: 100%;
  height: auto;
}

.lm-product-extra-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs, 4px);
  font-family: var(--font-accent);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blue-900);
  text-decoration: none;
  border-bottom: 1px solid var(--blue-900);
  padding-bottom: 2px;
}

.lm-product-extra-cta:hover,
.lm-product-extra-cta:focus-visible {
  color: var(--green-700, var(--blue-900));
  border-bottom-color: var(--green-700, var(--blue-900));
}

/* --- Sample presentation (Medicare Minute) --- */
.lm-product-sample-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin: 0 0 var(--space-xl);
}

.lm-product-sample-thumb {
  margin: 0;
  background: var(--gray-100);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.lm-product-sample-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lm-product-sample-materials {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.lm-product-sample-material {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.lm-product-sample-material a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  text-decoration: none;
  color: var(--blue-900);
}

.lm-product-sample-material a:hover .lm-product-sample-material-label,
.lm-product-sample-material a:focus-visible .lm-product-sample-material-label {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lm-product-sample-material-label {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 1rem;
  color: var(--blue-900);
}

.lm-product-sample-material-meta {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-meta);
  flex-shrink: 0;
}

/* --- Partners Section --- */
.lm-partners {
  padding: var(--space-3xl) 0;
  background: var(--gray-50);
}

.lm-partners-header {
  max-width: 960px;
  margin: 0 auto var(--space-2xl);
}

.lm-partners-header .section-label {
  display: block;
  margin-bottom: var(--space-sm);
}

.lm-partners-header .section-title {
  margin: 0;
  max-width: 36ch;
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 2vw + 0.85rem, 2.25rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--blue-900);
}

.lm-partners-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 960px;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.lm-partners-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

@media (min-width: 720px) {
  .lm-partners-item {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: var(--space-md) clamp(var(--space-md), 3vw, var(--space-2xl));
    align-items: baseline;
  }
}

.lm-partners-product {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem);
  line-height: 1.2;
  color: var(--blue-900);
}

.lm-partners-orgs {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fg2, var(--gray-700));
}

/* --- Helpline CTA Banner --- */
/* Helpline Banner — a gentle reminder, not a billboard */
.helpline-banner {
  padding: var(--space-2xl) 0;
  background: var(--blue-900);
}

.helpline-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3xl);
}

.helpline-banner-content h2 {
  font-family: var(--font-primary);
  font-size: 1.75rem;
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.helpline-banner-content p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
  margin: 0;
}

.helpline-banner-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.helpline-banner-number {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-accent);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
}

.helpline-banner-number:hover {
  color: rgba(255, 255, 255, 0.9);
}

.helpline-banner-hours {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-xs);
}

/* --- Learn Medicare Page Responsive --- */
@media (max-width: 960px) {
  .lm-product-section {
    padding: var(--space-3xl) 0;
  }

  .lm-product-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .lm-product-grid--solo {
    grid-template-columns: 1fr;
  }

  .lm-product-grid-reversed .lm-product-content {
    order: 1;
  }

  .lm-product-grid-reversed .lm-product-visual {
    order: 2;
  }

  .lm-product-extra {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
  }

  .helpline-banner-inner {
    flex-direction: column;
    text-align: center;
  }

  .helpline-banner-content p {
    max-width: none;
  }
}

@media (max-width: 768px) {

  .lm-compare {
    padding: var(--space-xl) 0;
  }

  .lm-product-logo {
    width: 32px;
    height: 32px;
  }

  /* --- Product sections: reduce spacing --- */
  .lm-product-section {
    padding: var(--space-xl) 0;
  }

  .lm-product-content h2,
  .lm-product-section-header h2 {
    font-size: 1.5rem;
    margin-bottom: var(--space-md);
  }

  .lm-product-section-header {
    margin-bottom: var(--space-xl);
  }

  /* v4.6.43: retired the dead .lm-product-sample + .lm-mm-context
     mobile rule. v4.6.39 reordered MM to context-first / sample-second,
     so the adjacent-sibling selector no longer matches anything. */

  .lm-product-content > p {
    /* v4.6.83: font-size 0.95rem (15.2px) override retired — violated
       the 18px body floor on mobile. The base rule's clamp handles
       viewport scaling natively and stays ≥18px. Margin override
       preserved (tighter rhythm on small screens is appropriate). */
    margin-bottom: var(--space-md);
  }

  /* --- 4. Stats: horizontal 3-column with dividers --- */
  .lm-stats-row {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
    padding: var(--space-md) 0;
    margin-bottom: var(--space-lg);
  }

  /* v4.6.131: MI Pro stats row mobile override. The base
     .lm-pro-stats-row applies a 2xl gap for the full-container-width
     desktop band; on mobile that gap is too generous (mobile uses the
     compact ::before hairline separator pattern instead). Tighten the
     grid gap to 0 and match MI's mobile rhythm. .lm-stat retains its
     mobile flex: 1 column-stretching from the base mobile rule, which
     applies to grid children too. */
  .lm-pro-stats-row {
    gap: 0;
    padding: var(--space-md) 0;
    margin-bottom: var(--space-lg);
  }

  .lm-stat {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    gap: var(--space-xs);
    position: relative;
  }

  .lm-stat + .lm-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: var(--hairline, rgba(3, 56, 110, 0.12));
  }
  /* v4.6.42: retired .lm-mi-section .lm-stat+.lm-stat::before override
     (was a white-tinted stat divider for the dark-bg context). Now
     the base navy-tinted --hairline rule applies on the new cream bg. */

  .lm-stat-number {
    font-size: 1.25rem;
  }

  .lm-stat-label {
    font-size: 0.75rem;
  }

  /* --- 5. CTA buttons: full-width on mobile --- */
  .lm-product-content .btn {
    display: block;
    width: 100%;
    text-align: center;
  }

  .lm-mm-actions,
  .lm-mipro-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  /* --- 6. Partner section: tighter padding --- */
  .lm-partners {
    padding: var(--space-xl) 0;
  }

  .lm-partners .section-label {
    font-size: 0.75rem;
  }

  /* --- Product photos: smaller on mobile --- */
  .lm-product-visual {
    max-width: 320px;
    margin: 0 auto;
  }

  /* --- Product extra: tighten spacing --- */
  .lm-product-extra {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
  }

  .lm-product-sample-thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
  }

  .lm-product-sample-material a {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs, 4px);
  }

  /* --- Helpline banner: compact --- */
  .helpline-banner {
    padding: var(--space-xl) 0;
  }

  .helpline-banner-content h2 {
    font-size: 1.3rem;
  }

  .helpline-banner-content p {
    font-size: 0.9rem;
  }

  .helpline-banner-number {
    font-size: 1.3rem;
  }

}

@media (max-width: 540px) {
  .lm-product-sample-thumbs {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   The Latest Page Styles
   ============================================ */

/* --- Sub-navigation Tabs --- */
.latest-subnav {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--space-lg) 0;
}

.latest-subnav .content-filters {
  justify-content: flex-start;
}

/* --- Latest Layout (content + sidebar) --- */
.latest-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-3xl);
  align-items: start;
}

.latest-panel {
  padding: var(--space-xl) 0 var(--space-3xl);
}

/* --- Article List --- */
.latest-articles {
  display: flex;
  flex-direction: column;
}

.media-source {
  font-weight: 600;
  color: var(--fg2);
}

/* --- Content Title (Media Center) --- */
.latest-content-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

.latest-content-desc {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

/* --- Sidebar --- */
.latest-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Legacy sidebar section (used by widget areas) */
.sidebar-section {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.sidebar-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--blue-600);
}

/* Most Read numbered list */
.sidebar-most-read {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: most-read;
}

.sidebar-most-read li {
  counter-increment: most-read;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--gray-100);
}

.sidebar-most-read li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.sidebar-most-read li::before {
  content: counter(most-read);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.sidebar-most-read a {
  font-size: 0.9rem;
  color: var(--gray-800);
  text-decoration: none;
  line-height: 1.4;
}

.sidebar-most-read a:hover {
  color: var(--blue-700);
}

/* Sidebar links (used in resource/press release sidebars) */
.sidebar-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-links li {
  margin-bottom: var(--space-xs);
}

.sidebar-links a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9rem;
  color: var(--fg2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition:
    background-color 0.2s var(--ease-out, ease-out),
    color            0.2s var(--ease-out, ease-out);
}

.sidebar-links a:hover {
  background: var(--gray-50);
  color: var(--blue-700);
}

.sidebar-btn-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

/* --- Press Inquiries --- */
.press-inquiries {
  margin-bottom: var(--space-2xl);
}

.press-inquiries-inner {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-3xl);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.press-inquiries-inner h3 {
  font-family: var(--font-primary);
  font-size: 1.4rem;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

.press-inquiries-inner p {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

/* --- Resources Panel --- */
.resources-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-2xl);
}

.resources-intro h2 {
  font-family: var(--font-primary);
  font-size: 2rem;
  color: var(--gray-900);
  margin-bottom: var(--space-md);
}

.resources-intro p {
  font-size: 1.05rem;
  color: var(--gray-600);
  line-height: 1.7;
}

.resources-featured {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.resources-cta {
  text-align: center;
  margin-top: var(--space-2xl);
}

/* --- The Latest Page Responsive --- */
@media (max-width: 1024px) {
  .latest-layout {
    grid-template-columns: 1fr;
  }

  .latest-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

@media (max-width: 768px) {

  /* --- 1. Article list: tighter spacing, truncated excerpts --- */
  .latest-panel {
    padding: var(--space-lg) 0;
  }

  .latest-article {
    padding: var(--space-md) 0;
  }

  .latest-article h3 {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
  }

  .latest-article > p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.88rem;
    margin-bottom: var(--space-xs);
  }

  .latest-article-meta {
    font-size: 0.8rem;
    gap: var(--space-sm);
  }

  .latest-article .news-tag {
    margin-bottom: var(--space-xs);
  }

  /* --- 2. Filter bar: scrollable, tighter --- */
  .latest-subnav .content-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-sm);
  }

  .latest-subnav .content-filters::-webkit-scrollbar {
    display: none;
  }

  .latest-subnav .filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* --- 3. Sidebar: compact widgets --- */
  .latest-sidebar {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .latest-sidebar .sidebar-card {
    padding: var(--space-lg);
  }

  .latest-sidebar .sidebar-card-title {
    font-size: 0.9rem;
    margin-bottom: var(--space-md);
  }

  /* Most Read: compact list */
  .latest-sidebar .sidebar-most-read li {
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
  }

  .latest-sidebar .sidebar-most-read li::before {
    min-width: 20px;
    height: 20px;
    font-size: 0.75rem;
  }

  .latest-sidebar .sidebar-most-read a {
    font-size: 0.85rem;
  }

  /* --- 4. Load More: full-width --- */
  .latest-load-more {
    padding: var(--space-lg) 0 var(--space-md);
  }

  .latest-load-more .btn {
    width: 100%;
  }

  .press-inquiries-inner {
    padding: var(--space-xl);
  }

  .resources-intro h2 {
    font-size: 1.5rem;
  }
}

/* ============================================
   Featured Article (The Latest page)
   ============================================ */

.featured-article {
  padding: var(--space-2xl) 0;
  background: var(--white);
}

.featured-article-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
  overflow: hidden;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.featured-article-image {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-xl);
  overflow: hidden;
  background: var(--blue-900);
}

/* v4.6.57: When the featured article has no thumbnail, fall back to a
   solid navy ground. The prior `linear-gradient(160deg, --blue-900 →
   --blue-700)` was the last surviving navy gradient on the page after
   v4.6.21's brand-spine sweep removed teal gradients across the family.
   .impeccable.md lists "purple-to-blue gradients" as an anti-reference;
   navy-to-navy reads as the same template-y idiom rotated. Badge and
   editorial content carry the visual weight; the solid ground holds the
   composition without decoration. */
.featured-article-image--no-photo {
  background: var(--blue-900);
}

.featured-article-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-article-badge {
  /* v4.6.85: dropped border-radius. Brand-spine utility labels use sharp
     edges (no pill chrome). The badge reads as a typographic label, not
     a rounded sticker — matches .section-label / .news-tag discipline. */
  position: relative;
  z-index: 1;
  background: var(--white);
  color: var(--blue-700);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-xs) var(--space-md);
}

.featured-article-content {
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured-article-content .news-tag {
  margin-bottom: var(--space-md);
}

/* v4.6.58: Inherit Franklin Gothic + 1.25 line-height from the base
   h1–h6 rule. Earlier overrides set Avenir + 1.35 line-height — values
   tuned to Avenir's reading characteristics that v4.6.29's body-heading
   migration to Franklin Gothic missed on this surface. */
.featured-article-content h2 {
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
}

.featured-article-content h2 a {
  color: var(--gray-900);
  text-decoration: none;
}

.featured-article-content h2 a:hover {
  color: var(--blue-700);
}

.featured-article-content > p {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

/* v4.6.48: active-filter indicator on /the-latest/ when ?topic= is set.
   Sits above the category-filter bar so the reader sees immediately
   why the article set is reduced. Includes a × link to clear the
   filter (goes to unfiltered archive). Hairline-bracketed below to
   pair with the filter bar's own boundary. */
.latest-active-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  font-size: 0.9rem;
}

.latest-active-filter-label {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-meta);
}

.latest-active-filter-value {
  font-weight: 600;
  color: var(--blue-900);
}

.latest-active-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  border-radius: 50%;
  color: var(--fg-meta);
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1;
  transition:
    color 0.2s var(--ease-out, ease-out),
    background 0.2s var(--ease-out, ease-out);
}

.latest-active-filter-clear:hover,
.latest-active-filter-clear:focus-visible {
  color: var(--blue-900);
  background: var(--hairline, rgba(3, 56, 110, 0.08));
}

/* v4.6.144: category-filter dropdown that replaced the broken
   .content-filters button row on /the-latest/. Native <select>
   inside a <form> so JS-off users still get a functional filter
   via the <noscript> submit button. On change, the form auto-
   submits via inline onchange handler (no extra JS module). */
.latest-cat-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
}

.latest-cat-filter-label {
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-meta);
  margin: 0;
}

.latest-cat-filter-select {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--blue-900);
  background: var(--white);
  border: 1px solid var(--hairline, rgba(3, 56, 110, 0.2));
  border-radius: var(--radius-sm, 4px);
  padding: 0.5em 2em 0.5em 0.75em;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  /* Inline-SVG chevron so the dropdown affordance is visible despite
     appearance:none stripping the native caret. Navy chevron. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2303386e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5 1.5 6 6 10.5 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 0.7em auto;
  transition: border-color 0.15s var(--ease-out, ease-out);
  min-width: 200px;
}

.latest-cat-filter-select:hover,
.latest-cat-filter-select:focus-visible {
  border-color: var(--blue-900);
  outline: none;
}

.latest-cat-filter-submit {
  /* Only shown via <noscript> for non-JS users. */
  margin-left: var(--space-sm);
}

/* --- Latest Filters Bar --- */
.latest-filters-bar {
  padding: var(--space-md) 0;
  background: var(--white);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  position: sticky;
  top: var(--header-height, 72px);
  z-index: 10;
  margin-bottom: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  justify-content: space-between;
}

.latest-filters-bar-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

/* v4.6.62: .content-filters carries margin-bottom: var(--space-2xl)
   (main.css:2213) intended for standalone use — e.g. .latest-subnav
   where the filter row sits as a separate band above the content. When
   nested inside .latest-filters-bar-tabs (alongside .latest-search as
   flex siblings of .latest-filters-bar), that ~48px margin inflates
   this container's effective height: pills (44px) + margin (~48px) ≈
   92px, while .latest-search stays 44px. With align-items: center on
   the parent, the pills sit at the TOP of the 92px tabs container
   while the search centers in the 92px row — visibly offset down by
   ~24px from the pills. Zero the margin in this nested context only;
   the standalone .latest-subnav usage stays unchanged. */
.latest-filters-bar-tabs .content-filters {
  margin-bottom: 0;
}

.filters-clear {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue-900);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.filters-clear:hover,
.filters-clear:focus-visible {
  text-decoration-thickness: 2px;
}

.latest-search {
  display: flex;
  align-items: center;
  position: relative;
  flex: 0 1 280px;
  min-width: 200px;
}

.latest-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-meta, var(--gray-600));
  pointer-events: none;
}

/* v4.6.61: Neutralize browser default styling on <input type="search">.
   Both .filter-btn and this input declare the same min-height: 44px and
   the same 10px vertical padding, AND .latest-filters-bar uses
   align-items: center — so on paper the filter pills and the search
   field should vertically align on the same row. In practice WebKit
   browsers apply implicit padding/appearance to type="search" inputs
   that overrides our min-height and inflates the rendered height by
   ~6–10px. With align-items: center, the pills then sit slightly
   higher in the row, and the visual centers don't match.

   `appearance: none` + the prefixed sibling for older WebKit strip the
   UA-applied chrome; explicit `box-sizing: border-box` forces the
   declared padding+border to be included in the 44px declared height
   so the input collapses to exactly the same box-model as the pills. */
.latest-search input[type="search"] {
  width: 100%;
  padding: 10px 12px 10px 36px;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  color: var(--blue-900);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  transition: border-color 0.2s var(--ease-out, ease-out);
}

.latest-search input[type="search"]:focus {
  outline: none;
  border-color: var(--blue-700);
}

.latest-search input[type="search"]::placeholder {
  color: var(--fg-meta, var(--gray-500));
}

.latest-search-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Sidebar enhancements --- */
.sidebar-desc {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.latest-load-more {
  text-align: center;
  padding: var(--space-2xl) 0 var(--space-xl);
}

/* --- Load More shared feedback ---
   Spinner shown during fetch; new items fade+slide in on insertion.
   Used by `.latest-load-more`. */
@keyframes loadMoreSpin {
  to { transform: rotate(360deg); }
}

.mrc-load-more-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: loadMoreSpin 0.7s linear infinite;
  vertical-align: -0.2em;
}

@keyframes loadMoreEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.is-load-more-enter {
  animation: loadMoreEnter 0.4s var(--ease-out, ease-out) both;
}

.latest-load-more .btn.is-end {
  background: transparent;
  border-color: transparent;
  color: var(--fg2, var(--gray-700));
  font-weight: 500;
  font-style: italic;
  cursor: default;
  opacity: 0.85;
}

/* ============================================
   Media Center Page Styles
   ============================================ */

/* --- Single Press Item --- */
.press-source {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.press-external-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-2xl);
  color: var(--fg2);
  font-size: 0.95rem;
  line-height: 1.6;
}

.press-external-notice svg {
  flex-shrink: 0;
  color: var(--blue-600);
  margin-top: 2px;
}

.press-external-notice p {
  margin: 0;
}

.press-external-notice a {
  font-weight: 600;
  color: var(--blue-700);
}

.press-external-notice a:hover {
  color: var(--blue-800);
}

.sidebar-media-contact {
  /* v4.6.113: --blue-50/--blue-200 → brand-aligned --bg-tint-navy/--hairline. */
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
  border-color: var(--hairline, rgba(3, 56, 110, 0.12));
}

.media-contact-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.media-contact-info svg {
  /* v4.6.113: --blue-600 → --blue-900 (canonical navy). */
  color: var(--blue-900);
  flex-shrink: 0;
}

.media-contact-info a {
  font-weight: 600;
  /* v4.6.113: --blue-700 → --blue-900 (canonical navy). */
  color: var(--blue-900);
  font-size: 0.9rem;
}

.media-contact-info a:hover,
.media-contact-info a:focus-visible {
  /* v4.6.113: --blue-800 → --blue-900 + canonical underline-on-hover. */
  color: var(--blue-900);
  text-decoration: underline;
  outline: none;
}

@media (max-width: 768px) {
  .press-external-notice {
    padding: var(--space-md);
    font-size: 0.9rem;
  }
}

/* --- Press Contact Banner (v4.6.113 brand-spine rebuild) ---
   Earlier treatment: white-bg card with 2px --blue-100 border + radius-lg
   inside a gray-50 section, plus a 64×64 --blue-100/--blue-700 chip-icon
   and Avenir h2. Anti-patterns: 2px colored border (over 1px limit + off-
   brand sub-shade), card-on-section nesting, heavy branded chip, Avenir
   on a display heading.

   Now: cream-grounded hairline-bracketed band with quiet circle icon
   (mirrors the v4.6.94 callout-box --info pattern) and Franklin Gothic
   heading. No card chrome; the cream ground + hairline brackets carry
   the visual separation. */
.press-contact-banner {
  padding: var(--space-2xl) 0;
  background: var(--cream);
}

.press-contact-card {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.press-contact-icon {
  width: 48px;
  height: 48px;
  /* v4.6.113: navy-on-navy-tint icon circle (was --blue-100 bg + --blue-700
     icon). Matches the v4.6.94 callout-box --info icon treatment. */
  background: var(--blue-900);
  color: var(--white, #fff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.press-contact-content {
  flex: 1;
}

.press-contact-content h2 {
  /* v4.6.113: Franklin Gothic display heading (was Avenir), --blue-900
     (was --gray-900). */
  font-family: var(--font-accent);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: var(--space-xs);
}

.press-contact-content p {
  /* v4.6.113: 0.95rem → 1rem (meets 18px floor); --gray-600 → --fg2. */
  font-size: 1rem;
  color: var(--fg2);
  line-height: 1.5;
  margin: 0;
}

.press-contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.press-contact-email,
.press-contact-phone {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  /* v4.6.113: --blue-700 → --blue-900 (canonical navy). */
  color: var(--blue-900);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}

.press-contact-email:hover,
.press-contact-phone:hover,
.press-contact-email:focus-visible,
.press-contact-phone:focus-visible {
  /* v4.6.113: --blue-50 → --bg-tint-navy (canonical brand-spine tint). */
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
  outline: none;
}

/* --- Media Center Section Headers --- */
.mc-releases {
  padding: var(--space-3xl) 0;
}

.mc-section-header {
  margin-bottom: var(--space-xl);
}

.mc-section-title {
  /* v4.6.113: Franklin Gothic display heading (was Avenir),
     --blue-900 (was --gray-900). */
  font-family: var(--font-accent);
  font-weight: 700;
  /* Media Center subsection heading — tighter than .section-title,
     fluid. 1.25rem @ 400px → 1.75rem @ 1200px. */
  font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
  color: var(--blue-900);
  margin-bottom: var(--space-md);
}

.mc-filters {
  margin-top: var(--space-md);
}

/* --- Empty State (v4.6.113: card-chrome + DASHED border retired).
   Dashed borders are an AI-design-fingerprint anti-pattern per
   .impeccable.md principle 5 (same reason the v4.6.94 video-embed
   placeholder rebuild dropped its dashed border). Now a quiet
   hairline-bracketed band with italic editorial copy. */
.mc-empty-state {
  padding: var(--space-2xl) 0;
  text-align: center;
  color: var(--fg-meta);
  font-size: 1rem;
  font-style: italic;
  background: transparent;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-radius: 0;
}

/* --- Medicare Rights in the News --- */
.mc-in-the-news {
  padding: var(--space-3xl) 0;
  background: var(--gray-50);
  text-align: center;
}

.mc-coverage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

/* Coverage card (v4.6.113 brand-spine rebuild).
   Earlier treatment: white-bg + gray-200 border + radius-lg + xl padding
   with a triple-anti-pattern hover (border-color → --blue-500, shadow-md
   lift, translateY(-2px)). Forbidden by .impeccable.md principle 5.

   New treatment: chromeless grid cell with hairline-top separator (gives
   list-rhythm within the 3-col grid without per-card chrome). Hover
   underlines the title; no transform, no shadow, no border-color shift.
   Mirrors the v4.6.94 .mrc-press-mention pattern adapted to a grid. */
.mc-coverage-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-radius: 0;
  padding: var(--space-lg) 0;
  text-decoration: none;
  color: var(--fg1);
  transition: background-color 0.2s var(--ease-out, ease-out);
  display: flex;
  text-align: left;
  flex-direction: column;
}

.mc-coverage-card:hover,
.mc-coverage-card:focus-visible {
  background-color: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
  outline: none;
}

.mc-coverage-card:hover h3,
.mc-coverage-card:focus-visible h3 {
  text-decoration: underline;
}

.mc-coverage-source {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-md);
  /* v4.6.113: inner divider retired — the new card-level hairline-top
     gives enough rhythm; an additional internal hairline reads
     redundant. */
}

.mc-source-name {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.78rem;
  /* v4.6.113: --blue-700 → --fg-meta + canonical small-caps eyebrow
     treatment (matches the v4.6.94 .mrc-press-mention__outlet pattern). */
  color: var(--fg-meta);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.mc-coverage-source time {
  font-size: 0.85rem;
  /* v4.6.113: --gray-400 → --fg-meta (canonical). */
  color: var(--fg-meta);
}

.mc-coverage-card h3 {
  font-family: var(--font-accent);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  /* v4.6.113: --gray-900 → --blue-900 (canonical heading navy);
     Franklin Gothic display register; flex:1 dropped (no longer needed
     without bottom-anchored link). */
  color: var(--blue-900);
  margin: 0 0 var(--space-sm);
  transition: text-decoration 0.2s var(--ease-out, ease-out);
}

.mc-coverage-link {
  font-size: 0.85rem;
  font-weight: 600;
  /* v4.6.113: --blue-600 → --blue-900 (canonical navy). */
  color: var(--blue-900);
  margin-top: auto;
}

/* --- Spokespeople Section --- */
.mc-spokespeople {
  padding: var(--space-3xl) 0;
  background: var(--white);
  text-align: center;
}

.mc-people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

/* Spokesperson card (v4.6.113 brand-spine rebuild).
   Earlier treatment: gray-50 bg + gray-200 border + radius-lg + 2xl
   padding = card chrome (same anti-pattern retired across the v4.6.94
   custom blocks + v4.6.111 staff/board tiles).
   New treatment: chromeless centered profile tile with avatar + name
   + role + bio + topic tags. Parallel to the v4.6.111 .staff-card
   pattern but with the extra bio/topics content the spokesperson
   register needs. */
.mc-person-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--space-lg) 0;
  text-align: center;
}

.mc-person-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  overflow: hidden;
}

.mc-person-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.mc-person-card h3 {
  /* v4.6.113: Franklin Gothic + --blue-900 (was --gray-900 in Avenir). */
  font-family: var(--font-accent);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: var(--space-xs);
}

.mc-person-role {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  /* v4.6.113: --blue-600 → --blue-900 (canonical navy). */
  color: var(--blue-900);
  margin-bottom: var(--space-md);
}

.mc-person-card > p {
  /* v4.6.113: --gray-600 → --fg2; 0.9rem → 1rem (18px body floor). */
  font-size: 1rem;
  color: var(--fg2);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}

.mc-person-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

/* Topic tag (v4.6.113: chip card chrome retired — was white-bg + gray-
   200 border + radius-sm pseudo-chip). Now inline editorial meta with
   navy ink, no chrome — same conceptual treatment as .post-tag from
   single.php's tag rail. */
.mc-topic-tag {
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-meta);
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

.mc-person-topics .mc-topic-tag + .mc-topic-tag::before {
  content: '·';
  margin-right: var(--space-sm);
  opacity: 0.5;
}

/* ============================================
   Media Center & Featured Article Responsive
   ============================================ */

@media (max-width: 1024px) {
  .featured-article-card {
    grid-template-columns: 1fr;
  }

  .featured-article-image {
    min-height: 200px;
  }

  .press-contact-card {
    flex-direction: column;
    text-align: center;
    gap: var(--space-lg);
  }

  .press-contact-details {
    flex-direction: row;
    gap: var(--space-lg);
  }

  .mc-coverage-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mc-people-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  /* --- 5. Featured article: compact image + truncated excerpt --- */
  .featured-article {
    padding: var(--space-xl) 0;
  }

  .featured-article-image {
    min-height: 180px;
    aspect-ratio: 16 / 9;
  }

  .featured-article-content {
    padding: var(--space-lg);
  }

  .featured-article-content h2 {
    font-size: 1.15rem;
    margin-bottom: var(--space-sm);
  }

  .featured-article-content > p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.88rem;
    margin-bottom: var(--space-sm);
  }

  .featured-article-content .latest-article-meta {
    font-size: 0.8rem;
  }

  /* --- 6. Filter bar: un-sticky, stack on mobile --- */
  .latest-filters-bar {
    position: static;
    padding: var(--space-md) 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .latest-filters-bar-tabs {
    width: 100%;
  }

  .latest-search {
    flex: 1 1 auto;
    width: 100%;
  }

  .latest-filters-bar .content-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-sm);
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
  }

  .latest-filters-bar .content-filters::-webkit-scrollbar {
    display: none;
  }

  .latest-filters-bar .filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* --- Media Center: comprehensive mobile --- */

  /* 1. Press contact banner: compact stacked layout */
  .press-contact-banner {
    padding: var(--space-sm) 0;
  }

  .press-contact-card {
    flex-direction: column;
    text-align: left;
    padding: var(--space-md) var(--space-lg);
    gap: var(--space-sm);
  }

  .press-contact-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .press-contact-icon svg {
    width: 18px;
    height: 18px;
  }

  .press-contact-content h2 {
    font-size: 1.05rem;
    margin-bottom: 2px;
  }

  .press-contact-content p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: var(--space-xs);
  }

  .press-contact-details {
    flex-direction: row;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .press-contact-email,
  .press-contact-phone {
    font-size: 0.82rem;
    padding: 6px var(--space-md);
    background: var(--blue-50);
    border-radius: var(--radius-sm);
    gap: var(--space-xs);
  }

  .press-contact-email svg,
  .press-contact-phone svg {
    width: 14px;
    height: 14px;
  }

  /* 2. Releases section: tighter */
  .mc-releases {
    padding: var(--space-lg) 0;
  }

  .mc-section-title {
    text-align: left;
  }

  .mc-section-header {
    margin-bottom: var(--space-md);
  }

  /* 3. MC filters: scrollable, left-aligned */
  .content-filters.mc-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    gap: var(--space-sm);
  }

  .content-filters.mc-filters::-webkit-scrollbar {
    display: none;
  }

  .content-filters.mc-filters .filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 0.8rem;
  }

  /* 4. Press listings: tighter */
  .latest-article {
    padding: var(--space-md) 0;
  }

  .latest-article h3 {
    font-size: 1rem;
  }

  .latest-article > p {
    font-size: 0.88rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Empty state: compact */
  .mc-empty-state {
    padding: var(--space-xl) var(--space-lg);
    font-size: 0.88rem;
  }

  /* 5. Sidebar: compact on mobile, hide Quick Links */
  .mc-releases .sidebar-section:has(.sidebar-links) {
    display: none;
  }

  .mc-releases .latest-sidebar {
    gap: var(--space-sm);
  }

  .mc-releases .sidebar-section {
    padding: var(--space-md);
  }

  .mc-releases .sidebar-title {
    font-size: 0.85rem;
    margin-bottom: var(--space-sm);
  }

  .mc-releases .sidebar-desc {
    font-size: 0.82rem;
    line-height: 1.5;
  }

  .mc-releases .sidebar-section .btn {
    font-size: 0.85rem;
    padding: var(--space-sm) var(--space-lg);
  }

  /* 6. In the News: compact section + cards */
  .mc-in-the-news {
    padding: var(--space-xl) 0;
  }

  .mc-in-the-news .section-label {
    font-size: 0.75rem;
  }

  .mc-in-the-news .section-title {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
  }

  .mc-in-the-news .section-subtitle {
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 100%;
  }

  .mc-coverage-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
  }

  .mc-coverage-card {
    padding: var(--space-md) var(--space-lg);
  }

  .mc-coverage-source {
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
  }

  .mc-source-name {
    font-size: 0.78rem;
  }

  .mc-coverage-card h3 {
    font-size: 0.92rem;
    margin-top: 0;
    margin-bottom: var(--space-xs);
  }

  .mc-coverage-link {
    font-size: 0.8rem;
  }

  .mc-coverage-card:hover {
    transform: none;
  }

  /* 7. Spokespeople: compact horizontal cards */
  .mc-spokespeople {
    padding: var(--space-xl) 0;
  }

  .mc-spokespeople .section-label {
    font-size: 0.75rem;
  }

  .mc-spokespeople .section-title {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
  }

  .mc-spokespeople .section-subtitle {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .mc-people-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
  }

  .mc-person-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 2px var(--space-md);
    text-align: left;
    padding: var(--space-md) var(--space-lg);
  }

  .mc-person-avatar {
    width: 48px;
    height: 48px;
    margin: 0;
    grid-row: 1 / 3;
    align-self: center;
  }

  .mc-person-card h3 {
    font-size: 0.95rem;
    margin-bottom: 0;
    align-self: end;
  }

  .mc-person-role {
    font-size: 0.78rem;
    margin-bottom: 0;
    align-self: start;
  }

  .mc-person-card > p {
    grid-column: 1 / -1;
    font-size: 0.82rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--space-sm);
    margin-top: var(--space-sm);
  }

  .mc-person-topics {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .mc-topic-tag {
    font-size: 0.75rem;
  }
}

/* ============================================
   About Us Page Styles
   ============================================ */

/* --- About Hero --- */
/* About hero — inherits base styling from .page-hero (gradient, padding,
   Franklin Gothic display h1, watermark). The bespoke piece is the 2-column
   body that replaces the single-paragraph subtitle: the page has more
   institutional context to set up than other interior heroes. */

.about-hero-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
  text-align: left;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 100ms;
}

.about-hero-columns p {
  /* v4.6.89: two fixes in one rule.
     1. Color: rgba(255, 255, 255, 0.9) was written for the prior
        navy-ground About hero. v4.6.76 promoted About to the
        .page-hero--photo-first variant (white ground) and the
        body paragraphs went invisible. Changed to var(--fg2) —
        body-secondary color matching the .page-hero--photo-first
        .page-hero-subtitle override pattern.
     2. Font-size: 1.05rem (16.8px) was below the 18px legibility
        floor required by .impeccable.md Principle 1 for help-seeker-
        adjacent content. About sits in the broad-audience register;
        the floor still applies. Bumped to a clamp that holds 18px
        across every viewport (same pattern as v4.6.83 Learn Medicare). */
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.2rem);
  line-height: 1.7;
  color: var(--fg2);
  margin: 0;
}

/* --- Our Values --- */
/* Values — editorial 2-column hairline-divided grid. Big navy numerals
   replace the prior teal circle badges (anti-reference fix); pairs of
   values share a row so the institutional principles read as paired
   ideas, not a 4-up checklist grid. */
.about-values {
  padding: var(--space-3xl) 0;
  background: var(--gray-50);
}

.about-values .section-title {
  margin-bottom: var(--space-3xl);
  max-width: 30ch;
}

.about-values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  max-width: 960px;
}

.about-value-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.16));
}

/* v4.6.72: .about-value-number retired. Numbered values (1, 2, 3, 4)
   falsely implied a priority ranking on what is fundamentally an
   unordered set of equal-weight institutional values. The title now
   does the visual work the numeral used to — display-weight Franklin
   Gothic matching the editorial register already in play on the
   sibling .about-commitment h2. */
.about-value-card h3,
.about-value-title {
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--blue-900);
  margin: 0;
  text-wrap: balance;
}

.about-value-card p {
  /* v4.6.70: bumped 0.95rem → 1rem for legibility floor, matching the
     v4.6.70 about-team / about-explore body text. */
  font-size: 1rem;
  color: var(--fg2, var(--gray-700));
  line-height: 1.6;
  margin: 0;
  max-width: 52ch;
}

/* --- Meet the Team (v4.6.70 brand-spine) ---
   Was a centered 2-up of avatar circles + filled btn-primary inside
   each card. Now mirrors the .cross-link-cta-grid pattern from Careers
   v4.6.35 — same destinations (/staff/ and /board/), same hairline-
   divided composition, arrow-link CTAs in place of filled buttons.
   The about-team-grid + about-team-header rules give the section its
   wrapper styling; the items themselves use the shared .cross-link-
   cta-item / -title / -body / -link rules at main.css:12652+. */
.about-team {
  padding: var(--space-4xl) 0;
  background: var(--white);
}

.about-team-header {
  max-width: 72ch;
  margin: 0 0 var(--space-2xl);
}

.about-team .section-subtitle {
  max-width: 64ch;
  margin: var(--space-sm) 0 0;
}

/* Overrides .cross-link-cta-grid's auto-centered max-width if any; the
   grid layout itself comes from .cross-link-cta-grid. */
.about-team-grid {
  margin-top: 0;
}

/* --- Our Commitment --- */
/* Commitment — asymmetric 2-col on desktop: heading anchors the left at
   larger scale (5/12 of width), body paragraphs run on the right (7/12).
   Magazine pull-quote register. Collapses to single-column stack below
   720px. */
.about-commitment {
  padding: var(--space-3xl) 0;
  background: var(--gray-50);
}

.about-commitment-card {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-3xl);
  align-items: start;
}

.about-commitment-anchor h2 {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(2rem, 2.5vw + 1rem, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--blue-900);
  margin: 0;
  text-wrap: balance;
}

.about-commitment-body p {
  font-size: 1rem;
  color: var(--fg2);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.about-commitment-body p:last-child {
  margin-bottom: 0;
}

/* --- Explore — "Where to go next" hairline list (v4.6.70 brand-spine) ---
   Was a 5-up grid of icon-cards (gray-50 bg + 1px border + radius-lg +
   hover-lift box-shadow + generic Feather SVG icons). All retired here.
   Now a hairline-divided list mirroring .partners-featured-list /
   .partners-featured-list discipline. Each row is a clickable link block
   with title + brief description on the left and an arrow-link cue on
   the right. Hover/focus tint nudges the row inward like
   .policy-activity-item. */
.about-explore {
  padding: var(--space-4xl) 0;
  background: var(--white);
}

.about-explore-header {
  max-width: 72ch;
  margin: 0 0 var(--space-xl);
}

.about-explore-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.about-explore-item {
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.about-explore-item:last-child {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.about-explore-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s var(--ease-out, ease-out);
}

.about-explore-link:hover,
.about-explore-link:focus-visible {
  outline: none;
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.03));
  margin: 0 calc(var(--space-md) * -1);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.about-explore-body {
  min-width: 0;
}

.about-explore-title {
  font-family: var(--font-accent);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--blue-900);
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.005em;
}

.about-explore-link:hover .about-explore-title,
.about-explore-link:focus-visible .about-explore-title {
  color: var(--blue-950, var(--blue-900));
}

.about-explore-desc {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0;
  max-width: 64ch;
}

.about-explore-cue {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- About Us Responsive --- */
@media (max-width: 1024px) {
  .about-hero-columns {
    grid-template-columns: 1fr;
  }

  .about-values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
  /* v4.6.70: .about-explore-grid rule retired — explore is now a
     single-column hairline list and doesn't need a grid breakpoint. */
}

@media (max-width: 768px) {
  /* v4.6.70: explore-link collapses its 2-column grid (body + cue) to
     a single-column stack on narrow screens so the cue doesn't
     pinch against the body text. The .about-team-grid pattern is
     inherited from .cross-link-cta-grid which has its own mobile
     handling. */
  .about-explore-link {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding: var(--space-lg) 0;
  }

  .about-explore-title {
    font-size: 1.1rem;
  }

  .about-explore-cue {
    justify-self: start;
  }
}

@media (max-width: 768px) {

  /* --- 1. Hero: compact --- */
  .about-hero-columns {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-top: var(--space-lg);
  }

  .about-hero-columns p {
    /* v4.6.89: font-size: 0.95rem override retired — violated the
       18px legibility floor on mobile (where help-seekers most
       struggle with small type). The base rule's clamp handles
       viewport scaling and stays ≥18px. Line-height override
       preserved (tighter rhythm on small screens is appropriate). */
    line-height: 1.6;
  }

  /* --- 3. Values: compact horizontal layout --- */
  .about-values {
    padding: var(--space-xl) 0;
  }

  .about-values .section-title {
    font-size: 1.5rem;
    margin-bottom: var(--space-lg);
  }

  .about-values-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    max-width: none;
  }

  .about-value-card {
    padding-top: var(--space-md);
    gap: var(--space-sm);
  }

  .about-value-card p {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  /* --- 4. Team cards: compact ---
     v4.6.70: dead mobile rules retired. Team now uses .cross-link-cta-
     grid (Careers v4.6.35) which has its own mobile responsive rules
     at main.css:12640+. .about-team-avatar / .about-team-card /
     .about-team-card .btn are no longer emitted by the rebuilt
     about-team.php. */

  .about-team {
    padding: var(--space-xl) 0;
  }

  /* --- 5. Commitment: collapse 2-col asymmetric to stack --- */
  .about-commitment {
    padding: var(--space-2xl) 0;
  }

  .about-commitment-card {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .about-commitment-anchor h2 {
    margin-bottom: 0;
  }

  .about-commitment-body p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: var(--space-md);
  }

  /* --- 6. Explore: 5-row hairline list ---
     v4.6.70: dead mobile rules retired. The new hairline list pattern
     has its own mobile breakpoint (above) that collapses the row's
     body+cue grid to a single-column stack. .about-explore-card,
     .about-explore-icon, .about-explore-grid are no longer emitted
     by the rebuilt about-explore.php. */
  .about-explore {
    padding: var(--space-xl) 0;
  }

}

/* ============================================
   About Sub-Pages Shared Styles
   ============================================ */

/* --- Staff Grid (v4.6.111 brand-spine rebuild) ---
   Earlier treatment: white-bg + 1px gray-200 border + radius-lg cards
   with hover-lift (translateY(-2px) + shadow-md on :hover) and off-
   brand --blue-600 role-color. Forbidden by .impeccable.md principle 5
   (no hover-lift, no card chrome on member tiles).

   New treatment: chromeless tiles with centered avatar + Franklin
   Gothic name + brand-navy role + quiet meta. Hover state is a
   subtle navy-tint name color shift (no transform, no shadow). The
   anchor link inherits the tile via `a.staff-card` further down. */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  padding: var(--space-3xl) 0;
}

.staff-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--space-md) 0;
  text-align: center;
  transition: color 0.2s var(--ease-out, ease-out);
}

.staff-card:hover h3,
.staff-card:focus-visible h3 {
  color: var(--blue-900);
  text-decoration: underline;
}

.staff-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  overflow: hidden;
}

.staff-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.staff-card h3 {
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: var(--space-xs);
  transition: color 0.2s var(--ease-out, ease-out);
}

.staff-role {
  display: block;
  font-size: 0.9rem;
  color: var(--blue-900);
  font-weight: 500;
  margin-bottom: var(--space-xs);
  line-height: 1.4;
}

.staff-pronouns {
  display: block;
  font-size: 0.85rem;
  color: var(--fg-meta);
  font-style: italic;
}

/* --- Board Page --- */
.board-section {
  padding: var(--space-3xl) 0;
}

.board-section-title {
  /* v4.6.111: Franklin Gothic (was Avenir), --blue-900 (was --gray-900),
     and 1px --hairline (was 2px --blue-600 — forbidden side-stripe). */
  font-family: var(--font-accent);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.board-officers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}

.board-officer-card {
  /* v4.6.111: card-chrome retired (was gray-50 bg + gray-200 border +
     radius-lg + 2xl padding). Now a chromeless centered profile tile —
     the photo + name + title + excerpt carry the editorial weight. */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--space-lg) 0;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s var(--ease-out, ease-out);
}

.board-officer-card:hover h3,
.board-officer-card:focus-visible h3 {
  text-decoration: underline;
}

.board-officer-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  overflow: hidden;
}

.board-officer-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.board-officer-card h3 {
  font-family: var(--font-accent);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: var(--space-xs);
}

.board-officer-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  /* v4.6.111: --blue-600 → --blue-900 (canonical navy). */
  color: var(--blue-900);
  margin-bottom: var(--space-md);
}

.board-officer-card > p {
  font-size: 1rem;
  /* v4.6.111: --gray-600 → --fg2 (canonical secondary text);
     0.9rem → 1rem to meet the 18px body floor. */
  color: var(--fg2);
  line-height: 1.6;
  text-align: left;
  margin: 0;
  max-width: 64ch;
}

.board-directors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.board-director-card {
  /* v4.6.111: card-chrome retired (was white bg + gray-200 border +
     radius-md + lg padding). Chromeless compact tile. */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--space-md) 0;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s var(--ease-out, ease-out);
}

.board-director-card:hover h3,
.board-director-card:focus-visible h3 {
  text-decoration: underline;
}

.board-director-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
  /* v4.6.111: --gray-200 → --bg-tint-navy (brand-aligned placeholder
     ground; was a generic neutral). */
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
  overflow: hidden;
}

.board-director-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.board-director-card h3 {
  font-family: var(--font-accent);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: var(--space-xs);
}

.board-director-card .staff-role {
  font-size: 0.85rem;
}

/* =============================================================================
   FINANCIALS PAGE (v4.6.71 brand-spine)
   =============================================================================
   Rebuilt from rounded-card chrome + hover-lift + Tailwind teal/blue tokens
   + Avenir h3 overrides + centered section header into editorial register
   matching Partnerships (v4.6.65), Careers (v4.6.66), About (v4.6.70).

   Sections, top to bottom:
     .fin-intro       — intro prose + inline horizontal trust badges
     .fiscal-reports  — hairline-divided fiscal year rows
   ============================================================================= */

/* --- Intro + Trust Badges --- */
.fin-intro {
  padding: var(--space-3xl) 0;
  background: var(--cream);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.fin-intro-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: start;
}

.fin-intro-text p {
  font-family: var(--font-primary);
  font-size: 1.05rem;
  color: var(--fg2);
  line-height: 1.7;
  margin: 0;
  max-width: 60ch;
}

.fin-intro-badges .section-label {
  display: block;
  margin-bottom: var(--space-md);
}

/* Trust badges — inline horizontal credentials. Logo IS the visual
   (when uploaded); text label sits beneath. No card chrome, no hover-
   lift; the hairline-spanning :focus-visible ring is the affordance.
   Mirrors the editorial register the rest of the brand-spine work
   uses for "we earned this" content. */
.trust-badges-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl) var(--space-2xl);
  align-items: flex-start;
}

.trust-badge-item {
  min-width: 0;
}

.trust-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s var(--ease-out, ease-out);
}

.trust-badge:hover,
.trust-badge:focus-visible {
  outline: none;
  opacity: 0.85;
}

.trust-badge:focus-visible {
  outline: 2px solid var(--blue-900);
  outline-offset: 4px;
}

.trust-badge--static {
  cursor: default;
}

.trust-badge-img {
  display: block;
  max-width: 120px;
  max-height: 88px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left top;
}

.trust-badge-text {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg2);
  line-height: 1.35;
  max-width: 24ch;
}

/* --- Fiscal Reports — hairline-divided year list --- */
.fiscal-reports {
  padding: var(--space-3xl) 0;
}

.fiscal-reports-header {
  max-width: 72ch;
  margin: 0 0 var(--space-xl);
}

.fiscal-years-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fiscal-year-item {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
  align-items: baseline;
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.fiscal-year-item:last-child {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.fiscal-year-label {
  min-width: 0;
}

/* Small-caps eyebrow — same register as .section-label / .news-tag.
   No pill chrome, no colored background. Sits above the year title
   on the first/newest item only. */
.fiscal-year-recent {
  display: block;
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-meta);
  margin-bottom: var(--space-xs);
}

/* Year title — base h1-h6 Franklin Gothic applies. No font-family
   override (was Avenir on .fiscal-year-card > h3 / .fiscal-year-
   header h3 in pre-v4.6.71). */
.fiscal-year-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--blue-900);
  margin: 0;
  letter-spacing: -0.005em;
}

.fiscal-year-downloads {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.fiscal-download-link {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  color: var(--blue-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-thickness 0.15s var(--ease-out, ease-out);
}

.fiscal-download-link:hover,
.fiscal-download-link:focus-visible {
  outline: none;
  text-decoration-thickness: 2px;
}

.fiscal-no-docs {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-style: italic;
  color: var(--fg-meta);
}

/* --- Financials Page Responsive --- */
@media (max-width: 768px) {
  .fin-intro-content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .fiscal-year-item {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
  }
}

/* v4.6.71: legacy mobile responsive block retired. The new financials
   rebuild ships its own @media (max-width: 768px) rules (above) for
   .fin-intro-content and .fiscal-year-item — the only markup the new
   partials emit. Prior rules referencing .trust-badges-inner /
   .trust-badge-icon / .fiscal-year-card / .fiscal-year-header /
   .fiscal-downloads are all dead now (retired markup). */

/* --- Careers Page --- */
/* --- Why Medicare Rights (Benefits) --- */
/* =============================================================================
   CAREERS PAGE (v4.6.66 rebuild)
   =============================================================================
   Rebuilt from a generic-nonprofit-template baseline (4-up icon-card benefits
   grid, hover-lift job cards with teal pill tags, EEO buried in a footer
   card) into editorial-advocacy register matching Policy & Research, Stories,
   and the v4.6.65 Partnerships rebuild: hairline-divided lists, no card
   chrome, navy-centric palette, EEO promoted to its own standalone band.

   Sections, top to bottom:
     .careers-why          — "Why Medicare Rights?" benefits, hairline list
     .careers-openings     — current openings, hairline-divided job rows
     .careers-eeo          — Equal Opportunity Employer, standalone band
     .cross-link-cta       — Meet the Staff / Meet the Board (unchanged,
                             already brand-spined v4.6.35)
   ============================================================================= */

/* --- Why Medicare Rights? (Benefits) --- */
.careers-why {
  padding: var(--space-3xl) 0;
}

.careers-why-header {
  max-width: 72ch;
  margin: 0 0 var(--space-2xl);
}

.careers-benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* v4.6.120: single-column max-width:76ch replaced with a 2-column
     grid. Row dividers are produced by border-top on the list (above
     the first row) + border-bottom on each item (below every row),
     so the cell-by-cell hairline rhythm reads as a clean grid even
     across an asymmetric last-row (odd count) without empty-cell
     visual gaps. Column-gap only — no row-gap, otherwise gap-air
     would interrupt the bottom-border hairlines. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-2xl);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.careers-benefits-item {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  padding: var(--space-xl) 0;
}

/* Mobile: collapse to single-column at ≤720px (below ~640px each
   column would be too narrow to read comfortably given the
   description copy length). */
@media (max-width: 720px) {
  .careers-benefits-list {
    grid-template-columns: 1fr;
  }
}

.careers-benefits-title {
  font-family: var(--font-accent);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--blue-900);
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.005em;
}

.careers-benefits-desc {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg2);
  margin: 0;
  max-width: 64ch;
}

/* --- Current Openings --- */
.careers-openings {
  padding: var(--space-3xl) 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.careers-openings-header {
  max-width: 72ch;
  margin: 0 0 var(--space-xl);
}

.careers-openings-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.careers-openings-item {
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.careers-openings-item:last-child {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

/* Empty state when no mrc_job posts exist. Italic to read as a quiet
   editorial aside rather than an error message. */
.careers-openings-empty {
  font-family: var(--font-primary);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--fg-meta);
  margin: 0 0 var(--space-xl);
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

/* Fallback "Don't see a position that fits?" line, rendered as a quiet
   paragraph after the openings list. Was a rounded card; now an inline
   prose moment. */
.careers-fallback {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg2);
  margin: var(--space-xl) 0 0;
  max-width: 64ch;
}

.careers-fallback a {
  color: var(--blue-700);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.careers-fallback a:hover,
.careers-fallback a:focus-visible {
  text-decoration-thickness: 2px;
}

/* Job row — single anchor wrapping a flex composition: title + meta +
   excerpt on the left, "View & apply" cue on the right. Mirrors the
   .policy-activity-item / .partners-featured-link / .priority-issues-
   link idiom: no card chrome, no border-radius, hover affordance via
   background tint + edge nudge. */
.job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s var(--ease-out, ease-out);
}

.job-row:hover,
.job-row:focus-visible {
  outline: none;
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.03));
  margin: 0 calc(var(--space-md) * -1);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.job-row-body {
  min-width: 0;
}

.job-row-title {
  font-family: var(--font-accent);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--blue-900);
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.005em;
}

.job-row:hover .job-row-title,
.job-row:focus-visible .job-row-title {
  color: var(--blue-950, var(--blue-900));
}

/* Inline meta string: "New York, NY — Hybrid Remote and In-person".
   Replaces the prior svg-icon + location + teal-pill layout. */
.job-row-meta {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fg-meta);
  margin: 0 0 var(--space-sm);
  letter-spacing: 0.01em;
}

.job-row-excerpt {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0;
  max-width: 56ch;
}

.job-row-cue {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Equal Opportunity Employer (standalone band) --- */
.careers-eeo {
  padding: var(--space-3xl) 0;
  background: var(--bg-navy-soft, var(--gray-50));
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.careers-eeo-inner {
  max-width: 72ch;
}

.careers-eeo-heading {
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 1vw + 1.25rem, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  margin: var(--space-xs) 0 var(--space-md);
  text-wrap: balance;
}

.careers-eeo-body {
  font-family: var(--font-primary);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--fg2);
  margin: 0;
  max-width: 66ch;
}

/* --- Responsive: Careers --- */
@media (max-width: 768px) {
  .careers-why,
  .careers-openings,
  .careers-eeo {
    padding: var(--space-2xl) 0;
  }

  .careers-benefits-item {
    padding: var(--space-lg) 0;
  }

  .job-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding: var(--space-lg) 0;
  }

  .job-row-title {
    font-size: 1.1rem;
  }

  .job-row-cue {
    justify-self: start;
  }

  .careers-eeo-heading {
    font-size: 1.35rem;
  }
}

/* --- Contact Page --- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  padding: var(--space-3xl) 0;
}

.contact-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
}

.contact-card-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
}

.contact-card h3 {
  font-size: 1.1rem;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

.contact-card > p {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.contact-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  color: var(--blue-600);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  margin-bottom: var(--space-sm);
}

.contact-link:hover {
  color: var(--blue-800);
}

.contact-hours {
  font-size: 0.85rem;
  color: var(--gray-400);
}

.office-locations {
  padding: var(--space-3xl) 0;
  background: var(--gray-50);
}

.office-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.office-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
}

.office-card h3 {
  font-size: 1.1rem;
  color: var(--gray-900);
  margin-bottom: var(--space-md);
}

.office-address {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.6;
  font-style: normal;
}

/* =============================================================================
   PARTNERSHIPS PAGE (v4.6.64 rebuild)
   =============================================================================
   Rebuilt from a generic-nonprofit-template baseline (rounded cards, hover-
   lift, Tailwind-style blue tokens, hardcoded testimonial defaults, no
   actual partners listed) into editorial-advocacy register matching Policy
   & Research / Stories: hairline-divided lists, no card chrome, Franklin
   Gothic italic blockquotes, navy-centric brand palette, real Featured
   Partners pulled from the mrc_partner CPT.

   Sections, top to bottom:
     .partners-intro        — real editorial intro, two paragraphs
     .partners-featured     — Featured Partners list (logo or typographic)
     .partners-testimonials  — Partner Voices, hairline-divided blockquotes
     .partners-categories   — Secondary nav, hairline list with counts
     .partners-cta          — Mailto, hairline-bracketed primary close
     .partners-category-archive — variant used by taxonomy template
   ============================================================================= */

/* --- Intro --- */
.partners-intro {
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.partners-intro-prose {
  max-width: 72ch;
}

.partners-intro-lead {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--blue-900);
  font-weight: 500;
  margin: 0 0 var(--space-lg);
  text-wrap: pretty;
}

.partners-intro-body {
  font-family: var(--font-primary);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fg2);
  margin: 0;
  max-width: 68ch;
}

/* --- Featured Partners --- */
.partners-featured {
  padding: var(--space-3xl) 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.partners-featured-header {
  max-width: 72ch;
  margin: 0 0 var(--space-2xl);
}

.partners-featured-header .section-subtitle {
  margin: var(--space-sm) 0 0;
  max-width: 60ch;
}

/* Hairline-divided list. Mirrors .partners-featured-list / .policy-series-
   list / .resource-library discipline — no card chrome, no border-
   radius, no hover-lift. Each row is the whole click target when the
   partner has a URL. */
.partners-featured-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.partners-featured-item {
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.partners-featured-item:last-child {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.partners-featured-link {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
  align-items: center;
  padding: var(--space-xl) 0;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s var(--ease-out, ease-out);
}

.partners-featured-link:hover,
.partners-featured-link:focus-visible {
  outline: none;
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.03));
  margin: 0 calc(var(--space-md) * -1);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.partners-featured-link--static {
  cursor: default;
}

.partners-featured-link--static:hover {
  background: transparent;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Mark column: holds either the logo image OR a typographic name display
   for partners without a logo. Same width budget either way so the row
   composition stays consistent across mixed sets. */
.partners-featured-mark {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 64px;
}

.partners-featured-logo {
  max-width: 100%;
  max-height: 84px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

/* When no logo is set, the partner's name renders Franklin Gothic
   display weight in this column — sized to roughly match the optical
   weight of a logo lockup. Italic so it reads as institution-mark,
   not headline. */
.partners-featured-name-display {
  font-family: var(--font-accent);
  font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: var(--blue-900);
  letter-spacing: -0.01em;
}

.partners-featured-body {
  min-width: 0;
}

.partners-featured-eyebrow {
  /* v4.6.122: --font-primary → --font-accent. Small-caps eyebrows
     (uppercase + letter-spaced + 700) use Franklin Gothic across the
     spine — see .mc-source-name, .post-author-label, .post-tags-label.
     This rule was on Avenir from a pre-convention era. */
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-meta);
  display: block;
  margin: 0 0 var(--space-xs);
}

/* h3 only appears when a logo is present (logo is the visual mark; h3
   restates the name in text for accessibility + non-image contexts). */
.partners-featured-name {
  font-family: var(--font-accent);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue-900);
  margin: 0 0 var(--space-xs);
}

.partners-featured-desc {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0;
  max-width: 56ch;
}

.partners-featured-cue {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: 0.85rem;
}

/* --- Partner Voices (testimonials) --- */
.partners-testimonials {
  padding: var(--space-3xl) 0;
  background: var(--bg-navy-soft, var(--gray-50));
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.partners-testimonials-header {
  max-width: 72ch;
  margin: 0 0 var(--space-2xl);
}

.partners-testimonials-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.partners-testimonials-item {
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  padding: var(--space-2xl) 0;
}

.partners-testimonials-item:last-child {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.partners-testimonials-quote {
  margin: 0;
  padding: 0;
  border: none;
}

.partners-testimonials-quote p {
  font-family: var(--font-accent);
  font-size: clamp(1.15rem, 0.5vw + 1rem, 1.4rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--blue-900);
  margin: 0;
  max-width: 68ch;
  text-wrap: pretty;
}

.partners-testimonials-org {
  /* v4.6.122: --font-primary → --font-accent. Same small-caps eyebrow
     convention as .partners-featured-eyebrow above. */
  display: block;
  font-family: var(--font-accent);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-meta);
  margin-top: var(--space-md);
  font-style: normal;
}

/* --- Partner Categories (secondary nav) --- */
.partners-categories {
  padding: var(--space-3xl) 0;
}

.partners-categories-header {
  max-width: 72ch;
  margin: 0 0 var(--space-xl);
}

.partners-categories-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.partners-categories-item {
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.partners-categories-item:last-child {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.partners-categories-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s var(--ease-out, ease-out);
}

.partners-categories-link:hover,
.partners-categories-link:focus-visible {
  outline: none;
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.03));
  margin: 0 calc(var(--space-md) * -1);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.partners-categories-name {
  font-family: var(--font-accent);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--blue-900);
}

.partners-categories-count {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--fg-meta);
  white-space: nowrap;
}

/* --- Partner With Us CTA (primary close) --- */
.partners-cta {
  padding: var(--space-3xl) 0;
  background: var(--blue-900);
  color: var(--white);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.partners-cta-inner {
  max-width: 68ch;
  margin: 0 auto;
  text-align: center;
}

.partners-cta-heading {
  font-family: var(--font-accent);
  font-size: clamp(1.75rem, 1.5vw + 1.25rem, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}

.partners-cta-body {
  font-family: var(--font-primary);
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-xl);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.partners-cta-btn {
  /* Inherits .btn .btn-primary .btn-lg sizing from button base.
     White text + green-accent ground already enforced by .btn-primary
     overrides in the button reset (see main.css:1158). */
}

/* --- Taxonomy archive variant --- */
.partners-category-archive {
  /* Inherits .partners-featured spacing; no border-top since the
     content-hero above carries its own boundary. */
  border-top: none;
}

.partners-category-empty {
  font-family: var(--font-primary);
  font-size: 1.05rem;
  color: var(--fg-meta);
  text-align: center;
  padding: var(--space-2xl) 0;
}

.partners-category-back {
  text-align: center;
  margin: var(--space-2xl) 0 0;
}

/* --- Responsive: Partnerships --- */
@media (max-width: 768px) {
  .partners-intro {
    padding: var(--space-2xl) 0 var(--space-xl);
  }

  .partners-intro-lead {
    font-size: 1.125rem;
  }

  .partners-intro-body {
    font-size: 1rem;
  }

  .partners-featured-link {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
  }

  .partners-featured-mark {
    min-height: 0;
  }

  .partners-featured-name-display {
    font-size: 1.25rem;
  }

  .partners-testimonials-item {
    padding: var(--space-xl) 0;
  }

  .partners-testimonials-quote p {
    font-size: 1.05rem;
  }

  .partners-categories-link {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .partners-cta-heading {
    font-size: 1.5rem;
  }
}

/* --- Stories Listing --- */
.stories-listing {
  padding: var(--space-3xl) 0;
}

/* Header bar: heading + eyebrow on the left, search input on the right.
   Drops the prior centered alignment now that the header is split. */
.stories-listing-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
  max-width: 1080px;
  margin: 0 auto var(--space-2xl);
}

.stories-listing-header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.stories-listing .section-title {
  margin-bottom: 0;
}

.stories-search {
  display: flex;
  align-items: center;
  position: relative;
  flex: 0 1 280px;
  min-width: 220px;
}

.stories-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-meta, var(--gray-600));
  pointer-events: none;
}

.stories-search input[type="search"] {
  width: 100%;
  padding: 10px 12px 10px 36px;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  color: var(--blue-900);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  min-height: 44px;
  transition: border-color 0.2s var(--ease-out, ease-out);
}

.stories-search input[type="search"]:focus {
  outline: none;
  border-color: var(--blue-700);
}

/* Featured story — asymmetric 60/40 composition: large photo on left,
   name + location + pull quote + CTA on the right. Sits at the top of
   the listing as an emotional anchor before the supporting grid. */
.story-feature {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: center;
  max-width: 1080px;
  margin: 0 auto var(--space-3xl);
}

.story-feature-photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-100);
}

.story-feature-img,
.story-feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-feature-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-feature-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.story-feature-name {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--blue-900);
  margin: 0;
}

.story-feature-meta {
  font-size: 0.95rem;
  color: var(--fg-meta);
  margin: 0;
}

.story-feature-quote {
  margin: 0;
  padding: 0;
  border: 0;
}

.story-feature-quote p {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.125rem, 1vw + 0.85rem, 1.375rem);
  line-height: 1.45;
  color: var(--gray-800);
  margin: 0;
  max-width: 48ch;
}

.story-feature-excerpt {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg2, var(--gray-700));
  margin: 0;
  max-width: 56ch;
}

.story-feature-cta {
  align-self: flex-start;
  margin-top: var(--space-xs);
}

/* Supporting stories grid — chromeless editorial cards (no border,
   no radius on the card itself, no hover-lift transform). Photo +
   name + excerpt + arrow link, separated only by spacing. */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-2xl) var(--space-xl);
  max-width: 1080px;
  margin: 0 auto;
}

.story-preview-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.story-preview-image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
}

.story-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-preview-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.story-preview-content h3 {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  margin: 0;
}

.story-location,
.story-meta {
  font-size: 0.85rem;
  color: var(--fg-meta);
  margin: 0;
}

.story-preview-content p {
  font-size: 0.95rem;
  color: var(--fg2, var(--gray-700));
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

/* v4.6.134: pull quote treatment for the supporting stories grid cards.
   Matches the .story-feature-quote family (Franklin Gothic italic) at a
   compact card scale. Slightly smaller and less dominant than the feature
   variant (clamp 1.125–1.375rem) so it doesn't visually fight the card
   h3 above it, but Franklin Gothic + italic + curly quotes still register
   as "this is the client's voice, not generic blurb copy."
   Selector is qualified with .story-preview-content for specificity over
   the .story-preview-content p body-text rule above. */
.story-preview-content .story-preview-quote {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1;
}

.story-preview-content .story-preview-quote p {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 0.975rem;
  line-height: 1.5;
  color: var(--gray-800);
  margin: 0;
}

.story-preview-link {
  font-family: var(--font-accent);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-900);
  text-decoration: none;
  margin-top: var(--space-xs);
  align-self: flex-start;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: border-bottom-width 0.2s var(--ease-out, ease-out);
}

.story-preview-link:hover,
.story-preview-link:focus-visible {
  color: var(--green-accent, #47ab47);
  border-bottom-width: 2px;
}

@media (max-width: 768px) {
  .story-feature {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}


/* ============================================
   About Sub-Pages Responsive
   ============================================ */

@media (max-width: 1024px) {
  .staff-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .board-officers-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto var(--space-3xl);
  }

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

  .contact-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
    padding: var(--space-2xl) 0;
  }

  .partners-testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: var(--space-2xl) auto 0;
  }

  .stories-grid {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .staff-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding: var(--space-2xl) 0;
  }

  .staff-avatar {
    width: 64px;
    height: 64px;
  }

  .board-directors-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* v4.6.71: .fiscal-downloads orphan rule retired — markup is now
     .fiscal-year-downloads with its own mobile handling above. */

  .office-grid {
    grid-template-columns: 1fr;
  }

  /* Careers page mobile rules retired in v4.6.66 — the rebuild's own
     responsive breakpoint (above) handles all current careers markup;
     these legacy rules targeted .careers-benefits-grid / .careers-
     benefit* / .job-card* / old .careers-fallback card chrome that no
     longer renders. */

  /* Partners page mobile */
  .partners-intro {
    padding: var(--space-lg) 0;
  }

  .partners-intro-text {
    font-size: 0.95rem;
  }

  .partners-share-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .partners-share-cta .btn {
    width: 100%;
    text-align: center;
  }

  .partners-contact-card {
    padding: var(--space-md);
  }

  .partners-testimonials {
    padding: var(--space-xl) 0;
  }

  .partners-testimonials .section-title {
    font-size: 1.3rem;
  }

  .partners-testimonials-grid {
    gap: var(--space-sm);
    margin-top: var(--space-lg);
  }

  .partner-testimonial-card {
    padding: var(--space-lg);
  }

  .partner-testimonial-card blockquote {
    font-size: 0.88rem;
  }

  .partner-testimonial-quote-icon svg {
    width: 22px;
    height: 22px;
  }

  .partner-logos {
    padding: var(--space-xl) 0;
  }

  .partner-logos .section-title {
    font-size: 1.3rem;
  }

  .partner-logos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-top: var(--space-lg);
  }

  .partner-logo-placeholder {
    padding: var(--space-md);
    min-height: 100px;
  }

  .partner-cat-icon {
    width: 40px;
    height: 40px;
  }

  .partner-cat-icon svg {
    width: 20px;
    height: 20px;
  }

  .partner-logo-placeholder span {
    font-size: 0.8rem;
  }

  /* --- Stories page mobile --- */

  /* Listing: tighter spacing */
  .stories-listing {
    padding: var(--space-xl) 0;
  }

  .stories-listing .section-title {
    font-size: 1.3rem;
  }

  .stories-grid {
    gap: var(--space-md);
  }

  .story-preview-image {
    aspect-ratio: 3 / 2;
  }

  .story-preview-content {
    padding: var(--space-lg);
  }

  .story-preview-content h3 {
    font-size: 1.05rem;
  }

  .story-preview-content p {
    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Stories listing */
  .stories-listing {
    padding: var(--space-xl) 0;
  }

  .stories-grid {
    grid-template-columns: 1fr;
    max-width: none;
    gap: var(--space-lg);
  }

  .stories-listing .section-title {
    font-size: 1.4rem;
    margin-bottom: var(--space-lg);
  }

  /* Cards: horizontal compact layout on phone (small image + content row).
     No chrome — gap separates the columns. */
  .story-preview-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-md);
  }

  .story-preview-image {
    aspect-ratio: auto;
    height: 100%;
  }

  .story-preview-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2xs, 4px);
  }

  .story-preview-content h3 {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
  }

  .story-preview-content p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.82rem;
    margin-bottom: var(--space-xs);
  }

  .story-preview-link {
    font-size: 0.82rem;
  }

}

/* ============================================
   News Post / Single Article Styles
   ============================================ */

/* Post Hero — chrome stripped. /layout migrates to shared content-hero.php
   (light mode, Franklin Gothic h1 via universal rule, watermark from
   uppercased category name). Hero meta + author + date + read-time line
   typography preserved below for the new hero composition. */
.post-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.95rem;
  color: var(--fg-meta);
  flex-wrap: wrap;
}

.post-hero-sep {
  color: var(--fg-meta);
  opacity: 0.5;
}

.post-hero-author {
  font-weight: 600;
  color: var(--blue-900);
}

/* Post Layout — Two Column */
.post-layout {
  padding: var(--space-3xl) 0;
  background: var(--white);
}

.post-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-3xl);
}

/* Main Article */
.post-main {
  min-width: 0;
}

/* Featured image — sits inside the article column (post-grid's 1fr
   track) so it inherits the column width directly. v4.6.37 had the
   figure escape to the full container width as a visual anchor, but
   in practice it overpowered the prose below and the 3xl bottom
   margin left an awkward gap before the body text. v4.6.63 walks that
   back: the figure now lives inside <article class="post-main">, so
   its width matches the prose width below, and the bottom margin is
   tightened to var(--space-xl) so the image reads as part of the
   article's intro rather than a standalone anchor.

   Sharp corners (editorial photography convention — the last bit of
   card-corner chrome that survived the v4.6.25–v4.6.36 strip is
   retired here). */
.post-hero-image {
  margin: 0 0 var(--space-xl);
}

.post-hero-image img,
.post-hero-image .post-hero-img {
  display: block;
  width: 100%;
  height: auto;
}

.post-hero-image figcaption {
  font-size: 0.85rem;
  color: var(--fg-meta);
  margin-top: var(--space-sm);
  font-style: italic;
  line-height: 1.5;
}

/* Article Content Typography */
.post-content {
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--fg2); /* v4.6.37 token fix: was --gray-800 */
}

.post-content h2 {
  font-size: 1.65rem;
  color: var(--gray-900);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-lg);
  line-height: 1.3;
}

.post-content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.post-content p {
  margin-bottom: var(--space-lg);
}

/* Lede: bigger, warmer type signals importance on its own. */
.post-content .post-lede {
  font-size: 1.25rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--gray-900);
  margin-bottom: var(--space-2xl);
  text-wrap: pretty;
}

.post-content ul,
.post-content ol {
  padding-left: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.post-content li {
  margin-bottom: var(--space-sm);
  color: var(--fg2);
  padding-left: var(--space-xs);
}

.post-content ul {
  list-style: disc;
}

.post-content ol {
  list-style: decimal;
}

.post-content a {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-content a:hover {
  color: var(--blue-800);
}

.post-content em {
  font-style: italic;
}

.post-content strong {
  font-weight: 600;
  color: var(--gray-900);
}

/* In-body figure + pullquote breakout (v4.6.37 layout pass).
   Editor-applied modifier classes that let figures and pullquotes
   escape the article column on desktop for editorial composition
   variety. NYT / Atlantic / ProPublica long-form pattern. Mobile
   collapses to in-column behavior (column already takes the full
   viewport width). */

/* .is-wide: extend ~3xl on each side of the column. Sits inside the
   .post-grid sticky-sidebar region; the sidebar is sticky so visual
   alignment isn't disturbed by the wider figure. */
@media (min-width: 1024px) {
  .post-content figure.is-wide,
  .post-pullquote.is-wide {
    margin-left: calc(-1 * var(--space-3xl));
    margin-right: calc(-1 * var(--space-3xl));
  }

  /* .is-full: full viewport bleed. Uses the calc(50% - 50vw) negative-
     margin pattern to pull the element's left edge to the viewport
     left, regardless of nesting depth in the grid container. */
  .post-content figure.is-full,
  .post-pullquote.is-full {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
  }

  .post-content figure.is-full img,
  .post-content figure.is-full picture {
    width: 100%;
    height: auto;
  }

  /* When figure is full-bleed, pull the caption back into the column
     so it reads as annotative editorial text, not bleeding decoration. */
  .post-content figure.is-full figcaption {
    max-width: var(--max-width);
    margin: var(--space-sm) auto 0;
    padding: 0 var(--space-lg);
  }
}

/* Editor-droppable pullquote — quiet hairline-bracketed display
   register. Mirrors .donate-quote-text discipline: Franklin Gothic
   display weight, upright (no italic), navy, no card chrome, no
   decorative quote-mark pseudo-element. Hairline rules above + below
   carry the editorial separation. */
.post-pullquote {
  margin: var(--space-2xl) 0;
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.post-pullquote p {
  font-family: var(--font-accent);
  font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}

.post-pullquote cite {
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg-meta);
  display: block;
}

/* =============================================================================
   EDITORIAL CHROME — v4.6.36
   Restrained typographic moments that compound the flat-block spine rather
   than competing with it. NOT a return to the AI-template chrome stripped
   in v4.6.25–v4.6.35; these are magazine conventions (drop caps, oversized
   pull-quote glyphs, section-marker bars, hover micro-motion on cards).
   Each touch is a single moment, deliberately placed.
   ============================================================================= */

/* 1. Drop cap on long-form articles
   Applied to the first body paragraph in .post-content (news posts) and
   .article-content (press releases, policy series). Skipped when the first
   paragraph is a .post-lede — lede already carries display register, drop
   cap on top would be duplication. */
.post-content > p:first-of-type:not(.post-lede)::first-letter,
.article-content > p:first-of-type:not(.post-lede)::first-letter {
  float: left;
  font-family: var(--font-accent);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 0.85;
  color: var(--blue-900);
  margin: 0.08em 0.1em -0.05em 0;
  padding: 0;
  text-transform: uppercase;
}

/* Reduce drop cap on mobile so it doesn't dominate narrow viewports */
@media (max-width: 640px) {
  .post-content > p:first-of-type:not(.post-lede)::first-letter,
  .article-content > p:first-of-type:not(.post-lede)::first-letter {
    font-size: 3.5rem;
  }
}

/* 2. Pull-quote ornament
   Single block-level navy quote glyph above the quoted text. Magazine
   convention — frames the pullquote as editorial weight. The hairline
   rules above + below still carry the spatial separation; this glyph
   sits inside the bracket as decorative punctuation. */
.post-pullquote::before {
  content: '\201C'; /* left double quotation mark, "stylish" curly form */
  display: block;
  font-family: var(--font-accent);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 0.4;
  color: var(--blue-900);
  margin-bottom: var(--space-md);
  text-indent: -0.05em; /* optical alignment with text below */
}

/* 3. Section-marker bar above article body h2
   Short thick navy bar (~40px × 3px) immediately above each h2 in the
   article body. Editorial section marker, adds rhythm to long articles.
   NYT / The Marshall Project pattern. Applies to news posts AND CPT
   singles (press release, policy series — which has its own h2 section
   heads for "Resources in This Series", "Videos", etc.). */
.post-content h2::before,
.article-content h2::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--blue-900);
  margin-bottom: var(--space-md);
}

/* 4. Hover arrow on news-card titles
   Right-arrow that fades in and slides 4px to the right when a card is
   hovered or focused. Replaces the discarded translateY hover-lift with
   a pure typographic micro-motion. Sits ::after the title text so it
   doesn't conflict with the stretched-link ::before overlay. */
.news-card-title a::after {
  content: ' \2192'; /* right-pointing arrow */
  display: inline-block;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.2s var(--ease-out, ease-out),
    transform 0.2s var(--ease-out, ease-out);
}

.news-card:hover .news-card-title a::after,
.news-card:focus-within .news-card-title a::after {
  opacity: 1;
  transform: translateX(0);
}

/* Respect reduced motion preference — show the arrow statically without
   the slide-in transform. */
@media (prefers-reduced-motion: reduce) {
  .news-card-title a::after {
    transition: none;
  }
}

/* =============================================================================
   END EDITORIAL CHROME — v4.6.36
   ============================================================================= */

/* Stats Row + CTA Box — pre-spine chrome stripped. /layout restyles
   .post-stats-row as hairline receipts strip (mirrors .donate-receipts-list)
   and .post-cta-box as quiet hairline-bracketed interstitial. Typography
   stubs below survive the strip and get rescaled in /layout + /bolder. */
.post-stat-number {
  font-family: var(--font-accent);
  font-weight: 700;
  color: var(--blue-900);
  line-height: 1;
}

.post-stat-label {
  font-size: 0.85rem;
  color: var(--fg2);
  font-weight: 500;
}

.post-cta-box h3 {
  font-family: var(--font-accent);
  color: var(--blue-900);
}

.post-cta-box p {
  color: var(--fg2);
}

/* v4.6.74: .post-share / .post-share-label / .post-share-buttons /
   .post-share-btn rule block retired. The blog-post share bar (inline
   icons + text labels with underline-on-hover) was a pre-v4.6.68 variant
   that diverged from the canonical action-page treatment. All four
   share-button surfaces now use the .action-share-* chrome via
   mrc_render_share_buttons() in inc/template-tags.php. */

/* Author Box */
/* Author box — editorial weight (v4.6.37 layout pass). Hairline-
   bracketed pair with the share bar above (share has top + bottom
   borders; author has bottom border only, so the two share their
   middle border visually). 96px avatar (was 80px), Franklin Gothic
   display name in navy, eyebrow letter-spacing matches sidebar
   eyebrows (0.1em, was 0.06em). Bio gets max-width for readable
   measure. */
.post-author {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
  /* v4.6.108: symmetric --space-lg padding (was 1rem top / 3rem bottom);
     bottom margin reduced --space-xl → --space-lg so the post-end blocks
     stack tighter without losing the author/tags separation. */
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  margin: 0 0 var(--space-lg);
}

.post-author-avatar {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
}

.post-author-avatar img,
.post-author-avatar .avatar {
  display: block;
  width: 96px;
  height: 96px;
  min-width: 96px;
  min-height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.post-author-label {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-meta);
  font-weight: 700;
}

.post-author-name {
  font-family: var(--font-accent);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  margin: var(--space-xs) 0 var(--space-sm);
}

.post-author-name a {
  color: var(--blue-900);
  text-decoration: none;
}

.post-author-name a:hover,
.post-author-name a:focus-visible {
  color: var(--blue-700);
}

.post-author-bio {
  font-size: 0.95rem;
  color: var(--fg2);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0;
}

/* Post Tags — after-article rhythm (v4.6.37): tight gaps. Tags +
   prev/next read as a single "post-end navigation" group with the
   "Keep Reading" section getting generous breathing room above it. */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Post tags — pill chrome stripped. /layout rebuilds as inline
   ·-separated underlined links. */
.post-tag {
  color: var(--blue-700);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s var(--ease-out, ease-out);
}

.post-tag:hover,
.post-tag:focus-visible {
  color: var(--blue-900);
  text-decoration: underline;
}

/* Post Navigation */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

/* Prev/Next nav — rounded-card chrome stripped. /layout rebuilds as
   2 hairline-divided rows with small-caps eyebrows and arrow cues. */
.post-nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-decoration: none;
  transition: color 0.2s var(--ease-out, ease-out);
}

.post-nav-link:hover,
.post-nav-link:focus-visible {
  color: var(--blue-900);
}

.post-nav-dir {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue-600);
}

.post-nav-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-nav-next {
  text-align: right;
}

/* Sidebar */
.post-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-xl));
  align-self: start;
  display: flex;
  flex-direction: column;
  /* No parent gap: block-internal padding-top + padding-bottom carry
     the rhythm so the hairline sits symmetric between consecutive
     blocks (v4.6.32 — previously the parent gap stacked with per-block
     padding, biasing the hairline toward block 1's content). */
}

.sidebar-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.sidebar-card-title {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-md);
}

.sidebar-card-desc {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

/* Sidebar Newsletter */
.sidebar-newsletter {
  background: var(--blue-50);
  border-color: var(--blue-100);
}

/* Sidebar newsletter on a light card — override the .mrc-newsletter--compact
   defaults (designed for dark/navy contexts). Stack input above button so
   the form fits the narrow sidebar column. */
.sidebar-newsletter .mrc-newsletter--compact .mrc-newsletter-form__row {
  flex-direction: column;
  align-items: stretch;
}

.sidebar-newsletter .mrc-newsletter--compact input[type="email"] {
  border-color: var(--gray-300);
  background: var(--white);
  color: var(--gray-800);
}

.sidebar-newsletter .mrc-newsletter--compact input[type="email"]::placeholder {
  color: var(--gray-400);
}

.sidebar-newsletter .mrc-newsletter--compact input[type="email"]:focus {
  background: var(--white);
}

/* Sidebar Related */
.sidebar-related {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.sidebar-related li a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--gray-100);
}

.sidebar-related li:last-child a {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-related-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar-related li a:hover .sidebar-related-title {
  color: var(--blue-600);
}

.sidebar-related time {
  font-size: 0.8rem;
  color: var(--fg-meta);
}

/* Sidebar Categories */
.sidebar-cat-links {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.sidebar-cat-links li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  text-decoration: none;
  color: var(--fg2);
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 1px solid var(--gray-100);
  transition: color 0.2s var(--ease-out, ease-out);
}

.sidebar-cat-links li:last-child a {
  border-bottom: none;
}

.sidebar-cat-links li a:hover {
  color: var(--blue-600);
}

/* Sidebar — Explore more (merged Media + Policy entry points) */
.sidebar-explore-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-explore-list li + li {
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.sidebar-explore-list a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-md) 0;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s var(--ease-out, ease-out);
}

.sidebar-explore-list a:hover,
.sidebar-explore-list a:focus-visible {
  color: var(--blue-900);
}

.sidebar-explore-title {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 1rem;
  color: var(--blue-900);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.sidebar-explore-desc {
  font-size: 0.9rem;
  color: var(--fg2);
  line-height: 1.5;
}

/* More Articles Section — "Keep Reading" reads as a new chapter
   after the article close. Generous padding-top differentiates it
   from the prev/next group above (tight, in-flow) and gives the
   reader a clear "article has ended, here's what's next" beat. */
.post-more {
  background: var(--gray-50);
  padding: var(--space-4xl) 0 var(--space-3xl);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.post-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.post-more-cta {
  text-align: center;
  margin-top: var(--space-2xl);
}

/* News Cards — flat editorial block, no chrome. No background, border,
   border-radius, shadow, or padding wrapper. Body has internal padding.
   Whole card is a click target via the stretched-link pseudo-element
   on .news-card-title a. Image is conditional (no decorative SVG
   placeholder fallback); when present, locked to 16:9 for grid
   consistency. .news-tag eyebrow is shared with policy/press/media
   tag rules elsewhere — one source of truth for the small-caps
   treatment. */
.news-card {
  position: relative;
}

/* Card hover: title color shift only — translateY lift + box-shadow +
   image scale-up retired (banned per .impeccable.md no-hover-lift rule). */
.news-card:hover .news-card-title,
.news-card:focus-visible .news-card-title {
  color: var(--blue-700);
}

/* Image link: 16:9 aspect-ratio for consistent card heights across the
   grid even when posts mix portrait/landscape/square thumbnails. */
.news-card-image-link {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.news-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card-body {
  padding: var(--space-lg);
}

/* Stretched link: the title anchor's ::before fills the entire card
   surface, making the whole card clickable while preserving a single
   accessible link per card. z-index keeps the overlay above the
   image-link wrapper (which is aria-hidden + tabindex=-1). */
.news-card-title a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.news-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  margin: var(--space-sm) 0;
}

.news-card h3 a {
  color: var(--blue-900);
  text-decoration: none;
}

.news-card h3 a:hover,
.news-card h3 a:focus-visible {
  color: var(--blue-700);
}

.news-card p {
  font-size: 0.9rem;
  color: var(--fg2);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
  color: var(--fg-meta);
}

/* News Tag — small-caps eyebrow, shared across all category/badge
   markers: .news-card, .latest-article (The Latest archive),
   .policy-activity-item (Policy & Research activity feed),
   .media-center-releases, the-latest-featured-article. Pill chrome
   retired in v4.6.30; the 9 color variants (.tag-policy, .tag-press,
   etc.) were also retired.

   v4.6.44: Promoted `color: var(--fg-meta)` from a .news-card-scoped
   rule to the base. Without explicit muted color, the eyebrow
   inherited parent body color (--gray-900) on most surfaces and
   competed visually with adjacent post titles — the Policy activity
   feed (inline layout: tag | title | date) and The Latest archive
   (stacked: tag above title) both suffered. Now the eyebrow renders
   muted gray everywhere, letting the title carry the visual lead.

   Note: previously a dark-hero context (.article-meta on press-release
   single hero) would have needed a `color: inherit` override here.
   That class was retired in v4.6.31 / v4.6.34 brand-spine rebuilds —
   all CPT singles now migrate their hero meta into content-hero.php's
   meta_html slot. No override needed. */
.news-tag {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-meta);
}

/* ---- News Post Responsive ---- */
@media (max-width: 1024px) {
  .post-grid {
    grid-template-columns: 1fr;
  }

  .post-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .post-more-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 768px) {
  .post-hero-meta {
    font-size: 0.85rem;
  }

  .post-layout {
    padding: var(--space-2xl) 0;
  }

  .post-content {
    font-size: 1rem;
  }

  .post-content .post-lede {
    font-size: 1.1rem;
  }

  .post-content h2 {
    font-size: 1.35rem;
    margin-top: var(--space-2xl);
  }

  .post-pullquote {
    padding: var(--space-lg);
  }

  .post-pullquote p {
    font-size: 1.05rem;
  }

  .post-author {
    gap: var(--space-md);
  }

  .post-author-avatar {
    width: 64px;
    height: 64px;
  }

  .post-author-avatar img,
  .post-author-avatar .avatar {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
  }

  .post-author-initials {
    font-size: 1.5rem;
  }

  .post-author-bio {
    font-size: 0.85rem;
  }

  .post-sidebar {
    grid-template-columns: 1fr;
  }

  .post-more-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  /* v4.6.74: .post-share mobile rule retired alongside its parent
     class block — see canonical .action-share-* CSS at line ~19172. */
}

/* Post meta in hero context — author · date · read-time line rendered
   inside the navy hero via content-hero.php's meta_html slot. Single.php
   is the first consumer; v4.6.31 consolidated the meta INTO the hero
   (was a stranded post-meta-bar section below). Color overrides take
   the .post-hero-* typography (gray/navy by default, tuned for white
   backgrounds) and lift them onto the navy hero gradient. */
.page-hero-meta {
  position: relative;
  z-index: 1;
  margin-top: var(--space-md);
  /* Body color for in-hero meta lines. The v4.6.31 selector
     `.page-hero .post-hero-meta` was a no-op — content-hero.php
     renders this container as `.page-hero-meta`, not `.post-hero-meta`.
     Fixed in v4.6.34 by moving color onto the container directly. */
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.page-hero .post-hero-author {
  color: var(--white);
  font-weight: 600;
}

.page-hero .post-hero-sep {
  color: rgba(255, 255, 255, 0.5);
}

/* Optional in-block heading for .post-sidebar-block — used when a
   block has a longer headline that wants more presence than the
   small-caps eyebrow alone provides (e.g., resource download CTA
   "Get the full report"). Mirrors .donate-sidebar-heading. */
.post-sidebar-heading {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-900);
  margin: 0 0 var(--space-sm);
}

/* v4.6.74: Duplicate .post-share / .post-share-label / .post-share-
   buttons / .post-share-btn rule block retired (was a second-pass
   refinement of the original at line ~11527 that itself superseded
   pre-v4.6.37 chrome). All share-button surfaces unified onto the
   canonical .action-share-* treatment via mrc_render_share_buttons(). */

/* --- Tags (inline ·-separated underlined links) ---
   v4.6.108: dropped border-top — the preceding .post-author already
   has a border-bottom, so the tags + prev/next now sit cleanly under
   ONE author divider rather than under TWO consecutive hairlines
   separated by empty space. Padding-top dropped + bottom margin
   reduced to keep the tags+nav cluster reading as one post-end unit. */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
  padding: 0;
  margin: 0 0 var(--space-md);
}

.post-tags-label {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-meta);
}

.post-tags-list {
  margin: 0;
}

.post-tags-sep {
  color: var(--fg-meta);
  opacity: 0.5;
  margin: 0 var(--space-xs);
}

/* --- Prev/Next post nav (2 hairline-divided rows) ---
   v4.6.108: dropped border-top + reduced margin-top (was --space-2xl,
   3rem). Tags + prev/next conceptually belong to the same "post-end
   navigation" group, so a hairline BETWEEN them was a false break.
   Each .post-nav-link below retains its own border-bottom — those
   are structural row dividers inside the nav, not group separators. */
.post-nav {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-sm);
}

.post-nav-link {
  padding: var(--space-lg) var(--space-xs);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  background: none;
  transition: background-color 0.2s var(--ease-out, ease-out), color 0.2s var(--ease-out, ease-out);
}

.post-nav-link:hover,
.post-nav-link:focus-visible {
  background-color: rgba(3, 56, 110, 0.03);
}

.post-nav-dir {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-meta);
}

.post-nav-title {
  font-family: var(--font-accent);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue-900);
  line-height: 1.3;
}

.post-nav-next .post-nav-dir,
.post-nav-next .post-nav-title {
  text-align: left;
}

/* --- Author avatar: initials placeholder behind get_avatar() image.
       When the avatar image is opaque (real Gravatar), it covers the
       initials. When transparent (Gravatar default-mystery-man pattern),
       initials show through. */
.post-author-avatar {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-author-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  z-index: 1;
}

.post-author-avatar img,
.post-author-avatar .avatar {
  position: relative;
  z-index: 2;
}

/* --- Sidebar: flat hairline-divided blocks (mirrors .donate-sidebar-block,
       .vol-sidebar-block). Scoped to .post-sidebar-block so the 7 other
       consumers of the legacy .sidebar-card pattern remain unaffected.
       Symmetric padding: each block has equal padding above and below
       its content, so the hairline sits centered between consecutive
       blocks (v4.6.32 spacing fix). */
.post-sidebar-block {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.post-sidebar-block:first-child {
  padding-top: 0;
}

.post-sidebar-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Newsletter input in the sidebar context: white-bg override for the
   .mrc-newsletter--compact rule chain (base rule is tuned for dark-
   overlay contexts with semi-transparent white inputs). Mirrors the
   .sidebar-newsletter and .newsletter-cta white-bg overrides elsewhere. */
.post-sidebar-block .mrc-newsletter--compact input[type="email"] {
  background: var(--white);
  color: var(--gray-900, #111);
  border-color: var(--gray-200, #e5e5e5);
}

.post-sidebar-block .mrc-newsletter--compact input[type="email"]::placeholder {
  color: var(--fg-meta);
}

.post-sidebar-block .mrc-newsletter--compact input[type="email"]:focus {
  border-color: var(--blue-700);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(3, 56, 110, 0.15);
}

.post-sidebar-eyebrow {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-meta);
  display: block;
  margin-bottom: var(--space-sm);
}

.post-sidebar-body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fg2);
  margin: 0 0 var(--space-md);
}

.post-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.post-sidebar-list li {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.post-sidebar-list li:last-child {
  border-bottom: none;
}

.post-sidebar-list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-md) 0;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s var(--ease-out, ease-out);
}

.post-sidebar-list a:hover,
.post-sidebar-list a:focus-visible {
  color: var(--blue-900);
}

.post-sidebar-list-title {
  font-family: var(--font-accent);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-900);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-sidebar-list time {
  font-size: 0.8rem;
  color: var(--fg-meta);
}

.post-sidebar-cat-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-sidebar-cat-links li {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.post-sidebar-cat-links li:last-child {
  border-bottom: none;
}

.post-sidebar-cat-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  text-decoration: none;
  color: var(--fg2);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s var(--ease-out, ease-out);
}

.post-sidebar-cat-links a:hover,
.post-sidebar-cat-links a:focus-visible {
  color: var(--blue-900);
}

.post-sidebar-count {
  font-size: 0.8rem;
  color: var(--fg-meta);
  font-weight: 500;
}

.post-sidebar-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-accent);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue-900);
  text-decoration: none;
  margin-bottom: var(--space-md);
}

.post-sidebar-phone:hover,
.post-sidebar-phone:focus-visible {
  color: var(--blue-700);
}

.post-sidebar-cta {
  display: block;
  text-align: center;
  width: 100%;
}

/* v4.6.135: Policy Resource — Secondary CTA, Regulation link, RIN.
   Used by single-mrc_resource.php to support resources with a secondary
   download (executive summary, alternate format) and federal-rulemaking
   metadata (regulation URL + RIN code) when populated.

   .resource-cta-secondary — quiet text-link rendered below the primary
   download button. Same Franklin Gothic + navy underline pattern used
   by other quiet-link surfaces (.lm-quiet-link family). No green button
   chrome — visual weight stays subordinate to the primary CTA. Renders
   inside both .article-inline-cta (mobile) and the sidebar Download
   block (desktop). */
.resource-cta-secondary {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-accent);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blue-900);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-thickness 0.15s var(--ease-out, ease-out);
}

.resource-cta-secondary:hover,
.resource-cta-secondary:focus-visible {
  text-decoration-thickness: 2px;
}

/* RIN reference — federal rulemaking identifier. Renders as a pill-style
   code element inside the Related Regulation sidebar block to signal it's
   a structured identifier (not free text). Navy-tint background ties it
   into the brand-spine token family (var(--bg-tint-navy) is the same
   background used by other "soft surface" patterns site-wide). */
.resource-rin {
  font-size: 0.9rem;
  color: var(--fg2, var(--gray-700));
  margin: 0 0 var(--space-sm);
}

.resource-rin code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
  color: var(--blue-900);
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.06));
  padding: 2px 8px;
  border-radius: var(--radius-sm, 4px);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Regulation link — quiet text-link variant within the sidebar block.
   Same visual register as .resource-cta-secondary above. Kept as a
   separate class for clarity (different semantic — out-link to source,
   not a CTA on the page's own assets). */
.resource-regulation-link {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blue-900);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-thickness 0.15s var(--ease-out, ease-out);
}

.resource-regulation-link:hover,
.resource-regulation-link:focus-visible {
  text-decoration-thickness: 2px;
}

/* Optional description line below a .post-sidebar-list-title (e.g.,
   "Explore more" block on The Latest sidebar where each item carries
   a title + a one-line descriptor). Quiet muted color so the title
   stays the visual lead. */
.post-sidebar-list-desc {
  display: block;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--fg-meta);
  margin-top: 2px;
}

/* Cross-link CTA — flat hairline-bracketed 2-up used on Staff, Board,
   and Careers pages to surface cross-references (Meet the Board, Join
   Our Team, etc.). Replaces the v4.6.34-and-earlier .action-card
   rounded 2-up grid. Each item gets a 2px navy hairline above as
   editorial punctuation; no rounded chrome, no background. */
.cross-link-cta {
  padding: clamp(var(--space-3xl), 6vw, var(--space-4xl)) 0;
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.03));
}

.cross-link-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-2xl), 5vw, var(--space-4xl));
}

@media (max-width: 720px) {
  .cross-link-cta-grid {
    grid-template-columns: 1fr;
  }
}

.cross-link-cta-item {
  padding-top: var(--space-lg);
  border-top: 2px solid var(--blue-900);
}

.cross-link-cta-title {
  font-family: var(--font-accent);
  font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--blue-900);
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
}

.cross-link-cta-body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0 0 var(--space-lg);
  max-width: 52ch;
}

.cross-link-cta-link {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blue-900);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.2s var(--ease-out, ease-out);
}

.cross-link-cta-link:hover,
.cross-link-cta-link:focus-visible {
  color: var(--blue-700);
}

/* --- post-stats-row: restructure to hairline receipts strip
       (mirrors .donate-receipts-list). Editor-droppable mid-article. */
.post-stats-row {
  display: flex;
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  justify-content: space-between;
  align-items: flex-start;
  list-style: none;
  padding: var(--space-xl) 0;
  margin: var(--space-2xl) 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.post-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}

.post-stat-number {
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* --- post-cta-box: quiet hairline-bracketed interstitial
       (was gradient-navy box; preserved for editor-droppable blocks). */
.post-cta-box {
  padding: var(--space-2xl) 0;
  margin: var(--space-2xl) 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.post-cta-box h3 {
  font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--space-sm);
}

.post-cta-box p {
  margin: 0 0 var(--space-lg);
  max-width: 60ch;
}

/* --- Mobile responsive for new layout patterns --- */
@media (max-width: 768px) {
  /* v4.6.74: .post-share / .post-share-buttons mobile rules retired
     alongside their parent class blocks. */

  .post-stats-row {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .post-nav-title {
    font-size: 0.95rem;
  }
}

/* =============================================================================
   IMAGE PLACEHOLDERS
   Styled fallbacks shown when no image is uploaded via custom fields.
   These appear in place of stock photos throughout the site.
   ============================================================================= */

.mrc-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  min-height: 240px;
  width: 100%;
  overflow: hidden;
  background: var(--gray-100);
}

.mrc-placeholder--square {
  aspect-ratio: 1 / 1;
}

.mrc-placeholder--quote {
  background: var(--blue-900);
  color: rgba(255, 255, 255, 0.18);
}

.mrc-placeholder-glyph {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(6rem, 18vw, 14rem);
  line-height: 0.6;
  letter-spacing: -0.04em;
}

/* Initials fallback for photo placeholders (staff, board, stories,
   spokespeople). Replaces the prior Lucide person-silhouette icon with
   something contentful — the person's initials in Franklin Gothic on
   the navy gradient. Size adapts to context via the surrounding
   placeholder's font-size rule. */
.placeholder-initials {
  font-family: var(--font-accent);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.92);
  font-variant-ligatures: none;
}

/* --- Visually-hidden utility for screen-reader-only labels.
   Standard WordPress convention; used by searchform.php and
   inline-form labels across the theme. --- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--white);
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  color: var(--blue-900);
  display: block;
  font-size: 1rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: 1.4;
  padding: 15px 23px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* --- Search form (used by widgets, 404, anywhere `get_search_form()` is called) --- */
.search-form-row {
  display: flex;
  gap: var(--space-sm);
  max-width: 500px;
  margin: 0 auto;
}

.search-form .search-field {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: 1rem;
  background: var(--white);
}

.search-form .search-field:focus {
  outline: none;
  border-color: var(--blue-700);
}

/* --- 404 page body (the .page-hero handles the heading) --- */
.mrc-404 {
  padding: var(--space-4xl) 0;
  text-align: center;
}

.mrc-404-content {
  max-width: 600px;
}

.mrc-404-lede {
  font-size: 1.1rem;
  color: var(--gray-600);
  margin-bottom: var(--space-2xl);
}

.mrc-404-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-2xl);
  flex-wrap: wrap;
}

/* Homepage: Get Help photo area */
.get-help-photo {
  display: flex;
  align-items: stretch;
}

.get-help-photo .mrc-placeholder {
  min-height: 300px;
  border-radius: var(--radius-lg);
}

.get-help-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Homepage: Policy photo area */
.policy-photo {
  display: flex;
  align-items: stretch;
}

.policy-photo .mrc-placeholder {
  min-height: 280px;
  border-radius: var(--radius-lg);
}

.policy-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* About: Values photo */
.about-values-photo .mrc-placeholder {
  min-height: 300px;
  max-width: 800px;
  margin: var(--space-xl) auto 0;
}

.about-values-photo img {
  width: 100%;
  border-radius: var(--radius-lg);
}

/* Get Help page: Helpline photo */
.helpline-spotlight-photo .mrc-placeholder {
  min-height: 280px;
}

.helpline-spotlight-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Learn Medicare: Product screenshots */
.lm-product-visual .mrc-placeholder {
  min-height: 300px;
}

@media (max-width: 768px) {
  .mrc-placeholder {
    min-height: 180px;
  }

  .get-help-photo .mrc-placeholder,
  .policy-photo .mrc-placeholder,
  .helpline-spotlight-photo .mrc-placeholder,
  .lm-product-visual .mrc-placeholder {
    min-height: 200px;
  }
}

/* =============================================================================
   SINGLE STAFF PROFILE PAGE
   ============================================================================= */

.staff-profile {
  padding: var(--space-3xl) 0;
}

.staff-profile-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* Photo Column */
.staff-profile-photo-col {
  position: sticky;
  top: calc(var(--header-height) + var(--space-xl));
}

.staff-profile-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--gray-100);
}

.staff-profile-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-profile-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Info block below photo (v4.6.111: card-chrome retired — was
   gray-50 bg + radius-md + padding. Now a flat vertical stack of
   affordances anchored by a top hairline). */
.staff-profile-info-card {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.staff-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-500);
  padding: 6px 12px;
  background: var(--gold-100);
  border-radius: var(--radius-sm);
  width: fit-content;
}

.staff-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  /* v4.6.111: --blue-600 → --blue-900 (canonical navy). */
  color: var(--blue-900);
  text-decoration: none;
  transition: color 0.2s;
}

.staff-profile-link:hover,
.staff-profile-link:focus-visible {
  /* v4.6.111: --blue-800 → --blue-900 + canonical underline-on-hover. */
  color: var(--blue-900);
  text-decoration: underline;
}

/* Bio Column.
   v4.6.111: .staff-profile-name and .staff-profile-title rules below
   are kept for any legacy markup that still uses them, but the v4.6.111
   single-mrc_staff / single-mrc_board_member hero migration moved the
   name into the shared content-hero title slot and the title/role into
   $meta_html — these specific classes are no longer rendered by the
   new single templates. Tokens updated regardless. */
.staff-profile-name {
  font-family: var(--font-accent);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--blue-900);
  line-height: 1.2;
  margin: 0 0 var(--space-xs);
}

.staff-profile-title {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--blue-900);
  margin: 0 0 var(--space-xs);
}

.staff-profile-pronouns,
.staff-profile-org {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--fg-meta);
  font-style: italic;
  margin-bottom: var(--space-lg);
}

.staff-profile-content {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  /* v4.6.111: --gray-200 → --hairline (canonical brand-spine token). */
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

/* More Staff Section */
.staff-more {
  padding: var(--space-3xl) 0;
  background: var(--gray-50);
}

.staff-more .staff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.staff-more-cta {
  text-align: center;
  margin-top: var(--space-xl);
}

/* Staff card as link — v4.6.111: anchor inherits color/text-decoration
   so the inline style=... attribute can come off the markup. Earlier
   .staff-card had a translateY(-2px) + shadow-md hover-lift here; the
   v4.6.111 brand-spine rewrite higher up the file retired the lift (no
   transform, no box-shadow per .impeccable.md principle 5). Hover now
   underlines the h3 via the .staff-card:hover h3 rule above. */
a.staff-card {
  text-decoration: none;
  color: inherit;
}

/* =============================================================================
   SINGLE CLIENT STORY PAGE
   ============================================================================= */

/* --- Story Hero (branded gradient, inherits .page-hero) --- */
.story-hero.page-hero {
  text-align: center;
  padding-bottom: var(--space-3xl);
}

.story-hero .section-label {
  border-left: none;
  padding-left: 0;
  display: block;
  text-align: center;
  margin-bottom: var(--space-sm);
}

/* Hero inner — centered, stacked */
.story-hero-inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding-top: var(--space-lg);
}

.story-hero-photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto var(--space-lg);
  box-shadow: 0 8px 30px rgba(3, 56, 110, 0.18);
  border: 4px solid rgba(255, 255, 255, 0.25);
}

.story-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.story-hero-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.story-hero-name {
  font-family: var(--font-accent);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 var(--space-xs);
  line-height: 1.3;
}

.story-hero-location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-lg);
}

.story-hero-quote {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.story-hero-quote p {
  font-family: var(--font-accent);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* --- Story Narrative (single column) --- */
.story-narrative {
  padding: var(--space-2xl) 0;
}

.story-narrative-inner {
  max-width: 680px;
  margin: 0 auto;
}

.story-video-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-2xl);
}

.story-video-wrapper iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

.story-content {
  max-width: none;
}

/* --- More Stories --- */
.story-more {
  padding: var(--space-3xl) 0;
}

.story-more .section-label {
  border-left: none;
  padding-left: 0;
  display: block;
  text-align: center;
}

.story-more .section-title {
  text-align: center;
}

/* --- Story Responsive --- */
@media (max-width: 768px) {
  .story-hero.page-hero {
    padding-bottom: var(--space-xl);
  }

  .story-hero-inner {
    padding-top: var(--space-md);
  }

  .story-hero-photo {
    width: 140px;
    height: 140px;
  }

  .story-hero-name {
    font-size: 1.75rem;
  }

  .story-hero-quote p {
    font-size: 1.05rem;
  }

  .story-narrative {
    padding: var(--space-xl) 0;
  }
}

/* =============================================================================
   SINGLE JOB POSTING PAGE
   ============================================================================= */

/* .job-hero-meta block retired in v4.6.110 — the v4.6.34 single-mrc_job
   hero migration to shared content-hero.php passed meta as $meta_html
   into the hero partial, so these standalone .job-hero-meta-* rules
   became orphans. Template renders nothing matching these selectors. */

/* Staff/Board Hero Meta (white text on dark hero) */
.staff-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

.staff-hero-pronouns {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

.staff-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green-accent);
  background: rgba(255, 255, 255, 0.1);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.staff-hero-badge svg {
  color: var(--green-accent);
}

/* v4.6.110: deleted duplicate .job-posting-apply-top first definition
   (margin-bottom only) — the active rule with border-bottom lives
   below at the canonical position. */

.job-posting {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.job-posting-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-2xl);
  align-items: start;
}

/* v4.6.110 retirements (v4.6.34 hero migration killed these):
   - .job-posting-title (hero now renders the title via content-hero)
   - .job-posting-meta + .job-meta-item + svg (meta now in $meta_html) */

.job-posting-apply-top {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.job-posting-content {
  margin-bottom: var(--space-xl);
}

/* v4.6.110: deleted .job-posting-apply-bottom — no such class is
   rendered by the current single-mrc_job template. */

/* "How to Apply" surface (v4.6.110 brand-spine rebuild).
   Earlier treatment was a rounded-card-in-rounded-card anti-pattern:
   .job-apply-card was gray-50 bg + 1px gray-200 border + radius-lg +
   space-2xl padding, and .job-apply-instructions nested INSIDE it was
   white bg + 1px gray-200 border + radius-md. Forbidden by .impeccable.md
   principle 2 ("editorial voice over template thinking") — the apply
   surface is the single most prominent CTA on a job-applicant's path
   and was rendering as a template-y double card. Now a hairline-
   bracketed band with editorial typography (mirrors the v4.6.94
   .testimonial-card / .helpline-spotlight pattern). */
.job-apply-card {
  background: transparent;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  padding: var(--space-2xl) 0;
  margin-top: var(--space-2xl);
}

.job-apply-card h3 {
  /* v4.6.110: Franklin Gothic display heading (was --font-primary
     Avenir). h3 in an editorial card belongs to the display register. */
  font-family: var(--font-accent);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue-900);
  margin: 0 0 var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.job-apply-card h3 svg {
  /* v4.6.110: --blue-600 → --blue-900 (canonical navy; sub-shade retired). */
  color: var(--blue-900);
  flex-shrink: 0;
}

.job-apply-email {
  margin-bottom: var(--space-md);
}

.job-apply-email a {
  font-family: var(--font-accent);
  font-size: 1.25rem;
  font-weight: 700;
  /* v4.6.110: --blue-700 → --blue-900 (canonical navy; sub-shade retired). */
  color: var(--blue-900);
  text-decoration: none;
}

.job-apply-email a:hover,
.job-apply-email a:focus-visible {
  /* v4.6.110: --blue-800 → --blue-900 + underline-on-hover (canonical
     link affordance; sub-shade retired). */
  color: var(--blue-900);
  text-decoration: underline;
}

/* v4.6.110: dropped the nested white-card chrome (was bg + border +
   radius-md). Instructions now render as pure editorial prose,
   inheriting body typography from the surrounding band. */
.job-apply-instructions {
  margin-bottom: var(--space-lg);
}

.job-apply-instructions p {
  /* v4.6.110: --gray-600 → --fg2 (canonical secondary text token;
     bumped from 0.9rem → 1rem to meet the 18px body floor inside
     an editorial band). */
  font-size: 1rem;
  color: var(--fg2);
  line-height: 1.7;
  margin: 0 0 var(--space-sm);
}

.job-apply-instructions p:last-child {
  margin-bottom: 0;
}

/* v4.6.110: deleted .job-details-card — the sidebar uses
   .post-sidebar-block (flat hairline-divided pattern) since v4.6.34;
   no .job-details-card is rendered. */

.job-details-list {
  margin: 0;
  padding: 0;
}

.job-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) 0;
}

.job-detail + .job-detail {
  /* v4.6.110: --gray-200 → --hairline (canonical brand-spine token). */
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.job-detail dt {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-meta);
}

.job-detail dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gray-900);
}

/* More Openings */
.job-more {
  padding: var(--space-3xl) 0;
  background: var(--gray-50);
}

.job-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

@media (max-width: 1024px) {
  .job-posting-grid {
    grid-template-columns: 1fr;
  }

  .job-posting-sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .job-more-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .job-posting-title {
    font-size: 1.75rem;
  }

  .job-posting-meta {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .job-posting-sidebar {
    grid-template-columns: 1fr;
  }

  .job-more-grid {
    grid-template-columns: 1fr;
  }
}

.board-profile-org {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--gray-600);
}

.board-profile-org svg {
  flex-shrink: 0;
  color: var(--gray-400);
}

/* =============================================================================
   HOMEPAGE: IMPACT STORIES SPOTLIGHT
   ============================================================================= */

.stories-spotlight {
  padding: var(--space-4xl) 0;
  background: var(--gray-50);
}

.stories-spotlight-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.stories-spotlight-header .section-title {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Story spotlight grid — no card chrome. The shadowed white box was the
   last "card on tinted ground" on the page; with hero/pathways/policy/
   donate-close all moving to chromeless layouts, the spotlight content
   sits directly on the gray-50 section ground for a magazine spread feel. */
.stories-spotlight-card {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

/* Photo */
.stories-spotlight-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: var(--shadow-sm);
}

.stories-spotlight-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Quote */
.stories-spotlight-quote-wrap {
  position: relative;
  margin-bottom: var(--space-lg);
}

.stories-spotlight-quote {
  margin: 0;
  padding: 0;
  border: none;
  position: relative;
  z-index: 1;
}

.stories-spotlight-quote p {
  font-family: var(--font-accent);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  color: var(--blue-900);
  margin: 0;
}

/* Attribution */
.stories-spotlight-attribution {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--gray-200);
}

.stories-spotlight-attribution strong {
  font-size: 1.05rem;
  color: var(--gray-900);
}

.stories-spotlight-location {
  color: var(--fg-meta);
  font-size: 0.95rem;
}

.stories-spotlight-location::before {
  content: '\00b7';
  margin-right: var(--space-sm);
}

/* Excerpt */
.stories-spotlight-excerpt {
  color: var(--gray-600);
  line-height: 1.7;
  font-size: 1rem;
  margin-bottom: var(--space-xl);
}

/* Footer with actions + stat */
.stories-spotlight-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.stories-spotlight-actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 1024px) {
  .stories-spotlight-card {
    grid-template-columns: 280px 1fr;
    gap: var(--space-2xl);
  }
}

@media (max-width: 768px) {
  .stories-spotlight {
    padding: var(--space-3xl) 0;
  }

  .stories-spotlight-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-xl);
  }

  .stories-spotlight-photo {
    max-width: 240px;
    margin: 0 auto;
  }

  .stories-spotlight-quote p {
    font-size: 1.25rem;
  }

  .stories-spotlight-attribution {
    justify-content: center;
    border-bottom: none;
    padding-bottom: 0;
  }

  .stories-spotlight-footer {
    flex-direction: column;
    align-items: center;
  }

  .stories-spotlight-actions {
    flex-direction: column;
  }
}

/* =============================================================================
   HOMEPAGE: SIMPLIFIED POLICY SECTION
   ============================================================================= */

.policy-simple {
  background: var(--cream);
  padding: 5rem 0;
}

.policy-simple-content {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.policy-simple-content h2 {
  font-family: var(--font-primary);
  font-size: 2rem;
  margin-bottom: var(--space-md);
}

.policy-simple-content p {
  font-size: 1.1rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

/* =============================================================================
   CARD BASE SYSTEM
   ============================================================================= */

.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  transition: transform 0.2s var(--ease-out, ease-out), box-shadow 0.2s var(--ease-out, ease-out);
}

.card--elevated {
  box-shadow: var(--shadow-md);
}

.card--interactive:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: var(--shadow-lg);
}

.card--featured {
  border-top: 3px solid var(--blue-600);
  padding: var(--space-2xl);
}

/* =============================================================================
   ASPECT RATIO UTILITIES
   ============================================================================= */

.aspect-hero { aspect-ratio: 21/9; object-fit: cover; border-radius: var(--radius-md); }
.aspect-landscape { aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); }
.aspect-portrait { aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-md); }
.aspect-wide { aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-md); }

/* =============================================================================
   FOOTER REFINEMENTS
   ============================================================================= */

.footer-signoff {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-sm);
}

.footer-tax {
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  opacity: 0.5;
}

/* Responsive */
@media (max-width: 1024px) {
  .staff-more .staff-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .staff-profile-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .staff-profile-photo-col {
    position: static;
    max-width: 250px;
    margin: 0 auto;
  }

  .staff-profile-name {
    font-size: 1.75rem;
    text-align: center;
  }

  .staff-profile-title {
    text-align: center;
  }

  .staff-profile-pronouns {
    display: block;
    text-align: center;
  }

  .staff-more .staff-grid {
    grid-template-columns: 1fr;
    max-width: 300px;
    margin: var(--space-xl) auto 0;
  }
}

/* =============================================================================
   DONATE PAGE
   Pre-spine chrome stripped (navy→teal gradient, rounded-card grid,
   decorative SVGs, dashed-border placeholder, centered axes). Editorial
   composition built next in /layout (shared hero + impact spine + Stories
   testimonial + receipts strip + flat sidebar). Block stays minimal until
   those steps run.
   ============================================================================= */

/* Form Section */
.donate-form-section {
  padding: var(--space-3xl) 0;
  background: var(--white);
}

.donate-form-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-3xl);
  align-items: start;
}

.donate-form-heading {
  font-family: var(--font-primary);
  font-size: 1.65rem;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

.donate-form-intro {
  color: var(--gray-600);
  margin-bottom: var(--space-xl);
  font-size: 1.05rem;
}

.donate-form-embed {
  min-height: 200px;
  margin-bottom: var(--space-lg);
}

.donate-form-placeholder {
  padding: var(--space-2xl) 0;
}

.donate-form-placeholder h3 {
  font-size: 1.1rem;
  color: var(--fg2);
  margin-bottom: var(--space-sm);
}

.donate-form-placeholder p {
  font-size: 0.9rem;
  color: var(--fg-meta);
  max-width: 400px;
  line-height: 1.6;
}

.donate-form-note {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
  color: var(--fg-meta);
}

/* Sidebar — flat (card chrome stripped; /layout adds hairline dividers) */
.donate-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.donate-sidebar-card h3 {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-md);
}

.donate-other-ways {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.donate-other-ways li {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.donate-other-ways li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.donate-other-ways strong {
  display: block;
  font-size: 0.9rem;
  color: var(--gray-900);
  margin-bottom: var(--space-xs);
}

.donate-other-ways p {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
  white-space: pre-line;
}

.donate-tax-card p {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* Impact Section */
.donate-impact {
  padding: var(--space-3xl) 0;
  background: var(--gray-50);
}

.donate-impact-grid {
  margin-top: var(--space-2xl);
}

.donate-impact-amount {
  display: block;
  font-family: var(--font-accent);
  font-size: 2rem;
  font-weight: 700;
  color: var(--blue-700);
  margin-bottom: var(--space-md);
}

.donate-impact-desc {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* Testimonial */
.donate-testimonial {
  padding: var(--space-3xl) 0;
  background: var(--white);
}

.donate-testimonial-card {
  max-width: 700px;
  margin: 0 auto;
}

.donate-testimonial-card blockquote p {
  font-family: var(--font-accent);
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--gray-800);
  margin-bottom: var(--space-lg);
}

.donate-testimonial-card cite {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--gray-600);
  display: block;
}

/* Trust Strip */
.donate-trust {
  padding: var(--space-2xl) 0;
  background: var(--gray-50);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.donate-trust-grid {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.donate-trust-badge {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg2);
}

/* Responsive */
@media (max-width: 1024px) {
  .donate-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .donate-form-section,
  .donate-impact,
  .donate-receipts,
  .donate-testimonial {
    padding: var(--space-2xl) 0;
  }

  .donate-trust-grid,
  .donate-trust-list {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }

  .donate-impact-link {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-md) 0;
  }

  .donate-impact-cue {
    grid-column: 2;
    align-self: start;
    font-size: 0.85rem;
  }

  .donate-receipts-list {
    flex-direction: column;
    gap: var(--space-lg);
    padding-block: var(--space-lg);
  }

  .donate-quote {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .donate-quote-photo {
    max-width: 320px;
  }

  .donate-quote-text {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }
}

/* --- Donate: impact spine (hairline-numbered editorial list) ---
   Mirrors .partners-featured-list / .ac-actions-list discipline.
   Dollar amount is the visual lead; each row scrolls to #donate-form. */
.donate-impact-header {
  max-width: 720px;
  margin-bottom: var(--space-2xl);
}

.donate-impact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.donate-impact-item {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.donate-impact-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-md) clamp(var(--space-md), 3vw, var(--space-2xl));
  align-items: baseline;
  padding: var(--space-lg) var(--space-xs);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s var(--ease-out, ease-out), color 0.2s var(--ease-out, ease-out);
}

.donate-impact-link:hover,
.donate-impact-link:focus-visible {
  background-color: rgba(3, 56, 110, 0.03);
  color: var(--blue-900);
}

.donate-impact-amount {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(2rem, 3vw + 1rem, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--blue-900);
  min-width: 4ch;
  align-self: center;
  transition: color 0.2s var(--ease-out, ease-out);
}

.donate-impact-link:hover .donate-impact-amount,
.donate-impact-link:focus-visible .donate-impact-amount {
  color: var(--green-accent, #47ab47);
}

.donate-impact-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.donate-impact-desc {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fg2);
  max-width: 56ch;
}

.donate-impact-cue {
  align-self: center;
  font-family: var(--font-accent);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue-700);
  white-space: nowrap;
}

.donate-impact-link:hover .donate-impact-cue,
.donate-impact-link:focus-visible .donate-impact-cue {
  color: var(--blue-900);
}

/* --- Donate: receipts stat strip (hairline-bracketed real outcomes) --- */
.donate-receipts {
  padding: var(--space-2xl) 0;
  background: var(--white);
}

.donate-receipts-list {
  display: flex;
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  justify-content: space-between;
  align-items: flex-start;
  max-width: 960px;
  margin: 0 auto;
  list-style: none;
  padding-block: var(--space-xl);
  padding-inline: 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.donate-receipts-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}

.donate-receipts-num {
  font-family: var(--font-accent);
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--blue-900);
  font-variant-numeric: tabular-nums;
}

.donate-receipts-label {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--fg2);
  max-width: 30ch;
}

/* --- Donate: asymmetric testimonial (Stories .story-feature register) --- */
.donate-quote {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}

.donate-quote-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.donate-quote-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.donate-quote-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.donate-quote-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.donate-quote-text {
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  margin: 0;
  text-wrap: balance;
}

.donate-quote-text p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.donate-quote-cite {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--fg-meta);
  font-style: normal;
  display: block;
}

/* --- Donate: flat sidebar blocks (card chrome stripped, hairline dividers) --- */
.donate-sidebar-block {
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.donate-sidebar-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.donate-sidebar-block + .donate-sidebar-block {
  padding-top: var(--space-xl);
}

.donate-sidebar-heading {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--space-md);
}

.donate-sidebar-eyebrow {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-meta);
  display: block;
  margin-bottom: var(--space-sm);
}

.donate-sidebar-tax {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--fg2);
  margin: 0 0 var(--space-md);
}

.donate-sidebar-link {
  font-size: 0.85rem;
}

/* --- Donate: trust strip (text-only, optional links) --- */
.donate-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.donate-trust-item {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg2);
}

.donate-trust-link {
  color: var(--blue-700);
  text-decoration: none;
}

.donate-trust-link:hover,
.donate-trust-link:focus-visible {
  text-decoration: underline;
  color: var(--blue-900);
}

/* --- Donate: form fallback (when no embed, but _mrc_donate_form_url is set) --- */
.donate-form-fallback {
  padding: var(--space-xl) 0;
}

.donate-form-fallback-note {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  color: var(--fg-meta);
}

/* =============================================================================
   GET INVOLVED PAGE
   ============================================================================= */

/* Ways to Get Involved — hairline-divided list (matches priority-issues
   pattern: row link, body, arrow cue). Donate row carries primary visual
   weight via the .involve-ways-item--primary modifier. */
.involve-ways {
  padding: var(--space-4xl) 0;
  background: var(--white);
}

.involve-ways-list {
  list-style: none;
  padding: 0;
  margin: 0;
  /* v4.6.121: single-column max-width:960px replaced with a 2-column
     grid. Row dividers come from border-top on the list (above the
     first row) + border-bottom on each item (below every row) — same
     hairline-rhythm pattern shipped on .careers-benefits-list in
     v4.6.120, which reads cleanly across asymmetric last-rows (odd
     count) without empty-cell visual gaps. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-2xl);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.involve-ways-item {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

/* Mobile: collapse to single column at ≤820px (slightly higher
   breakpoint than careers-benefits' 720px because each item has a
   3-column internal layout — icon + body + arrow-link cue — that
   needs more horizontal room to breathe than the careers items'
   2-element title+description). Below ~410px-per-column the cue
   (which has white-space: nowrap) starts crowding the title. */
@media (max-width: 820px) {
  .involve-ways-list {
    grid-template-columns: 1fr;
  }
}

.involve-ways-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-md) clamp(var(--space-md), 3vw, var(--space-2xl));
  align-items: center;
  padding: var(--space-lg) var(--space-xs);
  text-decoration: none;
  color: inherit;
  background: none;
  border: 0;
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease-out, ease-out),
    color 0.2s var(--ease-out, ease-out);
}

.involve-ways-link:hover,
.involve-ways-link:focus-visible {
  background-color: rgba(3, 56, 110, 0.03);
  color: var(--blue-900);
  outline: none;
}

.involve-ways-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--blue-900);
}

.involve-ways-icon svg {
  width: 100%;
  height: 100%;
}

.involve-ways-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.involve-ways-title {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--blue-900);
}

/* Modal-trigger row gets ↗ (opens elsewhere) instead of → (page nav). */
.involve-ways-item--modal .involve-ways-cue::after {
  content: '↗';
}

.involve-ways-desc {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg2, var(--gray-700));
  max-width: 62ch;
}

.involve-ways-cue {
  align-self: center;
  color: var(--blue-700);
  font-weight: 600;
  white-space: nowrap;
}

.involve-ways-link:hover .involve-ways-cue,
.involve-ways-link:focus-visible .involve-ways-cue {
  color: var(--green-accent, #47ab47);
}

/* ── Social Channels Modal ── */
.social-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out, ease-out), visibility 0.25s var(--ease-out, ease-out);
}

.social-modal.is-active {
  visibility: visible;
  opacity: 1;
}

.social-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 56, 110, 0.6);
  backdrop-filter: blur(4px);
}

.social-modal-content {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  max-width: 480px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(3, 56, 110, 0.35);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.25s var(--ease-out, ease-out);
}

.social-modal.is-active .social-modal-content {
  transform: translateY(0) scale(1);
}

.social-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.social-modal-header h3 {
  font-family: var(--font-primary);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.social-modal-close {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--gray-400);
  border-radius: var(--radius-sm);
  transition: color 0.2s, background 0.2s;
  line-height: 0;
}

.social-modal-close:hover {
  color: var(--fg2);
  background: var(--gray-100);
}

.social-modal-desc {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.social-modal-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.social-modal-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--fg2);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
}

.social-modal-link:hover {
  background: var(--white);
  border-color: var(--blue-brand);
  color: var(--blue-brand);
  transform: translateY(-1px);
}

.social-modal-link-icon {
  flex-shrink: 0;
  line-height: 0;
}

.social-modal-link-icon svg {
  width: 24px;
  height: 24px;
}

.social-modal-link-name {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Responsive — single column on small screens */
@media (max-width: 480px) {
  .social-modal-links {
    grid-template-columns: 1fr;
  }

  .social-modal-content {
    padding: var(--space-xl);
  }
}

/* Testimonial */
.involve-testimonial {
  padding: var(--space-3xl) 0;
  background: var(--white);
}

.involve-testimonial-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.involve-testimonial-icon {
  color: var(--blue-600);
  opacity: 0.2;
  margin-bottom: var(--space-md);
}

.involve-testimonial-card blockquote p {
  font-family: var(--font-accent);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--gray-800);
  margin-bottom: var(--space-lg);
}

.involve-testimonial-card cite {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--gray-600);
  display: block;
}

/* Newsletter */
.involve-newsletter {
  padding: var(--space-3xl) 0;
  background: var(--blue-50);
}

.involve-newsletter-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3xl);
  max-width: 960px;
  margin: 0 auto;
}

.involve-newsletter-content {
  flex: 1 1 auto;
  min-width: 0;
}

.involve-newsletter-content h2 {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

.involve-newsletter-content p {
  color: var(--gray-600);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* Compact newsletter form on light blue-50 ground — override the dark-context
   defaults inherited from .mrc-newsletter--compact (designed for navy bgs).
   Explicit width so the form holds a fixed slot in the row instead of
   growing to consume the content side. */
.involve-newsletter-card .mrc-newsletter--compact {
  width: 420px;
  flex-shrink: 0;
}

.involve-newsletter-card .mrc-newsletter--compact input[type="email"] {
  border-color: var(--gray-300);
  background: var(--white);
  color: var(--gray-800);
  min-width: 260px;
}

.involve-newsletter-card .mrc-newsletter--compact input[type="email"]::placeholder {
  color: var(--gray-400);
}

.involve-newsletter-card .mrc-newsletter--compact input[type="email"]:focus {
  background: var(--white);
}

/* Partners — single editorial line before the close */
.involve-partners {
  padding: var(--space-2xl) 0;
  background: var(--white);
  text-align: center;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.involve-partners-line {
  margin: 0 auto;
  max-width: 720px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg2, var(--gray-700));
}

.involve-partners-link {
  color: var(--blue-900);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
  margin-left: 0.25em;
}

.involve-partners-link::after {
  content: ' →';
}

.involve-partners-link:hover,
.involve-partners-link:focus-visible {
  text-decoration-thickness: 2px;
}

/* Responsive */
@media (max-width: 1024px) {
  .involve-newsletter-card {
    flex-direction: column;
    text-align: center;
    gap: var(--space-xl);
  }

  .involve-newsletter-card .mrc-newsletter--compact {
    width: 100%;
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  .involve-ways-link {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-md) 0;
  }

  .involve-ways-cue {
    grid-column: 2;
    align-self: start;
    font-size: 0.9rem;
  }
}

/* =============================================================================
   VOLUNTEER PAGE
   Pre-spine chrome stripped (navy→teal gradient hero, hero-metric dark
   stat band, rounded-card sidebar + nested training-highlight card,
   2-up green-checkmark fit grid, decorative testimonial SVG, italic
   blockquote, centered axes). Editorial composition built next in
   /layout (shared hero + receipts strip + flat sidebar + hairline fit
   list + asymmetric testimonial). Block stays minimal until then.
   ============================================================================= */

/* About Section */
.vol-about {
  padding: var(--space-3xl) 0;
  background: var(--white);
}

.vol-about-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-3xl);
  align-items: start;
}

.vol-about-main h2 {
  font-size: 1.65rem;
  color: var(--gray-900);
  margin-bottom: var(--space-xl);
  line-height: 1.3;
}

.vol-about-text p {
  color: var(--fg2);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

/* Apply block typography (card chrome stripped; /layout rebuilds as flat .vol-sidebar-block) */
.vol-apply-card h3 {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-md);
}

.vol-apply-card p {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.vol-apply-email {
  font-size: 0.85rem;
}

.vol-apply-email a {
  color: var(--blue-700);
  text-decoration: none;
  font-weight: 600;
}

.vol-apply-email a:hover {
  text-decoration: underline;
}

/* Training block typography (card chrome + nested highlight card stripped) */
.vol-training-card h3 {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-md);
}

.vol-training-card p {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.vol-training-highlight strong {
  display: block;
  color: var(--blue-800);
  margin-bottom: var(--space-xs);
}

.vol-contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue-700);
  text-decoration: none;
}

.vol-contact-link:hover {
  text-decoration: underline;
}

/* Good Fit Section */
.vol-fit {
  padding: var(--space-3xl) 0;
  background: var(--gray-50);
}

.vol-fit-card {
  max-width: 800px;
  margin: 0 auto;
}

.vol-fit-card h2 {
  font-size: 1.65rem;
  color: var(--gray-900);
  margin-bottom: var(--space-xl);
}

/* Testimonial wrapper (card composition rebuilt as asymmetric .vol-quote in /layout) */
.vol-testimonial {
  padding: var(--space-3xl) 0;
  background: var(--white);
}

.vol-testimonial-card blockquote p {
  font-family: var(--font-accent);
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--gray-800);
  margin-bottom: var(--space-lg);
}

.vol-testimonial-card cite {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--gray-600);
  display: block;
}

/* Responsive */
@media (max-width: 1024px) {
  .vol-about-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .vol-about,
  .vol-fit,
  .vol-testimonial,
  .vol-receipts {
    padding: var(--space-2xl) 0;
  }

  .vol-receipts-list {
    flex-direction: column;
    gap: var(--space-lg);
    padding-block: var(--space-lg);
  }

  .vol-quote {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .vol-quote-photo {
    max-width: 320px;
  }

  .vol-quote-text {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }
}

/* --- Volunteer: stats receipts strip (hairline-bracketed) ---
   Mirrors .donate-receipts-list discipline. Light-mode replacement
   for the legacy dark hero-metric stat band. */
.vol-receipts {
  padding: var(--space-2xl) 0;
  background: var(--white);
}

.vol-receipts-list {
  display: flex;
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  justify-content: space-between;
  align-items: flex-start;
  max-width: 960px;
  margin: 0 auto;
  list-style: none;
  padding-block: var(--space-xl);
  padding-inline: 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.vol-receipts-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}

.vol-receipts-num {
  font-family: var(--font-accent);
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--blue-900);
  font-variant-numeric: tabular-nums;
}

.vol-receipts-label {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--fg2);
  max-width: 30ch;
}

.vol-receipts-asof {
  margin: var(--space-md) auto 0;
  max-width: 960px;
  font-size: 0.85rem;
  color: var(--fg-meta);
  text-align: left;
}

/* --- Volunteer: flat sidebar blocks (card chrome stripped) --- */
.vol-sidebar-block {
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.vol-sidebar-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.vol-sidebar-block + .vol-sidebar-block {
  padding-top: var(--space-xl);
}

.vol-sidebar-eyebrow {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-meta);
  display: block;
  margin-bottom: var(--space-sm);
}

.vol-sidebar-heading {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--space-md);
}

.vol-sidebar-body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fg2);
  margin: 0 0 var(--space-md);
}

.vol-sidebar-meta {
  font-size: 0.85rem;
  color: var(--fg-meta);
  margin: 0 0 var(--space-md);
}

.vol-sidebar-meta a {
  color: var(--blue-700);
  text-decoration: none;
  font-weight: 600;
}

.vol-sidebar-meta a:hover,
.vol-sidebar-meta a:focus-visible {
  text-decoration: underline;
}

.vol-sidebar-callout {
  font-size: 0.9rem;
  color: var(--fg2);
  line-height: 1.6;
  margin: 0 0 var(--space-md);
}

.vol-sidebar-callout strong {
  display: block;
  color: var(--blue-800);
  margin-bottom: var(--space-xs);
}

.vol-sidebar-cta {
  display: block;
  text-align: center;
  width: 100%;
}

.vol-sidebar-link {
  font-size: 0.85rem;
  color: var(--blue-700);
  text-decoration: none;
  font-weight: 600;
}

.vol-sidebar-link:hover,
.vol-sidebar-link:focus-visible {
  text-decoration: underline;
}

/* --- Volunteer: flat hairline fit list (static, no link wrapper) ---
   Mirrors .partners-featured-list discipline minus the link state. */
.vol-fit-header {
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
}

.vol-fit-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.vol-fit-item {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--fg2);
}

/* --- Volunteer: asymmetric testimonial (Stories .story-feature register) --- */
.vol-quote {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}

.vol-quote-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.vol-quote-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vol-quote-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vol-quote-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.vol-quote-text {
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  margin: 0;
  text-wrap: balance;
}

.vol-quote-text p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.vol-quote-cite {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--fg-meta);
  font-style: normal;
  display: block;
}

/* Footer Logo Image */
.footer-logo-img {
  max-height: 50px;
  width: auto;
}

/* v4.6.129: filter-invert now scoped to the fallback modifier class
   (was unconditionally applied to .footer-logo-img). When the native
   white-variant logo is available (Customize → Site Identity → "Logo
   — White Variant"), the .--white modifier renders without the
   filter — cleaner edges, no anti-aliasing artifacts, proper
   multi-color support. The .--filter-invert modifier preserves the
   legacy behavior (brightness:0 + invert turns any opaque artwork
   white) for sites that haven't uploaded the white-variant yet. */
.footer-logo-img--filter-invert {
  filter: brightness(0) invert(1);
}

/* Mobile menu header logo — same dual-variant pattern as the
   footer above. Sized to fit the mobile-nav-header band while
   leaving room for the close button on the right. */
.mobile-nav-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.mobile-nav-logo-img {
  max-height: 36px;
  width: auto;
  display: block;
}

.mobile-nav-logo-img--filter-invert {
  filter: brightness(0) invert(1);
}

/* =============================================================================
   POLICY: ACTIVITY FEED
   ============================================================================= */

.policy-activity {
  padding: var(--space-3xl) 0;
  background: var(--white);
}

/* Centered header — same discipline as priority-issues + resource-library.
   The framing subtitle below the h2 tells readers that this feed mixes
   three post types and is date-ordered (helps/docs gap from the critique). */
.policy-activity-header {
  max-width: 720px;
  margin: 0 auto var(--space-2xl);
  text-align: center;
}

.policy-activity-header .section-subtitle {
  margin-left: auto;
  margin-right: auto;
  max-width: 56ch;
}

.policy-activity-feed {
  display: flex;
  flex-direction: column;
}

.policy-activity-footer {
  margin: var(--space-xl) 0 0;
  text-align: center;
}

.policy-activity-see-all {
  display: inline-block;
}

.policy-activity-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--gray-200);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s var(--ease-out, ease-out);
}

.policy-activity-item:first-child {
  padding-top: var(--space-md);
}

.policy-activity-item:last-child {
  border-bottom: none;
}

.policy-activity-item:hover {
  background: var(--gray-50);
  margin: 0 calc(var(--space-md) * -1);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  border-radius: var(--radius-sm);
}

.policy-activity-item .news-tag {
  flex-shrink: 0;
  font-size: 0.75rem;
  min-width: 100px;
  text-align: center;
}

.policy-activity-title {
  flex: 1;
  font-weight: 600;
  color: var(--gray-900);
  font-size: 0.95rem;
}

/* External-link indicator for media-hit rows. Hooked on the `target` attribute
   so no extra class is needed and the cue can never desync from the actual
   link behavior. Quiet muted-gray glyph trailing the headline, in the same
   register as `.news-tag` — does not introduce a colored badge variant
   (color-coded badges were retired in v4.6.30/v4.6.44). Screen readers get
   the "(opens in a new tab)" hint from the `.screen-reader-text` span. */
.policy-activity-item[target="_blank"] .policy-activity-title::after {
  content: " \2197"; /* ↗ — north-east arrow, U+2197 */
  color: var(--fg-meta);
  font-weight: 400;
  font-size: 0.85em;
  margin-left: 0.15em;
}

.policy-activity-item time {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--fg-meta);
}

@media (max-width: 768px) {
  /* Activity feed: compact with accent border */
  .policy-activity {
    padding: var(--space-xl) 0;
  }

  .policy-activity-header {
    margin-bottom: var(--space-lg);
  }

  .policy-activity-item {
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-1);
  }

  .policy-activity-item:hover {
    background: var(--bg-navy-soft);
  }

  .policy-activity-title {
    flex-basis: 100%;
    order: -1;
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .policy-activity-item .news-tag {
    min-width: auto;
    font-size: 0.75rem;
  }

  .policy-activity-item time {
    font-size: 0.8rem;
  }
}

/* =============================================================================
   POLICY: SERIES SPOTLIGHT
   ============================================================================= */

.policy-series-spotlight {
  padding: var(--space-4xl) 0;
  background: var(--gray-50);
}

/* Left-aligned header matches the asymmetric 60/40 grid below — a centered
   header above an asymmetric grid created visual whiplash (the eye reads
   "symmetric" at the top, then "asymmetric" below). Constrain the header
   to the featured column's approximate width so the subtitle doesn't run
   the full page width on wide viewports. */
.policy-series-header {
  max-width: 72ch;
  margin: 0 0 var(--space-2xl);
  text-align: left;
}

.policy-series-header .section-subtitle {
  margin: 0;
  max-width: 56ch;
}

/* Asymmetric 60/40 composition: one featured series (photo + italic pullquote
   + meta) on the left, a quiet hairline-ruled list of siblings on the right.
   No card chrome, no placeholder SVGs, no hover-lift shadows — editorial
   discipline consistent with `.pathways-secondary` on Get Help and the
   homepage's `.policy-lede`. Gap widened from `xl→3xl` to `2xl→4xl` so the
   two reading columns breathe apart. */
.policy-series-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(var(--space-2xl), 5vw, var(--space-4xl));
  align-items: start;
}

.policy-series-featured {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  text-decoration: none;
  color: inherit;
}

/* v4.6.146: dropped the forced 3:2 aspect-ratio + object-fit:cover crop.
   Earlier rationale ("magazine feature spread shape") cropped uploaded
   images that weren't a 3:2 source — particularly taller / wider posters
   were getting trimmed to fit the box. Now the image renders at its
   natural aspect ratio (width: 100%, height: auto) so editors see what
   they uploaded. Tradeoff: rendered heights vary across series in the
   spotlight slot, but image fidelity wins over visual-rhythm uniformity.
   overflow:hidden retained so the hover scale transform clips cleanly;
   background color stays as a load-time placeholder. */
.policy-series-featured-image {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--blue-50);
}

.policy-series-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s var(--ease-out, ease-out);
}

.policy-series-featured:hover .policy-series-featured-image img,
.policy-series-featured:focus-visible .policy-series-featured-image img {
  transform: scale(1.02);
}

/* Internal rhythm: topic→title is tight (kicker + masthead belong together);
   title→pullquote is generous (pullquote is the emotional beat, it wants
   air); pullquote→cue is generous (the cue is the call, not a footnote).
   Using explicit margins on each element instead of a single `gap` so the
   rhythm varies. */
.policy-series-featured-content {
  display: flex;
  flex-direction: column;
}

.policy-series-featured-topic {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-700);
  margin: 0 0 var(--space-xs);
}

.policy-series-featured-title {
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 1vw + 1.25rem, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  margin: 0 0 var(--space-lg);
  text-wrap: balance;
}

.policy-series-featured-pullquote {
  margin: 0 0 var(--space-xl);
  padding: 0;
  border: 0;
}

.policy-series-featured-pullquote p {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(1.1rem, 0.5vw + 1rem, 1.3rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg2);
  text-wrap: balance;
}

.policy-series-featured-cue {
  margin: 0;
  color: var(--blue-700);
  font-weight: 600;
}

/* Sidebar column anchor — the small kicker above the list gives the right
   column its own visual entry point, baselining with the featured topic
   kicker on the left. Without this, the list feels "floating" next to the
   content-heavy featured column. */
.policy-series-sidebar {
  display: flex;
  flex-direction: column;
}

.policy-series-list-label {
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-700);
  margin-bottom: var(--space-md);
}

.policy-series-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.policy-series-list-item {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.policy-series-list-item a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--space-xs) var(--space-md);
  align-items: baseline;
  padding: var(--space-lg) 0;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s var(--ease-out, ease-out);
}

.policy-series-list-item a:hover,
.policy-series-list-item a:focus-visible {
  color: var(--blue-700);
}

.policy-series-list-topic {
  grid-column: 1 / 2;
  grid-row: 1;
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-700);
}

.policy-series-list-title {
  grid-column: 1 / 2;
  grid-row: 2;
  font-family: var(--font-accent);
  font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  text-wrap: balance;
}

.policy-series-list-date {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fg-meta);
  white-space: nowrap;
}

@media (max-width: 960px) {
  .policy-series-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

@media (max-width: 640px) {
  .policy-series-spotlight {
    padding: var(--space-2xl) 0;
  }

  .policy-series-header {
    margin-bottom: var(--space-lg);
  }

  .policy-series-featured-image {
    aspect-ratio: 3 / 2;
  }

  .policy-series-list-item a {
    padding: var(--space-md) 0;
  }
}

/* =============================================================================
   POLICY: PAGE HERO (scoped)
   =============================================================================
   Replaces the shared `.page-hero` gradient used by 17 single-template files.
   The hero's emotional anchor is the *latest publication spotlight* — a
   clickable block that surfaces the most recently published resource /
   press release / policy series. Title of that piece gets the big italic
   Franklin Gothic treatment the pullquote used to hold. */

.policy-hero {
  background: var(--blue-900);
  color: var(--white);
  /* Trimmed from 4–6.5rem / 3.5–5.5rem. The hero is type-only with no
     imagery — the prior padding gave it more vertical real estate than
     its content earned. The navy→cream section transition handles the
     bottom boundary; no internal terminus rule needed. */
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 4rem);
  position: relative;
  overflow: hidden;
}

.policy-hero-watermark {
  position: absolute;
  top: 50%;
  right: clamp(-1rem, -2vw, -3rem);
  transform: translateY(-50%);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(5rem, 13vw, 13rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  text-align: right;
}

@media (max-width: 720px) {
  .policy-hero-watermark {
    display: none;
  }
}

/* Mobile-first: a single column stack — masthead, then (when present)
   the publication spotlight beneath a hairline. Per-child margins inside
   the masthead handle rhythm; spotlight gets its own top hairline below.
   On desktop (≥960px, when a spotlight exists) this becomes a two-column
   editorial grid — see the breakpoint at the bottom of this block. */
.policy-hero-inner {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.policy-hero-masthead {
  display: flex;
  flex-direction: column;
}

.policy-hero-masthead > *:first-child {
  margin-top: 0;
}

.policy-hero-eyebrow {
  font-family: var(--font-primary);
  /* Eyebrow/topic-tag register across the page: 0.8rem for featured moments
     (hero, featured series), 0.72rem for row metadata. All 0.08em tracked. */
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
  /* Entrance cascade — eyebrow leads, then h1, spotlight, subtitle each
     fade up 100ms behind the prior. `prefers-reduced-motion` is honored
     by the global zero-duration reset at main.css:3469 — no scoped opt-out
     needed. Reuses the existing `heroFadeUp` keyframe from the homepage
     hero so the page family shares one motion vocabulary. */
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
}

/* Mobile-first heading: italic Franklin Gothic masthead identifier —
   terse, low-weight, hands off prominence to the stacked spotlight
   below. Desktop (≥960px) grows the heading into its own grid column
   so it stops being outranked by the spotlight title — see the override
   in the desktop breakpoint at the bottom of this block. */
.policy-hero-heading {
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 0.5vw + 1.35rem, 1.75rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--white);
  /* Tight to the eyebrow — label + heading belong together as masthead. */
  margin: var(--space-sm) 0 0;
  text-wrap: balance;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 100ms;
}

/* Publication spotlight — the hero's news anchor. On mobile, a 1px top
   white-alpha hairline divides masthead-above from lead-story-below. On
   desktop the hairline rotates to a left edge (see the breakpoint
   override) so the spotlight reads as a column rule beside the masthead.
   Either way the lime kicker and CTA carry the "featured" editorial
   signal. Internal rhythm is varied: kicker → title is tight, title →
   excerpt opens up, excerpt → meta tightens again. */
.policy-hero-spotlight {
  display: flex;
  flex-direction: column;
  /* Generous separation from the masthead block above via margin + padding
     above the hairline. The hairline divides the masthead (eyebrow + h1 +
     subtitle) from the lead story (the spotlight). */
  margin: var(--space-2xl) 0 0;
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  text-decoration: none;
  color: inherit;
  /* Border color is the only hover-state property — `border-color` shorthand
     covers both the mobile top hairline and the desktop left rule. The prior
     `translateX(2px)` slide on hover was retired here to align with the
     brand-spine direction (no-hover-lift, established in v4.6.21); the
     hairline brightening is the affordance. */
  transition: border-color 0.2s var(--ease-out, ease-out);
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 300ms;
}

.policy-hero-spotlight:hover,
.policy-hero-spotlight:focus-visible {
  outline: none;
  border-top-color: rgba(255, 255, 255, 0.3);
}

.policy-hero-spotlight-kicker {
  display: inline-block;
  font-family: var(--font-primary);
  /* Parallel register to the hero eyebrow (0.8rem / 0.08em) — both are
     structural labels announcing a section of the page. */
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* Lime, not brand kelly. AAA-contrast pick on the navy ground —
     `--kelly` (#47ab47) drops below AA against `--blue-900`, while
     `--lime-accent` (#a8d159) clears AAA at this size. Do not "fix"
     this back to brand kelly without re-running contrast against the
     hero ground. */
  color: var(--lime-accent, #a8d159);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-sm);
}

/* The biggest typographic moment on the page — the lead story of the
   masthead-and-lead-story hero composition. Roman so it reads as a news
   headline (not a continuation of the h1's manifesto italic). Display
   scale: 36px @ 400px → 56px @ 1200px, ~1.5× the homepage h1's lower
   bound so the spotlight clearly leads while staying under the close
   section's bookend (40 → 72px). */
.policy-hero-spotlight-title {
  display: block;
  font-family: var(--font-accent);
  font-size: clamp(2.25rem, 2.6vw + 1.55rem, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--white);
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.policy-hero-spotlight-excerpt {
  display: block;
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 62ch;
  margin-top: var(--space-md);
}

.policy-hero-spotlight-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-top: var(--space-md);
}

.policy-hero-spotlight-type {
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}

/* Bumped from 0.95rem to 1.05rem — this is the actual call-to-click,
   not small-print footer text. Bold + lime keeps it as the hero's
   primary actionable moment. */
.policy-hero-spotlight-cta.arrow-link {
  color: var(--lime-accent, #a8d159);
  font-weight: 700;
  font-size: 1.05rem;
}

/* Sits in the masthead block right after the h1 — page-identity framing,
   not a post-spotlight afterthought. Tight margin-top so eyebrow + h1 +
   subtitle read as one cohesive 3-line identifier. */
.policy-hero-subtitle {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: var(--space-sm) 0 0;
  max-width: 58ch;
  animation: heroFadeUp 0.5s var(--ease-out, ease-out) both;
  animation-delay: 200ms;
}

@media (max-width: 720px) {
  .policy-hero-heading {
    margin-top: var(--space-xs);
  }
  .policy-hero-subtitle {
    /* Tight in the masthead block (eyebrow + h1 + subtitle) — same xs gap
       as eyebrow → h1 so the three lines feel like one unit. */
    margin-top: var(--space-xs);
    font-size: 1rem;
  }
  .policy-hero-spotlight {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
  }
  .policy-hero-spotlight-excerpt,
  .policy-hero-spotlight-meta {
    margin-top: var(--space-sm);
  }
  .policy-hero-spotlight-meta {
    gap: var(--space-xs) var(--space-md);
  }
}

/* Desktop: asymmetric 2-column editorial grid — masthead left, lead-story
   spotlight right, vertical hairline between. Editorial-advocacy register
   (ACLU / Marshall Project mastheads). The h1 grows into its own column
   so it competes with the spotlight title rather than ceding it; the
   spotlight title narrows so it leads the right column without
   overpowering the page identity. Empty state (no spotlight child)
   collapses to a single masthead column via `:has()`. */
@media (min-width: 960px) {
  .policy-hero-inner {
    max-width: var(--container-max);
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: start;
  }

  /* Without a spotlight, the masthead occupies the row and stays bounded
     to a comfortable reading column rather than stretching across the
     whole grid. */
  .policy-hero-inner:not(.has-spotlight) {
    grid-template-columns: 1fr;
  }
  .policy-hero-inner:not(.has-spotlight) .policy-hero-masthead {
    max-width: 60ch;
  }

  /* h1 grows into its own column — masthead identity reads as confidently
     as the lead-story headline. Italic Franklin Gothic preserved; this is
     a presence change, not a character change. */
  .policy-hero-heading {
    font-size: clamp(2.25rem, 3vw + 1.25rem, 3.25rem);
  }

  /* Spotlight no longer needs the top hairline divider — it has the
     vertical hairline on its left edge instead, which spans the column
     and reads as an editorial column rule. */
  .policy-hero-inner.has-spotlight .policy-hero-spotlight {
    margin-top: 0;
    padding-top: 0;
    padding-left: clamp(var(--space-xl), 3vw, var(--space-2xl));
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
  .policy-hero-inner.has-spotlight .policy-hero-spotlight:hover,
  .policy-hero-inner.has-spotlight .policy-hero-spotlight:focus-visible {
    border-top-color: transparent;
    border-left-color: rgba(255, 255, 255, 0.32);
  }

  /* Recalibrated for the right column — still the dominant element on
     its side, but no longer outranks the page h1. 28→40px range. */
  .policy-hero-spotlight-title {
    font-size: clamp(1.75rem, 1.6vw + 1.2rem, 2.5rem);
  }
}

/* =============================================================================
   POLICY: MEDIA INQUIRIES BLOCK
   =============================================================================
   Quiet editorial band that surfaces the press email + phone + a link to
   the Media Center. Not a card — type on a cream ground. Structurally a
   label column on the left, contact/link on the right. */

/* A single top hairline is enough of a transition from the newsletter band
   above — the navy close below handles the bottom boundary with its color
   shift. */
.media-inquiries {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
  background: var(--cream, var(--gray-50));
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

/* Two-column editorial split: [ heading ] [ body prose + arrow link ].
   Heading is small (footnote-register); body reads as a sentence with
   inline email + phone, not as a data-table row. */
.media-inquiries-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-3xl));
  align-items: baseline;
}

.media-inquiries-header {
  min-width: 0;
}

.media-inquiries-heading {
  font-family: var(--font-accent);
  /* Footnote register — deliberately smaller than a `.section-title`.
     This is press contact info, not a showcase section. */
  font-size: clamp(1.15rem, 0.3vw + 1.05rem, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  margin: 0;
}

.media-inquiries-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

/* Contact as prose: "Reach our press team at [email] or call [phone]."
   Email is a navy underlined link, phone is tabular-num bold inline —
   both sit inline in the sentence at body text size, no competing
   typographic weights. */
.media-inquiries-contact {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--fg1);
}

.media-inquiries-email {
  color: var(--blue-800);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease-out, ease-out);
}

.media-inquiries-email:hover,
.media-inquiries-email:focus-visible {
  color: var(--blue-900);
  text-decoration-thickness: 2px;
}

.media-inquiries-phone {
  font-weight: 600;
  color: var(--blue-800);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.media-inquiries-link {
  align-self: flex-start;
  font-size: 0.95rem;
}

@media (max-width: 720px) {
  .media-inquiries-inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    align-items: start;
  }
}

/* Policy page close consolidated into `.action-cta--receipts` (lines ~2653+).
   Asymmetric variant rules live with the receipts block; this section is
   intentionally empty so future closer-pattern updates happen in one place. */

/* =============================================================================
   POLICY: ISSUE ARCHIVE PAGE
   ============================================================================= */

/* v4.6.47: inline section TOC. Renders between the hero and the first
   content section on topic landing pages. Hairline-bracketed above +
   below; horizontal pill list on desktop, horizontal-scroll on mobile.
   Suppressed by PHP when only 1 section has content. Smooth-scroll
   from the global `html { scroll-behavior: smooth }` rule handles the
   anchor jumps; reduced-motion override at line ~3565 falls back to
   instant scroll. */
.issue-toc {
  padding: var(--space-md) 0;
  background: var(--white);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.issue-toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.issue-toc-list a {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue-900);
  text-decoration: none;
  padding: var(--space-xs) 0;
  position: relative;
  transition: color 0.2s var(--ease-out, ease-out);
}

.issue-toc-list a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--green-accent, #47ab47);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s var(--ease-out, ease-out);
}

.issue-toc-list a:hover::after,
.issue-toc-list a:focus-visible::after {
  transform: scaleX(1);
}

.issue-toc-list a:hover,
.issue-toc-list a:focus-visible {
  /* v4.6.115: --blue-700 → --blue-900 (canonical navy hover; the green
     underline already signals the affordance). */
  color: var(--blue-900);
}

/* Mobile: allow horizontal scroll if labels overflow rather than
   wrapping awkwardly. Wrap is still preferred at typical widths. */
@media (max-width: 480px) {
  .issue-toc .container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .issue-toc-list {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

.issue-overview {
  padding: var(--space-3xl) 0;
  background: var(--white);
}

/* v4.6.46: optional editor-controlled pull-quote above the Our
   Position prose. Lifts MRC's stance out of the body so it carries
   visual weight on the topic landing page. Mirrors the v4.6.36
   .post-pullquote register: Franklin Gothic 1.5–1.75rem navy, italic-
   weighted display, with a navy `\201C` glyph above. Max-width keeps
   it readable as a single short sentence. */
.issue-position-pullquote {
  margin: 0 0 var(--space-xl);
  padding: 0;
  border: 0;
  max-width: 800px;
}

.issue-position-pullquote::before {
  content: '\201C'; /* left double quotation mark */
  display: block;
  font-family: var(--font-accent);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 0.4;
  color: var(--blue-900);
  margin-bottom: var(--space-md);
  text-indent: -0.05em;
}

.issue-position-pullquote p {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  text-wrap: balance;
}

/* v4.6.116: .issue-overview-text rules retired. The term description
   moved to the hero subtitle (via content-hero's $subtitle arg) when
   the body section was restructured — the .issue-overview-text div
   no longer exists in taxonomy-mrc_policy_topic.php. */

/* v4.6.45 /distill: rounded blue-tinted card chrome retired.
   .issue-overview-callout was a `background: --blue-50; border: 1px solid
   --blue-200; border-radius: --radius-md` info card — the AI-template
   "tinted callout" pattern. Replaced with a flat hairline-bracketed
   block (top + bottom navy hairlines, no fill, no rounded corners). */
.issue-overview-callout {
  margin-top: var(--space-xl);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.issue-overview-callout p {
  margin: 0;
  /* v4.6.115: 0.95rem → 1rem to meet the 18px body floor. */
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg2);
}

.issue-overview-callout a {
  /* v4.6.115: --blue-700 → --blue-900 (canonical navy). */
  color: var(--blue-900);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.issue-overview-callout a:hover,
.issue-overview-callout a:focus-visible {
  text-decoration-thickness: 2px;
}

/* Issue Resources */
.issue-resources {
  padding: var(--space-4xl) 0;
  background: var(--gray-50);
}

.issue-resource-list {
  margin-top: var(--space-xl);
}

/* v4.6.45 /colorize: token sweep across the .issue-resource-* rules.
   - Borders --gray-200 → --hairline (navy-tinted, brand-spine canonical)
   - Title --gray-900 → --blue-900, hover originally --blue-600 → --blue-700
   - Excerpt --gray-600 → --fg2
   - Download link originally --blue-600 → --blue-700, added :focus-visible parity

   v4.6.115 follow-up: all --blue-700 hovers/links in this section were
   tightened to --blue-900 (the canonical hover navy post-v4.6.111
   staff/board pass). The v4.6.45 sweep stopped at --blue-700 because
   that was the convention then; the convention is now --blue-900
   + underline-on-hover for link affordance. */
.issue-resource-item {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.issue-resource-item:last-child {
  border-bottom: none;
}

.issue-resource-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.issue-resource-meta time {
  font-size: 0.85rem;
  color: var(--fg-meta);
}

.issue-resource-item h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-xs);
}

.issue-resource-item h3 a {
  color: var(--blue-900);
  text-decoration: none;
}

.issue-resource-item h3 a:hover,
.issue-resource-item h3 a:focus-visible {
  /* v4.6.115: --blue-700 → --blue-900 + underline (canonical hover). */
  color: var(--blue-900);
  text-decoration: underline;
}

.issue-resource-excerpt {
  font-size: 0.9rem;
  color: var(--fg2);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

.issue-resource-download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.85rem;
  font-weight: 600;
  /* v4.6.115: --blue-700 → --blue-900 (canonical navy). */
  color: var(--blue-900);
  text-decoration: none;
}

.issue-resource-download:hover,
.issue-resource-download:focus-visible {
  text-decoration: underline;
}

.issue-view-all {
  margin-top: var(--space-xl);
  text-align: center;
}

/* Issue Analysis (Blog Posts) */
.issue-analysis {
  padding: var(--space-4xl) 0;
  background: var(--white);
}

/* v4.6.45 /distill: 3-up rounded card grid retired in favor of a flat
   hairline-divided list (one row per post, full container width).
   Pattern mirrors single.php's .post-sidebar-list / single-mrc_press_release's
   Related Press list — same editorial register the rest of the spine uses
   for "more posts on this topic" feeds. /layout updates the markup to
   match. */
.issue-posts-list {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.issue-posts-list li {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.issue-posts-list li:last-child {
  border-bottom: none;
}

.issue-posts-list a {
  display: block;
  padding: var(--space-lg) 0;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s var(--ease-out, ease-out);
}

.issue-posts-list a:hover .issue-posts-list-title,
.issue-posts-list a:focus-visible .issue-posts-list-title {
  /* v4.6.115: --blue-700 → --blue-900 + underline (canonical hover). */
  color: var(--blue-900);
  text-decoration: underline;
}

.issue-posts-list .news-tag {
  display: block;
  margin-bottom: var(--space-xs);
}

.issue-posts-list-title {
  display: block;
  font-family: var(--font-accent);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--blue-900);
  margin-bottom: var(--space-xs);
}

.issue-posts-list time {
  font-size: 0.85rem;
  color: var(--fg-meta);
}

/* Issue Series */
.issue-series {
  padding: var(--space-4xl) 0;
  background: var(--gray-50);
}

/* v4.6.45 /distill: rounded card chrome retired on the related-series
   block. .issue-series-card was a `border + border-radius + hover-
   box-shadow` 2-up grid card — the AI-template "hover lifts" pattern
   stripped from the rest of the spine in v4.6.30. /layout swaps the
   markup to reuse the .cross-link-cta pattern (flat 2-up, navy hairline
   above each item, no chrome) already shipped on staff / board /
   careers cta-cards (v4.6.35). The existing image-thumbnail role moves
   into .cross-link-cta-thumb (defined below). */
.issue-series-cross-link {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-2xl), 5vw, var(--space-4xl));
}

@media (max-width: 720px) {
  .issue-series-cross-link {
    grid-template-columns: 1fr;
  }
}

.issue-series-cross-link-item {
  padding-top: var(--space-lg);
  border-top: 2px solid var(--blue-900);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.issue-series-cross-link-item a {
  text-decoration: none;
  color: inherit;
}

.issue-series-cross-link-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.issue-series-cross-link-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.issue-series-cross-link-title {
  font-family: var(--font-accent);
  font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--blue-900);
  letter-spacing: -0.01em;
  margin: 0;
}

.issue-series-cross-link-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0;
  max-width: 52ch;
}

.issue-series-cross-link-cue {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blue-900);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  align-self: flex-start;
  transition: color 0.2s var(--ease-out, ease-out);
}

.issue-series-cross-link-item a:hover .issue-series-cross-link-cue,
.issue-series-cross-link-item a:focus-visible .issue-series-cross-link-cue {
  /* v4.6.115: --blue-700 → --blue-900 (canonical navy). */
  color: var(--blue-900);
}

/* v4.6.139: Policy Series featured-image breathing room. The .article-
   featured-image figure had no CSS rule — was relying on browser-default
   <figure> margin (~16px), which butted the image too close to the body
   text that follows. Explicit margin gives the featured image its own
   editorial moment before the article content begins. Image is also
   normalized to display: block + width: 100% so it fills the figure
   without inline-element gap or aspect-ratio oddities. Only the policy
   series template uses this class today; rule lives here near the other
   series-specific blocks. */
.article-featured-image {
  margin: 0 0 var(--space-2xl);
}

.article-featured-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* v4.6.138: Policy Series in-content section blocks. Consolidated four
   previously-duplicate selector groups (.series-resources / -videos /
   -infographics / -blog-posts) into one shared rule each (wrapper +
   heading) — same chrome was rendered four times in the source. Also
   fixed three brand-spine drifts:
   1. border-top: --gray-200 → --hairline (token discipline canonical)
   2. h2 font-family: --font-primary (Avenir body) → --font-accent
      (Franklin Gothic display) — section heads on editorial pages use
      the display face, not body. Was reading as a body-text bump
      instead of a section break.
   3. h2 size: 1.5rem flat → clamp(1.5–1.875rem) for responsive
      editorial weight; navy color + slight negative tracking to
      match .issue-series-cross-link-title and other display heads. */
.series-resources,
.series-videos,
.series-infographics,
.series-blog-posts {
  margin-top: var(--space-3xl);
  padding-top: var(--space-3xl);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.series-resources h2,
.series-videos h2,
.series-infographics h2,
.series-blog-posts h2 {
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 2vw + 0.75rem, 1.875rem);
  font-weight: 700;
  color: var(--blue-900);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-lg);
}

.series-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: var(--space-xl);
}

.series-video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(3, 56, 110, 0.10);
}

.series-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.series-video-title {
  font-size: 0.9rem;
  /* v4.6.138: --gray-600 → --fg2 (token discipline). */
  color: var(--fg2);
  margin-top: var(--space-sm);
}

/* Series Infographics */
.series-infographic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
}

.series-infographic-item {
  margin: 0;
}

.series-infographic-item a {
  display: block;
}

.series-infographic-item img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 10px);
  /* v4.6.138: kept the resting soft shadow (media-presentation context),
     retired the hover intensification. Brand spine: no hover-lift on
     content cards. The shadow delta was a softer variant of the same
     family — still in the anti-pattern register. Resting shadow alone
     gives the editorial "framed media" feel without rewarding hover
     for hover's sake. */
  box-shadow: 0 2px 12px rgba(3, 56, 110, 0.08);
}

.series-infographic-item figcaption {
  font-size: 0.875rem;
  color: var(--fg-meta);
  margin-top: var(--space-md);
  /* v4.6.138: text-align: center → left for editorial consistency
     with all other captions site-wide. Centered captions in mixed-
     length editorial contexts read as template, not editorial. */
}

/* Series Blog Posts */
.series-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
}

@media (max-width: 768px) {
  .series-video-grid,
  .series-infographic-grid,
  .series-blog-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   THE LATEST: ARTICLE LIST (flat, no cards)
   ============================================================================= */

.latest-articles {
  display: flex;
  flex-direction: column;
}

/* v4.6.145: row is now a flex container — thumb on left (when set),
   body on right. .latest-article--has-thumb modifier reserved for
   future targeting; current styling is uniform whether thumb is
   present or absent (body just fills the full width when not).
   Token fix: --gray-200 → --hairline (brand-spine canonical). */
.latest-article {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

.latest-article:first-child {
  padding-top: 0;
}

.latest-article:last-child {
  border-bottom: none;
}

.latest-article-thumb {
  flex: 0 0 auto;
  display: block;
  width: 120px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md, 8px);
  background: var(--gray-100, #f3f4f6);
}

.latest-article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.latest-article-body {
  flex: 1 1 0;
  min-width: 0; /* let flex children shrink + wrap text properly */
}

.latest-article .news-tag {
  margin-bottom: var(--space-sm);
}

.latest-article h3 {
  font-size: 1.2rem;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

.latest-article h3 a {
  color: var(--gray-900);
  text-decoration: none;
}

.latest-article h3 a:hover {
  color: var(--blue-700);
}

/* v4.6.145: paragraph selector is no longer the direct child of
   .latest-article (now nested inside .latest-article-body). */
.latest-article-body > p {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

/* Smaller thumb on mobile — keeps side-by-side layout, doesn't dominate. */
@media (max-width: 600px) {
  .latest-article {
    gap: var(--space-md);
  }
  .latest-article-thumb {
    width: 88px;
  }
}

.latest-article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.85rem;
  color: var(--fg-meta);
}

.latest-author {
  font-weight: 500;
}

.latest-article-meta time,
.latest-read-time {
  position: relative;
  padding-left: var(--space-md);
}

.latest-article-meta time::before,
.latest-read-time::before {
  content: '|';
  position: absolute;
  left: 0;
  color: var(--gray-300);
}

/* On phones the three-item pipe-separated row compresses tight and wraps
   awkwardly. Stack vertically with no separators below 600px. */
@media (max-width: 600px) {
  .latest-article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .latest-article-meta time,
  .latest-read-time {
    padding-left: 0;
  }

  .latest-article-meta time::before,
  .latest-read-time::before {
    content: none;
  }
}

/* =============================================================================
   BLOCK AUTO-GRID — Consecutive stat cards & metric highlights form columns
   ============================================================================= */

/* Stat cards: when placed inside a WordPress Columns block, let them fill naturally.
   When placed consecutively in content, use CSS grid via a wrapper technique. */

/* Style for when stat cards are inside wp:columns */
.wp-block-columns .wp-block-column .mrc-stat-card {
  height: 100%;
}

/* Style for when metric highlights are inside wp:columns */
.wp-block-columns .wp-block-column .mrc-metric-highlight {
  height: 100%;
  margin: 0;
}

/* Ensure consistent vertical alignment inside columns */
.wp-block-columns .wp-block-column:has(.mrc-stat-card),
.wp-block-columns .wp-block-column:has(.mrc-metric-highlight) {
  display: flex;
  flex-direction: column;
}

.wp-block-columns .wp-block-column:has(.mrc-stat-card) > .wp-block-mrc-stat-card,
.wp-block-columns .wp-block-column:has(.mrc-metric-highlight) > .wp-block-mrc-metric-highlight {
  flex: 1;
}

/* =============================================================================
   MOBILE REFINEMENTS (≤ 768px)
   ============================================================================= */

@media (max-width: 768px) {

  .latest-article h3 {
    font-size: 1.05rem;
  }

  /* Secondary hero button — outline only on mobile */
  .hero-cta .btn-secondary,
  .hero-cta .btn-outline-light {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.5);
    color: var(--white);
  }

  /* --- MI Callout: compact button on mobile (grid stacking is already
     handled by the 1024px breakpoint for .mi-callout-grid--has-image).
     v4.6.80: rules updated to target the new .mi-callout-* classes. --- */
  .mi-callout-grid .btn {
    font-size: 0.85rem;
    padding: 12px 20px;
  }

  .mi-callout-figure {
    display: none;
  }

  /* Note: prior .latest-grid .news-card mobile override block was
     deleted in /polish — base .news-card is already chrome-free after
     /distill (no bg, border, radius, padding wrapper, or shadow), so
     the resets here were redundant. The image-hide rule that lived
     here targeted stale class names (.story-image, .news-card-image)
     and was a no-op. If mobile homepage scans want images hidden as
     a deliberate UX choice, that becomes a new intentional rule. */

  /* --- Stories spotlight: smaller quote --- */
  .stories-spotlight-quote p {
    font-size: 1.1rem;
    line-height: 1.4;
  }

  .stories-spotlight-card {
    gap: var(--space-xl);
  }

  /* --- Footer: better social icon spacing --- */
  .footer-social {
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
  }

  .footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
  }

  .footer-social svg {
    width: 18px;
    height: 18px;
  }

  /* Footer link groups: accordion-style on mobile */
  .footer-links h4 {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .footer-links h4::after {
    content: '+';
    font-size: 1.2rem;
    font-weight: 300;
    color: rgba(255,255,255,0.5);
    transition: transform 0.2s var(--ease-out, ease-out);
  }

  .footer-links h4.footer-open::after {
    content: '−';
  }

  /* Mobile footer accordion: same structural constraint as .sub-menu —
     <ul> with direct <li> children, so max-height is the pragmatic path. */
  .footer-links ul,
  .footer-links .menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--ease-out, ease-out);
  }

  .footer-links h4.footer-open + ul,
  .footer-links h4.footer-open + .menu {
    max-height: 500px;
  }

  /* Tighter section spacing on mobile */
  .stories-spotlight {
    padding: var(--space-2xl) 0;
  }

  /* Common questions list tighter */
  .get-help-topics-list li {
    font-size: 0.9rem;
    padding: var(--space-sm) 0;
  }
}

/* =============================================================================
   GET HELP: MOBILE REFINEMENTS (≤ 768px)
   ============================================================================= */

@media (max-width: 768px) {

  /* --- Help topics: tighter on mobile --- */
  .help-topic-item {
    padding: var(--space-lg) 0;
  }

  .help-topic-heading {
    font-size: 1.15rem;
  }

  .help-topic-desc {
    font-size: 0.95rem;
  }

  /* --- MSP inline savings (callback form NY-zip reveal): tighter on mobile --- */
  .msp-savings-label {
    font-size: 0.8rem;
  }

  .msp-savings-value {
    font-size: 0.9rem;
  }

  .msp-savings-highlight {
    font-size: 1rem;
  }
}


/* =============================================================================
   CUSTOM BLOCK STYLES — Single source of truth
   All block CSS lives here (not in individual block stylesheets).
   These rules load last in the cascade, ensuring they override
   any article-content typography rules above.

   v4.6.98 brand-spine resync: this section was missed by the v4.6.94
   custom-block rewrite (which edited only src/blocks/*/style.css and
   build/blocks/*/style-index.css). Because main.css load-order makes
   it the authoritative copy, block rendering was reverting to the
   OLD pre-brand-spine design regardless of the per-block updates.
   Now this section mirrors the build/blocks/*/style-index.css content
   block-for-block — generated by concatenating those files.
   ============================================================================= */


/* =============================================================================
   BLOCK: CALLOUT BOX

   v4.6.94 brand-spine cleanup. Earlier treatment used off-brand
   palette: raw hex backgrounds (#f0fdf4 green, #fffbeb amber,
   #fef2f2 red, #f6f8fb), off-brand --teal-* and --blue-* sub-shades
   (--blue-50/600/700, --teal-600). Now uses ONLY brand tokens:
     - info  → bg-tint-navy + navy icon (canonical institutional)
     - tip   → cream + kelly green icon (warmth + earned accent)
     - warn  → amber-tinted (the licensed warm accent for warnings)
     - note  → coral-tinted (the licensed warm accent for human-scale
               emphasis; reserves coral for stories/testimonials/board
               PLUS this block's "note" variant where editorial weight
               is genuinely needed)

   Radius reduced from radius-lg → radius-md. Icon circles stay (they
   ARE the primary visual anchor of a callout, not decoration).
   ============================================================================= */

.mrc-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg, 1.5rem);
  border-radius: var(--radius-md);
  /* v4.6.96: symmetric --space-xl padding (was 2rem vert / 3rem horiz —
     the asymmetric inset read Bootstrap-alert template-y, especially
     when the icon + gap already consume ~60px of the left side).
     Margin: symmetric top/bottom so the callout breathes from
     preceding body content (was 0 on top — caused crash-ins). */
  padding: var(--space-xl);
  margin: var(--space-2xl) 0;
}

/* Icon circle — the primary visual anchor */
.mrc-callout__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  margin-top: 2px;
}

.mrc-callout__body {
  flex: 1;
  min-width: 0;
}

.mrc-callout__heading {
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  /* v4.6.125: 0.14em → 0.1em to align with the canonical theme
     small-caps eyebrow convention (.post-author-label,
     .post-tags-label, .issue-toc-list a). The wider 0.14em was a
     v4.6.94 custom-block-rebuild convention that never propagated
     to the rest of the theme. */
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-sm);
  line-height: 1.3;
  color: var(--blue-900);
}

.mrc-callout__content {
  margin: 0;
}

.mrc-callout__content p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--fg1);
  margin: 0;
}

/* --- Info: institutional / neutral --- */
.mrc-callout--info {
  background-color: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
}

.mrc-callout--info .mrc-callout__icon {
  background-color: var(--blue-900);
  color: var(--white, #fff);
}

/* --- Tip: warm + earned kelly accent --- */
.mrc-callout--tip {
  background-color: var(--cream);
}

.mrc-callout--tip .mrc-callout__icon {
  background-color: var(--green-accent);
  color: var(--white, #fff);
}

.mrc-callout--tip .mrc-callout__heading {
  color: var(--green-800);
}

/* --- Warning: amber (licensed warm accent for alerts) --- */
.mrc-callout--warning {
  background-color: var(--gold-100, #fef9c3);
}

.mrc-callout--warning .mrc-callout__icon {
  background-color: var(--gold-500);
  color: var(--white, #fff);
}

.mrc-callout--warning .mrc-callout__heading {
  color: var(--gold-800);
}

/* --- Note: coral (licensed warm accent for editorial emphasis) --- */
.mrc-callout--note {
  background-color: rgba(237, 102, 74, 0.08);
}

.mrc-callout--note .mrc-callout__icon {
  background-color: var(--coral);
  color: var(--white, #fff);
}

.mrc-callout--note .mrc-callout__heading {
  color: var(--coral);
}

@media (max-width: 768px) {
  .mrc-callout {
    padding: var(--space-lg);
    gap: var(--space-md, 1rem);
    margin-bottom: var(--space-xl);
  }

  .mrc-callout__icon {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .mrc-callout__content p {
    font-size: 0.95rem;
  }
}


/* =============================================================================
   BLOCK: COMPARISON TABLE

   v4.6.94 brand-spine cleanup. Earlier treatment used off-brand
   --blue-600 (2px header underline), --blue-50/100 (highlights),
   --gray-100 (header bg), --gray-* generic neutrals. Now uses brand
   tokens throughout: navy for headers/highlights, hairline for row
   dividers, cream for header/striped rows.

   Tables are functional comparison content — radius-md + hairline
   border on the container IS appropriate chrome here (the
   structural anchor is necessary for legibility). Heavy 2px colored
   header underline retired in favor of a 1px hairline.
   ============================================================================= */

.mrc-comparison-table,
.wp-block-mrc-comparison-table {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.mrc-comparison-table__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 400px;
}

.mrc-comparison-table__table th,
.mrc-comparison-table__table td {
  /* v4.6.96: token-aligned cell padding (was 1.15rem/3.5rem — off the
     4pt scale and the fixed height forced cells to truncate multi-line
     content visually). Now padding-driven height; content sets cell
     size, with a comfortable editorial inset. */
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  vertical-align: middle;
}

.mrc-comparison-table__feature-header,
.mrc-comparison-table__col-header {
  background-color: var(--cream);
  color: var(--blue-900);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.mrc-comparison-table__col-header {
  text-align: center;
}

/* Alternating row striping — quiet navy-tint wash */
.mrc-comparison-table__table tbody tr:nth-child(even) {
  background-color: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
}

.mrc-comparison-table__table tbody tr:hover {
  background-color: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
}

.mrc-comparison-table__cell {
  text-align: center;
  position: relative;
}

.mrc-comparison-table__feature {
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--blue-900);
}

/* Highlighted column — bg-tint-navy + slightly darker header */
.mrc-comparison-table__highlight {
  background-color: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
}

.mrc-comparison-table__col-header.mrc-comparison-table__highlight {
  background-color: rgba(3, 56, 110, 0.08);
  color: var(--blue-900);
}

.mrc-comparison-table__remove {
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  .mrc-comparison-table__table th,
  .mrc-comparison-table__table td {
    /* v4.6.96: token-aligned mobile padding (was 0.9rem/3rem — off-token
     and fixed-height). */
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9rem;
  }
}


/* =============================================================================
   BLOCK: DEFINITION LIST

   v4.6.94 brand-spine cleanup. Earlier treatment had a 3px solid
   blue-500 side-stripe on each term (forbidden by .impeccable.md
   Principle 5: colored side-stripe borders > 1px). Now uses pure
   hairline-divided list discipline — term in Franklin Gothic 700,
   definition in body type, hairline border between items, no
   decorative side-rule.
   ============================================================================= */

.mrc-definition-list {
  margin: var(--space-xl) 0;
  padding: 0;
}

.mrc-definition-list__item {
  padding: var(--space-lg, 1.5rem) 0;
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.mrc-definition-list__item:last-of-type {
  border-bottom: none;
}

.mrc-definition-list__term {
  font-family: var(--font-accent);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--blue-900);
  margin: 0 0 var(--space-sm, 0.5rem);
}

.mrc-definition-list__definition {
  margin: 0;
  color: var(--fg2);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .mrc-definition-list__item {
    padding: var(--space-md, 1rem) 0;
  }
}


/* =============================================================================
   BLOCK: DOCUMENT PREVIEW

   v4.6.94 brand-spine cleanup. Earlier treatment had hover-shadow
   (`box-shadow: 0 2px 8px ...` on :hover) and off-brand --blue-* tokens
   (--blue-300, --blue-600). Now keeps a light functional border for
   the download affordance but loses the lift and uses brand tokens.
   Download icon stays kelly green (earned accent — this is a primary
   action).
   ============================================================================= */

.mrc-document-preview {
  display: flex;
  align-items: center;
  gap: var(--space-lg, 1.5rem);
  padding: var(--space-lg, 1.5rem);
  border: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-radius: var(--radius-md);
  margin: var(--space-xl) 0;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

a.mrc-document-preview:hover,
a.mrc-document-preview:focus-visible {
  border-color: var(--blue-900);
  background-color: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
  outline: none;
}

.mrc-document-preview__icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.mrc-document-preview__info {
  flex: 1;
  min-width: 0;
}

.mrc-document-preview__title {
  font-family: var(--font-accent);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 var(--space-xs, 0.25rem);
  color: var(--blue-900);
}

.mrc-document-preview__desc {
  margin: 0 0 var(--space-xs, 0.25rem);
  color: var(--fg2);
  font-size: 1rem;
}

.mrc-document-preview__size {
  font-size: 0.85rem;
  color: var(--fg-meta);
}

.mrc-document-preview__download-icon {
  font-size: 1.25rem;
  color: var(--green-accent);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .mrc-document-preview {
    padding: var(--space-md, 1rem);
    gap: var(--space-md, 1rem);
  }

  .mrc-document-preview__icon {
    font-size: 2rem;
  }

  .mrc-document-preview__title {
    font-size: 1rem;
  }
}


/* =============================================================================
   BLOCK: FAQ ACCORDION

   v4.6.94 brand-spine cleanup. Earlier treatment used per-item card
   chrome (border + radius-md + bg shift on hover/open) with off-brand
   --blue-300/400/500 sub-shades. Now uses the canonical hairline-
   divided list discipline — each Q&A is a row with a hairline border
   between items, no per-item box. Hover state: subtle navy-tint fill
   on the header only. Open state: chevron rotates; no border-color
   change.
   ============================================================================= */

.mrc-faq-accordion {
  margin: var(--space-xl) 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.mrc-faq-accordion__item {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.mrc-faq-accordion__item:last-of-type {
  border-bottom: 0;
}

.mrc-faq-accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
  cursor: pointer;
  background-color: transparent;
  list-style: none;
  min-height: 52px;
  transition: background-color 0.15s ease;
}

.mrc-faq-accordion__header:hover {
  background-color: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
}

.mrc-faq-accordion__item[open] .mrc-faq-accordion__header {
  background-color: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
}

.mrc-faq-accordion__header::-webkit-details-marker {
  display: none;
}

.mrc-faq-accordion__question {
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
  color: var(--blue-900);
}

.mrc-faq-accordion__chevron {
  font-size: 1rem;
  color: var(--fg-meta);
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  margin-left: var(--space-md, 1rem);
}

.mrc-faq-accordion__item[open] .mrc-faq-accordion__chevron {
  transform: rotate(180deg);
  color: var(--blue-900);
}

.mrc-faq-accordion__body {
  /* v4.6.96: small top breath between question and answer when open.
     Previously 0 top padding meant the question/answer gap was only
     the header's 1rem padding-bottom, which read cramped. */
  padding: var(--space-sm, 0.5rem) var(--space-lg, 1.5rem) var(--space-lg, 1.5rem);
}

.mrc-faq-accordion__answer {
  margin: 0;
  color: var(--fg2);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .mrc-faq-accordion__header {
    padding: var(--space-md);
    min-height: 56px;
  }

  .mrc-faq-accordion__body {
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }
}


/* =============================================================================
   BLOCK: KEY TAKEAWAYS

   v4.6.94 brand-spine cleanup. Earlier treatment used custom hex
   #f6f8fb bg + #e8ecf1 border + radius-lg + box-shadow (forbidden
   decorative shadow). Now uses the canonical navy-tinted soft-panel
   pattern: bg-tint-navy ground, hairline frame, radius-md, no shadow.
   ============================================================================= */

.mrc-key-takeaways {
  background-color: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
  border: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-radius: var(--radius-md);
  /* v4.6.96: symmetric --space-xl padding (was 2rem vert / 3rem horiz —
     asymmetric inset read template-y for what should be an editorial
     "panel" treatment). */
  padding: var(--space-xl);
  margin: var(--space-xl) 0;
}

/* Heading */
.mrc-key-takeaways__heading {
  display: block;
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  /* v4.6.125: 0.14em → 0.1em to align with the canonical theme
     small-caps eyebrow convention. See callout-box for rationale. */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-900);
  margin: 0 0 var(--space-md, 1rem);
  padding-bottom: var(--space-sm, 0.5rem);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

/* Bulleted list content */
.mrc-key-takeaways__content ul,
.mrc-key-takeaways__content .wp-block-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style-type: disc;
}

.mrc-key-takeaways__content li {
  margin-bottom: var(--space-sm, 0.5rem);
  line-height: 1.7;
  color: var(--fg1);
  list-style-type: disc;
}

.mrc-key-takeaways__content li:last-child {
  margin-bottom: 0;
}

/* Unbulleted paragraph content */
.mrc-key-takeaways__content p,
.mrc-key-takeaways__content .wp-block-paragraph {
  margin: 0 0 var(--space-sm, 0.5rem);
  line-height: 1.7;
  color: var(--fg1);
}

.mrc-key-takeaways__content p:last-child,
.mrc-key-takeaways__content .wp-block-paragraph:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .mrc-key-takeaways {
    padding: var(--space-lg);
  }
}


/* =============================================================================
   BLOCK: METRIC HIGHLIGHT

   v4.6.94 brand-spine cleanup. Earlier treatment had 3px solid
   --blue-600 borders on top + bottom (heavy decorative chrome,
   off-brand color) and used --blue-600 for the number. Now a quiet
   hairline-bracketed band with navy display number — matches the
   v4.6.76 .impact-stat-feature treatment.
   ============================================================================= */

.mrc-metric-highlight {
  text-align: center;
  padding: var(--space-xl) var(--space-lg, 1.5rem);
  margin: var(--space-xl) 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  background: transparent;
}

.mrc-metric-highlight__number {
  display: block;
  font-family: var(--font-accent);
  font-size: clamp(2.5rem, 2vw + 1.5rem, 3.5rem);
  font-weight: 700;
  color: var(--blue-900);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm, 0.5rem);
}

.mrc-metric-highlight__context {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  color: var(--fg1);
  margin: 0 auto var(--space-sm, 0.5rem);
  max-width: 40ch;
  line-height: 1.45;
}

.mrc-metric-highlight__source {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--fg-meta);
  font-style: italic;
}

@media (max-width: 768px) {
  .mrc-metric-highlight__number {
    font-size: 2.25rem;
  }

  .mrc-metric-highlight {
    padding: var(--space-lg) var(--space-md);
  }
}


/* =============================================================================
   BLOCK: METRIC HIGHLIGHT GROUP — Multi-column grid for metric highlights

   v4.6.94: dropped the radius-lg override on child metric highlights
   (each child now controls its own chrome — the v4.6.94 rebuild of
   .mrc-metric-highlight uses hairline-bracketed bands, not rounded
   cards). The group is pure layout.
   ============================================================================= */

.mrc-metric-highlight-group {
  display: grid;
  gap: var(--space-lg, 1.5rem);
  margin: var(--space-xl) 0;
}

.mrc-metric-highlight-group--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.mrc-metric-highlight-group--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.mrc-metric-highlight-group--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Children control their own chrome; group is pure layout. */
.mrc-metric-highlight-group .mrc-metric-highlight {
  margin: 0;
  height: 100%;
}

@media (max-width: 768px) {
  .mrc-metric-highlight-group--cols-3,
  .mrc-metric-highlight-group--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .mrc-metric-highlight-group {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   BLOCK: NUMBERED STEPS

   v4.6.94 brand-spine rebuild. Earlier treatment had a 2-column grid
   of cards (border + radius-md + padding) with hover-shadow lift,
   plus a circular blue-50 / blue-700 numeral badge. Now matches the
   theme's canonical numbered-spine pattern (see ac-how-list on
   archive-mrc_action, the "How It Works" section): single-column
   hairline-divided list with display-weight Franklin Gothic numerals
   on the left and editorial title + description on the right. No
   card chrome, no hover-lift, no badge.

   Display numerals are appropriate here because Numbered Steps
   inherently encodes ORDER (step 1 must precede step 2). Per v4.6.73,
   ordering-implying numerals are RETAINED on workflow-sequence
   content (steps, "what to expect", how-it-works) and only retired
   on unordered curated sets (Values, Priority Issues).
   ============================================================================= */

.mrc-numbered-steps {
  margin: var(--space-xl) 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.mrc-numbered-steps__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-lg, 1.5rem);
  align-items: baseline;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

/* Display numeral — Franklin Gothic, navy, hairline-list register
   (matches .ac-how-num pattern from archive-mrc_action). */
.mrc-numbered-steps__number {
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
  font-weight: 700;
  color: var(--blue-900);
  line-height: 1;
  letter-spacing: -0.01em;
  min-width: 2.5rem;
}

.mrc-numbered-steps__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.mrc-numbered-steps__title {
  font-family: var(--font-accent);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
  color: var(--blue-900);
  line-height: 1.3;
}

.mrc-numbered-steps__desc {
  margin: 0;
  color: var(--fg2);
  line-height: 1.6;
  font-size: 1rem;
  max-width: 64ch;
}

.mrc-numbered-steps__add {
  margin-top: var(--space-md, 1rem);
}

@media (max-width: 768px) {
  .mrc-numbered-steps__step {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-md);
    padding: var(--space-md) 0;
  }

  .mrc-numbered-steps__number {
    min-width: 2rem;
  }
}


.mrc-partner-logo-grid {
  display: grid;
  gap: var(--space-lg, 1.5rem);
  align-items: center;
  justify-items: center;
  margin: var(--space-xl) 0;
}

.mrc-partner-logo-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.mrc-partner-logo-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.mrc-partner-logo-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.mrc-partner-logo-grid--cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.mrc-partner-logo-grid .wp-block-image {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md, 1rem);
}

.mrc-partner-logo-grid .wp-block-image img {
  max-height: 5rem;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.mrc-partner-logo-grid .wp-block-image img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@media (max-width: 768px) {
  .mrc-partner-logo-grid--cols-4,
  .mrc-partner-logo-grid--cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .mrc-partner-logo-grid--cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =============================================================================
   BLOCK: PRESS MENTION

   v4.6.94 brand-spine rebuild. Earlier treatment had card chrome
   (radius-lg + border + padding) and hover-lift (transform: translateY
   + box-shadow + border-color shift). Now a hairline-divided row
   pattern matching .priority-issues-cell and similar — outlet eyebrow
   + headline + date, hairline border-top/bottom, subtle navy-tint
   hover (no transform, no box-shadow).
   ============================================================================= */

.mrc-press-mention {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  margin: var(--space-md) 0;
  transition: background-color 0.2s var(--ease-out, ease-out);
}

/* Stack adjacent press mentions: collapse the shared border so
   they read as a unified hairline-divided list. */
.mrc-press-mention + .mrc-press-mention {
  border-top: 0;
  margin-top: 0;
}

/* Hover state: subtle navy-tint fill, no lift, no shadow. Only
   applies when the entire block is a link. */
a.mrc-press-mention:hover,
a.mrc-press-mention:focus-visible {
  background-color: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
  outline: none;
}

.mrc-press-mention__outlet {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  /* v4.6.125: 0.14em → 0.1em to align with the canonical theme
     small-caps eyebrow convention. See callout-box for rationale. */
  letter-spacing: 0.1em;
  color: var(--fg-meta);
  margin-bottom: var(--space-xs, 0.25rem);
}

.mrc-press-mention__headline {
  font-family: var(--font-accent);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 var(--space-xs, 0.25rem);
  color: var(--blue-900);
  line-height: 1.3;
}

.mrc-press-mention__headline-link {
  color: var(--blue-900);
  text-decoration: none;
}

.mrc-press-mention__headline-link:hover,
.mrc-press-mention__headline-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

.mrc-press-mention__date {
  font-size: 0.85rem;
  color: var(--fg-meta);
}

@media (max-width: 768px) {
  .mrc-press-mention {
    padding: var(--space-md) 0;
  }
}


/* =============================================================================
   BLOCK: PULL QUOTE — two style variants (accent + large)

   v4.6.94 brand-spine cleanup. Earlier treatment used Georgia / Times
   New Roman serif for the decorative quote-mark (off-brand — Avenir +
   Franklin Gothic only), off-brand --blue-200/400 sub-shades for the
   marks, and card chrome on the accent variant (radius-lg + blue-50
   bg). Now uses Franklin Gothic italic throughout, drops the decorative
   marks entirely (the typography is enough — quote marks are
   redundant visual chrome), keeps optional warm-tone background
   variants for editorial breathing room.
   ============================================================================= */

.mrc-pullquote {
  margin: var(--space-2xl, 3rem) 0;
  padding: 0;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}

.mrc-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.mrc-pullquote__text {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: var(--blue-900);
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

.mrc-pullquote__cite,
figure.mrc-pullquote figcaption.mrc-pullquote__cite {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-style: normal;
  color: var(--fg-meta);
  margin-top: 1rem;
  text-align: left;
}

/* v4.6.123: decorative quote-mark RE-ENABLED with brand-spine-correct
   styling. v4.6.94 retired it because the original implementation used
   Georgia/Times serif (off-brand); v4.6.94's hide-via-CSS broke the
   showQuoteMark ToggleControl into a ghost UI (toggle on, mark still
   invisible). Now the toggle works as users expect — Franklin Gothic
   navy display mark above the quote text, only on the accent variant.

   .mrc-pullquote--large::before retired entirely (large statement
   doesn't need a decorative mark — the centered display typography
   carries the editorial weight). */
.mrc-pullquote--large::before {
  display: none;
}

.mrc-pullquote--accent .mrc-pullquote__mark,
.mrc-pullquote--default .mrc-pullquote__mark {
  display: block;
  font-family: var(--font-accent);
  font-size: clamp(2.5rem, 2vw + 1.5rem, 3.5rem);
  font-weight: 700;
  line-height: 0.4;
  color: var(--blue-900);
  margin-bottom: var(--space-md);
  text-indent: -0.05em;
}

/* =============================================================================
   ACCENT (default) — hairline-bracketed band, no card chrome.
   v4.6.99: padding matched to sibling testimonial-card (var(--space-xl) 0)
   so the two hairline-bracketed-quote treatments breathe the same.
   ============================================================================= */
.mrc-pullquote--accent,
.mrc-pullquote--default {
  background: transparent;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  padding: var(--space-xl) 0;
}

.mrc-pullquote--accent .mrc-pullquote__text,
.mrc-pullquote--default .mrc-pullquote__text {
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
}

/* =============================================================================
   LARGE — centered editorial statement, no decorative mark.
   v4.6.99: horizontal padding bumped from --space-lg → --space-xl
   for more breathing on the centered display statement.
   ============================================================================= */
.mrc-pullquote--large {
  text-align: center;
  padding: var(--space-2xl, 3rem) var(--space-xl, 2rem);
}

.mrc-pullquote--large .mrc-pullquote__text {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  max-width: 700px;
  margin: 0 auto;
}

.mrc-pullquote--large .mrc-pullquote__cite,
figure.mrc-pullquote--large figcaption.mrc-pullquote__cite {
  text-align: center;
}

/* =============================================================================
   BACKGROUND COLOR MODIFIERS — warm tones for editorial breathing.
   v4.6.98 restored bg-gold + bg-green for back-compat (the pullquote
   block's inspector dropdown offers gray/blue/green/gold/white, so
   existing content could be using gold/green; CSS now matches the
   editor options). bg-cream stays as an editorial alternative.
   ============================================================================= */
figure.mrc-pullquote.mrc-pullquote--bg-gray  { background: var(--gray-50); }
figure.mrc-pullquote.mrc-pullquote--bg-blue  { background: var(--bg-tint-navy, rgba(3, 56, 110, 0.04)); }
figure.mrc-pullquote.mrc-pullquote--bg-cream { background: var(--cream); }
figure.mrc-pullquote.mrc-pullquote--bg-gold  { background: var(--gold-100, #fef9c3); }
figure.mrc-pullquote.mrc-pullquote--bg-green { background: rgba(71, 171, 71, 0.06); }
figure.mrc-pullquote.mrc-pullquote--bg-white { background: var(--white, #fff); }

.mrc-pullquote--large[class*="mrc-pullquote--bg-"] {
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
}

/* v4.6.123: accent + bg-color was missing horizontal padding — the
   colored ground extended to container width but the text hugged
   the bg's left/right edges with no inset breathing room. When a bg
   is set, drop the hairline-brackets (the colored fill replaces the
   visual framing) and apply symmetric --space-xl padding + radius-md
   for consistent inset. Mirrors the .mrc-pullquote--large + bg
   treatment immediately above. */
.mrc-pullquote--accent[class*="mrc-pullquote--bg-"],
.mrc-pullquote--default[class*="mrc-pullquote--bg-"] {
  border-top: 0;
  border-bottom: 0;
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

/* =============================================================================
   EDITOR
   ============================================================================= */
.wp-block[data-type="mrc/pullquote"] {
  overflow: hidden;
}

.is-root-container > .mrc-pullquote:not(.wp-block) {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 768px) {
  .mrc-pullquote--accent,
  .mrc-pullquote--default {
    padding: var(--space-lg) 0;
  }
}


/* =============================================================================
   BLOCK: SECTION WRAPPER

   v4.6.94 brand-spine cleanup. Replaced off-brand color tokens with
   canonical brand palette:
     - --cream-50 → --cream
     - --blue-300, --blue-600 → --blue-900 / --green-accent / --fg-meta
     - --blue-950 ("dark" variant) → --blue-900 (the canonical navy)
   Label small-caps treatment now uses the .section-label-style
   (Franklin Gothic, letterspaced, uppercase).
   ============================================================================= */

.mrc-section-wrapper {
  margin: 0;
}

.mrc-section-wrapper--pad-normal {
  padding: var(--space-xl, 2rem) var(--space-lg, 1.5rem);
}

.mrc-section-wrapper--pad-large {
  padding: var(--space-2xl, 3rem) var(--space-lg, 1.5rem);
}

/* Tighter spacing when inside article content areas */
.article-content .mrc-section-wrapper--pad-normal,
.article-main .mrc-section-wrapper--pad-normal,
.post-content .mrc-section-wrapper--pad-normal,
.entry-content .mrc-section-wrapper--pad-normal {
  padding: var(--space-lg, 1.5rem) var(--space-lg, 1.5rem);
}

.article-content .mrc-section-wrapper--pad-large,
.article-main .mrc-section-wrapper--pad-large,
.post-content .mrc-section-wrapper--pad-large,
.entry-content .mrc-section-wrapper--pad-large {
  padding: var(--space-xl, 2rem) var(--space-lg, 1.5rem);
}

/* --- Background variants — brand-spine grounds only --- */
.mrc-section-wrapper--bg-white {
  background-color: var(--white, #fff);
}

.mrc-section-wrapper--bg-gray {
  background-color: var(--gray-50);
}

.mrc-section-wrapper--bg-cream {
  background-color: var(--cream);
}

/* Navy ground — institutional close-stack / dark editorial register.
   v4.6.128: consolidated with the --bg-dark legacy alias selector.
   Previously these were two identical rule blocks (~16 lines of
   duplicate CSS). The brand palette has one canonical deep navy
   (--blue-900); --bg-dark is kept in the block.json enum for
   back-compat with existing posts saved as background: 'dark', but
   the inspector dropdown no longer exposes it as a separate option
   (see src/blocks/section-wrapper/index.js — JS source updated; the
   change lands on next `npm run build`). */
.mrc-section-wrapper--bg-navy,
.mrc-section-wrapper--bg-dark {
  background-color: var(--blue-900);
  color: var(--white, #fff);
}

.mrc-section-wrapper--bg-navy .mrc-section-wrapper__label,
.mrc-section-wrapper--bg-dark .mrc-section-wrapper__label {
  color: var(--green-accent);
}

.mrc-section-wrapper--bg-navy .mrc-section-wrapper__title,
.mrc-section-wrapper--bg-dark .mrc-section-wrapper__title {
  color: var(--white, #fff);
}

.mrc-section-wrapper--bg-navy .mrc-section-wrapper__content,
.mrc-section-wrapper--bg-dark .mrc-section-wrapper__content {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Header --- */
.mrc-section-wrapper__header {
  text-align: center;
  margin-bottom: var(--space-lg, 1.5rem);
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.mrc-section-wrapper__label {
  display: block;
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  /* v4.6.125: 0.14em → 0.1em to align with the canonical theme
     small-caps eyebrow convention. See callout-box for rationale. */
  letter-spacing: 0.1em;
  color: var(--blue-900);
  margin-bottom: var(--space-xs, 0.25rem);
}

.mrc-section-wrapper__title {
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  font-weight: 600;
  margin: 0;
  color: var(--blue-900);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.mrc-section-wrapper__content {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .mrc-section-wrapper--pad-normal {
    padding: var(--space-lg, 1.5rem) var(--space-md, 1rem);
  }

  .mrc-section-wrapper--pad-large {
    padding: var(--space-xl, 2rem) var(--space-md, 1rem);
  }

  .article-content .mrc-section-wrapper,
  .article-main .mrc-section-wrapper,
  .post-content .mrc-section-wrapper,
  .entry-content .mrc-section-wrapper {
    padding: var(--space-lg, 1.5rem) var(--space-md, 1rem);
  }
}


/* =============================================================================
   BLOCK: STAT CARD

   v4.6.94 brand-spine rebuild. Earlier treatment had card chrome
   (radius-lg + gray-200 border + white bg + padding) AND hover-lift
   (transform: translateY + box-shadow on :hover — forbidden by
   .impeccable.md Principle 5). Color variants also referenced
   off-brand --teal-600 / --teal-700 (the brand palette only ships
   navy + kelly green; teal is not a brand color).

   New treatment: chromeless big-number stat (matches the v4.6.76
   .impact-stat-feature treatment and the involve-impact stats grid).
   No card chrome, no hover-lift. Color variants now use brand tokens
   only (navy default, kelly green for emphasis).
   ============================================================================= */

.mrc-stat-card {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.mrc-stat-card__number {
  display: block;
  font-family: var(--font-accent);
  font-size: clamp(2.25rem, 1.5vw + 1.75rem, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blue-900);
  margin-bottom: var(--space-sm, 0.5rem);
}

.mrc-stat-card__label {
  display: block;
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--fg2);
  line-height: 1.4;
  max-width: 32ch;
  margin: 0 auto;
}

/* Color variants — brand tokens only. The default is navy; the
   "green" variant uses the rare-by-design kelly accent for stats
   that earn the emphasis (campaign moments, headline numbers). */
.mrc-stat-card--blue .mrc-stat-card__number  { color: var(--blue-900); }
.mrc-stat-card--green .mrc-stat-card__number { color: var(--green-accent); }
/* Legacy --teal variant aliased to green (kelly) for back-compat
   on existing post content. */
.mrc-stat-card--teal .mrc-stat-card__number  { color: var(--green-accent); }

@media (max-width: 768px) {
  .mrc-stat-card {
    padding: var(--space-lg) var(--space-md);
  }
}


/* =============================================================================
   BLOCK: STAT CARD GROUP — Multi-column grid for stat cards
   ============================================================================= */

.mrc-stat-card-group {
  display: grid;
  gap: var(--space-lg, 1.5rem);
  margin: var(--space-xl) 0;
}

.mrc-stat-card-group--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.mrc-stat-card-group--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.mrc-stat-card-group--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Make child stat cards fill their grid cells */
.mrc-stat-card-group .mrc-stat-card {
  margin: 0;
  height: 100%;
}

@media (max-width: 768px) {
  .mrc-stat-card-group--cols-3,
  .mrc-stat-card-group--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .mrc-stat-card-group {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   BLOCK: TESTIMONIAL CARD

   v4.6.94 brand-spine rebuild. Earlier treatment had card chrome
   (radius-lg + gray-50 bg + padding), a 3px blue-700 side-stripe
   on the quote (forbidden by .impeccable.md Principle 5), Georgia
   /Times serif (off-brand — Avenir + Franklin Gothic only), and an
   avatar box-shadow. Now matches the hairline-bracketed editorial-
   testimonial pattern used by .helpline-spotlight and the v4.6.81
   .story-spotlight profile register.
   ============================================================================= */

/* --- Container — hairline-bracketed band, no card chrome --- */
blockquote.wp-block-mrc-testimonial-card.mrc-testimonial-card,
blockquote.mrc-testimonial-card[class] {
  all: unset;
  display: block;
  box-sizing: border-box;
  background: transparent;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  padding: var(--space-xl) 0;
  margin: var(--space-2xl) 0;
}

/* Retire the legacy ::before/::after Georgia quote-mark decoration. */
blockquote.mrc-testimonial-card[class]::before,
blockquote.mrc-testimonial-card[class]::after {
  content: none;
  display: none;
}

/* Hide legacy JS quote-icon div */
.mrc-testimonial-card .mrc-testimonial-card__quote-icon {
  display: none;
}

/* --- Quote — Franklin Gothic italic, no side-stripe --- */
blockquote.mrc-testimonial-card[class] .mrc-testimonial-card__quote {
  font-family: var(--font-accent);
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--blue-900);
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-lg);
  padding: 0;
  border: 0;
  text-wrap: balance;
}

/* --- Attribution: name + org (matches helpline-spotlight) --- */
blockquote.mrc-testimonial-card[class] .mrc-testimonial-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0;
}

.mrc-testimonial-card .mrc-testimonial-card__image {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
  aspect-ratio: 1 / 1;
}

.mrc-testimonial-card .mrc-testimonial-card__attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-primary);
  line-height: 1.3;
}

.mrc-testimonial-card .mrc-testimonial-card__name {
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-900);
}

.mrc-testimonial-card .mrc-testimonial-card__org {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--fg-meta);
}

/* --- Mobile --- */
@media (max-width: 768px) {
  blockquote.wp-block-mrc-testimonial-card.mrc-testimonial-card,
  blockquote.mrc-testimonial-card[class] {
    padding: var(--space-lg) 0;
    margin: var(--space-xl) 0;
  }
}


/* =============================================================================
   BLOCK: TIMELINE

   v4.6.94 brand-spine rebuild. Earlier treatment had a decorative
   gradient column rule (`linear-gradient(180deg, blue-400, teal-600)`
   — off-brand colors AND gradient anti-pattern), a glowing 3px ring
   around each event dot (box-shadow halo), off-brand --blue-* tokens.
   Now a quiet hairline column rule (navy-tinted), solid navy dots
   without rings, brand color tokens throughout.
   ============================================================================= */

.mrc-timeline {
  position: relative;
  padding-left: 2.25rem;
  margin: var(--space-xl) 0;
}

/* Solid hairline column rule — navy-tinted, no gradient. */
.mrc-timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hairline, rgba(3, 56, 110, 0.12));
}

.mrc-timeline__event {
  position: relative;
  padding-bottom: var(--space-xl);
}

.mrc-timeline__event:last-child {
  padding-bottom: 0;
}

/* Solid navy dot — no ring halo.
   v4.6.127: shifted -2px (-1.875rem → -2rem) to align dot center
   with line center. The v4.6.94 rebuild positioned the dot 2.5px to
   the right of the line — the line passed through the LEFT third
   of each dot rather than its center. New alignment math:
     container padding-left: 36px
     line position 0.5rem (center at x=8.5px)
     dot at -2rem → left edge at 36-32 = 4px, center at 9px
     residual offset: 0.5px (subpixel — visually perfect).
   The 2px white border (halo against the timeline track) is
   intentional — it's a ring spacer around the navy dot, NOT a
   colored side-stripe (which the brand spine forbids at >1px). */
.mrc-timeline__dot {
  position: absolute;
  left: -2rem;
  top: 0.35rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--blue-900);
  border: 2px solid var(--white, #fff);
}

.mrc-timeline__content {
  padding-left: var(--space-md, 1rem);
}

.mrc-timeline__date {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fg-meta);
  text-transform: uppercase;
  /* v4.6.125: 0.14em → 0.1em to align with the canonical theme
     small-caps eyebrow convention. See callout-box for rationale. */
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs, 0.25rem);
}

.mrc-timeline__title {
  font-family: var(--font-accent);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 var(--space-xs, 0.25rem);
  color: var(--blue-900);
  line-height: 1.3;
}

.mrc-timeline__desc {
  margin: 0;
  color: var(--fg2);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .mrc-timeline {
    padding-left: 1.75rem;
  }

  .mrc-timeline__dot {
    /* v4.6.127: shifted -2px (-1.375rem → -1.5rem) to align with
       line center. Mobile math: container padding 1.75rem (28px),
       line at 0.5rem (center 8.5px), dot 0.5rem (8px wide). At
       -1.5rem → dot left at 4px, center at 8px → residual offset
       0.5px (subpixel). */
    left: -1.5rem;
    width: 0.5rem;
    height: 0.5rem;
  }

  .mrc-timeline__title {
    font-size: 1rem;
  }

  .mrc-timeline__desc {
    font-size: 0.95rem;
  }
}


.mrc-two-column {
  display: grid;
  margin: var(--space-xl) 0;
}

/* Ratios */
.mrc-two-column--50-50 {
  grid-template-columns: 1fr 1fr;
}

.mrc-two-column--60-40 {
  grid-template-columns: 3fr 2fr;
}

.mrc-two-column--40-60 {
  grid-template-columns: 2fr 3fr;
}

/* Gaps */
.mrc-two-column--gap-normal {
  gap: var(--space-lg, 1.5rem);
}

.mrc-two-column--gap-wide {
  gap: calc(var(--space-xl) * 1.5);
}

/* Vertical alignment */
.mrc-two-column--align-top {
  align-items: start;
}

.mrc-two-column--align-center {
  align-items: center;
}

.mrc-two-column--align-bottom {
  align-items: end;
}

.mrc-two-column__col {
  min-width: 0;
}

@media (max-width: 768px) {
  .mrc-two-column--50-50,
  .mrc-two-column--60-40,
  .mrc-two-column--40-60 {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   BLOCK: VIDEO EMBED

   v4.6.94 brand-spine cleanup. Earlier treatment had radius-lg + heavy
   navy-tinted box-shadow on the wrapper (decorative card chrome on a
   functional embed), plus a dashed-border placeholder (anti-pattern
   visual stand-in). Now uses a quiet hairline frame, radius-md (or
   no radius), no shadow. Placeholder is a flat navy-tinted panel
   with editorial typographic prompt.
   ============================================================================= */

.mrc-video-embed {
  margin: var(--space-xl) 0;
}

.mrc-video-embed__wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.mrc-video-embed__wrapper--16-9 {
  padding-top: 56.25%;
}

.mrc-video-embed__wrapper--4-3 {
  padding-top: 75%;
}

.mrc-video-embed__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mrc-video-embed__placeholder {
  background-color: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
  border: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-radius: var(--radius-md);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--fg-meta);
}

.mrc-video-embed__caption {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  color: var(--fg-meta);
  text-align: center;
  margin-top: var(--space-md, 1rem);
  font-style: italic;
}

@media (max-width: 768px) {
  .mrc-video-embed__caption {
    font-size: 0.85rem;
  }
}

/* =============================================================================
   MAILCHIMP NEWSLETTER FORMS (native embed + JSONP interceptor)
   -----------------------------------------------------------------------------
   Markup shape (from mrc_render_newsletter_form() in inc/mailchimp-integration.php):

     <div class="mrc-newsletter mrc-newsletter--compact">
       <form class="mrc-newsletter-form mrc-newsletter-form--compact" ...>
         <div class="mrc-newsletter-form__row">
           <label class="screen-reader-text">Email address</label>
           <input type="email" name="EMAIL" required>
           <input type="hidden" name="group[2721][8]" value="8">
           <div aria-hidden="true"><!-- honeypot --></div>
           <button type="submit" class="mrc-newsletter-btn">Sign Up</button>
         </div>
         <div class="mrc-newsletter__status" role="status" aria-live="polite" hidden></div>
       </form>
       <a class="newsletter-prefs-link" href="...">Manage preferences →</a>
     </div>

   Submissions are intercepted by assets/js/newsletter.js and sent to the
   Mailchimp /subscribe/post-json endpoint via JSONP so the visitor stays on
   the page. The inline status pill receives success/error/pending messages
   via the --success / --error / --pending modifier classes. If JS is off,
   the form posts classically to Mailchimp's hosted confirmation screen.

   Compact variant: email + submit row, rendered on dark/overlay card
   backgrounds (footer CTA, involve card) and on the white sidebar card.

   Prefs variant: full form used on the Newsletter Signup page (EMAIL + FNAME
   + LNAME + ZIP + two <fieldset> blocks with 9 interest checkboxes), styled
   on a light background with visible field borders and a pill CTA button.
   ============================================================================= */

.mrc-newsletter {
  display: block;
  width: 100%;
}

.mrc-newsletter-form {
  box-sizing: border-box;
  font-family: var(--font-primary);
}

.mrc-newsletter-form *,
.mrc-newsletter-form *::before,
.mrc-newsletter-form *::after {
  box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
   Shared submit button — matches the theme's .btn-accent treatment
   (green, rounded-rect, white text) per brand guide.
   ----------------------------------------------------------------------------- */
.mrc-newsletter--compact .mrc-newsletter-btn,
.mrc-newsletter--prefs .mrc-newsletter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 11px 22px;
  min-height: 48px;
  border: 2px solid var(--green-accent);
  border-radius: var(--radius-md);
  background: var(--green-accent);
  color: var(--white);
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color            var(--duration-fast) var(--ease-standard),
    border-color     var(--duration-fast) var(--ease-standard);
}

.mrc-newsletter--compact .mrc-newsletter-btn:hover,
.mrc-newsletter--compact .mrc-newsletter-btn:focus,
.mrc-newsletter--prefs .mrc-newsletter-btn:hover,
.mrc-newsletter--prefs .mrc-newsletter-btn:focus {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}

.mrc-newsletter--compact .mrc-newsletter-btn:active,
.mrc-newsletter--prefs .mrc-newsletter-btn:active {
  transform: scale(0.98);
}

.mrc-newsletter-btn[disabled],
.mrc-newsletter-btn[aria-busy="true"] {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* -----------------------------------------------------------------------------
   Compact variant — dark/overlay context (footer CTA, sidebar, involve card)
   ----------------------------------------------------------------------------- */
.mrc-newsletter--compact .mrc-newsletter-form {
  margin: 0;
  padding: 0;
}

.mrc-newsletter--compact .mrc-newsletter-form__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--space-sm);
}

.mrc-newsletter--compact input[type="email"] {
  flex: 1 1 0%;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  min-height: 48px;
  box-shadow: none;
}

.mrc-newsletter--compact input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.mrc-newsletter--compact input[type="email"]:focus {
  outline: none;
  border-color: var(--green-accent);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(71, 171, 71, 0.25);
}

/* Sidebar-newsletter context uses a white card — swap compact
   form colors so inputs read on a light background. */
.sidebar-newsletter .mrc-newsletter--compact input[type="email"] {
  background: var(--white);
  color: var(--gray-900, #111);
  border-color: var(--gray-200, #e5e5e5);
}

.sidebar-newsletter .mrc-newsletter--compact input[type="email"]::placeholder {
  color: var(--gray-500, #888);
}

.sidebar-newsletter .mrc-newsletter--compact input[type="email"]:focus {
  border-color: var(--green-accent);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(71, 171, 71, 0.25);
}

/* Involve-newsletter sits on blue-50 — swap to light-bg input styling. */
.involve-newsletter .mrc-newsletter--compact input[type="email"] {
  background: var(--white);
  color: var(--gray-900, #111);
  border-color: var(--gray-300, #d1d5db);
}

.involve-newsletter .mrc-newsletter--compact input[type="email"]::placeholder {
  color: var(--gray-500, #888);
}

.involve-newsletter .mrc-newsletter--compact input[type="email"]:focus {
  border-color: var(--green-accent);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(71, 171, 71, 0.25);
}

.involve-newsletter .newsletter-prefs-link {
  color: var(--blue-700);
}

/* "Manage preferences →" link appended after every compact form. */
.newsletter-prefs-link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.newsletter-prefs-link:hover,
.newsletter-prefs-link:focus {
  color: var(--white);
}

.sidebar-newsletter .newsletter-prefs-link {
  color: var(--blue-700);
}

.sidebar-newsletter .newsletter-prefs-link:hover,
.sidebar-newsletter .newsletter-prefs-link:focus {
  color: var(--blue-900);
}

/* -----------------------------------------------------------------------------
   Preferences variant — light background, full form on Newsletter Signup page
   ----------------------------------------------------------------------------- */
.newsletter-signup-section {
  padding: var(--space-3xl) 0;
  background: var(--gray-50, #fafafa);
}

.newsletter-signup-inner {
  max-width: 720px;
  margin: 0 auto;
}

.newsletter-signup-intro {
  margin-bottom: var(--space-xl);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--gray-700, #444);
}

.newsletter-signup-form-wrap {
  padding: var(--space-xl);
  background: var(--white);
  border: 1px solid var(--gray-200, #e5e5e5);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(3, 56, 110, 0.04);
}

.newsletter-signup-footnote {
  margin-top: var(--space-lg);
  font-size: 0.85rem;
  color: var(--gray-600, #666);
  line-height: 1.6;
  text-align: center;
}

.mrc-newsletter--prefs .mrc-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}

.mrc-newsletter--prefs .mc-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.mrc-newsletter--prefs .mc-field-group label {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-800, #222);
}

.mrc-newsletter--prefs .mc-field-group label .required {
  color: var(--red-600, #c02c3c);
  margin-left: 2px;
}

.mrc-newsletter--prefs .mc-field-group input[type="email"],
.mrc-newsletter--prefs .mc-field-group input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border-2, #c7cfd9);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-900, #111);
  font-family: var(--font-primary);
  font-size: 1rem;
  min-height: 48px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.mrc-newsletter--prefs .mc-field-group input[type="email"]:hover,
.mrc-newsletter--prefs .mc-field-group input[type="text"]:hover {
  border-color: var(--border-1, #e3e7ed);
}

.mrc-newsletter--prefs .mc-field-group input[type="email"]:focus,
.mrc-newsletter--prefs .mc-field-group input[type="text"]:focus {
  outline: none;
  border-color: var(--green-accent);
  box-shadow: 0 0 0 3px rgba(71, 171, 71, 0.25);
}

/* Two-column row for First Name + Last Name on desktop, stacks on mobile. */
.mrc-newsletter--prefs .mc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.mrc-newsletter--prefs .mc-field-row .mc-field-group {
  min-width: 0;
}

/* Checkbox groups (Newsletters + Updates and Alerts). */
.mrc-newsletter--prefs fieldset.mc-group-fieldset {
  border: 0;
  padding: 0;
  margin: var(--space-md) 0 0;
}

.mrc-newsletter--prefs fieldset.mc-group-fieldset legend {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--gray-200, #e5e5e5);
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900, #111);
}

.mrc-newsletter--prefs fieldset.mc-group-fieldset .mc-group-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  cursor: pointer;
  color: var(--gray-800, #222);
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 400;
}

.mrc-newsletter--prefs fieldset.mc-group-fieldset .mc-group-option input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0 0;
  accent-color: var(--blue-600);
  flex-shrink: 0;
  cursor: pointer;
}

.mrc-newsletter--prefs fieldset.mc-group-fieldset .mc-group-option:hover {
  color: var(--blue-700);
}

.mrc-newsletter--prefs .mc-group-option__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mrc-newsletter--prefs .mc-group-option__label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gray-900, #111);
}

.mrc-newsletter--prefs .mc-group-option__desc {
  font-size: 0.82rem;
  color: var(--gray-600, #666);
  line-height: 1.4;
  font-weight: 400;
}

.mrc-newsletter--prefs .mrc-newsletter-form__actions {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: flex-start;
}

/* -----------------------------------------------------------------------------
   Inline status message (success / error / pending)
   Written by assets/js/newsletter.js after a JSONP response from Mailchimp.
   Uses tinted pills on light backgrounds; the dark-context override below
   swaps to high-contrast translucent treatment for the footer/involve overlay.
   ----------------------------------------------------------------------------- */
.mrc-newsletter__status {
  margin-top: var(--space-md);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.mrc-newsletter__status[hidden] {
  display: none;
}

/* Fade + slide in whenever a status class is applied. Re-runs on
   pending → success/error class swap because the animation is on each
   status-type selector. */
@keyframes statusFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mrc-newsletter__status--pending,
.mrc-newsletter__status--success,
.mrc-newsletter__status--error {
  animation: statusFadeIn 0.3s var(--ease-out, ease-out) both;
}

.mrc-newsletter__status--pending {
  background: rgba(37, 112, 184, 0.08);
  border-color: rgba(37, 112, 184, 0.25);
  color: var(--blue-700, #1e5a96);
}

.mrc-newsletter__status--success {
  background: rgba(155, 199, 59, 0.12);
  border-color: rgba(155, 199, 59, 0.45);
  color: #3a5a0b;
}

.mrc-newsletter__status--error {
  background: rgba(192, 44, 60, 0.08);
  border-color: rgba(192, 44, 60, 0.35);
  color: #8a1f2b;
}

/* Dark-context override — compact forms in the footer/involve overlay sit
   on a dark-navy background, so the soft tinted pills become invisible.
   Swap to high-contrast white-on-translucent. */
.mrc-newsletter--compact .mrc-newsletter__status {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--white);
}

.mrc-newsletter--compact .mrc-newsletter__status--success {
  background: rgba(155, 199, 59, 0.2);
  border-color: var(--green-accent);
  color: var(--white);
}

.mrc-newsletter--compact .mrc-newsletter__status--error {
  background: rgba(255, 100, 110, 0.15);
  border-color: rgba(255, 140, 150, 0.6);
  color: var(--white);
}

/* Sidebar-newsletter context is a white card — revert the dark-context
   override so success/error tints come back through. */
.sidebar-newsletter .mrc-newsletter--compact .mrc-newsletter__status {
  background: rgba(37, 112, 184, 0.08);
  border-color: rgba(37, 112, 184, 0.25);
  color: var(--blue-700, #1e5a96);
}

.sidebar-newsletter .mrc-newsletter--compact .mrc-newsletter__status--success {
  background: rgba(155, 199, 59, 0.12);
  border-color: rgba(155, 199, 59, 0.45);
  color: #3a5a0b;
}

.sidebar-newsletter .mrc-newsletter--compact .mrc-newsletter__status--error {
  background: rgba(192, 44, 60, 0.08);
  border-color: rgba(192, 44, 60, 0.35);
  color: #8a1f2b;
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .mrc-newsletter--compact .mrc-newsletter-form__row {
    flex-wrap: wrap;
  }

  .mrc-newsletter--compact input[type="email"],
  .mrc-newsletter--compact .mrc-newsletter-btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .mrc-newsletter--prefs .mc-field-row {
    grid-template-columns: 1fr;
  }

  .newsletter-signup-form-wrap {
    padding: var(--space-lg);
  }
}


/* =============================================================================
   TAKE ACTION PAGE — Action Network Embed
   ============================================================================= */

/* --- Action Center ---
   Editorial-advocacy register. Hero migrates to shared content-hero.php
   (eyebrow + CTA pair + caregiver-inclusive exit-ramp). Listing is
   featured action (asymmetric 5/12 + 7/12, adaptive deadline-numeral
   or type-word visual) + hairline-divided list of remaining actions.
   How It Works is a hairline-numbered editorial spine that mirrors
   .partners-featured-list. Close stack: newsletter + donate (no helpline,
   audience mismatch). */

.ac-actions {
  padding: var(--space-3xl) 0;
  background: var(--white);
}

.ac-actions .section-subtitle {
  max-width: 640px;
}

.ac-actions-grid {
  margin-top: var(--space-2xl);
}

.ac-action-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.ac-action-type {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-meta);
}

.ac-action-title {
  font-family: var(--font-primary);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.ac-action-desc {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.ac-action-cta {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue-700);
}

/* --- Action Center: How It Works (numbered editorial spine) ---
   Mirrors .partners-featured-list register; static (no link wrapper),
   so no :hover treatment. Numerals share the unified row-num scale
   used by .priority-issues-num and .ac-actions-num. */
.ac-how {
  padding: var(--space-3xl) 0;
  background: var(--gray-50);
}

.ac-how-header {
  max-width: 720px;
  margin-bottom: var(--space-2xl);
}

.ac-how-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.ac-how-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md) clamp(var(--space-md), 3vw, var(--space-2xl));
  align-items: baseline;
  padding: var(--space-lg) var(--space-xs);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.ac-how-num {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(2rem, 3vw + 1rem, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--blue-900);
  min-width: 3.5ch;
  align-self: center;
}

.ac-how-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.ac-how-title {
  font-family: var(--font-accent);
  font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  text-wrap: balance;
}

.ac-how-desc {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg2);
  max-width: 62ch;
}

/* --- Action Center: listing header --- */
.ac-actions-header {
  max-width: 720px;
  margin-bottom: var(--space-2xl);
}

/* --- Action Center: featured action (asymmetric 5/12 + 7/12) ---
   The visual treatment of .ac-feature-numeral / .ac-feature-typeword
   is refined in /bolder. This block sets composition only. */
.ac-feature {
  margin-bottom: var(--space-3xl);
}

.ac-feature-link {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: center;
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  text-decoration: none;
  color: inherit;
  transition: color 0.2s var(--ease-out, ease-out);
}

.ac-feature-visual {
  text-align: left;
  min-width: 0;
}

.ac-feature-numeral-label {
  display: block;
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-meta);
  margin-bottom: var(--space-xs);
}

.ac-feature-numeral {
  display: block;
  font-family: var(--font-accent);
  color: var(--blue-900);
  font-variant-numeric: tabular-nums;
}

.ac-feature-numeral-day {
  display: block;
  font-size: clamp(4.5rem, 11vw + 1rem, 9rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
}

.ac-feature-numeral-meta {
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
  margin-top: var(--space-xs);
}

.ac-feature-numeral-month {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}

.ac-feature-numeral-year {
  font-size: clamp(1rem, 1vw + 0.5rem, 1.5rem);
  font-weight: 500;
  color: var(--fg-meta);
  letter-spacing: 0.02em;
  line-height: 1;
}

.ac-feature-typeword {
  display: block;
  font-family: var(--font-accent);
  font-size: clamp(3rem, 6vw + 1rem, 6.5rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--blue-900);
  text-wrap: balance;
}

.ac-feature-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 56ch;
}

.ac-feature-content .section-label {
  margin-bottom: 0;
}

.ac-feature-title {
  font-family: var(--font-accent);
  font-size: clamp(1.75rem, 1.5vw + 1rem, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  margin: 0;
  text-wrap: balance;
}

.ac-feature-pitch {
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0;
  max-width: 56ch;
}

.ac-feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  align-items: baseline;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  color: var(--fg-meta);
  margin: 0;
}

.ac-feature-meta .ac-action-type {
  color: var(--blue-700);
}

.ac-feature-meta-sep {
  color: var(--hairline-strong, rgba(3, 56, 110, 0.32));
}

.ac-feature-cta {
  font-family: var(--font-accent);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-700);
  margin-top: var(--space-xs);
}

.ac-feature-link:hover .ac-feature-title,
.ac-feature-link:focus-visible .ac-feature-title {
  color: var(--blue-700);
}

.ac-feature-link:hover .ac-feature-cta,
.ac-feature-link:focus-visible .ac-feature-cta {
  color: var(--blue-900);
  text-decoration: underline;
}

/* --- Action Center: hairline list (mirrors .partners-featured-list) --- */
.ac-actions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.ac-actions-item {
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

/* v4.6.72: grid collapses from `[num] [body] [cue]` (3-col) to
   `[body] [cue]` (2-col). Same logic as the Priority Issues retirement
   above — the actions list is a curated current set, not a ranked
   one, and the numerals falsely implied prioritization. */
.ac-actions-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md) clamp(var(--space-md), 3vw, var(--space-2xl));
  align-items: baseline;
  padding: var(--space-lg) var(--space-xs);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s var(--ease-out, ease-out), color 0.2s var(--ease-out, ease-out);
}

/* v4.6.72: .ac-actions-num + its hover rule retired. */

/* v4.6.118: when the action has a featured image, the row collapses
   to a 3-col grid [thumb] [body] [cue]. Modifier class on the <li>
   gates this — actions without images keep the 2-col layout above. */
.ac-actions-item--has-thumb .ac-actions-link {
  grid-template-columns: clamp(80px, 12vw, 120px) minmax(0, 1fr) auto;
  align-items: center;
}

.ac-action-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
}

.ac-action-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s var(--ease-out, ease-out);
}

/* Subtle photo-zoom on hover — within the established brand spine
   (no transform on the card itself, only on the image inside the
   fixed-aspect mask). Mirrors editorial-list conventions used by
   ProPublica / Marshall Project for article-list thumbnails. */
.ac-actions-link:hover .ac-action-thumb img,
.ac-actions-link:focus-visible .ac-action-thumb img {
  transform: scale(1.04);
}

.ac-actions-link:hover,
.ac-actions-link:focus-visible {
  background-color: rgba(3, 56, 110, 0.03);
  color: var(--blue-900);
}

.ac-actions-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.ac-actions-body .ac-action-type {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-meta);
}

.ac-actions-body .ac-action-title {
  font-family: var(--font-accent);
  font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  text-wrap: balance;
}

.ac-actions-body .ac-action-desc {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg2);
  max-width: 62ch;
}

.ac-actions-cue {
  align-self: center;
  font-family: var(--font-accent);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue-700);
  white-space: nowrap;
}

.ac-actions-link:hover .ac-actions-cue,
.ac-actions-link:focus-visible .ac-actions-cue {
  color: var(--blue-900);
}

/* --- Action Center: empty state (soft-redirect newsletter) ---
   Lives inside .ac-actions which already pads top + bottom; only own
   bottom padding here so the section header's margin-bottom carries
   the top space. */
.ac-empty {
  padding-bottom: var(--space-3xl);
  max-width: 600px;
}

.ac-empty-heading {
  font-family: var(--font-accent);
  font-size: clamp(1.75rem, 1.5vw + 1rem, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  margin: 0 0 var(--space-md);
}

.ac-empty-body {
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0 0 var(--space-lg);
  max-width: 56ch;
}

.ac-empty-form {
  margin-top: var(--space-md);
}

/* Action Center responsive */
@media (max-width: 1024px) {
  .ac-feature-link {
    gap: var(--space-xl);
  }
}

@media (max-width: 768px) {
  .ac-actions,
  .ac-how {
    padding: var(--space-2xl) 0;
  }

  .ac-feature {
    margin-bottom: var(--space-2xl);
  }

  .ac-feature-link {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-xl) 0;
  }

  .ac-feature-numeral-day {
    font-size: clamp(3.5rem, 14vw, 6rem);
  }

  .ac-feature-typeword {
    font-size: clamp(2.25rem, 9vw, 3.5rem);
  }

  .ac-actions-link {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-md) 0;
  }

  .ac-actions-cue {
    grid-column: 2;
    align-self: start;
    font-size: 0.85rem;
  }

  .ac-actions-body .ac-action-desc {
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* =============================================================================
   TAKE ACTION EMBED (v4.6.68 brand-spine)
   =============================================================================
   The single-mrc_action.php conversion surface — wraps an Action Network
   widget with hero/share/close scaffolding. Brand-spine pass (v4.6.68)
   stripped the prior card-chrome treatment of .action-share-bar, removed
   the forced !important card overrides that wrapped #can_sidebar in
   rounded box-shadow chrome, retired hardcoded platform brand colors on
   share buttons (Facebook blue, Twitter near-black) in favor of an
   outlined unified treatment, and dropped the gray-50 "form panel" ground
   in favor of white-on-hairline section discipline.
   ============================================================================= */

/* v4.6.69 follow-up: cream ground (was white in the initial v4.6.68
   rebuild). The cream tint warms the action surface relative to the
   white hero/footer above and below, signals a "stop here, do this"
   moment without reading as a stark form panel the way the prior
   --gray-50 ground did. Hairline border-top still bridges from the
   hero so the section change is unambiguous. */
.action-embed {
  padding: var(--space-3xl) 0;
  background: var(--cream);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.action-embed-form {
  background: transparent;
  padding: 0;
}

.action-embed-placeholder {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--fg-meta);
  font-style: italic;
}

/* CSS Grid on AN's #can_embed_form > .clearfix — the actual container
   holding #can_main_col (letter content) and #can_sidebar (form/progress)
   as siblings. Positions them side by side WITHOUT moving DOM elements,
   which preserves Action Network's inline form handling / event delegation.

   Actual AN DOM structure:
     .can_embed
       └─ #can_embed_form.clearfix.can_float
            ├─ .clearfix          ← GRID TARGET
            │    ├─ #can_main_col ← left column
            │    └─ #can_sidebar  ← right column
            └─ #logo_wrap (hidden)
*/
.action-embed #can_embed_form {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.action-embed #can_embed_form > .clearfix {
  display: grid !important;
  grid-template-columns: 1fr 360px;
  gap: var(--space-2xl);
  align-items: start;
}

.action-embed #can_main_col {
  grid-column: 1;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.action-embed #can_sidebar {
  grid-column: 2;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  /* v4.6.68: card chrome retired (was: white bg + 1px gray border +
     radius-lg + shadow-sm + xl padding, all !important). Replaced with
     a quiet navy-soft ground that still differentiates the form column
     from the letter copy column without the rounded-box-shadow chrome
     pattern the brand-spine has been removing across the theme. The
     padding stays so the form has room to breathe; the border-radius
     is gone. */
  background: var(--bg-navy-soft, var(--gray-50)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: var(--space-xl) !important;
  box-shadow: none !important;
  position: sticky;
  /* v4.6.68: header-aware sticky offset. Prior `top: var(--space-xl)`
     (~48px) put the sidebar under a sticky site header at ~72px. The
     --header-height custom property is defined globally (main.css:119)
     and used elsewhere (filter bar, sticky TOC). */
  top: calc(var(--header-height, 72px) + var(--space-md));
}

.action-embed #can_sidebar * {
  box-sizing: border-box;
}

/* Step 2: Letter composition — when the letter textarea appears inside
   #can_sidebar, collapse the two-column grid to a single full-width
   column so the letter editor has room to breathe. */
.action-embed #can_embed_form > .clearfix:has(#can_sidebar textarea#message) {
  grid-template-columns: 1fr !important;
}

.action-embed #can_embed_form > .clearfix:has(#can_sidebar textarea#message) #can_main_col,
.action-embed #can_embed_form > .clearfix:has(#can_sidebar textarea#message) #can_sidebar {
  grid-column: 1 / -1;
}

.action-embed #can_embed_form > .clearfix:has(#can_sidebar textarea#message) #can_sidebar {
  position: static;
  max-width: 100% !important;
}

/* Share band below the AN widget. v4.6.68 brand-spine: card chrome
   retired (was rounded white card + 1px border + box-shadow + centered
   text). Replaced with a hairline-bracketed band that reads as a quiet
   editorial next step after the conversion moment, not as a competing
   third major content card.

   Markup change in single-mrc_action.php (v4.6.68): the h3 became an
   .action-share-header > section-label + section-title pair to match
   .partners-featured-header / .careers-openings-header convention. */
.action-share-bar {
  /* v4.6.108: tightened from margin-top 3rem + padding-top 2rem (=5rem
     of stacked chrome above the share row) → 2rem + 1.5rem. The share
     row is post-end metadata; it doesn't need hero-scale breathing. */
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.action-share-header {
  max-width: 72ch;
  margin: 0 0 var(--space-lg);
}

.action-share-links {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Outlined unified share button. Drops the prior platform brand-color
   backgrounds (#1877f2 Facebook blue, #0f1419 Twitter near-black, etc.)
   which imported external brand identity into the navy-unified theme.
   The platform is identified by the visible icon + label; the button
   chrome stays brand-locked. Hover affordance: hairline brightens via
   border-color, no background fill. */
.action-share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-lg);
  border: 1px solid var(--hairline, rgba(3, 56, 110, 0.18));
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue-900);
  text-decoration: none;
  transition: border-color 0.2s var(--ease-out, ease-out), background 0.15s var(--ease-out, ease-out);
}

.action-share-btn:hover,
.action-share-btn:focus-visible {
  outline: none;
  border-color: var(--blue-900);
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
  color: var(--blue-900);
}

/* Legacy: deprecated page-action.php still uses grid/sidebar layout */
.action-embed-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-2xl);
  align-items: start;
}

.action-embed-sidebar {
  position: sticky;
  top: var(--space-xl);
}

.action-sidebar-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.action-sidebar-card h3 {
  font-family: var(--font-primary);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

.action-sidebar-share p {
  color: var(--gray-600);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

/* --- Action Network Widget Overrides ---
   These rules restyle the whitelabel AN widget to match
   the MRC theme. The widget injects HTML directly (not an
   iframe), so standard CSS specificity works.
   -------------------------------------------------------- */

/* Typography */
.action-embed #can_embed_form h2,
.action-embed #can_embed_form h3,
.action-embed #can_embed_form h4 {
  font-family: var(--font-primary);
  color: var(--gray-900);
  line-height: 1.3;
}

.action-embed #can_embed_form h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.action-embed #can_embed_form h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg2);
  margin-bottom: var(--space-sm);
}

.action-embed #can_embed_form p,
.action-embed #can_embed_form .action_status_goal,
.action-embed #can_embed_form li {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-600);
}

.action-embed #can_embed_form a {
  color: var(--blue-brand);
}

/* Labels */
.action-embed #can_embed_form label,
.action-embed #can_embed_form .control-label {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg2);
  text-transform: none;
  letter-spacing: 0;
}

/* Text inputs, selects, textareas */
.action-embed #can_embed_form input[type="text"],
.action-embed #can_embed_form input[type="email"],
.action-embed #can_embed_form input[type="tel"],
.action-embed #can_embed_form input[type="number"],
.action-embed #can_embed_form input[type="url"],
.action-embed #can_embed_form textarea,
.action-embed #can_embed_form select {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--gray-800);
  background: var(--white);
  border: 1.5px solid var(--border-2, #c7cfd9);
  border-radius: var(--radius-sm);
  padding: 12px var(--space-md);
  min-height: 48px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  width: 100%;
}

.action-embed #can_embed_form input[type="text"]:focus,
.action-embed #can_embed_form input[type="email"]:focus,
.action-embed #can_embed_form input[type="tel"]:focus,
.action-embed #can_embed_form input[type="number"]:focus,
.action-embed #can_embed_form input[type="url"]:focus,
.action-embed #can_embed_form textarea:focus,
.action-embed #can_embed_form select:focus {
  outline: none;
  border-color: var(--green-accent);
  box-shadow: 0 0 0 3px rgba(71, 171, 71, 0.25);
}

.action-embed #can_embed_form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Placeholder text */
.action-embed #can_embed_form input::placeholder,
.action-embed #can_embed_form textarea::placeholder {
  color: var(--gray-400);
}

/* Submit button — match theme .btn-secondary (green) */
.action-embed #can_embed_form input[type="submit"],
.action-embed #can_embed_form .can_button {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  background: var(--green-accent);
  border: 2px solid var(--green-accent);
  border-radius: var(--radius-sm);
  padding: 14px var(--space-xl);
  min-height: 52px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
  text-transform: none;
  letter-spacing: 0;
  width: 100%;
}

.action-embed #can_embed_form input[type="submit"]:hover,
.action-embed #can_embed_form .can_button:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}

.action-embed #can_embed_form input[type="submit"]:active,
.action-embed #can_embed_form .can_button:active {
  transform: scale(0.98);
}

/* Progress tracker */
.action-embed .action_status_tracker {
  margin-bottom: var(--space-lg);
}

.action-embed .action_status_running_total {
  font-family: var(--font-accent);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--blue-900);
}

.action-embed .action_status_status_bar {
  background: var(--gray-200);
  border-radius: var(--radius-pill);
  height: 8px;
  overflow: hidden;
  margin: var(--space-sm) 0;
}

/* Progress bar fill — width IS the semantic value (the ActionNetwork
   embed sets it via inline style). Transform:scaleX would decouple the
   visual from the datum, so width is intentional here. */
.action-embed .action_status_status_bar-grow {
  background: var(--green-accent);
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.6s var(--ease-out, ease-out);
}

/* Checkboxes */
.action-embed #can_embed_form .check_radio_field label {
  font-weight: 400;
  color: var(--gray-600);
  font-size: 0.9rem;
}

.action-embed #can_embed_form .check_radio_field input[type="checkbox"] {
  accent-color: var(--green-accent);
  width: 18px;
  height: 18px;
  min-height: auto;
}

/* Error states */
.action-embed #error_message {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  color: #991b1b;
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

.action-embed .error_input {
  border-color: #ef4444 !important;
}

/* Thank-you state */
.action-embed #can_thank_you {
  text-align: center;
  padding: var(--space-2xl);
}

.action-embed #can_thank_you h1,
.action-embed #can_thank_you h2 {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: var(--space-md);
}

/* Hide Action Network logo */
.action-embed #logo_wrap {
  display: none;
}

/* AN sidebar — styled in place via CSS Grid (no DOM move) */
.action-embed #can_sidebar h4,
.action-embed #can_sidebar h3,
.action-embed #can_sidebar .sidebartitle {
  font-family: var(--font-primary);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--space-sm) 0;
  padding: 0;
}

.action-embed #can_sidebar p,
.action-embed #can_sidebar span,
.action-embed #can_sidebar .action_info_user {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.6;
}

.action-embed #can_sidebar img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.action-embed #can_sidebar ul {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0;
}

.action-embed #can_sidebar ul li {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.6;
  padding: var(--space-xs) 0;
}

.action-embed #can_sidebar .action_owner_box {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-top: var(--space-md);
}

.action-embed #can_sidebar .action_owner_box a {
  color: var(--blue-brand);
}

/* Progress / signature count in sidebar */
.action-embed #can_sidebar .action_status_running_total,
.action-embed #can_sidebar .action_status_goal {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--fg-meta);
}

.action-embed #can_sidebar .progress_bar,
.action-embed #can_sidebar .thermometer {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 8px;
  margin: var(--space-sm) 0;
}

.action-embed #can_sidebar .progress_bar .progress,
.action-embed #can_sidebar .thermometer .mercury {
  background: var(--green-brand);
  height: 100%;
  border-radius: var(--radius-sm);
}

/* Sidebar running total — large number */
.action-embed #can_sidebar .action_status_running_total {
  font-family: var(--font-accent);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--blue-900);
}

/* Sidebar form — submit button */
.action-embed #can_sidebar input[type="submit"],
.action-embed #can_sidebar .can_button,
.action-embed #can_sidebar button[type="submit"] {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  background: var(--green-accent);
  border: 2px solid var(--green-accent);
  border-radius: var(--radius-sm);
  padding: 14px var(--space-xl);
  min-height: 52px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
  text-transform: none;
  letter-spacing: 0;
  width: 100%;
  box-sizing: border-box;
  display: block;
  margin-top: var(--space-md);
}

.action-embed #can_sidebar input[type="submit"]:hover,
.action-embed #can_sidebar .can_button:hover,
.action-embed #can_sidebar button[type="submit"]:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}

.action-embed #can_sidebar input[type="submit"]:active,
.action-embed #can_sidebar .can_button:active,
.action-embed #can_sidebar button[type="submit"]:active {
  transform: scale(0.98);
}

/* Sidebar form — text inputs */
.action-embed #can_sidebar input[type="text"],
.action-embed #can_sidebar input[type="email"],
.action-embed #can_sidebar input[type="tel"],
.action-embed #can_sidebar input[type="number"],
.action-embed #can_sidebar textarea,
.action-embed #can_sidebar select {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--gray-800);
  background: var(--white);
  border: 1.5px solid var(--border-2, #c7cfd9);
  border-radius: var(--radius-sm);
  padding: 12px var(--space-md);
  min-height: 48px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  width: 100%;
}

.action-embed #can_sidebar input[type="text"]:focus,
.action-embed #can_sidebar input[type="email"]:focus,
.action-embed #can_sidebar input[type="tel"]:focus,
.action-embed #can_sidebar textarea:focus,
.action-embed #can_sidebar select:focus {
  outline: none;
  border-color: var(--green-accent);
  box-shadow: 0 0 0 3px rgba(71, 171, 71, 0.25);
}

/* Sidebar form — labels */
.action-embed #can_sidebar label,
.action-embed #can_sidebar .control-label {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg2);
  text-transform: none;
  letter-spacing: 0;
}

/* Sidebar form — checkboxes */
.action-embed #can_sidebar .check_radio_field label {
  font-weight: 400;
  color: var(--gray-600);
  font-size: 0.9rem;
}

.action-embed #can_sidebar .check_radio_field input[type="checkbox"],
.action-embed #can_sidebar input[type="checkbox"] {
  accent-color: var(--green-accent);
  width: 18px;
  height: 18px;
  min-height: auto;
}

/* Sidebar form — links */
.action-embed #can_sidebar a {
  color: var(--blue-brand);
  text-decoration: none;
}

.action-embed #can_sidebar a:hover {
  text-decoration: underline;
}

/* Sidebar — welcome message */
.action-embed #action_welcome_message {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--fg2);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

/* Sidebar — hide empty list bullets */
.action-embed #can_sidebar li:empty {
  display: none;
}

/* Sidebar — sharing/prefs section */
.action-embed #can_sidebar #d_sharing {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--fg-meta);
  line-height: 1.6;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--gray-200);
}

/* Sidebar — hide AN ajax loading image */
.action-embed #can_sidebar img.ajax-loading {
  display: none;
}

/* Letter-specific: style the letter text area */
.action-embed .action_letter {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Sections / headings with decorative lines */
.action-embed h2.line,
.action-embed h3.line {
  border-bottom: 2px solid var(--gray-200);
  padding-bottom: var(--space-sm);
}

/* Country selector */
.action-embed #can_embed_form .country_wrap select {
  appearance: auto;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .action-embed #can_embed_form > .clearfix {
    grid-template-columns: 1fr 280px;
    gap: var(--space-xl);
  }

  .action-embed-grid {
    grid-template-columns: 1fr 300px;
    gap: var(--space-xl);
  }
}

@media (max-width: 768px) {
  .action-embed {
    padding: var(--space-2xl) 0;
  }

  .action-embed #can_embed_form > .clearfix {
    grid-template-columns: 1fr;
  }

  .action-embed #can_main_col,
  .action-embed #can_sidebar {
    grid-column: 1;
  }

  .action-embed #can_sidebar {
    position: static;
  }

  .action-embed-grid {
    grid-template-columns: 1fr;
  }

  .action-embed-sidebar {
    position: static;
  }

  .action-embed-form {
    padding: 0;
  }

  /* v4.6.68: card-chrome padding override retired — the share bar is now
     hairline-bracketed, not a card. Mobile-specific button expansion
     stays: each button stretches to fill its row so they read as a
     touch-friendly stack on small screens. */
  .action-share-bar {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
  }

  .action-share-btn {
    flex: 1;
    justify-content: center;
    min-width: 100px;
  }
}

/* ========================================================================
   v4.6.76 — Brand-spine v5.0 emotional-register lift
   ========================================================================

   New rules added at the bottom of main.css (the architectural
   convention for additive feature work). Three blocks:

     1. .page-hero--photo-first — 60/40 asymmetric grid variant on
        content-hero.php for audience-correct emotional pages (donate,
        action-center, about). Photograph anchors one side, editorial
        stack (eyebrow + h1 + subtitle + CTAs) anchors the other.
        Hairline photo frame, no rounded corners, no overlay tint.

     2. .impact-stat-feature — 5/7 asymmetric featured-stat block for
        involve-impact.php. First stat pairs with a beneficiary
        photograph; the remaining 3 stats fall back to the existing
        dl-grid pattern.

     3. .mobile-nav-donate-top — donate button promoted to top of
        mobile menu, paired with the new .btn-donate confident chrome.
        v4.6.78: rules relocated to the mobile media query block at
        ~line 3345 so the button stays mobile-only (was bleeding
        through to desktop, producing two donate buttons).

   ======================================================================== */

/* --- Photo-first hero variant -------------------------------------------- */

.page-hero--photo-first {
  background: var(--white);
  /* v4.6.88: text color override. The base .page-hero rule (line ~3780)
     sets `color: var(--white)` because it's designed for navy gradient
     ground. The photo-first variant flips the ground to white — so any
     element that inherits the base color goes invisible. Override at the
     section level so unstyled descendants render in navy. */
  color: var(--blue-900);
  padding: clamp(var(--space-3xl), 6vw, var(--space-5xl)) 0;
  position: relative;
  /* v4.6.92: hairline separator between the hero and the section below.
     Some next-sections have their own ground shift (gray-50 on
     about-values / helpline-spotlight; cream elsewhere) and the
     boundary is already visible; others (stories-listing, donate-form,
     ways-list, action-embed-form) inherit body white and produce a
     hero/content seam with no visible boundary. The 1px hairline is
     invisible against gray-50/cream (where it's not needed) and crisp
     against white (where it is). Brand-spine canonical separator. */
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

/* v4.6.88: photo-first inner-element color overrides. The base navy-
   gradient hero set these to white / semi-transparent-white for the
   dark ground. On the photo-first white ground, each one needs a
   color that meets WCAG AA contrast. */
.page-hero--photo-first .page-hero-eyebrow {
  /* Was --kelly-green (#47ab47) — only 2.9:1 on white, fails AA.
     --green-800 (#166534) is AAA-safe on white per the brief's token
     comments at inc/custom-fields.php ~line 46. */
  color: var(--green-800);
}

.page-hero--photo-first .page-hero-cta-secondary {
  color: var(--blue-900);
}

.page-hero--photo-first .page-hero-cta-secondary:hover,
.page-hero--photo-first .page-hero-cta-secondary:focus-visible {
  color: var(--blue-700);
}

.page-hero--photo-first .page-hero-exit-ramp {
  /* Body-meta color (fg2) keeps the help-seeker-routing line quiet
     without dropping below AA contrast on white. */
  color: var(--fg2);
}

.page-hero--photo-first .page-hero-exit-ramp a {
  color: var(--blue-900);
}

/* v4.6.92: breadcrumb visibility on the photo-first variant. The base
   .breadcrumb a rule (~line 3826) sets color: var(--white) for the
   navy-ground hero treatment — explicit and more-specific than the
   .page-hero--photo-first color override at the section level, so the
   breadcrumb stays white-on-white without this scoped fix. Combined
   with the parent .breadcrumb's opacity: 0.7, the effective rendered
   color reads as a soft navy-gray (orientation cue, not primary
   content). Hover removes the muted feel. */
.page-hero--photo-first .breadcrumb a {
  color: var(--blue-700);
}

.page-hero--photo-first .breadcrumb a:hover,
.page-hero--photo-first .breadcrumb a:focus-visible {
  color: var(--blue-900);
}

.page-hero--photo-first .breadcrumb span[aria-current] {
  color: var(--fg2);
}

.page-hero-photo-first-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: center;
}

.page-hero--photo-first-no-image .page-hero-photo-first-grid {
  /* No photo set — fall back to single-column typographic register.
     Editorial discipline preserved; admin should add a hero photo
     to lift this page's emotional weight. */
  grid-template-columns: minmax(0, 1fr);
  max-width: 880px;
  margin: 0 auto;
}

.page-hero--photo-first .page-hero-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.page-hero--photo-first h1 {
  font-family: var(--font-accent);
  font-size: clamp(2rem, 2.5vw + 1rem, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--blue-900);
  margin: 0;
  text-wrap: balance;
}

.page-hero--photo-first .page-hero-subtitle {
  font-family: var(--font-primary);
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.55;
  color: var(--fg2);
  margin: 0;
  max-width: 52ch;
}

.page-hero--photo-first .page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
  align-items: center;
}

/* Photo frame — hairline editorial framing, no rounded corners,
   no box-shadow, no overlay. The photograph speaks for itself. */
.page-hero-figure {
  position: relative;
}

.page-hero-figure-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  aspect-ratio: 4 / 5;
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
}

.page-hero-figure-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* About hero — bespoke 2-col body stays inside .page-hero-stack on the
   photo-first variant. Tighten its column gap to fit the narrower
   editorial column. */
.page-hero--photo-first .about-hero-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 720px) {
  .page-hero--photo-first-no-image .about-hero-columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

/* Mobile: photo-first variant collapses to stacked single-column.
   Photo on top, editorial stack below — matches the natural reading
   order on narrow viewports. */
@media (max-width: 768px) {
  .page-hero--photo-first {
    padding: var(--space-2xl) 0;
  }

  .page-hero-photo-first-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .page-hero--photo-first .page-hero-figure {
    order: -1; /* Photo first on mobile — emotional anchor reads before copy. */
  }

  .page-hero-figure-frame {
    aspect-ratio: 16 / 10; /* Less tall on mobile so it doesn't dominate. */
  }
}

/* --- Featured-stat block ------------------------------------------------- */

.impact-stat-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-3xl));
  align-items: center;
  margin-bottom: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  border-bottom: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
}

.impact-stat-feature-figure {
  border: 1px solid var(--hairline, rgba(3, 56, 110, 0.12));
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-tint-navy, rgba(3, 56, 110, 0.04));
}

.impact-stat-feature-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.impact-stat-feature-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.impact-stat-feature-num {
  font-family: var(--font-accent);
  font-size: clamp(3.5rem, 6vw + 1.5rem, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue-900);
}

.impact-stat-feature-label {
  font-family: var(--font-accent);
  font-size: clamp(1.25rem, 1vw + 0.875rem, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg1);
  margin: 0;
  max-width: 38ch;
  text-wrap: balance;
}

/* When the featured-stat block is present, the remaining-3-stats dl-grid
   uses a 3-column layout instead of the default 4-column. */
.action-cta-stats--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .impact-stat-feature {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }

  .impact-stat-feature-figure {
    aspect-ratio: 16 / 10;
  }
}

/* --- Mobile donate elevation --------------------------------------------
   v4.6.78: The .mobile-nav-donate-top rules moved into the mobile media
   query block at line ~3345 (paired with the desktop-hide rule at line
   638) so the button never doubles up on desktop alongside the right-
   side .btn-donate. The desktop-applied rules here are retired. */