: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} .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} .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{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:auto;width:auto;max-height:39px;max-width:205px;object-fit:contain;opacity:.78;filter:grayscale(1) brightness(1.9);flex:0 0 auto} .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} @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