/* ══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   Near-black + TSM cyan. Deliberately not Clavicular's black-and-gold: same
   craft, different palette, so this reads as Baby's rather than as the second
   version of a funnel their audience already knows.
   The accent NEVER appears in the photography, only in the UI chrome.
═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0A0B0D; --surface:#121417; --surface-2:#171A1F; --line:#232830;
  --text:#F4F6F8; --muted:#98A2AE; --dim:#6C7784;
  --accent:#0EC4E6; --accent-2:#0894B4;
  --cta:linear-gradient(180deg,#22D3EE 0%,#0894B4 100%);
  --shell:min(1180px,100% - 44px);
  --display:'Barlow Condensed',system-ui,sans-serif;
  --body:'Barlow',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 var(--body);
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
.shell{width:var(--shell);margin-inline:auto}

/* ── type ─────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.015em;margin:0;line-height:1.04}
h1{font-size:clamp(2.5rem,6.4vw,4.9rem);text-transform:uppercase;text-wrap:balance}
h2{font-size:clamp(2rem,4.4vw,3.4rem);text-transform:uppercase}
h3{font-size:1.32rem;letter-spacing:0}
.eyebrow{display:flex;align-items:center;gap:12px;font:700 .73rem/1 var(--body);
  letter-spacing:.19em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--accent);flex:none}
.eyebrow.mid{justify-content:center}
.lede{color:var(--muted);font-size:1.1rem;max-width:60ch;margin:16px 0 0}
.mid{text-align:center}.mid .lede{margin-inline:auto}
section{padding:clamp(74px,9vw,124px) 0;position:relative}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  background:var(--cta);color:#04202A;font:700 .96rem/1 var(--body);letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;padding:19px 40px;border-radius:999px;
  box-shadow:0 0 0 1px rgba(34,211,238,.28), 0 14px 44px -12px rgba(14,196,230,.62);
  transition:transform .18s ease, box-shadow .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(34,211,238,.5), 0 20px 56px -12px rgba(14,196,230,.8)}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(4px)}
.btn-lg{padding:23px 52px;font-size:1.06rem}
.cta-wrap{margin-top:34px}
.cta-note{color:var(--dim);font-size:.86rem;margin:15px 0 0}

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:60;transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent}
.nav.stuck{background:rgba(10,11,13,.86);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:26px;height:70px}
.brand{font-family:var(--display);font-weight:800;font-size:1.18rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text);text-decoration:none;margin-right:auto}
.brand span{color:var(--accent)}
.nav-links{display:flex;gap:26px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:500;transition:color .16s}
.nav-links a:hover{color:var(--text)}
.nav .btn{padding:13px 26px;font-size:.8rem}
@media(max-width:900px){.nav-links{display:none}}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{min-height:100svh;display:flex;align-items:center;padding:88px 0 32px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;
  background:url(/free-course/img/hero.webp) center/cover no-repeat;opacity:.82}
/* A 16:9 flat lay cropped to a tall phone screen shows only the empty middle,
   because every object sits around the edges. Portrait companion for mobile,
   same objects and same grade. Desktop is untouched. */
@media(max-width:780px){
  .hero-bg{background-image:url(/free-course/img/hero-mobile.webp);opacity:.72}
}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,11,13,.95) 0%, rgba(10,11,13,.55) 90px, rgba(10,11,13,0) 170px),
    radial-gradient(ellipse 62% 56% at 50% 44%, rgba(10,11,13,.94) 0%, rgba(10,11,13,.86) 46%, rgba(10,11,13,.52) 78%, rgba(10,11,13,.72) 100%)}
