* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* MOBILE TOP GAP FIX - Explicit safeguards */
    html, body {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

    .promo-bar-dr:first-of-type,
    body > .promo-bar-dr {
      margin-top: 0 !important;
    }

    @media (max-width: 768px) {
      html, body {
        margin-top: 0 !important;
        padding-top: 0 !important;
      }

      body > *:first-child {
        margin-top: 0 !important;
      }

      .promo-bar-dr {
        margin-top: 0 !important;
      }
    }

    :root {
      /* Typography System */
      --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-headline: 'Playfair Display', Georgia, 'Times New Roman', serif;
      --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

      /* Type Scale - Balanced DR: Readable with clear hierarchy */
      --text-xs: 0.8125rem;
      /* 13px - badges, labels */
      --text-sm: 0.875rem;
      /* 14px - captions, small text */
      --text-base: 1rem;
      /* 16px - body copy */
      --text-lg: 1.125rem;
      /* 18px - lead text */
      --text-xl: 1.25rem;
      /* 20px - subheadings */
      --text-2xl: 1.5rem;
      /* 24px - section headers */
      --text-3xl: 2rem;
      /* 32px - major headers */
      --text-4xl: 2.5rem;
      /* 40px - hero headlines */
      --text-5xl: 3rem;
      /* 48px - impact */
      --text-6xl: 4rem;
      /* 64px - massive */

      /* Spacing Scale (8px base) */
      --space-1: 0.25rem;
      /* 4px */
      --space-2: 0.5rem;
      /* 8px */
      --space-3: 0.75rem;
      /* 12px */
      --space-4: 1rem;
      /* 16px */
      --space-5: 1.5rem;
      /* 24px */
      --space-6: 2rem;
      /* 32px */
      --space-7: 2.5rem;
      /* 40px */
      --space-8: 3rem;
      /* 48px */
      --space-10: 4rem;
      /* 64px */
      --space-12: 5rem;
      /* 80px */
      --space-16: 7rem;
      /* 112px */

      /* Deep Navy + Warm Accent Palette */
      --primary: #1e293b;
      --primary-dark: #0f172a;
      --accent: #b8860b;
      --accent-light: #d4a574;
      --accent-warm: #c9a227;
      --accent-glow: rgba(184, 134, 11, 0.35);
      --red: #9a3c3c;
      --cta: #16a34a;
      --cta-hover: #15803d;
      --trust-blue: #1e40af;
      --text: #0f172a;
      --text-light: #0f172a;
      --text-muted: #64748b;
      --bg: #ffffff;
      --bg-light: #f4f3f0;
      --bg-warm: #e8e6e2;
      --bg-dark: #1e293b;
      --border: #e2e0dc;
      --success: #b8860b;

      /* Premium Shadow System */
      --shadow-sm: 0 1px 2px rgba(30, 41, 59, 0.04), 0 1px 3px rgba(30, 41, 59, 0.06);
      --shadow-md: 0 2px 4px rgba(30, 41, 59, 0.04), 0 4px 8px rgba(30, 41, 59, 0.04), 0 8px 16px rgba(30, 41, 59, 0.02);
      --shadow-lg: 0 4px 8px rgba(30, 41, 59, 0.04), 0 8px 16px rgba(30, 41, 59, 0.06), 0 24px 48px rgba(30, 41, 59, 0.08);
      --shadow-hover: 0 8px 16px rgba(30, 41, 59, 0.06), 0 16px 32px rgba(30, 41, 59, 0.08), 0 0 0 1px rgba(184, 134, 11, 0.15);

      /* Category Colors */
      --category-ondemand: #DC2626;
      --category-enhanced: #A855F7;
      --category-daily: #10B981;
      --category-preworkout: #F59E0B;

      /* Premium Easing */
      --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body {
      font-family: var(--font-body);
      color: var(--text);
      background: var(--bg-light);
      line-height: 1.7;
      font-size: var(--text-base);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }

    .serif {
      font-family: var(--font-display);
      font-weight: 600;
    }

    .display {
      font-family: var(--font-display);
    }

    /* Typographic emphasis utilities */
    .text-gradient {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-warm) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .text-balance {
      text-wrap: balance;
    }

    /* UTILITY */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .container-narrow {
      max-width: 680px;
      margin: 0 auto;
      padding: 0 var(--space-5);
    }

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

    .mt-1 {
      margin-top: 8px;
    }

    .mt-2 {
      margin-top: 16px;
    }

    .mt-3 {
      margin-top: 24px;
    }

    .mt-4 {
      margin-top: 32px;
    }

    .mt-5 {
      margin-top: 48px;
    }

    .mb-1 {
      margin-bottom: 8px;
    }

    .mb-2 {
      margin-bottom: 16px;
    }

    .mb-3 {
      margin-bottom: 24px;
    }

    .mb-4 {
      margin-bottom: 32px;
    }

    /* PROMO BAR */
    .promo-bar {
      background: linear-gradient(135deg, #1E293B 0%, #0f172a 100%);
      color: #fff;
      text-align: center;
      padding: var(--space-3) var(--space-5);
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    .promo-bar span {
      background: #fff;
      color: var(--cta);
      padding: 4px 12px;
      border-radius: 4px;
      margin-right: var(--space-3);
      font-weight: 700;
      text-transform: uppercase;
      font-size: var(--text-xs);
      letter-spacing: 0.04em;
    }

    /* NAV */
    nav {
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      padding: 12px 0;
      position: relative;
    }

    .nav-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      display: flex;
      align-items: center;
      text-decoration: none;
    }

    .logo img {
      height: 32px;
      width: auto;
    }

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

    .nav-links a {
      color: var(--text);
      text-decoration: none;
      font-size: 16px;
      font-weight: 900;
    }

    .nav-phone {
      font-weight: 600;
      color: var(--primary) !important;
    }

    .nav-links .btn {
      color: #fff !important;
    }

    /* Mobile Nav CTA - HIDDEN on mobile, visible on desktop */
    .nav-mobile-cta {
      display: inline-flex;
    }

    @media (max-width: 768px) {
      nav {
        padding: 8px 0;
      }

      .nav-mobile-cta {
        display: none;
      }

      .nav-inner {
        justify-content: center;
      }

      .logo img {
        height: 28px;
      }

      /* FIX: Hide Desktop Nav Links on Mobile to prevent overlap */
      .nav-links {
        display: none;
      }
    }

    /* Utility: Hide on Mobile */
    @media (max-width: 768px) {
      .mobile-hidden {
        display: none !important;
      }

      /* FIX: Better mobile padding */
      .hero-title {
        font-size: clamp(2rem, 8vw, 3rem);
        /* Slightly smaller trigger for mobile */
      }

      .container-narrow {
        padding-left: 24px !important;
        padding-right: 24px !important;
      }
    }

    /* BUTTONS */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-4) var(--space-6);
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      font-weight: 600;
      letter-spacing: 0.03em;
      text-decoration: none;
      text-transform: uppercase;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      border: none;
    }

    .btn-primary {
      background: #16a34a;
      color: #fff;
      box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
    }

    .btn-primary:hover {
      background: #15803d;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(22, 163, 74, 0.45);
    }

    /* Nav CTA Button - Green */
    .btn-nav-blue {
      background: var(--cta);
      color: #fff;
      box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
    }

    .btn-nav-blue:hover {
      background: var(--cta-hover);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(22, 163, 74, 0.45);
    }

    /* Subtle pulse animation for primary CTAs */
    @keyframes subtlePulse {

      0%,
      100% {
        box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
      }

      50% {
        box-shadow: 0 6px 20px rgba(22, 163, 74, 0.5), 0 0 30px rgba(22, 163, 74, 0.2);
      }
    }

    .hero-cta .btn-primary,
    .final-cta .btn-primary {
      animation: subtlePulse 3s ease-in-out infinite;
    }

    .hero-cta .btn-primary:hover,
    .final-cta .btn-primary:hover {
      animation: none;
    }

    .btn-secondary {
      background: var(--primary);
      color: #fff;
    }

    .btn-secondary:hover {
      background: var(--primary-dark);
    }

    .btn-outline {
      background: transparent;
      color: var(--primary);
      border: 2px solid var(--primary);
    }

    .btn-outline:hover {
      background: var(--primary);
      color: #fff;
    }

    .btn-secondary {
      background: #e2e8f0;
      color: var(--primary-dark);
      border: none;
    }

    .btn-secondary:hover {
      background: #cbd5e1;
    }

    .btn-large {
      padding: var(--space-5) var(--space-8);
      font-size: 0.9375rem;
      /* 15px */
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    .btn-block {
      width: 100%;
      max-width: 400px;
    }

    /* ========================================
       HERO SECTION
    ======================================== */
    .hero {
      padding: 10px 0 0;
      background: var(--bg);
      position: relative;
      overflow: hidden;
    }

    /* Dot matrix pattern with drift animation */
    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 55%;
      height: 100%;
      background-image: radial-gradient(circle, rgba(194, 149, 110, 0.4) 1.5px, transparent 1.5px);
      background-size: 24px 24px;
      mask-image: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0.4) 100%);
      -webkit-mask-image: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0.4) 100%);
      pointer-events: none;
      z-index: 0;
      animation: dotDrift 25s linear infinite;
    }

    @keyframes dotDrift {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: 48px 48px;
      }
    }

    /* Accent glow with breathing animation */
    .hero::after {
      content: '';
      position: absolute;
      top: 10%;
      right: 5%;
      width: 45%;
      height: 60%;
      background: radial-gradient(ellipse at center, rgba(194, 149, 110, 0.12) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
      filter: blur(50px);
      animation: glowBreathe 5s ease-in-out infinite;
    }

    @keyframes glowBreathe {

      0%,
      100% {
        opacity: 0.5;
        transform: scale(1);
      }

      50% {
        opacity: 1;
        transform: scale(1.15);
      }
    }

    /* Shimmer sweep effect */
    .hero-content {
      position: relative;
    }

    .hero-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent 0%, rgba(194, 149, 110, 0.04) 50%, transparent 100%);
      animation: shimmerSweep 6s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }

    @keyframes shimmerSweep {
      0% {
        left: -50%;
        opacity: 0;
      }

      20% {
        opacity: 1;
      }

      80% {
        opacity: 1;
      }

      100% {
        left: 150%;
        opacity: 0;
      }
    }

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

    .hero-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      align-items: center;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--text);
      margin-bottom: var(--space-5);
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .hero-rating {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: var(--space-4);
    }

    .hero-stars {
      display: flex;
      gap: 2px;
    }

    .hero-stars svg {
      width: 18px;
      height: 18px;
      color: #f59e0b;
    }

    .hero-rating-text {
      font-family: var(--font-ui);
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      background: transparent;
      padding: 0;
      border-radius: 0;
      border: none;
      letter-spacing: -0.01em;
    }

    .hero-title {
      font-family: var(--font-body);
      font-size: clamp(1.75rem, 5vw, 2.5rem);
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: -0.01em;
      color: var(--text);
      margin-bottom: var(--space-5);
    }

    .hero-title br {
      display: block;
      margin-bottom: 0.15em;
    }

    .hero-title em {
      font-style: normal;
      color: var(--accent);
    }

    .hero-title strong {
      display: block;
      font-family: var(--font-display);
      font-size: 3.5rem;
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--primary-dark);
      font-style: normal;
    }

    .hero-subtitle {
      color: #000000;
      margin-bottom: var(--space-6);
      line-height: 1.7;
      max-width: 480px;
      list-style: none;
      padding: 0;
    }

    .hero-subtitle li {
      position: relative;
      padding-left: 20px;
      margin-bottom: 8px;
    }

    .hero-subtitle li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      width: 6px;
      height: 6px;
      background: var(--accent);
      border-radius: 50%;
    }

    /* New Hero Subtitle Text (paragraph style) */
    .hero-subtitle-text {
      color: #1a1a1a;
      font-size: 1.125rem;
      line-height: 1.6;
      margin-bottom: var(--space-6);
      max-width: 480px;
    }

    /* Green CTA Button - Simple structure */
    .btn-cta-green {
      background: #16a34a;
      color: #fff;
      padding: 16px 32px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
    }

    .btn-cta-green:hover {
      background: #15803d;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(22, 163, 74, 0.45);
    }

    .cta-highlight {
      color: #fff;
      font-weight: 800;
    }

    /* Hero microcopy below CTA */
    .hero-microcopy {
      font-size: 0.875rem;
      color: #6b7280;
      text-align: center;
      margin-top: 12px;
      font-weight: 500;
    }

    /* Simple Trust Badges */
    .hero-trust-badges-simple {
      display: flex;
      flex-wrap: wrap;
      gap: 16px 24px;
      margin-top: 24px;
      margin-bottom: 20px;
    }

    .trust-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #374151;
      font-size: 0.9375rem;
      font-weight: 500;
    }

    .trust-item .checkmark {
      color: #16a34a;
      font-weight: 700;
      font-size: 1.25rem;
    }

    .hero-price-block {
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px 24px;
      margin-bottom: 28px;
      box-shadow: 0 4px 20px rgba(30, 41, 59, 0.06), 0 1px 3px rgba(30, 41, 59, 0.04);
      position: relative;
    }

    .hero-price-row {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 8px;
    }

    .hero-price-old {
      font-size: 16px;
      color: var(--text);
      text-decoration: line-through;
    }

    .hero-price-new {
      font-size: 36px;
      font-weight: 700;
      color: var(--text);
    }

    .hero-price-new span {
      font-size: 16px;
      font-weight: 400;
      color: var(--text);
    }

    .hero-price-badge {
      background: var(--red);
      color: #fff;
      padding: 4px 12px;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 700;
    }

    .hero-price-compare {
      font-size: 16px;
      color: var(--success);
      font-weight: 500;
    }

    .hero-cta {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 12px;
    }

    /* Desktop/Mobile text toggle - default shows desktop */
    .hero-cta .desktop-text {
      display: inline;
    }

    .hero-cta .mobile-text {
      display: none;
    }

    .hero-guarantee {
      font-size: 16px;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .hero-guarantee svg {
      color: var(--success);
    }

    .hero-trust-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      border: none;
      padding: 0;
      transition: all 0.2s;
    }

    .hero-trust-badge:hover {
      opacity: 0.8;
    }

    .hero-trust-badge .badge-icon {
      width: 20px;
      height: 20px;
      background: transparent;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .hero-trust-badge .badge-icon svg {
      color: var(--accent);
      width: 18px;
      height: 18px;
    }

    .hero-trust-badge .badge-text {
      display: flex;
      flex-direction: column;
    }

    .hero-trust-badge .badge-label {
      font-size: 16px;
      font-weight: 900;
      color: var(--text);
      line-height: 1.2;
    }

    .hero-trust-badge .badge-sublabel {
      display: none;
    }

    /* Legacy support */
    .hero-trust-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 500;
      color: var(--text);
    }

    .hero-trust-item svg {
      color: var(--success);
    }

    .hero-image {
      position: relative;
      align-self: end;
    }

    /* Clean glow accent behind hero image */
    .hero-image::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      height: 90%;
      background: radial-gradient(ellipse at center, rgba(0, 81, 255, 0.1) 0%, transparent 65%);
      filter: blur(40px);
      z-index: -1;
      pointer-events: none;
    }

    .hero-image img {
      display: block;
      margin-bottom: -4px;
      position: relative;
      z-index: 1;
    }

    .image-placeholder {
      background: linear-gradient(135deg, #E8E8E8 0%, #D0D0D0 100%);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      font-size: 16px;
      font-weight: 500;
    }

    .hero-image .image-placeholder {
      width: 100%;
      aspect-ratio: 4/5;
    }

    /* ========================================
       SOCIAL PROOF BAR
    ======================================== */
    .social-proof {
      background: var(--primary);
      padding: 28px 0;
    }

    .social-proof-inner {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .social-proof .hero-trust-badge {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .social-proof .hero-trust-badge:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.25);
    }

    /* Hero Trust Badges - Inline row with dividers */
    .hero-trust-badges {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center !important;
      gap: 16px;
      margin-top: 16px;
      padding: 16px 24px;
      background: rgba(255, 255, 255, 0.98);
      border-radius: 12px;
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(0, 0, 0, 0.05);
      width: fit-content;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
    }

    .hero-trust-badges .hero-trust-badge {
      flex: 0 0 auto;
      position: relative;
      padding-right: 16px;
    }

    .hero-trust-badges .hero-trust-badge:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 16px;
      background: var(--border);
    }

    .hero-trust-badges .hero-trust-badge:last-child {
      padding-right: 0;
    }

    .hero-disclaimer {
      text-align: center;
      font-size: 11px;
      color: var(--text-muted, #888);
      margin-top: 16px;
      line-height: 1.4;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
      opacity: 0.7;
    }

    /* ========================================
       RECOGNIZED WORLDWIDE / LOGO SCROLL
    ======================================== */
    .recognized-worldwide {
      background: #0f172a;
      padding: 32px 0;
      overflow: hidden;
      border-top: 1px solid #1e293b;
      border-bottom: 1px solid #1e293b;
    }

    .recognized-title {
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 3px;
      color: rgb(0 95 255);
      margin-bottom: 24px;
    }

    .logos-scroll-wrapper {
      display: flex;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent 0, black 128px, black calc(100% - 128px), transparent 100%);
      mask-image: linear-gradient(to right, transparent 0, black 128px, black calc(100% - 128px), transparent 100%);
    }

    .logos-track {
      display: flex;
      align-items: center;
      gap: 64px;
      animation: logoScroll 60s linear infinite;
      /* Faster animation for more dynamic feel */
      flex-shrink: 0;
      padding-right: 64px;
    }

    .logos-track:hover {
      animation-play-state: paused;
    }

    @keyframes logoScroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    .logo-text {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2vw, 1.5rem);
      font-weight: 600;
      color: #e2e8f0;
      white-space: nowrap;
      cursor: default;
      user-select: none;
      transition: all 0.3s ease;
      letter-spacing: 0.01em;
    }

    .logo-text:hover {
      color: #1e293b;
    }

    @media (max-width: 768px) {
      .hero-trust-badges {
        gap: 8px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: calc(100% - 24px);
        padding: 12px 16px;
        margin: 16px auto;
      }

      .hero-trust-badges .hero-trust-badge {
        padding: 0 clamp(4px, 1.5vw, 8px);
        flex: 0 0 auto;
      }

      .hero-trust-badges .hero-trust-badge:not(:last-child)::after {
        display: none;
      }

      .hero-trust-badges .badge-icon svg {
        width: clamp(14px, 3.5vw, 16px);
        height: clamp(14px, 3.5vw, 16px);
      }

      .hero-trust-badges .badge-label {
        font-size: clamp(10px, 2.8vw, 13px);
        white-space: nowrap;
      }

      .recognized-worldwide {
        padding: 24px 0;
      }

      .logos-track {
        gap: 40px;
        padding-right: 40px;
      }

      .logo-text {
        font-size: 16px;
      }
    }

    /* ========================================
       SECTION TRANSITION DIVIDERS
    ======================================== */
    .section-transition {
      padding: 48px 24px;
      text-align: center;
      position: relative;
      background: linear-gradient(180deg, var(--bg) 0%, var(--bg-light) 50%, var(--bg) 100%);
    }

    .section-transition.dark-to-light {
      background: linear-gradient(180deg, var(--primary-dark) 0%, var(--bg-light) 100%);
    }

    .section-transition.light-to-dark {
      background: linear-gradient(180deg, var(--bg-light) 0%, var(--primary-dark) 100%);
    }

    .section-transition.accent-bar {
      background: var(--primary);
      padding: 40px 24px;
    }

    .section-transition.accent-bar .transition-text {
      color: rgba(255, 255, 255, 0.9);
    }

    .section-transition.accent-bar .transition-text strong {
      color: #fff;
    }

    .transition-line {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-bottom: 20px;
    }

    .transition-line::before,
    .transition-line::after {
      content: '';
      height: 1px;
      width: 60px;
      background: linear-gradient(90deg, transparent, var(--border), transparent);
    }

    .transition-icon {
      width: 40px;
      height: 40px;
      background: var(--bg);
      border: 2px solid var(--accent);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }

    .transition-text {
      font-family: var(--font-body);
      font-size: var(--text-lg);
      color: var(--text);
      max-width: 500px;
      margin: 0 auto 20px;
      line-height: 1.6;
    }

    .transition-text strong {
      color: var(--text);
      font-weight: 600;
    }

    .transition-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--accent);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      transition: all 0.2s ease;
    }

    .transition-cta:hover {
      color: var(--accent-warm);
      gap: 12px;
    }

    .transition-cta svg {
      transition: transform 0.2s ease;
    }

    .transition-cta:hover svg {
      transform: translateX(3px);
    }

    /* Numbered progress indicator */
    .section-progress {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .progress-step {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--bg-warm);
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      transition: all 0.3s ease;
    }

    .progress-step.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    .progress-step.completed {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }

    .progress-connector {
      width: 24px;
      height: 2px;
      background: var(--border);
    }

    .progress-connector.completed {
      background: var(--primary);
    }

    @media (max-width: 768px) {
      .section-transition {
        padding: 36px 20px;
      }

      .transition-text {
        font-size: var(--text-base);
      }

      .transition-line::before,
      .transition-line::after {
        width: 40px;
      }

      .progress-step {
        width: 28px;
        height: 28px;
        font-size: 16px;
      }

      .progress-connector {
        width: 16px;
      }
    }

    /* ========================================
       LONG-FORM CONTENT SECTIONS
    ======================================== */
    .content-section {
      padding: 40px 0;
    }

    .content-section.alt {
      background: var(--bg-light);
    }

    .content-section.warm {
      background: var(--bg-warm);
    }

    .content-section.dark {
      background: var(--bg-dark);
      color: #fff;
    }

    .section-eyebrow {
      font-family: var(--font-ui);
      font-size: var(--text-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--accent);
      margin-bottom: var(--space-3);
    }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 600;
      color: var(--text);
      margin-bottom: var(--space-5);
      line-height: 1.2;
      letter-spacing: -0.01em;
      text-wrap: balance;
    }

    .section-title em {
      font-style: normal;
      color: var(--accent);
    }

    .section-title br {
      display: block;
      content: '';
      margin-top: 0.1em;
    }

    .dark .section-title {
      color: #fff;
    }

    .section-subtitle {
      font-size: var(--text-lg);
      color: var(--text);
      margin-bottom: var(--space-6);
      line-height: 1.65;
    }

    .dark .section-subtitle {
      color: rgba(255, 255, 255, 0.8);
    }

    .lead-text {
      font-size: var(--text-xl);
      line-height: 1.75;
      color: var(--text);
    }

    .body-text {
      font-size: var(--text-lg);
      line-height: 1.8;
      color: var(--text);
      margin-bottom: 1.5em;
    }

    .body-text strong {
      color: var(--text);
      font-weight: 600;
    }

    .dark .body-text {
      color: rgba(255, 255, 255, 0.85);
    }

    .dark .body-text strong {
      color: #fff;
    }

    .highlight-box {
      background: var(--bg-warm);
      border-left: 4px solid var(--accent);
      padding: var(--space-5) var(--space-6);
      margin: var(--space-7) 0;
      border-radius: 0 8px 8px 0;
    }

    .highlight-box p {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      color: var(--text);
      margin: 0;
      font-style: italic;
      line-height: 1.5;
    }

    .highlight-box p::before {
      content: '"';
      color: var(--accent);
      font-size: 1.2em;
    }

    .highlight-box p::after {
      content: '"';
      color: var(--accent);
      font-size: 1.2em;
    }

    /* Pull quote - larger featured quotes */
    .pull-quote {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-style: italic;
      color: var(--text);
      border-left: 4px solid var(--accent);
      padding-left: var(--space-5);
      margin: var(--space-8) 0;
      line-height: 1.4;
    }

    .pull-quote cite {
      display: block;
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      font-style: normal;
      color: var(--text);
      margin-top: var(--space-3);
      letter-spacing: 0.02em;
    }

    .stat-callout {
      background: var(--primary);
      color: #fff;
      padding: var(--space-8);
      border-radius: 12px;
      text-align: center;
      margin: var(--space-8) 0;
    }

    .stat-callout-value {
      font-family: var(--font-display);
      font-size: clamp(3rem, 8vw, 4.5rem);
      font-weight: 700;
      line-height: 1;
      margin-bottom: var(--space-2);
      letter-spacing: -0.02em;
    }

    .stat-callout-label {
      font-family: var(--font-body);
      font-size: var(--text-base);
      opacity: 0.9;
      line-height: 1.5;
      max-width: 400px;
      margin: 0 auto;
    }

    /* PROBLEM LIST */
    .problem-list {
      list-style: none;
      padding: 0;
      margin: 32px 0;
    }

    .problem-list li {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      font-size: 16px;
      color: var(--text);
      margin-bottom: 18px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--border);
    }

    .problem-list li:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .problem-list .icon-x {
      color: var(--red);
      font-weight: 700;
      font-size: 16px;
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(184, 50, 50, 0.1);
      border-radius: 50%;
    }

    /* SOLUTION LIST */
    .solution-list {
      list-style: none;
      padding: 0;
      margin: 32px 0;
    }

    .solution-list li {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      font-size: 16px;
      color: var(--text);
      margin-bottom: 18px;
    }

    .solution-list .icon-check {
      color: var(--success);
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 81, 255, 0.12);
      border-radius: 50%;
    }

    /* ========================================
       COMPARISON SECTION - Card Grid Design
    ======================================== */
    .comparison-card-container {
      background: #f3f2ee;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      max-width: 800px;
      margin: 40px auto;
    }

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

    .comparison-cell {
      padding: 24px 16px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #eef0f2;
      background: #ffffff;
      color: var(--text);
    }

    .comparison-cell:nth-last-child(-n+3) {
      border-bottom: none;
    }

    /* Header cells */
    .comparison-cell.header-cell {
      background: #f3f2ee;
      padding: 32px 16px;
      border-bottom: none;
    }

    .comparison-header-title {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 800;
      margin-bottom: 8px;
      letter-spacing: -0.5px;
    }

    .comparison-header-subtitle {
      font-size: 16px;
      color: var(--text);
      font-weight: 400;
    }

    /* Data cell typography */
    .comparison-cell-label {
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text);
      margin-bottom: 12px;
      font-weight: 600;
    }

    .comparison-cell-value {
      font-size: 16px;
      font-weight: 700;
    }

    /* Featured column (center) - dark navy background */
    .comparison-grid>.comparison-cell:nth-child(3n+2) {
      background: #1c2636;
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.1);
    }

    .comparison-grid>.comparison-cell:nth-child(3n+2) .comparison-header-subtitle,
    .comparison-grid>.comparison-cell:nth-child(3n+2) .comparison-cell-label {
      color: rgba(255, 255, 255, 0.6);
    }

    /* Icons */
    .comparison-icon {
      width: 20px;
      height: 20px;
    }

    .comparison-icon-check {
      color: #cfa833;
    }

    .comparison-icon-x {
      color: #c73e3e;
    }

    /* Legacy check/x for any remaining usage */
    .check-icon {
      color: var(--success);
      font-weight: 700;
    }

    .x-icon {
      color: var(--red);
      font-weight: 700;
    }

    /* Responsive - smaller text on mobile */
    @media (max-width: 600px) {
      .comparison-card-container {
        border-radius: 16px;
        margin: 24px auto;
      }

      .comparison-cell {
        padding: 16px 8px;
      }

      .comparison-cell.header-cell {
        padding: 20px 8px;
      }

      .comparison-header-title {
        font-size: 16px;
      }

      .comparison-header-subtitle {
        font-size: 16px;
      }

      .comparison-cell-label {
        font-size: 16px;
        margin-bottom: 8px;
      }

      .comparison-cell-value {
        font-size: 16px;
      }
    }

    /* ========================================
       HOW IT WORKS - Stacked Cards Style
    ======================================== */
    .how-it-works-section {
      padding: 80px 0 100px;
      background: var(--bg-light);
    }

    .hiw-orb-2 {
      display: none;
    }

    .hiw-progress-track {
      display: none;
    }

    .hiw-progress-fill {
      display: none;
    }

    .hiw-step-icon {
      display: none;
    }

    .hiw-step-tag {
      display: none;
    }

    .hiw-container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    /* Left side - Header */
    .how-it-works-header {
      text-align: left;
      margin: 0;
    }

    .how-it-works-header .section-eyebrow {
      color: var(--text);
      margin-bottom: var(--space-3);
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      font-weight: 600;
      letter-spacing: 0;
      text-transform: none;
    }

    .how-it-works-header h2 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 2.75rem);
      font-weight: 600;
      color: var(--text);
      margin-bottom: 0;
      letter-spacing: -0.02em;
      line-height: 1.15;
      text-wrap: balance;
    }

    /* Right side - Steps */
    .hiw-timeline {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .hiw-steps {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .hiw-step {
      background: var(--bg-warm);
      border-radius: 12px;
      padding: 20px 24px;
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .hiw-step-inner {
      display: contents;
    }

    /* Number badge */
    .hiw-step-orb {
      width: 48px;
      height: 48px;
      flex-shrink: 0;
      margin: 0;
    }

    .hiw-step-orb-inner {
      width: 100%;
      height: 100%;
      background: var(--accent);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hiw-step-orb-inner span {
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }

    /* Step text */
    .hiw-step-text {
      flex: 1;
    }

    .hiw-step h3 {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
      line-height: 1.3;
    }

    .hiw-step p {
      font-size: 16px;
      color: var(--text);
      line-height: 1.5;
      margin: 0;
    }

    /* Bottom CTA */
    .hiw-bottom {
      grid-column: 1 / -1;
      text-align: center;
      margin-top: 20px;
    }

    .hiw-summary {
      display: none;
    }

    .hiw-cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 18px 40px;
      background: #16a34a;
      color: #fff;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      border-radius: 10px;
      box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hiw-cta-btn:hover {
      background: #15803d;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(22, 163, 74, 0.45);
    }

    .hiw-cta-btn svg {
      display: none;
    }

    /* Mobile */
    @media (max-width: 800px) {
      .how-it-works-section {
        padding: 60px 0 80px;
      }

      .hiw-container {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .how-it-works-header {
        text-align: center;
      }

      .how-it-works-header h2 {
        font-size: 32px;
      }

      .hiw-step {
        padding: 18px 20px;
        gap: 16px;
      }

      .hiw-step-orb {
        width: 44px;
        height: 44px;
      }

      .hiw-step-orb-inner span {
        font-size: 16px;
      }

      .hiw-step h3 {
        font-size: 16px;
      }

      .hiw-step p {
        font-size: 16px;
      }

      .hiw-cta-btn {
        padding: 16px 36px;
        font-size: 16px;
      }
    }

    /* Legacy support for old markup - can remove later */
    .steps-vertical {
      max-width: 600px;
      margin: 0 auto;
    }

    .step-item {
      display: flex;
      gap: 24px;
      padding: 32px 0;
      border-bottom: 1px solid var(--border);
      position: relative;
    }

    .step-item:last-child {
      border-bottom: none;
    }

    .step-number {
      width: 56px;
      height: 56px;
      background: var(--primary);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .step-content h3 {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
    }

    .step-content p {
      font-size: 16px;
      color: var(--text);
      margin-bottom: 8px;
    }

    .step-time {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      background: rgba(0, 81, 255, 0.12);
      border-radius: 100px;
      font-size: 16px;
      font-weight: 600;
      color: var(--success);
    }

    /* ========================================
       SCIENCE SECTION - Premium Ingredient Cards
    ======================================== */
    .ingredient-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32px;
      margin: 64px auto;
      max-width: 1100px;
    }

    .ingredient-card {
      border-radius: 24px;
      padding: 48px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .ingredient-card:hover {
      transform: translateY(-8px);
    }

    /* Header area with alignment fix */
    .card-header-top {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 32px;
    }

    .ingredient-card h3 {
      font-family: var(--font-display);
      font-size: 44px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.03em;
      margin: 0;
    }

    .ingredient-card .tagline {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      line-height: 1;
    }

    .ingredient-card .body-copy {
      font-size: 16px;
      line-height: 1.7;
      margin-bottom: 12px;
      flex-grow: 1;
    }

    /* The citation fix */
    .citation-note {
      font-size: 16px;
      margin-bottom: 32px;
      opacity: 0.7;
      font-style: italic;
    }

    /* Benefits List */
    .benefits-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .benefit-item {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.4;
    }

    .benefit-icon {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Theme 1: Pycnogenol (Premium Light) */
    .ingredient-card.theme-light {
      background: #fdfdfd;
      box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 20px 40px -4px rgba(0, 0, 0, 0.03);
    }

    .theme-light h3 {
      color: #111;
    }

    .theme-light .tagline {
      color: #b91c1c;
    }

    .theme-light .body-copy {
      color: #444;
    }

    .theme-light .citation-note {
      color: #666;
    }

    .theme-light .benefit-item {
      color: #222;
    }

    .theme-light .benefit-icon {
      color: #059669;
    }

    .theme-light::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 150px;
      height: 150px;
      background: radial-gradient(circle at top right, rgba(185, 28, 28, 0.04) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Theme 2: Bremelanotide (Ultra Premium Dark) */
    .ingredient-card.theme-dark {
      background: #0f172a;
      /* Slate 900 */
      color: #f8fafc;
      border: 1px solid rgba(255, 255, 255, 0.05);
      box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.3),
        0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }

    .theme-dark h3 {
      color: #fff;
    }

    .theme-dark .tagline {
      color: #eab308;
    }

    /* Yellow 500 */
    .theme-dark .body-copy {
      color: #cbd5e1;
    }

    .theme-dark .citation-note {
      color: #1e293b;
    }

    .theme-dark .benefit-item {
      color: #f1f5f9;
    }

    .theme-dark .benefit-icon {
      color: #eab308;
    }

    .theme-dark::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle at top right, rgba(234, 179, 8, 0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Highlight style */
    .theme-light p strong {
      color: #111;
      background: rgba(185, 28, 28, 0.05);
      padding: 0 4px;
      border-radius: 4px;
    }

    .theme-dark p strong {
      color: #eab308;
    }

    .stat-high {
      font-weight: 800;
      font-size: 1.1em;
    }

    .theme-light .stat-high {
      color: #b91c1c;
    }

    .theme-dark .stat-high {
      color: #eab308;
    }

    /* Mobile overrides */
    @media (max-width: 900px) {
      .ingredient-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
        gap: 24px;
        margin: 40px auto;
      }

      .ingredient-card {
        padding: 40px 32px;
      }

      .ingredient-card h3 {
        font-size: 34px;
      }
    }

    /* ========================================
       PRODUCTS SECTION
    ======================================== */
    .products-intro {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 48px;
    }

    /* Promo Headline - Simple text banner, not a button */
    .promo-headline {
      margin-top: 24px;
      padding: 0;
      background: none;
      color: #16a34a;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    @media (max-width: 768px) {
      .promo-headline {
        font-size: 16px;
      }
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    @media (max-width: 1200px) {
      .products-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 900px) {
      .products-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .products-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ========================================
       PRODUCT CAROUSEL - Horizontal Scroll
    ======================================== */

    /* Category Filter Tabs - Clean underline style */
    .product-filter-tabs {
      display: flex;
      justify-content: center;
      gap: 32px;
      margin-bottom: 40px;
      flex-wrap: wrap;
      border-bottom: 1px solid var(--border);
      padding-bottom: 0;
    }

    .product-filter-tab {
      padding: 12px 4px;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 500;
      color: var(--text);
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
      margin-bottom: -1px;
    }

    .product-filter-tab:hover {
      color: var(--text);
    }

    .product-filter-tab.active {
      background: transparent;
      color: var(--primary);
      border-bottom-color: var(--primary);
      font-weight: 600;
    }

    /* Carousel Container */
    .products-carousel-wrapper {
      position: relative;
      overflow: hidden;
      margin: 0 -24px;
      padding: 20px 0 40px;
      /* Fade edges for seamless infinite scroll effect */
      -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
      mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }

    /* Scrollable state when filtered */
    .products-carousel-wrapper.scrollable {
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -webkit-mask-image: none;
      mask-image: none;
    }

    .products-carousel-wrapper.scrollable::-webkit-scrollbar {
      display: none;
    }

    /* ========================================
       INFINITE SCROLL CAROUSEL TRACK
    ======================================== */

    .products-carousel-track {
      display: flex;
      gap: 24px;
      padding: 0 24px;
      width: max-content;
      animation: scrollCarousel 90s linear infinite;
      align-items: stretch;
    }

    /* Pause animation on hover for better UX */
    .products-carousel-track:hover {
      animation-play-state: paused;
    }

    /* Infinite scroll keyframe - moves by half since we duplicate cards */
    @keyframes scrollCarousel {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    /* Filtered state - stop animation and center content */
    .products-carousel-track.filtered {
      animation: none;
      width: 100%;
      max-width: 1300px;
      margin: 0 auto;
      flex-wrap: wrap;
      justify-content: center;
    }

    /* Product cards need fixed width in carousel mode */
    .products-carousel-track .product-card {
      flex-shrink: 0;
      width: 300px;
    }

    /* Mobile adjustments */
    @media (max-width: 768px) {
      .products-carousel-track {
        gap: 16px;
        animation-duration: 60s;
      }

      .products-carousel-track .product-card {
        width: 280px;
      }
    }

    @media (max-width: 500px) {
      .products-carousel-track .product-card {
        width: 260px;
      }
    }

    /* ========================================
       PRODUCT CARDS - Gemini-Style Clean Design
       Blue/Gold brand palette with high conversion focus
    ======================================== */

    /* Brand Colors (Gemini Design System) */
    :root {
      --brand-blue: #1c3d8f;
      --brand-blue-light: #f0f4ff;
      --brand-gold: #d4af37;
      --brand-green: #10b981;
      --brand-dark: #111827;
      --brand-red: #ef4444;
    }

    .product-card {
      background: #ffffff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      display: flex;
      flex-direction: column;
      border: 2px solid transparent;
      height: 100%;
    }

    .product-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 50px -12px rgba(28, 61, 143, 0.25);
      border-color: var(--brand-blue);
    }

    /* Image area - Light blue brand background */
    .product-card-image {
      aspect-ratio: 1/1;
      background: rgba(240, 244, 255, 0.5);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      border-bottom: none;
    }

    .product-card-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .product-card:hover .product-card-image img {
      transform: scale(1.08) translateY(-5px);
    }

    /* Badge - premium, subdued positioning on image */
    .product-badge {
      position: absolute;
      top: 12px;
      left: 12px;
      padding: 6px 12px;
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      border-radius: 20px;
      z-index: 10;
      background: rgba(26, 26, 46, 0.85);
      color: #fff;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.2s ease;
    }

    .product-card:hover .product-badge {
      background: rgba(26, 26, 46, 0.95);
    }

    /* Savings badge - Clean green pill style */
    .product-savings-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      padding: 6px 10px;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
      border-radius: 4px;
      z-index: 10;
      background: #dcfce7;
      color: #15803d;
      transition: all 0.2s ease;
    }

    .product-card:hover .product-savings-badge {
      transform: scale(1.02);
    }

    /* Rating row - Gold stars with rating text */
    .product-card-rating-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding: 12px 16px 0;
      background: transparent;
      border-top: none;
    }

    .product-card-rating-row .rating-top-line {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .product-card-rating-row .stars {
      color: var(--brand-gold);
      font-size: 26px;
      letter-spacing: 1px;
      line-height: 1;
    }

    .product-card-rating-row .rating-text {
      font-size: 16px;
      font-weight: 700;
      color: var(--brand-dark);
    }

    /* Hide review count from rating row - now shown in benefits */
    .product-card-rating-row .review-count {
      display: none;
    }

    /* Badge Variants - Premium, subtle colors */
    .badge-maximum {
      background: rgba(79, 70, 229, 0.9);
      color: #fff;
    }

    .badge-popular {
      background: rgba(26, 26, 46, 0.85);
      color: #fff;
    }

    .badge-fast {
      background: rgba(59, 130, 246, 0.9);
      color: #fff;
    }

    .badge-enhanced {
      background: rgba(124, 58, 237, 0.9);
      color: #fff;
    }

    .badge-daily {
      background: rgba(5, 150, 105, 0.9);
      color: #fff;
    }

    .badge-preworkout {
      background: rgba(217, 119, 6, 0.9);
      color: #fff;
    }

    /* Card Content */
    .product-card-content {
      padding: 16px 20px 20px;
      text-align: left;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    /* Product name - Bold black heading */
    .product-card-name {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 900;
      color: var(--brand-dark);
      margin: 0 0 8px 0;
      line-height: 1.1;
    }

    /* Ingredient formula - Blue uppercase prominent */
    .product-card-formula {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      color: var(--brand-blue);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin: 0 0 12px 0;
      line-height: 1.3;
    }

    /* Subtitle - hidden */
    .product-card-subtitle {
      display: none;
    }

    /* Benefit list with green checkmarks */
    .product-card-benefits {
      list-style: none;
      padding: 0;
      margin: 0 0 16px 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex-grow: 1;
    }

    .product-card-benefits li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 500;
      color: #4b5563;
      line-height: 1.4;
    }

    .product-card-benefits .check-icon {
      width: 16px;
      height: 16px;
      min-width: 16px;
      color: var(--brand-green);
      margin-top: 1px;
    }

    /* OLD benefit text - now hidden */
    .product-card-benefit {
      display: none;
    }

    /* Star Rating - now shown as badge on image, hide from content */
    .product-card-rating {
      display: none;
    }

    /* Pricing - Horizontal row with strikethrough + current price */
    .product-card-pricing {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      margin-bottom: 14px;
      padding-top: 12px;
      border-top: 1px solid #f3f4f6;
    }

    .product-card-savings-badge {
      display: inline-block;
      padding: 6px 14px;
      background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
      color: #fff;
      font-size: 16px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-radius: 4px;
    }

    .product-card-prices {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    /* Strikethrough original price - Readable but dramatic */
    .product-card-original-price {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: #374151;
      text-decoration: line-through;
      text-decoration-thickness: 2px;
      text-decoration-color: var(--brand-red);
      position: relative;
      opacity: 0.85;
    }

    .product-card-price {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 900;
      color: var(--brand-green);
      letter-spacing: -0.02em;
    }

    .product-card-per {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 500;
      color: #9ca3af;
      margin-left: -6px;
    }

    /* Hide "Starting at" prefix */
    .product-card-price-prefix {
      display: none;
    }

    /* Primary CTA - Blue brand button */
    .product-card-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 14px 24px;
      background: var(--brand-blue);
      color: #ffffff;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      text-align: center;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 10px 15px -3px rgba(28, 61, 143, 0.2), 0 4px 6px -4px rgba(28, 61, 143, 0.2);
    }

    .product-card-cta svg {
      width: 14px;
      height: 14px;
    }

    .product-card-cta:hover {
      transform: translateY(-2px);
      background: #1e3a8a;
      box-shadow: 0 20px 25px -5px rgba(28, 61, 143, 0.3), 0 8px 10px -6px rgba(28, 61, 143, 0.2);
    }

    .product-card-cta:active {
      transform: translateY(0);
    }

    /* ========================================
       PRODUCT ROW - New Mockup Design (V5)
       Horizontal mobile, vertical desktop
    ======================================== */

    .product-row {
      display: flex;
      flex-direction: column;
      background: #faf8f5;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 12px;
      transition: all 0.3s;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .product-row:hover {
      background: #fff;
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    .pr-img {
      width: 100%;
      height: 80px;
      background: transparent;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }

    .pr-img img {
      max-width: 100%;
      max-height: 75px;
      object-fit: contain;
    }

    .pr-info {
      text-align: center;
    }

    .pr-name-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 4px;
    }

    .pr-top {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .pr-badge {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 4px 10px;
      border-radius: 4px;
    }

    .pr-badge.on-demand {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .pr-badge.daily {
      background: #f0fdf4;
      color: #16a34a;
      border: 1px solid #bbf7d0;
    }

    .pr-badge.pre-workout {
      background: #fffbeb;
      color: #d97706;
      border: 1px solid #fde68a;
    }

    .pr-rating {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 16px;
    }

    .pr-rating .stars {
      font-size: 16px;
      color: #f59e0b;
    }

    .pr-rating .num {
      color: #0f172a;
      font-weight: 700;
      font-size: 16px;
    }

    .pr-rating .cnt {
      color: #1e293b;
      font-size: 16px;
    }

    .pr-name {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 0;
    }

    .pr-benefit {
      font-size: 16px;
      color: #1e293b;
      margin-bottom: 4px;
      line-height: 1.35;
    }

    .pr-benefit strong {
      color: #0f172a;
      font-weight: 600;
    }

    .pr-formula {
      font-size: 16px;
      color: #1e293b;
      margin-bottom: 8px;
    }

    /* CTA Section */
    .pr-ctas {
      margin-top: auto;
    }

    .pr-cta-main {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 12px 16px;
      background: #16a34a;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: all 0.2s;
      margin-bottom: 8px;
    }

    .pr-cta-main:hover {
      background: #15803d;
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
    }

    .pr-cta-main svg {
      width: 16px;
      height: 16px;
    }

    .pr-counts {
      display: flex;
      gap: 6px;
    }

    .pr-count {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 6px;
      background: #faf8f5;
      border: 1px solid #e5e2dd;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }

    .pr-count:hover {
      border-color: #ea580c;
      background: #fff;
    }

    .pr-count.selected {
      border-color: #ea580c;
      background: #fff7ed;
    }

    .pr-count.selected::after {
      content: '✓';
      position: absolute;
      top: -6px;
      right: -4px;
      width: 16px;
      height: 16px;
      background: #ea580c;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .pr-count-qty {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }

    .pr-count-price {
      font-size: 16px;
      color: #1e293b;
    }

    /* Mobile: Horizontal layout */
    @media (max-width: 800px) {
      .product-row {
        display: grid;
        grid-template-columns: 85px 1fr;
        grid-template-rows: auto auto;
        gap: 0 12px;
        padding: 12px;
        text-align: left;
      }

      .pr-img {
        grid-row: 1 / 2;
        width: 85px;
        height: 85px;
        margin-bottom: 0;
        align-self: start;
      }

      .pr-img img {
        max-width: 100%;
        max-height: 75px;
      }

      .pr-info {
        grid-row: 1 / 2;
        grid-column: 2;
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-align: left;
      }

      .pr-name-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 3px;
      }

      .pr-top {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        order: 1;
      }

      .pr-badge {
        font-size: 16px;
        padding: 3px 8px;
      }

      .pr-rating {
        display: flex;
        font-size: 16px;
        gap: 4px;
      }

      .pr-rating .stars {
        font-size: 16px;
      }

      .pr-rating .num {
        font-size: 16px;
      }

      .pr-rating .cnt {
        display: none;
      }

      .pr-name {
        font-size: 16px;
        margin-bottom: 0;
        text-align: left;
        order: 0;
      }

      .pr-benefit {
        font-size: 16px;
        text-align: left;
        line-height: 1.3;
        margin-bottom: 2px;
        order: 2;
      }

      .pr-formula {
        font-size: 16px;
        margin-bottom: 0;
        order: 3;
      }

      .pr-ctas {
        grid-column: 1 / -1;
        margin-top: 10px;
      }

      .pr-cta-main {
        padding: 11px 14px;
        font-size: 16px;
        margin-bottom: 6px;
      }

      .pr-cta-main svg {
        width: 14px;
        height: 14px;
      }

      .pr-counts {
        gap: 5px;
      }

      .pr-count {
        padding: 6px 4px;
      }

      .pr-count-qty {
        font-size: 16px;
      }

      .pr-count-price {
        font-size: 16px;
      }
    }

    @media (max-width: 480px) {
      .product-row {
        grid-template-columns: 75px 1fr;
        padding: 10px;
        gap: 0 10px;
      }

      .pr-img {
        width: 75px;
        height: 75px;
      }

      .pr-img img {
        max-height: 68px;
      }

      .pr-name {
        font-size: 16px;
      }

      .pr-benefit {
        font-size: 16px;
      }

      .pr-formula {
        font-size: 16px;
      }

      .pr-ctas {
        margin-top: 8px;
      }

      .pr-cta-main {
        padding: 10px 12px;
        font-size: 16px;
      }

      .pr-cta-main svg {
        width: 13px;
        height: 13px;
      }

      .pr-count {
        padding: 5px 3px;
      }

      .pr-count-qty {
        font-size: 16px;
      }

      .pr-count-price {
        font-size: 16px;
      }
    }

    /* Product Card - How It Works */
    .product-card-hiw {
      margin-top: 12px;
      padding: 10px 12px;
      background: #f5f7fa;
      border-radius: 8px;
      text-align: left;
    }

    .product-card-hiw .hiw-label {
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--primary);
      margin-bottom: 6px;
    }

    .product-card-hiw .hiw-mini-steps {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .product-card-hiw .hiw-mini-steps span {
      font-size: 16px;
      color: #555;
      line-height: 1.4;
    }

    .product-card-hiw .hiw-mini-steps strong {
      color: var(--primary);
    }

    /* ========================================
       PRODUCT CARD - HOW IT WORKS (PREMIUM)
    ======================================== */
    .card-hiw-premium {
      margin-top: 16px;
      padding: 16px 18px;
      background: linear-gradient(135deg, #1a237e 0%, #0d1442 100%);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .card-hiw-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .card-hiw-title {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }

    .card-hiw-subtitle {
      font-size: 16px;
      font-weight: 600;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .card-hiw-steps {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .card-hiw-step {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .card-hiw-step .step-num {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      background: var(--cta);
      color: #fff;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .card-hiw-step span:last-child {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      line-height: 1.2;
    }

    /* ========================================
       PRODUCT CARD QUANTITY OPTIONS - Hidden (select in modal)
    ======================================== */
    .product-card-qty-options {
      display: none;
    }

    .qty-options-text {
      display: none;
    }

    /* ========================================
       PRODUCT CARD QUANTITY DROPDOWN - Clean
       (Legacy - kept for modal use)
    ======================================== */
    .product-card-qty-selector {
      margin-bottom: 12px;
    }

    .qty-dropdown {
      width: 100%;
      padding: 10px 14px;
      background: #f8f9fa;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: #1a1a2e;
      cursor: pointer;
      transition: all 0.2s ease;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
      text-align: left;
    }

    .qty-dropdown:hover {
      background-color: #f0f4ff;
      border-color: var(--cta);
    }

    .qty-dropdown:focus {
      outline: none;
      border-color: var(--cta);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    .qty-dropdown option {
      font-weight: 500;
      padding: 8px;
    }

    /* Trust Badges - HIDDEN */
    .product-card-trust {
      display: none;
    }

    /* Hidden elements */
    .product-card-formula,
    .product-details-list {
      display: none;
    }

    /* ========================================
       PRODUCTS HOW IT WORKS - Static Section
    ======================================== */
    .products-hiw-section {
      margin-top: 48px;
      padding: 32px 40px;
      background: linear-gradient(135deg, #1a237e 0%, #0d1442 100%);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    .products-hiw-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 28px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .products-hiw-title {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }

    .products-hiw-subtitle {
      font-size: 16px;
      font-weight: 600;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .products-hiw-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .products-hiw-step {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .products-hiw-step .step-num {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: var(--cta);
      color: #fff;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .products-hiw-step .step-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .products-hiw-step .step-title {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }

    .products-hiw-step .step-desc {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.4;
    }

    /* Mobile: Stack the steps */
    @media (max-width: 900px) {
      .products-hiw-section {
        padding: 24px;
        margin-top: 32px;
      }

      .products-hiw-header {
        flex-direction: column;
        gap: 8px;
        text-align: center;
      }

      .products-hiw-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
    }

    @media (max-width: 500px) {
      .products-hiw-steps {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .products-hiw-step {
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
      }
    }

    /* Mobile: full-width cards with better visibility */
    @media (max-width: 640px) {
      .products-carousel {
        gap: 24px;
        padding: 0 16px;
      }

      .product-card {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
      }

      .product-card-image {
        aspect-ratio: 4/3;
      }

      .product-card-content {
        padding: 20px;
      }

      .product-card-name {
        font-size: 1.35rem;
        font-weight: 700;
        margin-bottom: 8px;
      }

      .product-card-benefit {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 14px;
        color: #444;
      }

      .product-card-rating .stars {
        font-size: 16px;
      }

      .product-card-rating .rating-text {
        font-size: 16px;
        font-weight: 600;
      }

      .product-card-rating .review-count {
        font-size: 16px;
      }

      .product-card-price {
        font-size: 26px;
        font-weight: 800;
      }

      .product-card-price-original {
        font-size: 16px;
      }

      .product-card-cta {
        padding: 16px 24px;
        font-size: 16px;
        font-weight: 700;
      }

      /* Fix How It Works overflow on cards */
      .card-hiw-premium {
        padding: 14px 16px;
        margin-top: 14px;
      }

      .card-hiw-header {
        flex-direction: column;
        gap: 4px;
        text-align: center;
        margin-bottom: 12px;
        padding-bottom: 8px;
      }

      .card-hiw-title {
        font-size: 16px;
      }

      .card-hiw-subtitle {
        font-size: 16px;
      }

      .card-hiw-steps {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .card-hiw-step {
        gap: 6px;
      }

      .card-hiw-step .step-num {
        width: 22px;
        height: 22px;
        font-size: 16px;
      }

      .card-hiw-step span:last-child {
        font-size: 16px;
      }

      .product-filter-tabs {
        gap: 12px;
        padding: 0 16px;
        flex-wrap: wrap;
        justify-content: center;
      }

      .product-filter-tab {
        padding: 10px 16px;
        font-size: 16px;
      }

      /* Qty dropdown on cards - mobile */
      .qty-dropdown {
        font-size: 16px;
        padding: 8px 12px;
      }
    }

    /* ========================================
       PRODUCT DETAIL MODAL - PREMIUM DESIGN
    ======================================== */
    .product-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      overflow-y: auto;
    }

    .product-modal.active {
      opacity: 1;
      visibility: visible;
    }

    .product-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.90);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .product-modal-content {
      position: relative;
      background: #fff;
      border-radius: 20px;
      max-width: 900px;
      width: 100%;
      max-height: calc(100vh - 32px);
      overflow: hidden;
      display: flex;
      flex-direction: row;
      box-shadow:
        0 25px 60px -12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
      transform: scale(0.95) translateY(20px);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .product-modal.active .product-modal-content {
      transform: scale(1) translateY(0);
    }

    .product-modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 36px;
      height: 36px;
      border: none;
      background: rgba(0, 0, 0, 0.08);
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #555;
      transition: all 0.2s ease;
      z-index: 20;
    }

    .product-modal-close:hover {
      background: rgba(0, 0, 0, 0.12);
      color: #333;
    }

    .product-modal-image {
      flex: 0 0 340px;
      background: linear-gradient(180deg, #f8f9fa 0%, #f0f1f4 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 32px;
      border-radius: 20px 0 0 20px;
    }

    .product-modal-image img {
      max-width: 100%;
      max-height: 280px;
      object-fit: contain;
      filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.15));
    }

    .product-modal-details {
      flex: 1;
      padding: 32px;
      overflow-y: auto;
      max-height: calc(100vh - 32px);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .product-modal-details .product-badge {
      align-self: flex-start;
      margin-bottom: 0;
    }

    .product-modal-details h2 {
      font-family: var(--font-display);
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--text);
      margin: 0;
      letter-spacing: -0.02em;
    }

    .product-modal-benefit {
      font-family: var(--font-display);
      font-size: 1rem;
      font-style: italic;
      color: #666;
      margin: 0;
      line-height: 1.5;
    }

    .product-modal-formula {
      background: #f8f9fa;
      border-radius: 10px;
      padding: 14px 16px;
    }

    .product-modal-formula-title {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #888;
      margin-bottom: 6px;
    }

    .product-modal-formula-content {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.5;
    }

    .product-modal-specs {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px 16px;
      padding: 16px;
      background: #f8f9fa;
      border-radius: 12px;
    }

    .product-modal-spec {
      font-size: 16px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .product-modal-spec-label {
      color: #888;
      font-weight: 500;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .product-modal-spec-value {
      color: var(--text);
      font-weight: 600;
    }

    .product-modal-pricing {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }

    .product-modal-pricing .price {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.02em;
    }

    .product-modal-pricing .per {
      font-size: 16px;
      color: #888;
    }

    .product-modal-details .btn-primary {
      width: 100%;
      padding: 16px;
      font-size: 16px;
    }

    .product-modal-guarantee {
      font-size: 16px;
      color: #666;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 0;
    }

    .product-modal-guarantee svg {
      color: var(--success);
      flex-shrink: 0;
    }

    /* Modal Quantity Section - Premium Design */
    .product-modal-qty-section {
      padding: 16px;
      background: linear-gradient(135deg, #f0f4ff 0%, #fff 100%);
      border-radius: 12px;
      border: 1px solid #e0e5f0;
    }

    .product-modal-qty-section .qty-label {
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--primary);
      margin-bottom: 12px;
      text-align: center;
    }

    .modal-qty-options {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .modal-qty-option {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background: #fff;
      border: 2px solid #e8e8e8;
      border-radius: 12px;
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .modal-qty-option:hover {
      border-color: var(--cta);
      box-shadow: 0 4px 16px rgba(22, 163, 74, 0.12);
      transform: translateY(-2px);
    }

    .modal-qty-option.selected {
      border-color: var(--cta);
      background: linear-gradient(135deg, #f0f4ff 0%, #fff 100%);
      box-shadow: 0 0 0 2px var(--cta), 0 4px 16px rgba(22, 163, 74, 0.15);
    }

    .modal-qty-option.best-value {
      border-color: var(--accent);
      background: linear-gradient(135deg, #fffbf0 0%, #fff 100%);
    }

    .modal-qty-option.best-value.selected {
      box-shadow: 0 0 0 2px var(--accent), 0 4px 16px rgba(245, 158, 11, 0.2);
    }

    .modal-qty-option .qty-info {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .modal-qty-option .qty-count {
      font-weight: 800;
      font-size: 16px;
      color: var(--primary);
      min-width: 60px;
    }

    .modal-qty-option .qty-price {
      font-weight: 800;
      font-size: 16px;
      color: var(--cta);
    }

    .modal-qty-option .qty-per {
      font-size: 16px;
      color: #666;
      font-weight: 500;
    }

    .modal-qty-option .qty-pricing {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .modal-qty-option .qty-label {
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #888;
    }

    .modal-qty-option .qty-total {
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
      background: #f5f5f5;
      padding: 4px 10px;
      border-radius: 6px;
    }

    .modal-qty-option .savings-badge {
      background: linear-gradient(135deg, #b8860b, #d4a017);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 20px;
      letter-spacing: 0.03em;
    }

    .modal-buy-btn {
      padding: 14px 28px;
      background: var(--cta);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-weight: 700;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
    }

    .modal-buy-btn:hover {
      background: var(--cta-hover);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35);
    }

    /* Modal Disclaimer */
    .modal-disclaimer {
      display: flex;
      gap: 12px;
      padding: 14px 16px;
      background: #fef3cd;
      border: 1px solid #ffc107;
      border-radius: 10px;
      margin: 16px 0;
      align-items: flex-start;
    }

    .modal-disclaimer .disclaimer-icon {
      color: #856404;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .modal-disclaimer .disclaimer-text {
      font-size: 16px;
      line-height: 1.5;
      color: #856404;
    }

    .modal-disclaimer .disclaimer-text strong {
      font-weight: 700;
    }

    /* Modal Safety Info */
    .modal-safety-info {
      margin: 12px 0;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      overflow: hidden;
    }

    .modal-safety-info summary {
      padding: 12px 16px;
      background: #f5f5f5;
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .modal-safety-info summary::-webkit-details-marker {
      display: none;
    }

    .modal-safety-info summary::after {
      content: '+';
      font-size: 16px;
      font-weight: 400;
      color: #666;
    }

    .modal-safety-info[open] summary::after {
      content: '−';
    }

    .modal-safety-info .safety-content {
      padding: 14px 16px;
      background: #fff;
      font-size: 16px;
      line-height: 1.6;
      color: #555;
    }

    .modal-safety-info .safety-content p {
      margin: 0 0 10px;
    }

    .modal-safety-info .safety-content p:last-child {
      margin-bottom: 0;
    }

    /* Modal Ingredients Section */
    .modal-ingredients-section {
      padding: 16px;
      background: #f8f9fa;
      border-radius: 10px;
    }

    .modal-ingredients-section .ingredients-header {
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 12px;
      text-align: center;
    }

    .ingredient-cards {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .ingredient-card {
      display: flex;
      gap: 10px;
      padding: 10px 12px;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #eee;
      align-items: flex-start;
    }

    .ingredient-card .ingredient-dosage {
      font-weight: 700;
      font-size: 16px;
      color: var(--cta);
      min-width: 80px;
      flex-shrink: 0;
    }

    .ingredient-card .ingredient-benefit {
      font-size: 16px;
      line-height: 1.4;
      color: #555;
    }

    /* Modal Testimonials */
    .modal-testimonials {
      margin: 0;
    }

    .modal-testimonials .testimonials-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 10px;
      text-align: center;
    }

    .testimonials-scroll {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 8px;
      margin: 0 -20px;
      padding-left: 20px;
      padding-right: 20px;
    }

    .testimonials-scroll::-webkit-scrollbar {
      height: 4px;
    }

    .testimonials-scroll::-webkit-scrollbar-track {
      background: #f0f0f0;
      border-radius: 2px;
    }

    .testimonials-scroll::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 2px;
    }

    .testimonial-card-mini {
      min-width: 260px;
      max-width: 280px;
      scroll-snap-align: start;
      background: #fff;
      border: 1px solid #eee;
      border-radius: 12px;
      padding: 16px;
      flex-shrink: 0;
    }

    .testimonial-card-mini .testimonial-stars {
      color: #ffc107;
      font-size: 16px;
      margin-bottom: 8px;
    }

    .testimonial-card-mini .testimonial-text {
      font-size: 16px;
      line-height: 1.5;
      color: #444;
      margin-bottom: 10px;
      font-style: italic;
    }

    .testimonial-card-mini .testimonial-author {
      font-size: 16px;
      font-weight: 600;
      color: #888;
    }

    /* Modal Actions */
    .product-modal-actions {
      margin: 0;
      text-align: center;
    }

    .product-modal-actions .btn-secondary {
      background: transparent;
      color: var(--primary);
      border: 2px solid var(--primary);
      width: 100%;
    }

    .product-modal-actions .btn-secondary:hover {
      background: var(--primary);
      color: #fff;
    }

    /* Modal How It Works */
    .product-modal-how-it-works {
      padding: 14px;
      background: linear-gradient(135deg, #f0f4ff 0%, #fff5f0 100%);
      border-radius: 10px;
    }

    .product-modal-how-it-works .hiw-title {
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--primary);
      margin-bottom: 10px;
      text-align: center;
    }

    /* ========================================
       PRODUCT MODAL - HOW IT WORKS (PREMIUM)
    ======================================== */
    .modal-hiw-premium {
      padding: 20px;
      background: linear-gradient(135deg, #1a237e 0%, #0d1442 100%);
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .modal-hiw-header {
      text-align: center;
      margin-bottom: 16px;
    }

    .modal-hiw-title {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 6px;
    }

    .modal-hiw-subtitle {
      font-size: 16px;
      font-weight: 500;
      color: var(--accent);
    }

    .modal-hiw-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .modal-hiw-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
    }

    .modal-step-num {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: var(--cta);
      color: #fff;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
    }

    .modal-step-label {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      line-height: 1.3;
    }

    @media (max-width: 480px) {
      .modal-hiw-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }

      .modal-hiw-title {
        font-size: 16px;
      }

      .modal-step-num {
        width: 36px;
        height: 36px;
        font-size: 16px;
      }

      .modal-step-label {
        font-size: 16px;
      }
    }

    .hiw-steps-mini {
      display: flex;
      justify-content: space-around;
      gap: 8px;
    }

    .hiw-step-mini {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      font-size: 16px;
      color: var(--text-secondary);
      gap: 4px;
    }

    .hiw-step-mini .step-num {
      width: 24px;
      height: 24px;
      background: var(--primary);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 16px;
    }

    /* ========================================
       REDESIGNED MODAL STYLES
    ======================================== */

    /* Redesigned Modal Container */
    .product-modal-content--redesigned {
      flex-direction: column;
      max-width: 520px;
      max-height: calc(100vh - 32px);
    }

    .product-modal-body {
      padding: 24px 28px 28px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Hero Image - Centered with Glow */
    .product-modal-hero {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 24px;
      background: radial-gradient(ellipse at center, rgba(22, 163, 74, 0.08) 0%, transparent 70%);
      border-radius: 16px;
      margin: 0 -4px;
    }

    .product-modal-hero-img {
      max-width: 220px;
      max-height: 220px;
      object-fit: contain;
      filter: drop-shadow(0 8px 32px rgba(22, 163, 74, 0.25));
      transition: transform 0.3s ease;
    }

    .product-modal-hero-img:hover {
      transform: scale(1.03);
    }

    /* Product Info Section */
    .product-modal-info {
      text-align: center;
    }

    .product-modal-info .product-badge {
      margin-bottom: 8px;
    }

    .product-modal-info h2 {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text);
      margin: 0 0 6px;
      letter-spacing: -0.02em;
    }

    .product-modal-info .product-modal-benefit {
      font-size: 0.95rem;
      color: #666;
      font-style: italic;
      margin: 0;
    }

    /* Horizontal Spec Pills */
    .product-modal-spec-pills {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .spec-pill {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 14px;
      background: #f8f9fa;
      border-radius: 20px;
      border: 1px solid #eee;
      min-width: 70px;
    }

    .spec-pill-label {
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #888;
      margin-bottom: 2px;
    }

    .spec-pill-value {
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
      white-space: nowrap;
    }

    /* Ingredients Accordion */
    .modal-ingredients-accordion {
      border: 1px solid #e8e8e8;
      border-radius: 10px;
      overflow: hidden;
    }

    .modal-ingredients-accordion summary {
      padding: 12px 16px;
      background: #f8f9fa;
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .modal-ingredients-accordion summary::-webkit-details-marker {
      display: none;
    }

    .modal-ingredients-accordion summary::after {
      content: '+';
      font-size: 16px;
      font-weight: 400;
      color: #888;
    }

    .modal-ingredients-accordion[open] summary::after {
      content: '−';
    }

    .modal-ingredients-accordion .ingredient-cards {
      padding: 12px;
      background: #fff;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* Redesigned Quantity Selector with Savings */
    .product-modal-content--redesigned .product-modal-qty-section {
      padding: 16px;
      background: linear-gradient(135deg, #f8faff 0%, #fff 100%);
      border-radius: 12px;
      border: 1px solid #e8ecf4;
    }

    .product-modal-content--redesigned .qty-label {
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--primary);
      margin-bottom: 12px;
      text-align: center;
    }

    .product-modal-content--redesigned .modal-qty-options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .product-modal-content--redesigned .modal-qty-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 14px 10px;
      background: #fff;
      border: 2px solid #e8e8e8;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
      gap: 6px;
    }

    .product-modal-content--redesigned .modal-qty-option:hover {
      border-color: var(--cta);
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.1);
    }

    .product-modal-content--redesigned .modal-qty-option.selected {
      border-color: var(--cta);
      background: linear-gradient(135deg, #f0f4ff 0%, #fff 100%);
      box-shadow: 0 0 0 2px var(--cta), 0 4px 12px rgba(22, 163, 74, 0.15);
    }

    .product-modal-content--redesigned .modal-qty-option .qty-count {
      font-weight: 800;
      font-size: 16px;
      color: var(--primary);
    }

    .product-modal-content--redesigned .modal-qty-option .qty-price {
      font-weight: 700;
      font-size: 16px;
      color: var(--cta);
    }

    .product-modal-content--redesigned .modal-qty-option .qty-savings {
      font-size: 16px;
      font-weight: 700;
      color: #22c55e;
      background: rgba(34, 197, 94, 0.1);
      padding: 2px 8px;
      border-radius: 10px;
    }

    .product-modal-content--redesigned .modal-qty-option.best-value {
      border-color: #b8860b;
      background: linear-gradient(135deg, #fffbf0 0%, #fff 100%);
      position: relative;
    }

    .product-modal-content--redesigned .modal-qty-option.best-value::before {
      content: 'Best Value';
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      background: linear-gradient(135deg, #b8860b, #d4a017);
      color: #fff;
      padding: 2px 8px;
      border-radius: 8px;
      white-space: nowrap;
    }

    /* Hide the inline Buy buttons on redesigned qty options */
    .product-modal-content--redesigned .modal-qty-option .modal-buy-btn {
      display: none;
    }

    /* Stacked CTA Buttons */
    .product-modal-cta-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .modal-primary-cta {
      width: 100%;
      padding: 16px 24px;
      font-size: 16px;
      font-weight: 700;
      background: var(--cta);
      color: #fff;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(22, 163, 74, 0.3);
      transition: all 0.2s ease;
    }

    .modal-primary-cta:hover {
      background: var(--cta-hover);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4);
    }

    .modal-secondary-cta {
      font-size: 16px;
      font-weight: 500;
      color: #666;
      text-decoration: none;
      padding: 8px 16px;
      transition: color 0.2s ease;
    }

    .modal-secondary-cta:hover {
      color: var(--cta);
      text-decoration: underline;
    }

    /* How It Works - Collapsed Accordion */
    .modal-hiw-collapsed {
      border: 1px solid #e8e8e8;
      border-radius: 10px;
      overflow: hidden;
    }

    .modal-hiw-collapsed summary {
      padding: 12px 16px;
      background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .modal-hiw-collapsed summary::-webkit-details-marker {
      display: none;
    }

    .hiw-summary-text {
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
      white-space: nowrap;
    }

    .hiw-summary-steps {
      font-size: 16px;
      color: #888;
      flex: 1;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .modal-hiw-collapsed summary::after {
      content: '+';
      font-size: 16px;
      font-weight: 400;
      color: #888;
      flex-shrink: 0;
    }

    .modal-hiw-collapsed[open] summary::after {
      content: '−';
    }

    .modal-hiw-collapsed[open] .hiw-summary-steps {
      display: none;
    }

    .hiw-expanded-content {
      padding: 14px 16px;
      background: #fff;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .hiw-step-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 16px;
      color: #555;
    }

    .hiw-step-num {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      background: var(--cta);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* Softened Disclaimer */
    .modal-disclaimer--soft {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: #f8f9fa;
      border: none;
      border-radius: 8px;
      margin: 0;
    }

    .disclaimer-icon-soft {
      color: #999;
      flex-shrink: 0;
    }

    .disclaimer-text-soft {
      font-size: 16px;
      color: #888;
      line-height: 1.4;
    }

    /* Redesigned Modal - Pricing centered */
    .product-modal-content--redesigned .product-modal-pricing {
      justify-content: center;
      margin: 0;
    }

    /* Modal Mobile Responsive - OPTIMIZED FOR READABILITY */
    @media (max-width: 768px) {
      .product-modal {
        padding: 0;
        align-items: flex-end;
      }

      .product-modal-content {
        flex-direction: column;
        max-height: 95vh;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        margin: 0;
      }

      .product-modal-image {
        flex: 0 0 auto;
        padding: 24px;
        border-radius: 24px 24px 0 0;
        min-height: 180px;
      }

      .product-modal-image img {
        max-height: 160px;
      }

      .product-modal-close {
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
        font-size: 28px;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
      }

      .product-modal-details {
        padding: 24px;
        max-height: none;
        gap: 18px;
      }

      .product-modal-details h2 {
        font-size: 1.5rem;
      }

      .product-modal-benefit {
        font-size: 1.1rem;
      }

      .product-modal-pricing .price {
        font-size: 2.25rem;
      }

      .product-modal-specs {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
        gap: 12px 16px;
      }

      .product-modal-spec-label {
        font-size: 16px;
      }

      .product-modal-spec-value {
        font-size: 16px;
      }

      .product-modal-qty-section {
        padding: 20px;
      }

      .modal-qty-options {
        gap: 12px;
      }

      .modal-qty-option {
        padding: 16px 18px;
        flex-wrap: wrap;
        gap: 10px;
      }

      .modal-qty-option .qty-count {
        font-size: 16px;
        min-width: 50px;
      }

      .modal-qty-option .qty-price {
        font-size: 16px;
      }

      .modal-hiw-premium {
        padding: 20px;
        margin: 0;
      }

      .modal-hiw-title {
        font-size: 16px;
      }

      .modal-hiw-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }

      .modal-step-num {
        width: 36px;
        height: 36px;
        font-size: 16px;
      }

      .modal-step-label {
        font-size: 16px;
      }

      .modal-ingredients-section {
        padding: 16px;
        margin: 0;
      }

      .ingredient-card {
        padding: 14px 16px;
        gap: 12px;
      }

      .ingredient-card .ingredient-dosage {
        font-size: 16px;
        min-width: 80px;
      }

      .ingredient-card .ingredient-benefit {
        font-size: 16px;
      }

      .modal-disclaimer {
        padding: 14px;
        margin: 0;
      }

      .modal-disclaimer .disclaimer-text {
        font-size: 16px;
      }

      .modal-safety-info {
        margin: 0;
      }

      .modal-testimonials {
        margin: 0;
      }

      .testimonial-card-mini {
        min-width: 260px;
        max-width: 280px;
        padding: 16px;
      }

      .testimonial-card-mini .testimonial-text {
        font-size: 16px;
        line-height: 1.5;
      }

      .testimonial-card-mini .testimonial-author {
        font-size: 16px;
      }

      .product-modal-actions {
        margin: 0;
      }

      .product-modal-actions .btn-large {
        padding: 18px 24px;
        font-size: 16px;
      }

      /* Redesigned Modal - Mobile OPTIMIZED */
      .product-modal-content--redesigned {
        max-width: 100%;
        border-radius: 24px 24px 0 0;
      }

      .product-modal-body {
        padding: 16px 20px 28px;
        gap: 20px;
      }

      .product-modal-hero {
        padding: 20px 16px;
      }

      .product-modal-hero-img {
        max-width: 240px;
        max-height: 240px;
      }

      /* Hide duplicate product name since it's in the image now */
      .product-modal-info h2 {
        display: none;
      }

      .product-modal-info .product-modal-benefit {
        font-size: 1.15rem;
        color: #444;
        font-style: italic;
        margin-top: 4px;
      }

      /* Spec Pills - MUCH BIGGER for mobile */
      .product-modal-spec-pills {
        gap: 10px;
        padding: 8px 0;
      }

      .spec-pill {
        padding: 12px 16px;
        min-width: 75px;
        border-radius: 16px;
      }

      .spec-pill-label {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 4px;
      }

      .spec-pill-value {
        font-size: 16px;
        font-weight: 800;
      }

      /* Quantity Section - BIGGER */
      .product-modal-content--redesigned .product-modal-qty-section {
        padding: 20px;
      }

      .product-modal-content--redesigned .qty-label {
        font-size: 16px;
        margin-bottom: 16px;
      }

      .product-modal-content--redesigned .modal-qty-options {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
      }

      .product-modal-content--redesigned .modal-qty-option {
        padding: 18px 12px;
        gap: 8px;
        border-radius: 14px;
      }

      .product-modal-content--redesigned .modal-qty-option .qty-count {
        font-size: 26px;
        font-weight: 800;
      }

      .product-modal-content--redesigned .modal-qty-option .qty-price {
        font-size: 16px;
        font-weight: 700;
      }

      .product-modal-content--redesigned .modal-qty-option .qty-savings {
        font-size: 16px;
        padding: 4px 10px;
      }

      .product-modal-content--redesigned .modal-qty-option.best-value::before {
        font-size: 16px;
        padding: 4px 12px;
        top: -10px;
      }

      /* Main Pricing - BIGGER */
      .product-modal-content--redesigned .product-modal-pricing {
        padding: 8px 0;
      }

      .product-modal-content--redesigned .product-modal-pricing .price {
        font-size: 2.75rem;
        font-weight: 800;
      }

      .product-modal-content--redesigned .product-modal-pricing .per {
        font-size: 1.25rem;
      }

      /* CTA Button - BIGGER touch target */
      .modal-primary-cta {
        padding: 20px 28px;
        font-size: 22px;
        border-radius: 14px;
      }

      .modal-secondary-cta {
        font-size: 16px;
        padding: 12px 20px;
      }

      /* Guarantee text */
      .product-modal-guarantee {
        font-size: 16px;
      }

      /* Testimonials - Bigger */
      .modal-testimonials h3 {
        font-size: 16px;
        margin-bottom: 12px;
      }

      /* Accordion text */
      .modal-ingredients-accordion summary {
        font-size: 16px;
        padding: 16px 20px;
      }

      .hiw-summary-text {
        font-size: 16px;
      }

      .hiw-summary-steps {
        font-size: 16px;
      }

      .hiw-step-item {
        font-size: 16px;
      }

      /* Disclaimer */
      .disclaimer-text-soft {
        font-size: 16px;
      }
    }

    /* Extra small mobile */
    @media (max-width: 400px) {
      .product-modal-details {
        padding: 20px 16px;
      }

      .product-modal-specs {
        grid-template-columns: 1fr 1fr;
      }

      .modal-hiw-steps {
        grid-template-columns: repeat(2, 1fr);
      }

      .product-modal-hero-img {
        max-width: 200px;
        max-height: 200px;
      }

      .product-modal-content--redesigned .modal-qty-option .qty-count {
        font-size: 16px;
      }

      .product-modal-content--redesigned .modal-qty-option .qty-price {
        font-size: 16px;
      }

      .spec-pill {
        padding: 10px 12px;
        min-width: 70px;
      }

      .spec-pill-value {
        font-size: 16px;
      }
    }

    /* Reduced Motion Support */
    @media (prefers-reduced-motion: reduce) {

      .product-card,
      .product-card-image img,
      .product-badge,
      .product-modal,
      .product-modal-content {
        animation: none !important;
        transition: opacity 0.2s ease !important;
        transform: none !important;
      }

      .product-card.visible {
        opacity: 1;
        transform: none;
      }

      .product-card:hover {
        transform: none;
      }
    }

    /* ========================================
       TESTIMONIALS
    ======================================== */
    .testimonial-featured {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 48px;
      margin: 48px 0;
      text-align: center;
    }

    .testimonial-featured .quote {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 3vw, 1.625rem);
      color: var(--text);
      line-height: 1.55;
      margin-bottom: var(--space-5);
      font-style: italic;
    }

    .testimonial-featured .author {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
    }

    .testimonial-featured .meta {
      font-size: 16px;
      color: var(--text);
    }

    .testimonials-scroll-wrapper {
      overflow: hidden;
      position: relative;
      padding: 10px 0;
    }

    .testimonials-scroll-wrapper::before,
    .testimonials-scroll-wrapper::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 10;
      pointer-events: none;
    }

    .testimonials-scroll-wrapper::before {
      left: 0;
      background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
    }

    .testimonials-scroll-wrapper::after {
      right: 0;
      background: linear-gradient(90deg, transparent 0%, var(--bg) 100%);
    }

    .testimonials-track {
      display: flex;
      gap: 20px;
      animation: scrollTestimonials 90s linear infinite;
      width: max-content;
    }

    .testimonials-track:hover {
      animation-play-state: paused;
    }

    @keyframes scrollTestimonials {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .testimonial-card {
      background: var(--bg-light);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 24px;
      flex-shrink: 0;
      width: 340px;
    }

    .testimonial-card .stars {
      color: #F59E0B;
      font-size: 16px;
      margin-bottom: 12px;
    }

    .testimonial-card .text {
      font-size: 16px;
      color: var(--text);
      line-height: 1.65;
      margin-bottom: 16px;
    }

    .testimonial-card .author-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .testimonial-card .avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 16px;
    }

    .testimonial-card .name {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
    }

    .testimonial-card .location {
      font-size: 16px;
      color: var(--text);
    }

    .testimonial-card .verified {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 16px;
      color: var(--success);
    }

    /* ========================================
       GUARANTEE
    ======================================== */
    .guarantee-section {
      padding: 60px 0;
      background: var(--bg-warm);
    }

    .guarantee-box {
      max-width: 700px;
      margin: 0 auto;
      text-align: center;
    }

    .guarantee-badge {
      width: 100px;
      height: 100px;
      background: linear-gradient(135deg, var(--accent) 0%, #003ACC 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
    }

    .guarantee-badge svg {
      width: 50px;
      height: 50px;
      color: #fff;
    }

    .guarantee-title {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 4vw, 2.25rem);
      font-weight: 600;
      color: var(--text);
      margin-bottom: var(--space-4);
      letter-spacing: -0.01em;
    }

    .guarantee-text {
      font-size: var(--text-lg);
      color: var(--text);
      line-height: 1.7;
      margin-bottom: var(--space-6);
    }

    /* ========================================
       FAQ
    ======================================== */
    .faq-section {
      padding: 60px 0;
      background: var(--bg);
    }

    .faq-grid {
      max-width: 800px;
      margin: 0 auto;
    }

    .faq-item {
      border-bottom: 1px solid var(--border);
      padding: 28px 0;
    }

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

    .faq-answer {
      font-size: var(--text-base);
      color: var(--text);
      line-height: 1.75;
    }

    /* ========================================
       FINAL CTA
    ======================================== */
    .final-cta {
      padding: var(--space-16) 0;
      background: var(--primary);
      text-align: center;
    }

    .final-cta-title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 600;
      color: #fff;
      margin-bottom: var(--space-4);
      letter-spacing: -0.02em;
      text-wrap: balance;
    }

    .final-cta-subtitle {
      font-size: var(--text-lg);
      color: rgba(255, 255, 255, 0.85);
      max-width: 520px;
      margin: 0 auto var(--space-6);
      line-height: 1.65;
    }

    .final-cta .btn-primary {
      background: #16a34a;
      padding: var(--space-5) var(--space-10);
      font-size: 1rem;
      box-shadow: 0 6px 20px rgba(22, 163, 74, 0.5);
    }

    .final-cta .btn-primary:hover {
      background: #15803d;
      box-shadow: 0 8px 28px rgba(22, 163, 74, 0.6);
    }

    .final-trust {
      margin-top: 36px;
      display: flex;
      justify-content: center;
      gap: 32px;
      flex-wrap: wrap;
    }

    .final-trust span {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.85);
    }

    .final-trust svg {
      color: var(--accent);
    }

    /* ========================================
       FOOTER
    ======================================== */
    footer {
      background: #0a0a0a;
      padding: 64px 0 100px;
      /* Extra bottom padding for floating CTA clearance */
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .footer-main {
      display: flex;
      justify-content: space-between;
      gap: 64px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .footer-brand {
      max-width: 280px;
      flex-shrink: 0;
    }

    .footer-logo {
      display: inline-block;
      margin-bottom: 16px;
    }

    .footer-logo img {
      opacity: 0.9;
      transition: opacity 0.2s;
    }

    .footer-logo:hover img {
      opacity: 1;
    }

    .footer-tagline {
      font-size: 16px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.5);
      margin-bottom: 20px;
    }

    .legitscript-link {
      display: inline-block;
      opacity: 0.7;
      transition: opacity 0.2s, transform 0.2s;
    }

    .legitscript-link:hover {
      opacity: 1;
      transform: scale(1.02);
    }

    .footer-nav {
      display: flex;
      gap: 64px;
    }

    .footer-col h4 {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.4);
      margin-bottom: 16px;
    }

    .footer-col a {
      display: block;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      padding: 6px 0;
      transition: color 0.2s;
    }

    .footer-col a:hover,
    .footer-col a:focus {
      color: #fff;
    }

    .footer-bottom {
      padding-top: 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      text-align: center;
    }

    .footer-copy {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.4);
    }

    .footer-disclaimers {
      max-width: 900px;
      margin-top: 8px;
    }

    .footer-disclaimers p {
      font-size: 16px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.35);
      margin-bottom: 12px;
    }

    .footer-disclaimers p strong {
      color: rgba(255, 255, 255, 0.5);
    }

    .footer-disclaimer-final {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 16px !important;
      color: rgba(255, 255, 255, 0.4) !important;
    }

    /* ========================================
       DOT SCROLL GUIDE
    ======================================== */
    .scroll-guide {
      position: fixed;
      right: 20px;
      bottom: 110px;
      width: 70px;
      height: 90px;
      cursor: pointer;
      z-index: 99;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .scroll-guide.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Background dot field */
    .scroll-guide::before {
      content: '';
      position: absolute;
      inset: -15px;
      background-image: radial-gradient(circle, rgba(0, 81, 255, 0.15) 1.5px, transparent 1.5px);
      background-size: 12px 12px;
      border-radius: 12px;
      opacity: 0.6;
      z-index: 0;
    }

    /* Soft glow behind */
    .scroll-guide::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background: radial-gradient(ellipse at center, rgba(0, 81, 255, 0.12) 0%, transparent 70%);
      filter: blur(10px);
      z-index: 0;
    }

    /* Dot container */
    .scroll-guide .dot-chevron {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .scroll-guide .dot {
      position: absolute;
      width: 6px;
      height: 6px;
      background: rgba(0, 81, 255, 0.7);
      border-radius: 50%;
      transition: all 0.4s ease;
    }

    .scroll-guide:hover .dot {
      background: rgba(0, 81, 255, 1);
      box-shadow: 0 0 10px rgba(0, 81, 255, 0.6);
    }

    /* === DOWN ARROW STATE (default) === */
    /* Row 1 - top */
    .scroll-guide .dot:nth-child(1) {
      left: 8px;
      top: 8px;
      animation: dotFloat 2.5s ease-in-out infinite 0s;
    }

    .scroll-guide .dot:nth-child(2) {
      right: 8px;
      top: 8px;
      animation: dotFloat 2.5s ease-in-out infinite 0.1s;
    }

    /* Row 2 */
    .scroll-guide .dot:nth-child(3) {
      left: 16px;
      top: 22px;
      animation: dotFloat 2.5s ease-in-out infinite 0.15s;
    }

    .scroll-guide .dot:nth-child(4) {
      right: 16px;
      top: 22px;
      animation: dotFloat 2.5s ease-in-out infinite 0.25s;
    }

    /* Row 3 */
    .scroll-guide .dot:nth-child(5) {
      left: 24px;
      top: 36px;
      animation: dotFloat 2.5s ease-in-out infinite 0.3s;
    }

    .scroll-guide .dot:nth-child(6) {
      right: 24px;
      top: 36px;
      animation: dotFloat 2.5s ease-in-out infinite 0.4s;
    }

    /* Row 4 - tip */
    .scroll-guide .dot:nth-child(7) {
      left: 50%;
      margin-left: -3px;
      top: 50px;
      animation: dotFloat 2.5s ease-in-out infinite 0.5s;
    }

    /* Trailing dots */
    .scroll-guide .dot:nth-child(8) {
      left: 50%;
      margin-left: -3px;
      top: 62px;
      opacity: 0.4;
      animation: dotFloat 2.5s ease-in-out infinite 0.6s;
    }

    .scroll-guide .dot:nth-child(9) {
      left: 50%;
      margin-left: -3px;
      top: 74px;
      opacity: 0.2;
      animation: dotFloat 2.5s ease-in-out infinite 0.7s;
    }

    @keyframes dotFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(5px);
      }
    }

    /* === AT PRODUCTS STATE - Pulsing "explore" pattern === */
    .scroll-guide.at-products .dot {
      animation: none;
    }

    /* Transform to a pulsing cluster pattern */
    .scroll-guide.at-products .dot:nth-child(1) {
      left: 20px;
      top: 25px;
      animation: dotPulse 2s ease-in-out infinite 0s;
    }

    .scroll-guide.at-products .dot:nth-child(2) {
      right: 20px;
      top: 25px;
      animation: dotPulse 2s ease-in-out infinite 0.2s;
    }

    .scroll-guide.at-products .dot:nth-child(3) {
      left: 12px;
      top: 40px;
      animation: dotPulse 2s ease-in-out infinite 0.3s;
    }

    .scroll-guide.at-products .dot:nth-child(4) {
      right: 12px;
      top: 40px;
      animation: dotPulse 2s ease-in-out infinite 0.4s;
    }

    .scroll-guide.at-products .dot:nth-child(5) {
      left: 20px;
      top: 55px;
      animation: dotPulse 2s ease-in-out infinite 0.5s;
    }

    .scroll-guide.at-products .dot:nth-child(6) {
      right: 20px;
      top: 55px;
      animation: dotPulse 2s ease-in-out infinite 0.6s;
    }

    .scroll-guide.at-products .dot:nth-child(7) {
      left: 50%;
      margin-left: -3px;
      top: 40px;
      width: 8px;
      height: 8px;
      margin-left: -4px;
      animation: dotPulseCenter 2s ease-in-out infinite;
    }

    .scroll-guide.at-products .dot:nth-child(8) {
      opacity: 0;
    }

    .scroll-guide.at-products .dot:nth-child(9) {
      opacity: 0;
    }

    @keyframes dotPulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 0.5;
      }

      50% {
        transform: scale(1.3);
        opacity: 1;
      }
    }

    @keyframes dotPulseCenter {

      0%,
      100% {
        transform: scale(1);
        opacity: 0.8;
        box-shadow: 0 0 0 rgba(0, 81, 255, 0);
      }

      50% {
        transform: scale(1.4);
        opacity: 1;
        box-shadow: 0 0 15px rgba(0, 81, 255, 0.5);
      }
    }

    /* === UP ARROW STATE (past products/footer) === */
    .scroll-guide.up .dot:nth-child(1) {
      left: 8px;
      top: 74px;
      animation: dotFloatUp 2.5s ease-in-out infinite 0s;
    }

    .scroll-guide.up .dot:nth-child(2) {
      right: 8px;
      top: 74px;
      animation: dotFloatUp 2.5s ease-in-out infinite 0.1s;
    }

    .scroll-guide.up .dot:nth-child(3) {
      left: 16px;
      top: 60px;
      animation: dotFloatUp 2.5s ease-in-out infinite 0.15s;
    }

    .scroll-guide.up .dot:nth-child(4) {
      right: 16px;
      top: 60px;
      animation: dotFloatUp 2.5s ease-in-out infinite 0.25s;
    }

    .scroll-guide.up .dot:nth-child(5) {
      left: 24px;
      top: 46px;
      animation: dotFloatUp 2.5s ease-in-out infinite 0.3s;
    }

    .scroll-guide.up .dot:nth-child(6) {
      right: 24px;
      top: 46px;
      animation: dotFloatUp 2.5s ease-in-out infinite 0.4s;
    }

    .scroll-guide.up .dot:nth-child(7) {
      left: 50%;
      margin-left: -3px;
      top: 32px;
      animation: dotFloatUp 2.5s ease-in-out infinite 0.5s;
    }

    .scroll-guide.up .dot:nth-child(8) {
      left: 50%;
      margin-left: -3px;
      top: 20px;
      opacity: 0.4;
      animation: dotFloatUp 2.5s ease-in-out infinite 0.6s;
    }

    .scroll-guide.up .dot:nth-child(9) {
      left: 50%;
      margin-left: -3px;
      top: 8px;
      opacity: 0.2;
      animation: dotFloatUp 2.5s ease-in-out infinite 0.7s;
    }

    @keyframes dotFloatUp {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-5px);
      }
    }

    @media (max-width: 768px) {
      .scroll-guide {
        right: 12px;
        bottom: 100px;
        width: 55px;
        height: 75px;
      }

      .scroll-guide .dot {
        width: 5px;
        height: 5px;
      }

      .scroll-guide::before {
        inset: -10px;
        background-size: 10px 10px;
      }
    }

    /* ========================================
       STICKY MOBILE CTA
    ======================================== */
    .sticky-cta {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #000000;
      border-top: 1px solid var(--border);
      padding: 14px 20px;
      z-index: 1000;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
      transform: translateY(100%);
      opacity: 0;
      transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .sticky-cta.visible {
      transform: translateY(0);
      opacity: 1;
    }

    .sticky-cta-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 500px;
      margin: 0 auto;
    }

    .sticky-cta-text {
      display: none;
    }

    .sticky-cta .btn {
      padding: 14px 28px;
      width: 100%;
      max-width: 320px;
      justify-content: center;
    }

    /* ========================================
       TESTIMONIALS - Scrolling Columns (Dark Theme)
    ======================================== */
    .testimonials-section {
      padding: 100px 0;
      background: var(--primary-dark);
      position: relative;
      overflow: hidden;
    }

    .testimonials-section .section-eyebrow {
      color: var(--accent);
    }

    .testimonials-section .section-title {
      color: #fff;
    }

    .testimonials-section .section-subtitle {
      color: rgba(255, 255, 255, 0.7);
    }

    .testimonials-container {
      height: 600px;
      overflow: hidden;
      position: relative;
    }

    .testimonials-fade-mask {
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    }

    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      height: 100%;
    }

    .testimonial-column {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .testimonial-column:hover {
      animation-play-state: paused;
    }

    .testimonial-column.scroll-up {
      animation: testimonialScrollUp 45s linear infinite;
    }

    .testimonial-column.scroll-down {
      animation: testimonialScrollDown 35s linear infinite;
    }

    @keyframes testimonialScrollUp {
      0% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(-50%);
      }
    }

    @keyframes testimonialScrollDown {
      0% {
        transform: translateY(-50%);
      }

      100% {
        transform: translateY(0);
      }
    }

    .testimonial-card-scroll {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 24px;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .testimonial-card-scroll:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(194, 149, 110, 0.3);
    }

    .testimonial-card-scroll .stars {
      color: #F59E0B;
      font-size: 16px;
      margin-bottom: 12px;
      letter-spacing: 2px;
    }

    .testimonial-card-scroll .text {
      color: rgba(255, 255, 255, 0.9);
      font-size: 16px;
      line-height: 1.65;
      margin-bottom: 16px;
    }

    .testimonial-card-scroll .author-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .testimonial-card-scroll .author-photo {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    .testimonial-card-scroll .author-info {
      flex: 1;
    }

    .testimonial-card-scroll .author {
      color: #fff;
      font-weight: 600;
      font-size: 16px;
    }

    .testimonial-card-scroll .location {
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
    }

    .testimonial-card-scroll .verified {
      color: var(--accent);
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 4px;
      margin-top: 4px;
    }

    /* Testimonials Responsive */
    @media (max-width: 1024px) {
      .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .testimonial-column:nth-child(3) {
        display: none;
      }
    }

    @media (max-width: 768px) {
      .testimonials-section {
        padding: 60px 0;
      }

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

      .testimonial-column:nth-child(2),
      .testimonial-column:nth-child(3) {
        display: none;
      }

      .testimonials-container {
        height: 500px;
      }

      .testimonial-card-scroll {
        padding: 20px;
      }

      .testimonial-card-scroll .text {
        font-size: 16px;
      }

      /* Faster scroll animation on mobile (approx 2x faster) */
      .testimonial-column.scroll-up {
        animation-duration: 20s;
      }

      .testimonial-column.scroll-down {
        animation-duration: 15s;
      }

      .testimonials-track {
        animation-duration: 40s;
      }
    }

    /* ========================================
       RESPONSIVE
    ======================================== */
    @media (max-width: 1024px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .hero-content {
        text-align: center;
        order: -1;
      }

      .hero-image {
        order: 1;
      }

      .hero-image img {
        max-width: 400px;
        margin: 0 auto;
        display: block;
      }

      .hero-image .image-placeholder {
        aspect-ratio: 4/5;
        max-width: 400px;
        margin: 0 auto;
      }

      .hero-image::before {
        width: 100%;
        height: 100%;
        opacity: 0.8;
      }

      .hero-title {
        font-size: 48px;
      }

      .hero-subtitle {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        display: inline-block;
      }

      .hero-cta {
        flex-direction: column;
        align-items: center;
      }

      .hero-trust-badges {
        justify-content: center;
      }

      .hero-disclaimer {
        text-align: center;
      }

      .social-proof-inner {
        gap: 12px;
      }

      .ingredient-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 520px;
      }

      .product-header {
        grid-template-columns: 1fr;
      }

      .product-image-large {
        max-width: 300px;
        margin: 0 auto;
      }

      .product-details-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .specs-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .footer-main {
        flex-direction: column;
        gap: 40px;
      }

      .footer-brand {
        max-width: 100%;
      }

      .footer-nav {
        gap: 40px;
      }

      .sticky-cta {
        display: block;
      }

      body {
        padding-bottom: 90px;
      }
    }

    @media (max-width: 768px) {
      .nav-links {
        display: none;
      }

      body {
        font-size: 1.1875rem;
      }

      /* 19px - readable for 50+ */

      /* =====================================================
         MOBILE HERO - Clean layout (no image)
         ===================================================== */
      .hero {
        padding: 0;
        overflow: hidden;
        background: var(--bg);
        position: relative;
        min-height: auto;
        display: flex;
        flex-direction: column;
      }

      .hero::before,
      .hero::after {
        display: none;
      }

      .hero .container {
        padding: 0;
        max-width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 3;
      }

      .hero-grid {
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
      }

      /* ---- IMAGE: Hidden on mobile ---- */
      .hero-image {
        display: none !important;
      }


      /* ---- CONTENT: Floating on top ---- */
      .hero-content {
        display: flex !important;
        flex-direction: column;
        position: relative;
        z-index: 5;
        padding: 16px 20px 0;
        background: transparent;
      }

      .hero-content>* {
        order: unset;
      }

      /* ---- Trust badges: Clean card styling ---- */
      .hero-trust-badges {
        position: relative !important;
        margin: 20px 12px !important;
        padding: 12px 8px !important;
        background: rgba(255, 255, 255, 0.98);
        border-radius: 12px;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.05);
      }

      .hero-disclaimer {
        display: none;
      }

      .hero-rating {
        justify-content: center;
        margin-bottom: 12px;
      }

      .hero-stars svg {
        width: 16px;
        height: 16px;
      }

      .hero-rating-text {
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        letter-spacing: -0.01em;
      }

      .hero-eyebrow {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.12em;
        color: var(--accent);
        margin-bottom: 10px;
        text-transform: uppercase;
      }

      .hero-title {
        font-size: clamp(18px, 5vw, 24px);
        line-height: 1.3;
        margin-bottom: 16px;
        letter-spacing: -0.01em;
        font-weight: 500;
        color: var(--text);
      }

      .hero-title br {
        display: block;
        margin-bottom: 0.1em;
      }

      .hero-title strong {
        display: block;
        font-family: var(--font-display);
        font-size: clamp(2.25rem, 10vw, 3rem) !important;
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: -0.02em;
        color: var(--primary-dark);
        font-style: normal;
      }

      /* Show subtitle bullets on mobile - CONVERSION FOCUSED */
      .hero-subtitle {
        display: inline-block;
        font-size: clamp(14px, 4vw, 17px);
        font-weight: 500;
        line-height: 1.5;
        margin: 0 auto 20px;
        padding: 0 16px;
        text-align: left;
        max-width: 100%;
      }

      .hero-content {
        text-align: center;
      }

      .hero-subtitle li {
        margin-bottom: 10px;
        padding-left: 28px;
        position: relative;
      }

      .hero-subtitle li:last-child {
        margin-bottom: 0;
      }

      .hero-subtitle li::before {
        content: '✓';
        position: absolute;
        left: 0;
        top: 1px;
        width: clamp(18px, 5vw, 22px);
        height: clamp(18px, 5vw, 22px);
        font-size: clamp(10px, 3vw, 13px);
        font-weight: 700;
        background: var(--accent);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* ---- CTA: Hide entirely on mobile - sticky button handles it ---- */
      .hero-cta {
        display: none !important;
      }

      /* Hero Trust Badges Mobile - Floating card at bottom */
      .hero-trust-badges .hero-trust-badge {
        padding: 0 clamp(4px, 2vw, 10px);
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: clamp(3px, 1vw, 6px);
        flex: 0 0 auto;
        min-width: 0;
      }

      .hero-trust-badges .hero-trust-badge:first-child {
        padding-left: 10px;
      }

      .hero-trust-badges .hero-trust-badge:last-child {
        padding-right: 10px;
      }

      /* Vertical dividers between badges */
      .hero-trust-badges .hero-trust-badge:not(:last-child)::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 12px;
        width: 1px;
        background: var(--border);
      }

      .hero-trust-badge .badge-icon {
        width: clamp(14px, 4vw, 18px);
        height: clamp(14px, 4vw, 18px);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .hero-trust-badge .badge-icon svg {
        width: clamp(12px, 3.5vw, 16px);
        height: clamp(12px, 3.5vw, 16px);
        color: var(--accent);
      }

      .hero-trust-badge .badge-label {
        font-size: clamp(9px, 2.8vw, 12px);
        font-weight: 600;
        color: var(--text);
        line-height: 1.2;
        white-space: nowrap;
      }

      .hero-trust-badge .badge-sublabel {
        display: none;
      }

      /* Disclaimer - pushed to separate section on mobile */
      .hero-disclaimer {
        text-align: center;
        font-size: 10px;
        line-height: 1.4;
        color: var(--text-muted, #888);
        margin-top: 16px;
        padding: 0 16px;
        max-width: 100%;
        opacity: 0.7;
      }

      /* New Hero Elements - Mobile */
      .hero-subtitle-text {
        font-size: 1rem;
        text-align: center;
        max-width: 100%;
        padding: 0 16px;
        margin-bottom: 20px;
      }

      .hero-trust-badges-simple {
        justify-content: center;
        gap: 12px 20px;
        padding: 0 16px;
      }

      .trust-item {
        font-size: 0.8125rem;
      }

      .hero-image .image-placeholder {
        aspect-ratio: 4/3;
        max-width: 100%;
      }

      .social-proof-inner {
        gap: var(--space-2);
      }

      .content-section {
        padding: var(--space-10) 0;
      }

      .section-title {
        font-size: 32px;
        line-height: 1.2;
      }

      .section-subtitle {
        font-size: 16px;
      }

      .product-header {
        padding: 20px;
        grid-template-columns: 1fr !important;
      }

      .product-body {
        padding: 20px;
      }

      .product-name-large {
        font-size: 26px;
      }

      .product-image-large,
      .product-image-medium {
        max-width: 200px;
        margin: 0 auto;
      }

      .product-card-medium .product-header {
        grid-template-columns: 1fr;
      }

      .product-card-medium .product-name-medium {
        font-size: 16px;
      }

      .product-cta-row {
        flex-direction: column;
        gap: 12px;
      }

      .product-cta-row .btn {
        width: 100%;
        font-size: 16px;
      }

      .testimonial-featured {
        padding: 32px 24px;
      }

      .testimonial-featured .quote {
        font-size: 16px;
        line-height: 1.5;
      }

      .final-cta {
        padding: 60px 0;
      }

      .final-cta-title {
        font-size: 32px;
        line-height: 1.2;
      }

      .final-cta-subtitle {
        font-size: 16px;
        line-height: 1.6;
      }

      .final-trust {
        gap: 16px;
        flex-direction: column;
      }

      .final-trust span {
        font-size: 16px;
      }

      /* Steps mobile - readable for 50+ */
      .step-item {
        gap: 16px;
        padding: 24px 0;
      }

      .step-number {
        width: 48px;
        height: 48px;
        font-size: 16px;
      }

      .step-content h3 {
        font-size: 16px;
      }

      .step-content p {
        font-size: 16px;
        line-height: 1.6;
      }

      /* Ingredient cards mobile */
      .ingredient-card {
        padding: 24px 20px 22px;
      }

      .ingredient-card h3 {
        font-size: 32px;
      }

      .ingredient-card p {
        font-size: 16px;
        line-height: 1.55;
      }

      .ingredient-card ul li {
        padding: 12px 14px;
        font-size: 16px;
      }

      .ingredient-card .tagline {
        font-size: 16px;
      }

      .ingredient-card p .stat {
        font-size: 16px;
      }

      /* Problem/solution lists mobile */
      .problem-list li,
      .solution-list li {
        font-size: 16px;
        line-height: 1.6;
      }

      /* Stat callout mobile */
      .stat-callout {
        padding: 24px;
        margin: 32px 0;
      }

      .stat-callout-value {
        font-size: 48px;
      }

      .stat-callout-label {
        font-size: 16px;
      }

      /* Highlight box mobile */
      .highlight-box {
        padding: 24px;
        margin: 24px 0;
      }

      .highlight-box p {
        font-size: 16px;
        line-height: 1.6;
      }

      .footer-nav {
        flex-wrap: wrap;
        gap: 32px;
      }

      .footer-col {
        min-width: 140px;
      }

      .footer-disclaimer {
        font-size: 16px;
      }

      /* Guarantee section mobile */
      .guarantee-section {
        padding: 60px 0;
      }

      .guarantee-badge {
        width: 80px;
        height: 80px;
      }

      .guarantee-badge svg {
        width: 40px;
        height: 40px;
      }

      .guarantee-title {
        font-size: 28px;
      }

      .guarantee-text {
        font-size: 16px;
        line-height: 1.6;
      }

      /* FAQ mobile - readable */
      .faq-item {
        padding: 20px 0;
      }

      .faq-question {
        font-size: 16px;
      }

      .faq-answer {
        font-size: 16px;
        line-height: 1.6;
      }

      /* Section spacing - mobile proportions */
      .testimonials-section {
        padding: 70px 0;
      }

      .guarantee-section {
        padding: 50px 0;
      }

      .faq-section {
        padding: 50px 0;
      }

      /* General paragraph/body text boost */
      p {
        font-size: 16px;
        line-height: 1.65;
      }

      li {
        font-size: 16px;
      }
    }

    /* Extra small screens (phones in portrait) - OPTIMIZED FOR 50+ DEMOGRAPHIC */
    @media (max-width: 480px) {
      .container {
        padding: 0 18px;
      }

      .container-narrow {
        padding: 0 18px;
      }

      .promo-bar {
        padding: 12px 18px;
        font-size: 16px;
      }

      .promo-bar span {
        display: block;
        margin-right: 0;
        margin-bottom: 6px;
        font-size: 16px;
      }

      nav {
        padding: 12px 0;
      }

      .logo img {
        height: 28px;
      }

      /* Hero - Clean mobile layout (no image) */
      .hero {
        padding: 0 !important;
        min-height: auto !important;
      }

      .hero-image {
        display: none !important;
      }

      .hero-eyebrow {
        font-size: 16px;
        letter-spacing: 0.12em;
      }

      .hero-title {
        font-size: 36px;
        letter-spacing: -0.02em;
        line-height: 1.08;
        margin-bottom: var(--space-4);
      }

      .hero-subtitle {
        font-size: 16px;
        margin-bottom: 24px;
        line-height: 1.7;
      }

      .hero-subtitle li {
        margin-bottom: 14px;
        font-size: 16px;
        padding-left: 30px;
      }

      .hero-subtitle li::before {
        width: 20px;
        height: 20px;
        font-size: 16px;
      }

      .hero-cta {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-bottom: var(--space-5);
      }

      .hero-cta .btn-primary {
        padding: 16px 20px;
        font-size: 16px;
        border-radius: 10px;
      }

      .hero-cta .btn-outline {
        padding: 14px 20px;
        font-size: 16px;
        border-radius: 10px;
      }

      .hero-trust-badges {
        margin-top: var(--space-4);
        padding: 12px 16px;
        gap: 8px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: auto;
        max-width: calc(100% - 24px);
      }

      .hero-trust-badges .hero-trust-badge {
        padding: 0 clamp(4px, 1.5vw, 8px);
      }

      .hero-trust-badge .badge-icon {
        width: clamp(14px, 4vw, 20px);
        height: clamp(14px, 4vw, 20px);
        margin-bottom: 0;
      }

      .hero-trust-badge .badge-icon svg {
        width: clamp(12px, 3.5vw, 16px);
        height: clamp(12px, 3.5vw, 16px);
      }

      .hero-trust-badge .badge-label {
        font-size: clamp(9px, 2.6vw, 11px);
        white-space: nowrap;
      }

      .hero-disclaimer {
        font-size: 10px;
        line-height: 1.4;
      }

      .section-eyebrow {
        font-size: 16px;
        letter-spacing: 0.12em;
      }

      .section-title {
        font-size: 28px;
        line-height: 1.2;
      }

      .section-subtitle {
        font-size: 16px;
        line-height: 1.55;
      }

      .body-text {
        font-size: 16px;
        line-height: 1.6;
      }

      .lead-text {
        font-size: 16px;
        line-height: 1.6;
      }

      .content-section {
        padding: 50px 0;
      }

      /* Stats - bigger for impact */
      .stat-callout-value {
        font-size: 44px;
      }

      .stat-callout-label {
        font-size: 16px;
      }

      /* Steps - readable */
      .step-number {
        width: 44px;
        height: 44px;
        font-size: 16px;
      }

      .step-content h3 {
        font-size: 22px;
      }

      .step-content p {
        font-size: 16px;
        line-height: 1.55;
      }

      .step-time {
        font-size: 16px;
        padding: 4px 12px;
      }

      /* Product cards - clear pricing visibility */
      .product-name-large {
        font-size: 16px;
      }

      .product-tagline-large {
        font-size: 16px;
      }

      .product-description {
        font-size: 16px;
        line-height: 1.55;
      }

      .product-price-large {
        font-size: 28px;
      }

      /* Testimonials - social proof must be readable */
      .testimonial-featured .quote {
        font-size: 16px;
        line-height: 1.5;
      }

      .testimonial-card {
        width: 290px;
        padding: 22px;
      }

      .testimonial-card .text {
        font-size: 16px;
        line-height: 1.55;
      }

      .testimonial-card-scroll .text {
        font-size: 16px;
        line-height: 1.55;
      }

      /* Guarantee - trust must be clear */
      .guarantee-badge {
        width: 75px;
        height: 75px;
      }

      .guarantee-badge svg {
        width: 38px;
        height: 38px;
      }

      .guarantee-title {
        font-size: 26px;
      }

      .guarantee-text {
        font-size: 16px;
        line-height: 1.6;
      }

      /* Final CTA - conversion critical */
      .final-cta {
        padding: 55px 0;
      }

      .final-cta-title {
        font-size: 28px;
        line-height: 1.15;
      }

      .final-cta-subtitle {
        font-size: 16px;
        line-height: 1.55;
      }

      .final-cta .btn-primary {
        padding: 18px 32px;
        font-size: 16px;
      }

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

      /* Footer - less critical but still readable */
      footer {
        padding: 40px 0 24px;
      }

      .footer-brand p {
        font-size: 16px;
      }

      .footer-col h4 {
        font-size: 16px;
        margin-bottom: 16px;
      }

      .footer-col a {
        font-size: 16px;
      }

      .footer-bottom {
        font-size: 16px;
      }

      /* Global text boost for small screens */
      p {
        font-size: 16px;
        line-height: 1.6;
      }

      li {
        font-size: 16px;
      }
    }

    /* ========================================
   QUIZ STYLES - Premium Theme
   ======================================== */

    /* Quiz Progress Indicator */
    .quiz-progress {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 48px;
    }

    .quiz-progress-step {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid rgba(30, 43, 99, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: rgba(30, 43, 99, 0.5);
      transition: all 0.3s var(--ease-premium);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .quiz-progress-step.active {
      background: var(--cta);
      border-color: var(--cta);
      color: #fff;
      box-shadow: 0 0 20px rgba(22, 163, 74, 0.4);
      transform: scale(1.1);
    }

    .quiz-progress-step.completed {
      background: var(--cta);
      border-color: var(--cta);
      color: #fff;
    }

    .quiz-progress-step.completed::after {
      content: '';
    }

    .quiz-progress-line {
      width: 40px;
      height: 2px;
      background: rgba(30, 43, 99, 0.15);
      transition: background 0.3s ease;
    }

    .quiz-progress-step.completed+.quiz-progress-line {
      background: var(--cta);
    }

    /* Quiz Content */
    .quiz-content {
      max-width: 600px;
      width: 100%;
      text-align: center;
    }

    .quiz-question {
      font-family: var(--font-display);
      font-size: 40px;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 48px;
      line-height: 1.2;
    }

    /* Quiz Options */
    .quiz-options {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .quiz-option {
      background: #fff;
      border: 2px solid #e5e5e5;
      border-radius: 12px;
      padding: 24px 32px;
      cursor: pointer;
      transition: all 0.25s var(--ease-premium);
      text-align: left;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .quiz-option:hover {
      border-color: var(--cta);
      background: rgba(22, 163, 74, 0.03);
      transform: translateX(8px);
      box-shadow: 0 4px 20px rgba(22, 163, 74, 0.12);
    }

    .quiz-option-title {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 6px;
    }

    .quiz-option-desc {
      font-size: 16px;
      color: #555;
      line-height: 1.5;
    }

    /* Quiz Results */
    .quiz-results .quiz-content {
      max-width: 500px;
    }

    .quiz-results-content {
      max-width: 600px;
    }

    .result-label {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 20px;
    }

    .result-primary-card {
      background: #fff;
      border: 2px solid var(--cta);
      border-radius: 16px;
      padding: 32px;
      margin-bottom: 24px;
      text-align: left;
      box-shadow: 0 8px 32px rgba(22, 163, 74, 0.12);
    }

    .result-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20px;
      gap: 16px;
    }

    .result-product-name {
      font-family: var(--font-display);
      font-size: 42px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 6px;
      line-height: 1.1;
    }

    .result-product-tagline {
      font-size: 16px;
      color: var(--accent);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .result-product-price {
      font-family: var(--font-ui);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }

    .result-product-price .price-per-dose {
      font-size: 32px;
      font-weight: 800;
      color: var(--cta);
    }

    .result-product-price .price-label {
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #666;
    }

    .result-product-total {
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
      background: #f5f5f5;
      padding: 8px 16px;
      border-radius: 8px;
      text-align: center;
      margin-top: 8px;
    }

    /* Why Match - personalized reasoning */
    .result-why-match {
      background: rgba(22, 163, 74, 0.05);
      border-left: 4px solid var(--cta);
      padding: 18px 22px;
      margin-bottom: 24px;
      font-size: 16px;
      line-height: 1.6;
      color: #333;
      border-radius: 0 8px 8px 0;
    }

    /* ========================================
       URGENCY BAR - Social Proof
    ======================================== */
    .result-urgency-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
      border: 1px solid #fca5a5;
      border-radius: 24px;
      padding: 10px 20px;
      margin-bottom: 20px;
      font-size: 16px;
      color: #991b1b;
    }

    .urgency-dot {
      width: 10px;
      height: 10px;
      background: #ef4444;
      border-radius: 50%;
      animation: urgencyPulse 1.5s ease-in-out infinite;
    }

    @keyframes urgencyPulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.5;
        transform: scale(1.2);
      }
    }

    .urgency-text strong {
      font-weight: 700;
    }

    /* ========================================
   BENEFIT STACK - Direct Response Style
======================================== */
    .result-benefits-section {
      background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
      border: 2px solid #86efac;
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
    }

    .result-benefits-header {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 20px;
    }

    .benefits-icon {
      font-size: 16px;
    }

    .result-benefits-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .result-benefit-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(134, 239, 172, 0.5);
      font-size: 16px;
      line-height: 1.5;
      color: #1e293b;
    }

    .result-benefit-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .benefit-check {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      background: #22c55e;
      color: #fff;
      border-radius: 50%;
      font-size: 16px;
      font-weight: 700;
      margin-top: 2px;
    }

    .benefit-text {
      flex: 1;
    }

    /* ========================================
   GUARANTEE BOX - Risk Reversal
======================================== */
    .result-guarantee-box {
      background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
      border: 2px solid #fbbf24;
      border-radius: 12px;
      padding: 20px 24px;
      margin-bottom: 20px;
    }

    .guarantee-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .guarantee-shield {
      font-size: 28px;
    }

    .guarantee-title {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: #92400e;
    }

    .guarantee-points {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .guarantee-points li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      font-size: 16px;
      color: #1e293b;
    }

    .guarantee-check {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      background: #f59e0b;
      color: #fff;
      border-radius: 50%;
      font-size: 16px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .guarantee-points li strong {
      color: #92400e;
    }

    /* CTA Microcopy */
    .result-cta-microcopy {
      text-align: center;
      font-size: 16px;
      color: var(--text);
      margin-top: 12px;
      margin-bottom: 24px;
    }

    /* ========================================
       PRODUCT-SPECIFIC TESTIMONIALS
    ======================================== */
    .result-testimonials-section {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px 24px;
      margin-bottom: 24px;
    }

    .result-testimonials-header {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 16px;
    }

    .testimonials-icon {
      font-size: 16px;
    }

    .result-testimonials-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .result-testimonial-card {
      background: #f8fafc;
      border-radius: 10px;
      padding: 16px 20px;
      border-left: 3px solid var(--cta);
    }

    .result-testimonial-card .testimonial-stars {
      color: #f59e0b;
      font-size: 16px;
      margin-bottom: 8px;
    }

    .result-testimonial-card .testimonial-text {
      font-size: 16px;
      line-height: 1.5;
      color: var(--text);
      margin: 0 0 12px 0;
      font-style: italic;
    }

    .result-testimonial-card .testimonial-author {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-size: 16px;
    }

    .result-testimonial-card .author-name {
      font-weight: 600;
      color: var(--primary);
    }

    .result-testimonial-card .author-location {
      color: var(--text);
    }

    .result-testimonial-card .verified-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #dcfce7;
      color: #15803d;
      font-size: 16px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 10px;
    }

    /* ========================================
       PRICE ANCHORING
    ======================================== */
    .result-price-anchor {
      background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
      border: 2px solid #93c5fd;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 24px;
      text-align: center;
    }

    .price-anchor-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-bottom: 16px;
    }

    .price-anchor-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .anchor-label {
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #1e293b;
    }

    .anchor-price {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 700;
    }

    .anchor-price.strikethrough {
      color: #1e293b;
      text-decoration: line-through;
    }

    .anchor-price.highlight {
      color: #1d4ed8;
    }

    .anchor-subtext {
      font-size: 16px;
      color: #1e293b;
    }

    .price-anchor-vs {
      font-size: 16px;
      font-weight: 700;
      color: #1e293b;
      padding: 8px;
    }

    .price-anchor-savings {
      display: flex;
      justify-content: center;
    }

    .price-anchor-savings .savings-badge {
      display: inline-block;
      background: #22c55e;
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      padding: 8px 20px;
      border-radius: 20px;
    }

    .price-anchor-savings .savings-badge strong {
      font-weight: 800;
    }

    /* Specs Grid */
    .result-specs {
      margin-bottom: 24px;
    }

    .result-spec {
      margin-bottom: 16px;
    }

    .result-spec-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .result-spec-row .result-spec {
      margin-bottom: 0;
    }

    .result-spec-label {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #888;
      margin-bottom: 4px;
    }

    .result-spec-value {
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
    }

    /* Benefits List */
    .result-benefits {
      list-style: none;
      padding: 0;
      margin: 0 0 28px 0;
    }

    .result-benefits li {
      position: relative;
      padding-left: 28px;
      margin-bottom: 12px;
      font-size: 16px;
      line-height: 1.55;
      color: #333;
    }

    .result-benefits li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: var(--cta);
      font-weight: 700;
    }

    /* Quiz Results Quantity Selector */
    .quantity-selector {
      margin: 20px 0 24px;
      text-align: center;
    }

    .quantity-selector-label {
      font-family: var(--font-ui);
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #666;
      margin-bottom: 12px;
    }

    .quantity-tabs {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    .quantity-tab {
      flex: 1;
      max-width: 150px;
      padding: 14px 10px;
      background: #fff;
      border: 2px solid #e5e5e5;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      position: relative;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .quantity-tab:hover {
      border-color: var(--cta);
      background: rgba(22, 163, 74, 0.03);
    }

    .quantity-tab.active {
      background: rgba(22, 163, 74, 0.06);
      border-color: var(--cta);
      box-shadow: 0 0 0 1px var(--cta), 0 4px 12px rgba(22, 163, 74, 0.15);
    }

    .quantity-tab .qty-count {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
    }

    /* Per-dose is now the PRIMARY display (large, blue) */
    .quantity-tab .qty-per-dose-main {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--cta);
    }

    /* Total is now SECONDARY display (smaller, gray) */
    .quantity-tab .qty-total-sub {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 500;
      color: #1e293b;
    }

    /* Legacy styles for backwards compatibility */
    .quantity-tab .qty-price {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--cta);
    }

    .quantity-tab .qty-per-dose {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 500;
      color: #1e293b;
    }

    .quantity-tab .qty-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      background: var(--accent);
      color: #000;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 3px 6px;
      border-radius: 4px;
      letter-spacing: 0.05em;
    }

    /* Fix product card styling when upgrade section is hidden */
    .result-primary-card-v2.no-upgrade {
      border-radius: 20px;
      border-top: 2px solid var(--cta);
      margin-top: 16px;
    }

    /* Quantity Selector Mobile */
    @media (max-width: 480px) {
      .quantity-tabs {
        flex-direction: column;
        gap: 8px;
      }

      .quantity-tab {
        max-width: none;
        flex-direction: row;
        justify-content: space-between;
        padding: 14px 16px;
      }

      .quantity-tab .qty-badge {
        position: static;
        margin-left: 8px;
      }
    }

    .result-cta {
      width: 100%;
      background: var(--cta);
      color: #fff;
      border: none;
      padding: 20px 40px;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.25s var(--ease-premium);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35);
    }

    .result-cta:hover {
      background: var(--cta-hover);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(22, 163, 74, 0.45);
    }

    /* Quiz Results - How It Works */
    .result-how-it-works {
      margin-top: 20px;
      padding: 18px 22px;
      background: #fff;
      border-radius: 12px;
      border: 2px solid #e5e5e5;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .hiw-title-small {
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent);
      text-align: center;
      margin-bottom: 14px;
    }

    .hiw-steps-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }

    .hiw-step-small {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
    }

    .hiw-step-small .hiw-num {
      width: 28px;
      height: 28px;
      background: var(--cta);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 16px;
    }

    .hiw-step-small .hiw-text {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.3;
    }

    @media (max-width: 480px) {
      .hiw-steps-row {
        flex-direction: column;
        gap: 10px;
      }

      .hiw-step-small {
        flex-direction: row;
        text-align: left;
        gap: 10px;
      }

      .hiw-step-small .hiw-num {
        width: 24px;
        height: 24px;
        font-size: 16px;
        flex-shrink: 0;
      }
    }

    /* How It Works V2 - Quiz Results (Clean, High Visibility) */
    .result-how-it-works-v2 {
      margin-top: 28px;
      padding: 24px 28px;
      background: linear-gradient(135deg, rgba(30, 43, 107, 0.25) 0%, rgba(20, 30, 80, 0.35) 100%);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .hiw-header-v2 {
      text-align: center;
      margin-bottom: 24px;
    }

    .hiw-title-v2 {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 6px;
    }

    .hiw-subtitle-v2 {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 500;
      color: var(--accent);
      letter-spacing: 0.02em;
    }

    .hiw-steps-grid-v2 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .hiw-step-v2 {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
    }

    .hiw-num-v2 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background: var(--cta);
      color: #fff;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
    }

    .hiw-label-v2 {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      line-height: 1.3;
    }

    @media (max-width: 600px) {
      .hiw-steps-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      .hiw-title-v2 {
        font-size: 16px;
      }

      .hiw-subtitle-v2 {
        font-size: 16px;
      }
    }

    @media (max-width: 380px) {
      .hiw-steps-grid-v2 {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .hiw-num-v2 {
        width: 38px;
        height: 38px;
        font-size: 16px;
      }

      .hiw-label-v2 {
        font-size: 16px;
      }
    }

    /* Upgrade Section */
    .upgrade-section {
      background: rgba(30, 43, 107, 0.15);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px 24px;
      margin-bottom: 24px;
      text-align: left;
    }

    .upgrade-title {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 6px;
    }

    .upgrade-desc {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.5;
    }

    .upgrade-desc strong {
      color: var(--accent);
    }

    .upgrade-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .upgrade-label {
      flex: 1;
    }

    /* Toggle Switch */
    .toggle-switch {
      position: relative;
      width: 52px;
      height: 28px;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: #333;
      border-radius: 28px;
      transition: background 0.3s ease;
    }

    .toggle-slider::before {
      content: '';
      position: absolute;
      width: 22px;
      height: 22px;
      left: 3px;
      bottom: 3px;
      background: #fff;
      border-radius: 50%;
      transition: transform 0.3s ease;
    }

    .toggle-switch input:checked+.toggle-slider {
      background: var(--cta);
    }

    .toggle-switch input:checked+.toggle-slider::before {
      transform: translateX(24px);
    }

    /* ========================================
       UPGRADE SECTION V2 - Premium Redesign
    ======================================== */
    .upgrade-section-v2 {
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
      border: 2px solid var(--cta);
      border-radius: 16px;
      padding: 24px 28px;
      margin: 24px 0;
      box-shadow: 0 8px 32px rgba(22, 163, 74, 0.25);
      transition: all 0.3s ease;
    }

    /* When upgrade is positioned at top - flush with card below */
    .upgrade-section-v2.upgrade-section-top {
      margin-top: 16px;
      margin-bottom: 0;
      border-radius: 16px 16px 0 0;
      border-bottom: none;
    }

    /* Make the product card connect to upgrade section */
    .upgrade-section-top+.result-primary-card-v2 {
      border-radius: 0 0 20px 20px;
      border-top: none;
      margin-top: 0;
    }

    .upgrade-section-v2:hover {
      box-shadow: 0 12px 40px rgba(22, 163, 74, 0.35);
      transform: translateY(-2px);
    }

    .upgrade-content-wrapper {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .upgrade-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, var(--cta) 0%, #22c55e 100%);
      border-radius: 14px;
      flex-shrink: 0;
      box-shadow: 0 4px 16px rgba(22, 163, 74, 0.4);
    }

    .upgrade-icon svg {
      color: #fff;
    }

    .upgrade-text-content {
      flex: 1;
    }

    .upgrade-title-v2 {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 8px;
      letter-spacing: -0.01em;
    }

    .upgrade-desc-v2 {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.6;
    }

    .upgrade-desc-v2 strong {
      color: var(--accent);
      font-weight: 700;
    }

    /* Toggle Switch V2 - Premium with Labels */
    .toggle-switch-v2 {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .toggle-switch-v2 input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }

    .toggle-slider-v2 {
      position: relative;
      width: 68px;
      height: 36px;
      background: linear-gradient(135deg, #475569 0%, #334155 100%);
      border-radius: 36px;
      cursor: pointer;
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      border: 2px solid #64748b;
    }

    .toggle-slider-v2::before {
      content: '';
      position: absolute;
      width: 28px;
      height: 28px;
      left: 2px;
      top: 2px;
      background: #fff;
      border-radius: 50%;
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .toggle-switch-v2 input:checked+.toggle-slider-v2 {
      background: linear-gradient(135deg, var(--cta) 0%, #22c55e 100%);
      border-color: var(--cta);
      box-shadow: 0 0 20px rgba(22, 163, 74, 0.5);
    }

    .toggle-switch-v2 input:checked+.toggle-slider-v2::before {
      transform: translateX(32px);
      background: #fff;
    }

    .toggle-label-on,
    .toggle-label-off {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      transition: all 0.3s ease;
    }

    .toggle-label-off {
      color: rgba(255, 255, 255, 0.5);
    }

    .toggle-label-on {
      display: none;
      color: #22c55e;
    }

    .toggle-switch-v2 input:checked~.toggle-label-off {
      display: none;
    }

    .toggle-switch-v2 input:checked~.toggle-label-on {
      display: block;
    }

    /* Upgrade Confirmation Message */
    .upgrade-confirmation {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 16px;
      padding: 14px 20px;
      background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.25) 100%);
      border: 1px solid rgba(34, 197, 94, 0.4);
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      color: #22c55e;
      animation: slideInConfirm 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .upgrade-confirmation svg {
      flex-shrink: 0;
    }

    .upgrade-confirmation strong {
      color: #fff;
    }

    @keyframes slideInConfirm {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Upgrade Section - Mobile Responsive */
    @media (max-width: 640px) {
      .upgrade-section-v2 {
        padding: 20px;
      }

      .upgrade-content-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 16px;
      }

      .upgrade-icon {
        width: 52px;
        height: 52px;
      }

      .upgrade-icon svg {
        width: 24px;
        height: 24px;
      }

      .upgrade-title-v2 {
        font-size: 16px;
      }

      .upgrade-desc-v2 {
        font-size: 16px;
      }

      .toggle-slider-v2 {
        width: 72px;
        height: 40px;
      }

      .toggle-slider-v2::before {
        width: 32px;
        height: 32px;
      }

      .toggle-switch-v2 input:checked+.toggle-slider-v2::before {
        transform: translateX(32px);
      }
    }

    /* ========================================
       ALTERNATIVES SECTION - PREMIUM REDESIGN
    ======================================== */

    /* Container wrapper for the entire alternatives section */
    .result-alternatives-wrapper {
      margin-top: 32px;
      padding-top: 24px;
      border-top: 1px dashed #e2e8f0;
    }

    .result-alternatives-label {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 16px;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .result-alternatives-label::before,
    .result-alternatives-label::after {
      content: '';
      flex: 1;
      max-width: 60px;
      height: 1px;
      background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
    }

    .result-alternatives {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 24px;
    }

    /* Premium alternative card with horizontal layout */
    .result-alt-card {
      background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px 20px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      position: relative;
      overflow: hidden;
    }

    .result-alt-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(22, 163, 74, 0.02) 0%, rgba(22, 163, 74, 0.05) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .result-alt-card:hover {
      border-color: var(--cta);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(22, 163, 74, 0.12);
    }

    .result-alt-card:hover::before {
      opacity: 1;
    }

    /* Product image container */
    .result-alt-image {
      width: 56px;
      height: 56px;
      flex-shrink: 0;
      background: #fff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      position: relative;
      z-index: 1;
    }

    .result-alt-image img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    /* Content area */
    .result-alt-content {
      flex: 1;
      min-width: 0;
      position: relative;
      z-index: 1;
    }

    .result-alt-name {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 2px;
      line-height: 1.2;
    }

    .result-alt-tagline {
      font-size: 16px;
      color: #1e293b;
      font-weight: 500;
      line-height: 1.4;
    }

    /* Price and action area */
    .result-alt-action {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }

    .result-alt-price {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--cta);
      line-height: 1;
    }

    .result-alt-price-label {
      font-size: 16px;
      color: #1e293b;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .result-alt-arrow {
      width: 28px;
      height: 28px;
      background: linear-gradient(135deg, var(--cta) 0%, #22c55e 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateX(-8px);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      margin-top: 4px;
    }

    .result-alt-arrow svg {
      width: 14px;
      height: 14px;
      color: #fff;
    }

    .result-alt-card:hover .result-alt-arrow {
      opacity: 1;
      transform: translateX(0);
    }

    /* Mobile responsive adjustments */
    @media (max-width: 640px) {
      .result-alternatives-wrapper {
        margin-top: 24px;
        padding-top: 20px;
      }

      .result-alt-card {
        padding: 14px 16px;
        gap: 12px;
      }

      .result-alt-image {
        width: 48px;
        height: 48px;
        padding: 6px;
      }

      .result-alt-name {
        font-size: 16px;
      }

      .result-alt-tagline {
        font-size: 16px;
      }

      .result-alt-price {
        font-size: 16px;
      }

      .result-alt-arrow {
        display: none;
      }
    }

    /* Skip Link */
    .result-skip {
      display: inline-block;
      color: #6b7280;
      font-size: 16px;
      text-decoration: none;
      cursor: pointer;
      transition: color 0.2s;
      border: none;
      background: none;
      font-family: var(--font-ui);
    }

    .result-skip:hover {
      color: #9ca3af;
    }

    /* Quiz Close Button (Full-screen) */
    .quiz-fullscreen .quiz-close-btn {
      position: fixed;
      top: 24px;
      right: 24px;
      z-index: 10;
      background: #fff;
      border: 2px solid #e5e5e5;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .quiz-fullscreen .quiz-close-btn:hover {
      border-color: var(--cta);
      color: var(--cta);
      transform: scale(1.05);
    }

    /* Quiz Mobile Styles - Optimized for 55+ readability */
    @media (max-width: 640px) {
      .quiz-entry-content {
        padding: 32px 24px;
        margin: 16px;
      }

      .quiz-entry-title {
        font-size: 28px;
      }

      .quiz-entry-subtitle {
        font-size: 16px;
      }

      .quiz-entry-benefits {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
      }

      .quiz-entry-benefit {
        font-size: 16px;
        font-weight: 600;
      }

      .quiz-question {
        font-size: 32px;
        margin-bottom: 32px;
        line-height: 1.25;
      }

      .quiz-option {
        padding: 20px 24px;
      }

      .quiz-option-title {
        font-size: 16px;
      }

      .quiz-option-desc {
        font-size: 16px;
      }

      .quiz-progress-step {
        width: 36px;
        height: 36px;
        font-size: 16px;
      }

      .quiz-progress-line {
        width: 28px;
      }

      .result-primary-card {
        padding: 28px 24px;
      }

      .result-product-name {
        font-size: 32px;
      }

      .result-why-match {
        font-size: 16px;
      }

      .result-spec-label {
        font-size: 16px;
      }

      .result-spec-value {
        font-size: 16px;
      }

      .result-cta {
        font-size: 16px;
        padding: 18px 32px;
      }

      .result-alternatives {
        grid-template-columns: 1fr;
      }

      .quiz-floating-btn {
        bottom: 16px;
        right: 16px;
        padding: 14px 20px;
        font-size: 16px;
      }
    }

    /* ========================================
       QUIZ RESULTS V2 - PREMIUM D2C REDESIGN
    ======================================== */

    /* Main Card V2 */
    .result-primary-card-v2 {
      background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
      border: 2px solid var(--cta);
      border-radius: 20px;
      padding: 28px 24px;
      margin-bottom: 16px;
      text-align: left;
      box-shadow: 0 12px 40px rgba(22, 163, 74, 0.15);
    }

    /* Quiz Results Image */
    .result-product-image-container {
      flex-shrink: 0;
      width: 120px;
      height: 120px;
      background: #f8fafc;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .result-image-v2 {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    /* Header V2 */
    .result-header-v2 {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 24px;
    }

    .result-product-info {
      flex-grow: 1;
    }

    .result-product-name-v2 {
      font-family: var(--font-display);
      font-size: 36px;
      font-weight: 700;
      color: var(--primary);
      line-height: 1.1;
      margin-bottom: 4px;
    }

    .result-product-tagline-v2 {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: var(--cta);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .result-product-price-v2 {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      gap: 6px;
      margin-top: 8px;
    }

    .result-product-price-v2 .price-per-dose {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 800;
      color: var(--cta);
      line-height: 1;
    }

    .result-product-price-v2 .price-label {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    /* Specs Row V2 */
    .result-specs-row-v2 {
      display: flex;
      gap: 24px;
      padding: 16px 20px;
      background: #f1f5f9;
      border-radius: 12px;
      margin-bottom: 20px;
    }

    .result-specs-row-v2 .spec-item {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
    }

    .result-specs-row-v2 .spec-icon {
      color: var(--cta);
      flex-shrink: 0;
    }

    .result-specs-row-v2 .spec-text {
      display: flex;
      flex-direction: column;
    }

    .result-specs-row-v2 .spec-label {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .result-specs-row-v2 .spec-value {
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
    }

    /* Quantity Selector V2 */
    .quantity-selector-v2 {
      margin: 20px 0;
      padding: 20px;
      background: #f8fafc;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
    }

    .quantity-selector-v2 .quantity-selector-label {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 16px;
      text-align: center;
    }

    .quantity-selector-v2 .quantity-tabs {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .quantity-selector-v2 .quantity-tab {
      flex: 1;
      min-width: 120px;
      max-width: 160px;
      background: #fff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 16px 14px;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      position: relative;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .quantity-selector-v2 .quantity-tab:hover {
      border-color: var(--cta);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(22, 163, 74, 0.12);
    }

    .quantity-selector-v2 .quantity-tab.active {
      border-color: var(--cta);
      background: linear-gradient(135deg, rgba(22, 163, 74, 0.04) 0%, rgba(22, 163, 74, 0.08) 100%);
      box-shadow: 0 0 0 2px var(--cta), 0 8px 24px rgba(22, 163, 74, 0.18);
    }

    .quantity-selector-v2 .qty-count {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
    }

    .quantity-selector-v2 .qty-price {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 800;
      color: var(--cta);
    }

    .quantity-selector-v2 .qty-per-dose {
      font-size: 16px;
      color: #1e293b;
      font-weight: 500;
    }

    .quantity-selector-v2 .qty-badge {
      position: absolute;
      top: -10px;
      right: -10px;
      background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 20px;
      letter-spacing: 0.03em;
      box-shadow: 0 2px 8px rgba(22, 163, 74, 0.4);
    }

    /* Total V2 */
    .result-total-v2 {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
      text-align: center;
      padding: 12px 20px;
      background: #f1f5f9;
      border-radius: 10px;
      margin-bottom: 20px;
    }

    /* CTA V2 */
    .result-cta-v2 {
      display: block;
      width: 100%;
      background: linear-gradient(135deg, var(--cta) 0%, #14532d 100%);
      color: #fff;
      border: none;
      padding: 22px 40px;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 8px 24px rgba(22, 163, 74, 0.4);
    }

    .result-cta-v2:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 32px rgba(22, 163, 74, 0.5);
    }

    /* CTA Microcopy V2 */
    .result-cta-microcopy-v2 {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      margin-top: 16px;
      margin-bottom: 20px;
    }

    .result-cta-microcopy-v2 span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 16px;
      font-weight: 500;
      color: #16a34a;
    }

    .result-cta-microcopy-v2 svg {
      flex-shrink: 0;
    }

    /* Trust Row V2 */
    .result-trust-row {
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
      padding-top: 16px;
      border-top: 1px solid #e2e8f0;
    }

    .result-trust-row .trust-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
    }

    .result-trust-row .trust-item svg {
      color: var(--cta);
    }

    /* Details Section V2 */
    .result-details-section {
      margin-top: 24px;
    }

    .result-why-match-v2 {
      background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
      border-left: 4px solid var(--cta);
      padding: 20px 24px;
      border-radius: 0 14px 14px 0;
      font-size: 16px;
      line-height: 1.6;
      color: #1e3a5f;
      margin-bottom: 24px;
      font-weight: 500;
    }

    /* Benefits Section V2 */
    .result-benefits-section-v2 {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 20px;
    }

    .result-benefits-header-v2 {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 20px;
    }

    .benefits-icon-svg {
      color: var(--accent);
    }

    .result-benefits-list-v2 {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .result-benefits-list-v2 .result-benefit-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #f1f5f9;
      font-size: 16px;
      line-height: 1.5;
      color: #1e293b;
    }

    .result-benefits-list-v2 .result-benefit-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .result-benefits-list-v2 .benefit-check {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
      color: #fff;
      border-radius: 50%;
      font-size: 16px;
      font-weight: 700;
      flex-shrink: 0;
    }

    /* Ingredients Section V2 */
    .result-ingredients-section-v2 {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 20px;
    }

    .result-ingredients-header-v2 {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 16px;
    }

    .result-ingredients-header-v2 svg {
      color: var(--cta);
    }

    .result-ingredient-cards-v2 {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .result-ingredient-cards-v2 .result-ingredient-card {
      background: #f8fafc;
      border-radius: 12px;
      padding: 16px 20px;
      border: 1px solid #e2e8f0;
    }

    /* Testimonials Section V2 */
    .result-testimonials-section-v2 {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 20px;
    }

    .result-testimonials-header-v2 {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 16px;
    }

    .result-testimonials-header-v2 svg {
      color: var(--cta);
    }

    .result-testimonials-list-v2 {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .result-testimonials-list-v2 .result-testimonial-card {
      background: #f8fafc;
      border-radius: 12px;
      padding: 18px 20px;
      border-left: 4px solid var(--cta);
    }

    /* Price Comparison V2 */
    .result-price-comparison-v2 {
      background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
      border: 2px solid #86efac;
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 24px;
      text-align: center;
    }

    .price-compare-header {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: #15803d;
      margin-bottom: 20px;
    }

    .price-compare-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
    }

    .price-compare-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .compare-label {
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #1e293b;
    }

    .compare-price {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 800;
    }

    .compare-price.strikethrough {
      color: #1e293b;
      text-decoration: line-through;
    }

    .compare-price.highlight {
      color: #15803d;
    }

    .compare-unit {
      font-size: 16px;
      color: #1e293b;
    }

    .price-compare-vs {
      font-size: 16px;
      font-weight: 700;
      color: #1e293b;
      text-transform: uppercase;
    }

    /* Secondary CTA */
    .result-cta-secondary {
      display: block;
      width: 100%;
      background: var(--cta);
      color: #fff;
      border: none;
      padding: 18px 32px;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.25s ease;
      box-shadow: 0 4px 16px rgba(22, 163, 74, 0.3);
    }

    .result-cta-secondary:hover {
      background: var(--cta-hover);
      transform: translateY(-2px);
    }

    /* Mobile Responsive V2 */
    @media (max-width: 640px) {
      .result-primary-card-v2 {
        padding: 24px 20px;
      }

      .result-header-v2 {
        flex-direction: column;
        text-align: center;
      }

      .result-product-name-v2 {
        font-size: 32px;
      }

      .result-product-price-v2 {
        align-items: center;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
      }

      .result-product-price-v2 .price-per-dose {
        font-size: 32px;
      }

      .result-specs-row-v2 {
        flex-direction: column;
        gap: 16px;
      }

      .quantity-selector-v2 .quantity-tabs {
        flex-direction: column;
      }

      .quantity-selector-v2 .quantity-tab {
        max-width: none;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
      }

      .quantity-selector-v2 .qty-badge {
        position: static;
        margin-left: auto;
      }

      .result-cta-microcopy-v2 {
        flex-direction: column;
        gap: 8px;
        align-items: center;
      }

      .result-trust-row {
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }

      .price-compare-row {
        flex-direction: column;
        gap: 16px;
      }

      .result-why-match-v2 {
        font-size: 16px;
      }
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --text-xs: 0.875rem;
      --text-sm: 1rem;
      --text-base: 1.1875rem;
      --text-lg: 1.375rem;
      --text-xl: 1.625rem;
      --text-2xl: 2rem;
      --text-3xl: 2.625rem;
      --text-4xl: 3.5rem;
      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.5rem;
      --space-6: 2rem;
      --space-7: 2.5rem;
      --space-8: 3rem;
      --primary: #1e293b;
      --primary-dark: #0f172a;
      --accent: #b8860b;
      --accent-light: #d4a574;
      --accent-warm: #c9a227;
      --red: #9a3c3c;
      --cta: #16a34a;
      --cta-hover: #15803d;
      --text: #1e293b;
      --text-light: #475569;
      --text-muted: #94a3b8;
      --bg: #ffffff;
      --bg-light: #f4f3f0;
      --bg-dark: #1e293b;
      --border: #e2e0dc;
      --success: #b8860b;
      --shadow-sm: 0 1px 2px rgba(30, 41, 59, 0.04), 0 1px 3px rgba(30, 41, 59, 0.06);
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body {
      font-family: var(--font-body);
      color: var(--text);
      background: var(--bg-light);
      line-height: 1.7;
      font-size: var(--text-base);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .promo-bar {
      background: #1E293B;
      color: #fff;
      text-align: center;
      padding: var(--space-3) var(--space-5);
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      font-weight: 600;
    }

    .promo-bar span {
      background: #fff;
      color: var(--cta);
      padding: 4px 12px;
      border-radius: 4px;
      margin-right: var(--space-3);
      font-weight: 700;
      text-transform: uppercase;
      font-size: var(--text-xs);
    }

    nav {
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      padding: 12px 0;
    }

    .nav-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      display: flex;
      align-items: center;
      text-decoration: none;
    }

    .logo img {
      height: 32px;
      width: auto;
    }

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

    .nav-links a {
      color: var(--text);
      text-decoration: none;
      font-size: 16px;
      font-weight: 900;
    }

    .nav-links .btn {
      color: #fff !important;
    }

    @media (max-width: 768px) {
      .nav-mobile-cta {
        display: none;
      }

      .nav-inner {
        justify-content: center;
      }
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-4) var(--space-6);
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      font-weight: 600;
      text-decoration: none;
      text-transform: uppercase;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      border: none;
    }

    .btn-primary {
      background: #16a34a;
      color: #fff;
      box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
    }

    .btn-primary:hover {
      background: #15803d;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(22, 163, 74, 0.45);
    }

    .btn-outline {
      background: transparent;
      color: var(--primary);
      border: 2px solid var(--primary);
    }

    .btn-large {
      padding: var(--space-5) var(--space-8);
      font-size: 0.9375rem;
      font-weight: 700;
    }

    .hero {
      padding: 10px 0 0;
      background: var(--bg);
      position: relative;
      overflow: hidden;
    }

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

    .hero-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      align-items: center;
    }

    .hero-eyebrow {
      display: inline-flex;
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--text);
      margin-bottom: var(--space-5);
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 5vw, 2.5rem);
      font-weight: 500;
      line-height: 1.3;
      color: var(--text);
      margin-bottom: var(--space-5);
    }

    .hero-title strong {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(3rem, 9vw, 3.5rem);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--primary-dark);
      font-style: normal;
    }

    .hero-subtitle {
      color: #000;
      margin-bottom: var(--space-6);
      line-height: 1.7;
      max-width: 480px;
      list-style: none;
      padding: 0;
    }

    .hero-subtitle li {
      position: relative;
      padding-left: 20px;
      margin-bottom: 8px;
    }

    .hero-subtitle li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      width: 6px;
      height: 6px;
      background: var(--accent);
      border-radius: 50%;
    }

    .hero-cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
    }

    .hero-trust-badges {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center !important;
      gap: 16px;
      margin-top: 16px;
      padding: 16px 24px;
      background: rgba(255, 255, 255, 0.98);
      border-radius: 12px;
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(0, 0, 0, 0.05);
      width: fit-content;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
    }

    .hero-trust-badge {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .hero-trust-badge .badge-icon {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-trust-badge .badge-icon svg {
      color: var(--accent);
      width: 18px;
      height: 18px;
    }

    .hero-trust-badge .badge-label {
      font-size: 16px;
      font-weight: 900;
      color: var(--text);
    }

    .hero-trust-badge .badge-sublabel {
      display: none;
    }

    .hero-image {
      position: relative;
      align-self: end;
    }

    .hero-image img {
      display: block;
      margin-bottom: -4px;
      position: relative;
      z-index: 1;
    }

    .hero-disclaimer {
      text-align: center;
      font-size: 11px;
      color: var(--text-muted, #888);
      margin-top: 16px;
      line-height: 1.4;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
      opacity: 0.7;
    }

    /* Quiz Critical CSS - Entry Modal & Overlays (Premium Theme) */
    .quiz-entry-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .quiz-entry-modal.active {
      opacity: 1;
      visibility: visible;
    }

    .quiz-entry-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(30, 43, 99, 0.6);
      backdrop-filter: blur(8px);
    }

    .quiz-entry-content {
      position: relative;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 48px 40px;
      max-width: 520px;
      width: 90%;
      text-align: center;
      transform: scale(0.95) translateY(20px);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    .quiz-entry-modal.active .quiz-entry-content {
      transform: scale(1) translateY(0);
    }

    .quiz-close-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      background: rgba(0, 0, 0, 0.05);
      border: none;
      border-radius: 50%;
      color: var(--text);
      cursor: pointer;
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .quiz-close-btn svg {
      width: 20px;
      height: 20px;
    }

    .quiz-close-btn:hover {
      color: var(--text);
      background: rgba(0, 0, 0, 0.1);
      transform: scale(1.05);
    }

    .quiz-entry-eyebrow {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--accent);
      margin-bottom: 16px;
    }

    .quiz-entry-title {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 12px;
      line-height: 1.2;
    }

    .quiz-entry-subtitle {
      color: var(--text);
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 32px;
    }

    .quiz-entry-benefits {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 32px;
      padding: 24px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .quiz-entry-benefit {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--text);
      font-size: 16px;
      font-weight: 600;
    }

    .quiz-entry-benefit svg {
      width: 22px;
      height: 22px;
      color: var(--accent);
      flex-shrink: 0;
    }

    .quiz-entry-buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .quiz-btn-start {
      background: var(--cta);
      color: #fff;
      border: none;
      padding: 18px 40px;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
    }

    .quiz-btn-start:hover {
      background: var(--cta-hover);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(22, 163, 74, 0.4);
    }

    .quiz-btn-skip {
      background: transparent;
      color: var(--text);
      border: none;
      padding: 12px;
      font-family: var(--font-ui);
      font-size: 16px;
      cursor: pointer;
      transition: color 0.2s;
    }

    .quiz-btn-skip:hover {
      color: var(--text);
    }

    /* Quiz Full-Screen Overlay (Light Theme) */
    .quiz-fullscreen {
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: #FAFAF8;
      display: none;
      overflow-y: auto;
    }

    .quiz-fullscreen.active {
      display: block;
    }

    .quiz-step {
      display: none;
      min-height: 100vh;
      padding: 60px 24px;
    }

    .quiz-step.active {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    /* Quiz Progress - Critical Inline Styles */
    .quiz-progress {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 48px;
    }

    .quiz-progress-step {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      background: #fff;
      border: 2px solid rgba(30, 43, 99, 0.15);
      color: rgba(30, 43, 99, 0.5);
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .quiz-progress-step.active {
      background: var(--cta);
      border-color: var(--cta);
      color: #fff;
      box-shadow: 0 0 20px rgba(22, 163, 74, 0.4);
      transform: scale(1.1);
    }

    .quiz-progress-step.completed {
      background: var(--cta);
      border-color: var(--cta);
      color: #fff;
    }

    .quiz-progress-line {
      width: 40px;
      height: 2px;
      background: rgba(30, 43, 99, 0.15);
    }

    .quiz-progress-step.completed+.quiz-progress-line {
      background: var(--cta);
    }

    /* Quiz Content - Critical Inline Styles */
    .quiz-content {
      max-width: 600px;
      width: 100%;
      text-align: center;
    }

    .quiz-question {
      font-family: var(--font-display);
      font-size: 40px;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 48px;
      line-height: 1.2;
    }

    .quiz-options {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .quiz-option {
      background: #fff;
      border: 2px solid #e5e5e5;
      border-radius: 12px;
      padding: 24px 32px;
      cursor: pointer;
      transition: all 0.25s ease;
      text-align: left;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .quiz-option:hover {
      border-color: var(--cta);
      background: rgba(22, 163, 74, 0.03);
      transform: translateX(8px);
      box-shadow: 0 4px 20px rgba(22, 163, 74, 0.12);
    }

    .quiz-option-title {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 6px;
    }

    .quiz-option-desc {
      font-size: 16px;
      color: #555;
      line-height: 1.5;
    }

    .quiz-skip-link {
      margin-top: 32px;
      color: var(--text);
      font-size: 16px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .quiz-skip-link:hover {
      color: var(--text);
    }

    .quiz-fullscreen .quiz-close-btn {
      background: #fff;
      border: 2px solid #e5e5e5;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      color: var(--primary);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 20px;
      right: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
    }

    .quiz-fullscreen .quiz-close-btn:hover {
      border-color: var(--cta);
      color: var(--cta);
    }

    /* Quiz Results - Critical Inline Styles */
    .quiz-results .quiz-content {
      max-width: 500px;
    }

    .quiz-results-content {
      max-width: 600px;
    }

    .result-label {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 20px;
    }

    .result-primary-card {
      background: #fff;
      border: 2px solid var(--cta);
      border-radius: 16px;
      padding: 32px;
      margin-bottom: 24px;
      text-align: left;
      box-shadow: 0 8px 32px rgba(22, 163, 74, 0.12);
    }

    .result-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20px;
      gap: 16px;
      flex-wrap: wrap;
    }

    .result-product-name {
      font-family: var(--font-display);
      font-size: 42px;
      font-weight: 700;
      color: var(--primary);
      line-height: 1.1;
    }

    .result-product-tagline {
      font-size: 16px;
      color: var(--accent);
      font-weight: 600;
      margin-top: 4px;
    }

    .result-product-price {
      text-align: right;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }

    .result-product-price .price-per-dose {
      font-size: 32px;
      font-weight: 800;
      color: var(--cta);
    }

    .result-product-price .price-label {
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #666;
    }

    .result-product-total {
      font-size: 16px;
      font-weight: 600;
      background: #f5f5f5;
      padding: 8px 16px;
      border-radius: 8px;
      color: var(--primary);
      text-align: right;
      margin-top: 8px;
    }

    .result-why-match {
      background: rgba(22, 163, 74, 0.04);
      border-left: 3px solid var(--cta);
      padding: 16px 20px;
      border-radius: 0 12px 12px 0;
      font-size: 16px;
      line-height: 1.6;
      color: #333;
      margin-bottom: 20px;
    }

    .result-specs {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
    }

    .result-spec-row {
      display: flex;
      gap: 24px;
    }

    .result-spec-label {
      font-size: 16px;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 4px;
    }

    .result-spec-value {
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
    }

    /* Ingredient Benefits Section */
    .result-ingredients-section {
      margin-bottom: 24px;
    }

    .result-ingredients-header {
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 16px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-bottom: 2px solid var(--cta);
      padding-bottom: 8px;
    }

    .result-ingredient-cards {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .result-ingredient-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      border: 1px solid #e5e5e5;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .result-ingredient-name {
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .result-ingredient-dosage {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      background: var(--cta);
      padding: 4px 12px;
      border-radius: 20px;
    }

    .result-ingredient-benefit {
      font-size: 16px;
      line-height: 1.6;
      color: #444;
    }

    /* Quick Specs Row */
    .result-quick-specs {
      display: flex;
      gap: 24px;
      margin-bottom: 24px;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 12px;
    }

    .result-quick-spec {
      flex: 1;
      text-align: center;
    }

    .quick-spec-label {
      font-size: 16px;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 6px;
      font-weight: 600;
    }

    .quick-spec-value {
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
    }

    .result-cta {
      display: block;
      width: 100%;
      background: var(--cta);
      color: #fff;
      border: none;
      padding: 20px 40px;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      border-radius: 12px;
      cursor: pointer;
      text-align: center;
      box-shadow: 0 4px 16px rgba(22, 163, 74, 0.3);
      transition: all 0.25s ease;
    }

    .result-cta:hover {
      background: var(--cta-hover);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(22, 163, 74, 0.4);
    }

    .quantity-selector {
      margin: 20px 0 24px;
    }

    .quantity-selector-label {
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .quantity-tabs {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .quantity-tab {
      flex: 1;
      min-width: 100px;
      background: #fff;
      border: 2px solid #e5e5e5;
      border-radius: 12px;
      padding: 16px 12px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s;
    }

    .quantity-tab:hover {
      border-color: var(--cta);
    }

    .quantity-tab.active {
      border-color: var(--cta);
      background: rgba(22, 163, 74, 0.04);
    }

    .quantity-tab .qty-count {
      display: block;
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 4px;
    }

    .quantity-tab .qty-price {
      display: block;
      font-size: 16px;
      font-weight: 700;
      color: var(--cta);
    }

    .quantity-tab .qty-badge {
      display: inline-block;
      background: var(--accent);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 4px;
      margin-top: 6px;
    }

    /* Quiz Mobile Responsive */
    @media (max-width: 640px) {
      .quiz-question {
        font-size: 28px;
        margin-bottom: 32px;
      }

      .quiz-option {
        padding: 20px 24px;
      }

      .quiz-option-title {
        font-size: 16px;
      }

      .quiz-option-desc {
        font-size: 16px;
      }

      .quiz-progress-step {
        width: 36px;
        height: 36px;
        font-size: 16px;
      }

      .quiz-progress-line {
        width: 24px;
      }

      .result-product-name {
        font-size: 28px;
      }

      .result-header {
        flex-direction: column;
        gap: 12px;
      }

      .result-product-price {
        text-align: left;
        align-items: flex-start;
        flex-direction: row;
        gap: 8px;
      }

      .result-product-price .price-per-dose {
        font-size: 28px;
      }

      .result-product-total {
        text-align: left;
        margin-top: 0;
      }

      .result-primary-card {
        padding: 24px 20px;
      }

      .result-why-match {
        font-size: 16px;
        padding: 14px 16px;
      }

      .result-ingredients-header {
        font-size: 16px;
      }

      .result-ingredient-card {
        padding: 16px;
      }

      .result-ingredient-name {
        font-size: 16px;
        gap: 8px;
      }

      .result-ingredient-dosage {
        font-size: 16px;
        padding: 3px 10px;
      }

      .result-ingredient-benefit {
        font-size: 16px;
      }

      .result-quick-specs {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
      }

      .result-quick-spec {
        text-align: left;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 12px;
      }

      .result-quick-spec:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }

      .quick-spec-label {
        font-size: 16px;
      }

      .quick-spec-value {
        font-size: 16px;
      }

      .quantity-tabs {
        flex-direction: column;
      }

      .quantity-tab {
        min-width: 100%;
      }

      .result-cta {
        font-size: 16px;
        padding: 18px 32px;
      }
    }

    /* Quiz Floating Button */
    .quiz-floating-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 1000;
      background: var(--cta);
      color: #fff;
      border: none;
      padding: 16px 24px;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      border-radius: 50px;
      cursor: pointer;
      display: none;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 20px rgba(22, 163, 74, 0.4);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .quiz-floating-btn.visible {
      display: flex;
    }

    .quiz-floating-btn:hover {
      background: var(--cta-hover);
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(22, 163, 74, 0.5);
    }

    .quiz-floating-btn svg {
      width: 18px;
      height: 18px;
    }

    /* Quick Specs Row */
    .result-quick-specs {
      display: flex;
      gap: 24px;
      margin-bottom: 24px;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 12px;
    }

    .result-quick-spec {
      flex: 1;
      text-align: center;
    }

    .quick-spec-label {
      font-size: 16px;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 6px;
      font-weight: 600;
    }

    .quick-spec-value {
      font-size: 16px;
      font-weight: 700;
      color: var(--primary);
    }

    .result-cta {
      display: block;
      width: 100%;
      background: var(--cta);
      color: #fff;
      border: none;
      padding: 20px 40px;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      border-radius: 12px;
      cursor: pointer;
      text-align: center;
      box-shadow: 0 4px 16px rgba(22, 163, 74, 0.3);
      transition: all 0.25s ease;
    }

    .result-cta:hover {
      background: var(--cta-hover);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(22, 163, 74, 0.4);
    }

    .quantity-selector {
      margin: 20px 0 24px;
    }

    .quantity-selector-label {
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .quantity-tabs {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .quantity-tab {
      flex: 1;
      min-width: 100px;
      background: #fff;
      border: 2px solid #e5e5e5;
      border-radius: 12px;
      padding: 16px 12px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s;
    }

    .quantity-tab:hover {
      border-color: var(--cta);
    }

    .quantity-tab.active {
      border-color: var(--cta);
      background: rgba(22, 163, 74, 0.04);
    }

    .quantity-tab .qty-count {
      display: block;
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 4px;
    }

    .quantity-tab .qty-price {
      display: block;
      font-size: 16px;
      font-weight: 700;
      color: var(--cta);
    }

    .quantity-tab .qty-badge {
      display: inline-block;
      background: var(--accent);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 4px;
      margin-top: 6px;
    }

    /* Quiz Mobile Responsive */
    @media (max-width: 640px) {
      .quiz-question {
        font-size: 28px;
        margin-bottom: 32px;
      }

      .quiz-option {
        padding: 20px 24px;
      }

      .quiz-option-title {
        font-size: 16px;
      }

      .quiz-option-desc {
        font-size: 16px;
      }

      .quiz-progress-step {
        width: 36px;
        height: 36px;
        font-size: 16px;
      }

      .quiz-progress-line {
        width: 24px;
      }

      .result-product-name {
        font-size: 28px;
      }

      .result-header {
        flex-direction: column;
        gap: 12px;
      }

      .result-product-price {
        text-align: left;
        align-items: flex-start;
        flex-direction: row;
        gap: 8px;
      }

      .result-product-price .price-per-dose {
        font-size: 28px;
      }

      .result-product-total {
        text-align: left;
        margin-top: 0;
      }

      .result-primary-card {
        padding: 24px 20px;
      }

      .result-why-match {
        font-size: 16px;
        padding: 14px 16px;
      }

      .result-ingredients-header {
        font-size: 16px;
      }

      .result-ingredient-card {
        padding: 16px;
      }

      .result-ingredient-name {
        font-size: 16px;
        gap: 8px;
      }

      .result-ingredient-dosage {
        font-size: 16px;
        padding: 3px 10px;
      }

      .result-ingredient-benefit {
        font-size: 16px;
      }

      .result-quick-specs {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
      }

      .result-quick-spec {
        text-align: left;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 12px;
      }

      .result-quick-spec:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }

      .quick-spec-label {
        font-size: 16px;
      }

      .quick-spec-value {
        font-size: 16px;
      }

      .quantity-tabs {
        flex-direction: column;
      }

      .quantity-tab {
        min-width: 100%;
      }

      .result-cta {
        font-size: 16px;
        padding: 18px 32px;
      }
    }

    /* Quiz Floating Button */
    .quiz-floating-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 1000;
      background: var(--cta);
      color: #fff;
      border: none;
      padding: 16px 24px;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      border-radius: 50px;
      cursor: pointer;
      display: none;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 20px rgba(22, 163, 74, 0.4);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .quiz-floating-btn.visible {
      display: flex;
    }

    .quiz-floating-btn:hover {
      background: var(--cta-hover);
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(22, 163, 74, 0.5);
    }

    .quiz-floating-btn svg {
      width: 18px;
      height: 18px;
    }

    /* ========================================
       QUIZ RESULTS V3 - PREMIUM REDESIGN
    ======================================== */

    .quiz-results-v3 {
      display: none;
      position: relative;
      max-height: 100vh;
      max-height: 100dvh;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      background: #f8fafc;
    }

    .quiz-results-v3.active {
      display: block;
    }

    /* Close Button */
    .qr3-close-btn {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 100;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(0, 0, 0, 0.1);
      color: #1e293b;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .qr3-close-btn:hover {
      background: #fff;
      color: #1e293b;
      transform: scale(1.05);
    }

    /* ========== Hero V2 - Mobile-First Compact ========== */
    .qr3-hero-v2 {
      background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
      color: #fff;
      padding: 20px 16px 24px;
    }

    .qr3-v2-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.25);
      border-radius: 20px;
      padding: 5px 12px;
      margin-bottom: 12px;
    }

    .qr3-v2-badge svg {
      color: #34d399;
    }

    .qr3-v2-badge span {
      font-size: 16px;
      font-weight: 500;
      color: #6ee7b7;
    }

    .qr3-v2-headline {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.1;
      margin: 0 0 8px 0;
    }

    .qr3-v2-proof {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }

    .qr3-v2-stars {
      color: #fbbf24;
      font-size: 16px;
      letter-spacing: -1px;
    }

    .qr3-v2-proof-text {
      font-size: 16px;
      color: #1e293b;
    }

    .qr3-v2-proof-text strong {
      color: #cbd5e1;
    }

    /* Product Card - Horizontal Layout */
    .qr3-v2-product-card {
      display: flex !important;
      flex-direction: row !important;
      align-items: center;
      gap: 16px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 12px;
      margin-bottom: 16px;
    }

    .qr3-v2-product-img {
      position: relative;
      flex: 0 0 90px !important;
      width: 90px !important;
      height: 90px !important;
      min-width: 90px;
      max-width: 90px;
      overflow: hidden;
      border-radius: 12px;
    }

    .qr3-v2-product-img img {
      width: 100% !important;
      height: 100% !important;
      max-width: 90px !important;
      max-height: 90px !important;
      object-fit: cover;
      border-radius: 12px;
      display: block;
    }

    .qr3-v2-discount-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
      z-index: 2;
    }

    .qr3-v2-product-info {
      flex: 1 1 auto;
      min-width: 0;
    }

    .qr3-v2-product-label {
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #1e293b;
      display: block;
      margin-bottom: 2px;
    }

    .qr3-v2-product-name {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 700;
      margin: 0 0 6px 0;
      background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .qr3-v2-price-row {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    .qr3-v2-price-old {
      font-size: 16px;
      color: #1e293b;
      text-decoration: line-through;
    }

    .qr3-v2-price-new {
      font-size: 1.5rem;
      font-weight: 700;
      color: #4ade80;
    }

    /* CTA Button */
    .qr3-v2-cta {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px 24px;
      background: #16a34a;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 4px 20px rgba(22, 163, 74, 0.4);
      position: relative;
      overflow: hidden;
    }

    .qr3-v2-cta::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      animation: shimmer 2s infinite;
    }

    .qr3-v2-cta:hover {
      background: #15803d;
      transform: translateY(-2px);
      box-shadow: 0 6px 28px rgba(22, 163, 74, 0.5);
    }

    .qr3-v2-cta:active {
      transform: translateY(0);
    }

    .qr3-v2-subtext {
      text-align: center;
      font-size: 16px;
      color: #1e293b;
      margin: 12px 0 0 0;
    }

    /* Desktop adjustments for V2 hero */
    @media (min-width: 640px) {
      .qr3-hero-v2 {
        padding: 32px 24px 32px;
        text-align: center;
      }

      .qr3-v2-headline {
        font-size: 2rem;
      }

      .qr3-v2-proof {
        justify-content: center;
      }

      .qr3-v2-product-card {
        max-width: 400px;
        margin: 0 auto 20px;
        padding: 16px;
      }

      .qr3-v2-product-img {
        flex: 0 0 110px !important;
        width: 110px !important;
        height: 110px !important;
        min-width: 110px;
        max-width: 110px;
      }

      .qr3-v2-product-img img {
        max-width: 110px !important;
        max-height: 110px !important;
      }

      .qr3-v2-cta {
        max-width: 360px;
        margin: 0 auto;
        padding: 18px 28px;
        font-size: 16px;
      }

      .qr3-v2-subtext {
        margin-top: 14px;
      }
    }

    /* ========== Legacy Hero (keeping for fallback) ========== */
    .qr3-hero {
      display: none;
      /* Hidden - using V2 now */
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
      color: #fff;
      padding: 32px 20px 24px;
      text-align: center;
    }

    .qr3-hero-inner {
      max-width: 600px;
      margin: 0 auto;
    }

    .qr3-badge-complete {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(16, 185, 129, 0.2);
      border: 1px solid rgba(16, 185, 129, 0.3);
      border-radius: 50px;
      padding: 6px 14px;
      margin-bottom: 12px;
    }

    .qr3-badge-complete svg {
      color: #34d399;
      width: 14px;
      height: 14px;
    }

    .qr3-badge-complete span {
      font-size: 16px;
      font-weight: 500;
      color: #6ee7b7;
    }

    .qr3-hero-title {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 4.5vw, 2.25rem);
      font-weight: 700;
      line-height: 1.15;
      margin-bottom: 16px;
    }

    .qr3-hero-image {
      display: flex;
      justify-content: center;
      margin-bottom: 16px;
    }

    .qr3-hero-image img {
      width: 100%;
      max-width: 260px;
      height: auto;
      border-radius: 16px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    }

    .qr3-product-gradient {
      display: block;
      background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Product-specific gradients */
    .gradient-drive {
      background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    }

    .gradient-driveplus {
      background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    }

    .gradient-redpill {
      background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    }

    .gradient-mach1 {
      background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    }

    .gradient-overdriveplus {
      background: linear-gradient(135deg, #c084fc 0%, #9333ea 100%);
    }

    .gradient-boost {
      background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    }

    .gradient-cruisecontrol {
      background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    }

    .gradient-epiqchew {
      background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%);
    }

    /* Hero CTA Button */
    .qr3-hero-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #16a34a;
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 16px 32px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 20px rgba(22, 163, 74, 0.4);
      width: 100%;
      max-width: 320px;
    }

    .qr3-hero-cta:hover {
      background: #15803d;
      transform: translateY(-2px);
      box-shadow: 0 6px 30px rgba(22, 163, 74, 0.5);
    }

    .qr3-hero-cta:active {
      transform: translateY(0);
    }

    .qr3-hero-subtext {
      font-size: 16px;
      color: #1e293b;
      margin-top: 12px;
      margin-bottom: 0;
    }

    /* Social Proof Bar */
    .qr3-social-bar {
      display: none;
      /* Hidden - stats now inline in V2 hero */
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding: 10px 20px;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .qr3-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 4px;
      padding: 8px 6px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .qr3-stat strong {
      font-size: 16px;
      font-weight: 800;
      color: #fff;
      display: block;
    }

    .qr3-stat span:not(strong) {
      font-size: 16px;
      color: #1e293b;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .qr3-stat svg {
      color: var(--brand-gold);
    }

    .qr3-stat svg[fill="currentColor"] {
      color: #fbbf24;
      fill: #fbbf24;
    }

    .qr3-stat strong {
      color: #fff;
    }

    /* Main Content */
    .qr3-content {
      max-width: 640px;
      margin: 0 auto;
      padding: 24px 16px 120px;
    }

    /* Product Card */
    .qr3-product-card {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      margin-bottom: 20px;
    }

    .qr3-discount-banner {
      background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
      padding: 14px 16px;
      text-align: center;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .qr3-offer-label {
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      opacity: 0.8;
    }

    .qr3-offer-value {
      font-size: 16px;
      font-weight: 800;
    }

    .qr3-card-inner {
      padding: 24px;
    }

    /* Product Header */
    .qr3-product-header {
      display: flex;
      gap: 16px;
      margin-bottom: 20px;
    }

    .qr3-product-image {
      width: 80px;
      height: 80px;
      min-width: 80px;
      background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .qr3-product-image img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .qr3-product-info h2 {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: #1e293b;
      margin: 0 0 4px;
    }

    .qr3-tagline {
      font-size: 16px;
      color: #1e293b;
      margin: 0 0 8px;
    }

    .qr3-rating {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .qr3-stars {
      color: #fbbf24;
      font-size: 16px;
      letter-spacing: 1px;
    }

    .qr3-review-count {
      font-size: 16px;
      color: #1e293b;
    }

    /* Key Differentiator Box */
    .qr3-differentiator {
      display: flex;
      gap: 16px;
      background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
      border: 1px solid #dbeafe;
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 20px;
    }

    .qr3-diff-icon {
      width: 44px;
      height: 44px;
      min-width: 44px;
      background: #dbeafe;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .qr3-diff-icon svg {
      color: #2563eb;
    }

    .qr3-diff-content h3 {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 6px;
    }

    .qr3-diff-content p {
      font-size: 16px;
      color: #1e293b;
      margin: 0;
      line-height: 1.5;
    }

    /* Upgrade Section */
    .qr3-upgrade {
      background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
      border: 1px solid #fcd34d;
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 20px;
    }

    .qr3-upgrade-content {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .qr3-upgrade-icon {
      width: 40px;
      height: 40px;
      min-width: 40px;
      background: #fbbf24;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .qr3-upgrade-icon svg {
      color: #78350f;
    }

    .qr3-upgrade-text {
      flex: 1;
    }

    .qr3-upgrade-title {
      font-size: 16px;
      font-weight: 600;
      color: #78350f;
      margin-bottom: 2px;
    }

    .qr3-upgrade-desc {
      font-size: 16px;
      color: #92400e;
      line-height: 1.4;
    }

    /* Toggle Switch */
    .qr3-toggle {
      position: relative;
      display: inline-flex;
      cursor: pointer;
    }

    .qr3-toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .qr3-toggle-slider {
      width: 52px;
      height: 28px;
      background: #d1d5db;
      border-radius: 14px;
      position: relative;
      transition: background 0.2s;
    }

    .qr3-toggle-slider::after {
      content: '';
      position: absolute;
      width: 24px;
      height: 24px;
      background: #fff;
      border-radius: 50%;
      top: 2px;
      left: 2px;
      transition: transform 0.2s;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .qr3-toggle input:checked+.qr3-toggle-slider {
      background: #22c55e;
    }

    .qr3-toggle input:checked+.qr3-toggle-slider::after {
      transform: translateX(24px);
    }

    .qr3-upgrade-confirm {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px dashed #fcd34d;
      font-size: 16px;
      color: #166534;
    }

    .qr3-upgrade-confirm svg {
      color: #22c55e;
    }

    /* Plan Selection */
    .qr3-plan-selection {
      margin-bottom: 20px;
    }

    .qr3-plan-selection h3 {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 12px;
    }

    .qr3-plans {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .qr3-plan-option {
      width: 100%;
      padding: 16px;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      background: #fff;
      cursor: pointer;
      transition: all 0.2s;
      text-align: left;
      position: relative;
    }

    .qr3-plan-option:hover {
      border-color: #cbd5e1;
    }

    .qr3-plan-option.active {
      border-color: #1e293b;
      background: #f8fafc;
    }

    .qr3-plan-badge {
      position: absolute;
      top: -10px;
      left: 16px;
      font-size: 16px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 20px;
      text-transform: uppercase;
    }

    .qr3-plan-badge.popular {
      background: #fbbf24;
      color: #78350f;
    }

    .qr3-plan-badge.best {
      background: #10b981;
      color: #fff;
    }

    .qr3-plan-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .qr3-plan-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .qr3-plan-radio {
      width: 22px;
      height: 22px;
      min-width: 22px;
      border: 2px solid #cbd5e1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .qr3-plan-option.active .qr3-plan-radio {
      border-color: #1e293b;
      background: #1e293b;
    }

    .qr3-plan-radio svg {
      color: #fff;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .qr3-plan-option.active .qr3-plan-radio svg {
      opacity: 1;
    }

    .qr3-plan-details {
      display: flex;
      flex-direction: column;
    }

    .qr3-plan-name {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
    }

    .qr3-plan-per {
      font-size: 16px;
      color: #1e293b;
    }

    .qr3-plan-right {
      text-align: right;
    }

    .qr3-plan-original {
      font-size: 16px;
      color: #1e293b;
      text-decoration: line-through;
    }

    .qr3-plan-price {
      font-size: 16px;
      font-weight: 700;
      color: #1e293b;
    }

    .qr3-plan-savings {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #e2e8f0;
      font-size: 16px;
    }

    .qr3-plan-savings-label {
      color: #1e293b;
    }

    .qr3-plan-savings-amount {
      color: #059669;
      font-weight: 600;
    }

    /* Primary CTA */
    .qr3-cta-primary {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 20px 28px;
      background: #16a34a;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      border: none;
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.2s;
      margin-bottom: 16px;
      box-shadow: 0 4px 20px rgba(22, 163, 74, 0.4);
      position: relative;
      overflow: hidden;
    }

    .qr3-cta-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
      100% {
        left: 100%;
      }
    }

    .qr3-cta-primary:hover {
      background: #15803d;
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(22, 163, 74, 0.5);
    }

    .qr3-cta-price {
      opacity: 0.9;
    }

    /* Trust Row */
    .qr3-trust-row {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 12px;
    }

    .qr3-trust-row span {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 16px;
      color: #1e293b;
    }

    .qr3-trust-row svg {
      color: #1e293b;
    }

    /* Security Note */
    .qr3-security {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 16px;
      color: #1e293b;
    }

    /* Sections */
    .qr3-section {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      padding: 24px;
      margin-bottom: 20px;
    }

    .qr3-section-title {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 700;
      color: #1e293b;
      margin: 0 0 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .qr3-section-title svg {
      color: #1e293b;
    }

    /* Timeline */
    .qr3-timeline {
      position: relative;
    }

    .qr3-timeline::before {
      content: '';
      position: absolute;
      left: 19px;
      top: 32px;
      bottom: 32px;
      width: 2px;
      background: #e2e8f0;
    }

    .qr3-timeline-item {
      display: flex;
      gap: 16px;
      margin-bottom: 20px;
    }

    .qr3-timeline-item:last-child {
      margin-bottom: 0;
    }

    .qr3-timeline-number {
      width: 40px;
      height: 40px;
      min-width: 40px;
      background: #1e293b;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      position: relative;
      z-index: 1;
    }

    .qr3-timeline-content {
      padding-top: 4px;
    }

    .qr3-timeline-phase {
      font-size: 16px;
      font-weight: 600;
      color: #059669;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .qr3-timeline-title {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 4px;
    }

    .qr3-timeline-desc {
      font-size: 16px;
      color: #1e293b;
      line-height: 1.5;
    }

    /* Comparison Table */
    .qr3-comparison-wrapper {
      overflow-x: auto;
    }

    .qr3-comparison {
      width: 100%;
      border-collapse: collapse;
      font-size: 16px;
    }

    .qr3-comparison th {
      padding: 12px 8px;
      text-align: center;
      font-weight: 500;
      color: #1e293b;
      border-bottom: 1px solid #e2e8f0;
    }

    .qr3-comparison th:first-child {
      text-align: left;
    }

    .qr3-comparison .qr3-comp-us {
      background: #1e293b;
      color: #fff;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 16px;
      font-weight: 700;
      display: inline-block;
    }

    .qr3-comparison td {
      padding: 12px 8px;
      border-bottom: 1px solid #f1f5f9;
      text-align: center;
    }

    .qr3-comparison td:first-child {
      text-align: left;
      color: #1e293b;
    }

    .qr3-comparison-check {
      color: #059669;
    }

    .qr3-comparison-x {
      color: #cbd5e1;
    }

    .qr3-comparison-footnote {
      font-size: 16px;
      color: #1e293b;
      margin-top: 12px;
    }

    /* Expandable Sections */
    .qr3-expandable-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      text-align: left;
    }

    .qr3-expandable-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 700;
      color: #1e293b;
    }

    .qr3-expandable-title svg {
      color: #1e293b;
    }

    .qr3-chevron {
      color: #1e293b;
      transition: transform 0.2s;
    }

    .qr3-chevron.open {
      transform: rotate(180deg);
    }

    .qr3-expandable-content {
      display: none;
      margin-top: 20px;
    }

    .qr3-expandable-content.open {
      display: block;
    }

    /* Ingredients */
    .qr3-ingredient-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: #f8fafc;
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 10px;
    }

    .qr3-ingredient-item:last-child {
      margin-bottom: 0;
    }

    .qr3-ingredient-icon {
      color: #1e293b;
      margin-top: 2px;
    }

    .qr3-ingredient-name {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 2px;
    }

    .qr3-ingredient-amount {
      display: inline-block;
      font-size: 16px;
      background: #e2e8f0;
      color: #1e293b;
      padding: 2px 8px;
      border-radius: 10px;
      margin-left: 8px;
    }

    .qr3-ingredient-benefit {
      font-size: 16px;
      color: #1e293b;
    }

    .qr3-ingredients-note {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid #e2e8f0;
      font-size: 16px;
      color: #1e293b;
    }

    /* Testimonials */
    .qr3-testimonials-header {
      margin-bottom: 16px;
    }

    .qr3-testimonials-subtitle {
      font-size: 16px;
      color: #1e293b;
      margin: 8px 0 0;
    }

    .qr3-testimonials {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .qr3-testimonial-card {
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px;
    }

    .qr3-testimonial-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .qr3-testimonial-stars {
      color: #fbbf24;
      font-size: 16px;
      letter-spacing: 1px;
    }

    .qr3-testimonial-date {
      font-size: 16px;
      color: #1e293b;
    }

    .qr3-testimonial-text {
      font-size: 16px;
      color: #1e293b;
      line-height: 1.6;
      margin-bottom: 12px;
    }

    .qr3-testimonial-author {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .qr3-author-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .qr3-author-avatar {
      width: 36px;
      height: 36px;
      background: #e2e8f0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
    }

    .qr3-author-name {
      font-size: 16px;
      font-weight: 500;
      color: #1e293b;
    }

    .qr3-author-location {
      font-size: 16px;
      color: #1e293b;
    }

    .qr3-verified-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 16px;
      font-weight: 500;
      color: #059669;
      background: #ecfdf5;
      padding: 4px 10px;
      border-radius: 20px;
    }

    /* Product Showcase Section */
    .qr3-product-showcase {
      margin-bottom: 20px;
    }

    .qr3-showcase-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
      border-radius: 20px;
      padding: 24px;
      border: 1px solid #e2e8f0;
    }

    .qr3-showcase-img {
      width: 100%;
      max-width: 280px;
      height: auto;
      border-radius: 16px;
      margin-bottom: 20px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

    .qr3-showcase-details {
      text-align: center;
    }

    .qr3-showcase-details h3 {
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 6px;
    }

    .qr3-showcase-tagline {
      font-size: 16px;
      color: #1e293b;
      margin-bottom: 16px;
    }

    .qr3-showcase-trust {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .qr3-trust-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 16px;
      font-weight: 500;
      color: #059669;
    }

    .qr3-trust-item svg {
      color: #059669;
      flex-shrink: 0;
    }

    /* Guarantee Section */
    .qr3-guarantee {
      display: flex;
      gap: 16px;
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
      border-radius: 20px;
      padding: 24px;
      margin-bottom: 20px;
      color: #fff;
    }

    .qr3-guarantee-icon {
      width: 56px;
      height: 56px;
      min-width: 56px;
      background: #fbbf24;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .qr3-guarantee-icon svg {
      color: #1e293b;
    }

    .qr3-guarantee-content h3 {
      font-size: 16px;
      font-weight: 700;
      margin: 0 0 10px;
    }

    .qr3-guarantee-content p {
      font-size: 16px;
      color: #cbd5e1;
      margin: 0 0 10px;
      line-height: 1.5;
    }

    .qr3-guarantee-stat {
      font-size: 16px;
      font-weight: 500;
      color: #fbbf24 !important;
    }

    /* FAQ Accordion */
    .qr3-faq-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .qr3-faq-item {
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      overflow: hidden;
    }

    .qr3-faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px;
      background: #fff;
      border: none;
      cursor: pointer;
      text-align: left;
      transition: background 0.2s;
    }

    .qr3-faq-question:hover {
      background: #f8fafc;
    }

    .qr3-faq-question span {
      font-size: 16px;
      font-weight: 500;
      color: #1e293b;
    }

    .qr3-faq-question svg {
      min-width: 20px;
      color: #1e293b;
      transition: transform 0.2s;
    }

    .qr3-faq-question.open svg {
      transform: rotate(180deg);
    }

    .qr3-faq-answer {
      display: none;
      padding: 0 16px 16px;
      font-size: 16px;
      color: #1e293b;
      line-height: 1.6;
    }

    .qr3-faq-answer.open {
      display: block;
    }

    /* Final CTA */
    .qr3-final-cta {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      padding: 24px;
      text-align: center;
      margin-bottom: 20px;
    }

    .qr3-final-cta h3 {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: #1e293b;
      margin: 0 0 8px;
    }

    .qr3-final-cta>p {
      font-size: 16px;
      color: #1e293b;
      margin: 0 0 20px;
    }

    .qr3-final-price-summary {
      background: #f8fafc;
      border-radius: 14px;
      padding: 16px;
      margin-bottom: 16px;
    }

    .qr3-final-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
    }

    .qr3-final-row:first-child {
      margin-bottom: 8px;
    }

    .qr3-final-row span {
      color: #1e293b;
    }

    .qr3-original {
      color: #1e293b;
      text-decoration: line-through;
      margin-right: 8px;
    }

    .qr3-final-row strong {
      font-size: 16px;
      color: #1e293b;
    }

    .qr3-savings {
      color: #059669;
      font-weight: 600;
    }

    .qr3-final-trust {
      font-size: 16px;
      color: #1e293b;
      margin: 16px 0 0;
    }

    /* Alternatives Section */
    .qr3-alternatives-wrapper {
      position: relative;
      padding: 20px 0;
      margin-bottom: 20px;
    }

    .qr3-alternatives-wrapper::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 1px;
      border-top: 1px dashed #cbd5e1;
    }

    .qr3-alternatives-label {
      position: relative;
      display: inline-block;
      background: #f8fafc;
      padding: 0 16px;
      font-size: 16px;
      font-weight: 500;
      color: #1e293b;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 20px;
    }

    .qr3-alternatives {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .qr3-alt-card {
      display: flex;
      align-items: center;
      gap: 14px;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .qr3-alt-card:hover {
      border-color: #cbd5e1;
      background: #f8fafc;
    }

    .qr3-alt-image {
      width: 52px;
      height: 52px;
      min-width: 52px;
      background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .qr3-alt-image img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .qr3-alt-content {
      flex: 1;
    }

    .qr3-alt-name {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
    }

    .qr3-alt-tagline {
      font-size: 16px;
      color: #1e293b;
    }

    .qr3-alt-action {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
    }

    .qr3-alt-price {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
    }

    .qr3-alt-price-label {
      font-size: 16px;
      color: #1e293b;
    }

    .qr3-alt-arrow {
      color: #1e293b;
      transition: transform 0.2s;
    }

    .qr3-alt-card:hover .qr3-alt-arrow {
      transform: translateX(4px);
      color: #1e293b;
    }

    /* View All Button */
    .qr3-view-all {
      display: block;
      width: 100%;
      padding: 14px;
      background: transparent;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      color: #1e293b;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
    }

    .qr3-view-all:hover {
      border-color: #cbd5e1;
      color: #1e293b;
    }

    /* Sticky Bottom Bar */
    .qr3-sticky-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      border-top: 1px solid #e2e8f0;
      padding: 12px 16px;
      z-index: 90;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    }

    .qr3-sticky-bar.visible {
      transform: translateY(0);
    }

    .qr3-sticky-inner {
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .qr3-sticky-info {
      display: flex;
      flex-direction: column;
    }

    .qr3-sticky-plan {
      font-size: 16px;
      font-weight: 600;
      color: #059669;
    }

    .qr3-sticky-price {
      font-size: 16px;
    }

    .qr3-sticky-original {
      color: #1e293b;
      text-decoration: line-through;
      margin-right: 6px;
      font-size: 16px;
    }

    .qr3-sticky-price strong {
      color: #1e293b;
    }

    .qr3-sticky-cta {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 20px;
      background: #16a34a;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      border: none;
      box-shadow: 0 2px 12px rgba(22, 163, 74, 0.4);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .qr3-sticky-cta:hover {
      background: #15803d;
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(22, 163, 74, 0.5);
    }

    /* Mobile Responsive */
    @media (max-width: 640px) {
      .qr3-hero {
        padding: 24px 16px 20px;
      }

      .qr3-hero-title {
        font-size: 1.35rem;
      }

      .qr3-social-bar {
        gap: 6px;
        padding: 8px 12px;
      }

      .qr3-stat {
        font-size: 16px;
      }

      .qr3-content {
        padding: 16px 12px 100px;
      }

      .qr3-card-inner,
      .qr3-section {
        padding: 20px;
      }

      .qr3-product-image {
        width: 64px;
        height: 64px;
        min-width: 64px;
      }

      .qr3-product-info h2 {
        font-size: 1.25rem;
      }

      .qr3-differentiator {
        flex-direction: column;
      }

      .qr3-trust-row {
        gap: 12px 20px;
      }

      .qr3-guarantee {
        flex-direction: column;
        text-align: center;
      }

      .qr3-guarantee-icon {
        margin: 0 auto;
      }
    }

    /* ========================================
       COMPREHENSIVE MOBILE FIXES (375px - 768px)
       Fixes for: Navigation, Hero, Comparison Table,
       Filter Tabs, Floating Elements, Footer
    ======================================== */

    @media (max-width: 768px) {

      /* ========== NAVIGATION FIXES ========== */
      /* Hide nav links completely on mobile to prevent overlap */
      nav .nav-links {
        display: none !important;
      }

      /* Center the logo in nav */
      nav .nav-inner {
        justify-content: center;
        padding: 0 16px;
      }

      /* Ensure logo doesn't get cut off */
      nav .logo img {
        height: 28px;
        max-width: 160px;
        object-fit: contain;
      }

      /* Hide promo bar on smallest screens or make it compact */
      .promo-bar {
        padding: 10px 16px;
        font-size: 16px;
        line-height: 1.4;
      }

      .promo-bar span {
        display: inline-block;
        margin-bottom: 4px;
        margin-right: 8px;
        font-size: 16px;
        padding: 3px 8px;
      }

      /* ========== HERO SECTION FIXES ========== */
      /* Hero layout - ensure no overflow */
      .hero {
        padding: 0 0 24px;
        overflow-x: hidden !important;
      }

      .hero .container {
        padding: 0 16px;
        overflow: hidden;
      }

      /* Hero grid - single column */
      .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0;
      }

      /* Hero eyebrow - smaller on mobile */
      .hero-eyebrow {
        font-size: 16px;
        letter-spacing: 0.08em;
        margin-bottom: 12px;
        gap: 6px;
      }

      /* Hero title - prevent overflow & proper sizing */
      .hero-title {
        font-size: clamp(2.25rem, 10vw, 3rem) !important;
        line-height: 1.08 !important;
        margin-bottom: 16px;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      /* Hero subtitle - POWERFUL CONVERSION BULLETS */
      .hero-subtitle {
        font-size: clamp(14px, 4vw, 17px) !important;
        font-weight: 500;
        line-height: 1.5;
        margin: 0 auto 20px !important;
        padding: 0 16px !important;
        color: var(--text);
        display: inline-block !important;
        text-align: left;
      }

      .hero-subtitle li {
        font-size: clamp(14px, 4vw, 17px) !important;
        margin-bottom: 10px;
        padding-left: 28px;
        position: relative;
      }

      .hero-subtitle li:last-child {
        margin-bottom: 0;
      }

      .hero-subtitle li::before {
        content: '✓';
        position: absolute;
        left: 0;
        top: 1px;
        width: clamp(18px, 5vw, 22px);
        height: clamp(18px, 5vw, 22px);
        font-size: clamp(10px, 3vw, 13px);
        font-weight: 700;
        background: var(--accent);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* Hero price block */
      .hero-price-block {
        padding: 16px;
        margin-bottom: 20px;
      }

      .hero-price-new {
        font-size: 28px;
      }

      .hero-price-old {
        font-size: 16px;
      }

      /* Hero CTA buttons */
      .hero-cta {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
      }

      .hero-cta .btn {
        width: 100%;
        padding: 16px 20px;
        font-size: 16px;
      }

      /* Hero trust badges - responsive with wrapping */
      .hero-trust-badges {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
        padding: 12px 16px;
        justify-content: center;
        align-items: center;
        width: auto;
        max-width: calc(100% - 24px);
      }

      .hero-trust-badge {
        flex: 0 0 auto;
        padding: 0 clamp(4px, 1.5vw, 8px);
      }

      .hero-trust-badge .badge-label {
        font-size: clamp(9px, 2.5vw, 11px) !important;
        white-space: nowrap;
      }

      .hero-trust-badge .badge-icon svg {
        width: clamp(12px, 3vw, 14px);
        height: clamp(12px, 3vw, 14px);
      }

      /* Hero disclaimer */
      .hero-disclaimer {
        font-size: 10px;
        padding: 0 4px;
      }

      /* ========== SOCIAL PROOF BAR FIXES ========== */
      .social-proof {
        padding: 16px 0;
      }

      .social-proof-inner {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
      }

      /* ========== COMPARISON TABLE FIXES ========== */
      /* Make comparison table scrollable and readable on mobile */
      .comparison-card-container {
        margin: 20px -16px;
        border-radius: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .comparison-grid {
        min-width: 460px;
        /* Ensure minimum width so content doesn't collapse */
      }

      .comparison-cell {
        padding: 12px 8px;
        min-width: 100px;
      }

      .comparison-cell.header-cell {
        padding: 16px 8px;
      }

      .comparison-header-title {
        font-size: 16px !important;
        line-height: 1.2;
      }

      .comparison-header-subtitle {
        font-size: 16px !important;
        line-height: 1.3;
      }

      .comparison-cell-label {
        font-size: 16px;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
      }

      .comparison-cell-value {
        font-size: 16px;
      }

      /* ========== PRODUCT FILTER TABS FIXES ========== */
      /* Make filter tabs horizontally scrollable */
      .product-filter-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
        gap: 0;
        padding-bottom: 12px;
        margin: 0 -16px 24px;
        padding-left: 16px;
        padding-right: 16px;
        flex-wrap: nowrap;
      }

      .product-filter-tabs::-webkit-scrollbar {
        display: none;
      }

      .product-filter-tab {
        flex-shrink: 0;
        padding: 10px 16px;
        font-size: 16px;
        white-space: nowrap;
      }

      /* ========== PRODUCT CAROUSEL FIXES ========== */
      .products-carousel-wrapper {
        margin: 0 -16px;
        padding: 16px 0 32px;
      }

      .products-carousel-track {
        padding: 0 16px;
        gap: 12px;
      }

      .products-carousel-track .product-card {
        width: 260px;
        flex-shrink: 0;
      }

      /* ========== CONTENT SECTION FIXES ========== */
      .content-section {
        padding: 32px 0;
      }

      .container,
      .container-narrow {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }

      .section-eyebrow {
        font-size: 16px;
        letter-spacing: 0.1em;
      }

      .section-title {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
        line-height: 1.2;
        margin-bottom: 16px;
      }

      .section-subtitle {
        font-size: 16px;
        line-height: 1.5;
      }

      /* ========== HOW IT WORKS FIXES ========== */
      .how-it-works-section {
        padding: 48px 0;
      }

      .hiw-container {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 16px;
      }

      .how-it-works-header h2 {
        font-size: 16px !important;
        text-align: center;
      }

      .hiw-step {
        padding: 14px 16px;
        gap: 12px;
      }

      .hiw-step-orb {
        width: 40px;
        height: 40px;
      }

      .hiw-step-orb-inner span {
        font-size: 16px;
      }

      .hiw-step h3 {
        font-size: 16px;
      }

      .hiw-step p {
        font-size: 16px;
      }

      /* ========== INGREDIENT CARDS FIXES ========== */
      .ingredient-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 24px auto;
        padding: 0 16px;
      }

      .ingredient-card {
        padding: 24px 20px;
      }

      .ingredient-card h3 {
        font-size: 28px;
      }

      .ingredient-card .tagline {
        font-size: 16px;
      }

      .ingredient-card .body-copy {
        font-size: 16px;
      }

      /* ========== FLOATING BUTTON FIXES ========== */
      /* Reduce size and reposition floating elements */
      .quiz-floating-btn {
        bottom: 16px;
        right: 16px;
        padding: 12px 18px;
        font-size: 16px;
      }

      .scroll-guide {
        display: none !important;
        /* Hide scroll guide on mobile - it clutters the UI */
      }

      /* ========== STICKY CTA FIXES ========== */
      .sticky-cta {
        padding: 12px 16px;
      }

      .sticky-cta .btn {
        padding: 12px 20px;
        font-size: 16px;
      }

      /* ========== FOOTER FIXES ========== */
      .footer {
        padding: 40px 0 100px;
        /* Extra padding for sticky CTA */
      }

      .footer-main {
        flex-direction: column;
        gap: 32px;
        text-align: center;
      }

      .footer-brand {
        max-width: 100%;
        align-items: center;
      }

      .footer-brand img {
        height: 28px;
      }

      .footer-tagline {
        font-size: 16px;
        text-align: center;
      }

      .footer-nav {
        flex-wrap: wrap;
        gap: 24px 32px;
        justify-content: center;
      }

      .footer-col {
        min-width: 120px;
        text-align: center;
      }

      .footer-col h4 {
        font-size: 16px;
        margin-bottom: 12px;
      }

      .footer-col a {
        font-size: 16px;
        padding: 6px 0;
      }

      .footer-certifications {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
      }

      .footer-disclaimer {
        font-size: 16px;
        line-height: 1.5;
        padding: 16px;
      }

      .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding-top: 16px;
      }

      .footer-copyright {
        font-size: 16px;
      }

      /* ========== TESTIMONIALS FIXES ========== */
      .testimonials-section {
        padding: 48px 0;
      }

      .testimonial-columns {
        gap: 12px;
      }

      .testimonial-card {
        padding: 16px;
      }

      .testimonial-card .quote {
        font-size: 16px;
        line-height: 1.5;
      }

      /* ========== FAQ FIXES ========== */
      .faq-section {
        padding: 40px 0;
      }

      .faq-item {
        padding: 16px 0;
      }

      .faq-question {
        font-size: 16px;
        padding-right: 32px;
      }

      .faq-answer {
        font-size: 16px;
        line-height: 1.6;
      }

      /* ========== GUARANTEE SECTION FIXES ========== */
      .guarantee-section {
        padding: 40px 0;
      }

      .guarantee-badge {
        width: 64px;
        height: 64px;
      }

      .guarantee-badge svg {
        width: 32px;
        height: 32px;
      }

      .guarantee-title {
        font-size: 16px;
      }

      .guarantee-text {
        font-size: 16px;
      }

      /* ========== MODAL FIXES ========== */
      .product-modal-content {
        margin: 10px;
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 16px;
      }

      .modal-header {
        padding: 16px;
      }

      .modal-body {
        padding: 16px;
      }

      /* ========== QUIZ MODAL FIXES ========== */
      .quiz-entry-content {
        margin: 16px;
        padding: 24px 20px;
        border-radius: 20px;
      }

      .quiz-entry-title {
        font-size: 16px;
      }

      .quiz-entry-subtitle {
        font-size: 16px;
      }

      .quiz-entry-benefits {
        gap: 12px;
        flex-direction: column;
        align-items: flex-start;
      }

      .quiz-entry-benefit {
        font-size: 16px;
        font-weight: 600;
      }

      /* ========== FINAL CTA FIXES ========== */
      .final-cta {
        padding: 48px 0;
      }

      .final-cta-title {
        font-size: 16px !important;
        line-height: 1.2;
      }

      .final-cta-subtitle {
        font-size: 16px;
      }

      .final-trust {
        flex-direction: column;
        gap: 10px;
      }

      .final-trust span {
        font-size: 16px;
      }

      /* ========== BODY PADDING FOR STICKY CTA ========== */
      body {
        padding-bottom: 80px;
      }
    }

    /* ========== EXTRA SMALL SCREENS (< 375px) ========== */
    @media (max-width: 375px) {
      .hero-title {
        font-size: 2rem !important;
      }

      .section-title {
        font-size: 1.35rem !important;
      }

      .hero-subtitle li {
        font-size: 16px !important;
        padding-left: 28px;
      }

      .hero-subtitle li::before {
        width: 20px;
        height: 20px;
        font-size: 16px;
      }

      .comparison-grid {
        min-width: 380px;
      }

      .comparison-header-title {
        font-size: 16px !important;
      }

      .comparison-cell-value {
        font-size: 16px;
      }

      .product-filter-tab {
        padding: 8px 12px;
        font-size: 16px;
      }

      .products-carousel-track .product-card {
        width: 240px;
      }

      .nav .logo img {
        height: 24px;
        max-width: 140px;
      }
    }

    /* ========================================
       PRODUCT MODAL V2 - HIGH-CONVERTING DESIGN
    ======================================== */
    .product-modal-v2 {
      max-width: 480px;
      width: 100%;
      border-radius: 16px;
      overflow: hidden;
      background: #fff;
    }

    .product-modal-v2 .product-modal-body {
      padding: 20px;
      max-height: calc(100vh - 60px);
      overflow-y: auto;
    }

    .product-modal-v2 .product-modal-close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 32px;
      height: 32px;
      border: none;
      background: rgba(0, 0, 0, 0.06);
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      color: #666;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: background 0.2s;
    }

    .product-modal-v2 .product-modal-close:hover {
      background: rgba(0, 0, 0, 0.12);
    }

    /* HERO ROW - Image + Info Side by Side */
    .pm-hero-row {
      display: flex;
      gap: 20px;
      align-items: center;
      margin-bottom: 20px;
    }

    .pm-hero-image {
      flex: 0 0 160px;
      position: relative;
    }

    .pm-hero-image img {
      width: 160px;
      height: 160px;
      object-fit: contain;
      border-radius: 16px;
      background: var(--brand-blue-light);
      padding: 12px;
    }

    /* Hide badge on image - it's redundant with product name */
    .pm-badge {
      display: none;
    }

    .pm-hero-info {
      flex: 1;
      min-width: 0;
    }

    .pm-product-name {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 800;
      color: #0f172a;
      margin: 0 0 6px;
      line-height: 1.15;
    }

    .pm-product-tagline {
      font-size: 16px;
      font-style: italic;
      color: #1e293b;
      margin: 0 0 10px;
      line-height: 1.4;
    }

    .pm-rating-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .pm-stars {
      color: var(--brand-gold);
      font-size: 16px;
      letter-spacing: 0px;
    }

    .pm-rating-text {
      font-size: 16px;
      font-weight: 700;
      color: var(--brand-dark);
    }

    .pm-review-count {
      font-size: 16px;
      color: #6b7280;
    }

    .pm-specs-compact {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      color: #1e293b;
    }

    .pm-spec {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .pm-spec-divider {
      color: #cbd5e1;
    }

    /* PACKAGE SELECTOR */
    .pm-package-section {
      margin-bottom: 16px;
    }

    .pm-package-label {
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #1e293b;
      margin-bottom: 12px;
    }

    .pm-package-options {
      display: flex;
      gap: 10px;
    }

    .pm-package-option {
      flex: 1;
      padding: 16px 10px;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      background: #fff;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s;
      position: relative;
    }

    .pm-package-option:hover {
      border-color: #1e293b;
    }

    .pm-package-option.selected {
      border-color: var(--brand-blue);
      background: var(--brand-blue-light);
      box-shadow: 0 0 0 2px var(--brand-blue);
    }

    .pm-package-option.best-value {
      border-color: #f59e0b;
    }

    .pm-package-option.best-value.selected {
      background: #fffbeb;
      box-shadow: 0 0 0 1px #f59e0b;
    }

    .pm-package-option .pm-pkg-badge {
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 10px;
      background: #f59e0b;
      color: #fff;
      white-space: nowrap;
    }

    .pm-package-option .pm-pkg-qty {
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      display: block;
      margin-bottom: 4px;
    }

    .pm-package-option .pm-pkg-price {
      font-size: 16px;
      font-weight: 700;
      color: #1e3a8a;
    }

    .pm-package-option .pm-pkg-save {
      font-size: 16px;
      color: #059669;
      font-weight: 700;
      margin-top: 4px;
      display: block;
    }

    /* CTA BLOCK - Direct Response Style */
    .pm-cta-block {
      background: #fff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 16px;
      text-align: center;
    }

    .pm-price-display {
      text-align: center;
      margin-bottom: 20px;
    }

    .pm-your-price-label {
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #6b7280;
      margin-bottom: 8px;
    }

    .pm-price-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .pm-price-original {
      font-size: 26px;
      font-weight: 700;
      color: #374151;
      text-decoration: line-through;
      text-decoration-thickness: 2.5px;
      text-decoration-color: var(--brand-red);
      opacity: 0.85;
    }

    .pm-price-main {
      font-family: var(--font-display);
      font-size: 48px;
      font-weight: 800;
      color: var(--brand-green);
      line-height: 1;
    }

    .pm-price-per {
      display: block;
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      margin-top: 4px;
    }

    .pm-savings-badge {
      display: inline-block;
      margin-top: 12px;
      padding: 6px 16px;
      background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
      border: 1px solid #86efac;
      border-radius: 20px;
      font-size: 16px;
      font-weight: 700;
      color: #15803d;
    }

    .pm-savings-badge:empty {
      display: none;
    }

    .pm-buy-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 18px 24px;
      background: linear-gradient(135deg, #059669 0%, #10b981 100%);
      color: #fff;
      border: none;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
    }

    .pm-buy-btn:hover {
      background: linear-gradient(135deg, #047857 0%, #059669 100%);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(5, 150, 105, 0.4);
    }

    .pm-buy-btn svg {
      flex-shrink: 0;
    }

    .pm-trust-row {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 14px;
    }

    .pm-trust-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 16px;
      color: #1e293b;
      font-weight: 600;
    }

    .pm-trust-item svg {
      color: #059669;
      flex-shrink: 0;
      width: 16px;
      height: 16px;
    }

    /* QUIZ CTA - Prominent Alternative Path */
    .pm-quiz-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 14px 18px;
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
      border: 1px solid #f59e0b;
      border-radius: 12px;
      margin-bottom: 16px;
    }

    .pm-quiz-cta-text {
      font-size: 16px;
      font-weight: 600;
      color: #92400e;
    }

    .pm-quiz-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: var(--brand-blue);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      text-decoration: none;
      border-radius: 8px;
      transition: all 0.2s;
    }

    .pm-quiz-cta-btn:hover {
      background: #1e40af;
      transform: translateY(-1px);
    }

    .pm-quiz-cta-btn svg {
      flex-shrink: 0;
    }

    /* HOW IT WORKS STRIP */
    .pm-hiw-strip {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 18px;
      background: #0f172a;
      border-radius: 12px;
      margin-bottom: 18px;
    }

    .pm-hiw-step {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }

    .pm-hiw-arrow {
      color: #fbbf24;
      font-size: 16px;
    }

    /* TESTIMONIALS */
    .pm-testimonials-section {
      margin-bottom: 18px;
    }

    .pm-section-title {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 12px;
    }

    .pm-testimonials-track {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 8px;
      margin: 0 -20px;
      padding-left: 20px;
      padding-right: 20px;
    }

    .pm-testimonials-track::-webkit-scrollbar {
      height: 4px;
    }

    .pm-testimonials-track::-webkit-scrollbar-track {
      background: #f0f0f0;
      border-radius: 2px;
    }

    .pm-testimonials-track::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 2px;
    }

    .pm-testimonial-card {
      min-width: 260px;
      max-width: 280px;
      scroll-snap-align: start;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      flex-shrink: 0;
    }

    .pm-testimonial-card .pm-t-stars {
      color: #fbbf24;
      font-size: 16px;
      margin-bottom: 8px;
    }

    .pm-testimonial-card .pm-t-text {
      font-size: 16px;
      line-height: 1.5;
      color: #1e293b;
      margin-bottom: 10px;
      font-style: italic;
    }

    .pm-testimonial-card .pm-t-author {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
    }

    /* ACCORDION */
    .pm-accordion {
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
    }

    .pm-accordion summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 18px;
      background: #f8fafc;
      cursor: pointer;
      list-style: none;
    }

    .pm-accordion summary::-webkit-details-marker {
      display: none;
    }

    .pm-accordion-title {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }

    .pm-accordion-icon {
      font-size: 16px;
      color: #1e293b;
      transition: transform 0.2s;
    }

    .pm-accordion[open] .pm-accordion-icon {
      transform: rotate(45deg);
    }

    .pm-accordion-content {
      padding: 16px 18px;
      font-size: 16px;
      line-height: 1.6;
      color: #1e293b;
    }

    .pm-accordion-content p {
      margin: 0 0 12px;
    }

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

    /* Ingredient Cards in Accordion */
    .pm-accordion-content .ingredient-card {
      display: flex;
      gap: 12px;
      padding: 12px;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      margin-bottom: 10px;
    }

    .pm-accordion-content .ingredient-card:last-child {
      margin-bottom: 0;
    }

    .pm-accordion-content .ingredient-dosage {
      font-weight: 700;
      font-size: 16px;
      color: #1e3a8a;
      min-width: 90px;
      flex-shrink: 0;
    }

    .pm-accordion-content .ingredient-benefit {
      font-size: 16px;
      line-height: 1.5;
      color: #1e293b;
    }

    /* INGREDIENT CARDS WITH CITATIONS */
    .pm-ingredient-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px 14px;
      margin-bottom: 10px;
    }

    .pm-ingredient-card:last-child {
      margin-bottom: 0;
    }

    .pm-ingredient-dosage {
      font-weight: 700;
      font-size: 16px;
      color: #1e3a8a;
      margin-bottom: 6px;
      display: block;
    }

    .pm-ingredient-benefit {
      font-size: 16px;
      line-height: 1.5;
      color: #1e293b;
      margin-bottom: 10px;
    }

    .pm-compound-advantage {
      font-size: 16px;
      font-style: italic;
      color: #1e293b;
      background: linear-gradient(135deg, rgba(30, 58, 138, 0.05), rgba(184, 134, 11, 0.05));
      border-left: 3px solid #b8860b;
      padding: 8px 12px;
      margin: 10px 0;
      border-radius: 0 6px 6px 0;
    }

    /* COLLAPSIBLE CITATIONS */
    .pm-ingredient-citations {
      margin-top: 10px;
      border-top: 1px solid #e2e8f0;
      padding-top: 8px;
    }

    .pm-citations-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      padding: 6px 0;
      font-size: 16px;
      font-weight: 600;
      color: #1e3a8a;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      user-select: none;
      list-style: none;
    }

    .pm-citations-toggle::-webkit-details-marker {
      display: none;
    }

    .pm-citations-toggle svg {
      width: 14px;
      height: 14px;
      transition: transform 0.2s ease;
      color: #1e293b;
    }

    .pm-ingredient-citations[open] .pm-citations-toggle svg {
      transform: rotate(180deg);
    }

    .pm-citations-content {
      padding-top: 8px;
    }

    .pm-citation {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 10px 12px;
      margin-bottom: 8px;
    }

    .pm-citation:last-child {
      margin-bottom: 0;
    }

    .pm-citation-finding {
      display: block;
      font-size: 16px;
      font-weight: 600;
      color: #b8860b;
      margin-bottom: 6px;
      line-height: 1.4;
    }

    .pm-citation-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .pm-citation-source {
      font-size: 16px;
      color: #1e293b;
      flex: 1;
    }

    .pm-citation-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      background: #f1f5f9;
      border-radius: 4px;
      color: #1e293b;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .pm-citation-link:hover {
      background: #1e3a8a;
      color: #fff;
    }

    .pm-citation-link svg {
      width: 12px;
      height: 12px;
    }

    /* SECONDARY CTA */
    .pm-secondary-cta {
      text-align: center;
      margin-bottom: 16px;
      padding: 16px;
      background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
      border: 2px dashed var(--brand-blue);
      border-radius: 12px;
    }

    .pm-secondary-cta-label {
      font-size: 16px;
      font-weight: 600;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 8px;
    }

    .pm-secondary-cta a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 700;
      color: var(--brand-blue);
      text-decoration: none;
      transition: all 0.2s;
    }

    .pm-secondary-cta a:hover {
      color: #1e40af;
      gap: 12px;
    }

    .pm-secondary-cta a svg {
      transition: transform 0.2s;
    }

    .pm-secondary-cta a:hover svg {
      transform: translateX(4px);
    }

    /* FOOTER NOTE */
    .pm-footer-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 16px;
      color: #1e293b;
      text-align: center;
      margin: 0;
    }

    .pm-footer-note svg {
      flex-shrink: 0;
    }

    /* RESPONSIVE - MOBILE */
    @media (max-width: 480px) {
      .product-modal-v2 {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 92vh;
      }

      .product-modal-v2 .product-modal-body {
        padding: 18px;
      }

      .pm-hero-row {
        gap: 14px;
      }

      .pm-hero-image {
        flex: 0 0 120px;
      }

      .pm-hero-image img {
        width: 120px;
        height: 120px;
      }

      .pm-product-name {
        font-size: 16px;
      }

      .pm-product-tagline {
        font-size: 16px;
      }

      .pm-rating-row {
        gap: 6px;
      }

      .pm-stars {
        font-size: 16px;
      }

      .pm-rating-text {
        font-size: 16px;
      }

      .pm-review-count {
        font-size: 16px;
      }

      .pm-package-options {
        gap: 8px;
      }

      .pm-package-option {
        padding: 14px 8px;
      }

      .pm-package-option .pm-pkg-qty {
        font-size: 16px;
      }

      .pm-package-option .pm-pkg-price {
        font-size: 16px;
      }

      .pm-package-option .pm-pkg-save {
        font-size: 16px;
      }

      .pm-price-main {
        font-size: 44px;
      }

      .pm-price-per {
        font-size: 16px;
      }

      .pm-buy-btn {
        padding: 16px 20px;
        font-size: 16px;
      }

      /* Quiz CTA - Stack vertically on mobile */
      .pm-quiz-cta {
        flex-direction: column;
        gap: 10px;
        padding: 16px;
        text-align: center;
      }

      .pm-quiz-cta-text {
        font-size: 16px;
      }

      .pm-quiz-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: 16px;
      }

      /* HIW Strip - Cleaner mobile layout */
      .pm-hiw-strip {
        flex-direction: column;
        gap: 0;
        padding: 0;
        background: transparent;
        border-radius: 0;
      }

      .pm-hiw-step {
        font-size: 16px;
        padding: 10px 16px;
        background: #0f172a;
        border-radius: 8px;
        margin-bottom: 6px;
        text-align: center;
      }

      .pm-hiw-arrow {
        display: none;
      }

      .pm-trust-row {
        gap: 12px;
      }

      .pm-trust-item {
        font-size: 16px;
      }

      .pm-section-title {
        font-size: 16px;
      }

      .pm-testimonial-card {
        min-width: 220px;
        max-width: 240px;
        padding: 14px;
      }

      .pm-testimonial-card .pm-t-text {
        font-size: 16px;
      }

      .pm-accordion summary {
        padding: 14px 16px;
      }

      .pm-accordion-title {
        font-size: 16px;
      }

      .pm-accordion-content {
        padding: 14px 16px;
        font-size: 16px;
      }

      /* CITATION MOBILE STYLES */
      .pm-ingredient-card {
        padding: 10px 12px;
      }

      .pm-ingredient-dosage {
        font-size: 16px;
      }

      .pm-ingredient-benefit {
        font-size: 16px;
      }

      .pm-compound-advantage {
        font-size: 16px;
        padding: 6px 10px;
      }

      .pm-citation {
        padding: 8px 10px;
      }

      .pm-citation-finding {
        font-size: 16px;
      }

      .pm-citation-source {
        font-size: 16px;
      }

      .pm-citation-meta {
        flex-wrap: wrap;
      }
    }

    /* ===== MODAL ENRICHMENT - DIFFERENTIATOR ===== */
    .pm-differentiator {
      display: flex;
      gap: 16px;
      padding: 16px;
      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
      border: 1px solid #bae6fd;
      border-radius: 12px;
      margin: 16px 0;
    }

    .pm-diff-icon {
      width: 44px;
      height: 44px;
      min-width: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0ea5e9;
      border-radius: 10px;
      color: #fff;
    }

    .pm-diff-icon svg {
      width: 24px;
      height: 24px;
    }

    .pm-diff-content {
      flex: 1;
    }

    .pm-diff-title {
      font-size: 16px;
      font-weight: 700;
      color: #0c4a6e;
      margin: 0 0 4px 0;
    }

    .pm-diff-text {
      font-size: 16px;
      color: #1e293b;
      line-height: 1.5;
      margin: 0;
    }

    /* ===== MODAL ENRICHMENT - TIMELINE ===== */
    .pm-timeline-section {
      margin: 20px 0;
      padding: 0 4px;
    }

    .pm-timeline {
      position: relative;
      padding-left: 8px;
    }

    .pm-timeline::before {
      content: '';
      position: absolute;
      left: 19px;
      top: 20px;
      bottom: 20px;
      width: 2px;
      background: #e2e8f0;
    }

    .pm-timeline-item {
      display: flex;
      gap: 16px;
      margin-bottom: 16px;
      position: relative;
    }

    .pm-timeline-item:last-child {
      margin-bottom: 0;
    }

    .pm-timeline-number {
      width: 40px;
      height: 40px;
      min-width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #1e293b;
      color: #fff;
      border-radius: 50%;
      font-weight: 700;
      font-size: 16px;
      z-index: 1;
    }

    .pm-timeline-content {
      flex: 1;
      padding-top: 2px;
    }

    .pm-timeline-phase {
      font-size: 16px;
      font-weight: 600;
      color: #059669;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .pm-timeline-title {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 4px;
    }

    .pm-timeline-desc {
      font-size: 16px;
      color: #1e293b;
      line-height: 1.5;
    }

    /* ===== MODAL ENRICHMENT - COMPARISON TABLE ===== */
    .pm-comparison-section {
      margin: 20px 0;
    }

    .pm-comparison-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .pm-comparison {
      width: 100%;
      border-collapse: collapse;
      font-size: 16px;
    }

    .pm-comparison th {
      padding: 10px 6px;
      text-align: center;
      font-weight: 500;
      color: #1e293b;
      border-bottom: 1px solid #e2e8f0;
      font-size: 16px;
    }

    .pm-comparison th:first-child {
      text-align: left;
    }

    .pm-comp-us {
      background: #1e293b;
      color: #fff;
      border-radius: 6px;
      padding: 4px 10px;
      font-weight: 600;
      display: inline-block;
      font-size: 16px;
    }

    .pm-comparison td {
      padding: 10px 6px;
      border-bottom: 1px solid #f1f5f9;
      text-align: center;
    }

    .pm-comparison td:first-child {
      text-align: left;
      color: #1e293b;
      font-size: 16px;
    }

    .pm-comp-check {
      color: #059669;
    }

    .pm-comp-x {
      color: #cbd5e1;
    }

    .pm-comparison-footnote {
      font-size: 16px;
      color: #1e293b;
      margin-top: 10px;
      line-height: 1.4;
    }

    /* ===== MODAL ENRICHMENT - FAQS ===== */
    .pm-faq-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .pm-faq-item {
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
    }

    .pm-faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      background: #fff;
      border: none;
      cursor: pointer;
      text-align: left;
      transition: background 0.2s;
    }

    .pm-faq-question:hover {
      background: #f8fafc;
    }

    .pm-faq-question span {
      font-size: 16px;
      font-weight: 500;
      color: #1e293b;
    }

    .pm-faq-question svg {
      min-width: 20px;
      color: #1e293b;
      transition: transform 0.2s;
    }

    .pm-faq-question.open svg {
      transform: rotate(180deg);
    }

    .pm-faq-answer {
      display: none;
      padding: 0 14px 14px;
      font-size: 16px;
      color: #1e293b;
      line-height: 1.6;
    }

    .pm-faq-answer.open {
      display: block;
    }

    /* ===== MODAL ENRICHMENT - MOBILE RESPONSIVE ===== */
    @media (max-width: 480px) {
      .pm-differentiator {
        flex-direction: column;
        gap: 12px;
      }

      .pm-diff-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
      }

      .pm-diff-icon svg {
        width: 20px;
        height: 20px;
      }

      .pm-diff-title {
        font-size: 16px;
      }

      .pm-diff-text {
        font-size: 16px;
      }

      .pm-timeline::before {
        left: 15px;
      }

      .pm-timeline-number {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 16px;
      }

      .pm-timeline-phase {
        font-size: 16px;
      }

      .pm-timeline-title {
        font-size: 16px;
      }

      .pm-timeline-desc {
        font-size: 16px;
      }

      .pm-comparison {
        font-size: 16px;
      }

      .pm-comparison th {
        font-size: 16px;
        padding: 8px 4px;
      }

      .pm-comparison td {
        padding: 8px 4px;
      }

      .pm-comparison td:first-child {
        font-size: 16px;
      }

      .pm-comp-us {
        font-size: 16px;
        padding: 3px 6px;
      }

      .pm-faq-question span {
        font-size: 16px;
      }

      .pm-faq-answer {
        font-size: 16px;
      }
    }

    /* ========================================
       STICKY MOBILE CTA
    ======================================== */
    .sticky-mobile-cta {
      display: none;
    }

    @media (max-width: 640px) {
      .sticky-mobile-cta {
        display: none;
        /* DISABLED - replaced by new sticky CTA */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 12px 16px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        border-top: 1px solid #e2e8f0;
      }

      .sticky-mobile-cta .btn {
        width: 100%;
        padding: 16px 24px;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.04em;
        border-radius: 12px;
        text-align: center;
        justify-content: center;
      }

      /* Add padding to body so content doesn't hide behind sticky CTA */
      body {
        padding-bottom: 80px;
      }
    }

    /* ========================================
   NEW STICKY CTA BAR - Conversion Optimized
   ======================================== */
    .sticky-cta-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #000;
      padding: 12px 16px;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
      z-index: 9999;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .sticky-cta-bar.hidden {
      transform: translateY(100%);
      opacity: 0;
      pointer-events: none;
    }

    .sticky-cta-container {
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
    }

    .sticky-cta-btn {
      width: 100%;
      max-width: 400px;
      padding: 16px 32px;
      background: var(--cta, #16a34a);
      color: #fff;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.05em;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
      text-transform: uppercase;
    }

    .sticky-cta-btn:hover {
      background: var(--cta-hover, #15803d);
      transform: scale(1.02);
    }

    .sticky-cta-btn:active {
      transform: scale(0.98);
    }

    @media (min-width: 768px) {
      .sticky-cta-bar {
        padding: 16px 24px;
      }

      .sticky-cta-btn {
        font-size: 16px;
        padding: 18px 48px;
      }
    }

    /* Body padding to prevent content from hiding behind sticky CTA */
    body {
      padding-bottom: 80px !important;
    }

    /* ========================================
   CONVERSION QUIZ OVERLAY - 7 Screen Flow
   ======================================== */
    .conversion-quiz-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99999;
      background: #f8f9fa;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .conversion-quiz-overlay.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    /* Individual Screens */
    .cq-screen {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s ease;
      overflow-y: auto;
      padding: 20px;
    }

    .cq-screen.active {
      opacity: 1;
      visibility: visible;
    }

    /* Close Button */
    .cq-close-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 44px;
      height: 44px;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease;
      z-index: 10;
    }

    .cq-close-btn svg {
      color: #fff;
    }

    .cq-close-btn:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .cq-screen-question .cq-close-btn svg,
    .cq-screen-stat .cq-close-btn svg,
    .cq-screen-reviews .cq-close-btn svg {
      color: #1e293b;
    }

    .cq-screen-question .cq-close-btn,
    .cq-screen-stat .cq-close-btn,
    .cq-screen-reviews .cq-close-btn {
      background: rgba(0, 0, 0, 0.05);
    }

    .cq-screen-question .cq-close-btn:hover,
    .cq-screen-stat .cq-close-btn:hover,
    .cq-screen-reviews .cq-close-btn:hover {
      background: rgba(0, 0, 0, 0.1);
    }

    /* ========================================
   Screen 1: Loading Animation
   ======================================== */
    .cq-screen-loading {
      background: linear-gradient(145deg, #1e3a4f 0%, #1e293b 50%, #2d3748 100%);
    }

    .cq-loading-container {
      text-align: center;
      max-width: 400px;
      padding: 40px 20px;
    }

    .cq-progress-ring {
      position: relative;
      width: 140px;
      height: 140px;
      margin: 0 auto 32px;
    }

    .cq-progress-ring svg {
      transform: rotate(-90deg);
      width: 100%;
      height: 100%;
    }

    .cq-progress-bg {
      fill: none;
      stroke: rgba(255, 255, 255, 0.15);
      stroke-width: 8;
    }

    .cq-progress-bar {
      fill: none;
      stroke: #b8860b;
      stroke-width: 8;
      stroke-linecap: round;
      stroke-dasharray: 339.292;
      stroke-dashoffset: 339.292;
      transition: stroke-dashoffset 0.1s ease;
    }

    .cq-progress-percent {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 32px;
      font-weight: 700;
      color: #fff;
    }

    .cq-loading-title {
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 12px;
      line-height: 1.3;
    }

    .cq-loading-subtitle {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.5;
    }

    /* ========================================
   Question Screens (2 & 4)
   ======================================== */
    .cq-screen-question {
      background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
    }

    .cq-question-container {
      max-width: 500px;
      width: 100%;
      padding: 60px 20px 40px;
    }

    .cq-step-indicator {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 16px;
    }

    .cq-question-title {
      font-size: 28px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 8px;
      line-height: 1.2;
    }

    .cq-question-subtitle {
      font-size: 16px;
      color: #1e293b;
      margin-bottom: 32px;
    }

    /* Option Cards */
    .cq-options {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 32px;
    }

    .cq-option-card {
      display: block;
      background: #fff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .cq-option-card:hover {
      border-color: #b8860b;
      background: #fefce8;
    }

    .cq-option-card.selected {
      border-color: #b8860b;
      background: #fef3c7;
    }

    .cq-option-card input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .cq-option-content {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .cq-option-check {
      width: 24px;
      height: 24px;
      border: 2px solid #cbd5e1;
      border-radius: 6px;
      flex-shrink: 0;
      position: relative;
      transition: all 0.2s ease;
    }

    .cq-option-radio .cq-option-check {
      border-radius: 50%;
    }

    .cq-option-card.selected .cq-option-check {
      background: #b8860b;
      border-color: #b8860b;
    }

    .cq-option-card.selected .cq-option-check::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      background: #fff;
      border-radius: 2px;
    }

    .cq-option-radio.selected .cq-option-check::after {
      border-radius: 50%;
      width: 8px;
      height: 8px;
    }

    .cq-option-text {
      font-size: 16px;
      font-weight: 500;
      color: #1e293b;
      line-height: 1.4;
    }

    /* Continue Button */
    .cq-continue-btn {
      width: 100%;
      padding: 16px 32px;
      background: #b8860b;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .cq-continue-btn:hover:not(:disabled) {
      background: #9a7209;
      transform: translateY(-1px);
    }

    .cq-continue-btn:disabled {
      background: #cbd5e1;
      cursor: not-allowed;
    }

    .cq-continue-dark {
      background: #1e293b;
    }

    .cq-continue-dark:hover:not(:disabled) {
      background: #0f172a;
    }

    /* ========================================
   Stat Screens (3 & 5)
   ======================================== */
    .cq-screen-stat {
      background: linear-gradient(145deg, #f4f3f0 0%, #fff 100%);
    }

    .cq-stat-container {
      max-width: 700px;
      width: 100%;
      padding: 60px 20px 40px;
    }

    .cq-stat-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      margin-bottom: 40px;
    }

    @media (min-width: 640px) {
      .cq-stat-content {
        flex-direction: row;
        gap: 40px;
      }
    }

    .cq-stat-image {
      width: 200px;
      height: 200px;
      border-radius: 16px;
      overflow: hidden;
      background: linear-gradient(145deg, #e2e8f0, #f1f5f9);
      flex-shrink: 0;
    }

    .cq-stat-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cq-stat-text {
      text-align: center;
    }

    @media (min-width: 640px) {
      .cq-stat-text {
        text-align: left;
      }
    }

    .cq-stat-headline {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      line-height: 1.4;
      margin-bottom: 16px;
    }

    .cq-stat-number {
      font-size: 48px;
      font-weight: 800;
      color: #b8860b;
      display: block;
      margin-bottom: 8px;
    }

    .cq-stat-footnote {
      font-size: 16px;
      color: #1e293b;
      font-style: italic;
    }

    /* ========================================
   Reviews Screen (6)
   ======================================== */
    .cq-screen-reviews {
      background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
    }

    .cq-reviews-container {
      max-width: 600px;
      width: 100%;
      padding: 60px 20px 40px;
      text-align: center;
    }

    .cq-reviews-badge {
      display: inline-block;
      background: #fef3c7;
      color: #92400e;
      font-size: 16px;
      font-weight: 600;
      padding: 8px 20px;
      border-radius: 20px;
      margin-bottom: 32px;
    }

    .cq-reviews-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 32px;
    }

    .cq-review-card {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 24px;
      text-align: left;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .cq-review-stars {
      display: flex;
      gap: 4px;
      margin-bottom: 12px;
    }

    .cq-review-stars svg {
      width: 20px;
      height: 20px;
    }

    .cq-review-text {
      font-size: 16px;
      color: #1e293b;
      line-height: 1.5;
      margin-bottom: 12px;
    }

    .cq-review-author {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
    }

    /* ========================================
   Final Screen (7)
   ======================================== */
    .cq-screen-final {
      background: linear-gradient(145deg, #1e3a4f 0%, #1e293b 50%, #2d3748 100%);
    }

    .cq-final-container {
      text-align: center;
      max-width: 400px;
      padding: 40px 20px;
    }

    .cq-promo-badge {
      display: inline-block;
      background: rgba(184, 134, 11, 0.2);
      color: #b8860b;
      font-size: 16px;
      font-weight: 600;
      padding: 10px 24px;
      border-radius: 24px;
      margin-bottom: 32px;
      border: 1px solid rgba(184, 134, 11, 0.3);
    }

    .cq-final-spinner {
      width: 60px;
      height: 60px;
      margin: 0 auto 24px;
    }

    .cq-spinner-svg {
      animation: cq-rotate 1.5s linear infinite;
    }

    .cq-spinner-path {
      stroke: #b8860b;
      stroke-linecap: round;
      animation: cq-dash 1.5s ease-in-out infinite;
    }

    @keyframes cq-rotate {
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes cq-dash {
      0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
      }

      50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
      }

      100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
      }
    }

    .cq-final-title {
      font-size: 32px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 12px;
    }

    .cq-final-text {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 8px;
    }

    .cq-final-text strong {
      color: #b8860b;
    }

    .cq-final-redirect {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.6);
    }

    /* ========================================
   Responsive Adjustments
   ======================================== */
    @media (max-width: 480px) {
      .cq-loading-title {
        font-size: 16px;
      }

      .cq-question-title {
        font-size: 16px;
      }

      .cq-stat-headline {
        font-size: 16px;
      }

      .cq-stat-number {
        font-size: 40px;
      }

      .cq-stat-image {
        width: 160px;
        height: 160px;
      }

      .cq-final-title {
        font-size: 26px;
      }
    }

    /* ============================================
   BOTTOM CTA V2 - Matching Product Section Style
   ============================================ */
    .bottom-cta-v2 {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      padding: 80px 24px;
      text-align: center;
    }

    .bottom-cta-inner {
      max-width: 600px;
      margin: 0 auto;
    }

    .bottom-cta-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
      padding: 10px 20px;
      border-radius: 100px;
      margin-bottom: 24px;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
    }

    .bottom-cta-v2 h2 {
      font-family: var(--font-headline);
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 700;
      font-style: italic;
      color: #fff;
      line-height: 1.1;
      margin-bottom: 12px;
    }

    .bottom-cta-v2 p {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 28px;
      line-height: 1.5;
    }

    .bottom-cta-price {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .bottom-cta-price .price-label {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.6);
    }

    .bottom-cta-price .price-value {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 700;
      color: #fff;
    }

    .bottom-cta-price .price-value s {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.5);
      margin-right: 8px;
    }

    .bottom-cta-price .price-tag {
      background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
      color: #fff;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 800;
      padding: 6px 12px;
      border-radius: 6px;
      letter-spacing: 0.02em;
    }

    .btn-main-lg {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 22px 48px;
      background: #16a34a;
      color: #fff;
      border: none;
      border-radius: 12px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
      box-shadow: 0 6px 30px rgba(22, 163, 74, 0.5);
      transition: all 0.3s;
    }

    .btn-main-lg:hover {
      background: #15803d;
      transform: translateY(-3px);
      box-shadow: 0 10px 40px rgba(22, 163, 74, 0.6);
    }

    .btn-main-lg svg {
      width: 20px;
      height: 20px;
    }

    .bottom-trust-v2 {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-top: 32px;
      flex-wrap: wrap;
    }

    .bottom-trust-v2 span {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.6);
      font-weight: 500;
    }

    .bottom-trust-v2 svg {
      width: 18px;
      height: 18px;
      color: var(--accent);
    }

    @media (max-width: 600px) {
      .bottom-cta-v2 {
        padding: 60px 20px;
      }

      .bottom-cta-v2 h2 {
        font-size: 1.75rem;
      }

      .bottom-cta-v2 p {
        font-size: 16px;
        margin-bottom: 20px;
      }

      .bottom-cta-price .price-value {
        font-size: 16px;
      }

      .btn-main-lg {
        width: 100%;
        justify-content: center;
        padding: 18px 32px;
        font-size: 16px;
      }

      .bottom-trust-v2 {
        gap: 16px;
        flex-direction: column;
        align-items: center;
      }
    }

    /* ============================================
   STICKY CTA BAR V2 - Matching Style
   ============================================ */
    .sticky-cta-bar-v2 {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      padding: 12px 16px;
      z-index: 999;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }

    .sticky-cta-bar-v2.visible {
      transform: translateY(0);
    }

    .sticky-cta-container-v2 {
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }

    .sticky-cta-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .sticky-cta-price {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }

    .sticky-cta-price s {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.5);
      margin-right: 6px;
    }

    .sticky-cta-tag {
      background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
      color: #fff;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 800;
      padding: 4px 8px;
      border-radius: 4px;
      letter-spacing: 0.02em;
    }

    .sticky-cta-btn-v2 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      background: var(--cta, #16a34a);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(22, 163, 74, 0.4);
      transition: all 0.2s;
    }

    .sticky-cta-btn-v2:hover {
      background: var(--cta-hover, #15803d);
      transform: translateY(-2px);
    }

    .sticky-cta-btn-v2 svg {
      width: 16px;
      height: 16px;
    }

    @media (max-width: 480px) {
      .sticky-cta-bar-v2 {
        padding: 10px 12px;
      }

      .sticky-cta-container-v2 {
        gap: 12px;
      }

      .sticky-cta-info {
        display: none;
      }

      .sticky-cta-btn-v2 {
        flex: 1;
        justify-content: center;
        padding: 14px 20px;
      }
    }

    /* ============================================
   DIRECT RESPONSE PROMO BAR
   ============================================ */
    .promo-bar-dr {
      background: #1e2ba3;
      padding: 6px 16px;
      position: relative;
    }

    @keyframes promo-shimmer {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .promo-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
    }

    .promo-line1 {
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 700;
      color: #fff;
      letter-spacing: .04em;
    }

    .promo-line2 {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      padding: 0 15px;
    }

    @media (max-width: 600px) {
      .promo-bar-dr {
        padding: 5px 10px;
      }

      .promo-line1 {
        font-size: 14px;
      }

      .promo-line2 {
        font-size: 12px;
        padding: 0 10px;
      }
    }

    /* ============================================
   PRODUCT DISCOUNT BADGE
   ============================================ */
    .pr-discount-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
      color: #fff;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 800;
      padding: 7px 12px;
      border-radius: 6px;
      z-index: 10;
      box-shadow: 0 3px 10px rgba(220, 38, 38, 0.4);
      letter-spacing: 0.02em;
      animation: badge-pulse 2s ease-in-out infinite;
    }

    .pr-category-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 4px 8px;
      border-radius: 4px;
      z-index: 10;
      white-space: nowrap;
    }

    .pr-category-badge.on-demand {
      background: #dc2626;
      color: #fff;
    }

    .pr-category-badge.daily {
      background: #16a34a;
      color: #fff;
    }

    .pr-category-badge.pre-workout {
      background: #d97706;
      color: #fff;
    }

    @keyframes badge-pulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }
    }

    .pr-img {
      position: relative;
    }

    /* Strikethrough price styling */
    .pr-count-price s {
      color: #991b1b;
      font-size: 16px;
      margin-right: 4px;
      text-decoration: line-through;
      opacity: 1;
      font-weight: 600;
    }

    @media (max-width: 800px) {
      .pr-discount-badge {
        top: -4px;
        right: -4px;
        font-size: 16px;
        padding: 4px 8px;
      }

      .pr-count-price s {
        font-size: 16px;
      }
    }

    @media (max-width: 480px) {
      .pr-discount-badge {
        font-size: 16px;
        padding: 3px 6px;
      }

      .pr-count-price s {
        font-size: 16px;
      }
    }

    /* ============================================
   PRODUCT SECTION V5 - Hero Product, More Products, Compare
   ============================================ */

    /* Hero Product Section */
    .hero-product {
      background: var(--bg);
      padding: 60px 0;
      position: relative;
    }

    .hero-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }

    @media (max-width: 900px) {
      .hero-inner {
        grid-template-columns: 1fr;
      }
    }

    .hero-visual {
      position: relative;
    }

    .hero-badge {
      position: absolute;
      top: 16px;
      left: 16px;
      background: var(--red, #dc2626);
      color: #fff;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 10px 20px;
      z-index: 5;
    }

    .hero-img-wrap {
      background: linear-gradient(145deg, #f5f3ef 0%, #e8e4dd 100%);
      border-radius: 20px;
      padding: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-img-wrap img {
      max-width: 100%;
      max-height: 340px;
      filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.2));
    }

    .hero-social {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(8px);
      padding: 10px 18px;
      border-radius: 100px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      white-space: nowrap;
    }

    .avatars {
      display: flex;
    }

    .avatars span {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid #fff;
      margin-left: -8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }

    .avatars span:first-child {
      margin-left: 0;
      background: #3b82f6;
    }

    .avatars span:nth-child(2) {
      background: #8b5cf6;
    }

    .avatars span:nth-child(3) {
      background: #ec4899;
    }

    .hero-social p {
      font-size: 16px;
      color: var(--text);
    }

    .hero-social strong {
      color: var(--primary-dark);
    }

    .hero-product .hero-info {
      padding-right: 24px;
    }

    .hero-cat {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent);
      margin-bottom: 8px;
    }

    .hero-product .hero-title {
      font-family: var(--font-headline);
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 700;
      font-style: italic;
      color: var(--primary-dark);
      line-height: 1;
      margin-bottom: 6px;
    }

    .hero-formula {
      font-size: 16px;
      color: var(--text);
      opacity: 0.7;
      margin-bottom: 16px;
    }

    .hero-product .hero-rating {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }

    .stars {
      color: #f59e0b;
      font-size: 16px;
      letter-spacing: 1px;
    }

    .rating-num {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary-dark);
    }

    .rating-count {
      font-size: 16px;
      color: var(--text);
    }

    .hero-desc {
      font-size: 16px;
      line-height: 1.6;
      color: var(--text);
      margin-bottom: 24px;
    }

    .hero-stats {
      display: flex;
      justify-content: center;
      gap: 28px;
      margin-bottom: 24px;
      padding: 20px 0;
      border-top: 1px solid #e5e2dd;
      border-bottom: 1px solid #e5e2dd;
      text-align: center;
    }

    .stat-val {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 700;
      color: var(--primary-dark);
      line-height: 1;
    }

    .stat-lbl {
      font-size: 16px;
      color: var(--text);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .hero-price {
      margin-bottom: 20px;
      text-align: center;
    }

    .price-main {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 12px;
    }

    .price-from {
      font-size: 16px;
      color: var(--text);
    }

    .price-amt {
      font-family: var(--font-display);
      font-size: 48px;
      font-weight: 700;
      color: var(--primary-dark);
      line-height: 1;
    }

    .price-per {
      font-size: 16px;
      color: var(--text);
    }

    .price-compare {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 6px;
    }

    .price-old {
      font-size: 16px;
      color: var(--text);
      text-decoration: line-through;
    }

    .price-save {
      background: #dcfce7;
      color: #15803d;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 4px;
    }

    .hero-cta-section {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .btn-main {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 18px 36px;
      background: #16a34a;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(22, 163, 74, 0.4);
      transition: all 0.3s;
    }

    .btn-main:hover {
      background: #15803d;
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(22, 163, 74, 0.5);
    }

    .btn-main svg {
      width: 18px;
      height: 18px;
    }

    .cta-sub {
      font-size: 16px;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .cta-sub svg {
      width: 16px;
      height: 16px;
      color: var(--green, #16a34a);
    }

    .cta-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .cta-micro {
      font-size: 16px;
      color: var(--text);
      font-weight: 500;
    }

    /* Viewing indicator */
    .viewing-now {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 16px;
      font-size: 16px;
      color: var(--text);
    }

    .pulse-dot {
      width: 8px;
      height: 8px;
      background: #22c55e;
      border-radius: 50%;
      position: relative;
    }

    .pulse-dot::before {
      content: '';
      position: absolute;
      inset: -4px;
      background: rgba(34, 197, 94, 0.4);
      border-radius: 50%;
      animation: pulse-prod 1s ease-out infinite;
      opacity: 0;
    }

    @keyframes pulse-prod {
      0% {
        transform: scale(0.5);
        opacity: 1;
      }

      100% {
        transform: scale(2);
        opacity: 0;
      }
    }

    .viewing-now span {
      color: var(--primary-dark);
      font-weight: 600;
    }

    /* ============================================
   MORE FORMULAS - Dark Section with Tabs
============================================ */
    .more-products {
      padding: 60px 0 80px;
      background: var(--primary-dark);
    }

    .more-header {
      max-width: 1200px;
      margin: 0 auto 32px;
      padding: 0 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      text-align: center;
    }

    .more-header h2 {
      font-family: var(--font-headline);
      font-size: 32px;
      font-weight: 700;
      font-style: italic;
      color: #fff;
    }

    .tabs {
      display: flex;
      gap: 6px;
    }

    .tab {
      padding: 10px 20px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 100px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      transition: all 0.2s;
    }

    .tab:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
    }

    .tab.active {
      background: var(--orange, #ea580c);
      border-color: var(--orange, #ea580c);
      color: #fff;
    }

    /* PRODUCT CARDS - Compact vertical layout */
    .products-list {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 12px;
    }

    .product-row {
      display: flex;
      flex-direction: column;
      background: var(--bg-cream, #faf8f5);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 14px 12px 10px;
      transition: all 0.3s;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .product-row:hover {
      background: #fff;
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    .pr-img {
      width: 100%;
      height: 140px;
      background: transparent;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
    }

    .pr-img img {
      max-width: 100%;
      max-height: 130px;
      object-fit: contain;
    }

    .pr-info {
      text-align: center;
    }

    .pr-top {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 2px;
    }

    .pr-badge {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 4px 10px;
      border-radius: 4px;
    }

    .pr-badge.on-demand {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .pr-badge.daily {
      background: #f0fdf4;
      color: #16a34a;
      border: 1px solid #bbf7d0;
    }

    .pr-badge.pre-workout {
      background: #fffbeb;
      color: #d97706;
      border: 1px solid #fde68a;
    }

    .pr-rating {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-size: 16px;
      margin-bottom: 6px;
    }

    .pr-rating .stars {
      font-size: 16px;
      color: #f59e0b;
    }

    .pr-rating .num {
      color: var(--primary-dark);
      font-weight: 700;
      font-size: 16px;
    }

    .pr-rating .cnt {
      color: var(--primary-dark);
      font-size: 16px;
      font-weight: 500;
    }

    .pr-name {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 700;
      color: var(--primary-dark);
      margin-bottom: 4px;
      line-height: 1.1;
      text-align: center;
    }

    .pr-headline {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary-dark);
      margin-bottom: 2px;
    }

    .pr-benefit {
      font-size: 16px;
      color: var(--text);
      margin-bottom: 2px;
      line-height: 1.3;
    }

    .pr-benefit svg {
      display: none;
    }

    .pr-formula {
      font-size: 16px;
      color: var(--text);
      margin-bottom: 6px;
      font-weight: 500;
    }

    /* CTA Section */
    .pr-ctas {
      margin-top: auto;
    }

    .pr-cta-main {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 14px 16px;
      background: #16a34a;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: all 0.2s;
      margin-bottom: 6px;
    }

    .pr-cta-main:hover {
      background: #15803d;
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
    }

    .pr-cta-main svg {
      width: 16px;
      height: 16px;
    }

    .pr-counts {
      display: flex;
      gap: 4px;
    }

    .pr-count {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6px 4px;
      background: var(--bg-cream, #faf8f5);
      border: 1px solid #d5d2cd;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .pr-count:hover {
      border-color: var(--orange, #ea580c);
      background: #fff;
    }

    .pr-count.selected {
      border-color: var(--orange, #ea580c);
      background: #fff7ed;
      position: relative;
    }

    .pr-count.selected::after {
      content: '✓';
      position: absolute;
      top: -6px;
      right: -4px;
      width: 16px;
      height: 16px;
      background: var(--orange, #ea580c);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .pr-count-qty {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary-dark);
    }

    .pr-count-price {
      font-size: 16px;
      color: var(--primary-dark);
      font-weight: 600;
    }

    /* ============================================
   MORE PRODUCTS - Mobile Responsive
============================================ */

    /* Global discount banner - mobile only */
    .mobile-discount-banner {
      display: none;
    }

    /* Value labels on pricing */
    .pr-count-label {
      display: none;
    }

    /* Formula toggle for mobile */
    .pr-formula-toggle {
      display: none;
    }

    /* Selector helper text */
    .pr-selector-hint {
      display: none;
    }

    /* Tablet - 768px and below */
    @media (max-width: 768px) {
      .more-products {
        padding: 32px 0 48px;
      }

      /* Show global discount banner */
      .mobile-discount-banner {
        display: block;
        background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
        color: #fff;
        text-align: center;
        padding: 10px 16px;
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.02em;
        margin-bottom: 16px;
      }

      /* Hide per-card discount badges on mobile */
      .pr-discount-badge {
        display: none;
      }

      .more-header {
        margin-bottom: 16px;
        padding: 0 16px;
      }

      .more-header h2 {
        font-size: 16px;
      }

      /* Horizontal scrolling tabs */
      .tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        justify-content: flex-start;
        gap: 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .tabs::-webkit-scrollbar {
        display: none;
      }

      .tab {
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: 16px;
      }

      .products-list {
        padding: 0 12px;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }

      .product-row {
        padding: 10px 8px 8px;
        border-radius: 10px;
      }

      /* Smaller images */
      .pr-img {
        height: 70px;
        margin-bottom: 4px;
      }

      .pr-img img {
        max-height: 60px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
      }

      .pr-category-badge {
        top: -4px;
        left: -4px;
        font-size: 16px;
        padding: 3px 6px;
        border-radius: 4px;
      }

      .pr-name {
        font-size: 16px;
        margin-bottom: 1px;
      }

      /* Compact single-line rating */
      .pr-rating {
        gap: 3px;
        margin-bottom: 3px;
        flex-wrap: nowrap;
      }

      .pr-rating .stars {
        font-size: 16px;
      }

      .pr-rating .num {
        font-size: 16px;
      }

      .pr-rating .cnt {
        font-size: 16px;
        color: var(--text);
      }

      /* Show selector hint */
      .pr-selector-hint {
        display: block;
        font-size: 16px;
        color: #2563eb;
        font-weight: 600;
        margin-bottom: 3px;
      }

      .pr-headline {
        font-size: 16px;
        margin-bottom: 1px;
      }

      .pr-benefit {
        font-size: 16px;
        line-height: 1.2;
        margin-bottom: 2px;
      }

      /* Hide formula by default, show toggle */
      .pr-formula {
        display: none;
      }

      .pr-formula-toggle {
        display: block;
        font-size: 16px;
        color: #6b7280;
        cursor: pointer;
        margin-bottom: 4px;
      }

      .pr-formula-toggle::after {
        content: ' ▾';
      }

      .pr-formula.expanded {
        display: block;
        font-size: 16px;
        margin-bottom: 4px;
        padding: 4px 6px;
        background: #f5f5f4;
        border-radius: 4px;
      }

      /* CTA - trust color */
      .pr-cta-main {
        padding: 10px 8px;
        font-size: 16px;
        margin-bottom: 4px;
        border-radius: 6px;
        background: #2563eb;
      }

      .pr-cta-main:hover {
        background: #1d4ed8;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
      }

      .pr-cta-main svg {
        width: 12px;
        height: 12px;
      }

      /* Vertical stacked pricing */
      .pr-counts {
        flex-direction: column;
        gap: 4px;
      }

      .pr-count {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 10px;
        min-height: 48px;
        border-radius: 6px;
      }

      /* Show value labels */
      .pr-count-label {
        display: block;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        color: #16a34a;
        background: #dcfce7;
        padding: 2px 6px;
        border-radius: 3px;
        margin-left: auto;
        margin-right: 8px;
      }

      .pr-count-qty {
        font-size: 16px;
        min-width: 40px;
      }

      .pr-count-price {
        font-size: 16px;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }

      .pr-count-price s {
        font-size: 16px;
        color: #9ca3af;
        display: block;
        margin-bottom: 0;
      }

      .pr-count.selected {
        border-color: #2563eb;
        background: #eff6ff;
      }

      .pr-count.selected::after {
        background: #2563eb;
        width: 16px;
        height: 16px;
        font-size: 16px;
        top: 50%;
        right: -6px;
        transform: translateY(-50%);
      }
    }

    /* Mobile - 480px and below */
    @media (max-width: 480px) {
      .more-products {
        padding: 24px 0 40px;
      }

      .mobile-discount-banner {
        font-size: 16px;
        padding: 8px 12px;
        margin-bottom: 12px;
      }

      .more-header {
        margin-bottom: 12px;
        padding: 0 12px;
        gap: 12px;
      }

      .more-header h2 {
        font-size: 16px;
      }

      .tabs {
        gap: 5px;
      }

      .tab {
        padding: 7px 12px;
        font-size: 16px;
      }

      /* Single column */
      .products-list {
        padding: 0 10px;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      /* Horizontal card layout */
      .product-row {
        padding: 10px;
        border-radius: 10px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 6px 10px;
      }

      /* Compact image */
      .pr-img {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        margin-bottom: 0;
      }

      .pr-img img {
        max-height: 55px;
        max-width: 55px;
      }

      .pr-category-badge {
        top: -3px;
        left: -3px;
        font-size: 12px;
        padding: 2px 5px;
      }

      .pr-info {
        flex: 1;
        text-align: left;
        min-width: 0;
      }

      .pr-name {
        font-size: 16px;
        text-align: left;
        margin-bottom: 0;
        line-height: 1.1;
      }

      .pr-rating {
        justify-content: flex-start;
        margin-bottom: 2px;
      }

      .pr-rating .stars {
        font-size: 16px;
      }

      .pr-rating .num {
        font-size: 16px;
      }

      .pr-rating .cnt {
        font-size: 16px;
      }

      .pr-selector-hint {
        font-size: 16px;
        margin-bottom: 2px;
      }

      .pr-headline {
        font-size: 16px;
        text-align: left;
        margin-bottom: 0;
      }

      .pr-benefit {
        font-size: 16px;
        text-align: left;
        margin-bottom: 0;
        line-height: 1.2;
      }

      .pr-formula-toggle {
        font-size: 16px;
        margin-bottom: 2px;
      }

      .pr-formula.expanded {
        font-size: 16px;
        padding: 3px 5px;
      }

      /* CTA spans full width */
      .pr-ctas {
        width: 100%;
        flex-basis: 100%;
        margin-top: 4px;
      }

      .pr-cta-main {
        padding: 12px 10px;
        font-size: 16px;
        font-weight: 800;
        margin-bottom: 6px;
      }

      .pr-counts {
        gap: 5px;
      }

      .pr-count {
        padding: 10px 12px;
        min-height: 48px;
      }

      .pr-count-label {
        font-size: 16px;
        padding: 2px 5px;
      }

      .pr-count-qty {
        font-size: 16px;
        font-weight: 700;
      }

      .pr-count-price {
        font-size: 16px;
        font-weight: 700;
      }

      .pr-count-price s {
        font-size: 16px;
        font-weight: 500;
      }
    }

    /* Small mobile - 360px and below */
    @media (max-width: 360px) {
      .more-header h2 {
        font-size: 16px;
      }

      .products-list {
        padding: 0 8px;
        gap: 8px;
      }

      .product-row {
        padding: 8px;
        gap: 5px 8px;
      }

      .pr-img {
        width: 50px;
        height: 50px;
      }

      .pr-img img {
        max-height: 45px;
        max-width: 45px;
      }

      .pr-name {
        font-size: 16px;
      }

      .pr-selector-hint {
        font-size: 16px;
      }

      .pr-headline {
        font-size: 16px;
      }

      .pr-benefit {
        font-size: 16px;
      }

      .pr-cta-main {
        padding: 10px 8px;
        font-size: 16px;
      }

      .pr-count {
        padding: 8px 10px;
        min-height: 44px;
      }

      .pr-count-qty {
        font-size: 16px;
      }

      .pr-count-price {
        font-size: 16px;
      }
    }

    /* ============================================
   COMPARISON TABLE
============================================ */
    .compare-section {
      padding: 60px 0;
      background: var(--bg);
    }

    .compare-inner {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .compare-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .compare-header h2 {
      font-family: var(--font-headline);
      font-size: 32px;
      font-weight: 700;
      font-style: italic;
      color: var(--primary-dark);
      margin-bottom: 8px;
    }

    .compare-header p {
      font-size: 16px;
      color: var(--text);
    }

    .compare-table {
      width: 100%;
      border-collapse: collapse;
    }

    .compare-table th,
    .compare-table td {
      padding: 16px 12px;
      text-align: left;
      border-bottom: 1px solid #e5e2dd;
    }

    .compare-table th {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text);
      background: var(--bg-cream, #faf8f5);
    }

    .compare-table td:first-child {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary-dark);
    }

    .compare-table td {
      font-size: 16px;
      color: var(--text);
    }

    .compare-table .price-cell {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary-dark);
    }

    .compare-table .best-row {
      background: #fef3c7;
    }

    .compare-table .best-row td:first-child::after {
      content: '★ BEST SELLER';
      display: block;
      font-size: 16px;
      color: var(--orange, #ea580c);
      margin-top: 2px;
    }

    .check {
      color: var(--green, #16a34a);
      font-size: 16px;
    }

    /* ============================================
   BOTTOM CTA
============================================ */
    .bottom-cta {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      padding: 60px 24px;
      text-align: center;
    }

    .bottom-cta h2 {
      font-family: var(--font-headline);
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 700;
      font-style: italic;
      color: #fff;
      margin-bottom: 12px;
    }

    .bottom-cta p {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.6);
      margin-bottom: 28px;
    }

    .bottom-cta .btn-main {
      padding: 20px 44px;
      font-size: 16px;
    }

    .bottom-trust {
      display: flex;
      justify-content: center;
      gap: 28px;
      margin-top: 28px;
      flex-wrap: wrap;
    }

    .bottom-trust span {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.5);
    }

    .bottom-trust svg {
      width: 16px;
      height: 16px;
      color: var(--accent);
    }

    /* ============================================
   PRODUCT SECTION MODAL
============================================ */
    .modal-bg {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .modal-bg.active {
      display: flex;
    }

    .modal {
      background: var(--bg);
      border-radius: 20px;
      max-width: 460px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
    }

    .modal-x {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 40px;
      height: 40px;
      background: var(--bg-cream, #faf8f5);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-top {
      padding: 32px 28px 20px;
      text-align: center;
      background: var(--bg-cream, #faf8f5);
    }

    .modal-img {
      width: 120px;
      height: 120px;
      margin: 0 auto 16px;
    }

    .modal-img img {
      max-width: 100%;
      max-height: 100%;
    }

    .modal-name {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 700;
      color: var(--primary-dark);
    }

    .modal-formula {
      font-size: 16px;
      color: var(--text);
    }

    .modal-body {
      padding: 24px 28px 28px;
    }

    .supply-lbl {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 14px;
    }

    .supply-opts {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .supply-opt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 18px;
      background: var(--bg-cream, #faf8f5);
      border: 2px solid #e5e2dd;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }

    .supply-opt:hover {
      border-color: var(--accent);
    }

    .supply-opt.sel {
      border-color: var(--orange, #ea580c);
      background: #fff7ed;
    }

    .supply-opt.best::before {
      content: 'BEST VALUE';
      position: absolute;
      top: -9px;
      left: 16px;
      background: var(--green, #16a34a);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 3px;
    }

    .so-left .so-qty {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary-dark);
    }

    .so-left .so-per {
      font-size: 16px;
      color: var(--text);
    }

    .so-right {
      text-align: right;
    }

    .so-right .so-price {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--primary-dark);
    }

    .so-right .so-save {
      font-size: 16px;
      color: var(--green, #16a34a);
      font-weight: 600;
    }

    .modal-btn {
      width: 100%;
      padding: 18px;
      background: #16a34a;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .modal-btn:hover {
      background: #15803d;
    }

    .modal-trust {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 16px;
    }

    .modal-trust span {
      font-size: 16px;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .modal-trust svg {
      width: 14px;
      height: 14px;
      color: var(--accent);
    }

    /* ============================================
   PRODUCT SECTION MOBILE RESPONSIVE
============================================ */
    @media (max-width: 800px) {
      .hero-product {
        padding: 40px 0;
      }

      .hero-inner {
        gap: 32px;
        padding: 0 16px;
      }

      .hero-img-wrap {
        padding: 32px;
      }

      .hero-img-wrap img {
        max-height: 240px;
      }

      .hero-product .hero-info {
        padding-right: 0;
        text-align: center;
      }

      .hero-cat {
        text-align: center;
      }

      .hero-product .hero-rating {
        justify-content: center;
      }

      .hero-stats {
        gap: 20px;
        flex-wrap: wrap;
      }

      .stat-val {
        font-size: 26px;
      }

      .price-amt {
        font-size: 40px;
      }

      .btn-main {
        width: 100%;
        justify-content: center;
        padding: 16px 24px;
      }

      .hero-cta-section {
        flex-direction: column;
        align-items: stretch;
      }

      .cta-sub {
        justify-content: center;
      }

      .hero-social {
        font-size: 16px;
        padding: 8px 14px;
      }

      .hero-social p {
        font-size: 16px;
      }

      .avatars span {
        width: 26px;
        height: 26px;
        font-size: 16px;
      }

      .more-products {
        padding: 40px 0 60px;
      }

      .more-header {
        padding: 0 16px;
        margin-bottom: 20px;
      }

      .more-header h2 {
        font-size: 16px;
      }

      .tabs {
        overflow-x: auto;
        padding-bottom: 4px;
        justify-content: center;
      }

      .products-list {
        padding: 0 16px;
        gap: 10px;
        grid-template-columns: 1fr;
      }

      /* MOBILE PRODUCT CARDS - Horizontal layout */
      .product-row {
        display: grid;
        grid-template-columns: 85px 1fr;
        grid-template-rows: auto auto;
        gap: 0 12px;
        padding: 12px;
        text-align: left;
      }

      .pr-img {
        grid-row: 1 / 2;
        width: 85px;
        height: 85px;
        margin-bottom: 0;
        align-self: start;
      }

      .pr-img img {
        max-width: 100%;
        max-height: 75px;
      }

      .pr-info {
        grid-row: 1 / 2;
        grid-column: 2;
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-align: left;
      }

      .pr-name-row {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 3px;
      }

      .pr-top {
        display: flex;
        align-items: center;
        gap: 6px;
        order: 1;
      }

      .pr-badge {
        font-size: 16px;
        padding: 3px 8px;
      }

      .pr-rating {
        display: flex;
        font-size: 16px;
        gap: 4px;
      }

      .pr-rating .stars {
        font-size: 16px;
      }

      .pr-rating .num {
        font-size: 16px;
      }

      .pr-rating .cnt {
        display: none;
      }

      .pr-name {
        font-size: 16px;
        margin-bottom: 0;
        text-align: left;
        order: 0;
      }

      .pr-benefit {
        font-size: 16px;
        text-align: left;
        line-height: 1.3;
        margin-bottom: 2px;
        order: 2;
      }

      .pr-formula {
        font-size: 16px;
        margin-bottom: 0;
        order: 3;
      }

      .pr-ctas {
        grid-column: 1 / -1;
        margin-top: 10px;
      }

      .pr-cta-main {
        padding: 11px 14px;
        font-size: 16px;
        margin-bottom: 6px;
      }

      .pr-cta-main svg {
        width: 14px;
        height: 14px;
      }

      .pr-counts {
        gap: 5px;
      }

      .pr-count {
        padding: 6px 4px;
      }

      .pr-count-qty {
        font-size: 16px;
      }

      .pr-count-price {
        font-size: 16px;
      }

      .compare-section {
        padding: 40px 0;
      }

      .compare-inner {
        padding: 0 16px;
        overflow-x: auto;
      }

      .compare-header h2 {
        font-size: 26px;
      }

      .compare-table {
        font-size: 16px;
        min-width: 600px;
      }

      .compare-table th,
      .compare-table td {
        padding: 12px 8px;
      }

      .bottom-cta {
        padding: 40px 16px;
      }

      .bottom-cta .btn-main {
        width: 100%;
        justify-content: center;
      }

      .bottom-trust {
        gap: 16px;
      }

      .bottom-trust span {
        font-size: 16px;
      }

      .modal {
        max-width: 100%;
        margin: 16px;
        border-radius: 16px;
      }

      .modal-top {
        padding: 24px 20px 16px;
      }

      .modal-body {
        padding: 20px;
      }

      .modal-name {
        font-size: 16px;
      }
    }

    @media (max-width: 480px) {
      .hero-badge {
        font-size: 16px;
        padding: 8px 14px;
      }

      .hero-product .hero-title {
        font-size: 2.2rem;
      }

      .hero-formula {
        font-size: 16px;
      }

      .hero-desc {
        font-size: 16px;
      }

      .stat-val {
        font-size: 16px;
      }

      .price-amt {
        font-size: 36px;
      }

      .more-header h2 {
        font-size: 16px;
      }

      .tab {
        padding: 7px 12px;
        font-size: 16px;
      }

      .product-row {
        grid-template-columns: 80px 1fr;
        padding: 12px;
        gap: 0 12px;
      }

      .pr-img {
        width: 80px;
        height: 80px;
      }

      .pr-img img {
        max-height: 70px;
      }

      .pr-name {
        font-size: 16px;
      }

      .pr-benefit {
        font-size: 16px;
      }

      .pr-formula {
        font-size: 16px;
      }

      .pr-ctas {
        margin-top: 10px;
      }

      .pr-cta-main {
        padding: 9px 12px;
        font-size: 16px;
      }

      .pr-cta-main svg {
        width: 12px;
        height: 12px;
      }

      .pr-count {
        padding: 5px 3px;
      }

      .pr-count-qty {
        font-size: 16px;
      }

      .pr-count-price {
        font-size: 16px;
      }

      .compare-header h2 {
        font-size: 16px;
      }

      .bottom-cta h2 {
        font-size: 1.5rem;
      }
    }

    /* ============================================
   V5.0 - MOBILE-OPTIMIZED PRODUCT SECTION
   Conversion-focused design for cold traffic
============================================ */

    /* Hero Product Section - Mobile First */
    .hero-product-v2 {
      background: linear-gradient(180deg, #ffffff 0%, #f8f7f4 100%);
      padding: 24px 0 32px;
    }

    .hero-product-container {
      max-width: 480px;
      margin: 0 auto;
      padding: 0 16px;
    }

    /* DESIRE HOOK - Masculine, aspirational */
    .hero-desire-hook {
      background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
      border: 2px solid #93c5fd;
      border-radius: 12px;
      padding: 16px 20px;
      margin-bottom: 24px;
      text-align: center;
    }

    .hero-desire-text {
      font-family: var(--font-body);
      font-size: 18px;
      color: #1e40af;
      line-height: 1.4;
      margin: 0;
    }

    .hero-desire-text strong {
      color: #1e3a8a;
    }

    /* POWER BOX - What he can DO */
    .hero-power-box {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      border-radius: 12px;
      padding: 16px 20px;
      margin-bottom: 20px;
      text-align: center;
    }

    .hero-power-text {
      font-family: var(--font-body);
      font-size: 16px;
      color: #fff;
      line-height: 1.4;
      margin: 0;
    }

    .hero-power-text strong {
      color: #fbbf24;
    }

    /* Hero Product Image - Centered on own row */
    .hero-product-image-centered {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto 16px;
    }

    .hero-product-image-centered img {
      width: 150px;
      height: 150px;
      object-fit: contain;
      filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.15));
    }

    /* Best Seller Badge Row */
    .hero-bestseller-row {
      text-align: center;
      margin-bottom: 16px;
    }

    .hero-bestseller {
      display: inline-block;
      background: var(--red, #dc2626);
      color: #fff;
      font-family: var(--font-ui);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 6px 14px;
      border-radius: 20px;
    }

    /* Product Details - Centered */
    .hero-product-details-centered {
      text-align: center;
      margin-bottom: 20px;
    }

    .hero-product-category {
      font-family: var(--font-ui);
      font-size: 12px;
      font-weight: 600;
      color: #dc2626;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 4px;
    }

    .hero-product-title {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 700;
      color: var(--navy-dark, #0f172a);
      line-height: 1.1;
      margin-bottom: 12px;
    }

    .hero-rating-inline {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .hero-rating-stars {
      color: #f59e0b;
      font-size: 16px;
      letter-spacing: 1px;
    }

    .hero-rating-info {
      font-family: var(--font-ui);
      font-size: 14px;
      color: var(--text, #0f172a);
    }

    /* Old product display - keep for fallback */
    .hero-product-display {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 16px;
      align-items: start;
      margin-bottom: 20px;
    }

    /* PRODUCT PROMISE - The emotional benefit */
    .hero-product-promise {
      font-family: var(--font-body);
      font-size: 16px;
      color: var(--navy-dark, #0f172a);
      line-height: 1.35;
      margin-bottom: 12px;
    }

    .hero-product-promise strong {
      color: #15803d;
    }

    /* TRANSFORMATION BOX - Before/After mindset shift */
    .hero-transformation-box {
      display: flex;
      align-items: stretch;
      gap: 8px;
      margin-bottom: 20px;
      background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
      border: 2px solid #86efac;
      border-radius: 12px;
      padding: 16px;
    }

    .hero-transformation-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .transformation-label {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .hero-before .transformation-label {
      color: #dc2626;
    }

    .hero-after .transformation-label {
      color: #16a34a;
    }

    .transformation-text {
      font-family: var(--font-body);
      font-size: 16px;
      font-style: italic;
      color: var(--text, #1e293b);
      line-height: 1.3;
    }

    .hero-transformation-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #16a34a;
      font-weight: 700;
      padding: 0 8px;
    }

    /* Formula note - credibility without being clinical */
    .hero-formula-note {
      font-family: var(--font-body);
      font-size: 16px;
      color: var(--text-light, #475569);
      text-align: center;
      margin-bottom: 20px;
      padding: 12px 16px;
      background: #fff;
      border: 1px solid var(--border, #e2e0dc);
      border-radius: 8px;
    }

    .hero-formula-note strong {
      color: var(--navy-dark, #0f172a);
    }

    .hero-product-image-wrap {
      position: relative;
    }

    .hero-product-image-wrap img {
      width: 120px;
      height: 120px;
      object-fit: contain;
      filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.15));
    }

    /* Old hero-bestseller removed - now using .hero-bestseller-row */

    .hero-product-details {
      flex: 1;
    }

    .hero-product-category {
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: #dc2626;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 4px;
    }

    .hero-product-title {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 700;
      color: var(--navy-dark, #0f172a);
      line-height: 1.1;
      margin-bottom: 6px;
    }

    .hero-product-formula {
      font-size: 16px;
      color: var(--text-light, #475569);
      margin-bottom: 8px;
    }

    .hero-rating-inline {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .hero-rating-stars {
      color: #f59e0b;
      font-size: 16px;
      letter-spacing: 1px;
    }

    .hero-rating-info {
      font-family: var(--font-ui);
      font-size: 16px;
      color: var(--text-light, #475569);
    }

    .hero-rating-info strong {
      color: var(--navy-dark, #0f172a);
    }

    /* Stats row */
    .hero-stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 20px;
    }

    .hero-stat-box {
      background: #fff;
      border: 1px solid var(--border, #e2e0dc);
      border-radius: 10px;
      padding: 12px 8px;
      text-align: center;
    }

    .hero-stat-value {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--navy-dark, #0f172a);
      line-height: 1;
    }

    .hero-stat-label {
      font-size: 16px;
      color: var(--text-muted, #94a3b8);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-top: 4px;
    }

    /* Pricing card */
    .hero-pricing-block {
      background: #fff;
      border: 2px solid var(--border, #e2e0dc);
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 16px;
    }

    .hero-pricing-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .hero-price-group {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    .hero-price-old {
      font-size: 16px;
      color: var(--text-muted, #94a3b8);
      text-decoration: line-through;
    }

    .hero-price-current {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 700;
      color: var(--navy-dark, #0f172a);
    }

    .hero-price-unit {
      font-size: 16px;
      color: var(--text-light, #475569);
    }

    .hero-discount-pill {
      background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
      border: 1px solid #86efac;
      color: #15803d;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      padding: 6px 10px;
      border-radius: 6px;
    }

    /* Supply selection - BEFORE CTA */
    .hero-supply-grid {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
      margin-top: 12px;
    }

    .hero-supply-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 8px;
      background: var(--bg-cream, #faf8f5);
      border: 2px solid transparent;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }

    .hero-supply-btn:hover {
      border-color: var(--cta, #16a34a);
      background: #fff;
    }

    .hero-supply-btn.selected {
      border: 2px solid var(--cta, #16a34a);
      background: linear-gradient(135deg, #fff 0%, #f0f2ff 100%);
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15), 0 4px 12px rgba(22, 163, 74, 0.1);
      transform: scale(1.02);
    }

    .hero-supply-btn.selected::after {
      content: '✓';
      position: absolute;
      top: -6px;
      right: -6px;
      width: 18px;
      height: 18px;
      background: var(--cta, #16a34a);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-supply-tag {
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      color: #fff;
      font-family: var(--font-ui);
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 4px;
      white-space: nowrap;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    }

    .hero-supply-qty {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--navy-dark, #0f172a);
    }

    .hero-supply-price {
      font-size: 16px;
      color: var(--text-light, #475569);
      margin-top: 2px;
    }

    .hero-supply-savings {
      font-size: 16px;
      color: #16a34a;
      font-weight: 600;
      margin-top: 2px;
    }

    /* CTA button - AFTER selection */
    .hero-cta-block {
      margin-bottom: 12px;
    }

    .hero-cta-main {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 16px 24px;
      background: var(--cta, #16a34a);
      color: #fff;
      border: none;
      border-radius: 12px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(22, 163, 74, 0.35);
      transition: all 0.3s;
    }

    .hero-cta-main:hover {
      background: var(--cta-hover, #15803d);
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(22, 163, 74, 0.45);
    }

    .hero-cta-main svg {
      width: 18px;
      height: 18px;
    }

    .hero-cta-subtext {
      text-align: center;
      font-size: 16px;
      color: var(--text-muted, #94a3b8);
      margin-top: 8px;
    }

    /* Trust row */
    .hero-trust-inline {
      display: flex;
      justify-content: center;
      gap: 16px;
      padding-top: 12px;
      border-top: 1px solid var(--border, #e2e0dc);
    }

    .hero-trust-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 16px;
      color: var(--text-light, #475569);
    }

    .hero-trust-item svg {
      width: 14px;
      height: 14px;
      color: #16a34a;
    }

    /* Social proof bar */
    .hero-social-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--navy-dark, #0f172a);
      color: #fff;
      padding: 12px 16px;
      border-radius: 12px;
      margin-top: 16px;
    }

    .hero-avatars-stack {
      display: flex;
    }

    .hero-avatars-stack span {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid var(--navy-dark, #0f172a);
      margin-left: -8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }

    .hero-avatars-stack span:first-child {
      margin-left: 0;
      background: #3b82f6;
    }

    .hero-avatars-stack span:nth-child(2) {
      background: #8b5cf6;
    }

    .hero-avatars-stack span:nth-child(3) {
      background: #ec4899;
    }

    .hero-social-text {
      font-size: 16px;
    }

    .hero-social-text strong {
      color: #22c55e;
    }

    /* MORE FORMULAS SECTION */
    .more-formulas-v2 {
      background: var(--navy-dark, #0f172a);
      padding: 32px 0 100px;
    }

    .more-formulas-container {
      max-width: 480px;
      margin: 0 auto;
      padding: 0 16px;
    }

    .more-formulas-header {
      text-align: center;
      margin-bottom: 20px;
    }

    .more-formulas-header h2 {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 8px;
    }

    .more-formulas-header p {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.6);
    }

    /* Filter tabs - stacked layout */
    .filter-tabs-v2 {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      margin-bottom: 20px;
    }

    .filter-row-all {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .filter-row-categories {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .filter-tab-v2 {
      padding: 10px 16px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 100px;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      transition: all 0.2s;
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    .filter-tab-v2:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
    }

    .filter-tab-v2.active {
      background: var(--cta, #16a34a);
      border-color: var(--cta, #16a34a);
      color: #fff;
    }

    /* Product cards - horizontal mobile layout */
    .product-cards-v2 {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .product-card-v2 {
      display: grid;
      grid-template-columns: 80px 1fr;
      align-items: stretch;
      gap: 12px;
      background: #fff;
      border-radius: 14px;
      padding: 14px;
      transition: all 0.2s;
      min-height: 200px;
    }

    .product-card-v2:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .product-card-img {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .product-card-img img {
      width: 72px;
      height: 72px;
      object-fit: contain;
    }

    .product-cat-badge {
      position: absolute;
      top: -4px;
      left: -4px;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 3px 6px;
      border-radius: 3px;
    }

    .product-cat-badge.on-demand {
      background: #fef2f2;
      color: #dc2626;
    }

    .product-cat-badge.daily {
      background: #f0fdf4;
      color: #16a34a;
    }

    .product-cat-badge.pre-workout {
      background: #fffbeb;
      color: #f59e0b;
    }

    .product-discount-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background: #16a34a;
      color: #fff;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      padding: 3px 6px;
      border-radius: 3px;
    }

    .product-card-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
    }

    .product-name-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .product-card-name {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--navy-dark, #0f172a);
    }

    .product-card-rating {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 16px;
    }

    .product-card-rating .stars {
      color: #f59e0b;
      font-size: 16px;
    }

    .product-card-rating .num {
      color: var(--navy-dark, #0f172a);
      font-weight: 600;
    }

    .product-card-benefit {
      font-size: 14px;
      color: var(--text-light, #475569);
      line-height: 1.4;
      min-height: 38px;
    }

    /* Supply + CTA row */
    .product-action-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: auto;
      padding-top: 8px;
    }

    .product-supply-select {
      flex: 1;
      display: flex;
      gap: 4px;
    }

    .supply-option-btn {
      flex: 1;
      padding: 8px 4px;
      background: var(--bg-cream, #faf8f5);
      border: 1px solid var(--border, #e2e0dc);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
    }

    .supply-option-btn:hover {
      border-color: var(--cta, #16a34a);
    }

    .supply-option-btn.selected {
      border-color: var(--cta, #16a34a);
      background: #eff1ff;
    }

    .supply-option-btn .qty {
      display: block;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--navy-dark, #0f172a);
    }

    .supply-option-btn .price {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .supply-option-btn .price-original {
      font-size: 12px;
      color: #dc2626;
      text-decoration: line-through;
    }

    .supply-option-btn .price-now {
      font-size: 16px;
      font-weight: 700;
      color: var(--text, #0f172a);
    }

    .supply-option-btn.selected .price-now {
      color: var(--text, #0f172a);
    }

    .supply-option-btn.selected .price-original {
      color: #dc2626;
    }

    .supply-option-btn .price-save {
      font-size: 10px;
      font-weight: 700;
      color: #16a34a;
      background: #dcfce7;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .supply-option-btn.selected .price-save {
      background: #dcfce7;
      color: #16a34a;
    }

    .best-value-badge {
      display: block;
      font-family: var(--font-display);
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #fff;
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      padding: 3px 8px;
      border-radius: 4px;
      margin-bottom: 4px;
      text-align: center;
    }

    .supply-option-btn.selected {
      border: 2px solid var(--cta, #16a34a);
      background: linear-gradient(135deg, #eff1ff 0%, #e8ebff 100%);
      box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
      position: relative;
    }

    .product-cta-btn {
      padding: 10px 14px;
      background: var(--cta, #16a34a);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }

    .product-cta-btn:hover {
      background: var(--cta-hover, #15803d);
    }

    /* Sticky footer */
    .sticky-footer-v2 {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      border-top: 1px solid var(--border, #e2e0dc);
      padding: 12px 16px;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sticky-info {
      flex: 1;
    }

    .sticky-product-name {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--navy-dark, #0f172a);
    }

    .sticky-price-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .sticky-price-old {
      font-size: 16px;
      color: var(--text-muted, #94a3b8);
      text-decoration: line-through;
    }

    .sticky-price-new {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--navy-dark, #0f172a);
    }

    .sticky-savings {
      font-size: 16px;
      color: #16a34a;
      font-weight: 600;
    }

    .sticky-cta-btn {
      padding: 16px 48px;
      background: var(--cta, #16a34a);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
      min-width: 200px;
    }

    .sticky-cta-btn:hover {
      background: var(--cta-hover, #15803d);
    }

    /* Desktop adjustments */
    @media (min-width: 768px) {

      .hero-product-container,
      .more-formulas-container {
        max-width: 600px;
      }

      .hero-product-display {
        grid-template-columns: 160px 1fr;
        gap: 24px;
      }

      .hero-product-image-wrap img {
        width: 160px;
        height: 160px;
      }

      .hero-product-title {
        font-size: 36px;
      }

      .hero-stats-row {
        gap: 12px;
      }

      .hero-stat-box {
        padding: 16px 12px;
      }

      .hero-stat-value {
        font-size: 16px;
      }

      .product-card-v2 {
        grid-template-columns: 100px 1fr;
        padding: 16px;
      }

      .product-card-img img {
        width: 90px;
        height: 90px;
      }

      .product-card-name {
        font-size: 16px;
      }
    }

    @media (min-width: 1024px) {

      .hero-product-container,
      .more-formulas-container {
        max-width: 800px;
      }

      .product-cards-v2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        align-items: stretch;
      }

      .product-card-v2 {
        grid-template-columns: 90px 1fr;
        height: 100%;
      }
    }

    /* ============================================
   V5.0 QUICK COMPARE - Mobile Responsive
   No price column, fits screen width
============================================ */
    .compare-section-v2 {
      background: var(--bg-cream, #faf8f5);
      padding: 24px 0;
      border-top: 1px solid var(--border, #e2e0dc);
      border-bottom: 1px solid var(--border, #e2e0dc);
    }

    .compare-container-v2 {
      max-width: 480px;
      margin: 0 auto;
      padding: 0 16px;
    }

    .compare-header-v2 {
      text-align: center;
      margin-bottom: 16px;
    }

    .compare-header-v2 h2 {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--navy-dark, #0f172a);
      margin-bottom: 4px;
    }

    .compare-header-v2 p {
      font-size: 16px;
      color: var(--text-light, #475569);
    }

    .compare-table-wrap {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .compare-table-v2 {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      table-layout: fixed;
    }

    .compare-table-v2 th,
    .compare-table-v2 td {
      padding: 10px 8px;
      text-align: left;
      border-bottom: 1px solid var(--border, #e2e0dc);
    }

    .compare-table-v2 th {
      font-family: var(--font-ui);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--text-muted, #94a3b8);
      background: #fff;
    }

    .compare-table-v2 td {
      font-size: 12px;
      color: var(--navy-dark, #0f172a);
    }

    .compare-table-v2 td:first-child {
      font-weight: 600;
    }

    .compare-row-hero {
      background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    }

    .compare-row-hero td {
      color: var(--cta, #16a34a);
      font-weight: 700;
    }

    .compare-row-hero td:first-child strong {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .compare-row-hero td:first-child strong::before {
      content: '★';
      color: #f59e0b;
      font-size: 16px;
    }

    /* Desktop adjustments */
    @media (min-width: 768px) {
      .compare-container-v2 {
        max-width: 600px;
      }

      .compare-header-v2 h2 {
        font-size: 16px;
      }

      .compare-table-v2 {
        font-size: 16px;
      }

      .compare-table-v2 th,
      .compare-table-v2 td {
        padding: 12px 16px;
      }
    }

    @media (min-width: 1024px) {
      .compare-container-v2 {
        max-width: 800px;
      }
    }

    /* ============================================
   V5.0 PRODUCT CARD HEADLINE - DR Copy
============================================ */
    .product-card-headline {
      font-family: var(--font-display, Georgia, serif);
      font-size: 15px;
      font-weight: 600;
      font-style: italic;
      color: var(--cta, #16a34a);
      min-height: 20px;
      margin: 0 0 4px 0;
      line-height: 1.3;
    }

    .product-card-benefit {
      font-size: 16px;
      color: var(--text-muted, #64748b);
      margin: 0 0 8px 0;
      line-height: 1.4;
    }

    /* ============================================
   V5.0 MINI DR SALES LETTER DROPDOWN
============================================ */
    .product-details-dropdown {
      margin: 8px 0 12px 0;
      border: 1px solid var(--border, #e2e0dc);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }

    .product-details-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 10px 12px;
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 600;
      color: var(--cta, #16a34a);
      cursor: pointer;
      list-style: none;
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      transition: background 0.2s;
    }

    .product-details-toggle::-webkit-details-marker {
      display: none;
    }

    .product-details-toggle::after {
      content: '+';
      font-size: 16px;
      font-weight: 700;
      color: var(--cta, #16a34a);
    }

    .product-details-dropdown[open] .product-details-toggle::after {
      content: '−';
    }

    .product-details-toggle:hover {
      background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    }

    .product-details-content {
      padding: 12px 14px;
      background: #fff;
      border-top: 1px solid var(--border, #e2e0dc);
    }

    .product-details-content p {
      font-size: 16px;
      line-height: 1.5;
      color: var(--navy-dark, #0f172a);
      margin: 0 0 10px 0;
    }

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

    .product-details-content strong {
      color: var(--cta, #16a34a);
      font-weight: 700;
    }

    .product-details-content em {
      font-style: italic;
      color: var(--text-muted, #64748b);
      display: block;
      margin-top: 4px;
      padding-left: 12px;
      border-left: 3px solid var(--cta, #16a34a);
    }

    /* ========================================
       HOW IT WORKS - TACTICAL REDESIGN
       Masculine, compact, action-driven
    ======================================== */
    .hiw-tactical {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      padding: 48px 24px;
      position: relative;
      overflow: hidden;
    }

    .hiw-tactical::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background:
        radial-gradient(circle at 20% 50%, rgba(22, 163, 74, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(220, 68, 5, 0.1) 0%, transparent 50%);
      pointer-events: none;
    }

    .hiw-tactical-inner {
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .hiw-tactical-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .hiw-tactical-badge {
      display: inline-block;
      font-family: var(--font-ui, 'Inter', sans-serif);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #dc4405;
      background: rgba(220, 68, 5, 0.15);
      padding: 6px 16px;
      border-radius: 4px;
      margin-bottom: 16px;
      border: 1px solid rgba(220, 68, 5, 0.3);
    }

    .hiw-tactical-title {
      font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
      font-size: clamp(28px, 5vw, 40px);
      font-weight: 600;
      color: #fff;
      line-height: 1.2;
      margin: 0;
    }

    .hiw-tactical-title strong {
      color: #dc4405;
      font-weight: 700;
    }

    .hiw-tactical-track {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      overflow: hidden;
    }

    .hiw-tactical-step {
      padding: 28px 20px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      transition: background 0.3s ease;
    }

    .hiw-tactical-step:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .hiw-tactical-step:last-child {
      border-right: none;
    }

    .hiw-tactical-num {
      font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
      font-size: 32px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.35);
      line-height: 1;
      margin-bottom: 12px;
    }

    .hiw-tactical-content h3 {
      font-family: var(--font-ui, 'Inter', sans-serif);
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      margin: 0 0 6px 0;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .hiw-tactical-content p {
      font-family: var(--font-body, 'Satoshi', sans-serif);
      font-size: 14px;
      color: rgba(255, 255, 255, 0.85);
      margin: 0;
      line-height: 1.5;
    }

    .hiw-tactical-arrow {
      position: absolute;
      right: -12px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      background: #1e293b;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    .hiw-tactical-arrow svg {
      width: 14px;
      height: 14px;
      color: #dc4405;
    }

    .hiw-tactical-step-final .hiw-tactical-num {
      color: #dc4405;
    }

    .hiw-tactical-check {
      position: absolute;
      right: 16px;
      top: 16px;
      width: 28px;
      height: 28px;
      background: linear-gradient(135deg, #16a34a, #22c55e);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hiw-tactical-check svg {
      width: 16px;
      height: 16px;
      color: #fff;
    }

    .hiw-tactical-cta {
      text-align: center;
      margin-top: 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .hiw-tactical-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 36px;
      background: #16a34a;
      color: #fff;
      font-family: var(--font-ui, 'Inter', sans-serif);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      text-decoration: none;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 20px rgba(22, 163, 74, 0.4);
    }

    .hiw-tactical-btn:hover {
      background: #15803d;
      transform: translateY(-2px);
      box-shadow: 0 6px 28px rgba(22, 163, 74, 0.5);
    }

    .hiw-tactical-btn svg {
      width: 18px;
      height: 18px;
      transition: transform 0.3s ease;
    }

    .hiw-tactical-btn:hover svg {
      transform: translateX(4px);
    }

    .hiw-tactical-subtext {
      font-family: var(--font-body, 'Satoshi', sans-serif);
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
    }

    /* Mobile: Stack vertically */
    @media (max-width: 768px) {
      .hiw-tactical {
        padding: 40px 16px;
      }

      .hiw-tactical-header {
        margin-bottom: 28px;
      }

      .hiw-tactical-track {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .hiw-tactical-step {
        flex-direction: row;
        text-align: left;
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        gap: 16px;
      }

      .hiw-tactical-step:last-child {
        border-bottom: none;
      }

      .hiw-tactical-num {
        font-size: 24px;
        min-width: 40px;
        margin-bottom: 0;
      }

      .hiw-tactical-content {
        flex: 1;
      }

      .hiw-tactical-content h3 {
        font-size: 15px;
      }

      .hiw-tactical-content p {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.85);
      }

      .hiw-tactical-arrow {
        position: static;
        transform: none;
        rotate: 90deg;
        display: none;
      }

      .hiw-tactical-check {
        position: static;
        width: 24px;
        height: 24px;
      }

      .hiw-tactical-check svg {
        width: 14px;
        height: 14px;
      }

      .hiw-tactical-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
        font-size: 15px;
      }
    }

    /* ==========================================
       QUIZ SCREEN 8 - DR RECOMMENDATION SPLASH
    ========================================== */
    .cq-screen-recommendation {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 24px;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    }

    .cq-rec-container {
      width: 100%;
      max-width: 540px;
      margin: 0 auto;
    }

    .cq-rec-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(34, 197, 94, 0.15);
      color: #22c55e;
      padding: 8px 16px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.05em;
      margin-bottom: 24px;
    }

    .cq-rec-hero {
      display: flex;
      gap: 24px;
      align-items: center;
      margin-bottom: 32px;
    }

    .cq-rec-product-image {
      flex-shrink: 0;
      width: 140px;
      height: 140px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .cq-rec-product-image img {
      width: 120px;
      height: auto;
      object-fit: contain;
    }

    .cq-rec-hero-content {
      flex: 1;
    }

    .cq-rec-title {
      font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
      font-size: 24px;
      font-weight: 600;
      color: #fff;
      margin: 0 0 12px 0;
      line-height: 1.2;
    }

    .cq-rec-product-name {
      color: #dc4405;
      display: block;
      font-size: 32px;
      font-weight: 700;
    }

    .cq-rec-why {
      font-family: var(--font-body, 'Satoshi', sans-serif);
      font-size: 15px;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.5;
      margin: 0;
    }

    .cq-rec-benefits {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 24px;
    }

    .cq-rec-benefits-title {
      font-family: var(--font-ui, 'Inter', sans-serif);
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      margin: 0 0 16px 0;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .cq-rec-benefits-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .cq-rec-benefits-list li {
      font-family: var(--font-body, 'Satoshi', sans-serif);
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.5;
      padding: 8px 0;
      padding-left: 28px;
      position: relative;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .cq-rec-benefits-list li:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .cq-rec-benefits-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 12px;
      width: 18px;
      height: 18px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322c55e'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") no-repeat center;
      background-size: contain;
    }

    .cq-rec-details {
      display: flex;
      gap: 12px;
      margin-bottom: 24px;
    }

    .cq-rec-detail {
      flex: 1;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      padding: 12px;
      text-align: center;
    }

    .cq-rec-detail-label {
      display: block;
      font-family: var(--font-ui, 'Inter', sans-serif);
      font-size: 10px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.5);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 4px;
    }

    .cq-rec-detail-value {
      display: block;
      font-family: var(--font-body, 'Satoshi', sans-serif);
      font-size: 13px;
      font-weight: 600;
      color: #fff;
    }

    /* Quantity Selector */
    .cq-rec-quantity {
      margin-bottom: 20px;
    }

    .cq-rec-quantity-title {
      font-family: var(--font-ui, 'Inter', sans-serif);
      font-size: 14px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.7);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 12px;
      text-align: center;
    }

    .cq-rec-qty-options {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    .cq-rec-qty-btn {
      flex: 1;
      max-width: 120px;
      padding: 12px 8px;
      background: rgba(255, 255, 255, 0.08);
      border: 2px solid rgba(255, 255, 255, 0.15);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
    }

    .cq-rec-qty-btn:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.3);
    }

    .cq-rec-qty-btn.selected {
      background: rgba(22, 163, 74, 0.3);
      border-color: var(--cta, #16a34a);
      box-shadow: 0 0 0 1px var(--cta, #16a34a);
    }

    .cq-rec-qty-count {
      display: block;
      font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 4px;
    }

    .cq-rec-qty-price {
      display: block;
      font-family: var(--font-body, 'Satoshi', sans-serif);
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
    }

    .cq-rec-qty-save {
      display: block;
      font-family: var(--font-ui, 'Inter', sans-serif);
      font-size: 11px;
      font-weight: 700;
      color: #22c55e;
      margin-top: 4px;
    }

    .cq-rec-pricing {
      text-align: center;
      margin-bottom: 24px;
    }

    .cq-rec-price-row {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 10px;
      margin-bottom: 8px;
    }

    .cq-rec-price-original {
      font-family: var(--font-body, 'Satoshi', sans-serif);
      font-size: 18px;
      color: #dc2626;
      text-decoration: line-through;
    }

    .cq-rec-price-current {
      font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
      font-size: 36px;
      font-weight: 700;
      color: #fff;
    }

    .cq-rec-price-per {
      font-family: var(--font-body, 'Satoshi', sans-serif);
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
    }

    .cq-rec-savings {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(34, 197, 94, 0.15);
      color: #22c55e;
      padding: 6px 14px;
      border-radius: 100px;
      font-family: var(--font-body, 'Satoshi', sans-serif);
      font-size: 13px;
      font-weight: 600;
    }

    .cq-rec-cta-section {
      text-align: center;
      margin-bottom: 28px;
    }

    .cq-rec-cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 18px 32px;
      background: #16a34a;
      color: #fff;
      font-family: var(--font-ui, 'Inter', sans-serif);
      font-size: 17px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 20px rgba(22, 163, 74, 0.3);
    }

    .cq-rec-cta-btn:hover {
      background: #15803d;
      transform: translateY(-2px);
      box-shadow: 0 6px 28px rgba(22, 163, 74, 0.4);
    }

    .cq-rec-cta-btn svg {
      transition: transform 0.2s ease;
    }

    .cq-rec-cta-btn:hover svg {
      transform: translateX(4px);
    }

    .cq-rec-cta-subtext {
      font-family: var(--font-body, 'Satoshi', sans-serif);
      font-size: 13px;
      color: rgba(255, 255, 255, 0.6);
      margin: 12px 0 0 0;
    }

    .cq-rec-trust {
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
    }

    .cq-rec-trust-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-body, 'Satoshi', sans-serif);
      font-size: 13px;
      color: rgba(255, 255, 255, 0.7);
    }

    .cq-rec-trust-item svg {
      color: rgba(255, 255, 255, 0.5);
    }

    /* Mobile Responsive */
    @media (max-width: 600px) {
      .cq-screen-recommendation {
        padding: 16px;
        padding-top: 60px;
      }

      .cq-rec-hero {
        flex-direction: column;
        text-align: center;
        gap: 16px;
      }

      .cq-rec-product-image {
        width: 120px;
        height: 120px;
      }

      .cq-rec-product-image img {
        width: 100px;
      }

      .cq-rec-title {
        font-size: 20px;
      }

      .cq-rec-product-name {
        font-size: 28px;
      }

      .cq-rec-why {
        font-size: 14px;
      }

      .cq-rec-details {
        flex-direction: column;
        gap: 8px;
      }

      .cq-rec-detail {
        flex-direction: row;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 12px 16px;
      }

      .cq-rec-detail-label {
        margin-bottom: 0;
      }

      .cq-rec-price-current {
        font-size: 32px;
      }

      .cq-rec-trust {
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }

      .cq-rec-cta-btn {
        font-size: 15px;
        padding: 16px 24px;
      }
    }

/* ============================================
   SCREEN 9: TRANSITION TO INTAKE
   ============================================ */
.cq-screen-transition {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}
.cq-transition-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 24px;
  text-align: center;
}
.cq-transition-icon {
  margin-bottom: 24px;
  animation: cqScaleIn 0.3s ease;
}
@keyframes cqScaleIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.cq-transition-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: #166534;
  margin-bottom: 8px;
}
.cq-transition-subtitle {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 32px;
}
.cq-transition-expectations {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  text-align: left;
  max-width: 320px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.cq-transition-expectations h3 {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cq-transition-expectations ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cq-transition-expectations li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 15px;
  color: #1f2937;
}
.cq-exp-number {
  width: 24px;
  height: 24px;
  background: #16a34a;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.cq-transition-reassurance {
  font-size: 14px;
  color: #059669;
  margin-bottom: 24px;
}
.cq-spinner-dots {
  display: flex;
  gap: 8px;
}
.cq-spinner-dots span {
  width: 10px;
  height: 10px;
  background: #16a34a;
  border-radius: 50%;
  animation: cqDotPulse 1.4s infinite ease-in-out;
}
.cq-spinner-dots span:nth-child(1) { animation-delay: 0s; }
.cq-spinner-dots span:nth-child(2) { animation-delay: 0.2s; }
.cq-spinner-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cqDotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* ============================================
   V3 PRODUCT SELECTOR - Choose Your Weapon
   ============================================ */

/* Section Container */
.product-selector-v3 {
  background: #1a1a2e;
  padding: 48px 16px 80px;
}

.product-selector-container-v3 {
  max-width: 900px;
  margin: 0 auto;
}

/* Header */
.product-selector-header-v3 {
  text-align: center;
  margin-bottom: 32px;
}

.product-selector-header-v3 h2 {
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .product-selector-header-v3 h2 {
    font-size: 48px;
  }
}

.product-selector-header-v3 p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}

/* Category Filter Pills */
.category-filter-v3 {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.filter-pill-v3 {
  padding: 10px 20px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}

.filter-pill-v3:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.filter-pill-v3.active {
  background: #e65100;
  border-color: #e65100;
  color: #fff;
}

/* Product Grid */
.product-grid-v3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .product-grid-v3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* Product Card */
.product-card-v3 {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.product-card-v3:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.product-card-v3[style*="display: none"] {
  display: none !important;
}

/* Card Top Section (Cream) */
.card-top-v3 {
  background: #fffaf5;
  padding: 14px 16px 12px;
  position: relative;
}

/* Category Badge */
.cat-badge-v3 {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 6px;
}

.cat-badge-v3.on-demand { background: #e65100; color: #fff; }
.cat-badge-v3.daily { background: #16a34a; color: #fff; }
.cat-badge-v3.pre-workout { background: #7c3aed; color: #fff; }

/* Product Info Row */
.product-info-row-v3 {
  display: flex;
  gap: 12px;
}

/* Left Column - Image, Rating, Badges stacked vertically */
.product-left-column-v3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 100px;
}

@media (min-width: 768px) {
  .product-left-column-v3 {
    width: 120px;
  }
}

.product-image-v3 {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .product-image-v3 {
    width: 100px;
    height: 100px;
  }
}

.product-image-v3 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.product-details-v3 {
  flex: 1;
  min-width: 0;
}

/* Name + Rating */
.name-rating-row-v3 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.product-name-v3 {
  font-size: 20px;
  font-weight: 900;
  color: #1e293b;
  line-height: 1.2;
  margin: 0;
}

.rating-v3 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Rating in left column - centered and compact */
.product-left-column-v3 .rating-v3 {
  justify-content: center;
}

.stars-v3 {
  color: #fbbf24;
  font-size: 12px;
  letter-spacing: -1px;
}

.rating-num-v3 {
  font-size: 12px;
  font-weight: 800;
  color: #1e293b;
}

/* Headline */
.product-headline-v3 {
  font-size: 14px;
  font-weight: 800;
  color: #e65100;
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Product Formula Display - Compact Subtitle */
.product-card-v3 .product-formula-v3 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 4px;
}
.product-card-v3 .formula-ingredients {
  font-size: 10px;
  font-weight: 500;
  color: #475569;
  line-height: 1.2;
}
.product-card-v3 .formula-meta {
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.2;
}

/* ===== DIRECT RESPONSE REDESIGN V3.1 ===== */

/* Technology Badge - Now inline with category badge */
.tech-badge-v3 {
  display: inline-block;
  background: #1e293b;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 4px;
}

/* Badge wrapper - stacked vertically in left column */
.badge-wrapper-v3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.badge-wrapper-v3 .cat-badge-v3,
.badge-wrapper-v3 .tech-badge-v3 {
  margin: 0;
  font-size: 8px;
  padding: 3px 6px;
  text-align: center;
  white-space: nowrap;
}

/* Product Sub-headline (replaces headline) */
.product-subhead-v3 {
  font-size: 13px;
  font-weight: 700;
  color: #e65100;
  margin: 0 0 4px;
  line-height: 1.2;
}
.product-subhead-v3 .subhead-spec {
  font-weight: 600;
  color: #64748b;
  font-size: 11px;
}

/* Spec Bar */
.spec-bar-v3 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 5px 0;
  margin: 4px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.spec-item-v3 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
}
.spec-icon-v3 { font-size: 12px; }
.spec-label-v3 { font-weight: 600; color: #64748b; }
.spec-value-v3 { font-weight: 700; color: #1e293b; }
.spec-divider-v3 { color: #cbd5e1; font-weight: 300; }

/* Vertical Pricing Stack */
.pricing-stack-v3 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.tier-option-v3 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  background: #fff;
}
.tier-option-v3:hover { border-color: #94a3b8; }
.tier-option-v3.selected {
  border-color: #e65100;
  background: rgba(230, 81, 0, 0.04);
}
.tier-radio-v3 {
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.tier-option-v3.selected .tier-radio-v3 { border-color: #e65100; }
.tier-option-v3.selected .tier-radio-v3::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #e65100;
  border-radius: 50%;
}
.tier-content-v3 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.tier-option-v3 .tier-qty-v3 {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}
.tier-perdose-v3 {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.tier-save-v3 {
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.tier-option-v3.selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #e65100;
  border-radius: 10px 0 0 10px;
}

/* CTA Wrapper and Microcopy */
.cta-wrap-v3 { text-align: center; }
.cta-microcopy-v3 {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

/* Mobile spec bar */
@media (max-width: 400px) {
  .spec-bar-v3 { flex-direction: column; align-items: flex-start; gap: 4px; }
  .spec-divider-v3 { display: none; }
}

/* Benefits List */
.benefits-list-v3 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.benefits-list-v3 li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  line-height: 1.25;
}

.check-icon-v3 {
  width: 16px;
  height: 16px;
  min-width: 16px;
  color: #22c55e;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(34, 197, 94, 0.3));
}

/* Card Bottom Section (Slate) */
.card-bottom-v3 {
  flex: 1;
  background: #f8fafc;
  padding: 12px 16px 14px;
  border-top: 2px solid #e2e8f0;
}

/* Pricing Tiers */
.pricing-tiers-v3 {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.tier-btn-v3 {
  flex: 1;
  padding: 10px 5px;
  border-radius: 10px;
  border: 2px solid #cbd5e1;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  position: relative;
}

.tier-btn-v3:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tier-btn-v3.selected {
  border-color: #e65100;
  background: rgba(230, 81, 0, 0.04);
  box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.12);
}

/* Best Value Badge */
.best-value-v3 {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #e65100, #ff6d00);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(230, 81, 0, 0.4);
  letter-spacing: 0.02em;
}

.tier-qty-v3 {
  font-size: 16px;
  font-weight: 900;
  color: #1e293b;
  margin-bottom: 2px;
}

.tier-original-v3 {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-decoration: line-through;
}

.tier-price-v3 {
  font-size: 20px;
  font-weight: 900;
  color: #1e293b;
}

.tier-unit-v3 {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 4px;
}

.tier-savings-v3 {
  margin-top: 6px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
}

.tier-savings-v3 span {
  display: block;
  font-size: 9px;
  font-weight: 600;
  opacity: 0.9;
}

/* Dynamic Savings Display */
.savings-amount-v3 {
  display: block;
  text-align: center;
  padding: 6px 16px;
  margin: 0 auto 12px;
  max-width: fit-content;
  background: transparent;
  color: #16a34a;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 2px solid #22c55e;
  border-radius: 6px;
  position: relative;
}

/* Connecting line to CTA */
.savings-amount-v3::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 10px;
  background: linear-gradient(to bottom, #22c55e, transparent);
}

/* CTA Button */
.cta-btn-v3 {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #e65100, #ff6d00);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(230, 81, 0, 0.35);
}

.cta-btn-v3:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(230, 81, 0, 0.45);
}

/* Trust Badges */
.trust-badges-v3 {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #475569;
}

.trust-badge-v3 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.trust-badge-v3 svg {
  width: 12px;
  height: 12px;
  color: #22c55e;
}

/* Social Proof */
.social-proof-v3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
}

.pulse-dot-v3 {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse-v3 2s infinite;
}

@keyframes pulse-v3 {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

.social-proof-v3 strong {
  font-weight: 800;
  color: #1e293b;
}

.social-proof-v3 span {
  font-weight: 600;
  color: #64748b;
}

/* Daily Product Single Tier */
.single-tier-v3 {
  background: rgba(230, 81, 0, 0.04);
  border: 2px solid #e65100;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.single-tier-header-v3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.single-tier-info-v3 .tier-qty-v3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.single-tier-info-v3 .tier-original-v3 {
  font-size: 13px;
  margin-bottom: 2px;
}

.single-tier-info-v3 .tier-price-v3 {
  font-size: 28px;
}

.single-tier-info-v3 .tier-unit-v3 {
  font-size: 12px;
}

.single-tier-savings-v3 {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  text-align: center;
}

.single-tier-savings-v3 .save-pct {
  display: block;
  font-size: 14px;
  font-weight: 800;
}

.single-tier-savings-v3 .save-amt {
  display: block;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.9;
}

/* ============================================
   V0 HERO PRODUCT SECTION
   ============================================ */

.hero-v0 {
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
  padding: 16px 16px 20px;
}

@media (min-width: 768px) {
  .hero-v0 {
    padding: 20px 16px 24px;
  }
}

.hero-v0-container {
  max-width: 448px;
  margin: 0 auto;
  text-align: center;
}

/* Nostalgic Hook Banner */
.hero-v0-hook {
  background: #eff6ff;
  border: 2px solid #dbeafe;
  border-radius: 9999px;
  padding: 10px 16px;
  margin-bottom: 10px;
}

.hero-v0-hook-line1 {
  color: #1e293b;
  font-size: 14px;
  margin-bottom: 2px;
}

.hero-v0-hook-line1 strong {
  color: #2563eb;
}

.hero-v0-hook-line2 {
  color: #2563eb;
  font-size: 14px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .hero-v0-hook-line1,
  .hero-v0-hook-line2 {
    font-size: 16px;
  }
}

/* Product Image */
.hero-v0-image {
  margin-bottom: 0;
  position: relative;
}

.hero-v0-image img {
  width: 280px;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.15)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1));
}

@media (min-width: 768px) {
  .hero-v0-image img {
    width: 340px;
    height: auto;
    max-height: 340px;
  }
}

/* Best Seller Badge */
.hero-v0-bestseller {
  display: inline-block;
  background: #0f172a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 9999px;
  margin-top: 8px;
  margin-bottom: 4px;
}

/* Product Info */
.hero-v0-category {
  color: #f97316;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

.hero-v0-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 30px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}

@media (min-width: 768px) {
  .hero-v0-title {
    font-size: 36px;
  }
}

.hero-v0-description {
  font-size: 16px;
  margin-bottom: 4px;
}

.hero-v0-description .highlight {
  color: #f97316;
  font-weight: 600;
}

.hero-v0-description .secondary {
  color: #1e293b;
}

/* Rating */
.hero-v0-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.hero-v0-stars {
  display: flex;
  gap: 6px;
}

.hero-v0-stars svg {
  width: 16px;
  height: 16px;
  fill: #fbbf24;
  color: #fbbf24;
}

.hero-v0-rating-text {
  font-size: 14px;
  color: #334155;
}

.hero-v0-rating-text strong {
  color: #0f172a;
  font-weight: 700;
}

/* Benefit Banner */
.hero-v0-benefit {
  background: #1e293b;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 10px;
}

.hero-v0-benefit-line1 {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 2px;
}

.hero-v0-benefit-line2 {
  color: #e2e8f0;
  font-size: 14px;
}

/* Stats Grid */
.hero-v0-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.hero-v0-stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.hero-v0-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

@media (min-width: 768px) {
  .hero-v0-stat-value {
    font-size: 24px;
  }
}

.hero-v0-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: #475569;
}

/* Formula Box */
.hero-v0-formula {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  color: #1e293b;
}

.hero-v0-formula strong {
  font-weight: 700;
}

/* Pricing Card */
.hero-v0-pricing {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Price Header */
.hero-v0-price-header {
  padding: 12px 16px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-v0-price-original {
  font-size: 18px;
  color: #94a3b8;
  text-decoration: line-through;
}

.hero-v0-price-current {
  font-size: 36px;
  font-weight: 800;
  color: #1d4ed8;
}

.hero-v0-price-current span {
  font-size: 18px;
  font-weight: 500;
  color: #64748b;
}

.hero-v0-savings-badge {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 4px 20px rgba(16, 185, 129, 0.6); }
}

/* Tier Selection - Matching v3 Grid Style */
.hero-v0-tiers {
  padding: 0 16px 14px;
}

.hero-v0-tier-grid {
  display: flex;
  gap: 10px;
}

.hero-v0-tier-btn {
  flex: 1;
  position: relative;
  background: #fff;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  padding: 16px 10px 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.hero-v0-tier-btn:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hero-v0-tier-btn.selected {
  background: rgba(37, 99, 235, 0.04);
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.hero-v0-tier-btn.selected .hero-v0-tier-check {
  display: flex;
}

.hero-v0-tier-check {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: #2563eb;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.hero-v0-tier-check svg {
  width: 12px;
  height: 12px;
  color: #fff;
}

.hero-v0-best-value {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.hero-v0-tier-doses {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.hero-v0-tier-price {
  font-size: 24px;
  font-weight: 900;
  color: #1e293b;
  line-height: 1.2;
}

.hero-v0-tier-btn.selected .hero-v0-tier-price {
  color: #1d4ed8;
}

.hero-v0-tier-savings {
  margin-top: 8px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  display: inline-block;
}

/* CTA Button */
.hero-v0-cta-wrap {
  padding: 0 16px 10px;
}

.hero-v0-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #1e293b;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.hero-v0-cta:hover {
  background: #0f172a;
  transform: scale(1.02);
}

.hero-v0-cta svg {
  width: 20px;
  height: 20px;
}

/* Sub CTA Text */
.hero-v0-sub-cta {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  padding: 0 16px 8px;
}

/* Trust Badges */
.hero-v0-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 16px 12px;
}

.hero-v0-trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

.hero-v0-trust-badge svg {
  width: 16px;
  height: 16px;
  color: #0d9488;
}

/* Social Proof Footer */
.hero-v0-social {
  background: #1e293b;
  border-radius: 12px;
  padding: 10px 16px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hero-v0-pulse {
  width: 8px;
  height: 8px;
  background: #2dd4bf;
  border-radius: 50%;
  animation: hero-v0-pulse 2s ease-in-out infinite;
}

@keyframes hero-v0-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.hero-v0-live-badge {
  background: #f97316;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.hero-v0-social-text {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.hero-v0-social-text strong {
  color: #fb923c;
  font-weight: 700;
}

/* ============================================
   THE PROTOCOL SECTION
   ============================================ */

.the-protocol {
  background: linear-gradient(to bottom, rgba(239, 246, 255, 0.5), #fff);
  padding: 48px 16px;
}

.the-protocol-container {
  max-width: 900px;
  margin: 0 auto;
}

.the-protocol-header {
  text-align: center;
  margin-bottom: 32px;
}

.the-protocol-badge {
  display: inline-block;
  background: #1e293b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.the-protocol-title {
  font-size: 28px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 4px;
}

.the-protocol-subtitle {
  font-size: 28px;
  font-weight: 900;
  color: #334155;
}

@media (min-width: 768px) {
  .the-protocol-title,
  .the-protocol-subtitle {
    font-size: 36px;
  }
}

/* Steps Grid */
.the-protocol-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 32px;
  position: relative;
}

@media (min-width: 768px) {
  .the-protocol-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  /* Connecting line on desktop */
  .the-protocol-steps::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
  }
}

.the-protocol-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.the-protocol-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
}

.the-protocol-step.final .the-protocol-circle {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
}

.the-protocol-circle svg {
  width: 32px;
  height: 32px;
  stroke-width: 3;
}

.the-protocol-step-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0f172a;
  margin-bottom: 4px;
}

.the-protocol-step-desc {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  line-height: 1.4;
}

/* CTA */
.the-protocol-cta-wrap {
  text-align: center;
}

.the-protocol-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1e293b;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 16px 32px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.the-protocol-cta:hover {
  background: #0f172a;
  transform: scale(1.05);
}

.the-protocol-cta svg {
  width: 20px;
  height: 20px;
}

.the-protocol-cta-sub {
  margin-top: 8px;
  font-size: 13px;
  color: #475569;
}

/* ============================================
   QUICK COMPARE SECTION
   ============================================ */

.quick-compare {
  background: #fff;
  padding: 32px 16px;
}

.quick-compare-container {
  max-width: 900px;
  margin: 0 auto;
}

.quick-compare-header {
  text-align: center;
  margin-bottom: 16px;
}

.quick-compare-title {
  font-size: 24px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 4px;
}

@media (min-width: 768px) {
  .quick-compare-title {
    font-size: 30px;
  }
}

.quick-compare-subtitle {
  font-size: 14px;
  color: #475569;
}

.quick-compare-table {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.quick-compare-head {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 16px;
  gap: 8px;
}

.quick-compare-head-cell {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}

.quick-compare-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  padding: 12px 16px;
  gap: 8px;
  border: none;
  background: #fff;
  width: 100%;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

.quick-compare-row:last-child {
  border-bottom: none;
}

.quick-compare-row:nth-child(even) {
  background: #f8fafc;
}

.quick-compare-row:hover {
  background: #f1f5f9;
}

/* Featured row (Mach 1) */
.quick-compare-row.featured {
  background: #1e293b;
  color: #fff;
}

.quick-compare-row.featured:hover {
  background: #334155;
}

.quick-compare-row.featured .quick-compare-cell {
  color: #fff;
}

.quick-compare-row.featured .quick-compare-desc {
  color: #93c5fd;
}

.quick-compare-row.featured .quick-compare-arrow {
  color: rgba(255, 255, 255, 0.6);
}

.quick-compare-cell {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #0f172a;
}

.quick-compare-name {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.quick-compare-star {
  width: 14px;
  height: 14px;
  fill: #fbbf24;
  color: #fbbf24;
  flex-shrink: 0;
}

.quick-compare-desc {
  font-weight: 600;
  color: #475569;
}

.quick-compare-value {
  font-weight: 700;
}

.quick-compare-arrow {
  width: 16px;
  height: 16px;
  color: #94a3b8;
  margin-left: auto;
}

@media (max-width: 640px) {
  .quick-compare-head,
  .quick-compare-row {
    grid-template-columns: 1.5fr 1.5fr 1fr 1fr;
    padding: 10px 12px;
    font-size: 11px;
  }

  .quick-compare-cell {
    font-size: 11px;
  }

  .quick-compare-name {
    font-size: 12px;
  }
}

/* ========== META COMPLIANCE MESSAGING ========== */
.compliance-banner {
  background: #f0fdf4;
  padding: 8px;
  text-align: center;
  font-size: 14px;
  color: #166534;
  border-bottom: 1px solid #dcfce7;
}

.compliance-icon {
  color: #22c55e;
  margin-right: 8px;
}

.tier-compliance-note {
  text-align: center;
  padding: 8px 0;
  margin-top: 8px;
  font-size: 13px;
  color: #166534;
  background: #f0fdf4;
  border-radius: 4px;
}

.hero-v0-compliance-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}

.hero-v0-compliance-badge {
  background: #22c55e;
  color: white;
  padding: 6px 16px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
}

.hero-v0-compliance-msg {
  color: #166534;
  font-size: 14px;
  font-weight: 500;
}

.bottom-cta-compliance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bottom-cta-compliance .compliance-msg {
  font-weight: 700;
  font-size: 18px;
  color: #22c55e;
}

.bottom-cta-compliance .compliance-sub {
  font-size: 14px;
  color: #6b7280;
}

/* ========== QUIZ-FIRST SECTION ========== */
.quiz-first-section {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
}

.quiz-first-section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #fff;
}

.quiz-subtitle {
  font-size: 1.125rem;
  color: #a0a0a0;
  margin-bottom: 32px;
}

.quiz-benefits {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.quiz-benefits .benefit {
  color: #22c55e;
  font-size: 1rem;
  font-weight: 500;
}

.quiz-primary-cta {
  background: #dc2626;
  color: white;
  padding: 16px 48px;
  font-size: 1.125rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.quiz-primary-cta:hover {
  background: #b91c1c;
}

.quiz-note {
  margin-top: 16px;
  color: #6b7280;
  font-size: 0.875rem;
}

/* Hero education line */
.hero-education {
  font-size: 0.9rem;
  color: #a0a0a0;
  margin-top: 16px;
  font-style: italic;
}

/* Old Way Loss Framing */
.old-way-intro-loss {
  font-size: 1.25rem;
  color: #dc2626;
  font-weight: 500;
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  .quiz-first-section {
    padding: 40px 16px;
  }

  .quiz-first-section h2 {
    font-size: 1.75rem;
  }

  .quiz-benefits {
    flex-direction: column;
    gap: 12px;
  }

  .quiz-primary-cta {
    padding: 14px 32px;
    font-size: 1rem;
    width: 100%;
    max-width: 300px;
  }
}