/* ───────── TOKENS ───────── */
  :root {
    --bg:        #050505;
    --bg-2:      #0a0a0a;
    --surface:   #0e0e0e;
    --border:    #1d1d1d;
    --border-hi: #2a2a2a;
    --text:      #f3f1ea;
    --muted:     #93938c;
    --dim:       #4a4a44;

    --volt:      #C8FF3D;   /* Energy */
    --pump:      #FF6B1A;   /* Pump   */
    --recover:   #FF8866;   /* Recover */
    --volt-soft: rgba(200,255,61,.12);
    --danger:    #ff5252;       /* prohibition coral-red — more saturated than --recover */

    --display: 'Big Shoulders Display', Impact, sans-serif;
    --mono:    'JetBrains Mono', ui-monospace, monospace;
    --body:    'Manrope', system-ui, sans-serif;

    --maxw: 1280px;
  }

  *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
  }

  /* Grain + scanlines overlay */
  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    opacity: .35; pointer-events: none; z-index: 1; mix-blend-mode: overlay;
  }
  body::after {
    content: '';
    position: fixed; inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.013) 2px 3px);
    pointer-events: none; z-index: 1;
  }

  ::selection { background: var(--volt); color: #000; }

  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }

  /* ───────── ANNOUNCEMENT BAR ───────── */
  .announce {
    background: var(--volt);
    color: #000;
    overflow: hidden;
    border-bottom: 1px solid #000;
    position: relative; z-index: 5;
  }
  .marquee { display: flex; gap: 0; white-space: nowrap; animation: scroll 38s linear infinite; }
  .marquee span {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .18em;
    padding: 9px 32px;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .marquee span::after {
    content: '⚡';
    margin-left: 32px;
    opacity: .5;
  }
  @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* ───────── REFERRAL ATTRIBUTION BANNER ─────────
     Slim dark bar above the .announce marquee on /pass/{handle} entries.
     Renders "[FirstName] invited you to claim your VOLT Founder Pass."
     once the by-handle API resolves. The [hidden] attribute keeps it out
     of the DOM-flow for non-/pass visitors (no dead space). On /pass
     entries, JS removes [hidden] and fades opacity 0 → 1 via .is-visible. */
  .referral-banner {
    background: #0a0a0a;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 24px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    position: relative; z-index: 6;
    opacity: 0;
    transition: opacity 300ms ease;
  }
  .referral-banner[hidden] { display: none; }
  .referral-banner.is-visible { opacity: 1; }
  .referral-banner-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 10px rgba(200, 255, 61, .6);
    flex-shrink: 0;
  }
  .referral-banner-name { color: var(--volt); font-weight: 700; }
  @media (max-width: 480px) {
    .referral-banner { font-size: 10px; padding: 8px 16px; letter-spacing: .12em; gap: 8px; }
  }

  /* ───────── NAV ───────── */
  nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(5,5,5,.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--border);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0;
  }
  .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text);
  }
  .logo-img {
    height: 36px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 8px rgba(200,255,61,.18));
    transition: filter .25s ease, transform .25s ease;
  }
  .logo:hover .logo-img {
    filter: drop-shadow(0 0 14px rgba(200,255,61,.35));
    transform: translateY(-1px);
  }
  @media (max-width: 760px) {
    .logo-img { height: 30px; }
  }
  @keyframes pulse {
    0%,100% { filter: drop-shadow(0 0 4px rgba(200,255,61,.3)); }
    50%     { filter: drop-shadow(0 0 14px rgba(200,255,61,.7)); }
  }
  .nav-links {
    display: flex; gap: 36px;
    font-family: var(--mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .nav-links a { color: var(--muted); transition: color .2s; }
  .nav-links a:hover { color: var(--volt); }
  .nav-cta {
    font-family: var(--mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 11px 20px;
    border: 1px solid var(--volt);
    border-radius: 4px;
    background: var(--volt);
    color: #000;
    cursor: pointer;
    transition: all .2s;
  }
  .nav-cta:hover { transform: translateY(-1px); background: #d4ff4d; border-color: #d4ff4d; box-shadow: 0 6px 18px -6px rgba(200,255,61,.55); }
  @media (max-width: 760px) { .nav-links { display: none; } }

  /* ───────── HERO ───────── */
  .hero {
    position: relative;
    padding: 84px 0 120px;
    overflow: hidden;
  }
  /* Ambient particle canvas — sits behind hero content. The canvas itself is
     injected via JS (so it's absent under prefers-reduced-motion or when JS
     is disabled). This rule just defines its layer position. */
  .hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;  /* keeps grid content above the particle canvas */
    z-index: 1;
  }
  @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--volt);
    padding: 7px 14px;
    border: 1px solid var(--volt);
    background: var(--volt-soft);
    border-radius: 999px;
    margin-bottom: 28px;
  }
  .eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 8px var(--volt);
    animation: pulse-dot 1.4s ease-in-out infinite;
  }
  @keyframes pulse-dot {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .4; transform: scale(.7); }
  }

  h1.hero-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(48px, 6.4vw, 104px);
    line-height: .9;
    letter-spacing: -.015em;
    text-transform: uppercase;
    margin-bottom: 24px;
    position: relative;
    /* The h1 is now a column of inline-block spans so we can stack + transform
       the angled stamp independently of the main lines */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  h1.hero-title .ht-line {
    display: block;
  }
  h1.hero-title span.strike {
    color: var(--dim);
    text-decoration: line-through;
    text-decoration-thickness: 6px;
    text-decoration-color: var(--volt);
  }
  /* Generic .accent (used in subhead bolds, etc.) keeps its volt color */
  h1.hero-title span.accent {
    color: var(--volt);
    font-style: normal;     /* override the old italic — the angle now does the dynamism */
  }
  /* ── The "POCKET-SIZED." stamp ──
     Smaller, angled, slightly overlapping the line above. Visually plays on
     the word "pocket-sized" by being literally smaller + offset. The angle
     gives it a stamped-on-after feel rather than typeset. */
  h1.hero-title .ht-stamp {
    /* ~52% of the parent h1 size — noticeably smaller, still bold/readable */
    font-size: 0.52em;
    /* Very subtle tracking-in for the stamp — makes it feel a bit denser */
    letter-spacing: -.01em;
    line-height: 1;
    /* The slight rotation + horizontal nudge — origin top-left so it
       pivots from where the previous line ended */
    transform: rotate(-4deg);
    transform-origin: 0 50%;
    /* Pull it up to overlap the bottom of "stack," and indent slightly
       so it visually attaches to the right of that word */
    margin-top: -0.18em;
    margin-left: 1.6em;
    /* Keep it above any background glow but layered subtly */
    position: relative;
    z-index: 2;
    /* Premium touch: subtle outer glow that matches its volt color */
    text-shadow: 0 0 24px rgba(200,255,61,.18);
    /* Make sure the underline-style decoration the parent might inherit
       doesn't kick in here */
    text-decoration: none;
  }
  /* Mobile: dial back the angle + offset since the type is smaller and the
     overlap can get tight */
  @media (max-width: 760px) {
    h1.hero-title .ht-stamp {
      font-size: 0.5em;
      transform: rotate(-3deg);
      margin-left: 1.1em;
      margin-top: -0.12em;
    }
  }

  .hero-sub {
    font-size: 18px;
    color: var(--muted);
    line-height: 1.55;
    max-width: 520px;
    margin-bottom: 36px;
  }
  .hero-sub strong { color: var(--text); font-weight: 600; }

  /* ═════════ VOLT PASS UNLOCKS ═════════
     Compact founder-benefits preview that sits between the hero CTA and
     the founder progress bar. Designed as a mini access-pass card: thin
     lime accent stripe at the top-left like a ticket edge, mono eyebrow
     with a small lime indicator dot, lime "+" markers on tight stacked
     rows. Reads as a graphical unit, not a paragraph. */
  .volt-pass-unlocks {
    margin-top: 20px;
    margin-bottom: 8px;
    padding: 16px 18px 14px;
    border: 1px solid var(--border-hi);
    background: var(--surface);
    position: relative;
    max-width: 520px;
  }
  /* Ticket-edge lime stripe — sits flush to the top-left corner of the card */
  .volt-pass-unlocks::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 48px;
    height: 2px;
    background: var(--volt);
  }
  .vpu-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 12px;
  }
  .vpu-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--volt);
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(200,255,61,.55);
  }
  .vpu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .vpu-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: #c8c8c0;
  }
  .vpu-mark {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--volt);
    flex-shrink: 0;
    width: 12px;
    text-align: center;
    font-size: 14px;
    line-height: 1.45;
  }
  /* Scarcity footer — closing reminder of the 1,000-founder cap, sits inside
     the card below the benefit list with a subtle top divider. Lime, mono,
     same letter-spacing as the eyebrow, slightly smaller. */
  .vpu-footer {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--volt);
    text-align: center;
    opacity: .85;
  }
  /* Mobile: slightly tighter padding + body size so the card stays compact */
  @media (max-width: 768px) {
    .volt-pass-unlocks {
      padding: 14px 14px 12px;
      max-width: 100%;
    }
    .vpu-list li { font-size: 13.5px; }
  }

  /* Hero category eyebrow — sits between the WAITLIST pill and the H1.
     Mono caps, muted, framed top + bottom by a thin volt rule on the left
     to anchor it as a category line, not a status pill. */
  .hero-category-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.2;
  }
  .hero-category-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--volt);
    box-shadow: 0 0 6px rgba(200,255,61,.6);
  }
  @media (max-width: 760px) {
    .hero-category-eyebrow { font-size: 10.5px; letter-spacing: .16em; gap: 10px; }
    .hero-category-eyebrow::before { width: 20px; }
  }

  /* ════ HERO BIG CTA BUTTON ════ */
  .hero-cta-big {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: 560px;
    padding: 22px 36px;
    background: var(--volt);
    color: #0a0a08;
    border: 1px solid var(--volt);
    font-family: var(--display);
    font-weight: 900;
    font-size: 22px;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 0 0 0 var(--volt-soft);
  }
  .hero-cta-big .cta-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    line-height: 1;
  }
  .hero-cta-big .cta-sub {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(10,10,8,.7);
    line-height: 1.3;
    margin-top: 2px;
  }
  .hero-cta-big:hover {
    background: #fff;
    box-shadow: 0 0 0 6px var(--volt-soft);
  }
  .hero-cta-big .arr { transition: transform .2s ease; }
  .hero-cta-big:hover .arr { transform: translateX(6px); }
  @media (max-width: 760px) {
    .hero-cta-big { padding: 18px 22px; font-size: 17px; }
    .hero-cta-big .cta-sub { font-size: 10px; }
  }

  /* ════ HERO CTA — AMBIENT MOTION ════
     Two concurrent animations layered on the primary CTA:
       wobble  Brief periodic tic every 4.5s — subtle attention pull.
       glow    Continuous box-shadow pulse — ambient energy halo.
     Both stop fully on hover so the button's hover ring (a 6px volt-soft
     spread) reads cleanly without fighting the animated values. They
     restart on un-hover. Scoped to .hero so other CTAs sharing the
     .hero-cta-big class remain still. Reduced-motion fully respected. */
  @keyframes hero-cta-wobble {
    0%, 88%, 100% { transform: rotate(0); }
    90%  { transform: rotate(-1.4deg); }
    92%  { transform: rotate(1.2deg); }
    94%  { transform: rotate(-0.9deg); }
    96%  { transform: rotate(0.5deg); }
    98%  { transform: rotate(-0.2deg); }
  }
  /* Outer glow pulse — blur 0→20px, alpha 0.3→0.7, 3.5s ease-in-out, ∞ */
  @keyframes hero-cta-glow {
    0%, 100% { box-shadow: 0 0 0px 0 rgba(200, 255, 61, 0.3); }
    50%      { box-shadow: 0 0 20px 0 rgba(200, 255, 61, 0.7); }
  }
  .hero .hero-cta-big {
    animation: hero-cta-wobble 4.5s ease-in-out 1.5s infinite,
               hero-cta-glow   3.5s ease-in-out 0s   infinite;
    transform-origin: 50% 70%;
  }
  .hero .hero-cta-big:hover {
    /* Stop fully (vs paused) so the hover ring's box-shadow can take
       effect — a paused animation still applies its current frame's
       value, which would override the static hover ring. */
    animation: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero .hero-cta-big { animation: none; }
  }

  /* ════ HERO CHIPS (above the CTA) ════
     Four small bordered chips with iconography surfacing the four product
     promises: nicotine-free, sugar-free, every mg disclosed, clean
     ingredients. Sized for a 4-up row that wraps to 2x2 on narrow screens. */
  .hero-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 560px;
    margin: 0 0 24px;
  }
  .hero-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(255,255,255,.02);
    transition: border-color .25s ease, background .25s ease;
  }
  .hero-chip:hover {
    border-color: rgba(200,255,61,.35);
    background: rgba(200,255,61,.04);
  }
  .hero-chip-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: var(--volt);
  }
  .hero-chip-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.15;
    color: var(--text);
    text-transform: uppercase;
  }
  @media (max-width: 540px) {
    .hero-chips { grid-template-columns: repeat(3, 1fr); max-width: 420px; }
    .hero-chip { padding: 10px; }
    .hero-chip-label { font-size: 9px; }
  }

  /* ════ HERO TRUST BADGES (below the CTA) ════
     A single line of three short trust statements separated by · dividers,
     in a subdued volt-green so it reads as reassurance without competing
     with the CTA. */
  .hero-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 14px 0 6px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--volt);
    text-transform: uppercase;
  }
  .hero-trust .ht-icon {
    width: 14px; height: 14px;
    color: var(--volt);
    margin-right: 6px;
    vertical-align: -2px;
  }
  .hero-trust .ht-dot {
    color: rgba(200,255,61,.45);
    font-weight: 700;
  }
  .hero-trust .ht-item { display: inline-flex; align-items: center; }

  /* ════ "ONLY N LEFT" PILL (sits inline with the fp-note) ════ */
  .fp-only-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 4px 10px;
    border: 1px solid var(--volt);
    border-radius: 999px;
    background: rgba(200,255,61,.08);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--volt);
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* ════ HERO PRODUCT IMAGE (single explosion artwork) ════ */
  .hero-product-stage {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    isolation: isolate;
  }
  /* Three independently-floating product tins arranged in a triangle.
     Each sits on its own colored glow so it reads as ambient light from
     the product itself. Sizes/positions are % so the whole stage scales. */
  .hero-tin {
    position: absolute;
    width: 58%;
    aspect-ratio: 1;
    pointer-events: none;
  }
  .hero-tin .hero-tin-glow {
    position: absolute; inset: 6%;
    border-radius: 50%;
    filter: blur(48px);
    mix-blend-mode: screen;
    opacity: .9;
    z-index: 0;
  }
  .hero-tin img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 24px 40px rgba(0,0,0,.55));
    animation: hero-float 9s ease-in-out infinite;
  }
  /* ════ TIGHT TRIANGULAR PRODUCT CLUSTER ════════════════════════════
     Three cans overlap into a unified stack instead of floating apart.
     Energy + Pump sit behind at the top, slightly offset toward center.
     Recover sits in front at the bottom-center with pouches included,
     overlapping the bottom edges of both rear cans. */

  .hero-tin { width: 50%; }

  /* Energy — upper-left of the cluster, behind */
  .hero-tin.t-energy {
    top: 0%;
    left: 6%;
    z-index: 2;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.45));
  }
  .hero-tin.t-energy .hero-tin-glow {
    background: radial-gradient(circle at 50% 50%, rgba(200,255,61,.45) 0%, rgba(200,255,61,.14) 45%, transparent 72%);
  }
  .hero-tin.t-energy img { animation-delay: -1s; }

  /* Pump — upper-right of the cluster, behind */
  .hero-tin.t-pump {
    top: 4%;
    right: 4%;
    z-index: 1;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.45));
  }
  .hero-tin.t-pump .hero-tin-glow {
    background: radial-gradient(circle at 50% 50%, rgba(255,107,26,.45) 0%, rgba(255,107,26,.16) 45%, transparent 72%);
  }
  .hero-tin.t-pump img { animation-delay: -3.5s; }

  /* Recover — front, lower-center, overlaps both rear cans.
     Wider than Energy/Pump because the asset includes side pouches
     flanking the center can. Sized so the CAN inside the asset
     visually exceeds the rear cans (forced perspective: front piece
     should be the biggest element in the cluster). */
  .hero-tin.t-recover {
    width: 92%;
    bottom: -4%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    filter: drop-shadow(0 26px 40px rgba(0,0,0,.55));
  }
  .hero-tin.t-recover .hero-tin-glow {
    background: radial-gradient(circle at 50% 55%, rgba(255,140,120,.42) 0%, rgba(255,140,120,.14) 45%, transparent 72%);
  }
  .hero-tin.t-recover img { animation-delay: -6s; }

  @media (max-width: 760px) {
    .hero-product-stage { max-width: 460px; }
    .hero-tin { width: 52%; }
    .hero-tin.t-recover { width: 100%; }
  }
  @keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }

  /* ════ FIRST 1,000 FOUNDERS GET — perks row below product image ════
     Five-column band: label cell on the left, four perk cells on the right,
     each perk cell stacked icon over a 2-line label. */
  .founders-perks-row {
    margin-top: 28px;
    padding: 18px 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background:
      radial-gradient(ellipse 80% 100% at 0% 50%, rgba(200,255,61,.05), transparent 60%),
      rgba(255,255,255,.015);
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) repeat(4, 1fr);
    gap: 18px;
    align-items: center;
  }
  .fpr-label {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .fpr-label-icon {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    color: var(--volt);
  }
  .fpr-label-text {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--text);
    text-transform: uppercase;
    line-height: 1.2;
  }
  .fpr-perk {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 14px;
    border-left: 1px solid var(--border);
  }
  .fpr-perk-icon {
    flex: 0 0 26px;
    width: 26px; height: 26px;
    color: var(--volt);
  }
  .fpr-perk-text {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--text);
    text-transform: uppercase;
    line-height: 1.25;
  }
  @media (max-width: 920px) {
    .founders-perks-row {
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .fpr-label { grid-column: 1 / -1; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
    .fpr-perk:nth-child(2), .fpr-perk:nth-child(4) { border-left: 1px solid var(--border); }
    .fpr-perk:nth-child(3) { border-left: none; }
  }
  @media (max-width: 480px) {
    .founders-perks-row { padding: 14px 16px; }
    .fpr-perk-text { font-size: 9px; letter-spacing: .1em; }
  }

  /* ════ WAITLIST MODAL ════ */
  .wl-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: wlFade .25s ease;
  }
  .wl-modal[data-open="true"] { display: flex; }
  @keyframes wlFade { from { opacity: 0; } to { opacity: 1; } }
  .wl-modal-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    /* Dark metal panel: subtle vertical gradient — top edge slightly
       lifted, body deepening toward the bottom. Final colors stay
       darker than the page (#050505) so the form reads as focused
       depth, not a lighter overlay. */
    background: linear-gradient(180deg, #070707 0%, #020202 100%);
    /* Lime-tinted charcoal border. More visible than the standard
       --border grey while still reading as edge, not outline. */
    border: 1px solid rgba(200, 255, 61, .18);
    padding: 36px 32px 30px;
    /* Shadow stack:
       1. 30/80 drop for elevation off the backdrop.
       2. Outer 60px lime ambient halo — "charged" perimeter.
       3. Inset top glow — concentrated lime breath right behind
          the progress bar so the form feels just-activated. */
    box-shadow:
      0 30px 80px rgba(0,0,0,.6),
      0 0 60px rgba(200,255,61,.14),
      inset 0 32px 60px -28px rgba(200, 255, 61, .20);
    animation: wlPop .3s cubic-bezier(.16,1,.3,1);
  }
  @keyframes wlPop { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
  .wl-modal-close {
    position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px;
    border: 1px solid var(--border); background: transparent;
    color: var(--muted); font-size: 18px; cursor: pointer;
    transition: color .2s, border-color .2s;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .wl-modal-close:hover { color: var(--volt); border-color: var(--volt); }
  .wl-modal-eyebrow {
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    letter-spacing: .25em; text-transform: uppercase;
    color: var(--volt); margin: 0 0 10px;
  }
  .wl-modal-title {
    font-family: var(--display); font-weight: 900;
    font-size: 28px; line-height: 1.05; letter-spacing: -.01em;
    text-transform: uppercase; margin: 0 0 8px; color: var(--text);
  }
  .wl-modal-sub {
    font-size: 15px; line-height: 1.55; color: var(--muted);
    margin: 0 0 24px;
  }
  .wl-form { display: flex; flex-direction: column; gap: 12px; }
  .wl-field { display: flex; flex-direction: column; gap: 6px; }
  .wl-field label {
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  }
  .wl-field input {
    width: 100%;
    padding: 14px 16px;
    background: #050505;
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--mono); font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
  }
  .wl-field input:focus {
    outline: none;
    border-color: var(--volt);
    box-shadow: 0 0 0 3px var(--volt-soft);
  }
  .wl-form button[type="submit"] {
    margin-top: 8px;
    padding: 16px 20px;
    background: var(--volt); color: #0a0a08; border: 1px solid var(--volt);
    font-family: var(--mono); font-weight: 700; font-size: 13px;
    letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer; transition: background .2s;
  }
  .wl-form button[type="submit"]:hover { background: #fff; }
  .wl-modal-fineprint {
    margin: 14px 0 0; font-family: var(--mono);
    font-size: 9px; letter-spacing: .08em;
    color: var(--dim); line-height: 1.5;
  }

  /* Email form */
  .email-form {
    display: flex;
    gap: 0;
    max-width: 540px;
    border: 1px solid var(--border-hi);
    background: var(--surface);
    transition: border-color .2s;
  }
  .email-form:focus-within { border-color: var(--volt); box-shadow: 0 0 0 4px var(--volt-soft); }
  .email-form input {
    flex: 1;
    background: transparent;
    border: none; outline: none;
    color: var(--text);
    font-family: var(--mono);
    font-size: 14px;
    padding: 18px 20px;
    letter-spacing: .02em;
  }
  .email-form input::placeholder { color: var(--dim); }
  .email-form button {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: var(--volt);
    color: #000;
    padding: 0 28px;
    transition: all .2s;
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap;
  }
  .email-form button:hover { background: #fff; }
  .email-form button .arr { transition: transform .2s; }
  .email-form button:hover .arr { transform: translateX(4px); }

  /* Phone prefix (US country code) */
  .email-form .phone-prefix {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--volt);
    padding: 0 14px 0 20px;
    border-right: 1px solid var(--border);
    display: flex; align-items: center;
    letter-spacing: .06em;
    user-select: none;
    background: rgba(200,255,61,.04);
  }

  /* SMS disclaimer / TCPA microcopy */
  .form-disclaimer {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--dim);
    margin-top: 14px;
    max-width: 540px;
    line-height: 1.6;
    text-transform: uppercase;
  }
  .form-disclaimer .lock {
    color: var(--volt);
    margin-right: 6px;
  }

  /* ─── LIVE ACTIVITY PILL (above the form) ─── */
  .live-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    margin-bottom: 14px;
    background: rgba(200,255,61,.05);
    border: 1px solid rgba(200,255,61,.28);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text);
    max-width: 540px;
    box-shadow: 0 0 0 4px rgba(200,255,61,.04);
  }
  .live-pill .live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 10px var(--volt), 0 0 20px rgba(200,255,61,.4);
    animation: live-blink 1.4s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes live-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
  }
  .live-pill .num {
    color: var(--volt);
    font-weight: 700;
    display: inline-block;
    min-width: 3.2em;
    text-align: right;
  }
  .live-pill .sep {
    color: var(--dim);
    margin: 0 4px;
  }
  @media (max-width: 480px) {
    .live-pill { font-size: 10px; padding: 9px 14px; gap: 10px; }
    .live-pill .num { min-width: 2.8em; }
  }

  /* Flash animation when counter ticks up */
  .flash-update {
    animation: flash-volt .55s ease;
  }
  @keyframes flash-volt {
    0%   { color: var(--volt); transform: translateY(0); }
    30%  { color: #fff; transform: translateY(-2px); text-shadow: 0 0 14px var(--volt); }
    100% { color: var(--volt); transform: translateY(0); text-shadow: none; }
  }

  .hero-trust {
    display: flex; align-items: center; gap: 18px;
    margin-top: 22px;
    font-family: var(--mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .avatars { display: flex; }
  .avatars div {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--bg);
    margin-right: -8px;
    background: linear-gradient(135deg, #333, #666);
  }
  .avatars div:nth-child(2) { background: linear-gradient(135deg, var(--volt), #5a7a1e); }
  .avatars div:nth-child(3) { background: linear-gradient(135deg, var(--pump), #7a3a0a); }
  .avatars div:nth-child(4) { background: linear-gradient(135deg, var(--recover), #6a3a2a); }
  .hero-trust .num { color: var(--volt); font-weight: 700; }

  /* Hero visual: product image stack + perks row */
  .hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
  }
  @media (max-width: 920px) { .hero-visual { } }

  /* ─── PER-TIN BACKDROPS ───────────────────────────────────────────
     Each tin gets a soft colored glow directly behind it — adds dramatic
     formula-tinted lighting without obscuring adjacent tins.
     Sized smaller than the tin's bounding box (260px) and shaped as a
     circle, so they never extend into other tins' visible content. The
     gradient fades to fully transparent — these are pure lighting, not
     masking elements.

     The actual bleed-through fix is in the new tin positions below: each
     tin is repositioned so its bounding box no longer extensively
     overlaps the visible content of the others. */
  .tin-bg {
    position: absolute;
    top: 50%; left: 50%;
    width: 220px; height: 220px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(12px);
    z-index: 0;
  }
  /* Reduced opacity for a more subtle ambient glow behind each tin */
  .tin-bg.recover { background: radial-gradient(circle, rgba(255,107,26,.12) 0%, transparent 70%); }
  .tin-bg.pump    { background: radial-gradient(circle, rgba(255,107,26,.13) 0%, transparent 70%); }
  .tin-bg.energy  { background: radial-gradient(circle, rgba(200,255,61,.10) 0%, transparent 70%); }

  .tin {
    position: absolute;
    width: 280px; height: auto;
    object-fit: contain;
    transition: transform .4s ease, filter .4s ease;
  }
  /* Layered filters: tight shadow for definition + soft drop for depth + colored aura per formula.
     With true transparency on the PNGs, drop-shadow hugs the tin's circular silhouette
     instead of the square bounding box, so the colored auras read as electrified product, not square halos. */
  .tin.recover  {
    transform: translate( -60px, 170px) rotate(-3deg); animation: float-3 8s ease-in-out infinite; z-index: 1;
    filter:
      drop-shadow(0 4px 8px rgba(0,0,0,.7))
      drop-shadow(0 28px 50px rgba(0,0,0,.75))
      drop-shadow(0 0 22px rgba(255,136,102,.20))
      drop-shadow(0 0 50px rgba(255,136,102,.10));
  }
  .tin.pump     {
    transform: translate( 135px,  25px) rotate( 6deg); animation: float-2 7s ease-in-out infinite; z-index: 2;
    filter:
      drop-shadow(0 4px 8px rgba(0,0,0,.7))
      drop-shadow(0 28px 50px rgba(0,0,0,.75))
      drop-shadow(0 0 22px rgba(255,107,26,.24))
      drop-shadow(0 0 50px rgba(255,107,26,.12));
  }
  .tin.energy   {
    transform: translate(-130px, -75px) rotate(-8deg); animation: float-1 6s ease-in-out infinite; z-index: 3;
    filter:
      drop-shadow(0 4px 8px rgba(0,0,0,.7))
      drop-shadow(0 28px 50px rgba(0,0,0,.75))
      drop-shadow(0 0 22px rgba(200,255,61,.24))
      drop-shadow(0 0 50px rgba(200,255,61,.12));
  }
  .tin:hover {
    z-index: 5;
    animation-play-state: paused;
  }
  @media (max-width: 920px) {
    .tin { width: 220px; height: 220px; }
    .tin.energy   { transform: translate(-80px, -40px) rotate(-8deg); animation: float-1m 6s ease-in-out infinite; }
    .tin.pump     { transform: translate( 80px,  30px) rotate( 6deg); animation: float-2m 7s ease-in-out infinite; z-index: 2; }
    .tin.recover  { transform: translate(-30px, 110px) rotate(-3deg); animation: float-3m 8s ease-in-out infinite; }
    @keyframes float-1m { 0%,100% { transform: translate(-80px,-40px) rotate(-8deg);} 50% { transform: translate(-80px,-54px) rotate(-8deg);} }
    @keyframes float-2m { 0%,100% { transform: translate( 80px, 30px) rotate( 6deg);} 50% { transform: translate( 80px, 16px) rotate( 6deg);} }
    @keyframes float-3m { 0%,100% { transform: translate(-30px,110px) rotate(-3deg);} 50% { transform: translate(-30px, 96px) rotate(-3deg);} }
  }

  @keyframes float-1 {
    0%,100% { transform: translate(-130px, -75px) rotate(-8deg); }
    50%     { transform: translate(-130px, -91px) rotate(-8deg); }
  }
  @keyframes float-2 {
    0%,100% { transform: translate(135px, 25px) rotate(6deg); }
    50%     { transform: translate(135px,  9px) rotate(6deg); }
  }
  @keyframes float-3 {
    0%,100% { transform: translate(-60px, 170px) rotate(-3deg); }
    50%     { transform: translate(-60px, 154px) rotate(-3deg); }
  }

  /* radial glow behind tins */
  .hero-visual::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(200,255,61,.12) 0%, transparent 60%);
    filter: blur(20px);
    z-index: 0;
  }

  /* electric line */
  .hero-line {
    position: absolute;
    bottom: 30px; left: 50%; transform: translateX(-50%);
    width: 90%; max-width: 600px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--volt), transparent);
    opacity: .6;
  }

  /* ───────── SECTION HEADER PRIMITIVE ───────── */
  .sect-tag {
    font-family: var(--mono);
    font-size: 13px; font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--volt);
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 12px;
  }
  .sect-tag::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--volt);
  }
  h2.sect-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(40px, 6vw, 84px);
    line-height: .92;
    letter-spacing: -.01em;
    text-transform: uppercase;
    max-width: 14ch;
    margin-bottom: 24px;
  }
  h2.sect-title em {
    color: var(--volt);
    font-style: italic;
  }
  .sect-intro {
    font-size: 18px;
    color: var(--muted);
    max-width: 520px;
    margin-bottom: 56px;
  }

  /* ───────── PROBLEM SECTION ───────── */
  .problem {
    padding: 120px 0;
    border-top: 1px solid var(--border);
    background: var(--bg-2);
    position: relative;
  }
  .problem::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(135deg, transparent 0 80px, rgba(200,255,61,.015) 80px 81px);
    pointer-events: none;
  }


  /* ───────── HOW IT WORKS ───────── */
  .how {
    padding: 140px 0;
    position: relative;
    overflow: hidden;
    /* border-top removed — replaced by .how::before soft fade gradient */
  }

  /* ─── Hero → system fade ───
     Soft gradient at the top of the section that bleeds the hero's white
     particle ambience into a faint volt-tinted lead-in for the Energy
     zone below. Sits above the dark base, below content. */
  .how::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 240px;
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, .06) 0%,
      rgba(200, 255, 61,  .05) 35%,
      transparent 100%);
    pointer-events: none;
    z-index: 0;
  }

  /* ─── System particle canvas ───
     Injected by JS (absent under prefers-reduced-motion). Sits below
     content, above background gradients. Particles are zoned by Y:
     top third = lime, middle = orange, bottom = peach. */
  .how-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }

  /* ─── Per-SKU zone glow ───
     Each product feature gets a wide soft radial gradient tinted to its
     SKU. Sits behind the content stack so it tints the air around the
     splash + copy without competing. */
  .product-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 70% at 50% 50%,
      var(--zone-glow, transparent) 0%,
      transparent 65%);
  }
  .product-feature[data-sku="energy"]  { --zone-glow: rgba(200, 255, 61, .10); }
  .product-feature[data-sku="pump"]    { --zone-glow: rgba(255, 107, 26, .10); }
  .product-feature[data-sku="recover"] { --zone-glow: rgba(255, 136, 102, .09); }

  /* Reinforce content stacking — pf-grid above the zone glow */
  .pf-grid { position: relative; z-index: 2; }

  /* ─── Training timeline ───
     Compact horizontal nav between header and product stack. Three
     colored nodes labeled with the training phase (Before/During/After)
     and SKU. Connecting line is a 3-color gradient. */
  .training-timeline {
    max-width: 720px;
    margin: 0 auto 56px;
    padding: 0 24px;
    position: relative;
    z-index: 2;
  }
  .tl-track {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  /* Connecting line — runs at the vertical center of the dots */
  .tl-track::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(to right,
      rgba(200, 255, 61, .35) 0%,
      rgba(255, 107, 26, .35) 50%,
      rgba(255, 136, 102, .35) 100%);
    z-index: 0;
  }
  .tl-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 1;
    flex: 0 0 auto;
  }
  /* Glowing dot — 12px diameter with soft outer halo, dark inner cutout
     so the connecting line can't be seen running through the dot */
  .tl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--node-color);
    box-shadow:
      0 0 0 4px var(--bg),
      0 0 14px var(--node-color),
      0 0 28px var(--node-color),
      0 0 56px rgba(255, 255, 255, .04);
  }
  .tl-energy  { --node-color: var(--volt); }
  .tl-pump    { --node-color: var(--pump); }
  .tl-recover { --node-color: var(--recover); }
  .tl-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
  }
  .tl-when {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .tl-what {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--node-color);
  }
  @media (max-width: 600px) {
    .training-timeline { padding: 0 16px; margin-bottom: 40px; }
    .tl-track::before { left: 8%; right: 8%; }
    .tl-when { font-size: 9px; letter-spacing: .18em; }
    .tl-what { font-size: 10px; letter-spacing: .14em; }
    .tl-dot { width: 10px; height: 10px; }
  }

  /* ═════════ HOW IT WORKS — EDITORIAL ALTERNATING LAYOUT ═════════════
     Replaces the old 3-card mechanism grid with three full-width rows that
     tell the system story: Energy before / Pump during / Recover after.
     Each row alternates image-left / image-right for editorial rhythm.
     DOM order is mobile-first (eyebrow, headline, image, body, chips)
     so the natural flex flow on mobile matches the spec; desktop uses
     CSS Grid to position the image as a column-spanning element. */

  /* Section header */
  .how-header {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 32px;
  }
  .how-header .sect-tag {
    display: inline-block;
    margin-bottom: 22px;
  }
  .how-headline {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(38px, 5.6vw, 72px);
    line-height: .95;
    /* Letter-spacing loosened slightly so words breathe;
       word-spacing widens the gaps so "Energy. Pump. Recover."
       reads as three distinct beats rather than one run-on phrase. */
    letter-spacing: -.012em;
    word-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 22px;
    color: var(--text);
  }
  .how-headline .ev-energy  { color: var(--volt); }
  .how-headline .ev-pump    { color: var(--pump); }
  .how-headline .ev-recover { color: var(--recover); }
  .how-sub {
    font-size: 17px;
    line-height: 1.55;
    color: #b5b5ad;
    max-width: 640px;
    margin: 0 auto;
  }

  /* ═════════ PRODUCT FEATURE SECTIONS ════════════════════════════════════
     Clean alternating split layout. Each .product-feature is one product
     story — art on one side as a foreground PNG (NO box, NO container,
     NO border), copy on the other. Transparent PNG sits directly on the
     section background; drop-shadow + per-SKU colored glow give it depth
     without a frame. */
  .product-stack {
    display: flex;
    flex-direction: column;
    margin: 36px 0 80px;
  }
  .product-feature {
    position: relative;
    min-height: clamp(720px, 80vh, 880px);
    padding: 60px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: transparent;
  }

  /* Inner grid — art column slightly wider so the explosion gets the
     visual weight it deserves; text sits in a tighter column. */
  .pf-grid {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .product-feature[data-art-side="right"] .pf-grid {
    grid-template-columns: 1fr 1.15fr;
  }

  /* ── ART COLUMN ── transparent PNG, no box ── */
  .pf-art {
    position: relative;
    margin: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Reorder for "art on right" rows */
  }
  .product-feature[data-art-side="right"] .pf-art { order: 2; }
  .product-feature[data-art-side="right"] .pf-content { order: 1; }

  .pf-art-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 720px;
    /* Layered drop-shadows: a deep dark shadow for grounding +
       a per-SKU colored glow for ambient depth */
    transition: transform 1.2s cubic-bezier(.4,0,.2,1),
                filter .6s ease;
  }
  .product-feature[data-sku="energy"]  .pf-art-img {
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)) drop-shadow(0 0 80px rgba(200,255,61,.22));
  }
  .product-feature[data-sku="pump"]    .pf-art-img {
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)) drop-shadow(0 0 80px rgba(255,107,26,.26));
  }
  .product-feature[data-sku="recover"] .pf-art-img {
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)) drop-shadow(0 0 80px rgba(255,136,102,.22));
  }

  /* ── CONTENT COLUMN ── */
  .pf-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 480px;
  }
  .pf-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
  }
  .pf-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: .6;
  }
  .product-feature[data-sku="energy"]  .pf-eyebrow { color: var(--volt); }
  .product-feature[data-sku="pump"]    .pf-eyebrow { color: var(--pump); }
  .product-feature[data-sku="recover"] .pf-eyebrow { color: var(--recover); }

  .pf-headline {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(40px, 5vw, 64px);
    line-height: .95;
    letter-spacing: -.018em;
    text-transform: uppercase;
    margin: 0;
    color: var(--text);
  }
  .pf-body {
    font-size: 17px;
    line-height: 1.6;
    color: #b5b5ad;
    margin: 0;
  }
  .pf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }
  .pf-tag {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 7px 12px;
    border: 1px solid var(--border-hi);
    color: #c5c5bd;
    transition: border-color .25s ease, color .25s ease;
  }
  .product-feature[data-sku="energy"]  .pf-tag { border-color: var(--volt);    color: var(--volt); }
  .product-feature[data-sku="pump"]    .pf-tag { border-color: var(--pump);    color: var(--pump); }
  .product-feature[data-sku="recover"] .pf-tag { border-color: var(--recover); color: var(--recover); }

  /* Per-product CTA — outlined treatment so the global "Claim Founder Pass"
     stays the only filled (i.e. primary) button on screen. SKU color still
     identifies which product the button belongs to, but visual weight is
     subordinate to the global primary CTA. */
  .pf-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 14px 22px;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--text);
    border-radius: 6px;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, filter .2s ease, box-shadow .25s ease;
  }
  .pf-cta:hover { transform: translateY(-1px); }
  .pf-cta .arr { transition: transform .2s ease; }
  .pf-cta:hover .arr { transform: translateX(4px); }

  /* Per-SKU solid fill — bg + matching border in the brand accent, dark
     text for contrast. The button reads as a strong color block that
     pulls the eye to conversion. */
  .product-feature[data-sku="energy"]  .pf-cta { background: var(--volt);    border-color: var(--volt);    color: #0a0a0a; }
  .product-feature[data-sku="pump"]    .pf-cta { background: var(--pump);    border-color: var(--pump);    color: #0a0a0a; }
  .product-feature[data-sku="recover"] .pf-cta { background: var(--recover); border-color: var(--recover); color: #0a0a0a; }
  /* Per-SKU hover — soft outer glow in the SKU color + slight brightness
     boost on the fill, so the button feels tactile without losing its
     solid block identity. */
  .product-feature[data-sku="energy"]  .pf-cta:hover { filter: brightness(1.08); box-shadow: 0 8px 24px -6px rgba(200,255,61,.45); }
  .product-feature[data-sku="pump"]    .pf-cta:hover { filter: brightness(1.08); box-shadow: 0 8px 24px -6px rgba(255,107,26,.45); }
  .product-feature[data-sku="recover"] .pf-cta:hover { filter: brightness(1.08); box-shadow: 0 8px 24px -6px rgba(255,136,102,.45); }

  /* ── MOBILE ── art on top, text below; everything stays unboxed ── */
  @media (max-width: 920px) {
    .product-stack { margin: 24px 0 60px; }
    .product-feature {
      min-height: auto;
      padding: 60px 0 40px;
    }
    .pf-grid {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 0 24px;
    }
    .product-feature[data-art-side="right"] .pf-grid {
      grid-template-columns: 1fr;
    }
    .product-feature[data-art-side="right"] .pf-art,
    .product-feature[data-art-side="right"] .pf-content {
      order: 0;   /* reset so flow is image → content on all rows */
    }
    .pf-art-img {
      max-width: 460px;
      margin: 0 auto;
    }
    .pf-content {
      max-width: none;
    }
  }

  /* Bottom CTA */
  .how-cta {
    text-align: center;
    margin-top: 110px;
    padding-top: 60px;
    border-top: 1px solid var(--border);
  }
  .how-cta-line {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(22px, 2.5vw, 30px);
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 22px;
  }
  .how-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 32px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    background: var(--volt);
    color: #000;
    border: 1px solid var(--volt);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .how-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px -10px rgba(200,255,61,.55);
  }
  .how-cta-btn .arr { transition: transform .25s ease; }
  .how-cta-btn:hover .arr { transform: translateX(4px); }

  /* Mobile tighter spacing */
  @media (max-width: 760px) {
    .how-header { margin-bottom: 24px; }
    .how-rows { gap: 80px; }
    .how-row { gap: 14px; }
    .how-cta { margin-top: 70px; padding-top: 40px; }
  }

  /* ───────── PRODUCT LINEUP ───────── */
  .lineup {
    padding: 140px 0 120px;
    border-top: 1px solid var(--border);
    background: var(--bg-2);
  }

  /* Two-column header: title block left, intro paragraph right */
  .lineup-header {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: end;
    margin-bottom: 64px;
  }
  @media (max-width: 760px) { .lineup-header { grid-template-columns: 1fr; gap: 18px; } }
  .lineup .sect-title em { font-style: normal; }   /* override default italic to match the bold-green look */
  .lineup-header .sect-intro {
    margin-bottom: 0;
    color: #b5b5ad;       /* brighter than --muted for the section's lead copy */
    font-size: 17px;
    line-height: 1.55;
  }

  .lineup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  @media (max-width: 920px) { .lineup-grid { grid-template-columns: 1fr; } }

  /* Card is an anchor so the entire card is clickable + keyboard-tabbable */
  .product {
    border: 1px solid var(--border);
    background: var(--bg);
    padding: 32px 30px 28px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
  }
  .product:hover {
    transform: translateY(-6px);
    background: #0c0c0c;
  }
  /* Per-formula hover glow: card border lights up + drop a colored halo */
  .product[data-color="volt"]:hover {
    border-color: rgba(200,255,61,.6);
    box-shadow: 0 14px 60px -12px rgba(200,255,61,.30), 0 0 28px -4px rgba(200,255,61,.12);
  }
  .product[data-color="pump"]:hover {
    border-color: rgba(255,107,26,.65);
    box-shadow: 0 14px 60px -12px rgba(255,107,26,.32), 0 0 28px -4px rgba(255,107,26,.14);
  }
  .product[data-color="recover"]:hover {
    border-color: rgba(255,136,102,.6);
    box-shadow: 0 14px 60px -12px rgba(255,136,102,.30), 0 0 28px -4px rgba(255,136,102,.12);
  }

  /* ── Stage chip at top — bordered tag in formula color ── */
  .product .stage-chip {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
    padding: 7px 12px;
    border: 1px solid;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .product[data-color="volt"]    .stage-chip { color: var(--volt);    border-color: rgba(200,255,61,.6); }
  .product[data-color="pump"]    .stage-chip { color: var(--pump);    border-color: rgba(255,107,26,.65); }
  .product[data-color="recover"] .stage-chip { color: var(--recover); border-color: rgba(255,136,102,.6); }

  /* ── Product photo with strong colored uplighting ── */
  .product .product-photo {
    width: 100%;
    aspect-ratio: 1;
    margin: 16px 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
  }
  /* Vivid colored stage-light coming from BEHIND/below the tin.
     Two layered gradients: a bright bottom-anchored ellipse for the "uplighting"
     core, and a softer surrounding halo for atmospheric spread. */
  .product .product-photo::before {
    content: '';
    position: absolute;
    inset: -8% -10% -10% -10%;
    background:
      radial-gradient(ellipse 70% 45% at 50% 78%, currentColor 0%, transparent 65%),
      radial-gradient(circle at 50% 60%, currentColor 0%, transparent 55%);
    opacity: .55;
    filter: blur(14px);
    z-index: 0;
    pointer-events: none;
    transition: opacity .4s ease, transform .4s ease;
  }
  .product:hover .product-photo::before {
    opacity: .75;
    transform: scale(1.05);
  }
  .product[data-color="volt"]    .product-photo { color: rgb(200,255,61); }
  .product[data-color="pump"]    .product-photo { color: rgb(255,107,26); }
  .product[data-color="recover"] .product-photo { color: rgb(255,136,102); }
  .product .product-photo img {
    width: 92%;
    height: 92%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    transition: transform .4s ease;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,.65));
  }
  .product:hover .product-photo img {
    transform: translateY(-4px) scale(1.04);
  }

  /* ── Product name (big colored title) ── */
  .product .product-name {
    font-family: var(--display);
    font-weight: 900;
    font-size: 52px;
    text-transform: uppercase;
    line-height: .9;
    letter-spacing: -.015em;
    margin-bottom: 6px;
  }
  .product[data-color="volt"]    .product-name { color: var(--volt);    }
  .product[data-color="pump"]    .product-name { color: var(--pump);    }
  .product[data-color="recover"] .product-name { color: var(--recover); }

  /* ── Flavor (smaller, formula-colored, mono caps) ── */
  .product .product-flavor {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 22px;
  }
  .product[data-color="volt"]    .product-flavor { color: var(--volt);    }
  .product[data-color="pump"]    .product-flavor { color: var(--pump);    }
  .product[data-color="recover"] .product-flavor { color: var(--recover); }

  /* ── Body description (brighter + bigger than default body copy) ── */
  .product .product-desc {
    font-size: 15.5px;
    line-height: 1.55;
    color: #c2c2ba;             /* notably brighter than --muted for readability */
    margin-bottom: 28px;
    flex: 1 0 auto;
  }

  /* ── Divider + benefit chips ── */
  .product .product-divider {
    height: 1px;
    background: var(--border-hi);
    margin-bottom: 18px;
  }
  .product .benefits {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 22px;
  }
  .product .benefits span {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 6px 10px;
    border: 1px solid var(--border-hi);
    color: #d0d0c8;
  }

  /* ── "View formula →" indicator (idles muted, lights up on card hover) ── */
  .product .view-formula {
    margin-top: auto;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color .25s ease;
  }
  .product .view-formula .arr {
    display: inline-block;
    transition: transform .3s ease;
  }
  .product:hover .view-formula .arr {
    transform: translateX(8px);
  }
  .product[data-color="volt"]:hover    .view-formula { color: var(--volt);    }
  .product[data-color="pump"]:hover    .view-formula { color: var(--pump);    }
  .product[data-color="recover"]:hover .view-formula { color: var(--recover); }

  /* ── Stack-CTA below the three cards ── */
  .lineup-cta {
    margin-top: 64px;
    padding-top: 56px;
    border-top: 1px solid var(--border);
    text-align: center;
  }
  .lineup-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 20px 36px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    background: var(--volt);
    color: #000;
    border: 1px solid var(--volt);
    text-decoration: none;
    transition: all .25s ease;
    margin-bottom: 18px;
    cursor: pointer;
  }
  .lineup-cta-btn:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 14px 40px -10px rgba(200,255,61,.55);
  }
  .lineup-cta-btn .arr { transition: transform .25s ease; }
  .lineup-cta-btn:hover .arr { transform: translateX(8px); }
  .lineup-cta-sub {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .lineup-cta-sub .num { color: var(--volt); font-weight: 700; }


  /* ───────── PERKS ───────── */
  .perks {
    padding: 140px 0;
    border-top: 1px solid var(--border);
    background: var(--bg-2);
    position: relative;
  }
  .perks-bg {
    position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(200,255,61,.08), transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(255,107,26,.05), transparent 40%);
    pointer-events: none;
  }
  .perks-header {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: end;
    margin-bottom: 56px;
  }
  @media (max-width: 760px) { .perks-header { grid-template-columns: 1fr; gap: 24px; } }

  /* ═════════ PREMIUM CENTERED CTA — PERKS BLOCK ═════════════════════════ */
  .perks-cta {
    margin-top: 64px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .perks-cta .founder-progress { margin-bottom: 36px; max-width: 560px; width: 100%; }
  .perks-cta-button {
    appearance: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 56px;
    background: var(--volt);
    color: #0a0a0a;
    border-radius: 999px;
    text-decoration: none;
    margin-bottom: 28px;
    box-shadow:
      0 0 0 1px rgba(200,255,61,.45),
      0 0 0 8px rgba(200,255,61,.10),
      0 18px 40px -12px rgba(200,255,61,.45),
      0 30px 80px -20px rgba(200,255,61,.25);
    transition: transform .25s ease, box-shadow .35s ease, background .25s ease;
    position: relative;
    overflow: hidden;
  }
  .perks-cta-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .9s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
  }
  .perks-cta-button:hover {
    transform: translateY(-2px);
    background: #d6ff52;
    box-shadow:
      0 0 0 1px rgba(200,255,61,.7),
      0 0 0 10px rgba(200,255,61,.14),
      0 22px 50px -12px rgba(200,255,61,.6),
      0 36px 90px -20px rgba(200,255,61,.35);
  }
  .perks-cta-button:hover::before { transform: translateX(120%); }
  .perks-cta-button:active { transform: translateY(0); }
  .perks-cta-main {
    font-family: var(--display);
    font-weight: 900;
    font-size: 19px;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    line-height: 1;
  }
  .perks-cta-main .arr { transition: transform .25s ease; font-weight: 700; }
  .perks-cta-button:hover .perks-cta-main .arr { transform: translateX(6px); }
  .perks-cta-sub {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .22em;
    color: rgba(10,10,10,.7);
    text-transform: uppercase;
  }
  .perks-cta-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .perks-cta-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .perks-cta-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 6px rgba(200,255,61,.6);
  }
  .perks-cta-trust-divider {
    width: 4px; height: 4px;
    background: rgba(255,255,255,.18);
    transform: rotate(45deg);
  }
  @media (max-width: 760px) {
    .perks-cta-button { padding: 18px 32px; width: 100%; max-width: 420px; }
    .perks-cta-main { font-size: 16px; }
    .perks-cta-trust { gap: 10px; }
    .perks-cta-trust-divider { display: none; }
    .perks-cta-trust-item { font-size: 10px; flex-basis: 100%; justify-content: center; }
  }
  .perks-header p {
    color: var(--muted);
    font-size: 16px;
    max-width: 460px;
  }
  .perks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
  }
  @media (max-width: 920px) { .perks-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .perks-grid { grid-template-columns: 1fr; } }

  .perk {
    background: var(--bg);
    padding: 36px 28px;
    transition: background .3s;
  }
  .perk:hover { background: #0a0a0a; }
  .perk-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--volt);
    letter-spacing: .2em;
    margin-bottom: 28px;
  }
  .perk h3 {
    font-family: var(--display);
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 14px;
    letter-spacing: -.005em;
  }
  .perk p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
  }
  .perk-stamp {
    display: inline-block;
    margin-top: 18px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--volt);
    padding: 4px 8px;
    border: 1px dashed var(--volt);
  }

  /* ───────── FOUNDER NOTE ───────── */
  .founder {
    padding: 140px 0;
    border-top: 1px solid var(--border);
  }
  .founder-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 64px;
    align-items: center;
  }
  @media (max-width: 760px) { .founder-grid { grid-template-columns: 1fr; } }

  .founder-portrait {
    aspect-ratio: 4/5;
    background: linear-gradient(135deg, #1a1a1a, #050505);
    border: 1px solid var(--border-hi);
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .founder-portrait::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(200,255,61,.1), transparent 50%);
  }
  /* Cinematic vignette overlay — darkens edges to integrate any photo
     (or empty placeholder) with the dark page palette. Always-on. */
  .founder-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 95% 80% at 50% 38%,
                                transparent 45%,
                                rgba(0,0,0,.55) 100%);
    pointer-events: none;
    z-index: 2;
  }
  /* Real image fills the slot when added */
  .founder-portrait img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
  }
  /* Empty-state placeholder — shows when no <img> is in the slot.
     Reads as intentional design rather than "broken." */
  .founder-portrait-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .14);
    z-index: 1;
  }
  /* Timing line — small italic above the sign-off, distinct from body */
  .founder-timing {
    font-family: var(--mono);
    font-size: 12px;
    font-style: italic;
    color: var(--muted);
    letter-spacing: .02em;
    margin: 0 0 18px;
  }
  /* Italic sign-off — light gray, smaller than body, sits above credentials */
  .founder-signoff {
    font-family: var(--display);
    font-size: 16px;
    font-style: italic;
    color: rgba(243, 241, 234, .75);
    margin: 0 0 22px;
  }
  .founder-meta {
    position: absolute;
    bottom: 20px; left: 20px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text);
  }
  .founder-meta span { display: block; color: var(--muted); margin-top: 4px; }

  /* Founder quote — editorial pulled-quote treatment.
     The oversized volt-tinted opening mark replaces the inline curly
     quote and reads as the section’s visual anchor. Italic emphasis
     signals founder voice rather than brand voice. */
  .founder-quote {
    position: relative;
    font-family: var(--display);
    font-weight: 600;
    font-style: italic;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.15;
    letter-spacing: -.01em;
    /* Generous breathing room above + below so it reads as pulled quote,
       not a headline. Padding makes room for the decorative mark. */
    margin: 32px 0 40px;
    padding: 26px 0 0 52px;
  }
  /* Decorative oversized opening quote mark.
     Positioned to protrude slightly above and to the left of the text,
     anchoring the upper-left corner the way magazine pulled quotes do. */
  .founder-quote::before {
    content: '“';
    position: absolute;
    top: -32px;
    left: -8px;
    font-family: var(--display);
    font-weight: 700;
    font-style: normal;
    font-size: clamp(110px, 12vw, 170px);
    line-height: 1;
    color: var(--volt);
    opacity: .42;
    pointer-events: none;
  }
  .founder-quote em { color: var(--volt); font-style: italic; }
  @media (max-width: 760px) {
    .founder-quote {
      padding-left: 38px;
      padding-top: 22px;
      margin-top: 24px;
    }
    .founder-quote::before {
      top: -22px;
      left: -4px;
    }
  }
  .founder-body {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 24px;
  }
  .founder-sig {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--text);
    border-top: 1px solid var(--border);
    padding-top: 18px;
  }
  .founder-sig span { color: var(--muted); }

  /* Founder CTA spacing.
     Generous margin-top creates a visual pause between the credentials
     block and the button — the moment of decision arrival.
     Tight margin-top on .founder-cta-micro attaches the urgency line
     to the button so they read as one unit (action + condition). */
  .founder-cta {
    margin-top: 40px;
  }
  .founder-cta-micro {
    margin-top: 10px;
    margin-bottom: 0;
  }

  /* ═════════ FOUNDER PASS BENEFITS ══════════════════════════════════════════════════
     Section showcasing the Founder Pass offer. Architecture:
       • split meta header (eyebrow + right-tag) → headline → intro
       • hero visual slot (photo-ready, ~16:10 aspect)
       • 2×2 benefit cards with line-style SVG icons
       • outro: closing line → CTA → urgency microcopy */
  .founder-pass {
    padding: 140px 0;
    position: relative;
  }

  /* Header */
  .fp-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
  }
  .fp-meta-l {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--volt);
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .fp-meta-l::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--volt);
    opacity: .6;
  }
  .fp-meta-r {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .fp-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(36px, 5vw, 68px);
    line-height: .98;
    letter-spacing: -.018em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 22px;
    max-width: 880px;
  }
  .fp-intro {
    font-size: 16.5px;
    line-height: 1.65;
    color: rgb(200, 200, 200);
    margin: 0 0 70px;
    max-width: 760px;
  }

  /* Hero visual slot — photo-ready */
  .fp-hero {
    position: relative;
    margin: 0 auto 90px;
    max-width: 980px;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, #181818 0%, #060606 100%);
    border: 1px solid var(--border-hi);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fp-hero::before {
    /* Subtle volt-tinted ambient glow at top-center */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 45%,
                                rgba(200, 255, 61, .08),
                                transparent 70%);
    z-index: 0;
  }
  .fp-hero::after {
    /* Edge vignette */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 80% at 50% 50%,
                                transparent 50%,
                                rgba(0, 0, 0, .5) 100%);
    z-index: 2;
    pointer-events: none;
  }
  .fp-hero img,
  .fp-hero-video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .fp-hero-video { display: block; }
  .fp-hero-empty {
    position: relative;
    z-index: 1;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .16);
  }
  .fp-hero-stamp {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 3;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--volt);
    padding: 8px 12px;
    border: 1px solid rgba(200, 255, 61, .35);
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* 2×2 benefit cards */
  .fp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 1080px;
    margin: 0 auto 80px;
  }
  .fp-card {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color .35s ease, transform .35s ease, background .35s ease;
  }
  .fp-card:hover {
    background: #0a0a0a;
    border-color: var(--border-hi);
    transform: translateY(-3px);
  }
  .fp-icon {
    color: var(--volt);
    line-height: 0;
    margin-bottom: 4px;
  }
  .fp-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--volt);
    margin: 0;
  }
  .fp-card-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 2px;
  }
  .fp-card-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 14px;
    flex: 1;
  }
  .fp-card-accent {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--volt);
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin: 0;
  }

  /* ── Mobile-only "What's Included" card ──
     Hidden on desktop. Activated inside the 760px media query below,
     where it replaces the 4-card .fp-grid with a single focused list. */
  .fp-included { display: none; }

  /* Outro */
  .fp-outro {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
  }
  .fp-outro-line {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.18;
    letter-spacing: -.012em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0;
    max-width: 760px;
  }
  .fp-outro .hero-cta-big { max-width: 520px; }

  /* Bridging line — small note between closing line and CTA.
     Flex parent has gap: 26px between all children. To give this line
     generous space ABOVE (full 26px gap from closing line) and TIGHTER
     space BELOW (toward the CTA), we use a negative bottom margin to
     offset some of the gap on the CTA side. */
  .fp-bridge {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--volt);
    margin: 0 0 -14px;
    max-width: 560px;
  }
  .fp-bridge-arr {
    display: inline-block;
    margin-left: 2px;
    font-weight: 700;
    /* Subtle nudge animation — nothing loud, just a downward beat to
       reinforce the scroll-down affordance. */
    animation: fp-bridge-bob 2.4s ease-in-out infinite;
  }
  @keyframes fp-bridge-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .fp-bridge-arr { animation: none; }
  }
  .fp-outro-micro {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
  }

  /* ════════════════════════════════════════════════════════════════
     2-COLUMN LAYOUT (desktop) for the Top 100 Legend Perks section.
     Left: meta + title + intro + Founder Kit hero (sized down so it
     doesn't dominate the viewport). Right: 2×2 perk grid + CTA block
     stacked vertically. Goal is one ~viewport-height "prize reveal"
     section instead of the previous two-scroll chapter.
     ════════════════════════════════════════════════════════════════ */
  .fp-layout {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 56px;
    align-items: start;
    margin-top: 28px;
  }
  .fp-col-left,
  .fp-col-right { min-width: 0; }

  /* Hero scales down ~20% inside the column vs the prior full-width
     placement (column already constrains it; we also trim the top
     margin so the hero pulls up against the intro copy). */
  .fp-col-left .fp-hero {
    margin-top: 24px;
    margin-bottom: 0;
  }

  /* Compact card sizing inside the right column. Two-up layout means
     each card is ~half the previous full-grid width, so padding and
     type both tighten while remaining readable. */
  .fp-col-right .fp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 0;
    max-width: none;
  }
  .fp-col-right .fp-card {
    padding: 22px 20px 18px;
    gap: 8px;
  }
  .fp-col-right .fp-card .fp-icon { margin-bottom: 4px; }
  .fp-col-right .fp-card .fp-icon svg { width: 26px; height: 26px; }
  .fp-col-right .fp-card .fp-eyebrow { font-size: 9.5px; letter-spacing: .2em; }
  .fp-col-right .fp-card .fp-card-title { font-size: 17px; }
  .fp-col-right .fp-card .fp-card-body { font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
  .fp-col-right .fp-card .fp-card-accent { font-size: 10.5px; padding-top: 10px; }

  /* CTA block sits directly under the perk grid inside the right
     column. Removes the old full-width centered treatment. */
  .fp-col-right .fp-outro {
    margin-top: 24px;
    text-align: center;
  }
  .fp-col-right .fp-outro .hero-cta-big { max-width: 100%; }
  .fp-col-right .fp-outro-line {
    font-size: 26px;
    line-height: 1.1;
    margin-bottom: 10px;
  }
  .fp-col-right .fp-bridge { font-size: 13px; margin-bottom: 14px; }
  .fp-col-right .fp-outro-micro { font-size: 10.5px; letter-spacing: .12em; margin-top: 10px; }

  /* Intermediate breakpoint: dual columns become awkward before the
     full mobile stack. Collapse to single column with the same DOM
     order (meta → title → intro → hero → cards → CTA). */
  @media (max-width: 980px) {
    .fp-layout {
      grid-template-columns: 1fr;
      gap: 32px;
      margin-top: 18px;
    }
    .fp-col-right .fp-grid { grid-template-columns: 1fr; }
    .fp-col-right .fp-outro-line { font-size: 24px; }
  }

  /* Mobile */
  @media (max-width: 760px) {
    .founder-pass { padding: 90px 0; }
    .fp-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 22px;
    }
    .fp-intro { margin-bottom: 50px; }
    .fp-hero {
      margin-bottom: 60px;
      aspect-ratio: 4/3;
    }
    .fp-hero-stamp { top: 14px; right: 14px; }
    /* Mobile shows the actual 4 perk cards stacked (single column).
       The previous .fp-included consolidated card has been removed
       in favor of the real cards. */
    .fp-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .fp-included { display: none; }
    .fp-included {
      display: block;
      background: var(--bg);
      border: 1px solid var(--border);
      padding: 32px 26px 30px;
      margin: 0 0 60px;
      position: relative;
    }
    .fp-included::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 2px;
      background: var(--volt);
      opacity: .7;
    }
    .fp-included-eyebrow {
      margin: 0 0 14px;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--volt);
    }
    .fp-included-title {
      margin: 0 0 24px;
      font-family: var(--display);
      font-weight: 900;
      font-size: 22px;
      line-height: 1.05;
      letter-spacing: -.005em;
      text-transform: uppercase;
      color: var(--text);
    }
    .fp-included-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .fp-included-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 14.5px;
      line-height: 1.5;
      color: var(--text);
    }
    .fp-included-mark {
      flex: 0 0 14px;
      color: var(--volt);
      font-family: var(--mono);
      font-weight: 700;
      font-size: 14px;
      line-height: 1.5;
    }
    .fp-card { padding: 26px 22px; }
  }

  /* ═════════ REFER · CLIMB · WIN ═════════════════════════════════════════════════
     Referral teaser. Two-column main content:
       • Left  (1.2fr): three-tier ladder (tier 03 top → 01 bottom)
       • Right (1fr):   Founder Kit visual framed as tier-02 prize
     Subtle vertical gradient bg reinforces the climb metaphor (lighter
     at the top, darker at the bottom). Tier rows connect via 1px borders
     acting as the climb rail. */

  .climb {
    padding: 140px 0;
    position: relative;
    background: linear-gradient(to top,
      var(--bg) 0%,
      rgba(255, 255, 255, .018) 100%);
  }

  /* Header — mirrors .fp-meta pattern for visual cohesion */
  .climb-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
  }
  .climb-meta-l {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--volt);
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .climb-meta-l::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--volt);
    opacity: .6;
  }
  .climb-meta-r {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .climb-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(36px, 5vw, 68px);
    line-height: .98;
    letter-spacing: -.018em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 22px;
    max-width: 880px;
  }
  .climb-intro {
    font-size: 16.5px;
    line-height: 1.65;
    color: rgb(200, 200, 200);
    margin: 0 0 80px;
    max-width: 760px;
  }

  /* Two-column main */
  .climb-main {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 72px;
    align-items: center;
    margin-bottom: 80px;
  }

  /* Tier ladder — vertical volt rail running through the rail column.
     The rail (.climb-ladder::before) is the climb visualization;
     indicators sit on top of it as 'stations' on the line. */
  .climb-ladder {
    position: relative;
    display: flex;
    flex-direction: column;
  }
  /* Continuous vertical rail — brighter at top, dimmer toward bottom
     (reinforces the climb metaphor: brighter = closer to the prize) */
  .climb-ladder::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 44px;            /* horizontal center of the 88px rail column */
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
      rgba(200, 255, 61, .42) 0%,
      rgba(200, 255, 61, .14) 100%);
    z-index: 0;
    pointer-events: none;
  }
  .climb-tier {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 26px;
    padding: 28px 0;
    align-items: center;
    transition: background .25s ease;
  }
  .climb-tier:hover {
    background: rgba(200, 255, 61, .04);
  }
  .climb-tier-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .climb-indicator {
    position: relative;
    z-index: 2;
    font-family: var(--display);
    font-weight: 900;
    font-size: 38px;
    line-height: 1;
    color: var(--volt);
    letter-spacing: -.015em;
  }
  .climb-tier-icon {
    color: var(--volt);
    opacity: .7;
    line-height: 0;
  }
  .climb-threshold {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--volt);
    margin: 0 0 8px;
  }
  .climb-reward-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 10px;
  }
  .climb-reward-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
  }

  /* Tier 4 (DIAMOND) gets extra visual weight — mythic top prize */
  .climb-tier-4 .climb-indicator { font-size: 48px; }
  .climb-tier-4 .climb-reward-title { font-size: 28px; }
  .climb-tier-4 .climb-tier-icon { opacity: 1; }

  /* Right column: Founder Leaderboard mockup.
     Static visual representation of the post-signup leaderboard. Monospace
     typography signals 'real data platform' rather than marketing graphic.
     One row mid-board is personalized (@you_could_be_here) with a subtle
     volt tint and a cycling count value to plant the climb concept. */
  .climb-leaderboard {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .lb-card {
    position: relative;
    background: linear-gradient(180deg, #0c0c0c 0%, #060606 100%);
    border: 1px solid rgba(200, 255, 61, .25);
    padding: 18px 22px 22px;
    overflow: hidden;
  }
  /* Subtle volt glow ambience inside the card */
  .lb-card::before {
    content: '';
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 60%;
    background: radial-gradient(ellipse at center,
                                rgba(200, 255, 61, .06),
                                transparent 70%);
    pointer-events: none;
  }

  /* Card header: title + LIVE indicator */
  .lb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(200, 255, 61, .12);
    position: relative;
  }
  .lb-title {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--volt);
  }
  .lb-updated {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(243, 241, 234, .55);
  }
  .lb-updated-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 0 0 rgba(200, 255, 61, .55);
    animation: lb-updated-pulse 2s ease-in-out infinite;
    flex: 0 0 auto;
  }
  .lb-updated-text {
    /* Tabular-nums keeps the digit width consistent if JS rotates values
       on subsequent renders, so the layout doesn't shift. */
    font-variant-numeric: tabular-nums;
  }
  @keyframes lb-updated-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200, 255, 61, .55); opacity: 1; }
    50%      { box-shadow: 0 0 0 5px rgba(200, 255, 61, 0); opacity: .65; }
  }

  /* Row container with bottom fade to suggest more positions below */
  .lb-rows {
    display: flex;
    flex-direction: column;
    mask-image: linear-gradient(to bottom,
                                #000 78%,
                                rgba(0,0,0,.4) 95%,
                                transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,
                                        #000 78%,
                                        rgba(0,0,0,.4) 95%,
                                        transparent 100%);
  }
  .lb-row {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    transition: background .2s ease;
  }
  .lb-row:last-child { border-bottom: none; }
  .lb-row:hover { background: rgba(200, 255, 61, .035); }
  .lb-pos {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--volt);
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .lb-pos-icon {
    color: var(--volt);
    flex: 0 0 auto;
  }
  .lb-name {
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: .01em;
  }
  .lb-count {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
    text-align: right;
    min-width: 30px;
  }

  /* Top spot — slightly brighter volt for the pos number */
  .lb-row-top .lb-pos { color: var(--volt); text-shadow: 0 0 8px rgba(200, 255, 61, .35); }

  /* "Your spot" row — personalization hook */
  .lb-row-you {
    background: rgba(200, 255, 61, .06);
    border-top: 1px solid rgba(200, 255, 61, .18);
    border-bottom: 1px solid rgba(200, 255, 61, .18);
    margin: 2px 0;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -10px;
    margin-right: -10px;
  }
  .lb-row-you .lb-name { color: var(--volt); font-weight: 700; }
  .lb-row-you .lb-count {
    color: var(--volt);
    font-variant-numeric: tabular-nums;
    transition: opacity .25s ease;
  }
  .lb-row-you:hover { background: rgba(200, 255, 61, .09); }

  /* Caption below leaderboard */
  .lb-caption {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.5;
    margin: 16px 0 0;
    text-align: center;
  }

  @media (prefers-reduced-motion: reduce) {
    .lb-updated-dot { animation: none; }
  }
  @media (max-width: 760px) {
    .lb-card { padding: 14px 16px 18px; }
    .lb-row { grid-template-columns: 56px 1fr auto; gap: 10px; padding: 8px 0; }
    .lb-name { font-size: 11.5px; }
    .lb-count { font-size: 12px; }
  }
  /* Narrow viewport: stack header items vertically so the timestamp
     doesn't crowd the title. */
  @media (max-width: 440px) {
    .lb-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
  }

  /* Outro microcopy */
  .climb-outro-micro {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
  }

  /* Tablet / mobile */
  @media (max-width: 960px) {
    .climb-main {
      grid-template-columns: 1fr;
      gap: 56px;
    }
  }
  @media (max-width: 760px) {
    .climb { padding: 90px 0; }
    .climb-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
    .climb-intro { margin-bottom: 56px; }
    .climb-main { margin-bottom: 60px; }
    .climb-tier {
      grid-template-columns: 64px 1fr;
      gap: 18px;
      padding: 22px 0;
    }
    .climb-indicator { font-size: 32px; }
    .climb-reward-title { font-size: 20px; }
    .climb-tier-4 .climb-indicator { font-size: 38px; }
    .climb-tier-4 .climb-reward-title { font-size: 23px; }
  }

  /* ───────── FAQ ───────── */
  .faq {
    padding: 140px 0 130px;
    border-top: 1px solid var(--border);
    background: var(--bg-2);
  }

  /* Centered header — small numbered tag + big display title */
  .faq-header {
    text-align: center;
    margin-bottom: 56px;
  }
  .faq-num {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .25em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 22px;
  }
  .faq-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(40px, 7vw, 84px);
    line-height: .9;
    letter-spacing: -.02em;
    text-transform: uppercase;
    margin: 0;
  }
  .faq-title em {
    color: var(--volt);
    font-style: normal;
  }

  /* List of questions — single column, centered, capped at readable width */
  .faq-list {
    max-width: 820px;
    margin: 0 auto;
  }

  /* Each question is a self-contained dark "pill" card.
     Subtle border by default, lights up on hover, stays lit when open. */
  .faq-item {
    background: #0a0a0a;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
    transition: border-color .25s ease, background .25s ease;
    overflow: hidden;
  }
  .faq-item:hover {
    border-color: var(--border-hi);
    background: #0d0d0d;
  }
  .faq-item[open] {
    border-color: rgba(200,255,61,.32);
    background: #0d0d0d;
  }

  .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: var(--text);
    letter-spacing: 0;
    text-transform: none;
    transition: color .2s;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover { color: var(--volt); }

  .faq-item summary .plus {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    position: relative;
    color: var(--volt);
  }
  .faq-item summary .plus::before,
  .faq-item summary .plus::after {
    content: '';
    position: absolute;
    background: currentColor;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
  .faq-item summary .plus::before { width: 14px; height: 2px; }
  .faq-item summary .plus::after  { width: 2px; height: 14px; transition: transform .3s; }
  .faq-item[open] summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }

  .faq-item .answer {
    padding: 4px 28px 24px;
    color: #b5b5ad;
    font-size: 15px;
    line-height: 1.65;
    max-width: 70ch;
    /* Height transition for smooth accordion expand/collapse.
       JS sets explicit pixel heights during animation, then clears
       the inline style on transitionend. */
    overflow: hidden;
    transition: height 280ms ease-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .faq-item .answer { transition: none; }
  }

  /* Centered support line below the FAQ list */
  .faq-foot {
    text-align: center;
    margin-top: 40px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .15em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .faq-foot .email {
    color: var(--volt);
    font-weight: 700;
  }

  @media (max-width: 760px) {
    .faq-item summary {
      padding: 20px 22px;
      font-size: 16px;
      gap: 16px;
    }
    .faq-item .answer {
      padding: 4px 22px 22px;
      font-size: 14px;
    }
    .faq-foot { font-size: 10px; }
  }

  /* ───────── FINAL CTA ───────── */
  .final {
    padding: 160px 0 140px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  .final::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 60%, rgba(200,255,61,.07), transparent 60%);
  }
  .final-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--volt);
    margin: 0 0 36px;
  }

  .final-bolt {
    width: 60px; height: 80px;
    margin: 0 auto 32px;
    fill: var(--volt);
    filter: drop-shadow(0 0 30px var(--volt-soft));
    animation: pulse 2.4s ease-in-out infinite;
  }
  h2.final-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(56px, 9vw, 144px);
    line-height: .85;
    letter-spacing: -.02em;
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  h2.final-title em {
    color: var(--volt);
    font-style: italic;
  }
  .final-sub {
    color: var(--muted);
    font-size: 18px;
    max-width: 520px;
    margin: 0 auto 40px;
  }
  .final-form {
    max-width: 540px;
    margin: 0 auto;
  }

  /* Three-clause closing line between the SMS disclaimer and the
     progress bar. Standalone styling (decoupled from the shared
     outro-line rule) so it can match this section's centered
     declarative voice with positive letter-spacing and explicit
     text-align. The previous version inherited a tracked-tight
     rule built for left-aligned section outros and didn't centre
     properly without an explicit text-align. */
  .final-closing {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.15;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text);
    margin: 72px auto 52px;
    max-width: 720px;
  }
  @media (max-width: 700px) {
    .final-closing {
      margin: 52px auto 40px;
      letter-spacing: .03em;
    }
  }
  .position-box {
    margin-top: 40px;
    display: inline-block;
    border: 1px solid var(--border-hi);
    background: var(--surface);
    padding: 18px 28px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .position-box .you {
    color: var(--volt);
    font-weight: 700;
    margin: 0 6px;
  }
  .position-box .total { color: var(--text); }

  /* ───────── FOOTER ───────── */
  footer {
    padding: 80px 0 36px;
    border-top: 1px solid var(--border);
    background: var(--bg);
  }
  .foot-top {
    display: grid;
    /* Two columns: brand block on the left, legal nav on the right */
    grid-template-columns: 1fr auto;
    gap: 64px;
    margin-bottom: 48px;
    align-items: start;
  }
  @media (max-width: 760px) {
    .foot-top {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }

  .foot-brand {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* Social icons row */
  .foot-social {
    display: flex;
    gap: 14px;
    margin-top: 6px;
  }
  .foot-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: rgba(243, 241, 234, .55);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
  }
  .foot-social-link:hover,
  .foot-social-link:focus-visible {
    color: var(--volt);
    border-color: rgba(200, 255, 61, .45);
    background: rgba(200, 255, 61, .05);
  }

  /* "Not ready yet?" follow line below social icons */
  .foot-follow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .04em;
    line-height: 1.55;
    color: var(--muted);
    max-width: 320px;
    margin: 4px 0 0;
  }
  .foot-follow a {
    color: var(--volt);
    text-decoration: none;
    border-bottom: 1px solid rgba(200, 255, 61, .35);
    transition: border-color .2s ease;
  }
  .foot-follow a:hover { border-bottom-color: var(--volt); }
  .foot-logo {
    max-width: 320px;
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 16px rgba(200,255,61,.18));
  }
  @media (max-width: 760px) {
    .foot-logo { max-width: 240px; }
  }
  .foot-tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .foot-col h4 {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--volt);
    margin-bottom: 18px;
  }
  .foot-col ul { list-style: none; }
  .foot-col li {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--muted);
    transition: color .2s;
  }
  .foot-col li a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
  }
  .foot-col li a:hover,
  .foot-col li a:focus-visible { color: var(--text); }
  .foot-col li:hover { color: var(--text); }

  /* Physical business address block (TCPA/CAN-SPAM compliance). Sits
     between foot-top and foot-disclaimer with mono caps treatment so it
     reads as system/legal metadata rather than primary content. */
  .foot-address {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
  }
  .foot-address strong {
    display: block;
    font-weight: 700;
    color: rgba(243, 241, 234, .75);
    margin-bottom: 2px;
  }
  .foot-address span {
    display: block;
  }

  /* 18+ badge inside the medical disclaimer */
  .foot-age-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--volt);
    border: 1px solid rgba(200, 255, 61, .4);
    border-radius: 4px;
    vertical-align: 2px;
  }
  .foot-bot {
    border-top: 1px solid var(--border);
    padding-top: 28px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dim);
    flex-wrap: wrap;
  }

  /* Reveal */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .reveal.in {
    opacity: 1;
    transform: translateY(0);
  }


  /* ═════════ "WHAT YOU FEEL" TIMELINE ═════════════════════════════
     Horizontal 4-stage timeline showing the user-experience arc of
     a single product (Energy / Watermelon Frost). On scroll-into-view,
     each stage activates in sequence and the connecting line fills in.
     Stays "playing" on the last stage. Switches to vertical on mobile. */
  .feel-timeline {
    padding: 140px 0;
    border-top: 1px solid var(--border);
    overflow: hidden;
  }
  .ft-header {
    text-align: center;
    margin-bottom: 80px;
  }
  .ft-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .25em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .ft-eyebrow .accent { color: var(--volt); }
  .ft-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(40px, 6.5vw, 80px);
    line-height: .9;
    letter-spacing: -.02em;
    text-transform: uppercase;
    margin: 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  .ft-title em {
    color: var(--volt);
    font-style: normal;
  }

  .ft-timeline {
    position: relative;
    padding: 60px 10px 0;
  }
  .ft-track {
    position: absolute;
    top: 70px;        /* aligns with marker centers (60 + 10) */
    left: 30px;
    right: 30px;
    height: 1px;
    background-image: linear-gradient(to right, rgba(255,255,255,.18) 50%, transparent 50%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    z-index: 0;
  }
  .ft-track-fill {
    position: absolute;
    top: 70px;
    left: 30px;
    height: 1px;
    width: 0%;
    max-width: calc(100% - 60px);
    background: var(--volt);
    box-shadow: 0 0 8px var(--volt);
    z-index: 1;
    transition: width 1.4s cubic-bezier(.4, 0, .3, 1);
  }
  .ft-stages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    position: relative;
    z-index: 2;
  }
  .ft-stage {
    position: relative;
    padding-top: 50px;
  }
  .ft-time {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--muted);
    text-transform: uppercase;
    transition: color .35s ease;
  }
  .ft-marker {
    position: absolute;
    top: 18px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.22);
    background: var(--bg);
    transition: all .4s ease;
    z-index: 2;
  }
  .ft-marker::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--volt);
    transition: transform .35s ease;
  }
  /* "passed" = stage has been triggered, marker is filled green */
  .ft-stage.passed .ft-marker {
    border-color: var(--volt);
    background: rgba(200,255,61,.08);
  }
  .ft-stage.passed .ft-marker::after {
    transform: translate(-50%, -50%) scale(1);
  }
  .ft-stage.passed .ft-time {
    color: var(--volt);
  }
  /* "current" = currently active stage, pulses with halo */
  .ft-stage.current .ft-marker {
    border-color: var(--volt);
    box-shadow: 0 0 0 4px rgba(200,255,61,.18), 0 0 24px rgba(200,255,61,.5);
    animation: ft-pulse 1.6s ease-in-out infinite;
  }
  @keyframes ft-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(200,255,61,.18), 0 0 22px rgba(200,255,61,.45); }
    50%      { box-shadow: 0 0 0 9px rgba(200,255,61,.08), 0 0 36px rgba(200,255,61,.65); }
  }

  .ft-stage h3 {
    font-family: var(--display);
    font-weight: 900;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 14px 0 10px;
    color: var(--text);
  }
  .ft-stage p {
    font-size: 14px;
    line-height: 1.6;
    color: #b5b5ad;
    margin: 0;
  }

  /* Mobile: vertical timeline with marker on left of each row */
  @media (max-width: 760px) {
    .feel-timeline { padding: 100px 0; }
    .ft-header { margin-bottom: 56px; }
    .ft-timeline { padding: 0 0 0 30px; }
    .ft-track {
      top: 0;
      bottom: 0;
      left: 9px;
      right: auto;
      width: 1px;
      height: auto;
      background-image: linear-gradient(to bottom, rgba(255,255,255,.18) 50%, transparent 50%);
      background-size: 1px 8px;
      background-repeat: repeat-y;
    }
    .ft-track-fill {
      top: 0;
      left: 9px;
      width: 1px !important;
      max-width: 1px;
      height: 0%;
      max-height: 100%;
      transition: height 1.4s cubic-bezier(.4, 0, .3, 1);
    }
    .ft-stages {
      grid-template-columns: 1fr;
      gap: 36px;
    }
    .ft-stage {
      padding-top: 0;
      padding-left: 30px;
    }
    .ft-time {
      position: static;
      display: inline-block;
      margin-bottom: 4px;
    }
    .ft-marker {
      top: 0;
      left: -30px;
    }
  }

  /* ═════════ "WHAT'S NOT IN THE POUCH" PROHIBITION GRID ════════════
     Eight prohibited ingredient classes in a 4×2 grid. Each card has a
     red X icon, a strikethrough title, descriptive body, and a green
     "VOLT does this instead →" footer line. Becomes 2-col on tablet,
     1-col on phone. */
  .prohibit {
    padding: 130px 0;
    border-top: 1px solid var(--border);
    background: var(--bg-2);
  }
  .prohibit-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid var(--border-hi);
    margin-bottom: 56px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    flex-wrap: wrap;
    gap: 12px;
  }
  .prohibit-meta .meta-l .num { color: var(--danger); }
  .prohibit-meta .meta-l .text { color: var(--muted); margin-left: 8px; }
  .prohibit-meta .meta-r { color: var(--muted); }
  .prohibit-meta .meta-r .accent { color: var(--volt); }

  .prohibit-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(56px, 9.5vw, 130px);
    line-height: .85;
    letter-spacing: -.025em;
    text-transform: uppercase;
    margin: 0 0 28px;
  }
  .prohibit-title em {
    color: var(--danger);
    font-style: normal;
    /* Strikethrough ties the headline word into the section's visual
       language (banned ingredient titles are also struck-through red).
       Thickness scales with font-size so the line stays proportional
       across viewport sizes; skip-ink off keeps the line continuous
       through the letter strokes. */
    text-decoration: line-through;
    text-decoration-thickness: 0.08em;
    text-decoration-skip-ink: none;
  }
  .prohibit-intro {
    font-size: 16px;
    line-height: 1.6;
    color: #b5b5ad;
    max-width: 580px;
    margin-bottom: 64px;
  }
  /* When two intro paragraphs sit back-to-back, tighten the gap between
     them so they read as one intro block with two rhythmic beats rather
     than two independent statements. The second paragraph keeps the full
     64px margin-bottom, which preserves the breathing room before the grid. */
  .prohibit-intro:has(+ .prohibit-intro) {
    margin-bottom: 18px;
  }

  .prohibit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
  }
  @media (max-width: 920px) { .prohibit-grid { grid-template-columns: repeat(2, 1fr); } }
  /* Mobile keeps 2 columns (2x4 grid) — never collapses to 1 column */

  .prohibit-card {
    background: var(--bg);
    padding: 30px 26px 28px;
    display: flex;
    flex-direction: column;
    transition: background .3s ease;
  }
  .prohibit-card:hover { background: #0c0c0c; }

  /* BANNED stamp — mimics an inked rejection stamp on a document.
     The 'distressed' feel is achieved with:
       • a subtle 1px text-shadow offset (double-impression illusion)
       • inset box-shadow over the border (slightly imperfect edges)
       • per-card rotation variation (no two stamps land exactly the same)
     All eight cells use the same color/size/weight; only the rotation
     angle varies, which sells the 'really stamped' read. */
  .prohibit-stamp {
    align-self: flex-start;       /* top-left position in the cell */
    display: inline-block;
    padding: 5px 11px 4px;
    border: 1.5px solid var(--danger);
    color: var(--danger);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1;
    background: transparent;
    /* Faint double-printed text impression */
    text-shadow: 0.5px 0.5px 0 rgba(255, 82, 82, .35);
    /* Slightly imperfect inner edge — subtle ink-on-paper feel */
    box-shadow: inset 0 0 0 0.5px rgba(255, 82, 82, .25);
    margin-bottom: 28px;
    transform: rotate(-2deg);
    transform-origin: center;
  }
  /* Per-card rotation — each stamp lands at a slightly different angle,
     so the eight cards read as individually stamped, not printed. */
  .prohibit-card:nth-child(1) .prohibit-stamp { transform: rotate(-2.5deg); }
  .prohibit-card:nth-child(2) .prohibit-stamp { transform: rotate(1.5deg); }
  .prohibit-card:nth-child(3) .prohibit-stamp { transform: rotate(-1deg);  }
  .prohibit-card:nth-child(4) .prohibit-stamp { transform: rotate(2.5deg); }
  .prohibit-card:nth-child(5) .prohibit-stamp { transform: rotate(-3deg);  }
  .prohibit-card:nth-child(6) .prohibit-stamp { transform: rotate(0.5deg); }
  .prohibit-card:nth-child(7) .prohibit-stamp { transform: rotate(-1.5deg);}
  .prohibit-card:nth-child(8) .prohibit-stamp { transform: rotate(2deg);   }
  /* On narrow screens (single-column stack), zero out per-card stamp
     rotation — small viewport widths exaggerate angled elements and
     start to read as misalignment rather than character. */
  @media (max-width: 480px) {
    .prohibit-card:nth-child(n) .prohibit-stamp { transform: rotate(0deg); }
  }


  .prohibit-card h3 {
    font-family: var(--display);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--danger);
    margin: 0 0 14px;
    /* Strikethrough — the visual signal that this ingredient is forbidden */
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(255,82,82,.6);
    line-height: 1.1;
  }
  .prohibit-card p {
    font-size: 13px;
    line-height: 1.6;
    color: #a5a59c;
    margin: 0 0 24px;
    flex: 1;
  }
  .prohibit-action {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--volt);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
  }
  .prohibit-action .arr {
    transition: transform .25s ease;
  }
  .prohibit-card:hover .prohibit-action .arr { transform: translateX(4px); }

  @media (max-width: 760px) {
    .prohibit { padding: 100px 0; }
    .prohibit-meta { font-size: 10px; }
    .prohibit-intro { margin-bottom: 48px; }
    .prohibit-intro:has(+ .prohibit-intro) { margin-bottom: 14px; }
  }


  /* ═════════ MOBILE PASS ════════════════════════════════════════════
     Tightens up the existing layout for narrow viewports — the desktop
     pixel values (section padding, tin translates, form widths) were
     too generous on phones. */

  @media (max-width: 760px) {
    /* Reduce section padding everywhere — 140px is too heavy on phones */
    .problem, .how, .lineup, .perks, .founder, .faq { padding: 90px 0; }
    .prohibit { padding: 90px 0; }
    .feel-timeline { padding: 90px 0; }
    .final { padding: 110px 0 90px; }

    /* Tighten the hero on mobile so the form lands above the fold sooner */
    .hero { padding: 56px 0 72px; }
    .wrap { padding: 0 20px; }
    .hero-grid { gap: 40px; }
    .hero-visual { }

    /* Resize floating tins so they fit narrow viewports without clipping */
    .tin { width: 210px; }
    .tin.recover  {
      transform: translate(-50px, 120px) rotate(-3deg);
      animation: float-3m 8s ease-in-out infinite;
    }
    .tin.pump     {
      transform: translate(100px, 20px) rotate(6deg);
      animation: float-2m 7s ease-in-out infinite;
    }
    .tin.energy   {
      transform: translate(-95px, -55px) rotate(-8deg);
      animation: float-1m 6s ease-in-out infinite;
    }
    /* Backdrop glows match the resized tin positions */
    .tin-bg { width: 200px; height: 200px; filter: blur(5px); }
    .tin-bg.recover { transform: translate(-50px, 120px) rotate(-3deg); animation: float-3m 8s ease-in-out infinite; }
    .tin-bg.pump    { transform: translate(100px, 20px) rotate(6deg);  animation: float-2m 7s ease-in-out infinite; }
    .tin-bg.energy  { transform: translate(-95px, -55px) rotate(-8deg); animation: float-1m 6s ease-in-out infinite; }
    /* Mobile-only float keyframes — match new translate values */
    @keyframes float-1m {
      0%,100% { transform: translate(-95px, -55px) rotate(-8deg); }
      50%     { transform: translate(-95px, -69px) rotate(-8deg); }
    }
    @keyframes float-2m {
      0%,100% { transform: translate(100px, 20px) rotate(6deg); }
      50%     { transform: translate(100px,  6px) rotate(6deg); }
    }
    @keyframes float-3m {
      0%,100% { transform: translate(-50px, 120px) rotate(-3deg); }
      50%     { transform: translate(-50px, 106px) rotate(-3deg); }
    }

    /* Slightly smaller hero headline on mobile */
    h1.hero-title { font-size: clamp(44px, 11vw, 64px); }

    /* Live pill wraps better at narrow widths */
    .live-pill {
      flex-wrap: wrap;
      max-width: 100%;
      padding: 9px 14px;
      gap: 8px;
    }
    .live-pill .sep { display: none; }
  }

  @media (max-width: 480px) {
    .wrap { padding: 0 16px; }
    /* Tighten the SMS form so it doesn't push button text off-screen */
    .email-form input { padding: 16px 12px; font-size: 13px; }
    .email-form button { padding: 0 16px; font-size: 11px; }
    .email-form .phone-prefix { padding: 0 10px 0 12px; font-size: 13px; }
    /* Disclaimer breaks long strings cleanly */
    .form-disclaimer { font-size: 9px; letter-spacing: .08em; }
    /* Position box on final CTA — let it wrap */
    .position-box { padding: 14px 18px; font-size: 11px; letter-spacing: .1em; }
  }

  /* ═════════ MOBILE STICKY BOTTOM CTA ═════════
     Fixed bottom button on mobile that stays visible while scrolling, except
     when the hero form is in view (controlled by the .hidden class via JS). */
  .mobile-sticky-cta {
    display: none;     /* hidden on desktop */
  }
  @media (max-width: 760px) {
    .mobile-sticky-cta {
      display: flex;
      position: fixed;
      bottom: 14px;
      left: 14px;
      right: 14px;
      z-index: 100;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px 24px;
      background: var(--volt);
      color: #000;
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      text-decoration: none;
      border: 1px solid var(--volt);
      border-radius: 6px;
      box-shadow: 0 10px 30px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4);
      transition: opacity .25s ease, transform .25s ease;
    }
    .mobile-sticky-cta.hidden {
      opacity: 0;
      pointer-events: none;
      transform: translateY(20px);
    }
  }

  /* ═════════ FOUNDER PROGRESS BAR ═════════
     Below the hero form: shows "X / 1,000 Volt Passes Claimed" with an
     animated fill bar. Replaces the old activity-counter pill + trust row. */
  .founder-progress {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
  }
  .fp-stats {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .fp-claimed-num {
    font-family: var(--display);
    font-weight: 900;
    font-size: 26px;
    color: var(--volt);
    letter-spacing: -.01em;
    line-height: 1;
  }
  .fp-claimed-num .fp-total {
    color: var(--muted);
    font-weight: 700;
  }
  .fp-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--text);
    text-transform: uppercase;
  }
  /* Header label sitting above the stats line in the hero progress bar */
  .fp-header {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--text);
    text-transform: uppercase;
    margin: 0 0 10px;
  }
  /* Loading state — applied while live count is being fetched. Slightly
     mutes the numeric + bar but keeps layout intact so the hero never
     looks broken. The header and supporting line stay at full opacity. */
  .founder-progress.is-loading .fp-claimed-num,
  .founder-progress.is-loading .fp-bar { opacity: .55; }
  .founder-progress.is-loading .fp-bar-fill { transition: none; }
  .fp-bar {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
  }
  .fp-bar-fill {
    height: 100%;
    /* Tri-color fill mirrors THE SYSTEM track's lime → orange → peach
       hand-off. Three reasons this works here specifically:
       (a) the fill is a *progress* element — its left-to-right motion
           thematically rhymes with the Before/During/After arc
       (b) the same .fp-bar-fill component appears in the hero, the
           Founder Pass section, and the Final CTA — coloring it once
           plants the motif at three natural points down the page
       (c) the colors carry brand meaning (three SKUs), so using them
           here reinforces the system rather than acting as decoration.
       Box-shadow softened from pure lime to a neutral warm glow so the
       orange/peach portions of the bar don't fight a lime-only halo. */
    background: linear-gradient(
      90deg,
      var(--volt)    0%,
      var(--volt)    30%,
      var(--pump)    55%,
      var(--recover) 85%,
      var(--recover) 100%
    );
    border-radius: 3px;
    box-shadow:
      0 0 14px rgba(200, 255, 61, .28),
      0 0 22px rgba(255, 107, 26, .14);
    transition: width 1.6s cubic-bezier(.4, 0, .2, 1);
  }
  .fp-note {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
  }
  @media (max-width: 480px) {
    .fp-claimed-num { font-size: 22px; }
    .fp-label { font-size: 9px; letter-spacing: .18em; }
  }

  /* Final-CTA variant of the progress component — centered, max-width */
  .founder-progress.final-progress {
    max-width: 540px;
    margin: 28px auto 0;
    padding-top: 22px;
    border-top: 1px solid var(--border);
  }
  .founder-progress.final-progress .fp-stats {
    justify-content: center;
  }
  .founder-progress.final-progress .fp-note {
    text-align: center;
  }


  /* ═════════ "WHAT HAPPENS WHEN YOU JOIN" 3-STEP STRIP ═════════
     Three numbered steps explaining the post-signup journey. Sits between
     the hero and the problem section as a "low-friction reassurance" beat. */
  .join-flow {
    padding: 90px 0;
    border-top: 1px solid var(--border);
    background: var(--bg-2);
  }
  .jf-header {
    text-align: center;
    margin-bottom: 48px;
  }
  .jf-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .25em;
    color: var(--volt);
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .jf-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1;
    letter-spacing: -.015em;
    text-transform: uppercase;
    margin: 0;
  }
  .jf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
  }
  @media (max-width: 760px) { .jf-grid { grid-template-columns: 1fr; } }
  .jf-step {
    background: var(--bg);
    padding: 36px 32px;
    transition: background .25s ease;
  }
  .jf-step:hover { background: #0c0c0c; }
  .jf-num {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--volt);
    margin-bottom: 16px;
  }
  .jf-step h3 {
    font-family: var(--display);
    font-weight: 800;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: .005em;
    margin: 0 0 10px;
    color: var(--text);
  }
  .jf-step p {
    font-size: 14.5px;
    line-height: 1.55;
    color: #b0b0a8;
    margin: 0;
  }

  /* ═════════ POST-PROBLEM CTA STRIP ═════════
     Small inline CTA between the problem section and how-it-works —
     a "low-pressure" return path to the form for users who get the joke. */
  .problem-cta {
    text-align: center;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--border-hi);
  }
  .problem-cta-line {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(18px, 2.5vw, 22px);
    color: var(--text);
    margin-bottom: 20px;
  }
  .problem-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    background: transparent;
    color: var(--volt);
    border: 1px solid var(--volt);
    text-decoration: none;
    transition: all .25s ease;
    cursor: pointer;
  }
  .problem-cta-btn:hover {
    background: var(--volt);
    color: #000;
    transform: translateY(-2px);
  }
  .problem-cta-btn .arr { transition: transform .25s ease; }
  .problem-cta-btn:hover .arr { transform: translateX(4px); }

  /* Comparison-table footnote */
  .stack-footnote {
    margin-top: 18px;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: .08em;
    color: var(--muted);
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }


  /* Footer FDA / wellness disclaimer block */
  .foot-disclaimer {
    margin: 32px 0 24px;
    padding: 22px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    line-height: 1.7;
    color: var(--muted);
    max-width: 920px;
  }


  /* ═════════ TRUST STRIP — FOUR-COLUMN CREDIBILITY BAND ═════════
     Sits directly below the hero. Matter-of-fact, non-promotional —
     four parallel signals (manufacturing / formulation / team / momentum)
     in a quiet horizontal band. Scannable in 2-3 seconds. */
  .trust-strip {
    background: var(--bg);
    border-top: 1px solid rgba(200, 255, 61, .15);
    padding: 14px 48px 28px;
    position: relative;
    z-index: 2;
  }
  .trust-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: var(--maxw);
    margin: 0 auto;
  }
  .trust-col {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 6px 24px;
    border-right: 1px solid rgba(200, 255, 61, .15);
  }
  .trust-col:first-child { padding-left: 0; }
  .trust-col:last-child  { padding-right: 0; border-right: none; }
  .trust-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: var(--volt);
    margin-top: 1px;
  }
  .trust-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .trust-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .trust-label {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.2;
  }
  .trust-descriptor {
    font-family: var(--body);
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.45;
  }
  /* Mobile: 2x2 grid below 768px. Internal cross-shaped dividers. */
  @media (max-width: 768px) {
    .trust-strip {
      padding: 12px 20px 22px;
    }
    .trust-strip-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .trust-col {
      padding: 14px 14px;
      border-right: 1px solid rgba(200, 255, 61, .15);
      border-bottom: 1px solid rgba(200, 255, 61, .15);
    }
    .trust-col:first-child { padding-left: 14px; }
    .trust-col:last-child  { padding-right: 14px; }
    /* Right column (cols 2, 4) — no right border */
    .trust-col:nth-child(2n) { border-right: none; }
    /* Bottom row (cols 3, 4) — no bottom border */
    .trust-col:nth-child(n+3) { border-bottom: none; }
    .trust-icon { width: 24px; height: 24px; }
    .trust-label { font-size: 12px; letter-spacing: .12em; }
    .trust-descriptor { font-size: 11px; }
  }

  /* ═════════ SCIENCE SECTION — RESEARCH-BACKED TRUST PLAY ═════════
     Four cards in a 2x2 grid (or 4 cols on widescreen). Each has a custom
     SVG icon + headline + body + footer line. Sits between the comparison
     table and the founder offer. */
  .science {
    padding: 130px 0;
    border-top: 1px solid var(--border);
  }
  .sci-header {
    text-align: center;
    margin-bottom: 56px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  .sci-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .25em;
    color: var(--volt);
    text-transform: uppercase;
    margin-bottom: 22px;
  }
  .sci-title {
    font-family: var(--display);
    font-weight: 900;
    /* Cap reduced from 64px → 48px so "Not built on marketing claims."
       (30 chars at Big Shoulders 900) fits on one line within the
       760px sci-header container at typical desktop widths. */
    font-size: clamp(32px, 4.6vw, 48px);
    line-height: .98;
    letter-spacing: -.018em;
    text-transform: uppercase;
    margin: 0 0 22px;
  }
  .sci-title em {
    color: var(--volt);
    font-style: normal;
  }
  .sci-intro {
    font-size: 16px;
    line-height: 1.55;
    color: #b5b5ad;
    max-width: 600px;
    margin: 0 auto;
  }

  .sci-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
  }
  @media (min-width: 1100px) { .sci-grid { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 600px)  { .sci-grid { grid-template-columns: 1fr; } }

  .sci-card {
    background: var(--bg);
    padding: 36px 32px;
    transition: background .3s ease;
  }
  .sci-card:hover {
    background: #0c0c0c;
  }
  .sci-icon {
    width: 36px;
    height: 36px;
    color: var(--volt);
    margin-bottom: 22px;
    filter: drop-shadow(0 0 12px rgba(200,255,61,.25));
  }
  .sci-card h3 {
    font-family: var(--display);
    font-weight: 800;
    font-size: 19px;
    line-height: 1.1;
    letter-spacing: .015em;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: var(--text);
  }
  .sci-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #aeaea4;
    margin: 0 0 22px;
  }
  .sci-cta {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--volt);
    text-transform: uppercase;
    line-height: 1.4;
  }

  @media (max-width: 760px) {
    .science { padding: 90px 0; }
    .sci-header { margin-bottom: 40px; }
  }


  /* "Once founder access closes" microline — sits above the legal disclaimer
     in the final CTA. Loud enough to register as a deadline, not so loud that
     it competes with the form. */
  .form-microline {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--volt);
    text-transform: uppercase;
  }


  /* ═════════════════════════════════════════════════════════════════
     SOFTER, MORE ORGANIC SECTION TRANSITIONS
     Replaces hard 1px borders between sections with layered gradient
     "shelves," radial glow accents at strategic narrative beats, and
     one angled separator. Keeps the strong content hierarchy intact
     while making the page feel less like stacked rectangles.
     ═════════════════════════════════════════════════════════════════ */

  /* 1. Tighten the contrast between bg and bg-2 — less obvious banding
     between alternating sections, so each section is differentiated by
     content rather than by background swap. */
  :root {
    --bg-2: #070707;        /* was #0a0a0a */
  }

  /* 2. Remove all the hard 1px borders that were creating the boxy feel.
     Sections will now separate via gradient shelves and color depth. */
  .how, .problem, .lineup, .prohibit, .stack,
  .science, .perks, .founder, .faq, .final, .feel-timeline {
    border-top: none;
  }
  .founder-strip {
    /* The strip keeps a *soft* separation — gradient instead of hard borders */
    border-top: none;
    border-bottom: none;
    background:
      linear-gradient(180deg,
        rgba(7,7,7,.0) 0%,
        rgba(10,10,10,.55) 30%,
        rgba(10,10,10,.55) 70%,
        rgba(7,7,7,.0) 100%);
  }

  /* 3. Universal soft top-shelf shadow on every major section.
     A 90px gradient that fades from 60%-darkness to transparent.
     Reads as a soft inner-shadow casting down from "above" — creates
     depth and section separation without a single hard line anywhere. */
  .how, .problem, .lineup, .prohibit, .stack,
  .science, .perks, .founder, .faq, .final {
    position: relative;
  }
  .how::before, .problem::before, .lineup::before, .prohibit::before,
  .stack::before, .science::before, .perks::before, .founder::before,
  .faq::before, .final::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.65) 0%,
      rgba(0,0,0,.18) 50%,
      rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* 4. Make sure the content wrappers float above the pseudo-element layers */
  .how > .wrap, .problem > .wrap, .lineup > .wrap, .prohibit > .wrap,
  .stack > .wrap, .science > .wrap, .perks > .wrap,
  .founder > .wrap, .faq > .wrap, .final > .wrap {
    position: relative;
    z-index: 2;
  }

  /* 5. TARGETED RADIAL GLOW ACCENTS — four sections only.
     The Lineup, Science, and Final-CTA sections get top/bottom-anchored
     volt-green ellipses for visual lift. The Prohibition section gets a
     muted off-screen red glow as a "danger" cue. */


  /* Science: same family of glow, slightly tighter, anchored top-center.
     Reinforces the "research / credibility" beat. */
  .science::after {
    content: '';
    position: absolute;
    top: 60px;
    left: 50%;
    width: 80%;
    max-width: 900px;
    height: 320px;
    transform: translateX(-50%);
    background: radial-gradient(
      ellipse 50% 100% at 50% 0%,
      rgba(200,255,61,.045),
      transparent 65%);
    pointer-events: none;
    z-index: 0;
  }

  /* Prohibition: a muted off-screen red glow on the left side,
     subliminally cueing "danger / things to avoid." Subtle enough that
     it reads as atmosphere, not decoration. */
  .prohibit::after {
    content: '';
    position: absolute;
    top: 100px;
    left: -240px;
    width: 600px;
    height: 600px;
    background: radial-gradient(
      circle,
      rgba(255,82,82,.028),
      transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  /* Final CTA: bottom-anchored volt glow that intensifies into the close.
     The strongest accent on the page — visually signals "this is the moment." */
  .final::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 1200px;
    height: 520px;
    transform: translateX(-50%);
    background: radial-gradient(
      ellipse 55% 100% at 50% 100%,
      rgba(200,255,61,.07),
      transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  /* 6. ONE ANGLED SEPARATOR.
     Science section enters with a subtle 1.5º tilt at its top edge —
     used here once, deliberately, to mark the narrative shift from
     "competition / comparison" beat into "credibility / research" beat.
     Disabled on mobile because clip-path + tall sections + small viewport
     can create awkward visual gaps. */
  @media (min-width: 760px) {
    .science {
      clip-path: polygon(0 36px, 100% 0, 100% 100%, 0 100%);
      margin-top: -24px;
      padding-top: calc(130px + 36px);
    }
  }

  /* 7. Hero gets a subtle layered background gradient — extends the
     volt-green tint down from the top-left, blending into the floating
     tin glows that already exist there. */
  .hero {
    background:
      radial-gradient(ellipse 60% 50% at 25% 20%, rgba(200,255,61,.03), transparent 65%),
      radial-gradient(ellipse 50% 60% at 80% 80%, rgba(255,255,255,.012), transparent 60%),
      var(--bg);
  }

  /* 8. Soften the prohibition GRID's hard 1px-line dividers.
     The grid currently uses gap:1px + bg:--border to create hard cell
     separators — swap to a soft gradient border via background. */
  .prohibit-grid {
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  }

  /* ═════════ PREMIUM CENTERED CTA BLOCK (Banned-list closer) ═════════════
     Replaces the left-aligned "Eight things we refuse..." line + button
     with a centered, editorial finishing block: ornamental rule, eyebrow,
     condensed headline, supporting copy, primary button, and trust strip. */
  .prohibit-cta {
    margin-top: 88px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  /* Ornamental rule with center dot */
  .pcta-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(440px, 80%);
    margin-bottom: 28px;
  }
  .pcta-rule > span:not(.pcta-rule-dot) {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(200,255,61,.35) 50%,
      transparent 100%);
  }
  .pcta-rule-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 10px rgba(200,255,61,.7);
  }
  .pcta-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .32em;
    color: var(--volt);
    margin-bottom: 22px;
    text-transform: uppercase;
  }
  .pcta-headline {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(34px, 4.8vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 18px;
    text-transform: uppercase;
    max-width: 18ch;
  }
  .pcta-sub {
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
    max-width: 560px;
    margin: 0 0 36px;
    text-wrap: pretty;
  }
  /* Premium primary button — volt fill, condensed display, dual-line */
  .pcta-button {
    appearance: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 56px;
    background: var(--volt);
    color: #0a0a0a;
    border-radius: 999px;
    box-shadow:
      0 0 0 1px rgba(200,255,61,.45),
      0 0 0 8px rgba(200,255,61,.10),
      0 18px 40px -12px rgba(200,255,61,.45),
      0 30px 80px -20px rgba(200,255,61,.25);
    transition: transform .25s ease, box-shadow .35s ease, background .25s ease;
    position: relative;
    overflow: hidden;
  }
  .pcta-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
      transparent 30%,
      rgba(255,255,255,.55) 50%,
      transparent 70%);
    transform: translateX(-120%);
    transition: transform .9s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
  }
  .pcta-button:hover {
    transform: translateY(-2px);
    background: #d6ff52;
    box-shadow:
      0 0 0 1px rgba(200,255,61,.7),
      0 0 0 10px rgba(200,255,61,.14),
      0 22px 50px -12px rgba(200,255,61,.6),
      0 36px 90px -20px rgba(200,255,61,.35);
  }
  .pcta-button:hover::before { transform: translateX(120%); }
  .pcta-button:active { transform: translateY(0); }
  .pcta-button-main {
    font-family: var(--display);
    font-weight: 900;
    font-size: 19px;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    line-height: 1;
  }
  .pcta-button-main .arr {
    transition: transform .25s ease;
    font-weight: 700;
  }
  .pcta-button:hover .pcta-button-main .arr { transform: translateX(6px); }
  .pcta-button-sub {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .22em;
    color: rgba(10,10,10,.7);
    text-transform: uppercase;
  }
  /* Trust strip below the button */
  .pcta-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
  }
  .pcta-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .pcta-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 6px rgba(200,255,61,.6);
  }
  .pcta-trust-divider {
    width: 4px;
    height: 4px;
    background: rgba(255,255,255,.18);
    transform: rotate(45deg);
  }
  @media (max-width: 760px) {
    .prohibit-cta { margin-top: 56px; }
    .pcta-button { padding: 18px 32px; width: 100%; max-width: 420px; }
    .pcta-button-main { font-size: 16px; }
    .pcta-trust { gap: 10px; }
    .pcta-trust-divider { display: none; }
    .pcta-trust-item { font-size: 10px; flex-basis: 100%; justify-content: center; }
  }

  /* Same softening for the science grid */
  .sci-grid {
    background:
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  }

  /* 9. Mobile pass: the angled separator + heavy gradients can overlap
     awkwardly on small screens. Reduce the shelf height + softness. */
  @media (max-width: 760px) {
    .how::before, .problem::before, .lineup::before, .prohibit::before,
    .stack::before, .science::before, .perks::before, .founder::before,
    .faq::before, .final::before {
      height: 60px;
    }
    .lineup::after, .science::after, .final::after {
      height: 240px;
    }
    .prohibit::after { display: none; }
  }


  /* ═════════ ORGANIC SECTION TRANSITIONS & LAYERED DEPTH ═════════════════
     The hard 1px borders between sections were creating a "stacked rectangles"
     feel. This block:
       1) Strips the hard borders entirely.
       2) Replaces each section join with a soft centered gradient line that
          fades to transparent at the edges (no edge-to-edge cuts).
       3) Adds radial glows bleeding into the top of each section so the
          transitions feel atmospheric rather than mechanical.
       4) Layers in subtle dark-on-dark gradients for depth on the key
          sections (hero, perks, science, final).
       5) Adds a single angled separator inserted as a standalone element
          between the Comparison and Science sections — used sparingly so
          it reads as intentional punctuation, not visual noise.
     All effects sit at very low opacity to preserve readability + hierarchy. */

  /* 1) Strip hard borders from all major section transitions */
  .how,
  .problem,
  .lineup,
  .prohibit,
  .stack,
  .science,
  .perks,
  .founder,
  .faq,
  .final,
  .founder-strip {
    border-top: none !important;
    border-bottom: none !important;
  }

  /* 2) Position context + content z-index for the pseudo-element seams */
  .how,
  .problem,
  .lineup,
  .prohibit,
  .stack,
  .science,
  .perks,
  .founder,
  .faq,
  .final {
    position: relative;
  }
  .how > .wrap,
  .problem > .wrap,
  .lineup > .wrap,
  .prohibit > .wrap,
  .stack > .wrap,
  .science > .wrap,
  .perks > .wrap,
  .founder > .wrap,
  .faq > .wrap,
  .final > .wrap {
    position: relative;
    z-index: 3;
  }

  /* 3) Soft centered separator line at top of each section.
        Fades at the left/right edges so it doesn't cut a hard line across the page. */
  .how::before,
  .problem::before,
  .lineup::before,
  .prohibit::before,
  .stack::before,
  .science::before,
  .perks::before,
  .founder::before,
  .faq::before,
  .final::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    max-width: 760px;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.04) 18%,
      rgba(200,255,61,.22) 50%,
      rgba(255,255,255,.04) 82%,
      transparent 100%);
    pointer-events: none;
    z-index: 4;
  }

  /* 4) Radial top-glow on every section — bleeds atmospheric color DOWN
        from the section join. Applied via background-image so existing
        background-color values are preserved. */
  .how,
  .problem,
  .lineup,
  .prohibit,
  .stack,
  .science,
  .perks,
  .founder,
  .faq,
  .final {
    background-image:
      radial-gradient(ellipse 50% 220px at 50% 0%, rgba(200,255,61,.022), transparent 80%);
    background-repeat: no-repeat;
  }

  /* 5) Layered depth gradients for key sections — each blends a color
        cue that matches the section's role */


  /* Prohibition: subtle red bleed at top to echo the danger color */
  .prohibit {
    background-color: var(--bg-2);
    background-image:
      radial-gradient(ellipse 50% 220px at 50% 0%, rgba(255,82,82,.025), transparent 80%),
      radial-gradient(ellipse 70% 30% at 50% 100%, rgba(200,255,61,.012), transparent 80%);
    background-repeat: no-repeat;
  }

  /* Stack/Compare: cleaner background, no warm tints */
  .stack {
    background-image:
      radial-gradient(ellipse 50% 280px at 50% 0%, rgba(200,255,61,.03), transparent 80%);
    background-repeat: no-repeat;
  }

  /* Science: stronger green glow because this is a "trust" peak */
  .science {
    background-image:
      radial-gradient(ellipse 60% 320px at 50% 0%, rgba(200,255,61,.038), transparent 80%),
      radial-gradient(circle at 100% 50%, rgba(200,255,61,.018), transparent 50%);
    background-repeat: no-repeat;
  }

  /* Perks: brightest green glow because the offer should feel alive */
  .perks {
    background-image:
      radial-gradient(ellipse 60% 300px at 50% 0%, rgba(200,255,61,.045), transparent 80%);
    background-repeat: no-repeat;
  }

  /* FAQ: kept calm */
  .faq {
    background-color: var(--bg-2);
    background-image:
      radial-gradient(ellipse 50% 220px at 50% 0%, rgba(200,255,61,.022), transparent 80%);
    background-repeat: no-repeat;
  }

  /* Final CTA: massive central radial — this is the conversion endpoint */
  .final {
    background-image:
      radial-gradient(ellipse 80% 70% at 50% 50%, rgba(200,255,61,.06), transparent 70%),
      radial-gradient(ellipse 100% 50% at 50% 100%, rgba(200,255,61,.04), transparent 80%);
    background-repeat: no-repeat;
  }

  /* Founder strip: keep the subtle horizontal glow */
  .founder-strip {
    background-color: var(--bg-2);
    background-image:
      radial-gradient(ellipse 70% 100% at 50% 50%, rgba(200,255,61,.028), transparent 70%);
    background-repeat: no-repeat;
  }

  /* 6) Hero gets enhanced layered atmospheric depth — two radial sources,
        one volt-green from the upper right, one warm from the lower left */
  .hero {
    background-image:
      radial-gradient(circle at 85% 25%, rgba(200,255,61,.045), transparent 45%),
      radial-gradient(circle at 12% 85%, rgba(255,107,26,.018), transparent 50%);
    background-repeat: no-repeat;
  }

  /* 7) Angled separator — one strategic diagonal between Stack and Science.
        A 56px tall element that diagonally splits between two background colors,
        with a subtle volt-green line tracing the diagonal. */
  .angled-divider {
    position: relative;
    height: 64px;
    margin: 0;
    background: var(--bg);
    overflow: hidden;
    border: none;
  }
  /* The diagonal cut: bottom-left half is darker (matches Stack's bg),
     top-right half is the bg below it (Science) */
  .angled-divider::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, var(--bg-2) 49.7%, transparent 50%);
  }
  /* The diagonal accent line, with a soft glow */
  .angled-divider::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 1px;
    background: linear-gradient(to right,
      transparent 35%,
      rgba(255,255,255,.04) 45%,
      rgba(200,255,61,.35) 50%,
      rgba(255,255,255,.04) 55%,
      transparent 65%);
    transform-origin: 0 0;
    transform: rotate(-1.31deg);   /* matches a 64px / 2800px diagonal slope */
    box-shadow: 0 0 12px rgba(200,255,61,.18);
  }
  @media (max-width: 760px) {
    .angled-divider { height: 40px; }
    .angled-divider::after {
      transform: rotate(-2.05deg);
    }
  }


  /* ═════════ SEAM GLOWS BETWEEN SECTIONS ═════════════════════════════
     Soft radial glows positioned exactly at the seam between two sections,
     extending equally into both so neither section "owns" the glow — it
     lives in the transition itself. Alternating left/right placement creates
     visual rhythm. The element itself takes no vertical space (height: 0);
     only its blurred pseudo-element renders. */
  .seam-glow {
    position: relative;
    height: 0;
    pointer-events: none;
    z-index: 2;     /* sits below content (z:3) so the glow is ambient, not on top */
  }
  .seam-glow::before {
    content: '';
    position: absolute;
    top: -200px;            /* pseudo extends 200px UP into the section above */
    height: 400px;          /*               and 200px DOWN into the one below */
    width: 480px;
    pointer-events: none;
    filter: blur(40px);
    background: radial-gradient(ellipse at center,
      rgba(200,255,61,.18) 0%,
      rgba(200,255,61,.07) 40%,
      transparent 75%);
  }
  .seam-glow.seam-left::before  { left:  -120px; }
  .seam-glow.seam-right::before { right: -120px; }

  /* Color variants — each tied to one of the three product accent colors.
     Default is volt-green (no modifier needed). */
  .seam-glow.warm::before {
    background: radial-gradient(ellipse at center,
      rgba(255,107,26,.16) 0%,
      rgba(255,107,26,.06) 40%,
      transparent 75%);
  }
  .seam-glow.coral::before {
    background: radial-gradient(ellipse at center,
      rgba(255,136,102,.16) 0%,
      rgba(255,136,102,.06) 40%,
      transparent 75%);
  }
  /* When variants are also seam-large, bump up the saturation accordingly */
  .seam-glow.warm.seam-large::before {
    background: radial-gradient(ellipse at center,
      rgba(255,107,26,.22) 0%,
      rgba(255,107,26,.08) 40%,
      transparent 75%);
  }
  .seam-glow.coral.seam-large::before {
    background: radial-gradient(ellipse at center,
      rgba(255,136,102,.22) 0%,
      rgba(255,136,102,.08) 40%,
      transparent 75%);
  }

  /* Larger variant for major narrative transitions (e.g. into the offer + final CTA) */
  .seam-glow.seam-large::before {
    width: 640px;
    height: 560px;
    top: -280px;
    background: radial-gradient(ellipse at center,
      rgba(200,255,61,.22) 0%,
      rgba(200,255,61,.09) 40%,
      transparent 75%);
  }

  /* Tighter variant — less dominant, more atmospheric */
  .seam-glow.seam-tight::before {
    width: 380px;
    height: 320px;
    top: -160px;
    filter: blur(35px);
    background: radial-gradient(ellipse at center,
      rgba(200,255,61,.14) 0%,
      rgba(200,255,61,.05) 40%,
      transparent 75%);
  }

  @media (max-width: 760px) {
    .seam-glow::before {
      width: 320px;
      height: 280px;
      top: -140px;
      filter: blur(30px);
    }
    .seam-glow.seam-large::before {
      width: 420px;
      height: 380px;
      top: -190px;
    }
    .seam-glow.seam-tight::before {
      width: 240px;
      height: 220px;
      top: -110px;
    }
    .seam-glow.seam-left::before  { left:  -80px; }
    .seam-glow.seam-right::before { right: -80px; }
  }


  /* ═════════ FOUNDER KIT REVEAL SECTION ═════════════════════════════════
     Two-column conversion section: copy + CTA on the left, blurred-locked
     Founder Pack image on the right. Submitting any phone form on the page
     adds .unlocked to the section, swapping the visual to its revealed state. */
  .founder-kit {
    padding: 130px 0;
    position: relative;
  }
  .fk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  @media (max-width: 920px) { .fk-grid { grid-template-columns: 1fr; gap: 48px; } }

  /* COPY COLUMN */
  .fk-eyebrow {
    font-family: var(--mono);
    font-size: 11px; font-weight: 500; letter-spacing: .25em;
    color: var(--volt); text-transform: uppercase;
    margin-bottom: 22px;
  }
  .fk-title {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(36px, 5vw, 64px); line-height: .92;
    letter-spacing: -.018em; text-transform: uppercase;
    margin: 0 0 22px; color: var(--text);
  }
  .fk-title em { color: var(--volt); font-style: normal; }
  .fk-sub {
    font-size: 16px; line-height: 1.55; color: #b5b5ad;
    margin: 0 0 32px; max-width: 480px;
  }
  .fk-cta {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 28px;
    font-family: var(--mono); font-size: 13px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    background: var(--volt); color: #000;
    border: 1px solid var(--volt); text-decoration: none;
    transition: all .25s ease; cursor: pointer; margin-bottom: 16px;
  }
  .fk-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(200,255,61,.55); }
  .fk-cta .arr { transition: transform .25s ease; }
  .fk-cta:hover .arr { transform: translateX(4px); }
  .fk-microcopy { margin: 0 0 14px; font-size: 12px; line-height: 1.55; color: var(--muted); max-width: 440px; }
  .fk-scarcity {
    font-family: var(--mono); font-size: 11px; font-weight: 700;
    letter-spacing: .18em; color: var(--volt); text-transform: uppercase;
  }
  .fk-scarcity .num { color: var(--text); }

  /* VISUAL COLUMN */
  .fk-visual {
    position: relative; width: 100%; max-width: 540px;
    aspect-ratio: 1 / 1; margin-left: auto;
    background: var(--bg);
    border: 1px solid var(--border); overflow: hidden;
  }
  @media (max-width: 920px) { .fk-visual { margin: 0 auto; } }
  .fk-visual::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% 65%, rgba(200,255,61,.10), transparent 70%);
    pointer-events: none; z-index: 0;
  }
  .fk-box-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; object-position: center center;
    z-index: 1;
    transition: filter .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1), opacity .8s ease;
  }
  .fk-overlay {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: transparent;
    transition: opacity .8s ease;
  }
  .fk-locked-badge {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 26px 30px;
    border: 1px solid var(--volt); background: rgba(0,0,0,.7);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 36px rgba(200,255,61,.22);
    transition: opacity .5s ease, transform .5s ease;
    text-align: center;
  }
  .fk-lock-icon {
    width: 32px; height: 32px; color: var(--volt);
    filter: drop-shadow(0 0 8px rgba(200,255,61,.45));
  }
  .fk-lock-headline {
    font-family: var(--display); font-weight: 900;
    font-size: 19px; letter-spacing: .04em; color: var(--volt);
    text-transform: uppercase; margin: 0; line-height: 1;
  }
  .fk-lock-sub {
    font-family: var(--mono); font-size: 10px; font-weight: 500;
    letter-spacing: .2em; color: var(--muted); text-transform: uppercase; margin: 0;
  }
  .fk-corner-stamp {
    position: absolute; top: 16px; right: 16px; z-index: 3;
    padding: 6px 10px;
    font-family: var(--mono); font-size: 9px; font-weight: 700;
    letter-spacing: .25em; color: var(--volt);
    border: 1px solid var(--volt); background: rgba(0,0,0,.55);
    text-transform: uppercase; transition: opacity .4s ease;
  }
  /* UNLOCKED state */
  .founder-kit.unlocked .fk-box-img {
    filter: blur(0) brightness(1) saturate(1); transform: scale(1);
  }
  .founder-kit.unlocked .fk-overlay { opacity: 0; }
  .founder-kit.unlocked .fk-locked-badge {
    opacity: 0; transform: translate(-50%, -50%) scale(.92); pointer-events: none;
  }
  .founder-kit.unlocked .fk-corner-stamp { opacity: 0; }
  .fk-unlocked-badge {
    position: absolute; bottom: 22px; left: 22px; right: 22px; z-index: 3;
    padding: 18px 22px; background: var(--volt); color: #000;
    opacity: 0; transform: translateY(12px);
    transition: opacity .6s ease .35s, transform .6s ease .35s;
    pointer-events: none;
    box-shadow: 0 10px 32px -8px rgba(200,255,61,.45);
  }
  .founder-kit.unlocked .fk-unlocked-badge { opacity: 1; transform: translateY(0); }
  .fk-unlocked-headline {
    font-family: var(--display); font-weight: 900;
    font-size: 17px; letter-spacing: .03em;
    text-transform: uppercase; margin: 0 0 4px; line-height: 1;
  }
  .fk-unlocked-sub {
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; margin: 0;
  }
  @media (max-width: 760px) {
    .founder-kit { padding: 90px 0; }
    .fk-locked-badge { padding: 20px 24px; gap: 10px; }
    .fk-lock-headline { font-size: 16px; }
    .fk-lock-icon { width: 26px; height: 26px; }
    .fk-corner-stamp { font-size: 8px; padding: 5px 8px; }
    .fk-unlocked-badge { padding: 14px 18px; bottom: 16px; left: 16px; right: 16px; }
    .fk-unlocked-headline { font-size: 15px; }
  }


  /* ═════════ VOLT WORLD SECTION ═════════════════════════════════════════
     Three "trading card" style monster cards. Each card shows the side-can
     monster art as a panoramic hero banner, with the formula identity below.
     Hover lifts the card, glows it in formula color, and reveals a small
     "Founder Art" micro-label. CTA scrolls to the hero phone form. */
  .volt-world {
    padding: 130px 0;
    position: relative;
    /* A faint top-glow to separate from the founder-kit section above */
    background-image:
      radial-gradient(ellipse 60% 35% at 50% 0%, rgba(200,255,61,.05), transparent 60%);
  }

  /* Header block */
  .vw-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 70px;
  }
  /* Dynamic "TOP SECRET" classified label — replaces the static eyebrow.
     Reads as a redacted document stamp: monospaced danger-red type
     between two stripped redaction bars, slightly rotated for a
     hand-stamped feel. Two animations layered for life:
       1. ts-pulse — slow border + glow breathing (3.2s)
       2. ts-flicker — rare CRT-style opacity flicker on the text (~6s)
     The combination reads as alive without becoming distracting. */
  .vw-classified {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 82, 82, .55);
    background: rgba(255, 82, 82, .04);
    transform: rotate(-1.2deg);
    animation: ts-pulse 3.2s ease-in-out infinite;
  }
  .vw-classified-bar {
    display: inline-block;
    width: 22px;
    height: 8px;
    background: var(--danger);
    box-shadow: 0 0 6px rgba(255, 82, 82, .6);
  }
  .vw-classified-text {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3em;
    color: var(--danger);
    text-transform: uppercase;
    animation: ts-flicker 6s linear infinite;
  }
  @keyframes ts-pulse {
    0%, 100% {
      border-color: rgba(255, 82, 82, .5);
      box-shadow: 0 0 0 0 rgba(255, 82, 82, .25);
    }
    50% {
      border-color: rgba(255, 82, 82, .9);
      box-shadow: 0 0 18px 2px rgba(255, 82, 82, .18);
    }
  }
  @keyframes ts-flicker {
    0%, 88%, 100%       { opacity: 1; }
    89%, 91%            { opacity: .25; }
    90%, 92%            { opacity: .85; }
    93%                 { opacity: .4; }
  }
  /* Honour reduced-motion: no pulsing, no flicker */
  @media (prefers-reduced-motion: reduce) {
    .vw-classified, .vw-classified-text { animation: none; }
  }

  /* Tagline below the title — secondary callout in volt-green.
     Replaces the old em-styled second-line treatment by living
     as its own element so the title can be a single, clean line. */
  .vw-tagline {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(18px, 1.9vw, 22px);
    letter-spacing: .005em;
    text-transform: uppercase;
    color: var(--volt);
    margin: 0 0 22px;
  }
  .vw-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(38px, 5.5vw, 72px);
    line-height: .95;
    letter-spacing: -.02em;
    text-transform: uppercase;
    margin: 0 0 22px;
    color: var(--text);
  }
  .vw-title em {
    color: var(--volt);
    font-style: normal;
    /* Slightly smaller for the secondary line for visual rhythm */
    font-size: .82em;
    display: inline-block;
  }
  .vw-sub {
    font-size: 16px;
    line-height: 1.6;
    color: #b5b5ad;
    margin: 0 auto;
    max-width: 600px;
  }

  /* Grid */
  .vw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 72px;
  }
  @media (max-width: 920px) { .vw-grid { grid-template-columns: 1fr; } }

  /* Card — anchor for full-card click */
  .vw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.4,0,.2,1),
                border-color .35s ease,
                box-shadow .4s ease,
                background .35s ease;
  }
  .vw-card:hover {
    transform: translateY(-6px);
    background: #0c0c0c;
  }
  /* Per-formula base border (always on) + hover glow.
     Border color matches the SKU's accent at all times. Hover layers a
     stronger glow + drop shadow on top, keeping the existing
     translateY(-6px) and background lift. */
  .vw-card[data-color="volt"]          { border-color: var(--volt);    }
  .vw-card[data-color="pump"]          { border-color: var(--pump);    }
  .vw-card[data-color="recover"]       { border-color: var(--recover); }
  .vw-card[data-color="volt"]:hover    { border-color: rgba(200,255,61,.55); box-shadow: 0 18px 60px -14px rgba(200,255,61,.32), 0 0 28px -4px rgba(200,255,61,.12); }
  .vw-card[data-color="pump"]:hover    { border-color: rgba(255,107,26,.6);  box-shadow: 0 18px 60px -14px rgba(255,107,26,.34), 0 0 28px -4px rgba(255,107,26,.14); }
  .vw-card[data-color="recover"]:hover { border-color: rgba(255,136,102,.55);box-shadow: 0 18px 60px -14px rgba(255,136,102,.32), 0 0 28px -4px rgba(255,136,102,.12); }

  /* The panoramic monster image — fills card width, fixed aspect ratio.
     All three monster band images are processed to identical 720×270
     dimensions, so we match that aspect (8/3) and use `contain` to
     show the full artwork in every card with no cropping. */
  .vw-image {
    position: relative;
    width: 100%;
    aspect-ratio: 8 / 3;          /* matches the 720×270 image canvas */
    overflow: hidden;
    background: #050505;
  }
  .vw-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;          /* no cropping — full monster visible in every card */
    object-position: center;
    display: block;
    transition: transform .55s cubic-bezier(.4,0,.2,1);
  }
  .vw-card:hover .vw-image img { transform: scale(1.06); }

  /* Subtle bottom gradient over the image so card body doesn't feel disconnected */
  .vw-image::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 35%;
    background: linear-gradient(180deg, transparent, rgba(5,5,5,.5));
    pointer-events: none;
  }

  /* Hover micro-label — small "Founder Art" tag in image top-left */
  .vw-microlabel {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 5px 9px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .25em;
    color: #fff;
    background: rgba(0,0,0,.6);
    border: 1px solid rgba(255,255,255,.18);
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .35s ease, transform .35s ease, border-color .35s ease, color .35s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .vw-card:hover .vw-microlabel { opacity: 1; transform: translateY(0); }
  .vw-card[data-color="volt"]:hover    .vw-microlabel { color: var(--volt);    border-color: rgba(200,255,61,.5); }
  .vw-card[data-color="pump"]:hover    .vw-microlabel { color: var(--pump);    border-color: rgba(255,107,26,.55); }
  .vw-card[data-color="recover"]:hover .vw-microlabel { color: var(--recover); border-color: rgba(255,136,102,.5); }

  /* Card body */
  .vw-body {
    padding: 26px 28px 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .vw-card-eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .vw-card[data-color="volt"]    .vw-card-eyebrow { color: var(--volt); }
  .vw-card[data-color="pump"]    .vw-card-eyebrow { color: var(--pump); }
  .vw-card[data-color="recover"] .vw-card-eyebrow { color: var(--recover); }

  .vw-card-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: var(--text);
  }
  /* Character profile (vibe / personality / traits) inside each monster card */
  .vw-profile {
    margin: 18px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255,255,255,.08);
    display: grid;
    grid-template-columns: 86px 1fr;
    column-gap: 14px;
    row-gap: 8px;
    font-size: 12px;
    line-height: 1.5;
  }
  .vw-profile dt {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #93938c;
    margin: 0;
    align-self: start;
    padding-top: 1px;
  }
  .vw-profile dd {
    margin: 0;
    color: #d6d6cc;
  }
  .vw-card[data-color="volt"]    .vw-profile dt { color: var(--volt); }
  .vw-card[data-color="pump"]    .vw-profile dt { color: var(--pump); }
  .vw-card[data-color="recover"] .vw-profile dt { color: var(--recover); }

  .vw-card-desc {
    font-size: 14px;
    line-height: 1.55;    color: var(--muted);
    margin: 0;
  }

  /* Footer block: supporting copy + CTA + microcopy */
  .vw-footer {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
  }
  /* Ornamental rule + dot */
  .vw-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(440px, 80%);
    margin-bottom: 28px;
  }
  .vw-rule > span:not(.vw-rule-dot) {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(200,255,61,.35) 50%,
      transparent 100%);
  }
  .vw-rule-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 10px rgba(200,255,61,.7);
  }
  .vw-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .32em;
    color: var(--volt);
    margin-bottom: 22px;
    text-transform: uppercase;
  }
  .vw-headline {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(34px, 4.8vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 18px;
    text-transform: uppercase;
    max-width: 18ch;
  }
  .vw-supporting {
    font-size: 15px;
    line-height: 1.7;
    color: #b5b5ad;
    margin: 0 0 28px;
  }
  .vw-supporting strong {
    color: var(--text);
    font-weight: 600;
  }
  .vw-cta {
    appearance: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 56px;
    background: var(--volt);
    color: #0a0a0a;
    border-radius: 999px;
    text-decoration: none;
    margin-bottom: 28px;
    box-shadow:
      0 0 0 1px rgba(200,255,61,.45),
      0 0 0 8px rgba(200,255,61,.10),
      0 18px 40px -12px rgba(200,255,61,.45),
      0 30px 80px -20px rgba(200,255,61,.25);
    transition: transform .25s ease, box-shadow .35s ease, background .25s ease;
    position: relative;
    overflow: hidden;
  }
  .vw-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
      transparent 30%,
      rgba(255,255,255,.55) 50%,
      transparent 70%);
    transform: translateX(-120%);
    transition: transform .9s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
  }
  .vw-cta:hover {
    transform: translateY(-2px);
    background: #d6ff52;
    box-shadow:
      0 0 0 1px rgba(200,255,61,.7),
      0 0 0 10px rgba(200,255,61,.14),
      0 22px 50px -12px rgba(200,255,61,.6),
      0 36px 90px -20px rgba(200,255,61,.35);
  }
  .vw-cta:hover::before { transform: translateX(120%); }
  .vw-cta:active { transform: translateY(0); }
  .vw-cta-main {
    font-family: var(--display);
    font-weight: 900;
    font-size: 19px;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    line-height: 1;
  }
  .vw-cta-main .arr {
    transition: transform .25s ease;
    font-weight: 700;
  }
  .vw-cta:hover .vw-cta-main .arr { transform: translateX(6px); }
  .vw-cta-sub {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .22em;
    color: rgba(10,10,10,.7);
    text-transform: uppercase;
  }
  .vw-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 4px;
  }
  .vw-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .vw-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 6px rgba(200,255,61,.6);
  }
  .vw-trust-divider {
    width: 4px;
    height: 4px;
    background: rgba(255,255,255,.18);
    transform: rotate(45deg);
  }
  @media (max-width: 760px) {
    .vw-cta { padding: 18px 32px; width: 100%; max-width: 420px; }
    .vw-cta-main { font-size: 16px; }
    .vw-trust { gap: 10px; }
    .vw-trust-divider { display: none; }
    .vw-trust-item { font-size: 10px; flex-basis: 100%; justify-content: center; }
  }

  @media (max-width: 760px) {
    .volt-world { padding: 90px 0; }
    .vw-header { margin-bottom: 50px; }
    .vw-grid { gap: 18px; margin-bottom: 56px; }
    .vw-body { padding: 22px 22px 26px; }
    .vw-card-title { font-size: 26px; }
    .vw-cta { padding: 16px 24px; }
  }


  /* ═════════ PROBLEM SECTION — 2×3 GRID ═══════════════════════════════
     Replaces the previous horizontal carousel. All six cards visible at
     once on desktop (3 columns × 2 rows), 2 cols on tablet, 1 col on
     mobile. Cards become content blocks — no per-card CTA. A single
     section CTA below the grid carries the conversion ask.

     Card visual: previously a broken <img> per card. Now each card uses
     a strong typographic treatment — the tagline rendered large with
     editorial top/bottom rules. Strong type beats weak photography. */

  .problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 56px;
  }
  @media (max-width: 1024px) {
    .problem-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  }
  @media (max-width: 700px) {
    .problem-grid { grid-template-columns: 1fr; gap: 16px; }
  }

  /* Card */
  .problem-card {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 30px 28px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color .35s ease, transform .35s ease, background .35s ease, box-shadow .35s ease;
  }
  .problem-card:hover {
    background: #0a0a0a;
    transform: translateY(-3px);
    border-color: var(--volt);
    box-shadow:
      0 0 0 1px var(--volt),
      0 14px 36px -10px rgba(200, 255, 61, .28);
  }

  /* Top label "01 / 06" — small mono accent */
  .pc-label {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3em;
    color: var(--volt);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color .35s ease;
  }
  .pc-label::before {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: .6;
  }
  .problem-card:hover .pc-label { color: var(--volt); }

  /* Card title */
  .pc-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -.003em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 6px;
  }

  /* Tagline as visual hero — replaces the old image. Display type with
     editorial top/bottom rules so each card has a punchy quoted-statement
     aesthetic. Same content as the old tagline, just elevated. */
  .pc-tagline-visual {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(20px, 2.1vw, 25px);
    line-height: 1.22;
    letter-spacing: -.006em;
    color: var(--text);
    padding: 22px 0;
    margin: 12px 0 22px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  /* Body copy — small, muted, with the editorial top rule that used to
     live on .pc-tagline-visual so the card retains visual structure
     directly under the title at all viewport sizes. */
  .pc-body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
    margin: 12px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }

  /* Section outro: closing line + single section CTA below the grid */
  .problem-outro,
  .prohibit-outro,
  .climb-outro {
    margin-top: 64px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .problem-outro-line,
  .prohibit-outro-line,
  .climb-outro-line {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.18;
    letter-spacing: -.012em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0;
    max-width: 720px;
  }
  /* Constrain the section CTA so it doesn't span the full container width */
  .problem-outro .hero-cta-big,
  .prohibit-outro .hero-cta-big,
  .climb-outro .hero-cta-big { max-width: 520px; }
  @media (max-width: 700px) {
    .problem-outro,
    .prohibit-outro,
    .climb-outro { margin-top: 44px; gap: 22px; }
  }


  /* ════════════════════════════════════════════════════════════════
     UNIFIED PRIMARY CTA — all "Reserve / Claim / Unlock" buttons
     across the page render with the canonical hero-cta-big look.
     This sits at the end of the stylesheet so it overrides earlier
     per-section styles without having to delete them. */
  .hero-cta-big,
  .vw-cta,
  .pcta-button,
  .perks-cta-button,
  .fk-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: 560px;
    padding: 22px 36px;
    background: var(--volt);
    color: #0a0a08;
    border: 1px solid var(--volt);
    border-radius: 6px;
    font-family: var(--display);
    font-weight: 900;
    font-size: 22px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    box-shadow: 0 0 0 0 var(--volt-soft);
    appearance: none;
  }
  .hero-cta-big:hover,
  .vw-cta:hover,
  .pcta-button:hover,
  .perks-cta-button:hover,
  .fk-cta:hover {
    background: #d4ff4d;
    border-color: #d4ff4d;
    color: #0a0a08;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -8px rgba(200,255,61,.55), 0 0 0 6px var(--volt-soft);
  }
  /* Main line (top row inside the button) */
  .hero-cta-big .cta-main,
  .vw-cta .vw-cta-main,
  .pcta-button .pcta-button-main,
  .perks-cta-button .perks-cta-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    line-height: 1;
    font-family: var(--display);
    font-weight: 900;
    font-size: 22px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0a0a08;
  }
  /* Sub line (small caps below) — hidden; buttons are single-line now */
  .hero-cta-big .cta-sub,
  .vw-cta .vw-cta-sub,
  .pcta-button .pcta-button-sub,
  .perks-cta-button .perks-cta-sub {
    display: none;
  }
  /* Arrow animation, shared */
  .hero-cta-big .arr,
  .vw-cta .arr,
  .pcta-button .arr,
  .perks-cta-button .arr,
  .fk-cta .arr { transition: transform .2s ease; }
  .hero-cta-big:hover .arr,
  .vw-cta:hover .arr,
  .pcta-button:hover .arr,
  .perks-cta-button:hover .arr,
  .fk-cta:hover .arr { transform: translateX(6px); }

  @media (max-width: 760px) {
    .hero-cta-big,
    .vw-cta,
    .pcta-button,
    .perks-cta-button,
    .fk-cta {
      padding: 18px 22px;
      font-size: 17px;
      width: 100%;
      max-width: 420px;
    }
    .hero-cta-big .cta-main,
    .vw-cta .vw-cta-main,
    .pcta-button .pcta-button-main,
    .perks-cta-button .perks-cta-main { font-size: 17px; }
    .hero-cta-big .cta-sub,
    .vw-cta .vw-cta-sub,
    .pcta-button .pcta-button-sub,
    .perks-cta-button .perks-cta-sub { font-size: 10px; }
  }

  /* ═════════════════════════════════════════════════════════════════
     MOBILE FIXES — appended block, last in cascade, mobile-only.
     Targets six issues identified on iPhone 16 Pro Safari:
       1. Hero product image placement (must sit between chips and CTA)
       2. Sticky bottom CTA removed (was covering body copy)
       3. (HTML edits) — section renumbering, handled in markup, not CSS
       4. Trust strip descriptor wrap (was visually truncating)
       5. POCKET-SIZED. stamp clearing the period of STACK.
       6. Product-feature pf-tag pills — 2x2 grid, no orphan 4th pill
     Desktop layout untouched: every rule lives inside a max-width MQ.
     ═════════════════════════════════════════════════════════════════ */

  /* ── (0) Hide announcement marquee on mobile ──
     The scrolling volt-yellow bar at the top adds visual noise on a small
     screen and pushes the hero down. Hidden entirely below 760px. */
  @media (max-width: 760px) {
    .announce { display: none; }
  }

  /* ── (1) Hero product image position on mobile ──
     A small JS shim (at the end of <body>) moves .hero-visual INTO .hero-copy
     on mobile, then moves it back out on desktop. Once it's in, we use
     flex `order` on the real children of .hero-copy to put trust pills + CTA
     above the fold (right after the headline), and push the image + sub copy
     below. This works reliably because .hero-copy is a real flex container
     here — no `display: contents` involved. Desktop unchanged. */
  @media (max-width: 920px) {
    .hero-copy {
      display: flex;
      flex-direction: column;
    }
    .hero-copy > .hero-category-eyebrow { order: 1; }
    .hero-copy > .hero-title             { order: 2; }
    .hero-copy > .hero-visual            { order: 3; margin: 20px 0; width: 100%; }
    .hero-copy > .hero-chips             { order: 4; margin-top: 18px; }
    .hero-copy > .hero-cta-big           { order: 5; margin-top: 18px; }
    .hero-copy > .volt-pass-unlocks      { order: 6; }
    .hero-copy > .form-disclaimer        { order: 7; }
    .hero-copy > .founder-progress       { order: 8; margin-top: 16px; }

    .hero-copy > .hero-visual .hero-product-stage {
      max-width: 380px;
      margin: 0 auto;
    }
  }

  /* ── (2) Kill the sticky bottom CTA on mobile ──
     It was covering body copy in the Energy section and the SLOW ACTIVATION
     card titles. The hero's primary CTA now handles the conversion ask
     without a persistent overlay. Desktop already hid it; this just makes
     mobile match. !important defeats any later toggles from the IO script. */
  @media (max-width: 760px) {
    .mobile-sticky-cta,
    .mobile-sticky-cta.hidden { display: none !important; }
  }

  /* ── (4) Trust strip — fix descriptor truncation on mobile ──
     "Every ingredient at proven amounts" was visually cropping because the
     2-column grid plus icon + gap + 14px col padding left the text well
     under 110px wide. Reclaim horizontal room (tighter gap + smaller icon
     + reduced padding) and force the descriptor to wrap cleanly across
     however many lines it needs. */
  @media (max-width: 768px) {
    .trust-col {
      padding: 14px 10px;
      gap: 10px;
      align-items: flex-start;
    }
    .trust-col:first-child { padding-left: 10px; }
    .trust-col:last-child  { padding-right: 10px; }
    .trust-icon { width: 20px; height: 20px; margin-top: 2px; }
    .trust-text { min-width: 0; flex: 1 1 auto; }
    .trust-label {
      font-size: 11px;
      letter-spacing: .1em;
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: normal;
    }
    .trust-descriptor {
      font-size: 11px;
      line-height: 1.35;
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: normal;
    }
  }

  /* ── (5) POCKET-SIZED. accent — clear the period of STACK. ──
     The stamp's negative top margin pulled it up so far it kissed the
     period of "STACK." above on mobile. Push it down to a small positive
     margin so the angled stamp has visible breathing room. */
  @media (max-width: 760px) {
    h1.hero-title .ht-stamp {
      margin-top: 0.12em;
      margin-left: 1.1em;
    }
  }

  /* ── (6) Product feature pf-tags — 2x2 grid, no orphan pill ──
     Four pills ("Energy / Focus / Cooling / 5–10 min feel" etc.) were
     wrapping 3+1 on mobile, leaving the longest pill alone on row two.
     Force a clean 2x2 grid with centered text, slightly tighter type so
     "Cognitive support" / "Zero caffeine" don't blow out the column. */
  @media (max-width: 760px) {
    .pf-tags {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .pf-tag {
      font-size: 9.5px;
      letter-spacing: .14em;
      padding: 8px 6px;
      text-align: center;
      overflow-wrap: anywhere;
    }
  }

  /* ── (7) Above-the-fold recovery on mobile ──
     Hero is too tall on iPhone 16 Pro: trust pills + CTA fall below ~750px
     viewport. Recover vertical space by (a) shrinking the product image
     ~20%, (b) tightening four inter-element gaps ~25%, and (c) compressing
     the H1's leading + trailing margin. No font sizes, colors, or element
     visibility changed. */
  @media (max-width: 768px) {
    /* (a) Product image — ~340px → ~270px tall via square stage max-width. */
    .hero-copy > .hero-visual {
      margin: 14px 0 14px;   /* was 20px top + 20px bottom */
      width: 100%;
    }
    .hero-copy > .hero-visual .hero-product-stage {
      max-width: 270px;       /* was 380px → ~20% reduction in rendered height */
      margin: 0 auto;
    }

    /* (b) Gap: eyebrow → headline */
    .hero-copy > .hero-category-eyebrow { margin-bottom: 10px; }

    /* (b) Gap: headline → POCKET-SIZED. stamp.
       Overrides the (max-width: 760px) rule that set this to 0.12em earlier. */
    h1.hero-title .ht-stamp { margin-top: 0.06em; }

    /* (b) Gap: product image → trust pills */
    .hero-copy > .hero-chips { margin-top: 13px; }  /* was 18px */

    /* (c) Headline block — biggest vertical consumer in the hero.
       Tighter leading + smaller trailing margin + slightly tighter tracking
       (the tracking helps "TRAINING STACK." stay on one row instead of
       wrapping to two on narrow phones). */
    h1.hero-title {
      line-height: 0.82;       /* was .9 */
      margin-bottom: 8px;       /* was 24px */
      letter-spacing: -.02em;   /* was -.015em */
    }
  }

  /* ── (8) Hero edge breathing — top and bottom of the fold ──
     Two finishing tweaks at iPhone-16-Pro scale (393px viewport):
     (a) Trim the gap between the sticky nav and the eyebrow — the existing
         mobile rule sets .hero padding-top to 56px which reads as too much
         vacant space directly under the nav bar.
     (b) Add clean whitespace below the CTA so it doesn't sit flush against
         the visible viewport edge (where Safari's bottom UI can overlap). */
  @media (max-width: 768px) {
    .hero {
      padding-top: 32px;          /* was 56px — ~30-40px nav→eyebrow gap */
    }
    .hero-copy > .hero-cta-big {
      margin-bottom: 36px;        /* was 72px — card below it now provides
                                     visible content, so the breathing-room
                                     reserve isn't needed; tighter feels more
                                     connected to the immediate payoff card. */
    }
  }

  /* ── (9) Product image vertical balance on mobile ──
     Top: ~36px gap to the headline. Bottom: tight against the trust pills
     (~6px combined). Zero margin-bottom on .hero-visual and cut .hero-chips
     margin-top from 13px → 6px, overriding block (1). */
  @media (max-width: 768px) {
    .hero-copy > .hero-visual {
      margin-top: 28px;    /* + 8px headline mb = ~36px top gap */
      margin-bottom: 0;
    }
    .hero-copy > .hero-chips {
      margin-top: 6px;     /* was 13px in block (1) */
    }
  }

  /* ── (10) Hero copy / card breakpoint swap ──
     Desktop reads the pitch paragraph (narrative voice, positioning, brand
     copy with FREE VOLT FOR LIFE hook). Mobile reads the compact INSIDE
     BATCH 001 card (scannable benefits, scarcity footer). Both live in the
     DOM; CSS toggles which one renders per breakpoint. The JS image-mover
     shim still uses .volt-pass-unlocks as its insertBefore anchor on mobile —
     display:none doesn't affect querySelector, so it keeps working. */
  @media (min-width: 769px) {
    .volt-pass-unlocks { display: none; }
  }
  @media (max-width: 768px) {
    .hero-sub { display: none; }
  }

  /* ── (11) Unified mobile section spacing ──
     Carpet-bomb fix for inconsistent vertical rhythm on mobile. Before:
     `.how` and `.founder` had NO mobile override (still firing 140px top
     + 140px bottom from desktop, creating ~280px gaps); `.problem` was
     asymmetric (54px top, 120px bottom); other sections ranged 90–110px.
     Net effect: page read brochure-like on a phone with random valleys
     of empty space between sections.

     Resolution: every major content section gets `padding: 56px 0` on
     mobile. That yields a uniform 112px gap between any two adjacent
     section content edges (56 bottom + 56 top). The hero keeps its own
     custom bottom (36px) to tighten hero → trust handoff; the trust
     strip keeps its own banded padding. Final-section bottom gets a
     small lift (72px) to give the footer breathing room.

     Desktop spacing across all sections is untouched. */
  @media (max-width: 768px) {
    .hero { padding-bottom: 36px; }
    .problem,
    .how,
    .founder,
    .founder-pass,
    .climb,
    .prohibit,
    .volt-world,
    .faq {
      padding: 56px 0;
    }
    .final {
      padding: 56px 0 72px;
    }
  }

  /* ── (12) Old Routine grid: mobile content swap ──
     Mobile shows all six cards (same as desktop) but swaps the bold
     "tagline" subheadline out for the descriptive body copy in the same
     visual slot. Net effect on each mobile card:
       pagination (lime) → divider → body copy (was tagline copy)
     The lime hover highlight lives on the shared :hover rule above, so
     no mobile-specific active-state CSS is needed here. */
  /* Mobile cards: tagline-visual removed site-wide (markup deleted), and
     the editorial top divider on .pc-body now lives in the base rule, so
     no mobile-specific overrides are needed. Kept this comment as a
     breadcrumb in case the layout is revisited. */

  /* ── (13) Unify section backgrounds on mobile ──
     .problem has background: var(--bg-2). .how and .founder have no
     background and inherit the page body color. .how also lays a 240px
     ::before gradient with a 6% white top tint over its area. On desktop
     the generous padding between sections makes the color shifts read as
     intentional sectional rhythm. On mobile sections sit flush — each
     bg-shift becomes a visible hard edge.
     Fix: give the affected sections the same base color on mobile so
     transitions are invisible. The .how gradient stays and now reads as
     a soft inner glow over a uniform background. */
  @media (max-width: 768px) {
    .how,
    .founder,
    .founder-pass {
      background: var(--bg-2);
    }
  }

  /* ── (14) Product feature body — mobile spec-list reformat ──
     The desktop .pf-body paragraph is dense (70-90 words, bolded ingredient
     names inline) — fine to read in a 2-column desktop layout, exhausting
     stacked on a phone. On mobile we swap to a structured block:
       pitch sentence → THE STACK card (4 ingredient rows) → payoff line.
     Same visual language as the INSIDE BATCH 001 card in the hero: bordered
     surface, mono header, accent "+" markers, per-SKU corner stripe.
     Desktop .pf-body stays untouched — paragraph still reads there. */
  .pf-body-mobile { display: none; }  /* desktop default — hide mobile block */

  @media (max-width: 768px) {
    .pf-body { display: none; }       /* hide dense paragraph on mobile */
    .pf-body-mobile {
      display: block;
      margin-top: 16px;
    }

    /* Pitch sentence — opens the section with the core promise */
    .pfm-pitch {
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--text);
      margin: 0 0 18px;
    }
    .pfm-pitch strong { color: var(--text); font-weight: 700; }

    /* Stack card — bordered surface with per-SKU corner stripe */
    .pfm-stack {
      margin: 0 0 18px;
      padding: 14px 14px 12px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, .02);
      position: relative;
    }
    .pfm-stack::before {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      width: 36px;
      height: 2px;
    }
    .product-feature[data-sku="energy"]  .pfm-stack::before { background: var(--volt);    }
    .product-feature[data-sku="pump"]    .pfm-stack::before { background: var(--pump);    }
    .product-feature[data-sku="recover"] .pfm-stack::before { background: var(--recover); }

    /* Stack header — mono uppercase in the SKU's accent color */
    .pfm-stack-header {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      margin: 0 0 10px;
    }
    .product-feature[data-sku="energy"]  .pfm-stack-header { color: var(--volt);    }
    .product-feature[data-sku="pump"]    .pfm-stack-header { color: var(--pump);    }
    .product-feature[data-sku="recover"] .pfm-stack-header { color: var(--recover); }

    /* Ingredient list — tight stacked rows, accent "+" markers */
    .pfm-stack-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .pfm-stack-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-family: var(--body);
      font-size: 13px;
      line-height: 1.5;
      color: #c8c8c0;
    }
    .pfm-stack-list li strong {
      color: var(--text);
      font-weight: 700;
    }
    .pfm-mark {
      font-family: var(--mono);
      font-weight: 700;
      flex-shrink: 0;
      width: 12px;
      text-align: center;
      font-size: 13px;
      line-height: 1.5;
    }
    .product-feature[data-sku="energy"]  .pfm-mark { color: var(--volt);    }
    .product-feature[data-sku="pump"]    .pfm-mark { color: var(--pump);    }
    .product-feature[data-sku="recover"] .pfm-mark { color: var(--recover); }

    /* Payoff line — display type, lands as the punctuation under the stack */
    .pfm-payoff {
      font-family: var(--display);
      font-weight: 700;
      font-size: 16px;
      line-height: 1.35;
      color: var(--text);
      margin: 0;
    }
  }

  /* ── (15) Founder Pass perks — mobile reorder for visual coherence ──
     Desktop: 2x2 grid, cards read in DOM order
       (Lifetime → Shape Batch 002 → Founder Kit → Direct Line).
     Mobile: single-column stack. The Founder Kit photo placeholder sits
     directly above the grid with a "BATCH 001" stamp on it — visually
     promising the visitor they're about to read about that kit. But in
     DOM order, the Founder Kit card is THIRD. Visitor scrolls past two
     unrelated cards before reaching the one that explains the photo.
     Fix: on mobile only, use flex `order` (grid items respect it) to
     promote the Founder Kit card to position 1. New mobile order:
       Founder Kit → Lifetime Pricing → Shape Batch 002 → Direct Line.
     Photo → Kit card sit adjacent, then the rest follow in their
     natural rhythm. Desktop DOM order and visual layout: unchanged. */
  @media (max-width: 768px) {
    .fp-grid > .fp-card:nth-child(1) { order: 2; }  /* Lifetime Pricing */
    .fp-grid > .fp-card:nth-child(2) { order: 3; }  /* Shape Batch 002 */
    .fp-grid > .fp-card:nth-child(3) { order: 1; }  /* The Founder Kit */
    .fp-grid > .fp-card:nth-child(4) { order: 4; }  /* Direct Line to the Team */
  }

  /* ── (16) Climb tier numbering — mobile reverse to match 01=best ──
     Desktop reads 03 (top, FREE VOLT FOR LIFE) → 02 → 01 (bottom, SKIP
     THE LINE). The visual ascent works on desktop but conflicts with the
     "01 = best" convention used everywhere else on the page (Batch 001,
     pagination labels, founder section eyebrows). On mobile we swap the
     top and bottom indicator text: top now reads "01" (50+ refs, biggest
     prize), bottom reads "03" (3 refs, entry tier). Middle "02" unchanged.
     The visual hierarchy (font sizes, icon scale tied to .climb-tier-3
     wrapper class) stays exactly as before — only the displayed number
     swaps via dual spans toggled per breakpoint. */
  .climb-num-mobile { display: none; }   /* desktop default — hide mobile num */
  @media (max-width: 768px) {
    .climb-num-desktop { display: none; }
    .climb-num-mobile  { display: inline; }
  }

  /* ── (17) VOLT World headline — neutralize inline width on mobile ──
     The .vw-title h2 ("Enter the VOLT World") carries an inline
     style="width: 800px" from desktop development. On a 393px iPhone
     viewport that forces ~407px of horizontal overflow, clipping the
     headline against the right edge. Inline styles win over external
     CSS without !important, so this override is one of the few places
     in the stylesheet where !important is necessary. Desktop's 800px
     width is preserved (the override only applies below 768px). */
  @media (max-width: 768px) {
    .vw-title {
      width: auto !important;
      max-width: 100%;
    }
  }

  /* ════════════════════════════════════════════════════════════════
     ── (18) DESIGN DNA EXPANSION ──
     Reinforces the THE SYSTEM visual vocabulary (lime mono eyebrows,
     dot-and-connector graphics, premium spec-sheet feel) across five
     additional surfaces:
       18a. Trust strip → "VITALS" panel with pulsing live dots
       18b. Section eyebrows → lime dot+line prefix on every section
            that uses a meta-line pattern (climb, founder-pass, prohibit,
            faq, final). Sections already using .sect-tag keep theirs.
       18c. Climb section → vertical connector + lime tier glow that
            mirrors THE SYSTEM's horizontal training timeline
       18d. Banned List → PROHIBITED stamp inherits .vw-classified
            styling (red glitch-bracket, matches CLASSIFIED in VOLT
            World). Already added via existing class reuse in markup.
       18e. Founder Pass → "membership credential" card header that
            frames the four benefits below as conferred rights
     Desktop-first; each surface includes mobile adjustments where
     useful. All additions are purely additive — no existing rules
     touched, no specificity wars. ──────────────────────────────── */

  /* ─── 18a · Trust strip VITALS treatment ─────────────────────────
     Adds a small lime pulsing "live" dot above each trust column label
     and tightens the vertical rhythm. Turns the section from a generic
     credibility banner into a status dashboard panel. */
  .trust-col {
    position: relative;
  }
  .trust-col .trust-text::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--volt);
    margin-right: 8px;
    vertical-align: middle;
    transform: translateY(-2px);
    box-shadow: 0 0 8px rgba(200, 255, 61, .6);
    animation: vitals-pulse 2.4s ease-in-out infinite;
  }
  @keyframes vitals-pulse {
    0%, 100% { opacity: .55; box-shadow: 0 0 6px rgba(200, 255, 61, .4); }
    50%      { opacity: 1;   box-shadow: 0 0 12px rgba(200, 255, 61, .7); }
  }
  @media (prefers-reduced-motion: reduce) {
    .trust-col .trust-text::before { animation: none; opacity: .8; }
  }

  /* ─── 18b · Section eyebrow consistency (lime dot prefix) ────────
     Sections that use .meta-l or similar split-meta patterns get the
     same lime dot/line treatment that .sect-tag already carries. This
     creates a single visual through-line across the page — every
     section eyebrow opens with a lime accent. */
  .climb-meta-l::before,
  .fp-meta-l::before,
  .prohibit-meta .meta-l::before,
  .final-eyebrow::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--volt);
    margin-right: 12px;
    vertical-align: middle;
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(200, 255, 61, .55);
  }
  /* The .prohibit-meta .meta-l has internal spans; ensure proper alignment */
  .prohibit-meta .meta-l { display: inline-flex; align-items: center; }

  /* ─── 18c · Climb section ASCENT visual ──────────────────────────
     Adds a vertical connector line down the .climb-ladder column,
     anchored to the .climb-indicator dots. Each indicator gets a lime
     glow halo matching THE SYSTEM's .tl-dot vocabulary. The line
     visually anchors the "climb" metaphor — three stops on a vertical
     ascent rather than three independent cards. */
  .climb-ladder {
    position: relative;
  }
  .climb-ladder::before {
    content: '';
    position: absolute;
    top: 38px;
    bottom: 38px;
    left: 27px;  /* aligns with center of .climb-indicator at desktop sizes */
    width: 2px;
    background: linear-gradient(
      to bottom,
      rgba(200, 255, 61, .55) 0%,
      rgba(200, 255, 61, .28) 50%,
      rgba(200, 255, 61, .12) 100%
    );
    z-index: 0;
    pointer-events: none;
  }
  .climb-tier { position: relative; z-index: 1; }
  .climb-indicator {
    position: relative;
  }
  .climb-indicator::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 255, 61, .35) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
    animation: climb-pulse 3.2s ease-in-out infinite;
  }
  .climb-tier-4 .climb-indicator::after {
    background: radial-gradient(circle, rgba(200, 255, 61, .55) 0%, transparent 70%);
    animation-duration: 2.4s;
  }
  @keyframes climb-pulse {
    0%, 100% { opacity: .5; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.15); }
  }
  @media (prefers-reduced-motion: reduce) {
    .climb-indicator::after { animation: none; opacity: .7; }
  }
  @media (max-width: 768px) {
    .climb-ladder::before { left: 22px; }
  }

  /* ─── 18d · Banned List PROHIBITED stamp ─────────────────────────
     Markup uses the existing .vw-classified component (added inline
     to the prohibit section). No new CSS needed — the existing red
     glitch-bracket styling carries over. This block reserved for any
     section-specific spacing adjustments. */
  .prohibit .vw-classified { margin-bottom: 8px; }

  /* ════════════════════════════════════════════════════════════════
     ── (19) WAITLIST MODAL · TWO-STEP FUNNEL ──
     Companion styles for the two-step waitlist modal markup. The
     existing .wl-modal / .wl-modal-card / .wl-modal-close / .wl-form
     base rules (defined ~line 750 of this stylesheet) stay intact —
     this block adds the new components only:
       19a. Step containers + transition (fade + slide)
       19b. Progress indicator (two segments, lights at active step)
       19c. Scarcity badge (mono, pulsing dot, lime tint)
       19d. Social proof line (Step 1, under the headline)
       19e. Unlocks list (Step 2, "what text drops unlock")
       19f. Skip link (Step 2, low-emphasis email-only fallback)
       19g. Success state (lime checkmark + close button)
     All additions are scoped to .wl-modal so nothing leaks. ──────── */

  /* 19a — Step containers. Only the active step shows. Slide-in
     animation on activation gives motion without feeling skippable. */
  .wl-modal .wl-step { display: none; }
  .wl-modal .wl-step.is-active {
    display: block;
    animation: wl-step-in .38s cubic-bezier(.4, 0, .2, 1) both;
  }
  @keyframes wl-step-in {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .wl-modal .wl-step.is-active { animation: none; }
  }

  /* Hide scarcity badge on success step (the success message itself
     becomes the focal point — extra scarcity reads as friction). */
  .wl-modal .wl-step[data-step="success"].is-active ~ * .wl-scarcity,
  .wl-modal:has(.wl-step[data-step="success"].is-active) .wl-scarcity {
    display: none;
  }

  /* 19b — Progress indicator. Sits at the top of the card. */
  .wl-progress {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
  }
  .wl-progress-seg {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, .14);
    border-radius: 3px;
    transition: background .3s ease, box-shadow .3s ease;
    position: relative;
    overflow: hidden;
  }
  .wl-progress-seg.is-active {
    background: var(--volt);
    box-shadow: 0 0 14px rgba(200, 255, 61, .70),
                0 0 0 1px rgba(200, 255, 61, .28);
  }
  /* Subtle shimmer pass over the active segment so it reads as live
     progress, not a static fill. Slow and respectful — no flashing. */
  .wl-progress-seg.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.45) 50%,
      rgba(255,255,255,0) 100%);
    animation: wl-progress-shimmer 2.6s ease-in-out infinite;
  }
  @keyframes wl-progress-shimmer {
    0%   { transform: translateX(-110%); }
    55%, 100% { transform: translateX(110%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .wl-progress-seg.is-active::after { animation: none; }
  }
  /* CTA microcopy: short subtle line under the modal submit button. */
  .wl-cta-sub {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    margin: 10px 0 14px;
    line-height: 1.4;
  }
  /* Hide the progress bar on success — the journey is over */
  .wl-modal:has(.wl-step[data-step="success"].is-active) .wl-progress {
    visibility: hidden;
  }

  /* 19c — Scarcity badge. Mono, lime, with pulsing dot. */
  .wl-scarcity {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-bottom: 18px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--volt);
    background: rgba(200, 255, 61, .06);
    border: 1px solid rgba(200, 255, 61, .22);
    text-transform: uppercase;
    align-self: flex-start;
  }
  .wl-scarcity-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 8px rgba(200, 255, 61, .65);
    animation: vitals-pulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
  }

  /* 19d — Social proof line (Step 1, under sub) */
  .wl-social-proof {
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--muted);
    text-transform: uppercase;
    margin: 0 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .wl-social-proof [data-founder-claimed] {
    color: var(--volt);
    font-weight: 600;
  }
  .wl-social-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 6px rgba(200, 255, 61, .5);
  }

  /* 19e — Unlocks list (Step 2). Frames the SMS opt-in as a benefit
     bundle rather than a bare field. Top + bottom dashed dividers tie
     it visually to the Founder Pass credential aesthetic. */
  .wl-unlocks {
    list-style: none;
    padding: 14px 0;
    margin: 6px 0 18px;
    border-top: 1px dashed rgba(200, 255, 61, .22);
    border-bottom: 1px dashed rgba(200, 255, 61, .22);
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .wl-unlocks li {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .wl-unlocks-mark {
    color: var(--volt);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    flex-shrink: 0;
  }
  .wl-unlocks strong {
    color: var(--volt);
    font-weight: 600;
  }

  /* 19f — Skip link (Step 2). Deliberately low-emphasis — present
     for the bail-out path but doesn't compete with the primary CTA. */
  .wl-skip {
    background: transparent !important;
    border: none !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    font-family: var(--mono) !important;
    font-weight: 500 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    cursor: pointer;
    padding: 6px 8px !important;
    margin: -2px 0 4px !important;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    width: auto !important;
    align-self: center;
    transition: color .15s ease;
  }
  .wl-skip:hover {
    color: var(--text) !important;
    background: transparent !important;
  }

  /* 19g — Success state. Lime checkmark + close button. */
  .wl-success-mark {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--volt);
    color: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 18px;
    box-shadow:
      0 0 0 6px rgba(200, 255, 61, .12),
      0 0 28px rgba(200, 255, 61, .45);
    animation: wl-success-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
  }
  @keyframes wl-success-pop {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wl-success-mark { animation: none; }
  }
  .wl-modal .wl-step[data-step="success"] [data-success-pos] {
    color: var(--volt);
    font-weight: 600;
  }
  .wl-success-close {
    background: var(--volt);
    color: #0a0a0a !important;
    border: none;
    padding: 14px 18px;
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    margin-top: 18px;
    width: 100%;
    transition: background .15s ease;
  }
  .wl-success-close:hover { background: #fff; }

  /* Mobile tightening for the modal */
  @media (max-width: 480px) {
    .wl-modal .wl-modal-title { font-size: 22px; }
    .wl-scarcity { font-size: 9.5px; padding: 5px 10px; }
    .wl-unlocks li { font-size: 13px; }
    .wl-success-mark { width: 56px; height: 56px; }
  }

  /* ═══════════════════════════════════════════════════════════════
     UTILITY: mobile-only line break
     <br class="m-br"> stays hidden on desktop, becomes a real line
     break at ≤760px. Used to force intentional copy wraps inside
     headlines and the primary CTA buttons.
     ═══════════════════════════════════════════════════════════════ */
  .m-br { display: none; }
  @media (max-width: 760px) {
    .m-br { display: inline; }
  }

  /* ════════════════════════════════════════════════════════════════
     WHY A POUCH? — format education + credibility beat
     Sits between THE SYSTEM (Energy/Pump/Recover) and Founder Pass.
     Two-column desktop layout: text block left, "THE VOLT FORMAT"
     reference card right. Mobile stacks copy first, format card below.
     No CTA — this section is credibility, not conversion. Premium dark
     surface, subtle lime accents, brand-consistent typography.
     ════════════════════════════════════════════════════════════════ */
  .why-pouch {
    padding: 110px 0 120px;
    position: relative;
    border-top: 1px solid var(--border);
    background: var(--bg);
    overflow: hidden;
  }
  /* Atmospheric drift glow — pulls a faint lime breath from the left
     edge so the section reads as a continuation of THE SYSTEM mood
     rather than a hard break. */
  .why-pouch::before {
    content: '';
    position: absolute;
    top: 15%;
    left: -12%;
    width: 50%;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(200,255,61,.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }
  .why-pouch .wrap { position: relative; z-index: 1; }

  /* Section meta strip — matches the .climb-meta / .fp-meta pattern */
  .pouch-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 48px;
  }
  .pouch-meta-l {
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .pouch-meta-l::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 8px rgba(200,255,61,.6);
  }

  .pouch-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 64px;
    align-items: start;
  }

  /* Left column */
  .pouch-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(36px, 4.4vw, 56px);
    line-height: 1.04;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 22px;
  }
  .pouch-title-ln2 { display: block; color: var(--volt); }
  .pouch-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 32px;
    max-width: 580px;
  }
  .pouch-proofs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 580px;
  }
  .pouch-proof {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: border-color .2s ease, background .2s ease;
  }
  .pouch-proof:hover {
    border-color: var(--border-hi);
    background: rgba(200,255,61,.025);
  }
  .pouch-proof-num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--volt);
    font-weight: 700;
    padding-top: 3px;
  }
  .pouch-proof-title {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 4px;
    font-weight: 700;
  }
  .pouch-proof-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
  }

  /* Right column: THE VOLT FORMAT reference card */
  .pouch-format-card {
    position: relative;
    padding: 32px 28px 28px;
    border: 1px solid var(--border-hi);
    background: var(--surface);
    overflow: hidden;
  }
  /* Lime corner stripe — matches the ticket-edge accent on the
     hero VOLT Pass card (.volt-pass-unlocks::before) for system
     consistency across "premium credential" surfaces. */
  .pouch-format-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 56px;
    height: 2px;
    background: var(--volt);
  }
  .pouch-format-card::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 120%;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(200,255,61,.07) 0%, transparent 60%);
    pointer-events: none;
  }
  .pouch-format-card > * { position: relative; z-index: 1; }

  .pouch-format-header {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--volt);
    margin: 0 0 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
  }
  .pouch-format-header::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--volt);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(200,255,61,.6);
  }
  .pouch-svg-wrap {
    display: flex;
    justify-content: center;
    margin: 4px 0 28px;
  }
  .pouch-svg {
    width: 132px;
    height: auto;
    filter: drop-shadow(0 0 18px rgba(200,255,61,.18));
  }

  /* Step ladder with vertical connector — system-style typography */
  .pouch-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .pouch-steps::before {
    content: '';
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 16px;
    width: 1px;
    background: linear-gradient(to bottom,
      rgba(200,255,61,.5) 0%,
      rgba(200,255,61,.12) 100%);
  }
  .pouch-step {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 14px;
    align-items: start;
    position: relative;
    z-index: 1;
  }
  .pouch-step-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid rgba(200,255,61,.42);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--volt);
    letter-spacing: .04em;
  }
  .pouch-step-label {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--text);
    margin: 4px 0 4px;
    font-weight: 700;
  }
  .pouch-step-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
  }

  @media (max-width: 860px) {
    .why-pouch { padding: 56px 0 64px; }
    .pouch-meta { margin-bottom: 22px; padding-bottom: 12px; font-size: 10px; }
    .pouch-grid {
      grid-template-columns: 1fr;
      gap: 26px;
    }
    .pouch-title { font-size: clamp(26px, 6vw, 36px); margin-bottom: 12px; }
    .pouch-body {
      font-size: 13.5px;
      line-height: 1.55;
      margin-bottom: 18px;
    }
    .pouch-proofs { gap: 8px; }
    .pouch-proof {
      padding: 11px 14px;
      gap: 12px;
      grid-template-columns: 28px 1fr;
    }
    .pouch-proof-title { font-size: 10px; letter-spacing: .18em; }
    .pouch-proof-desc { font-size: 12.5px; line-height: 1.5; }
    .pouch-format-card { padding: 22px 18px 20px; }
    .pouch-svg { width: 96px; }
    .pouch-svg-wrap { margin: 2px 0 20px; }
    .pouch-format-header { margin-bottom: 16px; }
    .pouch-steps { gap: 12px; }
    .pouch-step { grid-template-columns: 28px 1fr; gap: 12px; }
    .pouch-step-indicator { width: 26px; height: 26px; font-size: 9.5px; }
    .pouch-steps::before { left: 13px; top: 14px; bottom: 14px; }
    .pouch-step-label { font-size: 11px; letter-spacing: .2em; margin-top: 2px; }
    .pouch-step-desc { font-size: 12.5px; line-height: 1.45; }
  }

  /* Utility: hide on mobile (counterpart to .m-br). Used to trim
     dense secondary copy on narrow viewports without removing it
     from desktop. */
  .hide-mobile { display: inline; }
  @media (max-width: 860px) {
    .hide-mobile { display: none; }
  }

  /* ═══════════════════════════════════════════════════════════════
     Phase B6 mobile layout fixes — surgical mobile-only overrides for
     three reported bugs. No desktop regression.
     ═══════════════════════════════════════════════════════════════ */

  /* Bug 1: final-title "Claim your VOLT Pass." wrapped at 56px (clamp MIN)
     with line-height 0.85 — too cramped on narrow viewports. Smaller font
     + standard line-height makes the 2-line wrap breathe. */
  @media (max-width: 480px) {
    h2.final-title {
      font-size: 44px;
      line-height: 1.0;
      letter-spacing: -.015em;
    }
  }

  /* Bug 2: Two over-padded mobile transitions.
     (1) .problem → .how — original 120+140=260px gap. Tightened in
         prior commit to 80+40=120px.
     (2) .how → .why-pouch — the user-reported "too much black space"
         transition. .how previously had padding-bottom 80px; .why-pouch
         has padding-top 56px on mobile (at the existing ≤860px rule).
         Combined ~136px. Tightening both to 40 = 80px combined. */
  @media (max-width: 760px) {
    .problem   { padding-top: 80px; padding-bottom: 40px; }
    .how       { padding-top: 40px; padding-bottom: 40px; }
    .why-pouch { padding-top: 40px; }
  }

  /* Bug 1 follow-up: force the line break so the headline reads as
     "Claim your" / "VOLT Pass." instead of "Claim your VOLT" / "Pass."
     The <br class="br-mobile"> sits in the markup; hidden on desktop so
     it doesn't disrupt the single-line desktop render. */
  .br-mobile { display: none; }
  @media (max-width: 760px) {
    .br-mobile { display: initial; }
  }

  /* Bug 3: .wl-modal-card had no max-height and overflow:visible. On
     small viewports (340×680 Android) or whenever the keyboard opens
     (effective height ~500px), the card extended past viewport edges
     with no internal scroll. Adding max-height (dvh-aware for mobile
     browser chrome) + overflow-y: auto lets the card scroll internally.
     Padding tightened at narrow heights.
     Follow-up: hide the step-2 "what you'll unlock" bullet list on short
     viewports so the form fits without needing internal scroll at all.
     The bullets are value-prop reinforcement already implied by the
     headline + body copy — losing them on small screens is a net win. */
  .wl-modal-card {
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
  }
  @media (max-height: 700px) {
    .wl-modal-card { padding: 24px 24px 22px; }
  }
  @media (max-width: 760px) {
    .wl-modal-card .wl-unlocks { display: none; }
  }