:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --ink:#0A3FA8; --paper:#FFFFFF; --mist:#F9FAFD; --mist2:#EEF2F9; --line:#E6EAF1;
  --marigold:#F5B800; --marigold-soft:#FFF5CC; --leaf:#1FAE4D; --leaf-soft:#E4F7EA;
  --coral:#E8305A; --coral-soft:#FDE4EA; --sky:#0A3FA8; --sky-soft:#E6EDFB;
  --purple:#6B4EE6; --purple-soft:#ECE8FB; --cyan:#1FA7F0; --cyan-soft:#E3F4FE; --orange:#F56A3D; --orange-soft:#FFE8E4;
  --text:#202124; --muted:#5F6368; --on-ink:#FFFFFF;
  --r:16px; --rl:26px; --rs:10px;
  --display:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#121418; --mist:#1B1E25; --mist2:#242832; --line:#2E333D;
    --text:#ECEEF2; --muted:#A8AEB8; --marigold-soft:#3B3212; --leaf-soft:#12321D;
    --coral-soft:#3E1B18; --sky-soft:#172A4A; --purple-soft:#2A1B44; --cyan-soft:#12303C; --orange-soft:#3E211D;
  }
}
:root[data-theme="dark"]{
  --paper:#121418; --mist:#1B1E25; --mist2:#242832; --line:#2E333D;
  --text:#ECEEF2; --muted:#A8AEB8; --marigold-soft:#3B3212; --leaf-soft:#12321D;
  --coral-soft:#3E1B18; --sky-soft:#172A4A; --purple-soft:#2A1B44; --cyan-soft:#12303C; --orange-soft:#3E211D;
}
html{scroll-padding-top:calc(76px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
body{font-family:var(--body);color:var(--text);background:var(--paper);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

h1,h2,h3,h4{font-family:var(--display);line-height:1.12;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.4rem,6.5vw,4.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:1.3rem}
h4{font-size:1.05rem}
p.lead{font-size:1.15rem;color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
section.block{padding:64px 0}
@media (max-width:700px){section.block{padding:44px 0}}
.sec-head{max-width:64ch;margin-bottom:28px}
.sec-head p{color:var(--muted);margin-top:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;font-weight:800;font-size:1rem;text-decoration:none;transition:transform .12s ease,background .15s}
.btn:active{transform:scale(.98)}
.btn-ink{background:var(--ink);color:var(--on-ink)}
.btn-ink:hover{background:#082F80}
.btn-gold{background:var(--marigold);color:#202124}
.btn-gold:hover{background:#FFC71F}
.btn-ghost{background:#ffffff;color:#0A3FA8;border:1px solid #0A3FA8}
.btn-ghost:hover{background:var(--sky-soft)}
.btn-sm{padding:9px 16px;font-size:.92rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* hero */
.hero{padding:48px 0 16px;display:grid;grid-template-columns:1fr;justify-items:center;text-align:center}
.hero>div:first-child{max-width:840px}
.hero .eyebrow{display:inline-flex;gap:8px;align-items:center;background:var(--sky-soft);color:#1E4B8F;border-radius:10px;padding:7px 14px;font-weight:600;font-size:.85rem;margin-bottom:18px}
.hero .sub{font-size:1.15rem;color:var(--muted);max-width:58ch;margin:18px auto 26px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero .proof{margin-top:20px;color:var(--muted);font-size:.9rem}
.sayit{background:var(--paper);color:var(--text);border-radius:var(--rl);padding:28px;position:relative;min-height:300px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;box-shadow:0 12px 40px rgba(66,133,244,.14);border:1px solid var(--line)}
.sayit::before{content:"";position:absolute;left:0;top:0;right:0;height:10px;background:linear-gradient(90deg,var(--coral),var(--marigold),var(--leaf),var(--sky),var(--purple))}
.sayit .tag{font-size:.9rem;color:var(--muted);font-weight:800}
.sayit .from{font-family:var(--display);font-size:1.4rem;margin-top:6px;text-decoration:line-through;text-decoration-color:var(--coral);text-decoration-thickness:3px;color:var(--muted)}
.sayit .to{font-family:var(--display);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;margin-top:14px;color:var(--leaf);transition:opacity .35s}
.sayit .why{margin-top:14px;color:var(--muted);font-size:.98rem}
.sayit .dots{display:flex;gap:6px;margin-top:22px}
.sayit .dots b{width:22px;height:5px;border-radius:3px;background:var(--mist2);transition:background .3s}
.sayit .dots b.on{background:var(--sky)}
/* start steps */
.start{background:linear-gradient(135deg,var(--sky-soft),var(--purple-soft) 50%,var(--marigold-soft));border-radius:var(--rl);padding:32px}
.start h2{margin-bottom:6px}
.start .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media (max-width:760px){.start .steps3{grid-template-columns:1fr}}
.start .s{background:var(--paper);border-radius:var(--r);padding:20px;text-decoration:none;color:inherit;display:block;border:2px solid transparent}
.start .s:hover{border-color:var(--c)}
.start .s i{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c);color:#fff;font-style:normal;font-family:var(--display);font-weight:800;font-size:1.2rem;margin-bottom:12px}
.start .s h3{font-size:1.15rem}
.start .s p{color:var(--muted);font-size:.95rem;margin-top:4px}
.start .s b.go{display:inline-block;margin-top:12px;color:var(--c);font-weight:800}
.whoami{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
@media (max-width:760px){.whoami{grid-template-columns:1fr}}
.whoami a{border:2px solid var(--line);background:var(--paper);border-radius:var(--r);padding:16px 18px;text-decoration:none;font-weight:800;display:flex;gap:12px;align-items:center}
.whoami a:hover{border-color:var(--sky)}
.whoami a span{font-size:1.6rem}
.whoami a small{display:block;color:var(--muted);font-weight:700}
.fade{animation:fadein .45s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* journey bar */
.journey{background:var(--mist);border-radius:var(--rl);padding:28px;display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
@media (max-width:700px){.journey{grid-template-columns:repeat(4,1fr)}}
.journey .st{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 10px;text-align:center;text-decoration:none;position:relative}
.journey .st b{font-family:var(--display);font-size:1.4rem;display:block}
.journey .st small{color:var(--muted);font-size:.8rem;display:block;line-height:1.3;margin-top:4px}
.journey .st{border-top:5px solid var(--c)}
.journey .st:nth-child(1){--c:var(--coral)}.journey .st:nth-child(2){--c:var(--orange)}.journey .st:nth-child(3){--c:var(--marigold)}.journey .st:nth-child(4){--c:var(--leaf)}.journey .st:nth-child(5){--c:var(--cyan)}.journey .st:nth-child(6){--c:var(--sky)}.journey .st:nth-child(7){--c:var(--purple)}
.journey .st b{color:var(--c)}
.journey .st.you{background:var(--marigold-soft);border-color:var(--marigold)}
.journey .st.you::before{content:"You are here";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--marigold);color:#202124;font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:999px;white-space:nowrap}

/* cards */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){.g4,.g5{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;text-decoration:none;display:block;color:inherit}
a.card:hover,button.card:hover{border-color:var(--ink);}
.card .ico{font-size:1.6rem;line-height:1;margin-bottom:12px;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--ic,var(--sky-soft))}
.grid>*:nth-child(5n+1) .ico{--ic:var(--sky-soft)}.grid>*:nth-child(5n+2) .ico{--ic:var(--leaf-soft)}.grid>*:nth-child(5n+3) .ico{--ic:var(--marigold-soft)}.grid>*:nth-child(5n+4) .ico{--ic:var(--coral-soft)}.grid>*:nth-child(5n+5) .ico{--ic:var(--purple-soft)}
.card h3{margin-bottom:6px}
.card p{color:var(--muted);font-size:.97rem}
.card.tint{background:var(--mist);border-color:transparent}
.path{border-radius:var(--rl);padding:26px;color:#1C2333}
.path h3{font-size:1.5rem}
.path small{display:block;margin-top:8px;font-weight:700;opacity:.75}
.p-kids{background:#FFE1E8}.p-school{background:#DDF3FF}.p-students{background:#DFF6E6}.p-adults{background:#FFF1BF}.p-pro{background:#ECDFFF}

/* level rows */
.lvl{display:grid;grid-template-columns:110px 1fr auto;gap:22px;align-items:start;padding:24px 0;border-top:1px solid var(--line)}
.lvl:last-child{border-bottom:1px solid var(--line)}
@media (max-width:700px){.lvl{grid-template-columns:1fr}}
.lvl .code{font-family:var(--display);font-size:2rem;font-weight:800;line-height:1}
.lvl .code small{display:block;font-size:.85rem;color:var(--muted);font-family:var(--body);font-weight:700;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{background:var(--mist);border-radius:999px;padding:4px 11px;font-size:.85rem;font-weight:700}
.chip.gold{background:var(--marigold-soft)} .chip.leaf{background:var(--leaf-soft)} .chip.coral{background:var(--coral-soft)} .chip.sky{background:var(--sky-soft)}

/* lesson */
.lesson-hd{background:var(--mist);border-radius:var(--rl);padding:32px;margin-bottom:28px}
.steps{display:grid;gap:18px}
.step{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--paper)}
.step h3{display:flex;align-items:center;gap:10px}
.step h3 span{width:30px;height:30px;border-radius:50%;background:var(--purple);color:#fff;font-size:.85rem;display:grid;place-items:center;font-family:var(--body)}
.step .body{margin-top:12px}
.formula{font-family:var(--display);font-size:1.4rem;background:var(--marigold-soft);border-radius:var(--rs);padding:14px 18px;display:inline-block}
.ex{display:grid;gap:8px;margin-top:8px}
.ex div{background:#ffffff;border-radius:var(--rs);padding:10px 14px;border:1px solid #f0f0f0}
.ex div em{color:var(--muted);font-style:normal;font-size:.9rem;display:block}
.mistake{display:grid;gap:10px;margin-top:8px}
.mistake div{border-radius:var(--rs);padding:12px 14px;border-left:5px solid}
.mistake .no{border-color:var(--coral);background:var(--coral-soft);text-decoration:line-through}
.mistake .yes{border-color:var(--leaf);background:var(--leaf-soft)}
.mistake .why{border-color:var(--line);background:transparent;color:var(--muted);font-size:.95rem}
.speakbox{background:linear-gradient(135deg,var(--leaf),#1E9E6A);color:#fff;border-radius:var(--r);padding:24px}
.speakbox h3{color:#FFF4CC}
.timer{font-family:var(--display);font-size:3rem;font-weight:800;margin:10px 0}
.conj{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;max-width:420px;font-size:1.1rem;font-weight:700}
.conj span b{color:var(--leaf)}

/* quiz */
.q{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--paper)}
.q .prompt{font-family:var(--display);font-size:1.35rem;font-weight:700;margin:8px 0 16px}
.opts{display:grid;gap:8px}
.opt{text-align:left;border:2px solid var(--line);border-radius:var(--rs);padding:12px 16px;font-weight:700;background:var(--paper);transition:border-color .12s}
.opt:hover{border-color:var(--ink)}
.opt.ok{border-color:var(--leaf);background:var(--leaf-soft)}
.opt.bad{border-color:var(--coral);background:var(--coral-soft)}
.opt[disabled]{cursor:default}
.explain{margin-top:14px;padding:12px 16px;border-radius:var(--rs);background:var(--mist);font-size:.97rem}
.prog{height:8px;background:var(--mist2);border-radius:999px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--leaf);border-radius:999px;transition:width .4s}
.prog.gold i{background:var(--marigold)}
.result{background:var(--mist);border-radius:var(--rl);padding:36px;text-align:center}
.result .big{font-family:var(--display);font-size:4rem;font-weight:800;line-height:1}
.diff{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:640px){.diff{grid-template-columns:1fr 1fr}}
.diff button{border:2px solid var(--line);border-radius:var(--r);padding:18px 14px;text-align:left;background:var(--paper)}
.diff button:hover{border-color:var(--ink)}
.diff b{font-family:var(--display);font-size:1.3rem;display:block}
.diff small{color:var(--muted)}

/* speak */
.toggle{display:inline-flex;background:var(--mist);border-radius:999px;padding:4px;gap:2px;margin:14px 0}
.toggle button{padding:8px 16px;border-radius:999px;font-weight:800;font-size:.92rem;color:var(--muted)}
.toggle button.on{background:var(--paper);color:var(--text);box-shadow:0 1px 3px rgba(20,33,61,.15)}
.dialog{display:grid;gap:10px}
.line{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.line .who{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#fff}
.line .a{background:var(--purple)} .line .b{background:var(--leaf)}
.line .txt{background:var(--mist);border-radius:4px 14px 14px 14px;padding:10px 14px}
.line.b .txt{background:var(--leaf-soft);border-radius:14px 4px 14px 14px}
table.kt{width:100%;border-collapse:collapse;font-size:.97rem}
.kt th,.kt td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.kt th{font-size:.85rem;color:var(--muted)}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tag{display:inline-block;border-radius:6px;padding:2px 8px;font-size:.78rem;font-weight:800}
.t-no{background:var(--coral-soft);color:#9B2D12}.t-ok{background:var(--sky-soft);color:#1E4B8F}.t-nat{background:var(--leaf-soft);color:#0C5E55}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .t-no{color:#FFB39E}:root:not([data-theme="light"]) .t-ok{color:#A9C8FF}:root:not([data-theme="light"]) .t-nat{color:#9DE3D9}}

/* kids */
.kids{background:linear-gradient(135deg,#FFF1BF 0%,#FFE1E8 50%,#DDF3FF 100%);border-radius:var(--rl);padding:36px;color:#202124}
.kids h2{font-size:clamp(2rem,5vw,3.2rem)}
.abc{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-top:20px}
.abc button{background:#fff;border-radius:18px;padding:12px 6px;text-align:center;border:3px solid transparent;transition:transform .12s}
.abc button:hover{transform:translateY(-3px);border-color:#F4B400}
.abc .l{font-family:var(--display);font-size:2rem;font-weight:800;display:block;line-height:1}
.abc .e{font-size:1.6rem;display:block;margin:4px 0}
.abc small{font-weight:800;font-size:.85rem}
.flash{background:#fff;border-radius:var(--rl);padding:36px;text-align:center;max-width:460px;margin:0 auto}
.flash .emo{font-size:6rem;line-height:1}
.flash .w{font-family:var(--display);font-size:2.6rem;font-weight:800;margin-top:10px}
.flash .s{font-size:1.2rem;margin-top:8px}
.kidbtn{background:var(--sky);color:#fff;border-radius:999px;padding:14px 24px;font-weight:800;font-size:1.05rem}
.kidbtn.gold{background:var(--marigold);color:#202124}

/* dashboard */
.dash{display:grid;grid-template-columns:1fr 1.4fr;gap:18px}
@media (max-width:800px){.dash{grid-template-columns:1fr}}
.skill{display:grid;grid-template-columns:120px 1fr 44px;gap:12px;align-items:center;padding:9px 0}
.skill b{font-weight:800}
.skill small{text-align:right;color:var(--muted);font-weight:800}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.88rem;font-weight:800;opacity:.4}
.badge.earned{opacity:1;background:var(--marigold-soft);border-color:var(--marigold)}
.stat{background:var(--mist);border-radius:var(--r);padding:18px}
.stat b{font-family:var(--display);font-size:2.2rem;display:block;line-height:1}
.stat small{color:var(--muted);font-weight:700}

/* daily */
.daily{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:800px){.daily{grid-template-columns:1fr}}
.daily .card h4{color:var(--muted);font-size:.85rem;font-weight:800;margin-bottom:6px;font-family:var(--body)}
.daily .card .v{font-family:var(--display);font-size:1.5rem;font-weight:800}

/* faq / testimonials */
details{border-top:1px solid var(--line);padding:16px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:800;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::after{content:"+";font-family:var(--display);font-size:1.4rem;color:var(--muted)}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--muted)}
.quote{background:var(--mist);border-radius:var(--r);padding:22px}
.quote p{font-size:1.05rem}
.quote b{display:block;margin-top:12px;font-size:.9rem;color:var(--muted)}
.closing{background:#0A3FA8;color:#fff;border-radius:var(--rl);padding:56px 32px;text-align:center}
.closing h2{font-size:clamp(2rem,5vw,3.4rem);color:#fff}
.closing .lines{margin:22px auto;max-width:36ch;font-size:1.15rem;color:#fff;opacity:.92;line-height:1.7}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:#202124;color:#fff;padding:12px 20px;border-radius:999px;font-weight:800;opacity:0;transition:.25s;z-index:99;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}
.crumbs{font-size:.9rem;color:var(--muted);margin-bottom:14px}
.crumbs a{text-decoration:none}
.hide{display:none!important}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mt{margin-top:18px}.mt2{margin-top:32px}.mb{margin-bottom:18px}
ul.plain{list-style:none;display:grid;gap:8px}
ul.plain li{padding-left:22px;position:relative}
ul.plain li::before{content:"✓";position:absolute;left:0;color:var(--leaf);font-weight:800}

/* ===== Colour everywhere ===== */
.grid>.card:not([style*="background"]):nth-child(6n+1){background:var(--sky-soft);border-color:transparent}
.grid>.card:not([style*="background"]):nth-child(6n+2){background:var(--leaf-soft);border-color:transparent}
.grid>.card:not([style*="background"]):nth-child(6n+3){background:var(--marigold-soft);border-color:transparent}
.grid>.card:not([style*="background"]):nth-child(6n+4){background:var(--purple-soft);border-color:transparent}
.grid>.card:not([style*="background"]):nth-child(6n+5){background:var(--orange-soft);border-color:transparent}
.grid>.card:not([style*="background"]):nth-child(6n+6){background:var(--cyan-soft);border-color:transparent}
.grid>.card .ico{background:rgba(255,255,255,.75)}
a.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(32,33,36,.08);border-color:transparent}
.card{transition:transform .12s,box-shadow .12s}
.sec-head h2{position:relative;display:inline-block}
.sec-head h2::after{content:"";display:block;width:56px;height:5px;border-radius:3px;margin-top:10px;background:linear-gradient(90deg,#0A3FA8,#E8305A,#F5B800,#1FAE4D,#1FA7F0)}
.stat:nth-child(4n+1){background:var(--sky-soft)}.stat:nth-child(4n+2){background:var(--leaf-soft)}.stat:nth-child(4n+3){background:var(--marigold-soft)}.stat:nth-child(4n+4){background:var(--purple-soft)}
.lesson-hd.lv-b{background:linear-gradient(135deg,var(--leaf-soft),#fff)}.lesson-hd.lv-i{background:linear-gradient(135deg,var(--sky-soft),#fff)}.lesson-hd.lv-a{background:linear-gradient(135deg,var(--purple-soft),#fff)}
.step{border:1px solid #ECEFF4;background:#fff}
.step h3 span{background:#0A3FA8}
.track-h h3{padding-left:12px;border-left:5px solid var(--lc,var(--sky));border-radius:2px}
.lcard{border:1px solid #ECEFF4;background:#fff}
.lcard .k{background:var(--ls,var(--sky-soft));color:var(--lc,var(--sky))}
.quote{background:var(--marigold-soft)}.quote:nth-child(2){background:var(--sky-soft)}.quote:nth-child(3){background:var(--leaf-soft)}
details{background:transparent}
.journey .st{border:1px solid #ECEFF4;background:#fff}
.sayit::before{height:8px}
/* ===== Footer ===== */
footer{margin-top:56px;background:#F6F8FC;color:#202124;border-top:1px solid var(--line);padding:48px 0 28px}
footer a{color:#202124;text-decoration:none;opacity:.85}
footer a:hover{opacity:1;text-decoration:underline}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:28px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}
.fbrand{font-family:var(--display);font-weight:800;font-size:1.5rem;display:flex;align-items:center;gap:10px}
.fbrand img{height:36px;width:auto}
.ftag{margin-top:10px;color:var(--muted);max-width:34ch;line-height:1.6}
.fjourney{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.fjourney span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.78rem;font-weight:700}
footer h4{font-family:var(--body);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:8px;font-size:.95rem}
.fmotto{margin-top:36px;padding:22px 26px;border-radius:16px;background:#fff;border:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.fmotto b{font-family:var(--display);font-size:1.15rem}
.fbottom{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
/* ===== Phase 2 additions ===== */
.lv-b{--lc:var(--leaf);--ls:var(--leaf-soft)}.lv-i{--lc:var(--sky);--ls:var(--sky-soft)}.lv-a{--lc:var(--purple);--ls:var(--purple-soft)}
.lvcard{border-radius:var(--rl);padding:30px;background:var(--ls);border:2px solid transparent;text-decoration:none;color:inherit;display:block;position:relative;overflow:hidden}
.lvcard:hover{border-color:var(--lc)}
.lvcard h3{font-size:1.9rem;color:var(--lc)}
.lvcard p{margin-top:8px;color:var(--muted)}
.lvcard .n{position:absolute;right:18px;top:16px;font-family:var(--display);font-size:3.5rem;font-weight:800;opacity:.12;color:var(--lc)}
.lvcard .bar{margin-top:16px}
.lvpill{display:inline-block;border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:800;background:var(--ls);color:var(--lc)}
.track-h{display:flex;align-items:center;gap:10px;margin:34px 0 12px}
.track-h h3{font-size:1.35rem}
.track-h small{color:var(--muted);font-weight:700}
.lcard{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:inherit;background:var(--paper)}
.lcard:hover{border-color:var(--lc,var(--sky))}
.lcard.done{background:var(--leaf-soft);border-color:var(--leaf)}
.lcard .k{width:34px;height:34px;border-radius:10px;background:var(--mist);display:grid;place-items:center;font-weight:800;font-size:.85rem;color:var(--muted);flex:none}
.lcard.done .k{background:var(--leaf);color:#fff}
.lcard b{display:block;font-size:.98rem}
.lcard small{color:var(--muted)}
.lcard .nx{margin-left:auto;font-weight:800;color:var(--lc,var(--sky));white-space:nowrap;font-size:.85rem}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 20px}
.filters button{border:2px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:800;font-size:.9rem;background:var(--paper)}
.filters button.on{background:#202124;color:#fff;border-color:#202124}
.wordcard{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--paper)}
.wordcard .w{font-family:var(--display);font-size:1.5rem;font-weight:800;display:flex;align-items:center;gap:8px}
.wordcard .w button{font-size:1rem;background:var(--mist);border-radius:8px;padding:2px 8px}
.wordcard .m{margin-top:2px}
.wordcard .p{color:var(--muted);font-size:.85rem}
.wordcard .e{margin-top:8px;padding:8px 12px;background:var(--mist);border-radius:8px;font-size:.95rem}
.wordcard .sa{margin-top:8px;font-size:.88rem;color:var(--muted)}
.passage p{margin-bottom:12px;font-size:1.08rem;line-height:1.7}
.transcript{background:var(--mist);border-radius:12px;padding:16px;line-height:1.7}
pre.tpl{white-space:pre-wrap;font-family:var(--body);background:var(--mist);border-radius:12px;padding:16px;line-height:1.7}
.model{border-left:4px solid var(--leaf);padding:10px 16px;white-space:pre-wrap;line-height:1.6;background:var(--leaf-soft);border-radius:0 12px 12px 0}
.checks label{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer}
.checks input{width:20px;height:20px;margin-top:2px;accent-color:var(--leaf)}
.complete{background:linear-gradient(135deg,var(--sky-soft),var(--purple-soft));border-radius:var(--rl);padding:28px;margin-top:28px;text-align:center}
.complete.done{background:var(--leaf-soft)}
.review{display:grid;gap:10px;margin-top:18px;text-align:left}
.review div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.95rem;background:var(--paper)}
.review .ok{border-left:5px solid var(--leaf)} .review .bad{border-left:5px solid var(--coral)}
.review small{display:block;color:var(--muted);margin-top:4px}
.fillrow{display:flex;gap:8px;margin-top:6px}
.fillrow input{flex:1}
.act{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.act small{color:var(--muted);white-space:nowrap}
.think{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media (max-width:800px){.think{grid-template-columns:repeat(2,1fr)}}
.think button{border:2px solid var(--line);border-radius:14px;padding:16px 10px;text-align:center;background:var(--paper)}
.think button .e{font-size:2.2rem;display:block}
.think button .s{display:block;font-weight:700;color:var(--muted);font-size:.85rem;margin-top:6px}
.think button .a{display:block;font-family:var(--display);font-weight:800;margin-top:6px;min-height:1.4em}
.think button.rev{border-color:var(--leaf);background:var(--leaf-soft)}
.d30{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.d30 label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;background:var(--paper)}
.d30 label.done{background:var(--leaf-soft);border-color:var(--leaf)}
.d30 input{width:20px;height:20px;accent-color:var(--leaf);flex:none;margin-top:2px}
.d30 b{display:block;font-size:.8rem;color:var(--muted)}
.listenbtn{display:inline-flex;align-items:center;gap:8px;background:var(--sky);color:#fff;border-radius:999px;padding:12px 20px;font-weight:800}
.timerpick{display:inline-flex;gap:6px;background:var(--mist);padding:4px;border-radius:999px}
.timerpick button{padding:8px 14px;border-radius:999px;font-weight:800;color:var(--muted)}
.timerpick button.on{background:var(--paper);color:var(--text)}
.gradient-band{background:linear-gradient(135deg,var(--sky-soft),var(--purple-soft) 50%,var(--marigold-soft));border-radius:var(--rl);padding:32px}
.step.done h3 span{background:var(--leaf)}
/* ===== Navigation (professional, dot-free, hover + click) ===== */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:10px;height:64px;position:relative}
.logo{font-family:var(--display);font-weight:800;font-size:1.3rem;text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap;letter-spacing:-.02em}
.logo img{height:34px;width:auto;display:block}
.menu{display:flex;gap:2px;margin-left:auto;align-items:center}
.menu>div{position:relative}
.menu .top-link{display:flex;align-items:center;gap:4px;padding:8px 12px;border-radius:8px;font-weight:500;font-size:.95rem;color:#3C4043;text-decoration:none;white-space:nowrap;line-height:1}
.menu .top-link::before{display:none}
.menu .top-link:hover{background:var(--mist);color:#202124}
.menu .top-link.on{color:#0A3FA8}
.menu button.top-link::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:3px;opacity:.6}
.menu>div.open>.top-link{background:var(--mist);color:#202124}
.dd{position:absolute;top:100%;left:0;padding-top:8px;display:none;z-index:70;min-width:200px}
.dd .ddi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 12px 32px rgba(32,33,36,.14)}
.menu>div.open>.dd{display:block}
@media (hover:hover) and (pointer:fine){.menu>div:hover>.dd{display:block}}
.dd a{display:block;padding:7px 12px;border-radius:8px;text-decoration:none;font-weight:400;font-size:14px;color:#202124}
.dd a:hover{background:var(--mist)}
.ddstat{margin:6px 4px 2px;padding:9px 12px;border-top:1px solid var(--line);font-size:.85rem;font-weight:700;color:#5F6368;white-space:nowrap}
.menu .test{background:#0A3FA8;color:#fff;border-radius:8px;padding:9px 14px;font-weight:700;font-size:.93rem;text-decoration:none;white-space:nowrap;margin-left:8px}
.menu .test:hover{background:#082F80}
.menu .test::before{display:none}
.xp-pill{text-decoration:none;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-weight:700;font-size:.85rem;white-space:nowrap;color:#3C4043;margin-left:6px}
.burger{display:none;margin-left:auto;font-size:1.4rem;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:#fff;line-height:1}
@media (max-width:1180px){
  .burger{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:8px 0 14px;flex-direction:column;align-items:stretch;gap:0;box-shadow:0 20px 40px rgba(32,33,36,.12);max-height:calc(100vh - 80px);overflow-y:auto}
  .menu.show{display:flex}
  .menu>div{width:100%;border-bottom:1px solid var(--mist2)}
  .menu .top-link{width:100%;padding:13px 4px;font-size:1rem;border-radius:0;justify-content:space-between}
  .menu button.top-link::after{content:"";border-top:6px solid currentColor;transition:transform .15s}
  .menu>div.open>.top-link::after{transform:rotate(180deg)}
  .dd{position:static;padding:0 0 8px 14px;min-width:0}
  .dd .ddi{border:0;box-shadow:none;padding:0;border-radius:0}
  .dd a{padding:10px 8px}
  .menu>div:hover>.dd{display:none}
  .menu>div.open>.dd{display:block}
  .menu .test{margin:12px 0 4px;text-align:center;padding:12px}
  .xp-pill{margin-left:0}
}
/* ===== Kids level 1 ===== */
.kids-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;background:linear-gradient(135deg,#FFF1BF,#FFE1E8 50%,#DDF3FF);border-radius:var(--rl);padding:36px}
.kids-hero .kemoji{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.3;text-align:center;letter-spacing:.1em}
@media (max-width:760px){.kids-hero{grid-template-columns:1fr;padding:26px}.kids-hero .kemoji{font-size:2.2rem}}
.kids-hd{display:flex;gap:20px;align-items:center;border-radius:var(--rl);padding:28px;margin-bottom:8px}
.kids-hd .kbig{font-size:4.5rem;line-height:1;flex:none}
@media (max-width:600px){.kids-hd{flex-direction:column;align-items:flex-start}}
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.kgrid.two{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.kgrid.lessons{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.kcard{border-radius:20px;padding:16px 10px;text-align:center;color:#202124;text-decoration:none;border:3px solid transparent;transition:transform .12s}
.kcard.lesson:hover{transform:translateY(-3px);border-color:#0A3FA8}
.kcard.done{border-color:#1FAE4D}
.kcard .kl{font-family:var(--display);font-size:2.4rem;font-weight:800;line-height:1}
.kcard .kl small{font-size:1.2rem;font-weight:800;margin-left:4px;opacity:.6}
.kcard .ke{font-size:2.8rem;line-height:1.2;margin:6px 0}
.kcard .kw{font-weight:800;font-size:1.05rem;line-height:1.3}
.kcard small{display:block;color:var(--muted);font-weight:700;font-size:.8rem;margin-top:4px;line-height:1.3}
.kcard .kx{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:8px}
.kcard .kx span{background:rgba(255,255,255,.75);border-radius:999px;padding:3px 9px;font-size:.85rem;font-weight:800}
.kcard.row2{display:flex;gap:14px;align-items:center;text-align:left;padding:14px 16px}
.kcard.row2 .ke{margin:0;font-size:2.4rem}
.storybook{background:#fff;border:1px solid var(--line);border-radius:var(--rl);padding:28px;max-width:760px;margin:28px auto 0}
.spages{display:grid;gap:14px}
.spg{display:grid;grid-template-columns:84px 1fr;gap:18px;align-items:center;padding:18px 20px;border-radius:18px}
.spg .n{position:absolute}
.spg .semo{font-size:3.6rem;text-align:center}
.spg p{font-size:clamp(1.1rem,2.2vw,1.3rem);line-height:1.6;font-weight:500;margin:0}
@media (max-width:520px){.spg{grid-template-columns:1fr;text-align:center}}
.spage{text-align:center;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.semo{font-size:6rem;line-height:1}
.stext{font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.6;font-weight:600;max-width:34ch}
.sdots{display:flex;gap:6px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.sdots b{width:10px;height:10px;border-radius:50%;background:var(--line);cursor:pointer}
.sdots b.on{background:#0A3FA8}
.moral{text-align:center;background:var(--marigold-soft);border-radius:var(--r);padding:24px;margin-top:22px}
.moral p{font-size:1.15rem;font-weight:700}
/* ===== Mobile first polish ===== */
section.block{padding:30px 0}
@media (max-width:700px){
  section.block{padding:22px 0}
  .wrap{padding:0 16px}
  h1{font-size:clamp(1.9rem,8vw,2.6rem)}
  h2{font-size:clamp(1.45rem,5.5vw,1.9rem)}
  .hero{padding:28px 0 8px}
  .hero .sub{font-size:1rem}
  .hero .cta .btn,.cta .btn{width:100%;justify-content:center}
  .btn{padding:13px 18px}
  .card{padding:18px}
  .lesson-hd,.kids-hd,.gradient-band,.start,.closing,.result{padding:22px 18px}
  .step{padding:16px}
  .opt{min-height:50px;font-size:1rem}
  .complete .row .btn{width:100%;justify-content:center}
  .kgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .kgrid.lessons{grid-template-columns:repeat(2,1fr)}
  .kcard .ke{font-size:2.3rem}
  .dash{gap:12px}
  .skill{grid-template-columns:96px 1fr 40px}
  .fmotto{padding:18px}
  .fmotto .btn{width:100%;justify-content:center}
  .toggle{display:flex;width:100%}.toggle button{flex:1;padding:8px 6px;font-size:.85rem}
  .diff{grid-template-columns:1fr 1fr}
  .filters button{padding:7px 11px;font-size:.85rem}
  main#main{padding-top:18px!important}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  footer{padding-bottom:28px}
}
/* bottom tab bar (phones only) */
.tabbar{display:none}
@media (max-width:700px){
  .tabbar{display:grid!important;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:55;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar a{text-decoration:none;color:#5F6368;font-size:.68rem;font-weight:600;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;border-radius:10px}
  .tabbar a span{font-size:1.3rem;line-height:1}
  .tabbar a.on{color:#0A3FA8;background:var(--sky-soft)}
}
/* ===== Games & knowledge ===== */
.sb-line{min-height:56px;border:2px dashed var(--line);border-radius:12px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.sb-bank{display:flex;flex-wrap:wrap;gap:8px}
.sb-bank .chip,.sb-line .chip{cursor:pointer;border:1px solid var(--line)}
.memgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:520px;margin:0 auto}
@media (max-width:480px){.memgrid{grid-template-columns:repeat(3,1fr)}}
.mem{aspect-ratio:1;border-radius:14px;background:#0A3FA8;color:#fff;font-family:var(--display);font-size:1.6rem;font-weight:800;display:grid;place-items:center;transition:transform .15s}
.mem.up{background:#fff;color:#202124;border:2px solid #0A3FA8;font-size:1rem}
.mem.done{background:var(--leaf-soft);border-color:var(--leaf);color:#0C5E55}
.mem:hover{transform:scale(1.03)}
.letters{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:520px;margin:12px auto 0}
.lt{width:38px;height:40px;border-radius:9px;border:2px solid var(--line);background:#fff;font-weight:800;text-transform:uppercase}
.lt:hover{border-color:#0A3FA8}.lt[disabled]{opacity:.3}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;margin:0 auto}
.pairs>div{display:grid;gap:8px}
.pw{border:2px solid var(--line);border-radius:12px;padding:12px;font-weight:700;background:#fff;text-align:center}
.pw.sel{border-color:#0A3FA8;background:var(--sky-soft)}.pw.done{background:var(--leaf-soft);border-color:var(--leaf);opacity:.7}.pw.bad{border-color:var(--coral);background:var(--coral-soft)}
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px;margin:10px auto 0}
.box{border:2px dashed var(--line);border-radius:16px;padding:22px 12px;font-weight:800;font-size:1.05rem;background:#fff}
.box small{display:block;color:var(--muted);font-weight:600;margin-top:4px}
.box:hover{border-color:#0A3FA8}.box.bad{border-color:var(--coral);background:var(--coral-soft)}
.memgrid.medium{grid-template-columns:repeat(4,1fr)}.memgrid.hard{grid-template-columns:repeat(6,1fr);max-width:640px}@media (max-width:520px){.memgrid.hard{grid-template-columns:repeat(4,1fr)}}
#gdf{margin-left:8px}@media (max-width:520px){#gdf{margin-left:0}}
/* ===== Quick charts ===== */
.chart-sheet{background:#fff;border:2px solid #202124;border-radius:14px;padding:18px;overflow-x:auto}
.chart-title{font-family:var(--display);font-weight:800;font-size:1.3rem;margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline}
.chart-title small{font-weight:600;color:var(--muted);font-size:.8rem}
.chart-grid{display:grid;grid-template-columns:120px repeat(var(--n),1fr);gap:6px;min-width:620px}
.cg-corner{background:#202124;border-radius:8px}
.cg-col{color:#fff;font-weight:800;padding:10px 12px;border-radius:8px;font-size:.9rem}
.cg-row{color:#fff;font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:.04em;display:grid;place-items:center;border-radius:8px;padding:10px;text-align:center}
.cg-cell{border:1.5px solid #202124;border-radius:8px;padding:10px 12px;background:#fff}
.cg-f{font-weight:800;font-size:1rem;margin-bottom:6px}
.cg-tag{display:none}
.cg-ex{font-size:.95rem;line-height:1.45;padding-left:10px;position:relative}
.cg-ex::before{content:"•";position:absolute;left:0;color:var(--muted)}
.chart-note{margin-top:12px;background:var(--marigold-soft);border-radius:8px;padding:10px 14px;font-size:.95rem}
.chart-table .kt th{font-size:.85rem;font-weight:800}
.chart-table .kt td{font-size:.97rem}
@media (max-width:700px){
  .chart-grid{display:grid;grid-template-columns:1fr;min-width:0}
  .cg-corner,.cg-col,.cg-row{display:none}
  .cg-tag{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
  .chart-sheet{padding:12px}
}
@media print{
  header.top,footer,.tabbar,.noprint,.toast{display:none!important}
  main#main{padding:0!important;max-width:none}
  .chart-sheet{border:1px solid #000;break-inside:avoid}
  .chart-grid{min-width:0}
  body{padding:0;font-size:12px}
  .cg-col,.cg-row,.chart-table .kt th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

.fmotto>div>div{color:#fd3262!important;margin-top:4px}