/* ===========================
       DESIGN TOKENS
    =========================== */
    :root,
    [data-theme="light"] {
      /* Blue-focused palette for senior insurance */
      --color-bg: #f4f7fb;
      --color-surface: #ffffff;
      --color-surface-2: #eef3fa;
      --color-surface-offset: #dce8f5;
      --color-divider: #c8d9ed;
      --color-border: #b5cce4;

      /* Text */
      --color-text: #1a2b40;
      --color-text-muted: #4a6080;
      --color-text-faint: #8aa4bf;
      --color-text-inverse: #f4f7fb;

      /* Primary — calm deep blue */
      --color-primary: #1a5fa8;
      --color-primary-hover: #144d8c;
      --color-primary-active: #0f3d6f;
      --color-primary-highlight: #d0e4f7;

      /* Accent — warm sky */
      --color-accent: #3a8cc7;
      --color-accent-light: #e8f3fb;

      /* Shadows */
      --shadow-sm: 0 1px 3px rgba(26, 43, 64, 0.07);
      --shadow-md: 0 4px 14px rgba(26, 43, 64, 0.10);
      --shadow-lg: 0 12px 36px rgba(26, 43, 64, 0.14);

      /* Radius */
      --radius-sm: 0.375rem;
      --radius-md: 0.625rem;
      --radius-lg: 1rem;
      --radius-xl: 1.5rem;
      --radius-full: 9999px;

      /* Transitions */
      --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

      /* Type scale */
      --text-xs:   clamp(0.75rem,  0.7rem + 0.25vw, 0.875rem);
      --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
      --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
      --text-lg:   clamp(1.125rem, 1rem + 0.75vw,   1.5rem);
      --text-xl:   clamp(1.5rem,   1.2rem + 1.25vw,  2.25rem);
      --text-2xl:  clamp(2rem,     1.2rem + 2.5vw,   3.5rem);
      --text-3xl:  clamp(2.5rem,   1rem + 4vw,       4.5rem);

      /* Spacing */
      --space-1:  0.25rem;
      --space-2:  0.5rem;
      --space-3:  0.75rem;
      --space-4:  1rem;
      --space-5:  1.25rem;
      --space-6:  1.5rem;
      --space-8:  2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;
      --space-24: 6rem;

      /* Content widths */
      --content-narrow:  680px;
      --content-default: 980px;
      --content-wide:    1200px;

      /* Fonts */
      --font-display: 'Playfair Display', Georgia, serif;
      --font-body:    'Source Sans 3', 'Helvetica Neue', sans-serif;
    }

    [data-theme="dark"] {
      --color-bg: #0d1927;
      --color-surface: #121f30;
      --color-surface-2: #162436;
      --color-surface-offset: #1a2c40;
      --color-divider: #1f3348;
      --color-border: #2a4260;
      --color-text: #d0dcea;
      --color-text-muted: #7896b2;
      --color-text-faint: #3f5a78;
      --color-text-inverse: #0d1927;
      --color-primary: #5aa0d8;
      --color-primary-hover: #74b2e4;
      --color-primary-active: #9ac6ed;
      --color-primary-highlight: #1a3452;
      --color-accent: #72b8e8;
      --color-accent-light: #162030;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
      --shadow-md: 0 4px 14px rgba(0,0,0,0.35);
      --shadow-lg: 0 12px 36px rgba(0,0,0,0.45);
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme]) {
        --color-bg: #0d1927;
        --color-surface: #121f30;
        --color-surface-2: #162436;
        --color-surface-offset: #1a2c40;
        --color-divider: #1f3348;
        --color-border: #2a4260;
        --color-text: #d0dcea;
        --color-text-muted: #7896b2;
        --color-text-faint: #3f5a78;
        --color-text-inverse: #0d1927;
        --color-primary: #5aa0d8;
        --color-primary-hover: #74b2e4;
        --color-primary-active: #9ac6ed;
        --color-primary-highlight: #1a3452;
        --color-accent: #72b8e8;
        --color-accent-light: #162030;
      }
    }

    /* ===========================
       BASE RESET
    =========================== */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      -webkit-text-size-adjust: none;
      text-size-adjust: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      scroll-behavior: smooth;
      scroll-padding-top: var(--space-16);
    }

    body {
      min-height: 100dvh;
      line-height: 1.65;
      font-family: var(--font-body);
      font-size: var(--text-base);
      color: var(--color-text);
      background-color: var(--color-bg);
    }

    img, picture, svg { display: block; max-width: 100%; height: auto; }
    ul[role="list"], ol[role="list"] { list-style: none; }
    input, button, textarea, select { font: inherit; color: inherit; }
    h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.15; }
    p, li, figcaption { text-wrap: pretty; }

    button { cursor: pointer; background: none; border: none; }

    a, button, [role="button"] {
      transition: color var(--transition), background var(--transition),
                  border-color var(--transition), box-shadow var(--transition),
                  opacity var(--transition);
    }

    :focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 3px;
      border-radius: var(--radius-sm);
    }

    ::selection {
      background: var(--color-primary-highlight);
      color: var(--color-text);
    }

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

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ===========================
       LAYOUT UTILITIES
    =========================== */
    .container {
      width: min(var(--content-default), 100% - var(--space-8));
      margin-inline: auto;
    }
    .container--wide {
      width: min(var(--content-wide), 100% - var(--space-8));
      margin-inline: auto;
    }
    .container--narrow {
      width: min(var(--content-narrow), 100% - var(--space-8));
      margin-inline: auto;
    }

    /* ===========================
       HEADER / NAV
    =========================== */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: color-mix(in srgb, var(--color-surface) 92%, transparent);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--color-divider);
      transition: box-shadow 0.3s var(--transition);
    }

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

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-6);
      padding-block: var(--space-4);
    }

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

    .logo-mark {
      flex-shrink: 0;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }

    .logo-name {
      font-family: var(--font-display);
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--color-primary);
      letter-spacing: -0.01em;
    }

    .logo-tag {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      font-weight: 400;
    }

    /* Nav links */
    .site-nav {
      display: flex;
      align-items: center;
      gap: var(--space-6);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: var(--space-5);
      list-style: none;
    }

    .nav-links a {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-text-muted);
      text-decoration: none;
      padding: var(--space-1) 0;
      border-bottom: 2px solid transparent;
    }

    .nav-links a:hover {
      color: var(--color-primary);
      border-bottom-color: var(--color-primary);
    }

    .theme-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      height: 2.25rem;
      border-radius: var(--radius-md);
      color: var(--color-text-muted);
      background: var(--color-surface-2);
      border: 1px solid var(--color-border);
      flex-shrink: 0;
    }

    .theme-toggle:hover {
      color: var(--color-primary);
      background: var(--color-primary-highlight);
      border-color: var(--color-primary);
    }

    /* Mobile hamburger */
    .nav-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: var(--space-2);
      color: var(--color-text);
    }

    .nav-toggle span {
      display: block;
      width: 22px;
      height: 2px;
      background: currentColor;
      border-radius: var(--radius-full);
      transition: transform var(--transition), opacity var(--transition);
    }

    @media (max-width: 680px) {
      .nav-toggle { display: flex; }
      .nav-links { display: none; }
      .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-divider);
        padding: var(--space-6) var(--space-8);
        gap: var(--space-4);
        box-shadow: var(--shadow-md);
      }
    }

    /* ===========================
       HERO SECTION
    =========================== */
    .hero {
      position: relative;
      overflow: hidden;
      padding-block: clamp(var(--space-16), 10vw, var(--space-24));
      background: linear-gradient(145deg, #0e2d52 0%, #1a5fa8 50%, #3a8cc7 100%);
    }

    /* Subtle geometric pattern overlay */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Wave bottom edge */
    .hero::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      height: 60px;
      background: var(--color-bg);
      clip-path: ellipse(55% 100% at 50% 100%);
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 760px;
      margin-inline: auto;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.70);
      margin-bottom: var(--space-5);
    }

    .hero-eyebrow-dot {
      width: 6px;
      height: 6px;
      border-radius: var(--radius-full);
      background: rgba(255,255,255,0.5);
    }

    .hero h1 {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-weight: 700;
      color: #ffffff;
      margin-bottom: var(--space-6);
      letter-spacing: -0.02em;
    }

    .hero-lead {
      font-size: var(--text-lg);
      color: rgba(255,255,255,0.82);
      line-height: 1.65;
      max-width: 600px;
      margin-inline: auto;
      margin-bottom: var(--space-10);
      font-weight: 300;
    }

    .hero-cta-group {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4);
      justify-content: center;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-8);
      font-size: var(--text-sm);
      font-weight: 600;
      border-radius: var(--radius-full);
      text-decoration: none;
      border: 2px solid transparent;
      cursor: pointer;
      white-space: nowrap;
    }

    .btn-primary {
      background: #ffffff;
      color: var(--color-primary);
      border-color: #ffffff;
    }

    .btn-primary:hover {
      background: var(--color-surface-2);
      color: var(--color-primary-hover);
    }

    .btn-outline {
      background: transparent;
      color: #ffffff;
      border-color: rgba(255,255,255,0.50);
    }

    .btn-outline:hover {
      background: rgba(255,255,255,0.10);
      border-color: rgba(255,255,255,0.80);
    }

    /* Trust badges */
    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-5);
      margin-top: var(--space-10);
    }

    .trust-badge {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.65);
    }

    .trust-badge svg {
      opacity: 0.65;
    }

    /* ===========================
       SECTION COMMONS
    =========================== */
    .section {
      padding-block: clamp(var(--space-12), 8vw, var(--space-24));
    }

    .section-label {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: var(--space-3);
    }

    .section-heading {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 700;
      color: var(--color-text);
      letter-spacing: -0.02em;
      margin-bottom: var(--space-4);
    }

    .section-subhead {
      font-size: var(--text-base);
      color: var(--color-text-muted);
      max-width: 56ch;
      line-height: 1.65;
    }

    .section-header {
      margin-bottom: var(--space-10);
    }

    .section-header--center {
      text-align: center;
    }

    .section-header--center .section-subhead {
      margin-inline: auto;
    }

    /* ===========================
       WHAT THIS SITE OFFERS
    =========================== */
    .offer-section {
      background: var(--color-surface);
    }

    .offer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--space-6);
    }

    .offer-card {
      background: var(--color-bg);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-lg);
      padding: var(--space-8);
      transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
    }

    .offer-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-3px);
      border-color: var(--color-primary-highlight);
    }

    .offer-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-md);
      background: var(--color-primary-highlight);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--space-5);
      color: var(--color-primary);
    }

    [data-theme="dark"] .offer-icon {
      background: var(--color-primary-highlight);
    }

    .offer-card h3 {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 600;
      color: var(--color-text);
      margin-bottom: var(--space-3);
      letter-spacing: -0.01em;
    }

    .offer-card p {
      font-size: var(--text-base);
      color: var(--color-text-muted);
      line-height: 1.65;
    }

    /* ===========================
       COVERAGE & PLANNING SPLIT
    =========================== */
    .coverage-section {
      background: var(--color-bg);
    }

    .coverage-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-12);
      align-items: start;
    }

    @media (max-width: 720px) {
      .coverage-split { grid-template-columns: 1fr; gap: var(--space-10); }
    }

    .coverage-visual {
      position: relative;
      border-radius: var(--radius-xl);
      overflow: hidden;
      background: linear-gradient(135deg, #1a5fa8 0%, #0e3d72 100%);
      padding: var(--space-10);
      min-height: 360px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .coverage-visual-icon {
      position: absolute;
      top: var(--space-8);
      right: var(--space-8);
      opacity: 0.15;
    }

    .coverage-visual-quote {
      position: relative;
      z-index: 1;
    }

    .coverage-visual-quote blockquote {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      color: rgba(255,255,255,0.90);
      font-style: italic;
      line-height: 1.5;
      margin-bottom: var(--space-4);
    }

    .coverage-visual-quote cite {
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.55);
      font-style: normal;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .coverage-content p {
      font-size: var(--text-base);
      color: var(--color-text-muted);
      line-height: 1.70;
      margin-bottom: var(--space-5);
    }

    .coverage-content p:last-child { margin-bottom: 0; }

    .coverage-list {
      margin: var(--space-6) 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .coverage-list li {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      font-size: var(--text-base);
      color: var(--color-text-muted);
      line-height: 1.55;
    }

    .check-icon {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      border-radius: var(--radius-full);
      background: var(--color-primary-highlight);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
      color: var(--color-primary);
    }

    /* ===========================
       TOPICS / START SECTION
    =========================== */
    .topics-section {
      background: var(--color-surface-2);
    }

    .topics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--space-5);
    }

    .topic-card {
      background: var(--color-surface);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      text-decoration: none;
      color: var(--color-text);
      transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
    }

    .topic-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
      border-color: var(--color-primary);
    }

    .topic-number {
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--color-primary);
      text-transform: uppercase;
    }

    .topic-card h3 {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 600;
      color: var(--color-text);
      letter-spacing: -0.01em;
      line-height: 1.25;
    }

    .topic-card p {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.60;
    }

    .topic-arrow {
      display: flex;
      align-items: center;
      gap: var(--space-1);
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--color-primary);
      margin-top: auto;
      padding-top: var(--space-2);
    }

    /* ===========================
       EMOTIONAL / FAMILY SECTION
    =========================== */
    .family-section {
      background: var(--color-surface);
    }

    .family-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-12);
      align-items: center;
    }

    @media (max-width: 720px) {
      .family-inner { grid-template-columns: 1fr; gap: var(--space-8); }
    }

    .family-content p {
      font-size: var(--text-base);
      color: var(--color-text-muted);
      line-height: 1.70;
      margin-bottom: var(--space-5);
    }

    .family-content p:last-child { margin-bottom: 0; }

    .family-visual {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .stat-card {
      background: var(--color-bg);
      border: 1px solid var(--color-divider);
      border-left: 4px solid var(--color-primary);
      border-radius: var(--radius-md);
      padding: var(--space-5) var(--space-6);
    }

    .stat-card h4 {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 700;
      color: var(--color-primary);
      letter-spacing: -0.03em;
      margin-bottom: var(--space-1);
    }

    .stat-card p {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }

    /* ===========================
       CALL TO ACTION BANNER
    =========================== */
    .cta-banner {
      background: linear-gradient(135deg, #0e2d52 0%, #1a5fa8 100%);
      padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    }

    .cta-banner-inner {
      text-align: center;
      max-width: 620px;
      margin-inline: auto;
    }

    .cta-banner h2 {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 700;
      color: #ffffff;
      letter-spacing: -0.02em;
      margin-bottom: var(--space-5);
    }

    .cta-banner p {
      font-size: var(--text-base);
      color: rgba(255,255,255,0.75);
      line-height: 1.65;
      margin-bottom: var(--space-8);
      max-width: 52ch;
      margin-inline: auto;
      margin-bottom: var(--space-8);
    }

    /* ===========================
       KEY TERMS GLOSSARY
    =========================== */
    .glossary-section {
      background: var(--color-bg);
    }

    .glossary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--space-5);
    }

    .glossary-item {
      background: var(--color-surface);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-md);
      padding: var(--space-5) var(--space-6);
    }

    .glossary-term {
      font-family: var(--font-display);
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--color-primary);
      margin-bottom: var(--space-2);
    }

    .glossary-def {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.60;
    }

    /* ===========================
       FOOTER
    =========================== */
    .site-footer {
      background: var(--color-surface);
      border-top: 1px solid var(--color-divider);
      padding-block: var(--space-12);
    }

    .footer-inner {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: var(--space-10);
    }

    @media (max-width: 640px) {
      .footer-inner { grid-template-columns: 1fr; gap: var(--space-8); }
    }

    .footer-brand p {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.65;
      margin-top: var(--space-4);
      max-width: 36ch;
    }

    .footer-col h4 {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--color-text);
      margin-bottom: var(--space-4);
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      list-style: none;
    }

    .footer-links a {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      text-decoration: none;
    }

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

    .footer-bottom {
      margin-top: var(--space-10);
      padding-top: var(--space-6);
      border-top: 1px solid var(--color-divider);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-4);
    }

    .footer-bottom p {
      font-size: var(--text-xs);
      color: var(--color-text-faint);
    }

    .footer-disclaimer {
      font-size: var(--text-xs);
      color: var(--color-text-faint);
      max-width: 62ch;
      line-height: 1.55;
    }

    /* ===========================
       DIVIDER
    =========================== */
    .section-divider {
      width: 60px;
      height: 3px;
      background: var(--color-primary);
      border-radius: var(--radius-full);
      margin: var(--space-4) 0 var(--space-6);
    }

    .section-divider--center {
      margin-inline: auto;
    }