/* Uplift Learning - Ink & Signal Blue | white ground, ink text, signal blue accent
   Headings: Source Serif 4.  Body: Inter.
   NOTE: the variables are still named --emerald / --gold for historical reasons.
         --emerald is now the signal blue, --gold is the same blue used as an accent,
         --gold-soft is the pale blue used on top of blue backgrounds. */
:root {
  interpolate-size: allow-keywords; /* lets height/block-size animate to and from auto */
  --ink: #1a1d21;
  --emerald: #2f5aa8;
  --emerald-dark: #24467f;
  --gold: #2f5aa8;
  --gold-soft: #b9cdf0;
  --cream: #ffffff;
  --cream-2: #f4f6f9;
  --card: #ffffff;
  --text: #2a2f36;
  --muted: #5f6874;
  --line: #e2e6ec;
  --whatsapp: #1f8f4e;
  --maxw: 1100px;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;

  /* ---------------- motion ----------------
     Three durations and two curves, and everything uses them. There were
     thirteen different durations scattered between .1s and .3s before this,
     almost all on plain `ease`, which is why the site could feel busy
     without anything being obviously wrong: nothing shared a rhythm, so no
     two things ever moved together.

     --t-fast   a colour or a border under the cursor, felt not watched
     --t-base   the default, anything that changes shape or position
     --t-slow   something entering or leaving, which needs a beat to read

     --ease-out is the workhorse. It leaves quickly and settles gently,
     which reads as responsive on the way out and calm on the way in.
     `ease` is symmetrical and starts slowly, which is what makes a hover
     feel a fraction late even at 120ms. */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 260ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ---------------- moving between pages ----------------
   This site is many separate HTML files, so every link is a full document
   load and the browser paints white in between. That flash is most of what
   makes a static site feel like a static site, however fast it is.

   A cross-document view transition replaces it with a short cross-fade.
   It costs nothing anywhere it is not supported: Chrome, Edge and Safari
   18.2 do it, Firefox ignores the rule and keeps today's behaviour. There
   is no JavaScript involved and nothing to go wrong at runtime.

   Kept deliberately short. A page transition is a join, not an effect, and
   anything over about 200ms stops covering the wait and becomes the wait. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vtOut 140ms var(--ease-out) both;
}
::view-transition-new(root) {
  animation: vtIn 200ms var(--ease-out) both;
}
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(6px); } }

/* The header is the same on every page, so it is held still by name rather
   than cross-faded with everything else. Without this the whole masthead
   dips on every navigation, which is the one part of the page a reader is
   using to stay oriented. */
.site-header { view-transition-name: site-header; }
::view-transition-old(site-header),
::view-transition-new(site-header) { animation: none; }
/* ---------------- unlocked themes ----------------
   Cosmetic only, and only the accent moves. The ink, the ground and every
   line stay exactly where they were, because a child choosing a colour
   should not be able to make their own dashboard harder to read. Each of
   these is checked against contrast on white before it goes in.

   set_theme() in the database decides whether a child may have one. This is
   only what it looks like once they can. */
