/*
Theme Name: PharmSurance
Theme URI: https://pharmsurance.com
Author: PharmSurance
Author URI: https://pharmsurance.com
Description: Official PharmSurance WordPress Theme - Connecting seniors with pharmacy-trained Medicare advisors.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pharmsurance
*/

/* ── CSS VARIABLES ── */
:root {
  --navy: #0B1F3A;
  --navy-mid: #122848;
  --navy-light: #1A3A5C;
  --gold: #C9A84C;
  --gold-light: #E2C07A;
  --gold-pale: #F7EDD5;
  --white: #FFFFFF;
  --off-white: #F9F7F3;
  --text-dark: #0B1F3A;
  --text-mid: #3A4A5C;
  --text-light: #7A8A9A;
  --radius: 12px;
  --shadow: 0 8px 40px rgba(11,31,58,0.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Prevents the browser's own scroll-position "correction" when a
     collapsing/expanding element elsewhere on the page (FAQ accordions,
     mobile menu groups) shifts the layout — without this, that shift can
     read as the whole page jumping when someone taps to open something. */
  overflow-anchor: none;
}
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--off-white);
  color: var(--text-dark);
  overflow-x: hidden;
}

/* ── HEADER ── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(11,31,58,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201,168,76,0.2);
  padding: 0 40px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: box-shadow 0.3s;
}

.site-header.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.3); }

.logo-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  width: fit-content;
  align-self: center;
}

.logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.logo-text span { color: var(--gold); }

.logo-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.375px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--gold-light);
  text-transform: uppercase;
  margin-top: 4px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  display: block;
}

.site-nav { display: flex; align-items: center; gap: 28px; }

.site-nav a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: color 0.2s;
  white-space: nowrap;
}

.site-nav a:hover { color: var(--gold-light); }

.btn-member {
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--gold) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 6px;
  transition: all 0.25s !important;
  white-space: nowrap;
}

.btn-member:hover {
  background: var(--gold) !important;
  color: var(--navy) !important;
}

/* ── FOOTER ── */
.site-footer {
  background: var(--navy);
  padding: 60px 40px 30px;
  border-top: 1px solid rgba(201,168,76,0.15);
}

.footer-inner { max-width: 1200px; margin: 0 auto; }

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand { text-align: left; }
.footer-brand .logo-wrap { align-items: center; margin: 0; }
.footer-brand .logo-text { font-size: 1.68rem; margin-bottom: 0; }
.footer-brand .logo-tagline {
  font-size: 10px;
  margin-bottom: 14px;
  text-align: center;
}

.footer-brand p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  max-width: 280px;
  margin-bottom: 12px;
}

.footer-phone a {
  color: var(--gold-light);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.footer-states {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
}

.footer-col h4 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.footer-col a {
  display: block;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.2s;
}

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

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p { font-size: 0.775rem; color: rgba(255,255,255,0.3); }
.footer-tagline { font-family: 'Cormorant Garamond', serif; font-size: 0.95rem; color: var(--gold); font-style: italic; }

.footer-tpmo {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-disclaimer {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.28);
  line-height: 1.6;
  margin-bottom: 10px;
}
.footer-disclaimer:last-child { margin-bottom: 0; }
.footer-disclaimer strong { color: rgba(255,255,255,0.5); }
.footer-disclaimer a { color: rgba(201,168,76,0.6); text-decoration: underline; }
.footer-disclaimer a:hover { color: var(--gold-light); }

/* ── CMS-REQUIRED TPMO DISCLAIMER ─────────────────────────────────────────
   CMS requires this disclaimer be "prominently displayed" on TPMO websites.
   It is deliberately styled at higher contrast and larger type than the other
   footer fine print, and boxed so it reads as a notice rather than legalese.
   Do not reduce the contrast or size of these rules.
   Reference: 42 CFR 422.2267(e)(41) / AHIP Module 4.
   ───────────────────────────────────────────────────────────────────────── */
.footer-disclaimer.footer-tpmo-required {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.7;
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.28);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.footer-disclaimer.footer-tpmo-required strong { color: var(--gold-light); }
.footer-disclaimer.footer-tpmo-required a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Page-level TPMO disclaimer, for use on navy CTA bands. Same prominence rule. */
.ps-tpmo-inline {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 14px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,168,76,0.3);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
  text-align: left;
  position: relative;
  z-index: 2;
}
.ps-tpmo-inline strong { color: var(--gold-light); }
.ps-tpmo-inline a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }

