/* Hide Responsive Menu Pro hamburger and mobile menu on this page */
    #rmp_menu_trigger-89,
    .rmp_menu_trigger,
    .rmp-container,
    #rmp-container-89 { display: none !important; }

    /* Defensive horizontal-overflow guard. The funnel-footer rule below uses
       width:100vw + translateX(-50%) which on Windows includes the scrollbar
       gutter, causing a small horizontal overflow at desktop widths. Clipping
       at the body scope eliminates the scrollbar without changing layout. */
    html.postid-15311, body.postid-15311 { overflow-x: hidden; max-width: 100%; }

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

    :root {
      --bg:             #FFFFFF;
      --nav-bg:         #FFFFFF;
      --sidebar-bg:     #000000;
      --sidebar-divider:#222222;
      --active-tab-bg:  #444444;
      --active-bar:     #444444;
      --text-primary:   #000000;
      --text-white:     #FFFFFF;
      --text-grey:      #AAAAAA;
      --text-light:     #CCCCCC;
      --cta-bg:         #107c4b;
      --cta-text:       #FFFFFF;
      --footer-bg:      #000000;
      --footer-text:    #FFFFFF;
      --footer-sep:     #555555;
      --video-bg:       #E8E6E0;
      --video-stroke:   #CCCCCC;
      --divider:        #E0E0E0;
      --radius-sm:      6px;
      --radius-md:      10px;
      --radius-pill:    999px;
      --font-ui: 'Open Sans', Arial, sans-serif;
      /* Session 11 — formerly 'DM Mono', monospace. User feedback: the "robot" mono treatment
         looks out of place on every surface where it was used. Resolving --font-mono to the
         same stack as --font-ui means every `font-family: var(--font-mono)` consumer now
         renders in Open Sans / sans-serif without touching each rule. */
      --font-mono:      'Open Sans', Arial, sans-serif;
      --sidebar-w:      280px;

      /* Section backgrounds from Section Map */
      --bg-white:       #FFFFFF;
      --bg-black:       #000000;
      --bg-dark-grey:   #2A2A2A;
      --bg-light-grey:  #F0F2F3;

      /* NEW — depth tokens */
      --shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
      --shadow-md:      0 4px 14px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
      --shadow-lg:      0 10px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
      --shadow-xl:      0 20px 60px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.08);
      --shadow-card:    0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
      --shadow-card-hover: 0 8px 28px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.06);
      --glass-bg:       rgba(255,255,255,.7);
      --glass-border:   rgba(255,255,255,.25);
      --glass-bg-dark:  rgba(255,255,255,.06);
      --glass-border-dark: rgba(255,255,255,.10);
      --grain-opacity:  .035;
    }

    html, body { height: 100%; font-family: var(--font-ui); background: var(--bg); color: var(--text-primary); }
    body { display: flex; flex-direction: column; min-height: 100vh; }

    /* Session 11 — High-specificity font override mirroring the checkout page's fix
       (commit c1bc3fc7). Forces Open Sans on every element on the sales page, excluding
       icon fonts. Guards against CartFlows/WooCommerce/Gutenberg CSS bleeding a mono or
       Roboto stack into the cascade, and against any remaining `font-family: var(--font-mono)`
       declarations in this file (the variable is also now aliased to sans-serif above). */
    body.postid-15311,
    body.postid-15311 *:not(i):not(.dashicons):not([class*="icon"]) { font-family: var(--font-ui) !important; }

    /* ══════════════════════════════════════════
       GRAIN / NOISE TEXTURE OVERLAY (global)
       ══════════════════════════════════════════ */
    .vsl-section { position: relative; }
    .vsl-section::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      opacity: var(--grain-opacity);
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 180px 180px;
    }
    .vsl-section > * { position: relative; z-index: 2; }

    /* ══════════════════════════════════════════
       SCROLL REVEAL ANIMATION SYSTEM
       ══════════════════════════════════════════ */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1);
    }
    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: .08s; }
    .reveal-delay-2 { transition-delay: .16s; }
    .reveal-delay-3 { transition-delay: .24s; }
    .reveal-delay-4 { transition-delay: .32s; }
    .reveal-delay-5 { transition-delay: .40s; }
    .reveal-delay-6 { transition-delay: .48s; }

    /* ── NAV ── */
    nav {
      height: 58px;
      background: var(--nav-bg);
      border-bottom: 1px solid #E8E8E8;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 32px;
      flex-shrink: 0;
      box-shadow: 0 1px 4px rgba(0,0,0,.07);
      position: sticky; top: 0; z-index: 50;
      backdrop-filter: blur(12px);
      background: rgba(255,255,255,.92);
    }
    .nav-logo {
      display: flex; align-items: center;
    }
    
    .nav-links { display: flex; gap: 6px; list-style: none; }
    .nav-links li a {
      font-size: 12px; font-weight: 500; color: #000;
      text-decoration: none; padding: 6px 16px;
      border: 1.5px solid #000; border-radius: var(--radius-pill);
      background: var(--nav-bg); letter-spacing: .03em;
      transition: background .15s, color .15s;
    }
    .nav-links li a:hover { background: #000; color: #fff; }

    /* ── PAGE BODY ── */
    .page-body { display: flex; flex: 1; overflow: hidden; width: 100%; }

    /* ── COLLAPSED SIDEBAR TOGGLE TAB ── */
    .sidebar-collapsed-tab {
      width: 28px;
      min-width: 28px;
      background: var(--sidebar-bg);
      border-right: 1px solid #111;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 16px;
      gap: 6px;
      flex-shrink: 0;
    }
    .sidebar-collapsed-tab .tab-icon {
      width: 16px; height: 16px;
      border: 1.5px solid #555;
      border-radius: 3px;
      display: flex; align-items: center; justify-content: center;
    }
    .sidebar-collapsed-tab .tab-icon::after {
      content: '';
      width: 0; height: 0;
      border-style: solid;
      border-width: 3px 0 3px 5px;
      border-color: transparent transparent transparent #555;
    }
    .sidebar-collapsed-tab .tab-label {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      font-family: var(--font-mono);
      font-size: 8px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text-grey);
    }

    /* ── MAIN ──
       Removed `overflow-y: auto` — it produced a SECOND vertical scrollbar
       inside the hero region (next to the document scrollbar). The page is
       a normal vertical scroll; the document handles scrolling, not <main>. */
    main {
      flex: 1;
      padding: 0;
      background: var(--bg);
      display: flex; flex-direction: column; align-items: center;
    }

    /* ══════════════════════════════════════════
       SECTION SYSTEM — with depth backgrounds
       ══════════════════════════════════════════ */
    .vsl-section {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .vsl-section-inner {
      width: 100%;
      max-width: 1060px;
      padding: 52px 52px;
    }

    /* White sections — very subtle warm gradient */
    .vsl-section--white {
      background: linear-gradient(175deg, #FFFFFF 0%, #FAFBFC 50%, #F6F7F8 100%);
      color: var(--text-primary);
    }

    /* Black sections — rich gradient with green tint */
    .vsl-section--black {
      background: linear-gradient(175deg, #0A0A0A 0%, #111111 40%, #0D1410 100%);
      color: var(--text-white);
    }

    /* Dark grey — layered gradient */
    .vsl-section--dark-grey {
      background: linear-gradient(175deg, #2A2A2A 0%, #222222 50%, #1E2420 100%);
      color: var(--text-white);
    }

    /* Light grey — soft blue-warm gradient */
    .vsl-section--light-grey {
      background: linear-gradient(175deg, #F0F2F3 0%, #EBEEF0 50%, #E8ECEE 100%);
      color: var(--text-primary);
    }

    /* Section transition overlaps — soft edge blending */
    .vsl-section--white + .vsl-section--dark-grey::before,
    .vsl-section--white + .vsl-section--black::before,
    .vsl-section--light-grey + .vsl-section--black::before,
    .vsl-section--light-grey + .vsl-section--dark-grey::before {
      content: '';
      position: absolute;
      top: -1px; left: 0; right: 0;
      height: 80px;
      background: linear-gradient(to bottom, rgba(0,0,0,0), transparent);
      z-index: 1;
      pointer-events: none;
    }

    /* ── TYPOGRAPHY ── */
    .section-eyebrow {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-grey);
      margin-bottom: 14px;
      text-align: center;
    }
    .section-h1 {
      font-size: 38px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -.025em;
      margin-bottom: 14px;
      text-align: center;
    }
    .section-h2 {
      font-size: 28px;
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.02em;
      margin-bottom: 18px;
    }
    .section-h3 {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.01em;
      margin-bottom: 12px;
    }
    .section-sub {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: .005em;
      text-align: center;
      max-width: 800px;
      margin: 0 auto 18px;
    }
    .section-body {
      font-size: 15px;
      font-weight: 400;
      line-height: 1.65;
      letter-spacing: .005em;
      margin-bottom: 16px;
    }
    .section-body strong { font-weight: 700; }

    /* ── CTA BUTTON — enhanced with depth ── */
    .cta-btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 10px;
      padding: 0 44px;
      min-width: 340px;
      max-width: 600px;
      height: 56px;
      border-radius: var(--radius-pill); border: none;
      background: #107c4b;
      color: var(--cta-text);
      font-family: var(--font-ui); font-size: 17px; font-weight: 700;
      letter-spacing: .02em; cursor: pointer;
      transition: filter .15s, transform .12s;
      white-space: nowrap;
      text-decoration: none;
      box-shadow: 0 4px 20px rgba(16,124,75,.3);
    }
    .cta-btn:hover {
      filter: brightness(1.1);
      transform: translateY(-1px);
    }
    .cta-btn:active { transform: translateY(0); }
    
    .cta-btn .cta-icon {
      width: 17px; height: 17px; border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,.7);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .cta-btn .cta-icon::after {
      content: ''; width: 0; height: 0; border-style: solid;
      border-width: 3.5px 0 3.5px 6px;
      border-color: transparent transparent transparent #fff;
      margin-left: 1px;
    }
    .cta-wrap {
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      margin-top: 28px;
    }
    .cta-trust {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .04em;
      color: var(--text-grey);
      text-align: center;
    }
    .cta-scroll-note {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .04em;
      color: var(--text-light);
      text-align: center;
    }

    /* ══════════════════════════════════════════
       PHOTO-READY PLACEHOLDER — replaces dashed boxes
       ══════════════════════════════════════════ */
    .visual-placeholder {
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 24px;
      color: rgba(0,0,0,.35);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .04em;
      line-height: 1.5;
      /* Styled photo-ready container */
      background: linear-gradient(145deg, #E8E9EB 0%, #D8DADD 50%, #CDCFD3 100%);
      border: none;
      box-shadow: inset 0 2px 6px rgba(0,0,0,.06), var(--shadow-sm);
      position: relative;
      overflow: hidden;
    }
    .visual-placeholder::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.3) 0%, transparent 50%, rgba(0,0,0,.03) 100%);
      pointer-events: none;
    }
    /* Camera icon overlay */
    .visual-placeholder::after {
      content: '';
      position: absolute;
      top: 12px;
      right: 12px;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: rgba(0,0,0,.08);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.25)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'%3E%3C/path%3E%3Ccircle cx='12' cy='13' r='4'%3E%3C/circle%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px;
    }

    /* Dark section variants */
    .vsl-section--black .visual-placeholder,
    .vsl-section--dark-grey .visual-placeholder {
      background: linear-gradient(145deg, #1E1E1E 0%, #171717 50%, #111111 100%);
      color: rgba(255,255,255,.25);
      box-shadow: inset 0 2px 6px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.3);
    }
    .vsl-section--black .visual-placeholder::before,
    .vsl-section--dark-grey .visual-placeholder::before {
      background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 50%, rgba(0,0,0,.1) 100%);
    }
    .vsl-section--black .visual-placeholder::after,
    .vsl-section--dark-grey .visual-placeholder::after {
      background-color: rgba(255,255,255,.05);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'%3E%3C/path%3E%3Ccircle cx='12' cy='13' r='4'%3E%3C/circle%3E%3C/svg%3E");
    }

    /* ── VIDEO PLAYER ── */
    .video-wrap {
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
      width: 100%; aspect-ratio: 16/9;
      background: var(--video-bg);
      border: 1.5px solid var(--video-stroke);
      border-radius: var(--radius-md);
      position: relative; overflow: hidden; margin-bottom: 22px;
      box-shadow: var(--shadow-lg);
    }
    .video-wrap::before {
      content: ''; position: absolute; inset: 0;
      background-image: repeating-linear-gradient(
        -45deg, transparent, transparent 12px,
        var(--video-stroke) 12px, var(--video-stroke) 13px
      );
      opacity: .3;
    }
    .video-center {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -55%);
      text-align: center; z-index: 1;
    }
    .video-play-icon {
      width: 64px; height: 64px; border-radius: 50%;
      background: #107c4b; 
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 10px;
      box-shadow: 0 4px 20px rgba(0,0,0,.12);
      transition: transform .2s, box-shadow .2s;
    }
    .video-play-icon:hover {
      transform: scale(1.08);
      box-shadow: 0 6px 28px rgba(0,0,0,.18);
    }
    .video-play-icon svg { fill: #fff; }
    .video-lesson-label {
      font-family: var(--font-mono); font-size: 11px;
      letter-spacing: .08em; color: #666; text-transform: uppercase;
    }
    .video-controls {
      position: absolute; bottom: 0; left: 0; right: 0; height: 44px;
      background: linear-gradient(to top, rgba(0,0,0,.2), transparent);
      display: flex; align-items: center; padding: 0 16px; gap: 10px; z-index: 1;
    }
    .ctrl-btn { width: 22px; height: 22px; border-radius: 4px; background: rgba(255,255,255,.4); flex-shrink: 0; }
    .scrubber { flex: 1; height: 4px; background: rgba(255,255,255,.35); border-radius: 2px; position: relative; }
    .scrubber-fill { width: 0%; height: 100%; background: #107c4b; border-radius: 2px; }
    .scrubber-head { position: absolute; left: 0%; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--cta-bg); border: 2px solid #fff; }
    .time-tag { font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.8); white-space: nowrap; }

    /* ── CREDIBILITY BAR ── */
    .credibility-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .04em;
      color: var(--text-grey);
      margin-top: 18px;
    }
    .credibility-bar .sep { color: var(--text-grey); }

    /* ── DATA CALLOUT — with depth ── */
    .data-callout {
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.15);
      border-radius: var(--radius-md);
      padding: 20px 28px;
      text-align: center;
      margin: 20px 0;
      backdrop-filter: blur(8px);
    }
    .data-callout-num {
      font-size: 32px;
      font-weight: 700;
      color: var(--cta-bg);
      line-height: 1.2;
    }
    .data-callout-label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .06em;
      color: var(--text-grey);
      margin-top: 4px;
    }

    /* ── ICON ROW ── */
    .icon-row {
      display: flex;
      justify-content: center;
      gap: 32px;
      margin: 24px 0;
    }
    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 80px;
    }
    .icon-circle {
      width: 48px; height: 48px;
      border-radius: 50%;
      border: 2px solid currentColor;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      transition: transform .2s, box-shadow .2s;
    }
    .icon-circle:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(16,124,75,.2);
    }
    .icon-label {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .04em;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.3;
    }

    /* ══════════════════════════════════════════
       TESTIMONIAL CARDS — with real depth
       ══════════════════════════════════════════ */
    .testimonial-row {
      display: flex;
      gap: 20px;
      margin-top: 24px;
    }
    .testimonial-card {
      flex: 1;
      background: var(--bg-white);
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 12px;
      padding: 24px;
      color: var(--text-primary);
      box-shadow: var(--shadow-card);
      transition: box-shadow .25s, transform .25s;
    }
    .testimonial-card:hover {
      box-shadow: var(--shadow-card-hover);
      transform: translateY(-2px);
    }
    .vsl-section--black .testimonial-card,
    .vsl-section--dark-grey .testimonial-card {
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.08);
      color: var(--text-white);
      backdrop-filter: blur(8px);
      box-shadow: 0 2px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
    }
    .vsl-section--black .testimonial-card:hover,
    .vsl-section--dark-grey .testimonial-card:hover {
      box-shadow: 0 8px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
      transform: translateY(-2px);
    }
    .testimonial-stars {
      color: #E8A530;
      font-size: 14px;
      letter-spacing: 2px;
      margin-bottom: 10px;
      text-shadow: 0 1px 2px rgba(0,0,0,.08);
    }
    .testimonial-quote {
      font-size: 14px;
      line-height: 1.55;
      font-style: italic;
      margin-bottom: 12px;
    }
    .testimonial-meta {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .04em;
      color: var(--text-grey);
    }
    .testimonial-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 8px;
      letter-spacing: .06em;
      padding: 3px 10px;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(16,124,75,.3);
      color: var(--cta-bg);
      margin-top: 6px;
      background: rgba(16,124,75,.06);
    }

    /* ── COMPARISON TABLE — with depth ── */
    .comp-table {
      width: 100%;
      border-collapse: collapse;
      margin: 24px 0;
      font-size: 13px;
      box-shadow: var(--shadow-md);
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    .comp-table th, .comp-table td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid #E0E0E0;
    }
    .comp-table th {
      background: var(--bg-black);
      color: var(--text-white);
      font-weight: 600;
      font-size: 12px;
      letter-spacing: .03em;
    }
    .comp-table th.highlight {
      background: linear-gradient(180deg, #12905A 0%, #0C6E42 100%);
    }
    .comp-table td { vertical-align: top; background: #fff; }
    .comp-table tr:last-child td { border-bottom: none; }
    .comp-table tr:hover td { background: #F8FAF9; }
    .comp-table .check { color: var(--cta-bg); font-weight: 700; }
    .comp-table .fail { color: #cc3333; }

    /* ── VALUE STACK ── */
    .value-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid var(--divider);
    }
    .value-item:last-child { border-bottom: none; }
    .value-check {
      color: var(--cta-bg);
      font-size: 18px;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .value-name {
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 2px;
    }
    .value-desc {
      font-size: 13px;
      color: var(--text-grey);
      line-height: 1.4;
    }

    /* ── GUARANTEE CARDS — with depth ── */
    .guarantee-row {
      display: flex;
      gap: 24px;
      margin: 24px 0;
    }
    .guarantee-card {
      flex: 1;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      padding: 28px;
      text-align: center;
      background: rgba(255,255,255,.04);
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 20px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
      transition: box-shadow .25s, transform .25s;
    }
    .guarantee-card:hover {
      box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
      transform: translateY(-2px);
    }
    .guarantee-badge-placeholder {
      width: 80px; height: 80px;
      border: 2px solid rgba(16,124,75,.4);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px;
      font-family: var(--font-mono);
      font-size: 9px;
      color: rgba(16,124,75,.7);
      background: rgba(16,124,75,.08);
      box-shadow: 0 0 20px rgba(16,124,75,.1);
    }
    .guarantee-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .guarantee-body {
      font-size: 14px;
      line-height: 1.55;
      color: #ccc;
    }

    /* ── WARRANTY ROW ── */
    .warranty-row {
      display: flex;
      justify-content: center;
      gap: 40px;
      margin: 20px 0;
    }
    .warranty-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .warranty-icon-placeholder {
      width: 40px; height: 40px;
      border: 1.5px solid rgba(255,255,255,.15);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono);
      font-size: 8px;
      color: rgba(255,255,255,.5);
      background: rgba(255,255,255,.04);
    }
    .warranty-label {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .04em;
      color: var(--text-grey);
      text-align: center;
    }

    /* ── FAQ — with depth ── */
    .faq-item {
      border-bottom: 1px solid var(--divider);
    }
    .faq-item:nth-child(even) {
      background: rgba(240,242,243,.5);
      margin: 0 -18px;
      padding-left: 18px;
      padding-right: 18px;
      border-radius: var(--radius-sm);
    }
    .faq-q {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.35;
      padding: 16px 4px 16px 12px;
      border-left: 3px solid var(--cta-bg);
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background .15s;
    }
    .faq-q:hover { background: rgba(16,124,75,.03); }
    .faq-q::-webkit-details-marker { display: none; }
    .faq-q::after {
      content: '+';
      font-size: 20px;
      font-weight: 400;
      color: var(--cta-bg);
      flex-shrink: 0;
      margin-left: 12px;
      transition: transform .2s;
    }
    details[open] > .faq-q::after {
      content: '−';
    }
    .faq-a {
      font-size: 14px;
      line-height: 1.6;
      color: #555;
      padding: 0 15px 16px 15px;
    }

    /* ── ZIGZAG COMPONENT LAYOUT ── */
    .zigzag-row {
      display: flex;
      gap: 32px;
      align-items: center;
      margin-bottom: 32px;
    }
    .zigzag-row.reverse { flex-direction: row-reverse; }
    .zigzag-text { flex: 1; }
    .zigzag-visual { flex: 0 0 38%; }

    /* ── SPECS GRID ── */
    .specs-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 24px;
      margin: 20px 0;
    }
    .spec-item {
      padding: 12px 16px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,.03);
      transition: background .15s;
    }
    .spec-item:hover { background: rgba(255,255,255,.06); }
    .spec-label {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--text-grey);
      margin-bottom: 4px;
    }
    .spec-value {
      font-size: 15px;
      font-weight: 700;
    }

    /* ── IDEAL BUYER BOX ── */
    .ideal-buyer-box {
      background: rgba(16,124,75,.08);
      border: 1px solid rgba(16,124,75,.2);
      border-radius: var(--radius-md);
      padding: 22px 26px;
      margin: 20px 0;
      box-shadow: 0 2px 8px rgba(16,124,75,.06);
    }
    .ideal-buyer-box .trigger-num {
      color: var(--cta-bg);
      font-weight: 700;
      margin-right: 6px;
    }

    /* ── TWO-PATHS — with depth ── */
    .two-paths {
      display: flex;
      gap: 32px;
      margin: 24px 0;
    }
    .path-card {
      flex: 1;
      padding: 24px;
      border-radius: 14px;
      transition: transform .25s, box-shadow .25s;
    }
    .path-card:hover { transform: translateY(-2px); }
    .path-card--a {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 2px 12px rgba(0,0,0,.2);
    }
    .path-card--a:hover { box-shadow: 0 6px 24px rgba(0,0,0,.3); }
    .path-card--b {
      background: rgba(16,124,75,.1);
      border: 1px solid rgba(16,124,75,.25);
      box-shadow: 0 2px 12px rgba(16,124,75,.15);
    }
    .path-card--b:hover { box-shadow: 0 6px 24px rgba(16,124,75,.25); }
    .path-label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-grey);
      margin-bottom: 10px;
    }
    .path-body {
      font-size: 14px;
      line-height: 1.6;
    }

    /* ── STICKY BAR ── */
    .sticky-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: rgba(0,0,0,.92);
      backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255,255,255,.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 32px;
      z-index: 100;
      box-shadow: 0 -4px 20px rgba(0,0,0,.2);
    }
    .sticky-bar .trust-line {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .04em;
      color: var(--text-grey);
    }
    .sticky-bar .cta-btn {
      height: 38px;
      font-size: 13px;
      min-width: 220px;
    }

    /* ── FOOTER ── */
    footer {
      border-top: 1px solid #222; background: var(--footer-bg);
      height: 44px; display: flex; align-items: center;
      justify-content: center; gap: 28px; flex-shrink: 0;
    }
    footer a { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--footer-text); text-decoration: none; text-transform: uppercase; }
    footer a:hover { color: #aaa; }
    .footer-sep { font-size: 10px; color: var(--footer-sep); }

    /* ══════════════════════════════════════════
       UGC GRID — with depth
       ══════════════════════════════════════════ */
    .ugc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin: 24px 0;
    }
    .ugc-card {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,.2);
      transition: box-shadow .25s, transform .25s;
    }
    .ugc-card:hover {
      box-shadow: 0 8px 28px rgba(0,0,0,.35);
      transform: translateY(-3px);
    }
    .ugc-card-img {
      width: 100%;
      aspect-ratio: 4/3;
      background: linear-gradient(145deg, #1A1A1A 0%, #111 100%);
      border-bottom: 1px solid rgba(255,255,255,.06);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.2);
      text-align: center;
      padding: 12px;
      position: relative;
    }
    /* Camera icon for UGC photo placeholders */
    .ugc-card-img::after {
      display: none;
    }
    .ugc-card-body {
      padding: 14px;
    }
    .ugc-card-stars {
      color: #E8A530;
      font-size: 12px;
      letter-spacing: 1px;
      margin-bottom: 6px;
    }
    .ugc-card-caption {
      font-size: 12px;
      line-height: 1.45;
      color: #ccc;
      margin-bottom: 8px;
    }
    .ugc-card-meta {
      font-family: var(--font-mono);
      font-size: 9px;
      color: #666;
      letter-spacing: .04em;
    }

    /* ── FOUNDER ROW ── */
    .founder-row {
      display: flex;
      gap: 32px;
      align-items: flex-start;
      margin: 24px 0;
    }
    .founder-photo {
      flex: 0 0 35%;
    }
    .founder-text {
      flex: 1;
    }

    /* ── COMPONENT CARD ── */
    .component-list { margin: 24px 0; }
    .component-entry {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      padding: 18px 0;
      border-bottom: 1px solid var(--divider);
    }
    .component-entry:last-child { border-bottom: none; }
    .component-icon {
      width: 44px; height: 44px;
      border: 1.5px solid #ccc;
      border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 9px; color: #999;
      flex-shrink: 0;
      text-align: center;
    }
    .component-info { flex: 1; }
    .component-tag {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--text-grey);
      margin-bottom: 2px;
    }
    .component-name {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .component-desc {
      font-size: 14px;
      line-height: 1.5;
      color: #666;
    }


    /* ════════════════════════════════════════════
       VOLTAGE SELECTION LIGHTBOX (Rev 2 + depth)
       ════════════════════════════════════════════ */

    .voltage-overlay {
      position: fixed;
      inset: 0;
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(0, 0, 0, 0);
      backdrop-filter: blur(0px);
      visibility: hidden;
      pointer-events: none;
      transition: background 0.35s ease, backdrop-filter 0.35s ease, visibility 0s 0.35s;
    }
    .voltage-overlay.is-open {
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(8px);
      visibility: visible;
      pointer-events: auto;
      transition: background 0.35s ease, backdrop-filter 0.35s ease, visibility 0s 0s;
    }
    .voltage-modal {
      background: linear-gradient(180deg, #FAFBFC 0%, #F0F2F3 100%);
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      padding: 44px 40px 36px;
      max-width: 520px;
      width: 100%;
      position: relative;
      opacity: 0;
      transform: translateY(20px) scale(0.97);
      transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
      box-shadow: 0 24px 80px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.8);
    }
    .voltage-overlay.is-open .voltage-modal {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .voltage-close {
      position: absolute;
      top: 14px; right: 14px;
      width: 30px; height: 30px;
      background: #FFFFFF;
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 50%;
      color: #999999;
      font-size: 18px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: border-color 0.2s, color 0.2s, box-shadow .2s;
      line-height: 1;
      box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    .voltage-close:hover { border-color: #4A4A4A; color: #4A4A4A; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
    .voltage-step {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-ui);
      font-size: 11px; font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.8px;
      color: var(--cta-bg);
      margin-bottom: 14px;
    }
    .voltage-step-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--cta-bg);
      box-shadow: 0 0 8px rgba(16,124,75,.4);
    }
    .voltage-heading {
      font-family: var(--font-ui);
      font-size: 22px; font-weight: 700;
      color: #1A1A1A;
      line-height: 1.3;
      margin-bottom: 6px;
    }
    .voltage-subhead {
      font-family: var(--font-ui);
      font-size: 14px;
      color: #4A4A4A;
      line-height: 1.55;
      margin-bottom: 28px;
      opacity: 0.75;
    }
    .voltage-options {
      display: flex;
      gap: 14px;
      margin-bottom: 20px;
    }
    .voltage-btn {
      flex: 1;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center;
      gap: 4px;
      padding: 28px 16px 24px;
      background: #FFFFFF;
      border: 2px solid rgba(0,0,0,.08);
      border-radius: 12px;
      cursor: pointer;
      font-family: var(--font-ui);
      transition: border-color 0.2s, background 0.2s, transform 0.12s, box-shadow 0.2s;
      box-shadow: 0 2px 8px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,1);
    }
    .voltage-btn:hover {
      border-color: var(--cta-bg);
      background: #F0FAF5;
      box-shadow: 0 4px 16px rgba(16, 124, 75, 0.12), inset 0 1px 0 rgba(255,255,255,1);
    }
    .voltage-btn:active { transform: scale(0.97); }
    .voltage-icon {
      width: 48px; height: 48px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 6px;
      font-size: 20px;
      background: linear-gradient(135deg, #E0F2E9 0%, #C8E6D6 100%);
      color: var(--cta-bg);
      box-shadow: 0 2px 8px rgba(16,124,75,.1);
    }
    .voltage-btn-label {
      font-size: 22px; font-weight: 700;
      color: #1A1A1A;
      letter-spacing: -0.3px;
    }
    .voltage-btn-desc {
      font-size: 12px; color: #999999; line-height: 1.4;
    }
    .voltage-helper {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 14px 16px;
      background: linear-gradient(135deg, #E0F2E9 0%, #D0EAD9 100%);
      border: 1px solid #B8D9C5;
      border-radius: 10px;
      font-family: var(--font-ui);
      font-size: 12px; color: #3A5A48; line-height: 1.55;
      box-shadow: 0 1px 4px rgba(16,124,75,.06);
    }
    .voltage-helper strong { font-weight: 700; }
    .voltage-helper-icon { flex-shrink: 0; margin-top: 1px; font-size: 14px; }

    /* Selected state — green ring + tinted bg, beats the :hover spec. */
    .voltage-btn.is-selected {
      border-color: var(--cta-bg);
      background: #F0FAF5;
      box-shadow: 0 0 0 3px rgba(16,124,75,.18), 0 4px 16px rgba(16,124,75,.12), inset 0 1px 0 rgba(255,255,255,1);
    }

    /* Continue CTA inside the modal — full-width to match the .voltage-helper
       box above, centered horizontally with display:flex (cta-btn is inline-flex
       but inside the column-flex modal block-level + width:100% gives full row). */
    .voltage-continue {
      display: flex;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      margin: 18px 0 0;
    }
    .voltage-continue:disabled,
    .voltage-continue[aria-disabled="true"] {
      opacity: .45;
      cursor: not-allowed;
      pointer-events: none;
      filter: none;
      transform: none;
    }

    @media (max-width: 520px) {
      .voltage-modal { padding: 36px 24px 28px; border-radius: 14px; }
      .voltage-heading { font-size: 20px; }
      .voltage-subhead { font-size: 13px; margin-bottom: 24px; }
      .voltage-options { flex-direction: column; gap: 12px; }
      .voltage-btn { padding: 22px 16px 18px; }
      .voltage-btn-label { font-size: 20px; }
    }


    /* ════════════════════════════════════════════
       CHECKOUT PAGE STYLES — with depth
       ════════════════════════════════════════════ */

    #checkout-view { display: none; }
    #checkout-view.is-active { display: block; }
    #vsl-view.is-hidden { display: none; }

    /* -- Header bar -- */
    .checkout-header {
      background: rgba(255,255,255,.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0,0,0,.06);
      padding: 0 40px;
      height: 72px;
      display: flex; align-items: center; justify-content: space-between;
      box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }
    .header-logo {
      display: flex; align-items: center; gap: 10px; text-decoration: none;
    }
    .header-logo-icon {
      width: 36px; height: 36px;
      background: linear-gradient(135deg, #12905A 0%, #0C6E42 100%);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 8px rgba(16,124,75,.25);
    }
    .header-logo-icon svg { width: 20px; height: 20px; }
    .header-logo-text {
      font-size: 15px; font-weight: 700;
      color: #1A1A1A; letter-spacing: -.02em; line-height: 1.15;
    }
    .header-logo-text span {
      display: block;
      font-family: var(--font-mono);
      font-size: 8px; font-weight: 400;
      letter-spacing: .12em; text-transform: uppercase;
      color: #999999; margin-top: 1px;
    }
    .step-progress { display: flex; align-items: center; gap: 0; }
    .step-node { display: flex; align-items: center; gap: 8px; }
    .step-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--cta-bg); flex-shrink: 0;
    }
    .step-dot.inactive { background: #E5E7EB; }
    .step-dot.current { background: var(--cta-bg); box-shadow: 0 0 0 3px rgba(16,124,75,.2); }
    .step-label { font-size: 13px; font-weight: 600; color: #1A1A1A; }
    .step-label.inactive { font-weight: 400; color: #999999; }
    .step-connector { width: 48px; height: 2px; background: #E5E7EB; margin: 0 12px; }
    .step-connector.done { background: var(--cta-bg); }
    .secure-badge {
      display: flex; align-items: center; gap: 6px;
      padding: 7px 16px;
      border: 1.5px solid var(--cta-bg);
      border-radius: var(--radius-pill);
      font-size: 12px; font-weight: 600; color: var(--cta-bg);
      letter-spacing: .02em;
      background: rgba(16,124,75,.04);
    }
    .secure-badge svg { width: 14px; height: 14px; flex-shrink: 0; }

    /* -- Page layout -- */
    .checkout-page {
      max-width: 1200px; margin: 0 auto;
      padding: 36px 40px 80px;
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: 36px; align-items: start;
      background: linear-gradient(180deg, #F5F6F8 0%, #ECEEF0 100%);
      position: relative;
    }
    /* Subtle texture on checkout background */
    .checkout-page::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .025;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 180px 180px;
    }
    .checkout-page > * { position: relative; z-index: 1; }

    /* -- Form column -- */
    .form-col { display: flex; flex-direction: column; gap: 0; }
    .form-card {
      background: #FFFFFF;
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 16px;
      padding: 32px 30px;
      box-shadow: var(--shadow-md);
    }
    .form-card + .form-card { margin-top: 20px; }
    .form-section-heading {
      font-size: 18px; font-weight: 700;
      color: #1A1A1A; margin-bottom: 20px;
      letter-spacing: -.01em;
    }
    .field-row { display: flex; gap: 14px; margin-bottom: 16px; }
    .field-row:last-child { margin-bottom: 0; }
    .field-row.single { flex-direction: column; }
    .field-group { flex: 1; display: flex; flex-direction: column; gap: 0; position: relative; }
    .field-group input,
    .field-group select,
    .field-group textarea {
      width: 100%; height: 52px;
      border: 1.5px solid #D1D5DB;
      border-radius: 8px;
      padding: 22px 14px 8px;
      font-family: var(--font-ui); font-size: 14px;
      color: #1A1A1A; background: #FFFFFF;
      transition: border-color .2s, box-shadow .2s;
      outline: none;
    }
    .field-group textarea { height: 90px; resize: vertical; padding-top: 28px; }
    .field-group select {
      appearance: none; cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 36px;
    }
    .field-group input:focus,
    .field-group select:focus,
    .field-group textarea:focus {
      border-color: var(--cta-bg);
      box-shadow: 0 0 0 3px rgba(16,124,75,.1);
    }
    .field-group .float-label {
      position: absolute; top: 8px; left: 15px;
      font-size: 10px; font-weight: 600;
      color: #999999; letter-spacing: .03em;
      text-transform: uppercase;
      pointer-events: none; z-index: 1;
    }
    .field-helper {
      font-family: var(--font-mono);
      font-size: 10px; color: #999999;
      margin-top: 4px; letter-spacing: .02em;
    }
    .checkbox-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
    .checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--cta-bg); cursor: pointer; }
    .checkbox-row label { font-size: 14px; font-weight: 500; color: #4A4A4A; cursor: pointer; }
    .shipping-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 16px;
      background: #FAFAFA;
      border: 1px solid #E5E7EB;
      border-radius: var(--radius-sm);
    }
    .shipping-row .shipping-method { font-size: 14px; color: #4A4A4A; }
    .shipping-row .shipping-price { font-size: 14px; font-weight: 700; color: var(--cta-bg); }

    /* -- Order table -- */
    .order-table { width: 100%; border-collapse: collapse; }
    .order-table thead th {
      font-size: 13px; font-weight: 600; color: #4A4A4A;
      padding: 12px 0; border-bottom: 2px solid #E5E7EB; text-align: left;
    }
    .order-table thead th:last-child { text-align: right; }
    .order-table .product-row td {
      padding: 18px 0; vertical-align: middle;
      border-bottom: 1px solid #E5E7EB;
    }
    .product-cell { display: flex; align-items: center; gap: 14px; }
    .product-thumb {
      width: 60px; height: 60px;
      border-radius: 8px;
      background: linear-gradient(135deg, #E8F5EE 0%, #D4ECDF 100%);
      border: 1px solid #C4E2D2;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; overflow: hidden;
      box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    .product-thumb-inner {
      font-family: var(--font-mono);
      font-size: 8px; color: var(--cta-bg);
      text-align: center; line-height: 1.2; letter-spacing: .02em;
    }
    .product-name { font-size: 14px; font-weight: 600; color: #1A1A1A; line-height: 1.3; }
    .product-variant { font-size: 11px; color: #999999; margin-top: 2px; }
    .product-qty { font-size: 13px; color: #999999; padding: 0 12px; }
    .product-price { font-size: 15px; font-weight: 700; color: #1A1A1A; text-align: right; }
    .order-table .summary-row td { padding: 10px 0; font-size: 14px; color: #4A4A4A; }
    .order-table .summary-row td:last-child { text-align: right; font-weight: 600; }
    .order-table .total-row td {
      padding: 14px 0; border-top: 2px solid #1A1A1A;
      font-size: 18px; font-weight: 700; color: #1A1A1A;
    }
    .order-table .total-row td:last-child { text-align: right; }
    .coupon-link {
      display: inline-block; margin-top: 12px;
      font-size: 13px; color: var(--cta-bg);
      text-decoration: none; font-weight: 500; cursor: pointer;
    }
    .coupon-link:hover { text-decoration: underline; }

    /* -- Payment section -- */
    .payment-box { border: 1.5px solid #E5E7EB; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
    .payment-option {
      padding: 16px; border-bottom: 1px solid #E5E7EB;
      cursor: pointer; display: flex; align-items: center; gap: 10px;
      transition: background .15s;
    }
    .payment-option:last-child { border-bottom: none; }
    .payment-option.active { background: #E8F5EE; }
    .payment-radio {
      width: 18px; height: 18px;
      border: 2px solid #D1D5DB; border-radius: 50%;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: border-color .15s;
    }
    .payment-radio.selected { border-color: var(--cta-bg); }
    .payment-radio.selected::after {
      content: ''; width: 10px; height: 10px;
      border-radius: 50%; background: var(--cta-bg);
    }
    .payment-label { font-size: 14px; font-weight: 600; color: #1A1A1A; }
    .payment-desc { font-size: 12px; color: #999999; padding: 0 16px 14px 44px; }
    .card-fields { padding: 0 16px 18px 44px; display: flex; flex-direction: column; gap: 10px; }
    .card-fields .field-row { margin-bottom: 0; }
    .card-fields input {
      height: 44px;
      border: 1.5px solid #D1D5DB; border-radius: 8px;
      padding: 0 14px;
      font-family: var(--font-ui); font-size: 14px;
      color: #1A1A1A; background: #FFFFFF;
      outline: none; width: 100%; transition: border-color .2s;
    }
    .card-fields input:focus { border-color: var(--cta-bg); }
    .card-fields .card-row { display: flex; gap: 10px; }

    /* -- Guarantee bar -- */
    .guarantee-bar {
      background: linear-gradient(135deg, #E8F5EE 0%, #D8ECDF 100%);
      border: 1.5px solid #C4E2D2;
      border-radius: 12px;
      padding: 16px 18px; margin-top: 24px;
      display: flex; align-items: flex-start; gap: 14px;
      box-shadow: 0 2px 8px rgba(16,124,75,.06);
    }
    .guarantee-shield {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg, #12905A 0%, #0C6E42 100%);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(16,124,75,.25);
    }
    .guarantee-shield svg { width: 18px; height: 18px; }
    .guarantee-text { font-size: 13px; line-height: 1.55; color: #4A4A4A; }
    .guarantee-text strong { color: #1A1A1A; font-weight: 700; }

    /* -- Place order button — enhanced -- */
    .place-order-btn {
      width: 100%; height: 56px;
      border: none; border-radius: 12px;
      background: linear-gradient(180deg, #12905A 0%, #0C6E42 100%);
      color: #fff;
      font-family: var(--font-ui);
      font-size: 16px; font-weight: 700; letter-spacing: .04em;
      cursor: pointer;
      transition: background .2s, transform .1s, box-shadow .2s;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      margin-top: 20px; text-transform: uppercase;
      box-shadow: 0 4px 16px rgba(16,124,75,.3), 0 2px 6px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.15);
    }
    .place-order-btn:hover {
      background: linear-gradient(180deg, #0F7D4E 0%, #0A5E38 100%);
      box-shadow: 0 6px 24px rgba(16,124,75,.35), 0 3px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.18);
      transform: translateY(-1px);
    }
    .place-order-btn:active { transform: translateY(0); }
    .place-order-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
    .btn-subtext {
      font-family: var(--font-mono);
      font-size: 10px; letter-spacing: .04em; color: #999999;
      text-align: center; margin-top: 10px;
    }

    /* -- Right column -- */
    .reinforcement-col {
      display: flex; flex-direction: column; gap: 20px;
      position: sticky; top: 90px;
    }
    .side-card {
      background: #FFFFFF; border: 1px solid rgba(0,0,0,.06);
      border-radius: 16px; padding: 28px 26px;
      box-shadow: var(--shadow-md);
    }
    .side-card-title {
      font-size: 20px; font-weight: 700;
      color: #1A1A1A; margin-bottom: 10px; letter-spacing: -.01em;
    }
    .side-card-desc { font-size: 14px; line-height: 1.6; color: #4A4A4A; margin-bottom: 18px; }
    .benefit-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
    .benefit-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #F0F1F3; }
    .benefit-item:last-child { border-bottom: none; }
    .benefit-check { color: var(--cta-bg); font-size: 16px; font-weight: 700; flex-shrink: 0; line-height: 1.3; }
    .benefit-name { font-size: 13px; font-weight: 700; color: #1A1A1A; line-height: 1.3; }
    .benefit-desc { font-size: 11px; color: #999999; line-height: 1.4; margin-top: 1px; }
    .system-photo-placeholder {
      margin-top: 18px; border-radius: 12px; overflow: hidden;
      background: linear-gradient(145deg, #E8E9EB 0%, #D8DADD 100%);
      box-shadow: inset 0 2px 6px rgba(0,0,0,.06), var(--shadow-sm);
    }
    .system-photo-inner {
      aspect-ratio: 21 / 9;
      display: flex; align-items: center; justify-content: center; text-align: center;
      padding: 16px 20px;
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: .03em; line-height: 1.5; color: rgba(0,0,0,.3);
    }

    /* -- Checkout testimonials -- */
    #checkout-view .testimonial-card {
      background: #FAFAFA; border: 1px solid rgba(0,0,0,.06);
      border-radius: 12px; padding: 20px; margin-bottom: 14px;
      box-shadow: 0 1px 4px rgba(0,0,0,.04);
      transition: box-shadow .2s;
    }
    #checkout-view .testimonial-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
    #checkout-view .testimonial-card:last-child { margin-bottom: 0; }
    #checkout-view .testimonial-quote {
      font-size: 14px; font-style: italic; line-height: 1.55;
      color: #4A4A4A; margin-bottom: 14px;
    }
    .testimonial-author { display: flex; align-items: center; gap: 10px; }
    .testimonial-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg, #E8F5EE 0%, #D4ECDF 100%);
      border: 2px solid #C4E2D2;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 10px; font-weight: 700;
      color: var(--cta-bg); flex-shrink: 0;
      box-shadow: 0 1px 4px rgba(16,124,75,.1);
    }
    #checkout-view .testimonial-name { font-size: 13px; font-weight: 700; color: #1A1A1A; line-height: 1.2; }
    .testimonial-location { font-size: 11px; color: #999999; }
    #checkout-view .testimonial-stars {
      color: #E8A530; font-size: 12px; letter-spacing: 2px; margin-bottom: 8px;
    }

    /* -- Confidence section -- */
    .confidence-badge {
      display: flex; align-items: center; gap: 16px;
      background: linear-gradient(135deg, #E8F5EE 0%, #D8ECDF 100%);
      border: 1px solid #C4E2D2;
      border-radius: 12px; padding: 18px 20px; margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(16,124,75,.06);
    }
    .confidence-badge-icon {
      width: 56px; height: 56px; border-radius: 50%;
      background: linear-gradient(135deg, #12905A 0%, #0C6E42 100%);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(16,124,75,.25);
    }
    .confidence-badge-icon svg { width: 28px; height: 28px; }
    .confidence-badge-title { font-size: 15px; font-weight: 700; color: var(--cta-bg); margin-bottom: 3px; }
    .confidence-badge-desc { font-size: 12px; line-height: 1.5; color: #4A4A4A; }
    .trust-line { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
    .trust-icon {
      width: 22px; height: 22px; border-radius: 50%;
      background: #E8F5EE; border: 1px solid #C4E2D2;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .trust-icon svg { width: 12px; height: 12px; }
    .trust-text { font-size: 13px; color: #4A4A4A; }

    /* -- Sales page funnel footer (matches .pabio-upsell-footer / .pabio-thankyou-footer) --
       Full-viewport-width black bar with 3 links: Terms · Privacy · Support. Breaks out of any
       centered container via 100vw + translateX(-50%). Session 11: replaced the legacy white
       2-link footer so the sales page matches the rest of the funnel. */
    .pabio-funnel-footer {
      /* Width:100% (was 100vw) — 100vw includes the scrollbar gutter on Windows
         and caused a horizontal scrollbar. The funnel footer is already inside
         a viewport-wide containing block, so 100% achieves the same edge-to-edge
         look without overflow. */
      position: relative;
      width: 100%;
      background: #000;
      border-top: 1px solid #1A1A1A;
      padding: 28px 24px;
      margin-top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      box-sizing: border-box;
    }
    .pabio-funnel-footer a {
      font-family: var(--font-ui);
      font-size: 14px;
      font-weight: 500;
      color: #B3B3B3;
      text-decoration: none;
      letter-spacing: 0;
      text-transform: none;
      transition: color .15s ease;
    }
    .pabio-funnel-footer a:hover {
      color: #FFFFFF;
      text-decoration: underline;
    }
    .pabio-funnel-footer .sep {
      font-size: 14px;
      color: #3A3A3A;
      user-select: none;
    }
    @media (max-width: 768px) {
      .pabio-funnel-footer { gap: 18px; padding: 24px 20px; }
      .pabio-funnel-footer a,
      .pabio-funnel-footer .sep { font-size: 13px; }
    }
    @media (max-width: 480px) {
      .pabio-funnel-footer { gap: 14px; padding: 22px 16px; }
      .pabio-funnel-footer a,
      .pabio-funnel-footer .sep { font-size: 12px; }
    }

    /* -- Checkout responsive -- */
    @media (max-width: 900px) {
      .checkout-page { grid-template-columns: 1fr; padding: 20px 16px 60px; }
      .reinforcement-col { position: static; order: 1; }
      .form-col { order: -1; }
      .checkout-header { padding: 0 16px; }
      .step-progress { display: none; }
    }

    /* ══════════════════════════════════════════
       PROMO TIMER BANNER (modular — toggle via JS)
       ══════════════════════════════════════════ */
    .promo-banner {
      width: 100%;
      background: linear-gradient(90deg, #0C6E42 0%, #107C4B 40%, #14A05C 100%);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 10px 48px 10px 20px;
      font-family: var(--font-ui);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .01em;
      position: relative;
      z-index: 60;
      box-shadow: 0 2px 8px rgba(0,0,0,.15);
      overflow: hidden;
    }
    .promo-banner.is-hidden { display: none; }
    .promo-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .06;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 180px 180px;
    }
    .promo-banner > * { position: relative; z-index: 1; }
    .promo-badge {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      background: rgba(255,255,255,.18);
      padding: 4px 10px;
      border-radius: var(--radius-pill);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .promo-text {
      flex: 1;
      text-align: center;
      line-height: 1.4;
    }
    .promo-text strong { font-weight: 700; }
    .promo-timer {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .04em;
      background: rgba(0,0,0,.2);
      padding: 4px 12px;
      border-radius: 6px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .promo-timer-sep {
      opacity: .5;
    }
    .promo-close {
      position: absolute;
      top: 50%;
      right: 14px;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      background: rgba(255,255,255,.12);
      border: none;
      border-radius: 50%;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s;
      line-height: 1;
    }
    .promo-close:hover { background: rgba(255,255,255,.25); }

    /* ══════════════════════════════════════════
       VOLTAGE MODAL TRUST STACK
       ══════════════════════════════════════════ */
    .voltage-trust-stack {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid #E0E0E0;
    }
    .voltage-trust-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: #777;
    }
    .voltage-trust-icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #E8F5EE;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .voltage-trust-icon svg { width: 10px; height: 10px; }
    .voltage-progress-hint {
      text-align: center;
      margin-bottom: 20px;
    }
    .voltage-progress-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-bottom: 6px;
    }
    .voltage-progress-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--cta-bg);
    }
    .voltage-progress-dot.upcoming {
      background: #D1D5DB;
    }
    .voltage-progress-line {
      width: 32px;
      height: 2px;
      background: var(--cta-bg);
    }
    .voltage-progress-line.upcoming {
      background: #D1D5DB;
    }
    .voltage-progress-text {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .04em;
      color: #999;
    }

    /* ══════════════════════════════════════════
       CHECKOUT ORDER BUMP — Unleashed Upgrade
       ══════════════════════════════════════════ */
    .order-bump {
      border: 2px dashed #E8A530;
      border-radius: 14px;
      padding: 0;
      margin-top: 20px;
      overflow: hidden;
      background: #FFFDF7;
      box-shadow: 0 2px 8px rgba(232,165,48,.1);
      transition: border-color .2s, box-shadow .2s;
    }
    .order-bump.is-active {
      border-style: solid;
      border-color: var(--cta-bg);
      background: linear-gradient(135deg, #F0FAF5 0%, #E8F5EE 100%);
      box-shadow: 0 2px 12px rgba(16,124,75,.1);
    }
    .order-bump-header {
      background: linear-gradient(90deg, #E8A530 0%, #D4922A 100%);
      padding: 8px 20px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .order-bump.is-active .order-bump-header {
      background: linear-gradient(90deg, #12905A 0%, #0C6E42 100%);
    }
    .order-bump-header-icon {
      font-size: 14px;
    }
    .order-bump-header-text {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #fff;
    }
    .order-bump-body {
      padding: 20px;
    }
    .order-bump-toggle {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      cursor: pointer;
    }
    .order-bump-checkbox {
      width: 22px;
      height: 22px;
      border: 2px solid #D1D5DB;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
      transition: background .2s, border-color .2s;
      background: #fff;
    }
    .order-bump.is-active .order-bump-checkbox {
      background: var(--cta-bg);
      border-color: var(--cta-bg);
    }
    .order-bump-checkbox-check {
      display: none;
      width: 12px;
      height: 12px;
    }
    .order-bump.is-active .order-bump-checkbox-check {
      display: block;
    }
    .order-bump-title {
      font-size: 15px;
      font-weight: 700;
      color: #1A1A1A;
      line-height: 1.3;
      margin-bottom: 2px;
    }
    .order-bump-title .bump-price {
      color: var(--cta-bg);
    }
    .order-bump-desc {
      font-size: 13px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 12px;
    }
    .order-bump-compare {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 12px;
    }
    .bump-compare-card {
      padding: 12px 14px;
      border-radius: 8px;
      border: 1px solid #E5E7EB;
      background: #fff;
    }
    .bump-compare-card.highlight {
      border-color: var(--cta-bg);
      background: #F0FAF5;
    }
    .bump-compare-label {
      font-family: var(--font-mono);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #999;
      margin-bottom: 6px;
    }
    .bump-compare-card.highlight .bump-compare-label {
      color: var(--cta-bg);
    }
    .bump-compare-stat {
      font-size: 13px;
      color: #4A4A4A;
      line-height: 1.45;
    }
    .bump-compare-stat strong { color: #1A1A1A; }
    .bump-compare-card.highlight .bump-compare-stat strong { color: var(--cta-bg); }

    /* ══════════════════════════════════════════
       SAVINGS CALCULATOR WIDGET
       ══════════════════════════════════════════ */
    .calc-widget {
      background: #FFFFFF;
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 16px;
      padding: 32px 32px 28px;
      margin: 28px 0;
      box-shadow: var(--shadow-lg);
      position: relative;
      overflow: hidden;
    }
    .calc-widget::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--cta-bg) 0%, #2ECC71 100%);
    }
    .calc-header {
      text-align: center;
      margin-bottom: 24px;
    }
    .calc-header-eyebrow {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--cta-bg);
      margin-bottom: 6px;
    }
    .calc-header-title {
      font-size: 22px;
      font-weight: 700;
      color: #1A1A1A;
      letter-spacing: -.02em;
    }
    .calc-unit-toggle {
      display: flex;
      justify-content: center;
      margin-top: 14px;
    }
    .calc-unit-switch {
      display: inline-flex;
      background: #F0F1F3;
      border-radius: 8px;
      padding: 3px;
      gap: 2px;
      border: 1px solid #E5E7EB;
    }
    .calc-unit-btn {
      font-family: var(--font-ui);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .01em;
      padding: 6px 18px;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: #999;
      cursor: pointer;
      transition: background .2s, color .2s, box-shadow .2s;
    }
    .calc-unit-btn.active {
      background: #fff;
      color: #1A1A1A;
      box-shadow: 0 1px 4px rgba(0,0,0,.08);
    }
    .calc-unit-btn:hover:not(.active) {
      color: #666;
    }
    .calc-inputs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 24px;
    }
    .calc-input-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .calc-label {
      font-size: 12px;
      font-weight: 600;
      color: #4A4A4A;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .calc-label-hint {
      font-weight: 400;
      color: #999;
      font-size: 11px;
    }
    .calc-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
    .calc-input-prefix {
      position: absolute;
      left: 14px;
      font-size: 15px;
      font-weight: 600;
      color: #999;
      pointer-events: none;
    }
    .calc-input {
      width: 100%;
      height: 52px;
      border: 2px solid #E5E7EB;
      border-radius: 10px;
      padding: 0 14px;
      font-family: var(--font-ui);
      font-size: 18px;
      font-weight: 700;
      color: #1A1A1A;
      background: #FAFAFA;
      outline: none;
      transition: border-color .2s, box-shadow .2s, background .2s;
      -moz-appearance: textfield;
    }
    .calc-input::-webkit-outer-spin-button,
    .calc-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .calc-input:focus {
      border-color: var(--cta-bg);
      box-shadow: 0 0 0 3px rgba(16,124,75,.1);
      background: #fff;
    }
    .calc-input.has-prefix {
      padding-left: 30px;
    }
    .calc-input-suffix {
      position: absolute;
      right: 14px;
      font-size: 12px;
      font-weight: 500;
      color: #999;
      pointer-events: none;
    }
    .calc-slider-wrap {
      margin-top: 4px;
    }
    .calc-slider {
      width: 100%;
      height: 6px;
      -webkit-appearance: none;
      appearance: none;
      border-radius: 3px;
      background: #E5E7EB;
      outline: none;
      cursor: pointer;
    }
    .calc-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--cta-bg);
      border: 3px solid #fff;
      box-shadow: 0 2px 8px rgba(16,124,75,.3);
      cursor: pointer;
    }
    .calc-slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--cta-bg);
      border: 3px solid #fff;
      box-shadow: 0 2px 8px rgba(16,124,75,.3);
      cursor: pointer;
    }

    /* Results panel */
    .calc-results {
      background: linear-gradient(135deg, #0D1A12 0%, #111 100%);
      border-radius: 12px;
      padding: 24px 28px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
      position: relative;
      overflow: hidden;
    }
    .calc-results::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 180px 180px;
    }
    .calc-result-item {
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .calc-result-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
      margin-bottom: 6px;
    }
    .calc-result-value {
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -.02em;
      line-height: 1.1;
      transition: color .3s;
    }
    .calc-result-value.green {
      color: #2ECC71;
    }
    .calc-result-sub {
      font-size: 11px;
      color: rgba(255,255,255,.4);
      margin-top: 4px;
    }
    .calc-result-divider {
      position: absolute;
      top: 20%;
      bottom: 20%;
      right: 0;
      width: 1px;
      background: rgba(255,255,255,.08);
    }
    .calc-result-item:last-child .calc-result-divider { display: none; }

    .calc-payback-bar-wrap {
      margin-top: 16px;
      position: relative;
      z-index: 1;
    }
    .calc-payback-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }
    .calc-payback-label {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.4);
    }
    .calc-payback-value {
      font-size: 13px;
      font-weight: 700;
      color: #2ECC71;
    }
    .calc-payback-track {
      width: 100%;
      height: 8px;
      background: rgba(255,255,255,.08);
      border-radius: 4px;
      overflow: hidden;
    }
    .calc-payback-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--cta-bg) 0%, #2ECC71 100%);
      border-radius: 4px;
      transition: width .5s cubic-bezier(.22,1,.36,1);
    }
    .calc-footnote {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .03em;
      color: #BBB;
      text-align: center;
      margin-top: 14px;
    }

    /* ══════════════════════════════════════════
       PAYMENT PLAN TOGGLE
       ══════════════════════════════════════════ */
    .plan-toggle-wrap {
      margin-bottom: 24px;
    }
    .plan-toggle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .plan-option {
      position: relative;
      border: 2px solid #E5E7EB;
      border-radius: 12px;
      padding: 16px 18px;
      cursor: pointer;
      transition: border-color .2s, background .2s, box-shadow .2s;
      background: #FAFAFA;
    }
    .plan-option:hover {
      border-color: #C4D4CB;
      background: #F5FAF7;
    }
    .plan-option.active {
      border-color: var(--cta-bg);
      background: linear-gradient(135deg, #F0FAF5 0%, #E6F5EC 100%);
      box-shadow: 0 0 0 3px rgba(16,124,75,.1), 0 2px 8px rgba(16,124,75,.08);
    }
    .plan-option-radio {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 20px;
      height: 20px;
      border: 2px solid #D1D5DB;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color .2s;
    }
    .plan-option.active .plan-option-radio {
      border-color: var(--cta-bg);
    }
    .plan-option.active .plan-option-radio::after {
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--cta-bg);
    }
    .plan-option-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #999;
      margin-bottom: 4px;
    }
    .plan-option.active .plan-option-label {
      color: var(--cta-bg);
    }
    .plan-option-price {
      font-size: 22px;
      font-weight: 700;
      color: #1A1A1A;
      line-height: 1.2;
      letter-spacing: -.02em;
    }
    .plan-option-price .plan-per {
      font-size: 13px;
      font-weight: 500;
      color: #999;
      letter-spacing: 0;
    }
    .plan-option-detail {
      font-size: 12px;
      color: #777;
      margin-top: 4px;
      line-height: 1.4;
    }
    .plan-option-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: var(--radius-pill);
      margin-top: 8px;
    }
    .plan-badge-save {
      background: rgba(16,124,75,.08);
      color: var(--cta-bg);
      border: 1px solid rgba(16,124,75,.2);
    }
    .plan-badge-popular {
      background: rgba(16,124,75,.08);
      color: var(--cta-bg);
      border: 1px solid rgba(16,124,75,.2);
    }
    .plan-finance-note {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .03em;
      color: #999;
      text-align: center;
      margin-top: 10px;
      line-height: 1.5;
    }

    /* ══════════════════════════════════════════
       VALUE STACK CARDS — enhanced for Sec 10
       ══════════════════════════════════════════ */
    .value-stack-card {
      background: linear-gradient(145deg, #F7F8F9 0%, #EBEDF0 100%);
      border-radius: 12px;
      padding: 18px 20px;
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(0,0,0,.04);
      transition: box-shadow .25s, transform .25s;
    }
    .value-stack-card:hover {
      box-shadow: var(--shadow-card-hover);
      transform: translateY(-2px);
    }

    /* ══════════════════════════════════════════
       MOBILE RESPONSIVE FIXES (Session 11)
       Covers MOBILE-AUDIT-2026-04-16.md issues:
       Sales #1 (H1), #2 (stat-callout), #3+#7 (testimonials),
       #4 (comp-table stacked cards), #5 (zigzag image-on-top).
       Breakpoints: 768 = layout shifts, 480 = typography tightening.
       ══════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* Sales #1 — hero H1 smaller on mobile so it doesn't wrap to 1 word/line */
      .section-h1 { font-size: 28px; line-height: 1.15; }

      /* Sales #2 — stat-callout row (.reveal wrapping multiple .data-callout) stacks to single column */
      .reveal:has(> .data-callout) { flex-direction: column; gap: 12px; }
      .data-callout { padding: 16px 20px; }

      /* Sales #3 + #7 — testimonial cards stack single-column, full-width, readable */
      .testimonial-row { flex-direction: column; gap: 16px; }
      .testimonial-card { flex: 1 1 100%; width: 100%; }

      /* Sales #5 — zigzag rows stack image-on-top, text directly below.
         Both .zigzag-row and .zigzag-row.reverse collapse to column with image (.zigzag-visual) first. */
      .zigzag-row,
      .zigzag-row.reverse { flex-direction: column; gap: 20px; }
      .zigzag-visual { flex: 0 0 auto; width: 100%; order: 1; }
      .zigzag-text { flex: 1 1 auto; width: 100%; order: 2; }

      /* Session 11 follow-up — comparison photo row (before/after oil sample) and any other
         non-zigzag side-by-side image+text flex rows: collapse to single column with image above. */
      .vsl-section-inner > .reveal:not(.zigzag-row):not(.founder-row):not(.testimonial-row):has(> div img):has(> div p) { flex-direction: column !important; gap: 16px; }
      .vsl-section-inner > .reveal:not(.zigzag-row):not(.founder-row):not(.testimonial-row):has(> div img):has(> div p) > div { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; }

      /* Session 11 follow-up — Founder row: photo above text-paragraphs on mobile */
      .founder-row { flex-direction: column !important; gap: 16px; align-items: stretch; }
      .founder-photo { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; order: 1; }
      .founder-text { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; order: 2; }

      /* Session 11 follow-up — Unleashed section: once JS reparents the image into the text column
         between the H2 and the first <p>, keep the reveal as a single column on mobile.
         Scoped by :has(.visual-placeholder) so this ONLY targets the Unleashed reveal and not
         sibling rows in the same dark-grey section (e.g. .icon-row). */
      .vsl-section--dark-grey > .vsl-section-inner > .reveal:has(.visual-placeholder) { flex-direction: column !important; gap: 18px; }
      .vsl-section--dark-grey > .vsl-section-inner > .reveal:has(.visual-placeholder) > div { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; }
      .vsl-section--dark-grey .visual-placeholder,
      .vsl-section--dark-grey .unleashed-inline-visual { width: 100% !important; max-width: 100% !important; margin: 0 auto; }

      /* Sales #4 — comparison table: convert to stacked cards, one card per comparison row.
         Header row is hidden; each td gets a column-label prefix via ::before. */
      .comp-table { display: block; border-radius: 0; box-shadow: none; overflow: visible; }
      .comp-table thead { display: none; }
      .comp-table tbody { display: block; }
      .comp-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #E0E0E0;
        border-radius: 10px;
        margin-bottom: 14px;
        padding: 14px 16px;
        box-shadow: var(--shadow-md);
      }
      .comp-table tbody tr:hover td { background: transparent; }
      .comp-table tbody tr:last-child { margin-bottom: 0; }
      .comp-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 8px 0;
        border-bottom: 1px solid #F0F0F0;
        text-align: right;
      }
      .comp-table td:first-child {
        font-weight: 700;
        font-size: 15px;
        color: var(--text-primary);
        display: block;
        text-align: left;
        padding: 0 0 10px 0;
        margin-bottom: 6px;
        border-bottom: 2px solid var(--cta-bg);
      }
      .comp-table td:last-child { border-bottom: none; }
      /* Prefix each non-feature cell with its column header */
      .comp-table td:nth-child(2)::before { content: "Standard Filters"; color: var(--text-grey); font-size: 12px; font-weight: 500; text-align: left; flex: 1; }
      .comp-table td:nth-child(3)::before { content: "Distillation"; color: var(--text-grey); font-size: 12px; font-weight: 500; text-align: left; flex: 1; }
      .comp-table td:nth-child(4)::before { content: "Industrial Machines"; color: var(--text-grey); font-size: 12px; font-weight: 500; text-align: left; flex: 1; }
      .comp-table td:nth-child(5)::before { content: "Ultimate Force"; color: var(--cta-bg); font-size: 12px; font-weight: 700; text-align: left; flex: 1; }

      /* Bug 7 — Calculator: 2-col inputs / 3-col results overflowed at <768px.
         Stack everything to single column. */
      .calc-inputs { grid-template-columns: 1fr; gap: 12px; }
      .calc-results { grid-template-columns: 1fr; gap: 12px; }

      /* Bug 8B — Risk-Free Guarantee cards stack on mobile (was flex-row + flex:1
         which only shrank cards instead of stacking). */
      .guarantee-row { flex-direction: column; gap: 16px; }
      .guarantee-card { flex: 1 1 100%; width: 100%; }

      /* "Everything You Unlock" value-stack cards: parent grid uses an INLINE
         style="grid-template-columns:1fr 1fr" so we need !important + :has()
         to win over inline specificity. Stack to single column on mobile. */
      div:has(> .value-stack-card) { grid-template-columns: 1fr !important; }
    }

    @media (max-width: 480px) {
      /* Tighter typography at phone width */
      .section-h1 { font-size: 24px; }
      .section-h2 { font-size: 22px; }
      /* Tighten icon-row spacing so all 4 items fit on iPhone 14 (390-410px) */
      .icon-row { gap: 12px; margin: 20px 0; }
      .icon-item { width: auto; flex: 1 1 0; min-width: 0; }
      .icon-label { font-size: 8px; }
    }