/* ============================================================================
   Snappy for Schools — B2B landing page
   ----------------------------------------------------------------------------
   Served at /enterprise (frontend/enterprise/schools.html).

   Block prefix: .schools-*  (`.ent-*` is reserved for logged-in surfaces).
   Every value comes from design-system tokens (var(--snappy-*)); the only
   computed colors are color-mix() blends OF those tokens (translucency).

   Animation contract with schools-landing.js:
   - Demo scenes are authored in their FINAL state. JS (GSAP available, motion
     allowed, viewport > 768px) rewinds them and plays timelines.
   - `html.schools-static` marks the no-motion path: scenes stack, labels show,
     cursor stays hidden. The ≤768px media query applies the same treatment.
     It is AUTHORED ON in schools.html and dropped pre-paint by the head gate
     only when the animated experience is eligible — a no-JS / failed-GSAP
     visitor therefore never sees scenes 2-3 stranded at opacity:0.
   - `schools-anim` / `schools-anim-ready` are STATE FLAGS ONLY (head gate ↔
     schools-landing.js handshake). This stylesheet must never key a rule off
     them; if you need styling, key it off `html.schools-static` instead.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Page basics
   ---------------------------------------------------------------------------- */

html.schools-page {
    scroll-behavior: smooth;
}

body.schools {
    margin: 0;
    font-family: var(--snappy-font-primary);
    color: var(--snappy-gray-900);
    background: var(--snappy-white);
    -webkit-font-smoothing: antialiased;
}

body.schools section,
body.schools header {
    scroll-margin-top: var(--snappy-space-20);
}

body.schools *,
body.schools *::before,
body.schools *::after {
    box-sizing: border-box;
}

/* Focus visibility for every interactive control on the page */
body.schools a:focus-visible,
body.schools button:focus-visible,
body.schools summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--snappy-brand-primary-50);
    border-radius: var(--snappy-radius-sm);
}

/* ----------------------------------------------------------------------------
   Shared section primitives
   ---------------------------------------------------------------------------- */

.schools-section-head {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 0 var(--snappy-space-6);
}

.schools-section-eyebrow {
    margin: 0 0 var(--snappy-space-3);
    font-size: var(--snappy-text-caption);
    font-weight: var(--snappy-font-weight-bold);
    letter-spacing: var(--snappy-letter-spacing-widest);
    text-transform: uppercase;
    color: var(--snappy-brand-primary);
}

.schools-section-eyebrow--ondark {
    color: var(--snappy-brand-primary-light);
}

.schools-section-title {
    margin: 0 0 var(--snappy-space-4);
    font-size: var(--snappy-text-title);
    font-weight: var(--snappy-font-weight-bold);
    line-height: var(--snappy-line-height-tight);
    color: var(--snappy-gray-900);
}

.schools-section-title--ondark {
    color: var(--snappy-white);
}

.schools-section-sub {
    margin: 0 auto;
    max-width: 580px;
    font-size: var(--snappy-text-body);
    line-height: var(--snappy-line-height-relaxed);
    color: var(--snappy-gray-700);
}

.schools-section-sub--ondark {
    color: var(--snappy-brand-primary-light);
}

/* Buttons (on top of .snappy-btn base from the design system) */
.schools-btn--primary {
    background: var(--snappy-brand-primary);
    color: var(--snappy-white);
    border: none;
    font-weight: var(--snappy-font-weight-bold);
    padding: var(--snappy-space-4) var(--snappy-space-8);
    border-radius: var(--snappy-radius-medium);
    box-shadow: var(--snappy-shadow-md);
    transition: var(--snappy-transition-base);
    cursor: pointer;
}

.schools-btn--primary:hover {
    background: var(--snappy-brand-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--snappy-shadow-glow);
}

.schools-btn--ghost {
    background: transparent;
    color: var(--snappy-white);
    border: var(--snappy-border-width-thick) solid var(--snappy-brand-primary-50);
    font-weight: var(--snappy-font-weight-semibold);
    padding: var(--snappy-space-4) var(--snappy-space-8);
    border-radius: var(--snappy-radius-medium);
    text-decoration: none;
    transition: var(--snappy-transition-base);
}

.schools-btn--ghost:hover {
    border-color: var(--snappy-brand-primary);
    background: var(--snappy-brand-primary-30);
    transform: translateY(-2px);
}

.schools-btn--large {
    font-size: var(--snappy-text-body-large);
    padding: var(--snappy-space-5) var(--snappy-space-12);
}

/* ----------------------------------------------------------------------------
   Navigation
   ---------------------------------------------------------------------------- */

.schools-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--snappy-z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--snappy-space-6);
    padding: var(--snappy-space-4) var(--snappy-space-8);
    /* fallback first — older Safari/Chrome (no color-mix) keeps a solid nav */
    background: var(--snappy-brand-primary-dark);
    background: color-mix(in srgb, var(--snappy-brand-primary-dark) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform var(--snappy-duration-normal) var(--snappy-easing-default);
}

.schools-nav.is-nav-hidden {
    transform: translateY(-100%);
}

.schools-nav__brand {
    display: flex;
    align-items: baseline;
    gap: var(--snappy-space-2);
    text-decoration: none;
}

.schools-nav__wordmark {
    font-family: var(--snappy-font-logo);
    font-size: var(--snappy-text-subheading);
    color: var(--snappy-white);
    letter-spacing: var(--snappy-letter-spacing-wide);
}

.schools-nav__brand-tag {
    font-size: var(--snappy-text-caption);
    font-weight: var(--snappy-font-weight-semibold);
    color: var(--snappy-brand-primary);
    text-transform: uppercase;
    letter-spacing: var(--snappy-letter-spacing-wider);
}

.schools-nav__links {
    display: flex;
    gap: var(--snappy-space-6);
}

.schools-nav__link {
    font-size: var(--snappy-text-body-small);
    font-weight: var(--snappy-font-weight-medium);
    color: var(--snappy-brand-primary-light);
    text-decoration: none;
    transition: var(--snappy-transition-fast);
}

.schools-nav__link:hover {
    color: var(--snappy-white);
}

.schools-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--snappy-space-4);
}

.schools-nav__signin {
    /* A teacher signs in from her phone or classroom tablet (§1) — the 44px touch
       floor belongs on the BASE rule, not just the ≤480 tier: 481–768px is exactly
       the touch-tablet band, and the link measured 33px tall there (2026-08-03). */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--snappy-text-body-small);
    font-weight: var(--snappy-font-weight-semibold);
    color: var(--snappy-white);
    text-decoration: none;
    padding: var(--snappy-space-2) var(--snappy-space-4);
    border-radius: var(--snappy-radius-sm);
    transition: var(--snappy-transition-fast);
}

.schools-nav__signin:hover {
    background: var(--snappy-brand-primary-30);
}

/* "Book a demo" is the page's primary conversion action — the thing a principal
   or head of curriculum taps to start a sales conversation, and on a phone she
   taps it with a thumb. It therefore keeps `.snappy-btn`'s 44px tap floor
   (docs/RESPONSIVE_DESIGN.md §7) instead of opting out of it: this rule used to
   carry `min-height: 0`, which handed the height to the padding (41px at every
   width) and let the ≤480 padding trim below take it to 33px. Padding may
   tighten to buy horizontal room; the floor may not. */
.schools-nav__cta {
    background: var(--snappy-brand-primary);
    color: var(--snappy-white);
    border: none;
    font-weight: var(--snappy-font-weight-bold);
    font-size: var(--snappy-text-body-small);
    padding: var(--snappy-space-3) var(--snappy-space-6);
    border-radius: var(--snappy-radius-medium);
    cursor: pointer;
    transition: var(--snappy-transition-base);
}

.schools-nav__cta:hover {
    background: var(--snappy-brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--snappy-shadow-glow);
}

/* ----------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------------- */

.schools-hero {
    position: relative;
    overflow: hidden;
    background: var(--snappy-brand-primary-dark);
    padding: calc(var(--snappy-space-20) + var(--snappy-space-12)) 0 0;
}

.schools-hero__atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* fallback: two token-only gradients (a color-mix layer would void the
       whole shorthand on older engines) */
    background:
        radial-gradient(ellipse 50% 40% at 78% 18%, var(--snappy-brand-primary-30), transparent 70%),
        radial-gradient(ellipse 60% 50% at 12% 82%, var(--snappy-brand-primary-30), transparent 72%);
    background:
        radial-gradient(ellipse 50% 40% at 78% 18%, var(--snappy-brand-primary-30), transparent 70%),
        radial-gradient(ellipse 60% 50% at 12% 82%, var(--snappy-brand-primary-30), transparent 72%),
        radial-gradient(ellipse 35% 30% at 50% 55%, color-mix(in srgb, var(--snappy-brand-primary) 12%, transparent), transparent 75%);
}

.schools-hero__atmosphere::after {
    content: '';
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    border: 1px solid var(--snappy-brand-primary-30);
    box-shadow:
        0 0 0 120px color-mix(in srgb, var(--snappy-brand-primary) 4%, transparent),
        0 0 0 280px color-mix(in srgb, var(--snappy-brand-primary) 3%, transparent);
    opacity: 0.35;
}

.schools-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--snappy-space-12);
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--snappy-space-8) var(--snappy-space-8) var(--snappy-space-20);
}

.schools-hero__eyebrow {
    margin: 0 0 var(--snappy-space-4);
    font-size: var(--snappy-text-caption);
    font-weight: var(--snappy-font-weight-bold);
    letter-spacing: var(--snappy-letter-spacing-widest);
    text-transform: uppercase;
    color: var(--snappy-brand-primary);
}

.schools-hero__title {
    margin: 0 0 var(--snappy-space-6);
    font-size: var(--snappy-text-display);
    font-weight: var(--snappy-font-weight-heavy);
    line-height: var(--snappy-line-height-tight);
    color: var(--snappy-white);
}

