:root{
  --bg:#0a0a0a; --panel:#0f0f0f; --panel-border:#232323; --border:rgba(255,255,255,.15);
  --text:#ffffff; --muted:rgba(255,255,255,.7); --muted-2:#666666;
  --accent:#ffbd4a; --danger:#ff5a5a;
  --gold:linear-gradient(114deg,#ffd999 0%,#ffbd4a 35%,#ffcb70 69.6%,#ffb433 100%);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --serif:"Instrument Serif",Georgia,serif;
  --container:1080px;
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:20px;line-height:1.2;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;padding-bottom:110px;font-optical-sizing:auto}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.04em;font-optical-sizing:auto}
h1{font-size:clamp(32px,3vw,40px);line-height:1.1;text-align:center;max-width:690px;margin:0 auto}
h2{font-size:clamp(34px,4vw,56px);line-height:1.1;text-align:center;max-width:800px;margin:0 auto 44px}
h2.wide{max-width:1080px}
h2.left{text-align:left;margin:0 0 20px;font-size:clamp(30px,3vw,40px)}
h3{font-size:24px;line-height:1.1;letter-spacing:-.01em}
p{margin:0}
.accent{color:var(--accent)}
.muted{color:var(--muted)}
.center{text-align:center}
.section > .center{margin-top:56px}
.container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:20px}
.container.narrow{max-width:920px}
.container.wide{max-width:1240px}
.section{padding-block:94px}
.sub{color:var(--muted);text-align:center;max-width:620px;margin:-24px auto 48px;font-size:20px;line-height:1.2}
.sub.left{text-align:left;margin:20px 0 28px}

/* header + wordmark */
.site-header{display:flex;justify-content:center;padding:40px 20px 0}
.wordmark{font-family:var(--serif);font-style:italic;font-size:28px;line-height:1;text-align:center;letter-spacing:0}
.wordmark.small{font-size:24px}

