/*
  TCEC design system. Built from the signed-off prototype (docs/tcec-website-prototype.html),
  with the prototype-only rules taken out (tool bar, option bars, PAS bands, draft band,
  prototype notes, sign-off buttons).

  The rules keep the prototype's order, because later rules deliberately override earlier
  ones (for example the v3 pill and hero changes). Sections, top to bottom:

  1. Tokens ............ colours, gradients, fonts, shadows (:root)
  2. Base .............. reset, body, headings, text
  3. Components ........ buttons, eyebrow and accent text, chips
                         floating pill and its dropdown and drawer
                         heroes (.hero, .phero, centred .c, .short, photo .backdrop) and entrance motion
                         sections (.s-white, .s-mist, .s-soft, .s-navy, .semi curve), section heads
                         method, tabs, interface mock-ups (lesson, portal, report email)
                         programmes, tiers, head of tuition, FAQ details, books, forms
                         diagnostic flow, parent area, close and footer (.endblock), modal
                         reveal on scroll, responsive grids, reduced motion
                         subjects matrix, 12 week timeline (.tline), Study Zone mini mocks
                         availability, blog
                         v3: pill at the top, lesson tiles with faces, Study Zone and portal
                         screens (.rz), GCSE subject cards, shorter hero, enrol, Zoom style lesson
                         (.zoom), quote wall (.qwall, .qc, .qf, .q1), articles, forms, 404, cookie banner
  4. Images ............ photo variables, with WebP where the browser supports it
  5. Site additions .... things the real site needs that the prototype did not (skip link,
                         real links in the dropdown and drawer, ghost button, focus, utilities)
  Colours: navy #0E1838, royal #2C5FD0, sky #5B9BF0, violet #7151BE, gold #E8B04A,
  deep blue #1F45A8, deep violet #553BA0.
*/

