/* Skaling funnel v2, FINAL (2026-10-01): prototype C + grafts from A and B (funnel/v2/JUDGING.md).
   Grafts: A's big condensed hero headline (Archivo at font-stretch 75%) and its click-to-play bridge video with the
   "Since 2017 / $100M+" poster; A's "20 / 10 / 4" figure row on Test Factory; B's yellow check icons on the three "no"s
   and B's uncropped tracker screenshot. Upsell decisions (Yes + No thanks) fit one 390x844 phone screen.
   Direction: what the 16-funnel Meta teardown shows winning for cold course traffic right now.
   - Light, warm off-white base (#FAF8F3), white rounded cards, near-black ink. Light beat dark 11 to 5.
   - ONE loud colour: the logo's coin yellow, on buttons (ink text) and the one highlighter phrase. Nothing else is yellow-filled.
   - ONE dark band (the proof/stats band, brand navy). Everything else light. Disclaimers live in the footer, small.
   - Heavy grotesk headlines (Archivo 800) + Inter body. Phone headlines ~30px, body 17-18px.
   - Pill buttons 60px tall with the price inside on add-ons, a sticky bottom button on phones.
   - Checkout framed as a secure tray (lock + "Payments by Whop") per Baymard's perceived-security research.
   Mobile first; a few min-width tweaks at the bottom.
   Classes that assets/offer.js writes: .checkout-wait .checkout-dev .checkout-err .spinner .dev-sim .sum-row(.total) .is-hidden
   (plus the preview mock inside .checkout-dev: .mock .mock-* .dev-info). */