.schools-hero__title-accent {
    color: var(--snappy-brand-primary-light);
}

.schools-hero__sub {
    margin: 0 0 var(--snappy-space-8);
    max-width: 520px;
    font-size: var(--snappy-text-body-large);
    line-height: var(--snappy-line-height-relaxed);
    color: var(--snappy-brand-primary-light);
}

.schools-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--snappy-space-4);
}

/* Floating product-artifact cards */
.schools-hero__visual {
    position: relative;
    min-height: 380px;
}

.schools-hero__card {
    position: absolute;
    background: var(--snappy-white);
    border-radius: var(--snappy-radius-xl);
    box-shadow: var(--snappy-shadow-xl);
    padding: var(--snappy-space-4) var(--snappy-space-5);
}

.schools-hero__card--reading {
    top: 6%;
    left: 4%;
    right: 12%;
    display: flex;
    align-items: center;
    gap: var(--snappy-space-3);
    transform: rotate(-2deg);
}

.schools-hero__card-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--snappy-radius-full);
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-white);
    flex-shrink: 0;
}

.schools-hero__card-avatar--a {
    background: var(--snappy-phoneme-vowel);
}

.schools-hero__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--snappy-space-1);
    min-width: 0;
}

.schools-hero__card-line {
    font-size: var(--snappy-text-body-small);
    color: var(--snappy-gray-900);
}

.schools-hero__card-sub {
    font-size: var(--snappy-text-micro);
    color: var(--snappy-gray-500);
}

.schools-hero__xp-chip {
    margin-left: auto;
    background: var(--snappy-brand-primary-very-light);
    color: var(--snappy-brand-primary-dark);
    font-size: var(--snappy-text-micro);
    font-weight: var(--snappy-font-weight-bold);
    padding: var(--snappy-space-1) var(--snappy-space-3);
    border-radius: var(--snappy-radius-full);
    white-space: nowrap;
}

/* 33% (was 38%): the bottom-anchored Sound Map card is taller than the phoneme
   chip card it replaced, so the tile card moves up to keep >10px of clearance at
   BOTH float extremes (initHeroFloat: tiles +9px, map −4px). Measured worst-case
   clearance after this change: ~18px at 1440/1280/1024/900, ~46px at 600. */
.schools-hero__card--tiles {
    top: 33%;
    right: 0;
    display: flex;
    gap: var(--snappy-space-3);
    transform: rotate(2.5deg);
    background: var(--snappy-white);
    background: color-mix(in srgb, var(--snappy-white) 92%, var(--snappy-brand-primary));
}

.schools-hero__minitile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--snappy-radius-medium);
    font-family: var(--snappy-font-phoneme);
    font-size: var(--snappy-text-heading);
    color: var(--snappy-white);
}

.schools-hero__minitile--digraph {
    background: var(--snappy-phoneme-consonant-digraph);
    color: var(--snappy-gray-900);
    box-shadow: 2px 2px 0 var(--snappy-phoneme-consonant-digraph-dark), 4px 4px 0 var(--snappy-phoneme-consonant-digraph-dark);
}

.schools-hero__minitile--vowel {
    background: var(--snappy-phoneme-vowel);
    box-shadow: 2px 2px 0 var(--snappy-phoneme-vowel-dark), 4px 4px 0 var(--snappy-phoneme-vowel-dark);
}

.schools-hero__minitile--consonant {
    background: var(--snappy-phoneme-consonant);
    box-shadow: 2px 2px 0 var(--snappy-phoneme-consonant-dark), 4px 4px 0 var(--snappy-phoneme-consonant-dark);
}

/* Sound Map thumbnail card.
   HEIGHT BUDGET (do not grow this card without redoing the sums): the hero
   canvas is a fixed 380px (.schools-hero__visual min-height) and this card is
   bottom-anchored UNDER .schools-hero__card--tiles, whose box ends at 230px and
   which floats +9px (initHeroFloat). This card floats −4px (damped there, on
   purpose). Card height 12+12 padding + 20 label + 52 map + 20 foot ≈ 116px,
   bottom:2% ⇒ top ≈ 257px ⇒ ~17px clearance at both float extremes. */
.schools-hero__card--map {
    bottom: 2%;
    left: 10%;
    right: 6%;
    transform: rotate(-1.5deg);
    padding: var(--snappy-space-3) var(--snappy-space-4);
}

.schools-hero__card--map .schools-hero__card-label {
    margin-bottom: var(--snappy-space-2);
    line-height: 1;
}

.schools-hero__card-foot {
    display: block;
    margin-top: var(--snappy-space-1);
    font-size: var(--snappy-text-micro);
    line-height: 1.3;
    color: var(--snappy-gray-500);
}

.schools-hero__card-label {
    display: block;
    margin-bottom: var(--snappy-space-3);
    font-size: var(--snappy-text-micro);
    font-weight: var(--snappy-font-weight-bold);
    letter-spacing: var(--snappy-letter-spacing-wider);
    text-transform: uppercase;
    color: var(--snappy-gray-500);
}

/* Stat strip */
.schools-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--snappy-space-6);
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--snappy-space-8);
    border-top: 1px solid var(--snappy-brand-primary-30);
}

.schools-stats__item {
    text-align: center;
}

.schools-stats__value {
    display: block;
    font-size: var(--snappy-text-heading);
    font-weight: var(--snappy-font-weight-heavy);
    color: var(--snappy-white);
}

.schools-stats__value--text {
    color: var(--snappy-brand-primary);
}

.schools-stats__label {
    font-size: var(--snappy-text-body-small);
    color: var(--snappy-brand-primary-light);
}

/* ----------------------------------------------------------------------------
   Scroll story
   ---------------------------------------------------------------------------- */

.schools-story {
    background: var(--snappy-white);
    padding: var(--snappy-space-24) 0 var(--snappy-space-16);
}

.schools-story__head {
    max-width: 720px;
    margin: 0 auto var(--snappy-space-12);
    text-align: center;
    padding: 0 var(--snappy-space-6);
}

.schools-story__sticky {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--snappy-space-12);
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--snappy-space-8);
    min-height: 100vh;
}

.schools-story__rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--snappy-space-6);
}

.schools-story__step {
    display: flex;
    gap: var(--snappy-space-4);
    padding: var(--snappy-space-5);
    border-radius: var(--snappy-radius-xl);
    border: var(--snappy-border-width) solid var(--snappy-gray-100);
    background: var(--snappy-white);
    opacity: 0.45;
    transition: opacity var(--snappy-duration-normal) var(--snappy-easing-default),
                border-color var(--snappy-duration-normal) var(--snappy-easing-default),
                box-shadow var(--snappy-duration-normal) var(--snappy-easing-default);
}

.schools-story__step.is-step-active {
    opacity: 1;
    border-color: var(--snappy-brand-primary-50);
    box-shadow: var(--snappy-shadow-lg);
}

.schools-story__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--snappy-radius-full);
    background: var(--snappy-brand-primary-very-light);
    color: var(--snappy-brand-primary-dark);
    font-weight: var(--snappy-font-weight-bold);
}

.schools-story__step.is-step-active .schools-story__step-num {
    background: var(--snappy-brand-primary);
    color: var(--snappy-white);
}

.schools-story__step-title {
    margin: var(--snappy-space-1) 0 var(--snappy-space-2);
    font-size: var(--snappy-text-body-large);
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-gray-900);
}

.schools-story__step-text {
    margin: 0;
    font-size: var(--snappy-text-body-small);
    line-height: var(--snappy-line-height-relaxed);
    color: var(--snappy-gray-700);
}

/* --- Demo frame (mini browser) --- */

.schools-demo {
    border-radius: var(--snappy-radius-2xl);
    background: var(--snappy-white);
    box-shadow: var(--snappy-shadow-xl);
    border: var(--snappy-border-width) solid var(--snappy-gray-100);
    overflow: hidden;
}

.schools-demo__chrome {
    display: flex;
    align-items: center;
    gap: var(--snappy-space-2);
    padding: var(--snappy-space-3) var(--snappy-space-4);
    background: var(--snappy-gray-50);
    border-bottom: var(--snappy-border-width) solid var(--snappy-gray-100);
}

.schools-demo__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--snappy-radius-full);
    background: var(--snappy-gray-300);
}

.schools-demo__dot:nth-child(1) { background: var(--snappy-error); }
.schools-demo__dot:nth-child(2) { background: var(--snappy-warning); }
.schools-demo__dot:nth-child(3) { background: var(--snappy-success); }

.schools-demo__url {
    margin-left: var(--snappy-space-3);
    flex: 1;
    font-size: var(--snappy-text-micro);
    color: var(--snappy-gray-500);
    background: var(--snappy-white);
    border-radius: var(--snappy-radius-full);
    padding: var(--snappy-space-1) var(--snappy-space-4);
    border: var(--snappy-border-width) solid var(--snappy-gray-100);
}

/* Scene 3 is the tallest: stats 78 + map card 228 + roster 110 ≈ 416px inside
   the 48px of scene padding. 470 keeps ~6px of slack; the sticky stage still
   fits a 700px viewport. Grow this only with the scene-3 budget re-checked. */
.schools-demo__body {
    position: relative;
    height: 470px;
    background: var(--snappy-gray-50);
}

.schools-demo__scene {
    position: absolute;
    inset: 0;
    padding: var(--snappy-space-6);
    opacity: 0;
    pointer-events: none;
}

.schools-demo__scene.is-scene-active {
    opacity: 1;
}

.schools-demo__scene-label {
    display: none;
    margin: 0 0 var(--snappy-space-4);
    font-size: var(--snappy-text-caption);
    font-weight: var(--snappy-font-weight-bold);
    letter-spacing: var(--snappy-letter-spacing-wider);
    text-transform: uppercase;
    color: var(--snappy-brand-primary);
}

/* --- Scene 1: roster + assignment modal --- */

