/* ===========================================================================
   LinguaVerse — design system
   Tokens here are defaults. The dashboard (Appearance) can override any of the
   --lv-* custom properties at runtime, so colours, fonts and roundness are the
   owner's to change without touching this file.
   =========================================================================== */

:root{
  /* brand — overridable from Appearance */
  --lv-blue:#1B4DB1;
  --lv-blue-dark:#143A88;
  --lv-navy:#0E2038;
  --lv-green:#3E7C51;
  --lv-green-dark:#2E5F3E;
  --lv-radius:4px;
  --lv-font-head:'Literata';
  --lv-font-body:'Source Sans 3';

  /* derived / fixed */
  --blue:var(--lv-blue);
  --blue-dark:var(--lv-blue-dark);
  --blue-wash:#EDF1F9;
  --navy:var(--lv-navy);
  --green:var(--lv-green);
  --green-dark:var(--lv-green-dark);
  --green-wash:#EAF1EC;
  --green-mist:#F4F7F4;

  --ink:#141C28;
  --ink-2:#3E4A5C;
  --muted:#5F6B7C;
  --faint:#69737F;   /* 4.8:1 on white; was #8A94A3 at 3.07:1 */
  --line:#DDE3EC;
  --line-soft:#EBEFF5;
  --bg:#FFFFFF;
  --wash:#F6F8FB;

  --warn:#8A6416;  --warn-bg:#FDF6E7;
  --danger:#B23A2B; --danger-bg:#FDEEEC;

  --sh-1:0 1px 2px rgba(14,32,56,.04);
  --sh-2:0 4px 16px -6px rgba(14,32,56,.10);
  --sh-3:0 12px 36px -16px rgba(14,32,56,.14);

  --f-head:var(--lv-font-head),'Segoe UI',system-ui,-apple-system,sans-serif;
  --f-body:var(--lv-font-body),'Segoe UI',system-ui,-apple-system,sans-serif;
  --f-ar:'Cairo','Segoe UI',Tahoma,sans-serif;

  --wrap:1200px;
  --z-sticky:100; --z-menu:200; --z-float:300; --z-modal:400;

  /* Surface radii derive from the owner's --lv-radius so Appearance still
     drives them, but a panel and an input should never share a radius: the
     4px that suits a text field makes a hero look like a form. */
  --r-input:var(--lv-radius);
  --r-card:calc(var(--lv-radius) * 2.5);
  --r-surface:calc(var(--lv-radius) * 4);

  /* Fluid rhythm. Sections that all share one padding read as a list; these
     give a page loud and quiet passages. */
  --sp-section:clamp(64px,8vw,120px);
  --sp-section-lg:clamp(84px,10vw,152px);

  /* The navy surface. Deep enough to feel printed rather than tinted. */
  --navy-deep:#0A1A2F;
  --on-navy:#F2F5FA;          /* 14.8:1 on --navy-deep */
  --on-navy-2:#B8C6DA;        /*  7.6:1 — captions and meta */
  --on-navy-line:rgba(242,245,250,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:17.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
[dir="rtl"] body{font-family:var(--f-ar)}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .btn,[dir="rtl"] .chip{font-family:var(--f-ar)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
/* Weight and leading, not serif-vs-sans, are what separate an institution from
   an app: the British Council sets H2 at w400 with 1.30 leading; Preply sets H1
   at w700 with 1.08. Regular weight at a generous line-height reads as a
   document; bold and tight reads as an advertisement. */
h1,h2,h3,h4{font-family:var(--f-head);color:var(--navy);margin:0;line-height:1.28;
  letter-spacing:-.012em;font-weight:500;text-wrap:balance}
h1{font-size:clamp(38px,5.4vw,64px);line-height:1.08;font-weight:500;letter-spacing:-.022em}
h2{font-size:clamp(27px,3.6vw,44px);line-height:1.16;letter-spacing:-.018em}
h3{font-family:var(--f-body);font-size:18.5px;font-weight:600;letter-spacing:-.003em;line-height:1.4}
p{margin:0 0 1em;text-wrap:pretty}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;background:#fff;padding:12px 20px;z-index:var(--z-modal)}
.skip-link:focus{inset-inline-start:10px;top:10px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}
.sec{padding-block:clamp(52px,7vw,96px)}
.sec-sm{padding-block:clamp(34px,4.5vw,56px)}
.wash{background:var(--wash)}
.mist{background:var(--green-mist)}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:14px}
.mb0{margin-bottom:0}
.hp{position:absolute;inset-inline-start:-9999px;opacity:0;height:0;width:0}
.lede{font-size:clamp(16.5px,1.7vw,18.5px);color:var(--ink-2);max-width:60ch}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-body);font-weight:600;font-size:15.5px;line-height:1;
  padding:15px 28px;border-radius:var(--lv-radius);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .18s cubic-bezier(.22,1,.36,1),color .18s,border-color .18s,box-shadow .18s,transform .18s;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark);color:#fff}