/* buttons */
.btn{appearance:none;border:0;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:500;font-size:18px;letter-spacing:-.01em;border-radius:8px;padding:14px 32px 16px 34px;transition:transform .15s ease,box-shadow .15s ease;white-space:nowrap;max-width:100%}
.btn-primary{background:var(--gold);color:#0a0a0a;box-shadow:0 8px 32px rgba(255,189,74,.25)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 36px rgba(255,189,74,.4)}
.btn-hero{width:400px}
.btn-sm{padding:10px 20px 11px 22px;font-size:16px}
.arrow{font-size:15px}

/* Short viewports: a 1440x900 laptop only gives the page ~760px once browser
   chrome is subtracted, which pushed BOOK A CALL below the fold. Compress the
   hero by height, not width, so tall monitors keep the roomier spacing. The
   video stays the largest element on screen. */
@media (min-width:561px) and (max-height:900px){
  .hero:not(.fto-hero){padding-top:24px}
  .hero:not(.fto-hero) h1{font-size:34px}
  .hero:not(.fto-hero) .lead{font-size:18px;margin:12px auto 18px}
  .hero:not(.fto-hero) .video-frame{max-width:560px;margin-bottom:20px}
  .hero:not(.fto-hero) .limited-spots{margin-top:12px}
}
@media (min-width:561px) and (max-height:780px){
  .hero:not(.fto-hero){padding-top:16px}
  .hero:not(.fto-hero) h1{font-size:30px}
  .hero:not(.fto-hero) .lead{font-size:17px;margin:10px auto 14px}
  .hero:not(.fto-hero) .video-frame{max-width:500px;margin-bottom:16px}
  .hero:not(.fto-hero) .btn-hero{padding-block:12px 13px}
  .hero:not(.fto-hero) .limited-spots{margin-top:10px}
}

@media (min-width:561px) and (max-height:680px){
  .hero:not(.fto-hero){padding-top:10px}
  .hero:not(.fto-hero) h1{font-size:27px}
  .hero:not(.fto-hero) .lead{font-size:16px;margin:8px auto 12px}
  .hero:not(.fto-hero) .video-frame{max-width:420px;margin-bottom:14px}
}

/* hero */
.hero{padding-top:40px;text-align:center}
.hero .lead{margin:18px auto 28px}
.hero .video-frame{margin-bottom:28px}
.hero .limited-spots{margin-top:16px}
.lead{color:var(--muted);max-width:665px;margin:20px auto 36px;font-size:20px;line-height:1.2}
.video-frame{background:#000;border-radius:14px;padding:6px;max-width:660px;margin:0 auto 36px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.ratio-16x9{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
.ratio-16x9 iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cohort-status{margin-top:28px;font-size:20px;line-height:1.3;color:var(--muted)}
.cohort-status strong{font-weight:600;color:var(--text)}

/* application embed (iClosed): fixed box, force their widget + iframe to fill it, no overflow clipping */
.iclosed-wrap{background:transparent;border:0;border-radius:10px;max-width:1040px;margin:0 auto;height:530px;padding:0}
.iclosed-wrap .iclosed-widget,.iclosed-wrap .iclosed-widget iframe{height:100% !important;width:100% !important;min-height:0 !important}
.iclosed-wrap iframe{display:block;border:0;background:transparent;border-radius:8px;width:100%;height:100%}
/* iClosed's origin is slow (2 to 3s to first byte, then a 736KB app). Until the
   iframe fires load, a quiet placeholder says something is coming. */
.iclosed-wrap{position:relative;color-scheme:light}
/* color-scheme:light is load-bearing. An iframe stays transparent only while it
   and its parent agree on colour scheme; this page is dark and iClosed's
   document is light, and on a mismatch Chrome paints an opaque white canvas
   behind the iframe. widget.css used to set this on .iclosed-widget. */
.embed-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--muted);font-size:15px;letter-spacing:.01em;pointer-events:none;transition:opacity .3s}
.embed-loading span{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,189,74,.25);border-top-color:var(--accent);animation:embed-spin .8s linear infinite}
@keyframes embed-spin{to{transform:rotate(360deg)}}
.iclosed-wrap.loaded .embed-loading{opacity:0}
/* Nothing competes with the form while it is on screen. */
body.form-in-view #iclosed-cta-container,
body.form-in-view .testimonial-popup{display:none !important}
.iclosed-wrap .iclosed-embed-loader,.iclosed-wrap .iclosed-loader-container{background:#0f0f0f !important}
.iclosed-wrap .iclosed-placeholder,.iclosed-wrap .iclosed-loader-button{background-color:#1a1a1a !important}
.iclosed-wrap .iclosed-loader-header{border-color:#232323 !important}
.reviews-badge{display:flex;justify-content:center;align-items:center;gap:10px;margin:32px auto 24px;color:var(--muted);font-size:20px}
.stars{color:var(--accent);letter-spacing:2px;font-size:16px;line-height:1}

/* grids + cards */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{background:transparent;border:1px solid var(--border);border-radius:8px;padding:16px}
.card h3{margin-bottom:12px}
.card p{color:var(--muted);font-size:20px;line-height:1.2}
.panel{background:var(--panel);border-color:var(--panel-border);border-radius:10px}

/* video testimonial cards */
.vcard{background:transparent;border:1px solid var(--border);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:14px}
.vcard .person{margin-top:auto}
.vcard .ratio-16x9,.vcard .video-frame{margin-top:auto}
.vcard-featured{max-width:800px;margin:0 auto 20px;padding:24px}
.vcard-title{font-size:20px;font-weight:400;color:var(--muted);line-height:1.2;letter-spacing:-.01em}
.vcard-featured .vcard-title{font-size:24px}
.person{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:600;letter-spacing:-.025em;margin-top:4px}
.person img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#222}
.person span{display:flex;flex-direction:column;line-height:1.3}
.person small{color:var(--muted-2);font-weight:500;font-size:16px;letter-spacing:0}
.vcard-plain{padding:12px}
.vfoot{display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:500;padding:4px 4px 0}

/* fit cards */
.fit-grid{align-items:stretch;max-width:1060px;margin:0 auto}
.fit-card{background:var(--panel);border-color:var(--panel-border);border-radius:10px;padding:40px}
.fit-icon{width:40px;height:40px;margin-bottom:26px;opacity:.9}
.fit-card h3{font-size:24px;font-weight:700;margin-bottom:22px}
.check-list,.cross-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;color:var(--muted);font-size:20px;line-height:1.2}
.check-list li,.cross-list li{position:relative;padding-left:28px}
.check-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
.fit-card .check-list li::before{color:#029a02}
.cross-list li::before{content:"✕";position:absolute;left:0;top:0;color:var(--danger);font-weight:700}
.solution .check-list{color:var(--text)}

/* text testimonials */
.tcard{display:flex;flex-direction:column}
.tcard h3{font-size:24px;margin:14px 0 10px}
.tcard .person{margin-top:auto;padding-top:20px}

/* about */
.portrait{width:100%;max-width:506px;margin:0 auto;border-radius:12px;aspect-ratio:506/515;object-fit:cover}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:64px;text-align:center;border:1px solid var(--border);border-radius:8px;padding:16px 16px 24px}
.stat-num{font-size:56px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.stat-label{margin-top:8px;font-size:20px;letter-spacing:.02em;color:var(--muted);line-height:1.2}

/* pills */
.pill{display:inline-block;font-size:16px;font-weight:500;letter-spacing:-.01em;padding:6px 14px;border:1px solid var(--border);border-radius:999px;color:var(--accent);background:transparent;margin-bottom:24px}
.section > .pill{display:block;width:max-content;margin:0 auto 24px}

/* problems */
.problem{padding:32px}
.problem .x{color:var(--danger);font-size:26px;font-weight:700;line-height:1;margin-bottom:22px}
.problem h3{font-size:24px}

/* solution */
.solution{display:grid;grid-template-columns:minmax(0,660px) minmax(0,1fr);gap:56px;align-items:center}
.solution img{border-radius:12px;width:100%;max-width:660px}
.solution .btn{margin-top:32px}
.solution .check-list{margin-top:8px}

/* roles */
.roles{gap:18px}
.roles .role{padding:24px;gap:14px;display:flex;flex-direction:column}
.roles .role h3{font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.015em;margin:0}
.roles .role p{font-size:14.5px;line-height:1.5;letter-spacing:-.005em;color:rgba(255,255,255,.6)}
.role-text{display:flex;flex-direction:column;gap:7px}

/* included bento */
.bento{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.inc{display:flex;flex-direction:column;gap:14px;background:var(--panel);border-color:var(--panel-border);border-radius:10px;padding:40px}
.inc img{border-radius:10px;border:1px solid var(--panel-border);margin-top:auto;width:100%;aspect-ratio:16/9;object-fit:cover}
.inc .pill{margin-bottom:6px;width:max-content;color:var(--accent);font-size:16px;letter-spacing:.02em;border-color:rgba(255,189,74,.45);background:rgba(255,189,74,.12)}
.inc-wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:40px;padding:60px 40px}
.inc-wide img{max-width:46%;margin-top:0}
.inc-wide > div{display:flex;flex-direction:column;gap:14px}
.schedule{margin:32px auto;border-radius:10px;border:1px solid var(--panel-border);max-width:880px}

/* they joined */
.joined{margin:0 auto}
.proof-grid{columns:2;column-gap:20px;margin:48px auto 0}
.proof-col{display:contents}
.proof-col img,.proof-grid > img{display:block;border-radius:8px;border:1px solid rgb(255,189,74);padding:1px;width:100%;margin-bottom:26px;break-inside:avoid;box-shadow:0 0 60px 0 rgba(255,189,74,.3)}

/* comparison */
.compare{border:0;background:transparent}
.compare-head,.compare .row{display:grid;grid-template-columns:2.4fr 1fr 1fr;align-items:center;gap:12px;padding:18px 0}
.compare-head{border-bottom:1px solid var(--border);padding-block:24px}
.compare .row + .row{border-top:1px solid var(--border)}
.compare .row > div:first-child{font-size:24px;font-weight:500;letter-spacing:-.03em;line-height:1.5}
.compare .row > div{display:flex;justify-content:center}
.compare .row > div:first-child{justify-content:flex-start}
.compare-head .diy{text-align:center;font-weight:600;font-size:18px}
.compare-head .wordmark{font-size:24px;max-width:170px;margin:0 auto;text-align:center}
.tag{font-size:16px;font-weight:500;padding:8px 12px;border-radius:8px;border:1px solid var(--border);white-space:nowrap;background:var(--bg)}
.tag.yes{color:var(--accent);border-color:rgba(255,189,74,.55);
  box-shadow:0 0 22px 0 rgba(255,189,74,.28),0 6px 26px -8px rgba(255,189,74,.35)}
.tag.no{color:var(--muted)}

/* faq */
.faq{display:flex;flex-direction:column;gap:14px;max-width:880px;margin:0 auto}
.faq details{background:transparent;border:1px solid var(--border);border-radius:20px;padding:0 32px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:28px 0;font-size:24px;font-weight:500;letter-spacing:-.01em;color:var(--muted)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;color:var(--muted);transition:transform .2s ease;flex:none}
.faq details[open] summary{color:var(--text)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);font-size:20px;line-height:1.25;padding-bottom:28px;margin-top:0}

/* final cta */
.final{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;border-radius:10px;padding:56px 40px;background:radial-gradient(120% 90% at 18% 100%,rgba(255,150,40,.22),transparent 60%),radial-gradient(70% 60% at 92% 0%,rgba(255,189,74,.10),transparent 60%),var(--panel)}
.final h2{font-size:clamp(28px,2.6vw,36px);line-height:1.1;letter-spacing:-.04em}
.final .btn{margin-top:28px;width:min(400px,100%)}
.final .muted{margin-top:24px;font-size:20px}
.final .check-list{margin-top:24px}
.avatar-stack{display:flex;margin-bottom:24px}
.avatar-stack img{width:34px;height:34px;border-radius:50%;border:2px solid var(--panel);margin-left:-9px;background:#222}
.avatar-stack img:first-child{margin-left:0}
.final-images{display:flex;justify-content:center}
.final-images img{width:min(100%,420px);height:auto}

/* footer */
.site-footer{padding-block:70px 30px}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;padding-bottom:40px;border-bottom:1px solid var(--border)}
.footer-grid .wordmark{text-align:left;margin-bottom:16px}
.footer-grid p{font-size:18px;max-width:440px;line-height:1.3}
.footer-title{font-weight:600;font-size:18px;margin-bottom:14px}
.footer-grid a{display:block;color:var(--muted);font-size:18px;margin-bottom:10px}
.footer-grid a:hover{color:var(--text)}
.copyright{text-align:center;color:var(--muted);font-size:16px;padding-top:28px}

/* sticky cta */
.sticky-cta{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:22px;background:rgba(15,15,15,.92);border:1px solid var(--border);border-radius:12px;padding:10px 10px 10px 22px;font-size:16px;color:var(--muted);backdrop-filter:blur(12px);z-index:50;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s ease}
.sticky-cta.show{opacity:1;pointer-events:auto}

/* reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* responsive */
@media (max-width:1000px){
  .iclosed-wrap{height:700px}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .solution{grid-template-columns:1fr;gap:32px}
  .inc-wide{flex-direction:column;align-items:stretch;padding:40px}
  .inc-wide img{max-width:100%}
  .final{grid-template-columns:1fr}
  .final-images img:nth-child(n){width:100%;align-self:stretch}
}
@media (max-width:680px){
  body{font-size:18px}
  .section{padding-block:48px}
  .sub,.lead,.card p,.check-list,.cross-list,.cohort-status,.faq details p,.final .muted,.vcard-title{font-size:18px}
  /* single-column collapse moved to its own 600px breakpoint below */
  .footer-grid{grid-template-columns:1fr}
  .fit-card,.problem,.inc{padding:28px 22px}
  .compare-head,.compare .row{grid-template-columns:1.2fr 1fr 1fr;padding:14px 12px;gap:8px}
  .compare .row > div:first-child{font-size:15px;line-height:1.3}
  .compare-head .wordmark{font-size:18px}
  .tag{font-size:12px;padding:6px 8px;white-space:normal;text-align:center}
  .faq details{padding:0 20px;border-radius:14px}
  .faq summary{font-size:19px;padding:20px 0}
  .iclosed-wrap{height:900px}
  .final{padding:28px 22px}
  .proof-grid{columns:1}
  .sticky-cta{left:16px;right:16px;transform:none;justify-content:space-between;white-space:normal;padding-left:16px}
  .sticky-cta span{font-size:14px;line-height:1.3}
  .btn{padding:14px 26px 15px 28px;font-size:17px}
  .btn-hero{width:100%}
  h3{font-size:22px}
}


/* ============================================================
   home-3 parity additions
   ============================================================ */

/* hero: LIMITED SPOTS replaces the cohort block */
.limited-spots{margin-top:20px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}

/* glow card — lifted from the Framer home-3 card component */
.glow-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:16px;
  background:linear-gradient(158deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.022) 42%,rgba(255,255,255,.012) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 40px -30px rgba(0,0,0,.9)}
.glow-card::before{content:"";position:absolute;top:-70px;left:-50px;width:210px;height:170px;pointer-events:none;
  background:radial-gradient(60% 60% at 30% 30%,rgba(255,189,74,.26) 0%,rgba(255,189,74,0) 72%);filter:blur(6px)}
.glow-card::after{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,189,74,0) 0%,rgba(255,189,74,.5) 50%,rgba(255,189,74,0) 100%)}
.glow-card > *{position:relative}

