/* sizing guard for the width/height attributes added in the production port */
img{height:auto}
/* the footer newsletter got a live status line; it must not take space while empty */
.foot-news .msg:empty{display:none}
/* contact form honeypot: out of sight, still in the DOM for bots to trip over */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* ============================================================
   Menno Henselmans homepage redesign (VOM)
   Full dark edition, blue accent. Minimum readable text: 16px.
   ============================================================ */
:root{
  --bg:#0a0a0c; --bg-alt:#0f0f13; --bg-soft:#101015;
  --surface:#141519; --surface-2:#1b1d23; --surface-hi:#202229;
  --ink:#f4f5f7; --ink-soft:#c8cdd6; --ink-mute:#a8adb5;
  --accent:#2f86f0; --accent-2:#6aa3ee; --accent-deep:#1f5fc0;
  --accent-btn:#2674d2; --accent-btn-hi:#3a8bef;
  --link:#9cc4f7;
  --warm:#f5b929; --success:#34d27b; --tp:#00b67a;
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.17);
  --r-btn:9px; --r-card:14px; --r-lg:20px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --container:1180px;
  --shadow-card:0 1px 0 rgba(255,255,255,.03), 0 18px 44px rgba(0,0,0,.45);
  --shadow-hi:0 2px 0 rgba(255,255,255,.04), 0 30px 70px rgba(0,0,0,.6);
  --glow:0 0 0 1px rgba(47,134,240,.25), 0 18px 60px rgba(31,95,192,.35);
}
*{box-sizing:border-box}
html{overflow-x:clip; scroll-behavior:smooth; font-size:16px}
img,svg{max-width:100%; display:block}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:1.0625rem; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip}
h1,h2,h3,h4{font-family:'Hanken Grotesk',sans-serif; color:#fff; line-height:1.08; letter-spacing:-.02em; margin:0; text-wrap:balance}
h1{font-size:clamp(2.7rem, 1.9rem + 3.4vw, 4.4rem); font-weight:800; letter-spacing:-.025em}
h2{font-size:clamp(2rem, 1.4rem + 2.2vw, 2.9rem); font-weight:700}
h3{font-size:1.3rem; font-weight:700; letter-spacing:-.01em}
p{margin:0; text-wrap:pretty}
a{color:var(--link); text-decoration:none}
strong{font-weight:700}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}
.hero-in>*,.app-in>*,.course-in>*,.email-in>*,.router>*,.steps>*,.rev-grid>*,.feats>*,.lib-grid>*,.proof-strip>*{min-width:0}
.section{padding:88px 0}
.section--alt{background:var(--bg-alt)}
@media(max-width:760px){.section{padding:48px 0}}
.eyebrow{display:inline-flex; align-items:center; gap:11px; font-size:1rem; font-weight:600; color:var(--accent-2); margin-bottom:20px}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); border-radius:2px}
.hl{position:relative; color:#fff; white-space:nowrap; background:linear-gradient(100deg,var(--accent-2),#a9c9f5 55%,var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hl::after{content:""; position:absolute; left:0; right:0; bottom:-.06em; height:.1em; border-radius:99px; background:linear-gradient(90deg,var(--accent-deep),var(--accent),#7db0f4); opacity:.95}

/* Trustpilot mark */
.tp{display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--ink-soft); font-size:1rem; white-space:nowrap}
.tp-sq{display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; flex:none}
.tp-sq svg{width:18px; height:18px; fill:var(--tp)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:14px 26px; font-family:'Inter',sans-serif; font-weight:600; font-size:1.0625rem; border-radius:var(--r-btn); border:1.5px solid transparent; cursor:pointer; transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); text-decoration:none}
.btn .arw{transition:transform .18s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn-primary{background:var(--accent-btn); color:#fff; box-shadow:0 10px 30px rgba(38,116,210,.35)}
.btn-primary:hover{background:var(--accent-btn-hi); transform:translateY(-2px); box-shadow:0 16px 40px rgba(38,116,210,.5)}
.btn-primary:active{transform:translateY(0); box-shadow:none}
.btn-primary:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.btn-ghost{background:transparent; color:#fff; border-color:var(--border-2)}
.btn-ghost:hover{border-color:var(--accent-2); background:rgba(255,255,255,.04)}
.btn-ghost:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.textlink{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--accent-2); font-size:1rem}
.textlink:hover{color:#bcd6fb; text-decoration:underline; text-underline-offset:3px}
.textlink .arw{transition:transform .18s var(--ease)}
.textlink:hover .arw{transform:translateX(3px)}
.textlink:focus-visible,.brand:focus-visible,.hero-scroll:focus-visible,.lcard:focus-visible,.pcard:focus-visible{outline:3px solid var(--accent-2); outline-offset:3px; border-radius:5px}
.skip{position:absolute; left:-9999px; top:0; z-index:200}
.skip:focus{left:16px; top:16px; padding:12px 18px; background:#fff; color:#0a0a0c; border-radius:var(--r-btn); font-weight:700}

/* NAV */
.nav{position:sticky; top:0; z-index:80; background:rgba(10,10,12,.72); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid transparent; transition:border-color .2s, background .2s, box-shadow .2s}
.nav.scrolled{border-bottom-color:var(--border); background:rgba(10,10,12,.92); box-shadow:0 10px 30px rgba(0,0,0,.5)}
.nav-in{display:flex; align-items:center; gap:14px; height:72px; max-width:var(--container); margin:0 auto; padding:0 24px; transition:height .2s var(--ease)}
.nav.scrolled .nav-in{height:62px}
.brand{display:inline-flex; align-items:center; font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:1.28rem; color:#fff; letter-spacing:-.02em; white-space:nowrap}
.brand span{color:var(--accent-2)}
.brand-logo{height:40px; width:auto; display:block}
.nav.scrolled .brand-logo{height:34px; transition:height .2s var(--ease)}
.drawer .brand-logo{height:26px}
.footer .brand-logo{height:40px}
.nav-links{display:flex; align-items:center; flex:0 0 auto; gap:0; margin:0 auto 0 10px; padding:0; list-style:none}
.nav-links>li{position:relative}
.nav-links .has-menu{display:flex; align-items:stretch}
.nav-links a,.nav-links .menu-btn{display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); font-family:inherit; font-weight:500; font-size:1rem; padding:10px 11px; border-radius:9px; background:none; border:none; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s}
.nav-links a:hover,.nav-links .menu-btn:hover,.nav-links .menu-btn[aria-expanded="true"]{background:rgba(255,255,255,.06); color:#fff}
.nav-links a:focus-visible,.menu-btn:focus-visible{outline:2px solid var(--accent-2); outline-offset:1px}
.menu-btn .chev{transition:transform .2s var(--ease)}
.has-menu:hover .menu-btn .chev,.menu-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-links .menu-link{padding-right:5px; border-radius:9px 0 0 9px}
.nav-links .menu-toggle{padding-left:2px; padding-right:10px; margin-left:0; gap:0; border-radius:0 9px 9px 0}
.has-menu:hover .menu-link,.has-menu:hover .menu-toggle,.has-menu:focus-within .menu-link,.has-menu:focus-within .menu-toggle{background:rgba(255,255,255,.06); color:#fff}
.mega{position:absolute; top:calc(100% + 4px); left:0; transform:translateY(6px); min-width:240px; background:#101116; border:1px solid var(--border-2); border-radius:14px; padding:10px; box-shadow:var(--shadow-hi); opacity:0; visibility:hidden; transition:opacity .16s var(--ease), transform .16s var(--ease); z-index:90}
.mega::before{content:""; position:absolute; top:-12px; left:0; right:0; height:12px}
.mega.wide{min-width:320px}
.mega--right{left:auto; right:0}
.has-menu:hover .mega,.has-menu:focus-within .mega,.mega.open{opacity:1; visibility:visible; transform:translateY(0)}
.mega a{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:11px 13px; border-radius:9px; color:var(--ink-soft); font-size:1rem; font-weight:500; text-align:left}
.mega a:hover{background:rgba(255,255,255,.06); color:#fff}
.mega a small{color:var(--ink-mute); font-size:1rem; font-weight:400}
.mega .lang-row{display:grid; grid-template-columns:1fr 1fr; gap:2px}
.mega .mega-sep{height:1px; background:var(--border); margin:7px 6px}
.nav-cta{margin-left:6px; white-space:nowrap}
.nav-burger{display:none; align-items:center; justify-content:center; width:46px; height:46px; margin-left:auto; border:1px solid var(--border-2); border-radius:10px; background:rgba(255,255,255,.04); color:#fff; cursor:pointer}
.nav-burger:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
@media(max-width:1180px){.nav-links,.nav-cta,.nav-search-btn{display:none} .nav-burger{display:inline-flex}}

/* NAV SEARCH */
.nav-search-btn{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; border:1px solid var(--border-2); border-radius:10px; background:rgba(255,255,255,.04); color:var(--ink-soft); cursor:pointer; transition:color .15s, border-color .15s, background .15s}
.nav-search-btn:hover,.nav-search-btn[aria-expanded="true"]{color:#fff; border-color:var(--accent-2); background:rgba(255,255,255,.06)}
.nav-search-btn:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.nav-search{position:absolute; left:0; right:0; top:100%; z-index:85; background:rgba(10,10,12,.97); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--border-2); box-shadow:0 18px 44px rgba(0,0,0,.5); padding:18px 0}
.nav-search[hidden]{display:none}
.nav-search-form{display:flex; align-items:center; gap:12px; max-width:var(--container); margin:0 auto; padding:0 24px}
.nss-field{position:relative; flex:1; min-width:0; display:flex}
.nss-field .nss-ic{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-mute); display:flex; pointer-events:none}
.nss-field input{flex:1; min-width:0; font-family:inherit; font-size:1.0625rem; padding:15px 16px 15px 46px; border-radius:var(--r-btn); border:1.5px solid var(--border-2); background:rgba(255,255,255,.06); color:#fff}
.nss-field input::placeholder{color:var(--ink-mute)}
.nss-field input:focus-visible{outline:3px solid var(--accent-2); outline-offset:1px; border-color:var(--accent-2)}
.nav-search-form .btn{flex:none}
.nss-close{flex:none; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-2); border-radius:10px; background:rgba(255,255,255,.04); color:var(--ink-soft); cursor:pointer; transition:color .15s, border-color .15s}
.nss-close:hover{color:#fff; border-color:var(--accent-2)}
.nss-close:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.drawer-search{display:flex; margin:6px 0 4px}
.mcta-search{flex:none; width:52px; min-height:50px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-2); border-radius:var(--r-btn); background:rgba(255,255,255,.06); color:#fff; cursor:pointer}
.mcta-search:hover{border-color:var(--accent-2)}
.mcta-search:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
@media(max-width:600px){.nav-search{position:fixed; top:0; z-index:150; padding:14px 0 16px; box-shadow:0 18px 50px rgba(0,0,0,.7)} .nav-search-form .btn{display:none}}
.drawer{position:fixed; inset:0 0 0 auto; width:min(420px,92vw); background:#0c0d11; border-left:1px solid var(--border-2); transform:translateX(100%); transition:transform .26s var(--ease), visibility .26s; z-index:120; display:flex; flex-direction:column; padding:20px 20px 28px; overflow-y:auto; visibility:hidden}
.drawer.open{transform:none; visibility:visible}
.drawer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.drawer-close{width:44px; height:44px; border-radius:10px; border:1px solid var(--border-2); background:rgba(255,255,255,.04); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center}
.drawer-close:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.drawer .acc{border-top:1px solid var(--border); display:flex; flex-wrap:wrap; align-items:center}
.drawer .acc-link{flex:1 1 auto; min-width:0; color:#fff; font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:1.12rem; padding:16px 4px; text-decoration:none}
.drawer .acc-link:hover{color:var(--accent-2)}
.drawer .acc-q{flex:0 0 auto; width:auto; text-align:left; background:none; border:none; color:#fff; font-family:'Hanken Grotesk'; font-weight:700; font-size:1.12rem; padding:16px 8px; display:flex; justify-content:center; align-items:center; cursor:pointer}
.drawer .acc-q .pm{transition:transform .2s var(--ease); color:var(--accent-2)}
.drawer .acc-q[aria-expanded="true"] .pm{transform:rotate(45deg)}
.drawer .acc-p{flex-basis:100%; max-height:0; overflow:hidden; transition:max-height .26s var(--ease)}
.drawer .acc-p a{display:block; padding:10px 8px; color:var(--ink-soft); font-size:1rem; font-weight:500}
.drawer .acc-p a:hover{color:#fff}
.drawer .direct{display:block; color:#fff; font-family:'Hanken Grotesk'; font-weight:700; font-size:1.12rem; padding:16px 4px; border-top:1px solid var(--border)}
.drawer .btn{margin-top:18px; width:100%}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:opacity .26s; z-index:110}
.scrim.open{opacity:1; visibility:visible}

/* HERO */
.hero{position:relative; overflow:hidden; background:var(--bg)}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(ellipse 52% 48% at 82% 12%, rgba(47,134,240,.22), transparent 60%), radial-gradient(ellipse 46% 50% at 4% 96%, rgba(31,95,192,.16), transparent 62%)}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(ellipse 80% 75% at 55% 35%,#000 30%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 80% 75% at 55% 35%,#000 30%,transparent 78%)}
.hero-in{position:relative; z-index:1; display:grid; grid-template-columns:1.16fr .84fr; gap:56px; align-items:center; padding:78px 24px 70px}
.hero-eyebrow{margin-bottom:22px}
.hero h1{margin-bottom:22px}
.hero-sub{font-size:1.28rem; color:var(--ink-soft); max-width:40ch; margin-bottom:30px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:30px}
.hero-cred{display:flex; flex-wrap:wrap; gap:10px 20px; font-size:1rem; color:var(--ink-mute); border-top:1px solid var(--border); padding-top:20px; max-width:46ch}
.hero-cred span{display:inline-flex; align-items:center; gap:8px}
.hero-cred .dot{width:6px; height:6px; border-radius:50%; background:var(--accent-2); flex:none}
.hero-scroll{display:none; position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:2; align-items:center; gap:9px; font-weight:600; font-size:1rem; color:var(--ink-soft); text-decoration:none; white-space:nowrap}
.hero-scroll:hover{color:#fff}
.hero-scroll svg{animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.hero-media{position:relative}
.hero-frame{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-hi); background:#15161a}
.hero-frame::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(8,8,11,.78)); pointer-events:none}
.hero-photo{width:100%; height:610px; object-fit:cover; object-position:50% 14%; filter:contrast(1.04) saturate(1.02)}
.hero-glow{position:absolute; inset:-10% -8% -8% -10%; z-index:-1; background:radial-gradient(ellipse at 60% 40%, rgba(47,134,240,.5), transparent 62%); filter:blur(40px); opacity:.65; animation:pulse 6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:.8}}
.hero-chip{position:absolute; left:18px; bottom:18px; right:18px; z-index:2; background:rgba(16,17,22,.72); backdrop-filter:blur(10px); border:1px solid var(--border-2); border-radius:14px; padding:14px 16px; display:flex; align-items:center; gap:13px}
.hero-chip .ic{width:42px; height:42px; border-radius:11px; background:var(--accent-btn); color:#fff; display:flex; align-items:center; justify-content:center; flex:none}
.hero-chip b{display:block; font-size:1.02rem; color:#fff}
.hero-chip small{color:var(--ink-mute); font-size:1rem; line-height:1.35; display:block}
.hero-stat{position:absolute; top:auto; bottom:120px; right:-18px; z-index:2; background:rgba(16,17,22,.9); backdrop-filter:blur(10px); border:1px solid var(--border-2); border-radius:13px; padding:13px 18px; display:flex; flex-direction:column; align-items:center; gap:7px; box-shadow:var(--shadow-card)}
.hero-stat .stars svg{width:18px; height:18px}
.hero-stat .tp{font-size:1.02rem; justify-content:center; color:#fff}
.hero-stat .hs-count{font-size:1rem; color:var(--ink-mute)}
.hero-stat .hs-count b{color:var(--ink-soft); font-weight:700}
@media(max-width:920px){.hero-in{grid-template-columns:1fr; gap:38px; padding:52px 24px 44px} .hero-media{order:-1; max-width:460px} .hero-photo{height:440px} .hero-sub,.hero-cred{max-width:none} .hero-stat{right:8px}}

/* FEATURED IN */
.cred{background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:30px 0}
.cred-lbl{text-align:center; font-size:1rem; color:var(--ink-mute); font-weight:600; margin-bottom:20px}
.marquee{position:relative; overflow:hidden}
.marquee-track{display:flex; align-items:center; justify-content:space-evenly; gap:40px; width:100%; padding:0 24px}
.marquee-track img{width:auto; max-width:210px; object-fit:contain; filter:brightness(0) invert(1); opacity:.82; transition:opacity .2s}
.marquee-track img:hover{opacity:1}
.marquee-track .l-huff{height:25px}
.marquee-track .l-times{height:28px}
.marquee-track .l-rp{height:40px}
.marquee-track .l-jeff{height:31px}
.marquee-track .dup{display:none}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:900px){
  .marquee{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .marquee-track{justify-content:flex-start; width:max-content; gap:54px; animation:scrollx 20s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-track .dup{display:block}
  .marquee-track img{height:30px}
}

/* ROUTER */
.router-head{max-width:680px; margin-bottom:46px}
.router-head h2{margin-bottom:14px}
.router-head p{color:var(--ink-soft); font-size:1.2rem}
.router{display:grid; grid-template-columns:1.32fr 1fr 1fr; gap:20px; align-items:stretch}
.rcard{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-card); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease)}
.rcard:hover{transform:translateY(-5px); box-shadow:var(--shadow-hi); border-color:var(--border-2)}
.rcard--feature{border-color:rgba(47,134,240,.4); background:linear-gradient(180deg,#16191f,#121319)}
.rcard-thumb{position:relative; height:168px; overflow:hidden; background:#0e0f13}
.rcard-thumb img{width:100%; height:100%; object-fit:cover}
.rcard-thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(16,17,22,.5)); pointer-events:none}
.rcard-body{position:relative; display:flex; flex-direction:column; flex:1; padding:24px 26px 26px}
.rtag{display:inline-flex; align-items:center; align-self:flex-start; font-size:1rem; font-weight:700; color:#bcd6fb; background:rgba(47,134,240,.16); padding:6px 12px; border-radius:var(--r-pill); margin-bottom:15px}
.rcard--feature .rtag{color:#fff; background:var(--accent-btn)}
.rcard h3{color:#fff; margin-bottom:11px; font-size:1.4rem}
.rcard p{color:var(--ink-soft); font-size:1.06rem; margin-bottom:22px}
.rcard .rfoot{margin-top:auto}
.rcard .rmicro{display:block; margin-top:12px; font-size:1rem; color:var(--ink-mute)}
.rcard .rmicro b{color:var(--ink-soft)}
.rcard .btn,.rcard .textlink{width:100%}
.rcard .textlink{justify-content:flex-start}
/* book band (4th, prominent) */
.book-band{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px; margin-top:22px; background:linear-gradient(120deg,#15171d,#101218); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px 40px; box-shadow:var(--shadow-card); color:inherit; text-decoration:none; transition:border-color .2s var(--ease), transform .2s var(--ease)}
.book-band:hover{border-color:var(--border-2); transform:translateY(-2px)}
/* CSS 3D hardcover (cover stays pixel-perfect, no AI distortion) */
.book3d-stage{position:relative; flex:none; width:236px; height:360px; perspective:1600px; display:flex; align-items:center; justify-content:center}
.book3d-stage::after{content:""; position:absolute; left:50%; bottom:16px; transform:translateX(-50%); width:208px; height:30px; background:radial-gradient(ellipse, rgba(0,0,0,.62), transparent 72%); filter:blur(7px); z-index:0}
.book3d{position:relative; width:0; height:0; transform-style:preserve-3d; transform:rotateX(4deg) rotateY(-29deg); transition:transform .6s var(--ease); z-index:1}
.book-band:hover .book3d{transform:rotateX(3deg) rotateY(-20deg)}
.book3d .bf{position:absolute; left:0; top:0; backface-visibility:hidden}
.book3d .b-front{width:228px; height:332px; transform:translate(-50%,-50%) translateZ(17px); border-radius:2px 5px 5px 2px; overflow:hidden; box-shadow:inset -16px 0 30px -16px rgba(0,0,0,.55)}
.book3d .b-front img{width:100%; height:100%; object-fit:cover; display:block}
.book3d .b-back{width:228px; height:332px; transform:translate(-50%,-50%) rotateY(180deg) translateZ(17px); background:#141d28; border-radius:5px 2px 2px 5px}
.book3d .b-spine{width:34px; height:332px; transform:translate(-50%,-50%) rotateY(-90deg) translateZ(114px); background:linear-gradient(90deg,#0c141d,#1d2d40 58%,#0c141d)}
.book3d .b-edge{width:34px; height:332px; transform:translate(-50%,-50%) rotateY(90deg) translateZ(114px); background:repeating-linear-gradient(90deg,#efe9db,#efe9db 1px,#d8d1c0 2px,#efe9db 3px)}
.book3d .b-top{width:228px; height:34px; transform:translate(-50%,-50%) rotateX(90deg) translateZ(166px); background:repeating-linear-gradient(90deg,#efe9db,#efe9db 1px,#dcd5c5 2px,#efe9db 3px)}
.book3d .b-bottom{width:228px; height:34px; transform:translate(-50%,-50%) rotateX(-90deg) translateZ(166px); background:#cfc8b8}
/* editable gold bestseller seal */
.book-amz{position:absolute; top:-14px; left:-20px; z-index:4; background:#fff; border-radius:11px; padding:10px 13px; box-shadow:0 12px 26px rgba(0,0,0,.5); transform:rotate(-4deg); pointer-events:none}
.book-amz img{width:108px; height:auto; display:block}
.book-band .bs-tag{font-size:1rem; color:var(--accent-2); font-weight:600; margin-bottom:9px}
.book-band h3{font-size:1.9rem; color:#fff; margin-bottom:11px}
.book-band p{color:var(--ink-soft); font-size:1.12rem; max-width:52ch}
.book-band .btn{white-space:nowrap}
@media(max-width:920px){.router{grid-template-columns:1fr} .book-band{grid-template-columns:auto 1fr; gap:28px; padding:26px} .book-band .btn{grid-column:1/-1; width:100%}}
@media(max-width:560px){.book-band{grid-template-columns:1fr; text-align:center; justify-items:center}}

/* APP BAND */
.app{position:relative; overflow:hidden; background:radial-gradient(ellipse 58% 50% at 80% -8%, rgba(47,134,240,.26), transparent 60%), radial-gradient(ellipse 50% 55% at 8% 110%, rgba(31,95,192,.16), transparent 64%), linear-gradient(180deg,#0c0e13,#0a0a0c)}
.app::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.6; background-image:linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(ellipse 75% 65% at 40% 30%,#000 35%,transparent 82%); -webkit-mask-image:radial-gradient(ellipse 75% 65% at 40% 30%,#000 35%,transparent 82%)}
.app-in{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 1.1fr; gap:48px; align-items:center}
.app h2{margin-bottom:20px; max-width:18ch; font-size:clamp(2.9rem, 1.9rem + 3.6vw, 4.5rem); font-weight:800; line-height:1.03}
.app-lead{color:var(--ink-soft); font-size:1.14rem; max-width:46ch; margin-bottom:32px}
.feats{display:grid; gap:14px; margin-bottom:34px}
.feat{display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px; padding:16px 18px}
.feat .fi{width:40px; height:40px; border-radius:11px; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2); display:flex; align-items:center; justify-content:center; flex:none}
.feat b{color:#fff; font-weight:700; display:block; margin-bottom:3px; font-size:1.08rem}
.feat span.ft{color:var(--ink-soft); font-size:1.02rem}
/* phone-trio showcase */
.appshow{position:relative; display:flex; align-items:center; justify-content:center; min-height:600px}
.appshow .ph{position:absolute; width:236px; border-radius:36px; padding:9px; background:linear-gradient(160deg,#23262e,#0c0e13); border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 90px rgba(0,0,0,.6)}
.appshow .ph::before{content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%); width:78px; height:6px; border-radius:99px; background:rgba(255,255,255,.18); z-index:2}
.appshow .ph img{border-radius:28px; width:100%; display:block}
.appshow .ph1{transform:translateX(-142px) rotate(-7deg) scale(.9); z-index:1; opacity:.92}
.appshow .ph2{z-index:3; box-shadow:0 54px 110px rgba(0,0,0,.72), var(--glow)}
.appshow .ph3{transform:translateX(142px) rotate(7deg) scale(.9); z-index:1; opacity:.92}
/* one-time entrance when the section scrolls into view (no looping motion) */
.js .appshow .ph{opacity:0}
.appshow.in .ph1{animation:enterL .8s var(--ease) .14s both}
.appshow.in .ph2{animation:enterC .8s var(--ease) .04s both}
.appshow.in .ph3{animation:enterR .8s var(--ease) .24s both}
@keyframes enterL{from{opacity:0; transform:translateX(-142px) translateY(34px) rotate(-7deg) scale(.86)}to{opacity:.92; transform:translateX(-142px) translateY(0) rotate(-7deg) scale(.9)}}
@keyframes enterC{from{opacity:0; transform:translateY(42px) scale(.94)}to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes enterR{from{opacity:0; transform:translateX(142px) translateY(34px) rotate(7deg) scale(.86)}to{opacity:.92; transform:translateX(142px) translateY(0) rotate(7deg) scale(.9)}}
.app-menno-chip{position:absolute; left:50%; bottom:6px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:11px; background:rgba(16,17,22,.86); backdrop-filter:blur(10px); border:1px solid var(--border-2); border-radius:999px; padding:8px 18px 8px 8px; z-index:6; box-shadow:var(--shadow-card)}
.app-menno-chip img{width:38px; height:38px; border-radius:50%; flex:none}
.app-menno-chip span{font-size:1rem; font-weight:600; color:#fff}
@media(max-width:920px){
  .app-in{grid-template-columns:1fr; gap:36px}
  .appshow{order:-1; min-height:auto; padding:10px 0 28px}
  .appshow .ph1,.appshow .ph3{display:none}
  .appshow .ph2{position:relative; transform:none; width:244px}
  .app h2,.app-lead{max-width:none}
}

/* HOW IT WORKS */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:s}
.step{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:28px; box-shadow:var(--shadow-card); overflow:hidden}
.step::before{counter-increment:s; content:"0" counter(s); position:absolute; top:22px; right:26px; font-family:'Hanken Grotesk'; font-weight:800; font-size:2.4rem; color:var(--accent-2); opacity:.22; line-height:1}
.step-ic{display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2); margin-bottom:16px}
.step h3{margin-bottom:9px; color:#fff}
.step p{color:var(--ink-soft); font-size:1.04rem}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* METHOD / WHY DIFFERENT */
.method-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.mcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:28px; box-shadow:var(--shadow-card)}
.mcard-ic{display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2); margin-bottom:16px}
.mcard h3{margin-bottom:9px; color:#fff}
.mcard p{color:var(--ink-soft); font-size:1.04rem}
@media(max-width:760px){.method-grid{grid-template-columns:1fr}}

/* COURSE */
.course-in{display:grid; grid-template-columns:1.28fr 1fr; gap:56px; align-items:center}
.course h2{margin-bottom:18px}
.course-body{color:var(--ink-soft); font-size:1.16rem; margin-bottom:22px; max-width:54ch}
.course-points{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:13px; max-width:54ch}
.course-points li{position:relative; padding-left:34px; color:var(--ink); font-size:1.06rem; line-height:1.45}
.course-points li::before{content:""; position:absolute; left:0; top:0; width:22px; height:22px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2334d27b'/%3E%3Cpath d='M17 8.5l-6.2 6.5L7 11.4' fill='none' stroke='%230a0a0c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.proof{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:17px 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); margin-bottom:24px}
.stars{display:inline-flex; gap:3px}
/* authentic Trustpilot rating style: white star on a green square, not orange */
.stars svg,.pw-stars svg{width:21px; height:21px; fill:#fff; background:var(--tp); border-radius:4px; padding:2.5px; box-sizing:border-box}
.proof .pscore{font-family:'Hanken Grotesk'; font-weight:800; font-size:1.6rem; color:#fff; line-height:1}
.proof .ptext{font-size:1rem; color:var(--ink-soft)}
.proof .ptext b{color:#fff}
.proof .ptext-sm{display:none; font-size:1rem; color:var(--ink-soft); white-space:nowrap}
.proof .ptext-sm b{color:#fff; font-family:'Hanken Grotesk'; font-weight:800}
.proof .tp{margin-left:auto}
.enroll-note{display:flex; align-items:flex-start; gap:12px; background:rgba(47,134,240,.08); border:1px solid rgba(47,134,240,.22); border-radius:12px; padding:15px 18px; margin-bottom:24px; font-size:1.04rem; color:var(--ink-soft)}
.enroll-note svg{color:var(--accent-2); flex:none; margin-top:2px}
.course-cta{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.course-media{position:relative}
.course-photo{border-radius:var(--r-lg); box-shadow:var(--shadow-hi); width:100%; height:auto; filter:contrast(1.03)}
.course-media figcaption{margin-top:13px; font-size:1rem; color:var(--ink-mute); text-align:center}
.langs{font-size:1rem; color:var(--ink-mute)}
.langs a{color:var(--accent-2); font-weight:600}
.langs a:hover{text-decoration:underline; text-underline-offset:2px}
@media(max-width:920px){.course-in{grid-template-columns:1fr; gap:36px} .course-media{max-width:380px} .course-body{max-width:none}}

/* COURSE REVIEWS */
.rev-head{max-width:680px; margin-bottom:34px}
.rev-head h2{margin-bottom:12px}
.rev-head p{color:var(--ink-soft); font-size:1.16rem}
/* cinematic graduate mosaic + glass stat panel */
.proof-wall{position:relative; height:600px; overflow:hidden; border-radius:var(--r-lg); margin-bottom:34px; background:#0b0c10}
.pw-grid{columns:6 150px; column-gap:9px}
.pw-grid figure{break-inside:avoid; margin:0 0 9px; border-radius:10px; overflow:hidden; border:1px solid var(--border); background:#0e0f13}
.pw-grid img{width:100%; display:block; filter:saturate(.95) contrast(1.02)}
.pw-vignette{position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse 78% 78% at 50% 50%, transparent 28%, rgba(10,10,12,.5) 64%, var(--bg) 100%)}
.pw-glow{position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse 42% 52% at 50% 50%, rgba(7,8,11,.72), rgba(7,8,11,.3) 52%, transparent 74%)}
.pw-panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:min(450px,88%); text-align:center; background:rgba(14,15,20,.6); backdrop-filter:blur(15px) saturate(140%); -webkit-backdrop-filter:blur(15px) saturate(140%); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:30px 32px; box-shadow:var(--shadow-hi)}
.pw-panel .tp{justify-content:center; margin-bottom:11px; color:var(--ink)}
.pw-stars{display:inline-flex; gap:3px; margin-bottom:14px}
.pw-stars svg{width:21px; height:21px}
.pw-panel h3{font-size:1.85rem; color:#fff; margin-bottom:11px; line-height:1.12}
.pw-panel p{color:var(--ink-soft); font-size:1.04rem; max-width:36ch; margin:0 auto}
.pw-meta{display:flex; justify-content:center; gap:14px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border)}
.pw-meta div{flex:1}
.pw-meta b{display:block; font-family:'Hanken Grotesk'; font-weight:800; font-size:1.5rem; color:#fff; line-height:1; margin-bottom:5px; font-variant-numeric:tabular-nums}
.pw-meta span{font-size:1rem; color:var(--ink-mute)}
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.rcard-q{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:26px; box-shadow:var(--shadow-card)}
.rcard-q .stars{margin-bottom:15px}
.rcard-q blockquote{margin:0 0 22px; color:var(--ink); font-size:1.06rem; line-height:1.62}
.rcard-q .who{display:flex; align-items:center; gap:13px; margin-top:auto}
.rcard-q .who img{width:50px; height:50px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--border-2)}
.rcard-q .who b{display:block; color:#fff; font-size:1.04rem}
.rcard-q .who small{color:var(--ink-mute); font-size:1rem}
.rev-foot{margin-top:30px}
.tp-badge{display:inline-flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:9px 17px}
/* multi-platform "independently rated" strip */
.rev-foot-lbl{display:block; font-size:1rem; font-weight:600; color:var(--ink-mute); margin-bottom:13px}
.plat-strip{display:flex; flex-wrap:wrap; gap:14px}
.plat{display:inline-flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:12px 20px 12px 13px; text-decoration:none}
a.plat{transition:border-color .2s var(--ease), transform .2s var(--ease)}
a.plat:hover{border-color:var(--border-2); transform:translateY(-2px)}
.plat-ic{width:36px; height:36px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:9px}
.plat-ic svg{width:22px; height:22px}
.plat-ic--tp{background:var(--tp)}
.plat-ic--fb{background:#1877f2}
.plat-meta{display:flex; flex-direction:column; line-height:1.25}
.plat-name{font-weight:700; color:#fff; font-size:1.04rem}
.plat-fig{font-size:1rem; color:var(--ink-mute)}
.plat-fig b{color:var(--ink-soft); font-weight:800; font-family:'Hanken Grotesk',sans-serif}
.rev-readmore{margin-top:18px}
@media(max-width:920px){.rev-grid{grid-template-columns:1fr}}
/* rev2: featured "even the experts take it" band above the proof wall.
   Verified endorsers only (name + exact credential + verbatim quote + real photo). */
.expert-band{margin-bottom:34px}
.expert-band-head{max-width:680px; margin-bottom:22px}
.expert-band-lbl{display:inline-flex; align-items:center; gap:11px; font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:1.28rem; color:#fff; margin-bottom:8px}
.expert-band-lbl::before{content:""; width:26px; height:2px; background:var(--accent); border-radius:2px}
.expert-band-head p{color:var(--ink-soft); font-size:1.06rem; line-height:1.55}
.expert-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.expert-card{display:flex; flex-direction:column; margin:0; background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow-card)}
.expert-card .stars{margin-bottom:13px}
.expert-card blockquote{margin:0 0 20px; color:var(--ink); font-size:1.02rem; line-height:1.6}
.expert-card .who{display:flex; align-items:center; gap:13px; margin-top:auto}
.expert-card .who img{width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--border-2)}
.expert-card .who b{display:block; color:#fff; font-size:1.04rem}
.expert-card .who small{display:block; color:var(--ink-mute); font-size:1rem; line-height:1.35}
@media(max-width:920px){.expert-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.expert-grid{grid-template-columns:1fr}}
@media(max-width:760px){.proof-wall{height:460px} .pw-grid{columns:3 120px} .pw-panel{width:90%; padding:24px 20px} .pw-panel h3{font-size:1.55rem} .pw-meta b{font-size:1.3rem}}
@media(max-width:460px){.pw-grid{columns:2 100px} .pw-meta{gap:8px}}

/* CONTENT / LIBRARY */
.lib-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:26px; flex-wrap:wrap}
.lib-head h2{margin-bottom:10px}
.lib-head .sub{color:var(--ink-soft); font-size:1.16rem; max-width:54ch}
.cats{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px}
.cats button{font-size:1rem; font-family:inherit; font-weight:600; color:var(--ink-soft); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:9px 18px; cursor:pointer; transition:border-color .2s, color .2s, background .2s}
.cats button:hover{color:#fff; border-color:var(--accent-2)}
.cats button[aria-pressed="true"]{color:#fff; border-color:var(--accent-2); background:rgba(47,134,240,.14)}
.cats button:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.lib-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; min-height:120px}
.lib-grid.dimmed{opacity:.4; pointer-events:none; transition:opacity .2s}
.pcard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-card); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s}
.pcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-hi); border-color:var(--border-2)}
.pcard .cover{aspect-ratio:16/9; overflow:hidden; background:#0e0f13}
.pcard .cover img{width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease)}
.pcard:hover .cover img{transform:scale(1.04)}
.pcard .pbody{padding:18px 20px 20px}
.pcard .kind{font-size:1rem; font-weight:600; color:var(--accent-2); margin-bottom:9px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.pcard .kind .date{color:var(--ink-mute); font-weight:500}
.pcard h3{font-size:1.22rem; color:#fff; line-height:1.22}
.lib-loading{grid-column:1/-1; color:var(--ink-mute); font-size:1.04rem; padding:30px 0}
.ffmi{display:grid; grid-template-columns:1.16fr .84fr; align-items:center; gap:30px; margin-top:22px; background:radial-gradient(ellipse 56% 92% at 26% 50%, rgba(47,134,240,.15), transparent 62%), linear-gradient(120deg,#10141b,#0d0f14); border:1px solid var(--border); border-radius:var(--r-lg); padding:30px 38px; color:inherit; text-decoration:none; transition:border-color .2s var(--ease), transform .2s var(--ease)}
.ffmi:hover{border-color:var(--border-2); transform:translateY(-2px)}
/* transparent figure blends into the box + leader lines that point at the real muscle anchors */
.ffmi-figwrap{display:flex; flex-direction:column; align-items:center; min-width:0}
.ffmi-fig{position:relative; width:100%; max-width:520px; aspect-ratio:1360/1144}
.ffmi-body{position:absolute; left:22.06%; top:0; width:55.88%; height:100%; object-fit:contain; filter:drop-shadow(0 16px 34px rgba(0,0,0,.5))}
.ffmi-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.ffmi-lines line{stroke:rgba(255,255,255,.30); stroke-width:2.2}
.ffmi-lines circle{stroke:rgba(255,255,255,.5); stroke-width:2}
.ffmi-lines .d-bal{fill:var(--success)}
.ffmi-lines .d-ahd{fill:var(--accent-2)}
.ffmi-lines .d-beh{fill:var(--warm)}
.cw{position:absolute; transform:translateY(-50%); white-space:nowrap}
.cw .tx{font-size:1rem; color:var(--ink-soft)}
.cw .tx b{font-family:'Hanken Grotesk'; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; margin-left:5px}
.cw.L{right:80.5%; text-align:right}
.cw.R{left:80.5%}
.ffmi-chips{display:none; flex-wrap:wrap; justify-content:center; gap:10px 18px}
.chip{display:flex; align-items:center; gap:7px; font-size:1rem; color:var(--ink-soft); white-space:nowrap}
.chip b{font-family:'Hanken Grotesk'; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; margin-left:4px}
.chip .sd{width:9px; height:9px; border-radius:50%; flex:none}
.chip .s-bal{background:var(--success)}
.chip .s-ahd{background:var(--accent-2)}
.chip .s-beh{background:var(--warm)}
/* result panel */
.ffmi-panel .eyebrow{margin-bottom:14px}
.ffmi-h{display:block; color:#fff; font-size:1.5rem; font-family:'Hanken Grotesk'; font-weight:800; line-height:1.12; margin-bottom:11px}
.ffmi-panel .lead{color:var(--ink-soft); font-size:1.04rem; margin-bottom:20px; max-width:42ch}
.ffmi-readout{background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:14px; padding:18px 20px; margin-bottom:22px}
.ffmi-eg{display:inline-block; font-size:1rem; font-weight:600; color:var(--ink-mute); margin-bottom:12px}
.ro-main{display:flex; align-items:baseline; gap:12px; font-family:'Hanken Grotesk'; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
.ro-now{font-size:2.6rem; color:#fff}
.ro-arrow{font-size:1.5rem; color:var(--ink-mute)}
.ro-ceil{font-size:2.6rem; color:var(--accent-2)}
.ro-labels{display:flex; gap:12px; margin:6px 0 14px; font-size:1rem; color:var(--ink-mute)}
.ro-labels span:first-child{min-width:calc(2.6rem + 6px)}
.ro-bar{position:relative; height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:11px}
.ro-bar>span{position:absolute; inset:0 auto 0 0; border-radius:99px; background:linear-gradient(90deg,var(--accent-deep),var(--accent-2))}
.ro-gap{font-size:1rem; color:var(--ink-soft)}
.ro-gap b{color:#fff; font-family:'Hanken Grotesk'; font-weight:800}
.ffmi .btn{display:inline-flex}
@media(max-width:820px){
  .ffmi{grid-template-columns:1fr; gap:24px; padding:28px 24px}
  .ffmi-panel .lead{max-width:none}
}
/* on small screens drop the gutter labels (they need the side room) and stack chips under the figure */
@media(max-width:560px){
  .ffmi-fig{max-width:262px; aspect-ratio:760/1144}
  .ffmi-body{left:0; width:100%}
  .ffmi-fig .cw, .ffmi-lines{display:none}
  .ffmi-chips{display:flex; margin-top:16px}
}
.lib-foot{margin-top:26px}
@media(max-width:920px){.lib-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lib-grid{grid-template-columns:1fr}}

/* EMAIL */
.email{position:relative; overflow:hidden; background:radial-gradient(ellipse 54% 64% at 84% 50%, rgba(47,134,240,.2), transparent 62%), linear-gradient(180deg,#0d1018,#0a0c11)}
.email-in{position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 1fr; gap:50px; align-items:center}
.email h2{margin-bottom:14px; max-width:20ch}
.email p{color:var(--ink-soft); font-size:1.12rem; max-width:52ch}
.lead-form{background:rgba(255,255,255,.04); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:28px}
.lead-form label{display:block; font-weight:600; color:#fff; font-size:1rem; margin-bottom:9px}
.lead-form .row{display:flex; gap:10px}
.lead-form input{flex:1; min-width:0; font-size:1.0625rem; padding:15px 16px; border-radius:var(--r-btn); border:1.5px solid var(--border-2); background:rgba(255,255,255,.06); color:#fff; font-family:inherit}
.lead-form input::placeholder{color:var(--ink-mute)}
.lead-form input:focus-visible{outline:3px solid var(--accent-2); outline-offset:1px; border-color:var(--accent-2)}
.lead-form input[aria-invalid="true"]{border-color:#ff9d9d; outline-color:#ff9d9d}
.lead-form .btn-primary{flex:none}
.lead-form .msg{min-height:22px; margin-top:12px; font-size:1rem}
.lead-form .msg.err{color:#ffc0c0}
.lead-form .msg.ok{color:#a8f0c4}
.lead-form .privacy{margin-top:15px; font-size:1rem; color:var(--ink-mute)}
@media(max-width:820px){.email-in{grid-template-columns:1fr; gap:32px} .email h2,.email p{max-width:none} .lead-form .row{flex-direction:column} .lead-form .btn-primary{width:100%}}

/* FAQ */
.faq-head{max-width:580px; margin-bottom:38px}
.faq-head h2{margin-bottom:11px}
.faq-head p{color:var(--ink-soft); font-size:1.1rem}
.faq-list{max-width:840px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:24px 46px 24px 0; position:relative; font-family:'Hanken Grotesk'; font-weight:700; font-size:1.18rem; color:#fff; letter-spacing:-.01em}
.faq-q:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:4px}
.faq-q .pm{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:24px; height:24px; transition:transform .2s var(--ease); color:var(--accent-2)}
.faq-q[aria-expanded="true"] .pm{transform:translateY(-50%) rotate(45deg)}
.faq-a{overflow:hidden; max-height:0; transition:max-height .28s var(--ease)}
.faq-a-in{padding:0 46px 26px 0; color:var(--ink-soft); font-size:1.06rem; line-height:1.65}
.faq-a-in p{margin:0 0 12px}
.faq-a-in p:last-child{margin-bottom:0}
.faq-a-in a{font-weight:600}

/* FOOTER */
.footer{background:#08080a; color:var(--ink-soft); padding:70px 0 32px; border-top:1px solid var(--border)}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr; gap:34px; align-items:start; padding-bottom:36px; border-bottom:1px solid var(--border); margin-bottom:38px}
.footer .brand{color:#fff; font-size:1.4rem; display:block; margin-bottom:14px}
.footer .brand span{color:var(--accent-2)}
.footer .tag{font-size:1.02rem; color:var(--ink-mute); max-width:42ch; margin-bottom:20px}
.footer-trust{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.trust-pill{display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--r-pill); padding:8px 15px; font-size:1rem; font-weight:600; color:var(--ink-soft); text-decoration:none}
a.trust-pill:hover{color:#fff; background:rgba(255,255,255,.08); text-decoration:none}
.foot-news{display:flex; gap:10px; max-width:420px}
.foot-news input{flex:1; min-width:0; font-size:1.0625rem; padding:13px 15px; border-radius:var(--r-btn); border:1.5px solid var(--border-2); background:rgba(255,255,255,.05); color:#fff; font-family:inherit}
.foot-news input::placeholder{color:var(--ink-mute)}
.foot-news input:focus-visible{outline:3px solid var(--accent-2); outline-offset:1px}
.foot-news .btn{flex:none; min-height:48px; padding:12px 20px}
.foot-news-lbl{font-size:1rem; color:var(--ink-soft); margin-bottom:10px; font-weight:600}
.footer-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding-bottom:38px; border-bottom:1px solid var(--border)}
.footer h5{font-family:'Hanken Grotesk'; font-weight:700; color:#fff; font-size:1.04rem; margin:0 0 16px}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.footer a{color:var(--ink-mute); font-size:1rem}
.footer a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:26px; flex-wrap:wrap}
.footer-bottom .legal{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.footer-bottom small,.footer-bottom .legal a{color:var(--ink-mute); font-size:1rem}
.social{display:flex; gap:10px}
.social a{width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:background .15s, color .15s}
.social a:hover{background:var(--accent-btn); color:#fff}
.social a:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.social svg{width:19px; height:19px}
@media(max-width:880px){.footer-top{grid-template-columns:1fr} .footer-cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-cols{grid-template-columns:1fr}}

/* sticky mobile CTA: keeps the primary action one tap away on the long phone scroll */
.mcta{position:fixed; left:0; right:0; bottom:0; z-index:100; display:flex; gap:14px; align-items:center; justify-content:center; padding:12px 24px calc(12px + env(safe-area-inset-bottom)); background:rgba(10,10,12,.86); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-top:1px solid var(--border-2); box-shadow:0 -12px 30px rgba(0,0,0,.45); transform:translateY(135%); transition:transform .28s var(--ease)}
.mcta.show{transform:none}
/* desktop: a context line on the left, actions on the right */
.mcta-in{width:100%; max-width:var(--container); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px}
.mcta-ctx{color:#fff; font-family:'Hanken Grotesk',sans-serif; font-size:1.06rem; font-weight:600; line-height:1.3}
.mcta-ctx b{color:var(--accent-2)}
.mcta-actions{display:flex; align-items:center; gap:10px; flex:none}
.mcta-search{display:none}
@media(max-width:900px){.mcta-out{display:none}}
@media(max-width:600px){
  .mcta{padding:11px 15px calc(11px + env(safe-area-inset-bottom)); gap:10px}
  .mcta-ctx{display:none}
  .mcta-search{display:flex}
  .mcta-in{gap:10px}
  .mcta-actions{flex:1}
  .mcta .btn{flex:1; min-width:0}
  
  /* the whole announce bar is the link, so the pill is redundant here and costs a fold line */
  .announce .ann-cta{display:none}}

.reveal{transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js .reveal{opacity:0; transform:translateY(16px)}
.reveal.in{opacity:1; transform:none}
.js .hero .stagger{opacity:0; transform:translateY(18px)}
.hero.loaded .stagger{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease)}
.hero.loaded .s1{transition-delay:.05s}.hero.loaded .s2{transition-delay:.13s}.hero.loaded .s3{transition-delay:.21s}.hero.loaded .s4{transition-delay:.29s}.hero.loaded .s5{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal,.hero .stagger{opacity:1 !important; transform:none !important}
  .marquee-track{animation:none !important}
  .hero-glow{animation:none !important}
}

/* ===== MOBILE: full-width primary CTAs + tidy stacking on phones ===== */
@media(max-width:600px){
  .hero-actions{flex-direction:column; align-items:stretch; gap:16px}
  .hero-actions .btn{width:100%}
  .hero-scroll{display:inline-flex; justify-content:center}
  /* first-screen: lead with the proposition + CTA, let Menno's photo follow (was photo-first) */
  .hero-media{order:0}
  .hero-in{padding-top:32px; gap:30px}
  .hero h1{margin-bottom:18px}
  .hero-sub{font-size:1.18rem; margin-bottom:24px}
  .app-cta-row .btn{width:100%}
  .course-cta{flex-direction:column; align-items:stretch}
  .course-cta .btn{width:100%}
  .lib-head{flex-direction:column; align-items:stretch}
  .lib-head .btn{width:100%; justify-content:center}
  /* condense the Trustpilot proof band onto one line */
  .proof{flex-wrap:nowrap; gap:10px; padding:14px 16px}
  .proof .stars{flex:none}
  .proof .ptext{display:none}
  .proof .ptext-sm{display:inline}
  .proof .tp{display:none}
  /* cut scroll-fatigue: show 3 testimonials + 3 library cards on phones (full sets still reachable via the CTAs/links) */
  .rev-grid .rcard-q:nth-child(n+4){display:none}
  .lib-grid .pcard:nth-child(n+4){display:none}
  /* condense the FFMI teaser: drop the tall example figure, keep the hook + readout + CTA */
  .ffmi{padding:24px 20px}
  .ffmi-figwrap{display:none}
  .ffmi .lead{margin-bottom:18px}
  .plat{flex:1 1 100%}
  .foot-news{flex-wrap:wrap}
  .foot-news input,.foot-news .btn{flex:1 1 100%}
  .announce{padding:10px 14px; font-size:1rem; gap:8px}
  .announce .ann-cta{padding:4px 11px}
}

/* ============================================================
   SEASONAL MODE SYSTEM
   App-mode is the default (course closed, app is the push).
   When a course cohort opens, flip ONE attribute to re-rank the
   whole page: <body data-mode="course">  (preview: ?mode=course)
   ============================================================ */
#main{display:flex; flex-direction:column}
#hero{order:1} .cred{order:2} #router{order:3} #method{order:3} #app{order:4} #how{order:5} #course{order:6} #reviews{order:7} #email{order:8} #library{order:9} #faq{order:10}

/* mode-conditional visibility */
.only-course{display:none}
[data-mode="course"] .only-app{display:none}
[data-mode="course"] .btn.only-course{display:inline-flex}
[data-mode="course"] .announce.only-course{display:flex}

/* COURSE MODE: course + its proof leapfrog the app block */
[data-mode="course"] #course{order:4}
[data-mode="course"] #reviews{order:5}
[data-mode="course"] #app{order:6}
[data-mode="course"] #how{order:7}
/* COURSE MODE: course becomes the prominent router card; app steps back */
[data-mode="course"] .r-course{order:-1; border-color:rgba(47,134,240,.4); background:linear-gradient(180deg,#16191f,#121319)}
[data-mode="course"] .r-course .rtag{color:#fff; background:var(--accent-btn)}
[data-mode="course"] .r-app{border-color:var(--border); background:var(--surface)}
[data-mode="course"] .r-app .rtag{color:#bcd6fb; background:rgba(47,134,240,.16)}

/* urgency / announcement bar (course mode only, a closed product cannot use this) */
.announce{align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:11px 18px; background:linear-gradient(90deg,var(--accent-deep),var(--accent-btn)); color:#fff; font-size:1rem; font-weight:600; text-decoration:none; text-align:center; border-bottom:1px solid rgba(255,255,255,.16)}
.announce b{font-weight:800; color:#fff}
.ann-copy--mobile{display:none}
.announce .ann-count{font-variant-numeric:tabular-nums; opacity:.95}
.announce .ann-cta{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.18); padding:5px 13px; border-radius:var(--r-pill); font-weight:700}
.announce:hover .ann-cta{background:rgba(255,255,255,.3)}
/* phones: the whole bar is the link, so the pill only costs a line of the fold */
@media(max-width:600px){.announce .ann-cta{display:none}}
.announce .ann-pulse{width:9px; height:9px; border-radius:50%; background:#fff; flex:none; animation:annpulse 1.8s infinite}
@keyframes annpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ============================================================
   Online PT Course page (VOM). Page-specific add-ons
   layered on top of the shared homepage design system.
   ============================================================ */

/* This page does not use the homepage seasonal-mode reordering system.
   The shared stylesheet sets #main{display:flex} + order: on #hero/.cred/#how/#reviews/#faq,
   which would scramble this page's section order. Force normal document flow. */
#main{display:block}
#hero,.cred,#how,#reviews,#faq{order:0}

/* sold-out status pill in the hero */

/* hero bullet list (verbatim benefit bullets) */
.hero-bullets{list-style:none; margin:0 0 28px; padding:0; display:grid; gap:12px; max-width:62ch}
.hero-bullets li{position:relative; padding-left:32px; color:var(--ink); font-size:1.18rem; font-weight:500; line-height:1.4}
.hero-bullets li::before{content:""; position:absolute; left:0; top:1px; width:21px; height:21px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2334d27b'/%3E%3Cpath d='M17 8.5l-6.2 6.5L7 11.4' fill='none' stroke='%230a0a0c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.hero-note{font-size:1rem; color:var(--ink-mute); margin-top:16px}

/* video frame variant: 16:9 instead of the tall portrait */
.hero-frame--video{aspect-ratio:16/9; background:#000}
.hero-frame--video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ===== rev1: hero opt-in + cinematic photo hero =====
   Item 1: the early-access opt-in moves into the hero itself (above the fold on
   desktop and on 390px phones). Item 2 (per Vince, video removed from the hero
   after an A/B test): the wow comes from typographic scale, a cinematic real
   photo of Menno with a right-edge bleed on large screens, deeper ambient glow
   and the proof band. Restraint kept: scale and depth, no gloss. */
@media(min-width:921px){
  /* rev2b: give the copy column the lion's share so the headline wraps to 2-3
     lines instead of 4, and shrink the photo's share (Vince: the big photo was
     squeezing the text column tall). Compact vertical padding so the whole hero
     lands near 60vh and the next section peeks. */
  .hero-in--cine{grid-template-columns:1.35fr .65fr; gap:60px; padding:36px 24px 30px}
}
.lead-form--hero{max-width:560px; padding:14px 20px 12px; background:rgba(20,22,28,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.lead-form--hero .privacy{margin-top:8px}
.lead-form--hero .msg{min-height:0}
.lead-form--hero .msg:empty{display:none}
/* rev2b hierarchy: title, subtitle, bullets, then the opt-in. Bullets sit
   directly above the form and are tightened so the opt-in stays above the fold. */
.hero-copy .hero-bullets{margin:0 0 20px}
.hero-actions--scroll{margin:20px 0 0}
.hero-media--cine{position:relative; margin:0; max-width:400px; justify-self:center}
/* rev2b: contained portrait, capped so it is never the tallest thing on screen
   and never dictates the layout. */
.hero-media--cine .hero-photo{height:430px; object-position:50% 12%}
@media(min-width:1280px){
  .hero-media--cine .hero-photo{height:470px}
}
/* rev2b: hero-scoped headline size (global h1 clamp maxes at 4.4rem which made
   the hero H1 four lines tall). Keep the mobile floor near 2.7rem. */
.hero-copy h1{font-size:1.06rem; font-weight:700; color:var(--ink-soft); line-height:1.3; margin-bottom:12px; letter-spacing:.04em}
/* rev2b: subhead sized down from 1.28rem so it does not wrap to three tall lines
   (still well above the 1rem / 16px floor at 1.14rem). */
/* HERO TYPE SCALE (deliberate 3 tiers, do not flatten)
   tier 1  proposition      clamp 40-56px / 800 / #fff        what they must read first
   tier 2  benefit bullets  19px / 500 / --ink                what they read second
   tier 3  product name     17px / 700 / --ink-soft           identification, read last
   Ratio tier1:tier2 is about 3x on purpose. The status pill and the proof row sit at
   16px, the floor. Weight and colour carry the 2-to-3 step, size carries the 1-to-2 step. */
.hero-in--cine .hero-sub{font-family:'Hanken Grotesk',sans-serif; font-weight:800; color:#fff; font-size:clamp(2.5rem, 1.55rem + 2.6vw, 3.5rem); line-height:1.05; letter-spacing:-.022em; margin-bottom:22px; max-width:22ch}
.hero-copy .hero-bullets{margin:0 0 26px}
.lead-form--hero label{margin-bottom:8px}
.lead-form--hero .privacy{margin-top:8px}
.hero-proof-row{margin-top:16px}
.hero-frame--cine{border-radius:var(--r-lg); box-shadow:0 0 0 1px rgba(255,255,255,.1), var(--shadow-hi), 0 26px 90px rgba(31,95,192,.28)}
/* rev2: in-hero compact proof row directly under the CTA (above the fold on mobile) */
.hero-proof-row{display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; margin:18px 0 0}
.hero-proof-item{display:inline-flex; align-items:center; gap:7px; font-size:1rem; font-weight:600; color:var(--ink-soft); white-space:nowrap}
.hero-proof-item svg{flex:none; opacity:.9; color:var(--success)}
.hero-media--cine .hero-glow{inset:-16% -13%; background:radial-gradient(ellipse at 28% 26%, rgba(47,134,240,.44), transparent 58%), radial-gradient(ellipse at 76% 74%, rgba(31,95,192,.36), transparent 64%); filter:blur(58px); opacity:.75}
@media(max-width:920px){
  /* copy-first at tablet too: the opt-in is the primary element, the photo follows */
  .hero-media--cine{order:1; max-width:460px}
  .hero-media--cine .hero-photo{height:440px}
}
@media(max-width:600px){
  /* rev2 phones (390x844 fold check): headline + subhead + form + CTA button
     stay fully above the fold. Vertical budget is tightened only on phones by
     trimming the stack's top padding and the gaps between blocks (no copy or
     body-font changes). The contained portrait follows below and is height-capped
     so it never pushes the CTA down. Hide the third proof chip to avoid wrapping. */
  .hero-in--cine{padding-top:22px; gap:18px}
  /* Keep the full proposition and all three benefit bullets on phones. */
  .hero-copy h1{font-size:1.06rem; line-height:1.3; margin-bottom:10px}
  .hero-in--cine .hero-sub{font-size:2rem; line-height:1.06; margin-bottom:16px; max-width:none}
  .lead-form--hero label{margin-bottom:6px}
  .lead-form--hero{padding:14px 16px 12px}
  .lead-form--hero .privacy{margin-top:6px}
  .hero-copy .hero-bullets{margin:0 0 14px; gap:9px}
  .hero-bullets li{font-size:1.02rem; line-height:1.36; padding-left:29px}
  .hero-bullets li::before{width:19px; height:19px; top:2px}
  .hero-media--cine{max-width:none; margin:8px 0 0; width:100%}
  .hero-frame--cine{aspect-ratio:4/5}
  .hero-media--cine .hero-photo{height:100%; object-position:50% 9%}
  .hero-proof-item--hidephone{display:none}
  .lead-form--hero{padding:16px 16px 12px}
}

/* rev1: the intro video's generous home in #how (moved out of the hero) */
.how{overflow:hidden} /* clips the decorative glow so it cannot widen the page */
.how h2{max-width:none; margin-bottom:18px}
.how .how-in .btn{margin-top:10px}
.how-cine{position:relative; margin:0}
.how-cine .hero-glow{inset:-8% -5%; background:radial-gradient(ellipse at 30% 25%, rgba(47,134,240,.34), transparent 58%), radial-gradient(ellipse at 74% 78%, rgba(31,95,192,.3), transparent 64%); filter:blur(64px); opacity:.55}
.video-frame--cine{box-shadow:0 0 0 1px rgba(255,255,255,.1), var(--shadow-hi), 0 30px 100px rgba(31,95,192,.26)}
@media(max-width:600px){
  .how-cine{margin:0 -24px}
  .video-frame--cine{border-radius:0}
}

/* language selector strip */
.langstrip{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-alt); padding:26px 0}
.langstrip .container{display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center}
.langstrip .ll{font-size:1rem; font-weight:600; color:var(--ink-mute)}
.lang-thumbs{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center}
.lang-thumbs a{display:block; border-radius:9px; overflow:hidden; border:1px solid var(--border); transition:border-color .2s var(--ease), transform .2s var(--ease)}
.lang-thumbs a:hover{border-color:var(--accent-2); transform:translateY(-2px)}
.lang-thumbs img{height:62px; width:auto; display:block}

/* alumni results stat grid */
.stat-head{max-width:680px; margin-bottom:34px}
.stat-head h2{margin-bottom:12px}
.stat-head p{color:var(--ink-soft); font-size:1.16rem}
.statgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px}
.statcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow-card)}
.statcard b{display:block; font-family:'Hanken Grotesk'; font-weight:800; font-size:2.7rem; color:var(--accent-2); line-height:1; margin-bottom:10px; font-variant-numeric:tabular-nums}
.statcard span{color:var(--ink-soft); font-size:1.02rem}
.statgrid--detail{grid-template-columns:repeat(3,1fr)}
.statgrid--detail .statcard b{color:#fff; font-size:2rem}
.statgrid--detail .statcard .sh{display:block; color:#fff; font-weight:700; font-size:1.1rem; margin:0 0 8px; font-family:'Hanken Grotesk'}
.stat-src{font-size:1rem; color:var(--ink-mute)}
@media(max-width:920px){.statgrid{grid-template-columns:repeat(2,1fr)} .statgrid--detail{grid-template-columns:1fr}}
@media(max-width:520px){.statgrid{grid-template-columns:1fr}}

/* certification: centered head, world-map tile, caption, IAO + copy row */
.cert-head{text-align:center; max-width:780px; margin:0 auto 34px}
.cert-head h2{text-wrap:balance}
.cert-head .course-body{margin:14px auto 0; max-width:56ch}
.cert-map{position:relative; background:radial-gradient(ellipse 55% 60% at 14% 12%, rgba(47,134,240,.13), transparent 60%), var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:26px 26px 20px}
.wmap{width:100%; height:auto; display:block}
/* land moet zichtbaar van de oceaan verschillen, anders lijken kustdots (Lissabon, Manila,
   Trinidad) in het water te zweven; op #1b1d23 met .05 kustlijn was dat verschil 1.07:1 */
.wm-land{fill:#23262d; stroke:rgba(255,255,255,.13); stroke-width:.5}
.wm-us{fill:rgba(47,134,240,.35); stroke:var(--accent); stroke-width:1}
.wm-halo{fill:rgba(47,134,240,.16)}
.wm-dot{fill:var(--accent-2); opacity:.9}
.wm-island{fill:#23262d; stroke:rgba(255,255,255,.22); stroke-width:.7}
/* US-metro-dots: iets kleiner/zachter dan landen-dots; herkomst en plaatsingsregels (netnummers,
   bio's, land-snap, samenvoegdrempel) staan in gen_worldmap.py, dat de SVG hieronder genereert */
.wm-halo--st{fill:rgba(47,134,240,.13)}
.wm-dot--st{opacity:.85}
.wm-stage{position:relative}
/* legend-stijl chip linksonder in de tile (lege Stille Zuidzee): dekt nooit dots of land met pins af */
.wm-callout{position:absolute; left:14px; bottom:14px; max-width:310px; background:rgba(14,15,20,.82); backdrop-filter:blur(10px); border:1px solid var(--border-2); border-radius:10px; padding:10px 14px; z-index:2}
.wm-callout b{display:block; color:#fff; font-family:'Hanken Grotesk',sans-serif; font-size:1rem; line-height:1.2; margin-bottom:2px}
.wm-callout span{display:block; color:var(--ink-soft); font-size:1rem; line-height:1.35}
.wm-cap{text-align:center; color:var(--ink-mute); font-size:1rem; margin:14px auto 0; max-width:72ch}
.cert-foot{display:grid; grid-template-columns:auto 1fr; gap:26px 36px; align-items:start; max-width:960px; margin:38px auto 44px}
.cert-iao{display:inline-flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; color:var(--ink-soft); font-size:1rem; padding:16px 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); text-align:center}
.cert-iao svg{width:44px; height:44px}
.cert-iao:hover{border-color:var(--border-2)}
.cert-iao:focus-visible{outline:3px solid var(--accent-2); outline-offset:3px}
.cert-foot-copy p{color:var(--ink-soft); font-size:1.06rem; margin:0 0 14px; line-height:1.62}
.cert-foot-copy p:last-child{margin-bottom:0}
@media(max-width:760px){
  .cert-map{padding:16px 14px 14px}
  .wm-callout{position:static; margin:14px auto 0; width:max-content; max-width:100%}
  .wm-dot{r:4}
  .wm-dot--st{r:3.2}
  .cert-foot{grid-template-columns:1fr; justify-items:center; margin:30px auto 36px}
}

/* founder bio.
   The seminar photo is deliberate: a full room signals status in a way a studio portrait
   cannot. It is a 3:2 landscape, so the media column frames and crops it in CSS
   (object-position keeps Menno and the slide and drops the empty left wall) instead of
   letterboxing it into a portrait slot. */
.founder-in{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.founder-copy{align-self:center}
.founder-media{position:relative; display:block}
.founder-photo{display:block; width:100%; height:auto; aspect-ratio:900/645; object-fit:cover;
  object-position:100% 36%; border-radius:var(--r-lg); border:1px solid var(--border); box-shadow:var(--shadow-hi)}
.founder h2{margin-bottom:8px}
.founder p{color:var(--ink-soft); font-size:1.08rem; margin-bottom:16px; max-width:54ch}
.cred-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:34px}
.cred-card{display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:16px 18px; box-shadow:var(--shadow-card)}
.cred-ic{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2); flex:none}
.cred-card b{display:block; color:#fff; font-family:'Hanken Grotesk',sans-serif; font-size:1.06rem; line-height:1.3; margin-bottom:4px}
.cred-card span:not(.cred-ic){display:block; color:var(--ink-soft); font-size:1rem; line-height:1.5}
@media(max-width:900px){
  /* text first, portrait under it: a cutout reads fine at any width, so it keeps
     its full shape instead of being boxed into a letterbox crop */
  .founder-in{grid-template-columns:1fr; gap:26px}
  .founder-media{order:2}
  .founder-copy{order:1}
  .founder p{max-width:none}
  .cred-grid{grid-template-columns:1fr}
}

/* how-it-works split with YouTube */
.how-in{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.how h2{margin-bottom:14px}
.how p{color:var(--ink-soft); font-size:1.1rem; margin-bottom:16px; max-width:54ch}
.how .video-frame{position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-hi); background:#000}
.how .video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
@media(max-width:820px){.how-in{grid-template-columns:1fr; gap:30px} .how p{max-width:none}}

/* curriculum accordion */
.curric-intro{max-width:680px; margin-bottom:30px}
.curric-intro h2{margin-bottom:12px}
.curric-intro p{color:var(--ink-soft); font-size:1.12rem; margin-bottom:8px}
.curric-list{max-width:none; margin:0; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; background:var(--surface)}
.curric-list .faq-item{border-bottom:1px solid var(--border); padding:0 22px}
.curric-list .faq-item:last-child{border-bottom:none}
.curric-list .faq-q{padding:20px 46px 20px 0; font-size:1.1rem}
.curric-list .wk{display:block; font-size:1rem; font-weight:700; color:var(--accent-2); letter-spacing:.02em; margin-bottom:3px}
.curric-list .faq-a-in{padding:0 46px 22px 0}
.curric-list .faq-a-in ul{margin:0; padding-left:20px; color:var(--ink-soft); font-size:1.02rem; line-height:1.6}
.curric-list .faq-a-in li{margin-bottom:5px}
.curric-foot{text-align:center; margin-top:28px}

/* practical / tested-in-the-trenches list */
.practical-points{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; max-width:none}
.practical-points li{position:relative; padding-left:34px; color:var(--ink); font-size:1rem; line-height:1.45}
@media(max-width:640px){.practical-points{grid-template-columns:1fr}}
.practical-points li::before{content:""; position:absolute; left:0; top:1px; width:22px; height:22px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2334d27b'/%3E%3Cpath d='M17 8.5l-6.2 6.5L7 11.4' fill='none' stroke='%230a0a0c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* exercise library + transformation tiles */
.tile-grid{display:grid; gap:12px}
.tile-grid img{width:100%; height:100%; object-fit:cover; border-radius:11px; border:1px solid var(--border); display:block}
.exlib-grid{grid-template-columns:repeat(6,1fr)}
.tgrid{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.exlib-grid{grid-template-columns:repeat(3,1fr)} .tgrid{grid-template-columns:repeat(2,1fr)}}

/* transformations: premium masonry collage of real before/after photos (native aspect, no crop) */
.transform-wall{position:relative}
.tgrid--mason{display:block; columns:3 320px; column-gap:14px}
.tgrid--mason img{width:100% !important; height:auto !important; object-fit:contain; margin:0 0 14px; break-inside:avoid; -webkit-column-break-inside:avoid; box-shadow:var(--shadow-card); transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.tgrid--mason img:hover{transform:translateY(-3px); box-shadow:var(--shadow-hi)}
@media(max-width:920px){.tgrid--mason{columns:3 200px}}
@media(max-width:560px){.tgrid--mason{columns:2 140px}}

/* exercise library: framed as a screenshot of the in-course library (not an interactive widget) */
.exlib-browser{margin:0; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-hi)}
.exlib-bar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:13px 18px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.03)}
.exlib-dots{display:inline-flex; gap:7px}
.exlib-dots i{width:11px; height:11px; border-radius:50%; background:var(--border-2)}
.exlib-bar-title{grid-column:2; display:inline-flex; align-items:center; gap:9px; color:var(--ink-soft); font-weight:700; font-size:1.0rem; font-family:'Hanken Grotesk'; white-space:nowrap}
.exlib-bar-title svg{color:var(--accent-2)}
.exlib-cap{padding:0 18px 16px; margin:0; color:var(--ink-mute); font-size:1rem; text-align:center}
/* exam: real graduates holding their certificate */
.exam-proof{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:36px auto 0; max-width:1000px}
.exam-proof figure{margin:0; position:relative; border-radius:13px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-card)}
.exam-proof img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 22%; display:block}
.exam-proof figure::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(8,8,11,.45)); pointer-events:none}
.exam-cap{margin:16px 0 0; text-align:center; color:var(--ink-mute); font-size:1rem}
@media(max-width:680px){.exam-proof{grid-template-columns:repeat(2,1fr)}}
/* rev2 item 4: compact single strip. Shorter tiles (16/10 not 4/5) so the whole
   section is roughly half the height it was, and it no longer reads as a scroll-stop. */
.exlib-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:12px}
.exlib-tiles figure{position:relative; margin:0; aspect-ratio:16/10; border-radius:9px; overflow:hidden; border:1px solid var(--border); cursor:pointer}
.exlib-tiles img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s var(--ease)}
.exlib-tiles figure::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(8,8,11,.5)); pointer-events:none}
.exlib-tiles figure:hover img{transform:scale(1.05)}
.exlib-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:32px; height:32px; border-radius:50%; background:rgba(12,13,17,.55); border:1.5px solid rgba(255,255,255,.85); backdrop-filter:blur(3px)}
.exlib-play::before{content:""; position:absolute; left:53%; top:50%; transform:translate(-50%,-50%); border-style:solid; border-width:5px 0 5px 9px; border-color:transparent transparent transparent #fff}
@media(max-width:760px){
  .exlib-tiles{display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(78vw,320px); gap:12px; padding:12px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-inline:contain; scrollbar-width:none}
  .exlib-tiles::-webkit-scrollbar{display:none}
  .exlib-tiles figure{scroll-snap-align:start}
  .exlib-play{width:36px; height:36px}
}

/* bonus / network bands (reuse book-band rhythm) */
.bonus-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.bonus{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:26px; box-shadow:var(--shadow-card)}
.bonus img{width:74px; height:74px; object-fit:contain; border-radius:12px; margin-bottom:16px}
/* rev2: one shared equal-height media zone across all three bonus cards, so headings
   and body copy start on the same baseline regardless of the media inside. */
.bonus .bonus-media{height:260px; margin-bottom:18px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.bonus .bonus-media .tkx2{margin-bottom:0; width:100%}
.bonus .bonus-media .tkx2-stage{height:250px}
.bonus .bonus-media .tkx2-card{max-width:188px}
.bonus .bonus-media .bonus-img{margin-bottom:0}
.bonus .bonus-media .bonus-img--people{width:100% !important; height:100% !important; aspect-ratio:auto; object-fit:cover !important; border-radius:10px}
.bonus .bonus-media .bonus-logos{width:100% !important; height:100% !important; aspect-ratio:auto; box-sizing:border-box}
.bonus h3{color:#fff; margin-bottom:9px}
.bonus p{color:var(--ink-soft); font-size:1.02rem}
.bonus ul{margin:10px 0 0; padding-left:18px; color:var(--ink-soft); font-size:1.02rem}
@media(max-width:820px){.bonus-grid{grid-template-columns:1fr} .bonus .bonus-media{height:auto; min-height:220px}}

/* research pledge band */
.pledge{position:relative; overflow:hidden; background:radial-gradient(ellipse 50% 80% at 85% 50%, rgba(47,134,240,.16), transparent 60%), linear-gradient(120deg,#11151c,#0c0e13); border:1px solid var(--border); border-radius:var(--r-lg); padding:42px 46px; display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center}
.pledge .pl-fig{flex:none; width:96px; height:96px; border-radius:20px; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2); display:flex; align-items:center; justify-content:center}
.pledge h2{font-size:1.9rem; margin-bottom:12px}
.pledge p{color:var(--ink-soft); font-size:1.06rem; margin-bottom:12px; max-width:66ch}
.pledge p:last-child{margin-bottom:0}
@media(max-width:760px){.pledge{grid-template-columns:1fr; padding:30px 24px; text-align:center} .pledge .pl-fig{margin:0 auto}}

/* pricing */
.price-head{max-width:680px; margin-bottom:26px}
.price-head h2{margin-bottom:12px}
.price-head p{color:var(--ink-soft); font-size:1.12rem}
.price-switch{display:inline-flex; gap:4px; padding:5px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); margin-bottom:30px}
.price-switch button{font-family:inherit; font-size:1rem; font-weight:600; cursor:pointer; color:var(--ink-soft); background:none; border:none; border-radius:var(--r-pill); padding:10px 20px; transition:color .2s, background .2s}
.price-switch button[aria-pressed="true"]{color:#fff; background:var(--accent-btn)}
.price-switch button:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.plans[hidden]{display:none}
.plan{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:30px 28px; box-shadow:var(--shadow-card)}
.plan--feature{border-color:rgba(47,134,240,.4); background:linear-gradient(180deg,#16191f,#121319); position:relative}
.plan--feature .plan-flag{position:absolute; top:-14px; left:28px; background:var(--accent-btn); color:#fff; font-size:1rem; font-weight:700; padding:5px 13px; border-radius:var(--r-pill)}
.plan .pname{font-family:'Hanken Grotesk'; font-weight:700; color:#fff; font-size:1.2rem; margin-bottom:14px}
.plan .pprice{display:flex; align-items:baseline; gap:9px; font-family:'Hanken Grotesk'; font-weight:800; margin-bottom:6px}
.plan .pprice .now{font-size:2.5rem; color:#fff; line-height:1}
.plan .pprice .per{font-size:1.04rem; color:var(--ink-mute); font-weight:600}
.plan .pprice .was{font-size:1.2rem; color:var(--ink-mute); text-decoration:line-through; font-weight:600}
.plan .pnote{font-size:1rem; color:var(--success); font-weight:600; margin-bottom:18px}
.plan .pdesc{color:var(--ink-soft); font-size:1.02rem; margin-bottom:22px; flex:1}
.plan .btn{width:100%}
.price-fine{max-width:840px; margin:30px auto 0; display:grid; gap:11px}
.price-fine li{position:relative; padding-left:28px; color:var(--ink-soft); font-size:1.02rem; line-height:1.5; list-style:none}
.price-fine li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:var(--accent-2)}
.price-fine a{font-weight:600}
@media(max-width:920px){.plans{grid-template-columns:1fr}}

/* early access + guarantee + scholarship cards */
.split-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:34px 36px; box-shadow:var(--shadow-card)}
.split-card.feature{border-color:rgba(47,134,240,.4); background:linear-gradient(180deg,#16191f,#121319)}
.split-card h2,.split-card h3{margin-bottom:12px}
.split-card p{color:var(--ink-soft); font-size:1.06rem; margin-bottom:14px}
.split-card p:last-child{margin-bottom:0}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch}
@media(max-width:820px){.two-col{grid-template-columns:1fr}}

/* contact methods */
.cmethods{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cmethod{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:20px 22px; box-shadow:var(--shadow-card); color:inherit; text-decoration:none; transition:border-color .2s var(--ease), transform .2s var(--ease)}
.cmethod:hover{border-color:var(--accent-2); transform:translateY(-2px)}
.cmethod .ci{width:46px; height:46px; border-radius:12px; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2); display:flex; align-items:center; justify-content:center; flex:none}
.cmethod b{display:block; color:#fff; font-size:1.06rem}
.cmethod span{color:var(--ink-mute); font-size:1rem}
@media(max-width:760px){.cmethods{grid-template-columns:1fr}}

/* reviews: long-form quote cards (reuse rcard-q in a 2-col masonry-ish grid) */
.rev-grid--two{grid-template-columns:repeat(2,1fr)}
.rcard-q .who .who-init{width:50px; height:50px; border-radius:50%; background:rgba(47,134,240,.16); color:var(--accent-2); display:flex; align-items:center; justify-content:center; font-family:'Hanken Grotesk'; font-weight:800; font-size:1.04rem; flex:none; border:1px solid var(--border-2)}
@media(max-width:760px){.rev-grid--two{grid-template-columns:1fr}}

/* === testimonials: true masonry so varying-length quotes pack tight (no dead space) === */
.rev-grid--mason{display:block; column-count:3; column-gap:20px}
.rev-grid--mason > .rcard-q{break-inside:avoid; -webkit-column-break-inside:avoid; width:100%; margin:0 0 20px}
@media(max-width:920px){.rev-grid--mason{column-count:2}}
@media(max-width:600px){.rev-grid--mason{column-count:1}}
/* === proof block: a USP claim plus the graduates who confirm that exact claim, as one object ===
   Editing rule: every quote under a claim must contain a phrase that proves that claim, and the
   <mark> is that phrase, verbatim from the review. If no phrase can be marked, the quote does not
   belong under that claim. Stars appear only where a real star rating exists (Trustpilot). The
   curated reviews on mennohenselmans.com/reviews carry no rating, so they carry no stars. */
.proofblock{padding:0 0 88px; margin-top:-52px}
.pb{max-width:1010px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden}
.pb-head{display:flex; align-items:center; gap:12px; padding:19px 28px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.022)}
.pb-lbl{display:inline-flex; align-items:center; gap:12px; font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:1.1rem; color:#fff; line-height:1.3}
.pb-lbl::before{content:""; width:24px; height:2px; background:var(--accent); border-radius:2px; flex:none}
.pb-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr)}
.pb-item{display:flex; flex-direction:column; gap:16px; padding:25px 26px 26px; border-left:1px solid var(--border); min-width:0}
.pb-item:first-child{border-left:0}
.pb-item blockquote{margin:0; color:var(--ink); font-size:1.04rem; line-height:1.62}
.pb-item mark{background:rgba(47,134,240,.17); color:#eaf2fd; border-radius:4px;
  /* negative margin cancels the padding so the highlight does not open a gap after a quote mark */
  padding:.13em .2em; margin:0 -.16em; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.pb-item .stars svg{width:17px; height:17px; padding:2px; border-radius:3px}
.pb-foot{margin-top:auto; display:flex; flex-direction:column; gap:13px}
.pb-who{display:flex; align-items:center; gap:13px}
.pb-av{width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--border-2)}
.pb-init{width:56px; height:56px; border-radius:50%; background:rgba(47,134,240,.16); color:var(--accent-2); display:flex; align-items:center; justify-content:center; font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:1.08rem; flex:none; border:1px solid var(--border-2)}
.pb-who b{display:block; color:#fff; font-size:1.04rem; line-height:1.32}
.pb-who small{display:block; color:var(--ink-mute); font-size:1rem; line-height:1.36}
@media(max-width:900px){
  .pb-list{grid-template-columns:1fr}
  .pb-item{border-left:0; border-top:1px solid var(--border)}
  .pb-item:first-child{border-top:0}
}
@media(max-width:760px){.proofblock{padding:0 0 48px; margin-top:-26px}}
@media(max-width:560px){.pb-head{padding:16px 20px} .pb-item{padding:21px 20px 22px}}

/* === announcement bar (course-only, always shown on this page) === */
.announce.course-bar{display:flex}

/* === logo strip: optical-size balance (equal visual mass, not equal pixels) === */
.marquee-track img{width:auto !important; max-width:128px; object-fit:contain; flex:0 0 auto}
/* NOTE: per-logo heights are set in the v3 block lower in this file (search "SINGLE SOURCE OF
   TRUTH"). Do not add per-logo heights here - this stale block used to conflict with it. */

/* === hero meta row below the video frame === */
.hero-meta-row{display:flex; align-items:center; gap:20px; margin-top:14px; flex-wrap:wrap}
.hero-meta-item{display:flex; align-items:center; gap:7px; font-size:1rem; color:var(--ink-soft); white-space:nowrap}
.hero-meta-item svg{flex:none; opacity:.8}

/* === stat card progress bars === */
.statcard .sc-bar{height:4px; border-radius:99px; background:rgba(255,255,255,.08); margin:10px 0 0; overflow:hidden}
.statcard .sc-bar span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#1a5ec8,var(--accent-2))}

/* === guarantee chip in pricing section === */
/* rev2: pricing assurances strip, 3 equal aligned chips (replaces the old seal + run-on line) */
.assurances{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:940px; margin:30px auto 0}
/* zelfde patroon als .cred-card in de founder-sectie (Vince 2 aug 2026) */
.assure{display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:16px 18px; box-shadow:var(--shadow-card)}
.assure-ic{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2); flex:none}
.assure b{display:block; color:#fff; font-family:'Hanken Grotesk',sans-serif; font-size:1.06rem; line-height:1.3; margin-bottom:4px; text-wrap:balance}
.assure span{display:block; color:var(--ink-soft); font-size:1rem; line-height:1.5}
@media(max-width:820px){.assurances{grid-template-columns:1fr}}
/* rev2: scholarships collapsed into a compact expandable to cut its footprint */
.scholar{max-width:900px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); overflow:hidden}
.scholar>summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px}
.scholar>summary::-webkit-details-marker{display:none}
.scholar>summary:focus-visible{outline:3px solid var(--accent-2); outline-offset:-3px; border-radius:var(--r-card)}
.scholar-sum{display:flex; align-items:center; gap:14px; min-width:0}
.scholar-ic{flex:none; width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2)}
.scholar-txt b{display:block; color:#fff; font-family:'Hanken Grotesk',sans-serif; font-size:1.1rem; line-height:1.25}
.scholar-txt small{display:block; color:var(--ink-mute); font-size:1rem; line-height:1.4; margin-top:3px}
.scholar-chev{flex:none; color:var(--ink-mute); transition:transform .2s var(--ease); display:flex}
.scholar[open] .scholar-chev{transform:rotate(180deg)}
.scholar-body{padding:0 22px 22px; border-top:1px solid var(--border)}
.scholar-body p{color:var(--ink-soft); font-size:1.02rem; line-height:1.6; margin:16px 0 10px}

/* === desktop sticky nav CTA (shown after hero scrolls off) === */
.nav-cta-sticky{display:none}
@media(min-width:1180px){
  .nav.has-hero-passed .nav-cta-sticky{display:inline-flex}
  .nav.has-hero-passed .nav-cta{display:none}
}

/* === curriculum cluster overview grid === */
.cluster-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px}
.cluster{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:20px 18px; box-shadow:var(--shadow-card)}
.cluster .cl-ic{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; background:rgba(47,134,240,.13); border:1px solid rgba(47,134,240,.28); color:var(--accent-2); margin-bottom:12px}
.cluster .cl-week{display:block; font-size:1rem; font-weight:700; color:var(--accent-2); letter-spacing:.02em; margin-bottom:6px}
.cluster h4{color:#fff; font-size:1.04rem; margin:0 0 6px; font-family:'Hanken Grotesk'; font-weight:700}
.cluster p{color:var(--ink-mute); font-size:1rem; margin:0; line-height:1.45}
@media(max-width:760px){.cluster-grid{grid-template-columns:repeat(2,1fr)}}

/* === bonus cards: full-width 16:9 photo (overrides shared .bonus img rule) === */
.bonus .bonus-img{width:100% !important; height:auto !important; aspect-ratio:16/9; object-fit:cover !important; object-position:center; border-radius:10px; margin-bottom:18px; border:1px solid var(--border)}
/* per-image crop tuning */
.bonus .bonus-img--tool{object-position:center 18%; background:#0e0f13}
.bonus .bonus-img--people{object-position:center 28%}
/* tested-in-the-trenches: real coaching photo + compact graduate quote */
.practical-media .course-photo{aspect-ratio:4/3; object-fit:cover; object-position:center 30%}
.practical-quote{margin-top:16px; padding:16px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); text-align:left}
.practical-quote .stars{margin-bottom:9px}
.practical-quote q{display:block; quotes:none; color:var(--ink); font-size:1.04rem; line-height:1.55; margin-bottom:9px}
.practical-quote q::before{content:'"'} .practical-quote q::after{content:'"'}
.practical-quote .pq-who{font-size:1rem; color:var(--ink-mute)}
.practical-quote .pq-who b{color:#fff}
/* discounts: partner-logo panel in place of a photo */
.bonus .bonus-logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 26px; padding:20px 24px; background:linear-gradient(160deg,#13151b,#0d0e12); border:1px solid var(--border)}
.bonus-logos .blogo-img{height:24px; width:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.82}
.bonus-logos .blogo-plus{color:var(--accent-2)}

.btn .pdf-ic{flex:none; margin-right:2px}

/* ---------- course outline email capture ---------------------------------- */
.ogate{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:22px}
.ogate[hidden]{display:none}
.ogate-scrim{position:absolute; inset:0; background:rgba(4,5,7,.76); backdrop-filter:blur(5px)}
.ogate-card{position:relative; z-index:1; width:100%; max-width:472px; background:var(--surface); border:1px solid var(--border-2);
  border-radius:var(--r-lg); box-shadow:0 32px 80px rgba(0,0,0,.62); padding:30px 30px 26px; max-height:calc(100vh - 44px); overflow-y:auto}
.ogate-x{position:sticky; top:0; float:right; margin:-8px -8px 0 0; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:50%; color:var(--ink-soft); cursor:pointer}
.ogate-x:hover{color:#fff; background:rgba(255,255,255,.07)}
.ogate-x:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.ogate-badge{display:inline-flex; align-items:center; gap:7px; font-size:1rem; font-weight:700; letter-spacing:.04em;
  color:var(--accent-2); background:rgba(47,134,240,.12); border:1px solid rgba(47,134,240,.34); border-radius:var(--r-pill); padding:5px 12px; margin-bottom:15px}
.ogate-card h2{font-size:1.6rem; line-height:1.18; margin-bottom:9px}
.ogate-card #ogate-desc{color:var(--ink-soft); font-size:1.04rem; line-height:1.55; margin-bottom:19px}
.ogate-field{margin-bottom:13px}
.ogate-field label{display:block; font-size:1rem; font-weight:600; color:var(--ink); margin-bottom:6px}
.ogate-field input{width:100%; font-family:inherit; font-size:1.0625rem; padding:14px 16px; border-radius:var(--r-btn);
  border:1.5px solid var(--border-2); background:rgba(255,255,255,.06); color:#fff}
.ogate-field input::placeholder{color:var(--ink-mute)}
.ogate-field input:focus-visible{outline:3px solid var(--accent-2); outline-offset:1px; border-color:var(--accent-2)}
.ogate-field input[aria-invalid="true"]{border-color:#ff9d9d; outline-color:#ff9d9d}
.ogate-form .btn{width:100%; justify-content:center; margin-top:4px}
.ogate-fine{font-size:1rem; color:var(--ink-mute); line-height:1.5; margin-top:11px}
@media(max-width:520px){.ogate{padding:14px} .ogate-card{padding:26px 20px 22px} .ogate-card h2{font-size:1.42rem}}

/* ---------- repeated CTA band ----------------------------------------------
   The original sales page repeats its CTA after every major block; this page
   had an 11,000px stretch between the science section and pricing with nothing
   to act on. Four bands close that gap. Each is state-aware: the primary CTA
   is wired through [data-cta="main"], so it never shows a checkout link outside
   the open state, and the secondary always opens the course-outline capture. */
.cta-band{background:linear-gradient(160deg,#15171d,#0d0e12); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.cta-band-in{max-width:var(--container); margin:0 auto; padding:34px 24px; display:flex; align-items:center; justify-content:center; gap:20px 28px; flex-wrap:wrap; text-align:center}
.cta-band p{margin:0; color:#fff; font-family:'Hanken Grotesk',sans-serif; font-size:1.32rem; font-weight:700; line-height:1.3; letter-spacing:-.01em}
.cta-band .cta-band-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center}
@media(max-width:720px){
  .cta-band-in{flex-direction:column; padding:26px 20px; gap:16px}
  .cta-band p{font-size:1.18rem}
  .cta-band .cta-band-actions{width:100%; flex-direction:column; gap:10px}
  .cta-band .btn{width:100%; justify-content:center}
}

/* ============================================================
   SALE STATE SYSTEM  (added 29 jul 2026)
   The cohort cycle has three selling states. One attribute on <body>
   drives every CTA and every date-dependent sentence on the page:

     data-sale="presale"  registration not open yet, the page collects emails
     data-sale="open"     registration open, checkout links live
     data-sale="soldout"  temporary, right after a cohort starts

   Pre-sale and "closed" are the SAME state: in both cases the page collects
   emails for the next round. Sold-out is a temporary window straight after a
   cohort starts, and once it lapses the page returns to pre-sale for the next
   round. So this is a cycle, and it needs no manual intervention ever.

   The state RESOLVES ITSELF from the COHORT round list in the page script.
   Preview any state with ?sale=open or the switcher at the bottom right
   (preview-only, remove for prod).

   HARD RULE: in presale and soldout there are ZERO checkout links on the page.
   Only data-sale="open" is allowed to emit an atc_id URL. This mirrors the
   standing closed-round policy on the concierge bots. Do not "temporarily"
   hardcode a checkout link into a presale variant.

   Markup contract:
     .sale-only  + .s-presale / .s-open / .s-soldout   variant blocks
                   (a variant may carry more than one state class)
     [data-cta="main"]   generic CTA, label + href set from SALE_COPY
     [data-cta="plan"][data-plan-key="..."]  pricing button, href from COHORT.links
   ============================================================ */
[data-sale="presale"] .sale-only:not(.s-presale),
[data-sale="open"]    .sale-only:not(.s-open),
[data-sale="soldout"]  .sale-only:not(.s-soldout){display:none !important}

/* the enrol block that replaces the hero opt-in while the cart is open */
.hero-enrol{background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:16px 20px 18px; margin-bottom:6px}
.hero-enrol .btn{width:100%; justify-content:center}
.hero-enrol .he-fine{font-size:1rem; color:var(--ink-soft); margin-top:9px; text-align:center}
/* geen prijs in de hero (Vince 2 aug 2026): eerst waarde, dan prijs; eerste prijsvermelding staat in #pricing */
@media(min-width:921px) and (max-height:840px){
  .hero-enrol{padding:12px 18px 14px}
}

/* ---- hero tier-1 guards, last in the cascade on purpose ----
   The 3-tier scale is fixed; these only stop tier 1 from wrapping into an extra line
   and pushing the opt-in or the next-section peek off the first screen. */
@media(min-width:921px) and (max-width:1140px){.hero-in--cine .hero-sub{font-size:3.1rem}}
/* Below 1140px the absolutely centred scroll cue runs into the proof row on the left.
   The peek does the same job there, measured 20px at 921 up to 96px at 1000. */
/* 601-920px never got a tier value and fell through to the generic 52px */
@media(min-width:601px) and (max-width:920px){
  .hero-in--cine{padding-top:30px; padding-bottom:32px}
}
/* 921-945px is the tightest the two-column hero ever gets, one bullet wraps there */
@media(min-width:921px) and (max-width:995px){
  .hero-in--cine .hero-sub{font-size:2.85rem}
  .hero-in--cine{padding-bottom:6px}
  .hero-copy .hero-bullets{margin:0 0 12px}
  .hero-proof-row{margin-top:10px}
}
@media(min-width:921px) and (max-width:1140px){
  .hero-in--cine{padding-top:28px; padding-bottom:18px}
  .hero-in--cine .hero-sub{margin-bottom:16px}
  .hero-copy .hero-bullets{margin:0 0 18px}
}
/* short laptop screens (1366x768, 1280x800): the scale stays, the spacing pays */
@media(min-width:921px) and (max-height:840px){
  .hero-in--cine .hero-sub{font-size:2.75rem; margin-bottom:12px}
  .hero-in--cine{padding-top:20px; padding-bottom:10px}
  .hero-copy .hero-bullets{margin:0 0 12px}
  .hero-bullets li{line-height:1.34}
  .lead-form--hero{padding:9px 18px 7px}
  .hero-proof-row{margin-top:10px}
}

@media(max-width:600px){.hero-in--cine .hero-sub{text-wrap:balance}}
@media(max-width:400px){.hero-in--cine .hero-sub{font-size:1.8rem; line-height:1.08}}
/* narrow phones (360px): keep the whole opt-in above the fold */
@media(max-width:380px){
  .hero-in--cine .hero-sub{font-size:1.7rem}
  .hero-copy .hero-bullets{margin:0 0 12px}
}
/* very short laptops (1280x720): one more step down, scale intact */

@media(min-width:921px) and (max-height:760px){
  .hero-enrol{padding:9px 16px 11px}
  .hero-enrol .he-fine{margin-top:6px}
  .hero-in--cine .hero-sub{font-size:2.45rem; margin-bottom:8px}
  .hero-bullets li{font-size:1.12rem; line-height:1.26}
  .hero-copy .hero-bullets{margin:0 0 8px}
  .hero-in--cine{padding-top:18px; padding-bottom:4px}
  .lead-form--hero{padding:7px 16px 5px}
  .hero-proof-row{margin-top:6px}
}

/* ===== MOBILE QA PASS: 2 AUG 2026 ===== */
@media(max-width:600px){
  /* Keep the header compact and leave search inside the mobile menu. */
  .nav-in{height:64px; padding:0 20px; gap:10px}
  .nav.scrolled .nav-in{height:60px}
  .nav-search-btn{display:none}
  .brand-logo{width:min(225px,calc(100vw - 94px)); height:auto}
  .nav-burger{width:44px; height:44px; margin-left:auto; flex:none}

  /* Keep the cohort ribbon to one clear line. */
  .announce{min-height:44px; flex-wrap:nowrap; gap:8px; padding:9px 12px; white-space:nowrap; overflow:hidden}
  .ann-copy--desktop{display:none}
  .ann-copy--mobile{display:inline}
  .announce .ann-pulse{width:8px; height:8px}

  /* Use a consistent 20px page gutter and give the first viewport more room. */
  .container{padding-left:20px; padding-right:20px}
  .hero-in--cine{padding-left:20px; padding-right:20px; padding-top:16px}
  .lead-form--hero{padding:12px}
  .lead-form--hero .row,.lead-form--hero input,.lead-form--hero .btn{width:100%}

  /* Mobile actions should fill the usable width of their cards or sections. */
  .course-cta .btn,.cta-band .btn,.how .btn,.curric-foot .btn,.plan .btn,
  .ea-date .lead-form .btn,.cf-actions .btn{width:100%; justify-content:center}
  .plan{padding:24px 20px}
  .split-card{padding:24px 20px}
  .ea-date-grid{gap:20px}
  .ea-date .lead-form{width:100%; max-width:none; padding:20px 16px}

  /* One focused action in the sticky bar. */
  .mcta{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .mcta-in,.mcta-actions{width:100%; gap:0}
  .mcta .btn{width:100%; min-height:52px}

  /* Compact cards with centered, high-contrast icons. */
  .assurances{gap:12px; margin-top:24px}
  .assure{grid-template-columns:40px minmax(0,1fr); gap:14px; padding:18px 16px}
  .assure-ic{width:40px; height:40px; border-radius:50%; background:rgba(47,134,240,.18); border-color:rgba(106,163,238,.48); color:#a9ccfa}
  .assure-ic svg{width:23px; height:23px; display:block; overflow:visible; stroke-width:2.1}
}

@media(max-width:760px){
  /* Media and proof cards should use the full content width on phones and tablets. */
  .course-media{width:100%; max-width:none}
  #direct .course-in .direct-media{max-width:none}
  .practical-media .course-photo{aspect-ratio:4/3; object-position:center 28%}
  .exlib-browser{width:100%}
  .exlib-bar{grid-template-columns:auto 1fr; padding:12px 14px}
  .exlib-bar-title{grid-column:2; justify-self:center; padding-right:38px}
  .exlib-cap{padding:2px 16px 16px; text-align:left}
}

@media(max-width:900px){
  /* The compact header and cohort ribbon are used across the full mobile-nav range. */
  .nav-search-btn{display:none}
  .announce{min-height:44px; flex-wrap:nowrap; gap:8px; padding:9px 12px; white-space:nowrap; overflow:hidden}
  .ann-copy--desktop{display:none}
  .ann-copy--mobile{display:inline}
  .announce .ann-cta{display:none}
  .announce .ann-pulse{width:8px; height:8px}
}


/* revealed by app.js only after the opt-in is confirmed */
.og-fallback[hidden]{display:none}
.og-fallback{width:100%; justify-content:center; margin-bottom:8px}