/* Mizasi website pages (Pricing, Support, Privacy, Terms, Thanks).
   Built on the Mizasi design system tokens: Sunny (light) page with Starry (dark) bands. */

:root, [data-theme="sunny"] {
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --subj-english: #8b6cf0;
  --subj-maths: #23c08a;
  --subj-verbal: #ff7a66;
  --subj-nvr: #4d7cff;

  --page: #e9edf3;
  --bg: #f4f6fa;
  --surface-card: #ffffff;
  --text-1: #0f1b2d;
  --text-2: #5f6b7d;
  --text-3: #66717f;   /* design #98a2b0, darkened to pass WCAG AA (4.5:1) */
  --border: rgba(15, 27, 45, .09);
  --border-subtle: rgba(15, 27, 45, .07);
  --accent: #17c3b0;
  --accent-ink: #09766a;   /* design #0a7a6d, darkened slightly to pass WCAG AA on the grey sections */
  --on-accent: #063b34;
  --accent-tint: rgba(23, 195, 176, .12);
  --accent-border: rgba(23, 195, 176, .3);
  --warning: #9a6408;
  --warning-tint: rgba(244, 168, 58, .15);
  --error: #d64545;
}

[data-theme="starry"] {
  --page: #05080f;
  --bg: #050d1a;
  --surface-card: #0d1c30;
  --text-1: #eaf1fb;
  --text-2: #8ea3bd;
  --text-3: #7a8fa9;   /* design #5f7590, lightened to pass WCAG AA on cards */
  --border: rgba(255, 255, 255, .08);
  --border-subtle: rgba(255, 255, 255, .06);
  --accent: #38e1c6;
  --accent-ink: #38e1c6;
  --on-accent: #052018;
  --accent-tint: rgba(56, 225, 198, .14);
  --accent-border: rgba(56, 225, 198, .3);
  --warning: #f4a83a;
  --warning-tint: rgba(244, 168, 58, .15);
  --error: #ff8a8a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text-1);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: #0e9e8c; }
[data-theme="starry"] a:hover { color: #5cf0da; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
/* Links inside running text are underlined so they don't rely on colour alone (WCAG 1.4.1). */
p a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
main { flex: 1; }

.wrap { max-width: 1100px; margin: 0 auto; padding-left: clamp(18px, 4vw, 40px); padding-right: clamp(18px, 4vw, 40px); }
.band { background: var(--bg); color: var(--text-1); }

/* ---------- Header ---------- */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font: 700 15px var(--font-body); }
.skip-link:focus { top: 12px; color: var(--on-accent); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 246, 250, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header__bar {
  max-width: 1200px; margin: 0 auto; padding: 12px clamp(16px, 4vw, 40px);
  display: flex; align-items: center; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand__mark { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.brand__mark span { width: 7px; border-radius: 4px; }
.brand__mark span:nth-child(1) { height: 12px; background: var(--subj-english); }
.brand__mark span:nth-child(2) { height: 17px; background: var(--subj-maths); }
.brand__mark span:nth-child(3) { height: 22px; background: var(--subj-verbal); }
.brand__mark span:nth-child(4) { height: 28px; background: var(--subj-nvr); }
.brand__word { font: 800 25px/1 var(--font-display); letter-spacing: -.02em; color: var(--text-1); }
.brand:hover .brand__word { color: var(--text-1); }

.site-header__right { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.site-nav {
  min-width: 0; display: flex; gap: 20px; white-space: nowrap;
  overflow-x: auto; scrollbar-width: none; font: 600 15px var(--font-body);
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { color: var(--text-2); }
.site-nav a:hover { color: var(--text-1); }
.site-nav a[aria-current="page"] { color: var(--accent-ink); font-weight: 800; }
/* Small screens: a menu button opens a stacked list of links. */
.menu-btn {
  display: none; flex: none; width: 46px; height: 46px; border-radius: 14px; border: 1.5px solid var(--border);
  background: var(--surface-card); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menu-btn span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text-1); transition: transform .2s ease, opacity .2s ease; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { display: flex; flex-direction: column; padding: 4px clamp(16px, 4vw, 40px) 12px; border-top: 1px solid var(--border); }
.mobile-nav[hidden] { display: none; }
.mobile-nav a { display: flex; align-items: center; min-height: 50px; border-bottom: 1px solid var(--border-subtle); font: 600 17px var(--font-body); color: var(--text-1); }
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a[aria-current="page"] { color: var(--accent-ink); font-weight: 800; }
@media (min-width: 980px) { .mobile-nav { display: none !important; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 18px; font: 700 16px var(--font-body); white-space: nowrap;
  cursor: pointer; border: none;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { color: var(--on-accent); filter: brightness(1.05); }
.btn--ghost { border: 1.5px solid var(--border); color: var(--text-1); background: transparent; }
.btn--ghost:hover { color: var(--text-1); border-color: var(--accent-border); }
.header-cta { flex: none; min-height: 46px; padding: 0 18px; border-radius: 16px; font-size: 15px; }
.header-cta .short { display: none; }

@media (max-width: 979px) {
  .site-header__right .site-nav { display: none; }
  .site-header__right { gap: 10px; }
  .menu-btn { display: flex; }
}
@media (max-width: 439px) {
  .header-cta .long { display: none; }
  .header-cta .short { display: inline; }
}

/* ---------- Shared type ---------- */
.kicker { margin: 0; font: 700 13px var(--font-body); letter-spacing: .1em; color: var(--accent-ink); text-transform: uppercase; }
.h1 { margin: 12px 0 0; font: 800 clamp(34px, 4.6vw, 52px)/1.08 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.lede { margin: 16px 0 0; max-width: 620px; font: 500 18px/1.6 var(--font-body); color: var(--text-2); }
.card { border-radius: 26px; background: var(--surface-card); border: 1px solid var(--border); }

/* ---------- Accordion (Pricing + Support FAQ) ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { border-radius: 20px; background: var(--surface-card); border: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px; cursor: pointer; list-style: none;
  font: 700 17px var(--font-body); color: var(--text-1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary > span { flex: 1; }
.faq summary::after { content: "+"; font: 700 20px var(--font-body); color: var(--text-3); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0; padding: 0 20px 20px; font: 500 16px/1.6 var(--font-body); color: var(--text-2); }

/* ---------- Pricing ---------- */
.pricing { padding-top: clamp(48px, 7vw, 90px); padding-bottom: clamp(48px, 7vw, 90px); }
.pricing .h1 { max-width: 760px; font-size: clamp(34px, 4.6vw, 54px); }
.pricing__grid { margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.plan { flex: 1 1 360px; min-width: 0; padding: 32px; border-radius: 32px; background: var(--bg); color: var(--text-1); display: flex; flex-direction: column; }
.plan__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan__name { font: 700 16px var(--font-body); }
.plan__badge { padding: 5px 11px; border-radius: 26px; background: var(--warning-tint); font: 700 12px var(--font-body); color: var(--warning); }
.plan__price { margin: 20px 0 0; font: 800 60px/1 var(--font-display); letter-spacing: -.02em; }
.plan__then { margin: 6px 0 0; font: 600 17px var(--font-body); color: var(--text-2); }
.plan__list { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.plan__list li { display: flex; gap: 10px; font: 500 16px/1.4 var(--font-body); color: var(--text-1); }
.plan__list li::before { content: "\2713"; color: var(--accent-ink); font-weight: 800; }
.plan__cta { margin: 28px 0 0; min-height: 56px; border-radius: 20px; font-size: 17px; }
.plan__note { margin: 12px 0 0; text-align: center; font: 500 13px/1.5 var(--font-body); color: var(--text-3); }
.pricing__side { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.compare { padding: 24px; }
.compare__title { margin: 0 0 14px; font: 700 18px var(--font-display); }
.compare__row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 8px; padding: 11px 0; border-top: 1px solid var(--border-subtle); font: 600 15px var(--font-body); color: var(--text-2); }
.compare__row--head { font-size: 13px; letter-spacing: .05em; color: var(--text-3); text-transform: uppercase; }
.compare__row b { font-weight: 800; color: var(--text-1); }
.compare__foot { margin: 10px 0 0; font: 500 13px var(--font-body); color: var(--text-3); }
.fair { padding: 22px 24px; border-radius: 26px; background: var(--accent-tint); border: 1px solid var(--accent-border); }
.fair h2 { margin: 0; font: 700 16px var(--font-body); }
.fair p { margin: 6px 0 0; font: 500 15px/1.6 var(--font-body); color: var(--text-2); }
.pricing__faq-title { margin: 60px 0 18px; font: 800 clamp(26px, 3vw, 34px)/1.15 var(--font-display); }

/* ---------- Support ---------- */
.support-hero .wrap { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.support-search {
  margin: 24px 0 0; width: 100%; max-width: 640px; min-height: 58px; padding: 0 20px;
  border-radius: 20px; border: 1.5px solid var(--border); background: var(--surface-card);
  color: var(--text-1); font: 600 17px var(--font-body); outline: none;
}
.support-search:focus { border-color: var(--accent-border); }
.support-body { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.support-body__faq { flex: 1 1 520px; min-width: 0; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.cat {
  padding: 10px 16px; border-radius: 26px; cursor: pointer; font: 700 14px var(--font-body);
  color: var(--text-1); background: var(--surface-card); border: 1px solid var(--border);
}
.cat[aria-pressed="true"] { background: var(--accent-tint); border: 1.5px solid var(--accent); }
.no-results { margin: 0; padding: 20px; font: 500 16px/1.5 var(--font-body); color: var(--text-2); border-radius: 20px; }
.msg-form { flex: 1 1 340px; min-width: 0; padding: 26px; border-radius: 28px; }
.msg-form__title { margin: 0; font: 700 20px var(--font-display); }
.msg-form__sub { margin: 6px 0 18px; font: 500 15px var(--font-body); color: var(--text-2); }
.field { display: block; margin-top: 14px; font: 700 13px var(--font-body); letter-spacing: .05em; color: var(--text-2); text-transform: uppercase; }
.field:first-of-type { margin-top: 0; }
.field input, .field select, .field textarea {
  display: block; margin-top: 8px; width: 100%; border-radius: 16px; border: 1.5px solid var(--border);
  background: var(--bg); color: var(--text-1); outline: none; text-transform: none; letter-spacing: 0;
}
.field input, .field select { min-height: 52px; padding: 0 16px; font: 600 16px var(--font-body); }
.field select { padding: 0 14px; }
.field textarea { padding: 14px 16px; font: 500 16px/1.5 var(--font-body); resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-border); }
.msg-form__hint { margin: 10px 0 0; font: 500 13px/1.5 var(--font-body); color: var(--text-3); }
.msg-form__send { margin-top: 16px; width: 100%; min-height: 54px; font-size: 17px; }
.msg-form__send:disabled { opacity: .7; cursor: default; }
.msg-sent { text-align: center; padding: 30px 0; }
.msg-sent__icon { font-size: 44px; }
.msg-sent h2 { margin: 12px 0 0; font: 700 20px var(--font-display); }
.msg-sent p { margin: 6px 0 0; font: 500 15px/1.5 var(--font-body); color: var(--text-2); }

/* ---------- Legal (Privacy + Terms) ---------- */
.legal { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.legal__toc { flex: 0 1 250px; position: sticky; top: 96px; min-width: 0; }
.legal__toc-label { margin: 0 0 12px; font: 700 13px var(--font-body); letter-spacing: .06em; color: var(--text-3); }
.legal__toc nav { display: flex; flex-direction: column; gap: 8px; }
.legal__toc a { font: 600 15px/1.35 var(--font-body); color: var(--text-2); }
.legal__toc a:hover { color: var(--accent-ink); }
.legal__body { flex: 1 1 560px; min-width: 0; }
.legal__body .h1 { font-size: clamp(34px, 4.4vw, 50px); }
.legal__date { margin: 12px 0 0; font: 600 14px var(--font-body); color: var(--text-3); }
.legal__summary { margin: 22px 0 0; padding: 18px 20px; border-radius: 20px; background: var(--accent-tint); border: 1px solid var(--accent-border); font: 500 16px/1.6 var(--font-body); color: var(--text-1); }
.legal__section { scroll-margin-top: 100px; margin-top: 36px; }
.legal__section h2 { margin: 0; font: 700 24px/1.25 var(--font-display); color: var(--text-1); }
.legal__section p { margin: 12px 0 0; font: 500 17px/1.7 var(--font-body); color: var(--text-2); text-wrap: pretty; }
@media (max-width: 889px) {
  .legal__toc { position: static; flex-basis: 100%; }
}

/* ---------- Thanks ---------- */
.thanks { min-height: calc(100vh - 75px); display: flex; align-items: center; }
.thanks__inner { max-width: 720px; margin: 0 auto; padding: clamp(56px, 8vw, 100px) clamp(18px, 4vw, 40px); text-align: center; }
.mizmate { margin: 0 auto; width: 112px; height: 112px; border-radius: 36px; background: linear-gradient(160deg, #5cf0da, #2ab7d6); position: relative; box-shadow: 0 16px 40px rgba(56, 225, 198, .35); }
.mizmate__eyes { position: absolute; top: 42px; left: 0; right: 0; display: flex; justify-content: center; gap: 20px; }
.mizmate__eyes span { width: 12px; height: 17px; border-radius: 50%; background: #0b1a2e; }
.mizmate__smile { position: absolute; top: 68px; left: 0; right: 0; margin: auto; width: 23px; height: 12px; border: 3px solid #0b1a2e; border-top: none; border-radius: 0 0 18px 18px; }
.thanks .h1 { margin-top: 28px; }
.thanks .lede { margin-left: auto; margin-right: auto; max-width: 540px; }
.steps { margin: 34px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; text-align: left; }
.steps li { padding: 20px; border-radius: 22px; background: var(--surface-card); border: 1px solid var(--border); }
.steps__n { width: 34px; height: 34px; border-radius: 11px; background: var(--accent-tint); display: flex; align-items: center; justify-content: center; font: 800 15px var(--font-display); color: var(--accent-ink); }
.steps h2 { margin: 12px 0 0; font: 700 17px var(--font-body); color: var(--text-1); }
.steps p { margin: 4px 0 0; font: 500 14px/1.5 var(--font-body); color: var(--text-2); }
.thanks__actions { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.thanks__actions .btn { min-height: 52px; padding: 0 22px; }
.thanks__small { margin: 20px 0 0; font: 500 13px/1.5 var(--font-body); color: var(--text-3); }

/* ---------- Footer ---------- */
.site-footer { background: var(--page); color: var(--text-2); }
.site-footer__inner {
  max-width: 1200px; margin: 0 auto; padding: 32px clamp(18px, 4vw, 40px);
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; font: 500 14px var(--font-body);
}
.site-footer__word { font: 800 20px var(--font-display); color: var(--text-1); }
.site-footer__copy { color: var(--text-3); }
.site-footer__spacer { flex: 1; }
.site-footer a { color: var(--text-2); }
.site-footer__legal { flex-basis: 100%; margin: 0; font: 500 13px/1.5 var(--font-body); color: var(--text-3); }
.site-footer a:hover { color: var(--text-1); }

/* ---------- Cookie banner (all pages) ---------- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 620px; margin: 0 auto;
  padding: 20px 22px; border-radius: 24px; background: var(--surface-card); border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(15, 27, 45, .22);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner h2 { margin: 0; font: 700 16px var(--font-body); color: var(--text-1); }
.cookie-banner p { margin: 6px 0 0; font: 500 14px/1.55 var(--font-body); color: var(--text-2); }
.cookie-banner__actions { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner__actions button {
  flex: 1 1 160px; min-height: 48px; border-radius: 16px; border: 1.5px solid var(--border);
  background: var(--bg); color: var(--text-1); font: 700 15px var(--font-body); cursor: pointer;
}
.linklike { background: none; border: none; padding: 0; font: inherit; color: var(--text-2); cursor: pointer; text-align: left; }
.linklike:hover { color: var(--text-1); }

/* ============ HOMEPAGE ============ */
.home-section { max-width: 1200px; margin: 0 auto; padding: clamp(64px, 8vw, 110px) clamp(18px, 4vw, 40px); }
.split { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.split > * { min-width: 0; }
.h2 { margin: 12px 0 0; font: 800 clamp(30px, 3.8vw, 46px)/1.1 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.body-lg { margin: 16px 0 0; font: 500 18px/1.6 var(--font-body); color: var(--text-2); }
.tile { padding: 20px; border-radius: 24px; background: var(--surface-card); border: 1px solid var(--border); }
.tile h3 { margin: 12px 0 0; font: 700 18px var(--font-display); color: var(--text-1); }
.tile p { margin: 6px 0 0; font: 500 15px/1.55 var(--font-body); color: var(--text-2); }
.phone { display: block; height: auto; }
.grid-auto { display: grid; gap: 14px; }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--bg); color: var(--text-1); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 500px at 78% 30%, rgba(56, 225, 198, .14), transparent 60%),
              radial-gradient(700px 420px at 10% 90%, rgba(77, 124, 255, .12), transparent 60%);
}
.hero__inner { position: relative; max-width: 1200px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) clamp(18px, 4vw, 40px) clamp(48px, 6vw, 80px); display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.hero__copy { flex: 1 1 440px; min-width: 0; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 26px; background: var(--accent-tint); border: 1px solid var(--accent-border); font: 700 13px/1.4 var(--font-body); letter-spacing: .03em; color: var(--accent-ink); }
@media (max-width: 479px) { .badge__more { display: none; } }
.badge__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent); animation: mzpulse 1.6s ease-in-out infinite; }
@keyframes mzpulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .badge__dot { animation: none; } html { scroll-behavior: auto; } }
.hero h1 { margin: 22px 0 0; font: 800 clamp(38px, 5.6vw, 66px)/1.04 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--accent-ink); }
.hero__lede { margin: 22px 0 0; max-width: 560px; font: 500 clamp(17px, 1.6vw, 20px)/1.6 var(--font-body); color: var(--text-2); text-wrap: pretty; }
.join { margin: 30px 0 0; max-width: 560px; scroll-margin-top: 120px; }
.join__row { display: flex; flex-wrap: wrap; gap: 10px; }
.join__row input { flex: 1 1 240px; min-width: 0; min-height: 56px; padding: 0 18px; border-radius: 18px; border: 1.5px solid var(--border); background: var(--surface-card); color: var(--text-1); font: 600 17px var(--font-body); outline: none; }
.join__row input:focus { border-color: var(--accent-border); }
.join__row button { flex: 0 1 auto; min-height: 56px; padding: 0 24px; border-radius: 18px; font-size: 17px; }
.join__row button:disabled { opacity: .7; cursor: default; }
.join__tips { margin: 14px 0 0; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font: 500 14px/1.5 var(--font-body); color: var(--text-2); }
.join__tips input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #38e1c6; flex: none; }
.join__small { margin: 10px 0 0; font: 500 13px/1.55 var(--font-body); color: var(--text-3); }
.join__small a { font-weight: 700; }
.join__err, .form-err { margin: 10px 0 0; font: 600 14px/1.5 var(--font-body); color: var(--error); }
.join__err a, .form-err a { color: inherit; text-decoration: underline; }
.chips { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 13px; border-radius: 26px; font: 700 13px var(--font-body); color: var(--text-1); }
.chip--english { background: rgba(139, 108, 240, .15); }
.chip--maths { background: rgba(35, 192, 138, .15); }
.chip--verbal { background: rgba(255, 122, 102, .15); }
.chip--nvr { background: rgba(77, 124, 255, .16); }
.hero__boards { margin: 14px 0 0; font: 600 13px/1.5 var(--font-body); color: var(--text-3); }
.hero__media { flex: 1 1 440px; min-width: 0; }
/* Side by side: the video takes the larger share, lines up with the headline, and bleeds a little past the
   content edge on wide screens. */
@media (min-width: 1060px) {
  .hero__copy { flex: 0 1 560px; }   /* 550px+ keeps the headline on three lines */
  .hero__media { flex: 1 1 360px; align-self: flex-start; margin-top: 58px; margin-right: calc(-1 * clamp(0px, (100vw - 1200px) / 2, 200px)); }   /* grows into the right-hand page margin, stopping 40px from the screen edge */
}
.hero__media .media { box-shadow: 0 40px 80px rgba(0, 0, 0, .55); }

/* Video cards: silent 16:9 loops (see initVideos in pages.js). The poster frame shows until the video plays. */
.media { position: relative; width: 100%; margin: 0; border-radius: 24px; overflow: hidden; border: 1px solid var(--border); background: #070d1c; box-shadow: 0 30px 60px rgba(30, 50, 90, .22); }
.media video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.media__toggle { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: rgba(7, 13, 28, .6); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: .75; transition: opacity .2s; }
.media__toggle[hidden] { display: none; }
.media:hover .media__toggle, .media__toggle:focus-visible { opacity: 1; }
.media__toggle:focus-visible { outline: 3px solid #38e1c6; outline-offset: 2px; }
.media__toggle::before { content: ""; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }
.media__toggle[data-state="paused"]::before { width: 0; height: 0; margin-left: 4px; border: none; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }

/* Proof */
.proof { border-bottom: 1px solid var(--border); }
.proof__grid { max-width: 1200px; margin: 0 auto; padding: 40px clamp(18px, 4vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.proof__item { display: flex; gap: 16px; align-items: flex-start; }
.proof__n { font: 800 clamp(34px, 3.6vw, 44px)/1 var(--font-display); color: var(--accent-ink); letter-spacing: -.02em; }
.proof__item p { margin: 0; font: 600 16px/1.45 var(--font-body); color: var(--text-1); }
.proof__item .who { margin: 4px 0 0; font: 600 13px var(--font-body); color: var(--text-3); }
.proof__src { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px) 28px; font: 500 13px var(--font-body); color: var(--text-3); }

/* How it works */
.how__copy { flex: 1 1 460px; }
.steps-list { margin: 34px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; gap: 18px; padding: 22px; border-radius: 26px; background: var(--surface-card); border: 1px solid var(--border); }
.step__icon { width: 52px; height: 52px; border-radius: 17px; flex: none; background: var(--accent-tint); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.step__body { min-width: 0; }
.step__n { margin: 0; font: 700 13px var(--font-body); letter-spacing: .06em; color: var(--text-3); }
.step h3 { margin: 4px 0 0; font: 700 21px var(--font-display); color: var(--text-1); }
.step p { margin: 8px 0 0; font: 500 16px/1.6 var(--font-body); color: var(--text-2); }
.step .old { margin: 10px 0 0; font: 600 14px/1.5 var(--font-body); color: var(--text-3); text-decoration: line-through; }
.how__art { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }
.how__art > div { position: relative; width: 100%; }
.how__art .callout { position: relative; left: auto; bottom: auto; margin: 16px 0 0; }
.callout { position: absolute; left: -30px; bottom: 110px; max-width: 220px; padding: 14px 16px; border-radius: 20px; background: var(--surface-card); border: 1px solid var(--accent-border); box-shadow: 0 12px 32px rgba(15, 27, 45, .14); }
.callout .k { margin: 0; font: 700 12px var(--font-body); letter-spacing: .06em; color: var(--accent-ink); }
.callout p { margin: 6px 0 0; font: 500 14px/1.45 var(--font-body); color: var(--text-1); }
@media (max-width: 520px) { .callout { left: -8px; } }

/* Agent band */
.agent { flex-wrap: wrap-reverse; }
.agent__art { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }
.agent__art .media { box-shadow: 0 30px 60px rgba(0, 0, 0, .6); }
.agent__copy { flex: 1 1 460px; }
.agent__copy .body-lg { max-width: 560px; }
.pillars { margin: 30px 0 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pillars .icon { font-size: 26px; }

/* Subjects */
.subjects__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.subjects__head .h2 { max-width: 720px; }
.subjects__head p { margin: 0; max-width: 380px; font: 500 16px/1.6 var(--font-body); color: var(--text-2); }
.subjects__grid { margin: 36px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.subject { padding: 24px; border-radius: 26px; background: var(--surface-card); border: 1px solid var(--border); border-top: 5px solid var(--c); }
.subject__head { display: flex; align-items: center; gap: 12px; }
.subject__icon { width: 48px; height: 48px; border-radius: 16px; background: var(--t); display: flex; align-items: center; justify-content: center; font-size: 23px; flex: none; }
.subject h3 { margin: 0; font: 700 20px var(--font-display); color: var(--text-1); }
.subject > p { margin: 14px 0 0; font: 500 15px/1.6 var(--font-body); color: var(--text-2); }
.subject ul { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.subject li { padding: 6px 11px; border-radius: 20px; background: var(--t); font: 700 13px var(--font-body); color: var(--i); }
.subject--verbal { --c: #ff7a66; --t: rgba(255, 122, 102, .15); --i: #b3452b; }
.subject--nvr { --c: #4d7cff; --t: rgba(77, 124, 255, .16); --i: #3358cf; }
.subject--maths { --c: #23c08a; --t: rgba(35, 192, 138, .15); --i: #0b7650; }
.subject--english { --c: #8b6cf0; --t: rgba(139, 108, 240, .15); --i: #5f43c4; }
.choose { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 18px 22px; border-radius: 22px; background: var(--accent-tint); border: 1px solid var(--accent-border); }
.choose span { font-size: 22px; }
.choose p { margin: 0; flex: 1 1 300px; font: 500 16px/1.5 var(--font-body); color: var(--text-1); }

/* Parents */
.parents { background: var(--page); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.parents__copy { flex: 1 1 460px; }
.feats { margin: 28px 0 0; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.feat { display: flex; gap: 12px; padding: 16px; border-radius: 20px; background: var(--surface-card); border: 1px solid var(--border); }
.feat > span { font-size: 20px; }
.feat h3 { margin: 0; font: 700 16px var(--font-body); color: var(--text-1); }
.feat p { margin: 4px 0 0; font: 500 14px/1.5 var(--font-body); color: var(--text-2); }
.privacy-note { margin: 22px 0 0; padding: 20px 22px; border-radius: 22px; background: var(--surface-card); border: 1px solid var(--border); }
.privacy-note h3 { margin: 0; font: 700 16px var(--font-body); color: var(--text-1); }
.privacy-note p { margin: 6px 0 0; font: 500 15px/1.6 var(--font-body); color: var(--text-2); }
.privacy-note a { font-weight: 700; }
.parents__art { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }

/* Section videos grow outwards into the page margin on their own side (like the hero), stopping 40px from
   the screen edge. Only the card grows, so the text columns don't move. */
.how__art .media, .agent__art .media, .parents__art .media {
  --bleed: clamp(0px, (100vw - 1200px) / 2, 200px);
  flex: none; width: calc(100% + var(--bleed)); max-width: none;
}
.how__art .media, .parents__art .media { margin-right: calc(-1 * var(--bleed)); }
.agent__art .media { margin-left: calc(-1 * var(--bleed)); }

/* Phones: the landscape videos are too small to read, so show the app screenshots instead.
   The hidden videos never load (pages.js only loads them when they come into view). */
.phones { display: none; }
@media (max-width: 699px) {
  [data-video] { display: none; }
  .phones { display: flex; justify-content: center; align-items: flex-end; }
  .phones .phone { filter: drop-shadow(0 30px 50px rgba(30, 50, 90, .22)); }
  [data-theme="starry"] .phones .phone { filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); }
  .phones--single .phone { width: min(260px, 70vw); }
  .phones--pair { padding: 0 0 26px; }
  .phones--pair .front { position: relative; z-index: 2; width: min(220px, 56vw); }
  .phones--pair .back { width: min(180px, 46vw); opacity: .95; }
  .hero .phones--pair .back { margin-right: -50px; transform: translateY(26px) rotate(-5deg); }
  .parents .phones--pair .back { margin-left: -60px; transform: translateY(-24px) rotate(4deg); }
}

/* Years */
.years .h2 { max-width: 760px; }
.years__grid { margin: 36px 0 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.year { padding: 22px; }
.year__top { display: flex; justify-content: space-between; align-items: center; }
.year__y { font: 800 15px var(--font-display); color: var(--accent-ink); }
.year__top span:last-child { font-size: 22px; }
.year .age { margin: 2px 0 0; font: 600 13px var(--font-body); color: var(--text-3); }
.year h3 { margin: 14px 0 0; font-size: 19px; }
.year p:last-child { margin-top: 8px; }

/* Story */
.story { gap: 48px; }
.story__copy { flex: 1 1 480px; }
.story__copy .body-lg { margin-top: 18px; line-height: 1.65; }
.story__copy .body-lg + .body-lg { margin-top: 14px; }
.story__copy b { color: var(--text-1); }
.founder { margin: 24px 0 0; display: flex; align-items: center; gap: 12px; }
.founder__avatar { width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(160deg, var(--accent), #2ab7d6); display: flex; align-items: center; justify-content: center; font: 800 20px var(--font-display); color: var(--on-accent); flex: none; }
.founder p { margin: 0; font: 700 16px var(--font-body); }
.founder p + p { margin: 2px 0 0; font: 500 14px var(--font-body); color: var(--text-2); }
.kids { flex: 1 1 360px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kid h3 { margin: 0; font: 700 17px var(--font-body); }
.kid .sub { margin: 2px 0 14px; font: 600 13px var(--font-body); color: var(--text-2); }
.bar { margin-bottom: 10px; }
.bar__label { display: flex; justify-content: space-between; font: 600 13px var(--font-body); color: var(--text-2); }
.bar__label b { color: var(--text-1); font-weight: 800; }
.bar__track { margin-top: 5px; height: 8px; border-radius: 5px; background: #12253d; }
.bar__fill { height: 100%; border-radius: 5px; }

/* Voices */
.voices .h2 { max-width: 760px; }
.voices__grid { margin: 36px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.voice { margin: 0; padding: 24px; border-radius: 26px; background: var(--surface-card); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 18px; }
.voice blockquote { margin: 0; font: 500 17px/1.6 var(--font-body); color: var(--text-1); }
.voice figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.voice__i { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font: 800 17px var(--font-display); color: #fff; flex: none; }
.voice figcaption p { margin: 0; font: 700 15px var(--font-body); color: var(--text-1); }
.voice figcaption p + p { margin: 2px 0 0; font: 500 13px var(--font-body); color: var(--text-2); }

/* Home pricing */
.home-pricing { background: var(--page); border-top: 1px solid var(--border); }
.home-pricing .split { gap: 48px; }
.home-pricing__copy { flex: 1 1 420px; }
.cmp { margin: 24px 0 0; border-radius: 22px; background: var(--surface-card); border: 1px solid var(--border); overflow: hidden; }
.cmp__row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--border-subtle); font: 600 15px var(--font-body); color: var(--text-2); }
.cmp__row:last-child { border-bottom: none; }
.cmp__row b { color: var(--text-1); font-weight: 700; }
.cmp__row--head { padding: 14px 18px; font: 700 13px var(--font-body); letter-spacing: .04em; color: var(--text-3); }
.cmp__row--head span:nth-child(2) { color: var(--accent-ink); }
.home-pricing__card { flex: 1 1 360px; display: flex; justify-content: center; }
.home-pricing__card .plan { flex: none; width: 100%; max-width: 440px; padding: 30px; box-shadow: 0 30px 60px rgba(15, 27, 45, .25); }
.home-pricing__card .plan__name { font-size: 15px; }
.home-pricing__card .plan__price { margin-top: 18px; font-size: 56px; }
.home-pricing__card .plan__then { font-size: 16px; }
.home-pricing__card .plan__list { margin-top: 22px; gap: 10px; }
.home-pricing__card .plan__cta { margin-top: 26px; }
.plan__more { margin: 14px 0 0; display: block; text-align: center; font: 700 15px var(--font-body); color: var(--text-2); }
.plan__more:hover { color: var(--text-1); }

/* Final CTA */
.final { background: var(--bg); color: var(--text-1); text-align: center; }
.final__inner { max-width: 820px; margin: 0 auto; padding: clamp(64px, 8vw, 110px) clamp(18px, 4vw, 40px); }
.final .brand__mark { display: inline-flex; gap: 5px; height: 48px; }
.final .brand__mark span { width: 12px; border-radius: 6px; }
.final .brand__mark span:nth-child(1) { height: 20px; }
.final .brand__mark span:nth-child(2) { height: 29px; }
.final .brand__mark span:nth-child(3) { height: 38px; }
.final .brand__mark span:nth-child(4) { height: 48px; }
.final h2 { margin: 24px 0 0; font: 800 clamp(32px, 4.4vw, 54px)/1.08 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.final .body-lg { margin: 16px auto 0; max-width: 580px; }
.final .btn { margin: 30px auto 0; min-height: 58px; padding: 0 30px; border-radius: 20px; font-size: 18px; }
.final__motto { margin: 16px 0 0; font: 700 13px var(--font-body); letter-spacing: .18em; color: var(--accent-ink); }

/* Big footer (homepage) */
.site-footer--big { border-top: 1px solid var(--border); }
.footer-cols { max-width: 1200px; margin: 0 auto; padding: 48px clamp(18px, 4vw, 40px) 36px; display: flex; flex-wrap: wrap; gap: 36px 60px; }
.footer-cols__brand { flex: 1 1 280px; }
.footer-cols__brand .brand__mark { height: 26px; }
.footer-cols__brand .brand__mark span { width: 6px; border-radius: 3px; }
.footer-cols__brand .brand__mark span:nth-child(1) { height: 11px; }
.footer-cols__brand .brand__mark span:nth-child(2) { height: 16px; }
.footer-cols__brand .brand__mark span:nth-child(3) { height: 21px; }
.footer-cols__brand .brand__mark span:nth-child(4) { height: 26px; }
.footer-cols__brand .brand__word { font-size: 23px; }
.footer-cols__brand p { margin: 14px 0 0; max-width: 320px; font: 500 15px/1.6 var(--font-body); }
.footer-col { flex: 0 1 160px; }
.footer-col h2 { margin: 0 0 12px; font: 700 13px var(--font-body); letter-spacing: .06em; color: var(--text-1); }
.footer-col div { display: flex; flex-direction: column; gap: 10px; font: 500 15px var(--font-body); }
.footer-bottom { max-width: 1200px; margin: 0 auto; padding: 18px clamp(18px, 4vw, 40px) 30px; border-top: 1px solid var(--border); font: 500 13px/1.6 var(--font-body); color: var(--text-3); }

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: 90px; }
@media (max-width: 979px) { [id] { scroll-margin-top: 90px; } }

/* ---------- Waitlist popup (homepage) ---------- */
.popup-overlay {
  position: fixed; inset: 0; z-index: 2000; padding: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 13, 26, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.popup-overlay[hidden] { display: none; }
.popup-overlay.active { opacity: 1; pointer-events: auto; }
.popup-card {
  position: relative; width: 100%; max-width: 345px; border-radius: 24px; overflow: hidden;
  background: var(--surface-card); box-shadow: 0 36px 90px rgba(5, 13, 26, .45), 0 0 0 1px rgba(56, 225, 198, .18);
  transform: scale(.93) translateY(12px); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.popup-overlay.active .popup-card { transform: none; }
.popup-close {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 28px; height: 28px; border-radius: 50%;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12); color: rgba(234, 241, 251, .75);
}
.popup-close:hover { background: rgba(255, 255, 255, .22); color: #eaf1fb; }
.popup-top { position: relative; overflow: hidden; padding: 28px 28px 24px; background: var(--bg); color: var(--text-1); }
.popup-top::after {
  content: ""; position: absolute; width: 200px; height: 200px; right: -50px; bottom: -70px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 225, 198, .16), transparent 70%); pointer-events: none;
}
.popup-badge { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; font: 700 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.popup-top > * { position: relative; z-index: 1; }
.popup-top h2 { margin: 0; font: 800 24px/1.15 var(--font-display); letter-spacing: -.02em; }
.popup-top p:last-child { position: relative; margin: 10px 0 0; font: 500 14px/1.6 var(--font-body); color: var(--text-2); }
.popup-bottom { padding: 20px 28px 22px; background: var(--bg); }
.popup-form { display: flex; flex-direction: column; gap: 8px; }
.popup-form input { min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface-card); color: var(--text-1); font: 600 16px var(--font-body); outline: none; }
.popup-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.popup-form .btn { min-height: 48px; border-radius: 14px; font-size: 15px; }
.popup-form .btn:disabled { opacity: .7; cursor: default; }
.popup-form .form-err { margin: 2px 0 0; font-size: 13px; }
.popup-success { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 12px; border-radius: 14px; background: var(--accent-tint); color: var(--accent-ink); font: 700 14px/1.4 var(--font-body); text-align: center; }
.popup-success[hidden] { display: none; }
.popup-note { margin: 10px 0 0; text-align: center; font: 500 12px var(--font-body); color: var(--text-3); }
@media (max-width: 520px) {
  .popup-top { padding: 24px 20px 20px; }
  .popup-top h2 { font-size: 21px; }
  .popup-bottom { padding: 18px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) { .popup-overlay, .popup-card { transition: none; } }