/* Design v2 mockup: light page, dark "feature" sections. Loaded AFTER styles.css (index-v2.html only). */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');
:root{--bg:#FBF8F3;--surface:#FFFFFF;--card:#EEF0FF;--ink:#1E1F2E;--muted:#5C5F73;--brand:#5865F2;--brand-ink:#4752C4;--brand2:#FF7A45;
--success:#187A42;--warn:#F0B232;--night:#1E1F2E;--night2:#2B2D3F;--night-ink:#F2F3F5;--night-muted:#B5BAC1;--line:#ECE6DC;--soft:#EEF0FF;--r:28px}
body{font-family:Nunito,system-ui,sans-serif;font-size:18px}
h1,h2,h3,.logo,.btn,.lvl,.num,.amt{font-family:Fredoka,Nunito,sans-serif;letter-spacing:0}
h1{font-weight:700}h2{font-weight:600}
a{color:var(--brand-ink)}
header.nav{background:rgba(251,248,243,.9)}
.logo span{color:var(--brand2)}
.btn{background:var(--brand);border-radius:999px;padding:15px 26px;box-shadow:0 6px 0 #3C45A5;font-weight:600}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 #3C45A5}
.btn.ghost{background:var(--surface);color:var(--brand-ink);border:2px solid var(--brand);box-shadow:none}
.eyebrow{background:var(--card);color:var(--brand-ink);border-radius:999px}
.card,.col,.sample,.soonbox,details,.rung{border-radius:var(--r)!important;border:0!important;box-shadow:0 10px 30px rgba(30,31,46,.08)}
.card{background:var(--surface)}
.alt{background:var(--surface);border:0}
.card .num,.lvl{background:var(--brand)!important;color:#fff!important;border-radius:40% 60% 55% 45%/55% 45% 55% 45%!important}
.badge{background:var(--brand2);color:var(--ink)}
.col.good{background:var(--card)!important}
/* dark feature sections: hero + pricing */
.dark{background:var(--night)!important;color:var(--night-ink);position:relative;overflow:hidden}
.dark .lead,.dark .note,.dark p{color:var(--night-muted)}
.dark h1,.dark h2,.dark h3{color:var(--night-ink)}
.dark .eyebrow{background:var(--night2);color:#8C95FF}
.dark .btn.ghost{background:transparent;color:var(--night-ink);border-color:#8C95FF}
.dark .card{background:var(--night2);color:var(--night-ink);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.dark .card li{color:var(--night-ink)}.dark .card .tag{background:var(--brand2);color:var(--ink)}
.dark .amt,.dark .amt small{color:var(--night-ink)}
.vid video{border-radius:var(--r);box-shadow:0 30px 60px rgba(0,0,0,.4)}
/* blob mascots */
.blob{position:absolute;width:120px;height:110px;border-radius:55% 45% 50% 50%/60% 60% 40% 40%;z-index:0;animation:bob 3.5s ease-in-out infinite}
.blob::before,.blob::after{content:"";position:absolute;top:34%;width:16%;height:30%;background:#fff;border-radius:999px}
.blob::before{left:30%}.blob::after{left:56%}
.blob.o{background:var(--brand2);left:4%;top:120px}.blob.b{background:var(--brand);right:5%;top:220px;width:90px;height:84px;animation-delay:-1.2s}
.blob.y{background:var(--warn);right:8%;bottom:60px;width:70px;height:64px;animation-delay:-2s}
.dark .wrap{position:relative;z-index:1}
@keyframes bob{50%{transform:translateY(-14px) rotate(-4deg)}}
@media(max-width:700px){.blob{width:70px;height:64px}.blob.o{top:auto;bottom:140px;left:-20px}.blob.b{top:auto;bottom:40px}.blob.y{display:none}}
.btn[disabled]{opacity:.65;cursor:not-allowed;box-shadow:none}
/* ---- Duolingo touches: stats, gym path, celebration funnel ---- */
.stats{display:inline-flex;gap:8px;margin-left:auto}.stats span{font:700 .85rem Nunito,sans-serif;background:#fff;border:1.5px solid #E6E3F5;border-radius:999px;padding:3px 10px}
.st-streak{color:#C2410C}.st-xp{color:var(--brand2,#4752C4)}.crumbs{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dash-head .stats{margin:10px 0 0}
.gym-path{display:flex;align-items:center;margin:10px 0 4px;max-width:420px}.gym-path i{flex:1;height:4px;background:#E6E3F5;border-radius:2px}
.gym-path .dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 .9rem Fredoka,sans-serif;background:#fff;border:3px solid #E6E3F5;color:#5C5F73;flex:none}
.gym-path .dot.on{background:#187A42;border-color:#187A42;color:#fff;box-shadow:0 3px 0 #0f5a30}.gym-path .dot.goal.on{background:#F0B232;border-color:#F0B232;box-shadow:0 3px 0 #b8861f}
.gym.pop{animation:pop .45s ease}@keyframes pop{40%{transform:scale(1.02)}}
.noscroll{overflow:hidden}
.cel{position:fixed;inset:0;z-index:1000;background:rgba(30,31,46,.55);display:flex;align-items:flex-end;justify-content:center;animation:fadein .2s}
.cel-card{position:relative;background:#FBF8F3;width:100%;max-width:520px;border-radius:24px 24px 0 0;padding:22px 22px 28px;text-align:center;animation:up .35s cubic-bezier(.2,1.3,.4,1);max-height:94vh;overflow:auto}
@media(min-width:700px){.cel{align-items:center}.cel-card{border-radius:24px}}
.cel-x{position:absolute;right:14px;top:10px;border:0;background:none;font-size:1.8rem;color:#5C5F73;cursor:pointer}
.cel-steps{display:flex;gap:6px;justify-content:center;margin:2px 0 10px}.cel-steps span{width:34px;height:6px;border-radius:3px;background:#E6E3F5}.cel-steps span.on{background:#5865F2}
.cel h2{font-family:Fredoka,sans-serif;margin:.3em 0 .2em}.cel .lead{margin:0 0 12px}
.cheer{position:relative;height:120px;margin:4px auto 0;width:200px}
.cheer-blob{position:absolute;left:50%;margin-left:-55px;width:110px;height:100px;background:#FF7A45;border-radius:55% 45% 50% 50%/60% 60% 40% 40%;animation:hop .7s ease-in-out infinite alternate}
.cheer-blob::before,.cheer-blob::after{content:"";position:absolute;top:30%;width:16%;height:28%;background:#fff;border-radius:999px}.cheer-blob::before{left:30%}.cheer-blob::after{left:56%}
.cheer-blob .mouth{position:absolute;left:38%;top:64%;width:24%;height:14%;background:#1E1F2E;border-radius:0 0 999px 999px}
.cheer-blob.b2{width:60px;height:56px;background:#5865F2;left:auto;right:0;margin:0;top:50px;animation-delay:-.35s}
@keyframes hop{from{transform:translateY(8px) scale(1.04,.96)}to{transform:translateY(-14px) scale(.97,1.03)}}
.badge-l1{width:84px;height:84px;margin:-6px auto 6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd56b,#F0B232);border:5px solid #fff;box-shadow:0 4px 0 #b8861f,0 8px 22px rgba(240,178,50,.45);display:grid;place-content:center;color:#5a3d00;animation:spinin .7s ease}
.badge-l1 b{font:700 2rem/1 Fredoka,sans-serif}.badge-l1 small{font:800 .6rem Nunito;letter-spacing:.12em}
@keyframes spinin{from{transform:scale(0) rotate(-180deg)}to{transform:none}}
.cel-stats{display:flex;gap:10px;justify-content:center;margin:6px 0 18px}.pill{font:700 1rem Fredoka,sans-serif;border-radius:999px;padding:8px 16px}
.pill.xp{background:#EEF0FF;color:#4752C4}.pill.streak{background:#FFEDE3;color:#C2410C}
.btn.big-cta{display:block;width:100%;font-size:1.1rem;padding:16px 20px;border-radius:16px}
.linkbtn{display:block;margin:12px auto 0;background:none;border:0;color:#5C5F73;font:700 .95rem Nunito,sans-serif;cursor:pointer;text-decoration:underline}
.peek{position:relative;text-align:left;background:#fff;border:2px dashed #C9CDF9;border-radius:16px;padding:16px 16px 12px;margin:10px 0 16px}
.peek-lock{position:absolute;right:12px;top:10px;font-size:1.3rem}.peek-label{margin:0;font:800 .75rem Nunito;letter-spacing:.08em;text-transform:uppercase;color:#4752C4}
.peek-step{font-weight:700;margin:.3em 0}.peek-more{color:#5C5F73;font-size:.9rem;margin:.4em 0 0}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:1100;overflow:hidden}.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--x),105vh) rotate(var(--r));opacity:.9}}
@keyframes fadein{from{opacity:0}}@keyframes up{from{transform:translateY(40px);opacity:0}}
.paytest{min-height:100vh;display:grid;place-items:center;padding:20px}.pay-card{max-width:440px;width:100%;text-align:center;padding:28px}
.test-flag{display:inline-block;background:#F0B232;color:#1E1F2E;font:800 .75rem Nunito;letter-spacing:.06em;border-radius:999px;padding:4px 12px;margin-bottom:10px}
.pay-card .amt{font:700 2.4rem Fredoka,sans-serif;margin:.2em 0}
@media(prefers-reduced-motion:reduce){.cheer-blob,.badge-l1,.confetti{animation:none!important}.confetti{display:none}}
/* Intake email: grey disabled Next, autofill detection hook, typo suggestion */
.btn[disabled],.btn[aria-disabled="true"]{background:#c9ccd6!important;color:#6b6f80!important;opacity:1;cursor:not-allowed;box-shadow:none;transform:none}
@keyframes apfmAutofill{from{opacity:.999}to{opacity:1}}
input:-webkit-autofill{animation-name:apfmAutofill;animation-duration:.01s}
.email-sug{margin-top:6px}.email-sug:empty{display:none}
.linkish{background:none;border:0;padding:0;color:#5865F2;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
/* ROCKS prompt explainer */
.rocks-guide{background:var(--surface);border-radius:var(--r);padding:28px;margin:28px 0;box-shadow:0 10px 30px rgba(30,31,46,.08)}
.rocks-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:18px 0}
.rock{background:var(--card);border-radius:22px;padding:18px;border-bottom:5px solid #C9CDFB}
.rock:nth-child(even){background:#FFF0E8;border-bottom-color:#FFC9AE}
.rock-l{display:inline-grid;place-items:center;width:46px;height:46px;background:var(--brand);color:#fff;font:700 24px Fredoka,sans-serif;border-radius:40% 60% 55% 45%/55% 45% 55% 45%;box-shadow:0 4px 0 #3C45A5}
.rock:nth-child(even) .rock-l{background:var(--brand2);box-shadow:0 4px 0 #D9592A}
.rock h3{margin:10px 0 4px}.rock p{margin:4px 0;font-size:.95rem}.rock-x{color:var(--muted);font-style:italic}
.rocks-vs{display:grid;grid-template-columns:1fr 1.6fr;gap:14px;margin:12px 0 20px}
@media(max-width:760px){.rocks-vs{grid-template-columns:1fr}}
.vs{border-radius:22px;padding:16px;position:relative}.vs pre{white-space:pre-wrap;font-size:.9rem;margin:8px 0}
.vs.weak{background:#FDECEC;border:2px dashed #E5A3A3}.vs.strong{background:#E8F6EE;border:2px solid #9AD3B0}
.vs-tag{font-weight:700;font-family:Fredoka,sans-serif}.vs.weak .vs-tag{color:#B3261E}.vs.strong .vs-tag{color:var(--success)}
.rocks-check{list-style:none;padding:0}.rocks-check li{background:var(--card);border-radius:16px;padding:10px 14px;margin:8px 0}
.rocks-guide pre{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
@media(min-width:900px){.rocks-cards{grid-template-columns:repeat(5,1fr)}}
@media(min-width:560px) and (max-width:899px){.rocks-cards{grid-template-columns:repeat(2,1fr)}}

/* ===== Polish v3 (research/website-polish-plan.md): one token set, 18px body (min 16), 3 radii, 2 shadows, 48px targets ===== */
:root{
 --bg:#FBF8F3;--surface:#FFFFFF;--tint:#EEF0FF;--tint-coral:#FFF1EA;--card:#EEF0FF;--soft:#EEF0FF;
 --ink:#1E1F2E;--muted:#4A4D60;--brand:#5865F2;--brand-ink:#3C45A5;--coral:#FF7A45;--coral-ink:#B23F0F;--brand2:#FF7A45;
 --success:#187A42;--line:#D9D1C3;
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
 --t-sm:16px;--t-body:18px;--t-lg:20px;--t-h4:24px;--t-h3:30px;--t-h2:clamp(32px,4vw,40px);--t-h1:clamp(40px,6vw,60px);
 --lh-body:1.6;--lh-head:1.15;--measure:66ch;
 --r-sm:12px;--r-md:20px;--r-lg:28px;--r-pill:999px;--r:28px;
 --sh-1:0 2px 0 rgba(30,31,46,.06),0 4px 12px rgba(30,31,46,.06);--sh-2:0 12px 32px rgba(30,31,46,.10);
 --btn-depth:0 5px 0 #3C45A5;--tap:48px;--ease:cubic-bezier(.2,.8,.2,1);--dur:180ms}
html{font-size:18px;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip;max-width:100%}
body{font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink)}
h1{font-size:var(--t-h1);line-height:var(--lh-head)}h2{font-size:var(--t-h2);line-height:var(--lh-head)}h3{font-size:var(--t-h4);line-height:1.25}h4{font-size:var(--t-lg)}
p,li,dd{max-width:var(--measure)}.center p,.center .lead{margin-left:auto;margin-right:auto}
.lead{font-size:var(--t-lg);color:var(--muted)}
small,.note,.tag,.chip,.eyebrow,.copy,.state,.stats span,.badge,.demo-flag,.crumbs,.safe,.ex,.rock p,.rock-x,.vs pre,.peek-label,.peek-more,.pill,.gym-bars span,.gym-prog,.err,.hint,.when,.test-flag,.linkbtn,.snd,.ring span,.cel-x,.badge-l1 small,.nav ul a,.st-streak,.st-xp,label,summary,.amt small,footer{font-size:max(var(--t-sm),1em)}
.note,.tag,.chip,.eyebrow,.copy,.state,.stats span,.badge,.demo-flag,.crumbs,.peek-label,.pill,.gym-bars span,.err,.hint,.test-flag,.ring span,.badge-l1 small{font-size:var(--t-sm)}
.note,.ex,.rock-x,.peek-more,.when{color:var(--muted)}
a{color:var(--brand-ink)}.logo span{color:var(--coral-ink)}
/* Targets and focus */
a.btn,button,.btn,input:not([type=checkbox]):not([type=radio]),select,label.choice,.chip,.copy,.nav ul a,.textlink,.linkish,.linkbtn,summary{min-height:var(--tap)}
.nav ul a{display:inline-flex;align-items:center;padding:0 var(--s2)}
.textlink{display:inline-flex;align-items:center;gap:var(--s2);font-weight:700;text-decoration:underline;text-underline-offset:3px;color:var(--brand-ink)}
.textlink.on-dark{color:#C9CDFF}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:0 28px;font-size:var(--t-lg);border-radius:var(--r-pill);box-shadow:var(--btn-depth);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.btn.sm{font-size:var(--t-sm);padding:0 20px}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #3C45A5}
.btn.ghost,.btn.secondary{background:var(--surface);color:var(--brand-ink);border:2px solid var(--brand-ink);box-shadow:none}
.dark .btn.ghost{background:transparent;color:#fff;border-color:#C9CDFF}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
.dark :focus-visible{outline-color:#C9CDFF}
input[type=checkbox],input[type=radio]{width:24px;height:24px;accent-color:var(--brand-ink);flex:none}
label.choice,.checklist label,.radio label,.chips label{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r-md);cursor:pointer}
input,select,textarea{font-size:var(--t-body);border:2px solid var(--line);border-radius:var(--r-md)}
/* Code and prompts wrap, never scroll the page sideways */
pre,code{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;max-width:100%}
pre{font-size:var(--t-sm);line-height:1.55}
.grid>*,.sample-grid>*,.cards>*,.compare>*,.rocks-vs>*,.gym-cmp>*,.dash-head>*{min-width:0}
.prompt{position:relative;max-width:100%;border-radius:var(--r-md)}
.prompt pre{padding-top:var(--s7)}
.copy{display:inline-flex;align-items:center;padding:0 var(--s4);border-radius:var(--r-pill);background:var(--ink);color:#fff;font-weight:700;top:var(--s2);right:var(--s2)}
@media(max-width:1024px){.sample-grid{grid-template-columns:1fr}}
/* Cards: surface + one shadow + large radius; inputs: border + medium radius */
.card,.col,.sample,.soonbox,details,.rung,.concept,.exrow,.lvcard,.gym,.rocks-guide,.why,.safebox,.lesson-card,.mcheck,.capstone,.next-card{border-radius:var(--r-lg)!important;box-shadow:var(--sh-1);border:0!important}
.cel-card,.vid video{box-shadow:var(--sh-2)}
.rock,.vs,.peek{border-radius:var(--r-md)}
/* Coral is a fill with dark text; coral text uses coral ink */
.badge,.demo-flag,.dark .card .tag,.lvcard.current .state,.tag.coral{background:var(--coral);color:var(--ink)}
.st-streak{color:var(--coral-ink)}.st-xp{color:var(--brand-ink)}.pill.streak{color:var(--coral-ink)}.pill.xp{color:var(--brand-ink)}
.tag{color:var(--brand-ink)}.vs.weak .vs-tag{color:#9B1C1C}
.stats span{border:2px solid var(--line);padding:var(--s1) var(--s3);background:var(--surface)}
.state{color:var(--brand-ink);background:var(--tint);padding:var(--s1) var(--s3)}
.lvcard.passed .state{background:var(--success);color:#fff}
.lvcard.locked,.lvcard.review{opacity:1}.lvcard.locked .lvtxt p,.lvcard.locked h3{color:var(--muted)}.lvcard.locked .state{background:#E9E6F0;color:var(--ink)}
.lvcard{margin-left:0!important;padding:var(--s5)}.lvtxt h3{font-size:var(--t-lg)}.lvtxt p{font-size:var(--t-body)}
.rung{margin-left:0!important}
@media(min-width:1025px){.rung:nth-child(2){margin-left:3%!important}.rung:nth-child(3){margin-left:6%!important}.rung:nth-child(4){margin-left:9%!important}}
.def{display:block;background:var(--tint);border-radius:var(--r-sm);padding:var(--s2) var(--s3);margin:var(--s2) 0;color:var(--ink)}
.dark .def{background:var(--night2);color:var(--night-ink)}
/* Sections: one rhythm */
section{padding:var(--s9) 0}@media(max-width:1024px){section{padding:var(--s8) 0}}
.cta-band{background:var(--tint);text-align:center}
.blob{width:96px;height:88px}.blob.o{top:auto;bottom:40px;left:2%}.blob.b{top:auto;bottom:120px;right:2%;width:72px;height:66px}
@media(max-width:1024px){.blob{display:none}}
.next-card{background:var(--surface);padding:var(--s5);margin:var(--s5) 0}
/* Level page: stepper, lesson cards, checks, sticky next */
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:var(--s3) 0 var(--s4)}.meta-row .stats{margin-left:auto}
.stepper{background:var(--surface);border-radius:var(--r-md);padding:var(--s4) var(--s5);margin:var(--s5) 0;box-shadow:var(--sh-1)}
.step-of{margin:0 0 var(--s2);font-weight:700;color:var(--ink)}
.parts{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin:var(--s3) 0 0}
.parts a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s3);border-radius:var(--r-pill);background:var(--tint);text-decoration:none;color:var(--brand-ink);font-weight:700;font-size:var(--t-sm)}
.part{padding:var(--s5) 0;scroll-margin-top:80px}
.lesson-card{background:var(--surface);padding:var(--s6);margin:var(--s5) 0}
.beat{margin:var(--s4) 0}.beat h3{font-size:var(--t-lg);margin:0 0 var(--s1);color:var(--brand-ink)}.beat.do{background:var(--tint-coral);border-radius:var(--r-md);padding:var(--s4)}
.mcheck{background:var(--bg);padding:var(--s5);margin-top:var(--s5)}.mcheck h4{margin:0 0 var(--s2)}
.mcheck textarea{width:100%;min-height:96px;padding:var(--s3);font:inherit}
.opts{border:0;padding:0;margin:var(--s3) 0}.opts legend{margin-bottom:var(--s2)}.recall{margin-top:var(--s4)}
.ok-line{color:var(--success);font-weight:800}
.capstone{background:var(--surface);padding:var(--s6);margin:var(--s5) 0}
.glossary dt{font-weight:800;margin-top:var(--s3)}.glossary dd{margin:0}
.sticky-next{position:sticky;bottom:var(--s4);display:flex;justify-content:flex-end;pointer-events:none;z-index:5}.sticky-next .btn{pointer-events:auto;box-shadow:var(--btn-depth),var(--sh-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.demo-banner{margin:var(--s3) 0}
.more-tips{padding:var(--s4) var(--s5);margin:var(--s5) 0;background:var(--surface)}.more-tips summary{font-weight:800;cursor:pointer;display:flex;align-items:center}
/* ROCKS: 2 columns at tablet, comparison stacked */
.rock p{font-size:var(--t-sm)}
@media(max-width:899px){.rocks-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.rocks-vs{grid-template-columns:1fr}.gym-cmp{grid-template-columns:1fr}}
.gym-path .dot{width:40px;height:40px;font-size:var(--t-sm);color:var(--muted)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.logo{display:inline-flex;align-items:center;min-height:var(--tap)}
.pv-rung{border:2px solid var(--line);border-radius:var(--r-md)}.pv-rung b{background:#E9E6F0;color:var(--ink);border-radius:var(--r-sm)}.pv-rung.here b,.pv-rung.below b{background:var(--coral);color:var(--ink)}
.pv-rung em{color:var(--coral-ink)}.pv-rung.here{border-color:var(--coral-ink)}.gym-prog{color:var(--coral-ink)}
.stats>span{border:2px solid var(--line);padding:var(--s1) var(--s3);background:var(--surface);border-radius:var(--r-pill)}
.stats span span{border:0!important;padding:0!important;background:none!important;font-size:inherit}
.rocks-cards,.result .rocks-cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}