/* Speed to Win — SALESY DR funnel v3 (readable emphasis, icons, motion, psychology) */
*{box-sizing:border-box}
:root{
  --paper:#FFFFFF; --paper2:#F3F6FB; --ink:#0A0D14; --ink2:#2C3340; --mut:#5A6472; --line:#E4E9F1;
  --hi:#FFE23D; --hi-deep:#F4C400;
  --cta:#12B76A; --cta-d:#0E9F5D; --cta-l:#2BD98A;
  --dark:#0A0D14; --dark2:#141926; --dark3:#1C2333;
  --pop:#FF3B30;
  --disp:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:840px}
a{color:inherit}
img{max-width:100%}
p{margin:0}
h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:.01em;line-height:1.08;margin:0;text-transform:uppercase;text-wrap:balance}
/* EMPHASIS — readable on ANY background */
.hl{background:var(--hi);color:#0A0D14;padding:.06em .16em;border-radius:.1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}   /* light bg, short phrases */
/* Anton's inline box is ~1.54em tall while a display line box is ~1.05em, so a plain
   background highlight overflows its own line and paints over the line above or below.
   Wherever the yellow sits inside DISPLAY type it is therefore drawn as a band whose
   height we control, sized to sit inside the line box. Body copy keeps the plain
   background above, where the looser line-height already leaves room. */
h1 .hl,h2 .hl,h3 .hl,h4 .hl,.sec-h .hl,.ceiling .hl,.dream .hl,.sn .hl,.cal-when .hl,
.optin h3 .hl,.vscard h4 .hl,.pcard .cli .hl,.phead .hl,.qq .hl,.qtitle .hl,
.qresult h3 .hl,.nx-card h3 .hl,.fq summary .hl,.nx-fact .fn .hl,.nx-map .mn .hl,
.pstep .pn .hl,.hub-hero h1 .hl,.arthead h1 .hl{
  background:linear-gradient(var(--hi),var(--hi)) no-repeat;
  background-size:100% .96em;
  background-position:0 .32em;
  border-radius:0;
  padding:0 .16em;
}
.hy{color:var(--cta-ink)}
.dark .hy,.popbg .hy,.band .hy{color:var(--hi)}                 /* yellow TEXT — for dark sections / long phrases */
.hg{color:var(--cta)}                /* green text */
.eyebrow{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cta-ink);display:inline-flex;gap:8px;align-items:center}
.eyebrow .ico{width:16px;height:16px}
/* the eyebrow is a text-safe green on light ground; on an ink band it goes bright */
.dark .eyebrow,.dark .eyebrow.sec-eye{color:var(--cta-l)}
svg.ic{width:1em;height:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* promo + logo bars */
.promo{background:var(--pop);color:#fff;text-align:center;font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:9px 16px}
.promo .flash{display:inline-block;animation:flash 1.4s steps(1) infinite}
.top{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:11px 22px}
.top .logo{justify-self:start}
.top .tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);display:flex;gap:7px;align-items:center}
.top .tag .live{width:8px;height:8px;border-radius:50%;background:var(--cta);box-shadow:0 0 0 4px rgba(18,183,106,.18);animation:blink 1.8s ease-in-out infinite}
.top .btn{padding:9px 18px;font-size:14px;border-radius:10px;justify-self:end}
@media(max-width:640px){.top .tag{display:none}.top .wrap{justify-content:space-between}}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--disp);font-size:18px;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}
.logo .mk{color:var(--cta)}
@media(max-width:600px){.logo{font-size:15px;gap:6px}.top .dia{width:20px;height:20px}}
.dia{width:24px;height:24px;flex:none;color:var(--cta)}

/* buttons */
.btn{font-family:var(--sans);font-weight:800;font-size:16px;border-radius:12px;padding:15px 26px;border:0;cursor:pointer;text-decoration:none;display:inline-flex;gap:10px;align-items:center;justify-content:center;transition:transform .16s,box-shadow .16s,background .16s}
.btn.solid{background:var(--cta);color:#fff;box-shadow:0 7px 0 var(--cta-d),0 14px 30px rgba(18,183,106,.4)}
.btn.solid:hover{transform:translateY(-2px);background:var(--cta-l);box-shadow:0 9px 0 var(--cta-d),0 18px 40px rgba(18,183,106,.5)}
.btn.solid:active{transform:translateY(4px);box-shadow:0 3px 0 var(--cta-d)}
.btn.big{font-size:clamp(17px,2.3vw,22px);padding:20px 36px;border-radius:14px}
.btn.block{display:flex;width:100%}
.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff;box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn small{font-weight:600;font-size:12px;opacity:.92;display:block}
.cta-pulse{position:relative}
.cta-pulse:before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(18,183,106,.55);animation:ctapulse 2.2s ease-out infinite;pointer-events:none}
.arrow-down{display:block;margin:14px auto 0;width:32px;height:32px;color:var(--cta);animation:bounce 1.4s infinite}
.guarantee{display:inline-flex;gap:9px;align-items:center;background:rgba(18,183,106,.1);border:1px solid rgba(18,183,106,.35);color:var(--cta-ink);font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:999px;margin-top:14px}
.dark .guarantee{color:var(--cta-l);background:rgba(18,183,106,.14);border-color:rgba(18,183,106,.4)}