.hero-in{text-align:center;max-width:930px;margin-inline:auto}
.hero h1{margin-bottom:16px;font-size:clamp(2.2rem,5.4vw,4.3rem)}
.hero-cta{margin-top:20px}
.hero h1 em{font-style:normal;color:var(--accent)}
@media(min-width:781px){.hero h1 em{white-space:nowrap}}
.hero-sub{color:var(--muted);font-size:clamp(.98rem,1.5vw,1.12rem);max-width:62ch;margin:0 auto}
.scarcity{color:#E8B4B4;font-size:.94rem;font-weight:600;margin:30px 0 0}

/* video */
/* height-capped so the button always clears the fold, whatever the screen */
.vsl{position:relative;aspect-ratio:16/9;margin:20px auto 0;max-width:min(760px,100%);
  max-height:32svh;border-radius:16px;
  overflow:hidden;border:1px solid var(--line);background:var(--surface);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
.vsl-inner{position:absolute;inset:0;display:grid;place-items:center;gap:14px;
  background:linear-gradient(160deg,#14181D,#0C0E11)}
.play{width:76px;height:76px;border-radius:50%;background:var(--cta);display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(34,211,238,.4), 0 0 60px -10px rgba(14,196,230,.7)}
.play svg{width:26px;height:26px;fill:#04202A;margin-left:4px}
.vsl-note{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:700}

/* social proof + chips */
.proof{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:20px;flex-wrap:wrap}
.avs{display:flex}
.avs i{width:38px;height:38px;border-radius:50%;border:2px solid var(--bg);margin-left:-11px;
  background:linear-gradient(140deg,#2A3038,#171A1F)}
.avs i:first-child{margin-left:0}
.proof p{margin:0;font-size:.92rem;color:var(--muted)}
.proof b{color:var(--text)}
.chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:10px 18px;font-size:.86rem;color:var(--muted);font-weight:500}
.chip svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:3}

/* ── partner bar ──────────────────────────────────────────────────────── */
.partner{padding:52px 0;border-block:1px solid var(--line);background:#0C0E11;text-align:center}
.partner .lbl{font:700 .72rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:0 0 20px}
.partner .logo{font-family:var(--display);font-weight:800;font-size:2.5rem;letter-spacing:.02em;color:var(--text);margin:0}
.partner .note{color:var(--muted);max-width:60ch;margin:18px auto 0;font-size:1rem}

/* ── generic grids / cards ────────────────────────────────────────────── */
.grid{display:grid;gap:18px;margin-top:46px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:28px;
  transition:border-color .2s, transform .2s}
.card:hover{border-color:rgba(14,196,230,.42);transform:translateY(-3px)}
.card h3{margin-bottom:9px}
.card p{color:var(--muted);margin:0;font-size:.98rem}
.num{font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:.12em;color:var(--accent);
  display:block;margin-bottom:14px}

/* module cards with art */
.mod{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;
  transition:border-color .2s, transform .2s}
.mod:hover{border-color:rgba(14,196,230,.42);transform:translateY(-3px)}
.mod-art{aspect-ratio:16/9;position:relative;background:#0C0E11 center/cover no-repeat;
  transition:background-size .5s ease}
.mod:hover .mod-art{background-size:106%}
.mod-art::after{content:none}
.mod-body{padding:22px 24px 26px}
.mod-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
.mod-tag{font:700 .68rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.pill{font:700 .66rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  border:1px solid rgba(14,196,230,.36);background:rgba(14,196,230,.09);border-radius:999px;padding:6px 11px}
.mod h3{font-size:1.2rem;margin-bottom:8px}
.mod p{color:var(--muted);font-size:.95rem;margin:0}

/* ── split ────────────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split-img{border-radius:16px;border:1px solid var(--line);aspect-ratio:4/3;
  background:var(--surface) center/cover no-repeat}
.split p{color:var(--muted);margin:0 0 18px}
.split p.strong{color:var(--text);font-weight:600;font-size:1.1rem}

/* ── before / after ───────────────────────────────────────────────────── */
.ba-rail{display:flex;gap:18px;overflow-x:auto;padding:46px 0 12px;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.ba-rail::-webkit-scrollbar{display:none}
.ba{position:relative;flex:none;width:330px;aspect-ratio:3/4;border-radius:15px;overflow:hidden;
  border:1px solid var(--line);scroll-snap-align:center;user-select:none;background:#0E1013}
.ba-half{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:22px}
.ba-img{background-size:cover;background-position:center;padding:0}
.ba-after{clip-path:inset(0 0 0 50%)}
.ba-ph{font:700 .7rem/1.7 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#4A535E}
.ba-a{background:repeating-linear-gradient(135deg,#101216 0 12px,#141720 12px 24px)}
.ba-b{background:repeating-linear-gradient(135deg,#151A21 0 12px,#1A2029 12px 24px)}
.ba-div{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);
  box-shadow:0 0 22px rgba(14,196,230,.75);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;translate:-50% -50%;width:42px;height:42px;border-radius:50%;
  background:var(--bg);border:2px solid var(--accent);display:grid;place-items:center;cursor:ew-resize;
  box-shadow:0 0 26px rgba(14,196,230,.5)}
.ba-knob svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:2.4}
.ba-tag{position:absolute;top:12px;font:700 .64rem/1 var(--body);letter-spacing:.13em;text-transform:uppercase;
  background:rgba(10,11,13,.86);border:1px solid var(--line);border-radius:999px;padding:7px 12px;color:var(--muted)}
.ba-tag.l{left:12px}.ba-tag.r{right:12px}
.ba-cap{position:absolute;left:0;right:0;bottom:0;padding:14px;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(10,11,13,.94));
  font:700 .7rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ba-hint{text-align:center;color:var(--dim);font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}

/* ── steps ────────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px;position:relative}
.steps::before{content:"";position:absolute;top:27px;left:16%;right:16%;height:1px;background:var(--line)}
.step{text-align:center;position:relative}
.step i{width:54px;height:54px;border-radius:50%;border:1px solid var(--accent);background:var(--bg);
  display:grid;place-items:center;margin:0 auto 20px;font-family:var(--display);font-weight:800;
  font-size:1.2rem;color:var(--accent);font-style:normal;position:relative;z-index:1}
.step h3{margin-bottom:9px;font-size:1.15rem}
.step p{color:var(--muted);font-size:.96rem;margin:0}

/* ── value stack ──────────────────────────────────────────────────────── */
.stack{max-width:840px;margin:46px auto 0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.stack-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 26px;
  border-bottom:1px solid var(--line);background:var(--surface)}
.stack-row:nth-child(even){background:var(--surface-2)}
.stack-row span{color:var(--muted);font-size:1rem}
.stack-row b{font-variant-numeric:tabular-nums;font-weight:700;color:var(--text);white-space:nowrap}
.stack-total{border-top:2px solid var(--line);border-bottom:0;background:#0E1013!important}
.stack-total span{color:var(--text);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.9rem}
.stack-total b{font-size:1.3rem}
.stack-price{background:#0C0E11!important;border-bottom:0;padding:26px}
.stack-price span{color:var(--text);font-family:var(--display);font-weight:800;font-size:1.5rem;text-transform:uppercase}
.stack-price b{font-family:var(--display);font-size:2.6rem;color:var(--accent);line-height:1}
.stack-foot{color:var(--dim);font-size:.92rem;text-align:center;margin:20px auto 0;max-width:56ch}

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq{max-width:860px;margin:46px auto 0}
.q{border-bottom:1px solid var(--line)}
.q summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:1.22rem;color:var(--text)}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"";position:absolute;right:8px;top:31px;width:13px;height:13px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .22s}
.q[open] summary::after{transform:rotate(-135deg);top:36px}
.q p{color:var(--muted);margin:0 0 24px;padding-right:44px;font-size:1rem}
.q .todo{color:#E8B4B4;font-weight:600}

/* ── claim card ───────────────────────────────────────────────────────── */
.claim{max-width:620px;margin:0 auto;background:linear-gradient(170deg,#14181D,#0C0E11);
  border:1px solid rgba(14,196,230,.28);border-radius:22px;padding:52px 44px;text-align:center;
  box-shadow:0 0 90px -30px rgba(14,196,230,.35)}
.claim .was{color:var(--dim);text-decoration:line-through;font-size:1.05rem}
.claim .free{font-family:var(--display);font-weight:800;font-size:4.2rem;color:var(--accent);line-height:1;margin:6px 0 4px}
.claim .today{color:var(--dim);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.claim ul{list-style:none;padding:0;margin:30px 0;display:grid;gap:13px;text-align:left}
.claim li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:1rem}
.claim li svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:3;flex:none;margin-top:5px}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:56px 0 70px;text-align:center;background:#08090B}
.f-links{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin:22px 0}
.f-links a{color:var(--muted);text-decoration:none;font-size:.9rem}
.disc{color:#5A636E;font-size:.8rem;line-height:1.7;max-width:80ch;margin:22px auto 0}


/* ── scroll reveal ────────────────────────────────────────────────────── */
/* Gated on .js so a failed or slow script can never leave the page blank.
   Without JS every .rise element is simply visible. */
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .55s ease, transform .55s ease}
.js .rise.in{opacity:1;transform:none}

/* ── responsive ───────────────────────────────────────────────────────── */
@media(max-width:980px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:34px}
  .split-img{order:-1}
}
@media(max-width:780px){
  :root{--shell:min(1180px,100% - 32px)}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:34px}
  .steps::before{display:none}
  .ba{width:270px}
  .claim{padding:40px 26px}
}
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE 2 ONLY — the confirmation page
   Both reference funnels treat this as the harder-working page: a 24 hour
   clock, a coach calling, and the whole offer re-sold to someone who is now
   MORE sceptical, not less.
═══════════════════════════════════════════════════════════════════════════ */
.warnbar{position:sticky;top:0;z-index:80;background:rgba(14,196,230,.09);
  border-bottom:1px solid rgba(14,196,230,.3);backdrop-filter:blur(12px);
  padding:13px 20px;text-align:center;font-size:.93rem;color:var(--text)}
.warnbar b{color:var(--accent)}
.live{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(14,196,230,.4);
  background:rgba(14,196,230,.07);border-radius:999px;padding:10px 20px;margin-bottom:26px;
  font:700 .73rem/1 var(--body);letter-spacing:.17em;text-transform:uppercase;color:var(--accent)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(14,196,230,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(14,196,230,0)}100%{box-shadow:0 0 0 0 rgba(14,196,230,0)}}
@media(prefers-reduced-motion:reduce){.live i{animation:none}}
.hero-2{min-height:auto;padding:70px 0 90px;text-align:center}
.watch{font-weight:700;color:var(--text);margin:34px 0 0;font-size:1rem}
/* the three do-this-now cards carry a step number in the corner */
.donow{position:relative;overflow:hidden}
.donow i{position:absolute;top:-14px;right:6px;font-family:var(--display);font-weight:800;
  font-size:5.4rem;font-style:normal;color:rgba(255,255,255,.045);line-height:1}
.donow .n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--cta);color:#04202A;font:800 1rem/1 var(--display);margin-bottom:16px}
/* four short objection videos, the thing Brez does and Clavicular does not */
.qv{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden}
.qv-art{aspect-ratio:16/10;background:linear-gradient(160deg,#14181D,#0C0E11);
  display:grid;place-items:center;gap:12px;border-bottom:1px solid var(--line)}
.qv-art .play{width:54px;height:54px}
.qv-art .play svg{width:19px;height:19px}
.qv p{padding:18px 22px;margin:0;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--text)}
.closing{text-align:center;padding:clamp(80px,10vw,130px) 0}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME
   Set data-theme="light" on <html>. Only tokens and a handful of surfaces
   change; every component keeps its structure.

   Two things do NOT survive a straight token swap and are handled below:
   1. The hero background photo. Dark cinematic art behind dark text is
      unreadable, so on light the hero drops the photo and leans on the
      headline and the video, which is exactly what Brez does.
   2. The button glow. A cyan halo looks expensive on black and looks like a
      mistake on white, so it is reduced to a soft drop shadow.
═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"]{
  --bg:#FBFAF8; --surface:#FFFFFF; --surface-2:#F4F5F7; --line:#E5E7EB;
  --text:#0D1117; --muted:#59636F; --dim:#8B95A1;
  --accent:#0A7C9B;              /* deeper than the dark-theme cyan: 5.2:1 on white */
  --cta:linear-gradient(180deg,#16B6D8 0%,#0A7C9B 100%);
}
[data-theme="light"] .btn{color:#fff;
  box-shadow:0 0 0 1px rgba(10,124,155,.2), 0 10px 26px -10px rgba(10,124,155,.5)}
[data-theme="light"] .btn:hover{box-shadow:0 0 0 1px rgba(10,124,155,.34), 0 16px 34px -10px rgba(10,124,155,.62)}
[data-theme="light"] .nav.stuck{background:rgba(251,250,248,.88);border-bottom-color:var(--line)}
[data-theme="light"] .partner{background:#F4F5F7}
[data-theme="light"] .vsl-inner{background:linear-gradient(160deg,#EDEFF2,#E3E7EB)}
[data-theme="light"] .play{box-shadow:0 0 0 1px rgba(10,124,155,.25), 0 10px 30px -8px rgba(10,124,155,.55)}
[data-theme="light"] .play svg{fill:#fff}
[data-theme="light"] .avs i{background:linear-gradient(140deg,#DDE2E7,#C8CFD6);border-color:var(--bg)}
[data-theme="light"] .card,[data-theme="light"] .mod,[data-theme="light"] .qv{
  box-shadow:0 1px 2px rgba(13,17,23,.04), 0 8px 24px -16px rgba(13,17,23,.18)}
[data-theme="light"] .card:hover,[data-theme="light"] .mod:hover{
  border-color:rgba(10,124,155,.45);box-shadow:0 2px 4px rgba(13,17,23,.05), 0 16px 34px -18px rgba(13,17,23,.28)}
/* the module art stays dark on purpose: dark photography on a white page is
   high contrast and reads editorial rather than cheap */
[data-theme="light"] .mod-art::after{background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.32) 100%)}
[data-theme="light"] .stack-total,[data-theme="light"] .stack-price{background:#EEF1F4!important}
[data-theme="light"] .claim{background:linear-gradient(170deg,#FFFFFF,#F4F7F9);
  border-color:rgba(10,124,155,.3);box-shadow:0 24px 60px -30px rgba(13,17,23,.3)}
[data-theme="light"] footer{background:#F4F5F7}
[data-theme="light"] .warnbar{background:rgba(10,124,155,.08);border-bottom-color:rgba(10,124,155,.28)}
[data-theme="light"] .live{background:rgba(10,124,155,.07);border-color:rgba(10,124,155,.32)}
[data-theme="light"] .donow i{color:rgba(13,17,23,.05)}
[data-theme="light"] .donow .n,[data-theme="light"] .step i{color:#fff}
[data-theme="light"] .step i{background:var(--cta);border-color:transparent}
[data-theme="light"] .scarcity{color:#B4483F}
[data-theme="light"] .ba-a{background:repeating-linear-gradient(135deg,#EDEFF2 0 12px,#E4E8EC 12px 24px)}
[data-theme="light"] .ba-b{background:repeating-linear-gradient(135deg,#E4E8EC 0 12px,#D9DEE4 12px 24px)}
[data-theme="light"] .ba-ph{color:#9AA4AF}
[data-theme="light"] .ba-tag{background:rgba(255,255,255,.9)}
[data-theme="light"] .ba-cap{background:linear-gradient(180deg,transparent,rgba(251,250,248,.96))}
[data-theme="light"] .sticky{background:rgba(251,250,248,.95)}
[data-theme="light"] .q .todo{color:#B4483F}




/* ══════════════════════════════════════════════════════════════════════════
   ART, PER THEME
   The dark set is the default. The light theme swaps in a parallel set shot
   high key on bone white: same compositions, same objects, opposite lighting.
   A light page with dark photography loses all its personality, and a light
   page with NO photography loses even more, which is why both sets exist.
═══════════════════════════════════════════════════════════════════════════ */
.art-calls  {background-image:url(/free-course/img/calls.webp)}
.art-decide      .mod-art{background-image:url(/free-course/img/prog-decide.webp)}
.art-today      .mod-art{background-image:url(/free-course/img/prog-today.webp)}
.art-consistency      .mod-art{background-image:url(/free-course/img/prog-consistency.webp)}
.art-photos      .mod-art{background-image:url(/free-course/img/prog-photos.webp)}
.art-reveal      .mod-art{background-image:url(/free-course/img/prog-reveal.webp)}
.art-studio      .mod-art{background-image:url(/free-course/img/prog-studio.webp)}
.art-baby   {background-image:url(/free-course/img/baby.webp)}

/* Light hero stays clean. A busy photo behind the headline reads as a stock
   accident here; the art earns its place in the cards and split sections
   instead, where it has room to be seen properly. Just a soft tint so the
   top of the page is not flat dead white. */
[data-theme="light"] .hero-bg{background-image:none;
  background:radial-gradient(ellipse 78% 66% at 50% -10%, #E9F3F7 0%, rgba(251,250,248,0) 68%);opacity:1}
[data-theme="light"] .hero-bg::after{background:none}
[data-theme="light"] .art-calls  {background-image:url(/free-course/img/lt-calls.webp)}

[data-theme="light"] .mod-art{background-color:#EDEFF2}
/* light art is pale, so the bottom scrim has to go the other way */
[data-theme="light"] .mod-art::after{background:linear-gradient(180deg,transparent 60%,rgba(13,17,23,.12) 100%)}


/* ── the big three ────────────────────────────────────────────────────── */
.b3{padding:32px 30px 34px}
.b3-n{font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:.14em;
  color:var(--accent);display:block;margin-bottom:16px}
.b3 h3{font-size:1.34rem;line-height:1.15;margin-bottom:12px}

/* ── rotating band ───────────────────────────────────────────────────────
   One line that cycles through what the system holds, so the breadth reads
   in three seconds instead of another six-card grid. */
.toolband{background:var(--surface-2);border-block:1px solid var(--line);
  padding:clamp(70px,8vw,110px) 0}
.tool-h{font-size:clamp(1.9rem,4.6vw,3.5rem);line-height:1.12}

[data-theme="light"] .toolband{background:#F1F3F5}

/* Short laptop screens: shrink the video further rather than let the chips
   sit half-cut across the fold. Headline, subtitle, button and social proof
   all stay above it. */
@media (max-height:820px) and (min-width:781px){
  .hero{padding:78px 0 24px}
  .hero h1{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:12px}
  .hero-sub{font-size:1rem}
  .vsl{max-height:26svh;margin-top:16px}
  .hero-cta{margin-top:16px}
  .chips{margin-top:11px}
  .chip{padding:8px 14px;font-size:.79rem}
}

/* ── the build, video by video ─────────────────────────────────────────── */
.buildlist{counter-reset:bl;list-style:none;padding:0;margin:0;display:grid;gap:10px;
  grid-template-columns:repeat(2,1fr)}
.buildlist li{counter-increment:bl;position:relative;padding:15px 18px 15px 52px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  color:var(--muted);font-size:.95rem}
.buildlist li::before{content:counter(bl);position:absolute;left:16px;top:14px;
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  font:800 .74rem/1 var(--body)}
.buildlist b{color:var(--text)}
@media(max-width:780px){.buildlist{grid-template-columns:1fr}}

/* ── rotating wheel ──────────────────────────────────────────────────────
   Fixed height and one line per item, so a long phrase can never wrap and
   push the section taller mid-rotation. That was the layout jump on phones. */
.wheel{height:3.6em;overflow:hidden;position:relative;margin:6px auto 0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent)}
.wheel ul{list-style:none;margin:0;padding:0;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.wheel li{height:1.2em;line-height:1.2em;font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,4.6vw,3.5rem);color:var(--accent);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;opacity:.22;transition:opacity .5s ease}
.wheel li.on{opacity:1}
@media(prefers-reduced-motion:reduce){.wheel ul,.wheel li{transition:none}}

/* ── results: arrows page the rail, dragging works the slider ─────────── */
.ba-rail{scroll-behavior:smooth}
/* Only the knob owns the drag gesture; the rest of the card scrolls the rail. */
.ba-knob{touch-action:none}
.ba-knob::after{content:"";position:absolute;inset:-26px;border-radius:50%}
.ba-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px}
.ba-arrow{width:46px;height:46px;flex:none;border-radius:50%;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;
  transition:border-color .18s, transform .18s}
.ba-arrow:hover{border-color:var(--accent);transform:translateY(-2px)}
.ba-arrow svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.ba-hint{margin:0;text-transform:none;letter-spacing:0;font-weight:500;font-size:.86rem}

/* ── section texture ─────────────────────────────────────────────────── */
.tex{position:relative;isolation:isolate}
.tex::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;
  background:url(/free-course/img/texture.webp) center/cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000,transparent 78%)}
[data-theme="light"] .tex::before{opacity:.07}

@media(max-width:780px){ .desktop-only{display:none!important} }

/* ── value stack: the free-access bonus row ─────────────────────────────── */
.stack-bonus{background:color-mix(in srgb,var(--accent) 8%,transparent)!important;border-bottom:0}
.stack-bonus span{color:var(--accent);font-weight:800;letter-spacing:.08em;font-size:.92rem}

/* ── the wheel: heading left, list right, three lines visible ─────────── */
.toolband-in{display:grid;grid-template-columns:auto 1fr;gap:6vw;align-items:center;text-align:left}
.toolband-head .eyebrow{justify-content:flex-start}
.tool-h{white-space:nowrap}
/* No fade mask: the reference look is three fully-rendered lines where the
   neighbours are simply dimmer text. The mask was swallowing them entirely,
   because its fade zones landed exactly on the neighbour rows. */
/* font-size lives on .wheel so the container height and the row heights are
   measured in the SAME em. With it on the li, 8.4em of container resolved
   against the 17px body font while each row resolved against ~38px, so the
   window fit 1.3 rows and the neighbours were clipped out entirely. */
.wheel{height:5.4em;overflow:hidden;position:relative;margin:0;
  font-size:clamp(1.4rem,3vw,2.4rem)}
.wheel ul{list-style:none;margin:0;padding:0;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.wheel li{height:1.8em;line-height:1.8em;font-family:var(--display);font-weight:800;
  color:var(--accent);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;opacity:.28;transition:opacity .5s ease}
.wheel li.on{opacity:1}
@media(prefers-reduced-motion:reduce){.wheel ul,.wheel li{transition:none}}
@media(max-width:900px){
  .toolband-in{grid-template-columns:1fr;gap:14px;text-align:center}
  .toolband-head .eyebrow{justify-content:center}
  .tool-h{white-space:normal}
  .wheel{font-size:1.3rem}
}

/* ── get started: same treatment as the hero ───────────────────────────── */
.claim-scene{position:relative;isolation:isolate;overflow:hidden}
.claim-scene::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url(/free-course/img/hero.webp) center/cover no-repeat;opacity:.5}
.claim-scene::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 62% 60% at 50% 50%, rgba(10,11,13,.92) 0%, rgba(10,11,13,.78) 55%, rgba(10,11,13,.6) 100%)}
@media(max-width:780px){.claim-scene::before{background-image:url(/free-course/img/hero-mobile.webp)}}
[data-theme="light"] .claim-scene::before{display:none}
[data-theme="light"] .claim-scene::after{display:none}

/* ── free-access emphasis ──────────────────────────────────────────────── */
.hero-sub .hl{font-style:normal;color:var(--text);font-weight:600}
.chip.hot{border-color:rgba(14,196,230,.45);background:rgba(14,196,230,.08);color:var(--text)}
.stack-bonus-band{display:flex;align-items:center;justify-content:center;gap:12px;
  padding:20px 26px;background:linear-gradient(90deg,rgba(14,196,230,.16),rgba(14,196,230,.05));
  border-top:1px solid rgba(14,196,230,.4);border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,2vw,1.45rem);
  letter-spacing:.04em;color:var(--text);text-align:center}
.stack-bonus-band b{color:var(--accent)}
.sb-plus{font-weight:800;font-size:1.6em;color:var(--accent);line-height:1}

/* Mobile: chips must not stack one per line. Tighter type and padding lets
   the two offer chips share the first line with the third wrapping under. */
@media(max-width:780px){
  .chips{gap:6px}
  .chip{padding:7px 11px;font-size:.72rem;gap:6px}
  .chip svg{width:12px;height:12px}
}

/* ── knob carries the eagle instead of the arrows ──────────────────────── */
.ba-knob svg{display:none}
.ba-knob{background:var(--bg) url(/free-course/img/eagle.png) center/72% no-repeat}

/* ── opt-in form ───────────────────────────────────────────────────────── */
.lead-form{display:grid;gap:11px;margin-top:6px}
.lead-form input{width:100%;background:#0E1013;border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;color:var(--text);font:500 1rem var(--body);outline:none;
  transition:border-color .16s}
.lead-form input::placeholder{color:var(--dim)}
.lead-form input:focus{border-color:rgba(14,196,230,.6)}
.lead-form .btn{width:100%;margin-top:4px}
.lf-hp{position:absolute!important;left:-9999px!important;height:1px;width:1px;opacity:0}
.lf-err{color:#E8B4B4;font-size:.9rem;margin:4px 0 0;text-align:center}

/* ── opt-in modal ──────────────────────────────────────────────────────── */
.lmodal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(5,7,9,.78);backdrop-filter:blur(10px)}
.lmodal.open{display:flex}
.lmodal-panel{position:relative;width:min(480px,100%);max-height:92svh;overflow-y:auto;
  background:linear-gradient(170deg,#14181D,#0E1013);border:1px solid rgba(14,196,230,.3);
  border-radius:20px;padding:44px 34px 34px;text-align:center;
  box-shadow:0 0 90px -20px rgba(14,196,230,.35), 0 40px 80px -30px rgba(0,0,0,.9)}
.lmodal-x{position:absolute;top:12px;right:16px;background:none;border:0;color:var(--dim);
  font-size:1.9rem;line-height:1;cursor:pointer;padding:6px}
.lmodal-x:hover{color:var(--text)}
.lmodal-eyebrow{margin-bottom:10px}
.lmodal-h{font-family:var(--display);font-weight:800;font-size:2rem;margin:0 0 8px;text-transform:uppercase}
.lmodal-sub{color:var(--muted);font-size:.98rem;margin:0 0 22px}
.lf-phone{display:grid;grid-template-columns:118px 1fr;gap:11px}
.lf-phone select{background:#0E1013;border:1px solid var(--line);border-radius:12px;
  padding:16px 10px;color:var(--text);font:500 .95rem var(--body);outline:none}
.lf-phone select:focus{border-color:rgba(14,196,230,.6)}
.lf-consent{display:flex;gap:10px;align-items:flex-start;text-align:left;
  color:var(--dim);font-size:.8rem;line-height:1.5;margin:2px 0}
.lf-consent input{margin-top:3px;accent-color:var(--accent);flex:none;width:16px;height:16px}
@media(max-width:480px){.lmodal-panel{padding:38px 22px 26px}}

/* ── country code picker ───────────────────────────────────────────────── */
.lf-cc{position:relative}
.lf-cc-btn{display:flex;align-items:center;gap:7px;width:100%;height:100%;
  background:#0E1013;border:1px solid var(--line);border-radius:12px;
  padding:16px 12px;color:var(--text);font:500 .95rem var(--body);cursor:pointer}
.lf-cc-btn:focus{border-color:rgba(14,196,230,.6);outline:none}
.lf-cc-car{margin-left:auto;color:var(--dim);font-size:.7rem}
.lf-cc-panel{position:absolute;z-index:10;top:calc(100% + 6px);left:0;width:290px;
  background:#101318;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9)}
.lf-cc-search{width:100%;background:#0B0D10;border:0;border-bottom:1px solid var(--line);
  padding:13px 15px;color:var(--text);font:500 .92rem var(--body);outline:none}
.lf-cc-list{max-height:250px;overflow-y:auto}
.lf-cc-item{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  padding:11px 15px;color:var(--text);font:500 .92rem var(--body);cursor:pointer;text-align:left}
.lf-cc-item:hover,.lf-cc-item.sel{background:rgba(14,196,230,.1)}
.lf-cc-item .d{margin-left:auto;color:var(--dim);font-variant-numeric:tabular-nums}

/* ── modal consent line + close position ───────────────────────────────── */
.lf-note{color:var(--dim);font-size:.76rem;line-height:1.5;margin:10px 0 0;text-align:center}
@media(max-width:480px){.lmodal-x{top:6px;right:9px}}
/* how-is-this-free CTA centred on mobile */
@media(max-width:780px){.cta-mid-mobile{text-align:center}}
/* the claim section is far shorter than the tall mobile art, and centring it
   sliced the statue's head. Anchor to the bottom half, steak and bottle. */
@media(max-width:780px){.claim-scene::before{background-position:center bottom}}

/* ── hero avatars: real member after-photos ────────────────────────────── */
.avs i{background-size:cover;background-position:center}
.avs i:nth-child(1){background-image:url(/free-course/img/avatars/av1.webp)}
.avs i:nth-child(2){background-image:url(/free-course/img/avatars/av2.webp)}
.avs i:nth-child(3){background-image:url(/free-course/img/avatars/av3.webp)}
.avs i:nth-child(4){background-image:url(/free-course/img/avatars/av4.webp)}
.avs i:nth-child(5){background-image:url(/free-course/img/avatars/av5.webp)}

/* ── live Vidalytics players ───────────────────────────────────────────── */
/* Our .vsl shell already gives the 16:9 frame, the rounded border and the
   fold-height cap; the embed just fills it, so Vidalytics' own padding-top
   sizing is overridden with an absolute fill. */
.vsl-live{background:#000}
.vsl-live iframe,.vsl-live video{border-radius:inherit}

/* native-sized Vidalytics wrapper: our frame styling without touching the
   player's own layout maths */
.vsl-native{max-width:760px;margin:34px auto 0;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#000;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}


/* ── BOOKING MODAL ────────────────────────────────────────────────────────
   Member funnel only. Reuses .lmodal for the backdrop and the close button;
   only the panel differs, because a calendar needs far more width than the
   480px opt-in form. The iframe is injected on first open rather than on
   page load: GoHighLevel's embed script sizes the iframe by postMessage and
   an iframe measured while display:none comes back the wrong height. */
.bmodal-panel{position:relative;width:min(920px,100%);max-height:94svh;overflow-y:auto;
  background:linear-gradient(170deg,#14181D,#0E1013);border:1px solid rgba(14,196,230,.3);
  border-radius:20px;padding:52px 20px 20px;text-align:center;
  box-shadow:0 0 90px -20px rgba(14,196,230,.35), 0 40px 80px -30px rgba(0,0,0,.9)}
.bmodal-panel iframe{width:100%;min-height:640px;border:0;display:block;border-radius:12px}
.bmodal-load{color:var(--muted);font-size:.95rem;padding:60px 0}
@media(max-width:480px){.bmodal-panel{padding:46px 10px 12px}
  .bmodal-panel iframe{min-height:560px}}


/* The booking modal is hidden with visibility rather than display, because
   the calendar is now loaded up front instead of on click. An iframe inside
   display:none has no layout, so GoHighLevel's embed script measures it as
   zero and it comes back the wrong height the first time it is shown.
   The id beats .lmodal{display:none} on specificity, so no !important. */
#bmodal{display:flex;opacity:0;pointer-events:none;transform:translateX(-200vw);
  transition:opacity .18s ease}
#bmodal.open{opacity:1;pointer-events:auto;transform:none}
/* GoHighLevel's embed script writes inline styles on the iframe and overrides
   an inherited visibility:hidden and pointer-events:none, so a closed modal
   left an 878x891 invisible but clickable iframe lying across the hero and
   every CTA under it stopped working. Moving the closed modal off-viewport
   fixes it without hiding the iframe, which still has to keep its layout so
   the embed script can measure it. The !important below is the belt to that
   brace: inline styles lose to it. */
#bmodal:not(.open) iframe{pointer-events:none!important}


/* ── WHATSAPP ALERT (member confirmation) ─────────────────────────────────
   The call itself happens on WhatsApp, so this is not a nice-to-know: a
   booked lead with no WhatsApp, or notifications off, simply misses it.
   Sized to be the first thing read on the page, above everything else. */
.wa-alert{margin:26px auto 0;max-width:730px;background:rgba(14,196,230,.07);
  border:1px solid rgba(14,196,230,.38);border-radius:18px;padding:32px 26px;
  text-align:center;box-shadow:0 0 70px -26px rgba(14,196,230,.55)}
.wa-kicker{font-family:var(--display);text-transform:uppercase;letter-spacing:.09em;
  font-size:.95rem;font-weight:700;color:var(--accent);margin:0 0 12px}
.wa-main{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.55rem,4.6vw,2.7rem);line-height:1.05;margin:0 0 16px;color:var(--text)}
.wa-note{color:var(--muted);font-size:1.02rem;line-height:1.55;margin:0 auto;max-width:54ch}
@media(max-width:480px){.wa-alert{padding:26px 18px;border-radius:14px}}
[data-theme="light"] .wa-alert{background:rgba(10,124,155,.07);border-color:rgba(10,124,155,.32)}


/* The call-is-coming line on the confirmation page. Deliberately between the
   headline and body copy in size: it is the instruction the whole page exists
   to deliver, so it must not read as a caption. */
.hero-call{color:var(--text);font-weight:700;margin:0 auto;max-width:24ch;
  font-size:clamp(1.35rem,3.1vw,2.05rem);line-height:1.22}