:root[data-theme="forest"] {
  --emerald: #1f6b45; --emerald-dark: #175436; --gold: #1f6b45; --gold-soft: #b4dcc6;
}
:root[data-theme="sunset"] {
  --emerald: #b2481f; --emerald-dark: #8c3818; --gold: #b2481f; --gold-soft: #f3cbba;
}
:root[data-theme="ocean"] {
  --emerald: #146c7e; --emerald-dark: #0f5361; --gold: #146c7e; --gold-soft: #b3dde5;
}
:root[data-theme="ink"] {
  --emerald: #3b3a5c; --emerald-dark: #2b2a45; --gold: #3b3a5c; --gold-soft: #c8c7db;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body { font-family: var(--sans); color: var(--text); background: var(--cream); line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.18; color: var(--ink); letter-spacing: 0.005em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
.eyebrow { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; font-weight: 600; color: var(--gold); margin-bottom: 12px; }
.eyebrow.gold { color: var(--gold-soft); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; font-family: var(--sans); font-weight: 600; font-size: 0.95rem; padding: 13px 26px; border-radius: 2px; cursor: pointer; border: 1.5px solid transparent;
  transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
.btn-sm { padding: 9px 18px; font-size: 0.86rem; }
.btn-lg { padding: 15px 30px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }
.btn-solid { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.btn-solid:hover { background: var(--emerald-dark); border-color: var(--emerald-dark); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-line:hover { border-color: var(--emerald); color: var(--emerald); }

/* Announcement + header */
.announce { background: var(--ink); color: #e9edf4; text-align: center; font-size: 0.82rem; letter-spacing: 0.04em; padding: 9px 16px; }
/* The leaflet strip on the home page: the printed QR code goes to the home
   page and nowhere else, so the home page has to carry the offer and the
   code. A link, in the brand green, and the only clickable thing above the
   header on a phone. */
a.announce-offer { display: block; background: #1f6b45; color: #fff; text-decoration: none; letter-spacing: 0.02em;
  font-size: 1.02rem; font-weight: 600; padding: 15px 16px; }
a.announce-offer strong { color: #fff; background: rgba(255,255,255,.2); padding: 3px 10px; border-radius: 5px;
  letter-spacing: .1em; font-weight: 800; }
a.announce-offer:hover { background: #175436; color: #fff; }
@media (max-width: 640px) { a.announce-offer { font-size: 0.92rem; padding: 12px 14px; } }
.sb-promo { border-left-color: #1f7f55; background: #eaf6f0; margin: 14px 0; }
/* No backdrop-filter. A blurred sticky header has to re-blur whatever is
   behind it on every scroll frame, which is what made scrolling feel heavy.
   An opaque header costs nothing and looks the same against a white page. */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff;
  border-bottom: 1px solid var(--line); }
/* The header runs wider than the page: eight nav links, the brand and two
   buttons need about 1110px, and the 1100px container (1048 inside its
   padding) put Contact under the Log in button, worse once signed in, when
   the button carries a name. 1200 gives the room at any desktop width. */
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 20px; max-width: 1200px; }
.brand { display: flex; align-items: center; gap: 12px; }
.seal { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; background: var(--emerald); color: #ffffff; font-family: var(--serif); font-weight: 700; font-size: 0.92rem; letter-spacing: -0.02em; flex: none; }
.brand-text { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.brand-thin { color: var(--muted); font-style: italic; }
.nav { display: flex; gap: 24px; flex: none; }
.nav a { font-size: 0.94rem; color: var(--ink); }
.nav a:hover { color: var(--emerald); }
.header-cta { display: flex; gap: 10px; flex: none; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
/* The three lines fold into a cross. The bars are positioned rather than
   stacked so the two outer ones can meet in the middle: a flex gap cannot be
   animated, and the fold has to happen around a shared centre. */
.nav-toggle { position: relative; width: 32px; height: 26px; }
.nav-toggle span { position: absolute; left: 4px; width: 24px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--t-slow) cubic-bezier(.4,0,.2,1), opacity var(--t-base) var(--ease-out); }
.nav-toggle span:nth-child(1) { top: 6px; }
.nav-toggle span:nth-child(2) { top: 12px; }
.nav-toggle span:nth-child(3) { top: 18px; }
.site-header.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.site-header.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Hero */
.hero { padding: 84px 0 76px; background:
  radial-gradient(900px 380px at 50% -8%, rgba(47,90,168,0.07), transparent),
  var(--cream); border-bottom: 1px solid var(--line); }
.hero-inner { text-align: center; max-width: 860px; margin: 0 auto; }
.kicker { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.74rem; font-weight: 600; color: var(--gold); margin-bottom: 22px; }
.hero h1 { margin-bottom: 22px; }
.lede { font-size: 1.16rem; color: var(--muted); max-width: 40em; margin: 0 auto 30px; }
.lede.sm { font-size: 1.04rem; margin: 12px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hero-rule { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; color: var(--muted); font-size: 0.86rem; letter-spacing: 0.03em; }
.hero-rule span { height: 1px; width: 64px; background: var(--line); }

/* Sections */
.section { padding: 82px 0; }
.head { margin-bottom: 48px; }
.head.center { max-width: 640px; margin-left: auto; margin-right: auto; }
.band-cream { background: var(--cream-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.cols-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.cols-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; }

/* Pillars */
.pillar { text-align: center; padding: 12px 14px; }
.pillar .num { font-family: var(--serif); font-size: 1.5rem; color: var(--gold); display: inline-block; width: 54px; height: 54px; line-height: 50px; border: 1.5px solid var(--gold); border-radius: 50%; margin-bottom: 18px; }
.pillar h3 { margin-bottom: 10px; }
.pillar p { color: var(--muted); font-size: 0.98rem; }

/* Panels */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 34px; }
.panel h3 { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--gold); display: inline-block; }
.panel p { color: var(--muted); margin-bottom: 16px; }
.serif-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.serif-list li { position: relative; padding-left: 22px; font-size: 0.97rem; }
.serif-list li::before { content: "·"; position: absolute; left: 0; color: var(--gold); }

/* Flow / how */
.flow { position: relative; }
.flow-step { text-align: center; padding: 0 10px; }
.flow-step .dot { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; background: var(--emerald); color: #ffffff; font-family: var(--serif); font-weight: 700; }
.flow-step h3 { margin-bottom: 6px; }
.flow-step p { color: var(--muted); font-size: 0.92rem; }

/* Feature quote */
.band-quote { background: var(--emerald); color: #eef3fb; border-top: 6px solid var(--gold-soft); }
.band-quote .quote-mark { font-family: var(--serif); font-size: 5rem; line-height: 0.5; color: var(--gold-soft); height: 46px; }
.band-quote .stars { color: var(--gold-soft); letter-spacing: 5px; margin-bottom: 18px; font-size: 1.1rem; }
.feature-quote { font-family: var(--serif); font-size: clamp(1.35rem, 3vw, 1.9rem); font-style: italic; line-height: 1.5; color: #fff; }
.quote-by { margin-top: 22px; font-size: 0.95rem; letter-spacing: 0.05em; color: #ccd9ee; }

/* Dark approach */
.band-dark { background: var(--ink); color: #d5dae2; }
.on-dark { color: #fff; }
.dark-item { text-align: center; padding: 8px; }
.dark-item h3 { color: #fff; margin-bottom: 10px; }
.dark-item p { color: #a7aeb8; font-size: 0.96rem; }

/* Contact */
.contact { align-items: center; gap: 44px; }
.contact-dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin-top: 22px; }
.contact-dl dt { font-weight: 600; color: var(--ink); }
.contact-dl dd { color: var(--muted); }
.contact-dl a { color: var(--emerald); font-weight: 600; }
/* letter.html: the videos, written by _tools/video/build_video_page.py */
.vid-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 22px; }
@media (min-width: 760px) { .vid-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.vid { display: flex; flex-direction: column; gap: 10px; }
.vid-still { position: relative; display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.vid-still img { display: block; width: 100%; height: auto; }
.vid-play { position: absolute; right: 6px; top: 6px; background: var(--ink); color: #fff; font-size: .72rem;
            font-weight: 600; padding: 4px 8px; border-radius: 4px; }
.vid h3 { font-size: .98rem; line-height: 1.35; }
.vid-free { display: block; padding: 11px 14px; background: var(--cream-2); border-left: 4px solid var(--emerald);
            border-radius: 4px; color: var(--emerald-dark); font-weight: 600; font-size: .9rem; text-decoration: none; }
.vid-free b { color: var(--emerald); }
.vid-free:hover { background: #e9eef6; }
.follow { margin-top: 26px; }
.follow-label { font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.follow-row { display: flex; gap: 10px; flex-wrap: wrap; }
.follow-btn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; min-height: 44px;
              background: var(--card); border: 1px solid var(--line); border-radius: 4px;
              color: var(--emerald-dark); font-weight: 600; font-size: .92rem; text-decoration: none;
              transition: border-color var(--t-fast), color var(--t-fast); }
.follow-btn:hover { border-color: var(--emerald); color: var(--emerald); }
.book-card { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--emerald); border-radius: 4px; padding: 34px; }
.book-card h3 { margin-bottom: 8px; }
.book-card > p { color: var(--muted); margin-bottom: 22px; }

/* Footer */
.site-footer { background: var(--ink); color: #ccd2da; padding: 40px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand strong { color: #fff; font-family: var(--serif); }
.footer-brand p { font-size: 0.85rem; color: #9aa1ab; }
.footer-copy { font-size: 0.84rem; color: #9aa1ab; }

/* The burger takes over at 1160px, not 860px. Eight nav links, a signed-in
   name and Book a call only just fit at about 1130px (seven links fitted at
   1010 before Guides was added on 17 September 2026), and below that the
   links overflow their own container and slide underneath the buttons rather
   than wrapping, which put Contact behind the Log in button. 1160 leaves a
   real gap rather than a few pixels. */
@media (max-width: 1300px) { /* 1160 until 3 Oct 2026; the Premium pill needs 1260, signed in 1284 */
  .nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
  /* The open menu makes the header taller rather than floating panels beneath
     it. Two absolutely positioned blocks both anchored to a fixed 70px header
     land on top of each other, and the buttons used to be dropped entirely
     below 860px, so Log in and Book a call were unreachable on a phone. */
  .site-header.open .header-inner { height: auto; flex-wrap: wrap;
    padding-bottom: 18px; row-gap: 0; }
  .site-header.open .brand { order: 1; }
  .site-header.open .nav-toggle { order: 2; }
  .site-header.open .nav { order: 3; display: flex; flex-direction: column;
    width: 100%; gap: 16px; padding: 16px 0 4px; border-top: 1px solid var(--line); }
  /* Each item slides in just behind the one above it. The delay is small
     enough to read as one movement rather than a queue. */
  .site-header.open .nav a, .site-header.open .header-cta .btn {
    animation: navIn .32s cubic-bezier(.2,.7,.3,1) both; }
  .site-header.open .nav a:nth-child(1) { animation-delay: .02s; }
  .site-header.open .nav a:nth-child(2) { animation-delay: .05s; }
  .site-header.open .nav a:nth-child(3) { animation-delay: .08s; }
  .site-header.open .nav a:nth-child(4) { animation-delay: .11s; }
  .site-header.open .nav a:nth-child(5) { animation-delay: .14s; }
  .site-header.open .nav a:nth-child(6) { animation-delay: .17s; }
  .site-header.open .nav a:nth-child(7) { animation-delay: .20s; }
  .site-header.open .header-cta .btn:nth-child(1) { animation-delay: .22s; }
  .site-header.open .header-cta .btn:nth-child(2) { animation-delay: .25s; }
  .site-header.open .header-cta { order: 4; display: flex; flex-direction: column;
    width: 100%; gap: 10px; padding-top: 14px; }
  .site-header.open .header-cta .btn { width: 100%; }
}

@media (max-width: 860px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; gap: 30px; }
  .contact { gap: 30px; }
}
/* ---- Resources page (classic) ---- */
.subhero { padding: 60px 0 40px; background: var(--cream); border-bottom: 1px solid var(--line); text-align: center; }
.subhero h1 { margin-bottom: 14px; }
.subhero p { color: var(--muted); max-width: 40em; margin: 0 auto; font-size: 1.08rem; }
.res-block { margin-bottom: 48px; }
.res-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.res-head h2 { font-size: 1.5rem; }
.res-badge { font-family: var(--serif); font-weight: 700; color: var(--emerald); border: 1.5px solid var(--gold); border-radius: 3px; padding: 6px 14px; font-size: 0.95rem; white-space: nowrap; }
.res-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 26px;
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.res-card:hover { border-color: var(--emerald); transform: translateY(-3px); }
.res-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.res-card p { color: var(--muted); font-size: 0.92rem; }
.res-card em { font-style: normal; color: var(--gold); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.res-cta { text-align: center; background: var(--emerald); color: #fff; border-top: 6px solid var(--gold-soft); border-radius: 4px; padding: 52px 24px; margin-top: 24px; }
.res-cta h2 { color: #fff; margin-bottom: 10px; }
.res-cta p { color: #ccd9ee; margin-bottom: 24px; }

/* ---- Student page (classic) ---- */
.student-hero { background: var(--emerald); color: #eef3fb; border-top: 6px solid var(--gold-soft); padding: 46px 0; }
.student-hero h1 { color: #fff; }
.student-hero .tag { display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.45); color: #ffffff; padding: 6px 14px; border-radius: 3px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em; margin-bottom: 14px; }
.student-hero .sub { color: #ccd9ee; margin-top: 6px; }
.st-panel { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 28px; margin-bottom: 22px; }
.st-panel h2 { font-size: 1.25rem; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--gold); display: inline-block; }
.next-lesson { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.rag { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rag:last-child { border-bottom: none; }
.rag .dotr { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.r-green { background: #1b7a4b; } .r-amber { background: #c98a1e; } .r-red { background: #b23b32; }
.rag .topic { flex: 1; } .rag .status { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.st-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.st-list li { display: flex; gap: 14px; align-items: baseline; }
.st-list .when { min-width: 96px; font-weight: 600; color: var(--emerald); font-size: 0.9rem; }
.st-list a { color: var(--emerald); font-weight: 600; }
.private-note { font-size: 0.82rem; color: var(--muted); margin-top: 10px; }
/* ---- About / Meet your tutor ---- */
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: center; }
.about-card { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 34px; text-align: center; border-top: 4px solid var(--gold); }
.about-portrait { width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 18px; background: var(--emerald); color: #ffffff; font-family: var(--serif); font-size: 3rem; font-weight: 700; display: grid; place-items: center; border: 3px solid var(--emerald-dark); overflow: hidden; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-card h3 { font-size: 1.4rem; margin-bottom: 4px; }
.about-card .role { color: var(--muted); font-size: 0.92rem; margin-bottom: 16px; }
.about-facts { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.about-facts li { display: flex; gap: 10px; align-items: baseline; font-size: 0.92rem; color: var(--muted); }
.about-facts .lbl { color: var(--gold); font-weight: 700; flex: none; }
.about-body p { color: var(--muted); margin-bottom: 16px; }
.about-body p strong { color: var(--ink); }
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.badge { display: inline-flex; align-items: center; gap: 7px; background: var(--cream-2); border: 1px solid var(--line); border-radius: 3px; padding: 8px 14px; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.badge .tick { color: var(--emerald); font-weight: 700; }

/* ---- Pricing ---- */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
.price-card { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--emerald); border-radius: 4px; padding: 38px 34px; text-align: center; display: flex; flex-direction: column; }
.price-card .tier { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; font-weight: 700; color: var(--gold); margin-bottom: 14px; }
.price-fig { font-family: var(--serif); font-size: 3.4rem; font-weight: 700; color: var(--emerald); line-height: 1; }
.price-fig .per { font-family: var(--sans); font-size: 1rem; font-weight: 500; color: var(--muted); }
.price-sub { color: var(--muted); font-size: 0.95rem; margin: 10px 0 22px; }
.price-list { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 11px; flex-grow: 1; margin-bottom: 26px; }
.price-list li { position: relative; padding-left: 26px; font-size: 0.95rem; color: var(--muted); }
.price-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--emerald); font-weight: 700; }
.price-card.trial { background: var(--emerald); border-color: var(--gold-soft); color: #eef3fb; }
.price-card.trial .tier { color: var(--gold-soft); }
.price-card.trial h3, .price-card.trial .price-fig { color: #fff; }
.price-card.trial .price-fig .per, .price-card.trial .price-sub { color: #ccd9ee; }
.price-card.trial .price-list li { color: #dae5f5; }
.price-card.trial .price-list li::before { color: var(--gold-soft); }
.price-note-line { text-align: center; margin-top: 24px; color: var(--muted); font-size: 0.92rem; }

@media (max-width: 860px) {
  .about-grid, .price-grid { grid-template-columns: 1fr; gap: 30px; }
}
/* ---- FAQ (native details, no JS) ---- */
.faq-wrap { max-width: 780px; margin: 0 auto; }
.faq-wrap details { background: var(--card); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 12px; overflow: hidden; transition: border-color var(--t-base) var(--ease-out); }
.faq-wrap details[open] { border-color: var(--emerald); }
.faq-wrap summary { padding: 18px 22px; font-family: var(--sans); font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-wrap summary::-webkit-details-marker { display: none; }
.faq-wrap summary::after { content: "+"; font-family: var(--serif); font-size: 1.5rem; color: var(--gold); flex: none; line-height: 1; }
/* overflow hidden so the height animation clips the text rather than
   letting it spill out of a collapsing box. */
.faq-wrap .faq-a { padding: 0 22px 20px; color: var(--muted); font-size: 0.96rem;
  overflow: hidden; }
/* The plus turns into a cross rather than being swapped for a minus. A
   character swap cannot be animated, and swapping it mid-rotation flickers. */
.faq-wrap summary::after { transition: transform var(--t-slow) var(--ease-out), color var(--t-slow) var(--ease-out); }
.faq-wrap details[open] summary::after { transform: rotate(45deg); color: var(--emerald); }
.faq-wrap .faq-a p + p { margin-top: 10px; }

/* ---- Enquiry form ---- */
.form-card { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--emerald); border-radius: 4px; padding: 34px; }
.form-card h3 { margin-bottom: 6px; }
.form-card > p { color: var(--muted); font-size: 0.95rem; margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field label .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); border-radius: 3px; transition: border-color var(--t-base) var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--emerald); background: #fff; }
.field textarea { resize: vertical; min-height: 96px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-note { font-size: 0.8rem; color: var(--muted); margin-top: 14px; text-align: center; }
.form-status { display: none; padding: 14px 16px; border-radius: 3px; font-size: 0.92rem; margin-bottom: 16px; }
.form-status.ok { display: block; background: #eaf1fc; border: 1px solid var(--emerald); color: var(--emerald-dark); }
.form-status.err { display: block; background: #fbeceb; border: 1px solid #b23b32; color: #8f2f27; }

/* ---- Floating WhatsApp ---- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  /* Its own layer, so scrolling past it does not repaint it every frame. */
  will-change: transform;
  display: inline-flex; align-items: center; gap: 10px;
  background: #1f8f4e; color: #fff; font-family: var(--sans); font-weight: 600; font-size: 0.92rem;
  padding: 13px 20px 13px 16px; border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.28); }
.wa-float svg { flex: none; }
@media (max-width: 560px) {
  .wa-float { right: 14px; bottom: 14px; padding: 13px; }
  .wa-float .wa-label { display: none; }
  .field-row { grid-template-columns: 1fr; }
}

/* ---- Resources: year group layout ---- */
.subhero-lede { color: var(--muted); max-width: 44em; margin: 0 auto; font-size: 1.06rem; }
.res-stats { display: flex; justify-content: center; gap: 44px; margin-top: 30px; flex-wrap: wrap; }
.res-stats div { text-align: center; }
.res-stats strong { display: block; font-family: var(--serif); font-size: 2rem; color: var(--emerald); line-height: 1; }
.res-stats span { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.04em; }
.res-note { max-width: 700px; margin: 22px auto 0; text-align: center;
  font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.res-note a { color: var(--emerald); font-weight: 600; }

.yr-block { margin-bottom: 42px; }
.yr-head { display: flex; align-items: center; gap: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--gold); margin-bottom: 4px; }
.yr-badge { font-family: var(--serif); font-weight: 700; font-size: 0.95rem; color: #fff; background: var(--emerald); padding: 8px 16px; border-radius: 3px; white-space: nowrap; }
.yr-head h2 { font-size: 1.35rem; margin: 0; }
.yr-sub { font-size: 0.85rem; color: var(--muted); margin: 0; }
.yr-count { margin-left: auto; font-size: 0.82rem; color: var(--muted); white-space: nowrap; }

.topic-list { display: flex; flex-direction: column; }
.topic { display: flex; align-items: center; gap: 20px; padding: 16px 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.topic:last-child { border-bottom: none; }
.topic-info { flex: 1; min-width: 210px; }
/* h4 inside the resource tree, because the dropdown titles above it are
   already headings and a topic must not outrank them. */
.topic-info h3, .topic-info h4 { font-size: 1.05rem; margin-bottom: 2px;
  font-family: var(--serif); font-weight: 600; }
.topic-info p { font-size: 0.83rem; color: var(--muted); margin: 0; }
.topic-links { display: flex; gap: 10px; flex-wrap: wrap; }
.pdf { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; padding: 9px 16px; border-radius: 3px; border: 1.5px solid transparent;
  transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); white-space: nowrap; }
.pdf::before { content: "PDF"; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; padding: 2px 5px; border-radius: 2px; background: rgba(255,255,255,0.22); }
.pdf-q { background: var(--emerald); color: #fff; }
.pdf-q:hover { background: var(--emerald-dark); transform: translateY(-2px); }
.pdf-a { background: transparent; color: var(--gold); border-color: var(--gold); }
.pdf-a::before { background: rgba(47,90,168,0.16); }
.pdf-a:hover { background: var(--gold); color: #fff; transform: translateY(-2px); }
.topic.soon { opacity: 0.55; }
.pdf-soon { background: var(--cream-2); color: var(--muted); border-color: var(--line); cursor: default; }
.pdf-soon::before { background: rgba(0,0,0,0.06); }

/* ---------- the subscription half of the library ----------
   A paid worksheet's buttons are <button>, not <a>, because there is no
   address to put in an href: the file is not deployed, and the only
   route to it is a signed URL minted after the subscription is checked.
   So they need the resets a link never did. */
.topic-links button.pdf { font-family: var(--sans); cursor: pointer;
  -webkit-appearance: none; appearance: none; line-height: inherit; }
.topic-links button.pdf[disabled] { opacity: 0.6; cursor: progress; }

.topic-lock { display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--gold); vertical-align: baseline; }
.topic-lock svg { flex: none; }

/* Said once per row is enough. Dimming the whole row would be wrong:
   these are the better half of the library, not the retired half. */
.topic.is-paid { opacity: 1; }

.lib-note { font-size: 0.78rem; color: var(--muted); align-self: center; }

/* Somebody who is already paying should not read the word
   "Subscription" beside all 43 of the worksheets they are paying for.
   library.js adds .lib-covered once am_i_covered says so. */
body.lib-covered .topic-lock { display: none; }

/* The "Prefer paper? Download the PDF" link on a paid quiz page, which
   has to become a button for the same reason. Styled to stay looking
   like the link it replaced, because it sits mid-sentence. */
button.lib-inline { background: none; border: 0; padding: 0;
  font: inherit; color: var(--emerald); font-weight: 600;
  cursor: pointer; text-decoration: underline; }

.lib-gate { margin: 26px 0; }
.lib-loading { color: var(--muted); font-size: 0.9rem; }

@media (max-width: 620px) {
  .yr-head { flex-wrap: wrap; gap: 12px; }
  .yr-count { margin-left: 0; width: 100%; }
  .topic { align-items: flex-start; }
  .topic-links { width: 100%; }
  .pdf { flex: 1; justify-content: center; }
  .res-stats { gap: 28px; }
}
/* ================= QUIZ ================= */
.qz-bar { height: 6px; background: var(--cream-2); border-radius: 999px; overflow: hidden; }
.qz-bar-fill { height: 100%; width: 0; background: var(--emerald); transition: width var(--t-slow) var(--ease-out); }
.qz-progress { font-size: .82rem; color: var(--muted); margin: 8px 0 22px; text-align: right; }
.qz-sec { font-family: var(--serif); font-size: 1.1rem; color: var(--emerald); margin: 26px 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); }
.qz-sec:first-child { margin-top: 0; }
.qz-q { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
/* Hints and worked methods (quiz.js, from _tools/quiz_explain.py). */
.qz-hintbtn { order: 4; background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--emerald);
              font: inherit; font-size: .8rem; font-weight: 600; padding: 5px 12px; cursor: pointer; }
.qz-hintbtn:hover { border-color: var(--emerald); }
.qz-hintbtn:disabled { color: var(--muted); cursor: default; border-color: var(--line); }
.qz-hint { order: 5; flex-basis: 100%; margin: 2px 0 0 40px; padding: 9px 12px; background: var(--cream-2);
           border-left: 3px solid var(--emerald); border-radius: 3px; font-size: .9rem; color: var(--text); }
.qz-how summary { cursor: pointer; color: var(--emerald); font-weight: 600; font-size: .88rem; }
.qz-how ol { margin: 8px 0 4px 20px; font-size: .9rem; }
.qz-how li { margin-bottom: 4px; }
.qz-howrow td { border-top: none; padding-top: 0; }
/* "Show me how" is injected after the quiz is marked, so it is not wired to
   the FAQ animator. Animate it with modern CSS instead: browsers that support
   it slide the worked method open and shut, the rest simply snap, which is
   harmless. */
.qz-how::details-content { block-size: 0; overflow: clip; opacity: 0;
  transition: block-size .26s ease, opacity .26s ease, content-visibility .26s allow-discrete; }
.qz-how[open]::details-content { block-size: auto; opacity: 1; }
@media (max-width: 600px) { .qz-hint { margin-left: 0; } }
/* Exam mode (quiz.js): the panel above the questions and the countdown pill. */
.qz-exam { border: 1px solid var(--line); border-left: 4px solid var(--emerald); border-radius: 4px; background: var(--cream-2);
           padding: 14px 18px; margin: 4px 0 18px; }
.qz-exam p { color: var(--text); font-size: .92rem; margin-bottom: 10px; }
.qz-exam .qz-exam-k { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; color: var(--emerald); margin-bottom: 6px; }
.qz-exam-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.qz-exam select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: .9rem; background: #fff; }
.qz-timer { position: fixed; left: 16px; bottom: 16px; z-index: 60; background: var(--emerald-dark); color: #fff;
            font-weight: 700; font-size: 1.05rem; padding: 10px 16px; border-radius: 999px; font-variant-numeric: tabular-nums;
            box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.qz-timer.t-amber { background: #c98a1e; }
.qz-timer.t-red { background: #b23b32; }
.qz-slow { margin: 6px 0 10px 18px; }
.qz-slow li { margin-bottom: 6px; font-size: .92rem; }
/* Geometry diagrams inside a question (figs.py). */
.qz-q:has(.fig) { align-items: flex-start; }
.qz-eq .fig { display: block; margin: 10px 0 2px; }
.qz-eq .fig svg { display: block; max-width: 100%; height: auto; }
.qz-eq .dtab { border-collapse: collapse; margin: 10px 0 2px; font-size: .9rem; }
.qz-eq .dtab th, .qz-eq .dtab td { border: 1px solid var(--line); padding: 4px 10px; text-align: center; }
.qz-eq .dtab th { background: var(--cream-2); font-weight: 600; }
.qz-eq .box { display: inline-block; width: 1.5em; height: 1.2em; border: 1.6px solid var(--ink); border-radius: 2px; vertical-align: -.25em; }
.qz-num { width: 26px; height: 26px; flex: none; border: 1.4px solid var(--gold); border-radius: 50%; color: var(--gold); font-size: .76rem; font-weight: 700; display: grid; place-items: center; }
.qz-eq { flex: 1 1 260px; min-width: 130px; font-size: 1.02rem; }
.qz-in { display: flex; align-items: center; gap: 8px; }

/* Multiple choice options. These had no styling at all, so every option ran
   into the next one: "CARROT(o)ROSE(o)TULIP". Options are now separate
   targets big enough to tap, and the chosen one says so without relying on
   the radio dot alone. */
/* 0 1 auto, not 1 1 auto: the options must not grow into the question and
   force it to wrap after three words. */
.qz-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  flex: 0 1 auto; min-width: 0; }
.qz-opt { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px;
  background: var(--cream); font-size: 0.92rem; line-height: 1.2;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.qz-opt:hover { border-color: var(--emerald); background: #fff; }
.qz-opt input { flex: none; width: 16px; height: 16px; margin: 0;
  accent-color: var(--emerald); }
/* Guaranteed feedback: works everywhere, because the span is a sibling. */
.qz-opt input:checked + span { font-weight: 700; color: var(--emerald-dark); }
/* And the whole pill lights up where :has is supported. */
.qz-opt:has(input:checked) { border-color: var(--emerald); background: #eef3fd; }
.qz-opt:has(input:focus-visible) { outline: 2px solid var(--emerald); outline-offset: 2px; }
.qz-in label { font-size: .92rem; color: var(--muted); font-weight: 600; }
/* 92px clipped anything longer than about nine characters, so a hint like
   "just the number" showed as "just the n" and a value like 12.50 was
   tight. */
.qz-in input { width: 124px; padding: 9px 11px; font-family: var(--sans); font-size: .98rem; text-align: center; background: var(--cream); border: 1px solid var(--line); border-radius: 3px; }
.qz-in input:focus { outline: none; border-color: var(--emerald); background: #fff; }
.qz-note { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 12px; }

.qz-result { animation: fadeUp .35s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qz-score { display: flex; align-items: center; gap: 30px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--emerald); border-radius: 4px; padding: 30px; flex-wrap: wrap; }
.qz-ring { width: 132px; height: 132px; flex: none; }
.qz-ring circle:last-of-type { transition: stroke-dashoffset 1s var(--ease-out); }
.qz-ring-n { font-family: var(--serif); font-size: 26px; font-weight: 700; fill: var(--emerald); }
.qz-ring-l { font-size: 10px; fill: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.qz-score h2 { font-size: 1.5rem; margin: 8px 0 6px; }
.qz-score p { color: var(--muted); font-size: .96rem; }
.qz-guide { font-size: .8rem !important; font-style: italic; margin-top: 8px; }
.qz-band { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 11px; border-radius: 3px; color: #fff; }
.b-green { background: #1b7a4b; } .b-green2 { background: var(--emerald); }
.b-amber { background: #c98a1e; } .b-red { background: #b23b32; }

.qz-h { font-family: var(--serif); font-size: 1.18rem; color: var(--ink); margin: 34px 0 14px; }
.qz-bars { display: flex; flex-direction: column; gap: 15px; }
.qz-blabel { display: flex; justify-content: space-between; font-size: .9rem; font-weight: 600; margin-bottom: 5px; }
.qz-blabel span { color: var(--muted); font-weight: 500; }
.qz-btrack { height: 11px; background: var(--cream-2); border-radius: 999px; overflow: hidden; }
.qz-bfill { height: 100%; border-radius: 999px; transition: width .8s var(--ease-out); }
.f-green { background: #1b7a4b; } .f-amber { background: #c98a1e; } .f-red { background: #b23b32; }

.qz-tips { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.qz-tips li { padding: 13px 16px; border-radius: 3px; font-size: .93rem; border-left: 4px solid; background: var(--card); }
.t-ok { border-color: #1b7a4b; } .t-mid { border-color: #c98a1e; } .t-low { border-color: #b23b32; }

.qz-line { width: 100%; max-width: 540px; }
.qz-pt { font-size: 11px; fill: var(--muted); font-weight: 600; }
.qz-hist-empty { color: var(--muted); font-size: .92rem; font-style: italic; }

.qz-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--card); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.qz-table th { background: var(--emerald); color: #fff; text-align: left; padding: 10px 12px; font-family: var(--serif); font-weight: 600; font-size: .88rem; }
.qz-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.qz-table tr:last-child td { border-bottom: none; }
.qz-table .wa { color: #b23b32; font-weight: 600; }
.qz-table .ca { color: var(--emerald); font-weight: 700; }
.qz-allright { color: var(--emerald); font-weight: 600; }

.qz-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 0; }
.qz-cta { margin-top: 34px; background: var(--emerald); border-top: 5px solid var(--gold-soft); border-radius: 4px; padding: 32px; text-align: center; color: #fff; }
.qz-cta h3 { color: #fff; font-size: 1.3rem; margin-bottom: 8px; }
.qz-cta p { color: #ccd9ee; margin-bottom: 18px; }
.qz-cta .btn-solid { background: var(--gold); border-color: var(--gold); }
.qz-cta .btn-solid:hover { background: #24467f; border-color: #24467f; }

@media (max-width: 620px) {
  .qz-q { gap: 10px; }
  .qz-eq { min-width: 100%; order: 2; }
  .qz-in { order: 3; margin-left: auto; }
  .qz-opts { order: 3; width: 100%; justify-content: flex-start; }
  .qz-opt { flex: 1 1 auto; min-width: calc(50% - 6px); padding: 11px 14px; }
  .qz-score { gap: 18px; justify-content: center; text-align: center; }
  .qz-actions .btn { flex: 1; }
}
.pdf-online { background: var(--ink); color: #fff; }
.pdf-online::before { content: "NEW"; background: rgba(255,255,255,0.25); }
.pdf-online:hover { background: #33383f; transform: translateY(-2px); }
/* ---- Legal / prose pages ---- */
.legal { max-width: 780px; margin: 0 auto; }
.legal .updated { display: inline-block; background: var(--cream-2); border: 1px solid var(--line); border-radius: 3px; padding: 6px 14px; font-size: .82rem; color: var(--muted); margin-bottom: 30px; }
.legal h2 { font-size: 1.3rem; color: var(--emerald); margin: 34px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.legal h3 { font-size: 1.02rem; margin: 22px 0 6px; }
.legal p { color: var(--muted); margin-bottom: 12px; }
.legal ul { margin: 0 0 14px 20px; color: var(--muted); }
.legal li { margin-bottom: 7px; }
.legal strong { color: var(--ink); }
.legal a { color: var(--emerald); font-weight: 600; }
.legal-toc { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 3px; padding: 20px 24px; margin-bottom: 30px; }

/* The points and levels tables. Scrolls inside itself on a narrow screen
   rather than pushing the page sideways, because a child reading this is
   more likely to be on a phone than anyone reading the legal pages. */
.ptable-wrap { overflow-x: auto; margin: 0 0 18px; }
.ptable { width: 100%; border-collapse: collapse; font-size: .93rem; background: var(--card); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.ptable th { text-align: left; font-family: var(--sans); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; padding: 11px 16px; background: var(--cream-2); border-bottom: 1px solid var(--line); }
.ptable td { padding: 11px 16px; color: var(--muted); border-bottom: 1px solid var(--line); }
.ptable tr:last-child td { border-bottom: none; }
.ptable td strong { color: var(--ink); }
.ptable th:last-child, .ptable td:last-child { text-align: right; white-space: nowrap; }
.ptable tbody tr { transition: background-color var(--t-fast) var(--ease-out); }
.ptable tbody tr:hover { background: var(--cream-2); }
.legal-toc p { font-weight: 600; color: var(--ink); margin-bottom: 8px; font-size: .9rem; }
.legal-toc ol { margin-left: 18px; font-size: .9rem; }
.legal-toc li { margin-bottom: 4px; }
.callout { background: var(--cream-2); border-left: 4px solid var(--emerald); border-radius: 3px; padding: 18px 22px; margin: 20px 0; }
.callout p:last-child { margin-bottom: 0; }
.callout.warn { border-left-color: var(--gold); }
.contact-box { background: var(--emerald); color: #fff; border-radius: 4px; padding: 26px 28px; margin-top: 34px; }
.contact-box h3 { color: #fff; margin-top: 0; }
.contact-box p { color: #ccd9ee; }
.contact-box a { color: var(--gold-soft); }
a.badge { transition: border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
a.badge:hover { border-color: var(--emerald); color: var(--emerald); transform: translateY(-2px); }
/* ---- 3-tier pricing ---- */
.price-grid.three { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.price-card.feature { border-top-width: 5px; box-shadow: 0 10px 34px rgba(26,29,33,0.12); position: relative; }
.price-card .pop { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 3px; white-space: nowrap; }

/* ---- block booking offer ---- */
.block-offer { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  background: var(--emerald); border-top: 5px solid var(--gold-soft); border-radius: 4px; padding: 30px 34px; margin-top: 30px; color: #fff; }
.block-offer h3 { color: #fff; margin: 8px 0 6px; }
.block-offer p { color: #ccd9ee; font-size: .95rem; max-width: 34em; margin: 0; }
.offer-tag { display: inline-block; background: var(--gold); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 12px; border-radius: 3px; }
.offer-figures { display: flex; gap: 26px; flex-wrap: wrap; }
.offer-figures > div { text-align: center; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; padding: 14px 20px; min-width: 132px; }
.offer-figures .was { display: block; font-size: .82rem; color: #9fb4d4; text-decoration: line-through; }
.offer-figures strong { display: block; font-family: var(--serif); font-size: 1.7rem; color: var(--gold-soft); line-height: 1.15; }
.offer-figures .lbl { display: block; font-size: .72rem; color: #ccd9ee; margin-top: 3px; }

/* ---- one-to-one vs group comparison ---- */
.compare .cmp { border-top: 4px solid var(--emerald); position: relative; }
.compare .cmp-group { border-top-color: var(--gold); }
.cmp-tag { display: inline-block; background: var(--emerald); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .06em; padding: 5px 12px; border-radius: 3px; margin-bottom: 14px; }
.cmp-tag.alt { background: var(--gold); }
.cmp h3 { margin-bottom: 8px; border: none; padding: 0; }
.cmp-best { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .9rem; }

@media (max-width: 900px) {
  .price-grid.three { grid-template-columns: 1fr; }
  .block-offer { justify-content: center; text-align: center; }
  .offer-figures { justify-content: center; width: 100%; }
}
/* keep the header on one line at all desktop widths */
.header-inner { min-width: 0; }
.nav { gap: 20px; min-width: 0; }
.nav a { padding: 0.5rem 0.5rem; }
/* Not in the header at any width: it is already the floating button in the
   corner and a button in the hero, and the header cannot carry three. */
.header-cta .btn-wa { display: none; }

@media (max-width: 1180px) {
  .nav { gap: 12px; }
}
/* ---- Mobile usability fixes ---- */
/* iOS Safari zooms the page in whenever a focused input is under 16px.
   Force 16px on small screens so tapping a field never zooms. */
@media (max-width: 860px) {
  .field input, .field select, .field textarea,
  .qz-in input, .o-form input { font-size: 16px; }
  /* hamburger needs a proper 44px tap target */
  .nav-toggle { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
}
/* ---- mock exam promo on the homepage ---- */
.mock-promo { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: 4px;
  padding: 26px 30px; margin-top: 22px; }
.mock-promo h3 { margin: 10px 0 6px; }
.mock-promo p { color: var(--muted); font-size: .95rem; max-width: 46em; margin: 0; }
.mock-promo .btn { flex: none; }
@media (max-width: 700px) { .mock-promo { justify-content: center; text-align: center; } .mock-promo .btn { width: 100%; } }
.premium-promo { border-left: 5px solid #1f6b45; background: #f3f8f4; }
.premium-promo .offer-tag { background: #1f6b45; color: #fff; }
/* ---- inline booking block in the contact section ---- */
.book-inline { margin-top: 26px; padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--emerald); border-radius: 4px; }
.book-inline h3 { font-size: 1.05rem; margin-bottom: 5px; }
.book-inline p { color: var(--muted); font-size: .9rem; margin-bottom: 16px; }
/* 404 quick links */
a.panel { transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
a.panel:hover { border-color: var(--emerald); transform: translateY(-3px); }
/* Formspree honeypot: off-screen rather than display:none so bots still fill it */
.fs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* --- Ink & Signal Blue: buttons sitting on a blue panel invert to white --- */
.band-quote .btn-solid,
.res-cta .btn-solid,
.qz-cta .btn-solid,
.student-hero .btn-solid,
.block-offer .btn-solid,
.contact-box .btn-solid,
.price-card.trial .btn-solid {
  background: #fff; color: var(--emerald); border-color: #fff;
}
.band-quote .btn-solid:hover,
.res-cta .btn-solid:hover,
.qz-cta .btn-solid:hover,
.student-hero .btn-solid:hover,
.block-offer .btn-solid:hover,
.contact-box .btn-solid:hover,
.price-card.trial .btn-solid:hover {
  background: #eef3fb; color: var(--emerald-dark); border-color: #eef3fb;
}
.price-card.trial .btn-line,
.qz-cta .btn-line,
.res-cta .btn-line { color: #fff; border-color: rgba(255,255,255,.55); }
.price-card.trial .btn-line:hover,
.qz-cta .btn-line:hover,
.res-cta .btn-line:hover { border-color: #fff; color: #fff; }

/* conjoined UL monogram */
.seal svg.mono { width: 62%; height: 62%; display: block; }

/* headline result under the review */
.result-stat { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.28);
  display: flex; align-items: baseline; justify-content: center; gap: 14px; flex-wrap: wrap; }
.result-stat strong { font-family: var(--serif); font-size: 2.1rem; color: #fff; line-height: 1; }
.result-stat span { font-size: 0.92rem; color: #ccd9ee; }

/* payments page */
.paylist { border: 1px solid var(--line); border-top: 4px solid var(--emerald); border-radius: 4px; overflow: hidden; }
.payrow { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.payrow:last-child { border-bottom: none; }
.payinfo { flex: 1; min-width: 220px; }
.payinfo h3 { font-size: 1.05rem; margin-bottom: 4px; }
.payinfo p { font-size: 0.88rem; color: var(--muted); }
.payamt { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; color: var(--emerald); white-space: nowrap; }
.paybtn { flex: none; }
.pill { display: inline-block; font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
        text-transform: uppercase; background: var(--cream-2); border: 1px solid var(--line); color: var(--emerald);
        border-radius: 3px; padding: 3px 8px; vertical-align: middle; margin-left: 8px; }
.paynote { background: var(--cream-2); border-left: 4px solid var(--emerald); border-radius: 0 4px 4px 0;
           padding: 22px 26px; margin-top: 26px; }
.paynote h3 { font-size: 1.05rem; margin-bottom: 8px; }
.paynote p { font-size: 0.93rem; margin-bottom: 8px; }
.paynote p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .payrow { flex-direction: column; align-items: flex-start; } }

/* accounts: sign up and log in */
.authcard { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--emerald);
            border-radius: 4px; padding: 30px 32px; }
.authtabs { display: flex; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.authtab { appearance: none; background: none; border: none; border-bottom: 3px solid transparent;
           font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: var(--muted);
           padding: 10px 14px; cursor: pointer; margin-bottom: -1px; }
.authtab.on { color: var(--emerald); border-bottom-color: var(--emerald); }
.authtab:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: 3px; }
.gbtn { width: 100%; gap: 10px; }
.author { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--muted);
          font-size: 0.85rem; }
.author::before, .author::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.field .hint { font-size: 0.82rem; color: var(--muted); margin-top: 5px; }
.rolefs { border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; margin: 4px 0 18px; }
.rolefs legend { font-size: 0.85rem; font-weight: 600; padding: 0 6px; color: var(--ink); }
.roleopt { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.roleopt input { margin-top: 4px; flex: none; width: 17px; height: 17px; accent-color: var(--emerald); }
.roleopt b { display: block; font-size: 0.94rem; }
.roleopt em { display: block; font-style: normal; font-size: 0.84rem; color: var(--muted); margin-top: 2px; }
.checkline { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px; font-size: 0.88rem;
             line-height: 1.5; cursor: pointer; }
.checkline input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--emerald); }
.btn.full { width: 100%; margin-top: 6px; }
.authmsg { padding: 12px 16px; border-radius: 4px; font-size: 0.9rem; line-height: 1.5; margin-bottom: 18px; }
.authmsg.ok { background: #eaf1fc; border: 1px solid var(--emerald); color: var(--emerald-dark); }
.authmsg.err { background: #fbeceb; border: 1px solid #b23b32; color: #8f2f27; }
.authalt { text-align: center; font-size: 0.9rem; color: var(--muted); margin-top: 18px; }
.authalt a { color: var(--emerald); font-weight: 600; }
.authnote { background: var(--cream-2); border-left: 4px solid var(--emerald); border-radius: 0 4px 4px 0;
            padding: 20px 24px; margin-top: 26px; }
.authnote h3 { font-size: 1.02rem; margin-bottom: 8px; }
.authnote p { font-size: 0.9rem; }
@media (max-width: 860px) {
  .authcard { padding: 24px 20px; }
  .authtab { font-size: 0.9rem; padding: 10px 10px; }
}

/* resources: subject grouping inside a year block */
.subj-block { margin-top: 18px; }
.subj-block:first-of-type { margin-top: 10px; }
.subj-head { display: flex; align-items: baseline; gap: 10px; font-size: 0.82rem; font-weight: 700;
             letter-spacing: 0.13em; text-transform: uppercase; color: var(--emerald);
             font-family: var(--sans); padding-bottom: 7px; margin-bottom: 2px;
             border-bottom: 1px solid var(--line); }
.subj-head span { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
                  text-transform: none; color: var(--muted); margin-left: auto; }

/* ===================================================================
   Platform: sign up wizard and student dashboard
   =================================================================== */

/* --- role cards on the sign up page --- */
.rolecards { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 6px; }
.rolecard { position: relative; display: block; cursor: pointer; border: 2px solid var(--line);
  border-radius: 12px; background: #fff; padding: 18px 20px; transition: border-color var(--t-base), background var(--t-base); }
.rolecard input { position: absolute; opacity: 0; pointer-events: none; }
.rolecard .rc-ic { font-size: 1.35rem; line-height: 1; }
.rolecard b { display: block; font-size: 0.98rem; margin: 9px 0 5px; }
.rolecard em { display: block; font-style: normal; font-size: 0.84rem; color: var(--muted); line-height: 1.5; }
/* Selection is a class set by script rather than :has(input:checked), so the
   cards still highlight on browsers without :has (Safari before 15.4, Firefox
   before 121). The default choice ships with .sel already in the markup, so the
   first paint is right before the script runs. */
.rolecard.sel { border-color: var(--emerald); background: #f5f8fe;
  box-shadow: 0 0 0 4px rgba(47, 90, 168, .10); }
.rolecard.foc { outline: 2px solid var(--emerald); outline-offset: 2px; }
.rolecard.off { opacity: .6; background: #f7f9fc; cursor: default; grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rolecard.off b { margin: 0 0 3px; }
.rolecard .rc-tag { flex: none; font-size: 0.75rem; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; background: #fff; }
@media (max-width: 620px) { .rolecards { grid-template-columns: 1fr; } }

/* --- the four step wizard --- */
.steps { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 15px 20px; margin-bottom: 22px; }
.steps .sp { display: flex; align-items: center; gap: 9px; }
.steps .sp .n { width: 26px; height: 26px; border-radius: 99px; border: 1.5px solid var(--line);
  display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; color: var(--muted);
  background: #fff; flex: none; }
.steps .sp .t { font-size: 0.84rem; color: var(--muted); white-space: nowrap; }
.steps .sp.on .n { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.steps .sp.on .t { color: var(--ink); font-weight: 700; }
.steps .sp.was .n { background: #eaf6f0; border-color: #6cc39a; color: #1f7f55; }
.steps .rule { flex: 1; height: 1.5px; background: var(--line); }
@media (max-width: 760px) { .steps { flex-wrap: wrap; gap: 10px 16px; } .steps .rule { display: none; } }

/* --- switches on the permissions step --- */
.switchrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  padding: 17px 0; border-bottom: 1px solid var(--line); }
.switchrow:last-of-type { border-bottom: none; }
.switchrow .sr-b { font-size: 0.95rem; font-weight: 700; }
.switchrow .sr-p { font-size: 0.85rem; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.switch { flex: none; width: 46px; height: 26px; border-radius: 99px; background: #dbe4f2;
  border: none; padding: 0; position: relative; cursor: pointer; transition: background var(--t-base); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 99px; background: #fff; transition: left var(--t-base);
  box-shadow: 0 1px 3px rgba(23, 43, 77, .3); }
.switch[aria-checked="true"] { background: #2e9e6b; }
.switch[aria-checked="true"]::after { left: 23px; }
.switch:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.switch[disabled] { cursor: default; opacity: .55; }

/* --- the login card we hand to a parent --- */
.logincard { border: 1px solid #cfdcf3; border-radius: 12px; background: #eef3fd; padding: 20px 22px; }
.logincard .lc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.logincard .lc-k { font-size: 0.72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--emerald); margin-bottom: 6px; }
.logincard .lc-v { background: #fff; border: 1px solid #cfdcf3; border-radius: 9px;
  padding: 13px 15px; font-size: 1.02rem; font-weight: 700; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
@media (max-width: 620px) { .logincard .lc-grid { grid-template-columns: 1fr; } }

/* The hidden attribute has to beat any display we set in this file. A browser
   default of [hidden]{display:none} loses to any author rule that sets display,
   so hiding an element that is also styled inline-flex or grid silently fails. */
[hidden] { display: none !important; }

/* --- student dashboard --- */
.dash { background:
    radial-gradient(680px 420px at 8% -6%, rgba(47,90,168,.13), transparent 62%),
    radial-gradient(620px 420px at 98% 4%, rgba(232,163,61,.16), transparent 60%),
    linear-gradient(168deg, #f2f6fd 0%, #f7f9fc 46%, #fdf8f1 100%);
  min-height: 78vh; padding: 26px 0 60px; }
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  margin-bottom: 22px; flex-wrap: wrap; }
.dash-hi { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.dash-sub { font-size: 0.86rem; color: var(--muted); margin-top: 3px; }
.dash-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

.dcard { border: 1px solid #dbe4f2; border-radius: 14px; background: #fff; padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(23,43,77,.05), 0 8px 22px -14px rgba(23,43,77,.28); }
.dcard.hero { background: linear-gradient(140deg, #eef3fd 0%, #ffffff 72%); border-color: #c8d8f2; }
.dcard.tint-blue  { background: #eef3fd; border-color: #cfdcf3; box-shadow: none; }
.dcard.tint-amber { background: #fdf4e6; border-color: #f2dfbd; box-shadow: none; }
.dcard.tint-green { background: #eaf6f0; border-color: #c7e6d6; box-shadow: none; }
.dcard.tint-coral { background: #fdeeeb; border-color: #f4d3cb; box-shadow: none; }

.dlbl { font-size: 0.66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--muted); }
.dlbl.blue { color: #2f5aa8; } .dlbl.amber { color: #b5762a; }
.dlbl.green { color: #1f7f55; } .dlbl.coral { color: #b5453a; }
.dp { font-size: 0.83rem; color: #4b5563; line-height: 1.55; }
.dbig { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }

.dchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cfdcf3;
  border-radius: 99px; padding: 6px 13px; font-size: 0.76rem; font-weight: 600;
  color: #2f5aa8; background: #f5f8fe; }
.dchip.amber { border-color: #f2dfbd; background: #fdf4e6; color: #b5762a; }
.dchip.green { border-color: #c7e6d6; background: #eaf6f0; color: #1f7f55; }
.dchip.coral { border-color: #f4d3cb; background: #fdeeeb; color: #b5453a; }

.dbar { background: #eef2f8; border-radius: 4px; height: 9px; overflow: hidden; }
.dbar > span { display: block; height: 100%; border-radius: 4px; background: #2f5aa8; }
.dbar > span.warn { background: #e8a33d; }
.dbar > span.bad  { background: #d9634f; }
.dbar > span.good { background: #2e9e6b; }

.dlist { display: flex; flex-direction: column; }
.dlist .dl-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid #e9eff9; }
.dlist .dl-row:last-child { border-bottom: none; }
.dl-t { font-size: 0.88rem; font-weight: 600; }
.dl-s { font-size: 0.79rem; color: var(--muted); margin-top: 2px; }

.dempty { border: 1.5px dashed #cfdcf3; border-radius: 12px; background: #f9fbff;
  padding: 24px 22px; text-align: center; }
.dempty .de-t { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
.dempty .de-p { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }

.dskel { border-radius: 8px; background: linear-gradient(90deg, #eef2f8 25%, #f7f9fc 50%, #eef2f8 75%);
  background-size: 400% 100%; animation: dshimmer 1.4s ease-in-out infinite; }
@keyframes dshimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.dfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* --- set work --- */
.setrow { display: grid; grid-template-columns: 1.1fr 1fr 1.4fr; gap: 16px; align-items: end; }
@media (max-width: 760px) { .setrow { grid-template-columns: 1fr; } }

.filterbar { display: flex; gap: 26px; flex-wrap: wrap; }
.fgroup { display: flex; flex-direction: column; gap: 9px; }
.fchips { display: flex; gap: 7px; flex-wrap: wrap; }
.fchips .dchip { cursor: pointer; border-style: solid; font-family: inherit; }
.fchips .dchip.on { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.fchips .dchip:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }

.catgroup { margin-bottom: 18px; }
.cathead { display: flex; align-items: baseline; gap: 11px; margin-bottom: 10px; }
.cathead h3 { font-size: 1.02rem; margin: 0; }
.cathead .n { font-size: 0.79rem; color: var(--muted); }

.pickrow { display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 11px; background: #fff; margin-bottom: 8px;
  cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.pickrow:hover { border-color: #cfdcf3; background: #fbfcfe; }
.pickrow.on { border-color: var(--emerald); background: #f5f8fe; }
.pickrow.set { opacity: .5; cursor: default; }
.pickrow input { width: 18px; height: 18px; flex: none; accent-color: var(--emerald); }
/* Both are spans inside a span, so without this they sit on one line and
   read as "Times Tables and Mental ArithmeticYear 4 - Maths". The
   margin-top below always implied they were meant to stack. */
.pickrow .pt { display: block; font-size: 0.9rem; font-weight: 600; }
.pickrow .ps { display: block; font-size: 0.79rem; color: var(--muted); margin-top: 2px; }
.pickrow .pmeta { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }

/* Log in sits in the header on every page, in coral rather than the brand
   blue, so it is the one thing in the header that cannot be mistaken for
   navigation. People look for a way in and hunting for a URL is not a plan. */
.btn.btn-login {
  font-weight: 700;
  color: #fff;
  border-color: transparent;
  /* Sunset: violet into magenta, as bright as white text allows. Both stops
     sit just above 4.5:1 (4.68 and 4.52), so this is the ceiling: one shade
     lighter at either end drops below the readable threshold. Brighter than
     this needs dark text instead of white. */
  background: linear-gradient(135deg, #9459c4 0%, #c04d86 100%);
  box-shadow: 0 2px 14px -3px rgba(148, 89, 196, .55);
}
.btn.btn-login:hover {
  color: #fff;
  border-color: transparent;
  /* Hover darkens rather than lightens: there is no headroom above. */
  background: linear-gradient(135deg, #7f4bb0 0%, #ac4276 100%);
  box-shadow: 0 4px 18px -3px rgba(148, 89, 196, .7);
}
.btn.btn-login:focus-visible { outline: 2px solid #9459c4; outline-offset: 2px; }

/* Signed in: the bright call to action becomes the person who is signed in.
   An initial in a circle plus their first name, which is unmistakable and
   takes less width than the button it replaces. There are no profile photos
   anywhere in this platform by design, so the avatar is a letter. */
.btn.btn-login.signedin {
  background: #f1f4f8; background-image: none; color: #4b5563;
  border-color: var(--line); box-shadow: none; font-weight: 600;
  padding-left: 5px; gap: 9px; }
.btn.btn-login.signedin:hover {
  background: #e8edf4; background-image: none; color: var(--ink);
  border-color: #cfdcf3; box-shadow: none; }
.wa-avatar { width: 26px; height: 26px; border-radius: 99px; flex: none;
  display: grid; place-items: center; font-size: 0.78rem; font-weight: 700;
  line-height: 1; color: #fff; background: linear-gradient(140deg,#3a68b8,#24467f);
  text-transform: uppercase; letter-spacing: 0;
  /* A capital letter has no descender, so a box centred by geometry leaves the
     ink sitting about a pixel high. Measured, not guessed: the ink centre was
     1.04px above the circle centre. Two pixels of padding moves the content
     box down by one, which lands it. box-sizing keeps the circle at 26px. */
  padding-top: 2px; }
/* A long first name must not push the nav under the button: the pill keeps
   to nine characters and the full name is in the title. */
.btn.btn-login.signedin .wa-who { max-width: 9ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* On a narrow screen the circle alone says it. */
@media (max-width: 460px) {
  .btn.btn-login.signedin .wa-who { display: none; }
  .btn.btn-login.signedin { padding: 5px; }
}

/* Some people get motion sick, and some machines simply cannot keep up.
   Honour the setting rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* View transition pseudo-elements are not descendants of anything, so the
     universal rule above never reaches them and the page cross-fade would
     have carried on for someone who has asked the whole system to stop
     animating. Named separately for that reason. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ===================================================================
   Resources: nested dropdowns
   Four levels deep, so the levels have to be told apart at a glance
   rather than by counting indents.
   =================================================================== */
.res-tree { max-width: 880px; margin: 0 auto; }

.res-tree .acc { border: 1px solid var(--line); border-radius: 6px; background: var(--card);
  margin-bottom: 10px; overflow: hidden; }
.res-tree .acc > summary { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; cursor: pointer; list-style: none; font-family: var(--sans);
  padding: 15px 18px; }
.res-tree .acc > summary::-webkit-details-marker { display: none; }
.res-tree .acc > summary::after { content: "+"; font-family: var(--serif); font-size: 1.35rem;
  color: var(--emerald); flex: none; line-height: 1;
  transition: transform var(--t-slow) var(--ease-out); }
.res-tree .acc[open] > summary::after { transform: rotate(45deg); }
.res-tree .acc > summary:hover { background: #f7f9fc; }
.res-tree .acc > summary:focus-visible { outline: 2px solid var(--emerald); outline-offset: -2px; }

.res-tree .acc-t { font-weight: 700; }
.res-tree .acc-meta { margin-left: auto; display: flex; align-items: center; gap: 12px;
  text-align: right; }
.res-tree .acc-meta em { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.res-tree .acc-meta b { font-size: 0.76rem; font-weight: 700; color: var(--emerald);
  background: #eef3fd; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }

/* The body is what the script animates, so it must clip. */
.res-tree .acc-body { overflow: hidden; padding: 0 14px 14px; }

/* Each level a little quieter and a little further in than the one above. */
.res-tree .acc-1 > summary { font-size: 1.12rem; padding: 19px 20px; }
.res-tree .acc-1 { border-color: #cfdcf3; border-left: 4px solid var(--emerald); }
.res-tree .acc-2 > summary { font-size: 1rem; }
.res-tree .acc-3 > summary { font-size: 0.95rem; }
.res-tree .acc-4 > summary { font-size: 0.9rem; }
.res-tree .acc-4 { background: #fbfcfe; }
.res-tree .acc-2, .res-tree .acc-3, .res-tree .acc-4 { margin-bottom: 8px; }
.res-tree .acc-body > .acc:last-child { margin-bottom: 0; }

@media (max-width: 620px) {
  .res-tree .acc > summary { padding: 14px 14px; gap: 10px; }
  .res-tree .acc-1 > summary { padding: 16px 14px; font-size: 1.05rem; }
  /* The note is helpful on a laptop and just clutter on a phone. */
  .res-tree .acc-meta em { display: none; }
  .res-tree .acc-body { padding: 0 9px 10px; }
}

/* ===================================================================
   The paper runner. Deliberately its own world: no site nav, no
   floating buttons, nothing to click that is not the paper.
   =================================================================== */
body.papering { background: #f6f8fc; }
body.papering .wa-float { display: none; }

.pp-gate { min-height: 100vh; display: grid; place-items: center; padding: 30px 20px; }
.pp-gatecard { max-width: 560px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 38px 40px; box-shadow: 0 18px 50px -30px rgba(23,43,77,.5); }
.pp-gatecard h1 { font-size: 1.9rem; letter-spacing: -.02em; margin: 6px 0 12px; }
.pp-gatelede { color: var(--muted); font-size: 0.98rem; line-height: 1.6; }
.pp-rules { margin: 20px 0 26px; padding: 0; list-style: none; }
.pp-rules li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.92rem;
  color: var(--text); padding: 7px 0; }
.pp-rules li::before { content: "\2713"; color: #1f7f55; font-weight: 700; flex: none; }
.pp-gatebtns { display: flex; gap: 12px; flex-wrap: wrap; }

.pp-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; background: #fff;
  border-bottom: 1px solid var(--line); padding: 11px 22px; }
.pp-id { display: flex; align-items: center; gap: 13px; min-width: 0; }
.seal-sm { width: 32px; height: 32px; border-radius: 8px; }
.pp-title { font-weight: 700; font-size: 0.98rem; }
.pp-sub { font-size: 0.78rem; color: var(--muted); }
.pp-clock { text-align: right; flex: none; }
.pp-clocklbl { font-size: 0.62rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); }
.pp-timer { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--emerald-dark); line-height: 1.1; }
.pp-timer.warn { color: #b5453a; }

.pp-progress { height: 5px; background: #e7eefa; }
.pp-progress > span { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg,#3a68b8,#2f5aa8); transition: width var(--t-slow) var(--ease-out); }

.pp-main { max-width: 1120px; margin: 0 auto; padding: 22px 20px 60px;
  display: grid; grid-template-columns: 1fr 290px; gap: 20px; align-items: start; }
.pp-qcard { background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; min-height: 60vh; }
.pp-qhead { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; }
.pp-qnum { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.pp-qtools { display: flex; gap: 8px; align-items: center; }
.pp-qtools button { cursor: pointer; font-family: inherit; }
.pp-qtools button.on { background: #fdf4e6; border-color: #e8a33d; color: #b5762a; }

.pp-prompt { font-size: 1.05rem; line-height: 1.7; color: var(--ink); }
.pp-prompt .sum { font-size: 1.15rem; margin: 14px 0; font-weight: 600; }
.pp-prompt svg { max-width: 100%; height: auto; margin: 12px 0; }
.pp-prompt .fr { display: inline-flex; flex-direction: column; vertical-align: middle;
  text-align: center; margin: 0 3px; }
.pp-prompt .fr .nm { border-bottom: 1.5px solid currentColor; padding: 0 5px; }

.pp-answer { display: flex; flex-direction: column; gap: 9px; }
.pp-answerrow { display: flex; align-items: center; gap: 12px; }
.pp-answerrow input { width: 210px; padding: 13px 15px; font-family: var(--sans);
  font-size: 1.1rem; border: 1.5px solid #cfdcf3; border-radius: 10px; background: #fff; }
.pp-answerrow input:focus { outline: none; border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(47,90,168,.13); }
.pp-unit { font-weight: 700; color: var(--muted); }

.pp-confidence { display: flex; gap: 9px; flex-wrap: wrap; }
.pp-confidence button { cursor: pointer; font-family: inherit; opacity: .55; }
.pp-confidence button.on { opacity: 1; box-shadow: 0 0 0 2px currentColor inset; }

.pp-nav { display: flex; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }

.pp-side { display: flex; flex-direction: column; gap: 16px; }
.pp-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin: 12px 0 14px; }
.pp-palette button { aspect-ratio: 1; border-radius: 8px; border: 1.5px solid #dbe4f2;
  background: #fff; color: var(--muted); font-weight: 700; font-size: 0.76rem;
  cursor: pointer; font-family: inherit; padding: 0; }
.pp-palette button.done { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.pp-palette button.flag { background: #fdf4e6; border-color: #e8a33d; color: #b5762a; }
.pp-palette button.now { border: 2.5px solid var(--emerald); color: var(--emerald); }
.pp-legend { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; color: var(--muted); }
.pp-legend span { display: flex; align-items: center; gap: 8px; }
.pp-legend .sw { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid #dbe4f2;
  background: #fff; flex: none; }
.pp-legend .sw.done { background: var(--emerald); border-color: var(--emerald); }
.pp-legend .sw.flag { background: #fdf4e6; border-color: #e8a33d; }

.pp-modal { position: fixed; inset: 0; z-index: 60; background: rgba(23,43,77,.45);
  display: grid; place-items: center; padding: 20px; }
.pp-modalcard { background: #fff; border-radius: 16px; padding: 30px 32px; max-width: 520px;
  width: 100%; box-shadow: 0 26px 60px -22px rgba(23,43,77,.55); }
.pp-modalcard h2 { font-size: 1.4rem; letter-spacing: -.02em; margin-bottom: 10px; }
.pp-tally { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 0; margin: 16px 0; display: flex; flex-direction: column; gap: 9px; }
.pp-tally div { display: flex; justify-content: space-between; gap: 14px; font-size: 0.9rem; }
.pp-tally b { font-weight: 700; }
.pp-modalbtns { display: flex; gap: 12px; }
.pp-modalbtns .btn { flex: 1; }

@media (max-width: 900px) {
  .pp-main { grid-template-columns: 1fr; }
  .pp-side { order: -1; }
  .pp-palette { grid-template-columns: repeat(10, 1fr); }
  .pp-qcard { min-height: 0; }
}
@media (max-width: 560px) {
  .pp-gatecard { padding: 26px 22px; }
  .pp-main { padding: 16px 14px 50px; }
  .pp-qcard { padding: 20px 18px; }
  .pp-answerrow input { width: 100%; font-size: 16px; }
  .pp-palette { grid-template-columns: repeat(8, 1fr); }
}

/* ===================================================================
   The feedback report
   =================================================================== */
.rp-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; margin-bottom: 20px; }
.rp-head h1 { font-size: 1.7rem; letter-spacing: -.025em; margin: 6px 0 4px; }
.rp-back { font-size: 0.8rem; margin: 0; }
.rp-headbtns { display: flex; gap: 10px; flex-wrap: wrap; }

.rp-score { display: grid; grid-template-columns: 210px 1fr; gap: 28px;
  align-items: center; margin-bottom: 16px; }
.rp-ring { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.rp-block { margin-bottom: 16px; }
.rp-blockhead { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 13px; }
.rp-key { display: flex; gap: 14px; font-size: 0.78rem; color: var(--muted); }
.rp-key span { display: flex; align-items: center; gap: 7px; }
.rp-key .sw { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.sw.right { background: #eaf6f0; border: 1.5px solid #6cc39a; }
.sw.wrong { background: #fdeeeb; border: 1.5px solid #e08a7c; }
.sw.blank { background: #f3f6fb; border: 1.5px solid #cfdcf3; }

.rp-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 7px; }
.rp-strip button { aspect-ratio: 1; border-radius: 8px; font-weight: 700; font-size: 0.75rem;
  cursor: pointer; font-family: inherit; border: 1.5px solid #dbe4f2; background: #fff;
  color: var(--muted); padding: 0; }
.rp-strip button.right { background: #eaf6f0; border-color: #6cc39a; color: #1f7f55; }
.rp-strip button.wrong { background: #fdeeeb; border-color: #e08a7c; color: #b5453a; }
.rp-strip button.blank { background: #f3f6fb; border-color: #cfdcf3; color: #93a0b4; }
.rp-strip button.on { box-shadow: 0 0 0 3px rgba(47,90,168,.28); }

.rp-detail { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.rp-dq { font-size: 1rem; line-height: 1.65; color: var(--ink); margin-bottom: 14px; }
.rp-dq .sum { font-size: 1.1rem; margin: 10px 0; font-weight: 600; }
.rp-dq svg { max-width: 100%; height: auto; }
.rp-dpair { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.rp-dbox { border-radius: 12px; padding: 15px 17px; }
.rp-dbox .k { font-size: 0.66rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; }
.rp-dbox .v { font-size: 1.3rem; font-weight: 800; margin-top: 6px; }
.rp-dbox.yours { background: #fdeeeb; border: 1px solid #f4d3cb; }
.rp-dbox.yours.ok { background: #eaf6f0; border-color: #c7e6d6; }
.rp-dbox.theirs { background: #eaf6f0; border: 1px solid #c7e6d6; }

.rp-two { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.rp-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 14px; }
.rp-nextcard { border-radius: 12px; padding: 17px 18px; display: flex;
  flex-direction: column; gap: 9px; }

@media (max-width: 860px) {
  .rp-score { grid-template-columns: 1fr; }
  .rp-stats { grid-template-columns: 1fr 1fr; }
  .rp-two { grid-template-columns: 1fr; }
  .rp-next { grid-template-columns: 1fr; }
  .rp-dpair { grid-template-columns: 1fr; }
}
@media print {
  .rp-headbtns, .rp-back, .wa-float { display: none !important; }
  .dash { background: #fff; padding: 0; }
  .dcard { box-shadow: none; break-inside: avoid; }

  /* Browsers drop background colours when printing unless told not to, and
     this report says most of what it says in colour: the red and green of
     the question strip, the bands on the topic bars, the pie. Without this
     a printed report is a page of empty outlines. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* A parent printing this wants the whole thing, so open what is folded
     away rather than printing a button that cannot be pressed on paper. */
  #restTopics { display: block !important; }
  #moreTopics { display: none !important; }

  /* The detail panel is opened by tapping and means nothing on paper. */
  #detail[hidden] { display: none !important; }

  a[href]:after { content: ""; }          /* no URLs printed after links */
  section, .rp-block { break-inside: avoid; }
  body { background: #fff; }
}

/* Question furniture carried over from the printed paper. The paper styles
   these itself; the website never did, so a fill-in box rendered as nothing
   at all and a column subtraction lost its alignment. */
.pp-prompt .ibox, .rp-dq .ibox {
  display: inline-block; border: 1.5px solid var(--ink); border-radius: 3px;
  height: 30px; min-width: 54px; vertical-align: middle; margin: 0 6px;
  background: #fff; }
.pp-prompt .colsum, .rp-dq .colsum {
  border-collapse: collapse; margin: 14px 0; font-variant-numeric: tabular-nums; }
.pp-prompt .colsum td, .rp-dq .colsum td {
  padding: 3px 9px; text-align: center; font-size: 1.15rem; min-width: 30px; }
.pp-prompt .colsum .op, .rp-dq .colsum .op { text-align: right; color: var(--muted); }
.pp-prompt .colsum .rule td, .rp-dq .colsum .rule td { border-top: 2px solid var(--ink); }
.pp-prompt .eg, .rp-dq .eg {
  background: #f4f6f9; border-radius: 8px; padding: 12px 15px; margin: 12px 0;
  font-size: 0.96rem; }
.pp-prompt .egc, .rp-dq .egc { color: var(--muted); font-size: 0.86rem; margin-top: 5px; }
.pp-prompt .ar, .rp-dq .ar { color: var(--emerald); font-weight: 700; }
.pp-prompt .shp, .rp-dq .shp { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
.pp-prompt .sy, .rp-dq .sy { color: var(--emerald); }
.pp-prompt .dg, .rp-dq .dg { max-width: 340px; }
.pp-prompt .fr .dn, .rp-dq .fr .dn { display: block; padding: 0 5px; }
.pp-prompt .fl, .rp-dq .fl { display: inline-block; border: 1px solid var(--ink);
  padding: 5px 11px; font-size: 0.9rem; border-radius: 3px; }
.pp-prompt .fl.out, .rp-dq .fl.out { background: #f4f6f9; font-weight: 600; }
.pp-prompt .opts, .rp-dq .opts { margin-top: 10px; font-size: 0.92rem; line-height: 1.6; }
.pp-prompt .opts div, .rp-dq .opts div { margin-bottom: 4px; }

/* A question stem: the rule or diagram its parts depend on. Set apart so a
   child can see at a glance which bit is the standing context and which bit
   is the question they are answering now. */
.pp-prompt .qstem, .rp-dq .qstem {
  background: #f4f7fc; border-left: 3px solid #cfdcf3; border-radius: 0 8px 8px 0;
  padding: 13px 16px; margin-bottom: 16px; font-size: 0.96rem; color: var(--text); }
.pp-prompt .qstem .sum, .rp-dq .qstem .sum { font-size: 1.02rem; }

/* ===================================================================
   Watermarking and copy deterrence on the paper runner
   None of this stops a determined person: the questions have to reach
   the browser to be shown, so they can always be extracted. What it
   does is stop casual copying, and make a shared screenshot traceable
   to whoever shared it.
   =================================================================== */
.pp-wm { position: fixed; inset: 0; z-index: 5; pointer-events: none;
  opacity: .06; background-repeat: repeat; }

/* The question is not selectable. The answer box very much is: a child has
   to be able to edit what they typed. */
body.papering .pp-prompt,
body.papering .pp-qhead,
body.papering .pp-side { user-select: none; -webkit-user-select: none; }
body.papering input { user-select: text; -webkit-user-select: text; }

@media print {
  /* Printing the runner is a way of copying a live paper, so make that
     useless. This is keyed on body.papering, which NOTHING SETS: paper.js
     never adds the class, so the rule has never once applied. Left in
     place, and named here, because the intent is right and the hook is
     one line in paper.js whenever it matters. */
  body.papering .pp-main { display: none; }
  body.papering::after {
    content: "This paper is not for printing.";
    display: block; padding: 40px; font-size: 18px; }
}

/* The outcome pie sits beside the question strip, not instead of it: the
   strip answers "which ones", the pie answers "how many". */
.rp-outcome { display: grid; grid-template-columns: 1fr 210px; gap: 26px; align-items: start; }
.rp-stripwrap { min-width: 0; }
.rp-pie { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rp-plegend { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.rp-pkey { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text); }
.rp-pkey i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.rp-pkey b { font-weight: 700; }
.rp-pkey em { font-style: normal; margin-left: auto; color: var(--muted); font-size: 0.78rem; }
@media (max-width: 760px) {
  .rp-outcome { grid-template-columns: 1fr; }
  .rp-pie { order: -1; }
}

@keyframes navIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ===================================================================
   The floating WhatsApp button, sized to the page it is on
   Full on the pages where getting in touch is the point, an icon on
   the pages people are reading, and gone entirely on the platform,
   where someone is working and does not want to be sold to.
   =================================================================== */
.wa-float { transition: padding var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out); }
.wa-float.wa-compact { padding: 13px; border-radius: 99px; }
.wa-float.wa-compact .wa-label { display: none; }

/* Shrink it out of the way while the page is being scrolled, so it never
   sits on top of the thing being read. It comes back when scrolling stops. */
.wa-float.wa-quiet { transform: scale(.82); opacity: .72; }

/* A way to make it smaller, on the button itself rather than hidden in a
   menu. It only ever collapses to the icon, never to nothing, so there is
   no way to lose it and no puzzle about getting it back. */
.wa-shrink { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 0; display: grid;
  place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.16); font-family: inherit; }
.wa-shrink:hover { color: var(--ink); border-color: #cfdcf3; }
.wa-float.wa-compact .wa-shrink { display: none; }


/* ------------------------------------------------------------------ */
/* The paper builder (admin.html)                                      */
/* ------------------------------------------------------------------ */
.adm-tabs { display: flex; gap: 6px; flex-wrap: wrap; background: #eef2f8;
  border: 1px solid #dbe4f2; border-radius: 12px; padding: 5px; }
.adm-tab { font: inherit; font-size: 0.84rem; font-weight: 600; color: #4b5563;
  background: transparent; border: none; border-radius: 9px; padding: 8px 15px;
  cursor: pointer; transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.adm-tab:hover { color: #1f2733; }
.adm-tab.on { background: #fff; color: #2f5aa8; box-shadow: 0 1px 3px rgba(31,39,51,.1); }
.adm-tab:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }

.adm-split { display: grid; grid-template-columns: 1fr 330px; gap: 18px; align-items: start; }
.adm-split > .dash-col { min-width: 0; }

/* The difficulty mix, as one bar rather than three numbers to add up. */
.mixbar { display: flex; height: 34px; border-radius: 9px; overflow: hidden;
  border: 1px solid #dbe4f2; }
.mixbar > span { display: flex; align-items: center; justify-content: center;
  font-size: 0.74rem; font-weight: 700; color: #fff; letter-spacing: .02em;
  transition: width var(--t-slow) var(--ease-out); min-width: 0; }
.mixbar .mix-e { background: #2e9e6b; }
.mixbar .mix-s { background: #2f5aa8; }
.mixbar .mix-h { background: #a8321c; }

.mixrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.mixrow label { font-size: 0.78rem; font-weight: 600; color: #4b5563;
  display: flex; flex-direction: column; gap: 5px; }
.mixrow input { width: 100%; padding: 9px 11px; border: 1px solid #d5deec;
  border-radius: 8px; font: inherit; font-size: 0.9rem; background: #fbfcfe; }
.mixrow input:focus { outline: none; border-color: var(--emerald); background: #fff; }

/* A generated question, with the answer beside it. */
.qrow { display: flex; gap: 13px; align-items: flex-start; padding: 13px 0;
  border-bottom: 1px solid #e9eff9; flex-wrap: wrap; }
.qrow:last-child { border-bottom: none; }
.qn { width: 26px; height: 26px; flex: none; border-radius: 8px; background: #eef3fd;
  color: #2f5aa8; font-size: 0.76rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.qmain { flex: 1 1 260px; min-width: 0; }
.qprompt { font-size: 0.92rem; color: #1f2733; line-height: 1.5; }
.qprompt .sum { font-size: 1.02rem; font-weight: 600; margin: 7px 0; }
.qans { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem;
  color: #1f7f55; background: #eaf6f0; border: 1px solid #c7e6d6; border-radius: 7px;
  padding: 5px 10px; white-space: nowrap; }

.dchip.off { opacity: .5; }
.dchip.off:disabled { cursor: default; }
button.dchip { font: inherit; cursor: pointer; }
button.dchip:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }

/* A template, with what it was set to and what it turned out to be. */
.tplcard { margin-bottom: 14px; }
.tplhead { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; }
.tplgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 15px; }
.tcell { margin-top: 7px; }
.tcell .dbar { margin-bottom: 5px; }
.tplfoot { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef2f8; }

.papergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.papercard { display: flex; flex-direction: column; }
.papercard.retired { opacity: .62; }
.paperacts { margin-top: auto; padding-top: 14px; }

@media (max-width: 900px) {
  .adm-split { grid-template-columns: 1fr; }
  .tplgrid { grid-template-columns: 1fr; }
  .mixrow { grid-template-columns: 1fr; }
  .adm-tabs { width: 100%; }
  .adm-tab { flex: 1 1 auto; }
}


/* ------------------------------------------------------------------ */
/* Speed drills (drill.html)                                           */
/* Phone first. This is the one thing a child will do standing up.     */
/* ------------------------------------------------------------------ */
.dr-hero { display: grid; grid-template-columns: 1fr 240px; gap: 26px; align-items: center; }
.dr-herotitle { font-size: 1.85rem; font-weight: 700; letter-spacing: -.025em; margin: 10px 0 8px; }
.dr-score { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: 8px; }
.dr-heroacts { display: flex; gap: 11px; margin-top: 16px; flex-wrap: wrap; }
.dr-herostats { display: flex; flex-direction: column; gap: 11px; }
.dr-stat { padding: 15px 17px; text-align: center; box-shadow: none; }
.dr-stat .dbig { margin: 5px 0 2px; }
.dr-of { font-size: 0.95rem; font-weight: 600; color: var(--muted); }

.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 13px; }
.dr-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 17px 18px; text-align: left; font: inherit; cursor: pointer;
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
.dr-card:hover { transform: translateY(-2px); border-color: #b9cdee; }
.dr-card.on { border-color: #2f5aa8; box-shadow: 0 0 0 1px #2f5aa8 inset; }
.dr-card:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.dr-icon { font-size: 1.3rem; line-height: 1; }
.dr-name { font-size: 0.95rem; font-weight: 700; }

.dr-streak { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.dr-flame { width: 42px; height: 42px; border-radius: 12px; background: #fdf4e6;
  display: grid; place-items: center; font-size: 1.15rem; flex: none; }
.dr-week { display: flex; gap: 6px; }
.dr-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 700; background: #eef2f8; color: #6b7385; }
.dr-dot.ok { background: #2e9e6b; color: #fff; }
.dr-dot.at { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #cfdcf3; }

/* ---- the run itself ---- */
.drill-running .site-header, .drill-running .announce,
.drill-running .site-footer { display: none; }
.drill-running .dash { padding-top: 22px; }

.dr-stage { max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.dr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dr-top .dp { font-weight: 700; color: #24467f; }
.dr-clockbar { height: 8px; }
.dr-clockbar > span { width: 100%; background: #2e9e6b; transition: width var(--t-base) linear; }
.dr-clockbar > span.warn { background: #e8a33d; }
.dr-clockbar > span.bad  { background: #d9634f; }
.dr-topline { display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 0.76rem; font-weight: 700; color: #4b5563; }

.dr-qwrap { position: relative; min-height: 108px; display: grid; place-items: center; }
.dr-q { font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em; text-align: center;
  color: #1f2733; font-variant-numeric: tabular-nums; line-height: 1.25; }
.dr-q b { font-weight: 700; }
.dr-q sup, .dr-q sub { font-size: 0.55em; }

/* Covers the question rather than sitting beside it, so the eye does not
   have to travel to find out whether it was right. */
.dr-flash { position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 14px; font-size: 2.4rem; font-weight: 700; }
.dr-flash.ok { background: #eaf6f0; color: #2e9e6b; }
.dr-flash.no { background: #fdeeeb; color: #b5453a; }
.dr-was { font-size: 1.7rem; }

.dr-answer { border: 2px solid #2f5aa8; border-radius: 13px; height: 56px;
  display: grid; place-items: center; font-size: 1.5rem; font-weight: 700;
  color: #24467f; font-variant-numeric: tabular-nums; background: #fff; }
.dr-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 11px; }
.dr-key { font: inherit; font-size: 1.25rem; font-weight: 700; color: #1f2733;
  background: #fff; border: 1px solid #dbe4f2; border-radius: 12px; height: 54px;
  cursor: pointer; transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.dr-key:active { background: #eef3fd; transform: scale(.97); }
.dr-key.mut { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.dr-key:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.dr-enter { width: 100%; height: 50px; margin-top: 11px; }

.dr-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.dr-opt { display: flex; align-items: center; gap: 10px; font: inherit; font-size: 0.95rem;
  text-align: left; background: #fff; border: 1px solid #dbe4f2; border-radius: 12px;
  padding: 14px 15px; cursor: pointer; transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); }
.dr-opt:hover { border-color: #b9cdee; background: #fbfcfe; }
.dr-opt:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.dr-k { width: 24px; height: 24px; border-radius: 7px; background: #eef3fd; color: #2f5aa8;
  font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; flex: none; }

.dr-quit { font: inherit; font-size: 0.8rem; color: var(--muted); background: none;
  border: none; cursor: pointer; text-decoration: underline; padding: 8px; }

/* ---- how you did ---- */
.dr-stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 16px; }
.dr-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; margin: 13px 0 16px; }
.dr-qdot { height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700; background: #eef2f8; color: #6b7385; }
.dr-qdot.ok { background: #eaf6f0; color: #1f7f55; }
.dr-qdot.no { background: #fdeeeb; color: #b5453a; }
.dr-missq { font-size: 0.95rem; font-weight: 700; }
.dr-missfoot { margin-top: 11px; font-size: 0.8rem; color: #6b7280; }

@media (max-width: 760px) {
  .dr-hero { grid-template-columns: 1fr; }
  .dr-herostats { flex-direction: row; }
  .dr-herostats > * { flex: 1; }
  .dr-stats4 { grid-template-columns: 1fr 1fr; }
  .dr-dots { grid-template-columns: repeat(5, 1fr); }
  .dr-q { font-size: 2rem; }
  .dr-streak { gap: 13px; }
  .dr-week { width: 100%; justify-content: space-between; }
}

.dr-pair { display: block; font-size: 1.55rem; font-weight: 700; letter-spacing: .01em;
  line-height: 1.45; }
.dr-pair.ask { color: #2f5aa8; }
.dr-arrow { color: #6b7385; font-weight: 400; padding: 0 4px; }
@media (max-width: 760px) { .dr-pair { font-size: 1.3rem; } }
/* The alphabet under a letter-code question, and a small hint beside one. */
.dr-az { display: block; margin-top: 14px; font-size: .82rem; font-weight: 500; letter-spacing: .12em;
  color: #6b7385; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.dr-sub { font-size: .8em; font-weight: 400; color: #6b7280; }


/* ------------------------------------------------------------------ */
/* The parent view: the family overview, and one child in full         */
/* ------------------------------------------------------------------ */
.cv-face { width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, #3a68b8, #24467f); color: #fff;
  font-size: 1.05rem; font-weight: 700; line-height: 1;
  display: grid; place-items: center; padding-top: 2px; }

/* ---- family overview ---- */
.fam { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.famcard { display: flex; flex-direction: column; gap: 14px; }
.famhead { display: flex; align-items: center; gap: 12px; }
.famname { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.famnums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.famnum { text-align: center; background: #f7f9fc; border: 1px solid #eef2f8;
  border-radius: 10px; padding: 10px 6px; }
.famnumv { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.famnuml { font-size: 0.66rem; color: var(--muted); margin-top: 3px; line-height: 1.3; }
.famquiet { grid-column: 1 / -1; margin: 0; }
.famacts { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: auto; }

/* ---- one child ---- */
.cv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.cv-stat { padding: 15px 17px; box-shadow: none; }
.cv-stat .dbig { margin: 5px 0 2px; }
.cv-svg { width: 100%; height: auto; display: block; margin-top: 10px; }

.cv-topic { padding: 11px 0; border-bottom: 1px solid #eef2f8; }
.cv-topic:last-child { border-bottom: none; }
.cv-topichead { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.cv-topic .dbar { margin-bottom: 6px; }

/* When they work. One hue getting darker, because this is one quantity
   rather than four categories. The count is printed in each cell as well
   as shaded, so it never depends on telling two blues apart. */
.cv-heat { display: flex; flex-direction: column; gap: 5px; }
.cv-heatrow { display: grid; grid-template-columns: 74px repeat(7, 1fr); gap: 5px;
  align-items: center; }
.cv-heatlbl { font-size: 0.72rem; font-weight: 600; color: #4b5563; }
.cv-heatday { font-size: 0.68rem; font-weight: 700; color: #6b7385; text-align: center; }
.cv-cell { height: 30px; border-radius: 7px; display: grid; place-items: center; }
.cv-num { font-size: 0.7rem; font-weight: 700; font-style: normal; color: #24467f; }
.cv-num.on { color: #fff; }
.cv-heatfoot { margin-top: 13px; }

.cv-note { border-top: 1px solid #cfdcf3; padding: 13px 0 2px; }
.cv-note:first-of-type { border-top: none; padding-top: 4px; }
.cv-notehead { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 6px; }
.cv-notebody { line-height: 1.6; }
.cv-notebit { margin-top: 7px; font-size: 0.8rem; }
.cv-notebit b { color: #1f2733; }

.cv-switch { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 11px 0; border-bottom: 1px solid #eef2f8; cursor: pointer; }
.cv-switch:last-of-type { border-bottom: none; }
.cv-switch > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.cv-switch input { width: 20px; height: 20px; flex: none; margin-top: 2px;
  accent-color: #2f5aa8; cursor: pointer; }

@media (max-width: 900px) {
  .cv-stats { grid-template-columns: 1fr 1fr; }
  .cv-heatrow { grid-template-columns: 62px repeat(7, 1fr); gap: 4px; }
  .cv-heatlbl { font-size: 0.66rem; }
  .famnums { grid-template-columns: repeat(2, 1fr); }
}


/* Drill modes and the pace chart */
.dr-modecard { margin: 20px 0 6px; }
.dr-modehead { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dr-pickhead { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 20px 0 12px; }

.dr-pace { width: 100%; height: auto; display: block; margin-top: 10px; }
.dr-pacekey { display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: 10px; font-size: 0.76rem; color: #4b5563; }
.dr-pacekey span { display: flex; align-items: center; gap: 6px; }
.dr-pacekey i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.dr-pacekey i.ok { background: #2e9e6b; }
.dr-pacekey i.no { background: #a8321c; }
.dr-pacemid { color: #6b7385; }


/* ------------------------------------------------------------------ */
/* A comprehension passage, readable while the questions are answered  */
/* ------------------------------------------------------------------ */
.qz-haspsg { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 26px;
  align-items: start; }
.qz-haspsg > .qz-bar, .qz-haspsg > .qz-progress, .qz-haspsg > #qzForm,
.qz-haspsg > #qzSubmit, .qz-haspsg > .qz-note { grid-column: 2; }
.qz-psg { grid-column: 1; grid-row: 1 / span 5; position: sticky; top: 88px;
  border: 1px solid #dbe4f2; border-radius: 14px; background: #fff;
  max-height: calc(100vh - 120px); display: flex; flex-direction: column; overflow: hidden; }
.qz-psghead { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 17px; border-bottom: 1px solid #eef2f8; background: #f7f9fc; flex: none; }
.qz-psgtitle { font-size: 0.82rem; font-weight: 700; letter-spacing: -.01em; }
.qz-psgtoggle { font: inherit; font-size: 0.76rem; font-weight: 600; color: #2f5aa8;
  background: none; border: none; cursor: pointer; padding: 4px 6px; }
.qz-psgtoggle:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.qz-psgbody { padding: 15px 16px 20px; overflow-y: auto; font-size: 0.855rem; line-height: 1.85; }
.qz-psgbody p { margin-bottom: 11px; }
/* The introduction that sets the scene, before the numbered lines start. */
.qz-psgbody .psgi { font-style: italic; color: #4b5563; padding-bottom: 10px;
  border-bottom: 1px solid #eef2f8; margin-bottom: 13px; }
/* One row per line, so the number beside a line is the number the questions
   cite. The numbers are not selectable, so copying the passage copies the
   words and not a column of digits. */
.qz-psgbody .psgp { margin: 0 0 12px; }
/* The number sits in its own gutter, so if a line does have to wrap on a
   narrow screen the continuation lines up under the text rather than under
   the digits. */
.qz-psgbody .psgl { display: flex; align-items: baseline; }
.qz-psgbody .psgl .ln { flex: none; width: 22px; color: #6b7385;
  font-size: 0.72rem; font-weight: 700; text-align: right; padding-right: 9px;
  user-select: none; }
.qz-psgbody .psgl .lt { flex: 1; min-width: 0; }

@media (max-width: 900px) {
  .qz-haspsg { display: block; }
  .qz-psg { position: sticky; top: 62px; z-index: 5; margin-bottom: 18px;
    max-height: 52vh; box-shadow: 0 6px 18px rgba(31,39,51,.09); }
  .qz-psgbody { max-height: calc(52vh - 46px); }
  .qz-psgbody[hidden] { display: none; }
}


/* ------------------------------------------------------------------ */
/* The crash course                                                    */
/* ------------------------------------------------------------------ */
.cr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.cr-stat { padding: 15px 17px; box-shadow: none; text-align: center; }
.cr-stat .dbig { margin: 5px 0 2px; }
.cr-herotitle { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 11px 0 7px; }

.cr-step { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0;
  border-bottom: 1px solid #cfdcf3; }
.cr-step:last-child { border-bottom: none; }
.cr-stepn { width: 24px; height: 24px; border-radius: 50%; flex: none; background: #2f5aa8;
  color: #fff; font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; }

.cr-day { display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border: 1px solid #dbe4f2; border-radius: 12px; background: #fff; margin-bottom: 9px; }
.cr-n { width: 30px; height: 30px; border-radius: 9px; flex: none; background: #eef2f8;
  color: #4b5563; font-size: 0.78rem; font-weight: 700; display: grid; place-items: center; }
.cr-main { flex: 1; min-width: 0; }
.cr-open { font-size: 0.78rem; font-weight: 600; color: #2f5aa8; text-decoration: none;
  border: 1px solid #cfdcf3; border-radius: 99px; padding: 5px 13px; white-space: nowrap; }
.cr-open:hover { background: #eef3fd; }

.cr-day.cr-now { border-color: #2f5aa8; box-shadow: 0 0 0 1px #2f5aa8 inset; }
.cr-day.cr-now .cr-n { background: #2f5aa8; color: #fff; }
.cr-day.cr-done { opacity: .72; }
.cr-day.cr-done .cr-n { background: #eaf6f0; color: #1f7f55; }
/* A missed day is greyed rather than red-flagged. It has already happened and
   there is nothing to do about it; shouting about it is what makes a child
   stop opening the plan. */
.cr-day.cr-missed { opacity: .5; background: #fbfcfe; }
.cr-day.cr-missed .cr-n { background: #f4f6fa; color: #6b7385; }

@media (max-width: 760px) {
  .cr-stats { grid-template-columns: 1fr 1fr; }
  .cr-day { flex-wrap: wrap; }
  .cr-main { flex: 1 1 60%; }
}


/* The subscription page */
.sb-price { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; margin: 12px 0 8px; }
.sb-per { font-size: 0.9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.pw-shown { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem;
  font-weight: 700; letter-spacing: .04em; color: #1f7f55; background: #fff;
  border: 1px solid #c7e6d6; border-radius: 8px; padding: 9px 13px; margin-top: 7px;
  user-select: all; word-break: break-all; }

.pw-msg { margin-top: 11px; padding: 9px 12px; border-radius: 8px; font-size: 0.82rem;
  line-height: 1.5; }
.pw-msg.ok   { background: #eaf6f0; border: 1px solid #c7e6d6; color: #1f7f55; }
.pw-msg.err  { background: #fdeeeb; border: 1px solid #f4d3cb; color: #a8321c; }
.pw-msg.busy { background: #eef3fd; border: 1px solid #cfdcf3; color: #2f5aa8; }

.pw-row { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.pw-row .pw-shown { flex: 1; margin-top: 0; }

/* GL English question layouts, used inside a generated paper */
.glline { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.glg { border: 1px solid #dbe4f2; border-radius: 9px; padding: 7px 11px;
  font-size: 0.94rem; background: #fbfcfe; }
.glg b { color: #2f5aa8; margin-right: 6px; }
.glopts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.glopts span { border: 1px solid #dbe4f2; border-radius: 99px; padding: 6px 14px;
  font-size: 0.92rem; background: #fff; }
/* Whole sentences to choose between (CSSE Starting Point punctuation):
   one per row, so a missing capital or comma is not lost in a wrap. */
.glline.glstack { flex-direction: column; align-items: flex-start; }

/* The passage above every comprehension question in a CSSE Starting Point
   paper. The questions come one at a time, so each carries the passage in
   its own scrolling box rather than pointing at a page the child cannot see. */
.pp-prompt .ppsg { max-height: 300px; overflow-y: auto; border: 1px solid #dbe4f2;
  border-radius: 12px; background: #fbfcfe; margin: 0 0 16px; font-size: 0.9rem; line-height: 1.8; }
.pp-prompt .fig { margin: 12px 0 2px; }
.pp-prompt .fig svg { display: block; margin: 0; }

/* Topic chips grouped by subject in the paper builder */
.adm-subject { flex-basis: 100%; margin: 10px 0 2px; color: #2f5aa8; }
.adm-subject:first-child { margin-top: 0; }

.adm-subject.adm-none { color: #6b7385; margin-top: 16px; }
.adm-subject.adm-sub { color: #6b7385; margin: 6px 0 2px; font-size: 0.6rem; }

/* Paper builder: select all / clear, above the topic chips. Picking
   nineteen topics one at a time to build a full paper was the ask. */
.adm-allnone {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.adm-allnone .dchip { cursor: pointer; }
.adm-allnone .dp { margin-left: 4px; flex: 1 1 220px; min-width: 0; }

/* ------------------------------------------------------------------ */
/* The locked door                                                     */
/*                                                                     */
/* Paid papers are removed from lists by a row policy, so a parent      */
/* without a subscription used to see a shorter library and no reason   */
/* for it. These styles are for showing the thing and locking it        */
/* instead of hiding it.                                                */
/* ------------------------------------------------------------------ */
.locked-door {
  text-align: center;
  padding: 30px 24px;
  border: 1.5px solid #d8e2f2;
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fc 100%);
}
.locked-door .ld-key {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8effa;
  color: #2f5aa8;
}
.locked-door .ld-t {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 1.06rem;
  font-weight: 600;
  color: #1f3d70;
  margin-bottom: 6px;
}
.locked-door .ld-p {
  font-size: .88rem;
  line-height: 1.55;
  color: #5f6874;
  max-width: 40ch;
  margin: 0 auto;
}
.locked-door .ld-a { margin-top: 16px; }

/* A single locked row in a list of things to pick */
.dchip.lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: #d8c7a4;
  background: #fdf7e8;
  color: #7a5518;
}
.dchip.lock svg { width: 13px; height: 13px; }

.pickrow.locked {
  opacity: .72;
  background: #fbfbfc;
  cursor: not-allowed;
}
.pickrow.locked .pt { color: #5f6874; }
.pickrow.locked input { cursor: not-allowed; }

/* The strip that explains a page full of padlocks */
.lockbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 16px;
  border: 1.4px solid #e6d6b4;
  border-radius: 10px;
  background: #fdf9ef;
}
.lockbar .lb-i { color: #7a5518; flex: 0 0 auto; display: grid; place-items: center; }
.lockbar .lb-t { flex: 1 1 260px; min-width: 0; font-size: .87rem; line-height: 1.5; color: #6b5320; }
.lockbar .lb-t b { color: #4a3a12; }

/* Renaming a paper, and setting the two things that decide whether it can
   act as a starting point. */
.paperedit {
  margin-top: 14px;
  padding: 14px;
  border: 1.4px solid #d8e2f2;
  border-radius: 10px;
  background: #fbfcfe;
}
.paperedit .pe-l {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #5f6874;
  margin: 0 0 4px;
}
.paperedit .pe-l + input,
.paperedit .pe-l + select { margin-bottom: 12px; }
.paperedit input[type="text"],
.paperedit select {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: .88rem;
  border: 1.2px solid #cfdcf3;
  border-radius: 8px;
  background: #fff;
}
.paperedit .pe-c {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .86rem;
  cursor: pointer;
}
.paperedit .pe-c input { width: 17px; height: 17px; accent-color: var(--emerald); }
.paperedit .pe-n:empty { display: none; }
.paperedit .pe-n.warn {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1.2px solid #e6d6b4;
  border-radius: 8px;
  background: #fdf9ef;
  font-size: .8rem;
  line-height: 1.5;
  color: #6b5320;
}
.papercard .dl-s.startingpoint {
  margin-top: 3px;
  font-weight: 600;
  color: #2f7a52;
}

/* .dl-row gets its layout from `.dlist .dl-row`, and the paper card uses
   the class outside a .dlist, so the label and its value ran together as
   "Average so far-". Same shape of bug as .pickrow's title and subtitle. */
.papercard .dl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* The pace sentence under the timing chart. It used to be SVG text, which
   does not wrap, so three question labels ran off the side of the chart. */
.rp-timenote { margin-top: 10px; }

/* The subscription's contents, on the subscribe page and in setup. The
   lists say what the money buys, so they are the point of the card rather
   than a footnote to the price. */
.sb-list { margin-top: 20px; }
.sb-list + .sb-list { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line, #e4eaf5); }
.sb-list ul { list-style: none; margin: 10px 0 0; padding: 0; }
.sb-list li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 9px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #4b5563;
}
.sb-list li:last-child { margin-bottom: 0; }
.sb-list li b { color: #1f3d70; font-weight: 600; }
.sb-list li:before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 6px;
  height: 10px;
  border: solid #2f7a52;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* The free list is not a sales point, so its marks are quieter. */
.sb-list + .sb-list li:before { border-color: #93a0b4; }

/* The sibling rate, under the headline price. Quieter than the price
   itself, because the first number is the one that matters at a glance. */
.sb-second {
  margin-top: -4px;
  margin-bottom: 2px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #5f6874;
}

/* ---------- monthly and yearly, side by side ----------
   Two cards rather than a toggle. A toggle hides one of the two numbers
   a parent is trying to compare, and the yearly price only reads as good
   value while the monthly one it saves against is visible next to it. */
.sb-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.sb-plan {
  border: 1.5px solid var(--line, #e4eaf5);
  border-radius: 8px;
  padding: 18px 18px 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
/* The one being recommended. Marked with a border rather than a colour
   wash, so it reads as "this one" without the other looking withdrawn. */
/* The highlighted plan. Starts on yearly; subscribe.js moves it to whichever
   plan the reader points at or taps. A ring rather than a thicker border, so
   moving it never shifts the layout. */
.sb-plan { transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-slow) var(--ease-out),
  transform var(--t-slow) var(--ease-out); cursor: pointer; }
.sb-plan.is-on { border-color: var(--emerald, #2f5aa8);
  box-shadow: 0 0 0 1px var(--emerald, #2f5aa8), 0 18px 38px -24px rgba(23,43,77,.45); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sb-plan.is-on { transform: translateY(-4px); }
}
.sb-plan-t {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #5f6874;
}
.sb-plan-p {
  font-family: var(--serif);
  font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em;
  margin: 10px 0 2px; line-height: 1;
}
.sb-plan-p span {
  font-family: var(--sans);
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0;
  color: #5f6874; margin-left: 7px;
}
.sb-plan-s {
  font-size: 0.83rem; color: #5f6874; line-height: 1.5;
  /* Pushes each button to the bottom, so the two line up however
     differently the two descriptions wrap. */
  flex: 1; margin-bottom: 16px;
}
.sb-plan .btn { width: 100%; justify-content: center; }

/* Shown to a child looking at the plans. They are allowed to start
   checkout, because a parent is normally sitting beside them, but they
   should not be surprised by a card form on the next screen. */
.sb-childnote {
  margin-top: 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--gold, #2f5aa8);
  background: rgba(47, 90, 168, 0.06);
  border-radius: 0 5px 5px 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* The child's password is a field the parent fills in, not a label. It used
   to be generated and shown, above a sentence promising the parent could
   "see it and change it whenever you want". Neither was true: they did not
   choose it, and it is hashed the moment it is set, so it can never be read
   back. Letting them type it is what makes the sentence honest. */
.lc-input {
  width: 100%;
  padding: 7px 10px;
  border: 1.4px solid #cfdcf3;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f3d70;
}
.lc-input:focus {
  outline: none;
  border-color: #2f5aa8;
  box-shadow: 0 0 0 3px rgba(47, 90, 168, 0.14);
}
label.lc-k { display: block; cursor: pointer; }

/* Choices you can press.
   A question that shows four lettered groups and then asks the child to
   TYPE the letter is asking them to do a step the screen has already done.
   These are the same elements, made pressable, filling the same answer box
   the child could still type into by hand. */
.pick {
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  user-select: none;
}
.pick:hover { border-color: #2f5aa8; background: #f2f6fd; }
.pick:focus-visible {
  outline: none;
  border-color: #2f5aa8;
  box-shadow: 0 0 0 3px rgba(47, 90, 168, .18);
}
.pick.on {
  border-color: #2f5aa8;
  background: #2f5aa8;
  color: #fff;
}
.pick.on b { color: #fff; }

/* The N for "no mistake", which the child previously had to know to type. */
.glnone { margin-top: 10px; }
.glnone span { font-weight: 600; }


/* Timing bars are buttons: each one opens the same question detail the
   numbered strip opens. */
.tbar { cursor: pointer; }
.tbar:hover { opacity: .78; }

/* A moment of emphasis when "Practise what you dropped" jumps you down the
   page, so it is obvious the button did something and where it landed. */
.flash { animation: flashcard 1.4s ease-out; }
@keyframes flashcard {
  0%   { box-shadow: 0 0 0 0 rgba(47, 90, 168, .35); }
  30%  { box-shadow: 0 0 0 6px rgba(47, 90, 168, .18); }
  100% { box-shadow: 0 0 0 0 rgba(47, 90, 168, 0); }
}
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }

/* Ticking off a worksheet or a quiz.
   A paper marks itself done when it is submitted. A printed worksheet and a
   quiz that keeps its score in the browser cannot, so without this they stay
   on the dashboard as overdue for ever, however much the child has done. */
.dchip.tick {
  border-color: #b9dcc7;
  background: #eef8f2;
  color: #2c6f4c;
  cursor: pointer;
}
.dchip.tick:hover { border-color: #2c6f4c; background: #e0f2e8; }
.dchip.tick:disabled { opacity: .6; cursor: default; }


/* ---------------- level, badges and themes on the dashboard ---------------- */
.lvl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lvl-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.lvl-n { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 600; }
.lvl-bar { height: 9px; background: var(--cream-2); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; margin: 12px 0 8px; }
.lvl-fill { height: 100%; background: var(--emerald); border-radius: 99px; transition: width var(--t-slow) var(--ease-out); }

.gbadge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin-top: 4px; }
.gbadge { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 13px 14px; text-align: center;
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.gbadge:hover { border-color: var(--gold-soft); transform: translateY(-1px); }
.gbadge-ic { font-size: 1.5rem; line-height: 1; display: block; margin-bottom: 7px; }
.gbadge-n { font-size: .84rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.gbadge-p { font-size: .74rem; color: var(--muted); margin-top: 4px; line-height: 1.4; }
/* Not yet earned. Shown rather than hidden, because a locked badge is a
   thing to aim at and an absent one is nothing at all. */
.gbadge.locked { background: var(--cream-2); border-style: dashed; }
.gbadge.locked .gbadge-ic { filter: grayscale(1); opacity: .35; }
.gbadge.locked .gbadge-n { color: var(--muted); }

.theme-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; }
.theme-sw { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0;
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); }
.theme-sw:hover:not(:disabled) { transform: scale(1.08); }
.theme-sw.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--ink); }
.theme-sw:disabled { cursor: not-allowed; opacity: .32; }
.theme-lock { font-size: .74rem; color: var(--muted); margin-top: 8px; }


/* ---------------- the certificate ----------------
   Sized to A4 portrait with a margin the printer will not eat. On screen it
   sits on the page like a sheet of paper; on paper it IS the page, and
   everything else is taken off. */
.cert-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 820px; margin: 0 auto 18px; }
.cert-bar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cert-bar select { font-family: var(--sans); font-size: .9rem; padding: 8px 11px; background: var(--card); border: 1px solid var(--line); border-radius: 3px; color: var(--text); }

.cert { max-width: 820px; margin: 0 auto 40px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(22,35,58,.08); }
.cert-inner { border: 2px solid var(--emerald); margin: 14px; padding: 54px 48px 40px; text-align: center; position: relative; }
.cert-seal { width: 54px; height: 54px; border-radius: 50%; background: var(--emerald); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.cert-seal svg { width: 34px; height: 34px; }
.cert-brand { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: .04em; margin-bottom: 30px; }
.cert-kicker { font-family: var(--sans); text-transform: uppercase; letter-spacing: .2em; font-size: .7rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.cert-name { font-family: var(--serif); font-size: clamp(2.1rem, 6vw, 3.1rem); font-weight: 700; color: var(--ink); line-height: 1.1; margin-bottom: 26px; }
.cert-level { font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 600; color: var(--emerald); margin-bottom: 6px; }
.cert-sub { font-size: .88rem; color: var(--muted); margin-bottom: 30px; }
.cert-rule { height: 1px; background: var(--line); margin: 0 auto 22px; max-width: 420px; }
.cert-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; text-align: left; }
.cert-foot-k { font-family: var(--sans); text-transform: uppercase; letter-spacing: .14em; font-size: .64rem; font-weight: 600; color: var(--muted); }
.cert-foot-v { font-family: var(--serif); font-size: 1rem; color: var(--ink); font-weight: 600; }
.cert-sig { text-align: right; }
.cert-sig-name { border-bottom: 1px solid var(--line); padding-bottom: 3px; margin-bottom: 5px; }

@media print {
  @page { size: A4 portrait; margin: 14mm; }
  /* Everything that is not the certificate comes off the paper. */
  .cert-bar, .authmsg, .wa-float, .site-header, .site-footer, .announce { display: none !important; }
  .dash { background: #fff; padding: 0; }
  .container { padding: 0; max-width: none; }
  .cert { max-width: none; margin: 0; border: none; box-shadow: none; break-inside: avoid; }
  .cert-inner { margin: 0; padding: 40px 36px 30px; }
  /* The blue border and the seal are most of what makes this look like a
     certificate rather than a memo, and browsers drop background colours
     when printing unless told not to. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* The progress page prints as the term report: nav, buttons and the
   WhatsApp float go, the cards and charts stay in one column. */
@media print {
  body.progress-page .site-header, body.progress-page .site-footer,
  body.progress-page .wa-float, body.progress-page .no-print { display: none !important; }
  body.progress-page .dash-grid { display: block; }
  body.progress-page .dcard { break-inside: avoid; box-shadow: none; border: 1px solid #d8dde6; margin-bottom: 14px; }
}

/* ---------- the guide books (guides.html) ---------- */
/* One exam at a time. The catalogue was twelve tall cards in a narrow column
   beside three information cards, which meant a page of scrolling to reach
   the CSSE books; now a tab picks the exam, a toggle picks grid or rows, and
   the information cards sit under the shelf in a row of their own. */
.gd-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.gd-bar .fchips .dchip { font-size: 0.86rem; padding: 7px 14px; }
.gd-view { display: inline-flex; border: 1px solid #cfdcf3; border-radius: 99px; background: #fff; padding: 3px; }
.gd-viewbtn { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 0.8rem; font-weight: 600; color: var(--muted); padding: 5px 12px; border-radius: 99px; }
.gd-viewbtn svg { fill: currentColor; }
.gd-viewbtn.on { background: var(--ink); color: #fff; }
.gd-viewbtn:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.gd-tabnote { font-size: 0.86rem; color: var(--muted); margin: 0 0 14px; min-height: 1.2em; }

.gd-shelf { display: grid; gap: 16px; margin-bottom: 26px; }
.gd-shelf.gd-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gd-shelf.gd-rows { grid-template-columns: 1fr; }

.gd-card { display: grid; gap: 16px; align-items: start; }
.gd-grid .gd-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 12px; height: 100%; }
/* The price and button sit on one line at the foot of every card in the
   grid, whatever the length of the title above. */
.gd-grid .gd-body { display: flex; flex-direction: column; height: 100%; }
.gd-grid .gd-buy { margin-top: auto; padding-top: 12px; }
.gd-grid .gd-card .dp { margin-bottom: 0; }
.gd-rows .gd-card { grid-template-columns: 150px 1fr; gap: 18px; }
.gd-cover { width: 150px; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 6px 18px rgba(26,29,33,.10); display: block; }
.gd-grid .gd-cover { width: 100%; max-width: 190px; margin: 0 auto; }
.gd-cover-empty { height: 212px; background: var(--cream-2); }
.gd-card .dl-t { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--ink); }
.gd-meta { font-size: 0.78rem; color: var(--muted); margin: 3px 0 8px; }
/* In the grid the blurb keeps to four lines so every card is the same
   height; in rows there is room for all of it. */
.gd-grid .gd-card .dp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gd-more { display: inline-block; font-size: 0.84rem; font-weight: 600; color: var(--emerald); margin-top: 6px; }
.gd-buy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.gd-price { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.gd-price s { color: var(--muted); font-weight: 400; font-size: 0.95rem; margin-right: 4px; }
/* The saving is the one green thing on the card. Green rather than red:
   red says "reduced, hurry", which is not the brand; green says "you keep
   this", and it is the colour the site already uses for good news. The
   member's own price is green too, so it reads as theirs. */
.gd-now.gd-member { color: #1f7f55; }
.gd-tags { display: flex; flex-direction: column; gap: 4px; }
.gd-save { display: inline-flex; align-items: center; align-self: flex-start; gap: 5px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: .01em; color: #fff; background: #1f7f55;
  border-radius: 99px; padding: 3px 10px; line-height: 1.3; white-space: nowrap; }
.gd-save-line { color: #1f7f55; background: #eaf6f0; border: 1px solid #c7e6d6; font-weight: 600; text-decoration: none; }
a.gd-save-line:hover { background: #d9efe3; }
.gd-note { font-size: 0.78rem; color: var(--muted); margin-top: 6px; }
.gd-note:empty { display: none; }
.gd-ok { color: #24614a; }
.gd-err { color: #8c3818; }
/* An owned book in the shop: no price, one line saying so, and the way to
   the copy. The price would only say what has already been paid. */
.gd-owned .gd-buy { margin-top: 10px; }
.gd-ownedline { font-size: 0.86rem; font-weight: 600; color: #1f7f55; display: inline-flex; align-items: center; gap: 6px; }

/* The bookshelf: what this account owns. */
.gd-mine { margin-bottom: 26px; }
.gd-mine-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.gd-mine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.gd-minecard { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center;
  background: #fff; border: 1px solid #c7e6d6; border-radius: 12px; padding: 12px 14px; }
.gd-minecard .gd-cover { width: 64px; box-shadow: 0 3px 10px rgba(26,29,33,.12); }
.gd-minecard .dl-t { font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.gd-minecard .gd-meta { margin: 2px 0 8px; }

.gd-about { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .gd-about { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .gd-rows .gd-card { grid-template-columns: 1fr; }
  .gd-rows .gd-cover { width: 120px; }
}

/* ---------- one page per guide book (guide-*.html) ---------- */
.gp-hero { text-align: left; padding: 34px 0 44px; }
.gp-crumbs { font-size: 0.82rem; color: var(--muted); margin: 0 0 18px; max-width: none; }
.gp-crumbs a { color: var(--emerald); font-weight: 600; }
.gp-top { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.gp-coverwrap { display: block; }
.gp-cover { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 14px 34px -12px rgba(26,29,33,.28); display: block; background: #fff; }
.gp-main h1 { font-size: 2.2rem; margin-bottom: 12px; }
.gp-lede { margin: 0 0 18px; max-width: none; }
.gp-facts { display: flex; gap: 26px; flex-wrap: wrap; margin: 0 0 20px; }
.gp-facts div { display: flex; flex-direction: column; }
.gp-facts strong { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; color: var(--ink); }
.gp-facts span { font-size: 0.8rem; color: var(--muted); }
.gp-buy { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.gp-buy #buybox { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gp-sample { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gp-sample .gd-note { margin: 0; }
.gp-bundle { font-size: 0.86rem; color: var(--muted); margin: 0; }
.gp-bundle a { color: var(--emerald); font-weight: 600; }
.gp-cols h2 { font-size: 1.5rem; margin-bottom: 12px; }
.gp-prose { color: var(--text); font-size: 1.02rem; }
.gp-chapters { list-style: none; columns: 2; column-gap: 24px; padding: 0; margin: 0; }
.gp-chapters li { display: flex; gap: 10px; align-items: baseline; break-inside: avoid; padding: 5px 0;
  border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.gp-chnum { flex: none; min-width: 2.2em; font-family: var(--sans); font-size: 0.78rem; font-weight: 700; color: var(--emerald); }
.gp-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.gp-other { display: flex; flex-direction: column; gap: 8px; text-align: center; font-size: 0.86rem; color: var(--ink); font-weight: 600; }
.gp-other img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 6px 18px rgba(26,29,33,.10); }
.gp-other:hover { color: var(--emerald); }
@media (max-width: 860px) {
  .gp-top { grid-template-columns: 1fr; }
  .gp-coverwrap { max-width: 260px; }
  .gp-chapters { columns: 1; }
}

/* ---------- data tables in articles ---------- */
.tablewrap { max-width: 900px; margin: 0 auto; overflow-x: auto; }
.datatable { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.datatable th, .datatable td { padding: 9px 12px; text-align: center; border-bottom: 1px solid var(--line); }
.datatable th { font-family: var(--sans); font-size: 0.74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--cream-2); }
.datatable tr.sub th { font-size: 0.7rem; }
.datatable td:first-child { text-align: left; font-weight: 600; color: var(--ink); min-width: 14em; }
.datatable td strong { color: var(--emerald); }
.datatable tbody tr:hover { background: #f7f9fc; }
.gp-steps li { font-size: 1rem; }

/* ---------- the CSSE score calculator ---------- */
.cc-wrap { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.cc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.cc-hint { font-size: 0.74rem; font-weight: 400; color: var(--muted); }
.cc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cc-form input, .cc-form select { font-family: inherit; font-size: 1rem; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); width: 100%; }
.cc-form input:focus, .cc-form select:focus { outline: 2px solid var(--emerald); outline-offset: 1px; border-color: var(--emerald); }
.cc-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 10px; }
.cc-actions .gd-note { margin: 0; }
.cc-total { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cc-big { font-family: var(--serif); font-size: 3.2rem; font-weight: 700; color: var(--emerald); line-height: 1; }
.cc-sub { font-size: 0.9rem; color: var(--muted); }
.cc-line { margin: 10px 0 16px; color: var(--text); }
.cc-parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.cc-parts div { background: var(--cream-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 0.82rem; color: var(--muted); display: flex; flex-direction: column; }
.cc-parts span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.cc-parts strong { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); line-height: 1.15; margin: 2px 0; }
.cc-parts em { font-style: normal; color: #1f7f55; font-weight: 600; }
.cc-h3 { font-size: 1.1rem; margin: 6px 0 10px; }
.cc-table td:first-child { min-width: 12em; }
.cc-area { display: block; font-size: 0.74rem; font-weight: 400; color: var(--muted); }
.cc-yes { color: #1f7f55; font-weight: 700; }
.cc-no { color: #8c3818; font-weight: 600; }
.cc-no span { display: block; font-size: 0.74rem; font-weight: 400; color: var(--muted); }
.cc-na { color: var(--muted); font-size: 0.82rem; }
@media (max-width: 860px) { .cc-grid { grid-template-columns: 1fr 1fr; } .cc-parts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .cc-grid { grid-template-columns: 1fr; } }

/* ---------- the 11+ advice hub ---------- */
.hub-tool-band { padding: 26px 0 8px; }
.hub-tool { display: flex; align-items: center; justify-content: space-between; gap: 26px; text-decoration: none;
  background: linear-gradient(140deg, #eef3fd 0%, #ffffff 72%); border: 1px solid #c8d8f2; border-radius: 14px; padding: 26px 30px; color: inherit; }
.hub-tool:hover { border-color: var(--emerald); }
.hub-tool-text h2 { font-size: 1.6rem; margin: 2px 0 8px; }
.hub-tool-text p:last-child { color: var(--muted); margin: 0; max-width: 48em; }
.hub-tool .btn { flex: none; }
.hub-group { margin-bottom: 34px; }
.hub-group h2 { font-size: 1.35rem; margin-bottom: 14px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.hub-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; text-decoration: none; color: inherit; }
.hub-card:hover { border-color: var(--emerald); }
.hub-t { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.hub-s { font-size: 0.92rem; color: var(--muted); }
.hub-m { font-size: 0.76rem; color: var(--muted); margin-top: auto; padding-top: 4px; }
@media (max-width: 760px) { .hub-tool { flex-direction: column; align-items: flex-start; } }

/* ---------- home page: the calculator and the advice list ---------- */
.home-advice { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: stretch; }
.home-advice-tool { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit;
  background: linear-gradient(140deg, #eef3fd 0%, #ffffff 72%); border: 1px solid #c8d8f2; border-radius: 14px; padding: 28px 30px; }
.home-advice-tool:hover { border-color: var(--emerald); }
.home-advice-tool h3 { font-size: 1.5rem; margin: 0; }
.home-advice-tool p:not(.eyebrow) { color: var(--muted); margin: 0 0 8px; }
.home-advice-tool .btn { align-self: flex-start; margin-top: auto; }
.home-advice-list { display: flex; flex-direction: column; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; }
.home-advice-list a { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.home-advice-list a:hover { color: var(--emerald); }
.home-advice-list a.home-advice-all { border-bottom: none; font-family: var(--sans); font-size: 0.9rem; color: var(--emerald); padding-top: 14px; }
@media (max-width: 860px) { .home-advice { grid-template-columns: 1fr; } }

/* ---------- the 11+ progress tracker ---------- */
.tk-wrap { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.tk-grid { grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
.tk-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.tk-grid input, .tk-grid select, .tk-targets input { font-family: inherit; font-size: 1rem; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); width: 100%; }
.tk-grid input:focus, .tk-grid select:focus, .tk-targets input:focus { outline: 2px solid var(--emerald); outline-offset: 1px; border-color: var(--emerald); }
.tk-grid input[readonly] { background: var(--cream-2); color: var(--muted); }
.tk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tk-targets { margin-top: 16px; }
.tk-targets > label { display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; font-weight: 600; }
/* the schools: chips in three area groups */
.tk-area { margin-top: 10px; }
.tk-area-t { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-chip { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid #cfdcf3; border-radius: 99px; padding: 6px 12px; cursor: pointer; }
.tk-chip b { font-weight: 700; color: var(--muted); font-size: 0.78rem; }
.tk-chip:hover { border-color: var(--emerald); }
.tk-chip.on { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.tk-chip.on b { color: #dfe8f8; }
.tk-chip:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.tk-child { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; margin-top: 16px; }
.tk-child select { font-family: inherit; font-size: 0.92rem; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
#account .gd-note { margin-top: 14px; }
/* the chart */
.tk-chart { margin-top: 10px; }
.tk-svg { width: 100%; height: auto; display: block; }
.tk-gline { stroke: #e8ecf2; stroke-width: 1; }
.tk-future { fill: #f4f6f9; }
.tk-ylab { font-family: var(--sans); font-size: 12px; fill: #5f6874; text-anchor: end; }
.tk-xlab { font-family: var(--sans); font-size: 12px; fill: #5f6874; }
.tk-xlab-c { text-anchor: middle; }
.tk-tlab { font-family: var(--sans); font-size: 12px; fill: #2a2f36; font-weight: 600; }
.tk-vlab { font-family: var(--sans); font-size: 13px; font-weight: 700; }
.tk-pill { font-family: var(--sans); font-size: 12px; font-weight: 700; fill: #fff; }
.tk-test { stroke: #1a1d21; stroke-width: 1.5; stroke-dasharray: 4 4; }
.tk-floor { stroke: #b2481f; stroke-width: 1.2; stroke-dasharray: 2 5; }
.tk-target { stroke: #8fa8d6; stroke-width: 1.2; }
.tk-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted); margin-top: 6px; }
.tk-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
/* the words: three numbers, then chips */
.tk-summary { margin-top: 14px; }
.tk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.tk-stats-t { grid-column: 1 / -1; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: -4px; }
.tk-stat { background: var(--cream-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; }
.tk-stat span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--muted); }
.tk-stat strong { font-family: var(--serif); font-size: 1.7rem; line-height: 1.15; color: var(--ink); margin: 2px 0; }
.tk-stat em { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.tk-stat-proj { background: #eef3fd; border-color: #c8d8f2; }
.tk-stat-proj strong { color: var(--emerald); }
.tk-schools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tk-school { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; border-radius: 99px; padding: 6px 12px; border: 1px solid; }
.tk-school b { font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: .04em; }
.tk-school.ok { background: #eaf6f0; border-color: #c7e6d6; color: #1f6b45; }
.tk-school.maybe { background: #fdf4e6; border-color: #f2dfbd; color: #8a5a14; }
.tk-school.no { background: #fdeeeb; border-color: #f4d3cb; color: #8c3818; }
.tk-how { margin-top: 6px; }
.tk-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.tk-share .gd-note { margin: 0; flex: 1 1 260px; }
@media (max-width: 600px) { .tk-share { flex-direction: column; align-items: stretch; } .tk-share .gd-note { flex: none; } }
.rp-track .btn { margin-top: 12px; }
.tk-prefill { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #eef3fb; color: #1d3c78; }
.tk-results { margin-top: 14px; }
.tk-details summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--emerald); }
.tk-table { margin-top: 10px; }
.tk-table td { text-align: center; }
.tk-table td:first-child { text-align: left; min-width: 9em; font-weight: 500; }
.tk-raw { display: block; font-size: 0.72rem; color: var(--muted); }
.tk-del { border: none; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 2px 6px; }
.tk-del:hover { color: #8c3818; }
@media (max-width: 760px) { .tk-grid { grid-template-columns: 1fr; } .tk-stats { grid-template-columns: 1fr; } }

/* ---- the 11+ letter signup (newsletter.js puts it above the footer) ---- */
.letter { padding: 0 0 62px; }
.letter-box { background: var(--emerald); color: #fff; border-radius: 4px; padding: 34px 36px; position: relative; }
.letter-box .eyebrow { color: var(--gold-soft); }
.letter-box h2 { color: #fff; font-size: 1.55rem; margin: 0 0 10px; }
.letter-box > p { color: #ccd9ee; font-size: 0.98rem; margin-bottom: 20px; }
.letter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.letter-form input[type="email"] { flex: 1 1 260px; font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid #fff; border-radius: 3px; background: #fff; color: var(--ink, #1c2331); }
.letter-form input[type="email"]:focus { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.letter-form .btn-solid { background: #fff; color: var(--emerald-dark); border-color: #fff; }
.letter-form .btn-solid:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--emerald-dark); }
.letter-note { color: #ccd9ee; font-size: 0.84rem; margin: 12px 0 0; }
.letter-note a { color: var(--gold-soft); }
.letter-status { margin: 14px 0 0; padding: 12px 14px; border-radius: 3px; font-size: 0.92rem; line-height: 1.5; }
.letter-status.ok { background: #fff; color: var(--emerald-dark); }
.letter-status.err { background: #fbeceb; color: #8f2f27; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 600px) { .letter-box { padding: 26px 22px; } .letter-form .btn-solid { width: 100%; } }

/* ---- the social row in the footer (added 24 September 2026) ---- */
.footer-social { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 10px; }
.footer-social a { color: #ccd9ee; font-size: 0.86rem; }
.footer-social a:hover { color: #fff; }
@media (max-width: 760px) { .footer-social { justify-content: flex-start; } }

/* ===================================================================
   Motion layer (3 October 2026)
   Everything here is transform and opacity, which the browser runs on the
   compositor without re-laying-out the page, so none of it can make
   scrolling heavier. Every animated state is added by script.js, so a
   visitor without JavaScript sees the finished page. Reduced motion is
   honoured twice: the rules sit inside no-preference queries, and
   script.js does not start them at all.
   =================================================================== */

/* Page to page: a little more than a cross-fade, still short enough to be a join. */
::view-transition-old(root) { animation: vtOut 160ms var(--ease-out) both; }
::view-transition-new(root) { animation: vtIn 280ms var(--ease-out) both; }
@keyframes vtIn { from { opacity: 0; transform: translateY(12px); } }
/* Browsers without cross-document view transitions (Firefox) get the arrival only. */
@supports not (view-transition-name: none) {
  @media (prefers-reduced-motion: no-preference) {
    body { animation: pageIn 320ms var(--ease-out) both; }
    @keyframes pageIn { from { opacity: 0; transform: translateY(8px); } }
  }
}

/* Header gains a hairline of shadow once the page has moved under it. */
.site-header { transition: box-shadow var(--t-slow) var(--ease-out); }
.site-header.scrolled { box-shadow: 0 6px 22px -14px rgba(23,43,77,.35); }

/* Numbers hold their width while they count. */
.result-stat strong, .res-stats strong, [data-countup] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  /* ---- scroll reveal ---- */
  .rv { opacity: 0; transform: translateY(22px); }
  .rv.rv-in { opacity: 1; transform: none;
    transition: opacity .7s var(--ease-out) var(--rv-d, 0ms), transform .7s var(--ease-out) var(--rv-d, 0ms); }

  /* ---- buttons: press on click ---- */
  .btn { transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out); }
  .btn:active { transform: scale(.97); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-solid:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(36,70,127,.55); }
  .btn-solid:active { transform: scale(.97); }

  /* ---- one lift for every card ---- */
  .panel:not(:has(form, input, textarea, select)), .res-card, .price-card, .hub-card, .about-card, .book-card {
    transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out),
      border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out); }
  .panel:not(:has(form, input, textarea, select)):hover, .res-card:hover, .price-card:hover, .hub-card:hover,
  .about-card:hover, .book-card:hover {
    transform: translateY(-5px); box-shadow: 0 18px 38px -22px rgba(23,43,77,.38); }
  .price-card.feature:hover { box-shadow: 0 22px 46px -20px rgba(23,43,77,.45); }
  .pillar .num { transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
  .pillar:hover .num { background: var(--emerald); color: #fff; }
}

/* ---------------- hero mock-up ----------------
   An illustration of the platform, not a screenshot of a real child, so it
   carries no real names or scores and says so underneath. */
.hero-mock { max-width: 880px; margin: 54px auto 0; text-align: left; position: relative; }
.hm-frame { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 70px -40px rgba(23,43,77,.45), 0 2px 6px rgba(23,43,77,.06); }
.hm-body { display: grid; grid-template-columns: 1.05fr 1.25fr .8fr; gap: 16px; padding: 18px; }
.hm-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 15px; background: #fff; }
.hm-card h4, .hm-card h3.hm-k { font-family: var(--sans); font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); margin-bottom: 10px; font-weight: 700; }
.hm-task { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--ink); padding: 7px 0; border-bottom: 1px solid var(--line); }
.hm-task:last-child { border-bottom: 0; }
.hm-tick { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; display: grid; place-items: center; color: #fff; font-size: .62rem; }
.hm-task.done .hm-tick { background: #1f6b45; border-color: #1f6b45; }
.hm-task.done { color: var(--muted); }
.hm-q { font-family: var(--serif); font-size: 1.02rem; color: var(--ink); margin-bottom: 11px; line-height: 1.35; }
.hm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hm-opt { border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: .86rem; font-weight: 600; color: var(--ink); background: #fff; }
.hm-opt.pick { border-color: var(--emerald); background: #eef3fb; color: var(--emerald-dark); }
.hm-hint { margin-top: 10px; font-size: .76rem; color: var(--emerald); font-weight: 600; }
.hm-side { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.hm-ring { width: 84px; height: 84px; position: relative; }
.hm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hm-ring circle { fill: none; stroke-width: 8; }
.hm-ring .bg { stroke: var(--cream-2); }
.hm-ring .fg { stroke: var(--emerald); stroke-linecap: round; stroke-dasharray: 226; stroke-dashoffset: 226; }
.hm-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.hm-lvl { width: 100%; height: 7px; border-radius: 99px; background: var(--cream-2); overflow: hidden; }
.hm-lvl i { display: block; height: 100%; width: 0; background: var(--emerald); border-radius: 99px; }
.hm-small { font-size: .72rem; color: var(--muted); }
.hm-note { text-align: center; margin-top: 12px; font-size: .76rem; color: var(--muted); letter-spacing: .03em; }
.hm-chip { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 8px 14px;
  font-size: .8rem; font-weight: 600; color: var(--ink); box-shadow: 0 14px 30px -16px rgba(23,43,77,.4); white-space: nowrap; }
.hm-chip { z-index: 2; }
.hm-chip.a { right: 28px; top: -32px; }  /* on the top edge, clear of the score card (4 Oct 2026) */
.hm-chip.b { left: 50%; bottom: 34px; }  /* inside the quiz card, beside "Show me how" */
@media (max-width: 860px) {
  .hm-body { grid-template-columns: 1fr; }
  .hm-chip { display: none; }
  .hero-mock { margin-top: 38px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-mock { animation: hmIn .9s var(--ease-out) .25s both; }
  .hm-frame { animation: hmFloat 7s ease-in-out 1.2s infinite; }
  .hm-chip.a { animation: hmFloat 6s ease-in-out .4s infinite; }
  .hm-chip.b { animation: hmFloat 8s ease-in-out 1s infinite reverse; }
  .hm-ring .fg { animation: hmRing 1.6s var(--ease-out) .9s forwards; }
  .hm-lvl i { animation: hmBar 1.4s var(--ease-out) 1.1s forwards; }
  .hm-task.done .hm-tick { animation: hmPop .5s var(--ease-out) both; }
  .hm-task:nth-child(1) .hm-tick { animation-delay: .6s; }
  .hm-task:nth-child(2) .hm-tick { animation-delay: .8s; }
  .hm-opt.pick { animation: hmPick .6s var(--ease-out) 1.5s both; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-ring .fg { stroke-dashoffset: 56; }
  .hm-lvl i { width: 62%; }
}
@keyframes hmIn { from { opacity: 0; transform: translateY(28px); } }
@keyframes hmFloat { 50% { transform: translateY(-7px); } }
@keyframes hmRing { to { stroke-dashoffset: 56; } }
@keyframes hmBar { to { width: 62%; } }
@keyframes hmPop { from { transform: scale(0); } 60% { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes hmPick { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ---------------- motion layer, second batch (3 October 2026) ---------------- */

/* Keyboard focus, drawn the same everywhere. Only for keyboard users:
   :focus-visible stays quiet on a mouse click. */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible {
  outline: 2px solid var(--emerald); outline-offset: 3px; border-radius: 3px; }

/* Reading progress along the top of long pages; script.js adds the bar. */
.read-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none;
  background: var(--emerald); transform-origin: 0 50%; transform: scaleX(0); }

/* The page you are on, marked in the nav. */
.nav a[aria-current="page"] { color: var(--emerald); }

/* Hero: two soft blue lights drifting slowly behind the text. One element,
   moved by transform only, so it costs nothing per scroll frame. */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; left: -10%; right: -10%; top: -30%; height: 130%; z-index: -1;
  pointer-events: none;
  background: radial-gradient(38% 46% at 18% 32%, rgba(47,90,168,.11), transparent 70%),
              radial-gradient(34% 42% at 84% 18%, rgba(185,205,240,.45), transparent 70%); }

/* How it works: a line joining the four steps (desktop only). */
@media (min-width: 861px) {
  .flow.cols-4::before { content: ""; position: absolute; top: 23px; left: 12.5%; right: 12.5%; height: 2px;
    background: linear-gradient(90deg, rgba(47,90,168,.15), rgba(47,90,168,.45), rgba(47,90,168,.15));
    transform-origin: 0 50%; }
  .flow-step .dot { position: relative; z-index: 1; box-shadow: 0 0 0 6px #fff; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero and page titles rise in on arrival, one after another. */
  .hero-inner > :not(.hero-mock), .subhero .container > * {
    animation: riseIn .7s var(--ease-out) both; }
  .hero-inner > :nth-child(1), .subhero .container > :nth-child(1) { animation-delay: .02s; }
  .hero-inner > :nth-child(2), .subhero .container > :nth-child(2) { animation-delay: .09s; }
  .hero-inner > :nth-child(3), .subhero .container > :nth-child(3) { animation-delay: .16s; }
  .hero-inner > :nth-child(4), .subhero .container > :nth-child(4) { animation-delay: .23s; }
  .hero-inner > :nth-child(n+5), .subhero .container > :nth-child(n+5) { animation-delay: .3s; }

  .hero::before { animation: heroDrift 16s ease-in-out infinite alternate; }

  /* The joining line draws across, then each dot pops in turn. */
  .flow.fl-pre::before { transform: scaleX(0); }
  .flow.fl-in::before { transform: scaleX(1); transition: transform 1.1s var(--ease-out) .1s; }
  .flow.fl-in .dot { animation: dotPop .5s var(--ease-out) both; }
  .flow.fl-in .flow-step:nth-child(1) .dot { animation-delay: .1s; }
  .flow.fl-in .flow-step:nth-child(2) .dot { animation-delay: .35s; }
  .flow.fl-in .flow-step:nth-child(3) .dot { animation-delay: .6s; }
  .flow.fl-in .flow-step:nth-child(4) .dot { animation-delay: .85s; }

  /* Arrows at the end of a link lean the way they point. */
  .arw { display: inline-block; transition: transform var(--t-base) var(--ease-out); }
  a:hover .arw, .btn:hover .arw { transform: translateX(4px); }
}

@media (min-width: 1301px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Nav underline: grows in from the left, leaves to the right. */
  .nav a { position: relative; }
  .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
    background: var(--emerald); border-radius: 2px; transform: scaleX(0); transform-origin: 100% 50%;
    transition: transform var(--t-slow) var(--ease-out); }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }
}

@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes heroDrift { from { transform: translate3d(-2%, -2%, 0); } to { transform: translate3d(3%, 4%, 0) scale(1.06); } }
@keyframes dotPop { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } to { transform: scale(1); } }

/* ---- Starting Point links (3 October 2026): the homepage hero line and the
   card on letter.html, where every bio link lands. ---- */
.hero-sp { margin-top: 18px; font-size: .95rem; }
.hero-sp a { color: var(--emerald); font-weight: 600; border-bottom: 1.5px solid rgba(47,90,168,.3); padding-bottom: 2px; }
.hero-sp a:hover { border-bottom-color: var(--emerald); }
.sp-card { display: flex; flex-direction: column; gap: 6px; margin: 22px 26px 0; /* lines up with the letter box, which sits in a padded container */ padding: 22px 26px; border-radius: 4px;
  background: var(--cream-2); color: var(--text); text-decoration: none; border: 1px solid var(--line);
  border-left: 5px solid var(--emerald);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out); }
.sp-card strong { font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; color: var(--ink); }
.sp-card span { color: var(--muted); font-size: .95rem; }
.sp-card .sp-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; font-weight: 700; color: var(--emerald); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sp-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -20px rgba(23,43,77,.55); }
}

/* Calculator result: the pointer to the 11+ letter box (3 October 2026). */
.cc-letter { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; padding: 16px 20px; border-radius: 4px;
  background: var(--cream-2); border: 1px solid var(--line); border-left: 5px solid var(--emerald); text-decoration: none; }
.cc-letter strong { color: var(--ink); font-family: var(--serif); font-size: 1.08rem; }
.cc-letter span { color: var(--muted); font-size: .92rem; }
.cc-letter:hover { border-color: var(--emerald); }

/* ---------------- Uplift Premium: header pill and the band (3 October 2026) ---------------- */
.btn-premium { position: relative; overflow: hidden; background: var(--emerald); color: #fff; border-color: var(--emerald);
  border-radius: 999px; }
.btn-premium:hover { background: var(--emerald-dark); border-color: var(--emerald-dark); color: #fff; }
.btn-premium::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-20deg); }
@media (prefers-reduced-motion: no-preference) {
  .btn-premium::after { animation: pillSweep 4.5s ease-in-out 1.5s infinite; }
}
@keyframes pillSweep { 0%, 70% { left: -60%; } 100% { left: 130%; } }

.premium-band { padding: 64px 0; background: var(--cream-2); border-bottom: 1px solid var(--line); }
.premium-band.pb-plain { background: none; border: 0; padding: 0; margin: 34px 0; }
.pb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 44px; align-items: center; }
.pb-eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; font-weight: 700; color: var(--emerald); margin-bottom: 10px; }
.pb-title { font-size: clamp(1.6rem, 3.2vw, 2.25rem); line-height: 1.18; margin-bottom: 14px; }
.pb-lede { color: var(--muted); font-size: 1.04rem; max-width: 30em; }
.pb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pb-small { margin-top: 12px; font-size: .84rem; color: var(--muted); }

.pb-climb { position: relative; height: 270px; margin: 10px 8px 30px; }
.pb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pb-track { fill: none; stroke: #cfd8e6; stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pb-line { fill: none; stroke: var(--emerald); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pb-hit { fill: none; stroke: transparent; stroke-width: 28; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: help; }

.pb-stop { position: absolute; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; font: inherit; z-index: 2; }
.pb-dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #b9c6da;
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.pb-stop.is-lit .pb-dot { background: var(--emerald); border-color: var(--emerald); box-shadow: 0 0 0 6px rgba(47,90,168,.14); }
.pb-stop:hover .pb-dot, .pb-stop.is-hover .pb-dot { transform: scale(1.25); }
.pb-label { position: absolute; top: 30px; white-space: nowrap; font-size: .8rem; font-weight: 600; color: var(--muted);
  transition: color .35s var(--ease-out); }
.pb-stop.is-lit .pb-label, .pb-stop.is-hover .pb-label { color: var(--ink); }
.pb-stop[data-i="0"] .pb-label { left: -6px; }
.pb-stop[data-i="4"] .pb-label { right: -6px; top: -26px; }
.pb-stop:focus-visible { outline: none; }
.pb-stop:focus-visible .pb-dot { outline: 2px solid var(--emerald); outline-offset: 4px; }

.pb-runner { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff;
  border: 3px solid var(--emerald); z-index: 3; pointer-events: none; transition: opacity .4s var(--ease-out); }
.pb-runner.is-done { opacity: 0; }

.pb-tip { position: absolute; z-index: 4; width: 250px; max-width: 100%; background: var(--ink); color: #e9edf4;
  border-radius: 8px; padding: 12px 14px; font-size: .86rem; line-height: 1.5; pointer-events: none;
  box-shadow: 0 16px 34px -18px rgba(23,43,77,.6); }
.pb-tip strong { display: block; color: #fff; font-family: var(--serif); font-size: 1rem; margin-bottom: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .pb-tip:not([hidden]) { animation: tipIn .18s var(--ease-out); }
}
@keyframes tipIn { from { opacity: 0; transform: translateY(4px); } }

@media (max-width: 860px) {
  .premium-band { padding: 48px 0; }
  .pb { grid-template-columns: 1fr; gap: 26px; }
  .pb-climb { height: 210px; margin: 6px 4px 34px; }
  .pb-label { font-size: .7rem; white-space: normal; width: 64px; text-align: center; }
  .pb-stop[data-i="0"] .pb-label { left: -4px; text-align: left; }
  .pb-stop[data-i="4"] .pb-label { right: -4px; text-align: right; }
  .pb-actions .btn { flex: 1 1 auto; }
}

/* Header room for the Premium pill (3 October 2026): the brand never wraps, the
   bar may run a little wider, and the links sit closer below 1400px. */
.brand-text { white-space: nowrap; }
.header-inner { max-width: 1320px; }
@media (max-width: 1400px) { .nav { gap: 19px; } .header-cta { gap: 8px; } }

/* ---- The platform illustration below the Premium band (3 October 2026) ----
   It used to sit in the hero, where it played on load. Below the fold it waits
   (script.js adds .hm-wait, then takes it off when it scrolls into view), so the
   ring fills and the ticks pop while somebody is looking. */
.hm-section { padding-top: 56px; padding-bottom: 40px; }
.hm-section .hero-mock { margin-top: 18px; }
.hero-mock.hm-wait, .hero-mock.hm-wait * { animation-play-state: paused !important; }

/* ---- Log in: the brightest thing in the header (3 October 2026) ----
   The same violet-to-magenta, now flowing slowly across the button, with a
   ring that ripples out from it every few seconds: bigger than the Premium
   pill's light sweep, so the way in is the first thing an eye finds. Both
   gradient stops keep the 4.5:1 contrast the original was tuned to. Never on
   the signed-in pill, which is a name, not a call to action. */
.btn.btn-login:not(.signedin) { position: relative; background-size: 220% 100%;
  background-image: linear-gradient(110deg, #9459c4 0%, #c04d86 45%, #9459c4 90%); }
.btn.btn-login:not(.signedin)::before { content: ""; position: absolute; inset: -2px; border-radius: inherit;
  pointer-events: none; box-shadow: 0 0 0 0 rgba(176, 82, 166, .55); }
@media (prefers-reduced-motion: no-preference) {
  .btn.btn-login:not(.signedin) { animation: loginFlow 6s ease-in-out infinite; }
  .btn.btn-login:not(.signedin)::before { animation: loginRipple 3.2s ease-out 1s infinite; }
  .btn.btn-login:not(.signedin):hover { animation-play-state: paused; transform: translateY(-2px) scale(1.04); }
}
@keyframes loginFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes loginRipple {
  0% { box-shadow: 0 0 0 0 rgba(176, 82, 166, .55); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(176, 82, 166, 0); }
}
.btn.btn-login:not(.signedin):hover { background-size: 220% 100%;
  background-image: linear-gradient(110deg, #7f4bb0 0%, #ac4276 45%, #7f4bb0 90%); }

/* The free month, named in the band's first line (4 October 2026). */
.pb-free { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 99px; background: #1f6b45;
  color: #fff; letter-spacing: .08em; font-size: .72rem; vertical-align: 1px; }

/* .lead-pair: the hero then the Premium band, in that order everywhere since
   4 Oct 2026; the hero's own offer card is what a phone opens on. */
.lead-pair { display: flex; flex-direction: column; }

/* ================= Homepage hero (4 Oct 2026) =================
   Headline, the Premium offer card, and a bento of five tiles built from real
   material: a worksheet worked in red pen (Patrick Hand, loaded on index.html
   only), a marked quiz, a quiz hint, the guide covers. On a phone the order is
   headline, offer, then the rest, so the first screen is the offer.
   On a laptop the whole hero fits one screen (see the layout note below). */
.cc { --fd: "Source Serif 4", Georgia, serif; --fb: "Inter", system-ui, sans-serif;
  --ink2: #101828; --blue: #2f5aa8; --deep: #1d3c78; --red: #c7402b; --ground: #f4f6fa;
  background: linear-gradient(180deg, #eef3fc 0%, #f4f6fa 55%, #f6f7fa 100%); padding: 56px 0 72px; position: relative; isolation: isolate; font-family: var(--fb); text-align: left; overflow: hidden; }
.cc::before { display: block; content: ""; position: absolute; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(34% 40% at 82% 22%, rgba(63,116,214,.30), transparent 70%),
    radial-gradient(30% 36% at 12% 8%, rgba(157,185,236,.45), transparent 70%),
    radial-gradient(28% 30% at 60% 70%, rgba(31,107,69,.10), transparent 70%),
    radial-gradient(40% 40% at 20% 90%, rgba(47,90,168,.14), transparent 70%);
  filter: blur(10px); }
@media (prefers-reduced-motion: no-preference) { .cc::before { animation: ccDrift 22s ease-in-out infinite alternate !important; } }
@keyframes ccDrift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-3%,2%,0) scale(1.05); } 100% { transform: translate3d(2%,-2%,0) scale(1.02); } }
.cc::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(29,60,120,.22) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(55% 60% at 30% 25%, #000 0%, transparent 75%); mask-image: radial-gradient(55% 60% at 30% 25%, #000 0%, transparent 75%); }
/* ---- layout (4 Oct 2026, second version): one laptop screen ----
   Top row: the headline, intro and call link on the left, the Premium card on
   the right, level with the headline. Then the tiles (the adaptive engine biggest), sized to the
   height left on screen by fit() in script.js (--cc-bento-h, 170 to 340 px).
   The card sits in a slot whose height is fixed to the closed card, so "And
   more" opens over the tiles instead of pushing them down. */
.cc-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.cc-top { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: stretch;
  margin-bottom: clamp(12px, 2.2vh, 24px); }
.cc h1 { font-family: var(--fd); font-weight: 600; color: var(--ink2); font-size: clamp(2.3rem, min(4.3vw, 6.9vh), 4.7rem);
  line-height: 1.03; letter-spacing: -.026em; margin: 0 0 clamp(10px, 2vh, 20px); text-wrap: balance; font-optical-sizing: auto; }
.cc h1 em { font-style: italic; font-weight: 600; color: var(--blue); position: relative; white-space: nowrap; padding-bottom: .06em; }
.cc h1 em::after { content: ""; position: absolute; left: .02em; right: .3em; bottom: .02em; height: .1em; border-radius: 99px;
  background: var(--blue); opacity: .22; transform-origin: left; transform: scaleX(0); }
.cc.go h1 em::after { animation: ccLine .9s cubic-bezier(.16,1,.3,1) .9s forwards; }
.cc-lede { font-size: clamp(.95rem, 2vh, 1.12rem); line-height: 1.55; color: #475467; margin: 0 0 clamp(8px, 1.6vh, 16px); max-width: 52ch; }
.cc-link { font-weight: 600; color: var(--ink2); border-bottom: 1.5px solid rgba(16,24,40,.2); padding-bottom: 2px; transition: border-color .25s, color .25s; }
.cc-link:hover { color: var(--blue); border-bottom-color: var(--blue); }
.cc-link span { display: inline-block; transition: transform .25s; } .cc-link:hover span { transform: translateX(4px); }
.cc-offer-slot { position: relative; z-index: 5; height: var(--cc-offer-h, auto); }
/* the headline block is as tall as the card: headline level with its top, the call
   link level with its foot */
.cc-head { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }

/* the offer: the one thing on the page that says "free" */
.cc-offer { position: relative; border-radius: 26px; padding: 26px 26px 22px; color: #fff; isolation: isolate; overflow: hidden;
  background: linear-gradient(155deg, #2f5aa8 0%, #1d3c78 70%);
  box-shadow: 0 30px 60px -28px rgba(29,60,120,.6), inset 0 1px 0 rgba(255,255,255,.18); }
.cc-offer::before { content: ""; position: absolute; inset: -40% -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%); transform: translateX(-60%); }
@media (prefers-reduced-motion: no-preference) { .cc-offer::before { animation: ccSheen 5.5s ease-in-out 1.6s infinite; } }
@keyframes ccSheen { 0% { transform: translateX(-60%); } 35%, 100% { transform: translateX(60%); } }
.cc-badge { display: inline-block; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: #1f6b45; color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }
.cc-offer h2 { font-family: var(--fd); font-weight: 600; font-size: 1.9rem; letter-spacing: -.015em; color: #fff; margin: 0 0 12px; line-height: 1.1; }
.cc-offer ul { list-style: none; margin: 0 0 18px; padding: 0; }
.cc-offer li { position: relative; padding-left: 18px; font-size: .95rem; line-height: 1.5; color: #dbe5f8; margin-bottom: 4px; }
.cc-offer li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: #9db9ec; }
.cc-btn { position: relative; display: flex; justify-content: center; overflow: hidden; isolation: isolate; color: #1d3c78; font-weight: 700;
  padding: 15px 24px; border-radius: 14px; font-size: 1.02rem; background: #fff;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .35s; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
.cc-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(100deg, #0f2550 0%, #1f4da0 55%, #3f74d6 100%);
  clip-path: inset(0 100% 0 0); transition: clip-path .55s cubic-bezier(.65,0,.35,1); }
.cc-btn:hover, .cc-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 18px 34px -12px rgba(0,0,0,.6); }
.cc-btn:hover::before, .cc-btn:focus-visible::before { clip-path: inset(0 0 0 0); }
.cc-btn:active { transform: scale(.98); }
.cc-lit > i { font-style: normal; display: inline-block; white-space: pre; transition: color .25s, text-shadow .35s;
  transition-delay: calc(var(--i) * 28ms); }
.cc-btn:hover .cc-lit > i, .cc-btn:focus-visible .cc-lit > i { color: #fff;
  text-shadow: 0 0 10px rgba(173,201,255,.95), 0 0 22px rgba(120,160,255,.55); animation: ccGlow .6s ease-out both; animation-delay: calc(var(--i) * 28ms); }
@keyframes ccGlow { 0% { transform: translateY(0); } 40% { transform: translateY(-2px); text-shadow: 0 0 14px #fff, 0 0 28px rgba(150,190,255,.9); } 100% { transform: translateY(0); } }

/* "And more": the list opens in place, its height animated */
.cc-more { margin: -8px 0 16px; }
.cc-more summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: .9rem; font-weight: 600;
  color: #fff; padding: 4px 12px 4px 14px; border-radius: 999px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  transition: background .25s; }
.cc-more summary::-webkit-details-marker { display: none; }
.cc-more summary:hover { background: rgba(255,255,255,.18); }
.cc-more summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.cc-more[open] summary svg { transform: rotate(180deg); }
.cc-more::details-content { block-size: 0; overflow: hidden; transition: block-size .45s cubic-bezier(.16,1,.3,1), content-visibility .45s allow-discrete; }
.cc-more[open]::details-content { block-size: auto; }
.cc-more ul { margin: 12px 0 8px; }
.cc-more[open] li { animation: ccUp .45s cubic-bezier(.16,1,.3,1) both; opacity: 0; transform: translateY(8px); }
.cc-more[open] li:nth-child(2) { animation-delay: .04s; } .cc-more[open] li:nth-child(3) { animation-delay: .08s; } .cc-more[open] li:nth-child(4) { animation-delay: .12s; }
.cc-more[open] li:nth-child(5) { animation-delay: .16s; } .cc-more[open] li:nth-child(6) { animation-delay: .2s; } .cc-more[open] li:nth-child(7) { animation-delay: .24s; }
.cc-all { display: inline-block; font-size: .88rem; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px; }
.cc-all:hover { border-bottom-color: #fff; }
.cc-small { margin: 10px 0 0; font-size: .82rem; color: #d0ddf5; text-align: center; }





/* the card, compact: name and badge on one line, the button at the foot */
.cc-offer { padding: clamp(16px, 2.4vh, 24px) 24px clamp(14px, 2vh, 20px); border-radius: 22px; }
.cc-o-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 clamp(6px, 1.2vh, 12px); }
.cc-o-head h2 { margin: 0 !important; font-size: clamp(1.4rem, 3vh, 1.8rem) !important; }
.cc-o-head .cc-badge { margin: 0; font-size: .72rem; padding: 5px 10px; }
.cc-offer > ul { margin-bottom: clamp(8px, 1.4vh, 14px); }
.cc-offer li { font-size: clamp(.86rem, 1.8vh, .96rem); margin-bottom: 2px; }
.cc-offer .cc-more { margin: 0 0 clamp(10px, 1.6vh, 14px); }
.cc-offer .cc-btn { padding: clamp(11px, 1.8vh, 15px) 20px; }
.cc-offer .cc-small { margin-top: 8px; font-size: .78rem; }
.cc-offer:has(.cc-more[open]) { box-shadow: 0 40px 80px -24px rgba(16,24,40,.55), inset 0 1px 0 rgba(255,255,255,.18); }

/* the tiles: the adaptive engine biggest, progress beside it, two small ones under */
.cc-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr));
  height: var(--cc-bento-h, 420px); gap: 14px; }
.cc-tile { position: relative; overflow: hidden; border-radius: 20px; background: #fff; color: var(--ink2); padding: clamp(14px, 2.2vh, 20px) 20px 0;
  box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s; isolation: isolate; }
a.cc-tile:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(47,90,168,.25), 0 24px 40px -20px rgba(29,60,120,.35); }
.cc-tile::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(47,90,168,.12), transparent 70%); }
.cc-tile:hover::before { opacity: 1; }
.cc-t-head h3 { font-family: var(--fd); font-weight: 600; font-size: clamp(1.1rem, 2.6vh, 1.4rem); letter-spacing: -.01em; margin: 0 0 4px; color: inherit; line-height: 1.15; }
.cc-t-head p { font-size: clamp(.8rem, 1.7vh, .9rem); line-height: 1.45; color: #5b6475; margin: 0; max-width: 46ch; }

/* adaptive engine: words, the real topic bars, then the review ladder */
.cc-bento .t-adapt { grid-column: 1 / 7; grid-row: 1 / 3; background: var(--deep); color: #fff; display: flex; flex-direction: column;
  padding-bottom: clamp(14px, 2.2vh, 20px); }
.cc-bento .t-adapt .cc-t-head p { color: #c3d1ee; }
.cc-bars { flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; object-position: left center; margin: clamp(10px, 1.8vh, 18px) 0;
  background: #fff; border-radius: 12px; padding: clamp(8px, 1.4vh, 14px) 14px; box-sizing: border-box; }
.cc-ladder { flex: none; display: flex; align-items: center; gap: 6px; font-size: clamp(.72rem, 1.55vh, .82rem); font-weight: 600; }
.cc-ladder span { flex: none; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: #c3d1ee;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: background .3s, color .3s; }
.cc-ladder i { flex: 1 1 auto; height: 2px; min-width: 8px; border-radius: 2px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; }
.cc-ladder .r0 { background: #c9871f; color: #fff; box-shadow: none; }
.cc-ladder .r4 { background: #1f6b45; color: #fff; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  /* the schedule runs left to right, a step at a time, and starts again */
  .cc.go .cc-ladder i::after { content: ""; position: absolute; inset: 0; background: #9db9ec; transform: translateX(-101%); animation: ccStep 6s linear infinite; }
  .cc.go .cc-ladder i:nth-of-type(2)::after { animation-delay: 1.2s; } .cc.go .cc-ladder i:nth-of-type(3)::after { animation-delay: 2.4s; }
  .cc.go .cc-ladder i:nth-of-type(4)::after { animation-delay: 3.6s; }
  .cc.go .cc-ladder .r1 { animation: ccLit 6s linear 1.2s infinite; } .cc.go .cc-ladder .r2 { animation: ccLit 6s linear 2.4s infinite; }
  .cc.go .cc-ladder .r3 { animation: ccLit 6s linear 3.6s infinite; }
}
@keyframes ccStep { 0% { transform: translateX(-101%); } 20%, 85% { transform: translateX(0); } 100% { transform: translateX(101%); } }
@keyframes ccLit { 0%, 2% { background: rgba(255,255,255,.1); color: #c3d1ee; } 6%, 80% { background: #fff; color: #1d3c78; } 95%, 100% { background: rgba(255,255,255,.1); color: #c3d1ee; } }

/* top right: Live lessons, then Progress; under them Resources, then the books */
.cc-bento .t-lesson { grid-column: 7 / 10; grid-row: 1; background: var(--blue); color: #fff; container-type: size; }
.cc-bento .t-lesson .cc-t-head { position: relative; z-index: 1; }
.cc-bento .t-lesson .cc-t-head p { color: #dbe5f8; }
.cc-ws { position: absolute; right: -16px; bottom: -14px; width: min(78cqw, calc((100cqh - 70px) / .637));
  transform: rotate(-3deg); transform-origin: bottom right; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.cc-bento .t-lesson:hover .cc-ws { transform: rotate(-1deg) translateY(-6px); }
.cc-ws img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.5); }
.cc-ink { position: absolute; inset: 0; width: 100%; aspect-ratio: 1428/910; }
.ink-t { font-family: "Patrick Hand", cursive; font-size: 66px; fill: var(--red); }
.ink-c { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; }

.cc-bento .t-progress { grid-column: 10 / 13; grid-row: 1; background: #e7eefb; }

/* everything in a tile starts at the top */
.cc-bento .t-res { grid-column: 7 / 10; grid-row: 2; display: flex; flex-direction: column; padding-bottom: clamp(12px, 2vh, 18px); }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding-top: 10px; max-height: 38px; overflow: hidden; }
.cc-chips span { padding: 4px 10px; border-radius: 999px; background: #eef3fc; color: var(--deep); font-size: .74rem; font-weight: 600; }

.cc-bento .t-books { grid-column: 10 / 13; grid-row: 2; background: #e7eefb; display: flex; flex-direction: column; }
.cc-fan { position: relative; flex: none; width: 96px; height: 140px; margin: 10px auto 0; }
.cc-fan img { position: absolute; left: 50%; top: 0; width: 96px; height: auto; border-radius: 3px; transform-origin: 50% 120%;
  box-shadow: 0 12px 24px -10px rgba(16,24,40,.45); transition: transform .7s cubic-bezier(.16,1,.3,1); transform: translateX(-50%); }
.cc.go .cc-fan img:nth-child(1) { transform: translateX(-50%) rotate(-14deg); }
.cc.go .cc-fan img:nth-child(2) { transform: translateX(-50%) rotate(-3deg); }
.cc.go .cc-fan img:nth-child(3) { transform: translateX(-50%) rotate(9deg); }
.cc-bento .t-books:hover .cc-fan img:nth-child(1) { transform: translateX(-80%) rotate(-20deg); }
.cc-bento .t-books:hover .cc-fan img:nth-child(3) { transform: translateX(-20%) rotate(15deg); }

@media (prefers-reduced-motion: no-preference) {
  .cc-head > *, .cc-offer-slot { opacity: 0; transform: translateY(18px); animation: ccUp .9s cubic-bezier(.16,1,.3,1) forwards; }
  .cc-head > :nth-child(2) { animation-delay: .08s; } .cc-head > :nth-child(3) { animation-delay: .14s; } .cc-offer-slot { animation-delay: .2s; }
  .cc-tile { opacity: 0; translate: 0 40px; animation: ccTile .9s cubic-bezier(.16,1,.3,1) forwards; }
  .cc-bento .t-adapt { animation-delay: .3s; } .cc-bento .t-lesson { animation-delay: .38s; } .cc-bento .t-progress { animation-delay: .46s; }
  .cc-bento .t-res { animation-delay: .54s; } .cc-bento .t-books { animation-delay: .62s; }
  .cc-fan img { transition-delay: 0s; }
  .cc.go .k1 { animation: ccDraw .7s ease-out 1.3s forwards; }
  .cc.go #ccw1 rect { animation: ccWrite 1s steps(14,end) 1.7s forwards; }
  .cc.go #ccw2 rect { animation: ccWrite .7s steps(9,end) 2.8s forwards; }
}
@media (prefers-reduced-motion: reduce) { .ink-c { stroke-dashoffset: 0; } .cc-ink clipPath rect { width: 1200px; } .cc h1 em::after { transform: none; } }
@keyframes ccDraw { to { stroke-dashoffset: 0; } }
@keyframes ccWrite { to { width: 1200px; } }
@keyframes ccUp { to { opacity: 1; transform: none; } }
@keyframes ccTile { to { opacity: 1; translate: 0 0; } }
@keyframes ccLine { to { transform: scaleX(1); } }

@media (min-width: 961px) {
  .cc { padding: clamp(16px, 3vh, 36px) 0 clamp(16px, 3vh, 32px); }
}
/* short laptop screens: a tighter card, and the tiles in one row */
@media (min-width: 961px) and (max-height: 700px) {
  .cc-offer { padding: 14px 20px 12px; }
  .cc-o-head h2 { font-size: 1.25rem !important; }
  .cc-offer > ul { margin-bottom: 6px; }
  .cc-offer li { font-size: .8rem; line-height: 1.4; margin-bottom: 0; }
  .cc-offer .cc-more { margin-bottom: 8px; } .cc-offer .cc-more summary { font-size: .8rem; padding: 2px 10px 2px 12px; }
  .cc-offer .cc-btn { padding: 10px 18px; font-size: .95rem; }
  .cc-offer .cc-small { margin-top: 6px; font-size: .72rem; }
}
/* when the tiles have under 360 px (script.js adds .onerow): one row, the adaptive
   tile still the widest; progress keeps its heading and chart, and under 260 px
   (.tight) the adaptive sentence goes too */
@media (min-width: 961px) {
  .cc.onerow .cc-bento { grid-template-rows: minmax(0, 1fr); grid-template-columns: 2.1fr 1fr 1fr 1fr 1fr; }
  .cc.onerow .cc-bento .cc-tile { grid-row: 1; }
  .cc.onerow .cc-bento .t-adapt { grid-column: 1; } .cc.onerow .cc-bento .t-lesson { grid-column: 2; }
  .cc.onerow .cc-bento .t-progress { grid-column: 3; } .cc.onerow .cc-bento .t-res { grid-column: 4; } .cc.onerow .cc-bento .t-books { grid-column: 5; }
  .cc.onerow .cc-bento .cc-tile:not(.t-adapt) .cc-t-head p { font-size: .76rem; line-height: 1.4; }
  .cc.onerow .cc-bento .cc-tile:not(.t-adapt) .cc-t-head h3 { font-size: 1.02rem; }
  .cc.onerow .cc-bento .cc-tile { padding-left: 14px; padding-right: 14px; }
  .cc.onerow .cc-ws { width: 70%; }
  .cc.onerow .cc-chips { display: none; }
  .cc.onerow .cc-ladder span { padding: 4px 7px; } .cc.onerow .cc-ladder { gap: 4px; }
  /* Under 260px the sentence goes, never the bars: they are the tile's evidence (6 Oct 2026). */
  .cc.tight .cc-bento .t-adapt .cc-t-head p { display: none; } .cc.tight .cc-bars { margin: 8px 0; }
} .cc.onerow .cc-ladder { gap: 4px; }
}
@media (min-width: 961px) and (max-width: 1200px) {
  .cc-ladder span { padding: 4px 7px; } .cc-ladder { gap: 4px; }
}
/* phones and small tablets: the offer straight after the headline, then the rest */
@media (max-width: 960px) {
  .cc { padding: 32px 0 52px; }
  .cc-wrap { padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .cc-top, .cc-head, .cc-offer-slot, .cc-bento { display: contents; }
  .cc h1 { grid-column: 1 / 3; order: 1; font-size: 2.55rem; margin-bottom: 8px; }
  .cc-offer { grid-column: 1 / 3; order: 2; margin-bottom: 12px; padding: 22px; }
  .cc-lede { grid-column: 1 / 3; order: 3; font-size: 1.05rem; margin: 0; }
  .cc-link { grid-column: 1 / 3; order: 4; justify-self: start; margin-bottom: 14px; }
  .cc-bento .cc-tile { grid-row: auto; }
  .cc-bento .t-adapt { grid-column: 1 / 3; order: 5; height: auto; }
  .cc-bars { flex: none; height: auto; }
  .cc-ladder span { padding: 4px 8px; } .cc-ladder { gap: 6px 4px; font-size: .74rem; flex-wrap: wrap; } .cc-ladder i { flex: 0 0 10px; }
  .cc-bento .t-lesson { grid-column: 1 / 3; order: 6; height: 230px; container-type: normal; } .cc-ws { width: 62%; }
  .cc-bento .t-progress { grid-column: 1 / 3; order: 7; height: auto; padding-bottom: 18px; }
  .cc-bento .t-res { grid-column: 1; order: 8; height: 250px; }
  .cc-bento .t-books { grid-column: 2; order: 9; height: 250px; } .cc-fan { width: 100px; height: 150px; margin-top: 10px; } .cc-fan img { width: 100px; }
  .cc-offer-slot { height: auto !important; }
}

/* ================= Subscribe page (4 Oct 2026) =================
   The homepage hero's language: a soft blue ground with drifting colour and a
   dot field, a deep blue offer card, rounded tiles with a pointer light.
   #offerCard is drawn by subscribe.js in four states: the plans (.sp-plans),
   checking after checkout, subscribed (.is-good) and payment failed (.is-bad). */
.sp { --ink2: #101828; --blue: #2f5aa8; --deep: #1d3c78; --sky: #9db9ec; --green: #1f6b45; }
.sp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.sp-hero { position: relative; isolation: isolate; overflow: hidden; padding: 40px 0 72px;
  background: linear-gradient(180deg, #eef3fc 0%, #f4f6fa 60%, #f6f7fa 100%); }
.sp-hero::before { content: ""; position: absolute; inset: -20%; z-index: -2; pointer-events: none; filter: blur(10px);
  background:
    radial-gradient(34% 40% at 84% 26%, rgba(63,116,214,.30), transparent 70%),
    radial-gradient(30% 36% at 10% 6%, rgba(157,185,236,.45), transparent 70%),
    radial-gradient(26% 30% at 55% 80%, rgba(31,107,69,.10), transparent 70%); }
@media (prefers-reduced-motion: no-preference) { .sp-hero::before { animation: ccDrift 22s ease-in-out infinite alternate; } }
.sp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(29,60,120,.2) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(55% 60% at 25% 30%, #000, transparent 75%); mask-image: radial-gradient(55% 60% at 25% 30%, #000, transparent 75%); }
.sp-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.sp-back { margin: 0 0 26px; font-size: .9rem; }
.sp-back a { color: var(--muted); font-weight: 500; transition: color .25s; }
.sp-back a:hover { color: var(--blue); }
.sp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }
.sp-name { font-weight: 700; font-size: .95rem; color: var(--blue); }
.sp-free { padding: 5px 11px; border-radius: 999px; background: var(--green); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sp h1 { font-family: var(--serif); font-weight: 600; color: var(--ink2); font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.03; letter-spacing: -.028em; margin: 0 0 22px; text-wrap: balance; }
.sp h1 em { font-style: italic; color: var(--blue); }
.sp-lede { font-size: 1.12rem; line-height: 1.65; color: #475467; max-width: 50ch; margin: 0 0 26px; }
.sp-points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.sp-points li { position: relative; padding-left: 26px; color: #475467; font-size: .98rem; }
.sp-points li::before { content: ""; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; border-radius: 4px;
  background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.sp-points b { color: var(--ink2); font-weight: 600; }

/* the offer card, drawn by subscribe.js */
.sp-offer { position: relative; border-radius: 26px; padding: 26px; color: #fff; isolation: isolate; overflow: hidden;
  background: linear-gradient(155deg, #2f5aa8 0%, #1d3c78 72%);
  box-shadow: 0 34px 70px -30px rgba(29,60,120,.65), inset 0 1px 0 rgba(255,255,255,.18); }
.sp-offer::before { content: ""; position: absolute; inset: -40% -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.14) 50%, transparent 58%); transform: translateX(-60%); }
@media (prefers-reduced-motion: no-preference) { .sp-offer::before { animation: ccSheen 6s ease-in-out 1.4s infinite; } }
.sp-offer.is-good { background: linear-gradient(155deg, #23794f 0%, #175436 75%); }
.sp-offer.is-bad { background: linear-gradient(155deg, #a8432f 0%, #7c2f20 75%); }
.sp-skel { height: 120px; border-radius: 18px; background: rgba(255,255,255,.1); margin-bottom: 12px; }
.sp-offer h2 { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; color: #fff; margin: 0 0 8px; line-height: 1.15; letter-spacing: -.01em; }
.sp-offer .sp-o-p { color: #dbe5f8; font-size: .95rem; line-height: 1.55; margin: 0 0 18px; }
.sp-offer .sp-o-small { color: #dbe5f8; font-size: .82rem; line-height: 1.5; margin: 12px 0 0; text-align: center; }
.sp-o-k { margin: 0 0 14px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #d0ddf5; }
.sp-promo { display: flex; gap: 10px; align-items: center; margin: 0 0 16px; padding: 10px 14px; border-radius: 14px;
  background: rgba(31,107,69,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: .9rem; line-height: 1.45; color: #e6f4ec; }
.sp-promo b { color: #fff; }
.sp .sp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 0; }
.sp .sb-plan { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 18px 18px 16px;
  border-radius: 18px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.16); color: #fff;
  transition: background .3s, border-color .3s, transform .45s cubic-bezier(.16,1,.3,1); }
.sp .sb-plan.is-on { background: #fff; border-color: #fff; color: var(--ink2); transform: none; box-shadow: 0 18px 34px -18px rgba(0,0,0,.55); }
.sp .sb-plan-t { font-weight: 700; font-size: 1rem; display: flex; gap: 8px; align-items: center; color: inherit; text-transform: none; letter-spacing: 0; }
.sp .sb-plan-t .dchip { font-size: .7rem; }
.sp .sb-plan-p { font-family: var(--serif); font-weight: 600; font-size: 2rem; letter-spacing: -.02em; line-height: 1; text-align: right; color: inherit; margin: 0; }
.sp .sb-plan-p span { display: block; font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: 0; color: inherit; opacity: .75; margin: 4px 0 0; }
.sp .sb-plan-s { grid-column: 1 / -1; font-size: .85rem; line-height: 1.45; color: inherit; opacity: .8; margin: 2px 0 12px; }
.sp .sb-plan .sp-buy { grid-column: 1 / -1; }
.sp-buy { position: relative; display: flex; justify-content: center; width: 100%; overflow: hidden; isolation: isolate; cursor: pointer;
  border: 0; border-radius: 14px; padding: 14px 20px; font: inherit; font-weight: 700; font-size: 1rem;
  color: #fff; background: var(--blue); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.sb-plan:not(.is-on) .sp-buy { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.sp-buy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, #0f2550 0%, #1f4da0 55%, #3f74d6 100%);
  clip-path: inset(0 100% 0 0); transition: clip-path .55s cubic-bezier(.65,0,.35,1); }
.sp-buy:hover, .sp-buy:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(0,0,0,.6); }
.sp-buy:hover::before, .sp-buy:focus-visible::before { clip-path: inset(0); }
.sp-buy:active { transform: scale(.98); }
.sp-buy:disabled { opacity: .7; cursor: wait; }
.sp-buy > i { font-style: normal; display: inline-block; white-space: pre; transition: color .25s, text-shadow .35s; transition-delay: calc(var(--i) * 26ms); }
.sp-buy:hover > i, .sp-buy:focus-visible > i { color: #fff; text-shadow: 0 0 10px rgba(173,201,255,.95), 0 0 22px rgba(120,160,255,.55);
  animation: ccGlow .6s ease-out both; animation-delay: calc(var(--i) * 26ms); }
.sp-o-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-size: .9rem; }
.sp-o-links a, .sp-o-links button { color: #fff; font-weight: 600; border: 0; background: none; padding: 0 0 1px; font: inherit; font-weight: 600; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.4); }
.sp-o-links a:hover, .sp-o-links button:hover { border-bottom-color: #fff; }
.sp-o-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.sp-o-btns .sp-buy { width: auto; flex: 1 1 180px; }
.sp-o-btns .sp-ghost { flex: 1 1 160px; display: flex; justify-content: center; padding: 14px 20px; border-radius: 14px; font-weight: 700;
  color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.sp .sb-childnote { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.1); color: #e8eefb; font-size: .9rem; }

/* sections below */
.sp-section { padding: 72px 0; }
.sp-h2 { text-wrap: balance; font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: -.02em; color: var(--ink2); margin: 0 0 28px; line-height: 1.1; }
.sp-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(190px, auto); gap: 14px; grid-auto-flow: dense; }
.sp-tile { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; background: #fff; padding: 22px;
  box-shadow: 0 0 0 1px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04); transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s; }
.sp-tile:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(47,90,168,.25), 0 24px 40px -22px rgba(29,60,120,.35); }
.sp-tile::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(47,90,168,.12), transparent 70%); }
.sp-tile:hover::before { opacity: 1; }
.sp-tile h3 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em; line-height: 1.15; margin: 0 0 6px; color: inherit; }
.sp-tile p { margin: 0; font-size: .92rem; line-height: 1.5; color: #5b6475; max-width: 40ch; }
.sp-tile a { color: var(--blue); font-weight: 600; }
.sp-bento .t-papers { grid-column: span 5; grid-row: span 2; background: var(--deep); color: #fff; }
.sp-bento .t-papers p { color: #c3d1ee; }
.sp-bento .t-papers { display: flex; flex-direction: column; padding-bottom: 0; contain: size; }  /* sized by the grid, never by its picture */
.sp-bento .t-papers img { display: block; flex: none; align-self: center; width: min(62%, 300px); height: auto; margin: 22px 0 -40%; border-radius: 14px 14px 0 0;
  box-shadow: 0 30px 50px -20px rgba(0,0,0,.6); transform: rotate(-3deg); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.sp-bento .t-papers:hover img { transform: rotate(-1deg) translateY(-12px); }
.sp-bento .t-plan { grid-column: span 4; background: var(--blue); color: #fff; } .sp-bento .t-plan p { color: #dbe5f8; }
.sp-bento .t-count { grid-column: span 3; }
.sp-bento .t-drill { grid-column: span 3; background: #e7eefb; }
.sp-bento .t-report { grid-column: span 4; }
.sp-bento .t-mock { grid-column: span 4; }
.sp-bento .t-parent { grid-column: span 4; }
.sp-bento .t-books { grid-column: span 4; background: #e7eefb; display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; padding-bottom: 0; }
.sp-books-t { position: relative; z-index: 1; }
.sp-bento .t-library { grid-column: span 5; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.sp-bento .t-library img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(16,24,40,.08), 0 18px 30px -18px rgba(16,24,40,.4);
  transform: rotate(2deg); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.sp-bento .t-library:hover img { transform: rotate(0) scale(1.03); }
.sp-bento .t-free { grid-column: span 3; background: #e8f4ed; } .sp-bento .t-free h3 { color: var(--green); } .sp-bento .t-free a { color: var(--green); }
.sp-bento .t-live { grid-column: span 12; background: var(--ink2); color: #fff; } .sp-bento .t-live p { color: #c9d2e3; max-width: 70ch; }
.sp-bento .t-live[hidden] { display: none; }
.sp-drill { position: relative; height: 54px; margin-bottom: 14px; overflow: hidden; }
.sp-drill span { position: absolute; left: 0; top: 0; font-family: var(--serif); font-weight: 600; font-size: 2.6rem; letter-spacing: -.02em; color: var(--deep);
  line-height: 54px; opacity: 0; transform: translateY(100%); }
@media (prefers-reduced-motion: no-preference) {
  .sp-drill span { animation: spDrill 8s cubic-bezier(.16,1,.3,1) infinite; }
  .sp-drill span:nth-child(2) { animation-delay: 2s; } .sp-drill span:nth-child(3) { animation-delay: 4s; } .sp-drill span:nth-child(4) { animation-delay: 6s; }
}
@media (prefers-reduced-motion: reduce) { .sp-drill span:first-child { opacity: 1; transform: none; } }
@keyframes spDrill { 0% { opacity: 0; transform: translateY(100%); } 4%, 21% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-100%); } }
.sp-fan { position: relative; align-self: end; justify-self: center; width: 120px; height: 150px; margin-bottom: -30px; }
.sp-fan img { position: absolute; left: 50%; bottom: 0; width: 120px; height: auto; border-radius: 4px; transform-origin: 50% 120%;
  box-shadow: 0 16px 30px -12px rgba(16,24,40,.45); transform: translateX(-50%); transition: transform .7s cubic-bezier(.16,1,.3,1); }
.sp-fan img:nth-child(1) { transform: translateX(-50%) rotate(-14deg); }
.sp-fan img:nth-child(2) { transform: translateX(-50%) rotate(-3deg); }
.sp-fan img:nth-child(3) { transform: translateX(-50%) rotate(9deg); }
.sp-bento .t-books:hover .sp-fan img:nth-child(1) { transform: translateX(-82%) rotate(-20deg); }
.sp-bento .t-books:hover .sp-fan img:nth-child(3) { transform: translateX(-18%) rotate(15deg); }

/* siblings: pick a number, see the totals */
.sp-sib { background: #f4f6fa; }
.sp-sib-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sp-calc { border-radius: 26px; background: #fff; padding: 28px; box-shadow: 0 0 0 1px rgba(16,24,40,.07), 0 30px 60px -36px rgba(29,60,120,.4); }
.sp-calc-q { margin: 0 0 12px; font-weight: 600; color: var(--ink2); }
.sp-kids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px; border-radius: 16px; background: #eef2f8; margin-bottom: 24px; position: relative; }
.sp-kids button { position: relative; z-index: 1; border: 0; background: none; border-radius: 12px; padding: 12px 0; font: inherit; font-weight: 700; font-size: 1.1rem;
  color: #475467; cursor: pointer; transition: color .3s, background .3s, box-shadow .3s; }
.sp-kids button[aria-checked="true"] { background: #fff; color: var(--blue); box-shadow: 0 6px 16px -8px rgba(29,60,120,.45); }
.sp-kids button:hover { color: var(--blue); }
.sp-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sp-tot { display: block; font-family: var(--serif); font-weight: 600; font-size: 2.6rem; letter-spacing: -.03em; color: var(--ink2); line-height: 1; font-variant-numeric: tabular-nums; }
.sp-per { display: block; margin-top: 6px; font-size: .88rem; color: #5b6475; }
.sp-per b { color: var(--ink2); font-weight: 600; }
.sp-calc-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #e6eaf0; font-size: .88rem; color: #5b6475; }

.sp-terms-in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.sp-terms h3 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin: 0 0 8px; color: var(--ink2); }
.sp-terms p { margin: 0; color: #475467; line-height: 1.65; }
.sp-terms a { color: var(--blue); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .sp-head > *, .sp-offer { opacity: 0; transform: translateY(16px); animation: ccUp .9s cubic-bezier(.16,1,.3,1) forwards; }
  .sp-head > :nth-child(2) { animation-delay: .05s; } .sp-head > :nth-child(3) { animation-delay: .1s; }
  .sp-head > :nth-child(4) { animation-delay: .15s; } .sp-head > :nth-child(5) { animation-delay: .2s; }
  .sp-offer { animation-delay: .25s; }
}

@media (max-width: 1100px) {
  .sp-bento .t-papers { grid-column: span 6; } .sp-bento .t-plan, .sp-bento .t-count, .sp-bento .t-drill, .sp-bento .t-report, .sp-bento .t-mock, .sp-bento .t-parent, .sp-bento .t-free { grid-column: span 6; }
  .sp-bento .t-books { grid-column: span 6; } .sp-bento .t-library { grid-column: span 12; }
}
@media (max-width: 860px) {
  .sp-wrap { padding: 0 16px; }
  .sp-hero { padding: 24px 0 48px; }
  .sp-top { grid-template-columns: 1fr; gap: 0; }
  .sp-head { display: contents; }
  .sp-back { order: 1; margin-bottom: 18px; } .sp-tags { order: 2; } .sp h1 { order: 3; font-size: 2.5rem; margin-bottom: 18px; }
  .sp-offer { order: 4; margin-bottom: 28px; } .sp-lede { order: 5; } .sp-points { order: 6; } .authmsg { order: 3; }
  .sp-offer { padding: 20px; }
  .sp-section { padding: 52px 0; }
  .sp-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 10px; }
  .sp-tile { grid-column: span 2 !important; grid-row: auto !important; min-height: 0; }
  .sp-bento .t-papers { height: 460px; } .sp-bento .t-books { min-height: 220px; grid-template-columns: 1fr 120px; }
  .sp-bento .t-count, .sp-bento .t-drill, .sp-bento .t-parent, .sp-bento .t-free { grid-column: span 1 !important; }
  .sp-tile h3 { font-size: 1.15rem; }
  .sp-bento .t-library { grid-template-columns: 1fr; }
  .sp-sib-in, .sp-terms-in { grid-template-columns: 1fr; gap: 28px; }
  .sp-tot { font-size: 2.1rem; }
}
@media (max-width: 420px) {
  .sp-bento .t-count, .sp-bento .t-drill, .sp-bento .t-parent, .sp-bento .t-free { grid-column: span 2 !important; }
}

/* siblings: the saving, with the full price crossed out (4 Oct 2026) */
.sp-was { display: block; height: 1.3em; font-size: .95rem; font-weight: 500; color: #6b7385; text-decoration-thickness: 2px; text-decoration-color: rgba(178,72,31,.75); }
.sp-save { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px;
  background: #e8f4ed; color: #1f6b45; font-size: .95rem; line-height: 1.4; }
.sp-save b { font-weight: 700; }
.sp-off { margin-left: auto; padding: 5px 11px; border-radius: 999px; background: #1f6b45; color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.sp-off[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .sp-save.pop { animation: spPop .5s cubic-bezier(.16,1,.3,1); }
  .sp-save.pop .sp-off { animation: spBadge .6s cubic-bezier(.34,1.56,.64,1); }
}
@keyframes spPop { from { transform: translateY(6px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes spBadge { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

/* the plainer tiles, each with something to look at (5 Oct 2026) */
.sp-bento .t-plan { display: flex; flex-direction: column; }
.sp-week { list-style: none; margin: auto 0 0; padding: 14px 0 0; display: grid; gap: 6px; }
.sp-week li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 12px; background: rgba(255,255,255,.12);
  color: #fff; font-size: .86rem; font-weight: 500; }
.sp-week i { flex: none; width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); position: relative; }
.sp-week i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); }

.sp-bento .t-count { background: #e7eefb; display: flex; flex-direction: column; }
.sp-cal { display: grid; grid-template-columns: repeat(7, 1fr) ; gap: 5px; margin: auto 0 0; padding-top: 14px; position: relative; }
.sp-cal i { aspect-ratio: 1; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px rgba(29,60,120,.12); }
.sp-cal b { position: absolute; right: 0; bottom: -2px; transform: translateY(100%); font-size: .72rem; font-weight: 700; color: var(--deep); padding-top: 6px; }
.sp-cal i:last-of-type { background: var(--green); box-shadow: none; }
.sp-bento .t-count { padding-bottom: 34px; }

.sp-bento .t-report { display: flex; flex-direction: column; }
.sp-bars { width: 100%; height: auto; margin-top: auto; padding-top: 14px; border-radius: 10px; }

.sp-bento .t-mock { background: var(--deep); color: #fff; } .sp-bento .t-mock p { color: #c3d1ee; }
.sp-bento .t-mock { display: flex; flex-direction: column; }
.sp-mockfoot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 16px; }
.sp-mockfoot p { margin: 0; font-size: .86rem; line-height: 1.4; color: #c3d1ee; }
.sp-mockfoot b { display: block; color: #fff; font-weight: 600; }
.sp-timer { position: relative; flex: none; width: 64px; height: 64px; display: grid; place-items: center; }
.sp-timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sp-timer circle { fill: none; stroke-width: 5; }
.sp-timer .bg { stroke: rgba(255,255,255,.15); }
.sp-timer .fg { stroke: #9db9ec; stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 0; }
.sp-timer span { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; }

.sp-bento .t-parent { display: flex; flex-direction: column; }
.sp-chart { width: 100%; height: auto; margin-top: auto; padding-top: 12px; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.sp-bento .t-parent:hover .sp-chart { transform: scale(1.03); }

@media (prefers-reduced-motion: no-preference) {
  .sp-in .sp-week i::after { animation: spTick .35s cubic-bezier(.34,1.56,.64,1) forwards; }
  .sp-in .sp-week li:nth-child(1) i::after { animation-delay: .5s; } .sp-in .sp-week li:nth-child(2) i::after { animation-delay: 1.1s; }
  .sp-in .sp-week li:nth-child(3) i::after { animation-delay: 1.7s; }
  .sp-in .sp-week li { animation: spRow .5s ease both; } .sp-in .sp-week li:nth-child(1) { animation-delay: .5s; }
  .sp-in .sp-week li:nth-child(2) { animation-delay: 1.1s; } .sp-in .sp-week li:nth-child(3) { animation-delay: 1.7s; }
  .sp-in .sp-cal i:not(:last-of-type) { animation: spDay 6s ease infinite; animation-delay: calc(var(--d) * 90ms); }
  .sp-in .sp-timer .fg { animation: spTime 8s linear infinite; }
}
@media (prefers-reduced-motion: reduce) { .sp-week i::after { transform: rotate(45deg) scale(1); } }
@keyframes spTick { to { transform: rotate(45deg) scale(1); } }
@keyframes spRow { 0% { background: rgba(255,255,255,.12); } 40% { background: rgba(255,255,255,.28); } 100% { background: rgba(255,255,255,.12); } }
@keyframes spDay { 0%, 4% { background: #fff; } 10%, 80% { background: #9db9ec; } 90%, 100% { background: #fff; } }
@keyframes spTime { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 163.4; } }

/* spaced review tile: the review steps light in turn (5 Oct 2026) */
.sp-bento .t-spaced { grid-column: span 4; background: var(--deep); color: #fff; display: flex; flex-direction: column; }
.sp-bento .t-spaced p { color: #c3d1ee; }
.sp-ladder { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 4px; margin-top: auto; padding-top: 14px; font-size: .72rem; font-weight: 600; }
.sp-ladder span { flex: none; padding: 4px 7px; border-radius: 999px; background: rgba(255,255,255,.1); color: #c3d1ee; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.sp-ladder i { flex: 1 1 4px; min-width: 3px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.25); }
.sp-ladder .r0 { background: #c9871f; color: #fff; box-shadow: none; }
.sp-ladder .r4 { background: #1f6b45; color: #fff; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .sp-in .sp-ladder .r1 { animation: spLit 6s linear 1.2s infinite; } .sp-in .sp-ladder .r2 { animation: spLit 6s linear 2.4s infinite; }
  .sp-in .sp-ladder .r3 { animation: spLit 6s linear 3.6s infinite; }
}
@keyframes spLit { 0%, 2% { background: rgba(255,255,255,.1); color: #c3d1ee; } 6%, 80% { background: #fff; color: #1d3c78; } 95%, 100% { background: rgba(255,255,255,.1); color: #c3d1ee; } }
@media (max-width: 1100px) { .sp-bento .t-spaced { grid-column: span 6; } }

/* show / hide password (auth.js) */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 46px !important; box-sizing: border-box; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: none; border-radius: 8px; color: var(--muted); cursor: pointer; padding: 0; }
.pw-eye:hover, .pw-eye:focus-visible { color: var(--emerald); background: rgba(47,90,168,.08); }
.pw-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ================= Platform pages (5 Oct 2026) =================
   The family dashboard (.pv-parent on body, set by dashboard.js) and a child's
   "See everything" page (child.html, section.pv) in the homepage's language:
   the blue ground, serif headings, rounded tiles in a pattern. Every number
   still comes from the same queries; only the markup and these styles changed. */
.pv, body.pv-parent .dash { --ink2: #101828; --blue: #2f5aa8; --deep: #1d3c78; --green: #1f6b45; --amber: #c9871f;
  position: relative; isolation: isolate; overflow: hidden; padding: 30px 0 72px;
  background: linear-gradient(180deg, #eef3fc 0%, #f4f6fa 60%, #f6f7fa 100%); }
.pv::before, body.pv-parent .dash::before { content: ""; position: absolute; inset: -20%; z-index: -2; pointer-events: none; filter: blur(10px);
  background: radial-gradient(34% 40% at 84% 12%, rgba(63,116,214,.26), transparent 70%), radial-gradient(30% 36% at 8% 2%, rgba(157,185,236,.42), transparent 70%); }
@media (prefers-reduced-motion: no-preference) { .pv::before, body.pv-parent .dash::before { animation: ccDrift 22s ease-in-out infinite alternate; } }
.pv > .container, body.pv-parent .dash > .container { max-width: 1240px; }
.pvt { position: relative; overflow: hidden; border-radius: 24px; background: #fff; padding: 22px 24px; color: var(--ink2);
  box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); }
@media (prefers-reduced-motion: no-preference) { .pvt { animation: ccTile .8s cubic-bezier(.16,1,.3,1) both; } }
.pvt h3, .pvt h2 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; margin: 0 0 4px; letter-spacing: -.01em; color: inherit; line-height: 1.2; }
.pv-sub { font-size: .86rem; color: #5b6475; margin: 0; line-height: 1.5; }
.pv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pv-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; }
.pv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 14px; font: inherit; font-weight: 600; font-size: .9rem;
  background: #fff; color: var(--ink2); box-shadow: 0 0 0 1px rgba(16,24,40,.08); border: 0; cursor: pointer; transition: transform .25s, box-shadow .25s; }
.pv-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(47,90,168,.3), 0 14px 26px -16px rgba(29,60,120,.4); color: var(--ink2); }
.pv-btn.solid { background: var(--blue); color: #fff; box-shadow: 0 10px 22px -12px rgba(47,90,168,.8); }
.pv-btn.solid:hover { color: #fff; }
.pv-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-tag { display: inline-block; padding: 4px 10px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px rgba(16,24,40,.08);
  font-size: .76rem; font-weight: 600; color: var(--deep); white-space: nowrap; }
.pv-tag.green { background: #e8f4ed; color: var(--green); box-shadow: none; }
.pv-tag.amber { background: #fdf0dd; color: #8a5a12; box-shadow: none; }
.pv-tag.blue { background: #e7eefb; color: var(--deep); box-shadow: none; }
.pv-tag.grey { background: #f4f5f8; color: #6b7385; box-shadow: none; }
.pv [hidden], body.pv-parent .dash [hidden] { display: none !important; }
.pv .dempty, body.pv-parent .dempty { border: 1.5px dashed #d6deea; border-radius: 16px; background: transparent; }

/* --- the page head, both pages --- */
.pv-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.pv-back { font-size: .88rem; color: #56607a; display: inline-block; margin-bottom: 12px; }
.pv-who { display: flex; align-items: center; gap: 16px; }
.pv-face { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--deep); color: #fff;
  font-family: var(--serif); font-weight: 700; font-size: 1.6rem; flex: none; }
.pv-h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -.025em; line-height: 1.02; margin: 0 0 6px; color: var(--ink2); }
.pv-h1 em { font-style: italic; color: var(--blue); }
.pv-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .88rem; color: #56607a; }
.pv-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* the family page reuses dashboard.html's head */
body.pv-parent .dash-head { align-items: flex-end; margin-bottom: 24px; }
body.pv-parent .dash-head .seal { display: none; }
body.pv-parent .dash-hi { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: -.025em; line-height: 1.04; color: var(--ink2); }
body.pv-parent .dash-hi em { font-style: italic; color: var(--blue); }
body.pv-parent .dash-sub { font-size: .95rem; color: #56607a; margin-top: 6px; }
body.pv-parent .dash-head .btn { border-radius: 14px; padding: 11px 16px; font-size: .9rem; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(16,24,40,.08); }
body.pv-parent .dash-head .btn:hover { box-shadow: 0 0 0 1px rgba(47,90,168,.3), 0 14px 26px -16px rgba(29,60,120,.4); transform: translateY(-2px); }
body.pv-parent .dash-head .btn.btn-solid { background: var(--blue); color: #fff; box-shadow: 0 10px 22px -12px rgba(47,90,168,.8); }

/* --- family page tiles --- */
.pv-kid { grid-column: span 8; display: grid; grid-template-columns: 260px 1fr; gap: 28px; background: var(--deep); color: #fff; }
.pv-kid.solo { grid-column: span 12; }
.pv-kidwho { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pv-kidface { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: #fff; color: var(--deep);
  font-family: var(--serif); font-weight: 700; font-size: 1.3rem; flex: none; }
.pv-kidname { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.pv-kidmeta { font-size: .84rem; color: #c3d1ee; }
.pv-score { display: flex; align-items: center; gap: 14px; }
.pv-ring { position: relative; flex: none; width: 112px; height: 112px; }
.pv-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pv-ring circle { fill: none; stroke-width: 10; }
.pv-ring .bg { stroke: rgba(255,255,255,.12); }
.pv-ring .fg { stroke: #9db9ec; stroke-linecap: round; stroke-dasharray: 402; stroke-dashoffset: var(--off); }
@media (prefers-reduced-motion: no-preference) { .pv-ring .fg { stroke-dashoffset: 402; animation: pvRing 1.4s cubic-bezier(.16,1,.3,1) .3s forwards; } }
@keyframes pvRing { to { stroke-dashoffset: var(--off); } }
.pv-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pv-ring b { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1; }
.pv-ring small { font-size: .72rem; color: #c3d1ee; margin-top: 4px; }
.pv-nums { display: grid; gap: 8px; flex: 1; }
.pv-nums div { background: rgba(255,255,255,.08); border-radius: 14px; padding: 10px 12px; }
.pv-nums b { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.pv-nums span { font-size: .74rem; color: #c3d1ee; }
.pv-kidmain { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-top: 4px; }
.pv-k { font-size: .8rem; font-weight: 600; color: #9db9ec; margin: 0 0 8px; }
.pv-weak { display: grid; gap: 7px; }
.pv-weakrow { display: grid; grid-template-columns: minmax(0, 1fr) 90px 34px; align-items: center; gap: 10px; font-size: .84rem; color: #dbe5f8; }
.pv-weakrow > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-weakrow em { font-style: normal; color: #9db9ec; text-align: right; font-size: .78rem; font-variant-numeric: tabular-nums; }
.pv-bar { display: block; height: 6px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.pv-bar i { display: block; height: 100%; border-radius: 99px; width: var(--w); }
@media (prefers-reduced-motion: no-preference) { .pv-bar i { width: 0; animation: pvBar 1.2s cubic-bezier(.16,1,.3,1) .4s forwards; } }
@keyframes pvBar { to { width: var(--w); } }
.pv-quiet { font-size: .86rem; color: #c3d1ee; margin: 0; }
.pv-week { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-week span { flex: 1 1 140px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.08); font-size: .82rem; color: #dbe5f8;
  display: flex; align-items: center; gap: 8px; min-width: 0; }
.pv-week span.done { background: rgba(31,107,69,.55); color: #fff; }
.pv-week span i { width: 14px; height: 14px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px currentColor; flex: none; }
.pv-week span.done i { background: #fff; box-shadow: none; }
.pv-kidacts { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-kidacts a, .pv-kidacts button { padding: 10px 14px; border-radius: 12px; font: inherit; font-size: .86rem; font-weight: 600; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); transition: background .25s; }
.pv-kidacts a:hover, .pv-kidacts button:hover { background: rgba(255,255,255,.22); color: #fff; }
.pv-kidacts a.go { background: #fff; color: var(--deep); box-shadow: none; }
.pv-kid .gcse-box { grid-column: 1 / -1; background: #fff; color: var(--ink2); border-radius: 16px; padding: 14px 16px; }

.pv-rev { grid-column: span 4; background: #e7eefb; display: flex; flex-direction: column; gap: 10px; }
.pv-revitem { background: #fff; border-radius: 16px; padding: 12px 14px; display: grid; gap: 8px; }
.pv-revitem b { font-size: .9rem; }
.pv-ladder { display: flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; }
.pv-ladder span { padding: 3px 7px; border-radius: 99px; background: #eef1f6; color: #5b6475; }
.pv-ladder span.on { background: var(--blue); color: #fff; }
.pv-ladder span.r0 { background: var(--amber); color: #fff; }
.pv-ladder i { flex: 1; height: 2px; background: #d6deea; border-radius: 2px; }
.pv-due { font-size: .78rem; color: #5b6475; }

.pv-new { grid-column: span 6; display: grid; grid-template-columns: 1fr 150px; gap: 18px; align-items: center; }
.pv-new .pv-kidface { background: #e7eefb; }
.pv-new .pv-kidname { color: var(--ink2); } .pv-new .pv-kidmeta { color: #5b6475; }
.pv-new p { color: #475467; font-size: .92rem; margin: 10px 0 16px; line-height: 1.55; }
.pv-newart { position: relative; height: 140px; }
.pv-newart img { position: absolute; width: 100px; border-radius: 8px; box-shadow: 0 16px 30px -14px rgba(16,24,40,.45); }
.pv-newart img:nth-child(1) { left: 0; top: 18px; transform: rotate(-8deg); }
.pv-newart img:nth-child(2) { right: 0; top: 0; transform: rotate(6deg); }
.pv-new .pv-kidacts a, .pv-new .pv-kidacts button { background: #f4f6fa; color: var(--ink2); box-shadow: inset 0 0 0 1px rgba(16,24,40,.08); }
.pv-new .pv-kidacts a.go { background: var(--blue); color: #fff; box-shadow: none; }
/* Remove is a quiet text action at the far end of the row, never a pill
   beside See everything: a mis-tap there makes a child vanish. */
.pv-kidacts button.fam-remove, .pv-new .pv-kidacts button.fam-remove { margin-left: auto; background: none; box-shadow: none;
  font-weight: 500; font-size: .8rem; padding: 10px 6px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; }
.pv-kidacts button.fam-remove { color: rgba(255,255,255,.62); }
.pv-new .pv-kidacts button.fam-remove { color: #5b6475; }
.pv-kidacts button.fam-remove:hover { background: none; color: #fff; text-decoration-color: currentColor; }
.pv-new .pv-kidacts button.fam-remove:hover { color: #b42318; }

.pv-notes { grid-column: span 6; }
.pv-notes.wide { grid-column: span 12; }
.pv-note { border-top: 1px solid #eef1f6; padding: 12px 0 0; margin-top: 12px; }
.pv-noteh { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; color: #5b6475; margin-bottom: 4px; }
.pv-note p { margin: 0; font-size: .92rem; color: #344054; line-height: 1.55; }
.pv-note .todo { margin-top: 6px; font-size: .86rem; color: var(--deep); }

/* --- the child page --- */
.pv-live { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; background: var(--green) !important; color: #fff; padding: 16px 22px; }
.pv-live .dot { width: 10px; height: 10px; border-radius: 50%; background: #9ff0c0; flex: none; }
@media (prefers-reduced-motion: no-preference) { .pv-live .dot { animation: pvPulse 1.6s infinite; } }
@keyframes pvPulse { 0% { box-shadow: 0 0 0 0 rgba(159,240,192,.7); } 100% { box-shadow: 0 0 0 12px rgba(159,240,192,0); } }
.pv-live b { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.pv-live #liveTitle, .pv-live #liveLeft, .pv-live #liveMsg { color: #d5efe0; font-size: .84rem; }
.pv-live .pv-btn { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.pv-liveacts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.pv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.pv-stat { padding: 18px 20px; }
.pv-stat b { display: block; font-family: var(--serif); font-size: 2.2rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; margin: 8px 0 6px; color: var(--ink2); }
.pv-stat .k { font-size: .82rem; font-weight: 600; color: #5b6475; }
.pv-stat small { font-size: .8rem; color: #5b6475; }
.pv-stat.blue { background: var(--deep); } .pv-stat.blue .k, .pv-stat.blue small { color: #c3d1ee; } .pv-stat.blue b { color: #fff; }
.pv-mini { display: block; height: 6px; border-radius: 99px; background: #eef1f6; margin-top: 10px; overflow: hidden; }
.pv-mini i { display: block; height: 100%; border-radius: 99px; background: var(--green); width: var(--w); }
@media (prefers-reduced-motion: no-preference) { .pv-mini i { width: 0; animation: pvBar 1.2s cubic-bezier(.16,1,.3,1) .4s forwards; } }

.pv-chart { grid-column: span 8; }
.pv-chart svg { width: 100%; height: auto; display: block; }
.pv-chart .ln { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .pv-chart .ln { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: pvDraw 1.8s cubic-bezier(.16,1,.3,1) .3s forwards; }
  .pv-chart .area { opacity: 0; animation: pvFade 1s ease 1.2s forwards; }
}
@keyframes pvDraw { to { stroke-dashoffset: 0; } } @keyframes pvFade { to { opacity: 1; } }

.pv-weekt { grid-column: span 4; background: #e7eefb; }
.pv-task { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 11px 12px; font-size: .88rem; margin-top: 8px; }
.pv-task i { flex: none; width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px #c3cddc; position: relative; }
.pv-task.done i { background: var(--green); box-shadow: none; }
.pv-task.done i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pv-task > span:not(.pv-tag) { flex: 1; min-width: 0; }
.pv-task .pv-tag { flex: none; }
.pv-task small { display: block; font-size: .76rem; color: #6b7385; }
.pv-weekt .pv-sub { margin-top: 10px; }

.pv-topics { grid-column: span 7; }
.pv-trow { display: grid; grid-template-columns: minmax(0, 1fr) 130px 46px 128px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid #f1f3f7; font-size: .88rem; }
.pv-trow:first-child { border-top: 0; }
.pv-trow .pv-bar { background: #eef1f6; height: 7px; }
.pv-trow em { font-style: normal; color: #5b6475; font-variant-numeric: tabular-nums; text-align: right; font-size: .82rem; }
.pv-trow small { color: #6b7385; font-size: .74rem; }
.pv-trow .pv-tag { justify-self: start; }

.pv-notest { grid-column: span 5; background: var(--deep) !important; color: #fff; }
.pv-notest .pv-sub { color: #c3d1ee; }
.pv-notest .pv-note { background: rgba(255,255,255,.08); border: 0; border-radius: 16px; padding: 14px 16px; margin-top: 10px; }
.pv-notest .pv-noteh { color: #9db9ec; }
.pv-notest .pv-note p { color: #e8eefb; }
.pv-notest .pv-note .todo, .pv-notest .pv-note .well { color: #fff; margin-top: 8px; font-size: .88rem; }
.pv-notest .pv-note b { color: #9db9ec; }
.pv-notest .pv-btn { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); padding: 8px 12px; font-size: .82rem; }
.pv-notest .dempty { border-color: rgba(255,255,255,.3); } .pv-notest .de-t { color: #fff; } .pv-notest .de-p { color: #c3d1ee; }
.pv-notest #noteForm { background: #fff; color: var(--ink2); border-radius: 16px; padding: 16px; margin-top: 10px; }

.pv-when { grid-column: span 5; }
.pv .cv-heat { margin-top: 4px; } .pv .cv-cell { border-radius: 6px; } .pv .cv-heatfoot { margin-top: 12px; }
.pv-sat { grid-column: span 7; }
.pv-arow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #f1f3f7; font-size: .88rem; color: var(--ink2); }
.pv-arow:first-child { border-top: 0; }
.pv-arow small { display: block; font-size: .76rem; color: #6b7385; margin-top: 2px; }
.pv-arow b { font-family: var(--serif); font-size: 1.05rem; text-align: right; min-width: 52px; }
.pv-arow:hover { color: var(--blue); }
.pv-quiz { grid-column: span 12; }

.pv-acct { grid-column: span 12; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; background: #f9fafc !important; }
.pv-acct h4 { margin: 0 0 10px; font-size: .95rem; font-weight: 700; color: var(--ink2); }
.pv-acct .dl-row { border-top: 1px solid #eef1f6; padding: 9px 0; }
.pv-acct p { font-size: .86rem; color: #5b6475; line-height: 1.6; margin: 0; }
.pv .cv-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid #eef1f6; cursor: pointer; }
.pv .cv-switch input { appearance: none; -webkit-appearance: none; flex: none; width: 40px; height: 23px; border-radius: 99px; background: #d6deea; position: relative;
  cursor: pointer; transition: background .25s; margin: 0; }
.pv .cv-switch input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.pv .cv-switch input:checked { background: var(--blue); }
.pv .cv-switch input:checked::after { transform: translateX(17px); }
.pv .cv-switch input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (max-width: 1000px) {
  .pv-grid > *, .pv-kid, .pv-rev, .pv-new, .pv-notes { grid-column: 1 / -1 !important; }
  .pv-stats { grid-template-columns: 1fr 1fr; }
  .pv-kid { grid-template-columns: 1fr; } .pv-new { grid-template-columns: 1fr; } .pv-newart { display: none; }
  .pv-acct { grid-template-columns: 1fr; }
  .pv-trow { grid-template-columns: minmax(0, 1fr) 70px 40px; } .pv-trow .pv-tag { display: none; }
}
@media (max-width: 560px) { .pv-stat b { font-size: 1.7rem; } .pv-week span { flex-basis: 100%; } .pv-head { flex-direction: column; gap: 8px; } }

/* --- the child's own dashboard (body.pv-student), in the child's theme colour --- */
body.pv-student .dash { --ink2: #101828; --blue: var(--emerald); --deep: var(--emerald-dark); --green: #1f6b45; --amber: #c9871f;
  position: relative; isolation: isolate; overflow: hidden; padding: 30px 0 72px;
  background: linear-gradient(180deg, #eef3fc 0%, #f4f6fa 60%, #f6f7fa 100%); }
body.pv-student .dash::before { content: ""; position: absolute; inset: -20%; z-index: -2; pointer-events: none; filter: blur(10px);
  background: radial-gradient(34% 40% at 84% 12%, color-mix(in srgb, var(--emerald) 26%, transparent), transparent 70%),
              radial-gradient(30% 36% at 8% 2%, color-mix(in srgb, var(--gold-soft) 60%, transparent), transparent 70%); }
@media (prefers-reduced-motion: no-preference) { body.pv-student .dash::before { animation: ccDrift 22s ease-in-out infinite alternate; } }
body.pv-student .dash > .container { max-width: 1240px; }
body.pv-student .dash [hidden] { display: none !important; }
body.pv-student .dash-head { align-items: flex-end; margin-bottom: 24px; }
body.pv-student .dash-head .seal { display: none; }
body.pv-student .dash-hi { font-family: var(--serif); font-weight: 600; font-size: clamp(2.3rem, 4.4vw, 3.6rem); letter-spacing: -.025em; line-height: 1.04; color: var(--ink2); }
body.pv-student .dash-hi em { font-style: italic; color: var(--blue); }
body.pv-student .dash-sub { font-size: .95rem; color: #56607a; margin-top: 6px; }
body.pv-student .dash-head .btn { border-radius: 14px; padding: 11px 16px; font-size: .9rem; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(16,24,40,.08); }
body.pv-student .dash-head .btn:hover { box-shadow: 0 0 0 1px rgba(47,90,168,.3), 0 14px 26px -16px rgba(29,60,120,.4); transform: translateY(-2px); }
body.pv-student .dash-head .dchip { border-radius: 99px; padding: 8px 14px; font-size: .86rem; font-weight: 700; border: 0; }
body.pv-student .dash-head .dchip.amber { background: #fdf0dd; color: #8a5a12; }
body.pv-student .dash-head .dchip.green { background: #e8f4ed; color: var(--green); }

body.pv-student .pvs-grid { grid-auto-flow: dense; align-items: stretch; }
body.pv-student .pvs-grid > .dcard { margin: 0; border: 0; border-radius: 24px; background: #fff; padding: 22px 24px; color: var(--ink2);
  box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); }
@media (prefers-reduced-motion: no-preference) { body.pv-student .pvs-grid > .dcard { animation: ccTile .8s cubic-bezier(.16,1,.3,1) both; } }
body.pv-student #weekCard { grid-column: span 8; }
body.pv-student #levelCard { grid-column: span 4; }
body.pv-student #fixCard { grid-column: span 7; }
body.pv-student #drillCard { grid-column: span 5; }
body.pv-student #topicCard { grid-column: span 5; }
body.pv-student #scoreCard { grid-column: span 7; }
body.pv-student #sessionCard, body.pv-student #mockCard { grid-column: span 6; }
body.pv-student #badgeCard { grid-column: span 12; }
body.pv-student #sibCard { grid-column: span 6; }
body.pv-student #sessionCard { grid-column: span 12; }
body.pv-student .pvs-grid:has(#mockCard[hidden]) #sibCard, body.pv-student .pvs-grid:has(#sibCard[hidden]) #mockCard { grid-column: span 12; }
body.pv-student .gbadge-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
/* colours live inside the level tile: levels are what unlock them */
.pvs-theme { margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--emerald) 18%, #fff); }
.pvs-k2 { font-size: .84rem; font-weight: 700; color: var(--ink2); }
.pvs-theme #themeBody { margin-top: 8px !important; }
body.pv-student .dlbl { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; text-transform: none;
  color: inherit; background: none; padding: 0; border: 0; }
body.pv-student .dlbl::before { display: none; }
body.pv-student .dempty { border: 1.5px dashed #d6deea; border-radius: 16px; background: transparent; }
body.pv-student .dl-row { border-top: 1px solid #eef1f6; padding: 11px 0; }
body.pv-student .dlist .dl-row:first-child { border-top: 0; }
body.pv-student .dbar { height: 8px; border-radius: 99px; } body.pv-student .dbar > span { border-radius: 99px; }
body.pv-student .dchip { border-radius: 99px; }

/* up next: the big tile */
body.pv-student #weekCard.hero { background: var(--deep); color: #fff; padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; }
body.pv-student #weekCard.hero .dp { color: color-mix(in srgb, #fff 75%, var(--deep)); font-size: .95rem; }
body.pv-student #weekCard.hero .dp a { color: #fff; }
.pvs-k { font-size: .82rem; font-weight: 700; color: color-mix(in srgb, #fff 65%, var(--deep)); letter-spacing: .02em; }
.pvs-title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.02em; line-height: 1.1; margin: 14px 0 10px; }
body.pv-student #weekCard.hero .btn { border-radius: 14px; padding: 13px 20px; }
body.pv-student #weekCard.hero .btn-solid { background: #fff; color: var(--deep); border-color: #fff; }
body.pv-student #weekCard.hero .btn-line { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
body.pv-student #weekCard.hero .pv-tag.blue { background: rgba(255,255,255,.14); color: #fff; }

/* level */
body.pv-student #levelCard { background: color-mix(in srgb, var(--emerald) 9%, #fff); }
.pvs-lvl { display: flex; align-items: center; gap: 16px; }
.pvs-lvl .pv-ring { width: 96px; height: 96px; }
.pvs-lvl .pv-ring .bg { stroke: color-mix(in srgb, var(--emerald) 15%, #fff); }
.pvs-lvl .pv-ring .fg { stroke: var(--emerald); }
.pvs-lvl .pv-ring b { color: var(--ink2); font-size: 1.8rem; } .pvs-lvl .pv-ring small { color: #5b6475; }
body.pv-student .lvl-n { text-transform: none; letter-spacing: 0; font-size: .82rem; }
body.pv-student .lvl-bar { display: none; }

/* drills */
body.pv-student #drillCard { background: color-mix(in srgb, var(--emerald) 9%, #fff); }
body.pv-student #drillCard .btn-solid { border-radius: 14px; background: var(--emerald); border-color: var(--emerald); }

/* scores */
.pvs-svg { width: 100%; height: 150px; display: block; }
.pvs-svg .ln { fill: none; stroke: var(--emerald); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pvs-svg .area { fill: color-mix(in srgb, var(--emerald) 12%, transparent); }
.pvs-svg .pt { fill: #fff; stroke: var(--emerald); stroke-width: 2.5; }
.pvs-last { font-size: 13px; font-weight: 700; fill: var(--emerald-dark); font-family: var(--sans); }
@media (prefers-reduced-motion: no-preference) {
  .pvs-svg .ln { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: pvDraw 1.8s cubic-bezier(.16,1,.3,1) .3s forwards; }
  .pvs-svg .area { opacity: 0; animation: pvFade 1s ease 1.2s forwards; }
}

/* badges */
body.pv-student .gbadge { border-radius: 16px; border: 0; background: #f4f6fa; transition: transform .3s cubic-bezier(.16,1,.3,1); }
body.pv-student .gbadge:not(.locked) { background: color-mix(in srgb, var(--emerald) 10%, #fff); }
body.pv-student .gbadge:not(.locked):hover { transform: translateY(-3px) rotate(-1deg); }

body.pv-student .dash .dfoot { border-top: 0; margin-top: 18px; }
@media (max-width: 1000px) { body.pv-student .pvs-grid > .dcard { grid-column: 1 / -1 !important; } }
@media (max-width: 560px) { body.pv-student .gbadge-grid { grid-template-columns: 1fr 1fr; gap: 8px; } body.pv-student .gbadge-p { display: none; } }

/* ---- Homepage pricing and FAQ order (5 Oct 2026) ----
   Premium leads the pricing section in the hero card's own blue, tuition
   follows under its own heading, the one-to-one vs group comparison is a
   disclosure under the cards, and the FAQ shows five with the rest folded. */
.mock-promo.price-lead { position: relative; overflow: hidden; isolation: isolate; margin: 0 0 34px; padding: 30px 34px;
  border: 0; border-radius: 22px; color: #fff; background: linear-gradient(155deg, #2f5aa8 0%, #1d3c78 70%);
  box-shadow: 0 30px 60px -30px rgba(29,60,120,.55), inset 0 1px 0 rgba(255,255,255,.18); }
.mock-promo.price-lead::before { content: ""; position: absolute; inset: -40% -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.14) 50%, transparent 58%); transform: translateX(-60%); }
@media (prefers-reduced-motion: no-preference) { .mock-promo.price-lead::before { animation: ccSheen 6s ease-in-out 1s infinite; } }
.mock-promo.price-lead h3 { color: #fff; font-size: 1.45rem; }
.mock-promo.price-lead p { color: #dbe5f8; }
.mock-promo.price-lead strong { color: #fff; }
.mock-promo.price-lead .offer-tag { background: #1f6b45; color: #fff; }
.mock-promo.price-lead .btn { background: #fff; color: #1d3c78; border-color: #fff; }
.mock-promo.price-lead .btn:hover { background: #eef3fc; color: #1d3c78; }
.price-sub-h { text-align: center; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; margin: 0 0 22px; color: var(--ink); }

.cmp-fold { margin-top: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.cmp-fold > summary { list-style: none; cursor: pointer; padding: 18px 22px; min-height: 44px; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; font-weight: 600; color: var(--ink); }
.cmp-fold > summary::-webkit-details-marker { display: none; }
.cmp-fold > summary::after { content: "+"; font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--blue);
  transition: transform .35s cubic-bezier(.16,1,.3,1); }
.cmp-fold[open] > summary::after { transform: rotate(45deg); }
.cmp-fold > .compare { padding: 0 22px; }
.cmp-fold > .callout { margin: 22px; }

.faq-wrap .faq-more { background: none; border: 0; overflow: visible; margin-top: 4px; }
.faq-wrap .faq-more[open] { border: 0; }
.faq-wrap .faq-more > summary { justify-content: center; padding: 14px 22px; color: var(--blue); border-radius: 99px;
  width: max-content; margin: 0 auto 12px; box-shadow: inset 0 0 0 1px var(--line); background: var(--card); }
.faq-wrap .faq-more > summary:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.faq-wrap .faq-more > summary::after { color: var(--blue); }
.faq-wrap .faq-more[open] > summary { margin-bottom: 14px; }
@media (max-width: 700px) {
  .mock-promo.price-lead { padding: 24px 20px; text-align: left; justify-content: flex-start; }
  .cmp-fold > .compare { padding: 0 14px; } .cmp-fold > .callout { margin: 14px; }
}

.swipe-hint { display: none; }
/* On a phone the three tuition cards and the three subject panels swipe
   sideways (the next card peeks in) rather than stacking 1,500px deep. */
@media (max-width: 700px) {
  #pricing .price-grid.three, #subjects .cols-3 { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
    gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 -20px; padding: 14px 20px 6px; scroll-padding: 0 20px; }
  #pricing .price-grid.three::-webkit-scrollbar, #subjects .cols-3::-webkit-scrollbar { display: none; }
  #pricing .price-grid.three > *, #subjects .cols-3 > * { scroll-snap-align: start; margin: 0; }
  .swipe-hint { display: block; text-align: center; font-size: .82rem; color: #5b6475; margin: 10px 0 0; }
  .offer-figures { flex-wrap: nowrap; gap: 10px; }
  .offer-figures > div { min-width: 0; flex: 1; padding: 12px 8px; }
}

/* ---- Accessibility pass (5 Oct 2026, from the Impeccable critique) ----
   Contrast to WCAG AA, a focus ring that shows on dark surfaces, no label
   under 12px, tap targets of 44px on a phone. Colours only darken, so the
   look is unchanged; the amber bars stay #c9871f (they carry no text). */
h1.dash-hi { margin: 0; }

/* Focus: the brand blue ring vanishes on the navy and blue cards. */
.cc-offer :focus-visible, .sp-offer :focus-visible, .pv-kid :focus-visible, .pv-notest :focus-visible,
.price-lead :focus-visible, .price-card.trial :focus-visible, .block-offer :focus-visible,
.band-dark :focus-visible, .site-footer :focus-visible, .premium-band :focus-visible,
.announce-offer:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* "Under 80%" chips: white on #c9871f was 3.0:1; on #9a5f0f it is 5.2:1. */
.cc-ladder .r0, .sp-ladder .r0, .pv-ladder span.r0 { background: #9a5f0f; }
/* Amber and green text on their pale chips (3.4:1 and 4.48:1). */
.dchip.amber, .dlbl.amber, .pp-qtools button.on, .pp-palette button.flag { color: #8a5410; }
.dchip.green, .dlbl.green { color: #18684a; }
/* Slate on the blue-grey tiles (4.27:1) becomes a darker slate (6.6:1). */
.pv-sub, .pv-ladder span, .pv-due, .pv-new .pv-kidmeta { color: #4b5565; }
.pv-notest .pv-sub { color: #c3d1ee; }
.pv-ladder span.on, .pv-ladder span.r0 { color: #fff; }

/* Nothing under 12px that a reader has to read. */
.dlbl { font-size: .75rem; }
.pv-ladder { font-size: .75rem; }
.price-card .pop { font-size: .75rem; }
.hm-card h4, .hm-card h3.hm-k { font-size: .75rem; }
.offer-figures .lbl { font-size: .75rem; }

/* Tap targets. */
.pv-kidacts a, .pv-kidacts button { min-height: 44px; display: inline-flex; align-items: center; }
#signOutBtn { min-height: 44px; }
.sp-back a, .sp-o-links a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 700px) {
  .cc-link, .cc-all, .cc-more > summary { min-height: 44px; display: inline-flex; align-items: center; }
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- The app header (5 Oct 2026): body[data-app], drawn by script.js ---- */
body.app-head .header-cta .btn-premium,
body.app-head .header-cta a[href$="#contact"] { display: none; }
/* Four links and one button fit far below the public 1300px burger point. */
@media (min-width: 761px) and (max-width: 1300px) {
  body.app-head .nav, body.app-head .header-cta { display: flex; }
  body.app-head .nav-toggle { display: none; }
}
.app-switch { display: inline-flex; align-items: center; gap: 8px; margin-left: 18px; position: relative; }
.app-switch select { appearance: none; -webkit-appearance: none; font: inherit; font-weight: 600; font-size: .92rem;
  color: var(--ink); background: #f1f4fa; border: 0; border-radius: 99px; padding: 0 36px 0 16px; min-height: 40px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(16,24,40,.08); transition: box-shadow .2s; }
.app-switch select:hover { box-shadow: inset 0 0 0 1px var(--emerald); }
.app-switch select:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.app-switch::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); pointer-events: none; color: var(--ink); }
@media (max-width: 760px) { .app-switch { margin-left: auto; margin-right: 10px; } .app-switch select { min-height: 44px; } }
body.app-head .header-inner { justify-content: flex-start; }
body.app-head .nav { margin-left: auto; margin-right: 28px; }
body.app-head .nav-toggle { margin-left: auto; }
body.app-head .app-switch + .nav-toggle { margin-left: 0; }

/* ---- Second pass from the repeat critique (6 Oct 2026) ---- */
/* Skip link, added to every page by script.js. */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px;
  background: #1d3c78; color: #fff; font-weight: 600; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }
/* Child switcher: on a narrow phone the logo's words give way so the header fits. */
@media (max-width: 480px) { .site-header:has(.app-switch) .brand-text { display: none; } .app-switch { margin-left: 12px; } }
/* Heatmap labels no smaller than 11.5px. */
.cv-heatday { font-size: .75rem; }
@media (max-width: 700px) { .cv-heatlbl { font-size: .72rem; } }
/* The Premium band's stops: a 44px hit area round the 22px dot. */
.pb-stop::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
/* Done work in the family tile carries a tick, not only a fill. */
.pv-week span.done i { position: relative; }
.pv-week span.done i::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
  border: solid #1f6b45; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Badges not yet earned: dashed and quieter, but readable. */
.gbadge.locked .gbadge-n { color: #4b5565; }
.gbadge.locked .gbadge-p { color: #5b6475; }
/* The mock note gets the site's focus ring. */
#mockNote:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.sp-faq .faq-wrap { margin: 0; max-width: 820px; }
.sp-faq .faq-wrap details { border-radius: 14px; }

/* ---- The installable app (6 Oct 2026): the "home screen" card on the dashboard ---- */
.app-get { display: grid; grid-template-columns: 52px 1fr auto auto; align-items: center; gap: 14px; margin: 0 0 22px;
  padding: 14px 14px 14px 16px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16,24,40,.07), 0 12px 30px -20px rgba(29,60,120,.45); }
.app-get img { width: 52px; height: 52px; border-radius: 13px; }
.app-get-t { display: grid; gap: 3px; font-size: .9rem; line-height: 1.45; color: #4b5565; }
.app-get-t > b { color: #101828; font-size: .98rem; }
.app-get-t svg { width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: #2f5aa8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-get-install { font: inherit; font-weight: 600; border: 0; border-radius: 12px; min-height: 44px; padding: 0 16px; background: #2f5aa8; color: #fff; cursor: pointer; }
.app-get-x { font: inherit; font-size: 1.4rem; line-height: 1; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: #5b6475; cursor: pointer; }
.app-get-x:hover { background: #f1f4fa; }
@media (max-width: 420px) { .app-get { grid-template-columns: 44px 1fr auto; gap: 12px; } .app-get img { width: 44px; height: 44px; }
  .app-get-install { grid-column: 2 / 4; justify-self: start; } .app-get-x { grid-row: 1; grid-column: 3; } }
/* Inside the installed app there is no browser bar above the header: leave room for the notch. */
html.is-app .site-header { padding-top: env(safe-area-inset-top); }

/* ---- The bottom tab bar (6 Oct 2026): phones, signed in; drawn by script.js ---- */
.tabbar, .tabsheet { display: none; }
@media (max-width: 760px), (pointer: coarse) {
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
    box-shadow: 0 -1px 0 rgba(16,24,40,.08), 0 -12px 30px -22px rgba(29,60,120,.35); }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; border: 0; background: none; font: inherit; font-size: .72rem; font-weight: 600; color: #5b6475;
    text-decoration: none; border-radius: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: color .2s, background .2s; }
  .tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .35s cubic-bezier(.34,1.4,.64,1); }
  .tabbar a[aria-current="page"] { color: var(--emerald); }
  .tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 2px; width: 34px; height: 30px; border-radius: 12px;
    background: color-mix(in srgb, var(--emerald) 12%, transparent); z-index: -1; animation: tabPill .4s cubic-bezier(.16,1,.3,1); }
  .tabbar a[aria-current="page"] svg { transform: translateY(-1px); }
  .tabbar a:active svg, .tabbar button:active svg { transform: scale(.88); }
  .tabbar a:focus-visible, .tabbar button:focus-visible { outline: 2px solid var(--emerald); outline-offset: -2px; }
  @keyframes tabPill { from { transform: scaleX(.4); opacity: 0; } to { transform: none; opacity: 1; } }

  body.has-tabbar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.has-tabbar .site-footer { display: none; }
  body.has-tabbar .nav-toggle { display: none; }
  body.has-tabbar .wa-float { display: none; }
  /* The dashboard's own buttons have moved into the bar and the More sheet. */
  body.has-tabbar .dash-head .btn { display: none; }

  .tabsheet { display: block; position: fixed; inset: 0; z-index: 95; }
  .tabsheet[hidden] { display: none; }
  .tabsheet-bg { position: absolute; inset: 0; background: rgba(16,24,40,.38); opacity: 0; transition: opacity .25s; }
  .tabsheet-card { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); background: #fff;
    border-radius: 24px; padding: 10px 8px 8px; display: grid; box-shadow: 0 30px 60px -20px rgba(16,24,40,.45);
    transform: translateY(110%); transition: transform .32s cubic-bezier(.16,1,.3,1); }
  .tabsheet.is-open .tabsheet-bg { opacity: 1; }
  .tabsheet.is-open .tabsheet-card { transform: none; }
  .tabsheet-grip { justify-self: center; width: 38px; height: 4px; border-radius: 4px; background: #d6dbe4; margin: 2px 0 8px; }
  .tabsheet-card a, .tabsheet-out { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px;
    border-radius: 14px; font: inherit; font-weight: 600; font-size: 1rem; color: #101828; text-decoration: none; background: none; border: 0; text-align: left; cursor: pointer; }
  .tabsheet-card a:active, .tabsheet-out:active { background: #f1f4fa; }
  .tabsheet-card a svg { width: 18px; height: 18px; fill: none; stroke: #98a2b3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tabsheet-out { color: #b42318; border-top: 1px solid #eef1f6; border-radius: 0 0 14px 14px; margin-top: 4px; }
  @media (prefers-reduced-motion: reduce) { .tabsheet-card, .tabsheet-bg, .tabbar svg { transition: none; } .tabbar a[aria-current="page"]::before { animation: none; } }
}

/* ---- Homepage free-month dock, phones (6 Oct 2026) ---- */
.cta-dock { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px) {
  .cta-dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 80;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 20px;
    color: #fff; background: linear-gradient(155deg, #2f5aa8 0%, #1d3c78 75%);
    box-shadow: 0 18px 40px -16px rgba(29,60,120,.7), inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(140%); opacity: 0; pointer-events: none;
    transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s; }
  .cta-dock.is-on { transform: none; opacity: 1; pointer-events: auto; }
  .cta-dock-t { display: grid; line-height: 1.25; }
  .cta-dock-t b { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; }
  .cta-dock-t span { font-size: .8rem; color: #dbe5f8; }
  .cta-dock-btn { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 14px;
    background: #fff; color: #1d3c78; font-weight: 700; text-decoration: none; }
  .cta-dock-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  /* The WhatsApp icon steps up out of the dock's way. */
  body.has-dock { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.has-dock .wa-float { bottom: calc(88px + env(safe-area-inset-bottom)); transition: bottom .45s cubic-bezier(.16,1,.3,1); }
  @media (prefers-reduced-motion: reduce) { .cta-dock { transition: opacity .2s; } }
}

/* ---- iPad portrait hero (6 Oct 2026) ----
   701 to 960 wide used the phone's single column stretched out: a card the
   width of the screen and topic bars blown up to poster size. A tablet gets
   the intro beside the card, then the tiles two by two. */
@media (min-width: 701px) and (max-width: 960px) {
  .cc-wrap { padding: 0 28px; column-gap: 22px; row-gap: 14px; }
  .cc h1 { grid-column: 1 / 3; grid-row: 1; font-size: 2.9rem; }
  .cc-lede { grid-column: 1; grid-row: 2; align-self: start; font-size: 1.12rem; }
  .cc-link { grid-column: 1; grid-row: 3; align-self: start; }
  .cc-offer { grid-column: 2; grid-row: 2 / 5; align-self: start; margin-bottom: 0; }
  .cc-bento .t-adapt { grid-column: 1 / 3; grid-row: 5; }
  .cc-bento .t-adapt .cc-bars { max-width: 460px; }
  .cc-bento .t-lesson { grid-column: 1; grid-row: 6; height: 260px; } .cc-ws { width: 78%; }
  .cc-bento .t-progress { grid-column: 2; grid-row: 6; height: 260px; }
  .cc-bento .t-res { grid-column: 1; grid-row: 7; height: 250px; }
  .cc-bento .t-books { grid-column: 2; grid-row: 7; height: 250px; }
}
@media (min-width: 701px) and (max-width: 960px) {
  .cc-bento .t-adapt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 22px; row-gap: 14px; align-items: start; }
  .cc-bento .t-adapt .cc-t-head { grid-column: 1; grid-row: 1; }
  .cc-bento .t-adapt .cc-ladder { grid-column: 1; grid-row: 2; align-self: end; }
  .cc-bento .t-adapt .cc-bars { grid-column: 2; grid-row: 1 / 3; max-width: none; width: 100%; align-self: center; }
}

/* ---- Touch tablets (6 Oct 2026) ----
   An iPad is a touch screen at laptop widths. Signed in, it gets the tab
   bar (floating, centred, not edge to edge) in place of the header links;
   everywhere, its controls get a finger's 44px. A laptop with a mouse is
   untouched: every rule here needs pointer: coarse. */
@media (pointer: coarse) and (min-width: 761px) {
  .tabbar { left: 50%; right: auto; bottom: calc(14px + env(safe-area-inset-bottom)); width: min(560px, calc(100% - 40px));
    transform: translateX(-50%); border-radius: 24px; padding: 6px; box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 18px 40px -18px rgba(29,60,120,.45); }
  body.has-tabbar { padding-bottom: 104px; }
  body.has-tabbar .site-header .nav, body.has-tabbar .site-header .header-cta { display: none; }
  .tabsheet-card { left: 50%; right: auto; width: min(420px, calc(100% - 40px)); transform: translate(-50%, 110%); bottom: 96px; }
  .tabsheet.is-open .tabsheet-card { transform: translate(-50%, 0); }
  .cta-dock { left: 50%; right: auto; width: min(560px, calc(100% - 40px)); transform: translate(-50%, 140%); }
  .cta-dock.is-on { transform: translate(-50%, 0); }
}
@media (pointer: coarse) {
  .nav-toggle { min-width: 44px; min-height: 44px; }
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .cc-link, .cc-all, .cc-more > summary, .sp-back a, .sp-o-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .pv-back a, a.pv-back, .pv-link { min-height: 44px; display: inline-flex; align-items: center; }
  .pv-kidacts a, .pv-kidacts button { min-height: 44px; }
  .pb-stop::before { width: 48px; height: 48px; }
  .site-header .nav a { min-height: 44px; display: inline-flex; align-items: center; }
}
/* The install card sits inside the family grid, under the first child tile. */
#famGrid > .app-get { grid-column: 1 / -1; margin: 0; }

/* The termly mock on a child's page, for the adult (6 Oct 2026). */
.pv-mock { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(16,24,40,.08); display: grid; gap: 8px; }
.pv-mock h3 { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin: 0; color: var(--ink2); }
.pv-mockrow { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-mockrow input { flex: 1; min-width: 160px; min-height: 44px; padding: 0 12px; font: inherit; font-size: 16px;
  border: 1px solid #cfd8e8; border-radius: 12px; background: #fff; }
.pv-mockrow input:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.pv-mockbtn { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--blue); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.pv-mockbtn:disabled { opacity: .6; cursor: wait; }
.pb-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-weight: 600; color: var(--emerald);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .25s; }
.pb-more:hover { text-decoration-color: currentColor; }

/* ---- Contrast, third pass (6 Oct 2026) ---- */
a.announce-offer strong { background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }   /* was white on #4c896a, 4.1:1 */
.offer-figures .was, .offer-figures .lbl { color: #e6edfa; }                                                       /* was 2.6:1 and 3.9:1 */
.price-card.trial .tier { color: #dbe5f8; }                                                                         /* was 4.15:1 */
/* iPad portrait dashboard (6 Oct 2026): the child tile keeps its two columns
   (score on the left, topics and week on the right) instead of stacking into
   600px-wide stat boxes, and the review ladder stops at a readable length. */
@media (min-width: 701px) and (max-width: 1000px) {
  .pv-kid { grid-template-columns: 230px 1fr; gap: 24px; }
}
.pv-revitem .pv-ladder { max-width: 440px; }

/* "Install the app" steps inside the More sheet (6 Oct 2026). */
.tabsheet-steps { display: grid; gap: 10px; padding: 6px 14px 8px; }
.tabsheet-steps img { width: 56px; height: 56px; border-radius: 14px; }
.tabsheet-steps h2 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin: 2px 0 0; color: #101828; }
.tabsheet-steps p { margin: 0; color: #4b5565; font-size: .92rem; line-height: 1.5; }
.tabsheet-steps ol { margin: 4px 0 6px; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 10px; }
.tabsheet-steps li { counter-increment: st; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; color: #101828; font-size: .98rem; line-height: 1.45; }
.tabsheet-steps li::before { content: counter(st); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: #e7eefb; color: #1d3c78; font-weight: 700; font-size: .85rem; }
.tabsheet-steps li svg { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: #2f5aa8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabsheet-done { min-height: 48px; border: 0; border-radius: 14px; background: #2f5aa8; color: #fff; font: inherit; font-weight: 600; cursor: pointer; margin-top: 4px; }
.tabsheet-done:focus-visible { outline: 2px solid #2f5aa8; outline-offset: 3px; }

/* ================= Get the app (app.html, 6 Oct 2026) =================
   The homepage's language: soft blue ground, the app icon, then the steps
   for the reader's device, each with a drawing that rings the thing to tap. */
.ga { --deep: #1d3c78; --blue: #2f5aa8; --ink2: #101828; }
.ga-hero { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 46px;
  background: linear-gradient(180deg, #eef3fc 0%, #f4f6fa 70%, #f6f7fa 100%); }
.ga-hero::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; filter: blur(10px);
  background: radial-gradient(34% 40% at 82% 30%, rgba(63,116,214,.28), transparent 70%), radial-gradient(30% 36% at 8% 10%, rgba(157,185,236,.45), transparent 70%); }
@media (prefers-reduced-motion: no-preference) { .ga-hero::before { animation: ccDrift 22s ease-in-out infinite alternate; } }
.ga-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ga-icon { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 22px 40px -18px rgba(29,60,120,.6); }
@media (prefers-reduced-motion: no-preference) { .ga-icon { animation: gaFloat 5s ease-in-out infinite; } }
@keyframes gaFloat { 50% { transform: translateY(-6px) rotate(-2deg); } }
.ga h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.3rem, 4.6vw, 3.6rem); letter-spacing: -.025em; line-height: 1.04; color: var(--ink2); margin: 22px 0 14px; }
.ga h1 em { color: var(--blue); }
.ga-lede { font-size: 1.12rem; line-height: 1.6; color: #4b5565; max-width: 34em; margin: 0; }
.ga-installed { margin: 18px 0 0; display: inline-block; padding: 10px 16px; border-radius: 12px; background: #e8f4ed; color: #18684a; font-weight: 600; }
.ga-btn { display: block; margin-top: 22px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 14px; font: inherit; font-weight: 700; font-size: 1.05rem;
  color: #fff; background: linear-gradient(155deg, #2f5aa8, #1d3c78); box-shadow: 0 16px 30px -14px rgba(29,60,120,.7); cursor: pointer; transition: transform .2s; }
.ga-btn[hidden] { display: none; }
.ga-btn:hover { transform: translateY(-2px); }
.ga-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.ga-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ga-points li { background: #fff; border-radius: 18px; padding: 18px; box-shadow: inset 0 0 0 1px rgba(16,24,40,.06), 0 14px 30px -24px rgba(29,60,120,.5); display: grid; gap: 6px; }
.ga-points b { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; color: var(--ink2); }
.ga-points span { font-size: .9rem; line-height: 1.5; color: #4b5565; }

.ga-how { padding: 56px 0 72px; }
.ga-how h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing: -.02em; color: var(--ink2); margin: 0 0 6px; }
.ga-sub { color: #4b5565; margin: 0 0 20px; }
.ga-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 16px; background: #eef2f8; margin-bottom: 18px; flex-wrap: wrap; }
.ga-tabs [role=tab] { min-height: 44px; padding: 0 20px; border: 0; border-radius: 12px; background: none; font: inherit; font-weight: 600; color: #4b5565; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.ga-tabs [role=tab][aria-selected=true] { background: #fff; color: var(--deep); box-shadow: 0 6px 16px -10px rgba(29,60,120,.5); }
.ga-tabs [role=tab]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ga-browser { margin: 0 0 18px; color: #4b5565; }
.ga-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: gs; }
.ga-steps li { counter-increment: gs; background: #fff; border-radius: 22px; padding: 18px 18px 20px; display: grid; gap: 14px; align-content: start;
  box-shadow: inset 0 0 0 1px rgba(16,24,40,.06), 0 18px 36px -28px rgba(29,60,120,.5); }
.ga-steps li > div { display: grid; gap: 4px; }
.ga-steps li > div > b { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--ink2); }
.ga-steps li > div > b::before { content: counter(gs); display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%;
  background: var(--blue); color: #fff; font-family: var(--sans); font-size: .8rem; vertical-align: 2px; }
.ga-steps li > div > span { color: #4b5565; font-size: .94rem; line-height: 1.5; }
.ga-art { width: 100%; height: 220px; border-radius: 16px; background: linear-gradient(160deg, #eef3fc, #e3ebf8); }
.ga-art .dev { fill: #1f2937; } .ga-art .scr { fill: #fff; } .ga-art .scr.dim { fill: #d6dbe4; } .ga-art .home { fill: #c9d8f2; }
.ga-art .bar { fill: #f1f3f7; } .ga-art .ln { fill: #c7d0de; } .ga-art .ln2 { fill: #e6eaf1; } .ga-art .blk { fill: #dbe5f8; }
.ga-art .ico { fill: none; stroke: #5b6475; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ga-art .ico.on { stroke: #2f5aa8; }
.ga-art .dot { fill: #2f5aa8; }
.ga-art .sheet { fill: #fff; } .ga-art .row { fill: #eef1f6; } .ga-art .hitrow { fill: #e7eefb; stroke: #2f5aa8; stroke-width: 2; }
.ga-art .lbl { font: 600 9.5px Inter, system-ui, sans-serif; fill: #1d3c78; } .ga-art .lbl.sm { font-size: 9px; }
.ga-art .apps rect { fill: #fff; opacity: .85; } .ga-art .dock { fill: rgba(255,255,255,.55); }
.ga-art .uplift { fill: #2f5aa8; } .ga-art .mark { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ga-art .hit { fill: rgba(47,90,168,.12); stroke: #2f5aa8; stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .ga-art .hit { animation: gaPulse 1.8s cubic-bezier(.16,1,.3,1) infinite; transform-box: fill-box; transform-origin: center; }
  .ga-art .hitrow { animation: gaGlow 1.8s ease-in-out infinite; }
}
@keyframes gaPulse { 0% { opacity: .5; transform: scale(.82); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: .5; transform: scale(.82); } }
@keyframes gaGlow { 50% { stroke-width: 3.5; } }
.ga-faq { margin-top: 34px; max-width: 760px; display: grid; gap: 10px; }
.ga-faq details { background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(16,24,40,.07); }
.ga-faq summary { list-style: none; cursor: pointer; min-height: 52px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: var(--ink2); }
.ga-faq summary::-webkit-details-marker { display: none; }
.ga-faq summary::after { content: "+"; font-family: var(--serif); font-size: 1.4rem; color: var(--blue); transition: transform .3s; }
.ga-faq details[open] summary::after { transform: rotate(45deg); }
.ga-faq p { margin: 0; padding: 0 18px 16px; color: #4b5565; line-height: 1.55; }
@media (max-width: 960px) { .ga-top { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 760px) {
  .ga-hero { padding: 36px 0 30px; } .ga-points { grid-template-columns: 1fr; }
  .ga-steps { grid-template-columns: 1fr; } .ga-art { height: 200px; }
  .ga-tabs { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; } .ga-tabs [role=tab] { padding: 0 6px; }
}
.ga-art .lbl.xs { font-size: 8px; }
@media (max-width: 760px) { .ga-points { grid-template-columns: 1fr 1fr; gap: 8px; } .ga-points li { padding: 12px 14px; } .ga-points span { display: none; } .ga-points b { font-size: .98rem; } }
.app-get-how, .tabsheet-guide { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; color: #2f5aa8; text-decoration: underline; text-underline-offset: 3px; }
.tabsheet-guide { min-height: 44px; justify-content: center; }
@media (pointer: coarse) { .app-get-how { min-height: 44px; } }
.cc-more li a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* Speed drills grouped by year (9 Oct 2026): a heading across the grid. */
.dr-grid .dr-group { grid-column: 1 / -1; margin: 10px 0 0; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.dr-grid .dr-group:first-child { margin-top: 0; }
/* Two drills to a row on a phone: 22 cards one per row ran to 5,000px. */
@media (max-width: 560px) {
  .dr-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dr-grid .dr-card { padding: 14px 12px; }
  .dr-grid .dr-card .dp { font-size: .8rem; }
}

/* Where they are this year, on a child's page (9 Oct 2026). */
.pv-pace { margin-top: 12px; display: grid; gap: 6px; max-width: 560px; }
.pv-pace-k { font-size: .82rem; font-weight: 600; color: #4b5565; }
.pv-pace-opts { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: #e9eef7; width: max-content; max-width: 100%; flex-wrap: wrap; }
.pv-pace-opt { min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: none; font: inherit; font-weight: 600; font-size: .9rem; color: #4b5565; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.pv-pace-opt.on { background: #fff; color: var(--deep); box-shadow: 0 4px 12px -8px rgba(29,60,120,.6); }
.pv-pace-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pv-pace-why { margin: 0; font-size: .82rem; line-height: 1.45; color: #5b6475; }
@media (pointer: coarse) { .pv-pace-opt { min-height: 44px; } }
/* The pace line at the top of a ramped quiz (9 Oct 2026). */
.qz-pace { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #eef3fc; color: #1d3c78; font-size: .95rem; line-height: 1.5; }
.pv-who { align-items: flex-start; } .pv-who .pv-face { margin-top: 6px; }

/* ---------------- Completed work, child dashboard and child page (14 Oct 2026) ---------------- */
body.pv-student #doneCard, .pv-done { grid-column: span 12; }
.cw-list { display: flex; flex-direction: column; max-width: 760px; }
.cw-day { margin: 14px 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5b6475; }
.cw-day:first-child { margin-top: 0; }
.cw-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #edf0f5; }
.cw-kind { justify-self: start; font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #eef3fb; color: #1d3c78; }
.cw-quiz { background: #eef7f1; color: #1f6b45; }
.cw-worksheet { background: #fdf4e6; color: #8a560d; }
.cw-drill { background: #f2f0fa; color: #4a3f8f; }
.cw-title { min-width: 0; font-weight: 600; color: var(--ink); line-height: 1.35; }
.cw-title a { color: inherit; text-decoration: underline; text-decoration-color: #c9d3e6; text-underline-offset: 3px; }
.cw-title a:hover { text-decoration-color: currentColor; }
.cw-title em { display: block; font-style: normal; font-weight: 500; font-size: .8rem; color: #5b6475; }
.cw-score { font-size: .85rem; font-weight: 700; color: #4b5565; white-space: nowrap; }
.cw-score.good { color: #1f6b45; }
.cw-more { margin-top: 12px; align-self: flex-start; }
@media (max-width: 560px) {
  .cw-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .cw-kind { grid-column: 1 / -1; }
}