.schools-demo__panel {
    background: var(--snappy-white);
    border-radius: var(--snappy-radius-xl);
    border: var(--snappy-border-width) solid var(--snappy-gray-100);
    box-shadow: var(--snappy-shadow-sm);
    overflow: hidden;
}

.schools-demo__panel-head {
    display: flex;
    align-items: baseline;
    gap: var(--snappy-space-3);
    padding: var(--snappy-space-4) var(--snappy-space-5);
    border-bottom: var(--snappy-border-width) solid var(--snappy-gray-100);
}

.schools-demo__panel-title {
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-gray-900);
}

.schools-demo__panel-sub {
    font-size: var(--snappy-text-micro);
    color: var(--snappy-gray-500);
}

.schools-demo__row {
    display: flex;
    align-items: center;
    gap: var(--snappy-space-3);
    padding: var(--snappy-space-3) var(--snappy-space-5);
    border-bottom: var(--snappy-border-width) solid var(--snappy-gray-50);
}

.schools-demo__row.is-row-focus {
    background: var(--snappy-brand-primary-very-light);
}

.schools-demo__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--snappy-radius-full);
    font-size: var(--snappy-text-caption);
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-white);
    flex-shrink: 0;
}

.schools-demo__avatar--m { background: var(--snappy-phoneme-diphthong); }
.schools-demo__avatar--a { background: var(--snappy-phoneme-vowel); }
.schools-demo__avatar--z { background: var(--snappy-phoneme-r-controlled); }

.schools-demo__row-name {
    font-size: var(--snappy-text-body-small);
    font-weight: var(--snappy-font-weight-semibold);
    color: var(--snappy-gray-900);
    min-width: 56px;
}

.schools-demo__row-meta {
    font-size: var(--snappy-text-micro);
    color: var(--snappy-gray-500);
    flex: 1;
}

.schools-demo__tag {
    font-size: var(--snappy-text-micro);
    font-weight: var(--snappy-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--snappy-letter-spacing-wide);
    padding: var(--snappy-space-1) var(--snappy-space-3);
    border-radius: var(--snappy-radius-full);
    white-space: nowrap;
}

.schools-demo__tag--new {
    background: var(--snappy-brand-primary-very-light);
    color: var(--snappy-brand-primary-dark);
}

.schools-demo__tag--progress {
    background: var(--snappy-warning-light);
    color: var(--snappy-gray-900);
}

.schools-demo__tag--done {
    background: var(--snappy-success-light);
    color: var(--snappy-gray-900);
}

.schools-demo__row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--snappy-radius-sm);
    background: var(--snappy-brand-primary);
    color: var(--snappy-white);
    flex-shrink: 0;
}

/* Assignment modal (decorative recreation, not a real modal) */
.schools-demo__modal {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 14%;
    background: var(--snappy-white);
    border-radius: var(--snappy-radius-xl);
    box-shadow: var(--snappy-shadow-modal);
    border: var(--snappy-border-width) solid var(--snappy-gray-100);
    overflow: hidden;
    transition: opacity var(--snappy-duration-normal) var(--snappy-easing-default),
                transform var(--snappy-duration-normal) var(--snappy-easing-default),
                visibility var(--snappy-duration-normal);
}

.schools-demo__modal.is-off {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.96);
}

.schools-demo__modal-head {
    padding: var(--snappy-space-4) var(--snappy-space-5);
    font-weight: var(--snappy-font-weight-bold);
    font-size: var(--snappy-text-body-small);
    color: var(--snappy-gray-900);
    border-bottom: var(--snappy-border-width) solid var(--snappy-gray-100);
}

.schools-demo__tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--snappy-space-3) var(--snappy-space-5);
    background: var(--snappy-gray-50);
    font-size: var(--snappy-text-caption);
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-gray-700);
    text-transform: uppercase;
    letter-spacing: var(--snappy-letter-spacing-wide);
}

.schools-demo__exercise {
    display: flex;
    align-items: center;
    gap: var(--snappy-space-3);
    padding: var(--snappy-space-3) var(--snappy-space-5);
    border-bottom: var(--snappy-border-width) solid var(--snappy-gray-50);
}

.schools-demo__check {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: var(--snappy-radius-xs);
    border: var(--snappy-border-width-thick) solid var(--snappy-gray-300);
    background: var(--snappy-white);
    transition: var(--snappy-transition-fast);
}

.schools-demo__check.is-checked {
    background: var(--snappy-brand-primary);
    border-color: var(--snappy-brand-primary);
}

.schools-demo__check.is-checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid var(--snappy-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.schools-demo__exercise-name {
    flex: 1;
    font-size: var(--snappy-text-body-small);
    color: var(--snappy-gray-900);
}

.schools-demo__exercise-words {
    font-size: var(--snappy-text-micro);
    color: var(--snappy-gray-500);
}

.schools-demo__modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--snappy-space-3);
    padding: var(--snappy-space-4) var(--snappy-space-5);
}

.schools-demo__modal-btn {
    font-size: var(--snappy-text-body-small);
    font-weight: var(--snappy-font-weight-bold);
    padding: var(--snappy-space-2) var(--snappy-space-5);
    border-radius: var(--snappy-radius-medium);
}

.schools-demo__modal-btn--ghost {
    color: var(--snappy-gray-500);
    border: var(--snappy-border-width) solid var(--snappy-gray-300);
}

.schools-demo__modal-btn--primary {
    background: var(--snappy-brand-primary);
    color: var(--snappy-white);
}

.schools-demo__toast {
    position: absolute;
    left: 50%;
    bottom: var(--snappy-space-5);
    transform: translateX(-50%) translateY(12px);
    background: var(--snappy-gray-900);
    color: var(--snappy-white);
    font-size: var(--snappy-text-body-small);
    font-weight: var(--snappy-font-weight-semibold);
    padding: var(--snappy-space-3) var(--snappy-space-6);
    border-radius: var(--snappy-radius-full);
    box-shadow: var(--snappy-shadow-toast);
    opacity: 0;
    transition: opacity var(--snappy-duration-normal) var(--snappy-easing-default),
                transform var(--snappy-duration-normal) var(--snappy-easing-default);
}

.schools-demo__toast.is-on {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --- Scene 2: student practice --- */

.schools-demo__scene--practice {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.schools-demo__practice-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.schools-demo__mascot {
    position: relative;
    width: 52px;
    height: 52px;
}

.schools-demo__mascot img {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* Dr. Snappy's voice-coach halo (mirrors the in-app is-tts-speaking cue) */
.schools-demo__mascot::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: var(--snappy-radius-full);
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        var(--snappy-brand-primary-30) 18%,
        var(--snappy-brand-primary-50) 32%,
        var(--snappy-brand-primary) 50%,
        var(--snappy-brand-primary-50) 68%,
        var(--snappy-brand-primary-30) 82%,
        transparent 100%
    );
    opacity: 0;
}

.schools-demo__mascot.is-speaking::before {
    opacity: 1;
    animation: schools-halo-rotate 3s linear infinite;
}

@keyframes schools-halo-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.schools-demo__xp-pill {
    background: var(--snappy-brand-primary);
    color: var(--snappy-white);
    font-weight: var(--snappy-font-weight-bold);
    font-size: var(--snappy-text-body-small);
    padding: var(--snappy-space-2) var(--snappy-space-4);
    border-radius: var(--snappy-radius-full);
    box-shadow: var(--snappy-shadow-md);
    transition: opacity var(--snappy-duration-normal) var(--snappy-easing-bounce),
                transform var(--snappy-duration-normal) var(--snappy-easing-bounce);
}

.schools-demo__xp-pill.is-off {
    opacity: 0;
    transform: translateY(8px) scale(0.7);
}

.schools-demo__word {
    margin: var(--snappy-space-2) 0 var(--snappy-space-4);
    font-family: var(--snappy-font-phoneme);
    font-size: var(--snappy-text-display);
    color: var(--snappy-gray-700);
    letter-spacing: var(--snappy-letter-spacing-wide);
}

.schools-demo__grapheme {
    display: inline-block;
    transition: color var(--snappy-duration-quick) var(--snappy-easing-default),
                transform var(--snappy-duration-quick) var(--snappy-easing-default);
}

.schools-demo__grapheme.is-built {
    color: var(--snappy-success);
    transform: scale(1.14) translateY(-0.04em);
}

.schools-demo__tilewrap {
    height: 122px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.schools-demo__tiles {
    position: relative;
    display: flex;
    gap: var(--snappy-space-3);
    transform: scale(0.58);
    transform-origin: top center;
}

/* The app hides tile letters globally because faces carry the glyph.
   Here letters are the no-JS fallback: schools-landing.js adds
   --with-svg-face when it mounts real faces, which re-hides them. */
.schools-demo__tiles .snappy-magnet:not(.snappy-magnet--with-svg-face) .snappy-magnet__letter {
    display: block;
}

.schools-demo__spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: var(--snappy-radius-full);
    background: var(--snappy-brand-primary);
    opacity: 0;
    pointer-events: none;
}

/* The two-zone instruction card — the landing-page mirror of the product's
   Smart Pill (styles/components/smart-pill.css). The card owns the elevation
   and the clip; the strip carries the rung colour, the caption row carries the
   mic + transcript. The strip NEVER moves or scales: only its colour and its
   words change, and those ride the CSS transitions below (no GSAP colour
   tweens), so a scrubbed / restarted timeline can never leave it half-dressed. */
.schools-demo__pill {
    width: 100%;
    max-width: 380px;
    margin-top: var(--snappy-space-3);
    background: var(--snappy-white);
    border-radius: var(--snappy-radius-large);
    box-shadow: var(--snappy-shadow-pill);
    overflow: hidden;
}

.schools-demo__pill-strip {
    /* Per-rung colours land on these two vars via the --strip--{rung} modifier. */
    --intent-accent: var(--snappy-gray-500);
    --intent-ink: var(--snappy-gray-700);
    display: flex;
    align-items: center;
    padding: var(--snappy-space-2) var(--snappy-space-4);
    background: color-mix(in srgb, var(--intent-accent) 6%, var(--snappy-white));
    transition: background 320ms ease;
}

.schools-demo__pill-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 9px;
    border-radius: var(--snappy-radius-full);
    background: var(--intent-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--intent-accent) 22%, transparent);
    transition: background 320ms ease, box-shadow 320ms ease;
}