/* ===== 1. tokens ===== */
/* Fonts, self-hosted (SIL Open Font License): Plus Jakarta Sans for headings, DM Sans for body */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(/assets/fonts/dm-sans-latin.woff2) format("woff2")}
:root{
  color-scheme:light;
  --navy:#0E1838; --royal:#2C5FD0; --sky:#5B9BF0; --violet:#7151BE; --gold:#E8B04A;
  --deep-blue:#1F45A8; --deep-violet:#553BA0; --ink:#14224A; --soft:#4F5872; --label:#5E6884;
  --mist:#F2F5FC; --mist-deep:#E8EEFA; --line:#DCE3F2; --white:#fff; --sel:#E3EBFC; --cream:#F3EFE6;
  --ok:#1B7A43; --ok-bg:#E3F3EA; --warm:#7A520C; --warm-bg:#FBEFD4; --gap:#B3362B; --gap-bg:#F8E1DE;
  --glow:radial-gradient(120% 80% at 8% 0%,rgba(44,104,203,.55),transparent 60%),radial-gradient(100% 70% at 100% 12%,rgba(113,81,190,.42),transparent 62%),radial-gradient(80% 55% at 60% 108%,rgba(232,176,74,.14),transparent 70%);
  --curr:linear-gradient(150deg,#363A8C,#56449F 55%,#7151BE); --lib:linear-gradient(150deg,#1E4BB0,#2C68CB 55%,#4A8FE0);
  --drill:linear-gradient(150deg,#9A3A1E,#C4542A 55%,#E07A3E); --exam:linear-gradient(150deg,#1A6040,#227A50 55%,#38995F);
  --head:"Plus Jakarta Sans",Arial,sans-serif; --body:"DM Sans",Arial,sans-serif;
  --shadow:0 1px 2px rgba(14,24,56,.05),0 14px 36px rgba(14,24,56,.08);
  --lift:0 30px 70px rgba(14,24,56,.18);
}
/* ===== 2. base ===== */
*{box-sizing:border-box}
body{background:var(--white);color:var(--ink);font:400 16.5px/1.65 var(--body);margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--navy)}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3,h4{font-family:var(--head);font-weight:800;letter-spacing:-.035em;text-wrap:balance;margin:0;color:var(--ink)}
p{margin:0}
ul{margin:0}
/* ===== 3. components ===== */
.eyebrow{font:700 12px/1 var(--head);text-transform:uppercase;letter-spacing:.14em;color:var(--deep-blue)}
.acc{background:linear-gradient(90deg,#1F45A8,#553BA0);-webkit-background-clip:text;background-clip:text;color:transparent}
.accg{color:var(--gold)}
.lead{color:var(--soft);font-size:18px;max-width:58ch}
.small{font-size:13.5px;color:var(--label)}
.btn{display:inline-flex;align-items:center;justify-content:center;font:700 15px/1 var(--head);border-radius:999px;padding:16px 26px;border:0;cursor:pointer;white-space:nowrap;transition:transform .3s,box-shadow .3s;text-decoration:none;width:max-content}
.btn:hover{transform:translateY(-2px)}
.btn.gold{background:var(--gold);color:var(--navy)}
.btn.glass{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.btn.navy{background:var(--navy);color:#fff}
.btn.out{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.gcse{background:var(--deep-blue);color:#fff}
.btn.sats{background:var(--deep-violet);color:#fff}
.btn.sm{padding:12px 18px;font-size:14px}
.btn:focus-visible,[data-act]:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--royal);outline-offset:3px}
.chip{font:700 11.5px var(--head);padding:6px 11px;border-radius:999px;display:inline-block;width:max-content}
.c-ok{background:var(--ok-bg);color:var(--ok)}.c-w{background:var(--warm-bg);color:var(--warm)}.c-g{background:var(--gap-bg);color:var(--gap)}.c-b{background:var(--sel);color:var(--deep-blue)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ===== floating pill ===== */
.pillwrap{position:sticky;top:calc(env(safe-area-inset-top,0px) + 22px);z-index:50;height:0}
.pill{width:min(100%,1000px);margin:30px auto 0;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px;box-shadow:0 14px 40px rgba(5,10,30,.26);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:20px;padding:10px;position:relative}
.pill .side{display:flex;align-items:center;gap:24px;min-width:0;height:40px}
.pill .side.l{padding-left:14px}
.pill .side.r{justify-content:flex-end;gap:22px}
.pill a,.pill .ddb,.pill .plog{display:inline-flex;align-items:center;height:40px;font:600 14.5px/1 var(--head);color:var(--soft);text-decoration:none;background:none;border:0;cursor:pointer;padding:0;white-space:nowrap}
.pill .plog{font-weight:700;color:var(--deep-blue)}
.pill a:hover,.pill .ddb:hover,.pill a.on{color:var(--navy)}
.pill .ddb::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:8px}
.pill .logo-c{display:flex;align-items:center;justify-content:center;height:40px;padding:0 4px}
.pill .logo-c img{height:28px;width:auto;display:block}
.pill .cta{height:40px;padding:0 20px;font-size:14px;background:var(--navy);color:#fff}
.pill .mob{display:none}
#pillpop{position:absolute;left:0;right:0;top:100%;height:0}
.dd{position:absolute;left:12px;top:10px;background:#fff;border-radius:20px;box-shadow:0 20px 50px rgba(5,10,30,.25);padding:10px;display:grid;gap:4px;min-width:300px}
.dd button{all:unset;cursor:pointer;display:grid;gap:2px;padding:12px 14px;border-radius:14px}
.dd button:hover,.dd button:focus-visible{background:var(--mist)}
.dd b{font:800 15px var(--head);color:var(--ink)}
.dd small{font:500 13px var(--body);color:var(--label)}
.drawer{position:absolute;left:0;right:0;top:10px;background:#fff;border-radius:24px;box-shadow:0 20px 50px rgba(5,10,30,.25);padding:12px;display:grid;gap:2px}
.drawer button{all:unset;cursor:pointer;font:700 16px var(--head);color:var(--ink);padding:13px 14px;border-radius:12px}
.drawer button:hover{background:var(--mist)}
@media (max-width:980px){
  .pill{column-gap:8px}
  .pill .side a,.pill .side .ddb,.pill .plog{display:none}
  .pill .side.l{padding-left:4px}
  .pill .mob{display:inline-flex;align-items:center;gap:8px;height:40px;font:700 14px/1 var(--head);color:var(--ink);background:none;border:0;cursor:pointer;padding:0 8px}
  .pill .mob i{display:grid;gap:3px}.pill .mob i b{display:block;width:16px;height:2px;border-radius:2px;background:var(--ink)}
  .pill .cta{padding:0 14px;font-size:13px}
  .pill .cta .full{display:none}
}
@media (min-width:981px){.pill .cta .short{display:none}}

/* ===== heroes ===== */
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;isolation:isolate;display:grid;align-items:center}
.hero.home{min-height:720px}
.backdrop{position:absolute;inset:0;z-index:-2;overflow:hidden}
.backdrop .ph{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat}
.backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 45%,rgba(14,24,56,.62),rgba(14,24,56,.8) 70%),linear-gradient(180deg,rgba(14,24,56,.55),rgba(14,24,56,.35) 40%,#0E1838 100%)}
.hero::before{content:"";position:absolute;inset:-20%;background:var(--glow);z-index:-1;opacity:.75;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,2%,0) scale(1.06)}100%{transform:translate3d(-2%,1%,0) scale(1.02)}}
.hin{position:relative;z-index:2;padding-block:180px 130px;display:grid;justify-items:center;text-align:center;gap:22px}
.hin .eyebrow,.phero .eyebrow{color:var(--gold)}
.hin h1{font-size:clamp(36px,5vw,62px);line-height:1.05;letter-spacing:-.04em;color:#fff;white-space:nowrap}
.mission{font:500 clamp(17px,1.8vw,21px)/1.55 var(--body);color:#E9EDF7;max-width:44ch}
.minor{font-size:15.5px;color:#B9C2D6;margin-top:-6px}
.hbtns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
.scrollcue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:26px;height:42px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);z-index:2}
.scrollcue::after{content:"";position:absolute;left:50%;top:9px;width:4px;height:8px;border-radius:4px;background:#fff;transform:translateX(-50%);animation:cue 2s ease-in-out infinite}
@keyframes cue{60%{transform:translate(-50%,12px);opacity:0}100%{opacity:0}}
.cfp{position:absolute;border-radius:3px;z-index:1;pointer-events:none}
.semi{position:absolute;width:1400px;height:1400px;border-radius:50%;border:1px solid rgba(255,255,255,.08);left:50%;top:60%;transform:translateX(-50%);pointer-events:none;z-index:-1}
/* page heroes */
.phero{padding-block:170px 90px;position:relative;z-index:2}
.phero .g{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.phero h1{font-size:clamp(36px,4.6vw,56px);line-height:1.05;color:#fff}
.phero .lead{color:#C9D1E4}
.phero .txt{display:grid;gap:20px;min-width:0}
.phero .pic{border-radius:28px;aspect-ratio:5/4;background-size:cover;background-position:center;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.phero.c{text-align:center}
.phero.c .txt{justify-items:center}
.phero.c .btns{justify-content:center}
@media (max-width:560px){.hin h1{white-space:normal;max-width:12ch}.hero.home{min-height:640px}.hin{padding-block:150px 110px}}
/* entrance */
.anim .w{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(26px);animation:rise 1s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:calc(var(--i)*95ms + 200ms)}
.anim .fu{opacity:0;transform:translateY(18px);filter:blur(6px);animation:rise .9s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:var(--d,0ms)}
@keyframes rise{to{opacity:1;filter:none;transform:none}}
.glint{background:linear-gradient(100deg,var(--gold) 38%,#FFF3D6 50%,var(--gold) 62%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.anim .glint{animation:glint 1.6s 1.2s ease-in-out forwards}
@keyframes glint{to{background-position:0 0}}
.anim .cfp{animation:pop .9s cubic-bezier(.2,1.4,.4,1) both, bob 7s ease-in-out infinite;animation-delay:calc(var(--i)*70ms + 300ms), calc(var(--i)*300ms + 1.3s)}
@keyframes pop{from{opacity:0;transform:scale(.2) rotate(-80deg)}}
@keyframes bob{50%{translate:0 -8px}}
.anim .backdrop .ph{animation:kb 18s ease-out forwards}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}

/* ===== sections ===== */
.sec{padding-block:100px;position:relative;overflow:hidden;isolation:isolate}
.s-mist{background:var(--mist)}
.s-white{background:var(--white)}
.s-soft{background:linear-gradient(180deg,#EEF3FD,#E4EBFB)}
.s-navy{background:var(--navy);color:#fff}
.s-navy::before{content:"";position:absolute;inset:0;background:var(--glow);z-index:-1}
.s-navy h2,.s-navy h3{color:#fff}
.s-navy .eyebrow{color:var(--gold)}
.s-navy .lead{color:#C9D1E4}
.s-mist .semi,.s-soft .semi{border-color:rgba(31,69,168,.08)}
.shead{display:grid;gap:14px;max-width:740px;margin-bottom:52px;position:relative;z-index:1}
.shead.c{justify-items:center;text-align:center;margin-inline:auto}
.shead h2{font-size:clamp(30px,4vw,44px);line-height:1.08}
.shead.c .lead{margin:0 auto}
.inner{position:relative;z-index:1}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--white);border-radius:24px;box-shadow:var(--shadow);padding:28px;display:grid;gap:14px;align-content:start;min-width:0}
.card h3{font-size:20px;line-height:1.3}
.card p{color:var(--soft)}
.s-white .card.flat,.card.flat{background:var(--mist);box-shadow:none}
.icon{width:52px;height:52px;border-radius:16px;background:var(--mist-deep);color:var(--deep-blue);display:grid;place-items:center;font:800 20px var(--head)}
.answer{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:6px}
.answer b{font:800 11.5px var(--head);letter-spacing:.13em;text-transform:uppercase;color:var(--deep-blue)}
.photo{border-radius:28px;background-size:cover;background-position:center;box-shadow:var(--lift);min-height:200px}
.ticks{list-style:none;padding:0;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;color:var(--soft)}
.ticks li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:var(--mist-deep);color:var(--deep-blue);display:grid;place-items:center;font:800 11px var(--head);margin-top:2px}
.s-navy .ticks li{color:#DDE3F2}
.s-navy .ticks li::before{background:rgba(232,176,74,.18);color:var(--gold)}

/* method */
.mphoto{position:relative;min-width:0}
.mphoto .img{border-radius:28px;aspect-ratio:4/5;background-size:cover;background-position:42% 30%;box-shadow:var(--lift)}
.mphoto .float{position:absolute;right:-28px;bottom:36px;width:min(320px,80%);background:#fff;border-radius:20px;box-shadow:0 24px 50px rgba(14,24,56,.22);padding:18px;display:grid;gap:10px}
.bar{display:grid;grid-template-columns:76px 1fr auto;gap:10px;align-items:center;font-size:13.5px}
.track{height:10px;border-radius:999px;background:var(--mist-deep);overflow:hidden}
.track i{display:block;height:100%;border-radius:999px}
.steps{display:grid;gap:16px}
.step{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start;background:var(--mist);border-radius:22px;padding:22px}
.tnum{width:56px;height:56px;border-radius:16px;background:var(--white);color:var(--deep-blue);display:grid;place-items:center;font:800 22px var(--head);box-shadow:var(--shadow)}
.step h3{font-size:20px;margin-bottom:4px}
.step p{color:var(--soft)}

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;position:relative;z-index:1}
.tabs button{font:700 14px var(--head);border:0;border-radius:999px;padding:12px 20px;background:rgba(255,255,255,.08);color:#C9D1E4;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.tabs button.on{background:var(--gold);color:var(--navy);box-shadow:none}
.tabpanel{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;position:relative;z-index:1}
.tabpanel h3{font-size:30px}
.tag{font:700 12px var(--head);padding:7px 12px;border-radius:999px;width:max-content}
.tag.std{background:rgba(255,255,255,.12);color:#fff}.tag.free{background:var(--gold);color:var(--navy)}

/* ===== interface mock-ups ===== */
.device{background:#0A1129;border-radius:22px;padding:10px;box-shadow:0 40px 90px rgba(0,0,0,.45);position:relative}
.device .bar3{display:flex;gap:6px;padding:4px 6px 10px}
.device .bar3 i{width:9px;height:9px;border-radius:50%;background:#2A355A}
.device .bar3 span{margin-left:10px;font:600 11.5px var(--body);color:#8E98B3}
.screen{border-radius:14px;overflow:hidden;background:var(--cream);color:var(--ink)}
/* lesson */
.lesson{display:grid;grid-template-columns:1.55fr 1fr;gap:10px;background:#111A38;padding:12px;min-height:330px}
.board{background:#fff;border-radius:12px;padding:18px;display:grid;gap:8px;align-content:start}
.board .t{font:800 12px var(--head);letter-spacing:.12em;color:var(--deep-blue)}
.board .eq{font:600 20px/1.3 var(--body);color:var(--ink)}
.board .eq.r{color:var(--gap)}
.board .hand{font:600 14px var(--body);color:var(--label)}
.tiles{display:grid;gap:10px;grid-template-rows:1.25fr 1fr 1fr}
.tile{border-radius:12px;position:relative;overflow:hidden;background:#1C2650;display:grid;place-items:center;color:#AEBCF5;font:800 22px var(--head);min-height:70px}
.tile.teacher{background:linear-gradient(160deg,#2C3B73,#1C2650)}
.tile .who{position:absolute;left:8px;bottom:8px;font:700 11px var(--head);color:#fff;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:6px}
.tile .hand-up{position:absolute;right:8px;top:8px;font-size:14px}
.tile .live{position:absolute;right:8px;top:8px;width:8px;height:8px;border-radius:50%;background:#2FB36B;box-shadow:0 0 0 0 rgba(47,179,107,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(47,179,107,0)}}
.ctrls{display:flex;justify-content:center;gap:10px;padding:10px 0 4px;background:#111A38}
.ctrls i{width:34px;height:34px;border-radius:50%;background:#26305A}
.ctrls i.end{background:var(--gap)}
/* portal */
.app{display:grid;grid-template-columns:150px 1fr;min-height:330px}
.side2{background:var(--navy);background-image:var(--glow);padding:14px 10px;display:grid;gap:5px;align-content:start}
.side2 img{width:54px;margin:2px 8px 12px}
.side2 span{font:600 12px var(--head);color:#B9C2D6;padding:8px 10px;border-radius:9px}
.side2 span.on{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;position:relative}
.side2 span.on::after{content:"";position:absolute;right:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#AEBCF5;box-shadow:0 0 8px #AEBCF5}
.main2{padding:16px;display:grid;gap:12px;align-content:start;min-width:0}
.main2 h4{font-size:16px}
.hw{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;background:#fff;border-radius:12px;padding:12px 14px;font-size:13.5px}
.hw b{font:700 13.5px var(--head)}
.hw small{color:var(--label);font-size:12px;grid-column:1}
.ring{display:flex;gap:14px;align-items:center;background:#fff;border-radius:12px;padding:12px 14px}
.ring .r{width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--deep-blue) 0 72%,var(--mist-deep) 0);display:grid;place-items:center;flex:none}
.ring .r::after{content:"72%";width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;font:800 11px var(--head);color:var(--deep-blue)}
.areas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.area{border-radius:14px;padding:14px;color:#fff;min-height:96px;display:grid;align-content:space-between;font:800 14px var(--head)}
.area small{font:500 11.5px var(--body);opacity:.85}
/* report email */
.mail{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.35);max-width:460px;margin-left:auto;width:100%}
.mail .mh{background:var(--navy);background-image:var(--glow);padding:22px;display:grid;gap:8px;justify-items:center;text-align:center;color:#fff}
.mail .mh img{width:58px}
.mail .mh h4{color:#fff;font-size:20px}
.mail .mh small{color:var(--gold);font:700 11px var(--head);letter-spacing:.12em;text-transform:uppercase}
.mail .mb{padding:20px;display:grid;gap:12px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--mist);border-radius:12px;padding:10px;display:grid;gap:2px;text-align:center}
.stat b{font:800 17px var(--head);color:var(--deep-blue)}
.stat small{font-size:11.5px;color:var(--label)}
.note2{background:var(--mist);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--ink)}
.note2 b{font-family:var(--head);display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--deep-blue);margin-bottom:2px}
.mail .btn{justify-self:center}
.example{font:600 11.5px var(--body);color:var(--label);text-align:center;margin-top:10px}

/* programmes */
.prog2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.prog{background:var(--white);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.prog .pimg{height:230px;position:relative;background-size:cover;background-position:center}
.prog .pimg::after{content:"";position:absolute;inset:auto 0 0;height:8px}
.prog.g .pimg::after{background:var(--deep-blue)}.prog.s .pimg::after{background:var(--deep-violet)}
.prog .in{padding:32px;display:grid;gap:16px;align-content:start}
.prog h3{font-size:26px}
.prog.s .eyebrow{color:var(--deep-violet)}
.prog ul{padding:0;list-style:none;display:grid;gap:10px}
.prog li{display:flex;gap:10px;color:var(--ink)}
.prog li::before{content:"✓";font-weight:800}
.prog.g li::before{color:var(--deep-blue)}.prog.s li::before{color:var(--deep-violet)}

/* tiers */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tiers.t3{grid-template-columns:repeat(3,1fr)}
.tier{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:26px;display:grid;gap:10px;align-content:start;position:relative}
.tier.pop{box-shadow:0 0 0 2px var(--deep-blue),var(--shadow)}
.tier .badge{position:absolute;top:-12px;left:22px;font:800 11px var(--head);background:var(--deep-blue);color:#fff;padding:5px 10px;border-radius:999px}
.tier h3{font-size:21px}
.tier .hrs{font:800 30px var(--head);color:var(--deep-blue);letter-spacing:-.03em}
.tier .hrs small{font:600 14px var(--body);color:var(--label);letter-spacing:0}
.sats .tier .hrs{color:var(--deep-violet)}
.pricenote{margin-top:24px;background:#fff;border-radius:18px;padding:16px 20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;box-shadow:var(--shadow)}

/* head of tuition */
.person{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.bphoto{position:relative}
.bphoto .img{border-radius:28px;aspect-ratio:4/5;background-size:cover;background-position:50% 30%;box-shadow:var(--lift)}
.bphoto .cf{position:absolute;border-radius:3px}
.ptext{display:grid;gap:20px}
.ptext h2{font-size:clamp(30px,3.6vw,42px);line-height:1.1}
.creds{display:flex;flex-wrap:wrap;gap:8px}
.creds span{font:700 13px var(--head);padding:9px 14px;border-radius:999px;background:var(--mist-deep);color:var(--deep-blue)}

/* faq */
.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:18px 22px}
.faq summary{font:700 16.5px var(--head);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:800 20px var(--head);color:var(--deep-blue);line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--soft);margin-top:10px}
.faqcat{font:800 13px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--label);margin:26px 0 4px}

/* books */
.books{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.book{border-radius:14px;aspect-ratio:3/4;padding:12px;display:grid;align-content:space-between;color:#fff;box-shadow:var(--shadow);font:800 13px var(--head)}
.book big{font:800 28px var(--head);letter-spacing:-.04em}
.book small{font:600 11px var(--body);opacity:.85}

/* forms */
.field{display:grid;gap:6px}
.field label{font:700 13px var(--head);color:var(--ink)}
.input{border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;font:400 16px var(--body);width:100%;background:#fff;color:var(--ink)}
textarea.input{min-height:110px;resize:vertical}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slots button{all:unset;cursor:pointer;text-align:center;border:1.5px solid var(--line);border-radius:10px;padding:10px 6px;font:700 13.5px var(--head);background:#fff;color:var(--ink)}
.slots button.sel{background:var(--sel);border-color:var(--deep-blue);color:var(--deep-blue)}

/* diagnostic flow + result */
.flow{max-width:640px;margin:0 auto;background:#fff;border-radius:28px;box-shadow:var(--lift);padding:36px;display:grid;gap:18px;position:relative;z-index:1}
.progress{height:8px;border-radius:999px;background:var(--mist-deep);overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,#1F45A8,#553BA0);border-radius:999px;transition:width .5s}
.opts{display:grid;gap:10px}
.opts.c3{grid-template-columns:repeat(3,1fr)}
.opts button{all:unset;cursor:pointer;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;display:grid;gap:2px}
.opts button:hover,.opts button:focus-visible,.opts button.sel{border-color:var(--deep-blue);background:var(--sel)}
.opts b{font:800 16px var(--head)}.opts small{color:var(--label)}
.qmath{font:600 24px var(--body);text-align:center;padding:18px;background:var(--mist);border-radius:16px}
.result{max-width:860px;margin:0 auto;border-radius:30px;overflow:hidden;box-shadow:var(--lift);position:relative;z-index:1;background:#fff}
.rtop{background:var(--navy);background-image:var(--glow);color:#fff;padding:40px;display:grid;gap:18px;text-align:center;justify-items:center}
.rtop h2{color:#fff;font-size:clamp(26px,3.4vw,38px)}
.rtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.rt{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);border-radius:18px;padding:16px;display:grid;gap:4px}
.rt small{color:#B9C2D6;font-size:12.5px}
.rt b{font:800 20px var(--head)}
.rbody{padding:36px;display:grid;gap:22px}
.plan{border-radius:22px;box-shadow:0 0 0 2px var(--deep-blue);padding:24px;display:grid;gap:12px}
.plan .price{font:800 34px var(--head);letter-spacing:-.03em;color:var(--ink)}
.plan .price small{font:600 14px var(--body);color:var(--label);letter-spacing:0}

/* parent area */
.pa{display:grid;grid-template-columns:230px 1fr;border-radius:28px;overflow:hidden;box-shadow:var(--lift);background:var(--cream);position:relative;z-index:1;min-height:620px}
.pa .side2 span{font-size:13.5px;padding:10px 12px}
.pa .main2{padding:28px;gap:18px}
.pa .main2 h3{font-size:26px}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pcard{background:#fff;border-radius:18px;padding:18px;display:grid;gap:8px;align-content:start;box-shadow:var(--shadow)}
.pcard h4{font-size:15px}
.pcard.wide{grid-column:span 2}
.kid{display:flex;gap:8px;flex-wrap:wrap}
.kid button{all:unset;cursor:pointer;font:700 13px var(--head);padding:8px 14px;border-radius:999px;background:#fff;color:var(--soft);box-shadow:inset 0 0 0 1.5px var(--line)}
.kid button.on{background:var(--navy);color:#fff;box-shadow:none}

/* close + footer */
.endblock{background:var(--navy);color:#C9D1E4;position:relative;overflow:hidden;isolation:isolate}
.endblock::before{content:"";position:absolute;inset:0;background:var(--glow);z-index:-1}
.close{padding-block:110px 84px;display:grid;justify-items:center;text-align:center;gap:22px;position:relative;z-index:1}
.close h2{font-size:clamp(34px,4.6vw,52px);color:#fff}
.close p{color:#C9D1E4;max-width:52ch}
.close .eyebrow{color:var(--gold)}
.fdiv{height:1px;background:rgba(255,255,255,.12)}
.fgrid{padding-block:56px;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;position:relative;z-index:1}
.fgrid h3,.fgrid h4{color:#fff;font-size:14px;margin-bottom:14px;letter-spacing:-.01em}
.fgrid ul{list-style:none;padding:0;display:grid;gap:10px;font-size:14.5px}
.fgrid a{color:#C9D1E4;text-decoration:none;cursor:pointer}
.fgrid a:hover{color:#fff}
.fbrand{display:grid;gap:16px;align-content:start}
.fbrand img{width:96px;display:block}
.fbrand p{font-size:14.5px;max-width:34ch}
.legal{padding-block:22px;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13px;color:#8E98B3;justify-content:space-between;position:relative;z-index:1}
.legal div{display:flex;flex-wrap:wrap;gap:10px 22px}
.legal a{color:#8E98B3;text-decoration:none;cursor:pointer}

/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(8,14,34,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.mbox{background:#fff;border-radius:28px;width:100%;max-width:500px;padding:32px;display:grid;gap:16px;position:relative;box-shadow:0 30px 80px rgba(5,10,30,.4);animation:mIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes mIn{from{opacity:0;transform:translateY(20px) scale(.97)}}
.mbox h3{font-size:24px}
.mbox p{color:var(--soft)}
.mx{position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:50%;border:0;background:var(--mist);cursor:pointer;font:800 15px var(--head);color:var(--ink)}

/* reveal on scroll (turned off for reduced motion further down) */

@keyframes pgIn{from{opacity:.4;transform:translateY(10px)}}
/* only once the head script has confirmed the browser can reveal them, so the content never stays hidden */
.rv-on .rv{transform:translateY(34px) scale(.985);opacity:.35;transition:transform 1s cubic-bezier(.2,.75,.2,1),opacity 1s}
.rv-on .rv.in{transform:none;opacity:1}

@media (max-width:900px){
  .g2,.g3,.prog2,.person,.tabpanel,.phero .g{grid-template-columns:1fr}
  .g4,.tiers,.tiers.t3,.pcards{grid-template-columns:1fr 1fr}
  .books{grid-template-columns:repeat(4,1fr)}
  .mphoto .float{right:12px;bottom:-24px}
  .fgrid{grid-template-columns:1fr 1fr}
  .sec{padding-block:76px}
  .pa{grid-template-columns:1fr}.pa .side2{display:none}
  .lesson{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(3,1fr);grid-template-rows:none}
  .app{grid-template-columns:1fr}.app .side2{display:none}
  .rtiles{grid-template-columns:1fr}
  .mail{margin:0 auto}
  .pcard.wide{grid-column:auto}
}
@media (max-width:520px){.fgrid,.g4,.tiers,.tiers.t3,.pcards{grid-template-columns:1fr}.books{grid-template-columns:repeat(3,1fr)}.opts.c3{grid-template-columns:1fr 1fr}.slots{grid-template-columns:repeat(3,1fr)}.flow,.rbody,.rtop{padding:24px}}
@media (prefers-reduced-motion:reduce){
  .anim .w,.anim .fu,.anim .cfp,.anim .glint,.anim .backdrop .ph,.hero::before,.mbox,.scrollcue::after,.tile .live{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
  .glint{background:none;color:var(--gold)}
  .rv,.rv-on .rv{transform:none;opacity:1;transition:none}
  .btn{transition:none}
}

/* subjects matrix */
.matrix{background:#fff;border-radius:24px;box-shadow:var(--shadow);overflow-x:auto}
.matrix table{width:100%;border-collapse:collapse;min-width:640px}
.matrix th,.matrix td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
.matrix th{font:800 12px var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.matrix td.t{color:var(--ok);font-weight:800;text-align:center}
.matrix th.c{text-align:center}
.matrix tr:last-child td{border-bottom:0}
.subj{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sj{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:22px;display:grid;gap:10px;align-content:start}
.sj h3{font-size:19px}
.boards{display:flex;flex-wrap:wrap;gap:6px}
.boards span{font:700 11.5px var(--head);padding:5px 10px;border-radius:999px;background:var(--mist-deep);color:var(--deep-blue)}
.sj .st{font:700 12px var(--head)}
.sj .st.live{color:var(--ok)}.sj .st.wl{color:var(--warm)}
.sj .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}

/* 12 week timeline */
.wk{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:8px 0 14px}
.wk i{height:44px;border-radius:8px;display:grid;place-items:center;font:800 12px var(--head);font-style:normal;color:#fff}
.wk i.a{background:var(--royal)}.wk i.b{background:var(--violet)}.wk i.c{background:var(--gold);color:var(--navy)}
.wklegend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;color:var(--soft)}
.wklegend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:8px;vertical-align:-1px;background:var(--c)}
.s-navy .wklegend{color:#C9D1E4}
.week{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.day{background:#fff;border-radius:18px;padding:18px;display:grid;gap:6px;align-content:start;box-shadow:var(--shadow)}
.day b{font:800 12px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--deep-blue)}
.day h4{font-size:16px}
.day p{font-size:14px;color:var(--soft)}

/* study zone mini mocks */
.szrow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:34px}
.szrow:nth-child(even) .szm{order:-1}
.szm{border-radius:22px;padding:22px;box-shadow:var(--lift);display:grid;gap:10px;min-height:250px;align-content:start}
.szm.curr{background:linear-gradient(120deg,#F9F7FE,#EFEAFB)}
.szm.lib{background:linear-gradient(120deg,#F6F9FE,#E7EEFB)}
.szm.dri{background:linear-gradient(120deg,#FFFAF6,#FBEEE5)}
.szm.exa{background:linear-gradient(120deg,#F7FCF9,#E8F4ED)}
.ican{display:flex;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:10px 12px;font-size:14px}
.ican i{width:16px;height:16px;border-radius:4px;border:1.5px solid #45368A;flex:none}
.ican i.t{background:#45368A}
.ican i.t::after{content:"✓";color:#fff;font:800 10px var(--head);display:grid;place-items:center;height:100%}
.note3{background:#fff;border-radius:14px;padding:16px;display:grid;gap:8px}
.note3 h4{font-size:17px;border-bottom:3px solid var(--gold);width:max-content;padding-bottom:2px}
.note3 .ex{background:var(--mist);border-radius:10px;padding:10px;font:600 15px var(--body)}
.note3 .warn{background:#FBF3E2;border-radius:10px;padding:10px;font-size:13.5px;color:#5A4410}
.medal{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFFFFF,#C9D0DC 55%,#8A94A6);display:grid;place-items:center;font:800 13px var(--head);color:var(--ink);box-shadow:0 8px 20px rgba(0,0,0,.15)}
.paper{background:#fff;border-radius:12px;padding:16px;display:grid;gap:8px;position:relative;box-shadow:0 10px 24px rgba(14,24,56,.12)}
.paper .stamp{position:absolute;right:14px;top:12px;border:2.5px solid var(--gap);color:var(--gap);border-radius:10px;padding:6px 10px;font:800 15px var(--head);rotate:-8deg}
.paper .l{height:8px;border-radius:4px;background:var(--mist-deep)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan2{background:#fff;border-radius:26px;box-shadow:var(--shadow);padding:30px;display:grid;gap:14px;align-content:start;position:relative}
.plan2.feature{background:var(--navy);background-image:var(--glow);color:#fff}
.plan2.feature h3,.plan2.feature .pp{color:#fff}
.plan2.feature .ticks li{color:#DDE3F2}
.plan2.feature .ticks li::before{background:rgba(232,176,74,.2);color:var(--gold)}
.plan2 h3{font-size:22px}
.plan2 .pp{font:800 15px var(--head);color:var(--deep-blue)}
.plan2 .badge{position:absolute;top:-12px;left:26px;font:800 11px var(--head);background:var(--gold);color:var(--navy);padding:5px 10px;border-radius:999px}

/* availability */
.avail{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.avday{display:grid;gap:8px;align-content:start}
.avday b{font:800 13px var(--head);text-align:center}
.avday button{all:unset;cursor:pointer;text-align:center;border:1.5px solid var(--line);border-radius:12px;padding:10px 4px;font:700 13px var(--head);background:#fff;color:var(--ink);display:grid;gap:2px}
.avday button small{font:600 10.5px var(--body);color:var(--ok)}
.avday button.full{cursor:not-allowed;background:var(--mist);color:#A3ABBF}
.avday button.full small{color:#A3ABBF}
.avday button.sel{background:var(--sel);border-color:var(--deep-blue);color:var(--deep-blue)}
.matchbox{display:flex;gap:12px;align-items:center;background:var(--ok-bg);border-radius:14px;padding:12px 16px;font-size:14.5px;color:#14532F}

/* blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{background:#fff;border-radius:22px;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-rows:180px 1fr;cursor:pointer;transition:transform .3s}
.post:hover{transform:translateY(-4px)}
.post .pi{background-size:cover;background-position:center}
.post .pb{padding:20px;display:grid;gap:8px;align-content:start}
.post h3{font-size:18px;line-height:1.3}
.post.big{grid-column:span 2;grid-template-columns:1.1fr 1fr;grid-template-rows:auto}
.post.big .pi{min-height:300px}
.post.big h3{font-size:26px}
.plist{display:grid;gap:12px;max-width:860px}
.prow{display:grid;grid-template-columns:140px 1fr;gap:18px;background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden;cursor:pointer}
.prow .pi{background-size:cover;background-position:center;min-height:110px}
.prow .pb{padding:16px 16px 16px 0;display:grid;gap:6px;align-content:center}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filters button{font:700 13px var(--head);border:1.5px solid var(--line);background:#fff;color:var(--soft);border-radius:999px;padding:8px 14px;cursor:pointer}
.filters button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.news{background:var(--navy);background-image:var(--glow);color:#fff;border-radius:28px;padding:36px;display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.news h3{color:#fff;font-size:28px}
.news p{color:#C9D1E4}
.news .f{display:flex;gap:10px;flex-wrap:wrap}
.news .f input{flex:1 1 220px}
.satsp{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.paperc{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:24px;display:grid;gap:10px}
.paperc h3{font-size:19px}
.paperc .papers{display:flex;flex-wrap:wrap;gap:6px}
.paperc .papers span{font:700 12px var(--head);padding:6px 11px;border-radius:999px;background:#EEE9FA;color:var(--deep-violet)}
.tline{display:grid;gap:0;max-width:760px}
.tl{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.tl b{font:800 15px var(--head);color:var(--deep-violet)}
.tl h3,.tl h4{font-size:17px;margin-bottom:4px}
.tl p{color:var(--soft);font-size:15px}
.s-navy .tl{border-color:rgba(255,255,255,.12)}.s-navy .tl b{color:var(--gold)}.s-navy .tl h4{color:#fff}.s-navy .tl p{color:#C9D1E4}
@media (max-width:900px){
  .subj,.plans,.posts,.satsp,.news{grid-template-columns:1fr}
  .szrow{grid-template-columns:1fr}.szrow:nth-child(even) .szm{order:0}
  .post.big{grid-column:auto;grid-template-columns:1fr}
  .week{grid-template-columns:1fr 1fr}
  .avail{grid-template-columns:repeat(3,1fr)}
  .tl{grid-template-columns:1fr;gap:4px}
}

/* ===== v3 ===== */
/* pill locked at the top of each page (scrolls away with the page) */
.pillwrap{position:relative;top:28px;height:0}.pillwrap .pill{margin:0 auto}

/* lesson tiles with real faces */
.tile.ph{background-size:cover;background-position:center;color:transparent}
.tile.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45))}
.tile .who,.tile .live,.tile .hand-up{z-index:2}

/* accurate Study Zone and Learning Portal screens */
.rz{display:grid;grid-template-columns:150px 1fr;background:#F3EFE6;min-height:360px;color:#14224A}
.rz-side{background:#0E1838;padding:14px 8px;display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden;isolation:isolate}
.rz-side::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(160% 50% at 0% 0%,rgba(44,104,203,.55),transparent 60%),radial-gradient(140% 45% at 100% 30%,rgba(113,81,190,.42),transparent 62%)}
.rz-side::after{content:"";position:absolute;left:-40%;top:52%;width:240%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.08);z-index:-1}
.rz-side img{width:54px;margin:2px 8px 12px}
.rz-it{position:relative;display:flex;align-items:center;gap:8px;height:30px;padding:0 9px;border-radius:9px;color:#B9C2D6;font:600 11px var(--head)}
.rz-it svg{width:13px;height:13px;flex:none}
.rz-it.on{background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff}
.rz-it.on::after{content:"";position:absolute;right:8px;width:5px;height:5px;border-radius:50%;background:#AEBCF5;box-shadow:0 0 8px #AEBCF5}
.rz-main{padding:12px;display:grid;gap:10px;align-content:start;min-width:0}
.rz-strip{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;border-radius:12px;color:#fff;background:linear-gradient(110deg,#14224A,#22468C 62%,#5A4A9E)}
.rz-strip b{font:800 12px var(--head)}
.rz-strip .r{display:flex;gap:5px;align-items:center}
.rz-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;background:#fff;color:#14224A;font:800 10px var(--head)}
.rz-pill svg{width:10px;height:10px}
.rz-av{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);display:grid;place-items:center;font:800 10px var(--head)}
.rz-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:14px;padding:14px 16px;color:#fff;background:linear-gradient(110deg,#1B2F6B,#24479A 52%,#6A4DBE);display:grid;gap:4px}
.rz-hero .sy{position:absolute;z-index:-1;font:800 34px var(--head);color:rgba(255,255,255,.1)}
.rz-hero h5{font:800 16px/1.1 var(--head);margin:0;color:#fff;letter-spacing:-.02em}
.rz-hero p{font-size:11px;color:rgba(255,255,255,.85)}
.rz-wk{display:flex;gap:4px;align-items:center;margin-top:4px;font:700 10px var(--head)}
.rz-wk i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:800 8.5px var(--head);font-style:normal;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.rz-wk i.d{background:#fff;color:#1F45A8}.rz-wk i.now{box-shadow:inset 0 0 0 1.5px #fff}
.rz-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rz-card{position:relative;overflow:hidden;isolation:isolate;border-radius:13px;padding:10px;min-height:128px;display:flex;flex-direction:column;gap:3px;color:#fff;box-shadow:0 3px 0 rgba(10,15,30,.12),0 8px 16px rgba(14,24,56,.14)}
.rz-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 60% at 0% 0%,rgba(255,255,255,.22),transparent 60%),radial-gradient(70% 60% at 100% 110%,rgba(232,176,74,.22),transparent 65%)}
.rz-card .tg{align-self:flex-end;font:800 8px var(--head);padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.18)}
.rz-card .bi{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.16);display:grid;place-items:center}.rz-card .bi svg{width:14px;height:14px}
.rz-card b{font:800 13px var(--head);margin-top:auto}
.rz-card small{font-size:9px;opacity:.9;line-height:1.35}
.rz-card .go{align-self:flex-start;margin-top:4px;background:#fff;color:#14224A;font:800 8.5px var(--head);padding:4px 8px;border-radius:999px}
.rz-snap{background:#fff;border-radius:12px;padding:10px;display:grid;gap:6px}
.rz-snap h6{font:800 11px var(--head);margin:0}
.rz-snap .g{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.rz-snap .g div{background:#FAF8F3;border-radius:8px;padding:6px;box-shadow:inset 0 0 0 1px #EFEAE0}
.rz-snap b{font:800 13px var(--head);display:block}.rz-snap small{font-size:8.5px;color:#596178}
.rz-hwh{border-radius:14px;padding:12px 14px;color:#fff;background:linear-gradient(110deg,#1B2F6B,#24479A 52%,#6A4DBE);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.rz-hwh h5{font:800 16px var(--head);margin:0;color:#fff}.rz-hwh h5 em{font-style:normal;color:var(--gold)}
.rz-hwh p{font-size:10.5px;color:rgba(255,255,255,.85)}
.rz-gl{display:flex;gap:5px}
.rz-gl div{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);border-radius:9px;padding:5px 8px;display:grid}
.rz-gl span{font-size:8.5px;opacity:.8}.rz-gl b{font:800 13px var(--head)}.rz-gl .gold b{color:var(--gold)}
.rz-smart{display:flex;gap:8px;align-items:center;background:#fff;border-radius:11px;padding:8px 10px;font-size:10.5px;box-shadow:inset 3px 0 0 var(--gold)}
.rz-tbl{background:#fff;border-radius:12px;overflow:hidden}
.rz-tabs{display:flex;gap:12px;padding:8px 12px;border-bottom:1px solid #EFEBE2;font:700 10.5px var(--head);color:#596178}
.rz-tabs b.on{color:#14224A;box-shadow:inset 0 -2px 0 #1F45A8;padding-bottom:5px}
.rz-row{display:grid;grid-template-columns:2.2fr 1fr 1fr auto;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid #EFEBE2;font-size:10.5px}
.rz-row:last-child{border-bottom:0}
.rz-row .ref{font:800 9px var(--head);color:#1F45A8;background:#E6ECFA;border-radius:5px;padding:2px 5px;margin-right:6px}
.rz-row b{font:700 11px var(--head)}
.rz-row .chip{font-size:9px;padding:3px 7px}
.rz-row .bt{font:800 9px var(--head);background:#0E1838;color:#fff;border-radius:999px;padding:4px 9px}
@media (max-width:900px){.rz{grid-template-columns:1fr}.rz-side{display:none}.rz-cards{grid-template-columns:1fr 1fr}.rz-snap .g{grid-template-columns:repeat(3,1fr)}}

/* GCSE subject cards with illustrated headers */
.sj.ill{padding:0;overflow:hidden;gap:0}
.sj.ill .top{height:120px;position:relative;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.sj.ill .top::after{content:"";position:absolute;left:40%;top:40%;width:260px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.18);z-index:-1}
.sj.ill .top svg{width:64px;height:64px;color:#fff;opacity:.95}
.sj.ill .top .sy{position:absolute;font:800 28px var(--head);color:rgba(255,255,255,.18)}
.sj.ill .bd{padding:20px 22px 22px;display:grid;gap:10px}

/* how we teach: shorter hero */
.phero.short{padding-block:150px 56px}

/* enrol and re-enrol */
.stepper{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.stepper span{font:700 12px var(--head);padding:6px 11px;border-radius:999px;background:var(--mist-deep);color:var(--label)}
.stepper span.on{background:var(--navy);color:#fff}
.stepper span.done{background:var(--ok-bg);color:var(--ok)}
.sumrow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.sumrow:last-child{border-bottom:0}
.sumrow b{font-family:var(--head)}
.lockbox{background:var(--mist);border-radius:16px;padding:16px 18px;display:grid;gap:6px}
.lockbox .eyebrow{font-size:11px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.payopt{display:grid;gap:8px}
.payopt label{display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;cursor:pointer;font-size:15px}
.payopt label:has(input:checked){border-color:var(--deep-blue);background:var(--sel)}
.prev2{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.prev2 div{background:var(--mist);border-radius:12px;padding:10px;text-align:center;display:grid;gap:2px}
.prev2 b{font:800 17px var(--head);color:var(--deep-blue)}.prev2 small{font-size:11.5px;color:var(--label)}
@media (max-width:520px){.split,.prev2{grid-template-columns:1fr}}

:root{--im1:url(/assets/img/family-mum-son.jpg);--im2:url(/assets/img/learner-girl-waving.jpg);--im3:url(/assets/img/learner-boy-workbook.jpg);--im4:url(/assets/img/dad-daughter-workbook.jpg);--im5:url(/assets/img/family-at-table.jpg);--im6:url(/assets/img/teacher-online.jpg);--im7:url(/assets/img/teen-laptop-homework.jpg);--im8:url(/assets/img/boy-tablet-sats.jpg);--im9:url(/assets/img/girl-group-lesson.jpg);--im10:url(/assets/img/dad-phone-update.jpg);--imb:url(/assets/img/mrs-bukky.jpg);}.letter{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:48px;align-items:start}
.letter .shead{position:sticky;top:30px}
.lt-body{display:grid;gap:18px;max-width:66ch}
.lt-body p{color:var(--soft)}.lt-body p.lead{color:var(--ink)}
.lt-body b{color:var(--ink)}
.pull{margin:6px 0;padding:6px 0 6px 22px;border-left:4px solid var(--gold);font:800 clamp(22px,3vw,30px)/1.2 var(--head);letter-spacing:-.03em;color:var(--navy)}
.sig{font:700 15px var(--head);color:var(--deep-blue)!important}
.phslot{margin:0;border-radius:22px;background:repeating-linear-gradient(135deg,#EEF2FB 0 14px,#E6ECF8 14px 28px);box-shadow:inset 0 0 0 2px #D3DCF0;min-height:240px;display:grid;place-items:center;align-content:center;gap:10px;padding:20px;text-align:center}
.phslot span{font:700 13px var(--head);color:var(--label);background:#fff;padding:8px 14px;border-radius:999px}
.phslot figcaption{font-size:13.5px;color:var(--soft);max-width:40ch}
.phslot.tall{min-height:420px}
.phslot.dark{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.phslot.dark figcaption{color:#C9D1E4}
.chap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ch{background:var(--mist);border-radius:20px;padding:22px;display:grid;gap:10px;align-content:start}
.ch b{width:36px;height:36px;border-radius:12px;background:var(--navy);color:var(--gold);display:grid;place-items:center;font:800 15px var(--head)}
.ch h4{font:800 17px var(--head)}.ch p{font-size:14.5px;color:var(--soft)}
@media (max-width:900px){.letter{grid-template-columns:1fr;gap:20px}.letter .shead{position:static}.chap{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.chap{grid-template-columns:1fr}}
/* zoom style lesson */
.zoom{display:grid;grid-template-rows:auto 1fr auto;height:100%;background:#1A1A1F;color:#fff;font-family:var(--body)}
.zoom .ztop{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font:600 11px var(--head);color:#C8CAD2}
.zoom .ztop .rec{display:flex;align-items:center;gap:6px}.zoom .ztop .rec i{width:7px;height:7px;border-radius:50%;background:#2FB36B}
.zoom .zmain{display:grid;grid-template-columns:1fr 150px;gap:8px;padding:0 10px;min-height:0}
.zoom .share{border-radius:10px;background:#fff;color:var(--ink);padding:14px;display:grid;gap:6px;align-content:start;position:relative}
.zoom .share .t{font:800 11px var(--head);letter-spacing:.1em;color:var(--deep-blue)}
.zoom .share .eq{font:700 14px var(--head)}.zoom .share .eq.r{color:var(--deep-violet)}
.zoom .share .tag{position:absolute;right:10px;bottom:10px;font:700 10px var(--head);background:var(--sel);color:var(--deep-blue);padding:4px 8px;border-radius:6px}
.zoom .gal{display:grid;gap:8px;grid-auto-rows:auto;align-content:center;min-height:0}
.ztile{position:relative;border-radius:8px;overflow:hidden;background:#2A2B33 center/cover no-repeat;min-height:52px;aspect-ratio:16/9}
.ztile.spk{box-shadow:0 0 0 2px #2FB36B}
.ztile .nm{position:absolute;left:5px;bottom:5px;font:600 9.5px var(--head);background:rgba(0,0,0,.6);padding:2px 6px;border-radius:4px;display:flex;gap:4px;align-items:center}
.ztile .hand-up{position:absolute;right:5px;top:4px;font-size:12px}
.ztile .ini{position:absolute;inset:0;display:grid;place-items:center;font:800 16px var(--head);color:#9EA3B5}
.zoom .zbar{display:flex;justify-content:center;gap:10px;padding:8px}
.zoom .zbar span{font:600 10px var(--head);color:#C8CAD2;background:#2A2B33;padding:6px 10px;border-radius:8px}
.zoom .zbar span.end{background:#D33F36;color:#fff}
@media (max-width:640px){.zoom .zmain{grid-template-columns:1fr}.zoom .gal{grid-template-columns:repeat(4,1fr)}}
:root{--zt:url(/assets/img/webcam-tutor.jpg);--z1:url(/assets/img/webcam-learner-girl.jpg);--z2:url(/assets/img/webcam-learner-boy-writing.jpg);--z3:url(/assets/img/webcam-learner-boy-kitchen.jpg)}
:root{--bk1:url(/assets/img/spelling-one-cover.jpg);--bk2:url(/assets/img/spelling-two-cover.jpg);--bk3:url(/assets/img/spelling-three-cover.jpg);--bk4:url(/assets/img/spelling-four-cover.jpg);--bk5:url(/assets/img/spelling-five-cover.jpg);--bkp5:url(/assets/img/spelling-five-photo.jpg);--bk6:url(/assets/img/spelling-six-cover.jpg);--bk7:url(/assets/img/spelling-seven-cover.jpg);--sa:url(/assets/img/spelling-audiobook.jpg);--sb:url(/assets/img/spelling-bundle.jpg)}
.fan{display:flex;justify-content:center;align-items:flex-end;height:230px;margin:6px auto 0;width:min(100%,760px)}
.fan i{display:block;width:118px;aspect-ratio:340/488;border-radius:6px;background:center/cover no-repeat;box-shadow:0 18px 40px rgba(0,0,0,.4);margin:0 -16px;transform:rotate(var(--r)) translateY(var(--y));transition:transform .3s}
.fan i:hover{transform:rotate(0) translateY(-14px)}
.light-h{background:var(--mist);padding:150px 0 70px}
.lh-g{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.light-h .txt{display:grid;gap:16px}.light-h h1{font-size:clamp(34px,5vw,54px);line-height:1.05}
.cwall{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cwall i{display:block;aspect-ratio:340/488;border-radius:6px;background:center/cover no-repeat;box-shadow:0 10px 26px rgba(14,24,56,.18)}
.cwall i:nth-child(n+5){transform:translateX(50%)}
.covers{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.cov{display:grid;gap:8px;text-align:center;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.cov i{display:block;aspect-ratio:340/488;border-radius:6px;background:center/cover no-repeat;box-shadow:0 10px 24px rgba(14,24,56,.16);transition:transform .25s}
.cov:hover i{transform:translateY(-6px)}
.cov b{font:800 14px var(--head)}.cov small{color:var(--label);font-size:12.5px}
.agecard{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;background:var(--mist);border-radius:22px;padding:20px;max-width:620px}
.agecard i{display:block;aspect-ratio:340/488;border-radius:6px;background:center/cover;box-shadow:0 10px 24px rgba(14,24,56,.18)}
.agecard div{display:grid;gap:8px;justify-items:start}
.shelf{display:flex;gap:10px;align-items:flex-end;justify-content:center;padding:20px 10px 0;border-bottom:10px solid #C9A274;border-radius:0 0 4px 4px}
.shelf button{width:86px;aspect-ratio:340/488;border:0;border-radius:4px 4px 0 0;background:center/cover;cursor:pointer;transition:transform .25s;padding:0}
.shelf button.on{transform:translateY(-16px);box-shadow:0 14px 26px rgba(14,24,56,.25)}
.shelfd{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:center;margin-top:28px;background:var(--mist);border-radius:24px;padding:24px}
.shelfd i{display:block;aspect-ratio:340/488;border-radius:8px;background:center/cover;box-shadow:0 14px 30px rgba(14,24,56,.2)}
.shelfd div{display:grid;gap:10px;justify-items:start}
.shelfd ul{margin:0;padding-left:18px;color:var(--soft)}
.steps3{display:flex;gap:10px;flex-wrap:wrap}
.steps3 span{display:flex;gap:8px;align-items:center;font:700 14px var(--head);background:#fff;padding:8px 14px 8px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.steps3 b{width:26px;height:26px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-size:12px}
.tryit{background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:24px;display:grid;gap:14px}
.tryit.dark{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff}
.tryit .tt{display:flex;justify-content:space-between;align-items:center;font:700 13px var(--head);color:var(--label)}
.tryit.dark .tt{color:#B9C2D6}
.tryit .play{width:64px;height:64px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:22px;cursor:pointer;justify-self:center;display:grid;place-items:center}
.tryit.dark .play{background:var(--gold);color:var(--navy)}
.tryit .say{font:600 14px var(--body);text-align:center;color:var(--soft)}
.tryit.dark .say{color:#C9D1E4}
.tryit input{font:700 22px var(--head);text-align:center;padding:14px;border-radius:14px;border:2px solid var(--line);width:100%;letter-spacing:.04em}
.tryit .res{min-height:22px;text-align:center;font:700 14px var(--head)}
.tryit .res.ok{color:#1B7A43}.tryit .res.no{color:#B3362B}
.tryit.dark .res.ok{color:#7FE0A6}.tryit.dark .res.no{color:#FFB4AC}
.tryit .row{display:flex;gap:10px;justify-content:center}
.fmts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fmt{position:relative;background:var(--mist);border-radius:24px;padding:16px 16px 20px;display:grid;gap:10px;align-content:start;justify-items:start}
.fmt.best{background:#fff;box-shadow:0 0 0 2px var(--navy),var(--shadow)}
.fmt .chip{position:absolute;top:26px;left:26px;z-index:1}
.fmt .fp{width:100%;aspect-ratio:1;border-radius:16px;background:center/cover no-repeat}
.fmt h3{font-size:18px}.fmt p{color:var(--soft);font-size:14.5px}
.bund{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.bund .bp{aspect-ratio:1;border-radius:28px;background:center/cover;box-shadow:var(--shadow)}
@media (max-width:900px){.covers{grid-template-columns:repeat(4,1fr)}.lh-g,.bund,.fmts{grid-template-columns:1fr}.shelf button{width:62px}.fan{height:170px}.fan i{width:80px;margin:0 -12px}}
@media (max-width:560px){.covers{grid-template-columns:repeat(3,1fr)}.shelfd,.agecard{grid-template-columns:110px 1fr;padding:16px;gap:16px}.shelf{gap:4px}.shelf button{width:40px}}
:root{--cn1:url(/assets/img/centre-teacher-group.jpg);--cn2:url(/assets/img/centre-students-working.jpg)}
.cphoto{border-radius:24px;background:center/cover no-repeat;min-height:420px;box-shadow:var(--shadow)}.cpair{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-bottom:28px}.cpair .cphoto{min-height:340px}@media (max-width:900px){.cpair{grid-template-columns:1fr}.cphoto{min-height:260px}}
.qwall{columns:3 260px;column-gap:16px}
.qc{break-inside:avoid;margin:0 0 16px;background:#fff;border-radius:22px;padding:22px 22px 18px;box-shadow:var(--shadow);display:grid;gap:12px;position:relative}
.qc .qm{font:800 46px/0.6 var(--head);color:var(--gold);height:22px}
.qc blockquote{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.qc figcaption b{display:block;font:800 14px var(--head)}.qc figcaption small{color:var(--label);font-size:12.5px}
.qc.big blockquote{font:700 clamp(20px,2.6vw,26px)/1.35 var(--head);letter-spacing:-.02em}
.qf{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:start}
.qf .qc.big{background:var(--navy);background-image:var(--glow);padding:34px}.qf .qc.big blockquote,.qf .qc.big b{color:#fff}.qf .qc.big small{color:#B9C2D6}
.qs{display:grid;gap:12px}.qs .qc{margin:0}
.q1{max-width:760px;margin:0 auto;display:grid;gap:16px}.q1 .qc{margin:0;padding:34px;text-align:center;justify-items:center;min-height:250px;align-content:center}
.q1n{display:flex;justify-content:center;align-items:center;gap:14px}.q1n span{display:flex;gap:6px}.q1n i{width:8px;height:8px;border-radius:50%;background:var(--line)}.q1n i.on{background:var(--deep-blue)}
.story-c{max-width:760px;margin:0 auto;display:grid;gap:16px;text-align:center;justify-items:center}
@media (max-width:900px){.qf{grid-template-columns:1fr}}

[data-page="ad-gcse"]{position:relative}.lpbar{position:absolute;top:0;left:0;right:0;z-index:20}
.lpbar .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:22px}
.lpbar img{height:34px}
.phero.lp{padding-block:130px 90px}
.hero.lph{min-height:640px}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px}
.phero.c .trust{justify-content:center}
.trust span{font:700 13px var(--head);color:#DDE3F2;display:flex;align-items:center;gap:7px}
.trust span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.vid{position:relative;aspect-ratio:4/5;border-radius:28px;background:center 20%/cover;box-shadow:0 30px 70px rgba(0,0,0,.4);display:grid;place-items:center;overflow:hidden}
.vid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(14,24,56,.6))}
.vid .play{position:relative;z-index:1;width:76px;height:76px;border-radius:50%;border:0;background:var(--gold);color:var(--navy);font-size:26px;cursor:pointer}
.vid span{position:absolute;bottom:16px;left:16px;z-index:1;font:700 12px var(--head);background:rgba(255,255,255,.9);color:var(--navy);padding:6px 10px;border-radius:999px}
.chk{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.chk li{background:var(--mist);border-radius:14px;padding:14px 16px 14px 48px;position:relative;font:600 15.5px var(--body)}
.chk li::before{content:"✓";position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font:800 12px var(--head)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vsc{background:#fff;border-radius:24px;padding:26px;box-shadow:var(--shadow);display:grid;gap:12px;align-content:start}
.vsc ul{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--soft)}
.vsc.us{background:var(--navy);background-image:var(--glow);color:#fff}.vsc.us h3{color:#fff}.vsc.us ul{color:#DDE3F2}
.lpsteps{display:grid;gap:14px}
.lpsteps>div{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.lpsteps b{width:40px;height:40px;border-radius:12px;background:var(--navy);color:var(--gold);display:grid;place-items:center;font:800 16px var(--head)}
.lpsteps h4{font:800 17px var(--head);margin:0 0 4px}.lpsteps p{color:var(--soft);font-size:15px}
.nowb{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.nowb>div{display:grid;gap:12px;max-width:640px}
.lpfoot{background:var(--navy);color:#B9C2D6;font-size:13px}
.lpfoot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:22px;border-top:1px solid rgba(255,255,255,.1)}
.lpfoot a{color:#DDE3F2}
.lpsticky{display:none}
@media (max-width:760px){.vs,.nowb{grid-template-columns:1fr}.lpsticky{display:block;position:sticky;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);box-shadow:0 -6px 20px rgba(14,24,56,.12)}.lpbar .btn{display:none}.phero.lp{padding-block:100px 60px}.hero.lph{min-height:0}}

.agc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ag{background:#fff;border-radius:22px;padding:22px;box-shadow:var(--shadow);display:grid;gap:10px;align-content:start}
.ag b{width:34px;height:34px;border-radius:11px;background:var(--warm-bg,#FBEFD4);color:var(--warm,#7A520C);display:grid;place-items:center;font:800 14px var(--head)}
.ag h3{font-size:17px}.ag p{font-size:14.5px;color:var(--soft)}
.agcta{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px;background:#fff;border-radius:20px;padding:18px 22px;box-shadow:var(--shadow)}
.agcta p{font:700 16px var(--head);max-width:60ch}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.path{background:#fff;border-radius:24px;padding:24px;box-shadow:var(--shadow);display:grid;gap:12px;align-content:start}
.path ul{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--soft)}
.path.us{background:var(--navy);background-image:var(--glow)}.path.us ul{color:#DDE3F2}
.whonote{font-size:13.5px;color:#C9D1E4;margin-top:4px}.whonote a{color:var(--gold);font-weight:700}
.who2{display:grid;gap:10px}
.who2 button{display:grid;gap:2px;text-align:left;border:0;border-radius:16px;padding:16px 18px;background:var(--mist);cursor:pointer;color:var(--ink)}
.who2 button b{font:800 16px var(--head)}.who2 button small{color:var(--soft);font-size:13.5px}
.who2 button.pri{background:var(--navy);color:#fff}.who2 button.pri small{color:#C9D1E4}
.lf{display:grid;gap:10px}.lf label{display:grid;gap:4px;font:700 12.5px var(--head);color:var(--label)}
.lf input,.lf select{font:500 15px var(--body);padding:11px 13px;border-radius:12px;border:1.5px solid var(--line);width:100%}
.lf .r2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:900px){.agc{grid-template-columns:1fr 1fr}.paths{grid-template-columns:1fr}}
@media (max-width:520px){.agc{grid-template-columns:1fr}.lf .r2{grid-template-columns:1fr}}
mark.tbc{background:#FFF1C9;color:#6A4708;padding:0 4px;border-radius:4px;font-weight:600}
.lupd{font-size:13px;color:#B9C2D6}

.lg{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start}
.ltoc{position:sticky;top:24px;display:grid;gap:4px}
.ltoc b{font:800 12px var(--head);text-transform:uppercase;letter-spacing:.1em;color:var(--label);margin-bottom:6px}
.ltoc a{font:600 14px var(--head);color:var(--soft);text-decoration:none;padding:6px 10px;border-radius:8px;cursor:pointer}
.ltoc a:hover{background:var(--mist);color:var(--navy)}
.lbody{display:grid;gap:30px;max-width:72ch}
.lshort{background:var(--mist);border-radius:20px;padding:20px 22px;display:grid;gap:8px}
.lshort ul{margin:0;padding-left:20px;display:grid;gap:6px}
.lsec{display:grid;gap:10px;scroll-margin-top:20px}.lsec h2{font-size:22px}
.lsec p,.lsec li{color:var(--soft)}.lsec ul{margin:0;padding-left:20px;display:grid;gap:6px}
.ltab{width:100%;border-collapse:collapse;font-size:14.5px}
.ltab th,.ltab td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.ltab th{font:800 11.5px var(--head);text-transform:uppercase;letter-spacing:.08em;color:var(--label)}
.kidbox{background:#EEF4FF;border-radius:16px;padding:16px 18px;display:grid;gap:6px}
.ahero{padding:150px 0 30px;background:var(--mist)}
.ahero .wrap{max-width:820px;display:grid;gap:14px}
.ahero h1{font-size:clamp(32px,4.6vw,48px);line-height:1.08}
.aback{font:700 13.5px var(--head);color:var(--deep-blue);text-decoration:none}
.aby{display:flex;gap:12px;align-items:center}.aby .av{width:44px;height:44px;border-radius:50%;background:center 20%/cover}.aby b{display:block;font:800 14px var(--head)}.aby small{color:var(--label)}
.apic{max-width:980px;margin:0 auto;aspect-ratio:16/8;border-radius:26px;background:center/cover;box-shadow:var(--shadow)}
.abody{max-width:720px;margin:0 auto;padding:40px 0 70px;display:grid;gap:16px}
.abody h2{font-size:24px;margin-top:10px}.abody p{color:var(--soft);font-size:17px;line-height:1.7}
.answer{background:var(--mist);border-radius:14px;padding:16px 18px;color:var(--ink)!important}
.aq{margin:10px 0;font:800 24px/1.3 var(--head);letter-spacing:-.02em;color:var(--navy);display:grid;gap:8px}.aq span{font:600 14px var(--body);color:var(--label)}
.acta{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap;background:var(--navy);background-image:var(--glow);color:#fff;border-radius:22px;padding:22px 24px;margin:14px 0}
.acta b{font:800 18px var(--head)}.acta p{color:#C9D1E4!important;font-size:15px!important}
.afaq{display:grid;gap:10px}
.arel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.appf{max-width:760px;margin:0 auto;background:#fff;border-radius:26px;box-shadow:var(--shadow);padding:30px;display:grid;gap:22px}
.apst{display:flex;gap:8px;flex-wrap:wrap}.apst span{font:700 12.5px var(--head);padding:6px 12px;border-radius:999px;background:var(--mist);color:var(--label)}.apst span.on{background:var(--navy);color:#fff}
.appf fieldset{border:0;padding:0;margin:0;display:grid;gap:12px}
.appf legend{font:800 18px var(--head);margin-bottom:10px}
.appf label{display:grid;gap:5px;font:700 12.5px var(--head);color:var(--label)}
.appf .r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chks{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}.chks .lbl{width:100%;font:700 12.5px var(--head);color:var(--label)}.chks label{display:flex;gap:6px;align-items:center;font:600 14px var(--body);color:var(--ink)}
.upl span{display:block;border:2px dashed var(--line);border-radius:14px;padding:20px;text-align:center;font:500 14px var(--body);color:var(--soft)}
.appf .tick{display:flex;gap:10px;align-items:flex-start;font:500 14px var(--body);color:var(--soft)}
.ords{max-width:860px;margin:0 auto;display:grid;gap:12px}
.ord{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:16px;display:grid;grid-template-columns:62px 1fr auto;gap:16px;align-items:center}
.ord i{width:62px;aspect-ratio:340/488;border-radius:4px;background:center/cover}
.ord b{display:block;font:800 15px var(--head)}.ord small{display:block;color:var(--label);margin:2px 0 6px}
.oa{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.lnk404{margin-top:8px;font-size:14px}.lnk404 a{color:#DDE3F2}
.ckb{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:560px;margin-left:auto;background:#fff;border-radius:22px;box-shadow:0 20px 60px rgba(14,24,56,.3);padding:20px;display:grid;gap:12px}
.ckb h4{font:800 17px var(--head);margin:0}.ckb p{font-size:14px;color:var(--soft)}
.ckb .row{display:flex;gap:8px;flex-wrap:wrap}
.ckb .tg{display:grid;gap:8px}.ckb .tg label{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--mist);border-radius:12px;padding:10px 12px;font:700 13.5px var(--head)}
.ckb .tg small{display:block;font:500 12.5px var(--body);color:var(--soft)}
@media (max-width:900px){.lg{grid-template-columns:1fr}.ltoc{position:static;display:none}.arel{grid-template-columns:1fr}.appf .r2{grid-template-columns:1fr}.ord{grid-template-columns:50px 1fr}.oa{grid-column:1/-1;justify-content:flex-start}}
.wlsteps{display:grid;gap:12px;margin:8px 0 16px}.wlsteps>div{display:grid;grid-template-columns:36px 1fr;gap:12px}.wlsteps b{width:36px;height:36px;border-radius:11px;background:var(--navy);color:var(--gold);display:grid;place-items:center;font:800 14px var(--head)}.wlsteps h4{font:800 16px var(--head);margin:0 0 2px}.wlsteps p{color:var(--soft);font-size:14.5px}.wlsz{background:var(--mist);border-radius:16px;padding:16px 18px;display:grid;gap:6px;justify-items:start;margin-bottom:14px}.wlsz b{font:800 15px var(--head)}

/* ===== 4. images: WebP where supported ===== */
@supports (background-image:image-set(url("a.webp") type("image/webp"))){:root{--bk1:image-set(url(/assets/img/spelling-one-cover.webp) type("image/webp"),url(/assets/img/spelling-one-cover.jpg) type("image/jpeg"));--bk2:image-set(url(/assets/img/spelling-two-cover.webp) type("image/webp"),url(/assets/img/spelling-two-cover.jpg) type("image/jpeg"));--bk3:image-set(url(/assets/img/spelling-three-cover.webp) type("image/webp"),url(/assets/img/spelling-three-cover.jpg) type("image/jpeg"));--bk4:image-set(url(/assets/img/spelling-four-cover.webp) type("image/webp"),url(/assets/img/spelling-four-cover.jpg) type("image/jpeg"));--bk5:image-set(url(/assets/img/spelling-five-cover.webp) type("image/webp"),url(/assets/img/spelling-five-cover.jpg) type("image/jpeg"));--bk6:image-set(url(/assets/img/spelling-six-cover.webp) type("image/webp"),url(/assets/img/spelling-six-cover.jpg) type("image/jpeg"));--bk7:image-set(url(/assets/img/spelling-seven-cover.webp) type("image/webp"),url(/assets/img/spelling-seven-cover.jpg) type("image/jpeg"));--bkp5:image-set(url(/assets/img/spelling-five-photo.webp) type("image/webp"),url(/assets/img/spelling-five-photo.jpg) type("image/jpeg"));--cn1:image-set(url(/assets/img/centre-teacher-group.webp) type("image/webp"),url(/assets/img/centre-teacher-group.jpg) type("image/jpeg"));--cn2:image-set(url(/assets/img/centre-students-working.webp) type("image/webp"),url(/assets/img/centre-students-working.jpg) type("image/jpeg"));--im1:image-set(url(/assets/img/family-mum-son.webp) type("image/webp"),url(/assets/img/family-mum-son.jpg) type("image/jpeg"));--im10:image-set(url(/assets/img/dad-phone-update.webp) type("image/webp"),url(/assets/img/dad-phone-update.jpg) type("image/jpeg"));--im2:image-set(url(/assets/img/learner-girl-waving.webp) type("image/webp"),url(/assets/img/learner-girl-waving.jpg) type("image/jpeg"));--im3:image-set(url(/assets/img/learner-boy-workbook.webp) type("image/webp"),url(/assets/img/learner-boy-workbook.jpg) type("image/jpeg"));--im4:image-set(url(/assets/img/dad-daughter-workbook.webp) type("image/webp"),url(/assets/img/dad-daughter-workbook.jpg) type("image/jpeg"));--im5:image-set(url(/assets/img/family-at-table.webp) type("image/webp"),url(/assets/img/family-at-table.jpg) type("image/jpeg"));--im6:image-set(url(/assets/img/teacher-online.webp) type("image/webp"),url(/assets/img/teacher-online.jpg) type("image/jpeg"));--im7:image-set(url(/assets/img/teen-laptop-homework.webp) type("image/webp"),url(/assets/img/teen-laptop-homework.jpg) type("image/jpeg"));--im8:image-set(url(/assets/img/boy-tablet-sats.webp) type("image/webp"),url(/assets/img/boy-tablet-sats.jpg) type("image/jpeg"));--im9:image-set(url(/assets/img/girl-group-lesson.webp) type("image/webp"),url(/assets/img/girl-group-lesson.jpg) type("image/jpeg"));--imb:image-set(url(/assets/img/mrs-bukky.webp) type("image/webp"),url(/assets/img/mrs-bukky.jpg) type("image/jpeg"));--sa:image-set(url(/assets/img/spelling-audiobook.webp) type("image/webp"),url(/assets/img/spelling-audiobook.jpg) type("image/jpeg"));--sb:image-set(url(/assets/img/spelling-bundle.webp) type("image/webp"),url(/assets/img/spelling-bundle.jpg) type("image/jpeg"));--z1:image-set(url(/assets/img/webcam-learner-girl.webp) type("image/webp"),url(/assets/img/webcam-learner-girl.jpg) type("image/jpeg"));--z2:image-set(url(/assets/img/webcam-learner-boy-writing.webp) type("image/webp"),url(/assets/img/webcam-learner-boy-writing.jpg) type("image/jpeg"));--z3:image-set(url(/assets/img/webcam-learner-boy-kitchen.webp) type("image/webp"),url(/assets/img/webcam-learner-boy-kitchen.jpg) type("image/jpeg"));--zt:image-set(url(/assets/img/webcam-tutor.webp) type("image/webp"),url(/assets/img/webcam-tutor.jpg) type("image/jpeg"))}}

/* ===== 5. site additions ===== */
/* skip link: hidden until it has keyboard focus */
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--navy);color:#fff;font:700 14px/1 var(--head);padding:14px 18px;border-radius:999px;text-decoration:none;transition:top .2s}
.skip:focus{top:16px;outline:2px solid var(--gold);outline-offset:2px}
main:focus{outline:none}
/* the 404's second button, on navy */
.btn.ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
/* focus on dark backgrounds, and on things the prototype's focus rule missed */
summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--royal);outline-offset:3px}
.s-navy a:focus-visible,.hero a:focus-visible,.hero button:focus-visible,.endblock a:focus-visible,.endblock button:focus-visible,.lpbar a:focus-visible{outline-color:var(--gold)}
/* the pill: real links in the dropdown and drawer (the prototype used buttons) */
.pill .ddw{position:relative;display:flex;align-items:center}
.dd a,.drawer a{display:grid;gap:2px;text-decoration:none;cursor:pointer;border-radius:14px;height:auto;white-space:normal}
.dd a{padding:12px 14px}
.dd a:hover,.dd a:focus-visible{background:var(--mist)}
.drawer a{font:700 16px var(--head);color:var(--ink);padding:13px 14px;border-radius:12px}
.drawer a:hover,.drawer a:focus-visible{background:var(--mist)}
.dd[hidden],.drawer[hidden]{display:none}
.pill .dd a,.pill .drawer a{display:grid;height:auto;color:var(--ink)}
.pill .mob[aria-expanded="true"] i b:nth-child(2){opacity:0}
/* the footer's plain buttons (Cookie settings) look like the links next to them */
.legal button{all:unset;cursor:pointer;color:#8E98B3}
.legal button:hover,.legal a:hover{color:#fff}
.legal button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* the 404 links on navy */
.lnk404 a:hover{color:#fff}
/* cookie banner: the toggles are real checkboxes with a visible size */
.ckb input[type=checkbox]{width:20px;height:20px;accent-color:var(--royal);flex:none}
.ckb a{color:var(--deep-blue)}
.ckb[hidden],.ckb [hidden]{display:none}
/* images */
img{max-width:100%;height:auto}
picture{display:block;overflow:hidden}
picture>img{display:block;width:100%}
picture>img.cover{height:100%;object-fit:cover}
.lpbar img{width:auto}
/* utilities */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tc{text-align:center}
/* the prototype hid the pill's button on phones by accident (its "Start" label is
   there for phones), so bring it back below 980px */
@media (max-width:980px){.pill .side a.cta{display:inline-flex}
  /* the long label stays readable to screen readers and search engines, just not shown */
  .pill .cta .full{display:inline;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* photos the prototype drew as CSS backgrounds are real images here (for alt text,
   WebP and phone sizes): the box keeps its shape and the photo fills it */
.bgimg{position:relative;overflow:hidden}
.bgimg>picture{position:absolute;inset:0;border-radius:inherit}
.bgimg>picture>img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.bgimg.contain>picture>img{object-fit:contain}
.bgimg.contain{background-color:#F2F5FC}
.photo.bgimg,.cphoto.bgimg{display:block}
.bphoto .img.bgimg>picture{border-radius:28px}
/* Study Zone plan prices (signed off by JP) */
.plan2 .price{font:800 34px/1 var(--head);letter-spacing:-.03em;color:var(--ink)}
.plan2 .price small{font:600 14px var(--body);letter-spacing:0;color:var(--soft)}
.plan2 .trial{font:700 13.5px var(--head);color:var(--ok);margin-top:-6px}
.plan2.feature .price{color:#fff}
.plan2.feature .price small{color:#C9D1E4}
.plan2.feature .trial{color:var(--gold)}
/* cover links behave like the prototype's cover buttons */
a.cov{text-decoration:none}
/* Prompt 9: each book with its buy link, and "Or buy the download" under it once the book is on Amazon. */
.covw{display:grid;gap:6px;align-content:start;justify-items:center;scroll-margin-top:96px}.covw .cov{width:100%}
.covdl{font-size:12.5px;color:var(--soft);text-decoration:underline;text-underline-offset:2px}.covdl:hover{color:var(--navy)}
a.cov:focus-visible i{outline:2px solid var(--royal);outline-offset:3px}
.fan i:focus-within,.fan i:hover{transform:rotate(0) translateY(-14px)}
@media (prefers-reduced-motion:reduce){.fan i,.fan i:hover,.cov i,.cov:hover i{transition:none;transform:rotate(var(--r,0)) translateY(var(--y,0))}.cov:hover i{transform:none}}
/* ---- Prompt 3: forms, the Edit list and article cards ---- */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[id]{scroll-margin-top:24px}
.ferr{font:600 13px var(--body);color:var(--gap)}
.ferr[hidden]{display:none}
.input[aria-invalid=true]{border-color:var(--gap)}
.news .nconsent{flex-basis:100%;font-size:13px;color:#C9D1E4}
.news .ferr{flex-basis:100%;color:#FFB4AB}
.news .nthanks{display:grid;gap:8px}
.news .nthanks[hidden]{display:none}
.news form[hidden]{display:none}
/* the whole card opens the article; the link is the headline */
.post{position:relative}
.post h3 a{color:inherit;text-decoration:none}
.post h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.post:focus-within{outline:2px solid var(--royal);outline-offset:3px}
.post h3 a:focus-visible{outline:none}
.post .chip{position:relative;z-index:2}
.post[hidden]{display:none}
.filters button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.aby .av.bgimg{display:block;flex:none}
.apic.bgimg>picture{border-radius:26px}
/* careers form */
fieldset.chks{border:0;padding:0;margin:0;min-width:0}
fieldset.chks legend.lbl{float:left;width:100%;margin-bottom:6px;font:700 12.5px var(--head);color:var(--label)}
.appf .upl{cursor:pointer}
.appf .upl:focus-within span:first-of-type,.appf .upl.over span:first-of-type{border-color:var(--royal);background:var(--mist)}
.appf .upl [data-cv-name]{display:block;margin-top:6px;color:var(--ink)}
.appf .tick a{color:var(--deep-blue)}
.appf[hidden],[data-apply-thanks][hidden],[data-contact-thanks][hidden],form[hidden]{display:none}
.slots[hidden]{display:none}
.slots button[aria-pressed=true]{outline:none}
/* anything marked hidden stays hidden, whatever display a class gives it */
[hidden]{display:none!important}
.appf fieldset.chks{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.appf fieldset.chks legend.lbl{float:none;padding:0}
/* ---- Prompt 4a: the free check ---- */
.opts.c2{grid-template-columns:1fr 1fr}
.flow .btn,.flow .opts button,.flow .slots button,.flow .avday button,.result .btn{min-height:44px}
.flow .r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.flow .r3{display:grid;grid-template-columns:140px 1fr 1fr;gap:12px}
/* Each field keeps its own height when an error beside it wraps */
.flow .r2,.flow .r3{align-items:start}
/* The free check section clips its decoration without becoming scrollable, so moving to a field never slides the form under the header */
.fcsec{overflow:clip}
#flow{scroll-margin-top:110px}
.flow .fhint{margin:0}
.lf{display:grid;gap:12px}
.flow .field .input{min-height:48px;height:50px}
.flow textarea.input{min-height:110px}
.flow button[disabled]{opacity:.5;cursor:not-allowed}
.flow [data-answer].sel{border-color:var(--deep-blue);background:var(--sel)}
.result .price b{font:800 28px var(--head);color:var(--ink)}
@media (max-width:560px){.flow .r3{grid-template-columns:1fr}.flow .r3>:first-child{max-width:160px}.flow .r2,.opts.c2,.opts.c3{grid-template-columns:1fr}.avail{grid-template-columns:repeat(2,1fr)}}
.rtop .eyebrow{color:var(--gold)}

/* ---------- The diagnostic (assets/js/check-ui.js), as the signed-off GCSE Maths Free Check ---------- */
.dq{--sec:#1B7A43;--sec-bg:#DDF1E5;--par:#8A5A0B;--par-bg:#FBEBC8;--gapc:#A3322A;--gap-bg:#F8DCD8;--asm:#3F6F55;--asm-bg:#EEF6F1;--ny:#7A8299;--ny-bg:#EEF0F5;--mist-deep:#E8EEFA;max-width:860px;margin:0 auto;display:grid;gap:18px;position:relative;z-index:1}
.dq-qbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--navy);color:#fff;border-radius:18px;padding:12px 18px;font:700 13px var(--head)}
.dq-qbar .dq-pr{flex:1;min-width:120px;height:6px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}.dq-qbar .dq-pr i{display:block;height:100%;background:var(--gold);transition:width .3s}
.dq-sect{font:800 12px var(--head);text-transform:uppercase;letter-spacing:.1em;color:var(--gold)}
.dq-qcard,.dq-card{background:#fff;border-radius:24px;box-shadow:var(--lift);padding:26px;display:grid;gap:18px}
.dq-card{gap:14px}.dq-card h3{font-size:20px}
.dq-qtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dq-qn{font:800 14px var(--head);color:var(--label)}.dq-mk{font:700 13px var(--head);color:var(--label);white-space:nowrap}
.dq-qtext{font:600 19px/1.6 var(--body);letter-spacing:0;color:var(--ink);margin:0}
.dq-qtext:focus{outline:none}
.dq-fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 3px;line-height:1.15;font-size:.92em}
.dq-fr>span{display:block;padding:0 4px;min-width:14px;text-align:center}
.dq-fr>span:first-child{border-bottom:2px solid currentColor;padding-bottom:1px}.dq-fr>span:last-child{padding-top:1px}
.dq-cv{display:inline-flex;align-items:center;vertical-align:middle;margin:0 3px}.dq-cv>span{display:flex;flex-direction:column;align-items:center;border-left:2px solid currentColor;border-right:2px solid currentColor;border-radius:9px;padding:0 7px;line-height:1.2;font-size:.95em}
.dq-tw{overflow-x:auto}
table.dq-dt{border-collapse:collapse;font-size:15.5px;min-width:260px}
table.dq-dt td,table.dq-dt th{border:1.5px solid var(--line);padding:8px 14px;text-align:center}
table.dq-dt th{background:var(--mist);font:700 14px var(--head)}
.dq-fig{max-width:460px}
.dq-opts{display:grid;gap:10px}
.dq-opt{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:center;text-align:left;background:var(--mist);border:0;border-radius:14px;padding:14px 16px;cursor:pointer;color:var(--ink);font:600 16.5px var(--body);min-height:52px}
.dq-opt i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px #B8C3DC;background:#fff}
.dq-opt.on{background:var(--sel);box-shadow:inset 0 0 0 2px var(--deep-blue)}.dq-opt.on i{box-shadow:inset 0 0 0 6px var(--deep-blue)}
.dq-mtools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dq-mtools button{border:0;border-radius:10px;min-width:44px;height:44px;padding:0 10px;background:var(--mist);color:var(--ink);font:700 16px var(--body);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dq-mtools button:hover{background:var(--sel)}
.dq-ico-fr{display:inline-flex;flex-direction:column;align-items:center;line-height:1}.dq-ico-fr i{display:block;width:12px;height:9px;border:1.5px solid currentColor;border-radius:2px}.dq-ico-fr b{display:block;width:16px;height:2px;background:currentColor;margin:2px 0}
.dq-sep{width:1px;height:26px;background:var(--line);margin:0 4px}
.dq-mtools .dq-calcb{margin-left:auto;background:var(--navy);color:#fff;font:700 13.5px var(--head);padding:0 16px}
.dq-mtools .dq-calcb:hover{background:var(--navy)}
.dq-nocalc{margin-left:auto;font:700 12.5px var(--head);color:var(--par);background:var(--par-bg);padding:10px 12px;border-radius:10px}
.dq-fields{display:grid;gap:10px}
.dq-fline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dq-fline label{font:700 17px var(--body)}
.dq-mbox{flex:1;min-width:200px;background:#fff;color:var(--ink);border:2px solid var(--line);border-radius:14px;min-height:58px;padding:11px 16px;font:600 21px/1.6 var(--body);outline:none;cursor:text;word-break:break-word}
.dq-mbox:focus{border-color:var(--royal);box-shadow:0 0 0 3px rgba(44,95,208,.15)}
.dq-mbox:empty::before{content:attr(data-ph);color:#9AA3B8;font-weight:500;font-size:17px}
.dq-mbox .dq-fr>span,.dq-mbox .dq-sup,.dq-mbox .dq-rt>span{outline:none}
.dq-mbox .dq-fr>span:empty,.dq-mbox .dq-sup:empty,.dq-mbox .dq-rt>span:empty{display:inline-block;min-width:22px;min-height:22px;background:var(--sel);border-radius:5px}
.dq-mbox .dq-fr>span:first-child:empty{border-bottom:2px solid var(--ink)}
.dq-sup{display:inline-block;vertical-align:.7em;font-size:.68em;min-width:10px;padding:0 2px}
.dq-rt{display:inline-flex;align-items:stretch;margin:0 2px}.dq-rt::before{content:"√";margin-right:1px}.dq-rt>span{border-top:2px solid currentColor;padding:0 3px}
.dq-qfoot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.dq-skip{border:0;background:none;color:var(--label);font:700 14px var(--head);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:10px 4px;min-height:44px}
.dq-hint{font-size:13.5px;color:var(--label)}
.dq-calc{position:fixed;right:20px;bottom:20px;width:300px;background:#fff;border-radius:22px;box-shadow:0 20px 60px rgba(14,24,56,.28);padding:14px;display:grid;gap:10px;z-index:60}
.dq-ch{display:flex;justify-content:space-between;align-items:center;font:800 13px var(--head);color:var(--label)}
.dq-ch button{border:0;background:var(--mist);border-radius:999px;width:44px;height:44px;cursor:pointer;font:700 14px var(--head)}
.dq-scr{background:var(--mist);border-radius:12px;padding:10px 12px;text-align:right;display:grid;gap:2px;min-height:64px}
.dq-scr small{color:var(--label);font-size:13px;min-height:18px;word-break:break-all}.dq-scr b{font:800 24px var(--head);word-break:break-all}
.dq-keys{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.dq-keys button{border:0;border-radius:10px;height:44px;background:var(--mist);font:700 15px var(--body);cursor:pointer;color:var(--ink)}
.dq-keys button.op{background:var(--sel);color:var(--deep-blue)}.dq-keys button.eq{background:var(--navy);color:#fff}.dq-keys button.cl{background:#F8DCD8;color:#A3322A}
/* the result */
.rsum{color:#C9D1E4;max-width:620px}
.dq-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.dq-stats div{background:rgba(255,255,255,.08);border-radius:12px;padding:8px 12px}.dq-stats b{display:block;font:800 18px var(--head);color:#fff}.dq-stats small{font-size:11.5px;color:#B9C2D6}
.nextstep{background:var(--mist);border-radius:18px;padding:16px 18px;display:grid;gap:6px}.nextstep b{font-family:var(--head)}
.dq-res{margin-top:22px}
.dq-bars{display:grid;gap:9px}
.dq-sr{display:grid;grid-template-columns:190px 1fr 74px;gap:12px;align-items:center;font-size:14.5px}
.dq-sr b{font-family:var(--head)}.dq-tr{height:12px;border-radius:999px;background:var(--mist-deep);position:relative;overflow:hidden}.dq-tr i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#1F45A8,#553BA0);border-radius:999px}
.dq-gv{font:800 14px var(--head);text-align:right}
.dq-plan{display:grid;gap:8px}
.dq-pl{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;background:var(--mist);border-radius:12px;padding:10px 12px}
.dq-w{font:800 11px var(--head);color:var(--label);text-transform:uppercase}.dq-pl b{font:700 14.5px var(--head)}.dq-pl small{display:block;color:var(--soft);font-size:12.5px}
.dq-chip{display:inline-block;font:700 11px var(--head);padding:4px 9px;border-radius:999px;white-space:nowrap}
.dq-chip.g{background:var(--gap-bg);color:var(--gapc)}.dq-chip.p{background:var(--par-bg);color:var(--par)}.dq-chip.s{background:var(--sec-bg);color:var(--sec)}.dq-chip.a{background:var(--asm-bg);color:var(--asm)}.dq-chip.n{background:var(--ny-bg);color:var(--ny)}
.dq-key{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--soft)}.dq-key span{display:inline-flex;align-items:center;gap:6px}.dq-key i{width:14px;height:14px;border-radius:4px;display:inline-block}
.dq-key i.s{background:var(--sec-bg)}.dq-key i.p{background:var(--par-bg)}.dq-key i.g{background:var(--gap-bg)}.dq-key i.a{background:var(--asm-bg);box-shadow:inset 0 0 0 1px #CFE4D8}.dq-key i.n{background:var(--ny-bg)}
.dq-map{overflow-x:auto}
.dq-mt{display:grid;gap:6px}
.dq-hd{font:800 11.5px var(--head);color:var(--label);text-align:center}.dq-rl{font:800 12.5px var(--head);padding:6px 4px}
.dq-cell{display:flex;flex-direction:column;gap:4px}
.dq-tp{border:0;border-radius:7px;padding:5px 6px;font:700 10.5px/1.25 var(--head);text-align:left;cursor:pointer;min-height:32px}
.dq-tp.s{background:var(--sec-bg);color:var(--sec)}.dq-tp.p{background:var(--par-bg);color:var(--par)}.dq-tp.g{background:var(--gap-bg);color:var(--gapc)}.dq-tp.a{background:var(--asm-bg);color:var(--asm);box-shadow:inset 0 0 0 1px #CFE4D8}.dq-tp.n{background:var(--ny-bg);color:var(--ny)}
.dq-tpd{background:var(--mist);border-radius:14px;padding:14px 16px;display:grid;gap:6px}.dq-tpd ul{margin:0;padding-left:18px;color:var(--soft);font-size:14px}
@media (max-width:720px){.dq-sr{grid-template-columns:110px 1fr 64px}.dq-calc{left:12px;right:12px;width:auto;bottom:12px}.dq-mtools .dq-calcb,.dq-nocalc{margin-left:0}.dq-qcard,.dq-card{padding:20px}.dq-pl{grid-template-columns:52px 1fr}.dq-pl .dq-chip{grid-column:2;justify-self:start}}

/* ---------- ad landing pages (/go/gcse/, /go/sats/) ---------- */
body.lp{position:relative}
.lpsteps h3{font:800 17px var(--head);margin:0 0 4px;letter-spacing:-.02em}
.btn.full{display:flex;width:100%;justify-content:center}
.lpfoot button{all:unset;cursor:pointer;color:#DDE3F2}
.lpfoot button:focus-visible,.lpfoot a:focus-visible,.lpsticky a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Study Zone welcome (Prompt 7): the purchase flow's confirmation screen */
.szdone{display:grid;gap:14px;justify-items:center;text-align:center;max-width:560px;margin:10px auto 40px}
.szdone .sztick{width:72px;height:72px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center}
.szdone .sztick svg{width:36px;height:36px}
.szdone .btns{display:flex;flex-wrap:wrap;gap:10px}
/* Study Zone plans: Monthly or Yearly (Prompt 7), from the signed-off purchase flow's switch */
.sztog{display:inline-flex;background:var(--mist);border-radius:999px;padding:4px;margin:14px auto 0;gap:2px}
.sztog[hidden]{display:none}
.sztog button{border:0;background:none;color:var(--soft);font:700 13px var(--head);padding:8px 16px;border-radius:999px;cursor:pointer;min-height:36px}
.sztog button.on{background:var(--navy);color:#fff}
.plan2[hidden]{display:none}
@media (min-width:901px){.plans.two{grid-template-columns:repeat(2,1fr);max-width:780px;margin-inline:auto}}
/* Study Zone sign-up (Prompt 7): the purchase flow's "Create your account" */
.szjoin{max-width:560px}
.szbars{display:flex;gap:6px;justify-content:center}
.szbars i{width:34px;height:5px;border-radius:999px;background:var(--line)}
.szbars i.d{background:var(--deep-blue)}
.szsubj{display:flex;flex-wrap:wrap;gap:6px}
.szsubj span{font:700 12.5px var(--head);padding:7px 11px;border-radius:999px;background:var(--sel);color:var(--deep-blue)}
.szjoin .lab{font:700 13px var(--head);color:var(--ink)}
.szjoin .sztick{display:flex;gap:8px;align-items:flex-start}
.szjoin .sztick a{text-decoration:underline}
.szjoin .err{color:var(--gap);margin:0}
@media (max-width:560px){.szjoin .r2{grid-template-columns:1fr}}

/* enrolment (Prompt 6b final): enrolment-after-call.html, scoped to .enr */
.enr{--h:var(--head);--b:var(--body);--sky:#E6ECFA;--blue:#1F45A8;--vio:#7A4FD0;--okc:#1B7A43;--okb:#E3F3EA;--amb:#8A5A00;--ambb:#FBEFD4;--gld:#E8B04A;--ln:#DCE3F2;--lab:#5E6884;--sft:#4F5872;--ok:var(--okc);--label:var(--lab);--soft:var(--sft);max-width:640px;margin:0 auto;position:relative;z-index:1}
.enr .ecard{background:#fff;border-radius:24px;box-shadow:0 20px 50px rgba(14,24,56,.10);padding:clamp(18px,4vw,30px);display:grid;gap:16px}
.enr .esteps{display:flex;gap:6px;flex-wrap:wrap}.enr .esteps span{font:700 12.5px var(--h);padding:6px 11px;border-radius:999px;background:var(--sky);color:var(--lab)}.enr .esteps span.on{background:var(--navy);color:#fff}.enr .esteps span.d{background:var(--okb);color:var(--okc)}
.enr .eb2{font:800 11.5px var(--h);letter-spacing:.18em;color:var(--blue)}
.enr h2{font:800 clamp(24px,3.4vw,30px)/1.2 var(--h);margin:0;letter-spacing:-.02em;color:var(--ink)}.enr .sub{margin:0;color:var(--sft)}
.enr label{display:grid;gap:6px;font:700 13.5px var(--h);color:var(--ink)}
.enr input,.enr select,.enr textarea{font:500 15px var(--b);padding:12px 14px;border-radius:12px;border:1px solid var(--ln);background:#fff;color:var(--ink);width:100%;min-height:48px}
.enr .child{display:flex;gap:12px;align-items:center;background:var(--sky);border-radius:16px;padding:12px 14px}.enr .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--vio));color:#fff;display:grid;place-items:center;font:800 15px var(--h);flex:none}.enr .child b{font:800 15px var(--h)}.enr .child small{display:block;color:var(--sft);font-size:13px}
.enr .eprog{display:flex;gap:8px;flex-wrap:wrap}.enr .eprog button,.enr .eopt{appearance:none;border:1px solid var(--ln);background:#fff;border-radius:14px;padding:14px 16px;text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.enr .eprog button[aria-pressed=true],.enr .eopt[aria-pressed=true]{border:2px solid var(--blue);background:#F5F8FF}
.enr .eplans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.enr .eopt b{display:block;font:800 16px var(--h)}.enr .eopt small{display:block;color:var(--sft);font-size:13px}.enr .eopt .pr{font:800 18px var(--h);margin-top:6px}
.enr .times{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.enr .note{border-radius:14px;padding:12px 14px;font-size:14px}.enr .note.ok{background:var(--okb);color:var(--okc)}.enr .note.am{background:var(--ambb);color:var(--amb)}.enr .note b{font-family:var(--h)}
.enr .note.am .eopt{color:var(--ink)}
.enr .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.enr .bt{appearance:none;border:0;background:var(--navy);color:#fff;font:800 15px var(--h);padding:13px 22px;border-radius:999px;cursor:pointer;min-height:44px;text-decoration:none;display:inline-flex;align-items:center}.enr .bt.g{background:var(--gld);color:var(--navy)}.enr .bt.o{background:#fff;color:var(--ink);border:1px solid var(--ln)}
.enr .bt[disabled]{opacity:.4;cursor:not-allowed}
.enr .etwo{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width:640px){.enr .etwo{grid-template-columns:1fr}}
.enr .sum{display:grid;border:1px solid var(--ln);border-radius:14px;overflow:hidden}.enr .sum div{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--ln);font-size:14px}.enr .sum div:first-child{border-top:0}.enr .sum span{color:var(--lab)}.enr .sum b{font-family:var(--h);text-align:right}
.enr .stripe{border:1px dashed var(--ln);border-radius:14px;padding:12px 14px;color:var(--sft);font-size:13.5px}
.enr .done{text-align:center;display:grid;gap:10px;justify-items:center;padding:10px 0}.enr .etick{width:60px;height:60px;border-radius:50%;background:var(--okb);color:var(--okc);display:grid;place-items:center;font:800 28px var(--h)}
.enr .etick.spin{background:conic-gradient(var(--okc) 0 25%,var(--okb) 0);animation:enrspin 1s linear infinite;-webkit-mask:radial-gradient(circle,transparent 55%,#000 56%);mask:radial-gradient(circle,transparent 55%,#000 56%)}
@keyframes enrspin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.enr .etick.spin{animation:none}}
.enr .err{color:#B42318;font:600 13.5px var(--b);margin:0}
.enr .termsbox{border:1px solid var(--ln);border-radius:14px;padding:14px 16px;height:240px;overflow:auto;background:#F2F5FC;color:var(--sft);font-size:14px;display:grid;gap:10px;align-content:start}
.enr .termsbox h2{font:800 16px var(--h)}.enr .termsbox .eyebrow{font:800 11px var(--h);letter-spacing:.14em;color:var(--blue)}.enr .termsbox ul{margin:0;padding-left:18px}.enr .termsbox .lshort{background:#fff;border-radius:12px;padding:10px 12px}