/* ==========================================================================================================================
   Polish layer: motion, depth, colour and small UX details. Loaded after site.css and before the page's own styles, so a page can still
   override anything here. Everything is subtle on purpose and degrades to the plain page: no rule hides content, every animation uses only
   transform and opacity, and all motion is off for visitors who ask for reduced motion. The reasoning and the reference sites are in DESIGN.md.
   ========================================================================================================================== */
:root{
  /* motion: two speeds and two curves. UI feedback is quick and calm; entrances start fast and land softly. */
  --t-fast:.16s;--t-med:.28s;--t-slow:.7s;
  --ease-ui:cubic-bezier(.25,.46,.45,.94);
  --ease-out:cubic-bezier(.22,1,.36,1);
  /* warm ink at fixed transparencies: one ladder for hairlines, hovers and muted text on any background */
  --ink-a4:rgba(26,22,18,.04);--ink-a8:rgba(26,22,18,.08);--ink-a12:rgba(26,22,18,.12);--ink-a24:rgba(26,22,18,.24);--ink-a48:rgba(26,22,18,.48);--ink-a64:rgba(26,22,18,.64);
  /* depth: three layered, warm-tinted shadows */
  --sh-1:0 1px 1px rgba(26,22,18,.04),0 2px 6px -2px rgba(26,22,18,.08);
  --sh-2:0 1px 2px rgba(26,22,18,.05),0 10px 28px -12px rgba(26,22,18,.22);
  --sh-3:0 2px 4px rgba(26,22,18,.05),0 28px 56px -24px rgba(26,22,18,.34);
  --ok:#17753A;--bad:#B3261E;
  /* the two newer game categories, so menus and cards on any page can use their colours */
  --c-english:#C4366B;--c-english-soft:#FBE3EC;--c-english-ink:#8E2250;--c-knowledge:#1F7A9B;--c-knowledge-soft:#DCEFF6;--c-knowledge-ink:#145670;
}
[data-c=english]{--c:var(--c-english);--c-soft:var(--c-english-soft);--c-ink:var(--c-english-ink)}
[data-c=knowledge]{--c:var(--c-knowledge);--c-soft:var(--c-knowledge-soft);--c-ink:var(--c-knowledge-ink)}