/* ── SHARED SECTION STYLES ── */
.section-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.section-header { text-align: center; max-width: 640px; margin: 0 auto 64px; }

.section-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 16px;
}

.section-header p { color: var(--text-mid); font-size: 1rem; line-height: 1.7; }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block;
  padding: 15px 36px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: var(--white);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.25s;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(11,31,58,0.3);
}

.btn-gold {
  display: inline-block;
  padding: 15px 36px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.25s;
  border: none;
  cursor: pointer;
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,168,76,0.4);
}

/* ── PAGE WRAPPER ── */
.page-content { padding-top: 0; }

/* ── WORDPRESS RESET ── */
.wp-site-blocks,
.wp-block-group,
.entry-content,
.post-content,
body.page,
body.home {
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove any WordPress theme default margins */
body { margin: 0; padding: 0; }

/* Eliminate white gap between header and hero */
.page-content > section:first-child,
.page-content > div:first-child {
  margin-top: 0 !important;
}

/* Admin bar offset */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .mobile-menu { top: 108px; }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-up {
  animation: fadeUp 0.7s ease forwards;
  opacity: 0;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.55s; }
.delay-5 { animation-delay: 0.7s; }

/* Elegant materialize -- used for the two homepage audience cards.
   Blur resolving into focus (like a camera settling), combined with a
   gentle scale-and-rise and a brief gold glow at the moment it settles
   into place. Softer and more premium-feeling than a geometric wipe --
   no hard edges anywhere in the motion. */
@keyframes materializeElegant {
  0% {
    opacity: 0;
    filter: blur(14px);
    transform: scale(0.93) translateY(16px);
    box-shadow: 0 0 0 rgba(201,168,76,0);
  }
  40% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.015) translateY(-2px);
    box-shadow: 0 0 50px rgba(201,168,76,0.4);
  }
  73% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.015) translateY(-2px);
    box-shadow: 0 0 50px rgba(201,168,76,0.4);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) translateY(0);
    box-shadow: 0 0 0 rgba(201,168,76,0);
  }
}
.materialize-diagonal {
  animation: materializeElegant 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 1s;
  opacity: 0;
}
.materialize-diagonal.materialize-second {
  animation-delay: 2.25s;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .site-header { padding: 0 20px; }
  .site-nav a:not(.btn-member) { display: none; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-brand { text-align: center; }
  .footer-brand .logo-wrap { align-items: center; margin: 0 auto; }
  .logo-tagline { font-size: 13.86px; }
}

/* ── PS MESSAGE ── */
.ps-message {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 28px;
  border: 1px solid rgba(201,168,76,0.35);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  background: rgba(201,168,76,0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* PS: label and text flow as one inline paragraph */
.ps-inline {
  font-size: 0.88rem;
  color: var(--text-mid);
  line-height: 1.75;
  font-style: italic;
}

.ps-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold) !important;
  font-style: italic;
  margin-right: 4px;
}

.ps-inline strong {
  color: var(--navy);
  font-style: normal;
}

.ps-link {
  color: var(--navy);
  font-weight: 600;
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(11,31,58,0.35);
  transition: text-decoration-color 0.2s;
}

.ps-link:hover {
  text-decoration-color: var(--navy);
}

.ps-btn {
  display: inline-block;
  padding: 8px 20px;
  background: var(--navy);
  color: var(--white) !important;
  text-decoration: none !important;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.03em;
  transition: all 0.2s;
  white-space: nowrap;
  align-self: flex-start;
}

.ps-btn:hover {
  background: var(--gold);
  color: var(--navy) !important;
}

.ps-message.ps-light { /* same as default */ }

/* ════════════════════════════════════════════════
   GLASSMORPHISM + SCROLL STORYTELLING (site-wide)
   ════════════════════════════════════════════════ */

/* ── Ambient background orbs (for navy sections) ── */
.glass-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  z-index: 0;
}
.glass-orb-gold {
  background: radial-gradient(circle, rgba(201,168,76,0.13) 0%, transparent 70%);
}
.glass-orb-blue {
  background: radial-gradient(circle, rgba(100,149,237,0.07) 0%, transparent 70%);
}

