/* ══════════════════════════════════════════════════════════════════════
   STUDY DESK — the blue system

   Palette taken from e2language.com, which is the reference Wasim asked
   for. Their actual values, read off the live page:

     #12326E   deep navy      — dark sections, headings, text on white buttons
     #517DFF   bright blue    — the one filled call-to-action colour
     #2C2C3E   body ink       — every paragraph on the site
     #F8FAFF   page ground    — a white with a blue bias, never pure #FFF
     #CDEAFA   pale blue      — tints and highlights
     DM Sans 700 for headings, 12px button radius

   Blue does the work everywhere. Green and amber survive only as SIGNALS —
   granted, on trial, expired — because a status colour that is also the
   brand colour cannot signal anything.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --navy:#12326E; --navy-2:#0D2350; --navy-3:#1B4494;
  --blue:#517DFF; --blue-2:#3A66F0; --blue-soft:#E8EEFF; --blue-pale:#CDEAFA;
  --ink:#2C2C3E; --ink-2:#4A4A60; --muted:#6B7189; --line:#DFE5F4;
  --bg:#FFFFFF; --bg-2:#F8FAFF; --card:#FFFFFF;

  --good:#0E9F6E; --good-soft:#E4F6EF;
  --warn:#B4690E; --warn-soft:#FBF1DF;
  --bad:#C0392B;  --bad-soft:#FBE9E6;

  --r:14px; --rb:12px;
  --shadow:0 1px 2px rgba(18,50,110,.06),0 10px 28px -14px rgba(18,50,110,.28);
  --shadow-lg:0 30px 70px -24px rgba(9,20,50,.55);
  --wrap:1160px;
  /* e2language's own pairing, read off their page: DM Sans for headings,
     Inter for navigation, buttons and body text. The top bar is Inter. */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"DM Sans","Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#E9EDF8; --ink-2:#C6CDE2; --muted:#9AA3BE; --line:#243053;
    --bg:#0D1220; --bg-2:#121A2E; --card:#151E36;
    --navy:#8FB0FF; --blue:#7B9DFF; --blue-2:#96B3FF; --blue-soft:#18244A; --blue-pale:#1B2A52;
    --good-soft:#0F2A22; --warn-soft:#2C2312; --bad-soft:#2E1815;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px -16px rgba(0,0,0,.8);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:16.5px;line-height:1.6;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img{max-width:100%;height:auto}
a{color:var(--blue);text-underline-offset:3px}
h1,h2,h3{font-family:var(--font-display);line-height:1.14;margin:0 0 .4em;
  letter-spacing:-.022em;font-weight:700;text-wrap:balance;color:var(--navy)}
h1{font-size:clamp(2.1rem,1.3rem+3.2vw,3.5rem)}
h2{font-size:clamp(1.55rem,1.2rem+1.5vw,2.3rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue)}
.center{text-align:center}

/* ── buttons ─────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:var(--rb);border:1.5px solid transparent;
  font-family:var(--font);font-weight:600;font-size:1rem;cursor:pointer;text-decoration:none;
  transition:transform .1s ease,box-shadow .18s ease,background .18s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px -8px rgba(81,125,255,.75)}
.btn-primary:hover{background:var(--blue-2);box-shadow:0 12px 28px -8px rgba(81,125,255,.85)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-3)}
.btn-white{background:#fff;color:var(--navy);border-color:#fff}
.btn-white:hover{background:var(--blue-pale)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{background:var(--bg-2);border-color:var(--blue)}
.btn-sm{padding:9px 16px;font-size:.9rem;border-radius:9px}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ── header ──────────────────────────────────────────────────────── */
.topbar{background:var(--navy-2);color:#D3DFFA;font-size:.86rem;text-align:center;
  padding:10px 18px;font-weight:500;font-family:var(--font);letter-spacing:-.005em}
.topbar b{color:#fff}
.topbar a{color:#fff;text-decoration:underline;font-weight:700}

.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:saturate(170%) blur(10px);border-bottom:1px solid var(--line)}
.hdr .row{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.16rem;
  color:var(--navy);text-decoration:none;letter-spacing:-.03em;font-family:var(--font-display)}
.brand .mark{width:34px;height:34px;border-radius:10px;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:17px}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{padding:10px 14px;border-radius:9px;color:var(--ink);text-decoration:none;
  font-weight:500;font-size:.98rem;font-family:var(--font);letter-spacing:-.01em}
.nav a:hover{background:var(--blue-soft);color:var(--navy)}
.navtoggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);
  border-radius:9px;padding:8px 12px;font-size:18px;cursor:pointer;color:var(--navy)}