/* gold icon tile */
.icon-tile{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto;border-radius:12px;
  color:var(--accent);border:1px solid rgba(255,189,74,.28);
  background:linear-gradient(150deg,rgba(255,189,74,.24) 0%,rgba(255,189,74,.05) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 22px -12px rgba(255,189,74,.8)}

/* logo wall */
.logo-wall{padding-block:0 0}
.logo-kicker{text-align:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:0 0 58px}
.logo-row{overflow:hidden;margin-bottom:44px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.logo-track{display:flex;align-items:center;gap:96px;width:max-content;will-change:transform}
.logo-track img{height:39px;width:auto;max-width:205px;object-fit:contain;opacity:.78;flex:0 0 auto}
/* No filter here on purpose. The files are pre-baked pure white, so the old
   grayscale+brightness filter was a no-op visually but ran every frame on 42
   images inside a continuously animating track, and rendered differently on
   iOS. Explicit width/height on each <img> keeps the track width fixed before
   the files load; with lazy loading it grew as logos arrived and the -50%
   loop target moved mid-animation, which is the jump seen on phones. */
@media (max-width:560px){.logo-track{gap:48px}.logo-track img{height:30px;max-width:150px}}
.track-a{animation:marquee-a 34s linear infinite}
.track-b{animation:marquee-b 34s linear infinite}
@keyframes marquee-a{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-b{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.track-a,.track-b{animation:none}}

/* academy results — CSS copied from the home-3 code embed */
.aaa-proof-stat-row{position:relative;box-sizing:border-box;width:100%;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:34px 0;padding:44px 24px;
  border-radius:12px;border:1px solid rgba(255,255,255,0.15)}
.aaa-proof-stat-row .sr-item{position:relative;flex:1 1 240px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.aaa-proof-stat-row .sr-val{margin:0;font-size:clamp(28px,3.1vw,44px);font-weight:500;line-height:1.05;letter-spacing:-0.03em;
  text-align:center;white-space:nowrap;color:var(--accent)}
.aaa-proof-stat-row .sr-lab{margin:0;font-size:15px;line-height:1.45;letter-spacing:-0.01em;text-align:center;
  color:rgba(213,219,230,0.7);max-width:240px;text-wrap:balance}
@media (min-width:900px){.aaa-proof-stat-row .sr-item + .sr-item::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:76px;background:rgba(255,255,255,0.15)}}
@media (max-width:899px){.aaa-proof-stat-row .sr-item{flex:1 1 100%}}
@media (max-width:640px){.aaa-proof-stat-row{padding:32px 20px;gap:28px 0}.aaa-proof-stat-row .sr-lab{font-size:14px}}
#results-stats h2{margin-bottom:36px}
.sr-foot{margin:18px 0 0;text-align:center;font-size:13px;color:var(--muted-2)}

/* social-proof popup — ported from the home-3 embed */
.testimonial-popup{position:fixed;bottom:18px;left:16px;z-index:9999;background:rgba(30,30,30,.95);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:2px solid #ffbc4b;border-radius:14px;
  padding:12px 34px 12px 14px;max-width:250px;
  box-shadow:0 0 20px rgba(255,188,75,.12),0 8px 32px rgba(0,0,0,.4);
  opacity:0;transform:translateY(20px);pointer-events:none}
.testimonial-popup.show{animation:popup-up .5s cubic-bezier(.16,1,.3,1) forwards;pointer-events:auto}
.testimonial-popup.hide{animation:popup-down .4s cubic-bezier(.55,0,1,.45) forwards;pointer-events:none}
@keyframes popup-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes popup-down{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}
.popup-name{font-size:13px;font-weight:700;color:#fff;margin-bottom:3px}
.popup-message{font-size:12px;color:#ccc;line-height:1.4;margin-bottom:4px}
.popup-time{font-size:11px;color:#888}
.popup-close{position:absolute;top:10px;right:12px;background:none;border:none;color:#888;font-size:18px;
  cursor:pointer;padding:0;line-height:1;transition:color .2s}
.popup-close:hover{color:#fff}
@media (max-width:480px){
  .testimonial-popup{left:12px;bottom:16px;max-width:250px;padding:10px 32px 10px 12px;border-radius:10px}
  .popup-name{font-size:12px}.popup-message{font-size:11px}.popup-time{font-size:10px}
  .popup-close{font-size:16px;top:6px;right:8px}
}

/* hero video: autoplay muted with a mute toggle, matching home-3 */
.hero-video{position:relative}
.mute-toggle{position:absolute;top:22px;right:22px;z-index:2;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(18,18,18,.78);border:0;color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s ease,transform .15s ease}
.mute-toggle:hover{background:rgba(20,20,20,.9);transform:scale(1.05)}
.mute-toggle svg{width:22px;height:22px;display:block}
.mute-toggle .icon-unmuted{display:none}
.mute-toggle[aria-pressed="false"] .icon-muted{display:none}
.mute-toggle[aria-pressed="false"] .icon-unmuted{display:block}

/* typography parity with home-3 */
.inc h3{font-size:28px}
.solution h2.left{font-size:clamp(30px,3.3vw,46px)}
.text-testimonial .person span,.tcard .person span{font-weight:600}
.person b,.person strong{font-weight:600}

/* body-copy sizes measured off home-3 */
.problem p{font-size:16px;line-height:1.45}
.solution .check-list li{font-size:16px;font-weight:500;line-height:1.45}
.fit-card li{font-size:16px;font-weight:500;line-height:1.45}

/* line-height + tracking measured off home-3 */
.problem p{line-height:1.2;letter-spacing:-.01em}
.solution .check-list li,.fit-card li{line-height:1.1;letter-spacing:-.01em}
.person{line-height:1.4}
.person small{line-height:1.6}
.fit-card h3{line-height:1.3;letter-spacing:normal}
.inc .pill{line-height:1.1;letter-spacing:-.01em}
.inc h3{letter-spacing:-.03em}
.stat-label{letter-spacing:-.01em}
.faq summary{line-height:1.1}
.compare .row span,.compare .pill{line-height:1.1;letter-spacing:-.01em}
.person span{line-height:1.4}
.fit-card li{color:var(--text)}
.final .check-list{color:var(--muted)}
#book-call{padding-bottom:20px}


/* ============================================================
   Glow system — values lifted from home-3
   (gold border + "0 0 75px rgba(255,189,74,.5)" appears 17x there)
   ============================================================ */

/* gold glowing frame — the treatment on screenshots and video cards */
.glow-frame{border:1px solid rgb(255,189,74) !important;border-radius:8px;
  box-shadow:0 0 75px 0 rgba(255,189,74,.5)}

/* video testimonial cards: warm bloom rising from the bottom of the card */
/* Card glow — Framer's actual technique: a solid rgb(255,189,74) block with
   blur(50px), tucked above the card's top-left corner and clipped by overflow.
   Sizes and offsets read straight off the live page's 31 glow blocks. */
.vcard,.tcard,.problem,.inc,.fit-card{position:relative;overflow:hidden}
.vcard::after,.tcard::after,.problem::after,.inc::after,.fit-card::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  background:rgb(255,189,74);filter:blur(var(--gb,50px));
  top:var(--gy,-50px);left:var(--gx,0px);
  width:var(--gw,100px);height:var(--gh,100px);
  opacity:var(--ga,.8)}
.vcard > *,.tcard > *,.problem > *,.inc > *,.fit-card > *{position:relative;z-index:1}

/* per-card-type sizing, matching the measured blocks */
.tcard{--gw:100px;--gh:100px;--gy:-50px;--gx:0px;--ga:.8}
.problem{--gw:100px;--gh:100px;--gy:-50px;--gx:0px;--ga:.8}
/* Tuned against the live page: corner patch 43.1, bottom band 17.6.
   Smaller and softer than the 177px block, which read 54.9 at the corner. */
.vcard{--gw:135px;--gh:135px;--ga:.41;--gb:42px}
/* Framer stacks these two behind an opaque panel, so only a whisper reads
   inside the card. Measured: included 1.73 vs our 6.64, fit 0.09 vs 1.98. */
.inc{--gw:177px;--gh:177px;--gy:-88px;--gx:-20px;--ga:.21}
/* Framer puts a 300x60 bar 30px below the card top, inset ~110px from the left.
   My earlier reading missed it: the bar sits 150px ABOVE the heading I cropped from. */
/* Only the positive card carries a glow: centred on its top edge,
   spilling just over it, and tighter than the default 50px blur. */
.fit-card{--ga:0}
.fit-grid .fit-card:first-child{--gw:260px;--gh:46px;--gy:-22px;--ga:.5;--gb:34px;
  --gx:calc(50% - 130px)}

/* the stat band and the results band pick up a faint wash too */
.stats,.aaa-proof-stat-row{position:relative}
.stats::before,.aaa-proof-stat-row::before{content:"";position:absolute;left:50%;top:50%;
  width:70%;height:190%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,189,74,.11) 0%,rgba(255,189,74,0) 70%);
  filter:blur(50px)}
.stats > *,.aaa-proof-stat-row > *{position:relative;z-index:1}


/* CTA buttons: Framer pairs the 8px/32px lift with a wide 75px bloom */
/* live measures exactly this, on both /home-3 and /confirmation */
.btn-primary{box-shadow:0 8px 32px 0 rgba(255,189,74,.25)}
.btn-primary:hover{box-shadow:0 10px 36px 0 rgba(255,189,74,.4)}

@media (prefers-reduced-motion:no-preference){
  .glow-section::before,.vcard::after,.tcard::after{will-change:opacity}
}

/* FAQ accordion: the body is wrapped by JS so its height can transition */
.faq-body{overflow:hidden;height:0;transition:height .38s cubic-bezier(.16,1,.3,1)}
.faq details:not([open]) .faq-body{height:0}
.faq summary::after{transition:transform .3s cubic-bezier(.16,1,.3,1),color .2s ease}
.faq details.open summary::after{transform:rotate(45deg)}
.faq details summary{transition:color .25s ease}
.faq details{transition:border-color .25s ease,box-shadow .25s ease}
.faq details.open{border-color:rgba(255,189,74,.4);box-shadow:0 0 45px 0 rgba(255,189,74,.10)}
@media (prefers-reduced-motion:reduce){.faq-body{transition:none}}

/* Hero entrance: plays once on load, staggered like Framer's */
.hero-in{opacity:0;transform:translateY(26px);
  animation:hero-rise .85s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--hero-delay,0ms)}
@keyframes hero-rise{to{opacity:1;transform:none}}
.site-header .wordmark{opacity:0;transform:translateY(-10px);
  animation:hero-rise .7s cubic-bezier(.16,1,.3,1) .05s forwards}
@media (prefers-reduced-motion:reduce){
  .hero-in,.site-header .wordmark{opacity:1;transform:none;animation:none}
}

/* Final CTA: the one true ambient glow on the page (800x800, blur 100px) */
#final{position:relative;overflow:hidden}
#final::before{content:"";position:absolute;left:50%;top:38%;width:800px;height:800px;
  transform:translate(-50%,-50%);pointer-events:none;z-index:0;border-radius:50%;
  background:rgb(255,189,74);filter:blur(100px);opacity:.16}
#final > *{position:relative;z-index:1}

/* Every video testimonial card glows at the BOTTOM-RIGHT in home-3, both the
   featured one (block x987,y2851 vs card x320,y2292 800x688) and the grid
   cards (block x393,y3327 vs card x180,y3019 346x435). Both spill ~44px past
   the right edge and ~50px past the bottom. */
.vcard::after{top:auto;left:auto;right:-44px;bottom:-50px}
.vcard-featured::after{bottom:-48px;opacity:.42}

/* "They Joined" cards: no glow at all, and the name/stars overlay the video */
.vcard-plain{padding:0;overflow:hidden;border-radius:10px}
.vcard-plain::after{content:none}
.vcard-plain .ratio-16x9{border-radius:0}
.vcard-plain .vfoot{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:14px 16px;margin:0;
  background:linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,.72) 55%,rgba(10,10,10,.92) 100%)}

