/* From: styles.css */
/* From: styles.css */
/* From: styles.css */
/* From: styles.css */
/* From: wio-life-inline-popup-v10/styles.css */
/* From: wio-life-inline-popup-v7/styles.css */
:root {
      /* Dynamic brand colors from project settings (with fallbacks) */
      --primary: #F58220;
      --primary-hover: #7639BD;
      --primary-light: #faf5ff;
      --text-dark: #111827;
      --text-gray: #4b5563;
      --text-light: #6b7280;
      --bg-white: #ffffff;
      --bg-gray: #f9fafb;
      --border-gray: #e5e7eb;
      --green-light: #ecfdf5;
      --green-text: #7639BD;
      --amber-light: #fef3c7;
      --amber-text: #7639BD;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
      --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--text-dark);
      line-height: 1.6;
      background: linear-gradient(180deg, #ffffff 0%, #faf7fe 50%, #f7f3fd 100%);
      background-attachment: fixed;
      min-height: 100vh;
    }

    /* Cursor-responsive gradient overlay (desktop only) */
    .cursor-glow {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.3s ease;
      background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(245, 130, 32, 0.04) 0%,
        rgba(245, 130, 32, 0.02) 25%,
        transparent 50%
      );
    }
    .cursor-glow.active {
      opacity: 1;
    }
    /* Disable on touch devices */
    @media (hover: none) {
      .cursor-glow { display: none; }
    }

    /* Entrance Animations */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }
    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-30px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }
    .animate-fade-in-up { animation: fadeInUp 0.4s ease-out forwards; }
    .animate-fade-in { animation: fadeIn 0.35s ease-out forwards; }
    .animate-scale-in { animation: scaleIn 0.35s ease-out forwards; }
    .animate-slide-left { animation: slideInLeft 0.4s ease-out forwards; }
    .stagger-1 { animation-delay: 0.05s; opacity: 0; }
    .stagger-2 { animation-delay: 0.1s; opacity: 0; }
    .stagger-3 { animation-delay: 0.15s; opacity: 0; }
    .stagger-4 { animation-delay: 0.2s; opacity: 0; }
    .container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
    @media (min-width: 640px) { .container { padding: 0 32px; } }
    @media (min-width: 1024px) { .container { padding: 0 6%; } }
    @media (min-width: 1280px) { .container { padding: 0 7%; } }
    @media (min-width: 1440px) { .container { padding: 0 8%; } }
    @media (min-width: 1920px) { .container { padding: 0 10%; } }

    /* Header uses same padding as hero for alignment */
    .header .container { max-width: none; }

    /* Header - Modern Floating Design */
    .header {
      position: fixed;
      top: 12px;
      left: 12px;
      right: 12px;
      z-index: 50;
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 10px 20px;
      border-radius: 12px;
      box-shadow: 0 2px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
      transition: all 0.3s ease;
    }
    .header.scrolled {
      background: rgba(255,255,255,0.98);
      box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
    }
    .header.header-hidden {
      transform: translateY(-120%);
      opacity: 0;
    }
    .header-content { display: flex; align-items: center; justify-content: space-between; }
    .logo { height: 44px; width: auto; transition: transform 0.3s ease; }
    @media (min-width: 640px) { .logo { height: 48px; } }
    @media (min-width: 768px) {
      .header { top: 16px; left: 16px; right: 16px; padding: 12px 24px; }
      .logo { height: 50px; }
    }
    @media (min-width: 1024px) {
      .header { left: 20px; right: 20px; }
    }
    @media (min-width: 1280px) {
      .header { left: 24px; right: 24px; max-width: none; }
    }
    .header-cta { display: inline-flex; align-items: center; justify-content: center; background: #F58220; color: white; font-weight: 700; padding: 12px 20px; border-radius: 12px; text-decoration: none; font-size: 15px; transition: all 0.2s; min-height: 44px; border: none; cursor: pointer; }
    .header-cta:hover { background: #7639BD; transform: scale(1.02); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }

    /* Mobile Header: Centered logo initially, expands to show CTA on scroll */
    @media (max-width: 768px) {
      .header-content {
        justify-content: center; /* Center by default */
        transition: justify-content 0.3s ease;
      }

      .header-cta {
        /* Collapse the button initially */
        max-width: 0;
        padding: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        transform: scale(0.8);
        pointer-events: none;
        border: none;
        font-size: 14px;
        /* Smooth transition */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      /* When scrolled past hero CTA - show header CTA with reduced sizes */
      .header.show-cta .header-content {
        justify-content: space-between;
      }

      .header.show-cta .logo {
        height: 28px; /* Reduced from 44px */
      }

      .header.show-cta .header-cta {
        max-width: 140px;
        padding: 6px 12px;
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
        font-size: 12px;
      }
    }

    /* Hero - Clean White with Subtle Purple Tones */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 120px 0 80px;
      overflow: hidden;
      background: linear-gradient(180deg,
        #ffffff 0%,
        #faf7fe 40%,
        #f7f3fd 100%
      );
    }
    /* Very subtle purple accent */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 85% 15%, rgba(245, 130, 32, 0.03) 0%, transparent 45%),
                  radial-gradient(ellipse at 15% 85%, rgba(245, 130, 32, 0.02) 0%, transparent 40%);
      pointer-events: none;
    }
    /* Hide old background elements */
    .hero-bg { display: none; }
    .hero-overlay { display: none; }

    /* Two-column grid layout */
    .hero .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      width: 100%;
    }
    .hero-content {
      position: relative;
      z-index: 10;
      max-width: 100%;
      text-align: left;
    }

    /* Mobile: Single column, stacked with reordered elements */
    @media (max-width: 968px) {
      .hero { padding: 120px 0 60px; min-height: auto; }
      .hero .container {
        display: flex;
        flex-direction: column;
        gap: 0;
        text-align: center;
      }
      /* Use display:contents to expose children to flex container */
      .hero-content {
        display: contents;
      }
      /* Order: 1-headline, 2-subheadline, 3-form, 4-trust */
      .hero-headline { order: 1; margin-bottom: 16px; }
      .hero-subheadline { order: 2; margin-bottom: 28px; max-width: 600px; margin-left: auto; margin-right: auto; }
      .inline-form-wrapper { order: 3; margin-bottom: 32px; }
      /* Trust row was being targeted by the legacy `.trust-bar` selector
         (renamed to `.hero-trust-row` long ago). Without the new name
         here, the row had no `order` and rendered above the headline on
         mobile. Centered horizontally now too. */
      .hero-trust-row { order: 4; max-width: 600px; margin: 0 auto; justify-content: center; }
    }
    @media (max-width: 768px) {
      .hero { padding: 100px 0 50px; }
      .hero-subheadline { margin-bottom: 24px; }
      .inline-form-wrapper { margin-bottom: 28px; }
    }
    .hero-headline { font-size: clamp(28px, 8vw, 48px); font-weight: 700; line-height: 1.1; color: var(--text-dark); margin-bottom: 20px; }
    .hero-headline .highlight { color: #1F8AE0; }
    @media (min-width: 640px) { .hero-headline { font-size: 56px; } }
    @media (min-width: 1024px) { .hero-headline { font-size: 64px; } }
    .hero-subheadline { font-size: 22px; color: var(--text-gray); margin-bottom: 32px; line-height: 1.5; }
    @media (min-width: 640px) { .hero-subheadline { font-size: 26px; } }
    .hero-cta { display: inline-flex; align-items: center; justify-content: center; background: #F58220; color: white; font-weight: 700; padding: 18px 40px; border-radius: 12px; text-decoration: none; font-size: 22px; transition: all 0.2s; box-shadow: var(--shadow-lg); cursor: pointer; border: none; }
    .hero-cta:hover { background: #7639BD; transform: scale(1.02); box-shadow: var(--shadow-xl); }

    /* Inline Form Card - Right Column on Desktop */
    .inline-form-wrapper {
      position: relative;
      z-index: 10;
      max-width: 440px;
      margin-left: auto;
      /* Faster entrance animation */
      animation: formSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes formSlideIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .inline-form-card {
      background: white;
      border-radius: 24px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06),
                  0 1px 4px rgba(0, 0, 0, 0.04),
                  0 0 0 1px rgba(245, 130, 32, 0.06);
      padding: 36px 40px;
      text-align: center;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .inline-form-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
                  0 2px 8px rgba(0, 0, 0, 0.05),
                  0 0 0 1px rgba(245, 130, 32, 0.1);
    }
    .inline-form-title {
      font-size: 13px;
      font-weight: 700;
      color: #F58220;
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      text-align: center;
    }
    .inline-form-question {
      font-size: 22px;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 28px;
      line-height: 1.35;
      text-align: center;
    }
    .inline-options-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .inline-option-btn {
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 16px;
      padding: 24px 20px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .inline-option-btn:hover {
      border-color: #F58220;
      background: #f7f3fd;
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }
    .inline-option-btn:active {
      transform: translateY(-1px);
      transition: all 0.1s ease;
    }
    .inline-option-btn .option-icon {
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f3ff;
      border-radius: 14px;
      transition: all 0.2s ease;
    }
    .inline-option-btn:hover .option-icon {
      background: #F58220;
      transform: scale(1.02);
    }
    .inline-option-btn .option-icon svg {
      width: 24px;
      height: 24px;
      color: #F58220;
      transition: color 0.3s ease;
    }
    .inline-option-btn:hover .option-icon svg {
      color: white;
    }
    .inline-option-btn .option-label {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-dark);
      transition: color 0.3s ease;
    }
    .inline-option-btn:hover .option-label {
      color: #F58220;
    }

    /* Yes Button - Subtle Green */
    .inline-option-yes {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      border-color: rgba(245, 130, 32, 0.20);
    }
    .inline-option-yes .option-icon {
      background: rgba(245, 130, 32, 0.10);
    }
    .inline-option-yes .option-icon svg {
      color: #F58220;
    }
    .inline-option-yes:hover {
      border-color: #F58220;
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20);
    }
    .inline-option-yes:hover .option-icon {
      background: #F58220;
    }
    .inline-option-yes:hover .option-icon svg {
      color: white;
    }
    .inline-option-yes:hover .option-label {
      color: #F58220;
    }

    /* No Button - Subtle Red/Coral */
    .inline-option-no {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      border-color: rgba(245, 130, 32, 0.20);
    }
    .inline-option-no .option-icon {
      background: rgba(245, 130, 32, 0.10);
    }
    .inline-option-no .option-icon svg {
      color: #F58220;
    }
    .inline-option-no:hover {
      border-color: #F58220;
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20);
    }
    .inline-option-no:hover .option-icon {
      background: #F58220;
    }
    .inline-option-no:hover .option-icon svg {
      color: white;
    }
    .inline-option-no:hover .option-label {
      color: #F58220;
    }

    .inline-form-footer {
      margin-top: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-gray);
    }
    .inline-form-footer svg {
      width: 16px;
      height: 16px;
      color: #F58220;
    }

    /* Inline Yes/No Buttons - Rectangular Style */
    .inline-yesno-grid {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: 24px;
    }
    .inline-yesno-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 32px;
      border-radius: 12px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: inherit;
    }
    .inline-yesno-btn:hover {
      transform: translateY(-2px);
    }
    .inline-yesno-btn:active {
      transform: scale(0.98);
    }
    .inline-yesno-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .inline-yesno-label {
      font-size: 16px;
      font-weight: 600;
    }

    /* Yes Button - Green */
    .inline-yesno-yes {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      border-color: rgba(245, 130, 32, 0.30);
    }
    .inline-yesno-yes:hover {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.20) 100%);
      border-color: rgba(245, 130, 32, 0.50);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    }
    .inline-yesno-yes .inline-yesno-icon {
      background: rgba(245, 130, 32, 0.20);
    }
    .inline-yesno-yes .inline-yesno-icon svg {
      color: #F58220;
    }
    .inline-yesno-yes .inline-yesno-label {
      color: #F58220;
    }

    /* No Button - Red */
    .inline-yesno-no {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      border-color: rgba(245, 130, 32, 0.30);
    }
    .inline-yesno-no:hover {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.20) 100%);
      border-color: rgba(245, 130, 32, 0.50);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    }
    .inline-yesno-no .inline-yesno-icon {
      background: rgba(245, 130, 32, 0.20);
    }
    .inline-yesno-no .inline-yesno-icon svg {
      color: #F58220;
    }
    .inline-yesno-no .inline-yesno-label {
      color: #F58220;
    }

    /* Inline Form Heading (for slider version) */
    .inline-form-heading {
      font-size: 20px;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 24px;
      line-height: 1.35;
      text-align: center;
    }

    /* Inline Slider Styles */
    .inline-slider-wrapper {
      text-align: center;
      padding: 8px 0 24px;
    }
    .inline-slider-value {
      font-size: 42px;
      font-weight: 700;
      color: #F58220;
      margin-bottom: 16px;
      letter-spacing: -1px;
    }
    .inline-slider {
      width: 100%;
      max-width: 320px;
      height: 8px;
      -webkit-appearance: none;
      appearance: none;
      background: linear-gradient(to right, #F58220 0%, #F58220 33.33%, #e5e7eb 33.33%, #e5e7eb 100%);
      border-radius: 8px;
      outline: none;
      cursor: pointer;
      margin: 0 auto;
      display: block;
    }
    .inline-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 24px;
      height: 24px;
      background: #F58220;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      border: 3px solid white;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .inline-slider::-webkit-slider-thumb:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
    .inline-slider::-moz-range-thumb {
      width: 24px;
      height: 24px;
      background: #F58220;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      border: 3px solid white;
    }
    .inline-slider-labels {
      display: flex;
      justify-content: space-between;
      max-width: 320px;
      margin: 8px auto 0;
      font-size: 13px;
      color: var(--text-light);
      font-weight: 500;
    }

    /* Inline Form CTA Button */
    .inline-form-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      background: linear-gradient(135deg, #F58220 0%, #7639BD 100%);
      color: white;
      font-size: 18px;
      font-weight: 700;
      padding: 16px 32px;
      border: none;
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
      margin-bottom: 16px;
    }
    .inline-form-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    }
    .inline-form-cta:active {
      transform: translateY(0);
    }
    .inline-form-cta svg {
      width: 20px;
      height: 20px;
      transition: transform 0.2s ease;
    }
    .inline-form-cta:hover svg {
      transform: translateX(3px);
    }

    /* Inline Form Helper Text */
    .inline-form-helper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-light);
    }
    .inline-form-helper svg {
      width: 16px;
      height: 16px;
      color: #F58220;
    }

    /* Mobile/Tablet - Center form and stack below content */
    @media (max-width: 968px) {
      .inline-form-wrapper {
        margin-left: auto;
        margin-right: auto;
        max-width: 400px;
        width: 100%;
      }
      .inline-form-card { padding: 28px 24px; }
      .inline-form-question { font-size: 20px; }
      .inline-form-heading { font-size: 20px; }
      .inline-slider-value { font-size: 38px; }
    }
    /* Mobile adjustments for inline form */
    @media (max-width: 480px) {
      .inline-form-wrapper { max-width: 100%; }
      .inline-form-card { padding: 20px 16px; border-radius: 16px; }
      .inline-form-question { font-size: 18px; }
      .inline-form-heading { font-size: 18px; margin-bottom: 16px; }
      .inline-option-btn { padding: 14px 16px; }
      .inline-option-btn .option-icon { width: 36px; height: 36px; }
      .inline-option-btn .option-label { font-size: 14px; }
      .inline-slider-value { font-size: 36px; }
      .inline-slider { max-width: 280px; }
      .inline-slider-labels { max-width: 280px; font-size: 12px; }
      .inline-form-cta { font-size: 16px; padding: 14px 24px; }
    }
    .trust-bar { text-align: left; }
    .trust-badges { justify-content: flex-start; }
    .trust-bar { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border-gray); }
    .trust-text { font-size: 18px; color: var(--text-light); margin-bottom: 16px; }
    .trust-badges { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
    .trust-badge { display: flex; align-items: center; gap: 8px; }
    .trust-badge svg { width: 24px; height: 24px; }
    .trust-badge .value { font-size: 20px; font-weight: 600; color: var(--text-dark); }
    .trust-badge .label { font-size: 18px; color: var(--text-gray); }

    /* Sections - Unified subtle theme */
    .empathy { background: linear-gradient(180deg, #f7f3fd 0%, #ffffff 100%); padding: 80px 0; position: relative; }
    .empathy-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--amber-light); color: var(--amber-text); padding: 10px 20px; border-radius: 999px; font-size: 18px; font-weight: 600; margin-bottom: 32px; }
    .empathy-card { background: white; border-radius: 24px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04); border: 1px solid rgba(245, 130, 32, 0.08); padding: 40px; text-align: center; max-width: 800px; margin: 0 auto; transition: box-shadow 0.3s ease; }
    .empathy-card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05); }
    @media (min-width: 768px) { .empathy-card { padding: 60px; } }
    .empathy-headline { font-size: 36px; font-weight: 700; color: var(--text-dark); margin-bottom: 24px; }
    @media (min-width: 640px) { .empathy-headline { font-size: 42px; } }
    .empathy-text { font-size: 22px; color: var(--text-gray); margin-bottom: 12px; line-height: 1.6; }
    .empathy-text.highlight { color: #F58220; font-weight: 600; }
    .empathy-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border-gray); }
    .stat-badge { display: flex; align-items: center; gap: 12px; background: var(--bg-gray); padding: 12px 20px; border-radius: 12px; }
    .stat-badge svg { width: 24px; height: 24px; color: #F58220; }
    .stat-badge .stat-value { font-size: 20px; font-weight: 700; color: var(--text-dark); }
    .stat-badge .stat-label { font-size: 16px; color: var(--text-light); }
    .empathy-microcopy { font-size: 20px; color: var(--text-light); margin-top: 32px; }

    .steps { background: linear-gradient(180deg, #ffffff 0%, #faf7fe 100%); padding: 80px 0; position: relative; }
    .section-header { text-align: center; margin-bottom: 60px; }
    .section-title { font-size: 40px; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; }
    @media (min-width: 640px) { .section-title { font-size: 48px; } }
    .section-subtitle { font-size: 22px; color: var(--text-gray); max-width: 600px; margin: 0 auto; }
    .steps-grid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 1000px; margin: 0 auto; }
    @media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
    .step-card { background: white; border: 1px solid rgba(245, 130, 32, 0.08); border-radius: 24px; padding: 32px; text-align: center; transition: all 0.3s ease; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); }
    .step-card:hover { border-color: rgba(245, 130, 32, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); transform: translateY(-4px); }
    .step-number { width: 72px; height: 72px; background: #F58220; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; box-shadow: var(--shadow-lg); }
    .step-number span { font-size: 32px; font-weight: 700; color: white; }
    .step-title { font-size: 24px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
    .step-desc { font-size: 20px; color: var(--text-gray); margin-bottom: 20px; line-height: 1.5; }
    .step-time { display: inline-flex; align-items: center; gap: 8px; background: var(--green-light); color: var(--green-text); padding: 8px 16px; border-radius: 999px; font-size: 18px; font-weight: 600; }
    .steps-microcopy { text-align: center; font-size: 20px; color: var(--text-light); margin-top: 48px; }

    .faq { background: linear-gradient(180deg, #faf7fe 0%, #f8f6ff 50%, #faf7fe 100%); padding: 80px 0; position: relative; }
    .faq-list { max-width: 800px; margin: 0 auto; }
    .faq-item { background: white; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); border: 1px solid rgba(245, 130, 32, 0.06); margin-bottom: 16px; overflow: hidden; transition: all 0.2s ease; }
    .faq-item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); border-color: rgba(245, 130, 32, 0.12); }
    .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: none; border: none; cursor: pointer; text-align: left; font-size: 22px; font-weight: 600; color: var(--text-dark); transition: background 0.2s; }
    .faq-question:hover { background: var(--bg-gray); }
    .faq-question svg { width: 28px; height: 28px; color: var(--text-light); flex-shrink: 0; transition: transform 0.3s; }
    .faq-item.open .faq-question svg { transform: rotate(180deg); color: #F58220; }
    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
    .faq-item.open .faq-answer { max-height: 500px; }
    .faq-answer-content { padding: 0 24px 24px; font-size: 20px; color: var(--text-gray); line-height: 1.6; }

    .cta-section { background: linear-gradient(135deg, #F58220 0%, #7639BD 100%); padding: 80px 0; text-align: center; }
    .cta-title { font-size: 36px; font-weight: 700; color: white; margin-bottom: 16px; }
    @media (min-width: 640px) { .cta-title { font-size: 44px; } }
    .cta-subtitle { font-size: 22px; color: rgba(255,255,255,0.9); margin-bottom: 32px; }
    .cta-button { display: inline-flex; align-items: center; justify-content: center; background: white; color: #F58220; font-weight: 700; padding: 18px 40px; border-radius: 12px; text-decoration: none; font-size: 22px; transition: all 0.2s; box-shadow: var(--shadow-lg); cursor: pointer; border: none; }
    .cta-button:hover { transform: scale(1.05); box-shadow: var(--shadow-xl); }

    .footer { background: #111827; color: white; padding: 48px 0; }
    .footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
    @media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
    .footer-logo { height: 40px; width: auto; max-width: 240px; margin-bottom: 16px; object-fit: contain; }
    .footer-desc { font-size: 14px; color: #9ca3af; line-height: 1.6; }
    .footer-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
    .footer-links { list-style: none; }
    .footer-links li { margin-bottom: 12px; }
    .footer-links a { color: #9ca3af; text-decoration: none; font-size: 16px; transition: color 0.2s; }
    .footer-links a:hover { color: white; }
    .footer-bottom { border-top: 1px solid #374151; padding-top: 24px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
    @media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
    .footer-legal { display: flex; gap: 24px; }
    .footer-legal a { color: #6b7280; text-decoration: none; font-size: 14px; }
    .footer-legal a:hover { color: white; }
    .footer-copyright { font-size: 14px; color: #6b7280; }
    .footer-disclaimer { margin-top: 24px; padding-top: 24px; border-top: 1px solid #374151; font-size: 12px; color: #6b7280; line-height: 1.6; }

    /* Floating Mobile CTA */
    .floating-cta {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: white;
      padding: 12px 16px;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
      border-top: 1px solid var(--border-gray);
      animation: slideUp 0.3s ease-out;
    }
    @keyframes slideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }
    .floating-cta button {
      width: 100%;
      padding: 16px 24px;
      background: #F58220;
      color: white;
      font-weight: 700;
      font-size: 18px;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: var(--shadow-lg);
    }
    .floating-cta button:active {
      transform: scale(0.98);
    }
    .floating-cta.visible { display: block; }
    @media (min-width: 769px) { .floating-cta { display: none !important; } }

    /* Improved Card Hover Effects */
    .step-card {
      position: relative;
      overflow: hidden;
    }
    .step-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #F58220, #7639BD);
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }
    .step-card:hover::before {
      transform: scaleX(1);
    }
    .step-card:hover .step-number {
      transform: scale(1.1);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    }
    .step-number {
      transition: all 0.3s ease;
    }

    /* Empathy Card Glow Effect */
    .empathy-card {
      position: relative;
      transition: all 0.3s ease;
    }
    .empathy-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    /* FAQ Item Improvements */
    .faq-item {
      transition: all 0.2s ease;
    }
    .faq-item:hover {
      box-shadow: var(--shadow-md);
    }

    /* CTA Button Pulse Animation */
    .hero-cta, .cta-button {
      position: relative;
      overflow: hidden;
    }
    .hero-cta::after, .cta-button::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255,255,255,0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }
    .hero-cta:hover::after, .cta-button:hover::after {
      width: 300px;
      height: 300px;
    }

    /* Trust Badge Animation */
    .trust-badge {
      transition: all 0.2s ease;
    }
    .trust-badge:hover {
      transform: translateY(-2px);
    }
    .stat-badge {
      transition: all 0.2s ease;
    }
    .stat-badge:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    /* POPUP FORM */
    .popup-overlay { display: none; position: fixed; inset: 0; background: white; z-index: 9999; overflow-y: auto; }
    .popup-overlay.active { display: block; }
    .popup-container { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; }
    .popup-close { display: none !important; }
    .popup-back { display: none !important; }
    .popup-content { width: 100%; max-width: 700px; padding: 40px 20px; }

    /* Form Styles */
    .form-logo { display: flex; justify-content: center; margin-bottom: 24px; }
    .form-logo img { height: 42px; width: auto; }
    @media (min-width: 640px) { .form-logo img { height: 48px; } }
    /* Hide in-step logos since logo is above progress bar */
    .form-step .form-logo { display: none !important; }
    /* Hide top logo and progress bar on thank you page */
    .popup-content:has(.form-success.active) > .form-logo,
    .popup-content:has(.form-success.active) > .progress-bar { display: none !important; }
    .form-step { display: none; text-align: center; }
    .form-step.active { display: block; }
    .form-step.active.slide-in-right { animation: stepSlideInRight 0.3s ease; }
    .form-step.active.slide-in-left { animation: stepSlideInLeft 0.3s ease; }
    @keyframes stepSlideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes stepSlideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
    .step-icon { width: 64px; height: 64px; margin: 0 auto 16px; color: #F58220; }
    .step-heading { font-size: 28px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
    @media (min-width: 640px) { .step-heading { font-size: 36px; } }

    /* Form hierarchy: Tagline (subtle) → Question (prominent) */
    .step-tagline { font-size: 14px; font-weight: 500; color: #6B7280; margin-bottom: 6px; letter-spacing: 0.2px; }
    .step-question { font-size: 22px; font-weight: 700; color: var(--text-dark); margin-bottom: 28px; line-height: 1.3; }
    @media (min-width: 640px) {
      .step-tagline { font-size: 15px; margin-bottom: 8px; }
      .step-question { font-size: 26px; margin-bottom: 32px; }
    }
    .step-subtitle { font-size: 16px; color: var(--text-gray); margin-bottom: 32px; }
    @media (min-width: 640px) { .step-subtitle { font-size: 18px; } }

    /* Option Buttons */
    .options-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 500px; margin: 0 auto; }
    .options-grid .option-btn { flex: 0 0 calc(50% - 6px); max-width: calc(50% - 6px); }
    @media (min-width: 640px) { .options-grid.cols-3 .option-btn { flex: 0 0 calc(33.333% - 8px); max-width: calc(33.333% - 8px); } .options-grid.cols-4 .option-btn { flex: 0 0 calc(25% - 9px); max-width: calc(25% - 9px); } }
    .option-btn { background: white; border: 2px solid var(--border-gray); border-radius: 16px; padding: 20px 16px; cursor: pointer; transition: all 0.2s ease; text-align: center; position: relative; overflow: hidden; }
    .option-btn:hover { border-color: rgba(245, 130, 32, 0.30); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
    .option-btn:active { transform: scale(0.97); }
    .option-btn.selected { background: #F58220; border-color: #F58220; color: white; transform: scale(1.02); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); }
    .option-btn.selected .icon svg { filter: brightness(0) invert(1); }
    .option-btn .icon { font-size: 32px; margin-bottom: 8px; display: flex; justify-content: center; align-items: center; transition: transform 0.2s ease; }
    .option-btn:hover .icon { transform: scale(1.1); }
    .option-btn .icon svg { width: 48px; height: 48px; transition: all 0.2s ease; }
    .option-btn .label { font-size: 17px; font-weight: 600; }
    /* Selection checkmark animation */
    .option-btn.selected::after { content: '✓'; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; background: white; color: #F58220; border-radius: 50%; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; animation: scaleIn 0.2s ease; }

    /* Yes/No Buttons - Green/Red Tint Style - Rectangular */
    .yesno-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 320px; margin: 0 auto 16px; }
    .yesno-btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 14px 24px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      border: 2px solid transparent;
      gap: 10px;
    }
    .yesno-btn:hover { transform: translateY(-2px); }
    .yesno-btn:active { transform: scale(0.98); }

    /* Yes Button - Green tint */
    .yesno-yes {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      border-color: rgba(245, 130, 32, 0.20);
    }
    .yesno-yes:hover {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.20) 100%);
      border-color: rgba(245, 130, 32, 0.50);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    }
    .yesno-yes.selected {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.20) 0%, rgba(245, 130, 32, 0.30) 100%);
      border-color: #F58220;
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.30);
    }
    .yesno-yes .yesno-icon {
      width: 32px;
      height: 32px;
      background: rgba(245, 130, 32, 0.20);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .yesno-yes.selected .yesno-icon {
      background: rgba(245, 130, 32, 0.30);
    }
    .yesno-yes .yesno-icon svg { width: 18px; height: 18px; color: #F58220; }
    .yesno-yes .yesno-label { font-size: 15px; font-weight: 600; color: var(--text-dark); }

    /* No Button - Red tint */
    .yesno-no {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      border-color: rgba(245, 130, 32, 0.20);
    }
    .yesno-no:hover {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.20) 100%);
      border-color: rgba(245, 130, 32, 0.50);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    }
    .yesno-no.selected {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.20) 0%, rgba(245, 130, 32, 0.30) 100%);
      border-color: #F58220;
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.30);
    }
    .yesno-no .yesno-icon {
      width: 32px;
      height: 32px;
      background: rgba(245, 130, 32, 0.20);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .yesno-no.selected .yesno-icon {
      background: rgba(245, 130, 32, 0.30);
    }
    .yesno-no .yesno-icon svg { width: 18px; height: 18px; color: #F58220; }
    .yesno-no .yesno-label { font-size: 15px; font-weight: 600; color: var(--text-dark); }

    /* Secure Badge */
    .secure-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-light);
      margin-top: 16px;
    }
    .secure-badge svg { width: 18px; height: 18px; color: #F58220; }

    /* Combined Questions Card */
    .question-card { background: var(--bg-gray); border-radius: 16px; padding: 20px; margin-bottom: 16px; max-width: 500px; margin-left: auto; margin-right: auto; }
    .question-card-title { font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 12px; text-align: center; }
    .question-card .yesno-grid { margin: 0 auto; max-width: 260px; }
    .question-card .yesno-btn { padding: 12px 20px; }
    .question-card .yesno-icon { width: 28px; height: 28px; }
    .question-card .yesno-icon svg { width: 16px; height: 16px; }

    /* Input Fields */
    .input-wrapper { max-width: 500px; margin: 0 auto; }
    .input-group { margin-bottom: 16px; text-align: left; }
    .input-label { display: block; font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
    .input-field { width: 100%; padding: 16px 20px; font-size: 18px; border: 2px solid var(--border-gray); border-radius: 12px; outline: none; transition: all 0.2s ease; }
    .input-field:focus { border-color: #F58220; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1); }
    .input-field.error { border-color: #F58220; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.10); }
    .input-field.center { text-align: center; font-size: 24px; font-weight: 600; }
    .input-error { font-size: 13px; color: #F58220; margin-top: 4px; }
    .input-icon { position: relative; }
    .input-icon .form-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-light); }
    .input-icon .input-field { padding-left: 48px; }

    /* Multi-select */
    .multiselect-grid { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 500px; margin: 0 auto; }
    @media (min-width: 640px) { .multiselect-grid { grid-template-columns: repeat(2, 1fr); } }
    .multiselect-btn { background: white; border: 2px solid var(--border-gray); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all 0.2s; text-align: left; display: flex; align-items: center; gap: 12px; }
    .multiselect-btn:hover { border-color: rgba(245, 130, 32, 0.30); }
    .multiselect-btn.selected { background: #F5EDFF; border-color: #F58220; }
    .multiselect-btn .checkbox { width: 22px; height: 22px; border: 2px solid var(--border-gray); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; color: transparent; }
    .multiselect-btn.selected .checkbox { background: #F58220; border-color: #F58220; color: white; }
    .multiselect-btn .label { font-size: 15px; font-weight: 500; }

    /* SMS Input */
    .sms-input { width: 100%; max-width: 280px; padding: 18px; font-size: 28px; font-weight: 700; text-align: center; letter-spacing: 10px; border: 2px solid var(--border-gray); border-radius: 16px; outline: none; margin: 0 auto; display: block; transition: all 0.2s ease; }
    .sms-input:focus { border-color: #F58220; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15); }
    .sms-helper { font-size: 14px; color: var(--text-light); margin-top: 16px; text-align: center; }
    .resend-link { color: #F58220; cursor: pointer; text-decoration: underline; }

    /* Buttons */
    .continue-btn { width: 100%; max-width: 400px; padding: 16px 32px; background: #F58220; color: white; font-size: 18px; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; box-shadow: var(--shadow-lg); margin: 24px auto 0; display: block; position: relative; overflow: hidden; }
    .continue-btn:hover:not(:disabled) { background: #7639BD; transform: scale(1.02); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); }
    .continue-btn:active:not(:disabled) { transform: scale(0.98); }
    .continue-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .continue-btn.loading { pointer-events: none; }
    .continue-btn.loading::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid transparent; border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; top: 50%; left: 50%; margin: -10px 0 0 -10px; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .helper-text { font-size: 14px; color: var(--text-light); margin-top: 20px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .helper-text svg { width: 16px; height: 16px; flex-shrink: 0; }

    /* Message Box */
    .message-box { background: var(--amber-light); border: 1px solid #fcd34d; border-radius: 16px; padding: 24px; max-width: 500px; margin: 0 auto 24px; text-align: left; }
    .message-box p { font-size: 15px; color: var(--amber-text); line-height: 1.6; }

    /* ═══════════════════════════════════════════════════════════════════════════
       ENHANCED THANK YOU PAGE - Option B: Expert Review Required
       ═══════════════════════════════════════════════════════════════════════════ */

    .form-success { display: none; text-align: center; padding: 24px 16px 40px; max-width: 640px; margin: 0 auto; }
    .form-success.active { display: block; }
    @media (min-width: 640px) { .form-success { padding: 32px 24px 48px; } }

    /* Success Header */
    .success-header { margin-bottom: 28px; animation: fadeInUp 0.5s ease-out; }
    .coverage-icon { width: 72px; height: 72px; background: linear-gradient(135deg, #F58220 0%, #7639BD 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); animation: successBounce 0.6s ease-out; }
    .coverage-icon svg { width: 36px; height: 36px; color: white; }
    @keyframes successBounce {
      0% { transform: scale(0); opacity: 0; }
      50% { transform: scale(1.15); }
      70% { transform: scale(0.95); }
      100% { transform: scale(1); opacity: 1; }
    }
    .success-title { font-size: 22px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; line-height: 1.3; }
    @media (min-width: 640px) { .success-title { font-size: 26px; } }
    .success-subtitle { font-size: 16px; color: var(--text-gray); line-height: 1.5; margin: 0; }
    @media (min-width: 640px) { .success-subtitle { font-size: 17px; } }

    /* Profile Summary */
    .profile-summary { background: var(--bg-gray); border-radius: 16px; padding: 20px; margin-bottom: 24px; animation: fadeInUp 0.5s ease-out 0.1s forwards; opacity: 0; }
    .profile-summary-title { font-size: 12px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
    .profile-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
    .profile-badge { display: inline-flex; align-items: center; gap: 6px; background: white; border: 1px solid var(--border-gray); border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--text-dark); }
    .profile-badge svg { width: 16px; height: 16px; color: #F58220; }
    .profile-badge.warning { background: #fef3c7; border-color: #fcd34d; color: #7639BD; }
    .profile-badge.warning svg { color: #d97706; }

    /* Risk Assessment Cards */
    .risk-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; animation: fadeInUp 0.5s ease-out 0.2s forwards; opacity: 0; }
    .risk-card { background: white; border: 2px solid var(--border-gray); border-radius: 16px; padding: 20px; text-align: left; transition: all 0.2s ease; width: 100%; max-width: 100%; }
    .risk-card:hover { border-color: #F58220; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
    .risk-card.condition { border-left-color: #f59e0b; border-left-width: 4px; }
    .risk-card.smoking { border-left-color: #F58220; border-left-width: 4px; }
    .risk-card.coverage { border-left-color: #F58220; border-left-width: 4px; }
    .risk-card.balance { border-left-color: #F58220; border-left-width: 4px; }
    .risk-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
    .risk-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .risk-card.condition .risk-card-icon { background: #fef3c7; color: #d97706; }
    .risk-card.smoking .risk-card-icon { background: #fee2e2; color: #F58220; }
    .risk-card.coverage .risk-card-icon { background: #F5EDFF; color: #F58220; }
    .risk-card.balance .risk-card-icon { background: #d1fae5; color: #F58220; }
    .risk-card-icon svg { width: 22px; height: 22px; }
    .risk-card-title { font-size: 16px; font-weight: 700; color: var(--text-dark); }
    .risk-card-body { font-size: 14px; color: var(--text-gray); line-height: 1.6; }
    .risk-card-highlight { background: linear-gradient(135deg, rgba(245, 130, 32, 0.08), rgba(124, 58, 237, 0.04)); border-radius: 8px; padding: 12px; margin-top: 10px; font-size: 14px; color: var(--text-dark); font-weight: 500; }

    /* Providers Section */
    .providers-section { background: white; border: 2px solid var(--border-gray); border-radius: 20px; padding: 24px 20px; margin-bottom: 24px; animation: fadeInUp 0.5s ease-out 0.3s forwards; opacity: 0; }
    @media (min-width: 640px) { .providers-section { padding: 28px; } }
    .providers-header { margin-bottom: 20px; }
    .providers-title { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
    .providers-intro { font-size: 14px; color: var(--text-gray); margin: 0; }
    .providers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
    .provider-card { background: var(--bg-gray); border-radius: 12px; padding: 16px 12px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
    .provider-card:hover { background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
    .provider-logo { max-width: 100%; max-height: 32px; width: auto; height: auto; filter: grayscale(30%); transition: filter 0.2s ease; }
    .provider-card:hover .provider-logo { filter: grayscale(0%); }
    @media (max-width: 480px) {
      .providers-grid { grid-template-columns: repeat(2, 1fr); }
      .provider-card { padding: 14px 10px; }
      .provider-logo { max-height: 26px; }
    }
    .providers-warning { display: flex; align-items: flex-start; gap: 12px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 12px; padding: 14px 16px; text-align: left; }
    .providers-warning svg { width: 22px; height: 22px; color: #d97706; flex-shrink: 0; margin-top: 1px; }
    .providers-warning p { font-size: 14px; color: #7639BD; line-height: 1.5; margin: 0; }

    /* Expert Guidance Section */
    .expert-section { background: white; border: 2px solid var(--border-gray); border-radius: 20px; padding: 24px 20px; margin-bottom: 24px; animation: fadeInUp 0.5s ease-out 0.4s forwards; opacity: 0; }
    @media (min-width: 640px) { .expert-section { padding: 28px; } }
    .expert-title { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; }
    .expert-reasons { display: flex; flex-direction: column; gap: 12px; }
    .expert-reason { background: var(--bg-gray); border-radius: 12px; padding: 16px; text-align: left; display: flex; align-items: flex-start; gap: 12px; }
    .expert-reason-icon { width: 36px; height: 36px; background: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #F58220; }
    .expert-reason-icon svg { width: 20px; height: 20px; }
    .expert-reason-content { flex: 1; }
    .expert-reason-title { font-size: 15px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
    .expert-reason-text { font-size: 14px; color: var(--text-gray); line-height: 1.5; margin: 0; }

    /* Timeline Section */
    .timeline-section { background: white; border: 2px solid var(--border-gray); border-radius: 20px; padding: 24px 20px; margin-bottom: 24px; animation: fadeInUp 0.5s ease-out 0.5s forwards; opacity: 0; }
    .timeline-title { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 24px; }
    .timeline { position: relative; }
    .timeline-track { position: absolute; top: 12px; left: 24px; right: 24px; height: 4px; background: var(--border-gray); border-radius: 2px; z-index: 1; }
    .timeline-progress { width: 10%; height: 100%; background: #F58220; border-radius: 2px; animation: timelineGrow 1s ease-out 0.8s forwards; }
    @keyframes timelineGrow { to { width: 100%; } }
    .timeline-steps { display: flex; justify-content: space-between; position: relative; z-index: 2; }
    .timeline-step { display: flex; flex-direction: column; align-items: center; flex: 1; }
    .timeline-dot { width: 24px; height: 24px; background: white; border: 3px solid var(--border-gray); border-radius: 50%; margin-bottom: 10px; transition: all 0.3s ease; }
    .timeline-step.active .timeline-dot { background: #F58220; border-color: #F58220; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2); }
    .timeline-label { font-size: 12px; font-weight: 700; color: var(--text-dark); margin-bottom: 2px; }
    .timeline-desc { font-size: 11px; color: var(--text-light); text-align: center; }
    @media (max-width: 480px) {
      .timeline-track { left: 12px; right: 12px; }
      .timeline-label { font-size: 10px; }
      .timeline-desc { font-size: 9px; }
    }

    /* Closing Section */
    .closing-section { animation: fadeInUp 0.5s ease-out 0.6s forwards; opacity: 0; }
    .closing-quote { font-size: 17px; font-weight: 500; color: var(--text-dark); line-height: 1.6; max-width: 500px; margin: 0 auto 20px; padding: 0; border: none; font-style: normal; }
    .closing-quote::before, .closing-quote::after { display: none; }
    .closing-trust { display: inline-flex; align-items: center; gap: 8px; background: var(--green-light); color: var(--green-text); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; }
    .closing-trust svg { width: 18px; height: 18px; }

    /* Selection Summary */
    .selection-summary { background: var(--bg-gray); border-radius: 16px; padding: 24px; margin-top: 32px; max-width: 500px; margin-left: auto; margin-right: auto; text-align: left; }
    .summary-title { font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 16px; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; }
    .summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    @media (max-width: 480px) { .summary-grid { grid-template-columns: 1fr; } }
    .summary-item { background: white; border-radius: 12px; padding: 12px 16px; border: 1px solid var(--border-gray); }
    .summary-item.full-width { grid-column: 1 / -1; }
    .summary-label { font-size: 12px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
    .summary-value { font-size: 15px; font-weight: 600; color: var(--text-dark); }

    /* Progress */
    .progress-bar { height: 6px; background: var(--border-gray); border-radius: 3px; margin-bottom: 32px; max-width: 400px; margin-left: auto; margin-right: auto; overflow: hidden; }
    .progress-fill { height: 100%; background: linear-gradient(90deg, #F58220 0%, #7639BD 50%, #F58220 100%); background-size: 200% 100%; border-radius: 3px; transition: width 0.4s ease; animation: shimmer 2s infinite linear; }
    @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

    /* ═══════════════════════════════════════════════════════════════════════════
       RESPONSIVE FIXES FOR THANK YOU PAGE - 100/100 Device Compatibility
       ═══════════════════════════════════════════════════════════════════════════ */

    /* Fix 1: Desktop Layout - single column for risk cards */
    @media (min-width: 768px) {
      .form-success { max-width: 800px; }
      /* Risk cards stay single column - full width */
    }
    @media (min-width: 1024px) {
      .form-success { max-width: 900px; padding: 40px 32px 56px; }
    }

    /* Fix 2: Tablet Provider Grid (2 cols on tablet, 4 on desktop) */
    @media (min-width: 481px) and (max-width: 767px) {
      .providers-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* Fix 3: Timeline Accessibility - Larger fonts on mobile, wrap on very small screens */
    @media (max-width: 480px) {
      .timeline-label { font-size: 11px; }
      .timeline-desc { font-size: 10px; }
      .timeline-step { min-width: 60px; }
    }
    @media (max-width: 360px) {
      .timeline-steps { flex-wrap: wrap; gap: 16px; justify-content: center; }
      .timeline-track { display: none; }
      .timeline-step { min-width: 80px; }
      .timeline-label { font-size: 12px; }
      .timeline-desc { font-size: 11px; }
    }

    /* Fix 4: Expert Section 2-Column on Desktop */
    @media (min-width: 768px) {
      .expert-reasons { display: grid; grid-template-columns: repeat(2, 1fr); }
      .expert-reason { transition: all 0.2s ease; }
      .expert-reason:hover { background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
      .expert-reason:last-child:nth-child(odd) { grid-column: 1 / -1; }
    }

    /* Fix 5: Profile Badges Protection - Prevent text wrapping and overflow */
    .profile-badge { min-width: max-content; white-space: nowrap; }
    @media (max-width: 360px) {
      .profile-badges { gap: 6px; }
      .profile-badge { padding: 6px 10px; font-size: 12px; }
    }

    /* Fix 6: Touch Device Optimization - Remove hover effects that cause issues */
    @media (hover: none) {
      .risk-card:hover { transform: none; box-shadow: none; border-color: var(--border-gray); }
      .risk-card.condition:hover { border-left-color: #f59e0b; }
      .risk-card.smoking:hover { border-left-color: #F58220; }
      .risk-card.coverage:hover { border-left-color: #F58220; }
      .risk-card.balance:hover { border-left-color: #F58220; }
      .provider-card:hover { transform: none; box-shadow: none; background: var(--bg-gray); }
      .expert-reason:hover { transform: none; box-shadow: none; background: var(--bg-gray); }
    }

    /* Tablet styles (768px - 1024px) - center for better balance */
    @media (min-width: 768px) and (max-width: 1023px) {
      .hero-overlay { background: linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0.85)); }
      .hero-headline, .hero-subheadline { text-align: center; }
      .hero-cta { display: flex; justify-content: center; margin: 0 auto; width: fit-content; }
      .trust-bar, .trust-text { text-align: center; }
      .trust-badges { justify-content: center; }
      .hero-headline { font-size: 52px; }
      .hero-subheadline { font-size: 22px; }
    }

    /* Desktop (1024px+) - Two-column layout adjustments */
    @media (min-width: 1024px) {
      .hero .container { max-width: 1400px; margin: 0 auto; padding: 0 6%; }
      .hero .hero-content { max-width: 100%; text-align: left; }
      .hero .hero-headline, .hero .hero-subheadline { text-align: left; }
      .hero .trust-bar { text-align: left; }
      .hero .trust-text { text-align: left; }
      .hero .trust-badges { justify-content: flex-start; }
    }
    @media (min-width: 1280px) {
      .hero .container { padding: 0 7%; }
    }
    @media (min-width: 1440px) {
      .hero .container { padding: 0 8%; max-width: 1600px; }
    }
    @media (min-width: 1920px) {
      .hero .container { padding: 0 10%; }
    }

    @media (max-width: 768px) {
      .hero-overlay { background: linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0.85)); }
      .hero-headline, .hero-subheadline { text-align: center; }
      .hero-cta { display: flex; justify-content: center; margin: 0 auto; width: fit-content; }
      .trust-bar, .trust-text { text-align: center; }
      .trust-badges { justify-content: center; flex-wrap: wrap; gap: 16px; }
      /* Header mobile adjustments */
      .logo { height: 36px; margin: 0; }
      .footer, .footer-grid { text-align: center; }
      .footer-logo { margin: 0 auto 16px; }
      .footer-bottom { text-align: center; align-items: center; }
      .footer-legal { justify-content: center; }
      /* Hide X and back buttons on mobile */
      .popup-close, .popup-back { display: none !important; }
      /* Popup form - reduce top spacing */
      .popup-content { padding: 20px 16px; }
      .progress-bar { margin-bottom: 16px; }
      .form-logo { margin-bottom: 12px; }
      .form-logo img { height: 30px; }
      .step-icon { width: 48px; height: 48px; font-size: 32px !important; margin-bottom: 8px; }
      .step-heading { font-size: 26px; margin-bottom: 4px; }
      .step-tagline { font-size: 15px; margin-bottom: 4px; }
      .step-question { font-size: 24px; margin-bottom: 20px; }
      .step-subtitle { font-size: 16px; margin-bottom: 20px; }
      /* Yes/No buttons - responsive */
      .yesno-grid { max-width: 320px; gap: 12px; }
      .yesno-btn { padding: 18px 16px; font-size: 20px; font-weight: 700; }
      .yesno-icon { width: 40px !important; height: 40px !important; }
      .yesno-icon svg { width: 20px !important; height: 20px !important; }
      /* Question card Yes/No centered */
      .question-card .yesno-grid { justify-content: center; margin: 0 auto; }
      /* Option buttons - light purple border */
      .option-btn {
        border: 2px solid rgba(245, 130, 32, 0.30);
      }
      .multiselect-btn {
        border: 2px solid rgba(245, 130, 32, 0.30);
      }
      .helper-text { margin-top: 16px; }
    }
    @media (max-width: 480px) {
      .logo { height: 32px; }
      /* header-cta sizing handled by show-cta state */
      .popup-content { padding: 16px 12px; }
      .form-logo img { height: 24px; }
      .step-icon { font-size: 28px !important; margin-bottom: 6px; }
      .step-heading { font-size: 24px; }
      .step-tagline { font-size: 14px; }
      .step-question { font-size: 22px; margin-bottom: 16px; }
      .step-subtitle { font-size: 15px; margin-bottom: 16px; }
      .yesno-grid { gap: 10px; max-width: 280px; }
      .yesno-btn { padding: 16px 12px; font-size: 19px; font-weight: 700; }
      .gender-cards-wrapper { gap: 12px; }
      .gender-card { padding: 16px 20px; }
      .gender-text-btn { padding: 12px 20px; font-size: 14px; }
    }

/* ═══════════════════════════════════════════════════════════════════════════
   SLIDER STYLES FOR INCOME PROTECTION COVERAGE AMOUNT
   ═══════════════════════════════════════════════════════════════════════════ */

.slider-wrapper { text-align: center; padding: 20px 0; }
.slider-value { font-size: 48px; font-weight: 700; color: #F58220; margin-bottom: 24px; }
@media (min-width: 640px) { .slider-value { font-size: 56px; } }
.slider-input { width: 100%; max-width: 400px; height: 12px; -webkit-appearance: none; appearance: none; background: var(--border-gray); border-radius: 6px; outline: none; cursor: pointer; }
.slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; background: #F58220; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); transition: all 0.2s ease; }
.slider-input::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
.slider-input::-moz-range-thumb { width: 32px; height: 32px; background: #F58220; border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
.slider-labels { display: flex; justify-content: space-between; max-width: 400px; margin: 12px auto 0; font-size: 14px; color: var(--text-light); }

/* Slider Tick Marks */
.slider-ticks { position: relative; max-width: 400px; margin: 0 auto; height: 24px; }
.slider-tick { position: absolute; transform: translateX(-50%); text-align: center; }
.slider-tick .tick-mark { display: block; width: 2px; height: 8px; background: #d1d5db; margin: 0 auto 4px; }
.slider-tick .tick-label { font-size: 10px; color: #9ca3af; white-space: nowrap; }
@media (max-width: 480px) {
  .slider-tick .tick-label { font-size: 8px; }
  .slider-tick:nth-child(even) .tick-label { display: none; }
}

/* Gender Couple Selection - Card Style */
.gender-cards-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
  margin: 0 auto 24px;
}
.gender-card {
  background: var(--bg-gray);
  border-radius: 16px;
  padding: 20px 24px;
  border: 1px solid var(--border-gray);
}
.gender-card-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 12px;
  text-align: center;
}
.gender-card-options {
  display: flex;
  gap: 12px;
  justify-content: stretch;
  align-items: stretch;
}
.gender-text-btn {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
  padding: 14px 24px;
  background: white;
  border: 2px solid var(--border-gray);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s ease;
}
.gender-text-btn:hover {
  border-color: #F58220;
  background: rgba(245, 130, 32, 0.04);
}
.gender-text-btn.selected {
  background: #F58220;
  border-color: #F58220;
  color: white;
}

/* Combined Inputs (Age for couple) */
.combined-inputs .input-group { margin-bottom: 16px; }
.combined-inputs .input-group:last-of-type { margin-bottom: 24px; }

/* Combined Questions (Smoker for couple) */
.combined-questions { display: flex; flex-direction: column; gap: 16px; max-width: 500px; margin: 0 auto 24px; }

/* Loading State */
.loading-state { text-align: center; padding: 40px 20px; }
.loading-state p { font-size: 18px; color: var(--text-gray); }

/* Center single risk card */
.risk-cards:has(:only-child) {
  grid-template-columns: 1fr !important;
  justify-items: center;
}
.risk-cards:has(:only-child) .risk-card {
  max-width: 320px;
  width: 100%;
}
/* Center providers grid */
.providers-grid {
  justify-content: center;
}
/* Center success content */
.form-success {
  text-align: center;
}
.form-success > * {
  margin-left: auto;
  margin-right: auto;
}

/* From: styles.css */
:root {
      /* Dynamic brand colors from project settings (with fallbacks) */
      --primary: #F58220;
      --primary-hover: #7639BD;
      --primary-light: #faf5ff;
      --text-dark: #111827;
      --text-gray: #4b5563;
      --text-light: #6b7280;
      --bg-white: #ffffff;
      --bg-gray: #f9fafb;
      --border-gray: #e5e7eb;
      --green-light: #ecfdf5;
      --green-text: #7639BD;
      --amber-light: #fef3c7;
      --amber-text: #7639BD;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
      --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--text-dark);
      line-height: 1.6;
      background: linear-gradient(180deg, #ffffff 0%, #faf7fe 50%, #f7f3fd 100%);
      background-attachment: fixed;
      min-height: 100vh;
    }

    /* Cursor-responsive gradient overlay (desktop only) */
    .cursor-glow {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.3s ease;
      background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(245, 130, 32, 0.04) 0%,
        rgba(245, 130, 32, 0.02) 25%,
        transparent 50%
      );
    }
    .cursor-glow.active {
      opacity: 1;
    }
    /* Disable on touch devices */
    @media (hover: none) {
      .cursor-glow { display: none; }
    }

    /* Entrance Animations */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }
    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-30px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }
    .animate-fade-in-up { animation: fadeInUp 0.4s ease-out forwards; }
    .animate-fade-in { animation: fadeIn 0.35s ease-out forwards; }
    .animate-scale-in { animation: scaleIn 0.35s ease-out forwards; }
    .animate-slide-left { animation: slideInLeft 0.4s ease-out forwards; }
    .stagger-1 { animation-delay: 0.05s; opacity: 0; }
    .stagger-2 { animation-delay: 0.1s; opacity: 0; }
    .stagger-3 { animation-delay: 0.15s; opacity: 0; }
    .stagger-4 { animation-delay: 0.2s; opacity: 0; }
    .container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
    @media (min-width: 640px) { .container { padding: 0 32px; } }
    @media (min-width: 1024px) { .container { padding: 0 6%; } }
    @media (min-width: 1280px) { .container { padding: 0 7%; } }
    @media (min-width: 1440px) { .container { padding: 0 8%; } }
    @media (min-width: 1920px) { .container { padding: 0 10%; } }

    /* Header uses same padding as hero for alignment */
    .header .container { max-width: none; }

    /* Header - Modern Floating Design */
    .header {
      position: fixed;
      top: 12px;
      left: 12px;
      right: 12px;
      z-index: 50;
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 10px 20px;
      border-radius: 12px;
      box-shadow: 0 2px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
      transition: all 0.3s ease;
    }
    .header.scrolled {
      background: rgba(255,255,255,0.98);
      box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
    }
    .header.header-hidden {
      transform: translateY(-120%);
      opacity: 0;
    }
    .header-content { display: flex; align-items: center; justify-content: space-between; }
    .logo { height: 44px; width: auto; transition: transform 0.3s ease; }
    @media (min-width: 640px) { .logo { height: 48px; } }
    @media (min-width: 768px) {
      .header { top: 16px; left: 16px; right: 16px; padding: 12px 24px; }
      .logo { height: 50px; }
    }
    @media (min-width: 1024px) {
      .header { left: 20px; right: 20px; }
    }
    @media (min-width: 1280px) {
      .header { left: 24px; right: 24px; max-width: none; }
    }
    .header-cta { display: inline-flex; align-items: center; justify-content: center; background: #F58220; color: white; font-weight: 700; padding: 12px 20px; border-radius: 12px; text-decoration: none; font-size: 15px; transition: all 0.2s; min-height: 44px; border: none; cursor: pointer; }
    .header-cta:hover { background: #7639BD; transform: scale(1.02); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }

    /* Mobile Header: Centered logo initially, expands to show CTA on scroll */
    @media (max-width: 768px) {
      .header-content {
        justify-content: center; /* Center by default */
        transition: justify-content 0.3s ease;
      }

      .header-cta {
        /* Collapse the button initially */
        max-width: 0;
        padding: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        transform: scale(0.8);
        pointer-events: none;
        border: none;
        font-size: 14px;
        /* Smooth transition */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      /* When scrolled past hero CTA - show header CTA with reduced sizes */
      .header.show-cta .header-content {
        justify-content: space-between;
      }

      .header.show-cta .logo {
        height: 28px; /* Reduced from 44px */
      }

      .header.show-cta .header-cta {
        max-width: 140px;
        padding: 6px 12px;
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
        font-size: 12px;
      }
    }

    /* Hero - Clean White with Subtle Purple Tones */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 120px 0 80px;
      overflow: hidden;
      background: linear-gradient(180deg,
        #ffffff 0%,
        #faf7fe 40%,
        #f7f3fd 100%
      );
    }
    /* Very subtle purple accent */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 85% 15%, rgba(245, 130, 32, 0.03) 0%, transparent 45%),
                  radial-gradient(ellipse at 15% 85%, rgba(245, 130, 32, 0.02) 0%, transparent 40%);
      pointer-events: none;
    }
    /* Hide old background elements */
    .hero-bg { display: none; }
    .hero-overlay { display: none; }

    /* Two-column grid layout */
    .hero .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      width: 100%;
    }
    .hero-content {
      position: relative;
      z-index: 10;
      max-width: 100%;
      text-align: left;
    }

    /* Mobile: Single column, stacked with reordered elements */
    @media (max-width: 968px) {
      .hero { padding: 120px 0 60px; min-height: auto; }
      .hero .container {
        display: flex;
        flex-direction: column;
        gap: 0;
        text-align: center;
      }
      /* Use display:contents to expose children to flex container */
      .hero-content {
        display: contents;
      }
      /* Order: 1-headline, 2-subheadline, 3-form, 4-trust */
      .hero-headline { order: 1; margin-bottom: 16px; }
      .hero-subheadline { order: 2; margin-bottom: 28px; max-width: 600px; margin-left: auto; margin-right: auto; }
      .inline-form-wrapper { order: 3; margin-bottom: 32px; }
      /* Trust row was being targeted by the legacy `.trust-bar` selector
         (renamed to `.hero-trust-row` long ago). Without the new name
         here, the row had no `order` and rendered above the headline on
         mobile. Centered horizontally now too. */
      .hero-trust-row { order: 4; max-width: 600px; margin: 0 auto; justify-content: center; }
    }
    @media (max-width: 768px) {
      .hero { padding: 100px 0 50px; }
      .hero-subheadline { margin-bottom: 24px; }
      .inline-form-wrapper { margin-bottom: 28px; }
    }
    .hero-headline { font-size: clamp(28px, 8vw, 48px); font-weight: 700; line-height: 1.1; color: var(--text-dark); margin-bottom: 20px; }
    .hero-headline .highlight { color: #1F8AE0; }
    @media (min-width: 640px) { .hero-headline { font-size: 56px; } }
    @media (min-width: 1024px) { .hero-headline { font-size: 64px; } }
    .hero-subheadline { font-size: 22px; color: var(--text-gray); margin-bottom: 32px; line-height: 1.5; }
    @media (min-width: 640px) { .hero-subheadline { font-size: 26px; } }
    .hero-cta { display: inline-flex; align-items: center; justify-content: center; background: #F58220; color: white; font-weight: 700; padding: 18px 40px; border-radius: 12px; text-decoration: none; font-size: 22px; transition: all 0.2s; box-shadow: var(--shadow-lg); cursor: pointer; border: none; }
    .hero-cta:hover { background: #7639BD; transform: scale(1.02); box-shadow: var(--shadow-xl); }

    /* Inline Form Card - Right Column on Desktop */
    .inline-form-wrapper {
      position: relative;
      z-index: 10;
      max-width: 440px;
      margin-left: auto;
      /* Faster entrance animation */
      animation: formSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes formSlideIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .inline-form-card {
      background: white;
      border-radius: 24px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06),
                  0 1px 4px rgba(0, 0, 0, 0.04),
                  0 0 0 1px rgba(245, 130, 32, 0.06);
      padding: 36px 40px;
      text-align: center;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .inline-form-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
                  0 2px 8px rgba(0, 0, 0, 0.05),
                  0 0 0 1px rgba(245, 130, 32, 0.1);
    }
    .inline-form-title {
      font-size: 13px;
      font-weight: 700;
      color: #F58220;
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      text-align: center;
    }
    .inline-form-question {
      font-size: 22px;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 28px;
      line-height: 1.35;
      text-align: center;
    }
    .inline-options-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .inline-option-btn {
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 16px;
      padding: 24px 20px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .inline-option-btn:hover {
      border-color: #F58220;
      background: #f7f3fd;
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }
    .inline-option-btn:active {
      transform: translateY(-1px);
      transition: all 0.1s ease;
    }
    .inline-option-btn .option-icon {
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f3ff;
      border-radius: 14px;
      transition: all 0.2s ease;
    }
    .inline-option-btn:hover .option-icon {
      background: #F58220;
      transform: scale(1.02);
    }
    .inline-option-btn .option-icon svg {
      width: 24px;
      height: 24px;
      color: #F58220;
      transition: color 0.3s ease;
    }
    .inline-option-btn:hover .option-icon svg {
      color: white;
    }
    .inline-option-btn .option-label {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-dark);
      transition: color 0.3s ease;
    }
    .inline-option-btn:hover .option-label {
      color: #F58220;
    }

    /* Yes Button - Subtle Green */
    .inline-option-yes {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      border-color: rgba(245, 130, 32, 0.20);
    }
    .inline-option-yes .option-icon {
      background: rgba(245, 130, 32, 0.10);
    }
    .inline-option-yes .option-icon svg {
      color: #F58220;
    }
    .inline-option-yes:hover {
      border-color: #F58220;
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20);
    }
    .inline-option-yes:hover .option-icon {
      background: #F58220;
    }
    .inline-option-yes:hover .option-icon svg {
      color: white;
    }
    .inline-option-yes:hover .option-label {
      color: #F58220;
    }

    /* No Button - Subtle Red/Coral */
    .inline-option-no {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      border-color: rgba(245, 130, 32, 0.20);
    }
    .inline-option-no .option-icon {
      background: rgba(245, 130, 32, 0.10);
    }
    .inline-option-no .option-icon svg {
      color: #F58220;
    }
    .inline-option-no:hover {
      border-color: #F58220;
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20);
    }
    .inline-option-no:hover .option-icon {
      background: #F58220;
    }
    .inline-option-no:hover .option-icon svg {
      color: white;
    }
    .inline-option-no:hover .option-label {
      color: #F58220;
    }

    .inline-form-footer {
      margin-top: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-gray);
    }
    .inline-form-footer svg {
      width: 16px;
      height: 16px;
      color: #F58220;
    }

    /* Inline Yes/No Buttons - Rectangular Style */
    .inline-yesno-grid {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: 24px;
    }
    .inline-yesno-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 32px;
      border-radius: 12px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: inherit;
    }
    .inline-yesno-btn:hover {
      transform: translateY(-2px);
    }
    .inline-yesno-btn:active {
      transform: scale(0.98);
    }
    .inline-yesno-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .inline-yesno-label {
      font-size: 16px;
      font-weight: 600;
    }

    /* Yes Button - Green */
    .inline-yesno-yes {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      border-color: rgba(245, 130, 32, 0.30);
    }
    .inline-yesno-yes:hover {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.20) 100%);
      border-color: rgba(245, 130, 32, 0.50);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    }
    .inline-yesno-yes .inline-yesno-icon {
      background: rgba(245, 130, 32, 0.20);
    }
    .inline-yesno-yes .inline-yesno-icon svg {
      color: #F58220;
    }
    .inline-yesno-yes .inline-yesno-label {
      color: #F58220;
    }

    /* No Button - Red */
    .inline-yesno-no {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      border-color: rgba(245, 130, 32, 0.30);
    }
    .inline-yesno-no:hover {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.20) 100%);
      border-color: rgba(245, 130, 32, 0.50);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    }
    .inline-yesno-no .inline-yesno-icon {
      background: rgba(245, 130, 32, 0.20);
    }
    .inline-yesno-no .inline-yesno-icon svg {
      color: #F58220;
    }
    .inline-yesno-no .inline-yesno-label {
      color: #F58220;
    }

    /* Inline Form Heading (for slider version) */
    .inline-form-heading {
      font-size: 20px;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 24px;
      line-height: 1.35;
      text-align: center;
    }

    /* Inline Slider Styles */
    .inline-slider-wrapper {
      text-align: center;
      padding: 8px 0 24px;
    }
    .inline-slider-value {
      font-size: 42px;
      font-weight: 700;
      color: #F58220;
      margin-bottom: 16px;
      letter-spacing: -1px;
    }
    .inline-slider {
      width: 100%;
      max-width: 320px;
      height: 8px;
      -webkit-appearance: none;
      appearance: none;
      background: linear-gradient(to right, #F58220 0%, #F58220 33.33%, #e5e7eb 33.33%, #e5e7eb 100%);
      border-radius: 8px;
      outline: none;
      cursor: pointer;
      margin: 0 auto;
      display: block;
    }
    .inline-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 24px;
      height: 24px;
      background: #F58220;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      border: 3px solid white;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .inline-slider::-webkit-slider-thumb:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
    .inline-slider::-moz-range-thumb {
      width: 24px;
      height: 24px;
      background: #F58220;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      border: 3px solid white;
    }
    .inline-slider-labels {
      display: flex;
      justify-content: space-between;
      max-width: 320px;
      margin: 8px auto 0;
      font-size: 13px;
      color: var(--text-light);
      font-weight: 500;
    }

    /* Inline Form CTA Button */
    .inline-form-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      background: linear-gradient(135deg, #F58220 0%, #7639BD 100%);
      color: white;
      font-size: 18px;
      font-weight: 700;
      padding: 16px 32px;
      border: none;
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
      margin-bottom: 16px;
    }
    .inline-form-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    }
    .inline-form-cta:active {
      transform: translateY(0);
    }
    .inline-form-cta svg {
      width: 20px;
      height: 20px;
      transition: transform 0.2s ease;
    }
    .inline-form-cta:hover svg {
      transform: translateX(3px);
    }

    /* Inline Form Helper Text */
    .inline-form-helper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-light);
    }
    .inline-form-helper svg {
      width: 16px;
      height: 16px;
      color: #F58220;
    }

    /* Mobile/Tablet - Center form and stack below content */
    @media (max-width: 968px) {
      .inline-form-wrapper {
        margin-left: auto;
        margin-right: auto;
        max-width: 400px;
        width: 100%;
      }
      .inline-form-card { padding: 28px 24px; }
      .inline-form-question { font-size: 20px; }
      .inline-form-heading { font-size: 20px; }
      .inline-slider-value { font-size: 38px; }
    }
    /* Mobile adjustments for inline form */
    @media (max-width: 480px) {
      .inline-form-wrapper { max-width: 100%; }
      .inline-form-card { padding: 20px 16px; border-radius: 16px; }
      .inline-form-question { font-size: 18px; }
      .inline-form-heading { font-size: 18px; margin-bottom: 16px; }
      .inline-option-btn { padding: 14px 16px; }
      .inline-option-btn .option-icon { width: 36px; height: 36px; }
      .inline-option-btn .option-label { font-size: 14px; }
      .inline-slider-value { font-size: 36px; }
      .inline-slider { max-width: 280px; }
      .inline-slider-labels { max-width: 280px; font-size: 12px; }
      .inline-form-cta { font-size: 16px; padding: 14px 24px; }
    }
    .trust-bar { text-align: left; }
    .trust-badges { justify-content: flex-start; }
    .trust-bar { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border-gray); }
    .trust-text { font-size: 18px; color: var(--text-light); margin-bottom: 16px; }
    .trust-badges { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
    .trust-badge { display: flex; align-items: center; gap: 8px; }
    .trust-badge svg { width: 24px; height: 24px; }
    .trust-badge .value { font-size: 20px; font-weight: 600; color: var(--text-dark); }
    .trust-badge .label { font-size: 18px; color: var(--text-gray); }

    /* Sections - Unified subtle theme */
    .empathy { background: linear-gradient(180deg, #f7f3fd 0%, #ffffff 100%); padding: 80px 0; position: relative; }
    .empathy-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--amber-light); color: var(--amber-text); padding: 10px 20px; border-radius: 999px; font-size: 18px; font-weight: 600; margin-bottom: 32px; }
    .empathy-card { background: white; border-radius: 24px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04); border: 1px solid rgba(245, 130, 32, 0.08); padding: 40px; text-align: center; max-width: 800px; margin: 0 auto; transition: box-shadow 0.3s ease; }
    .empathy-card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05); }
    @media (min-width: 768px) { .empathy-card { padding: 60px; } }
    .empathy-headline { font-size: 36px; font-weight: 700; color: var(--text-dark); margin-bottom: 24px; }
    @media (min-width: 640px) { .empathy-headline { font-size: 42px; } }
    .empathy-text { font-size: 22px; color: var(--text-gray); margin-bottom: 12px; line-height: 1.6; }
    .empathy-text.highlight { color: #F58220; font-weight: 600; }
    .empathy-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border-gray); }
    .stat-badge { display: flex; align-items: center; gap: 12px; background: var(--bg-gray); padding: 12px 20px; border-radius: 12px; }
    .stat-badge svg { width: 24px; height: 24px; color: #F58220; }
    .stat-badge .stat-value { font-size: 20px; font-weight: 700; color: var(--text-dark); }
    .stat-badge .stat-label { font-size: 16px; color: var(--text-light); }
    .empathy-microcopy { font-size: 20px; color: var(--text-light); margin-top: 32px; }

    .steps { background: linear-gradient(180deg, #ffffff 0%, #faf7fe 100%); padding: 80px 0; position: relative; }
    .section-header { text-align: center; margin-bottom: 60px; }
    .section-title { font-size: 40px; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; }
    @media (min-width: 640px) { .section-title { font-size: 48px; } }
    .section-subtitle { font-size: 22px; color: var(--text-gray); max-width: 600px; margin: 0 auto; }
    .steps-grid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 1000px; margin: 0 auto; }
    @media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
    .step-card { background: white; border: 1px solid rgba(245, 130, 32, 0.08); border-radius: 24px; padding: 32px; text-align: center; transition: all 0.3s ease; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); }
    .step-card:hover { border-color: rgba(245, 130, 32, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); transform: translateY(-4px); }
    .step-number { width: 72px; height: 72px; background: #F58220; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; box-shadow: var(--shadow-lg); }
    .step-number span { font-size: 32px; font-weight: 700; color: white; }
    .step-title { font-size: 24px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
    .step-desc { font-size: 20px; color: var(--text-gray); margin-bottom: 20px; line-height: 1.5; }
    .step-time { display: inline-flex; align-items: center; gap: 8px; background: var(--green-light); color: var(--green-text); padding: 8px 16px; border-radius: 999px; font-size: 18px; font-weight: 600; }
    .steps-microcopy { text-align: center; font-size: 20px; color: var(--text-light); margin-top: 48px; }

    .faq { background: linear-gradient(180deg, #faf7fe 0%, #f8f6ff 50%, #faf7fe 100%); padding: 80px 0; position: relative; }
    .faq-list { max-width: 800px; margin: 0 auto; }
    .faq-item { background: white; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); border: 1px solid rgba(245, 130, 32, 0.06); margin-bottom: 16px; overflow: hidden; transition: all 0.2s ease; }
    .faq-item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); border-color: rgba(245, 130, 32, 0.12); }
    .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: none; border: none; cursor: pointer; text-align: left; font-size: 22px; font-weight: 600; color: var(--text-dark); transition: background 0.2s; }
    .faq-question:hover { background: var(--bg-gray); }
    .faq-question svg { width: 28px; height: 28px; color: var(--text-light); flex-shrink: 0; transition: transform 0.3s; }
    .faq-item.open .faq-question svg { transform: rotate(180deg); color: #F58220; }
    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
    .faq-item.open .faq-answer { max-height: 500px; }
    .faq-answer-content { padding: 0 24px 24px; font-size: 20px; color: var(--text-gray); line-height: 1.6; }

    .cta-section { background: linear-gradient(135deg, #F58220 0%, #7639BD 100%); padding: 80px 0; text-align: center; }
    .cta-title { font-size: 36px; font-weight: 700; color: white; margin-bottom: 16px; }
    @media (min-width: 640px) { .cta-title { font-size: 44px; } }
    .cta-subtitle { font-size: 22px; color: rgba(255,255,255,0.9); margin-bottom: 32px; }
    .cta-button { display: inline-flex; align-items: center; justify-content: center; background: white; color: #F58220; font-weight: 700; padding: 18px 40px; border-radius: 12px; text-decoration: none; font-size: 22px; transition: all 0.2s; box-shadow: var(--shadow-lg); cursor: pointer; border: none; }
    .cta-button:hover { transform: scale(1.05); box-shadow: var(--shadow-xl); }

    .footer { background: #111827; color: white; padding: 48px 0; }
    .footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
    @media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
    .footer-logo { height: 40px; width: auto; max-width: 240px; margin-bottom: 16px; object-fit: contain; }
    .footer-desc { font-size: 14px; color: #9ca3af; line-height: 1.6; }
    .footer-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
    .footer-links { list-style: none; }
    .footer-links li { margin-bottom: 12px; }
    .footer-links a { color: #9ca3af; text-decoration: none; font-size: 16px; transition: color 0.2s; }
    .footer-links a:hover { color: white; }
    .footer-bottom { border-top: 1px solid #374151; padding-top: 24px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
    @media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
    .footer-legal { display: flex; gap: 24px; }
    .footer-legal a { color: #6b7280; text-decoration: none; font-size: 14px; }
    .footer-legal a:hover { color: white; }
    .footer-copyright { font-size: 14px; color: #6b7280; }
    .footer-disclaimer { margin-top: 24px; padding-top: 24px; border-top: 1px solid #374151; font-size: 12px; color: #6b7280; line-height: 1.6; }

    /* Floating Mobile CTA */
    .floating-cta {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: white;
      padding: 12px 16px;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
      border-top: 1px solid var(--border-gray);
      animation: slideUp 0.3s ease-out;
    }
    @keyframes slideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }
    .floating-cta button {
      width: 100%;
      padding: 16px 24px;
      background: #F58220;
      color: white;
      font-weight: 700;
      font-size: 18px;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: var(--shadow-lg);
    }
    .floating-cta button:active {
      transform: scale(0.98);
    }
    .floating-cta.visible { display: block; }
    @media (min-width: 769px) { .floating-cta { display: none !important; } }

    /* Improved Card Hover Effects */
    .step-card {
      position: relative;
      overflow: hidden;
    }
    .step-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #F58220, #7639BD);
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }
    .step-card:hover::before {
      transform: scaleX(1);
    }
    .step-card:hover .step-number {
      transform: scale(1.1);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    }
    .step-number {
      transition: all 0.3s ease;
    }

    /* Empathy Card Glow Effect */
    .empathy-card {
      position: relative;
      transition: all 0.3s ease;
    }
    .empathy-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    /* FAQ Item Improvements */
    .faq-item {
      transition: all 0.2s ease;
    }
    .faq-item:hover {
      box-shadow: var(--shadow-md);
    }

    /* CTA Button Pulse Animation */
    .hero-cta, .cta-button {
      position: relative;
      overflow: hidden;
    }
    .hero-cta::after, .cta-button::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255,255,255,0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }
    .hero-cta:hover::after, .cta-button:hover::after {
      width: 300px;
      height: 300px;
    }

    /* Trust Badge Animation */
    .trust-badge {
      transition: all 0.2s ease;
    }
    .trust-badge:hover {
      transform: translateY(-2px);
    }
    .stat-badge {
      transition: all 0.2s ease;
    }
    .stat-badge:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    /* POPUP FORM */
    .popup-overlay { display: none; position: fixed; inset: 0; background: white; z-index: 9999; overflow-y: auto; }
    .popup-overlay.active { display: block; }
    .popup-container { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; }
    .popup-close { display: none !important; }
    .popup-back { display: none !important; }
    .popup-content { width: 100%; max-width: 700px; padding: 40px 20px; }

    /* Form Styles */
    .form-logo { display: flex; justify-content: center; margin-bottom: 24px; }
    .form-logo img { height: 42px; width: auto; }
    @media (min-width: 640px) { .form-logo img { height: 48px; } }
    /* Hide in-step logos since logo is above progress bar */
    .form-step .form-logo { display: none !important; }
    /* Hide top logo and progress bar on thank you page */
    .popup-content:has(.form-success.active) > .form-logo,
    .popup-content:has(.form-success.active) > .progress-bar { display: none !important; }
    .form-step { display: none; text-align: center; }
    .form-step.active { display: block; }
    .form-step.active.slide-in-right { animation: stepSlideInRight 0.3s ease; }
    .form-step.active.slide-in-left { animation: stepSlideInLeft 0.3s ease; }
    @keyframes stepSlideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes stepSlideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
    .step-icon { width: 64px; height: 64px; margin: 0 auto 16px; color: #F58220; }
    .step-heading { font-size: 28px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
    @media (min-width: 640px) { .step-heading { font-size: 36px; } }

    /* Form hierarchy: Tagline (subtle) → Question (prominent) */
    .step-tagline { font-size: 14px; font-weight: 500; color: #6B7280; margin-bottom: 6px; letter-spacing: 0.2px; }
    .step-question { font-size: 22px; font-weight: 700; color: var(--text-dark); margin-bottom: 28px; line-height: 1.3; }
    @media (min-width: 640px) {
      .step-tagline { font-size: 15px; margin-bottom: 8px; }
      .step-question { font-size: 26px; margin-bottom: 32px; }
    }
    .step-subtitle { font-size: 16px; color: var(--text-gray); margin-bottom: 32px; }
    @media (min-width: 640px) { .step-subtitle { font-size: 18px; } }

    /* Option Buttons */
    .options-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 500px; margin: 0 auto; }
    .options-grid .option-btn { flex: 0 0 calc(50% - 6px); max-width: calc(50% - 6px); }
    @media (min-width: 640px) { .options-grid.cols-3 .option-btn { flex: 0 0 calc(33.333% - 8px); max-width: calc(33.333% - 8px); } .options-grid.cols-4 .option-btn { flex: 0 0 calc(25% - 9px); max-width: calc(25% - 9px); } }
    .option-btn { background: white; border: 2px solid var(--border-gray); border-radius: 16px; padding: 20px 16px; cursor: pointer; transition: all 0.2s ease; text-align: center; position: relative; overflow: hidden; }
    .option-btn:hover { border-color: rgba(245, 130, 32, 0.30); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
    .option-btn:active { transform: scale(0.97); }
    .option-btn.selected { background: #F58220; border-color: #F58220; color: white; transform: scale(1.02); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); }
    .option-btn.selected .icon svg { filter: brightness(0) invert(1); }
    .option-btn .icon { font-size: 32px; margin-bottom: 8px; display: flex; justify-content: center; align-items: center; transition: transform 0.2s ease; }
    .option-btn:hover .icon { transform: scale(1.1); }
    .option-btn .icon svg { width: 48px; height: 48px; transition: all 0.2s ease; }
    .option-btn .label { font-size: 17px; font-weight: 600; }
    /* Selection checkmark animation */
    .option-btn.selected::after { content: '✓'; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; background: white; color: #F58220; border-radius: 50%; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; animation: scaleIn 0.2s ease; }

    /* Yes/No Buttons - Green/Red Tint Style - Rectangular */
    .yesno-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 320px; margin: 0 auto 16px; }
    .yesno-btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 14px 24px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      border: 2px solid transparent;
      gap: 10px;
    }
    .yesno-btn:hover { transform: translateY(-2px); }
    .yesno-btn:active { transform: scale(0.98); }

    /* Yes Button - Green tint */
    .yesno-yes {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      border-color: rgba(245, 130, 32, 0.20);
    }
    .yesno-yes:hover {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.20) 100%);
      border-color: rgba(245, 130, 32, 0.50);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    }
    .yesno-yes.selected {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.20) 0%, rgba(245, 130, 32, 0.30) 100%);
      border-color: #F58220;
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.30);
    }
    .yesno-yes .yesno-icon {
      width: 32px;
      height: 32px;
      background: rgba(245, 130, 32, 0.20);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .yesno-yes.selected .yesno-icon {
      background: rgba(245, 130, 32, 0.30);
    }
    .yesno-yes .yesno-icon svg { width: 18px; height: 18px; color: #F58220; }
    .yesno-yes .yesno-label { font-size: 15px; font-weight: 600; color: var(--text-dark); }

    /* No Button - Red tint */
    .yesno-no {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.10) 100%);
      border-color: rgba(245, 130, 32, 0.20);
    }
    .yesno-no:hover {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.10) 0%, rgba(245, 130, 32, 0.20) 100%);
      border-color: rgba(245, 130, 32, 0.50);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    }
    .yesno-no.selected {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.20) 0%, rgba(245, 130, 32, 0.30) 100%);
      border-color: #F58220;
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.30);
    }
    .yesno-no .yesno-icon {
      width: 32px;
      height: 32px;
      background: rgba(245, 130, 32, 0.20);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .yesno-no.selected .yesno-icon {
      background: rgba(245, 130, 32, 0.30);
    }
    .yesno-no .yesno-icon svg { width: 18px; height: 18px; color: #F58220; }
    .yesno-no .yesno-label { font-size: 15px; font-weight: 600; color: var(--text-dark); }

    /* Secure Badge */
    .secure-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-light);
      margin-top: 16px;
    }
    .secure-badge svg { width: 18px; height: 18px; color: #F58220; }

    /* Combined Questions Card */
    .question-card { background: var(--bg-gray); border-radius: 16px; padding: 20px; margin-bottom: 16px; max-width: 500px; margin-left: auto; margin-right: auto; }
    .question-card-title { font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 12px; text-align: center; }
    .question-card .yesno-grid { margin: 0 auto; max-width: 260px; }
    .question-card .yesno-btn { padding: 12px 20px; }
    .question-card .yesno-icon { width: 28px; height: 28px; }
    .question-card .yesno-icon svg { width: 16px; height: 16px; }

    /* Input Fields */
    .input-wrapper { max-width: 500px; margin: 0 auto; }
    .input-group { margin-bottom: 16px; text-align: left; }
    .input-label { display: block; font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
    .input-field { width: 100%; padding: 16px 20px; font-size: 18px; border: 2px solid var(--border-gray); border-radius: 12px; outline: none; transition: all 0.2s ease; }
    .input-field:focus { border-color: #F58220; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1); }
    .input-field.error { border-color: #F58220; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.10); }
    .input-field.center { text-align: center; font-size: 24px; font-weight: 600; }
    .input-error { font-size: 13px; color: #F58220; margin-top: 4px; }
    .input-icon { position: relative; }
    .input-icon .form-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-light); }
    .input-icon .input-field { padding-left: 48px; }

    /* Multi-select */
    .multiselect-grid { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 500px; margin: 0 auto; }
    @media (min-width: 640px) { .multiselect-grid { grid-template-columns: repeat(2, 1fr); } }
    .multiselect-btn { background: white; border: 2px solid var(--border-gray); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all 0.2s; text-align: left; display: flex; align-items: center; gap: 12px; }
    .multiselect-btn:hover { border-color: rgba(245, 130, 32, 0.30); }
    .multiselect-btn.selected { background: #F5EDFF; border-color: #F58220; }
    .multiselect-btn .checkbox { width: 22px; height: 22px; border: 2px solid var(--border-gray); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; color: transparent; }
    .multiselect-btn.selected .checkbox { background: #F58220; border-color: #F58220; color: white; }
    .multiselect-btn .label { font-size: 15px; font-weight: 500; }

    /* SMS Input */
    .sms-input { width: 100%; max-width: 280px; padding: 18px; font-size: 28px; font-weight: 700; text-align: center; letter-spacing: 10px; border: 2px solid var(--border-gray); border-radius: 16px; outline: none; margin: 0 auto; display: block; transition: all 0.2s ease; }
    .sms-input:focus { border-color: #F58220; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15); }
    .sms-helper { font-size: 14px; color: var(--text-light); margin-top: 16px; text-align: center; }
    .resend-link { color: #F58220; cursor: pointer; text-decoration: underline; }

    /* Buttons */
    .continue-btn { width: 100%; max-width: 400px; padding: 16px 32px; background: #F58220; color: white; font-size: 18px; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; box-shadow: var(--shadow-lg); margin: 24px auto 0; display: block; position: relative; overflow: hidden; }
    .continue-btn:hover:not(:disabled) { background: #7639BD; transform: scale(1.02); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); }
    .continue-btn:active:not(:disabled) { transform: scale(0.98); }
    .continue-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .continue-btn.loading { pointer-events: none; }
    .continue-btn.loading::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid transparent; border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; top: 50%; left: 50%; margin: -10px 0 0 -10px; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .helper-text { font-size: 14px; color: var(--text-light); margin-top: 20px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .helper-text svg { width: 16px; height: 16px; flex-shrink: 0; }

    /* Message Box */
    .message-box { background: var(--amber-light); border: 1px solid #fcd34d; border-radius: 16px; padding: 24px; max-width: 500px; margin: 0 auto 24px; text-align: left; }
    .message-box p { font-size: 15px; color: var(--amber-text); line-height: 1.6; }

    /* ═══════════════════════════════════════════════════════════════════════════
       ENHANCED THANK YOU PAGE - Option B: Expert Review Required
       ═══════════════════════════════════════════════════════════════════════════ */

    .form-success { display: none; text-align: center; padding: 24px 16px 40px; max-width: 640px; margin: 0 auto; }
    .form-success.active { display: block; }
    @media (min-width: 640px) { .form-success { padding: 32px 24px 48px; } }

    /* Success Header */
    .success-header { margin-bottom: 28px; animation: fadeInUp 0.5s ease-out; }
    .coverage-icon { width: 72px; height: 72px; background: linear-gradient(135deg, #F58220 0%, #7639BD 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); animation: successBounce 0.6s ease-out; }
    .coverage-icon svg { width: 36px; height: 36px; color: white; }
    @keyframes successBounce {
      0% { transform: scale(0); opacity: 0; }
      50% { transform: scale(1.15); }
      70% { transform: scale(0.95); }
      100% { transform: scale(1); opacity: 1; }
    }
    .success-title { font-size: 22px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; line-height: 1.3; }
    @media (min-width: 640px) { .success-title { font-size: 26px; } }
    .success-subtitle { font-size: 16px; color: var(--text-gray); line-height: 1.5; margin: 0; }
    @media (min-width: 640px) { .success-subtitle { font-size: 17px; } }

    /* Profile Summary */
    .profile-summary { background: var(--bg-gray); border-radius: 16px; padding: 20px; margin-bottom: 24px; animation: fadeInUp 0.5s ease-out 0.1s forwards; opacity: 0; }
    .profile-summary-title { font-size: 12px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
    .profile-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
    .profile-badge { display: inline-flex; align-items: center; gap: 6px; background: white; border: 1px solid var(--border-gray); border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--text-dark); }
    .profile-badge svg { width: 16px; height: 16px; color: #F58220; }
    .profile-badge.warning { background: #fef3c7; border-color: #fcd34d; color: #7639BD; }
    .profile-badge.warning svg { color: #d97706; }

    /* Risk Assessment Cards */
    .risk-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; animation: fadeInUp 0.5s ease-out 0.2s forwards; opacity: 0; }
    .risk-card { background: white; border: 2px solid var(--border-gray); border-radius: 16px; padding: 20px; text-align: left; transition: all 0.2s ease; width: 100%; max-width: 100%; }
    .risk-card:hover { border-color: #F58220; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
    .risk-card.condition { border-left-color: #f59e0b; border-left-width: 4px; }
    .risk-card.smoking { border-left-color: #F58220; border-left-width: 4px; }
    .risk-card.coverage { border-left-color: #F58220; border-left-width: 4px; }
    .risk-card.balance { border-left-color: #F58220; border-left-width: 4px; }
    .risk-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
    .risk-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .risk-card.condition .risk-card-icon { background: #fef3c7; color: #d97706; }
    .risk-card.smoking .risk-card-icon { background: #fee2e2; color: #F58220; }
    .risk-card.coverage .risk-card-icon { background: #F5EDFF; color: #F58220; }
    .risk-card.balance .risk-card-icon { background: #d1fae5; color: #F58220; }
    .risk-card-icon svg { width: 22px; height: 22px; }
    .risk-card-title { font-size: 16px; font-weight: 700; color: var(--text-dark); }
    .risk-card-body { font-size: 14px; color: var(--text-gray); line-height: 1.6; }
    .risk-card-highlight { background: linear-gradient(135deg, rgba(245, 130, 32, 0.08), rgba(124, 58, 237, 0.04)); border-radius: 8px; padding: 12px; margin-top: 10px; font-size: 14px; color: var(--text-dark); font-weight: 500; }

    /* Providers Section */
    .providers-section { background: white; border: 2px solid var(--border-gray); border-radius: 20px; padding: 24px 20px; margin-bottom: 24px; animation: fadeInUp 0.5s ease-out 0.3s forwards; opacity: 0; }
    @media (min-width: 640px) { .providers-section { padding: 28px; } }
    .providers-header { margin-bottom: 20px; }
    .providers-title { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
    .providers-intro { font-size: 14px; color: var(--text-gray); margin: 0; }
    .providers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
    .provider-card { background: var(--bg-gray); border-radius: 12px; padding: 16px 12px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
    .provider-card:hover { background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
    .provider-logo { max-width: 100%; max-height: 32px; width: auto; height: auto; filter: grayscale(30%); transition: filter 0.2s ease; }
    .provider-card:hover .provider-logo { filter: grayscale(0%); }
    @media (max-width: 480px) {
      .providers-grid { grid-template-columns: repeat(2, 1fr); }
      .provider-card { padding: 14px 10px; }
      .provider-logo { max-height: 26px; }
    }
    .providers-warning { display: flex; align-items: flex-start; gap: 12px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 12px; padding: 14px 16px; text-align: left; }
    .providers-warning svg { width: 22px; height: 22px; color: #d97706; flex-shrink: 0; margin-top: 1px; }
    .providers-warning p { font-size: 14px; color: #7639BD; line-height: 1.5; margin: 0; }

    /* Expert Guidance Section */
    .expert-section { background: white; border: 2px solid var(--border-gray); border-radius: 20px; padding: 24px 20px; margin-bottom: 24px; animation: fadeInUp 0.5s ease-out 0.4s forwards; opacity: 0; }
    @media (min-width: 640px) { .expert-section { padding: 28px; } }
    .expert-title { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; }
    .expert-reasons { display: flex; flex-direction: column; gap: 12px; }
    .expert-reason { background: var(--bg-gray); border-radius: 12px; padding: 16px; text-align: left; display: flex; align-items: flex-start; gap: 12px; }
    .expert-reason-icon { width: 36px; height: 36px; background: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #F58220; }
    .expert-reason-icon svg { width: 20px; height: 20px; }
    .expert-reason-content { flex: 1; }
    .expert-reason-title { font-size: 15px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
    .expert-reason-text { font-size: 14px; color: var(--text-gray); line-height: 1.5; margin: 0; }

    /* Timeline Section */
    .timeline-section { background: white; border: 2px solid var(--border-gray); border-radius: 20px; padding: 24px 20px; margin-bottom: 24px; animation: fadeInUp 0.5s ease-out 0.5s forwards; opacity: 0; }
    .timeline-title { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 24px; }
    .timeline { position: relative; }
    .timeline-track { position: absolute; top: 12px; left: 24px; right: 24px; height: 4px; background: var(--border-gray); border-radius: 2px; z-index: 1; }
    .timeline-progress { width: 10%; height: 100%; background: #F58220; border-radius: 2px; animation: timelineGrow 1s ease-out 0.8s forwards; }
    @keyframes timelineGrow { to { width: 100%; } }
    .timeline-steps { display: flex; justify-content: space-between; position: relative; z-index: 2; }
    .timeline-step { display: flex; flex-direction: column; align-items: center; flex: 1; }
    .timeline-dot { width: 24px; height: 24px; background: white; border: 3px solid var(--border-gray); border-radius: 50%; margin-bottom: 10px; transition: all 0.3s ease; }
    .timeline-step.active .timeline-dot { background: #F58220; border-color: #F58220; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2); }
    .timeline-label { font-size: 12px; font-weight: 700; color: var(--text-dark); margin-bottom: 2px; }
    .timeline-desc { font-size: 11px; color: var(--text-light); text-align: center; }
    @media (max-width: 480px) {
      .timeline-track { left: 12px; right: 12px; }
      .timeline-label { font-size: 10px; }
      .timeline-desc { font-size: 9px; }
    }

    /* Closing Section */
    .closing-section { animation: fadeInUp 0.5s ease-out 0.6s forwards; opacity: 0; }
    .closing-quote { font-size: 17px; font-weight: 500; color: var(--text-dark); line-height: 1.6; max-width: 500px; margin: 0 auto 20px; padding: 0; border: none; font-style: normal; }
    .closing-quote::before, .closing-quote::after { display: none; }
    .closing-trust { display: inline-flex; align-items: center; gap: 8px; background: var(--green-light); color: var(--green-text); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; }
    .closing-trust svg { width: 18px; height: 18px; }

    /* Selection Summary */
    .selection-summary { background: var(--bg-gray); border-radius: 16px; padding: 24px; margin-top: 32px; max-width: 500px; margin-left: auto; margin-right: auto; text-align: left; }
    .summary-title { font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 16px; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; }
    .summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    @media (max-width: 480px) { .summary-grid { grid-template-columns: 1fr; } }
    .summary-item { background: white; border-radius: 12px; padding: 12px 16px; border: 1px solid var(--border-gray); }
    .summary-item.full-width { grid-column: 1 / -1; }
    .summary-label { font-size: 12px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
    .summary-value { font-size: 15px; font-weight: 600; color: var(--text-dark); }

    /* Progress */
    .progress-bar { height: 6px; background: var(--border-gray); border-radius: 3px; margin-bottom: 32px; max-width: 400px; margin-left: auto; margin-right: auto; overflow: hidden; }
    .progress-fill { height: 100%; background: linear-gradient(90deg, #F58220 0%, #7639BD 50%, #F58220 100%); background-size: 200% 100%; border-radius: 3px; transition: width 0.4s ease; animation: shimmer 2s infinite linear; }
    @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

    /* ═══════════════════════════════════════════════════════════════════════════
       RESPONSIVE FIXES FOR THANK YOU PAGE - 100/100 Device Compatibility
       ═══════════════════════════════════════════════════════════════════════════ */

    /* Risk Cards - Single column full width at all sizes */
    @media (min-width: 640px) {
      .form-success { max-width: 800px; }
      .risk-cards { gap: 16px; }
    }
    @media (min-width: 1024px) {
      .form-success { max-width: 900px; padding: 40px 32px 56px; }
    }

    /* Fix 2: Tablet Provider Grid (2 cols on tablet, 4 on desktop) */
    @media (min-width: 481px) and (max-width: 767px) {
      .providers-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* Fix 3: Timeline Accessibility - Larger fonts on mobile, wrap on very small screens */
    @media (max-width: 480px) {
      .timeline-label { font-size: 11px; }
      .timeline-desc { font-size: 10px; }
      .timeline-step { min-width: 60px; }
    }
    @media (max-width: 360px) {
      .timeline-steps { flex-wrap: wrap; gap: 16px; justify-content: center; }
      .timeline-track { display: none; }
      .timeline-step { min-width: 80px; }
      .timeline-label { font-size: 12px; }
      .timeline-desc { font-size: 11px; }
    }

    /* Fix 4: Expert Section 2-Column on Desktop */
    @media (min-width: 768px) {
      .expert-reasons { display: grid; grid-template-columns: repeat(2, 1fr); }
      .expert-reason { transition: all 0.2s ease; }
      .expert-reason:hover { background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
      .expert-reason:last-child:nth-child(odd) { grid-column: 1 / -1; }
    }

    /* Fix 5: Profile Badges Protection - Prevent text wrapping and overflow */
    .profile-badge { min-width: max-content; white-space: nowrap; }
    @media (max-width: 360px) {
      .profile-badges { gap: 6px; }
      .profile-badge { padding: 6px 10px; font-size: 12px; }
    }

    /* Fix 6: Touch Device Optimization - Remove hover effects that cause issues */
    @media (hover: none) {
      .risk-card:hover { transform: none; box-shadow: none; border-color: var(--border-gray); }
      .risk-card.condition:hover { border-left-color: #f59e0b; }
      .risk-card.smoking:hover { border-left-color: #F58220; }
      .risk-card.coverage:hover { border-left-color: #F58220; }
      .risk-card.balance:hover { border-left-color: #F58220; }
      .provider-card:hover { transform: none; box-shadow: none; background: var(--bg-gray); }
      .expert-reason:hover { transform: none; box-shadow: none; background: var(--bg-gray); }
    }

    /* Tablet styles (768px - 1024px) - center for better balance */
    @media (min-width: 768px) and (max-width: 1023px) {
      .hero-overlay { background: linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0.85)); }
      .hero-headline, .hero-subheadline { text-align: center; }
      .hero-cta { display: flex; justify-content: center; margin: 0 auto; width: fit-content; }
      .trust-bar, .trust-text { text-align: center; }
      .trust-badges { justify-content: center; }
      .hero-headline { font-size: 52px; }
      .hero-subheadline { font-size: 22px; }
    }

    /* Desktop (1024px+) - Two-column layout adjustments */
    @media (min-width: 1024px) {
      .hero .container { max-width: 1400px; margin: 0 auto; padding: 0 6%; }
      .hero .hero-content { max-width: 100%; text-align: left; }
      .hero .hero-headline, .hero .hero-subheadline { text-align: left; }
      .hero .trust-bar { text-align: left; }
      .hero .trust-text { text-align: left; }
      .hero .trust-badges { justify-content: flex-start; }
    }
    @media (min-width: 1280px) {
      .hero .container { padding: 0 7%; }
    }
    @media (min-width: 1440px) {
      .hero .container { padding: 0 8%; max-width: 1600px; }
    }
    @media (min-width: 1920px) {
      .hero .container { padding: 0 10%; }
    }

    @media (max-width: 768px) {
      .hero-overlay { background: linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0.85)); }
      .hero-headline, .hero-subheadline { text-align: center; }
      .hero-cta { display: flex; justify-content: center; margin: 0 auto; width: fit-content; }
      .trust-bar, .trust-text { text-align: center; }
      .trust-badges { justify-content: center; flex-wrap: wrap; gap: 16px; }
      /* Header mobile adjustments */
      .logo { height: 36px; margin: 0; }
      .footer, .footer-grid { text-align: center; }
      .footer-logo { margin: 0 auto 16px; }
      .footer-bottom { text-align: center; align-items: center; }
      .footer-legal { justify-content: center; }
      /* Hide X and back buttons on mobile */
      .popup-close, .popup-back { display: none !important; }
      /* Popup form - reduce top spacing */
      .popup-content { padding: 20px 16px; }
      .progress-bar { margin-bottom: 16px; }
      .form-logo { margin-bottom: 12px; }
      .form-logo img { height: 30px; }
      .step-icon { width: 48px; height: 48px; font-size: 32px !important; margin-bottom: 8px; }
      .step-heading { font-size: 26px; margin-bottom: 4px; }
      .step-tagline { font-size: 15px; margin-bottom: 4px; }
      .step-question { font-size: 24px; margin-bottom: 20px; }
      .step-subtitle { font-size: 16px; margin-bottom: 20px; }
      /* Yes/No buttons - responsive */
      .yesno-grid { max-width: 320px; gap: 12px; }
      .yesno-btn { padding: 18px 16px; font-size: 20px; font-weight: 700; }
      .yesno-icon { width: 40px !important; height: 40px !important; }
      .yesno-icon svg { width: 20px !important; height: 20px !important; }
      /* Question card Yes/No centered */
      .question-card .yesno-grid { justify-content: center; margin: 0 auto; }
      /* Option buttons - light purple border */
      .option-btn {
        border: 2px solid rgba(245, 130, 32, 0.30);
      }
      .multiselect-btn {
        border: 2px solid rgba(245, 130, 32, 0.30);
      }
      .helper-text { margin-top: 16px; }
    }
    @media (max-width: 480px) {
      .logo { height: 32px; }
      /* header-cta sizing handled by show-cta state */
      .popup-content { padding: 16px 12px; }
      .form-logo img { height: 24px; }
      .step-icon { font-size: 28px !important; margin-bottom: 6px; }
      .step-heading { font-size: 24px; }
      .step-tagline { font-size: 14px; }
      .step-question { font-size: 22px; margin-bottom: 16px; }
      .step-subtitle { font-size: 15px; margin-bottom: 16px; }
      .yesno-grid { gap: 10px; max-width: 280px; }
      .yesno-btn { padding: 16px 12px; font-size: 19px; font-weight: 700; }
      .gender-cards-wrapper { gap: 12px; }
      .gender-card { padding: 16px 20px; }
      .gender-text-btn { padding: 12px 20px; font-size: 14px; }
    }

/* ═══════════════════════════════════════════════════════════════════════════
   SLIDER STYLES FOR INCOME PROTECTION COVERAGE AMOUNT
   ═══════════════════════════════════════════════════════════════════════════ */

.slider-wrapper { text-align: center; padding: 20px 0; }
.slider-value { font-size: 48px; font-weight: 700; color: #F58220; margin-bottom: 24px; }
@media (min-width: 640px) { .slider-value { font-size: 56px; } }
.slider-input { width: 100%; max-width: 400px; height: 12px; -webkit-appearance: none; appearance: none; background: var(--border-gray); border-radius: 6px; outline: none; cursor: pointer; }
.slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; background: #F58220; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); transition: all 0.2s ease; }
.slider-input::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
.slider-input::-moz-range-thumb { width: 32px; height: 32px; background: #F58220; border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
.slider-labels { display: flex; justify-content: space-between; max-width: 400px; margin: 12px auto 0; font-size: 14px; color: var(--text-light); }

/* Slider Tick Marks */
.slider-ticks { position: relative; max-width: 400px; margin: 0 auto; height: 24px; }
.slider-tick { position: absolute; transform: translateX(-50%); text-align: center; }
.slider-tick .tick-mark { display: block; width: 2px; height: 8px; background: #d1d5db; margin: 0 auto 4px; }
.slider-tick .tick-label { font-size: 10px; color: #9ca3af; white-space: nowrap; }
@media (max-width: 480px) {
  .slider-tick .tick-label { font-size: 8px; }
  .slider-tick:nth-child(even) .tick-label { display: none; }
}

/* Gender Couple Selection - Card Style */
.gender-cards-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
  margin: 0 auto 24px;
}
.gender-card {
  background: var(--bg-gray);
  border-radius: 16px;
  padding: 20px 24px;
  border: 1px solid var(--border-gray);
}
.gender-card-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 12px;
  text-align: center;
}
.gender-card-options {
  display: flex;
  gap: 12px;
  justify-content: stretch;
  align-items: stretch;
}
.gender-text-btn {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
  padding: 14px 24px;
  background: white;
  border: 2px solid var(--border-gray);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s ease;
}
.gender-text-btn:hover {
  border-color: #F58220;
  background: rgba(245, 130, 32, 0.04);
}
.gender-text-btn.selected {
  background: #F58220;
  border-color: #F58220;
  color: white;
}

/* Combined Inputs (Age for couple) */
.combined-inputs .input-group { margin-bottom: 16px; }
.combined-inputs .input-group:last-of-type { margin-bottom: 24px; }

/* Combined Questions (Smoker for couple) */
.combined-questions { display: flex; flex-direction: column; gap: 16px; max-width: 500px; margin: 0 auto 24px; }

/* Loading State */
.loading-state { text-align: center; padding: 40px 20px; }
.loading-state p { font-size: 18px; color: var(--text-gray); }

/* Center single risk card */
/* Single risk card centering */
.risk-cards:has(:only-child) .risk-card {
  flex: 0 0 100%;
  max-width: 320px;
}
/* Center providers grid */
.providers-grid {
  justify-content: center;
}
/* Center success content */
.form-success {
  text-align: center;
}
.form-success > * {
  margin-left: auto;
  margin-right: auto;
}

/* Success Logo Centering */
.success-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.success-logo img {
  max-height: 36px;
  width: auto;
}

/* ===== HARDCODED YES/NO BUTTON COLORS ===== */
/* These override brand colors to ensure consistent Yes=Green, No=Red */

/* Yes Button - GREEN (hardcoded, not brand color) */
.yesno-yes {
  background: #dcfce7 !important; /* green-100 */
  border-color: #bbf7d0 !important; /* green-200 */
}
.yesno-yes:hover {
  background: #bbf7d0 !important; /* green-200 */
  border-color: #F5EDFF !important; /* green-300 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10) !important;
}
.yesno-yes.selected {
  background: #F5EDFF !important; /* green-300 */
  border-color: #F58220 !important; /* green-500 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20) !important;
}
.yesno-yes .yesno-icon {
  width: 32px; height: 32px;
  background: #bbf7d0 !important; /* green-200 */
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.yesno-yes.selected .yesno-icon {
  background: #F58220 !important; /* green-400 */
}
.yesno-yes .yesno-icon svg { width: 18px; height: 18px; color: #F58220 !important; /* green-600 */ }
.yesno-yes.selected .yesno-icon svg { color: #7639BD !important; /* green-700 */ }
.yesno-yes .yesno-label { font-size: 15px; font-weight: 600; color: #7639BD !important; /* green-800 */ }

/* No Button - RED (hardcoded, not brand color) */
.yesno-no {
  background: #fee2e2 !important; /* red-100 */
  border-color: #fecaca !important; /* red-200 */
}
.yesno-no:hover {
  background: #fecaca !important; /* red-200 */
  border-color: #fca5a5 !important; /* red-300 */
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.15) !important;
}
.yesno-no.selected {
  background: #fca5a5 !important; /* red-300 */
  border-color: #ef4444 !important; /* red-500 */
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25) !important;
}
.yesno-no .yesno-icon {
  width: 32px; height: 32px;
  background: #fecaca !important; /* red-200 */
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.yesno-no.selected .yesno-icon {
  background: #f87171 !important; /* red-400 */
}
.yesno-no .yesno-icon svg { width: 18px; height: 18px; color: #dc2626 !important; /* red-600 */ }
.yesno-no.selected .yesno-icon svg { color: #b91c1c !important; /* red-700 */ }
.yesno-no .yesno-label { font-size: 15px; font-weight: 600; color: var(--text-dark) !important; /* red-800 */ }

/* Inline Yes/No Buttons (hero section) - GREEN/RED */
.inline-yesno-yes {
  background: #dcfce7 !important;
  border-color: #bbf7d0 !important;
}
.inline-yesno-yes:hover {
  background: #bbf7d0 !important;
  border-color: #F5EDFF !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10) !important;
}
.inline-yesno-yes .inline-yesno-icon {
  background: #bbf7d0 !important;
}
.inline-yesno-yes .inline-yesno-icon svg {
  color: #F58220 !important;
}
.inline-yesno-yes .inline-yesno-label {
  color: #7639BD !important;
}

.inline-yesno-no {
  background: #fee2e2 !important;
  border-color: #fecaca !important;
}
.inline-yesno-no:hover {
  background: #fecaca !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.15) !important;
}
.inline-yesno-no .inline-yesno-icon {
  background: #fecaca !important;
}
.inline-yesno-no .inline-yesno-icon svg {
  color: #dc2626 !important;
}
.inline-yesno-no .inline-yesno-label {
  color: var(--text-dark) !important;
}

/* Name Row Layout for firstName/lastName */
.name-row { display: flex; gap: 12px; margin-bottom: 0; }
.name-row .input-group.half { flex: 1; margin-bottom: 16px; }
@media (max-width: 480px) { .name-row { flex-direction: column; gap: 0; } }
/* ===== END HARDCODED YES/NO COLORS ===== */

/* ============================================================
   Compare Income Protection, clean overrides (seed-template hardening)
   - Force CTA buttons to brand purple regardless of project
     --brand-primary injection
   - Neutralize the wide brand-color CTA-section band so the
     (now-purple) buttons are visible against neutral background
   - Switch .cta-title / .cta-subtitle from white → dark since
     the band background is now white
   - Concrete brand-color fallbacks for render contexts that
     do not inject project brand colors
   ============================================================ */

:root {
  --brand-primary: #F58220;
  --brand-primary-dark: #7639BD;
  --brand-primary-light: #F5EDFF;
  --brand-primary-10: rgba(245, 130, 32, 0.10);
  --brand-primary-20: rgba(245, 130, 32, 0.20);
  --brand-primary-30: rgba(245, 130, 32, 0.30);
  --brand-primary-50: rgba(245, 130, 32, 0.50);
  --brand-primary-70: rgba(245, 130, 32, 0.70);
}

/* All CTA buttons forced to brand purple, regardless of any
   project brand-color injection coming from CustomCodedRenderer. */
.cta-button,
.hero-cta,
.header-cta,
.section-cta,
button.cta-button,
button.hero-cta,
button.header-cta,
button.section-cta {
  background: #F58220 !important;
  color: #ffffff !important;
  border-color: #F58220 !important;
}
.cta-button:hover,
.hero-cta:hover,
.header-cta:hover,
.section-cta:hover {
  background: #7639BD !important;
  color: #ffffff !important;
}

/* Neutralize the wide CTA-section band, was a flat brand-color
   gradient. Now white with thin border, so the purple button is
   clearly visible against neutral background. */
section.cta-section {
  background: #ffffff !important;
  padding: 56px 0 !important;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

/* CTA-section heading + subhead, were white (designed for the
   purple band). Switch to dark for the new white background. */
.cta-section .cta-title    { color: #111827 !important; }
.cta-section .cta-subtitle { color: #4b5563 !important; }

/* Hard-hide floating mobile CTA on desktop, the original media
   query may be defeated by .floating-cta.visible class added by
   scroll-JS at runtime. */
@media (min-width: 769px) {
  .floating-cta,
  .floating-cta.visible {
    display: none !important;
  }
}

/* Mobile floating CTA: hidden by default, shown only when JS adds
   .visible (after the user has scrolled past the hero). */
@media (max-width: 768px) {
  .floating-cta { display: none !important; }
  .floating-cta.visible { display: block !important; }
}

/* ============================================================
   Defeat globals.css :root --brand-primary default
   ============================================================
   src/app/globals.css :root sets --brand-primary: #f87416 (orange)
   as the platform default. Loaded later in cascade than this file,
   so :root with no !important loses. Fix: redefine the variable
   at body / .custom-coded-page scope, these are CHILDREN of html,
   so they override :root via inheritance for any element inside,
   regardless of source order.
*/
body {
  --brand-primary: #F58220 !important;
  --brand-primary-hover: #7639BD !important;
  --brand-primary-dark: #7639BD !important;
  --brand-primary-light: #F5EDFF !important;
  --brand-primary-5: rgba(245, 130, 32, 0.05) !important;
  --brand-primary-10: rgba(245, 130, 32, 0.10) !important;
  --brand-primary-20: rgba(245, 130, 32, 0.20) !important;
  --brand-primary-30: rgba(245, 130, 32, 0.30) !important;
  --brand-primary-50: rgba(245, 130, 32, 0.50) !important;
  --brand-primary-70: rgba(245, 130, 32, 0.70) !important;
  --primary: #F58220 !important;
  --primary-hover: #7639BD !important;
}

/* ============================================================
   Belt-and-suspenders CTA-button purple, higher specificity
   in case the platform injects ANY rule later in the cascade
   targeting these classes. html body N> single class.
   ============================================================ */
html body .cta-button,
html body .hero-cta,
html body .header-cta,
html body .section-cta,
html body button.cta-button,
html body button.hero-cta,
html body button.header-cta,
html body button.section-cta .cta-button .hero-cta .header-cta {
  background: #F58220 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #F58220 !important;
}
html body .cta-button:hover,
html body .hero-cta:hover,
html body .header-cta:hover,
html body .section-cta:hover {
  background: #7639BD !important;
  color: #ffffff !important;
}

/* ============================================================
   Empathy section, mobile tightening
   On phones, the original 40px card padding + 22px body + 3
   horizontally-laid stat badges either wrap awkwardly or feel
   bloated. Compact everything for max-width: 640px.
   ============================================================ */
@media (max-width: 640px) {
  .empathy { padding: 48px 0 !important; }
  .empathy-badge { font-size: 14px !important; padding: 8px 16px !important; margin-bottom: 20px !important; }
  .empathy-card {
    padding: 24px 20px !important;
    border-radius: 16px !important;
    margin-left: 16px;
    margin-right: 16px;
  }
  .empathy-headline {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
  }
  .empathy-text {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
  }
  .empathy-text.highlight { font-size: 17px !important; }
  .empathy-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 24px !important;
    padding-top: 20px !important;
  }
  /* Mobile stat-badges keep the default flex row so the icon sits next
     to the value/label instead of floating above them with the number
     pushed into the bottom-left corner. */
  .stat-badge {
    flex-direction: row !important;
    text-align: left !important;
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .stat-badge svg { width: 22px !important; height: 22px !important; }
  .stat-badge .stat-value { font-size: 16px !important; }
  .stat-badge .stat-label { font-size: 12px !important; line-height: 1.2; }
  .empathy-microcopy {
    font-size: 15px !important;
    margin-top: 20px !important;
    padding: 0 16px;
  }
}

/* === Uiverse-style options + larger step heading (wio update) === */
.option-btn .icon { display: none !important; }

.step-heading { font-size: 34px !important; }

.option-btn {
  background: #ffffff !important;
  color: #000 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 15px !important;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  min-height: 60px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

.option-btn .label {
  font-size: 17px !important;
  font-weight: 600 !important;
}

.option-btn:hover {
  background: #F58220 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.option-btn:hover .label { color: #ffffff !important; }

.option-btn.selected {
  background: #F58220 !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.option-btn.selected .label { color: #ffffff !important; }

.options-grid { align-items: stretch; }
.options-grid .option-btn {
  flex: 0 0 calc(50% - 6px);
  max-width: calc(50% - 6px);
}

@media (max-width: 768px) {
  .step-heading { font-size: 26px !important; }
}

@media (max-width: 480px) {
  .step-heading { font-size: 22px !important; }
}

/* === wio update: yes/no green/red, multi-select Uiverse, step card bg === */

/* Form step: flush with popup background, no card, no shadow */
.form-step {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 28px 20px !important;
  box-shadow: none !important;
}

/* Yes/No buttons (popup + hero): same Uiverse design, no icon */
.yesno-grid,
.inline-yesno-grid {
  display: flex !important;
  gap: 12px !important;
  max-width: 360px;
  margin: 0 auto 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.yesno-btn,
.inline-yesno-btn {
  flex: 1 1 calc(50% - 6px) !important;
  min-width: 120px;
  background: #ffffff !important;
  color: #000 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 15px !important;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  min-height: 60px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer;
}

.yesno-icon,
.inline-yesno-icon { display: none !important; }

.yesno-label,
.inline-yesno-label {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: inherit !important;
}

/* Yes -> green */
.yesno-yes:hover,
.yesno-yes.selected,
.inline-yesno-yes:hover {
  background: linear-gradient(320deg, #1B7C3D, #34C759) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* No -> red */
.yesno-no:hover,
.yesno-no.selected,
.inline-yesno-no:hover {
  background: linear-gradient(320deg, #B22222, #E63946) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* Multi-select: same Uiverse card design, brand purple on hover/selected */
.multiselect-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 500px;
  margin: 0 auto;
  align-items: stretch;
  justify-content: center;
}

.multiselect-btn {
  flex: 0 0 calc(50% - 6px) !important;
  max-width: calc(50% - 6px);
  background: #ffffff !important;
  color: #000 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 15px !important;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  min-height: 60px;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
  cursor: pointer;
}

.multiselect-btn .checkbox {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.2) !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 14px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease;
}

.multiselect-btn .label {
  flex: 1;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: inherit !important;
}

.multiselect-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 14px rgba(0, 0, 0, 0.18) !important;
}

.multiselect-btn.selected {
  background: #F58220 !important;
  color: #ffffff !important;
}
.multiselect-btn.selected .checkbox {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #F58220 !important;
}

/* Mobile: stack yes/no full width inside the buttermilk card */
@media (max-width: 480px) {
  .form-step { padding: 20px 14px !important; }
  .yesno-btn, .inline-yesno-btn { min-width: 0; }
  .multiselect-btn { flex-basis: 100% !important; max-width: 100% !important; }
}

/* === wio update v2: glass-light yes/no colors === */
.yesno-yes:hover,
.yesno-yes.selected,
.inline-yesno-yes:hover {
  background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%) !important;
  color: var(--text-dark) !important;
  box-shadow: 0 8px 16px rgba(34, 197, 94, 0.20) !important;
  transform: translateY(-2px);
}
.yesno-yes:hover .yesno-label,
.yesno-yes.selected .yesno-label,
.inline-yesno-yes:hover .inline-yesno-label { color: var(--text-dark) !important; }

.yesno-no:hover,
.yesno-no.selected,
.inline-yesno-no:hover {
  background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%) !important;
  color: var(--text-dark) !important;
  box-shadow: 0 8px 16px rgba(239, 68, 68, 0.20) !important;
  transform: translateY(-2px);
}
.yesno-no:hover .yesno-label,
.yesno-no.selected .yesno-label,
.inline-yesno-no:hover .inline-yesno-label { color: var(--text-dark) !important; }

/* === wio update v3: hero white background, buttermilk card pops === */
.hero { background: #ffffff !important; }
.hero::before { display: none !important; }

/* life-cta has a bg image + white overlay, pure white, no tint */
.hero-overlay {
  background: linear-gradient(to right,
    #ffffff 0%,
    #ffffff 45%,
    rgba(255, 255, 255, 0.92) 60%,
    rgba(255, 255, 255, 0.6) 78%,
    rgba(255, 255, 255, 0.2) 100%) !important;
}
@media (max-width: 768px) {
  .hero-overlay {
    background: linear-gradient(to bottom,
      #ffffff 0%,
      #ffffff 50%,
      rgba(255, 255, 255, 0.85) 100%) !important;
  }
}

/* === wio update: hero inline form card flush with hero background === */
.inline-form-card {
  background: transparent !important;
}

/* === wio update: fixed buttermilk card size for consistency across all steps === */
.form-step {
  min-height: 540px !important;
}
@media (max-width: 480px) {
  .form-step { min-height: 480px !important; }
}

/* === wio update: vertical-center content inside fixed buttermilk card === */
.form-step.active {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

/* === wio update: card bg stable, children sweep in left -> right === */
.form-step.active {
  animation: none !important;
  overflow: hidden;
}
.form-step.active > * {
  animation: stepContentSweepIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.form-step.active > *:nth-child(2) { animation-delay: 0.06s; }
.form-step.active > *:nth-child(3) { animation-delay: 0.12s; }
.form-step.active > *:nth-child(4) { animation-delay: 0.18s; }
.form-step.active > *:nth-child(5) { animation-delay: 0.22s; }

/* === Secure badge: pinned to a consistent bottom position on every step ===
   The form-step card has fixed min-height; with the badge absolutely
   positioned, it always sits at the same offset from the bottom edge,
   no matter how much/little content the step has.
   !important overrides earlier `.form-step { padding: 28px 20px !important }` */
.form-step { position: relative !important; padding-bottom: 64px !important; }
.form-step .secure-badge {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  margin: 0 !important;
  z-index: 5;
}
@media (max-width: 480px) {
  .form-step { padding-bottom: 56px !important; }
  .form-step .secure-badge { bottom: 14px; }
}

#static-verification-step .secure-badge {
  position: static !important;
  bottom: auto !important;
  margin-top: 16px !important;
}

/* Contact step ("Where should we send your result?") renders its own
   "Your information is secure and never shared" helper-text below the
   Compare Now button, hide the absolute-positioned generic badge to
   stop them overlapping. */
.form-step[data-step="contact-details"] .secure-badge {
  display: none !important;
}

/* === Gender buttons: equal-width, both centered text within the card === */
.gender-card-options {
  display: flex !important;
  gap: 12px !important;
  justify-content: stretch !important;
  align-items: stretch !important;
}
.gender-text-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

@keyframes stepContentSweepIn {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* === wio update: mobile polish for buttermilk card + buttons === */
@media (max-width: 480px) {
  .form-step {
    padding: 18px 14px !important;
    min-height: 440px !important;
    border-radius: 14px;
  }
  .step-heading {
    font-size: 22px !important;
    line-height: 1.25;
    margin-bottom: 6px !important;
  }
  .step-subtitle, .step-subheading {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }
  /* Options grid: tighter, ensure 2-col still fits */
  .options-grid {
    gap: 8px !important;
    max-width: 100% !important;
  }
  .options-grid .option-btn {
    flex: 0 0 calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
    padding: 12px !important;
    min-height: 54px;
  }
  .option-btn .label { font-size: 15px !important; }
  /* Yes/No tighter on small screens */
  .yesno-grid, .inline-yesno-grid {
    gap: 10px !important;
    max-width: 100% !important;
  }
  .yesno-btn, .inline-yesno-btn {
    padding: 12px !important;
    min-height: 52px;
    font-size: 15px !important;
  }
  .yesno-label, .inline-yesno-label { font-size: 15px !important; }
  /* Multi-select full-width (already set), tighter padding */
  .multiselect-btn {
    padding: 12px !important;
    min-height: 52px;
    font-size: 15px !important;
  }
  .multiselect-btn .label { font-size: 15px !important; }
  /* Sweep: less translate on small screens (avoid jitter) */
  @keyframes stepContentSweepIn {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}

/* Very narrow phones: single column for option grids */
@media (max-width: 360px) {
  .options-grid .option-btn {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .form-step { min-height: 460px !important; }
}

/* === wio update: slower, smoother sweep === */
.form-step.active > * {
  animation: stepContentSweepIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
.form-step.active > *:nth-child(1) { animation-delay: 0s !important; }
.form-step.active > *:nth-child(2) { animation-delay: 0.10s !important; }
.form-step.active > *:nth-child(3) { animation-delay: 0.20s !important; }
.form-step.active > *:nth-child(4) { animation-delay: 0.30s !important; }
.form-step.active > *:nth-child(5) { animation-delay: 0.38s !important; }

/* === wio update: Yes label = green, No label = red (all states) === */
.yesno-yes,
.yesno-yes .yesno-label,
.inline-yesno-yes,
.inline-yesno-yes .inline-yesno-label,
button.yesno-yes,
.yesno-grid .yesno-btn.yesno-yes,
.yesno-grid .yesno-btn.yesno-yes .yesno-label {
  color: var(--text-dark) !important;
}

.yesno-no,
.yesno-no .yesno-label,
.inline-yesno-no,
.inline-yesno-no .inline-yesno-label,
button.yesno-no,
.yesno-grid .yesno-btn.yesno-no,
.yesno-grid .yesno-btn.yesno-no .yesno-label {
  color: var(--text-dark) !important;
}

/* === wio update: hero inline form card no shadow/border/hover-lift === */
.inline-form-card {
  box-shadow: none !important;
  border: none !important;
}
.inline-form-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* === wio update: form-step flush with popup background, no border === */
.form-step {
  border: none !important;
}

/* === wio update: mobile width fix, fill the form-step card === */
@media (max-width: 480px) {
  .form-step.active {
    align-items: stretch !important;
  }
  .yesno-grid,
  .inline-yesno-grid,
  .options-grid,
  .multiselect-grid,
  .input-wrapper,
  .input-row,
  .name-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  .yesno-grid,
  .inline-yesno-grid {
    display: flex !important;
    gap: 10px !important;
  }
  .yesno-btn,
  .inline-yesno-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .options-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .options-grid .option-btn {
    flex: 1 1 calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
    min-width: 0 !important;
  }
  .multiselect-grid { gap: 8px !important; }
  .multiselect-btn {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  .input-wrapper input,
  .input-field,
  .input-group input {
    width: 100% !important;
    box-sizing: border-box;
  }
  .continue-btn,
  .submit-btn {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 360px) {
  .options-grid .option-btn {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Yes/No buttons, light green / light red, brighter on hover and selected.
   Final override; appended last to win over all earlier rules.
   ───────────────────────────────────────────────────────────────────────── */
.yesno-yes,
.inline-yesno-yes,
button.yesno-yes,
.yesno-grid .yesno-btn.yesno-yes,
.yesno-yes.yesno-btn {
  background: #DCFCE7 !important;
  background-image: none !important;
  border-color: #BBF7D0 !important;
  color: var(--text-dark) !important;
}
.yesno-yes:hover,
.inline-yesno-yes:hover,
button.yesno-yes:hover,
.yesno-grid .yesno-btn.yesno-yes:hover,
.yesno-yes.yesno-btn:hover,
.yesno-yes.selected,
.yesno-grid .yesno-btn.yesno-yes.selected,
.yesno-yes.yesno-btn.selected,
button.yesno-yes.selected {
  background: #86EFAC !important;
  background-image: none !important;
  border-color: #4ADE80 !important;
  color: var(--text-dark) !important;
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.25) !important;
}
.yesno-yes .yesno-label,
.inline-yesno-yes .inline-yesno-label {
  color: var(--text-dark) !important;
}
.yesno-yes:hover .yesno-label,
.inline-yesno-yes:hover .inline-yesno-label,
.yesno-yes.selected .yesno-label {
  color: var(--text-dark) !important;
}

.yesno-no,
.inline-yesno-no,
button.yesno-no,
.yesno-grid .yesno-btn.yesno-no,
.yesno-no.yesno-btn {
  background: #FEE2E2 !important;
  background-image: none !important;
  border-color: #FECACA !important;
  color: var(--text-dark) !important;
}
.yesno-no:hover,
.inline-yesno-no:hover,
button.yesno-no:hover,
.yesno-grid .yesno-btn.yesno-no:hover,
.yesno-no.yesno-btn:hover,
.yesno-no.selected,
.yesno-grid .yesno-btn.yesno-no.selected,
.yesno-no.yesno-btn.selected,
button.yesno-no.selected {
  background: #FCA5A5 !important;
  background-image: none !important;
  border-color: #F87171 !important;
  color: var(--text-dark) !important;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.25) !important;
}
.yesno-no .yesno-label,
.inline-yesno-no .inline-yesno-label {
  color: var(--text-dark) !important;
}
.yesno-no:hover .yesno-label,
.inline-yesno-no:hover .inline-yesno-label,
.yesno-no.selected .yesno-label {
  color: var(--text-dark) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Partners strip, New Zealand health insurer logos directly below hero
   ───────────────────────────────────────────────────────────────────────── */
.partners-strip {
  background: #ffffff;
  padding: 28px 0;
  border-bottom: 1px solid #f1f5f9;
}
.partners-strip-grid {
  overflow: hidden;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
          mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.partners-strip-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: partners-scroll 40s linear infinite;
}
.partners-strip-track:hover { animation-play-state: paused; }
.partners-strip-logo {
  height: 44px;
  max-width: 180px;
  object-fit: contain;
  flex: 0 0 auto;
}
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-strip-track { animation: none; }
}
@media (max-width: 768px) {
  .partners-strip { padding: 20px 0; }
  .partners-strip-track { gap: 36px; animation-duration: 28s; }
  .partners-strip-logo { height: 30px; max-width: 100px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Empathy stat badges, equal width, centered content, consistent icon align.
   Final override.
   ───────────────────────────────────────────────────────────────────────── */
.empathy-stats {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px !important;
  align-items: stretch;
}
.empathy-stats .stat-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 12px !important;
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 260px;
  padding: 14px 20px !important;
  background: var(--bg-gray);
  border-radius: 12px;
}
.empathy-stats .stat-badge svg {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0;
  color: #F58220;
}
.empathy-stats .stat-badge > div {
  text-align: left;
  line-height: 1.2;
}
.empathy-stats .stat-badge .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
}
.empathy-stats .stat-badge .stat-label {
  font-size: 14px;
  color: var(--text-light);
}
@media (max-width: 480px) {
  .empathy-stats .stat-badge {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* ──────────────────────────────────────────────────────────
   Hero trust row, shield image + Google Rating card pair
   Replaces the legacy .trust-bar 3-icon row in the hero.
   ────────────────────────────────────────────────────────── */
.hero-trust-row {
  margin-top: 24px;
  padding-top: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-trust-shield {
  display: block;
  height: 64px;
  width: auto;
  flex: 0 0 auto;
}
.hero-trust-google {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}
.hero-trust-google .google-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}
.hero-trust-google .google-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}
.hero-trust-google .google-label {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.01em;
}
.hero-trust-google .google-score-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.hero-trust-google .google-score {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
}
.hero-trust-google .google-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.hero-trust-google .google-stars svg {
  display: block;
}
.hero-trust-google .google-reviews {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .hero-trust-row {
    gap: 12px;
  }
  .hero-trust-shield {
    height: 56px;
  }
  .hero-trust-google {
    height: 56px;
    padding: 0 12px;
  }
  .hero-trust-google .google-g {
    width: 28px;
    height: 28px;
  }
  .hero-trust-google .google-g svg {
    width: 28px;
    height: 28px;
  }
  .hero-trust-google .google-score {
    font-size: 16px;
  }
}

/* ──────────────────────────────────────────────────────────
   Step subtitle, fine print under quiz step titles (e.g.
   coverage-amount). Overrides earlier .step-subtitle 14–18px
   defaults; appears only when step.subtitle is set in config.
   ────────────────────────────────────────────────────────── */
.step-subtitle {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #6b7280 !important;
  margin-top: 8px !important;
  margin-bottom: 24px !important;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
}
.step-subtitle a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.step-subtitle a:hover {
  color: var(--brand-primary-dark, var(--brand-primary));
  text-decoration-thickness: 2px;
}
@media (max-width: 480px) {
  .step-subtitle {
    font-size: 12px !important;
    margin-bottom: 18px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   Header, keep pinned to the top while scrolling. The
   existing JS adds .header-hidden on scroll-down (translateY
   hides it); we override that so the header stays visible
   at all times. Visual styling (floating pill, blur, shadow)
   is preserved.
   ────────────────────────────────────────────────────────── */
.header.header-hidden {
  transform: none !important;
  opacity: 1 !important;
}

/* ──────────────────────────────────────────────────────────
   Terms of Service modal, opened from step 1 of the form
   via openTermsModal(). Loads /terms-of-service in an iframe
   inside an overlay panel; click overlay or ESC to close.
   ────────────────────────────────────────────────────────── */
.terms-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.terms-modal.active { display: flex; }
.terms-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.terms-modal-panel {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 800px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: termsModalIn 0.2s ease;
}
@keyframes termsModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.terms-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 18px 24px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.terms-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
}
.terms-modal-close {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.terms-modal-close:hover { background: #f3f4f6; color: #111827; }
.terms-modal-frame {
  flex: 1 1 auto;
  width: 100%;
  border: none;
  min-height: 360px;
  background: #fafafc;
}
@media (max-width: 480px) {
  .terms-modal { padding: 8px; }
  .terms-modal-panel { max-height: 92vh; border-radius: 12px; }
  .terms-modal-title { font-size: 18px; }
}
.terms-link {
  color: var(--brand-primary, #F58220);
  text-decoration: underline;
  cursor: pointer;
}
.terms-link:hover { color: var(--brand-primary-dark, #6F2FB5); }

/* ===========================================================
   Extended content sections (added 2026-05-08)
   Modern, brand-purple accents (--brand-primary), mobile-first.
   All sections use [data-no-anim] so the platform's auto-reveal
   doesn't fight any future on-scroll behavior.
   =========================================================== */

.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand-primary, #F58220);
  background: var(--brand-primary-10, rgba(245, 130, 32,0.10));
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.content-split,
.content-video,
.trust-pair,
.content-ebook {
  padding: 80px 0;
  background: #fff;
}

.content-video { background: #f8f9fb; }
.trust-pair { background: #fff; }
.content-ebook { background: linear-gradient(180deg, #fafafa 0%, #fff 100%); }

.content-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 32px;
}

.content-split-text p {
  font-size: 17px;
  line-height: 1.75;
  color: #374151;
  margin: 0 0 16px;
}

.content-split-text a {
  color: var(--brand-primary, #F58220);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--brand-primary-30, rgba(245, 130, 32,0.30));
  transition: border-color 0.18s ease;
}
.content-split-text a:hover { border-bottom-color: var(--brand-primary, #F58220); }

.content-split-media img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 60px -20px rgba(15,23,42,0.25);
  display: block;
}

/* Video section */
.video-aspect {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(15,23,42,0.30);
  background: #000;
}
.video-aspect iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Trust pair (Price Guarantee + Advice Centre) */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.trust-card {
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 24px -10px rgba(15,23,42,0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.trust-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -16px rgba(15,23,42,0.20);
}
.trust-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.trust-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trust-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--brand-primary, #F58220);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.trust-card-body { padding: 28px 28px 32px; }
.trust-card-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.trust-card-body p {
  font-size: 16px;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
}

/* Family funds + ebook */
.section-title--upper { text-transform: uppercase; letter-spacing: 0.04em; font-size: 26px; }
.lede { font-size: 17px; line-height: 1.75; color: #374151; margin-bottom: 24px; }
.value-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.value-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 16px;
  line-height: 1.65;
  color: #374151;
}
.value-text { display: block; min-width: 0; }
.content-ebook .content-split-grid { align-items: start; }
.content-ebook .ebook-shell { position: sticky; top: 96px; }
@media (max-width: 860px) {
  .content-ebook .ebook-shell { position: static; }
}
.value-bullet {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-primary, #F58220);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.ebook-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}
.ebook-shell img {
  width: 80%;
  max-width: 360px;
  height: auto;
  border-radius: 6px;
  transform: rotate(-3deg);
  box-shadow: 0 30px 60px -20px rgba(15,23,42,0.35), 0 8px 18px rgba(15,23,42,0.18);
  transition: transform 0.4s ease;
}
.ebook-shell:hover img { transform: rotate(0deg) scale(1.02); }
.ebook-tag {
  position: absolute;
  top: 16px;
  right: 24px;
  background: #f59e0b;
  color: #1f2937;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 6px 12px;
  border-radius: 6px;
  transform: rotate(8deg);
  box-shadow: 0 6px 18px rgba(245,158,11,0.40);
}
.content-ebook-cta {
  margin-top: 48px;
  text-align: center;
}
.content-ebook-cta .cta-button {
  display: inline-block;
  padding: 18px 36px;
  font-size: 16px;
}
.content-ebook-microcopy {
  margin: 14px 0 0;
  font-size: 13px;
  color: #6b7280;
}

/* About Us, dark */
.about-dark {
  position: relative;
  padding: 96px 0;
  background: linear-gradient(135deg, #1f2937 0%, #111827 60%, #0f172a 100%);
  overflow: hidden;
  color: #f9fafb;
}
.about-dark-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(245, 130, 32,0.20) 0%, transparent 45%),
    radial-gradient(circle at 88% 80%, rgba(245, 130, 32,0.10) 0%, transparent 50%);
  pointer-events: none;
}
.about-dark-inner { position: relative; z-index: 1; text-align: center; }
.about-dark-title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 0.15em;
  margin: 0 0 40px;
  color: #ffffff;
}
.about-dark-grid { text-align: left; }
.about-dark-text p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,0.88);
  margin: 0 0 16px;
}
.about-dark-text strong { color: #ffffff; }
.about-dark-media img {
  border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}

/* Mobile responsiveness for all extended sections */
@media (max-width: 860px) {
  .content-split,
  .content-video,
  .trust-pair,
  .content-ebook { padding: 56px 0; }
  .about-dark { padding: 64px 0; }
  .content-split-grid,
  .trust-grid { grid-template-columns: 1fr; gap: 32px; }
  .content-video .content-split-grid { direction: ltr; }
  .content-video .content-video-frame { order: 1; }
  .content-video .content-split-text { order: 2; }
  .ebook-shell img { width: 65%; max-width: 280px; }
  .about-dark-title { font-size: 28px; }
  .section-title--upper { font-size: 22px; }
}

/* ==========================================================================
   Stripe-style content sections (rebuilt 2026-05-10)
   Self-contained .s-* namespace. Solid purple #F58220 accent only.
   No gradients. 1px hairline borders at ~6% opacity. Generous whitespace.
   Older .content-split / .content-video / .trust-pair / .content-ebook /
   .about-dark rules above are now unused by the new HTML.
   ========================================================================== */

.s-section {
  position: relative;
  padding: 96px 0;
  background: #ffffff;
  color: #425466;
  font-feature-settings: "tnum" 1;
}
.s-section--alt { background: #fafbfc; }
.s-section--dark {
  background: #0a0e27;
  color: rgba(255, 255, 255, 0.78);
}
.s-section--dark::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: #F58220;
}

.s-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
.s-container--narrow { max-width: 920px; }

.s-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6B7C93;
  margin: 0 0 16px;
}
.s-eyebrow--purple { color: #F58220; }

.s-display {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0A2540;
  line-height: 1.15;
  margin: 0 0 32px;
  max-width: 880px;
}
.s-display--md { font-size: clamp(26px, 3vw, 38px); }
.s-display--light { color: #ffffff; }

.s-section-head { margin-bottom: 56px; }
.s-section-head--center { text-align: center; }
.s-section-head--center .s-display {
  margin-left: auto;
  margin-right: auto;
}

.s-grid { display: grid; }
.s-grid--asym { grid-template-columns: 1.1fr 0.9fr; }
.s-grid--equal { grid-template-columns: 1fr 1fr; }
.s-grid--gap-md { gap: 32px; }
.s-grid--gap-lg { gap: 64px; }
.s-grid--center { align-items: center; }

.s-grid-text { display: flex; flex-direction: column; }
.s-grid-text > p + p,
.s-grid-text > .s-body + .s-body { margin-top: 18px; }

.s-body {
  font-size: 17px;
  line-height: 1.65;
  color: #425466;
  margin: 0;
}
.s-body--light { color: rgba(255, 255, 255, 0.78); }
.s-body strong { color: #0A2540; font-weight: 600; }
.s-body--light strong { color: #ffffff; }

.s-lede {
  font-size: 18px;
  color: #0A2540;
  margin: 0 0 24px;
}

.s-link {
  color: #F58220;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.18s ease;
}
.s-link:hover { border-bottom-color: #F58220; }
.s-link--cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  font-weight: 600;
  font-size: 15px;
  border-bottom: none;
}
.s-link--cta span {
  display: inline-block;
  transition: transform 0.18s ease;
}
.s-link--cta:hover { border-bottom: none; }
.s-link--cta:hover span { transform: translateX(3px); }

.s-image-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(10, 37, 64, 0.06);
  background: #fff;
}
.s-image-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.s-image-frame--dark {
  margin-top: 56px;
  border-color: rgba(255, 255, 255, 0.08);
  background: transparent;
}

/* Stat strip, three hairline cells under §1 */
.s-stat-strip {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.s-stat {
  border: 1px solid rgba(10, 37, 64, 0.06);
  border-radius: 14px;
  padding: 28px 24px;
  background: #ffffff;
}
.s-stat-num {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0A2540;
  font-feature-settings: "tnum" 1;
  line-height: 1.1;
}
.s-stat-label {
  margin-top: 6px;
  font-size: 14px;
  color: #6B7C93;
}

/* Video frame, §2 */
.s-video-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(10, 37, 64, 0.06);
  position: relative;
  background: #000;
}
.s-video-frame::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: #F58220;
  z-index: 1;
}
.s-video-aspect {
  position: relative;
  padding-top: 56.25%;
}
.s-video-aspect iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Cards, §3 */
.s-card {
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.06);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.s-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(10, 37, 64, 0.04), 0 8px 24px rgba(10, 37, 64, 0.06);
}
.s-card-media {
  aspect-ratio: 16 / 9;
  background: #f6f9fc;
  overflow: hidden;
}
.s-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.s-card-body { padding: 28px 28px 32px; }
.s-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(245, 130, 32, 0.2);
  background: #f5eefb;
  margin-bottom: 16px;
}
.s-card-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0A2540;
  margin: 0 0 12px;
  line-height: 1.3;
}

/* Bullet list, §4 */
.s-bullet-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.s-bullet {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.s-bullet-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(245, 130, 32, 0.2);
  background: #f5eefb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.s-bullet-text {
  font-size: 16px;
  line-height: 1.6;
  color: #425466;
}
.s-bullet-text strong {
  color: #0A2540;
  font-weight: 600;
}

/* Solid purple CTA, replaces gradient orange */
.s-button-purple {
  display: inline-block;
  background: #F58220 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 14px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.18s ease;
  align-self: flex-start;
}
.s-button-purple:hover {
  background: #7639BD !important;
  color: #ffffff !important;
}
.s-microcopy {
  margin: 12px 0 0;
  font-size: 13px;
  color: #6B7C93;
}

/* Ebook frame, §4 right */
.s-ebook-frame {
  position: relative;
  background: #f5eefb;
  border: 1px solid rgba(245, 130, 32, 0.12);
  border-radius: 14px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.s-ebook-frame img {
  display: block;
  max-width: 220px;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.s-tag {
  display: inline-block;
  background: #F58220;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.s-ebook-caption {
  font-size: 14px;
  color: #6B7C93;
  font-weight: 500;
  max-width: 240px;
  line-height: 1.4;
}

/* Mobile, collapse all grids to single column */
@media (max-width: 768px) {
  .s-section { padding: 64px 0; }
  .s-grid--asym,
  .s-grid--equal { grid-template-columns: 1fr; gap: 40px; }
  .s-display { margin-bottom: 24px; }
  .s-section-head { margin-bottom: 40px; }
  .s-image-frame--dark { margin-top: 40px; }
  .s-stat-strip { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
  .s-stat { padding: 24px; }
  .s-stat-num { font-size: 28px; }
  .s-card-body { padding: 24px 24px 28px; }
  .s-button-purple { width: 100%; text-align: center; align-self: stretch; }
  .s-ebook-frame { padding: 32px 24px; }
}

/* ==========================================================================
   §Empathy, purple shield illustration + inline stats (no card containers)
   ========================================================================== */

.s-eyebrow--dot::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #F58220;
  margin-right: 10px;
  vertical-align: 2px;
}

.s-body--accent {
  font-size: 19px;
  font-weight: 600;
  color: #0A2540;
  margin-top: 18px;
}
.s-body--center { text-align: center; max-width: 620px; margin-left: auto; margin-right: auto; }

.s-empathy-stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 36px;
  padding: 0;
  border-top: 1px solid rgba(10, 37, 64, 0.06);
  border-bottom: 1px solid rgba(10, 37, 64, 0.06);
}
.s-empathy-stat {
  flex: 1;
  padding: 20px 24px;
  position: relative;
}
.s-empathy-stat + .s-empathy-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 1px;
  background: rgba(10, 37, 64, 0.06);
}
.s-empathy-stat:first-child { padding-left: 0; }
.s-empathy-stat:last-child  { padding-right: 0; }
.s-empathy-stat-num {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0A2540;
  line-height: 1;
  font-feature-settings: "tnum" 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.s-empathy-stat-label {
  margin-top: 6px;
  font-size: 13px;
  color: #6B7C93;
  letter-spacing: 0.01em;
}

.s-microcopy--mt    { margin-top: 24px; }
.s-microcopy--center{ text-align: center; }

/* Illustration container, square frame with hairline border, dot grid + shield */
.s-empathy-art {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin: 0 auto;
  border: 1px solid rgba(10, 37, 64, 0.06);
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
}
.s-empathy-art-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.s-empathy-art-shield {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64%;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(245, 130, 32, 0.12));
}

/* Floating chips, corners, gentle float animation */
.s-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid rgba(245, 130, 32, 0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #0A2540;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 0 rgba(10, 37, 64, 0.03);
  animation: s-chip-float 5.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.s-chip svg { flex-shrink: 0; }
.s-chip--tl { top: 8%;   left: 6%;  }
.s-chip--tr { top: 12%;  right: 4%; }
.s-chip--bl { bottom: 12%; left: 4%; }
.s-chip--br { bottom: 8%;  right: 6%; }

@keyframes s-chip-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .s-chip { animation: none; }
}

/* ==========================================================================
   §Steps, three numbered nodes connected by a dashed flow line
   ========================================================================== */

.s-steps-flow {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.s-steps-connector {
  position: absolute;
  top: 36px; /* aligns with the centre of node tiles */
  left: 14%;
  right: 14%;
  height: 2px;
  pointer-events: none;
}
.s-steps-connector-dash {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(245, 130, 32, 0.45) 50%, transparent 50%);
  background-size: 12px 2px;
  background-repeat: repeat-x;
  background-position: 0 50%;
}
.s-steps-connector-bead {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #F58220;
  transform: translateY(-50%);
  animation: s-bead-travel 5s linear infinite;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
}
@keyframes s-bead-travel {
  0%   { left: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .s-steps-connector-bead { animation: none; opacity: 0.5; left: 50%; }
}

.s-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.s-step-node {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(245, 130, 32, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 0 rgba(10, 37, 64, 0.03), 0 8px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}
.s-step-num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #F58220;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.s-step-title {
  font-size: 18px;
  font-weight: 700;
  color: #0A2540;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  line-height: 1.3;
}
.s-step-desc {
  font-size: 15px;
  line-height: 1.55;
  color: #425466;
  margin: 0 0 14px;
  max-width: 280px;
}
.s-step-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #f5eefb;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #F58220;
  letter-spacing: 0.01em;
}

@media (max-width: 768px) {
  .s-empathy-art { max-width: 360px; }
  .s-chip { font-size: 12px; padding: 6px 10px; }

  .s-steps-flow { grid-template-columns: 1fr; gap: 40px; }
  /* Vertical connector on mobile */
  .s-steps-connector {
    top: 36px; bottom: 36px; left: 50%; right: auto;
    width: 2px; height: auto;
    transform: translateX(-50%);
  }
  .s-steps-connector-dash {
    background-image: linear-gradient(to bottom, rgba(245, 130, 32, 0.45) 50%, transparent 50%);
    background-size: 2px 12px;
    background-repeat: repeat-y;
    background-position: 50% 0;
  }
  .s-steps-connector-bead { animation: s-bead-travel-v 5s linear infinite; left: 50%; transform: translate(-50%, 0); }
  @keyframes s-bead-travel-v {
    0%   { top: 0%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }

  .s-empathy-stats {
    flex-direction: row;
    gap: 8px;
    border-top: none !important;
    border-bottom: none !important;
  }
  .s-empathy-stat,
  .s-empathy-stat:first-child,
  .s-empathy-stat:last-child {
    flex: 1;
    min-width: 0;
    padding: 14px 8px !important;
    background: #ffffff;
    border: 1px solid rgba(10, 37, 64, 0.10);
    border-radius: 10px;
    text-align: center;
  }
  .s-empathy-stat + .s-empathy-stat::before { display: none !important; }
  .s-empathy-stat-num { justify-content: center; font-size: 19px !important; }
  .s-empathy-stat-label { font-size: 11px !important; line-height: 1.3; }
}

/* ==========================================================================
   Unified canvas, every section below the hero gets the same #ffffff
   background. No section banding, no horizontal divider lines, no
   gradients. CTA buttons stay solid purple #F58220. Footer is left as-is
   (structural element, not a "content section").
   ========================================================================== */

/* All post-hero content sections share the same surface */
.s-section,
.s-section--alt,
.s-section--dark,
.partners-strip,
.reviews-section,
.cta-section,
.faq {
  background: #ffffff !important;
  background-image: none !important;
}

/* Strip horizontal dividers + accent bars that read as "section lines" */
.partners-strip { border-bottom: none !important; }
.s-section,
.s-section--alt,
.s-section--dark,
.partners-strip,
.reviews-section,
.cta-section,
.faq {
  border-top: none !important;
  border-bottom: none !important;
}
.s-section--dark::before { display: none !important; }

/* §About is no longer on a dark surface, flip text colors back to dark */
.s-section--dark .s-display--light { color: #0A2540 !important; }
.s-section--dark .s-body--light    { color: #425466 !important; }
.s-section--dark .s-body--light strong { color: #0A2540 !important; }
.s-section--dark .s-eyebrow--purple { color: #F58220 !important; }
.s-image-frame--dark {
  background: transparent !important;
  border-color: rgba(10, 37, 64, 0.06) !important;
}

/* Inline cta-section bars: keep the button visible by inverting it
   (was white-on-purple-gradient → now solid purple-on-white) */
.cta-section .cta-button,
.cta-section button.cta-button,
section.cta-section button.cta-button {
  background: #F58220 !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 1px 0 rgba(10, 37, 64, 0.04), 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}
.cta-section .cta-button:hover,
.cta-section button.cta-button:hover {
  background: #7639BD !important;
  color: #ffffff !important;
}
/* Tighten the inline CTA bars so they don't carve out vertical space
   between sections, they should feel like punctuation, not breaks */
.cta-section { padding: 32px 0 !important; }

/* ==========================================================================
   Scroll reveal, namespaced .scl-fade / .scl-in to avoid colliding with
   the platform's auto-anim system, which also uses ".reveal" + ".revealed".
   .scl-fade hides; .scl-in (added by IntersectionObserver) reveals.
   Once-only per element. Stagger handled inline via transition-delay.
   ========================================================================== */
.scl-fade {
  opacity: 0 !important;
  transform: translate3d(0, 48px, 0) !important;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: opacity, transform;
}
.scl-fade.scl-in {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Side-stage: image frames in asymmetric grids slide in from the right
   for a slightly more cinematic feel */
.s-grid--asym .s-grid-media .scl-fade:not(.scl-in),
.s-grid--asym .s-grid-media.scl-fade:not(.scl-in) {
  transform: translate3d(28px, 12px, 0) !important;
}

/* Honor user system preference */
@media (prefers-reduced-motion: reduce) {
  .scl-fade,
  .scl-fade.scl-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Hero entrance, coordinated, hidden-from-first-paint, no FOUC
   Sequence:
     t=0      title and subtitle hidden (CSS opacity 0, no flash)
     t≈50ms   JS adds .scl-split-ready to title + .scl-anim-in to subtitle
     t≈50ms   title chars animate in (28ms stagger, ~600ms transition)
     t≈600ms  subtitle slides up (transition-delay 600ms, 600ms duration)
     t≈1.4s   logo shimmer sweep starts, runs twice
   Fallback animation auto-reveals after 2.5s if JS fails to fire.
   ========================================================================== */

/* Hero instant render, no animation delay, visible on first paint */
.hero-headline {
  opacity: 1;
  transform: none;
}
.hero-headline.scl-anim-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.hero-headline .scl-split-char {
  display: inline-block;
  opacity: 1;
  transform: none;
  filter: none;
}
.hero-headline.scl-split-ready .scl-split-char {
  opacity: 1;
  transform: none;
  filter: none;
}
.hero-subheadline {
  opacity: 1;
  transform: none;
}
.hero-subheadline.scl-anim-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Logo sweep, diagonal shimmer that crosses the trust shield, starting
   after both text reveals settle (~1.4s) so the visual sequence feels
   "text first, polish second" */
.scl-logo-sweep {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
}
.scl-logo-sweep::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -120%;
  width: 50%;
  height: 140%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.55) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg) translate3d(0, 0, 0);
  pointer-events: none;
  z-index: 1;
  animation: scl-sweep 3s ease-in-out 1.4s 2;
  will-change: transform, opacity;
}
@keyframes scl-sweep {
  0%   { transform: skewX(-18deg) translateX(0%);    opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: skewX(-18deg) translateX(560%);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline,
  .hero-subheadline {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero-headline .scl-split-char {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .scl-logo-sweep::after { animation: none !important; opacity: 0 !important; }
  .scl-google-sweep::after { animation: none !important; opacity: 0 !important; }
}

/* ==========================================================================
   Google rating block, clickable + matching diagonal sweep shimmer
   Wraps the existing .hero-trust-google to add an overlay shimmer pseudo,
   without changing the layout of the inner svg/meta. Same easing/duration
   as the trust shield's sweep so they feel cohesive.
   ========================================================================== */
.scl-google-sweep {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.scl-google-sweep:hover {
  transform: translateY(-1px);
}
.scl-google-sweep::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -120%;
  width: 50%;
  height: 140%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(245, 130, 32, 0.18) 45%,
    rgba(245, 130, 32, 0.32) 50%,
    rgba(245, 130, 32, 0.18) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg) translate3d(0, 0, 0);
  pointer-events: none;
  z-index: 1;
  animation: scl-sweep 3s ease-in-out 1.7s 2;
  will-change: transform, opacity;
}

/* Reviews section, Google trust block centered between header and carousel */
.s-reviews-trust {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.s-reviews-carousel {
  margin-top: 56px;
}
@media (max-width: 768px) {
  .s-reviews-carousel { margin-top: 40px; }
  .s-reviews-trust { margin-top: 20px; }
}

/* CTA-variant Compare Now button, fades up just after the title chars
   begin cascading. Same easing/duration family as title + subtitle. */
.hero-cta {
  opacity: 1;
  transform: none;
}
.hero-cta.scl-anim-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Hero microcopy, small reassurance under the CTA button (CTA-variant only).
   Cascades in at 0.5s so it lands between the button (0.4s) and trust row (0.7s). */
.hero-microcopy {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-gray);
  margin: 14px 0 0;
  text-align: center;
  opacity: 1;
  transform: none;
}
@media (min-width: 640px) { .hero-microcopy { font-size: 14px; } }
@media (min-width: 1024px) { .hero .hero-microcopy { text-align: left; } }
.hero-microcopy.scl-anim-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero-microcopy { opacity: 1 !important; transform: none !important; animation: none !important; }
}
/* Mobile flex order: subheadline → button → microcopy → trust badges.
   The mobile media query at line ~223 sets explicit `order` on headline (1),
   subheadline (2), trust-row (4). Without the rules below, .hero-cta and
   .hero-microcopy default to order: 0, putting them ABOVE the headline. */
@media (max-width: 968px) {
  .hero-cta { order: 3; }
  .hero-microcopy { order: 4; }
  .hero-trust-row { order: 5; }
}

/* Inline form card (FIXED-variant, kept for parity, no-op on CTA variant) */
.inline-form-card {
  opacity: 0;
  transform: translate3d(40px, 0, 0);
  animation: scl-hero-fallback-reveal-tx 0.4s ease-out 2.5s 1 forwards;
}
.inline-form-card.scl-anim-in {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s !important;
  animation: none !important;
}

/* Trust row (shield logo + Google rating), hidden from first paint so the
   page doesn't briefly show "just logos floating" while the title is hidden.
   Fades up alongside the subtitle so the supporting content lands together. */
.hero-trust-row {
  opacity: 1;
  transform: none;
}
.hero-trust-row.scl-anim-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .inline-form-card,
  .hero-trust-row {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* §Promises, give cards more breathing room and align CTAs to bottom */
#trust-pair .s-card-body {
  display: flex;
  flex-direction: column;
}
#trust-pair .s-card-body .s-link--cta {
  margin-top: auto;
}
#trust-pair .s-section-head { margin-bottom: 64px; }
@media (max-width: 768px) {
  #trust-pair .s-section-head { margin-bottom: 40px; }
}

/* ==========================================================================
   CTA-variant hero overrides, re-enable the right-side family photo
   background and revert the hero container from FIXED's two-column grid
   back to the single-column overlay-on-photo layout.
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px 0 60px;
  overflow: hidden;
  background: #ffffff !important;
}
.hero::before { content: none !important; } /* drop the FIXED radial wash */
.hero-mobile-image { display: none; }

.hero-bg {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}

.hero-overlay {
  display: block !important;
  position: absolute;
  inset: 0;
  /* Solid white on the left half so text sits on a clean canvas (no cream
     tint from the photo bleeding through). Fade to transparent past the 50%
     mark so the family photo only reveals on the right side. */
  background: linear-gradient(
    to right,
    #ffffff 0%,
    #ffffff 45%,
    rgba(255, 255, 255, 0.92) 60%,
    rgba(255, 255, 255, 0.6) 78%,
    rgba(255, 255, 255, 0.2) 100%
  );
  pointer-events: none;
}

/* Hero container reverts to single column, text on left over the photo */
.hero .container {
  display: block !important;
  position: relative;
  z-index: 1;
  grid-template-columns: none !important;
  gap: 0 !important;
}
.hero-content {
  max-width: 600px;
}

@media (max-width: 768px) {
  .hero { min-height: auto; padding: 80px 0 60px; }
  .hero-overlay {
    background: linear-gradient(
      to bottom,
      #ffffff 0%,
      #ffffff 50%,
      rgba(255, 255, 255, 0.85) 100%
    );
  }
  .hero-content { max-width: 100%; }
}

/* Force pure-white page background. */
html,
body {
  background: #ffffff !important;
  background-image: none !important;
  background-color: #ffffff !important;
}

/* ==========================================================================
   §Watch / §Funds, converted to single-column centered prose layouts
   (video and ebook image were removed). The .s-prose container caps
   reading line length so long body copy doesn't sprawl.
   ========================================================================== */
.s-prose {
  max-width: 760px;
  margin: 0 auto;
}
.s-prose--center { text-align: left; }
.s-prose--center > .s-body { text-align: left; }
.s-prose--center > .s-body--accent { text-align: center; }
.s-prose > .s-body + .s-body { margin-top: 18px; }

/* ============================================================
   Reviews section, static card grid with real Google reviews
   ============================================================ */
.reviews-section .s-section-head { margin-bottom: 40px; }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.review-card-link {
  display: flex;
  height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-card-link > .review-card { flex: 1; height: 100%; }
.review-card-link:focus-visible {
  outline: 2px solid #F58220;
  outline-offset: 3px;
}
.review-card-link:hover .review-card {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  border-color: #f8c987;
}
.review-card {
  background: #ffffff;
  border: 1px solid #eef0f4;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 4px 14px rgba(20, 20, 40, 0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}
.review-stars {
  color: #F5B301;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
}
.review-quote {
  font-size: 15.5px;
  line-height: 1.6;
  color: #2b2f3a;
  margin: 0;
  flex-grow: 1;
}
.review-meta {
  border-top: 1px solid #eef0f4;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.review-avatar--photo {
  object-fit: cover;
  object-position: center;
  background: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.review-meta-text { display: flex; flex-direction: column; min-width: 0; }
.review-author {
  font-weight: 700;
  color: #111827;
  font-size: 15px;
  line-height: 1.2;
}
.review-date {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
}
.reviews-google-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 32px auto 0;
  padding: 14px 22px;
  background: #ffffff;
  border: 1px solid #eef0f4;
  border-radius: 999px;
  max-width: 520px;
  box-shadow: 0 2px 8px rgba(20, 20, 40, 0.04);
  flex-wrap: wrap;
}
.reviews-google-label { font-weight: 600; color: #374151; font-size: 14px; }
.reviews-google-score { font-weight: 800; color: #111827; font-size: 18px; }
.reviews-google-stars { color: #F5B301; letter-spacing: 2px; }
.reviews-google-count { color: #6b7280; font-size: 13px; }

@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: 1fr; gap: 16px; }
  .review-card { padding: 22px 20px; }
  .reviews-google-summary { padding: 12px 18px; font-size: 13px; }
}
.s-prose-cta {
  text-align: center;
  margin: 36px 0 0;
}
.s-bullet-list--center {
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}

/* Mobile-only logo bar, clean, simple, replaces the full header on phones */
.mobile-top-logo { display: none; }
@media (max-width: 768px) {
  .header { display: none !important; }
  .mobile-top-logo {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 18px 16px 8px;
    background: #ffffff;
  }
  .mobile-top-logo img {
    height: 38px;
    width: auto;
    display: block;
  }
}

/* ==========================================================================
   Form-step polish, definitive fix
   The actual class is .secure-badge (not .secure-note). It was absolutely
   positioned at `bottom: 18px` of the form-step card with a 64px padding
   reserve. On steps with tall content (medical condition, genders), the
   Continue button extends into the reserved zone and overlaps the badge.
   Fix: make it a normal-flow element below the button.
   ========================================================================== */
.form-step .secure-badge,
.popup-overlay .secure-badge {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  z-index: auto !important;
}
/* The 64px padding only existed to reserve room for the absolute badge.
   With normal flow, we don't need it, bring the bottom in. */
.form-step {
  padding-bottom: 24px !important;
}
@media (max-width: 480px) {
  .form-step {
    padding-bottom: 20px !important;
  }
  .form-step .secure-badge {
    bottom: auto !important;
    margin-top: 14px !important;
  }
}

/* Gender button, symmetric padding + forced text centering. The "Female"
   button looked left-padded in screenshot #54; this guarantees centering. */
.gender-text-btn {
  text-align: center !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   Mobile hero spacing + photo visibility (CTA template)
   - Looser top-of-page (more breathing room above logo)
   - Tighter logo→title gap (kills the big white gap)
   - Looser CTA button spacing
   - Family photo visible across the FULL hero (uniform soft white wash
     instead of the old "solid white at top, fade at bottom" gradient)
   ========================================================================== */
@media (max-width: 768px) {
  /* Top logo bar, bigger logo, more generous breathing room */
  .mobile-top-logo {
    padding: 22px 16px 8px !important;
  }
  .mobile-top-logo img {
    height: 52px !important;
  }

  /* === Mobile hero stretch ===
     Hero fills the rest of the first viewport. Reserves only ~80px for the
     top logo bar above. Partners-strip sits below the fold (visible after
     a small scroll), per the layout plan. */
  .hero {
    min-height: calc(100vh - 80px) !important;
    padding-top: 8px !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .hero .container,
  .hero .container > .hero-content {
    width: 100% !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Mobile vertical rhythm:
       - Title: small gap below the logo
       - Subtitle: directly below title
       - CTA: close to subtitle (40px gap), sits in the upper-middle
       - (flex empty space) absorbs the rest above the trust row
       - Trust badges: pinned to the very bottom of the hero
       Only the trust row uses `margin-top: auto` so the CTA stays
       close to the subtitle / upper area, with empty space between
       CTA and trust badges. */
  .hero-headline   { order: 1 !important; margin-top: 56px !important; }
  .hero-subheadline { order: 2 !important; }
  .hero-cta {
    order: 3 !important;
    /* Image now fills the mid-hero space, so drop the 25vh spacer and let
       the image + its 22px bottom margin do the separation. */
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }
  /* Trust row no longer needs to be pinned to bottom now that image fills gap */
  .hero-trust-row { margin-top: 20px !important; }
  .hero-trust-row {
    order: 4 !important;
    margin-top: auto !important;     /* trust row pinned to bottom */
    padding-top: 0 !important;
    margin-bottom: 16px !important;
  }

  /* Inline form card (FIXED variant, no-op here) */
  .inline-form-card {
    margin-top: 24px !important;
  }

  /* === Mobile hero: inline image between subheading and CTA ===
     Ditched the absolute-positioned background approach. The portrait shield
     image now flows in normal document order between .hero-subheadline and
     .hero-cta, so it visibly fills the gap. No hue-rotate, no overlay, the
     shield reads naturally on white. */
  .hero-bg { display: none !important; }
  .hero-overlay { display: none !important; }
  .hero-headline,
  .hero-subheadline {
    text-shadow: none !important;
  }
  .hero-mobile-image {
    display: block !important;
    /* order: 2 same as subheadline → DOM order tiebreak places image right after
       subheadline, before .hero-cta (order 3) */
    order: 2 !important;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    padding: 0;
  }
  /* Tighten subheadline bottom margin so shield sits close underneath.
     Higher specificity (body .hero-content) to beat the later
     .hero-subheadline { margin-bottom: 28px !important } rule outside this
     media query. */
  body .hero-content .hero-subheadline { margin-bottom: 12px !important; }
  /* Force reveal-animation opacity states so preview mirrors post-animate look */
  .hero-subheadline[style*="opacity:0"],
  .hero-cta[style*="opacity:0"],
  .hero-microcopy[style*="opacity:0"],
  .hero-trust-row[style*="opacity:0"] {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-mobile-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* === Partners strip, sits below the first viewport now ===
     Still compact, visible after a small scroll past the hero. */
  .partners-strip {
    padding: 18px 0 !important;
    border-bottom: none !important;
  }
  .partners-strip-grid {
    gap: 16px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .partners-strip-logo {
    height: 24px !important;
    max-width: 84px !important;
  }
}

/* CTA-variant subtitle, smaller font + max-width forces a clean 2-line wrap
   so it doesn't fight the family photo on the right or run off the screen. */
.hero-subheadline {
  font-size: 18px !important;
  line-height: 1.55 !important;
  max-width: 440px !important;
  margin-bottom: 28px !important;
}

/* Push the trust badges (shield + Google rating) further below the
   "Compare Now" button so the CTA sits clean and the trust signals act as
   a separate "supporting" row rather than crowding under the button.
   No divider line, keep the canvas clean. */
.hero-trust-row {
  margin-top: 56px !important;
  padding-top: 0 !important;
  border-top: none !important;
}
@media (max-width: 768px) {
  .hero-trust-row {
    margin-top: 40px !important;
  }
}
@media (min-width: 1024px) {
  .hero-subheadline {
    font-size: 19px !important;
    max-width: 460px !important;
  }
}
@media (max-width: 768px) {
  .hero-subheadline {
    font-size: 17px !important;
    max-width: 100% !important;
  }
}

/* Compare Medical, partners-strip text variant (replaces life-insurer logos) */
.partners-strip-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.3px;
  color: #6b7280;
  flex: 0 1 auto;
  text-align: center;
}
@media (max-width: 768px) {
  .partners-strip-name { font-size: 14px; }
}

/* ==========================================================================
   §Empathy, sub-headed bullets below the SVG row
   ========================================================================== */
.s-empathy-bullets {
  margin-top: 48px;
  display: grid;
  gap: 24px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.s-empathy-bullet h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text-dark, #111827);
  margin: 0 0 6px;
  line-height: 1.35;
}
.s-empathy-bullet p {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
}
.s-empathy-bullet strong { color: var(--brand-primary, #F58220); font-weight: 600; }

/* ==========================================================================
   §Compare, 2-col side-by-side comparison table
   ========================================================================== */
.s-compare-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-dark, #111827);
  margin: 12px 0 16px;
  line-height: 1.35;
  text-align: center;
}
.s-compare-lead {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #4b5563;
  max-width: 820px;
  margin: 0 auto 28px;
  text-align: center;
}
.s-compare-table {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
.s-compare-table th,
.s-compare-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.55;
  border: 1px solid #e5e7eb;
}
.s-compare-table th { font-weight: 700; font-size: 16px; }
.s-compare-table th.s-compare-th-direct { background: #fde2e1; color: #b91c1c; }
.s-compare-table th.s-compare-th-multi  { background: #d6f0d8; color: #166534; }
.s-compare-table td { color: #1f2937; }
.s-compare-table td strong { color: var(--brand-primary, #F58220); font-weight: 600; }
.s-compare-closing {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text-dark, #111827);
  margin: 28px auto 0;
}
@media (max-width: 720px) {
  .s-compare-table,
  .s-compare-table thead,
  .s-compare-table tbody,
  .s-compare-table tr,
  .s-compare-table th,
  .s-compare-table td { display: block; width: 100%; }
  .s-compare-table tr { margin-bottom: 16px; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; }
  .s-compare-table th { border: none; border-bottom: 1px solid #e5e7eb; }
  .s-compare-table td { border: none; border-bottom: 1px solid #f3f4f6; }
  .s-compare-table td:last-child { border-bottom: none; }
}

/* ==========================================================================
   §About, bullet list (dark-section variant)
   ========================================================================== */
.s-about-bullets {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 10px;
}
.s-about-bullets li {
  position: relative;
  padding-left: 22px;
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
}
.s-about-bullets li::before {
  content: '•';
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--brand-primary, #F58220);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OTP verification step, bKash-style 6-box redesign
   Slides up smoothly from below, brand-purple accents, mobile-first.
   ═══════════════════════════════════════════════════════════════════════════ */

.otp-bkash-step.active {
  animation: otpBkashSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes otpBkashSlideUp {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}

.otp-bkash-sheet {
  max-width: 460px;
  margin: 0 auto;
  padding: 8px 8px 24px;
  text-align: center;
}

.otp-bkash-icon {
  width: 76px !important;
  height: 76px !important;
  max-width: 76px !important;
  margin: 0 auto 20px !important;
  color: #F58220;
  background: linear-gradient(135deg, rgba(245, 130, 32,0.14) 0%, rgba(245, 130, 32,0.06) 100%);
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.otp-bkash-icon > svg { width: 40px !important; height: 40px !important; max-width: 40px !important; display: block; }

.otp-bkash-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
  line-height: 1.25;
}
.otp-bkash-subtitle {
  font-size: 15px;
  color: #64748b;
  margin: 0 0 28px;
  line-height: 1.5;
}
.otp-bkash-subtitle strong {
  color: #0f172a;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.otp-bkash-boxes {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  justify-content: center !important;
  margin: 0 auto 12px !important;
  max-width: 380px !important;
  padding: 0 !important;
}
.otp-bkash-box {
  width: 48px !important;
  height: 60px !important;
  max-width: 48px !important;
  min-width: 0 !important;
  flex: 0 0 48px !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  text-align: center !important;
  outline: none;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, background 0.15s ease;
  -moz-appearance: textfield;
  font-family: inherit;
}
.otp-bkash-box::-webkit-inner-spin-button,
.otp-bkash-box::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.otp-bkash-box:focus {
  border-color: #F58220;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
  transform: scale(1.04);
}
.otp-bkash-box.filled {
  border-color: #F58220;
  background: rgba(245, 130, 32, 0.05);
}
.otp-bkash-box.error {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
  animation: otpBkashShake 0.4s ease;
}
@keyframes otpBkashShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.otp-bkash-error {
  min-height: 20px;
  color: #ef4444;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  margin: 4px 0 12px;
  padding: 0;
}
.otp-bkash-helper {
  font-size: 14px;
  color: #64748b;
  text-align: center;
  margin: 0 0 20px;
}
.otp-bkash-resend {
  background: none;
  border: none;
  color: #F58220;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: inherit;
}
.otp-bkash-resend:hover { color: #D76D0F; }
.otp-bkash-resend:disabled { color: #94a3b8; cursor: not-allowed; text-decoration: none; }

.otp-bkash-verify {
  width: 100%;
  max-width: 380px;
  padding: 16px;
  background: #F58220;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin: 0 auto 20px;
  display: block;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  font-family: inherit;
}
.otp-bkash-verify:hover:not(:disabled) {
  background: #D76D0F;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
}
.otp-bkash-verify:active:not(:disabled) { transform: translateY(0); }
.otp-bkash-verify:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.otp-bkash-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}
.otp-bkash-secure > svg { width: 16px !important; height: 16px !important; max-width: 16px !important; color: #10b981; display: inline-block; }

/* Hide the legacy `.step-heading` / `.step-subtitle` / `.form-logo` if
   somehow rendered inside this step, the new sheet supplies its own. */
.otp-bkash-step > .form-logo,
.otp-bkash-step > .step-heading,
.otp-bkash-step > .step-subtitle,
.otp-bkash-step > .input-wrapper > .sms-helper,
.otp-bkash-step > .input-wrapper > .continue-btn,
.otp-bkash-step > .input-wrapper > .secure-badge,
.otp-bkash-step > .input-wrapper > .sms-input { display: none !important; }

/* Mobile: bottom-sheet feel, larger vertical translate, tighter spacing */
@media (max-width: 600px) {
  .otp-bkash-step.active {
    animation: otpBkashSlideUpMobile 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  @keyframes otpBkashSlideUpMobile {
    from { opacity: 0; transform: translateY(80px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .otp-bkash-sheet { padding: 4px 4px 20px; }
  .otp-bkash-boxes { gap: 8px !important; max-width: 340px !important; }
  .otp-bkash-box { width: 44px !important; max-width: 44px !important; flex: 0 0 44px !important; height: 56px !important; font-size: 22px !important; border-radius: 11px !important; }
  .otp-bkash-title { font-size: 22px; }
  .otp-bkash-subtitle { font-size: 14px; margin-bottom: 24px; }
  .otp-bkash-icon { width: 66px !important; height: 66px !important; max-width: 66px !important; margin-bottom: 16px !important; }
  .otp-bkash-icon > svg { width: 36px !important; height: 36px !important; max-width: 36px !important; }
}

@media (max-width: 380px) {
  .otp-bkash-boxes { gap: 6px !important; }
  .otp-bkash-box { width: 40px !important; max-width: 40px !important; flex: 0 0 40px !important; height: 52px !important; font-size: 20px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Gender-couple step, unified card with divider, gender icons, bold select
   Overrides the older .gender-cards-wrapper/.gender-card styling.
   ═══════════════════════════════════════════════════════════════════════════ */

.gender-couple-wrap {
  width: 100% !important;
  max-width: 540px !important;
  margin: 0 auto 24px !important;
  padding: 6px !important;
  background: #fff !important;
  border: 1px solid #ececf3 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 28px rgba(23, 15, 51, 0.06), 0 2px 6px rgba(23, 15, 51, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: hidden;
  box-sizing: border-box !important;
}

.gender-couple-section {
  padding: 20px 16px 18px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.gender-couple-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px !important;
  text-align: center;
}

.gender-couple-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #ececf3 20%, #ececf3 80%, transparent 100%);
  margin: 0 12px;
}

.gender-couple-buttons {
  display: flex !important;
  gap: 12px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

/* Redesigned button, flex column with icon on top, larger tap target */
.gender-couple-wrap .gc-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 18px 12px !important;
  background: #fafafd !important;
  border: 2px solid #ececf3 !important;
  border-radius: 14px !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease;
  font-family: inherit;
  box-sizing: border-box;
}
.gender-couple-wrap .gc-btn:hover {
  border-color: #cbb4e6 !important;
  background: rgba(245, 130, 32, 0.05) !important;
  transform: translateY(-1px);
}
.gender-couple-wrap .gc-btn:active { transform: translateY(0) scale(0.98); }
.gender-couple-wrap .gc-btn.selected {
  background: #F58220 !important;
  border-color: #F58220 !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}
.gender-couple-wrap .gc-btn.selected .gc-icon { color: #fff !important; }

.gender-couple-wrap .gc-icon {
  width: 26px !important;
  height: 26px !important;
  color: #F58220;
  display: block;
  transition: color 0.15s ease;
}
.gender-couple-wrap .gc-label {
  display: block;
  line-height: 1;
}

/* Mobile, fills width, tighter padding so buttons get more room */
@media (max-width: 600px) {
  .gender-couple-wrap { width: 100% !important; max-width: 100% !important; margin: 0 auto 20px !important; padding: 4px !important; }
  .gender-couple-section { padding: 16px 10px 14px !important; }
  .gender-couple-buttons { gap: 10px !important; }
  .gender-couple-wrap .gc-btn { padding: 16px 8px !important; font-size: 14px !important; border-radius: 12px !important; }
  .gender-couple-wrap .gc-icon { width: 24px !important; height: 24px !important; }
  .gender-couple-label { font-size: 12px !important; margin-bottom: 12px !important; }
  .gender-couple-divider { margin: 0 10px; }
}

/* Hide the progress bar under the logo when the OTP step is active, the
   OTP screen is a terminal step, showing a "how far through the quiz you are"
   bar there is misleading and visually noisy. */
.popup-content:has(.otp-bkash-step.active) .progress-bar { display: none !important; }

/* Editable slider value: <input> styled to look identical to the old .slider-value
   <div>, but users can tap/click to type an exact amount. */
input.slider-value-editable {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 4px 10px !important;
  margin: 0 auto 24px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px dashed transparent !important;
  border-radius: 6px !important;
  color: #F58220 !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  text-align: center !important;
  outline: none !important;
  font-family: inherit !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
input.slider-value-editable::-webkit-inner-spin-button,
input.slider-value-editable::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input.slider-value-editable:hover {
  border-bottom-color: rgba(245, 130, 32, 0.35) !important;
}
input.slider-value-editable:focus {
  border-bottom-color: #F58220 !important;
  background: rgba(245, 130, 32, 0.04) !important;
  cursor: text;
}
@media (min-width: 640px) {
  input.slider-value-editable { font-size: 56px !important; }
}

/* Desktop-only: widen the slider + combined-inputs (ages) steps.
   Mobile keeps its current tighter widths. */
@media (min-width: 641px) {
  .input-wrapper.slider-wrapper { max-width: 720px !important; }
  .slider-wrapper .slider-input { max-width: 640px !important; }
  .slider-wrapper .slider-labels { max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; }
  .slider-wrapper .slider-ticks { max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; }
  /* Combined-inputs (ages step) is <div class="input-wrapper combined-inputs">,
     both classes on the SAME element. Base .input-wrapper caps at 500px, so
     override on the exact same specificity with both classes. */
  .input-wrapper.combined-inputs { max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; }
  .input-wrapper.combined-inputs .input-group { max-width: 100% !important; }
  .input-wrapper.combined-inputs .input-field { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
}

/* Desktop-only: put the $50,000 / $2M min/max labels INLINE with the slider
   ends (left / right of the track) instead of on a floating row below.
   Uses CSS grid + display:contents so no HTML change is needed.
   Mobile falls back to the original stacked layout. */
@media (min-width: 641px) {
  .slider-wrapper {
    display: grid !important;
    grid-template-columns: max-content 1fr max-content !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    max-width: 780px !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
  }
  .slider-wrapper .slider-value,
  .slider-wrapper input.slider-value-editable {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    margin-bottom: 16px !important;
  }
  .slider-wrapper .slider-input {
    grid-column: 2 !important;
    grid-row: 2 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .slider-wrapper .slider-ticks {
    grid-column: 2 !important;
    grid-row: 3 !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative;
  }
  /* Promote the two span children of .slider-labels into the grid so they
     can sit in columns 1 and 3 next to the slider. */
  .slider-wrapper .slider-labels {
    display: contents !important;
  }
  .slider-wrapper .slider-labels span {
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
  }
  .slider-wrapper .slider-labels span:first-child {
    grid-column: 1 !important;
    grid-row: 2 !important;
    text-align: right;
  }
  .slider-wrapper .slider-labels span:last-child {
    grid-column: 3 !important;
    grid-row: 2 !important;
    text-align: left;
  }
  .slider-wrapper .continue-btn {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    margin-top: 24px !important;
    max-width: 400px !important;
    justify-self: center !important;
  }
}

/* Desktop-only: widen the age-single input. The wrapper is shrink-to-fit
   so #age (100% of a tight wrapper) collapses to ~142px otherwise. */
@media (min-width: 641px) {
  #age.input-field { min-width: 220px !important; }
}


/* G-logo badge added to existing review-card CSS */
.review-card { position: relative; }
.review-google-badge {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
}
.review-google-badge svg { width: 100%; height: 100%; }