/* MathKidoo - the Schools page's own look (MG-544, V4 page 3; Raj 15 Oct 2026: premium and glossy, to the standard of page 4).
   Only src/for-schools.html loads this file. It is a copy of the Organisers page's language (mk-org.css), kept separate on
   purpose so each selling page stands alone; nothing here is imported from or shared with another page.
   Plain CSS, self-hosted fonts (fonts/mks-fonts.css), no external host. Ground: deep navy to indigo with soft radial glows.
   Glass cards. Mango gold for the action and the "found and mended" moments, soft purple for the levels, amber only for a
   missing step. Nunito 900 for headlines, Source Sans 3 for reading.
   Motion is opt-in: mk-sch.js adds html.sch-motion only when the visitor has not asked for reduced motion, so with no
   script, or with reduced motion, every word and every picture is simply there (the poster frames).
   Parallax uses the `translate` property and reveals use `transform`, so the two never fight over one property. */

/* ---------- tokens ---------- */
body.sch {
  --s-bg0: #060918; --s-bg1: #0A0F30; --s-bg2: #120E44; --s-bg3: #0B0C2B;
  --s-text: #EEF0FF; --s-soft: #B8BEE3; --s-mute: #8C92BE; --s-dim: #5F6596;
  --s-gold: #FFC61A; --s-gold2: #FFB020; --s-gold-hi: #FFE08A;
  --s-violet: #8B5CF6; --s-lav: #B9A0FF; --s-indigo: #6366F1; --s-teal: #76E1CF; --s-sky: #72B8FF; --s-coral: #F3A796;
  --s-line: rgba(255, 255, 255, .12); --s-line-hi: rgba(255, 255, 255, .22);
  --s-glass: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025));
  --s-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 60px -28px rgba(2, 3, 20, .9);
  --s-ease: cubic-bezier(.16, 1, .3, 1);
  --s-spring: cubic-bezier(.3, 1.45, .55, 1);
  --s-wrap: min(92vw, 1240px);
}
html { background: #060918; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (min-width: 1800px) { html { font-size: 112.5%; } body.sch { --s-wrap: min(90vw, 1440px); } }
@media (min-width: 2400px) { html { font-size: 131.25%; } body.sch { --s-wrap: min(88vw, 1720px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

*, *::before, *::after { box-sizing: border-box; }
body.sch {
  margin: 0; min-width: 320px; overflow-x: hidden;
  font: 400 1.0625rem/1.6 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--s-text);
  background:
    radial-gradient(1200px 700px at 85% 22%, rgba(139, 92, 246, .13), transparent 70%),
    radial-gradient(1000px 800px at 8% 48%, rgba(99, 102, 241, .12), transparent 70%),
    radial-gradient(900px 700px at 90% 78%, rgba(255, 176, 32, .05), transparent 70%),
    linear-gradient(180deg, var(--s-bg0) 0%, var(--s-bg1) 22%, var(--s-bg2) 55%, var(--s-bg1) 80%, var(--s-bg3) 100%);
  -webkit-font-smoothing: antialiased;
}
body.sch img, body.sch svg { max-width: 100%; }
body.sch .wrap { width: var(--s-wrap); margin: 0 auto; }
body.sch a { color: inherit; }
body.sch ::selection { background: rgba(255, 198, 26, .35); color: #fff; }
body.sch main:focus { outline: none; }

/* ---------- skip link and the bar (the M mark only; the name is in its aria-label) ---------- */
body.sch .mks-skip { position: absolute; left: 12px; top: -60px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 12px; background: var(--s-gold); color: #1B1306; font: 800 1rem 'Nunito', system-ui, sans-serif; text-decoration: none; }
body.sch .mks-skip:focus { top: 12px; }
body.sch .bar { position: sticky; top: 0; z-index: 50; background: rgba(7, 10, 32, .62); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid rgba(255, 255, 255, .07); }
body.sch .bar-in { width: var(--s-wrap); margin: 0 auto; display: flex; align-items: center; gap: 12px; min-height: 64px; }
/* MG-BUG-030: the mark was its bare 34 px image, so the home link was a 34 x 34 target with 6 px to the Parents tab
   at 390 px. Same line the Parents page already carries (mk-par.css): a 44 px box with the image centred in it. */
body.sch .brand { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 12px; transition: transform .4s var(--s-spring), filter .3s; }
body.sch .brand img { width: 40px; height: 40px; display: block; filter: drop-shadow(0 6px 14px rgba(139, 92, 246, .45)); }
body.sch .brand:hover { transform: translateY(-1px) rotate(-4deg); }
body.sch .menu { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
body.sch .menu::-webkit-scrollbar { display: none; }
body.sch .menu a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--s-soft); text-decoration: none; font: 700 .95rem 'Nunito', system-ui, sans-serif; transition: color .2s, background .2s; }
body.sch .menu a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
body.sch .menu a[aria-current="page"] { color: #fff; background: rgba(255, 198, 26, .1); box-shadow: inset 0 0 0 1px rgba(255, 198, 26, .35); }
body.sch .signin { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; color: #fff; text-decoration: none; font: 800 .95rem 'Nunito', system-ui, sans-serif; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--s-line-hi); transition: background .25s, box-shadow .25s, transform .4s var(--s-spring); }
body.sch .signin:hover { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(185, 160, 255, .6), 0 0 24px -6px rgba(139, 92, 246, .7); transform: translateY(-1px); }
@media (max-width: 560px) {
  body.sch .bar-in { gap: 6px; min-height: 58px; }
  body.sch .brand img { width: 34px; height: 34px; }
  body.sch .menu { justify-content: flex-start; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
  body.sch .menu a { padding: 8px 8px; font-size: .88rem; }
  body.sch .menu a[href="/"] { display: none; }
  body.sch .signin { min-height: 44px; padding: 0 12px; font-size: .88rem; }
}
@media (max-width: 360px) { body.sch .menu { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 86%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 86%, transparent); } }
body.sch :focus-visible { outline: 3px solid var(--s-gold-hi); outline-offset: 3px; border-radius: 10px; }

/* ---------- type ---------- */
body.sch .sch-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 800 .78rem/1.35 'Nunito', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--s-gold-hi); }
body.sch .sch-eyebrow::before { content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--s-gold), rgba(255, 198, 26, 0)); }
body.sch .is-centre .sch-eyebrow { justify-content: center; }
body.sch .s-nw { white-space: nowrap; }
body.sch .sch-h1 { margin: 0; font: 900 clamp(2.1rem, 1.2rem + 4.4vw, 4.6rem)/1.02 'Nunito', system-ui, sans-serif; letter-spacing: -.025em; color: #fff; text-wrap: balance; }
body.sch .sch-shine { background: linear-gradient(100deg, #FFF1BF 0%, #FFD24D 35%, #FFB020 70%, #FF9A3C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 26px rgba(255, 176, 32, .28)); }
body.sch .sch-h2 { margin: 0 0 .5em; font: 900 clamp(1.85rem, 1.15rem + 2.6vw, 3.2rem)/1.08 'Nunito', system-ui, sans-serif; letter-spacing: -.018em; color: #fff; text-wrap: balance; }
body.sch .sch-h3 { margin: 0 0 12px; font: 900 1.2rem/1.25 'Nunito', system-ui, sans-serif; color: #fff; }
body.sch .sch-body { margin: 0 0 .55em; font-size: 1.08rem; color: var(--s-soft); max-width: 40em; }
body.sch .is-centre .sch-body { margin-left: auto; margin-right: auto; }
body.sch .sch-gold-line { color: var(--s-gold-hi); font: 800 1.12rem/1.45 'Nunito', system-ui, sans-serif; }
body.sch .sch-small { margin: 14px 0 0; font-size: .88rem; color: var(--s-mute); }
body.sch .sch-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font: 900 .68rem/1.2 'Nunito', system-ui, sans-serif; letter-spacing: .12em; color: var(--s-gold-hi); background: rgba(255, 198, 26, .1); box-shadow: inset 0 0 0 1px rgba(255, 198, 26, .38); }

/* ---------- buttons: spring lift, glow on hover and focus, press ---------- */
body.sch .sch-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px; font: 800 1.04rem/1.2 'Nunito', system-ui, sans-serif; text-align: center; text-decoration: none; cursor: pointer; overflow: hidden; transition: transform .45s var(--s-spring), box-shadow .3s ease, background-color .3s ease, color .2s; -webkit-tap-highlight-color: transparent; }
body.sch .sch-btn-gold { color: #1A1204; background: linear-gradient(180deg, #FFDF62 0%, #FFC61A 45%, #FFA916 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(150, 80, 0, .28), 0 0 0 1px rgba(255, 214, 102, .55), 0 14px 34px -12px rgba(255, 170, 30, .75); }
body.sch .sch-btn-gold::before { content: ""; position: absolute; inset: 1px 1px 52% 1px; z-index: -1; border-radius: 999px 999px 40% 40% / 999px 999px 18px 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
body.sch .sch-btn-gold::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); transition: left .7s var(--s-ease); }
body.sch .sch-btn-gold:hover, body.sch .sch-btn-gold:focus-visible { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -3px 0 rgba(150, 80, 0, .28), 0 0 0 1px rgba(255, 224, 138, .9), 0 22px 44px -12px rgba(255, 170, 30, .85), 0 0 46px -6px rgba(255, 198, 26, .55); }
body.sch .sch-btn-gold:hover::after { left: 120%; }
body.sch .sch-btn-line { color: #fff; background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(185, 160, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.sch .sch-btn-line:hover, body.sch .sch-btn-line:focus-visible { transform: translateY(-3px); background: rgba(139, 92, 246, .16); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .9), 0 16px 36px -14px rgba(139, 92, 246, .8), 0 0 34px -8px rgba(139, 92, 246, .6); }
body.sch .sch-btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
body.sch .sch-btn:disabled { cursor: not-allowed; opacity: .5; transform: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); background: transparent; }
body.sch .sch-btn-sm { min-height: 46px; padding: 0 20px; font-size: .96rem; }
body.sch .sch-quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--s-soft); font: 700 1rem 'Nunito', system-ui, sans-serif; text-decoration: underline; text-decoration-color: rgba(184, 190, 227, .4); text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; }
body.sch .sch-quiet:hover { color: #fff; text-decoration-color: var(--s-gold); }
@media (prefers-reduced-motion: reduce) {
  body.sch .sch-btn, body.sch .sch-card, body.sch .signin, body.sch .brand { transition: box-shadow .2s, background-color .2s, color .2s !important; }
  body.sch .sch-btn:hover, body.sch .sch-btn:focus-visible, body.sch .sch-btn:active, body.sch .sch-card:hover { transform: none !important; }
}

/* ---------- glass card ---------- */
body.sch .sch-card { position: relative; border-radius: 24px; background: var(--s-glass); box-shadow: var(--s-shadow), inset 0 0 0 1px var(--s-line); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); transition: transform .5s var(--s-spring), box-shadow .35s ease, background .35s ease; }
body.sch .sch-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .09), transparent 38%); }
html body.sch .sch-card:hover { transform: translateY(-5px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(185, 160, 255, .38), 0 34px 70px -30px rgba(2, 3, 20, .95), 0 0 50px -18px rgba(139, 92, 246, .55); }
body.sch .sch-honest:hover, body.sch .sch-tb:hover, body.sch .sch-pb:hover { transform: none; }

/* ---------- hero ---------- */
body.sch .sch-hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(18px, 3.4vw, 64px) 0 clamp(24px, 3vw, 48px); }
body.sch .sch-hero-bg { position: absolute; inset: -12% 0 -40%; z-index: -1; pointer-events: none; }
body.sch .s-glow { position: absolute; border-radius: 50%; filter: blur(60px); }
body.sch .s-g1 { width: 62vw; height: 62vw; max-width: 980px; max-height: 980px; left: -20vw; top: -14vw; background: radial-gradient(circle, rgba(99, 102, 241, .5), rgba(99, 102, 241, 0) 65%); }
body.sch .s-g2 { width: 54vw; height: 54vw; max-width: 900px; max-height: 900px; right: -16vw; top: 2vw; background: radial-gradient(circle, rgba(139, 92, 246, .45), rgba(139, 92, 246, 0) 65%); }
body.sch .s-g3 { width: 34vw; height: 34vw; max-width: 560px; max-height: 560px; right: 12vw; top: 34%; background: radial-gradient(circle, rgba(255, 176, 32, .2), rgba(255, 176, 32, 0) 65%); }
body.sch .s-stars { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 62%, #C4B5FD, transparent), radial-gradient(1.4px 1.4px at 58% 12%, #fff, transparent), radial-gradient(1px 1px at 72% 44%, #FFE08A, transparent), radial-gradient(1.2px 1.2px at 88% 70%, #fff, transparent), radial-gradient(1px 1px at 22% 84%, #C4B5FD, transparent), radial-gradient(1px 1px at 46% 36%, #fff, transparent), radial-gradient(1.3px 1.3px at 94% 16%, #C4B5FD, transparent); background-size: 520px 420px; }
body.sch .sch-hero-grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 980px) { body.sch .sch-hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); } }
body.sch .sch-hero-copy { position: relative; z-index: 2; }
body.sch .sch-problem { margin: 20px 0 0; max-width: 34em; font-size: clamp(1.04rem, .98rem + .3vw, 1.2rem); line-height: 1.55; color: var(--s-soft); }
body.sch .sch-problem b { color: #fff; font-weight: 700; }
body.sch .sch-purpose { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; font: 800 clamp(1.14rem, 1.02rem + .5vw, 1.42rem)/1.35 'Nunito', system-ui, sans-serif; color: var(--s-gold-hi); text-shadow: 0 0 30px rgba(255, 198, 26, .25); text-wrap: balance; }
body.sch .sch-purpose::before { content: ""; flex: none; width: 4px; align-self: stretch; border-radius: 4px; background: linear-gradient(180deg, var(--s-gold), var(--s-gold2)); box-shadow: 0 0 14px rgba(255, 198, 26, .6); }
body.sch .sch-actions { display: grid; gap: 8px; margin-top: 26px; }
body.sch .sch-act-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
body.sch .sch-act-row.is-centre { justify-content: center; }
body.sch .sch-actions .sch-act-row { margin-bottom: 4px; }
body.sch .sch-note { margin: 0; max-width: 36em; font-size: .92rem; line-height: 1.45; color: var(--s-mute); }
/* the quiet link and its own helper line share a small envelope, so the eye pairs them */
body.sch .sch-quiet::before, body.sch .sch-note-mail::before { content: ""; flex: none; width: 16px; height: 12px; margin-right: 9px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'><rect x='.9' y='.9' width='14.2' height='10.2' rx='1.6' fill='none' stroke='black' stroke-width='1.6'/><path d='M1.5 1.8 8 7l6.5-5.2' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'><rect x='.9' y='.9' width='14.2' height='10.2' rx='1.6' fill='none' stroke='black' stroke-width='1.6'/><path d='M1.5 1.8 8 7l6.5-5.2' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
body.sch .sch-note-mail { display: flex; align-items: center; }
body.sch .sch-note-mail::before { width: 14px; height: 10px; opacity: .75; }
/* the three ticks: wide screens only (V4, Schools hero 9) */
body.sch .sch-ticks { display: none; }
@media (min-width: 900px) {
  body.sch .sch-ticks { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; margin: 22px 0 0; padding: 0; }
  body.sch .sch-ticks li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; font: 700 .9rem/1.2 'Nunito', system-ui, sans-serif; color: var(--s-text); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--s-line); }
  body.sch .sch-ticks li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #E4FFF9, #76E1CF 55%, #2E9C88); box-shadow: 0 0 12px -2px rgba(118, 225, 207, .7); -webkit-mask: radial-gradient(circle, #000 98%, transparent); }
}
@media (max-width: 520px) {
  body.sch .sch-actions .sch-btn { width: 100%; }
  body.sch .sch-problem { margin-top: 14px; }
}