.schools-demo__pill-label {
    flex: 0 0 auto;
    margin-right: 11px;
    font-size: var(--snappy-text-micro);
    font-weight: var(--snappy-font-weight-heavy);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--intent-ink);
    white-space: nowrap;
    transition: color 320ms ease;
}

.schools-demo__pill-action {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--snappy-text-body-small);
    font-weight: var(--snappy-font-weight-semibold);
    color: var(--snappy-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Verbatim from smart-pill.css:160-165 — only the three rungs this scene uses.
   COPY = the model, SAY = the per-sound your-turn, BLEND = the whole word. */
.schools-demo__pill-strip--copy  { --intent-accent: var(--snappy-phoneme-consonant); --intent-ink: var(--snappy-phoneme-consonant-dark); }
.schools-demo__pill-strip--say   { --intent-accent: var(--snappy-phoneme-vowel);     --intent-ink: var(--snappy-phoneme-vowel-dark); }
.schools-demo__pill-strip--blend { --intent-accent: var(--snappy-success);           --intent-ink: var(--snappy-semantic-success-dark); }

/* The card's lower zone — a hairline under the strip replaces the old floating
   caption's own background / radius / shadow (those moved up to the card). */
.schools-demo__caption {
    display: flex;
    align-items: center;
    gap: var(--snappy-space-3);
    padding: var(--snappy-space-3) var(--snappy-space-4);
    border-top: var(--snappy-border-width) solid var(--snappy-gray-100);
    font-size: var(--snappy-text-body);
    font-weight: var(--snappy-font-weight-semibold);
    color: var(--snappy-gray-700);
}

.schools-demo__mic {
    width: 10px;
    height: 10px;
    border-radius: var(--snappy-radius-full);
    background: var(--snappy-error);
    animation: schools-mic-pulse 1.2s ease-in-out infinite;
}

@keyframes schools-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--snappy-error-light); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}

/* --- Scene 3: insights --- */

.schools-demo__stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--snappy-space-3);
    margin-bottom: var(--snappy-space-4);
}

.schools-demo__stat {
    background: var(--snappy-white);
    border: var(--snappy-border-width) solid var(--snappy-gray-100);
    border-radius: var(--snappy-radius-medium);
    padding: var(--snappy-space-2) var(--snappy-space-3);
    text-align: center;
    box-shadow: var(--snappy-shadow-sm);
}

.schools-demo__stat-value {
    display: block;
    font-size: var(--snappy-text-subheading);
    font-weight: var(--snappy-font-weight-heavy);
    color: var(--snappy-brand-primary-dark);
}

.schools-demo__stat-label {
    font-size: var(--snappy-text-micro);
    text-transform: uppercase;
    letter-spacing: var(--snappy-letter-spacing-wide);
    color: var(--snappy-gray-500);
}

/* --- Scene 3 · the class Sound Map card --- */

.schools-demo__mapcard {
    background: var(--snappy-white);
    border: var(--snappy-border-width) solid var(--snappy-gray-100);
    border-radius: var(--snappy-radius-medium);
    box-shadow: var(--snappy-shadow-sm);
    padding: var(--snappy-space-3);
    margin-bottom: var(--snappy-space-3);
}

.schools-demo__mapcard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--snappy-space-3);
    margin-bottom: var(--snappy-space-2);
}

.schools-demo__mapcard-title {
    font-size: var(--snappy-text-body-small);
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-gray-900);
    line-height: 1.25;
}

.schools-demo__mapcard-hint {
    font-size: var(--snappy-text-micro);
    color: var(--snappy-gray-500);
    white-space: nowrap;
}

/* --- Scene 3 · the live roster strip --- */

.schools-demo__roster {
    background: var(--snappy-white);
    border: var(--snappy-border-width) solid var(--snappy-gray-100);
    border-radius: var(--snappy-radius-medium);
    box-shadow: var(--snappy-shadow-sm);
    overflow: hidden;
}

.schools-demo__roster-head,
.schools-demo__roster-row {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.55fr 0.8fr 0.6fr;
    align-items: center;
    gap: var(--snappy-space-2);
    padding: 0 var(--snappy-space-3);
}

.schools-demo__roster-head {
    padding-top: var(--snappy-space-2);
    padding-bottom: var(--snappy-space-2);
    background: var(--snappy-gray-50);
    font-size: var(--snappy-text-micro);
    font-weight: var(--snappy-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--snappy-letter-spacing-wide);
    color: var(--snappy-gray-500);
}

.schools-demo__roster-head span,
.schools-demo__roster-row > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schools-demo__roster-row {
    height: 30px;
    border-top: var(--snappy-border-width) solid var(--snappy-gray-50);
    font-size: var(--snappy-text-micro);
    color: var(--snappy-gray-700);
    transition: opacity var(--snappy-duration-normal) var(--snappy-easing-default),
                transform var(--snappy-duration-normal) var(--snappy-easing-default),
                background var(--snappy-duration-normal) var(--snappy-easing-default);
}

.schools-demo__roster-row.is-off {
    opacity: 0;
    transform: translateY(6px);
}

.schools-demo__roster-row.is-row-focus {
    background: var(--snappy-brand-primary-very-light);
}

.schools-demo__roster-name {
    display: flex;
    align-items: center;
    gap: var(--snappy-space-2);
    font-size: var(--snappy-text-caption);
    font-weight: var(--snappy-font-weight-semibold);
    color: var(--snappy-gray-900);
}

.schools-demo__roster-name .schools-demo__avatar {
    width: 20px;
    height: 20px;
    font-size: var(--snappy-text-micro);
    font-style: normal;
}

/* Cell shape copied from the shipped teacher roster (`_readingCells`):
   a primary wpm figure, a quiet unit, then the 28-day average. */
.schools-demo__roster-speed {
    font-size: var(--snappy-text-caption);
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-gray-900);
}

.schools-demo__roster-speed i {
    font-style: normal;
    font-weight: var(--snappy-font-weight-medium);
    font-size: var(--snappy-text-micro);
    color: var(--snappy-gray-500);
}

.schools-demo__roster-speed em {
    display: block;
    font-style: normal;
    font-weight: var(--snappy-font-weight-medium);
    font-size: var(--snappy-text-micro);
    line-height: 1;
    color: var(--snappy-gray-500);
}

.schools-demo__roster-num {
    justify-self: start;
    font-size: var(--snappy-text-caption);
    font-weight: var(--snappy-font-weight-semibold);
    color: var(--snappy-gray-700);
}

.schools-demo__roster-when {
    font-size: var(--snappy-text-micro);
    color: var(--snappy-gray-500);
}

/* The "needs you today" cell — a warning chip, the one hot spot in the roster. */
.schools-demo__roster-num.is-cell-hot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 1px var(--snappy-space-2);
    border-radius: var(--snappy-radius-full);
    background: var(--snappy-warning-light);
    color: var(--snappy-gray-900);
    font-weight: var(--snappy-font-weight-bold);
}

/* --- Simulated cursor --- */

.schools-demo__cursor {
    position: absolute;
    top: 40%;
    left: 45%;
    z-index: var(--snappy-z-dropdown);
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px var(--snappy-overlay-scrim));
}

.schools-demo__cursor-ripple {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 30px;
    height: 30px;
    border-radius: var(--snappy-radius-full);
    border: var(--snappy-border-width-thick) solid var(--snappy-brand-primary);
    opacity: 0;
    transform: scale(0.4);
}

/* ----------------------------------------------------------------------------
   Sound Map — the shared mock vocabulary (hero micro · scene-3 mini · insights full)
   ----------------------------------------------------------------------------
   Hand-built recreation of the product's SoundMap (styles/components/sound-map.css).
   It cannot reuse the real component: that one is data-driven and JS-positioned.
   The RULES it copies exactly:
     HEIGHT = accuracy (--y = 100 − accuracy), over three deep colour surfaces
              (strong ≥80 · developing 50–80 · getting started <50) — colour is
              the ONLY thing accuracy means.
     LANE   = freshness (earlier 34% · this month 22% · this week 22% · today 22%).
     SHAPE  = the rung. Colour NEVER encodes the rung — shape recipes are copied
              verbatim from sound-map.css:309-349.
   Three sizes via --map-bubble / --map-h.
   ---------------------------------------------------------------------------- */

.schools-map {
    --map-bubble: 26px;
    --map-h: 150px;
    --map-ink: var(--snappy-brand-primary-light);
    /* Static/mobile only: how far BELOW the plot the signature tooltip is
       dropped. It has to clear everything the map still keeps in flow under the
       panel — the lane row (22px) on every map — so the default is one lane row
       plus a breath. A map that carries more below the plot raises it (see the
       insights map, which also has the 56px resting shelf). */
    --map-tip-drop: 34px;
    position: relative;
}

/* The insights map keeps the lane row (22px) AND the "not enough evidence yet"
   shelf (56px) in flow below the plot, so its dropped tooltip has to clear 78px
   before it gets its own breath. */
.schools-insights__mapwrap .schools-map { --map-tip-drop: 90px; }

.schools-map__panel {
    position: relative;
    height: var(--map-h);
    border-radius: var(--snappy-radius-medium);
    /* Tooltips escape the plot, exactly as they do in the product. DO NOT set
       overflow:hidden here — it would clip the signature tooltip. */
    overflow: visible;
    background: var(--snappy-brand-primary-dark);
}

.schools-map__band {
    position: absolute;
    left: 0;
    right: 0;
}

