/* ══════════════════════════════════════════════════════════════════════
   Shared shell for the public pages: landing, login, admin.
   The study desk keeps its own playful styling; this is the grown-up half
   of the product — the part a tuition centre owner looks at before paying.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --brand:#2B3A67; --brand-2:#3D5AA9; --accent:#0E9F6E; --accent-2:#0B7F58;
  --warn:#B4690E; --bad:#C0392B;
  --ink:#16181D; --muted:#5B6172; --line:#E3E6ED;
  --bg:#FFFFFF; --bg-2:#F6F8FC; --card:#FFFFFF;
  --r:14px; --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px -12px rgba(16,24,40,.16);
  --wrap:1140px;
}
@media (prefers-color-scheme:dark){
  :root{ --ink:#ECEEF4; --muted:#A2A9BC; --line:#2A2F3D;
         --bg:#12141A; --bg-2:#171A22; --card:#1A1D26;
         --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7); }
}
*{box-sizing:border-box}
/* A class rule like .shell{display:grid} outranks the browser's own
   [hidden]{display:none}, so an element marked hidden would still show.
   That is how a non-admin briefly saw the whole dashboard frame. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--brand-2);text-underline-offset:3px}
h1,h2,h3{line-height:1.18;margin:0 0 .4em;letter-spacing:-.015em}
h1{font-size:clamp(2rem,1.2rem + 3.2vw,3.35rem);font-weight:800}
h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.15rem);font-weight:750}
h3{font-size:1.14rem;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}
.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.center{text-align:center}

/* ── buttons ─────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:10px;border:1px solid transparent;
  font:inherit;font-weight:650;cursor:pointer;text-decoration:none;
  transition:transform .08s ease, box-shadow .15s ease, background .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px -8px rgba(14,159,110,.8)}
.btn-primary:hover{background:var(--accent-2)}
.btn-dark{background:var(--brand);color:#fff}
.btn-dark:hover{background:var(--brand-2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--bg-2)}
.btn-sm{padding:8px 14px;font-size:.88rem;border-radius:8px}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ── header ──────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.hdr .row{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.06rem;
  color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:16px}
.nav{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav a{padding:9px 13px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:hover{background:var(--bg-2)}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:8px;padding:8px 11px;font-size:17px;cursor:pointer;color:var(--ink)}
@media (max-width:800px){
  .nav{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--bg);border-bottom:1px solid var(--line);padding:12px 22px 18px;display:none}
  .nav.open{display:flex}
  .nav .btn{width:100%}
  .navtoggle{display:block}
}

/* ── layout blocks ───────────────────────────────────────────────── */
.hero{padding:64px 0 40px;background:
  radial-gradient(60rem 30rem at 78% -12%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 65%),
  radial-gradient(46rem 26rem at 2% 0%, color-mix(in srgb,var(--brand-2) 15%,transparent), transparent 62%)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}}
.lede{font-size:1.14rem;color:var(--muted);max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.section{padding:60px 0;border-top:1px solid var(--line)}
.section.tint{background:var(--bg-2)}
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow)}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}
.ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:21px;
  background:var(--bg-2);border:1px solid var(--line);margin-bottom:12px}

/* ── subject / package cards ─────────────────────────────────────── */
.subj{display:flex;flex-direction:column;gap:6px}
.subj .top{display:flex;align-items:center;gap:11px}
.subj .em{font-size:26px}
.subj .cnt{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--muted);
  background:var(--bg-2);border:1px solid var(--line);border-radius:99px;padding:3px 10px}