@media (max-width:900px){
  .nav{position:fixed;inset:auto 0 auto 0;top:calc(72px + var(--barh,38px));
    flex-direction:column;align-items:stretch;gap:2px;background:var(--bg);
    border-bottom:1px solid var(--line);padding:12px 22px 20px;display:none;
    box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav .btn{width:100%;margin-top:6px}
  .navtoggle{display:block}
}

/* ── the dark hero ───────────────────────────────────────────────── */
.dark{--d-ink:#F2F6FF; --d-mut:#AFC1E8; --d-line:rgba(255,255,255,.14);
  background:
    radial-gradient(56rem 30rem at 84% -10%, rgba(81,125,255,.55), transparent 60%),
    radial-gradient(48rem 32rem at 4% 108%, rgba(120,170,255,.30), transparent 58%),
    linear-gradient(165deg,#0D2350 0%,#12326E 55%,#0E2A5C 100%);
  color:var(--d-ink);position:relative;overflow:hidden}
.dark::after{content:"";position:absolute;inset:auto 0 -1px 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent)}
.dark .hdr{background:transparent;border-bottom-color:var(--d-line);backdrop-filter:none}
.dark .brand,.dark h1,.dark h2{color:#fff}
.dark .nav a{color:#E5ECFF}
.dark .nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.dark .navtoggle{color:#fff;border-color:rgba(255,255,255,.28)}
.dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.dark .btn-ghost:hover{background:rgba(255,255,255,.12)}
.dark .eyebrow{color:#9EC5FF}
@media (max-width:900px){ .dark .nav{background:#0F2A5C;border-bottom-color:var(--d-line)} }

.hero2{padding:56px 0 70px}
.hero2 .grid2{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}
@media (max-width:980px){.hero2 .grid2{grid-template-columns:1fr;gap:38px}}
.hero2 h1{font-family:var(--font-display);font-size:clamp(2.2rem,1.4rem+3.3vw,3.6rem);
  line-height:1.02;margin:0 0 18px;font-weight:700}
.hero2 h1 em{font-style:normal;color:#9EC5FF}
.hero2 .say{font-size:1.14rem;color:var(--d-mut);max-width:40ch;margin:0 0 28px}
.hero2 .cta-row{gap:11px}
.hero2 .cta-row .btn{padding:13px 20px}
@media (min-width:981px) and (max-width:1200px){.hero2 .cta-row .btn{padding:12px 15px;font-size:.94rem}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.proof{display:flex;gap:28px;flex-wrap:wrap;margin-top:32px;padding-top:24px;
  border-top:1px solid var(--d-line)}
.proof div{display:flex;flex-direction:column}
.proof b{font-family:var(--font-display);font-size:1.7rem;font-weight:700;letter-spacing:-.03em;color:#fff;line-height:1.05}
.proof span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--d-mut);
  margin-top:2px}

/* ── the running deck ────────────────────────────────────────────── */
.deck{position:relative}
.screen{position:relative;background:#fff;border-radius:18px;
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.14);
  overflow:hidden;aspect-ratio:16/11}
@media (max-width:520px){.screen{aspect-ratio:4/3.4}}
.screen .bar{display:flex;gap:6px;padding:12px 15px;background:#EEF3FF;
  border-bottom:1px solid #DDE6FA}
.screen .bar i{width:9px;height:9px;border-radius:50%;background:#C6D2EC}
.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% - 37px)}
.slide{position:absolute;inset:0;padding:20px 22px;opacity:0;
  transform:translateY(10px) scale(.995);
  transition:opacity .32s ease,transform .32s cubic-bezier(.22,.9,.3,1);
  color:#2C2C3E;background:#fff;display:flex;flex-direction:column;gap:11px;
  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:.13em;text-transform:uppercase;
  color:var(--blue)}
.slide h4{font-size:1.05rem;font-weight:700;margin:0;color:#12326E;letter-spacing:-.015em}
.slide .tabs{display:flex;gap:5px;flex-wrap:wrap}
.slide .tabs span{font-size:.66rem;font-weight:700;padding:4px 10px;border-radius:99px;
  background:#EEF3FF;color:#5B6890;border:1px solid #DDE6FA}
.slide .tabs span.a{background:#517DFF;color:#fff;border-color:#517DFF}
.ln{height:7px;border-radius:4px;background:#EDF1FC}
.slide .opt{display:flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #DDE6FA;
  border-radius:10px;font-size:.8rem;color:#4A5578}
.slide .opt.right{border-color:#0E9F6E;background:#E4F6EF;color:#0A6B4C;font-weight:700}
.slide .opt b{margin-left:auto;color:#0E9F6E}
.slide .chat{display:flex;flex-direction:column;gap:8px}
.slide .msg{max-width:84%;padding:9px 13px;border-radius:13px;font-size:.79rem;line-height:1.45}
.slide .msg.me{align-self:flex-end;background:#517DFF;color:#fff;border-bottom-right-radius:4px}
.slide .msg.her{align-self:flex-start;background:#EEF3FF;color:#2C2C3E;border-bottom-left-radius:4px}
.slide .who{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);
  font-weight:800}
.slide .rowbar{display:flex;align-items:center;gap:10px;font-size:.78rem}
.slide .rowbar .nm{width:74px;color:#4A5578;font-weight:700}
.slide .rowbar .tr{flex:1;height:9px;border-radius:5px;background:#EDF1FC;overflow:hidden}
.slide .rowbar .tr i{display:block;height:100%;border-radius:5px}
.slide .rowbar .pc{width:38px;text-align:right;font-weight:700;
  font-variant-numeric:tabular-nums;color:#12326E}
.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:700;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;align-items:flex-end;height:20px}
.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:20px;min-height:48px}
.deck .cap p{margin:0;color:#DCE6FF;font-size:1rem;font-weight:500;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,.3);transition:width .25s ease,background .25s ease;
  position:relative;overflow:hidden}
.dots button[aria-selected="true"]{width:30px;background:rgba(255,255,255,.28)}
.dots button[aria-selected="true"]::after{content:"";position:absolute;inset:0;border-radius:99px;
  background:#9EC5FF;transform-origin:left;animation:dotFill 2600ms linear forwards}
@keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.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}
  .dots button[aria-selected="true"]::after{animation:none;transform:scaleX(1)}
}

/* ── sections ────────────────────────────────────────────────────── */
.section{padding:68px 0;border-top:1px solid var(--line)}
.section.tint{background:var(--bg-2);border-top:0}
.lede{font-size:1.1rem;color:var(--ink-2);max-width:60ch}
.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:24px;box-shadow:var(--shadow)}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}
.ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;
  background:var(--blue-soft);border:1px solid var(--line);margin-bottom:14px}

.benefit{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start}
.benefit .n{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;
  font-size:25px;background:var(--blue-soft);border:1px solid var(--line)}
.benefit h3{margin-bottom:.25em;font-size:1.06rem}
.benefit p{margin:0;color:var(--muted);font-size:.97rem}
.benefit p b{color:var(--ink)}

.honest{border:1px solid var(--line);border-left:4px solid var(--blue);
  background:var(--bg-2);border-radius:0 var(--r) var(--r) 0;padding:20px 24px}
.honest h3{margin-bottom:.3em;font-size:1.05rem}
.honest p{margin:0;color:var(--ink-2);max-width:68ch}

/* ── subjects and packages ───────────────────────────────────────── */
.subj{display:flex;flex-direction:column;gap:6px}
.subj .top{display:flex;align-items:center;gap:11px}
.subj .em{font-size:27px}
.subj h3{margin:0;font-size:1.08rem}
.subj .cnt{margin-left:auto;font-size:.78rem;font-weight:700;color:var(--navy);
  background:var(--blue-soft);border:1px solid var(--line);border-radius:99px;padding:4px 11px}
.soon{opacity:.6}
.soon .cnt{color:var(--warn);background:var(--warn-soft)}
.price{font-family:var(--font-display);font-size:2rem;font-weight:700;letter-spacing:-.03em;color:var(--navy)}
.price small{font-size:.8rem;font-weight:600;color:var(--muted)}
.tick{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px}
.tick li{display:flex;gap:10px;font-size:.96rem;color:var(--ink-2)}
.tick li::before{content:"✓";color:var(--blue);font-weight:800;flex:none}
.pop{border-color:var(--blue);border-width:2px;position:relative;
  box-shadow:0 20px 50px -22px rgba(81,125,255,.6)}
.pop::after{content:"Most centres start here";position:absolute;top:-12px;left:24px;
  background:var(--blue);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 11px;border-radius:99px}

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 22px;font-weight:700;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--blue);flex:none;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{background:var(--blue-soft)}
.faq .a{padding:0 22px 20px;color:var(--muted);max-width:70ch}
.faq .a p{margin:0 0 .7em}
.faq .a p:last-child{margin-bottom:0}

/* ── forms ───────────────────────────────────────────────────────── */
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-weight:700;font-size:.92rem;color:var(--navy)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:11px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:3px solid rgba(81,125,255,.28);outline-offset:0;border-color:var(--blue)}
.hint{font-size:.84rem;color:var(--muted)}
.alert{padding:13px 15px;border-radius:11px;font-size:.94rem;margin-bottom:14px;border:1px solid}
.alert-bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent);color:var(--bad)}
.alert-ok{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 38%,transparent);color:var(--good)}
.alert-info{background:var(--blue-soft);border-color:var(--line);color:var(--navy)}

/* ── tables ──────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:640px}
th,td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:var(--bg-2);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--blue-soft)}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.75rem;
  font-weight:700;border:1px solid}
.pill-ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent);background:var(--good-soft)}
.pill-trial{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:var(--warn-soft)}
.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:var(--bad-soft)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ── footer ──────────────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--line);padding:42px 0;background:var(--navy);
  color:#C6D4F2;font-size:.93rem}
.ftr .brand{color:#fff}
.ftr .cols{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
.ftr strong{color:#fff}
.ftr a{color:#B9C9EE;text-decoration:none;display:block;padding:3px 0}
.ftr a:hover{color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--blue);color:#fff;padding:10px 14px;
  border-radius:9px;z-index:99}
:focus-visible{outline:3px solid rgba(81,125,255,.5);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* WhatsApp keeps its own brand green — a green button here is not the site's
   accent, it is the recognisable colour of the app it opens. */
.btn-wa{background:#128C7E;color:#fff;border-color:#128C7E}
.btn-wa:hover{background:#0F7A6D}

/* On the navy hero a navy button is invisible. Anything that lands there
   flips to white-on-navy, which is also how e2language does it. */
.dark .btn-dark{background:#fff;color:var(--navy);border-color:#fff}
.dark .btn-dark:hover{background:var(--blue-pale)}

/* ── the early-bird bar ──────────────────────────────────────────── */
.tb-in{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:center}
.tb-code{background:#fff;color:var(--navy-2);border-radius:6px;padding:2px 8px;font-weight:800;
  letter-spacing:.06em;font-size:.82rem;font-family:inherit}
.tb-clock{background:rgba(255,255,255,.14);border-radius:99px;padding:3px 11px;font-size:.8rem}
.tb-clock b{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ── the counting numbers, on a plain ground ─────────────────────── */
.counters{background:var(--bg);border-top:0;padding:52px 0}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
@media (max-width:760px){.cgrid{grid-template-columns:repeat(2,1fr);gap:30px 18px}}
.cnum b{display:block;font-family:var(--font-display);font-size:clamp(2.4rem,1.4rem+3.2vw,3.6rem);font-weight:700;
  letter-spacing:-.045em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.cnum span{display:block;margin-top:8px;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);font-weight:600}

/* ── the early-bird slide ────────────────────────────────────────── */
.offer-slide{display:flex;flex-direction:column;gap:9px}
.offer-slide .oc{align-self:flex-start;background:var(--blue);color:#fff;font-weight:800;
  letter-spacing:.14em;padding:6px 14px;border-radius:8px;font-size:.82rem}
.offer-slide .orow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 12px;border:1px solid #DDE6FA;border-radius:10px;font-size:.83rem;color:#4A5578}
.offer-slide .orow s{color:#94A0BE;margin-right:5px}
.offer-slide .orow b{color:#12326E;font-size:.95rem}

/* ── the WhatsApp button, and its pulse ──────────────────────────── */
.early{margin:-6px 0 0;font-size:.9rem;font-weight:700;color:var(--blue)}
.early b{background:var(--blue-soft);border-radius:5px;padding:1px 6px;letter-spacing:.04em}
.btn-wa .flash,.flash{position:relative}
.flash::before{content:"";position:absolute;inset:-4px;border-radius:16px;
  border:2px solid #128C7E;opacity:0;animation:waPulse 2.4s ease-out infinite}
@keyframes waPulse{0%{transform:scale(.96);opacity:.75}70%{transform:scale(1.06);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.flash::before{animation:none;opacity:0}}

/* ── White at the top, blue below ─────────────────────────────────
   The header used to be transparent and sit inside the navy hero, which
   made the top of the page dark on the site and white in the app. Now the
   bar is white everywhere and the blue starts underneath it. */
.hdr-white{background:#fff;border-bottom:1px solid var(--line)}
.hdr-white .brand{color:var(--navy)}
.hdr-white .nav a{color:var(--ink)}
.hdr-white .nav a:hover{background:var(--blue-soft);color:var(--navy)}
.hdr-white .navtoggle{color:var(--navy);border-color:var(--line)}
.dark{border-radius:0}
.dark .hero2{padding-top:64px}
@media (max-width:900px){ .hdr-white + main .nav, .hdr-white .nav{background:#fff} }

/* ══════════════════════════════════════════════════════════════════════
   THE WHATSAPP CHAT WIDGET

   It is not a chat with a robot. It collects the two things you always ask
   anyway — who the child is and which subject — and hands the whole message
   to WhatsApp already written. A parent presses one button and the message
   is in your phone with the details in it.

   That is deliberate: a real two-way WhatsApp bridge needs Meta's Business
   Platform, a verified business, and a phone number that can no longer be
   used in the ordinary WhatsApp app. This gets 90% of the value for none of
   that, and it works today.
   ══════════════════════════════════════════════════════════════════════ */
.wa-fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:120;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 32px -8px rgba(37,211,102,.75),0 4px 12px rgba(0,0,0,.2)}
.wa-fab svg{width:32px;height:32px}
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:3px solid #25D366;animation:waRing 2s ease-out infinite}
@keyframes waRing{0%{transform:scale(1);opacity:.9}75%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.wa-fab .badge{position:absolute;top:-3px;right:-3px;width:18px;height:18px;border-radius:50%;
  background:#E5484D;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;
  border:2px solid #fff;animation:waBlink 1.4s steps(1,end) infinite}
@keyframes waBlink{0%,60%{opacity:1}61%,100%{opacity:.25}}
.wa-fab:hover{filter:brightness(1.06)}

.wa-panel{position:fixed;right:20px;bottom:calc(92px + env(safe-area-inset-bottom,0px));
  z-index:121;width:min(340px,calc(100vw - 40px));border-radius:16px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 28px 60px -18px rgba(9,20,50,.5);
  transform:translateY(12px) scale(.97);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s cubic-bezier(.2,.9,.3,1)}
.wa-panel.open{opacity:1;transform:none;pointer-events:auto}
.wa-panel .wh{background:#075E54;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:11px}
.wa-panel .wh b{display:block;font-size:.98rem;font-family:var(--font-display)}
.wa-panel .wh span{font-size:.76rem;color:#B7E4C7}
.wa-panel .wh .dot{width:8px;height:8px;border-radius:50%;background:#5FE3B4;flex:none}
.wa-panel .wh button{margin-left:auto;background:none;border:0;color:#fff;font-size:19px;
  cursor:pointer;line-height:1;padding:2px 4px}
.wa-panel .wb{padding:16px;background:
  linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.65)),
  repeating-linear-gradient(45deg,#EDE5DD 0 12px,#E9E1D8 12px 24px)}
@media (prefers-color-scheme:dark){
  .wa-panel .wb{background:linear-gradient(rgba(13,18,32,.8),rgba(13,18,32,.8)),
    repeating-linear-gradient(45deg,#1B2330 0 12px,#161D28 12px 24px)}
}
.wa-panel .bubble{background:#fff;border-radius:12px 12px 12px 3px;padding:11px 13px;
  font-size:.9rem;color:#2C2C3E;box-shadow:0 1px 2px rgba(0,0,0,.12);margin-bottom:14px}
@media (prefers-color-scheme:dark){ .wa-panel .bubble{background:#1F2A3A;color:#E9EDF8} }
.wa-panel .field{margin-bottom:10px}
.wa-panel .field input,.wa-panel .field select{padding:10px 12px;font-size:15px;border-radius:9px}
.wa-panel .wf{padding:0 16px 16px;background:inherit}
.wa-panel .go{width:100%;background:#25D366;color:#fff;border:0;border-radius:10px;
  padding:12px;font:inherit;font-weight:700;font-size:.96rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px}
.wa-panel .go:hover{background:#1FBE5B}
.wa-panel .note{font-size:.74rem;color:var(--muted);text-align:center;margin:9px 0 0}
@media (max-width:520px){ .wa-panel{right:12px;left:12px;width:auto} .wa-fab{right:14px} }
@media (prefers-reduced-motion:reduce){
  .wa-fab::after,.wa-fab .badge{animation:none}
  .wa-panel{transition:none}
}