/* ── Glass card base ── */
.glass-card {
  background: rgba(255,255,255,0.055);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Top edge glow line */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.5), transparent);
  z-index: 1;
}

/* Shimmer sweep on hover */
.glass-card::after {
  content: '';
  position: absolute;
  top: -100%; left: -80%;
  width: 50%; height: 300%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.045) 50%, transparent 60%);
  transform: skewX(-15deg);
  transition: left 0.65s ease;
  pointer-events: none;
  z-index: 1;
}

.glass-card:hover {
  transform: translateY(-5px) scale(1.015);
  background: rgba(255,255,255,0.09);
  border-color: rgba(201,168,76,0.3);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.45),
    0 0 0 1px rgba(201,168,76,0.12),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

.glass-card:hover::after { left: 130%; }

/* Glass card content sits above pseudo-elements */
.glass-card > * { position: relative; z-index: 2; }

/* ── Subtle glass (non-hover, for static panels) ── */
.glass-panel {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.glass-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), rgba(201,168,76,0.2), transparent);
  z-index: 1;
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger helpers */
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── SCROLL TIMELINE ── */
.story-timeline {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}

.story-spine {
  position: absolute;
  left: 50%;
  top: 22px; bottom: 22px;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(201,168,76,0.12);
  z-index: 0;
}

.story-spine-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  background: linear-gradient(180deg, var(--gold), var(--gold-light));
  box-shadow: 0 0 10px rgba(201,168,76,0.45);
  border-radius: 2px;
  transition: height 0.12s linear;
}

.story-step {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  margin-bottom: 64px;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.story-step:last-child { margin-bottom: 0; }
.story-step.visible { opacity: 1; transform: translateY(0); }

.story-left { text-align: right; padding-right: 36px; padding-top: 6px; }
.story-right { text-align: left; padding-left: 36px; padding-top: 6px; }
.story-empty {}

.story-node {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
}

.story-dot {
  width: 42px; height: 42px;
  background: var(--navy);
  border: 2px solid rgba(201,168,76,0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.55s;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.story-step.visible .story-dot {
  border-color: var(--gold);
  background: rgba(201,168,76,0.1);
  box-shadow: 0 0 0 5px rgba(201,168,76,0.08), 0 0 18px rgba(201,168,76,0.2);
}

.story-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  padding: 22px 20px;
  transition: background 0.55s, border-color 0.55s;
  position: relative;
  overflow: hidden;
}
.story-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.55s;
}
.story-step.visible .story-card {
  background: rgba(255,255,255,0.08);
  border-color: rgba(201,168,76,0.2);
}
.story-step.visible .story-card::before { opacity: 1; }

.story-week {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 7px;
}
.story-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 7px;
  line-height: 1.25;
}
.story-card p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.72;
}

@media (max-width: 700px) {
  .story-step {
    grid-template-columns: 44px 1fr;
    grid-template-areas: "node content";
  }
  .story-empty { display: none; }
  .story-node { grid-area: node; }
  .story-left {
    grid-area: content;
    text-align: left;
    padding-right: 0;
    padding-left: 18px;
    padding-top: 6px;
    display: block;
  }
  .story-right {
    grid-area: content;
    display: block !important;
    padding-left: 18px;
    text-align: left;
  }
  .story-spine { left: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-step { opacity: 1; transform: none; transition: none; }
}

/* ── HERO CANVAS (wavy dot effect — shared across all pages) ── */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ── INLINE CITATIONS (FAQ pages) ── */
sup a.cite-ref,
a.cite-ref {
  font-size: 0.62em;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  vertical-align: super;
  line-height: 0;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0;
  transition: color 0.15s;
}
sup a.cite-ref:hover,
a.cite-ref:hover { color: var(--gold-light); text-decoration: underline; }

/* ── SHARED CONSENT BLOCK (lead forms — Medicare Help + Contact page) ─────
   Moved here from a page-specific <style> block so both forms use the exact
   same markup/styling instead of two hand-maintained copies that can drift.
   See COMPLIANCE-README.md §3 before editing checkbox behavior. ── */
.consent-block {
  background: var(--off-white);
  border: 1px solid rgba(11,31,58,0.10);
  border-radius: 10px;
  padding: 18px 18px 14px;
  margin-bottom: 18px;
}
.consent-block.consent-block-optional {
  background: #fff;
  border-style: dashed;
}
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  cursor: pointer;
}
.consent-row:last-of-type { margin-bottom: 10px; }

