/* ==========================================================================
   FUNNEL PAGES — layers on top of jv-kit.css
   Load AFTER jv-kit.css:
     <link rel="stylesheet" href="assets/jv-kit.css">
     <link rel="stylesheet" href="assets/funnel.css">
   Accent still comes from data-accent on <html>. Nothing here defines colour
   of its own — every value below reads a token from jv-kit.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LIGHT SECTIONS
   The JV pages are dark throughout. A registration page alternates dark and
   light so the pain and proof blocks read as "the honest part of the page".
   -------------------------------------------------------------------------- */
section.paper{background:var(--paper);color:var(--ptx)}
section.paper-2{background:var(--paper-2);color:var(--ptx)}
section.paper h2 em,section.paper-2 h2 em,
section.paper h1 em,section.paper-2 h1 em,
section.paper h3 em,section.paper-2 h3 em{color:var(--a-lo)}
section.paper .lead,section.paper-2 .lead{color:var(--ptx-2)}
section.paper b,section.paper strong,
section.paper-2 b,section.paper-2 strong{color:var(--ptx)}
section.paper .eyebrow,section.paper-2 .eyebrow{color:var(--a-lo)}
section.paper .eyebrow::before,section.paper-2 .eyebrow::before{background:var(--a-lo);box-shadow:none}
section.paper .hl,section.paper-2 .hl{color:var(--a-lo)}
section.paper a,section.paper-2 a{color:var(--a-lo)}
section.paper .card,section.paper-2 .card{
  background:#fff;border-color:var(--prule);box-shadow:0 1px 3px rgba(16,21,22,.05)}
section.paper .card p,section.paper-2 .card p{color:var(--ptx-2)}
section.paper .card .k,section.paper-2 .card .k{color:var(--a-lo)}
section.paper .btn.ghost,section.paper-2 .btn.ghost{color:var(--ptx);box-shadow:0 0 0 1.5px var(--prule-2) inset}
section.paper .muted-tx,section.paper-2 .muted-tx{color:var(--ptx-3)}

/* --------------------------------------------------------------------------
   2. OPENER
   -------------------------------------------------------------------------- */
.opener{
  position:relative;overflow:hidden;
  padding:clamp(30px,5vw,54px) 0 clamp(44px,6vw,72px);
  background:
    radial-gradient(1100px 520px at 50% -10%,var(--a-soft),transparent 62%),
    radial-gradient(680px 400px at 50% 106%,var(--a-soft),transparent 60%),
    var(--ink);
}
.opener::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:62px 62px;opacity:.55;
  mask-image:radial-gradient(740px 420px at 50% 16%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(740px 420px at 50% 16%,#000,transparent 76%);
}
.opener>*{position:relative;z-index:2}
.opener-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.opener h1{font-size:clamp(31px,5.4vw,60px);letter-spacing:-.034em;line-height:1.04;max-width:19ch}
.opener h1 em{color:var(--a)}
.opener .sub{font-size:clamp(16px,1.75vw,19.5px);color:var(--tx-2);max-width:60ch;line-height:1.6}
.opener .nano{font-size:14.5px;color:var(--tx-3);max-width:52ch}

/* live date bar */
.livebar{
  display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:center;
  padding:10px 20px;border-radius:999px;
  border:1px solid var(--a-line);background:var(--a-soft);
  font-family:var(--mono);font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--a-hi);
}
.livebar .dot{width:8px;height:8px;border-radius:50%;background:var(--a);flex:none;
  box-shadow:0 0 0 0 var(--a-glow);animation:pulse 2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--a-glow)}
  70%{box-shadow:0 0 0 9px rgba(0,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
.livebar .live{color:var(--act);font-weight:700}
section.paper .livebar,section.paper-2 .livebar{color:var(--a-lo);border-color:var(--a-line)}

/* --------------------------------------------------------------------------
   3. VSL FRAME
   -------------------------------------------------------------------------- */
.vsl{width:100%;max-width:820px;margin:0 auto}
.vsl-frame{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--a-line);background:linear-gradient(150deg,var(--ink-3),var(--ink));
  box-shadow:0 30px 90px -40px var(--a-glow),0 0 0 1px rgba(255,255,255,.04) inset;
}
.vsl-frame iframe,.vsl-frame video{width:100%;height:100%;border:0;display:block}
/* placeholder shown until a real embed replaces it */
.vsl-ph{position:absolute;inset:0;display:grid;place-items:center;gap:14px;align-content:center;text-align:center;padding:20px}
.vsl-ph .play{
  width:70px;height:70px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--act-hi),var(--act) 55%,var(--act-lo));color:var(--act-ink);
  box-shadow:0 12px 40px -12px var(--act-glow);font-size:24px;padding-left:5px}
.vsl-ph .t{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-3)}
.vsl-cap{text-align:center;font-size:14.5px;color:var(--tx-3);margin-top:12px}