:root{
  --bg:#FAF8F3; --bg-alt:#F3EFE6; --card:#FFFFFF;
  --ink:#14161A; --text:#2B2E35; --muted:#5E626B; --faint:#878B94;
  --line:#E7E2D6; --line-strong:#D6CFBF;
  --accent:#FFC83D; --accent-hi:#FFD35C; --accent-edge:#E2A50F; --accent-press:#F2B71C;
  --accent-soft:#FFF6DB; --hl:#FFDF6B; --gold-ink:#7D5800;
  --navy:#0D1222; --navy-2:#171E35; --navy-line:rgba(255,255,255,.1); --navy-text:#C3C8D6;
  --ok:#16803E; --ok-bg:#E8F5EC; --ok-ink:#0E4826;
  --warn-bg:#FDEEEC; --warn-ink:#7A1E14;
  --wrap:600px;
  --r:16px;
  --shadow-sm:0 1px 2px rgba(20,22,26,.05),0 3px 10px -6px rgba(20,22,26,.12);
  --shadow:0 1px 2px rgba(20,22,26,.05),0 16px 36px -18px rgba(20,22,26,.30);
  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* icons (data URIs, so no extra requests) */
  --i-check-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.5'/%3E%3C/svg%3E");
  --i-check-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.5'/%3E%3C/svg%3E");
  --i-check-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316803E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.5'/%3E%3C/svg%3E");
  --i-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  --i-x-muted:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23878B94' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  --i-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316803E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9.5' rx='2.2'/%3E%3Cpath d='M8.5 11V8a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E");
  --i-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316803E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*{box-sizing:border-box}
[hidden]{display:none !important}
.is-hidden{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:12px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em;text-wrap:pretty}
li{text-wrap:pretty}
b,strong{color:var(--ink);font-weight:700}
h1,h2,h3{font-family:var(--display);color:var(--ink);font-weight:800;letter-spacing:-.025em;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:31px}
h2{font-size:27px;line-height:1.12}
h3{font-size:19px;letter-spacing:-.015em;line-height:1.25}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.lede,.sub{font-size:18px;line-height:1.55;color:#3B3E46}
.small{font-size:14.5px;line-height:1.5;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
main.page{min-height:100vh} /* keeps the footer (disclaimers) below the fold */
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
.hl{background:linear-gradient(180deg,transparent 54%,var(--hl) 54%,var(--hl) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em;margin:0 -.04em}
.eyebrow{display:block;margin:0 0 10px;font:700 12.5px/1.3 var(--font);letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink)}

/* ---------- the one button style ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:14px 26px;border:0;border-radius:999px;font:700 18.5px/1.2 var(--font);letter-spacing:-.01em;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .12s,transform .12s}
.btn-primary{background:var(--accent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent-edge),inset 0 -3px 0 rgba(140,90,0,.16),0 12px 24px -12px rgba(205,140,0,.75)}
.btn-primary:hover{background:var(--accent-hi)}
.btn-primary:active{background:var(--accent-press);transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn-block{display:flex;width:100%}
.btn .arr{flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--i-arrow) center/contain no-repeat;mask:var(--i-arrow) center/contain no-repeat}
.btn-price{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--ink);color:#FFD35C;font-weight:800;font-size:16.5px;letter-spacing:0;line-height:1.25}
.btn-note{margin:11px 0 0;text-align:center;font-size:14.5px;line-height:1.45;color:var(--muted)}
.btn-note .dot{display:inline-block;width:4px;height:4px;margin:0 8px 3px;border-radius:50%;background:var(--line-strong)}
.text-link{color:var(--ink);font-weight:700}

/* ---------- lists ---------- */
.ticks,.crosses{list-style:none;margin:0 0 22px;padding:0}
.ticks li,.crosses li{position:relative;padding:5px 0 5px 34px;font-size:17px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:23px;height:23px;border-radius:50%;background:var(--accent) var(--i-check-ink) center/14px no-repeat;box-shadow:inset 0 0 0 1px var(--accent-edge)}
.crosses li{color:var(--muted)}
.crosses li::before{content:"";position:absolute;left:0;top:7px;width:23px;height:23px;border-radius:50%;background:#EEEAE1 var(--i-x-muted) center/12px no-repeat}

/* ---------- status notices ---------- */
.notice{border-radius:14px;padding:12px 14px;margin:0 0 16px;font-size:15.5px;line-height:1.5}
.notice p{margin:0}
.notice a{color:inherit;font-weight:700}
.notice svg{display:none}
.notice-ok{background:var(--ok-bg);color:var(--ok-ink);box-shadow:inset 0 0 0 1px #CBE8D5}
.notice-ok strong{color:var(--ok-ink)}
.notice-warn{background:var(--warn-bg);color:var(--warn-ink);box-shadow:inset 0 0 0 1px #F4CFC9}
.notice-warn strong{color:var(--warn-ink)}

/* ---------- header (/join/) ---------- */
.top{background:#fff;border-bottom:1px solid var(--line)}
.top-in{max-width:var(--wrap);margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font:800 19px/1 var(--display);letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand img{width:34px;height:34px;border-radius:9px}
.top-secure{display:flex;align-items:center;gap:6px;font:600 13px/1.2 var(--font);color:var(--muted);white-space:nowrap}
.top-secure::before{content:"";width:15px;height:15px;background:var(--i-lock) center/contain no-repeat}

/* ---------- /join/ hero ---------- */
.hero{padding:18px 0 36px}
.callout{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 13px 6px 10px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-sm);font:600 13.5px/1.3 var(--font);color:var(--ink)}
.callout .pulse{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(255,200,61,.35)}
.hero h1{margin:0 0 12px;font-family:"Archivo","Arial Narrow","Roboto Condensed",Arial,sans-serif;font-stretch:75%;font-weight:900;font-size:32px;line-height:1.04;letter-spacing:-.012em}
.hero h1 .hl{background:linear-gradient(180deg,transparent 58%,var(--hl) 58%,var(--hl) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .lede{margin:0 0 16px;font-size:17px}
.nots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 18px;padding:0;list-style:none}
.nots li{display:flex;align-items:center;gap:7px;padding:8px 9px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:600 13px/1.2 var(--font);color:var(--ink)}
.nots li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--accent) var(--i-check-ink) center/11px no-repeat;box-shadow:inset 0 0 0 1px var(--accent-edge)}
.hero .hero-sub{margin:22px 0 12px;font-size:16.5px}
.hero .nots{margin:0}

/* ---------- /join/ VSL player (2026-10-02) ----------
   Before the tap: .vid-cover = the blurred, darkened muted preview loop (or the blurred poster when muted autoplay is
   blocked, reduced motion is on, or data saver is on) under a centred "Tap to watch with sound" card. The whole player
   is one button. assets/ui.js adds .is-loading on tap (spinner in the play button until the real video is playing),
   then .is-playing (cover + card fade out, native controls), and shows .vid-end when it finishes.
   No JS: cover + card are hidden and the plain native player works. Tweak the blur in ONE place: .vid-cover img,video. */
.vid{position:relative;display:block;aspect-ratio:16/9;margin:0 0 16px;border-radius:18px;overflow:hidden;background:var(--navy);box-shadow:0 0 0 1px rgba(13,18,34,.08),0 24px 46px -24px rgba(13,18,34,.6);isolation:isolate}
.vid video,.vid-cover img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.vid .vid-main{background:var(--navy)}
.vid-cover{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--navy);transition:opacity .45s ease,visibility 0s linear .45s}
/* the video is dark navy already, so it is brightened (not darkened) and blurred just enough to read as a moving screen */
.vid-cover img,.vid-cover video{filter:blur(5px) brightness(1.15) contrast(1.15) saturate(1.3);transform:scale(1.08)}
.vid-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(75% 85% at 50% 50%,rgba(13,18,34,.1) 0,rgba(13,18,34,.32) 100%)}
.vid .play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;margin:0;padding:10px;border:0;background:transparent;color:#fff;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .3s ease,visibility 0s linear .3s}
.play-card{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 18px 11px;border-radius:16px;background:rgba(13,18,34,.3);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.62),0 18px 40px -14px rgba(0,0,0,.6);text-align:center;transition:transform .15s ease}
.vid .play:hover .play-card{transform:scale(1.03)}
.vid .play:focus-visible .play-card{outline:3px solid var(--accent);outline-offset:3px}
.play-kicker{font:800 11.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.play-btn{position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-edge),0 8px 20px -6px rgba(0,0,0,.6)}
.play-btn::before{content:"";position:absolute;inset:0;border-radius:50%;animation:vidPulse 1.8s ease-out infinite}
.play-btn svg{width:26px;height:26px;margin-left:4px;fill:var(--ink)}
.play-text{font:800 17px/1.15 var(--font);letter-spacing:-.01em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.play-meta{display:inline-flex;align-items:center;gap:5px;font:600 13px/1 var(--font);color:rgba(255,255,255,.82)}
.play-meta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes vidPulse{0%{box-shadow:0 0 0 0 rgba(255,200,61,.7)}75%,100%{box-shadow:0 0 0 18px rgba(255,200,61,0)}}
.vid.is-loading .play-btn::before{inset:17px;border:3px solid rgba(20,22,26,.22);border-top-color:var(--ink);box-shadow:none;animation:spin .8s linear infinite}
.vid.is-loading .play-btn svg{visibility:hidden}
.vid.is-playing .vid-cover,.vid.is-playing .play{opacity:0;visibility:hidden;pointer-events:none}
.no-js .vid-cover,.no-js .vid .play{display:none}
.vid-end{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;background:rgba(13,18,34,.92)}
.vid-end .btn{min-height:52px;padding:12px 22px;font-size:17px}
.vid-replay{padding:8px 12px;border:0;background:transparent;color:#fff;font:600 14.5px/1.2 var(--font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.vid-replay:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}

/* ---------- sections ---------- */
.sec{padding:52px 0}
.sec-white{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec h2{margin:0 0 12px}
.sec .lede{font-size:17.5px;margin:0 0 24px}
.sec-cta{margin-top:8px}

/* the one dark band: proof */
.band-dark{background:var(--navy);color:var(--navy-text);padding:48px 0 50px;background-image:radial-gradient(120% 60% at 100% 0,rgba(255,200,61,.10),transparent 60%)}
.band-dark h2{color:#fff}
.band-dark b,.band-dark strong{color:#fff}
.band-dark .eyebrow{color:var(--accent)}
.band-dark p{font-size:17px;line-height:1.6}
.stats{margin:24px 0 26px;border-top:1px solid var(--navy-line)}
.stat{display:grid;grid-template-columns:minmax(128px,auto) 1fr;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--navy-line)}
.stat b{font:900 24px/1.05 var(--display);letter-spacing:-.02em;color:var(--accent);white-space:nowrap}
.stat span{font-size:15px;line-height:1.4;color:var(--navy-text)}
.shot{margin:0}
.shot-img{width:100%;border-radius:12px;background:#fff;box-shadow:0 22px 44px -20px rgba(0,0,0,.7);outline:1px solid rgba(255,255,255,.08)}
.win{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 22px 44px -20px rgba(0,0,0,.7);outline:1px solid rgba(255,255,255,.08)}
.win-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#EDEFF3;border-bottom:1px solid #DADEE6}
.win-bar i{width:9px;height:9px;border-radius:50%;background:#C8CDD7}
.win-bar span{margin-left:8px;font:600 11.5px/1 var(--font);color:#7C8291}
.shot figcaption{margin-top:12px;font-size:14.5px;line-height:1.5;color:#A9AFBF}
.shot figcaption strong{color:#fff}

/* how it works: numbered timeline */
.steps-list{list-style:none;margin:4px 0 22px;padding:0;counter-reset:s}
.steps-list li{position:relative;counter-increment:s;padding:0 0 22px 58px}
.steps-list li::before{content:counter(s);position:absolute;left:0;top:-3px;width:42px;height:42px;border-radius:13px;background:var(--accent);color:var(--ink);font:900 19px/42px var(--display);text-align:center;box-shadow:inset 0 0 0 1px var(--accent-edge)}
.steps-list li::after{content:"";position:absolute;left:20px;top:46px;bottom:2px;width:2px;background:repeating-linear-gradient(var(--line-strong) 0 4px,transparent 4px 9px)}
.steps-list li:last-child{padding-bottom:0}
.steps-list li:last-child::after{display:none}
.steps-list h3{margin:5px 0 4px;font-size:19px}
.steps-list p{margin:0;font-size:16.5px;line-height:1.55}
.note-card{margin:0;padding:15px 16px 15px 18px;border-radius:14px;background:#fff;box-shadow:inset 4px 0 0 var(--accent),inset 0 0 0 1px var(--line);font-size:16.5px;line-height:1.5;color:var(--ink);font-weight:600}

/* what you get: icon cards */
.get{display:grid;gap:10px;margin:0 0 26px}
.get-item{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:16px 16px 15px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-sm)}
.get-ic{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px #F5DF9E;display:grid;place-items:center}
.get-ic svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.get-item h3{font-size:17.5px;margin:1px 0 3px}
.get-item p{margin:0;font-size:15.5px;line-height:1.5;color:var(--muted)}
.get-item.bonus{background:var(--navy);box-shadow:none}
.get-item.bonus h3{color:#fff}
.get-item.bonus p{color:var(--navy-text)}
.get-item.bonus .get-ic{background:rgba(255,200,61,.14);box-shadow:inset 0 0 0 1px rgba(255,200,61,.35)}
.get-item.bonus .get-ic svg{stroke:var(--accent)}

/* ---------- /join/ checkout card ---------- */
.order-sec{padding:48px 0 52px;background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.order-sec>.wrap>.eyebrow{text-align:center}
.order-sec>.wrap>h2{text-align:center;margin:0 0 20px}
.order{background:#fff;border-radius:24px;padding:20px 16px 20px;box-shadow:inset 0 0 0 1px var(--line),0 28px 60px -28px rgba(20,22,26,.35)}
.order-head{display:flex;gap:12px;align-items:center;margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--line)}
.order-head img{flex:none;width:48px;height:48px;border-radius:13px}
.order-head h2{font-size:22px;margin:0}
.order-head p{margin:3px 0 0;font-size:14.5px;line-height:1.35;color:var(--muted)}
.step-label{display:flex;align-items:center;gap:9px;margin:0 0 10px;font:700 15.5px/1.3 var(--font);color:var(--ink)}
.step-label .n{flex:none;width:23px;height:23px;border-radius:50%;background:var(--ink);color:#fff;font:700 12.5px/23px var(--font);text-align:center}
.step-label .opt{font-weight:500;color:var(--muted)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px}
.plan-opt{position:relative;display:block;cursor:pointer}
.plan-opt input{position:absolute;opacity:0;width:1px;height:1px}
.plan-box{position:relative;display:flex;flex-direction:column;align-items:flex-start;height:100%;padding:13px 13px 14px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .15s,background-color .15s}
.plan-box::after{content:"";position:absolute;right:11px;top:12px;width:21px;height:21px;border-radius:50%;box-shadow:inset 0 0 0 2px #BDB6A7;background:#fff}
.plan-name{font:600 14.5px/1.3 var(--font);color:var(--muted)}
.plan-price{margin-top:6px;font:800 29px/1 var(--display);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.plan-price small{font:600 14px var(--font);letter-spacing:0;color:var(--muted)}
.save{margin-top:9px;padding:3px 9px;border-radius:999px;background:var(--ok-bg);color:#0F6B33;font:700 12.5px/1.3 var(--font);box-shadow:inset 0 0 0 1px #CBE8D5}
.plan-opt input:checked+.plan-box{background:#FFFCF1;box-shadow:inset 0 0 0 2px var(--ink),0 0 0 4px rgba(255,200,61,.45)}
.plan-opt input:checked+.plan-box::after{box-shadow:none;background:var(--ink) var(--i-check-white) center/12px no-repeat}
.plan-opt input:focus-visible+.plan-box{outline:3px solid var(--ink);outline-offset:3px}
.bump{margin:0 0 22px;padding:14px 14px 13px;border:2px dashed var(--accent-edge);border-radius:16px;background:var(--accent-soft)}
.bump-row{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.bump-row input{-webkit-appearance:none;appearance:none;flex:none;width:25px;height:25px;margin:0;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 2px var(--ink);cursor:pointer}
.bump-row input:checked{background:var(--ink) var(--i-check-white) center/15px no-repeat}
.bump-row input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.bump-title{display:block;font:800 16.5px/1.35 var(--font);color:var(--ink);padding-top:1px}
.bump p{margin:8px 0 0 37px;font-size:15px;line-height:1.5;color:var(--text)}
.bump .bump-fine{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:13.5px;color:var(--muted)}
.bump .bump-fine::before{content:"";flex:none;width:15px;height:15px;background:var(--i-shield) center/contain no-repeat}

/* secure payment tray around Whop's frame (Baymard: a distinct container + lock raises perceived security) */
.paybox{border-radius:18px;background:#F4F2ED;padding:12px;box-shadow:inset 0 0 0 1px var(--line)}
.paybox-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:1px 3px 10px;font:600 13.5px/1.3 var(--font);color:var(--ink)}
.paybox-head .lock{display:inline-flex;align-items:center;gap:6px}
.paybox-head .lock::before{content:"";flex:none;width:15px;height:15px;background:var(--i-lock) center/contain no-repeat}
.paybox-head .by{color:var(--muted);font-weight:500;text-align:right}
.billing{margin:0 3px 11px;font-size:14px;line-height:1.45;color:var(--ink)}
.billing b{font-weight:700}
.consent{margin:10px 3px 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.guarantee{display:grid;grid-template-columns:60px 1fr;gap:14px;align-items:center;margin:18px 0 0;padding:16px 2px 0;border-top:1px solid var(--line)}
.seal{width:60px;height:60px}
.guarantee b{display:block;font:800 16px/1.3 var(--display);letter-spacing:-.01em}
.guarantee p{margin:3px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}

/* Whop mount point + our own wait / preview / error boxes */
.checkout-slot{position:relative}
.checkout-wait,.checkout-err{display:grid;place-items:center;align-content:center;gap:8px;min-height:300px;padding:18px;border-radius:12px;text-align:center;font-size:15px;line-height:1.5;color:var(--muted);background:#fff}
.checkout-err{background:var(--warn-bg);color:var(--warn-ink)}
.checkout-err b{color:var(--warn-ink)}
.checkout-err a{font-weight:700}
.checkout-pick{min-height:0;padding:18px;font-weight:600;color:var(--ink)}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ink);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.checkout-dev{display:block;padding:14px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(20,22,26,.08)}
.mock{display:grid;gap:9px}
.mock-price{margin:2px 0 4px;text-align:center;font:800 22px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.mock-wallet{display:grid;place-items:center;height:46px;border-radius:10px;background:#111;color:#fff;font:600 15.5px/1 var(--font)}
.mock-or{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--faint)}
.mock-or::before,.mock-or::after{content:"";flex:1;height:1px;background:#E6E2DA}
.mock-f{display:flex;align-items:center;height:44px;padding:0 12px;border-radius:9px;background:#FCFBF9;box-shadow:inset 0 0 0 1px #DCD7CC;font-size:14px;color:#A2A6AE}
.mock-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mock-btn{display:grid;place-items:center;height:50px;margin-top:3px;border-radius:10px;background:#F5A524;color:#1A1205;font:700 15.5px/1 var(--font)}
.dev-info{display:grid;gap:3px;margin-top:12px;padding:10px 12px;border-radius:10px;box-shadow:inset 0 0 0 1.5px #D9D2C2;font-size:12.5px;line-height:1.45;color:var(--muted);background:repeating-linear-gradient(-45deg,#FBFAF7 0 8px,#F6F4EF 8px 16px)}
.dev-info b{color:var(--ink);font-size:13px}
.dev-info code{font-size:11.5px;background:#EFECE5;border-radius:4px;padding:1px 5px;color:var(--ink);word-break:break-all}
.dev-sim{display:block;width:100%;margin-top:10px;padding:12px 16px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:700 15px/1.2 var(--font);cursor:pointer}
.dev-sim:hover{background:var(--bg)}

/* who it's for */
.who-grid{display:grid;gap:12px}
.who-card{padding:18px 18px 8px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-sm)}
.who-card.no{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.who-card h3{margin:0 0 8px;font-size:17px}
.who-card .ticks li,.who-card .crosses li{font-size:16px}
.who-card .ticks,.who-card .crosses{margin-bottom:10px}

/* FAQ */
.faq{display:grid;gap:8px}
.faq details{border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 16px;font:700 16.5px/1.35 var(--font);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bg-alt);font:500 20px/1 var(--font);color:var(--ink)}
.faq details[open] summary::after{content:"\2212";background:var(--accent)}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:14px}
.faq .a{padding:0 16px 16px;font-size:16px;line-height:1.55}
.faq .a p:last-child{margin:0}
.faq .a a{font-weight:700}

/* final */
.final{padding:56px 0 64px;text-align:center}
.final-box img{width:56px;height:56px;margin:0 auto 16px;border-radius:15px}
.final-box h2{font-size:29px;margin:0 0 20px}

/* ---------- footer: every disclaimer lives here, small ---------- */
.foot{background:#EFEBE2;border-top:1px solid var(--line)}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:28px 16px 40px;font-size:12.5px;line-height:1.6;color:#5F636C}
.foot-in p{margin:0 0 10px}
.foot-brand{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:800 15px/1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.foot-brand img{width:24px;height:24px;border-radius:6px}
.foot-links{font-size:13.5px;margin-bottom:14px !important}
.foot-links a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.foot-in strong{color:#3E424A;font-weight:700}
.foot-in a{color:inherit}
.has-sticky .foot-in{padding-bottom:130px}

/* ---------- sticky phone button ---------- */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-top:1px solid var(--line);box-shadow:0 -10px 28px -14px rgba(20,22,26,.25);transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility .25s}
.stickybar.show{transform:none;visibility:visible}
.stickybar-in{max-width:var(--wrap);margin:0 auto}
.stickybar .btn{width:100%;min-height:56px;font-size:17.5px}
.stickybar .sb-no{margin:4px 0 0;text-align:center;font-size:14px;line-height:1.2}
.stickybar .sb-no a{display:inline-block;padding:6px 8px 2px;color:#4A4E57;text-decoration:underline;text-underline-offset:3px}

/* ======================= offer pages (/next/*) and /welcome/ ======================= */
/* step bar (Mindvalley's "1 · 2 Customize your order · 3") */
.progress{background:#fff;border-bottom:1px solid var(--line)}
.progress-in{max-width:var(--wrap);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px}
.progress-in>img{flex:none;width:28px;height:28px;border-radius:8px}
.progress ol{flex:1;display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;min-width:0}
.progress li{display:flex;align-items:center;gap:6px;font:600 12.5px/1.2 var(--font);color:var(--muted);white-space:nowrap}
.progress li .c{flex:none;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);font:700 11px/1 var(--font);color:var(--muted)}
.progress li.done{color:var(--ok-ink)}
.progress li.done .c{background:var(--ok) var(--i-check-white) center/12px no-repeat;box-shadow:none;color:transparent}
.progress li.now{color:var(--ink)}
.progress li.now .c{background:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-edge);color:var(--ink)}
.progress .bar{flex:1;min-width:8px;height:2px;border-radius:2px;background:var(--line)}
.progress .bar.done{background:var(--ok)}

.offer main .wrap,.welcome main .wrap{padding-top:20px;padding-bottom:40px}
.ok-line{display:inline-flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:5px 12px 5px 6px;border-radius:999px;background:var(--ok-bg);color:var(--ok-ink);font:600 14px/1.25 var(--font);box-shadow:inset 0 0 0 1px #CBE8D5}
.ok-line::before{content:"";flex:none;margin-top:-1px;width:19px;height:19px;border-radius:50%;background:var(--ok) var(--i-check-white) center/11px no-repeat}
.demo-tag{color:var(--muted);font-size:12.5px;font-weight:500}
.offer h1{font-size:29px;margin:0 0 8px}
.offer .sub{font-size:17px;margin:0 0 16px}
.offer .ticks{margin:0 0 20px}
.offer .ticks li{font-size:16.5px;padding-top:4px;padding-bottom:4px}
.offer .ticks li::before{top:6px}

/* product visuals */
.visual{margin:0 0 18px;border-radius:18px;overflow:hidden;background:var(--navy);box-shadow:var(--shadow)}
.visual img{width:100%}
.visual figcaption{padding:10px 14px 11px;background:#fff;font-size:13.5px;line-height:1.4;color:var(--muted);border-top:1px solid var(--line)}
/* Test Factory: one row of 4 (the top row of the 4x2 pack image) + the "20 / 10 / 4" figures */
.visual.strip{margin-bottom:12px}
.visual.strip img{aspect-ratio:800/262;object-fit:cover;object-position:top}
.visual.strip figcaption{padding:8px 12px 9px;font-size:13px}
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.figs div{padding:10px 6px 9px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-sm);text-align:center}
.figs b{display:block;font:900 30px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.figs b::after{content:"";display:block;width:26px;height:4px;margin:6px auto 0;border-radius:2px;background:var(--accent)}
.figs span{display:block;margin-top:6px;font:600 13px/1.2 var(--font);color:var(--muted)}
.vip-visual{position:relative}
.vip-visual .tg{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border-radius:999px;background:#fff;color:var(--ink);font:700 13px/1.2 var(--font);box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.vip-visual .tg i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#2AABEE}
.vip-visual .tg svg{width:13px;height:13px;fill:#fff;margin-left:-1px}
/* AI Power-Up: the six tools, drawn (no fake chat) */
.tools{padding:14px;background:var(--navy);background-image:radial-gradient(90% 70% at 100% 0,rgba(255,200,61,.14),transparent 60%)}
.tools-head{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.tools-head img{width:34px;height:34px;border-radius:9px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.tools-head b{display:block;color:#fff;font:800 18px/1.1 var(--display);letter-spacing:-.01em}
.tools-head span{display:block;margin-top:3px;color:var(--navy-text);font-size:12.5px}
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;list-style:none;margin:0;padding:0}
.tools-grid li{display:flex;align-items:center;gap:8px;padding:9px 9px;border-radius:11px;background:var(--navy-2);box-shadow:inset 0 0 0 1px var(--navy-line);color:#fff;font:600 13px/1.2 var(--font);white-space:nowrap}
.tools-grid svg{flex:none;width:17px;height:17px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the buy block: Yes button (reveals the Whop checkout), the VIP renewal line, the checkout, then No thanks */
.buy{margin:0}
.buy .btn,.stickybar .btn{padding-left:16px;padding-right:16px}
.pay-note{margin:9px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.offer .billing{margin:12px 2px 0;text-align:center;font-size:14px}
.offer .billing b{font-weight:600}
.reveal{margin-top:14px}
html:not(.no-js) .reveal:not(.open){max-height:0;margin:0;opacity:0;overflow:hidden;pointer-events:none}
.reveal.open{animation:revealIn .3s ease}
@keyframes revealIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.no-js [data-open-pay]{display:none}
.pay-open [data-open-pay],.pay-open .pay-note{display:none}
.pay-open .offer .billing,.pay-open .buy>.billing{margin-top:0}
.no-thanks{margin:6px 0 0;text-align:center;font-size:16px}
.no-thanks a{display:inline-block;padding:10px 8px;color:#4A4E57;text-decoration:underline;text-underline-offset:3px}
.no-thanks a:hover{color:var(--ink)}

/* Launch Kit lane picker */
.pick-label{display:block;margin:0 0 8px;font:700 15.5px/1.3 var(--font);color:var(--ink)}
.kit-pick{margin:0 0 14px;border-radius:18px;transition:box-shadow .2s}
.kit-pick.attn{box-shadow:0 0 0 4px rgba(255,200,61,.6)}
.kit-picks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kit-opt{position:relative;display:block;cursor:pointer}
.kit-opt input{position:absolute;opacity:0;width:1px;height:1px}
.kit-box{display:block;height:100%;padding:7px 7px 11px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .15s}
.kit-box{padding:6px 6px 9px}
.kit-box img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:11px;background:var(--bg-alt)}
.kit-name{display:flex;align-items:center;gap:8px;margin:8px 4px 0;font:700 15.5px/1.25 var(--font);color:var(--ink)}
.kit-name::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px #BDB6A7;background:#fff}
.kit-opt input:checked+.kit-box{background:#FFFCF1;box-shadow:inset 0 0 0 2px var(--ink),0 0 0 4px rgba(255,200,61,.45)}
.kit-opt input:checked+.kit-box .kit-name::before{box-shadow:none;background:var(--ink) var(--i-check-white) center/11px no-repeat}
.kit-opt input:focus-visible+.kit-box{outline:3px solid var(--ink);outline-offset:2px}
.kit-hint{margin:8px 0 0;font-size:14px;color:var(--gold-ink);font-weight:600}

/* ======================= /welcome/ ======================= */
.demo-line{margin:0 0 8px;font-size:12.5px;color:var(--muted)}
.w-hero{text-align:left}
.w-badge{display:grid;place-items:center;width:50px;height:50px;margin:2px 0 14px;border-radius:15px;background:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-edge),0 12px 24px -12px rgba(205,140,0,.8)}
.w-badge::before{content:"";width:26px;height:26px;background:var(--i-check-ink) center/contain no-repeat}
.welcome h1{font-size:32px;margin:0 0 10px}
.welcome .sub{margin:0 0 20px}
.w-steps{list-style:none;margin:0 0 20px;padding:4px 16px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-sm);counter-reset:w}
.w-steps li{position:relative;counter-increment:w;padding:14px 0 14px 46px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.45}
.w-steps li:last-child{border-bottom:0}
.w-steps li::before{content:counter(w);position:absolute;left:0;top:13px;width:30px;height:30px;border-radius:9px;background:var(--bg-alt);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink);font:800 15px/30px var(--display);text-align:center}
.w-steps b{display:block;font-size:16.5px}
.login-note{margin:12px 0 0;text-align:center}
.dev-note{display:block;margin-top:8px;font-size:12.5px;color:#1558B0;text-align:center}
.w-sec{margin-top:28px}
.w-sec h2{font-size:21px;margin:0 0 12px}
.w-sec p{font-size:16px}
.w-sec p:last-child{margin-bottom:0}
.w-sec a{font-weight:700}
.claim-box{margin:22px 0 0;padding:16px 16px 14px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-sm)}
.claim-box.gold{background:var(--navy);box-shadow:none;color:var(--navy-text)}
.claim-box.gold h3{color:var(--accent)}
.claim-box.gold strong{color:#fff}
.claim-box h3{margin:0 0 6px;font-size:18px}
.claim-box p{font-size:15.5px;line-height:1.5}
.claim-box p:last-child{margin-bottom:0}
.claim-box a{font-weight:700}
.claim-box .btn{margin-top:4px}
.added{margin:22px 0 0;padding:16px;border-radius:var(--r);background:var(--accent-soft);box-shadow:inset 0 0 0 1px #F2DB97}
.added h3{margin:0 0 8px;font-size:17px}
.added ul{margin:0;padding:0;list-style:none;font-size:15.5px;line-height:1.5}
.added li{position:relative;margin:6px 0;padding-left:24px}
.added li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;background:var(--i-check-ok) center/contain no-repeat}
.summary{padding:16px 16px 14px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-sm)}
.summary h2{font-size:18px;margin:0 0 6px}
.sum-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line-strong);font-size:15.5px;line-height:1.4}
.sum-row b{white-space:nowrap}
.sum-row small{display:block;font-size:13.5px;color:var(--muted)}
.sum-row.total{border-bottom:0;font-weight:800;color:var(--ink)}
.sum-note{margin:8px 0 0;font-size:14.5px;line-height:1.5}
.sum-shot{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.help-line{margin:24px 0 0;text-align:center;font-size:15.5px;color:var(--muted)}
.help-line a{color:var(--ink);font-weight:700}
.vip-box{padding:18px 16px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.vip-box>p{font-size:16px}
.vip-checkout{margin-top:16px}

/* ---------- wider screens ---------- */
@media (min-width:600px){
  .wrap,.top-in,.foot-in,.progress-in{padding-left:24px;padding-right:24px}
  h1{font-size:42px}
  .hero h1{font-size:48px}
  .offer h1{font-size:36px}
  .welcome h1{font-size:38px}
  h2{font-size:32px}
  .hero{padding-top:44px}
  .vid-cover img,.vid-cover video{filter:blur(6px) brightness(1.15) contrast(1.15) saturate(1.3)}
  .play-card{gap:9px;padding:17px 30px 15px}
  .play-kicker{font-size:12.5px}
  .play-btn{width:78px;height:78px}
  .play-btn svg{width:32px;height:32px;margin-left:5px}
  .play-text{font-size:21px}
  .play-meta{font-size:14px}
  .vid.is-loading .play-btn::before{inset:23px}
  .order{padding:26px 26px 24px}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:0;gap:12px}
  .stat{grid-template-columns:1fr;gap:6px;padding:16px;border:1px solid var(--navy-line);border-radius:14px;align-items:start}
  .who-grid{grid-template-columns:1fr 1fr}
  .get{grid-template-columns:1fr 1fr}
  .get-item.bonus{grid-column:1 / -1}
  .offer main .wrap,.welcome main .wrap{padding-top:36px}
}
@media (min-width:900px){
  .stickybar{display:none}
  .has-sticky .foot-in{padding-bottom:40px}
}
@media (max-width:360px){
  h1{font-size:27px}
  .hero h1{font-size:29px}
  .offer h1{font-size:26px}
  .plan-price{font-size:25px}
  .stat{grid-template-columns:minmax(112px,auto) 1fr}
  .stat b{font-size:22px}
  .progress li .t{display:none}
  .progress li.now .t{display:inline}
  .tools-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tools-grid li{white-space:normal;min-width:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.stickybar,.btn{transition:none}.reveal.open{animation:none}.spinner{animation-duration:2s}
  .play-btn::before{animation:none}.vid.is-loading .play-btn::before{animation-duration:2s}.vid-cover,.vid .play,.play-card{transition:none}}
.claim-note{margin:-6px 0 14px;font-size:12.5px;color:#6b6b6b}