/* "They Joined" videos: no control bar, the frame itself is play/pause */
.tap-video{cursor:pointer}
.tap-video iframe{pointer-events:none}
.tap-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:50%;background:rgba(18,18,18,.62);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);pointer-events:none;z-index:2;
  transition:opacity .25s ease,transform .25s ease}
.tap-play::before{content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.tap-video:hover .tap-play{transform:scale(1.06)}
.tap-video.is-playing .tap-play{opacity:0;transform:scale(.9)}
.tap-video:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.tap-play{transition:none}}

/* hero video element fills its frame like the iframe did */
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}

/* the hero video reads as clickable until sound is on */
.hero-video{cursor:pointer}
.hero-video.sound-on{cursor:default}

/* Hero "Click for sound" pill: sits over the video until sound is on,
   then disappears and the native control bar takes over. */
.sound-cta{position:absolute;top:22px;right:22px;z-index:3;
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:13px 20px;border:0;border-radius:999px;
  background:rgba(38,38,38,.92);color:#fff;
  font-family:inherit;font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 24px -6px rgba(0,0,0,.6);
  transition:opacity .3s ease,transform .3s ease,background .2s ease}
.sound-cta svg{width:20px;height:20px;display:block;flex:none}
.sound-cta:hover{background:rgba(52,52,52,.95);transform:scale(1.03)}
.sound-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* once sound is on the pill is gone for good */
.hero-video.sound-on .sound-cta{opacity:0;transform:scale(.94);pointer-events:none}

