/* The pages around the lesson: landing, sign-in, dashboard, account, notes.
   The lesson itself keeps css/app.css; both share these tokens so the product
   feels like one thing. Rebuilt 2026-09-15 for a professional front. */

:root{
  --paper:#fdfcf8;
  --paper2:#f6f4ee;
  --paper3:#efece3;
  --ink:#24242c;
  --ink-soft:#5f5f6d;
  --ink-faint:#9a9aa6;
  --line:#e7e3d9;
  --dot:#d8d3c6;
  --blue:#6ba7de;
  /* The mockup's blue (2026-09-24). Changed at the token, so the lesson
     screen, login and dashboard follow the same brand rather than drifting. */
  --accent:#1677ff;
  --accent-dark:#0f5fd8;
  --accent-soft:#eaf4ff;
  --violet:#7a5cf0;
  --violet-soft:#efeafe;
  --green:#3aa675;
  --green-soft:#dff3e8;
  --amber:#e59a2f;
  --amber-soft:#fdf1dc;
  --red:#d0574d;
  --red-soft:#fbe3e1;
  --hand:'Caveat', cursive;
  --hand2:'Kalam', cursive;
  --ui:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow-sm:0 1px 2px rgba(40,40,60,.06), 0 2px 8px rgba(40,40,60,.04);
  --shadow:0 10px 30px rgba(50,50,80,.08);
  --shadow-lg:0 30px 80px rgba(40,40,80,.16);
  --r-sm:10px; --r:16px; --r-lg:24px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ui);color:var(--ink);line-height:1.55;background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