.schools-map__band--strong {
    top: 0;
    height: 20%;
    background: color-mix(in srgb, var(--snappy-semantic-success) 36%, var(--snappy-brand-primary-dark));
    border-radius: var(--snappy-radius-medium) var(--snappy-radius-medium) 0 0;
}

.schools-map__band--developing {
    top: 20%;
    height: 30%;
    background: color-mix(in srgb, var(--snappy-semantic-warning-dark) 48%, var(--snappy-brand-primary-dark));
}

.schools-map__band--support {
    top: 50%;
    height: 50%;
    background: color-mix(in srgb, var(--snappy-semantic-error) 36%, var(--snappy-brand-primary-dark));
    border-radius: 0 0 var(--snappy-radius-medium) var(--snappy-radius-medium);
}

.schools-map__tick {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed color-mix(in srgb, var(--snappy-brand-primary-light) 62%, transparent);
}

.schools-map__tick--high { top: 20%; }
.schools-map__tick--low  { top: 50%; }

.schools-map__tick i {
    position: absolute;
    left: 6px;
    top: -7px;
    font-size: var(--snappy-text-micro);
    font-style: normal;
    font-variant-numeric: tabular-nums;
    font-weight: var(--snappy-font-weight-semibold);
    color: color-mix(in srgb, var(--snappy-brand-primary-light) 78%, transparent);
}

/* TRANSFORM OWNERSHIP: the pin is a ZERO-SIZE anchor sitting exactly on the data
   point; the bubble is pulled back onto it by NEGATIVE MARGINS (never a
   transform), so GSAP owns `transform` outright — there is no
   translate(-50%,-50%) for a scale tween to fight over.
   Do NOT centre it with `display: grid; place-items: center` instead: a
   zero-SIZE grid container still auto-sizes its implicit track to the item, so
   the bubble's top-LEFT corner lands on the data point and EVERY bubble plots
   half a bubble down-and-right of its own --x/--y (measured: pins read ~9% low
   on the mini map — bubbles crossed band lines and lane boundaries). The tip
   below and the static-mode override both assume this centred geometry. */
.schools-map__pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 0;
    height: 0;
}

.schools-map__pin > .schools-map__bubble {
    position: absolute;
    left: 0;
    top: 0;
    margin-left: calc(var(--map-bubble) / -2);
    margin-top: calc(var(--map-bubble) / -2);
}

.schools-map__pin--hot { z-index: 2; }

.schools-map__bubble {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--map-bubble, 26px);
    height: var(--map-bubble, 26px);
    border-radius: var(--snappy-radius-full);
    background: transparent;
    color: var(--map-ink, var(--snappy-brand-primary-light));
    font-family: var(--snappy-font-primary);
    transition: transform var(--snappy-duration-quick) var(--snappy-easing-default);
}

.schools-map__glyph {
    line-height: 1;
    text-transform: lowercase;
    font-size: calc(var(--map-bubble, 26px) * 0.42);
    font-weight: var(--snappy-font-weight-bold);
}

/* --- the six rung shapes + the ghost (sound-map.css:309-349 recipes) ---
   The BORDER/BACKGROUND recipes are verbatim. The ONE deliberate deviation:
   the product paints the --say / --read glyph `var(--snappy-white)`, which on
   this mock's ink (--snappy-brand-primary-light) would be white on light lilac;
   here the glyph flips to the navy panel colour so the letter stays readable.
   If sound-map.css is ever resynced into this block, KEEP the navy glyph. */
.schools-map__bubble--hear  { border: 2px dashed var(--map-ink); }
.schools-map__bubble--find  { border: 2px dotted var(--map-ink); }
.schools-map__bubble--echo  { border: 3px solid var(--map-ink); }
.schools-map__bubble--say   { background: var(--map-ink); color: var(--snappy-brand-primary-dark); }
.schools-map__bubble--blend { border: 2px solid var(--map-ink); }

.schools-map__bubble--blend::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1.5px solid var(--map-ink);
    border-radius: var(--snappy-radius-full);
}

.schools-map__bubble--read {
    background: var(--map-ink);
    color: var(--snappy-brand-primary-dark);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--map-ink) 24%, transparent);
}

.schools-map__bubble--ghost {
    border: 1.5px solid color-mix(in srgb, var(--map-ink) 26%, transparent);
    color: color-mix(in srgb, var(--map-ink) 48%, transparent);
}

/* NOTE: light-ground markers (the ladder steps, the insights key) do NOT use a
   map modifier — they sit on `.schools-ladder__chip`, a navy chip that keeps the
   on-navy ink. There is deliberately no `--onlight` variant to maintain. */

/* --- tooltip (sound-map.css:354-441 recipe, as a static mock) --- */
.schools-map__tip {
    position: absolute;
    bottom: calc(var(--map-bubble) / 2 + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 230px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--snappy-space-3);
    background: var(--snappy-brand-primary-dark);
    border: 1px solid color-mix(in srgb, var(--snappy-brand-primary-light) 32%, transparent);
    border-radius: var(--snappy-radius-medium);
    box-shadow: var(--snappy-shadow-toast);
    text-align: left;
    z-index: var(--snappy-z-tooltip);
    transition: opacity var(--snappy-duration-quick) ease;
}

.schools-map__tip-title {
    font-size: var(--snappy-text-caption);
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-white);
    padding-bottom: var(--snappy-space-1);
    border-bottom: 1px solid color-mix(in srgb, var(--snappy-white) 18%, transparent);
}

.schools-map__tip-meta     { font-size: var(--snappy-text-micro); color: var(--snappy-brand-primary-light); }
.schools-map__tip-students { font-size: var(--snappy-text-micro); color: color-mix(in srgb, var(--snappy-white) 90%, transparent); }
.schools-map__tip.is-off   { opacity: 0; }

/* Hover re-opens the signature tooltip after its scripted reveal has played. */
.schools-map__pin--hot:hover .schools-map__tip { opacity: 1; }

/* Scene 3's plot is only 138px tall and its signature pin sits at 58% of it, so
   an upward tooltip climbs OUT of the panel and parks on the card's own head
   row — and this tooltip is the authored FINAL state, so the title and the
   "shape = the step" hint would stay covered for as long as the visitor looks
   at the scene. On the mini map the tip therefore opens to the LEFT of its pin,
   vertically centred on it: inside the plot at every animated width, floating
   over other bubbles only — which is exactly what the product's own hover
   tooltip does. Scoped to the animated width band so the static / ≤768px
   drop-below treatment (lower specificity, later in the file) still governs
   the stacked stills. */
@media (min-width: 769px) {
    .schools-map--mini .schools-map__tip {
        left: auto;
        right: calc(var(--map-bubble) / 2 + 10px);
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
}

/* At the iPad-landscape edge and below, the plot is too narrow to seat the
   full-width tip to the left of the pin (clearance is only 158px at 769px), so
   the tip tightens to 150px and wraps. The ceiling is the canonical 1024 rung,
   which is also exactly where the design system's fluid type steps up: a 150px
   tip at the LARGER (>1024) type size is 103px tall against a 126px plot, so
   the narrow tip must not outlive the small type — above 1024 the clearance
   (237px+) seats the full-width card, which stays 82px tall at every type size.
   This band used to stop at 999 to dodge the old 1023/1024 type-vs-layout
   off-by-one; with type and layout sharing the 1024 ceiling the dodge is dead
   weight and the band belongs on the ladder.

   The 999 ceiling carried a SECOND, independent reason, and this retarget
   spends it knowingly: clearance already reaches 237px at 1000px, so 1000-1024
   could seat the full-width card and now gets the narrow tip instead —
   measured 150x99 through that band where a 220.9x82 card previously fit. It
   still sits wholly inside the 126px plot (23.6px of slack above the tip, 3.4px
   below), so the cost is cosmetic and staying on the ladder is worth it. Read
   as: this band is NOT free of clearance constraints; it is one clearance rule
   traded for one type rule, and the traded-away one is the tighter of the
   two — 3.4px is what is left at the bottom edge. */
@media (min-width: 769px) and (max-width: 1024px) {
    .schools-map--mini .schools-map__tip {
        max-width: 150px;
        padding: var(--snappy-space-2) var(--snappy-space-3);
    }
}

.schools-map__lanes {
    display: flex;
    margin-top: var(--snappy-space-2);
}

.schools-map__lane {
    flex: 0 0 var(--w);
    text-align: center;
    font-size: var(--snappy-text-micro);
    color: var(--snappy-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schools-map__shelf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--snappy-space-3);
    padding: 0 var(--snappy-space-3);
    background: color-mix(in srgb, var(--snappy-brand-primary-dark) 85%, var(--snappy-white));
    border: 1px dashed color-mix(in srgb, var(--snappy-white) 18%, transparent);
    border-radius: var(--snappy-radius-sm);
    height: 44px;
    margin-top: var(--snappy-space-3);
    position: relative;
}

.schools-map__shelf-label {
    font-size: var(--snappy-text-micro);
    color: var(--snappy-brand-primary-light);
}

.schools-map__shelf-ghosts {
    display: flex;
    gap: var(--snappy-space-2);
}

.schools-map--mini  { --map-bubble: 26px; --map-h: 138px; }
.schools-map--micro { --map-bubble: 18px; --map-h: 52px; }
.schools-map--full  { --map-bubble: 30px; --map-h: 300px; }

/* Lane captions on the dark insights ground read in the light brand ink. */
.schools-insights .schools-map__lane { color: var(--snappy-brand-primary-light); }

/* ----------------------------------------------------------------------------
   The Speech Ladder section
   ---------------------------------------------------------------------------- */

.schools-ladder {
    background: var(--snappy-brand-primary-very-light);
    padding: var(--snappy-space-24) var(--snappy-space-8);
}

.schools-ladder .schools-section-head {
    margin-bottom: var(--snappy-space-12);
}

/* Stage height = the tallest step: 5 treads x 22px + ~85px of step content. */
.schools-ladder__stage {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    height: 210px;
}

.schools-ladder__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* A FIXED gap (not space-between) so the dashed connector below can be
       exactly one gap wide at every viewport. */
    gap: var(--snappy-space-12);
}

