/* =====================================================================
   0. FONTS (self-hosted, latin + latin-ext) and metric-matched fallbacks that stop layout shift while they load
   ===================================================================== */
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/caveat-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/caveat-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/caveat-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/caveat-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/nunito-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/nunito-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/nunito-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/nunito-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/nunito-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/nunito-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/patrick-hand-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/patrick-hand-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito Fallback';src:local('Arial');size-adjust:97.8%;ascent-override:103.37%;descent-override:36.09%;line-gap-override:0%}
@font-face{font-family:'Patrick Hand Fallback';src:local('Arial');size-adjust:81.43%;ascent-override:127.97%;descent-override:38.32%;line-gap-override:0%}
@font-face{font-family:'Caveat Fallback';src:local('Arial');size-adjust:76.94%;ascent-override:124.77%;descent-override:38.99%;line-gap-override:0%}

/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */
:root{
  --char-2:#252d2a;
  --chalk:#f5f2e9;      --chalk-dim:#c9d4c9;
  --c-yellow:#ffe27a;   --c-green:#a9f0b9;
  --accent:#ffc83d;     --accent-ink:#2b2200;   /* the one warm CTA colour */
  --paper:#f4f0e4;      --paper-2:#ebe6d6;
  --ink:#25302b;        --link:#1d5a46;
--font-ui:'Nunito','Nunito Fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;  --font-chalk:'Patrick Hand','Patrick Hand Fallback','Caveat','Comic Sans MS',cursive;  --font-head:'Caveat','Caveat Fallback','Patrick Hand',cursive;  --font-math:'Patrick Hand','Patrick Hand Fallback','Cambria Math','STIX Two Math','Times New Roman',serif;  /* type scale: nothing readable goes below --text-sm (14px) */  --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-ui);font-size:1.05rem;line-height:1.6;color:var(--ink);background:var(--paper)}
img,svg{max-width:100%}
a{color:var(--link)}
h1,h2,h3{line-height:1.15;margin:0}
p{margin:0 0 1rem}
.wrap{width:90%;margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.skip{position:absolute;left:.5rem;top:-4rem;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;border-radius:8px;font-weight:800;z-index:100}
.skip:focus{top:.5rem}

/* Visible focus: blue on light backgrounds, yellow on dark ones */
:focus-visible{outline:3px solid #1b6ef3;outline-offset:3px;border-radius:4px}
.dark :focus-visible,.board :focus-visible{outline-color:var(--c-yellow)}

/* Reveal-on-scroll (transform/opacity only, so there is no layout shift) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

/* =====================================================================
   3. BUTTONS
   ===================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.65rem 1.2rem;border-radius:10px;
  border:2px solid transparent;font:800 1rem/1.2 var(--font-ui);cursor:pointer;text-decoration:none;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-chalk{background:transparent;color:var(--chalk);border:2px dashed rgba(245,242,233,.6)}
.btn-chalk:hover{background:rgba(255,255,255,.1)}
.btn-sm{min-height:40px;padding:.45rem .9rem;font-size:.95rem}

/* =====================================================================
   4. HEADER + HERO  (chalkboard)
   Two fonts only here: Patrick Hand (chalk handwriting) for the headline and formulas,
   Nunito (clean sans) for everything else.
   ===================================================================== */
.site-header{position:relative;top:0;z-index:50;color:var(--chalk);
  background:rgba(15,31,25,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(245,242,233,.15)}
.site-header .wrap,.hero .wrap{width:min(1200px,100% - 48px)}      /* 1200px container, 24px side padding */
.nav-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;font:800 1.1rem/1 var(--font-ui);letter-spacing:.01em;color:var(--chalk);text-decoration:none;white-space:nowrap}
.logo{width:30px;height:30px;flex:none}
.nav-links{display:none;list-style:none;margin:0;padding:0;gap:4px}
.nav-links a{display:block;padding:8px 8px;border-radius:8px;color:var(--chalk);text-decoration:none;font-weight:700;font-size:.9rem}
.nav-links a:hover{background:rgba(245,242,233,.1)}
.nav-book{flex:none}
.burger{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid rgba(245,242,233,.35);border-radius:8px;background:transparent;color:var(--chalk);cursor:pointer}
.burger span{display:block;width:20px;height:2px;margin:2.5px 0;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.show-sm{display:none}
@media(max-width:479px){.hide-sm{display:none}.show-sm{display:inline}}
@media(min-width:768px){
  .nav-links{display:flex}
  .burger{display:none}
}
@media(min-width:1024px){.nav-links a{padding:8px 12px;font-size:.95rem}}

/* --- hero: even radial vignette, no light patches --- */
.hero{position:relative;overflow:hidden;min-height:85svh;display:flex;align-items:center;color:var(--chalk);
  padding:clamp(56px,8vh,88px) 0;                                  /* equal top and bottom padding */
  background:radial-gradient(ellipse 85% 100% at 50% 50%,#2b4b3d 0%,#21392f 55%,#14261f 100%)}
.hero-grid{position:relative;z-index:1;display:grid;gap:40px 48px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 32px}
  .hero .hero-art{max-width:none}}   /* illustration fills its column so its height matches the text block */

.hero-eyebrow{margin:0 0 16px;font:700 16px/1.3 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--c-yellow)}
@media(min-width:600px){.hero-eyebrow{font-size:17px}}
.hero h1{font:400 clamp(48px,5vw,72px)/1.15 var(--font-chalk);font-style:normal;text-wrap:balance;text-shadow:0 0 1px rgba(255,255,255,.35)}
.hero h1 em{display:block;width:fit-content;font-style:normal;color:var(--c-yellow);padding-bottom:.12em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7.5C45 3.5 80 10 120 6.5S205 3.5 245 7s40 1 52-1.500' fill='none' stroke='%23ffe27a' stroke-width='3.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat left bottom/100% 12px}
.hero .lede{max-width:560px;margin:20px 0 28px;font:400 19px/1.6 var(--font-ui);color:#e8efe9}

.btn-lg{min-height:56px;padding:16px 32px;font-size:18px}
.btn-cta{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px rgba(0,0,0,.22)}
.btn-cta:hover{background:#ffd966;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.btn-cta:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px rgba(255,200,61,.45)}
.btn-wa{gap:10px;background:transparent;color:#25D366;border:2px solid #25D366}
.btn-wa svg{width:22px;height:22px;flex:none;fill:currentColor}
.btn-wa:hover{background:rgba(37,211,102,0.12);transform:translateY(-2px)}
.btn-wa:focus-visible{outline:3px solid #25D366;outline-offset:3px;box-shadow:0 0 0 7px rgba(37,211,102,.35)}
/* hero buttons: in-place hover/active (no lift) */
.hero-actions .btn-cta,.hero-actions .btn-wa{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.hero-actions .btn-cta:hover{background:#ffd966;transform:none;box-shadow:0 0 22px rgba(255,200,61,.55)}
.hero-actions .btn-wa:hover{background:rgba(37,211,102,.18);border-color:#5ff08e;transform:none}
.hero-actions .btn-cta:active{background:#ffd966;transform:scale(.97);box-shadow:0 0 10px rgba(255,200,61,.3)}
.hero-actions .btn-wa:active{background:rgba(37,211,102,.22);border-color:#5ff08e;transform:scale(.97)}
.nav-book{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.nav-book.btn-cta:hover{background:#ffd966;transform:none;box-shadow:0 0 22px rgba(255,200,61,.55)}
.nav-book.btn-cta:active{background:#ffd966;transform:scale(.97);box-shadow:0 0 10px rgba(255,200,61,.3)}
.hero-actions .btn-cta:focus-visible,.hero-actions .btn-wa:focus-visible{outline-width:3px;outline-style:solid}
@media (prefers-reduced-motion:reduce){
  .hero-actions .btn-cta:active,.hero-actions .btn-wa:active{transform:none}
}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px}

.hero-points{display:flex;flex-wrap:wrap;list-style:none;margin:24px 0 0;padding:0;font:600 15px/1.5 var(--font-ui);color:#d5e0d8}
.hero-points li+li::before{content:"·";margin:0 10px;opacity:.7}
@media(min-width:600px){.hero-points{font-size:16px}}
.trust{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid rgba(245,242,233,.15);font:700 15px/1.4 var(--font-ui);color:#e8efe9}
.trust li::before{content:"✓";margin-right:8px;color:#a9f0b9}

/* chalk-style illustration on the right */
.hero-art{width:100%;max-width:470px;margin-inline:auto}
.hero-art svg{display:block;width:100%;height:auto}
.hero-art text{font-family:var(--font-chalk);font-size:20px;fill:#f5f2e9}
.hero-art .ttl{font:800 22px var(--font-ui);fill:#fff}
.hero-art .lbl{font:italic 600 17px Georgia,serif;fill:#fff}
/* --- illustration animation: quadrants start 0.3s apart and each plays once, ending on the final state (reduced motion shows that state with no animation) --- */
.hero-art .q{--cycle:5s;animation:qIn .7s ease-out both;animation-delay:var(--d)}
.q1{--d:0s}.q2{--d:.3s}.q3{--d:.6s}.q4{--d:.9s}
@keyframes qIn{from{opacity:0}to{opacity:1}}
.hero-art [class^="c-"],.hero-art [class^="s-"],.hero-art [class^="p-"],.hero-art [class^="m-"]{transform-box:fill-box}
.c-curve,.s-curve{stroke-dasharray:1}
.c-curve{animation:draw var(--cycle) ease-in-out 1 both;animation-delay:var(--d)}
.c-area{animation:areaIn var(--cycle) ease-in-out 1 both;animation-delay:var(--d)}
@keyframes draw{0%{stroke-dashoffset:1}50%,100%{stroke-dashoffset:0}}
@keyframes areaIn{0%,50%{opacity:0}80%,100%{opacity:1}}
.p-blockL,.p-blockR,.p-ropeL,.p-ropeR,.p-wheel{animation-duration:3s;animation-timing-function:ease-in-out;animation-iteration-count:1;animation-fill-mode:forwards;animation-delay:var(--d)}
.p-blockL{animation-name:pBlockL}.p-blockR{animation-name:pBlockR}
.p-ropeL{animation-name:pRopeL;transform-origin:50% 0}.p-ropeR{animation-name:pRopeR;transform-origin:50% 0}
.p-wheel{animation-name:pWheel;transform-origin:50% 50%}
@keyframes pBlockL{from{transform:translateY(10px)}to{transform:translateY(0)}}
@keyframes pBlockR{from{transform:translateY(-10px)}to{transform:translateY(0)}}
@keyframes pRopeL{from{transform:scaleY(1.192)}to{transform:scaleY(1)}}
@keyframes pRopeR{from{transform:scaleY(.861)}to{transform:scaleY(1)}}
@keyframes pWheel{from{transform:rotate(25deg)}to{transform:rotate(0)}}
.s-curve{animation:draw var(--cycle) ease-in-out 1 both;animation-delay:var(--d)}
.s-mean{animation:meanIn var(--cycle) ease-in-out 1 both;animation-delay:var(--d)}
.s-tail{animation:sweepIn var(--cycle) ease-in-out var(--d) 1 both}
@keyframes meanIn{0%,50%{opacity:0}65%,100%{opacity:1}}
/* the tail starts at 67.5% of the bell's width, so the reveal starts there and sweeps to the right edge */
@keyframes sweepIn{0%,55%{clip-path:inset(0 32.5% 0 0)}90%,100%{clip-path:inset(0 0 0 0)}}
.m-tri{stroke-dasharray:1;animation:draw var(--cycle) ease-in-out 1 both;animation-delay:var(--d)}
.m-fill{animation:areaIn var(--cycle) ease-in-out 1 both;animation-delay:var(--d)}
.hero-art-col{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
@media(max-width:899px){.hero-art-col{display:none}}  /* single column below 900px: keep the hero short */

/* scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:22px;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin-left:-22px;border-radius:50%;color:rgba(245,242,233,.8);text-decoration:none}
.scroll-cue:hover{color:#fff}
.scroll-cue svg{width:22px;height:22px;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(-3px);opacity:.5}50%{transform:translateY(5px);opacity:1}}

/* thin chalk tray with a piece of chalk and an eraser */
.tray{position:absolute;left:0;right:0;bottom:0;height:10px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#3d362f,#241f1a);border-top:1px solid rgba(245,242,233,.22);box-shadow:0 -3px 10px rgba(0,0,0,.25)}
.tray .wrap{position:relative;height:100%}
.tray-chalk{position:absolute;right:84px;bottom:100%;width:34px;height:8px;border-radius:3px 4px 4px 3px;background:#f5f2e9;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
.tray-eraser{position:absolute;right:0;bottom:100%;width:66px;height:17px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#59605b 0 58%,#b07a43 58%);box-shadow:inset 0 2px 0 rgba(255,255,255,.12)}

/* --- mobile only (under 768px): larger screens are untouched --- */
@media(max-width:767px){
  .logo{display:none}
  /* full-height green menu; sits behind the brand, Book and burger so they stay clickable */
  .burger{align-content:center}   /* grid rows no longer stretch, so the 3 bars stack tight and form a clean X */
  .nav-links.open{display:flex;flex-direction:column;position:absolute;z-index:-1;top:0;left:0;right:0;height:100vh;height:100dvh;
    justify-content:center;align-items:center;gap:8px;padding:72px 24px 24px;background:#1d5a46}
  .nav-links.open a{padding:12px 24px;font-size:1.5rem;text-align:center}

  .hero-copy{text-align:center}
  .hero-eyebrow{font-size:.8125rem;letter-spacing:.1em;line-height:1.5}   /* 13px, bold, uppercase, tracked: wraps instead of shrinking */
  .hero h1{font-size:clamp(1.75rem,8.4vw,2.5rem)}
  .hero h1 em{margin-inline:auto}
  .hero .lede{max-width:none;margin:16px 0 24px;font-size:15px;line-height:1.55}
  .hero-actions{flex-direction:column;flex-wrap:nowrap;gap:12px}
  .hero-actions .btn{width:100%}
  .hero-points{justify-content:center;gap:.25rem 1.1rem;font-size:var(--text-sm)}
  .hero-points li+li::before{content:none}   /* no dot separators when the items wrap onto lines */
  .trust{justify-content:center;text-align:center}
  .tray-chalk{right:auto;left:calc(50% - 59px)}
  .tray-eraser{right:auto;left:calc(50% - 7px)}
}

/* =====================================================================
   5. SUBJECT SECTIONS (whiteboard lessons)
   Every lesson is sized to fit ONE screen. On desktop-size windows the
   section is exactly the visible height (viewport minus the sticky
   header) and the lesson is centred in it, so there is clear space above
   and below. Sizes inside the board scale with the window height.
   On phones/tablets (narrow or short windows) the lesson simply stacks
   and scrolls, because one screen is not enough room there.
   ===================================================================== */
.subject{padding:clamp(1.75rem,4.5vh,3.25rem) 0 24px;background:#e4eee3}   /* same tone as .reviews so the sections flow together */
@media(min-width:900px){.subject{padding-bottom:40px}}
/* Scattered 3D icons around the lessons / testimonials gap: static, behind the content, centre kept clear */
.sec-divider{position:relative;height:0}
.sec-scatter{position:absolute;left:0;right:0;top:-110px;height:290px;overflow:hidden;pointer-events:none;z-index:0}
.sd{position:absolute;left:var(--l,auto);right:var(--rt,auto);top:var(--t);width:var(--s);height:auto;overflow:visible;
  transform:rotate(var(--r,0deg));opacity:var(--o,1);filter:drop-shadow(0 5px 4px rgba(20,38,31,.28))}
.subject .wrap,.reviews .wrap{position:relative;z-index:1}   /* text, board and cards sit above the icons */
@media(max-width:767px){
  .sec-divider{display:none}   /* phones: no decorative icons, larger screens only */
}
/* "Sample Lesson" label sits inline, left of the tabs: tracked small caps over a large handwritten word with a hand-drawn underline */
.tabs-row{position:relative;margin-bottom:clamp(.8rem,2vh,1.4rem)}
.tabs-title{margin:0 0 .5rem;display:flex;flex-direction:column;align-items:flex-start;line-height:1;white-space:nowrap}
.tt-eyebrow{font:800 .78rem/1 var(--font-ui);letter-spacing:.32em;text-transform:uppercase;color:#1d5a46;padding-left:.15em}
.tt-main{position:relative;font:700 clamp(2.2rem,5vw,3.2rem)/.95 var(--font-head);color:var(--link);letter-spacing:.01em;padding-bottom:.2em}
.tt-main::after{content:"";position:absolute;left:0;width:100%;bottom:0;height:.13em;border-radius:99px;
  background:linear-gradient(90deg,#e07a1f,rgba(224,122,31,0));transform:rotate(-1.5deg);transform-origin:left}
/* wide screens: label sits in the top-left corner, tabs stay centred; narrower screens: label above the tabs */
@media(min-width:1200px){.tabs-title{position:absolute;left:0;top:-.2rem;margin:0}}
/* Subject picker: one lesson board is shown at a time */
.lesson-tabs{display:flex;gap:8px;max-width:560px;margin:0 auto}   /* segmented control: four equal tabs, no tray */
.lesson-tab{--y:#e6a100;--g:#2f9a6a;--b:#2a6fe0;--o:#ee8a2a;display:flex;flex:1 1 0;min-width:0;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:.4rem .5rem;
  border:1px solid rgba(47,138,99,.35);border-radius:14px;background:#fff;color:var(--link);font:600 14px/1.2 var(--font-ui);cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background-color .15s ease,color .15s ease,box-shadow .15s ease}
.lesson-tab:hover{transform:translateY(-2px);border-color:#7fc4a5}
.tab-ico{width:28px;height:28px;flex:none}
.tab-ico .fy{fill:var(--y)}.tab-ico .fg{fill:var(--g)}.tab-ico .fb{fill:var(--b)}.tab-ico .fo{fill:var(--o)}
.tab-ico .sy{stroke:var(--y)}.tab-ico .sg{stroke:var(--g)}.tab-ico .sb{stroke:var(--b)}.tab-ico .so{stroke:var(--o)}   /* the drawings use these colours, and currentColor for the trend line */
.lesson-tab[aria-selected="true"]{--y:#ffe27a;--g:#8fe0b4;--b:#9bc2ff;--o:#ffb870;background:var(--link);border-color:var(--link);color:#fff;box-shadow:0 4px 12px rgba(29,90,70,.35)}
@media(max-width:599px){   /* phones: heading row, then one row of four equal tabs */
  .subject .wrap{width:calc(100% - 32px)}   /* 16px side padding */
  .tabs-head{margin-bottom:12px}
  .tabs-title{margin:0}
  .tabs-row{margin-bottom:16px}   /* 16px between the tabs and the lesson card */
  .lesson-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:none}   /* one row of four equal tabs */
  .lesson-tab{flex-direction:column;gap:4px;height:64px;min-height:64px;padding:.3rem 6px;border-radius:12px;font-size:12px;white-space:nowrap}   /* icon on top, label under it; same box when active, so nothing shifts */
  .tab-ico{width:26px;height:26px}
}
/* All lesson boards share one grid cell, so the tallest sets the height for every subject. Inactive ones stay laid out but invisible, so switching tabs never changes the page height. */
.subject .wrap{display:grid;grid-template-columns:minmax(0,1fr)}
.subject .wrap>*{grid-column:1}
.subject .lesson,.subject .lesson[hidden]{grid-row:3;display:flex;flex-direction:column}
.subject .lesson[hidden]{visibility:hidden;pointer-events:none}
.subject .lesson>.frame{flex:1;display:flex;flex-direction:column}
.subject .lesson>.frame>.board{flex:1}
@media(min-width:900px) and (min-height:620px){
  /* --fit (1 or less) is set per lesson by the "fit to one screen" script at the bottom of the page */
  .subject .board{font-size:max(14px,calc(clamp(12px,1.75vh,17px) * var(--fit,1)));padding:calc(clamp(12px,1.6vw,22px) * var(--fit,1))}
  .subject .frame{padding:calc(clamp(8px,1.2vw,12px) * var(--fit,1))}
  .board .btn-sm{min-height:calc(40px * var(--fit,1));font-size:max(var(--text-sm),calc(.95rem * var(--fit,1)));padding:.3em .8em}
}

/* Aluminium whiteboard frame + marker tray */
.frame{position:relative;padding:clamp(8px,1.2vw,12px);border-radius:12px;margin-bottom:24px;
  background:linear-gradient(180deg,#eef1f4,#b7c0c9 50%,#d7dde3);
  box-shadow:0 14px 30px rgba(20,30,40,.25),inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -2px 6px rgba(0,0,0,.2)}
.frame::after{content:"";position:absolute;left:5%;right:5%;bottom:-14px;height:14px;border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#aab4be,#8793a0);box-shadow:0 8px 14px rgba(0,0,0,.2)}
.frame::before{content:"";position:absolute;left:10%;bottom:-7px;width:54px;height:8px;border-radius:4px;background:#1b5fd1;z-index:1;
  box-shadow:70px 0 0 -1px #cf3434,140px 0 0 -1px #1a8f4d,210px 0 0 -1px #1d2733}

/* The whiteboard itself: dark marker ink on white. These variables recolour everything inside it. */
.board{position:relative;border-radius:6px;padding:clamp(12px,1.6vw,22px);font-family:var(--font-chalk);font-size:1.05rem;
  --chalk:#1d2733;--chalk-dim:#4b5968;--c-yellow:#1b5fd1;--c-green:#1a8f4d;
  color:var(--chalk);background:linear-gradient(160deg,#ffffff,#f1f4f7);
  box-shadow:inset 0 0 0 2px #d5dbe1,inset 0 -6px 18px rgba(30,45,60,.08)}
.board>*{position:relative}
.board h3{font:700 1.5em/1.1 var(--font-head);color:var(--c-yellow);margin-bottom:.35em}
.board .btn-chalk{color:var(--chalk);border-color:rgba(29,39,51,.55)}
.board .btn-chalk:hover{background:rgba(29,39,51,.08)}

/* Problem statement + "book" link share one row */
.board-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5em 1.2em;margin-bottom:.6em;padding-bottom:.55em}
.board .pq{flex:1 1 100%;width:100%;min-width:0;box-sizing:border-box;overflow-wrap:break-word;margin:0;padding:.15em 0;
  font-family:var(--font-ui);font-size:clamp(1.15rem,1rem + .6vw,1.45rem);font-weight:700;line-height:1.5;letter-spacing:.005em;
  color:#111a24;max-width:none;text-wrap:pretty;word-spacing:.04em}

.board-grid{display:grid;gap:1.2em}
@media(min-width:900px){.board-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);align-items:start}}

/* Calculus build-up: graph parts fade/draw in one after another, then the worked solution steps appear one by one.
   Everything is visible by default; the .cs-run class (added by the script) plays the sequence. */
.cs-run .cs{animation:csIn var(--t,.5s) ease-out both;animation-delay:var(--d,0s)}
.cs-run .cs-draw{stroke-dasharray:1;animation:csDraw var(--t,1s) ease-in-out both;animation-delay:var(--d,0s)}
.cs-run .cs-grow{transform-box:fill-box;transform-origin:center;animation:csGrow var(--t,.5s) cubic-bezier(.22,.8,.3,1) both;animation-delay:var(--d,0s)}
.cs-run #calc-svg{animation:csShift .8s cubic-bezier(.45,0,.25,1) 5.6s both}   /* build ends at 7 s, wait 2 s, then the whole graph glides left */
.cs-run .sol-eq{animation:csUp .7s ease-out 6.4s both}   /* graph is in place at 10 s; then the integral formula appears */
@keyframes csUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes csShift{from{transform:none}to{transform:translate(var(--mx,0px),var(--my,0px))}}   /* --mx/--my are set by the script */
@keyframes csGrow{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:none}}
#calculus.cs-wait *{animation-play-state:paused!important}   /* id selector: must beat the reduced-motion override rules below */
@keyframes csIn{from{opacity:0}to{opacity:1}}
@keyframes csDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Calculus: the graph is the only content, so it sits centred on the board with no dashed frame */
#calculus .board{display:flex;flex-direction:column}
#calculus .board-grid{display:block;flex:1;position:relative;min-height:22rem}   /* takes all the room under the question */
#calculus .board-grid>div{position:absolute;inset:0;display:grid;place-items:center}
#calculus #calc-svg{border:0;background:transparent;width:85%;height:85%;max-height:none}   /* 85% of the board area, centred both ways */

/* worked solution sits to the right of the moved graph; --sl (its left edge) is set by the script */
#calculus .sol{position:absolute;top:0;bottom:0;left:var(--sl,58%);right:10px;display:flex;flex-direction:column;justify-content:center;overflow:visible}
#calculus .sol-eq{font-size:clamp(1.6rem,3vw,2.8rem);color:var(--chalk);text-align:center}
#calculus .sol-eq .katex-display{margin:0}
#calculus .sol-eq{color:#0d1117}
#calculus .eq-row{display:inline-flex;align-items:center;gap:.14em}
#calculus .eq-int{position:relative;display:inline-block;padding-right:.75em}
#calculus .eq-slot{position:relative;display:inline-block;transition:width 1.05s cubic-bezier(.45,0,.25,1)}
#calculus .eq-v{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;white-space:nowrap;opacity:0;transition:opacity 0.91s ease-in-out}
#calculus .eq-v.on{opacity:1}
#calculus .eq-lim{font-size:.62em}
#calculus .eq-up{position:absolute;left:calc(100% - .55em);top:-.15em}
#calculus .eq-lo{position:absolute;left:calc(100% - 1.1em);bottom:-.15em}
#calculus .eq-slot .hl,#calculus .eq-slot .hlall{transition:color 1.04s ease-in-out}
#calculus .eq-slot.redall .hlall{color:#cf3434}
/* the swappable integral part: the integral (A) is in normal flow so the slot sizes itself to it; the antiderivative (B) sits on top */
#calculus .eq-A{position:relative;top:auto;transform:none}
#calculus .eq-part .eq-v{transition:opacity 0.91s ease-in-out,color 1.04s ease-in-out}
#calculus .eq-part.redpart .eq-v{color:#cf3434}
#calculus .eq-anti .p1,#calculus .eq-anti .p2,#calculus .eq-anti .p4,#calculus .eq-anti .p5,#calculus .eq-anti .p6,#calculus .eq-anti .p7,#calculus .eq-anti .frac-line{opacity:0;transition:opacity 0.78s ease-in-out}
#calculus .eq-sum .q1,#calculus .eq-sum .q2,#calculus .eq-sum .q3,#calculus .eq-sum .q4,#calculus .eq-sum .q5,#calculus .eq-sum .q6,#calculus .eq-sum .q7,#calculus .eq-sum .frac-line{opacity:0;transition:opacity 0.78s ease-in-out}
#calculus .eq-sum.t1 .q1,#calculus .eq-sum.t2 .q2,#calculus .eq-sum.t3 .q3,#calculus .eq-sum.t3 .f1 .frac-line,#calculus .eq-sum.t4 .q4,#calculus .eq-sum.t5 .q5,#calculus .eq-sum.t6 .q6,#calculus .eq-sum.t6 .f2 .frac-line,#calculus .eq-sum.t7 .q7{opacity:1}
#calculus .eq-sum .o1,#calculus .eq-sum .o2,#calculus .eq-sum .n1,#calculus .eq-sum .n2{transition:opacity 0.91s ease-in-out,color 1.04s ease-in-out}
#calculus .eq-sum .n1,#calculus .eq-sum .n2{opacity:0}
#calculus .eq-sum.u1 .o1,#calculus .eq-sum.u2 .o2{opacity:0}
#calculus .eq-sum.u1 .n1,#calculus .eq-sum.u2 .n2{opacity:1;color:#cf3434}
#calculus .eq-sum.w1 .o1,#calculus .eq-sum.w2 .o2{color:#cf3434}
#calculus .eq-sum.k1 .n1,#calculus .eq-sum.k2 .n2{color:inherit}
#calculus .eq-R{position:relative;top:auto;transform:none}
#calculus .sol-eq{transition:color 1.04s ease-in-out}
#calculus .sol-eq.allred{color:#cf3434}
#calculus .eq-all .eq-v{transition:opacity 1.04s ease-in-out}
#calculus .eq-box{position:absolute;overflow:visible;pointer-events:none;max-width:none}   /* the global svg{max-width:100%} rule would shrink it */
#calculus .eq-box-r{stroke:var(--link);stroke-width:2.5;stroke-dasharray:9 7}
/* the mask stroke retraces the frame from the top-left corner: right along the top, down the right side, left along the bottom, up the left side */
#calculus .eq-box-m{stroke-dasharray:var(--L,2000);stroke-dashoffset:var(--L,2000);transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1)}
#calculus .eq-F.box .eq-box-m{stroke-dashoffset:0}
#calculus .eq-label{position:absolute;left:-.8em;bottom:calc(100% + 1em);font:700 .7em/1 var(--font-head);color:var(--link);opacity:0;transition:opacity .35s ease-out}
#calculus .eq-F.lab .eq-label{opacity:1}
/* Big Solve button in the middle of the whiteboard; it starts the animation and fades away while the lesson plays */
.lesson .solve-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;min-width:min(78%,15rem);padding:1.1rem 3.4rem;
  border:0;border-radius:18px;background:linear-gradient(180deg,#2f8a63,#1d5a46);color:#fff;font:800 clamp(1.7rem,3.4vw,2.5rem)/1 var(--font-ui);
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-shadow:0 2px 0 rgba(0,0,0,.18);
  box-shadow:0 7px 0 #123d2e,0 16px 30px rgba(29,90,70,.38),inset 0 2px 0 rgba(255,255,255,.28);
  transition:opacity .45s ease,visibility 0s,transform .18s ease,box-shadow .18s ease;animation:solvePulse 2.4s ease-in-out infinite}
.lesson .solve-btn:hover{transform:translate(-50%,calc(-50% - 3px));box-shadow:0 10px 0 #123d2e,0 20px 34px rgba(29,90,70,.45),inset 0 2px 0 rgba(255,255,255,.28)}
.lesson .solve-btn:active{transform:translate(-50%,calc(-50% + 5px));box-shadow:0 2px 0 #123d2e,0 8px 16px rgba(29,90,70,.35),inset 0 2px 0 rgba(255,255,255,.28)}
.lesson .solve-btn:focus-visible{outline:4px solid #e07a1f;outline-offset:6px}
#calculus:not(.cs-wait) .solve-btn,#physics:not(.p-wait) .solve-btn,#statistics:not(.p-wait) .solve-btn,#math:not(.p-wait) .solve-btn{opacity:0;visibility:hidden;pointer-events:none;animation:none;transition:opacity .45s ease,visibility 0s .45s}
@keyframes solvePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
#calculus .eq-replay{position:absolute;top:calc(100% + 2.6rem);left:50%;transform:translateX(-50%);padding:.6rem 1.6rem;border:0;border-radius:10px;
  background:var(--link);color:#fff;font:800 1rem/1 var(--font-ui);letter-spacing:.02em;cursor:pointer;box-shadow:0 3px 10px rgba(29,90,70,.3);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s ease-in-out,visibility 0s 1s,background-color .2s ease}
#calculus .eq-F.rep .eq-replay{opacity:1;visibility:inherit;pointer-events:inherit;transition:opacity 1s ease-in-out,visibility 0s 0s,background-color .2s ease}
#calculus .eq-replay:hover{background:#17493a}
#calculus .eq-replay:focus-visible{outline:3px solid #e07a1f;outline-offset:3px}
#calculus .eq-anti.s1 .p1,#calculus .eq-anti.s2 .p2,#calculus .eq-anti.s3 .frac-line,#calculus .eq-anti.s4 .p4,#calculus .eq-anti.s5 .p5,#calculus .eq-anti.s6 .p6,#calculus .eq-anti.s7 .p7{opacity:1}
#calculus .eq-slot.red .hl{color:#cf3434}
.calc-eq{font-size:17px;line-height:30px;text-align:right;color:#b45f00;white-space:nowrap}   /* right-aligned so it hugs the curve; same orange as the curve */
.calc-eq .katex{color:#b45f00}

/* ---------- Physics: stage, canvas and parts ---------- */
#physics .board{display:flex;flex-direction:column}
#physics .board-grid{display:block;flex:1;position:relative;min-height:22rem}
#physics .pstage{position:absolute;inset:0;overflow:hidden}
#physics .pscale{position:absolute;left:0;top:0;height:700px;transform:scale(var(--k,1));transform-origin:0 0}
#physics .ppan{position:absolute;left:0;top:0;width:100%;height:100%;transform:translateX(var(--pan,0px));transition:transform 1.5s cubic-bezier(.45,0,.25,1)}
#physics .pf{opacity:0;transition:opacity .8s ease-in-out,color .6s ease}
#physics .pf.on{opacity:1}
#physics .pill{position:absolute;left:0;top:52px;width:850px;height:595px;transform:translateX(var(--ix,0px));transition:opacity 1s ease-in-out,transform 1.4s cubic-bezier(.45,0,.25,1)}
#physics .pill.left{transform:translateX(10px)}
#physics .pill svg{display:block;max-width:none}
#physics .bx{transition:transform 3s ease-in-out}
#physics .rope{transform-box:fill-box;transform-origin:50% 0;transition:transform 3s ease-in-out}
#physics .p-spin{transform-origin:425px 150px;transition:transform 3s ease-in-out}
#physics .moving .bxL{transform:translateY(-55px)}
#physics .moving .bxR{transform:translateY(55px)}
#physics .moving .ropeL{transform:scaleY(.694)}
#physics .moving .ropeR{transform:scaleY(1.306)}
#physics .moving .p-spin{transform:rotate(45deg)}
#physics .pbl{position:absolute;transform:translate(-50%,-50%);font:800 34px/1 var(--font-ui);color:#0d1117;white-space:nowrap}
#physics .pbl.pa{font-size:40px}
#physics .pfbd{position:absolute;top:70px;width:260px;height:420px;transform:translateX(260px);transition:transform 1.3s cubic-bezier(.45,0,.25,1)}
#physics .pfbd.in{transform:none}
#physics .pfbd svg{display:block;max-width:none}
#physics .flab{position:absolute;font-size:36px;color:#0d1117;white-space:nowrap}
#physics .fname{position:absolute;left:130px;top:-16px;transform:translateX(-50%);font:800 30px/1 var(--font-ui);letter-spacing:.04em;color:#0d1117;white-space:nowrap}
#physics .pfinal{position:absolute;font:700 46px/1 var(--font-head);color:var(--link);white-space:nowrap;transition:opacity .35s ease-out}
#physics .parr{color:#0d1117}
#physics .parr.red,#physics .pp.red{color:#cf3434}
#physics .pline{position:absolute;display:flex;align-items:center;gap:.28em;font-size:46px;color:#0d1117;white-space:nowrap;transform:translate(calc(-50% + var(--mx,0px)),var(--my,0px));transition:transform 1.2s cubic-bezier(.45,0,.25,1)}
#physics .pp{opacity:0;transition:opacity .6s ease-in-out,color .6s ease}
#physics .pp.on{opacity:1}
#physics .ptag{margin-left:1em}
#physics .pcol{position:absolute;width:620px;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:38px;color:#0d1117;transition:top .8s ease,transform 1.2s cubic-bezier(.45,0,.25,1)}
#physics .psl{display:inline-flex;align-items:center;gap:.28em;transition:transform 1.1s cubic-bezier(.45,0,.25,1)}
#physics .pfrac{display:inline-flex;flex-direction:column;align-items:center}
#physics .pnum,#physics .pden{display:flex;align-items:center;gap:.28em;padding:0 .3em}
#physics .pbar{display:block;align-self:stretch;height:0;border-top:.06em solid currentColor;margin:.1em 0}
#physics .ptl{margin-right:-.22em}
#physics .ptr{margin-left:-.22em}
#physics .pbox{position:absolute;overflow:visible;pointer-events:none;max-width:none}
#physics .pbox-r{stroke:var(--link);stroke-width:4;stroke-dasharray:14 10}
#physics .pbox-m{stroke-dasharray:var(--L,3000);stroke-dashoffset:var(--L,3000);transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1)}
#physics .pbox.on .pbox-m{stroke-dashoffset:0}
#physics .preplay{position:absolute;transform:translateX(-50%);padding:.6em 1.6em;border:0;border-radius:10px;background:var(--link);color:#fff;
  font:800 calc(16px / var(--k,1))/1 var(--font-ui);letter-spacing:.02em;cursor:pointer;box-shadow:0 3px 10px rgba(29,90,70,.3);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s ease-in-out,visibility 0s 1s,background-color .2s ease}
#physics .preplay.on{opacity:1;visibility:inherit;pointer-events:inherit;transition:opacity 1s ease-in-out,visibility 0s 0s,background-color .2s ease}
#physics .preplay:hover{background:#17493a}
#physics .preplay:focus-visible{outline:3px solid #e07a1f;outline-offset:3px}

/* ---------- Statistics and Math: the worked content waits behind the Solve button ---------- */
#statistics .board-grid,#math .board-grid{position:relative}
#statistics .board{display:flex;flex-direction:column}
#statistics .board-grid{flex:1;min-height:22rem}

/* ---------- Statistics: stage, canvas and parts (same method as the Physics lesson) ---------- */
#statistics .pstage{position:absolute;inset:0;overflow:hidden}
#statistics .pscale{position:absolute;left:0;top:0;height:700px;transform:scale(var(--k,1));transform-origin:0 0}
#statistics .ppan{position:absolute;left:0;top:0;width:100%;height:100%}
#statistics .pf{opacity:0;transition:opacity .8s ease-in-out,color .6s ease}
#statistics .pf.on{opacity:1}
#statistics .sq{position:absolute;transform:translate(calc(-50% + var(--mx,0px) + var(--lx,0px)),calc(-50% + var(--my,0px)));white-space:nowrap;color:#0d1117;transition:opacity .8s ease-in-out,transform 1.3s cubic-bezier(.45,0,.25,1)}
#statistics .leave{opacity:0!important;--lx:-700px}
#statistics .scurve{transform:translateX(var(--lx,0px));transition:transform 1.3s cubic-bezier(.45,0,.25,1),opacity .8s ease-in-out}
#statistics .sline{display:flex;align-items:center;gap:.26em}
#statistics .sline.tight{gap:0}
#statistics .shead{white-space:pre-wrap}
#statistics .shead .sp{display:inline}
#statistics .sfrac{display:inline-flex;flex-direction:column;align-items:center}
#statistics .snum,#statistics .sden{display:flex;align-items:center;gap:.26em;padding:0 .3em}
#statistics .sbar{display:block;align-self:stretch;height:0;border-top:.06em solid currentColor;margin:.1em 0}
#statistics .sp{opacity:0;transition:opacity .5s ease-in-out}
#statistics .sp.on{opacity:1}
#statistics .sleaf{display:inline-block;transition:opacity .8s ease-in-out,transform 1.3s cubic-bezier(.45,0,.25,1)}
#statistics .sleaf.leave{transform:translateX(-700px)}
#statistics .sval{display:inline-block;margin-left:.28em;transition:transform 1.3s cubic-bezier(.45,0,.25,1),opacity .4s ease}
#statistics .pslot{display:inline-grid;margin-left:.28em;vertical-align:baseline;transition:width .9s cubic-bezier(.45,0,.25,1)}
#statistics .pv{grid-area:1/1;justify-self:start;opacity:0;transition:opacity .8s ease-in-out}
#statistics .pv.on{opacity:1}
#statistics .sg{position:absolute;left:0;top:0;width:100%;height:100%;transform:translateX(var(--gx,0px));transition:transform 1.3s cubic-bezier(.45,0,.25,1);pointer-events:none}
#statistics .scurve{position:absolute;top:95px;width:840px;height:510px}
#statistics .scurve svg,#statistics .stab svg{display:block;max-width:none}
#statistics .sdraw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)}
#statistics .sdraw.on{stroke-dashoffset:0}
#statistics .shead{position:absolute;transform:translateX(-50%);font:800 40px/1 var(--font-ui);color:#0d1117;white-space:nowrap}
#statistics .shead2{width:620px;text-align:center;white-space:normal;font-size:34px;line-height:1.15}
#statistics .stab{position:absolute;width:590px;height:358px}
#statistics .stab .sq{font-size:32px}
#statistics .stab .spill{padding:.2em .55em;border-radius:10px;background:#fff;border:3px solid #e07a1f;box-shadow:0 4px 10px rgba(0,0,0,.18)}
#statistics .sfinal{position:absolute;font:700 46px/1 var(--font-head);color:var(--link);white-space:nowrap;transition:opacity .35s ease-out}
#statistics .sbox{position:absolute;overflow:visible;pointer-events:none;max-width:none}
#statistics .sbox-r{stroke:var(--link);stroke-width:4;stroke-dasharray:14 10}
#statistics .sbox-m{stroke-dasharray:var(--L,3000);stroke-dashoffset:var(--L,3000);transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1)}
#statistics .sbox.on .sbox-m{stroke-dashoffset:0}
#statistics .preplay{position:absolute;transform:translateX(-50%);padding:.6em 1.6em;border:0;border-radius:10px;background:var(--link);color:#fff;
  font:800 calc(16px / var(--k,1))/1 var(--font-ui);letter-spacing:.02em;cursor:pointer;box-shadow:0 3px 10px rgba(29,90,70,.3);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s ease-in-out,visibility 0s 1s,background-color .2s ease}
#statistics .preplay.on{opacity:1;visibility:inherit;pointer-events:inherit;transition:opacity 1s ease-in-out,visibility 0s 0s,background-color .2s ease}
#statistics .preplay:hover{background:#17493a}
#statistics .preplay:focus-visible{outline:3px solid #e07a1f;outline-offset:3px}
#statistics .qh{transition:color .6s ease}
.pq-tex .katex{font-size:1.1em}
#statistics .qh.red{color:#cf3434}
/* stand-in typesetting used only when KaTeX could not load */
.tfb{font-family:"Cambria Math","Times New Roman",Times,serif;font-size:1.12em;line-height:1.1}
.tfb sub,.tfb sup{font-size:.68em;line-height:0}
.tfr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle}
.tfr>span:first-child{border-bottom:.06em solid currentColor;padding:0 .2em}

/* ---------- Math: stage, live equation, copies (same method as Physics and Statistics) ---------- */
#math .board{display:flex;flex-direction:column}
#math .board-grid{flex:1;position:relative;min-height:22rem}
#math .pstage{position:absolute;inset:0;overflow:hidden}
#math .pscale{position:absolute;left:0;top:0;height:700px;transform:scale(var(--k,1));transform-origin:0 0}
#math .ppan{position:absolute;left:0;top:0;width:100%;height:100%}
#math .pf{opacity:0;transition:opacity .8s ease-in-out,color .6s ease}
#math .pf.on{opacity:1}
#math .meq{position:absolute;transform:translate(-50%,-50%);font-size:84px;color:#0d1117;white-space:nowrap;
  transition:opacity .8s ease-in-out,left 1.3s cubic-bezier(.45,0,.25,1),top 1.3s cubic-bezier(.45,0,.25,1)}
#math .mall{position:relative;display:inline-block}
#math .mslot{position:relative;display:inline-block}
#math .mv{position:absolute;left:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:.26em;white-space:nowrap;opacity:0}   /* a new value simply replaces the old one: no fade, no sliding */
#math .mv.on{opacity:1}
#math .mslot .hl,#math .mslot .hl2,#math .mplus{transition:color .7s ease-in-out}
#math .mslot.red .hl{color:#cf3434}
#math .mslot.red2 .hl2{color:#cf3434}
#math .mall.redall .mplus,#math .mall.redall .hl{color:#cf3434}
#math .mlab{position:absolute;left:50%;transform:translateX(-50%);text-align:center;bottom:calc(100% + 40px);width:max-content;max-width:1300px;white-space:nowrap;
  font:700 36px/1.1 var(--font-ui);color:#cf3434;opacity:0;transition:opacity .6s ease}
#math .mlab.on{opacity:1}
#math .mfinal{position:absolute;font:700 46px/1 var(--font-head);color:var(--link);white-space:nowrap;transition:opacity .35s ease-out}
#math .mbox{position:absolute;overflow:visible;pointer-events:none;max-width:none}
#math .mbox-r{stroke:var(--link);stroke-width:4;stroke-dasharray:14 10}
#math .mbox-m{stroke-dasharray:var(--L,3000);stroke-dashoffset:var(--L,3000);transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1)}
#math .mbox.on .mbox-m{stroke-dashoffset:0}
#math .preplay{position:absolute;transform:translateX(-50%);padding:.6em 1.6em;border:0;border-radius:10px;background:var(--link);color:#fff;
  font:800 calc(16px / var(--k,1))/1 var(--font-ui);letter-spacing:.02em;cursor:pointer;box-shadow:0 3px 10px rgba(29,90,70,.3);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s ease-in-out,visibility 0s 1s,background-color .2s ease}
#math .preplay.on{opacity:1;visibility:inherit;pointer-events:inherit;transition:opacity 1s ease-in-out,visibility 0s 0s,background-color .2s ease}
#math .preplay:hover{background:#17493a}
#math .preplay:focus-visible{outline:3px solid #e07a1f;outline-offset:3px}
.pq-tex{transition:color .6s ease}
#math .pq-tex.red{color:#cf3434}

/* Left column: the drawing */
.viz-svg{display:block;width:100%;height:auto;background:#fff;border-radius:8px;border:1px dashed #b8c2cc}
.viz-svg text{font-family:var(--font-chalk);fill:var(--chalk);font-size:13px}
.viz-svg .dim{fill:#5d6b7a}
.viz-svg .hl{fill:#b45f00}
.readout{margin:.6em 0 0;padding:.45em .8em;border-left:4px solid var(--c-yellow);background:rgba(29,39,51,.05);border-radius:0 8px 8px 0;line-height:1.4}
@media(min-width:900px) and (min-height:620px){
  .viz-svg{max-height:calc(40vh * var(--fit,1))}
  #physics .viz-svg{max-height:calc(22vh * var(--fit,1))}
}

/* Right column: the worked solution */
.steps-col,.sys{container:steps/inline-size}   /* containment keeps the fit-to-screen measuring cheap; only .sys is queried */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;columns:3 15em;column-gap:1em}
.steps li{counter-increment:s;position:relative;display:grid;gap:.15em 1em;break-inside:avoid;padding:.35em .5em .35em 2.2em;margin-bottom:.4em;border-left:3px dashed rgba(29,39,51,.25);border-radius:6px}
.steps li::before{content:counter(s);position:absolute;left:.5em;top:.45em;width:1.4em;height:1.4em;border:2px solid var(--c-yellow);border-radius:50%;color:var(--c-yellow);display:grid;place-items:center;font-size:.85em;line-height:1}
.sys .steps{columns:1}
@container steps (min-width:520px){.sys .steps li{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}}
.line{font-family:var(--font-math);font-size:1.15em;line-height:1.4;overflow-wrap:anywhere}
.why{font-size:.9em;color:var(--chalk-dim);line-height:1.3}
mark{background:rgba(255,214,0,.5);color:inherit;border-radius:4px;padding:0 .15em}

/* Physics shows two systems side by side: drawing on top, solution underneath */
.sys-grid{display:grid;gap:1.4em}
@media(min-width:900px){.sys-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.sys .viz-svg{margin-bottom:.6em}

/* Math typography helpers */
.fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;line-height:1.15;margin:0 .15em;font-size:.92em}
.fr>span:first-child{border-bottom:2px solid currentColor;padding:0 .25em}
.fr>span:nth-child(3){padding:0 .25em}
.op{margin:0 .25em}
sup,sub{line-height:0;font-size:.7em}
.int{display:inline-flex;align-items:center;vertical-align:middle}
.isym{font-size:1.9em;line-height:1;transform:scaleY(1.05)}
.lims{display:inline-flex;flex-direction:column;justify-content:space-between;font-size:.62em;line-height:1;height:2.4em;margin:0 .2em 0 .05em;vertical-align:middle}
.ph-tag{display:inline-block;min-width:1.8em;padding:0 .35em;margin-right:.2em;border:2px solid var(--c-yellow);border-radius:6px;color:var(--c-yellow);font:700 1em/1.3 var(--font-chalk);text-align:center}

/* Math lesson specifics */
.pemdas{list-style:none;margin:0 0 .6em;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.4em}
@media(min-width:520px){.pemdas{grid-template-columns:repeat(4,1fr)}}
.pemdas li{display:flex;flex-direction:column;align-items:center;text-align:center;padding:.3em .3em;border:2px dashed rgba(29,39,51,.3);border-radius:10px;font-size:.9em;line-height:1.2}
.pemdas b{font:700 1.7em/1 var(--font-head);color:var(--c-yellow)}
.live-expr{font-family:var(--font-math);font-size:1.7em;min-height:2.4em;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;padding:.3em .6em;background:rgba(29,39,51,.05);border-radius:8px;border:1px dashed #b8c2cc;margin-bottom:.6em;text-align:center}

/* =====================================================================
   6. TESTIMONIALS: "graded papers"
   Each testimonial is a sheet of ruled notebook paper taped to the page, with a red margin line.
   All text sits on the ruled lines (every row is
   1.7em tall), and the whole section is one screen tall on desktop.
   ===================================================================== */
.reviews{padding:24px 0 clamp(1.75rem,4.5vh,3.25rem);background:#e4eee3}   /* same tone as .subject so the sections flow together */
@media(min-width:1200px) and (min-height:620px){
  .reviews{padding-top:40px;font-size:max(16.5px,calc(clamp(13px,1.9vh,17px) * var(--fit,1)))}
}
/* Testimonials heading: a single large, centered title (no subtitle) */
.reviews .sec-head{text-align:center;margin-bottom:clamp(2rem,5vh,3.2rem)}
.reviews .sec-head .tag{margin:0;font:700 calc(clamp(2.2rem,6vw,3.4rem) * var(--fit,1))/1.1 var(--font-head);letter-spacing:.01em;color:var(--link)}
.notes{list-style:none;margin:0;padding:0;display:grid;gap:1.9em 1.4em;grid-template-columns:repeat(auto-fit,minmax(min(100%,17em),1fr))}
@media(min-width:1200px){.notes{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* mobile only: one swipeable row, one card at a time (no arrow buttons) */
@media(max-width:767px){
  .notes{display:flex;gap:1.2em;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
    padding:1em .2em 1.6em}                       /* room for the tape strip and card shadows */
  .notes::-webkit-scrollbar{display:none}
  .notes>li{flex:0 0 82%;scroll-snap-align:center;display:flex}
  .notes>li>.note{width:100%}
}
.note{--tilt:0deg;position:relative;height:100%;margin:0;padding:1.7em 1em 1.7em 3em;border-radius:3px;
  font:1.08em/1.7 var(--font-chalk);color:var(--ink);background-color:#fff;
  background-image:
    linear-gradient(90deg,transparent 2.4em,#e9a3a3 2.4em,#e9a3a3 calc(2.4em + 1.5px),transparent calc(2.4em + 1.5px)),
    repeating-linear-gradient(180deg,transparent 0 calc(1.7em - 1px),#cfe1f3 calc(1.7em - 1px) 1.7em);
  box-shadow:0 1px 1px rgba(30,45,60,.1),0 14px 22px -10px rgba(30,45,60,.4);
  transform:rotate(var(--tilt));transition:transform .25s ease,box-shadow .25s ease}
.notes li:nth-child(odd) .note{--tilt:-.7deg}
.notes li:nth-child(even) .note{--tilt:.6deg}
.note:hover{transform:rotate(0) translateY(-4px);box-shadow:0 1px 1px rgba(30,45,60,.1),0 20px 28px -12px rgba(30,45,60,.45)}
.note::before{content:"";position:absolute;top:-.65em;left:50%;width:4.6em;height:1.4em;margin-left:-2.3em;transform:rotate(-2.5deg);
  background:rgba(255,214,0,.55);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.note blockquote{margin:0;line-height:1.7}
.note em{font-style:normal;background:linear-gradient(transparent 62%,rgba(255,214,0,.6) 62%)}
.note figcaption{display:block;text-align:right}
.who{display:block;font:800 .9em/1.889 var(--font-ui);color:var(--ink)}   /* name line: 1.7em tall, so it sits on the ruled lines */
.role{display:block;font:600 .8em/2.125 var(--font-ui);color:var(--ink);opacity:.78}   /* role: smaller, same 1.7em line height; wraps onto more lines without overflowing */
.note{overflow-wrap:break-word}

/* =====================================================================
   7. BOOKING + FOOTER
   ===================================================================== */
.book{padding:clamp(3rem,7vw,5.5rem) 0;color:var(--chalk);
  background:radial-gradient(ellipse 85% 100% at 50% 50%,#2b4b3d 0%,#21392f 55%,#14261f 100%)}   /* same as the hero */
.book-grid{display:grid;gap:2rem}
.book-grid>*{min-width:0}   /* let the columns shrink on narrow phones instead of widening the page */
.contact-line{overflow-wrap:anywhere}
@media(min-width:900px){.book-grid{grid-template-columns:1fr 1.1fr;align-items:stretch}
  .book-info{display:flex;flex-direction:column}
}
.eyebrow{display:inline-block;font:800 1.15rem/1 var(--font-ui);text-transform:uppercase;letter-spacing:.12em;color:var(--c-yellow);margin-bottom:.7rem}
.book h2{font:800 clamp(2rem,5vw,3rem)/1.1 var(--font-ui);margin-bottom:.8rem}
.book p{color:var(--chalk-dim)}
.price-box{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;margin:1.2rem 0 0;padding:1rem 1.3rem;border-radius:14px;background:var(--accent);color:var(--accent-ink)}
.price-amt{font:800 2.4rem/1 var(--font-ui)}
.price-amt abbr{font-size:1.1rem;text-decoration:none;letter-spacing:.04em}
.price-per{font:700 1.1rem/1.3 var(--font-ui)}
.contact-card{margin-top:1.6rem;padding:1.2rem 1.3rem;border-radius:14px;background:transparent}
.contact-card h3{font:800 1.3rem/1.2 var(--font-ui);margin-bottom:.7rem}
.contact-line{display:flex;align-items:center;gap:.55rem;margin-bottom:.5rem;color:var(--chalk);font-weight:700}
.chat-btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.9rem}
.btn-brand{flex:1 1 11rem;min-height:56px;gap:.7rem;padding:.8rem 1.4rem;font-size:1.15rem;border-color:transparent}
.btn-brand svg{width:26px;height:26px;flex:none;fill:currentColor}
.btn-brand{transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease}
.btn-brand:hover{transform:none}
.btn-brand:active{transform:scale(.97)}
.btn-wa-solid{background:#25D366;color:#062b14}
.btn-wa-solid:hover{background:#4fe587;box-shadow:0 0 22px rgba(37,211,102,.55)}
.btn-wa-solid:active{box-shadow:0 0 10px rgba(37,211,102,.3)}
.btn-vb-solid{background:#665CAC;color:#fff}
.btn-vb-solid:hover{background:#7f75c6;box-shadow:0 0 22px rgba(127,117,198,.55)}
.btn-vb-solid:active{box-shadow:0 0 10px rgba(127,117,198,.3)}
.btn-brand:focus-visible{outline:3px solid #fff;outline-offset:3px}
.form-card{background:transparent;border:2px solid rgba(245,242,233,.25);border-radius:14px;padding:clamp(1.1rem,3vw,1.8rem)}
/* Booking section: centered when the two columns stack (under 900px) */
.field{margin-bottom:1rem}
.field label{display:block;font-weight:800;margin-bottom:.3rem}
.field input,.field textarea{width:100%;min-height:46px;padding:.6rem .8rem;border-radius:8px;border:2px solid #b4c2b9;background:transparent;color:var(--chalk);font:1rem var(--font-ui)}
.field input::placeholder,.field textarea::placeholder{color:#c9d4c9;opacity:1}
.btn-block{width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-card .btn-cta{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.form-card .btn-cta:hover{background:#ffd966;transform:none;box-shadow:0 0 22px rgba(255,200,61,.55)}
.form-card .btn-cta:active{background:#ffd966;transform:scale(.97);box-shadow:0 0 10px rgba(255,200,61,.3)}
.captcha-modal{border:0;border-radius:14px;padding:1.4rem;background:var(--paper);color:var(--ink);max-width:min(92vw,360px);text-align:center}
.captcha-modal::backdrop{background:rgba(0,0,0,.6)}
.captcha-modal h3{margin:0 0 1rem}
#captcha-widget{min-height:65px;display:flex;justify-content:center}
.captcha-msg{margin:.6rem 0 0;font-size:var(--text-sm);color:#9b1c1c}
.captcha-cancel{margin-top:.8rem}
.form-note{margin:.8rem 0 0;font-size:.95rem;color:var(--chalk-dim)}
/* Booking section on small screens (placed after the base rules so they win) */
@media(max-width:899px){
  .book-info{text-align:center}
  .price-box{justify-content:center;text-align:center}
  .contact-line{justify-content:center}
  .chat-btns{justify-content:center}
  .form-note{text-align:center}
}
@media(max-width:767px){
  .book .eyebrow{font-size:.95rem}
  .book-info>p{font-size:.92rem}
  .field label{font-size:.9rem}
  .form-note{font-size:var(--text-sm)}
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline-offset:1px}
.form-card{display:flex;flex-direction:column;justify-content:center}
/* decorative illustrations: a wrapper that is a direct child of .book; bases sit on the section's bottom line, above the footer */
.book{position:relative;--art-h:78px;padding-bottom:calc(var(--art-h) + 1.5rem)}
.book-scene{position:absolute;left:50%;bottom:0;width:90%;transform:translateX(-50%);display:flex;justify-content:space-between;align-items:flex-end;margin:0;padding:0;border-bottom:2px solid rgba(255,255,255,.15);pointer-events:none}   /* the border is the shelf line */
.book-scene .cluster{display:flex;align-items:flex-end;gap:14px}
.book-scene svg{display:block;flex:none;width:auto;margin:0;padding:0;opacity:.85;filter:saturate(.8)}   /* softer colours so they blend with the board */
.book-art{height:72px}.ill-lamp{height:68px}.ill-plant{height:60px}.ill-laptop{height:56px}.ill-calc{height:60px}.globe-art{height:68px}
/* middle group: a casual, uneven scatter (percentage margins, a few touching, a few tilted); wide screens only */
.book-scene .cluster.middle{flex:1 1 0;min-width:0;gap:0;padding:0 clamp(16px,3vw,48px)}
.book-scene .mid-micro{height:76px}
.book-scene .mid-clock{height:52px;margin-left:-6px;transform:rotate(-5deg);transform-origin:50% 100%}
.book-scene .mid-stack{height:64px;margin-left:8%}
.book-scene .mid-cup{height:60px;margin-left:-4px;transform:rotate(4deg);transform-origin:50% 100%}
.book-scene .mid-trophy{height:72px;margin-left:14%;transform:rotate(6deg);transform-origin:50% 100%}
/* tight group of three (notebooks, mug, cactus) in the gap before the laptop; only when the row is wide enough */
.book-scene .mid-tight{display:none;align-items:flex-end;margin:0 auto}
.book-scene .mid-notes{height:48px}
.book-scene .mid-mug{height:48px;margin-left:-2px;transform:rotate(-3deg);transform-origin:50% 100%}
.book-scene .mid-cactus{height:62px;margin-left:6px}
@media(min-width:1320px){.book-scene .mid-tight{display:flex}}
@media(max-width:1099px){.book-scene .cluster.middle{display:none}}
@media(max-width:767px){   /* phones: left cluster only; the plant moves to the right edge, bookshelf, books and lamp stay grouped on the left */
  .book-scene .cluster.right{display:none}
  .book-scene .cluster.left{flex:1}
  .book-scene .ill-plant{margin-left:auto;margin-right:20px}   /* 20px in from the right corner, base still on the shelf line */
}
.thanks{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.4rem;color:var(--chalk)}
.thanks[hidden]{display:none}
.thanks:focus{outline:none}
.thanks-ico{width:120px;height:120px;margin-bottom:.8rem}
.thanks h3{font:700 2.2rem/1.15 var(--font-head);color:var(--c-green);margin-bottom:.5rem}
.thanks p{max-width:26rem;margin:0}
.site-footer{background:#111513;color:var(--chalk-dim);padding:1.8rem 0;font-size:.95rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;gap:.6rem 2rem}
.site-footer a{color:var(--chalk)}
.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   8. REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :not(.lesson):not(.lesson *),:not(.lesson):not(.lesson *)::before,:not(.lesson):not(.lesson *)::after{animation:none!important;transition:none!important}   /* page effects stay off; the lessons' fades and moves are the lesson itself */   /* the hero illustration shows its final state, unanimated */
  /* ...except the calculus graph build-up, which is a short, deliberate teaching animation and always plays */
  .cs-run .cs{animation:csIn var(--t,.5s) ease-out both!important;animation-delay:var(--d,0s)!important}
  .cs-run .cs-draw{animation:csDraw var(--t,1s) ease-in-out both!important;animation-delay:var(--d,0s)!important}
  .cs-run .cs-grow{animation:csGrow var(--t,.5s) cubic-bezier(.22,.8,.3,1) both!important;animation-delay:var(--d,0s)!important}
  .cs-run #calc-svg{animation:csShift .8s cubic-bezier(.45,0,.25,1) 5.6s both!important}
  .cs-run .sol-eq{animation:csUp .7s ease-out 6.4s both!important}
  .js .reveal{opacity:1;transform:none}
}

/* =====================================================================
   PHONE LAYOUT for the sample lessons (viewport up to 767px). Nothing below applies on tablets, laptops or desktops.
   ===================================================================== */
@media(max-width:767px){
  .subject{overflow-x:clip}
  .subject .lesson[hidden]{display:none}                    /* only the open lesson takes room, so its board is as tall as its content */
  .subject .board-grid{min-height:0!important;flex:none!important}   /* height comes from the script (canvas height x scale) */
  .subject .pstage{overflow:hidden}
  .subject .board-grid{transition:height .6s ease}
  /* the problem question: 20% smaller than the desktop size */
  .board .pq{font-size:calc(clamp(1.15rem,1rem + .6vw,1.45rem) * .8);text-align:center}
  /* the Solve button sits right under the question instead of the middle of the board */
  .lesson .solve-btn{top:14px;transform:translate(-50%,0);min-width:0;width:8.6rem;padding:.55rem 1rem;border-radius:12px;font-size:1.15rem;letter-spacing:.05em;
    box-shadow:0 4px 0 #123d2e,0 8px 16px rgba(29,90,70,.3),inset 0 1px 0 rgba(255,255,255,.28)}
  .lesson .solve-btn:hover{transform:translate(-50%,-2px)}
  .lesson .solve-btn:active{transform:translate(-50%,2px);box-shadow:0 1px 0 #123d2e,0 4px 8px rgba(29,90,70,.3)}
  /* Calculus: before Solve only the button shows, so the board is just tall enough for it */
  #calculus.cs-wait #calc-svg,#calculus.cs-wait .sol{display:none}
  #calculus.cs-wait .board-grid{height:86px!important}
  /* Calculus: graph on top, the equation under it (no glide to the left) */
  #calculus .board-grid{height:auto!important}
  #calculus .board-grid>div{position:static;display:block}
  #calculus #calc-svg{position:static;width:100%;height:auto;max-height:none;margin:0 auto}
  .cs-run #calc-svg{animation:none!important}
  #calculus .sol{position:static;left:auto;right:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;padding:56px 0 70px;overflow:visible}
  #calculus .sol-eq{font-size:16px}
  #calculus .eq-label{font-size:.95em;bottom:calc(100% + 12px)}
  /* Physics */
  #physics .pill,#physics .pill.left{top:12px;transform:translateX(var(--ix,0px)) scale(.42)!important;transform-origin:0 0}
  #physics .pbl{font-size:44px}
  #physics .pbl.pa{font-size:54px}
  #physics .pfbd,#physics .pfbd.in{transform:scale(.62)!important;transform-origin:0 0}
  #physics .flab{font-size:30px}
  #physics .fname{font-size:30px}
  #physics .pline{font-size:21px}
  #physics .pcol{width:380px;font-size:21px}
  #physics .pfinal{font-size:27px}
  #physics .pbox-r{stroke-width:3}
  /* Statistics */
  #statistics .shead{font-size:20px}
  #statistics .shead2{width:340px;font-size:17px}
  #statistics .sfinal{font-size:26px}
  #statistics .sbox-r{stroke-width:3}
  /* Math */
  #math .meq{font-size:29px}
  #math .mlab{font-size:20px;max-width:340px;white-space:normal;bottom:calc(100% + 24px)}
  #math .mfinal{font-size:27px}
}

/* =====================================================================
   9. MORE SUBJECTS: button + bulletin-board modal
   ===================================================================== */
.tabs-head{display:flex;justify-content:space-between;align-items:center}   /* heading row: "Sample Lesson" left, the board button right */
.more-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex:none;min-height:44px;padding:.5rem 1.25rem .5rem 1rem;border:0;border-radius:999px;
  background:var(--accent);color:#163d30;font:800 clamp(var(--text-sm),2.4vw,1.05rem)/1.2 var(--font-ui);cursor:pointer;
  transform:rotate(-2deg);box-shadow:0 4px 10px rgba(20,40,30,.28),0 1px 2px rgba(0,0,0,.2);
  animation:moreWiggle 4s ease-in-out infinite;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.more-btn:hover{background:#ffd966;transform:translateY(-2px) rotate(0deg);box-shadow:0 10px 20px rgba(20,40,30,.38),0 2px 4px rgba(0,0,0,.2);animation:none}
.more-btn:active{transform:translateY(0) rotate(0deg) scale(.97);box-shadow:0 3px 8px rgba(20,40,30,.3)}
.more-pin{width:22px;height:22px;flex:none}
@keyframes moreWiggle{0%,30%,100%{transform:rotate(-2deg)}6%{transform:rotate(-7deg)}12%{transform:rotate(3deg)}18%{transform:rotate(-5deg)}24%{transform:rotate(0deg)}}   /* a short wiggle, then still until the 4 s mark */
@media(prefers-reduced-motion:reduce){.more-btn{animation:none}}
@media(min-width:1200px){.more-btn{position:absolute;right:0;top:5px}}   /* right side of the subject row */
@media(max-width:599px){   /* phones: icon only, compact rounded square on the heading row */
  .more-btn{width:40px;height:40px;min-height:40px;padding:0;border-radius:12px}
  .more-label{display:none}
}

.board-modal{width:min(94vw,900px);max-width:none;max-height:none;margin:auto;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.board-modal::backdrop{background:rgba(8,16,12,.74);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.board-modal[open]{animation:bbIn .25s ease-out}
@keyframes bbIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.board-modal .bb-frame{position:relative;padding:clamp(10px,1.8vw,16px);border-radius:14px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 2px,transparent 2px 9px),linear-gradient(135deg,#9a6633,#b17b42 45%,#7d5026);
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.35)}
.bb-close{position:absolute;z-index:5;top:-14px;right:-10px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid #1d2733;border-radius:50%;background:var(--paper);color:#1d2733;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.4);transition:background-color .2s ease,transform .2s ease}
.bb-close svg{width:20px;height:20px}
.bb-close:hover{background:#fff;transform:scale(1.06)}
.bb-close:focus-visible{outline:3px solid var(--c-yellow);outline-offset:3px}
.bb-cork{max-height:calc(88vh - 40px);overflow:auto;overscroll-behavior:contain;padding:1.9rem clamp(1rem,3vw,2.2rem) 2.2rem;border-radius:6px;
  background-color:#c4955a;
  background-image:radial-gradient(circle at 20% 30%,rgba(110,68,26,.4) 0 1.2px,transparent 1.8px),radial-gradient(circle at 70% 60%,rgba(255,232,185,.4) 0 1px,transparent 1.6px),radial-gradient(circle at 42% 82%,rgba(84,50,18,.32) 0 1.6px,transparent 2.2px),radial-gradient(circle at 86% 14%,rgba(255,236,196,.34) 0 1.2px,transparent 1.9px),radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.18),transparent 60%);
  background-size:23px 23px,17px 17px,31px 31px,13px 13px,100% 100%;
  box-shadow:inset 0 0 0 2px rgba(60,35,12,.35),inset 0 4px 14px rgba(40,22,6,.45)}

/* the pin (a colourful thumbtack) shared by the title strip and every card */
.bb-title::before,.bb-card::before{content:"";position:absolute;z-index:2;top:-9px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 8%,transparent 9%),radial-gradient(circle at 36% 32%,transparent 0 32%,rgba(0,0,0,.3) 100%),var(--pin,#d23c3c);
  box-shadow:0 3px 3px rgba(0,0,0,.4)}
.bb-title::after,.bb-card::after{content:"";position:absolute;z-index:1;top:7px;left:calc(50% + 3px);width:9px;height:4px;border-radius:50%;background:rgba(0,0,0,.28);filter:blur(1px)}

.bb-title{--pin:#d23c3c;position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto 2rem;padding:.4rem 1.7rem .3rem;border-radius:3px;
  background:#fffdf6;color:var(--link);font:700 clamp(1.9rem,5vw,2.7rem)/1.1 var(--font-head);letter-spacing:.01em;transform:rotate(-1.5deg);
  box-shadow:0 1px 1px rgba(0,0,0,.15),0 9px 14px -5px rgba(0,0,0,.5)}
.bb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem .9rem}
@media(min-width:700px){.bb-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.5rem}}
.bb-card{--tilt:0deg;position:relative;display:grid;place-items:center;min-height:6.4rem;padding:2.4rem .8rem .9rem;border-radius:3px;text-align:center;overflow-wrap:anywhere;
  color:var(--ink);font:400 clamp(1.15rem,3.6vw,1.45rem)/1.2 var(--font-chalk);
  background:linear-gradient(#e9a3a3,#e9a3a3) 0 2rem/100% 1.5px no-repeat,repeating-linear-gradient(180deg,transparent 0 22px,#d5e5f4 22px 23px) 0 2.2rem/100% calc(100% - 2.2rem) no-repeat,#fffdf6;
  box-shadow:0 1px 1px rgba(0,0,0,.15),0 9px 14px -5px rgba(0,0,0,.5);
  transform:rotate(var(--tilt));transition:transform .2s ease,box-shadow .2s ease}
.bb-card:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 1px 1px rgba(0,0,0,.15),0 14px 18px -6px rgba(0,0,0,.55)}
.bb-card:nth-child(6n+1){--pin:#d23c3c;--tilt:-2.5deg}
.bb-card:nth-child(6n+2){--pin:#2a6fe0;--tilt:1.8deg}
.bb-card:nth-child(6n+3){--pin:#2f9a6a;--tilt:-1deg}
.bb-card:nth-child(6n+4){--pin:#f0c230;--tilt:3deg}
.bb-card:nth-child(6n+5){--pin:#7a6ed0;--tilt:-3.4deg}
.bb-card:nth-child(6n+6){--pin:#ee8a2a;--tilt:1.2deg}
@media(max-width:699px){.bb-close{top:-12px;right:-6px}.bb-cork{max-height:calc(86vh - 30px);padding-top:1.7rem}}
/* phones (2 columns): an odd last card is centred under the pair instead of sitting alone on the left */
@media(max-width:699px){.bb-grid .bb-card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - .45rem)}}
/* large screens: flex so the 3 cards of the second row are centred; every card keeps the 4-column width */
@media(min-width:1200px){
  .notes{display:flex;flex-wrap:wrap;justify-content:center;gap:1.9em 1.4em}
  .notes>li{width:calc((100% - 3 * 1.4em) / 4)}
}