.soon{opacity:.62}
.soon .cnt{color:var(--warn)}
.price{font-size:1.9rem;font-weight:800;letter-spacing:-.02em}
.price small{font-size:.82rem;font-weight:600;color:var(--muted)}
.tick{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.tick li{display:flex;gap:9px;font-size:.95rem}
.tick li::before{content:"✓";color:var(--accent);font-weight:800;flex:none}
.pop{border-color:var(--accent);position:relative}
.pop::after{content:"Most centres start here";position:absolute;top:-11px;left:22px;
  background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 10px;border-radius:99px}

/* ── forms ───────────────────────────────────────────────────────── */
.field{display:grid;gap:6px;margin-bottom:15px}
.field label{font-weight:650;font-size:.92rem}
.field input,.field select,.field textarea{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid color-mix(in srgb,var(--brand-2) 55%,transparent);outline-offset:1px;border-color:var(--brand-2)}
.hint{font-size:.83rem;color:var(--muted)}
.alert{padding:12px 14px;border-radius:10px;font-size:.94rem;margin-bottom:14px;border:1px solid}
.alert-bad{background:color-mix(in srgb,var(--bad) 9%,transparent);border-color:color-mix(in srgb,var(--bad) 35%,transparent);color:var(--bad)}
.alert-ok{background:color-mix(in srgb,var(--accent) 11%,transparent);border-color:color-mix(in srgb,var(--accent) 38%,transparent);color:var(--accent-2)}
.alert-info{background:var(--bg-2);border-color:var(--line);color:var(--ink)}

/* ── tables ──────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:640px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:var(--bg-2);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg-2)}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.76rem;font-weight:700;border:1px solid}
.pill-ok{color:var(--accent-2);border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pill-trial{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.pill-off{color:var(--muted);border-color:var(--line);background:var(--bg-2)}
.pill-bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 9%,transparent)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ── footer ──────────────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--line);padding:34px 0;background:var(--bg-2);font-size:.92rem}
.ftr .cols{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between}
.ftr a{color:var(--muted);text-decoration:none;display:block;padding:3px 0}
.ftr a:hover{color:var(--ink)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--brand);color:#fff;padding:10px 14px;border-radius:8px;z-index:99}

/* ── landing: parent-facing blocks ───────────────────────────────── */
.benefit{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start}
.benefit .n{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  font-size:25px;background:var(--bg-2);border:1px solid var(--line)}
.benefit h3{margin-bottom:.25em}
.benefit p{margin:0;color:var(--muted)}
.benefit p b{color:var(--ink)}

.faq{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--card)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:16px 20px;font-weight:650;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--muted);flex:none;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{background:var(--bg-2)}
.faq .a{padding:0 20px 18px;color:var(--muted);max-width:70ch}
.faq .a p{margin:0 0 .7em}
.faq .a p:last-child{margin-bottom:0}