.schools-ladder__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--snappy-space-2);
}

/* The staircase: each step sits one 22px tread higher than the one before it.
   Authored as nth-child rules rather than an inline `--i` custom property so a
   GSAP `clearProps` sweep (restoreFinalState) can never flatten the ladder —
   clearProps:'all' wipes the whole style attribute, custom properties included. */
.schools-ladder__step:nth-child(2) { padding-bottom: 22px; }
.schools-ladder__step:nth-child(3) { padding-bottom: 44px; }
.schools-ladder__step:nth-child(4) { padding-bottom: 66px; }
.schools-ladder__step:nth-child(5) { padding-bottom: 88px; }
.schools-ladder__step:nth-child(6) { padding-bottom: 110px; }

/* Dashed tread connector: spans exactly one gap, sitting at the midpoint
   between the two chip centres it joins (a chip centre is 46px above its own
   step's foot, and every step shares the same foot — align-items:flex-end). */
.schools-ladder__step + .schools-ladder__step::before {
    content: '';
    position: absolute;
    right: 100%;
    width: var(--snappy-space-12);
    border-top: 1px dashed var(--snappy-brand-primary-50);
}

.schools-ladder__step:nth-child(2)::before { bottom: 57px; }
.schools-ladder__step:nth-child(3)::before { bottom: 79px; }
.schools-ladder__step:nth-child(4)::before { bottom: 101px; }
.schools-ladder__step:nth-child(5)::before { bottom: 123px; }
.schools-ladder__step:nth-child(6)::before { bottom: 145px; }

/* The product's step-chip pattern: a slice of the navy instrument screen, so
   the shape key looks exactly like what it indexes (light ink on navy). */
.schools-ladder__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--snappy-space-1);
    background: var(--snappy-brand-primary-dark);
    border-radius: var(--snappy-radius-small);
    --map-ink: var(--snappy-brand-primary-light);
}

.schools-ladder__marker { --map-bubble: 30px; }

.schools-ladder__name {
    font-size: var(--snappy-text-body-small);
    font-weight: var(--snappy-font-weight-bold);
    line-height: 1.2;
    color: var(--snappy-brand-primary-dark);
}

/* The travelling sound. It is deliberately NOT a rung colour: it wears the white
   card + navy ink so it always reads as "the sound moving", never as a seventh
   state. GSAP owns transform (x/y), so the token is centred by negative margins
   — never translate(-50%,-50%). Only the SHAPE transitions, so the rung swap
   reads as a morph. */
.schools-ladder__token {
    position: absolute;
    left: 0;
    top: 0;
    --map-bubble: 34px;
    --map-ink: var(--snappy-brand-primary-dark);
    margin-left: calc(var(--map-bubble) / -2);
    margin-top: calc(var(--map-bubble) / -2);
    box-shadow: var(--snappy-shadow-md);
    z-index: 2;
    transition: border-color 260ms var(--snappy-easing-default),
                border-width 260ms var(--snappy-easing-default),
                background 260ms var(--snappy-easing-default),
                color 260ms var(--snappy-easing-default),
                box-shadow 260ms var(--snappy-easing-default);
}

/* Hollow rungs need a light ground so the ring reads over the lilac section;
   the solid rung keeps the navy fill from the shared recipe and flips its glyph
   white — the mirror of the on-navy inversion the shared recipe assumes. */
.schools-ladder__token.schools-map__bubble--echo { background: var(--snappy-white); }
.schools-ladder__token.schools-map__bubble--say  { color: var(--snappy-white); }

.schools-ladder__note {
    max-width: 620px;
    margin: var(--snappy-space-8) auto 0;
    text-align: center;
    font-size: var(--snappy-text-body-small);
    line-height: var(--snappy-line-height-relaxed);
    color: var(--snappy-gray-700);
}

.schools-ladder__rungs {
    list-style: none;
    max-width: 900px;
    margin: var(--snappy-space-10) auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--snappy-space-4) var(--snappy-space-6);
}

/* The icon sits in its own gutter (absolute, not a grid/flex column) because the
   rung's description is a bare text node after the <b> — any flex/grid on the li
   would promote it to a second item and break the two-line label/description
   stack. With the gutter as padding, the bold label AND every wrapped line of
   the description share one left edge, and nothing tucks under the icon. */
.schools-ladder__rung {
    position: relative;
    padding-left: 24px;
    font-size: var(--snappy-text-body-small);
    line-height: var(--snappy-line-height-relaxed);
    color: var(--snappy-gray-700);
}

.schools-ladder__rung b {
    display: block;
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-brand-primary-dark);
}

/* Decoration only (aria-hidden) — the label carries the meaning, and the step
   MARKER above still carries the rung as a shape. Each icon wears its rung's
   Smart Pill ink token so the support → independence colour ladder a teacher
   meets here is the same one they see on the pill inside the app. */
.schools-ladder__rung-icon {
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
}

.schools-ladder__rung-icon--hear  { color: var(--snappy-semantic-error-dark); }
.schools-ladder__rung-icon--find  { color: var(--snappy-phoneme-r-controlled-dark); }
.schools-ladder__rung-icon--echo  { color: var(--snappy-phoneme-consonant-dark); }
.schools-ladder__rung-icon--say   { color: var(--snappy-phoneme-vowel-dark); }
.schools-ladder__rung-icon--blend { color: var(--snappy-semantic-success-dark); }
.schools-ladder__rung-icon--read  { color: var(--snappy-brand-primary-dark); }

.schools-ladder__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--snappy-space-6);
    max-width: 1080px;
    margin: var(--snappy-space-12) auto 0;
}

.schools-ladder__card {
    background: var(--snappy-white);
    border: var(--snappy-border-width) solid var(--snappy-gray-100);
    border-radius: var(--snappy-radius-xl);
    padding: var(--snappy-space-6);
    box-shadow: var(--snappy-shadow-sm);
}

.schools-ladder__card-title {
    margin: 0 0 var(--snappy-space-3);
    font-size: var(--snappy-text-body-large);
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-gray-900);
}

.schools-ladder__card-text {
    margin: 0;
    font-size: var(--snappy-text-body-small);
    line-height: var(--snappy-line-height-relaxed);
    color: var(--snappy-gray-700);
}

/* ----------------------------------------------------------------------------
   Features
   ---------------------------------------------------------------------------- */

.schools-features {
    background: var(--snappy-gray-50);
    padding: var(--snappy-space-24) var(--snappy-space-8);
}

.schools-features .schools-section-head {
    margin-bottom: var(--snappy-space-12);
}

.schools-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--snappy-space-6);
    max-width: 1180px;
    margin: 0 auto;
}

.schools-feature {
    background: var(--snappy-white);
    border-radius: var(--snappy-radius-xl);
    border: var(--snappy-border-width) solid var(--snappy-gray-100);
    padding: var(--snappy-space-8);
    box-shadow: var(--snappy-shadow-sm);
    transition: var(--snappy-transition-base);
}

.schools-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--snappy-shadow-lg);
    border-color: var(--snappy-brand-primary-50);
}

.schools-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--snappy-radius-medium);
    margin-bottom: var(--snappy-space-5);
    background: var(--snappy-brand-primary-very-light);
    color: var(--snappy-brand-primary-dark);
}

.schools-feature__title {
    margin: 0 0 var(--snappy-space-3);
    font-size: var(--snappy-text-body-large);
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-gray-900);
}

.schools-feature__text {
    margin: 0;
    font-size: var(--snappy-text-body-small);
    line-height: var(--snappy-line-height-relaxed);
    color: var(--snappy-gray-700);
}

/* ----------------------------------------------------------------------------
   Insights
   ---------------------------------------------------------------------------- */

.schools-insights {
    background: var(--snappy-brand-primary-dark);
    padding: var(--snappy-space-24) var(--snappy-space-8);
}

.schools-insights__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--snappy-space-16);
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}

.schools-insights__copy .schools-section-title,
.schools-insights__copy .schools-section-sub {
    text-align: left;
    margin-left: 0;
}

.schools-insights__points {
    margin: var(--snappy-space-6) 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--snappy-space-3);
}

.schools-insights__points li {
    position: relative;
    padding-left: var(--snappy-space-7);
    color: var(--snappy-white);
    font-size: var(--snappy-text-body);
    line-height: var(--snappy-line-height-relaxed);
}

.schools-insights__points li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--snappy-brand-primary);
    font-weight: var(--snappy-font-weight-heavy);
}

/* Two key rows replace the retired 4-status legend: SHAPE = the step (six
   markers, same recipes as the plot) and HEIGHT = accuracy (the three real band
   surfaces). Labels are the product's own band names, verbatim. */
.schools-insights__keys {
    display: flex;
    flex-direction: column;
    gap: var(--snappy-space-4);
}

.schools-insights__key {
    display: flex;
    flex-direction: column;
    gap: var(--snappy-space-2);
}

.schools-insights__key-label {
    font-size: var(--snappy-text-micro);
    font-weight: var(--snappy-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--snappy-letter-spacing-wider);
    color: var(--snappy-brand-primary-light);
}

.schools-insights__key-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--snappy-space-2) var(--snappy-space-4);
}

.schools-insights__key-item {
    display: inline-flex;
    align-items: center;
    gap: var(--snappy-space-2);
    font-size: var(--snappy-text-caption);
    color: var(--snappy-brand-primary-light);
}

.schools-insights__key-item .schools-ladder__marker { --map-bubble: 22px; }

.schools-insights__swatch {
    flex: 0 0 auto;
    width: 22px;
    height: 13px;
    border-radius: var(--snappy-radius-small);
}

.schools-insights__swatch--strong {
    background: color-mix(in srgb, var(--snappy-semantic-success) 36%, var(--snappy-brand-primary-dark));
}

