/* ============================================================
   The Schools page, redesigned (2026-10-21): school-v2.html, built by tools/build-school-v2.py.
   The Platform page's look (blocks.css) plus this page's own sections. Everything is scoped to .sv2.
   Order of the page, as an educator would ask: who uses it (case studies), how it works (three layers),
   what you can buy (three classrooms), where to see it (three demo rooms), how to start, five questions.
   ============================================================ */

/* ---------------------------------------------------------------- hero: one clear classroom window (2026-10-27)
   The headline on the left, its last word underlined in green marker; on the right the real class film, large and
   straight, on white. (Until 26 Oct: a dot-grid board with floating photos and self-drawing ink.) */

/* blocks.css — film pause control (en-blocks.js); omitted from en-hardware-v2 bundle */
.ci-en-page .bl-pause { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 50%; background: rgba(255,255,255,.9); color: var(--ci-ink); cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0,0,0,.45);
  transition: background-color .2s, color .2s; }
.ci-en-page .bl-pause:hover { background: #fff; color: #00734F; }
.ci-en-page .bl-pause:focus-visible { outline: 2px solid var(--au-action); outline-offset: 3px; }
.ci-en-page .bl-pause svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.ci-en-page .bl-pause svg:last-child, .ci-en-page .bl-pause.is-paused svg:first-child { display: none; }
.ci-en-page .bl-pause.is-paused svg:last-child { display: block; }
@media (prefers-reduced-motion: reduce) { .ci-en-page .bl-pause { display: none; } }

.ci-en-page.sv2 .sv-hero { position: relative; display: grid; align-items: center; min-height: clamp(560px, calc(100svh - 86px), 860px);
                    padding: 40px 0 64px; background: #fff; color: var(--ci-ink); }
.sv-hero__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, calc(4vw / var(--zoom, 1)), 64px); align-items: center; }
.sv-hero__copy { position: relative; z-index: 3; }
.ci-en-page.sv2 .sv-hero .bl-h1 { margin: 0; font-size: clamp(42px, calc(4.3vw / var(--zoom, 1)), 66px); text-wrap: balance; }
.ci-en-page.sv2 .sv-hero .bl-h1 mark { display: block; color: #009A6B; }   /* one sentence per line group: the two halves never break into each other */
.sv-hl { position: relative; display: inline-block; white-space: nowrap; }
.sv-swash { position: absolute; left: 0; top: calc(100% - .13em); width: 100%; height: .2em; overflow: visible; pointer-events: none; }
.sv-swash .f { fill: #00AA76; opacity: .85; }
.ci-en-page.sv2 .sv-hero .bl-lead { margin: 24px 0 0; max-width: 40ch; font-size: clamp(18px, calc(1.45vw / var(--zoom, 1)), 21px); color: var(--ci-ink-70); text-wrap: pretty; }
.ci-en-page.sv2 .sv-hero .bl-acts { justify-content: flex-start; margin-top: 30px; }
.ci-en-page.sv2 .bl-head .bl-lead { text-wrap: balance; }

.sv-swash .mk { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }   /* the underline's reveal mask */
/* the film: the class itself, straight and large, with nothing over it but its pause button */
.sv-hero__film { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #DDE7E2;
                 box-shadow: 0 1px 2px rgba(28,31,37,.06), 0 32px 64px -40px rgba(28,31,37,.45); }
.sv-hero__film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-hero__film .bl-pause { background: rgba(255,255,255,.9); }

/* hero.layout "over" (2026-10-27): the film fills the opening and the words sit over it, on a dark green shade that is
   deepest behind them (white text stays readable on the brightest frame); the key phrase in a light ClassIn green.
   On a phone the words sit at the foot of the film, where the shade is deepest. */
.ci-en-page.sv2 .sv-hero.sv-hero--over { min-height: clamp(560px, calc(100svh - 86px), 820px); padding: 64px 0; overflow: hidden; background: #0B1F17; color: #fff; }
.sv-hero__bg { position: absolute; inset: 0; }
.sv-hero__bg video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-hero__shade { position: absolute; inset: 0; pointer-events: none;
                  background: linear-gradient(90deg, rgba(5,22,15,.86) 0%, rgba(5,22,15,.74) 34%, rgba(5,22,15,.28) 64%, rgba(5,22,15,.06) 100%); }
.sv-hero__bg .bl-pause { background: rgba(255,255,255,.9); }
.sv-hero--over .sv-hero__in { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr); pointer-events: none; }
.sv-hero--over .sv-hero__in a, .sv-hero--over .sv-hero__in button { pointer-events: auto; }
.sv-hero__bg .bl-pause { pointer-events: auto; }
.sv-hero--over .sv-hero__copy { max-width: 600px; }
.ci-en-page.sv2 .sv-hero--over .bl-h1 { color: #fff; }
.ci-en-page.sv2 .sv-hero--over .bl-h1 mark { color: #5CD6A6; }
.sv-hero--over .sv-swash .f { fill: #5CD6A6; }
.ci-en-page.sv2 .sv-hero--over .bl-lead { color: rgba(255,255,255,.88); }
.ci-en-page.sv2 .sv-hero--over .ci-btn--text { color: #fff; }
@media (max-width: 960px) {                              /* tablet and phone: the words at the foot of the film */
  .ci-en-page.sv2 .sv-hero.sv-hero--over { min-height: calc(100svh - 64px); align-items: end; padding: 84px 0 32px; }
  .sv-hero__shade { background: linear-gradient(180deg, rgba(5,22,15,.2) 0%, rgba(5,22,15,.55) 38%, rgba(5,22,15,.9) 72%); }
  .sv-hero__bg .bl-pause { top: 12px; right: 12px; bottom: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .sv-hero__bg { animation: sv-fade 1.4s ease-out both; }
}
@keyframes sv-fade { from { opacity: 0; } }

/* what ClassIn does for a teacher: three ticked lines under the headline (hero.points) */
.sv-hero__pts { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.sv-hero__pts li { display: flex; align-items: center; gap: 12px; font-size: clamp(18px, calc(1.45vw / var(--zoom, 1)), 21px); line-height: 1.3; font-weight: 600; }
.sv-hero__pts svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #00AA76; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* the booking button: the one thing to do here, so it is the largest thing to press */
.ci-en-page.sv2 .sv-hero .sv-hero__go { gap: 10px; height: 60px; padding: 0 32px; font-size: 19px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.45); }
.sv-hero__go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.sv-hero__go:hover svg { transform: translateX(3px); }
.ci-en-page.sv2 .sv-hero .bl-acts { align-items: center; gap: 14px 28px; }
@media (max-width: 640px) {
  .sv-hero__pts { justify-items: start; margin: 18px auto 0; width: fit-content; gap: 10px; }
  .sv-hero__pts li { font-size: 17px; }
  .sv-hero__pts svg { width: 22px; height: 22px; padding: 4px; }
  .ci-en-page.sv2 .sv-hero .sv-hero__go { height: 56px; font-size: 18px; width: 100%; max-width: 340px; justify-content: center; }
}

/* the entrance: the words, then the film, rising into place; the underline draws itself (tools/ink.py) */
@media (prefers-reduced-motion: no-preference) {
  .sv-hero__copy .bl-h1, .sv-hero__copy .bl-lead, .sv-hero__copy .bl-acts, .sv-hero__film { animation: sv-in .9s cubic-bezier(.16,1,.3,1) both; }
  .sv-hero__copy .bl-lead { animation-delay: .16s; }
  .sv-hero__copy .bl-acts { animation-delay: .28s; }
  .sv-hero__film { animation-duration: 1.2s; animation-delay: .2s; }
  .sv-swash .mk { stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: sv-draw var(--t, .3s) cubic-bezier(.4,0,.6,1) var(--d, 0s) forwards; }
}
@keyframes sv-in { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sv-draw { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- proof: two figures, then the schools' logos */
.ci-en-page.sv2 .sv-proof { padding: 64px 0 72px; text-align: center; }
.sv-proof__stats { display: flex; justify-content: center; }
.sv-proof__stats p { display: grid; justify-items: center; padding: 0 clamp(28px, calc(4.5vw / var(--zoom, 1)), 64px); }
.sv-proof__stats p + p { border-left: 1px solid rgba(28,31,37,.12); }
.sv-proof__stats b { font-size: clamp(38px, calc(3.8vw / var(--zoom, 1)), 56px); line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--ci-ink); font-variant-numeric: tabular-nums; }
.sv-proof__stats span { margin-top: 8px; font-size: 17px; line-height: 1.35; color: var(--ci-ink-70); }
.sv-proof__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 40px; margin: 44px 0 0; padding: 0; list-style: none; }
.sv-proof__logos img { display: block; height: calc(var(--h, 42) * 1px); width: auto; max-width: 260px; object-fit: contain; }   /* in their own colours (since 27 Oct) */

/* ---------------------------------------------------------------- what ClassIn provides: the Platform page's player
   (blocks.css .bl-stage). Product photos sit on their own studio grey and fill the frame; a product photo has no
   source label. The product buttons wrap onto a second line rather than scroll sideways (one scroll direction). */
.sv-prov .bl-stage__screen { max-width: min(100%, max(540px, (calc(100vh / var(--zoom, 1)) - 500px) * 16 / 9)); background: #F6F6F6; }   /* the section fits one laptop screen */
.sv-prov .bl-stage__layer .bl-stage__img { object-fit: cover; background: #F6F6F6; }
.sv-prov .bl-stage__src:empty { display: none; }
/* the switch carries the three layers' numbers, as their circles do just above */
.sv-prov .bl-seg { counter-reset: layer; }
.sv-prov .bl-seg button { display: inline-flex; align-items: center; gap: 10px; }
.sv-prov .bl-seg button::before { counter-increment: layer; content: counter(layer); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
                                  background: var(--au-action); color: #fff; font-size: 13px; font-weight: 700; }
.sv-prov .bl-seg button[aria-pressed="true"]::before { background: #fff; color: #00734F; }
.sv-prov .bl-stage__src { top: 14px; bottom: auto; }       /* the feature films carry their own step captions along the bottom */
.sv-prov .bl-tabs { flex-wrap: wrap; justify-content: center; overflow: visible; }
.sv-prov .bl-tabs > :first-child { margin-left: 0; }
.sv-prov .bl-tabs > :last-child { margin-right: 0; }
@media (max-width: 760px) {
  .sv-prov .bl-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 420px; }   /* always fits */
  .sv-prov .bl-seg button { justify-content: center; gap: 7px; padding: 0 6px; font-size: 15px; }
  .sv-prov .bl-seg button::before { width: 20px; height: 20px; font-size: 12px; }
  .sv-prov .bl-tabs { margin-inline: 0; padding-inline: 0; gap: 6px; }
  .sv-prov .bl-tab { height: 44px; padding: 0 16px; }
}

/* ---------------------------------------------------------------- case studies: the main section, a gallery of schools */
.sv-gal { position: relative; }
/* one row of cards, all in one form. The track is a grid of five rows and each card spans them as a subgrid (photo,
   type and place, name, facts, button), so every line sits at the same height on every card. */
/* .ci-en-page ul { padding: 0 } in en-hardware-v2 wins over a lone class — scope the track */
.ci-en-page .sv-gal__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, calc((100% - 40px) / 3), 400px); grid-template-rows: repeat(5, auto);
                 column-gap: 20px; row-gap: 0; margin: 0 -20px; padding: 6px 20px 28px; list-style: none; overflow-x: auto; overflow-y: hidden;
                 scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
.ci-en-page .sv-gal__track::-webkit-scrollbar { display: none; }
.sv-case { position: relative; grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; scroll-snap-align: start;
           border-radius: 28px; overflow: hidden; background: #fff;
           box-shadow: 0 1px 2px rgba(28,31,37,.05); transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s; }
.sv-case:not(.sv-case--plain):hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(28,31,37,.05), 0 24px 48px -32px rgba(28,31,37,.35); }
.sv-case__pic { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bl-grey); }
.sv-case__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.sv-case:not(.sv-case--plain):hover .sv-case__pic img { transform: scale(1.04); }
.sv-case__b { display: contents; }
.sv-case__tag { margin: 24px 26px 0; font-size: 14px; line-height: 1.3; font-weight: 700; color: #00734F; }
.sv-case__t { margin: 6px 26px 0; font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.sv-case__fig { margin: 16px 26px 0; }
.sv-case__fig b { display: block; font-size: clamp(40px, calc(3.4vw / var(--zoom, 1)), 52px); line-height: 1; font-weight: 700; letter-spacing: -.02em; color: #00734F; font-variant-numeric: tabular-nums; }
.sv-case__fig span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--ci-ink-70); text-wrap: pretty; }
/* the facts: two by two, each an icon over two to four words, read at a glance */
.sv-case__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 14px 16px; margin: 18px 26px 0; padding: 18px 0 0;
                  border-top: 1px solid rgba(28,31,37,.08); list-style: none; }
.sv-case__facts li { display: grid; gap: 8px; align-content: start; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--ci-ink); text-wrap: balance; }
.sv-case__facts svg { width: 26px; height: 26px; stroke: #00734F; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sv-case__more, .sv-case__end { justify-self: end; align-self: end; margin: 18px 24px 24px; }
.sv-case__end { width: 44px; height: 44px; }
.sv-gal__auto { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(28,31,37,.08); cursor: pointer; }
.sv-gal__auto:hover { background: rgba(28,31,37,.14); }
.sv-gal__auto svg { width: 16px; height: 16px; stroke: var(--ci-ink); fill: none; }
.sv-gal__auto svg:last-child, .sv-gal__auto.is-paused svg:first-child { display: none; }
.sv-gal__auto.is-paused svg:last-child { display: block; }
.sv-case__fig b { display: block; font-size: clamp(40px, calc(3.4vw / var(--zoom, 1)), 52px); line-height: 1; font-weight: 700; letter-spacing: -.02em; color: #00734F; font-variant-numeric: tabular-nums; }
.sv-case__fig span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--ci-ink-70); text-wrap: pretty; }
.sv-case__more { display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
                 border: 0; border-radius: 50%; background: var(--ci-ink); color: #fff; cursor: pointer; transition: background-color .25s; }
.sv-case__more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole card opens the story */
.sv-case__more svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.sv-case:hover .sv-case__more, .sv-case__more:focus-visible { background: var(--au-action); }
.sv-case__more:focus-visible { outline: 2px solid var(--au-action); outline-offset: 3px; }
.sv-gal__note { margin-right: auto; max-width: 52ch; text-wrap: balance; font-size: 13px; line-height: 1.45; color: var(--ci-ink-70); }
.sv-gal__ctl { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: 0 -20px; padding: 0 20px; width: calc(100% + 40px); box-sizing: border-box; }
.sv-gal__n { margin-right: 6px; font-size: 15px; font-weight: 600; color: var(--ci-ink-70); font-variant-numeric: tabular-nums; }
.sv-gal__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(28,31,37,.08); cursor: pointer;
               transition: background-color .2s, opacity .2s; }
.sv-gal__btn:hover { background: rgba(28,31,37,.14); }
.sv-gal__btn:disabled { opacity: .35; cursor: default; }
.sv-gal__btn svg { width: 20px; height: 20px; stroke: var(--ci-ink); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sv-gal__btn[data-dir="-1"] svg { transform: rotate(180deg); }

/* ---------------------------------------------------------------- how it works: the three layers come together
   The idea of the ClassIn deck's slide 2, told in three moments as the visitor scrolls (school-v2.js sets the variables):
   1. three photo circles, apart: a real classroom (hardware), students on their own devices (software), the AI review at
      Hwa Chong (AI); 2. they drift together and the photos give way to each layer's name; 3. the overlaps say what two
      layers do together, one after another, and the ClassIn mark lands where all three meet.
   Geometry is in units of the circle's diameter --D. Without the script every variable rests on the final picture. */
.ci-en-page.sv2 .sv-venn { background: #fff; }
.sv-venn__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.sv-venn__sub { margin-top: 16px; max-width: 30ch; font-size: 19px; line-height: 1.45; color: var(--ci-ink-70); text-wrap: pretty; }
.sv-venn__links { display: grid; justify-items: start; gap: 14px; margin-top: 30px; }
.sv-venn__links .bl-link { font-size: 17px; }
@media (min-width: 961px) { .sv-venn__in { grid-template-rows: auto 1fr; align-items: start; } .sv-venn__copy { grid-row: 1; align-self: start; } .sv-venn__fig { grid-column: 2; grid-row: 1 / 3; } .sv-venn__links { grid-column: 1; grid-row: 2; align-self: start; margin-top: 26px; } }
.sv-venn__fig { --D: min(420px, calc(27vw / var(--zoom, 1)), calc((calc(100svh / var(--zoom, 1)) - 150px) / 1.62)); --sp: 0; --ph: 0; --tx: 1; --o1: 1; --o2: 1; --o3: 1; --core: 1;
                position: relative; justify-self: center; width: calc(var(--D) * 1.62); isolation: isolate; }
.sv-venn__circles, .sv-venn__ovs { margin: 0; padding: 0; list-style: none; }
.sv-venn__circles { height: calc(var(--D) * 1.537); }
.sv-c { position: absolute; width: var(--D); height: var(--D); border-radius: 50%; mix-blend-mode: multiply;
        box-shadow: inset 0 0 0 1.5px rgba(0,170,118,.32); scale: calc(1 - var(--sp) * .2); }
.sv-c--hw { left: 0; top: 0; background: rgba(0,170,118,.16); translate: calc(var(--sp) * var(--D) * -.12) calc(var(--sp) * var(--D) * -.1); }
.sv-c--sw { left: calc(var(--D) * .62); top: 0; background: rgba(0,170,118,.16); translate: calc(var(--sp) * var(--D) * .12) calc(var(--sp) * var(--D) * -.1); }
.sv-c--ai { left: calc(var(--D) * .31); top: calc(var(--D) * .537); background: rgba(0,115,79,.16); translate: 0 calc(var(--sp) * var(--D) * .16); }
/* the first moment: each circle is a product picture on the tile grey (the Board, the platform, the AI); it gives way
   as the names come in */
.sv-c__ph { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; opacity: var(--ph); pointer-events: none;
            box-shadow: inset 0 0 0 1px rgba(28,31,37,.05); }
.sv-c__ph img { display: block; width: 100%; height: 100%; object-fit: cover; scale: calc(.96 + var(--ph) * .04); }
.sv-c__tag { position: absolute; left: 50%; bottom: 13%; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; height: 38px;
             padding: 0 16px 0 7px; border-radius: 999px; background: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5);
             font-size: 15px; font-weight: 700; color: var(--ci-ink); white-space: nowrap; opacity: var(--ph); }
.sv-c__tag i, .sv-c__k i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--au-action); color: #fff; font-style: normal; font-size: 13px; }
.sv-c__b { position: absolute; width: 52%; text-align: center; opacity: var(--tx); }
.sv-c--hw .sv-c__b { left: 9%; top: 21%; }
.sv-c--sw .sv-c__b { right: 9%; top: 21%; }
.sv-c--ai .sv-c__b { left: 24%; bottom: 12%; }
.sv-c__k { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1; font-weight: 700; color: #00734F; }
.sv-c__t { margin-top: 10px; font-size: clamp(18px, calc(var(--D) * .062), 26px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: var(--ci-ink); }
.sv-c__items { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #3C4A45; }
.sv-c__items span { display: block; }
.sv-venn__ovs { position: absolute; inset: 0; pointer-events: none; }
.sv-ov { position: absolute; width: calc(var(--D) * .3); text-align: center; }
.sv-ov__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the lens says which two layers */
.sv-ov b { display: block; font-size: clamp(14px, calc(var(--D) * .04), 17px); line-height: 1.25; font-weight: 700; color: #00402C; text-wrap: balance; }
.sv-ov--hw-sw { left: calc(var(--D) * .81); top: calc(var(--D) * .31); opacity: var(--o1); translate: -50% calc(-50% + (1 - var(--o1)) * 10px); }
.sv-ov--sw-ai { left: calc(var(--D) * 1.035); top: calc(var(--D) * .85); opacity: var(--o2); translate: -50% calc(-50% + (1 - var(--o2)) * 10px); }
.sv-ov--hw-ai { left: calc(var(--D) * .585); top: calc(var(--D) * .85); opacity: var(--o3); translate: -50% calc(-50% + (1 - var(--o3)) * 10px); }
.sv-venn__core { position: absolute; left: calc(var(--D) * .81); top: calc(var(--D) * .665); translate: -50% -50%; display: grid; place-items: center;
                 padding: 9px 12px; border-radius: 999px; background: #fff; opacity: var(--core); scale: calc(.7 + var(--core) * .3);
                 box-shadow: 0 10px 24px -12px rgba(0,60,40,.45), 0 0 0 1px rgba(0,170,118,.2); }
.sv-venn__core img { display: block; width: clamp(54px, calc(var(--D) * .17), 70px); height: auto; }
.sv-ov__n { display: none; }                              /* the two circle numbers of an overlap: phones only, when held */
.sv-venn__links--after { display: none; }                 /* the links again, after the held screen: phones only */
/* a laptop: the section holds still while the story plays (school-v2.js adds .is-pinned) */
@media (min-width: 961px) and (min-height: 640px) {
  .ci-en-page.sv2 .sv-venn.is-pinned { padding: 0; }
  .sv-venn.is-pinned .sv-venn__track { height: calc(280vh / var(--zoom, 1)); }
  .sv-venn.is-pinned .sv-venn__stage { position: sticky; top: 0; height: calc(100svh / var(--zoom, 1)); display: grid; align-items: start; padding-top: clamp(56px, calc(11svh / var(--zoom, 1)), 99px); }
}

/* ---------------------------------------------------------------- classrooms: one room at a time
   The Platform page's switch picks the setup; the room fills a white stage: photo left, name, one line, what is in the
   room with icons, install time and the action right. Then the three Singapore demo rooms as one slim strip. */
.sv-rtabs { margin: 0 auto 28px; }
.sv-rstage { display: grid; }
.sv-room { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-radius: var(--bl-r); overflow: hidden; background: #fff;
           box-shadow: 0 1px 2px rgba(28,31,37,.05); }
.sv-room[hidden] { display: grid; visibility: hidden; }
.sv-room.is-in { animation: sv-room-in .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes sv-room-in { from { opacity: 0; } to { opacity: 1; } }
.sv-room.is-in .sv-room__pic img { animation: sv-room-pic .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes sv-room-pic { from { scale: 1.04; } to { scale: 1; } }
.sv-room__pic { position: relative; margin: 0; min-height: 480px; overflow: hidden; background: var(--bl-grey); }
.sv-room__pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-room__b { display: flex; flex-direction: column; padding: clamp(28px, calc(3.4vw / var(--zoom, 1)), 48px); }
.sv-room__t { font-size: clamp(26px, calc(2.2vw / var(--zoom, 1)), 32px); line-height: 1.12; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.sv-room__p { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--ci-ink-70); text-wrap: pretty; }
.sv-room__kit { display: grid; gap: 14px; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(28,31,37,.08); list-style: none; }
.sv-room__kit li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 16px; line-height: 1.4; color: var(--ci-ink); }
.sv-room__kit svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: #EAF7F1; stroke: #00734F; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sv-room__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: auto; padding-top: 28px; }
.sv-see { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 17px; font-weight: 600; color: #00734F; text-decoration: none; }
.sv-see svg { flex: none; width: 18px; height: 18px; stroke: var(--au-action); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-see:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the demo rooms: one strip */
.sv-visit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 32px; align-items: center; margin-top: 20px; padding: 26px 30px;
            border-radius: var(--bl-r); background: #fff; scroll-margin-top: 24px; }
.sv-visit__t { font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--ci-ink); }
.sv-visit__p { margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--ci-ink-70); }
/* each room once (2026-10-27): its picture, and under it the name, the place and directions; no words on the picture.
   A room without a real photo yet shows its address on mint. On a phone each room is one row: a small picture beside
   its name. */
.sv-visit__list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.sv-place { display: grid; gap: 12px; color: var(--ci-ink); text-decoration: none; }
.sv-place:focus-visible { outline: 2px solid var(--au-action); outline-offset: 4px; border-radius: 16px; }
.sv-visit__pic { display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--bl-grey); }
.sv-visit__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-visit__addr { display: grid; place-content: center; justify-items: center; gap: 4px; height: 100%; background: #E6F6EE; color: #00402C; text-align: center; }
.sv-visit__addr svg { width: 30px; height: 30px; margin-bottom: 4px; stroke: #00734F; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sv-visit__addr b { font-size: 22px; line-height: 1.15; font-weight: 700; }
.sv-visit__addr span { font-size: 15px; color: #00734F; }
.sv-visit__name b { display: block; font-size: 17px; line-height: 1.3; font-weight: 700; }
.sv-visit__name small { display: block; margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--ci-ink-70); }
.sv-visit__dir { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #00734F; }
.sv-visit__dir svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-place:hover .sv-visit__dir { text-decoration: underline; text-underline-offset: 3px; }
.sv-visit > .ci-btn { white-space: nowrap; justify-self: start; }
@media (min-width: 961px) { .sv-visit > .ci-btn { grid-column: 2; grid-row: 1; justify-self: end; } }   /* beside the heading */
@media (max-width: 760px) {
  .sv-visit__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sv-place { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; }
  .sv-visit__pic { grid-row: 1 / 3; aspect-ratio: 4 / 3; border-radius: 12px; }
  .sv-visit__name { align-self: end; }
  .sv-visit__dir { align-self: start; min-height: 32px; }
  .sv-visit__addr b, .sv-visit__addr span { display: none; }
  .sv-visit__addr svg { margin: 0; }
}

/* ---------------------------------------------------------------- what educators say
   One quote at a time over a photo of that school (or of ClassIn in use), darkened towards the words; the photo drifts
   slowly and crossfades as the quotes turn (audience.js). The dots sit in the panel's lower left. */
.sv-voices .voices { position: relative; display: block; margin: 0; text-align: left; }
.sv-voices .voices__quotes { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: none; margin: 0; border-radius: var(--bl-r); overflow: hidden;
                             background: #0B1F17; isolation: isolate; }
.sv-voices .voice { grid-area: 1 / 1; position: relative; display: flex; align-items: center; min-height: clamp(480px, calc(62vh / var(--zoom, 1)), 600px); max-width: none; margin: 0;
                    opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
.sv-voices .voice[hidden] { display: flex; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.sv-voices .voice.is-on { animation: none; }
.sv-q__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sv-q__bg img { display: block; width: 100%; height: 100%; object-fit: cover; scale: 1.05; }
.sv-q__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,22,16,.92) 0%, rgba(6,22,16,.74) 44%, rgba(6,22,16,.22) 100%); }
@media (prefers-reduced-motion: no-preference) { .sv-voices .voice.is-on .sv-q__bg img { animation: sv-q-drift 16s ease-out both; } }
@keyframes sv-q-drift { from { scale: 1.14; } to { scale: 1.05; } }
/* a photo whose subject would sit behind the words stays on the right and fades into the dark side (wider screens) */
@media (min-width: 641px) {
  .sv-q--right .sv-q__bg { background: #06160F; }
  .sv-q--right .sv-q__bg img { position: absolute; right: 0; top: 0; width: 64%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
  .sv-q--right .sv-q__in { max-width: min(720px, 56%); }   /* the words stay on the dark side */
}
.sv-q__credit { position: absolute; right: 22px; bottom: 18px; z-index: 1; font-size: 12px; line-height: 1.3; color: rgba(255,255,255,.72); }
.sv-q__in { position: relative; max-width: 720px; padding: clamp(36px, calc(5vw / var(--zoom, 1)), 72px) clamp(36px, calc(5vw / var(--zoom, 1)), 72px) 104px; }
.sv-voices .voice blockquote { position: relative; margin: 0; padding-top: 64px; font-size: clamp(26px, calc(2.8vw / var(--zoom, 1)), 40px); line-height: 1.22; font-weight: 600;
                               letter-spacing: -.015em; color: #fff; text-align: left; text-wrap: pretty; }
.sv-voices .voice blockquote::before { content: "\201C"; position: absolute; left: -4px; top: -10px; transform: none; font-size: 104px; line-height: 1; font-weight: 700; color: #00AA76; }
.sv-voices .voice .k { color: #00AA76; }
.sv-voices .voice figcaption { display: flex; align-items: center; gap: 14px; margin-top: 30px; text-align: left; }
.sv-voices .voice figcaption > i { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; background: #fff; font-style: normal; }
.sv-voices .voice figcaption > i img { display: block; width: 40px; height: 40px; object-fit: contain; }
.sv-voices .voice figcaption b { display: block; font-size: 17px; line-height: 22px; font-weight: 700; color: #fff; }
.sv-voices .voice figcaption span span { display: block; margin-top: 2px; font-size: 15px; line-height: 20px; color: rgba(255,255,255,.78); }
.sv-voices .voices__quotes { touch-action: pan-y; }   /* a sideways swipe changes the quote (audience.js) */
.sv-voices .voices__ctl { position: absolute; left: calc(clamp(36px, calc(5vw / var(--zoom, 1)), 72px) - 17px); bottom: 22px; z-index: 2; display: flex; align-items: center; gap: 6px; }
.sv-voices .voices__dots { display: flex; align-items: center; margin: 0; }
.sv-voices .voices__auto { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); cursor: pointer; transition: background-color .25s; }
@media (hover: hover) { .sv-voices .voices__auto:hover { background: rgba(255,255,255,.28); } }
.sv-voices .voices__auto:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sv-voices .voices__auto svg { width: 16px; height: 16px; stroke: #fff; fill: none; }
.sv-voices .voices__auto svg:last-child, .sv-voices .voices__auto.is-paused svg:first-child { display: none; }
.sv-voices .voices__auto.is-paused svg:last-child { display: block; }
.sv-voices .voices__who { position: relative; overflow: hidden; box-sizing: content-box; display: block; width: 10px; height: 10px; max-width: none; flex: none; padding: 17px; border: 0;
                          border-radius: 999px; background: rgba(255,255,255,.4) content-box; box-shadow: none; cursor: pointer;
                          transition: width .4s cubic-bezier(.16,1,.3,1), background-color .3s ease; }
@media (hover: hover) { .sv-voices .voices__who:hover { background-color: rgba(255,255,255,.7); } }   /* no sticky tint after a tap */
.sv-voices .voices__who[aria-selected="true"] { width: 38px; background: rgba(255,255,255,.3) content-box; box-shadow: none; }
.sv-voices .voices__who::after { content: ""; position: absolute; inset: 17px; border-radius: 999px; background: #fff; transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
.sv-voices .voices__who.is-timing::after { opacity: 1; animation: voice-timer var(--dur, 8s) linear forwards; }   /* audience.js turns on this name */
/* the turns wait while the panel is off screen, held by the pause button, or a key has focused a control in it */
.sv-voices .voices:not(.is-live) .voices__who::after, .sv-voices .voices.is-held .voices__who::after, .sv-voices .voices:has(:focus-visible) .voices__who::after { animation-play-state: paused; }
.sv-voices .voices__who:focus-visible { outline: 2px solid #fff; outline-offset: -14px; }
@keyframes voice-timer { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .sv-voices .voices__who::after { display: none; } }

/* ---------------------------------------------------------------- the ending: book a visit or take the handbook */
.sv-close .ci-acts { justify-content: center; }
.sv-close .ci-btn--ghost { display: inline-flex; align-items: center; gap: 10px; }
.sv-close .ci-btn--ghost svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sv-close__meta { margin-top: 14px; font-size: 14px; color: rgba(255,255,255,.86); }
.ci-en-page.sv2 .sv-close .ci-h2 { max-width: 30ch; margin-inline: auto; text-wrap: balance; }

/* ---------------------------------------------------------------- questions: one centred column under one heading */
.sv-faq__list { max-width: 860px; margin: 0 auto; }
.sv-faq__more { margin-top: 28px; text-align: center; font-size: 17px; line-height: 1.5; color: var(--ci-ink-70); }
.sv-q { border-bottom: 1px solid rgba(28,31,37,.12); }
.sv-q:first-child { border-top: 1px solid rgba(28,31,37,.12); }
.sv-q summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 20px 0;
                font-size: 19px; line-height: 1.35; font-weight: 700; cursor: pointer; list-style: none; }
.sv-q summary::-webkit-details-marker { display: none; }
.sv-q summary:focus-visible { outline: 2px solid var(--au-action); outline-offset: 4px; border-radius: 6px; }
.sv-q__ic { position: relative; flex: none; width: 18px; height: 18px; }
.sv-q__ic::before, .sv-q__ic::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 1px; background: var(--au-action);
                                      transition: transform .3s cubic-bezier(.16,1,.3,1); }
.sv-q__ic::after { transform: rotate(90deg); }
.sv-q[open] .sv-q__ic::after { transform: rotate(0); }
.sv-q p { max-width: 64ch; padding: 0 0 22px; font-size: 17px; line-height: 1.55; color: var(--ci-ink-70); }

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width: 960px) {
  .sv-venn__in { grid-template-columns: minmax(0, 1fr); gap: 36px; text-align: center; }
  .sv-venn__in .bl-h2--left { text-align: center; }
  .sv-venn__sub { margin-inline: auto; }
  .sv-venn__links { justify-items: center; }
  .sv-venn__fig { --D: min(360px, calc((calc(100vw / var(--zoom, 1)) - 48px) / 1.62)); }
  .sv-room { grid-template-columns: minmax(0, 1fr); }
  .sv-room__pic { aspect-ratio: 16 / 10; min-height: 0; }
  .sv-visit { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sv-visit__go { justify-self: start; }
}
@media (max-width: 640px) {
  /* how it works on a phone: picture first, then the words of each overlap, then the links */
  .sv-venn__in { display: flex; flex-direction: column; }
  .sv-venn__links { order: 3; margin-top: 8px; gap: 10px; }
  .sv-venn__fig { --D: min(300px, calc((calc(100vw / var(--zoom, 1)) - 32px) / 1.62)); }
  .sv-c__items { display: none; }
  .sv-c__b { width: 50%; }
  .sv-c--hw .sv-c__b { left: 9%; top: 22%; }
  .sv-c--sw .sv-c__b { right: 9%; top: 22%; }
  .sv-c__t { text-wrap: balance; }
  .sv-c--ai .sv-c__b { left: 25%; bottom: 16%; }
  .sv-c__k { font-size: 12px; gap: 6px; }
  .sv-c__k i, .sv-c__tag i { width: 20px; height: 20px; font-size: 12px; }
  .sv-c__tag { height: 30px; padding: 0 11px 0 5px; gap: 6px; font-size: 12px; bottom: 11%; }
  .sv-c__t { margin-top: 6px; font-size: 15px; }
  .sv-venn__ovs { position: static; display: grid; gap: 10px; margin-top: 22px; text-align: left; pointer-events: auto; }
  .sv-ov { position: static; width: auto; padding: 14px 18px; border-radius: 18px; background: var(--bl-grey); text-align: left; }
  .sv-ov--hw-sw { translate: 0 calc((1 - var(--o1)) * 10px); }
  .sv-ov--sw-ai { translate: 0 calc((1 - var(--o2)) * 10px); }
  .sv-ov--hw-ai { translate: 0 calc((1 - var(--o3)) * 10px); }
  .sv-ov__k { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; font-size: 13px; font-weight: 700; color: #00734F; }
  .sv-ov b { margin-top: 2px; font-size: 17px; color: var(--ci-ink); }
  .sv-venn__ovs .sv-ov { opacity: 1; translate: none; }   /* below the picture they are a list: shown at once, never a blank gap */
  .ci-en-page.sv2 .sv-proof { padding: 32px 0 44px; }
  .sv-proof__logos { gap: 14px 30px; }
  .sv-proof__logos img { height: calc(var(--h, 42) * .66px); max-width: 160px; }
  /* on a phone one card shows at a time: each card stacks its own rows, no shared row heights */
  .ci-en-page .sv-gal__track { display: flex; gap: 14px; margin-inline: -16px; padding: 6px 16px 24px; scroll-padding-inline: 16px; }
  .sv-case { flex: 0 0 82%; display: flex; flex-direction: column; grid-row: auto; }
  .ci-en-page .sv-gal__track { align-items: flex-start; }               /* each card as tall as its own facts, no empty gap */
  .sv-case__more, .sv-case__end { margin-top: 14px; }
  .sv-q__credit { top: 16px; bottom: auto; }
  .sv-rtabs button { flex: 1 1 auto; }
  /* the films: the four moments as a 2 x 2 grid, all visible */
  .ci-en-page.sv2 #lesson .bl-hl__tabs { left: 0; translate: none; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: none; overflow: visible; }
  .ci-en-page.sv2 #lesson .bl-hl__thumb { display: none; }
  .ci-en-page.sv2 #lesson .bl-hl__tab { justify-content: flex-start; }
  .ci-en-page.sv2 #lesson .bl-hl__tab[aria-selected="true"] { background: linear-gradient(90deg, #C5EBDC calc(var(--p, 0) * 100%), #fff 0); box-shadow: 0 2px 10px -3px rgba(0,0,0,.2); }
  .sv-gal__ctl { flex-wrap: wrap; gap: 10px; margin-top: 4px; }
  .sv-gal__btn { display: none; }
  .sv-case__t { font-size: 21px; }
  .sv-visit { padding: 22px 18px; }
  .sv-visit__list { grid-template-columns: minmax(0, 1fr); }
  /* the rooms: three equal tabs that always fit; a long name takes two lines rather than running off the edge */
  .sv-rtabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 100%; }
  .ci-en-page.sv2 .sv-rtabs button { height: auto; min-height: 44px; padding: 6px 8px; font-size: 14px; line-height: 1.15; white-space: normal; text-wrap: balance; }
  .sv-room__b { padding: 24px 22px 26px; }
  .sv-close .ci-acts { flex-direction: column; align-items: center; }
  .sv-close .ci-btn { width: min(100%, 340px); justify-content: center; }
  /* three figures side by side on a phone: equal columns, the labels centred on two lines at most */
  .sv-proof__stats p { flex: 1 1 0; min-width: 0; padding: 0 10px; }
  .sv-proof__stats b { font-size: 28px; }
  .sv-proof__stats span { font-size: 13px; line-height: 1.3; text-align: center; text-wrap: balance; }
  .sv-gal__note { flex: 1 1 100%; max-width: none; }
  .sv-voices .voice { align-items: flex-end; min-height: 600px; }
  .sv-q__bg::after { background: linear-gradient(180deg, rgba(6,22,16,.15) 0%, rgba(6,22,16,.72) 38%, rgba(6,22,16,.94) 100%); }
  .sv-q__in { padding: 28px 22px 84px; }
  .sv-voices .voice blockquote { padding-top: 52px; font-size: 24px; }
  .sv-voices .voice blockquote::before { font-size: 84px; }
  .sv-voices .voices__ctl { left: 5px; bottom: 14px; }
  .sv-q summary { font-size: 17px; padding: 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-case, .sv-case__pic img, .sv-q__ic::before, .sv-q__ic::after { transition: none; }
}

/* readable line breaks: questions and kit lines never leave one word alone */
.sv-q summary { text-wrap: balance; }
.sv-room__kit li span { text-wrap: pretty; }
/* header and footer on the same column as the page (blocks pages use the 1180 px column) */
body.bl .ci-header .ci-w, body.bl .ci-footer .ci-w { width: min(var(--bl-w), 100% - 48px); }
@media (max-width: 640px) { body.bl .ci-header .ci-w, body.bl .ci-footer .ci-w { width: calc(100% - 32px); } }

/* ---------------------------------------------------------------- How it works held on a tablet or phone (2026-10-23)
   Like the laptop: the section holds while the scroll plays the story (school-v2.js adds .is-pinned). */
@media (min-width: 641px) and (max-width: 960px) and (min-height: 740px) {
  .ci-en-page.sv2 .sv-venn.is-pinned { padding: 0; }
  .sv-venn.is-pinned .sv-venn__track { height: calc(290svh / var(--zoom, 1)); }
  .sv-venn.is-pinned .sv-venn__stage { position: sticky; top: 0; height: calc(100svh / var(--zoom, 1)); display: grid; align-content: center; padding: 24px 0; }
  .sv-venn.is-pinned .sv-venn__in { gap: 28px; }
  .sv-venn.is-pinned .sv-venn__fig { --D: min(360px, calc((calc(100vw / var(--zoom, 1)) - 48px) / 1.62), calc((calc(100svh / var(--zoom, 1)) - 330px) / 1.537)); }
  .sv-venn.is-pinned .sv-venn__in > .sv-venn__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 0; }
}
@media (max-width: 640px) and (min-height: 560px) {
  .ci-en-page.sv2 .sv-venn.is-pinned { padding: 0 0 56px; }
  .sv-venn.is-pinned .sv-venn__track { height: calc(320svh / var(--zoom, 1)); }
  .sv-venn.is-pinned .sv-venn__stage { position: sticky; top: 0; height: calc(100svh / var(--zoom, 1)); display: grid; align-content: center; padding: 20px 0; }
  .sv-venn.is-pinned .sv-venn__in { gap: 18px; }
  .sv-venn.is-pinned .sv-venn__fig { --D: min(300px, calc((calc(100vw / var(--zoom, 1)) - 32px) / 1.62), calc((calc(100svh / var(--zoom, 1)) - 372px) / 1.537)); }
  .sv-venn.is-pinned .sv-venn__in > .sv-venn__links { display: none; }
  .sv-venn.is-pinned .sv-venn__links--after { display: grid; justify-items: center; gap: 10px; }
  /* the overlaps: one short row each, the two circle numbers then the words, arriving in turn */
  .sv-venn.is-pinned .sv-venn__ovs { gap: 8px; margin-top: 16px; justify-items: center; pointer-events: auto; }   /* so the handbook button steps aside (audience.js probe) */
  .sv-venn.is-pinned .sv-ov { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 330px; padding: 0; background: none; }
  .sv-venn.is-pinned .sv-ov__n { display: inline-flex; flex: none; gap: 3px; }
  .sv-venn.is-pinned .sv-ov__n i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--au-action); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; }
  .sv-venn.is-pinned .sv-ov__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sv-venn.is-pinned .sv-ov b { margin: 0; font-size: clamp(14px, calc(4.1vw / var(--zoom, 1)), 16px); line-height: 1.35; }   /* one line each, down to 360 px */
  .sv-venn.is-pinned .sv-ov--hw-sw { opacity: var(--o1); translate: 0 calc((1 - var(--o1)) * 10px); }
  .sv-venn.is-pinned .sv-ov--sw-ai { opacity: var(--o2); translate: 0 calc((1 - var(--o2)) * 10px); }
  .sv-venn.is-pinned .sv-ov--hw-ai { opacity: var(--o3); translate: 0 calc((1 - var(--o3)) * 10px); }
}

/* ---------------------------------------------------------------- the opening on a tablet or phone: the words, then the board */
@media (max-width: 960px) {
  .ci-en-page.sv2 .sv-hero { min-height: 0; padding: 36px 0 48px; }
  .sv-hero__in { grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: center; }
  .ci-en-page.sv2 .sv-hero .bl-lead { margin-inline: auto; }
  .ci-en-page.sv2 .sv-hero .bl-acts { justify-content: center; }
  .sv-hero__film { justify-self: center; width: 100%; max-width: 680px; border-radius: 20px; }
}
@media (max-width: 640px) {
  .ci-en-page.sv2 .sv-hero { padding: 24px 0 32px; }
  .ci-en-page.sv2 .sv-hero .bl-h1 { font-size: 36px; }
  .ci-en-page.sv2 .sv-hero .bl-lead { margin-top: 14px; font-size: 17px; }
  .ci-en-page.sv2 .sv-hero .bl-acts { flex-direction: column; align-items: center; gap: 12px; margin-top: 20px; }
  .sv-hero__in { gap: 24px; }
  .sv-hero__film { border-radius: 16px; }
  .sv-hero__film .bl-pause { right: 10px; bottom: 10px; }
}

/* ---------------------------------------------------------------- motion (2026-10-27: more noticeable than before).
   Each moment says something: a section rises into place and its key phrase lights up green after it;
   pictures settle into their frames; the figures count up (school-v2.js); the product frame grows into place as it
   comes up the screen (school-v2.js sets --g). Not on the EDUtech slides (body.ed), which pace their own. Slow and once; with reduced motion everything is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .js .ci-en-page.sv2:not(.ed) [data-reveal] { transform: translateY(56px); filter: blur(8px);
                               transition: opacity 1.1s var(--bl-ease), transform 1.1s var(--bl-ease), filter 1.1s var(--bl-ease); transition-delay: calc(var(--d, 0) * 110ms); }
  .js .ci-en-page.sv2:not(.ed) [data-reveal].is-in { transform: none; filter: none; }
  .js .ci-en-page.sv2:not(.ed) .bl-head[data-reveal] mark { color: var(--ci-ink); transition: color 1s ease .45s; }
  .js .ci-en-page.sv2:not(.ed) .bl-head[data-reveal].is-in mark { color: #009A6B; }
  .js .ci-en-page.sv2:not(.ed) .sv-case[data-reveal] .sv-case__pic img,
  .js .ci-en-page.sv2:not(.ed) .sv-visit[data-reveal] .sv-visit__pic img { scale: 1.14; transition: scale 1.8s var(--bl-ease) .1s, transform .8s cubic-bezier(.2,.7,.2,1); }
  .js .ci-en-page.sv2:not(.ed) .sv-case[data-reveal].is-in .sv-case__pic img,
  .js .ci-en-page.sv2:not(.ed) .sv-visit[data-reveal].is-in .sv-visit__pic img { scale: 1; }
  .js .ci-en-page.sv2:not(.ed) .sv-proof__logos [data-reveal] { transform: translateY(20px); transition-delay: calc(var(--d, 0) * 70ms); }
  .sv-prov .bl-stage__screen { scale: calc(.86 + var(--g, 1) * .14); transform-origin: 50% 0; }
}

/* ---------------------------------------------------------------- the handbook, unmistakable (2026-10-27):
   a large cover that itself downloads, the handbook's name as the heading, one big button. Platform and Hardware keep
   the shared look. */
.ci-en-page.sv2 .bl-hb__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: 48px; }
.ci-en-page.sv2 .bl-hb__cover { display: block; border-radius: 8px; }
.ci-en-page.sv2 .bl-hb__cover img { display: block; width: 100%; height: auto; max-height: none; border-radius: 8px; box-shadow: 0 24px 48px -24px rgba(0,73,50,.45); }
.ci-en-page.sv2 .bl-hb__cover:focus-visible { outline: 3px solid #00734F; outline-offset: 6px; }
.ci-en-page.sv2 .bl-hb__t { margin-top: 0; }
.ci-en-page.sv2 .bl-hb .ci-btn { min-height: 56px; padding: 0 28px; font-size: 18px; }
@media (max-width: 760px) {
  .ci-en-page.sv2 .bl-hb__card { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 24px; text-align: left; }
  .ci-en-page.sv2 .bl-hb__cover img { width: 100%; }
  .ci-en-page.sv2 .bl-hb__t { font-size: 30px; line-height: 1.1; }
  .ci-en-page.sv2 .bl-hb__p { margin-top: 12px; font-size: 17px; line-height: 1.45; }
  .ci-en-page.sv2 .bl-hb .bl-acts { margin-top: 20px; justify-content: flex-start; }
  .ci-en-page.sv2 .bl-hb .ci-btn { width: 100%; justify-content: center; white-space: nowrap; padding: 0 18px; font-size: 17px; }
}

/* the logo band on a laptop: two even rows (--cols, half the logos: Schools 7 + 7, Higher Education 6 + 6 since
   28 Oct), each logo centred in its column */
@media (min-width: 961px) {
  .sv-proof__logos { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); justify-items: center; align-items: center; gap: 30px 28px; }
  .sv-proof__logos li { max-width: 100%; }
  .sv-proof__logos img { max-width: 100%; }
}
/* on a tablet, three rows of equal places (--tcols): 4 + 4 + 4, or 5 + 5 + 4 with the last row centred */
@media (min-width: 641px) and (max-width: 960px) {
  .sv-proof__logos li { flex: 0 0 calc((100% - (var(--tcols, 5) - 1) * 40px) / var(--tcols, 5)); }
  .sv-proof__logos img { max-width: 100%; margin-inline: auto; }
}
/* on a phone, two to a row */
@media (max-width: 640px) {
  .sv-proof__logos li { flex: 0 0 calc((100% - 30px) / 2); }
  .sv-proof__logos img { margin-inline: auto; }
}
.ci-en-page .hb-pill { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 30;
           display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 16px; border-radius: 999px;
           background: rgba(255,255,255,.96); color: var(--ci-ink); font-size: 15px; font-weight: 700; text-decoration: none;
           box-shadow: 0 0 0 1px rgba(0,170,118,.22), 0 14px 32px -14px rgba(0,50,35,.5);
           opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity .35s ease, translate .45s cubic-bezier(.16,1,.3,1); }
.ci-en-page .hb-pill.is-on { opacity: 1; translate: none; pointer-events: auto; }
.ci-en-page .hb-pill svg { width: 18px; height: 18px; stroke: var(--au-action); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ci-en-page .hb-pill__m { display: grid; place-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--au-action); color: #fff; font-size: 13px; letter-spacing: .02em; }
.ci-en-page .hb-pill:hover .hb-pill__m { background: var(--au-action-hover, #005C3F); }
.ci-en-page .hb-pill:focus-visible { outline: 2px solid var(--au-action); outline-offset: 3px; }
@media (max-width: 640px) {
  .hb-pill { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); height: 44px; gap: 8px; padding: 0 6px 0 14px; font-size: 14px; }
  .hb-pill__m { height: 30px; padding: 0 10px; font-size: 12px; }
  /* on a phone the pill keeps to the corner: the icon and PDF (its label still names the handbook for screen readers) */
  .hb-pill { gap: 6px; padding: 0 6px 0 12px; }
  .hb-pill__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .hb-pill { transition: opacity .2s ease; translate: none; } }
@media print { .hb-pill { display: none; } }
/* the handbook button names its handbook, so on a phone a long name ("Higher Education handbook") wraps inside the button */
@media (max-width: 640px) { .au-hb .ci-btn, .bl-hb .ci-btn { justify-content: flex-start; gap: 12px; white-space: normal; height: auto; min-height: 52px; padding: 12px 24px; text-align: left; line-height: 1.25; text-wrap: balance; }
                            .au-hb .ci-btn svg, .bl-hb .ci-btn svg { flex: none; } }


/* handbook floating pill (from audience.css) */
.ci-en-page .hb-pill { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 30;
           display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 16px; border-radius: 999px;
           background: rgba(255,255,255,.96); color: var(--ci-ink); font-size: 15px; font-weight: 700; text-decoration: none;
           box-shadow: 0 0 0 1px rgba(0,170,118,.22), 0 14px 32px -14px rgba(0,50,35,.5);
           opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity .35s ease, translate .45s cubic-bezier(.16,1,.3,1); }
.ci-en-page .hb-pill.is-on { opacity: 1; translate: none; pointer-events: auto; }
.ci-en-page .hb-pill svg { width: 18px; height: 18px; stroke: var(--au-action); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ci-en-page .hb-pill__m { display: grid; place-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--au-action); color: #fff; font-size: 13px; letter-spacing: .02em; }
.ci-en-page .hb-pill:hover .ci-en-page .hb-pill__m { background: var(--au-action-hover, #005C3F); }
.ci-en-page .hb-pill:focus-visible { outline: 2px solid var(--au-action); outline-offset: 3px; }
@media (max-width: 640px) {
  .ci-en-page .hb-pill { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); height: 44px; gap: 8px; padding: 0 6px 0 14px; font-size: 14px; }
  .ci-en-page .hb-pill__m { height: 30px; padding: 0 10px; font-size: 12px; }
  /* on a phone the pill keeps to the corner: the icon and PDF (its label still names the handbook for screen readers) */
  .ci-en-page .hb-pill { gap: 6px; padding: 0 6px 0 12px; }
  .ci-en-page .hb-pill__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .ci-en-page .hb-pill { transition: opacity .2s ease; translate: none; } }
@media print { .ci-en-page .hb-pill { display: none; } }