/* hero picture B: one classroom, one evening */
body.sch .sch-reel { position: relative; z-index: 1; margin: 0; }
body.sch .sch-reel-card { position: relative; padding: clamp(10px, 1.6vw, 18px); border-radius: 30px; background: linear-gradient(160deg, rgba(99, 102, 241, .2), rgba(139, 92, 246, .08) 45%, rgba(255, 255, 255, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 100px -40px rgba(2, 3, 20, .95), 0 30px 120px -50px rgba(139, 92, 246, .75); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }
body.sch .sch-reel-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 32%); }
body.sch .sch-reel-art { position: relative; }
body.sch .rb-svg { display: block; width: 100%; height: auto; overflow: visible; }
body.sch .rb-svg text { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; fill: var(--s-text); transition: fill .45s ease; }
body.sch .rb-svg .rb-dim, body.sch .rb-svg .rb-dim tspan { fill: var(--s-dim); }
body.sch .rb-svg .rb-gold { fill: var(--s-gold); font-weight: 900; }
body.sch .rb-svg .rb-small { fill: var(--s-mute); font-weight: 700; }
body.sch .rb-svg .rb-cl { font-weight: 900; fill: #fff; }
body.sch .rb-desks line { stroke: rgba(255, 255, 255, .07); stroke-width: 1.4; stroke-linecap: round; }
body.sch .rb-band { fill: rgba(255, 198, 26, .07); stroke: rgba(255, 198, 26, .32); stroke-width: 1; }
body.sch .rb-track { stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
body.sch .rb-faint rect { fill: #B9A0FF; fill-opacity: .26; }
body.sch .rb-row4 rect { fill: url(#rbBar); }
body.sch .rb-row4 rect[data-l="12"] { fill: #FFC61A; }
body.sch .rb-tick { stroke: var(--s-gold); stroke-width: 2; stroke-linecap: round; }
body.sch .rb-trunk path { fill: none; stroke: #B9A0FF; stroke-opacity: .55; stroke-width: 6; stroke-linecap: round; }
body.sch .rb-ball circle { stroke: rgba(185, 160, 255, .38); stroke-width: 1.2; }
body.sch .rb-ball.on circle { stroke: rgba(255, 255, 255, .4); }
body.sch .rb-svg .rb-ball text { font-weight: 900; fill: var(--s-dim); }
body.sch .rb-svg .rb-ball.on text { fill: #0C1238; }
body.sch .rb-lead { fill: none; stroke: rgba(255, 224, 138, .55); stroke-width: 1.4; stroke-dasharray: 3 3; }
body.sch .rb-pill { fill: rgba(255, 198, 26, .12); stroke: rgba(255, 224, 138, .55); stroke-width: 1.2; transition: fill .4s, stroke .4s; }
body.sch .rb-svg .rb-nine { fill: var(--s-gold-hi); font-weight: 900; }
body.sch .rb-svg .rb-nine.rb-dim { fill: var(--s-dim); }
body.sch .sch-reel.is-amber .rb-pill { fill: rgba(255, 159, 67, .14); stroke: rgba(255, 159, 67, .7); }
body.sch .sch-reel.is-amber .rb-svg .rb-nine { fill: #FFB877; }
body.sch .sch-reel-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; padding: 0 6px; font-size: .86rem; color: var(--s-mute); }
body.sch .sch-reel-cap { flex: 1 1 10em; min-width: 0; }
body.sch .sch-again { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: 800 .9rem 'Nunito', system-ui, sans-serif; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--s-line-hi); transition: transform .4s var(--s-spring), box-shadow .25s, background .25s; }
body.sch .sch-again::before { content: "\21BB"; font-size: 1.05rem; color: var(--s-gold); }
body.sch .sch-again:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 224, 138, .7), 0 0 26px -8px rgba(255, 198, 26, .7); }
body.sch .sch-again[hidden] { display: none; }

/* hero base: the solution, the four gains, the how line */
body.sch .sch-hero-base { position: relative; z-index: 3; margin-top: clamp(30px, 4.5vw, 64px); }
body.sch .sch-solution { margin: 0; max-width: 46em; font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); line-height: 1.55; color: var(--s-text); }
body.sch .sch-gains { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 680px) { body.sch .sch-gains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1180px) { body.sch .sch-gains { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
body.sch .sch-gain { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; background: var(--s-glass); box-shadow: var(--s-shadow), inset 0 0 0 1px var(--s-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .5s var(--s-spring), box-shadow .3s; }
body.sch .sch-gain:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(185, 160, 255, .38), 0 30px 60px -30px rgba(2, 3, 20, .95), 0 0 40px -16px rgba(139, 92, 246, .55); }
body.sch .sch-gain p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--s-soft); }
body.sch .sch-gain b { color: #fff; font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; }
body.sch .sch-gain-pic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px var(--s-line); }
body.sch .sch-gain-pic svg { width: 40px; height: 40px; }
body.sch .sch-how { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--s-line); max-width: 52em; font-size: 1rem; color: var(--s-mute); }

/* ---------- sections ---------- */
body.sch .sch-sec { position: relative; padding: clamp(56px, 7.5vw, 116px) 0; }
body.sch .sch-deep { background: linear-gradient(180deg, rgba(99, 102, 241, 0) 0%, rgba(99, 102, 241, .07) 22%, rgba(139, 92, 246, .06) 78%, rgba(139, 92, 246, 0) 100%); }
body.sch .sch-deep::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(185, 160, 255, .35), rgba(255, 198, 26, .28), transparent); }
body.sch .sch-head.is-centre { text-align: center; max-width: 860px; margin: 0 auto; }
body.sch .sch-two { display: grid; gap: clamp(36px, 5vw, 84px); align-items: center; }
@media (min-width: 960px) { body.sch .sch-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* numbered lists */
body.sch .sch-num { list-style: none; counter-reset: on; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
body.sch .sch-num li { counter-increment: on; position: relative; padding-left: 46px; min-height: 32px; font-size: 1.06rem; line-height: 1.5; color: var(--s-soft); }
body.sch .sch-num li::before { content: counter(on); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 900 .9rem 'Nunito', system-ui, sans-serif; color: #1A1204; background: radial-gradient(circle at 32% 28%, #FFF3C4, #FFC61A 55%, #E69500); box-shadow: 0 6px 16px -6px rgba(255, 176, 32, .8); }

/* 1 - what is arithmetic: four glossy balls */
body.sch .sch-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); }
body.sch .sch-op { display: grid; justify-items: center; gap: 14px; padding: clamp(18px, 2.4vw, 28px) 12px; border-radius: 24px; background: var(--s-glass); box-shadow: var(--s-shadow), inset 0 0 0 1px var(--s-line); text-align: center; }
body.sch .sch-ball { display: grid; place-items: center; width: clamp(58px, 5vw, 76px); height: clamp(58px, 5vw, 76px); border-radius: 50%; font: 900 clamp(1.9rem, 1.6rem + 1vw, 2.5rem)/1 'Nunito', system-ui, sans-serif; color: #10123A; box-shadow: inset -6px -10px 18px rgba(0, 0, 0, .22), inset 6px 8px 14px rgba(255, 255, 255, .55), 0 14px 30px -12px var(--bc, rgba(0, 0, 0, .5)); transition: transform .5s var(--s-spring); }
body.sch .sch-op:hover .sch-ball { transform: translateY(-6px) rotate(-8deg); }
body.sch .s-b1 { background: radial-gradient(circle at 32% 26%, #FFFFFF 0, #A8F0E2 26%, #76E1CF 55%, #33A893 100%); --bc: rgba(118, 225, 207, .7); }
body.sch .s-b2 { background: radial-gradient(circle at 32% 26%, #FFFFFF 0, #B5D9FF 26%, #72B8FF 55%, #2F7FD6 100%); --bc: rgba(114, 184, 255, .7); }
body.sch .s-b3 { background: radial-gradient(circle at 32% 26%, #FFFFFF 0, #DCCFFF 26%, #B9A0FF 55%, #7650E0 100%); --bc: rgba(185, 160, 255, .7); }
body.sch .s-b4 { background: radial-gradient(circle at 32% 26%, #FFFFFF 0, #FFD3C8 26%, #F3A796 55%, #D2664E 100%); --bc: rgba(243, 167, 150, .7); }
body.sch .sch-op-sum { margin: 0; font: 900 clamp(1.15rem, 1rem + .7vw, 1.6rem)/1.2 'Nunito', system-ui, sans-serif; color: #fff; white-space: nowrap; }
body.sch .sch-ans { display: inline-block; color: var(--s-gold); }
html.sch-motion body.sch .sch-ops.pre .sch-ans { opacity: 0; transform: translateY(-18px) scale(.8); }
html.sch-motion body.sch .sch-ops.pre .sch-ans.hop { animation: s-hop .7s var(--s-spring) forwards; }
@keyframes s-hop { 0% { opacity: 0; transform: translateY(-18px) scale(.8); } 60% { opacity: 1; transform: translateY(3px) scale(1.06); } 100% { opacity: 1; transform: none; } }

/* 2 - the exam strip, its lines to one ball, and the sweep */
body.sch .sch-strip { position: relative; max-width: 1040px; margin: clamp(30px, 4vw, 48px) auto 0; }
body.sch .sch-strip-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
body.sch .sch-strip-lines path { fill: none; stroke: url(#schLine); stroke-width: 1.6; stroke-linecap: round; opacity: .8; transition: stroke-dashoffset .9s var(--s-ease); }
body.sch .sch-chips { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
body.sch .sch-chips li { padding: 11px 18px; border-radius: 999px; font: 800 clamp(.92rem, .86rem + .25vw, 1.06rem)/1.2 'Nunito', system-ui, sans-serif; color: #fff; background: linear-gradient(180deg, rgba(30, 34, 90, .92), rgba(18, 20, 60, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 224, 138, .32), 0 12px 26px -14px rgba(0, 0, 0, .9); transition: color .5s, box-shadow .5s; }
html.sch-motion body.sch .sch-strip.pre .sch-chips li:not(.lit) { color: var(--s-dim); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 26px -14px rgba(0, 0, 0, .9); }
body.sch .sch-root { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: clamp(70px, 9vw, 120px); }
body.sch .sch-root-ball { display: grid; place-items: center; width: clamp(128px, 11vw, 160px); height: clamp(128px, 11vw, 160px); border-radius: 50%; font: 900 clamp(1rem, .9rem + .4vw, 1.2rem) 'Nunito', system-ui, sans-serif; color: #1A1204; background: radial-gradient(circle at 34% 26%, #FFFBEA 0, #FFE08A 22%, #FFC61A 52%, #E08A00 100%); box-shadow: inset -10px -14px 26px rgba(150, 70, 0, .32), inset 8px 10px 18px rgba(255, 255, 255, .6), 0 0 0 10px rgba(255, 198, 26, .08), 0 0 80px -6px rgba(255, 176, 32, .6); }
body.sch .sch-strip-line { margin: clamp(36px, 4vw, 52px) auto 0; max-width: 30em; text-align: center; font: 800 clamp(1.25rem, 1.02rem + 1vw, 1.8rem)/1.35 'Nunito', system-ui, sans-serif; color: #fff; text-wrap: balance; }
body.sch .sch-sweep { background: linear-gradient(90deg, var(--s-gold), var(--s-gold2)) no-repeat 0 100% / 100% 4px; padding-bottom: 4px; transition: background-size 1s var(--s-ease); }
html.sch-motion body.sch .sch-strip-line.pre .sch-sweep { background-size: 0% 4px; }

/* 9 - built for a real classroom: three cards */
body.sch .sch-cols { display: grid; gap: clamp(14px, 2vw, 24px); margin-top: clamp(30px, 4vw, 52px); }
@media (min-width: 900px) { body.sch .sch-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.sch .sch-col { padding: clamp(22px, 2.6vw, 32px); }
body.sch .sch-col-pic { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 18px; border-radius: 22px; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .18), rgba(139, 92, 246, .12)); box-shadow: inset 0 0 0 1px var(--s-line-hi), 0 14px 30px -16px rgba(139, 92, 246, .8); }

body.sch .sch-p { margin: 0; font-size: 1.04rem; line-height: 1.55; color: var(--s-soft); }
body.sch .sch-lines3 { display: grid; gap: 12px 28px; max-width: 1080px; margin: clamp(28px, 4vw, 44px) auto 0; }
@media (min-width: 860px) { body.sch .sch-lines3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.sch .sch-lines3 .sch-body { margin: 0; padding: 14px 18px; border-left: 2px solid rgba(185, 160, 255, .4); max-width: none; }
body.sch .sch-lines3 .sch-gold-line { border-left-color: var(--s-gold); }
body.sch .sch-col .sch-h3 { margin-bottom: 8px; }

/* 3 - homework, not classwork: three steps joined by one line; the house glows last */
body.sch .sch-walk { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: wk; }
body.sch .sch-walk::before { content: ""; position: absolute; left: 47px; top: 40px; bottom: 40px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(185, 160, 255, .5), rgba(255, 198, 26, .7), rgba(185, 160, 255, .5)); }
body.sch .sch-wstep { display: flex; align-items: center; gap: 18px; padding: 16px 20px; transition-delay: 0s; }
html.sch-motion body.sch .sch-walk [data-rv] { transition-delay: calc(var(--i, 0) * 120ms); }
body.sch .sch-wstep p { margin: 0; font: 800 clamp(1.05rem, 1rem + .3vw, 1.2rem)/1.35 'Nunito', system-ui, sans-serif; color: #fff; }
body.sch .sch-wpic { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .18), rgba(139, 92, 246, .14)); box-shadow: inset 0 0 0 1px var(--s-line-hi), 0 12px 26px -14px rgba(139, 92, 246, .8); }
body.sch .sch-wpic svg { width: 42px; height: 42px; }
body.sch .sch-wstep-home .sch-wpic { background: radial-gradient(circle at 30% 25%, rgba(255, 224, 138, .3), rgba(255, 176, 32, .08)); box-shadow: inset 0 0 0 1px rgba(255, 224, 138, .55), 0 0 36px -6px rgba(255, 198, 26, .7); transition: box-shadow .9s var(--s-ease), background .9s var(--s-ease); }
html.sch-motion body.sch .sch-walk:not(.glow) .sch-wstep-home .sch-wpic { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .18), rgba(139, 92, 246, .14)); box-shadow: inset 0 0 0 1px var(--s-line-hi), 0 12px 26px -14px rgba(139, 92, 246, .8); }

/* 4 - the teacher's board (the poster is the open panel) */
body.sch .sch-tb { width: min(100%, 500px); margin: 0 auto; padding: clamp(20px, 2.6vw, 30px); }
body.sch .tb-top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; font: 900 1.3rem 'Nunito', system-ui, sans-serif; color: #fff; }
body.sch .tb-row { position: relative; display: grid; grid-template-columns: 5.2em minmax(0, 1fr) 2.2em; gap: 6px 14px; align-items: center; padding: 11px 12px; margin: 0 -12px; border-radius: 14px; }
body.sch .tb-lv { font: 800 .98rem 'Nunito', system-ui, sans-serif; color: var(--s-soft); }
body.sch .tb-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
body.sch .tb-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #8B5CF6, #C4B5FD); transform: scaleX(var(--w)); transform-origin: left center; }
body.sch .tb-n { justify-self: end; font: 900 1.02rem 'Nunito', system-ui, sans-serif; color: #fff; }
body.sch .tb-amber { background: rgba(255, 159, 67, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 159, 67, .65), 0 0 34px -10px rgba(255, 159, 67, .7); }
body.sch .tb-amber .tb-lv { color: #fff; }
body.sch .tb-amber .tb-bar i { background: linear-gradient(90deg, #FF9F43, #FFD08A); }
body.sch .tb-need { grid-column: 1 / -1; justify-self: start; padding: 3px 10px; border-radius: 999px; font: 900 .78rem/1.3 'Nunito', system-ui, sans-serif; letter-spacing: .02em; color: #2A1500; background: linear-gradient(180deg, #FFC98A, #FF9F43); }
body.sch .tb-finger { position: absolute; right: 18px; bottom: -10px; width: 30px; height: 30px; opacity: 0; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
body.sch .tb-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--s-ease), opacity .3s; }
body.sch .tb-panel-in { overflow: hidden; min-height: 0; }
body.sch .tb-ph { margin: 10px 0 8px; font: 800 .86rem 'Nunito', system-ui, sans-serif; color: var(--s-gold-hi); }
body.sch .tb-names { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
body.sch .tb-names li { width: 84px; height: 26px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .16)); filter: blur(3px); }
body.sch .tb-names li:nth-child(2n) { width: 66px; }
body.sch .tb-names li:nth-child(3n) { width: 96px; }
html.sch-motion body.sch .sch-tb.pre .tb-panel { grid-template-rows: 0fr; opacity: 0; }
html.sch-motion body.sch .sch-tb.pulse .tb-amber { animation: s-pulse .6s ease-out; }
html.sch-motion body.sch .sch-tb.tap .tb-finger { animation: s-tap .7s var(--s-ease) forwards; }
@keyframes s-pulse { 0% { box-shadow: inset 0 0 0 1.5px rgba(255, 159, 67, .65), 0 0 0 0 rgba(255, 159, 67, .55); } 100% { box-shadow: inset 0 0 0 1.5px rgba(255, 159, 67, .65), 0 0 0 16px rgba(255, 159, 67, 0); } }
@keyframes s-tap { 0% { opacity: 0; transform: translate(26px, 26px); } 55% { opacity: 1; transform: none; } 72% { opacity: 1; transform: scale(.86); } 100% { opacity: 0; transform: none; } }

/* 5 - the principal's board: three shades, counts only */
body.sch .sch-pb { margin: 0; padding: clamp(18px, 2.4vw, 28px); }
body.sch .pb-svg { display: block; width: 100%; height: auto; overflow: visible; }
body.sch .pb-svg text { font-family: 'Nunito', system-ui, sans-serif; }
body.sch .pb-cl { font-size: 10.5px; font-weight: 800; fill: var(--s-soft); }
body.sch .pb-ax { font-size: 9px; font-weight: 700; fill: var(--s-mute); }
body.sch .c-sure { fill: #76E1CF; fill-opacity: .82; }
body.sch .c-miss { fill: #FF9F43; }
body.sch .c-climb { fill: #B9A0FF; fill-opacity: .16; }
body.sch .c-few { fill: rgba(255, 224, 138, .08); stroke: #FFE08A; stroke-width: 1.3; stroke-dasharray: 2 1.6; }
body.sch .pb-lead { fill: none; stroke: rgba(255, 224, 138, .6); stroke-width: 1.2; }
body.sch .pb-pill { fill: rgba(16, 18, 56, .92); stroke: rgba(255, 224, 138, .6); stroke-width: 1.2; }
body.sch .pb-pill-t { font-size: 10.5px; font-weight: 900; fill: var(--s-gold-hi); }
body.sch .pb-row rect { transition: fill-opacity .5s ease, opacity .5s ease; transition-delay: calc(var(--r, 0) * 150ms); }
html.sch-motion body.sch .sch-pb.pre .pb-row rect { opacity: .14; }
body.sch .pb-key { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 800 .95rem 'Nunito', system-ui, sans-serif; color: #fff; }
body.sch .pb-key li { display: inline-flex; align-items: center; gap: 8px; }
body.sch .pb-key li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; }
body.sch .k-sure::before { background: #76E1CF; }
body.sch .k-miss::before { background: #FF9F43; }
body.sch .k-climb::before { background: rgba(185, 160, 255, .3); box-shadow: inset 0 0 0 1px rgba(185, 160, 255, .5); }

/* 6 - one child, three views: three screens on one line */
body.sch .sch-connect { position: relative; display: grid; gap: 22px; max-width: 1080px; margin: clamp(30px, 4vw, 52px) auto 0; }
@media (min-width: 820px) { body.sch .sch-connect { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); } }
body.sch .cn-line { display: none; }
@media (max-width: 819px) {
  body.sch .sch-connect { gap: 16px; }
  body.sch .sch-connect::before { content: ""; position: absolute; left: 55px; top: 40px; bottom: 40px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #B9A0FF, #FFC61A, #B9A0FF); opacity: .6; }
  body.sch .sch-connect .cn-view { grid-template-columns: 112px minmax(0, 1fr); align-items: center; justify-items: start; gap: 16px; text-align: left; }
  body.sch .sch-connect .cn-screen { width: 112px; height: 112px; border-radius: 26px; }
  body.sch .sch-connect .cn-screen svg { width: 80px; height: 80px; }
}
@media (min-width: 820px) {
  body.sch .cn-line { display: block; position: absolute; left: 16%; right: 16%; top: 92px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
  body.sch .cn-line i { display: block; height: 100%; background: linear-gradient(90deg, #B9A0FF, #FFC61A, #B9A0FF); transform-origin: left center; transition: transform 1s var(--s-ease); }
  html.sch-motion body.sch .sch-connect.pre:not(.go) .cn-line i { transform: scaleX(0); }
}
body.sch .cn-view { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; }
body.sch .cn-screen { display: grid; place-items: center; width: 184px; height: 184px; border-radius: 34px; background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .16), rgba(139, 92, 246, .1)), #10133C; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px var(--s-line-hi), 0 30px 60px -28px rgba(2, 3, 20, 1), 0 0 60px -24px rgba(139, 92, 246, .8); transition: filter .6s ease, box-shadow .6s ease, transform .6s var(--s-spring); }
body.sch .cn-screen svg { width: 120px; height: 120px; }
body.sch .cn-cap { margin: 0; max-width: 20em; font-size: 1.06rem; line-height: 1.5; color: var(--s-soft); transition: color .5s ease; }
body.sch .cn-view:last-child .cn-cap { color: var(--s-gold-hi); font: 800 1.1rem/1.45 'Nunito', system-ui, sans-serif; }
html.sch-motion body.sch .sch-connect.pre .cn-view:not(.lit) .cn-screen { filter: saturate(.2) brightness(.6); transform: scale(.94); }
html.sch-motion body.sch .sch-connect.pre .cn-view:not(.lit) .cn-cap { color: var(--s-dim); }

/* 7 - a school championship: the banner, the podium, three gold balls */
body.sch .sch-more { margin: 22px 0 0; }
body.sch .sch-podium { width: min(100%, 420px); margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(76, 42, 158, .55)); }
body.sch .sch-podium svg { display: block; width: 100%; height: auto; overflow: visible; }
body.sch .pd-c { transform-box: fill-box; transform-origin: center; transition: transform .8s var(--s-spring), opacity .5s; filter: drop-shadow(0 0 10px rgba(255, 198, 26, .8)); }
body.sch .pd-c:nth-of-type(2) { transition-delay: .15s; }
body.sch .pd-c:nth-of-type(3) { transition-delay: .3s; }
html.sch-motion body.sch .sch-podium:not(.in) .pd-c { transform: translateY(40px) scale(.5); opacity: 0; }

/* 8 - four steps to set up */
body.sch .sch-steps { list-style: none; margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 640px) { body.sch .sch-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { body.sch .sch-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.sch .sch-step { display: grid; align-content: start; gap: 16px; padding: clamp(20px, 2.4vw, 28px); }
body.sch .sch-step-top { display: flex; align-items: center; justify-content: space-between; }
body.sch .sch-step-pic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px var(--s-line); }
body.sch .sch-step p { margin: 0; font-size: 1.04rem; line-height: 1.5; color: var(--s-soft); }
body.sch .sch-step b { display: block; margin-bottom: 4px; font: 900 1.12rem/1.3 'Nunito', system-ui, sans-serif; color: #fff; }
body.sch .sch-step-n { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; font: 900 1.25rem 'Nunito', system-ui, sans-serif; color: #fff; background: linear-gradient(145deg, #A78BFA, #6D28D9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 24px -10px rgba(139, 92, 246, .9); }
body.sch .s-step-gold { box-shadow: var(--s-shadow), inset 0 0 0 1px rgba(255, 198, 26, .4), 0 0 50px -20px rgba(255, 198, 26, .6); }
body.sch .s-step-gold .sch-step-n { color: #1A1204; background: linear-gradient(145deg, #FFE08A, #FFB020); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 24px -10px rgba(255, 176, 32, .9); }
html.sch-motion body.sch .sch-steps [data-rv] { transition-delay: calc(var(--i, 0) * 120ms); }

/* 10 - the honesty block */
body.sch .sch-honest { max-width: 860px; margin: 0 auto; padding: clamp(26px, 4vw, 48px); text-align: center; }
body.sch .sch-honest h2 { margin: 0 0 14px; font: 900 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.15 'Nunito', system-ui, sans-serif; color: #fff; }
body.sch .sch-honest p { margin: 0 auto 18px; max-width: 40em; font-size: 1.08rem; color: var(--s-soft); }
body.sch .sch-honest p:last-child { margin-bottom: 0; }

/* 11 - the end band */
body.sch .sch-end { position: relative; isolation: isolate; overflow: clip; padding: clamp(80px, 11vw, 170px) 0; text-align: center; }
body.sch .sch-end-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 100%, rgba(255, 176, 32, .26), transparent 70%), radial-gradient(70% 80% at 50% 0%, rgba(139, 92, 246, .35), transparent 70%), linear-gradient(180deg, #120E44, #1A0F55); }
body.sch .sch-end-bg::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 224, 138, .5), transparent); }
body.sch .sch-end .sch-h2 { max-width: 16em; margin-left: auto; margin-right: auto; font-size: clamp(2rem, 1.2rem + 3vw, 3.7rem); }
body.sch .sch-end-body { margin: 0 auto 28px; max-width: 34em; font-size: 1.16rem; color: var(--s-soft); }
body.sch .sch-end-under { margin: 24px 0 0; color: var(--s-mute); }

/* ---------- footer (the name lives here, beside the mark) ---------- */
body.sch .foot { padding: 44px 0 110px; border-top: 1px solid rgba(255, 255, 255, .07); background: #05071A; color: var(--s-mute); }
body.sch .foot .m { display: grid; justify-items: center; gap: 14px; text-align: center; }
body.sch .foot img { width: 44px; height: 44px; }
body.sch .mks-foot-contact { margin: 0; }
/* MG-BUG-030: Privacy, Terms and the contact address were 22 px tall here (measured 165 x 22 for the address),
   while the home and parents footers already stand them in a 44 px box. Same line as mk-home.css's own. */
body.sch .mks-foot-contact a { display: inline-flex; align-items: center; min-height: 44px; }
body.sch .mks-foot-contact b { color: #fff; }
body.sch .foot a { color: var(--s-soft); }
/* MG-BUG-030: 44px link boxes that sat 6px apart across and 4px down. 8px both ways, as the campaign asked. */
body.sch .foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
body.sch .foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; text-decoration: none; }
body.sch .foot-links a:hover { color: #fff; }
@media (min-width: 761px) { body.sch .foot { padding-bottom: 48px; } }

/* ---------- the phone bar (mk-sticky.js shows it; phones only) ---------- */
body.sch .mks-sticky-cta { display: none; position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; }
@media (max-width: 760px) { body.sch .mks-sticky-cta.is-on { display: block; } }
/* The page keeps a lane clear beneath the pill, so the bar never sits over the last words
   on the page: the 54px button plus the 12px it is lifted off the bottom edge (MG-BUG-029).
   mk-site.css pairs the same padding with its own bar; this sheet is standalone and the
   clause was missing here, which is why /for-schools computed a 0px bottom padding. */
@media (max-width: 760px) { body.sch:has(.mks-sticky-cta) { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } }
/* A phone on its side: the header plus a floating bar ate 41% of a 320px-tall screen, so the
   bar goes and the lane with it. KEEP THIS AFTER the .is-on rule above - it carries the same
   specificity, so the later rule wins and the same guard written before it does nothing. */
@media (max-height: 480px) and (orientation: landscape) {
  body.sch .mks-sticky-cta, body.sch .mks-sticky-cta.is-on { display: none; }
  body.sch:has(.mks-sticky-cta) { padding-bottom: 0; }
}
body.sch .mks-sticky-cta .btn { display: flex; align-items: center; justify-content: center; min-height: 54px; border-radius: 999px; color: #1A1204; text-decoration: none; font: 800 1.04rem 'Nunito', system-ui, sans-serif; background: linear-gradient(180deg, #FFDF62 0%, #FFC61A 45%, #FFA916 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 18px 40px -10px rgba(0, 0, 0, .8), 0 0 40px -10px rgba(255, 198, 26, .7); }

/* ---------- scroll reveals (once; only with html.sch-motion) ---------- */
html.sch-motion body.sch [data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--s-ease), transform 1s var(--s-ease); transition-delay: calc(var(--i, 0) * 90ms); }
html.sch-motion body.sch [data-rv].in { opacity: 1; transform: none; }
html.sch-motion body.sch [data-rv].in.rv-done { transition: transform .5s var(--s-spring), box-shadow .35s ease, background .35s ease, opacity .3s; transition-delay: 0s; }
html.sch-motion body.sch .sch-card[data-rv].in.rv-done:hover { transform: translateY(-5px); }
html.sch-motion body.sch .sch-honest[data-rv].in.rv-done:hover, html.sch-motion body.sch .sch-tb[data-rv].in.rv-done:hover, html.sch-motion body.sch .sch-pb[data-rv].in.rv-done:hover { transform: none; }


/* ---------- phones and small tablets (below 900 px; Raj 14 Oct, page 4: picture first, then the words, room to breathe) ----------
   The picture card comes first, full width, its poster scaled (never cropped) to at most 40 percent of the screen height.
   Then eyebrow, headline, problem, purpose; then the two actions together, then the two helper lines, each short and quiet.
   Desktop (900 px and wider) is untouched. */
@media (max-width: 899px) {
  body.sch { --s-wrap: calc(100% - 32px); }
  body.sch .sch-hero { padding-block: 20px 24px; }
  body.sch .sch-hero-grid { gap: 16px; }
  body.sch .sch-reel { order: -1; }
  body.sch .sch-reel-card { padding: 8px; border-radius: 24px; }
  body.sch .rb-svg { max-height: 40svh; }
  body.sch .sch-reel-foot { min-height: 40px; margin-top: 6px; padding: 0 4px; font-size: .8rem; }
  body.sch .sch-reel-cap { flex-basis: 7em; }
  body.sch .sch-again { min-height: 38px; padding: 0 13px; font-size: .86rem; }
  body.sch .sch-eyebrow { margin-bottom: 10px; }
  body.sch .sch-h1 { font-size: clamp(2rem, 1.25rem + 3.6vw, 2.9rem); line-height: 1.04; }
  body.sch .sch-problem { margin-top: 12px; font-size: 1.02rem; line-height: 1.5; }
  body.sch .sch-purpose { margin-top: 12px; font-size: 1.12rem; }
  body.sch .sch-actions { gap: 8px; margin-top: 18px; }
  body.sch .sch-actions .sch-act-row { gap: 4px 16px; margin-bottom: 6px; }
  body.sch .sch-note { font-size: .82rem; line-height: 1.4; }
  body.sch .sch-hero-base { margin-top: 28px; }
  body.sch .sch-walk::before { left: 47px; }
}
@media (max-width: 520px) { body.sch .sch-actions .sch-act-row { justify-content: center; } }
@media (max-width: 400px) { body.sch .tb-row { grid-template-columns: 4.6em minmax(0, 1fr) 2em; gap: 6px 10px; } }