{"enabled":true,"hero":true,"kicker":"What we offer","heading":"  ","headingAccent":" ","rotateMs":60000,"tilesLabel":"All our programmes","cta2Label":"  ","cta2Href":" ","programmes":[{"id":"pg_266115b9d16e","slug":"11-plus-mocks","href":"/11-plus-mocks","title":"11 Plus Mock Exams","navLabel":"11 Plus Mocks","tileSub":"GL, FSCE, CSSE, Quest","tileMeta":"40 papers · 5 providers","eyebrow":"Timed sections","icon":"⏱️","accent":"#C2410C","hero":{"headline":"11 Plus {Mock Exams}","body":"Full papers in GL, FSCE, CSSE, Quest and London grammar school formats. Timed by section, marked straight away, with a topic report afterwards","image":"","imageAlt":"11 Plus Mock Exams","ctaLabel":"Browse the mock papers","ctaHref":"/11-plus-mocks"},"summary":"Full mock papers in every format your child might face, with a report that says exactly what to fix next.","whatItIs":"","howSteps":[],"media":{"kind":"none","url":"","caption":"","embed":null},"details":[],"showcase":{"on":true,"eyebrow":"GL FSCE","headline":"11 Plus Mocks {Online}","summary":"GL ggdfff sfsldkfglksfjg jkfgsdklvgdkjv dj\ndfdsfsdfsdfff\ndfsdfdsfdsfgsdfds\n<br>ghgfdgdf","facts":[{"value":"15","label":"Papers"}],"cta1":{"label":"11 Plus Mocks","href":"/11-plus-mocks"},"cta2":{"label":"","href":""},"flip":true},"art":[],"artHero":{"svg":true,"svgWhich":"","items":[]},"artRow":{"svg":false,"svgWhich":"","items":[{"kind":"image","url":"/assets/image/mock1.png","alt":"","svg":""},{"kind":"image","url":"/assets/image/mock2.png","alt":"","svg":""},{"kind":"image","url":"/assets/image/mock3.png","alt":"","svg":""},{"kind":"image","url":"/assets/image/mock4.png","alt":"","svg":""},{"kind":"image","url":"/assets/image/mock5.png","alt":"","svg":""},{"kind":"image","url":"/assets/image/mock6.png","alt":"","svg":""},{"kind":"image","url":"/assets/image/mock7.png","alt":"","svg":""},{"kind":"image","url":"/assets/image/mock8.png","alt":"","svg":""}]},"blocks":[],"ctaLabel":"Browse the mock papers","ctaHref":"","groupByProvider":true,"pageCustomMode":"above","custom":{"html":"<style>\n/* 11 Plus Mock Exams — home-page section. Same shape as the PREP and Flourish\n   cards, so the three read as one family; only the accent and the panel differ. */\n.sx{--pa:#3F27BD;position:relative;padding:80px 4vw;overflow:hidden;\n  font:400 15px/1.8 'Open Sans','Segoe UI',system-ui,sans-serif;color:#6b7280}\n.sx *{box-sizing:border-box}\n.sx h2{font-family:'Poppins',sans-serif;font-weight:800;color:#1b1442;line-height:1.15;\n  margin:0;font-size:clamp(1.5rem,3.2vw,2.1rem);letter-spacing:-.02em}\n.sx p{margin:0}\n\n.mk-head{max-width:1240px;margin:0 auto 22px}\n.sx-row{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;\n  gap:40px;align-items:stretch}\n.sx-copy,.sx-art{display:flex;flex-direction:column}\n.sx-art .mk-panel{flex:1}\n\n/* ---------- left: what it is ---------- */\n.mk-card{background:#fff;border:1px solid #e9e6f5;border-radius:22px;padding:26px 28px;\n  box-shadow:0 18px 44px rgba(27,20,66,.07)}\n.mk-list{list-style:none;margin:0;padding:0;display:grid;gap:15px}\n/* the bullet and ONE span are the only grid children; a loose <b> would\n   otherwise become a grid item of its own and drop to the next row */\n.mk-list li{display:grid;grid-template-columns:11px 1fr;gap:14px;align-items:start}\n.mk-list li::before{content:\"\";width:11px;height:11px;border-radius:4px;margin-top:9px;\n  background:var(--pa);opacity:.85}\n.mk-list li > span{font-size:1rem;line-height:1.65;color:#4b5563}\n.mk-list b{color:#1b1442;font-weight:700}\n\n.mk-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}\n.mk-btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none;\n  font:700 15px/1 'Poppins',sans-serif;padding:17px 32px;border-radius:999px;\n  transition:transform .15s,box-shadow .15s,background-position .35s}\n.mk-go{color:#fff;background:linear-gradient(90deg,#5B2AD6,#C42BB0);background-size:180% 100%;\n  box-shadow:0 10px 26px rgba(91,42,214,.28)}\n.mk-go:hover{background-position:95% 0;transform:translateY(-2px)}\n.mk-ghost{background:#fff;color:#1b1442;box-shadow:inset 0 0 0 2px #e5e2f0}\n.mk-ghost:hover{box-shadow:inset 0 0 0 2px var(--pa);color:var(--pa);transform:translateY(-2px)}\n\n/* ---------- right: the carousel ---------- */\n.mk-panel{background:#fff;border:1px solid #e9e6f5;border-radius:22px;padding:24px 26px 22px;\n  box-shadow:0 18px 44px rgba(27,20,66,.07);display:flex;flex-direction:column}\n.mk-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}\n.mk-panel-head b{font:700 1.05rem/1 'Poppins',sans-serif;color:#1b1442}\n.mk-tag{font:500 .74rem/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--pa)}\n\n.mk-stage{position:relative;border-radius:16px;overflow:hidden;background:#faf9fe;\n  border:1px solid #eee9f8}\n/* a fixed frame, whatever the picture: a 900px screenshot and a 2400px photo\n   would otherwise make the card two different heights as the carousel turns */\n.mk-slide{display:none}\n.mk-slide.on{display:block;animation:mk-fade .45s ease}\n@keyframes mk-fade{from{opacity:0}to{opacity:1}}\n.mk-slide img{display:block;width:100%;height:clamp(210px,25vw,300px);object-fit:contain;\n  background:#fff}\n.mk-cap{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;\n  font:500 .82rem/1.4 'Open Sans',sans-serif;color:#fff;\n  background:linear-gradient(180deg,rgba(26,24,48,0),rgba(26,24,48,.82))}\n\n.mk-nav{position:absolute;top:50%;transform:translateY(-50%);border:0;cursor:pointer;\n  width:34px;height:34px;border-radius:50%;background:#fff;color:#1b1442;\n  box-shadow:0 4px 14px rgba(0,0,0,.16);font-size:18px;line-height:1;\n  opacity:0;transition:opacity .2s}\n.mk-stage:hover .mk-nav,.mk-nav:focus-visible{opacity:1}\n.mk-prev{left:10px} .mk-next{right:10px}\n\n.mk-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}\n.mk-dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;\n  background:#e0dcf0;transition:background .2s,transform .2s}\n.mk-dot.on{background:var(--pa);transform:scale(1.25)}\n\n.mk-note{margin-top:16px;border-radius:14px;padding:14px 18px;\n  background:#F1EEFC;color:#4a3a86;font-size:.95rem}\n.mk-note b{color:#3F27BD;font-weight:700}\n\n/* ---------- included with every mock ---------- */\n.mk-inc{max-width:1240px;margin:56px auto 0}\n.mk-kicker{font:800 1.2rem/1.2 'JetBrains Mono',monospace;letter-spacing:.18em;\n  text-transform:uppercase;color:#D22CB2;text-align:center;margin:0}\n.mk-inc h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.6rem;color:#1b1442;\n  text-align:center;margin:10px 0 26px}\n.mk-inc h3 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;\n  background:linear-gradient(90deg,#5B2AD6,#C42BB0);-webkit-background-clip:text;\n  background-clip:text;color:transparent}\n\n.mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}\n.mk-item{background:#fff;border:1px solid #e9e6f5;border-radius:20px;padding:20px 22px;\n  box-shadow:0 10px 30px rgba(27,20,66,.07);\n  opacity:0;transform:translateY(14px);\n  transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}\n.sx.go .mk-item{opacity:1;transform:none}\n.sx.go .mk-item:nth-child(2){transition-delay:.07s}\n.sx.go .mk-item:nth-child(3){transition-delay:.14s}\n.sx.go .mk-item:nth-child(4){transition-delay:.21s}\n.sx.go .mk-item:nth-child(5){transition-delay:.28s}\n.sx.go .mk-item:nth-child(6){transition-delay:.35s}\n.mk-badge{display:flex;align-items:center;justify-content:center;width:42px;height:42px;\n  border-radius:12px;background:#F1EEFC;font:700 .82rem/1 'JetBrains Mono',monospace;\n  color:var(--pa);margin-bottom:15px}\n.mk-item b{display:block;color:#1b1442;font:600 1.04rem/1.3 'Open Sans',sans-serif;margin-bottom:6px}\n.mk-item p{font-size:.92rem;line-height:1.6}\n\n\n/* ---------- the pop-out ----------\n   The overlay lives INSIDE the block, not on <body>: the block's CSS is scoped\n   to its own wrapper, so an overlay appended elsewhere would arrive unstyled.\n   position:fixed still escapes the section's overflow, because nothing above\n   it sets a transform or a filter, which are the only things that would turn\n   an ancestor into the containing block. */\n.mk-zoom{position:absolute;top:10px;right:10px;z-index:2;border:0;cursor:pointer;\n  width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.92);color:#1b1442;\n  box-shadow:0 4px 14px rgba(0,0,0,.16);font-size:15px;line-height:1;\n  opacity:0;transition:opacity .2s}\n.mk-stage:hover .mk-zoom,.mk-zoom:focus-visible{opacity:1}\n.mk-slide img{cursor:zoom-in}\n\n.mk-lb{position:fixed;inset:0;z-index:9999;display:none;\n  align-items:center;justify-content:center;padding:28px;\n  background:rgba(18,16,38,.88);backdrop-filter:blur(3px)}\n.mk-lb.on{display:flex;animation:mk-lb-in .2s ease}\n@keyframes mk-lb-in{from{opacity:0}to{opacity:1}}\n.mk-lb figure{margin:0;max-width:min(1200px,94vw);text-align:center}\n.mk-lb img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;\n  border-radius:14px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.5);\n  animation:mk-lb-pop .25s cubic-bezier(.2,1.1,.4,1)}\n@keyframes mk-lb-pop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}\n.mk-lb figcaption{color:#fff;font-size:.92rem;margin-top:14px;opacity:.9}\n.mk-lb-x{position:fixed;top:18px;right:22px;border:0;cursor:pointer;\n  width:44px;height:44px;border-radius:50%;background:#fff;color:#1b1442;\n  font-size:22px;line-height:1;box-shadow:0 6px 20px rgba(0,0,0,.3);\n  transition:transform .15s}\n.mk-lb-x:hover{transform:rotate(90deg) scale(1.05)}\n.mk-lb-step{position:fixed;top:50%;transform:translateY(-50%);border:0;cursor:pointer;\n  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);color:#1b1442;\n  font-size:24px;line-height:1;box-shadow:0 6px 20px rgba(0,0,0,.28)}\n.mk-lb-prev{left:20px} .mk-lb-next{right:20px}\n@media (max-width:620px){\n  .mk-lb{padding:14px}\n  .mk-lb-step{width:38px;height:38px}\n  .mk-lb-prev{left:8px} .mk-lb-next{right:8px}\n}\n\n@media (max-width:980px){ .mk-grid{grid-template-columns:repeat(2,1fr)} }\n@media (max-width:900px){ .sx-row{grid-template-columns:1fr;gap:26px} }\n@media (max-width:620px){ .mk-grid{grid-template-columns:1fr} }\n@media (prefers-reduced-motion:reduce){\n  .sx *{animation:none!important;transition:none!important}\n  .mk-item{opacity:1!important;transform:none!important}\n}\n</style>\n\n<div class=\"sx sx-11-plus-mocks\" style=\"--pa:#3F27BD\">\n  <div class=\"mk-head\"><h2>11 Plus Mock Exams</h2></div>\n  <div class=\"sx-row\">\n\n    <div class=\"sx-copy\">\n      <div class=\"mk-card\">\n        <ul class=\"mk-list\">\n          <li><span>Full papers in <b>GL, FSCE, CSSE, Quest</b> and London grammar school formats.</span></li>\n          <li><span>Timed by section, like the real paper. A clock for the section, and one for\n            the whole paper.</span></li>\n          <li><span>Marked as soon as the paper is handed in. Fill in the blanks and multi-answer\n            questions included.</span></li>\n          <li><span>Every question shows the working, not just the right answer.</span></li>\n          <li><span>A <b>topic by topic report</b> after each paper, rated red, amber or green.</span></li>\n          <li><span>Sit it on screen, or print it and scan the answer sheet back in.</span></li>\n          <li><span><b>40 papers</b> across five providers. More added through the year.</span></li>\n        </ul>\n      </div>\n      <div class=\"mk-ctas\">\n        <a class=\"mk-btn mk-go\" href=\"/11-plus-mocks\">Browse the mock papers →</a>\n        <a class=\"mk-btn mk-ghost\" href=\"/11-plus-mocks#report\">See a marked result</a>\n      </div>\n    </div>\n\n    <div class=\"sx-art\">\n      <div class=\"mk-panel\">\n        <div class=\"mk-panel-head\"><b>What it looks like</b><span class=\"mk-tag\"></span></div>\n\n        <div class=\"mk-stage\" data-mk-stage>\n          <!-- To add another picture, copy one figure and drop it in. The dots\n               and the arrows count the slides themselves, so nothing else needs\n               changing. -->\n\t\t  <figure class=\"mk-slide on\">\n            <img src=\"/assets/image/mock1.png\" alt=\"A timed mock paper open on screen, with the section clock and the question palette.\" loading=\"lazy\">\n            \n          </figure>\n          <figure class=\"mk-slide\">\n            <img src=\"/assets/image/mock2.png\" alt=\"The marked result, with the score, the pass mark and the topic breakdown.\" loading=\"lazy\">\n            \n          </figure>\n\t\t  <figure class=\"mk-slide\">\n            <img src=\"/assets/image/mock3.png\" alt=\"The marked result, with the score, the pass mark and the topic breakdown.\" loading=\"lazy\">\n            \n          </figure>\n\t\t  <figure class=\"mk-slide\">\n            <img src=\"/assets/image/mock4.png\" alt=\"The marked result, with the score, the pass mark and the topic breakdown.\" loading=\"lazy\">\n            \n          </figure>\n\t\t  <figure class=\"mk-slide\">\n            <img src=\"/assets/image/mock5.png\" alt=\"The marked result, with the score, the pass mark and the topic breakdown.\" loading=\"lazy\">\n            \n          </figure>\n\t\t  <figure class=\"mk-slide\">\n            <img src=\"/assets/image/mock6.png\" alt=\"The marked result, with the score, the pass mark and the topic breakdown.\" loading=\"lazy\">\n           \n          </figure>\n\t\t  <figure class=\"mk-slide\">\n            <img src=\"/assets/image/mock7.png\" alt=\"The marked result, with the score, the pass mark and the topic breakdown.\" loading=\"lazy\">\n           \n          </figure>\n\t\t  <figure class=\"mk-slide\">\n            <img src=\"/assets/image/mock8.png\" alt=\"The marked result, with the score, the pass mark and the topic breakdown.\" loading=\"lazy\">\n           \n          </figure>\n\t\t  <figure class=\"mk-slide\">\n            <img src=\"/assets/image/mock9.png\" alt=\"The marked result, with the score, the pass mark and the topic breakdown.\" loading=\"lazy\">\n           \n          </figure>\n\n          <button class=\"mk-zoom\" type=\"button\" data-mk-open aria-label=\"See this picture larger\">⤢</button>\n          <button class=\"mk-nav mk-prev\" type=\"button\" data-mk-step=\"-1\" aria-label=\"Previous picture\">‹</button>\n          <button class=\"mk-nav mk-next\" type=\"button\" data-mk-step=\"1\" aria-label=\"Next picture\">›</button>\n        </div>\n        <div class=\"mk-dots\" data-mk-dots></div>\n\n        <p class=\"mk-note\"><b>Every paper is timed, marked and explained.</b> The report tells you\n          what to work on next.</p>\n      </div>\n    </div>\n\n  </div>\n\n  <div class=\"mk-lb\" data-mk-lb role=\"dialog\" aria-modal=\"true\" aria-label=\"Picture, larger\">\n    <button class=\"mk-lb-step mk-lb-prev\" type=\"button\" data-mk-lb-step=\"-1\" aria-label=\"Previous picture\">‹</button>\n    <figure>\n      <img data-mk-lb-img src=\"\" alt=\"\">\n      <figcaption data-mk-lb-cap></figcaption>\n    </figure>\n    <button class=\"mk-lb-step mk-lb-next\" type=\"button\" data-mk-lb-step=\"1\" aria-label=\"Next picture\">›</button>\n    <button class=\"mk-lb-x\" type=\"button\" data-mk-lb-close aria-label=\"Close\">✕</button>\n  </div>\n\n  <!-- ---------- included with every mock ---------- -->\n  <div class=\"mk-inc\">\n    <p class=\"mk-kicker\"></p>\n    <h3>What is in <em>every paper</em></h3>\n\n    <div class=\"mk-grid\">\n      <article class=\"mk-item\">\n        <span class=\"mk-badge\">⏱</span>\n        <b>Timed by section</b>\n        <p>Each section has its own clock. The whole paper is timed alongside it, the same as\n          on the day.</p>\n      </article>\n      <article class=\"mk-item\">\n        <span class=\"mk-badge\">5</span>\n        <b>Five paper formats</b>\n        <p>GL, FSCE, CSSE, Quest and London grammar school. The layout is the one they will\n          see.</p>\n      </article>\n      <article class=\"mk-item\">\n        <span class=\"mk-badge\">✓</span>\n        <b>Marked instantly</b>\n        <p>Fill in the blanks are marked blank by blank. Questions with more than one right\n          answer are marked properly too.</p>\n      </article>\n      <article class=\"mk-item\">\n        <span class=\"mk-badge\">?</span>\n        <b>The working, every time</b>\n        <p>Every question shows how the answer is reached, ready as soon as the paper is\n          handed in.</p>\n      </article>\n      <article class=\"mk-item\">\n        <span class=\"mk-badge\">RAG</span>\n        <b>A topic by topic report</b>\n        <p>Every topic rated red, amber or green, with the weakest three listed and what to\n          practise next.</p>\n      </article>\n      <article class=\"mk-item\">\n        <span class=\"mk-badge\">✎</span>\n        <b>On screen or on paper</b>\n        <p>Print it and scan the answer sheet back in if you would rather. The report is the\n          same.</p>\n      </article>\n    </div>\n\n    <div class=\"mk-ctas\">\n      <a class=\"mk-btn mk-go\" href=\"/11-plus-mocks\">Browse the mock papers →</a>\n      <a class=\"mk-btn mk-ghost\" href=\"/11-plus-mocks#report\">See a marked result</a>\n    </div>\n  </div>\n</div>\n\n<script>\n(function () {\n  /* Scoped to THIS block, and by CLASS rather than by id: a block's ids can be\n     namespaced when it is placed on a page, so getElementById is the one thing\n     a pasted block should never rely on. */\n  var root = document.currentScript && document.currentScript.closest(\".sx\");\n  if (!root) { var all = document.querySelectorAll(\".sx.sx-11-plus-mocks\"); root = all[all.length - 1]; }\n  if (!root || root.dataset.on) return;\n  root.dataset.on = \"1\";\n\n  var reduced = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n  /* reveal */\n  var go = function () { root.classList.add(\"go\"); };\n  if (!(\"IntersectionObserver\" in window)) go();\n  else {\n    var io = new IntersectionObserver(function (es) {\n      es.forEach(function (e) { if (e.isIntersecting) { go(); io.disconnect(); } });\n    }, { threshold: 0, rootMargin: \"0px 0px -14% 0px\" });\n    io.observe(root);\n  }\n\n  /* the carousel */\n  var stage = root.querySelector(\"[data-mk-stage]\");\n  var dotsBox = root.querySelector(\"[data-mk-dots]\");\n  if (!stage || !dotsBox) return;\n  var slides = [].slice.call(stage.querySelectorAll(\".mk-slide\"));\n  if (slides.length < 2) { dotsBox.style.display = \"none\"; return; }\n\n  var at = 0, hold = 0;\n  slides.forEach(function (_, i) {\n    var b = document.createElement(\"button\");\n    b.type = \"button\"; b.className = \"mk-dot\" + (i ? \"\" : \" on\");\n    b.setAttribute(\"aria-label\", \"Picture \" + (i + 1) + \" of \" + slides.length);\n    b.onclick = function () { hold = Date.now() + 20000; show(i); };\n    dotsBox.appendChild(b);\n  });\n  var dots = [].slice.call(dotsBox.children);\n\n  function show(n) {\n    at = (n % slides.length + slides.length) % slides.length;\n    slides.forEach(function (s, i) { s.classList.toggle(\"on\", i === at); });\n    dots.forEach(function (d, i) { d.classList.toggle(\"on\", i === at); });\n  }\n\n  stage.querySelectorAll(\"[data-mk-step]\").forEach(function (b) {\n    b.onclick = function () { hold = Date.now() + 20000; show(at + (+b.dataset.mkStep)); };\n  });\n\n  /* ---------- the pop-out ---------- */\n  var lb = root.querySelector(\"[data-mk-lb]\");\n  var lbImg = root.querySelector(\"[data-mk-lb-img]\");\n  var lbCap = root.querySelector(\"[data-mk-lb-cap]\");\n  var lastFocus = null;\n\n  function paintLb() {\n    var img = slides[at].querySelector(\"img\");\n    var cap = slides[at].querySelector(\".mk-cap\");\n    if (!img) return;\n    lbImg.src = img.currentSrc || img.src;\n    lbImg.alt = img.alt || \"\";\n    lbCap.textContent = cap ? cap.textContent : \"\";\n    /* one picture means nothing to step through */\n    root.querySelectorAll(\"[data-mk-lb-step]\").forEach(function (b) {\n      b.style.display = slides.length > 1 ? \"\" : \"none\";\n    });\n  }\n\n  function openLb() {\n    lastFocus = document.activeElement;\n    paintLb();\n    lb.classList.add(\"on\");\n    /* the page behind must not scroll under the overlay */\n    document.body.style.overflow = \"hidden\";\n    root.querySelector(\"[data-mk-lb-close]\").focus();\n  }\n\n  function closeLb() {\n    lb.classList.remove(\"on\");\n    document.body.style.overflow = \"\";\n    lbImg.src = \"\";                       /* stop a large picture sitting in memory */\n    if (lastFocus && lastFocus.focus) lastFocus.focus();\n  }\n\n  /* the picture itself opens it, and so does the corner button */\n  stage.addEventListener(\"click\", function (e) {\n    if (e.target.closest(\"[data-mk-step]\")) return;    /* the arrows are not the picture */\n    if (e.target.closest(\"[data-mk-open]\") || e.target.tagName === \"IMG\") { hold = Date.now() + 20000; openLb(); }\n  });\n\n  lb.addEventListener(\"click\", function (e) {\n    if (e.target.closest(\"[data-mk-lb-close]\")) return closeLb();\n    var step = e.target.closest(\"[data-mk-lb-step]\");\n    if (step) { show(at + (+step.dataset.mkLbStep)); paintLb(); return; }\n    if (!e.target.closest(\"figure\")) closeLb();        /* clicking the dark surround closes it */\n  });\n\n  document.addEventListener(\"keydown\", function (e) {\n    if (!lb.classList.contains(\"on\")) return;\n    if (e.key === \"Escape\") closeLb();\n    else if (e.key === \"ArrowLeft\") { show(at - 1); paintLb(); }\n    else if (e.key === \"ArrowRight\") { show(at + 1); paintLb(); }\n  });\n\n  /* a touch pauses it for twenty seconds; it never stops for good, because a\n     carousel someone glanced at should not sit still for ever after */\n  if (!reduced) setInterval(function () {\n    if (Date.now() < hold) return;\n    if (lb.classList.contains(\"on\")) return;   /* never move under someone reading it */\n    if (!root.classList.contains(\"go\")) return;\n    show(at + 1);\n  }, 6000);\n})();\n</script>","mode":"section","fullWidth":false},"pageCustomHtml":"","showCourses":true,"showMockEvents":true,"showOlympiad":false,"showTeded":false,"brands":["sparks","bright"],"active":true,"position":20,"groups":[{"id":"prv_694c1e398ada","title":"GL Assessment","slug":"gl","blurb":"The most widely used format nationally — standardised, multiple choice and tightly timed.","image":"","courses":[{"id":"c_42ba022e91c6","slug":"11-plus-gl-premium-mocks-set-3-5-mocks","title":"GL : 11 Plus GL Mocks - Set 3 (5 Mocks)","category":"11 Plus","description":"","thumbnail":"📚","featured":false,"free":false,"cohort":"11 Plus","lessons":0,"quizzes":0,"exams":10,"questions":801,"enrolled":0,"pricePence":null},{"id":"c_4240840d0834","slug":"11-plus-gl-premium-mocks-set-1-5-mocks","title":"GL : 11 Plus Mocks - Set 1 (5 Mocks)","category":"11 Plus","description":"","thumbnail":"📚","featured":true,"free":false,"cohort":"11 Plus","lessons":0,"quizzes":0,"exams":10,"questions":792,"enrolled":3,"pricePence":null},{"id":"c_3114ec0ac0ee","slug":"11-plus-gl-premium-mocks-set-2-5-mocks","title":"GL : 11 Plus Mocks - Set 2 (5 Mocks)","category":"11 Plus","description":"","thumbnail":"📚","featured":true,"free":false,"cohort":"11 Plus","lessons":0,"quizzes":0,"exams":10,"questions":799,"enrolled":3,"pricePence":null}]}],"courses":[],"courseCount":3},{"id":"pg_a68d729a3ee8","slug":"11-plus-online","href":"/11-plus-online","title":"11 Plus Online PREP Classes","navLabel":"11 Plus Online PREP Classes","tileSub":"Live weekly","tileMeta":"4 classes weekly","eyebrow":"Online · live · every week","icon":"📅","accent":"#0C7C93","hero":{"headline":"11 Plus Online {PREP Classes}","body":"Two live classes a week, each one taught twice. Homework, quizzes and a monthly mock in between","image":"","imageAlt":"11 Plus Online PREP Classes","ctaLabel":"More about 11 Plus PREP","ctaHref":"/11-plus-online"},"summary":"Affordable Pricing","whatItIs":"<p>PREP is a monthly subscription rather than a course you buy once. Two live classes every week — English and Verbal, then Maths and Non-Verbal — each taught twice, so a missed lesson is never a lost one. Everything else follows from the class: classwork the same evening, homework before the next one, vocabulary daily, a mock every month.</p><p>It is called PREP because one step in ten belongs to you. Ten minutes at the kitchen table, asking a child to explain one question back — that is the part that makes the other nine work, and it is the part no subscription can do for you.</p>","howSteps":[],"media":{"kind":"none","url":"","caption":"","embed":null},"details":[{"title":"What does £160 a month cover?","text":"Everything: four live classes a week, all the classwork and homework with marking, the quizzes and concept builders, the vocabulary app, the monthly mock and three extra papers. There are no add-ons."},{"title":"What if we miss a class?","text":"Every class is taught twice in the same week, so come to the other one. Miss both and the recording is up that evening and kept for the month."},{"title":"Is it one-to-one?","text":"No — these are live group classes with the teacher on screen. That is what makes a month cost less than a single hour of one-to-one, and it is why the ten minutes you spend matter here more than anywhere else."},{"title":"Can we cancel?","text":"Any time, from your account. You keep access until the month you have paid for ends."}],"showcase":{"on":true,"eyebrow":"","headline":"","summary":"","facts":[],"cta1":{"label":"","href":""},"cta2":{"label":"","href":""},"flip":false},"art":[],"artHero":{"svg":true,"svgWhich":"","items":[]},"artRow":{"svg":true,"svgWhich":"","items":[{"kind":"code","url":"","alt":"","svg":"<style>\n/* tokens the site already defines are inherited; these are the block's own */\n.sx{--pa:#3F27BD;position:relative;padding:86px 4vw;overflow:hidden;\n  font:400 15px/1.8 'Open Sans','Segoe UI',system-ui,sans-serif;color:#777}\n.sx h2,.sx h3{font-family:'Poppins',sans-serif;font-weight:700;color:#222;line-height:1.15;margin:0}\n.sx p{margin:0}\n.sx *{box-sizing:border-box}\n\n/* ============================================================\n   Sparks Academy — home-page programme sections\n   Tokens lifted from landing-sparks.css; nothing invented.\n   ============================================================ */\n.grad{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700;\n  background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}\n\n  background:linear-gradient(180deg,var(--a1),var(--a2),var(--acc2));transition:height .1s linear}\n\n/* ---------- section shell ---------- */\n.sx{position:relative;padding:96px 4vw;overflow:hidden}\n.sx.alt{background:var(--soft)}\n.sx::before{content:\"\";position:absolute;left:50%;top:0;transform:translateX(-50%);\n  width:78px;height:4px;border-radius:0 0 4px 4px;background:var(--pa)}\n.sx-row{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}\n.sx.flip .sx-art{order:-1}\n\n.eyebrow{display:inline-flex;align-items:center;gap:9px;font:500 .72rem/1 'JetBrains Mono',monospace;\n  letter-spacing:.22em;text-transform:uppercase;color:var(--pa);margin-bottom:16px}\n.eyebrow::before{content:\"\";width:26px;height:2px;background:var(--pa);border-radius:2px;\n  transform:scaleX(0);transform-origin:left;transition:transform .6s .1s cubic-bezier(.2,.8,.3,1)}\n.sx.go .eyebrow::before{transform:scaleX(1)}\n.sx h2{font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.02em;margin-bottom:14px}\n.summary{max-width:44ch;font-size:1.02rem}\n\n/* the copy rises, a beat behind the art */\n.sx-copy > *{opacity:0;transform:translateY(18px);\n  transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}\n.sx.go .sx-copy > *{opacity:1;transform:none}\n.sx.go .sx-copy > *:nth-child(1){transition-delay:.05s}\n.sx.go .sx-copy > *:nth-child(2){transition-delay:.13s}\n.sx.go .sx-copy > *:nth-child(3){transition-delay:.21s}\n.sx.go .sx-copy > *:nth-child(4){transition-delay:.29s}\n.sx.go .sx-copy > *:nth-child(5){transition-delay:.37s}\n\n/* facts, with the numbers counting up */\n.facts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}\n.fact{font:500 .76rem/1 'JetBrains Mono',monospace;letter-spacing:.05em;color:var(--ink);\n  background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 16px}\n.sx.alt .fact{background:#fff}\n.fact b{color:var(--pa);font-weight:700}\n\n.ctas{display:flex;gap:12px;flex-wrap:wrap}\n.btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none;\n  font:600 14px/1 'Poppins',sans-serif;padding:16px 30px;border-radius:999px;\n  transition:background-position .35s,transform .15s,box-shadow .15s}\n.btn-go{color:#fff;background:linear-gradient(90deg,var(--a1),var(--a2));background-size:180% 100%;\n  box-shadow:0 10px 25px rgba(0,0,0,.16)}\n.btn-go:hover{background-position:95% 0;transform:translateY(-2px)}\n.btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}\n.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--pa);color:var(--pa);transform:translateY(-2px)}\n\n/* ---------- the art panel ---------- */\n.sx-art{position:relative;perspective:1200px}\n.art-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:26px;\n  box-shadow:var(--card-sh-lg);opacity:0;transform:translateY(30px) rotateX(6deg);\n  transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1);\n  will-change:transform}\n.sx.go .art-card{opacity:1;transform:none}\n.art-card svg{display:block;width:100%;height:auto}\n/* the card leans very slightly towards the pointer — 4 degrees, no more */\n.art-card{transform-style:preserve-3d}\n.tilt{transition:transform .25s ease}\n\n/* the glow behind the card, in the programme's colour */\n.sx-art::after{content:\"\";position:absolute;inset:12% -6% -8% 6%;z-index:-1;border-radius:40px;\n  background:radial-gradient(60% 60% at 50% 50%,var(--pa),transparent 70%);opacity:0;filter:blur(46px);\n  transition:opacity 1s .2s ease}\n.sx.go .sx-art::after{opacity:.28}\n\n/* ---------- shared drawing animations ---------- */\n.draw{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}\n.sx.go .draw{animation:draw 1.2s var(--d,0s) ease-out forwards}\n@keyframes draw{to{stroke-dashoffset:0}}\n.pop{opacity:0;transform-box:fill-box;transform-origin:center}\n.sx.go .pop{animation:pop .55s var(--d,0s) cubic-bezier(.2,1.5,.4,1) both}\n@keyframes pop{from{opacity:0;transform:scale(.5)}to{opacity:var(--o,1);transform:none}}\n.slide{opacity:0;transform-box:fill-box}\n.sx.go .slide{animation:slide .6s var(--d,0s) cubic-bezier(.2,.9,.3,1) both}\n@keyframes slide{from{opacity:0;transform:translateX(var(--x,-14px))}to{opacity:var(--o,1);transform:none}}\n.beat{transform-box:fill-box;transform-origin:center}\n.sx.go .beat{animation:beat 2.6s var(--d,0s) ease-in-out infinite}\n@keyframes beat{0%,100%{opacity:.35}50%{opacity:1}}\n\n/* ---------- 1 · PREP: the week, drawing itself ---------- */\n.wk-cell{opacity:0}\n.sx.go .wk-cell{animation:pop .5s var(--d,0s) cubic-bezier(.2,1.4,.4,1) both}\n.sx.go .wk-repeat{animation:pop .5s var(--d,0s) cubic-bezier(.2,1.4,.4,1) both,\n  wk-glow 3.4s calc(var(--d) + 1.2s) ease-in-out infinite}\n@keyframes wk-glow{0%,100%{opacity:.55}50%{opacity:1}}\n\n/* ---------- 2 · MOSAIC: assemble once, then flip · recolour · shimmer ----------\n   The loop is ONE keyframe set rather than two animations, because two would\n   run independently and drift out of order within a minute. Every tile carries\n   the same timeline offset by its diagonal position, so both the flip and the\n   shimmer travel across the grid as waves. The colour is swapped while the\n   tile is edge-on at 90deg — the one frame where a fill change cannot be seen\n   happening, so the mosaic simply *is* a different pattern afterwards. */\n.tile{opacity:0;transform-box:fill-box;transform-origin:center}\n.sx.go .tile{\n  animation:tile-in .7s var(--d,0s) cubic-bezier(.2,1.2,.35,1) both,\n            tile-cycle 14s calc(var(--d,0s) + 1.4s) ease-in-out infinite;\n}\n@keyframes tile-in{\n  from{opacity:0;transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--tr,0deg)) scale(.4)}\n  to{opacity:1;transform:none}\n}\n@keyframes tile-cycle{\n  /* flip out, change colour edge-on, flip back */\n  0%   {transform:rotateY(0deg);   fill:var(--f1);opacity:1}\n  6%   {transform:rotateY(90deg);  fill:var(--f1)}\n  6.1% {                            fill:var(--f2)}\n  13%  {transform:rotateY(0deg);   fill:var(--f2);opacity:1}\n  /* hold, then a wave of light passes over */\n  40%  {opacity:1}\n  46%  {opacity:.4}\n  52%  {opacity:1}\n  /* flip back to the first colour */\n  58%  {transform:rotateY(0deg);   fill:var(--f2)}\n  64%  {transform:rotateY(90deg);  fill:var(--f2)}\n  64.1%{                            fill:var(--f1)}\n  71%  {transform:rotateY(0deg);   fill:var(--f1)}\n  /* and one more wave before it begins again */\n  88%  {opacity:1}\n  94%  {opacity:.4}\n  100% {transform:rotateY(0deg);   fill:var(--f1);opacity:1}\n}\n/* one problem, answerable */\n.mini{margin-top:18px;border-top:1px dashed var(--line);padding-top:18px}\n.mini p{font:600 .98rem/1.5 'Open Sans',sans-serif;color:var(--ink);margin-bottom:12px}\n.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}\n.opt{border:2px solid var(--line);background:#fff;border-radius:10px;padding:12px 4px;cursor:pointer;\n  font:700 15px/1 'JetBrains Mono',monospace;color:var(--ink);transition:all .15s}\n.opt:hover:not(:disabled){border-color:var(--pa);color:var(--pa);transform:translateY(-2px)}\n.opt.right{background:var(--good);border-color:var(--good);color:#fff}\n.opt.wrong{background:var(--soft2);border-color:var(--acc);color:var(--acc)}\n.why{display:none;margin-top:12px;font-size:.9rem;color:var(--ink);\n  border-left:3px solid var(--pa);padding-left:12px}\n.why.show{display:block;animation:slide-up .45s ease}\n@keyframes slide-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}\n\n/* ---------- 3 · TED-Ed: the spotlight ---------- */\n.stage-bg{fill:#140F2E}\n.beam-g{opacity:0}\n.sx.go .beam-g{animation:beam 1.1s .35s ease-out both,beam-flicker 7s 1.5s ease-in-out infinite}\n@keyframes beam{from{opacity:0;transform:translateY(-16px) scaleY(.8)}to{opacity:1;transform:none}}\n@keyframes beam-flicker{0%,100%{opacity:.92}44%{opacity:1}72%{opacity:.85}}\n.mote{opacity:0}\n.sx.go .mote{animation:mote var(--dur,9s) var(--d,0s) linear infinite}\n@keyframes mote{0%{opacity:0;transform:translateY(0)}14%{opacity:.9}100%{opacity:0;transform:translateY(-120px)}}\n.vbar{transform-box:fill-box;transform-origin:center}\n.sx.go .vbar{animation:pop .4s var(--d,0s) ease both,talk 1.15s calc(var(--d,0s) + .4s) ease-in-out infinite}\n@keyframes talk{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}\n.head{opacity:0}\n/* they light up as the talk lands, then applaud — a ripple down the row every\n   six seconds, which is the only thing on the slide that answers back */\n.sx.go .head{animation:lightup .9s var(--d,0s) ease forwards,\n  applaud 6s calc(var(--d,0s) + 1.4s) ease-in-out infinite}\n@keyframes lightup{to{opacity:.55}}\n@keyframes applaud{0%,72%,100%{opacity:.55;transform:none}\n  80%{opacity:1;transform:translateY(-4px)}88%{opacity:.7;transform:none}}\n.head{transform-box:fill-box;transform-origin:center}\n\n\n/* ---------- 4 · MOCKS: a result that tells you where to look ---------- */\n.bar{transform-box:fill-box;transform-origin:bottom center;transform:scaleY(0)}\n.sx.go .bar{animation:bar .9s var(--d,0s) cubic-bezier(.2,.9,.3,1) forwards}\n@keyframes bar{to{transform:scaleY(1)}}\n.ring-track{stroke:#EDEAF8}\n.ring-val{stroke-dasharray:var(--len,440);stroke-dashoffset:var(--len,440);\n  transform:rotate(-90deg);transform-box:fill-box;transform-origin:center}\n.sx.go .ring-val{animation:draw 1.4s .5s cubic-bezier(.3,.8,.3,1) forwards}\n.flag{opacity:0}\n.sx.go .flag{animation:pop .5s 1.5s cubic-bezier(.2,1.6,.4,1) both,\n  flag-pulse 2.6s 2.2s ease-in-out infinite}\n@keyframes flag-pulse{0%,100%{transform:none}50%{transform:translateY(-3px)}}\n.tick-hand{transform-box:fill-box;transform-origin:center}\n.sx.go .tick-hand{animation:tick 60s linear infinite}\n@keyframes tick{to{transform:rotate(360deg)}}\n\n/* ---------- 5 · FLOURISH: we come to the school ---------- */\n.pin{opacity:0;transform-box:fill-box;transform-origin:bottom center}\n.sx.go .pin{animation:pin-drop .6s var(--d,0s) cubic-bezier(.2,1.5,.4,1) both,\n  pin-idle 4.5s calc(var(--d,0s) + 1s) ease-in-out infinite}\n@keyframes pin-drop{from{opacity:0;transform:translateY(-22px) scale(.6)}to{opacity:1;transform:none}}\n@keyframes pin-idle{0%,100%{transform:none}50%{transform:translateY(-4px)}}\n.route{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}\n.sx.go .route{animation:draw 1.6s var(--d,0s) ease-out forwards}\n/* once drawn, the dashes march along it — the teacher is on the way, not parked */\n.sx.go .route.flow{animation:draw 1.6s var(--d,0s) ease-out forwards,\n  march 2.4s calc(var(--d,0s) + 1.6s) linear infinite}\n@keyframes march{to{stroke-dashoffset:-14}}\n.leaf-l,.leaf-r{opacity:0;transform-box:fill-box}\n.sx.go .leaf-l{transform-origin:100% 100%;animation:leaf .8s var(--d,0s) cubic-bezier(.2,.9,.3,1) forwards,\n  sway 6.5s calc(var(--d,0s) + .8s) ease-in-out infinite}\n.sx.go .leaf-r{transform-origin:0% 100%;animation:leaf .8s var(--d,0s) cubic-bezier(.2,.9,.3,1) forwards,\n  sway-alt 7.4s calc(var(--d,0s) + .95s) ease-in-out infinite}\n@keyframes leaf{from{opacity:0;transform:scale(.2) rotate(-14deg)}to{opacity:1;transform:none}}\n@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}\n@keyframes sway-alt{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}}\n\n/* ---------- 6 · KS3 / GCSE: four subjects, each doing its own thing ---------- */\n.pend{transform-box:fill-box;transform-origin:top center}\n.sx.go .pend{animation:pend 2.6s var(--d,0s) ease-in-out infinite}\n@keyframes pend{0%,100%{transform:rotate(-17deg)}50%{transform:rotate(17deg)}}\n.bub{opacity:0}\n.sx.go .bub{animation:bub 3.4s var(--d,0s) ease-in-out infinite}\n@keyframes bub{0%{opacity:0;transform:translateY(4px) scale(.6)}25%{opacity:.9}\n  100%{opacity:0;transform:translateY(-30px) scale(1)}}\n.orbit{transform-box:fill-box;transform-origin:center}\n.sx.go .orbit{animation:orbit 7s var(--d,0s) linear infinite}\n@keyframes orbit{to{transform:rotate(360deg)}}\n.cursor{opacity:0}\n.sx.go .cursor{animation:cursor 1.1s var(--d,0s) step-end infinite}\n@keyframes cursor{0%,49%{opacity:1}50%,100%{opacity:0}}\n\n/* ---------- 7 · VOCABULARY: a card, every day ---------- */\n.card-flip{transform-box:fill-box;transform-origin:center;transform-style:preserve-3d}\n.sx.go .card-flip{animation:pop .6s var(--d,0s) cubic-bezier(.2,1.3,.4,1) both,\n  flip 6s calc(var(--d,0s) + 1.4s) ease-in-out infinite}\n@keyframes flip{0%,42%{transform:rotateY(0)}50%,92%{transform:rotateY(180deg)}100%{transform:rotateY(0)}}\n.face-b{opacity:0}\n.sx.go .face-b{animation:face 6s calc(var(--d,0s) + 1.4s) ease-in-out infinite}\n@keyframes face{0%,45%{opacity:0}53%,90%{opacity:1}100%{opacity:0}}\n.face-a{opacity:1}\n.sx.go .face-a{animation:face-a 6s calc(var(--d,0s) + 1.4s) ease-in-out infinite}\n@keyframes face-a{0%,45%{opacity:1}53%,90%{opacity:0}100%{opacity:1}}\n.streak{transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}\n.sx.go .streak{animation:streak 1.4s var(--d,0s) cubic-bezier(.3,.8,.3,1) forwards}\n@keyframes streak{to{transform:scaleX(1)}}\n\n@media (max-width:900px){\n  .sx-row{grid-template-columns:1fr;gap:34px}\n  .sx.flip .sx-art{order:0}\n    .opts{grid-template-columns:repeat(2,1fr)}\n}\n@media (prefers-reduced-motion:reduce){\n  *{animation:none!important;transition:none!important}\n  .sx-copy > *,.art-card,[class]{opacity:1!important;transform:none!important}\n  .draw{stroke-dashoffset:0!important}\n  /* the travelling dots are SMIL, and CSS cannot switch SMIL off — they are\n     removed in script instead. This just hides them if that has not run yet. */\n  .runner{display:none}\n}\n</style>\n\n<div class=\"sx sx-11-plus-online\" style=\"--pa:#0C7C93\">\n  <div class=\"sx-row\">\n    <div class=\"sx-copy\">\n      <p class=\"eyebrow\">Online · live · every week</p>\n      <h2>Two classes a week.<br><span class=\"grad\">Four chances</span> to be there.</h2>\n      <p class=\"summary\">Each lesson is taught twice in the same week, so a missed class is never a\n        lost one — and everything to carry on at home sits between them.</p>\n      <div class=\"facts\">\n        <span class=\"fact\"><b data-count=\"4\">0</b> live classes weekly</span>\n        <span class=\"fact\">Classwork <b>marked</b></span>\n        <span class=\"fact\"><b>£99</b>/month</span>\n      </div>\n      <div class=\"ctas\">\n        <a class=\"btn btn-go\" href=\"#\">Start this month →</a>\n        <a class=\"btn btn-ghost\" href=\"#\">See how it works</a>\n      </div>\n    </div>\n\n    <div class=\"sx-art\">\n      <div class=\"art-card tilt\">\n        <svg viewBox=\"0 0 460 250\" role=\"img\" aria-label=\"Each class is taught twice in the same week\">\n          <defs><linearGradient id=\"11-plus-online-pg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n            <stop offset=\"0%\" stop-color=\"#3F27BD\"/><stop offset=\"100%\" stop-color=\"#D22CB2\"/></linearGradient></defs>\n          <g font-family=\"'JetBrains Mono',monospace\" font-size=\"10\" fill=\"#B4B0C8\" letter-spacing=\"1\">\n            <text x=\"24\" y=\"20\">MON</text><text x=\"84\" y=\"20\">TUE</text><text x=\"144\" y=\"20\">WED</text>\n            <text x=\"204\" y=\"20\">THU</text><text x=\"264\" y=\"20\">FRI</text><text x=\"324\" y=\"20\">SAT</text><text x=\"384\" y=\"20\">SUN</text>\n          </g>\n          <g stroke=\"#f2f0f8\" stroke-width=\"1\">\n            <path d=\"M18 30v190M78 30v190M138 30v190M198 30v190M258 30v190M318 30v190M378 30v190M438 30v190\"/>\n          </g>\n\n          <g class=\"wk-cell\" style=\"--d:.35s\">\n            <rect x=\"82\" y=\"52\" width=\"54\" height=\"46\" rx=\"11\" fill=\"url(#11-plus-online-pg)\"/>\n            <text x=\"109\" y=\"72\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-size=\"11\" font-weight=\"700\" fill=\"#fff\">ENG</text>\n            <text x=\"109\" y=\"87\" text-anchor=\"middle\" font-family=\"'JetBrains Mono',monospace\" font-size=\"8\" fill=\"#EFE2F8\">VR</text>\n          </g>\n          <g class=\"wk-repeat\" style=\"--d:.75s\">\n            <rect x=\"202\" y=\"52\" width=\"54\" height=\"46\" rx=\"11\" fill=\"#fff\" stroke=\"url(#11-plus-online-pg)\" stroke-width=\"2.2\" stroke-dasharray=\"5 4\"/>\n            <text x=\"229\" y=\"80\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-size=\"10\" font-weight=\"700\" fill=\"#6B5EC9\">again</text>\n          </g>\n          <path id=\"11-plus-online-arc1\" class=\"draw\" style=\"--len:120;--d:.95s\" d=\"M138 62 C 160 34, 182 34, 202 60\"\n            fill=\"none\" stroke=\"#0C7C93\" stroke-width=\"2.4\" stroke-linecap=\"round\"/>\n          <!-- the same lesson, travelling to its second slot. SMIL rather than\n               CSS because a dot following a curve is what animateMotion is for,\n               and it needs no JavaScript to keep in step with the path. -->\n          <circle r=\"4\" fill=\"#0C7C93\" class=\"runner\">\n            <animateMotion dur=\"3.4s\" begin=\"2.2s\" repeatCount=\"indefinite\" keyPoints=\"0;1\"\n              keyTimes=\"0;1\" calcMode=\"spline\" keySplines=\".4 0 .2 1\"><mpath href=\"#11-plus-online-arc1\"/></animateMotion>\n            <animate attributeName=\"opacity\" dur=\"3.4s\" begin=\"2.2s\" repeatCount=\"indefinite\"\n              values=\"0;1;1;0\" keyTimes=\"0;.12;.8;1\"/>\n          </circle>\n\n          <g class=\"wk-cell\" style=\"--d:.5s\">\n            <rect x=\"142\" y=\"128\" width=\"54\" height=\"46\" rx=\"11\" fill=\"url(#11-plus-online-pg)\"/>\n            <text x=\"169\" y=\"148\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-size=\"11\" font-weight=\"700\" fill=\"#fff\">MA</text>\n            <text x=\"169\" y=\"163\" text-anchor=\"middle\" font-family=\"'JetBrains Mono',monospace\" font-size=\"8\" fill=\"#EFE2F8\">NVR</text>\n          </g>\n          <g class=\"wk-repeat\" style=\"--d:.9s\">\n            <rect x=\"262\" y=\"128\" width=\"54\" height=\"46\" rx=\"11\" fill=\"#fff\" stroke=\"url(#11-plus-online-pg)\" stroke-width=\"2.2\" stroke-dasharray=\"5 4\"/>\n            <text x=\"289\" y=\"156\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-size=\"10\" font-weight=\"700\" fill=\"#6B5EC9\">again</text>\n          </g>\n          <path id=\"11-plus-online-arc2\" class=\"draw\" style=\"--len:120;--d:1.1s\" d=\"M198 138 C 220 110, 242 110, 262 136\"\n            fill=\"none\" stroke=\"#0C7C93\" stroke-width=\"2.4\" stroke-linecap=\"round\"/>\n          <circle r=\"4\" fill=\"#0C7C93\" class=\"runner\">\n            <animateMotion dur=\"3.4s\" begin=\"3.1s\" repeatCount=\"indefinite\" keyPoints=\"0;1\"\n              keyTimes=\"0;1\" calcMode=\"spline\" keySplines=\".4 0 .2 1\"><mpath href=\"#11-plus-online-arc2\"/></animateMotion>\n            <animate attributeName=\"opacity\" dur=\"3.4s\" begin=\"3.1s\" repeatCount=\"indefinite\"\n              values=\"0;1;1;0\" keyTimes=\"0;.12;.8;1\"/>\n          </circle>\n\n          <text class=\"beat\" style=\"--d:1.5s\" x=\"230\" y=\"212\" text-anchor=\"middle\"\n            font-family=\"'JetBrains Mono',monospace\" font-size=\"10.5\" fill=\"#0C7C93\" letter-spacing=\"1.6\">\n            COME TO EITHER · OR COME TO BOTH</text>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\n\n<script>\n(function () {\n  /* Scoped to THIS block: several of these can sit on one page, and each has\n     to start itself. document.currentScript is not available after the block\n     is re-inserted, so the root is found by the class on the wrapper. */\n  var root = document.currentScript && document.currentScript.closest(\".sx\");\n  if (!root) { var all = document.querySelectorAll(\".sx.sx-11-plus-online\"); root = all[all.length - 1]; }\n  if (!root || root.dataset.on) return;\n  root.dataset.on = \"1\";\n\n  var mq = function (q) { return window.matchMedia ? window.matchMedia(q) : { matches: false }; };\n  var reduced = mq(\"(prefers-reduced-motion: reduce)\").matches;\n  var go = function () { root.classList.add(\"go\"); };\n\n  /* threshold 0: a section taller than the window can never reach a percentage */\n  if (!(\"IntersectionObserver\" in window)) go();\n  else {\n    var io = new IntersectionObserver(function (es) {\n      es.forEach(function (e) { if (e.isIntersecting) { go(); io.disconnect(); } });\n    }, { threshold: 0, rootMargin: \"0px 0px -14% 0px\" });\n    io.observe(root);\n  }\n\n  /* numbers count up once, when the block arrives */\n  root.querySelectorAll(\"[data-count]\").forEach(function (el) {\n    var to = +el.dataset.count;\n    if (reduced) { el.textContent = to; return; }\n    var started = false;\n    var run = function () {\n      if (started) return; started = true;\n      var t0 = performance.now();\n      (function step(now) {\n        var k = Math.min(1, (now - t0) / 900);\n        el.textContent = Math.round(to * (1 - Math.pow(1 - k, 3)));\n        if (k < 1) requestAnimationFrame(step);\n      })(performance.now());\n    };\n    if (!(\"IntersectionObserver\" in window)) run();\n    else { var c = new IntersectionObserver(function (es) {\n      es.forEach(function (e) { if (e.isIntersecting) { run(); c.disconnect(); } }); },\n      { threshold: .6 }); c.observe(el); }\n  });\n\n  /* the art leans a few degrees towards the pointer — desktop only */\n  if (!reduced && mq(\"(hover:hover)\").matches) {\n    var wrap = root.querySelector(\".sx-art\"), card = root.querySelector(\".tilt\");\n    if (wrap && card) {\n      wrap.addEventListener(\"pointermove\", function (e) {\n        var r = wrap.getBoundingClientRect();\n        var x = (e.clientX - r.left) / r.width - .5, y = (e.clientY - r.top) / r.height - .5;\n        card.style.transform = \"rotateY(\" + (x * 5) + \"deg) rotateX(\" + (-y * 5) + \"deg) translateY(-2px)\";\n      });\n      wrap.addEventListener(\"pointerleave\", function () { card.style.transform = \"\"; });\n    }\n  }\n\n  /* SMIL ignores prefers-reduced-motion, so the path-following dots are\n     removed rather than merely paused */\n  if (reduced) root.querySelectorAll(\".runner\").forEach(function (el) { el.remove(); });\n})();\n</script>"}]},"blocks":[{"type":"facts","title":"","lead":"","rows":[{"label":"Live classes","value":"4 a week"},{"label":"Classwork","value":"marked"},{"label":"Every month","value":"a mock"},{"label":"Vocabulary","value":"in the app"},{"label":"Cost","value":"£160/month"}]},{"type":"journey","title":"One week, start to finish","lead":"Sign up once. After that the same shape repeats every week — and one step in nine is the one only you can do.","rows":[{"title":"Sign up","text":"Two minutes, one child, £99 a month. You get the login the same day and the week starts whenever you do.","who":"once only"},{"title":"Join a class","text":"The same lesson is taught twice. Come on Tuesday, come on Thursday, or come to both and watch it land the second time. Miss both and the recording is up that evening.","who":"your child · live"},{"title":"The week's topics","text":"One English and Verbal class, one Maths and Non-Verbal class. Worked examples on screen, then the same question type at exam pace.","who":"your child · live"},{"title":"Sit with them","text":"Ask what this week's topic was and get them to explain one question back to you. If they can explain it, it is theirs. This is the step that makes the other eight work.","who":"parent · ten minutes"},{"title":"Classwork, same evening","text":"Set the moment the class ends, in the app. Marked instantly with the working shown, so a wrong method is caught tonight rather than in a mock next month.","who":"your child · at home"},{"title":"Homework in the week","text":"One longer set before the next class — mixed, because a real paper never tells you which topic a question is from.","who":"your child · at home"},{"title":"Vocabulary, daily","text":"Sixteen sets in the app, ten minutes a day. Small and daily beats an hour on a Sunday, and it is the cheapest mark in the whole exam.","who":"your child · ten minutes"},{"title":"Quizzes & concept builders","text":"Short, targeted, unlocked as each topic is taught. Concept builders for the methods that need to become automatic.","who":"your child · any time"},{"title":"The monthly mock","text":"Timed and sectioned, sat under real conditions. Afterwards you both see the topic breakdown — which is where next month's ten minutes get aimed.","who":"your child · timed"}]},{"type":"routes","title":"What we do, what you do","lead":"The teaching, the marking and the materials are ours. The ten minutes at the kitchen table are yours.","rows":[{"title":"What we do","blurb":"Every week, without you having to chase it.","steps":"Teach all four classes live, Set and mark the classwork and homework, Run the monthly mock and break down the result, Show you exactly where the marks are going, Keep everything in one place for one price","note":""},{"title":"What you do","blurb":"About ten minutes a day, and it is the part that decides the outcome.","steps":"Make sure they turn up to one of the two slots, Check the classwork got done that evening, Sit with them for the ten-minute review, Keep the vocabulary streak alive, Tell us when something is not working","note":""}]}],"ctaLabel":"Start this month","ctaHref":"/11-plus-online#plan","groupByProvider":false,"pageCustomMode":"full","custom":{"html":"<style>\n/* 11 Plus PREP — home-page section. Tokens from landing-sparks.css. */\n.sx{--pa:#0C7C93;position:relative;padding:80px 4vw;overflow:hidden;\n  font:400 15px/1.8 'Open Sans','Segoe UI',system-ui,sans-serif;color:#6b7280}\n.sx *{box-sizing:border-box}\n.sx h2{font-family:'Poppins',sans-serif;font-weight:800;color:#1b1442;line-height:1.15;\n  margin:0;font-size:clamp(1.5rem,3.2vw,2.1rem);letter-spacing:-.02em}\n.sx p{margin:0}\n\n/* The heading spans both columns. Inside the left one it pushed that column\n   60px lower than the right, so the two cards never lined up at the top. */\n.pk-head{max-width:1240px;margin:0 auto 22px}\n.sx-row{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;\n  gap:40px;align-items:stretch}\n.sx-copy,.sx-art{display:flex;flex-direction:column}\n.sx-art .pk-week{flex:1}          /* the week card matches the bullets' height */\n\n/* ---------- left: what it is ---------- */\n.pk-card{background:#fff;border:1px solid #e9e6f5;border-radius:22px;padding:26px 28px;\n  box-shadow:0 18px 44px rgba(27,20,66,.07)}\n.pk-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}\n/* The bullet and ONE span are the only grid children. A grid makes every\n   element child a grid item, so a loose <b> in the sentence became a cell of\n   its own and dropped to the next row — which is what broke the alignment. */\n.pk-list li{display:grid;grid-template-columns:11px 1fr;gap:14px;align-items:start}\n.pk-list li::before{content:\"\";width:11px;height:11px;border-radius:4px;margin-top:9px;\n  background:var(--pa);opacity:.85}\n.pk-list li > span{font-size:1rem;line-height:1.65;color:#4b5563}\n.pk-list b{color:#1b1442;font-weight:700;white-space:nowrap}\n\n.pk-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}\n.pk-btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none;\n  font:700 15px/1 'Poppins',sans-serif;padding:17px 32px;border-radius:999px;\n  transition:transform .15s,box-shadow .15s,background-position .35s}\n.pk-go{color:#fff;background:linear-gradient(90deg,#5B2AD6,#C42BB0);background-size:180% 100%;\n  box-shadow:0 10px 26px rgba(91,42,214,.28)}\n.pk-go:hover{background-position:95% 0;transform:translateY(-2px)}\n.pk-ghost{background:#fff;color:#1b1442;box-shadow:inset 0 0 0 2px #e5e2f0}\n.pk-ghost:hover{box-shadow:inset 0 0 0 2px var(--pa);color:var(--pa);transform:translateY(-2px)}\n\n/* ---------- right: a typical week ---------- */\n.pk-week{background:#fff;border:1px solid #e9e6f5;border-radius:22px;padding:24px 28px 26px;\n  box-shadow:0 18px 44px rgba(27,20,66,.07);display:flex;flex-direction:column}\n.pk-week-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}\n.pk-week-head b{font:700 1.05rem/1 'Poppins',sans-serif;color:#1b1442}\n.pk-time{font:500 .74rem/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--pa)}\n/* the drawing sits inside its own margin — the viewBox carries the padding,\n   so the arcs and the pop-in scaling never touch the card's edge */\n.pk-week svg{display:block;width:100%;height:auto}\n.pk-note{margin-top:20px;border-radius:14px;padding:14px 18px;\n  background:#e8f6fa;color:#25607a;font-size:.95rem}\n.pk-note b{color:#0b5a70;font-weight:700}\n\n/* ---------- the week, drawing itself ---------- */\n.wk-cell{opacity:0;transform-box:fill-box;transform-origin:center}\n.sx.go .wk-cell{animation:wk-pop .5s var(--d,0s) cubic-bezier(.2,1.4,.4,1) both}\n@keyframes wk-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}\n\n/* the two class cells hold a slow lift, so the eye knows which matter */\n.wk-class{opacity:0;transform-box:fill-box;transform-origin:center}\n.sx.go .wk-class{animation:wk-pop .5s var(--d,0s) cubic-bezier(.2,1.4,.4,1) both,\n  wk-lift 4.5s calc(var(--d,0s) + 1.2s) ease-in-out infinite}\n@keyframes wk-lift{0%,100%{opacity:1}50%{opacity:.88}}\n\n/* the repeat cells breathe, in time with the dot that arrives at them */\n.wk-repeat{opacity:0;transform-box:fill-box;transform-origin:center}\n.sx.go .wk-repeat{animation:wk-pop .5s var(--d,0s) cubic-bezier(.2,1.4,.4,1) both,\n  wk-glow 3.4s calc(var(--d,0s) + 1.2s) ease-in-out infinite}\n@keyframes wk-glow{0%,100%{opacity:.62}50%{opacity:1}}\n\n.wk-arc{stroke-dasharray:var(--len,130);stroke-dashoffset:var(--len,130)}\n.sx.go .wk-arc{animation:wk-draw 1.2s var(--d,0s) ease-out forwards}\n@keyframes wk-draw{to{stroke-dashoffset:0}}\n\n@media (max-width:900px){\n  .sx-row{grid-template-columns:1fr;gap:26px}\n}\n\n/* ---------- included every month ---------- */\n.pk-inc{max-width:1240px;margin:54px auto 0}\n.pk-kicker{font:800 1.2rem/1.2 'JetBrains Mono',monospace;letter-spacing:.16em;\n  text-transform:uppercase;color:#D22CB2;text-align:center;margin:0}\n.pk-inc h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.6rem;color:#1A1830;\n  text-align:center;margin:10px 0 26px}\n.pk-inc h3 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;\n  background:linear-gradient(90deg,#3F27BD,#D22CB2);-webkit-background-clip:text;\n  background-clip:text;color:transparent}\n\n.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}\n.pk-item{background:#fff;border:1px solid #a9a9bd;border-radius:20px;padding:18px 20px;\n  box-shadow:0 10px 30px rgba(34,34,60,.07);\n  opacity:0;transform:translateY(14px);\n  transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}\n.sx.go .pk-item{opacity:1;transform:none}\n.sx.go .pk-item:nth-child(2){transition-delay:.07s}\n.sx.go .pk-item:nth-child(3){transition-delay:.14s}\n.sx.go .pk-item:nth-child(4){transition-delay:.21s}\n.sx.go .pk-item:nth-child(5){transition-delay:.28s}\n.sx.go .pk-item:nth-child(6){transition-delay:.35s}\n.pk-badge{display:flex;align-items:center;justify-content:center;width:42px;height:42px;\n  border-radius:12px;background:#F1EEFC;font:700 .82rem/1 'JetBrains Mono',monospace;\n  color:#3F27BD;margin-bottom:16px}\n.pk-item b{display:block;color:#1A1830;font:600 1.04rem/1.3 'Open Sans',sans-serif;margin-bottom:6px}\n.pk-item p{font-size:.92rem;line-height:1.6}\n\n@media (max-width:980px){ .pk-grid{grid-template-columns:repeat(2,1fr)} }\n@media (max-width:620px){ .pk-grid{grid-template-columns:1fr} }\n\n@media (prefers-reduced-motion:reduce){\n  .sx *{animation:none!important;transition:none!important}\n  .pk-item{opacity:1!important;transform:none!important}\n  .wk-cell,.wk-class,.wk-repeat{opacity:1!important;transform:none!important}\n  .wk-arc{stroke-dashoffset:0!important}\n  .runner{display:none}\n}\n</style>\n\n<div class=\"sx sx-11-plus-prep\" style=\"--pa:#0C7C93\">\n  <div class=\"pk-head\"><h2>11 Plus Online PREP Classes</h2></div>\n  <div class=\"sx-row\">\n\n    <div class=\"sx-copy\">\n      <div class=\"pk-card\">\n        <ul class=\"pk-list\">\n          <li><span>Two live classes a week, each one run twice.</span></li>\n          <li><span>Built for students whose parents are hands-on.</span></li>\n          <li><span>30% scholarships available, based on the assessment test.\n            <b>£112 per month</b> after scholarship.</span></li>\n          <li><span>Up to 40+% discount available for families receiving Pupil Premium or Free School Meals.\n            <b>£94 per month</b> after discount.</span></li>\n          <li><span>All material is available online. Printed material can be posted on request. An extra £15 to £20 a month\n            covers printing and postage.</span></li>\n        </ul>\n      </div>\n      <div class=\"pk-ctas\">\n        <a class=\"pk-btn pk-go\" href=\"/11-plus-online\">Start this month →</a>\n        <a class=\"pk-btn pk-ghost\" href=\"/11-plus-online#how\">See how it works</a>\n      </div>\n    </div>\n\n    <div class=\"sx-art\">\n      <div class=\"pk-week\">\n        <div class=\"pk-week-head\"><b>A typical week</b><span class=\"pk-time\">17:30 UK</span></div>\n\n        <svg viewBox=\"-18 -16 736 256\" role=\"img\"\n          aria-label=\"A typical week: English and Verbal Reasoning on Tuesday, taught again on Thursday; Maths and Non-Verbal Reasoning on Wednesday, taught again on Friday.\">\n          <defs>\n            <linearGradient id=\"pk-grad\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"#7B2FD0\"/><stop offset=\"100%\" stop-color=\"#C42BB0\"/>\n            </linearGradient>\n          </defs>\n\n          <g font-family=\"'JetBrains Mono',monospace\" font-size=\"11\" fill=\"#a8a4bd\" letter-spacing=\"1.4\">\n            <text x=\"47\" y=\"14\" text-anchor=\"middle\">MON</text>\n            <text x=\"148\" y=\"14\" text-anchor=\"middle\">TUE</text>\n            <text x=\"249\" y=\"14\" text-anchor=\"middle\">WED</text>\n            <text x=\"350\" y=\"14\" text-anchor=\"middle\">THU</text>\n            <text x=\"451\" y=\"14\" text-anchor=\"middle\">FRI</text>\n            <text x=\"552\" y=\"14\" text-anchor=\"middle\">SAT</text>\n            <text x=\"653\" y=\"14\" text-anchor=\"middle\">SUN</text>\n          </g>\n\n          <!-- row one: English on Tuesday, taught again on Thursday -->\n          <g fill=\"#eceafa\">\n            <rect class=\"wk-cell\" style=\"--d:.05s\" x=\"2\"   y=\"40\" width=\"91\" height=\"80\" rx=\"13\"/>\n            <rect class=\"wk-cell\" style=\"--d:.15s\" x=\"204\" y=\"40\" width=\"91\" height=\"80\" rx=\"13\"/>\n            <rect class=\"wk-cell\" style=\"--d:.30s\" x=\"406\" y=\"40\" width=\"91\" height=\"80\" rx=\"13\"/>\n            <rect class=\"wk-cell\" style=\"--d:.35s\" x=\"507\" y=\"40\" width=\"91\" height=\"80\" rx=\"13\"/>\n            <rect class=\"wk-cell\" style=\"--d:.40s\" x=\"608\" y=\"40\" width=\"91\" height=\"80\" rx=\"13\"/>\n          </g>\n          <g class=\"wk-class\" style=\"--d:.10s\">\n            <rect x=\"103\" y=\"40\" width=\"91\" height=\"80\" rx=\"13\" fill=\"url(#pk-grad)\"/>\n            <text x=\"148\" y=\"77\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-size=\"15\" font-weight=\"800\" fill=\"#fff\">ENG</text>\n            <text x=\"148\" y=\"93\" text-anchor=\"middle\" font-family=\"'JetBrains Mono',monospace\" font-size=\"9\" fill=\"#f2dcf5\" letter-spacing=\"1\">VR</text>\n          </g>\n          <g class=\"wk-repeat\" style=\"--d:.55s\">\n            <rect x=\"305\" y=\"40\" width=\"91\" height=\"80\" rx=\"13\" fill=\"#fff\" stroke=\"#c9b6e8\" stroke-width=\"2.2\" stroke-dasharray=\"6 5\"/>\n            <text x=\"350\" y=\"76\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-size=\"12\" font-weight=\"700\" fill=\"#7B5EC9\">SAME</text>\n            <text x=\"350\" y=\"91\" text-anchor=\"middle\" font-family=\"'JetBrains Mono',monospace\" font-size=\"8.5\" fill=\"#9d8bd0\" letter-spacing=\"1\">CLASS</text>\n          </g>\n          <path id=\"pk-arc1\" class=\"wk-arc\" style=\"--len:130;--d:.75s\" d=\"M194 56 C 225 24, 274 24, 305 56\"\n            fill=\"none\" stroke=\"#0C7C93\" stroke-width=\"2.6\" stroke-linecap=\"round\"/>\n          <!-- the same lesson travelling to its second slot. animateMotion is\n               exactly what a dot following a curve is for, and it keeps step\n               with the path without a line of script. -->\n          <circle r=\"4.5\" fill=\"#0C7C93\" class=\"runner\">\n            <animateMotion dur=\"3.4s\" begin=\"2.2s\" repeatCount=\"indefinite\" calcMode=\"spline\"\n              keyPoints=\"0;1\" keyTimes=\"0;1\" keySplines=\".4 0 .2 1\"><mpath href=\"#pk-arc1\"/></animateMotion>\n            <animate attributeName=\"opacity\" dur=\"3.4s\" begin=\"2.2s\" repeatCount=\"indefinite\"\n              values=\"0;1;1;0\" keyTimes=\"0;.12;.8;1\"/>\n          </circle>\n\n          <!-- row two: Maths on Wednesday, taught again on Friday -->\n          <g fill=\"#eceafa\">\n            <rect class=\"wk-cell\" style=\"--d:.20s\" x=\"2\"   y=\"144\" width=\"91\" height=\"80\" rx=\"13\"/>\n            <rect class=\"wk-cell\" style=\"--d:.25s\" x=\"103\" y=\"144\" width=\"91\" height=\"80\" rx=\"13\"/>\n            <rect class=\"wk-cell\" style=\"--d:.45s\" x=\"305\" y=\"144\" width=\"91\" height=\"80\" rx=\"13\"/>\n            <rect class=\"wk-cell\" style=\"--d:.50s\" x=\"507\" y=\"144\" width=\"91\" height=\"80\" rx=\"13\"/>\n            <rect class=\"wk-cell\" style=\"--d:.55s\" x=\"608\" y=\"144\" width=\"91\" height=\"80\" rx=\"13\"/>\n          </g>\n          <g class=\"wk-class\" style=\"--d:.30s\">\n            <rect x=\"204\" y=\"144\" width=\"91\" height=\"80\" rx=\"13\" fill=\"url(#pk-grad)\"/>\n            <text x=\"249\" y=\"181\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-size=\"14\" font-weight=\"800\" fill=\"#fff\">MATHS</text>\n            <text x=\"249\" y=\"197\" text-anchor=\"middle\" font-family=\"'JetBrains Mono',monospace\" font-size=\"9\" fill=\"#f2dcf5\" letter-spacing=\"1\">NVR</text>\n          </g>\n          <g class=\"wk-repeat\" style=\"--d:.70s\">\n            <rect x=\"406\" y=\"144\" width=\"91\" height=\"80\" rx=\"13\" fill=\"#fff\" stroke=\"#c9b6e8\" stroke-width=\"2.2\" stroke-dasharray=\"6 5\"/>\n            <text x=\"451\" y=\"180\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-size=\"12\" font-weight=\"700\" fill=\"#7B5EC9\">SAME</text>\n            <text x=\"451\" y=\"195\" text-anchor=\"middle\" font-family=\"'JetBrains Mono',monospace\" font-size=\"8.5\" fill=\"#9d8bd0\" letter-spacing=\"1\">CLASS</text>\n          </g>\n          <path id=\"pk-arc2\" class=\"wk-arc\" style=\"--len:130;--d:.95s\" d=\"M295 160 C 326 128, 375 128, 406 160\"\n            fill=\"none\" stroke=\"#0C7C93\" stroke-width=\"2.6\" stroke-linecap=\"round\"/>\n          <circle r=\"4.5\" fill=\"#0C7C93\" class=\"runner\">\n            <animateMotion dur=\"3.4s\" begin=\"3.1s\" repeatCount=\"indefinite\" calcMode=\"spline\"\n              keyPoints=\"0;1\" keyTimes=\"0;1\" keySplines=\".4 0 .2 1\"><mpath href=\"#pk-arc2\"/></animateMotion>\n            <animate attributeName=\"opacity\" dur=\"3.4s\" begin=\"3.1s\" repeatCount=\"indefinite\"\n              values=\"0;1;1;0\" keyTimes=\"0;.12;.8;1\"/>\n          </circle>\n\n          \n        </svg>\n\n        <p class=\"pk-note\"><b>Every class runs twice.</b> Come to either, or come to both.</p>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- ---------- included every month ---------- -->\n  <div class=\"pk-inc\">\n    <p class=\"pk-kicker\">Included every month</p>\n    <h3>Everything, <em>in one place</em></h3>\n\n    <div class=\"pk-grid\">\n      <article class=\"pk-item\">\n        <span class=\"pk-badge\">4×</span>\n        <b>4 live classes a week</b>\n        <p>Two classes, each taught twice. Recordings up the same evening and kept for the month.</p>\n      </article>\n      <article class=\"pk-item\">\n        <span class=\"pk-badge\">CW</span>\n        <b>Classwork &amp; homework</b>\n        <p>Set after every class, day by day, marked automatically with the working shown.</p>\n      </article>\n      <article class=\"pk-item\">\n        <span class=\"pk-badge\">Q</span>\n        <b>Quizzes &amp; concept builders</b>\n        <p>Short, targeted, and unlocked as each topic is taught, not dumped all at once.</p>\n      </article>\n      <article class=\"pk-item\">\n        <span class=\"pk-badge\">16</span>\n        <b>Vocabulary app</b>\n        <p>Sixteen sets, ten minutes a day, tracked so you can see the streak without asking.</p>\n      </article>\n      <article class=\"pk-item\">\n        <span class=\"pk-badge\">M</span>\n        <b>A monthly mock exam</b>\n        <p>Timed, sectioned, sat under real conditions, with the topic breakdown afterwards.</p>\n      </article>\n      <article class=\"pk-item\">\n        <span class=\"pk-badge\">+3</span>\n        <b>Three extra practice papers</b>\n        <p>Beyond the monthly mock, for families who want more. Same marking, same analysis.</p>\n      </article>\n    </div>\n\n    <div class=\"pk-ctas\" style=\"justify-content:flex-start\">\n      <a class=\"pk-btn pk-go\" href=\"/11-plus-online\">Start this month →</a>\n      <a class=\"pk-btn pk-ghost\" href=\"/11-plus-online#how\">See how it works</a>\n    </div>\n  </div>\n</div>\n\n<script>\n(function () {\n  /* Scoped to THIS block: the page may hold several, and each starts itself. */\n  var root = document.currentScript && document.currentScript.closest(\".sx\");\n  if (!root) { var all = document.querySelectorAll(\".sx.sx-11-plus-prep\"); root = all[all.length - 1]; }\n  if (!root || root.dataset.on) return;\n  root.dataset.on = \"1\";\n\n  var reduced = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  var go = function () { root.classList.add(\"go\"); };\n\n  /* threshold 0: a section taller than the window never reaches a percentage */\n  if (!(\"IntersectionObserver\" in window)) go();\n  else {\n    var io = new IntersectionObserver(function (es) {\n      es.forEach(function (e) { if (e.isIntersecting) { go(); io.disconnect(); } });\n    }, { threshold: 0, rootMargin: \"0px 0px -14% 0px\" });\n    io.observe(root);\n  }\n\n  /* SMIL ignores prefers-reduced-motion, so the travelling dots are removed\n     rather than merely paused. */\n  if (reduced) root.querySelectorAll(\".runner\").forEach(function (el) { el.remove(); });\n})();\n</script>","mode":"section","fullWidth":false},"pageCustomHtml":"<html lang=\"en-GB\"><head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n<title>11 Plus PREP — Parents' Resources for Exam Preparation</title>\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&amp;family=Poppins:wght@500;600;700;800&amp;family=JetBrains+Mono:wght@400;500;700;800&amp;family=Playfair+Display:ital,wght@1,600;1,700&amp;display=swap\" rel=\"stylesheet\">\n<style>\n  html{scroll-behavior:smooth}\n  body{margin:0;background:#fff;color:#3a3a44;font:400 15px/1.75 'Open Sans','Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-wrap:pretty}\n  *{box-sizing:border-box}\n  a{color:#3F27BD;text-decoration:none}\n  a:hover{color:#D22CB2}\n  h1,h2,h3{margin:0}\n  p{margin:0}\n  @keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}\n  @keyframes fl2{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}\n  @keyframes dash{to{stroke-dashoffset:0}}\n  @keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.1);opacity:0}}\n  @keyframes blink{0%,45%{opacity:1}50%,100%{opacity:.25}}\n  @keyframes spin{to{transform:rotate(360deg)}}\n  @keyframes sweep{0%{stroke-dashoffset:220}100%{stroke-dashoffset:0}}\n  @keyframes flow{to{stroke-dashoffset:-40}}\n  @keyframes rise{0%{transform:scaleY(.1);opacity:.3}100%{transform:scaleY(1);opacity:1}}\n  @media (prefers-reduced-motion:reduce){*{animation:none !important}}\n</style>\n<style>\n  /* v11.2.22b — the styling the component runtime used to apply inline */\n  .prep-tab{border:2px solid #a9a9bd;cursor:pointer;border-radius:999px;padding:13px 24px;\n    font:600 .88rem/1 'Poppins',sans-serif;background:#fff;color:#3a3a44;transition:all .18s ease}\n  .prep-tab.on{border-color:transparent;background:linear-gradient(90deg,#3F27BD,#D22CB2);color:#fff;\n    box-shadow:0 10px 22px rgba(63,39,189,.2)}\n  .prep-subj{font:700 .88rem/1 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;\n    padding:9px 13px;border-radius:999px;background:#E4F7FC;color:#0A5566}\n  .prep-flow-li{position:relative;padding:0 0 12px 34px;border-left:2px dashed #a9a9bd;margin-left:13px}\n  .prep-flow-li:last-child{border-left-color:transparent;padding-bottom:0}\n  .prep-flow-li b,.prep-flow-li h3{display:block;color:#1A1830;font:600 .98rem/1.4 'Open Sans',sans-serif}\n  .prep-flow-li small{font-size:.88rem;line-height:1.6;display:block}\n  .prep-dot{position:absolute;left:-11px;top:3px;width:20px;height:20px;border-radius:999px;\n    box-sizing:border-box;background:#fff;border:2px solid #22B8D6}\n  .prep-dot.parent{background:#F434A1;border-color:#F434A1}\n  .prep-faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease,padding .28s ease}\n  .prep-faq-a.open{max-height:280px !important;padding:0 16px 18px !important}\n  .hero-list{list-style:none;margin:14px 0 0;padding:0;max-width:62ch}\n  .hero-list li{position:relative;padding:5px 0 5px 24px;font-size:.98rem}\n  .hero-list li::before{content:\"\";position:absolute;left:0;top:13px;width:12px;height:12px;border-radius:4px;background:#22B8D6}\n  @media (max-width:860px){\n    article[data-prep-step]{grid-template-columns:1fr !important;gap:24px !important}\n    article[data-prep-step] > div[style*=\"order:2\"]{order:0 !important}\n  }\n</style>\n</head>\n<body>\n\n<div style=\"width:100%;background: radial-gradient(900px 420px at 10% -10%, #7a7a7a21 60%), radial-gradient(760px 380px at 90% 0%, #9a97971a 62%), linear-gradient(183deg, #FDFBFF, #9a97970f);\" \"=\"\">\n\n<header style=\"position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid #a9a9bd\">\n  <div style=\"max-width:1120px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:7px\">\n    <div style=\"display:flex;align-items:center;gap:10px;margin-right:auto\">\n      <span style=\"width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#3F27BD,#D22CB2);display:block\"></span>\n      <span style=\"font:700 15px/1 'Poppins',sans-serif;color:#1A1830;letter-spacing:-.01em\">11 Plus PREP</span>\n    </div>\n    <nav style=\"display:flex;gap:8px;align-items:center\">\n      <a href=\"#week\" style=\"font:600 13.5px/1 'Poppins',sans-serif;color:#3a3a44\">The week</a>\n      <a href=\"#how\" style=\"font:600 13.5px/1 'Poppins',sans-serif;color:#3a3a44\">How it works</a>\n      <a href=\"#included\" style=\"font:600 13.5px/1 'Poppins',sans-serif;color:#3a3a44\">Included</a>\n      <a href=\"#faq\" style=\"font:600 13.5px/1 'Poppins',sans-serif;color:#3a3a44\">Questions</a>\n      <a href=\"#pay\" style=\"display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 'Poppins',sans-serif;color:#fff;background:linear-gradient(90deg,#3F27BD,#D22CB2);padding:12px 20px;border-radius:999px;box-shadow:0 8px 18px rgba(63,39,189,.22)\">Start this month</a>\n    </nav>\n  </div>\n</header>\n\n<section style=\"border-bottom:1px solid #a9a9bd;padding:38px 0 44px\">\n  <div style=\"max-width:1120px;margin:0 auto;padding:0 18px;display:grid;grid-template-columns:1.05fr .95fr;gap:11px;align-items:center\">\n    <div>\n      <p style=\"font:800 .92rem/1 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:#0A5566\">Online · live · every week</p>\n      <h1 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:28px;line-height:1.08;letter-spacing:-.025em;color:#1A1830;margin-top:14px;padding: 10px;\">11 Plus Online PREP Classes</h1>\n      <ul class=\"hero-list\" style=\"background:#fff;border:1px solid #a9a9bd;border-radius:22px;box-shadow:0 10px 30px rgba(34,34,60,.08);padding:20px;display:grid\">\n        <li>Two live classes a week, each one run twice.</li>\n        <li>Built for students whose parents are hands-on.</li>\n        <li>20% scholarships available, based on the assessment test — £120 per month after scholarship.</li>\n        <li>Up to 35% discount available for means-tested families — £94 per month after discount.</li>\n        <li>All material is available online. Printed material can be posted on request — an additional £10 to £15 per month covers printing and postage.</li>\n      </ul>\n      <div style=\"display:flex;gap:12px;flex-wrap:wrap;margin-top:16px\">\n        <a href=\"#pay\" style=\"display:inline-flex;align-items:center;gap:9px;font:600 14px/1 'Poppins',sans-serif;color:#fff;background:linear-gradient(90deg,#3F27BD,#D22CB2);padding:17px 32px;border-radius:999px;box-shadow:0 12px 26px rgba(63,39,189,.24)\">Start this month</a>\n        <a href=\"#how\" style=\"display:inline-flex;align-items:center;gap:9px;font:600 14px/1 'Poppins',sans-serif;color:#1A1830;background:#fff;padding:17px 32px;border-radius:999px;box-shadow:inset 0 0 0 2px #a9a9bd\">See how it works</a>\n      </div>\n    </div>\n\n    <div style=\"background:#fff;border:1px solid #a9a9bd;border-radius:22px;box-shadow:0 20px 50px rgba(34,34,60,.12);padding:15px\">\n      <div style=\"display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px\">\n        <span style=\"font:700 .8rem/1 'Poppins',sans-serif;color:#1A1830\">A typical week</span>\n        <span style=\"font:500 .68rem/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:#0A5566\">17:30 UK</span>\n      </div>\n      <div style=\"display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font:500 .6rem/1 'JetBrains Mono',monospace;letter-spacing:.08em;color:#66666F;margin-bottom:8px\">\n        <span>MON</span><span>TUE</span><span>WED</span><span>THU</span><span>FRI</span><span>SAT</span><span>SUN</span>\n      </div>\n      <div style=\"display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px\">\n        <span style=\"height:58px;border-radius:10px;background:#c9c9ead1\"></span>\n        <span style=\"height:58px;border-radius:10px;background:linear-gradient(135deg,#3F27BD,#D22CB2);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;color:#fff;font:700 .62rem/1.1 'Poppins',sans-serif;text-align:center\">ENG<span style=\"font:400 .52rem/1 'JetBrains Mono',monospace;opacity:.85\">VR</span></span>\n        <span style=\"height:58px;border-radius:10px;background:#c9c9ead1\"></span>\n        <span style=\"height:58px;border-radius:10px;border:2px dashed #B9AEE8;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;color:#6B5EC9;font:700 .62rem/1.1 'Poppins',sans-serif;text-align:center\">SAME<span style=\"font:400 .52rem/1 'JetBrains Mono',monospace\">CLASS</span></span>\n        <span style=\"height:58px;border-radius:10px;background:#c9c9ead1\"></span>\n        <span style=\"height:58px;border-radius:10px;background:#c9c9ead1\"></span>\n        <span style=\"height:58px;border-radius:10px;background:#c9c9ead1\"></span>\n      </div>\n      <div style=\"display:grid;grid-template-columns:repeat(7,1fr);gap:6px\">\n        <span style=\"height:58px;border-radius:10px;background:#c9c9ead1\"></span>\n        <span style=\"height:58px;border-radius:10px;background:#c9c9ead1\"></span>\n        <span style=\"height:58px;border-radius:10px;background:linear-gradient(135deg,#3F27BD,#D22CB2);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;color:#fff;font:700 .62rem/1.1 'Poppins',sans-serif;text-align:center\">MATHS<span style=\"font:400 .52rem/1 'JetBrains Mono',monospace;opacity:.85\">NVR</span></span>\n        <span style=\"height:58px;border-radius:10px;background:#c9c9ead1\"></span>\n        <span style=\"height:58px;border-radius:10px;border:2px dashed #B9AEE8;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;color:#6B5EC9;font:700 .62rem/1.1 'Poppins',sans-serif;text-align:center\">SAME<span style=\"font:400 .52rem/1 'JetBrains Mono',monospace\">CLASS</span></span>\n        <span style=\"height:58px;border-radius:10px;background:#c9c9ead1\"></span>\n        <span style=\"height:58px;border-radius:10px;background:#c9c9ead1\"></span>\n      </div>\n      <p style=\"margin-top:16px;padding:12px 16px;border-radius:12px;background:#E4F7FC;color:#0C6C81;font:500 .8rem/1.5 'Open Sans',sans-serif\"><b style=\"color:#0A5566\">Every class runs twice.</b> Come to either, or come to both.</p>\n    </div>\n  </div>\n</section>\n\n<section id=\"week\" style=\"padding:44px 0\">\n  <div style=\"max-width:1120px;margin:0 auto;padding:0 18px\">\n    <p style=\"font:800 1.95rem/1 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:#D22CB2;text-align:center\">How a week runs</p>\n    <h2 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:33px;color:#1A1830;text-align:center;margin:10px 0 8px\">Two classes. <span style=\"font-family:'Playfair Display',Georgia,serif;font-style:italic;background:linear-gradient(90deg,#3F27BD,#D22CB2);-webkit-background-clip:text;background-clip:text;color:transparent\">Four chances.</span></h2>\n    <p style=\"text-align:center;max-width:44ch;margin:0 auto 10px\">Each class is taught twice in the same week, so a missed lesson is never a lost one.</p>\n\n    <div style=\"display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px\">\n      <button type=\"button\" data-day=\"0\" class=\"prep-tab on\">Day 1 · English &amp; Verbal</button><button type=\"button\" data-day=\"1\" class=\"prep-tab\">Day 2 · Maths &amp; Non-Verbal</button>\n    </div>\n\n    <div style=\"background:#fff;border:1px solid #a9a9bd;border-radius:22px;box-shadow:0 10px 30px rgba(34,34,60,.08);padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:18px\">\n      <div>\n        <div data-day-subj=\"\" style=\"display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px\"><span class=\"prep-subj\">English</span><span class=\"prep-subj\">Verbal reasoning</span></div>\n        <p style=\"margin-top:7px;padding:14px 16px;border-radius:14px;background:#E4F7FC;color:#0C6C81;font-size:.9rem\"><b style=\"color:#0A5566\">Runs twice.</b> <span data-day-twice=\"\">Come to either, or come to both and learn it the second time.</span></p>\n      </div>\n      <ul data-day-flow=\"\" style=\"list-style:none;margin:0;padding:0\"><li class=\"prep-flow-li\"><span class=\"prep-dot\"></span><h3>In the class</h3><small>Scheduled GL English and Verbal Reasoning topics.</small></li><li class=\"prep-flow-li\"><span class=\"prep-dot\"></span><h3>Classwork, during the class and the same evening</h3><small>Live classwork practice.</small></li><li class=\"prep-flow-li\"><span class=\"prep-dot\"></span><h3>Homework, before the next class</h3><small>Complete the Day 1, Day 2 and booster homework.</small></li><li class=\"prep-flow-li\"><span class=\"prep-dot parent\"></span><h3>Parents' to-do</h3><small>Check your child's progress in the portal and guide them to the next level.</small></li></ul>\n    </div>\n  </div>\n</section>\n\n<section id=\"how\" style=\"padding:44px 0\">\n  <div style=\"max-width:1120px;margin:0 auto;padding:0 18px\">\n    <p style=\"font:800 1.95rem/1.2 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#D22CB2;text-align:center;margin-bottom:18px\">How it works</p>\n\n    <article data-prep-step=\"\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;max-width:1000px;margin:0 auto 20px;padding:20px 24px;background:#fff;border:1px solid #a9a9bd;border-radius:22px;box-shadow:0 6px 20px rgba(34,34,60,.06)\">\n      <div style=\"position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid #a9a9bd;filter:saturate(1.6) brightness(1.04) contrast(1.05);background:linear-gradient(140deg,#DCCDFB,#BFEAF7)\">\n        <svg viewBox=\"0 0 400 300\" width=\"100%\" height=\"100%\" role=\"img\" aria-label=\"Signing up in two minutes\"><defs><pattern id=\"dg0\" width=\"26\" height=\"26\" patternUnits=\"userSpaceOnUse\"><circle cx=\"2\" cy=\"2\" r=\"1.5\" fill=\"#3F27BD\" opacity=\".38\"></circle></pattern></defs><rect x=\"0\" y=\"0\" width=\"400\" height=\"300\" fill=\"url(#dg0)\"></rect><circle cx=\"352\" cy=\"42\" r=\"64\" fill=\"rgba(63,39,189,.20)\"></circle><circle cx=\"46\" cy=\"262\" r=\"74\" fill=\"rgba(210,44,178,.19)\"></circle><g stroke-linecap=\"round\"><path d=\"M368 250 l0 14 M361 257 l14 0\" stroke=\"#FFC46B\" stroke-width=\"3\"></path><path d=\"M28 46 l0 12 M22 52 l12 0\" stroke=\"#F434A1\" stroke-width=\"3\" opacity=\".85\"></path><path d=\"M206 22 l0 9 M201.5 26.5 l9 0\" stroke=\"#22B8D6\" stroke-width=\"2.6\" opacity=\".9\"></path></g><circle cx=\"386\" cy=\"120\" r=\"3.2\" fill=\"#FFC46B\"></circle><circle cx=\"14\" cy=\"150\" r=\"2.6\" fill=\"#45C6E6\"></circle>\n          <circle cx=\"330\" cy=\"62\" r=\"46\" fill=\"#22B8D6\" opacity=\".40\"></circle>\n          <circle cx=\"62\" cy=\"238\" r=\"30\" fill=\"#D22CB2\" opacity=\".38\"></circle>\n          <g style=\"animation:fl 6s ease-in-out infinite\">\n            <rect x=\"96\" y=\"52\" width=\"208\" height=\"196\" rx=\"18\" fill=\"#fff\"></rect>\n            <rect x=\"96\" y=\"52\" width=\"208\" height=\"46\" rx=\"18\" fill=\"#3F27BD\"></rect>\n            <rect x=\"96\" y=\"84\" width=\"208\" height=\"14\" fill=\"#3F27BD\"></rect>\n            <rect x=\"116\" y=\"68\" width=\"86\" height=\"10\" rx=\"5\" fill=\"#fff\" opacity=\".85\"></rect>\n            <rect x=\"120\" y=\"120\" width=\"70\" height=\"9\" rx=\"4.5\" fill=\"#6A46EC\"></rect>\n            <rect x=\"120\" y=\"136\" width=\"160\" height=\"24\" rx=\"8\" fill=\"#D4C4FA\"></rect>\n            <rect x=\"120\" y=\"136\" width=\"160\" height=\"24\" rx=\"8\" fill=\"none\" stroke=\"#AA95EE\"></rect>\n            <rect x=\"130\" y=\"145\" width=\"0\" height=\"7\" rx=\"3.5\" fill=\"#7A6FD0\"><animate attributeName=\"width\" values=\"0;96\" dur=\"1.4s\" begin=\"0.2s\" fill=\"freeze\"></animate></rect>\n            <rect x=\"120\" y=\"176\" width=\"52\" height=\"9\" rx=\"4.5\" fill=\"#6A46EC\"></rect>\n            <rect x=\"120\" y=\"192\" width=\"160\" height=\"24\" rx=\"8\" fill=\"#D4C4FA\"></rect>\n            <rect x=\"120\" y=\"192\" width=\"160\" height=\"24\" rx=\"8\" fill=\"none\" stroke=\"#AA95EE\"></rect>\n            <rect x=\"130\" y=\"201\" width=\"0\" height=\"7\" rx=\"3.5\" fill=\"#7A6FD0\"><animate attributeName=\"width\" values=\"0;62\" dur=\"1.1s\" begin=\"1.7s\" fill=\"freeze\"></animate></rect>\n            <g transform=\"translate(0,0)\">\n              <rect x=\"188\" y=\"230\" width=\"92\" height=\"30\" rx=\"15\" fill=\"#D22CB2\"></rect>\n              <rect x=\"206\" y=\"241\" width=\"56\" height=\"8\" rx=\"4\" fill=\"#fff\" opacity=\".9\"></rect>\n            </g>\n          </g>\n          <g transform=\"translate(268,246)\">\n            <circle r=\"16\" fill=\"none\" stroke=\"#D22CB2\" stroke-width=\"2\" style=\"animation:ring 2.2s ease-out infinite 2.9s;transform-origin:0 0\"></circle>\n            <path d=\"M0 0 L0 20 L5 15 L9 24 L13 22 L9 13 L16 13 Z\" fill=\"#1A1830\"></path>\n          </g>\n          <g transform=\"translate(300,196)\" style=\"animation:fl2 4.5s ease-in-out infinite\">\n            <circle r=\"26\" fill=\"#22B8D6\"></circle>\n            <path d=\"M-11 1 L-3 9 L11 -7\" fill=\"none\" stroke=\"#fff\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"34\" stroke-dashoffset=\"34\" style=\"animation:dash .7s ease-out 2.9s forwards\"></path>\n          </g>\n        </svg>\n      </div>\n      <div>\n        <p style=\"font:800 .95rem/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:#0E8FB2\">STEP 01</p>\n        <span style=\"display:inline-block;margin:14px 0 12px;font:700 .82rem/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border-radius:999px;background:#E4F7FC;color:#0A5566\">Once only</span>\n        <h3 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:1.45rem;color:#1A1830;margin-bottom:10px\">Sign up</h3>\n        <p>Complete the free assessment test — we will contact you with the results.</p>\n      </div>\n    </article>\n\n    <article data-prep-step=\"\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;max-width:1000px;margin:0 auto 20px;padding:20px 24px;background:#fff;border:1px solid #a9a9bd;border-radius:22px;box-shadow:0 6px 20px rgba(34,34,60,.06)\">\n      <div style=\"order:2;position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid #a9a9bd;filter:saturate(1.6) brightness(1.04) contrast(1.05);background:linear-gradient(140deg,#BFEAF7,#DCCDFB)\">\n        <svg viewBox=\"0 0 400 300\" width=\"100%\" height=\"100%\" role=\"img\" aria-label=\"The same live class taught twice\"><defs><pattern id=\"dg1\" width=\"26\" height=\"26\" patternUnits=\"userSpaceOnUse\"><circle cx=\"2\" cy=\"2\" r=\"1.5\" fill=\"#3F27BD\" opacity=\".38\"></circle></pattern></defs><rect x=\"0\" y=\"0\" width=\"400\" height=\"300\" fill=\"url(#dg1)\"></rect><circle cx=\"352\" cy=\"42\" r=\"64\" fill=\"rgba(63,39,189,.20)\"></circle><circle cx=\"46\" cy=\"262\" r=\"74\" fill=\"rgba(210,44,178,.19)\"></circle><g stroke-linecap=\"round\"><path d=\"M368 250 l0 14 M361 257 l14 0\" stroke=\"#FFC46B\" stroke-width=\"3\"></path><path d=\"M28 46 l0 12 M22 52 l12 0\" stroke=\"#F434A1\" stroke-width=\"3\" opacity=\".85\"></path><path d=\"M206 22 l0 9 M201.5 26.5 l9 0\" stroke=\"#22B8D6\" stroke-width=\"2.6\" opacity=\".9\"></path></g><circle cx=\"386\" cy=\"120\" r=\"3.2\" fill=\"#FFC46B\"></circle><circle cx=\"14\" cy=\"150\" r=\"2.6\" fill=\"#45C6E6\"></circle>\n          <circle cx=\"76\" cy=\"70\" r=\"40\" fill=\"#3F27BD\" opacity=\".38\"></circle>\n          <g style=\"animation:fl 7s ease-in-out infinite\">\n            <rect x=\"52\" y=\"72\" width=\"188\" height=\"132\" rx=\"14\" fill=\"#fff\" stroke=\"#A88CF4\"></rect>\n            <rect x=\"52\" y=\"72\" width=\"188\" height=\"26\" rx=\"14\" fill=\"#D4C4FA\"></rect>\n            <rect x=\"52\" y=\"90\" width=\"188\" height=\"8\" fill=\"#D4C4FA\"></rect>\n            <circle cx=\"68\" cy=\"85\" r=\"4\" fill=\"#AA95EE\"></circle><circle cx=\"82\" cy=\"85\" r=\"4\" fill=\"#AA95EE\"></circle>\n            <rect x=\"66\" y=\"112\" width=\"74\" height=\"54\" rx=\"8\" fill=\"#D0BFF8\"></rect>\n            <circle cx=\"103\" cy=\"132\" r=\"11\" fill=\"#6438F0\"></circle>\n            <path d=\"M86 160c4-11 30-11 34 0z\" fill=\"#6438F0\"></path>\n            <rect x=\"152\" y=\"112\" width=\"74\" height=\"54\" rx=\"8\" fill=\"#7FDBF5\"></rect>\n            <circle cx=\"189\" cy=\"132\" r=\"11\" fill=\"#45C6E6\"></circle>\n            <path d=\"M172 160c4-11 30-11 34 0z\" fill=\"#45C6E6\"></path>\n            <rect x=\"66\" y=\"178\" width=\"52\" height=\"12\" rx=\"6\" fill=\"#3F27BD\"></rect>\n            <rect x=\"126\" y=\"178\" width=\"52\" height=\"12\" rx=\"6\" fill=\"#D0BFF8\"></rect>\n            <circle cx=\"228\" cy=\"85\" r=\"6\" fill=\"#F434A1\" style=\"animation:blink 1.6s steps(1) infinite\"></circle>\n          </g>\n          <g transform=\"translate(250,150)\" style=\"animation:fl2 5.5s ease-in-out infinite\">\n            <rect x=\"0\" y=\"-56\" width=\"120\" height=\"52\" rx=\"12\" fill=\"#fff\" stroke=\"#A88CF4\"></rect>\n            <rect x=\"14\" y=\"-42\" width=\"34\" height=\"9\" rx=\"4.5\" fill=\"#3F27BD\"></rect>\n            <rect x=\"14\" y=\"-26\" width=\"76\" height=\"7\" rx=\"3.5\" fill=\"#6A46EC\"></rect>\n            <path d=\"M96 -34 l8 8 l14 -16\" fill=\"none\" stroke=\"#22B8D6\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"34\" stroke-dashoffset=\"34\" style=\"animation:dash .6s ease-out 1s forwards\"></path>\n            <rect x=\"0\" y=\"10\" width=\"120\" height=\"52\" rx=\"12\" fill=\"#fff\" stroke=\"#A88CF4\"></rect>\n            <rect x=\"14\" y=\"24\" width=\"34\" height=\"9\" rx=\"4.5\" fill=\"#D22CB2\"></rect>\n            <rect x=\"14\" y=\"40\" width=\"76\" height=\"7\" rx=\"3.5\" fill=\"#6A46EC\"></rect>\n            <path d=\"M96 32 l8 8 l14 -16\" fill=\"none\" stroke=\"#22B8D6\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"34\" stroke-dashoffset=\"34\" style=\"animation:dash .6s ease-out 2.2s forwards\"></path>\n          </g>\n          <path d=\"M244 122 C 268 122 268 96 250 96\" fill=\"none\" stroke=\"#6438F0\" stroke-width=\"2.5\" stroke-dasharray=\"6 6\" style=\"animation:flow 1.6s linear infinite\"></path>\n          <path d=\"M244 122 C 268 122 268 168 250 168\" fill=\"none\" stroke=\"#6438F0\" stroke-width=\"2.5\" stroke-dasharray=\"6 6\" style=\"animation:flow 1.6s linear infinite\"></path>\n        </svg>\n      </div>\n      <div>\n        <p style=\"font:800 .95rem/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:#0E8FB2\">STEP 02</p>\n        <span style=\"display:inline-block;margin:14px 0 12px;font:700 .82rem/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border-radius:999px;background:#E4F7FC;color:#0A5566\">Your child · live</span>\n        <h3 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:1.45rem;color:#1A1830;margin-bottom:10px\">Join a class — twice if you like</h3>\n        <p>The same lesson is taught twice. Come to either, or come to both and watch it land the second time.</p>\n      </div>\n    </article>\n\n    <article data-prep-step=\"\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;max-width:1000px;margin:0 auto 20px;padding:20px 24px;background:#fff;border:1px solid #a9a9bd;border-radius:22px;box-shadow:0 6px 20px rgba(34,34,60,.06)\">\n      <div style=\"position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid #a9a9bd;filter:saturate(1.6) brightness(1.04) contrast(1.05);background:linear-gradient(140deg,#DCCDFB,#F9CBE9)\">\n        <svg viewBox=\"0 0 400 300\" width=\"100%\" height=\"100%\" role=\"img\" aria-label=\"Worked examples on the board\"><defs><pattern id=\"dg2\" width=\"26\" height=\"26\" patternUnits=\"userSpaceOnUse\"><circle cx=\"2\" cy=\"2\" r=\"1.5\" fill=\"#3F27BD\" opacity=\".38\"></circle></pattern></defs><rect x=\"0\" y=\"0\" width=\"400\" height=\"300\" fill=\"url(#dg2)\"></rect><circle cx=\"352\" cy=\"42\" r=\"64\" fill=\"rgba(63,39,189,.20)\"></circle><circle cx=\"46\" cy=\"262\" r=\"74\" fill=\"rgba(210,44,178,.19)\"></circle><g stroke-linecap=\"round\"><path d=\"M368 250 l0 14 M361 257 l14 0\" stroke=\"#FFC46B\" stroke-width=\"3\"></path><path d=\"M28 46 l0 12 M22 52 l12 0\" stroke=\"#F434A1\" stroke-width=\"3\" opacity=\".85\"></path><path d=\"M206 22 l0 9 M201.5 26.5 l9 0\" stroke=\"#22B8D6\" stroke-width=\"2.6\" opacity=\".9\"></path></g><circle cx=\"386\" cy=\"120\" r=\"3.2\" fill=\"#FFC46B\"></circle><circle cx=\"14\" cy=\"150\" r=\"2.6\" fill=\"#45C6E6\"></circle>\n          <circle cx=\"336\" cy=\"238\" r=\"42\" fill=\"#22B8D6\" opacity=\".38\"></circle>\n          <rect x=\"56\" y=\"48\" width=\"288\" height=\"176\" rx=\"16\" fill=\"#fff\" stroke=\"#A88CF4\"></rect>\n          <rect x=\"56\" y=\"48\" width=\"288\" height=\"176\" rx=\"16\" fill=\"#3F27BD\" opacity=\".22\"></rect>\n          <text x=\"80\" y=\"92\" font-family=\"JetBrains Mono, monospace\" font-size=\"22\" font-weight=\"700\" fill=\"#3F27BD\">A → B</text>\n          <path d=\"M80 104 h96\" stroke=\"#D22CB2\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-dasharray=\"96\" stroke-dashoffset=\"96\" style=\"animation:dash .8s ease-out .3s forwards\"></path>\n          <path d=\"M80 132 h150\" stroke=\"#6A46EC\" stroke-width=\"7\" stroke-linecap=\"round\" stroke-dasharray=\"150\" stroke-dashoffset=\"150\" style=\"animation:dash .9s ease-out .9s forwards\"></path>\n          <path d=\"M80 154 h112\" stroke=\"#6A46EC\" stroke-width=\"7\" stroke-linecap=\"round\" stroke-dasharray=\"112\" stroke-dashoffset=\"112\" style=\"animation:dash .8s ease-out 1.4s forwards\"></path>\n          <path d=\"M80 176 h132\" stroke=\"#6A46EC\" stroke-width=\"7\" stroke-linecap=\"round\" stroke-dasharray=\"132\" stroke-dashoffset=\"132\" style=\"animation:dash .8s ease-out 1.9s forwards\"></path>\n          <g transform=\"translate(248,96)\">\n            <rect x=\"0\" y=\"0\" width=\"72\" height=\"72\" rx=\"14\" fill=\"#7FDBF5\"></rect>\n            <circle cx=\"24\" cy=\"24\" r=\"9\" fill=\"#22B8D6\"></circle>\n            <rect x=\"40\" y=\"15\" width=\"18\" height=\"18\" rx=\"4\" fill=\"#45C6E6\"></rect>\n            <rect x=\"15\" y=\"40\" width=\"18\" height=\"18\" rx=\"4\" fill=\"#45C6E6\"></rect>\n            <circle cx=\"49\" cy=\"49\" r=\"9\" fill=\"#22B8D6\" style=\"animation:blink 1.8s ease-in-out infinite\"></circle>\n          </g>\n          <rect x=\"184\" y=\"224\" width=\"32\" height=\"34\" fill=\"#A88CF4\"></rect>\n          <rect x=\"128\" y=\"256\" width=\"144\" height=\"10\" rx=\"5\" fill=\"#6A46EC\"></rect>\n          <g transform=\"translate(96,206)\" style=\"animation:fl2 4s ease-in-out infinite\">\n            <rect x=\"-4\" y=\"-10\" width=\"8\" height=\"44\" rx=\"4\" fill=\"#F434A1\" transform=\"rotate(28)\"></rect>\n          </g>\n        </svg>\n      </div>\n      <div>\n        <p style=\"font:800 .95rem/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:#0E8FB2\">STEP 03</p>\n        <span style=\"display:inline-block;margin:14px 0 12px;font:700 .82rem/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border-radius:999px;background:#E4F7FC;color:#0A5566\">Your child · live</span>\n        <h3 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:1.45rem;color:#1A1830;margin-bottom:10px\">The week's topics</h3>\n        <p>One English and Verbal class, one Maths and Non-Verbal class. Worked examples on screen, then the same question type at exam pace.</p>\n      </div>\n    </article>\n\n    <article data-prep-step=\"\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;max-width:1000px;margin:0 auto 20px;padding:20px 24px;background:#fff;border:1px solid #a9a9bd;border-radius:22px;box-shadow:0 6px 20px rgba(34,34,60,.06)\">\n      <div style=\"order:2;position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid #a9a9bd;filter:saturate(1.6) brightness(1.04) contrast(1.05);background:linear-gradient(140deg,#F9CBE9,#DCCDFB)\">\n        <svg viewBox=\"0 0 400 300\" width=\"100%\" height=\"100%\" role=\"img\" aria-label=\"Child explaining a question to a parent\"><defs><pattern id=\"dg3\" width=\"26\" height=\"26\" patternUnits=\"userSpaceOnUse\"><circle cx=\"2\" cy=\"2\" r=\"1.5\" fill=\"#3F27BD\" opacity=\".38\"></circle></pattern></defs><rect x=\"0\" y=\"0\" width=\"400\" height=\"300\" fill=\"url(#dg3)\"></rect><circle cx=\"352\" cy=\"42\" r=\"64\" fill=\"rgba(63,39,189,.20)\"></circle><circle cx=\"46\" cy=\"262\" r=\"74\" fill=\"rgba(210,44,178,.19)\"></circle><g stroke-linecap=\"round\"><path d=\"M368 250 l0 14 M361 257 l14 0\" stroke=\"#FFC46B\" stroke-width=\"3\"></path><path d=\"M28 46 l0 12 M22 52 l12 0\" stroke=\"#F434A1\" stroke-width=\"3\" opacity=\".85\"></path><path d=\"M206 22 l0 9 M201.5 26.5 l9 0\" stroke=\"#22B8D6\" stroke-width=\"2.6\" opacity=\".9\"></path></g><circle cx=\"386\" cy=\"120\" r=\"3.2\" fill=\"#FFC46B\"></circle><circle cx=\"14\" cy=\"150\" r=\"2.6\" fill=\"#45C6E6\"></circle>\n          <circle cx=\"200\" cy=\"168\" r=\"104\" fill=\"#F434A1\" opacity=\".34\"></circle>\n          <g transform=\"translate(112,168)\">\n            <circle cy=\"-26\" r=\"24\" fill=\"#6438F0\"></circle>\n            <path d=\"M-38 74 c0 -40 76 -40 76 0 z\" fill=\"#5A41DC\"></path>\n          </g>\n          <g transform=\"translate(272,176)\">\n            <circle cy=\"-20\" r=\"19\" fill=\"#F95FB9\"></circle>\n            <path d=\"M-30 60 c0 -32 60 -32 60 0 z\" fill=\"#F434A1\"></path>\n          </g>\n          <g style=\"animation:fl2 4.4s ease-in-out infinite\">\n            <path d=\"M150 66 h84 a12 12 0 0 1 12 12 v34 a12 12 0 0 1 -12 12 h-58 l-16 16 v-16 h-10 a12 12 0 0 1 -12 -12 v-34 a12 12 0 0 1 12 -12 z\" fill=\"#fff\" stroke=\"#A88CF4\"></path>\n            <rect x=\"162\" y=\"84\" width=\"58\" height=\"8\" rx=\"4\" fill=\"#6A46EC\"></rect>\n            <rect x=\"162\" y=\"98\" width=\"40\" height=\"8\" rx=\"4\" fill=\"#6A46EC\"></rect>\n          </g>\n          <g style=\"animation:fl 5.2s ease-in-out infinite .6s\">\n            <circle cx=\"308\" cy=\"86\" r=\"26\" fill=\"#F434A1\"></circle>\n            <text x=\"308\" y=\"96\" text-anchor=\"middle\" font-family=\"Poppins, sans-serif\" font-size=\"28\" font-weight=\"800\" fill=\"#fff\">?</text>\n          </g>\n          <g transform=\"translate(200,262)\">\n            <rect x=\"-96\" y=\"-6\" width=\"192\" height=\"12\" rx=\"6\" fill=\"#A88CF4\"></rect>\n          </g>\n          <path d=\"M154 128 C 186 152 216 152 246 132\" fill=\"none\" stroke=\"#F434A1\" stroke-width=\"2.5\" stroke-dasharray=\"7 7\" style=\"animation:flow 1.4s linear infinite\"></path>\n        </svg>\n      </div>\n      <div>\n        <p style=\"font:800 .95rem/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:#D22CB2\">STEP 04</p>\n        <span style=\"display:inline-block;margin:14px 0 12px;font:700 .82rem/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border-radius:999px;background:#FDEAF6;color:#8E1A5D\">You · ten minutes</span>\n        <h3 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:1.45rem;color:#1A1830;margin-bottom:10px\">Sit with them</h3>\n        <p>Ask what this week's topic was, and get them to explain one question back to you. If they can explain it, it's theirs. This is the step that makes all the others work.</p>\n      </div>\n    </article>\n\n    <article data-prep-step=\"\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;max-width:1000px;margin:0 auto 20px;padding:20px 24px;background:#fff;border:1px solid #a9a9bd;border-radius:22px;box-shadow:0 6px 20px rgba(34,34,60,.06)\">\n      <div style=\"position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid #a9a9bd;filter:saturate(1.6) brightness(1.04) contrast(1.05);background:linear-gradient(140deg,#BFEAF7,#DCCDFB)\">\n        <svg viewBox=\"0 0 400 300\" width=\"100%\" height=\"100%\" role=\"img\" aria-label=\"Classwork marked instantly\"><defs><pattern id=\"dg4\" width=\"26\" height=\"26\" patternUnits=\"userSpaceOnUse\"><circle cx=\"2\" cy=\"2\" r=\"1.5\" fill=\"#3F27BD\" opacity=\".38\"></circle></pattern></defs><rect x=\"0\" y=\"0\" width=\"400\" height=\"300\" fill=\"url(#dg4)\"></rect><circle cx=\"352\" cy=\"42\" r=\"64\" fill=\"rgba(63,39,189,.20)\"></circle><circle cx=\"46\" cy=\"262\" r=\"74\" fill=\"rgba(210,44,178,.19)\"></circle><g stroke-linecap=\"round\"><path d=\"M368 250 l0 14 M361 257 l14 0\" stroke=\"#FFC46B\" stroke-width=\"3\"></path><path d=\"M28 46 l0 12 M22 52 l12 0\" stroke=\"#F434A1\" stroke-width=\"3\" opacity=\".85\"></path><path d=\"M206 22 l0 9 M201.5 26.5 l9 0\" stroke=\"#22B8D6\" stroke-width=\"2.6\" opacity=\".9\"></path></g><circle cx=\"386\" cy=\"120\" r=\"3.2\" fill=\"#FFC46B\"></circle><circle cx=\"14\" cy=\"150\" r=\"2.6\" fill=\"#45C6E6\"></circle>\n          <circle cx=\"70\" cy=\"230\" r=\"44\" fill=\"#3F27BD\" opacity=\".34\"></circle>\n          <g style=\"animation:fl 6.5s ease-in-out infinite\">\n            <rect x=\"86\" y=\"42\" width=\"180\" height=\"220\" rx=\"14\" fill=\"#fff\" stroke=\"#A88CF4\"></rect>\n            <rect x=\"108\" y=\"70\" width=\"80\" height=\"10\" rx=\"5\" fill=\"#3F27BD\"></rect>\n            <g stroke=\"#6A46EC\" stroke-width=\"7\" stroke-linecap=\"round\">\n              <path d=\"M108 108 h96\"></path><path d=\"M108 144 h112\"></path><path d=\"M108 180 h84\"></path><path d=\"M108 216 h104\"></path>\n            </g>\n            <g fill=\"none\" stroke=\"#22B8D6\" stroke-width=\"4.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"30\" stroke-dashoffset=\"30\">\n              <path d=\"M228 106 l6 7 l12 -14\" style=\"animation:dash .5s ease-out .6s forwards\"></path>\n              <path d=\"M232 142 l6 7 l12 -14\" style=\"animation:dash .5s ease-out 1.1s forwards\"></path>\n              <path d=\"M228 214 l6 7 l12 -14\" style=\"animation:dash .5s ease-out 2.1s forwards\"></path>\n            </g>\n            <g stroke=\"#F434A1\" stroke-width=\"4.5\" stroke-linecap=\"round\" stroke-dasharray=\"20\" stroke-dashoffset=\"20\">\n              <path d=\"M230 172 l14 14\" style=\"animation:dash .4s ease-out 1.6s forwards\"></path>\n              <path d=\"M244 172 l-14 14\" style=\"animation:dash .4s ease-out 1.8s forwards\"></path>\n            </g>\n          </g>\n          <g transform=\"translate(274,196)\" style=\"animation:fl2 5s ease-in-out infinite\">\n            <rect x=\"0\" y=\"0\" width=\"102\" height=\"62\" rx=\"14\" fill=\"#3F27BD\"></rect>\n            <text x=\"51\" y=\"34\" text-anchor=\"middle\" font-family=\"Poppins, sans-serif\" font-size=\"24\" font-weight=\"800\" fill=\"#fff\">9/10</text>\n            <rect x=\"24\" y=\"44\" width=\"54\" height=\"7\" rx=\"3.5\" fill=\"#fff\" opacity=\".55\"></rect>\n          </g>\n        </svg>\n      </div>\n      <div>\n        <p style=\"font:800 .95rem/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:#0E8FB2\">STEP 05</p>\n        <span style=\"display:inline-block;margin:14px 0 12px;font:700 .82rem/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border-radius:999px;background:#E4F7FC;color:#0A5566\">Your child · at home</span>\n        <h3 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:1.45rem;color:#1A1830;margin-bottom:10px\">Classwork the same evening</h3>\n        <p>Set the moment the class ends, in the app. Marked instantly with the working shown, so a wrong method gets caught tonight rather than in a mock next month.</p>\n      </div>\n    </article>\n\n    <article data-prep-step=\"\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;max-width:1000px;margin:0 auto 20px;padding:20px 24px;background:#fff;border:1px solid #a9a9bd;border-radius:22px;box-shadow:0 6px 20px rgba(34,34,60,.06)\">\n      <div style=\"order:2;position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid #a9a9bd;filter:saturate(1.6) brightness(1.04) contrast(1.05);background:linear-gradient(140deg,#DCCDFB,#BFEAF7)\">\n        <svg viewBox=\"0 0 400 300\" width=\"100%\" height=\"100%\" role=\"img\" aria-label=\"Day 1 and Day 2 homework online\"><defs><pattern id=\"dg5\" width=\"26\" height=\"26\" patternUnits=\"userSpaceOnUse\"><circle cx=\"2\" cy=\"2\" r=\"1.5\" fill=\"#3F27BD\" opacity=\".38\"></circle></pattern></defs><rect x=\"0\" y=\"0\" width=\"400\" height=\"300\" fill=\"url(#dg5)\"></rect><circle cx=\"352\" cy=\"42\" r=\"64\" fill=\"rgba(63,39,189,.20)\"></circle><circle cx=\"46\" cy=\"262\" r=\"74\" fill=\"rgba(210,44,178,.19)\"></circle><g stroke-linecap=\"round\"><path d=\"M368 250 l0 14 M361 257 l14 0\" stroke=\"#FFC46B\" stroke-width=\"3\"></path><path d=\"M28 46 l0 12 M22 52 l12 0\" stroke=\"#F434A1\" stroke-width=\"3\" opacity=\".85\"></path><path d=\"M206 22 l0 9 M201.5 26.5 l9 0\" stroke=\"#22B8D6\" stroke-width=\"2.6\" opacity=\".9\"></path></g><circle cx=\"386\" cy=\"120\" r=\"3.2\" fill=\"#FFC46B\"></circle><circle cx=\"14\" cy=\"150\" r=\"2.6\" fill=\"#45C6E6\"></circle>\n          <circle cx=\"326\" cy=\"76\" r=\"44\" fill=\"#3F27BD\" opacity=\".34\"></circle>\n          <g style=\"animation:fl 6s ease-in-out infinite\">\n            <rect x=\"56\" y=\"52\" width=\"200\" height=\"88\" rx=\"14\" fill=\"#fff\" stroke=\"#A88CF4\"></rect>\n            <text x=\"78\" y=\"82\" font-family=\"JetBrains Mono, monospace\" font-size=\"13\" font-weight=\"700\" fill=\"#3F27BD\">DAY 1</text>\n            <rect x=\"78\" y=\"94\" width=\"112\" height=\"8\" rx=\"4\" fill=\"#6A46EC\"></rect>\n            <rect x=\"78\" y=\"110\" width=\"78\" height=\"8\" rx=\"4\" fill=\"#BBA4F8\"></rect>\n            <circle cx=\"222\" cy=\"96\" r=\"15\" fill=\"#7FDBF5\"></circle>\n            <path d=\"M215 96 l5 6 l10 -12\" fill=\"none\" stroke=\"#22B8D6\" stroke-width=\"3.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"26\" stroke-dashoffset=\"26\" style=\"animation:dash .5s ease-out .7s forwards\"></path>\n          </g>\n          <g style=\"animation:fl 6s ease-in-out infinite .8s\">\n            <rect x=\"96\" y=\"160\" width=\"200\" height=\"88\" rx=\"14\" fill=\"#fff\" stroke=\"#A88CF4\"></rect>\n            <text x=\"118\" y=\"190\" font-family=\"JetBrains Mono, monospace\" font-size=\"13\" font-weight=\"700\" fill=\"#D22CB2\">DAY 2</text>\n            <rect x=\"118\" y=\"202\" width=\"112\" height=\"8\" rx=\"4\" fill=\"#6A46EC\"></rect>\n            <rect x=\"118\" y=\"218\" width=\"94\" height=\"8\" rx=\"4\" fill=\"#BBA4F8\"></rect>\n            <circle cx=\"262\" cy=\"204\" r=\"15\" fill=\"#F8B7DF\"></circle>\n            <path d=\"M255 204 l5 6 l10 -12\" fill=\"none\" stroke=\"#D22CB2\" stroke-width=\"3.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"26\" stroke-dashoffset=\"26\" style=\"animation:dash .5s ease-out 1.6s forwards\"></path>\n          </g>\n          <path d=\"M256 140 C 300 148 300 152 296 160\" fill=\"none\" stroke=\"#6438F0\" stroke-width=\"2.5\" stroke-dasharray=\"6 6\" style=\"animation:flow 1.6s linear infinite\"></path>\n          <g transform=\"translate(330,196)\" style=\"animation:fl2 4.6s ease-in-out infinite\">\n            <circle r=\"22\" fill=\"#22B8D6\"></circle>\n            <path d=\"M-9 0 h18 M0 -9 v18\" stroke=\"#fff\" stroke-width=\"3.4\" stroke-linecap=\"round\"></path>\n          </g>\n        </svg>\n      </div>\n      <div>\n        <p style=\"font:800 .95rem/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:#0E8FB2\">STEP 06</p>\n        <span style=\"display:inline-block;margin:14px 0 12px;font:700 .82rem/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border-radius:999px;background:#E4F7FC;color:#0A5566\">Your child · at home</span>\n        <h3 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:1.45rem;color:#1A1830;margin-bottom:10px\">Homework online, twice a week</h3>\n        <p style=\"font-size:.95rem\">One set after each class, done in the app on Day 1 and Day 2. Marked as they go, with the working shown — and mixed, because a real paper never tells you which topic a question came from.</p>\n        <p style=\"font-size:.95rem;margin-top:10px\">Go ahead — do the additional booster practice sessions too.</p>\n      </div>\n    </article>\n\n    <article data-prep-step=\"\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;max-width:1000px;margin:0 auto 20px;padding:20px 24px;background:#fff;border:1px solid #a9a9bd;border-radius:22px;box-shadow:0 6px 20px rgba(34,34,60,.06)\">\n      <div style=\"position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid #a9a9bd;filter:saturate(1.6) brightness(1.04) contrast(1.05);background:linear-gradient(140deg,#BFEAF7,#DCCDFB)\">\n        <svg viewBox=\"0 0 400 300\" width=\"100%\" height=\"100%\" role=\"img\" aria-label=\"Weekly quizzes, marked instantly\"><defs><pattern id=\"dg6\" width=\"26\" height=\"26\" patternUnits=\"userSpaceOnUse\"><circle cx=\"2\" cy=\"2\" r=\"1.5\" fill=\"#3F27BD\" opacity=\".38\"></circle></pattern></defs><rect x=\"0\" y=\"0\" width=\"400\" height=\"300\" fill=\"url(#dg6)\"></rect><circle cx=\"352\" cy=\"42\" r=\"64\" fill=\"rgba(63,39,189,.20)\"></circle><circle cx=\"46\" cy=\"262\" r=\"74\" fill=\"rgba(210,44,178,.19)\"></circle><g stroke-linecap=\"round\"><path d=\"M368 250 l0 14 M361 257 l14 0\" stroke=\"#FFC46B\" stroke-width=\"3\"></path><path d=\"M28 46 l0 12 M22 52 l12 0\" stroke=\"#F434A1\" stroke-width=\"3\" opacity=\".85\"></path><path d=\"M206 22 l0 9 M201.5 26.5 l9 0\" stroke=\"#22B8D6\" stroke-width=\"2.6\" opacity=\".9\"></path></g><circle cx=\"386\" cy=\"120\" r=\"3.2\" fill=\"#FFC46B\"></circle><circle cx=\"14\" cy=\"150\" r=\"2.6\" fill=\"#45C6E6\"></circle>\n          <circle cx=\"74\" cy=\"234\" r=\"42\" fill=\"#22B8D6\" opacity=\".40\"></circle>\n          <g style=\"animation:fl 6.4s ease-in-out infinite\">\n            <rect x=\"70\" y=\"46\" width=\"228\" height=\"200\" rx=\"16\" fill=\"#fff\" stroke=\"#A88CF4\"></rect>\n            <rect x=\"94\" y=\"74\" width=\"120\" height=\"10\" rx=\"5\" fill=\"#3F27BD\"></rect>\n            <rect x=\"94\" y=\"92\" width=\"76\" height=\"8\" rx=\"4\" fill=\"#BBA4F8\"></rect>\n            <g>\n              <rect x=\"94\" y=\"118\" width=\"180\" height=\"30\" rx=\"9\" fill=\"#D8C9F8\"></rect>\n              <circle cx=\"112\" cy=\"133\" r=\"7\" fill=\"#9673F2\"></circle>\n              <rect x=\"128\" y=\"129\" width=\"96\" height=\"8\" rx=\"4\" fill=\"#6A46EC\"></rect>\n            </g>\n            <g>\n              <rect x=\"94\" y=\"156\" width=\"180\" height=\"30\" rx=\"9\" fill=\"#7FDBF5\" stroke=\"#22B8D6\" stroke-width=\"2\"></rect>\n              <circle cx=\"112\" cy=\"171\" r=\"7\" fill=\"#22B8D6\"></circle>\n              <path d=\"M108 171 l3 4 l6 -7\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n              <rect x=\"128\" y=\"167\" width=\"112\" height=\"8\" rx=\"4\" fill=\"#45C6E6\"></rect>\n            </g>\n            <g>\n              <rect x=\"94\" y=\"194\" width=\"180\" height=\"30\" rx=\"9\" fill=\"#D8C9F8\"></rect>\n              <circle cx=\"112\" cy=\"209\" r=\"7\" fill=\"#9673F2\"></circle>\n              <rect x=\"128\" y=\"205\" width=\"84\" height=\"8\" rx=\"4\" fill=\"#6A46EC\"></rect>\n            </g>\n          </g>\n          <g transform=\"translate(306,90)\" style=\"animation:fl2 4.8s ease-in-out infinite\">\n            <circle r=\"30\" fill=\"#fff\" stroke=\"#A88CF4\" stroke-width=\"2\"></circle>\n            <circle r=\"30\" fill=\"none\" stroke=\"#D22CB2\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-dasharray=\"188\" stroke-dashoffset=\"188\" transform=\"rotate(-90)\"><animate attributeName=\"stroke-dashoffset\" values=\"188;40\" dur=\"2s\" begin=\"0.4s\" fill=\"freeze\"></animate></circle>\n            <text y=\"6\" text-anchor=\"middle\" font-family=\"Poppins, sans-serif\" font-size=\"16\" font-weight=\"800\" fill=\"#1A1830\">8/10</text>\n          </g>\n        </svg>\n      </div>\n      <div>\n        <p style=\"font:800 .95rem/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:#0E8FB2\">STEP 07</p>\n        <span style=\"display:inline-block;margin:14px 0 12px;font:700 .82rem/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border-radius:999px;background:#E4F7FC;color:#0A5566\">Your child · thirty minutes</span>\n        <h3 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:1.45rem;color:#1A1830;margin-bottom:10px\">Weekly quizzes</h3>\n        <p style=\"font-size:.95rem\">Short, targeted and unlocked as each topic is taught — never dumped all at once. Instant score, so you both know whether the week landed.</p>\n      </div>\n    </article>\n\n    <article data-prep-step=\"\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;max-width:1000px;margin:0 auto 20px;padding:20px 24px;background:#fff;border:1px solid #a9a9bd;border-radius:22px;box-shadow:0 6px 20px rgba(34,34,60,.06)\">\n      <div style=\"order:2;position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid #a9a9bd;filter:saturate(1.6) brightness(1.04) contrast(1.05);background:linear-gradient(140deg,#DCCDFB,#F9CBE9)\">\n        <svg viewBox=\"0 0 400 300\" width=\"100%\" height=\"100%\" role=\"img\" aria-label=\"Optional booster sessions\"><defs><pattern id=\"dg7\" width=\"26\" height=\"26\" patternUnits=\"userSpaceOnUse\"><circle cx=\"2\" cy=\"2\" r=\"1.5\" fill=\"#3F27BD\" opacity=\".38\"></circle></pattern></defs><rect x=\"0\" y=\"0\" width=\"400\" height=\"300\" fill=\"url(#dg7)\"></rect><circle cx=\"352\" cy=\"42\" r=\"64\" fill=\"rgba(63,39,189,.20)\"></circle><circle cx=\"46\" cy=\"262\" r=\"74\" fill=\"rgba(210,44,178,.19)\"></circle><g stroke-linecap=\"round\"><path d=\"M368 250 l0 14 M361 257 l14 0\" stroke=\"#FFC46B\" stroke-width=\"3\"></path><path d=\"M28 46 l0 12 M22 52 l12 0\" stroke=\"#F434A1\" stroke-width=\"3\" opacity=\".85\"></path><path d=\"M206 22 l0 9 M201.5 26.5 l9 0\" stroke=\"#22B8D6\" stroke-width=\"2.6\" opacity=\".9\"></path></g><circle cx=\"386\" cy=\"120\" r=\"3.2\" fill=\"#FFC46B\"></circle><circle cx=\"14\" cy=\"150\" r=\"2.6\" fill=\"#45C6E6\"></circle>\n          <circle cx=\"316\" cy=\"228\" r=\"46\" fill=\"#D22CB2\" opacity=\".38\"></circle>\n          <g transform=\"translate(58,232)\">\n            <rect x=\"0\" y=\"-56\" width=\"34\" height=\"56\" rx=\"8\" fill=\"#9673F2\" style=\"animation:rise .8s ease-out .3s backwards;transform-origin:0 100%\"></rect>\n            <rect x=\"46\" y=\"-84\" width=\"34\" height=\"84\" rx=\"8\" fill=\"#6438F0\" style=\"animation:rise .8s ease-out .5s backwards;transform-origin:0 100%\"></rect>\n            <rect x=\"92\" y=\"-116\" width=\"34\" height=\"116\" rx=\"8\" fill=\"#3F27BD\" style=\"animation:rise .8s ease-out .7s backwards;transform-origin:0 100%\"></rect>\n            <rect x=\"138\" y=\"-160\" width=\"34\" height=\"160\" rx=\"8\" fill=\"#D22CB2\" style=\"animation:rise .9s ease-out .9s backwards;transform-origin:0 100%\"></rect>\n            <path d=\"M-12 0 H 190\" stroke=\"#A88CF4\" stroke-width=\"3\" stroke-linecap=\"round\"></path>\n          </g>\n          <path d=\"M64 168 C 120 150 160 118 212 66\" fill=\"none\" stroke=\"#22B8D6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-dasharray=\"220\" stroke-dashoffset=\"220\" style=\"animation:sweep 1.6s ease-out .6s forwards\"></path>\n          <g transform=\"translate(248,88)\" style=\"animation:fl2 4.4s ease-in-out infinite\">\n            <rect x=\"-52\" y=\"-30\" width=\"126\" height=\"60\" rx=\"14\" fill=\"#fff\" stroke=\"#A88CF4\"></rect>\n            <circle cx=\"-24\" cy=\"0\" r=\"16\" fill=\"#F8B7DF\"></circle>\n            <path d=\"M-33 0 h18 M-24 -9 v18\" stroke=\"#D22CB2\" stroke-width=\"3.2\" stroke-linecap=\"round\"></path>\n            <rect x=\"2\" y=\"-10\" width=\"58\" height=\"8\" rx=\"4\" fill=\"#6A46EC\"></rect>\n            <rect x=\"2\" y=\"4\" width=\"38\" height=\"7\" rx=\"3.5\" fill=\"#BBA4F8\"></rect>\n          </g>\n        </svg>\n      </div>\n      <div>\n        <p style=\"font:800 .95rem/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:#D22CB2\">STEP 08</p>\n        <span style=\"display:inline-block;margin:14px 0 12px;font:700 .82rem/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border-radius:999px;background:#FDEAF6;color:#8E1A5D\">Optional · you choose</span>\n        <h3 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:1.45rem;color:#1A1830;margin-bottom:10px\">Want to do more? Booster sessions</h3>\n        <p style=\"font-size:.95rem\">Do additional booster sessions based on the topics taught that week.</p>\n      </div>\n    </article>\n\n    <article data-prep-step=\"\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;max-width:1000px;margin:0 auto 20px;padding:20px 24px;background:#fff;border:1px solid #a9a9bd;border-radius:22px;box-shadow:0 6px 20px rgba(34,34,60,.06)\">\n      <div style=\"position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid #a9a9bd;filter:saturate(1.6) brightness(1.04) contrast(1.05);background:linear-gradient(140deg,#DCCDFB,#F9CBE9)\">\n        <svg viewBox=\"0 0 400 300\" width=\"100%\" height=\"100%\" role=\"img\" aria-label=\"The monthly mock and its topic breakdown\"><defs><pattern id=\"dg8\" width=\"26\" height=\"26\" patternUnits=\"userSpaceOnUse\"><circle cx=\"2\" cy=\"2\" r=\"1.5\" fill=\"#3F27BD\" opacity=\".38\"></circle></pattern></defs><rect x=\"0\" y=\"0\" width=\"400\" height=\"300\" fill=\"url(#dg8)\"></rect><circle cx=\"352\" cy=\"42\" r=\"64\" fill=\"rgba(63,39,189,.20)\"></circle><circle cx=\"46\" cy=\"262\" r=\"74\" fill=\"rgba(210,44,178,.19)\"></circle><g stroke-linecap=\"round\"><path d=\"M368 250 l0 14 M361 257 l14 0\" stroke=\"#FFC46B\" stroke-width=\"3\"></path><path d=\"M28 46 l0 12 M22 52 l12 0\" stroke=\"#F434A1\" stroke-width=\"3\" opacity=\".85\"></path><path d=\"M206 22 l0 9 M201.5 26.5 l9 0\" stroke=\"#22B8D6\" stroke-width=\"2.6\" opacity=\".9\"></path></g><circle cx=\"386\" cy=\"120\" r=\"3.2\" fill=\"#FFC46B\"></circle><circle cx=\"14\" cy=\"150\" r=\"2.6\" fill=\"#45C6E6\"></circle>\n          <circle cx=\"86\" cy=\"86\" r=\"52\" fill=\"#22B8D6\" opacity=\".38\"></circle>\n          <g transform=\"translate(104,110)\">\n            <circle r=\"54\" fill=\"#fff\" stroke=\"#A88CF4\" stroke-width=\"2\"></circle>\n            <circle r=\"54\" fill=\"none\" stroke=\"#3F27BD\" stroke-width=\"6\" stroke-linecap=\"round\" stroke-dasharray=\"340\" stroke-dashoffset=\"340\" transform=\"rotate(-90)\"><animate attributeName=\"stroke-dashoffset\" values=\"340;96\" dur=\"2.2s\" begin=\"0.3s\" fill=\"freeze\"></animate></circle>\n            <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"-34\" stroke=\"#1A1830\" stroke-width=\"4\" stroke-linecap=\"round\" style=\"animation:spin 6s linear infinite;transform-origin:0 0\"></line>\n            <line x1=\"0\" y1=\"0\" x2=\"24\" y2=\"0\" stroke=\"#D22CB2\" stroke-width=\"4\" stroke-linecap=\"round\" style=\"animation:spin 24s linear infinite;transform-origin:0 0\"></line>\n            <circle r=\"5\" fill=\"#1A1830\"></circle>\n          </g>\n          <g transform=\"translate(206,232)\">\n            <g style=\"transform-origin:0 0\">\n              <rect x=\"0\" y=\"-74\" width=\"26\" height=\"74\" rx=\"6\" fill=\"#6438F0\" style=\"animation:rise .8s ease-out .4s backwards;transform-origin:0 100%\"></rect>\n              <rect x=\"38\" y=\"-112\" width=\"26\" height=\"112\" rx=\"6\" fill=\"#3F27BD\" style=\"animation:rise .8s ease-out .6s backwards;transform-origin:0 100%\"></rect>\n              <rect x=\"76\" y=\"-58\" width=\"26\" height=\"58\" rx=\"6\" fill=\"#F95FB9\" style=\"animation:rise .8s ease-out .8s backwards;transform-origin:0 100%\"></rect>\n              <rect x=\"114\" y=\"-134\" width=\"26\" height=\"134\" rx=\"6\" fill=\"#D22CB2\" style=\"animation:rise .8s ease-out 1s backwards;transform-origin:0 100%\"></rect>\n            </g>\n            <path d=\"M-12 0 H 156\" stroke=\"#A88CF4\" stroke-width=\"3\" stroke-linecap=\"round\"></path>\n          </g>\n          <g transform=\"translate(206,64)\">\n            <rect width=\"146\" height=\"40\" rx=\"12\" fill=\"#fff\" stroke=\"#A88CF4\"></rect>\n            <circle cx=\"26\" cy=\"20\" r=\"10\" fill=\"#22B8D6\"></circle>\n            <path d=\"M21 20 l4 4 l8 -9\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            <rect x=\"46\" y=\"10\" width=\"80\" height=\"8\" rx=\"4\" fill=\"#6A46EC\"></rect>\n            <rect x=\"46\" y=\"24\" width=\"52\" height=\"7\" rx=\"3.5\" fill=\"#BBA4F8\"></rect>\n          </g>\n        </svg>\n      </div>\n      <div>\n        <p style=\"font:800 .95rem/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:#0E8FB2\">STEP 09</p>\n        <span style=\"display:inline-block;margin:14px 0 12px;font:700 .82rem/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border-radius:999px;background:#E4F7FC;color:#0A5566\">Both of you · monthly</span>\n        <h3 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:1.45rem;color:#1A1830;margin-bottom:10px\">The monthly mock</h3>\n        <p style=\"font-size:.95rem\">Timed and sectioned, sat under real conditions. Afterwards you both see the topic breakdown, which is where next month's ten minutes get aimed.</p>\n      </div>\n    </article>\n\n    <article data-prep-step=\"\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;max-width:1000px;margin:0 auto 20px;padding:20px 24px;background:#fff;border:1px solid #a9a9bd;border-radius:22px;box-shadow:0 6px 20px rgba(34,34,60,.06)\">\n      <div style=\"order:2;position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid #a9a9bd;filter:saturate(1.6) brightness(1.04) contrast(1.05);background:linear-gradient(140deg,#DCCDFB,#BFEAF7)\">\n        <svg viewBox=\"0 0 400 300\" width=\"100%\" height=\"100%\" role=\"img\" aria-label=\"Ten minutes of vocabulary a day\"><defs><pattern id=\"dg9\" width=\"26\" height=\"26\" patternUnits=\"userSpaceOnUse\"><circle cx=\"2\" cy=\"2\" r=\"1.5\" fill=\"#3F27BD\" opacity=\".38\"></circle></pattern></defs><rect x=\"0\" y=\"0\" width=\"400\" height=\"300\" fill=\"url(#dg9)\"></rect><circle cx=\"352\" cy=\"42\" r=\"64\" fill=\"rgba(63,39,189,.20)\"></circle><circle cx=\"46\" cy=\"262\" r=\"74\" fill=\"rgba(210,44,178,.19)\"></circle><g stroke-linecap=\"round\"><path d=\"M368 250 l0 14 M361 257 l14 0\" stroke=\"#FFC46B\" stroke-width=\"3\"></path><path d=\"M28 46 l0 12 M22 52 l12 0\" stroke=\"#F434A1\" stroke-width=\"3\" opacity=\".85\"></path><path d=\"M206 22 l0 9 M201.5 26.5 l9 0\" stroke=\"#22B8D6\" stroke-width=\"2.6\" opacity=\".9\"></path></g><circle cx=\"386\" cy=\"120\" r=\"3.2\" fill=\"#FFC46B\"></circle><circle cx=\"14\" cy=\"150\" r=\"2.6\" fill=\"#45C6E6\"></circle>\n          <circle cx=\"322\" cy=\"82\" r=\"46\" fill=\"#D22CB2\" opacity=\".38\"></circle>\n          <g transform=\"rotate(-8 200 160)\" opacity=\".5\">\n            <rect x=\"118\" y=\"70\" width=\"164\" height=\"112\" rx=\"16\" fill=\"#fff\" stroke=\"#A88CF4\"></rect>\n          </g>\n          <g transform=\"rotate(-4 200 160)\" opacity=\".8\">\n            <rect x=\"122\" y=\"80\" width=\"164\" height=\"112\" rx=\"16\" fill=\"#fff\" stroke=\"#A88CF4\"></rect>\n          </g>\n          <g style=\"animation:fl 5.6s ease-in-out infinite\">\n            <rect x=\"118\" y=\"92\" width=\"164\" height=\"112\" rx=\"16\" fill=\"#fff\" stroke=\"#A88CF4\"></rect>\n            <text x=\"200\" y=\"140\" text-anchor=\"middle\" font-family=\"Playfair Display, Georgia, serif\" font-style=\"italic\" font-size=\"30\" font-weight=\"700\" fill=\"#1A1830\">lucid</text>\n            <rect x=\"152\" y=\"158\" width=\"96\" height=\"8\" rx=\"4\" fill=\"#6A46EC\"></rect>\n            <rect x=\"168\" y=\"174\" width=\"64\" height=\"8\" rx=\"4\" fill=\"#BBA4F8\"></rect>\n          </g>\n          <g transform=\"translate(64,214)\">\n            <rect width=\"272\" height=\"14\" rx=\"7\" fill=\"#A88CF4\"></rect>\n            <rect width=\"0\" height=\"14\" rx=\"7\" fill=\"#22B8D6\"><animate attributeName=\"width\" values=\"0;196\" dur=\"1.8s\" begin=\"0.4s\" fill=\"freeze\"></animate></rect>\n          </g>\n          <g font-family=\"JetBrains Mono, monospace\" font-size=\"12\" font-weight=\"700\" fill=\"#4a4a55\">\n            <text x=\"64\" y=\"256\">DAY 1</text><text x=\"336\" y=\"256\" text-anchor=\"end\">DAY 16</text>\n          </g>\n          <g transform=\"translate(318,166)\" style=\"animation:fl2 4.2s ease-in-out infinite\">\n            <circle r=\"24\" fill=\"#D22CB2\"></circle>\n            <text y=\"8\" text-anchor=\"middle\" font-family=\"Poppins, sans-serif\" font-size=\"17\" font-weight=\"800\" fill=\"#fff\">10′</text>\n          </g>\n        </svg>\n      </div>\n      <div>\n        <p style=\"font:800 .95rem/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:#D22CB2\">STEP 10</p>\n        <span style=\"display:inline-block;margin:14px 0 12px;font:700 .82rem/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border-radius:999px;background:#FDEAF6;color:#8E1A5D\">Bonus · included</span>\n        <h3 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:1.45rem;color:#1A1830;margin-bottom:10px\">The vocabulary app, all yours</h3>\n        <p style=\"font-size:.95rem\">1,500+ words and 6,000+ questions, ten minutes a day, tracked so you can see the streak without asking. Included in the price — the cheapest marks in the whole exam.</p>\n      </div>\n    </article>\n  </div>\n</section>\n\n<section style=\"padding:44px 0\">\n  <div style=\"max-width:900px;margin:0 auto;padding:0 18px\">\n    <figure style=\"margin:0;background:linear-gradient(120deg,#3434b9d9,#9e0a54b5);border-radius:24px;padding:22px 26px;color:#fff\">\n      <blockquote style=\"margin:0;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600;font-size:clamp(1.2rem,2.6vw,1.7rem);line-height:1.45\">\"The second sitting is the thing. He goes on Tuesday half-asleep, then again on Thursday and suddenly he's the one explaining it to me.\"</blockquote>\n      <figcaption style=\"margin-top:10px;font:500 .74rem/1.6 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#F0E4F9\">Parent · Year 5 · Kent</figcaption>\n    </figure>\n  </div>\n</section>\n\n<section id=\"included\" style=\"padding:44px 0\">\n  <div style=\"max-width:1120px;margin:0 auto;padding:0 18px\">\n    <p style=\"font:800 1.95rem/1.2 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#D22CB2;text-align:center\">Included every month</p>\n    <h2 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:25px;color:#1A1830;text-align:center;margin:10px 0 8px\">Everything, <span style=\"font-family:'Playfair Display',Georgia,serif;font-style:italic;background:linear-gradient(90deg,#3F27BD,#D22CB2);-webkit-background-clip:text;background-clip:text;color:transparent\">in one place</span></h2>\n    <p style=\"text-align:center;max-width:40ch;margin:0 auto 16px\">No add-ons, no per-paper charges, no upsells at the door.</p>\n\n    <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:16px\">\n      <article style=\"background:#fff;border:1px solid #a9a9bd;border-radius:20px;padding:18px 20px;box-shadow:0 10px 30px rgba(34,34,60,.07)\"><span style=\"display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:#F1EEFC;font:700 .82rem/1 'JetBrains Mono',monospace;color:#3F27BD;margin-bottom:16px\">4×</span><b style=\"display:block;color:#1A1830;font:600 1.04rem/1.3 'Open Sans',sans-serif;margin-bottom:6px\">4 live classes a week</b><p style=\"font-size:.92rem\">Two classes, each taught twice. Recordings up the same evening and kept for the month.</p></article><article style=\"background:#fff;border:1px solid #a9a9bd;border-radius:20px;padding:18px 20px;box-shadow:0 10px 30px rgba(34,34,60,.07)\"><span style=\"display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:#F1EEFC;font:700 .82rem/1 'JetBrains Mono',monospace;color:#3F27BD;margin-bottom:16px\">CW</span><b style=\"display:block;color:#1A1830;font:600 1.04rem/1.3 'Open Sans',sans-serif;margin-bottom:6px\">Classwork &amp; homework</b><p style=\"font-size:.92rem\">Set after every class, day by day, marked automatically with the working shown.</p></article><article style=\"background:#fff;border:1px solid #a9a9bd;border-radius:20px;padding:18px 20px;box-shadow:0 10px 30px rgba(34,34,60,.07)\"><span style=\"display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:#F1EEFC;font:700 .82rem/1 'JetBrains Mono',monospace;color:#3F27BD;margin-bottom:16px\">Q</span><b style=\"display:block;color:#1A1830;font:600 1.04rem/1.3 'Open Sans',sans-serif;margin-bottom:6px\">Quizzes &amp; concept builders</b><p style=\"font-size:.92rem\">Short, targeted, and unlocked as each topic is taught — not dumped all at once.</p></article><article style=\"background:#fff;border:1px solid #a9a9bd;border-radius:20px;padding:18px 20px;box-shadow:0 10px 30px rgba(34,34,60,.07)\"><span style=\"display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:#F1EEFC;font:700 .82rem/1 'JetBrains Mono',monospace;color:#3F27BD;margin-bottom:16px\">16</span><b style=\"display:block;color:#1A1830;font:600 1.04rem/1.3 'Open Sans',sans-serif;margin-bottom:6px\">Vocabulary app</b><p style=\"font-size:.92rem\">Sixteen sets, ten minutes a day, tracked so you can see the streak without asking.</p></article><article style=\"background:#fff;border:1px solid #a9a9bd;border-radius:20px;padding:18px 20px;box-shadow:0 10px 30px rgba(34,34,60,.07)\"><span style=\"display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:#F1EEFC;font:700 .82rem/1 'JetBrains Mono',monospace;color:#3F27BD;margin-bottom:16px\">M</span><b style=\"display:block;color:#1A1830;font:600 1.04rem/1.3 'Open Sans',sans-serif;margin-bottom:6px\">A monthly mock exam</b><p style=\"font-size:.92rem\">Timed, sectioned, sat under real conditions — with the topic breakdown afterwards.</p></article><article style=\"background:#fff;border:1px solid #a9a9bd;border-radius:20px;padding:18px 20px;box-shadow:0 10px 30px rgba(34,34,60,.07)\"><span style=\"display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:#F1EEFC;font:700 .82rem/1 'JetBrains Mono',monospace;color:#3F27BD;margin-bottom:16px\">+3</span><b style=\"display:block;color:#1A1830;font:600 1.04rem/1.3 'Open Sans',sans-serif;margin-bottom:6px\">Three extra practice papers</b><p style=\"font-size:.92rem\">Beyond the monthly mock, for families who want more. Same marking, same analysis.</p></article>\n    </div>\n  </div>\n</section>\n\n<section style=\"padding:44px 0\">\n  <div style=\"max-width:1120px;margin:0 auto;padding:0 18px\">\n    <p style=\"font:800 1.95rem/1 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:#D22CB2;text-align:center;padding: 30px;\">Why it is called PREP</p>\n    \n    \n\n    <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:0 auto\">\n      <div style=\"background:#fff;border:1px solid #a9a9bd;border-radius:22px;padding:16px 18px;box-shadow:0 10px 30px rgba(34,34,60,.08)\">\n        <h3 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:1.12rem;color:#1A1830;margin-bottom:14px\">What we do</h3>\n        <ul style=\"list-style:none;margin:0;padding:0\">\n          <li style=\"position:relative;padding:10px 0 10px 22px;font-size:.94rem;border-top:1px solid #a9a9bd\"><span style=\"position:absolute;left:0;top:17px;width:13px;height:13px;border-radius:4px;background:#22B8D6\"></span>Teach both classes twice, live, every week</li><li style=\"position:relative;padding:10px 0 10px 22px;font-size:.94rem;border-top:1px solid #a9a9bd\"><span style=\"position:absolute;left:0;top:17px;width:13px;height:13px;border-radius:4px;background:#22B8D6\"></span>Set and mark the classwork and homework</li><li style=\"position:relative;padding:10px 0 10px 22px;font-size:.94rem;border-top:1px solid #a9a9bd\"><span style=\"position:absolute;left:0;top:17px;width:13px;height:13px;border-radius:4px;background:#22B8D6\"></span>Run the monthly mock and break down the result</li><li style=\"position:relative;padding:10px 0 10px 22px;font-size:.94rem;border-top:1px solid #a9a9bd\"><span style=\"position:absolute;left:0;top:17px;width:13px;height:13px;border-radius:4px;background:#22B8D6\"></span>Show you, in the app, exactly where marks are being lost</li><li style=\"position:relative;padding:10px 0 10px 22px;font-size:.94rem;border-top:1px solid #a9a9bd\"><span style=\"position:absolute;left:0;top:17px;width:13px;height:13px;border-radius:4px;background:#22B8D6\"></span>Keep everything in one place, for one price</li>\n        </ul>\n      </div>\n      <div style=\"background:#fff;border:1px solid #a9a9bd;border-radius:22px;padding:16px 18px;box-shadow:0 10px 30px rgba(34,34,60,.08)\">\n        <h3 style=\"font-family:'Poppins',sans-serif;font-weight:700;font-size:1.12rem;color:#1A1830;margin-bottom:14px\">What you do</h3>\n        <ul style=\"list-style:none;margin:0;padding:0\">\n          <li style=\"position:relative;padding:10px 0 10px 22px;font-size:.94rem;border-top:1px solid #a9a9bd\"><span style=\"position:absolute;left:0;top:17px;width:13px;height:13px;border-radius:4px;background:#F434A1\"></span>Make sure they turn up to one of the two slots</li><li style=\"position:relative;padding:10px 0 10px 22px;font-size:.94rem;border-top:1px solid #a9a9bd\"><span style=\"position:absolute;left:0;top:17px;width:13px;height:13px;border-radius:4px;background:#F434A1\"></span>Check the classwork got done that evening</li><li style=\"position:relative;padding:10px 0 10px 22px;font-size:.94rem;border-top:1px solid #a9a9bd\"><span style=\"position:absolute;left:0;top:17px;width:13px;height:13px;border-radius:4px;background:#F434A1\"></span>Sit with them, guide them</li><li style=\"position:relative;padding:10px 0 10px 22px;font-size:.94rem;border-top:1px solid #a9a9bd\"><span style=\"position:absolute;left:0;top:17px;width:13px;height:13px;border-radius:4px;background:#F434A1\"></span>Keep the vocabulary streak alive</li><li style=\"position:relative;padding:10px 0 10px 22px;font-size:.94rem;border-top:1px solid #a9a9bd\"><span style=\"position:absolute;left:0;top:17px;width:13px;height:13px;border-radius:4px;background:#F434A1\"></span>Tell us when something is not working</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</section>\n\n\n\n</div>\n\n<script>\n(function () {\n  /* v11.2.22b — plain DOM, no framework, so this page works anywhere it is pasted. */\n  var DAYS = [{\"when\": \"Tuesdays &amp; Thursdays · 17:30\", \"name\": \"English &amp; Verbal Reasoning\", \"subj\": [\"Comprehension\", \"SPaG\", \"Writing\", \"Verbal reasoning\"], \"blurb\": \"A passage taken apart properly, the reasoning types that carry the most marks, and a piece of writing planned in front of them.\", \"twice\": \"Tuesday and Thursday. Come to either — or come to both and watch it land the second time.\", \"flow\": [[\"In the class\", \"One comprehension worked through live, then the VR types drilled at exam pace.\", 0], [\"Classwork, same evening\", \"A short set on exactly what was taught. Marked as they go.\", 0], [\"Homework, before the next class\", \"One full passage, timed, so the clock stops being the enemy.\", 0], [\"Your ten minutes\", \"Read their answer to the inference question. That one is never marked well by a machine.\", 1]]}, {\"when\": \"Wednesdays &amp; Fridays · 17:30\", \"name\": \"Maths &amp; Non-Verbal Reasoning\", \"subj\": [\"Arithmetic\", \"Problem solving\", \"Non-verbal\", \"Speed\"], \"blurb\": \"The topics in the order the papers ask for them, methods shown twice, and the NVR patterns that most children never get taught at all.\", \"twice\": \"Wednesday and Friday. Same lesson, same worksheet, second chance.\", \"flow\": [[\"In the class\", \"Worked examples on screen, then the same question type at speed.\", 0], [\"Classwork, same evening\", \"Ten questions, instant marking, working shown where they slip.\", 0], [\"Homework, before the next class\", \"A mixed set — because the real paper never tells you the topic.\", 0], [\"Your ten minutes\", \"Ask them to explain one question back to you. If they can, it is theirs.\", 1]]}];\n\n  /* day tabs — null-guarded: this page only keeps some of the slots the\n     component used to fill, so missing ones must not stop the rest. */\n  var tabs = document.querySelectorAll('[data-day]');\n  function fill(sel, html) {\n    var el = document.querySelector(sel);\n    if (el) el.innerHTML = html;\n  }\n  function paintDay(i) {\n    var d = DAYS[i];\n    tabs.forEach(function (t, k) { t.classList.toggle('on', k === i); });\n    fill('[data-day-when]', d.when);\n    fill('[data-day-name]', d.name);\n    fill('[data-day-blurb]', d.blurb);\n    fill('[data-day-twice]', d.twice);\n    fill('[data-day-subj]', d.subj.map(function (x) { return '<span class=\"prep-subj\">' + x + '</span>'; }).join(''));\n    fill('[data-day-flow]', d.flow.map(function (f) {\n      return '<li class=\"prep-flow-li\"><span class=\"prep-dot' + (f[2] ? ' parent' : '') + '\"></span>'\n        + '<b>' + f[0] + '</b><small>' + f[1] + '</small></li>';\n    }).join(''));\n  }\n  tabs.forEach(function (t, i) { t.addEventListener('click', function () { paintDay(i); }); });\n\n  /* FAQ — the open state lives on the .open class; the closed max-height\n     lives in the stylesheet (not inline), so the class can win. */\n  document.querySelectorAll('[data-faq]').forEach(function (b) {\n    b.addEventListener('click', function () {\n      var box = b.parentElement.querySelector('.prep-faq-a');\n      var open = box.classList.toggle('open');\n      b.querySelector('.prep-faq-ico').textContent = open ? '\\u2212' : '+';\n      b.querySelector('.prep-faq-ico').style.color = open ? '#3F27BD' : '#4a4a55';\n    });\n  });\n})();\n</script>\n\n\n</body></html>","showCourses":true,"showMockEvents":false,"showOlympiad":false,"showTeded":false,"brands":["sparks","bright"],"active":true,"position":30,"groups":[],"courses":[{"id":"c_8b570c67b336","slug":"11-plus-gl-prep-course","title":"11 Plus GL PREP Course","category":"11 Plus","description":"","thumbnail":"📚","featured":false,"free":false,"cohort":"11 Plus","lessons":172,"quizzes":369,"exams":14,"questions":140,"enrolled":1,"pricePence":16000,"strikePence":16000,"productId":"prod_b173b356cacd"}],"courseCount":1},{"id":"pg_69977f30bc1a","slug":"vocabulary","href":"/vocabulary","title":"Vocabulary","navLabel":"Vocabulary for 11 Plus","tileSub":"Twenty minutes a day","tileMeta":"16 Sets , 1600+ Words","eyebrow":"Twenty minutes a day","icon":"📖","accent":"#0C7C93","hero":{"headline":"Vocabulary for {11 Plus Exams}","body":"Sixteen graded sets, 1600+ Words , twenty minutes a day, in the app. <br> Interactive learning , Multiple Quizzes on Meaning, Synonyms, Antonyms, Spellings.","image":"","imageAlt":"Vocabulary","ctaLabel":"More about Vocabulary","ctaHref":"/vocabulary"},"summary":"Sixteen graded sets, ten minutes a day, tracked so you can see the streak without asking.","whatItIs":"<p>Comprehension papers are written to be read by a child who knows the words. Most of what separates two children on an English paper is not technique, it is vocabulary, and vocabulary is the one thing that cannot be crammed the week before.</p><p>So it is built as a daily habit rather than a course: short sets, spaced repetition, and a streak your child can see.</p>1600+ words, Multiple Quizzes on Meaning, Synonyms, Antonyms, Spellings.","howSteps":[{"icon":"📖","title":"Twenty minutes","text":"One short set a day, in the app. Not an hour on a Sunday."},{"icon":"","title":"🔁","text":"Multiple Quizzes on Meaning, Synonyms, Antonyms, Spellings."},{"icon":"📈","title":"You can see it","text":"The streak and the words learned, without having to ask."}],"media":{"kind":"none","url":"","caption":"","embed":null},"details":[{"title":"How many words?","text":"Sixteen sets, graded, covering the 1600+ vocabulary"},{"title":"Is it included?","text":"Yes ,with 11 Plus PREP and Flourish Club and Can be bought separately"}],"showcase":{"on":false,"eyebrow":"","headline":"","summary":"","facts":[],"cta1":{"label":"","href":""},"cta2":{"label":"","href":""},"flip":false},"art":[],"artHero":{"svg":true,"svgWhich":"","items":[]},"artRow":{"svg":true,"svgWhich":"","items":[]},"blocks":[],"ctaLabel":"Open the vocabulary app","ctaHref":"/app#/vocabulary","groupByProvider":false,"pageCustomMode":"above","custom":{"html":"<style>\n/* Vocabulary — home-page section. Same shape and palette as the other\n   programme cards; magenta is this one's accent. */\n.sx{--pa:#C42BB0;position:relative;padding:80px 4vw;overflow:hidden;\n  font:400 15px/1.8 'Open Sans','Segoe UI',system-ui,sans-serif;color:#6b7280}\n.sx *{box-sizing:border-box}\n.sx h2{font-family:'Poppins',sans-serif;font-weight:800;color:#1b1442;line-height:1.15;\n  margin:0;font-size:clamp30px;letter-spacing:.04em}\n.sx p{margin:0}\n\n.vo-head{max-width:1240px;margin:0 auto 22px}\n.sx-row{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;\n  gap:40px;align-items:stretch}\n.sx-copy,.sx-art{display:flex;flex-direction:column}\n\n\n/* ---------- left: what it is ---------- */\n.vo-card{background:#fff;border:1px solid #e9e6f5;border-radius:22px;padding:26px 28px;\n  box-shadow:0 18px 44px rgba(27,20,66,.07)}\n.vo-list{list-style:none;margin:0;padding:0;display:grid;gap:15px}\n/* the bullet and ONE span are the only grid children; a loose <b> would\n   otherwise become a grid item of its own and drop to the next row */\n.vo-list li{display:grid;grid-template-columns:11px 1fr;gap:14px;align-items:start}\n.vo-list li::before{content:\"\";width:11px;height:11px;border-radius:4px;margin-top:9px;\n  background:var(--pa);opacity:.85}\n.vo-list li > span{font-size:1rem;line-height:1.65;color:#4b5563}\n.vo-list b{color:#1b1442;font-weight:700}\n\n.vo-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}\n.vo-btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none;\n  font:700 15px/1 'Poppins',sans-serif;padding:17px 32px;border-radius:999px;\n  transition:transform .15s,box-shadow .15s,background-position .35s}\n.vo-go{color:#fff;background:linear-gradient(90deg,#5B2AD6,#C42BB0);background-size:180% 100%;\n  box-shadow:0 10px 26px rgba(91,42,214,.28)}\n.vo-go:hover{background-position:95% 0;transform:translateY(-2px)}\n.vo-ghost{background:#fff;color:#1b1442;box-shadow:inset 0 0 0 2px #e5e2f0}\n.vo-ghost:hover{box-shadow:inset 0 0 0 2px var(--pa);color:var(--pa);transform:translateY(-2px)}\n\n/* ---------- right: the carousel ---------- */\n.vo-panel{background:#fff;border:1px solid #e9e6f5;border-radius:22px;padding:24px 26px 22px;\n  box-shadow:0 18px 44px rgba(27,20,66,.07);display:flex;flex-direction:column}\n.vo-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}\n.vo-panel-head b{font:700 1.05rem/1 'Poppins',sans-serif;color:#1b1442}\n.vo-tag{font:500 .74rem/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--pa)}\n\n.vo-stage{position:relative;border-radius:16px;overflow:hidden;background:#faf9fe;\n  border:1px solid #eee9f8}\n/* a fixed frame, whatever the picture: a screenshot and a photo of different\n   sizes would otherwise make the card two heights as the carousel turns */\n.vo-slide{display:none}\n.vo-slide.on{display:block;animation:vo-fade .45s ease}\n@keyframes vo-fade{from{opacity:0}to{opacity:1}}\n.vo-slide img{display:block;width:100%;height:clamp(210px,25vw,300px);object-fit:contain;\n  background:#fff}\n.vo-cap{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;\n  font:500 .82rem/1.4 'Open Sans',sans-serif;color:#fff;\n  background:linear-gradient(180deg,rgba(26,24,48,0),rgba(26,24,48,.82))}\n\n.vo-nav{position:absolute;top:50%;transform:translateY(-50%);border:0;cursor:pointer;\n  width:34px;height:34px;border-radius:50%;background:#fff;color:#1b1442;\n  box-shadow:0 4px 14px rgba(0,0,0,.16);font-size:18px;line-height:1;\n  opacity:0;transition:opacity .2s}\n.vo-stage:hover .vo-nav,.vo-nav:focus-visible{opacity:1}\n.vo-prev{left:10px} .vo-next{right:10px}\n\n.vo-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}\n.vo-dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;\n  background:#e0dcf0;transition:background .2s,transform .2s}\n.vo-dot.on{background:var(--pa);transform:scale(1.25)}\n\n.vo-note{margin-top:16px;border-radius:14px;padding:14px 18px;\n  background:#FDEFF9;color:#7a2a68;font-size:.95rem}\n.vo-note b{color:#9c1f80;font-weight:700}\n\n/* ---------- what Twenty minutes buys ---------- */\n.vo-inc{max-width:1240px;margin:56px auto 0}\n.vo-kicker{font:800 1.2rem/1.2 'JetBrains Mono',monospace;letter-spacing:.18em;\n  text-transform:uppercase;color:#D22CB2;text-align:center;margin:0}\n.vo-inc h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.6rem;color:#1b1442;\n  text-align:center;margin:10px 0 26px}\n.vo-inc h3 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;\n  background:linear-gradient(90deg,#3F27BD,#D22CB2);-webkit-background-clip:text;\n  background-clip:text;color:transparent}\n\n.vo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}\n.vo-item{background:#fff;border:1px solid #e9e6f5;border-radius:20px;padding:20px 22px;\n  box-shadow:0 10px 30px rgba(27,20,66,.07);\n  opacity:0;transform:translateY(14px);\n  transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}\n.sx.go .vo-item{opacity:1;transform:none}\n.sx.go .vo-item:nth-child(2){transition-delay:.07s}\n.sx.go .vo-item:nth-child(3){transition-delay:.14s}\n.sx.go .vo-item:nth-child(4){transition-delay:.21s}\n.sx.go .vo-item:nth-child(5){transition-delay:.28s}\n.sx.go .vo-item:nth-child(6){transition-delay:.35s}\n.vo-badge{display:flex;align-items:center;justify-content:center;width:42px;height:42px;\n  border-radius:12px;background:#FDEFF9;font:700 .82rem/1 'JetBrains Mono',monospace;\n  color:var(--pa);margin-bottom:15px}\n.vo-item b{display:block;color:#1b1442;font:600 1.04rem/1.3 'Open Sans',sans-serif;margin-bottom:6px}\n.vo-item p{font-size:.92rem;line-height:1.6}\n\n@media (max-width:980px){ .vo-grid{grid-template-columns:repeat(2,1fr)} }\n@media (max-width:900px){ .sx-row{grid-template-columns:1fr;gap:26px} }\n@media (max-width:620px){ .vo-grid{grid-template-columns:1fr} }\n@media (prefers-reduced-motion:reduce){\n  .sx *{animation:none!important;transition:none!important}\n  .vo-item{opacity:1!important;transform:none!important}\n}\n</style>\n\n<div class=\"sx sx-vocabulary\" style=\"--pa:#C42BB0\">\n  <div class=\"vo-head\"><h2>Vocabulary</h2></div>\n  <div class=\"sx-row\">\n\n    <div class=\"sx-copy\">\n      <div class=\"vo-card\">\n        <ul class=\"vo-list\">\n          <li><span>Twenty minutes a day, in the app.</span></li>\n          <li><span><b>Sixteen graded sets , 1600+ Words </b>, worked through in order.</span></li>\n          <li><span>Interactive learning, Multiple Quizzes on Meaning, Synonyms, Antonyms, Spellings..</span></li>\n          <li><span>Every set is tracked, so you can see the streak without asking.</span></li>\n          <li><span>Twenty minutes a day fixes more marks than an hour of almost anything else.</span></li>\n        </ul>\n      </div>\n      <div class=\"vo-ctas\">\n        <a class=\"vo-btn vo-go\" href=\"/vocabulary\">Start a set →</a>\n        <a class=\"vo-btn vo-ghost\" href=\"/vocabulary#how\">How the sets work</a>\n      </div>\n    </div>\n\n    <div class=\"sx-art\">\n      <div class=\"vo-panel\">\n        <div class=\"vo-panel-head\"><b>Twenty minutes a day</b><span class=\"vo-tag\">IN THE APP</span></div>\n\n        <div class=\"vo-stage\" data-vo-stage>\n          <!-- REPLACE THESE THREE PATHS with the real screenshots. To add a\n               fourth, copy a figure and drop it in: the dots and the arrows\n               count the slides themselves, so nothing else needs changing. -->\n          <figure class=\"vo-slide on\">\n            <img src=\"/assets/image/vocab-1.png\" alt=\"A vocabulary set open in the app, with a word and its meaning.\" loading=\"lazy\">\n            <figcaption class=\"vo-cap\">A set, Twenty minutes long.</figcaption>\n          </figure>\n          <figure class=\"vo-slide\">\n            <img src=\"/assets/image/vocab-2.png\" alt=\"A word being tested in context, with four choices.\" loading=\"lazy\">\n            <figcaption class=\"vo-cap\">The word in a sentence, not on a list.</figcaption>\n          </figure>\n          <figure class=\"vo-slide\">\n            <img src=\"/assets/image/vocab-3.png\" alt=\"The streak and the sets completed so far.\" loading=\"lazy\">\n            <figcaption class=\"vo-cap\">The streak, and what is left.</figcaption>\n          </figure>\n\n          <button class=\"vo-nav vo-prev\" type=\"button\" data-vo-step=\"-1\" aria-label=\"Previous picture\">‹</button>\n          <button class=\"vo-nav vo-next\" type=\"button\" data-vo-step=\"1\" aria-label=\"Next picture\">›</button>\n        </div>\n        <div class=\"vo-dots\" data-vo-dots></div>\n\n        <p class=\"vo-note\"><b>Twenty minutes, every day</b> \n          on the app they already have.</p>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- ---------- what Twenty minutes buys ---------- -->\n  <div class=\"vo-inc\">\n    <p class=\"vo-kicker\">Twenty minutes a day</p>\n    <h3>Sixteen sets, and <em>the words that keep coming up</em></h3>\n\n    <div class=\"vo-grid\">\n      <article class=\"vo-item\">\n        <span class=\"vo-badge\">16</span>\n        <b>Sixteen graded sets, 1600+ Words</b>\n        <p>Worked through in order, each one harder than the last. No picking and choosing,\n          because the order is the point.</p>\n      </article>\n      <article class=\"vo-item\">\n        <span class=\"vo-badge\">10</span>\n        <b>Twenty minutes a day</b>\n        <p>Short enough to do on a school night, and short enough that nobody argues about\n          starting it.</p>\n      </article>\n      <article class=\"vo-item\">\n        <span class=\"vo-badge\">↺</span>\n        <b>Words come back</b>\n        <p>After a few days, then after a week. A word met once is forgotten; a word met four\n          times is theirs.<br>Interactive learning , Multiple Quizzes on Meaning, Synonyms, Antonyms, Spellings. </p>\n      </article>\n      <article class=\"vo-item\">\n        <span class=\"vo-badge\">VR</span>\n        <b>It pays into two papers</b>\n        <p>Verbal reasoning is mostly vocabulary wearing a puzzle costume, and comprehension\n          turns on the word they did not know.</p>\n      </article>\n      <article class=\"vo-item\">\n        <span class=\"vo-badge\">🔥</span>\n        <b>The streak is visible</b>\n        <p>You can see the run of days without asking, and so can they. That is most of what\n          keeps it going.</p>\n      </article>\n      <article class=\"vo-item\">\n        <span class=\"vo-badge\">✎</span>\n        <b>In a sentence, not a list</b>\n        <p>Words are tested the way they are met in a paper, so a child learns what a word\n          does rather than what it says.</p>\n      </article>\n    </div>\n\n    <div class=\"vo-ctas\">\n      <a class=\"vo-btn vo-go\" href=\"/vocabulary\">Start a set →</a>\n      <a class=\"vo-btn vo-ghost\" href=\"/vocabulary#how\">How the sets work</a>\n    </div>\n  </div>\n</div>\n\n<script>\n(function () {\n  /* Scoped to THIS block, and by CLASS rather than by id: a block's ids can be\n     namespaced when it is placed on a page, so getElementById is the one thing\n     a pasted block should never rely on. */\n  var root = document.currentScript && document.currentScript.closest(\".sx\");\n  if (!root) { var all = document.querySelectorAll(\".sx.sx-vocabulary\"); root = all[all.length - 1]; }\n  if (!root || root.dataset.on) return;\n  root.dataset.on = \"1\";\n\n  var reduced = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n  var go = function () { root.classList.add(\"go\"); };\n  if (!(\"IntersectionObserver\" in window)) go();\n  else {\n    var io = new IntersectionObserver(function (es) {\n      es.forEach(function (e) { if (e.isIntersecting) { go(); io.disconnect(); } });\n    }, { threshold: 0, rootMargin: \"0px 0px -14% 0px\" });\n    io.observe(root);\n  }\n\n  var stage = root.querySelector(\"[data-vo-stage]\");\n  var dotsBox = root.querySelector(\"[data-vo-dots]\");\n  if (!stage || !dotsBox) return;\n  var slides = [].slice.call(stage.querySelectorAll(\".vo-slide\"));\n  if (slides.length < 2) { dotsBox.style.display = \"none\"; return; }\n\n  var at = 0, hold = 0;\n  slides.forEach(function (_, i) {\n    var b = document.createElement(\"button\");\n    b.type = \"button\"; b.className = \"vo-dot\" + (i ? \"\" : \" on\");\n    b.setAttribute(\"aria-label\", \"Picture \" + (i + 1) + \" of \" + slides.length);\n    b.onclick = function () { hold = Date.now() + 20000; show(i); };\n    dotsBox.appendChild(b);\n  });\n  var dots = [].slice.call(dotsBox.children);\n\n  function show(n) {\n    at = (n % slides.length + slides.length) % slides.length;\n    slides.forEach(function (s, i) { s.classList.toggle(\"on\", i === at); });\n    dots.forEach(function (d, i) { d.classList.toggle(\"on\", i === at); });\n  }\n\n  stage.querySelectorAll(\"[data-vo-step]\").forEach(function (b) {\n    b.onclick = function () { hold = Date.now() + 20000; show(at + (+b.dataset.voStep)); };\n  });\n\n  /* a touch pauses it for twenty seconds; it never stops for good, because a\n     carousel someone glanced at should not sit still for ever after */\n  if (!reduced) setInterval(function () {\n    if (Date.now() < hold) return;\n    if (!root.classList.contains(\"go\")) return;\n    show(at + 1);\n  }, 6000);\n})();\n</script>","mode":"section","fullWidth":false},"pageCustomHtml":"","showCourses":true,"showMockEvents":false,"showOlympiad":false,"showTeded":false,"brands":["sparks","bright"],"active":true,"position":35,"groups":[],"courses":[],"courseCount":0},{"id":"pg_d0ce6d01eb24","slug":"flourish-club","href":"/flourish-club","title":"Flourish Club, {in your school}","navLabel":"Flourish Club 11 Plus Classes","tileSub":"Weekly, in your school","tileMeta":"£120 a month · subsidised","eyebrow":"After school · in your school","icon":"🌱","accent":"#15803D","hero":{"headline":"Flourish Club 11 Plus , {in your school}","body":"Small weekly classes run in partnership with primary schools — qualified teaching, billed by the session, with the online programme included.","image":"","imageAlt":"Flourish Club, {in your school}","ctaLabel":"More about Flourish Club","ctaHref":"/#contact"},"summary":"A weekly club in your own school hall, taught by our teachers. The full programme and a portal login for every child.","whatItIs":"<p>Flourish Club exists because good 11 Plus preparation should not depend on being able to afford £40 an hour. Classes run weekly at partner primary schools, taught by a qualified teacher, and are billed per session in advance — so a term you cannot attend is a term you do not pay for.</p><p>Every club member also gets the online course, so the week's class is reinforced at home.</p>","howSteps":[{"icon":"🏫","title":"Join a class","text":"Pick the weekly slot running at your school."},{"icon":"👩‍🏫","title":"Taught weekly","text":"A small group with a qualified teacher, following the full syllabus."},{"icon":"💻","title":"Practise at home","text":"The online course covers the same week, with quizzes and papers."},{"icon":"💳","title":"Pay monthly","text":"Billed monthly in advance ."}],"media":{"kind":"none","url":"","caption":"","embed":null},"details":[],"showcase":{"on":false,"eyebrow":"","headline":"","summary":"","facts":[],"cta1":{"label":"","href":""},"cta2":{"label":"","href":""},"flip":false},"art":[],"artHero":{"svg":true,"svgWhich":"","items":[]},"artRow":{"svg":true,"svgWhich":"","items":[]},"blocks":[],"ctaLabel":"Ask about a class","ctaHref":"/#contact","groupByProvider":false,"pageCustomMode":"above","custom":{"html":"<style>\n/* Flourish Club — home-page section. Same shape as the PREP card, so the two\n   read as one family down the page; only the accent and the drawing differ. */\n.sx{--pa:#15803D;position:relative;padding:80px 4vw;overflow:hidden;\n  font:400 15px/1.8 'Open Sans','Segoe UI',system-ui,sans-serif;color:#6b7280}\n.sx *{box-sizing:border-box}\n.sx h2{font-family:'Poppins',sans-serif;font-weight:800;color:#1b1442;line-height:1.15;\n  margin:0;font-size:30px;letter-spacing:.04em}\n.sx p{margin:0}\n\n/* the heading spans both columns, so the two cards start at the same height */\n.fc-head{max-width:1240px;margin:0 auto 22px}\n.sx-row{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;\n  gap:40px;align-items:stretch}\n.sx-copy,.sx-art{flex-direction:column}\n.sx-art .fc-panel{flex:1}\n\n/* ---------- left: what it is ---------- */\n.fc-card{background:#fff;border:1px solid #e6efe8;border-radius:22px;padding:26px 28px;\n  box-shadow:0 18px 44px rgba(21,128,61,.08)}\n.fc-list{list-style:none;margin:0;padding:0;display:grid;gap:15px}\n/* the bullet and ONE span are the only grid children — a loose <b> would\n   otherwise become a grid item of its own and drop to the next row */\n.fc-list li{display:grid;grid-template-columns:11px 1fr;gap:14px;align-items:start}\n.fc-list li::before{content:\"\";width:11px;height:11px;border-radius:4px;margin-top:9px;\n  background:var(--pa);opacity:.85}\n.fc-list li > span{font-size:1rem;line-height:1.65;color:#4b5563}\n.fc-list b{color:#1b1442;font-weight:700}\n.fc-was{color:#8a94a6;text-decoration:line-through;font-weight:400}\n\n.fc-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}\n.fc-btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none;\n  font:700 15px/1 'Poppins',sans-serif;padding:17px 32px;border-radius:999px;\n  transition:transform .15s,box-shadow .15s,background-position .35s}\n.fc-go{color:#fff;background:linear-gradient(90deg,#15803D,#4BA35F);background-size:180% 100%;\n  box-shadow:0 10px 26px rgba(21,128,61,.3)}\n.fc-go:hover{background-position:95% 0;transform:translateY(-2px)}\n.fc-ghost{background:#fff;color:#1b1442;box-shadow:inset 0 0 0 2px #dfe7e1}\n.fc-ghost:hover{box-shadow:inset 0 0 0 2px var(--pa);color:var(--pa);transform:translateY(-2px)}\n\n/* ---------- right: where we are ---------- */\n.fc-panel{background:#fff;border:1px solid #e6efe8;border-radius:22px;padding:24px 28px 26px;\n  box-shadow:0 18px 44px rgba(21,128,61,.08);display:flex;flex-direction:column}\n.fc-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}\n.fc-panel-head b{font:700 1.05rem/1 'Poppins',sans-serif;color:#1b1442}\n.fc-count{font:500 .74rem/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--pa)}\n.fc-panel svg{display:block;width:100%;height:auto}\n.fc-note{margin-top:20px;border-radius:14px;padding:14px 18px;\n  background:#eaf6ee;color:#256b3c;font-size:.95rem}\n.fc-note b{color:#0f5a2a;font-weight:700}\n\n/* ---------- the drawing ----------\n   Learned the hard way: a CSS transform REPLACES an element's SVG\n   transform=\"translate(...)\" rather than adding to it, so animating a\n   positioned <g> flings it to the origin. Everything that moves is wrapped —\n   the outer <g> places it, the inner one animates. */\n.fc-route{stroke-dasharray:var(--len,420);stroke-dashoffset:var(--len,420)}\n.sx.go .fc-route{animation:fc-draw 1.6s var(--d,0s) ease-out forwards,\n  fc-march 2.4s calc(var(--d,0s) + 1.6s) linear infinite}\n@keyframes fc-draw{to{stroke-dashoffset:0}}\n/* once drawn, the dashes travel it — the teacher is on the way, not parked */\n@keyframes fc-march{to{stroke-dashoffset:-14}}\n\n.fc-pin{opacity:0;transform-box:fill-box;transform-origin:bottom center}\n.sx.go .fc-pin{animation:fc-drop .6s var(--d,0s) cubic-bezier(.2,1.5,.4,1) both,\n  fc-idle 4.5s calc(var(--d,0s) + 1s) ease-in-out infinite}\n@keyframes fc-drop{from{opacity:0;transform:translateY(-22px) scale(.6)}to{opacity:1;transform:none}}\n@keyframes fc-idle{0%,100%{transform:none}50%{transform:translateY(-4px)}}\n\n.fc-stem{stroke-dasharray:90;stroke-dashoffset:90}\n.sx.go .fc-stem{animation:fc-draw 1.1s 1.1s ease-out forwards}\n.fc-leaf-l,.fc-leaf-r{opacity:0;transform-box:fill-box}\n.sx.go .fc-leaf-l{transform-origin:100% 100%;\n  animation:fc-leaf .8s 1.35s cubic-bezier(.2,.9,.3,1) forwards, fc-sway 6.5s 2.15s ease-in-out infinite}\n.sx.go .fc-leaf-r{transform-origin:0% 100%;\n  animation:fc-leaf .8s 1.5s cubic-bezier(.2,.9,.3,1) forwards, fc-sway-alt 7.4s 2.45s ease-in-out infinite}\n@keyframes fc-leaf{from{opacity:0;transform:scale(.2) rotate(-14deg)}to{opacity:1;transform:none}}\n@keyframes fc-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}\n@keyframes fc-sway-alt{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}}\n\n.fc-base{opacity:0;transform-box:fill-box;transform-origin:center}\n.sx.go .fc-base{animation:fc-pop .5s 1.05s cubic-bezier(.2,1.4,.4,1) both}\n@keyframes fc-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}\n\n/* the light behind the plant, breathing slowly */\n.fc-bloom{opacity:0;transform-box:fill-box;transform-origin:center}\n.sx.go .fc-bloom{animation:fc-glow 7s 1.6s ease-in-out infinite}\n@keyframes fc-glow{0%,100%{opacity:.5;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}\n\n/* the four papers drifting round it — slow, small, and never far */\n.fc-float{opacity:0;transform-box:fill-box;transform-origin:center}\n.sx.go .fc-float{animation:fc-in .6s 1.4s ease both,\n  fc-drift 9s calc(2s + var(--d,0s)) ease-in-out infinite}\n@keyframes fc-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}\n@keyframes fc-drift{0%,100%{transform:translateY(0) rotate(-1.5deg)}\n  50%{transform:translateY(-9px) rotate(1.5deg)}}\n\n/* ---------- included every month ---------- */\n.fc-inc{max-width:1240px;margin:56px auto 0}\n.fc-kicker{font:800 1.2rem/1.2 'JetBrains Mono',monospace;letter-spacing:.18em;\n  text-transform:uppercase;color:var(--pa);text-align:center;margin:0}\n.fc-inc h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.6rem;color:#1b1442;\n  text-align:center;margin:10px 0 6px}\n.fc-inc h3 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;\n  background:linear-gradient(90deg,#15803D,#4BA35F);-webkit-background-clip:text;\n  background-clip:text;color:transparent}\n.fc-price{text-align:center;font-size:1.02rem;color:#4b5563;margin:0 0 26px}\n.fc-price b{color:#0f5a2a;font-weight:800;font-size:1.15rem}\n\n.fc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}\n.fc-item{background:#fff;border:1px solid #e6efe8;border-radius:20px;padding:20px 22px;\n  box-shadow:0 10px 30px rgba(21,128,61,.07);\n  opacity:0;transform:translateY(14px);\n  transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}\n.sx.go .fc-item{opacity:1;transform:none}\n.sx.go .fc-item:nth-child(2){transition-delay:.07s}\n.sx.go .fc-item:nth-child(3){transition-delay:.14s}\n.sx.go .fc-item:nth-child(4){transition-delay:.21s}\n.sx.go .fc-item:nth-child(5){transition-delay:.28s}\n.sx.go .fc-item:nth-child(6){transition-delay:.35s}\n.fc-badge{display:flex;align-items:center;justify-content:center;width:42px;height:42px;\n  border-radius:12px;background:#eaf6ee;font:700 .82rem/1 'JetBrains Mono',monospace;\n  color:var(--pa);margin-bottom:15px}\n.fc-item b{display:block;color:#1b1442;font:600 1.04rem/1.3 'Open Sans',sans-serif;margin-bottom:6px}\n.fc-item p{font-size:.92rem;line-height:1.6}\n\n@media (max-width:980px){ .fc-grid{grid-template-columns:repeat(2,1fr)} }\n@media (max-width:900px){ .sx-row{grid-template-columns:1fr;gap:26px} }\n@media (max-width:620px){ .fc-grid{grid-template-columns:1fr} }\n@media (prefers-reduced-motion:reduce){\n  .sx *{animation:none!important;transition:none!important}\n  .fc-pin,.fc-leaf-l,.fc-leaf-r,.fc-base,.fc-bloom,.fc-float,.fc-item{opacity:1!important;transform:none!important}\n  .fc-route,.fc-stem{stroke-dashoffset:0!important}\n}\n</style>\n\n<div class=\"sx sx-flourish-club\" style=\"--pa:#15803D\">\n  <div class=\"fc-head\"><h2>Flourish Club, 11 Plus PREP classes in your school</h2></div>\n  <div class=\"sx-row\">\n\n    <div class=\"sx-copy\">\n      <div class=\"fc-card\">\n        <ul class=\"fc-list\">\n          <li><span>A weekly club after school, in your own school hall.</span></li>\n          <li><span>Taught by our own teachers, following the same programme we teach everywhere.</span></li>\n          <li><span>All four 11 Plus papers: English, maths, verbal reasoning and\n            non-verbal reasoning.</span></li>\n          <li><span>Every child gets their own <b>login to the portal</b>, with homework, quizzes, the\n            vocabulary app, mock exams and the topic report all on their own account.</span></li>\n          <li><span>Work set in the club is marked the moment it is done, so you can see how the week\n            went without having to ask.</span></li>\n          <li><span>No travel and no evening rush. It finishes before you collect them.</span></li>\n          <li><span><b>£120 a month</b>, subsidised. The same class in person anywhere else costs\n            <span class=\"fc-was\">£180</span>.</span></li>\n          \n        </ul>\n      </div>\n      <div class=\"fc-ctas\">\n        <a class=\"fc-btn fc-go\" href=\"/flourish-club\">Bring it to our school →</a>\n        <a class=\"fc-btn fc-ghost\" href=\"/flourish-club#how\">How it works</a>\n      </div>\n    </div>\n\n    <div class=\"sx-art\">\n      <div class=\"fc-panel\">\n     \n\n        <svg viewBox=\"-16 -18 492 258\" role=\"img\"\n          aria-label=\" In each school a club grows, with maths, English, verbal and non-verbal reasoning around it.\">\n          <defs>\n            <radialGradient id=\"fc-bloom-g\">\n              <stop offset=\"0%\" stop-color=\"#4BA35F\" stop-opacity=\".38\"/>\n              <stop offset=\"100%\" stop-color=\"#4BA35F\" stop-opacity=\"0\"/>\n            </radialGradient>\n          </defs>\n\n          <path class=\"fc-route\" style=\"--len:420;--d:.35s\"\n            d=\"M52 168 C 120 92, 190 200, 258 120 S 372 74, 412 130\"\n            fill=\"none\" stroke=\"#15803D\" stroke-width=\"2.6\" stroke-linecap=\"round\"\n            stroke-dasharray=\"7 7\" opacity=\".5\"/>\n\n          <!-- Each pin is PLACED by the outer g and ANIMATED by the inner one.\n               A CSS transform replaces an element's transform attribute rather\n               than adding to it, so animating the positioned g flung all three\n               pins to the origin — which is what broke this before. -->\n          <g transform=\"translate(52,168)\"><g transform=\"scale(.86)\"><g class=\"fc-pin\" style=\"--d:.55s\">\n            <path d=\"M0 0c-5.5-8.5-12-14.5-12-21.5a12 12 0 1 1 24 0C12-14.5 5.5-8.5 0 0Z\" fill=\"#15803D\"/>\n            <circle cy=\"-21.5\" r=\"4.6\" fill=\"#fff\"/>\n          </g></g></g>\n          <g transform=\"translate(258,120)\"><g transform=\"scale(.86)\"><g class=\"fc-pin\" style=\"--d:.75s\">\n            <path d=\"M0 0c-5.5-8.5-12-14.5-12-21.5a12 12 0 1 1 24 0C12-14.5 5.5-8.5 0 0Z\" fill=\"#15803D\"/>\n            <circle cy=\"-21.5\" r=\"4.6\" fill=\"#fff\"/>\n          </g></g></g>\n          <g transform=\"translate(412,130)\"><g transform=\"scale(.86)\"><g class=\"fc-pin\" style=\"--d:.95s\">\n            <path d=\"M0 0c-5.5-8.5-12-14.5-12-21.5a12 12 0 1 1 24 0C12-14.5 5.5-8.5 0 0Z\" fill=\"#15803D\"/>\n            <circle cy=\"-21.5\" r=\"4.6\" fill=\"#fff\"/>\n          </g></g></g>\n\n          <!-- the club itself, growing in the hall -->\n          <circle class=\"fc-bloom\" cx=\"160\" cy=\"152\" r=\"74\" fill=\"url(#fc-bloom-g)\"/>\n          <g transform=\"translate(160,214)\">\n            <path class=\"fc-stem\" d=\"M0 0v-74\" stroke=\"#15803D\" stroke-width=\"7\"\n              stroke-linecap=\"round\" fill=\"none\"/>\n            <path class=\"fc-leaf-l\" d=\"M0-66c0-30-21-49-49-49 0 30 21 49 49 49Z\" fill=\"#15803D\" opacity=\".45\"/>\n            <path class=\"fc-leaf-r\" d=\"M0-66c0-30 21-49 49-49 0 30-21 49-49 49Z\" fill=\"#15803D\" opacity=\".7\"/>\n            <rect class=\"fc-base\" x=\"-46\" y=\"0\" width=\"92\" height=\"13\" rx=\"6.5\" fill=\"#15803D\"/>\n          </g>\n\n          <!-- the four papers, drifting. Small and pale on purpose: a reminder\n               of what is taught, not four more things to read. -->\n          <g transform=\"translate(84,56)\"><g class=\"fc-float\" style=\"--d:0s\">\n            <rect x=\"-17\" y=\"-15\" width=\"34\" height=\"30\" rx=\"9\" fill=\"#eaf6ee\" stroke=\"#cfe6d6\"/>\n            <text y=\"6\" text-anchor=\"middle\" font-family=\"'JetBrains Mono',monospace\"\n              font-size=\"13\" font-weight=\"700\" fill=\"#15803D\">&#215;&#247;</text></g></g>\n\n          <g transform=\"translate(226,44)\"><g class=\"fc-float\" style=\"--d:1.6s\">\n            <rect x=\"-17\" y=\"-15\" width=\"34\" height=\"30\" rx=\"9\" fill=\"#eaf6ee\" stroke=\"#cfe6d6\"/>\n            <text y=\"6\" text-anchor=\"middle\" font-family=\"'JetBrains Mono',monospace\"\n              font-size=\"12\" font-weight=\"700\" fill=\"#15803D\">VR</text></g></g>\n\n          <g transform=\"translate(340,52)\"><g class=\"fc-float\" style=\"--d:3.1s\">\n            <rect x=\"-19\" y=\"-15\" width=\"38\" height=\"30\" rx=\"9\" fill=\"#eaf6ee\" stroke=\"#cfe6d6\"/>\n            <text y=\"6\" text-anchor=\"middle\" font-family=\"'JetBrains Mono',monospace\"\n              font-size=\"11\" font-weight=\"700\" fill=\"#15803D\">NVR</text></g></g>\n\n          <g transform=\"translate(372,196)\"><g class=\"fc-float\" style=\"--d:2.3s\">\n            <rect x=\"-17\" y=\"-15\" width=\"34\" height=\"30\" rx=\"9\" fill=\"#eaf6ee\" stroke=\"#cfe6d6\"/>\n            <text y=\"6\" text-anchor=\"middle\" font-family=\"'JetBrains Mono',monospace\"\n              font-size=\"12\" font-weight=\"700\" fill=\"#15803D\">Aa</text></g></g>\n        </svg>\n\n        <p class=\"fc-note\"><b>We come to the school.</b> Same teachers, same teaching, in the hall your\n          child already knows.</p>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- ---------- included every month ---------- -->\n  <div class=\"fc-inc\">\n    <p class=\"fc-kicker\">Included every month</p>\n    <h3>The whole programme, <em>taught in your school hall</em></h3>\n    <p class=\"fc-price\"><b>£120 a month</b>, subsidised. The same class in person outside costs £180 +.</p>\n\n    <div class=\"fc-grid\">\n      <article class=\"fc-item\">\n        <span class=\"fc-badge\">1×</span>\n        <b>A weekly class in school</b>\n        <p>Two hours, after school, taught by one of our own teachers.</p>\n      </article>\n      <article class=\"fc-item\">\n        <span class=\"fc-badge\">4</span>\n        <b>All four 11 Plus papers</b>\n        <p>English, maths, verbal and non-verbal reasoning, taught in order and revisited until they\n          stick.</p>\n      </article>\n      <article class=\"fc-item\">\n        <span class=\"fc-badge\">→</span>\n        <b>Their own portal login</b>\n        <p>Everything set in the club is waiting there when they get home, on an account that is\n          theirs for the year.</p>\n      </article>\n      <article class=\"fc-item\">\n        <span class=\"fc-badge\">CW</span>\n        <b>Classwork &amp; homework</b>\n        <p>Set after every club and marked the moment it is done, with the working shown, so a\n          mistake becomes a lesson that evening.</p>\n      </article>\n      <article class=\"fc-item\">\n        <span class=\"fc-badge\">16</span>\n        <b>Vocabulary app</b>\n        <p>Sixteen sets, ten minutes a day, tracked so you can see the streak without asking.</p>\n      </article>\n      <article class=\"fc-item\">\n        <span class=\"fc-badge\">M</span>\n        <b>A monthly mock exam</b>\n        <p>Timed and sectioned, sat under real conditions, with the topic-by-topic report\n          afterwards.</p>\n      </article>\n    </div>\n\n    <div class=\"fc-ctas\">\n      <a class=\"fc-btn fc-go\" href=\"/flourish-club\">Bring it to our school →</a>\n      <a class=\"fc-btn fc-ghost\" href=\"/flourish-club#how\">How it works</a>\n    </div>\n  </div>\n</div>\n\n<script>\n(function () {\n  /* Scoped to THIS block: the page may hold several, and each starts itself. */\n  var root = document.currentScript && document.currentScript.closest(\".sx\");\n  if (!root) { var all = document.querySelectorAll(\".sx.sx-flourish-club\"); root = all[all.length - 1]; }\n  if (!root || root.dataset.on) return;\n  root.dataset.on = \"1\";\n\n  var go = function () { root.classList.add(\"go\"); };\n  /* threshold 0: a section taller than the window never reaches a percentage */\n  if (!(\"IntersectionObserver\" in window)) return go();\n  var io = new IntersectionObserver(function (es) {\n    es.forEach(function (e) { if (e.isIntersecting) { go(); io.disconnect(); } });\n  }, { threshold: 0, rootMargin: \"0px 0px -14% 0px\" });\n  io.observe(root);\n})();\n</script>","mode":"section","fullWidth":false},"pageCustomHtml":"","showCourses":false,"showMockEvents":false,"showOlympiad":false,"showTeded":false,"brands":["sparks","bright"],"active":true,"position":40,"groups":[],"courses":[],"courseCount":0},{"id":"pg_8c1be5335546","slug":"ks3-gcse","href":"/ks3-gcse","title":"KS3 & GCSE","navLabel":"KS3 / GCSE","tileSub":"Years 7 to 11","tileMeta":"4 courses · Maths & science","eyebrow":"Years 7 to 11","icon":"🧪","accent":"#7C3AED","hero":{"headline":"Tuitions for {KS3 &GCSE }","body":"Maths, Physics and Chemistry for KS3 and GCSE — the same teaching, practice and topic analytics, pitched at the specification.","image":"","imageAlt":"KS3 & GCSE","ctaLabel":"More about KS3 & GCSE","ctaHref":"/ks3-gcse"},"summary":"Maths and science courses for Years 7 to 11, with instant marking and topic-level reporting.","whatItIs":"<p>Grammar school entry is a beginning, not an end. Our KS3 and GCSE courses carry the same approach into secondary school: taught topics, checked weekly, with papers that show what has actually stuck.</p><p>Content is written against the specification, so revision targets what is examined rather than everything that was ever taught.</p>","howSteps":[{"icon":"📘","title":"Follow the spec","text":"Topics ordered to match the exam specification, not a textbook's whim."},{"icon":"🧮","title":"Practise by topic","text":"Adaptive practice serves questions at the right difficulty for each child."},{"icon":"📊","title":"Revise what's weak","text":"The topic report drives revision instead of guesswork."}],"media":{"kind":"none","url":"","caption":"","embed":null},"details":[{"title":"Which subjects?","text":"Maths, Physics and Chemistry, with more added each term."},{"title":"Which exam boards?","text":"Content is board-agnostic where the specifications agree and flagged where they differ."}],"showcase":{"on":false,"eyebrow":"","headline":"","summary":"","facts":[],"cta1":{"label":"","href":""},"cta2":{"label":"","href":""},"flip":false},"art":[],"artHero":{"svg":true,"svgWhich":"","items":[]},"artRow":{"svg":true,"svgWhich":"","items":[]},"blocks":[],"ctaLabel":"See KS3 and GCSE courses","ctaHref":"","groupByProvider":false,"pageCustomMode":"above","custom":{"html":"<style>\n/* KS3 & GCSE — home-page section. Same shape and palette as the other\n   programme cards. */\n.sx{--pa:#3F27BD;position:relative;padding:80px 4vw;overflow:hidden;\n  font:400 15px/1.8 'Open Sans','Segoe UI',system-ui,sans-serif;color:#6b7280}\n.sx *{box-sizing:border-box}\n.sx h2{font-family:'Poppins',sans-serif;font-weight:800;color:#1b1442;line-height:1.15;\n  margin:0;font-size:30px;letter-spacing:.04em}\n.sx p{margin:0}\n\n.gc-head{max-width:1240px;margin:0 auto 22px}\n.sx-row{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;\n  gap:40px;align-items:stretch}\n.sx-copy,.sx-art{display:flex;flex-direction:column}\n\n\n/* ---------- left: what it is ---------- */\n.gc-card{background:#fff;border:1px solid #e9e6f5;border-radius:22px;padding:26px 28px;\n  box-shadow:0 18px 44px rgba(27,20,66,.07)}\n.gc-list{list-style:none;margin:0;padding:0;display:grid;gap:15px}\n/* the bullet and ONE span are the only grid children; a loose <b> would\n   otherwise become a grid item of its own and drop to the next row */\n.gc-list li{display:grid;grid-template-columns:11px 1fr;gap:14px;align-items:start}\n.gc-list li::before{content:\"\";width:11px;height:11px;border-radius:4px;margin-top:9px;\n  background:var(--pa);opacity:.85}\n.gc-list li > span{font-size:1rem;line-height:1.65;color:#4b5563}\n.gc-list b{color:#1b1442;font-weight:700}\n\n.gc-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}\n.gc-btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none;\n  font:700 15px/1 'Poppins',sans-serif;padding:17px 32px;border-radius:999px;\n  transition:transform .15s,box-shadow .15s,background-position .35s}\n.gc-go{color:#fff;background:linear-gradient(90deg,#5B2AD6,#C42BB0);background-size:180% 100%;\n  box-shadow:0 10px 26px rgba(91,42,214,.28)}\n.gc-go:hover{background-position:95% 0;transform:translateY(-2px)}\n.gc-ghost{background:#fff;color:#1b1442;box-shadow:inset 0 0 0 2px #e5e2f0}\n.gc-ghost:hover{box-shadow:inset 0 0 0 2px var(--pa);color:var(--pa);transform:translateY(-2px)}\n\n/* ---------- right: the four subjects ---------- */\n.gc-panel{background:#fff;border:1px solid #e9e6f5;border-radius:22px;padding:24px 28px 26px;\n  box-shadow:0 18px 44px rgba(27,20,66,.07);display:flex;flex-direction:column}\n.gc-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}\n.gc-panel-head b{font:700 1.05rem/1 'Poppins',sans-serif;color:#1b1442}\n.gc-tag{font:500 .74rem/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--pa)}\n.gc-panel svg{display:block;width:100%;height:auto}\n.gc-note{margin-top:16px;border-radius:14px;padding:14px 18px;\n  background:#F1EEFC;color:#4a3a86;font-size:.95rem}\n.gc-note b{color:#3F27BD;font-weight:700}\n\n/* ---------- the drawing ----------\n   Nothing that moves also carries a transform attribute: a CSS transform\n   replaces the attribute rather than adding to it, which is how a positioned\n   group ends up flung to the origin. Outer places, inner animates. */\n.gc-pop{opacity:0;transform-box:fill-box;transform-origin:center}\n.sx.go .gc-pop{animation:gc-pop .6s var(--d,0s) cubic-bezier(.2,1.4,.4,1) both}\n@keyframes gc-pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}\n\n.gc-draw{stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200)}\n.sx.go .gc-draw{animation:gc-line 1.2s var(--d,0s) ease-out forwards}\n@keyframes gc-line{to{stroke-dashoffset:0}}\n\n/* each subject lifts in turn, so the eye is walked round all four */\n.gc-sub{opacity:0;transform-box:fill-box;transform-origin:center}\n.sx.go .gc-sub{animation:gc-pop .6s var(--d,0s) cubic-bezier(.2,1.4,.4,1) both,\n  gc-turn 12s calc(var(--d,0s) + 1.2s) ease-in-out infinite}\n@keyframes gc-turn{0%,18%,100%{transform:none}\n  6%{transform:translateY(-7px)}12%{transform:none}}\n\n/* the years, filling from 7 to 11 */\n.gc-year{opacity:.3}\n.sx.go .gc-year{animation:gc-fill 7s calc(1.4s + var(--d,0s)) ease-in-out infinite}\n@keyframes gc-fill{0%,6%{opacity:.3}14%,84%{opacity:1}94%,100%{opacity:.3}}\n\n/* ---------- what a course covers ---------- */\n.gc-inc{max-width:1240px;margin:56px auto 0}\n.gc-kicker{font:800 1.2rem/1.2 'JetBrains Mono',monospace;letter-spacing:.18em;\n  text-transform:uppercase;color:#D22CB2;text-align:center;margin:0}\n.gc-inc h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.6rem;color:#1b1442;\n  text-align:center;margin:10px 0 26px}\n.gc-inc h3 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;\n  background:linear-gradient(90deg,#3F27BD,#D22CB2);-webkit-background-clip:text;\n  background-clip:text;color:transparent}\n\n.gc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}\n.gc-item{background:#fff;border:1px solid #e9e6f5;border-radius:20px;padding:20px 22px;\n  box-shadow:0 10px 30px rgba(27,20,66,.07);\n  opacity:0;transform:translateY(14px);\n  transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}\n.sx.go .gc-item{opacity:1;transform:none}\n.sx.go .gc-item:nth-child(2){transition-delay:.07s}\n.sx.go .gc-item:nth-child(3){transition-delay:.14s}\n.sx.go .gc-item:nth-child(4){transition-delay:.21s}\n.sx.go .gc-item:nth-child(5){transition-delay:.28s}\n.sx.go .gc-item:nth-child(6){transition-delay:.35s}\n.gc-badge{display:flex;align-items:center;justify-content:center;width:42px;height:42px;\n  border-radius:12px;background:#F1EEFC;font:700 .82rem/1 'JetBrains Mono',monospace;\n  color:var(--pa);margin-bottom:15px}\n.gc-item b{display:block;color:#1b1442;font:600 1.04rem/1.3 'Open Sans',sans-serif;margin-bottom:6px}\n.gc-item p{font-size:.92rem;line-height:1.6}\n\n@media (max-width:980px){ .gc-grid{grid-template-columns:repeat(2,1fr)} }\n@media (max-width:900px){ .sx-row{grid-template-columns:1fr;gap:26px} }\n@media (max-width:620px){ .gc-grid{grid-template-columns:1fr} }\n@media (prefers-reduced-motion:reduce){\n  .sx *{animation:none!important;transition:none!important}\n  .gc-pop,.gc-sub,.gc-item{opacity:1!important;transform:none!important}\n  .gc-year{opacity:1!important}\n  .gc-draw{stroke-dashoffset:0!important}\n}\n</style>\n\n<div class=\"sx sx-ks3-gcse\" style=\"--pa:#3F27BD\">\n  <div class=\"gc-head\"><h2>KS3 &amp; GCSE</h2></div>\n  <div class=\"sx-row\">\n\n    <div class=\"sx-copy\">\n      <div class=\"gc-card\">\n        <ul class=\"gc-list\">\n          <li><span>Taught by a teacher who <b>teaches in secondary schools</b>, comprehensive\n            and independent.</span></li>\n          <li><span><b>Maths, Physics, Chemistry</b> and <b>Computer Science</b>.</span></li>\n          <li><span>Years <b>7 to 11</b>, from the start of KS3 through to the GCSE papers.</span></li>\n          <li><span>Taught in the order the exam boards set it, not in the order a textbook\n            happens to run.</span></li>\n          <li><span>Every topic has a quiz, so a gap shows up in the week it appears rather than\n            in a mock in March.</span></li>\n          <li><span>Past paper questions, marked with the working shown.</span></li>\n          \n        </ul>\n      </div>\n      <div class=\"gc-ctas\">\n        <a class=\"gc-btn gc-go\" href=\"/ks3-gcse\">See the courses →</a>\n        <a class=\"gc-btn gc-ghost\" href=\"/ks3-gcse#how\">How a course runs</a>\n      </div>\n    </div>\n\n    <div class=\"sx-art\">\n      <div class=\"gc-panel\">\n        <div class=\"gc-panel-head\"><b>Four subjects, Years 7 to 11</b><span class=\"gc-tag\">KS3 → GCSE</span></div>\n\n        <svg viewBox=\"-14 -12 488 254\" role=\"img\"\n          aria-label=\"Maths, Physics, Chemistry and Computer Science, taught from Year 7 through to Year 11.\">\n          <defs>\n            <linearGradient id=\"gc-tile\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"#5B2AD6\"/><stop offset=\"100%\" stop-color=\"#C42BB0\"/>\n            </linearGradient>\n          </defs>\n\n          <!-- maths -->\n          <g transform=\"translate(76,66)\"><g class=\"gc-sub\" style=\"--d:.15s\">\n            <rect x=\"-56\" y=\"-46\" width=\"112\" height=\"92\" rx=\"18\" fill=\"url(#gc-tile)\"/>\n            <text y=\"-4\" text-anchor=\"middle\" font-family=\"'JetBrains Mono',monospace\"\n              font-size=\"26\" font-weight=\"700\" fill=\"#fff\">×÷</text>\n            <text y=\"24\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\"\n              font-size=\"12\" font-weight=\"700\" fill=\"#f0e4fb\">MATHS</text>\n          </g></g>\n\n          <!-- physics -->\n          <g transform=\"translate(206,66)\"><g class=\"gc-sub\" style=\"--d:.30s\">\n            <rect x=\"-56\" y=\"-46\" width=\"112\" height=\"92\" rx=\"18\" fill=\"#F1EEFC\" stroke=\"#ddd4f5\" stroke-width=\"2\"/>\n            <g stroke=\"#5B2AD6\" stroke-width=\"2.6\" fill=\"none\">\n              <ellipse cx=\"0\" cy=\"-8\" rx=\"30\" ry=\"12\"/>\n              <ellipse cx=\"0\" cy=\"-8\" rx=\"30\" ry=\"12\" transform=\"rotate(60 0 -8)\"/>\n              <ellipse cx=\"0\" cy=\"-8\" rx=\"30\" ry=\"12\" transform=\"rotate(120 0 -8)\"/>\n            </g>\n            <circle cy=\"-8\" r=\"5\" fill=\"#C42BB0\"/>\n            <text y=\"30\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\"\n              font-size=\"12\" font-weight=\"700\" fill=\"#3F27BD\">PHYSICS</text>\n          </g></g>\n\n          <!-- chemistry -->\n          <g transform=\"translate(336,66)\"><g class=\"gc-sub\" style=\"--d:.45s\">\n            <rect x=\"-56\" y=\"-46\" width=\"112\" height=\"92\" rx=\"18\" fill=\"#F1EEFC\" stroke=\"#ddd4f5\" stroke-width=\"2\"/>\n            <path d=\"M-9-30v18l-15 26a4 4 0 0 0 3 6h42a4 4 0 0 0 3-6l-15-26v-18z\"\n              fill=\"none\" stroke=\"#5B2AD6\" stroke-width=\"2.6\" stroke-linejoin=\"round\"/>\n            <path d=\"M-19 4h38l6 10a4 4 0 0 1-3 6h-44a4 4 0 0 1-3-6z\" fill=\"#C42BB0\" opacity=\".75\"/>\n            <text y=\"30\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\"\n              font-size=\"12\" font-weight=\"700\" fill=\"#3F27BD\">CHEMISTRY</text>\n          </g></g>\n\n          <!-- computer science -->\n          <g transform=\"translate(141,168)\"><g class=\"gc-sub\" style=\"--d:.60s\">\n            <rect x=\"-56\" y=\"-40\" width=\"112\" height=\"80\" rx=\"18\" fill=\"#F1EEFC\" stroke=\"#ddd4f5\" stroke-width=\"2\"/>\n            <text y=\"-4\" text-anchor=\"middle\" font-family=\"'JetBrains Mono',monospace\"\n              font-size=\"22\" font-weight=\"700\" fill=\"#5B2AD6\">&lt;/&gt;</text>\n            <text y=\"22\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\"\n              font-size=\"11\" font-weight=\"700\" fill=\"#3F27BD\">COMPUTER SCIENCE</text>\n          </g></g>\n\n          <!-- the years, 7 to 11 -->\n          <g transform=\"translate(271,168)\"><g class=\"gc-pop\" style=\"--d:.75s\">\n            <rect x=\"-56\" y=\"-40\" width=\"112\" height=\"80\" rx=\"18\" fill=\"#fff\" stroke=\"#ddd4f5\" stroke-width=\"2\"/>\n            <g font-family=\"'JetBrains Mono',monospace\" font-size=\"13\" font-weight=\"700\" fill=\"#3F27BD\">\n              <text class=\"gc-year\" style=\"--d:0s\"    x=\"-38\" y=\"-6\">7</text>\n              <text class=\"gc-year\" style=\"--d:.5s\"   x=\"-19\" y=\"-6\">8</text>\n              <text class=\"gc-year\" style=\"--d:1s\"    x=\"0\"   y=\"-6\">9</text>\n              <text class=\"gc-year\" style=\"--d:1.5s\"  x=\"17\"  y=\"-6\">10</text>\n              <text class=\"gc-year\" style=\"--d:2s\"    x=\"40\"  y=\"-6\">11</text>\n            </g>\n            <path class=\"gc-draw\" style=\"--len:96;--d:1s\" d=\"M-40 6h80\"\n              stroke=\"#C42BB0\" stroke-width=\"3\" stroke-linecap=\"round\" fill=\"none\"/>\n            <text y=\"28\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\"\n              font-size=\"11\" font-weight=\"700\" fill=\"#3F27BD\">KS3 TO GCSE</text>\n          </g></g>\n        </svg>\n\n        <p class=\"gc-note\"><b>Taught by someone who teaches this every day.</b> The same\n          specifications, the same papers, the same marking.</p>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- ---------- what a course covers ---------- -->\n  <div class=\"gc-inc\">\n    <p class=\"gc-kicker\">In every course</p>\n    <h3>The specification, <em>taught in the right order</em></h3>\n\n    <div class=\"gc-grid\">\n      <article class=\"gc-item\">\n        <span class=\"gc-badge\">SCH</span>\n        <b>A practising teacher</b>\n        <p>Someone who teaches this age group in secondary schools, comprehensive and\n          independent, and marks these papers.</p>\n      </article>\n      <article class=\"gc-item\">\n        <span class=\"gc-badge\">4</span>\n        <b>Four subjects</b>\n        <p>Maths, Physics, Chemistry and Computer Science, each as its own course.</p>\n      </article>\n      <article class=\"gc-item\">\n        <span class=\"gc-badge\">7-11</span>\n        <b>Years 7 to 11</b>\n        <p>KS3 built so that GCSE is a continuation rather than a fresh start.</p>\n      </article>\n      <article class=\"gc-item\">\n        <span class=\"gc-badge\">Q</span>\n        <b>A quiz on every topic</b>\n        <p>So a gap shows up in the week it appears, not in a mock five months later.</p>\n      </article>\n      <article class=\"gc-item\">\n        <span class=\"gc-badge\">PP</span>\n        <b>Past paper questions</b>\n        <p>Marked with the working shown, in the format the board actually uses.</p>\n      </article>\n      <article class=\"gc-item\">\n        <span class=\"gc-badge\">→</span>\n        <b>Homework</b>\n        <p>Homework, quizzes and a topic report on their own account, exactly as on our other\n          courses.</p>\n      </article>\n    </div>\n\n    <div class=\"gc-ctas\">\n      <a class=\"gc-btn gc-go\" href=\"/ks3-gcse\">See the courses →</a>\n      <a class=\"gc-btn gc-ghost\" href=\"/ks3-gcse#how\">How a course runs</a>\n    </div>\n  </div>\n</div>\n\n<script>\n(function () {\n  /* Scoped to THIS block, and by CLASS rather than by id: a block's ids can be\n     namespaced when it is placed on a page, so getElementById is the one thing\n     a pasted block should never rely on. */\n  var root = document.currentScript && document.currentScript.closest(\".sx\");\n  if (!root) { var all = document.querySelectorAll(\".sx.sx-ks3-gcse\"); root = all[all.length - 1]; }\n  if (!root || root.dataset.on) return;\n  root.dataset.on = \"1\";\n\n  var go = function () { root.classList.add(\"go\"); };\n  /* threshold 0: a section taller than the window never reaches a percentage */\n  if (!(\"IntersectionObserver\" in window)) return go();\n  var io = new IntersectionObserver(function (es) {\n    es.forEach(function (e) { if (e.isIntersecting) { go(); io.disconnect(); } });\n  }, { threshold: 0, rootMargin: \"0px 0px -14% 0px\" });\n  io.observe(root);\n})();\n</script>","mode":"section","fullWidth":false},"pageCustomHtml":"","showCourses":true,"showMockEvents":false,"showOlympiad":false,"showTeded":false,"brands":["sparks","bright"],"active":true,"position":50,"groups":[],"courses":[],"courseCount":0},{"id":"pg_8f3627456eec","slug":"maths-olympiad","href":"/maths-olympiad","title":"Maths Olympiad Workshops","navLabel":"Maths Olympiad Workshops","tileSub":"Problem-solving workshops","tileMeta":"90 minutes · weekly","eyebrow":"Think · Solve · Explore · Achieve","icon":"🧮","accent":"#B45309","hero":{"headline":"Maths Olympiad {Workshops}","body":"Olympiad-style problem solving in small weekly workshops — the kind of maths that rewards patience, and the kind of thinking exams cannot teach.","image":"","imageAlt":"Maths Olympiad Workshops","ctaLabel":"More about Maths Olympiad workshop","ctaHref":"/olympiad"},"summary":"Weekly workshops in Olympiad-style problem solving, for children who want a proper challenge.","whatItIs":"<p>Olympiad problems are not bigger sums. They are puzzles that cannot be solved by recognising a method, which is exactly why they build the reasoning that the 11 Plus, and everything after it, actually tests.</p><p>Workshops run weekly in small groups. Pick your child's year group and the day that suits your family.</p>","howSteps":[{"icon":"🎓","title":"Pick a year group","text":"Workshops are pitched by year, so the challenge is right."},{"icon":"🗓️","title":"Choose your time","text":"The same workshop runs at several times each week."},{"icon":"🏆","title":"Solve together","text":"Small groups, real problems, strategies that transfer everywhere."}],"media":{"kind":"none","url":"","caption":"","embed":null},"details":[{"title":"Does my child need to be top of the class?","text":"No — they need to enjoy being stuck for a while. That is the whole skill."},{"title":"Does it prepare for competitions?","text":"Yes: the Primary Maths Challenge and similar competitions use exactly this kind of problem."}],"showcase":{"on":false,"eyebrow":"","headline":"","summary":"","facts":[],"cta1":{"label":"","href":""},"cta2":{"label":"","href":""},"flip":false},"art":[],"artHero":{"svg":true,"svgWhich":"","items":[]},"artRow":{"svg":true,"svgWhich":"","items":[]},"blocks":[{"type":"facts","title":"","lead":"","rows":[{"label":"Years","value":"4–9"},{"label":"Runs","value":"all year"},{"label":"Each session","value":"90 min"},{"label":"Where","value":"online or Reading"},{"label":"Join","value":"any term"}]},{"type":"strategies","title":"Six ways in to a problem you cannot do","lead":"Olympiad questions are not harder sums. They are questions where the method is the answer — so these are the methods, taught one at a time and then used until they are automatic.","rows":[{"name":"Work backwards","text":"Start from the answer and undo it. A machine doubles a number then subtracts three and gives you 25 — add the three back, halve it, done. Half the questions that look like guesswork are one line of arithmetic read the other way round.","icon":"arrow"},{"name":"Try a smaller case","text":"Twelve people at a party is hard; four is easy. Do the small one, spot the pattern, then show why the pattern has to keep going. This is how a child gets from counting to reasoning.","icon":"shrink"},{"name":"Find what cannot change","text":"Some things survive every move you are allowed to make — whether a total stays odd, whether a colour balance holds. Spot the thing that cannot change and a whole family of impossible-looking questions falls open at once.","icon":"circle"},{"name":"The pigeonhole principle","text":"Put thirteen people in a room and two of them share a birth month. Obvious once said, and startlingly powerful: it proves something must exist without ever finding it. The work is deciding what the pigeons and the holes are.","icon":"boxes"},{"name":"Push it to the extreme","text":"Take the biggest one, the smallest one, the first one that fails. Extreme cases turn a vague question about all of them into a precise question about one of them.","icon":"bars"},{"name":"Show it cannot happen","text":"Assume it can, and follow it until it contradicts itself. Proving something impossible is a different skill from finding an answer — and it is most of the marks on a written Olympiad paper.","icon":"cross"}]},{"type":"problem","title":"Try one of ours","lead":"This is the sort of problem your child will meet. Have a go — the answer matters less than the trick.","rows":[{"question":"A machine doubles a number, then subtracts 3. Put in 7 and out comes 11. What must go in to get 25 out?","options":"11, 14, 16, 22","answer":"B","why":"Run the machine backwards. Undo the subtract first — 25 + 3 = 28 — then undo the double: 28 ÷ 2 = 14. Working backwards turns a guessing game into one line of arithmetic."},{"question":"Six children are at a party. Every child shakes hands with every other child exactly once. How many handshakes happen altogether?","options":"12, 15, 30, 36","answer":"B","why":"Each of the 6 children shakes 5 hands — that is 30. But every handshake got counted from both sides, so halve it: 15. Spotting a double count is worth more marks than counting faster."}]},{"type":"pathway","title":"The papers this is actually for","lead":"Every strategy we teach is one the real papers reward. This is the ladder your child is climbing.","rows":[{"step":"Where it starts","title":"Primary Maths Challenge","text":"Sat in school in Years 5 and 6. Short, non-routine problems — the first time most children meet a question their textbook has not prepared them for.","specs":"Years 5–6, In school"},{"step":"The main event","title":"Junior Mathematical Challenge","text":"The UKMT paper sat by around a quarter of a million children in Years 7 and 8, with Gold, Silver and Bronze awarded by national percentile.","specs":"Year 8 and below, 25 questions, 60 min, Multiple choice"},{"step":"By invitation","title":"Kangaroo or Olympiad","text":"A strong Challenge score earns an invitation to a follow-on round — the Junior Kangaroo, a harder multiple-choice paper, or the Junior Mathematical Olympiad, which asks for full written solutions. The Kangaroo is not a step before the Olympiad: children are invited to one or the other depending on how they score.","specs":"Kangaroo · 25 Q · 60 min, JMO · 6 Q · 2 hours"}]}],"ctaLabel":"See the workshops","ctaHref":"/olympiad","groupByProvider":false,"pageCustomMode":"full","custom":{"html":"<style>\n/* Maths Olympiad — home-page section. Same shape and palette as the PREP,\n   Flourish and Mocks cards; the tile mosaic keeps its own colours. */\n.sx{--pa:#3F27BD;position:relative;padding:80px 4vw;overflow:hidden;\n  font:400 15px/1.8 'Open Sans','Segoe UI',system-ui,sans-serif;color:#6b7280}\n.sx *{box-sizing:border-box}\n.sx h2{font-family:'Poppins',sans-serif;font-weight:800;color:#1b1442;line-height:1.15;\n  margin:0;font-size:30px;letter-spacing:.04em}\n.sx p{margin:0}\n\n.mo-head{max-width:1240px;margin:0 auto 22px}\n.sx-row{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;\n  gap:40px;align-items:stretch}\n.sx-copy,.sx-art{display:flex;flex-direction:column}\n.sx-art .mo-panel{flex:1}\n\n/* ---------- left: what it is ---------- */\n.mo-card{background:#fff;border:1px solid #e9e6f5;border-radius:22px;padding:26px 28px;\n  box-shadow:0 18px 44px rgba(27,20,66,.07)}\n.mo-list{list-style:none;margin:0;padding:0;display:grid;gap:15px}\n/* the bullet and ONE span are the only grid children; a loose <b> would\n   otherwise become a grid item of its own and drop to the next row */\n.mo-list li{display:grid;grid-template-columns:11px 1fr;gap:14px;align-items:start}\n.mo-list li::before{content:\"\";width:11px;height:11px;border-radius:4px;margin-top:9px;\n  background:var(--pa);opacity:.85}\n.mo-list li > span{font-size:1rem;line-height:1.65;color:#4b5563}\n.mo-list b{color:#1b1442;font-weight:700}\n\n.mo-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}\n.mo-btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none;\n  font:700 15px/1 'Poppins',sans-serif;padding:17px 32px;border-radius:999px;\n  transition:transform .15s,box-shadow .15s,background-position .35s}\n.mo-go{color:#fff;background:linear-gradient(90deg,#5B2AD6,#C42BB0);background-size:180% 100%;\n  box-shadow:0 10px 26px rgba(91,42,214,.28)}\n.mo-go:hover{background-position:95% 0;transform:translateY(-2px)}\n.mo-ghost{background:#fff;color:#1b1442;box-shadow:inset 0 0 0 2px #e5e2f0}\n.mo-ghost:hover{box-shadow:inset 0 0 0 2px var(--pa);color:var(--pa);transform:translateY(-2px)}\n\n/* ---------- right: the mosaic, and one problem ---------- */\n.mo-panel{background:#fff;border:1px solid #e9e6f5;border-radius:22px;padding:24px 28px 26px;\n  box-shadow:0 18px 44px rgba(27,20,66,.07);display:flex;flex-direction:column}\n.mo-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}\n.mo-panel-head b{font:700 1.05rem/1 'Poppins',sans-serif;color:#1b1442}\n.mo-tag{font:500 .74rem/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--pa)}\n.mo-panel svg{display:block;width:100%;height:auto}\n\n.mo-mini{margin-top:16px;border-top:1px dashed #e9e6f5;padding-top:18px}\n.mo-mini > p{font:600 .98rem/1.55 'Open Sans',sans-serif;color:#1b1442;margin-bottom:12px}\n.mo-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}\n.mo-opt{border:2px solid #e5e2f0;background:#fff;border-radius:10px;padding:13px 4px;cursor:pointer;\n  font:700 15px/1 'JetBrains Mono',monospace;color:#1b1442;transition:all .15s}\n.mo-opt:hover:not(:disabled){border-color:var(--pa);color:var(--pa);transform:translateY(-2px)}\n.mo-opt.right{background:#1E9E58;border-color:#1E9E58;color:#fff}\n.mo-opt.wrong{background:#F1EEFC;border-color:#C42BB0;color:#C42BB0}\n.mo-why{display:none;margin-top:14px;font-size:.92rem;color:#4b5563;\n  border-left:3px solid var(--pa);padding-left:13px}\n.mo-why.show{display:block;animation:mo-up .45s ease}\n.mo-why b{color:#1b1442}\n@keyframes mo-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}\n\n/* ---------- the mosaic: assemble once, then flip, recolour, shimmer ----------\n   One keyframe set rather than two animations, because two would run\n   independently and drift out of step within a minute. The colour changes\n   while the tile is edge on at 90deg, the one frame where a fill change cannot\n   be seen happening, so the mosaic simply IS a different pattern afterwards. */\n.mo-tile{opacity:0;transform-box:fill-box;transform-origin:center}\n.sx.go .mo-tile{\n  animation:mo-in .7s var(--d,0s) cubic-bezier(.2,1.2,.35,1) both,\n            mo-cycle 14s calc(var(--d,0s) + 1.4s) ease-in-out infinite}\n@keyframes mo-in{\n  from{opacity:0;transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--tr,0deg)) scale(.4)}\n  to{opacity:1;transform:none}}\n@keyframes mo-cycle{\n  0%   {transform:rotateY(0deg);  fill:var(--f1);opacity:1}\n  6%   {transform:rotateY(90deg); fill:var(--f1)}\n  6.1% {                          fill:var(--f2)}\n  13%  {transform:rotateY(0deg);  fill:var(--f2);opacity:1}\n  40%  {opacity:1}\n  46%  {opacity:.4}\n  52%  {opacity:1}\n  58%  {transform:rotateY(0deg);  fill:var(--f2)}\n  64%  {transform:rotateY(90deg); fill:var(--f2)}\n  64.1%{                          fill:var(--f1)}\n  71%  {transform:rotateY(0deg);  fill:var(--f1)}\n  88%  {opacity:1}\n  94%  {opacity:.4}\n  100% {transform:rotateY(0deg);  fill:var(--f1);opacity:1}}\n\n/* ---------- in every workshop ---------- */\n.mo-inc{max-width:1240px;margin:56px auto 0}\n.mo-kicker{font:800 1.2rem/1.2 'JetBrains Mono',monospace;letter-spacing:.18em;\n  text-transform:uppercase;color:#D22CB2;text-align:center;margin:0}\n.mo-inc h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.6rem;color:#1b1442;\n  text-align:center;margin:10px 0 26px}\n.mo-inc h3 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;\n  background:linear-gradient(90deg,#3F27BD,#D22CB2);-webkit-background-clip:text;\n  background-clip:text;color:transparent}\n\n.mo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}\n.mo-item{background:#fff;border:1px solid #e9e6f5;border-radius:20px;padding:20px 22px;\n  box-shadow:0 10px 30px rgba(27,20,66,.07);\n  opacity:0;transform:translateY(14px);\n  transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}\n.sx.go .mo-item{opacity:1;transform:none}\n.sx.go .mo-item:nth-child(2){transition-delay:.07s}\n.sx.go .mo-item:nth-child(3){transition-delay:.14s}\n.sx.go .mo-item:nth-child(4){transition-delay:.21s}\n.sx.go .mo-item:nth-child(5){transition-delay:.28s}\n.sx.go .mo-item:nth-child(6){transition-delay:.35s}\n.mo-badge{display:flex;align-items:center;justify-content:center;width:42px;height:42px;\n  border-radius:12px;background:#F1EEFC;font:700 .82rem/1 'JetBrains Mono',monospace;\n  color:var(--pa);margin-bottom:15px}\n.mo-item b{display:block;color:#1b1442;font:600 1.04rem/1.3 'Open Sans',sans-serif;margin-bottom:6px}\n.mo-item p{font-size:.92rem;line-height:1.6}\n\n@media (max-width:980px){ .mo-grid{grid-template-columns:repeat(2,1fr)} }\n@media (max-width:900px){ .sx-row{grid-template-columns:1fr;gap:26px} }\n@media (max-width:620px){ .mo-grid{grid-template-columns:1fr}\n  .mo-opts{grid-template-columns:repeat(2,1fr)} }\n@media (prefers-reduced-motion:reduce){\n  .sx *{animation:none!important;transition:none!important}\n  .mo-tile,.mo-item{opacity:1!important;transform:none!important}\n}\n</style>\n\n<div class=\"sx sx-maths-olympiad\" style=\"--pa:#3F27BD\">\n  <div class=\"mo-head\"><h2>Maths Olympiad Workshops</h2></div>\n  <div class=\"sx-row\">\n\n    <div class=\"sx-copy\">\n      <div class=\"mo-card\">\n        <ul class=\"mo-list\">\n          <li><span>Ninety minutes a week, running all year.</span></li>\n          <li><span>Years <b>4 to 6, 7 to 9 & GCSE </b>.</span></li>\n          <li><span>Online, or in person at Reading.</span></li>\n          <li><span>Olympiad questions are not harder sums. They are questions where the method is\n            the answer.</span></li>\n         \n          <li><span>Join in any term. The strategies do not run in a fixed order.</span></li>\n          <li><span>Small groups, on purpose.</span></li>\n      \n        </ul>\n      </div>\n      <div class=\"mo-ctas\">\n        <a class=\"mo-btn mo-go\" href=\"/maths-olympiad\">See the workshops →</a>\n        <a class=\"mo-btn mo-ghost\" href=\"/maths-olympiad#try\">Try a problem first</a>\n      </div>\n    </div>\n\n    <div class=\"sx-art\">\n      <div class=\"mo-panel\">\n        <div class=\"mo-panel-head\"><b>A problem from week one</b><span class=\"mo-tag\">HAVE A GO</span></div>\n\n        <svg viewBox=\"80 20 260 120\" role=\"img\" aria-label=\"Loose tiles assembling into a pattern\">\n          <polygon class=\"mo-tile\" style=\"--d:.30s;--tx:-70px;--ty:-40px;--tr:-25deg;--f1:#F0325B;--f2:#FFD54A\" points=\"120,30 180,30 150,80\" fill=\"#F0325B\"/>\n          <polygon class=\"mo-tile\" style=\"--d:.38s;--tx:60px;--ty:-50px;--tr:20deg;--f1:#16A79B;--f2:#17265C\" points=\"180,30 240,30 210,80\" fill=\"#16A79B\"/>\n          <polygon class=\"mo-tile\" style=\"--d:.46s;--tx:80px;--ty:30px;--tr:-15deg;--f1:#FFD54A;--f2:#F0325B\" points=\"240,30 300,30 270,80\" fill=\"#FFD54A\"/>\n          <polygon class=\"mo-tile\" style=\"--d:.54s;--tx:-60px;--ty:50px;--tr:30deg;--f1:#17265C;--f2:#16A79B\" points=\"150,80 210,80 180,30\" fill=\"#17265C\"/>\n          <polygon class=\"mo-tile\" style=\"--d:.62s;--tx:40px;--ty:60px;--tr:-20deg;--f1:#F0325B;--f2:#FFD54A\" points=\"210,80 270,80 240,30\" fill=\"#F0325B\"/>\n          <polygon class=\"mo-tile\" style=\"--d:.70s;--tx:-50px;--ty:-30px;--tr:18deg;--f1:#FFD54A;--f2:#F0325B\" points=\"150,80 210,80 180,130\" fill=\"#FFD54A\"/>\n          <polygon class=\"mo-tile\" style=\"--d:.78s;--tx:70px;--ty:40px;--tr:-28deg;--f1:#16A79B;--f2:#17265C\" points=\"210,80 270,80 240,130\" fill=\"#16A79B\"/>\n          <polygon class=\"mo-tile\" style=\"--d:.86s;--tx:0px;--ty:70px;--tr:22deg;--f1:#17265C;--f2:#16A79B\" points=\"180,130 240,130 210,80\" fill=\"#17265C\"/>\n          <polygon class=\"mo-tile\" style=\"--d:.94s;--tx:-90px;--ty:20px;--tr:-18deg;--f1:#16A79B;--f2:#17265C\" points=\"90,80 150,80 120,130\" fill=\"#16A79B\"/>\n          <polygon class=\"mo-tile\" style=\"--d:1.02s;--tx:90px;--ty:-20px;--tr:24deg;--f1:#F0325B;--f2:#FFD54A\" points=\"270,80 330,80 300,130\" fill=\"#F0325B\"/>\n        </svg>\n\n        <div class=\"mo-mini\">\n          <p>A machine doubles a number, then subtracts 3. Put in 7, out comes 11.\n            What goes in to get 25 out?</p>\n          <div class=\"mo-opts\" data-mo-opts>\n            <button type=\"button\" class=\"mo-opt\" data-mo-a=\"11\">11</button>\n            <button type=\"button\" class=\"mo-opt\" data-mo-a=\"14\">14</button>\n            <button type=\"button\" class=\"mo-opt\" data-mo-a=\"16\">16</button>\n            <button type=\"button\" class=\"mo-opt\" data-mo-a=\"22\">22</button>\n          </div>\n          <p class=\"mo-why\"><b>Run it backwards.</b> 25 add 3 is 28, then 28 divided by 2 is\n            <b>14</b>. Working backwards turns a guessing game into one line of arithmetic.</p>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- ---------- in every workshop ---------- -->\n  <div class=\"mo-inc\">\n    <p class=\"mo-kicker\">In every workshop</p>\n    <h3>Unique ways in to <em>a problem you cannot do</em></h3>\n\n    <div class=\"mo-grid\">\n      <article class=\"mo-item\">\n        <span class=\"mo-badge\">90</span>\n        <b>Sixty minutes, weekly</b>\n        <p>Long enough to get properly stuck on something and then get unstuck, which is where\n          the learning is.</p>\n      </article>\n      <article class=\"mo-item\">\n        <span class=\"mo-badge\">6</span>\n        <b>Unique strategies</b>\n        <p>Work backwards. Try a smaller case. Find what cannot change. And three more, taught\n          one at a time.</p>\n      </article>\n      <article class=\"mo-item\">\n        <span class=\"mo-badge\">↺</span>\n        <b>Join in any term</b>\n        <p>The strategies do not run in a fixed order, so no term is the wrong one to start\n          in.</p>\n      </article>\n      <article class=\"mo-item\">\n        <span class=\"mo-badge\">◇</span>\n        <b>Small groups</b>\n        <p>Enough children to argue about a problem, few enough that everyone gets to say what\n          they tried.</p>\n      </article>\n      <article class=\"mo-item\">\n        <span class=\"mo-badge\">⇄</span>\n        <b>Online or in Reading</b>\n        <p>Join the workshop online, or come to it in person. Same problems either way.</p>\n      </article>\n      <article class=\"mo-item\">\n        <span class=\"mo-badge\">★</span>\n        <b>Where it leads</b>\n        <p>The national papers reward these same methods. Entries are made through the school,\n          not by a parent.</p>\n      </article>\n    </div>\n\n    <div class=\"mo-ctas\">\n      <a class=\"mo-btn mo-go\" href=\"/maths-olympiad\">See the workshops →</a>\n      <a class=\"mo-btn mo-ghost\" href=\"/maths-olympiad#try\">Try a problem first</a>\n    </div>\n  </div>\n</div>\n\n<script>\n(function () {\n  /* Scoped to THIS block, and by CLASS rather than by id: a block's ids can be\n     namespaced when it is placed on a page, so getElementById is the one thing\n     a pasted block should never rely on. */\n  var root = document.currentScript && document.currentScript.closest(\".sx\");\n  if (!root) { var all = document.querySelectorAll(\".sx.sx-maths-olympiad\"); root = all[all.length - 1]; }\n  if (!root || root.dataset.on) return;\n  root.dataset.on = \"1\";\n\n  var go = function () { root.classList.add(\"go\"); };\n  if (!(\"IntersectionObserver\" in window)) go();\n  else {\n    var io = new IntersectionObserver(function (es) {\n      es.forEach(function (e) { if (e.isIntersecting) { go(); io.disconnect(); } });\n    }, { threshold: 0, rootMargin: \"0px 0px -14% 0px\" });\n    io.observe(root);\n  }\n\n  /* One problem, answerable here. The buttons are in the markup and this only\n     wires them: building them in script as well as writing them in the HTML\n     is how the old block ended up showing eight options instead of four. */\n  var opts = [].slice.call(root.querySelectorAll(\".mo-opt\"));\n  var why = root.querySelector(\".mo-why\");\n  opts.forEach(function (b) {\n    b.onclick = function () {\n      opts.forEach(function (x) {\n        x.disabled = true;\n        if (x.dataset.moA === \"14\") x.classList.add(\"right\");\n      });\n      if (b.dataset.moA !== \"14\") b.classList.add(\"wrong\");\n      if (why) why.classList.add(\"show\");\n    };\n  });\n})();\n</script>","mode":"section","fullWidth":false},"pageCustomHtml":"<!-- ============================================================\n     MOSAIC — the programme's own page at /maths-olympiad\n     Paste into: Programmes → Maths Olympiad → box ② (the programme's own page)\n     Mode:       The whole page — hide the hero too\n     ------------------------------------------------------------\n     What was removed from the mockup, and why:\n       · the \"Pick a group\" booking section — the enrolment panel beside this\n         page carries the plan and the live list of mapped courses, and a price\n         typed in here would go stale the day it changed\n       · the sign-off line — the site has a footer\n       · the page's own scroll-behaviour rule — the page owns scrolling\n     Everything else is unchanged: the mosaic wordmark, three problems to try,\n     six strategies, and the competition ladder.\n     ============================================================ -->\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Open+Sans:wght@400;600;700&family=Playfair+Display:ital,wght@1,700&family=JetBrains+Mono:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n<style>\n:root{\n  /* v3 — the LMS theme drives the page; the poster palette survives where it\n     belongs, inside the tiles. Type, buttons, cards, radii and shadows are the\n     site's, so this page sits beside every other Sparks page without looking\n     like a different company's. */\n  --a1:#3F27BD; --a2:#D22CB2;        /* the site gradient */\n  --pa:#E2650F;                       /* MOSAIC's accent, legible at 12px */\n  --good:#17DA9B;\n  --ink:#222; --grey:#777; --line:#ececf3; --soft:#f7f7fb; --soft2:#fdf4fa;\n  --card-sh:0 10px 30px rgba(34,34,60,.09);\n  --card-sh-lg:0 20px 50px rgba(34,34,60,.14);\n  --r:12px;\n  /* the tiles keep the poster's colours — this is the bit that stays */\n  --t1:#F0325B; --t2:#16A79B; --t3:#FFD54A; --t4:#17265C; --t5:#FF7A54;\n  --display:'Poppins',sans-serif;\n  --serif:'Playfair Display',Georgia,serif;\n  --body:'Open Sans','Segoe UI',system-ui,sans-serif;\n  --num:'JetBrains Mono',ui-monospace,Consolas,monospace;\n}\n*{box-sizing:border-box}\nbody{margin:0;background:#fff;color:var(--grey);font:400 15px/1.8 var(--body);-webkit-font-smoothing:antialiased}\nh1,h2,h3{font-family:var(--display);font-weight:700;color:var(--ink);line-height:1.18;margin:0}\n.grad{font-family:var(--serif);font-style:italic;font-weight:700;\n  background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}\n/* the one italic serif accent, exactly as the site's .grad does it */\np{margin:0}\n.wrap{max-width:1120px;margin:0 auto;padding:0 24px}\n.kicker{font:500 .72rem/1 var(--num);letter-spacing:.2em;text-transform:uppercase;color:var(--pa)}\n.kicker-l{color:var(--pa)}\n\n/* ---------- 1 · THE MOSAIC ----------\n   v3: the tiles used to cover the whole banner twice — a faint full-bleed copy\n   with a masked copy over it — which on a real page came out as a wall of\n   triangles with the wordmark and the kicker lost inside it. The tiles now\n   appear ONLY inside the letters, on the page's own background. Same tiles,\n   same palette, same pointer scatter; it just reads as a word again. */\n.hero{\n  background:linear-gradient(180deg,#FBFAFF 0%,#F4F2FC 100%);\n  color:var(--ink);position:relative;overflow:hidden;padding:34px 0 54px;\n  border-bottom:1px solid var(--line);\n}\n/* v5: the band was sized for a wordmark that never painted, so the page opened\n   on 250px of nothing. With the tiles rendering it needs less room, not more. */\n.hero-word{max-height:170px;margin-bottom:2px}\n.hero-word{display:block;width:100%;height:auto;max-height:210px;margin:0 auto 6px}\n/* the faint backing copy is gone; this keeps the letters from floating */\n.hero-word .plate{fill:#fff;opacity:.55}\n.hero-copy{text-align:center;position:relative;z-index:2;max-width:820px;margin:0 auto;padding:0 24px}\n.hero-copy h1{\n  font:700 clamp(1.15rem,2.4vw,1.75rem)/1.35 var(--display);color:var(--ink);letter-spacing:-.01em;\n}\n.hero-copy h1 span{color:var(--pa)}\n.hero-sub{max-width:46ch;margin:14px auto 0;color:var(--grey);font-size:1.02rem}\n.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}\n/* v4: .mo-btn and .mo-btn-go were lost when the hero block was rewritten — they had\n   been declared inside it — so every button on the page fell back to a bare\n   underlined link. The site's pill, restored. */\n.mo-btn{\n  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none;\n  font:600 14px/1 var(--display);letter-spacing:.02em;padding:16px 32px;border-radius:999px;\n  transition:background-position .35s,transform .15s,box-shadow .15s;\n}\n.mo-btn-go{\n  color:#fff;background:linear-gradient(90deg,var(--a1),var(--a2));\n  background-size:180% 100%;background-position:0 0;box-shadow:0 10px 25px rgba(0,0,0,.16);\n}\n.mo-btn-go:hover{background-position:95% 0;transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}\n.mo-btn-go:focus-visible,.mo-btn-quiet:focus-visible{outline:2px solid var(--a1);outline-offset:3px}\n.mo-btn-quiet{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}\n.mo-btn-quiet:hover{box-shadow:inset 0 0 0 2px var(--a1);color:var(--a1);transform:translateY(-2px)}\n.facts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:26px}\n.fact{\n  font:500 .76rem/1 var(--num);letter-spacing:.06em;color:var(--ink);\n  padding:11px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);\n}\n.fact b{color:var(--pa);font-weight:700}\n.kicker{font:500 .72rem/1 var(--num);letter-spacing:.2em;text-transform:uppercase;color:var(--pa)}\n.kicker-l{color:var(--pa)}\n\n/* ---------- 2 · TRY ONE ---------- */\n.try{background:var(--soft);padding:80px 0 90px;position:relative}\n.try-head{text-align:center;margin-bottom:34px}\n.try-head h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:12px 0 10px}\n.try-head p{max-width:40ch;margin:0 auto}\n.puzzle{\n  background:#fff;border-radius:20px;padding:0;overflow:hidden;\n  box-shadow:var(--card-sh-lg);max-width:780px;margin:0 auto;\n}\n.puzzle-bar{display:flex;align-items:center;gap:14px;padding:16px 26px;\n  background:linear-gradient(90deg,var(--a1),var(--a2));color:#fff}\n.puzzle-bar .qno{font:700 .78rem/1 var(--num);letter-spacing:.16em;color:var(--pa)}\n.pips{display:flex;gap:6px;margin-left:auto}\n.pip{width:9px;height:9px;background:rgba(255,255,255,.3);border-radius:999px;transition:background .3s ease}\n.pip.done{background:var(--good)}\n.pip.now{background:var(--pa)}\n.puzzle-body{padding:30px 30px 34px}\n.qtext{font:600 1.22rem/1.5 var(--body);color:var(--ink);margin-bottom:22px}\n.qtext code{font-family:var(--num);background:var(--soft);padding:2px 8px;border-radius:20px;color:var(--pa)}\n.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\n.opt{\n  border:2px solid var(--line);background:#fff;border-radius:14px;padding:20px 8px;cursor:pointer;\n  font:700 1.35rem/1 var(--num);color:var(--ink);transition:all .16s ease;\n}\n.opt:hover:not(:disabled){border-color:var(--ink);color:var(--ink);transform:translateY(-3px)}\n.opt:disabled{cursor:default}\n.opt.right{background:var(--good);border-color:var(--good);color:#fff}\n.opt.wrong{background:var(--soft);border-color:var(--pa);color:var(--pa)}\n.reveal{\n  margin-top:22px;padding:22px 24px;border-radius:14px;background:var(--soft);\n  border-left:4px solid var(--pa);display:none;\n}\n.reveal.show{display:block;animation:slidein .45s cubic-bezier(.2,.9,.3,1)}\n@keyframes slidein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}\n.reveal b{display:block;font:700 .72rem/1 var(--num);letter-spacing:.16em;text-transform:uppercase;color:var(--pa);margin-bottom:9px}\n.reveal p{color:var(--ink);font-size:.97rem}\n.reveal .next{margin-top:16px}\n.scoreline{text-align:center;margin-top:22px;font:500 .82rem/1 var(--num);letter-spacing:.1em;color:var(--grey)}\n\n/* ---------- 3 · FIVE WEEKS ---------- */\n.weeks{background:var(--soft);color:var(--grey);padding:88px 0}\n.weeks h2{color:var(--ink);font-size:clamp(1.8rem,4.6vw,2.9rem);text-align:center;margin-bottom:8px}\n.weeks .lead{text-align:center;color:var(--grey);max-width:38ch;margin:0 auto 40px}\n.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}\n.tile{\n  position:relative;cursor:pointer;border:1px solid var(--line);text-align:left;padding:22px 18px 24px;\n  border-radius:18px;background:#fff;color:var(--ink);font-family:var(--body);box-shadow:var(--card-sh);\n  transition:transform .2s cubic-bezier(.2,.9,.3,1),border-color .2s ease,box-shadow .2s ease;\n}\n.tile:hover{transform:translateY(-5px);border-color:var(--pa)}\n.tile .wk{font:700 .68rem/1 var(--num);letter-spacing:.14em;color:var(--pa);display:block;margin-bottom:12px}\n.tile .nm{font:700 .98rem/1.3 var(--body);display:block}\n.tile.on{background:linear-gradient(150deg,var(--a1),var(--a2));color:#fff;border-color:transparent;\n  transform:translateY(-5px);box-shadow:0 16px 34px rgba(63,39,189,.28)}\n.tile.on .wk{color:#FFD79A}\n.tile.on .pb-glyph,.tile.on svg{color:var(--ink)}\n.tile.on .wk{color:var(--pa)}\n.tile-art{width:100%;height:auto;margin-bottom:14px;display:block}\n.wk-detail{\n  margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 28px;\n  box-shadow:var(--card-sh);display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;\n}\n.wk-detail .big{font:400 3.4rem/1 var(--num);color:var(--pa);letter-spacing:-.04em}\n.wk-detail h3{color:var(--ink);font-size:1.25rem;margin-bottom:6px}\n.wk-detail p{color:var(--grey);font-size:.97rem}\n\n /* ---------- 3b · THE PATHWAY ---------- */\n.path{padding:88px 0;background:#fff}\n.path h2{font-size:clamp(1.8rem,4.6vw,2.6rem);text-align:center;margin-bottom:10px}\n.path .lead{text-align:center;max-width:44ch;margin:0 auto 44px;color:var(--grey)}\n.rungs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}\n.rung{\n  background:#fff;border:2px solid var(--line);border-radius:20px;padding:26px 24px 28px;position:relative;\n  opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1);\n}\n.rung.in{opacity:1;transform:none}\n.rung .mo-step{font:700 .68rem/1 var(--num);letter-spacing:.16em;text-transform:uppercase;color:var(--pa)}\n.rung h3{font-size:1.1rem;margin:10px 0 8px}\n.rung p{font-size:.93rem}\n.rung .spec{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}\n.rung .spec span{font:500 .7rem/1 var(--num);padding:8px 11px;border-radius:999px;background:var(--soft);color:var(--ink)}\n.rung.top{border-color:var(--pa)}\n.path-note{max-width:760px;margin:26px auto 0;padding:20px 24px;border-radius:16px;background:var(--soft);\n  font-size:.93rem;text-align:center}\n\n/* ---------- 4 · WHY ---------- */\n.why{padding:88px 0;background:var(--soft)}\n.why h2{font-size:clamp(1.8rem,4.6vw,2.9rem);text-align:center;margin-bottom:40px}\n.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}\n.mo-card{\n  background:#fff;border-radius:20px;padding:26px 24px 28px;border:1px solid var(--line);\n  box-shadow:var(--card-sh);\n  opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1);\n}\n.mo-card.in{opacity:1;transform:none}\n.mo-card svg{display:block;margin-bottom:16px}\n.mo-card b{display:block;font:700 1.02rem/1.3 var(--body);color:var(--ink);margin-bottom:7px}\n.mo-card p{font-size:.92rem}\n\n/* ---------- 5 · BOOK ---------- */\n.book{padding:88px 0 96px;background:#fff}\n.book h2{font-size:clamp(1.8rem,4.6vw,2.9rem);text-align:center}\n.book .lead{text-align:center;max-width:40ch;margin:12px auto 32px}\n.switch{display:flex;justify-content:center;gap:6px;background:var(--soft);padding:6px;border-radius:999px;width:max-content;margin:0 auto 30px}\n.switch button{\n  border:0;cursor:pointer;background:transparent;color:var(--grey);\n  font:600 .86rem/1 var(--display);padding:13px 26px;border-radius:999px;transition:all .18s ease;\n}\n.switch button.on{background:var(--ink);color:#fff}\n.groups{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px;margin:0 auto}\n.group{\n  border:2px solid var(--line);border-radius:20px;padding:26px;background:#fff;cursor:pointer;\n  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;\n}\n.group:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--card-sh)}\n.group .when{font:700 1.05rem/1.3 var(--body);color:var(--ink)}\n.group .where{font:500 .78rem/1.5 var(--num);color:var(--grey);margin-top:6px;display:block}\n.group .row{display:flex;align-items:baseline;justify-content:space-between;margin-top:16px}\n.group .price{font:700 1.5rem/1 var(--display);color:var(--pa)}\n.group .left{font:500 .74rem/1 var(--num);letter-spacing:.1em;color:var(--good)}\n.seats{height:7px;border-radius:999px;background:var(--soft);margin-top:14px;overflow:hidden}\n.seats i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--good),var(--pa));width:0;transition:width 1s cubic-bezier(.2,.8,.3,1)}\n.book-foot{text-align:center;margin-top:34px}\n\n/* ---------- 6 · CLOSE ---------- */\n.close{background:linear-gradient(120deg,var(--a1),var(--a2));color:#fff;padding:74px 0;text-align:center;position:relative;overflow:hidden}\n.close h2{color:#fff;font-size:clamp(1.9rem,5.4vw,3.4rem)}\n.close p{color:#F3E9FF;max-width:36ch;margin:14px auto 26px}\n.close .mo-btn-go{background:#fff;color:var(--a1)}\n.sig{padding:28px 0 42px;text-align:center;font:500 .76rem/1.8 var(--num);color:var(--grey);background:var(--soft)}\n\n@media (max-width:900px){\n  .opts{grid-template-columns:repeat(2,1fr)}\n  .tiles{grid-template-columns:repeat(2,1fr)}\n  .why-grid{grid-template-columns:repeat(2,1fr)}\n  .groups{grid-template-columns:1fr}\n  .wk-detail{grid-template-columns:1fr;gap:10px}\n}\n@media (max-width:560px){\n  .why-grid{grid-template-columns:1fr}\n  .tiles{grid-template-columns:1fr}\n}\n@media (prefers-reduced-motion:reduce){\n  *{animation:none!important;transition:none!important}\n  .mo-card{opacity:1;transform:none}\n}\n\n\n/* ---- added for the programme page ----\n   The block sits beside the enrolment rail, so it must not assume the whole\n   window: every wrap is capped to the column it is given, not to the viewport. */\n.wrap{max-width:min(1080px,100%)}\n.close-note{margin-top:10px;font:500 .78rem/1.6 var(--num);opacity:.85}\n.hero{border-radius:0 0 26px 26px}\n/* the site's own H1 is hidden in full-page mode, so this one carries the page */\n.hero h1{margin-top:6px}\n</style>\n\n<!-- ============ 1 · THE MOSAIC ============ -->\n<header class=\"hero\">\n  <p class=\"kicker\" style=\"text-align:center;margin-bottom:10px\">Think · Solve · Explore · Achieve</p>\n  <svg class=\"hero-word\" id=\"mosaic\" viewBox=\"0 60 1200 190\" aria-label=\"MOSAIC CLUB\">\n    <defs>\n      <!-- v6 — a clip path, not a mask.\n\n           Two goes at this were wrong in the same way. A <mask> defaults to\n           maskUnits=\"objectBoundingBox\", so the mask REGION is derived from the\n           bounding box of the element it is applied to — and that group is\n           empty when the page is parsed, because the script fills it a moment\n           later. Zero box, zero region, nothing painted. It failed identically\n           through <use> and applied directly: the indirection was never the\n           problem.\n\n           <clipPath> is the right primitive for \"show the tiles only inside\n           these letters\". Its clipPathUnits ALREADY default to userSpaceOnUse,\n           so there is no bounding box in the calculation at all and nothing to\n           get wrong at first paint. It also needs no black backing rectangle,\n           and no luminance step. -->\n      <clipPath id=\"word\" clipPathUnits=\"userSpaceOnUse\">\n        <!-- fallbacks that exist on every machine: if Poppins has not arrived\n             the letters are a different width but they are still letters, and\n             the band is never empty -->\n        <text x=\"600\" y=\"205\" text-anchor=\"middle\"\n          style=\"font-family:'Poppins','Archivo Black',Impact,'Arial Black',Haettenschweiler,sans-serif;\n                 font-weight:800;font-size:150px;letter-spacing:-7px\">MOSAIC CLUB</text>\n      </clipPath>\n    </defs>\n    <!-- v5 — the tiles are built straight into THIS group, and the mask is on\n         it directly.\n\n         Before, the grid lived in <defs> and was drawn through\n         <use href=\"#grid\">. That is valid, and it is also the reason the band\n         came out empty: the group is empty when the page is parsed and the\n         script fills it a moment later, and a <use> shadow tree is only\n         guaranteed to be regenerated on mutation in some browsers. Where it is\n         not, the reference stays as it was — pointing at nothing — so the\n         letters never appear and the hero is a blank gap.\n\n         No <use>, no indirection, no browser-dependent behaviour: the element\n         the script appends to is the element that paints. -->\n    <g id=\"grid\" clip-path=\"url(#word)\"></g>\n  </svg>\n\n  <div class=\"wrap hero-copy\">\n    <h1>Maths Olympiad <span>Skills</span> and <span>Inspiration</span> Centre</h1>\n    <p class=\"hero-sub\">A year-round workshop where curious children meet the problems that school never sets them.</p>\n    <div class=\"hero-cta\">\n      <a class=\"mo-btn mo-btn-go\" href=\"#join\">See how to join →</a>\n      <a class=\"mo-btn mo-btn-quiet\" href=\"#try\">Try a problem first</a>\n    </div>\n    <div class=\"facts\">\n      <span class=\"fact\">Years <b>4–9</b></span>\n      <span class=\"fact\">Runs <b>all year</b></span>\n      <span class=\"fact\"><b>90</b> minutes weekly</span>\n      <span class=\"fact\">Online or <b>Reading</b></span>\n      <span class=\"fact\">Join <b>any term</b></span>\n    </div>\n  </div>\n</header>\n\n<!-- ============ 2 · TRY ONE ============ -->\n<section class=\"try\" id=\"try\">\n  <div class=\"wrap\">\n    <div class=\"try-head\">\n      <p class=\"kicker\">No sign-up, no email</p>\n      <h2>Try <span class=\"grad\">three of ours</span></h2>\n      <p>This is the sort of problem your child will meet in week one. Have a go — the answer matters less than the trick.</p>\n    </div>\n\n    <div class=\"puzzle\">\n      <div class=\"puzzle-bar\">\n        <span class=\"qno\" id=\"qno\">Problem 01</span>\n        <span style=\"font:500 .78rem/1 var(--num);letter-spacing:.1em;opacity:.8\" id=\"qtag\">Number patterns</span>\n        <span class=\"pips\">\n          <i class=\"pip now\" data-pip=\"0\"></i><i class=\"pip\" data-pip=\"1\"></i><i class=\"pip\" data-pip=\"2\"></i>\n        </span>\n      </div>\n      <div class=\"puzzle-body\">\n        <p class=\"qtext\" id=\"qtext\"></p>\n        <div class=\"opts\" id=\"opts\"></div>\n        <div class=\"reveal\" id=\"reveal\">\n          <b id=\"rlabel\">The trick</b>\n          <p id=\"rtext\"></p>\n          <button class=\"mo-btn mo-btn-go next\" id=\"next\">Next problem →</button>\n        </div>\n      </div>\n    </div>\n    <p class=\"scoreline\" id=\"scoreline\">Three problems · roughly 90 seconds</p>\n  </div>\n</section>\n\n<!-- ============ 3 · THE STRATEGIES ============ -->\n<section class=\"weeks\">\n  <div class=\"wrap\">\n    <p class=\"kicker kicker-l\" style=\"text-align:center\">What we actually teach</p>\n    <h2>Six ways in to a <span class=\"grad\">problem you cannot do</span></h2>\n    <p class=\"lead\">Olympiad questions are not harder sums. They are questions where the method is the\n      answer — so these are the methods, taught one at a time and then used until they are automatic.</p>\n\n    <div class=\"tiles\" id=\"tiles\">\n      <button class=\"tile on\" data-wk=\"0\">\n        <svg class=\"tile-art\" viewBox=\"0 0 120 60\" aria-hidden=\"true\">\n          <path d=\"M104 30H26M40 18L26 30l14 12\" stroke=\"#FFD54A\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <circle cx=\"104\" cy=\"30\" r=\"6\" fill=\"#16A79B\"/>\n        </svg>\n        <span class=\"wk\">Strategy 01</span><span class=\"nm\">Work backwards</span>\n      </button>\n      <button class=\"tile\" data-wk=\"1\">\n        <svg class=\"tile-art\" viewBox=\"0 0 120 60\" aria-hidden=\"true\">\n          <rect x=\"18\" y=\"34\" width=\"12\" height=\"12\" rx=\"2.5\" fill=\"#FFD54A\"/>\n          <rect x=\"38\" y=\"26\" width=\"20\" height=\"20\" rx=\"3\" fill=\"#F0325B\" opacity=\".7\"/>\n          <rect x=\"66\" y=\"14\" width=\"32\" height=\"32\" rx=\"4\" fill=\"none\" stroke=\"#16A79B\" stroke-width=\"2.5\"/>\n        </svg>\n        <span class=\"wk\">Strategy 02</span><span class=\"nm\">Try a smaller case</span>\n      </button>\n      <button class=\"tile\" data-wk=\"2\">\n        <svg class=\"tile-art\" viewBox=\"0 0 120 60\" aria-hidden=\"true\">\n          <path d=\"M24 44h72\" stroke=\"#ffffff\" stroke-opacity=\".25\" stroke-width=\"2\"/>\n          <circle cx=\"38\" cy=\"30\" r=\"9\" fill=\"none\" stroke=\"#FFD54A\" stroke-width=\"2.5\"/>\n          <circle cx=\"60\" cy=\"30\" r=\"9\" fill=\"none\" stroke=\"#FFD54A\" stroke-width=\"2.5\"/>\n          <circle cx=\"82\" cy=\"30\" r=\"9\" fill=\"none\" stroke=\"#FFD54A\" stroke-width=\"2.5\"/>\n          <path d=\"M33 30h10M55 30h10M77 30h10\" stroke=\"#16A79B\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n        </svg>\n        <span class=\"wk\">Strategy 03</span><span class=\"nm\">Find what cannot change</span>\n      </button>\n      <button class=\"tile\" data-wk=\"3\">\n        <svg class=\"tile-art\" viewBox=\"0 0 120 60\" aria-hidden=\"true\">\n          <rect x=\"20\" y=\"24\" width=\"24\" height=\"22\" rx=\"3\" fill=\"none\" stroke=\"#16A79B\" stroke-width=\"2.5\"/>\n          <rect x=\"50\" y=\"24\" width=\"24\" height=\"22\" rx=\"3\" fill=\"none\" stroke=\"#16A79B\" stroke-width=\"2.5\"/>\n          <rect x=\"80\" y=\"24\" width=\"24\" height=\"22\" rx=\"3\" fill=\"none\" stroke=\"#16A79B\" stroke-width=\"2.5\"/>\n          <circle cx=\"32\" cy=\"36\" r=\"4.5\" fill=\"#FFD54A\"/>\n          <circle cx=\"57\" cy=\"36\" r=\"4.5\" fill=\"#FFD54A\"/><circle cx=\"67\" cy=\"36\" r=\"4.5\" fill=\"#F0325B\"/>\n          <circle cx=\"92\" cy=\"36\" r=\"4.5\" fill=\"#FFD54A\"/>\n        </svg>\n        <span class=\"wk\">Strategy 04</span><span class=\"nm\">The pigeonhole principle</span>\n      </button>\n      <button class=\"tile\" data-wk=\"4\">\n        <svg class=\"tile-art\" viewBox=\"0 0 120 60\" aria-hidden=\"true\">\n          <path d=\"M22 46h80\" stroke=\"#ffffff\" stroke-opacity=\".25\" stroke-width=\"2\"/>\n          <rect x=\"24\" y=\"38\" width=\"10\" height=\"8\" fill=\"#FFD54A\"/>\n          <rect x=\"42\" y=\"30\" width=\"10\" height=\"16\" fill=\"#ffffff\" opacity=\".35\"/>\n          <rect x=\"60\" y=\"22\" width=\"10\" height=\"24\" fill=\"#ffffff\" opacity=\".35\"/>\n          <rect x=\"78\" y=\"12\" width=\"10\" height=\"34\" fill=\"#16A79B\"/>\n        </svg>\n        <span class=\"wk\">Strategy 05</span><span class=\"nm\">Push it to the extreme</span>\n      </button>\n      <button class=\"tile\" data-wk=\"5\">\n        <svg class=\"tile-art\" viewBox=\"0 0 120 60\" aria-hidden=\"true\">\n          <path d=\"M34 16v28M34 44h20\" stroke=\"#FFD54A\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\"/>\n          <path d=\"M64 20l24 24M88 20L64 44\" stroke=\"#F0325B\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n        </svg>\n        <span class=\"wk\">Strategy 06</span><span class=\"nm\">Show it cannot happen</span>\n      </button>\n    </div>\n\n    <div class=\"wk-detail\">\n      <span class=\"big\" id=\"wkbig\">01</span>\n      <div>\n        <h3 id=\"wkname\">Work backwards</h3>\n        <p id=\"wktext\">Start from the answer and undo it. A machine doubles a number then subtracts three\n          and gives you 25 — add the three back, halve it, done. Half the questions that look like guesswork\n          are one line of arithmetic read the other way round.</p>\n      </div>\n    </div>\n\n    <p class=\"lead\" style=\"margin:36px auto 0;max-width:46ch\">Not a five-week course. It runs through the\n      year, one strategy at a time, revisited on harder problems each term.</p>\n  </div>\n</section>\n\n<!-- ============ 3b · THE PATHWAY ============ -->\n<section class=\"path\">\n  <div class=\"wrap\">\n    <p class=\"kicker\" style=\"text-align:center\">Where it leads</p>\n    <h2>The papers this is <span class=\"grad\">actually for</span></h2>\n    <p class=\"lead\">Every strategy we teach is one the real papers reward. This is the ladder your child\n      is climbing, and where it goes next.</p>\n\n    <div class=\"rungs\">\n      <article class=\"rung js-in\">\n        <span class=\"mo-step\">Where it starts</span>\n        <h3>Primary Maths Challenge</h3>\n        <p>Sat in school in Years 5 and 6. Short, non-routine problems — the first time most children meet\n          a question their textbook has not prepared them for.</p>\n        <div class=\"spec\"><span>Years 5–6</span><span>In school</span></div>\n      </article>\n\n      <article class=\"rung js-in\">\n        <span class=\"mo-step\">The main event</span>\n        <h3>Junior Mathematical Challenge</h3>\n        <p>The UKMT paper sat by around a quarter of a million children in Years 7 and 8, with Gold, Silver\n          and Bronze awarded by national percentile.</p>\n        <div class=\"spec\"><span>Year 8 and below</span><span>25 questions</span><span>60 min</span><span>Multiple choice</span></div>\n      </article>\n\n      <article class=\"rung js-in top\">\n        <span class=\"mo-step\">By invitation</span>\n        <h3>Kangaroo or Olympiad</h3>\n        <p>A strong Challenge score earns an invitation to a follow-on round — the Junior Kangaroo, a harder\n          multiple-choice paper, or the Junior Mathematical Olympiad, which asks for full written solutions.</p>\n        <div class=\"spec\"><span>Kangaroo · 25 Q · 60 min</span><span>JMO · 6 Q · 2 hours</span></div>\n      </article>\n    </div>\n\n    <p class=\"path-note\">A point worth knowing: the Kangaroo is <b>not</b> a stepping stone to the Olympiad.\n      Children are invited to one or the other depending on how they score, and both are entered through the\n      school — never by a parent directly.</p>\n  </div>\n</section>\n\n<!-- ============ 4 · WHY ============ -->\n<section class=\"why\">\n  <div class=\"wrap\">\n    <p class=\"kicker\" style=\"text-align:center\">Why join</p>\n    <h2>What they <span class=\"grad\">walk out with</span></h2>\n    <div class=\"why-grid\">\n      <article class=\"mo-card js-in\">\n        <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" aria-hidden=\"true\">\n          <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"8\" fill=\"#FFF3CE\"/>\n          <path d=\"M23 12l3.4 7 7.6 1-5.5 5.4 1.3 7.6L23 29.4 16.2 33l1.3-7.6L12 20l7.6-1z\" fill=\"#FFD54A\"/>\n        </svg>\n        <b>Ready for the real thing</b>\n        <p>Pitched at the Primary Maths Challenge and the UKMT Junior Challenge — the papers school enters them for.</p>\n      </article>\n      <article class=\"mo-card js-in\">\n        <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" aria-hidden=\"true\">\n          <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"8\" fill=\"#DFF4F1\"/>\n          <path d=\"M13 30c4-14 16-14 20 0\" fill=\"none\" stroke=\"#16A79B\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n          <circle cx=\"13\" cy=\"30\" r=\"3.5\" fill=\"#16A79B\"/><circle cx=\"33\" cy=\"30\" r=\"3.5\" fill=\"#16A79B\"/>\n        </svg>\n        <b>A method, not answers</b>\n        <p>The strategies Olympiad students actually use, so an unfamiliar question stops being a dead end.</p>\n      </article>\n      <article class=\"mo-card js-in\">\n        <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" aria-hidden=\"true\">\n          <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"8\" fill=\"#FDE3E9\"/>\n          <path d=\"M14 24l6 6 12-14\" fill=\"none\" stroke=\"#F0325B\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        <b>Confidence under pressure</b>\n        <p>Timed challenges every week, so the clock stops being the thing that beats them.</p>\n      </article>\n      <article class=\"mo-card js-in\">\n        <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" aria-hidden=\"true\">\n          <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"8\" fill=\"#E7EAF6\"/>\n          <circle cx=\"23\" cy=\"20\" r=\"8\" fill=\"none\" stroke=\"#17265C\" stroke-width=\"3\"/>\n          <path d=\"M18 27l-3 10 8-4 8 4-3-10\" fill=\"#17265C\"/>\n        </svg>\n        <b>A certificate, every child</b>\n        <p>Recognition for finishing, not for winning. Everybody leaves with something.</p>\n      </article>\n    </div>\n  </div>\n</section>\n\n<!-- ============ CLOSE — hands over to the enrolment panel ============ -->\n<section class=\"close\" id=\"join\">\n  <div class=\"wrap\">\n    <h2>Every problem is an<br>adventure waiting</h2>\n    <p>One monthly subscription covers every Maths Olympiad course — the panel beside this page has\n      the price and everything it opens. Join in any term; the strategies do not run in a fixed order.</p>\n    <p class=\"close-note\">Small groups, on purpose.</p>\n  </div>\n</section>\n\n<script>\nconst reduced = (window.matchMedia\n  ? window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches : false);\n\n/* ---------- the mosaic: tiles that spell the name ---------- */\n(function () {\n  const svg = document.getElementById(\"mosaic\"), grid = document.getElementById(\"grid\");\n  /* everything below lives in one <script>: one throw here would leave every\n     .js-in section at opacity 0 — a blank page, from a missing hero */\n  if (!svg || !grid) return;\n\n  /* The clip path is <text>. Until Poppins arrives it is measured in the\n     fallback, so the letters are the right shape and the wrong width — and a\n     clip path is not re-evaluated on its own when a font swaps in. Nudging the\n     element once the font is ready makes the browser recompute it. */\n  /* v6 — the safety net.\n\n     I cannot render this page from where I am building it, only reason about\n     it, and the hero has now been blank twice for reasons that looked correct\n     on paper. So the page checks itself: a moment after the tiles are built it\n     measures what the clipped group actually occupies on screen. If that is\n     zero — clipping unsupported, the font never resolved, anything I have not\n     thought of — the clip is dropped and a plain wordmark is drawn instead.\n\n     A visitor then sees the name in brand colours rather than 200px of nothing,\n     which is the only outcome that actually matters here. */\n  setTimeout(function () {\n    try {\n      var box = grid.getBoundingClientRect();\n      if (box.width > 4 && box.height > 4) return;              /* it painted */\n      grid.removeAttribute(\"clip-path\");\n      grid.setAttribute(\"opacity\", \".18\");                       /* tiles as a wash */\n      var t = document.createElementNS(\"http://www.w3.org/2000/svg\", \"text\");\n      t.setAttribute(\"x\", \"600\"); t.setAttribute(\"y\", \"205\");\n      t.setAttribute(\"text-anchor\", \"middle\"); t.setAttribute(\"fill\", \"#17265C\");\n      t.setAttribute(\"style\", \"font-family:'Poppins',Impact,sans-serif;font-weight:800;\"\n        + \"font-size:150px;letter-spacing:-7px\");\n      t.textContent = \"MOSAIC CLUB\";\n      svg.appendChild(t);\n    } catch (e) { /* the fallback must never be the thing that breaks */ }\n  }, 400);\n\n  if (document.fonts && document.fonts.ready) {\n    document.fonts.ready.then(function () {\n      const t = svg.querySelector(\"clipPath text\");\n      if (t) { t.setAttribute(\"y\", \"205.001\"); t.setAttribute(\"y\", \"205\"); }\n    }).catch(function () {});\n  }\n  /* v4: eight rows rather than six. S is the cell size and the grid is built\n     from it, so this is the only number to change — 300/8 = 37.5 gives eight\n     rows and thirty-two columns, which is fine detail inside letterforms\n     without turning the counters of the O and the A into mush. */\n  const S = 37.5, W = 1200, H = 300;\n  /* the poster palette, kept — this is the part of MOSAIC that stays */\n  const palette = [\"#F0325B\", \"#16A79B\", \"#FFD54A\", \"#17265C\", \"#FF7A54\"];\n  const cells = [];\n  for (let y = 0; y < H; y += S) {\n    for (let x = 0; x < W; x += S) {\n      const g = document.createElementNS(\"http://www.w3.org/2000/svg\", \"g\");\n      g.setAttribute(\"class\", \"cell\");\n      const flip = Math.random() > .5;\n      const a = flip ? `${x},${y} ${x + S},${y} ${x},${y + S}` : `${x},${y} ${x + S},${y} ${x + S},${y + S}`;\n      const b = flip ? `${x + S},${y} ${x + S},${y + S} ${x},${y + S}` : `${x},${y} ${x + S},${y + S} ${x},${y + S}`;\n      [a, b].forEach((pts) => {\n        const p = document.createElementNS(\"http://www.w3.org/2000/svg\", \"polygon\");\n        p.setAttribute(\"points\", pts);\n        p.setAttribute(\"fill\", palette[(Math.random() * palette.length) | 0]);\n        p.setAttribute(\"stroke\", \"#FFFFFF\");\n        p.setAttribute(\"stroke-width\", \"1.4\");\n        g.appendChild(p);\n      });\n      grid.appendChild(g);\n      cells.push({ el: g, cx: x + S / 2, cy: y + S / 2, moved: false });\n    }\n  }\n  if (reduced) return;\n  let px = -999, py = -999, queued = false;\n  svg.addEventListener(\"pointermove\", (e) => {\n    const r = svg.getBoundingClientRect();\n    px = (e.clientX - r.left) / r.width * W;\n    py = (e.clientY - r.top) / r.height * H;\n    if (!queued) { queued = true; requestAnimationFrame(shift); }\n  });\n  svg.addEventListener(\"pointerleave\", () => { px = py = -999; requestAnimationFrame(shift); });\n  function shift() {\n    queued = false;\n    const R = 120;   /* smaller cells, tighter reach */\n    for (const c of cells) {\n      const dx = c.cx - px, dy = c.cy - py, d = Math.hypot(dx, dy);\n      if (d < R) {\n        const k = (1 - d / R);\n        c.el.style.transform =\n          `translate(${(dx / (d || 1)) * k * 12}px, ${(dy / (d || 1)) * k * 12}px) rotate(${k * 12}deg)`;\n        c.el.style.transformOrigin = `${c.cx}px ${c.cy}px`;\n        c.moved = true;\n      } else if (c.moved) { c.el.style.transform = \"\"; c.moved = false; }\n    }\n  }\n})();\n\n/* ---------- try three problems ---------- */\nconst PROBLEMS = [\n  { tag: \"Number patterns\",\n    q: \"A machine doubles a number, then subtracts 3. Put in <code>7</code> and out comes <code>11</code>. What must go in to get <code>25</code> out?\",\n    opts: [\"11\", \"14\", \"16\", \"22\"], answer: 1,\n    why: \"Run the machine backwards. Undo the subtract first — 25 + 3 = 28 — then undo the double: 28 ÷ 2 = 14. Working backwards turns a guessing game into one line of arithmetic.\" },\n  { tag: \"Counting cleverly\",\n    q: \"Six children are at a party. Every child shakes hands with every other child exactly once. How many handshakes happen altogether?\",\n    opts: [\"12\", \"15\", \"30\", \"36\"], answer: 1,\n    why: \"Each of the 6 children shakes 5 hands — that is 30. But every handshake got counted from both sides, so halve it: 15. Spotting a double count is worth more marks than counting faster.\" },\n  { tag: \"The famous one\",\n    q: \"Add up every whole number from <code>1</code> to <code>100</code>. What do you get?\",\n    opts: [\"4950\", \"5000\", \"5050\", \"10100\"], answer: 2,\n    why: \"Pair the ends: 1 + 100 = 101, 2 + 99 = 101, and so on. Fifty pairs, each making 101 — so 50 × 101 = 5050. Gauss is said to have done this at seven, in seconds, while his class added for an hour.\" },\n];\nlet qi = 0, score = 0;\nconst $ = (id) => document.getElementById(id);\n\nfunction renderQ() {\n  const p = PROBLEMS[qi];\n  $(\"qno\").textContent = \"Problem 0\" + (qi + 1);\n  $(\"qtag\").textContent = p.tag;\n  $(\"qtext\").innerHTML = p.q;\n  $(\"reveal\").classList.remove(\"show\");\n  $(\"next\").textContent = qi < PROBLEMS.length - 1 ? \"Next problem →\" : \"See how we teach it →\";\n  document.querySelectorAll(\".pip\").forEach((el, i) => {\n    el.className = \"pip\" + (i < qi ? \" done\" : i === qi ? \" now\" : \"\");\n  });\n  const box = $(\"opts\"); box.innerHTML = \"\";\n  p.opts.forEach((o, i) => {\n    const b = document.createElement(\"button\");\n    b.className = \"opt\"; b.textContent = o;\n    b.onclick = () => answer(i, b);\n    box.appendChild(b);\n  });\n}\nfunction answer(i, btn) {\n  const p = PROBLEMS[qi];\n  document.querySelectorAll(\".opt\").forEach((b, k) => {\n    b.disabled = true;\n    if (k === p.answer) b.classList.add(\"right\");\n  });\n  if (i !== p.answer) btn.classList.add(\"wrong\"); else score++;\n  $(\"rlabel\").textContent = i === p.answer ? \"Right — and here is why it works\" : \"Not quite — here is the trick\";\n  $(\"rtext\").textContent = p.why;\n  $(\"reveal\").classList.add(\"show\");\n  document.querySelectorAll(\".pip\")[qi].className = \"pip done\";\n}\n$(\"next\").onclick = () => {\n  if (qi < PROBLEMS.length - 1) {\n    qi++; renderQ();\n    $(\"qtext\").scrollIntoView({ block: \"center\", behavior: reduced ? \"auto\" : \"smooth\" });\n  } else {\n    $(\"scoreline\").textContent = score + \" of 3 — that is exactly the thinking we teach, all year\";\n    /* v5: this used to scroll to #book, the booking section that was removed\n       when the mockup became a programme page. getElementById returned null\n       and the handler threw — silently, because it only fires after the third\n       problem, which is exactly the moment a visitor is most interested. */\n    const join = document.getElementById(\"join\");\n    if (join) join.scrollIntoView({ behavior: reduced ? \"auto\" : \"smooth\" });\n  }\n};\nrenderQ();\n\n/* ---------- the five weeks ---------- */\nconst WEEKS = [\n  [\"Work backwards\", \"Start from the answer and undo it. A machine doubles a number then subtracts three and gives you 25 — add the three back, halve it, done. Half the questions that look like guesswork are one line of arithmetic read the other way round.\"],\n  [\"Try a smaller case\", \"Twelve people at a party is hard; four is easy. Do the small one, spot the pattern, then show why the pattern has to keep going. This is how a child gets from counting to reasoning.\"],\n  [\"Find what cannot change\", \"Some things survive every move you are allowed to make — whether a total stays odd, whether a colour balance holds. Spot the thing that cannot change and a whole family of impossible-looking questions falls open at once.\"],\n  [\"The pigeonhole principle\", \"Put thirteen people in a room and two of them share a birth month. Obvious once said, and startlingly powerful: it proves something must exist without ever finding it. The work is deciding what the pigeons and the holes are.\"],\n  [\"Push it to the extreme\", \"Take the biggest one, the smallest one, the first one that fails. Extreme cases turn a vague question about all of them into a precise question about one of them.\"],\n  [\"Show it cannot happen\", \"Assume it can, and follow it until it contradicts itself. Proving something impossible is a different skill from finding an answer — and it is most of the marks on a written Olympiad paper.\"],\n];\ndocument.getElementById(\"tiles\").addEventListener(\"click\", (e) => {\n  const t = e.target.closest(\".tile\"); if (!t) return;\n  document.querySelectorAll(\".tile\").forEach((x) => x.classList.remove(\"on\"));\n  t.classList.add(\"on\");\n  const i = +t.dataset.wk;\n  $(\"wkbig\").textContent = \"0\" + (i + 1);\n  $(\"wkname\").textContent = WEEKS[i][0];\n  $(\"wktext\").textContent = WEEKS[i][1];\n});\n\n\n/* ---------- reveals ----------\n   Guarded, and threshold 0. Two lessons from this codebase: an unguarded\n   `new IntersectionObserver` throws where the API is missing and takes every\n   line after it down with it, and a percentage threshold can never be met by\n   an element taller than the window — which leaves it at opacity 0 for ever,\n   with all of its markup present and nothing to show for it. */\n(function () {\n  var targets = document.querySelectorAll(\".js-in\");\n  var show = function (el, i) { setTimeout(function () { el.classList.add(\"in\"); }, (i || 0) * 90); };\n  if (!(\"IntersectionObserver\" in window)) { targets.forEach(show); return; }\n  var io = new IntersectionObserver(function (es) {\n    es.forEach(function (e, i) {\n      if (!e.isIntersecting) return;\n      show(e.target, i);\n      io.unobserve(e.target);\n    });\n  }, { threshold: 0, rootMargin: \"0px 0px -12% 0px\" });\n  targets.forEach(function (el) { io.observe(el); });\n})();\n</script>","showCourses":false,"showMockEvents":false,"showOlympiad":true,"showTeded":false,"brands":["sparks","bright"],"active":true,"position":60,"groups":[],"courses":[],"courseCount":0},{"id":"pg_0781f6bae86c","slug":"ted-ed","href":"/ted-ed","title":"TED-Ed Student Talks","navLabel":"TED-Ed Student Talks (FREE)","tileSub":"Public speaking · free to join","tileMeta":"Free · 8 to 12 sessions","eyebrow":"Speak · Think · Inspire","icon":"🎤","accent":"#BE123C","hero":{"headline":"TED-Ed {Student Talks}","body":"We are a TED-Ed Student Talks Educator and Organiser. Free to join, and it ends with a talk your child films and can submit.","image":"","imageAlt":"TED-Ed Student Talks","ctaLabel":"Register : Free Classes","ctaHref":"/ted-ed#register"},"summary":"A programme that teaches children to shape an idea and deliver it with confidence.","whatItIs":"<p>Run under the TED-Ed Student Talks framework, this programme teaches the skill no exam measures and every interview, presentation and viva depends on: standing up and saying something worth hearing.</p><p>Children choose an idea they care about, research it, cut it down to what matters, and rehearse it until it is theirs. The programme ends with each child delivering their talk to an audience.</p>","howSteps":[{"icon":"💡","title":"Find the idea","text":"What does your child actually care about? Everything starts there."},{"icon":"✂️","title":"Shape it","text":"Research, structure and cut — one idea, clearly made."},{"icon":"🗣️","title":"Rehearse it","text":"Voice, pace, pauses and nerves, practised until they are ordinary."},{"icon":"🎤","title":"Deliver it","text":"The talk, in front of a real audience — filmed only with your permission."}],"media":{"kind":"none","url":"","caption":"","embed":null},"details":[{"title":"Is it filmed?","text":"Talks are filmed only where a parent has given permission — recorded at registration and asked again for each individual session."},{"title":"Who is it for?","text":"Children in Years 4 to 9. No prior public speaking experience is expected — most start nervous."},{"title":"What does it cost?","text":"Registration is free. Any charged sessions are always stated before you commit."}],"showcase":{"on":false,"eyebrow":"","headline":"","summary":"","facts":[],"cta1":{"label":"","href":""},"cta2":{"label":"","href":""},"flip":false},"art":[],"artHero":{"svg":true,"svgWhich":"","items":[]},"artRow":{"svg":true,"svgWhich":"","items":[]},"blocks":[{"type":"facts","title":"","lead":"","rows":[{"label":"Ages","value":"8–18"},{"label":"Sessions","value":"13"},{"label":"Group size","value":"20–30"},{"label":"Filmed","value":"only with consent"},{"label":"Cost","value":"free"}]},{"type":"journey","title":"From signing up to being heard","lead":"Seven steps. Only one of them costs anything, and only if you want a seat in the room.","rows":[{"title":"Register with Sparks Academy","text":"Two minutes. Your child's name, and your permissions — which we ask for before anything else happens.","who":"free"},{"title":"Come to the webinars","text":"Live online sessions where they find out what a talk actually is, watch a few, and pull them apart.","who":"free"},{"title":"Find the idea","text":"Not the idea we give them. The one they already carry around and have never been asked about.","who":"your child"},{"title":"Shape it","text":"Research it so it holds. Cut it until only what matters is left. Rehearse it until the nerves are ordinary.","who":"your child"},{"title":"Say it out loud","text":"Rehearsed until the nerves are ordinary — then recorded, in one take, as their own short talk.","who":"your child"},{"title":"The panel watches every talk","text":"Our facilitators review each recording with a small panel. Some are chosen to go further.","who":"we do this"},{"title":"The chosen talks are shared","text":"Published on our channel, and the strongest submitted to TED-Ed's own team for review — with your written permission, and never without it.","who":"free"}]},{"type":"routes","title":"Two ways to be heard","lead":"Most children do both. Neither happens without your permission.","rows":[{"title":"Recorded & published","blurb":"They give the talk once, properly, to a camera.","steps":"Recorded with us in one take, Watched by the facilitator panel, Chosen talks published on our channel, The strongest submitted to TED-Ed","note":"TED-Ed decides what it features — we can submit, we cannot promise. And nothing goes online without a separate written yes for that specific talk, which you can withdraw later."},{"title":"Live, on a stage","blurb":"An evening in a hall, with an audience, chairs and a microphone.","steps":"Open to every child in the group, Family and friends in the room, Filmed only where you have said yes","note":"Seats cost £5 towards the hall. Free tickets are always available, and we will not ask why."}]},{"type":"ledger","title":"Where a £5 seat goes","lead":"Taking part is free and always will be — TED-Ed requires it. The stage night has a hall to pay for, and it runs at cost.","rows":[{"label":"Hall & chairs","percent":"52"},{"label":"Filming & printing","percent":"24"},{"label":"The next run","percent":"24"}]}],"ctaLabel":"Register for the talks","ctaHref":"/ted-ed#register","groupByProvider":false,"pageCustomMode":"full","custom":{"html":"<style>\n/* TED-Ed Student Talks — home-page section. Same shape and palette as the\n   PREP, Flourish, Mocks and Olympiad cards; gold is this programme's accent. */\n.sx{--pa:#C98A00;position:relative;padding:80px 4vw;overflow:hidden;\n  font:400 15px/1.8 'Open Sans','Segoe UI',system-ui,sans-serif;color:#6b7280}\n.sx *{box-sizing:border-box}\n.sx h2{font-family:'Poppins',sans-serif;font-weight:800;color:#1b1442;line-height:1.15;\n  margin:0;font-size:30px;letter-spacing:.04em}\n.sx p{margin:0}\n\n.te-head{max-width:1240px;margin:0 auto 22px}\n.sx-row{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;\n  gap:40px;align-items:stretch}\n.sx-copy,.sx-art{display:flex;flex-direction:column}\n\n\n/* ---------- left: what it is ---------- */\n.te-card{background:#fff;border:1px solid #e9e6f5;border-radius:22px;padding:26px 28px;\n  box-shadow:0 18px 44px rgba(27,20,66,.07)}\n.te-list{list-style:none;margin:0;padding:0;display:grid;gap:15px}\n/* the bullet and ONE span are the only grid children; a loose <b> would\n   otherwise become a grid item of its own and drop to the next row */\n.te-list li{display:grid;grid-template-columns:11px 1fr;gap:14px;align-items:start}\n.te-list li::before{content:\"\";width:11px;height:11px;border-radius:4px;margin-top:9px;\n  background:var(--pa);opacity:.9}\n.te-list li > span{font-size:1rem;line-height:1.65;color:#4b5563}\n.te-list b{color:#1b1442;font-weight:700}\n.te-free{display:inline-block;background:#FFF4D6;color:#8a6100;border-radius:999px;\n  padding:1px 10px;font-weight:700}\n\n.te-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}\n.te-btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none;\n  font:700 15px/1 'Poppins',sans-serif;padding:17px 32px;border-radius:999px;\n  transition:transform .15s,box-shadow .15s,background-position .35s}\n.te-go{color:#fff;background:linear-gradient(90deg,#5B2AD6,#C42BB0);background-size:180% 100%;\n  box-shadow:0 10px 26px rgba(91,42,214,.28)}\n.te-go:hover{background-position:95% 0;transform:translateY(-2px)}\n.te-ghost{background:#fff;color:#1b1442;box-shadow:inset 0 0 0 2px #e5e2f0}\n.te-ghost:hover{box-shadow:inset 0 0 0 2px var(--pa);color:var(--pa);transform:translateY(-2px)}\n\n/* ---------- right: the microphone ---------- */\n.te-panel{background:#fff;border:1px solid #e9e6f5;border-radius:22px;padding:24px 28px 26px;\n  box-shadow:0 18px 44px rgba(27,20,66,.07);display:flex;flex-direction:column}\n.te-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}\n.te-panel-head b{font:700 1.05rem/1 'Poppins',sans-serif;color:#1b1442}\n.te-tag{font:500 .74rem/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--pa)}\n.te-panel svg{display:block;width:100%;height:auto;border-radius:14px}\n.te-note{margin-top:16px;border-radius:14px;padding:14px 18px;\n  background:#FFF8E6;color:#7a5a12;font-size:.95rem}\n.te-note b{color:#8a6100;font-weight:700}\n\n/* ---------- the stage ----------\n   Lifted whole from the programme page, animation and all. Nothing that moves\n   carries a transform attribute as well: a CSS transform replaces the\n   attribute rather than adding to it, which is how a positioned group ends up\n   flung to the origin. */\n.pop{opacity:0;transform-box:fill-box;transform-origin:center}\n.sx.go .pop{animation:te-pop .55s var(--d,0s) cubic-bezier(.2,1.5,.4,1) both}\n@keyframes te-pop{from{opacity:0;transform:scale(.5)}to{opacity:var(--o,1);transform:none}}\n\n/* the beam drops in, then never sits perfectly still */\n.beam-g{opacity:0}\n.sx.go .beam-g{animation:te-beam 1.1s .35s ease-out both, te-flicker 7s 1.5s ease-in-out infinite}\n@keyframes te-beam{from{opacity:0;transform:translateY(-16px) scaleY(.8)}to{opacity:1;transform:none}}\n@keyframes te-flicker{0%,100%{opacity:.92}44%{opacity:1}72%{opacity:.85}}\n\n/* dust in the light */\n.mote{opacity:0}\n.sx.go .mote{animation:te-mote var(--dur,9s) var(--d,0s) linear infinite}\n@keyframes te-mote{0%{opacity:0;transform:translateY(0)}14%{opacity:.9}100%{opacity:0;transform:translateY(-120px)}}\n\n/* a voice */\n.vbar{transform-box:fill-box;transform-origin:center}\n.sx.go .vbar{animation:te-pop .4s var(--d,0s) ease both, te-talk 1.15s calc(var(--d,0s) + .4s) ease-in-out infinite}\n@keyframes te-talk{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}\n\n/* the room lights up as the talk lands, then applauds: a ripple down the row\n   every six seconds, the only thing on the picture that answers back */\n.head{opacity:0;transform-box:fill-box;transform-origin:center}\n.sx.go .head{animation:te-lightup .9s var(--d,0s) ease forwards,\n  te-applaud 6s calc(var(--d,0s) + 1.4s) ease-in-out infinite}\n@keyframes te-lightup{to{opacity:.55}}\n@keyframes te-applaud{0%,72%,100%{opacity:.55;transform:none}\n  80%{opacity:1;transform:translateY(-4px)}88%{opacity:.7;transform:none}}\n\n/* ---------- what the eight sessions do ---------- */\n.te-inc{max-width:1240px;margin:56px auto 0}\n.te-kicker{font:800 1.2rem/1.2 'JetBrains Mono',monospace;letter-spacing:.18em;\n  text-transform:uppercase;color:#D22CB2;text-align:center;margin:0}\n.te-inc h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.6rem;color:#1b1442;\n  text-align:center;margin:10px 0 26px}\n.te-inc h3 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;\n  background:linear-gradient(90deg,#3F27BD,#D22CB2);-webkit-background-clip:text;\n  background-clip:text;color:transparent}\n\n.te-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}\n.te-item{background:#fff;border:1px solid #e9e6f5;border-radius:20px;padding:20px 22px;\n  box-shadow:0 10px 30px rgba(27,20,66,.07);\n  opacity:0;transform:translateY(14px);\n  transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}\n.sx.go .te-item{opacity:1;transform:none}\n.sx.go .te-item:nth-child(2){transition-delay:.07s}\n.sx.go .te-item:nth-child(3){transition-delay:.14s}\n.sx.go .te-item:nth-child(4){transition-delay:.21s}\n.sx.go .te-item:nth-child(5){transition-delay:.28s}\n.sx.go .te-item:nth-child(6){transition-delay:.35s}\n.te-badge{display:flex;align-items:center;justify-content:center;width:42px;height:42px;\n  border-radius:12px;background:#FFF4D6;font:700 .82rem/1 'JetBrains Mono',monospace;\n  color:#8a6100;margin-bottom:15px}\n.te-item b{display:block;color:#1b1442;font:600 1.04rem/1.3 'Open Sans',sans-serif;margin-bottom:6px}\n.te-item p{font-size:.92rem;line-height:1.6}\n\n@media (max-width:980px){ .te-grid{grid-template-columns:repeat(2,1fr)} }\n@media (max-width:900px){ .sx-row{grid-template-columns:1fr;gap:26px} }\n@media (max-width:620px){ .te-grid{grid-template-columns:1fr} }\n@media (prefers-reduced-motion:reduce){\n  .sx *{animation:none!important;transition:none!important}\n  .pop,.beam-g,.vbar,.head,.te-item{opacity:1!important;transform:none!important}\n  .mote{display:none}\n}\n</style>\n\n<div class=\"sx sx-ted-ed\" style=\"--pa:#C98A00\">\n  <div class=\"te-head\"><h2>TED-Ed Student Talks</h2></div>\n  <div class=\"sx-row\">\n\n    <div class=\"sx-copy\">\n      <div class=\"te-card\">\n        <ul class=\"te-list\">\n          <li><span>We are a <b>TED-Ed Student Talks Educator and Organiser</b>. The programme is\n            run to TED-Ed's own structure.</span></li>\n          <li><span>Register for a <span class=\"te-free\">free online session</span>. A group\n            usually runs to eight or twelve sessions.</span></li>\n          <li><span>It starts with a vague idea and ends with a finished talk.</span></li>\n          <li><span>Most of the work is thinking. The speaking comes after the child knows what\n            they actually want to say.</span></li>\n          <li><span>Every child has one idea worth sharing. The sessions are about finding it\n            and making it clear.</span></li>\n          <li><span>At the end, every student may film their talk and submit it. A panel judges\n            the submissions, and a selected talk is <b>published on the TED-Ed site</b>.</span></li>\n          <li><span>Open to any child on our courses, and to children who are not.</span></li>\n        </ul>\n      </div>\n      <div class=\"te-ctas\">\n        <a class=\"te-btn te-go\" href=\"/ted-ed\">Register free →</a>\n        <a class=\"te-btn te-ghost\" href=\"/ted-ed#how\">How a group runs</a>\n      </div>\n    </div>\n\n    <div class=\"sx-art\">\n      <div class=\"te-panel\">\n        <div class=\"te-panel-head\"><b>From an idea to a talk</b><span class=\"te-tag\">SPEAK · THINK · INSPIRE</span></div>\n\n        <svg viewBox=\"0 0 460 260\" role=\"img\" aria-label=\"A child speaking in a spotlight to an audience\">\n          <defs>\n            <!-- v2: the stage was near-black (#140F2E) and read as a hole in a\n                 white page. It is now a deep violet that still lets a spotlight\n                 be the brightest thing, with a warm wash on the floor so the\n                 room has depth rather than just darkness. -->\n            <linearGradient id=\"ted-ed-stageGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"#332A6B\"/>\n              <stop offset=\"58%\" stop-color=\"#251C55\"/>\n              <stop offset=\"100%\" stop-color=\"#1B1442\"/>\n            </linearGradient>\n            <radialGradient id=\"ted-ed-wash\" cx=\"50%\" cy=\"82%\" r=\"62%\">\n              <stop offset=\"0%\" stop-color=\"#FFC46B\" stop-opacity=\".30\"/>\n              <stop offset=\"100%\" stop-color=\"#FFC46B\" stop-opacity=\"0\"/>\n            </radialGradient>\n            <linearGradient id=\"ted-ed-beamGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"#FFE3B0\" stop-opacity=\".72\"/>\n              <stop offset=\"55%\" stop-color=\"#FFC46B\" stop-opacity=\".26\"/>\n              <stop offset=\"100%\" stop-color=\"#FFC46B\" stop-opacity=\"0\"/>\n            </linearGradient>\n            <radialGradient id=\"ted-ed-pool\">\n              <stop offset=\"0%\" stop-color=\"#FFE3B0\" stop-opacity=\".85\"/>\n              <stop offset=\"55%\" stop-color=\"#FFC46B\" stop-opacity=\".35\"/>\n              <stop offset=\"100%\" stop-color=\"#FFC46B\" stop-opacity=\"0\"/>\n            </radialGradient>\n            <filter id=\"ted-ed-soft\"><feGaussianBlur stdDeviation=\"7\"/></filter>\n          </defs>\n\n          <rect x=\"0\" y=\"0\" width=\"460\" height=\"260\" fill=\"url(#ted-ed-stageGrad)\"/>\n          <rect x=\"0\" y=\"0\" width=\"460\" height=\"260\" fill=\"url(#ted-ed-wash)\"/>\n          <!-- the back wall, one shade lighter, so the figure has something to\n               stand against instead of floating in a void -->\n          <ellipse cx=\"230\" cy=\"150\" rx=\"210\" ry=\"96\" fill=\"#453A88\" opacity=\".38\" filter=\"url(#ted-ed-soft)\"/>\n\n          <g class=\"beam-g\" style=\"transform-origin:230px 0\">\n            <polygon points=\"230,-24 146,198 314,198\" fill=\"url(#ted-ed-beamGrad)\" filter=\"url(#ted-ed-soft)\"/>\n            <ellipse cx=\"230\" cy=\"198\" rx=\"104\" ry=\"22\" fill=\"url(#ted-ed-pool)\"/>\n          </g>\n\n          <circle class=\"mote\" style=\"--d:0s;--dur:9s\"   cx=\"212\" cy=\"176\" r=\"2\"   fill=\"#FFF2D6\"/>\n          <circle class=\"mote\" style=\"--d:2.1s;--dur:11s\" cx=\"246\" cy=\"188\" r=\"1.5\" fill=\"#FFF2D6\"/>\n          <circle class=\"mote\" style=\"--d:4.4s;--dur:8s\"  cx=\"228\" cy=\"168\" r=\"1.8\" fill=\"#FFF2D6\"/>\n          <circle class=\"mote\" style=\"--d:6.2s;--dur:12s\" cx=\"258\" cy=\"182\" r=\"1.3\" fill=\"#FFF2D6\"/>\n\n          <!-- the speaker, with a warm rim down the lit side so the silhouette\n               reads as a person rather than a smudge -->\n          <g class=\"pop\" style=\"--d:.6s\">\n            <circle cx=\"230\" cy=\"140\" r=\"14\" fill=\"#150E33\"/>\n            <path d=\"M210 198c0-16 9-27 20-27s20 11 20 27z\" fill=\"#150E33\"/>\n            <path d=\"M239 130a14 14 0 0 1 0 20\" fill=\"none\" stroke=\"#FFC46B\" stroke-width=\"2.4\"\n              stroke-linecap=\"round\" opacity=\".85\"/>\n            <path d=\"M243 176c4 6 6 13 6 22\" fill=\"none\" stroke=\"#FFC46B\" stroke-width=\"2.2\"\n              stroke-linecap=\"round\" opacity=\".6\"/>\n          </g>\n          <g class=\"pop\" style=\"--d:.75s\">\n            <path d=\"M258 198v-44M258 154l-7-7\" stroke=\"#0E0827\" stroke-width=\"3\" stroke-linecap=\"round\" fill=\"none\"/>\n            <circle cx=\"249\" cy=\"145\" r=\"6\" fill=\"#0E0827\"/>\n            <circle cx=\"249\" cy=\"145\" r=\"6\" fill=\"none\" stroke=\"#FFC46B\" stroke-width=\"1.6\" opacity=\".7\"/>\n          </g>\n\n          <g fill=\"#FFD79A\">\n            <rect class=\"vbar\" style=\"--d:.95s\" x=\"274\" y=\"134\" width=\"4\" height=\"28\" rx=\"2\"/>\n            <rect class=\"vbar\" style=\"--d:1.05s\" x=\"284\" y=\"127\" width=\"4\" height=\"42\" rx=\"2\"/>\n            <rect class=\"vbar\" style=\"--d:1.15s\" x=\"294\" y=\"136\" width=\"4\" height=\"24\" rx=\"2\"/>\n            <rect class=\"vbar\" style=\"--d:1.25s\" x=\"304\" y=\"123\" width=\"4\" height=\"50\" rx=\"2\"/>\n            <rect class=\"vbar\" style=\"--d:1.35s\" x=\"314\" y=\"134\" width=\"4\" height=\"28\" rx=\"2\"/>\n          </g>\n\n          <!-- the audience, in the room: heads AND shoulders, on a foreground\n               band, lit enough to be seen from the back of the hall -->\n          <rect x=\"0\" y=\"214\" width=\"460\" height=\"46\" fill=\"#150E33\" opacity=\".55\"/>\n          <g fill=\"#8C82CC\" opacity=\".85\">\n            <g class=\"head\" style=\"--d:1.1s\"><circle cx=\"46\" cy=\"236\" r=\"13\"/>\n              <path d=\"M22 260c0-13 11-23 24-23s24 10 24 23z\"/></g>\n            <g class=\"head\" style=\"--d:1.25s\"><circle cx=\"106\" cy=\"242\" r=\"15\"/>\n              <path d=\"M79 260c0-14 12-25 27-25s27 11 27 25z\"/></g>\n            <g class=\"head\" style=\"--d:1.4s\"><circle cx=\"164\" cy=\"238\" r=\"12\"/>\n              <path d=\"M142 260c0-12 10-22 22-22s22 10 22 22z\"/></g>\n            <g class=\"head\" style=\"--d:1.55s\"><circle cx=\"300\" cy=\"240\" r=\"14\"/>\n              <path d=\"M275 260c0-13 11-24 25-24s25 11 25 24z\"/></g>\n            <g class=\"head\" style=\"--d:1.7s\"><circle cx=\"360\" cy=\"236\" r=\"12\"/>\n              <path d=\"M338 260c0-12 10-22 22-22s22 10 22 22z\"/></g>\n            <g class=\"head\" style=\"--d:1.85s\"><circle cx=\"416\" cy=\"242\" r=\"15\"/>\n              <path d=\"M389 260c0-14 12-25 27-25s27 11 27 25z\"/></g>\n          </g>\n        </svg>\n\n        <p class=\"te-note\"><b>It ends with a talk, filmed.</b> Every session builds towards one\n          piece the child is ready to present.</p>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- ---------- what the eight sessions do ---------- -->\n  <div class=\"te-inc\">\n    <p class=\"te-kicker\">How a talk gets made</p>\n    <h3>From a vague thought to <em>something worth hearing</em></h3>\n\n    <div class=\"te-grid\">\n      <article class=\"te-item\">\n        <span class=\"te-badge\">1</span>\n        <b>Find the idea</b>\n        <p>Not a topic handed out, but the thing this particular child already cares about\n          and has not said out loud yet.</p>\n      </article>\n      <article class=\"te-item\">\n        <span class=\"te-badge\">2</span>\n        <b>Make it one idea</b>\n        <p>Most first attempts are three talks at once. The work is deciding which one it\n          actually is.</p>\n      </article>\n      <article class=\"te-item\">\n        <span class=\"te-badge\">3</span>\n        <b>Build the case</b>\n        <p>Reasons, examples, and the one story that makes a stranger care.</p>\n      </article>\n      <article class=\"te-item\">\n        <span class=\"te-badge\">4</span>\n        <b>Say it out loud</b>\n        <p>Pace, pauses, and what to do with your hands. Practised in front of the group,\n          which is the hard part.</p>\n      </article>\n      <article class=\"te-item\">\n        <span class=\"te-badge\">5</span>\n        <b>Take the questions</b>\n        <p>Being asked something you had not thought of, and answering it without falling\n          apart.</p>\n      </article>\n      <article class=\"te-item\">\n        <span class=\"te-badge\">★</span>\n        <b>Give it, then send it in</b>\n        <p>The talk is filmed and submitted. A panel judges the submissions, and a selected\n          talk is published on the TED-Ed site.</p>\n      </article>\n    </div>\n\n    <div class=\"te-ctas\">\n      <a class=\"te-btn te-go\" href=\"/ted-ed\">Register free →</a>\n      <a class=\"te-btn te-ghost\" href=\"/ted-ed#how\">How a group runs</a>\n    </div>\n  </div>\n</div>\n\n<script>\n(function () {\n  /* Scoped to THIS block, and by CLASS rather than by id: a block's ids can be\n     namespaced when it is placed on a page, so getElementById is the one thing\n     a pasted block should never rely on. */\n  var root = document.currentScript && document.currentScript.closest(\".sx\");\n  if (!root) { var all = document.querySelectorAll(\".sx.sx-ted-ed\"); root = all[all.length - 1]; }\n  if (!root || root.dataset.on) return;\n  root.dataset.on = \"1\";\n\n  var go = function () { root.classList.add(\"go\"); };\n  /* threshold 0: a section taller than the window never reaches a percentage */\n  if (!(\"IntersectionObserver\" in window)) return go();\n  var io = new IntersectionObserver(function (es) {\n    es.forEach(function (e) { if (e.isIntersecting) { go(); io.disconnect(); } });\n  }, { threshold: 0, rootMargin: \"0px 0px -14% 0px\" });\n  io.observe(root);\n})();\n</script>","mode":"section","fullWidth":false},"pageCustomHtml":"<!-- ============================================================\n     TED-Ed Student Talks — the programme's own page at /ted-ed\n     Paste into: Programmes → TED-Ed → box ② (the programme's own page)\n     Mode:       The whole page — hide the hero too\n     ------------------------------------------------------------\n     Refined from the mockup for this slot:\n       · the dummy \"Autumn term dates\" section is gone — the site renders the\n         real sessions and the registration form under this block, from\n         teded_sessions, and dates typed in here would be wrong within a term\n       · both calls to action point at #teded-register, which is that block\n       · the sign-off line is gone; the site has a footer\n       · the stage is a deep violet rather than near-black, with a back wall,\n         a brighter beam and a rim light on the speaker — at #140F2E it read as\n         a hole punched in a white page\n       · the audience have shoulders now, and sit at 85% rather than 55%\n       · the reveal observers are guarded and use threshold 0\n     ============================================================ -->\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Open+Sans:wght@400;600;700&family=Playfair+Display:ital,wght@1,600;1,700&family=JetBrains+Mono:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n<style>\n:root{\n  /* v2: the house lights are down, not off. #140F2E read as a hole punched in\n     a white page; a deep violet still lets the spotlight be the brightest\n     thing in the frame while giving the room some depth. */\n  --stage:#241C55;\n  --stage-2:#332A6B;\n  --stage-deep:#1B1442;\n  --beam:#FFC46B;         /* the spotlight — Sparks' own warm accent */\n  --beam-soft:#FFE3B0;\n  --indigo:#3F27BD;       /* Sparks gradient, start */\n  --magenta:#D22CB2;      /* Sparks gradient, end */\n  --ink:#181433;\n  --grey:#6A7090;\n  --line:#E9E7F4;\n  --paper:#FBFAFF;\n  --r:16px;\n  --display:'Poppins',system-ui,sans-serif;\n  --script:'JetBrains Mono',ui-monospace,Consolas,monospace;\n  --serif:'Playfair Display',Georgia,serif;\n}\n*{box-sizing:border-box}\nbody{\n  margin:0;background:#fff;color:var(--grey);\n  font:400 15px/1.8 'Open Sans','Segoe UI',system-ui,sans-serif;\n  -webkit-font-smoothing:antialiased;overflow-x:hidden;\n}\nh1,h2,h3{font-family:var(--display);color:var(--ink);line-height:1.12;margin:0;font-weight:800;letter-spacing:-.02em}\np{margin:0}\na{color:inherit}\n\n/* stage directions — the page's structural voice */\n.cue{\n  font-family:var(--script);font-size:.72rem;font-weight:500;letter-spacing:.18em;\n  text-transform:uppercase;color:var(--grey);\n}\n.cue-beam{color:var(--beam)}\n.wrap{max-width:1080px;margin:0 auto;padding:0 24px}\n\n/* ============ 1 · THE STAGE ============ */\n.stage{\n  position:relative;color:#fff;overflow:hidden;\n  background:\n    radial-gradient(120% 90% at 50% 100%, rgba(255,196,107,.20), transparent 62%),\n    linear-gradient(180deg, var(--stage-2) 0%, var(--stage) 58%, var(--stage-deep) 100%);\n  min-height:96vh;display:flex;align-items:center;\n}\n.stage::after{ /* the floor */\n  content:\"\";position:absolute;inset:auto 0 0;height:38%;\n  background:linear-gradient(180deg,transparent,rgba(255,196,107,.07) 40%,rgba(255,196,107,.13));\n  pointer-events:none;\n}\n.stage-art{position:absolute;inset:0;width:100%;height:100%}\n.stage-inner{position:relative;z-index:3;width:100%;padding:90px 0 120px;text-align:center}\n.stage h1{\n  color:#fff;font-size:clamp(2.6rem,7.2vw,5.2rem);margin:14px 0 0;\n}\n.stage h1 em{\n  display:block;font-family:var(--serif);font-style:italic;font-weight:700;\n  background:linear-gradient(92deg,var(--beam),#FF9ED8 55%,#B9A6FF);\n  -webkit-background-clip:text;background-clip:text;color:transparent;\n}\n.stage-sub{margin:22px auto 0;max-width:30ch;color:#C9C4E8;font-size:1.05rem}\n.stage-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}\n.btn{\n  display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;\n  font:600 .98rem/1 var(--display);padding:17px 30px;border-radius:999px;text-decoration:none;\n  transition:transform .18s ease,box-shadow .18s ease;\n}\n.btn-go{background:linear-gradient(92deg,var(--indigo),var(--magenta));color:#fff;box-shadow:0 12px 34px rgba(210,44,178,.42)}\n.btn-go:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(210,44,178,.5)}\n.btn-quiet{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.32)}\n.btn-quiet:hover{border-color:var(--beam);color:var(--beam)}\n.stage-foot{\n  position:absolute;left:0;right:0;bottom:26px;z-index:3;text-align:center;\n  animation:bob 2.6s ease-in-out infinite;\n}\n@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}\n\n/* dust in the beam */\n.mote{fill:var(--beam-soft);opacity:0;animation:rise linear infinite}\n@keyframes rise{\n  0%{opacity:0;transform:translateY(0)}\n  12%{opacity:.85}\n  100%{opacity:0;transform:translateY(-190px)}\n}\n/* the child breathes */\n.speaker{animation:breathe 4.4s ease-in-out infinite;transform-origin:300px 330px}\n@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.014)}}\n/* the beam flickers, barely */\n.beam{animation:flicker 7s ease-in-out infinite}\n@keyframes flicker{0%,100%{opacity:.92}42%{opacity:1}70%{opacity:.86}}\n/* audience heads light up one by one */\n.head{opacity:0;animation:lightup .9s ease forwards}\n@keyframes lightup{to{opacity:.5}}\n/* the voice, live */\n.vbar{animation:talk 1.15s ease-in-out infinite;transform-origin:center}\n@keyframes talk{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}\n\n/* ============ 2 · THE THREAD ============ */\n.thread-band{position:relative;background:#fff}\n.thread{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(980px,94vw);height:100%;pointer-events:none;z-index:0}\n.thread path{\n  fill:none;stroke:url(#threadGrad);stroke-width:3.5;stroke-linecap:round;\n  stroke-dasharray:1;stroke-dashoffset:1;\n}\n\n/* ============ the journey: numbered stops down the thread ============ */\n.stop{\n  display:grid;grid-template-columns:64px 1fr auto;gap:22px;align-items:start;\n  padding:24px 26px;background:#fff;border:1px solid var(--line);border-radius:18px;\n  margin:0 0 14px;box-shadow:0 10px 28px rgba(24,20,51,.05);\n  opacity:0;transform:translateY(22px);\n  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1),border-color .2s ease;\n}\n.stop.in{opacity:1;transform:none}\n.stop:hover{border-color:var(--magenta)}\n.stop .no{\n  font:700 1.5rem/1 var(--script);color:transparent;\n  background:linear-gradient(160deg,var(--indigo),var(--magenta));\n  -webkit-background-clip:text;background-clip:text;letter-spacing:-.04em;\n}\n.stop b{display:block;font:700 1.15rem/1.3 var(--display);color:var(--ink);margin-bottom:5px}\n.stop p{font-size:.95rem;max-width:52ch}\n.tag{\n  font:500 .66rem/1 var(--script);letter-spacing:.14em;text-transform:uppercase;\n  padding:8px 12px;border-radius:999px;white-space:nowrap;\n  background:#EAF7F0;color:#12795A;border:1px solid #BFE7D6;\n}\n.tag-cost{background:#FFF4E4;color:#8A5A00;border-color:#FFE0B0}\n.tag-them{background:#F1EEFC;color:#4034A8;border-color:#DCD5F6}\n.stop-lead{text-align:center;max-width:36ch;margin:0 auto 40px}\n\n/* ============ where the talk ends up ============ */\n.fork{padding:96px 0;background:#fff}\n.fork h2{font-size:clamp(1.8rem,3.8vw,2.6rem);text-align:center;margin-bottom:10px}\n.fork-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}\n.route{\n  border-radius:22px;padding:30px 28px 32px;color:#fff;position:relative;overflow:hidden;\n  min-height:100%;\n}\n.route-video{background:linear-gradient(150deg,#241B57,#3F27BD)}\n.route-live{background:linear-gradient(150deg,#8A1E86,#D22CB2)}\n.route svg{display:block;width:100%;height:auto;margin-bottom:20px}\n.route b{display:block;font:800 1.35rem/1.25 var(--display);color:#fff;margin-bottom:8px}\n.route p{color:#E4DDF7;font-size:.95rem;margin-bottom:14px}\n.route ol{margin:0;padding:0;list-style:none;counter-reset:r}\n.route li{\n  counter-increment:r;position:relative;padding:9px 0 9px 34px;\n  color:#fff;font-size:.92rem;border-top:1px solid rgba(255,255,255,.16);\n}\n.route li:first-child{border-top:0}\n.route li::before{\n  content:counter(r,decimal-leading-zero);position:absolute;left:0;top:11px;\n  font:500 .72rem/1 var(--script);color:var(--beam);letter-spacing:.06em;\n}\n.route .honest{\n  margin-top:16px;font-size:.84rem;color:#CFC5EE;border-top:1px solid rgba(255,255,255,.16);padding-top:14px;\n}\n\n/* ============ acts ============ */\n.acts{position:relative;z-index:1;padding:110px 0 40px}\n.act{\n  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;\n  margin:0 0 104px;opacity:0;transform:translateY(34px);\n  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);\n}\n.act.in{opacity:1;transform:none}\n.act:nth-child(even) .act-art{order:-1}\n.act h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:10px 0 12px}\n.act p{max-width:34ch}\n.act-art{\n  background:var(--paper);border:1px solid var(--line);border-radius:22px;\n  padding:26px;box-shadow:0 18px 44px rgba(24,20,51,.07);\n}\n.act-art svg{display:block;width:100%;height:auto}\n\n/* act art motion, started when scrolled into view */\n.in .idea{animation:pop .7s cubic-bezier(.2,1.4,.4,1) forwards}\n.in .idea-dim{animation:dim .8s ease forwards}\n@keyframes pop{to{transform:scale(1);opacity:1}}\n@keyframes dim{to{opacity:.22}}\n.in .draw{animation:draw 1.5s ease forwards}\n@keyframes draw{to{stroke-dashoffset:0}}\n.in .card-a{animation:tidy .9s cubic-bezier(.2,.8,.3,1) .15s forwards}\n.in .card-b{animation:tidy .9s cubic-bezier(.2,.8,.3,1) .3s forwards}\n.in .card-c{animation:tidy .9s cubic-bezier(.2,.8,.3,1) .45s forwards}\n@keyframes tidy{to{transform:none}}\n.in .clap{animation:clap 1.1s ease forwards}\n@keyframes clap{0%{opacity:0;transform:translateY(8px) scale(.7)}60%{opacity:1;transform:translateY(-4px) scale(1.1)}100%{opacity:1;transform:none}}\n\n/* ============ 3 · THE RUN SHEET (13) ============ */\n.run{background:linear-gradient(180deg,var(--stage) 0%,var(--stage-deep) 100%);color:#fff;padding:96px 0;position:relative;overflow:hidden}\n.run h2{color:#fff;font-size:clamp(1.9rem,4vw,2.8rem);text-align:center}\n.run-lead{text-align:center;color:#C9C4E8;margin:14px auto 40px;max-width:34ch}\n.sheet{display:grid;grid-template-columns:repeat(13,1fr);gap:10px;max-width:820px;margin:0 auto}\n.step{\n  aspect-ratio:1/1.5;border-radius:8px;background:rgba(255,255,255,.07);\n  border:1px solid rgba(255,255,255,.14);position:relative;overflow:hidden;\n  font:500 .62rem/1 var(--script);color:#fff;\n  display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;\n  opacity:.35;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;\n}\n.run.in .step{opacity:1;transform:none}\n.step::before{\n  content:\"\";position:absolute;inset:auto 0 0;height:0;\n  background:linear-gradient(180deg,rgba(255,196,107,.25),rgba(255,196,107,.6));\n  transition:height .6s cubic-bezier(.3,.8,.3,1);\n}\n.run.in .step::before{height:var(--h)}\n.step:last-child{border-color:var(--beam);background:rgba(255,196,107,.16)}\n.sheet-legend{display:flex;justify-content:space-between;max-width:820px;margin:14px auto 0}\n\n/* ============ 4 · THE RECORDING ============ */\n.trust{padding:104px 0;background:#fff}\n.trust-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}\n.trust h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:14px}\n.gate{\n  display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:14px;\n  border:1px solid var(--line);background:var(--paper);margin-top:14px;\n}\n.gate b{color:var(--ink);font-weight:600;display:block;font-size:.95rem}\n.gate span{font-size:.9rem}\n.tick{\n  flex:0 0 26px;height:26px;border-radius:999px;display:grid;place-items:center;\n  background:linear-gradient(92deg,var(--indigo),var(--magenta));color:#fff;font-size:.8rem;\n}\n\n/* ============ 4b · OUR PART ============ */\n.part{padding:100px 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n.part h2{font-size:clamp(1.8rem,3.8vw,2.6rem);text-align:center;margin-bottom:10px}\n.part-lead{text-align:center;max-width:38ch;margin:0 auto 46px}\n.part-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}\n.job{\n  background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 24px 28px;\n  box-shadow:0 14px 36px rgba(24,20,51,.06);\n}\n.job svg{display:block;width:100%;height:auto;margin-bottom:18px}\n.job b{display:block;font:700 1.12rem/1.3 var(--display);color:var(--ink);margin-bottom:7px}\n.job p{font-size:.94rem}\n.job .tagfree{\n  display:inline-block;margin-top:14px;font:500 .68rem/1 var(--script);letter-spacing:.14em;\n  text-transform:uppercase;padding:7px 11px;border-radius:999px;\n  background:#EAF7F0;color:#12795A;border:1px solid #BFE7D6;\n}\n.job .tagcost{background:#FFF4E4;color:#8A5A00;border-color:#FFE0B0}\n\n/* ============ 5 · THE PRICE ============ */\n.free{\n  background:linear-gradient(120deg,var(--indigo),var(--magenta));color:#fff;\n  padding:92px 0;text-align:center;position:relative;overflow:hidden;\n}\n.free .zero{\n  font-family:var(--display);font-weight:800;letter-spacing:-.04em;\n  font-size:clamp(4.5rem,17vw,11rem);line-height:.86;margin:8px 0 0;\n}\n.free .zero em{font-family:var(--serif);font-style:italic;font-weight:700;font-size:.42em;letter-spacing:0}\n.free p{max-width:40ch;margin:22px auto 0;color:#F3E9FF;font-size:1rem}\n\n/* the ledger — where a ticket goes */\n.ledger{max-width:760px;margin:44px auto 0;text-align:left}\n.bar{display:flex;height:20px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.2)}\n.bar span{display:block;height:100%}\n.bar-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;justify-content:center}\n.bar-key i{\n  font:500 .74rem/1 var(--script);font-style:normal;letter-spacing:.06em;color:#F3E9FF;\n  display:inline-flex;align-items:center;gap:8px;\n}\n.bar-key i::before{content:\"\";width:11px;height:11px;border-radius:3px;background:var(--k)}\n.note-free{\n  margin:34px auto 0;max-width:44ch;padding:16px 20px;border-radius:14px;\n  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);\n  color:#fff;font-size:.94rem;\n}\n\n/* ============ 6 · DATES ============ */\n.dates{padding:96px 0}\n.dates h2{font-size:clamp(1.8rem,3.6vw,2.4rem);margin-bottom:8px}\n.date-list{margin-top:28px;display:grid;gap:12px}\n.date{\n  display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:center;\n  padding:18px 22px;border:1px solid var(--line);border-radius:14px;background:#fff;\n  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;\n}\n.date:hover{border-color:var(--magenta);transform:translateX(4px);box-shadow:0 12px 30px rgba(24,20,51,.07)}\n.date b{color:var(--ink);font-weight:600}\n.date .when{font-family:var(--script);font-size:.82rem;color:var(--ink)}\n.pill{font:500 .72rem/1 var(--script);letter-spacing:.08em;text-transform:uppercase;\n  padding:7px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}\n\n/* ============ 7 · CLOSE ============ */\n.close{background:linear-gradient(180deg,var(--stage-deep) 0%,var(--stage) 100%);color:#fff;padding:100px 0 84px;text-align:center;position:relative;overflow:hidden}\n.close h2{color:#fff;font-size:clamp(2rem,5vw,3.2rem)}\n.close h2 em{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--beam)}\n.close p{color:#C9C4E8;max-width:34ch;margin:18px auto 30px}\n.facilitator{\n  margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);\n  color:#9A92C4;font-size:.82rem;max-width:56ch;margin-inline:auto;\n}\n\n/* reveal utility */\n.rise{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}\n.rise.in{opacity:1;transform:none}\n\n@media (max-width:860px){\n  .act,.trust-grid{grid-template-columns:1fr;gap:28px}\n  .part-grid,.fork-grid{grid-template-columns:1fr}\n  .stop{grid-template-columns:44px 1fr;gap:14px}\n  .stop .tag{grid-column:2}\n  .act:nth-child(even) .act-art{order:0}\n  .act{margin-bottom:72px}\n  .sheet{grid-template-columns:repeat(7,1fr)}\n  .date{grid-template-columns:1fr;gap:8px}\n  .thread{display:none}\n}\n@media (prefers-reduced-motion:reduce){\n  *{animation:none!important;transition:none!important}\n  .rise,.act{opacity:1;transform:none}\n  .thread path{stroke-dashoffset:0}\n  .step{opacity:1;transform:none}\n  .step::before{height:var(--h)}\n}\n\n\n/* ---- added for the programme page ----\n   The block sits in a column beside the enrolment panel, so nothing may assume\n   the full window width. */\n.wrap{max-width:min(1080px,100%)}\n.stage{border-radius:0 0 26px 26px}\n.close{border-radius:26px 26px 0 0}\n</style>\n\n<!-- ============ 1 · THE STAGE ============ -->\n<header class=\"stage\">\n  <svg class=\"stage-art\" viewBox=\"0 0 600 460\" preserveAspectRatio=\"xMidYMax slice\" aria-hidden=\"true\">\n    <defs>\n      <linearGradient id=\"beamGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n        <stop offset=\"0%\" stop-color=\"#FFE3B0\" stop-opacity=\".72\"/>\n        <stop offset=\"55%\" stop-color=\"#FFC46B\" stop-opacity=\".26\"/>\n        <stop offset=\"100%\" stop-color=\"#FFC46B\" stop-opacity=\"0\"/>\n      </linearGradient>\n      <radialGradient id=\"pool\" cx=\"50%\" cy=\"50%\">\n        <stop offset=\"0%\" stop-color=\"#FFE3B0\" stop-opacity=\".85\"/>\n        <stop offset=\"100%\" stop-color=\"#FFC46B\" stop-opacity=\"0\"/>\n      </radialGradient>\n      <filter id=\"soft\"><feGaussianBlur stdDeviation=\"7\"/></filter>\n    </defs>\n\n    <!-- the back wall, a shade lighter, so the figure stands against something -->\n    <ellipse cx=\"300\" cy=\"300\" rx=\"250\" ry=\"118\" fill=\"#453A88\" opacity=\".38\" filter=\"url(#soft)\"/>\n\n    <!-- the beam -->\n    <g class=\"beam\">\n      <polygon points=\"300,-40 196,392 404,392\" fill=\"url(#beamGrad)\" filter=\"url(#soft)\"/>\n      <ellipse cx=\"300\" cy=\"392\" rx=\"128\" ry=\"26\" fill=\"url(#pool)\"/>\n    </g>\n\n    <!-- dust -->\n    <g>\n      <circle class=\"mote\" cx=\"272\" cy=\"352\" r=\"1.7\" style=\"animation-duration:9s;animation-delay:0s\"/>\n      <circle class=\"mote\" cx=\"318\" cy=\"376\" r=\"1.2\" style=\"animation-duration:11s;animation-delay:1.4s\"/>\n      <circle class=\"mote\" cx=\"296\" cy=\"340\" r=\"1.5\" style=\"animation-duration:8s;animation-delay:3.1s\"/>\n      <circle class=\"mote\" cx=\"334\" cy=\"358\" r=\"1\"   style=\"animation-duration:12s;animation-delay:4.6s\"/>\n      <circle class=\"mote\" cx=\"258\" cy=\"384\" r=\"1.3\" style=\"animation-duration:10s;animation-delay:6.2s\"/>\n      <circle class=\"mote\" cx=\"312\" cy=\"366\" r=\"1.6\" style=\"animation-duration:9.5s;animation-delay:7.5s\"/>\n    </g>\n\n    <!-- the speaker -->\n    <g class=\"speaker\" fill=\"#0B0820\">\n      <circle cx=\"300\" cy=\"292\" r=\"17\"/>\n      <path d=\"M275 392c0-19 11-33 25-33s25 14 25 33z\"/>\n      <rect x=\"297\" y=\"318\" width=\"6\" height=\"18\" rx=\"3\"/>\n    </g>\n    <!-- the rim light: the one stroke that turns a silhouette into a person -->\n    <g fill=\"none\" stroke=\"#FFC46B\" stroke-linecap=\"round\" opacity=\".85\">\n      <path d=\"M311 283a17 17 0 0 1 0 20\" stroke-width=\"2.6\"/>\n      <path d=\"M318 360c4 8 6 19 6 32\" stroke-width=\"2.2\" opacity=\".6\"/>\n    </g>\n    <!-- mic stand -->\n    <g stroke=\"#0B0820\" stroke-width=\"3.2\" stroke-linecap=\"round\" fill=\"none\">\n      <path d=\"M332 392v-52\"/><path d=\"M332 340l-9-9\"/>\n    </g>\n    <circle cx=\"320\" cy=\"329\" r=\"6.5\" fill=\"#0B0820\"/>\n\n    <!-- the voice -->\n    <g fill=\"#FFC46B\" opacity=\".95\">\n      <rect class=\"vbar\" x=\"348\" y=\"316\" width=\"3.4\" height=\"26\" rx=\"1.7\" style=\"animation-delay:0s\"/>\n      <rect class=\"vbar\" x=\"357\" y=\"310\" width=\"3.4\" height=\"38\" rx=\"1.7\" style=\"animation-delay:.13s\"/>\n      <rect class=\"vbar\" x=\"366\" y=\"318\" width=\"3.4\" height=\"22\" rx=\"1.7\" style=\"animation-delay:.26s\"/>\n      <rect class=\"vbar\" x=\"375\" y=\"306\" width=\"3.4\" height=\"46\" rx=\"1.7\" style=\"animation-delay:.39s\"/>\n      <rect class=\"vbar\" x=\"384\" y=\"316\" width=\"3.4\" height=\"26\" rx=\"1.7\" style=\"animation-delay:.52s\"/>\n      <rect class=\"vbar\" x=\"393\" y=\"312\" width=\"3.4\" height=\"34\" rx=\"1.7\" style=\"animation-delay:.65s\"/>\n    </g>\n\n    <!-- the audience -->\n    <g fill=\"#8C82CC\" opacity=\".85\">\n      <g class=\"head\" style=\"animation-delay:.5s\"><circle cx=\"70\" cy=\"436\" r=\"15\"/><ellipse cx=\"70\" cy=\"465\" rx=\"24\" ry=\"21\"/></g>\n      <g class=\"head\" style=\"animation-delay:.7s\"><circle cx=\"122\" cy=\"446\" r=\"17\"/><ellipse cx=\"122\" cy=\"477\" rx=\"26\" ry=\"23\"/></g>\n      <g class=\"head\" style=\"animation-delay:.9s\"><circle cx=\"180\" cy=\"438\" r=\"14\"/><ellipse cx=\"180\" cy=\"466\" rx=\"23\" ry=\"20\"/></g>\n      <g class=\"head\" style=\"animation-delay:1.1s\"><circle cx=\"236\" cy=\"450\" r=\"16\"/><ellipse cx=\"236\" cy=\"480\" rx=\"25\" ry=\"22\"/></g>\n      <g class=\"head\" style=\"animation-delay:1.3s\"><circle cx=\"366\" cy=\"448\" r=\"16\"/><ellipse cx=\"366\" cy=\"478\" rx=\"25\" ry=\"22\"/></g>\n      <g class=\"head\" style=\"animation-delay:1.5s\"><circle cx=\"424\" cy=\"438\" r=\"14\"/><ellipse cx=\"424\" cy=\"466\" rx=\"23\" ry=\"20\"/></g>\n      <g class=\"head\" style=\"animation-delay:1.7s\"><circle cx=\"482\" cy=\"448\" r=\"17\"/><ellipse cx=\"482\" cy=\"479\" rx=\"26\" ry=\"23\"/></g>\n      <g class=\"head\" style=\"animation-delay:1.9s\"><circle cx=\"540\" cy=\"440\" r=\"15\"/><ellipse cx=\"540\" cy=\"469\" rx=\"24\" ry=\"21\"/></g>\n    </g>\n  </svg>\n\n  <div class=\"stage-inner wrap\">\n    <p class=\"cue cue-beam\">[ house lights down ]</p>\n    <h1>Your child has<br>something to say.<em>Let them say it.</em></h1>\n    <p class=\"stage-sub\">TED-Ed Student Talks, facilitated by Sparks Academy. Free, and always will be.</p>\n    <div class=\"stage-cta\">\n      <a class=\"btn btn-go\" href=\"#teded-register\">Register your child →</a>\n      <a class=\"btn btn-quiet\" href=\"#how\">See how it works</a>\n    </div>\n  </div>\n  <p class=\"stage-foot cue\">↓ scroll</p>\n</header>\n\n<!-- ============ 2 · THE THREE ACTS ============ -->\n<section class=\"thread-band\" id=\"how\">\n  <svg class=\"thread\" viewBox=\"0 0 980 1400\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n    <defs>\n      <linearGradient id=\"threadGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n        <stop offset=\"0%\" stop-color=\"#FFC46B\"/>\n        <stop offset=\"50%\" stop-color=\"#D22CB2\"/>\n        <stop offset=\"100%\" stop-color=\"#3F27BD\"/>\n      </linearGradient>\n    </defs>\n    <path id=\"threadPath\" pathLength=\"1\"\n      d=\"M490 0 C 490 140, 180 190, 180 330 S 800 470, 800 640 S 180 800, 180 980 S 640 1120, 490 1400\"/>\n  </svg>\n\n  <div class=\"wrap acts\">\n\n    <p class=\"cue\" style=\"text-align:center\">The whole thing, start to finish</p>\n    <h2 style=\"text-align:center;font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:12px\">From signing up<br>to being heard.</h2>\n    <p class=\"stop-lead\">Seven steps. Only one of them costs anything, and only if you want a seat in the room.</p>\n\n    <div class=\"stop js-rise\">\n      <span class=\"no\">01</span>\n      <span><b>Register with Sparks Academy</b>\n        <p>Two minutes. Your child's name, and your permissions — which we ask for before anything else happens.</p></span>\n      <span class=\"tag\">Free</span>\n    </div>\n\n    <div class=\"stop js-rise\">\n      <span class=\"no\">02</span>\n      <span><b>Come to the webinars</b>\n        <p>Live online sessions where they find out what a talk actually is, watch a few, and pull them apart.</p></span>\n      <span class=\"tag\">Free</span>\n    </div>\n\n    <!-- ACT I -->\n    <article class=\"act js-act\">\n      <div>\n        <p class=\"cue\">Step 03</p>\n        <h2>Find the idea.</h2>\n        <p>Not the idea we give them. The one they already carry around and have never been asked about.</p>\n      </div>\n      <div class=\"act-art\">\n        <svg viewBox=\"0 0 420 260\" role=\"img\" aria-label=\"Many small ideas; one of them lights up\">\n          <g fill=\"#B9B3D8\">\n            <circle class=\"idea-dim\" cx=\"58\"  cy=\"72\"  r=\"13\"/>\n            <circle class=\"idea-dim\" cx=\"128\" cy=\"42\"  r=\"9\"/>\n            <circle class=\"idea-dim\" cx=\"96\"  cy=\"150\" r=\"11\"/>\n            <circle class=\"idea-dim\" cx=\"168\" cy=\"196\" r=\"8\"/>\n            <circle class=\"idea-dim\" cx=\"288\" cy=\"58\"  r=\"10\"/>\n            <circle class=\"idea-dim\" cx=\"352\" cy=\"112\" r=\"13\"/>\n            <circle class=\"idea-dim\" cx=\"316\" cy=\"200\" r=\"9\"/>\n            <circle class=\"idea-dim\" cx=\"234\" cy=\"222\" r=\"11\"/>\n            <circle class=\"idea-dim\" cx=\"62\"  cy=\"212\" r=\"8\"/>\n            <circle class=\"idea-dim\" cx=\"382\" cy=\"176\" r=\"7\"/>\n          </g>\n          <g class=\"idea\" style=\"opacity:0;transform:scale(.3);transform-origin:210px 124px\">\n            <circle cx=\"210\" cy=\"124\" r=\"52\" fill=\"#FFF3DE\"/>\n            <circle cx=\"210\" cy=\"124\" r=\"34\" fill=\"url(#ideaGrad)\"/>\n            <path d=\"M210 96a20 20 0 0 0-11 37v9h22v-9a20 20 0 0 0-11-37z\" fill=\"#fff\" opacity=\".92\"/>\n            <rect x=\"203\" y=\"146\" width=\"14\" height=\"4\" rx=\"2\" fill=\"#fff\" opacity=\".92\"/>\n          </g>\n          <defs>\n            <linearGradient id=\"ideaGrad\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"#FFC46B\"/><stop offset=\"100%\" stop-color=\"#D22CB2\"/>\n            </linearGradient>\n          </defs>\n        </svg>\n      </div>\n    </article>\n\n    <!-- ACT II -->\n    <article class=\"act js-act\">\n      <div>\n        <p class=\"cue\">Step 04</p>\n        <h2>Shape it.</h2>\n        <p>Research it so it holds. Cut it until only what matters is left. Rehearse it until the nerves are ordinary.</p>\n      </div>\n      <div class=\"act-art\">\n        <svg viewBox=\"0 0 420 260\" role=\"img\" aria-label=\"Scattered notes tidy into order; a story arc is drawn\">\n          <g>\n            <rect class=\"card-a\" x=\"58\"  y=\"112\" width=\"92\" height=\"66\" rx=\"9\" fill=\"#fff\" stroke=\"#D9D4EE\" stroke-width=\"1.6\" style=\"transform:translate(14px,26px) rotate(-11deg);transform-origin:104px 145px\"/>\n            <rect class=\"card-b\" x=\"164\" y=\"112\" width=\"92\" height=\"66\" rx=\"9\" fill=\"#fff\" stroke=\"#D9D4EE\" stroke-width=\"1.6\" style=\"transform:translate(-6px,34px) rotate(8deg);transform-origin:210px 145px\"/>\n            <rect class=\"card-c\" x=\"270\" y=\"112\" width=\"92\" height=\"66\" rx=\"9\" fill=\"#fff\" stroke=\"#D9D4EE\" stroke-width=\"1.6\" style=\"transform:translate(18px,22px) rotate(-6deg);transform-origin:316px 145px\"/>\n            <g fill=\"#C9C3E4\">\n              <rect x=\"72\"  y=\"128\" width=\"52\" height=\"5\" rx=\"2.5\"/><rect x=\"72\"  y=\"142\" width=\"64\" height=\"5\" rx=\"2.5\"/><rect x=\"72\"  y=\"156\" width=\"38\" height=\"5\" rx=\"2.5\"/>\n              <rect x=\"178\" y=\"128\" width=\"60\" height=\"5\" rx=\"2.5\"/><rect x=\"178\" y=\"142\" width=\"44\" height=\"5\" rx=\"2.5\"/><rect x=\"178\" y=\"156\" width=\"56\" height=\"5\" rx=\"2.5\"/>\n              <rect x=\"284\" y=\"128\" width=\"46\" height=\"5\" rx=\"2.5\"/><rect x=\"284\" y=\"142\" width=\"62\" height=\"5\" rx=\"2.5\"/><rect x=\"284\" y=\"156\" width=\"40\" height=\"5\" rx=\"2.5\"/>\n            </g>\n          </g>\n          <path class=\"draw\" d=\"M46 92 C 130 22, 206 128, 262 62 S 356 24, 388 66\"\n            fill=\"none\" stroke=\"url(#arcGrad)\" stroke-width=\"4\" stroke-linecap=\"round\"\n            stroke-dasharray=\"520\" stroke-dashoffset=\"520\"/>\n          <circle cx=\"388\" cy=\"66\" r=\"7\" fill=\"#D22CB2\"/>\n          <defs>\n            <linearGradient id=\"arcGrad\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n              <stop offset=\"0%\" stop-color=\"#3F27BD\"/><stop offset=\"100%\" stop-color=\"#D22CB2\"/>\n            </linearGradient>\n          </defs>\n        </svg>\n      </div>\n    </article>\n\n    <!-- ACT III -->\n    <article class=\"act js-act\">\n      <div>\n        <p class=\"cue\">Step 05</p>\n        <h2>Say it out loud.</h2>\n        <p>Rehearsed until the nerves are ordinary — then recorded, in one take, as their own short talk.</p>\n      </div>\n      <div class=\"act-art\">\n        <svg viewBox=\"0 0 420 260\" role=\"img\" aria-label=\"A voice crosses the room and an audience responds\">\n          <g fill=\"#EDEAF8\">\n            <circle cx=\"330\" cy=\"126\" r=\"20\"/><circle cx=\"372\" cy=\"160\" r=\"16\"/><circle cx=\"300\" cy=\"182\" r=\"14\"/>\n            <circle cx=\"358\" cy=\"94\" r=\"13\"/><circle cx=\"392\" cy=\"122\" r=\"11\"/>\n          </g>\n          <g fill=\"#3F27BD\">\n            <circle cx=\"76\" cy=\"122\" r=\"20\"/>\n            <path d=\"M50 186c0-17 12-30 26-30s26 13 26 30z\"/>\n          </g>\n          <g fill=\"url(#waveGrad)\">\n            <rect class=\"vbar\" x=\"122\" y=\"120\" width=\"5\" height=\"26\" rx=\"2.5\" style=\"animation-delay:0s\"/>\n            <rect class=\"vbar\" x=\"136\" y=\"110\" width=\"5\" height=\"46\" rx=\"2.5\" style=\"animation-delay:.12s\"/>\n            <rect class=\"vbar\" x=\"150\" y=\"118\" width=\"5\" height=\"30\" rx=\"2.5\" style=\"animation-delay:.24s\"/>\n            <rect class=\"vbar\" x=\"164\" y=\"102\" width=\"5\" height=\"62\" rx=\"2.5\" style=\"animation-delay:.36s\"/>\n            <rect class=\"vbar\" x=\"178\" y=\"114\" width=\"5\" height=\"38\" rx=\"2.5\" style=\"animation-delay:.48s\"/>\n            <rect class=\"vbar\" x=\"192\" y=\"106\" width=\"5\" height=\"54\" rx=\"2.5\" style=\"animation-delay:.6s\"/>\n            <rect class=\"vbar\" x=\"206\" y=\"118\" width=\"5\" height=\"30\" rx=\"2.5\" style=\"animation-delay:.72s\"/>\n            <rect class=\"vbar\" x=\"220\" y=\"110\" width=\"5\" height=\"46\" rx=\"2.5\" style=\"animation-delay:.84s\"/>\n            <rect class=\"vbar\" x=\"234\" y=\"120\" width=\"5\" height=\"26\" rx=\"2.5\" style=\"animation-delay:.96s\"/>\n          </g>\n          <g class=\"clap\" style=\"opacity:0\">\n            <circle cx=\"330\" cy=\"126\" r=\"20\" fill=\"#FFC46B\"/>\n            <circle cx=\"372\" cy=\"160\" r=\"16\" fill=\"#FFD79A\"/>\n            <circle cx=\"300\" cy=\"182\" r=\"14\" fill=\"#FFD79A\"/>\n          </g>\n          <defs>\n            <linearGradient id=\"waveGrad\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n              <stop offset=\"0%\" stop-color=\"#3F27BD\"/><stop offset=\"100%\" stop-color=\"#D22CB2\"/>\n            </linearGradient>\n          </defs>\n        </svg>\n      </div>\n    </article>\n    <div class=\"stop js-rise\">\n      <span class=\"no\">06</span>\n      <span><b>The panel watches every talk</b>\n        <p>Our facilitators review each recording with a small panel. Some are chosen to go further.</p></span>\n      <span class=\"tag tag-them\">We do this</span>\n    </div>\n\n    <div class=\"stop js-rise\">\n      <span class=\"no\">07</span>\n      <span><b>The chosen talks are shared</b>\n        <p>Published on our channel, and the strongest submitted to TED-Ed's own team for review — with your written permission, and never without it.</p></span>\n      <span class=\"tag\">Free</span>\n    </div>\n\n  </div>\n</section>\n\n<!-- ============ 2c · WHERE IT ENDS UP ============ -->\n<section class=\"fork\">\n  <div class=\"wrap\">\n    <p class=\"cue\" style=\"text-align:center\">Two ways to be heard</p>\n    <h2>A camera, or a room.</h2>\n    <p class=\"stop-lead\">Most children do both. Neither happens without your permission.</p>\n\n    <div class=\"fork-grid\">\n\n      <article class=\"route route-video rise js-rise\">\n        <svg viewBox=\"0 0 300 110\" role=\"img\" aria-label=\"A recorded talk becomes a published video\">\n          <rect x=\"18\" y=\"20\" width=\"112\" height=\"72\" rx=\"12\" fill=\"rgba(255,255,255,.14)\"/>\n          <circle cx=\"74\" cy=\"56\" r=\"20\" fill=\"rgba(255,255,255,.9)\"/>\n          <path d=\"M69 47l16 9-16 9z\" fill=\"#3F27BD\"/>\n          <g fill=\"#FFC46B\">\n            <rect class=\"vbar\" x=\"152\" y=\"46\" width=\"5\" height=\"20\" rx=\"2.5\" style=\"animation-delay:0s\"/>\n            <rect class=\"vbar\" x=\"163\" y=\"38\" width=\"5\" height=\"36\" rx=\"2.5\" style=\"animation-delay:.14s\"/>\n            <rect class=\"vbar\" x=\"174\" y=\"48\" width=\"5\" height=\"16\" rx=\"2.5\" style=\"animation-delay:.28s\"/>\n          </g>\n          <rect x=\"200\" y=\"26\" width=\"82\" height=\"60\" rx=\"12\" fill=\"rgba(255,255,255,.2)\"/>\n          <path d=\"M232 42l20 14-20 14z\" fill=\"#fff\"/>\n        </svg>\n        <b>Recorded &amp; published</b>\n        <p>They give the talk once, properly, to a camera.</p>\n        <ol>\n          <li>Recorded with us, in one take</li>\n          <li>Watched by the facilitator panel</li>\n          <li>Chosen talks published on our channel</li>\n          <li>The strongest submitted to TED-Ed</li>\n        </ol>\n        <p class=\"honest\">TED-Ed decides what it features — we can submit, we cannot promise. And nothing goes online\n          without a separate written yes for that specific talk, which you can withdraw later.</p>\n      </article>\n\n      <article class=\"route route-live rise js-rise\">\n        <svg viewBox=\"0 0 300 110\" role=\"img\" aria-label=\"A live evening where students speak to an audience\">\n          <ellipse cx=\"150\" cy=\"88\" rx=\"86\" ry=\"14\" fill=\"rgba(255,255,255,.22)\"/>\n          <polygon points=\"150,-6 106,86 194,86\" fill=\"rgba(255,255,255,.16)\"/>\n          <g fill=\"#2A0F2A\">\n            <circle cx=\"150\" cy=\"46\" r=\"12\"/>\n            <path d=\"M132 86c0-13 8-23 18-23s18 10 18 23z\"/>\n          </g>\n          <g fill=\"rgba(255,255,255,.5)\">\n            <circle cx=\"36\" cy=\"96\" r=\"11\"/><circle cx=\"68\" cy=\"102\" r=\"9\"/><circle cx=\"240\" cy=\"100\" r=\"10\"/><circle cx=\"270\" cy=\"94\" r=\"12\"/>\n          </g>\n        </svg>\n        <b>Live, on a stage</b>\n        <p>An evening in a hall, with an audience, chairs and a microphone.</p>\n        <ol>\n          <li>Open to every child in the group</li>\n          <li>Family and friends in the room</li>\n          <li>Filmed only where you have said yes</li>\n        </ol>\n        <p class=\"honest\">Seats cost £5 towards the hall — see exactly where that goes below. Free tickets are\n          always available, and we will not ask why.</p>\n      </article>\n\n    </div>\n  </div>\n</section>\n\n<!-- ============ 2b · WHAT WE DO ============ -->\n<section class=\"part\">\n  <div class=\"wrap\">\n    <p class=\"cue\" style=\"text-align:center\">Our part</p>\n    <h2>We do the hard bit with them.</h2>\n    <p class=\"part-lead\">Nobody hands a child a worksheet and wishes them luck. Every step above happens with a facilitator, live.</p>\n\n    <div class=\"part-grid\">\n\n      <article class=\"job rise js-rise\">\n        <svg viewBox=\"0 0 300 150\" role=\"img\" aria-label=\"A live online session with a facilitator\">\n          <rect x=\"26\" y=\"20\" width=\"248\" height=\"98\" rx=\"14\" fill=\"#EDEAF8\"/>\n          <rect x=\"40\" y=\"34\" width=\"106\" height=\"70\" rx=\"10\" fill=\"#fff\"/>\n          <circle cx=\"93\" cy=\"60\" r=\"13\" fill=\"#3F27BD\" opacity=\".8\"/>\n          <path d=\"M75 92c0-10 8-18 18-18s18 8 18 18z\" fill=\"#3F27BD\" opacity=\".8\"/>\n          <g fill=\"#C9C3E4\">\n            <rect x=\"158\" y=\"34\" width=\"50\" height=\"32\" rx=\"8\"/><rect x=\"216\" y=\"34\" width=\"46\" height=\"32\" rx=\"8\"/>\n            <rect x=\"158\" y=\"72\" width=\"46\" height=\"32\" rx=\"8\"/><rect x=\"212\" y=\"72\" width=\"50\" height=\"32\" rx=\"8\"/>\n          </g>\n          <g fill=\"url(#waveGrad)\">\n            <rect class=\"vbar\" x=\"122\" y=\"58\" width=\"4\" height=\"20\" rx=\"2\" style=\"animation-delay:0s\"/>\n            <rect class=\"vbar\" x=\"131\" y=\"52\" width=\"4\" height=\"32\" rx=\"2\" style=\"animation-delay:.15s\"/>\n            <rect class=\"vbar\" x=\"140\" y=\"60\" width=\"4\" height=\"16\" rx=\"2\" style=\"animation-delay:.3s\"/>\n          </g>\n          <rect x=\"128\" y=\"126\" width=\"44\" height=\"7\" rx=\"3.5\" fill=\"#D9D4EE\"/>\n        </svg>\n        <b>Weekly online sessions</b>\n        <p>Live, with a facilitator, in a small group. They talk, argue, draft and rehearse — never alone with a worksheet.</p>\n        <span class=\"tagfree\">Free</span>\n      </article>\n\n      <article class=\"job rise js-rise\">\n        <svg viewBox=\"0 0 300 150\" role=\"img\" aria-label=\"Coaching a talk: notes, a timer and feedback\">\n          <rect x=\"34\" y=\"24\" width=\"118\" height=\"98\" rx=\"12\" fill=\"#fff\" stroke=\"#D9D4EE\" stroke-width=\"1.8\"/>\n          <g fill=\"#C9C3E4\">\n            <rect x=\"50\" y=\"44\" width=\"72\" height=\"6\" rx=\"3\"/><rect x=\"50\" y=\"60\" width=\"86\" height=\"6\" rx=\"3\"/>\n            <rect x=\"50\" y=\"76\" width=\"60\" height=\"6\" rx=\"3\"/><rect x=\"50\" y=\"92\" width=\"80\" height=\"6\" rx=\"3\"/>\n          </g>\n          <circle cx=\"216\" cy=\"72\" r=\"42\" fill=\"#EDEAF8\"/>\n          <circle cx=\"216\" cy=\"72\" r=\"30\" fill=\"#fff\" stroke=\"#D9D4EE\" stroke-width=\"1.8\"/>\n          <path class=\"draw\" d=\"M216 72 L216 48\" stroke=\"#D22CB2\" stroke-width=\"4\" stroke-linecap=\"round\"\n            stroke-dasharray=\"26\" stroke-dashoffset=\"26\" fill=\"none\"/>\n          <path class=\"draw\" d=\"M216 72 L236 84\" stroke=\"#3F27BD\" stroke-width=\"4\" stroke-linecap=\"round\"\n            stroke-dasharray=\"24\" stroke-dashoffset=\"24\" fill=\"none\"/>\n          <circle cx=\"216\" cy=\"72\" r=\"4\" fill=\"#181433\"/>\n        </svg>\n        <b>Coaching, not correcting</b>\n        <p>Timed run-throughs, honest feedback, and the nerves worked on properly — until ten minutes on stage feels ordinary.</p>\n        <span class=\"tagfree\">Free</span>\n      </article>\n\n      <article class=\"job rise js-rise\">\n        <svg viewBox=\"0 0 300 150\" role=\"img\" aria-label=\"We book the hall and run the stage night\">\n          <path d=\"M18 18h264v22H18z\" fill=\"#3F27BD\" opacity=\".16\"/>\n          <path d=\"M26 40c22 0 30 26 30 52v22H26z\" fill=\"#D22CB2\" opacity=\".22\"/>\n          <path d=\"M274 40c-22 0-30 26-30 52v22h30z\" fill=\"#D22CB2\" opacity=\".22\"/>\n          <ellipse cx=\"150\" cy=\"120\" rx=\"66\" ry=\"12\" fill=\"#FFC46B\" opacity=\".38\"/>\n          <g fill=\"#181433\">\n            <circle cx=\"150\" cy=\"76\" r=\"12\"/>\n            <path d=\"M132 118c0-13 8-23 18-23s18 10 18 23z\"/>\n          </g>\n          <g stroke=\"#181433\" stroke-width=\"2.4\" stroke-linecap=\"round\" fill=\"none\">\n            <path d=\"M172 118V88\"/><path d=\"M172 88l-6-6\"/>\n          </g>\n          <circle cx=\"164\" cy=\"80\" r=\"4.6\" fill=\"#181433\"/>\n        </svg>\n        <b>The stage night</b>\n        <p>We book the hall, set the lights, print the programme and film the talks — for the children whose parents have said yes.</p>\n        <span class=\"tagcost\">At cost</span>\n      </article>\n\n    </div>\n  </div>\n</section>\n\n<!-- ============ 3 · THE RUN SHEET ============ -->\n<section class=\"run js-run\">\n  <div class=\"wrap\">\n    <p class=\"cue cue-beam\" style=\"text-align:center\">The run sheet</p>\n    <h2>Thirteen sessions.<br>One talk.</h2>\n    <p class=\"run-lead\">Steps 03 to 05, week by week. Every session builds one piece of the talk —\n      nothing is left to the night before.</p>\n    <div class=\"sheet\">\n      <div class=\"step\" style=\"--h:14%\">01</div><div class=\"step\" style=\"--h:20%\">02</div>\n      <div class=\"step\" style=\"--h:27%\">03</div><div class=\"step\" style=\"--h:33%\">04</div>\n      <div class=\"step\" style=\"--h:40%\">05</div><div class=\"step\" style=\"--h:46%\">06</div>\n      <div class=\"step\" style=\"--h:53%\">07</div><div class=\"step\" style=\"--h:60%\">08</div>\n      <div class=\"step\" style=\"--h:67%\">09</div><div class=\"step\" style=\"--h:74%\">10</div>\n      <div class=\"step\" style=\"--h:82%\">11</div><div class=\"step\" style=\"--h:90%\">12</div>\n      <div class=\"step\" style=\"--h:100%\">13</div>\n    </div>\n    <div class=\"sheet-legend\">\n      <span class=\"cue\">Discover</span><span class=\"cue\">Develop</span><span class=\"cue cue-beam\">Stage night</span>\n    </div>\n  </div>\n</section>\n\n<!-- ============ 4 · THE RECORDING ============ -->\n<section class=\"trust\">\n  <div class=\"wrap trust-grid\">\n    <div class=\"rise js-rise\">\n      <p class=\"cue\">Before you ask</p>\n      <h2>Nothing is filmed —<br>or published —<br>without your yes.</h2>\n      <div class=\"gate\"><span class=\"tick\">✓</span><span><b>At registration</b><span>Your standing permissions, in your words, on the record.</span></span></div>\n      <div class=\"gate\"><span class=\"tick\">✓</span><span><b>Again, every session</b><span>Because yes to one talk is not yes to all of them.</span></span></div>\n      <div class=\"gate\"><span class=\"tick\">✓</span><span><b>Again before anything is published</b><span>Filming a talk is not permission to put it online. That is a separate yes, for that one talk.</span></span></div>\n      <div class=\"gate\"><span class=\"tick\">✓</span><span><b>Changeable, any time</b><span>One email and a published talk comes down. We record who asked and when.</span></span></div>\n    </div>\n    <div class=\"rise js-rise act-art\">\n      <svg viewBox=\"0 0 320 240\" role=\"img\" aria-label=\"A camera that only records when permission is given\">\n        <rect x=\"46\" y=\"78\" width=\"150\" height=\"98\" rx=\"16\" fill=\"#EDEAF8\"/>\n        <circle cx=\"121\" cy=\"127\" r=\"30\" fill=\"#fff\" stroke=\"#D9D4EE\" stroke-width=\"2\"/>\n        <circle cx=\"121\" cy=\"127\" r=\"15\" fill=\"#3F27BD\" opacity=\".18\"/>\n        <path d=\"M204 104l52-26v98l-52-26z\" fill=\"#EDEAF8\"/>\n        <g transform=\"translate(196,150)\">\n          <rect x=\"0\" y=\"14\" width=\"60\" height=\"46\" rx=\"10\" fill=\"url(#lockGrad)\"/>\n          <path d=\"M14 14v-9a16 16 0 0 1 32 0v9\" fill=\"none\" stroke=\"url(#lockGrad)\" stroke-width=\"7\" stroke-linecap=\"round\"/>\n          <circle cx=\"30\" cy=\"36\" r=\"6\" fill=\"#fff\"/>\n        </g>\n        <defs>\n          <linearGradient id=\"lockGrad\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n            <stop offset=\"0%\" stop-color=\"#3F27BD\"/><stop offset=\"100%\" stop-color=\"#D22CB2\"/>\n          </linearGradient>\n        </defs>\n      </svg>\n    </div>\n  </div>\n</section>\n\n<!-- ============ 5 · THE PRICE ============ -->\n<section class=\"free\">\n  <div class=\"wrap\">\n    <p class=\"cue\" style=\"color:#F3D9FF\">What it costs your child</p>\n    <p class=\"zero\">£0<em> — all thirteen sessions</em></p>\n    <p>TED-Ed requires these activities to be free to students, and we run them that way.\n      No fee, no upsell, nothing sold on the back of them.</p>\n\n    <div class=\"ledger\">\n      <p class=\"cue\" style=\"color:#F3D9FF;text-align:center;margin-bottom:14px\">\n        The stage night has a hall to pay for · £5 a seat\n      </p>\n      <div class=\"bar\" role=\"img\" aria-label=\"Where a £5 ticket goes: hall hire, filming and printing, and the next run\">\n        <span style=\"width:52%;background:#FFC46B\"></span>\n        <span style=\"width:24%;background:#FF9ED8\"></span>\n        <span style=\"width:24%;background:#B9A6FF\"></span>\n      </div>\n      <div class=\"bar-key\">\n        <i style=\"--k:#FFC46B\">Hall &amp; chairs</i>\n        <i style=\"--k:#FF9ED8\">Filming &amp; printing</i>\n        <i style=\"--k:#B9A6FF\">The next run</i>\n      </div>\n      <p class=\"note-free\">\n        <b>Money is never the reason a seat is empty.</b>\n        Ask us for a free ticket and you will get one. We will not ask why.\n      </p>\n    </div>\n  </div>\n</section>\n\n<!-- ============ 7 · CLOSE ============ -->\n<section class=\"close\">\n  <div class=\"wrap\">\n    <p class=\"cue cue-beam\">[ lights up ]</p>\n    <h2>One day they press record,<br><em>or the room goes quiet.</em></h2>\n    <p>The dates and the registration form sit below this page. It takes two minutes, and it asks for\n      your permissions before anything else.</p>\n    <a class=\"btn btn-go\" href=\"#teded-register\">Register your child — free →</a>\n    <p class=\"facilitator\">Sparks Academy facilitates the TED-Ed Student Talks programme for students aged 8–18.\n      Groups are 20–30 students. Taking part is free. The stage night runs at cost — Sparks Academy takes no\n      profit from it, and anything left over pays for the next run. TED-Ed materials are free and remain the\n      property of TED-Ed.</p>\n  </div>\n</section>\n\n<script>\n/* reveal on scroll */\n/* Guarded, and threshold 0. An unguarded `new IntersectionObserver` throws\n   where the API is missing and takes every line after it down with it — and a\n   percentage threshold can never be met by an element taller than the window,\n   which leaves a whole section at opacity 0 with all its markup present. */\n(function () {\n  var targets = document.querySelectorAll(\".js-act, .js-rise, .js-run\");\n  if (!(\"IntersectionObserver\" in window)) {\n    targets.forEach(function (el) { el.classList.add(\"in\"); });\n    return;\n  }\n  var io = new IntersectionObserver(function (entries) {\n    entries.forEach(function (e) {\n      if (!e.isIntersecting) return;\n      e.target.classList.add(\"in\");\n      io.unobserve(e.target);\n    });\n  }, { threshold: 0, rootMargin: \"0px 0px -10% 0px\" });\n  targets.forEach(function (el) { io.observe(el); });\n})();\n\n/* the voice line draws itself as you scroll past it */\nconst reduced = (window.matchMedia\n  ? window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches : false);\nconst band = document.querySelector(\".thread-band\");\nconst line = document.getElementById(\"threadPath\");\nfunction drawThread() {\n  if (!band || !line) return;\n  const r = band.getBoundingClientRect();\n  const span = r.height + window.innerHeight;\n  const p = Math.min(1, Math.max(0, (window.innerHeight - r.top) / span));\n  line.style.strokeDashoffset = String(1 - p * 1.15);\n}\nif (!reduced) {\n  drawThread();\n  addEventListener(\"scroll\", () => requestAnimationFrame(drawThread), { passive: true });\n  addEventListener(\"resize\", drawThread);\n}\n</script>","showCourses":false,"showMockEvents":false,"showOlympiad":false,"showTeded":true,"brands":["sparks","bright"],"active":true,"position":70,"groups":[],"courses":[],"courseCount":0}]}