.schools-insights__swatch--developing {
    background: color-mix(in srgb, var(--snappy-semantic-warning-dark) 48%, var(--snappy-brand-primary-dark));
}

.schools-insights__swatch--support {
    background: color-mix(in srgb, var(--snappy-semantic-error) 36%, var(--snappy-brand-primary-dark));
}

.schools-insights__mapwrap {
    background: var(--snappy-brand-primary-30);
    background: color-mix(in srgb, var(--snappy-white) 6%, transparent);
    border: var(--snappy-border-width) solid var(--snappy-brand-primary-30);
    border-radius: var(--snappy-radius-2xl);
    padding: var(--snappy-space-8);
}

/* ----------------------------------------------------------------------------
   Rollout
   ---------------------------------------------------------------------------- */

.schools-rollout {
    background: var(--snappy-white);
    padding: var(--snappy-space-24) var(--snappy-space-8);
}

.schools-rollout .schools-section-head {
    margin-bottom: var(--snappy-space-12);
}

.schools-rollout__steps {
    counter-reset: rollout;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--snappy-space-6);
    max-width: 1180px;
}

.schools-rollout__step {
    position: relative;
    padding: var(--snappy-space-6);
    border-radius: var(--snappy-radius-xl);
    background: var(--snappy-gray-50);
    border: var(--snappy-border-width) solid var(--snappy-gray-100);
}

.schools-rollout__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: var(--snappy-space-4);
    border-radius: var(--snappy-radius-full);
    background: var(--snappy-brand-primary);
    color: var(--snappy-white);
    font-weight: var(--snappy-font-weight-bold);
}

.schools-rollout__title {
    margin: 0 0 var(--snappy-space-2);
    font-size: var(--snappy-text-body);
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-gray-900);
}

.schools-rollout__text {
    margin: 0;
    font-size: var(--snappy-text-body-small);
    line-height: var(--snappy-line-height-relaxed);
    color: var(--snappy-gray-700);
}

/* ----------------------------------------------------------------------------
   Curriculum
   ---------------------------------------------------------------------------- */

.schools-curriculum {
    background: var(--snappy-brand-primary-very-light);
    padding: var(--snappy-space-24) var(--snappy-space-8);
}

.schools-curriculum .schools-section-head {
    margin-bottom: var(--snappy-space-12);
}

.schools-curriculum__tiers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--snappy-space-5);
    max-width: 1180px;
    margin: 0 auto;
}

.schools-tier {
    background: var(--snappy-white);
    border-radius: var(--snappy-radius-xl);
    padding: var(--snappy-space-6) var(--snappy-space-4);
    text-align: center;
    box-shadow: var(--snappy-shadow-sm);
    transition: var(--snappy-transition-base);
}

.schools-tier:hover {
    transform: translateY(-4px);
    box-shadow: var(--snappy-shadow-lg);
}

.schools-tier__magnet {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: var(--snappy-space-3);
}

.schools-tier__range {
    display: block;
    font-size: var(--snappy-text-micro);
    font-weight: var(--snappy-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--snappy-letter-spacing-wider);
    color: var(--snappy-brand-primary);
    margin-bottom: var(--snappy-space-2);
}

.schools-tier__name {
    margin: 0 0 var(--snappy-space-2);
    font-size: var(--snappy-text-body);
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-gray-900);
}

.schools-tier__text {
    margin: 0;
    font-size: var(--snappy-text-caption);
    line-height: var(--snappy-line-height-relaxed);
    color: var(--snappy-gray-700);
}

/* ----------------------------------------------------------------------------
   Trust
   ---------------------------------------------------------------------------- */

.schools-trust {
    background: var(--snappy-white);
    padding: var(--snappy-space-24) var(--snappy-space-8);
}

.schools-trust .schools-section-head {
    margin-bottom: var(--snappy-space-12);
}

.schools-trust__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--snappy-space-6);
    max-width: 1080px;
    margin: 0 auto;
}

.schools-trust__card {
    text-align: center;
    padding: var(--snappy-space-8);
    border-radius: var(--snappy-radius-xl);
    border: var(--snappy-border-width) solid var(--snappy-gray-100);
}

.schools-trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--snappy-space-5);
    border-radius: var(--snappy-radius-full);
    background: var(--snappy-success-light);
    color: var(--snappy-gray-900);
}

.schools-trust__title {
    margin: 0 0 var(--snappy-space-3);
    font-size: var(--snappy-text-body-large);
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-gray-900);
}

.schools-trust__text {
    margin: 0;
    font-size: var(--snappy-text-body-small);
    line-height: var(--snappy-line-height-relaxed);
    color: var(--snappy-gray-700);
}

/* ----------------------------------------------------------------------------
   FAQ
   ---------------------------------------------------------------------------- */

.schools-faq {
    background: var(--snappy-gray-50);
    padding: var(--snappy-space-24) var(--snappy-space-8);
}

.schools-faq .schools-section-head {
    margin-bottom: var(--snappy-space-10);
}

.schools-faq__list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--snappy-space-4);
}

.schools-faq__item {
    background: var(--snappy-white);
    border: var(--snappy-border-width) solid var(--snappy-gray-100);
    border-radius: var(--snappy-radius-xl);
    padding: var(--snappy-space-5) var(--snappy-space-6);
}

.schools-faq__item[open] {
    border-color: var(--snappy-brand-primary-50);
    box-shadow: var(--snappy-shadow-sm);
}

.schools-faq__question {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--snappy-text-body);
    font-weight: var(--snappy-font-weight-bold);
    color: var(--snappy-gray-900);
}

.schools-faq__question::-webkit-details-marker {
    display: none;
}

.schools-faq__question::after {
    content: '+';
    font-size: var(--snappy-text-subheading);
    font-weight: var(--snappy-font-weight-normal);
    color: var(--snappy-brand-primary);
    transition: transform var(--snappy-duration-quick) var(--snappy-easing-default);
}

.schools-faq__item[open] .schools-faq__question::after {
    transform: rotate(45deg);
}

.schools-faq__answer {
    margin: var(--snappy-space-4) 0 0;
    font-size: var(--snappy-text-body-small);
    line-height: var(--snappy-line-height-relaxed);
    color: var(--snappy-gray-700);
}

/* ----------------------------------------------------------------------------
   Final CTA
   ---------------------------------------------------------------------------- */

.schools-cta {
    background: var(--snappy-brand-primary-dark);
    background-image:
        radial-gradient(ellipse 60% 70% at 50% 110%, var(--snappy-brand-primary-30), transparent 70%);
    padding: var(--snappy-space-24) var(--snappy-space-8);
    text-align: center;
}

.schools-cta__title {
    margin: 0 0 var(--snappy-space-4);
    font-size: var(--snappy-text-title);
    font-weight: var(--snappy-font-weight-heavy);
    color: var(--snappy-white);
}

.schools-cta__sub {
    margin: 0 auto var(--snappy-space-8);
    max-width: 480px;
    font-size: var(--snappy-text-body);
    line-height: var(--snappy-line-height-relaxed);
    color: var(--snappy-brand-primary-light);
}

/* ----------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------------- */

.schools-footer {
    background: var(--snappy-brand-primary-dark);
    border-top: 1px solid var(--snappy-brand-primary-30);
    padding: var(--snappy-space-12) var(--snappy-space-8);
}

.schools-footer__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--snappy-space-6);
    text-align: center;
}

.schools-footer__wordmark {
    font-family: var(--snappy-font-logo);
    font-size: var(--snappy-text-subheading);
    color: var(--snappy-white);
    letter-spacing: var(--snappy-letter-spacing-wide);
}

.schools-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--snappy-space-6);
}

.schools-footer__link {
    font-size: var(--snappy-text-body-small);
    color: var(--snappy-brand-primary-light);
    text-decoration: none;
    transition: var(--snappy-transition-fast);
}

.schools-footer__link:hover {
    color: var(--snappy-white);
}

.schools-footer__copyright {
    margin: 0;
    font-size: var(--snappy-text-caption);
    color: var(--snappy-brand-primary-50);
}

/* ----------------------------------------------------------------------------
   Static fallback (no GSAP / reduced motion) + mobile
   ----------------------------------------------------------------------------
   The same overrides apply when JS flags the page static and below 768px.
   ---------------------------------------------------------------------------- */

html.schools-static .schools-demo__body {
    height: auto;
}

html.schools-static .schools-demo__scene {
    position: static;
    opacity: 1;
    pointer-events: auto;
    border-bottom: var(--snappy-border-width) solid var(--snappy-gray-100);
}

html.schools-static .schools-demo__scene:last-of-type {
    border-bottom: none;
}

html.schools-static .schools-demo__scene-label {
    display: block;
}

html.schools-static .schools-demo__modal {
    position: static;
    margin-top: var(--snappy-space-4);
    box-shadow: var(--snappy-shadow-sm);
}

html.schools-static .schools-demo__toast,
html.schools-static .schools-demo__cursor {
    display: none;
}

html.schools-static .schools-story__sticky {
    min-height: 0;
}

html.schools-static .schools-demo__mic,
html.schools-static .schools-demo__mascot.is-speaking::before {
    animation: none;
}

/* The Sound Map tooltip must not float over stacked stills. The hot pin drops
   its positioning context (it stops being `position:absolute`), its bubble
   re-plots itself from the SAME inherited --x/--y so the data point is
   unchanged, and the tip re-anchors to the PANEL — landing clear below the
   plot, its lane row AND (on the insights map) the resting shelf, via each
   map's own --map-tip-drop. `.schools-map` reserves the flow space so nothing
   underneath (the roster, the shelf, the section below) can be overlapped:
   drop + the tooltip's own ~82px, less the 22px / 78px of flow already sitting
   inside that drop. */
html.schools-static .schools-demo__mapcard .schools-map { padding-bottom: 100px; }
html.schools-static .schools-insights__mapwrap .schools-map { padding-bottom: 104px; }