/* hero */
.hero{position:relative;overflow:hidden;text-align:center;padding:40px 0 26px;background:var(--paper)}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
.hero:before{width:520px;height:520px;background:rgba(18,183,106,.16);top:-180px;left:-120px;animation:blob 14s ease-in-out infinite}
.hero:after{width:460px;height:460px;background:rgba(255,226,61,.22);top:-120px;right:-120px;animation:blob 16s ease-in-out infinite reverse}
.hero .wrap{position:relative;z-index:1}
.pre{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink2);box-shadow:0 4px 14px rgba(10,13,20,.06)}
.pre .d{width:8px;height:8px;flex:none;border-radius:50%;background:var(--cta);animation:blink 1.6s infinite}
.hero h1{font-size:clamp(40px,8vw,84px);line-height:1.3;margin:18px auto 0;max-width:15ch}
.hero h1 .hl{padding:.04em .16em}
.hero .lede{font-size:clamp(17px,2.2vw,22px);color:var(--ink2);max-width:46ch;margin:16px auto 0;font-weight:500;line-height:1.4}
.hero .lede b{font-weight:800}
/* variation B: headline + video + form together in the hero (all above the fold) */
.herob{padding-top:24px}
.herob h1{font-size:clamp(30px,4.6vw,50px);line-height:1.26;max-width:20ch}
.herob .lede{margin-top:10px;font-size:clamp(15px,1.9vw,18px);max-width:52ch}
.herob-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:22px;align-items:center;margin-top:20px;text-align:left}
.herob-grid .vsl{margin:0;max-width:none}
.herob-grid .optin{margin:0;max-width:none}
.herob-grid .soundon{margin:12px auto 0}
.herob-col{min-width:0}
@media(max-width:880px){.herob-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}}
/* proof stack that fills the space under the video in variation B */
.vstack{margin-top:18px;display:flex;flex-direction:column;gap:13px;align-items:flex-start}
.vstack .rating{margin:0;justify-content:flex-start}
.vlist{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.vlist li{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:600;color:var(--ink2)}
.vlist li svg{flex:none;width:20px;height:20px;color:var(--cta);margin-top:1px}
.vstack .guarantee{margin-top:2px}

/* VSL */
.vsl{position:relative;max-width:760px;margin:24px auto 0;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#05070c;
  border:4px solid var(--ink);box-shadow:0 24px 60px rgba(10,13,20,.35)}
.vsl iframe,.vsl video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vsl .poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;
  background:radial-gradient(560px 320px at 50% 34%,rgba(18,183,106,.22),transparent 60%),linear-gradient(180deg,#111725,#05070c)}
.vsl .play{width:82px;height:82px;border-radius:50%;background:var(--cta);display:grid;place-items:center;box-shadow:0 12px 40px rgba(18,183,106,.6)}
.vsl .poster:hover .play{transform:scale(1.08);transition:transform .2s}
.vsl .play:after{content:"";margin-left:6px;border-style:solid;border-width:15px 0 15px 26px;border-color:transparent transparent transparent #fff}
.vsl .plabel{color:#fff;font-weight:800;letter-spacing:.03em;font-size:14px}
.vsl .ring{position:absolute;width:82px;height:82px;border-radius:50%;border:3px solid var(--cta);opacity:.5;animation:ctapulse 2.4s ease-out infinite;pointer-events:none}
.soundon{display:inline-flex;gap:8px;align-items:center;background:var(--hi);color:#0A0D14;font-weight:800;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;padding:7px 14px;border-radius:999px;margin:14px auto 0}

/* opt-in */
.optin{max-width:520px;margin:22px auto 0;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:24px 22px;box-shadow:0 16px 40px rgba(10,13,20,.14)}
.optin h3{font-family:var(--disp);font-size:clamp(24px,4vw,32px);text-align:center;line-height:1.05}
.optin .sub{font-size:14.5px;color:var(--mut);text-align:center;margin-top:6px;font-weight:600}
.field{display:block;margin-top:12px;text-align:left}
.field span{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.field input{width:100%;margin-top:5px;font:inherit;font-size:16px;font-weight:600;padding:14px 15px;border-radius:11px;border:2px solid var(--line);background:#fff;color:var(--ink)}
.field input:focus{outline:0;border-color:var(--cta);box-shadow:0 0 0 4px rgba(18,183,106,.16)}
.optin .btn.solid{width:100%;margin-top:16px}
.scarcity{font-size:13px;color:var(--ink2);text-align:center;margin-top:14px;font-weight:700;display:flex;gap:8px;align-items:center;justify-content:center}
.scarcity .dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--cta);box-shadow:0 0 0 4px rgba(18,183,106,.18)}
.rating{display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap;margin:16px auto 0;font-weight:700;color:var(--ink2);font-size:14px}
.stars{color:#F4C400;font-size:17px;letter-spacing:2px}

/* spots-left scarcity meter */
.spots{max-width:420px;margin:18px auto 0;background:#fff;border:2px solid var(--line);border-radius:12px;padding:12px 16px;text-align:left}
.spots .lab{display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.spots .lab b{color:var(--pop)}
.spots .track{height:9px;border-radius:99px;background:var(--paper2);margin-top:8px;overflow:hidden;border:1px solid var(--line)}
.spots .fill{height:100%;width:60%;border-radius:99px;background:linear-gradient(90deg,var(--cta),var(--cta-l))}

/* trusted-by logo bar */
.trusted{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.trusted .lab{text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.logos{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;justify-content:center}

/* ---- Instagram proof rail: the real profile header of each person we have worked
   with, captured from their public profile. One swipeable row on every screen. ---- */
.igwrap{position:relative}
.igrail{--iggap:16px;--ign:1;display:flex;gap:var(--iggap);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  padding:2px 2px 8px;scrollbar-width:none;margin:0 auto;max-width:100%}
/* one card to a step, flush to the left edge, so you never get a clipped card on
   both sides at once */
.igcard{scroll-snap-align:start}
/* the arrows */
.igarrow{position:absolute;top:calc(50% - 6px);transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 2px 6px rgba(10,13,20,.10),0 10px 24px rgba(10,13,20,.12);
  transition:transform .15s ease,box-shadow .15s ease,opacity .2s ease}
.igarrow.prev{left:-6px}
.igarrow.next{right:-6px}
.igarrow svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.igarrow:hover{transform:translateY(-50%) scale(1.06);
  box-shadow:0 3px 8px rgba(10,13,20,.14),0 14px 30px rgba(10,13,20,.16)}
.igarrow:active{transform:translateY(-50%) scale(.96)}
.igarrow:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.igarrow[disabled]{opacity:.28;pointer-events:none;box-shadow:0 1px 3px rgba(10,13,20,.08)}
/* wide enough to sit the arrows outside the cards instead of on top of them */
@media(min-width:1180px){
  .igarrow.prev{left:-56px}
  .igarrow.next{right:-56px}
}
/* One affordance per device: arrows where there is a cursor, swipe where there is a
   thumb. Below 900px the swipe hint does the job and an arrow would only sit on top
   of the card. */
@media(max-width:899px){.igarrow{display:none}}
@media(prefers-reduced-motion:reduce){.igrail{scroll-behavior:auto}}
.igrail::-webkit-scrollbar{display:none}
.igcard{flex:0 0 calc((100% - (var(--ign) - 1) * var(--iggap)) / var(--ign));margin:0;background:#fff;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(10,13,20,.04),0 10px 26px rgba(10,13,20,.07)}
/* The rail's last card used to be impossible to reach: its start-snap point sits past
   the maximum scroll, so mandatory snapping pulled the rail back and clipped it. The
   last card snaps to its end instead, which lands exactly on maxScroll. */
.igcard:last-child{scroll-snap-align:end}
.igrail{scroll-padding-inline:2px}
.igcard img{display:block;width:100%;height:auto;aspect-ratio:1400/720;object-fit:contain;background:#fff}
.igdots{display:flex;justify-content:center;gap:8px;margin:14px 0 0}
.igdot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;
  transition:background .18s,transform .18s}
.igdot:hover{background:var(--cta-l)}
.igdot.on{background:var(--cta);transform:scale(1.25)}
.igdot:focus-visible{outline:3px solid var(--cta);outline-offset:3px}
.ighint{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 0;
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.ighint .sw{width:22px;height:2px;border-radius:2px;background:var(--line);position:relative}
.ighint .sw:after{content:"";position:absolute;left:0;top:-1px;width:9px;height:4px;
  border-radius:2px;background:var(--cta);animation:swipeh 2.4s ease-in-out infinite}
@keyframes swipeh{0%,100%{transform:translateX(0)}50%{transform:translateX(13px)}}
@media(prefers-reduced-motion:reduce){.ighint .sw:after{animation:none}}
/* a wide screen fits more than one card, so the rail stops looking like a carousel */
/* how many WHOLE cards share the rail at each size */
@media(min-width:700px){.igrail{--ign:2;--iggap:18px}}
@media(min-width:1100px){.igrail{--ign:3}}
/* above 900px the arrows replace the swipe hint */
@media(min-width:900px){.ighint{display:none}}
/* Never centre an overflowing scroller. justify-content:center pushes the leading
   items to NEGATIVE offsets that scrollLeft can never reach, so on any screen
   1500px or wider the first profile became permanently invisible. */
.igrail{justify-content:flex-start}
.brand{display:inline-flex;align-items:center;gap:10px;filter:grayscale(1);opacity:.72;transition:.2s}
.brand:hover{filter:none;opacity:1}
.brand .bmark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-family:var(--disp);font-size:17px;color:#fff}
.brand .bface{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none}
.brand .bname{display:flex;flex-direction:column;line-height:1}
.brand .bname b{font-family:var(--disp);font-size:16px;color:var(--ink);letter-spacing:.01em}
.brand .bname span{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-top:3px}

/* sections */
section{padding:58px 0}
.sec-eye{margin-bottom:12px;display:inline-flex}
.center{text-align:center}
.center .sec-p,.center .eyebrow,.center .sec-eye{margin-left:auto;margin-right:auto}
.sec-h{font-size:clamp(30px,5.4vw,54px);line-height:1.05;max-width:22ch}
.center .sec-h{margin-left:auto;margin-right:auto}
.sec-p{color:var(--mut);max-width:56ch;margin-top:14px;font-size:17px;line-height:1.5}
.light{background:var(--paper)}.light2{background:var(--paper2)}
.dark{background:var(--dark);color:#fff}
.dark .sec-p{color:#AEB6C4}.dark .sec-h,.dark h2,.dark h3{color:#fff}
.popbg{background:linear-gradient(135deg,var(--cta),var(--cta-d));color:#FFFFFF}
.popbg .sec-p{color:rgba(255,255,255,.92)}
.sec-cta{margin-top:32px;display:flex;justify-content:center}

/* problem crossed list (with icons) */
.tried{display:grid;gap:11px;max-width:560px;margin:24px auto 0;text-align:left}
.tried li{list-style:none;display:flex;gap:13px;align-items:center;font-size:16px;font-weight:600;padding:14px 18px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#C7CDD9}
.tried li .ic{color:var(--pop);flex:none;width:22px;height:22px}
.tried li s{text-decoration:line-through;text-decoration-color:rgba(255,59,48,.6);opacity:.85}
.ceiling{font-family:var(--disp);font-size:clamp(24px,4.6vw,42px);text-transform:uppercase;line-height:1.08;text-align:center;max-width:20ch;margin:30px auto 0}

/* dream */
.dream{font-family:var(--disp);font-size:clamp(28px,5.4vw,52px);text-transform:uppercase;line-height:1.05;max-width:18ch;margin:0 auto;text-align:center;color:#fff}
.statrow{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:28px auto 0}
.stat{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:14px;padding:18px 26px;min-width:150px}
.sn{font-family:var(--disp);font-size:clamp(34px,5vw,50px);color:#fff;line-height:1}
.sl{font-size:13px;font-weight:700;color:rgba(255,255,255,.9);margin-top:6px}

/* ANIMATED PIPELINE (the "how it works" motion graphic) */
.pipe{max-width:960px;margin:34px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px;position:relative}
@media(max-width:720px){.pipe{grid-template-columns:repeat(2,1fr)}}
.pstep{position:relative;background:#fff;border:2px solid var(--line);border-radius:14px;padding:18px 14px 16px;text-align:center;
  animation:stepglow 4.4s ease-in-out infinite;animation-delay:calc(var(--i)*.45s)}
.pstep .pic{width:44px;height:44px;margin:0 auto 10px;border-radius:11px;display:grid;place-items:center;background:var(--paper2);color:var(--ink2);transition:.3s;
  animation:iconpop 4.4s ease-in-out infinite;animation-delay:calc(var(--i)*.45s)}
.pstep .pic svg{width:22px;height:22px}
.pstep .pt{font-weight:800;font-size:13.5px;color:var(--ink)}
.pstep .pn{position:absolute;top:8px;left:10px;font-family:var(--disp);font-size:13px;color:var(--line)}
.pstep.end{background:var(--cta);border-color:var(--cta);animation:none}
.pstep.end .pic{background:rgba(255,255,255,.2);color:#fff;animation:none}
.pstep.end .pt,.pstep.end .pn{color:#fff}
@keyframes stepglow{0%,64%,100%{border-color:var(--line);box-shadow:0 2px 8px rgba(10,13,20,.04)}12%,26%{border-color:var(--cta);box-shadow:0 10px 26px rgba(18,183,106,.28)}}
@keyframes iconpop{0%,64%,100%{background:var(--paper2);color:var(--ink2);transform:scale(1)}12%,26%{background:var(--cta);color:#fff;transform:scale(1.08)}}

/* value stack */
.stack{max-width:600px;margin:26px auto 0;display:grid;gap:11px;text-align:left}
.stackrow{display:flex;gap:14px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:13px;padding:15px 18px}
.stackrow .ck{flex:none;width:30px;height:30px;border-radius:9px;background:var(--cta);color:#fff;display:grid;place-items:center}
.stackrow .ck svg{width:17px;height:17px}
.stackrow b{font-size:16.5px}

/* comparison */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:840px;margin:26px auto 0;text-align:left}
@media(max-width:680px){.vs{grid-template-columns:1fr}}
.vscard{border-radius:16px;padding:24px 22px;border:2px solid var(--line);background:#fff;position:relative}
.vscard h4{font-family:var(--disp);font-size:21px;text-transform:uppercase;margin:0 0 6px;display:flex;align-items:center;gap:9px}
.vscard .tagx{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin:0 0 14px}
.vscard.old{background:var(--paper2)}.vscard.old h4{color:var(--mut)}.vscard.old .tagx{color:var(--pop)}
.vscard.new{border-color:var(--cta);box-shadow:0 14px 40px rgba(18,183,106,.16)}.vscard.new h4{color:var(--cta)}.vscard.new .tagx{color:var(--cta)}
.vscard ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.vscard li{display:flex;gap:11px;font-size:15.5px;font-weight:600;color:var(--ink2);align-items:flex-start}
.vscard li .ic{flex:none;width:20px;height:20px;margin-top:1px}
.vscard.old li .ic{color:var(--pop)}.vscard.new li .ic{color:var(--cta)}

/* proof — headshots + funnel screenshots */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:30px;text-align:left}
@media(max-width:760px){.pgrid{grid-template-columns:1fr}}
.pcard{background:var(--dark2);border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden}
.pshot{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,#1c2333,#0f1420);overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.pshot img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.pshot .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#5B6784;font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;gap:8px}
.pbody{padding:18px 20px 20px;position:relative}
.phead{width:58px;height:58px;border-radius:50%;position:absolute;top:-29px;left:20px;border:3px solid var(--dark2);object-fit:cover;display:grid;place-items:center;font-family:var(--disp);font-size:22px;color:#fff}
.pcard .cli{font-family:var(--disp);font-size:19px;text-transform:uppercase;color:#fff;margin-top:0}
.pcard .niche{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cta);margin:2px 0 10px}
.pcard p{color:#C7CDD9;font-size:14.5px;font-weight:500}
.pcard p b{color:#fff}
.pcard.feat{grid-column:1/-1}
@media(min-width:761px){
  .pcard.feat{display:grid;grid-template-columns:300px 1fr;align-items:stretch}
  .pcard.feat .pshot{aspect-ratio:auto;height:100%;min-height:210px;border-bottom:0;border-right:1px solid rgba(255,255,255,.08)}
  .pcard.feat .pbody{padding:28px 30px;display:flex;flex-direction:column;justify-content:center}
  .pcard.feat .cli{font-size:25px}
  .pcard.feat p{font-size:16px}
}

/* CTA band */
.band{text-align:center}
.band .sec-h{margin:0 auto;max-width:18ch}

/* steps (book/booked) */
.steps{display:flex;gap:9px;justify-content:center;align-items:center;margin:0 auto;font-size:12.5px;color:var(--mut);font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.steps .s{display:flex;align-items:center;gap:8px}
.steps .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;border:2px solid var(--line)}
.steps .s.on .n{background:var(--cta);color:#fff;border-color:transparent}.steps .s.on{color:var(--ink)}
.steps .bar{width:24px;height:2px;background:var(--line)}

/* calendly + expect */
.calwrap{margin:22px auto 0;max-width:900px;border-radius:14px;overflow:hidden;border:2px solid var(--line);background:#fff;min-height:700px}
.calendly-inline-widget{min-height:700px}
.expect{display:grid;gap:12px;max-width:560px;margin:24px auto 0;text-align:left}
.expect li{list-style:none;display:flex;gap:12px;align-items:flex-start;font-size:15.5px;font-weight:600;color:var(--ink2)}
.expect li .m{flex:none;width:24px;height:24px;border-radius:50%;background:var(--cta);color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px}
.dark .expect li{color:#C7CDD9}
.cal-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
.cal-btns .btn{font-size:14px;padding:12px 20px;border-radius:11px}
.cal-when{font-family:var(--disp);font-size:clamp(20px,3.4vw,30px);text-transform:uppercase;color:var(--cta);text-align:center;margin-top:8px}

/* sticky mobile CTA + float */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;padding:10px 14px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.sticky-cta .btn{width:100%}
@media(max-width:760px){.sticky-cta{display:block}body{padding-bottom:76px;overflow-x:hidden}}
/* Mobile: drop the top header (too many CTAs), pin the red scarcity banner instead */
@media(max-width:760px){
  .top{display:none}
  .promo{position:sticky;top:0;z-index:60;font-size:11.5px;line-height:1.35;padding:9px 14px}
}
.float{position:fixed;right:20px;bottom:20px;z-index:45}
@media(max-width:760px){.float{display:none}}

/* Phone: tighten the block under the calendar mock. The stars and the duplicate
   "trusted by" line come out; the guarantee and the partner-spot meter stay. */
@media(max-width:760px){
  .vstack .rating{display:none}
  .vstack{margin-top:14px;gap:10px}
  .phcap{margin-top:12px;font-size:14.5px}
  .spots{margin-top:14px}
}

/* Phone: these two labels wrap to two lines, and as flex rows that stranded the
   little status dot alone at the far left, level with neither line. Put the dot in
   the text flow instead so it travels with the first word. */
@media(max-width:760px){
  .pre{display:inline-block;text-align:center;line-height:1.35}
  .pre .d{display:inline-block;vertical-align:middle;margin-right:7px}
  .scarcity{display:block;line-height:1.45}
  .scarcity .dot{display:inline-block;vertical-align:middle;margin-right:7px}
}

/* Phone: the proof logos wrapped into a ragged 1 / 2 / 1 / 1 stagger. A two-column
   grid puts them on an even baseline, and a lone last item centres across both. */
@media(max-width:760px){
  .logos{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;align-items:center}
  .logos .brand{justify-self:start;width:100%}
  .logos .brand:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:auto}
  .trusted{padding:18px 0}
  .trusted .lab{margin-bottom:12px}
}

footer{background:var(--dark);border-top:1px solid rgba(255,255,255,.08);padding:36px 0 46px;color:#8A93A3;font-size:13px;text-align:center}
footer .wrap{display:flex;flex-direction:column;gap:10px;align-items:center}
footer .logo{color:#fff}
footer .fine{font-size:11.5px;color:#A7B0C0;max-width:60ch;line-height:1.5}

/* ============ CUSTOM MOTION GRAPHICS ============ */
/* hero floating proof chips */
.floatchips{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.chip{position:absolute;display:inline-flex;gap:7px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--ink2);box-shadow:0 8px 24px rgba(10,13,20,.1);white-space:nowrap;opacity:0;animation:chipfloat 10s ease-in-out infinite}
.chip .cd{width:9px;height:9px;border-radius:50%;background:var(--cta);flex:none}
@keyframes chipfloat{0%{opacity:0;transform:translateY(30px) scale(.9)}14%,78%{opacity:.96}100%{opacity:0;transform:translateY(-70px) scale(1)}}

/* Hormozi-style napkin sketch (problem) */
.sketch{max-width:560px;margin:32px auto 0;background:#FBFAF3;border:1px solid #E7E2D2;border-radius:18px;padding:26px 22px 20px;box-shadow:0 22px 55px rgba(0,0,0,.35);position:relative}
.sketch .tape{position:absolute;top:-9px;left:50%;width:90px;height:20px;margin-left:-45px;background:rgba(255,226,61,.8);border:1px solid rgba(0,0,0,.06);transform:rotate(-2deg);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.sketchsvg{width:100%;height:auto;display:block}
.sketchsvg .ink{stroke:#2A2822;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sketchsvg .ink2{stroke:#2A2822;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sketchsvg .gink{stroke:var(--cta-d)}
.sketchsvg .rink{stroke:var(--pop)}
.sketchsvg .lead{fill:var(--pop)}
.sketchsvg .hand{font-family:"Caveat",cursive;font-weight:700}
.sketchsvg .hand.r{fill:var(--pop)}.sketchsvg .hand.g{fill:var(--cta-d)}
.sketch.in .drip{animation:drop 2.6s ease-in infinite}
.sketch-cap{font-family:"Permanent Marker",cursive;color:#2A2822;font-size:clamp(19px,3.6vw,27px);text-align:center;margin-top:12px;line-height:1.3}
.uline{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:3px}
.sketch-cap u,.sketch-cap .uline{text-decoration-color:var(--cta-d);text-decoration-thickness:3px;text-underline-offset:3px}
.sketch-cap .circ{position:relative;white-space:nowrap;margin:0 7px}
.sketch-cap .circ:after{content:"";position:absolute;inset:-6px -9px;border:3px solid var(--pop);border-radius:47% 53% 50% 50%/62% 55% 45% 40%;transform:rotate(-4deg);pointer-events:none}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes drop{0%{transform:translateY(-6px);opacity:0}12%{opacity:1}68%{opacity:1}100%{transform:translateY(48px);opacity:0}}

/* animated calendar filling with bookings (the dream) */
.calanim{max-width:340px;margin:4px auto 24px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.32);border-radius:18px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.calhdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.calhdr i{font-style:normal;display:flex;gap:5px}
.calhdr i b{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);display:block}
.calgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.cell{aspect-ratio:1;border-radius:8px;background:rgba(255,255,255,.16);position:relative}
.cell .chk{position:absolute;inset:0;border-radius:8px;background:#fff;display:grid;place-items:center;opacity:0;animation:cellfill 7s ease-in-out infinite;animation-delay:calc(var(--c)*.19s)}
.cell .chk svg{width:58%;height:58%;stroke:var(--cta);stroke-width:3.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes cellfill{0%,4%{opacity:0;transform:scale(.5)}10%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.5)}}

/* conveyor feeding the machine */
.conveyor{position:relative;height:44px;max-width:960px;margin:8px auto -8px;overflow:hidden}
.conveyor .rail{position:absolute;top:50%;left:70px;right:70px;height:2px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,var(--line) 0 9px,transparent 9px 18px)}
.conveyor .cdot2{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--cta);transform:translateY(-50%);box-shadow:0 0 12px rgba(18,183,106,.7);animation:convey 3s linear infinite}
@keyframes convey{from{left:64px}to{left:calc(100% - 70px)}}
.conveyor .clab{position:absolute;top:50%;transform:translateY(-50%);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);background:var(--paper2);padding:0 6px}
.conveyor .clab.l{left:0}.conveyor .clab.r{right:0}

/* comparison motion accents */
.moneyfly{display:inline-block;animation:flyaway 2.8s ease-in infinite}
@keyframes flyaway{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(16px,-24px) rotate(18deg)}}
.moneyin{display:inline-block;animation:comein 2.6s ease-out infinite}
@keyframes comein{0%{opacity:0;transform:translateY(18px)}55%,100%{opacity:1;transform:translateY(0)}}

/* hand-drawn arrow */
.darrow{color:var(--cta)}
.darrow path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240}
.darrow.in path{animation:draw 1.4s ease-out forwards}

/* motion */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.anim{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.07s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}.d4{animation-delay:.38s}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes ctapulse{0%{box-shadow:0 0 0 0 rgba(18,183,106,.5)}100%{box-shadow:0 0 0 24px rgba(18,183,106,0)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes flash{0%,100%{opacity:1}50%{opacity:0}}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,20px) scale(1.1)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}
.flatsvg .redline,.flatsvg .greenline{stroke-dashoffset:0}
.flatsvg .rdot,.flatsvg .gdot,.flatsvg .redarea,.flatsvg .gaparea,.flatsvg .chip{opacity:1}}

/* ===== professional revenue chart hero visual ===== */
.revcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 14px;box-shadow:0 24px 60px rgba(10,13,20,.14);max-width:400px;margin:0 auto}
.revtop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.revlbl{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--mut)}
.revnum{font-size:34px;font-weight:900;color:var(--ink);letter-spacing:-.5px;line-height:1.05;margin-top:4px}
.revnum .revunit{font-size:15px;font-weight:700;color:var(--mut);margin-left:5px}
.revbadge{font-size:12px;font-weight:800;color:var(--cta-d);background:rgba(18,183,106,.12);border-radius:999px;padding:5px 11px;white-space:nowrap;margin-top:4px}
.revchart{width:100%;height:auto;display:block;margin-top:10px;overflow:visible}
.revchart .grid{stroke:var(--line);stroke-width:1}
.revchart .revarea{fill:url(#revfill);animation:revfade 1.2s ease .55s both}
.revchart .revline{fill:none;stroke:var(--cta);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:640;animation:revdraw 1.5s cubic-bezier(.4,.08,.2,1) .2s both}
.revchart .revdot{fill:var(--cta);stroke:#fff;stroke-width:2.5;animation:revfade .3s ease 1.5s both}
@keyframes revdraw{from{stroke-dashoffset:640}to{stroke-dashoffset:0}}
@keyframes revfade{from{opacity:0}to{opacity:1}}
.revfoot{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.revfoot .revd{width:8px;height:8px;border-radius:50%;background:var(--cta);box-shadow:0 0 0 4px rgba(18,183,106,.14);animation:revblink 1.8s ease-in-out infinite}
@keyframes revblink{50%{opacity:.4}}
@media(max-width:880px){.floatchips{display:none}.revcard{max-width:100%}.herob-grid{gap:16px}.herob .lede{font-size:16px;margin-top:8px}.vstack{align-items:center;text-align:center}}

/* ===== split-screen: dry vs shower of leads (scoped, no collisions) ===== */
.split-sec{padding:52px 0;background:var(--paper2)}
.split-sec .splitgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:720px;margin:26px auto 0}
.split-sec .splitcol{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 16px;text-align:center;box-shadow:0 14px 38px rgba(10,13,20,.07)}
.split-sec .splitcol.wet{border-color:rgba(18,183,106,.42);box-shadow:0 18px 44px rgba(18,183,106,.14)}
.split-sec .stickscene{width:100%;max-width:190px;height:auto;display:block;margin:0 auto;overflow:visible}
.split-sec .splitlbl{margin-top:12px;font-size:13.5px;font-weight:700;line-height:1.45}
.split-sec .splitlbl.bad{color:var(--mut)}.split-sec .splitlbl.good{color:var(--cta-d)}
.split-sec .st{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.split-sec .dry .st{stroke:#A7B0C0}.split-sec .wet .st{stroke:var(--ink)}
.split-sec .dry .funnel{stroke:#CFD6E3}.split-sec .wet .funnel{stroke:var(--cta)}
.split-sec .drop{fill:var(--cta)}
.split-sec .rain .drop{animation:sfall 1.35s linear infinite}
@keyframes sfall{0%{transform:translateY(0);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translateY(120px);opacity:0}}
.split-sec .man.dance{animation:sbounce .66s ease-in-out infinite}
@keyframes sbounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.split-sec .dance .arm-l{transform-origin:100px 172px;animation:sarmL .66s ease-in-out infinite}
.split-sec .dance .arm-r{transform-origin:100px 172px;animation:sarmR .66s ease-in-out infinite}
@keyframes sarmL{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-16deg)}}
@keyframes sarmR{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(16deg)}}
.split-sec .dance .leg-l{transform-origin:100px 200px;animation:slegL .66s ease-in-out infinite}
@keyframes slegL{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@media(max-width:680px){.split-sec .splitgrid{grid-template-columns:1fr;max-width:340px}}

/* ===== hero: a phone blowing up with booked calls ===== */
.phonewrap{max-width:300px;margin:0 auto}
.phone{position:relative;background:#0A0D14;border-radius:34px;padding:12px 10px;box-shadow:0 30px 72px rgba(10,13,20,.30);animation:phbuzz 4.2s ease-in-out infinite}
@keyframes phbuzz{0%,90%,100%{transform:rotate(0)}92%{transform:rotate(-1.3deg)}94%{transform:rotate(1.3deg)}96%{transform:rotate(-.7deg)}98%{transform:rotate(.4deg)}}
.phnotch{width:42%;height:7px;background:#232a38;border-radius:99px;margin:2px auto 8px}
.phscreen{background:linear-gradient(180deg,#F3F6FB,#fff);border-radius:24px;padding:14px 12px}
.phhead{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;color:var(--ink2);margin-bottom:12px}
.phlive{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cta-d);background:rgba(18,183,106,.12);padding:3px 9px;border-radius:999px}
.phlive .pd{width:6px;height:6px;border-radius:50%;background:var(--cta);animation:phblink 1.4s ease-in-out infinite}
@keyframes phblink{50%{opacity:.3}}
.pnote{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:10px 11px;margin-bottom:9px;box-shadow:0 6px 16px rgba(10,13,20,.06);animation:pnslide .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i)*.7s + .5s)}
@keyframes pnslide{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)}}
.pnote.pnew{border-color:rgba(18,183,106,.5);box-shadow:0 8px 20px rgba(18,183,106,.16);animation:pnloop 3.2s ease-in-out infinite}
@keyframes pnloop{0%{opacity:0;transform:translateY(-14px) scale(.97)}14%{opacity:1;transform:translateY(0) scale(1)}82%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(6px)}}
.pnote .pav{width:34px;height:34px;border-radius:50%;color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.pnote .pnt{min-width:0;flex:1;text-align:left}
.pnote .pnt b{display:block;font-size:12.8px;font-weight:800;color:var(--ink);line-height:1.2}
.pnote .pnt span{font-size:11px;color:var(--mut);font-weight:600}
.pnote .pchk{color:var(--cta);font-weight:900;flex:none}
.phcap{text-align:center;font-size:15px;font-weight:800;color:var(--ink);margin-top:14px}
@media(max-width:880px){.phonewrap{max-width:280px}}

/* hero: centered trust line + phone chrome */
.vstack.centered{align-items:center;text-align:center}
.phone{position:relative}
.phone .phbtn{position:absolute;width:3px;border-radius:3px;background:#1b2230}
.phone .phvol{left:-3px;top:82px;height:54px;background:#1b2230}
.phone .phpow{right:-3px;top:72px;height:36px;background:#1b2230}
.phstatus{display:flex;justify-content:space-between;align-items:center;padding:0 6px 9px}
.phstatus .phtime{font-size:11px;font-weight:800;color:var(--ink)}
.phstatus .phmeta{display:inline-flex;align-items:flex-end;gap:2px}
.phstatus .phmeta i{width:3px;height:9px;background:var(--ink2);border-radius:1px;display:inline-block}
.phstatus .phmeta i:nth-child(1){height:4px}.phstatus .phmeta i:nth-child(2){height:6px}
.phstatus .phmeta .batt{width:17px;height:9px;border:1.5px solid var(--ink2);border-radius:2px;margin-left:3px;position:relative;display:inline-block}
.phstatus .phmeta .batt:after{content:"";position:absolute;left:1px;top:1px;bottom:1px;width:68%;background:var(--cta);border-radius:1px}
.phhome{width:36%;height:5px;background:#0A0D14;opacity:.45;border-radius:99px;margin:12px auto 2px}

#optin{scroll-margin-top:84px}