@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bricolage-600.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bricolage-700.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bricolage-800.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jakarta-400.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jakarta-500.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/jakarta-600.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jakarta-700.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/jakarta-800.woff2) format("woff2")}

/* Layout concept: a lavender "playground" hero with soft moving blobs and
   floating exam badges, then wide white pages with colourful rounded panels.
   Heavy grotesk display type, pill-shaped everything. Light theme first. */
:root{
  --bg:#FFFFFF;
  --ink:#141015;
  --ink-2:#3F3945;
  --ink-3:#77707F;
  --line:rgba(20,16,21,.10);
  --lav:#C3B7EB;        /* hero panel */
  --lav-2:#D5CCF3;      /* blobs */
  --lav-3:#F3F0FC;      /* soft card ground */
  --pink:#EC3C8E;       /* the one loud accent: CTAs */
  --pink-2:#CF2775;
  --leaf:#2E8B57;
  --night:#17111C;
  --night-2:#2B1D33;
  --on-night:#F4EEF9;
  --on-night-2:rgba(244,238,249,.62);
  /* chip palette */
  --c-yellow:#F4EEA2;--c-mint:#86E9C1;--c-peach:#F8CFAF;--c-sky:#A6ECF6;--c-green:#2F7D3A;
  --c-lilac:#C9C5F8;--c-magenta:#C23BBE;--c-coral:#FF9F8A;--c-blue:#A7BFFF;

  --f-display:"Bricolage Grotesque","Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --f-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --t-sm:15px;--t-md:17px;--t-lg:clamp(18px,1.5vw,22px);--t-xl:clamp(22px,2vw,28px);
  --t-2xl:clamp(40px,5.6vw,84px);--t-3xl:clamp(58px,10.5vw,176px);
  --r-md:22px;--r-lg:32px;--r-xl:clamp(36px,5vw,72px);
  --wrap:1480px;
  --gutter:clamp(16px,3.2vw,48px);
  --ease:cubic-bezier(.22,.8,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink-2);font-family:var(--f-sans);font-size:var(--t-md);line-height:1.6;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
section[id],main[id]{scroll-margin-top:100px}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);margin:0;line-height:.98;letter-spacing:-.035em;text-wrap:balance;font-weight:800}
p{margin:0}
.serif,.hl{color:var(--pink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:10px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-weight:800;font-size:15px;color:var(--pink)}
.lead{font-size:var(--t-lg);color:var(--ink-2);max-width:60ch;line-height:1.5}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.glass{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.8)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background .25s,box-shadow .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-pink{background:var(--pink);color:#fff}
.btn-pink:hover{background:var(--pink-2)}
.btn-line{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-soft{background:var(--lav-3);color:var(--ink)}
.btn-sm{min-height:42px;padding:0 18px;font-size:15px}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- header (floating) ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gutter) 12px;transition:background .35s,box-shadow .35s,padding .35s}
.nav.scrolled{background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 1px 0 var(--line);padding-top:calc(env(safe-area-inset-top,0px) + 10px);padding-bottom:10px}
.nav-in{max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand img{width:52px;height:52px;border-radius:50%;background:#fff;padding:2px;box-shadow:0 6px 18px -6px rgba(40,20,70,.5)}
.brand .word{font-family:var(--f-display);font-weight:800;font-size:30px;letter-spacing:-.04em;line-height:1}
.brand .tag{font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.18em;line-height:1.15;text-transform:uppercase}
.pills{display:flex;gap:10px;list-style:none;margin:0 0 0 auto;padding:0}
.pill-link{display:inline-flex;align-items:center;gap:8px;height:56px;padding:0 24px;border-radius:999px;text-decoration:none;font-weight:700;font-size:19px;color:var(--ink);background:rgba(255,255,255,.82);box-shadow:0 8px 22px -10px rgba(40,20,70,.45),0 0 0 1px rgba(255,255,255,.9) inset;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,transform .2s}
.pill-link:hover{background:#fff;transform:translateY(-1px)}
.nav.scrolled .pill-link{background:#fff}
.nav.scrolled .pill-link:hover{background:var(--lav-3)}
.cta-split{display:inline-flex;flex:none;white-space:nowrap;height:56px;border-radius:14px;overflow:hidden;text-decoration:none;font-weight:800;font-size:18px;color:#fff;box-shadow:0 8px 22px -10px rgba(236,60,142,.8)}
.cta-split>span{display:flex;align-items:center;padding:0 24px;background:var(--pink)}
.cta-split i{display:flex;align-items:center;justify-content:center;width:52px;background:var(--pink);border-left:2px solid rgba(255,255,255,.35);font-style:normal;font-size:20px;transition:background .2s}
.cta-split:hover>span,.cta-split:hover i{background:var(--pink-2)}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.pill-note{display:inline-flex;align-items:center;gap:8px;height:56px;padding:0 22px;border-radius:999px;background:rgba(255,255,255,.82);box-shadow:0 8px 22px -10px rgba(40,20,70,.45);text-decoration:none;font-weight:700;font-size:17px;color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav.scrolled .pill-note{background:var(--lav-3)}
.pill-note b{width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center}
.pill-note b img{width:22px;height:22px;border-radius:50%}
.social{display:flex;gap:8px}
.soc{width:54px;height:54px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(20,16,21,.55);transition:transform .2s,background .2s}
.soc:hover{transform:translateY(-2px) rotate(-6deg)}
.soc svg{width:23px;height:23px}
.menu-btn{display:none;flex:none;width:52px;height:52px;border-radius:50%;border:0;background:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:#fff;border-radius:2px;position:relative;transition:transform .3s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.nav.open .menu-btn span{background:transparent}
.nav.open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
/* full-screen mobile menu (sibling of the header so the blur can't trap it) */
.sheet{position:fixed;inset:0;z-index:58;background:var(--lav);padding:calc(env(safe-area-inset-top,0px) + 96px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 24px);
  display:flex;flex-direction:column;gap:22px;overflow-y:auto;visibility:hidden;clip-path:circle(0 at calc(100% - 44px) 44px);transition:clip-path .6s var(--ease),visibility 0s .6s}
.sheet.open{visibility:visible;clip-path:circle(150% at calc(100% - 44px) 44px);transition:clip-path .7s var(--ease)}
.sheet-links{display:grid;gap:6px}
.sheet-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-radius:20px;background:rgba(255,255,255,.5);text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:clamp(24px,7vw,34px);letter-spacing:-.03em;color:var(--ink);opacity:0;transform:translateY(14px);transition:opacity .4s,transform .5s var(--ease),background .2s}
.sheet-links a:hover{background:#fff}
.sheet-links a i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:18px;background:var(--c,#fff)}
.sheet.open .sheet-links a{opacity:1;transform:none}
.sheet-links a:nth-child(1){--c:var(--c-yellow);transition-delay:.12s}.sheet-links a:nth-child(2){--c:var(--c-mint);transition-delay:.16s}
.sheet-links a:nth-child(3){--c:var(--c-peach);transition-delay:.2s}.sheet-links a:nth-child(4){--c:var(--c-sky);transition-delay:.24s}
.sheet-links a:nth-child(5){--c:var(--c-lilac);transition-delay:.28s}.sheet-links a:nth-child(6){--c:var(--c-coral);transition-delay:.32s}
.sheet-links a:nth-child(7){--c:var(--c-blue);transition-delay:.36s}.sheet-links a:nth-child(8){--c:var(--c-yellow);transition-delay:.4s}
.sheet-foot{display:grid;gap:10px;margin-top:auto}
.sheet-foot .btn{width:100%;min-height:58px;font-size:18px}
.sheet-foot .social{justify-content:center;margin-top:6px}
html.menu-open{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--lav);border-radius:0 0 var(--r-xl) var(--r-xl);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.blob{position:absolute;fill:var(--lav-2);will-change:transform}
.blob.b1{width:min(1300px,120vw);left:-18%;top:6%;animation:blobA 26s ease-in-out infinite alternate}
.blob.b2{width:min(1100px,110vw);right:-22%;top:-12%;animation:blobB 32s ease-in-out infinite alternate;opacity:.85}
.blob.b3{width:min(900px,90vw);left:30%;bottom:-40%;animation:blobC 30s ease-in-out infinite alternate;opacity:.7}
@keyframes blobA{to{transform:translate(6%,4%) rotate(14deg) scale(1.08)}}
@keyframes blobB{to{transform:translate(-8%,6%) rotate(-18deg) scale(.94)}}
@keyframes blobC{to{transform:translate(-6%,-8%) rotate(10deg) scale(1.1)}}
.floaters{position:absolute;inset:0}
.floater{position:absolute;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 20px 40px -18px rgba(60,40,110,.45);opacity:.9;animation:bob var(--dur,9s) ease-in-out var(--del,0s) infinite alternate;will-change:transform}
.floater img{width:72%;height:72%;object-fit:contain}
.floater .mono{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;color:var(--ink);font-size:calc(var(--s) * .26)}
.floater.dim{opacity:.45;filter:blur(1px)}
@keyframes bob{from{transform:translate(0,0) rotate(var(--r0,-6deg))}to{transform:translate(var(--dx,10px),var(--dy,-22px)) rotate(var(--r1,6deg))}}
.seal{position:absolute;right:max(var(--gutter),6%);top:30%;width:clamp(96px,9vw,140px);aspect-ratio:1;display:grid;place-items:center}
.seal svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.seal text{font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:2.4px;fill:#fff}
.seal img{width:46%;border-radius:50%;background:#fff;padding:3px}
.seal::before{content:"";position:absolute;inset:10%;border-radius:50%;border:3px solid #fff}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(18px,2.4vw,30px);padding-block:clamp(130px,17vh,200px) clamp(30px,4vw,56px)}
.hero h1{font-size:var(--t-3xl);line-height:.86;letter-spacing:-.055em;max-width:11ch}
.hero h1 .l2{display:block}
.hero .lead{text-align:center;font-size:clamp(18px,1.9vw,26px);font-weight:600;color:var(--ink);max-width:44ch;letter-spacing:-.01em}
.search{display:flex;width:min(860px,100%);height:clamp(58px,5.4vw,74px);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 18px 40px -24px rgba(60,40,110,.5)}
.search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:clamp(17px,1.4vw,21px);font-weight:600;color:var(--ink);padding:0 26px}
.search input::placeholder{color:var(--ink)}
.search button{width:clamp(58px,5.4vw,74px);border:0;background:var(--pink);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.search button:hover{background:var(--pink-2)}
.search:focus-within{box-shadow:0 0 0 3px var(--ink),0 18px 40px -24px rgba(60,40,110,.5)}
.proof{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.proof b{font-family:var(--f-display);font-size:20px;letter-spacing:-.02em}

/* "Pick your exam" label */
.pick-label{font-family:var(--f-display);font-weight:800;font-size:clamp(22px,2.2vw,32px);letter-spacing:-.03em;color:var(--ink);margin-top:clamp(10px,2vw,26px);margin-bottom:-10px}
.pick-label span{display:inline-block;color:var(--pink);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(5px)}}
.mentor-sub{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.2vw,30px);color:var(--ink);letter-spacing:-.02em;margin-top:-6px}
/* exam chip rail — the colourful list under the hero */
.rail-wrap{display:flex;align-items:center;gap:12px;width:min(1400px,100%)}
.rail-arrow{flex:none;width:56px;height:56px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:22px;transition:transform .2s}
.rail-arrow:hover{transform:scale(1.06)}
.rail{flex:1;min-width:0;background:#fff;border-radius:999px;padding:14px 16px 10px;overflow:hidden;position:relative}
.rail-track{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:14px 4px 4px;scroll-snap-type:x proximity}
.rail-track::-webkit-scrollbar{display:none}
.echip{--c:var(--c-lilac);--fg:var(--ink);position:relative;flex:none;display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 20px 0 8px;border-radius:999px;border:0;background:var(--c);color:var(--fg);font-weight:700;font-size:19px;letter-spacing:-.01em;cursor:pointer;scroll-snap-align:start;transition:transform .25s var(--ease),box-shadow .25s}
.echip:hover{transform:translateY(-3px)}
.echip[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}
.echip .ic{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.echip .ic img{width:80%;height:80%;object-fit:contain}
.echip .ic b{font-family:var(--f-display);font-size:11px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.echip .n{font-size:13px;font-weight:700;opacity:.6;font-variant-numeric:tabular-nums}
.echip::before{content:"";position:absolute;left:50%;top:-15px;width:18px;height:16px;margin-left:-9px;background:var(--c);filter:brightness(.82) saturate(1.4);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 16C9 10 7 5 1 3c5 0 8 3 8 8 0-6 3-10 8-11-4 3-6 8-6 16z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 16C9 10 7 5 1 3c5 0 8 3 8 8 0-6 3-10 8-11-4 3-6 8-6 16z'/%3E%3C/svg%3E") center/contain no-repeat}
.echip:nth-child(3n+2)::before{display:none}
.c-yellow{--c:var(--c-yellow)}.c-mint{--c:var(--c-mint)}.c-peach{--c:var(--c-peach)}.c-sky{--c:var(--c-sky)}
.c-green{--c:var(--c-green);--fg:#fff}.c-lilac{--c:var(--c-lilac)}.c-magenta{--c:var(--c-magenta);--fg:#fff}
.c-coral{--c:var(--c-coral)}.c-blue{--c:var(--c-blue)}.c-ink{--c:var(--ink);--fg:#fff}

/* ---------- section scaffolding ---------- */
.section{padding-block:clamp(80px,11vw,150px)}
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(34px,4vw,60px)}
.sec-head h2{font-size:var(--t-2xl)}
.sec-head.center{align-items:center;text-align:center}
.panel{border-radius:var(--r-xl);padding-block:clamp(60px,8vw,120px)}
.panel-peach{background:#FCE3D2}
.panel-mint{background:#D6F6E8}
.panel-lav{background:var(--lav-3)}
.bleed{margin-inline:clamp(8px,1.4vw,24px)}

/* ---------- courses ---------- */
.home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:clamp(18px,2vw,28px)}
.card{position:relative;border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;background:var(--lav-3);transition:transform .4s var(--ease),box-shadow .4s;animation:rise .6s var(--ease) both}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(60,40,110,.45)}
@keyframes rise{from{opacity:.001;transform:translateY(14px)}}
.card-media{position:relative;margin:12px 12px 0;border-radius:calc(var(--r-lg) - 10px);overflow:hidden;aspect-ratio:3/2;background:#ddd}
.card-media .bgblur{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(22px) saturate(1.2);opacity:.85}
.card-media .fg{position:relative;width:100%;height:100%;object-fit:contain;transition:transform .7s var(--ease)}
.card:hover .card-media .fg{transform:scale(1.03)}
.card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.card-body h4{font-size:clamp(26px,2.2vw,32px);letter-spacing:-.035em}
.card-body .tag{font-size:var(--t-md);color:var(--ink-2)}
.meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cat{font-size:14px;font-weight:700;color:var(--ink-3)}
.badge{padding:5px 12px;border-radius:999px;font-size:13px;font-weight:800;background:var(--pink);color:#fff}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tagp{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:4px 10px 4px 4px;border-radius:999px;background:var(--c);color:var(--fg,var(--ink))}
.tagp i{width:20px;height:20px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-size:8px;font-weight:800;font-family:var(--f-display);color:var(--ink);overflow:hidden}
.tagp i img{width:80%;height:80%;object-fit:contain}
.bestfor{font-size:14px;color:var(--ink-3)}
.bestfor b{color:var(--ink-2)}
.price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:2px dashed var(--line)}
.price{font-family:var(--f-display);font-size:38px;font-weight:800;color:var(--ink);letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.mrp{color:var(--ink-3);text-decoration:line-through;font-weight:600;font-variant-numeric:tabular-nums}
.off{font-size:13px;font-weight:800;color:var(--leaf);background:rgba(46,139,87,.12);padding:4px 10px;border-radius:999px}
.code{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);flex-wrap:wrap}
.code b{font-family:var(--f-mono);font-size:14px;letter-spacing:.08em;color:var(--ink);background:#fff;border:2px dashed var(--pink);padding:3px 10px;border-radius:8px;cursor:copy}
.card-actions{display:flex;gap:10px}
.card-actions .btn{flex:1}
.card.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;background:var(--ink)}
.card.wide{align-items:stretch}
.card.wide .card-media{margin:14px;aspect-ratio:auto;min-height:380px}
.card.wide .card-body{padding:clamp(24px,3vw,44px) clamp(24px,3vw,44px) clamp(24px,3vw,44px) 14px;color:var(--on-night)}
.card.wide h4{font-size:clamp(40px,4.6vw,72px);color:#fff}
.card.wide .tag,.card.wide .bestfor,.card.wide .code{color:var(--on-night-2)}
.card.wide .bestfor b{color:var(--on-night)}
.card.wide .cat{color:var(--on-night-2)}
.card.wide .price{color:#fff}
.card.wide .price-row{border-color:rgba(255,255,255,.18)}
.card.wide .ticks li{color:var(--on-night)}
.card.wide .btn-soft{background:rgba(255,255,255,.12);color:#fff}
.card.wide .ticks{grid-template-columns:1fr 1fr;gap:10px 18px;font-size:var(--t-sm)}
.empty{padding:50px;border-radius:var(--r-lg);text-align:center;color:var(--ink-3);background:var(--lav-3)}
.loading{padding:60px 0;text-align:center;color:var(--ink-3)}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* dialogs */
dialog.details,dialog.video{border:none;padding:0;width:100%;background:transparent;max-height:calc(100dvh - 40px)}
dialog.details{max-width:min(720px,calc(100vw - 32px))}
dialog.video{max-width:min(1100px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(20,16,21,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog[open]{animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.97)}}
.dlg{background:#fff;border-radius:var(--r-lg);overflow:auto;max-height:calc(100dvh - 40px)}
.dlg-body{padding:24px 30px 30px;display:flex;flex-direction:column;gap:16px}
.dlg-body h3{font-size:clamp(34px,4vw,48px)}
.dlg-close{position:sticky;top:12px;float:right;margin:12px 12px -56px 0;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;font-size:22px;line-height:1}
.vframe{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:#000}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- who is this for ---------- */
.who{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(20px,2.4vw,36px);align-items:start}
.personas{display:grid;gap:10px}
.persona{display:flex;align-items:center;gap:16px;text-align:left;padding:16px 20px;border-radius:999px;cursor:pointer;background:rgba(255,255,255,.55);border:0;transition:background .3s,transform .3s var(--ease)}
.persona:hover{background:#fff}
.persona[aria-selected="true"]{background:var(--ink);color:#fff;transform:translateX(8px)}
.persona .ico{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--c-peach);color:var(--ink)}
.persona:nth-child(2) .ico{background:var(--c-mint)}.persona:nth-child(3) .ico{background:var(--c-sky)}.persona:nth-child(4) .ico{background:var(--c-yellow)}.persona:nth-child(5) .ico{background:var(--c-lilac)}.persona:nth-child(6) .ico{background:var(--c-coral)}
.persona .ico svg{width:24px;height:24px}
.persona b{display:block;font-family:var(--f-display);font-size:24px;letter-spacing:-.03em;line-height:1.1;color:inherit}
.persona span{font-size:var(--t-sm);opacity:.7}
.persona[aria-selected="true"] b{color:#fff}
.who-panel{border-radius:var(--r-lg);padding:clamp(24px,3vw,44px);display:grid;gap:22px;background:#fff}
.who-panel .situ{font-family:var(--f-display);font-size:clamp(28px,3vw,44px);color:var(--ink);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.who-anim{animation:whoIn .55s var(--ease) both}
@keyframes whoIn{from{opacity:0;transform:translateY(12px);filter:blur(4px)}}
.k-label{font-family:var(--f-display);font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.rec.first{background:#FFF0F7;box-shadow:inset 0 0 0 2px var(--pink)}
.rec{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:center;padding:12px;border-radius:var(--r-md);background:var(--lav-3)}
.rec img{border-radius:14px;aspect-ratio:3/2;object-fit:cover;width:100%}
.rec .k{display:inline-block;font-size:12px;font-weight:800;color:#fff;background:var(--pink);padding:3px 10px;border-radius:999px}
.rec h4{font-size:26px;margin-block:4px 8px}
.rec .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* ---------- how to buy ---------- */
.buy{overflow-x:clip}
.buy-track{height:calc(var(--steps,6) * 70vh + 100vh)}
.buy-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.buy-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,6vw,110px);align-items:center;width:100%}
.buy-left .sec-head{margin-bottom:26px}
.buy-left .sec-head h2{font-size:clamp(34px,3.4vw,56px)}
.buy-left .sec-head{gap:12px}
.buy-left .sec-head .lead{font-size:17px}
.buy-stick{padding-top:70px}
.steps{list-style:none;margin:0;padding:0 0 0 34px;position:relative;display:grid;gap:4px}
.steps::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:3px;background:var(--line);border-radius:3px}
.steps .rail-fill{position:absolute;left:11px;top:14px;width:3px;height:calc((100% - 28px) * var(--p,0));background:var(--pink);border-radius:3px}
.step{position:relative;padding:8px 16px;border-radius:18px;cursor:pointer;transition:background .35s,opacity .35s;opacity:.45}
.step::before{content:"";position:absolute;left:-29px;top:19px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--line);transition:all .35s var(--ease)}
.step.done{opacity:.75}
.step.done::before{background:var(--pink);border-color:var(--pink)}
.step.on{opacity:1;background:var(--lav-3)}
.step.on::before{background:var(--pink);border-color:var(--pink);box-shadow:0 0 0 7px rgba(236,60,142,.18);transform:scale(1.15)}
.step .num{font-size:13px;font-weight:800;color:var(--pink)}
.step b{display:block;font-family:var(--f-display);color:var(--ink);font-size:21px;letter-spacing:-.03em;line-height:1.15}
.step p{font-size:var(--t-sm);max-height:0;overflow:hidden;transition:max-height .45s var(--ease),margin .45s}
.step.on p{max-height:90px;margin-top:4px}
.buy-help{margin-top:18px;font-size:var(--t-sm);color:var(--ink-3)}
.buy-help a{color:var(--pink);font-weight:700}
.phone-wrap{position:relative;display:grid;place-items:center}
.phone-glow{position:absolute;width:130%;max-width:96vw;height:90%;border-radius:50%;background:radial-gradient(closest-side,var(--lav),transparent)}
.phone{position:relative;width:310px;height:640px;border-radius:48px;padding:11px;background:var(--ink);box-shadow:0 50px 90px -40px rgba(40,20,70,.6)}
.screen{position:relative;height:100%;border-radius:38px;overflow:hidden;background:#fff}
.notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:var(--ink);z-index:9}
.scr{position:absolute;inset:0;padding:54px 16px 18px;display:flex;flex-direction:column;gap:10px;opacity:0;visibility:hidden;transform:translateX(30px);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .6s;font-size:13px;color:var(--ink-2)}
.scr.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.scr.out{transform:translateX(-30px)}
.ph-top{display:flex;align-items:center;justify-content:space-between;color:var(--ink);font-family:var(--f-display);font-weight:800;font-size:18px;letter-spacing:-.02em}
.ph-top small{font-family:var(--f-sans);font-weight:600;color:var(--ink-3);font-size:11px;letter-spacing:0}
.ph-card{display:flex;gap:10px;align-items:center;padding:8px;border-radius:14px;background:var(--lav-3);border:2px solid transparent;transition:transform .3s var(--ease),border-color .3s}
.ph-card img{width:82px;aspect-ratio:3/2;object-fit:cover;border-radius:9px}
.ph-card b{display:block;color:var(--ink);font-size:13px;line-height:1.2}
.ph-card span{font-size:12px;color:var(--pink);font-weight:800}
.ph-hero{border-radius:16px;overflow:hidden;aspect-ratio:3/2}
.ph-hero img{width:100%;height:100%;object-fit:cover}
.ph-title{font-family:var(--f-display);font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.05}
.ph-list{display:grid;gap:6px;font-size:12px}
.ph-list div{display:flex;gap:8px;align-items:center}
.ph-list div::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink);flex:none}
.ph-btn{margin-top:auto;height:48px;border-radius:14px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;gap:4px;font-weight:800;font-size:14px;position:relative;overflow:hidden}
.ph-btn.pink{background:var(--pink)}
.ph-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);font-variant-numeric:tabular-nums}
.ph-row.total{border-bottom:none;font-size:17px;font-weight:800;color:var(--ink)}
.ph-row .minus{color:var(--leaf);font-weight:700}
.coupon{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:2px dashed var(--pink);background:#FFF2F8}
.coupon .cd{font-family:var(--f-mono);font-weight:800;letter-spacing:.1em;color:var(--pink);overflow:hidden;white-space:nowrap;width:0;border-right:2px solid var(--pink)}
.coupon .ok{margin-left:auto;font-size:11px;font-weight:800;color:#fff;background:var(--leaf);padding:3px 8px;border-radius:999px;transform:scale(0);opacity:0}
.field{display:grid;gap:4px}
.field label{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.field .in{height:42px;border-radius:11px;border:2px solid var(--line);background:#fff;display:flex;align-items:center;padding:0 12px;color:var(--ink);font-weight:600}
.field .in .t{overflow:hidden;white-space:nowrap;width:0}
.pay-sheet{margin-top:auto;border-radius:20px 20px 16px 16px;background:#fff;border:2px solid var(--line);padding:14px;display:grid;gap:8px;box-shadow:0 -12px 30px -16px rgba(20,16,21,.3);transform:translateY(110%)}
.pay-opt{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;border:2px solid var(--line);font-weight:700;color:var(--ink)}
.pay-opt i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);flex:none}
.pay-opt.sel{border-color:var(--pink);background:#FFF2F8}
.pay-opt.sel i{border:5px solid var(--pink)}
.pay-opt small{margin-left:auto;font-weight:600;color:var(--ink-3);font-size:11px}
.pay-done{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.94);opacity:0;pointer-events:none}
.pay-done svg{width:100px;height:100px}
.pay-done .ring{fill:none;stroke:var(--line);stroke-width:6}
.pay-done .arc{fill:none;stroke:var(--leaf);stroke-width:6;stroke-linecap:round;stroke-dasharray:280;stroke-dashoffset:280;transform:rotate(-90deg);transform-origin:50% 50%}
.pay-done .tick{fill:none;stroke:var(--leaf);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60}
.done-hero{text-align:center;display:grid;gap:4px;margin-top:16px}
.done-hero .big{font-family:var(--f-display);font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.04em}
.done-hero .sub{font-weight:700;color:var(--pink)}
.dash-card{border-radius:16px;overflow:hidden;background:var(--lav-3)}
.dash-card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.dash-card>div:not(.class-vid){padding:10px 12px;display:flex;justify-content:space-between;align-items:center}
.dash-card b{color:var(--ink)}
.bar{height:7px;border-radius:7px;background:#fff;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--pink);border-radius:7px}
.tap{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:rgba(20,16,21,.18);border:3px solid #fff;box-shadow:0 6px 16px rgba(20,16,21,.25);opacity:0;pointer-events:none;z-index:8}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:38%;left:50%;width:8px;height:12px;border-radius:2px;opacity:0}
.scr.play .tap{animation:tap 1.1s var(--ease) var(--td,1s) both}
@keyframes tap{0%{opacity:0;transform:scale(1.6)}30%{opacity:1;transform:scale(1)}55%{transform:scale(.8)}100%{opacity:0;transform:scale(1.3)}}
.scr.play .ph-card.pick{animation:pick .9s var(--ease) 1.25s both}
@keyframes pick{50%{transform:scale(.96)}100%{transform:scale(1.02);border-color:var(--pink)}}
.scr.play .stagger>*{animation:rise .55s var(--ease) both}
.scr.play .stagger>*:nth-child(2){animation-delay:.08s}.scr.play .stagger>*:nth-child(3){animation-delay:.16s}.scr.play .stagger>*:nth-child(4){animation-delay:.24s}
.scr.play .ph-btn.press{animation:press .6s var(--ease) 1.5s both}
@keyframes press{40%{transform:scale(.95);filter:brightness(1.2)}100%{transform:none}}
.scr.play .coupon .cd{animation:type 1s steps(8) .7s both,caret .7s step-end 0s 4}
@keyframes type{to{width:var(--cw,8ch)}}
@keyframes caret{50%{border-color:transparent}}
.scr.play .coupon .ok{animation:okpop .5s var(--ease) 1.9s both}
@keyframes okpop{to{transform:none;opacity:1}}
.scr.play .ph-row.disc{animation:rise .5s var(--ease) 2.1s both}
.scr.play .field .in .t{animation:type2 1.1s steps(var(--n,14)) var(--td,.5s) both}
@keyframes type2{to{width:var(--w,14ch)}}
.scr.play .field .in{animation:focusin .9s var(--ease) var(--td,.5s) both}
@keyframes focusin{0%,100%{border-color:var(--line)}10%,90%{border-color:var(--pink)}}
.scr.play .pay-sheet{animation:sheet .7s var(--ease) .3s both}
@keyframes sheet{to{transform:none}}
.scr.play .pay-done{animation:fadein .3s ease 2.4s both}
@keyframes fadein{to{opacity:1}}
.scr.play .pay-done .arc{animation:arc 1s var(--ease) 2.5s both}
@keyframes arc{to{stroke-dashoffset:0}}
.scr.play .pay-done .tick{animation:arc .45s var(--ease) 3.4s both}
.scr.play .done-hero{animation:rise .7s var(--ease) .2s both}
.scr.play .bar i{animation:fill 2s var(--ease) 1.2s both}
@keyframes fill{to{width:24%}}
.scr.play .confetti i{animation:burst 1.6s cubic-bezier(.15,.7,.3,1) var(--d,0s) both}
@keyframes burst{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
/* glowing stage behind the devices */
.dev-glow{position:absolute;left:50%;top:54%;width:min(760px,100vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:conic-gradient(from 0deg,#EC3C8E,#C3B7EB,#86E9C1,#F4EEA2,#A6ECF6,#EC3C8E);filter:blur(70px);opacity:.55;animation:glowspin 9s linear infinite;pointer-events:none;z-index:0}
@keyframes glowspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.device-wrap>.phone-wrap,.device-wrap>.laptop-wrap{z-index:1}
.phone,.lid{animation:edgeglow 2.8s ease-in-out infinite}
@keyframes edgeglow{0%,100%{box-shadow:0 50px 90px -40px rgba(40,20,70,.6),0 0 0 0 rgba(236,60,142,0),0 0 30px 0 rgba(236,60,142,.25)}50%{box-shadow:0 50px 90px -40px rgba(40,20,70,.6),0 0 0 4px rgba(236,60,142,.35),0 0 60px 6px rgba(236,60,142,.45)}}
/* classroom video that appears after payment */
.class-vid{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.class-vid video{width:100%;height:100%;object-fit:cover;display:block}
.live-tag{position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:#fff;background:rgba(20,16,21,.8);padding:3px 8px;border-radius:999px}
.live-tag i{width:7px;height:7px;border-radius:50%;background:#ff4b4b;animation:blink2 1s steps(2) infinite}
@keyframes blink2{50%{opacity:0}}
.scr .dash-card{opacity:0;transform:scale(.9) translateY(14px)}
.scr.play .dash-card{animation:vidin .8s cubic-bezier(.2,1.4,.4,1) 1.3s both}
@keyframes vidin{to{opacity:1;transform:none}}
.lscr .dash-card{align-self:center}
/* device switch + laptop mockup */
.device-wrap{display:grid;justify-items:center;gap:18px;position:relative}
.dev-toggle{display:inline-flex;padding:5px;border-radius:999px;background:var(--lav-3);gap:4px;position:relative;z-index:2}
.dev-toggle button{border:0;background:transparent;padding:10px 22px;border-radius:999px;font-weight:800;font-size:15px;color:var(--ink-2);cursor:pointer;transition:background .25s,color .25s}
.dev-toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
.device-wrap[data-show="laptop"] .phone-wrap,.device-wrap[data-show="phone"] .laptop-wrap{display:none}
.laptop-wrap{position:relative;width:calc(868px * var(--ls,1));height:calc(560px * var(--ls,1))}
.laptop-wrap::before{content:"";position:absolute;left:-5%;top:5%;width:110%;height:90%;border-radius:50%;background:radial-gradient(closest-side,var(--lav),transparent);max-width:96vw}
.laptop{position:absolute;top:0;left:calc(44px * var(--ls,1));width:780px;transform:scale(var(--ls,1));transform-origin:top left}
.lid{border-radius:22px 22px 8px 8px;background:var(--ink);padding:14px 14px 18px;box-shadow:0 40px 80px -40px rgba(40,20,70,.65)}
.lscreen{border-radius:10px;overflow:hidden;background:#fff;height:456px;display:flex;flex-direction:column}
.lbar{flex:none;display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#F1EEF8;border-bottom:1px solid var(--line)}
.lbar i{width:9px;height:9px;border-radius:50%;background:#E9A0B8}.lbar i:nth-child(2){background:#F4D58A}.lbar i:nth-child(3){background:#9ED9B5}
.lurl{margin-left:14px;flex:1;max-width:340px;height:20px;border-radius:999px;background:#fff;font-size:11px;color:var(--ink-3);display:flex;align-items:center;padding:0 12px}
.lview{position:relative;flex:1}
.lbase{height:16px;margin:0 -44px;border-radius:0 0 22px 22px;background:linear-gradient(#D9D4E6,#B9B2CC);position:relative}
.lbase::before{content:"";position:absolute;left:50%;top:0;width:120px;height:7px;margin-left:-60px;border-radius:0 0 8px 8px;background:#A69EBD}
.scr.lscr{padding:16px 22px 18px;gap:12px;font-size:13px}
.l-head{display:flex;align-items:center;gap:18px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-3);font-weight:600}
.l-head b{font-family:var(--f-display);font-size:16px;color:var(--ink);margin-right:auto;letter-spacing:-.02em}
.l-title{font-family:var(--f-display);font-weight:800;font-size:24px;color:var(--ink);letter-spacing:-.03em}
.l-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.l-card{border-radius:14px;background:var(--lav-3);padding:8px;display:grid;gap:6px;border:2px solid transparent}
.l-card img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:9px}
.l-card b{color:var(--ink);font-size:13px;line-height:1.2}
.l-card span{color:var(--pink);font-weight:800;font-size:12px}
.scr.play .l-card.pick{animation:pick .9s var(--ease) 1.25s both}
.l-two{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;flex:1;min-height:0}
.l-box{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;background:var(--lav-3)}
.lscr .ph-hero{aspect-ratio:auto;height:100%;max-height:330px}
.lscr .field .in .t{max-width:none}
.dots{display:none;gap:6px;justify-content:center;margin-top:8px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:all .3s}
.dots i.on{width:24px;border-radius:6px;background:var(--pink)}

/* ---------- success stories ---------- */
.st-track{height:520vh}
.st-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--lav-3)}
.st-night{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,var(--night-2),var(--night) 70%);opacity:0}
.st-head{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:min(92vw,1100px);display:grid;gap:14px;z-index:3;pointer-events:none}
.st-head h2{font-size:clamp(44px,7vw,110px);letter-spacing:-.05em;line-height:.9}
.tiles{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2}
.tile{position:absolute;left:0;top:0;width:var(--tw);height:var(--th);margin:calc(var(--th) / -2) 0 0 calc(var(--tw) / -2);border-radius:14px;overflow:hidden;background:var(--lav-2);box-shadow:0 12px 26px -12px rgba(60,40,110,.5),0 0 0 2px #fff;will-change:transform,opacity;cursor:pointer;padding:0;border:0}
.tile img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:filter .4s}
.tile:hover img,.tile.hl img{filter:none}
.st-cap{position:absolute;left:50%;bottom:clamp(30px,8vh,80px);transform:translateX(-50%);z-index:4;text-align:center;font-size:var(--t-sm);color:var(--ink-2);min-height:44px;transition:opacity .3s}
.st-cap b{display:block;font-family:var(--f-display);color:var(--ink);font-size:22px;letter-spacing:-.02em}
.voice-photo{position:absolute;left:50%;top:50%;z-index:5;overflow:hidden;opacity:0;will-change:transform,opacity;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.voice-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease}
.voice-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--night) 0%,transparent 40%);opacity:var(--fade,0)}
.voices{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;color:var(--on-night)}
.voices.live{pointer-events:auto}
.voices-word{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-family:var(--f-display);font-weight:800;font-size:clamp(110px,24vw,380px);line-height:1;color:rgba(244,238,249,.06);white-space:nowrap;pointer-events:none;letter-spacing:-.06em}
.voices h2{position:absolute;left:50%;top:clamp(80px,13vh,140px);transform:translateX(-50%);color:var(--on-night);font-size:clamp(36px,4.6vw,66px);text-align:center;width:90vw}
.voices h2 .hl{color:#FF8CC0}
.v-text{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(40px,9vh,90px);width:min(620px,90vw);text-align:center;display:grid;gap:8px}
.v-quote{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1.2;letter-spacing:-.02em;color:var(--on-night)}
.v-name{font-size:var(--t-sm);color:var(--on-night-2)}
.v-name b{color:var(--on-night)}
.v-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:8px}
.v-nav button{width:46px;height:46px;border-radius:50%;border:0;background:var(--pink);color:#fff;cursor:pointer;font-size:20px;transition:transform .2s}
.v-nav button:hover{transform:scale(1.08)}
.v-count{font-size:13px;letter-spacing:.14em;color:var(--on-night-2);font-variant-numeric:tabular-nums;min-width:64px}
.v-swap{animation:vswap .6s var(--ease)}
@keyframes vswap{from{opacity:0;transform:translateY(8px)}}

/* ---------- mentor ---------- */
.mentor{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,6vw,100px);align-items:center}
.arch-wrap{position:relative;max-width:min(520px,88%);width:100%;margin-inline:auto}
.arch-wrap::before{content:"";position:absolute;inset:6% -6% -4% 6%;border-radius:999px 999px var(--r-lg) var(--r-lg);background:var(--lav)}
.arch{position:relative;border-radius:999px 999px var(--r-lg) var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--lav-2)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:top}
.mentor-copy{display:grid;gap:22px}
.mentor-copy h2{font-size:var(--t-2xl)}
.mentor-copy p{font-size:var(--t-lg)}
.creds{display:flex;flex-wrap:wrap;gap:8px}
.creds span{font-weight:700;font-size:14px;padding:7px 14px;border-radius:999px;background:var(--lav-3);color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.stat{padding:18px;border-radius:var(--r-md);background:var(--c,var(--c-yellow))}
.stat:nth-child(2){--c:var(--c-mint)}.stat:nth-child(3){--c:var(--c-peach)}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(28px,3vw,44px);color:var(--ink);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:14px;font-weight:600;color:var(--ink-2)}

/* ---------- youtube ---------- */
.yt-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,50px)}
.yt-head h2{font-size:var(--t-2xl)}
.yt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.yt-card{display:flex;flex-direction:column;gap:12px;text-align:left;background:transparent;border:0;padding:0;cursor:pointer;text-decoration:none;color:inherit}
.yt-thumb{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;background:var(--ink)}
.yt-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.yt-card:hover .yt-thumb img{transform:scale(1.05)}
.yt-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--pink);display:grid;place-items:center;color:#fff;box-shadow:0 10px 30px -8px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.yt-card:hover .yt-play{transform:scale(1.12)}
.yt-title{font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-.02em;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-date{font-size:14px;color:var(--ink-3)}
.yt-empty{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;padding:clamp(24px,3vw,40px);border-radius:var(--r-lg);background:#fff}
.yt-empty .big-play{width:84px;height:84px;border-radius:50%;background:var(--pink);display:grid;place-items:center;color:#fff}
.yt-empty h3{font-size:clamp(26px,2.6vw,36px)}

/* ---------- blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.post{position:relative;display:flex;flex-direction:column;gap:18px;min-height:250px;padding:26px 26px 24px;border-radius:var(--r-lg);background:var(--c,var(--c-lilac));color:var(--fg,var(--ink));text-decoration:none;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.post:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 30px 50px -30px rgba(40,20,70,.45)}
.post .pcat{align-self:flex-start;font-size:13px;font-weight:800;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.75);color:var(--ink)}
.post h3{font-size:clamp(24px,2vw,30px);letter-spacing:-.03em;line-height:1.08;color:inherit}
.post .pfoot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700}
.post .pgo{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:18px;position:relative;z-index:1;transition:transform .3s var(--ease)}
.post:hover .pgo{transform:rotate(-45deg)}
.post.big{grid-row:span 2;min-height:520px}
.post.big h3{font-size:clamp(34px,3.4vw,54px)}
.post.c-green .pgo,.post.c-magenta .pgo{background:#fff;color:var(--ink)}
.post>*{position:relative;z-index:1}
.post::after{content:"";position:absolute;right:-90px;bottom:-90px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.22);pointer-events:none}

/* ---------- app ---------- */
.app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(30px,6vw,100px);align-items:center}
.app h2{font-family:var(--f-display);font-size:clamp(46px,6vw,96px);text-transform:uppercase;letter-spacing:-.04em;line-height:.9}
.app h2 .hl{display:block}
.app .lead{color:var(--ink-3)}
.app .ticks li{font-size:var(--t-md);color:var(--ink-2)}
.app .ticks li::before{background-color:transparent;background-image:none;content:"✓";color:var(--pink);font-weight:800;width:auto;height:auto;margin:0}
.store-btns{display:flex;flex-wrap:wrap;gap:12px}
.store-btn{display:inline-flex;align-items:center;gap:12px;padding:12px 22px;border-radius:14px;background:var(--ink);color:#fff;text-decoration:none;transition:transform .2s}
.store-btn:hover{transform:translateY(-2px)}
.store-btn svg{width:24px;height:24px}
.store-btn small{display:block;font-size:11px;opacity:.75;line-height:1.1}
.store-btn b{display:block;font-size:18px;line-height:1.15}
.app-shot{border-radius:var(--r-lg);overflow:hidden;background:#000;aspect-ratio:3/4;max-width:560px;width:100%;justify-self:center;box-shadow:0 40px 80px -40px rgba(20,16,21,.6)}
.app-shot img{width:100%;height:100%;object-fit:cover}

/* ---------- faq ---------- */
.faq{max-width:980px;margin-inline:auto;display:grid;gap:12px}
.faq details{border-radius:var(--r-md);padding:0 26px;background:var(--lav-3);transition:background .3s}
.faq details[open]{background:var(--c-yellow)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font-family:var(--f-display);font-weight:700;color:var(--ink);font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:400;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;max-width:70ch;font-size:var(--t-md)}

/* ---------- final cta ---------- */
.final{border-radius:var(--r-xl);padding:clamp(40px,6vw,90px);background:var(--pink);color:#fff;display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:30px;align-items:center;position:relative;overflow:hidden}
.final h2{font-size:clamp(46px,6.6vw,110px);color:#fff;letter-spacing:-.05em}
.final p{font-size:var(--t-lg);opacity:.92;max-width:44ch}
.final .btn-ink{background:var(--ink)}
.final .btn-line{border-color:#fff;background:transparent;color:#fff}
.final-actions{display:grid;gap:12px;justify-items:start}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.62);padding-block:80px 30px;overflow:hidden;margin-top:clamp(60px,8vw,120px);border-radius:var(--r-xl) var(--r-xl) 0 0}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:30px}
.foot h5{margin:0 0 14px;font-family:var(--f-display);font-size:20px;letter-spacing:-.02em;color:#fff;font-weight:800}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:var(--t-sm)}
.foot a{text-decoration:none;transition:color .2s}
.foot a:hover{color:#fff}
.foot .brand{color:#fff}
.foot-blurb{font-size:var(--t-sm);margin-top:14px;max-width:34ch}
.foot .social{margin-top:18px}
.foot .soc{background:rgba(255,255,255,.1)}

.wordmark{font-family:var(--f-display);font-size:clamp(64px,15vw,260px);font-weight:800;letter-spacing:-.065em;line-height:.85;color:var(--lav);margin:70px 0 26px;white-space:nowrap}
/* 0 to ∞ */
.zi{position:relative;display:flex;align-items:flex-end;gap:clamp(10px,2vw,30px);margin:-6px 0 34px;height:clamp(150px,20vw,300px);user-select:none}
.zi-0,.zi-hop{font-family:var(--f-display);font-weight:800;font-size:clamp(90px,14vw,230px);line-height:.8;color:var(--lav);letter-spacing:-.05em}
.zi-0{transition:opacity .4s}
.zi.go .zi-0{opacity:.25}
.zi-mid{position:relative;flex:1;height:100%;min-width:70px}
.zi-to{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--f-display);font-weight:700;font-size:clamp(22px,3vw,44px);color:rgba(255,255,255,.55);letter-spacing:-.02em}
.zi-step{position:absolute;bottom:0;width:clamp(36px,5vw,70px);border-radius:12px 12px 0 0;background:linear-gradient(var(--pink),rgba(236,60,142,.15));opacity:.9}
.zi-step b{position:absolute;left:0;right:0;top:-1.6em;text-align:center;font-size:clamp(12px,1.2vw,16px);color:rgba(255,255,255,.7);font-weight:800}
.zi-inf{flex:none;width:clamp(110px,26vw,420px);align-self:center}
.zi-inf svg{width:100%;height:auto;overflow:visible}
.zi-inf .lem{fill:none;stroke:url(#ziGrad);stroke-width:16;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 14px rgba(236,60,142,.55))}
.zi-inf .lem.draw{animation:lemdraw 1.3s cubic-bezier(.6,0,.2,1) both}
@keyframes lemdraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.zi-hop{position:absolute;left:0;bottom:0;opacity:0;pointer-events:none;will-change:transform;z-index:2;transform-origin:50% 100%}
.zi-spark{position:absolute;width:10px;height:10px;border-radius:50%;pointer-events:none;z-index:3}
@media (max-width:600px){.zi{gap:8px}.zi-step b{display:none}}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;border-top:1px solid rgba(255,255,255,.14);padding-top:18px}

/* ---------- enrolment toast ---------- */
.enrol{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:12px;max-width:min(380px,calc(100vw - 32px));padding:12px 44px 12px 12px;border-radius:20px;background:#fff;box-shadow:0 20px 50px -20px rgba(20,16,21,.45),0 0 0 1px var(--line);transform:translateY(140%);opacity:0;transition:transform .6s var(--ease),opacity .4s}
.enrol.show{transform:none;opacity:1}
.enrol .av{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--ink);background:var(--c-mint)}
.enrol p{font-size:14px;line-height:1.35;color:var(--ink-2)}
.enrol p b{color:var(--ink)}
.enrol small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.enrol .x{position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;border:0;background:var(--lav-3);cursor:pointer;font-size:15px;line-height:1;color:var(--ink)}

/* ---------- store page ---------- */
.store-hero .hero-in{padding-bottom:clamp(30px,4vw,50px)}
.store-hero h1{font-size:clamp(56px,9vw,150px)}
.group{margin-top:clamp(40px,5vw,70px)}
.group:first-of-type{margin-top:0}
.group-head{display:flex;align-items:baseline;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.group-head h3{font-size:clamp(30px,3vw,44px)}
.group-head .count{font-size:var(--t-sm);color:var(--ink-3);font-weight:600}
.group-head .rule{flex:1;height:2px;background:var(--line);align-self:center;min-width:40px}

/* ---------- reveal ---------- */
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.pre{opacity:.001;transform:translateY(28px)}

/* ---------- responsive ---------- */
@media (max-width:1500px){.pill-note{display:none}}
.pill-note{white-space:nowrap}
@media (max-width:340px){.brand .word{display:none}}
@media (max-width:1280px){
  .pills{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:1120px){
  .card.wide .card-media{min-height:0;aspect-ratio:3/2}
  .pills{display:none}
  .menu-btn{display:inline-flex}
  .nav,.nav.scrolled{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 0}
  .nav-in{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:999px;padding:7px 7px 7px 10px;box-shadow:0 12px 34px -18px rgba(40,20,70,.5);gap:10px}
  .nav.open .nav-in{background:#fff}
  .nav-right{gap:8px}
  .home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card.wide{grid-template-columns:1fr}
  .card.wide .card-body{padding:22px 24px 26px}
  .who,.mentor,.app,.final{grid-template-columns:1fr}
  .yt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post.big{grid-row:auto;grid-column:1/-1;min-height:300px}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-top>div:first-child{grid-column:1/-1}
}
@media (max-width:820px){
  .nav .social,.nav .tag{display:none}
  .cta-split>span{padding:0 16px}
  .cta-split i{width:44px}
  .seal{display:none}
  .buy-track{height:calc(var(--steps,6) * 60vh + 100vh)}
  .buy-stick{align-items:flex-start;padding-top:calc(env(safe-area-inset-top,0px) + 84px + var(--offer-h))}
  .buy-grid{grid-template-columns:1fr;gap:12px;justify-items:center}
  .buy-left{width:100%}
  .buy-left .sec-head{margin-bottom:10px;align-items:center;text-align:center}
  .buy-left .sec-head h2{font-size:32px}
  .buy-left .sec-head .lead{display:none}
  .steps{padding:0;display:flex;justify-content:center}
  .steps::before,.steps .rail-fill,.step::before{display:none}
  .step{display:none;text-align:center;background:none!important;padding:4px 0}
  .step.on{display:block}
  .step.on p{max-height:none}
  .buy-help{display:none}
  .device-wrap{gap:10px}
  .dev-toggle button{padding:8px 18px;font-size:14px}
  .phone{transform:scale(var(--ps,.8));transform-origin:top center;margin-bottom:calc(640px * (var(--ps,.8) - 1))}
  .dots{display:flex}
  .rail-arrow{width:44px;height:44px}
  .rail-arrow.next{display:none}
  .yt-empty{grid-template-columns:1fr;justify-items:start}
}
@media (max-width:600px){
  .floater{opacity:.35}
  .brand .word{font-size:21px}
  .brand img{width:40px;height:40px}
  .cta-split{height:44px;font-size:15px;border-radius:999px}
  .cta-split .long{display:none}
  .cta-split i{width:38px;font-size:16px}
  .menu-btn{width:44px;height:44px}
  .home-grid,.grid,.yt-grid,.blog-grid{grid-template-columns:1fr}
  .post{min-height:200px}
  .personas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .persona>span:last-child{min-width:0}
  .persona{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px;border-radius:22px}
  .persona[aria-selected="true"]{transform:none}
  .persona b{font-size:19px}
  .persona .ico{width:40px;height:40px}
  .rec{grid-template-columns:1fr}
  .card.wide .ticks{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .stat{padding:12px;min-width:0}
  .stat b{font-size:22px}
  .rail{padding:12px 10px 8px}
  .echip{height:44px;font-size:16px}
  .echip .ic{width:30px;height:30px}
  .foot-top{grid-template-columns:1fr 1fr}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* hero background: graph-paper grid, rolling sine waves, drifting maths symbols */
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 30%,transparent 80%)}
.waves{position:absolute;left:0;width:100%;overflow:visible}
.waves path{fill:none;stroke:var(--lav-2);stroke-linecap:round}
.waves .roll{animation:roll var(--sp,40s) linear infinite}
@keyframes roll{to{transform:translateX(var(--wl,-480px))}}
.msym{position:absolute;font-family:var(--f-display);font-weight:800;color:rgba(255,255,255,.3);line-height:1;pointer-events:none;animation:symfloat var(--d,22s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes symfloat{from{transform:translate(0,0) rotate(-8deg)}to{transform:translate(var(--x,20px),var(--y,-40px)) rotate(10deg)}}
/* hero ribbons (thick meandering bands, like the reference) */
.ribbons{position:absolute;inset:0;width:100%;height:100%}
.rb{fill:none;stroke:var(--lav-2);stroke-linecap:round;will-change:transform}
.r1{stroke-width:170;animation:rib1 24s ease-in-out infinite alternate}
.r2{stroke-width:140;animation:rib2 30s ease-in-out infinite alternate}
.r3{stroke-width:110;animation:rib3 27s ease-in-out infinite alternate;opacity:.9}
@keyframes rib1{to{transform:translate(40px,-30px) rotate(2deg)}}
@keyframes rib2{to{transform:translate(-50px,30px) rotate(-3deg)}}
@keyframes rib3{to{transform:translate(-30px,40px)}}
@media (max-width:820px){.r1{stroke-width:120}.r2{stroke-width:100}.r3{stroke-width:80}}

/* ---------- offer bar ---------- */
:root{--offer-h:0px}
html.has-offer{--offer-h:42px}
.offer{position:fixed;inset:0 0 auto;z-index:62;height:var(--offer-h);padding:0 48px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden}
.offer[hidden]{display:none}
.offer .otext{overflow:hidden;text-overflow:ellipsis}
.offer b{font-family:var(--f-mono);letter-spacing:.06em;background:#fff;color:var(--ink);padding:2px 9px;border-radius:7px;border:2px dashed var(--pink)}
.offer a{color:#FF8CC0;font-weight:800;text-decoration:none}
.offer a:hover{text-decoration:underline}
.offer .ox{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:16px;line-height:1}
html.has-offer .nav{top:var(--offer-h)}
html.has-offer .hero-in{padding-top:calc(clamp(130px,17vh,200px) + var(--offer-h))}
html.has-offer .sheet{padding-top:calc(env(safe-area-inset-top,0px) + 96px + var(--offer-h))}
@media (max-width:700px){.offer{font-size:13px;padding:0 42px 0 14px;justify-content:flex-start}.offer .otext{flex:1;min-width:0}}

/* ---------- WhatsApp button ---------- */
.wa{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:69;display:flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 16px;border-radius:999px;background:#1FAF5A;color:#fff;text-decoration:none;font-weight:800;box-shadow:0 16px 36px -14px rgba(20,90,50,.7);transition:transform .25s var(--ease)}
.wa[hidden]{display:none}
.wa:hover{transform:translateY(-3px)}
.wa svg{width:26px;height:26px}
@media (max-width:700px){.wa{width:56px;padding:0;justify-content:center}.wa span{display:none}.enrol{max-width:calc(100vw - 104px)}}

/* ---------- free class form ---------- */
.lead-box{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,60px);align-items:center;padding:clamp(28px,5vw,70px);border-radius:var(--r-xl);background:var(--lav);position:relative;overflow:hidden;margin-top:clamp(40px,6vw,90px)}
.lead-box::before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-200px;border-radius:50%;background:var(--lav-2)}
.lead-copy{position:relative;display:grid;gap:18px}
.lead-copy h2{font-size:clamp(36px,4.4vw,68px)}
.lead-copy .lead{color:var(--ink)}
.lead-form{position:relative;background:#fff;border-radius:var(--r-lg);padding:clamp(20px,2.4vw,32px);display:grid;gap:14px;box-shadow:0 30px 60px -30px rgba(40,20,70,.5)}
.lf{display:grid;gap:6px}
.lf label{font-weight:800;color:var(--ink);font-size:15px}
.lf textarea{width:100%;border-radius:14px;border:2px solid var(--line);padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff;outline:none;resize:vertical;transition:border-color .2s}
.lf textarea:focus{border-color:var(--pink)}
.btn-wa{background:#1FAF5A;color:#fff}
.btn-wa:hover{background:#178f49}
.lf input,.lf select{width:100%;height:52px;border-radius:14px;border:2px solid var(--line);padding:0 14px;font:inherit;font-size:17px;color:var(--ink);background:#fff;outline:none;transition:border-color .2s}
.lf input:focus,.lf select:focus{border-color:var(--pink)}
.lf-phone{display:flex;align-items:center;border:2px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s}
.lf-phone:focus-within{border-color:var(--pink)}
.lf-phone span{padding:0 4px 0 14px;font-weight:800;color:var(--ink-3)}
.lf-phone input{border:0;height:48px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lf-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2);cursor:pointer}
.lf-consent input{width:20px;height:20px;margin-top:1px;accent-color:var(--pink);flex:none}
.lf-msg{font-size:14px;font-weight:700;min-height:1.2em}
.lf-msg.err{color:#C0262D}
.lead-done{display:grid;gap:14px;justify-items:start;animation:whoIn .5s var(--ease) both}
.lead-done h3{font-size:30px}
@media (max-width:1120px){.lead-box{grid-template-columns:1fr}}

/* ---------- course page ---------- */
.course-hero .wrap{position:relative;padding-block:calc(clamp(120px,15vh,170px) + var(--offer-h)) clamp(40px,5vw,70px)}
.crumbs{font-size:15px;font-weight:700;color:var(--ink-2);margin-bottom:18px}
.crumbs a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--pink)}
.cp-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center}
.cp-media{border-radius:var(--r-lg);overflow:hidden;position:relative;aspect-ratio:3/2;background:#ddd;box-shadow:0 40px 80px -40px rgba(40,20,70,.6)}
.cp-media .bgblur{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(22px);opacity:.85}
.cp-media .fg{position:relative;width:100%;height:100%;object-fit:contain}
.cp-info{display:grid;gap:16px}
.cp-info h1{font-size:clamp(46px,5.6vw,92px);line-height:.9;letter-spacing:-.05em}
.cp-info .lead{color:var(--ink)}
.cp-buy{display:grid;gap:12px;padding:20px;border-radius:var(--r-md);background:#fff}
.cp-buy .card-actions{flex-wrap:wrap}
.cp-sec{padding-block:clamp(50px,7vw,100px) 0}
.cp-sec h2{font-size:clamp(36px,4.4vw,64px);margin-bottom:24px}
.cp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 30px}
.syl{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:m}
.syl li{counter-increment:m;display:flex;gap:18px;align-items:center;padding:18px 22px;border-radius:var(--r-md);background:var(--lav-3);font-size:var(--t-lg);color:var(--ink);font-weight:600}
.syl li::before{content:counter(m,decimal-leading-zero);flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;background:var(--c,var(--c-yellow))}
.syl li:nth-child(5n+2)::before{--c:var(--c-mint)}.syl li:nth-child(5n+3)::before{--c:var(--c-peach)}.syl li:nth-child(5n+4)::before{--c:var(--c-sky)}.syl li:nth-child(5n+5)::before{--c:var(--c-lilac)}
.demo{position:relative;display:block;width:100%;border:0;padding:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:var(--ink);cursor:pointer;max-width:980px}
.demo img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .3s}
.demo:hover img{opacity:1}
.demo .yt-play{width:92px;height:92px;margin:-46px 0 0 -46px;font-size:30px}
.cp-who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cp-who div{padding:20px;border-radius:var(--r-md);background:var(--c,var(--c-peach))}
.cp-who div:nth-child(2){--c:var(--c-mint)}.cp-who div:nth-child(3){--c:var(--c-sky)}.cp-who div:nth-child(4){--c:var(--c-yellow)}.cp-who div:nth-child(5){--c:var(--c-lilac)}.cp-who div:nth-child(6){--c:var(--c-coral)}
.cp-who b{display:block;font-family:var(--f-display);font-size:24px;color:var(--ink);letter-spacing:-.02em}
.cp-bar{position:fixed;left:0;right:0;bottom:0;z-index:68;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -10px 30px -18px rgba(20,16,21,.4)}
.cp-bar .price{font-size:28px}
@media (max-width:1120px){.cp-grid{grid-template-columns:1fr}.cp-who{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.cp-two,.cp-who{grid-template-columns:1fr}.cp-bar:not([hidden]){display:flex}body[data-page="course"] .wa{bottom:calc(84px + env(safe-area-inset-bottom,0px))}body[data-page="course"] .foot{padding-bottom:110px}}
@media (max-width:600px){.msym:nth-child(even){display:none}.msym{opacity:.75}}

/* floating exam logos: four badges that drift and swap places */
.floater{transition:left 1.8s cubic-bezier(.65,0,.35,1),top 1.8s cubic-bezier(.65,0,.35,1),width 1.8s,height 1.8s,margin 1.8s}
.floater.swap{animation-play-state:paused}

/* "Try a free mock" pill: stands out in yellow with a ticking stopwatch */
.pill-note.mock-pill{background:var(--c-yellow);color:var(--ink);box-shadow:0 8px 22px -10px rgba(120,100,0,.55),0 0 0 2px rgba(20,16,21,.08) inset}
.pill-note.mock-pill:hover{background:#FFF59A;transform:translateY(-1px)}
.mock-ic{width:24px;height:24px;flex:none}
.mock-ic .hand{transform-origin:12px 13.5px;animation:tick 4s steps(8) infinite}
@keyframes tick{to{transform:rotate(360deg)}}
.nav.scrolled .pill-note.mock-pill{background:var(--c-yellow)}

/* social buttons in platform colours, with a gentle wiggle */
.soc-yt{background:#FF0033}.soc-tg{background:#229ED9}
.soc-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.soc-yt:hover,.soc-tg:hover,.soc-ig:hover{filter:brightness(1.08)}
.soc{animation:socwig 6s ease-in-out infinite}
.soc-tg{animation-delay:.25s}.soc-ig{animation-delay:.5s}
@keyframes socwig{0%,86%,100%{transform:none}89%{transform:translateY(-4px) rotate(-8deg)}92%{transform:translateY(0) rotate(6deg)}95%{transform:rotate(-3deg)}}
.soc:hover{animation:none;transform:translateY(-3px) scale(1.08)}
.foot .soc-yt{background:#FF0033}.foot .soc-tg{background:#229ED9}.foot .soc-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}

/* "coming soon" in the preparation-stage panel */
.soon{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:var(--r-md);background:var(--lav-3);border:2px dashed var(--lav)}
.soon b{display:inline-block;font-size:12px;font-weight:800;color:#fff;background:var(--ink);padding:4px 10px;border-radius:999px;flex:none}

/* store page: big featured course, then a row of three */
.store-feature{margin-bottom:clamp(22px,2.4vw,34px)}
@media (max-width:1800px){.pills{gap:6px}.pill-link{padding:0 18px;font-size:18px}.nav-in{gap:12px}.nav-right{gap:8px}.social{gap:6px}}

/* =========================================================
   PHONE POLISH (≤600px): same look as desktop, scaled for a
   phone — smaller type, tighter spacing, compact controls.
   ========================================================= */
@media (max-width:600px){
  :root{--t-sm:13.5px;--t-md:15px;--t-lg:15.5px;--t-xl:20px;--t-2xl:31px;
    --r-md:16px;--r-lg:22px;--r-xl:28px;--gutter:16px}
  body{line-height:1.55}
  h1,h2,h3,h4{letter-spacing:-.03em}
  .lead{font-size:15.5px;line-height:1.5}
  .eyebrow{font-size:13px}
  section[id],main[id]{scroll-margin-top:84px}

  /* buttons */
  .btn{min-height:46px;padding:0 20px;font-size:15px;gap:8px}
  .btn-sm{min-height:40px;padding:0 14px;font-size:14px}

  /* offer bar + header: one slim strip and a compact pill */
  html.has-offer{--offer-h:34px}
  .offer{font-size:12px;padding:0 38px 0 12px;gap:8px}
  .offer b{padding:1px 6px;font-size:11px}
  .offer .ox{width:24px;height:24px;font-size:13px;right:6px}
  .nav,.nav.scrolled{padding:calc(env(safe-area-inset-top,0px) + 8px) 10px 0}
  .nav-in{padding:5px 5px 5px 6px;gap:8px}
  .brand{gap:7px}
  .brand img{width:34px;height:34px;padding:1px}
  .brand .word{font-size:18px}
  .cta-split{height:38px;font-size:14px}
  .cta-split>span{padding:0 12px}
  .cta-split i{width:32px;font-size:14px}
  .menu-btn{width:38px;height:38px}
  .menu-btn span,.menu-btn span::before,.menu-btn span::after{width:16px}
  .sheet{padding-top:calc(env(safe-area-inset-top,0px) + 74px);gap:16px}
  html.has-offer .sheet{padding-top:calc(env(safe-area-inset-top,0px) + 74px + var(--offer-h))}
  .sheet-links{gap:5px}
  .sheet-links a{padding:11px 16px;font-size:21px;border-radius:16px}
  .sheet-links a i{width:32px;height:32px;font-size:15px}
  .sheet-foot .btn{min-height:50px;font-size:16px}

  /* hero */
  .hero{border-radius:0 0 28px 28px}
  .hero-in,html.has-offer .hero-in{gap:14px;padding-top:calc(env(safe-area-inset-top,0px) + 92px + var(--offer-h));padding-bottom:22px}
  .hero h1{font-size:clamp(40px,12.4vw,54px);line-height:.9}
  .hero .lead{font-size:15px;font-weight:600;max-width:34ch}
  .search{height:50px;border-radius:12px}
  .search input{font-size:16px;padding:0 16px}
  .search button{width:50px}
  .search button svg{width:20px;height:20px}
  .pick-label{font-size:18px;margin-top:6px;margin-bottom:-6px}
  .rail-wrap{gap:8px}
  .rail-arrow{width:38px;height:38px;font-size:17px}
  .rail{padding:8px 8px 6px}
  .rail-track{gap:8px;padding:12px 2px 2px}
  .echip{height:38px;font-size:14px;gap:7px;padding:0 14px 0 5px}
  .echip .ic{width:28px;height:28px}
  .echip .n{font-size:11px}
  .echip::before{top:-12px;width:14px;height:13px;margin-left:-7px}
  .echip[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
  .floater{opacity:.28}

  /* section rhythm */
  .section{padding-block:52px}
  .panel{padding-block:44px}
  .bleed{margin-inline:8px}
  .sec-head{gap:10px;margin-bottom:24px}
  .sec-head h2{font-size:var(--t-2xl);line-height:1}

  /* preparation stage */
  .personas{gap:7px}
  .persona{padding:11px 12px;gap:6px;border-radius:18px}
  .persona .ico{width:32px;height:32px}
  .persona .ico svg{width:17px;height:17px}
  .persona b{font-size:15.5px;line-height:1.15}
  .persona span{font-size:12px;line-height:1.35}
  .who-panel{padding:18px;gap:14px}
  .who-panel .situ{font-size:22px}
  .k-label{font-size:16px}
  .rec{padding:10px;gap:10px}
  .rec h4{font-size:19px;margin-block:2px 6px}
  .ticks{gap:7px}
  .ticks li{gap:9px;font-size:14.5px;line-height:1.45}
  .ticks li::before{width:17px;height:17px;margin-top:2px;background-size:12px}
  .soon{padding:13px 14px;font-size:14px;gap:10px}

  /* course cards */
  .home-grid,.grid{gap:14px}
  .card-media{margin:8px 8px 0;border-radius:15px}
  .card-body{padding:14px 16px 16px;gap:10px}
  .card-body h4{font-size:22px}
  .card-body .tag{font-size:14.5px;line-height:1.5}
  .cat{font-size:12.5px}
  .badge{font-size:11.5px;padding:4px 10px}
  .tags{gap:5px}
  .tagp{font-size:12px;padding:3px 9px 3px 3px}
  .tagp i{width:18px;height:18px}
  .bestfor{font-size:13px}
  .price-row{gap:8px;padding-top:10px}
  .price{font-size:28px}
  .mrp{font-size:14px}
  .off{font-size:11.5px;padding:3px 8px}
  .code{font-size:13px;gap:8px}
  .code b{font-size:12.5px;padding:2px 8px}
  .card-actions{gap:8px}
  .card.wide .card-media{margin:8px}
  .card.wide .card-body{padding:12px 16px 18px}
  .card.wide h4{font-size:30px}
  .card.wide .ticks{font-size:14px}
  .store-feature{margin-bottom:14px}

  /* six-step buying: shorter scroll, smaller head */
  .buy-track{height:calc(var(--steps,6) * 48vh + 100vh)}
  .buy-stick{padding-top:calc(env(safe-area-inset-top,0px) + 66px + var(--offer-h))}
  .buy-left .sec-head h2{font-size:24px}
  .step .num{font-size:12px}
  .step b{font-size:17px}
  .step p{font-size:13.5px;line-height:1.45}
  .dev-toggle{padding:4px}
  .dev-toggle button{padding:6px 16px;font-size:13px}
  .dots{margin-top:4px}

  /* success stories */
  .st-track{height:420vh}
  .st-head h2{font-size:clamp(32px,10vw,42px)}
  .st-cap b{font-size:18px}
  .voices h2{font-size:28px;top:calc(76px + var(--offer-h))}
  .voices-word{font-size:120px}
  .v-quote{font-size:19px}
  .v-nav button{width:40px;height:40px;font-size:17px}

  /* mentor */
  .mentor{gap:26px}
  .arch-wrap{max-width:290px}
  .mentor-copy{gap:14px}
  .mentor-copy h2{font-size:32px}
  .mentor-sub{font-size:17px;margin-top:-2px}
  .mentor-copy p{font-size:15px}
  .creds{gap:6px}
  .creds span{font-size:12.5px;padding:5px 11px}
  .stats{gap:7px}
  .stat{padding:12px 10px;border-radius:14px}
  .stat b{font-size:20px}
  .stat span{font-size:12px;line-height:1.3;display:block;margin-top:3px}

  /* WhatsApp question box */
  .lead-box{padding:22px 16px 16px;border-radius:24px;gap:18px;margin-top:40px}
  .lead-box::before{width:300px;height:300px;right:-120px;top:-130px}
  .lead-copy{gap:12px}
  .lead-copy h2{font-size:29px}
  .lead-form{padding:18px 16px;gap:11px;border-radius:20px}
  .lf label{font-size:14px}
  .lf input,.lf select{height:48px;font-size:16px;border-radius:12px}
  .lf textarea{font-size:16px;border-radius:12px}

  /* YouTube */
  .yt-head{margin-bottom:22px;gap:14px}
  .yt-head h2{font-size:31px}
  .yt-grid{gap:18px}
  .yt-title{font-size:17px}
  .yt-date{font-size:13px}
  .yt-play{width:52px;height:52px;margin:-26px 0 0 -26px}
  .yt-empty{gap:14px;padding:20px}
  .yt-empty .big-play{width:60px;height:60px}
  .yt-empty h3{font-size:23px}

  /* blog */
  .blog-grid{gap:10px}
  .post,.post.big{min-height:0;padding:18px 18px 16px;gap:12px;border-radius:20px}
  .post h3,.post.big h3{font-size:20px;line-height:1.12}
  .post .pcat{font-size:11.5px;padding:4px 10px}
  .post .pfoot{font-size:12.5px}
  .post .pgo{width:38px;height:38px;font-size:15px}
  .post::after{width:130px;height:130px;right:-60px;bottom:-60px}

  /* app */
  .app{gap:24px}
  .app h2{font-size:38px}
  .store-btns{gap:8px}
  .store-btn{padding:9px 16px;gap:10px;border-radius:12px}
  .store-btn svg{width:20px;height:20px}
  .store-btn b{font-size:16px}
  .store-btn small{font-size:10px}
  .app-shot{max-width:340px;border-radius:22px}

  /* FAQ */
  .faq{gap:8px}
  .faq details{padding:0 16px}
  .faq summary{font-size:16.5px;padding:15px 0;gap:12px;line-height:1.25}
  .faq summary::after{width:30px;height:30px;font-size:19px}
  .faq details p{font-size:14.5px;padding-bottom:16px}

  /* final call to action */
  .final{padding:30px 22px;gap:20px;border-radius:26px}
  .final h2{font-size:38px}
  .final p{font-size:15px}
  .final-actions{gap:10px}

  /* footer */
  .foot{padding-block:44px 22px;margin-top:44px;border-radius:28px 28px 0 0}
  .foot-top{gap:26px 16px}
  .foot h5{font-size:16px;margin-bottom:10px}
  .foot ul{gap:7px;font-size:14px}
  .foot-blurb{font-size:14px}
  .foot .soc{width:42px;height:42px}
  .foot .soc svg{width:19px;height:19px}
  .wordmark{font-size:clamp(48px,15vw,62px);margin:40px 0 14px}
  .zi{height:120px;margin-bottom:22px}
  .zi-0,.zi-hop{font-size:76px}
  .zi-to{font-size:18px}
  .zi-inf{width:28vw}
  .zi-inf .lem{stroke-width:13}
  .foot-bottom{font-size:12px}

  /* floating bits */
  .wa{width:50px;height:50px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .wa svg{width:23px;height:23px}
  .enrol{left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:9px 38px 9px 9px;gap:9px;border-radius:16px;max-width:calc(100vw - 86px)}
  .enrol .av{width:36px;height:36px;font-size:16px}
  .enrol p{font-size:12.5px}
  .enrol small{font-size:11px}
  .enrol .x{width:22px;height:22px;font-size:13px;right:7px;top:7px}

  /* dialogs */
  .dlg-body{padding:18px 18px 22px;gap:12px}
  .dlg-body h3{font-size:27px}
  .dlg-close{width:38px;height:38px;font-size:18px;margin:10px 10px -48px 0}

  /* store page */
  .store-hero h1{font-size:clamp(40px,12.4vw,54px)}
  .group-head{margin-bottom:14px;gap:10px}
  .group-head h3{font-size:24px}

  /* course page */
  .course-hero .wrap{padding-block:calc(env(safe-area-inset-top,0px) + 88px + var(--offer-h)) 30px}
  .crumbs{font-size:13px;margin-bottom:12px}
  .cp-grid{gap:18px}
  .cp-media{border-radius:20px}
  .cp-info{gap:12px}
  .cp-info h1{font-size:36px}
  .cp-buy{padding:14px;gap:10px}
  .cp-sec{padding-top:44px}
  .cp-sec h2{font-size:27px;margin-bottom:16px}
  .cp-two{gap:8px}
  .syl{gap:8px}
  .syl li{padding:12px 14px;gap:12px;font-size:15px}
  .syl li::before{width:36px;height:36px;font-size:14px}
  .demo .yt-play{width:62px;height:62px;margin:-31px 0 0 -31px}
  .cp-who{gap:8px}
  .cp-who div{padding:14px;font-size:14px}
  .cp-who b{font-size:18px}
  .cp-bar{padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))}
  .cp-bar .price{font-size:23px}
  body[data-page="course"] .wa{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
/* very small phones (≤360px) */
@media (max-width:360px){
  .brand .word{font-size:16px}
  .cta-split>span{padding:0 10px}
  .hero h1{font-size:38px}
  .persona b{font-size:14.5px}
  .stat b{font-size:17px}
}
/* tablet/phone header: Log-in sits right next to the menu button */
@media (max-width:1280px){.cta-split{margin-left:auto}.nav-right{margin-left:0}}
@media (max-width:600px){.cp-info .lead{text-align:left;margin-inline:0}}
html.menu-open .wa,html.menu-open .enrol{display:none}
@media (max-width:600px){.sheet .soc{width:46px;height:46px}.sheet .soc svg{width:20px;height:20px}}

/* =========================================================
   TEXT PAGES: about, contact, FAQ, terms, privacy, refund
   ========================================================= */
.page-hero .page-hero-in{padding-block:calc(clamp(120px,15vh,170px) + var(--offer-h)) clamp(44px,5vw,70px);gap:clamp(14px,1.6vw,20px)}
html.has-offer .page-hero .page-hero-in{padding-top:calc(clamp(120px,15vh,170px) + var(--offer-h))}
.page-hero h1{font-size:clamp(52px,8vw,128px);max-width:14ch}
.page-hero .lead{max-width:52ch}
.crumb-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.7);font-size:14px;font-weight:700;color:var(--ink-2)}
.crumb-pill a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--pink)}
.crumb-pill span[aria-hidden]{opacity:.45}
.doc-updated{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink);background:var(--c-yellow);padding:6px 14px;border-radius:999px}
.doc-updated::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--leaf)}

/* policy layout: sticky contents on the left, readable text on the right */
.doc-sec{padding-top:clamp(40px,5vw,80px)}
.doc-layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.doc-side{position:sticky;top:calc(110px + var(--offer-h));display:grid;gap:14px}
.doc-side-h{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.doc-toc{display:grid;gap:2px;max-height:calc(100vh - 360px);overflow:auto;padding-right:6px;border-left:3px solid var(--line)}
.doc-toc a{display:block;padding:7px 14px;margin-left:-3px;border-left:3px solid transparent;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink-2);text-decoration:none;transition:color .2s,border-color .2s,background .2s}
.doc-toc a:hover{color:var(--ink);background:var(--lav-3)}
.doc-toc a.on{color:var(--ink);border-color:var(--pink);font-weight:800}
.no-toc .doc-side-h,.no-toc .doc-toc{display:none}
.doc-switch{display:grid;gap:6px;padding:10px;border-radius:var(--r-md);background:var(--lav-3)}
.doc-switch a{padding:10px 14px;border-radius:12px;font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;transition:background .2s}
.doc-switch a:hover{background:#fff}
.doc-switch a[aria-current="page"]{background:var(--ink);color:#fff}
.doc{min-width:0;max-width:820px}
.doc-short{border-radius:var(--r-lg);padding:clamp(22px,2.6vw,34px);background:var(--c-mint);margin-bottom:clamp(30px,4vw,50px);position:relative;overflow:hidden}
.doc-short::after{content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.35)}
.doc-short-h{font-family:var(--f-display);font-weight:800;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;color:var(--ink);margin-bottom:14px;position:relative}
.doc-short ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;position:relative}
.doc-short li{background:rgba(255,255,255,.75);border-radius:16px;padding:14px 16px 14px 46px;position:relative;font-weight:600;color:var(--ink);line-height:1.4}
.doc-short li::before{content:"";position:absolute;left:14px;top:15px;width:20px;height:20px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.doc-body{font-size:var(--t-md);line-height:1.7;color:var(--ink-2)}
.doc-body>*+*{margin-top:14px}
.doc-body h2{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em;line-height:1.1;margin-top:clamp(36px,4vw,52px);scroll-margin-top:calc(110px + var(--offer-h));padding-top:clamp(24px,3vw,36px);border-top:2px dashed var(--line)}
.doc-body>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc-body h3{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em;line-height:1.2;margin-top:28px;scroll-margin-top:calc(110px + var(--offer-h))}
.doc-body h2+*,.doc-body h3+*{margin-top:14px}
.doc-body ul{list-style:none;margin-left:0;padding:0;display:grid;gap:10px}
.doc-body li{position:relative;padding-left:26px}
.doc-body li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:3px;background:var(--pink);transform:rotate(45deg)}
.doc-body b{color:var(--ink);font-weight:800}
.doc-body a{color:var(--pink-2);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;word-break:break-word}
.doc-help{margin-top:clamp(40px,5vw,64px);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:clamp(20px,2.4vw,30px);border-radius:var(--r-lg);background:var(--lav)}
.doc-help b{font-family:var(--f-display);font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;color:var(--ink)}
.doc-help p{color:var(--ink-2);margin-top:4px}
.doc-help-btns{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:1000px){
  .doc-layout{grid-template-columns:1fr}
  .doc-side{position:static;order:2}
  .doc-side-h,.doc-toc{display:none}
  .doc-switch{grid-template-columns:repeat(3,auto);justify-content:start}
}

/* about page */
.about-story{padding-top:clamp(50px,7vw,110px)}
.about-body p{font-size:var(--t-lg);line-height:1.6}
.about-body>*+*{margin-top:12px}
.tline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);counter-reset:t}
.tl{position:relative;border-radius:var(--r-lg);padding:clamp(20px,2.2vw,30px);background:var(--c);color:var(--fg,var(--ink));display:grid;gap:8px;align-content:start;min-height:200px;overflow:hidden}
.tl::after{content:"";position:absolute;right:-50px;bottom:-50px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.3)}
.tl-n{font-family:var(--f-display);font-weight:800;font-size:15px;width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink)}
.tl-when{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-top:6px}
.tl b{font-family:var(--f-display);font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;line-height:1.1;color:inherit}
.tl p{font-size:var(--t-sm);line-height:1.5;position:relative;z-index:1}
.ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.way{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.2vw,28px);border-radius:var(--r-lg);background:var(--c);color:var(--ink);text-decoration:none;min-height:260px;transition:transform .35s var(--ease),box-shadow .35s}
.way:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 30px 50px -30px rgba(40,20,70,.45)}
.way i{font-style:normal;width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:800}
.way b{font-family:var(--f-display);font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;line-height:1.1;margin-top:6px}
.way span{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
.way em{margin-top:auto;font-style:normal;font-weight:800;font-size:15px}

/* contact page */
.contact-sec{padding-top:clamp(40px,5vw,80px);padding-bottom:clamp(40px,5vw,70px)}
.cgrid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.ccard{position:relative;display:flex;flex-direction:column;gap:6px;padding:clamp(22px,2.4vw,30px);border-radius:var(--r-lg);text-decoration:none;color:var(--ink);background:var(--lav-3);min-height:250px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.ccard:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(40,20,70,.45)}
.ccard::after{content:"";position:absolute;right:-60px;bottom:-60px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.2)}
.cic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);margin-bottom:10px}
.cic svg{width:26px;height:26px}
.clabel{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.cval{font-family:var(--f-display);font-size:clamp(22px,2vw,30px);letter-spacing:-.03em;line-height:1.1;word-break:break-word}
.cnote{font-size:var(--t-sm);opacity:.85;line-height:1.45}
.ccard em{margin-top:auto;padding-top:10px;font-style:normal;font-weight:800;font-size:15px;position:relative;z-index:1}
.ccard-wa{background:#1FAF5A;color:#fff}
.ccard-wa .cic{color:#1FAF5A}
.ccard-wa .cval{font-size:clamp(26px,2.6vw,38px)}
.ccard-mail{background:var(--c-yellow)}
.ccard-mail .cval{font-size:clamp(17px,1.4vw,21px)}
.ccard-tg{background:#229ED9;color:#fff}.ccard-tg .cic{color:#229ED9}
.ccard-yt{background:var(--ink);color:#fff}.ccard-yt .cic{color:#FF0033}
.quick{margin-top:clamp(26px,3vw,40px);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.quick-h{font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.02em;margin-right:6px}
.quick-links{display:flex;flex-wrap:wrap;gap:8px}
.quick-links a{padding:9px 16px;border-radius:999px;background:var(--lav-3);color:var(--ink);font-weight:700;font-size:15px;text-decoration:none;transition:background .2s}
.quick-links a:hover{background:var(--lav)}

/* FAQ page */
.faq-jump{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.faq-jump a{padding:10px 18px;border-radius:999px;background:#fff;color:var(--ink);font-weight:800;text-decoration:none;box-shadow:0 8px 22px -12px rgba(40,20,70,.45)}
.faq-page{padding-top:clamp(50px,6vw,90px)}
.faq-group{max-width:980px;margin-inline:auto;scroll-margin-top:calc(100px + var(--offer-h))}
.faq-group+.faq-group{margin-top:clamp(44px,5vw,70px)}
.faq-group h2{font-size:clamp(32px,3.6vw,52px);margin-bottom:20px}
.faq-group .faq{margin:0}
.faq details p a{color:var(--pink-2);font-weight:700}
.faq-more{max-width:980px;margin:clamp(44px,5vw,70px) auto 0;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:clamp(22px,2.6vw,34px);border-radius:var(--r-lg);background:var(--lav)}
.faq-more b{font-family:var(--f-display);font-size:clamp(22px,2vw,30px);letter-spacing:-.03em;color:var(--ink)}
.faq-more p{margin-top:4px}

@media (max-width:1120px){
  .cgrid{grid-template-columns:1fr 1fr}
  .ways{grid-template-columns:1fr 1fr}
  .tline{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .page-hero .page-hero-in,html.has-offer .page-hero .page-hero-in{padding-top:calc(env(safe-area-inset-top,0px) + 92px + var(--offer-h));padding-bottom:30px;gap:12px}
  .page-hero h1{font-size:clamp(40px,12vw,52px)}
  .crumb-pill{font-size:12.5px;padding:5px 12px}
  .doc-updated{font-size:12.5px;padding:5px 12px}
  .doc-sec{padding-top:30px}
  .doc-short{padding:18px 16px;border-radius:20px;margin-bottom:30px}
  .doc-short-h{font-size:21px;margin-bottom:10px}
  .doc-short ul{grid-template-columns:1fr;gap:7px}
  .doc-short li{padding:11px 12px 11px 40px;font-size:14px;border-radius:13px}
  .doc-short li::before{left:12px;top:12px;width:18px;height:18px}
  .doc-body{font-size:15px;line-height:1.65}
  .doc-body h2{font-size:23px;margin-top:30px;padding-top:22px}
  .doc-body h3{font-size:19px;margin-top:22px}
  .doc-body ul{gap:8px}
  .doc-body li{padding-left:22px}
  .doc-switch{grid-template-columns:1fr;padding:8px}
  .doc-switch a{font-size:14px;padding:9px 12px}
  .doc-help{padding:18px;border-radius:20px;gap:14px}
  .doc-help b{font-size:20px}
  .doc-help p{font-size:14px}
  .about-body p{font-size:15px}
  .tline{grid-template-columns:1fr;gap:10px}
  .tl{min-height:0;padding:18px;border-radius:20px;gap:6px}
  .tl-n{width:34px;height:34px;font-size:13px}
  .tl b{font-size:21px}
  .ways{grid-template-columns:1fr;gap:10px}
  .way{min-height:0;padding:18px;border-radius:20px;gap:8px}
  .way i{width:42px;height:42px;font-size:17px}
  .way b{font-size:21px}
  .way em{font-size:14px;margin-top:4px}
  .cgrid{grid-template-columns:1fr;gap:10px}
  .ccard{min-height:0;padding:18px;border-radius:20px;gap:4px}
  .cic{width:44px;height:44px;margin-bottom:6px}
  .cic svg{width:22px;height:22px}
  .clabel{font-size:11.5px}
  .cval{font-size:22px}
  .ccard-wa .cval{font-size:28px}
  .ccard-mail .cval{font-size:17px}
  .cnote{font-size:13.5px}
  .ccard em{font-size:14px}
  .quick{gap:10px}
  .quick-h{font-size:17px;width:100%}
  .quick-links{gap:6px}
  .quick-links a{font-size:13.5px;padding:7px 13px}
  .faq-jump a{font-size:13.5px;padding:8px 14px}
  .faq-page{padding-top:40px}
  .faq-group h2{font-size:28px;margin-bottom:14px}
  .faq-more{padding:18px;border-radius:20px}
  .faq-more b{font-size:20px}
}
.ccard-mail .cval{font-size:clamp(15px,1.12vw,18px);overflow-wrap:anywhere}

/* ---------- about page v2: story path, zero to infinity, values ---------- */
.about-meet{padding-top:clamp(50px,7vw,110px)}
.about-meet .mentor-copy h2{font-size:var(--t-2xl)}
.story-sec{padding-top:clamp(30px,4vw,60px)}

/* winding path: cards alternate left/right, a line joins them and draws on scroll */
.wind{position:relative;display:flex;flex-direction:column;padding-block:10px}
.wind-svg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:0}
.wind-track{fill:none;stroke:var(--line);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 10}
.wind-fill{fill:none;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.wind-item{position:relative;z-index:1;width:calc(50% - clamp(40px,6vw,90px))}
.wind-item+.wind-item{margin-top:clamp(-70px,-4vw,-30px)}
.wind-item.r{margin-left:auto}
.wind-item.l + .wind-node, .wind-item.r + .wind-node{margin-top:clamp(30px,4vw,50px)}
.wind-node{width:100%;display:flex;justify-content:center;margin-left:0!important}
.wind-node+.wind-item{margin-top:clamp(20px,3vw,40px)}
.wind-dot{position:absolute;top:34px;width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--lav);transition:transform .5s var(--ease),background .4s,border-color .4s,box-shadow .4s;transform:scale(.7)}
.wind-item.l .wind-dot{right:calc(-1 * clamp(40px,6vw,90px) - 11px)}
.wind-item.r .wind-dot{left:calc(-1 * clamp(40px,6vw,90px) - 11px)}
.wind-item.on .wind-dot{transform:scale(1);background:var(--pink);border-color:#fff;box-shadow:0 0 0 6px rgba(236,60,142,.18)}
.wind-dot.big{position:relative;top:auto;left:auto!important;right:auto!important;width:72px;height:72px;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:36px;color:var(--ink);background:var(--c-yellow);border:0;transform:scale(.85)}
.wind-node.on .wind-dot.big{transform:scale(1);background:var(--c-yellow);box-shadow:0 0 0 8px rgba(244,238,162,.18),0 0 40px rgba(236,60,142,.5)}
.wind-node.end .wind-dot.big{font-size:44px;background:var(--pink);color:#fff}
.wind-node.end.on .wind-dot.big{background:var(--pink);box-shadow:0 0 0 8px rgba(236,60,142,.2),0 0 50px rgba(236,60,142,.7)}
.wind-card{position:relative;border-radius:var(--r-lg);padding:clamp(20px,2.4vw,30px);display:grid;gap:8px;opacity:.25;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.wind-item.on .wind-card{opacity:1;transform:none}
.wind-card b{font-family:var(--f-display);font-size:clamp(22px,2.1vw,30px);letter-spacing:-.03em;line-height:1.1;color:inherit}
.wind-card p{font-size:var(--t-md);line-height:1.6}
.w-when{justify-self:start;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:#fff;color:var(--pink-2)}
.wind-light .wind-card{background:var(--lav-3);color:var(--ink)}
.wind-light .wind-card p{color:var(--ink-2)}
.wind-light .wind-item:nth-of-type(5n+2) .wind-card{background:#FCEFE4}
.wind-light .wind-item:nth-of-type(5n+3) .wind-card{background:#E4F7EE}
.wind-light .wind-item:nth-of-type(5n+4) .wind-card{background:#FBF8D8}
.wind-light .wind-item:nth-of-type(5n+5) .wind-card{background:#E3F6FA}

/* zero to infinity: night panel */
.zero-sec{border-radius:var(--r-xl);background:radial-gradient(120% 70% at 50% 0%,var(--night-2),var(--night) 70%);color:var(--on-night);padding-block:clamp(70px,9vw,130px);overflow:hidden}
.zero-sec h2{color:#fff}
.zero-sec .hl{color:#FF8CC0}
.zero-sec .lead{color:var(--on-night-2);max-width:58ch}
.wind-dark .wind-track{stroke:rgba(255,255,255,.16)}
.wind-dark .wind-fill{filter:drop-shadow(0 0 8px rgba(236,60,142,.7))}
.wind-dark .wind-dot{background:var(--night);border-color:rgba(255,255,255,.3)}
.wind-dark .wind-item.on .wind-dot{background:var(--pink);border-color:#fff}
.wind-dark .wind-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wind-dark .wind-card p{color:var(--on-night-2)}
.w-fig{font-family:var(--f-display);font-weight:800;font-size:clamp(48px,5.4vw,84px);line-height:.9;letter-spacing:-.05em;background:linear-gradient(90deg,#C3B7EB,#EC3C8E 60%,#F4EEA2);-webkit-background-clip:text;background-clip:text;color:transparent;justify-self:start}
.zero-outro{max-width:760px;margin:clamp(40px,5vw,70px) auto 0;text-align:center;font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.4vw,34px);line-height:1.25;letter-spacing:-.02em;color:#fff}

/* why thousands choose us: big rows that open */
.values-sec{padding-block:clamp(70px,9vw,130px)}
.values-head{display:grid;gap:14px;margin-bottom:clamp(28px,3vw,44px)}
.values-head h2{font-size:var(--t-2xl)}
.values{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.value{border-bottom:1px solid var(--line)}
.v-row{width:100%;display:grid;grid-template-columns:clamp(40px,5vw,80px) minmax(0,1fr) auto;align-items:center;gap:12px;padding:clamp(16px,2vw,26px) 0;border:0;background:none;cursor:pointer;text-align:left;color:var(--ink)}
.v-num{font-family:var(--f-mono);font-size:13px;letter-spacing:.15em;color:var(--ink-3)}
.v-title{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,4.6vw,72px);line-height:.95;letter-spacing:-.035em;transition:color .3s,transform .4s var(--ease)}
.v-arr{width:clamp(40px,4vw,56px);height:clamp(40px,4vw,56px);border-radius:50%;display:grid;place-items:center;background:var(--lav-3);font-size:20px;transition:transform .4s var(--ease),background .3s,color .3s}
.value.open .v-title{color:var(--pink);transform:translateX(8px)}
.value.open .v-arr{transform:rotate(-45deg);background:var(--pink);color:#fff}
.v-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.v-body>div{overflow:hidden}
.v-body p{max-width:62ch;margin-left:calc(clamp(40px,5vw,80px) + 12px);padding-bottom:clamp(18px,2vw,28px);font-size:var(--t-lg);line-height:1.6;color:var(--ink-2)}
.value.open .v-body{grid-template-rows:1fr}

@media (max-width:760px){
  .wind{padding-left:0}
  .wind-item,.wind-item.r{width:auto;margin-left:42px}
  .wind-item+.wind-item{margin-top:14px}
  .wind-item.l .wind-dot,.wind-item.r .wind-dot{left:-42px;right:auto;top:26px}
  .wind-node{justify-content:flex-start;margin-left:0!important;width:auto}
  .wind-node+.wind-item,.wind-item+.wind-node{margin-top:18px}
  .wind-dot.big{width:56px;height:56px;font-size:28px;margin-left:-14px}
  .wind-node.end .wind-dot.big{font-size:34px}
  .wind-item.l .wind-dot, .wind-item.r .wind-dot{margin-left:0}
}
@media (max-width:600px){
  .about-meet .mentor-copy h2{font-size:34px}
  .wind-card{padding:16px;border-radius:18px;gap:6px}
  .wind-card b{font-size:20px}
  .wind-card p{font-size:14.5px}
  .w-when{font-size:11px;padding:4px 10px}
  .w-fig{font-size:44px}
  .zero-sec{padding-block:52px;border-radius:26px}
  .zero-outro{font-size:20px;margin-top:34px}
  .values-sec{padding-block:52px}
  .v-row{grid-template-columns:30px minmax(0,1fr) auto;padding:14px 0;gap:8px}
  .v-num{font-size:11px}
  .v-title{font-size:clamp(22px,7.4vw,30px)}
  .v-arr{width:34px;height:34px;font-size:15px}
  .v-body p{margin-left:38px;font-size:14.5px;padding-bottom:16px}
}
/* dots sit on the inner edge of each card so the line snakes between them */
@media (min-width:761px){
  .wind-item.l .wind-dot{right:-11px}
  .wind-item.r .wind-dot{left:-11px}
}
.wind-dot{z-index:2}
.sheet-links a:nth-child(9){--c:var(--c-mint);transition-delay:.44s}
.pill-link{white-space:nowrap}
@media (max-width:1700px){.pill-note{display:none}}
@media (max-width:1440px) and (min-width:1281px){.nav .social{display:none}}
.nav-right{margin-left:0}
/* zero to infinity: deep violet that brightens as it goes down (zero → infinity) */
.zero-sec{position:relative;isolation:isolate;background:
  radial-gradient(60% 40% at 15% 10%,rgba(255,140,192,.28),transparent 70%),
  radial-gradient(50% 35% at 90% 55%,rgba(166,236,246,.20),transparent 70%),
  radial-gradient(70% 40% at 50% 100%,rgba(244,238,162,.30),transparent 70%),
  linear-gradient(180deg,#33237E 0%,#4B33B0 38%,#6C45C8 72%,#9A52C9 100%)}
.zero-sec::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%);border-radius:inherit}
.zero-sec .eyebrow{color:#FFD1E8!important}
.zero-sec .hl{color:#FFB3D6}
.zero-sec .lead{color:rgba(255,255,255,.86)}
.wind-dark .wind-track{stroke:rgba(255,255,255,.35)}
.wind-dark .wind-fill{filter:drop-shadow(0 0 10px rgba(255,140,192,.9))}
.wind-dark .wind-dot{background:#4B33B0;border-color:rgba(255,255,255,.55)}
.wind-dark .wind-item.on .wind-dot{background:#FF5FA8;border-color:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.18)}
.wind-dark .wind-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);box-shadow:0 24px 50px -30px rgba(20,8,60,.6)}
.wind-dark .wind-card p{color:rgba(255,255,255,.84)}
.zero-sec .w-fig{background-image:linear-gradient(90deg,#FFFFFF,#FFD1E8 55%,#FFF3A6);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- popups ---------- */
dialog.mpop,dialog.apop{border:0;padding:0;background:transparent;max-width:none;max-height:none;overflow:visible}
dialog.mpop::backdrop,dialog.apop::backdrop{background:rgba(35,20,70,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadein .35s both}
dialog.mpop[open] .mp-card,dialog.apop[open] .ap-card{animation:popin .6s cubic-bezier(.2,1.25,.35,1) both}
dialog.closing .mp-card,dialog.closing .ap-card{animation:popout .26s ease-in both}
dialog.closing::backdrop{opacity:0;transition:opacity .26s}
@keyframes popin{from{opacity:0;transform:translateY(30px) scale(.94)}}
@keyframes popout{to{opacity:0;transform:translateY(16px) scale(.97)}}

/* Membership popup: big, two columns */
.mp-card{position:relative;width:min(1060px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border-radius:36px;background:#fff;box-shadow:0 50px 120px -40px rgba(30,10,70,.7)}
.mp-x{position:absolute;right:16px;top:16px;z-index:5;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 6px 18px -8px rgba(30,10,70,.5);transition:transform .2s}
.mp-x:hover{transform:rotate(90deg)}
.mp-media{position:relative;overflow:hidden;background:var(--lav);min-height:100%;display:grid;place-items:center;padding:clamp(24px,3vw,40px)}
.mp-media .bgblur{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(30px) saturate(1.3);opacity:.75}
.mp-media .fg{position:relative;z-index:1;width:100%;border-radius:22px;box-shadow:0 30px 60px -25px rgba(30,10,70,.65);animation:mpfloat 6s ease-in-out infinite alternate}
@keyframes mpfloat{to{transform:translateY(-8px) rotate(-.6deg)}}
.mp-float{position:absolute;z-index:2;display:grid;place-items:center;border-radius:50%;font-family:var(--f-display);font-weight:800;color:var(--ink);box-shadow:0 14px 30px -14px rgba(30,10,70,.6);animation:bob 7s ease-in-out infinite alternate}
.mp-float.f1{width:66px;height:66px;left:18px;top:18px;background:var(--c-yellow);font-size:30px;--dx:6px;--dy:10px}
.mp-float.f2{width:52px;height:52px;right:22px;bottom:24px;background:var(--c-mint);font-size:22px;--dx:-8px;--dy:-10px;animation-delay:-2s}
.mp-float.f3{width:58px;height:58px;left:26px;bottom:30px;background:#fff;font-size:19px;--dx:8px;--dy:-6px;animation-delay:-4s}
.mp-body{padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;gap:14px}
.mp-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;background:#FFF0F7;color:var(--pink-2);font-weight:800;font-size:14px}
.mp-chip i{width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 rgba(236,60,142,.6);animation:ping 1.6s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(236,60,142,0)}100%{box-shadow:0 0 0 0 rgba(236,60,142,0)}}
.mp-body h2{font-size:clamp(34px,3.6vw,54px);line-height:.98}
.mp-text{color:var(--ink-2);font-size:var(--t-md);line-height:1.55}
.mp-ticks{gap:8px}
.mp-ticks li{font-weight:600;color:var(--ink)}
.mp-price{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;border-radius:20px;background:var(--lav-3)}
.mp-price>div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mp-price .price{font-size:clamp(36px,3.4vw,48px)}
.mp-with{width:100%;font-size:13px;color:var(--ink-3);font-weight:600;margin-top:-4px}
.mp-code{display:grid;justify-items:center;gap:1px;padding:8px 16px;border-radius:14px;border:2px dashed var(--pink);background:#fff;cursor:copy;transition:transform .2s,background .2s}
.mp-code:hover{transform:scale(1.04)}
.mp-code b{font-family:var(--f-mono);font-size:18px;letter-spacing:.1em;color:var(--ink)}
.mp-code small{font-size:11px;font-weight:700;color:var(--pink-2)}
.mp-code.copied{background:#E9FBF2;border-color:var(--leaf)}
.mp-code.copied small{color:var(--leaf)}
.mp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.mp-actions .btn{flex:1;min-height:58px;font-size:17px}
.mp-go{box-shadow:0 14px 30px -12px rgba(236,60,142,.8);animation:gopulse 2.4s ease-in-out infinite}
@keyframes gopulse{50%{box-shadow:0 14px 40px -6px rgba(236,60,142,.95)}}
.mp-later{align-self:center;border:0;background:none;color:var(--ink-3);font-weight:700;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px}

/* app popup: compact card with a QR code */
.ap-card{position:relative;width:min(380px,calc(100vw - 32px));border-radius:34px;padding:34px 28px 26px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#F8F3FF 45%,#FFE3F0 100%);box-shadow:0 40px 100px -30px rgba(30,10,70,.65),0 0 0 1px rgba(255,255,255,.8) inset;display:grid;gap:12px;justify-items:center}
.ap-x{position:absolute;right:16px;top:16px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--pink);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 6px 16px -8px rgba(30,10,70,.5);transition:transform .2s}
.ap-x:hover{transform:rotate(90deg)}
.ap-chip{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-2)}
.ap-ic{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#EC3C8E,#B8226D);box-shadow:0 8px 18px -8px rgba(236,60,142,.9);position:relative}
.ap-ic::before{content:"";position:absolute;left:13px;top:8px;width:12px;height:21px;border-radius:3px;border:2px solid #fff;box-sizing:border-box}
.ap-ic::after{content:"";position:absolute;left:17px;top:24px;width:4px;height:2px;border-radius:2px;background:#fff}
.ap-card h3{position:relative;font-size:30px;line-height:1.05;letter-spacing:-.03em}
.ap-text{position:relative;font-size:15px;color:var(--ink-2);line-height:1.5;max-width:30ch}
.ap-text b{color:var(--pink-2)}
.ap-qr-wrap{position:relative;display:grid;justify-items:center;gap:8px;margin-top:4px}
.ap-qr{position:relative;width:256px;height:256px;padding:12px;border-radius:26px;background:#fff;box-shadow:0 18px 40px -20px rgba(30,10,70,.45),0 0 0 6px rgba(255,255,255,.7);display:grid;place-items:center}
.ap-qr canvas{display:block;border-radius:10px}
.ap-logo{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#fff;padding:3px;box-shadow:0 4px 12px rgba(30,10,70,.25)}
.ap-qr-load{font-size:13px;color:var(--ink-3)}
.ap-small{font-size:12px;font-weight:700;color:var(--ink-3)}
.ap-stores{position:relative;display:grid;gap:10px;width:100%;margin-top:6px}
.ap-stores .store-btn{justify-content:center}
.ap-later{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:6px;min-height:48px;padding:0 24px;border-radius:999px;border:0;background:#fff;color:var(--pink-2);font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 10px 24px -14px rgba(184,34,109,.6);transition:transform .2s}
.ap-later:hover{transform:translateY(-2px)}
.ap-clock{width:17px;height:17px;border-radius:50%;border:2px solid currentColor;position:relative}
.ap-clock::before{content:"";position:absolute;left:5.5px;top:2px;width:2px;height:6px;background:currentColor;border-radius:1px}
.ap-clock::after{content:"";position:absolute;left:5.5px;top:6.5px;width:5px;height:2px;background:currentColor;border-radius:1px}
.ap-bub{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,.4) 45%,rgba(195,183,235,.35));box-shadow:inset -2px -3px 6px rgba(160,140,220,.35),0 4px 10px rgba(160,140,220,.25);animation:bob 8s ease-in-out infinite alternate}
.ap-bub.b1{width:20px;height:20px;left:22px;top:46%;--dy:-14px}
.ap-bub.b2{width:12px;height:12px;right:30px;top:52%;animation-delay:-3s;--dy:12px}
.ap-bub.b3{width:28px;height:28px;left:30px;bottom:80px;animation-delay:-5s}
.ap-bub.b4{width:16px;height:16px;right:36px;bottom:110px;animation-delay:-1s;--dx:-8px}

@media (max-width:760px){
  dialog.mpop{margin:auto auto 0;width:100%}
  .mp-card{width:100vw;max-height:92dvh;grid-template-columns:1fr;border-radius:28px 28px 0 0}
  dialog.mpop[open] .mp-card{animation:sheetup .55s cubic-bezier(.2,1,.3,1) both}
  @keyframes sheetup{from{transform:translateY(100%)}}
  .mp-media{min-height:0;padding:18px 18px 10px;background:var(--lav)}
  .mp-media .fg{max-width:340px;border-radius:16px}
  .mp-float.f1{width:46px;height:46px;font-size:22px;left:12px;top:12px}
  .mp-float.f2,.mp-float.f3{display:none}
  .mp-x{width:38px;height:38px;font-size:20px;right:12px;top:12px}
  .mp-body{padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));gap:10px}
  .mp-chip{font-size:12px;padding:5px 11px}
  .mp-body h2{font-size:28px}
  .mp-text{font-size:14px}
  .mp-ticks li{font-size:14px}
  .mp-price{padding:10px 12px;border-radius:16px}
  .mp-price .price{font-size:32px}
  .mp-code{padding:6px 12px}
  .mp-code b{font-size:15px}
  .mp-actions .btn{min-height:50px;font-size:15px}
  .ap-card{padding:28px 20px 20px;border-radius:28px}
  .ap-card h3{font-size:26px}
}
@media (max-width:760px) and (max-height:760px){.mp-ticks{display:none}}
.mp-card:focus,.ap-card:focus{outline:none}
.mp-price>div{flex:1 1 200px}
@media (max-width:760px){
  .mp-media .fg{max-width:270px}
  .mp-ticks li:nth-child(n+3){display:none}
  .mp-with{display:none}
  .mp-price{flex-wrap:nowrap}
  .mp-price>div{flex:1 1 auto}
  .mp-actions{position:sticky;bottom:0;background:#fff;padding-top:6px;margin-top:0}
  .mp-later{padding-bottom:2px}
}

/* ===== Membership popup v2: landscape banner ===== */
.mp-card{width:min(1180px,calc(100vw - 48px));grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);border-radius:32px;align-items:stretch}
.mp-media{padding:22px;aspect-ratio:auto}
.mp-media .fg{border-radius:18px}
.mp-float.f1{width:56px;height:56px;font-size:26px;left:14px;top:14px}
.mp-float.f2{width:44px;height:44px;font-size:18px;right:16px;bottom:16px}
.mp-float.f3{display:none}
.mp-body{padding:clamp(24px,2.6vw,36px) clamp(26px,3vw,44px);gap:12px;justify-content:center}
.mp-body h2{font-size:clamp(30px,3vw,46px)}
.mp-text{font-size:15.5px;max-width:52ch}
.mp-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mp-pills li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--lav-3);font-size:13.5px;font-weight:700;color:var(--ink)}
.mp-pills li::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;background:var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.mp-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;padding:10px;border-radius:22px;background:#FBF8FF;box-shadow:0 0 0 1px var(--line) inset}
.mp-bar .mp-price{flex:1 1 auto;background:none;padding:4px 6px;gap:12px;flex-wrap:nowrap}
.mp-bar .mp-price>div{flex:0 1 auto}
.mp-bar .mp-price .price{font-size:clamp(32px,2.8vw,42px)}
.mp-bar .mp-with{display:none}
.mp-bar .mp-actions{flex:0 0 auto;margin:0;gap:8px}
.mp-bar .mp-actions .btn{flex:none;min-height:52px;font-size:16px;padding:0 22px}
.mp-later{align-self:flex-start;margin-top:-2px}
@media (max-width:1100px) and (min-width:761px){
  .mp-bar .mp-actions{width:100%}
  .mp-bar .mp-actions .btn{flex:1}
}
@media (max-width:760px){
  dialog.mpop{margin:auto;width:auto}
  .mp-card{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:24px;grid-template-columns:1fr}
  dialog.mpop[open] .mp-card{animation:popin .55s cubic-bezier(.2,1.25,.35,1) both}
  .mp-media{padding:12px 12px 0;background:#fff}
  .mp-media .bgblur,.mp-float{display:none}
  .mp-media .fg{max-width:none;width:100%;border-radius:16px;animation:none}
  .mp-body{padding:14px 16px 16px;gap:9px}
  .mp-chip{font-size:11.5px}
  .mp-body h2{font-size:25px}
  .mp-text{display:none}
  .mp-pills li{font-size:12px;padding:5px 10px 5px 6px}
  .mp-pills li:nth-child(n+3){display:none}
  .mp-bar{padding:8px;gap:8px;border-radius:18px}
  .mp-bar .mp-price{width:100%;justify-content:space-between}
  .mp-bar .mp-price .price{font-size:28px}
  .mp-bar .mp-actions{width:100%;position:static;background:none;padding:0}
  .mp-bar .mp-actions .btn{flex:1;min-height:46px;font-size:14.5px;padding:0 12px}
  .mp-later{align-self:center}
}

/* ===== app popup v2: small card in the bottom-left corner ===== */
.appcard{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:75;width:330px;padding:18px 18px 16px;border-radius:26px;overflow:hidden;display:grid;gap:10px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F8F3FF 55%,#FFE3F0 100%);box-shadow:0 30px 70px -24px rgba(30,10,70,.55),0 0 0 1px rgba(255,255,255,.9) inset;
  animation:apin .6s cubic-bezier(.2,1.25,.35,1) both}
.appcard.out{animation:apout .3s ease-in both}
@keyframes apin{from{opacity:0;transform:translate(-20px,30px) scale(.92)}}
@keyframes apout{to{opacity:0;transform:translate(-10px,20px) scale(.95)}}
html.appcard-open .enrol{display:none}
.appcard .ap-x{right:12px;top:12px;width:30px;height:30px;font-size:17px}
.ap-top{position:relative;display:flex;align-items:center;gap:11px;padding-right:30px}
.appcard .ap-ic{flex:none;width:44px;height:44px;border-radius:14px}
.appcard .ap-ic::before{left:16px;top:10px;width:13px;height:24px}
.appcard .ap-ic::after{left:20px;top:28px}
.appcard .ap-chip{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--pink-2);line-height:1.2}
.appcard h3{font-size:21px;line-height:1.1;letter-spacing:-.025em}
.appcard .ap-text{position:relative;font-size:13.5px;max-width:none;text-align:left;line-height:1.45}
.ap-qr-row{position:relative;display:flex;align-items:center;gap:14px}
.appcard .ap-qr{flex:none;width:168px;height:168px;padding:10px;border-radius:18px;box-shadow:0 12px 28px -16px rgba(30,10,70,.45),0 0 0 4px rgba(255,255,255,.75)}
.appcard .ap-logo{width:36px;height:36px;margin:-18px 0 0 -18px;padding:2px}
.ap-qr-side{display:grid;gap:10px;justify-items:start}
.appcard .ap-small{font-size:12px;line-height:1.35;text-align:left}
.appcard .ap-later{min-height:38px;padding:0 14px;font-size:13px;margin:0}
.appcard .ap-bub.b1{left:auto;right:18px;top:auto;bottom:60px;width:16px;height:16px}
.appcard .ap-bub.b2{right:52px;top:auto;bottom:24px}
.appcard.ac-phone{left:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:calc(100vw - 80px);max-width:330px;padding:14px 14px 12px;gap:8px;border-radius:22px}
.appcard.ac-phone .ap-ic{width:38px;height:38px;border-radius:12px}
.appcard.ac-phone .ap-ic::before{left:13px;top:8px;width:12px;height:21px}
.appcard.ac-phone .ap-ic::after{left:17px;top:24px}
.appcard.ac-phone h3{font-size:18px}
.appcard.ac-phone .ap-text{font-size:12.5px}
.appcard .ap-stores{grid-template-columns:1fr 1fr;gap:6px;margin:0}
.appcard .ap-stores .store-btn{padding:7px 8px;gap:6px;border-radius:11px}
.appcard .ap-stores .store-btn svg{width:16px;height:16px}
.appcard .ap-stores .store-btn small{font-size:8.5px}
.appcard .ap-stores .store-btn b{font-size:12.5px}
/* ===== Membership banner v3: wide and short ===== */
@media (min-width:761px){
  .mp-card{width:min(1200px,calc(100vw - 48px));grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr)}
  .mp-media{padding:18px}
  .mp-body{padding:26px 34px 22px;gap:10px}
  .mp-chip{font-size:13px;padding:6px 12px}
  .mp-body h2{font-size:clamp(28px,2.6vw,40px);line-height:1}
  .mp-text{font-size:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mp-bar{flex-wrap:nowrap;margin-top:4px;padding:8px 8px 8px 14px}
  .mp-bar .mp-price{padding:0;gap:10px;flex:1 1 auto;min-width:0}
  .mp-bar .mp-price>div{gap:8px;flex-wrap:nowrap;align-items:baseline}
  .mp-bar .mp-price .off{white-space:nowrap}
  .mp-bar .mp-actions .btn{min-height:54px;padding:0 26px}
}
@media (min-width:761px) and (max-width:1100px){
  .mp-bar{flex-wrap:wrap}
  .mp-bar .mp-actions{width:100%}
}
.mp-links{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mp-inside{font-weight:800;font-size:14.5px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--pink)}
.mp-links .mp-later{align-self:auto;margin:0}
@media (max-width:760px){.mp-links{justify-content:center;gap:22px}}
/* login test mode bar (owner's browser only) */
.testbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 32px);padding:8px 14px;border-radius:999px;background:#F4EEA2;color:var(--ink);font-size:13px;font-weight:700;box-shadow:0 10px 30px -10px rgba(20,16,21,.5)}
.testbar a,.testbar button{color:var(--ink);font:inherit;font-weight:800;text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
@media (max-width:600px){.testbar{bottom:72px;font-size:12px;border-radius:16px}}
/* app card v9: download icon, justified text, platform chips (no "Maybe later") */
.ap-ic.ap-dl{display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#7B5CFA,#EC3C8E);box-shadow:0 10px 20px -10px rgba(123,92,250,.9)}
.ap-ic.ap-dl::before,.ap-ic.ap-dl::after{content:none}
.ap-ic.ap-dl svg{width:58%;height:58%;overflow:visible}
.ap-ic.ap-dl .ap-arrow{animation:apdrop 2.4s cubic-bezier(.5,0,.3,1) infinite}
@keyframes apdrop{0%,55%,100%{transform:translateY(0);opacity:1}20%{transform:translateY(-3px)}38%{transform:translateY(2px)}}
@media (prefers-reduced-motion:reduce){.ap-ic.ap-dl .ap-arrow{animation:none}}
.appcard .ap-text{text-align:justify;text-justify:inter-word;hyphens:none}
.ap-qr-side{align-self:center;gap:8px}
.ap-plat{display:flex;gap:6px}
.ap-plat span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--pink-2);box-shadow:0 6px 14px -8px rgba(30,10,70,.4)}
.ap-plat svg{width:16px;height:16px}
.appcard .ap-small{font-size:12.5px}