:root{
    /* ---------- Layered premium palette ----------
       Ink and paper are both warmed a few degrees so the site never
       jumps between a cold pure-white and a cold pure-navy. Midnight
       sits between the two as a softer dark, reserved for supporting
       bands; full ink is kept for the handful of sections that are
       meant to feel like a deliberate, special moment (major proof
       and the final call to action), not the default background. */
    --paper:#FFFFFF;          /* pure white canvas */
    --paper-dim:#F2EFE8;      /* soft stone */
    --paper-warm:#F4EAD3;     /* gold tint, solid */
    --paper-tint:#F7F4EE;
    --ink:#182033;            /* deep ink */
    --midnight:#242C3E;       /* soft midnight, a lighter dark */
    --ink-soft:#4A5568;
    --ink-faint:#5F6880;      /* AA on paper and on soft stone */
    --gold:#C79A3B;           /* muted gold: accents, dark-bg text, large-scale use */
    --gold-deep:#825D20;      /* AA on paper, soft stone and the warm gold tint */
    --gold-ui:#AD7F2E;        /* non-text UI on light backgrounds, ~3.4:1 */
    --gold-tint:rgba(199,154,59,0.15);
    --gold-bright:#E2BD6A;    /* gold text and buttons on navy */
    --gold-pale:#F9EBC4;      /* gold text on a subject-coloured background (AA on every subject colour) */
    --gold-line:rgba(199,154,59,0.35); /* hairlines and borders on navy */
    --navy-lift:#26304A;      /* hover state for navy surfaces */
    --on-dark:#F9F7EF;        /* body text on navy */
    --on-dark-soft:#C7CEDB;   /* secondary text on navy */
    --physics:#2C5AA0;        /* sophisticated cobalt */
    --physics-tint:rgba(44,90,160,0.09);
    --econ:#BA4C09;           /* burnt orange */
    --econ-tint:rgba(242,103,14,0.10);
    --english:#9C2560;        /* refined berry */
    --english-tint:rgba(156,37,96,0.09);
    --green:#1E7A44;
    --green-tint:rgba(30,122,68,0.11);

    /* ---------- Individual-subject palette ----------
       --physics / --econ / --english above are PILLAR tokens: English /
       Science / Economics as a three-way brand identity (ribbon, hero
       shards, final-cta shards, the homepage subject-preview tiles, the
       #subjects family tiles, the Curriculum Maps / Timetable group
       colours, and the Who We Are founder cards). They are UNCHANGED by
       the tokens below and must stay that way — a founder's card or the
       header ribbon must never render in these newer colours.

       The tokens below exist for the finer-grained job the pillar set
       can't do: giving Physics its own subject colour, distinct from the
       Science pillar (the sciences previously all shared --physics), and giving English
       and Economics a second, different colour for when THAT SPECIFIC
       SUBJECT — not the pillar — is being identified (a cohort card, a
       results chart, a testimonial accent). Values were checked against
       WCAG 2.1 contrast on --paper and against the site's existing
       --alert / --gold / --green so a subject colour can't be mistaken
       for a warning, a promo badge, or a status indicator:

       --sci-physics   8.7:1 on paper. Hue is a wine/garnet red (~348°),
                       deliberately NOT the brick/orange-red hue tried
                       first (~7°) — that value sat on the same hue as
                       --alert (#A32718, ~6.5°) and would have read as a
                       duller safeguarding warning, not a subject colour.
       --subj-economics 5.7:1. Muted teal, ~178°.
       --subj-english   7.7:1. Muted plum, ~292° — the only token in the
                       purple family, so it can't be confused with any
                       other subject or pillar colour on the page. */
    --sci-physics:#7A2E3D;
    --sci-physics-tint:rgba(122,46,61,0.09);
    --subj-economics:#1F6E6B;
    --subj-economics-tint:rgba(31,110,107,0.10);
    --subj-english:#6B3F72;
    --subj-english-tint:rgba(107,63,114,0.10);
    /* Upcoming-subject labels only. These are intentionally separate
       from the available-subject palette so they can never be mistaken
       for bookable programme colours. Each clears WCAG AA for small
       text on white; Chemistry's vivid green is distinct from the
       current Economics teal. */
    --soon-maths:#1D5FA8;
    --soon-maths-tint:rgba(29,95,168,0.09);
    --soon-further-maths:#4B3FA0;
    --soon-further-maths-tint:rgba(75,63,160,0.09);
    --soon-chemistry:#087A2F;
    --soon-chemistry-tint:rgba(8,122,47,0.09);
    /* Subject Specialist cards (Who We Are + homepage preview). Same
       values as the Chemistry and Maths labels above, so each subject
       reads in one colour everywhere on the site. Kept as their own
       names so the specialist cards can be retuned without touching
       the coming-soon labels. */
    --chemistry:var(--soon-chemistry);
    --chemistry-tint:var(--soon-chemistry-tint);
    --maths:var(--soon-maths);
    --maths-tint:var(--soon-maths-tint);
    --soon-psychology:#9B2467;
    --soon-psychology-tint:rgba(155,36,103,0.09);
    --soon-biology:#9C4A0E;
    --soon-biology-tint:rgba(156,74,14,0.09);
    /* Every other resources-hub subject: a possible future programme,
       flagged "Coming soon" the same generic way Psychology above is
       (Chemistry/Maths get the more concrete "Group teaching starting
       soon" instead — see comingSoonLabel()), plus the same colour
       drives its "Questions by Topic: coming soon" note. Each hue was
       chosen clear of every subject/soon/alert/gold hue
       already in use and clears 6.9:1+ on white. */
    --soon-business:#5B5C23;
    --soon-business-tint:rgba(91,92,35,0.09);
    --soon-combined-science:#3F4FA6;
    --soon-combined-science-tint:rgba(63,79,166,0.09);
    --soon-computer-science:#266073;
    --soon-computer-science-tint:rgba(38,96,115,0.09);
    --soon-french:#3C6412;
    --soon-french-tint:rgba(60,100,18,0.09);
    --soon-geography:#523FA6;
    --soon-geography-tint:rgba(82,63,166,0.09);
    --soon-history:#15670F;
    --soon-history-tint:rgba(21,103,15,0.09);
    --soon-religious-studies:#763FA6;
    --soon-religious-studies-tint:rgba(118,63,166,0.09);
    --soon-sociology:#156549;
    --soon-sociology-tint:rgba(21,101,73,0.09);
    --soon-spanish:#962C86;
    --soon-spanish-tint:rgba(150,44,134,0.09);
    --bench:#6F6A5C;          /* benchmark bars and figures: warm stone, quiet beside the
                                 cohort figure but dark enough to read as body text */
    /* Safeguarding warning tokens. These were used by .urgent and
       .dd-col.dont before they existed, so the "call 999" box and the
       "tutors must never" column rendered with no emphasis at all. */
    --alert:#A32718;
    --alert-tint:rgba(163,39,24,0.08);
    --line:rgba(24,32,51,0.10);
    --line-strong:rgba(24,32,51,0.22);
    --radius:8px;

    /* Layered shadows. Two stacked shadows read as real depth;
       a single large blur reads as a drop-shadow filter. */
    --shadow-sm:0 1px 2px rgba(24,32,51,0.05), 0 2px 8px -4px rgba(24,32,51,0.10);
    --shadow-md:0 2px 4px rgba(24,32,51,0.05), 0 12px 26px -14px rgba(24,32,51,0.20);
    --shadow-lg:0 4px 8px rgba(24,32,51,0.06), 0 24px 48px -22px rgba(24,32,51,0.28);
    --shadow-gold:0 10px 30px -16px rgba(138,100,35,0.38);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; scroll-padding-top:90px;}
  /* Clean paper ground. The former repeating-triangle tile has been
     removed: it sat behind every view including the policy documents,
     competed with body text and read as decoration for its own sake.
     Texture now belongs to the hero alone, where it is composed. */
  body{
    background-color:var(--paper);
    color:var(--ink); font-family:'Work Sans', sans-serif; line-height:1.65;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
  }
  /* Desktop density: 15px keeps the complete interface feeling natural at
     100% browser zoom without shrinking the touch-first mobile experience. */
  @media (min-width:1001px){html{font-size:15px;}}
  /* ---------- Typographic scale & rhythm ----------
     One scale, applied everywhere, so headings relate to each other
     across views instead of being tuned per section. Fraunces carries
     character; Work Sans carries clarity; mono stays an accent. */
  h1,h2,h3{
    font-family:'Fraunces', serif; font-weight:500; color:var(--ink);
    line-height:1.12; letter-spacing:-0.012em; text-wrap:balance;
  }
  h1{font-size:clamp(2.15rem, 4.6vw, 3.4rem);}
  h2{font-size:clamp(1.6rem, 2.9vw, 2.3rem);}
  h3{font-size:clamp(1.15rem, 1.7vw, 1.4rem); line-height:1.22;}
  h4{font-family:'Fraunces', serif; font-weight:500; line-height:1.25;}
  p{max-width:74ch;}
  .section-head p, .doc-head p{max-width:64ch;}
  /* ONE base definition. There were three, and the later two silently won;
     anything that needs to differ should override a single property in
     context rather than restate the whole rule. */
  .eyebrow{
    font-family:'Work Sans', sans-serif; font-size:0.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.1em; color:var(--gold-deep);
  }
  /* Consistent vertical rhythm for every full-width band. */
  section, .trust-band, .final-cta, .results-preview-band{--band-y:clamp(48px, 5.5vw, 76px);}
  .scroll-content{padding-top:var(--band-y); padding-bottom:var(--band-y);}
  .hero.scroll-content{padding-top:clamp(48px, 4.5vw, 64px); padding-bottom:clamp(42px, 4vw, 56px);}
  .section-head{margin-bottom:clamp(24px, 2.6vw, 34px);}
  .section-head h2{margin-top:12px;}
  .section-head p{margin-top:14px; color:var(--ink-soft); font-size:1.02rem;}
  a{color:inherit; text-decoration:none;}
  img,svg{display:block; max-width:100%;}
  .wrap{max-width:1240px; margin:0 auto; padding:0 26px;}
  :focus-visible{outline:2px solid var(--gold-ui); outline-offset:3px;}
  .visually-hidden{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .nowrap{white-space:nowrap;}
  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:200;
    background:var(--ink); color:var(--paper); padding:12px 20px;
    font-family:'IBM Plex Mono',monospace; font-size:0.8rem;
  }
  .skip-link:focus{left:0;}
  /* Visually hidden but still read aloud. Not display:none, which
     would remove it from the accessibility tree and silence the live
     region entirely. */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }

  section{padding:56px 0;}
  .tab-back-btn{margin-bottom:6px;

    display:inline-flex; align-items:center; gap:8px; margin-bottom:24px;
    font-family:'Work Sans', sans-serif; font-size:0.84rem; font-weight:600;
    color:var(--ink-soft); background:none; border:1px solid var(--line-strong);
    border-radius:8px; padding:9px 16px; cursor:pointer;
  }
  .tab-back-btn:hover{color:var(--ink); border-color:var(--ink);}
  .section-head{max-width:62ch; margin-bottom:32px;}
  .section-head .eyebrow{margin-bottom:12px; display:block;}
  .section-head h2{font-size:clamp(1.75rem, 3.2vw, 2.4rem);}
  .section-head p{margin-top:14px; color:var(--ink-soft); font-size:1.02rem;}
  .alt-bg{background:var(--paper-dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

  /* ---------- Buttons ---------- */
  .btn{
    font-family:'Work Sans', sans-serif; font-size:0.86rem; letter-spacing:0.01em;
    text-transform:none; font-weight:700; background:var(--ink); color:var(--paper);
    padding:13px 24px; border-radius:var(--radius); display:inline-block;
    border:1px solid var(--ink); cursor:pointer; transition:background .18s ease, color .18s ease;
  }
  .btn:hover{background:transparent; color:var(--ink);}
  .btn.ghost{background:transparent; color:var(--ink);}
  .btn.ghost:hover{background:var(--ink); color:var(--paper);}
  .btn.on-dark{background:var(--gold); color:var(--ink); border-color:var(--gold);}
  .btn.on-dark:hover{background:transparent; color:var(--gold);}
  .btn.ghost-dark{background:transparent; color:var(--paper); border-color:rgba(255,255,255,0.4);}
  .btn.ghost-dark:hover{background:rgba(255,255,255,0.08); border-color:var(--paper);}
  .btn.small{padding:10px 18px; font-size:0.7rem;}
  .btn.full{width:100%; text-align:center;}
  .btn:disabled{opacity:0.45; cursor:not-allowed;}
  /* Text links double as section CTAs, so they need a real tap target.
     The underline stays visually tight while the hit area grows. */
  .text-link{
    display:inline-flex; align-items:center; position:relative;
    font-family:'Work Sans', sans-serif; font-size:0.88rem; font-weight:600;
    color:var(--ink-soft); min-height:44px; padding:0 2px;
    transition:color .22s ease, gap .22s ease; gap:6px;
  }
  .text-link::after{
    content:""; position:absolute; left:2px; right:2px; bottom:11px; height:1px;
    background:var(--line-strong); transition:background .22s ease;
  }
  .text-link:hover{color:var(--ink);}
  .text-link:hover::after{background:var(--gold-deep);}

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.94);
    backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:13px 26px; max-width:1240px; margin:0 auto;
  }
  /* ---------- Brand lockup: [icon] GuideMyGrades ----------
     Every instance (header, both footers, mobile menu) is written by
     renderBrandLockups() in the script, so this markup exists in exactly
     one place. The colour split is unchanged from before the icon was
     added: "Guide"/"Grades" inherit the ink colour, "My" is gold.
     Sizes are in em so the whole lockup scales from .logo's font-size
     alone — the existing <380px rule still shrinks both parts together. */
  .logo{
    font-family:'Fraunces', serif; font-weight:600; font-size:1.12rem; flex-shrink:0;
    display:inline-flex; align-items:center; gap:0.44em; line-height:1;
  }
  .logo-icon{
    height:2.7em; width:2.7em; object-fit:contain; border-radius:8px; flex:0 0 auto; display:block;
    /* Aligned to the text's CAP-HEIGHT centre, not the line box and not
       the full ink box. "GuideMyGrades" has a descender on the y, so the
       ink box centre sits ~2.3px low and matching it would drop the icon
       visibly. Measured in-browser at the real rendered size (Fraunces
       600 @ 17.92px, cap height 13px): flex centring alone left the icon
       0.46px low, so this lifts it by exactly that. */
    transform:translateY(-0.025em);
  }
  /* Wordmark is one camelCase word, so the accent is colour only —
     a mid-word italic reads as a mistake rather than a flourish.
     Scoped to .logo-text so it targets "My" and not the text wrapper. */
  .logo .logo-text span{color:var(--gold-deep); font-weight:600;}
  /* 13px (was 18px): rebalanced again for the eighth top-level item
     (Free Resources) — at 18px the row was 10px over its 1140px budget,
     which didn't overflow visibly; it silently word-wrapped "About Us",
     "How It Works" and "Free Resources" into jumbled two-line labels
     instead, since nothing stopped an over-tight flex row from shrinking
     link text below its natural width. white-space:nowrap below is the
     actual fix for that failure mode — the gap trim just buys back the
     room so nowrap doesn't need to overflow to hold its ground. */
  nav.links{display:flex; gap:13px; font-size:0.9rem; font-weight:500;}
  nav.links a{color:var(--ink-soft); padding:4px 0; white-space:nowrap;}
  nav.links a:hover{color:var(--ink);}
  /* The one nav link meant to pull the eye: same gold the site already
     reserves for "this is the offer" moments (Request a Place, Welcome
     Offer badges), not a new colour invented just for this. */
  nav.links a.nav-highlight{color:var(--gold-deep); font-weight:700;}
  nav.links a.nav-highlight:hover{color:var(--gold);}
  .nav-dropdown{position:relative;}
  .nav-dropdown-trigger{display:inline-flex; align-items:center; gap:5px;}
  .nav-dropdown-trigger::after{content:"▾"; font-size:0.7em; color:var(--ink-faint);}
  .nav-dropdown-menu{
    position:absolute; top:100%; left:-14px; margin-top:10px; z-index:40;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 14px 30px -10px rgba(21,23,43,0.2);
    min-width:210px; padding:8px; display:flex; flex-direction:column; gap:1px;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .15s ease, transform .15s ease, visibility .15s;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu{opacity:1; visibility:visible; transform:translateY(0);}
  .nav-dropdown-menu a{padding:9px 12px; border-radius:6px; font-size:0.86rem; color:var(--ink-soft); font-weight:500;}
  .nav-dropdown-menu a:hover{background:var(--paper-dim); color:var(--ink);}
  /* Marks which About Us subsection is currently open — the only one of
     the four dropdown links that should read as bold. */
  .nav-dropdown-menu a.about-subnav-active{color:var(--ink); font-weight:700;}
  /* Resources: two doors, each a name with a one-line description. */
  .nav-dropdown-menu.nav-menu-res{min-width:300px; gap:2px;}
  .nav-dropdown-menu a.nav-res-item{padding:10px 12px; white-space:normal;}
  .nav-res-copy{display:flex; flex-direction:column; gap:2px;}
  .nav-res-copy strong{font-size:0.9rem; font-weight:600; line-height:1.25; color:var(--ink);}
  .nav-res-copy small{font-size:0.72rem; line-height:1.35; color:var(--ink-faint);}
  .nav-actions{display:flex; align-items:center; gap:12px; flex-shrink:0;}
  .portal-signin{color:var(--gold);font-size:14px;font-weight:600;white-space:nowrap;padding:10px 4px;}

  /* ---------- Header basket ----------
     Same 42px square as .menu-btn so the two read as a pair. The icon
     uses --gold-ui, the token already documented for non-text UI on
     light backgrounds; the badge flips to --gold behind --ink text,
     because gold-on-white would not carry small numerals. */
  .cart-btn{
    position:relative; width:42px; height:42px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--paper); border:1px solid var(--line-strong);
    border-radius:var(--radius); cursor:pointer; color:var(--gold-ui);
    transition:border-color .18s ease, color .18s ease;
  }
  .cart-btn:hover{border-color:var(--gold-deep); color:var(--gold-deep);}
  .cart-btn:focus-visible{outline:2px solid var(--gold-ui); outline-offset:2px;}
  .cart-btn svg{width:21px; height:21px; display:block;}
  .cart-count{
    position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px;
    display:none; align-items:center; justify-content:center;
    background:var(--gold); color:var(--ink); border-radius:10px;
    font-family:'IBM Plex Mono', monospace; font-size:0.66rem; font-weight:700;
    line-height:1; box-shadow:0 0 0 2px var(--paper);
  }
  .cart-count.on{display:inline-flex;}

  /* ---------- Cart drawer ----------
     Inherits .side-panel wholesale: same width, slide transition,
     shadow, scroll and the shared #panelOverlay. Only the inner
     furniture is new. */
  .cart-panel{gap:0;}
  /* ---- Premium drawer ----
     A navy head band (the same lit navy as the resource heroes), item
     cards floating on a warm off-white ground, each led by a coloured
     subject tile, and a receipt-style summary above a strong checkout
     button. */
  .side-panel.cart-panel{padding:0; width:440px; background:#FAF7F0; box-shadow:-24px 0 60px -20px rgba(16,22,42,0.45);}
  .cart-panel .cart-head{
    position:sticky; top:0; z-index:3; align-items:flex-start; gap:14px; padding:24px 22px 22px; border:0; color:var(--paper);
    background:radial-gradient(circle at 100% 0%, rgba(226,189,106,0.26), transparent 58%), linear-gradient(150deg, #24304b 0%, var(--ink) 60%, #10162a 100%);
    box-shadow:0 10px 24px -16px rgba(16,22,42,0.8);
  }
  .cart-head-kicker{font-family:'IBM Plex Mono', monospace; font-size:0.66rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-bright);}
  .cart-head-title{margin-top:4px; font-family:'Fraunces', serif; font-size:1.6rem; font-weight:600; line-height:1.1; color:var(--paper);}
  .cart-panel .cart-head .panel-close{flex:none; width:38px; height:38px; border-radius:50%; color:var(--paper); background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.25); transition:background .15s ease, border-color .15s ease;}
  .cart-panel .cart-head .panel-close:hover{background:rgba(255,255,255,0.18); border-color:var(--gold-bright);}
  .cart-panel .cart-head .panel-close:focus-visible{outline:2px solid var(--gold-bright); outline-offset:2px;}
  .cart-panel .cart-body{padding:20px 20px 26px;}
  .cart-panel .cart-lines{gap:12px;}
  .cart-panel .cart-line{
    align-items:center; gap:14px; padding:14px 8px 14px 14px; border:0; border-radius:16px; background:var(--paper);
    box-shadow:0 0 0 1px rgba(24,32,51,0.06), 0 10px 22px -16px rgba(24,32,51,0.45);
  }
  .cart-line-tile{
    flex:none; width:48px; height:48px; border-radius:13px; display:grid; place-items:center;
    background:linear-gradient(150deg, color-mix(in srgb, var(--accent, var(--ink)) 76%, #fff) 0%, var(--accent, var(--ink)) 48%, color-mix(in srgb, var(--accent, var(--ink)) 70%, #000) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 14px -8px var(--accent, var(--ink));
  }
  .cart-line-tile svg{width:30px; height:30px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
  .cart-panel .cart-line-name{font-size:1.02rem;}
  .cart-panel .cart-line-tutor{margin-top:3px; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.07em;}
  .cart-panel .cart-line-price{margin-top:7px; font-family:'Work Sans', sans-serif; font-size:0.8rem; font-weight:500; letter-spacing:0; line-height:1.45; color:var(--ink-faint);}
  .cart-panel .cart-line-price strong{font-weight:700; color:var(--accent, var(--ink));}
  .cart-panel .cart-remove{align-self:flex-start; width:36px; height:36px; margin:-4px 0 0; border-radius:50%; font-size:1.1rem; transition:background .15s ease, color .15s ease;}
  .cart-panel .cart-remove:hover{background:var(--alert-tint); color:var(--alert);}
  /* Receipt-style summary. */
  .cart-summary{margin-top:16px; padding:18px 18px 14px; border-radius:16px; background:var(--paper);
    box-shadow:0 0 0 1px rgba(24,32,51,0.06), 0 10px 22px -16px rgba(24,32,51,0.45);}
  .cart-panel .cart-total{margin:0; padding:0 0 14px; border-top:0; border-bottom:1.5px dashed var(--line-strong);}
  .cart-panel .cart-total dt{color:var(--ink-soft);}
  .cart-panel .cart-total dd{font-size:2.1rem; font-weight:600; color:var(--ink);}
  .cart-summary .cart-then{margin-top:10px;}
  .cart-summary .cart-then + .cart-then{margin-top:4px; color:var(--ink-faint);}
  .cart-panel .cart-actions{margin-top:18px; gap:8px;}
  .cart-panel .cart-go{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; border-radius:14px; font-size:0.86rem;
    box-shadow:0 1px 0 rgba(255,255,255,0.08) inset, 0 14px 26px -14px rgba(16,22,42,0.85);}
  .cart-panel .cart-go .ui-icon{width:18px; height:18px; color:var(--gold-bright); transition:transform .2s ease;}
  .cart-panel .cart-go:hover .ui-icon{transform:translateX(3px); color:currentColor;}
  .cart-secure{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:2px;
    font-family:'IBM Plex Mono', monospace; font-size:0.66rem; font-weight:600; letter-spacing:0.04em; color:var(--ink-faint);}
  .cart-secure svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .cart-panel .cart-keep{align-self:center;}
  .cart-panel .cart-section-title{display:flex; align-items:center; gap:10px; color:var(--gold-deep);}
  .cart-panel .cart-section-title::after{content:""; flex:1; height:1px; background:var(--line-strong);}
  .cart-panel .cart-pdfs-split{margin-top:28px; padding-top:0; border-top:0;}
  .cart-panel .cart-scope-note{margin-top:20px; text-align:center;}
  .cart-panel .cart-notice{border-radius:14px;}
  /* Empty state. */
  .cart-panel .cart-empty{padding:34px 10px 10px;}
  .cart-empty-icon{width:84px; height:84px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center;
    background:radial-gradient(circle at 30% 25%, #fff, var(--paper-warm)); box-shadow:0 0 0 1px var(--gold), 0 14px 28px -16px rgba(130,93,32,0.6);}
  .cart-empty-icon svg{width:38px; height:38px; fill:none; stroke:var(--gold-deep); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
  .cart-panel .cart-empty h3{font-size:1.35rem;}
  @media (max-width:480px){
    .side-panel.cart-panel{max-width:100vw; width:100vw;}
    .cart-panel .cart-head{padding:20px 18px 18px;}
    .cart-panel .cart-body{padding:16px 14px 22px;}
    .cart-line-tile{width:42px; height:42px; border-radius:11px;}
    .cart-line-tile svg{width:26px; height:26px;}
  }
  /* .co-body sets display:grid, which would beat the hidden attribute. */
  .co-body[hidden]{display:none;}
  .cart-body{flex:1; display:flex; flex-direction:column; padding-top:16px;}
  .cart-notice{
    margin-bottom:16px; padding:12px 14px; border-radius:var(--radius);
    background:var(--gold-tint); border-left:3px solid var(--gold);
    font-size:0.84rem; color:var(--ink); line-height:1.55;
  }
  .cart-resumed{
    margin-bottom:14px; font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem; font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--ink-faint);
  }
  .cart-lines{list-style:none; display:flex; flex-direction:column; gap:10px; margin:0;}
  .cart-line{
    display:flex; gap:12px; align-items:flex-start; padding:13px 14px;
    border:1px solid var(--line); border-left:3px solid var(--accent, var(--line-strong));
    border-radius:var(--radius); background:var(--paper);
  }
  .cart-line-body{flex:1; min-width:0;}
  .cart-line-name, .cart-line-tutor, .cart-line-price{display:block;}
  .cart-line-name{font-family:'Fraunces', serif; font-size:1rem; font-weight:600; color:var(--ink); line-height:1.3;}
  .cart-line-tutor{
    margin-top:5px; font-family:'IBM Plex Mono', monospace; font-size:0.68rem;
    letter-spacing:0.04em; color:var(--ink-faint);
  }
  .cart-line-price{
    margin-top:7px; font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
    font-weight:700; letter-spacing:0.03em; color:var(--gold-deep);
  }
  .cart-remove{
    flex-shrink:0; width:44px; height:44px; margin:-4px -6px 0 0;
    display:inline-flex; align-items:center; justify-content:center;
    background:none; border:0; border-radius:var(--radius); cursor:pointer;
    color:var(--ink-faint); font-size:1.15rem; line-height:1;
  }
  .cart-remove:hover{color:var(--alert); background:var(--alert-tint);}
  .cart-remove:focus-visible{outline:2px solid var(--gold-ui); outline-offset:-2px;}

  .cart-total{
    margin-top:18px; padding-top:16px; border-top:1px solid var(--line-strong);
    display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  }
  .cart-total dt{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);}
  .cart-total dd{margin:0; font-family:'Fraunces', serif; font-size:1.7rem; line-height:1; color:var(--ink);}
  .cart-then{margin-top:11px; font-size:0.82rem; color:var(--ink-soft); line-height:1.5;}
  .cart-then strong{color:var(--ink);}
  .cart-actions{margin-top:20px; display:flex; flex-direction:column; gap:10px;}
  .cart-keep{
    background:none; border:0; padding:12px 4px; cursor:pointer; min-height:44px;
    font-family:'IBM Plex Mono', monospace; font-size:0.74rem; font-weight:600;
    color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;
  }
  .cart-keep:hover{color:var(--ink);}
  .cart-scope-note{margin-top:16px; font-size:0.74rem; color:var(--ink-faint); line-height:1.5;}

  .cart-empty{padding:26px 4px; text-align:center;}
  .cart-empty h3{font-family:'Fraunces', serif; font-size:1.15rem; font-weight:600; color:var(--ink);}
  .cart-empty p{margin-top:10px; font-size:0.9rem; color:var(--ink-soft); line-height:1.6;}
  .cart-empty .btn{margin-top:18px;}
  /* Examiners' Edition PDFs: their own section, own total, own Pay. */
  .cart-section-title{margin:0 0 10px; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);}
  .cart-pdfs-split{margin-top:24px; padding-top:20px; border-top:1px solid var(--line-strong);}
  .cart-pdfs-note{margin:-4px 0 12px;}

  /* ---------- Add-to-enrolment on a cohort card ---------- */
  .cohort-add{
    width:100%; min-height:44px; display:inline-flex; align-items:center;
    justify-content:center; gap:8px; cursor:pointer;
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; font-weight:700;
    letter-spacing:0.05em; text-transform:uppercase;
    padding:12px 16px; border-radius:var(--radius);
    border:1px solid var(--gold-ui); background:var(--paper); color:var(--gold-deep);
    transition:background .18s ease, color .18s ease, border-color .18s ease;
  }
  .cohort-add:hover{background:var(--gold-tint);}
  .cohort-add:focus-visible{outline:2px solid var(--gold-ui); outline-offset:2px;}
  .cohort-add[data-in-basket="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper);}
  .cohort-add[data-in-basket="true"]:hover{background:var(--midnight);}
  .cohort-add[disabled]{opacity:0.4; cursor:not-allowed;}
  .ribbon{height:3px; background:linear-gradient(90deg, var(--english) 0%, var(--english) 33%, var(--physics) 33%, var(--physics) 66%, var(--econ) 66%);}
  .menu-btn{
    display:none; width:42px; height:42px; background:var(--paper);
    border:1px solid var(--line-strong); border-radius:var(--radius); cursor:pointer;
    align-items:center; justify-content:center; flex-direction:column; gap:4px;
  }
  .menu-btn span{display:block; width:17px; height:2px; background:var(--ink);}
  @media (max-width:1000px){
    nav.links{display:none;}
    .menu-btn{display:flex;}
    /* "Sign Up Now" was already hidden here before the basket existed,
       so the mobile header is logo + basket + menu, not four things.
       Both buttons stay 42px; only the gutters tighten. */
    .nav-actions .btn{display:none;}
  }
  /* 430px, not 380px: the basket button made logo + Sign in + basket +
     menu a few pixels too wide for a 390px phone at the normal gutters. */
  @media (max-width:430px){
    .nav-row{padding:14px 16px; gap:10px;}
    .nav-actions{gap:8px;}
    .logo{font-size:1.02rem;}
  }

  /* ---------- Hero ---------- */
  .hero{
    padding:96px 0 68px; position:relative; overflow:hidden;
    background:
      radial-gradient(1100px 620px at 78% 8%, rgba(199,154,59,0.10), transparent 62%),
      radial-gradient(820px 540px at 4% 96%, rgba(44,90,160,0.055), transparent 60%);
  }
  @media (max-width:700px){ .hero{padding:60px 0 44px;} }
  .hero-geo{
    position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.85;
    /* Decoration fades toward the left, so it never sits behind the
       headline or the reading column. */
    -webkit-mask-image:linear-gradient(100deg, transparent 0%, transparent 42%, #000 78%);
    mask-image:linear-gradient(100deg, transparent 0%, transparent 42%, #000 78%);
  }
  .hero-geo svg{width:100%; height:100%; display:block;}
  @media (max-width:820px){ .hero-geo{opacity:0.5;} }
  .hero .wrap{position:relative; z-index:1;}
  /* Hero photo: a large portrait image anchored to the right, so the
     hero's empty right-hand side becomes the first proof the site
     offers rather than decoration alone. Three columns above 1080px
     (hook card, copy, photo); below that — which covers iPad portrait
     AND landscape, plus small laptop windows, not just phones — the
     hero stays a single stacked column, since forcing three columns
     any narrower squeezes the reading column below a comfortable
     width. The CTA needs to stay high on a small screen anyway, and
     the next photo is only one section away. */
  @media (min-width:1081px){
    .hero .wrap{
      display:grid; grid-template-columns:minmax(230px,22%) minmax(0,1fr) minmax(230px,22%);
      gap:clamp(24px,2.6vw,36px); align-items:stretch;
    }
    .hero-copy{align-self:center;}
  }
  .hero-photo{
    border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg);
    aspect-ratio:4/5; animation:hudhaFadeIn 1s ease .5s both;
  }
  .hero-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  @media (max-width:1080px){ .hero-photo{display:none;} }
  @media (min-width:1081px){
    /* Let the grid column determine the photo width. The default aspect
       ratio previously transferred the tall row height back into width,
       overflowing the container and making the whole hero look enlarged. */
    .hero-photo{aspect-ratio:auto; min-height:460px;}
  }
  .hero h1{font-size:clamp(2.2rem, 4vw, 3.1rem); max-width:19ch; margin:14px auto 0;}
  .hero h1 em{font-style:italic; color:var(--gold-deep);}
  .hero .eyebrow{display:block;}
  .hero .lead{margin-top:16px; max-width:58ch; font-size:1.04rem; color:var(--ink-soft);}
  .hero-proof-line{
    margin-top:14px; font-family:'IBM Plex Mono', monospace; font-size:0.8rem;
    font-weight:600; letter-spacing:0.02em; color:var(--gold-deep);
  }
  .hero-ctas{display:flex; gap:14px; margin-top:20px; flex-wrap:wrap; align-items:center;}
  .hero .hero-ctas{gap:10px;}
  /* Phone and tablet: this row carries four items instead of the usual
     two, and a plain wrapping flex row put each one on its own
     full-width line — four stacked bars, not the tidy symmetry a
     phone visit deserves. A fixed two-by-two grid instead, at full
     comfortable tap-target size (this is the size most visits to the
     site actually happen at), with "See our results" given the same
     outlined-button shape as its neighbours so all four read as one
     consistent set rather than three buttons plus a stray text link. */
  @media (max-width:1080px){
    .hero .hero-ctas{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
    .hero .hero-ctas .btn{width:100%; text-align:center;}
    .hero .hero-ctas .text-link{
      justify-content:center; width:100%; text-align:center;
      border:1px solid var(--line-strong); border-radius:var(--radius); padding:0 14px;
    }
    .hero .hero-ctas .text-link::after{display:none;}
  }
  /* Desktop 3-column layout: this same row shares its narrower text
     column with the hook card and the photo, so it needs the tighter
     padding and type the phone size doesn't. */
  @media (min-width:1081px){
    .hero .hero-ctas .btn{padding:12px 16px; font-size:0.78rem;}
  }

  /* ---------- Hero hook card ----------
     Vertical enrol/price card, styled like the pricing cards further
     down the page (same gold border, cream-to-gold surface, big
     Fraunces figure) so the first thing a visitor sees already looks
     like the offer. Stretches to the photo's height on desktop; on
     smaller screens it sits centred above the headline, capped so it
     still reads as a card rather than a full-width banner.

     The whole card is a link (same pattern as .hero-photo below, which
     is clickable with no visible button of its own) — its own explicit
     "Enrol Now" button lives in .hero-ctas instead, on the same line as
     Find a Programme / See How It Works / See our results, so every
     action on the page reads as one row rather than a stray button
     sitting apart from the rest.

     space-between (not center) on the content groups, so the tag sits
     at the top edge and the list at the bottom edge with no dead
     padding — the card fills the full height it stretches to, however
     tall that turns out to be, instead of clustering in the middle
     with empty margin above and below. */
  .hero-hook{
    display:flex; flex-direction:column; align-items:center; justify-content:space-between;
    gap:16px; text-align:center; text-decoration:none; color:inherit;
    padding:clamp(24px,3vw,32px) 20px;
    border:1px solid var(--gold); border-radius:18px;
    background:linear-gradient(168deg, var(--paper) 0%, var(--gold-tint) 100%);
    box-shadow:var(--shadow-md);
    animation:hudhaFadeUp .8s cubic-bezier(.22,.61,.36,1) both;
    transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
  }
  .hero-hook:hover{transform:translateY(-4px); box-shadow:0 18px 38px -18px rgba(24,32,51,0.30);}
  .hero-hook:focus-visible{outline:2px solid var(--gold-ui); outline-offset:4px;}
  .hh-tag{
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.06em; color:var(--gold-deep); line-height:1.5;
  }
  .hh-price{
    position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0;
  }
  .hh-price::before{
    content:""; position:absolute; inset:-12px -26px; z-index:-1; border-radius:50%;
    background:radial-gradient(60% 90% at 50% 50%, rgba(199,154,59,0.30) 0%, rgba(199,154,59,0.08) 46%, transparent 72%);
  }
  .hh-price-lead{
    font-family:'IBM Plex Mono', monospace; font-size:0.7rem; font-weight:600;
    letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft);
  }
  .hero-price-figure{
    font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.02em;
    font-size:clamp(2.5rem,5vw,3.2rem); line-height:1; color:var(--ink);
  }
  /* UAE Dirham sign (inline SVG, see DIRHAM_SIGN_SVG): sits on the text
     baseline at roughly cap height wherever an AED amount is written. */
  .dirham-sign{display:inline-block; width:0.72em; height:0.72em; vertical-align:-0.04em; margin-right:0.1em; flex-shrink:0;}
  /* "£3 / [Dirham] 15": the AED figure is the same lowest Welcome Offer
     lesson, converted by gbpToAed() so it always matches the AED shown
     on the Pricing page. The Dirham sign is an inline SVG because the
     2025 symbol is not yet in most fonts. */
  .hh-price-figures{display:flex; align-items:baseline; justify-content:center; gap:0 8px; flex-wrap:wrap;}
  .hh-price-sep{font-family:'Fraunces', serif; font-weight:400; font-size:clamp(1.8rem,3.6vw,2.3rem); line-height:1; color:var(--gold-deep);}
  .hero-price-aed{
    display:inline-flex; align-items:baseline; gap:3px;
    font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.02em;
    font-size:clamp(2.5rem,5vw,3.2rem); line-height:1; color:var(--ink);
  }
  .hero-price-aed .dirham-sign{width:0.66em; height:0.66em; flex-shrink:0; align-self:center; vertical-align:baseline; margin:0; transform:translateY(0.04em);}
  /* Same two facts the pricing cards lead with further down the page,
     compressed to a two-line proof strip so the card carries real
     substance between the price and the button, not just a gap. */
  .hh-list{
    list-style:none; margin:0; padding:10px 0; display:flex; flex-direction:column;
    align-items:center; gap:8px; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
    width:100%;
  }
  .hh-list li{
    font-family:'Work Sans', sans-serif; font-size:0.82rem; font-weight:500; color:var(--ink);
    display:flex; align-items:baseline; gap:7px;
  }
  .hh-list li::before{content:"\2713"; color:var(--gold-deep); font-weight:700; flex-shrink:0;}
  .hh-countdown{display:flex; flex-direction:column; align-items:center; gap:6px; width:100%;}
  .hh-countdown[hidden]{display:none !important;}
  .hh-cd-label{font-family:'IBM Plex Mono', monospace; font-size:0.66rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-deep);}
  .hh-cd-units{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; width:100%;}
  .hh-cd-unit{display:flex; flex-direction:column; align-items:center; padding:6px 2px; border:1px solid var(--gold-line); border-radius:var(--radius); background:var(--paper);}
  .hh-cd-num{display:flex; font-family:'Fraunces', serif; font-weight:600; font-size:1.25rem; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--ink); overflow:hidden;}
  .hh-cd-num .lc-digit{background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--ink);}
  .hh-cd-name{font-family:'IBM Plex Mono', monospace; font-size:0.58rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);}
  @media (max-width:1080px){ .hero-hook{max-width:300px; margin:0 auto 28px;} }
  @media (max-width:600px){
    /* Put the value proposition and actions first on a phone. The offer
       remains prominent, but no longer consumes most of the first screen. */
    .hero.scroll-content{padding-top:36px; padding-bottom:40px;}
    .hero .wrap{display:flex; flex-direction:column;}
    .hero-copy{order:1;}
    .hero-hook{
      order:2; width:100%; max-width:none; margin:28px 0 0;
      display:grid; grid-template-columns:auto minmax(0,1fr);
      gap:12px 16px; padding:18px; border-radius:14px;
    }
    .hero-photo{order:3;}
    .hh-tag{grid-column:1 / -1;}
    .hh-countdown{grid-column:1 / -1; grid-row:3;}
    .hh-price{grid-column:1; grid-row:2; align-self:center; padding:2px 0;}
    .hero-price-figure, .hero-price-aed{font-size:2rem;}
    .hh-price-sep{font-size:1.5rem;}
    .hh-price-figures{gap:0 5px; flex-wrap:nowrap;}
    .hh-list{
      grid-column:2; grid-row:2; align-self:stretch; align-items:flex-start;
      justify-content:center; padding:0 0 0 14px; gap:6px;
      border:0; border-left:1px solid var(--line-strong);
    }
    .hh-list li{font-size:0.74rem; line-height:1.35; text-align:left;}
    .hero h1{font-size:clamp(2rem,9vw,2.45rem); max-width:none; margin-top:12px;}
    .hero .lead{margin-top:14px; font-size:0.98rem; line-height:1.58;}
    .hero-proof-line{font-size:0.72rem; line-height:1.55;}
    .hero-ctas{margin-top:18px;}
  }
  /* ---------- Summer 2027 exam countdown ----------
     Lives on its own Exam Dates 2027 page rather than the homepage, so
     time-sensitive exam information stays separate from the site's main
     enrolment call to action. */
  .xc{
    margin:30px 0 8px; padding:clamp(20px,2.6vw,28px);
    border:1px solid var(--line-strong); border-radius:var(--radius);
    background:var(--paper);
  }
  .xc-filters{display:flex; flex-wrap:wrap; gap:14px; margin-top:20px;}
  .xc-filters .field{min-width:190px;}
  .xc-body{margin-top:22px;}

  /* Honest empty state: the array carries no dates yet. */
  .xc-empty{
    padding:18px 20px; border-radius:var(--radius);
    background:var(--paper-warm); border-left:3px solid var(--gold);
    font-size:0.9rem; color:var(--ink); line-height:1.65;
  }
  .xc-empty b{display:block; margin-bottom:5px; font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--gold-deep);}

  /* One card per subject/level (English, Physics, Economics x GCSE/
     A-Level), grouped under a heading per qualification. Deliberately
     the same card-grid language as the Universities band further down
     the page (bordered card, var(--radius), var(--shadow-sm), serif
     name + mono label) rather than the table this used to be — with
     only a handful of subject/level combinations, a table's column
     alignment wasn't buying anything a card can't show just as
     clearly, and it now matches the rest of the site's card grids. */
  .xc-level-group{margin-top:32px;}
  .xc-level-group:first-child{margin-top:0;}
  .xc-level-head{display:flex; align-items:baseline; gap:12px; margin-bottom:16px;}
  .xc-level-eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:1.24rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint);
  }
  .xc-level-title{margin:0; font-size:1.24rem;}
  .xc-level-head::after{content:""; flex:1 1 auto; height:1px; background:var(--line);}

  /* Flexbox, not CSS grid: card counts per qualification vary (2, 4, 6…)
     and rarely divide evenly by the column count, so an incomplete last
     row needs to sit centred under the row above rather than pinned to
     the left edge the way grid would leave it. flex-grow:0 keeps every
     card the same width as a full row's, so a short row reads as
     centred cards, not a few cards stretched to fill the gap. */
  .xc-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:16px;}
  .xc-card{flex:0 1 calc((100% - 48px)/4);}      /* 4 up: 3 gaps of 16px */
  @media (max-width:1080px){ .xc-card{flex-basis:calc((100% - 32px)/3);} }  /* 3 up */
  @media (max-width:760px){
    .xc-grid{gap:14px;}
    .xc-card{flex-basis:calc((100% - 14px)/2);}  /* 2 up */
  }
  @media (max-width:480px){ .xc-card{flex-basis:100%;} }

  .xc-card{
    display:flex; flex-direction:column; box-sizing:border-box; gap:14px;
    min-width:0; padding:20px 18px;
    background:linear-gradient(170deg, var(--paper) 66%, var(--xc-tint, transparent) 100%);
    border:1px solid var(--line); border-top:3px solid var(--xc-accent, var(--gold));
    border-radius:var(--radius); box-shadow:var(--shadow-sm);
  }
  .xc-card-head{text-align:center; padding-bottom:12px; border-bottom:1px solid var(--line);}
  .xc-card-subject{
    font-size:1.16rem; font-weight:600;
    color:var(--xc-accent, var(--ink)); letter-spacing:-0.01em; line-height:1.2;
  }
  .xc-card-qual{
    display:block; margin-top:4px; font-family:'IBM Plex Mono', monospace; font-size:0.66rem;
    font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-faint);
  }
  /* GuideMyGrades doesn't teach Chemistry/Maths/Psychology yet — this
     keeps their cards from reading as an existing programme, the same
     honest flag the Subjects page already puts on them (.preview-status). */
  .xc-card-soon{
    display:inline-block; margin-top:8px; font-family:'IBM Plex Mono', monospace;
    font-size:0.6rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--xc-accent, var(--ink-faint)); background:var(--xc-tint, var(--paper-dim));
    border:1px solid var(--xc-accent, var(--line-strong)); border-radius:9px; padding:2px 8px;
  }

  .xc-papers{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
  .xc-paper-row{padding-bottom:12px; border-bottom:1px dotted var(--line-strong);}
  .xc-paper-row:last-child{padding-bottom:0; border-bottom:none;}
  .xc-paper-row.is-past{opacity:0.5;}
  .xc-paper-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
  .xc-paper-name{font-size:0.86rem; font-weight:600; color:var(--ink);}
  .xc-paper-meta{
    margin-top:5px; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 10px;
    font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.02em; color:var(--ink-faint);
  }
  /* Board names can run to three boards ("AQA · Pearson Edexcel ·
     OCR A") — allowed to wrap rather than forcing the card wider. */
  .xc-paper-board{white-space:normal;}
  .xc-paper-date{white-space:nowrap;}
  .xc-when{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; font-weight:700; color:var(--ink);}
  .xc-days{font-family:'IBM Plex Mono', monospace; font-size:0.96rem; font-weight:700; color:var(--gold-deep);}
  .xc-done{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em;}
  /* Provisional dates must never look confirmed. */
  .xc-prov{
    display:inline-block; margin-left:6px; font-family:'IBM Plex Mono', monospace;
    font-size:0.58rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--alert); background:var(--alert-tint);
    border:1px solid var(--alert); border-radius:9px; padding:2px 6px;
  }
  @media (max-width:560px){
    .xc-filters .field{min-width:0; flex:1 1 100%;}
  }

  /* Homepage credentials: a compact card that continues the navy of the
     "Find your subject" section directly above it, so the two read as one
     block rather than two unrelated bands. */
  .trust-band{background:var(--ink); color:var(--on-dark); position:relative; padding:0 0 clamp(52px,6vw,76px); margin-top:-1px;}
  .trust-band .wrap{position:relative; z-index:1;}
  .subject-discovery:has(+ .trust-band){padding-bottom:20px;}
  .subject-discovery:has(+ .trust-band) .finder-count:empty{display:none;}
  .trust-card{
    max-width:940px; margin:0 auto; padding:clamp(24px,3vw,32px) clamp(20px,3vw,36px) clamp(18px,2.2vw,22px);
    border-radius:22px; border:1px solid var(--gold-line);
    background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    box-shadow:0 24px 50px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .trust-head{display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:clamp(20px,2.6vw,26px); text-align:center;}
  .trust-head .eyebrow{order:-1; color:var(--gold-bright); font-size:0.66rem;}
  .trust-head h2{font-size:clamp(1.2rem,1.9vw,1.45rem); color:var(--on-dark); margin:0; letter-spacing:-0.02em;}
  .trust-head h2 em{font-style:italic; color:var(--gold-bright);}
  .trust-grid{display:grid; grid-template-columns:repeat(5, 1fr);}
  .trust-item{display:flex; flex-direction:column; align-items:center; gap:10px; padding:4px 10px; text-align:center;}
  .trust-item + .trust-item{border-left:1px solid rgba(199,154,59,0.25);}
  .trust-item svg{
    width:40px; height:40px; padding:9px; box-sizing:border-box; border-radius:50%;
    background:rgba(199,154,59,0.14); border:1px solid var(--gold-line);
    stroke:var(--gold-bright); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  }
  .trust-item span{font-size:0.8rem; font-weight:500; color:var(--on-dark); line-height:1.35; text-wrap:balance;}
  .trust-foot{
    margin:clamp(18px,2.4vw,22px) auto 0; padding-top:14px; border-top:1px solid rgba(199,154,59,0.22);
    font-size:0.72rem; line-height:1.6; color:var(--on-dark-soft); text-align:center; max-width:none;
  }
  @media (max-width:900px){
    .trust-grid{grid-template-columns:repeat(3,1fr); row-gap:20px;}
    .trust-item + .trust-item{border-left:0;}
  }
  @media (max-width:600px){
    .trust-grid{grid-template-columns:repeat(2,1fr); gap:18px 8px;}
    .trust-item:last-child{grid-column:1 / -1;}
    .trust-item svg{width:36px; height:36px; padding:8px;}
  }

  /* ---------- Programme filter ----------
     One compact white panel: a two-column Qualification / Subject step
     layout with a thin divider. No panel-internal header (the page's own
     .section-head above already carries that) and no results strip
     inside the panel (the plain .prog-results-heading paragraph right
     below it does that job) — both removed to cut vertical space and
     redundant copy. Same navy-active/gold-accent language as the rest of
     the site's toggle controls (.cur-toggle-btn, .about-tab). Buttons are
     real <button> elements with aria-pressed, not a custom roving-
     tabindex widget, since the two groups are independent (Qualification
     and Subject each filter separately, not a single tablist) and this
     is the simplest fully keyboard-operable pattern for that: Tab moves
     between all buttons, Space/Enter toggles one. */
  .prog-filter{
    max-width:980px; margin:28px auto 20px; border:1px solid var(--line);
    border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow-sm);
    overflow:hidden;
  }

  /* align-items:start (not the grid default of stretch) so each column
     sizes to its own content — otherwise the shorter column stretches
     to match the taller one and leaves empty space beneath its buttons.
     Qualification's column is sized to its own content (max-content),
     not a fixed/minmax band, so its two short pills plus the Browse all
     link always fit without wrapping regardless of exact label widths. */
  .prog-filter-body{display:grid; grid-template-columns:max-content 1px 1fr; align-items:start;}
  .prog-filter-divider{background:var(--line); align-self:stretch;}
  .prog-filter-col{border:0; margin:0; padding:14px clamp(18px,3vw,26px); min-width:0;}
  .prog-filter-col legend{padding:0; margin:0;}
  .prog-filter-step{
    display:block; font-family:'IBM Plex Mono', monospace; font-size:0.68rem;
    font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold-deep);
  }
  .prog-filter-col-title{display:block; margin-top:2px; font-family:'Fraunces', serif; font-size:1.1rem; font-weight:600; color:var(--ink);}

  .prog-filter-btns{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}

  .prog-filter-btn{
    box-sizing:border-box; min-height:44px; display:inline-flex; align-items:center;
    justify-content:center; gap:8px; font-family:'IBM Plex Mono', monospace; font-size:0.82rem;
    font-weight:600; padding:9px 16px; border-radius:22px; border:1px solid var(--line-strong);
    background:var(--paper); color:var(--ink-soft); cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .prog-filter-btn:hover{border-color:var(--gold-deep); color:var(--ink);}
  .prog-filter-btn:focus-visible{outline:2px solid var(--gold-ui); outline-offset:2px;}
  .prog-filter-btn[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper);}

  /* Subject buttons carry their own colour as inline custom properties
     (--sc / --sc-tint / --sc-text, set per button from SUBJECTS.colour),
     so the dot and the selected-state tint reuse the exact tokens the
     cohort cards already use — no new colours introduced. */
  .prog-filter-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--sc, var(--ink-faint));}
  .prog-filter-btn.has-colour[aria-pressed="true"]{
    background:var(--sc-tint); border-color:var(--sc); color:var(--sc-text, var(--sc));
  }
  .prog-filter-btn.is-coming-soon{
    cursor:not-allowed; border-style:dashed; border-color:var(--sc);
    background:var(--sc-tint); color:var(--sc-text, var(--sc)); opacity:.82;
  }
  .prog-filter-btn.is-coming-soon .prog-filter-status{
    margin-left:2px; padding:3px 7px; border-radius:999px;
    background:var(--sc); color:#fff; font-size:.62rem; line-height:1.2;
    font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  }

  /* Quiet bypass, sitting under the Qualification buttons rather than in
     a separate actions row — the only way back to seeing everything now
     that there is no "All levels"/"All subjects" pill or Clear control. */
  .prog-filter-browse-all{display:flex; min-height:44px; align-items:center; margin-top:10px;}

  @media (max-width:680px){
    .prog-filter-body{grid-template-columns:1fr;}
    .prog-filter-divider{display:none;}
    .prog-filter-col{border-bottom:1px solid var(--line);}
    .prog-filter-col:last-of-type{border-bottom:0;}
  }

  /* Plain results line under the panel — "GCSE English · 1 programme
     found" — not a boxed/background strip, so it stays one compact row
     whether it is this short label or the longer first-load prompt. */
  .prog-results-heading{
    margin:18px 0 16px; font-family:'IBM Plex Mono', monospace; font-size:0.85rem;
    font-weight:700; letter-spacing:0.02em; color:var(--ink);
  }

  /* ---------- Cohort cards ---------- */
  .course-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:20px;}
  .course-card{
    border:1px solid var(--line); border-top:3px solid var(--line-strong);
    background:var(--paper); border-radius:var(--radius); padding:22px;
    display:flex; flex-direction:column;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .course-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px -10px rgba(21,23,43,0.16);}
  /* Individual-subject cohort cards in #subjects. Each subject gets its
     own colour here. */
  .course-card.sci-physics{border-top-color:var(--sci-physics);}
  .course-card.subj-economics{border-top-color:var(--subj-economics);}
  .course-card.subj-english{border-top-color:var(--subj-english);}
  .course-card.maths{border-top-color:var(--maths);}
  .course-card.chemistry{border-top-color:var(--chemistry);}
  .course-card{--cc:var(--line-strong); --cc-tint:var(--paper-dim);}
  .course-card.sci-physics{--cc:var(--sci-physics); --cc-tint:var(--sci-physics-tint);}
  .course-card.subj-economics{--cc:var(--subj-economics); --cc-tint:var(--subj-economics-tint);}
  .course-card.subj-english{--cc:var(--subj-english); --cc-tint:var(--subj-english-tint);}
  .course-card.maths{--cc:var(--maths); --cc-tint:var(--maths-tint);}
  .course-card.chemistry{--cc:var(--chemistry); --cc-tint:var(--chemistry-tint);}
  .course-card h3{font-size:1.25rem; line-height:1.25;}
  /* Card body, top to bottom: boards, teacher, a tinted "when" panel in
     the subject's colour, then the price. What every programme shares
     (lessons per week, recordings, assessments) is said once, in the
     .prog-includes strip above the grid, not repeated on every card. */
  .cc-label{display:block; font-family:'IBM Plex Mono', monospace; font-size:0.64rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);}
  .cc-boards{margin-top:10px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; font-size:0.78rem;}
  .cc-boards .board-chip{font-size:1em;}
  .cc-teacher{margin-top:16px; display:flex; align-items:center; justify-content:center; gap:10px; text-align:left;}
  .cc-teacher .contact-avatar{width:36px; height:36px; flex-basis:36px;}
  .cc-teacher strong{display:block; font-size:0.95rem; font-weight:600; color:var(--ink);}
  .cc-when{margin-top:16px; padding:14px 14px 12px; border-radius:12px; background:var(--cc-tint); border:1px solid color-mix(in srgb, var(--cc) 22%, transparent);}
  .cc-when .cohort-time{margin-top:4px; font-family:'Fraunces', serif; font-size:1.04rem; font-weight:600; line-height:1.35; color:var(--ink);}
  .cc-length{margin-top:8px; display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
    font-size:0.76rem; font-weight:600; color:var(--cc); background:var(--paper);}
  .cc-length svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .cc-price{margin-top:16px;}
  .cc-price-now{margin-top:2px; font-size:0.9rem; color:var(--ink-soft);}
  .cc-price-now strong{margin-right:4px; font-family:'Fraunces', serif; font-size:1.7rem; font-weight:600; line-height:1; color:var(--ink);}
  .cc-price-then{margin-top:4px; font-size:0.82rem; color:var(--ink-faint);}
  @media (max-width:700px){
    .course-grid{grid-template-columns:1fr;}
    .course-card{padding:24px 20px;}
    .course-card h3{font-size:1.3rem;}
    .course-actions{column-gap:18px;}
  }
  /* ---- Programme cards: layered, one strong colour per subject ----
     A coloured head band (the subject's own colour, lit from the top
     corner, with a faint line drawing of the subject) sits over a white
     body; the teacher's photo overlaps the band's edge so the card reads
     in layers, and shadows pick up the subject's colour. Scoped to the
     Subjects grid: other .course-card uses keep their plain style. */
  #cohortGrid .course-card{
    position:relative; overflow:hidden; padding:0 22px 20px; border:0; border-radius:20px;
    background:linear-gradient(180deg, var(--paper) 55%, color-mix(in srgb, var(--cc) 5%, var(--paper)) 100%);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--cc) 16%, transparent),
      0 2px 4px rgba(24,32,51,0.05),
      0 18px 34px -18px color-mix(in srgb, var(--cc) 55%, rgba(24,32,51,0.4));
  }
  #cohortGrid .course-card:hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--cc) 26%, transparent),
      0 10px 18px rgba(24,32,51,0.08),
      0 34px 56px -24px color-mix(in srgb, var(--cc) 70%, rgba(24,32,51,0.5));}
  #cohortGrid .cc-head{
    position:relative; margin:0 -22px; padding:20px 22px 44px; overflow:hidden; color:#fff;
    background:
      radial-gradient(circle at 88% -10%, rgba(255,255,255,0.28), transparent 52%),
      linear-gradient(150deg, color-mix(in srgb, var(--cc) 78%, #fff) 0%, var(--cc) 42%, color-mix(in srgb, var(--cc) 72%, #000) 100%);
  }
  #cohortGrid .cc-head::after{content:""; position:absolute; inset:auto 0 0 0; height:1px; background:rgba(255,255,255,0.25);}
  .cc-glyph{position:absolute; right:-14px; bottom:-18px; width:118px; height:118px; fill:none; stroke:rgba(255,255,255,0.17); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; pointer-events:none;}
  .cc-tag{position:relative; display:inline-block; padding:3px 10px; border-radius:999px; font-family:'IBM Plex Mono', monospace; font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,0.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.28);}
  #cohortGrid .cc-head h3{position:relative; margin-top:10px; color:#fff; font-size:1.32rem; text-shadow:0 1px 2px rgba(0,0,0,0.18);}
  #cohortGrid .cc-head .cc-boards{position:relative;}
  #cohortGrid .cc-head .board-chip{color:#fff; background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.42);}
  /* Teacher photo overlapping the band, ringed in white. */
  #cohortGrid .cc-teacher{position:relative; z-index:1; margin-top:-30px; flex-direction:column; gap:6px; text-align:center;}
  #cohortGrid .cc-teacher .contact-avatar{width:58px; height:58px; flex-basis:58px; border:3px solid var(--paper); box-shadow:0 6px 14px -6px rgba(24,32,51,0.45), 0 0 0 1px color-mix(in srgb, var(--cc) 30%, transparent);}
  #cohortGrid .cc-teacher strong{font-size:1rem;}
  #cohortGrid .cc-when{margin-top:14px; background:var(--cc-tint); border-color:color-mix(in srgb, var(--cc) 22%, transparent); box-shadow:inset 0 1px 3px rgba(24,32,51,0.06);}
  #cohortGrid .cc-when .cc-label{color:var(--cc);}
  #cohortGrid .cc-length{box-shadow:0 1px 2px rgba(24,32,51,0.08);}
  #cohortGrid .cc-price-now strong{color:var(--cc);}
  #cohortGrid .cohort-add-btn{box-shadow:0 8px 16px -10px rgba(24,32,51,0.7);}
  #cohortGrid .cohort-add-btn:hover{background:var(--cc); border-color:var(--cc); color:#fff;}
  /* In the basket: the button and the card's outline take the subject colour. */
  #cohortGrid .cohort-add-btn[data-in-basket="true"]{background:var(--cc-tint); border-color:var(--cc); color:var(--cc); box-shadow:none;}
  #cohortGrid .course-card:has(.cohort-add-btn[data-in-basket="true"]){box-shadow:0 0 0 2px var(--cc), 0 18px 34px -18px color-mix(in srgb, var(--cc) 55%, rgba(24,32,51,0.4));}

  /* What every programme includes, said once above the cards. */
  .prog-includes{margin:4px 0 22px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border:1px solid var(--line); border-radius:16px; background:var(--paper-warm); overflow:hidden;}
  .prog-includes-head{grid-column:1 / -1; padding:12px 16px; border-bottom:1px solid var(--line); font-family:'IBM Plex Mono', monospace; font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-deep);}
  .prog-includes-item{display:flex; align-items:flex-start; gap:12px; padding:16px 18px; text-align:left;}
  .prog-includes-item + .prog-includes-item{border-left:1px solid var(--line);}
  .prog-includes-icon{flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--paper); border:1px solid var(--gold);}
  .prog-includes-icon svg{width:19px; height:19px; fill:none; stroke:var(--gold-deep); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .prog-includes-item strong{display:block; font-size:0.95rem; color:var(--ink);}
  #subjects .prog-includes-head{max-width:none; margin:0;}
  #subjects .prog-includes-item p{margin:2px 0 0; font-size:0.84rem; line-height:1.45; color:var(--ink-soft);}
  @media (max-width:760px){
    .prog-includes{grid-template-columns:1fr;}
    .prog-includes-item + .prog-includes-item{border-left:0; border-top:1px solid var(--line);}
    .prog-includes-item{padding:12px 16px; gap:12px;}
    .prog-includes-icon{width:34px; height:34px;}
  }
  .course-actions{margin-top:auto; padding-top:16px; display:flex; gap:10px; flex-wrap:wrap;}

  /* ---------- Cohort launch progress ---------- */
  .cohort-status{margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
  .cs-line{
    display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 10px;
    font-family:'IBM Plex Mono', monospace; font-size:0.74rem; font-weight:600;
  }
  .cs-state.running::before{content:""; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px var(--green-tint); vertical-align:1px;}
  .cs-state{text-transform:uppercase; letter-spacing:0.05em;}
  .cs-state.registering{color:var(--gold-deep);}
  .cs-state.running{color:var(--green);}
  .cs-count{color:var(--ink-soft); font-weight:500;}
  .cs-track{height:7px; border-radius:4px; background:var(--line); overflow:hidden; position:relative;}
  .cs-fill{height:100%; border-radius:4px; width:0; transition:width .8s cubic-bezier(.2,.8,.2,1);}
  .cs-fill.registering{background:var(--gold-ui);}
  .cs-fill.running{background:var(--green);}

  /* ---------- Reassurance strip + help CTA (Subjects page) ----------
     One quiet line replacing the old class-size statistics section, and
     a small closing prompt for a parent who is still unsure which
     programme to pick after browsing the results. */
  .prog-reassurance{
    margin:40px 0 0; padding-top:24px; border-top:1px solid var(--line);
    text-align:center; font-size:0.92rem; color:var(--ink-soft);
  }
  .prog-help-cta{
    margin:28px auto 0; max-width:520px; padding:28px 26px; text-align:center;
    border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-dim);
  }
  .prog-help-cta h3{font-size:1.2rem;}
  .prog-help-cta p{margin-top:8px; color:var(--ink-soft); font-size:0.94rem;}
  .prog-help-cta .btn{margin-top:18px;}

  /* ---------- How it works ---------- */
  .hiw-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
  .hiw-step{padding:22px 20px; border-right:1px solid var(--line); background:var(--paper);}
  .hiw-step:last-child{border-right:none; background:var(--green-tint);}
  .hiw-num{
    width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--paper);
    font-family:'IBM Plex Mono',monospace; font-size:0.74rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; margin-bottom:10px;
  }
  .hiw-step h4{font-family:'Fraunces',serif; font-size:1.02rem; font-weight:500;}
  .hiw-step p{font-size:0.84rem; color:var(--ink-soft); margin-top:6px;}
  @media (max-width:820px){
    .hiw-step{border-right:none; border-bottom:1px solid var(--line);}
    .hiw-step:last-child{border-bottom:none;}
  }

  /* ---------- Video ---------- */
  .src-note{font-size:0.84rem; color:var(--ink-soft); margin-top:12px; line-height:1.65; text-align:left;}


  /* ---------- Results: card header ---------- */
  .cc-year{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-deep); margin-top:12px;}
  .cc-school{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-faint); margin-top:5px;}

  /* ---------- Results: methodology disclosure ---------- */
  .method-disclosure{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); text-align:left;}
  .method-disclosure summary{
    cursor:pointer; list-style:none; font-family:'IBM Plex Mono', monospace;
    font-size:0.74rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--gold-deep); padding:4px 0; text-align:center;
  }
  .method-disclosure summary::-webkit-details-marker{display:none;}
  .method-disclosure summary::after{content:"  +";}
  .method-disclosure[open] summary::after{content:"  \2013";}

  .testi-category{
    margin:0 auto 22px; text-align:center; font-family:'IBM Plex Mono', monospace;
    font-size:0.74rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-deep);
  }
  .testi-foot{margin:22px auto 0; max-width:70ch; font-size:0.86rem; color:var(--ink-faint); line-height:1.6;}

  /* ---------- Enrolment review & payment step ---------- */
  .enrol-review{
    margin:22px 0 18px; padding:22px 24px; border-radius:var(--radius);
    border:1px solid var(--gold); background:var(--gold-tint); box-shadow:var(--shadow-sm);
  }
  .enrol-review[hidden]{display:none;}
  .er-title{
    font-family:'IBM Plex Mono', monospace; font-size:0.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.09em; color:var(--gold-deep);
  }
  .er-list{margin:14px 0 0; display:grid; gap:8px;}
  .er-row{display:flex; justify-content:space-between; gap:16px; align-items:baseline; border-bottom:1px dotted var(--line-strong); padding-bottom:7px;}
  .er-row dt{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--ink-faint); letter-spacing:0.04em;}
  .er-row dd{margin:0; font-size:0.92rem; font-weight:600; color:var(--ink); text-align:right; min-width:0; overflow-wrap:anywhere;}
  /* On a 320px screen a label and a long value cannot share one line:
     the row refused to shrink and forced 417px of horizontal overflow
     on the confirmation view. Stack them instead of overflowing. */
  @media (max-width:380px){
    .er-row{flex-direction:column; align-items:flex-start; gap:3px;}
    .er-row dd{text-align:left;}
  }
  .er-money{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px;}
  @media (max-width:520px){ .er-money{grid-template-columns:1fr;} }
  .er-money-block{padding:14px 16px; background:var(--paper); border:1px solid var(--line); border-radius:6px;}
  .er-tag{
    font-family:'IBM Plex Mono', monospace; font-size:0.6rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.07em; color:var(--gold-deep);
  }
  .er-tag-plain{color:var(--ink-faint);}
  .er-amount{font-family:'Fraunces', serif; font-size:1.6rem; line-height:1.1; margin-top:6px; color:var(--ink);}
  .er-amount-plain{color:var(--ink-soft);}
  .er-when{font-family:'IBM Plex Mono', monospace; font-size:0.64rem; color:var(--ink-faint); margin-top:5px; line-height:1.5;}
  .er-next{
    margin-top:16px; font-family:'IBM Plex Mono', monospace; font-size:0.74rem; color:var(--ink);
  }
  .pay-step{margin-top:12px;}
  .pay-note{
    margin-top:10px; font-size:0.8rem; color:var(--ink-soft); line-height:1.6;
    padding:12px 14px; border-left:3px solid var(--gold); background:var(--paper-dim);
    border-radius:0 6px 6px 0; display:none;
  }
  .pay-note.show{display:block;}

  /* ---------- Student destinations grid ----------
     Was a paged carousel a viewer had to click through to see every
     university. Now a plain wrapping grid: all twelve sit on the page
     together, at once, and column count steps down with width so
     names stay legible instead of shrinking indefinitely. */
  .uni-band{
    background:linear-gradient(180deg, var(--paper-tint) 0%, var(--paper) 100%);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  /* Same width and side gutters as .wrap, so the outer cards never touch the screen edge. */
  .uni-grid-wrap{ max-width:1240px; margin:8px auto 6px; padding:10px 26px; box-sizing:border-box; }
  @media (max-width:560px){ .uni-grid-wrap{ padding-left:20px; padding-right:20px; } }
  .uni-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
    list-style:none; margin:0; padding:0;
  }
  .uni-item{
    display:flex; flex-direction:column; justify-content:center; gap:9px;
    padding:22px 20px; box-sizing:border-box;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); text-align:center;
  }
  /* Wordmark. Equal optical height across every item, with each
     institution keeping its own accent so they stay distinguishable. */
  .uni-mark{
    font-family:'Fraunces', serif; font-size:1.32rem; font-weight:600; line-height:1.1;
    color:var(--uni, var(--ink)); letter-spacing:-0.01em;
  }
  .uni-name{
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; font-weight:600;
    text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-faint); line-height:1.5;
  }
  .uni-item::after{
    content:""; display:block; width:26px; height:2px; margin:2px auto 0;
    background:var(--uni, var(--gold)); border-radius:2px; opacity:0.75;
  }
  .uni-logo{
    display:block; height:44px; width:auto; max-width:170px; margin:0 auto;
    object-fit:contain;   /* normalises optical height across differing marks */
  }
  .uni-logo[hidden]{display:none;}
  .uni-mark[hidden]{display:none;}
  @media (max-width:640px){ .uni-logo{height:36px; max-width:132px;} }
  .uni-note{
    font-size:0.72rem; color:var(--ink-faint); max-width:78ch; margin-top:14px; line-height:1.6;
  }
  /* Fewer columns as the row narrows, rather than shrinking four
     columns of cards until the names stop being legible. */
  @media (max-width:900px){
    .uni-grid{grid-template-columns:repeat(3, 1fr);}
  }
  @media (max-width:640px){
    .uni-grid{grid-template-columns:repeat(2, 1fr); gap:12px;}
    .uni-item{padding:18px 16px;}
    .uni-mark{font-size:1.12rem;}
    .uni-name{font-size:0.7rem;}
  }

  /* ---------- Premium surface polish ---------- */
  .preview-card, .team-preview-card, .curric-key,
  .acal-card, .vid-card, .chart-card, .mech-item{
    box-shadow:var(--shadow-sm);
  }
  .preview-card:hover, .team-preview-card:hover,
  .curric-key:hover{box-shadow:var(--shadow-md);}

  /* Subject cards get a soft wash of their own colour, so the palette
     does the work rather than a coloured border alone. */
  .preview-card.physics{background:linear-gradient(170deg, var(--paper) 62%, var(--physics-tint) 100%);}
  .preview-card.econ{background:linear-gradient(170deg, var(--paper) 62%, var(--econ-tint) 100%);}
  .preview-card.english{background:linear-gradient(170deg, var(--paper) 62%, var(--english-tint) 100%);}
  .preview-card.maths{background:linear-gradient(170deg, var(--paper) 62%, var(--soon-maths-tint) 100%);}
  .preview-card.chemistry{background:linear-gradient(170deg, var(--paper) 62%, var(--soon-chemistry-tint) 100%);}
  .preview-card.psychology{background:linear-gradient(170deg, var(--paper) 62%, var(--soon-psychology-tint) 100%);}
  .team-preview-card{background:linear-gradient(100deg, var(--paper) 78%, var(--paper-dim) 100%);}

  /* Dark bands: deeper, with a faint top highlight so they feel lit. */
  .results-preview-band, .final-cta, .stat-band{
    position:relative; box-shadow:var(--shadow-lg);
  }
  .results-preview-band::after, .final-cta::after, .stat-band::after{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:linear-gradient(180deg, rgba(255,255,255,0.07), transparent 32%);
  }
  .rp-num{
    background:linear-gradient(96deg, var(--gold) 0%, #FFD98A 55%, var(--gold) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .stat-num{
    background:linear-gradient(96deg, var(--gold) 0%, #FFD98A 58%, var(--gold) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  /* Academic calendar: teaching blocks read warmer than closures. */
  .acal-card.teaching{background:linear-gradient(160deg, var(--paper) 68%, var(--econ-tint) 100%);}
  .acal-summary{box-shadow:var(--shadow-sm);}
  .as-num{
    background:linear-gradient(150deg, var(--gold-deep) 0%, var(--econ) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  /* Gold buttons gain depth rather than sitting flat on the page. */
  .btn.on-dark, .mobnav-signup{box-shadow:var(--shadow-gold);}

  /* ---------- Grade continuum ----------
     A deliberate academic scale rather than a key: a drawn track,
     refined nodes, and emphasis that decays from the top grade
     downward. Reacts to the selected qualification (A*–U or 7–1). */
  .continuum{margin:6px auto 26px; max-width:660px; padding:14px 20px; border-radius:var(--radius);
    background:transparent; border:0;}
  .cont-row{display:flex; align-items:center; gap:12px;}
  .cont-anchor{
    font-family:'IBM Plex Mono', monospace; font-size:0.7rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-faint);
    white-space:nowrap; flex-shrink:0;
  }
  .cont-track{position:relative; flex:1; display:flex; align-items:center; justify-content:space-between; min-height:38px;}
  .cont-track::before{
    content:""; position:absolute; left:0; right:0; top:50%; height:1px;
    background:linear-gradient(90deg, var(--chart-accent, var(--gold-deep)) 0%, var(--gold) 30%, var(--line) 72%);
    transform:scaleX(0); transform-origin:left center; border-radius:2px;
  }
  .continuum.in .cont-track::before{animation:hudhaDrawLine .75s cubic-bezier(.22,.61,.36,1) forwards;}
  .cont-node{
    position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:7px;
    opacity:0; transform:translateY(6px);
  }
  .continuum.in .cont-node{animation:hudhaFadeUp .45s cubic-bezier(.22,.61,.36,1) forwards;}
  .cont-dot{
    width:var(--dot,20px); height:var(--dot,20px); border-radius:50%;
    background:var(--paper); border:2px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    transition:transform .22s ease, box-shadow .22s ease;
  }
  .cont-node[data-rank="0"] .cont-dot{border-color:var(--chart-accent, var(--gold-deep)); background:var(--chart-accent, var(--gold-deep));}
  .cont-node[data-rank="1"] .cont-dot{border-color:var(--chart-accent, var(--gold-deep)); background:var(--gold);}
  .cont-node[data-rank="2"] .cont-dot{border-color:var(--gold);}
  .cont-grade{
    font-family:'Fraunces', serif; font-size:1rem; color:var(--ink); line-height:1;
  }
  .cont-node[data-rank="0"] .cont-grade{font-size:1.22rem; font-weight:600;}
  .cont-node:hover .cont-dot{transform:scale(1.18);}
  @media (max-width:640px){
    .continuum{padding:18px 14px;}
    .cont-row{gap:8px;}
    .cont-anchor{font-size:0.68rem; letter-spacing:0.05em; max-width:66px; white-space:normal; line-height:1.35;}
    .cont-grade{font-size:0.86rem;}
  }

  /* ---------- Results charts ---------- */
  .cc-head{margin-bottom:16px;}
  .cc-title{font-size:clamp(1.4rem,2.2vw,1.8rem); margin-top:8px;}

  .year-toggle, .qual-toggle{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px;}
  .qual-toggle{margin-bottom:16px;}
  /* display:flex above would otherwise override the hidden attribute,
     leaving the IB toggle visible on years that have no IB cohort. */
  .year-toggle[hidden], .qual-toggle[hidden]{display:none;}
  .yr-btn, .ql-btn{
    font-family:'Work Sans', sans-serif; font-size:0.8rem; font-weight:600;
    padding:9px 16px; min-height:40px; border-radius:18px; cursor:pointer;
    border:1px solid var(--line-strong); background:var(--paper); color:var(--ink-soft);
    transition:background .22s ease, color .22s ease, border-color .22s ease;
  }
  .yr-btn:hover, .ql-btn:hover{border-color:var(--gold-deep); color:var(--ink);}
  .yr-btn.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}
  .ql-btn.active{background:var(--gold-tint); border-color:var(--gold); color:var(--gold-deep);}

  /* Optional assessment caveat, shown only for a results year whose data
     defines one — same visual family as .lesson-note elsewhere on the
     site. No year currently uses it. */
  .res-note{
    margin:2px 0 16px; padding:13px 16px; border-left:3px solid var(--gold);
    background:var(--paper-warm); border-radius:0 var(--radius) var(--radius) 0;
    font-size:0.84rem; color:var(--ink-soft); line-height:1.6;
  }
  .res-note[hidden]{display:none;}
  .res-note b{
    display:block; margin-bottom:4px; font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--gold-deep);
  }

  /* The shell carries a floor width so three grade brackets times two
     bars each never gets squeezed unreadably narrow; .chart-scroll,
     one level up, is what actually scrolls on a screen narrower than
     that floor. See the #results override below for the max-width
     that centres it on wider screens. */
  .chart-shell{margin:6px 0 4px; min-width:560px;}
  .chart-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .res-chart{width:100%; height:auto; display:block; overflow:visible;}
  .cg-base{stroke:var(--ink); stroke-width:1.2; opacity:0.28;}
  /* Four quiet gridlines at 25/50/75/100% plus the axis figures beside
     them, so "0% to 100%" is a real scale a reader can check a bar
     against, not just an implied range. Dashed and low-opacity so they
     sit behind the bars rather than competing with them. */
  .cg-grid{stroke:var(--line-strong); stroke-width:1; stroke-dasharray:3 4; opacity:0.55;}
  .cg-axis-label{
    font-family:'IBM Plex Mono', monospace; font-size:11px; fill:var(--ink-faint);
  }
  .cbar-nat{fill:var(--bench); opacity:1;}
  .cval-na{
    font-family:'IBM Plex Mono', monospace; font-size:15px; font-weight:600; fill:var(--ink-faint);
  }
  .cbar-top{filter:saturate(1.05);}
  .cval{font-family:'Fraunces', serif; font-size:34px; font-weight:600; fill:var(--ink);}
  .cval-nat{font-family:'IBM Plex Mono', monospace; font-size:17px; font-weight:600; fill:var(--bench);}
  .clabel{
    font-family:'IBM Plex Mono', monospace; font-size:16px; font-weight:600;
    fill:var(--ink-soft); letter-spacing:0.06em;
  }
  /* These results charts identify one specific subject each (A-Level
     Physics, A-Level Economics, GCSE/A-Level English), so they now draw
     straight from the individual-subject tokens rather than a chart-only
     hex duplicated from the pillar colour. That old duplication existed
     to keep chart tuning from leaking into the pillar tokens used by the
     ribbon/hero/etc.; the new tokens are already scoped to individual
     subjects, so there is nothing left to protect against and one
     source of truth is simpler to keep in step. */
  .econ-card{--chart-accent:var(--subj-economics);}
  .physics-card{--chart-accent:var(--sci-physics);}
  .english-card{--chart-accent:var(--subj-english);}
  .chem-card{--chart-accent:var(--chemistry);}
  .econ-card .cval-main, .physics-card .cval-main, .english-card .cval-main, .chem-card .cval-main{fill:var(--chart-accent);}
  .econ-card .dot-main{background:var(--subj-economics);}
  .physics-card .dot-main{background:var(--sci-physics);}
  .english-card .dot-main{background:var(--subj-english);}
  .chem-card .dot-main{background:var(--chemistry);}
  .chart-legend .dot-nat{background:var(--bench);}
  .chart-legend{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:10px;}
  .chart-legend span{
    display:flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--ink-soft);
  }
  .chart-legend .dot{width:9px; height:9px; border-radius:2px; flex-shrink:0;}
  @media (max-width:640px){
    .cval{font-size:40px;}
    .cval-nat{font-size:21px;}
    .clabel{font-size:20px;}
  }

  /* ---------- Collective experience band ---------- */
  .stat-band{
    margin:0 0 40px; padding:clamp(30px, 4vw, 46px) clamp(24px, 3.5vw, 46px);
    border-radius:var(--radius); color:var(--paper);
    background:
      radial-gradient(760px 380px at 12% -20%, rgba(199,154,59,0.16), transparent 62%),
      radial-gradient(620px 340px at 96% 120%, rgba(44,90,160,0.14), transparent 60%),
      var(--ink);
    border-top:1px solid rgba(199,154,59,0.32);
  }
  .stat-band{text-align:center;}
  /* All four metrics in one balanced row on desktop, so the panel
     reads as a single confident statement; 2x2 once a row of four
     numerals would start to feel squeezed. */
  .stat-row{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:clamp(20px, 2.6vw, 32px);
    margin-top:clamp(22px, 3vw, 32px);
  }
  .stat-cell{padding-top:20px; border-top:1px solid rgba(255,255,255,0.16); text-align:center;}
  .stat-num{
    font-family:'Fraunces', serif; font-weight:500;
    font-size:clamp(2.3rem, 4vw, 3.3rem); line-height:1; letter-spacing:-0.02em;
    display:flex; align-items:baseline; justify-content:center; font-variant-numeric:tabular-nums;
  }
  .stat-plus{font-size:0.62em; margin-left:0.06em;}
  .stat-label{
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; font-weight:600;
    text-transform:uppercase; letter-spacing:0.06em; color:#C7CEDB;
    margin:14px auto 0; line-height:1.6; max-width:18ch;
  }
  @media (max-width:760px){
    .stat-row{grid-template-columns:repeat(2, 1fr); gap:26px 20px;}
    .stat-cell{padding-top:18px;}
    .stat-num{font-size:clamp(2.4rem, 9vw, 2.9rem);}
    .stat-label{margin-top:10px;}
    /* Keep the <br>: hiding it with display:none also swallows the
       word space, producing "LESSONSTAUGHT". The two-line label reads
       well stacked anyway. */
  }
  /* Experience ledger (homepage #statBandHome and About #statBand): no
     navy block and no cards. The four figures set large in dark serif
     between two fine gold double rules, the label set into the top rule
     on a patch of the section's own background (--ledger-bg), gold
     hairlines between figures. */
  :is(#statBandHome, #statBand){
    position:relative; background:none; box-shadow:none; color:var(--ink); border-radius:0;
    margin:clamp(12px,2vw,20px) auto clamp(40px,5vw,60px); max-width:1100px;
    padding:clamp(34px,4.5vw,52px) 0 clamp(26px,3.5vw,40px);
    border-top:3px double rgba(173,127,46,0.55); border-bottom:3px double rgba(173,127,46,0.55);
  }
  :is(#statBandHome, #statBand)::after{display:none;}
  /* Homepage band now sits below the team cards, so its space goes above. */
  #statBandHome{margin:clamp(40px,5vw,60px) auto clamp(8px,1.5vw,16px);}
  :is(#statBandHome, #statBand) > .eyebrow{
    position:absolute; top:0; left:50%; transform:translate(-50%,-58%);
    padding:0 18px; background:var(--ledger-bg, var(--paper-dim)); white-space:nowrap;
    color:var(--gold-deep); font-size:0.74rem; letter-spacing:0.16em;
  }
  :is(#statBandHome, #statBand) > .eyebrow::after{display:none;}
  :is(#statBandHome, #statBand) .stat-row{gap:0; margin-top:0;}
  :is(#statBandHome, #statBand) .stat-cell{position:relative; border-top:0; padding:6px clamp(10px,2vw,24px);}
  :is(#statBandHome, #statBand) .stat-cell + .stat-cell::before{
    content:""; position:absolute; left:0; top:8%; bottom:8%; width:1px;
    background:linear-gradient(180deg, transparent, rgba(173,127,46,0.55) 20%, rgba(173,127,46,0.55) 80%, transparent);
  }
  :is(#statBandHome, #statBand) .stat-num{
    background:none; -webkit-background-clip:border-box; background-clip:border-box;
    color:var(--ink); font-weight:500; font-size:clamp(3rem,6vw,5rem); letter-spacing:-0.035em;
  }
  :is(#statBandHome, #statBand) .stat-plus{color:var(--gold-ui); font-size:0.55em; margin-left:0.04em; -webkit-text-fill-color:var(--gold-ui);}
  :is(#statBandHome, #statBand) .stat-label{color:var(--ink-soft); margin-top:16px; font-size:0.74rem; letter-spacing:0.1em;}
  @media (max-width:760px){
    :is(#statBandHome, #statBand) .stat-row{grid-template-columns:repeat(2,1fr); gap:0;}
    :is(#statBandHome, #statBand) .stat-cell{padding:18px 8px;}
    :is(#statBandHome, #statBand) .stat-cell:nth-child(3)::before{display:none;}
    :is(#statBandHome, #statBand) .stat-cell:nth-child(n+3){border-top:1px solid rgba(173,127,46,0.3);}
    :is(#statBandHome, #statBand) .stat-num{font-size:clamp(2.3rem,10vw,2.9rem);}
    :is(#statBandHome, #statBand) > .eyebrow{font-size:0.62rem; letter-spacing:0.12em; padding:0 10px;}
  }

  /* ---------- Watch Us Teach showcase ---------- */
  .watch-teach-view.view-panel.active{padding:0;}
  .watch-teach-view .teaching-showcase{
    margin:0; min-height:calc(100vh - 80px); border-top:0; border-bottom:0;
    background:var(--paper);
  }
  .watch-teach-view .tab-back-btn{margin-bottom:clamp(28px,4vw,48px);}
  .teaching-showcase{
    position:relative; overflow:hidden; scroll-margin-top:110px;
    margin:clamp(58px,7vw,92px) 0; padding:clamp(64px,7vw,98px) 0;
    border-top:1px solid rgba(130,93,32,0.28); border-bottom:1px solid rgba(44,90,160,0.18);
    background:
      radial-gradient(900px 520px at 98% 3%, rgba(44,90,160,0.13), transparent 68%),
      radial-gradient(760px 460px at 0% 100%, rgba(199,154,59,0.14), transparent 65%),
      linear-gradient(155deg, #FBF8F1 0%, #F6F2E9 58%, #F7F9FC 100%);
  }
  .teaching-showcase::before{
    content:""; position:absolute; inset:0 auto 0 0; width:5px;
    background:linear-gradient(180deg,var(--gold),var(--sci-physics));
  }
  .watch-intro{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr); gap:clamp(30px,5vw,68px); align-items:center;}
  .watch-intro-copy .eyebrow{color:var(--sci-physics);}
  .watch-intro h2{
    position:relative; margin-top:18px; max-width:17ch;
    font-size:clamp(2.15rem,4.4vw,3.8rem); line-height:1.04; letter-spacing:-0.035em;
  }
  .watch-intro h2 em{display:inline-block; color:var(--gold-deep); font-weight:500;}
  .watch-intro h2::after{
    content:""; display:block; width:clamp(92px,13vw,170px); height:4px; margin-top:20px;
    border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--sci-physics));
  }
  .watch-lead{margin-top:24px; max-width:62ch; color:var(--ink-soft); font-size:clamp(1.03rem,1.5vw,1.16rem); line-height:1.75;}
  .watch-lead strong{color:var(--ink); font-weight:700;}
  .watch-library-line{
    margin-top:22px; max-width:62ch; padding:14px 18px; border-left:3px solid var(--gold);
    background:rgba(255,255,255,0.72); color:var(--ink-soft); line-height:1.65;
  }
  .watch-library-line strong{
    color:var(--sci-physics); font-family:'IBM Plex Mono',monospace; font-size:.88rem;
    text-transform:uppercase; letter-spacing:.035em; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:5px;
  }
  .watch-parent-note{
    position:relative; padding:clamp(28px,3vw,40px); border-radius:var(--radius); color:var(--paper);
    background:linear-gradient(155deg,#242C3E,#182033); border-top:3px solid var(--gold);
    box-shadow:var(--shadow-lg);
  }
  .watch-parent-note::before{
    content:"\201C"; position:absolute; top:10px; right:22px;
    font-family:'Fraunces',serif; font-size:5rem; line-height:1; color:rgba(199,154,59,.18);
  }
  .watch-parent-label{
    display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.7rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.09em; color:var(--gold); margin-bottom:16px;
  }
  .watch-parent-note p{position:relative; color:#D9DEE8; font-size:.98rem; line-height:1.72;}
  .watch-parent-note p + p{margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12);}
  .watch-parent-note em{color:var(--paper); font-family:'Fraunces',serif; font-size:1.08rem;}
  .watch-proof-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:clamp(34px,5vw,54px) 0 24px;}
  .watch-proof-item{
    min-height:118px; padding:22px 18px; border:1px solid rgba(130,93,32,.24); border-radius:12px;
    background:rgba(255,255,255,.78); box-shadow:0 10px 28px rgba(24,32,51,.06);
  }
  .watch-proof-item strong{display:block; color:var(--ink); font-family:'Fraunces',serif; font-size:clamp(1.35rem,2.2vw,1.9rem); line-height:1.1;}
  .watch-proof-item span{display:block; margin-top:9px; color:var(--ink-soft); font-size:.83rem; line-height:1.45;}

  /* Teaching video cards. The subject with available videos becomes the
     full-width feature. Empty subjects remain compact future previews. */
  .video-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:start;}
  .vid-card{
    border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.92);
    overflow:hidden; display:flex; flex-direction:column; border-top:3px solid var(--line-strong);
    box-shadow:0 12px 36px rgba(24,32,51,.07);
  }
  .vid-card.has-videos{
    grid-column:1/-1; display:grid;
    grid-template-columns:minmax(0,1fr) minmax(292px,350px);
    grid-template-areas:"head stage" "more stage" "foot stage";
    border:1px solid rgba(83,24,43,.22); border-top:5px solid var(--sci-physics);
    box-shadow:0 24px 60px rgba(24,32,51,.13);
  }
  .vid-card.has-videos > *{min-width:0;}
  .vid-card.sci-physics{border-top-color:var(--sci-physics);}
  .vid-card.subj-economics{border-top-color:var(--subj-economics);}
  .vid-card.subj-english{border-top-color:var(--subj-english);}
  .vid-head{padding:20px 22px 14px;}
  .has-videos .vid-head{grid-area:head; padding:clamp(28px,4vw,44px) clamp(26px,4vw,46px) 10px;}
  .vid-subject{
    font-family:'IBM Plex Mono',monospace; font-size:.7rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.1em;
  }
  .vid-card.sci-physics .vid-subject{color:var(--sci-physics);}
  .vid-card.subj-economics .vid-subject{color:var(--subj-economics);}
  .vid-card.subj-english .vid-subject{color:var(--subj-english);}
  .vid-tutor{font-family:'Fraunces',serif; font-size:1.14rem; margin-top:8px;}
  .has-videos .vid-tutor{font-size:clamp(1.8rem,3.1vw,2.7rem); line-height:1.08; letter-spacing:-.02em;}
  .vid-desc{font-size:.9rem; color:var(--ink-soft); margin-top:8px; line-height:1.62;}
  .has-videos .vid-desc{max-width:58ch; margin-top:14px; font-size:1rem;}

  /* Click-to-load facade. No third-party player exists until pressed. */
  .vid-stage{position:relative; margin:0 20px; border-radius:10px; overflow:hidden; background:var(--ink);}
  .has-videos .vid-stage{grid-area:stage; align-self:center; justify-self:center; margin:30px auto;}
  .vid-stage.ratio{aspect-ratio:9/16; width:100%; max-width:280px; align-self:center;}
  /* Landscape override for YouTube (16:9) recordings. Fills the stage
     column (its width caps at ~350px) so the wider, shorter player sits
     tidily where the taller TikTok player would, in the same column. */
  .vid-stage.ratio.ratio-16-9{aspect-ratio:16/9; max-width:360px;}
  .vid-facade{
    position:absolute; inset:0; width:100%; height:100%; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px;
    border:0; padding:24px; text-align:center; color:var(--paper);
    background:
      radial-gradient(520px 320px at 50% 28%, rgba(199,154,59,.22), transparent 66%),
      linear-gradient(168deg,#303A53 0%,#182033 100%);
  }
  .vid-facade:hover .vid-play,.vid-facade:focus-visible .vid-play{transform:scale(1.08); background:var(--gold);}
  .vid-play{
    width:72px; height:72px; border-radius:50%; background:var(--gold-deep);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    box-shadow:0 0 0 9px rgba(199,154,59,.12); transition:transform .25s ease,background .25s ease;
  }
  .vid-play svg{margin-left:4px;}
  .vid-facade-label{font-family:'IBM Plex Mono',monospace; font-size:.76rem; font-weight:700; letter-spacing:.045em;}
  .vid-facade-note{font-size:.77rem; color:#C3CAD8; max-width:30ch; line-height:1.55;}
  .vid-featured{
    position:absolute; top:12px; left:12px; z-index:2;
    font-family:'IBM Plex Mono',monospace; font-size:.67rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em; color:var(--ink);
    background:var(--gold); padding:5px 11px; border-radius:12px;
  }
  .vid-stage iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}

  /* Searchable library: one player, all verified topic choices. */
  .vid-more{padding:18px 22px 6px;}
  .has-videos .vid-more{grid-area:more; padding:18px clamp(26px,4vw,46px) 6px;}
  .vid-library-head{display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:14px;}
  .vid-more-label{
    font-family:'IBM Plex Mono',monospace; font-size:.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.085em; color:var(--ink); margin:0;
  }
  .vid-more-label::after{content:""; display:block; width:54px; height:2px; margin-top:8px; background:var(--gold);}
  .vid-search-wrap{position:relative; display:block; flex:0 1 310px;}
  .vid-search{
    width:100%; min-height:44px; padding:10px 14px 10px 38px; border:1px solid var(--line-strong);
    border-radius:22px; background:var(--paper); color:var(--ink); font:500 .84rem 'Work Sans',sans-serif;
  }
  .vid-search:focus{outline:2px solid var(--gold-ui); outline-offset:2px; border-color:transparent;}
  .vid-search-wrap::before{content:"\2315"; position:absolute; left:14px; top:10px; color:var(--gold-deep); font-size:1rem; transform:rotate(-20deg);}
  .vid-filter-status{margin:0 0 10px; color:var(--ink-faint); font-size:.78rem;}
  .vid-strip{
    display:flex; gap:8px; min-width:0; max-width:100%; overflow-x:auto; padding:3px 2px 13px;
    border-bottom:1px solid var(--line); scrollbar-width:thin; scrollbar-color:var(--gold-ui) transparent;
  }
  .vid-chip{
    flex:0 0 auto; padding:9px 14px; border-radius:18px; border:1px solid var(--line-strong);
    background:var(--paper); cursor:pointer; white-space:nowrap;
    font-family:'Work Sans',sans-serif; font-size:.78rem; font-weight:600; color:var(--ink-soft); min-height:40px;
  }
  .vid-chip:hover{border-color:var(--gold-deep); color:var(--ink); background:var(--gold-tint);}
  .vid-chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper);}
  .vid-chip[hidden]{display:none;}
  .vid-no-results{margin:12px 0 0; color:var(--ink-soft); font-size:.86rem;}
  .vid-foot{padding:12px 22px 22px; margin-top:auto; display:flex; flex-wrap:wrap; gap:4px 18px;}
  .has-videos .vid-foot{grid-area:foot; padding:12px clamp(26px,4vw,46px) 30px;}
  .vid-foot a{
    display:inline-flex; align-items:center; gap:7px; min-height:40px;
    font-family:'IBM Plex Mono',monospace; font-size:.75rem; font-weight:700; color:var(--gold-deep);
    text-decoration:underline; text-decoration-color:rgba(130,93,32,.35); text-underline-offset:5px;
  }
  .vid-foot a:hover{color:var(--ink); text-decoration-color:var(--ink);}

  /* Enrolment state for subjects without a published teaching preview. */
  .vid-card.awaiting-videos{min-height:210px; background:rgba(255,255,255,.66); box-shadow:none;}
  .vid-soon{
    margin:0 22px 22px; border:1px dashed var(--line-strong); border-radius:10px;
    padding:26px 22px; text-align:left; background:rgba(247,244,238,.82);
  }
  .vid-soon p{font-size:.86rem; color:var(--ink-faint); max-width:42ch; margin:0; line-height:1.6;}
  .vid-soon .btn{margin-top:16px;}

  .watch-conversion{
    display:flex; align-items:center; justify-content:space-between; gap:30px;
    margin-top:30px; padding:clamp(28px,4vw,44px); border-radius:18px; color:var(--paper);
    background:
      radial-gradient(620px 280px at 100% 0%,rgba(199,154,59,.16),transparent 70%),
      var(--ink); border-top:3px solid var(--gold); box-shadow:var(--shadow-lg);
  }
  .watch-conversion-copy{max-width:650px;}
  .watch-conversion .eyebrow{color:var(--gold);}
  .watch-conversion h3{margin-top:12px; color:var(--paper); font-family:'Fraunces',serif; font-size:clamp(1.45rem,2.5vw,2.1rem);}
  .watch-conversion p{margin-top:11px; color:#C7CEDB; line-height:1.65;}
  .watch-conversion-actions{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; flex-shrink:0;}

  @media (max-width:900px){
    .watch-intro{grid-template-columns:1fr;}
    .watch-proof-grid{grid-template-columns:repeat(2,1fr);}
    .vid-card.has-videos{grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "stage" "more" "foot";}
    .has-videos .vid-stage{margin:12px auto 18px;}
    .watch-conversion{align-items:flex-start; flex-direction:column;}
    .watch-conversion-actions{justify-content:flex-start;}
  }
  @media (max-width:620px){
    .teaching-showcase{scroll-margin-top:84px; padding:54px 0;}
    .watch-intro h2{font-size:clamp(2rem,11vw,2.75rem);}
    .watch-proof-grid{grid-template-columns:1fr 1fr; gap:9px;}
    .watch-proof-item{min-height:104px; padding:18px 14px;}
    .video-grid{grid-template-columns:1fr;}
    .vid-library-head{align-items:stretch; flex-direction:column;}
    .vid-search-wrap{flex-basis:auto; width:100%;}
    .vid-stage.ratio{max-width:270px;}
    .vid-stage.ratio.ratio-16-9{max-width:100%;}
    .vid-head{padding:18px 17px 12px;}
    .has-videos .vid-head{padding:26px 20px 10px;}
    .vid-more,.has-videos .vid-more,.vid-foot,.has-videos .vid-foot{padding-left:20px; padding-right:20px;}
    .watch-conversion-actions{width:100%;}
    .watch-conversion-actions .btn{width:100%; justify-content:center;}
  }

  /* Subject groups */
  .curric-group{margin-top:52px;}
  .curric-group-head{font-family:'IBM Plex Mono', monospace; font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold-deep); margin-bottom:14px;}
  .curric-list{border-top:1px solid var(--line);}
  .curric-map{margin-top:40px;}
  .curric-map-figure{padding:28px 0 20px;}
  .curric-map-figure figcaption{
    margin-top:12px; font-family:'IBM Plex Mono', monospace; font-size:0.7rem;
    font-weight:600; letter-spacing:0.03em; color:var(--ink-faint); text-align:center;
  }
  .map-note{max-width:68ch; margin:14px auto 0; padding:12px 16px; border-left:3px solid var(--gold); background:var(--paper-dim); border-radius:6px; font-size:0.86rem; line-height:1.6; color:var(--ink-soft);}
  .map-download{margin-top:14px; text-align:center;}
  /* .map-media holds either the fallback image or, once JS confirms a
     desktop-class browser, a live inline PDF frame in its place — both
     fill the same aspect-ratio box so swapping causes no layout shift. */
  .map-media{
    display:block; position:relative; width:100%; overflow:hidden;
    border:1px solid var(--line-strong); border-radius:var(--radius);
    box-shadow:var(--shadow-md); background:var(--paper);
  }
  .map-media img, .map-media iframe{display:block; width:100%; height:100%; border:0;}
  /* Academic Calendar poster: a tall, single reference image (one whole
     year, month by month), so it gets its own narrower max-width rather
     than the curriculum maps' full-wrap width — full-wrap on a portrait
     image would make it needlessly enormous. */
  .acal-poster{margin:28px auto 0; max-width:900px;}
  .acal-poster figcaption{
    margin-top:12px; font-family:'IBM Plex Mono', monospace; font-size:0.7rem;
    font-weight:600; letter-spacing:0.03em; color:var(--ink-faint); text-align:center;
  }
  .curric-final{margin-top:56px; padding-top:36px; border-top:1px solid var(--line); text-align:center;}
  .curric-final h3{font-family:'Fraunces', serif; font-size:1.3rem; font-weight:500; color:var(--ink);}
  .curric-final p{font-size:0.95rem; color:var(--ink-soft); margin-top:8px;}

  /* ---------- Timetable / calendar ---------- */
  .cal-block{margin-bottom:40px;}
  .cal-block:last-child{margin-bottom:0;}
  .cal-title{font-size:1.2rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .flag-icon{font-size:0.78em; margin-left:7px; vertical-align:middle; line-height:1;}
  .cal-sub{font-size:0.86rem; line-height:1.5; color:var(--ink-soft); margin:6px 0 16px;}
  .cal-note{font-size:0.86rem; line-height:1.5; color:var(--ink-soft); margin-top:14px;}
  .tz-toggle{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:32px;}
  .tz-toggle-btn{
    font-family:'Work Sans', sans-serif; font-size:0.84rem; font-weight:600;
    padding:9px 18px; border-radius:20px; border:1px solid var(--line-strong);
    background:var(--paper); color:var(--ink-soft); cursor:pointer; transition:all .15s ease;
  }
  .tz-toggle-btn.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}
  .tz-toggle-btn:not(.active):hover{border-color:var(--ink);}
  .tz-toggle-note{font-size:0.82rem; color:var(--ink-faint);}
  .tz-footnote{font-size:0.78rem; color:var(--ink-faint); margin-top:28px; max-width:70ch;}

  /* ---------- Academic calendar 2026/27 ---------- */
  .acal{margin-top:22px;}
  .acal-term{margin-bottom:26px;}
  .acal-term-head{font-family:'IBM Plex Mono', monospace; font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold-deep); margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--gold);}
  .acal-cards{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  @media (max-width:640px){ .acal-cards{grid-template-columns:1fr;} }
  .acal-card{padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); border-left:4px solid var(--physics);}
  .acal-card.teaching{border-left-color:var(--econ);}
  .acal-card.holiday{border-left-color:var(--gold); background:var(--gold-tint);}
  .acal-card.final{border-left-color:var(--gold-deep); background:var(--paper);}
  .acal-card.final .acal-card-tag{color:var(--gold-deep); background:var(--gold-tint);}
  .acal-card-name{font-family:'Fraunces', serif; font-size:1.02rem; font-weight:500;}
  .acal-card-dates{font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:var(--ink-soft); margin-top:5px;}
  .acal-card-tag{display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin-top:9px; padding:3px 9px; border-radius:11px;}
  .acal-card.teaching .acal-card-tag{color:var(--econ); background:var(--econ-tint);}
  .acal-card.holiday .acal-card-tag{color:var(--gold-deep); background:var(--paper); border:1px solid var(--gold);}

  .acal-summary{display:flex; flex-wrap:wrap; gap:20px; margin-top:8px; padding:18px 20px; border:1px solid var(--gold); background:var(--gold-tint); border-radius:var(--radius);}
  .acal-summary div{font-family:'IBM Plex Mono', monospace;}
  .acal-summary .as-num{display:block; font-family:'Fraunces', serif; font-size:1.9rem; font-weight:600;}
  .acal-summary .as-label{display:block; font-size:0.72rem; color:var(--ink-soft); margin-top:3px; letter-spacing:0.03em;}
  /* ---------- Weekly schedule ----------
     Replaces the previous hour-ruled calendar grid (ruled background,
     hour markers, absolutely-positioned event boxes). No lesson content
     changed in this pass — every day, course name, time, board and
     duration below is the same fact the grid used to show, just as a
     short list rather than a box positioned against a clock.

     .sched-day is deliberately unboxed: it sits inside a card that is
     already bordered (.rota-week, see the English rota below and the
     Science/Economics blocks that reuse the same class standalone), and
     a border around the day too would be a box inside a box. */
  .sched-days{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px);}
  @media (max-width:640px){ .sched-days{grid-template-columns:1fr; gap:22px;} }
  /* Science spans four day-columns (Wed, Thu, Sat, Sun); every other block
     still uses two. Four across on desktop, two-by-two on tablets, a single
     column on the narrowest phones. */
  .sched-days.sched-days-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  @media (max-width:900px){ .sched-days.sched-days-4{grid-template-columns:1fr 1fr; gap:22px;} }
  @media (max-width:480px){ .sched-days.sched-days-4{grid-template-columns:1fr;} }
  .sched-day-label{
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; font-weight:700; line-height:1.2;
    text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint);
    margin-bottom:8px; padding-bottom:7px; border-bottom:1px solid var(--line);
  }
  /* Name, time, board/duration — three short centred lines, stacked in
     that order of visual weight, so the whole entry reads as one
     grouped unit rather than two facts pinned to opposite edges of the
     row. Line-height is tightened to 1.2, tighter even than the
     previous 1.3: centring removed the option of sharing a row (which
     is what kept things compact before), so the per-line spacing has
     to give the height back for the table to stay just as compact. */
  .sched-session{padding:7px 0; border-top:1px solid var(--line); text-align:center;}
  .sched-session:first-of-type{border-top:none; padding-top:0;}
  .sched-session-name{font-family:'Fraunces', serif; font-weight:500; font-size:0.92rem; line-height:1.2; color:var(--ink);}
  .sched-session-time{
    display:block; font-family:'IBM Plex Mono', monospace; font-size:0.8rem; font-weight:700;
    line-height:1.2; color:var(--gold-deep); margin-top:2px;
  }
  .sched-session-meta{font-size:0.74rem; line-height:1.2; color:var(--ink-soft); margin-top:1px;}
  @media (max-width:640px){
    .sched-session-name{font-size:0.86rem;}
    .sched-session-time{font-size:0.76rem;}
    .sched-session-meta{font-size:0.7rem;}
  }

  /* ---------- Schedule card ----------
     .rota-week is the single schedule card used by all three subject
     blocks (English, Science, Economics), so they read as one consistent
     system. --sched-accent sets the subject-colour edge, the same
     convention the .lesson-note callouts elsewhere on this page use. */
  .rota-week{
    border:1px solid var(--line); border-left:3px solid var(--sched-accent, var(--gold));
    border-radius:var(--radius); padding:16px 18px 18px; background:var(--paper);
  }

  /* ---------- Lesson model: a horizontal flowchart ----------
     Used by #how-it-works's 4-step cycle. The four steps sit in one row,
     joined by arrows, and a return line under the row runs from the last
     step back to the first, so the cycle still reads as a loop while
     taking a fraction of the height the old circular ring did. Plain
     HTML and CSS: nothing is measured or positioned by script. On a
     phone the steps stack top to bottom and the return line becomes a
     one-line note. */
  .lesson-model{--lm-gap:42px; margin:38px auto 30px; max-width:1080px;}
  .lm-flow{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--lm-gap);}
  .lm-node{
    position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    padding:18px 18px 20px; border-radius:16px; text-align:left;
    background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-sm);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .lm-node:hover{transform:translateY(-3px); box-shadow:0 12px 24px -10px rgba(21,23,43,0.16); border-color:var(--line-strong);}
  /* Step 1 is the way into the loop: warm fill, gold edge, "Start" tag. */
  .lm-node.lm-start{background:var(--paper-warm); border-color:var(--gold);}
  .lm-start-label{
    position:absolute; top:16px; right:16px; padding:3px 8px; border-radius:999px;
    font-family:'IBM Plex Mono', monospace; font-size:0.62rem; font-weight:700; letter-spacing:0.07em;
    text-transform:uppercase; color:var(--gold-deep); background:var(--gold-tint);
  }
  .lm-node-num{
    width:40px; height:40px; border-radius:50%; display:grid; place-items:center; margin-bottom:6px;
    font-family:'Fraunces', serif; font-size:1.3rem; font-weight:600; line-height:1;
    color:var(--ink); background:var(--paper-dim); border:1px solid var(--line);
  }
  .lm-node.lm-start .lm-node-num{color:var(--paper); background:var(--gold-deep); border-color:var(--gold-deep);}
  .lm-node-title{
    font-family:'IBM Plex Mono', monospace; font-size:0.8rem; font-weight:700; letter-spacing:0.02em;
    text-transform:uppercase; line-height:1.3; color:var(--ink);
  }
  .lm-node-desc{margin:0; font-size:0.88rem; line-height:1.5; color:var(--ink-soft);}
  /* Arrow from each step to the next, drawn in the gap between cards. */
  .lm-node:not(:last-child)::after,
  .lm-node:not(:last-child)::before{content:""; position:absolute; top:50%; pointer-events:none;}
  .lm-node:not(:last-child)::after{right:calc(-1 * var(--lm-gap) + 9px); width:calc(var(--lm-gap) - 22px); height:2.5px; margin-top:-1px; border-radius:2px; background:var(--gold);}
  .lm-node:not(:last-child)::before{right:calc(-1 * var(--lm-gap) + 6px); margin-top:-6px; border:6px solid transparent; border-left:9px solid var(--gold-deep); border-right:0;}
  /* Return line: down from step 4, back along the bottom, up into step 1. */
  .lm-repeat{
    position:relative; height:34px; margin:0 calc((100% - 3 * var(--lm-gap)) / 8);
    border:2.5px solid var(--gold); border-top:0; border-radius:0 0 16px 16px;
  }
  .lm-repeat::before{content:""; position:absolute; left:-8.25px; top:-4px; border:6.5px solid transparent; border-bottom:9px solid var(--gold-deep); border-top:0;}
  .lm-repeat span{
    position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); padding:0 10px; white-space:nowrap;
    font-family:'IBM Plex Mono', monospace; font-size:0.66rem; font-weight:700; letter-spacing:0.07em;
    text-transform:uppercase; color:var(--gold-deep); background:var(--paper);
  }
  @media (max-width:900px){
    .lesson-model{--lm-gap:30px;}
    .lm-node{padding:16px 14px 18px;}
    .lm-start-label{top:14px; right:12px;}
    .lm-node-desc{font-size:0.84rem;}
  }
  /* Phone: one step per row, arrows pointing down, the return line as a note. */
  @media (max-width:640px){
    .lesson-model{--lm-gap:26px;}
    .lm-flow{grid-template-columns:minmax(0,1fr);}
    .lm-node{display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:2px; padding:14px 16px;}
    .lm-node-num{grid-row:1 / span 2; margin:0;}
    .lm-start-label{top:12px;}
    .lm-node-title{padding-right:56px;}
    .lm-node:not(:last-child)::after{top:auto; right:auto; left:35px; bottom:calc(-1 * var(--lm-gap) + 9px); width:2.5px; height:calc(var(--lm-gap) - 22px); margin:0;}
    .lm-node:not(:last-child)::before{top:auto; right:auto; left:30px; bottom:calc(-1 * var(--lm-gap) + 5px); margin:0; border:6px solid transparent; border-top:9px solid var(--gold-deep); border-bottom:0;}
    .lm-repeat{height:auto; margin:14px 0 0; border:0; text-align:center;}
    .lm-repeat::before{content:"\21BA"; position:static; margin-right:6px; border:0; font-size:1rem; color:var(--gold-deep); vertical-align:-2px;}
    .lm-repeat span{position:static; transform:none; padding:0;}
  }

  /* ---------- How Lessons Work: concise supporting sections ----------
     The lesson loop is the page's primary visual. The two grids below
     separate what happens live from what remains available afterwards,
     so each promise is made once instead of being repeated in several
     near-identical strips and card groups. */
  #how-it-works .hiw-intro{max-width:780px; margin-left:auto; margin-right:auto; text-align:center;}
  #how-it-works .hiw-section{border-top:1px solid var(--line);}
  .hiw-card-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:30px;}
  .hiw-card{
    position:relative; padding:28px; border:1px solid var(--line); border-radius:16px;
    background:var(--paper); box-shadow:0 12px 34px -26px rgba(24,32,51,.34);
  }
  .hiw-card::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; border-radius:16px 0 0 16px; background:var(--gold);}
  .hiw-card-label{display:block; margin-bottom:10px; font-family:'IBM Plex Mono',monospace; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep);}
  .hiw-card h3{font-size:1.2rem;}
  .hiw-card p{margin-top:9px; color:var(--ink-soft); font-size:.92rem; line-height:1.6;}
  .hiw-assurance-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px;}
  .hiw-assurance{padding:20px 22px; border-radius:12px; background:var(--paper-warm); color:var(--ink-soft); font-size:.9rem; line-height:1.6;}
  .hiw-assurance strong{display:block; margin-bottom:4px; color:var(--ink);}
  .hiw-after-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:30px;}
  .hiw-after-grid .hiw-card{padding:25px 24px;}
  .hiw-platform-line{margin-top:18px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; font-size:.73rem; letter-spacing:.03em;}
  #how-it-works .hiw-cta{margin-top:42px;}
  #how-it-works .hiw-cta .hero-ctas{justify-content:center; margin-top:18px;}
  @media (max-width:760px){
    .hiw-card-grid,.hiw-assurance-grid,.hiw-after-grid{grid-template-columns:1fr;}
    .hiw-card,.hiw-after-grid .hiw-card{padding:22px;}
  }

  .proof-strip{display:flex; flex-wrap:wrap; justify-content:center; gap:36px; margin-top:44px; padding-top:34px; border-top:1px solid var(--line);}
  .proof-strip-item{max-width:230px; text-align:center;}
  .proof-strip-item h4{font-family:'Work Sans', sans-serif; font-size:0.88rem; font-weight:700; letter-spacing:0; color:var(--gold-deep); text-transform:none;}
  .proof-strip-item p{font-size:0.9rem; color:var(--ink-soft); margin-top:7px; line-height:1.5;}

  .lesson-note{
    margin-top:22px; padding:18px 22px; border-left:3px solid var(--gold);
    background:var(--paper-warm); border-radius:0 var(--radius) var(--radius) 0;
  }
  .lesson-note p{font-size:0.94rem; color:var(--ink-soft);}
  .lesson-note strong{color:var(--ink);}

  /* ---------- Feedback flow ---------- */
  .marking-flow{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:22px;}
  .marking-flow span{font-family:'IBM Plex Mono', monospace; font-size:0.86rem; font-weight:700; letter-spacing:0.06em; color:var(--ink);}
  .marking-flow i{font-style:normal; color:var(--gold-deep); font-size:1rem;}
  .marking-closing{max-width:62ch; margin:26px auto 0; text-align:center; font-family:'Fraunces', serif; font-size:1.1rem; font-weight:500; color:var(--ink); line-height:1.5;}

  /* ---------- Ecosystem ---------- */
  .eco-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:20px;}
  .eco-grid .eco-card{flex:1 1 240px; max-width:340px;}
  .eco-card{border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--paper);}
  .eco-card h3{font-size:1.12rem;}
  .eco-card p{font-size:0.88rem; color:var(--ink-soft); margin-top:10px;}
  .eco-card ul{margin-top:12px;}
  .eco-card li{list-style:none; font-size:0.85rem; color:var(--ink-soft); padding:4px 0; display:flex; gap:9px;}
  .eco-card li::before{content:", "; color:var(--gold-deep); flex-shrink:0;}

  /* ---------- Homepage "One connected programme" cards ----------
     Scoped to this one section, not the shared .eco-card/.eco-grid
     rules above, which the How It Works page also uses with its own
     left-aligned, inline-icon layout that this shouldn't touch.
     Four numbered cards joined by a gold rule through the icon badges
     (it shows in the gaps between cards), so "one connected programme"
     is something you can see, not just a label. */
  #how-we-teach-preview .eco-grid{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;
    position:relative; counter-reset:eco; max-width:1180px; margin:0 auto;
  }
  #how-we-teach-preview .eco-grid::before{
    content:""; position:absolute; left:12%; right:12%; top:63px; height:0;
    border-top:2px dashed rgba(173,127,46,0.45); z-index:0;
  }
  #how-we-teach-preview .eco-grid .eco-card{max-width:none;}
  #how-we-teach-preview .eco-card{
    position:relative; z-index:1; counter-increment:eco;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:34px 24px 30px; border:1px solid rgba(24,32,51,0.08); border-radius:20px;
    background:linear-gradient(180deg, #fff 0%, #fffdf8 100%);
    box-shadow:0 1px 2px rgba(24,32,51,0.04), 0 14px 34px -22px rgba(24,32,51,0.25);
    transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
  }
  #how-we-teach-preview .eco-card::before{
    content:"0" counter(eco); position:absolute; top:16px; right:18px;
    font-family:'IBM Plex Mono', monospace; font-size:0.7rem; font-weight:600; letter-spacing:0.06em; color:var(--gold-ui);
  }
  #how-we-teach-preview .eco-card:hover{transform:translateY(-6px); border-color:rgba(173,127,46,0.35); box-shadow:0 22px 44px -22px rgba(24,32,51,0.32);}
  #how-we-teach-preview .eco-icon{
    width:58px; height:58px; padding:15px; box-sizing:border-box; margin-bottom:18px; border-radius:50%;
    background:radial-gradient(circle at 30% 25%, #fbf3df, #f1e2bb); box-shadow:0 0 0 6px #fff, 0 0 0 7px rgba(173,127,46,0.25);
    stroke:var(--gold-deep); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  }
  #how-we-teach-preview .eco-card h3{font-size:1.12rem; line-height:1.3; text-wrap:balance;}
  #how-we-teach-preview .eco-card p{line-height:1.6; margin-top:10px; font-size:0.9rem;}
  @media (max-width:1000px){
    #how-we-teach-preview .eco-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    #how-we-teach-preview .eco-grid::before{display:none;}
  }
  @media (max-width:560px){
    #how-we-teach-preview .eco-grid{grid-template-columns:1fr;}
  }

  /* Curriculum callout as a navy card, the same navy as the
     "Find your subject" section, with a real button rather than a
     trailing text link. */
  #how-we-teach-preview .curric-callout{
    max-width:880px; margin:clamp(40px,5vw,56px) auto 0; border-top:0;
    padding:clamp(28px,3.4vw,40px) clamp(22px,4vw,48px); border-radius:22px;
    background:var(--ink); color:var(--on-dark); position:relative; overflow:hidden;
    box-shadow:0 24px 50px -26px rgba(24,32,51,0.6);
  }
  #how-we-teach-preview .curric-callout::after{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:radial-gradient(ellipse at 50% -20%, rgba(199,154,59,0.2), transparent 60%);
  }
  #how-we-teach-preview .curric-callout > *{position:relative; z-index:1;}
  #how-we-teach-preview .curric-callout h4{font-size:clamp(1.25rem,2vw,1.5rem); color:var(--on-dark);}
  #how-we-teach-preview .curric-callout p{color:var(--on-dark-soft); max-width:58ch; font-size:0.96rem; line-height:1.65;}
  #how-we-teach-preview .curric-callout .text-link{
    display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:12px 22px; border-radius:99px;
    background:var(--gold-bright); color:var(--ink); font-weight:600; text-decoration:none; border:0; transition:background .2s ease, transform .2s ease;
  }
  #how-we-teach-preview .curric-callout .text-link::after{display:none;}
  #how-we-teach-preview .curric-callout .text-link:hover{background:var(--gold-pale); transform:translateY(-2px);}
  #how-we-teach-preview .curric-callout .text-link .ui-icon{stroke:currentColor;}

  /* ---------- Results ---------- */
  .chart-legend{display:flex; gap:22px; margin-bottom:16px; flex-wrap:wrap; font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--ink-soft);}
  .chart-legend .dot{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:7px; vertical-align:middle;}
  .chart-card{
    border:1px solid var(--line); border-top:4px solid var(--line-strong);
    background:var(--paper-dim); border-radius:var(--radius); padding:32px 30px;
  }
  .chart-card.english-card{border-top-color:var(--subj-english);}
  .chart-card.physics-card{border-top-color:var(--sci-physics);}
  .chart-card.econ-card{border-top-color:var(--subj-economics);}
  .chart-card.chem-card{border-top-color:var(--chemistry);}
  /* Explicit override, not left to the UA default: nothing else in this
     rule sets display on .chart-card, so [hidden] would already resolve
     to display:none on its own — kept explicit anyway so a future author
     rule that adds a display value here can never silently defeat the
     subject tabs' show/hide. */
  #results .chart-card[hidden]{display:none;}
  .res-chart{width:100%; height:auto; margin:14px 0 4px; display:block;}
  .chart-caption{font-size:0.94rem; color:var(--ink); margin-top:16px; font-weight:500;}
  .chart-caption[hidden]{display:none;}

  /* ---------- Results: subject tabs ----------
     Three compact cards acting as a tablist. Each carries its own
     subject accent as custom properties so the selected-state border/
     tint/stat colour come from one place per subject rather than three
     separate colour rules. */
  .results-tabs{display:flex; gap:16px; margin:32px auto 0; max-width:1000px; margin-bottom:clamp(32px, 4vw, 56px);}
  .results-tab{
    flex:1 1 0; min-width:0; text-align:left; padding:20px 22px;
    border:1px solid var(--line); border-radius:var(--radius);
    background:var(--paper); cursor:pointer;
    transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .results-tab:hover{border-color:var(--line-strong); box-shadow:var(--shadow-sm);}
  .results-tab:focus-visible{outline:2px solid var(--gold-ui); outline-offset:2px;}
  .results-tab-subject{display:block; font-family:'Fraunces', serif; font-size:1.15rem; font-weight:600; color:var(--ink);}
  .results-tab-teacher{display:block; margin-top:3px; font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.04em; color:var(--ink-soft);}
  .results-tab-stat{display:block; margin-top:16px; font-family:'Fraunces', serif; font-size:2rem; font-weight:600; line-height:1; color:var(--gold-deep);}
  .results-tab-cohort{display:block; margin-top:6px; font-size:0.8rem; color:var(--ink-soft); line-height:1.4;}
  .results-tab-english{--rt-accent:var(--subj-english); --rt-tint:var(--subj-english-tint);}
  .results-tab-physics{--rt-accent:var(--sci-physics); --rt-tint:var(--sci-physics-tint);}
  .results-tab-economics{--rt-accent:var(--subj-economics); --rt-tint:var(--subj-economics-tint);}
  .results-tab-chemistry{--rt-accent:var(--chemistry); --rt-tint:var(--chemistry-tint);}
  .results-tab[aria-selected="true"]{border-color:var(--rt-accent); background:var(--rt-tint); box-shadow:var(--shadow-sm);}
  .results-tab[aria-selected="true"] .results-tab-stat{color:var(--rt-accent);}
  /* Four tabs: two by two on mid-width screens so none gets cramped. */
  @media (min-width:761px) and (max-width:1000px){
    .results-tabs{flex-wrap:wrap;}
    .results-tab{flex:1 1 calc(50% - 8px);}
  }
  @media (max-width:760px){
    .results-tabs{flex-direction:column;}
  }

  /* Concise subject intro merged into the top of each results card,
     replacing the old separate proof-band above the chart. */
  .results-panel-intro{margin-bottom:20px;}
  .results-panel-intro .eyebrow{display:block; margin-bottom:8px;}
  .results-panel-intro h3{font-size:clamp(1.3rem,2.2vw,1.6rem);}
  .results-panel-intro p{margin-top:8px; font-size:0.96rem; color:var(--ink-soft); line-height:1.6;}

  /* Clear break between the statistical results above and the personal
     testimonials below, so the two never read as one continuous block.
     A single clamp does double duty: at mobile widths 8vw resolves well
     under the 64px floor, so narrow screens land on that floor (still a
     real gap, just the smaller end); wide desktops approach the 110px
     ceiling. No separate breakpoint needed. Applied to the wrap itself,
     not .section-head (whose own margin-bottom is unrelated spacing on
     its far edge, so the two never stack into one oversized gap). */
  #results .results-testimonials{margin-top:clamp(64px, 8vw, 110px);}

  /* ---------- Tutors ---------- */
  .tutor-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; align-items:stretch;}
  @media (max-width:860px){ .tutor-grid{grid-template-columns:1fr; max-width:480px; margin-left:auto; margin-right:auto;} }
  .tutor-card{
    border:1px solid var(--line); border-top:2px solid var(--line-strong);
    border-radius:var(--radius); padding:36px 28px 28px;
    background:var(--paper); display:flex; flex-direction:column; text-align:center;
  }
  .tutor-card.physics{border-top-color:var(--physics);}
  .tutor-card.econ{border-top-color:var(--econ);}
  .tutor-card.english{border-top-color:var(--english);}
  .tutor-photo{
    width:74px; height:74px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--paper-dim);
    margin:0 auto;
  }
  /* Fills the 74px circle edge-to-edge, centre-cropped, never stretched.
     flex:0 0 auto stops the flex parent shrinking it below 100%, and the
     matching border-radius avoids any sub-pixel corner bleed past the
     parent's overflow:hidden. All three cards share this one rule, so the
     photos stay identical in size and position across the row. */
  .tutor-photo img{
    width:100%; height:100%; flex:0 0 auto; display:block;
    object-fit:cover; object-position:center; border-radius:50%;
  }
  .tutor-card.physics .tutor-photo{background:var(--physics-tint); border-color:var(--physics);}
  .tutor-card.econ .tutor-photo{background:var(--econ-tint); border-color:var(--econ);}
  .tutor-card.english .tutor-photo{background:var(--english-tint); border-color:var(--english);}
  .tutor-card h3{font-family:'Fraunces', serif; font-size:1.6rem; font-weight:600; margin-top:18px;}
  .tutor-role{font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--ink-soft); margin-top:6px; letter-spacing:0.03em;}
  .tutor-location{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--gold-deep); margin-top:4px; letter-spacing:0.03em; font-weight:600;}
  /* Each teacher's strongest credential, said as one line under their
     name before the chips break it down. */
  .tutor-standout{position:relative; max-width:32ch; margin:16px auto 0; padding-top:14px; font-family:'Fraunces', serif; font-style:italic; font-size:1rem; line-height:1.45; color:var(--ink);}
  .tutor-standout::before{content:""; position:absolute; top:0; left:50%; width:36px; height:2px; margin-left:-18px; border-radius:2px; background:var(--gold);}

  /* Row alignment across the tutor cards (head, key credentials,
     teaches, experience list) is measured in JS by equalizeTutorCards(),
     so it holds whatever the copy and at every width. */

  .highlight-pills{margin-top:24px;}
  .tt-label{font-family:'IBM Plex Mono', monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); display:block; margin-bottom:10px;}
  .hp-row{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;}
  .pill-badge{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; font-weight:600; padding:7px 13px; border-radius:20px; border:1px solid;}
  .tutor-card.physics .pill-badge{color:var(--physics); border-color:var(--physics); background:var(--physics-tint);}
  .tutor-card.econ .pill-badge{color:var(--econ); border-color:var(--econ); background:var(--econ-tint);}
  .tutor-card.english .pill-badge{color:var(--english); border-color:var(--english); background:var(--english-tint);}

  .tutor-teaches{margin-top:26px; padding-top:22px; border-top:1px solid var(--line); font-size:0.95rem; text-align:left;}
  .tutor-teaches li{list-style:none; padding:5px 0; color:var(--ink); display:flex; gap:9px; line-height:1.5;}
  .tutor-teaches li::before{content:""; width:6px; height:6px; margin-top:0.55em; border-radius:50%; background:var(--gold-deep); flex-shrink:0;}

  .tutor-experience{margin-top:22px; text-align:left;}
  .cred-list li{list-style:none; font-size:0.92rem; color:var(--ink-soft); padding:5px 0; display:flex; gap:9px; line-height:1.5;}
  .cred-list li::before{content:"\2713"; color:var(--gold-deep); flex-shrink:0; font-size:0.85rem;}
  .tutor-more{margin-top:4px;}
  .tutor-more summary{cursor:pointer; list-style:none; font-family:'IBM Plex Mono', monospace; font-size:0.74rem; font-weight:700; letter-spacing:0.04em; color:var(--gold-deep); padding:6px 0;}
  .tutor-more summary::-webkit-details-marker{display:none;}
  .tutor-more summary::after{content:" +"; }
  .tutor-more[open] summary::after{content:" \2013"; }
  .tutor-more[open] summary{margin-bottom:2px;}

  .tutor-social-line{margin-top:22px; text-align:center;}
  .tutor-social-line a{font-family:'IBM Plex Mono', monospace; font-size:0.86rem; font-weight:700; color:var(--ink);}
  .tutor-card.physics .tutor-social-line a{color:var(--physics);}
  .tutor-card.econ .tutor-social-line a{color:var(--econ);}
  .tutor-card.english .tutor-social-line a{color:var(--english);}
  .tutor-social-line a:hover{text-decoration:underline;}

  /* ---------- Subject Specialists ----------
     Same .tutor-card component as the founders; only the subject
     colour and the monogram placeholder are added here. */
  .tutor-card.chemistry{border-top-color:var(--chemistry);}
  .tutor-card.maths{border-top-color:var(--maths);}
  .tutor-card.chemistry .tutor-photo{background:var(--chemistry-tint); border-color:var(--chemistry);}
  .tutor-card.maths .tutor-photo{background:var(--maths-tint); border-color:var(--maths);}
  .tutor-monogram{font-family:'Fraunces', serif; font-size:1.55rem; font-weight:600; letter-spacing:0.02em; line-height:1; transition:transform .5s cubic-bezier(.16,1,.3,1);}
  .tutor-card.chemistry .tutor-monogram{color:var(--chemistry);}
  .tutor-card.maths .tutor-monogram{color:var(--maths);}
  .tutor-card:hover .tutor-monogram{transform:scale(1.08);}
  @media (prefers-reduced-motion:reduce){ .tutor-card:hover .tutor-monogram{transform:none;} }
  .tutor-card.chemistry .pill-badge{color:var(--chemistry); border-color:var(--chemistry); background:var(--chemistry-tint);}
  .tutor-card.maths .pill-badge{color:var(--maths); border-color:var(--maths); background:var(--maths-tint);}
  .tutor-card.chemistry .tutor-actions .btn.ghost{border-color:var(--chemistry); color:var(--chemistry);}
  .tutor-card.chemistry .tutor-actions .btn.ghost:hover{background:var(--chemistry); color:#fff;}
  .tutor-card.maths .tutor-actions .btn.ghost{border-color:var(--maths); color:var(--maths);}
  .tutor-card.maths .tutor-actions .btn.ghost:hover{background:var(--maths); color:#fff;}
  #aboutPanelTeach .about-teach-intro.specialists-head{margin-top:72px;}
  /* The two founders: each card the same width as a card in the
     three-column subject-lead row below, centred. Below 861px the base
     .tutor-grid rule stacks them like every other card. */
  @media (min-width:861px){
    .tutor-grid.tutor-grid-pair{grid-template-columns:repeat(2,1fr); max-width:calc((100% - 60px) / 3 * 2 + 30px); margin-left:auto; margin-right:auto;}
  }

  .tutor-actions{margin-top:auto; padding-top:26px; text-align:center;}
  .tutor-card.physics .tutor-actions .btn.ghost{border-color:var(--physics); color:var(--physics);}
  .tutor-card.physics .tutor-actions .btn.ghost:hover{background:var(--physics); color:#fff;}
  .tutor-card.econ .tutor-actions .btn.ghost{border-color:var(--econ); color:var(--econ);}
  .tutor-card.econ .tutor-actions .btn.ghost:hover{background:var(--econ); color:#fff;}
  .tutor-card.english .tutor-actions .btn.ghost{border-color:var(--english); color:var(--english);}
  .tutor-card.english .tutor-actions .btn.ghost:hover{background:var(--english); color:#fff;}

  .recruit-statement{margin:56px auto 0; max-width:60ch; text-align:center; font-family:'Fraunces', serif; font-size:1.1rem; font-weight:500; color:var(--gold-deep);}

  /* ---------- About Us tab system ----------
     Same tablist visual and keyboard language as .results-tab elsewhere
     on the site — a new class rather than reusing it, since each is
     wired as its own independent tablist by initAboutTabs() and sharing
     a class would merge unrelated groups under one arrow-key cycle.

     #who-we-are .wrap is text-align:center (see the section overrides
     further down, the same rule every other view-panel has). That's
     right for the page eyebrow/heading/intro and for the tab controls,
     but every tab's actual reading content — the "Our Story" narrative,
     the standards paragraphs — needs to read as body copy, not centred
     prose. .about-panel sets text-align:left once, at the component
     root, the same fix already used for .faq-answer and the curriculum-
     map lesson content; a handful of short, symmetrical elements (the
     results proof strip, the Our Purpose intro/quote/callout) are then
     explicitly re-centred, the same pattern .recruit-statement already
     uses elsewhere on this exact page. */
  .about-tabs{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:30px 0 8px;}
  .about-tab{
    display:inline-flex; align-items:center; justify-content:center; min-height:44px;
    font-family:'Work Sans', sans-serif; font-size:0.86rem; font-weight:600;
    padding:11px 18px; border-radius:8px; border:1px solid var(--line-strong);
    background:var(--paper); color:var(--ink-soft); cursor:pointer; transition:all .18s ease;
  }
  .about-tab:hover{border-color:var(--gold-deep); color:var(--gold-deep);}
  .about-tab[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper);}
  .about-tab:focus-visible{outline:2px solid var(--gold-ui); outline-offset:2px;}
  .about-panel[hidden]{display:none;}
  .about-panel{margin-top:44px; text-align:left;}
  .about-panel strong{font-weight:600; color:var(--ink);}

  /* Who Teaches You headline: "your child gets" picked out in gold
     italic, the same accent-line language as #aboutPanelStory h3 em. */
  #aboutPanelTeach h3 em{font-style:italic; font-weight:500; color:var(--gold-deep);}

  /* Who Teaches You: a separate gold statement, the same prominence as
     .about-family-promise (Our Standards) but picked out in gold-deep
     rather than boxed, since the pale gold strip above it already
     carries the boxed treatment for this panel. */
  .about-teach-statement{
    margin:24px auto 0; max-width:640px; text-align:center;
    font-family:'Fraunces', serif; font-weight:600; font-size:clamp(1.15rem,2vw,1.4rem);
    line-height:1.4; color:var(--gold-deep);
  }

  /* Shared left-aligned column for the Who Teaches You intro. Every block
     is centred as one column, then anchored to the column's LEFT edge
     (margin-left:0) so the eyebrow, heading, callout, lead paragraphs and
     the gold statement all start at the same vertical line — rather than
     each block centring at its own narrower width. Scoped to this panel so
     Our Purpose / Our Story, which reuse these classes, are untouched. */
  #aboutPanelTeach .about-teach-intro{max-width:850px; margin:0 auto;}
  #aboutPanelTeach .about-teach-intro > *{margin-left:0; margin-right:0;}
  #aboutPanelTeach .about-teach-intro .about-center{max-width:100%;}
  #aboutPanelTeach .about-teach-intro .about-teach-statement{text-align:left;}

  /* Breathing room before the teacher cards, now that the location
     block that used to sit between them and the introduction is gone. */
  #aboutPanelTeach .tutor-grid{margin-top:48px;}

  /* Our Purpose: a calmer, spacious centred composition — deliberately
     not the two-column treatment used elsewhere on this page, so the
     tab reads as a pause rather than another editorial spread. The
     heading and eyebrow stay centred, but the paragraphs beneath keep
     their own left-aligned column (same reasoning as .faq-answer:
     centred multi-line body copy is harder to scan). */
  .about-center{max-width:850px; margin:0 auto; text-align:left;}
  .about-center h3{
    font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em;
    font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.18; max-width:800px;
    margin:16px 0 0; color:var(--ink);
  }
  .about-center-body{max-width:760px; margin:28px auto 0; text-align:left;}
  .about-center-body p{font-size:1.05rem; line-height:1.8; color:var(--ink-soft); margin-top:0;}
  .about-center-body p + p{margin-top:18px;}

  /* Our Story headline: "GuideMyGrades came next" picked out in gold
     italic, the same accent-line language as .hero h1 em and
     .trust-head h2 em — scoped here since this h3 pairs it with an
     explicit two-line break rather than inline emphasis. */
  #aboutPanelStory h3 em{font-style:italic; font-weight:500; color:var(--gold-deep);}

  /* Short connective lines around the results cards and callout — never
     a full reading paragraph, so a lighter, more spaced treatment than
     .about-center-body. Explicitly centred (not just inherited from a
     .about-center ancestor) since Who Teaches You also uses this class
     for lines that sit outside .about-center, between the pale gold
     strip and the gold statement. */
  .about-story-lead{
    font-size:1.05rem; line-height:1.7; color:var(--ink-soft);
    max-width:60ch; margin:18px 0 0; text-align:left;
  }

  /* Two equal result cards, side by side on desktop and stacked on
     mobile — a plain bordered-card treatment, with a large gold-deep
     figure standing in for the old ALPS proof strip. */
  .about-story-cards{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px;}
  @media (max-width:700px){ .about-story-cards{grid-template-columns:1fr;} }
  .about-story-card{
    padding:28px 24px; border:1px solid var(--line); border-radius:var(--radius);
    background:var(--paper); text-align:center;
  }
  .about-story-figure{
    display:block; font-family:'Fraunces', serif; font-weight:600;
    font-size:clamp(2rem,4vw,2.6rem); color:var(--gold-deep); line-height:1.1;
  }
  .about-story-subject{
    display:block; margin-top:10px; font-family:'IBM Plex Mono', monospace; font-size:0.78rem;
    font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink);
  }
  .about-story-teacher{margin-top:6px; font-size:0.88rem; color:var(--ink-soft);}

  /* Founding question: a full-width pale gold callout, the same
     tint/border language as .about-purpose-callout below, but
     unconstrained in width since it carries this tab's centrepiece
     line on its own. */
  .about-story-callout{
    margin:36px 0 0; padding:28px 32px; text-align:left;
    border:1px solid var(--line); border-left:3px solid var(--gold-deep);
    border-radius:0 var(--radius) var(--radius) 0; background:var(--paper-dim);
  }
  .about-story-callout p{
    font-family:'Fraunces', serif; font-style:italic; font-weight:500;
    font-size:clamp(1.15rem,2.2vw,1.5rem); line-height:1.5; color:var(--ink);
  }

  /* Our Purpose pull quote: the same gold-rule/italic editorial voice as
     the Our Story headline above, but larger and centred to carry the
     tab's opening line on its own rather than sitting beside body copy. */
  .about-purpose-quote{
    font-family:'Fraunces', serif; font-style:italic; font-weight:500;
    font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.35; color:var(--gold-deep);
    max-width:720px; margin:18px auto 0;
  }

  /* Three-card grid reusing .mech-item (border-left accent card, already
     used in #how-it-works) rather than a new card component. A true grid
     gives a firm 3-column / 1-column progression across breakpoints. */
  .about-purpose-cards{display:grid; grid-template-columns:1fr; gap:0; max-width:880px; margin:48px auto 0;}
  .about-purpose-cards .mech-item{
    max-width:none; display:grid; grid-template-columns:minmax(190px,.7fr) minmax(0,1.3fr);
    gap:28px; align-items:baseline; padding:22px 4px; border:0 !important;
    border-top:1px solid var(--line) !important; border-radius:0; background:transparent;
  }
  .about-purpose-cards .mech-item:last-child{border-bottom:1px solid var(--line) !important;}
  .about-purpose-cards .mech-item p{margin-top:0; font-size:.94rem; line-height:1.65;}
  @media (max-width:700px){
    .about-purpose-cards .mech-item{grid-template-columns:1fr; gap:8px; padding:20px 0;}
  }

  /* Highlighted statement: a pale gold callout, the same tint/border
     language as .alps-callout and .acal-summary elsewhere on the site. */
  .about-purpose-callout{
    margin:40px auto 0; padding:22px 28px; max-width:720px; text-align:left;
    border:1px solid var(--line); border-left:3px solid var(--gold-deep);
    border-radius:0 var(--radius) var(--radius) 0; background:var(--paper-dim);
  }
  .about-purpose-callout p{
    font-family:'Fraunces', serif; font-weight:600; font-size:clamp(1.1rem,1.9vw,1.35rem);
    line-height:1.4; color:var(--ink);
  }
  .about-purpose-closing{
    margin:28px auto 0; max-width:700px; text-align:center;
    font-size:1.02rem; line-height:1.75; color:var(--ink-soft);
  }

  /* Our Standards family promise: a short, prominent centred statement
     between the intro and the three standards cards — same weight and
     rule treatment as the removed .about-motto, but not boxed, since
     the pale gold callout below is reserved for the growth promise. */
  .about-family-promise{
    margin:36px auto 0; max-width:700px; text-align:center;
    font-family:'Fraunces', serif; font-weight:600; font-size:clamp(1.3rem,2.4vw,1.7rem);
    line-height:1.4; color:var(--ink);
    padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }

  /* Distinct enquiry panel closing the tab: the same bordered-card
     language as .form-wrap, so it reads as a separate, self-contained
     unit rather than another paragraph in the reading flow. */
  .about-standards-panel{
    margin:56px auto 0; max-width:640px; padding:36px 32px; text-align:center;
    border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
  }
  .about-standards-panel h3{font-size:clamp(1.3rem,2.2vw,1.6rem);}
  .about-standards-panel p{margin-top:12px; font-size:0.98rem; line-height:1.7; color:var(--ink-soft);}

  /* ---------- Pricing ---------- */
  .pricing-trust-line{margin:18px auto 0; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:0.82rem; color:var(--ink-soft); letter-spacing:0.02em;}
  .cur-approx-note{margin:10px auto 0; text-align:center;}
  .cur-toggle{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:34px 0 8px;}
  .cur-toggle-btn{
    font-family:'Work Sans', sans-serif; font-size:0.8rem; font-weight:600;
    padding:8px 16px; border-radius:18px; border:1px solid var(--line-strong);
    background:var(--paper); color:var(--ink-soft); cursor:pointer; text-align:center;
  }
  .cur-toggle-btn.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}
  .cur-toggle-note{font-size:0.76rem; color:var(--ink-faint);}

  .pricing-included-label{display:block; text-align:center; margin:48px 0 0;}
  .pricing-accordion{max-width:760px; margin:28px auto 0;}
  .pricing-accordion .faq-list{border-top:1px solid var(--line);}

  .value-strip{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px; margin:28px 0;}
  .value-chip{
    display:flex; align-items:center; gap:7px; padding:9px 16px; border:1px solid var(--line-strong);
    border-radius:20px; background:var(--paper); font-family:'IBM Plex Mono', monospace;
    font-size:0.75rem; font-weight:600; color:var(--ink); box-shadow:var(--shadow-sm);
  }
  .value-chip::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold-deep); flex-shrink:0;}

  /* ---------- Testimonials ---------- */

  /* ---------- Safeguarding ---------- */
  .safe-link{margin:22px auto 0; font-size:0.92rem; color:var(--ink-soft); text-align:center;}
  .trust-line{margin:20px auto 0; font-family:'IBM Plex Mono', monospace; font-size:0.82rem; font-weight:600; letter-spacing:0.03em; color:var(--ink); text-align:center;}

  .page-cta{margin-top:56px; padding-top:40px; border-top:1px solid var(--line); text-align:center;}
  .page-cta p{font-family:'IBM Plex Mono', monospace; font-size:0.8rem; font-weight:700; letter-spacing:0.05em; color:var(--gold-deep); text-transform:uppercase; margin:0 auto 18px;}

  /* ---------- FAQ ----------
     The whole column is centred within the page, but expanded answer
     text stays left-aligned: centred multi-line paragraphs are
     measurably harder to scan because every line starts in a
     different place. */
  .faq-list{border-top:1px solid var(--line);}
  .faq-item{border-bottom:1px solid var(--line); padding:22px 0 22px 18px; border-left:3px solid transparent; transition:background .2s ease, border-color .2s ease;}

  /* ---------- FAQ groups + jump chips ---------- */
  .faq-jump-row{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:26px auto 8px; max-width:860px;}
  .faq-jump-btn{
    font-family:'Work Sans', sans-serif; font-size:0.84rem; font-weight:600;
    padding:11px 18px; border-radius:8px; border:1px solid var(--line-strong);
    background:var(--paper); color:var(--ink-soft); transition:all .18s ease;
  }
  .faq-jump-btn:hover{border-color:var(--gold-deep); color:var(--ink); background:var(--gold-tint);}
  .faq-group{margin-top:72px; max-width:860px; margin-left:auto; margin-right:auto;}
  .faq-group:first-of-type{margin-top:48px;}
  .faq-group-title{display:flex; align-items:baseline; justify-content:center; gap:14px; flex-wrap:wrap;}
  .faq-group-title h3{font-size:1.5rem;}
  .faq-group-count{
    font-family:'IBM Plex Mono', monospace; font-size:0.7rem; font-weight:600;
    color:var(--ink-faint); padding:4px 10px; border:1px solid var(--line-strong); border-radius:12px;
  }
  .faq-group-note{font-size:0.95rem; color:var(--ink-soft); margin:14px auto 0; max-width:66ch; text-align:center;}
  .faq-group .faq-list{margin-top:26px;}
  .faq-item[open]{border-left-color:var(--gold); background:var(--gold-tint);}
  .faq-item summary{
    cursor:pointer; font-weight:600; font-size:1.08rem; line-height:1.45; color:var(--ink);
    list-style:none; position:relative; padding-right:34px; text-align:left;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+"; position:absolute; right:0; top:-1px; font-family:'IBM Plex Mono', monospace; font-size:1.3rem; color:var(--gold-deep); line-height:1.2;}
  .faq-item[open] summary::after{content:"\2212";}
  .faq-item:not([open]):hover{border-left-color:var(--gold-deep);}
  .faq-answer{margin-top:16px; text-align:left;}
  .faq-answer p{font-size:1rem; line-height:1.75; color:var(--ink-soft); max-width:66ch;}
  .faq-answer p + p{margin-top:14px;}
  .faq-answer a{color:var(--gold-deep); font-weight:600; border-bottom:1px solid var(--gold-ui);}
  .faq-answer a:hover{color:var(--ink); border-bottom-color:var(--ink);}
  /* Direct subject-teacher email list inside a FAQ answer — a compact,
     bullet-free list that matches the answer body type. */
  .faq-teacher-emails{margin:14px 0 0; padding:0; list-style:none;}
  .faq-teacher-emails li{font-size:1rem; line-height:1.6; color:var(--ink-soft);}
  .faq-teacher-emails li + li{margin-top:6px;}
  .faq-sequence{
    font-family:'IBM Plex Mono', monospace; font-size:0.92rem !important; font-weight:600;
    color:var(--ink) !important; line-height:1.8 !important;
  }

  /* Pricing answer: readable plan/detail pairs, not a second pricing page. */
  .faq-price-block{margin-top:16px;}
  .faq-price-level{
    font-family:'IBM Plex Mono', monospace; font-size:0.78rem !important; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-deep) !important;
  }
  .faq-price-list{list-style:none; margin-top:8px;}
  .faq-price-list li{display:flex; gap:10px; flex-wrap:wrap; padding:6px 0; font-size:0.98rem; color:var(--ink-soft); line-height:1.6;}
  .faq-price-list li::before{content:"\2022"; color:var(--gold-deep); flex-shrink:0;}
  .fp-plan{font-weight:700; color:var(--ink); flex-shrink:0;}
  .fp-plan::after{content:" \2014";}

  .faq-cta{
    margin:80px auto 0; max-width:860px; padding:clamp(34px,4vw,52px) clamp(24px,3.5vw,44px);
    border-radius:var(--radius); color:var(--paper); text-align:center;
    background:
      radial-gradient(700px 360px at 14% -20%, rgba(199,154,59,0.18), transparent 62%),
      var(--ink);
    border-top:1px solid rgba(199,154,59,0.32); box-shadow:var(--shadow-lg);
  }
  .faq-cta h3{color:var(--paper); font-family:'Fraunces', serif; font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:600; margin-top:12px;}
  .faq-cta p{margin:14px auto 26px; max-width:58ch; font-size:1rem; color:#C7CEDB; line-height:1.65;}
  @media (max-width:560px){
    .faq-item summary{font-size:1.02rem; padding-right:0;}
    .faq-item summary::after{position:static; display:block; margin-top:10px;}
  }

  /* ---------- Forms ---------- */
  .form-wrap{max-width:760px; border:1px solid var(--line); border-radius:var(--radius); padding:32px 30px; background:var(--paper);}

  /* Premium treatment for the enquiry form: a warm gold gradient
     edge and a soft ambient glow that lift it off the page and draw
     the eye, brightening gently while a field is focused. The lit
     border uses the padding-box / border-box layering trick so the
     card interior stays clean paper. Scoped to #signup so no other
     form (the checkout, for one) is affected. The glow is built from
     the site's own --gold (#C79A3B) at low alpha, so it reads as a
     warm halo on the page, not a neon ring. */
  #signup .form-wrap{
    position:relative;
    border:1px solid transparent;
    background:
      linear-gradient(var(--paper), var(--paper)) padding-box,
      linear-gradient(150deg, rgba(199,154,59,0.58), rgba(199,154,59,0.20) 50%, rgba(199,154,59,0.36)) border-box;
    box-shadow:
      var(--shadow-lg),
      0 0 0 4px rgba(199,154,59,0.03),
      0 24px 62px -30px rgba(199,154,59,0.38),
      0 0 44px -8px rgba(199,154,59,0.18);
    transition:box-shadow .5s cubic-bezier(.16,1,.3,1);
  }
  #signup .form-wrap:focus-within{
    box-shadow:
      var(--shadow-lg),
      0 0 0 4px rgba(199,154,59,0.06),
      0 28px 74px -28px rgba(199,154,59,0.48),
      0 0 56px -6px rgba(199,154,59,0.28);
  }
  @media (prefers-reduced-motion: reduce){
    #signup .form-wrap{transition:none;}
  }
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }
  .field{display:flex; flex-direction:column; gap:6px;}
  .field.full{grid-column:1 / -1;}
  .field label{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); font-weight:600;}
  .field input, .field select, .field textarea{
    padding:11px 13px; border:1px solid var(--line-strong); border-radius:var(--radius);
    font-family:'Work Sans', sans-serif; font-size:0.92rem; color:var(--ink); background:var(--paper);
  }
  .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--physics); box-shadow:0 0 0 3px var(--physics-tint);}
  .field textarea{resize:vertical; min-height:88px;}
  .field-error{font-size:0.78rem; color:#B0301F; font-weight:500;}
  .field-hint{font-size:0.78rem; color:var(--ink-faint); line-height:1.45;}
  .pill-choice{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;}
  .pill-choice-opt{position:relative; cursor:pointer;}
  .pill-choice-opt input{position:absolute; opacity:0; width:0; height:0;}
  .pill-choice-opt span{
    display:inline-block; padding:11px 18px; border-radius:24px; border:1px solid var(--line-strong);
    font-size:0.9rem; font-weight:500; color:var(--ink-soft); background:var(--paper); transition:all .15s ease;
  }
  .pill-choice-opt input:checked + span{background:var(--ink); border-color:var(--ink); color:var(--paper); font-weight:600;}
  .pill-choice-opt input:focus-visible + span{outline:2px solid var(--gold-ui); outline-offset:2px;}
  .form-trust-note{margin-top:12px; font-size:0.8rem; color:var(--ink-faint); line-height:1.5;}
  .form-teacher-route{
    margin-top:4px; padding:11px 13px; display:flex; align-items:flex-start; gap:10px;
    border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:8px;
    background:var(--paper-dim); color:var(--ink-soft); font-size:0.84rem; line-height:1.5;
  }
  .form-teacher-route[hidden]{display:none;}
  .form-teacher-route strong{color:var(--ink);}
  .form-teacher-route a{color:var(--ink); border-bottom:1px solid var(--line-strong); font-weight:600;}
  .contact-avatar{
    width:38px; height:38px; flex:0 0 38px; display:block; object-fit:cover;
    object-position:center; border-radius:50%; border:1px solid var(--line-strong);
    background:var(--paper-dim);
  }
  .contact-avatar.english{border-color:var(--english); background:var(--english-tint);}
  .contact-avatar.science{border-color:var(--physics); background:var(--physics-tint);}
  .contact-avatar.economics{border-color:var(--econ); background:var(--econ-tint);}
  .contact-avatar.monogram{display:flex; align-items:center; justify-content:center; box-sizing:border-box; font-family:'Fraunces', serif; font-size:0.86rem; font-weight:600; line-height:1;}
  .contact-avatar.chemistry{border-color:var(--chemistry); background:var(--chemistry-tint); color:var(--chemistry);}
  .contact-avatar.maths{border-color:var(--maths); background:var(--maths-tint); color:var(--maths);}
  .form-teacher-route .contact-avatar{width:32px; height:32px; flex-basis:32px;}
  .form-more{margin-top:18px; border-top:1px solid var(--line); padding-top:14px;}
  .form-more summary{cursor:pointer; font-family:'IBM Plex Mono', monospace; font-size:0.78rem; font-weight:600; color:var(--ink-soft); list-style:none;}
  .form-more summary::-webkit-details-marker{display:none;}
  .form-more summary::before{content:"+ "; color:var(--gold-deep);}
  .form-more[open] summary::before{content:"– ";}
  .form-footer{margin-top:22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  .form-response{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--ink-soft);}
  /* Contact page's "skip the form" shortcut. Same button styling as the
     rest of the site, not WhatsApp's own green, so it reads as a
     GuideMyGrades action rather than a bolted-on third-party widget. */
  .whatsapp-cta{text-align:center; max-width:520px; margin:26px auto 0;}
  .whatsapp-cta p{margin-top:10px; font-size:0.85rem; color:var(--ink-faint);}

  .form-alt{margin-top:26px; padding-top:20px; border-top:1px solid var(--line); font-size:0.9rem; color:var(--ink-soft);}
  .form-alt a{color:var(--ink); border-bottom:1px solid var(--line-strong); font-weight:500;}
  .form-contact-list{display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; margin-top:12px;}
  .form-contact-list li{list-style:none; min-width:0;}
  .form-contact-person{display:flex; align-items:center; gap:10px;}
  .form-contact-copy{min-width:0;}
  .form-contact-list span{display:block; font-size:0.78rem; color:var(--ink-faint);}
  .form-contact-list a{overflow-wrap:anywhere;}
  @media (max-width:640px){.form-contact-list{grid-template-columns:1fr;}}
  .error-summary{
    display:none; margin-bottom:18px; padding:14px 16px; border-radius:var(--radius);
    background:rgba(176,48,31,0.08); border-left:3px solid #B0301F; font-size:0.9rem;
  }
  .error-summary.show{display:block;}
  .error-summary ul{margin:8px 0 0 18px;}
  .error-summary a{color:#B0301F; font-weight:600;}
  #formNotice, #paymentNotice{
    display:none; margin-top:18px; padding:14px 16px; border-radius:var(--radius);
    background:var(--gold-tint); border-left:3px solid var(--gold); font-size:0.9rem;
  }
  #formNotice.show, #paymentNotice.show{display:block;}

  /* ---------- Overlay ---------- */
  .step-overlay{position:fixed; inset:0; z-index:95; background:rgba(21,23,43,0.6); display:none; align-items:center; justify-content:center; padding:20px;}
  .step-overlay.open{display:flex;}
  .step-overlay-card{
    background:var(--paper); border-radius:var(--radius); max-width:480px; width:100%;
    padding:36px 32px; max-height:88vh; overflow-y:auto; box-shadow:0 24px 60px -12px rgba(21,23,43,0.4);
  }
  .step-overlay-card h2{font-size:1.5rem; margin-top:10px;}
  .step-overlay-card > p{margin-top:12px; color:var(--ink-soft); font-size:0.94rem;}
  .step-overlay-details{margin-top:18px; padding:18px 20px; background:var(--paper-warm); border-radius:var(--radius); border-left:3px solid var(--gold);}
  .step-overlay-details p{font-size:0.9rem; color:var(--ink); margin-top:6px;}
  .step-overlay-details p:first-child{margin-top:0;}
  .step-overlay-note{font-size:0.82rem; color:var(--ink-faint); margin-top:16px;}
  .step-overlay-note a{color:var(--ink); border-bottom:1px solid var(--line-strong);}
  .step-overlay-card .btn{margin-top:22px;}

  /* ---------- Cookie consent banner ----------
     Analytics is non-essential under UK PECR, so it must not run
     until this is accepted — see analyticsConsent() near the end
     of the script. Sits on var(--ink) rather than --paper so the
     existing .btn.on-dark / .btn.ghost-dark skins apply as-is. */
  .cookie-banner{
    position:fixed; left:0; right:0; bottom:0; z-index:120;
    background:var(--ink); padding:20px 28px;
    display:none; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap;
    box-shadow:0 -8px 28px rgba(0,0,0,0.22);
  }
  .cookie-banner.show{display:flex;}
  .cookie-banner p{margin:0; color:var(--paper); font-size:0.9rem; line-height:1.55; max-width:60ch;}
  .cookie-banner p a{color:var(--gold); text-decoration:underline; text-underline-offset:2px;}
  .cookie-banner-actions{display:flex; gap:10px; flex-shrink:0;}
  @media (max-width:640px){
    .cookie-banner{padding:16px 18px; justify-content:flex-start;}
    .cookie-banner-actions{width:100%;}
    .cookie-banner-actions .btn{flex:1; text-align:center;}
  }

  /* ============================================================
     CHECKOUT (multi-step enrolment)
     ------------------------------------------------------------
     Deliberately built from the components that already exist:
     .field/.form-grid for inputs, .error-summary/.field-error for
     validation, .er-row/.er-list for the summary rows and .value-chip
     for small facts. The rules
     below add only what genuinely has no equivalent: the step
     rail, the selectable programme card, and the mobile sticky
     total bar. No new colours, fonts, radii or shadows.
     ============================================================ */
  .co-shell{max-width:1080px; margin:0 auto;}

  /* Step rail. Numbers rather than icons, matching .lm-num / .gi-num
     elsewhere, so it reads as the same family of components. */
  .co-rail{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
    gap:6px 10px; margin:0 auto 34px; padding:0; list-style:none;
  }
  .co-rail li{display:flex; align-items:center; gap:10px;}
  .co-rail li::after{content:""; width:26px; height:1px; background:var(--line-strong);}
  .co-rail li:last-child::after{display:none;}
  .co-step-dot{
    display:flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono', monospace; font-size:0.7rem; font-weight:600;
    letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-faint);
  }
  .co-step-dot i{
    font-style:normal; display:grid; place-items:center; width:26px; height:26px;
    border-radius:50%; border:1px solid var(--line-strong); background:var(--paper);
    font-size:0.72rem; color:var(--ink-faint); flex-shrink:0;
  }
  .co-step-dot.is-current{color:var(--ink);}
  .co-step-dot.is-current i{background:var(--ink); border-color:var(--ink); color:var(--paper);}
  .co-step-dot.is-done i{background:var(--gold-tint); border-color:var(--gold); color:var(--gold-deep);}
  .co-step-dot.is-done{color:var(--ink-soft);}
  @media (max-width:640px){
    .co-rail li::after{width:12px;}
    .co-step-dot span{display:none;}   /* numbers only on a narrow screen */
  }

  .co-step{display:none;}
  .co-step.active{display:block;}
  .co-step-head{max-width:640px; margin:0 auto 26px; text-align:center;}
  .co-step-head h2{font-size:clamp(1.5rem,3vw,2rem);}
  .co-step-head p{margin-top:12px; color:var(--ink-soft); font-size:0.95rem;}

  /* Two-column from tablet up: choices left, live summary right. */
  .co-body{display:grid; grid-template-columns:1fr; gap:26px; align-items:start;}
  /* A 1fr track is minmax(auto,1fr), and `auto` will not shrink below a
     child's min-content width. On a 320px screen that let the panel
     force a 451px track and 159px of horizontal overflow on the
     confirmation view. min-width:0 lets the track shrink properly. */
  .co-body > *{min-width:0;}
  @media (min-width:900px){
    .co-body.has-summary{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:32px;}
  }
  .co-panel{
    border:1px solid var(--line); border-radius:var(--radius);
    background:var(--paper); padding:26px 24px;
  }
  .cur-toggle-btn:focus-visible{outline:2px solid var(--gold-ui); outline-offset:2px;}
  @media (max-width:520px){ .co-panel{padding:20px 16px;} }

  /* ---- Marketing consent: deliberately separated from the
     required fields by a rule and a different background, so it
     can never read as part of what you must give us. ---- */
  .co-consent{
    margin-top:22px; padding:16px 18px; border-radius:var(--radius);
    background:var(--paper-dim); border:1px solid var(--line);
  }
  .co-consent-row{display:flex; gap:12px; align-items:flex-start; cursor:pointer;}
  .co-consent-row input{
    width:20px; height:20px; margin-top:2px; flex-shrink:0; accent-color:var(--gold-deep); cursor:pointer;
  }
  .co-consent-row span{font-size:0.88rem; color:var(--ink); line-height:1.5;}
  .co-consent-note{margin-top:10px; font-size:0.78rem; color:var(--ink-faint); line-height:1.5;}
  .co-consent-note a{color:var(--ink); border-bottom:1px solid var(--line-strong);}
  .co-consent-row.is-locked{cursor:not-allowed; opacity:0.55;}
  .co-consent-row.is-locked input{cursor:not-allowed;}

  /* ---- Privacy Notice read-through at step 3. The notice is loaded
     from /privacy/ into this box; its checkbox unlocks only once the
     parent has scrolled to the end. ---- */
  .co-privacy{margin-top:20px;}
  .co-privacy-head{font-size:0.9rem; color:var(--ink); line-height:1.5; margin:0 0 10px;}
  .co-privacy-box{
    max-height:360px; overflow-y:auto; overscroll-behavior:contain;
    padding:18px 20px; border:1px solid var(--line-strong); border-radius:var(--radius);
    background:var(--paper); font-size:0.86rem; line-height:1.6;
  }
  .co-privacy-box:focus-visible{outline:2px solid var(--gold-deep); outline-offset:2px;}
  .co-privacy-box h2{font-size:1.05rem; margin:18px 0 8px;}
  .co-privacy-box h3{font-size:0.95rem; margin:14px 0 6px;}
  .co-privacy-box p, .co-privacy-box li{margin:0 0 8px;}
  .co-privacy-box ul, .co-privacy-box ol{padding-left:20px; margin:0 0 10px;}
  .co-privacy-box table{width:100%; border-collapse:collapse; font-size:0.8rem; margin:0 0 12px; display:block; overflow-x:auto;}
  .co-privacy-box th, .co-privacy-box td{border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top;}
  .co-privacy-box a{color:var(--ink); border-bottom:1px solid var(--line-strong);}
  .co-privacy-progress{margin:8px 0 0; font-size:0.8rem; color:var(--ink-faint);}
  .co-privacy-progress.done{color:var(--gold-deep); font-weight:600;}

  /* ---- Programme cards ---- */
  .co-prog-grid{display:grid; grid-template-columns:1fr; gap:12px;}
  @media (min-width:620px){ .co-prog-grid{grid-template-columns:1fr 1fr;} }
  @media (min-width:900px){ .co-body.has-summary .co-prog-grid{grid-template-columns:1fr;} }
  @media (min-width:1100px){ .co-body.has-summary .co-prog-grid{grid-template-columns:1fr 1fr;} }

  .co-prog{
    position:relative; display:flex; gap:13px; align-items:flex-start; text-align:left;
    width:100%; padding:16px 16px 16px 15px; cursor:pointer;
    border:1px solid var(--line); border-left:3px solid var(--accent, var(--line-strong));
    border-radius:var(--radius); background:var(--paper);
    transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .co-prog:hover{background:var(--paper-tint); box-shadow:var(--shadow-sm);}
  .co-prog input{
    width:22px; height:22px; margin-top:2px; flex-shrink:0;
    accent-color:var(--accent, var(--ink)); cursor:pointer;
  }
  .co-prog.is-picked{border-color:var(--accent, var(--ink)); background:var(--paper-tint); box-shadow:var(--shadow-sm);}
  .co-prog input:focus-visible{outline:2px solid var(--gold-ui); outline-offset:2px;}
  .co-prog-body{min-width:0; flex:1;}
  .co-prog-name{font-family:'Fraunces', serif; font-size:1.05rem; font-weight:600; color:var(--ink); line-height:1.3;}
  .co-prog-meta{
    margin-top:7px; font-family:'IBM Plex Mono', monospace; font-size:0.68rem;
    letter-spacing:0.04em; color:var(--ink-faint); line-height:1.7;
  }
  .co-prog-meta b{display:block; font-weight:600; color:var(--ink-soft);}
  .co-prog-price{
    margin-top:9px; font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
    font-weight:700; letter-spacing:0.04em; color:var(--gold-deep);
  }
  .co-prog-empty{
    padding:22px 18px; text-align:center; font-size:0.9rem; color:var(--ink-soft);
    background:var(--paper-dim); border-radius:var(--radius);
  }

  /* ---- Order summary ---- */
  @media (min-width:900px){
    .co-summary{position:sticky; top:88px;}
  }
  /* Below 900px the aside stops being a sidebar and just stacks under
     the panel, while .co-mobile-total is already showing the same
     figure fixed to the bottom of the screen. That put "Due today £0"
     on screen twice, with a Continue button in each. The sticky bar
     wins on mobile: it is always visible and always current, so the
     stacked copy goes. Scoped to #checkout because the success view
     uses the same aside and has no bar to replace it. */
  @media (max-width:899px){
    #checkout .co-summary{display:none;}
  }
  .co-summary-card{
    border:1px solid var(--line-strong); border-radius:var(--radius);
    background:var(--paper-dim); padding:20px 20px 22px;
  }
  .co-summary-card h3{
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-deep);
  }
  .co-sum-lines{list-style:none; margin:14px 0 0; display:grid; gap:0;}
  .co-sum-lines li{
    display:flex; justify-content:space-between; gap:14px; align-items:baseline;
    padding:9px 0; border-bottom:1px dotted var(--line-strong); font-size:0.88rem; color:var(--ink);
  }
  .co-sum-lines li span:last-child{font-family:'IBM Plex Mono', monospace; font-weight:600; white-space:nowrap;}
  .co-sum-empty{padding:10px 0; font-size:0.86rem; color:var(--ink-faint);}
  .co-sum-total{
    display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    margin-top:16px; padding-top:14px; border-top:1px solid var(--line-strong);
  }
  .co-sum-total dt{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);}
  .co-sum-total dd{margin:0; font-family:'Fraunces', serif; font-size:1.75rem; line-height:1; color:var(--ink);}
  .co-sum-then{margin-top:12px; font-size:0.82rem; color:var(--ink-soft); line-height:1.5;}
  .co-sum-then strong{color:var(--ink);}

  /* ---- Navigation between steps ---- */
  .co-nav{
    display:flex; gap:12px; align-items:center; flex-wrap:wrap;
    margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
  }
  .co-nav .btn{flex:1 1 auto; text-align:center;}
  @media (min-width:560px){ .co-nav .btn{flex:0 0 auto;} .co-nav .co-nav-spacer{flex:1;} }
  .co-back{
    background:none; border:0; cursor:pointer; padding:13px 4px; min-height:44px;
    font-family:'IBM Plex Mono', monospace; font-size:0.74rem; font-weight:600;
    letter-spacing:0.04em; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;
  }
  .co-back:hover{color:var(--ink);}

  /* ---- Final review and payment ---- */
  .co-pay-mount{
    margin-top:4px; padding:14px 16px; display:flex; gap:12px; align-items:flex-start; text-align:left;
    border:1px solid var(--line); border-radius:10px; background:var(--paper-tint);
  }
  .co-pay-mount svg{flex:0 0 auto; width:18px; height:18px; margin-top:2px; fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  .co-pay-mount p{font-size:0.86rem; color:var(--ink-soft); line-height:1.55;}
  .co-pay-mount strong{display:block; color:var(--ink); font-size:0.92rem;}

  /* Payment methods and the Stripe line, directly under the pay button. */
  .co-methods{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 14px; margin-top:12px;}
  .co-methods-lock{display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; font-weight:600; color:var(--ink-soft);}
  .co-methods-lock svg{width:14px; height:14px; fill:none; stroke:var(--green); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
  .co-methods ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
  .co-methods li{
    padding:3px 9px; border:1px solid var(--line-strong); border-radius:5px; background:var(--paper);
    font-size:0.72rem; font-weight:700; color:var(--ink-soft); letter-spacing:0.01em;
  }
  #checkout .co-pay-btn{padding-top:15px; padding-bottom:15px; font-size:0.95rem;}

  /* ---- Checkout restyle: plain labels, solid hairlines, sans
     throughout, matching the booking confirmation. Scoped to
     #checkout so the enquiry form keeps its own look. ---- */
  #checkout .co-step-head h2{font-size:clamp(1.6rem,3vw,2.1rem);}
  #checkout .co-panel{border-radius:12px; box-shadow:var(--shadow-sm); padding:28px;}
  @media (max-width:520px){ #checkout .co-panel{padding:20px 16px;} }
  #checkout .field label{
    font-family:'Work Sans', sans-serif; font-size:0.86rem; font-weight:600;
    text-transform:none; letter-spacing:0; color:var(--ink);
  }
  #checkout .field input, #checkout .field select{padding:12px 14px; border-radius:8px; font-size:0.95rem;}
  #checkout .co-group-title{
    grid-column:1 / -1; margin:6px 0 -4px; padding-top:4px;
    font-size:0.98rem; font-weight:700; color:var(--ink);
  }
  #checkout .co-group-title ~ .co-group-title{margin-top:14px; padding-top:20px; border-top:1px solid var(--line);}

  /* Step rail: sentence case, sans, a tick on finished steps. */
  #checkout .co-step-dot{font-family:'Work Sans', sans-serif; font-size:0.84rem; font-weight:600; letter-spacing:0; text-transform:none;}
  #checkout .co-step-dot i{font-family:'Work Sans', sans-serif; font-size:0.8rem; font-weight:700; width:28px; height:28px;}
  #checkout .co-step-dot.is-done i{background:var(--green); border-color:var(--green); color:transparent; position:relative;}
  #checkout .co-step-dot.is-done i::after{
    content:""; position:absolute; left:50%; top:45%; width:5px; height:10px;
    border:solid #fff; border-width:0 2px 2px 0; transform:translate(-50%,-50%) rotate(45deg);
  }
  #checkout .co-rail li::after{width:40px;}
  @media (max-width:640px){ #checkout .co-rail li::after{width:16px;} }

  /* Review list and order summary. */
  #checkout .er-row{border-bottom-style:solid; border-bottom-color:var(--line); padding:9px 0;}
  #checkout .er-list{gap:0;}
  #checkout .er-row dt{font-family:'Work Sans', sans-serif; font-size:0.86rem; letter-spacing:0; color:var(--ink-faint);}
  #checkout .co-summary-card{background:var(--paper); border-color:var(--line); border-radius:12px; box-shadow:var(--shadow-sm);}
  #checkout .co-summary-card h3{font-family:'Work Sans', sans-serif; font-size:1rem; letter-spacing:0; text-transform:none; color:var(--ink);}
  #checkout .co-sum-lines li{border-bottom-style:solid; border-bottom-color:var(--line);}
  #checkout .co-sum-lines li span:last-child{font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;}
  #checkout .co-sum-total dt{font-family:'Work Sans', sans-serif; font-size:0.9rem; letter-spacing:0; text-transform:none; color:var(--ink);}
  #checkout .co-sum-total dd{font-family:'Work Sans', sans-serif; font-weight:700; font-size:1.5rem;}
  #checkout .co-back{font-family:'Work Sans', sans-serif; font-size:0.86rem; letter-spacing:0; text-transform:none;}
  #checkout .co-prog-meta{font-family:'Work Sans', sans-serif; font-size:0.82rem; letter-spacing:0; line-height:1.55;}
  #checkout .co-prog-price{font-family:'Work Sans', sans-serif; font-size:0.86rem; letter-spacing:0;}
  #checkout .co-trust li::before{content:""; width:12px; height:7px; margin-top:4px; border:solid var(--green); border-width:0 0 2px 2px; transform:rotate(-45deg); flex-shrink:0;}
  #checkout .co-trust li{align-items:flex-start;}
  .co-trust{margin-top:18px; display:grid; gap:8px;}
  .co-trust li{list-style:none; font-size:0.82rem; color:var(--ink-faint); display:flex; gap:9px; align-items:baseline; line-height:1.5;}
  .co-trust li::before{content:"\2713"; color:var(--gold-deep); font-weight:700; flex-shrink:0;}
  .co-trust a{color:var(--ink); border-bottom:1px solid var(--line-strong);}

  /* ---- Mobile sticky total. Mirrors .sticky-cta, including the
     safe-area padding, so the two never look like different systems.
     min-height is fixed so the bar cannot resize as the total
     changes, which would shove the page content up and down. ---- */
  .co-mobile-total{display:none;}
  @media (max-width:899px){
    .co-mobile-total.on{
      display:flex; align-items:center; justify-content:space-between; gap:14px;
      position:fixed; bottom:0; left:0; right:0; z-index:70; min-height:64px;
      background:var(--paper); border-top:1px solid var(--line-strong);
      padding:10px 18px; padding-bottom:calc(10px + env(safe-area-inset-bottom));
      box-shadow:0 -6px 20px -10px rgba(21,23,43,0.28);
    }
    .co-mobile-total-txt{min-width:0;}
    .co-mobile-total-txt b{
      display:block; font-family:'IBM Plex Mono', monospace; font-size:0.64rem;
      font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint);
    }
    .co-mobile-total-txt strong{display:block; font-family:'Fraunces', serif; font-size:1.3rem; line-height:1.15; color:var(--ink);}
    /* .btn.small alone comes out at ~37px, under the 44px tap-target
       minimum used elsewhere on the site. */
    .co-mobile-total .btn{flex-shrink:0; min-height:44px; display:flex; align-items:center;}

    /* One continue action per screen, not two.
       Step 2: the programme list is long, so the bar's button is the
       useful one and the inline Continue is the duplicate — hide it.
       Step 3: the inline pay button carries its own label and the trust
       copy sits directly under it, so THAT is the one worth keeping;
       the bar drops to showing the total only. */
    #coStep2Next{display:none;}
    .co-mobile-total[data-co-barmode="total"] .btn{display:none;}
    /* Room for the bar, so the last control is never trapped under it.
       :has() ties this to the checkout actually being the open view.
       Without it the class survives navigating away mid-step and
       reserves 76px at the foot of every other page for a bar that
       is not on screen. Where :has() is unsupported the rule simply
       never matches, which is the safe way to fail. */
    body.co-bar-on.view-mode:has(#checkout.active){padding-bottom:calc(76px + env(safe-area-inset-bottom));}
    /* The WhatsApp and back-to-top buttons share this bottom edge and
       covered the bar's total and its Continue button. Lift them clear. */
    body.co-bar-on.view-mode:has(#checkout.active) .whatsapp-float,
    body.co-bar-on.view-mode:has(#checkout.active) .to-top{bottom:calc(76px + env(safe-area-inset-bottom) + 12px);}
  }

  /* ---- Preview banner for the success view. Loud on purpose:
     this state must never be mistaken for a real confirmation. ---- */
  .co-preview-banner{
    margin-bottom:24px; padding:14px 18px; border-radius:var(--radius);
    background:var(--alert-tint); border-left:3px solid var(--alert);
    font-family:'IBM Plex Mono', monospace; font-size:0.78rem; font-weight:600;
    color:var(--alert); line-height:1.6;
  }
  /* ---- Booking confirmation (/enrolment-confirmed/) ----
     Laid out like a receipt: a short centred status, then booking
     details on the left and the payment on the right. Plain sans
     labels rather than mono, solid hairlines rather than dotted, so
     it reads as a record of a real transaction. */
  .ps-shell{max-width:1040px; margin:0 auto;}
  .ps-head{text-align:center; max-width:600px; margin:0 auto 36px;}
  .ps-head h2{font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1.15;}
  .ps-head > p{margin-top:12px; color:var(--ink-soft); font-size:1rem; line-height:1.6;}
  .ps-status{
    display:grid; place-items:center; width:60px; height:60px; margin:0 auto 20px;
    border-radius:50%; background:var(--paper-dim); color:var(--ink-faint);
  }
  .ps-status svg{display:none; width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
  .ps-spinner{
    width:26px; height:26px; border-radius:50%;
    border:2.5px solid var(--line-strong); border-top-color:var(--ink);
    animation:ps-spin .8s linear infinite;
  }
  @keyframes ps-spin{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion:reduce){ .ps-spinner{animation-duration:2.4s;} }
  .ps-head[data-state="confirmed"] .ps-status{background:var(--green); color:#fff; box-shadow:0 0 0 8px var(--green-tint);}
  .ps-head[data-state="confirmed"] .ps-status-ok{display:block;}
  .ps-head[data-state="failed"] .ps-status{background:var(--alert-tint); color:var(--alert);}
  .ps-head[data-state="failed"] .ps-status-warn{display:block;}
  .ps-head:not([data-state="checking"]) .ps-spinner{display:none;}
  .ps-ref{
    display:inline-flex; align-items:baseline; gap:8px; margin-top:18px !important;
    padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--paper-tint);
    font-size:0.85rem !important; color:var(--ink-soft);
  }
  .ps-ref[hidden]{display:none;}
  .ps-ref strong{color:var(--ink); letter-spacing:0.03em;}

  .ps-grid{display:grid; grid-template-columns:1fr; gap:20px; align-items:start;}
  .ps-grid[hidden]{display:none;}
  .ps-grid > *{min-width:0;}
  @media (min-width:900px){ .ps-grid{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); gap:24px;} }
  .ps-main, .ps-side{display:grid; gap:20px; min-width:0;}

  .ps-card{
    background:var(--paper); border:1px solid var(--line); border-radius:12px;
    padding:24px; box-shadow:var(--shadow-sm);
  }
  @media (max-width:520px){ .ps-card{padding:20px 18px;} }
  .ps-card-title{font-family:'Work Sans', sans-serif; font-size:1rem; font-weight:700; color:var(--ink); letter-spacing:0;}

  .ps-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px 24px; margin:18px 0 0;}
  .ps-facts dt{font-size:0.78rem; color:var(--ink-faint);}
  .ps-facts dd{margin:3px 0 0; font-size:0.95rem; font-weight:600; color:var(--ink); overflow-wrap:anywhere;}

  .ps-progs{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px;}
  .ps-prog{border:1px solid var(--line); border-radius:10px; padding:16px 18px; background:var(--paper-tint);}
  .ps-prog-name{font-weight:700; color:var(--ink); font-size:0.98rem;}
  .ps-prog-meta{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:10px 0 0; font-size:0.88rem;}
  .ps-prog-meta dt{color:var(--ink-faint);}
  .ps-prog-meta dd{margin:0; color:var(--ink); min-width:0; overflow-wrap:anywhere;}

  .ps-steps{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:18px;}
  .ps-steps li{display:flex; gap:14px; align-items:flex-start; min-width:0;}
  .ps-steps li > div{min-width:0;}
  .ps-steps strong{display:block; font-size:0.95rem; color:var(--ink);}
  .ps-steps p{margin-top:3px; font-size:0.9rem; color:var(--ink-soft); line-height:1.55; overflow-wrap:anywhere;}
  .ps-step-icon{
    flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px;
    border-radius:10px; background:var(--paper-dim); color:var(--ink);
  }
  .ps-step-icon svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

  .ps-receipt-head{display:flex; justify-content:space-between; align-items:center; gap:12px;}
  .ps-paid-badge{
    display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
    background:var(--green-tint); color:var(--green); font-size:0.76rem; font-weight:700;
  }
  .ps-paid-badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
  .ps-lines{list-style:none; margin:16px 0 0; padding:0;}
  .ps-lines li{display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line);}
  .ps-lines li:first-child{padding-top:0;}
  .ps-line-name{font-size:0.9rem; color:var(--ink); min-width:0;}
  .ps-line-name small{display:block; margin-top:2px; font-size:0.78rem; color:var(--ink-faint);}
  .ps-line-amt{font-size:0.9rem; font-weight:600; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums;}
  .ps-total{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:14px 0 4px;}
  .ps-total span{font-weight:700; color:var(--ink);}
  .ps-total strong{font-size:1.5rem; color:var(--ink); font-variant-numeric:tabular-nums;}
  .ps-schedule{margin:12px 0 0; padding:14px 0 0; border-top:1px solid var(--line); display:grid; gap:8px;}
  .ps-schedule div{display:flex; justify-content:space-between; gap:14px; font-size:0.86rem;}
  .ps-schedule dt{color:var(--ink-faint);}
  .ps-schedule dd{margin:0; color:var(--ink); font-weight:600; text-align:right;}
  .ps-secure{
    display:flex; gap:10px; align-items:flex-start; margin-top:18px; padding:12px 14px;
    border-radius:8px; background:var(--paper-tint); font-size:0.8rem; color:var(--ink-soft); line-height:1.5;
  }
  .ps-secure svg{flex:0 0 auto; width:16px; height:16px; margin-top:2px; fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  .ps-billing{
    display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px;
    padding:12px 14px; border:1px solid var(--line); border-radius:8px; color:var(--ink);
    transition:border-color .15s ease, background .15s ease;
  }
  .ps-billing:hover{border-color:var(--line-strong); background:var(--paper-tint);}
  .ps-billing span{font-size:0.8rem; color:var(--ink-soft); line-height:1.45;}
  .ps-billing strong{display:block; font-size:0.9rem; color:var(--ink);}
  .ps-billing svg{flex:0 0 auto; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  #payment-success a.ps-billing[target="_blank"]::after{content:none;}
  .ps-help p{margin-top:8px; font-size:0.88rem; color:var(--ink-soft); line-height:1.55;}
  .ps-help a{color:var(--ink); font-weight:600; border-bottom:1px solid var(--line-strong);}
  .ps-actions{display:grid; gap:10px;}
  .ps-actions .btn{text-align:center; width:100%;}

  @media print{
    body[data-page="payment-success"] > *:not(main), #payment-success .ps-actions, #payment-success .ps-help{display:none !important;}
    #payment-success .ps-card{box-shadow:none; break-inside:avoid;}
    #payment-success .ps-grid{grid-template-columns:1.6fr 1fr;}
  }

  /* ---------- Final CTA / footer ---------- */
  /* No padding set here on purpose: markup carries .scroll-content
     alongside .final-cta specifically so this gets the same
     --band-y-driven top/bottom spacing as every other section (up to
     96px on wide screens) rather than a smaller flat value, so the
     page's last section doesn't feel more cramped than the ones above
     it. #who-we-are .final-cta below still gets its own, deliberately
     tighter override, since it sits mid-page there, not at the foot of
     it. */
  .final-cta{background:var(--ink); color:var(--paper); text-align:center; position:relative; overflow:hidden;}
  .cta-geo{position:absolute; inset:0; z-index:0; pointer-events:none;}
  .cta-geo svg{width:100%; height:100%; display:block;}
  .final-cta .wrap{position:relative; z-index:1;}
  .final-cta h2{color:var(--paper); font-size:clamp(1.8rem,3.8vw,2.5rem); max-width:24ch; margin:0 auto;}
  .final-cta p{color:#B9C2D2; margin-top:14px; max-width:48ch; margin-left:auto; margin-right:auto;}
  .final-cta .hero-ctas{justify-content:center; margin-top:28px;}
  /* ---------- Homepage closing call to action ----------
     Light and framed, like the homepage experience ledger: gold double
     rules with the enrolment tag set into the top one, then the three
     programmes open now as direct links, then the buttons. Scoped with
     :has(.home-cta) so the About page's dark .final-cta is untouched. */
  .final-cta:has(.home-cta){
    background:radial-gradient(760px 300px at 50% 0%, rgba(199,154,59,0.12), transparent 70%), var(--paper);
    color:var(--ink); box-shadow:none; border-top:1px solid var(--line);
  }
  .final-cta:has(.home-cta)::after{display:none;}
  .home-cta{
    position:relative; max-width:960px; margin:0 auto; text-align:center;
    padding:clamp(40px,5vw,56px) clamp(8px,3vw,40px) clamp(30px,4vw,40px);
    border-top:3px double rgba(173,127,46,0.55); border-bottom:3px double rgba(173,127,46,0.55);
  }
  .home-cta-tag{
    position:absolute; top:0; left:50%; transform:translate(-50%,-58%); white-space:nowrap;
    padding:0 18px; background:var(--paper);
    font-family:'Work Sans', sans-serif; font-size:0.74rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-deep);
  }
  .final-cta .home-cta h2{color:var(--ink); font-size:clamp(2rem,4.2vw,3rem); max-width:20ch; line-height:1.12; letter-spacing:-0.02em;}
  .home-cta h2 em{font-style:italic; color:var(--gold-deep);}
  .final-cta .home-cta > p{color:var(--ink-soft); max-width:52ch; font-size:1.02rem; line-height:1.65;}
  .home-cta-subjects{
    list-style:none; margin:clamp(26px,3.4vw,34px) auto 0; padding:0; max-width:none;
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .home-cta-subjects li{position:relative;}
  .home-cta-subjects li + li::before{
    content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px;
    background:linear-gradient(180deg, transparent, rgba(173,127,46,0.55) 20%, rgba(173,127,46,0.55) 80%, transparent);
  }
  .home-cta-subjects a{
    --hcs:var(--gold-deep);
    display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 12px 12px;
    text-decoration:none; color:var(--ink); border-radius:14px; transition:background .2s ease;
  }
  .home-cta-subjects .hcs-english{--hcs:var(--english);}
  .home-cta-subjects .hcs-maths{--hcs:var(--maths);}
  .home-cta-subjects .hcs-chemistry{--hcs:var(--chemistry);}
  .home-cta-subjects .hcs-physics{--hcs:var(--physics);}
  .home-cta-subjects .hcs-econ{--hcs:var(--econ);}
  .hcs-name{font-family:'Fraunces', serif; font-size:clamp(1.35rem,2.2vw,1.65rem); font-weight:500; color:var(--hcs); line-height:1.1;}
  .hcs-levels{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint);}
  .hcs-arrow{color:var(--hcs); font-size:1.05rem; transition:transform .2s ease;}
  .home-cta-subjects a:hover{background:rgba(199,154,59,0.08);}
  .home-cta-subjects a:hover .hcs-arrow{transform:translateX(4px);}
  .home-cta-subjects a:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
  .final-cta .home-cta .hero-ctas{margin-top:clamp(24px,3vw,30px); align-items:center; gap:14px 22px;}
  .final-cta .home-cta .text-link{color:var(--ink);}
  .final-cta .home-cta .home-cta-facts{
    margin-top:22px; font-family:'IBM Plex Mono', monospace; font-size:0.74rem; font-weight:600;
    letter-spacing:0.06em; color:var(--ink-faint);
  }
  /* Five across gets cramped below ~900px: drop to a centred 3 + 2. */
  @media (max-width:900px) and (min-width:641px){
    .home-cta-subjects{grid-template-columns:repeat(6,minmax(0,1fr)); row-gap:10px;}
    .home-cta-subjects li{grid-column:span 2;}
    .home-cta-subjects li:nth-child(4){grid-column:2 / 4;}
    .home-cta-subjects li:nth-child(4)::before{display:none;}
  }
  @media (max-width:640px){
    .home-cta-subjects{grid-template-columns:1fr;}
    .home-cta-subjects li + li::before{left:20%; right:20%; top:0; bottom:auto; width:auto; height:1px;
      background:linear-gradient(90deg, transparent, rgba(173,127,46,0.5), transparent);}
    .home-cta-tag{font-size:0.62rem; letter-spacing:0.12em; padding:0 10px;}
  }
  /* footer.home-only, not just footer: this element also carries
     .scroll-content, which sets padding-top/padding-bottom from
     var(--band-y) — a class selector, so it outranks a bare "footer"
     element selector for those two properties regardless of source
     order. footer is deliberately not one of the elements --band-y is
     defined on (see the section/.trust-band/.final-cta/
     .results-preview-band rule above), so that var() has nothing to
     resolve to and silently computes to 0 — which is why the padding
     below needs the extra .home-only to actually win. */
  footer.home-only{padding:76px 0 36px; border-top:1px solid var(--line); background:var(--paper-dim);}
  .foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:36px;}
  .foot-col{font-size:0.87rem; color:var(--ink-soft);}
  .foot-col h4{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink); margin-bottom:10px; font-weight:600;}
  .foot-col li{list-style:none; padding:4px 0;}
  .foot-col a:hover{color:var(--ink); text-decoration:underline;}
  .foot-contact{min-width:225px;}
  .foot-contact-person{display:flex; align-items:center; gap:9px;}
  .foot-contact-person + .foot-contact-person{margin-top:4px;}
  .foot-contact-person .contact-avatar{width:32px; height:32px; flex-basis:32px;}
  .foot-contact-copy{min-width:0;}
  .foot-contact-name{display:block; color:var(--ink); font-weight:600;}
  .foot-contact a{overflow-wrap:anywhere;}
  .foot-bottom{margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
  .company-registration{margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line); color:var(--ink-faint); font:normal 0.76rem/1.7 'IBM Plex Mono',monospace;}
  .company-registration strong{color:var(--ink-soft);}

  /* ---------- Launch announcement bar + countdown band ----------
     Built only from existing tokens: --ink (the site's navy), --midnight
     for the lighter unit cards, --gold-line hairlines, --shadow-md, the
     .rp-num gold gradient numerals, .eyebrow, .status-pill and the
     .btn.on-dark / .btn.ghost-dark skins. */
  .launch-bar{background:var(--ink); color:var(--on-dark-soft); font-size:0.8rem; line-height:1.45; text-align:center; padding:9px 16px;}
  .launch-bar p{margin:0 auto; max-width:1240px; text-wrap:balance;}
  .launch-bar .lb-sep{color:var(--gold-line); margin:0 8px;}
  .launch-bar a{color:var(--gold-bright); font-weight:700; white-space:nowrap;}
  .launch-bar a:hover{text-decoration:underline; text-underline-offset:3px;}
  .launch-bar .lb-countdown strong{color:var(--on-dark); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;}
  @media (max-width:640px){
    .launch-bar{font-size:0.74rem; padding:8px 16px;}
    .launch-bar .lb-sep{margin:0 5px;}
    /* Phones: a ticking countdown replaces the date, so it is visible
       without scrolling (the hero card's countdown sits lower here). */
    .launch-bar.has-countdown .lb-date{display:none;}
    .launch-bar.has-countdown .lb-countdown[hidden]{display:inline !important;}
  }
  .lc-num{
    display:flex; justify-content:center; overflow:hidden;
    font-family:'Fraunces', serif; font-weight:600; line-height:1; letter-spacing:-0.01em;
    font-size:clamp(2rem,6vw,3.6rem); font-variant-numeric:tabular-nums;
  }
  .lc-digit{
    display:inline-block;
    background:linear-gradient(96deg, var(--gold) 0%, #FFD98A 55%, var(--gold) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .lc-digit.lc-tick{animation:lcTick .25s cubic-bezier(.22,.61,.36,1) both;}
  @keyframes lcTick{from{opacity:0; transform:translateY(-35%);} to{opacity:1; transform:translateY(0);}}
  @media (prefers-reduced-motion:reduce){ .lc-digit.lc-tick{animation:none;} }
  body.view-mode .launch-bar{display:none;}
  .launch-bar[hidden], [data-launch-before][hidden], [data-launch-after][hidden]{display:none !important;}

  /* ---------- Sticky mobile CTA ---------- */
  .sticky-cta{display:none;}
  @media (max-width:780px){
    .sticky-cta{
      display:block; position:fixed; bottom:0; left:0; right:0; z-index:60;
      background:var(--paper); border-top:1px solid var(--line-strong); padding:12px 18px;
      padding-bottom:calc(12px + env(safe-area-inset-bottom));
      opacity:0; visibility:hidden; pointer-events:none; transform:translateY(100%);
      transition:opacity .2s ease, transform .25s cubic-bezier(.22,.61,.36,1), visibility 0s linear .25s;
    }
    .sticky-cta.mobile-visible{
      opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
      transition-delay:0s;
    }
    /* Reserve room for the sticky bar ONLY where the bar exists. It is
       .home-only, so in view mode the space was 80px of nothing at the
       bottom of every subpage. */
    body:not(.view-mode){padding-bottom:calc(80px + env(safe-area-inset-bottom));}
    body.view-mode{padding-bottom:env(safe-area-inset-bottom);}
  }

  /* ---------- Side panel ---------- */
  .panel-overlay{position:fixed; inset:0; background:rgba(20,33,58,0.45); z-index:90; opacity:0; visibility:hidden; transition:opacity .25s ease;}
  .panel-overlay.open{opacity:1; visibility:visible;}
  .side-panel{
    position:fixed; top:0; right:0; bottom:0; z-index:91; width:430px; max-width:92vw;
    background:var(--paper); box-shadow:-8px 0 30px rgba(20,33,58,0.18);
    transform:translateX(100%); visibility:hidden;
    transition:transform .3s ease, visibility 0s linear .3s;
    display:flex; flex-direction:column; padding:24px 22px; overflow-y:auto;
  }
  .side-panel.open{transform:translateX(0); visibility:visible; transition-delay:0s;}
  .panel-head{display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line);}
  /* Slightly smaller than the header lockup so the panel head stays
     uncluttered next to the close button on a 320px screen. */
  .panel-logo{font-size:1rem;}
  .panel-close{width:34px; height:34px; border-radius:var(--radius); border:1px solid var(--line-strong); background:var(--paper); font-size:1.3rem; line-height:1; color:var(--ink); cursor:pointer;}

  /* ---------- Resources ---------- */
  .res-scope-note{margin-bottom:22px; padding:12px 14px; background:var(--paper-warm); border-radius:var(--radius); font-size:0.82rem; color:var(--ink-soft); max-width:none;}
  .res-controls{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-bottom:26px;}
  .res-search-wrap{position:relative; flex:1 1 260px; max-width:360px;}
  .res-search-wrap .search-icon{
    position:absolute; z-index:1; left:14px; top:50%; width:1.05rem; height:1.05rem;
    color:var(--gold-deep); transform:translateY(-50%); pointer-events:none;
  }
  .res-search{
    width:100%; padding:12px 14px 12px 40px; border:1px solid var(--line-strong);
    border-radius:24px; background:var(--paper); font-family:'Work Sans', sans-serif;
    font-size:0.9rem; color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease;
  }
  .res-search:focus{outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 3px var(--gold-tint);}
  .res-filters{display:flex; flex-wrap:wrap; gap:8px;}
  .res-filter{
    font-family:'IBM Plex Mono', monospace; font-size:0.74rem; font-weight:600;
    padding:9px 16px; min-height:40px; border-radius:20px;
    border:1px solid var(--line-strong); background:var(--paper);
    color:var(--ink-soft); cursor:pointer; transition:all .18s ease;
  }
  .res-filter:hover{border-color:var(--ink); color:var(--ink);}
  .res-filter.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}
  .res-count{margin-left:auto; font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--ink-faint); white-space:nowrap;}

  /* Capped at 3 columns (never 4+, however wide the screen), so each
     card stays generously wide rather than multiplying into narrow
     ones. max-width matches 3 cards' worth of width so the row itself
     centres as a block once there's no 4th column to fill. */
  .res-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:18px; max-width:1074px; margin:0 auto;}
  .res-card{
    flex:0 1 340px;
    border:1px solid var(--line); border-top:3px solid var(--res-accent, var(--line-strong));
    background:var(--paper); border-radius:var(--radius); padding:22px;
    display:flex; flex-direction:column; gap:14px; text-align:center;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .res-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
  .res-card.hidden{display:none;}
  /* Title stacked above the badge (never side-by-side), and the head
     keeps that two-line height even on cards with no "Coming soon"
     badge, so the box below it starts at the same height on every
     card, in or out of the same row. */
  .res-card-head{display:flex; flex-direction:column; align-items:center; gap:8px; min-height:calc(2.4rem + 18px);}
  .res-card-head h3{font-size:1.08rem;}
  .res-badge{
    display:inline-flex; align-items:center; white-space:nowrap;
    font-family:'IBM Plex Mono', monospace; font-size:0.62rem; font-weight:700;
    letter-spacing:0.04em; padding:4px 9px; border-radius:10px; text-transform:uppercase;
  }
  .res-badge-soon{background:var(--res-accent-tint); color:var(--res-accent); border:1px solid var(--res-accent);}
  .res-group{display:flex; flex-direction:column; gap:7px;}
  .res-group-label{font-family:'IBM Plex Mono', monospace; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.07em; font-weight:600; color:var(--ink-faint); display:block;}
  .res-links{display:flex; flex-wrap:wrap; justify-content:center; gap:7px;}
  .res-links a{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; font-weight:600; padding:6px 11px; border-radius:14px; border:1px solid var(--line-strong); color:var(--ink); background:var(--paper); transition:background .18s ease, color .18s ease, border-color .18s ease;}
  .res-links a:hover{background:var(--ink); border-color:var(--ink); color:var(--paper);}

  /* GuideMyGrades' own premium resource, distinct from the plain
     official exam-board pills below it. Shares one min-height with
     .res-qbt-soon below (both boxes sit in the same slot in every
     card) so the exam-board section beneath always starts at the
     same height, whether a card's neighbour has a short title
     ("AQA, Edexcel A & OCR") or a long one ("AQA GCSE Language,
     Paper 1 & Paper 2") — or no premium resource at all yet. */
  .res-premium, .res-qbt-soon{ min-height:82px; }
  .res-premium{
    display:flex; align-items:center; justify-content:center; gap:12px;
    padding:12px 14px; border-radius:var(--radius); border:1px solid var(--gold);
    background:var(--gold-tint); transition:transform .2s ease, box-shadow .2s ease;
  }
  .res-premium:hover{transform:translateY(-2px); box-shadow:var(--shadow-gold);}
  .res-premium-text{display:flex; flex-direction:column; align-items:center; gap:2px;}
  .res-premium-label{font-family:'IBM Plex Mono', monospace; font-size:0.62rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-deep);}
  .res-premium-title{font-family:'Work Sans', sans-serif; font-size:0.86rem; font-weight:600; color:var(--ink); line-height:1.3;}
  .res-premium .ui-icon{color:var(--gold-deep); flex:0 0 auto; transition:transform .2s ease;}
  .res-premium:hover .ui-icon{transform:translateX(3px);}

  /* ---- Subject cards, redesigned: a tinted header with a "periodic
     table" subject tile (booklet count in the corner), and the
     Questions by Topic link as a solid button in the subject's own
     colour, so it is obvious what to click. Every colour is derived
     from --res-accent, so a new subject only needs that variable. ---- */
  .res-grid{gap:20px;}
  .res-card{
    --rc-soft:color-mix(in srgb, var(--res-accent) 9%, white);
    --rc-line:color-mix(in srgb, var(--res-accent) 24%, white);
    --rc-deep:color-mix(in srgb, var(--res-accent) 72%, black);
    position:relative; overflow:hidden; text-align:left; gap:16px; padding:0 20px 20px;
    border:1px solid var(--rc-line); border-radius:18px; background:var(--paper);
    box-shadow:0 1px 0 var(--rc-line), 0 16px 30px -26px var(--res-accent);
  }
  .res-card:hover{transform:translateY(-5px); box-shadow:0 26px 44px -26px var(--res-accent); border-color:color-mix(in srgb, var(--res-accent) 45%, white);}
  .res-card-head{
    flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; min-height:0;
    margin:0 -20px; padding:20px; border-bottom:1px solid var(--rc-line);
    background:
      linear-gradient(120deg, var(--rc-soft) 0%, color-mix(in srgb, var(--res-accent) 3%, white) 70%);
  }
  .res-tile{
    position:relative; flex:none; width:60px; height:60px; border-radius:15px; display:grid; place-items:center; color:#fff;
    background:linear-gradient(140deg, color-mix(in srgb, var(--res-accent) 70%, white) 0%, var(--res-accent) 50%, var(--rc-deep) 100%);
    box-shadow:0 12px 20px -12px var(--res-accent), inset 0 1px 0 rgba(255,255,255,0.3);
    transform:rotate(-5deg); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .res-tile b{font-family:'Fraunces', serif; font-size:1.6rem; font-weight:700; letter-spacing:-0.02em; line-height:1;}
  .res-tile small{position:absolute; top:5px; left:7px; font-family:'IBM Plex Mono', monospace; font-size:0.58rem; font-weight:700; opacity:0.85;}
  .res-card:hover .res-tile{transform:rotate(0deg) scale(1.07);}
  .res-card-name{display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0;}
  .res-card-head h3{font-family:'Fraunces', serif; font-size:1.3rem; font-weight:600; line-height:1.15; color:var(--ink);}
  .res-badge{border-radius:999px; padding:3px 9px; font-size:0.6rem;}
  .res-badge-soon{color:var(--res-accent); background:var(--paper); border:1px solid var(--rc-line);}
  .res-badge-live{gap:6px; color:var(--green); background:var(--green-tint); border:1px solid rgba(30,122,68,0.3);}
  .res-badge-live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(30,122,68,0.18);}

  /* The main button */
  .res-card .res-premium{
    justify-content:space-between; gap:12px; padding:14px 14px 14px 18px; border:0; border-radius:14px; text-align:left;
    background:linear-gradient(135deg, var(--res-accent) 0%, var(--rc-deep) 100%);
    box-shadow:0 14px 24px -16px var(--res-accent), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .res-card .res-premium:hover{transform:translateY(-2px); box-shadow:0 18px 30px -14px var(--res-accent), inset 0 1px 0 rgba(255,255,255,0.18);}
  .res-card .res-premium-text{align-items:flex-start;}
  .res-card .res-premium-label{color:rgba(255,255,255,0.78);}
  .res-card .res-premium-title{font-size:0.92rem; font-weight:700; color:#fff;}
  .res-card .res-premium .ui-icon{width:34px; height:34px; padding:8px; border-radius:50%; color:var(--res-accent); background:#fff;
    box-shadow:0 4px 10px -4px rgba(0,0,0,0.4);}
  .res-card .res-premium:hover .ui-icon{transform:translateX(3px) scale(1.05);}
  .res-card .res-premium:focus-visible, .res-card .res-premium-multi-links a:focus-visible{outline:3px solid var(--res-accent); outline-offset:3px;}
  .res-card .res-premium-multi{
    align-items:flex-start; text-align:left; padding:14px 16px; border:0; border-radius:14px;
    background:linear-gradient(135deg, var(--res-accent) 0%, var(--rc-deep) 100%);
    box-shadow:0 14px 24px -16px var(--res-accent), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .res-card .res-premium-multi .res-premium-label{color:rgba(255,255,255,0.78);}
  .res-card .res-premium-multi .res-premium-title{color:#fff; font-weight:700;}
  .res-card .res-premium-multi-links{justify-content:flex-start; margin-top:6px;}
  .res-card .res-premium-multi-links a{display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border:0; font-weight:700; color:var(--res-accent); background:#fff;
    box-shadow:0 4px 10px -5px rgba(0,0,0,0.45);}
  .res-card .res-premium-multi-links a::after{content:"→"; font-weight:700;}
  .res-card .res-premium-multi-links a:hover{transform:translateY(-2px); box-shadow:0 8px 16px -8px rgba(0,0,0,0.5);}
  .res-card .res-premium-multi-links a[data-view="physics-examiners-edition"]{color:var(--ink); background:var(--gold-bright);}

  /* Official links: quieter, below a divider, clearly secondary */
  .res-card .res-group{padding-top:14px; border-top:1px dashed var(--rc-line);}
  .res-card .res-group-label{color:var(--ink-faint);}
  .res-card .res-links{justify-content:flex-start; gap:6px;}
  .res-card .res-links a{border-radius:999px; padding:5px 11px; font-size:0.7rem; border-color:var(--rc-line); background:var(--rc-soft);}
  .res-card .res-links a:hover{background:var(--res-accent); border-color:var(--res-accent); color:#fff;}
  .res-card .res-qbt-soon{justify-content:flex-start; border-radius:14px; border-color:var(--rc-line); background:var(--rc-soft); opacity:0.85;}
  @media (prefers-reduced-motion:reduce){ .res-tile, .res-card:hover .res-tile{transform:none;} }
  /* Everything in a subject card is centred: tile above the name, and
     the button text centred with a spacer balancing its arrow. */
  .res-card{text-align:center;}
  .res-card-head{flex-direction:column; justify-content:center; gap:12px;}
  .res-card-name{align-items:center;}
  .res-card .res-premium::before{content:""; flex:none; width:34px;}
  .res-card .res-premium-text{flex:1; align-items:center; text-align:center;}
  .res-card .res-premium-multi{align-items:center; text-align:center;}
  .res-card .res-premium-multi-links, .res-card .res-links, .res-card .res-qbt-soon{justify-content:center;}
  .res-card .fb-meta{align-items:center;}
  /* Hub: the free and premium heroes, one after the other, at the width
     they have on their own pages. */
  /* Hub: the two heroes as a pair of cards. Inside each, the copy sits
     above its sample pages instead of beside them. */
  .res-hero-pair{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; align-items:stretch;}
  #resources .res-hero-slot{display:flex; min-width:0;}
  #resources .res-hero-slot .xe-hero{flex:1; margin-top:0; grid-template-columns:minmax(0,1fr); align-content:start; gap:26px; padding:34px 32px 30px;}
  #resources .res-hero-slot .xe-hero h2{font-size:clamp(1.7rem,2.6vw,2.15rem);}
  #resources .res-hero-slot .xe-hero h2 span{display:inline;}
  #resources .res-hero-slot .xe-ticks{margin-top:16px; gap:8px; font-size:0.92rem;}
  #resources .res-hero-slot .xe-cta{margin-top:20px;}
  #resources .res-hero-slot .xe-preview{width:100%; max-width:480px; margin:0 auto;}
  @media (max-width:980px){
    .res-hero-pair{grid-template-columns:minmax(0,1fr); gap:28px;}
  }
  @media (max-width:480px){
    #resources .res-hero-slot .xe-hero{padding:26px 18px;}
  }
  .res-subjects-head{margin:72px 0 22px;}
  /* Combined Science spans three subject pages, so its card offers one
     link per science instead of a single premium link. */
  .res-premium-multi{
    min-height:82px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    padding:12px 14px; border-radius:var(--radius); border:1px solid var(--gold); background:var(--gold-tint); text-align:center;
  }
  .res-premium-multi-links{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:2px;}
  .res-premium-multi-links a{
    padding:5px 12px; border-radius:20px; border:1px solid var(--gold); background:var(--paper);
    font-family:'Work Sans', sans-serif; font-size:0.8rem; font-weight:600; color:var(--ink);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .res-premium-multi-links a:hover{transform:translateY(-2px); box-shadow:var(--shadow-gold);}
  .res-premium-multi-links a:focus-visible{outline:2px solid var(--gold-deep); outline-offset:2px;}
  /* All-subjects booklets page (/resources/free-booklets/). */
  #free-booklets .breadcrumbs{justify-content:center;}
  #free-booklets .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:680px;}
  #free-booklets .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  #free-booklets .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  #free-booklets .eqbt-facts{justify-content:center;}
  .fb-grid{margin-top:8px;}
  .fb-count{margin:0; font-size:0.9rem; color:var(--ink-soft);}
  .fb-count strong{font-family:'Fraunces', serif; font-size:1.5rem; font-weight:600; color:var(--res-accent, var(--ink));}
  .fb-meta{margin:0; display:flex; flex-direction:column; gap:3px; font-size:0.84rem; color:var(--ink-soft); line-height:1.45;}
  .fb-meta span + span{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.03em; color:var(--ink-faint);}
  .fb-card .res-premium, .fb-card .res-premium-multi{margin-top:auto;}

  /* Placeholder for subjects that don't have a Questions by Topic set
     yet — dashed border keeps it visually distinct from the real,
     solid-gold .res-premium box above, so it never reads as clickable
     or as an existing resource. Reads --res-accent from the enclosing
     .res-card, so it automatically matches that subject's own colour
     (English's plum, Maths' blue, Sociology's teal-green, and so on) —
     the icon inherits the same colour via currentColor. */
  .res-qbt-soon{
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:'IBM Plex Mono', monospace; font-size:0.68rem; font-weight:600;
    letter-spacing:0.03em; text-transform:uppercase; color:var(--res-accent, var(--ink-faint));
    padding:10px 14px; border-radius:var(--radius); border:1px dashed var(--res-accent, var(--line-strong));
    background:var(--paper-dim);
  }

  @media (max-width:560px){
    .res-search-wrap{max-width:none; flex-basis:100%;}
    .res-count{margin-left:0; flex-basis:100%;}
  }

  /* ---------- Breadcrumbs (subject and resource-type pages) ---------- */
  .breadcrumbs{
    display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:20px;
    font-family:'IBM Plex Mono', monospace; font-size:0.74rem; color:var(--ink-faint);
  }
  .breadcrumbs a{color:var(--ink-faint); transition:color .18s ease;}
  .breadcrumbs a:hover{color:var(--gold-deep);}
  .breadcrumbs .bc-sep{color:var(--line-strong);}
  .breadcrumbs .bc-current{color:var(--ink); font-weight:600;}

  /* ---------- Subject resource hub (e.g. #economics-resources) ---------- */
  #statBandEconRes .stat-row{grid-template-columns:repeat(3, 1fr);}
  .eqr-grid{max-width:420px; margin-top:8px;}
  .eqr-more-note{margin-top:28px; font-size:0.86rem; color:var(--ink-faint); max-width:64ch;}
  .eqr-more-note a{color:var(--ink-soft);}

  /* ---------- Policy documents (privacy notice + safeguarding) ---------- */
  .policy-doc{max-width:840px;}
  .policy-doc a{color:inherit;}
.doc-head{padding:56px 0 34px; border-bottom:1px solid var(--line);}

    .doc-head h2{font-size:clamp(2rem,4.4vw,2.9rem); margin-top:14px;}
    .doc-meta{margin-top:18px; font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--ink-faint); display:flex; gap:22px; flex-wrap:wrap;}
    .summary-box{margin:34px 0 0; padding:24px 26px; background:var(--gold-tint); border-left:3px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0;}
    .summary-box h2{font-size:1.15rem;}
    .summary-box ul{margin:12px 0 0 18px;}
    .summary-box li{padding:3px 0; font-size:0.94rem; color:var(--ink-soft);}
    .toc{margin:34px 0; padding:22px 26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-dim);}
    .toc h2{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-faint); font-weight:600;}
    .toc ol{margin:12px 0 0 20px;}
    .toc li{padding:3px 0; font-size:0.92rem;}
    .toc a{color:var(--ink-soft); text-decoration:none;}
    .toc a:hover{color:var(--ink); text-decoration:underline;}
    section.clause{padding:34px 0; border-bottom:1px solid var(--line);}
    section.clause h2{font-size:1.4rem; display:flex; gap:14px; align-items:baseline;}
    section.clause h2 .num{font-family:'IBM Plex Mono',monospace; font-size:0.85rem; color:var(--gold-deep); font-weight:600; flex-shrink:0;}
    section.clause h3{font-size:1.05rem; margin-top:22px;}
    section.clause p{margin-top:12px; color:var(--ink-soft); font-size:0.96rem;}
    section.clause ul{margin:12px 0 0 20px;}
    section.clause li{padding:4px 0; color:var(--ink-soft); font-size:0.94rem;}
    section.clause strong{color:var(--ink);}
    table{width:100%; border-collapse:collapse; margin-top:16px; font-size:0.9rem;}
    th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
    th{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); font-weight:600;}
    td{color:var(--ink-soft);}
    .fill{background:var(--gold-tint); color:var(--gold-deep); font-family:'IBM Plex Mono',monospace; font-size:0.92em; padding:1px 6px; border-radius:4px; font-weight:600;}
    .contact-box{margin-top:30px; padding:26px 28px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper-dim);}
    .contact-box h2{font-size:1.2rem;}
    .contact-box p{margin-top:10px; color:var(--ink-soft); font-size:0.94rem;}
    footer{padding:44px 0 60px; background:var(--paper-dim); border-top:1px solid var(--line); margin-top:40px;}
    .foot-bottom{margin-top:22px; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--ink-faint);}
  
    .statement{margin:34px 0 0; padding:26px 28px; background:var(--gold-tint); border-left:3px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0;}
    .statement h2{font-size:1.2rem;}
    .statement p{margin-top:12px; color:var(--ink-soft); font-size:0.96rem;}
    .urgent{margin:26px 0 0; padding:24px 26px; background:var(--alert-tint); border-left:3px solid var(--alert); border-radius:0 var(--radius) var(--radius) 0;}
    .urgent h2{font-size:1.15rem; color:var(--alert);}
    .urgent p{margin-top:10px; color:var(--ink-soft); font-size:0.94rem;}
    .urgent strong{color:var(--ink);}
    section.clause h3{font-size:1.05rem; margin-top:24px;}
    .steps{counter-reset:step; margin-top:18px;}
    .step{position:relative; padding:16px 0 16px 52px; border-bottom:1px solid var(--line);}
    .step:last-child{border-bottom:none;}
    .step::before{
      counter-increment:step; content:counter(step);
      position:absolute; left:0; top:16px; width:32px; height:32px; border-radius:50%;
      background:var(--ink); color:var(--paper); font-family:'IBM Plex Mono',monospace;
      font-size:0.8rem; font-weight:700; display:flex; align-items:center; justify-content:center;
    }
    .step h3{margin-top:0; font-size:1.05rem;}
    .step p{margin-top:6px;}
    .do-dont{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:18px;}
    @media (max-width:680px){ .do-dont{grid-template-columns:1fr;} }
    .dd-col{padding:20px 22px; border-radius:var(--radius); border:1px solid var(--line);}
    .dd-col.do{background:rgba(30,122,68,0.07); border-left:3px solid #1E7A44;}
    .dd-col.dont{background:var(--alert-tint); border-left:3px solid var(--alert);}
    .dd-col h3{margin-top:0; font-size:1rem;}
    .dd-col ul{margin:10px 0 0 18px;}
    .dd-col li{font-size:0.9rem; padding:4px 0;}
    .contacts-2col{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:20px;}
    @media (max-width:760px){ .contacts-2col{grid-template-columns:1fr;} }
    .contacts-col{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
    .contacts-col > h3{
      margin:0; padding:14px 18px; font-family:'IBM Plex Mono',monospace; font-size:0.78rem;
      text-transform:uppercase; letter-spacing:0.07em; font-weight:600; color:var(--paper);
      background:var(--ink);
    }
    .contacts-col.uae > h3{background:var(--econ);}
    .contacts-col table{margin-top:0;}
    .contacts-col th,.contacts-col td{padding:12px 16px;}
    .contacts-col tr:last-child th,.contacts-col tr:last-child td{border-bottom:none;}
    .contacts-col th{width:44%; color:var(--ink); font-family:'Work Sans',sans-serif; font-size:0.88rem; text-transform:none; letter-spacing:0; font-weight:600;}
    .contacts-col td{font-size:0.86rem;}


  /* ============================================================
     PHOTOGRAPHY BANDS
     Three large editorial photographs woven through the homepage
     scroll, one per subject, alternating image-left / image-right.
     Deliberately not a card: the photo runs to a generous size with
     its own wider wrap, a short piece of copy sits beside it, and
     nothing crops the laptop screen where the lesson content lives.
     ============================================================ */
  .photo-feature{overflow:hidden;}
  .pf-wrap{max-width:1240px; margin:0 auto; padding:0 28px;}
  .pf-grid{
    display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:clamp(32px,5vw,72px); align-items:center;
  }
  .pf-grid.pf-reverse{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);}
  .pf-reverse .pf-media{order:2;}
  .pf-reverse .pf-copy{order:1;}
  .pf-media{
    position:relative; isolation:isolate;
    border-radius:14px; overflow:hidden; box-shadow:var(--shadow-lg);
    aspect-ratio:4/5; background:var(--paper-dim);
  }
  .pf-media img{width:100%; height:100%; object-fit:cover; display:block;}
  /* A restrained cinemagraph treatment for the three subject photographs.
     The enlarged image drifts within its crop while a very soft change in
     light prevents the movement from feeling like a basic slideshow zoom. */
  .pf-media.motion-scene img{
    width:106%; height:106%; max-width:none; margin:-3%;
    transform:scale(1.01) translate3d(-0.8%,0.5%,0);
    transform-origin:48% 52%;
    animation:lessonSceneDrift 13s cubic-bezier(.45,.05,.55,.95) infinite alternate;
    will-change:transform;
  }
  .pf-media.motion-scene::before{
    content:""; position:absolute; z-index:1; inset:-12%; pointer-events:none;
    background:radial-gradient(circle at 28% 24%, rgba(255,249,226,.18), transparent 38%);
    opacity:.45; transform:translate3d(-2%,0,0);
    animation:lessonSceneLight 9s ease-in-out infinite alternate;
  }
  .pf-media.motion-scene::after{
    content:""; position:absolute; z-index:2; inset:0; pointer-events:none;
    background:linear-gradient(145deg, rgba(255,255,255,.025), transparent 45%, rgba(24,32,51,.035));
  }
  .pf-media.motion-scene--science img{
    transform-origin:54% 48%; animation-duration:14.5s; animation-delay:-4s;
    animation-direction:alternate-reverse;
  }
  .pf-media.motion-scene--science::before{animation-delay:-2.5s;}
  .pf-media.motion-scene--economics img{
    transform-origin:45% 55%; animation-duration:12s; animation-delay:-7s;
  }
  .pf-media.motion-scene--economics::before{animation-delay:-5s;}
  @keyframes lessonSceneDrift{
    0%{transform:scale(1.01) translate3d(-.8%,.5%,0);}
    48%{transform:scale(1.045) translate3d(.2%,-.35%,0);}
    100%{transform:scale(1.075) translate3d(.85%,-.8%,0);}
  }
  @keyframes lessonSceneLight{
    0%{opacity:.28; transform:translate3d(-2%,0,0) scale(1);}
    55%{opacity:.48;}
    100%{opacity:.34; transform:translate3d(2%,1%,0) scale(1.04);}
  }
  .pf-copy{max-width:42ch; text-align:left; justify-self:start;}
  .pf-copy .eyebrow{display:block; margin-bottom:14px;}
  /* The strongest claim on the page gets a little more weight than
     a standard eyebrow label. */
  .pf-eyebrow-strong{font-size:0.8rem; letter-spacing:0.13em; font-weight:700;}
  .pf-copy h3{font-size:clamp(1.35rem,2.4vw,1.7rem);}
  .pf-copy p{margin-top:14px; color:var(--ink-soft); font-size:1rem;}
  .pf-credit{
    display:flex; align-items:center; gap:9px; margin-top:22px;
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; font-weight:600;
    letter-spacing:0.04em; color:var(--ink-faint);
  }
  .pf-credit::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--pf-accent, var(--gold-ui)); flex-shrink:0;}
  @media (max-width:820px){
    .pf-grid, .pf-grid.pf-reverse{grid-template-columns:1fr; gap:24px;}
    .pf-reverse .pf-media, .pf-reverse .pf-copy{order:initial;}
    .pf-media{aspect-ratio:4/5; border-radius:12px;}
    .pf-copy{max-width:none;}
  }
  @media (prefers-reduced-motion:reduce){
    .photo-feature .reveal{opacity:1; transform:none;}
    .pf-media.motion-scene img{
      width:100%; height:100%; margin:0; transform:none; animation:none; will-change:auto;
    }
    .pf-media.motion-scene::before{animation:none; opacity:.32; transform:none;}
  }

  /* ---------- Teaching slideshow ----------
     The three subject photo-features used to be three stacked full-width
     sections, roughly three screens of homepage. They are now three
     slides in one container.

     One track translated by the measured offsetLeft of the target
     slide, dot navigation with role="tablist" (.uni-dot styling,
     reused from when the destinations row was a slideshow too),
     pause on hover and focus, and a reduced-motion fallback that
     stops auto-advance and leaves every slide reachable.

     pf-reverse is NOT applied here. Its whole purpose was to alternate
     image-left/image-right down a stack of three sections so the page
     did not read as a repeating template. In a slideshow only one slide
     is on screen at a time, so there is no stack to break up, and
     flipping the layout as slides advance would read as the component
     jumping rather than as deliberate rhythm. */
  .tf-band{
    background:var(--paper-dim);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    overflow:hidden; padding:clamp(40px,5vw,64px) 0;
  }
  .tf-shell{position:relative;}
  .tf-track{overflow:hidden;}
  .tf-set{
    display:flex; align-items:stretch; list-style:none; margin:0; padding:0;
    transition:transform .6s cubic-bezier(.22,.61,.36,1);
  }
  /* Each slide is exactly one viewport of the track. */
  .tf-slide{flex:0 0 100%; min-width:0; box-sizing:border-box; padding:0 4px;}
  /* Slides that are not current are hidden from assistive tech and from
     the tab order, so a keyboard user cannot tab into an off-screen
     slide's links. */
  .tf-slide[aria-hidden="true"]{visibility:hidden;}
  @media (prefers-reduced-motion:reduce){
    .tf-set{transition:none;}
    /* Nothing is auto-advanced and nothing slides; the track scrolls
       manually and every slide stays reachable and visible. */
    .tf-track{overflow-x:auto; scroll-snap-type:x proximity;}
    .tf-slide{scroll-snap-align:start;}
    .tf-slide[aria-hidden="true"]{visibility:visible;}
  }

  /* ---------- Lesson sequence (landing) ----------
     A single line of mono labels and arrows rather than six boxes:
     the shape of a lesson reads at a glance without adding another
     card grid to the page. */
  .teach-sequence{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:11px 7px; margin-top:28px;
    font-family:'IBM Plex Mono', monospace;
  }
  .teach-sequence span:not(.ts-arrow){
    font-size:0.92rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft);
  }
  .teach-sequence .ts-arrow{color:var(--line-strong); font-size:0.85rem;}
  .teach-sequence .ts-final{color:var(--gold-deep);}
  @media (max-width:600px){
    .teach-sequence{gap:8px 5px;}
    .teach-sequence span:not(.ts-arrow){font-size:0.78rem;}
  }
  .curric-callout{margin-top:44px; padding-top:32px; border-top:1px solid var(--line); max-width:64ch;}
  /* This section on the homepage holds nothing but this one callout —
     three lines, no heading art, no cards — so the standard section
     --band-y (56-96px top AND bottom) leaves it looking like an empty
     pause between the sections either side of it, which have far more
     in them. Giving it its own, tighter value keeps the visual weight
     of a section proportional to what's actually in it. */
  #how-we-teach-preview{--band-y:clamp(28px, 3.2vw, 44px);}
  .curric-callout h4{font-family:'Fraunces', serif; font-size:1.2rem; font-weight:500;}
  .curric-callout p{margin-top:10px; color:var(--ink-soft); font-size:0.94rem;}
  .curric-callout .text-link{margin-top:14px;}

  /* ---------- Nobody hides / first lesson ---------- */
  .mech-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:8px;}
  .mech-grid .mech-item{flex:1 1 240px; max-width:340px;}
  .mech-item{padding:22px 24px; border:1px solid var(--line); border-left:3px solid var(--physics); border-radius:0 var(--radius) var(--radius) 0; background:var(--paper);}
  .mech-item h4{font-family:'Fraunces',serif; font-size:1.05rem; font-weight:500;}
  .mech-item p{font-size:0.88rem; color:var(--ink-soft); margin-top:8px;}

  /* ---------- Testimonial carousel ----------
     One shared component for all subjects; only the top-border
     accent changes (plum for English, cobalt for Physics, copper
     for Economics), so they read as one system rather than
     different designs. */
  .testi-tabs{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px;}
  .testi-tab{
    font-family:'Work Sans', sans-serif; font-size:0.86rem; font-weight:600;
    padding:11px 20px; border-radius:20px; border:1px solid var(--line-strong);
    background:var(--paper); color:var(--ink-soft); cursor:pointer; transition:all .18s ease;
  }
  .testi-tab:hover{border-color:var(--ink); color:var(--ink);}
  .testi-tab.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}
  .testi-category{
    margin:22px auto 0; text-align:center; font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--gold-deep);
  }
  .testi-qual-line{margin:6px auto 0; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--ink-faint); letter-spacing:0.03em;}
  .testi-qual-line[hidden]{display:none;}

  .testi-rail-wrap{position:relative; margin-top:28px;}
  .testi-rail{
    display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:4px 4px 18px; scroll-behavior:smooth;
    scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
  }
  .testi-rail::-webkit-scrollbar{height:8px;}
  .testi-rail::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:4px;}
  .testi-rail::-webkit-scrollbar-track{background:transparent;}
  .testi-slide{
    flex:0 0 min(360px, 84vw); scroll-snap-align:start;
    border:1px solid var(--line); border-top:3px solid var(--line-strong);
    border-radius:var(--radius); padding:28px 26px; background:var(--paper);
    display:flex; flex-direction:column; text-align:left;
  }
  /* Subject accent is the identity signal; a grade-jump entry is
     already marked distinctly by its gold .grade-tag pill, so it no
     longer also overrides the border colour. */
  .testi-slide.subject-english{border-top-color:var(--subj-english);}
  .testi-slide.subject-physics{border-top-color:var(--sci-physics);}
  .testi-slide.subject-economics{border-top-color:var(--subj-economics);}
  /* Clamped by default so every slide in the row settles to a similar
     height; a "Read more" toggle removes the clamp for the genuinely
     long quotes rather than silently cutting them off. */
  .testi-slide .quote{
    font-family:'Fraunces',serif; font-style:italic; font-size:1.05rem; line-height:1.65; color:var(--ink);
    display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden;
    /* A multi-paragraph testimonial carries \n\n between paragraphs.
       Without pre-line those breaks collapse and three paragraphs run
       together as one block. Single-paragraph quotes are unaffected. */
    white-space:pre-line;
  }
  .testi-slide.is-expanded .quote{-webkit-line-clamp:unset; overflow:visible;}
  .testi-readmore{
    align-self:flex-start; margin-top:10px; padding:0; border:0; background:none; cursor:pointer;
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; font-weight:700; letter-spacing:0.04em;
    color:var(--gold-deep); text-transform:uppercase; text-decoration:underline; text-underline-offset:3px;
  }
  .testi-readmore[hidden]{display:none;}
  .testi-slide .attribution{margin-top:auto; padding-top:20px; font-family:'IBM Plex Mono',monospace; font-size:0.76rem; color:var(--ink); font-weight:700;}
  .testi-slide .testi-role, .testi-slide .testi-teacher{display:block; margin-top:4px; color:var(--ink-faint); font-size:0.7rem; font-weight:400;}
  /* Parent voice. Deliberately not a grade-style gold pill: it is not an
     achievement, it identifies who is speaking. Quiet outline, same
     mono scale as .testi-context which it sits in place of. */
  .testi-slide .testi-voice{
    display:inline-block; margin-bottom:12px; font-family:'IBM Plex Mono',monospace;
    font-size:0.66rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
    color:var(--ink-soft); border:1px solid var(--line-strong);
    border-radius:12px; padding:4px 10px; background:var(--paper-dim);
  }
  .testi-slide.is-parent .testi-voice + .grade-tag{margin-left:8px;}
  .testi-slide .grade-tag{
    display:inline-block; margin-bottom:14px; font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem; font-weight:700; padding:4px 10px; border-radius:12px;
    background:var(--gold-tint); color:var(--gold-deep); letter-spacing:0.04em;
  }
  .testi-slide .testi-context{
    display:block; margin-bottom:14px; font-family:'IBM Plex Mono',monospace;
    font-size:0.74rem; font-weight:700; color:var(--ink-faint); letter-spacing:0.05em; text-transform:uppercase;
  }
  .testi-nav{display:flex; justify-content:center; gap:10px; align-items:center; margin-top:10px;}
  .testi-btn{
    width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong);
    background:var(--paper); color:var(--ink); cursor:pointer; font-size:1rem; line-height:1;
  }
  .testi-btn:hover{border-color:var(--ink);}
  .testi-btn:disabled{opacity:0.35; cursor:default;}
  .testi-count{font-family:'IBM Plex Mono',monospace; font-size:0.8rem; color:var(--ink-faint); margin-left:6px;}
  @media (prefers-reduced-motion: reduce){ .testi-rail{scroll-behavior:auto;} }

  /* ---------- Platform icons ---------- */
  .eco-card h3{display:flex; align-items:center; gap:10px;}
  .platform-icon{color:var(--gold-deep); flex-shrink:0;}

  /* ---------- Exam board badges ----------
     Deliberately a plain monogram badge rather than the boards' own
     logos, see the developer note near BOARD_PATTERN in the script. */
  .board-chip{
    display:inline-flex; align-items:center; font-family:'IBM Plex Mono', monospace;
    font-weight:700; font-size:0.85em; padding:2px 8px; border-radius:10px;
    background:var(--paper-dim); border:1px solid var(--line-strong); color:var(--ink);
    white-space:nowrap; letter-spacing:0.02em;
  }

  /* ---------- Reveal ---------- */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);}

  /* ============================================================
     MOTION & POLISH
     Every animation below is disabled under
     prefers-reduced-motion (see the block further down), so the
     site stays usable for anyone who finds movement difficult.
     ============================================================ */
  @keyframes hudhaFadeUp{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;}}
  @keyframes hudhaFadeIn{from{opacity:0;} to{opacity:1;}}
  @keyframes hudhaDrawLine{from{transform:scaleX(0);} to{transform:scaleX(1);}}
  @keyframes hudhaDrawLineCentered{from{transform:translateX(-50%) scaleX(0);} to{transform:translateX(-50%) scaleX(1);}}
  @keyframes hudhaFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}
  @keyframes hudhaShimmer{0%{background-position:-180% 0;} 100%{background-position:180% 0;}}

  /* Hero enters in sequence rather than all at once */
  .hero .eyebrow{animation:hudhaFadeUp .7s cubic-bezier(.22,.61,.36,1) both;}
  .hero h1{animation:hudhaFadeUp .8s cubic-bezier(.22,.61,.36,1) .08s both;}
  .hero .lead{animation:hudhaFadeUp .8s cubic-bezier(.22,.61,.36,1) .18s both;}
  .hero .hero-ctas{animation:hudhaFadeUp .8s cubic-bezier(.22,.61,.36,1) .28s both;}
  .hero .hero-proof-line{animation:hudhaFadeIn 1s ease .42s both;}

  /* Gold rule under section headings draws itself in */
  .section-head .eyebrow{position:relative; display:inline-block;}
  .section-head .eyebrow::after{
    content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px;
    background:var(--gold); transform-origin:left center; transform:scaleX(0);
  }
  .section-head.in .eyebrow::after,
  .reveal.in .eyebrow::after{animation:hudhaDrawLine .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}

  /* Cards lift on hover with a soft, non-gaudy shadow */
  .preview-card, .team-preview-card, .acal-card,
  .curric-key, .mech-item{
    transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
  }
  .team-preview-card:hover,
  .curric-key:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 34px -18px rgba(24,32,51,0.28);
  }
  .acal-card:hover{transform:translateX(3px);}

  /* Buttons get a subtle sheen and press feedback */
  .btn{position:relative; overflow:hidden;}
  .btn::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
    background-size:220% 100%; background-position:-180% 0; opacity:0;
  }
  .btn:hover::after{opacity:1; animation:hudhaShimmer .9s ease;}
  .btn:active{transform:translateY(1px);}

  /* Nav links grow an underline from the left */
  nav.links > a, .nav-dropdown-trigger{position:relative;}
  nav.links > a::after, .nav-dropdown-trigger::after{
    content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%;
    background:var(--gold); transform:scaleX(0); transform-origin:left center;
    transition:transform .28s cubic-bezier(.22,.61,.36,1);
  }
  nav.links > a:hover::after, .nav-dropdown:hover .nav-dropdown-trigger::after,
  nav.links > a.nav-active::after{transform:scaleX(1);}

  /* Big numbers breathe very slightly */
  .rp-num{display:block; animation:hudhaFloat 6s ease-in-out infinite;}
  .rp-stat:nth-child(2) .rp-num{animation-delay:.9s;}
  .rp-stat:nth-child(3) .rp-num{animation-delay:1.8s;}

  /* The deepest ink is reserved for these two moments — results is
     the site's major proof point, final-cta is the last word before
     signup — everywhere else uses paper, stone or soft midnight. A
     whisper of gold at the top edge marks the transition as
     deliberate rather than an abrupt colour cut. */
  .results-preview-band, .final-cta{border-top:1px solid rgba(199,154,59,0.32);}
  .results-preview-band{
    background:
      radial-gradient(900px 420px at 15% -10%, rgba(199,154,59,0.16), transparent 62%),
      radial-gradient(700px 380px at 95% 110%, rgba(44,90,160,0.14), transparent 60%),
      var(--ink);
  }
  .final-cta{
    background:
      radial-gradient(760px 360px at 80% -20%, rgba(199,154,59,0.18), transparent 60%),
      var(--ink);
  }
  .value-chip{transition:border-color .25s ease, background .25s ease, transform .25s ease;}
  .value-chip:hover{border-color:var(--gold-deep); background:var(--gold-tint); transform:translateY(-2px);}

  /* Accordion chevrons rotate smoothly */
  .faq-item summary{transition:color .2s ease;}
  .faq-item[open] > summary{color:var(--gold-deep);}
  .reveal.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
    *, *::before, *::after{animation:none !important; transition:none !important;}
    .section-head .eyebrow::after{transform:scaleX(1);}
    .pricing-focal .section-head .eyebrow::after{transform:translateX(-50%) scaleX(1);}
    .team-preview-card:hover,
    .curric-key:hover, .acal-card:hover,
    .value-chip:hover{transform:none; box-shadow:none;}
    .price-focal-card:hover{transform:none; box-shadow:var(--shadow-md);}
    .pfc-lesson-hook::after{display:none;}
    html{scroll-behavior:auto;}
    .side-panel{transition:none;}
    .cs-fill{transition:none;}
  }

  /* ============================================================
     NAVIGATION REWORK — dedicated views, mobile accordion,
     homepage preview cards
     ============================================================ */

  /* ---------- Dedicated views (replaces the old tab-panel system) ---------- */
  .view-panel{display:none;}
  /* Shown only on dedicated views, the mirror image of .home-only. */
  .view-only{display:none;}
  body.view-mode .view-only{display:block;}
  .subfoot{
    padding:36px 0 30px; border-top:1px solid var(--line); background:var(--paper-dim);
  }
  .subfoot-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px 28px; flex-wrap:wrap;
  }
  .subfoot-links{display:flex; flex-wrap:wrap; gap:10px 22px; font-size:0.87rem;}
  .subfoot-links a{color:var(--ink-soft);}
  .subfoot-links a:hover{color:var(--ink); text-decoration:underline;}
  .subfoot-contacts{
    margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px 24px;
  }
  .subfoot-contact{min-width:0; display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:0.82rem;}
  .subfoot-contact-copy{min-width:0;}
  .subfoot-contact strong{display:block; color:var(--ink); font-size:0.8rem;}
  .subfoot-contact a{overflow-wrap:anywhere; border-bottom:1px solid var(--line-strong);}
  .subfoot-bottom{
    margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
    font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--ink-faint);
  }
  @media (max-width:700px){
    .subfoot-row{flex-direction:column; align-items:flex-start; gap:14px;}
    .subfoot-links{gap:10px 18px;}
    .subfoot-contacts{grid-template-columns:1fr;}
    .subfoot, .subfoot *{text-align:left;}
  }
  .view-panel.active{display:block; padding:64px 0;}
  body.view-mode .home-only{display:none;}
  .view-local-nav{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 clamp(26px, 3vw, 38px);}
  .view-local-nav a{
    font-family:'Work Sans', sans-serif; font-size:0.84rem; font-weight:600;
    padding:9px 14px; border-radius:8px; border:1px solid var(--line-strong);
    color:var(--ink-soft); background:var(--paper);
  }
  .view-local-nav a:hover, .view-local-nav a.active-local{border-color:var(--gold-deep); color:var(--ink);}
  /* The free teaching library is the strongest proof point in this
     group, so it keeps the same toggle shape but receives a clear play
     cue and video-count label. */
  .view-local-nav a.watch-local-link{
    display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
    border-color:var(--gold-deep); color:var(--paper);
    background:linear-gradient(145deg,#273149,var(--ink));
    box-shadow:0 7px 18px rgba(24,32,51,.14);
  }
  .view-local-nav a.watch-local-link::before{
    content:"\25B6"; display:inline-flex; align-items:center; justify-content:center;
    width:20px; height:20px; border-radius:50%; flex:0 0 auto;
    background:var(--gold); color:var(--ink); font-size:.55rem; line-height:1;
  }
  .view-local-nav a.watch-local-link::after{
    content:"132 FREE VIDEOS"; margin-left:3px; padding-left:10px;
    border-left:1px solid rgba(255,255,255,.25); color:var(--gold);
    font-size:.59rem; letter-spacing:.055em; white-space:nowrap;
  }
  .view-local-nav a.watch-local-link:hover,
  .view-local-nav a.watch-local-link.active-local{
    border-color:var(--gold); color:var(--paper); transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(24,32,51,.2);
  }
  .watch-teach-view .view-local-nav{justify-content:center;}

  @media (max-width:560px){
    .wrap{padding-left:20px; padding-right:20px;}
    .view-panel.active{padding:36px 0;}
    .view-local-nav{
      flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-inline:contain;
      justify-content:flex-start !important;
      margin:4px 0 28px; padding-bottom:6px; scrollbar-width:thin;
      -webkit-overflow-scrolling:touch;
    }
    .view-local-nav a{
      flex:0 0 auto; min-height:44px; display:inline-flex; align-items:center;
    }
    .view-local-nav a.watch-local-link::after{content:"132 VIDEOS"; padding-left:8px;}
    .tab-back-btn, .tz-toggle-btn, .cur-toggle-btn{min-height:44px;}
  }

  /* ---------- Active top-level nav state ---------- */
  nav.links a.nav-active{color:var(--ink); font-weight:700;}
  .nav-dropdown.nav-active > .nav-dropdown-trigger{color:var(--ink); font-weight:700;}

  /* ---------- Mobile accordion nav ---------- */
  .mobnav-group{border-bottom:1px solid var(--line);}
  .mobnav-trigger{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:14px 4px; background:none; border:none; cursor:pointer; text-align:left;
    font-family:'Fraunces', serif; font-size:1.05rem; color:var(--ink);
  }
  .mobnav-trigger .mobnav-chevron{
    font-family:'IBM Plex Mono', monospace; font-size:1.1rem; color:var(--gold-deep);
    transition:transform .2s ease; flex-shrink:0;
  }
  .mobnav-trigger[aria-expanded="true"] .mobnav-chevron{transform:rotate(45deg);}
  .mobnav-sub{display:flex; flex-direction:column; max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .mobnav-group.open .mobnav-sub{max-height:280px; padding-bottom:8px;}
  .mobnav-sub a{
    padding:10px 4px 10px 18px; border-left:2px solid var(--line-strong);
    margin-left:6px; font-family:'Work Sans', sans-serif; font-size:0.92rem;
    color:var(--ink-soft); font-weight:500;
  }
  .mobnav-sub a:hover{color:var(--ink); border-left-color:var(--gold);}
  /* Marks which About Us subsection is currently open — same role as
     .about-subnav-active in the desktop dropdown. */
  .mobnav-sub a.about-subnav-active{color:var(--ink); font-weight:700; border-left-color:var(--gold);}
  .mobnav-price{margin-left:6px; padding:1px 7px; border-radius:999px; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; font-weight:700; color:var(--ink); background:var(--gold-bright);}
  .mobnav-link{
    display:block; padding:14px 4px; border-bottom:1px solid var(--line);
    font-family:'Fraunces', serif; font-size:1.05rem; color:var(--ink);
  }
  .mobnav-link:hover{color:var(--physics);}
  .mobnav-link.mobnav-active{color:var(--gold-deep); font-weight:600;}
  .mobnav-link.mobnav-highlight{color:var(--gold-deep); font-weight:700;}
  .mobnav-trigger.mobnav-highlight{color:var(--gold-deep); font-weight:700;}
  .mobnav-signup{
    display:block; margin-top:16px; padding:15px; text-align:center; border-radius:var(--radius);
    background:var(--gold); color:var(--ink); font-family:'IBM Plex Mono', monospace;
    font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  }
  .mobnav-resources-toggle{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:12px 4px; background:none; border:none; border-top:1px solid var(--line);
    margin-top:16px; cursor:pointer; font-family:'IBM Plex Mono', monospace;
    font-size:0.76rem; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em;
  }
  .mobnav-resources-toggle .mobnav-chevron{font-family:'IBM Plex Mono', monospace; color:var(--gold-deep); transition:transform .2s ease;}
  .mobnav-resources-toggle[aria-expanded="true"] .mobnav-chevron{transform:rotate(45deg);}
  /* ---------- Resource hub, as a view ----------
     Full-width like every other view: the card grid wants the same
     1140px measure course-grid gets on /subjects/, not a narrow
     reading column. */

  /* ---------- Programme practice and enrolment ---------- */
  .ws-block{
    margin-top:38px; padding:clamp(22px,3vw,30px);
    border:1px solid var(--line-strong); border-radius:var(--radius);
    background:var(--paper-dim);
  }
  .ws-head h3{font-family:'Fraunces', serif; font-size:1.35rem; font-weight:600; color:var(--ink); margin-top:10px;}
  .ws-head p{margin-top:10px; font-size:0.94rem; color:var(--ink-soft); line-height:1.6; max-width:62ch;}
  .ws-status{
    display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:0.68rem;
    font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
    color:var(--gold-deep); background:var(--gold-tint);
    border:1px solid var(--gold); border-radius:12px; padding:5px 12px;
  }
  .ws-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
  .ws-tab{
    font-family:'IBM Plex Mono', monospace; font-size:0.74rem; font-weight:600;
    padding:10px 16px; min-height:44px; border-radius:20px;
    border:1px solid var(--line-strong); background:var(--paper);
    color:var(--ink-soft); cursor:pointer; transition:all .18s ease;
  }
  .ws-tab:hover{border-color:var(--ink); color:var(--ink);}
  .ws-tab.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}
  .ws-tab:focus-visible{outline:2px solid var(--gold-ui); outline-offset:2px;}
  .ws-panels{margin-top:18px;}
  .ws-panel{display:none; padding:16px 18px; background:var(--paper);
    border-left:3px solid var(--ws-accent, var(--gold)); border-radius:0 var(--radius) var(--radius) 0;}
  .ws-panel.active{display:block;}
  .ws-panel p{font-size:0.92rem; color:var(--ink); line-height:1.65;}
  .ws-levels{
    margin-top:9px; font-family:'IBM Plex Mono', monospace; font-size:0.68rem;
    letter-spacing:0.04em; color:var(--ink-faint) !important;
  }
  .ws-foot{margin-top:18px; font-size:0.8rem; color:var(--ink-faint); line-height:1.6; max-width:66ch;}
  .ws-block .btn{margin-top:16px;}

  /* Meet-the-teacher enrolment block: deep indigo with coral light,
     so it reads apart from the green free and navy paid cards above. */
  .ws-enrol{position:relative; overflow:hidden; margin-top:56px; padding:clamp(26px,4.5vw,52px); border:0; border-radius:22px; color:var(--paper);
    background:
      radial-gradient(circle at 96% 0%, rgba(255,138,101,0.34), transparent 40%),
      radial-gradient(circle at 0% 100%, rgba(226,189,106,0.16), transparent 44%),
      linear-gradient(150deg, #3a2f8f 0%, #251d63 52%, #150f3d 100%);
    box-shadow:0 30px 60px -30px rgba(21,15,61,0.7);}
  .ws-enrol .ws-status{color:#ffc4ad; background:rgba(255,138,101,0.12); border-color:rgba(255,160,130,0.5); border-radius:999px;}
  .ws-enrol .ws-head h3{margin-top:16px; max-width:26ch; font-size:clamp(1.9rem,3.8vw,2.8rem); line-height:1.08; color:var(--paper); letter-spacing:-0.01em;}
  .ws-enrol .ws-head h3 span{display:block; font-style:italic; color:#ffb08f;}
  .ws-enrol .ws-head p{margin-top:16px; font-size:1rem; color:rgba(255,255,255,0.82); max-width:60ch;}
  .ws-trust{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px;}
  .ws-trust li{position:relative; padding-left:24px; font-size:0.86rem; font-weight:600; color:var(--paper);}
  .ws-trust li::before{content:"✓"; position:absolute; left:0; top:1px; width:17px; height:17px; border-radius:50%; display:grid; place-items:center;
    font-size:0.62rem; font-weight:800; color:#251d63; background:#ffb08f;}

  .ws-enrol .ws-tabs{margin-top:30px; gap:10px;}
  .ws-enrol .ws-tab{display:inline-flex; align-items:center; gap:10px; min-height:0; padding:6px 16px 6px 6px; border-radius:999px; text-align:left;
    font-family:inherit; color:var(--paper); background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2);}
  .ws-enrol .ws-tab img{flex:none; width:36px; height:36px; border-radius:50%; object-fit:cover; background:var(--paper); border:2px solid rgba(255,255,255,0.5);}
  .ws-enrol .ws-tab span{display:flex; flex-direction:column; line-height:1.15;}
  .ws-enrol .ws-tab b{font-size:0.88rem; font-weight:700;}
  .ws-enrol .ws-tab small{font-family:'IBM Plex Mono', monospace; font-size:0.64rem; letter-spacing:0.02em; opacity:0.75;}
  .ws-enrol .ws-tab:hover{background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.45); color:var(--paper);}
  .ws-enrol .ws-tab.active{background:var(--paper); border-color:var(--paper); color:var(--ink); box-shadow:0 10px 24px -12px rgba(0,0,0,0.6);}
  .ws-enrol .ws-tab.active img{border-color:var(--ws-accent);}
  .ws-enrol .ws-tab:focus-visible{outline:3px solid #ffb08f; outline-offset:3px;}

  .ws-enrol .ws-panels{margin-top:18px;}
  .ws-enrol .ws-panel{border:0; border-top:5px solid var(--ws-accent); border-radius:18px; padding:clamp(20px,3vw,32px); color:var(--ink);
    box-shadow:0 26px 50px -24px rgba(0,0,0,0.6);}
  .ws-enrol .ws-panel.active{display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(20px,3.5vw,40px); align-items:center;
    animation:wsIn .35s ease both;}
  @keyframes wsIn{from{opacity:0; transform:translateY(8px);}}
  .ws-teacher{text-align:center;}
  .ws-photo{display:block; width:128px; height:128px; margin:0 auto; border-radius:50%; object-fit:cover; background:var(--paper-dim);
    border:4px solid var(--paper); box-shadow:0 0 0 4px var(--ws-accent), 0 18px 30px -14px rgba(0,0,0,0.5);}
  .ws-enrol .ws-panel .ws-name{margin-top:16px; font-family:'Fraunces', serif; font-size:1.3rem; font-weight:600; line-height:1.2;}
  .ws-enrol .ws-panel .ws-role{margin-top:4px; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--ws-accent);}
  .ws-enrol .ws-panel .ws-live{display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:5px 12px; border-radius:999px;
    font-size:0.76rem; font-weight:700; color:#8a3b1f; background:#ffe6dc;}
  .ws-live::before{content:""; width:8px; height:8px; border-radius:50%; background:#ff8a65;}
  .ws-enrol .ws-panel .ws-live.is-live{color:var(--green); background:var(--green-tint);}
  .ws-live.is-live::before{background:var(--green); box-shadow:0 0 0 3px rgba(30,122,68,0.2);}
  .ws-enrol .ws-panel .ws-hook{font-family:'Fraunces', serif; font-size:clamp(1.2rem,2vw,1.45rem); font-weight:600; line-height:1.3; color:var(--ink); margin-bottom:10px;}
  .ws-enrol .ws-panel p{color:var(--ink-soft);}
  .ws-creds{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
  .ws-creds li{padding:6px 12px; border-radius:999px; font-size:0.8rem; font-weight:700; color:var(--ws-accent);
    background:color-mix(in srgb, var(--ws-accent) 11%, white); border:1px solid color-mix(in srgb, var(--ws-accent) 28%, white);}
  .ws-enrol .ws-levels{margin-top:14px;}
  .ws-meet{margin-top:16px; display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--ink);
    text-decoration:underline; text-decoration-color:var(--ws-accent); text-decoration-thickness:2px; text-underline-offset:5px;}
  .ws-meet .ui-icon{width:18px; height:18px; transition:transform .2s ease;}
  .ws-meet:hover .ui-icon{transform:translateX(3px);}

  .ws-action{margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px;}
  .ws-enrol .ws-action .btn{margin-top:0; padding:16px 30px; font-size:1rem; color:#1d1447; background:#ff8a65; border-color:#ff8a65;
    box-shadow:0 14px 28px -12px rgba(255,138,101,0.7);}
  .ws-enrol .ws-action .btn:hover{background:var(--paper); border-color:var(--paper); color:#1d1447;}
  .ws-enrol .ws-foot{flex:1 1 320px; margin:0; color:rgba(255,255,255,0.62);}
  @media (max-width:720px){
    .ws-enrol .ws-panel.active{grid-template-columns:1fr;}
    .ws-enrol .ws-tabs{flex-wrap:nowrap; overflow-x:auto; margin-left:-4px; margin-right:-4px; padding:4px; scrollbar-width:none;}
    .ws-enrol .ws-tabs::-webkit-scrollbar{display:none;}
    .ws-enrol .ws-tab{flex:none;}
    .ws-enrol .ws-action .btn{width:100%; justify-content:center; text-align:center;}
  }
  @media (max-width:480px){ .ws-enrol{border-radius:16px; padding:26px 18px;} }

  /* ---------- Economics Questions by Topic ---------- */
  /* The board/qualification picker is shared by every Questions by
     Topic page (see "Questions by Topic picker" below), so only the
     layout and topic cards need styles here. */
  /* This page reads better as one narrower, centred column than the
     site's usual full 1140px wrap — the intro text, fact chips and
     picker all sit centred above the topic grids, which stay
     in their normal left-to-right card layout underneath. */
  #economics-questions-by-topic .wrap{max-width:880px;}
  #economics-questions-by-topic .breadcrumbs{justify-content:center;}
  #economics-questions-by-topic .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:640px;}
  #economics-questions-by-topic .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  #economics-questions-by-topic .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  #economics-questions-by-topic .eqbt-facts{justify-content:center;}
  #economics-questions-by-topic .eqbt-board-intro,
  #economics-questions-by-topic .eqbt-index-link{margin-left:auto; margin-right:auto; text-align:center;}
  #economics-questions-by-topic .eqbt-theme-head{text-align:center; display:block;}

  /* Physics Questions by Topic reuses every .eqbt-* class above (they were
     never economics-specific, just first built there) with the same
     narrower centred layout. */
  #physics-questions-by-topic .wrap{max-width:880px;}
  #physics-questions-by-topic .breadcrumbs{justify-content:center;}
  #physics-questions-by-topic .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:640px;}
  #physics-questions-by-topic .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  #physics-questions-by-topic .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  #physics-questions-by-topic .eqbt-facts{justify-content:center;}
  #physics-questions-by-topic .eqbt-board-intro,
  #physics-questions-by-topic .eqbt-index-link{margin-left:auto; margin-right:auto; text-align:center;}
  #physics-questions-by-topic .eqbt-theme-head{text-align:center; display:block;}

  /* Chemistry, Maths and English Questions by Topic reuse the same
     .eqbt-* classes and centred layout as Physics above. */
  #chemistry-questions-by-topic .wrap{max-width:880px;}
  #chemistry-questions-by-topic .breadcrumbs{justify-content:center;}
  #chemistry-questions-by-topic .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:640px;}
  #chemistry-questions-by-topic .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  #chemistry-questions-by-topic .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  #chemistry-questions-by-topic .eqbt-facts{justify-content:center;}
  #chemistry-questions-by-topic .eqbt-board-intro,
  #chemistry-questions-by-topic .eqbt-index-link{margin-left:auto; margin-right:auto; text-align:center;}
  #chemistry-questions-by-topic .eqbt-theme-head{text-align:center; display:block;}

  #maths-questions-by-topic .wrap{max-width:880px;}
  #maths-questions-by-topic .breadcrumbs{justify-content:center;}
  #maths-questions-by-topic .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:640px;}
  #maths-questions-by-topic .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  #maths-questions-by-topic .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  #maths-questions-by-topic .eqbt-facts{justify-content:center;}
  #maths-questions-by-topic .eqbt-board-intro,
  #maths-questions-by-topic .eqbt-index-link{margin-left:auto; margin-right:auto; text-align:center;}
  #maths-questions-by-topic .eqbt-theme-head{text-align:center; display:block;}

  #further-maths-questions-by-topic .wrap{max-width:880px;}
  #further-maths-questions-by-topic .breadcrumbs{justify-content:center;}
  #further-maths-questions-by-topic .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:640px;}
  #further-maths-questions-by-topic .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  #further-maths-questions-by-topic .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  #further-maths-questions-by-topic .eqbt-facts{justify-content:center;}
  #further-maths-questions-by-topic .eqbt-board-intro,
  #further-maths-questions-by-topic .eqbt-index-link{margin-left:auto; margin-right:auto; text-align:center;}
  #further-maths-questions-by-topic .eqbt-theme-head{text-align:center; display:block;}

  #english-questions-by-topic .wrap{max-width:880px;}
  #english-questions-by-topic .breadcrumbs{justify-content:center;}
  #english-questions-by-topic .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:640px;}
  #english-questions-by-topic .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  #english-questions-by-topic .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  #english-questions-by-topic .eqbt-facts{justify-content:center;}
  #english-questions-by-topic .eqbt-board-intro,
  #english-questions-by-topic .eqbt-index-link{margin-left:auto; margin-right:auto; text-align:center;}
  #english-questions-by-topic .eqbt-theme-head{text-align:center; display:block;}

  #biology-questions-by-topic .wrap{max-width:880px;}
  #biology-questions-by-topic .breadcrumbs{justify-content:center;}
  #biology-questions-by-topic .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:640px;}
  #biology-questions-by-topic .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  #biology-questions-by-topic .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  #biology-questions-by-topic .eqbt-facts{justify-content:center;}
  #biology-questions-by-topic .eqbt-board-intro,
  #biology-questions-by-topic .eqbt-index-link{margin-left:auto; margin-right:auto; text-align:center;}
  #biology-questions-by-topic .eqbt-theme-head{text-align:center; display:block;}

  #psychology-questions-by-topic .wrap{max-width:880px;}
  #psychology-questions-by-topic .breadcrumbs{justify-content:center;}
  #psychology-questions-by-topic .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:640px;}
  #psychology-questions-by-topic .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  #psychology-questions-by-topic .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  #psychology-questions-by-topic .eqbt-facts{justify-content:center;}
  #psychology-questions-by-topic .eqbt-board-intro,
  #psychology-questions-by-topic .eqbt-index-link{margin-left:auto; margin-right:auto; text-align:center;}
  #psychology-questions-by-topic .eqbt-theme-head{text-align:center; display:block;}

  #computer-science-questions-by-topic .wrap{max-width:880px;}
  #computer-science-questions-by-topic .breadcrumbs{justify-content:center;}
  #computer-science-questions-by-topic .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:640px;}
  #computer-science-questions-by-topic .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  #computer-science-questions-by-topic .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  #computer-science-questions-by-topic .eqbt-facts{justify-content:center;}
  #computer-science-questions-by-topic .eqbt-board-intro,
  #computer-science-questions-by-topic .eqbt-index-link{margin-left:auto; margin-right:auto; text-align:center;}
  #computer-science-questions-by-topic .eqbt-theme-head{text-align:center; display:block;}

  #geography-questions-by-topic .wrap{max-width:880px;}
  #geography-questions-by-topic .breadcrumbs{justify-content:center;}
  #geography-questions-by-topic .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:640px;}
  #geography-questions-by-topic .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  #geography-questions-by-topic .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  #geography-questions-by-topic .eqbt-facts{justify-content:center;}
  #geography-questions-by-topic .eqbt-board-intro,
  #geography-questions-by-topic .eqbt-index-link{margin-left:auto; margin-right:auto; text-align:center;}
  #geography-questions-by-topic .eqbt-theme-head{text-align:center; display:block;}

  #history-questions-by-topic .wrap{max-width:880px;}
  #history-questions-by-topic .breadcrumbs{justify-content:center;}
  #history-questions-by-topic .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:640px;}
  #history-questions-by-topic .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  #history-questions-by-topic .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  #history-questions-by-topic .eqbt-facts{justify-content:center;}
  #history-questions-by-topic .eqbt-board-intro,
  #history-questions-by-topic .eqbt-index-link{margin-left:auto; margin-right:auto; text-align:center;}
  #history-questions-by-topic .eqbt-theme-head{text-align:center; display:block;}

  #business-questions-by-topic .wrap{max-width:880px;}
  #business-questions-by-topic .breadcrumbs{justify-content:center;}
  #business-questions-by-topic .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:640px;}
  #business-questions-by-topic .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  #business-questions-by-topic .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  #business-questions-by-topic .eqbt-facts{justify-content:center;}
  #business-questions-by-topic .eqbt-board-intro,
  #business-questions-by-topic .eqbt-index-link{margin-left:auto; margin-right:auto; text-align:center;}
  #business-questions-by-topic .eqbt-theme-head{text-align:center; display:block;}

  .eqbt-wrap{margin-top:8px;}

  /* ---------- Questions by Topic picker ----------
     Students asked for a clearer route to the right booklet, so every
     Questions by Topic page runs the same numbered flow: 1 exam board,
     2 qualification, 3 download. Each step is a row with its
     instruction on the left and the choices on the right (stacked on
     phones). The step to do next gets the accent border. Boards or
     qualifications without files are dashed "Coming soon" chips that
     cannot be selected. Panels only hide once the script has marked
     the wrapper .qbt-ready, so without JavaScript every booklet stays
     visible and downloadable. */
  #economics-questions-by-topic{--qbt-accent:var(--subj-economics); --qbt-tint:var(--subj-economics-tint);}
  #physics-questions-by-topic{--qbt-accent:var(--sci-physics); --qbt-tint:var(--sci-physics-tint);}
  #chemistry-questions-by-topic{--qbt-accent:var(--soon-chemistry); --qbt-tint:var(--soon-chemistry-tint);}
  #maths-questions-by-topic{--qbt-accent:var(--soon-maths); --qbt-tint:var(--soon-maths-tint);}
  #further-maths-questions-by-topic{--qbt-accent:var(--soon-further-maths); --qbt-tint:var(--soon-further-maths-tint);}
  .qbt-moved-note{margin-top:22px;}
  #english-questions-by-topic{--qbt-accent:var(--subj-english); --qbt-tint:var(--subj-english-tint);}
  #biology-questions-by-topic{--qbt-accent:var(--soon-biology); --qbt-tint:var(--soon-biology-tint);}
  #psychology-questions-by-topic{--qbt-accent:var(--soon-psychology); --qbt-tint:var(--soon-psychology-tint);}
  #computer-science-questions-by-topic{--qbt-accent:var(--soon-computer-science); --qbt-tint:var(--soon-computer-science-tint);}
  #geography-questions-by-topic{--qbt-accent:var(--soon-geography); --qbt-tint:var(--soon-geography-tint);}
  #history-questions-by-topic{--qbt-accent:var(--soon-history); --qbt-tint:var(--soon-history-tint);}
  #business-questions-by-topic{--qbt-accent:var(--soon-business); --qbt-tint:var(--soon-business-tint);}
  .qbt-step{
    display:grid; grid-template-columns:minmax(200px,250px) 1fr; gap:12px 24px; align-items:start;
    margin-top:14px; padding:18px 20px; background:var(--paper);
    border:1px solid var(--line-strong); border-radius:14px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .qbt-step:first-child{margin-top:26px;}
  .qbt-step[hidden]{display:none;}
  .qbt-step.is-current{border-color:var(--qbt-accent); box-shadow:0 0 0 3px var(--qbt-tint);}
  .qbt-step-label{
    display:flex; align-items:center; gap:10px; margin:0; min-height:48px;
    font-weight:700; font-size:0.98rem; line-height:1.3; color:var(--ink);
  }
  .qbt-num{
    flex:none; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
    background:var(--qbt-accent); color:var(--paper);
    font-family:'IBM Plex Mono', monospace; font-size:0.95rem; font-weight:700;
  }
  .qbt-arrow{flex:none; width:22px; height:22px; margin-left:auto; color:var(--qbt-accent); stroke-width:2.4;}
  .qbt-step.is-current .qbt-arrow{animation:qbtNudge 1.4s ease-in-out infinite;}
  @keyframes qbtNudge{0%,100%{transform:translateX(0);} 50%{transform:translateX(5px);}}
  .qbt-options{display:flex; flex-wrap:wrap; gap:10px;}
  .qbt-opt{
    display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:12px 20px;
    font-family:'IBM Plex Mono', monospace; font-size:0.84rem; font-weight:600;
    border:1.5px solid var(--qbt-accent); border-radius:26px;
    background:var(--qbt-tint); color:var(--qbt-accent); cursor:pointer;
    transition:background .18s ease, color .18s ease;
  }
  button.qbt-opt:hover:not(.active){background:var(--paper);}
  .qbt-opt.active{background:var(--qbt-accent); color:var(--paper);}
  .qbt-opt:focus-visible{outline:2px solid var(--qbt-accent); outline-offset:3px;}
  .qbt-opt.is-soon{border-style:dashed; border-color:var(--line-strong); background:transparent; color:var(--ink-faint); cursor:default;}
  .qbt-soon{
    font-size:0.6rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--gold-deep); background:var(--gold-tint); border-radius:10px; padding:3px 8px; white-space:nowrap;
  }
  .qbt-step-body{display:grid; gap:10px;}
  .qbt-wait{display:none; margin:0; padding-top:12px; font-size:0.9rem; color:var(--ink-faint);}
  .qbt-ready .qbt-step[data-qbt-step="2"].is-waiting .qbt-wait{display:block;}
  .qbt-ready [data-qbt-levels-for]:not(.active){display:none;}
  .qbt-step-text{margin:0; padding-top:12px; font-size:0.92rem; color:var(--ink-soft); line-height:1.55;}
  /* "Download all" zip, added by script only (no JS, no zip). */
  .qbt-zip{grid-column:2; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;}
  .qbt-zip[hidden],.qbt-zip-btn[hidden],.qbt-zip-set[hidden]{display:none;}
  .qbt-zip-btn{display:inline-flex; align-items:center; gap:8px; background:var(--qbt-accent); border-color:var(--qbt-accent); color:var(--paper);}
  .qbt-zip-btn:disabled,.qbt-zip-set:disabled{opacity:.75; cursor:progress;}
  .qbt-zip-btn .ui-icon,.qbt-zip-set .ui-icon{width:16px; height:16px; stroke-width:2.2;}
  .qbt-zip-note{font-size:0.82rem; color:var(--ink-faint);}
  .qbt-zip-set{display:flex; align-items:center; gap:6px; margin:6px auto 12px; padding:6px 12px;
    font:inherit; font-size:0.78rem; font-weight:600; color:var(--qbt-accent); background:var(--qbt-tint);
    border:1px solid var(--qbt-accent); border-radius:20px; cursor:pointer;}
  .qbt-zip-set:hover{background:var(--paper);}
  .qbt-zip-set:focus-visible,.qbt-zip-btn:focus-visible{outline:2px solid var(--qbt-accent); outline-offset:3px;}
  /* Post-download nudge: one quiet line, only after a download. */
  .qbt-nudge{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:16px 0 0; padding:12px 14px 12px 16px;
    border:1px solid var(--qbt-accent); border-radius:var(--radius); background:var(--qbt-tint); font-size:0.9rem; color:var(--ink); line-height:1.5;
    animation:qbtNudgeIn .35s ease both;}
  .qbt-nudge[hidden]{display:none;}
  .qbt-nudge .text-link{font-weight:600; white-space:nowrap;}
  .qbt-nudge-close{margin-left:auto; padding:0 4px; border:0; background:none; font-size:1.25rem; line-height:1; color:var(--ink-faint); cursor:pointer;}
  .qbt-nudge-close:hover{color:var(--ink);}
  .qbt-nudge-close:focus-visible{outline:2px solid var(--qbt-accent); outline-offset:2px;}
  @keyframes qbtNudgeIn{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion:reduce){.qbt-nudge{animation:none;}}
  .qbt-panels{margin-top:18px;}
  .qbt-panel{padding:16px 18px; background:var(--paper);
    border-left:3px solid var(--qbt-accent); border-radius:0 var(--radius) var(--radius) 0;}
  .qbt-panel + .qbt-panel{margin-top:22px;}
  .qbt-ready .qbt-panel:not(.active){display:none;}
  .qbt-panel [data-qbt-hidden]{display:none !important;}
  @media (max-width:680px){
    .qbt-step{grid-template-columns:1fr; padding:16px;}
    .qbt-step-label{min-height:0;}
    .qbt-opt{padding:10px 16px; font-size:0.8rem;}
    .qbt-arrow{transform:rotate(90deg); margin-left:4px;}
    .qbt-step.is-current .qbt-arrow{animation:none;}
    .qbt-wait,.qbt-step-text{padding-top:0;}
    .qbt-zip{grid-column:auto;}
  }
  @media (prefers-reduced-motion:reduce){.qbt-step.is-current .qbt-arrow{animation:none;}}
  .eqbt-board-intro{font-size:0.9rem; color:var(--ink-soft); line-height:1.6; max-width:70ch;}
  .eqbt-index-link{margin-top:8px; font-size:0.85rem;}
  .eqbt-theme{margin-top:30px;}
  .eqbt-theme:first-of-type{margin-top:20px;}
  .eqbt-theme-head{
    font-family:'IBM Plex Mono', monospace; font-size:0.78rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.06em; color:var(--gold-deep);
    display:block; margin-bottom:12px;
  }
  /* Flex, not grid: a grid's leftover last row hugs the start edge
     (e.g. a lone 4th card sits under column 1). Flex-wrap with
     justify-content:center centres a short last row instead, so a
     single leftover card sits under the middle column, not the left. */
  .eqbt-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}
  .eqbt-card{
    flex:1 1 250px; max-width:300px;
    border:1px solid var(--line-strong); border-radius:var(--radius);
    padding:14px 16px; background:var(--paper); text-align:center;
  }
  .eqbt-card-complete{
    margin-bottom:12px; background:var(--gold-tint); border-color:var(--gold);
    display:flex; flex-direction:column; align-items:center; gap:10px;
    flex-basis:auto; max-width:none; width:100%;
  }
  .eqbt-card-complete .eqbt-card-head{margin-bottom:0;}
  .eqbt-card-head{margin-bottom:10px;}
  .eqbt-code{
    display:block; font-family:'IBM Plex Mono', monospace; font-size:0.68rem;
    font-weight:700; letter-spacing:0.04em; color:var(--ink-faint); margin-bottom:4px;
  }
  .eqbt-card h4{font-family:'Fraunces', serif; font-size:0.95rem; font-weight:500; line-height:1.35; color:var(--ink);}
  .eqbt-card-actions{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:12px;}
  .eqbt-card-actions .btn{padding:8px 14px; font-size:0.68rem;}
  .eqbt-note{font-size:0.74rem; color:var(--ink-faint); font-style:italic;}
  /* Jump strip, added by script to panels with five or more sets: one
     button per set, lit for the set being read, so nobody has to scroll
     through every card to reach "Higher Tier: Algebra" or "S2". On
     phones it is pinned under the header (below); on wider screens it
     wraps onto several lines, so it stays at the top of the panel. */
  .qbt-jump{position:relative; z-index:5; margin:14px -18px 0; padding:8px 18px;
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px;
    background:var(--paper); border-bottom:1px solid var(--line);}
  .qbt-jump-row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; width:100%;}
  .qbt-jump-group{flex:none; font-family:'IBM Plex Mono', monospace; font-size:0.66rem; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-deep); padding:0 2px 0 8px;}
  .qbt-jump-group:first-child{padding-left:0;}
  .qbt-jump-btn{flex:none; padding:6px 12px; font:inherit; font-size:0.78rem; font-weight:600; white-space:nowrap;
    color:var(--qbt-accent); background:var(--qbt-tint); border:1px solid var(--qbt-accent); border-radius:20px; cursor:pointer;}
  .qbt-jump-btn:hover{background:var(--paper);}
  .qbt-jump-btn.is-here{background:var(--qbt-accent); color:var(--paper);}
  .qbt-jump-btn:focus-visible{outline:2px solid var(--qbt-accent); outline-offset:2px;}
  .qbt-jump-on .eqbt-theme{scroll-margin-top:var(--qbt-jump-h,52px);}
  /* Phones: the strip becomes one pinned line that scrolls sideways, and each
     booklet card becomes a single row (code and title left, button
     right), so a screen holds about twice as many booklets. */
  @media (max-width:680px){
    .qbt-jump{position:sticky; top:var(--qbt-jump-top,64px); flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
    .qbt-jump::-webkit-scrollbar{display:none;}
    .qbt-jump-row{display:contents;}
  }
  @media (max-width:560px){
    .eqbt-grid{gap:8px;}
    .eqbt-theme{margin-top:22px;}
    .eqbt-card:not(.eqbt-card-complete){flex-basis:100%; max-width:none; display:flex; align-items:center; gap:12px; padding:10px 12px; text-align:left;}
    .eqbt-card:not(.eqbt-card-complete) .eqbt-card-head{flex:1; min-width:0; margin-bottom:0;}
    .eqbt-card:not(.eqbt-card-complete) .eqbt-card-actions{flex:none; margin-top:0; flex-direction:column; align-items:flex-end; gap:6px;}
    .eqbt-card:not(.eqbt-card-complete) .eqbt-card-actions .eqbt-note{max-width:9rem; text-align:right;}
    .eqbt-card:not(.eqbt-card-complete) .eqbt-card-actions .btn{min-width:5.5rem; justify-content:center; text-align:center;}
  }

  /* ---------- End-of-page conversion panel ---------- */
  .eqbt-promo{
    margin-top:36px; padding:32px clamp(24px,4vw,44px); border-radius:var(--radius);
    background:var(--paper-dim); border-top:3px solid var(--eqbt-accent, var(--subj-economics));
    text-align:center;
  }
  .eqbt-promo h3{font-size:1.3rem;}
  .eqbt-promo > p{margin:12px auto 0; font-size:0.94rem; color:var(--ink-soft); max-width:58ch; line-height:1.6;}
  .eqbt-promo-price{
    display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
    gap:6px 16px; margin-top:22px;
  }
  .eqbt-promo-price-figure{font-family:'Fraunces', serif; font-size:1.7rem; font-weight:500; color:var(--eqbt-accent, var(--subj-economics));}
  .eqbt-promo-price-figure strong{font-weight:600;}
  .eqbt-promo-price-then{font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--ink-faint); letter-spacing:0.02em;}
  .eqbt-promo-price-then strong{color:var(--ink-soft); font-weight:700;}
  .eqbt-promo .btn{margin-top:22px; display:inline-flex; align-items:center; gap:8px;}
  .eqbt-promo-alt{margin-top:16px; font-size:0.86rem; color:var(--ink-faint);}
  .eqbt-promo-alt a{color:var(--ink-soft);}
  .eqbt-facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
  .eqbt-fact{
    font-family:'IBM Plex Mono', monospace; font-size:0.7rem; font-weight:600;
    letter-spacing:0.02em; padding:6px 12px; border-radius:14px;
    border:1px solid var(--line-strong); color:var(--ink-soft); background:var(--paper-dim);
  }
  .eqbt-fact-gold{color:var(--gold-deep); border-color:var(--gold); background:var(--gold-tint);}

  /* ---------- Physics Examiners' Edition (paid, £1 per topic) ---------- */
  #physics-examiners-edition{--qbt-accent:var(--sci-physics); --qbt-tint:var(--sci-physics-tint);}
  #physics-examiners-edition .wrap{max-width:880px;}
  #physics-examiners-edition .breadcrumbs{justify-content:center;}
  #physics-examiners-edition .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:640px;}
  #physics-examiners-edition .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  #physics-examiners-edition .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  #physics-examiners-edition .eqbt-facts{justify-content:center;}
  #physics-examiners-edition .eqbt-board-intro{margin-left:auto; margin-right:auto; text-align:center;}
  #physics-examiners-edition .eqbt-theme-head{text-align:center; display:block;}
  #physics-examiners-edition .eqbt-theme{margin-top:40px;}
  /* ---- Hero: the offer (left) and a real page from Topic 12 (right) ---- */
  #physics-examiners-edition .wrap{max-width:1080px;}
  #physics-examiners-edition .xe-course,
  #physics-examiners-edition .xe-small,
  #physics-examiners-edition .eqbt-promo{max-width:880px; margin-left:auto; margin-right:auto;}
  .xe-hero{
    position:relative; overflow:hidden; margin-top:22px;
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(28px,4vw,52px); align-items:center;
    padding:clamp(28px,4.5vw,56px); border-radius:22px; color:var(--paper);
    background:
      radial-gradient(circle at 88% 8%, rgba(226,189,106,0.28), transparent 42%),
      radial-gradient(circle at 0% 100%, rgba(199,154,59,0.14), transparent 45%),
      linear-gradient(155deg, #24304b 0%, var(--ink) 58%, #10162a 100%);
    box-shadow:0 30px 60px -28px rgba(16,22,42,0.55);
  }
  .xe-kicker{display:inline-block; padding:6px 12px; border:1px solid var(--gold-line); border-radius:999px;
    font-family:'IBM Plex Mono', monospace; font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-bright);}
  .xe-hero h2{margin-top:18px; font-family:'Fraunces', serif; font-size:clamp(2rem,4.2vw,3.15rem); line-height:1.06; font-weight:600; color:var(--paper); letter-spacing:-0.01em;}
  .xe-hero h2 span{display:block; color:var(--gold-bright); font-style:italic;}
  .xe-lead{margin-top:18px; font-size:1.02rem; line-height:1.65; color:rgba(255,255,255,0.82); max-width:56ch;}
  .xe-ticks{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
  .xe-ticks li{position:relative; padding-left:30px; font-weight:600; color:var(--paper); line-height:1.45;}
  .xe-ticks li::before{content:"✓"; position:absolute; left:0; top:-1px; width:21px; height:21px; border-radius:50%;
    display:grid; place-items:center; font-size:0.72rem; font-weight:800; color:var(--ink); background:var(--gold-bright);}
  .xe-cta{margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;}
  .xe-cta .btn{display:inline-flex; align-items:center; gap:8px; padding:15px 26px; font-size:0.95rem; background:var(--gold-bright); border-color:var(--gold-bright); color:var(--ink);}
  .xe-cta .btn:hover{background:var(--paper); border-color:var(--paper); color:var(--ink);}
  .xe-cta-alt{font-weight:600; color:var(--paper); text-decoration:underline; text-decoration-color:var(--gold-line); text-underline-offset:4px;}
  .xe-cta-alt:hover{color:var(--gold-bright);}
  .xe-author{margin-top:24px; display:flex; align-items:center; gap:10px; font-size:0.86rem; color:rgba(255,255,255,0.75);}
  .xe-author strong{color:var(--paper);}
  .xe-author{gap:12px; font-size:0.9rem;}
  .xe-author-photo{flex:none; width:52px; height:52px; border-radius:50%; object-fit:cover; background:var(--paper);
    border:2px solid var(--gold-bright); box-shadow:0 0 0 4px rgba(226,189,106,0.18);}

  /* The page preview: a tilted "sheet" from the real PDF */
  .xe-preview{position:relative; margin:0; padding:22px 6px 0;}
  .xe-page{position:relative; transform:rotate(1.6deg); background:var(--paper); color:var(--ink); border-radius:14px; padding:22px 22px 18px;
    box-shadow:0 26px 50px -18px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);}
  .xe-preview::before{content:""; position:absolute; inset:34px 18px -8px 26px; transform:rotate(-3deg); border-radius:14px; background:rgba(255,255,255,0.12);}
  .xe-page-head{display:flex; justify-content:space-between; gap:10px; padding:0 64px 10px 0; border-bottom:2px solid var(--gold);
    font-family:'IBM Plex Mono', monospace; font-size:0.66rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-faint);}
  .xe-page-head span{color:var(--gold-deep);}
  .xe-page-title{margin-top:12px; font-family:'Fraunces', serif; font-size:1.08rem; font-weight:600; line-height:1.3;}
  .xe-row{margin-top:10px; padding:10px 12px; border-radius:10px; border-left:4px solid; font-size:0.86rem; line-height:1.5; color:var(--ink);}
  .xe-row p{margin:2px 0 0;}
  .xe-row em{font-style:normal; font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--ink-faint); white-space:nowrap;}
  .xe-row-tag{font-family:'IBM Plex Mono', monospace; font-size:0.64rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;}
  .xe-row-bad{background:var(--alert-tint); border-color:var(--alert);}
  .xe-row-bad .xe-row-tag{color:var(--alert);}
  .xe-row-good{background:var(--green-tint); border-color:var(--green);}
  .xe-row-good .xe-row-tag{color:var(--green);}
  .xe-row-exam{background:var(--paper-dim); border-color:var(--ink);}
  .xe-row-exam .xe-row-tag{color:var(--ink);}
  .xe-flagged{margin-top:12px; font-size:0.78rem; color:var(--ink-faint);}
  .xe-flagged strong{color:var(--gold-deep);}
  .xe-price{position:absolute; z-index:2; top:0; right:-4px; width:92px; height:92px; border-radius:50%; transform:rotate(-10deg);
    display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
    background:var(--gold-bright); color:var(--ink); box-shadow:0 12px 24px -8px rgba(0,0,0,0.5); border:3px solid var(--paper);}
  .xe-price strong{font-family:'Fraunces', serif; font-size:2rem; font-weight:700;}
  .xe-price span{margin-top:3px; font-family:'IBM Plex Mono', monospace; font-size:0.6rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;}
  .xe-preview figcaption{position:relative; margin-top:18px; text-align:center; font-size:0.78rem; color:rgba(255,255,255,0.7);}

  /* Numbers strip and the three steps */
  .xe-stats{margin:22px 0 0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;}
  .xe-stats div{padding:18px 12px; text-align:center; border:1px solid var(--line); border-radius:14px; background:var(--paper-tint);}
  .xe-stats dd{margin:0; font-family:'Fraunces', serif; font-size:clamp(1.8rem,3.4vw,2.4rem); font-weight:600; line-height:1; color:var(--ink);}
  .xe-stats dt{margin-top:8px; font-family:'IBM Plex Mono', monospace; font-size:0.66rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-deep);}
  .xe-stats div{display:flex; flex-direction:column-reverse;}
  .xe-steps{list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;}
  .xe-steps li{display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:14px; background:var(--paper); border:1px solid var(--line);}
  .xe-steps li > span{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:0.85rem; color:var(--paper); background:var(--ink);}
  .xe-steps p{margin:0; font-size:0.86rem; line-height:1.5; color:var(--ink-soft);}
  .xe-steps strong{display:block; color:var(--ink); font-size:0.92rem;}
  #xe-topics{scroll-margin-top:90px;}
  @media (max-width:880px){
    .xe-hero{grid-template-columns:1fr;}
    .xe-preview{max-width:460px; margin:0 auto; width:100%;}
    .xe-stats{grid-template-columns:repeat(2, minmax(0,1fr));}
    .xe-steps{grid-template-columns:1fr;}
  }
  @media (max-width:480px){
    .xe-hero{border-radius:16px; padding:26px 18px;}
    .xe-page{transform:none; padding:18px 16px 14px;}
    .xe-preview::before{display:none;}
    .xe-price{width:76px; height:76px; right:-2px;}
    .xe-price strong{font-size:1.6rem;}
    .xe-cta .btn{width:100%; justify-content:center;}
  }
  /* ---- Topic chooser: grouped, colour-coded cards ---- */
  #physics-examiners-edition .xe-course{max-width:1080px; margin-top:56px;}
  .xe-course-head{text-align:center;}
  .xe-kicker-light{border-color:var(--gold); color:var(--gold-deep); background:var(--gold-tint);}
  .xe-course-head h3{margin-top:14px; font-family:'Fraunces', serif; font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:600; line-height:1.1; color:var(--ink);}
  .xe-course-head > p{margin:8px auto 0; font-size:1rem; color:var(--ink-soft);}
  .xe-all{margin-top:18px; display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; cursor:pointer;
    font:inherit; font-size:0.92rem; font-weight:700; color:var(--paper); background:var(--ink); border:2px solid var(--ink);
    box-shadow:0 10px 22px -12px rgba(24,32,51,0.6); transition:transform .15s ease, background .15s ease, color .15s ease;}
  .xe-all:hover{transform:translateY(-2px); background:var(--gold-bright); border-color:var(--gold-bright); color:var(--ink);}
  .xe-all[data-in-basket="true"]{background:var(--green-tint); border-color:var(--green); color:var(--green); box-shadow:none;}
  .xe-all:focus-visible, .xe-add:focus-visible, .xe-sample-btn:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

  .xe-sample{margin:30px auto 0; max-width:880px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
    padding:18px 22px; border-radius:16px; border:1px dashed var(--gold);
    background:linear-gradient(120deg, var(--paper-warm) 0%, #FBF6EA 100%);}
  .xe-sample-icon{flex:none; width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:var(--ink);}
  .xe-sample-icon svg{width:24px; height:24px; fill:none; stroke:var(--gold-bright); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .xe-sample-text{flex:1 1 240px; min-width:0;}
  .xe-sample-label{font-family:'IBM Plex Mono', monospace; font-size:0.66rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-deep);}
  .xe-sample-title{margin-top:3px; font-family:'Fraunces', serif; font-size:1.12rem; font-weight:600; color:var(--ink); line-height:1.3;}
  .xe-sample-links{display:flex; gap:10px; flex-wrap:wrap;}
  .xe-sample-btn{padding:10px 16px; border-radius:999px; font-size:0.84rem; font-weight:700; color:var(--ink); background:var(--paper); border:1px solid var(--ink);
    transition:background .15s ease, color .15s ease;}
  .xe-sample-btn:hover{background:var(--ink); color:var(--paper);}

  .xe-group{margin-top:44px; --xe-a:var(--sci-physics); --xe-b:#D0566F;}
  .xe-group-al{--xe-a:#24304B; --xe-b:#4B5E8F;}
  .xe-group-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; padding-bottom:12px; border-bottom:2px solid var(--line);}
  .xe-pill{padding:5px 12px; border-radius:999px; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--paper); background:linear-gradient(120deg, var(--xe-a), var(--xe-b));}
  .xe-group-head h4{font-family:'Fraunces', serif; font-size:1.45rem; font-weight:600; color:var(--ink);}
  .xe-group-head p{flex-basis:100%; font-size:0.9rem; color:var(--ink-soft);}
  @media (min-width:700px){ .xe-group-head p{flex-basis:auto; margin-left:auto;} }

  .xe-grid{margin-top:18px; display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:16px;}
  /* Five AS topics fill one desktop row; the eight A Level topics make two rows of four. */
  @media (min-width:1000px){ .xe-group-as .xe-grid{grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px;} }
  .xe-card{position:relative; display:flex; flex-direction:column; padding:18px 18px 16px; border-radius:16px; background:var(--paper);
    border:1px solid var(--line); box-shadow:0 2px 0 var(--line); overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
  .xe-card::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg, var(--xe-a), var(--xe-b));}
  .xe-card:hover{transform:translateY(-4px); box-shadow:0 18px 34px -18px rgba(24,32,51,0.45); border-color:transparent;}
  .xe-card-top{display:flex; align-items:center; justify-content:space-between;}
  .xe-num{width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
    font-family:'Fraunces', serif; font-size:1.35rem; font-weight:700; color:var(--paper);
    background:linear-gradient(135deg, var(--xe-a), var(--xe-b)); box-shadow:0 8px 16px -8px var(--xe-a);}
  .xe-card-price{padding:4px 10px; border-radius:999px; font-family:'Fraunces', serif; font-size:1rem; font-weight:700; color:var(--gold-deep); background:var(--gold-tint);}
  .xe-card-topic{margin-top:14px; font-family:'IBM Plex Mono', monospace; font-size:0.66rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-faint);}
  .xe-card-title{margin-top:4px; font-family:'Fraunces', serif; font-size:1.12rem; font-weight:600; line-height:1.25; color:var(--ink);}
  .xe-card-meta{margin-top:12px; display:flex; flex-wrap:wrap; gap:6px;}
  .xe-card-meta span{padding:4px 9px; border-radius:8px; font-size:0.76rem; color:var(--ink-soft); background:var(--paper-dim);}
  .xe-card-meta b{color:var(--ink);}
  .xe-add{margin-top:auto; width:100%; padding:11px 14px; border-radius:10px; cursor:pointer;
    font:inherit; font-size:0.86rem; font-weight:700; color:var(--paper); background:var(--ink); border:1px solid var(--ink);
    transition:background .15s ease, color .15s ease;}
  .xe-card-meta{margin-bottom:16px;}
  .xe-add:hover{background:var(--gold-bright); border-color:var(--gold-bright); color:var(--ink);}
  .xe-add[data-in-basket="true"]{background:var(--green-tint); border-color:var(--green); color:var(--green);}
  .xe-card:has(.xe-add[data-in-basket="true"]){border-color:var(--green); box-shadow:0 0 0 2px var(--green-tint);}
  @media (max-width:560px){
    .xe-grid{grid-template-columns:1fr; gap:12px;}
    .xe-card{display:grid; grid-template-columns:auto 1fr; column-gap:14px; padding:16px;}
    .xe-card-top{grid-row:1 / span 3; flex-direction:column; justify-content:flex-start; gap:8px;}
    .xe-card-topic{margin-top:0;}
    .xe-card-meta, .xe-add{grid-column:2;}
    .xe-sample{padding:16px;}
  }
  .xe-small{margin:30px auto 0; max-width:640px; text-align:center; font-size:0.78rem; color:var(--ink-faint); line-height:1.6;}
  .xe-small a{color:var(--ink-soft);}

  /* ---------- Free booklets: the Examiners' Edition hero, free ---------- */
  #free-booklets .wrap{max-width:1140px;}
  #free-booklets .breadcrumbs{justify-content:center;}
  .qf-hero{background:
      radial-gradient(circle at 90% 6%, rgba(226,189,106,0.30), transparent 40%),
      radial-gradient(circle at 0% 100%, rgba(31,138,92,0.20), transparent 46%),
      linear-gradient(155deg, #24304b 0%, var(--ink) 58%, #10162a 100%);}
  .qf-ticks{counter-reset:qf;}
  .qf-ticks li{counter-increment:qf; padding-left:34px; font-weight:500; color:rgba(255,255,255,0.86);}
  .qf-ticks li strong{color:var(--paper);}
  .qf-ticks li::before{content:counter(qf); width:23px; height:23px; font-size:0.74rem;}
  .qf-audience-icon{flex:none; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
    background:rgba(226,189,106,0.14); border:2px solid var(--gold-bright); box-shadow:0 0 0 4px rgba(226,189,106,0.12);}
  .qf-audience-icon svg{width:26px; height:26px; fill:none; stroke:var(--gold-bright); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}

  /* Three stacked sheets: contents, question page, mark scheme */
  .qf-preview{padding-top:34px;}
  .qf-preview::before{display:none;}
  .qf-free{top:6px; right:-6px; width:100px; height:100px;}
  .qf-free strong{font-size:1.75rem; letter-spacing:-0.01em;}
  .qf-sheet{position:relative; background:var(--paper); color:var(--ink); border-radius:12px; box-shadow:0 22px 40px -18px rgba(0,0,0,0.65);}
  .qf-contents{width:82%; margin-left:-8px; padding:14px 16px 12px; transform:rotate(-3deg); opacity:0.97;}
  .qf-sheet-head{display:flex; justify-content:space-between; gap:8px; padding-bottom:7px; border-bottom:2px solid var(--gold);
    font-family:'IBM Plex Mono', monospace; font-size:0.62rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink);}
  .qf-sheet-head span{color:var(--ink-faint); text-transform:none; letter-spacing:0;}
  .qf-c-sub{margin-top:8px; display:flex; justify-content:space-between; gap:8px; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; color:var(--ink);}
  .qf-c-sub span{flex:none; font-weight:600; text-transform:none; color:var(--ink-faint);}
  .qf-c-row{position:relative; margin-top:4px; display:grid; grid-template-columns:52px 1fr auto; gap:8px; padding:4px 8px; border-radius:6px;
    font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--ink-soft);}
  .qf-c-on{background:var(--gold-tint); color:var(--ink); font-weight:700; box-shadow:inset 3px 0 0 var(--gold);}
  .qf-question{z-index:1; margin:-10px 0 0 6%; padding:16px 18px 16px;}
  .qf-q-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:8px; border-bottom:2px solid var(--gold);
    font-family:'IBM Plex Mono', monospace; font-size:0.62rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-faint);}
  .qf-btn{position:relative; flex:none; padding:5px 10px; border-radius:999px; font-family:'IBM Plex Mono', monospace; font-size:0.64rem; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--paper); background:var(--green); box-shadow:0 0 0 4px var(--green-tint);}
  .qf-btn-back{background:var(--gold-bright); color:var(--ink); box-shadow:0 0 0 4px rgba(226,189,106,0.22);}
  .qf-q-topic{margin-top:8px; font-family:'Fraunces', serif; font-size:0.98rem; font-weight:600; line-height:1.25;}
  .qf-q-text{margin-top:8px; font-size:0.82rem; line-height:1.5; color:var(--ink-soft);}
  .qf-q-text b{margin-right:4px; color:var(--ink);}
  .qf-q-opts{list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:5px 12px; font-size:0.8rem; color:var(--ink);}
  .qf-q-opts li{padding:4px 8px; border-radius:6px; background:var(--paper-dim);}
  .qf-q-opts b{margin-right:6px;}
  .qf-ms{z-index:2; width:84%; margin:-14px 0 0 auto; padding:12px 14px; transform:rotate(-1.8deg); background:#1b2338; color:var(--paper);
    border:1px solid rgba(226,189,106,0.35);}
  .qf-ms-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-family:'IBM Plex Mono', monospace; font-size:0.62rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--gold-bright);}
  .qf-ms-row{margin-top:9px; display:flex; justify-content:space-between; gap:10px; padding:7px 10px; border-radius:8px;
    font-size:0.8rem; background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.9);}
  .qf-ms-row b{color:var(--gold-bright);}
  .qf-ms-row span + span{font-weight:700;}
  .qf-pin{position:absolute; top:-9px; right:-9px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
    font-family:'Inter', sans-serif; font-size:0.66rem; font-weight:800; letter-spacing:0; color:var(--ink); background:var(--gold-bright);
    border:2px solid var(--paper); box-shadow:0 4px 10px -3px rgba(0,0,0,0.5);}
  .qf-c-on .qf-pin{top:50%; right:-12px; transform:translateY(-50%);}
  @media (prefers-reduced-motion:no-preference){
    .qf-btn{animation:qfPulse 2.6s ease-in-out infinite;}
    .qf-btn-back{animation-delay:1.3s;}
  }
  @keyframes qfPulse{50%{box-shadow:0 0 0 7px transparent;}}
  /* The shelf: four real booklets as tabs, each with its subject colour
     along the top edge. The picked one lifts and gets a gold ring. */
  .qf-preview{padding-top:14px;}
  /* The sticker sits beside the contents sheet, clear of the shelf. */
  .qf-preview .qf-free{top:112px; right:-22px; width:84px; height:84px;}
  .qf-preview .qf-free strong{font-size:1.55rem;}
  .qf-shelf{position:relative; z-index:3; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin:0 0 18px;}
  .qf-book{--tilt:0deg; position:relative; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    padding:14px 9px 9px; border:0; border-radius:8px; cursor:pointer; text-align:left; overflow:hidden;
    font:inherit; color:var(--ink); background:var(--paper); opacity:0.74;
    box-shadow:0 12px 22px -14px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(24,32,51,0.06);
    transform:rotate(var(--tilt)); transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;}
  .qf-book::before{content:""; position:absolute; inset:0 0 auto 0; height:6px; background:var(--bk);}
  .qf-book:nth-child(1){--tilt:-2deg;}
  .qf-book:nth-child(2){--tilt:1.5deg;}
  .qf-book:nth-child(3){--tilt:-1deg;}
  .qf-book:nth-child(4){--tilt:2deg;}
  .qf-book:hover{opacity:1; transform:translateY(-3px) rotate(var(--tilt));}
  .qf-book[aria-selected="true"]{opacity:1; transform:translateY(-6px); box-shadow:0 0 0 2px var(--gold-bright), 0 18px 28px -14px rgba(0,0,0,0.8);}
  .qf-book:focus-visible{outline:3px solid var(--gold-bright); outline-offset:4px;}
  .qf-book-board{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .qf-book-board{font-family:'IBM Plex Mono', monospace; font-size:0.5rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-faint);}
  .qf-book strong{font-family:'Fraunces', serif; font-size:0.92rem; font-weight:600; line-height:1.15; color:var(--bk);}
  .qf-book-topic{font-size:0.68rem; line-height:1.3; color:var(--ink-soft);}
  .qf-book-n{margin-top:4px; font-family:'IBM Plex Mono', monospace; font-size:0.56rem; font-weight:600; color:var(--ink-faint);}
  /* All four sets of pages share one grid cell, so the figure is always
     as tall as the longest and switching subject never moves the page. */
  .qf-panels{display:grid;}
  .qf-panel{grid-area:1 / 1; min-width:0;}
  .qf-panel[hidden]{display:block; visibility:hidden; pointer-events:none;}
  .qf-panel .qf-contents{box-shadow:inset 4px 0 0 var(--bk), 0 22px 40px -18px rgba(0,0,0,0.65);}
  @media (prefers-reduced-motion:no-preference){
    .qf-panel.qf-in > *{animation:qfIn .32s ease both;}
    .qf-panel.qf-in > :nth-child(2){animation-delay:.05s;}
    .qf-panel.qf-in > :nth-child(3){animation-delay:.1s;}
  }
  @keyframes qfIn{from{opacity:0; translate:0 10px;}}
  .qf-sheet-head span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .qf-c-sub .qf-c-name{display:block; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; text-transform:uppercase; color:var(--ink);}
  .qf-c-row{grid-template-columns:70px 1fr auto;}
  .qf-q-part{margin-top:6px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; font-size:0.82rem; line-height:1.5; color:var(--ink-soft);}
  .qf-marks{font-weight:700; color:var(--ink); white-space:nowrap;}
  .qf-q-maths{margin:6px 0 2px; display:flex; flex-wrap:wrap; gap:4px 22px; padding:8px 10px 6px; border-radius:6px; background:var(--paper-dim); font-size:0.86rem; color:var(--ink);}
  /* A vector written the exam-paper way: letters with an arrow above. */
  .qf-vec{position:relative; display:inline-block; padding-top:0.32em; line-height:1; font-style:italic;}
  .qf-vec::after{content:"\2192"; position:absolute; left:0; right:0; top:-0.42em; text-align:center; font-style:normal; font-size:0.85em; transform:scaleX(1.5);}
  .qf-lines{display:block; height:15px; margin-top:12px; border-top:1.5px dotted var(--line-strong); border-bottom:1.5px dotted var(--line-strong);}
  .qf-ms-row span:first-child{min-width:0;}
  .qf-ms-note{margin-top:8px; font-size:0.74rem; line-height:1.45; color:rgba(255,255,255,0.62);}
  .qf-open{position:relative; z-index:3; width:max-content; max-width:100%; margin:12px 0 0 auto; display:flex; align-items:center; gap:6px;
    font-size:0.8rem; font-weight:700; color:var(--gold-bright); text-decoration:underline; text-decoration-color:var(--gold-line); text-underline-offset:3px;}
  .qf-open:hover{color:var(--paper);}

  /* ---- Premium hero: four layered pages from the free Topic 6 sample ---- */
  .xp-preview{padding-top:10px;}
  .xp-preview::before{display:none;}
  .xp-cover{width:80%; margin-left:-6px; padding:14px 16px 38px; transform:rotate(-3.2deg); text-align:center; border-top:5px solid var(--ink);}
  .xp-cover-kicker{font-family:'IBM Plex Mono', monospace; font-size:0.6rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint);}
  .xp-cover-title{margin-top:4px; font-family:'Fraunces', serif; font-size:1.2rem; font-weight:600; line-height:1.15; color:var(--ink);}
  .xp-cover-sub{margin-top:2px; font-family:'Fraunces', serif; font-style:italic; font-size:0.82rem; color:var(--gold-deep);}
  .xp-cover-meta{margin-top:8px; padding-top:7px; border-top:1.5px solid var(--gold); font-size:0.64rem; color:var(--ink-soft);}
  .xp-page{z-index:1; margin:-26px 0 0 5%; padding:18px 18px 14px; transform:rotate(1.2deg);}
  .xp-page .xe-page-head{padding-right:0; align-items:center;}
  .xp-page .xe-page-head span{flex:none; padding:3px 7px; border-radius:4px; font-size:0.56rem; color:var(--paper); background:var(--ink);}
  .xp-page .xe-page-title{margin-top:10px;}
  .xp-page .xe-page-title b{margin-right:6px; color:var(--gold-deep);}
  .xp-page .xe-row{position:relative; margin-top:8px; padding:8px 11px; font-size:0.8rem;}
  .xp-page .xe-row strong{color:var(--green);}
  .xp-page .xe-row .qf-pin{top:-8px; right:-8px;}
  .xp-page .xe-flagged{margin-top:9px; font-size:0.74rem;}
  .xp-question{z-index:2; width:90%; margin:-10px 0 0 -4px; padding:13px 15px 12px; transform:rotate(-1.4deg);}
  .xp-btn{background:var(--gold-bright); color:var(--ink); box-shadow:0 0 0 4px rgba(226,189,106,0.25);}
  .xp-answer{margin-top:8px; display:flex; align-items:baseline; justify-content:flex-end; gap:6px; font-size:0.8rem; color:var(--ink);}
  .xp-answer span{width:110px; border-bottom:1.5px dotted var(--ink-faint);}
  .xp-ms{z-index:3; width:86%; margin:-10px 0 0 auto; transform:rotate(1.4deg);}
  .xp-wrong{margin-top:9px; font-size:0.74rem; line-height:1.45; color:rgba(255,255,255,0.75);}
  .xp-wrong b{color:#FF9D8F;}
  @media (max-width:480px){
    .qf-preview .qf-free{display:none;}
    /* Two by two on a phone, so every subject name reads in full. */
    .qf-shelf{grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px;}
    .qf-book{padding:11px 10px 8px;}
    .qf-book-board{display:none;}
    .qf-book-topic{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
    .qf-book-n{margin-top:2px;}
    .qf-preview .qf-c-row{grid-template-columns:64px 1fr auto;}
    .qf-q-part{flex-direction:column; gap:0;}
    .xp-cover, .xp-page, .xp-question, .xp-ms{width:100%; margin-left:0; margin-right:0; transform:none;}
    .xp-cover{width:86%;}
    .xp-page{margin-top:-22px;}
    .xp-page .xe-row .qf-pin{right:-4px;}
  }
  .fb-courses-head{margin-top:56px; scroll-margin-top:90px;}
  .fb-courses-head + .fb-grid{margin-top:26px;}
  @media (max-width:480px){
    .qf-contents{width:92%; margin-left:0; transform:none;}
    .qf-sheet-head span{display:none;}
    .qf-c-sub span{display:none;}
    .qf-c-row{grid-template-columns:44px 1fr auto; font-size:0.64rem;}
    .qf-question{margin-left:0;}
    .qf-ms{width:94%; transform:none;}
    .qf-q-opts{grid-template-columns:1fr;}
    .qf-free{width:80px; height:80px; right:-2px;}
    .qf-free strong{font-size:1.4rem;}
  }

  /* ---------- Homepage subject preview cards ---------- */
  /* Six cards form a balanced 3x2 desktop grid, 2x3 tablet grid and
     single-column phone stack. Explicit tracks prevent orphaned cards. */
  .preview-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
  @media (max-width:900px){ .preview-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .preview-grid{grid-template-columns:1fr;} }
  .preview-card{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
    padding:24px 22px; border:1px solid var(--line); border-top:3px solid var(--line-strong);
    border-radius:var(--radius); background:var(--paper); transition:transform .2s ease, box-shadow .2s ease;
  }
  .preview-card:hover{transform:translateY(-3px); box-shadow:0 12px 24px -10px rgba(21,23,43,0.16);}
  .preview-card.coming-soon:hover{transform:none; box-shadow:var(--shadow-sm);}
  .preview-card.physics{border-top-color:var(--physics);}
  .preview-card.econ{border-top-color:var(--econ);}
  .preview-card.english{border-top-color:var(--english);}
  .preview-card.maths{border-top-color:var(--soon-maths);}
  .preview-card.chemistry{border-top-color:var(--soon-chemistry);}
  .preview-card.psychology{border-top-color:var(--soon-psychology);}
  .preview-card-tag{
    font-family:'IBM Plex Mono', monospace; font-size:clamp(0.95rem,1.7vw,1.1rem); font-weight:700;
    text-transform:uppercase; letter-spacing:0.06em;
  }
  .preview-card.physics .preview-card-tag{color:var(--physics);}
  .preview-card.econ .preview-card-tag{color:var(--econ);}
  .preview-card.english .preview-card-tag{color:var(--english);}
  .preview-card.maths .preview-card-tag{color:var(--soon-maths);}
  .preview-card.chemistry .preview-card-tag{color:var(--soon-chemistry);}
  .preview-card.psychology .preview-card-tag{color:var(--soon-psychology);}
  .preview-card.coming-soon{cursor:default;}
  .preview-status{
    display:inline-flex; align-items:center; justify-content:center; min-height:27px;
    padding:5px 11px; border:1px solid currentColor; border-radius:999px;
    font-family:'IBM Plex Mono',monospace; font-size:.72rem; font-weight:700;
    line-height:1; letter-spacing:.07em; text-transform:uppercase;
  }
  .preview-card.maths .preview-status{color:var(--soon-maths); background:var(--soon-maths-tint);}
  .preview-card.chemistry .preview-status{color:var(--soon-chemistry); background:var(--soon-chemistry-tint);}
  .preview-card.psychology .preview-status{color:var(--soon-psychology); background:var(--soon-psychology-tint);}
  /* Qualifications as rows, so a card with two lines and a card
     with one still share a hierarchy. min-height reserves the same
     vertical space as a two-line card (Science) on every card, and
     the row is top-anchored within it, so the divider below always
     falls at the same height regardless of how many lines a given
     card's own qualifications take. */
  .pc-quals{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:8px; min-height:clamp(90px,11vw,110px); width:100%;
  }
  .pc-qual{
    font-family:'Fraunces', serif; font-size:clamp(1.4rem,2.6vw,1.85rem); font-weight:600;
    color:var(--ink); line-height:1.25; display:flex; gap:10px; align-items:baseline; justify-content:center;
  }
  .pc-qual .lvl{
    font-family:'IBM Plex Mono', monospace; font-size:0.85rem; font-weight:700;
    letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-faint);
    flex-shrink:0; min-width:64px; padding-top:3px; text-align:right;
  }
  /* Exam boards as their own labelled tier under a hairline, rather
     than trailing off the end of the qualification sentence. Sits
     directly below the fixed-height quals block above (not pinned
     to the card's bottom edge), so the hairline, the label and the
     first row of chips land at the same height on every card. */
  .pc-boards{width:100%; padding-top:15px; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:10px;}
  .pc-boards-label{
    font-family:'IBM Plex Mono', monospace; font-size:0.76rem; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);
  }
  .pc-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;}
  .pc-chip{
    font-family:'IBM Plex Mono', monospace; font-size:0.8rem; font-weight:600; color:var(--ink-soft);
    padding:6px 13px; border-radius:5px; background:var(--paper-dim); border:1px solid var(--line-strong);
  }

  /* ---------- Results preview band (dark) ---------- */
  .results-preview-band{background:var(--ink); padding:clamp(60px,7vw,88px) 0;}
  .results-preview-stats{display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,48px);}
  .rp-stat{font-family:'IBM Plex Mono', monospace;}
  /* The number is the statement; mono is reserved for the label
     beneath it, so a huge percentage doesn't read as a code value. */
  .rp-num{
    display:block; font-family:'Fraunces', serif; font-weight:600;
    font-size:clamp(2.9rem, 5.4vw, 4.1rem); line-height:1; letter-spacing:-0.01em;
    font-variant-numeric:tabular-nums;
  }
  .rp-label{display:block; font-size:0.8rem; letter-spacing:0.03em; color:#C7CEDB; margin-top:8px;}

  /* ---------- Results preview ----------
     A light, warm band rather than a full-width navy block, with the
     three figures as an open gold-ruled ledger. ID-scoped to win over the
     shared dark-band rules (.results-preview-band / .final-cta). */
  #results-preview{
    padding:clamp(60px,7vw,88px) 0; box-shadow:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:
      radial-gradient(760px 320px at 50% 0%, rgba(199,154,59,0.13), transparent 70%),
      linear-gradient(180deg, #fbf8f1 0%, #fff 100%);
  }
  #results-preview::after{display:none;}
  #results-preview .eyebrow{color:var(--gold-deep);}
  #results-preview h2{color:var(--ink);}
  #results-preview .section-head p{color:var(--ink-soft);}
  #results-preview .results-preview-stats{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
    max-width:1040px; margin:clamp(30px,4vw,44px) auto 0;
    padding:clamp(28px,3.6vw,40px) 0;
    border-top:3px double rgba(173,127,46,0.55); border-bottom:3px double rgba(173,127,46,0.55);
  }
  #results-preview .rp-stat{position:relative; padding:4px clamp(10px,2vw,24px); text-align:center;}
  #results-preview .rp-stat + .rp-stat::before{
    content:""; position:absolute; left:0; top:6%; bottom:6%; width:1px;
    background:linear-gradient(180deg, transparent, rgba(173,127,46,0.55) 20%, rgba(173,127,46,0.55) 80%, transparent);
  }
  #results-preview .rp-num{
    background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--ink);
    font-weight:500; font-size:clamp(3rem,6vw,5rem); letter-spacing:-0.035em; animation:none;
  }
  #results-preview .rp-label{color:var(--ink-soft); font-size:0.74rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; margin-top:16px;}
  #results-preview .rp-context{
    display:block; max-width:62ch; margin:clamp(22px,3vw,28px) auto 0; padding:0; border:0; background:none;
    color:var(--ink); font-size:1rem; line-height:1.6;
  }
  #results-preview .rp-cta{
    display:flex; width:max-content; align-items:center; gap:8px; margin:22px auto 0; padding:12px 24px; border-radius:99px;
    background:var(--ink); color:#fff; font-size:0.9rem; font-weight:600; text-decoration:none;
    box-shadow:0 12px 24px -14px rgba(24,32,51,0.6); transition:transform .2s ease, background .2s ease;
  }
  #results-preview .rp-cta:hover{background:#26304a; transform:translateY(-2px);}
  #results-preview .rp-cta .ui-icon{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2;}
  /* Four figures: two by two on tablets, so the numbers keep their size.
     The divider moves from between columns 2 and 3 to above row two. */
  @media (min-width:641px) and (max-width:900px){
    #results-preview .results-preview-stats{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:22px;}
    #results-preview .rp-stat:nth-child(3)::before{left:20%; right:20%; top:-11px; bottom:auto; width:auto; height:1px; background:linear-gradient(90deg, transparent, rgba(173,127,46,0.5), transparent);}
  }
  @media (max-width:640px){
    #results-preview .results-preview-stats{grid-template-columns:1fr; max-width:340px;}
    #results-preview .rp-stat{padding:16px 8px;}
    #results-preview .rp-stat + .rp-stat::before{left:20%; right:20%; top:0; bottom:auto; width:auto; height:1px; background:linear-gradient(90deg, transparent, rgba(173,127,46,0.5), transparent);}
    #results-preview .rp-num{font-size:clamp(2.6rem,12vw,3.2rem);}
  }

  /* ---------- Pricing focal moment ----------
     Centred and set apart with its own warm glow, so pricing reads as
     a considered moment in the page rather than a peripheral aside.
     Two balanced cards, not a retail sale graphic: the welcome offer
     is a quiet mono label, and the numbers that actually answer "what
     does this buy me" — the price, the weekly frequency, the length —
     are the things given real visual weight. */
  .pricing-focal{
    background:radial-gradient(1100px 520px at 50% -12%, var(--gold-tint), transparent 62%), var(--paper);
    text-align:center;
  }
  .pricing-focal .section-head{margin-left:auto; margin-right:auto; text-align:center; max-width:56ch;}
  .pricing-focal .section-head .eyebrow::after{left:50%; transform:translateX(-50%) scaleX(0);}
  .pricing-focal .section-head.in .eyebrow::after{animation:hudhaDrawLineCentered .7s cubic-bezier(.22,.61,.36,1) .2s forwards;}
  /* Two cards, GCSE and A-Level. Every subject, English included, is
     priced by its qualification, so one pair covers them all. */
  .price-focal-row{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch;
    gap:26px; max-width:780px; margin:0 auto;
  }
  .price-focal-card{
    position:relative;
    width:100%; height:100%; padding:clamp(26px,3vw,34px) clamp(26px,3vw,32px);
    text-align:left; border:1px solid var(--gold); border-radius:16px;
    background:linear-gradient(168deg, var(--paper) 0%, var(--gold-tint) 100%);
    box-shadow:var(--shadow-md);
    transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
  }
  /* Hover-lift and shadow deepen, matching .team-preview-card / .course-card
     elsewhere rather than inventing a new interaction. */
  .price-focal-card:hover{transform:translateY(-4px); box-shadow:0 18px 38px -18px rgba(24,32,51,0.30);}
  .pfc-level{
    font-family:'IBM Plex Mono', monospace; font-size:0.8rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.09em; color:var(--gold-deep);
  }
  .pfc-badge{
    display:inline-block; margin-top:9px; font-family:'IBM Plex Mono', monospace; font-size:0.7rem;
    font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint);
  }
  /* Soft gold glow sitting behind the Welcome Offer figure. Same amber
     accent (199,154,59) as the SAVE badge and per-lesson callout, at a
     restrained opacity — draws the eye to the headline price without
     reading as a coupon banner. It is the element's own background, not a
     flex child, so it never disturbs the price layout, and stays put
     under reduced motion (a glow, not a movement). */
  .pfc-amount{
    position:relative; display:flex; align-items:baseline; justify-content:center;
    gap:9px; margin-top:14px; padding:10px 0; flex-wrap:wrap;
    background:radial-gradient(60% 128% at 50% 48%, rgba(199,154,59,0.30) 0%, rgba(199,154,59,0.08) 46%, transparent 72%);
  }
  /* Same .pc-price-old / .pc-save components as the Pricing view, so the
     two pages read as one system. Only the layout differs: the Pricing
     card stacks them, this one sits the struck price inline beside the
     welcome figure, so the block display has to be undone. */
  .pfc-amount .pc-price-old{
    display:inline; margin-top:0; order:-1;
    font-family:'IBM Plex Mono', monospace; font-size:1.05rem;
    color:var(--ink-faint); text-decoration:line-through;
  }
  .price-focal-card .pc-save{
    display:inline-block; margin-top:12px; font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--gold-deep); background:var(--gold-tint); border:1px solid var(--gold);
    border-radius:12px; padding:5px 12px;
  }
  /* The Welcome Offer's per-lesson price, promoted from a footnote to a
     glanceable highlight. Same gold pill language as .pc-save just above
     (so it reads as native to the page), sized up and bumped to its own
     line so it does not get lost as "just another line of text". The
     .pfc-value sentence below it stays as the small-print explanation;
     this is the prominent summary of the same fact, not a replacement. */
  .pfc-lesson-hook{
    position:relative; overflow:hidden;
    display:inline-block; margin-top:12px; font-family:'IBM Plex Mono', monospace;
    font-size:0.86rem; font-weight:700; letter-spacing:0.02em;
    color:var(--gold-deep); background:var(--gold-tint); border:1px solid var(--gold);
    border-radius:14px; padding:7px 16px;
  }
  .pfc-lesson-hook strong{font-weight:800;}
  /* Slow, understated light sweep across the per-lesson badge, reusing the
     same hudhaShimmer keyframe the buttons use. Runs once when the card
     scrolls into view (its .price-focal-row ancestor gains .reveal.in);
     the resting position keeps the highlight off-badge, so with the
     animation disabled under reduced motion nothing shows. */
  .pfc-lesson-hook::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.5) 50%, transparent 62%);
    background-size:220% 100%; background-position:-180% 0;
  }
  .reveal.in .pfc-lesson-hook::after{animation:hudhaShimmer 2.4s ease .35s 1;}
  .pfc-amount strong{
    font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.02em;
    font-size:clamp(2.9rem, 5vw, 3.6rem); line-height:1; color:var(--ink);
  }
  .pfc-amount span{font-size:0.86rem; color:var(--ink-soft);}
  .pfc-then{font-size:0.9rem; color:var(--ink-soft); margin-top:7px;}
  .pfc-then strong{color:var(--ink); font-weight:600;}
  .pfc-value{
    margin-top:11px; font-size:0.82rem; line-height:1.45; color:var(--ink-soft);
  }
  .pfc-value strong{display:block; color:var(--gold-deep); font-size:0.96rem; font-weight:700;}
  .pfc-facts{display:flex; gap:26px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line-strong);}
  .pfc-fact-num{
    display:block; font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em;
    font-size:2.5rem; color:var(--ink); line-height:1;
  }
  .pfc-fact-unit{font-size:0.5em; font-weight:600; margin-left:2px;}
  .pfc-fact-label{
    display:block; margin-top:6px; font-family:'IBM Plex Mono', monospace; font-size:0.7rem;
    font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); line-height:1.45;
  }
  .pfc-list{margin-top:22px; padding-top:20px; border-top:1px solid var(--line-strong); display:flex; flex-direction:column; gap:10px;}
  .pfc-list li{list-style:none; font-size:0.88rem; color:var(--ink); display:flex; gap:9px; align-items:baseline;}
  .pfc-list li::before{content:"\2713"; color:var(--gold-deep); font-weight:700; flex-shrink:0;}
  .pfc-footnote{margin:24px auto 0; max-width:760px; font-size:0.8rem; line-height:1.65; color:var(--ink-faint); text-align:center;}
  #pricing .price-focal-row{margin-top:36px;}
  #pricing .price-focal-card{text-align:center;}
  #pricing .price-focal-card .pfc-facts{justify-content:center;}
  #pricing .price-focal-card .pfc-list{align-items:center;}
  /* Affordability-as-mission messaging: a compact strapline near the card
     grid at both locations, and one longer statement high on the Pricing
     view. Amber accent and Fraunces, both already used across the site. */
  .pricing-affordable-strap{
    max-width:640px; margin:18px auto 4px; text-align:center;
    font-family:'Fraunces', serif; font-style:italic; font-size:1.02rem;
    color:var(--gold-deep);
  }
  .pricing-mission{
    max-width:60ch; margin:4px auto 30px; text-align:center;
    font-family:'Fraunces', serif; font-size:1.12rem; font-weight:500;
    line-height:1.55; color:var(--ink);
  }
  @media (max-width:640px){
    .price-focal-row{grid-template-columns:1fr; max-width:360px;}
    .price-focal-card{width:100%;}
  }

  /* ---------- Who We Are preview cards ---------- */
  .team-preview-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px;}
  .team-preview-card{
    display:flex; align-items:center; gap:14px; text-align:left;
    padding:16px 22px; border:1px solid var(--line); border-left:3px solid var(--line-strong);
    border-radius:0 var(--radius) var(--radius) 0; background:var(--paper);
  }
  .team-preview-card.physics{border-left-color:var(--physics);}
  .team-preview-card.econ{border-left-color:var(--econ);}
  .team-preview-card.english{border-left-color:var(--english);}
  .team-preview-card.chemistry{border-left-color:var(--chemistry);}
  .team-preview-card.maths{border-left-color:var(--maths);}
  .tpc-name{font-family:'Fraunces', serif; font-size:1.08rem;}
  .tpc-role{font-family:'IBM Plex Mono', monospace; font-size:0.74rem; color:var(--ink-soft); margin-top:5px;}
  /* Landing page: centre all text within its area, formats unchanged */
  .home-only .wrap{text-align:center;}
  .home-only p, .home-only .curric-callout{margin-left:auto; margin-right:auto;}
  .home-only .hero-ctas, .home-only .teach-sequence,
  .home-only .pf-credit{justify-content:center;}
  .home-only .pfc-list, .home-only .trust-item, .home-only .cred-list{align-items:center;}
  .home-only .pfc-facts{justify-content:center;}
  /* Team cards: photo above name and role, all centred, with the subject
     colour moved from the left edge to the top so the card stays balanced. */
  .home-only .team-preview-card{flex-direction:column; justify-content:center; gap:10px; text-align:center; border-left:1px solid var(--line); border-top:3px solid var(--line-strong); border-radius:0 0 var(--radius) var(--radius);}
  .home-only .team-preview-card.physics{border-top-color:var(--physics);}
  .home-only .team-preview-card.econ{border-top-color:var(--econ);}
  .home-only .team-preview-card.english{border-top-color:var(--english);}
  .home-only .team-preview-card.chemistry{border-top-color:var(--chemistry);}
  .home-only .team-preview-card.maths{border-top-color:var(--maths);}
  /* "How we teach" slides: copy centred beside (or, on phones, under) the photo. */
  .home-only .pf-copy{text-align:center; justify-self:center;}
  .home-only .pf-copy .eyebrow{margin-left:auto; margin-right:auto;}
  .home-only .section-head{margin-left:auto; margin-right:auto;}
  .home-only .trust-head, .home-only .results-preview-stats{justify-content:center;}
  .home-only .price-focal-card{text-align:center;}
  #subjects .wrap{text-align:center;}
  #subjects .section-head, #subjects p{margin-left:auto; margin-right:auto;}
  /* Same widening as #timetable's intro sentences, for the same reason:
     the section intros here were pinned to the old 62ch heading width
     and wrapped into more lines than the page's actual width justifies.
     Stays centred, per the existing #subjects .wrap treatment above. */
  #subjects .section-head{max-width:1100px;}
  #subjects .section-head p{max-width:none;}
  #subjects .lesson-note p{max-width:none;}
  #subjects .course-actions, #subjects .cs-line{justify-content:center;}
  #subjects .view-local-nav{justify-content:center;}
  #timetable .wrap{text-align:center;}
  #timetable .section-head, #timetable p{margin-left:auto; margin-right:auto;}
  #timetable .view-local-nav, #timetable .tz-toggle, #timetable .rota-week{justify-content:center;}
  #timetable .cal-block{margin-bottom:80px;}
  #timetable .cal-title{justify-content:center; font-size:1.7rem; font-weight:600;}
  /* Widened from the old 62ch (~600px, cal-sub) and the global 74ch
     (~730px, cal-note/cal-key) to the page's own content width, so the
     English/Science/Economics intro sentences and the closing notes
     below each timetable wrap in one or two lines instead of four or
     five. Stays centred — only the container grows. */
  #timetable .cal-sub, #timetable .cal-note, #timetable .cal-key{max-width:1100px;}
  #timetable .cal-sub{font-size:0.95rem;}
  #timetable .sched-day-label{text-align:center;}
  /* Explicit rather than relying on the inherited centring above, so it
     stays correct even if that ancestor rule ever changes. */
  #timetable .sched-session{text-align:center;}
  .cal-key{margin-top:16px; font-family:'IBM Plex Mono', monospace; font-size:0.8rem; font-weight:700; letter-spacing:0.05em; color:var(--gold-deep);}  #academic-calendar .wrap{text-align:center;}
  #academic-calendar .section-head, #academic-calendar p{margin-left:auto; margin-right:auto;}
  #academic-calendar .view-local-nav{justify-content:center;}
  /* Narrower than the page's usual full wrap width: each card only ever
     holds a name, a date range and a short tag, so stretching them across
     1140px left them looking sparse. Centred to match the poster above. */
  #academic-calendar .acal{max-width:660px; margin-left:auto; margin-right:auto;}
  #academic-calendar .acal-term{margin-bottom:56px;}
  #academic-calendar .acal-term-head{display:inline-block;}
  #academic-calendar .acal-card{border-left:none; border-top:3px solid var(--physics); text-align:center;}
  #academic-calendar .acal-card.holiday{border-top-color:var(--gold); background:var(--paper-warm);}
  #academic-calendar .acal-card.teaching{border-top-color:var(--econ);}
  #academic-calendar .acal-card.final{border-top-color:var(--gold-deep);}
  #academic-calendar .acal-card-name{font-size:1.15rem;}
  #academic-calendar .acal-card-dates{font-size:0.9rem;}
  .acal-final-date{font-family:'Fraunces', serif !important; font-size:1.7rem !important; font-weight:600; color:var(--ink); margin-top:8px !important;}
  #academic-calendar .acal-summary{justify-content:center; text-align:center;}
  #academic-calendar .acal-summary > div{flex:1 1 160px;}
  .acal-summary .as-num.as-pair, .acal-summary .as-label.as-pair{display:flex; justify-content:center; margin-top:0;}
  .as-pair span{display:block; flex:0 0 auto; width:64px;}
  .as-num.as-pair span{position:relative;}
  .as-num.as-pair span:first-child{width:auto;}
  .as-pair-div{font-style:normal; font-weight:400; font-size:0.6em; color:var(--gold); margin:0 14px;}
  .as-label.as-pair span:first-child{margin-right:14px;}
  .as-num.as-pair i{font-style:normal; font-size:0.48em; font-weight:400; color:var(--ink-soft); margin-left:2px;}

  #exam-dates .wrap{text-align:center;}
  #exam-dates .section-head, #exam-dates p{margin-left:auto; margin-right:auto;}
  #exam-dates .view-local-nav{justify-content:center;}
  #exam-dates .xc-filters{justify-content:center;}

  #curriculum .wrap{text-align:center;}
  #curriculum .section-head, #curriculum p{margin-left:auto; margin-right:auto;}
  #curriculum .view-local-nav{justify-content:center;}
  #curriculum .curric-key{text-align:center;}
  #curriculum .curric-group-head{text-align:center;}

  #how-it-works .wrap{text-align:left;}
  #how-it-works .section-head{margin-left:0; margin-right:0; text-align:left;}
  #how-it-works .view-local-nav{justify-content:center;}
  #how-it-works .lesson-model, #how-it-works .proof-strip, #how-it-works .mech-grid{justify-content:center;}
  #how-it-works .mech-item{
    text-align:left; border:0; border-top:2px solid var(--physics);
    border-radius:0; background:transparent; padding:20px 4px;
  }
  #how-it-works .lesson-note{text-align:left; max-width:70ch; margin-left:auto; margin-right:auto;}
  #how-it-works .marking-flow, #how-it-works .marking-closing{margin-left:auto; margin-right:auto;}
  #how-it-works .video-grid, #how-it-works .video-grid *{text-align:left;}
  #how-it-works .eco-grid, #how-it-works .eco-grid *{text-align:left;}

  #first-lesson .wrap, #parents .wrap{text-align:left;}
  #first-lesson .section-head, #parents .section-head{margin-left:0; margin-right:0; text-align:left;}
  #first-lesson .view-local-nav, #parents .view-local-nav{justify-content:center;}

  /* Your First Lesson headline: "Then decide" picked out in gold
     italic, the same accent-line language used across the About Us
     panels (see #aboutPanelStory h3 em). */
  #first-lesson .section-head h2 em{font-style:italic; font-weight:500; color:var(--gold-deep);}

  /* Four-step journey: a compact horizontal row on desktop, connected
     by a thin gold line with arrow glyphs sitting on top of it. Equal
     height cards via grid + stretch. One consistent card treatment
     across all four steps (same white background, grey border, radius
     and shadow, plus a thin gold top border) rather than colour-coding
     the first/last step, so the row reads as one professional set. */
  .fl-journey{
    display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
    align-items:stretch; margin-top:44px;
  }
  .fl-step{
    padding:26px 20px; border-radius:var(--radius); background:var(--paper);
    border:1px solid var(--line); border-top:3px solid var(--gold);
    box-shadow:var(--shadow-sm); text-align:center;
    transition:transform .2s ease, box-shadow .2s ease, border-top-color .2s ease;
  }
  .fl-step:hover{
    transform:translateY(-3px); box-shadow:var(--shadow-md); border-top-color:var(--gold-deep);
  }
  .fl-step-num{
    display:block; font-family:'Fraunces', serif; font-weight:600; line-height:1;
    font-size:clamp(2.1rem,4vw,2.7rem); color:var(--gold-deep);
  }
  .fl-step-title{
    display:block; margin-top:8px; font-family:'IBM Plex Mono', monospace; font-size:0.8rem;
    font-weight:700; letter-spacing:0.08em; color:var(--ink);
  }
  .fl-step-desc{margin-top:8px; font-size:0.88rem; line-height:1.5; color:var(--ink-soft);}

  .fl-arrow{position:relative; display:flex; align-items:center; justify-content:center; padding:0 4px; color:var(--gold-deep);}
  .fl-arrow::before{content:""; position:absolute; left:-2px; right:-2px; top:50%; height:1px; background:var(--gold); transform:translateY(-50%);}
  .fl-arrow span{position:relative; background:var(--paper); padding:2px 3px; line-height:1;}
  @media (max-width:860px){
    .fl-journey{grid-template-columns:1fr 1fr; gap:16px;}
    .fl-arrow{display:none;}
  }

  #pricing .wrap{text-align:center;}
  #pricing .section-head{margin-left:auto; margin-right:auto;}

  /* About Us gets a wider content column than the site default
     (1140px) so the two-column editorial tabs below have room to
     work with; scoped to this view only, not the wider site. */
  #who-we-are .wrap{text-align:center; max-width:1200px;}
  #who-we-are .section-head{margin-left:auto; margin-right:auto;}
  /* Heading and supporting copy both stay narrow and centred, reading
     as one compact hero rather than a wide editorial spread. The second
     heading line is picked out in gold italic, the same accent-line
     language used across the About Us tabs (see #aboutPanelStory h3
     em). */
  #who-we-are .about-lead{max-width:none;}
  #who-we-are .about-lead h2{
    font-size:clamp(2rem,3.4vw,2.75rem); max-width:780px; margin-left:auto; margin-right:auto;
    line-height:1.28;
  }
  #who-we-are .about-lead h2 em{font-style:italic; font-weight:500; color:var(--gold-deep);}
  #who-we-are .about-lead p{
    max-width:800px; margin:22px auto 0; text-align:center;
    font-size:1.05rem; line-height:1.75;
  }

  /* About Us experience band: shares the homepage ledger styling
     (see "Experience ledger" above), so the two always match. Only
     the label's backing patch differs, as this page sits on white. */
  #statBand{--ledger-bg:var(--paper);}

  /* Breathing room before the closing CTA: applied once to the wrap
     that holds the tabs + all six panels (only the active panel is
     ever visible, so this one rule covers every tab consistently,
     rather than needing a margin-bottom on .about-panel that could
     collapse through into the CTA below it). */
  #who-we-are .about-tabs-wrap{padding-bottom:clamp(40px,6vw,88px);}

  /* Closing CTA: same .final-cta identity as the homepage's copy (dark
     navy, gold button, same typography) but scoped by section so only
     the About Us instance gets shorter — the homepage CTA is
     untouched. */
  #who-we-are .final-cta{padding:30px 0;}
  #who-we-are .final-cta p{margin-top:6px;}
  #who-we-are .final-cta .hero-ctas{margin-top:14px;}

  #faq .wrap{text-align:center;}
  #faq .section-head{margin-left:auto; margin-right:auto;}
  #faq p{margin-left:auto; margin-right:auto;}
  /* Answers keep their own left alignment inside the centred column. */
  #faq .faq-answer p{margin-left:0; margin-right:0;}

  #results .wrap{text-align:center;}
  #results .section-head{margin-left:auto; margin-right:auto;}
  /* Every <p> here is capped by the global p{max-width:74ch}; without
     an auto margin the box itself sits flush left even though its text
     is centred. Centre the boxes too. */
  #results p{margin-left:auto; margin-right:auto;}
  #results .cc-year, #results .cc-school,
  #results .chart-caption, #results .testi-category{text-align:center;}
  #results .cc-head{text-align:center; margin-bottom:20px;}
  #results .year-toggle, #results .qual-toggle, #results .chart-legend{justify-content:center;}
  #results .method-disclosure{max-width:70ch; margin-left:auto; margin-right:auto;}
  #results .res-note{max-width:70ch; margin-left:auto; margin-right:auto; text-align:left;}
  #results .testi-rail-wrap, #results .testi-rail{text-align:left;}
  #results .testi-nav{justify-content:center;}
  #results .chart-card{padding:clamp(30px,4vw,48px) clamp(22px,3vw,40px);}
  /* Centred and width-capped on the WRAPPER, not .chart-shell itself:
     .chart-shell carries the 560px floor width that makes the scroll
     behaviour work on narrow screens (see the base rule), and putting
     max-width there too would fight that floor. */
  #results .chart-scroll{margin:18px auto 8px; max-width:860px;}

  /* ---------- Results: wide editorial text ----------
     The eyebrow + h2 above each of these stay centred (the
     "section-heading treatment" the supporting copy sits under), but the
     supporting paragraph itself widens to use the page's full content
     width and switches to left alignment. Centred text past roughly
     65-75 characters per line is hard to scan regardless of how wide the
     box is; left-aligning is what actually lets the wider box shorten
     the paragraph, rather than just spreading the same short lines
     further apart. */
  #results .section-head{max-width:1100px;}
  #results .section-head p{max-width:none; text-align:left;}

  /* ---------- Sign Up: page-level hierarchy centred ----------
     This page was the one view left out of the centred system. Headings,
     eyebrows and short supporting copy centre; the form itself, its labels
     and the step cards stay left-aligned, because a centred label above a
     left-aligned input is harder to use, not prettier. */
  #signup .wrap{text-align:center;}
  #signup .section-head{margin-left:auto; margin-right:auto;}
  #signup .section-head p, #signup > .wrap > p{margin-left:auto; margin-right:auto;}
  #signup .form-wrap{text-align:left; margin-left:auto; margin-right:auto;}
  #signup .hiw-grid, #signup .hiw-grid *{text-align:left;}
  #signup .lesson-note{text-align:left; max-width:70ch; margin-left:auto; margin-right:auto;}

  /* ---------- Policy documents: heading block centred only ----------
     Title, eyebrow and metadata centre so the documents share the site's
     page-level hierarchy. Clauses, lists and tables stay left-aligned:
     centred legal prose is measurably harder to read. */
  #terms .policy-doc, #privacy .policy-doc, #safeguarding-policy .policy-doc{
    margin-left:auto; margin-right:auto;
  }
  #terms .doc-head, #privacy .doc-head, #safeguarding-policy .doc-head{text-align:center;}
  #terms .doc-meta, #privacy .doc-meta, #safeguarding-policy .doc-meta{justify-content:center;}

  /* ---------- Policy tables: never push the page sideways ----------
     A long unbreakable contact address made the DSL table wider than a
     phone viewport. Allowing cell content to break keeps every policy
     table inside the page. */
  .policy-doc table{max-width:100%;}
  .policy-doc th, .policy-doc td{overflow-wrap:anywhere; word-break:break-word;}

  /* ---------- Interface icon system ----------
     Functional icons use one 24px outline language throughout: no emoji,
     filled stock symbols or font-dependent arrows. Brand artwork, flags,
     charts and teaching diagrams remain untouched because they convey
     content rather than interface actions. */
  .ui-icon{
    display:inline-block; width:1.05em; height:1.05em; flex:0 0 auto;
    fill:none; stroke:currentColor; stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round; vertical-align:-0.16em;
  }
  .text-link .ui-icon{width:1rem; height:1rem; margin-left:2px;}
  .tab-back-btn .ui-icon, .co-back .ui-icon{width:1rem; height:1rem;}
  .co-back{display:inline-flex; align-items:center; gap:7px; font-family:'Work Sans',sans-serif; font-size:.8rem; letter-spacing:0;}
  .testi-btn{display:grid; place-items:center;}
  .testi-btn .ui-icon{width:1.05rem; height:1.05rem;}
  .ts-arrow .ui-icon, .yp-arrow .ui-icon, .marking-flow i .ui-icon,
  .fl-arrow .ui-icon{width:1rem; height:1rem;}
  .marking-flow i{display:inline-flex; align-items:center;}
  .vid-play .ui-icon{width:1.75rem; height:1.75rem; margin-left:3px; stroke-width:1.8;}
  .vid-search-wrap .search-icon{
    position:absolute; z-index:1; left:13px; top:50%; width:1rem; height:1rem;
    color:var(--gold-deep); transform:translateY(-50%); pointer-events:none;
  }
  .vid-search-wrap::before{content:none;}
  .view-local-nav a.watch-local-link::before{
    content:""; font-size:0; color:transparent;
    background-color:var(--gold);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182033' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5l11 7-11 7z'/%3E%3C/svg%3E");
    background-position:center; background-repeat:no-repeat; background-size:13px 13px;
  }
  a[target="_blank"][rel~="noopener"]::after{
    content:""; display:inline-block; width:.82em; height:.82em; margin-left:.3em;
    background:currentColor; vertical-align:.02em;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5M10 14L19 5M19 13v6H5V5h6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5M10 14L19 5M19 13v6H5V5h6'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  /* Checklist ticks are drawn with the same rounded line weight rather
     than relying on a different glyph in each operating-system font. */
  .cred-list li::before, .co-trust li::before, .pfc-list li::before{
    content:""; width:6px; height:10px; margin:1px 5px 0 2px;
    border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
    transform:rotate(45deg); flex:0 0 auto;
  }

  /* Disclosure controls share one drawn plus/minus rather than a mixture
     of font glyphs. The words remain in the accessible summary text. */
  .method-disclosure summary::after, .tutor-more summary::after,
  .faq-item summary::after{
    content:""; display:inline-block; width:15px; height:15px; margin-left:8px;
    background:
      linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat,
      linear-gradient(currentColor,currentColor) center/1.5px 11px no-repeat;
  }
  .method-disclosure[open] summary::after, .tutor-more[open] summary::after,
  .faq-item[open] summary::after{
    content:"";
    background:linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat;
  }
  .faq-item summary::after{margin-left:0;}
  .form-more summary::before{
    content:""; display:inline-block; width:15px; height:15px; margin-right:8px;
    vertical-align:-2px; background:
      linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat,
      linear-gradient(currentColor,currentColor) center/1.5px 11px no-repeat;
  }
  .form-more[open] summary::before{
    content:""; background:linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat;
  }

  /* ---------- Results on small screens ----------
     The chart remains a real bar chart at every width now, rather than
     being replaced below 700px by stacked comparison rows. Below the
     shell's own 560px floor (see .chart-shell), .chart-scroll lets the
     reader scroll it horizontally instead of it being crushed into
     illegibility — bars, percentages and grade labels all stay at
     their normal, readable size; the chart is just wider than the
     screen. */
  @media (max-width:700px){
    #results .chart-legend{justify-content:flex-start;}
  }

  /* ---------- Large screens ----------
     .wrap stays at 1140px up to 1600px — that already reads as a
     deliberate, generous column on any laptop or a 1080p display. Only
     above that does the side margin start to look like leftover space
     rather than framing, so the content column widens twice more before
     settling at 1440px. .nav-row grows in step so the header's edges
     keep lining up with the page below it. Reading text is untouched:
     paragraphs are still capped in ch units, so a wider wrap gives more
     room to grids, cards and photos, never to a line of prose. */
  @media (min-width:1600px){
    .wrap, .nav-row{max-width:1280px;}
    .pf-wrap{max-width:1380px;}
  }
  @media (min-width:2200px){
    .wrap, .nav-row{max-width:1440px;}
    .pf-wrap{max-width:1540px;}
  }

  /* ============================================================
     PREMIUM HOMEPAGE LAYER — prototype, homepage-scoped
     ------------------------------------------------------------
     Extends the existing "hudha" motion language (same easing, the
     same gold-underline-draw and card-elevation vocabulary) with a
     few high-craft touches not yet present: a signature H1
     underline, a tasteful pointer-tilt with light on the three
     pillar cards (faux-3D, no WebGL), richer card depth, staggered
     card entrances, and gentle ambient life in the hero. Additive
     and reduced-motion safe. The pointer-tilt and hover elevation
     apply to the prominent cards site-wide (Programmes, Subjects,
     tutors, pricing). The hero touches and the staggered-grid
     entrance stay homepage-only, since those components live there.
     ============================================================ */
  :root{
    --ease-spring:cubic-bezier(.16,1,.3,1);
    --elev-rest:0 2px 4px rgba(24,32,51,0.05), 0 12px 26px -16px rgba(24,32,51,0.18);
    --elev-hover:0 8px 16px rgba(24,32,51,0.08), 0 30px 56px -22px rgba(24,32,51,0.32);
  }

  /* Hero signature: a gold underline draws beneath "Our Expertise." */
  .hero h1 em{position:relative;}
  .hero h1 em::after{
    content:""; position:absolute; left:0.02em; right:0.04em; bottom:-0.05em; height:0.05em;
    background:linear-gradient(90deg, var(--gold), var(--gold-deep));
    border-radius:4px; transform:scaleX(0); transform-origin:left center;
    animation:hudhaDrawLine .95s cubic-bezier(.22,.61,.36,1) .82s forwards;
  }

  /* Gentle ambient life in the hero decoration */
  @media (prefers-reduced-motion:no-preference){
    .hero-geo{animation:hudhaHeroFloat 11s ease-in-out infinite;}
  }
  @keyframes hudhaHeroFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

  /* Richer resting depth on the homepage pillar and tutor-preview cards */
  body:not(.view-mode) .preview-card,
  body:not(.view-mode) .team-preview-card{box-shadow:var(--elev-rest);}

  /* Staggered entrance: cascade the cards instead of revealing the
     whole grid as one block. Opacity-only, so it never fights the
     hover/tilt transforms. */
  @keyframes hudhaCardIn{from{opacity:0;}to{opacity:1;}}
  body:not(.view-mode) .preview-grid.reveal,
  body:not(.view-mode) .team-preview-grid.reveal{opacity:1; transform:none; transition:none;}
  body:not(.view-mode) .preview-grid.reveal > .preview-card,
  body:not(.view-mode) .team-preview-grid.reveal > .team-preview-card{opacity:0;}
  body:not(.view-mode) .preview-grid.reveal.in > .preview-card,
  body:not(.view-mode) .team-preview-grid.reveal.in > .team-preview-card{animation:hudhaCardIn .7s cubic-bezier(.22,.61,.36,1) both;}
  body:not(.view-mode) .preview-grid.reveal.in > *:nth-child(1),
  body:not(.view-mode) .team-preview-grid.reveal.in > *:nth-child(1){animation-delay:.05s;}
  body:not(.view-mode) .preview-grid.reveal.in > *:nth-child(2),
  body:not(.view-mode) .team-preview-grid.reveal.in > *:nth-child(2){animation-delay:.16s;}
  body:not(.view-mode) .preview-grid.reveal.in > *:nth-child(3),
  body:not(.view-mode) .team-preview-grid.reveal.in > *:nth-child(3){animation-delay:.27s;}
  body:not(.view-mode) .team-preview-grid.reveal.in > *:nth-child(4){animation-delay:.38s;}
  body:not(.view-mode) .team-preview-grid.reveal.in > *:nth-child(5){animation-delay:.49s;}
  body:not(.view-mode) .preview-grid.reveal.in > *:nth-child(4){animation-delay:.10s;}
  body:not(.view-mode) .preview-grid.reveal.in > *:nth-child(5){animation-delay:.21s;}
  body:not(.view-mode) .preview-grid.reveal.in > *:nth-child(6){animation-delay:.32s;}

  /* Signature pointer-tilt + light glare on the three pillar cards.
     The restrained, tasteful form of "3D": faux-depth via CSS
     transforms, fine-pointer only, never a WebGL scene. JS adds the
     .tilt class + .tilt-glare child and drives the CSS variables. */
  @media (hover:hover) and (pointer:fine){
    .preview-card.tilt, .team-preview-card.tilt, .course-card.tilt,
    .tutor-card.tilt, .price-focal-card.tilt{
      position:relative; isolation:isolate;
      transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
      transition:transform .5s var(--ease-spring), box-shadow .5s var(--ease-spring);
    }
    .tilt.is-tilting{transition:transform .12s linear, box-shadow .5s var(--ease-spring);}
    .preview-card.tilt:hover, .team-preview-card.tilt:hover, .course-card.tilt:hover,
    .tutor-card.tilt:hover, .price-focal-card.tilt:hover{--ty:-8px; box-shadow:var(--elev-hover);}
    /* Glare sits at z-index:-1 within the card's own stacking context
       (isolation:isolate), so it lights the card behind the text without
       touching the positioning of any badges or content. */
    .tilt .tilt-glare{
      position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0;
      transition:opacity .35s ease;
      background:radial-gradient(160px circle at var(--gx,50%) var(--gy,-40%), rgba(255,255,255,0.45), rgba(255,255,255,0) 60%);
    }
    .tilt.is-tilting .tilt-glare{opacity:1;}
  }

  /* Reduced motion: keep everything calm and static */
  @media (prefers-reduced-motion:reduce){
    .hero h1 em::after{animation:none; transform:scaleX(1);}
    .hero-geo{animation:none;}
    body:not(.view-mode) .preview-grid.reveal.in > .preview-card,
    body:not(.view-mode) .team-preview-grid.reveal.in > .team-preview-card{animation:none; opacity:1;}
    body:not(.view-mode) .team-preview-card:hover{transform:none;}
  }

  /* ============================================================
     AESTHETIC POLISH LAYER (site-wide, additive)
     ------------------------------------------------------------
     The "last 15%": typographic craft, on-brand form controls,
     refined data tables, a subtle view-to-view transition, a
     unified photo frame, and small details (selection colour,
     scrollbar). Additive and reduced-motion safe; nothing here
     changes copy or layout structure.
     ============================================================ */

  /* Text selection in the brand gold */
  ::selection{ background:rgba(199,154,59,0.26); color:var(--ink); }
  ::-moz-selection{ background:rgba(199,154,59,0.26); color:var(--ink); }

  /* Tabular figures wherever numbers line up (prices, stats, times, dates) */
  .pc-price-big, .pc-price-old, .pfc-then, .pfc-value, .pfc-lesson-hook, .pc-save,
  [class*="stat-num"], .as-num, .acal-card-dates, .sched-session-time,
  [data-gbp], .results-tab-stat, .about-story-figure, .co-summary-total, .er-row dd{
    font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  }

  /* Display type: keep Fraunces optically sized, tighten the hero a hair */
  h1, h2, h3{ font-optical-sizing:auto; }
  .hero h1{ letter-spacing:-0.016em; }

  /* On-brand form controls */
  input, select, textarea, [type="range"]{ accent-color:var(--gold); }
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color:var(--gold-deep); box-shadow:0 0 0 3px var(--gold-tint);
  }
  .field select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238A6423' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 15px center; padding-right:40px;
  }

  /* Refined content tables (legal notices + data) */
  .clause table{ border-collapse:collapse; width:100%; font-size:0.94rem; margin:6px 0 2px; }
  .clause table th, .clause table td{
    padding:11px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.5;
  }
  .clause table th{ font-family:'Work Sans', sans-serif; font-weight:600; color:var(--ink); background:var(--paper-dim); }
  .clause table tr:last-child td{ border-bottom:0; }
  .clause table tr:nth-child(even) td{ background:rgba(24,32,51,0.015); }

  /* A subtle fade-and-rise as each tab view opens. Fill mode is
     "backwards", not "both": a transform animation that stays in effect
     after it ends makes the panel the frame for position:fixed children,
     so the checkout's phone Continue bar sat at the foot of the page
     instead of the foot of the screen. The end state is the element's
     natural one, so nothing visible changes. */
  @media (prefers-reduced-motion:no-preference){
    .view-panel.active{ animation:hudhaViewIn .5s cubic-bezier(.22,.61,.36,1) backwards; }
  }
  @keyframes hudhaViewIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

  /* Unified frame on the large lifestyle photographs (tutor photos keep
     their own subject-coloured frame, so they are left alone) */
  .hero-photo, .pf-media{
    box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(199,154,59,0.12);
  }

  /* A quieter, on-brand scrollbar on pointer devices */
  @media (pointer:fine){
    html{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
    ::-webkit-scrollbar{ width:11px; height:11px; }
    ::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:8px; border:3px solid var(--paper); }
    ::-webkit-scrollbar-thumb:hover{ background:var(--gold-ui); }
    ::-webkit-scrollbar-track{ background:transparent; }
  }

  /* Hover-able pictures and preview cards read as clickable (JS makes
     them navigate to their natural page). A gentle image zoom on the
     large photographs signals the link without a heavy effect. */
  .hero-photo{ cursor:pointer; }
  .hero-photo img{ transition:transform .6s cubic-bezier(.16,1,.3,1); }
  .hero-photo:hover img{ transform:scale(1.045); }
  .team-preview-card{ cursor:pointer; }
  .team-preview-card:focus-visible, .hero-photo:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
  @media (prefers-reduced-motion:reduce){ .hero-photo:hover img{ transform:none; } }

  /* Subjects programme grid: cascade the cards in as they render, the
     same calm entrance the homepage uses. Opacity-only, so it never
     fights the card tilt. */
  @media (prefers-reduced-motion:no-preference){
    .course-grid .course-card{ animation:hudhaCardIn .55s cubic-bezier(.22,.61,.36,1) both; }
    .course-grid .course-card:nth-child(1){ animation-delay:.02s; }
    .course-grid .course-card:nth-child(2){ animation-delay:.08s; }
    .course-grid .course-card:nth-child(3){ animation-delay:.14s; }
    .course-grid .course-card:nth-child(4){ animation-delay:.20s; }
    .course-grid .course-card:nth-child(5){ animation-delay:.26s; }
    .course-grid .course-card:nth-child(6){ animation-delay:.32s; }
    .course-grid .course-card:nth-child(n+7){ animation-delay:.38s; }
  }

  /* Resources hub: the same calm cascade, tuned for a 14-card grid
     rather than 6 — faster steps so the tail doesn't lag. */
  @media (prefers-reduced-motion:no-preference){
    .res-grid .res-card{ animation:hudhaCardIn .5s cubic-bezier(.22,.61,.36,1) both; }
    .res-grid .res-card:nth-child(1){ animation-delay:.02s; }
    .res-grid .res-card:nth-child(2){ animation-delay:.06s; }
    .res-grid .res-card:nth-child(3){ animation-delay:.10s; }
    .res-grid .res-card:nth-child(4){ animation-delay:.14s; }
    .res-grid .res-card:nth-child(5){ animation-delay:.18s; }
    .res-grid .res-card:nth-child(6){ animation-delay:.22s; }
    .res-grid .res-card:nth-child(7){ animation-delay:.26s; }
    .res-grid .res-card:nth-child(8){ animation-delay:.30s; }
    .res-grid .res-card:nth-child(n+9){ animation-delay:.34s; }
  }

  /* Primary filled buttons get a touch of tactile depth: a soft top
     light and a refined shadow. Ghost/gold variants and the hover
     state reset it (their `background` shorthand clears the image). */
  .btn{
    background-image:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 58%);
    box-shadow:0 1px 1px rgba(24,32,51,0.18), 0 7px 16px -10px rgba(24,32,51,0.42);
  }

  /* The now-clickable tutor photos gain a gentle zoom cue on card hover */
  .tutor-card .tutor-photo img{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
  .tutor-card:hover .tutor-photo img{ transform:scale(1.08); }
  @media (prefers-reduced-motion:reduce){ .tutor-card:hover .tutor-photo img{ transform:none; } }

  /* Back-to-top control: appears after scrolling, sits below the banners
     and mobile bars so it never collides with them. */
  .to-top{
    position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:55;
    width:46px; height:46px; border-radius:50%; border:1px solid var(--ink);
    background:var(--ink); color:var(--paper); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px -6px rgba(24,32,51,0.5);
    opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
    transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1), background .2s ease, color .2s ease, border-color .2s ease;
  }
  .to-top.show{ opacity:1; transform:none; pointer-events:auto; }
  .to-top:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
  .to-top svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .to-top:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
  @media (prefers-reduced-motion:reduce){ .to-top{ transition:opacity .2s ease; transform:none; } }

  /* Sitewide floating WhatsApp button: always visible (unlike #toTop,
     which only fades in after scrolling), bottom-LEFT so the two never
     share a corner. Same visual language as #toTop (dark circle, gold on
     hover) rather than WhatsApp's own green, to read as a GuideMyGrades
     button, not a bolted-on third-party widget. */
  .whatsapp-float{
    position:fixed; left:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:56;
    width:52px; height:52px; border-radius:50%; border:1px solid var(--ink);
    background:var(--ink); color:var(--paper);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px -6px rgba(24,32,51,0.5);
    transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }
  .whatsapp-float:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); transform:translateY(-2px); }
  .whatsapp-float svg{ width:24px; height:24px; }
  /* The real WhatsApp glyph (from Simple Icons, MIT licensed) is a filled
     shape, not the stroke-only line icons the rest of the site uses via
     .ui-icon — this overrides fill/stroke wherever that glyph appears. */
  .wa-glyph{ fill:currentColor; stroke:none; }
  .whatsapp-float:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
  /* .sticky-cta (the full-width mobile CTA bar) covers this same bottom
     edge on the homepage below 780px — lift clear of it there. */
  @media (max-width:780px){
    body:not(.view-mode).mobile-sticky-visible .whatsapp-float{ bottom:calc(80px + env(safe-area-inset-bottom) + 14px); }
  }

  /* Footer + subfooter links pick up the site's drawn-underline motif
     instead of a plain browser underline, so link interactions read the
     same everywhere. */
  .foot-col li a, .subfoot-links a, .foot-contact a{ position:relative; text-decoration:none; }
  .foot-col li a::after, .subfoot-links a::after, .foot-contact a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
    background:var(--gold-deep); transform:scaleX(0); transform-origin:left center;
    transition:transform .3s cubic-bezier(.22,.61,.36,1);
  }
  .foot-col li a:hover, .subfoot-links a:hover, .foot-contact a:hover{ color:var(--ink); text-decoration:none; }
  .foot-col li a:hover::after, .subfoot-links a:hover::after, .foot-contact a:hover::after{ transform:scaleX(1); }
  @media (prefers-reduced-motion:reduce){
    .foot-col li a::after, .subfoot-links a::after, .foot-contact a::after{ transition:none; }
  }
  /* A whisper of gold along the footer's top edge */
  footer.home-only{ position:relative; }
  footer.home-only::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(199,154,59,0.5), transparent);
  }

  /* A gentle, skin-safe grade unifies the lifestyle photography with a
     touch more richness. Saturation/contrast only (no hue shift), so
     skin tones stay natural; the tutor face avatars are left untouched. */
  .hero-photo img, .pf-media img{ filter:saturate(1.06) contrast(1.04); }
/* Progressive enhancement: content stays visible without JavaScript. */
:root{--experience-ease:cubic-bezier(.2,.7,.2,1)}
/* Feature real teaching as the first invitation in the How It Works menu. */
#navHowItWorks .nav-dropdown-menu{min-width:286px}
#navHowItWorks .nav-dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
#navHowItWorks a.nav-watch-feature{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:5px;background:var(--ink);color:var(--on-dark);border:1px solid var(--gold);border-radius:9px;white-space:normal;box-shadow:0 5px 14px #18203318;transition:background .2s,box-shadow .2s}
#navHowItWorks a.nav-watch-feature:hover,#navHowItWorks a.nav-watch-feature:focus-visible{background:var(--navy-lift);color:var(--on-dark);box-shadow:0 5px 18px #18203330}
.nav-watch-play{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:var(--gold-bright);color:var(--ink)}
.nav-watch-play svg{width:17px;height:17px;fill:currentColor}
.nav-watch-copy{display:flex;flex-direction:column;gap:2px}
.nav-watch-copy strong{font-size:.9rem;font-weight:700;line-height:1.2}
.nav-watch-copy small{font-size:.7rem;font-weight:400;line-height:1.4;color:var(--on-dark-soft)}
.nav-watch-arrow{margin-left:auto;color:var(--gold-bright);font-size:1.1rem}
#navHowItWorks a.nav-watch-feature:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.hero{background:radial-gradient(ellipse at 85% 20%,#e4e8f1 0,transparent 42%),radial-gradient(ellipse at 10% 85%,#f5e6c8 0,transparent 45%),#f8f6ef;isolation:isolate}
.hero h1{letter-spacing:-.045em;line-height:1.1}
.hero-photo{border-radius:16px;box-shadow:0 24px 65px #18203320;transform:none}
.hero-availability{font-size:.78rem;color:var(--ink-soft);margin-top:12px}
.hero-hook{border-radius:20px;box-shadow:0 16px 48px #18203312}
.btn{transition:transform .25s var(--experience-ease),box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 22px #18203320}
.btn:active{transform:translateY(0)}
.subject-discovery{padding:70px 0;background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden}
.subject-discovery .eyebrow{color:var(--gold-bright)}
.discovery-heading{max-width:760px;margin:0 auto 28px;text-align:center}
.discovery-heading h2{font-size:clamp(2rem,3.7vw,3.4rem);line-height:1.15;letter-spacing:-.04em;color:inherit}
.discovery-heading h2 em{color:var(--gold-bright);font-weight:400}
.discovery-heading>p{max-width:600px;margin:18px auto 0;color:var(--on-dark-soft);font-size:1.05rem;line-height:1.7}
.discovery-heading>p strong{color:var(--on-dark);font-weight:600}
.subject-filters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:24px 0 32px}
.subject-filters[hidden]{display:none}
.subject-filters button{font:inherit;font-size:.8rem;padding:10px 17px;border:1px solid rgba(255,255,255,.3);border-radius:99px;background:transparent;color:var(--on-dark);cursor:pointer}
.subject-filters button[aria-pressed=true]{background:var(--gold-bright);color:var(--ink);border-color:var(--gold-bright)}
/* Flex rather than grid so a short row (five cards, or a filtered set) sits centred. */
.discovery-grid{--gap:14px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.discovery-grid>.discovery-card{flex:0 0 calc((100% - (var(--cols,6) - 1) * var(--gap)) / var(--cols,6))}
/* Each subject uses the site's own subject colour (the individual-subject
   palette in site-template.html), with its pale tint mixed from it. */
.subject-english{--subject-accent:var(--subj-english)}
.subject-physics{--subject-accent:var(--sci-physics)}
.subject-maths{--subject-accent:var(--soon-maths)}
.subject-further-maths{--subject-accent:var(--soon-further-maths)}
.subject-chemistry{--subject-accent:var(--soon-chemistry)}
.subject-economics{--subject-accent:var(--subj-economics)}
:where(.subject-english,.subject-physics,.subject-maths,.subject-further-maths,.subject-chemistry,.subject-economics){--subject-tint:color-mix(in srgb,var(--subject-accent) 10%,#fff)}
.discovery-card{position:relative;padding:23px 20px 44px;text-align:center;border-radius:16px;background:var(--subject-tint);color:#182033;text-decoration:none;transition:transform .3s var(--experience-ease),box-shadow .3s;min-width:0}
.discovery-card[hidden]{display:none}
.discovery-card:hover{transform:translateY(-8px);box-shadow:0 20px 35px #0003;color:#182033}
.discovery-photo{display:block;position:relative;aspect-ratio:4/3;margin:-23px -20px 22px;overflow:hidden;border-radius:16px 16px 0 0;background:#ddd8cc}
.discovery-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--experience-ease)}
.discovery-card:hover .discovery-photo img{transform:scale(1.04)}
.subject-index{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fffef2ec;font-family:monospace;font-size:.75rem;color:#182033;box-shadow:0 2px 8px #18203312}
.subject-status{font-size:.65rem;display:block;min-height:2.6em;line-height:1.35;color:var(--subject-accent);font-weight:600}
.discovery-card h3{font-size:1.35rem;margin:7px 0}
.discovery-card p{font-size:.74rem;color:#45535a}
.discovery-arrow{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:1.5rem;transition:transform .3s}
.discovery-card:hover .discovery-arrow{transform:translate(calc(-50% + 3px),-3px)}
.finder-count{font-size:.8rem;color:var(--on-dark-soft);margin-top:16px;min-height:1.4em;text-align:center}
.subject-art{position:relative;display:grid;place-content:center;aspect-ratio:1;border:1px solid var(--subject-accent);border-radius:50%;background:var(--subject-tint);color:var(--subject-accent);overflow:hidden}
.subject-art>span{font-size:clamp(6rem,13vw,12rem);font-family:'Fraunces',serif;text-align:center;line-height:1.3}
.subject-art small{font-family:monospace;letter-spacing:.12em;text-align:center;font-size:.65rem}
.subject-orbit{position:absolute;inset:18px;border:1px dashed var(--subject-accent);border-radius:50%;opacity:.4}
/* ---------- Subject pages: a hero built for a three-second visit ---------- */
.view-panel.subject-page{padding-top:0}
:where(.subject-page) section{padding:0}
/* Filled with the subject's own colour: a touch deeper at the top left,
   a soft lift behind the photo, and a fine gold rule along the bottom. */
.subject-hero{position:relative;overflow:hidden;padding:24px 0 76px;color:var(--on-dark);background:radial-gradient(ellipse 55% 70% at 85% 35%,color-mix(in srgb,var(--subject-accent) 80%,#fff),transparent 70%),linear-gradient(135deg,color-mix(in srgb,var(--subject-accent) 78%,#000) 0%,var(--subject-accent) 55%)}
.subject-hero::after{content:"";position:absolute;inset:auto 0 0;height:4px;background:linear-gradient(90deg,var(--gold),var(--gold-bright),var(--gold))}
.subject-crumbs{display:flex;gap:12px;flex-wrap:wrap;font-size:.8rem;margin-bottom:38px;color:rgba(255,255,255,.75)}
.subject-crumbs a{color:var(--gold-pale)}
.subject-hero-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:64px;align-items:center}
.status-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 11px;border-radius:99px;font-size:.74rem;font-weight:700;letter-spacing:.02em;background:#ffffff14;border:1px solid #ffffff26;color:#f9f7ef}
.status-pill i{width:8px;height:8px;border-radius:50%;background:#7fd4a2;box-shadow:0 0 0 4px #7fd4a233}
.status-pill.soon i{background:var(--gold-bright);box-shadow:0 0 0 4px #e2bd6a33}
.subject-kicker{margin:22px 0 0;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-pale)}
.subject-hero h1{font-size:clamp(2.5rem,5.2vw,4.6rem);line-height:1.04;letter-spacing:-.045em;margin:12px 0 22px;color:#fff}
.subject-hero h1 em{color:var(--gold-pale);font-weight:400}
.subject-tagline{font-size:1.12rem;line-height:1.7;max-width:52ch;color:rgba(255,255,255,.88);margin:0 0 24px}
.teacher-chip{display:inline-flex;align-items:center;gap:12px;padding:7px 18px 7px 7px;margin-bottom:26px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(249,235,196,.4)}
.teacher-chip img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--gold-pale)}
/* Monogram placeholder for a teacher with no photo yet: same circle as the photo. */
.teacher-chip .teacher-monogram{display:flex;align-items:center;justify-content:center;flex:0 0 46px;width:46px;height:46px;border-radius:50%;border:2px solid var(--gold-pale);background:#fff;color:var(--subject-accent);font-family:'Fraunces',serif;font-weight:600;font-size:1rem;line-height:1}
.teacher-chip span{font-size:.9rem;line-height:1.3;color:#fff}
.teacher-chip small{display:block;font-size:.74rem;color:rgba(255,255,255,.75);margin-top:2px}
.subject-hero .hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.subject-hero .btn{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--ink)}
.subject-hero .btn:hover{background:var(--gold-pale);color:var(--ink)}
.subject-hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.subject-hero .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.proof-strip{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:34px 0 0;padding:20px 0 0;border-top:1px solid #ffffff22}
.proof-strip li{padding-right:16px}
.proof-strip li+li{padding-left:18px;border-left:1px solid #ffffff22}
.proof-strip b{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.1;color:#fff;letter-spacing:-.02em}
.proof-strip span{display:block;font-size:.76rem;line-height:1.45;color:rgba(255,255,255,.75);margin-top:6px}
.proof-strip small{display:block;font-size:.7rem;line-height:1.4;color:rgba(255,255,255,.6);margin-top:2px}
/* A subject's headline figure (Economics: social video views), above the proof strip. */
.proof-feature{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:34px 0 0;padding-top:22px;border-top:1px solid #ffffff22}
.proof-feature b{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(3rem,5.4vw,4.4rem);line-height:.95;letter-spacing:-.04em;color:var(--gold-bright)}
.proof-feature>span{font-weight:600;font-size:1.02rem;line-height:1.35;color:#fff;max-width:20ch}
.proof-feature a{flex-basis:100%;font-size:.84rem;font-weight:600;color:var(--gold-pale);text-decoration:underline;text-decoration-color:#e2bd6a88;text-underline-offset:4px}
.proof-feature a:hover{color:#fff}
.proof-feature+.proof-strip{margin-top:22px}
.subject-hero-photo{position:relative;margin:0;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px #0006,0 0 0 1px #ffffff1a;background:var(--ink)}
.subject-hero-photo>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.subject-hero-photo:has(.hook-play)>img{filter:saturate(.9) brightness(.72)}
.subject-hero-photo figcaption{position:absolute;right:16px;top:16px;padding:6px 12px;border-radius:99px;background:#182033cc;color:#fff;font-size:.7rem;letter-spacing:.04em}
a.hook-play[target]::after{display:none}
.hook-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;text-align:center}
.hook-play-button{position:relative;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--gold-bright);color:var(--ink);box-shadow:0 12px 36px #0007;transition:transform .3s var(--experience-ease)}
.hook-play-button::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid #e2bd6aaa}
.hook-play-button svg{width:34px;height:34px;fill:currentColor;margin-left:5px}
.hook-play:hover .hook-play-button{transform:scale(1.08)}
.hook-play-copy strong{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:1.35rem;text-shadow:0 2px 12px #000a}
.hook-play-copy small{display:block;font-size:.78rem;margin-top:4px;color:#f1ede0;text-shadow:0 1px 8px #000a}
.hook-booklets{position:absolute;left:18px;right:18px;bottom:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;color:var(--ink)}
.hook-fan{position:relative;display:block;width:180px;height:150px;flex:none}
.hook-sheet{position:absolute;left:calc(var(--i)*26px);bottom:calc(var(--i)*6px);width:118px;height:148px;padding:12px 11px;border-radius:6px 10px 10px 6px;background:#fffdf6;border-left:6px solid var(--subject-accent);box-shadow:0 10px 26px #0005;transform:rotate(calc(-8deg + var(--i)*7deg));transform-origin:bottom left;display:flex;flex-direction:column;gap:6px;transition:transform .35s var(--experience-ease)}
.hook-booklets:hover .hook-sheet{transform:rotate(calc(-12deg + var(--i)*10deg)) translateY(-4px)}
.hook-sheet small{font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:var(--subject-accent);font-weight:700}
.hook-sheet b{font-family:'Fraunces',serif;font-weight:500;font-size:.95rem;line-height:1.15}
.hook-sheet i{margin-top:auto;font-style:normal;font-size:.55rem;font-weight:700;color:var(--subject-accent)}
.hook-booklets-copy{padding:12px 16px;border-radius:14px;background:#fffdf6f2;box-shadow:0 10px 26px #0004;text-align:right}
.hook-booklets-copy strong{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:1.15rem}
.hook-booklets-copy small{display:block;font-size:.76rem;font-weight:700;color:var(--subject-accent);margin-top:2px}
.video-dialog{margin:auto;padding:0;border:0;background:transparent;max-width:none;overflow:visible}
.video-dialog::backdrop{background:#0c111ee6}
.video-dialog-frame{width:min(92vw,960px,calc(86vh*16/9));aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.video-dialog-frame.is-vertical{width:min(92vw,calc(86vh*9/16));aspect-ratio:9/16}
.video-dialog-frame iframe{display:block;width:100%;height:100%;border:0}
.video-dialog-close{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:50%;border:1px solid #ffffff55;background:var(--ink);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer}
.subject-detail{padding-top:72px;padding-bottom:80px}
.subject-teacher{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;padding:40px;margin-bottom:72px;border-radius:26px;background:linear-gradient(120deg,var(--subject-tint),#f8f6ef 70%);border:1px solid var(--line)}
.subject-teacher>img{width:150px;height:150px;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 2px var(--subject-accent),0 16px 36px #18203326}
.subject-teacher>.teacher-monogram{display:flex;align-items:center;justify-content:center;width:150px;height:150px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 2px var(--subject-accent),0 16px 36px #18203326;background:var(--subject-tint);color:var(--subject-accent);font-family:'Fraunces',serif;font-weight:600;font-size:3rem;line-height:1}
.subject-teacher h2{font-size:clamp(1.9rem,3vw,2.6rem);margin:6px 0 2px}
.teacher-role{font-size:.85rem;color:var(--subject-accent);font-weight:700;margin-bottom:16px}
.teacher-creds{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0}
.teacher-creds li{padding:6px 12px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:.76rem;font-weight:600}
.subject-teacher p{line-height:1.75;max-width:66ch;margin-bottom:14px}
.teacher-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.teacher-links a{color:var(--subject-accent);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.subject-steps{margin-bottom:72px}
.subject-intro{max-width:680px;margin-bottom:8px}
.subject-intro h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.2;margin-top:10px}
.subject-learning-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0 0}
.learning-card{position:relative;padding:30px;border:1px solid var(--line);border-radius:18px;background:var(--paper);transition:transform .3s var(--experience-ease),box-shadow .3s}
.learning-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px #18203314}
.learning-number{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--subject-tint);font-family:monospace;color:var(--subject-accent);margin-bottom:22px}
.learning-card h3{font-size:1.25rem;margin-bottom:10px}
.learning-card p,.subject-next p{line-height:1.75}
.subject-shelf{padding:44px;margin-bottom:72px;border-radius:26px;background:var(--subject-tint);border:1px solid color-mix(in srgb,var(--subject-accent) 20%,transparent)}
.shelf-head{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;margin-bottom:28px}
.shelf-head h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.18;margin-top:10px}
.shelf-head p{line-height:1.75;color:#45535a}
.shelf-grid{display:grid;grid-template-columns:repeat(min(var(--n),3),minmax(0,1fr));gap:16px}
.shelf-grid[style="--n:1"]{max-width:560px}
.shelf-book{position:relative;display:flex;flex-direction:column;gap:6px;min-height:200px;padding:22px 22px 20px 28px;border-radius:8px 16px 16px 8px;background:#fffdf6;color:#182033;text-decoration:none;box-shadow:0 1px 0 #18203310,0 10px 24px #1820330f;transition:transform .3s var(--experience-ease),box-shadow .3s}
.shelf-book::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;border-radius:8px 0 0 8px;background:var(--subject-accent)}
.shelf-book:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 20px 36px #18203322;color:#182033}
.shelf-board{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--subject-accent)}
.shelf-book strong{font-family:'Fraunces',serif;font-weight:500;font-size:1.35rem;line-height:1.2}
.shelf-scope{font-size:.82rem;color:#45535a;line-height:1.5}
.shelf-count{margin-top:auto;padding-top:14px;font-family:monospace;font-size:.8rem}
.shelf-ms{font-size:.72rem;font-weight:700;color:var(--subject-accent)}
.shelf-small{font-size:.84rem;line-height:1.65;color:#45535a;margin:22px 0 20px;max-width:75ch}
.subject-shelf .btn{background:var(--subject-accent);border-color:var(--subject-accent)}
.subject-shelf .btn:hover{background:transparent;color:var(--subject-accent)}
.subject-times{margin-bottom:72px;padding:36px 40px;border:1px solid var(--line);border-radius:26px;background:var(--paper)}
.subject-times-line{font-size:1.1rem;line-height:1.6;margin:18px 0}
.subject-times-line .cal-event-time{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--subject-accent)}
.subject-times .tz-toggle{margin-bottom:0}
.subject-times .tz-footnote{margin:14px 0 16px}
.subject-times .text-link{color:var(--subject-accent);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.subject-curriculum{margin-bottom:72px}
.subject-curriculum .curric-map-figure{padding-bottom:0}
.subject-curriculum .map-download{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:center;align-items:center}
.subject-curriculum .map-download .text-link{color:var(--subject-accent);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.programme-strip{margin-bottom:72px}
.programme-strip h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:18px}
.programme-strip ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.programme-strip li{display:flex;flex-direction:column;gap:8px;padding:24px;background:var(--paper)}
.programme-strip li+li{border-left:1px solid var(--line)}
.pf-icon{font-family:'Fraunces',serif;font-size:1.6rem;line-height:1;color:var(--subject-accent)}
.programme-strip li>span:nth-child(2){font-weight:600;line-height:1.45}
.programme-strip a{margin-top:auto;font-size:.8rem;color:var(--subject-accent);text-decoration:underline;text-underline-offset:4px}
.subject-next{padding:48px;border-radius:26px;background:var(--ink);color:var(--on-dark);background-image:radial-gradient(ellipse 50% 90% at 100% 0%,color-mix(in srgb,var(--subject-accent) 45%,transparent),transparent 70%)}
.subject-next h2{font-size:clamp(1.8rem,3.2vw,2.6rem);color:inherit;max-width:24ch}
.subject-next p{max-width:62ch;margin:12px 0 22px;color:var(--on-dark-soft)}
.subject-next .text-link{color:inherit;margin-left:14px;text-decoration:underline;text-underline-offset:4px}
.subject-next .btn{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--ink)}
.subject-next .btn:hover{background:var(--gold-pale);color:var(--ink)}
@media(max-width:1000px){.subject-hero-grid{grid-template-columns:1fr;gap:40px}.subject-hero-photo{max-width:640px}.programme-strip ul{grid-template-columns:repeat(2,minmax(0,1fr))}.programme-strip li:nth-child(3){border-left:0}.programme-strip li:nth-child(n+3){border-top:1px solid var(--line)}.shelf-head{grid-template-columns:1fr;gap:12px}}
@media(max-width:700px){.subject-hero{padding-bottom:52px}.subject-hero h1{font-size:2.35rem}.subject-tagline{font-size:1rem}.proof-strip li+li{padding-left:12px}.proof-strip li{padding-right:8px}.proof-strip b{font-size:1.45rem}.subject-hero .hero-ctas .btn{flex:1 1 100%;text-align:center}.subject-teacher{grid-template-columns:1fr;gap:20px;padding:26px}.subject-teacher>img,.subject-teacher>.teacher-monogram{width:110px;height:110px}.subject-teacher>.teacher-monogram{font-size:2.3rem}.subject-shelf{padding:24px}.shelf-grid{grid-template-columns:1fr}.shelf-book{min-height:0}.subject-next{padding:28px}.subject-next .text-link{display:inline-block;margin:14px 0 0}.hook-fan{width:118px;height:96px}.hook-sheet{width:74px;height:96px;left:calc(var(--i)*18px);padding:8px 7px;gap:3px}.hook-sheet small{font-size:.45rem}.hook-sheet b{font-size:.7rem}.hook-sheet i{font-size:.45rem}.hook-booklets{left:12px;right:12px;bottom:12px}.hook-booklets-copy{padding:9px 12px}.hook-booklets-copy strong{font-size:.98rem}.hook-play-button{width:70px;height:70px}.subject-detail{padding-top:48px}.subject-steps,.subject-teacher,.subject-shelf,.programme-strip{margin-bottom:48px}}
@media(max-width:480px){.programme-strip ul{grid-template-columns:1fr}.programme-strip li+li{border-left:0;border-top:1px solid var(--line)}}
:where(.discovery-card,.subject-filters button,.subject-page a):focus-visible{outline:3px solid var(--gold);outline-offset:5px}
@media(prefers-reduced-motion:no-preference){
 .subject-orbit{animation:subjectOrbit 4s var(--experience-ease) both}
 .hero-copy{animation:experienceEnter .8s var(--experience-ease) both}
 .hero-photo{animation:experienceEnter 1s var(--experience-ease) both}
 .experience-arrive{animation:experienceEnter .65s var(--experience-ease) both}
 @keyframes experienceEnter{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
 @keyframes subjectOrbit{to{transform:rotate(360deg)}}
}
@media(max-width:1000px){.discovery-grid{--cols:3 !important}}
@media(max-width:700px){.discovery-heading>p{margin-top:16px;font-size:1rem}.discovery-grid{--cols:2 !important}.subject-discovery{padding:44px 0}.subject-art{width:220px;justify-self:center}.subject-art>span{font-size:6rem}.subject-learning-grid{grid-template-columns:1fr}.subject-crumbs{margin-bottom:28px}.discovery-card{padding:18px 14px 36px}.discovery-card h3{font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:700px){.discovery-photo{margin:-18px -14px 18px;aspect-ratio:1/1}.subject-status{min-height:3.5em}.hero-availability{font-size:.75rem}}
.teacher-note{position:relative;margin:4px 0 18px;padding:20px 24px 18px 26px;border-radius:0 16px 16px 0;border-left:4px solid var(--subject-accent);background:#fff}
.teacher-note p{font-family:'Fraunces',serif;font-size:1.08rem;line-height:1.65;margin:0 0 10px;max-width:none}
.teacher-note cite{display:block;font-style:normal;font-size:.78rem;font-weight:700;color:var(--subject-accent)}
@media(max-width:900px){.subject-learning-grid{grid-template-columns:1fr}.learning-number{margin-bottom:14px}}
@media(max-width:700px){.teacher-note{padding:16px 18px}.teacher-note p{font-size:1rem}}
/* "Who I'm looking for" pull-quote: the one line a skimming parent should
   not miss, so it sits above the letter, larger, on the subject colour. */
.teacher-pullquote{position:relative;margin:6px 0 20px;padding:26px 28px 20px 64px;border-radius:18px;background:var(--subject-accent);color:#fff;box-shadow:0 14px 34px #1820332e}
.teacher-pullquote::before{content:"\201C";position:absolute;left:18px;top:4px;font-family:'Fraunces',serif;font-size:4.2rem;line-height:1;color:#ffffffa6}
.teacher-pullquote blockquote{margin:0}
.teacher-pullquote p{font-family:'Fraunces',serif;font-size:clamp(1.12rem,1.6vw,1.32rem);font-weight:500;line-height:1.5;margin:0;max-width:none;color:#fff}
.teacher-pullquote figcaption{margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#ffffffd9}
.teacher-note a{color:var(--subject-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.teacher-note a:hover{text-decoration-thickness:2px}
@media(max-width:700px){.teacher-pullquote{padding:22px 18px 16px 48px}.teacher-pullquote::before{left:12px;font-size:3.4rem}}
/* ---------- Subject video rails (Economics reels, Physics TikToks) ---------- */
.subject-reels{margin-bottom:72px}
.reels-head{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:end;margin-bottom:30px}
.reels-intro h2{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.12;margin:10px 0 14px}
.reels-intro h2 em{color:var(--subject-accent);font-weight:400}
.reels-intro p{line-height:1.75;color:#45535a;max-width:56ch;margin:0}
.reels-intro a,.reels-note a{color:var(--subject-accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.reels-stat{padding:4px 0 4px 28px;border-left:3px solid var(--gold)}
.reels-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin:0}
.reels-figure b{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(3.2rem,6vw,4.4rem);line-height:.95;letter-spacing:-.04em;color:var(--gold)}
.reels-figure span{font-weight:600;line-height:1.35;max-width:17ch}
.reels-support{font-family:'Fraunces',serif;font-size:1.08rem;line-height:1.5;margin:12px 0 10px}
.reels-note{font-size:.76rem;line-height:1.6;color:#45535a;margin:0;max-width:52ch}
.reels-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid var(--gold);margin-bottom:16px}
.reels-status{font-size:.8rem;color:#45535a;margin:0}
.reels-arrows{display:flex;gap:8px}
.reels-arrows[hidden]{display:none}
.reels-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-size:1.1rem;cursor:pointer;transition:background .2s,color .2s}
.reels-arrow:hover:not(:disabled){background:var(--ink);color:#fff}
.reels-arrow:disabled{opacity:.3;cursor:default}
.reels-arrow:focus-visible,.reels-viewport:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.reels-viewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;border-radius:18px}
.reels-track{display:flex;gap:18px;list-style:none;margin:0;padding:4px 2px 18px}
.reel-card{flex:0 0 clamp(214px,calc((100% - 54px)/4),270px);scroll-snap-align:start;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--paper);overflow:hidden;content-visibility:auto;contain-intrinsic-size:auto 470px}
.reel-poster{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;aspect-ratio:4/5;padding:18px;color:#fff;text-decoration:none;background:var(--ink);background-image:radial-gradient(ellipse 90% 70% at 100% 0%,color-mix(in srgb,var(--subject-accent) 75%,transparent),transparent 70%),radial-gradient(ellipse 70% 50% at 0% 100%,#c79a3b33,transparent 70%)}
.reel-poster:hover{color:#fff}
.subject-page a.reel-poster:focus-visible{outline-offset:-5px}
a.reel-poster[target]::after{display:none}
.reel-rank{position:absolute;top:14px;left:16px;font-family:'Fraunces',serif;font-size:1.5rem;line-height:1;color:var(--gold-bright)}
.reel-rank::before{content:"#";font-size:.8em;opacity:.8}
.reel-glyph{position:absolute;top:14px;right:14px;width:22px;height:22px;color:#ffffffb3}
.reel-glyph svg{width:100%;height:100%}
.reel-play{position:absolute;top:42%;left:50%;display:grid;place-items:center;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--gold-bright);color:var(--ink);box-shadow:0 10px 28px #0006;transition:transform .3s var(--experience-ease)}
.reel-play svg{width:24px;height:24px;fill:currentColor;margin-left:3px}
.reel-poster:hover .reel-play,.reel-poster:focus-visible .reel-play{transform:scale(1.1)}
.reel-level{align-self:flex-start;padding:3px 9px;border-radius:99px;border:1px solid #e2bd6a99;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-pale)}
.reel-title{font-family:'Fraunces',serif;font-weight:500;font-size:1.12rem;line-height:1.22;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.reel-cue{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-bright)}
.reel-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0;padding:14px 16px 10px}
.reel-stats:has(>div:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
.reel-stats div{display:flex;flex-direction:column-reverse;gap:1px;min-width:0}
.reel-stats dt{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#45535a}
.reel-stats dd{margin:0;font-family:'Fraunces',serif;font-size:1.08rem;color:var(--ink)}
.reel-open{margin:auto 16px 0;padding:10px 0 14px;border-top:1px solid var(--line);font-size:.78rem;font-weight:600;color:var(--subject-accent);text-decoration:none}
.reel-open:hover{text-decoration:underline;text-underline-offset:3px}
a.reel-open[target]::after{display:none}
.reels-foot{margin-top:8px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:18px 32px}
.reels-index{flex:1 1 420px;min-width:0}
.reels-index summary{cursor:pointer;font-weight:600;color:var(--subject-accent);padding:10px 0}
.reels-index summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.reels-index-scroll{overflow-x:auto;max-height:520px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;margin-top:8px}
.reels-index table{width:100%;border-collapse:collapse;font-size:.82rem}
.reels-index th,.reels-index td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.reels-index thead th{position:sticky;top:0;background:var(--paper);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#45535a}
.reels-index tbody th{font-weight:500;white-space:normal;min-width:220px}
.reels-index tbody th a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.reels-index td{font-variant-numeric:tabular-nums}
.reels-index td:first-child{color:#45535a}
.reels-follow{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
.subject-reels .btn{background:var(--ink);border-color:var(--ink);color:#fff}
.subject-reels .btn:hover{background:transparent;color:var(--ink)}
.reels-follow .text-link{color:var(--subject-accent);text-decoration:underline;text-underline-offset:4px}
.video-dialog-frame.is-reel{width:min(92vw,420px);height:min(84vh,860px);aspect-ratio:auto;background:#fff}
.video-dialog-link{position:absolute;top:-40px;left:0;right:56px;color:#fff;font-size:.82rem;text-decoration:underline;text-underline-offset:3px}
.video-dialog-link[hidden]{display:none}
@media(max-width:1000px){.reels-head{grid-template-columns:1fr;gap:26px}}
@media(max-width:700px){.subject-reels{margin-bottom:48px}.reels-stat{padding-left:18px}.reel-card{flex-basis:74%}.reels-arrow{width:40px;height:40px}.reels-follow .btn{flex:1 1 100%;text-align:center}}


/* Founder names link to the subject each founder leads. They read as the
   name until hovered, then pick up that subject's colour and underline. */
.founder-link{color:inherit;text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1px;transition:color .2s ease}
.founder-link:hover,.founder-link:focus-visible{text-decoration:underline}
.founder-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.english .founder-link:hover,.english .founder-link:focus-visible{color:var(--english)}
.physics .founder-link:hover,.physics .founder-link:focus-visible{color:var(--physics)}
.econ .founder-link:hover,.econ .founder-link:focus-visible{color:var(--econ)}

/* Subject page testimonials: reuse the Results page cards and rail. */
.subject-testimonials{margin:clamp(56px,7vw,96px) 0}
.subject-testimonials .testi-rail-wrap{margin-top:24px}
.subject-testimonials-more{margin-top:18px;text-align:center}
@media(max-width:700px){.subject-times{padding:26px 22px}}

/* ==========================================================
   PREMIUM LAYER: the whole site, page by page
   ----------------------------------------------------------
   The booking pages (src/booking-flow.css) set the look: warm paper
   lit by soft gold-and-colour glows, white cards with a fine gradient
   edge, champagne panels for anything that should feel special, gold
   for the action that moves you on, and sentence-case labels rather
   than small typewriter capitals. This file carries that look to
   every other page: the shared furniture first (page ground, back
   link, section tabs, notes, cards, calls to action, FAQ, forms,
   footer), then the pages that had the least of it (How it works,
   Parents, First lesson, Contact, Timetable, legal pages, the lower
   homepage).

   Light throughout: the closing bands and boxes that were navy are
   champagne here. Tokens (--bf-*) are defined in booking-flow.css.
   Appended after experience.css and before booking-flow.css by
   build-multipage-site.js, so the booking pages keep their own,
   more specific rules. Screen only, so printed pages stay plain.
   ========================================================== */
@media screen{

/* ---------- Page ground ----------
   Every routed page gets the aurora wash and a dot grid that fades
   out down the page. Subject pages open on their own coloured hero,
   so they are left as they are. */
body[data-page] .view-panel.active:not(.subject-page){
  position:relative; isolation:isolate;
  background:var(--bf-aurora);
}
body[data-page] .view-panel.active:not(.subject-page)::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--bf-dots); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,0.35) 520px, transparent 1100px);
          mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,0.35) 520px, transparent 1100px);
}

/* ---------- Back link and section tabs ---------- */
.tab-back-btn{
  border-radius:999px; background:rgba(255,255,255,0.72); border-color:rgba(199,154,59,0.35);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 6px 16px -12px rgba(24,32,51,0.5);
}
.view-local-nav{gap:6px;}
.view-local-nav a:not(.watch-local-link){
  border-radius:999px; border-color:rgba(199,154,59,0.28); background:rgba(255,255,255,0.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.view-local-nav a:not(.watch-local-link):hover{background:#fff; border-color:var(--gold-ui); box-shadow:0 8px 16px -12px rgba(160,116,36,0.7);}
.view-local-nav a.active-local:not(.watch-local-link){
  color:var(--ink); border-color:rgba(199,154,59,0.6);
  background:linear-gradient(135deg, rgba(240,210,138,0.45), rgba(226,189,106,0.2));
  box-shadow:0 8px 16px -12px rgba(160,116,36,0.8);
}
.view-local-nav a.watch-local-link{border-radius:999px;}

/* ---------- Notes ----------
   The gold-ruled notes become frosted cards with a gold seal. */
.lesson-note{
  position:relative; padding:18px 22px 18px 66px;
  border:1px solid transparent; border-radius:18px;
  background:linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)) padding-box, var(--bf-edge) border-box;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 18px 36px -28px rgba(24,32,51,0.45);
}
.lesson-note::before{
  content:""; position:absolute; left:20px; top:18px; width:32px; height:32px; border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5M12 7.6v.4'/%3E%3C/svg%3E") center/17px no-repeat,
    var(--bf-gold-btn);
  box-shadow:0 6px 14px -6px rgba(160,116,36,0.8), inset 0 1px 0 rgba(255,255,255,0.5);
}
.lesson-note a{color:var(--ink); font-weight:600; border-bottom:1.5px solid var(--gold);}
@media (max-width:520px){
  .lesson-note{padding:58px 18px 18px;}
  .lesson-note::before{top:16px; left:18px;}
}

/* ---------- Cards ----------
   One card language: white, a fine gold-to-colour edge, a deep soft
   shadow and a small lift on hover. */
.hiw-card,
.lm-node,
.fl-step,
.eco-card,
.hiw-step,
#parents .proof-strip-item,
#timetable .rota-week{
  border:1px solid transparent; border-radius:20px;
  background:linear-gradient(#fff, #fff) padding-box, var(--bf-edge) border-box;
  box-shadow:var(--bf-card-shadow);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.hiw-card:hover,
.lm-node:hover,
.fl-step:hover,
.eco-card:hover,
#parents .proof-strip-item:hover{
  transform:translateY(-4px);
  box-shadow:0 1px 2px rgba(24,32,51,0.04), 0 32px 56px -30px rgba(24,32,51,0.38), 0 10px 22px -12px rgba(130,93,32,0.24);
}
.hiw-card::before{width:4px; border-radius:20px 0 0 20px; background:linear-gradient(180deg, var(--gold-bright), var(--gold-ui));}

/* Small labels on cards: sentence case in a soft gold pill. */
.hiw-card-label{
  display:inline-block; padding:4px 11px; border-radius:999px;
  font-family:'Work Sans', sans-serif; font-size:0.78rem; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--gold-deep); background:rgba(226,189,106,0.18); border:1px solid rgba(199,154,59,0.35);
}
.hiw-card h3{font-size:1.3rem;}
.hiw-assurance{
  border-radius:20px; border:1px solid rgba(199,154,59,0.35);
  background:var(--bf-champagne);
  box-shadow:var(--bf-champagne-edge), 0 16px 30px -24px rgba(130,93,32,0.6);
}

/* How it works: the four-step lesson loop. */
.lm-node{padding:22px 20px 22px;}
.lm-node.lm-start{
  border:1px solid rgba(199,154,59,0.55);
  background:var(--bf-champagne);
  box-shadow:var(--bf-champagne-edge), 0 24px 44px -28px rgba(130,93,32,0.7);
}
.lm-node-num{
  width:44px; height:44px; border:0; color:var(--gold-deep);
  background:radial-gradient(circle at 30% 25%, #fff, #F6E9C8);
  box-shadow:inset 0 0 0 1px rgba(199,154,59,0.45), 0 6px 14px -8px rgba(160,116,36,0.8);
}
.lm-node.lm-start .lm-node-num{color:var(--ink); background:var(--bf-gold-btn); box-shadow:0 8px 16px -8px rgba(160,116,36,0.9), inset 0 1px 0 rgba(255,255,255,0.5);}
.lm-node-title{font-family:'Fraunces', serif; font-size:1.08rem; font-weight:600; letter-spacing:0; text-transform:none;}
.lm-start-label{font-family:'Work Sans', sans-serif; font-size:0.72rem; font-weight:600; letter-spacing:0; text-transform:none; background:#fff; box-shadow:inset 0 0 0 1px rgba(199,154,59,0.4);}
.hiw-platform-line{
  display:table; margin:22px auto 0; padding:8px 18px; border-radius:999px;
  font-family:'Work Sans', sans-serif; font-size:0.86rem; font-weight:500; letter-spacing:0; color:var(--ink-soft);
  background:rgba(255,255,255,0.7); border:1px solid rgba(199,154,59,0.3);
}

/* First lesson: the four-step journey. */
.fl-step{border-top:1px solid transparent; padding:30px 22px 26px; position:relative; overflow:hidden;}
.fl-step::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright), var(--gold));
}
.fl-step-num{
  background:linear-gradient(180deg, #C99A3E, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fl-step-title{font-family:'Fraunces', serif; font-size:1.12rem; font-weight:600; letter-spacing:0; text-transform:none;}
.fl-arrow span{background:transparent;}

/* Parents: four plain text columns become numbered cards. */
#parents .proof-strip{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px;
  counter-reset:pm-proof;
}
#parents .proof-strip-item{
  max-width:none; padding:26px 22px 24px; text-align:left; counter-increment:pm-proof;
}
#parents .proof-strip-item::before{
  content:counter(pm-proof, decimal-leading-zero); display:grid; place-items:center;
  width:42px; height:42px; margin-bottom:16px; border-radius:13px;
  font-family:'Fraunces', serif; font-size:1rem; font-weight:600; color:var(--ink);
  background:var(--bf-gold-btn); box-shadow:0 8px 16px -10px rgba(160,116,36,0.9), inset 0 1px 0 rgba(255,255,255,0.5);
}
#parents .proof-strip-item h4{font-family:'Fraunces', serif; font-size:1.18rem; font-weight:600; color:var(--ink);}
#parents .proof-strip-item p{margin-top:9px;}
@media (max-width:1000px){ #parents .proof-strip{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:540px){ #parents .proof-strip{grid-template-columns:1fr;} }

/* Trust line and safeguarding links. */
.trust-line{
  display:table; padding:10px 20px; border-radius:999px;
  font-family:'Work Sans', sans-serif; font-size:0.9rem; font-weight:600; letter-spacing:0;
  background:var(--bf-champagne); border:1px solid rgba(199,154,59,0.4);
  box-shadow:0 12px 24px -20px rgba(130,93,32,0.7);
}

/* ---------- Calls to action ----------
   The "have a question?" line with a button, and the closing boxes
   and bands that were navy, all become champagne panels. */
.page-cta{
  position:relative; max-width:820px; margin:64px auto 0; padding:38px clamp(22px,5vw,56px) 40px;
  border:1px solid rgba(199,154,59,0.45); border-radius:26px;
  background:var(--bf-champagne);
  box-shadow:var(--bf-champagne-edge), 0 30px 56px -34px rgba(130,93,32,0.65);
}
.page-cta p{
  font-family:'Fraunces', serif; font-size:clamp(1.3rem,2.4vw,1.65rem); font-weight:600;
  letter-spacing:-0.01em; text-transform:none; line-height:1.25; color:var(--ink);
}
.faq-cta,
#how-we-teach-preview .curric-callout{
  color:var(--ink); border:1px solid rgba(199,154,59,0.45); border-radius:26px;
  background:
    radial-gradient(520px 260px at 50% -10%, rgba(226,189,106,0.45), transparent 70%),
    linear-gradient(170deg, #FFFDF8 0%, #FBF3E1 60%, #F6EAD0 100%);
  box-shadow:var(--bf-champagne-edge), 0 34px 60px -36px rgba(130,93,32,0.7);
}
#how-we-teach-preview .curric-callout::after{display:none;}
.faq-cta h3,
#how-we-teach-preview .curric-callout h4{color:var(--ink);}
.faq-cta p,
#how-we-teach-preview .curric-callout p{color:var(--ink-soft);}
#how-we-teach-preview .curric-callout .text-link{background:var(--bf-gold-btn); box-shadow:0 12px 22px -14px rgba(160,116,36,0.9), inset 0 1px 0 rgba(255,255,255,0.5);}
.final-cta:not(:has(.home-cta)){
  color:var(--ink); border-top:1px solid rgba(199,154,59,0.45); border-bottom:1px solid rgba(199,154,59,0.3);
  background:
    radial-gradient(760px 320px at 50% 0%, rgba(226,189,106,0.42), transparent 70%),
    radial-gradient(520px 300px at 100% 100%, rgba(226,189,106,0.18), transparent 70%),
    linear-gradient(175deg, #FFFDF8 0%, #FBF3E1 60%, #F6EAD0 100%);
}
.final-cta:not(:has(.home-cta)) h2{color:var(--ink);}
.final-cta:not(:has(.home-cta)) p{color:var(--ink-soft);}

/* Subjects page help box: same champagne panel as the other calls to action. */
.prog-help-cta{
  border:1px solid rgba(199,154,59,0.45); border-radius:26px;
  background:var(--bf-champagne);
  box-shadow:var(--bf-champagne-edge), 0 30px 56px -34px rgba(130,93,32,0.65);
}
.prog-help-cta h3{font-size:clamp(1.3rem,2.4vw,1.6rem);}
.prog-help-cta .btn{
  background:var(--bf-gold-btn); color:var(--ink); border:1px solid #B5862F; border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55), 0 14px 26px -14px rgba(160,116,36,0.85);
}
.prog-help-cta .btn:hover{background:var(--bf-gold-btn); color:var(--ink); filter:saturate(1.08) brightness(1.03);}

/* Buttons written for a navy ground, now on a light one. */
:is(.page-cta, .faq-cta, .final-cta) .btn.on-dark,
:is(.page-cta, .faq-cta, .final-cta) .btn:not(.ghost):not(.ghost-dark){
  background:var(--bf-gold-btn); color:var(--ink); border:1px solid #B5862F; border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55), 0 14px 26px -14px rgba(160,116,36,0.85);
}
:is(.page-cta, .faq-cta, .final-cta) .btn.on-dark:hover,
:is(.page-cta, .faq-cta, .final-cta) .btn:not(.ghost):not(.ghost-dark):hover{
  background:var(--bf-gold-btn); color:var(--ink); filter:saturate(1.08) brightness(1.03);
}
:is(.page-cta, .faq-cta, .final-cta) .btn.ghost-dark,
:is(.page-cta, .faq-cta, .final-cta) .btn.ghost{
  color:var(--ink); border-color:rgba(199,154,59,0.6); border-radius:14px; background:rgba(255,255,255,0.75);
}
:is(.page-cta, .faq-cta, .final-cta) .btn.ghost-dark:hover,
:is(.page-cta, .faq-cta, .final-cta) .btn.ghost:hover{background:#fff; color:var(--ink); border-color:var(--gold-ui);}

/* ---------- FAQ ----------
   Each question becomes its own card; the open one turns champagne
   and its plus turns into a gold close mark. */
.faq-list{border-top:0; display:grid; gap:12px;}
.faq-item{
  padding:20px 64px 20px 24px; border:1px solid rgba(24,32,51,0.08); border-left:1px solid rgba(24,32,51,0.08);
  border-radius:18px; background:rgba(255,255,255,0.85);
  box-shadow:0 12px 26px -22px rgba(24,32,51,0.55);
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.faq-item:hover{border-color:rgba(199,154,59,0.45); background:#fff;}
.faq-item[open]{
  border-color:rgba(199,154,59,0.55); border-left-color:rgba(199,154,59,0.55);
  background:var(--bf-champagne);
  box-shadow:var(--bf-champagne-edge), 0 20px 36px -26px rgba(130,93,32,0.65);
}
.faq-item summary{position:relative;}
/* The plus and minus are drawn with gradients (see the shared
   disclosure rule in the template); the circle is one more layer. */
.faq-item summary::after{
  right:-44px; top:50%; width:32px; height:32px; margin-top:-16px; border-radius:50%;
  color:var(--gold-deep);
  background:
    linear-gradient(currentColor,currentColor) center/12px 1.8px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.8px 12px no-repeat,
    rgba(226,189,106,0.18);
  box-shadow:inset 0 0 0 1px rgba(199,154,59,0.4);
}
.faq-item[open] summary::after{
  color:var(--ink);
  background:
    linear-gradient(currentColor,currentColor) center/12px 1.8px no-repeat,
    var(--bf-gold-btn);
  box-shadow:0 6px 12px -6px rgba(160,116,36,0.9);
}
.faq-jump-btn{
  border-radius:999px; background:rgba(255,255,255,0.75); border-color:rgba(199,154,59,0.3);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.faq-jump-btn:hover{background:#fff; box-shadow:0 8px 16px -12px rgba(160,116,36,0.7);}
.faq-group-title h3{font-size:1.75rem;}
.faq-group-count{font-family:'Work Sans', sans-serif; letter-spacing:0; text-transform:none; border-radius:999px;}
@media (max-width:560px){
  .faq-item{padding:18px 18px;}
  .faq-item summary::after{right:auto; top:auto; margin-top:12px;}
}

/* ---------- Contact ---------- */
#signup .hiw-grid{gap:14px; border:0; background:none; overflow:visible;}
#signup .hiw-step{border-right:1px solid transparent; padding:24px 20px;}
#signup .hiw-step:last-child{
  border:1px solid rgba(30,122,68,0.3);
  background:linear-gradient(160deg, #F4FBF6, #E6F4EB);
}
#signup .hiw-num{
  width:34px; height:34px; color:var(--ink); background:var(--bf-gold-btn);
  font-family:'Fraunces', serif; font-size:0.95rem;
  box-shadow:0 8px 16px -10px rgba(160,116,36,0.9), inset 0 1px 0 rgba(255,255,255,0.5);
}
#signup .hiw-step:last-child .hiw-num{background:linear-gradient(135deg, #2D9A5A, var(--green)); color:#fff;}
#signup .hiw-step h4{font-weight:600; font-size:1.08rem;}
#signup .form-wrap{border-radius:26px;}
#signup .field label{font-family:'Work Sans', sans-serif; font-size:0.82rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink-soft);}
#signup .field input,
#signup .field select,
#signup .field textarea{
  min-height:50px; padding:13px 16px; border-radius:14px;
  border:1.5px solid rgba(24,32,51,0.12); background-color:#FAF8F4;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#signup .field textarea{min-height:110px;}
#signup .field select{padding-right:42px;}
#signup .field input:hover,
#signup .field select:hover,
#signup .field textarea:hover{border-color:rgba(24,32,51,0.24); background-color:#fff;}
#signup .field input:focus,
#signup .field select:focus,
#signup .field textarea:focus{
  background-color:#fff; border-color:var(--gold-ui);
  box-shadow:0 0 0 4px rgba(226,189,106,0.28), 0 8px 18px -12px rgba(160,116,36,0.6);
}
#signup .co-consent{
  border-radius:18px; border:1px solid rgba(199,154,59,0.3);
  background:radial-gradient(380px 160px at 100% 0%, rgba(226,189,106,0.2), transparent 70%), linear-gradient(180deg, #FDFAF3, #F9F3E6);
}
#signup .form-wrap .btn{
  background:var(--bf-gold-btn); color:var(--ink); border:1px solid #B5862F; border-radius:14px; min-height:50px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55), 0 14px 26px -14px rgba(160,116,36,0.85);
}
#signup .form-wrap .btn:hover{background:var(--bf-gold-btn); color:var(--ink); filter:saturate(1.08) brightness(1.03);}

/* ---------- Timetable ----------
   Each subject's week becomes a white card; day names read as words,
   not typewriter capitals. */
#timetable .rota-week{border-left:1px solid transparent; padding:22px 22px 22px; position:relative; overflow:hidden;}
#timetable .rota-week::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--sched-accent, var(--gold)), color-mix(in srgb, var(--sched-accent, var(--gold)) 40%, var(--gold-bright)));
}
#timetable .sched-day-label{
  font-family:'Fraunces', serif; font-size:1rem; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--sched-accent, var(--ink)); border-bottom:1px dashed rgba(24,32,51,0.14);
}
#timetable .cal-title{font-size:2rem;}

/* ---------- Legal pages ----------
   The document sits on a sheet of paper with a champagne header. */
#terms .policy-doc,
#privacy .policy-doc,
#safeguarding-policy .policy-doc{
  max-width:900px; padding:0 clamp(20px,5vw,64px) 56px; overflow:hidden;
  border:1px solid transparent; border-radius:28px;
  background:linear-gradient(#fff, #fff) padding-box, var(--bf-edge) border-box;
  box-shadow:var(--bf-card-shadow);
}
#terms .doc-head,
#privacy .doc-head,
#safeguarding-policy .doc-head{
  margin:0 calc(-1 * clamp(20px,5vw,64px)); padding:56px clamp(20px,5vw,64px) 36px;
  border-bottom:1px solid rgba(199,154,59,0.35);
  background:
    radial-gradient(520px 240px at 50% 0%, rgba(226,189,106,0.42), transparent 70%),
    linear-gradient(175deg, #FFFDF8 0%, #FBF3E1 100%);
}
.policy-doc .summary-box{
  border:1px solid rgba(199,154,59,0.45); border-left:1px solid rgba(199,154,59,0.45); border-radius:20px;
  background:var(--bf-champagne);
  box-shadow:var(--bf-champagne-edge), 0 18px 34px -26px rgba(130,93,32,0.6);
}
.policy-doc .summary-box h2{font-size:1.3rem;}
.policy-doc .summary-box li::marker{color:var(--gold-ui);}
.policy-doc .toc{border:1px solid rgba(24,32,51,0.08); border-radius:20px; background:#FAF8F4; padding:24px 28px;}
.policy-doc .toc h2{font-family:'Fraunces', serif; font-size:1.2rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink);}
.policy-doc .toc ol{columns:2; column-gap:36px;}
.policy-doc .toc li{break-inside:avoid;}
.policy-doc .toc li::marker{color:var(--gold-ui); font-weight:600;}
.policy-doc .toc a{text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s ease;}
.policy-doc .toc a:hover{border-bottom-color:var(--gold);}
@media (max-width:640px){ .policy-doc .toc ol{columns:1;} }
section.clause h2 .num{
  display:inline-grid; place-items:center; min-width:34px; height:34px; padding:0 6px; border-radius:11px;
  font-family:'Fraunces', serif; font-size:0.95rem; color:var(--ink); align-self:center;
  background:var(--bf-gold-btn); box-shadow:0 6px 12px -8px rgba(160,116,36,0.9), inset 0 1px 0 rgba(255,255,255,0.5);
}
section.clause h2{align-items:center;}

/* ---------- Numbers ----------
   Headline figures pick up a gold gradient. */
.stat-num .stat-figure,
.rp-num{
  background:linear-gradient(180deg, var(--ink) 20%, #6E4C14 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-num .stat-plus{color:var(--gold-ui);}

/* ---------- Programme finder (Subjects page) ----------
   A frosted card with a gold-lit top, step chips beside each title,
   rounded pills in the body font, gold for the chosen qualification
   and the subject's own colour for the chosen subject. "Browse all
   programmes" is a <button class="text-link"> that was falling back
   to the browser's grey button; it becomes a proper champagne pill. */
.prog-filter{
  max-width:1000px; margin:34px auto 22px; overflow:visible;
  border:1px solid transparent; border-radius:26px;
  background:
    linear-gradient(180deg, rgba(255,251,240,0.96), rgba(255,255,255,0.96) 46%) padding-box,
    var(--bf-edge) border-box;
  box-shadow:var(--bf-card-shadow);
}
.prog-filter-divider{margin:22px 0; background:linear-gradient(180deg, transparent, rgba(199,154,59,0.5), transparent);}
.prog-filter-col{padding:24px clamp(20px,3vw,32px) 26px;}
/* A legend sits in the fieldset's border area, above the padding;
   floating it puts it back inside the padded column like any heading. */
.prog-filter-col legend{float:left; width:100%; margin-bottom:6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.prog-filter-col legend + *{clear:both;}
.prog-filter-step{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-family:'Work Sans', sans-serif; font-size:0.76rem; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--ink); background:var(--bf-gold-btn);
  box-shadow:0 6px 12px -8px rgba(160,116,36,0.9), inset 0 1px 0 rgba(255,255,255,0.5);
}
.prog-filter-col-title{display:inline; margin:0; font-size:1.25rem;}
.prog-filter-btns{gap:10px; margin-top:16px;}
.prog-filter-btn{
  font-family:'Work Sans', sans-serif; font-size:0.9rem; font-weight:600; letter-spacing:0;
  padding:10px 18px; border-radius:999px; border:1px solid rgba(24,32,51,0.12);
  background:#fff; color:var(--ink);
  box-shadow:0 8px 16px -14px rgba(24,32,51,0.7);
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.prog-filter-btn:not(.is-coming-soon):hover{transform:translateY(-1px); border-color:var(--gold-ui); box-shadow:0 12px 20px -14px rgba(160,116,36,0.8);}
.prog-filter-btn:focus-visible,
.prog-filter-browse-all:focus-visible{outline:3px solid rgba(199,154,59,0.55); outline-offset:3px;}
.prog-filter-btn[aria-pressed="true"]{
  color:var(--ink); border-color:#B5862F; background:var(--bf-gold-btn);
  box-shadow:0 10px 18px -12px rgba(160,116,36,0.9), inset 0 1px 0 rgba(255,255,255,0.5);
}
.prog-filter-dot{width:10px; height:10px; box-shadow:0 0 0 3px color-mix(in srgb, var(--sc, var(--ink-faint)) 18%, transparent);}
.prog-filter-btn.has-colour[aria-pressed="true"]{
  background:linear-gradient(135deg, var(--sc-tint), #fff 85%); border-color:var(--sc); color:var(--sc-text, var(--sc));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sc, var(--ink)) 16%, transparent), 0 12px 20px -14px var(--sc, var(--ink));
}
.prog-filter-btn.is-coming-soon .prog-filter-status{font-family:'Work Sans', sans-serif; font-size:0.7rem; letter-spacing:0; text-transform:none;}
.prog-filter-browse-all{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:inline-flex; gap:8px; justify-content:center; margin-top:14px; padding:10px 18px;
  font:600 0.88rem/1.2 'Work Sans', sans-serif; color:var(--ink);
  border:1px dashed rgba(199,154,59,0.7); border-radius:999px; background:var(--bf-champagne);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* Both states set the arrow in full: the shared .text-link:hover::after
   underline rule would otherwise replace it. */
.prog-filter-browse-all::after,
.prog-filter-browse-all:hover::after{
  content:""; position:static; width:14px; height:14px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23825D20' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s ease;
}
.prog-filter-browse-all:hover{border-style:solid; border-color:var(--gold-ui); box-shadow:0 10px 18px -14px rgba(160,116,36,0.85);}
.prog-filter-browse-all:hover::after{transform:translateX(3px);}
.prog-results-heading{
  margin:22px 0 18px; text-align:center;
  font-family:'Fraunces', serif; font-size:1.15rem; font-weight:600; letter-spacing:0; color:var(--ink);
}
@media (max-width:680px){
  .prog-filter-col{border-bottom:1px dashed rgba(199,154,59,0.4);}
  .prog-filter-browse-all{width:100%;}
}

/* ---------- Homepage ---------- */
.eco-card{padding:28px 24px;}
#how-we-teach-preview .eco-icon{box-shadow:0 8px 16px -10px rgba(160,116,36,0.8);}
.home-cta-tag{font-family:'Work Sans', sans-serif; letter-spacing:0.01em; text-transform:none;}
.final-cta .home-cta .home-cta-facts{font-family:'Work Sans', sans-serif; font-size:0.86rem; font-weight:500; letter-spacing:0;}
.lm-repeat span{font-family:'Work Sans', sans-serif; font-size:0.8rem; font-weight:600; letter-spacing:0; text-transform:none; border-radius:999px;}

/* ---------- Footer ----------
   Warm champagne with a gold rule, column titles in the serif. */
footer{
  border-top:1px solid rgba(199,154,59,0.45);
  background:
    radial-gradient(700px 260px at 15% 0%, rgba(226,189,106,0.28), transparent 70%),
    radial-gradient(600px 260px at 100% 100%, rgba(226,189,106,0.14), transparent 70%),
    linear-gradient(180deg, #FCF7EC 0%, #F5ECD8 100%);
}
.foot-col h4{
  font-family:'Fraunces', serif; font-size:1.05rem; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--ink); margin-bottom:12px;
}
.foot-col a{transition:color .2s ease;}
.foot-col a:hover{color:var(--gold-deep); text-decoration:none;}
.company-registration,
.foot-bottom{font-family:'Work Sans', sans-serif; letter-spacing:0; border-top-color:rgba(199,154,59,0.3);}

/* ---------- "Included in every programme" (Subjects) ----------
   A flat cream strip becomes a white card: champagne title row,
   gold icon medallions, soft gold dividers. */
.prog-includes{
  border:1px solid transparent; border-radius:22px;
  background:linear-gradient(#fff, #fff) padding-box, var(--bf-edge) border-box;
  box-shadow:var(--bf-card-shadow);
}
.prog-includes-head{
  display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 18px;
  color:var(--ink); font-family:'Fraunces', serif; font-size:1.1rem; font-weight:600;
  background:radial-gradient(420px 120px at 50% 0%, rgba(226,189,106,0.35), transparent 70%), linear-gradient(180deg, #FFFCF5, #FBF3E1);
  border-bottom:1px solid rgba(199,154,59,0.35);
}
.prog-includes-head::before,
.prog-includes-head::after{content:""; width:28px; height:1px; background:linear-gradient(90deg, transparent, var(--gold));}
.prog-includes-head::after{transform:scaleX(-1);}
.prog-includes-item{padding:20px 22px;}
.prog-includes-item + .prog-includes-item{border-left:1px dashed rgba(199,154,59,0.4);}
.prog-includes-icon{
  width:42px; height:42px; border:0;
  background:radial-gradient(circle at 30% 25%, #fff, #F6E9C8);
  box-shadow:inset 0 0 0 1px rgba(199,154,59,0.5), 0 8px 16px -10px rgba(160,116,36,0.85);
}
@media (max-width:760px){
  .prog-includes-item + .prog-includes-item{border-left:0; border-top:1px dashed rgba(199,154,59,0.4);}
}

/* ---------- Homepage teaching slideshow ----------
   The words beside each lesson photo sat loose on a plain band; they
   now sit on a frosted card in the slide's own subject colour. */
.tf-band{
  background:
    radial-gradient(800px 420px at 85% 10%, rgba(226,189,106,0.22), transparent 70%),
    radial-gradient(700px 420px at 0% 100%, rgba(44,90,160,0.06), transparent 70%),
    linear-gradient(180deg, #FCF8F0, #F7F1E5);
}
.tf-band .pf-copy{
  position:relative; padding:clamp(26px,3vw,38px); border-radius:24px; border:1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,0.86), rgba(255,255,255,0.86)) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--pf-accent, var(--gold)) 55%, #fff), rgba(199,154,59,0.35) 55%, rgba(199,154,59,0.15)) border-box;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 30px 56px -34px color-mix(in srgb, var(--pf-accent, var(--ink)) 55%, rgba(24,32,51,0.5)), 0 8px 18px -12px rgba(130,93,32,0.2);
}
.tf-band .pf-copy::before{
  content:""; position:absolute; left:26px; right:26px; top:0; height:4px; border-radius:0 0 4px 4px;
  background:linear-gradient(90deg, var(--pf-accent, var(--gold)), var(--gold-bright));
}

/* ---------- Floating buttons on phones ----------
   The 52px WhatsApp circle sat over body text and stacked on the
   "Book a place" bar. On phones it becomes a slim tab docked to the
   left edge, always above the bar's height, so it stays one tap away
   without covering the page. Back-to-top shrinks to match. */
@media (max-width:780px){
  /* Gold, so the tab reads on the dark bands as well as the light ones. */
  .whatsapp-float,
  body:not(.view-mode).mobile-sticky-visible .whatsapp-float{
    left:0; bottom:calc(104px + env(safe-area-inset-bottom));
    width:42px; height:46px; border:1px solid #B5862F; border-left:0; border-radius:0 14px 14px 0;
    color:var(--ink); background:var(--bf-gold-btn);
    box-shadow:4px 8px 18px -8px rgba(24,32,51,0.55), inset 0 1px 0 rgba(255,255,255,0.45);
  }
  .whatsapp-float svg{width:21px; height:21px;}
  .to-top{width:42px; height:42px; bottom:calc(106px + env(safe-area-inset-bottom));}
}
/* The site marks every new-tab link with a small arrow; on a round icon
   button it just looked like a stray glyph. The label says what it does. */
#whatsappFloat::after{display:none;}

/* ---------- Labels: sentence case, body font ----------
   The last of the small, wide-tracked typewriter capitals. Section
   eyebrows stay as each panel's one label; everything else reads as
   ordinary text. Left in the typewriter face on purpose: times
   ("09:30–10:00"), paper and spec codes, countdown and booklet
   counts, and the mock exam-booklet pages in the Resources heroes
   (.qf-*, .xe-page-head, .xe-row-tag, .xp-*), which copy real exam
   papers, plus the rotated "£1 per topic" stamp (.xe-price). */
th,
.reels-index thead th,
.res-premium-label, .res-badge, .res-group-label, .res-qbt-soon, .qbt-soon,
.xe-card-topic, .xe-kicker, .xe-pill, .xe-sample-label, .xe-stats dt,
.xc-card-qual, .xc-level-eyebrow, .xc-card-soon, #exam-dates .field label,
.vid-subject, .vid-featured, .vid-more-label, .watch-parent-label, .watch-library-line strong,
.cont-anchor, .faq-price-level, .prog-includes-head, .cc-year, .cc-school,
.testi-category, .testi-voice, .testi-readmore, .testi-role, .testi-teacher, .testi-count, .testi-qual-line,
.grade-tag, figcaption.attribution, .teacher-pullquote figcaption,
.ws-role, .ws-status, .ws-levels, .tpc-role, .pf-credit,
.hh-tag, .hh-cd-label, .hh-cd-name, .hh-price-lead, .hero-proof-line,
.rp-label, .about-story-subject, .stat-label, .uni-name,
.results-tab-teacher, .chart-legend span, .method-disclosure summary,
.form-response, .form-more summary, .pricing-trust-line, .cal-key, .faq-sequence,
.doc-meta span, .res-count, .res-filter, .res-links a, .eqbt-fact, .eqbt-promo-price-then,
.fb-meta span, .vid-foot a, .breadcrumbs a, .bc-current, .qbt-opt,
.curric-map-figure figcaption, .acal-poster figcaption,
.contacts-col h3, .co-privacy-box .toc h2{
  font-family:'Work Sans', sans-serif; letter-spacing:0; text-transform:none;
}
/* Capitals were set small; sentence case needs a little more size. */
th, .reels-index thead th{font-size:0.82rem; font-weight:600; color:var(--ink-soft);}
.res-premium-label, .res-group-label, .res-qbt-soon, .xe-kicker, .xe-sample-label, .xe-card-topic,
.xc-level-eyebrow, #exam-dates .field label, .vid-subject, .vid-more-label, .watch-parent-label,
.prog-includes-head, .testi-category, .ws-role, .hh-tag, .hh-cd-label, .hh-price-lead,
.cc-year, .cc-school, .faq-price-level, .about-story-subject, .rp-label{font-size:0.86rem; font-weight:600;}
.res-badge, .qbt-soon, .xc-card-qual, .xc-card-soon, .xe-pill, .vid-featured, .testi-voice, .ws-status, .grade-tag{font-size:0.78rem; font-weight:600;}
.stat-label, .uni-name, .hh-cd-name, .cont-anchor{font-size:0.82rem; font-weight:500;}
.testi-readmore{font-size:0.86rem; font-weight:600;}
#results-preview .rp-label{font-size:0.95rem; letter-spacing:0; text-transform:none;}
.eqbt-theme-head{font-family:'Fraunces', serif; font-size:1.05rem; font-weight:600; letter-spacing:0; text-transform:none;}
/* Two labels whose original rules are more specific than the list above. */
.ws-enrol .ws-panel .ws-role,
.testi-slide .testi-voice{font-family:'Work Sans', sans-serif; letter-spacing:0; text-transform:none; font-weight:600;}
.ws-enrol .ws-panel .ws-role{font-size:0.86rem;}
.testi-slide .testi-voice{font-size:0.78rem;}
.curric-group-head{font-family:'Fraunces', serif; font-size:1.6rem; font-weight:600; letter-spacing:-0.01em; text-transform:none;}

/* Movement is decoration, never information. */
@media (prefers-reduced-motion:reduce){
  .hiw-card, .lm-node, .fl-step, .eco-card, #parents .proof-strip-item{transition:none;}
  .hiw-card:hover, .lm-node:hover, .fl-step:hover, .eco-card:hover, #parents .proof-strip-item:hover{transform:none;}
}

}

/* ==========================================================
   BOOKING FLOW: the path from price to paid
   ----------------------------------------------------------
   Pricing, the basket drawer, the three checkout steps and the
   booking confirmation share one look, so a parent moving through
   them feels they are in one considered place:

   - Ground: a warm paper canvas lit by soft "aurora" glows in the
     brand gold and the pillar colours (cobalt, berry, teal), with a
     faint dot grid, instead of flat white.
   - Surfaces: white cards with a fine gold-to-colour gradient edge
     and deep, soft shadows.
   - The money: every total (basket, order summary, receipt) sits on
     the same champagne "ticket" with gold figures and a perforated
     tear line, so the number that matters is always the richest
     thing on screen. The flow is kept light throughout: no navy
     panels.
   - Actions: the step that moves you on is a gold button; going
     back stays quiet.

   Screen only: the confirmation is printed as a receipt, and the
   print rules in the template keep that plain.
   Appended after experience.css by build-multipage-site.js.
   ========================================================== */
@media screen{

:root{
  --bf-aurora:
    radial-gradient(900px 520px at 6% -4%, rgba(226,189,106,0.30), transparent 62%),
    radial-gradient(820px 520px at 100% 2%, rgba(44,90,160,0.14), transparent 62%),
    radial-gradient(720px 560px at 78% 52%, rgba(156,37,96,0.07), transparent 66%),
    radial-gradient(820px 620px at -6% 78%, rgba(31,110,107,0.09), transparent 66%),
    linear-gradient(180deg, #FCF8F0 0%, #F7F2E8 55%, #FBF8F2 100%);
  --bf-dots:radial-gradient(rgba(24,32,51,0.075) 1px, transparent 1.4px);
  --bf-edge:linear-gradient(135deg, rgba(199,154,59,0.75), rgba(199,154,59,0.18) 38%, rgba(44,90,160,0.22) 70%, rgba(156,37,96,0.30));
  --bf-gold-btn:linear-gradient(135deg, #F0D28A 0%, #D9AE55 38%, #C08F33 72%, #A9792A 100%);
  /* Totals card (basket, order summary, receipt): warm champagne paper
     lit with gold. */
  --bf-champagne:
    radial-gradient(380px 200px at 100% 0%, rgba(226,189,106,0.38), transparent 64%),
    radial-gradient(320px 220px at 0% 100%, rgba(226,189,106,0.16), transparent 66%),
    linear-gradient(165deg, #FFFDF8 0%, #FBF4E4 55%, #F6EBD2 100%);
  --bf-champagne-edge:inset 0 0 0 1px rgba(199,154,59,0.45), inset 0 1px 0 #fff;
  --bf-gold-figure:linear-gradient(180deg, #B98A33 0%, #93681F 55%, #6E4C14 100%);
  --bf-card-shadow:0 1px 2px rgba(24,32,51,0.04), 0 24px 50px -28px rgba(24,32,51,0.32), 0 8px 18px -12px rgba(130,93,32,0.18);
}

/* ---------- Ground ---------- */
#checkout.view-panel.active,
#payment-success.view-panel.active,
#pricing.view-panel.active{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--bf-aurora);
}
#checkout.view-panel.active::before,
#payment-success.view-panel.active::before,
#pricing.view-panel.active::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--bf-dots); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,0.35) 38%, transparent 70%);
          mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,0.35) 38%, transparent 70%);
}

/* Back link: a frosted pill rather than a bare outline. */
#checkout .tab-back-btn{
  border-radius:999px; background:rgba(255,255,255,0.72); border-color:rgba(199,154,59,0.35);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 6px 16px -12px rgba(24,32,51,0.5);
}

/* Shared gold primary button. */
#checkout .co-nav .btn,
#checkout .co-pay-btn,
#checkout .co-mobile-total .btn,
.cart-panel .cart-go,
.cart-panel .cart-empty .btn,
#payment-success .ps-actions .btn:not(.ghost),
#pricing .hero-ctas .btn:not(.ghost){
  background:var(--bf-gold-btn); color:var(--ink); border:1px solid #B5862F;
  border-radius:14px; font-weight:700; letter-spacing:0.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(110,78,22,0.25), 0 14px 26px -14px rgba(160,116,36,0.85);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, filter .25s ease;
}
#checkout .co-nav .btn:hover,
#checkout .co-pay-btn:hover,
#checkout .co-mobile-total .btn:hover,
.cart-panel .cart-go:hover,
.cart-panel .cart-empty .btn:hover,
#payment-success .ps-actions .btn:not(.ghost):hover,
#pricing .hero-ctas .btn:not(.ghost):hover{
  background:var(--bf-gold-btn); color:var(--ink); filter:saturate(1.08) brightness(1.03);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 4px rgba(110,78,22,0.22), 0 20px 34px -16px rgba(160,116,36,0.95);
}
#checkout .co-nav .btn:focus-visible,
#checkout .co-pay-btn:focus-visible,
.cart-panel .cart-go:focus-visible{outline:3px solid var(--ink); outline-offset:3px;}
#checkout .co-nav .btn[disabled],
#checkout .co-pay-btn[disabled]{filter:grayscale(0.6); opacity:0.7; transform:none; cursor:not-allowed;}

/* ==========================================================
   CHECKOUT
   ========================================================== */

/* Welcome note: a frosted card with a gold seal. */
#checkout .lesson-note{
  position:relative; margin-top:12px; padding:18px 22px 18px 66px;
  border:1px solid transparent; border-radius:18px;
  background:linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.78)) padding-box, var(--bf-edge) border-box;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 18px 36px -28px rgba(24,32,51,0.45);
}
#checkout .lesson-note::before{
  content:""; position:absolute; left:20px; top:18px; width:32px; height:32px; border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9z'/%3E%3C/svg%3E") center/16px no-repeat,
    var(--bf-gold-btn);
  box-shadow:0 6px 14px -6px rgba(160,116,36,0.8), inset 0 1px 0 rgba(255,255,255,0.5);
}
#checkout .lesson-note p{font-size:0.92rem; line-height:1.6;}
#checkout .lesson-note a{color:var(--ink); font-weight:600; border-bottom:1.5px solid var(--gold);}

/* Step rail: a frosted capsule with a gold "you are here". */
#checkout .co-rail{
  width:max-content; max-width:100%; margin:6px auto 30px; padding:8px 12px; gap:4px 8px;
  border-radius:999px; background:rgba(255,255,255,0.7);
  border:1px solid rgba(199,154,59,0.28);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 14px 30px -22px rgba(24,32,51,0.55);
}
#checkout .co-rail li::after{width:44px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--line-strong), var(--line));}
#checkout .co-rail li:has(.is-done)::after{background:linear-gradient(90deg, var(--green), var(--gold));}
#checkout .co-step-dot{padding:4px 12px 4px 4px; border-radius:999px; color:var(--ink-faint); transition:background .3s ease, color .3s ease;}
#checkout .co-step-dot i{
  width:30px; height:30px; background:#fff; border:1.5px solid var(--line-strong); color:var(--ink-faint);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#checkout .co-step-dot.is-current{
  background:linear-gradient(135deg, rgba(240,210,138,0.42), rgba(226,189,106,0.22));
  box-shadow:inset 0 0 0 1px rgba(199,154,59,0.5); color:var(--ink);
}
#checkout .co-step-dot.is-current i{
  background:var(--bf-gold-btn); border-color:transparent; color:var(--ink);
  box-shadow:0 0 0 4px rgba(226,189,106,0.28);
  animation:bfHalo 2.6s ease-in-out infinite;
}
#checkout .co-step-dot.is-done{color:var(--ink);}
#checkout .co-step-dot.is-done i{background:linear-gradient(135deg, #2D9A5A, var(--green)); border-color:transparent; box-shadow:0 6px 12px -6px rgba(30,122,68,0.8);}
@media (max-width:640px){
  #checkout .co-rail{padding:6px 8px;}
  #checkout .co-step-dot{padding:4px;}
  #checkout .co-rail li::after{width:22px;}
}
@keyframes bfHalo{0%,100%{box-shadow:0 0 0 4px rgba(226,189,106,0.30);} 50%{box-shadow:0 0 0 8px rgba(226,189,106,0.10);}}

/* Step heading with a "Step n of 3" chip and a gold flourish. */
#checkout .co-step-head{margin-bottom:30px;}
#checkout .co-step-head::before{
  display:inline-block; margin-bottom:12px; padding:5px 14px; border-radius:999px;
  font-family:'Work Sans', sans-serif; font-size:0.82rem; font-weight:600; letter-spacing:0;
  color:var(--gold-deep); background:rgba(226,189,106,0.18); border:1px solid rgba(199,154,59,0.4);
}
#coStep1 .co-step-head::before{content:"Step 1 of 3";}
#coStep2 .co-step-head::before{content:"Step 2 of 3";}
#coStep3 .co-step-head::before{content:"Step 3 of 3";}
#checkout .co-step-head h2{font-size:clamp(1.9rem,3.6vw,2.6rem); letter-spacing:-0.015em; line-height:1.1;}
#checkout .co-step-head h2::after{
  content:""; display:block; width:64px; height:3px; margin:16px auto 0; border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-bright) 50%, var(--gold) 80%, transparent);
}
#checkout .co-step.active{animation:bfRise .5s cubic-bezier(.22,.61,.36,1) both;}
@keyframes bfRise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}

/* The main panel: a white card with a fine gradient edge and a
   coloured light strip along the top. */
#checkout .co-panel{
  position:relative; overflow:hidden; padding:34px 34px 30px; border-radius:24px;
  border:1px solid transparent;
  background:linear-gradient(#fff, #fff) padding-box, var(--bf-edge) border-box;
  box-shadow:var(--bf-card-shadow);
}
#checkout .co-panel::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 30%, var(--physics) 62%, var(--english) 100%);
  opacity:0.85;
}
@media (max-width:520px){ #checkout .co-panel{padding:26px 18px 22px; border-radius:20px;} }

/* Group titles with an icon badge: parent in gold, student in cobalt. */
#checkout .co-group-title{
  display:flex; align-items:center; gap:12px; margin:0 0 2px; padding-top:0;
  font-family:'Fraunces', serif; font-size:1.18rem; font-weight:600; color:var(--ink);
}
#checkout .co-group-title::before{
  content:""; flex:none; width:38px; height:38px; border-radius:12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182033' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19c.6-3.2 2.9-5 5.5-5s4.9 1.8 5.5 5'/%3E%3Ccircle cx='17' cy='9.5' r='2.4'/%3E%3Cpath d='M15.6 14.3c2.3-.4 4.3 1 4.9 4.2'/%3E%3C/svg%3E") center/20px no-repeat,
    var(--bf-gold-btn);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 16px -10px rgba(160,116,36,0.9);
}
#checkout .co-group-title ~ .co-group-title{margin-top:22px; padding-top:26px; border-top:1px dashed var(--line-strong);}
#checkout .co-group-title ~ .co-group-title::before{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5L12 5l9.5 4.5L12 14z'/%3E%3Cpath d='M6.5 11.6V16c1.6 1.5 3.4 2.2 5.5 2.2s3.9-.7 5.5-2.2v-4.4'/%3E%3Cpath d='M21.5 9.5v5'/%3E%3C/svg%3E") center/20px no-repeat,
    linear-gradient(135deg, #4A7CC4, var(--physics) 55%, #1E3F73);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 16px -10px rgba(44,90,160,0.9);
}

/* Fields: soft-filled, rounded, gold focus halo. */
#checkout .field label{font-size:0.82rem; color:var(--ink-soft);}
#checkout .field input,
#checkout .field select{
  min-height:50px; padding:13px 16px; border-radius:14px;
  border:1.5px solid rgba(24,32,51,0.12); background-color:#FAF8F4;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#checkout .field select{padding-right:42px;}
#checkout .field input:hover,
#checkout .field select:hover{border-color:rgba(24,32,51,0.24); background-color:#fff;}
#checkout .field input:focus,
#checkout .field select:focus{
  background-color:#fff; border-color:var(--gold-ui);
  box-shadow:0 0 0 4px rgba(226,189,106,0.28), 0 8px 18px -12px rgba(160,116,36,0.6);
}
#checkout .field input[aria-invalid="true"],
#checkout .field select[aria-invalid="true"]{border-color:#B0301F; background-color:rgba(176,48,31,0.04);}
#checkout .field-hint{font-size:0.78rem; color:var(--ink-faint);}
#checkout .form-trust-note{
  margin-top:22px; padding:12px 14px 12px 42px; position:relative; border-radius:12px;
  background:rgba(30,122,68,0.06); font-size:0.82rem; color:var(--ink-soft);
}
#checkout .form-trust-note::before{
  content:""; position:absolute; left:14px; top:13px; width:18px; height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7A44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.4-3 8.3-7 9.5C8 19.3 5 15.4 5 11V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E") center/contain no-repeat;
}
#checkout .error-summary{border-radius:14px;}

/* Consents: a warm card with custom checkboxes. */
#checkout .co-consent{
  padding:20px 22px; border-radius:18px; border:1px solid rgba(199,154,59,0.3);
  background:
    radial-gradient(380px 160px at 100% 0%, rgba(226,189,106,0.20), transparent 70%),
    linear-gradient(180deg, #FDFAF3, #F9F3E6);
}
#checkout .co-consent-row{padding:4px 0;}
#checkout .co-consent-row span{font-size:0.88rem; line-height:1.55;}
#checkout .co-consent-row a{color:var(--ink); font-weight:600; border-bottom:1.5px solid var(--gold);}
#checkout .co-consent-row input,
#checkout .co-prog input{
  -webkit-appearance:none; appearance:none; flex:none;
  width:24px; height:24px; margin:0; border-radius:8px; cursor:pointer;
  border:1.5px solid rgba(24,32,51,0.3); background:#fff center/14px no-repeat;
  box-shadow:inset 0 1px 2px rgba(24,32,51,0.08);
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#checkout .co-consent-row input:hover:not(:disabled),
#checkout .co-prog input:hover{border-color:var(--gold-ui);}
#checkout .co-consent-row input:checked,
#checkout .co-prog input:checked{
  border-color:transparent; transform:scale(1.04);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
#checkout .co-consent-row input:checked{
  background-color:var(--green);
  box-shadow:0 6px 12px -6px rgba(30,122,68,0.9);
}
#checkout .co-consent-row input:focus-visible,
#checkout .co-prog input:focus-visible{outline:3px solid var(--gold-ui); outline-offset:2px;}
#checkout .co-consent-row input:disabled{background-color:#EFECE5; cursor:not-allowed;}
#checkout .co-consent-note{margin-top:12px;}

/* Programme picker: cards in the subject's colour. */
#checkout .co-prog-grid{gap:14px;}
#checkout .co-prog{
  overflow:hidden; gap:14px; padding:18px 18px 18px 20px; border-radius:18px;
  border:1.5px solid rgba(24,32,51,0.09); background:#fff;
  box-shadow:0 10px 24px -20px rgba(24,32,51,0.6);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
#checkout .co-prog::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--ink)) 70%, #fff), var(--accent, var(--ink)));
}
#checkout .co-prog::after{
  content:""; position:absolute; right:-40px; top:-40px; width:130px; height:130px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent, var(--ink)) 16%, transparent), transparent 70%);
  opacity:0.6; transition:opacity .25s ease, transform .35s ease;
}
#checkout .co-prog:hover{transform:translateY(-2px); background:#fff; border-color:color-mix(in srgb, var(--accent, var(--ink)) 35%, transparent); box-shadow:0 18px 30px -20px color-mix(in srgb, var(--accent, var(--ink)) 70%, rgba(24,32,51,0.6));}
#checkout .co-prog:hover::after{opacity:1; transform:scale(1.15);}
#checkout .co-prog.is-picked{
  border-color:var(--accent, var(--ink));
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--ink)) 9%, #fff), #fff 70%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent, var(--ink)) 18%, transparent), 0 18px 30px -20px color-mix(in srgb, var(--accent, var(--ink)) 80%, transparent);
}
#checkout .co-prog input:checked{background-color:var(--accent, var(--ink)); box-shadow:0 6px 12px -6px var(--accent, var(--ink));}
#checkout .co-prog-name{position:relative; z-index:1; font-size:1.12rem;}
#checkout .co-prog-meta b{color:var(--accent, var(--ink)); font-weight:700;}
#checkout .co-prog-price{
  display:inline-block; margin-top:12px; padding:5px 11px; border-radius:999px;
  background:rgba(226,189,106,0.18); border:1px solid rgba(199,154,59,0.35);
  font-size:0.8rem; font-weight:600; color:var(--gold-deep); line-height:1.4;
}
#checkout .co-prog-empty{border-radius:16px; background:rgba(255,255,255,0.7); border:1px dashed var(--line-strong);}
#checkout #coLevelFilter{border-radius:999px; min-height:46px; font-weight:600;}

/* Step navigation. */
#checkout .co-nav{margin-top:30px; padding-top:22px; border-top:1px dashed var(--line-strong);}
#checkout .co-nav .btn{min-height:52px; padding:14px 26px; display:inline-flex; align-items:center; justify-content:center; gap:10px;}
#checkout .co-nav .btn::before{
  content:""; order:2; width:16px; height:16px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182033' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s ease;
}
#checkout .co-nav .btn:hover::before{transform:translateX(3px);}
#checkout .co-back{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px;
  text-decoration:none; color:var(--ink-soft); background:rgba(24,32,51,0.04);
  transition:background .2s ease, color .2s ease;
}
#checkout .co-back:hover{background:rgba(24,32,51,0.08); color:var(--ink);}
#checkout .co-back .ui-icon{width:16px; height:16px;}

/* ---- Order summary: the champagne ticket ---- */
/* The ticket is masked for its notches, which would also cut off an
   outer box-shadow, so the shadow is drawn on the aside around it. */
#checkout .co-summary{filter:drop-shadow(0 22px 26px rgba(130,93,32,0.20)) drop-shadow(0 4px 8px rgba(24,32,51,0.06));}
#checkout .co-summary-card{
  --notch:56px;
  position:relative; padding:16px 22px 24px; border:0; border-radius:22px; color:var(--ink);
  background:var(--bf-champagne);
  box-shadow:var(--bf-champagne-edge);
  -webkit-mask:
    radial-gradient(circle 11px at 0 var(--notch), #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% var(--notch), #0000 97%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle 11px at 0 var(--notch), #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% var(--notch), #0000 97%, #000) right / 51% 100% no-repeat;
}
#checkout .co-summary-card h3{
  box-sizing:border-box; height:40px; margin:0 -22px; padding:0 22px; display:flex; align-items:center; gap:10px;
  border-bottom:1.5px dashed rgba(199,154,59,0.55);
  font-family:'Fraunces', serif; font-size:1.12rem; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--ink);
}
#checkout .co-summary-card h3::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 4px rgba(199,154,59,0.18);
}
#checkout .co-sum-lines{margin-top:16px;}
#checkout .co-sum-lines li{
  color:var(--ink-soft); border-bottom:1px solid rgba(199,154,59,0.22); padding:11px 0; font-size:0.9rem;
}
#checkout .co-sum-lines li span:last-child{color:var(--ink); font-weight:700;}
#checkout .co-sum-empty{color:var(--ink-faint); padding:18px 0 6px; font-style:italic;}
#checkout .co-sum-total{
  margin-top:16px; padding:16px 16px 14px; border:0; border-radius:16px;
  background:rgba(255,255,255,0.75); box-shadow:inset 0 0 0 1px rgba(199,154,59,0.35), 0 8px 18px -14px rgba(130,93,32,0.5);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
#checkout .co-sum-total dt{color:var(--ink-soft); font-size:0.92rem; font-weight:600;}
#checkout .co-sum-total dd{
  font-family:'Fraunces', serif; font-weight:600; font-size:2.2rem; line-height:1; letter-spacing:-0.02em;
  background:var(--bf-gold-figure);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#checkout .co-sum-then{margin-top:14px; color:var(--ink-soft); font-size:0.84rem;}
#checkout .co-sum-then strong{color:var(--ink);}

/* ---- Review and payment ---- */
#checkout .co-pay-mount{
  align-items:center; padding:16px 18px; border-radius:18px; border:1px solid rgba(30,122,68,0.2);
  background:linear-gradient(135deg, rgba(30,122,68,0.08), rgba(44,90,160,0.05));
}
#checkout .co-pay-mount svg{
  width:42px; height:42px; padding:11px; margin:0; border-radius:12px; stroke:#fff;
  background:linear-gradient(135deg, #2D9A5A, var(--green)); box-shadow:0 8px 16px -8px rgba(30,122,68,0.9);
}
#checkout .er-list{
  margin-top:20px !important; padding:6px 20px; border-radius:18px;
  background:#FAF8F4; border:1px solid rgba(24,32,51,0.07);
}
#checkout .er-row{padding:12px 0; border-bottom:1px dashed rgba(24,32,51,0.13);}
#checkout .er-row:last-child{border-bottom:0;}
#checkout .er-row dd{font-weight:600;}
#checkout #coReviewToday{
  font-family:'Fraunces', serif; font-size:1.5rem; font-weight:600; line-height:1; color:var(--gold-deep);
}
#checkout .co-privacy-head{font-size:0.92rem;}
#checkout .co-privacy-box{
  border-radius:16px; border:1px solid rgba(24,32,51,0.12); background:#FCFBF8; padding:20px 22px;
  box-shadow:inset 0 -24px 24px -24px rgba(24,32,51,0.25);
  scrollbar-width:thin; scrollbar-color:var(--gold) transparent;
}
#checkout .co-privacy-box::-webkit-scrollbar{width:8px;}
#checkout .co-privacy-box::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-bright), var(--gold)); border-radius:8px;}
#checkout .co-privacy-progress{display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:5px 12px; border-radius:999px; background:rgba(24,32,51,0.05);}
#checkout .co-privacy-progress.done{background:rgba(30,122,68,0.1); color:var(--green);}
#checkout .co-pay-btn{
  min-height:60px; margin-top:24px !important; font-size:1.02rem; border-radius:16px;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
#checkout .co-pay-btn::before{
  content:""; width:18px; height:18px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182033' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
}
#checkout .co-pay-btn::after{opacity:1; animation:hudhaShimmer 3.6s ease-in-out 1s infinite;}
#checkout .co-methods{margin-top:16px;}
#checkout .co-methods li{
  padding:5px 11px; border-radius:8px; border:1px solid rgba(24,32,51,0.1); background:#fff;
  box-shadow:0 4px 10px -8px rgba(24,32,51,0.5); color:var(--ink);
}
#checkout .co-trust{
  margin-top:20px; padding:16px 18px; border-radius:16px; gap:10px;
  background:rgba(24,32,51,0.03); border:1px solid rgba(24,32,51,0.06);
}

/* Mobile running total: a frosted champagne bar with a gold figure. */
@media (max-width:899px){
  #checkout .co-mobile-total.on{
    background:linear-gradient(165deg, rgba(255,253,248,0.94), rgba(250,241,221,0.96));
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-top:1px solid rgba(199,154,59,0.45);
    box-shadow:0 -14px 30px -16px rgba(130,93,32,0.45);
  }
  #checkout .co-mobile-total-txt b{
    font-family:'Work Sans', sans-serif; font-size:0.78rem; font-weight:600;
    letter-spacing:0; text-transform:none; color:var(--ink-soft);
  }
  #checkout .co-mobile-total-txt strong{color:var(--gold-deep); font-size:1.45rem;}
  #checkout .co-mobile-total .btn{min-height:46px; padding:10px 20px;}
}

/* ==========================================================
   BASKET DRAWER
   ========================================================== */
.side-panel.cart-panel{background:
  radial-gradient(520px 320px at 100% 30%, rgba(226,189,106,0.16), transparent 70%),
  radial-gradient(420px 320px at 0% 90%, rgba(44,90,160,0.08), transparent 70%),
  linear-gradient(180deg, #FBF8F1, #F5EFE3);}
/* Head: warm champagne lit with gold, a fine gold rule beneath. */
.cart-panel .cart-head{
  flex-shrink:0; overflow:hidden; isolation:isolate; padding:28px 24px 26px; color:var(--ink);
  background:
    radial-gradient(280px 170px at 100% 0%, rgba(226,189,106,0.55), transparent 70%),
    radial-gradient(260px 180px at 0% 120%, rgba(226,189,106,0.22), transparent 70%),
    linear-gradient(160deg, #FFFDF8 0%, #FBF3E1 60%, #F5E8CB 100%);
  box-shadow:inset 0 -1px 0 rgba(199,154,59,0.45), 0 12px 24px -20px rgba(130,93,32,0.55);
}
.cart-panel .cart-head::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background-image:radial-gradient(rgba(130,93,32,0.16) 1px, transparent 1.4px); background-size:16px 16px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 70%); mask-image:linear-gradient(90deg, transparent, #000 70%);
}
.cart-head-kicker{color:var(--gold-deep);}
.cart-head-title{font-size:1.85rem; letter-spacing:-0.01em; color:var(--ink);}
.cart-panel .cart-head .panel-close{color:var(--ink); background:rgba(255,255,255,0.7); border-color:rgba(199,154,59,0.5);}
.cart-panel .cart-head .panel-close:hover{background:#fff; border-color:var(--gold-ui);}
.cart-panel .cart-head .panel-close:focus-visible{outline-color:var(--gold-ui);}
.cart-panel .cart-line{
  position:relative; overflow:hidden; padding:16px 10px 16px 18px; border-radius:18px;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
  animation:bfRise .45s cubic-bezier(.22,.61,.36,1) both;
}
.cart-panel .cart-line::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--ink)) 60%, #fff), var(--accent, var(--ink)));
}
.cart-panel .cart-line:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(24,32,51,0.06), 0 18px 30px -18px color-mix(in srgb, var(--accent, var(--ink)) 70%, rgba(24,32,51,0.5));}
.cart-panel .cart-line:nth-child(2){animation-delay:.05s;}
.cart-panel .cart-line:nth-child(3){animation-delay:.1s;}
.cart-panel .cart-line:nth-child(n+4){animation-delay:.15s;}
.cart-line-tile{width:52px; height:52px; border-radius:15px;}
/* One capital label per panel ("Your basket" in the head); every
   other label reads as ordinary sentence-case text. */
.cart-panel .cart-line-tutor{
  font-family:'Work Sans', sans-serif; font-size:0.84rem; font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--accent, var(--ink-faint));
}
.cart-panel .cart-resumed,
.cart-panel .cart-section-title{
  font-family:'Work Sans', sans-serif; font-size:0.86rem; font-weight:600;
  letter-spacing:0; text-transform:none;
}
.cart-panel .cart-resumed{color:var(--ink-soft);}
.cart-secure{font-family:'Work Sans', sans-serif; font-size:0.78rem; font-weight:500; letter-spacing:0;}

/* Summary: the same champagne ticket as the checkout. */
.cart-summary{
  position:relative; margin-top:18px; padding:20px 20px 16px; border-radius:20px; color:var(--ink);
  background:var(--bf-champagne);
  box-shadow:var(--bf-champagne-edge), 0 22px 40px -26px rgba(130,93,32,0.6), 0 6px 14px -10px rgba(24,32,51,0.2);
}
.cart-panel .cart-total{border-bottom:1.5px dashed rgba(199,154,59,0.55); padding-bottom:16px;}
.cart-panel .cart-total dt{
  font-family:'Work Sans', sans-serif; font-size:0.92rem; font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--ink-soft);
}
.cart-panel .cart-total dd{
  font-size:2.5rem; letter-spacing:-0.02em;
  background:var(--bf-gold-figure);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cart-summary .cart-then{color:var(--ink-soft);}
.cart-summary .cart-then strong{color:var(--ink);}
.cart-summary .cart-then + .cart-then{color:var(--ink-faint);}
.cart-panel .cart-go{min-height:58px; border-radius:16px; font-size:0.95rem;}
.cart-panel .cart-go .ui-icon{color:var(--ink);}
.cart-panel .cart-go::after{opacity:1; animation:hudhaShimmer 3.6s ease-in-out 1s infinite;}
.cart-panel .cart-keep{
  padding:8px 16px; border-radius:999px; text-decoration:none; background:rgba(24,32,51,0.05);
  font-family:'Work Sans', sans-serif; font-size:0.86rem; font-weight:600; letter-spacing:0; text-transform:none;
}
.cart-panel .cart-keep:hover{background:rgba(24,32,51,0.09);}
.cart-secure svg{stroke:var(--green);}

/* Header basket: a gold bubble that breathes when it has items. */
.cart-btn{border-radius:12px; transition:transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;}
.cart-btn:hover{transform:translateY(-1px); box-shadow:0 8px 16px -10px rgba(160,116,36,0.8);}
.cart-count{background:var(--bf-gold-btn); box-shadow:0 0 0 2px #fff, 0 4px 10px -3px rgba(160,116,36,0.9);}
.cart-count.on{animation:bfPop .5s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes bfPop{0%{transform:scale(0.4);} 100%{transform:scale(1);}}

/* Cohort card "Add to basket": a touch of lift and a subject-coloured glow. */
#cohortGrid .cohort-add-btn{border-radius:12px;}
#cohortGrid .cohort-add-btn:not([data-in-basket="true"]):hover{
  transform:translateY(-2px);
  box-shadow:0 14px 24px -14px var(--cc, var(--ink)), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ==========================================================
   BOOKING CONFIRMATION
   ========================================================== */
#payment-success .ps-head{position:relative; margin-bottom:44px;}
#payment-success .ps-head h2{font-size:clamp(2rem,4vw,2.9rem); letter-spacing:-0.02em;}
#payment-success .ps-status{
  position:relative; width:88px; height:88px; margin-bottom:26px;
  background:#fff; box-shadow:0 0 0 1px rgba(24,32,51,0.08), 0 18px 34px -18px rgba(24,32,51,0.5);
}
#payment-success .ps-spinner{width:36px; height:36px; border-width:3px; border-color:rgba(199,154,59,0.25); border-top-color:var(--gold-ui);}
#payment-success .ps-head[data-state="confirmed"] .ps-status{
  color:#fff; background:linear-gradient(135deg, #3BB06C 0%, var(--green) 55%, #155C33 100%);
  box-shadow:0 0 0 10px rgba(30,122,68,0.12), 0 0 0 22px rgba(30,122,68,0.05), 0 24px 40px -16px rgba(30,122,68,0.75);
  animation:bfPop .6s cubic-bezier(.34,1.56,.64,1) both;
}
#payment-success .ps-head[data-state="confirmed"] .ps-status svg{width:40px; height:40px; stroke-width:2.6; stroke-dasharray:24; stroke-dashoffset:24; animation:bfDraw .5s ease .35s forwards;}
@keyframes bfDraw{to{stroke-dashoffset:0;}}
/* Celebration: a scatter of gold and subject-coloured confetti
   around the tick, only once the payment is confirmed. */
#payment-success .ps-head[data-state="confirmed"]::before{
  content:""; position:absolute; left:50%; top:-10px; width:min(420px, 92vw); height:130px; transform:translateX(-50%);
  pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle 4px at 12% 40%, var(--gold) 98%, transparent),
    radial-gradient(circle 3px at 22% 12%, var(--physics) 98%, transparent),
    radial-gradient(circle 5px at 28% 70%, var(--english) 98%, transparent),
    radial-gradient(circle 3px at 36% 30%, var(--gold-bright) 98%, transparent),
    radial-gradient(circle 4px at 66% 18%, var(--subj-economics) 98%, transparent),
    radial-gradient(circle 3px at 72% 64%, var(--gold) 98%, transparent),
    radial-gradient(circle 5px at 80% 34%, var(--gold-bright) 98%, transparent),
    radial-gradient(circle 3px at 88% 72%, var(--physics) 98%, transparent),
    radial-gradient(circle 4px at 92% 16%, var(--english) 98%, transparent),
    radial-gradient(circle 3px at 6% 78%, var(--subj-economics) 98%, transparent);
  animation:bfConfetti .9s cubic-bezier(.22,.61,.36,1) .15s both;
}
@keyframes bfConfetti{from{opacity:0; transform:translateX(-50%) scale(0.6);} to{opacity:1; transform:translateX(-50%) scale(1);}}
#payment-success .ps-head[data-state="failed"] .ps-status{background:#fff; box-shadow:0 0 0 10px var(--alert-tint), 0 18px 34px -18px rgba(163,39,24,0.5);}
#payment-success .ps-ref{
  padding:10px 18px; border:1px solid transparent; font-size:0.9rem !important;
  background:linear-gradient(#fff, #fff) padding-box, var(--bf-edge) border-box;
  box-shadow:0 10px 22px -16px rgba(24,32,51,0.5);
}
#payment-success .ps-ref strong{font-family:'IBM Plex Mono', monospace; color:var(--gold-deep);}

#payment-success .ps-card{
  position:relative; overflow:hidden; padding:28px; border-radius:22px; border:1px solid transparent;
  background:linear-gradient(#fff, #fff) padding-box, var(--bf-edge) border-box;
  box-shadow:var(--bf-card-shadow);
}
#payment-success .ps-card-title{display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-size:1.3rem; font-weight:600;}
#payment-success .ps-main .ps-card-title::before{
  content:""; width:10px; height:10px; border-radius:3px; transform:rotate(45deg);
  background:var(--bf-gold-btn); box-shadow:0 0 0 3px rgba(226,189,106,0.25);
}
#payment-success .ps-facts > div{padding:14px 16px; border-radius:14px; background:#FAF8F4;}
#payment-success .ps-prog{
  position:relative; padding:18px 20px 18px 24px; border:1px solid rgba(24,32,51,0.08); border-radius:16px;
  background:linear-gradient(135deg, #fff, #FBF7EE);
}
#payment-success .ps-prog::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold-ui));
}
#payment-success .ps-prog-name{font-family:'Fraunces', serif; font-size:1.08rem; font-weight:600;}

/* Next steps: a numbered path with coloured icon tiles. */
#payment-success .ps-steps{position:relative; gap:22px;}
#payment-success .ps-steps::before{
  content:""; position:absolute; left:22px; top:30px; bottom:30px; width:2px;
  background:linear-gradient(180deg, var(--gold), var(--physics), var(--english)); opacity:0.35;
}
#payment-success .ps-step-icon{
  position:relative; width:46px; height:46px; border-radius:14px; color:#fff;
  background:var(--bf-gold-btn); box-shadow:0 10px 18px -10px rgba(160,116,36,0.9), inset 0 1px 0 rgba(255,255,255,0.4);
}
#payment-success .ps-step-icon svg{width:21px; height:21px; stroke-width:2;}
#payment-success .ps-steps li:nth-child(1) .ps-step-icon{color:var(--ink);}
#payment-success .ps-steps li:nth-child(2) .ps-step-icon{background:linear-gradient(135deg, #4A7CC4, var(--physics) 55%, #1E3F73); box-shadow:0 10px 18px -10px rgba(44,90,160,0.9);}
#payment-success .ps-steps li:nth-child(3) .ps-step-icon{background:linear-gradient(135deg, #C1508A, var(--english) 55%, #6E1743); box-shadow:0 10px 18px -10px rgba(156,37,96,0.9);}
#payment-success .ps-steps strong{font-size:1rem;}

/* Receipt: the champagne ticket. */
#payment-success .ps-receipt{
  border:0; color:var(--ink); background:var(--bf-champagne);
  box-shadow:var(--bf-champagne-edge), 0 26px 50px -30px rgba(130,93,32,0.6), 0 8px 18px -12px rgba(24,32,51,0.18);
}
#payment-success .ps-receipt-head{padding-bottom:16px; border-bottom:1.5px dashed rgba(199,154,59,0.55);}
#payment-success .ps-paid-badge{background:rgba(30,122,68,0.12); color:var(--green); box-shadow:inset 0 0 0 1px rgba(30,122,68,0.3);}
#payment-success .ps-lines li{border-bottom-color:rgba(199,154,59,0.22);}
#payment-success .ps-total{margin-top:12px; padding:16px; border-radius:16px; background:rgba(255,255,255,0.75); box-shadow:inset 0 0 0 1px rgba(199,154,59,0.35), 0 8px 18px -14px rgba(130,93,32,0.5); align-items:center;}
#payment-success .ps-total span{color:var(--ink-soft); font-size:0.92rem;}
#payment-success .ps-total strong{
  font-family:'Fraunces', serif; font-size:2.2rem; font-weight:600; line-height:1;
  background:var(--bf-gold-figure);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#payment-success .ps-schedule{border-top-color:rgba(199,154,59,0.22);}
#payment-success .ps-secure{background:rgba(255,255,255,0.65); border-radius:12px;}
#payment-success .ps-billing{border-color:rgba(199,154,59,0.45); border-radius:12px; background:rgba(255,255,255,0.5);}
#payment-success .ps-billing:hover{background:#fff; border-color:var(--gold-ui);}
#payment-success .ps-billing svg{color:var(--gold-deep);}
#payment-success .ps-help a{color:var(--ink); font-weight:600; border-bottom:1.5px solid var(--gold);}
#payment-success .ps-actions .btn{border-radius:14px; min-height:50px;}

/* ==========================================================
   PRICING
   ========================================================== */
#pricing .section-head h2{font-size:clamp(2.1rem,4.4vw,3.1rem); letter-spacing:-0.02em;}
#pricing .pricing-trust-line{color:var(--ink-soft);}
/* Currency switch: one segmented capsule. */
:is(#pricing, #pricing-preview) .cur-toggle-btn{border-radius:999px; padding:9px 18px; background:rgba(255,255,255,0.75); transition:background .2s ease, color .2s ease, box-shadow .2s ease;}
:is(#pricing, #pricing-preview) .cur-toggle-btn.active{background:var(--ink); color:#fff; box-shadow:0 8px 16px -10px rgba(16,22,42,0.9);}

:is(#pricing, #pricing-preview) .pricing-mission{
  position:relative; max-width:62ch; padding:26px 34px; border-radius:22px;
  background:rgba(255,255,255,0.6); border:1px solid rgba(199,154,59,0.25);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
:is(#pricing, #pricing-preview) .pricing-mission::before{
  content:"\201C"; position:absolute; left:14px; top:-18px;
  font-family:'Fraunces', serif; font-size:4.4rem; line-height:1; color:var(--gold);
}

/* The two price cards: GCSE lit in cobalt, A-Level in berry. */
:is(#pricing, #pricing-preview) .price-focal-row{gap:30px; max-width:820px;}
:is(#pricing, #pricing-preview) .price-focal-card{
  --pc:var(--physics);
  overflow:hidden; border:1px solid transparent; border-radius:26px; padding-top:40px;
  background:
    radial-gradient(380px 220px at 50% 0%, color-mix(in srgb, var(--pc) 13%, transparent), transparent 70%) padding-box,
    linear-gradient(180deg, #fff 0%, #FFFDF9 100%) padding-box,
    linear-gradient(160deg, color-mix(in srgb, var(--pc) 60%, #fff), rgba(199,154,59,0.7) 50%, rgba(199,154,59,0.25)) border-box;
  box-shadow:0 2px 4px rgba(24,32,51,0.04), 0 34px 60px -34px color-mix(in srgb, var(--pc) 70%, rgba(24,32,51,0.6));
}
:is(#pricing, #pricing-preview) .price-focal-card + .price-focal-card{--pc:var(--english);}
:is(#pricing, #pricing-preview) .price-focal-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background:linear-gradient(90deg, var(--pc), var(--gold-bright) 60%, var(--gold));
}
:is(#pricing, #pricing-preview) .price-focal-card:hover{transform:translateY(-6px); box-shadow:0 2px 4px rgba(24,32,51,0.04), 0 44px 70px -34px color-mix(in srgb, var(--pc) 80%, rgba(24,32,51,0.6));}
:is(#pricing, #pricing-preview) .pfc-level{
  display:inline-block; padding:6px 18px; border-radius:999px;
  font-family:'Work Sans', sans-serif; font-size:0.9rem; font-weight:700; letter-spacing:0.01em; text-transform:none;
  color:#fff; background:linear-gradient(135deg, color-mix(in srgb, var(--pc) 75%, #fff), var(--pc) 60%, color-mix(in srgb, var(--pc) 70%, #000));
  box-shadow:0 8px 16px -10px var(--pc);
}
:is(#pricing, #pricing-preview) .pfc-badge{
  display:block; margin-top:12px; font-family:'Fraunces', serif; font-style:italic; font-size:1rem; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--gold-deep);
}
:is(#pricing, #pricing-preview) .pfc-amount{background:radial-gradient(60% 120% at 50% 50%, rgba(226,189,106,0.34) 0%, rgba(226,189,106,0.08) 48%, transparent 72%);}
:is(#pricing, #pricing-preview) .pfc-amount strong{
  font-size:clamp(3.4rem,6vw,4.4rem);
  background:linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--pc) 70%, var(--ink)) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
:is(#pricing, #pricing-preview) .pfc-lesson-hook{border-radius:999px; background:var(--bf-gold-btn); border-color:#B5862F; color:var(--ink); box-shadow:0 10px 18px -12px rgba(160,116,36,0.9);}
:is(#pricing, #pricing-preview) .price-focal-card .pc-save{border-radius:999px; background:rgba(30,122,68,0.1); border-color:rgba(30,122,68,0.35); color:var(--green);}
:is(#pricing, #pricing-preview) .pfc-lesson-hook,
:is(#pricing, #pricing-preview) .price-focal-card .pc-save,
:is(#pricing, #pricing-preview) .pfc-fact-label{font-family:'Work Sans', sans-serif; letter-spacing:0; text-transform:none;}
:is(#pricing, #pricing-preview) .pfc-lesson-hook{font-size:0.92rem;}
:is(#pricing, #pricing-preview) .price-focal-card .pc-save{font-size:0.82rem;}
:is(#pricing, #pricing-preview) .pfc-fact-label{font-size:0.8rem; font-weight:500; color:var(--ink-soft);}
:is(#pricing, #pricing-preview) .pfc-facts{border-top:1px dashed var(--line-strong);}
:is(#pricing, #pricing-preview) .pfc-fact-num{color:var(--pc);}
:is(#pricing, #pricing-preview) .pfc-list{border-top:1px dashed var(--line-strong);}
:is(#pricing, #pricing-preview) .pfc-list li::before{
  content:""; width:18px; height:18px; margin:0; border:0; border-radius:50%; transform:none; align-self:center;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/11px no-repeat, var(--pc);
}
:is(#pricing, #pricing-preview) .pricing-affordable-strap{font-size:1.15rem; margin-top:30px;}

/* "Not sure which option?" becomes a closing champagne band. */
#pricing > .wrap:last-child{
  position:relative; overflow:hidden; isolation:isolate; max-width:1000px; margin-top:56px;
  padding:48px clamp(20px,5vw,56px) 52px; border-radius:28px;
  background:
    radial-gradient(520px 260px at 50% 0%, rgba(226,189,106,0.42), transparent 70%),
    radial-gradient(380px 240px at 100% 100%, rgba(226,189,106,0.2), transparent 70%),
    linear-gradient(170deg, #FFFDF8 0%, #FBF3E1 60%, #F6EAD0 100%);
  box-shadow:var(--bf-champagne-edge), 0 36px 60px -38px rgba(130,93,32,0.6);
}
#pricing > .wrap:last-child::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(130,93,32,0.16) 1px, transparent 1.4px); background-size:18px 18px;
  -webkit-mask-image:radial-gradient(70% 90% at 50% 0%, #000, transparent); mask-image:radial-gradient(70% 90% at 50% 0%, #000, transparent);
}
#pricing > .wrap:last-child .section-head{margin-top:0 !important;}
#pricing > .wrap:last-child h2{color:var(--ink); font-size:clamp(1.6rem,3vw,2.1rem) !important;}
#pricing > .wrap:last-child .section-head p{color:var(--ink-soft);}
#pricing > .wrap:last-child .btn.ghost{color:var(--ink); border-color:rgba(199,154,59,0.6); border-radius:14px; background:rgba(255,255,255,0.7);}
#pricing > .wrap:last-child .btn.ghost:hover{background:#fff; color:var(--ink); border-color:var(--gold-ui);}
@media (max-width:640px){
  #pricing > .wrap:last-child{margin-left:16px; margin-right:16px; border-radius:22px;}
  #pricing .pricing-mission{padding:24px 20px;}
}

/* Movement is decoration here, never information. */
@media (prefers-reduced-motion:reduce){
  #checkout .co-step-dot.is-current i,
  #checkout .co-step.active,
  #checkout .co-pay-btn::after,
  .cart-panel .cart-go::after,
  .cart-panel .cart-line,
  .cart-count.on,
  #payment-success .ps-head[data-state="confirmed"] .ps-status,
  #payment-success .ps-head[data-state="confirmed"]::before{animation:none;}
  #payment-success .ps-head[data-state="confirmed"] .ps-status svg{animation:none; stroke-dashoffset:0;}
}

}

/* Multi-page build: each crawlable page owns one visible panel. */
body[data-page] .view-panel.active{display:block;}
body[data-page] footer.site-footer{display:block;}