.wrap{width:min(1180px,92vw);margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hand{font-family:var(--hand);font-weight:700}

/* ------------------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.4) blur(10px);background:#fdfcf8d9;border-bottom:1px solid transparent;transition:border-color .2s, box-shadow .2s}
.nav.scrolled{border-color:var(--line);box-shadow:0 4px 20px rgba(40,40,60,.04)}
.nav .wrap{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:inline-flex;align-items:center;gap:0;font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand .logo{width:32px;height:32px;border-radius:9px;display:block;margin-right:9px;box-shadow:0 4px 12px rgba(15,23,42,.25)}
.brand span{color:var(--accent)}
.nav nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav nav a:not(.btn){text-decoration:none;color:var(--ink-soft);font-size:14.5px;padding:8px 13px;border-radius:10px;font-weight:500}
.nav nav a:not(.btn):hover,.nav nav a.on{color:var(--ink);background:var(--paper2)}
.nav .btn{margin-left:6px}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:10px 18px;border-radius:12px;font-size:14.5px;font-weight:500;line-height:1.2;
  transition:border-color .15s, box-shadow .15s, transform .15s, background .15s;white-space:nowrap;
}
.btn:hover{border-color:#cdc8bb;box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn.primary{border-color:transparent;background:var(--accent);color:#fff;font-weight:600;box-shadow:0 6px 18px rgba(46,167,224,.32)}
.btn.primary:hover{background:var(--accent-dark);box-shadow:0 8px 22px rgba(46,167,224,.4)}
.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.dark:hover{background:#000}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-soft)}
.btn.ghost:hover{background:var(--paper2);color:var(--ink);box-shadow:none}
.btn.lg{padding:15px 26px;font-size:16px;border-radius:14px}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:10px}
.btn.block{display:flex;width:100%}
.btn .spin{width:16px;height:16px;border-radius:50%;border:2px solid #ffffff80;border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------------- bits */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink-soft);background:#fff;border:1px solid var(--line);padding:6px 14px 6px 8px;border-radius:999px;box-shadow:var(--shadow-sm)}
.eyebrow b{background:var(--green-soft);color:#237a52;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;letter-spacing:.02em}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);background:var(--paper2);white-space:nowrap}
.pill.ready,.pill.green{color:#237a52;background:var(--green-soft);border-color:#c3e6d3}
.pill.blue{color:#15729f;background:var(--accent-soft);border-color:#c4e5f5}
.pill.violet{color:#5b3fd1;background:var(--violet-soft);border-color:#dcd2fb}
.pill.amber{color:#94600f;background:var(--amber-soft);border-color:#f3dcb2}
.pill.red{color:#a13a31;background:var(--red-soft);border-color:#f2c6c1}
.msg{font-size:14px;border-radius:12px;padding:11px 14px;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start}
.msg.err{color:#8a3a34;background:var(--red-soft);border:1px solid #f0c0bc}
.msg.ok{color:#23704d;background:var(--green-soft);border:1px solid #bfe3d0}
.msg.info{color:#15729f;background:var(--accent-soft);border:1px solid #c4e5f5}

/* ----------------------------------------------------------------- forms */
.field{margin-bottom:16px}
.field label{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;font-weight:500;color:var(--ink);margin-bottom:7px}
.field label small{font-weight:400;color:var(--ink-faint);font-size:12.5px}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font-size:15px;color:var(--ink);background:#fff;outline:0;transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{color:#b3b0a8}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px #2ea7e01f}
.field.invalid input{border-color:var(--red);box-shadow:0 0 0 4px #d0574d18}
.field .help{font-size:12.5px;color:var(--ink-faint);margin-top:6px}
.field .err{font-size:12.5px;color:var(--red);margin-top:6px}
.pw{position:relative}
.pw input{padding-right:64px}
.pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--ink-soft);font-size:12.5px;font-weight:500;padding:6px 8px;border-radius:8px}
.pw button:hover{background:var(--paper2);color:var(--ink)}
.meter{display:flex;gap:4px;margin-top:8px}
.meter i{flex:1;height:4px;border-radius:2px;background:var(--paper3);transition:background .2s}
.meter[data-level="1"] i:nth-child(-n+1){background:var(--red)}
.meter[data-level="2"] i:nth-child(-n+2){background:var(--amber)}
.meter[data-level="3"] i:nth-child(-n+3){background:var(--green)}
.meter[data-level="4"] i{background:var(--green)}
.seg{display:inline-flex;background:var(--paper2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:8px 16px;border-radius:9px;font-size:14px;color:var(--ink-soft);font-weight:500}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

/* ================================================================ LANDING */
.hero{position:relative;overflow:hidden;padding:64px 0 40px}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(900px 520px at 8% -8%, #e6f3fc 0%, transparent 60%),
    radial-gradient(760px 480px at 96% 4%, #fbe9f3 0%, transparent 58%),
    radial-gradient(700px 400px at 60% 110%, #efeafe 0%, transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(36px,4.8vw,60px);line-height:1.04;letter-spacing:-.035em;font-weight:700;margin:22px 0 20px}
.hero h1 .hand{color:var(--violet);font-size:1.14em;letter-spacing:0;position:relative;white-space:nowrap}
.hero h1 .hand::after{content:"";position:absolute;left:2%;right:2%;bottom:.02em;height:.14em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 50 2 100 7 T 198 5' fill='none' stroke='%232ea7e0' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;opacity:.7}
.hero .lead{font-size:18.5px;color:var(--ink-soft);margin:0 0 30px;max-width:50ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;color:var(--ink-soft);font-size:13.5px}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust span::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%233aa675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%}

.shot{position:relative}
.frame{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg),0 0 0 1px rgba(40,40,60,.05);border:1px solid #ffffffcc;overflow:hidden;position:relative}
.frame .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#f7f5f0;border-bottom:1px solid var(--line)}
.frame .bar i{width:10px;height:10px;border-radius:50%;background:#ee6a5f}
.frame .bar i:nth-child(2){background:#f5be4f}
.frame .bar i:nth-child(3){background:#62c554}
.frame .bar .url{margin-left:12px;flex:1;max-width:320px;background:#fff;border:1px solid var(--line);border-radius:7px;font-size:11.5px;color:var(--ink-faint);padding:4px 10px}
.frame img{width:100%;height:auto}
.float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:11px 14px;font-size:13.5px;display:flex;align-items:center;gap:10px;animation:bob 6s ease-in-out infinite}
.float .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:16px;flex:none}
.float b{display:block;font-size:13.5px}
.float small{color:var(--ink-soft);font-size:12px}
.float.f1{left:-34px;bottom:74px}
.float.f2{right:-22px;top:78px;animation-delay:-3s}
.float.f3{right:36px;bottom:-22px;animation-delay:-1.5s}
/* Static, not bobbing: a continuously-animated sticker reads as a kids' app,
   not a product screenshot. The .float callouts keep their motion -- they
   carry real information (a Notion/Linear-style hero annotation), a plain
   decorative illustration does not need one. */
.deco{position:absolute;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(60,50,30,.10));opacity:.9}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion: reduce){.float,.deco{animation:none}}

/* Hero demo loop -- a stylised 11s replay of a lesson's shape (teacher line,
   board fills in, a question, an answer), not a recording. Uses the same
   dotted-paper texture as the real board (--dot, css/app.css) so it reads as
   the same product, just drawn small. */
.demo-stage{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 24px 26px;min-height:340px}
.demo-row.bubble{display:flex;align-items:flex-start;gap:10px}
.demo-row.bubble .av{font-size:22px;line-height:1;flex:none}
.demo-row.bubble .say-wrap{position:relative;flex:1;min-height:1.6em;margin:2px 0 0}
.demo-row.bubble .say{position:absolute;left:0;top:0;font-size:15px;color:var(--ink);font-weight:500}
.demo-board{position:relative;border-radius:14px;background-image:radial-gradient(#d8d3c6 1.15px, transparent 1.15px);background-size:22px 22px;background-color:#fdfcf8;border:1px solid var(--line);padding:22px 18px;text-align:center}
.demo-heading{font-family:var(--hand);font-weight:700;font-size:26px;color:var(--blue);letter-spacing:.02em;position:relative;display:inline-block}
.demo-heading::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-.12em;height:.1em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 50 2 100 7 T 198 5' fill='none' stroke='%236ba7de' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.demo-diagram{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;font-size:13px;color:var(--ink-soft)}
.demo-obj{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:30px}
.demo-obj small{font-size:12px;font-weight:500;color:var(--ink-soft)}
.demo-arrows{display:flex;flex-direction:column;gap:6px;font-family:var(--hand2);font-size:15px;color:var(--ink-soft);font-weight:700}
.demo-question{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:14px 16px}
.demo-question p{margin:0 0 10px;font-size:14.5px;font-weight:600;color:var(--ink)}
.demo-opts{display:flex;gap:10px}
.demo-opts .opt{position:relative;flex:1;text-align:center;border:1.5px solid var(--line);border-radius:10px;padding:9px;font-size:14px;font-weight:500;color:var(--ink-soft);background:#fff;transition:border-color .2s,background .2s,color .2s}
.demo-opts .tick{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font-size:11px;font-style:normal;display:grid;place-items:center;box-shadow:var(--shadow-sm)}

.demo-row.bubble .say1{animation:demoSay1 11s infinite}
.demo-row.bubble .say2{animation:demoSay2 11s infinite}
.demo-heading,.demo-diagram{animation:demoDraw 11s infinite}
.demo-question{animation:demoQuestion 11s infinite}
.demo-opts .tick{animation:demoTick 11s infinite}
.demo-opts .opt.wood{animation:demoPick 11s infinite}
@keyframes demoSay1{0%,58%{opacity:1}64%,100%{opacity:0}}
@keyframes demoSay2{0%,78%{opacity:0}84%,98%{opacity:1}100%{opacity:0}}
@keyframes demoDraw{0%,18%{opacity:0;transform:translateY(4px)}26%,94%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes demoQuestion{0%,42%{opacity:0;transform:translateY(6px)}48%,94%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes demoTick{0%,58%{opacity:0;transform:scale(.4)}64%,94%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes demoPick{0%,58%{border-color:var(--line);background:#fff;color:var(--ink-soft)}64%,94%{border-color:var(--green);background:var(--green-soft);color:#237a52}100%{border-color:var(--line);background:#fff;color:var(--ink-soft)}}
@media (prefers-reduced-motion: reduce){
  .demo-row.bubble .say,.demo-heading,.demo-diagram,.demo-question,.demo-opts .tick,.demo-opts .opt.wood{animation:none}
  .demo-row.bubble .say1{opacity:0}
  .demo-row.bubble .say2{opacity:1}
  .demo-heading,.demo-diagram,.demo-question,.demo-opts .tick{opacity:1;transform:none}
  .demo-opts .opt.wood{border-color:var(--green);background:var(--green-soft);color:#237a52}
}
@media (max-width:760px){.demo-stage{min-height:0;padding:18px}}

.strip{padding:22px 0 8px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.stats div{padding:22px 26px;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-size:30px;letter-spacing:-.03em;line-height:1.1}
.stats span{color:var(--ink-soft);font-size:13.5px}

section.band{padding:92px 0}
section.band.tint{background:linear-gradient(180deg,#f8f6f0 0%,#fdfcf8 100%)}
.sec-head{text-align:center;max-width:720px;margin:0 auto 54px}
.sec-head .kicker{display:inline-block;font-size:13px;font-weight:600;color:var(--accent-dark);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.sec-head h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.03em;line-height:1.12;margin:0 0 14px;font-weight:700}
.sec-head p{color:var(--ink-soft);font-size:17px;margin:0}

.feature{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center;margin-bottom:96px}
.feature:last-child{margin-bottom:0}
.feature.flip{grid-template-columns:1.15fr 1fr}
.feature.flip .copy{order:2}
.feature .copy h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.025em;line-height:1.15;margin:14px 0 14px;font-weight:700}
.feature .copy p{color:var(--ink-soft);font-size:16.5px;margin:0 0 20px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.ticks li{display:flex;gap:11px;font-size:15px;align-items:flex-start}
.ticks li::before{content:"";flex:none;margin-top:3px;width:18px;height:18px;border-radius:6px;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%231b8fc6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%}
.feature .visual{position:relative}
.feature .visual .frame{border-radius:16px}

/* The same hand-drawn avatar the lesson screen glows while she talks
   (learn.html #tutor) -- reused here rather than a stock photo, since every
   picture on this page is meant to be the real product. */
.tara-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg),0 0 0 1px rgba(40,40,60,.05);padding:40px 30px;text-align:center}
.tara-avatar{width:120px;height:120px;margin:0 auto 18px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 72%);display:grid;place-items:center}
.tara-avatar svg{width:88px;height:88px}
.tara-traits{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;text-align:left}
.tara-traits li{font-size:14px;color:var(--ink-soft);padding:9px 14px;background:var(--paper2);border-radius:10px;line-height:1.4}

.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin:0 auto 54px}
.vs-col{border-radius:var(--r-lg);padding:22px 26px;border:1px solid var(--line)}
.vs-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.vs-col li{font-size:14.5px;line-height:1.4;padding-left:26px;position:relative}
.vs-head{display:block;font-weight:700;font-size:15px;margin-bottom:14px}
.vs-video{background:var(--paper2)}
.vs-video .vs-head{color:var(--ink-soft)}
.vs-video li{color:var(--ink-soft)}
.vs-video li::before{content:"–";position:absolute;left:4px;color:var(--ink-faint);font-weight:700}
.vs-tara{background:var(--accent-soft);border-color:#bfe0f2}
.vs-tara .vs-head{color:var(--accent-dark)}
.vs-tara li::before{content:"";position:absolute;left:2px;top:3px;width:16px;height:16px;border-radius:5px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%231b8fc6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%}
@media (max-width:720px){.vs{grid-template-columns:1fr}}

.cards6{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm);transition:transform .2s, box-shadow .2s}
.fcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.fcard .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;margin-bottom:16px}
.fcard h4{margin:0 0 6px;font-size:16.5px;letter-spacing:-.01em}
.fcard p{margin:0;color:var(--ink-soft);font-size:14.5px}
.ic.blue{background:var(--accent-soft)} .ic.violet{background:var(--violet-soft)} .ic.green{background:var(--green-soft)} .ic.amber{background:var(--amber-soft)} .ic.red{background:var(--red-soft)}

.subjects{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.subject{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 30px 26px;overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s,border-color .2s}
.subject:hover{box-shadow:var(--shadow);border-color:#e5e0d2}
.subject .art{position:absolute;right:18px;top:18px;width:116px;height:116px;object-fit:contain}
.subject h3{font-size:24px;margin:10px 0 4px;letter-spacing:-.02em}
.subject .meta{color:var(--ink-soft);font-size:14px;margin-bottom:20px}
.subject ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px;max-width:78%}
.subject li{display:flex;align-items:center;gap:10px;font-size:14.5px;padding:9px 12px;border-radius:10px;background:var(--paper)}
.subject li .pill{margin-left:auto}
.subject li.more{background:none;color:var(--ink-soft);font-size:13px;padding:6px 12px}
.subject li:has(a){padding:0}
.subject li a{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;color:inherit;text-decoration:none;border-radius:10px}
.subject li a:hover{background:var(--paper2)}
.subject .progress{height:6px;border-radius:3px;background:var(--paper3);overflow:hidden;margin-bottom:18px}
.subject .progress i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#6fcf9d);border-radius:3px}

.how{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.how div{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;text-align:center;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s}
.how div:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.how img{width:96px;height:96px;object-fit:contain;margin:0 auto 12px}
.how h4{margin:0 0 6px;font-size:17px}
.how p{margin:0;color:var(--ink-soft);font-size:14.5px}

.faq{max-width:780px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0 22px;box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;cursor:pointer;padding:19px 0;font-weight:600;font-size:16px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--ink-soft);line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--ink-soft);font-size:15px}

.cta{position:relative;overflow:hidden;border-radius:28px;padding:62px 56px;color:#fff;background:linear-gradient(120deg,#4a37b8 0%,#2876b8 60%,#2695c9 100%);box-shadow:var(--shadow-lg)}
.cta h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.03em;line-height:1.12;margin:0 0 12px;max-width:18ch}
.cta p{margin:0 0 28px;opacity:.9;font-size:17px;max-width:46ch}
.cta .btn{background:#fff;color:var(--ink);border-color:#fff}
.cta .btn.ghostw{background:transparent;color:#fff;border-color:#ffffff80}
.cta .btn.ghostw:hover{background:#ffffff1a}
.cta .art{position:absolute;right:56px;bottom:-10px;width:210px;opacity:.7;filter:drop-shadow(0 20px 30px rgba(0,0,0,.2))}
.cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff1a 1px,transparent 1px);background-size:24px 24px}
.cta > *{position:relative}

.footer{padding:56px 0 40px;border-top:1px solid var(--line);margin-top:92px;color:var(--ink-soft);font-size:14px}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.footer h5{margin:0 0 12px;font-size:13px;color:var(--ink);text-transform:uppercase;letter-spacing:.06em}
.footer a{display:block;text-decoration:none;margin-bottom:8px}
.footer a:hover{color:var(--ink)}
.footer .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);margin-top:36px;padding-top:22px;font-size:13px}

/* ================================================================== AUTH */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
/* The brand mark is pinned top-left (below); centering the rest with
   justify-content used to let a short viewport push the heading straight
   into it. padding-top clears the logo for good, whatever the height. */
.auth-side{position:sticky;top:0;height:100vh;overflow:hidden;color:#fff;padding:100px 52px 40px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(150deg,#4f3bc9 0%,#3674d6 55%,#2ea7e0 100%)}
.auth-side::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff24 1px,transparent 1px);background-size:24px 24px}
.auth-side > *{position:relative}
.auth-side > .deco{position:absolute}
.auth-side .brand{color:#fff;position:absolute;left:52px;top:36px}
.auth-side .brand span{color:#bfe8ff}
.auth-side h2{font-size:clamp(26px,2.8vw,36px);letter-spacing:-.03em;line-height:1.15;margin:0 0 12px;max-width:18ch}
.auth-side h2 .hand{font-size:1.15em;color:#ffe9a6}
.auth-side p{opacity:.88;margin:0 0 22px;max-width:42ch;font-size:16px}
.auth-side .frame{border-color:#ffffff40;max-width:min(470px,100%);transform:rotate(-1.2deg)}
.auth-side ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.auth-side li{display:flex;gap:12px;align-items:center;font-size:15px}
.auth-side li i{width:30px;height:30px;border-radius:9px;background:#ffffff26;display:grid;place-items:center;font-style:normal;font-size:15px;flex:none}
.auth-side .deco{width:96px}
.auth-main{display:flex;flex-direction:column;padding:32px 44px;background:var(--paper)}
.auth-main .top{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink-soft)}
.auth-main .top a{color:var(--ink);font-weight:500}
.auth-box{width:min(420px,100%);margin:auto}
.auth-box h1{font-size:30px;letter-spacing:-.03em;margin:0 0 8px;font-weight:700}
.auth-box .sub{color:var(--ink-soft);margin:0 0 26px;font-size:15px}
.tabs2{display:grid;grid-template-columns:1fr 1fr;background:var(--paper2);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:26px}
.tabs2 button{border:0;background:none;padding:10px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--ink-soft)}
.tabs2 button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.auth-foot{margin-top:22px;text-align:center;font-size:14px;color:var(--ink-soft)}
.auth-foot a,.linkbtn{color:var(--accent-dark);font-weight:500;text-decoration:none;border:0;background:none;padding:0;font-size:inherit}
.auth-foot a:hover,.linkbtn:hover{text-decoration:underline}
.divider{display:flex;align-items:center;gap:12px;color:var(--ink-faint);font-size:12.5px;margin:22px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.fine{font-size:12.5px;color:var(--ink-faint);text-align:center;margin-top:14px}




.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm);margin-bottom:22px}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.card-head h2{font-size:18px;margin:0;letter-spacing:-.01em}
.card-head p{margin:2px 0 0;color:var(--ink-soft);font-size:13.5px}
.card-head .right{margin-left:auto}
.empty{border:1.5px dashed var(--line);border-radius:14px;padding:26px;text-align:center;color:var(--ink-soft);font-size:14.5px}
.empty img{width:84px;height:84px;object-fit:contain;margin:0 auto 8px;opacity:.9}

.resume{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.rcard{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.rcard b{font-size:15px;line-height:1.3}
.rcard .meta{font-size:12.5px;color:var(--ink-soft);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bar{height:6px;border-radius:3px;background:var(--paper3);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#6cc6ef);border-radius:3px}
.rcard .acts{display:flex;gap:8px;margin-top:2px}

.chaps{display:grid;gap:10px}
.chap{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.chap-h{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;user-select:none}
.chap-h:hover{background:var(--paper)}
.chap-h .num{width:30px;height:30px;border-radius:9px;background:var(--paper2);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink-soft);flex:none}
.chap.has .chap-h .num{background:var(--green-soft);color:#237a52}
.chap-h .t{font-weight:500;font-size:15px}
.chap-h .m{margin-left:auto;display:flex;gap:8px;align-items:center}
.chap-h .caret{color:var(--ink-faint);transition:transform .2s;font-size:12px}
.chap.open .caret{transform:rotate(90deg)}
.chap-b{display:none;border-top:1px solid var(--line);padding:6px}
.chap.open .chap-b{display:block}
.lrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px}
.lrow:hover{background:var(--paper)}
.lrow .dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.lrow.ready .dot{background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.lrow .name{font-size:14.5px;flex:1;min-width:0}
.lrow.soon .name{color:var(--ink-faint)}
.lrow .acts{display:flex;gap:6px;align-items:center}
.score{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--green-soft);color:#237a52}
.score.mid{background:var(--amber-soft);color:#94600f}
.score.low{background:var(--red-soft);color:#a13a31}

.slist{display:grid;gap:10px}
.sitem{display:flex;gap:12px;align-items:center}
.sitem .ring{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none;background:conic-gradient(var(--green) calc(var(--p)*1%), var(--paper3) 0)}
.sitem .ring span{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center}
.sitem b{font-size:14px;display:block;line-height:1.3}
.sitem small{color:var(--ink-soft);font-size:12.5px}
.doubt{padding:12px 0;border-bottom:1px solid var(--line)}
.doubt:last-child{border-bottom:0;padding-bottom:0}
.doubt q{display:block;font-weight:500;font-size:14px;quotes:none}
.doubt small{color:var(--ink-faint);font-size:12px}
.doubt p{margin:6px 0 0;color:var(--ink-soft);font-size:13.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}


/* ================================================ DASHBOARD (Studdy-style) */
.studio{min-height:100vh;background:
  radial-gradient(1100px 700px at 0% 0%, #dcefff 0%, transparent 60%),
  radial-gradient(1000px 700px at 100% 10%, #fde3f0 0%, transparent 60%),
  radial-gradient(900px 600px at 50% 100%, #efe7ff 0%, transparent 60%), #fbfaff;background-attachment:fixed}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;padding:14px clamp(16px,3vw,32px);backdrop-filter:blur(8px)}
.topbar .tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#1f9d74,#2ea7e0);color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px;border:2px solid #fff;box-shadow:var(--shadow-sm);flex:none}
.menu{position:relative}
.menu .drop{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);min-width:230px;padding:6px;z-index:50}
.menu .drop .who{padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.menu .drop .who b{display:block;font-size:14px}
.menu .drop .who span{font-size:12.5px;color:var(--ink-soft)}
.menu .drop a,.menu .drop button{display:flex;width:100%;text-align:left;gap:8px;align-items:center;padding:9px 12px;border-radius:9px;text-decoration:none;font-size:14px;color:var(--ink);border:0;background:none}
.menu .drop a:hover,.menu .drop button:hover{background:var(--paper2)}

.prompt{min-height:calc(100vh - 68px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 18px 60px;text-align:center}
.prompt .banner{width:min(640px,100%);text-align:left;margin-bottom:22px}
.prompt h1{font-size:clamp(26px,3.4vw,38px);font-weight:500;letter-spacing:-.02em;margin:0 0 26px;color:#2a2a33}
.prompt h1 b{font-weight:700}
.modes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:16px}
.modes button{display:inline-flex;align-items:center;gap:8px;min-width:150px;justify-content:flex-start;background:#fff;border:1px solid #ffffff;border-radius:12px;padding:12px 16px;font-size:14.5px;color:var(--ink);box-shadow:var(--shadow-sm)}
.modes button.on{color:#d0437e;box-shadow:0 0 0 1.5px #f3b6cf, var(--shadow-sm)}
.modes button:disabled{color:var(--ink-faint);cursor:default}
.modes button small{margin-left:auto;font-size:10.5px;background:var(--paper2);color:var(--ink-faint);padding:1px 7px;border-radius:999px}
.composer2{width:min(620px,100%);background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(60,60,120,.10);border:1px solid #fff;padding:14px 14px 12px;text-align:left}
.composer2:focus-within{box-shadow:0 0 0 3px #2ea7e026, 0 10px 40px rgba(60,60,120,.12)}
.composer2 textarea{width:100%;border:0;outline:0;resize:none;font-size:16px;line-height:1.5;padding:6px 6px 10px;min-height:66px;color:var(--ink);background:none}
.composer2 .row{display:flex;align-items:center;gap:10px}
.composer2 .row .btn{margin-left:auto;padding:10px 26px}
.composer2 .attach{display:flex;gap:6px}
.chip-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 11px;font-size:12.5px;color:var(--ink-soft)}
.chip-btn:disabled{opacity:.6;cursor:default}
.mode-soon{font-size:13px;color:#8a6524;background:#fdf3e2;border-radius:10px;padding:8px 11px;margin:0 4px 10px;line-height:1.5}
.preparing{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;color:#d0437e}
.preparing:not([hidden]) + .btn{margin-left:0}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid #f3b6cf;border-top-color:#d0437e;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.side-btn{width:38px;height:38px;border-radius:50%;border:1px solid #fff;background:#ffffffcc;box-shadow:var(--shadow-sm);font-size:16px;color:var(--ink);display:grid;place-items:center}
.side-btn:hover{background:#fff}
@media (max-width:560px){.composer2 .attach{display:none}}
.composer2 .seg button{padding:6px 12px;font-size:13px}
.ready-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px;max-width:640px}
.ready-chips span{font-size:13px;color:var(--ink-soft);padding:6px 2px}
.ready-chips a{text-decoration:none;font-size:13px;padding:6px 12px;border-radius:999px;background:#ffffffb8;border:1px solid #ffffff;color:var(--ink-soft)}
.ready-chips a:hover{color:var(--ink);background:#fff;border-color:var(--line)}
.more-hint{margin-top:34px;font-size:13.5px;color:var(--ink-soft);text-decoration:none;padding:8px 14px;border-radius:999px}
.more-hint:hover{background:#ffffff99;color:var(--ink)}
.below{padding:10px 0 80px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

dialog.sheet{border:0;border-radius:18px;padding:22px 24px;width:min(560px,94vw);box-shadow:var(--shadow-lg);color:var(--ink)}
dialog.sheet::backdrop{background:#2a2a4033;backdrop-filter:blur(3px)}
.sheet-head{display:flex;align-items:center;margin:0 0 12px}
.sheet-head h2{margin:0;font-size:20px}
.sheet-head .x{margin-left:auto;border:0;background:none;font-size:18px;color:var(--ink-soft);padding:6px 9px;border-radius:9px}
.sheet-head .x:hover{background:var(--paper2)}
.srow{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;align-items:center;padding:10px 0}
.srow b{display:block;font-size:14px;font-weight:600}
.srow small{color:var(--ink-faint);font-size:12.5px}
.srow input,.srow select{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:14px;background:#fff;color:var(--ink);outline:0}
.srow input:focus,.srow select:focus{border-color:var(--accent)}
.srow input:disabled{background:var(--paper2);color:var(--ink-soft)}
dialog.sheet hr{border:0;border-top:1px solid var(--line);margin:14px 0 6px}

/* ============================================================ RESPONSIVE */
@media (max-width:1020px){
  .hero-grid,.feature,.feature.flip{grid-template-columns:1fr;gap:40px}
  .feature.flip .copy{order:0}
  .float.f1{left:8px} .float.f2{right:8px}
  .cards6{grid-template-columns:1fr 1fr}
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .footer .cols{grid-template-columns:1fr 1fr}
  .trio{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav nav a.hide-sm{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .stats div:nth-child(2){border-right:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .subjects,.how,.cards6,.row2{grid-template-columns:1fr}
  .chap-h .m .pill:not(.ready){display:none}
  .lrow{flex-wrap:wrap;row-gap:8px}
  .lrow .name{flex:1 1 calc(100% - 30px)}
  .lrow > .pill{display:none}
  .lrow .acts{margin-left:21px}
  .lrow.soon .pill{margin-left:21px}
  .card{padding:18px}
  .subject ul{max-width:100%}
  .subject .art{width:80px;height:80px}
  .cta{padding:40px 26px}
  .cta .art{display:none}
  section.band{padding:64px 0}
  .feature{margin-bottom:64px}
  .float{display:none}
  .shot .deco,.visual .deco{display:none}   /* they sit past the frame edge; on a phone that is past the screen */
  .auth-main{padding:22px}
  .hero{padding:36px 0 20px}
  .modes button{min-width:0;flex:1}
  .modes button small{display:none}
  .srow{grid-template-columns:1fr;gap:6px}
  .prompt{justify-content:flex-start;padding-top:8vh}
}

/* Ready lessons on the dashboard, one row per subject. */
.ready-chips{flex-direction:column;align-items:center;gap:8px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}

/* The server-rendered lesson index: every built lesson as a real link, so the
   44 topic pages are reachable by a crawler and by a visitor who wants the
   list. The first version was four columns of bare links and read as a footer
   sitemap dump (user, 2026-09-23); each class is a card now, and the lessons
   inside it are chips -- the same links, but something that looks made. */
.lesson-index{column-width:330px;column-gap:18px}
.lesson-group{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px 22px;
  box-shadow:var(--shadow-sm);break-inside:avoid;margin-bottom:18px}
.lesson-group h3{display:flex;align-items:center;gap:8px;font-size:15px;letter-spacing:-.01em;margin:0 0 14px;
  padding-bottom:12px;border-bottom:1px solid var(--line);font-weight:600}
.lesson-group .lg-class{color:var(--accent-dark)}
.lesson-group .lg-count{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--ink-soft);
  background:var(--paper2);border-radius:999px;padding:3px 9px}
.lesson-group ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.lesson-group li a{display:inline-block;font-size:13.5px;line-height:1.3;color:var(--ink);text-decoration:none;
  background:var(--paper2);border:1px solid transparent;border-radius:9px;padding:6px 11px;transition:all .15s}
.lesson-group li a:hover{background:var(--accent-soft);border-color:#c4e5f5;color:var(--accent-dark)}

/* ------------------------------------------------------------- access tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px 26px;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.tier.featured{border-color:#bfe0f2;box-shadow:0 20px 50px rgba(46,167,224,.16);position:relative}
.tier.featured::before{content:"Most students start here";position:absolute;top:-11px;left:26px;
  font-size:11.5px;font-weight:600;color:#fff;background:var(--accent);border-radius:999px;padding:3px 12px}
.tier h3{margin:0 0 4px;font-size:18px;letter-spacing:-.01em}
.tier .price{font-size:32px;font-weight:700;letter-spacing:-.03em;margin:10px 0 2px;line-height:1.1}
.tier .price small{font-size:14px;font-weight:500;color:var(--ink-soft);letter-spacing:0}
.tier .who{color:var(--ink-soft);font-size:14px;margin:0 0 18px}
.tier ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.tier li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start;line-height:1.4}
.tier li span{flex:1}
.tier li::before{content:"";flex:none;margin-top:3px;width:17px;height:17px;border-radius:6px;
  background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%233aa675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%}
.tier li.soon::before{background:var(--paper2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5' fill='none' stroke='%239a9aa6' stroke-width='1.6'/%3E%3Cpath d='M8 5.5V8l1.8 1.2' fill='none' stroke='%239a9aa6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100%}
.tier .btn{margin-top:auto}
.tier-note{text-align:center;color:var(--ink-soft);font-size:14px;margin:26px auto 0;max-width:62ch}
@media (max-width:860px){.tiers{grid-template-columns:1fr}}

/* =========================================================== DARK HERO (lp)
   The landing page was eleven pale sections with the same shape -- kicker,
   heading, a grid of cards -- so nothing on it looked more important than
   anything else (user, 2026-09-23: "no attraction, old era ka website").
   The fix is contrast and rhythm, not more content: one dark band at the top
   that the product screenshot sits brightly against, and a stat card that
   straddles its edge so the eye has somewhere to land.

   Scoped to body.lp: the same .nav and .hero classes are used by pages that
   are white all the way up, and they must not turn light-on-light. */
.lp{--night:#0f1524;--night2:#18203a;--night-line:#2a3350}

/* The nav is sticky, so it sits IN the flow and the hero began below it --
   a transparent nav then showed the cream body, not the dark band. The hero
   is pulled up by the nav's own height and pads itself back out, so the dark
   runs behind the bar and the two read as one block. */
.lp .hero{margin-top:-68px;padding:172px 0 150px;color:#eef1f7;background:
  radial-gradient(900px 520px at 12% -10%, #1d2a4d 0%, transparent 62%),
  radial-gradient(760px 460px at 92% 0%, #2a1f45 0%, transparent 58%),
  linear-gradient(180deg, var(--night) 0%, var(--night2) 100%)}
.lp .hero::before{display:none}
.lp .hero h1{color:#fff}
.lp .hero h1 .hand{color:#8fd0ff}
.lp .hero .lead{color:#b9c2d6;font-size:19px}
.lp .hero .eyebrow{background:#ffffff14;border-color:#ffffff2b;color:#ccd5e8;backdrop-filter:blur(6px)}
.lp .hero .eyebrow b{background:#2ea7e029;color:#7fd0f5}
.lp .hero .trust{color:#9aa6c0}
.lp .hero .trust span::before{background:#2ea7e026 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%237fd0f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%}
/* The secondary button has to read on a dark ground. */
.lp .hero .btn:not(.primary){background:#ffffff12;border-color:#ffffff30;color:#fff}
.lp .hero .btn:not(.primary):hover{background:#ffffff1f;border-color:#ffffff4d}
.lp .hero .frame{box-shadow:0 40px 90px rgba(0,0,0,.45),0 0 0 1px #ffffff14}
.lp .hero .deco{opacity:.85;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}

/* The nav floats over the dark hero until the page moves, then becomes the
   ordinary white bar the rest of the site uses. */
.lp .nav:not(.scrolled){background:transparent;border-bottom-color:transparent}
.lp .nav:not(.scrolled) .brand{color:#fff}
.lp .nav:not(.scrolled) nav a:not(.btn){color:#c3cce0}
.lp .nav:not(.scrolled) nav a:not(.btn):hover{color:#fff;background:#ffffff14}

/* The counts straddle the edge of the dark band: one clear landing point
   between the hero and the rest of the page. */
.lp .strip{padding:0 0 8px;margin-top:-86px;position:relative;z-index:2}
.lp .stats{box-shadow:0 24px 60px rgba(16,22,40,.22),0 0 0 1px rgba(40,40,60,.05);border-color:transparent}
.lp .stats b{font-size:34px;color:var(--ink)}
.lp .stats div{padding:26px 28px}

@media (max-width:860px){
  .lp .hero{padding:148px 0 120px}
  .lp .strip{margin-top:-72px}
  .lp .stats{grid-template-columns:1fr 1fr}
  .lp .stats div:nth-child(2){border-right:0}
  .lp .stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* A second dark band, two thirds down. The page was eleven pale sections in a
   row: with only the hero dark, everything after it read as one long block.
   This one carries the parents' pitch, which is a different reader anyway. */
.band.dark{background:linear-gradient(180deg,#131a2c 0%,#0f1524 100%);color:#e8ecf5}
.band.dark .sec-head h2{color:#fff}
.band.dark .sec-head p{color:#aab4cc}
.band.dark .sec-head .kicker{color:#7fd0f5}
.band.dark .fcard{background:#ffffff0a;border-color:#ffffff1a;box-shadow:none;backdrop-filter:blur(4px)}
.band.dark .fcard:hover{background:#ffffff12;border-color:#ffffff2e;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.band.dark .fcard h4{color:#fff}
.band.dark .fcard p{color:#a8b2c9}
.band.dark .fcard .ic{background:#ffffff14}

/* ==================================================== LANDING, REBUILT 2026-09-24
   Laid out from the user's own mockup: a dark illustrated hero, a ribbon of
   what she does, feature cards with coloured tiles, the syllabus band, and the
   handwritten blue annotations in the margins. What the mockup showed and this
   page does NOT have is deliberate: no testimonials (there are no real ones to
   quote yet) and no "concept videos" (there are none) -- the counts are the
   catalog's own. */

/* ------------------------------------------------------------------ hero art */
.lp .hero-grid{grid-template-columns:1.02fr 1.1fr;gap:52px;align-items:center}
.lp .hero-copy{position:relative;z-index:2}
.hero-art{position:relative}
.hero-art .frame{border-radius:18px}

/* "Hi! I'm Tara" -- her own portrait, cut from the artwork, so the face that
   greets you on the landing page is the one that teaches the lesson. */
.say-bubble{
  position:absolute;left:-26px;top:-46px;z-index:3;display:flex;align-items:center;gap:12px;
  background:#fff;border-radius:999px;padding:8px 22px 8px 8px;box-shadow:0 18px 40px rgba(8,12,24,.35);
}
.say-bubble img{width:52px;height:52px;border-radius:50%;flex:none}
.say-bubble p{margin:0;line-height:1.25}
.say-bubble b{display:block;font-size:14.5px;color:var(--ink)}
.say-bubble span{font-size:12.5px;color:var(--ink-soft)}

.sticky-note{
  position:absolute;right:-18px;top:-38px;z-index:3;transform:rotate(3deg);
  background:#fdf0a8;color:#5a4a12;font-family:var(--hand);font-size:19px;line-height:1.25;
  padding:16px 18px;border-radius:4px;box-shadow:0 14px 30px rgba(8,12,24,.3);max-width:190px;
}

/* ---------------------------------------------------------------- the ribbon */
.lp .strip{margin-top:-44px}
.ribbon{
  list-style:none;margin:0;padding:18px 10px;display:grid;grid-template-columns:repeat(5,1fr);
  background:#fff;border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(16,22,40,.16),0 0 0 1px rgba(40,40,60,.05);
}
.ribbon li{display:flex;align-items:center;justify-content:center;gap:10px;text-align:left;
  font-size:14px;font-weight:500;line-height:1.3;padding:6px 14px;border-right:1px solid var(--line)}
.ribbon li:last-child{border-right:0}
.ribbon .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex:none}

/* ------------------------------------------------------- handwritten margins */
.scribble{
  position:absolute;font-family:var(--hand);font-size:23px;line-height:1.2;color:var(--accent-dark);
  transform:rotate(-4deg);pointer-events:none;max-width:16ch;
}
.scribble::after{
  content:"";position:absolute;left:6px;right:14px;bottom:-9px;height:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 50 2 100 7 T 198 5' fill='none' stroke='%232ea7e0' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.scribble-right{right:-6px;top:-6px}
.scribble-left{left:-10px;top:8px;transform:rotate(4deg)}
.sec-head{position:relative}
@media (max-width:1100px){.scribble{display:none}}

/* --------------------------------------------------------- Tara in action */
.action{display:grid;grid-template-columns:1.45fr 1fr;gap:34px;align-items:start}
.seg.shots{margin:0 auto 18px;display:flex}
.action-shot{display:flex;flex-direction:column;align-items:center}
.action-shot .frame{width:100%}
.action-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.action-list li{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 14px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px 18px;
  box-shadow:var(--shadow-sm);font-size:13.8px;color:var(--ink-soft);line-height:1.45;
}
.action-list .ic{grid-row:span 2;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:19px}
.action-list b{font-size:15px;letter-spacing:-.01em;color:var(--ink)}

/* ------------------------------------------------------------------ numbers */
.numbers .wrap{position:relative}
.lp .numbers .stats{box-shadow:var(--shadow-sm)}

/* -------------------------------------------------------------------- steps */
.how .step-n{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  font-size:14px;font-weight:700;display:grid;place-items:center;box-shadow:0 6px 16px rgba(46,167,224,.4);
}

/* ----------------------------------------------------------------- syllabus */
.syl-head{display:grid;grid-template-columns:150px 1fr 150px;gap:30px;align-items:center;margin-bottom:54px}
.syl-art{width:100%;height:auto}
.syl-head .kicker{display:inline-block;font-size:13px;font-weight:600;color:var(--accent-dark);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.syl-head h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;line-height:1.14;margin:0 0 20px;font-weight:700}
.ticks.two{grid-template-columns:1fr 1fr;display:grid;gap:11px 26px}
.lesson-index-head{text-align:center;max-width:640px;margin:0 auto 28px}
.lesson-index-head h3{font-size:22px;letter-spacing:-.02em;margin:0 0 6px}
.lesson-index-head p{margin:0;color:var(--ink-soft);font-size:15px}
@media (max-width:860px){.syl-head{grid-template-columns:1fr;text-align:left}.syl-art{display:none}.ticks.two{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------- faq */
.faqs{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;max-width:1000px;margin:0 auto}
@media (max-width:820px){.faqs{grid-template-columns:1fr}}

/* ----------------------------------------------------------------- CTA band */
.cta-band{
  color:#fff;padding:54px 0;
  background:radial-gradient(700px 320px at 12% 0%, #1d2a4d 0%, transparent 60%),
             linear-gradient(120deg,#131a2c 0%,#16264a 100%);
}
.cta-band .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
.cta-face{width:88px;height:88px;border-radius:50%;flex:none;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.cta-band h2{margin:0 0 6px;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.025em;line-height:1.18}
.cta-band p{margin:0;color:#b9c2d6;font-size:15.5px}
.cta-band .btn:not(.primary){background:#ffffff14;border-color:#ffffff33;color:#fff}
@media (max-width:900px){
  .cta-band .wrap{grid-template-columns:1fr;text-align:center;justify-items:center}
  .cta-band .hero-cta{justify-content:center}
}

/* ------------------------------------------------------------ nav on phones */
.nav-toggle{display:none;margin-left:auto;width:42px;height:38px;border:1px solid var(--line);
  background:#fff;border-radius:10px;padding:9px 10px;flex-direction:column;justify-content:space-between}
.nav-toggle span{display:block;height:2px;border-radius:2px;background:var(--ink)}
.lp .nav:not(.scrolled) .nav-toggle{background:#ffffff14;border-color:#ffffff33}
.lp .nav:not(.scrolled) .nav-toggle span{background:#fff}

@media (max-width:980px){
  .nav-toggle{display:flex}
  .nav .wrap{flex-wrap:wrap}
  .nav nav{
    display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:2px;
    padding:10px 0 16px;border-top:1px solid var(--line);margin-left:0;
  }
  .nav nav.open{display:flex}
  .nav nav a:not(.btn){padding:12px 4px;font-size:15px}
  .nav nav .btn{margin:6px 0 0;justify-content:center}
  /* Open over the dark hero, the sheet needs its own surface to be readable. */
  .lp .nav:not(.scrolled) nav.open{background:#0f1524f2;border-top-color:#ffffff1f;
    margin:0 -4vw;padding:12px 4vw 18px}
  .nav nav a.hide-sm{display:block}
}

/* ------------------------------------------------------------ hero on phones */
@media (max-width:900px){
  .lp .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-art{margin-top:18px}
  .say-bubble{left:0;top:-34px;padding:6px 18px 6px 6px}
  .say-bubble img{width:44px;height:44px}
  .sticky-note{right:-4px;top:-30px;font-size:16px;max-width:150px;padding:12px 14px}
  .ribbon{grid-template-columns:1fr 1fr;padding:8px}
  .ribbon li{border-right:0;border-bottom:1px solid var(--line);padding:12px 10px;justify-content:flex-start}
  .ribbon li:last-child{border-bottom:0}
  .action{grid-template-columns:1fr;gap:24px}
}
@media (max-width:560px){
  .ribbon{grid-template-columns:1fr}
}

/* The tutor chip inside the demo board was an emoji; it is her portrait now,
   and an <img> with no CSS size fell back to its intrinsic 240px and filled
   half the hero. */
.demo-row.bubble .av img{width:28px;height:28px;border-radius:50%;display:block}
.demo-row.bubble .av{display:flex;align-items:center}

/* The greeting bubble and the sticky note sat ON the browser-frame bar and
   clipped its URL. They belong just above the frame, overlapping its corner. */
.say-bubble{left:-30px;top:-64px}
.sticky-note{right:-14px;top:-58px}
/* The dark band ran on well past the last line of hero copy before the ribbon
   met it. Tightened so the white card meets the dark where the eye expects. */
.lp .hero{padding:150px 0 104px}
.lp .strip{margin-top:-52px}
/* Sign in on the dark hero was --ink-soft grey on navy. */
.lp .nav:not(.scrolled) .btn.ghost{color:#c3cce0}
.lp .nav:not(.scrolled) .btn.ghost:hover{color:#fff;background:#ffffff14}
@media (max-width:900px){.lp .hero{padding:126px 0 92px}}

/* On a phone the art stacks under the copy, and the greeting bubble -- which
   hangs 34px above its own box -- landed on the last trust line. */
@media (max-width:900px){.hero-art{margin-top:62px}}

/* ------------------------------------------- the mockup's second pass, 2026-09-24
   Three things the first build missed against the mockup: Tara herself was
   only a face in a bubble instead of the figure the hero is built around, the
   footer stayed light while the mockup's is dark, and the blue was the old
   cyan rather than the mockup's deeper one. */

/* Tara stands at the right of the board, overlapping it, the way she does in
   the artwork. The board keeps its own width; she is placed over it. */
.hero-art{padding-right:150px}
.tara-figure{
  position:absolute;right:-26px;bottom:-30px;z-index:4;width:300px;height:auto;
  filter:drop-shadow(-18px 14px 34px rgba(0,0,0,.45));pointer-events:none;
}
.lp .hero-grid{grid-template-columns:1fr 1.16fr}
.say-bubble{left:-34px;top:-58px}
.sticky-note{right:96px;top:-62px}

@media (max-width:1180px){
  .hero-art{padding-right:112px}
  .tara-figure{width:236px;right:-18px}
  .sticky-note{right:70px}
}
@media (max-width:900px){
  .hero-art{padding-right:96px}
  .tara-figure{width:196px;right:-14px;bottom:-18px}
  .sticky-note{right:60px;top:-52px}
  .say-bubble{left:-8px}
}
@media (max-width:560px){
  .hero-art{padding-right:0}
  /* Below this the board is already narrow; she would cover the question. */
  .tara-figure{position:static;display:block;width:172px;margin:0 auto -18px}
  .sticky-note{right:-6px;top:-44px;font-size:15px;max-width:136px}
  .say-bubble{left:-6px;top:-30px}
}

/* ------------------------------------------------------------- dark footer */
.lp .footer{background:linear-gradient(180deg,#131a2c 0%,#0d1220 100%);border-top:0;color:#aab4cc}
.lp .footer .brand{color:#fff}
.lp .footer h5{color:#fff}
.lp .footer a{color:#aab4cc}
.lp .footer a:hover{color:#fff}
.lp .footer .legal{border-top-color:#ffffff1a;color:#8e99b3}
.lp .footer p{color:#aab4cc}

/* She was standing ON the board and covering the second answer option. The
   frame gives up the width instead, so she stands BESIDE it and only its
   corner is behind her -- which is what the artwork does too. */
.hero-art{padding-right:212px}
.tara-figure{width:296px;right:-34px;bottom:-26px}
.sticky-note{right:152px}
@media (max-width:1180px){.hero-art{padding-right:168px}.tara-figure{width:244px;right:-26px}.sticky-note{right:120px}}
@media (max-width:900px){.hero-art{padding-right:132px}.tara-figure{width:200px;right:-20px}.sticky-note{right:92px}}
@media (max-width:560px){.hero-art{padding-right:0}.tara-figure{position:static;width:172px;margin:0 auto -18px}.sticky-note{right:-6px}}

/* The two-column hero grid was re-declared later in this file WITHOUT a media
   query, so it beat the one-column phone rule above and the art ran off the
   side (clipped by .hero overflow, which is why no page-level overflow showed).
   Restated last, where it wins. */
@media (max-width:900px){.lp .hero-grid{grid-template-columns:1fr}}

/* The footer brand stacked its mark above the wordmark: .brand is inline-flex,
   and inside a grid column it was being allowed to wrap. */
.footer .brand{flex-wrap:nowrap;white-space:nowrap}