/* Real checkbox, restyled. Keeps native focus, keyboard access,
   screen-reader semantics, and browser validation. Do not replace with a
   div-based fake backed by a hidden input — see COMPLIANCE-README §3.
   The checkmark itself lives on .cb-check, a sibling span, rather than
   the input's own ::after — some mobile browsers (notably iOS Safari,
   which a large share of this site's visitors use) clip generated content
   to a form control's own box, which silently shrinks an oversized
   overflowing checkmark back down. A sibling span has no such limit. */
.cb-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.consent-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 2px 0 0;
  border: 2px solid var(--gold);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.consent-row input[type="checkbox"]:checked {
  background: var(--navy);
  border-color: var(--navy);
}
.cb-wrap .cb-check {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 28px; height: 28px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5L9.5 18L20 6' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0;
  pointer-events: none;
  z-index: 50; /* must always paint above the checkbox input itself — a page-
                  specific rule (form-card's input z-index:20) was stacking
                  the input on top of this, hiding the checkmark visually */
  transition: opacity 0.1s;
}
.cb-wrap input[type="checkbox"]:checked ~ .cb-check {
  opacity: 1;
}
.consent-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.consent-row input[type="checkbox"]:invalid {
  border-color: #b3261e;
}
.consent-text {
  font-size: 0.83rem;
  color: var(--text-mid);
  line-height: 1.6;
}
.consent-text strong { color: var(--navy); font-weight: 600; }
.consent-req {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-left: 4px;
}
.consent-opt {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-left: 4px;
}
.consent-footnote {
  font-size: 0.76rem;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(11,31,58,0.07);
}
.consent-footnote a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* ── SHARED SUCCESS PANEL (Contact + Medicare Help forms, on-page
   confirmation shown in place of the form after a successful submit) ── */
.ps-success-panel {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 48px 40px;
  text-align: center;
  animation: psSuccessIn 0.5s ease both;
  scroll-margin-top: 110px;
}
@keyframes psSuccessIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.ps-success-icon {
  width: 76px; height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0%, var(--gold-light) 100%);
  box-shadow: 0 0 0 8px rgba(201,168,76,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-success-icon svg { width: 34px; height: 34px; }
.ps-success-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 14px;
}
.ps-success-body {
  font-size: 0.98rem;
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 420px;
  margin: 0 auto 32px;
}
.ps-success-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
  margin: 0 auto 32px;
  text-align: left;
}
.ps-success-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ps-success-step-num {
  width: 28px; height: 28px;
  min-width: 28px;
  background: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
  margin-top: 1px;
}
.ps-success-step-text {
  font-size: 0.88rem;
  color: var(--text-mid);
  line-height: 1.55;
}
.ps-success-step-text strong {
  color: var(--navy);
  display: block;
  margin-bottom: 2px;
  font-size: 0.92rem;
}
.ps-success-home {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 640px) {
  .ps-success-panel { padding: 36px 22px; }
  .ps-success-title { font-size: 1.65rem; }
}

/* ── SHARED SOA / SCOPE NOTE BOX ────────────────────────────────────────
   "Why this page stays general" callout. Explains the Scope of Appointment
   requirement in plain, friendly terms — used on product pages to set
   expectations before someone reaches the CTA. Two variants: light (default,
   for cream/white sections) and navy (for dark-background sections).
   Glassmorphic — matches the frosted-glass treatment already used on the
   Guides page handbook card. margin:0 auto fixes a real bug: max-width
   without auto margins left these hugging the left edge of wider parent
   containers instead of centering. ── */