.btn-wa{background:#128C7E;color:#fff}
.btn-wa:hover{background:#0F7A6D}

.honest{border:1px solid var(--line);border-left:3px solid var(--warn);
  background:var(--bg-2);border-radius:0 var(--r) var(--r) 0;padding:18px 22px}
.honest h3{margin-bottom:.3em}
.honest p{margin:0;color:var(--muted);max-width:68ch}

/* ══════════════════════════════════════════════════════════════════════
   DARK HERO + RUNNING SLIDE DECK
   The deck is the pitch. A parent should understand the product from the
   pictures alone, without reading a word — so the copy beside it stays
   short on purpose.
   ══════════════════════════════════════════════════════════════════════ */
.topbar{background:#0B1226;color:#C9D6F5;font-size:.83rem;text-align:center;padding:9px 18px}
.topbar b{color:#5FE3B4}
.topbar a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.dark{--d-ink:#F2F6FF; --d-mut:#9EB0D8; --d-line:#26325A;
  background:
    radial-gradient(58rem 30rem at 82% -8%, rgba(14,159,110,.28), transparent 62%),
    radial-gradient(52rem 34rem at 6% 106%, rgba(61,90,169,.42), transparent 60%),
    linear-gradient(168deg,#0D1430 0%,#131C3C 52%,#101736 100%);
  color:var(--d-ink);position:relative;overflow:hidden}
.dark .hdr{background:transparent;border-bottom:1px solid rgba(255,255,255,.09);backdrop-filter:none}
.dark .brand,.dark .nav a{color:#EAF0FF}
.dark .nav a:hover{background:rgba(255,255,255,.09)}
.dark .navtoggle{color:#EAF0FF;border-color:rgba(255,255,255,.22)}
.dark .brand .mark{background:#0E9F6E}
@media (max-width:800px){ .dark .nav{background:#111938;border-bottom-color:var(--d-line)} }

.hero2{padding:58px 0 66px}
.hero2 .grid2{display:grid;grid-template-columns:0.92fr 1.08fr;gap:52px;align-items:center}
@media (max-width:960px){.hero2 .grid2{grid-template-columns:1fr;gap:36px}}
.hero2 h1{font-size:clamp(2.3rem,1.5rem+3.4vw,3.7rem);line-height:1.03;font-weight:800;
  letter-spacing:-.028em;margin:0 0 16px;color:#fff}
.hero2 h1 em{font-style:normal;color:#5FE3B4}
.hero2 .say{font-size:1.13rem;color:var(--d-mut);max-width:40ch;margin:0 0 26px}
.hero2 .cta-row{margin-top:0}
.dark .btn-ghost{color:#EAF0FF;border-color:rgba(255,255,255,.28);background:transparent}
.dark .btn-ghost:hover{background:rgba(255,255,255,.1)}
.dark .btn-dark{background:#fff;color:#101736}
.dark .btn-dark:hover{background:#DCE5FF}
.proof{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--d-line)}
.proof div{display:flex;flex-direction:column}
.proof b{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.1}
.proof span{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--d-mut)}

/* ── the deck ─────────────────────────────────────────────────────── */
.deck{position:relative}
.screen{position:relative;background:#fff;border-radius:16px;
  box-shadow:0 30px 70px -22px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.1);
  overflow:hidden;aspect-ratio:16/11}
@media (max-width:520px){.screen{aspect-ratio:4/3.4}}
.screen .bar{display:flex;gap:6px;padding:11px 14px;background:#F1F4FA;border-bottom:1px solid #E2E7F2}
.screen .bar i{width:9px;height:9px;border-radius:50%;background:#D3DAE8}
.screen .bar i:first-child{background:#E5675F}.screen .bar i:nth-child(2){background:#E9B44C}
.screen .bar i:nth-child(3){background:#4FBE8B}
.slides{position:relative;height:calc(100% - 35px)}
.slide{position:absolute;inset:0;padding:20px 22px;opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s ease;color:#16181D;background:#fff;
  display:flex;flex-direction:column;gap:12px;font-size:.86rem;pointer-events:none}
.slide.on{opacity:1;transform:none;pointer-events:auto}
.slide .kicker{font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0E9F6E}
.slide h4{font-size:1.02rem;font-weight:750;margin:0;color:#16181D;letter-spacing:-.01em}
.slide .tabs{display:flex;gap:5px;flex-wrap:wrap}
.slide .tabs span{font-size:.66rem;font-weight:700;padding:4px 9px;border-radius:99px;
  background:#F1F4FA;color:#5B6478;border:1px solid #E2E7F2}
.slide .tabs span.a{background:#0E9F6E;color:#fff;border-color:#0E9F6E}
.ln{height:7px;border-radius:4px;background:#EDF0F7}
.slide .opt{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid #E2E7F2;
  border-radius:9px;font-size:.8rem;color:#3A4256}
.slide .opt.right{border-color:#0E9F6E;background:#E9F7F1;color:#0B6B4C;font-weight:650}
.slide .opt b{margin-left:auto;color:#0E9F6E}
.slide .chat{display:flex;flex-direction:column;gap:8px}
.slide .msg{max-width:82%;padding:9px 12px;border-radius:12px;font-size:.79rem;line-height:1.45}
.slide .msg.me{align-self:flex-end;background:#E7EEFF;color:#26314F;border-bottom-right-radius:4px}
.slide .msg.her{align-self:flex-start;background:#F1F4FA;color:#2A2F3C;border-bottom-left-radius:4px}
.slide .who{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#0E9F6E;font-weight:800}
.slide .rowbar{display:flex;align-items:center;gap:10px;font-size:.78rem}
.slide .rowbar .nm{width:74px;color:#3A4256;font-weight:650}
.slide .rowbar .tr{flex:1;height:9px;border-radius:5px;background:#EDF0F7;overflow:hidden}
.slide .rowbar .tr i{display:block;height:100%;border-radius:5px}
.slide .rowbar .pc{width:38px;text-align:right;font-weight:750;font-variant-numeric:tabular-nums;color:#16181D}
.slide .mic{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;
  background:#FDEAE7;border:1px solid #F2BDB3;color:#A6382A;font-weight:650;font-size:.82rem}
.slide .mic .dot{width:11px;height:11px;border-radius:50%;background:#D92B1F;flex:none;
  animation:pulseDot 1.1s ease-in-out infinite}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}
.slide .lvl{display:flex;gap:3px;margin-left:auto}
.slide .lvl i{width:3px;border-radius:2px;background:#D92B1F;animation:lvlB .9s ease-in-out infinite}
.slide .lvl i:nth-child(2){animation-delay:.15s}.slide .lvl i:nth-child(3){animation-delay:.3s}
.slide .lvl i:nth-child(4){animation-delay:.45s}
@keyframes lvlB{0%,100%{height:8px}50%{height:19px}}

.deck .cap{display:flex;align-items:center;gap:14px;margin-top:18px;min-height:46px}
.deck .cap p{margin:0;color:#DCE6FF;font-size:.98rem;font-weight:550;max-width:38ch}
.dots{display:flex;gap:7px;margin-left:auto;flex:none}
.dots button{width:9px;height:9px;padding:0;border-radius:99px;border:0;cursor:pointer;
  background:rgba(255,255,255,.28);transition:width .25s ease,background .25s ease}
.dots button[aria-selected="true"]{width:26px;background:#5FE3B4}
.dots button:hover{background:rgba(255,255,255,.55)}

@media (prefers-reduced-motion:reduce){
  .slide{transition:none}
  .slide .mic .dot,.slide .lvl i{animation:none}
}

/* Three hero buttons should sit on one line at desktop widths — a wrapped
   third button reads as an afterthought rather than a choice. */
.hero2 .cta-row{gap:10px}
.hero2 .cta-row .btn{padding:12px 18px}
@media (min-width:961px) and (max-width:1180px){ .hero2 .cta-row .btn{padding:11px 14px;font-size:.94rem} }