/* Hero VSL player, Wistia style: the control bar sits on the video. The
   timeline has its own full-width row so the chapter dots have room, with a
   dot at each chapter start, an always-visible playhead, and a one-line hover
   label naming the chapter. Buttons sit on the row below; the chapters panel
   opens over the right of the video. */
.vp-controls{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;
  padding:40px 12px 8px;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.4) 60%,transparent);
  opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .25s ease,transform .25s ease;cursor:default}
.hero-video.vp-active .vp-controls,.hero-video.vp-panel-open .vp-controls{opacity:1;transform:none;pointer-events:auto}
/* during the muted teaser the pill is the call to action, the bar waits */
.hero-video:not(.sound-on) .vp-controls{display:none}
.vp-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:34px;padding:0;border:0;
  border-radius:6px;background:transparent;color:#fff;cursor:pointer;transition:background .15s ease,color .15s ease}
.vp-btn:hover{background:rgba(255,255,255,.14)}
.vp-btn svg{width:20px;height:20px;display:block}
.vp-btn:focus-visible,.vp-scrub:focus-visible,.vp-panel button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vp-play{width:42px;background:var(--accent);color:#111}
.vp-play:hover{background:#ffcb70}
.vp-play .i-pause,.vp-controls.is-playing .vp-play .i-play{display:none}
.vp-controls.is-playing .vp-play .i-pause{display:block}
.vp-mute .i-muted,.vp-controls.is-muted .vp-mute .i-vol{display:none}
.vp-controls.is-muted .vp-mute .i-muted{display:block}
.vp-fs .i-fs-exit,.vp-controls.is-fullscreen .vp-fs .i-fs{display:none}
.vp-controls.is-fullscreen .vp-fs .i-fs-exit{display:block}
.vp-time{flex:none;margin:0 8px;color:#fff;font:500 13px/1 var(--font);font-variant-numeric:tabular-nums;white-space:nowrap}
.vp-chap-btn{margin-left:auto}

.vp-scrub{position:relative;order:-1;flex:1 0 100%;height:26px;cursor:pointer;touch-action:none}
.vp-rail{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;
  background:rgba(255,255,255,.3);overflow:hidden;transition:height .15s ease,margin .15s ease}
.vp-scrub:hover .vp-rail{height:6px;margin-top:-3px}
.vp-buf,.vp-prog{position:absolute;inset:0;transform:scaleX(0);transform-origin:left center}
.vp-buf{background:rgba(255,255,255,.22)}
.vp-prog{background:var(--accent)}
.vp-dots{position:absolute;inset:0;pointer-events:none}
.vp-dot{position:absolute;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.35);transition:transform .15s ease}
.vp-dot.is-past{background:#fff;box-shadow:0 0 0 1.5px rgba(120,80,0,.45)}
.vp-dot.is-hover{transform:scale(1.7)}
.vp-knob{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px var(--accent),0 1px 5px rgba(0,0,0,.5);pointer-events:none;transition:transform .15s ease}
.vp-scrub:hover .vp-knob{transform:scale(1.15)}
.vp-tip{position:absolute;bottom:30px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;
  width:max-content;max-width:calc(100% - 8px);padding:8px 14px;border-radius:8px;background:rgba(16,16,16,.95);color:#fff;
  pointer-events:none;box-shadow:0 10px 26px -10px rgba(0,0,0,.85);text-align:center}
.vp-tip[hidden]{display:none}
.vp-tip-title{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px/1.3 var(--font)}
.vp-tip-time{font:500 12px/1 var(--font);color:var(--accent);font-variant-numeric:tabular-nums}

.vp-panel{position:absolute;top:0;right:0;bottom:84px;z-index:4;width:min(320px,62%);display:flex;flex-direction:column;
  border-bottom-left-radius:8px;background:rgba(12,12,12,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  cursor:default;text-align:left}
.vp-panel[hidden]{display:none}
.vp-panel-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:10px 8px 8px 16px;
  border-bottom:1px solid rgba(255,255,255,.1);color:#fff;font:600 14px/1 var(--font)}
.vp-panel-close{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;
  border-radius:6px;background:transparent;color:#fff;cursor:pointer}
.vp-panel-close:hover{background:rgba(255,255,255,.12)}
.vp-panel-close svg{width:16px;height:16px}
.vp-chap-list{flex:1;overflow-y:auto;list-style:none;margin:0;padding:6px;overscroll-behavior:contain}
.vp-chap-list button{display:flex;gap:10px;align-items:baseline;width:100%;padding:8px 10px;border:0;border-radius:6px;
  background:transparent;color:rgba(255,255,255,.78);font:400 13px/1.35 var(--font);text-align:left;cursor:pointer}
.vp-chap-list button:hover{background:rgba(255,255,255,.08);color:#fff}
.vp-chap-list button.is-current{background:rgba(255,189,74,.14);color:#fff}
.vp-chap-time{flex:none;min-width:40px;color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums}

/* full screen, real (:fullscreen) or filled-window fallback (.vp-pseudo-fs) */
/* !important because the hero's own width caps (.hero .video-frame and its
   breakpoints) are more specific and would keep the frame at ~560px */
.hero-video:fullscreen{max-width:none!important;margin:0!important;padding:0;border-radius:0;display:flex;align-items:center;background:#000}
.hero-video.vp-pseudo-fs{position:fixed;inset:0;z-index:10000;max-width:none!important;width:auto;height:auto;margin:0!important;
  padding:0;border-radius:0;display:flex;align-items:center;background:#000;opacity:1;transform:none;animation:none}
.hero-video:fullscreen .ratio-16x9,.hero-video.vp-pseudo-fs .ratio-16x9{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.hero-video:fullscreen video,.hero-video.vp-pseudo-fs video{object-fit:contain}
.hero-video:fullscreen .sound-cta,.hero-video.vp-pseudo-fs .sound-cta{display:none}
html.vp-lock,html.vp-lock body{overflow:hidden}

@media (max-width:600px){
  .vp-controls{gap:0 2px;padding:30px 6px 4px}
  .vp-scrub{height:24px;margin:0 4px}
  .vp-btn{width:32px;height:30px}
  .vp-btn svg{width:18px;height:18px}
  .vp-play{width:36px;height:28px}
  .vp-time{font-size:12px;margin:0 6px}
  .vp-tip{bottom:26px;padding:6px 10px}
  .vp-tip-title{font-size:12px}
  .vp-panel{width:72%;bottom:62px}
  .vp-panel-head{padding:6px 4px 6px 12px;font-size:13px}
  .vp-chap-list button{padding:7px 8px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.vp-controls,.vp-rail,.vp-knob,.vp-dot{transition:none}}
@media (max-width:640px){
  .sound-cta{top:14px;right:14px;padding:10px 15px;font-size:13px;gap:8px}
  .sound-cta svg{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){.sound-cta{transition:none}}

/* ---------- responsive fixes ---------- */

/* The social-proof popup and the sticky CTA are both fixed to the bottom and
   collided on phones (measured 246x77px of overlap at 390px). Lift the popup
   clear of the bar whenever the bar is up. */
@media (max-width:820px){
  body.sticky-on .testimonial-popup{bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:480px){
  body.sticky-on .testimonial-popup{bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}

/* Tap targets: the popup close was a 9x16 hit area, footer links only 22px tall */
.popup-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  top:4px;right:4px;border-radius:50%}
@media (max-width:480px){.popup-close{top:2px;right:2px}}
@media (max-width:820px){
  .footer-links a,.site-footer a{display:inline-block;padding-block:9px}
}

/* Safety net: at 360px the document reported 10px of horizontal scroll that no
   visible element accounted for. overflow-x:clip stops the page sliding
   sideways without breaking position:sticky (as overflow:hidden would). */
html,body{overflow-x:clip;max-width:100%}

/* Cards stayed one column all the way up to 680px, so a 640px tablet rendered
   600px-wide cards and the page ran 30,011px tall against Framer's 25,538.
   Collapse to one column only below 600px. */
@media (max-width:600px){
  .grid-2,.grid-3,.bento{grid-template-columns:1fr}
}

/* ============================================================
   Standalone text pages: /privacy-policy /terms-of-service
   /thankyou /thankyou-2
   ============================================================ */
.doc-page{padding-bottom:0}
.doc{padding-block:56px 96px;max-width:820px}
.doc h1{font-size:clamp(34px,4vw,52px);line-height:1.1;letter-spacing:-.03em;text-align:left;
  max-width:none;margin:0 0 10px}
.doc .doc-meta{color:var(--muted-2);font-size:15px;margin:0 0 44px}
.doc .doc-lead{color:var(--muted);font-size:20px;line-height:1.5;margin:0 0 8px;max-width:640px}
.doc h2{font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.02em;text-align:left;
  max-width:none;margin:44px 0 14px;display:flex;gap:10px;align-items:baseline}
.doc .doc-num{color:var(--accent);font-variant-numeric:tabular-nums;flex:none}
.doc p{color:rgba(255,255,255,.72);font-size:16px;line-height:1.7;margin:0 0 15px;max-width:72ch}
.doc a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.doc .doc-links{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.doc .doc-links a{display:inline-flex;align-items:center;gap:10px;font-size:17px;text-decoration:none;
  border:1px solid var(--border);border-radius:10px;padding:14px 18px;color:#fff;
  transition:border-color .2s ease,color .2s ease}
.doc .doc-links a:hover{border-color:var(--accent);color:var(--accent)}
.doc .doc-links a::before{content:"\2192";color:var(--accent)}
.doc-page .site-footer{border-top:1px solid var(--border);padding-top:48px}
@media (max-width:640px){
  .doc{padding-block:36px 64px}
  .doc h2{font-size:19px;margin-top:34px}
  .doc p{font-size:15px}
}

/* ============================================================
   Phone fixes: the stats band overflowed its own border and the
   sticky bar squeezed its tagline into four lines beside the button.
   ============================================================ */
@media (max-width:560px){
  /* 56px numbers and 20px labels do not fit two-up in 350px: the band measured
     364px of content in a 350px box, and "WEEKS TO CAREER TRANSFORMATION"
     needed 180px in a 148px column. */
  .stats{gap:10px 12px;padding:20px 12px 24px}
  .stat-num{font-size:clamp(30px,10vw,40px);line-height:1.15}
  .stat-label{font-size:13px;line-height:1.25;margin-top:6px;
    overflow-wrap:break-word;hyphens:auto}
  .stat{min-width:0}

  /* Framer shows no tagline down here; side by side it wrapped to four lines.
     The bar becomes the button. */
  .sticky-cta{left:12px;right:12px;padding:8px;gap:0;justify-content:center}
  .sticky-cta > span:not(.arrow){display:none}
  .sticky-cta .btn{width:100%;justify-content:center}

  /* keep the social-proof popup clear of the sticky bar */
  /* sticky bar sits 18px up and is 67px tall, so clear 85px plus a margin */
  .testimonial-popup{bottom:calc(99px + env(safe-area-inset-bottom,0px))}
}

/* Headlines never mix white and accent on the same line. The accent becomes its
   own block so the colour split always falls on a line break, at every width,
   instead of wrapping wherever the text happens to run out. */
/* Only headings that actually WRAP get their accent on its own line. A heading
   that fits on one line keeps white and accent together, which is how the
   original reads ("A Few Common Questions Answered"). main.js adds the class. */
h1.accent-own-line .accent,
h2.accent-own-line .accent{display:block}

/* Balance the lines too, otherwise the white half strands a word on its own
   ("Your meeting is booked, / but"). balance evens the line lengths; each
   coloured block is balanced independently since they are separate blocks. */
h1,h2,h1 .accent,h2 .accent{text-wrap:balance}
@supports not (text-wrap:balance){h1,h2{text-wrap:pretty}}

/* The original wraps this headline naturally and breaks after "to", filling
   line 1 rather than evening the two lines, so balance is off here. The wrap
   point comes from the original's 690px box at 40px type; expressing it in em
   (690/40) keeps the break in the same place at every short-viewport tier
   instead of re-wrapping each time the font size steps down. */
h1[data-accent-inline]{text-wrap:wrap;max-width:17.25em}
h1[data-accent-inline] .accent{text-wrap:wrap}

/* Phone hero: match the original's proportions so the video and CTA stay in
   frame. Measured on the live page at 390px: h1 40px/44, lead 15px/18. Ours had
   a smaller headline but a much larger lead (18px/21.6), and the lead is the
   long one on this page, so it pushed the video and button down the screen. */
@media (max-width:560px){
  /* 40px would match the original's type size, but the colour split costs an
     extra break: 5 lines / 220px against the original's 4 / 176px. 32px keeps
     it to 3 lines and lands the CTA higher than the original does. */
  .hero:not(.fto-hero) h1{font-size:32px;line-height:1.1}
  .hero:not(.fto-hero) .lead{font-size:15px;line-height:1.2;margin:16px auto 24px}
  .hero:not(.fto-hero){padding-top:36px}
  .video-frame{margin-bottom:24px}
  .limited-spots{margin-top:14px}
}

/* joined cards now use a native <video> rather than a Stream iframe */
/* No native controls: play and pause is the whole interaction. pointer-events
   are off so every click lands on the wrapper and toggles exactly once —
   with controls on, the bar handled the click AND it bubbled, so it toggled
   twice and looked like it paused and restarted itself. */
.tap-video .vplay-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  border-radius:inherit;background:#000;border:0;display:block;pointer-events:none}
.tap-video .vplay-media::-webkit-media-controls{display:none !important}
.tap-video{cursor:pointer}

/* iClosed Lift widget.
   The hide-until-scroll gate is removed: it keyed on #iclosed-cta-container,
   which was a guess at the widget's markup, and it hid the widget outright.
   Re-gate only once the real element is known from a browser that renders it. */

/* success stories: before -> after strip on every video card */
.ba{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:8px}
.ba-col{border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.ba-after{border-color:rgba(255,189,74,.55);background:rgba(255,189,74,.08)}
.ba-k{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.ba-after .ba-k{color:var(--accent)}
.ba p{margin:0;font-size:15px;line-height:1.35;color:var(--muted);letter-spacing:-.005em}
.ba-after p{color:var(--text)}
.ba-arrow{align-self:center;color:var(--accent);font-size:18px}
.ba-quote{grid-template-columns:1fr}
.ba-quote p{font-style:italic}
.vcard-featured .ba p{font-size:17px}
.av-init{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(255,189,74,.14);border:1px solid rgba(255,189,74,.45);color:var(--accent);font-size:17px;font-weight:600}
.stories{margin-top:20px}
#joined .proof-grid{margin-top:0}
/* grid cards are narrow: stack before over after; the featured card keeps them side by side */
.stories .ba{grid-template-columns:1fr;gap:4px}
.stories .ba-arrow{justify-self:center;transform:rotate(90deg);line-height:1;font-size:16px}
.stories .ba-col{flex-direction:row;align-items:baseline;gap:10px}
.stories .ba-k{flex:none;width:52px}
@media (max-width:640px){
  .ba{grid-template-columns:1fr;gap:4px}
  .ba-arrow{justify-self:center;transform:rotate(90deg);line-height:1}
}
.stories .ba-quote .ba-col{flex-direction:column;gap:6px}
.stories .ba-quote .ba-k{width:auto}
@media (min-width:1001px){#joined .proof-grid{columns:3}}

/* person sits at the top of each story card */
.stories .vcard .person,.vcard-featured .person{margin-top:0}

/* final CTA: stacked images at native resolution */
.final-stack{display:flex;flex-direction:column;align-items:center;gap:18px;width:min(100%,480px)}
.final-stack img{display:block;height:auto;width:100%}
.final-stack img + img{width:86%;border-radius:10px;border:1px solid var(--panel-border)}
.final-stack img:last-child{width:76%}
@media (max-width:1000px){.final-stack{margin:0 auto}}

/* subtitles: one sentence per line where there are two, and balanced wrapping so no line is left with a single word */
.sub,.lead,.logo-kicker{text-wrap:balance}

/* fit cards: same type treatment as the problem and included cards */
.fit-card h3{font-size:28px;font-weight:500;letter-spacing:-.03em;line-height:1.1;margin-bottom:24px}
.fit-card li{font-size:18px;font-weight:400;line-height:1.35;letter-spacing:-.01em;color:var(--muted)}
.fit-card .check-list,.fit-card .cross-list{gap:16px}
@media (max-width:680px){.fit-card h3{font-size:24px}.fit-card li{font-size:17px}}

/* about: portrait with LinkedIn-style experience cards beside it */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;max-width:1040px;margin:0 auto}
.about-grid .portrait{max-width:none;margin:0;height:100%;max-height:560px}
.xp-list{display:flex;flex-direction:column;gap:12px}
.xp-card{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:14px 18px}
.xp-card img{width:48px;height:48px;border-radius:8px;flex:none;object-fit:cover}
.xp-title{font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.xp-org{font-size:15px;color:var(--muted);line-height:1.35;margin-top:2px}
@media (max-width:1000px){.about-grid{grid-template-columns:1fr;max-width:560px}.about-grid .portrait{height:auto;aspect-ratio:506/515}}

/* story cards: every row (person, title, before, arrow, after, video) lines up across the cards beside it */
.stories > .vcard{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:14px;align-content:start}
.stories .ba{display:contents}
.stories .ba-arrow{margin:-6px 0}
.stories .ba-quote .ba-col{grid-row:span 3}
.stories .vcard .ratio-16x9{margin-top:0;align-self:end}

/* proof wall zoom */
#joined .proof-grid img{cursor:zoom-in;transition:transform .2s ease}
#joined .proof-grid img:hover{transform:scale(1.015)}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.88);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:56px 72px}
.lightbox[hidden]{display:none}
.lb-img{max-width:min(100%,1100px);max-height:100%;width:auto;height:auto;border-radius:10px;
  border:1px solid rgb(255,189,74);box-shadow:0 0 80px rgba(255,189,74,.25)}
.lb-btn{position:absolute;background:rgba(15,15,15,.9);border:1px solid var(--border);color:#fff;
  width:48px;height:48px;border-radius:50%;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-btn:hover{border-color:var(--accent);color:var(--accent)}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
html.lb-open,html.lb-open body{overflow:hidden}
html.lb-open .sticky-cta{display:none}
@media (max-width:680px){
  .lightbox{padding:64px 12px 84px}
  .lb-prev,.lb-next{top:auto;bottom:16px;transform:none}
  .lb-prev{left:calc(50% - 60px)}.lb-next{right:calc(50% - 60px)}
}

/* hero spots line with a live green dot */
.limited-spots{display:flex;align-items:center;justify-content:center;gap:10px;text-transform:none;letter-spacing:-.005em;font-size:16px;color:var(--text)}
.live-dot{position:relative;width:9px;height:9px;border-radius:50%;background:#22c55e;flex:none}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#22c55e;animation:live-pulse 1.8s ease-out infinite}
@keyframes live-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
.limited-spots.is-full .live-dot,.limited-spots.is-full .live-dot::after{background:var(--accent)}
@media (prefers-reduced-motion:reduce){.live-dot::after{animation:none}}
@media (max-width:680px){.limited-spots{font-size:15px}}


@media (min-width:1001px){.problem h3{min-height:2.2em}}
#about .about-sub{max-width:820px}
#joined .proof-grid img{height:auto}

/* ===== premium layer (js/fx.js adds html.fx) ===== */
/* scroll progress */
.fx-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,rgba(255,189,74,.2),var(--accent));box-shadow:0 0 12px rgba(255,189,74,.6)}
/* headings fill as they scroll in */
html.fx h2.fx-scrub .fx-w{opacity:.16;transition:opacity .25s linear}
/* hero: dot grid and a slow gold glow */
html.fx .hero{position:relative;isolation:isolate}
html.fx .hero::before{content:"";position:absolute;inset:-40px -20vw;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.085) 1px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000,transparent 75%)}
html.fx .hero::after{content:"";position:absolute;z-index:-1;left:50%;top:-60px;width:min(900px,90vw);height:420px;pointer-events:none;opacity:.35;
  filter:blur(70px);background:radial-gradient(closest-side,rgba(255,189,74,.55),transparent),radial-gradient(closest-side at 70% 60%,rgba(255,140,40,.35),transparent);
  transform:translateX(-50%);animation:fx-drift 14s ease-in-out infinite alternate;will-change:transform}
@keyframes fx-drift{from{transform:translateX(-56%) scale(1)}to{transform:translateX(-44%) scale(1.12)}}
/* hero headline: gold words on their own line, soft shine */
.hero h1 .accent{background:linear-gradient(100deg,var(--accent) 0%,var(--accent) 42%,#fff3d9 50%,var(--accent) 58%,var(--accent) 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shine 6s ease-in-out infinite}
@keyframes fx-shine{0%,20%{background-position:100% 0}70%,100%{background-position:0% 0}}
/* hero button: breathing glow + light sweep on their own layers (the button's own entrance animation is never touched) */
.btn-hero{position:relative;isolation:isolate}
.btn-hero::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;animation:fx-breathe 2.8s ease-in-out 1.2s infinite}
.btn-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;
  animation:fx-sweep 4.5s ease-in-out 1.2s infinite}
@keyframes fx-breathe{0%,100%{box-shadow:0 10px 40px -10px rgba(255,189,74,.5)}50%{box-shadow:0 0 0 6px rgba(255,189,74,.12),0 10px 60px -6px rgba(255,189,74,.9)}}
@keyframes fx-sweep{0%,55%{background-position:150% 0}85%,100%{background-position:-50% 0}}
/* gold ring (VSL, featured story, final card) */
@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.fx-ringed{position:relative}
.fx-ring{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:4;
  background:conic-gradient(from var(--fx-a),transparent 0deg,transparent 200deg,rgba(255,189,74,.25) 250deg,var(--accent) 300deg,#fff2d4 320deg,var(--accent) 340deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fx-spin 6s linear infinite}
@keyframes fx-spin{to{--fx-a:360deg}}
/* pause every loop while it is off screen */
.fx-off .fx-ring,.fx-off.hero::after,.fx-off .ob3-row,.hero.fx-off h1 .accent,.hero.fx-off .btn-hero::before,.hero.fx-off .btn-hero::after{animation-play-state:paused}
/* proof badge: student photos + stars wherever "50+ Proven Wins" appears */
.proof-badge{flex-wrap:wrap;gap:12px;font-size:16px}
.hp-avatars{display:flex}
.hp-avatars img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid var(--bg);margin-left:-9px;background:#222}
.hp-avatars img:first-child{margin-left:0}
@media (max-width:680px){.proof-badge{gap:8px 10px;font-size:15px}.proof-badge>span:last-child{flex-basis:100%;text-align:center}}
/* results: bold gold numbers, equal space at both ends, dividers centred */
#results-stats .aaa-proof-stat-row{padding:44px 24px;border-radius:16px;border:1px solid rgba(255,189,74,.18);
  background:radial-gradient(80% 140% at 50% 0%,rgba(255,189,74,.08),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0))}
#results-stats .sr-val{font-size:clamp(34px,3.5vw,52px);font-weight:600;letter-spacing:-.045em;
  background:linear-gradient(180deg,#ffe1a6 0%,var(--accent) 55%,#d98c1f 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#results-stats .sr-lab{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fx-count{font-variant-numeric:tabular-nums}
@media (min-width:900px){
  #results-stats .aaa-proof-stat-row{justify-content:space-evenly;padding-inline:0}
  #results-stats .aaa-proof-stat-row .sr-item{flex:0 0 auto}
  #results-stats .aaa-proof-stat-row .sr-item + .sr-item::before{left:var(--dl,0)}}
/* problems: outlined numbers, gold top edge */
.problem .pnum{font-size:64px;font-weight:600;line-height:.9;letter-spacing:-.05em;margin-bottom:22px;color:transparent;-webkit-text-stroke:1px rgba(255,189,74,.75)}
.problem::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
@media (max-width:680px){.problem .pnum{font-size:52px;margin-bottom:16px}}
@media (min-width:681px) and (max-width:1000px){#problems .grid-3>:last-child{grid-column:1/-1}}
@media (min-width:1001px){.problem h3{min-height:2.2em}}
/* role cards: outlined index, lift on hover */
.roles .role{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s ease}
.roles .role:hover{transform:translateY(-4px);border-color:rgba(255,189,74,.45)}
.fx-idx{position:absolute;top:14px;right:18px;font-size:46px;font-weight:600;line-height:1;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.14);pointer-events:none;transition:-webkit-text-stroke-color .3s ease}
.roles .role:hover .fx-idx{-webkit-text-stroke-color:rgba(255,189,74,.6)}
/* wins pill */
.fx-wins{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:100%;margin:-24px auto 40px;
  padding:9px 16px;border-radius:999px;border:1px solid rgba(255,189,74,.35);background:rgba(255,189,74,.08);font-size:14px;color:var(--text)}
@media (max-width:680px){.fx-wins-hint{display:none}}
/* sticky bar spots line */
.fx-sticky-spots{display:inline-flex;align-items:center;gap:9px;color:var(--text)}
/* ticks pop in */
.fx-ticks li::before{transform:scale(0);opacity:0;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .2s ease;transition-delay:calc(var(--i) * 90ms)}
.fx-ticks.fx-ticked li::before{transform:scale(1);opacity:1}
/* card spotlight */
.fx-spot{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,189,74,.10),transparent 45%)}
.vcard:hover>.fx-spot,.card:hover>.fx-spot,.xp-card:hover>.fx-spot,.ob3-tile:hover>.fx-spot{opacity:1}
.xp-card{position:relative;overflow:hidden}
.xp-card>*:not(.fx-spot),.ob3-tile>*:not(.fx-spot){position:relative;z-index:1}
/* magnetic buttons + arrow nudge */
html.fx .btn-primary{transition:translate .35s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,background .3s ease}
.btn .arrow{display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.btn:hover .arrow{transform:translate(3px,-3px)}
/* cursor light (no blend mode: cheaper to paint) */
.fx-cursor{position:fixed;left:0;top:0;width:500px;height:500px;border-radius:50%;pointer-events:none;z-index:1;will-change:transform;
  background:radial-gradient(closest-side,rgba(255,189,74,.06),transparent);transform:translate3d(-999px,-999px,0)}
/* what's included: bento with moving tool logos */
.ob3{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ob3-tile{position:relative;border-radius:18px;padding:28px;border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:12px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));transition:border-color .3s ease}
.ob3-tile:hover{border-color:rgba(255,189,74,.45)}
.ob3-tile .pill{margin:0;width:max-content;color:var(--accent);font-size:16px;letter-spacing:.02em;border-color:rgba(255,189,74,.45);background:rgba(255,189,74,.12)}
.ob3-tile h3{margin:0;font-size:24px}
.ob3-tile p{margin:0;color:var(--muted);font-size:16px;line-height:1.4}
.ob3-tile img{width:100%;height:auto;border-radius:12px;margin-top:auto;border:1px solid rgba(255,255,255,.08)}
.ob3-learn{grid-column:1/-1}
.ob3-mq{display:grid;gap:12px;margin:14px -28px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ob3-row,.ob3-dup{display:flex;gap:12px;width:max-content}
.ob3-row{animation:fx-mq 40s linear infinite;will-change:transform}
.ob3-row.rev{animation-direction:reverse}
.ob3-mq:hover .ob3-row{animation-play-state:paused}
@keyframes fx-mq{to{transform:translateX(calc(-50% - 6px))}}
.tl{display:inline-block;width:22px;height:22px;flex:none;background:var(--accent);
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;transition:background .3s ease}
.tchip{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);font-size:15px;color:var(--text)}
.tchip:hover .tl{background:var(--c)}
@media (max-width:900px){.ob3{grid-template-columns:1fr}.ob3-tile{padding:22px}.ob3-mq{margin-inline:-22px}}
@media (prefers-reduced-motion:reduce){html.fx .hero::after,.hero h1 .accent,.btn-hero::before,.btn-hero::after,.fx-ring,.ob3-row{animation:none}}
/* hero: "Get You Hired in Analytics" always on its own line */
.hero h1 .accent{display:block}

/* wins pill: text and hint in one run, so the middle dot has equal space on both sides */
.fx-wins-text{white-space:nowrap}
/* final card: image stack matches the text height, so the whole card fits one desktop screen */
@media (min-width:1001px){.final{padding-block:44px}.final-stack{width:min(100%,340px);gap:14px}}
/* final: no blurred background glow (it was clipped into a visible band above the card) */
#final::before{display:none}
/* header wordmark: smaller, one line */
.site-header .wordmark{font-size:21px;white-space:nowrap}
@media (max-width:680px){.site-header{padding-top:28px}.site-header .wordmark{font-size:18px}}