.soa-note {
  background: rgba(201,168,76,0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(201,168,76,0.25);
  border-left: 4px solid var(--gold);
  border-radius: 14px;
  padding: 22px 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 960px;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(11,31,58,0.05);
}
.soa-note-icon { font-size: 1.7rem; flex-shrink: 0; line-height: 1.1; }
.soa-note-body { flex: 1; }
.soa-note-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #a4842f; margin-bottom: 6px;
}
.soa-note h4 {
  font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 700;
  color: var(--navy); margin-bottom: 8px;
}
.soa-note p { font-size: 0.88rem; color: var(--text-mid); line-height: 1.75; margin: 0; }
.soa-note a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.soa-note-actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.soa-note-action-box {
  flex: 1 1 190px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  background: linear-gradient(135deg, rgba(201,168,76,0.82), rgba(226,192,122,0.68));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.45);
  color: var(--navy) !important;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  border-radius: 10px;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(201,168,76,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.soa-note-action-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(201,168,76,0.4), inset 0 1px 0 rgba(255,255,255,0.55);
}
.soa-note-action-icon { font-size: 1.25rem; line-height: 1; }
@media (max-width: 640px) {
  .soa-note-actions { flex-direction: column; }
  .soa-note-action-box {
    flex: 0 1 auto;
    padding: 7px 14px;
    gap: 6px;
    font-size: 0.74rem;
    border-radius: 8px;
  }
  .soa-note-action-icon { font-size: 0.95rem; }
}

.soa-note.soa-note-navy {
  background: rgba(255,255,255,0.06);
  border-color: rgba(201,168,76,0.28);
}
.soa-note.soa-note-navy .soa-note-label { color: var(--gold-light); }
.soa-note.soa-note-navy h4 { color: #fff; }
.soa-note.soa-note-navy p { color: rgba(255,255,255,0.7); }
.soa-note.soa-note-navy a { color: var(--gold-light); }

@media (max-width: 640px) {
  .soa-note { flex-direction: column; padding: 20px 20px; }
}

/* ── SHARED GOV RESOURCE BOX ────────────────────────────────────────────
   Compact "review the official Medicare & You handbook" callout — a
   smaller companion to the full handbook section on the Guides page.
   Pairs with .soa-note: light box explains why we stay general, this
   dark box gives them somewhere to go deeper on their own before talking
   to an advisor, and reminds them the advisor still personalizes it.
   Centered layout with a real button (was a left-aligned row with a plain
   text link) — glassmorphic, same frosted treatment as the Guides page
   handbook card, layered over the navy gradient. ── */
.gov-resource-box {
  background: linear-gradient(135deg, rgba(20,44,82,0.92), rgba(11,31,58,0.92));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 18px;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(11,31,58,0.18);
}
.gov-resource-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.gov-resource-icon {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 14px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; box-shadow: 0 6px 18px rgba(201,168,76,0.35);
  margin-bottom: 18px;
}
.gov-resource-body { width: 100%; }
.gov-resource-badge {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-light); margin-bottom: 8px;
  display: block; text-align: center;
}
.gov-resource-body h4 {
  font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 700;
  color: #fff; margin-bottom: 12px; text-align: center;
}
.gov-resource-body p {
  font-size: 0.87rem; color: rgba(255,255,255,0.65); line-height: 1.8; margin-bottom: 22px;
  text-align: center;
}
.gov-resource-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy);
  border-radius: 10px; font-weight: 700; font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.25s;
  box-shadow: 0 4px 16px rgba(201,168,76,0.25);
}
.gov-resource-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(201,168,76,0.4);
  text-decoration: none;
}
.gov-resource-note {
  font-size: 0.78rem; color: rgba(255,255,255,0.45); line-height: 1.7;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}

@media (max-width: 640px) {
  .gov-resource-box { padding: 30px 26px; }
}