html.schools-static .schools-map__pin--hot { position: static; }

html.schools-static .schools-map__pin--hot .schools-map__bubble {
    position: absolute;
    left: var(--x);
    top: var(--y);
    margin-left: calc(var(--map-bubble) / -2);
    margin-top: calc(var(--map-bubble) / -2);
}

html.schools-static .schools-map__tip {
    left: 0;
    right: auto;
    bottom: auto;
    top: calc(100% + var(--map-tip-drop));
    transform: none;
    max-width: none;
}

/* The travelling token's meaning is motion; the note + the support cards carry
   it in words when there is no motion. */
html.schools-static .schools-ladder__token { display: none; }

/* ----------------------------------------------------------------------------
   Responsive — 1024 / 900 / 768 / 600 / 480 (canonical ladder rungs, in
   descending order). The 360 rung carries nothing: see the note after the
   480 block for why the nav's tag drop moved up to 480.
   ---------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .schools-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--snappy-space-16);
    }

    .schools-hero__visual {
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
    }

    .schools-story__sticky {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        gap: var(--snappy-space-8);
    }

    .schools-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .schools-insights__inner {
        grid-template-columns: 1fr;
        gap: var(--snappy-space-12);
    }

    .schools-rollout__steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .schools-curriculum__tiers {
        grid-template-columns: repeat(3, 1fr);
    }

    .schools-map--full { --map-bubble: 26px; --map-h: 260px; }

    /* Scene-3 height budget below 1024px. Two things grow as the demo frame
       narrows: the stat labels wrap (+14px) and, below ~810px, the mapcard
       title wraps under the hint (+19px) — together they pushed the Zoya roster
       row out of the 470px body, where `.schools-demo { overflow: hidden }`
       sliced it. The hint is the first thing to go (the ladder section and the
       insights key both teach the shape vocabulary in full), and the plot gives
       back 12px, which keeps the scene inside the body from 769px up. */
    .schools-demo__mapcard-hint { display: none; }

    .schools-map--mini { --map-h: 126px; }

    .schools-ladder__rungs {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 900px is the enterprise tablet tier: the roster sheds its least-scanned
   column (Missions) before anything else has to shrink. */
@media (max-width: 900px) {
    .schools-demo__roster-head span:nth-child(3),
    .schools-demo__roster-row > span:nth-child(3) {
        display: none;
    }

    .schools-demo__roster-head,
    .schools-demo__roster-row {
        grid-template-columns: 1.3fr 0.9fr 0.8fr 0.6fr;
    }
}

@media (max-width: 768px) {
    .schools-nav {
        padding: var(--snappy-space-3) var(--snappy-space-4);
    }

    .schools-nav__links {
        display: none;
    }

    .schools-hero {
        padding-top: var(--snappy-space-20);
    }

    .schools-hero__title {
        font-size: var(--snappy-text-hero);
    }

    .schools-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Story falls back to stacked static scenes (mirrors html.schools-static) */
    .schools-story__sticky {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .schools-demo__body {
        height: auto;
    }

    .schools-demo__scene {
        position: static;
        opacity: 1;
        pointer-events: auto;
        border-bottom: var(--snappy-border-width) solid var(--snappy-gray-100);
    }

    .schools-demo__scene:last-of-type {
        border-bottom: none;
    }

    .schools-demo__scene-label {
        display: block;
    }

    .schools-demo__modal {
        position: static;
        margin-top: var(--snappy-space-4);
        box-shadow: var(--snappy-shadow-sm);
    }

    .schools-demo__toast,
    .schools-demo__cursor {
        display: none;
    }

    /* Mirrors the html.schools-static tooltip treatment — see that block for
       why the hot pin gives up its positioning context and how --map-tip-drop
       clears the lane row (and, on the insights map, the shelf). */
    .schools-demo__mapcard .schools-map { padding-bottom: 100px; }
    .schools-insights__mapwrap .schools-map { padding-bottom: 104px; }

    .schools-map__pin--hot { position: static; }

    .schools-map__pin--hot .schools-map__bubble {
        position: absolute;
        left: var(--x);
        top: var(--y);
        margin-left: calc(var(--map-bubble) / -2);
        margin-top: calc(var(--map-bubble) / -2);
    }

    .schools-map__tip {
        left: 0;
        right: auto;
        bottom: auto;
        top: calc(100% + var(--map-tip-drop));
        transform: none;
        max-width: none;
    }

    /* Ladder: the staircase flattens to a centred row; the token is motion-only. */
    .schools-ladder__stage { height: auto; }

    .schools-ladder__token { display: none; }

    .schools-ladder__steps {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--snappy-space-4);
    }

    .schools-ladder__step:nth-child(n) { padding-bottom: 0; }

    .schools-ladder__step + .schools-ladder__step::before { display: none; }

    .schools-ladder__cards {
        grid-template-columns: 1fr;
    }

    .schools-trust__grid {
        grid-template-columns: 1fr;
    }

    .schools-features__grid {
        grid-template-columns: 1fr;
    }

    .schools-curriculum__tiers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .schools-hero__visual {
        min-height: 420px;
    }

    .schools-hero__card--tiles {
        right: 2%;
    }

    .schools-rollout__steps {
        grid-template-columns: 1fr;
    }

    .schools-map--full { --map-bubble: 24px; --map-h: 240px; }

    .schools-map--mini { --map-bubble: 22px; }

    .schools-ladder__rungs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    /* A teacher signs in from her phone — between classes, or after a password
       reset link lands in her inbox — so "Sign in" has to stay on screen at
       phone widths. It used to be display:none here with no replacement menu,
       which put her only sign-in path in the footer, a full page-scroll down.
       The nav buys the room back from its own gutters AND from the B2B
       qualifier: nav gap 24→12, actions gap 16→8, sign-in padding 8/16→4/8,
       CTA horizontal padding 24→16, and "for Schools" drops (the hero repeats
       it verbatim as its eyebrow one scroll-line below — it is the cheapest
       thing on the line, and cheaper than the teacher's sign-in path).

       Both remaining actions hold the 44px tap floor: sign-in takes it
       explicitly here (a text link on a laptop is a thumb target on a phone),
       and the CTA holds `.snappy-btn`'s — only its padding tightens.

       Arithmetic at the band's NARROW end, 361px — every band pinches hardest
       there, and sizing this one at 480 is exactly what produced the 361-366
       defect described below. Measured, not estimated (nav padding 16 a side
       ⇒ 329px of room):
         wordmark 47 + 12 + sign-in 57 + 8 + "Book a demo" 115 = 239px,
       i.e. 90px spare, and the line holds at one row down to our 360 floor.
       Dropping the tag at 480 rather than 360 is what keeps that true. With the
       tag still on the line, 361-366 was a 74px two-line nav with "Book a demo"
       itself broken across two lines — the band between "sign-in returns" (480)
       and "tag leaves" (360) was over-full, and it was over-full at its narrow
       end only, where nothing was measuring. (Note for the next editor: the
       wordmark is only 47px because Magnetron is a condensed display face. An
       earlier version of this comment carried ~86 for it — that number was the
       whole `.schools-nav__brand`, tag included.) */
    .schools-nav {
        gap: var(--snappy-space-3);
    }

    .schools-nav__brand-tag {
        display: none;
    }

    .schools-nav__actions {
        gap: var(--snappy-space-2);
    }

    .schools-nav__signin {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: var(--snappy-space-1) var(--snappy-space-2);
    }

    .schools-nav__cta {
        padding: var(--snappy-space-2) var(--snappy-space-4);
    }

    /* Scene 1 is the "assign a level in two taps" story, and on a phone the
       panel's own overflow:hidden was slicing the right end of the roster row —
       taking the Assign button, the one control the whole scene is about. At
       360 the panel measures ~244px against a row whose min-content ran ~274px.
       The row sheds its least-scanned cell first (the XP/streak meta — the same
       call the 900 tier makes on the Scene-3 roster), tightens its gutters, and
       is allowed to wrap so a longer status tag can never slice anything again:
         24 (padding) + 28 (avatar) + 8 + name + 8 + tag + 8 + 26 (assign)
       with the name flexing into whatever is left instead of holding a 56px
       floor. Decorative fidelity is worth less here than a scene that reads. */
    .schools-demo__row {
        flex-wrap: wrap;
        gap: var(--snappy-space-2);
        padding: var(--snappy-space-3);
    }

    .schools-demo__row-meta {
        display: none;
    }

    .schools-demo__row-name {
        flex: 1;
        min-width: 0;
    }

    .schools-hero__title {
        font-size: var(--snappy-text-title);
    }

    .schools-stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--snappy-space-4);
    }

    .schools-curriculum__tiers {
        grid-template-columns: 1fr;
    }

    .schools-demo__tiles {
        transform: scale(0.45);
    }

    .schools-demo__tilewrap {
        height: 96px;
    }

    .schools-demo__pill-action {
        white-space: normal;
    }
}

/* No 360 rung on this page: the nav's tag drop — the only thing that ever
   needed one — now happens at 480 so the whole 361-480 band is sized by the
   same rules, and nothing else on the page changes between 480 and our 360
   floor. Measured clean (no wrap, no page overflow) at 360 and at 361. */

/* ----------------------------------------------------------------------------
   Reduced motion — kill decorative loops (the static class handles scenes)
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html.schools-page {
        scroll-behavior: auto;
    }

    .schools-demo__mic,
    .schools-demo__mascot.is-speaking::before {
        animation: none;
    }

    /* The new mocks carry no keyframes, but they do cross-fade on state change
       (hover-reopened tooltips, the pill's rung colours). Mirrors the reduced-
       motion block in styles/components/sound-map.css. */
    .schools-map__bubble,
    .schools-map__tip,
    .schools-demo__pill-strip,
    .schools-demo__pill-dot,
    .schools-demo__pill-label,
    .schools-demo__roster-row,
    .schools-ladder__token {
        transition: none;
    }
}