/* Chirplings — client styles. Warm, soft-glow, kid-friendly. */
:root{
  --bg:#fff8ef; --bg2:#fff1df; --card:#ffffff; --ink:#4a4038; --muted:#9a8c7d;
  --brand:#ff9e2c; --brand-2:#ffce54; --glow:rgba(255,158,44,.35);
  --blue:#2f6bff; --green:#3aa856; --purple:#8e44ad;
  --radius:20px; --shadow:0 10px 30px rgba(120,90,40,.12);
  --tap:52px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:radial-gradient(1200px 600px at 50% -10%,var(--bg2),var(--bg));
  -webkit-text-size-adjust:100%;
}
#chirp-root{min-height:100%;display:flex;flex-direction:column}
.chirp-loading{align-items:center;justify-content:center;color:var(--muted)}

/* ── Brand header ── */
.chirp-brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.5rem;letter-spacing:-.02em}
.chirp-brand .bird{
  width:2.2rem;height:2.2rem;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--brand-2),var(--brand));
  box-shadow:0 0 0 6px var(--glow);display:grid;place-items:center;font-size:1.2rem;
}
.chirp-brand small{color:var(--brand)}

/* ── Layout ── */
.chirp-wrap{width:100%;max-width:960px;margin:0 auto;padding:1.25rem}
.chirp-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* ── Cards ── */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}
.auth-card{max-width:420px;margin:8vh auto 0}