/* --------------------------------------------------------------------------
   4. HERO METRICS
   -------------------------------------------------------------------------- */
.metrics{
  width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
}
.metrics .cell{padding:20px 16px;border-right:1px solid var(--rule);text-align:center}
.metrics .cell:last-child{border-right:0}
.metrics .num{display:block;font-family:var(--mono);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(19px,2.5vw,27px);color:var(--a-hi);line-height:1.1}
.metrics .lbl{display:block;font-size:12px;line-height:1.4;color:var(--tx-3);margin-top:5px;
  letter-spacing:.02em;text-transform:uppercase}
@media (max-width:620px){.metrics .cell{border-right:0;border-bottom:1px solid var(--rule)}
  .metrics .cell:last-child{border-bottom:0}}

/* --------------------------------------------------------------------------
   5. MARQUEE TICKER
   -------------------------------------------------------------------------- */
.marquee{
  overflow:hidden;border-top:1px solid var(--a-line);border-bottom:1px solid var(--a-line);
  background:var(--a-soft);padding:11px 0;margin-top:clamp(26px,4vw,44px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee ul{display:flex;gap:0;list-style:none;margin:0;padding:0;width:max-content;
  animation:slide 38s linear infinite}
.marquee:hover ul{animation-play-state:paused}
.marquee li{display:flex;align-items:center;gap:16px;padding:0 16px;white-space:nowrap;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--a-hi)}
.marquee li::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--a);flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee ul{animation:none}}

/* --------------------------------------------------------------------------
   6. OPT-IN
   -------------------------------------------------------------------------- */
.optin-sec{
  background:
    radial-gradient(900px 420px at 50% 0%,var(--a-soft),transparent 62%),
    var(--ink-2);
  position:relative;overflow:hidden;
}
.optin-sec::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--rule) 1.1px,transparent 1.1px);
  background-size:22px 22px;opacity:.6;
  mask-image:radial-gradient(600px 320px at 50% 30%,#000,transparent);
  -webkit-mask-image:radial-gradient(600px 320px at 50% 30%,#000,transparent);
}
.optin-sec>*{position:relative;z-index:2}
.optin-card{
  max-width:560px;margin:0 auto;padding:clamp(26px,4vw,40px);text-align:center;
  border-radius:var(--r-lg);border:1px solid var(--a-line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  box-shadow:0 30px 80px -50px var(--a-glow);
}
.optin-card h2{font-size:clamp(24px,3.4vw,34px);margin-bottom:12px}
.reg-form{display:flex;flex-direction:column;gap:11px;margin-top:22px}
.reg-form input[type="text"],.reg-form input[type="email"]{
  padding:16px 20px;border-radius:999px;border:1px solid var(--rule-2);
  background:rgba(0,0,0,.34);color:var(--tx);font-family:var(--font);font-size:16px;width:100%;
}
.reg-form input::placeholder{color:var(--tx-3)}
.reg-form input:focus{border-color:var(--a);outline:none;background:rgba(0,0,0,.45)}
.reg-form .btn{width:100%;padding:19px 28px;font-size:17px}
.optin-fine{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:15px;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);
}
.optin-fine .free{color:var(--act)}
.optin-note{font-size:13px;color:var(--tx-3);margin-top:12px;line-height:1.5}

/* --------------------------------------------------------------------------
   7. PAIN / DISCOVER LISTS
   -------------------------------------------------------------------------- */
.itemlist{list-style:none;margin:0;padding:0;display:grid;gap:11px;max-width:66ch}
.itemlist.center{margin:0 auto}
.itemlist li{
  display:flex;align-items:flex-start;gap:14px;padding:15px 19px;border-radius:12px;
  font-size:16px;line-height:1.55;
}
.itemlist .ico{
  flex:none;width:25px;height:25px;border-radius:7px;display:grid;place-items:center;
  font-size:13px;font-weight:800;line-height:1;margin-top:1px;
}
/* negative — the pain block and the "you don't need" block */
.itemlist.neg li{border:1px solid var(--prule);background:#fff;color:var(--ptx-2)}
.itemlist.neg .ico{background:rgba(204,47,60,.1);color:#cc2f3c;border:1px solid rgba(204,47,60,.25)}
section.dark .itemlist.neg li,section.darker .itemlist.neg li{
  border-color:var(--rule);background:rgba(255,255,255,.03);color:var(--tx-2)}
/* positive — what they'll discover */
.itemlist.pos li{border:1px solid var(--prule);background:#fff;color:var(--ptx-2)}
.itemlist.pos .ico{background:var(--a-soft);color:var(--a-lo);border:1px solid var(--a-line)}
section.dark .itemlist.pos li,section.darker .itemlist.pos li{
  border-color:var(--rule);background:rgba(255,255,255,.03);color:var(--tx-2)}
section.dark .itemlist.pos .ico,section.darker .itemlist.pos .ico{color:var(--a-hi)}
.itemlist b{font-weight:700}

/* the "search split into 3" trio */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:26px 0}
.trio .t{
  padding:22px;border-radius:var(--r);text-align:center;
  border:1px solid var(--prule);background:#fff;
}
section.dark .trio .t,section.darker .trio .t{border-color:var(--rule);background:rgba(255,255,255,.035)}
.trio .t .n{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--a-lo);display:block;margin-bottom:7px}
section.dark .trio .t .n,section.darker .trio .t .n{color:var(--a)}
.trio .t .w{font-size:19px;font-weight:800;letter-spacing:-.02em}
.trio .t .d{font-size:14px;color:var(--ptx-3);margin-top:5px;line-height:1.45}
section.dark .trio .t .d,section.darker .trio .t .d{color:var(--tx-3)}

/* --------------------------------------------------------------------------
   8. PIVOT STATEMENT
   -------------------------------------------------------------------------- */
/* NB: `ch` resolves against the container's own font-size, not the child
   heading's — so the width cap lives in px here, not in ch. */
.pivot{text-align:center;max-width:880px;margin:0 auto}
.pivot h2{font-size:clamp(27px,4.6vw,50px);line-height:1.06;margin-bottom:0}

/* --------------------------------------------------------------------------
   9. PROOF CARDS
   -------------------------------------------------------------------------- */
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.proof-card{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  display:flex;flex-direction:column;
}
.proof-card .shot{aspect-ratio:16/10;border-bottom:1px solid var(--rule);
  background:rgba(0,0,0,.3);display:grid;place-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3)}
.proof-card .shot img{width:100%;height:100%;object-fit:cover}
.proof-card .body{padding:19px}
.proof-card .fig{display:block;font-family:var(--mono);font-size:clamp(19px,2.4vw,24px);
  font-weight:700;color:var(--a-hi);letter-spacing:-.02em}
.proof-card p{font-size:14.5px;line-height:1.55;color:var(--tx-2);margin:7px 0 0}
.proof-card cite{font-style:normal;display:block;font-size:13px;color:var(--tx-3);margin-top:9px}

/* --------------------------------------------------------------------------
   10. SCARCITY STRIP
   -------------------------------------------------------------------------- */
.scarcity{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  padding:16px 22px;border-radius:var(--r);margin:0 auto 26px;max-width:660px;
  border:1px solid rgba(248,199,42,.32);background:rgba(248,199,42,.08);
}
.scarcity .s{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--act-hi)}
.scarcity .s::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--act);flex:none}