.btn-go{background:var(--green);color:#fff}
.btn-go:hover{background:var(--green-dark);color:#fff}
.btn-quiet{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-quiet:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-wash)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#0F2143;color:#fff}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-lg{padding:17px 34px;font-size:17px}
.btn-block{width:100%}
.btn[disabled],.btn.is-off{opacity:.4;pointer-events:none;box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ── chips ───────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-body);
  font-weight:600;font-size:12px;padding:4px 9px;border-radius:4px;letter-spacing:.02em}
.chip-blue{background:var(--blue-wash);color:var(--blue-dark)}
.chip-green{background:var(--green-wash);color:var(--green-dark)}
.chip-warn{background:var(--warn-bg);color:var(--warn)}
.chip-grey{background:var(--line-soft);color:var(--ink-2)}
.chip-navy{background:var(--navy);color:#fff}

/* ── header ──────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:var(--z-sticky);background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.6) blur(12px)}
.hdr.scrolled{box-shadow:0 1px 0 var(--line),0 6px 20px -14px rgba(22,48,92,.3)}
.hdr-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);min-height:78px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:52px;width:auto}
.nav{display:none;align-items:center;gap:clamp(16px,2.2vw,30px);margin-inline-start:auto}
.nav a{font-family:var(--f-head);font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;
  padding:8px 0;position:relative}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:center;transition:transform .2s cubic-bezier(.22,1,.36,1);border-radius:2px}
.nav a:hover{color:var(--blue);text-decoration:none}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--blue);font-weight:600}
.hdr-act{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.nav+.hdr-act{margin-inline-start:0}

.langsel{position:relative}
.langbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;
  padding:10px 8px;font-family:var(--f-head);font-weight:600;
  font-size:14px;color:var(--ink-2);cursor:pointer;transition:color .18s}
.langbtn:hover{color:var(--blue)}
.langmenu{position:absolute;inset-inline-end:0;top:calc(100% + 10px);background:#fff;
  border:1px solid var(--line);border-radius:6px;box-shadow:var(--sh-3);min-width:170px;padding:7px;
  display:none;z-index:var(--z-menu)}
.langmenu.open{display:block}
.langmenu a{display:block;padding:10px 14px;border-radius:9px;font-size:14.5px;color:var(--ink-2);text-decoration:none}
.langmenu a:hover{background:var(--blue-wash);color:var(--blue);text-decoration:none}
.langmenu a.on{color:var(--blue);font-weight:600}

.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;
  border:1.5px solid var(--line);border-radius:var(--lv-radius);background:#fff;cursor:pointer;padding:0 11px}
.burger span{display:block;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none;background:#fff;border-top:1px solid var(--line);padding:10px 0 22px}
.mnav.open{display:block}
.mnav a{display:block;padding:14px 4px;font-family:var(--f-head);font-weight:500;color:var(--ink-2);
  border-bottom:1px solid var(--line-soft);text-decoration:none}
.mnav .btn{margin-top:18px;width:100%;border-bottom:none}
@media(min-width:1024px){ .nav{display:flex} .burger{display:none} .mnav{display:none !important} }
@media(max-width:1023px){
  .hdr-in{gap:12px;min-height:68px}
  .brand img{height:42px}
  .hdr-act .btn{display:none}
  .langbtn{padding:9px 12px;font-size:13px}
}
@media(max-width:369px){ .langbtn span{display:none} }

/* ── hero: the curriculum is the visual ─────────────────── */
.hero{position:relative;background:var(--bg);padding-block:clamp(40px,6vw,80px) clamp(40px,5vw,68px);
  border-bottom:1px solid var(--line)}
.hero-in{display:grid;gap:clamp(34px,5vw,64px);align-items:start}
@media(min-width:960px){.hero-in{grid-template-columns:1.08fr .92fr}}
.hero-copy{min-width:0}
.hero-eyebrow{font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.11em;
  text-transform:var(--label-case,uppercase);color:var(--blue);margin:0 0 18px}
.hero h1{margin:0 0 20px;max-width:19ch}
.hero h1 .grow{color:var(--green)}
.hero-sub{font-size:clamp(16.5px,1.7vw,19px);color:var(--ink-2);max-width:52ch;margin:0 0 30px;line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-trust{display:flex;align-items:center;gap:9px;margin:20px 0 0;font-size:14.5px;color:var(--muted)}
.hero-trust svg{width:16px;height:16px;color:var(--green);flex-shrink:0}

/* the CEFR ladder — six levels, stated plainly */
.ladder{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.ladder-head{padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.ladder-head h2{font-size:21px;margin:0}
.ladder-head p{margin:7px 0 0;font-size:14.5px;color:var(--muted)}
.ladder-list{list-style:none;margin:0;padding:0;counter-reset:none}
.ladder-list li+li{border-top:1px solid var(--line-soft)}
.ladder-list a{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:15px 24px;text-decoration:none;transition:background .15s}
.ladder-list a:hover{background:var(--wash);text-decoration:none}
.ladder-list .lv{font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--navy);
  min-width:32px;letter-spacing:.01em}
.ladder-list .nm{font-size:15.5px;color:var(--ink-2)}
.ladder-list .meta{font-size:13.5px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.ladder-list li.on{background:var(--blue-wash)}
.ladder-list li.on a:hover{background:var(--blue-wash)}
.ladder-list li.on .lv,.ladder-list li.on .nm{color:var(--blue-dark);font-weight:600}
.ladder-foot{margin:0;padding:16px 24px;background:var(--wash);border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);line-height:1.55}

/* three plain statements of how the school runs */
.facts{border-bottom:1px solid var(--line);background:var(--wash)}
.facts-in{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:820px){.facts-in{grid-template-columns:repeat(3,1fr)}}
.facts-in>div{padding:24px 0;display:grid;gap:6px}
@media(min-width:820px){
  .facts-in>div{padding:26px clamp(20px,2.6vw,34px)}
  .facts-in>div:first-child{padding-inline-start:0}
  .facts-in>div:last-child{padding-inline-end:0}
  .facts-in>div+div{border-inline-start:1px solid var(--line)}
}
@media(max-width:819px){.facts-in>div+div{border-top:1px solid var(--line)}}
.facts-in strong{font-family:var(--f-head);font-weight:600;font-size:16.5px;color:var(--navy)}
.facts-in span{font-size:14.5px;color:var(--muted);line-height:1.55}

/* ── section heads ───────────────────────────────────────── */
.shead{margin-bottom:clamp(26px,3.4vw,42px);max-width:62ch}
.shead.center{text-align:center;margin-inline:auto}
.shead p{color:var(--muted);margin:10px 0 0;font-size:17px}

/* A heading above each group of courses: General English, exam prep, academic. */
.track-head{margin-bottom:20px;max-width:62ch}
.track-head h3{font-family:var(--f-head);font-size:clamp(20px,2.4vw,26px);margin:0;line-height:1.25}
.track-head p{color:var(--muted);margin:8px 0 0;font-size:16px}

/* ── course cards + the price treatment ──────────────────── */
.courses{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.course{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:26px;display:flex;flex-direction:column;
  transition:box-shadow .22s cubic-bezier(.22,1,.36,1),transform .22s,border-color .22s}
.course:hover{box-shadow:var(--sh-3);transform:translateY(-4px);border-color:#D2DDF0}
.course-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.course-lvl{font-family:var(--f-head);font-weight:700;font-size:15px;color:#fff;background:var(--navy);
  width:44px;height:44px;border-radius:6px;display:grid;place-items:center;letter-spacing:-.02em;flex-shrink:0}
.course-top h3{font-size:18.5px;margin:0}
.course-facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--muted);margin:0 0 14px}
.course-facts span{display:inline-flex;align-items:center;gap:6px}
.course-facts svg{width:15px;height:15px;color:var(--faint);flex-shrink:0}
.course .desc{font-size:15px;color:var(--ink-2);margin:0 0 22px;flex:1}

/* price: the saving is the loud part, the old figure stays legible next to it */
.pricebox{border-top:1px solid var(--line-soft);padding-top:18px;margin-top:auto}
.pricebox.has-offer{background:var(--green-mist);border:1px solid #D7EADC;border-radius:6px;
  padding:16px 18px;margin-top:auto}
.price-lab{font-family:var(--f-head);font-size:12px;font-weight:600;color:var(--faint);
  text-transform:var(--label-case,uppercase);letter-spacing:.07em;margin:0 0 7px}
.price-main{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.price-now{font-family:var(--f-head);font-weight:700;font-size:34px;color:var(--navy);
  letter-spacing:-.035em;line-height:1;direction:ltr;unicode-bidi:isolate}
.price-now .cur{font-size:16px;font-weight:600;color:var(--muted);margin-inline-start:6px;letter-spacing:0}
.price-off{font-family:var(--f-head);font-weight:700;font-size:12.5px;color:#fff;background:var(--green);
  padding:6px 12px;border-radius:999px;letter-spacing:.01em;white-space:nowrap}
.price-old{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:10px 0 0;font-size:14px}
.price-old .lbl{color:var(--muted)}
.price-old s{color:var(--faint);text-decoration-thickness:1.5px;direction:ltr;unicode-bidi:isolate}
.price-old .save{color:var(--green-dark);font-weight:600;direction:ltr;unicode-bidi:isolate}
.price-ask{display:block;font-family:var(--f-head);font-weight:600;font-size:20px;color:var(--blue-dark);line-height:1.3}
.price-note{font-size:13px;color:var(--muted);margin:8px 0 0}
.course-cta{display:flex;gap:10px;margin-top:20px;align-items:center}
.course-cta .btn-primary{flex:1}

/* the one course the owner is pushing */
.course.is-hot{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.course-flag{position:absolute;inset-block-start:-11px;inset-inline-start:26px;background:var(--blue);color:#fff;
  font-family:var(--f-head);font-weight:700;font-size:11.5px;letter-spacing:.05em;
  padding:5px 13px;border-radius:999px;box-shadow:0 4px 12px -3px rgba(37,99,235,.5)}

/* hero supporting bits */
.hero-trust{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:14px;color:var(--muted)}
.hero-trust svg{width:16px;height:16px;color:var(--green);flex-shrink:0}
.hero-alt{display:inline-block;margin-top:14px;font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--blue)}

/* the step before buying */
.first-step{display:grid;gap:clamp(26px,4vw,52px);align-items:center}
@media(min-width:880px){.first-step{grid-template-columns:1.15fr .85fr}}
.first-list{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:12px}
.first-list li{position:relative;padding-inline-start:34px;font-size:16px;color:var(--ink-2)}
.first-list li::before{content:"";position:absolute;inset-inline-start:0;top:2px;width:22px;height:22px;
  border-radius:50%;background:var(--green-wash)}
.first-list li::after{content:"";position:absolute;inset-inline-start:7px;top:9px;width:8px;height:4px;
  border-inline-start:2px solid var(--green-dark);border-block-end:2px solid var(--green-dark);
  transform:rotate(-45deg)}
.first-panel{border:1px solid var(--line);border-radius:8px;background:#fff;padding:24px 26px}
.first-panel-h{font-family:var(--f-head);font-weight:600;font-size:18px;color:var(--navy);margin:0 0 16px}
.first-panel dl{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;margin:0 0 18px;font-size:15px}
.first-panel dt{color:var(--muted)}
.first-panel dd{margin:0;text-align:end;font-weight:600;color:var(--ink)}
.first-panel-note{margin:0;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:13px;color:var(--muted);line-height:1.55}

/* always-there action on phones */
.mobile-cta{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-float);background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:none}
@media(max-width:719px){
  .mobile-cta{display:block}
  body{padding-bottom:84px}
  /* Lift the chat button clear of the pinned bar. Set as a variable because
     the base .wa-float rule is declared later in this file and would otherwise
     win the cascade — which is exactly what used to happen. */
  :root{--wa-bottom:calc(96px + env(safe-area-inset-bottom))}
  .wa-float{width:52px;height:52px}
  .wa-float svg{width:26px;height:26px}
}

/* ── steps ───────────────────────────────────────────────── */
.steps{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step h3{font-size:17.5px;margin-bottom:7px}
.step p{font-size:15px;color:var(--muted);margin:0}
.step .n{width:40px;height:40px;border-radius:6px;background:var(--blue-wash);color:var(--blue-dark);
  display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:16px;margin-bottom:15px}
.step:nth-child(n+3) .n{background:var(--green-wash);color:var(--green-dark)}

/* ── value grid ──────────────────────────────────────────── */
.why{display:grid;gap:14px 30px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.why-i{padding:6px 0}
.why-i h3{font-size:16.5px;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.why-i h3 svg{width:19px;height:19px;color:var(--green);flex-shrink:0}
.why-i p{font-size:14.5px;color:var(--muted);margin:0;padding-inline-start:29px}

/* ── faq ─────────────────────────────────────────────────── */
.faq{max-width:800px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{padding:19px 4px;font-family:var(--f-head);font-weight:600;font-size:16.5px;color:var(--navy);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;border-inline-end:2px solid var(--blue);
  border-block-end:2px solid var(--blue);transform:rotate(45deg);transition:transform .2s;flex-shrink:0;margin-block-end:4px}
.faq details[open] summary::after{transform:rotate(-135deg);margin-block:4px 0}
.faq .a{padding:0 4px 20px;color:var(--ink-2);font-size:15.5px;max-width:70ch}

/* ── cta band ────────────────────────────────────────────── */
.cta-band{background:var(--navy);color:#fff;border-radius:10px;padding:clamp(36px,5.5vw,66px);text-align:center;
  position:relative;overflow:hidden}
.cta-band h2{color:#fff}
.cta-band p{color:#B6C4DC;max-width:52ch;margin:12px auto 28px;font-size:17px}

/* ── forms ───────────────────────────────────────────────── */
.form{display:grid;gap:18px}
.field label{display:block;font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--ink-2);margin-bottom:8px}
.field .hint{font-size:13px;color:var(--faint);margin-top:6px}
.inp,select.inp,textarea.inp{width:100%;padding:14px 16px;border:1.5px solid var(--line);
  border-radius:var(--lv-radius);font-family:var(--f-body);font-size:16px;color:var(--ink);background:#fff;
  transition:border-color .16s,box-shadow .16s}
[dir="rtl"] .inp{font-family:var(--f-ar)}
.inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.inp::placeholder{color:var(--faint)}
textarea.inp{min-height:118px;resize:vertical}
.field.bad .inp{border-color:var(--danger)}
.err{color:var(--danger);font-size:13.5px;margin-top:7px;font-weight:600}
.check{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--ink-2);line-height:1.55;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue);flex-shrink:0;cursor:pointer}
.alert{padding:15px 18px;border-radius:var(--lv-radius);font-size:15px;margin-bottom:20px;border:1px solid}
.alert-ok{background:var(--green-wash);border-color:#BFE3C6;color:var(--green-dark)}
.alert-err{background:var(--danger-bg);border-color:#F0C7C1;color:var(--danger)}
.alert-info{background:var(--blue-wash);border-color:#CBDCFB;color:var(--blue-dark)}
.alert-warn{background:var(--warn-bg);border-color:#EFDFB6;color:var(--warn)}

/* ── cards / layout blocks ───────────────────────────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:clamp(24px,3vw,34px)}
.card-sm{border-radius:6px;padding:22px}
.cols{display:grid;gap:26px}
@media(min-width:920px){.cols{grid-template-columns:1.12fr .88fr;align-items:start}}
.cols-rev{display:grid;gap:26px}
@media(min-width:920px){.cols-rev{grid-template-columns:.88fr 1.12fr;align-items:start}}
.sticky-side{position:sticky;top:100px}
dl.sum{display:grid;grid-template-columns:1fr auto;gap:12px 18px;margin:0;font-size:15px}
dl.sum dt{color:var(--muted)}
dl.sum dd{margin:0;text-align:end;font-weight:600;color:var(--ink)}
dl.sum .tot{border-top:1px solid var(--line);padding-top:14px;font-family:var(--f-head);font-size:19px}
.money{direction:ltr;unicode-bidi:isolate}
.pay-details{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0 0 18px;font-size:15px}
.pay-details dt{color:var(--muted)}
.pay-details dd{margin:0;font-weight:600;word-break:break-word}
.opt-list{display:grid;gap:12px}
.opt-card{display:block;background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:20px 22px;
  text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s}
.opt-card:hover{border-color:var(--blue);box-shadow:var(--sh-2);transform:translateY(-2px);text-decoration:none}
.opt-card h3{font-size:17px;margin-bottom:5px}
.opt-card p{margin:0;font-size:14.5px;color:var(--muted)}

/* ── placement test ──────────────────────────────────────── */
.tq{max-width:760px;margin-inline:auto}
#tq-root{transition:opacity .18s}
#tq-root.is-busy{opacity:.5;pointer-events:none}
.tq-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:14px;color:var(--muted);font-family:var(--f-head);font-weight:500}
.tq-head strong{color:var(--navy)}
.tq-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tq-bar{height:7px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin:14px 0 26px}
.tq-bar i{display:block;height:100%;background:var(--blue);border-radius:99px;
  transition:width .45s cubic-bezier(.22,1,.36,1)}
.tq-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:clamp(22px,3vw,34px);box-shadow:var(--sh-1)}
.passage{background:var(--wash);border-radius:6px;padding:20px 22px;margin-bottom:22px;
  font-size:15.5px;color:var(--ink-2);line-height:1.75}
.passage-lbl{display:block;font-family:var(--f-head);font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:var(--label-case,uppercase);color:var(--faint);margin-bottom:9px}
.listen{background:var(--wash);border-radius:6px;padding:20px 22px;margin-bottom:22px}
.listen-player{width:100%;max-width:420px;display:block}
.listen-transcript{margin-top:14px;font-size:14.5px;color:var(--ink-2);line-height:1.75}
.listen-transcript summary{cursor:pointer;font-weight:600;color:var(--blue-dark)}
.listen-transcript div{margin-top:10px}
.tq-instr{font-size:14.5px;color:var(--blue-dark);background:var(--blue-wash);border-radius:12px;
  padding:11px 15px;margin:0 0 18px}
.tq-prompt{font-size:22px;margin:0 0 6px;line-height:1.35}
.opts{display:grid;gap:12px;margin-top:22px}
.opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:2px solid var(--line);
  border-radius:6px;background:#fff;cursor:pointer;text-align:start;font-size:16px;width:100%;
  font-family:inherit;color:var(--ink);transition:border-color .16s,background .16s,transform .12s}
.opt:hover{border-color:#B6CBF0;background:var(--wash)}
.opt.sel{border-color:var(--blue);background:var(--blue-wash)}
.opt .k{width:30px;height:30px;border-radius:10px;background:var(--line-soft);display:grid;place-items:center;
  font-family:var(--f-head);font-weight:700;font-size:13px;color:var(--ink-2);flex-shrink:0;transition:background .16s,color .16s}
.opt.sel .k{background:var(--blue);color:#fff}
.opt .txt{flex:1}
.tq-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px;flex-wrap:wrap}
.tq-nav-end{display:flex;gap:10px;flex-wrap:wrap;margin-inline-start:auto}
.tq-note{margin:16px 0 0;font-size:13.5px;color:var(--warn)}
.tq-foot{margin-top:24px;text-align:center;font-size:13.5px;color:var(--faint);max-width:62ch;margin-inline:auto}

/* result */
.res-head{background:#fff;border:1px solid var(--line);border-radius:8px;padding:clamp(26px,3.4vw,40px);text-align:center}
.res-kicker{font-family:var(--f-head);font-size:14px;color:var(--muted);margin:0}
.res-level{width:112px;height:112px;border-radius:50%;background:var(--green-wash);color:var(--green-dark);
  display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:38px;
  letter-spacing:-.03em;margin:18px auto}
.res-score{font-size:15px;color:var(--muted);margin:0}
.res-score strong{color:var(--ink)}
.dot-sep{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--faint);margin-inline:9px;vertical-align:3px}
.res-blurb{margin:18px auto 0;max-width:56ch;color:var(--ink-2)}
.res-cats,.res-lead,.res-rec{background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:clamp(22px,3vw,32px);margin-top:18px}
.res-cats h3,.res-lead h3{font-size:17.5px;margin-bottom:16px}
.res-lead h3{margin-bottom:4px}
.catbar{margin-bottom:15px}
.catbar:last-child{margin-bottom:0}
.catbar-top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:7px;color:var(--ink-2)}
.catbar-track{height:8px;background:var(--line-soft);border-radius:99px;overflow:hidden}
.catbar-track i{display:block;height:100%;background:var(--green);border-radius:99px}
.catbar.low .catbar-track i{background:#D9A441}
.res-rec{border:2px solid var(--green)}
.res-rec h3{font-size:22px;margin:14px 0 6px}
.res-rec .btn-row{margin-top:18px}

/* why they need English — asked before the test, answered on the result */
.purpose-q{font-family:var(--f-head);font-size:clamp(19px,2.4vw,23px);margin:0 0 6px}
.purpose-hint{color:var(--muted);font-size:14.5px;margin:0 0 20px}
.purpose-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));text-align:start}
.purpose-opt{display:block;width:100%;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--lv-radius);padding:16px 18px;cursor:pointer;font-family:var(--f-body);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.purpose-opt:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(27,77,177,.10);transform:translateY(-1px)}
.purpose-opt:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.po-label{display:block;font-family:var(--f-head);font-size:16.5px;color:var(--ink);line-height:1.35}
.po-note{display:block;font-size:13.5px;color:var(--muted);margin-top:5px}
.purpose-skip{display:inline-block;margin-top:20px;background:none;border:0;padding:6px 4px;
  font-family:var(--f-body);font-size:14.5px;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.purpose-skip:hover{color:var(--ink)}
.purpose-skip:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}

.res-why{background:var(--blue-wash);border:1px solid var(--line);border-radius:8px;
  padding:clamp(20px,2.8vw,28px);margin-top:18px}
.res-why-chip{margin:0 0 8px;font-size:13px;color:var(--muted);text-transform:var(--label-case,uppercase);letter-spacing:.06em}
.res-why-chip strong{color:var(--blue-dark);text-transform:none;letter-spacing:0;font-size:14.5px}
.res-why-text{margin:0;color:var(--ink-2);max-width:62ch;line-height:1.65}

/* ── teachers ────────────────────────────────────────────── */
.tgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.tcard{text-align:center}
.tcard img,.tcard .ph{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 14px;background:var(--blue-wash)}
.tcard h3{font-size:16.5px;margin-bottom:4px}
.tcard .role{font-size:14px;color:var(--muted)}

/* ── footer ──────────────────────────────────────────────── */
.ftr{background:var(--navy);color:#AEBDD4;padding-block:clamp(46px,6vw,70px) 26px;margin-top:clamp(46px,6vw,80px)}
.ftr a{color:#AEBDD4;text-decoration:none;font-size:15px}
.ftr a:hover{color:#fff;text-decoration:none}
.ftr-grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ftr h4{font-family:var(--f-head);color:#fff;font-size:14.5px;font-weight:600;margin:0 0 16px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr .logo{background:#fff;border-radius:6px;padding:10px 14px;display:inline-block;margin-bottom:16px}
.ftr .logo img{height:46px}
.ftr .tag{font-size:15px;color:#8D9DB8;max-width:32ch}
.ftr-bot{border-top:1px solid rgba(255,255,255,.13);margin-top:40px;padding-top:22px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13.5px;color:#7F8FAB}

/* ── floating whatsapp ───────────────────────────────────── */
.wa-float{position:fixed;inset-inline-end:22px;bottom:var(--wa-bottom,22px);z-index:var(--z-float);width:58px;height:58px;
  border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 26px -6px rgba(37,211,102,.6);transition:transform .18s}
.wa-float:hover{transform:scale(1.07);text-decoration:none}
.wa-float svg{width:30px;height:30px}

/* ── auth ────────────────────────────────────────────────── */
.auth{min-height:80vh;display:grid;place-items:center;padding-block:48px}
.auth-card{width:100%;max-width:430px}
.auth-card .brand{justify-content:center;margin-bottom:26px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .btn:hover,.course:hover,.opt-card:hover,.wa-float:hover{transform:none}
}
@media print{.hdr,.ftr,.wa-float,.btn{display:none !important}}

/* the dashed arc points toward the mascot, so it mirrors with the layout */
[dir="rtl"] .hero-path{transform:scaleX(-1)}

/* ===========================================================================
   Components the rest of the site uses. These were left behind when the
   homepage was redesigned; they are rebuilt here on the new tokens so every
   page speaks the same language. No side-stripe accents.
   =========================================================================== */

/* buttons + badges: the older names, mapped onto the current design */
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-wash)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-dark);color:#fff}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-body);font-weight:600;
  font-size:12px;padding:4px 9px;border-radius:4px}
.badge-blue{background:var(--blue-wash);color:var(--blue-dark)}
.badge-green{background:var(--green-wash);color:var(--green-dark)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-grey{background:var(--line-soft);color:var(--ink-2)}
.badge-navy{background:var(--navy);color:#fff}

.sec-tight{padding-block:clamp(34px,4.5vw,56px)}
.stack{display:grid;gap:var(--gap,16px)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;flex-shrink:0}

/* the big level circle on result / thank-you / error pages */
.lvl-badge{width:104px;height:104px;border-radius:50%;background:var(--green-wash);color:var(--green-dark);
  display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:36px;
  letter-spacing:-.03em;margin-inline:auto}

/* supporting cards — a tinted panel and a heading, no coloured edge */
.feats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.feat{background:var(--wash);border:1px solid var(--line);border-radius:8px;padding:22px 24px}
.feat.g{background:var(--green-mist);border-color:#D7EADC}
.feat.n{background:var(--navy);border-color:var(--navy)}
.feat.n h3{color:#fff}
.feat.n p{color:#B6C4DC}
.feat h3{font-size:16.5px;margin-bottom:7px}
.feat p{font-size:14.5px;color:var(--muted);margin:0}
.feat .btn{margin-top:14px}

/* tables on the student and partner dashboards */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:15px}
table.tbl th{text-align:start;font-family:var(--f-head);font-size:11.5px;letter-spacing:.07em;
  text-transform:var(--label-case,uppercase);color:var(--faint);font-weight:600;padding:13px 16px;
  border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl td{padding:14px 16px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl td strong{color:var(--ink)}
.tnum{font-variant-numeric:tabular-nums}
.tq-form{display:block}

/* course detail: tighter lists, and one honest nudge toward the free test */
.blk-h{font-size:19px;margin:38px 0 16px}
.inc-list{list-style:none;margin:0;padding:0;display:grid;gap:0;
  border:1px solid var(--line);border-radius:6px;overflow:hidden}
.inc-list li{display:flex;align-items:center;gap:12px;padding:14px 18px;font-size:15.5px;color:var(--ink-2)}
.inc-list li+li{border-top:1px solid var(--line-soft)}
.inc-list li::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--green-wash);
  flex-shrink:0;background-image:linear-gradient(transparent,transparent)}
.inc-list li{position:relative}
.inc-list li::after{content:"";position:absolute;inset-inline-start:24px;width:8px;height:4px;
  border-inline-start:2px solid var(--green-dark);border-block-end:2px solid var(--green-dark);
  transform:rotate(-45deg);margin-block-start:-2px}

.flow-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.flow-list li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;font-size:15.5px;color:var(--ink-2)}
.flow-list .n{width:28px;height:28px;border-radius:9px;background:var(--blue-wash);color:var(--blue-dark);
  display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:13px;flex-shrink:0}

.nudge{margin-top:38px;background:var(--blue-wash);border-radius:8px;padding:24px 26px;
  display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.nudge h3{font-size:18px;margin-bottom:5px}
.nudge p{margin:0;font-size:14.5px;color:var(--ink-2);max-width:46ch}
/* unit words double as sidebar labels; capitalise the first letter (a no-op in Arabic) */
dl.sum dt::first-letter{text-transform:uppercase}

/* ── photography ─────────────────────────────────────────── */
.split{display:grid;gap:clamp(28px,4.5vw,56px);align-items:center}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split.flip>.shot{order:2}
}
.shot{margin:0}
.shot picture{display:block}
.shot img{width:100%;height:auto;border-radius:8px;display:block;
  border:1px solid var(--line);background:var(--wash)}
.shot figcaption{margin-top:10px;font-size:12.5px;color:var(--faint);letter-spacing:.01em}

.points{display:grid;gap:0;margin:26px 0 0}
.points dt{font-family:var(--f-head);font-weight:600;font-size:16.5px;color:var(--navy);
  padding-top:16px;border-top:1px solid var(--line)}
.points dd{margin:5px 0 16px;font-size:15px;color:var(--muted);line-height:1.55}
.points dd:last-child{margin-bottom:0}
.price-now .cur.pre{margin-inline-start:0;margin-inline-end:4px}
.langmenu .lm-h{margin:8px 14px 5px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:var(--label-case,uppercase);color:var(--faint)}
.langmenu .lm-h:first-child{margin-top:4px}
.langmenu a span{display:inline-block;min-width:18px;color:var(--faint)}

/* ── platform polish ─────────────────────────────────────────────────────
   Native controls, scrollbars, date pickers and the dialog backdrop follow
   the page's scheme instead of staying stubbornly white. */
:root{color-scheme:light}

/* Reserve the scrollbar so a short page and a long one do not jump sideways
   as you move between them. */
html{scrollbar-gutter:stable}

/* A scrollable table region has to be reachable by keyboard (WCAG 2.1.1),
   which means it takes focus, which means it needs a visible focus ring. */
.tblwrap:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}

/* ── cross-document view transitions ────────────────────────────────────
   Three lines that make a plain server-rendered site feel like it is not
   reloading. Unsupported browsers simply swap the page as they always did. */
@view-transition{navigation:auto}

/* Persistent chrome should stay put while the content changes underneath. */
.hdr{view-transition-name:site-header}
.side{view-transition-name:adm-side}
.tabbar{view-transition-name:adm-tabbar}
::view-transition-group(site-header),
::view-transition-group(adm-side),
::view-transition-group(adm-tabbar){animation-duration:0s}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

/* ── school partner portal ──────────────────────────────────────────────
   A school looking at its own cohort: a scannable list, then one student
   lesson by lesson. Rows are links, sized for a thumb. */
.pstu{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit;min-height:56px}
.pstu:last-child{border-bottom:0}
.pstu:hover{background:var(--wash);text-decoration:none}
.pstu-main{min-width:0;flex:1 1 220px}
.pstu-main strong{display:block;color:var(--ink)}
.pstu-meta{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
.pstu-prog{flex:0 1 200px;min-width:150px;display:flex;align-items:center;gap:12px}
.pstu-prog .catbar-track{flex:1}
.pstu-pct{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.pstu-pct small{display:block;color:var(--faint);font-size:11.5px}

.plessons{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:pl}
.pl{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:14px 16px}
.pl.completed{border-inline-start:3px solid var(--green)}
.pl.in_progress{border-inline-start:3px solid var(--blue)}
.pl.not_started{opacity:.72}
.pl-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--wash);color:var(--muted);
  display:grid;place-items:center;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pl.completed .pl-n{background:var(--green-wash);color:var(--green-dark)}
.pl-body{flex:1;min-width:0}
.pl-body strong{display:block;font-weight:600;color:var(--ink)}
.pl-sum{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
.pl-state{flex:none;text-align:end}
.pl-state small{display:block;color:var(--faint);font-size:11.5px;margin-top:4px}
@media(max-width:520px){
  .pl{flex-wrap:wrap}
  .pl-state{width:100%;text-align:start;padding-inline-start:40px}
}
/* Messenger blue when that is the channel this reader is likely to use. */
.wa-float.is-msg{background:linear-gradient(135deg,#00B2FF,#006AFF)}

/* ── result page: the hedge and the ladder ──────────────────────────────
   The score alone is a label. The ladder gives it context, and the hedge keeps
   the claim honest about what 36 questions can actually tell you. */
.res-hedge{margin:16px auto 0;max-width:56ch;color:var(--ink-2);font-size:15.5px;line-height:1.6}
.res-ladder{background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:clamp(18px,2.6vw,26px);margin-top:18px}
.res-ladder-h{margin:0 0 14px;font-size:13px;color:var(--muted);
  text-transform:var(--label-case,uppercase);letter-spacing:.06em;font-family:var(--f-head)}
.res-ladder ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(6,1fr);gap:6px}
.res-ladder li{position:relative;text-align:center;padding:11px 2px;border-radius:4px;
  background:var(--wash);color:var(--faint);font-family:var(--f-head);font-size:14px}
.res-ladder li.past{background:var(--green-wash);color:var(--green-dark)}
.res-ladder li.on{background:var(--blue);color:#fff;font-weight:600;
  box-shadow:0 2px 10px rgba(27,77,177,.28)}
.res-ladder li.on::after{content:'';position:absolute;inset-block-start:-5px;
  inset-inline-start:50%;translate:-50% 0;width:8px;height:8px;rotate:45deg;background:var(--blue)}
.res-reply{margin:0 0 12px;font-size:14px;color:var(--muted)}
@media(max-width:420px){.res-ladder li{font-size:12.5px;padding:9px 1px}}
.paylist{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.paylist li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.paylist li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--green);margin-top:8px}

/* ── hero photograph ────────────────────────────────────────────────────
   The page was copy and a table: informative, and cold. A real class gives a
   visitor something human to look at while they read the promise. */
.hero-shot{margin:0;position:relative;border-radius:6px;overflow:hidden;
  box-shadow:0 18px 50px rgba(14,32,56,.16)}
.hero-shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;background:var(--wash)}
.hero-shot figcaption{position:absolute;inset-inline:0;inset-block-end:0;
  padding:26px 20px 14px;color:#fff;font-size:13.5px;letter-spacing:.01em;
  background:linear-gradient(to top,rgba(14,32,56,.78),transparent)}
@media(min-width:900px){.hero-shot img{aspect-ratio:5/4}}

/* ── the six levels, given room ─────────────────────────────────────────
   A CEFR ladder is the clearest thing this school owns; it reads far better
   across the page than squeezed into a column beside the headline. */
.sec-ladder{background:var(--wash)}
/* Exactly six levels, so the columns are stated rather than guessed —
   auto-fit gave five and left C2 stranded on a row of its own. */
.ladder-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.ladder-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.ladder-grid{grid-template-columns:repeat(6,1fr)}}
.ladder-grid a{display:block;background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:20px 22px;text-decoration:none;height:100%;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.ladder-grid a:hover{border-color:var(--blue);text-decoration:none;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(14,32,56,.09)}
.ladder-grid .lv{display:block;font-family:var(--f-head);font-size:clamp(22px,2vw,26px);font-weight:500;
  color:var(--blue);letter-spacing:-.01em;line-height:1}
.ladder-grid .nm{display:block;margin-top:8px;font-size:15.5px;color:var(--ink)}
.ladder-grid .meta{display:block;margin-top:5px;font-size:13.5px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.ladder-grid li.on a{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.ladder-note{margin:18px 0 0;font-size:14px;color:var(--muted);max-width:74ch}


/* ── touch targets ──────────────────────────────────────────────────────
   Footer links sat at 22px and the small buttons at 37px. WCAG 2.2 asks 24px
   as a floor; a thumb wants 44. Padding rather than height, so nothing in the
   layout moves on a desktop. */
@media(pointer:coarse){
  .ftr ul a,.ftr-bot a{display:inline-flex;align-items:center;min-height:44px}
  .btn-sm{min-height:44px;padding-block:0;display:inline-flex;align-items:center;justify-content:center}
  .langbtn{min-height:44px}
  .brand{display:inline-flex;align-items:center;min-height:44px}
  .nav a,.mnav a{min-height:44px;display:inline-flex;align-items:center}
}

/* ── the discount a referral link promised ──────────────────────────────
   Shown on every page while the link is live, because a cookie the visitor
   cannot see is not an offer. */
.refbar{background:var(--green-wash);border-block-end:1px solid var(--line)}
.refbar-in{display:flex;align-items:center;gap:12px;padding-block:11px;flex-wrap:wrap}
.refbar svg{width:19px;height:19px;color:var(--green-dark);flex:none}
.refbar p{margin:0;font-size:14.5px;color:var(--green-dark);flex:1;min-width:200px}
.refbar code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:#fff;border:1px solid var(--green);color:var(--green-dark);
  padding:4px 9px;border-radius:4px;letter-spacing:.04em;direction:ltr;unicode-bidi:isolate}
.coupon-on{margin:7px 0 0;font-size:13.5px;color:var(--green-dark)}

/* ── cookie banner ──────────────────────────────────────────────────────
   Reject is the same size and weight as Accept. A refusal hidden behind a
   settings screen is the pattern regulators single out, and visitors read it
   as sly even when they cannot name why. */
.cbar{position:fixed;inset-inline:0;inset-block-end:0;z-index:calc(var(--z-float) + 10);
  background:#fff;border-block-start:1px solid var(--line);
  box-shadow:0 -6px 30px rgba(14,32,56,.13);
  padding-block-end:env(safe-area-inset-bottom)}
.cbar-in{display:grid;gap:14px;padding-block:16px;
  grid-template-columns:1fr;align-items:center}
.cbar-t{margin:0 0 4px;font-family:var(--f-head);font-size:16px;color:var(--navy)}
.cbar-d{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55;max-width:78ch}
.cbar-btns{display:flex;gap:10px;flex-wrap:wrap}
.cbar-btns .btn{flex:1;min-width:140px;justify-content:center}
.cbar-choose{background:none;border:0;padding:6px 2px;font:500 13.5px var(--f-body);
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px;justify-self:start}
.cbar-choose:hover{color:var(--ink)}
.cbar-detail{display:grid;gap:12px;padding-block-start:14px;border-block-start:1px solid var(--line);
  grid-column:1/-1}
.cbar-opt{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.cbar-opt input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--blue)}
.cbar-opt strong{color:var(--ink);font-weight:600}
@media(min-width:820px){
  .cbar-in{grid-template-columns:1fr auto;gap:26px}
  .cbar-btns .btn{flex:none;min-width:120px}
  .cbar-choose{grid-column:1;justify-self:start;margin-top:-6px}
}
/* the pinned test button would otherwise sit under the banner */
body:has(.cbar) .mobile-cta{inset-block-end:auto;position:static}

/* multiple-choice chips, for levels and certifications */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-pick{position:relative;cursor:pointer}
.chip-pick input{position:absolute;opacity:0;width:0;height:0}
.chip-pick span{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;
  border:1.5px solid var(--line);border-radius:999px;font-size:14px;color:var(--ink-2);
  background:#fff;transition:border-color .15s,background .15s,color .15s}
.chip-pick input:checked + span{border-color:var(--blue);background:var(--blue-wash);
  color:var(--blue-dark);font-weight:600}
.chip-pick input:focus-visible + span{outline:3px solid var(--blue);outline-offset:2px}
.chip-pick:hover span{border-color:var(--blue)}

/* ── next intake ────────────────────────────────────────────────────────
   Urgency that is true: a date the school keeps, and places it has. It removes
   itself once the date passes rather than looping. */
.intake{background:var(--navy);color:#fff}
.intake.soon{background:linear-gradient(90deg,var(--navy),var(--blue-dark))}
.intake-in{display:flex;align-items:center;gap:14px;padding-block:11px;flex-wrap:wrap;font-size:14.5px}
.intake-k{font-family:var(--f-head);font-size:12px;letter-spacing:.09em;text-transform:var(--label-case,uppercase);
  color:#9FB2CE}
.intake-in strong{font-weight:600}
.intake-p{color:#9FB2CE}
.intake-in .btn{margin-inline-start:auto}
@media(max-width:600px){.intake-in .btn{margin-inline-start:0;width:100%;justify-content:center}}

/* ── certificate ────────────────────────────────────────────────────────
   Sized for a single A4 page. The browser makes the PDF, which is why Arabic
   names render correctly here and would not in a PDF assembled by hand. */
.cert-page{max-width:900px;margin-inline:auto;padding:clamp(20px,4vw,44px) 20px 60px}
.cert-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.cert{background:#fff;border:1px solid var(--line);padding:clamp(30px,6vw,64px) clamp(24px,5vw,56px);
  text-align:center;position:relative}
.cert-rule{height:4px;background:linear-gradient(90deg,var(--navy),var(--green));margin-bottom:34px}
.cert-rule:last-child{margin:34px 0 0}
.cert-school{font-family:var(--f-head);font-size:clamp(17px,2vw,21px);color:var(--navy);
  letter-spacing:.02em;margin:0 0 30px}
.cert-kicker{font-size:13px;letter-spacing:.14em;text-transform:var(--label-case,uppercase);color:var(--muted);margin:0}
.cert-name{font-family:var(--f-head);font-size:clamp(30px,5.4vw,48px);font-weight:500;
  color:var(--navy);margin:14px 0 18px;line-height:1.2;border-block-end:1px solid var(--line);
  padding-bottom:18px;display:inline-block;min-width:60%}
.cert-body{margin:0 0 6px;color:var(--ink-2)}
.cert-course{font-family:var(--f-head);font-size:clamp(20px,3vw,28px);color:var(--navy);margin:0}
.cert-level{margin:8px 0 0;color:var(--green-dark);font-weight:600}
.cert-meta{margin:6px 0 0;color:var(--muted);font-size:14.5px}
.cert-foot{display:flex;justify-content:center;gap:clamp(24px,7vw,72px);flex-wrap:wrap;
  margin-top:40px;text-align:center}
.cert-foot > div{display:grid;gap:4px}
.cert-lbl{font-size:11.5px;letter-spacing:.1em;text-transform:var(--label-case,uppercase);color:var(--faint)}
.cert-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;
  color:var(--navy);letter-spacing:.06em;direction:ltr;unicode-bidi:isolate}
.cert-check{margin:22px 0 0;font-size:12.5px;color:var(--faint)}
.cert-note{margin:20px 0 0;font-size:14px;color:var(--muted);text-align:center}

@media print{
  .hdr,.ftr,.wa-float,.mobile-cta,.refbar,.intake,.cbar,.cert-actions,.cert-note,.skip-link{display:none !important}
  body{background:#fff;padding:0}
  .cert-page{max-width:none;padding:0}
  .cert{border:0;padding:14mm 16mm;page-break-inside:avoid}
  @page{size:A4;margin:10mm}
}

.verify-ok{background:var(--green-wash);border:1px solid var(--green);border-radius:6px;
  padding:clamp(20px,3vw,28px);margin-top:20px}
.v-badge{margin:0 0 14px;font-family:var(--f-head);font-size:18px;color:var(--green-dark)}
.verify-ok dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.verify-ok dt{font-size:12.5px;letter-spacing:.06em;text-transform:var(--label-case,uppercase);color:var(--muted)}
.verify-ok dd{margin:0;color:var(--ink)}

/* teacher cards — the credential is the content, not decoration */
.tcard{background:#fff;border:1px solid var(--line);border-radius:6px;padding:24px 22px;text-align:center}
.tcard img,.tcard .ph{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 14px;display:block}
.tcard .ph{background:var(--blue-wash);color:var(--blue-dark);display:grid;place-items:center;
  font-family:var(--f-head);font-size:34px;font-weight:500}
.tcard h3{font-size:18px;margin:0 0 3px;color:var(--navy)}
.tcard .role{font-size:14px;color:var(--muted);margin-bottom:12px}
.tcreds{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.tcreds li{font-size:12.5px;background:var(--green-wash);color:var(--green-dark);
  border-radius:4px;padding:4px 9px;font-weight:600}
.tmeta{display:flex;flex-wrap:wrap;gap:5px 12px;justify-content:center;margin:0;
  font-size:13px;color:var(--muted)}
.tnative{color:var(--blue-dark);font-weight:600}
.tbio{margin:12px 0 0;font-size:14px;color:var(--ink-2);line-height:1.55;text-align:start}

/* ── touch targets missed by the first pass ─────────────────────────────── */
@media(pointer:coarse){
  .chip-pick span{min-height:44px}
  .switch{min-height:44px;display:inline-flex;align-items:center}
  .switch input{width:24px;height:24px}
}

/* ── a styled checkbox for the public forms ─────────────────────────────────
   The teacher application used .switch, which is only defined in admin.css and
   never loads on the public site — so it rendered as a bare unstyled checkbox
   with no touch target. Defined here so the page it is actually used on has it. */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;line-height:1.45}
.switch input{width:20px;height:20px;flex-shrink:0;accent-color:var(--blue);margin:0}

/* ── RTL: rotations the logical-property sweep could not catch ──────────────
   A tick or a chevron drawn from two borders plus a fixed rotation flips its
   borders under [dir=rtl] but keeps its angle, so the glyph comes out pointing
   the wrong way. The angle has to be mirrored with it. */
[dir="rtl"] .first-list li::after,
[dir="rtl"] .inc-list li::after{transform:rotate(45deg) scaleX(-1)}
[dir="rtl"] .faq summary::after{transform:rotate(135deg)}
[dir="rtl"] .faq details[open] summary::after{transform:rotate(-45deg)}

/* The little x beside an automatically applied coupon. A visitor who arrived on
   somebody's link and does not want it should not have to clear a cookie. */
.coupon-x{float:inline-end;margin-inline-start:8px;width:26px;height:26px;line-height:24px;
  text-align:center;border-radius:50%;border:1px solid var(--line);color:var(--muted);
  text-decoration:none;font-size:17px;background:#fff;transition:color .15s,border-color .15s}
.coupon-x:hover,.coupon-x:focus-visible{color:var(--danger,#b3261e);border-color:var(--danger,#b3261e)}
@media(pointer:coarse){.coupon-x{width:44px;height:44px;line-height:42px}}

/* The result says two things: the level you are, and the level you are ready to
   start. The second is the one that leads somewhere, so it is the louder of the two. */
.res-ready{margin-top:22px;padding:18px 20px;border-radius:14px;background:var(--green-wash,#E7F6EC);
  border:1px solid var(--green,#2E8B57);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.res-ready-lbl{margin:0;font-size:13.5px;color:var(--green-dark,#1C6B3A);font-weight:600}
.res-ready-lv{font-size:34px;font-weight:700;line-height:1;color:var(--green-dark,#1C6B3A);
  font-family:var(--f-head);font-variant-numeric:tabular-nums}
.res-ready-note{margin:0;flex:1 1 16rem;font-size:14.5px;color:var(--ink-2)}
.res-ladder li.next .rl-lv{border-color:var(--green,#2E8B57);color:var(--green-dark,#1C6B3A);font-weight:700}
.rl-tag{display:block;margin-top:5px;font-size:11px;color:var(--green-dark,#1C6B3A);
  text-transform:var(--label-case,uppercase);letter-spacing:.05em}

/* the level jump-bar — six rungs, so "what is B1" lands on B1 */
.lvl-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px;padding:0}
.lvl-jump a{display:inline-block;padding:7px 15px;border:1px solid var(--line);border-radius:999px;
  font-family:var(--f-head);font-weight:700;font-size:14px;color:var(--navy);
  background:#fff;text-decoration:none;font-variant-numeric:tabular-nums}
.lvl-jump a:hover{background:var(--wash);border-color:var(--navy);text-decoration:none}

/* ── classes the markup asked for and the stylesheet never defined ──────────
   Three public components were rendering unstyled: the consent bar's copy
   column, the placement-test purpose form, and the link out of the result
   ladder. Each existed in the HTML and nowhere in CSS. */
.cbar-copy{flex:1 1 320px;min-width:0}
.cbar-copy .cbar-t{margin:0 0 4px;font-weight:600;font-size:15px}
.cbar-copy .cbar-d{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55}

.purpose-form{margin-top:28px}
.purpose-form .purpose-q{font-size:19px;margin:0 0 6px}
.purpose-form .purpose-hint{margin:0 0 18px;font-size:14.5px;color:var(--muted)}

.res-ladder-more{margin:14px 0 0;text-align:center;font-size:14.5px}
.res-ladder-more a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.res-ladder-more a:hover{text-decoration:none}

/* the API key field — used by both the partner portal and the dashboard */
/* ── the API key itself ── */
.keybox{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;margin:12px 0}
.keybox input{flex:1 1 320px;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;letter-spacing:.02em;background:var(--wash);border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;color:var(--ink)}
.keybox .btn{flex:0 0 auto}
.keynote{font-size:13.5px;color:var(--muted);margin:0}


/* ── shared layout utilities ──────────────────────────────────────────────
   These lived only in admin.css, but partner/codes.php and the public
   site/join.php use them too — and neither layout loads admin.css, so
   both were rendering unstyled. Copied rather than moved: admin.css loads
   after this and keeps its own identical rules, so the dashboard cannot
   regress. */
.panel-b.flush{padding:0}
.nowrap{white-space:nowrap}
.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty h3{font-size:16px;color:var(--ink-2);margin-bottom:6px}
.grid2{display:grid;gap:20px;grid-template-columns:1fr}
.frow{display:grid;gap:14px;grid-template-columns:1fr}
.hr{border:none;border-top:1px solid var(--line);margin:22px 0}

.two{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:720px){.two{grid-template-columns:1fr 1fr}}


/* ═══════════════════════════════════════════════════════════════════════════
   Committed surfaces
   The page used to be white from top to bottom with bordered cards for
   punctuation, which reads as a form rather than a brand. Navy now carries
   whole sections, so the page has loud and quiet passages instead of one
   continuous hum. Green stays reserved for growth, blue for actions.
   ═══════════════════════════════════════════════════════════════════════ */
.sec-dark{background:var(--navy-deep);color:var(--on-navy);padding-block:var(--sp-section-lg)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:var(--on-navy)}
/* Light type on a dark ground reads lighter than it is; it needs the room. */
.sec-dark p{color:var(--on-navy-2);line-height:1.72}
.sec-dark .shead p{color:var(--on-navy-2)}
.sec-dark a{color:#fff}
.sec-dark .btn-quiet{background:transparent;border-color:var(--on-navy-line);color:var(--on-navy)}
.sec-dark .btn-quiet:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.sec-roomy{padding-block:var(--sp-section-lg)}

/* ═══════════════════════════════════════════════════════════════════════════
   The CEFR ladder — the one idea this school owns
   Six identical bordered boxes said "six things of equal weight". A ladder is
   an ascent, so it now climbs: each level sits a step higher than the last,
   on navy, with the level code carrying real typographic size. In Arabic the
   grid follows the text direction, so it climbs right to left without a
   second rule.
   ═══════════════════════════════════════════════════════════════════════ */
.sec-ladder{background:var(--navy-deep);color:var(--on-navy);padding-block:var(--sp-section-lg)}
.sec-ladder h2,.sec-ladder .shead h2{color:var(--on-navy)}
.sec-ladder .shead p{color:var(--on-navy-2)}

.ladder-grid{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.ladder-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){
  .ladder-grid{grid-template-columns:repeat(6,1fr);gap:14px;align-items:end}
  /* the climb — only where there is room for all six abreast */
  .ladder-grid > li:nth-child(1){padding-block-start:70px}
  .ladder-grid > li:nth-child(2){padding-block-start:56px}
  .ladder-grid > li:nth-child(3){padding-block-start:42px}
  .ladder-grid > li:nth-child(4){padding-block-start:28px}
  .ladder-grid > li:nth-child(5){padding-block-start:14px}
  .ladder-grid > li:nth-child(6){padding-block-start:0}
}
.ladder-grid a{display:flex;flex-direction:column;height:100%;text-decoration:none;
  background:rgba(255,255,255,.045);border:1px solid var(--on-navy-line);
  border-radius:var(--r-card);padding:20px 20px 22px;
  transition:background .25s cubic-bezier(.22,1,.36,1),border-color .25s,transform .25s cubic-bezier(.22,1,.36,1)}
.ladder-grid a:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.34);
  text-decoration:none;transform:translateY(-4px)}
.ladder-grid .lv{display:block;font-family:var(--f-head);font-size:clamp(30px,3.4vw,42px);
  font-weight:500;color:#fff;letter-spacing:-.03em;line-height:1}
.ladder-grid .nm{display:block;margin-top:10px;font-size:15px;color:var(--on-navy);font-weight:600}
.ladder-grid .meta{display:block;margin-top:4px;font-size:13.5px;color:var(--on-navy-2);
  font-variant-numeric:tabular-nums}
/* The level the visitor tested into. Green means growth here and nowhere else. */
.ladder-grid li.on a{background:rgba(62,124,81,.22);border-color:var(--green)}
.ladder-note{margin:26px 0 0;font-size:14.5px;color:var(--on-navy-2);max-width:74ch}
.ladder-note a{color:#fff;text-decoration:underline;text-underline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .ladder-grid a{transition:background .01ms linear}
  .ladder-grid a:hover{transform:none}
}

/* ── hero ───────────────────────────────────────────────────────────────────
   The headline carries the page now that the uppercase kicker above it is
   gone. The photograph is the room; the koala is the signature pressed into
   its corner — PRODUCT.md calls the mascot the brand's face, and it was on no
   public page at all. */
.hero{padding-block:clamp(52px,7vw,104px) clamp(48px,6vw,88px)}
.hero h1{margin:0 0 22px;max-width:17ch}
.hero-sub{font-size:clamp(17px,1.8vw,20.5px);max-width:50ch;margin:0 0 34px}
.hero-shot{border-radius:var(--r-surface);box-shadow:var(--sh-3);overflow:visible}
.hero-shot picture{display:block;border-radius:inherit;overflow:hidden}
/* `.hero-shot img` is (0,1,1) and would out-rank a lone `.hero-mascot` class,
   stretching the koala to 100% with object-fit:cover straight over the
   photograph. Scoped to beat it rather than fought with !important. */
.hero-shot img.hero-mascot{position:absolute;inset-block-end:-22px;inset-inline-start:-34px;
  width:clamp(86px,10vw,124px);height:auto;aspect-ratio:auto;object-fit:contain;
  /* `.hero-shot img` paints --wash behind every image in the figure, which put
     a grey card behind a transparent PNG. It also sits mostly outside the
     photograph: a 3-D render laid over a photo reads as a sticker, while one
     resting against the corner reads as a signature. */
  background:transparent;
  filter:drop-shadow(0 14px 28px rgba(10,26,47,.28));pointer-events:none;z-index:2}
@media(max-width:640px){
  .hero-shot img.hero-mascot{width:70px;inset-block-end:-14px;inset-inline-start:-14px}
}

/* The seal overhangs the corner the caption starts in, so the caption steps
   aside for it. Logical padding, so Arabic moves the gap to the other end
   along with the mascot. */
@media(min-width:641px){
  .hero-shot figcaption{padding-inline-start:96px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   The brand lockup — horizontal, the way institutions set a crest and a name
   The shipped logo is a stacked lockup squeezed to 79x52 in a horizontal bar,
   which made the wordmark unreadable. The mark now sits beside the name at a
   size where both are legible. An uploaded logo overrides all of this.
   ═══════════════════════════════════════════════════════════════════════ */
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{flex:0 0 auto;display:block;width:46px;height:46px}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block;background:transparent}
.brand-name{display:flex;flex-direction:column;line-height:1;min-width:0}
.brand-name .bn-1{font-family:var(--f-head);font-size:22px;font-weight:600;color:var(--navy);
  letter-spacing:-.018em}
.brand-name .bn-2{font-family:var(--f-body);font-size:10.5px;font-weight:600;color:var(--muted);
  letter-spacing:.20em;text-transform:uppercase;margin-top:5px}
@media(max-width:860px){
  .brand-mark{width:38px;height:38px}
  .brand-name .bn-1{font-size:18.5px}
  .brand-name .bn-2{font-size:9.5px;letter-spacing:.17em;margin-top:4px}
}
.hdr-in{min-height:86px}

/* ═══════════════════════════════════════════════════════════════════════════
   Fees, stated rather than sold
   Struck-through prices beside a green "Save 20%" pill is the grammar of a
   clearance sale. A school that is worth the money states the fee once and
   lets it stand. The promotion still shows — campaigns are a real feature —
   but as a quiet line, not a badge.
   ═══════════════════════════════════════════════════════════════════════ */
.price-off{background:none;color:var(--muted);border:0;padding:0;
  font-family:var(--f-body);font-size:13px;font-weight:500;letter-spacing:0}
.price-old{font-size:13.5px;color:var(--faint);margin-top:6px}
.price-old .save{color:var(--faint);font-weight:500}
.price-now{font-weight:600;letter-spacing:-.02em}

/* ═══════════════════════════════════════════════════════════════════════════
   Room to breathe
   Institutional pages are mostly space. The sections were packed tight enough
   that everything read as equally urgent.
   ═══════════════════════════════════════════════════════════════════════ */
.sec{padding-block:var(--sp-section)}
.shead{margin-bottom:clamp(34px,4.4vw,56px)}
.shead p{font-size:18px;color:var(--ink-2);max-width:60ch}

/* the lockup on the dark footer — the mark keeps its colour, the name goes white */
.brand-ftr{margin-bottom:16px}
.brand-ftr .bn-1{color:#fff}
.brand-ftr .bn-2{color:rgba(255,255,255,.62)}
.brand-ftr .brand-mark{width:42px;height:42px}