/* ── Forms ── */
label{display:block;font-weight:700;margin:.9rem 0 .35rem;font-size:.95rem}
input,select,button{font:inherit}
input,select{
  width:100%;padding:.85rem 1rem;border:2px solid #f0e6d8;border-radius:14px;
  background:#fffdf9;color:var(--ink);min-height:var(--tap);
}
input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--glow)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:var(--tap);padding:.8rem 1.4rem;border:0;border-radius:16px;cursor:pointer;
  font-weight:800;background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#5a3a00;
  box-shadow:0 6px 16px var(--glow);width:100%;
}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;box-shadow:none;color:var(--brand);text-decoration:underline}
.btn.small{width:auto;min-height:40px;padding:.4rem .9rem;font-size:.9rem}
.seg{display:flex;gap:.5rem;margin:.35rem 0}
.seg button{flex:1;min-height:var(--tap);border:2px solid #f0e6d8;border-radius:14px;background:#fffdf9;font-weight:700;cursor:pointer;color:var(--muted)}
.seg button.on{border-color:var(--brand);color:var(--ink);background:#fff6e8}
.err{color:#c0392b;font-weight:700;margin:.6rem 0;min-height:1.2em}
.muted{color:var(--muted)}
h1,h2{letter-spacing:-.02em}
.tagline{color:var(--muted);margin:.25rem 0 1rem}

/* ── Levels grid ── */
.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin-top:1.25rem}
.level{
  border-radius:var(--radius);padding:1.1rem;color:#3b2f22;cursor:pointer;
  box-shadow:var(--shadow);border:3px solid rgba(0,0,0,.04);position:relative;overflow:hidden;
  min-height:110px;display:flex;flex-direction:column;justify-content:space-between;
}
.level .num{font-size:.8rem;font-weight:800;opacity:.7;text-transform:uppercase;letter-spacing:.08em}
.level .name{font-size:1.35rem;font-weight:900}
.level .count{font-weight:700;opacity:.75}

/* ── Word manager ── */
.wordrows{display:flex;flex-direction:column}
.wordrow{display:flex;align-items:center;justify-content:space-between;padding:.65rem .25rem;border-bottom:1px solid #f4ece0}
.wordrow:last-child{border-bottom:0}
.wtext{font-size:1.15rem;font-weight:700}
.wtext .tag{font-size:.7rem;font-weight:800;color:var(--brand);background:#fff2df;padding:.1rem .4rem;border-radius:8px;font-style:normal;margin-left:.4rem;vertical-align:middle}
.wactions{display:flex;gap:.4rem}
.chip{border:0;background:#fbf3e6;border-radius:12px;min-width:40px;min-height:40px;cursor:pointer;font-size:1rem}
.chip:active{transform:translateY(1px)}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(60,45,25,.45);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:50}
.modal{max-width:440px;width:100%;position:relative;max-height:90vh;overflow:auto}
.modal-x{position:absolute;top:.6rem;right:.6rem;border:0;background:#f4ece0;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:1rem}
textarea{font:inherit}

/* ── Learner picker ── */
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1rem;margin-top:1rem}
.learner-tile{border:0;background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:1.4rem .5rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.learner-tile:active{transform:translateY(1px)}
.lav{font-size:3rem;line-height:1}
.lname{font-weight:800;font-size:1.15rem}

/* ── Tabs ── */
.tabs{display:flex;gap:.5rem;margin:1rem 0}
.tabs button{border:0;background:#fbf3e6;border-radius:14px;padding:.6rem 1rem;font-weight:800;cursor:pointer;color:var(--muted)}
.tabs button.on{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#5a3a00}
.avpick{display:flex;flex-wrap:wrap;gap:.4rem}
.avopt{border:2px solid #f0e6d8;background:#fffdf9;border-radius:14px;width:52px;height:52px;font-size:1.7rem;cursor:pointer}
.avopt.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--glow)}

/* ── Kid full-screen game stage ── */
body:has(#chirp-root.kid){background:radial-gradient(1200px 800px at 50% -10%,#fff2d6,#ffe9c9)}
#chirp-root.kid{position:fixed;inset:0}
.stage{position:absolute;inset:0;display:flex;flex-direction:column;max-width:720px;margin:0 auto;
  padding:calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left))}
.stage-top{display:flex;align-items:center;gap:.75rem}
.stage-x{border:0;background:#ffffffcc;border-radius:50%;width:44px;height:44px;font-size:1.1rem;cursor:pointer;flex:0 0 auto}
.prog{flex:1;height:14px;background:#ffffff88;border-radius:99px;overflow:hidden}
.prog-bar{height:100%;background:linear-gradient(90deg,var(--brand-2),var(--brand));transition:width .3s}
.pcount{font-weight:800;color:#7a5a2a}
.stage-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;text-align:center}
.flash{font-size:clamp(3rem,16vw,7rem);font-weight:900;color:var(--ink);background:var(--card);border:0;border-radius:32px;box-shadow:var(--shadow);padding:2rem 2.5rem;cursor:pointer;letter-spacing:.02em;min-width:60vw}
.flash:active{transform:scale(.99)}
.flash-audio{font-size:4rem;min-width:auto;padding:2rem 2.4rem}
.find-prompt{font-size:1.3rem;font-weight:800;color:#7a5a2a;margin:0}
.answers{display:flex;gap:1rem;width:100%;max-width:520px}
.answers .btn{flex:1;font-size:1.2rem;padding:1.1rem}
.ans-miss{background:#ffe0e0!important;color:#a33!important;box-shadow:none!important}
.ans-know{background:linear-gradient(180deg,#b8f0c0,#68d67e)!important;color:#1c5c2c!important}
.options{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;max-width:520px}
.opt{font-size:1.6rem;font-weight:800;padding:1.3rem;border:0;border-radius:22px;background:var(--card);box-shadow:var(--shadow);cursor:pointer;color:var(--ink)}
.opt-good{background:linear-gradient(180deg,#b8f0c0,#68d67e)!important;color:#1c5c2c!important}
.opt-bad{background:#ffd6d6!important;color:#a33!important}
.complete .cheer{font-size:4.5rem}
.complete h1{margin:.3rem 0}
.complete .btn{max-width:280px}
/* While an answer is saving, freeze the stage so a second tap can't race. */
#chirp-root.kid.busy .stage-body{pointer-events:none;opacity:.75}
.stage-error{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:1.4rem 1.6rem;max-width:420px}
.stage-error p{margin:0 0 1rem;font-weight:700;color:#a33}

/* ── Mode picker wraps for 5 games ── */
.modewrap{flex-wrap:wrap}
.modewrap button{flex:1 1 40%;min-width:120px}

/* ── Blend / Sound it Out ── */
.blendword{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.grapheme{font-size:clamp(2.2rem,10vw,4rem);font-weight:900;color:var(--ink);background:var(--card);border:0;border-bottom:6px solid #ead9c0;border-radius:18px;padding:.6rem 1rem;cursor:pointer;min-width:1.4em}
.grapheme.lit{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#5a3a00;box-shadow:0 0 0 6px var(--glow);transform:translateY(-4px)}

/* ── Sentence ── */
.sentence{font-size:clamp(1.6rem,7vw,2.6rem);font-weight:800;line-height:1.4;color:var(--ink);max-width:16em}
.sentence .hl{background:linear-gradient(180deg,var(--brand-2),var(--brand));border-radius:10px;padding:0 .25em;color:#5a3a00}

/* ── Spelling ── */
.spell-slots{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;padding:.3rem;border-radius:14px}
.spell-slots.spell-good{box-shadow:0 0 0 4px #68d67e}
.spell-slots.spell-bad{box-shadow:0 0 0 4px #ffb0b0}
.slot{width:2rem;height:2.6rem;border-bottom:4px solid #cbb389;font-size:1.8rem;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.spell-tray{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}
.ltile{font-size:1.6rem;font-weight:900;width:3rem;height:3rem;border:0;border-radius:14px;background:var(--card);box-shadow:var(--shadow);cursor:pointer;color:var(--ink)}
.ltile.used{opacity:.25;cursor:default}

/* ── Classroom ── */
.classpill{background:#eef4ff;color:#2f6bff;font-weight:800;padding:.4rem .8rem;border-radius:99px;margin-right:auto;margin-left:.5rem}
.codebox{background:#fff6e8;border:2px dashed var(--brand);border-radius:14px;padding:.4rem .8rem;text-align:center;font-size:.8rem;color:var(--muted);letter-spacing:.05em}
.codebox b{font-size:1.3rem;color:var(--ink);letter-spacing:.15em}

/* ── Progress ── */
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}
.statcard{background:var(--card);border-radius:18px;box-shadow:var(--shadow);border:2px solid #f0e6d8;padding:1rem;text-align:center}
.statbig{font-size:1.9rem;font-weight:900;color:var(--ink)}
.statlbl{font-weight:700;color:var(--muted);font-size:.85rem}

/* ── Upsell banner ── */
.upsell{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(180deg,#fff3df,#ffe9c9);border:2px solid var(--brand-2);border-radius:16px;padding:.7rem 1rem;margin:.75rem 0;flex-wrap:wrap}
.upsell.paid{background:#eefaf0;border-color:#9be3ab}

/* ── Brand polish ── */
.hero-bird{display:block;width:96px;height:96px;margin:0 auto .4rem;filter:drop-shadow(0 8px 16px rgba(255,158,44,.35))}
.legal-foot{text-align:center;margin-top:1.2rem;font-size:.8rem;color:var(--muted)}
.legal-foot a{color:var(--muted);text-decoration:underline}
.chirp-loading{align-items:center;justify-content:center;color:var(--muted);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .hero-bird{animation:bob 3s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}

/* ── Blend finger-slider (worksheet-style sound-out) ── */
.blendstage{width:100%;max-width:560px;touch-action:none;user-select:none;-webkit-user-select:none}
.blendword{display:flex;gap:.4rem;flex-wrap:nowrap;justify-content:center}
.grapheme{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-size:clamp(2rem,11vw,4rem);font-weight:900;color:var(--ink);background:var(--card);
  border:0;border-bottom:6px solid #ead9c0;border-radius:18px;padding:.5rem .9rem;min-width:1.2em;
  transition:transform .12s,background .12s,box-shadow .12s;pointer-events:none}
.grapheme.lit{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#5a3a00;box-shadow:0 0 0 6px var(--glow);transform:translateY(-6px) scale(1.06)}
.blendtrack{position:relative;height:44px;margin-top:.5rem;border-radius:99px;
  background:repeating-linear-gradient(90deg,#ffe9c9,#ffe9c9 10px,#fff3df 10px,#fff3df 20px);
  box-shadow:inset 0 2px 4px rgba(180,140,80,.2);cursor:grab}
.blendtrack:active{cursor:grabbing}
.finger{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);font-size:1.8rem;
  transition:left .08s linear;filter:drop-shadow(0 3px 5px rgba(120,90,40,.35));pointer-events:none}

/* ── Spelling (typed input + per-letter feedback) ── */
.spell-ui{width:100%;max-width:440px}
.spellinput{width:100%;text-align:center;font-size:2rem;font-weight:900;letter-spacing:.12em;
  padding:.7rem;border:3px solid #f0e6d8;border-radius:16px;background:#fffdf9;color:var(--ink);text-transform:lowercase}
.spellinput:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--glow)}
.slot.sok{color:#1c7c3c;border-bottom-color:#68d67e}
.slot.sbad{color:#c0392b;border-bottom-color:#ff9e9e}

/* ── Letter Order (drag to arrange) ── */
.arrange-ref{font-size:1.8rem;font-weight:900;letter-spacing:.18em;color:#c9b083;border-bottom:3px dashed #e6d3ad;padding:0 .3rem .15rem}
.arrange-stage{position:relative;width:100%;max-width:600px;height:54vh;touch-action:none;user-select:none;-webkit-user-select:none}
.arrange-slots{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;padding-top:.4rem}
.aslot{width:50px;height:58px;border-radius:12px;background:#fffdf9;border:2px dashed #e6d3ad;border-bottom:5px solid #cbb389}
.aslot.filled{border-style:solid;border-bottom-color:var(--brand)}
.aslot.sok{background:#e6f7ea;border-color:#68d67e;border-bottom-color:#68d67e}
.aslot.sbad{background:#fdecec;border-color:#ff9e9e;border-bottom-color:#ff9e9e}
.atile{position:absolute;width:50px;height:58px;display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;font-weight:900;color:var(--ink);background:var(--card);border-radius:12px;
  box-shadow:var(--shadow);cursor:grab;touch-action:none;z-index:1;transition:left .14s,top .14s,transform .1s}
.atile.drag{cursor:grabbing;z-index:20;transition:none;transform:scale(1.12);box-shadow:0 12px 24px rgba(120,90,40,.35)}

/* ── My Voice record button ── */
.chip.recording{background:#e23b3b;color:#fff;animation:recpulse 1s infinite}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(226,59,59,.5)}50%{box-shadow:0 0 0 6px rgba(226,59,59,0)}}

/* ── Post-checkout welcome / onboarding ── */
.welcome{max-width:520px}
.onboard{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem}
.onboard-step{display:flex;align-items:center;gap:.9rem;text-align:left;border:0;cursor:pointer;
  background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:1rem 1.1rem}
.onboard-step:active{transform:translateY(1px)}
.ob-emoji{font-size:2rem;line-height:1}
.ob-txt{flex:1;display:flex;flex-direction:column}
.ob-txt b{font-size:1.1rem}
.ob-txt small{color:var(--muted);font-weight:600}
.ob-go{font-size:1.4rem;color:var(--brand);font-weight:900}

/* Feedback threads */
.fb-thread{margin-top:.8rem}
.fb-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.fb-status{margin-left:auto;font-size:.7rem;font-weight:800;text-transform:uppercase;padding:.15rem .5rem;border-radius:8px}
.fb-open{background:#fff2df;color:#a5670c}
.fb-answered{background:#e6f7ea;color:#1c7c3c}
.fb-closed{background:#eee;color:#888}
.fb-msg{padding:.55rem .8rem;border-radius:14px;margin:.35rem 0;max-width:88%}
.fb-user{background:#f2f6ff;margin-left:auto}
.fb-admin{background:#fff6e2}
.fb-who{display:block;font-size:.7rem;font-weight:800;color:var(--muted);margin-bottom:.15rem}
.fb-reply{width:100%;margin-top:.5rem}
.fb-actions{display:flex;gap:.5rem;margin-top:.4rem}
.fb-actions .btn{width:auto}

/* Read-aloud (speech-to-text) mic */
.mic-btn{font-size:3rem;width:110px;height:110px;border-radius:50%;border:0;cursor:pointer;
  background:var(--card);box-shadow:var(--shadow);color:var(--ink)}
.mic-btn:active{transform:scale(.97)}
.mic-btn.listening{animation:recpulse 1s infinite;background:#ffe9e9}
.mic-btn:disabled{opacity:.6}
.mic-fb{min-height:1.6em;font-weight:800;color:#7a5a2a;text-align:center}
.mic-ok{color:#1c7c3c}
.mic-no{color:#c0392b}

/* Game picker: the goal's egg-earning game stands out. */
.modewrap button.counts{border-color:#f0c040;background:#fff9e8}
.modewrap button.counts.on{background:linear-gradient(180deg,var(--brand-2),var(--brand));border-color:var(--brand)}
.seg-hint{font-size:.82rem;margin:.4rem 0 0}

/* ── Toggle switch ── */
.toggle{flex:0 0 auto;width:52px;height:30px;border-radius:99px;border:0;background:#e2d6c4;position:relative;cursor:pointer;transition:background .2s;padding:0}
.toggle.on{background:#68d67e}
.toggle .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s}
.toggle.on .knob{left:25px}

/* ── Reward loop: nest banner, nest view, hatch celebration ── */
.nest-banner{display:flex;justify-content:space-between;align-items:center;gap:.5rem;width:100%;
  border:0;cursor:pointer;background:linear-gradient(180deg,#fff6e2,#ffeccb);border-radius:18px;
  box-shadow:var(--shadow);padding:.85rem 1.1rem;margin-bottom:1rem;font-weight:800;color:#7a5a2a}
.nest-banner:active{transform:translateY(1px)}
.nb-star{font-size:1.15rem;color:#c98a1a}
.nb-birds{font-size:1.05rem}
.nb-next{font-size:.85rem;color:var(--muted);font-weight:700}
.nest-stars{font-size:2rem;font-weight:900;color:#c98a1a;margin:.4rem 0 .2rem}
.nest-progress{width:100%;max-width:460px;text-align:center}
.nest-progress p{margin:.2rem 0 .5rem;font-weight:700;color:#7a5a2a}
.nest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.8rem;width:100%;max-width:560px;margin-top:1.4rem}
.nest-bird{background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:1rem .5rem;text-align:center}
.nb-emoji{font-size:2.6rem;line-height:1}
.nb-name{font-weight:800;color:var(--ink);margin-top:.3rem;font-size:.9rem}
.earned-stars{font-size:1.8rem;font-weight:900;color:#c98a1a;margin:.3rem 0}
.hatch-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(800px 600px at 50% 40%,#fff5d6ee,#ffe6b8f2);padding:1.5rem}
.hatch-card{background:var(--card);border-radius:28px;box-shadow:0 20px 50px rgba(120,90,40,.35);
  padding:2rem 1.6rem;text-align:center;max-width:360px;position:relative}
.hatch-card h1{margin:.3rem 0}
.hatch-name{color:var(--muted);font-weight:700;margin:.2rem 0 1rem}
.hatch-egg{font-size:4.5rem;line-height:1}
.hatch-bird{font-size:5rem;line-height:1;display:none}
.hatch-overlay.cracked .hatch-egg{display:none}
.hatch-overlay.cracked .hatch-bird{display:block}
@media (prefers-reduced-motion:no-preference){
  .hatch-egg{animation:wiggle .5s ease-in-out infinite}
  .hatch-overlay.cracked .hatch-bird{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
  @keyframes wiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
  @keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
}

/* ══ Marketing landing (public, server-rendered) ══ */
#landing{max-width:1080px;margin:0 auto;padding:0 1.1rem 2rem}
.lp-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;position:sticky;top:0;z-index:5;
  background:linear-gradient(180deg,var(--bg) 70%,transparent)}
.lp-logo{font-weight:900;font-size:1.35rem;color:var(--ink)}
.lp-logo small{color:var(--brand)}
.lp-navlinks{display:flex;align-items:center;gap:1rem}
.lp-navlinks a{color:var(--muted);text-decoration:none;font-weight:700}
.lp-navlinks a:hover{color:var(--ink)}
.lp-btn{border:0;cursor:pointer;background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#5a3a00;
  font-weight:800;border-radius:14px;padding:.6rem 1.1rem;font-size:.95rem;box-shadow:var(--shadow)}
.lp-btn:active{transform:translateY(1px)}
.lp-btn.ghost{background:#fff;color:var(--ink);box-shadow:none;border:2px solid #f0e6d8}
.lp-btn.big{font-size:1.1rem;padding:.9rem 1.6rem}
.lp-hero{display:flex;align-items:center;gap:2rem;padding:2rem 0 1rem}
.lp-hero-text{flex:1}
.lp-hero h1{font-size:clamp(2rem,6vw,3.2rem);line-height:1.08;margin:.2rem 0}
.lp-accent{color:var(--brand)}
.lp-sub{font-size:1.15rem;color:#6a5c4d;max-width:34rem;margin:1rem 0}
.lp-cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.2rem}
.lp-trust{color:var(--muted);font-weight:700;margin-top:.9rem;font-size:.9rem}
.lp-hero-art{flex:0 0 auto}
.lp-hero-art img{filter:drop-shadow(0 16px 30px rgba(255,158,44,.35))}
.lp-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.5rem 0}
.lp-strip div{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:1rem;display:flex;flex-direction:column;gap:.25rem}
.lp-strip b{font-size:1rem}
.lp-strip span{color:var(--muted);font-size:.85rem;font-weight:600}
.lp-section{padding:2.5rem 0}
.lp-section.tint{background:linear-gradient(180deg,#fff6e6,#fff8ef);border-radius:28px;padding:2.5rem 1.5rem;margin:1rem 0}
.lp-section h2{font-size:clamp(1.5rem,4vw,2.1rem);text-align:center;margin:0 0 1.5rem}
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.lp-step{background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:1.4rem}
.lp-step-n{width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;font-weight:900;display:grid;place-items:center;margin-bottom:.6rem}
.lp-step b{font-size:1.15rem}
.lp-step p{color:#6a5c4d;margin:.4rem 0 0}
.lp-games{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.lp-game{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:1.2rem;text-align:center}
.lp-game span{font-size:2.2rem;display:block}
.lp-game b{display:block;margin:.4rem 0 .1rem}
.lp-game p{color:var(--muted);margin:0;font-size:.9rem;font-weight:600}
.lp-teacher{display:flex;align-items:center;gap:2rem;background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:2rem}
.lp-teacher-text{flex:1}
.lp-teacher-text h2{text-align:left;margin:.2rem 0 .8rem}
.lp-teacher-text p{color:#6a5c4d;margin:0 0 1.2rem}
.lp-teacher-art{font-size:3rem;flex:0 0 auto}
.lp-price-note{text-align:center;color:var(--muted);font-weight:700;margin:-1rem 0 1.5rem}
.lp-price-note.small{font-size:.9rem;margin-top:1.5rem}
.lp-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:start}
.lp-plan{background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:1.6rem 1.4rem;position:relative;border:2px solid transparent}
.lp-plan.featured{border-color:var(--brand);transform:scale(1.03)}
.lp-plan-badge{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-weight:800;font-size:.75rem;padding:.25rem .7rem;border-radius:99px}
.lp-plan-name{font-weight:800;font-size:1.15rem;color:var(--brand)}
.lp-plan-price{font-size:2.2rem;font-weight:900;margin:.3rem 0}
.lp-plan-price small{font-size:1rem;font-weight:700;color:var(--muted)}
.lp-plan-annual{color:var(--muted);font-weight:700;font-size:.85rem;margin-bottom:.8rem}
.lp-plan ul{list-style:none;padding:0;margin:.8rem 0 1.2rem;text-align:left}
.lp-plan li{padding:.3rem 0;color:#5a4e40;font-weight:600;font-size:.92rem}
.lp-plan .lp-btn{width:100%}
.lp-faq{max-width:44rem;margin:0 auto;display:flex;flex-direction:column;gap:.6rem}
.lp-faq details{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:.9rem 1.1rem}
.lp-faq summary{cursor:pointer;font-weight:800;list-style:none}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq p{color:#6a5c4d;margin:.6rem 0 0}
.lp-final{text-align:center;padding:3rem 1rem}
.lp-final h2{font-size:clamp(1.6rem,5vw,2.4rem);margin:0 0 1.2rem}
.lp-footer{text-align:center;padding:2rem 0;color:var(--muted);border-top:1px solid #f0e6d8;margin-top:2rem}
.lp-footer nav{margin:.5rem 0}
.lp-footer nav a{color:var(--muted);font-weight:700}
@media (max-width:820px){
  .lp-hero{flex-direction:column-reverse;text-align:center}
  .lp-cta-row{justify-content:center}
  .lp-sub{margin-left:auto;margin-right:auto}
  .lp-strip{grid-template-columns:1fr 1fr}
  .lp-steps,.lp-games,.lp-plans{grid-template-columns:1fr}
  .lp-teacher{flex-direction:column;text-align:center}
  .lp-teacher-text h2{text-align:center}
  .lp-plan.featured{transform:none}
  .lp-navlinks a{display:none}
  .lp-hero-art img{width:170px;height:170px}
}