/* countdown to the session */
.cd{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:0 auto}
.cd .u{min-width:74px;padding:11px 9px;border-radius:var(--r);text-align:center;
  border:1px solid var(--rule-2);background:rgba(255,255,255,.035)}
.cd .v{font-family:var(--mono);font-size:clamp(21px,3vw,28px);font-weight:700;
  color:var(--a-hi);font-variant-numeric:tabular-nums;line-height:1.1}
.cd .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-3);margin-top:3px}

/* --------------------------------------------------------------------------
   11. THANK-YOU PAGE
   -------------------------------------------------------------------------- */
.confirm{text-align:center;max-width:620px;margin:0 auto}
.confirm .tick{
  width:74px;height:74px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;
  background:var(--a-soft);border:2px solid var(--a);color:var(--a);font-size:35px;line-height:1;
  box-shadow:0 0 44px -10px var(--a-glow);
}
.steps{counter-reset:s;display:grid;gap:12px;max-width:640px;margin:0 auto}
.steps li{
  list-style:none;position:relative;padding:19px 22px 19px 64px;border-radius:var(--r);
  border:1px solid var(--rule);background:rgba(255,255,255,.03);
}
.steps li::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:17px;width:29px;height:29px;border-radius:9px;
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:700;
  background:var(--a-soft);color:var(--a);border:1px solid var(--a-line);
}
.steps li b{display:block;font-size:16.5px;color:var(--tx);margin-bottom:3px}
.steps li span{font-size:15px;color:var(--tx-2);line-height:1.55}
section.paper .steps li,section.paper-2 .steps li{background:#fff;border-color:var(--prule)}
section.paper .steps li b,section.paper-2 .steps li b{color:var(--ptx)}
section.paper .steps li span,section.paper-2 .steps li span{color:var(--ptx-2)}
section.paper .steps li::before,section.paper-2 .steps li::before{color:var(--a-lo)}

.calrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}

/* --------------------------------------------------------------------------
   12. LEGAL FOOTER
   -------------------------------------------------------------------------- */
.f-links{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-bottom:20px;
  font-size:13.5px}
.f-links a{color:var(--tx-2)}
.f-links a:hover{color:var(--a-hi)}
.legal-note p+p{margin-top:11px}