/* Playful classroom character: inked edges, paper dots and bright, friendly accents. */
:root{--comic-ink:#24203a;--comic-yellow:#ffd55a;--comic-pink:#ff8c9b;--comic-blue:#82d8ee;--comic-lime:#b8e986}
.w-card,.aud,.home2-path,.gcard,.home2-math-card,.home2-code-card{border:2px solid var(--comic-ink);box-shadow:4px 4px 0 var(--comic-ink)!important}
.w-card,.aud,.gcard{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,border-color .18s ease}
@media(hover:hover){.w-card:hover,.aud:hover,.gcard:hover{transform:translate(-2px,-2px) rotate(-.25deg);box-shadow:7px 7px 0 var(--comic-ink)!important}}
.home2-hero{background-color:#fff9e9;background-image:radial-gradient(rgba(36,32,58,.08) 1px,transparent 1px);background-size:17px 17px}
.home2-kicker{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:2px solid var(--comic-ink);border-radius:999px;background:#fff;box-shadow:3px 3px 0 var(--comic-ink);font-weight:800}
.home2-dot{background:var(--comic-pink);box-shadow:0 0 0 4px #ffe1e4}
.home2-copy h1 em,.section-head h2 em{color:#c44361;text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--comic-yellow);text-underline-offset:5px}
.home2-math-card{transform:rotate(2deg);border-radius:24px;background:#fffdf8}
.home2-code-card{transform:rotate(-2deg);border-radius:20px}
.home2-float{border:2px solid var(--comic-ink);box-shadow:3px 3px 0 var(--comic-ink);font-weight:800}
.btn{border:2px solid var(--comic-ink)!important;box-shadow:3px 3px 0 var(--comic-ink)!important;font-weight:800}
.btn:hover{box-shadow:5px 5px 0 var(--comic-ink)!important}
.w-pagehead,.play-hero{background-image:radial-gradient(rgba(36,32,58,.065) 1px,transparent 1px);background-size:16px 16px}
.gcard-art{border-bottom:2px solid var(--comic-ink)}
@media(prefers-reduced-motion:reduce){.w-card,.aud,.gcard{transition:none}}

/* ---- type and page basics ---- */
html{scroll-padding-top:96px;accent-color:var(--indigo)}
:where(h1,h2,h3,.eyebrow+h1,.eyebrow+h2){text-wrap:balance}
:where(p,li,figcaption,blockquote,dd){text-wrap:pretty}
:where(.pf-price,.pf-stats b,.w-facts b,.home2-facts b,td,.gs-stat b,.qk-sc){font-variant-numeric:tabular-nums}
.w-prose a:not([class]),.w-faq a,.fine a{text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 38%,transparent);transition:text-decoration-color var(--t-fast),color var(--t-fast)}
.w-prose a:not([class]):hover,.w-faq a:hover,.fine a:hover{text-decoration-color:currentColor}

/* ---- buttons: a quiet tactile edge, a soft lift, a small press ---- */
.btn{transition:transform var(--t-fast) var(--ease-ui),background-color var(--t-fast) var(--ease-ui),border-color var(--t-fast) var(--ease-ui),color var(--t-fast),box-shadow var(--t-med) var(--ease-ui)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn.btn-primary{box-shadow:0 2px 0 color-mix(in srgb,var(--bg) 70%,#000),0 14px 24px -16px color-mix(in srgb,var(--bg) 85%,transparent)}
.btn.btn-primary:hover{transform:translateY(-1px);box-shadow:0 3px 0 color-mix(in srgb,var(--bg) 70%,#000),0 18px 28px -16px color-mix(in srgb,var(--bg) 85%,transparent)}
.btn.btn-primary:active{transform:translateY(2px);box-shadow:0 0 0 color-mix(in srgb,var(--bg) 70%,#000),0 6px 12px -8px color-mix(in srgb,var(--bg) 85%,transparent)}
.btn.btn-ghost:hover{background:var(--ink-a4);border-color:var(--ink-a24)}
.btn.is-loading{pointer-events:none;opacity:.78}
.btn.is-loading::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:pol-spin .7s linear infinite}
@keyframes pol-spin{to{transform:rotate(360deg)}}

/* ---- cards: a soft light that follows the pointer, and an arrow that leans in ---- */
.w-card,.home2-card,.w-problem,.w-toolgrid>a,.qk-skill,.pf-course{position:relative;isolation:isolate;--mx:50%;--my:0%}
.w-card::before,.home2-card::before,.w-problem::before,.w-toolgrid>a::before,.qk-skill::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--t-med) var(--ease-ui);
  background:radial-gradient(380px circle at var(--mx) var(--my),color-mix(in srgb,var(--c,var(--saffron)) 13%,transparent),transparent 62%)}
.w-card .link,.w-problem .link,.home2-card .link,.qk-skill small{transition:transform var(--t-med) var(--ease-out)}
@media (hover:hover){
  .w-card:hover::before,.home2-card:hover::before,.w-problem:hover::before,.w-toolgrid>a:hover::before,.qk-skill:hover::before{opacity:1}
  .w-card:hover .link,.w-problem:hover .link,.home2-card:hover .link{transform:translateX(3px)}
}
.w-card,.w-problem,.home2-card,.w-toolgrid>a{transition-timing-function:var(--ease-out)}

/* ---- header and menus: glass with a hairline, panels that unfold ---- */
.w-top{background:rgba(246,241,232,.78);backdrop-filter:saturate(1.7) blur(16px);-webkit-backdrop-filter:saturate(1.7) blur(16px);border-bottom-color:var(--ink-a8);transition:box-shadow var(--t-med) var(--ease-ui),background-color var(--t-med)}
.w-top.scrolled{background:rgba(246,241,232,.9);box-shadow:0 10px 30px -22px rgba(15,21,51,.5)}
.w-mega-panel{transform:translateY(-8px) scale(.992);transform-origin:50% 0;transition:opacity .18s var(--ease-ui),transform .32s var(--ease-out),visibility 0s linear .18s}
.w-mega-in{box-shadow:var(--sh-3)}
.w-mega-trigger{transition:background-color var(--t-fast) var(--ease-ui),color var(--t-fast)}
.w-mega-panel a{transition:background-color var(--t-fast) var(--ease-ui),transform var(--t-med) var(--ease-out)}

/* ---- forms: a clear focus, honest validation after you have touched a field ---- */
.w-form :is(input:not([type=checkbox]),select,textarea){transition:border-color var(--t-fast) var(--ease-ui),box-shadow var(--t-med) var(--ease-ui),background-color var(--t-fast)}
.w-form :is(input:not([type=checkbox]),select,textarea):hover:not(:focus){border-color:var(--ink-a48)}
.w-form :is(input:not([type=checkbox]),textarea):user-invalid{border-color:var(--bad);box-shadow:0 0 0 3px rgba(179,38,30,.1)}
.w-form :is(input:not([type=checkbox]),textarea):user-valid:not(:placeholder-shown):not(:focus){border-color:color-mix(in srgb,var(--ok) 45%,var(--line-2))}
.w-form label:focus-within>:first-child:not(input,select,textarea){color:var(--indigo)}

/* ---- FAQ and details open gently ---- */
.w-faq details[open]>:not(summary){animation:pol-down var(--t-slow) var(--ease-out) both}
@keyframes pol-down{from{opacity:0;transform:translateY(-6px)}}

/* ---- the WhatsApp button says hello, three times, then stays calm ---- */
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #1FA855;opacity:0;pointer-events:none;animation:pol-ring 2.6s var(--ease-out) 4s 3}
@keyframes pol-ring{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.35,1.6)}}

/* ---- back to top (added by polish.js) ---- */
.to-top{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));z-index:55;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--ink-a12);background:rgba(255,253,249,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);cursor:pointer;box-shadow:var(--sh-2);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity var(--t-med) var(--ease-ui),transform var(--t-med) var(--ease-out),background-color var(--t-fast)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:#fff}.to-top svg{width:18px;height:18px}
@media (max-width:1020px){.to-top{display:none}}

/* ---- the mobile "Let's talk" bar slides up when it appears ---- */
@media (max-width:1020px){.w-mcta:not([hidden]){animation:pol-up .5s var(--ease-out) both}}
@keyframes pol-up{from{opacity:0;transform:translateY(16px)}}

/* ---- games: a gentle arrival, and a small pop for every tile and answer ---- */
.gs{animation:pol-fade .5s var(--ease-ui) both}
@keyframes pol-fade{from{opacity:0}}
.qk-choice:active:not(:disabled),.bs-opt:active:not(:disabled),.kk-opt:active:not(:disabled),.mh-door:active:not(:disabled),.sbd-tile:active:not(:disabled){transform:scale(.97)}
.fq-tile.filled{animation:pol-pop .14s var(--ease-ui)}
@keyframes pol-pop{50%{transform:scale(1.07)}}
.sbd-tile.in,.sb-slot.on{animation:pol-pop .16s var(--ease-ui)}
.qk-fb:not(:empty){animation:pol-down .4s var(--ease-out) both}

/* ---- scroll-driven reveals for section headings, where the browser supports it ---- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .section-head,.w-prose>h2,.pf-sec>h2,.w-band h2{animation:pol-rise linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
  }
}
@keyframes pol-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---- the hero breathes: two slow, soft lights behind the page head ---- */
.home2-hero::before{content:"";position:absolute;left:-12vw;bottom:-24vw;width:48vw;height:48vw;border-radius:50%;background:radial-gradient(circle,rgba(229,138,44,.15),transparent 66%);pointer-events:none;animation:pol-drift 24s ease-in-out infinite alternate}
@keyframes pol-drift{to{transform:translate(8vw,-4vw) scale(1.12)}}

/* ---- smooth page changes (Chromium and Safari; other browsers simply change page) ---- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:pol-vt-out .16s var(--ease-ui) both}
  ::view-transition-new(root){animation:pol-vt-in .34s var(--ease-out) both}
  .w-top{view-transition-name:site-header}
}
@keyframes pol-vt-out{to{opacity:0}}
@keyframes pol-vt-in{from{opacity:0;transform:translateY(6px)}}

/* ---- reduced motion: keep every state, drop the movement ---- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .btn:active,.btn.btn-primary:hover{transform:none}
}
@media print{.to-top,.wa-fab::after,.home2-hero::before{display:none}.section-head,.w-prose>h2,.pf-sec>h2{animation:none}}

/* ---- phones: thumb-sized calls to action, a full last tile, and compact cards so long pages feel shorter ---- */
@media (max-width:560px){
  .hero-cta .btn{width:100%}
  .w-facts{grid-template-columns:1fr 1fr}.w-facts li:last-child:nth-child(odd){grid-column:1/-1}
  .home2-live .w-cards{grid-template-columns:1fr 1fr;gap:10px}.home2-live .w-card{padding:16px;gap:6px}.home2-live .w-card>p:not(.pf-facts){display:none}.home2-live .w-card h3{font-size:19px}.home2-live .w-card .link{font-size:0;margin-top:2px}.home2-live .w-card .link::after{content:"Browse →";font-size:13px}
}

/* ---- touch screens: every target is a comfortable size (the footer links were 23 px tall) ---- */
@media (pointer:coarse){
  .w-ftr-grid>div:not(.ftr-brand){gap:0}.w-ftr-grid>div:not(.ftr-brand) a{display:block;padding:10px 0}
  .ftr-fine a{display:inline-block;padding:8px 2px}
  .pf-country select,.w-form select,.w-form input:not([type=checkbox]){min-height:46px}
  .w-consent input{width:22px;height:22px}
  .w-card .link,.w-problem .link,.home2-card .link{padding-block:6px}
}

/* ---- Header in the style of a learning-platform site: subject-first dropdowns, a plain Log in link and an outlined demo button ---- */
.w-login{display:inline-flex;align-items:center;height:44px;padding:0 6px;font:600 15px var(--sans);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.w-login:hover{color:var(--indigo);text-decoration:underline}
.w-login.is-in{color:var(--indigo)}
.w-top-cta-outline{--bg:#fff;--fg:var(--indigo);--bd:var(--indigo);box-shadow:none;border-width:1.5px}
.w-top-cta-outline:hover{--bg:var(--indigo);--fg:#fff;--bd:var(--indigo)}
.w-mega-panel .mi-t small{display:none}
.w-mega-panel .mc a{padding-block:9px}
.w-drawer-login{margin-bottom:10px;width:100%}
@media (max-width:1320px){.w-top-wa{display:none}}
@media (max-width:1200px){.w-login{display:none}}
.w-ftr-grid{grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}
.study-home .w-ftr-grid{grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.w-ftr-grid,.study-home .w-ftr-grid{grid-template-columns:1fr 1fr 1fr}.w-ftr-grid .ftr-brand{grid-column:1/-1}}
@media (max-width:620px){.w-ftr-grid,.study-home .w-ftr-grid{grid-template-columns:1fr 1fr}}

/* ---------- the floating "Play" button (public/site/playbar.js) ----------
   Bottom left (the WhatsApp button is bottom right). It appears a few seconds after the page loads, never covers content, and can be hidden for the day. */
.pb{position:fixed;left:14px;bottom:14px;z-index:60;opacity:0;transform:translateY(12px);transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out)}
.pb.in{opacity:1;transform:none}
.pb-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 12px;border:2px solid var(--comic-ink)!important;border-radius:99px;background:var(--comic-yellow);color:var(--comic-ink);font:800 14px var(--sans);box-shadow:3px 3px 0 var(--comic-ink);cursor:pointer;transition:transform var(--t-fast) var(--ease-ui),box-shadow var(--t-fast) var(--ease-ui)}
.pb-pill:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--comic-ink)}.pb-pill small{font-weight:800;opacity:.85}
.pb-panel{position:absolute;left:0;bottom:calc(100% + 10px);width:min(330px,calc(100vw - 28px));padding:12px;border:2px solid var(--comic-ink);border-radius:18px;background:#fffdf8;box-shadow:5px 5px 0 var(--comic-ink)}
.pb-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}.pb-head b{font-size:15px}.pb-head small{flex:1;color:var(--mute);font-size:12px}
.pb-x{width:26px;height:26px;border:0;border-radius:50%;background:var(--ink-a8);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}.pb-x:hover{background:var(--ink-a12)}
.pb-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pb-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--paper-2,#f6efe2);color:var(--ink);text-decoration:none}.pb-row:hover{background:var(--comic-yellow)}
.pb-ico{flex:none;font-size:20px}.pb-t{min-width:0}.pb-t b{display:block;font-size:14px;line-height:1.25}.pb-t small{display:block;color:var(--mute);font-size:12px}
.pb-badge{margin-left:auto;padding:2px 8px;border-radius:99px;background:var(--comic-pink);color:var(--comic-ink);font-size:11px;font-style:normal;font-weight:800}
.pb-foot{margin:9px 2px 0;color:var(--mute);font-size:12.5px}.pb-foot a{color:var(--ink);font-weight:700}
body:has(.w-mcta:not([hidden])) .pb{bottom:78px}
@media(max-width:640px){.pb{left:10px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.pb,.pb-pill{transition:none}}
@media print{.pb{display:none}}
.pb-class{margin:6px 2px 0;font-size:12.5px;color:var(--mute)}.pb-class a{color:var(--ink);font-weight:800}

/* Code inside a dark code block keeps the block's background (the cream chip is only for code inside a sentence). */
pre code{background:transparent!important;padding:0;border-radius:0;color:inherit}
/* Phones: the header keeps search, WhatsApp and the menu; "Log in" and "Book a demo class" are in the menu, so the bar never scrolls sideways. */
@media(max-width:560px){.w-top-cta,.w-login{display:none!important}html,body{overflow-x:clip}}
/* The Play button sits clear above the bottom "Find a class" bar and the WhatsApp button, with room to breathe. */
body:has(.w-mcta:not([hidden])) .pb{bottom:calc(92px + env(safe-area-inset-bottom))}
@media(max-width:1020px){.pb{left:12px}.pb-pill{padding:8px 13px 8px 10px}}