@charset "UTF-8";
/*
Theme Name: Learnaroo
Theme URI: https://learnaroohub.com
Author: Humaira Ahmed
Author URI: https://learnaroohub.com/about/
Description: The Learnaroo Learning Engine — a vibrant, child-safe educational platform for UK families, teachers and schools. EYFS to GCSE.
Version: 2.45.8
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: learnaroo
Tags: education, children, e-learning, uk-curriculum, accessibility-ready
*/

/* ==========================================================================
   01 — RESET + BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Nunito', sans-serif; font-size: 16px; line-height: 1.6; color: #1A1A2E; background: #fff; -webkit-font-smoothing: antialiased; }
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
ul, ol { list-style: none; }
input, select, textarea, button { font: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: 'Fredoka', sans-serif; font-weight: 700; line-height: 1.2; color: #1A1A2E; }

/* ==========================================================================
   02 — VARIABLES
   ========================================================================== */
:root {
  --lwh-coral: #E91E63;
  --lwh-coral-dark: #C2185B;
  --lwh-coral-light: #FCE4EC;
  --lwh-purple: #6B2FA0;
  --lwh-purple-dark: #4A148C;
  --lwh-purple-light: #F3E5F5;
  --lwh-yellow: #FFD700;
  --lwh-yellow-light: #FFFDE7;
  --lwh-ink: #1A1A2E;
  --lwh-ink-soft: #4A4A6A;
  --lwh-grey: #6B7280;
  --lwh-grey-light: #F3F4F6;
  --lwh-white: #FFFFFF;
  --lwh-border: #E5E7EB;
  --lwh-success: #22C55E;
  --lwh-teal: #0D9488;
  --lwh-error: #EF4444;
  --lwh-warning: #F59E0B;
  --lwh-radius: 16px;
  --lwh-radius-sm: 10px;
  --lwh-radius-xs: 6px;
  --lwh-radius-pill: 999px;
  --lwh-shadow-sm: 0 1px 3px rgba(26,26,46,0.06);
  --lwh-shadow-md: 0 4px 12px rgba(26,26,46,0.08);
  --lwh-shadow-lg: 0 12px 32px rgba(26,26,46,0.12);
  --lwh-shadow-hover: 0 8px 24px rgba(233,30,99,0.15);
  --lwh-container: min(95%, 1200px);
  --lwh-section-pad: clamp(3rem, 6vh, 5rem);
  /* Sprint 39 — richer accent palette for the playful desktop redesign.
     Used only inside min-width:900px enhancement rules, so mobile is untouched. */
  --lwh-tangerine: #FF7A1A;
  --lwh-sky: #2BB3FF;
  --lwh-lime: #7BD938;
  --lwh-grape: #9B4DFF;
  --lwh-bubble: #FF4FA3;
  --lwh-cream: #FFF6E9;
  --lwh-mint-bg: #EAFBF3;
  --lwh-sky-bg: #E8F6FF;
  --lwh-grad-hero: linear-gradient(135deg, #4A148C 0%, #6B2FA0 45%, #B5179E 80%, #E91E63 100%);
  --lwh-grad-sunset: linear-gradient(120deg, #FF7A1A 0%, #E91E63 55%, #9B4DFF 100%);
  --lwh-grad-candy: linear-gradient(135deg, #FF4FA3 0%, #9B4DFF 100%);

  /* Legacy compat aliases */
  --lh-display: 'Fredoka', sans-serif;
  --lh-font: 'Nunito', sans-serif;
  --lh-flame: #E91E63;
  --lh-ink: #1A1A2E;
  --lh-ink-soft: #4A4A6A;
}

/* ==========================================================================
   03 — TYPOGRAPHY
   ========================================================================== */
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
p { margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lwh-eyebrow {
  display: inline-block; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--lwh-coral); margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px);
}
.lwh-section-head { text-align: center; margin-bottom: 2.5rem; margin-bottom: round(nearest, 2.5rem, 4px); }
.lwh-section-head h2 { margin-bottom: .6rem; margin-bottom: round(nearest, .6rem, 4px); }
.lwh-section-head p { color: var(--lwh-grey); max-width: 650px; margin: 0 auto; }

/* ==========================================================================
   04 — BUTTONS
   ========================================================================== */
.lh-btn, .lwh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; gap: round(nearest, .4rem, 4px);
  padding: .7rem 1.4rem;
  padding: round(nearest, .7rem, 4px) round(nearest, 1.4rem, 4px); border-radius: var(--lwh-radius-pill);
  font-weight: 700; font-size: .95rem; border: 2px solid transparent;
  transition: all .2s ease; text-decoration: none; line-height: 1.3;
  white-space: nowrap;
}
.lh-btn--flame, .lwh-btn--coral, .lh-btn--coral {
  background: var(--lwh-coral); color: #fff; border-color: var(--lwh-coral);
}
.lh-btn--flame:hover, .lwh-btn--coral:hover { background: var(--lwh-coral-dark); border-color: var(--lwh-coral-dark); }
.lwh-btn--purple { background: var(--lwh-purple); color: #fff; border-color: var(--lwh-purple); }
.lwh-btn--purple:hover { background: var(--lwh-purple-dark); }
.lh-btn--ghost, .lwh-btn--ghost { background: transparent; }
.lh-btn--sm, .lwh-btn--sm { padding: .45rem .9rem; padding: round(nearest, .45rem, 4px) round(nearest, .9rem, 4px); font-size: .85rem; }
.lh-btn--lg, .lwh-btn--lg { padding: .85rem 1.8rem; padding: round(nearest, .85rem, 4px) round(nearest, 1.8rem, 4px); font-size: 1.05rem; }

/* ==========================================================================
   05 — LAYOUT UTILITIES
   ========================================================================== */
.lwh-container { width: var(--lwh-container); margin: 0 auto; }
.lwh-section { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lwh-section--grey { background: var(--lwh-grey-light); }
.lwh-section--purple { background: var(--lwh-purple); color: #fff; }
.lwh-section--coral { background: var(--lwh-coral); color: #fff; }
.lwh-grid { display: grid; gap: 1.25rem; gap: round(nearest, 1.25rem, 4px); }
.lwh-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lwh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lwh-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .lwh-grid--3, .lwh-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .lwh-grid--2, .lwh-grid--3, .lwh-grid--4 { grid-template-columns: 1fr; } }

/* Wave divider */
.lwh-wave { width: 100%; line-height: 0; overflow: hidden; }
.lwh-wave svg { width: 100%; height: auto; display: block; }


/* ==========================================================================
   06 — TOP BAR + HEADER + NAV
   ========================================================================== */

/* Top bar */
:root { --lh-topbar-h: 40px; }
.lh-topbar {
  /* Distinct contrasting bar so it never fuses into the purple hero behind it.
     A vivid coral→tangerine gradient with a bottom border reads as its own
     independent strip above everything else. */
  background: linear-gradient(90deg, var(--lwh-coral) 0%, var(--lwh-tangerine, #FF7A1A) 100%);
  color: #fff; position: relative; z-index: 1200;
  height: var(--lh-topbar-h); display: flex; align-items: center;
  font-size: .84rem; font-weight: 700; letter-spacing: .01em;
  overflow: hidden; white-space: nowrap;
  border-bottom: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
/* The track holds two duplicated sets of messages and slides left forever,
   so the strip reads as a continuous marquee on every device. */
.lh-topbar__track {
  display: inline-block; white-space: nowrap;
  animation: lwhMarquee 38s linear infinite;
  will-change: transform;
}
.lh-topbar__item {
  display: inline-flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px);
  padding: 0 1.5rem;
  padding: 0 round(nearest, 1.5rem, 4px); font-weight: 700; position: relative;
}
.lh-topbar__item::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.45);
}
.lh-topbar__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 auto;
  background: rgba(255,255,255,.18); border-radius: 50%; padding: 3px; padding: 4px;
}
.lh-topbar__icon svg { width: 100%; height: 100%; display: block; }
.lh-topbar a { color: #fff; transition: opacity .15s; }
.lh-topbar a:hover { opacity: .8; }
.lh-topbar__left, .lh-topbar__right { display: flex; align-items: center; gap: 1rem; gap: round(nearest, 1rem, 4px); }
@media (prefers-reduced-motion: reduce) { .lh-topbar__track { animation: none; } }

/* Larger, showcased logo — DESKTOP HOMEPAGE ONLY. The animated emblem is a
   highlight worth featuring, but kept within the header so it still reads as a
   logo, not a hero element. Scoped tightly: homepage body + min-width only. */
@media (min-width: 900px) {
  .lh-homepage-body .lh-brand__emblem { width: 64px; height: 64px; }
  .lh-homepage-body .lh-brand__icon { width: 60px; height: 60px; }
  .lh-homepage-body .lh-brand__text { font-size: 1.35em; }
}

/* Scrolling trust marquee */
.lh-trust-marquee {
  background: var(--lwh-purple-dark); color: rgba(255,255,255,.8);
  padding: .4rem 0;
  padding: round(nearest, .4rem, 4px) 0; overflow: hidden; font-size: .82rem; font-weight: 600;
  white-space: nowrap;
}
.lh-trust-marquee__inner {
  display: inline-block; animation: lwhMarquee 30s linear infinite;
}
@keyframes lwhMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Header */
.lh-header {
  background: #fff; position: sticky; top: 0; z-index: 1250;
  box-shadow: var(--lwh-shadow-sm); transition: background .25s ease, box-shadow .25s ease;
}
/* HOMEPAGE ONLY: header starts transparent with white text over the hero,
   then turns solid white with dark text once scrolled (JS toggles .is-scrolled).
   Scoped to .lh-homepage-body so catalogue/dashboard/auth pages — which have
   light tops — keep the normal solid header and never get invisible text. */
/* HOMEPAGE: header is NOT sticky — it scrolls away with the page. This removes
   the transparent→solid-on-scroll behaviour entirely, which was causing a white
   background flicker as the .is-scrolled class toggled near the threshold. The
   header simply sits transparent over the hero and scrolls off naturally. */
/* HOMEPAGE: header is in NORMAL FLOW (static), non-sticky, and carries the hero
   gradient so its white nav text stays readable and it reads as one continuous
   purple block with the hero below it. The independent coral topbar sits clearly
   above. Static flow means no overlap with the topbar and no fusing surprises. */
.lh-homepage-body .lh-header {
  position: absolute; top: var(--lh-topbar-h); left: 0; right: 0; z-index: 1250;
  background: transparent; box-shadow: none; transition: none;
}
.lh-homepage-body .lh-header .lh-nav__link,
.lh-homepage-body .lh-header__burger { color: #fff; }
/* Brand wordmark on the purple hero: "Learnaroo" in bright yellow (light/pop),
   "Hub" in white — both clearly visible against the purple. */
.lh-homepage-body .lh-header .lh-brand__text-a { color: var(--lwh-yellow); }
.lh-homepage-body .lh-header .lh-brand__text-b { color: #fff; }
.lh-homepage-body .lh-header .lh-nav__link:hover { background: rgba(255,255,255,.15); color: #fff; }
/* Dropdowns stay solid + rounded even over the transparent header (they are
   NOT affected by the header transparency — explicit solid background). */
.lh-homepage-body .lh-header .lh-nav__dropdown {
  background: #fff; border-radius: 18px; box-shadow: 0 16px 40px rgba(74,20,140,.25);
  border: none; padding: .5rem; padding: round(nearest, .5rem, 4px);
}
.lh-homepage-body .lh-header .lh-nav__dropdown li a { color: var(--lwh-ink); border-radius: 10px; }
.lh-homepage-body .lh-header .lh-nav__dropdown li a:hover { background: var(--lwh-coral-light); color: var(--lwh-coral); }
.lh-homepage-body .lh-header.is-scrolled { background: #fff; box-shadow: var(--lwh-shadow-sm); }
.lh-homepage-body .lh-header.is-scrolled .lh-nav__link { color: var(--lwh-ink); }
.lh-homepage-body .lh-header.is-scrolled .lh-brand__text-a { color: var(--lwh-ink); }
.lh-homepage-body .lh-header.is-scrolled .lh-brand__text-b { color: var(--lwh-coral); }
/* Landing pages (parent/teacher/student) get the SAME transparent-over-hero
   header as the homepage. Mirrors the key .lh-homepage-body rules so the header
   sits transparent on their heroes with white, visible nav text. */
.lh-hero-header-body .lh-header {
  position: absolute; top: var(--lh-topbar-h); left: 0; right: 0; z-index: 1250;
  background: transparent; box-shadow: none; transition: none;
}
.lh-hero-header-body .lh-header .lh-nav__link,
.lh-hero-header-body .lh-header__burger { color: #fff; }
.lh-hero-header-body .lh-header .lh-brand__text-a { color: var(--lwh-yellow); }
.lh-hero-header-body .lh-header .lh-brand__text-b { color: #fff; }
.lh-hero-header-body .lh-header .lh-nav__link:hover { background: rgba(255,255,255,.15); color: #fff; }
.lh-hero-header-body .lh-header .lh-nav__dropdown {
  background: #fff; border-radius: 18px; box-shadow: 0 16px 40px rgba(74,20,140,.25);
  border: none; padding: .5rem; padding: round(nearest, .5rem, 4px);
}
.lh-hero-header-body .lh-header .lh-nav__dropdown li a { color: var(--lwh-ink); border-radius: 10px; }
.lh-hero-header-body .lh-header .lh-nav__dropdown li a:hover { background: var(--lwh-coral-light); color: var(--lwh-coral); }
.lh-hero-header-body .lh-header__auth .lh-btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.lh-hero-header-body .lh-header__auth .lh-btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.15); }
.lh-homepage-body .lh-header.is-scrolled .lh-nav__link:hover { background: var(--lwh-grey-light); color: var(--lwh-coral); }
.lh-homepage-body .lh-header.is-scrolled .lh-header__burger { color: var(--lwh-ink); }
/* Slide the hero up under the transparent header so the bar overlays the
   gradient (header is sticky, ~64px tall). Extra hero top-padding keeps the
   content clear of the bar. */
/* Header is absolute (non-sticky) on the homepage, so it no longer occupies
   layout space. The hero starts at the very top and uses padding-top to clear
   the overlaid header (was margin-top:-68px to tuck under a sticky header). */
/* Header is now in normal flow above the hero (not overlapping), so the hero
   needs no top compensation — it simply continues the purple below the header. */
.lh-homepage-body .lh-home-hero { margin-top: 0; padding-top: 2.125rem; padding-top: round(nearest, 2.125rem, 4px); }
.lh-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1.5rem;
  padding: round(nearest, .6rem, 4px) round(nearest, 1.5rem, 4px); max-width: 1300px; margin: 0 auto;
}
.lh-header__logo img { height: 42px; width: auto; }
.lh-header__logo { display: flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); text-decoration: none; }

/* Desktop nav */
.lh-nav__list {
  display: flex; align-items: center; gap: .15rem; gap: round(nearest, .15rem, 4px);
}
.lh-nav__item { position: relative; }
.lh-nav__link {
  display: flex; align-items: center; gap: .25rem; gap: round(nearest, .25rem, 4px);
  padding: .55rem .85rem;
  padding: round(nearest, .55rem, 4px) round(nearest, .85rem, 4px); font-size: .92rem; font-weight: 700;
  color: var(--lwh-ink); border-radius: var(--lwh-radius-sm);
  transition: background .15s, color .15s;
}
.lh-nav__link:hover { background: var(--lwh-grey-light); color: var(--lwh-coral); }
.lh-nav__caret { font-size: .6rem; opacity: .5; }

/* Dropdown */
.lh-nav__dropdown {
  position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid var(--lwh-border);
  border-radius: var(--lwh-radius-sm); box-shadow: var(--lwh-shadow-lg);
  min-width: 220px; padding: .5rem 0; padding: round(nearest, .5rem, 4px) 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .2s ease;
}
.lh-nav__item:hover .lh-nav__dropdown,
.lh-nav__item--has-children:hover .lh-nav__dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.lh-nav__dropdown li a {
  display: block; padding: .55rem 1.15rem; padding: round(nearest, .55rem, 4px) round(nearest, 1.15rem, 4px);
  font-size: .88rem; font-weight: 600; color: var(--lwh-ink);
  transition: background .12s, color .12s;
}
.lh-nav__dropdown li a:hover { background: var(--lwh-coral-light); color: var(--lwh-coral); }

/* Auth buttons */
.lh-header__auth { display: flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); }
.lh-header__auth .lh-btn--ghost {
  color: var(--lwh-ink); border-color: var(--lwh-border);
}
.lh-header__auth .lh-btn--ghost:hover { border-color: var(--lwh-coral); color: var(--lwh-coral); }
/* Homepage header is purple, so the dark "Log in" link is invisible — make it
   white with a subtle outline on the homepage only. */
.lh-homepage-body .lh-header__auth .lh-btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.5);
}
.lh-homepage-body .lh-header__auth .lh-btn--ghost:hover {
  color: #fff; border-color: #fff; background: rgba(255,255,255,.15);
}

/* Logged-in identity */
.lh-header__identity { display: flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); font-weight: 700; font-size: .88rem; }
.lh-header__identity img { width: 32px; height: 32px; border-radius: 50%; }
.lh-header__role { font-size: .72rem; font-weight: 600; text-transform: uppercase; padding: .15rem .4rem; padding: round(nearest, .15rem, 4px) round(nearest, .4rem, 4px); border-radius: var(--lwh-radius-xs); background: var(--lwh-coral-light); color: var(--lwh-coral); }

/* Mobile hamburger */
.lh-header__burger { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--lwh-ink); padding: .25rem; padding: round(nearest, .25rem, 4px); }
@media (max-width: 960px) {
  .lh-header__burger { display: block; }
  .lh-nav__list { display: none; }
}

/* Mobile drawer */
.lh-drawer { position: fixed; top: 0; right: -100%; width: min(85vw, 360px); height: 100vh;height: 100dvh; background: #fff; z-index: 10001; box-shadow: var(--lwh-shadow-lg); transition: right .3s ease; overflow-y: auto; padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-drawer.lh-drawer--open { right: 0; }
.lh-drawer__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 10000; opacity: 0; pointer-events: none; transition: opacity .25s; }
.lh-drawer__backdrop.is-open { opacity: 1; pointer-events: auto; }
.lh-drawer__close { background: none; border: 0; font-size: 1.5rem; color: var(--lwh-ink); position: absolute; top: 1rem; right: 1rem; }
.lh-drawer__list { margin-top: 2rem; margin-top: round(nearest, 2rem, 4px); }
.lh-drawer__item { border-bottom: 1px solid var(--lwh-border); }
.lh-drawer__link, .lh-drawer__toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: .85rem 0; padding: round(nearest, .85rem, 4px) 0; font-size: 1rem; font-weight: 700; color: var(--lwh-ink); background: none; border: 0; text-align: left; }
.lh-drawer__sub { padding: 0 0 .5rem 1rem; padding: 0 0 round(nearest, .5rem, 4px) round(nearest, 1rem, 4px); }
.lh-drawer__sub a { display: block; padding: .45rem 0; padding: round(nearest, .45rem, 4px) 0; font-size: .92rem; color: var(--lwh-grey); font-weight: 600; }
.lh-drawer__sub a:hover { color: var(--lwh-coral); }
.lh-drawer__caret { font-size: .7rem; transition: transform .2s; }

/* ==========================================================================
   07 — FOOTER
   ========================================================================== */
.lh-footer {
  background: var(--lwh-ink); color: rgba(255,255,255,.75);
  padding: clamp(2.5rem, 5vh, 4rem) 1.5rem 0;
  padding: round(nearest, clamp(2.5rem, 5vh, 4rem), 4px) round(nearest, 1.5rem, 4px) 0;
  margin-top: clamp(3rem, 6vh, 5rem);
  margin-top: round(nearest, clamp(3rem, 6vh, 5rem), 4px);
}
.lh-footer__grid {
  display: grid; grid-template-columns: 2fr repeat(3, 1fr);
  gap: 2rem;
  gap: round(nearest, 2rem, 4px); max-width: 1200px; margin: 0 auto;
  padding-bottom: 2.5rem;
  padding-bottom: round(nearest, 2.5rem, 4px); border-bottom: 1px solid rgba(255,255,255,.1);
}
.lh-footer__brand p { color: rgba(255,255,255,.5); font-size: .88rem; line-height: 1.55; margin-top: .75rem; margin-top: round(nearest, .75rem, 4px); }
.lh-footer__col h4 { color: #fff; font-family: 'Fredoka', sans-serif; font-size: 1rem; margin-bottom: .85rem; margin-bottom: round(nearest, .85rem, 4px); }
.lh-footer__col a { display: block; padding: .25rem 0; padding: round(nearest, .25rem, 4px) 0; font-size: .88rem; color: rgba(255,255,255,.6); transition: color .15s; }
.lh-footer__col a:hover { color: var(--lwh-coral); }
.lh-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; gap: round(nearest, .75rem, 4px);
  max-width: 1200px; margin: 0 auto; padding: 1.25rem 0; padding: round(nearest, 1.25rem, 4px) 0;
  font-size: .82rem; color: rgba(255,255,255,.4);
}
.lh-footer__social { display: flex; gap: .75rem; gap: round(nearest, .75rem, 4px); }
.lh-footer__social a { color: rgba(255,255,255,.5); font-size: 1.1rem; transition: color .15s; }
.lh-footer__social a:hover { color: var(--lwh-coral); }
@media (max-width: 768px) {
  .lh-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .lh-footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   08 — CURRICULUM BAR (sticky pills)
   ========================================================================== */
.lh-curricbar {
  display: flex; align-items: center; gap: .4rem; gap: round(nearest, .4rem, 4px); flex-wrap: wrap;
  padding: .65rem 1rem;
  padding: round(nearest, .65rem, 4px) round(nearest, 1rem, 4px); background: #fff; border-bottom: 1px solid var(--lwh-border);
  position: sticky; top: 60px; z-index: 100; overflow-x: auto;
}
.lh-curricbar__label { font-weight: 700; font-size: .85rem; color: var(--lwh-grey); white-space: nowrap; margin-right: .25rem; margin-right: round(nearest, .25rem, 4px); }
.lh-curricbar__pill {
  padding: .35rem .7rem;
  padding: round(nearest, .35rem, 4px) round(nearest, .7rem, 4px); font-size: .82rem; font-weight: 700;
  border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius-sm);
  color: var(--lwh-ink); background: #fff; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.lh-curricbar__pill:hover { border-color: var(--lwh-coral); color: var(--lwh-coral); }
.lh-curricbar__pill.is-active { background: var(--lwh-coral); color: #fff; border-color: var(--lwh-coral); }


/* ==========================================================================
   09 — HERO SECTIONS
   ========================================================================== */
.lh-home-hero, .lh-reshub__hero, .lh-cat-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--lwh-purple-dark) 0%, var(--lwh-purple) 50%, #8E24AA 100%);
  color: #fff; text-align: center;
  padding: clamp(3.5rem, 8vh, 6rem) 1.5rem;
  padding: round(nearest, clamp(3.5rem, 8vh, 6rem), 4px) round(nearest, 1.5rem, 4px);
}
.lh-home-hero h1, .lh-reshub__h1, .lh-cat-hero h1,
.lh-home-hero__headline { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-home-hero__lead, .lh-reshub__lead, .lh-cat-hero p { color: rgba(255,255,255,.8); font-size: clamp(.95rem, 2vw, 1.15rem); line-height: 1.6; max-width: 620px; margin: 0 auto 2rem; margin: 0 auto round(nearest, 2rem, 4px); }
.lh-reshub__eyebrow, .lh-home-hero__eyebrow { color: var(--lwh-yellow); }

/* Hero CTA buttons */
.lh-home-hero__cta, .lh-reshub__hero-cta, .lh-cat-hero__cta {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; gap: round(nearest, .75rem, 4px);
}
.lh-home-hero .lh-btn--flame, .lh-reshub__hero-cta .lh-btn--flame { background: var(--lwh-coral); color: #fff; border-color: var(--lwh-coral); }
.lh-home-hero .lh-btn--ghost, .lh-reshub__hero-cta .lh-btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); }
.lh-home-hero .lh-btn--ghost:hover, .lh-reshub__hero-cta .lh-btn--ghost:hover { background: rgba(255,255,255,.18); border-color: #fff; }

/* Hero floating cards */
.lh-home-hero__visual { display: block; max-width: 440px; margin: 2rem auto 0; margin: round(nearest, 2rem, 4px) auto 0; }
.lh-home-hero__card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: var(--lwh-radius-sm); padding: .6rem; padding: round(nearest, .6rem, 4px); text-align: center; backdrop-filter: blur(4px); }
.lh-home-hero__card-icon { font-size: 1.4rem; display: block; margin-bottom: .2rem; margin-bottom: round(nearest, .2rem, 4px); }
.lh-home-hero__card-label { font-size: .72rem; font-weight: 700; opacity: .85; }


/* Hero highlight word */
.lh-home-hero__highlight { color: var(--lwh-yellow); -webkit-text-fill-color: var(--lwh-yellow); }
.lh-home-hero__bullets { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; gap: round(nearest, .5rem, 4px) round(nearest, 1.5rem, 4px); margin: 1rem 0 1.5rem; margin: round(nearest, 1rem, 4px) 0 round(nearest, 1.5rem, 4px); }
.lh-home-hero__bullets li { font-size: .9rem; color: rgba(255,255,255,.8); }

/* Hub hero self-contained inline CSS is in the shortcode — these are backup */
.lh-reshub { display: block; }
.lh-reshub__hero-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.lh-reshub__section { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-reshub__section--bytype { background: var(--lwh-grey-light); }
.lh-reshub__inner { max-width: 1200px; margin: 0 auto; }
.lh-section__head { text-align: center; margin-bottom: 2rem; margin-bottom: round(nearest, 2rem, 4px); }
.lh-section__h { font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 700; margin-bottom: .6rem; margin-bottom: round(nearest, .6rem, 4px); }
.lh-section__sub { color: var(--lwh-grey); max-width: 650px; margin: 0 auto; }

/* ==========================================================================
   10 — RESOURCE CARDS (Grid + List)
   ========================================================================== */

/* Grid wrapper */
/* ════════════════════════════════════════════════════════════════
   CATALOGUE — WILDCARD card system (ticket grid + colour-coded list).
   ONE markup, two layouts via CSS. Type colour drives spine + icon in
   both views. List view is purpose-built (no reused grid markup) so it
   never duplicates or overflows.
   ════════════════════════════════════════════════════════════════ */

/* Grid wrapper */
.lh-res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; gap: round(nearest, 1.1rem, 4px); }
@media (max-width: 760px) { .lh-res-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .7rem; gap: round(nearest, .7rem, 4px); } }

/* Type colour keys — c1/c2 used by spine + icon gradient */
.lh-rc--quiz   { --rc1:#2BB3FF; --rc2:#185FA5; }
.lh-rc--elearn { --rc1:#9B4DFF; --rc2:#6B2FA0; }
.lh-rc--print  { --rc1:#E91E63; --rc2:#C2185B; }
.lh-rc--flash  { --rc1:#FF7A1A; --rc2:#E8590C; }
.lh-rc--game   { --rc1:#0D9488; --rc2:#0A6E66; }
.lh-rc--book   { --rc1:#C2185B; --rc2:#8E1145; }
.lh-rc--paper  { --rc1:#6B2FA0; --rc2:#4A148C; }
.lh-rc--video  { --rc1:#6B2FA0; --rc2:#B5179E; }
.lh-rc--audio  { --rc1:#0D9488; --rc2:#13a99b; }

/* ─────────── GRID = "ticket" cards ─────────── */
.lh-rc { position: relative; background: #fff; border: 1px solid var(--lwh-border); border-radius: var(--lwh-radius); overflow: hidden; transition: transform .16s, box-shadow .16s; box-shadow: 0 6px 18px rgba(74,20,140,.08); }
.lh-rc:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(74,20,140,.16); }
.lh-rc__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--lwh-ink); }

/* type spine: top bar in grid, left bar in list */
.lh-rc__spine { display: block; height: 7px; width: 100%; background: linear-gradient(90deg, var(--rc1), var(--rc2)); }

/* icon tile */
.lh-rc__icon { width: 50px; height: 50px; margin: 1rem 0 0 1rem; margin: round(nearest, 1rem, 4px) 0 0 round(nearest, 1rem, 4px); border-radius: 15px; background: linear-gradient(135deg, var(--rc1), var(--rc2)); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0,0,0,.12); }
.lh-rc__icon .lh-res-card__icon { font-size: 1.5rem; line-height: 1; filter: saturate(0) brightness(3); } /* emoji rendered light on the gradient tile */

/* main: title + desc + (grid) chips */
.lh-rc__main { padding: .7rem 1rem 0; padding: round(nearest, .7rem, 4px) round(nearest, 1rem, 4px) 0; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lh-rc__title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.02rem; line-height: 1.22; margin-bottom: .35rem; margin-bottom: round(nearest, .35rem, 4px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lh-rc__desc { font-size: .82rem; color: var(--lwh-ink-soft, #4A4A6A); line-height: 1.45; margin-bottom: .7rem; margin-bottom: round(nearest, .7rem, 4px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lh-rc__chips { display: flex; flex-wrap: wrap; gap: .35rem; gap: round(nearest, .35rem, 4px); margin-top: auto; }

.lh-tag { font-size: .7rem; font-weight: 700; padding: .22rem .55rem; padding: round(nearest, .22rem, 4px) round(nearest, .55rem, 4px); border-radius: 8px; white-space: nowrap; }
.lh-tag--stage    { background: #E9EFFF; color: #3257b5; }
.lh-tag--subject  { background: #FFF3DA; color: #9a6a12; }
.lh-tag--duration { background: #F0ECF7; color: #6b5b8a; }

/* perforated tear-line */
.lh-rc__perf { display: block; margin: .85rem 0 0; margin: round(nearest, .85rem, 4px) 0 0; border-top: 2px dashed var(--lwh-border); position: relative; }
.lh-rc__perf::before, .lh-rc__perf::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--lwh-bg, #F6F4FB); }
.lh-rc__perf::before { left: -9px; } .lh-rc__perf::after { right: -9px; }

/* footer: FREE stub + Play */
.lh-rc__foot { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem .9rem; padding: round(nearest, .7rem, 4px) round(nearest, 1rem, 4px) round(nearest, .9rem, 4px); }
.lh-rc__tier { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .7rem; padding: .25rem .6rem; padding: round(nearest, .25rem, 4px) round(nearest, .6rem, 4px); border-radius: var(--lwh-radius-pill); text-transform: uppercase; }
.lh-tier--free  { background: #D8F5E6; color: #157a4a; }
.lh-tier--pro   { background: #E5ECFF; color: #3257b5; }
.lh-tier--elite { background: #F3E0FB; color: #7a2fa0; }
.lh-rc__go { display: inline-flex; align-items: center; gap: .4rem; gap: round(nearest, .4rem, 4px); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .85rem; color: #fff; background: var(--lwh-success, #22A565); padding: .45rem .95rem; padding: round(nearest, .45rem, 4px) round(nearest, .95rem, 4px); border-radius: var(--lwh-radius-pill); box-shadow: 0 4px 10px rgba(34,165,101,.4); }
.lh-rc__go-arrow { font-size: .6rem; }

/* favourite heart (grid) */
.lh-rc .lh-fav-btn { position: absolute; top: 12px; right: 12px; z-index: 5; opacity: 0; transition: opacity .2s; background: rgba(255,255,255,.92); border: 0; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: .95rem; cursor: pointer; padding: 0; }
.lh-rc:hover .lh-fav-btn { opacity: 1; }
.lh-rc .lh-fav-btn.is-favourited { opacity: 1; color: var(--lwh-coral); }
.lh-rc__assign { position: absolute; bottom: 12px; left: 12px; z-index: 4; background: rgba(255,255,255,.92); border: 0; border-radius: 8px; font-size: 1rem; cursor: pointer; padding: .1rem .3rem; padding: round(nearest, .1rem, 4px) round(nearest, .3rem, 4px); }

/* elements that belong to the OTHER view — hidden in grid */
.lh-res-grid:not(.lh-grid--list) .lh-rc__listtags,
.lh-res-grid:not(.lh-grid--list) .lh-rc__listtype,
.lh-res-grid:not(.lh-grid--list) .lh-rc__play { display: none; }
/* legacy leftovers, hidden globally */
.lh-res-card__thumb, .lh-tier-ribbon, .lh-list-col, .lh-list-header, .lh-res-card__col, .lh-res-card__tier-badge { display: none; }

/* ─────────── LIST = colour-coded play-strips ─────────── */
.lh-res-grid.lh-grid--list { display: flex; flex-direction: column; gap: .6rem; gap: round(nearest, .6rem, 4px); grid-template-columns: none; }
.lh-grid--list .lh-rc { border: 1px solid var(--lwh-border); border-radius: 14px; box-shadow: 0 3px 12px rgba(74,20,140,.06); transition: transform .14s, box-shadow .14s; }
.lh-grid--list .lh-rc:hover { transform: translateX(4px); box-shadow: 0 10px 26px rgba(74,20,140,.14); }
.lh-grid--list .lh-rc__link {
  display: grid; grid-template-columns: 6px 56px minmax(0,1fr) auto auto 60px;
  align-items: center; gap: 0; height: auto;
}
.lh-grid--list .lh-rc__spine { width: 6px; height: 100%; align-self: stretch; background: linear-gradient(180deg, var(--rc1), var(--rc2)); }
.lh-grid--list .lh-rc__icon { width: 42px; height: 42px; margin: 0; justify-self: center; border-radius: 12px; }
.lh-grid--list .lh-rc__icon .lh-res-card__icon { font-size: 1.25rem; }
.lh-grid--list .lh-rc__main { padding: .7rem .5rem; padding: round(nearest, .7rem, 4px) round(nearest, .5rem, 4px); flex: unset; }
.lh-grid--list .lh-rc__title { font-size: .96rem; -webkit-line-clamp: unset; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .1rem; margin-bottom: round(nearest, .1rem, 4px); }
.lh-grid--list .lh-rc__desc { font-size: .78rem; -webkit-line-clamp: unset; -webkit-box-orient: unset; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.lh-grid--list .lh-rc__chips { display: none; }       /* grid chips hidden; list uses its own */
.lh-grid--list .lh-rc__perf, .lh-grid--list .lh-rc__foot { display: none; } /* ticket footer is grid-only */
.lh-grid--list .lh-rc__listtags { display: flex; align-items: center; gap: .35rem; gap: round(nearest, .35rem, 4px); padding: 0 .6rem; padding: 0 round(nearest, .6rem, 4px); }
.lh-grid--list .lh-rc__listtype { display: flex; align-items: center; gap: .35rem; gap: round(nearest, .35rem, 4px); padding: 0 .8rem; padding: 0 round(nearest, .8rem, 4px); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .8rem; color: var(--rc2); white-space: nowrap; }
.lh-grid--list .lh-rc__listdur { color: var(--lwh-grey); font-weight: 700; }
.lh-grid--list .lh-rc__play { justify-self: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lwh-success, #22A565); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .7rem; box-shadow: 0 4px 10px rgba(34,165,101,.4); transition: transform .14s; }
.lh-grid--list .lh-rc:hover .lh-rc__play { transform: scale(1.1); }
.lh-grid--list .lh-fav-btn, .lh-grid--list .lh-rc__assign { display: none; }

/* List responsive */
@media (max-width: 1000px) {
  .lh-grid--list .lh-rc__link { grid-template-columns: 6px 56px minmax(0,1fr) auto 60px; }
  .lh-grid--list .lh-rc__listtags { display: none; }
}
@media (max-width: 760px) {
  .lh-grid--list .lh-rc__link { grid-template-columns: 6px 50px minmax(0,1fr) 54px; }
  .lh-grid--list .lh-rc__desc, .lh-grid--list .lh-rc__listtype { display: none; }
  .lh-grid--list .lh-rc__chips { display: flex; flex-wrap: wrap; gap: .3rem; gap: round(nearest, .3rem, 4px); margin-top: .3rem; margin-top: round(nearest, .3rem, 4px); }
  .lh-grid--list .lh-rc__chips .lh-tag--duration { display: none; }
  .lh-grid--list .lh-rc__play { width: 36px; height: 36px; }
}


/* ==========================================================================
   11 — CATALOGUE LAYOUT (sidebar + filters + toolbar)
   ========================================================================== */
.lh-catalogue { display: block; padding: 0; }
.lh-catalogue__sidebar { display: flex; flex-direction: column; gap: .5rem; gap: round(nearest, .5rem, 4px); }
.lh-catalogue__main { min-width: 0; }

/* Filter dropdowns */
.lh-filterdrop { border: 1px solid var(--lwh-border); border-radius: var(--lwh-radius-sm); overflow: hidden; }
.lh-filterdrop summary { padding: .55rem .75rem; padding: round(nearest, .55rem, 4px) round(nearest, .75rem, 4px); font-size: .88rem; font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.lh-filterdrop summary::-webkit-details-marker { display: none; }
.lh-filterdrop .lh-filterdrop__body { padding: .25rem .75rem .5rem; padding: round(nearest, .25rem, 4px) round(nearest, .75rem, 4px) round(nearest, .5rem, 4px); max-height: 200px; overflow-y: auto; }
.lh-filterdrop label { display: flex; align-items: center; gap: .35rem; gap: round(nearest, .35rem, 4px); padding: .25rem 0; padding: round(nearest, .25rem, 4px) 0; font-size: .84rem; cursor: pointer; }
.lh-filterdrop label:hover span { color: var(--lwh-coral); }

/* Search box */
.lh-catalogue__search { display: flex; gap: .35rem; gap: round(nearest, .35rem, 4px); margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-catalogue__search input { flex: 1; padding: .5rem .75rem; padding: round(nearest, .5rem, 4px) round(nearest, .75rem, 4px); border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius-sm); font-size: .88rem; }
.lh-catalogue__search input:focus { border-color: var(--lwh-coral); outline: none; }
.lh-catalogue__search button { background: var(--lwh-coral); color: #fff; border: 0; border-radius: var(--lwh-radius-sm); width: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }

/* Toolbar */
.lh-catalogue__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; gap: round(nearest, .75rem, 4px); padding: .75rem 0; padding: round(nearest, .75rem, 4px) 0; border-bottom: 1px solid var(--lwh-border); margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-catalogue__perpage-label { display: flex; align-items: center; gap: .3rem; gap: round(nearest, .3rem, 4px); font-size: .85rem; font-weight: 600; color: var(--lwh-grey); }
.lh-catalogue__sort { display: flex; align-items: center; gap: .3rem; gap: round(nearest, .3rem, 4px); }
.lh-catalogue__sort-label { font-size: .82rem; font-weight: 600; color: var(--lwh-grey); }


/* Sidebar CTA */
.lh-sidebar-cta { margin-top: .75rem; margin-top: round(nearest, .75rem, 4px); padding: 1rem; padding: round(nearest, 1rem, 4px); background: var(--lwh-coral-light); border: 1.5px solid #F8BBD0; border-radius: var(--lwh-radius); text-align: center; }
.lh-sidebar-cta__icon { font-size: 1.5rem; }
.lh-sidebar-cta__title { display: block; font-size: .88rem; font-weight: 800; margin: .25rem 0; margin: round(nearest, .25rem, 4px) 0; }
.lh-sidebar-cta__text { font-size: .78rem; color: var(--lwh-grey); line-height: 1.4; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-sidebar-cta__link { font-size: .82rem; font-weight: 700; color: var(--lwh-coral); }

/* Clear filters */
.lh-catalogue__clear { display: block; text-align: center; font-size: .82rem; font-weight: 600; color: var(--lwh-grey); padding: .5rem 0; padding: round(nearest, .5rem, 4px) 0; }
.lh-catalogue__clear:hover { color: var(--lwh-coral); }

/* Pagination */

/* Mobile filter */
@media (max-width: 959px) {
  .lh-catalogue__sidebar { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh;height: 100dvh; z-index: 10000; background: #fff; padding: 1rem 1.25rem 5rem; padding: round(nearest, 1rem, 4px) round(nearest, 1.25rem, 4px) round(nearest, 5rem, 4px); overflow-y: auto; transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); box-shadow: 0 -12px 40px rgba(0,0,0,.2); border-radius: 20px 20px 0 0; }
  .lh-catalogue.is-filter-open .lh-catalogue__sidebar { transform: translateY(0); }
  .lh-catalogue.is-filter-open::before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999; backdrop-filter: blur(4px); }
  .lh-catalogue::before { opacity: 0; pointer-events: none; transition: opacity .25s; }
  .lh-catalogue__mobile-trigger { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 9000; display: inline-flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); background: var(--lwh-coral); color: #fff; border: 0; border-radius: var(--lwh-radius-pill); padding: .85rem 1.5rem; padding: round(nearest, .85rem, 4px) round(nearest, 1.5rem, 4px); font-weight: 700; font-size: .95rem; box-shadow: 0 8px 28px rgba(233,30,99,.4); }
}
@media (min-width: 960px) { .lh-catalogue__mobile-trigger, .lh-catalogue__drawer-head, .lh-catalogue__drawer-apply { display: none; } }

/* ==========================================================================
   12 — RESOURCE PAGE (viewer + toolbar + meta)
   ========================================================================== */
.lh-rp { max-width: min(95%, 900px); margin: 0 auto; padding: 1.5rem 0; padding: round(nearest, 1.5rem, 4px) 0; }
/* Wide document layout: viewer fills the page, guidance moves to a right rail */
.lh-rp--wide { max-width: min(96%, 1320px); }
.lh-rp-stage { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); align-items: start; margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; }
.lh-rp-stage__main { min-width: 0; }
.lh-rp-stage__side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 1rem; gap: round(nearest, 1rem, 4px); }
.lh-rp-stage__side .lh-rp-about,
.lh-rp-stage__side .lh-rp-meta { margin: 0; }
.lh-rp-stage__side .lh-rp-meta { grid-template-columns: 1fr; }
/* No inner scroll inside the About panel — it renders at natural height. */
.lh-rp-stage__side .lh-rp-about__body { max-height: none; overflow: visible; }
@media (max-width: 980px) {
  .lh-rp-stage { grid-template-columns: 1fr; }
  .lh-rp-stage__side { position: static; }
}
/* Short "about" statement that sits directly above the activity. */
.lh-rp-stage__main .lh-rp-statement { font-size: 1.02rem; line-height: 1.6; color: var(--lwh-ink); margin: .1rem 0 1rem; margin: round(nearest, .1rem, 4px) 0 round(nearest, 1rem, 4px); }
.lh-rp-stage__main .lh-rp-statement p { margin: 0 0 .6rem; margin: 0 0 round(nearest, .6rem, 4px); }
.lh-rp-stage__main .lh-rp-statement p:last-child { margin-bottom: 0; }
/* Progress / sign-in bar now sits above the activity — give it breathing room. */
.lh-rp-stage__main .lh-rp-progress { margin: 0 0 1rem; margin: 0 0 round(nearest, 1rem, 4px); }
.lh-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; gap: round(nearest, .5rem, 4px); padding: .85rem 0; padding: round(nearest, .85rem, 4px) 0; border-bottom: 1px solid var(--lwh-border); margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-toolbar__btn { display: inline-flex; align-items: center; gap: .3rem; gap: round(nearest, .3rem, 4px); padding: .5rem .85rem; padding: round(nearest, .5rem, 4px) round(nearest, .85rem, 4px); border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius-sm); background: #fff; color: var(--lwh-ink); font-size: .86rem; font-weight: 700; transition: border-color .15s, color .15s; white-space: nowrap; }
.lh-toolbar__btn:hover { border-color: var(--lwh-coral); color: var(--lwh-coral); }
.lh-toolbar__btn--assign { background: var(--lwh-coral); color: #fff; border-color: var(--lwh-coral); }
.lh-toolbar__btn--assign:hover { background: var(--lwh-coral-dark); }
.lh-toolbar__btn--fav.is-active { background: var(--lwh-coral-light); border-color: #F8BBD0; color: var(--lwh-coral); }
.lh-toolbar__btn--fs { margin-left: auto; }
@media (max-width: 640px) { .lh-toolbar__btn { font-size: .8rem; padding: .4rem .6rem; padding: round(nearest, .4rem, 4px) round(nearest, .6rem, 4px); } .lh-toolbar__btn--fs { margin-left: 0; } }

/* Viewer */
.lh-viewer { border-radius: var(--lwh-radius); overflow: hidden; margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; }
.lh-rp-viewer { margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; }
.lh-rp-viewer:fullscreen, .lh-rp-viewer:-webkit-full-screen { background: #fff; padding: 1rem; padding: round(nearest, 1rem, 4px); overflow-y: auto; }

/* About box */
.lh-rp-about { border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); margin: 1.25rem 0; margin: round(nearest, 1.25rem, 4px) 0; }
.lh-rp-about summary { padding: 1rem 1.25rem; padding: round(nearest, 1rem, 4px) round(nearest, 1.25rem, 4px); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.05rem; cursor: pointer; }

/* Meta strip */
.lh-rp-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; gap: round(nearest, 1rem, 4px); margin: 1.25rem 0; margin: round(nearest, 1.25rem, 4px) 0; }
.lh-rp-meta__box { background: var(--lwh-grey-light); border-radius: var(--lwh-radius); padding: 1.15rem; padding: round(nearest, 1.15rem, 4px); }
.lh-rp-meta__box h4 { font-family: 'Fredoka', sans-serif; font-size: .95rem; margin-bottom: .35rem; margin-bottom: round(nearest, .35rem, 4px); color: var(--lwh-coral); }

/* Progress bar */
.lh-progress { height: 8px; background: var(--lwh-grey-light); border-radius: 4px; overflow: hidden; }
.lh-progress__bar { height: 100%; background: linear-gradient(90deg, var(--lwh-success), #4ADE80); border-radius: 4px; transition: width .4s ease; }

/* Related modules */
.lh-rp-related { margin: 2rem 0; margin: round(nearest, 2rem, 4px) 0; padding-top: 1.5rem; padding-top: round(nearest, 1.5rem, 4px); border-top: 1px solid var(--lwh-border); }
.lh-rp-related h2 { font-size: 1.3rem; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }

/* ==========================================================================
   13 — HOMEPAGE SECTIONS
   ========================================================================== */
.lh-home-section { width: var(--lwh-container); margin: 0 auto; padding: var(--lwh-section-pad) 0; padding: round(nearest, var(--lwh-section-pad), 4px) 0; }

/* Trust strip */
.lh-home-trust { background: var(--lwh-ink); color: #fff; padding: .85rem 1.5rem; padding: round(nearest, .85rem, 4px) round(nearest, 1.5rem, 4px); margin: 0; }
/* On the homepage, the trust bar continues the hero's purple as one band with
   no seam — pulled up 1px to defeat any sub-pixel white line, and the hero has
   zero bottom margin so nothing (e.g. the grey main background) shows between. */
.lh-homepage-body .lh-home-trust {
  background: var(--lwh-purple-dark); margin-top: -1px; margin-top: 0px;
  border-top: 1px solid rgba(255,255,255,.10); position: relative; z-index: 2;
}
.lh-homepage-body .lh-home-hero { margin-bottom: 0; padding-bottom: 2rem; padding-bottom: round(nearest, 2rem, 4px); }
.lh-home-trust__inner { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 2rem; gap: round(nearest, .5rem, 4px) round(nearest, 2rem, 4px); font-size: .85rem; font-weight: 600; }

/* Stage cards */
.lh-home-stages, .lh-home-subjects, .lh-home-how, .lh-home-faq { background: var(--lwh-grey-light); width: 100%; max-width: 100%; padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-home-stages > *, .lh-home-subjects > *, .lh-home-how > *, .lh-home-faq > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

.lh-stage-card { background: #fff; padding: 1.25rem; padding: round(nearest, 1.25rem, 4px); border-radius: var(--lwh-radius); text-decoration: none; color: var(--lwh-ink); display: flex; flex-direction: column; gap: .3rem; gap: round(nearest, .3rem, 4px); transition: transform .2s, box-shadow .2s; border-top: 4px solid var(--lwh-border); }
.lh-stage-card:hover { transform: translateY(-4px); box-shadow: var(--lwh-shadow-lg); }
.lh-stage-card__icon { font-size: 2rem; }
.lh-stage-card__label { font-family: 'Fredoka', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--lwh-ink); }
.lh-stage-card__sub { font-size: .88rem; color: var(--lwh-grey); font-weight: 600; }
.lh-stage-card__ages { font-size: .82rem; color: var(--lwh-coral); font-weight: 700; }
.lh-stage-card__count { font-size: .82rem; color: var(--lwh-grey); }
.lh-stage-card__count strong { color: var(--lwh-ink); }
.lh-stage-card__arrow { color: var(--lwh-coral); font-size: 1.2rem; }
/* Stage accent colours */
.lh-stage-card--eyfs { border-top-color: #F97316; }
.lh-stage-card--ks1  { border-top-color: #06B6D4; }
.lh-stage-card--ks2  { border-top-color: #EAB308; }
.lh-stage-card--ks3  { border-top-color: #22C55E; }
.lh-stage-card--gcse { border-top-color: var(--lwh-purple); }

/* Audience tiles */
.lh-audience-tile { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); text-decoration: none; color: var(--lwh-ink); transition: border-color .2s, transform .2s; }
.lh-audience-tile:hover { border-color: var(--lwh-coral); transform: translateY(-3px); }
.lh-audience-tile h3 { font-family: 'Fredoka', sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-audience-tile p, .lh-audience-tile__lead { color: var(--lwh-grey); font-size: .9rem; line-height: 1.5; }
.lh-audience-tile__features { margin: .75rem 0; margin: round(nearest, .75rem, 4px) 0; font-size: .85rem; color: var(--lwh-grey); }
.lh-audience-tile__features li { padding: .2rem 0; padding: round(nearest, .2rem, 4px) 0; }
.lh-audience-tile__features li::before { content: "✓ "; color: var(--lwh-success); font-weight: 700; }
.lh-audience-tile__cta { color: var(--lwh-coral); font-weight: 700; font-size: .88rem; margin-top: auto; }

/* Subject tiles */
/* Subject cards — responsive professional grid: icon, title, description, CTA. */
.lh-home-subjects__lead { max-width: 640px; margin: .6rem auto 0; margin: round(nearest, .6rem, 4px) auto 0; color: var(--lwh-grey); }
.lh-subject-cards {
  display: grid; gap: 1.1rem; gap: round(nearest, 1.1rem, 4px); margin-top: 2.2rem; margin-top: round(nearest, 2.2rem, 4px);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.lh-subject-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border: 1.5px solid var(--lwh-border); border-radius: 18px;
  padding: 1.5rem 1.4rem 1.6rem;
  padding: round(nearest, 1.5rem, 4px) round(nearest, 1.4rem, 4px) round(nearest, 1.6rem, 4px); text-decoration: none; color: var(--lwh-ink);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  position: relative; height: 100%;
}
.lh-subject-card:hover {
  border-color: var(--lwh-coral); transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(74,20,140,.12);
}
.lh-subject-card:focus-visible { outline: 3px solid var(--lwh-coral); outline-offset: 2px; }
.lh-subject-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 13px; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px);
  background: linear-gradient(135deg, rgba(74,20,140,.10), rgba(233,30,99,.10));
  color: var(--lwh-purple-dark);
}
.lh-subject-card__icon svg { width: 26px; height: 26px; }
.lh-subject-card:hover .lh-subject-card__icon { color: var(--lwh-coral); }
.lh-subject-card__title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.18rem; line-height: 1.2; }
.lh-subject-card__desc { font-size: .9rem; color: var(--lwh-grey); margin-top: .4rem; margin-top: round(nearest, .4rem, 4px); line-height: 1.45; flex: 1 1 auto; }
.lh-subject-card__cta {
  display: inline-flex; align-items: center; gap: .35rem; gap: round(nearest, .35rem, 4px); margin-top: 1.1rem; margin-top: round(nearest, 1.1rem, 4px);
  font-weight: 700; font-size: .85rem; color: var(--lwh-coral);
}
.lh-subject-card__arrow { transition: transform .2s ease; }
.lh-subject-card:hover .lh-subject-card__arrow { transform: translateX(4px); }
@media (max-width: 600px) {
  .lh-subject-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lh-subject-card, .lh-subject-card__arrow { transition: none; }
  .lh-subject-card:hover { transform: none; }
}

/* How it works */
.lh-how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); }
.lh-how-step { text-align: center; padding: 1.5rem 1rem; padding: round(nearest, 1.5rem, 4px) round(nearest, 1rem, 4px); }
.lh-how-step__num { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto .85rem; margin: 0 auto round(nearest, .85rem, 4px); border-radius: 50%; background: var(--lwh-coral); color: #fff; font-family: 'Fredoka', sans-serif; font-size: 1.3rem; font-weight: 700; }
.lh-how-step h3 { font-size: 1.05rem; margin-bottom: .35rem; margin-bottom: round(nearest, .35rem, 4px); }
.lh-how-step p { font-size: .88rem; color: var(--lwh-grey); line-height: 1.5; }

/* Why choose us */
.lh-why-card { display: flex; flex-direction: column; gap: .3rem; gap: round(nearest, .3rem, 4px); padding: 1.25rem; padding: round(nearest, 1.25rem, 4px); background: #fff; border: 1px solid var(--lwh-border); border-radius: var(--lwh-radius); transition: border-color .2s; }
.lh-why-card:hover { border-color: var(--lwh-coral); }
.lh-why-card__icon { font-size: 1.5rem; }
.lh-why-card h3 { font-size: .95rem; }
.lh-why-card p { font-size: .84rem; color: var(--lwh-grey); line-height: 1.45; }

/* Type cards */
.lh-type-card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.25rem; padding: round(nearest, 1.25rem, 4px); text-align: center; transition: border-color .2s, transform .2s; }
.lh-type-card:hover { border-color: var(--lwh-coral); transform: translateY(-3px); }
.lh-type-card__icon { font-size: 2rem; display: block; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }

/* Plans cards */
.lh-plan-card { background: #fff; border: 2px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 2rem 1.5rem; padding: round(nearest, 2rem, 4px) round(nearest, 1.5rem, 4px); text-align: center; transition: border-color .2s, transform .2s; }
.lh-plan-card:hover { border-color: var(--lwh-coral); transform: translateY(-3px); }
.lh-plan-card--featured { border-color: var(--lwh-coral); position: relative; }
.lh-plan-card__badge { display: inline-block; background: var(--lwh-coral); color: #fff; font-size: .75rem; font-weight: 800; padding: .25rem .75rem; padding: round(nearest, .25rem, 4px) round(nearest, .75rem, 4px); border-radius: var(--lwh-radius-pill); position: absolute; top: -12px; left: 50%; transform: translateX(-50%); }
.lh-plan-card__price { font-family: 'Fredoka', sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--lwh-ink); }
.lh-plan-card__period { font-size: .88rem; color: var(--lwh-grey); }
.lh-plan-card__features { text-align: left; margin: 1.25rem 0; margin: round(nearest, 1.25rem, 4px) 0; }
.lh-plan-card__features li { padding: .3rem 0; padding: round(nearest, .3rem, 4px) 0; font-size: .9rem; color: var(--lwh-ink-soft); }
.lh-plan-card__features li::before { content: "✓ "; color: var(--lwh-success); font-weight: 700; }

/* CTA banner */
.lh-home-cta-banner { background: linear-gradient(135deg, var(--lwh-purple-dark) 0%, var(--lwh-purple) 100%); color: #fff; text-align: center; padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-home-cta-banner h2 { color: #fff; margin-bottom: .6rem; margin-bottom: round(nearest, .6rem, 4px); }
.lh-home-cta-banner p { max-width: 500px; margin: 0 auto 1.5rem; margin: 0 auto round(nearest, 1.5rem, 4px); opacity: .85; }
.lh-home-cta-banner .lh-btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }

/* FAQ accordion */
.lh-faq-item { border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); overflow: hidden; }
.lh-faq-item summary { padding: 1rem 1.25rem; padding: round(nearest, 1rem, 4px) round(nearest, 1.25rem, 4px); font-weight: 700; font-size: .95rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.lh-faq-item summary::-webkit-details-marker { display: none; }
.lh-faq-item summary::after { content: "+"; font-size: 1.2rem; color: var(--lwh-coral); }
.lh-faq-item[open] summary::after { content: "−"; }
.lh-faq-item__body { padding: 0 1.25rem 1rem; padding: 0 round(nearest, 1.25rem, 4px) round(nearest, 1rem, 4px); color: var(--lwh-grey); font-size: .92rem; line-height: 1.6; }

/* Board cards */
.lh-board-card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); text-decoration: none; color: var(--lwh-ink); transition: border-color .2s, transform .2s; }
.lh-board-card:hover { border-color: var(--lwh-coral); transform: translateY(-3px); }
.lh-board-card__badge { display: inline-block; padding: .2rem .5rem; padding: round(nearest, .2rem, 4px) round(nearest, .5rem, 4px); border-radius: var(--lwh-radius-xs); font-size: .72rem; font-weight: 800; background: #DBEAFE; color: #1E40AF; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }

/* Hub format cards */
.lh-reshub__types { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; gap: round(nearest, 1.1rem, 4px); margin-top: 2rem; margin-top: round(nearest, 2rem, 4px); }
.lh-reshub-type {
  background: #fff; border: 1.5px solid var(--lwh-border); border-radius: 18px;
  padding: 1.5rem 1.4rem 1.6rem;
  padding: round(nearest, 1.5rem, 4px) round(nearest, 1.4rem, 4px) round(nearest, 1.6rem, 4px); text-decoration: none; color: var(--lwh-ink);
  display: flex; flex-direction: column; align-items: flex-start;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; height: 100%;
}
.lh-reshub-type:hover { border-color: var(--lwh-coral); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(74,20,140,.12); }
.lh-reshub-type:focus-visible { outline: 3px solid var(--lwh-coral); outline-offset: 2px; }
.lh-reshub-type__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 13px; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px);
  background: linear-gradient(135deg, rgba(74,20,140,.10), rgba(233,30,99,.10));
  color: var(--lwh-purple-dark);
}
.lh-reshub-type__icon svg { width: 26px; height: 26px; }
.lh-reshub-type:hover .lh-reshub-type__icon { color: var(--lwh-coral); }
.lh-reshub-type__name { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.12rem; }
.lh-reshub-type__desc { font-size: .88rem; color: var(--lwh-grey); line-height: 1.45; margin-top: .35rem; margin-top: round(nearest, .35rem, 4px); flex: 1 1 auto; }
.lh-reshub-type__count { font-size: .85rem; color: var(--lwh-coral); font-weight: 700; margin-top: 1.1rem; margin-top: round(nearest, 1.1rem, 4px); display: inline-flex; align-items: center; gap: .35rem; gap: round(nearest, .35rem, 4px); }
/* Resources-hub hero gradient (teal→purple, distinct from the landing pages). */
.lh-home-hero--reshub { background: linear-gradient(135deg, #0B3C5D 0%, #1B5E7E 35%, #2BB3FF 70%, #6A1B9A 100%) !important; }
@media (prefers-reduced-motion: reduce) {
  .lh-reshub-type { transition: none; }
  .lh-reshub-type:hover { transform: none; }
}


/* ==========================================================================
   14 — DASHBOARDS
   ========================================================================== */
.lh-dash { max-width: var(--lwh-container); margin: 0 auto; padding: 1.5rem 0; padding: round(nearest, 1.5rem, 4px) 0; }
.lh-dash__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; gap: round(nearest, 1rem, 4px); padding-bottom: 1.25rem; padding-bottom: round(nearest, 1.25rem, 4px); border-bottom: 1px solid var(--lwh-border); margin-bottom: 1.5rem; margin-bottom: round(nearest, 1.5rem, 4px); }
.lh-dash__greeting { display: flex; align-items: center; gap: .75rem; gap: round(nearest, .75rem, 4px); }
.lh-dash__h1 { font-size: 1.5rem; margin: 0; }
.lh-dash__role { color: var(--lwh-grey); font-size: .88rem; }
.lh-dash__quick { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); }
.lh-dash__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; gap: round(nearest, 1rem, 4px); margin-bottom: 2rem; margin-bottom: round(nearest, 2rem, 4px); }
.lh-dash__stat-card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.25rem; padding: round(nearest, 1.25rem, 4px); text-align: center; }
.lh-dash__stat-icon { font-size: 1.8rem; display: block; margin-bottom: .35rem; margin-bottom: round(nearest, .35rem, 4px); }
.lh-dash__stat-num { font-family: 'Fredoka', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--lwh-coral); }
.lh-dash__stat-label { font-size: .82rem; color: var(--lwh-grey); font-weight: 600; }
.lh-dash__section { margin-bottom: 2rem; margin-bottom: round(nearest, 2rem, 4px); }
.lh-dash__section-h { font-size: 1.2rem; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }

/* Child progress cards */
.lh-dash__child-card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.15rem; padding: round(nearest, 1.15rem, 4px); }
.lh-dash__child-head { display: flex; align-items: center; gap: .6rem; gap: round(nearest, .6rem, 4px); margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-dash__child-name { font-weight: 700; }
.lh-dash__child-stages { font-size: .78rem; color: var(--lwh-grey); display: block; }
.lh-dash__progress-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; gap: round(nearest, 1rem, 4px); }

/* Tables */
.lh-table { width: 100%; border-collapse: collapse; }
.lh-table th { text-align: left; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--lwh-grey); padding: .65rem .75rem; padding: round(nearest, .65rem, 4px) round(nearest, .75rem, 4px); border-bottom: 2px solid var(--lwh-border); }
.lh-table td { padding: .65rem .75rem; padding: round(nearest, .65rem, 4px) round(nearest, .75rem, 4px); border-bottom: 1px solid var(--lwh-grey-light); font-size: .9rem; }
.lh-table tr:hover { background: var(--lwh-grey-light); }

/* ==========================================================================
   15 — AUTH PAGES (Login, Register, Forgot Password)
   ========================================================================== */
.lh-auth-shell { min-height: 100vh;min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 2rem; padding: round(nearest, 2rem, 4px); }
.lh-auth-card { background: #fff; border-radius: var(--lwh-radius); box-shadow: var(--lwh-shadow-lg); padding: 2.5rem; padding: round(nearest, 2.5rem, 4px); width: 100%; max-width: 440px; }
.lh-auth-card h1 { text-align: center; margin-bottom: 1.5rem; margin-bottom: round(nearest, 1.5rem, 4px); font-size: 1.5rem; }
.lh-auth-card label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .25rem; margin-bottom: round(nearest, .25rem, 4px); color: var(--lwh-ink); }
.lh-auth-card input[type="text"], .lh-auth-card input[type="email"], .lh-auth-card input[type="password"] {
  width: 100%; padding: .65rem .85rem; padding: round(nearest, .65rem, 4px) round(nearest, .85rem, 4px); border: 1.5px solid var(--lwh-border);
  border-radius: var(--lwh-radius-sm); font-size: .95rem; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px);
}
.lh-auth-card input:focus { border-color: var(--lwh-coral); outline: none; box-shadow: 0 0 0 3px rgba(233,30,99,.12); }
.lh-auth-card .lh-btn { width: 100%; justify-content: center; margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); }
.lh-auth-card__footer { text-align: center; margin-top: 1.25rem; margin-top: round(nearest, 1.25rem, 4px); font-size: .88rem; color: var(--lwh-grey); }
.lh-auth-card__footer a { color: var(--lwh-coral); font-weight: 700; }

/* Login role pills */
.lh-auth-role-pills { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); justify-content: center; margin-bottom: 1.5rem; margin-bottom: round(nearest, 1.5rem, 4px); }
.lh-auth-role-pill { padding: .45rem .85rem; padding: round(nearest, .45rem, 4px) round(nearest, .85rem, 4px); border-radius: var(--lwh-radius-pill); font-size: .82rem; font-weight: 700; border: 2px solid var(--lwh-border); color: var(--lwh-grey); transition: all .15s; }
.lh-auth-role-pill.is-active, .lh-auth-role-pill:hover { border-color: var(--lwh-coral); color: var(--lwh-coral); background: var(--lwh-coral-light); }

/* ==========================================================================
   16 — MEDIA PLAYERS (Video/Audio)
   ========================================================================== */
.lh-media-controls { display: flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); padding: .75rem; padding: round(nearest, .75rem, 4px); background: var(--lwh-ink); border-radius: 0 0 var(--lwh-radius) var(--lwh-radius); }
.lh-mc-btn { background: none; border: 0; color: #fff; font-size: 1.1rem; cursor: pointer; padding: .25rem .5rem; padding: round(nearest, .25rem, 4px) round(nearest, .5rem, 4px); border-radius: var(--lwh-radius-xs); }
.lh-mc-btn:hover { background: rgba(255,255,255,.15); }
.lh-mc-progress { flex: 1; cursor: pointer; }
.lh-mc-bar-bg { height: 6px; background: rgba(255,255,255,.2); border-radius: 3px; overflow: hidden; }
.lh-mc-bar-fill { height: 100%; background: var(--lwh-success); border-radius: 3px; width: 0%; transition: width .2s; }
.lh-mc-time { color: rgba(255,255,255,.7); font-size: .78rem; font-weight: 600; white-space: nowrap; }

/* ==========================================================================
   17 — CHILD MANAGEMENT UI
   ========================================================================== */
.lh-childmgr { padding: 1rem 0; padding: round(nearest, 1rem, 4px) 0; }
.lh-childmgr__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; gap: round(nearest, 1rem, 4px); }
.lh-childmgr__card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.25rem; padding: round(nearest, 1.25rem, 4px); text-align: center; transition: border-color .2s; }
.lh-childmgr__card:hover { border-color: var(--lwh-coral); }
.lh-childmgr__avatar { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto .5rem; margin: 0 auto round(nearest, .5rem, 4px); background: var(--lwh-grey-light); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.lh-childmgr__name { font-weight: 700; font-size: 1rem; }
.lh-childmgr__username { font-size: .82rem; color: var(--lwh-grey); }
.lh-childmgr__add { border: 2px dashed var(--lwh-border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; gap: round(nearest, .5rem, 4px); cursor: pointer; color: var(--lwh-grey); font-weight: 700; min-height: 160px; transition: border-color .2s, color .2s; }
.lh-childmgr__add:hover { border-color: var(--lwh-coral); color: var(--lwh-coral); }

/* ==========================================================================
   18 — LOADER + UTILITIES
   ========================================================================== */
/* Loader safety net */
.lh-loader { position: fixed; inset: 0; background: #fff; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .4s ease, visibility .4s ease; }
/* The JS adds .lh-loader--hidden when the page is ready — this fades it out
   (the rule was previously missing, so the class did nothing and the loader
   could stay on screen). */
.lh-loader--hidden { opacity: 0; visibility: hidden; pointer-events: none; }
/* CSS-ONLY FAILSAFE: even if JS never runs (error, blocked script, etc.), this
   animation fades the loader out and disables it after 2.5s so the page can
   never be permanently stuck behind the loader. */
.lh-loader { animation: lwhLoaderFailsafe .5s ease 2.5s forwards; }
@keyframes lwhLoaderFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.lh-loader__spinner { width: 40px; height: 40px; border: 4px solid var(--lwh-grey-light); border-top-color: var(--lwh-coral); border-radius: 50%; animation: lwhSpin .6s linear infinite; }
@keyframes lwhSpin { to { transform: rotate(360deg); } }
@keyframes lh-loader-safety { 0%, 90% { opacity: 1; } 100% { opacity: 0; pointer-events: none; } }
.lh-loader--safe { animation: lh-loader-safety 3s forwards; }

/* Cards (generic) */
.lh-card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }

/* Badges */
.lh-badge { display: inline-block; padding: .2rem .5rem; padding: round(nearest, .2rem, 4px) round(nearest, .5rem, 4px); border-radius: var(--lwh-radius-xs); font-size: .72rem; font-weight: 800; }
.lh-badge--free  { background: #D1FAE5; color: #065F46; }
.lh-badge--pro   { background: #FEF3C7; color: #92400E; }
.lh-badge--elite { background: var(--lwh-purple-light); color: var(--lwh-purple); }

/* Quick-assign dropdown */
.lh-quick-assign { position: fixed; z-index: 10000; background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); box-shadow: var(--lwh-shadow-lg); padding: 1rem; padding: round(nearest, 1rem, 4px); min-width: 220px; }

/* Assign modal */
.lh-assign-modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
.lh-assign-modal__inner { background: #fff; border-radius: var(--lwh-radius); padding: 2rem; padding: round(nearest, 2rem, 4px); max-width: 480px; width: 90%; box-shadow: var(--lwh-shadow-lg); }
.lh-assign-modal__check { width:20px; height:20px; flex:0 0 auto; accent-color:var(--lwh-purple,#6B2FA0); cursor:pointer; margin:0; }

/* Oops modal (restricted child) */
.lh-oops-modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); }
.lh-oops-modal__box { background: #fff; border-radius: var(--lwh-radius); padding: 2rem; padding: round(nearest, 2rem, 4px); max-width: 400px; text-align: center; box-shadow: var(--lwh-shadow-lg); }

/* Free limit wall */
.lh-free-wall { text-align: center; padding: 3rem 1.5rem; padding: round(nearest, 3rem, 4px) round(nearest, 1.5rem, 4px); background: var(--lwh-grey-light); border-radius: var(--lwh-radius); }
.lh-free-wall h2 { color: var(--lwh-ink); }
.lh-free-wall p { color: var(--lwh-grey); }

/* Muted text */
.lh-muted { color: var(--lwh-grey); font-size: .88rem; }

/* Visibility */
@media (max-width: 768px) { .lwh-hide-mobile { display: none; } }
@media (min-width: 769px) { .lwh-hide-desktop { display: none; } }

/* Ensure body has space before footer */
.site-main, .lh-page-content { min-height: calc(100vh - 300px);min-height: calc(100dvh - 300px); }

/* WP admin bar offset */
.admin-bar .lh-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .lh-header { top: 46px; } }

/* Print */
@media print { .lh-header, .lh-footer, .lh-topbar, .lh-trust-marquee, .lh-curricbar, .lh-toolbar, .lh-catalogue__sidebar { display: none; } }


/* ==========================================================================
   19 — COMPAT: Match actual HTML class names in templates
   ========================================================================== */

/* Burger */
.lh-burger { display: none; background: none; border: 0; width: 36px; height: 36px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; gap: 4px; cursor: pointer; padding: 4px; }
.lh-burger span { display: block; width: 24px; height: 3px; background: var(--lwh-ink); border-radius: 2px; transition: all .2s; }
/* On transparent-header pages the burger sits over a dark hero — make it white
   and bold so it's clearly visible. */
.lh-homepage-body .lh-burger span,
.lh-hero-header-body .lh-burger span { background: #fff; }
/* Open state → X */
.lh-burger--open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.lh-burger--open span:nth-child(2) { opacity: 0; }
.lh-burger--open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 960px) { .lh-burger { display: flex; } }

/* Header actions (auth area) */
.lh-header__actions { display: flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); }
@media (max-width: 960px) { .lh-header__actions { display: none; } }

/* Curriculum bar inner */
.lh-curricbar__inner { display: flex; align-items: center; gap: .4rem; gap: round(nearest, .4rem, 4px); flex-wrap: nowrap; overflow-x: auto; max-width: 1300px; margin: 0 auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lh-curricbar__inner::-webkit-scrollbar { display: none; }
.lh-curricbar__age { font-size: .72rem; font-weight: 800; color: var(--lwh-coral); display: block; }
.lh-curricbar__stage { font-size: .88rem; font-weight: 800; color: var(--lwh-ink); display: block; }
.lh-curricbar__sub { font-size: .72rem; color: var(--lwh-grey); display: block; }
.lh-curricbar__all { font-size: .82rem; font-weight: 700; color: var(--lwh-coral); white-space: nowrap; margin-left: auto; }

/* Drawer overlay */
.lh-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 10000; transition: opacity .25s; }
.lh-drawer-overlay[hidden] { display: none; }
.lh-drawer__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; padding-bottom: round(nearest, 1rem, 4px); border-bottom: 1px solid var(--lwh-border); }
.lh-drawer__close { background: none; border: 0; font-size: 1.8rem; color: var(--lwh-ink); cursor: pointer; }
.lh-drawer__actions { display: flex; flex-direction: column; gap: .5rem; gap: round(nearest, .5rem, 4px); margin-top: 1.5rem; margin-top: round(nearest, 1.5rem, 4px); padding-top: 1rem; padding-top: round(nearest, 1rem, 4px); border-top: 1px solid var(--lwh-border); }
.lh-drawer__actions .lh-btn { width: 100%; justify-content: center; }

/* Loader rings */
.lh-loader__stage { position: relative; width: 100px; height: 100px; }
.lh-loader__ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; }
.lh-loader__ring--1 { border-top-color: var(--lwh-coral); animation: lwhSpin .8s linear infinite; }
.lh-loader__ring--2 { inset: 8px; border-right-color: var(--lwh-purple); animation: lwhSpin 1.2s linear infinite reverse; }
.lh-loader__ring--3 { inset: 16px; border-bottom-color: var(--lwh-yellow); animation: lwhSpin 1.6s linear infinite; }
.lh-loader__logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; }

/* Skip link */
.lh-skip { position: absolute; top: -100px; left: 0; background: var(--lwh-coral); color: #fff; padding: .5rem 1rem; padding: round(nearest, .5rem, 4px) round(nearest, 1rem, 4px); z-index: 100000; font-weight: 700; }
.lh-skip:focus { top: 0; }

/* Sidebar pill (free views etc) */
.lh-catalogue__sidebar-pill { background: var(--lwh-coral-light); color: var(--lwh-coral); padding: .6rem .85rem; padding: round(nearest, .6rem, 4px) round(nearest, .85rem, 4px); border-radius: var(--lwh-radius-sm); font-size: .85rem; font-weight: 700; text-align: center; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-catalogue__sidebar-pill a { color: var(--lwh-coral); font-weight: 800; }

/* Per-page suffix */
.lh-catalogue__perpage-suffix { font-size: .82rem; color: var(--lwh-grey); font-weight: 600; }

/* Hub page latest grid */
.lh-reshub__latest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; gap: round(nearest, 1.25rem, 4px); margin: 1.5rem 0; margin: round(nearest, 1.5rem, 4px) 0; }
.lh-reshub__more { text-align: center; margin-top: 1.5rem; margin-top: round(nearest, 1.5rem, 4px); }
.lh-reshub__section--all { background: var(--lwh-grey-light); }

/* Chat landing (already has inline styles but backup) */
.lhc-landing { --lhc-purple: #7c3aed; }

/* WP default content */
.lh-site-main { min-height: 60vh; }
.entry-content { max-width: var(--lwh-container); margin: 0 auto; padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.entry-content h1, .entry-content h2, .entry-content h3 { margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.entry-content p { margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); color: var(--lwh-ink-soft); }
.entry-content ul, .entry-content ol { padding-left: 1.5rem; padding-left: round(nearest, 1.5rem, 4px); margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.entry-content li { margin-bottom: .35rem; margin-bottom: round(nearest, .35rem, 4px); }

/* Page title */
.lh-page-title { font-size: clamp(1.5rem, 4vw, 2.2rem); margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); padding: 1.5rem 0 0; padding: round(nearest, 1.5rem, 4px) 0 0; }

/* Generic form styles */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], select, textarea {
  border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius-sm);
  padding: .55rem .75rem;
  padding: round(nearest, .55rem, 4px) round(nearest, .75rem, 4px); font-size: .92rem; width: 100%;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--lwh-coral); outline: none; box-shadow: 0 0 0 3px rgba(233,30,99,.1); }

/* WP block compat */
.wp-block-image { margin: 1.5rem 0; margin: round(nearest, 1.5rem, 4px) 0; }
.wp-block-separator { border: 0; height: 1px; background: var(--lwh-border); margin: 2rem 0; margin: round(nearest, 2rem, 4px) 0; }


/* ==========================================================================
   20 — FOOTER DEEP STYLES (matching template HTML)
   ========================================================================== */
.lh-footer__wave { color: var(--lwh-ink); margin-bottom: -1px; margin-bottom: 0px; width: 100%; display: block; }
.lh-footer__trustband { background: rgba(255,255,255,.05); padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); border-bottom: 1px solid rgba(255,255,255,.08); }
.lh-footer__trustband-inner { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem 3rem; gap: round(nearest, 1.5rem, 4px) round(nearest, 3rem, 4px); max-width: 1200px; margin: 0 auto; }
.lh-trustchip { display: flex; align-items: center; gap: .6rem; gap: round(nearest, .6rem, 4px); }
.lh-trustchip__icon { font-size: 1.5rem; }
.lh-trustchip__title { font-size: .88rem; font-weight: 700; color: #fff; }
.lh-trustchip__sub { font-size: .78rem; color: rgba(255,255,255,.5); }

.lh-footer__columns { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); max-width: 1200px; margin: 0 auto; padding: 2.5rem 0; padding: round(nearest, 2.5rem, 4px) 0; }
.lh-footer__col { }
.lh-footer__col-title { color: var(--lwh-yellow); font-family: 'Fredoka', sans-serif; font-size: .92rem; font-weight: 700; margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); text-transform: uppercase; letter-spacing: .04em; }
.lh-footer__col a { display: block; padding: .2rem 0; padding: round(nearest, .2rem, 4px) 0; font-size: .82rem; color: rgba(255,255,255,.55); transition: color .15s; }
.lh-footer__col a:hover { color: var(--lwh-coral); }
.lh-footer__col p { font-size: .82rem; color: rgba(255,255,255,.45); line-height: 1.5; }

@media (max-width: 960px) { .lh-footer__columns { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .lh-footer__columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .lh-footer__columns { grid-template-columns: 1fr; } }

/* Fun band */
.lh-footer__funband { background: rgba(255,255,255,.03); padding: 1.25rem; padding: round(nearest, 1.25rem, 4px); text-align: center; border-top: 1px solid rgba(255,255,255,.06); }
.lh-footer__funband p { color: rgba(255,255,255,.35); font-size: .82rem; margin: 0; }
.lh-footer__funband a { color: var(--lwh-coral); }

/* Legal/copyright band */
.lh-footer__legal { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; gap: round(nearest, .5rem, 4px); max-width: 1200px; margin: 0 auto; padding: 1rem 0; padding: round(nearest, 1rem, 4px) 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .78rem; color: rgba(255,255,255,.35); }
.lh-footer__legal-links { display: flex; gap: 1rem; gap: round(nearest, 1rem, 4px); }
.lh-footer__legal-links a { color: rgba(255,255,255,.4); }
.lh-footer__legal-links a:hover { color: var(--lwh-coral); }
.lh-footer__legal-social { display: flex; gap: .75rem; gap: round(nearest, .75rem, 4px); }
.lh-footer__legal-social a { color: rgba(255,255,255,.4); font-size: 1rem; }
.lh-footer__legal-social a:hover { color: var(--lwh-coral); }

/* ==========================================================================
   21 — HOMEPAGE-SPECIFIC extras
   ========================================================================== */
/* Featured/latest resources carousel/grid on homepage */
.lh-home-latest__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; gap: round(nearest, 1.25rem, 4px); }
.lh-home-latest__more { text-align: right; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-home-latest__more a { color: var(--lwh-coral); font-weight: 700; font-size: .92rem; }

/* Testimonial cards */
.lh-testimonial { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-testimonial__quote { font-size: .95rem; color: var(--lwh-ink-soft); line-height: 1.6; font-style: italic; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-testimonial__author { font-weight: 700; font-size: .88rem; }
.lh-testimonial__role { font-size: .78rem; color: var(--lwh-grey); }

/* Stats row */
.lh-stats-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem 4rem; gap: round(nearest, 2rem, 4px) round(nearest, 4rem, 4px); padding: 2rem 0; padding: round(nearest, 2rem, 4px) 0; }
.lh-stat { text-align: center; }
.lh-stat__num { font-family: 'Fredoka', sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--lwh-coral); display: block; }
.lh-stat__label { font-size: .85rem; color: var(--lwh-grey); font-weight: 600; }

/* Board row (exam boards) */
.lh-board-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; gap: round(nearest, 1.25rem, 4px); }

/* Home audience grid */
.lh-audience-grid { display: grid; gap: 1.25rem; gap: round(nearest, 1.25rem, 4px); }
.lh-audience-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 960px) { .lh-audience-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.lh-audience-tile__head { display: flex; align-items: center; gap: .6rem; gap: round(nearest, .6rem, 4px); margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-audience-tile__icon { font-size: 1.8rem; }

/* Subject grid */

/* Type cards grid */
.lh-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; gap: round(nearest, 1rem, 4px); }


/* ==========================================================================
   22 — CRITICAL LAYOUT FIXES
   ========================================================================== */

/* The ACTUAL grid container is __layout, not .lh-catalogue */
.lh-catalogue__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.25rem;
  gap: round(nearest, 1.25rem, 4px);
}
@media (max-width: 959px) {
  .lh-catalogue__layout { grid-template-columns: 1fr; }
}
/* The mobile trigger sits outside the grid flow */
.lh-catalogue__mobile-trigger { grid-column: 1 / -1; }

/* Sidebar: do NOT stretch across all grid rows — that would force it to
   full column height and defeat position:sticky. Let it size to its content
   and stick (see the sticky rule in the catalogue-deck block). */
.lh-catalogue__sidebar { align-self: start; }
.lh-catalogue__main { min-width: 0; }

/* Catalogue hero (inline within catalogue, before layout) */
.lh-catalogue__hero {
  background: linear-gradient(135deg, var(--lwh-purple-dark) 0%, var(--lwh-purple) 100%);
  color: #fff;
  padding: clamp(2rem, 5vh, 3.5rem) 1.5rem;
  padding: round(nearest, clamp(2rem, 5vh, 3.5rem), 4px) round(nearest, 1.5rem, 4px);
  border-radius: var(--lwh-radius);
  margin-bottom: 1rem;
  margin-bottom: round(nearest, 1rem, 4px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lh-catalogue__hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lh-catalogue__hero-inner { position: relative; z-index: 2; }
.lh-catalogue__hero h1, .lh-catalogue__eyebrow, .lh-catalogue__headline {
  color: #fff;
}
/* Sprint 38 — constrain the catalogue/filter headline. Without this it
   inherits the global h1 clamp (up to 3rem/48px), which is oversized for a
   utility "filter" header and dominates the page. Scoped to the catalogue
   hero only, so homepage and landing heroes are unaffected. */
.lh-catalogue__headline {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  margin: 0;
}
.lh-catalogue__lead { color: rgba(255,255,255,.8); }

/* Homepage hero — ensure gradient bg + proper text */
.lh-home-hero {
  background: linear-gradient(135deg, var(--lwh-purple-dark) 0%, var(--lwh-purple) 50%, #8E24AA 100%) !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
}
.lh-home-hero__bg {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
}
.lh-home-hero__blob {
  position: absolute; border-radius: 50%; opacity: .15;
}
.lh-home-hero__blob--1 { width: 500px; height: 500px; background: var(--lwh-coral); top: -150px; right: -100px; }
.lh-home-hero__blob--2 { width: 300px; height: 300px; background: var(--lwh-yellow); bottom: -80px; left: -60px; }
.lh-home-hero__blob--3 { width: 200px; height: 200px; background: #fff; top: 40%; left: 30%; }
.lh-home-hero__inner {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) 1.5rem clamp(1rem, 3vh, 2rem);
  padding: round(nearest, clamp(3rem, 8vh, 5rem), 4px) round(nearest, 1.5rem, 4px) round(nearest, clamp(1rem, 3vh, 2rem), 4px);
}
/* Hero text — guaranteed white on purple */
.lh-home-hero .lh-home-hero__headline,
.lh-home-hero h1 { color: #fff !important; }
.lh-home-hero .lh-home-hero__lead { color: rgba(255,255,255,.85) !important; }
.lh-home-hero .lh-home-hero__eyebrow { color: var(--lwh-yellow) !important; }
.lh-home-hero .lh-home-hero__highlight { color: var(--lwh-yellow) !important; -webkit-text-fill-color: var(--lwh-yellow) !important; }
.lh-home-hero .lh-home-hero__bullets li { color: rgba(255,255,255,.8) !important; }

/* Free resources hero */
.lh-free-hero, .lh-cat-hero {
  background: linear-gradient(135deg, var(--lwh-purple-dark), var(--lwh-purple)) !important;
  color: #fff; padding: clamp(2rem, 5vh, 3.5rem) 1.5rem; padding: round(nearest, clamp(2rem, 5vh, 3.5rem), 4px) round(nearest, 1.5rem, 4px); text-align: center;
  margin-bottom: 1rem;
  margin-bottom: round(nearest, 1rem, 4px); border-radius: var(--lwh-radius);
}
.lh-free-hero h1, .lh-cat-hero h1, .lh-free-hero h2 { color: #fff; }
.lh-free-hero p, .lh-cat-hero p { color: rgba(255,255,255,.8); }

/* Sidebar in catalogue — contained width on desktop */
@media (min-width: 960px) {
  .lh-catalogue__sidebar {
    position: static !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    z-index: auto !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
}

/* Drawer head/close — hidden on desktop */
@media (min-width: 960px) {
  .lh-catalogue__drawer-head { display: none; }
  .lh-catalogue__drawer-apply { display: none; }
}

/* Filter dropdown body */
.lh-filterdrop__body { padding: .25rem .75rem .5rem; padding: round(nearest, .25rem, 4px) round(nearest, .75rem, 4px) round(nearest, .5rem, 4px); }

/* Search input in catalogue */
.lh-catalogue__search-input { flex: 1; }

/* Catalogue main head (toolbar row) */
/* .lh-catalogue__main-head is defined once, in §55 (futuristic control bar). */

/* Ensure the .lh-catalogue wraps everything */
.lh-catalogue { padding: 0 1.5rem; padding: 0 round(nearest, 1.5rem, 4px); max-width: 1300px; margin: 0 auto; }

/* Visually hidden helper */
.lh-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; margin: 0px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }


/* ==========================================================================
   23 — ASSIGN MODAL
   ========================================================================== */
.lh-assign-modal__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 10000; backdrop-filter: blur(4px); }
.lh-assign-modal__panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: var(--lwh-radius); padding: 2rem; padding: round(nearest, 2rem, 4px); max-width: 480px; width: 90%; z-index: 10001; box-shadow: var(--lwh-shadow-lg); max-height: 90vh; overflow-y: auto; }
.lh-assign-modal__title { font-family: 'Fredoka', sans-serif; font-size: 1.3rem; font-weight: 700; margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-assign-modal__intro { font-size: .9rem; color: var(--lwh-grey); margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-assign-modal__close { position: absolute; top: .75rem; right: .75rem; background: none; border: 0; font-size: 1.5rem; color: var(--lwh-grey); cursor: pointer; }
.lh-assign-modal__people-head { font-weight: 700; font-size: .88rem; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-assign-modal__list { margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-assign-modal__row { display: flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); padding: .4rem 0; padding: round(nearest, .4rem, 4px) 0; }
.lh-assign-modal__avatar { width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; text-align: center; line-height: 32px; }
.lh-assign-modal__name { font-weight: 600; font-size: .92rem; }
.lh-assign-modal__selectall { font-size: .82rem; color: var(--lwh-coral); font-weight: 700; cursor: pointer; background: none; border: 0; }
.lh-assign-modal__field { margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-assign-modal__fieldlabel { display: block; font-size: .82rem; font-weight: 700; margin-bottom: .25rem; margin-bottom: round(nearest, .25rem, 4px); }
.lh-assign-modal__date { width: 100%; }
.lh-assign-modal__feedback { font-size: .85rem; padding: .5rem; padding: round(nearest, .5rem, 4px); border-radius: var(--lwh-radius-xs); text-align: center; margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); }
.lh-assign-modal__feedback.is-good { background: #D1FAE5; color: #065F46; }
.lh-assign-modal__feedback.is-bad { background: #FEE2E2; color: #991B1B; }
.lh-assign-modal__feedback.is-pending { background: var(--lwh-yellow-light); color: #92400E; }

/* Sprint 46 — assign modal polish: open/close transition + multi-child select */
.lh-assign-modal[hidden] { display:none; }
.lh-assign-modal { opacity:0; transition:opacity .2s ease; }
.lh-assign-modal.is-open { opacity:1; }
.lh-assign-modal__panel { transform:translate(-50%,-46%) scale(.97); transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.lh-assign-modal.is-open .lh-assign-modal__panel { transform:translate(-50%,-50%) scale(1); }
.lh-assign-modal__title { display:flex; align-items:center; gap:.5rem; gap:round(nearest, .5rem, 4px); }
.lh-assign-modal__people { border:0; margin:0 0 1rem; margin:0 0 round(nearest, 1rem, 4px); padding:0; }
.lh-assign-modal__people-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; margin-bottom:round(nearest, .6rem, 4px); }
/* Each assignee is a tappable card; whole row toggles the checkbox. */
.lh-assign-modal__list { display:flex; flex-direction:column; gap:.4rem; gap:round(nearest, .4rem, 4px); max-height:260px; overflow-y:auto; margin:0 0 .25rem; margin:0 0 round(nearest, .25rem, 4px); padding:0; list-style:none; }
.lh-assign-modal__row { padding:0; }
.lh-assign-modal__row label { display:flex; align-items:center; gap:.7rem; gap:round(nearest, .7rem, 4px); padding:.6rem .8rem; padding:round(nearest, .6rem, 4px) round(nearest, .8rem, 4px); border:1.5px solid var(--lwh-border); border-radius:12px; cursor:pointer; transition:border-color .15s, background .15s; }
.lh-assign-modal__row label:hover { border-color:var(--lwh-purple,#6B2FA0); background:var(--lwh-purple-light,#F3E5F5); }
.lh-assign-modal__row label:has(.lh-assign-modal__check:checked) { border-color:var(--lwh-purple,#6B2FA0); background:var(--lwh-purple-light,#F3E5F5); }
.lh-assign-modal__avatar { width:34px; height:34px; border-radius:50%; background:var(--lwh-purple,#6B2FA0); color:#fff; font-weight:800; font-size:.85rem; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.lh-assign-modal__name { font-weight:700; font-size:.95rem; flex:1; }
.lh-assign-modal__hint { font-size:.8rem; color:var(--lwh-grey); margin:.2rem 0 0; margin:round(nearest, .2rem, 4px) 0 0; }
.lh-assign-modal__feedback.is-warn { background: #FEF3C7; color: #92400E; }
.lh-assign-modal__actions { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
.lh-assign-modal__submit { flex: 1; }

/* Assign modal — groups / classes */
.lh-assign-group { margin: 0 0 .55rem; margin: 0 0 round(nearest, .55rem, 4px); }
.lh-assign-group--loose { margin-top: .2rem; margin-top: round(nearest, .2rem, 4px); }
.lh-assign-group__sep { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--lwh-grey,#938BBA); margin: .5rem 0 .4rem; margin: round(nearest, .5rem, 4px) 0 round(nearest, .4rem, 4px); }
.lh-assign-group__head { display: flex; align-items: center; gap: .4rem; gap: round(nearest, .4rem, 4px); }
.lh-assign-group__whole { flex: 1; display: flex; align-items: center; gap: .7rem; gap: round(nearest, .7rem, 4px); padding: .6rem .8rem; padding: round(nearest, .6rem, 4px) round(nearest, .8rem, 4px); border: 1.5px solid var(--lwh-border,#E7E0F7); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.lh-assign-group__whole:hover { border-color: var(--lwh-purple,#6D28D9); background: var(--lwh-purple-light,#F3E5F5); }
.lh-assign-group__whole:has(.lh-assign-group__all:checked) { border-color: var(--lwh-purple,#6D28D9); background: var(--lwh-purple-light,#F3E5F5); }
.lh-assign-group__icon { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg,#6D28D9,#8B43E8); color: #fff; font-size: 1rem; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.lh-assign-group__meta { display: flex; flex-direction: column; line-height: 1.2; }
.lh-assign-group__name { font-weight: 800; font-size: .95rem; color: var(--lwh-ink,#2A2150); }
.lh-assign-group__count { font-size: .76rem; color: var(--lwh-grey,#938BBA); font-weight: 600; }
.lh-assign-group__toggle { flex: 0 0 auto; width: 38px; height: 38px; border: 1.5px solid var(--lwh-border,#E7E0F7); border-radius: 10px; background: #fff; color: var(--lwh-grey,#5C5488); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .18s, background .15s; }
.lh-assign-group__toggle:hover { background: var(--lwh-purple-light,#F3E5F5); }
.lh-assign-group__toggle.is-open { transform: rotate(180deg); }
.lh-assign-group__members { list-style: none; margin: .4rem 0 0; margin: round(nearest, .4rem, 4px) 0 0; padding: 0 0 0 1.2rem; padding: 0 0 0 round(nearest, 1.2rem, 4px); display: flex; flex-direction: column; gap: .35rem; gap: round(nearest, .35rem, 4px); border-left: 2px dashed var(--lwh-border,#E7E0F7); }
.lh-assign-group__members[hidden] { display: none; }
.lh-assign-member:disabled + .lh-assign-modal__avatar { opacity: .55; }

/* ==========================================================================
   24 — VIEWER (PDF, embed, native players)
   ========================================================================== */
.lh-viewer { border-radius: var(--lwh-radius); overflow: hidden; margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; background: #fff; border: 1.5px solid var(--lwh-border); }
.lh-viewer--restricted-embed { text-align: center; }
.lh-viewer__lockbanner { background: var(--lwh-coral-light); padding: .75rem 1rem; padding: round(nearest, .75rem, 4px) round(nearest, 1rem, 4px); font-size: .88rem; text-align: center; }
.lh-viewer__lockicon { font-size: 3rem; margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); display: block; }
.lh-viewer__blurplaceholder { padding: 3rem 1.5rem; padding: round(nearest, 3rem, 4px) round(nearest, 1.5rem, 4px); text-align: center; background: var(--lwh-grey-light); }
.lh-viewer__blurplaceholder h3 { margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-viewer__canvas-wrap { position: relative; overflow: auto; max-height: 80vh; }
.lh-viewer__canvas { display: block; margin: 0 auto; }
.lh-viewer__toolbar { display: flex; align-items: center; justify-content: center; gap: .5rem; gap: round(nearest, .5rem, 4px); padding: .6rem; padding: round(nearest, .6rem, 4px); background: var(--lwh-ink); }
.lh-viewer__toolbar button { background: rgba(255,255,255,.1); border: 0; color: #fff; padding: .35rem .6rem; padding: round(nearest, .35rem, 4px) round(nearest, .6rem, 4px); border-radius: var(--lwh-radius-xs); font-size: .85rem; cursor: pointer; }
.lh-viewer__toolbar button:hover { background: rgba(255,255,255,.2); }
.lh-viewer__page { color: rgba(255,255,255,.7); font-size: .82rem; font-weight: 600; }
.lh-viewer__zoom-label { color: rgba(255,255,255,.7); font-size: .78rem; }
.lh-viewer__nav { display: flex; gap: .35rem; gap: round(nearest, .35rem, 4px); }
.lh-viewer__actions { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); justify-content: center; padding: .75rem; padding: round(nearest, .75rem, 4px); }
.lh-viewer__hint { text-align: center; padding: .5rem; padding: round(nearest, .5rem, 4px); font-size: .82rem; color: var(--lwh-grey); }
.lh-viewer__error { text-align: center; padding: 2rem; padding: round(nearest, 2rem, 4px); color: var(--lwh-error); }
.lh-viewer--embed-html iframe, .lh-viewer--embed-url iframe { width: 100%; min-height: 500px; border: 0; border-radius: var(--lwh-radius); }
.lh-viewer--inline-html { padding: 1rem; padding: round(nearest, 1rem, 4px); }
.lh-viewer--empty { padding: 2rem; padding: round(nearest, 2rem, 4px); text-align: center; color: var(--lwh-grey); }

/* ==========================================================================
   25 — RESOURCE PAGE INTERNALS
   ========================================================================== */
.lh-rp-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; gap: round(nearest, .5rem, 4px); padding: 1rem 0; padding: round(nearest, 1rem, 4px) 0; }
.lh-rp-title__main { display: flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); }
.lh-rp-title__h { font-size: clamp(1.3rem, 3vw, 1.8rem); margin: 0; }
.lh-rp-title__type { display: flex; align-items: center; gap: .25rem; gap: round(nearest, .25rem, 4px); font-size: .82rem; font-weight: 700; color: var(--lwh-grey); }
.lh-rp-title__type-icon { font-size: 1.2rem; }
.lh-rp-title__pill { font-size: .75rem; font-weight: 800; padding: .2rem .5rem; padding: round(nearest, .2rem, 4px) round(nearest, .5rem, 4px); border-radius: var(--lwh-radius-pill); }
.lh-rp-progress { margin: .5rem 0 1rem; margin: round(nearest, .5rem, 4px) 0 round(nearest, 1rem, 4px); }
.lh-rp-progress__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; margin-bottom: round(nearest, .35rem, 4px); font-size: .82rem; }
.lh-rp-progress__label { font-weight: 700; color: var(--lwh-ink); }
.lh-rp-progress__pct { font-weight: 800; color: var(--lwh-coral); }
.lh-rp-progress__bar { height: 8px; background: var(--lwh-grey-light); border-radius: 4px; overflow: hidden; }
.lh-rp-progress__fill { height: 100%; background: linear-gradient(90deg, var(--lwh-success), #4ADE80); border-radius: 4px; }
.lh-rp-progress__signin { text-align: center; padding: .5rem; padding: round(nearest, .5rem, 4px); font-size: .82rem; color: var(--lwh-grey); }
.lh-rp-about summary, .lh-rp-about__summary { padding: 1rem 1.25rem; padding: round(nearest, 1rem, 4px) round(nearest, 1.25rem, 4px); font-family: 'Fredoka', sans-serif; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.lh-rp-about summary::-webkit-details-marker { display: none; }
.lh-rp-about__caret { font-size: .8rem; color: var(--lwh-coral); transition: transform .2s; }
.lh-rp-about__h { font-size: 1.1rem; }
.lh-rp-about__hint { font-size: .82rem; color: var(--lwh-grey); margin-left: auto; padding-left: 1rem; padding-left: round(nearest, 1rem, 4px); }
.lh-rp-about__body { padding: 0 1.25rem 1.25rem; padding: 0 round(nearest, 1.25rem, 4px) round(nearest, 1.25rem, 4px); }
.lh-rp-meta__icon { font-size: 1.3rem; margin-bottom: .35rem; margin-bottom: round(nearest, .35rem, 4px); }
.lh-rp-meta__h { font-family: 'Fredoka', sans-serif; font-size: .95rem; margin-bottom: .25rem; margin-bottom: round(nearest, .25rem, 4px); color: var(--lwh-coral); }
.lh-rp-meta__body { font-size: .88rem; color: var(--lwh-grey); line-height: 1.5; }
.lh-rp-meta__sub { font-size: .78rem; color: var(--lwh-grey); margin-top: .25rem; margin-top: round(nearest, .25rem, 4px); }
.lh-rp-related__h { font-size: 1.2rem; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-rp-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; gap: round(nearest, 1rem, 4px); }

/* ==========================================================================
   26 — AUTH PAGES (backgrounds, shapes, cards)
   ========================================================================== */
.lh-authpage { min-height: 100vh;min-height: 100dvh; display: flex; align-items: stretch; }
.lh-authpage__main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; padding: round(nearest, 2rem, 4px); position: relative; overflow: hidden; }
.lh-authpage__bar { position: absolute; bottom: 0; left: 0; right: 0; padding: .5rem 1rem; padding: round(nearest, .5rem, 4px) round(nearest, 1rem, 4px); font-size: .78rem; color: rgba(255,255,255,.4); display: flex; justify-content: space-between; }
.lh-authpage__bar-links a { color: rgba(255,255,255,.5); margin: 0 .5rem; margin: 0 round(nearest, .5rem, 4px); }
.lh-authpage__foot { text-align: center; font-size: .78rem; color: rgba(255,255,255,.4); padding: .75rem; padding: round(nearest, .75rem, 4px); }
.lh-authpage__brand { text-align: center; margin-bottom: 1.5rem; margin-bottom: round(nearest, 1.5rem, 4px); }
.lh-authpage__brand-a { color: #fff; font-family: 'Fredoka', sans-serif; font-size: 1.3rem; font-weight: 700; }
.lh-authpage__brand-b { color: var(--lwh-coral); }
.lh-authbg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.lh-authbg__aurora, .lh-authbg__wave, .lh-authbg__grid, .lh-authbg__beam, .lh-authbg__circle, .lh-authbg__dot, .lh-authbg__star, .lh-authbg__particle, .lh-authbg__sun { position: absolute; }
.lh-authcard { position: relative; z-index: 2; background: rgba(255,255,255,.95); border-radius: var(--lwh-radius); box-shadow: var(--lwh-shadow-lg); padding: 2rem; padding: round(nearest, 2rem, 4px); width: 100%; max-width: 440px; backdrop-filter: blur(8px); }
.lh-authcard--register { max-width: 520px; }
.lh-authcard__h { font-family: 'Fredoka', sans-serif; font-size: 1.5rem; text-align: center; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-authcard__lead { text-align: center; color: var(--lwh-grey); margin-bottom: 1.5rem; margin-bottom: round(nearest, 1.5rem, 4px); font-size: .92rem; }
.lh-authcard__form { }
.lh-authcard__form-h { font-size: 1.1rem; font-weight: 700; margin-bottom: .25rem; margin-bottom: round(nearest, .25rem, 4px); }
.lh-authcard__form-sub { font-size: .85rem; color: var(--lwh-grey); margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-authcard__cta-row, .lh-authcard__cta-block { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
.lh-authcard__cta-block { flex-direction: column; }
.lh-authcard__trust { text-align: center; margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); font-size: .78rem; color: var(--lwh-grey); }
.lh-authcard__perks { margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; font-size: .85rem; color: var(--lwh-ink-soft); }
.lh-authcard__perks li { padding: .2rem 0; padding: round(nearest, .2rem, 4px) 0; }
.lh-authcard__perks li::before { content: "✓ "; color: var(--lwh-success); font-weight: 700; }
.lh-authcard__chip { display: inline-block; padding: .15rem .4rem; padding: round(nearest, .15rem, 4px) round(nearest, .4rem, 4px); border-radius: var(--lwh-radius-xs); font-size: .72rem; font-weight: 700; background: var(--lwh-coral-light); color: var(--lwh-coral); }
.lh-authcard__copy { text-align: center; font-size: .82rem; color: var(--lwh-grey); margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
.lh-authcard__copy a { color: var(--lwh-coral); font-weight: 700; }
.lh-authrow { display: flex; gap: .75rem; gap: round(nearest, .75rem, 4px); margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-authrow > * { flex: 1; }
.lh-auth-shape { position: absolute; border-radius: 50%; opacity: .1; }
.lh-auth-shapes { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.lh-auth-stage { min-height: 100vh;min-height: 100dvh; display: flex; position: relative; overflow: hidden; }
.lh-auth-stage--sky { background: linear-gradient(135deg, var(--lwh-purple-dark), var(--lwh-purple), #8E24AA); }
.lh-auth-stage__panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; padding: round(nearest, 2rem, 4px); position: relative; z-index: 2; }
.lh-auth-stage__panel--welcome { color: #fff; text-align: center; max-width: 480px; }
.lh-auth-stage__panel--form { background: rgba(255,255,255,.02); }
.lh-auth-stage__h { font-size: 2rem; color: #fff; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-auth-stage__lead { color: rgba(255,255,255,.7); font-size: 1rem; margin-bottom: 1.5rem; margin-bottom: round(nearest, 1.5rem, 4px); }
.lh-auth-stage__list { text-align: left; margin: 1.5rem auto; margin: round(nearest, 1.5rem, 4px) auto; max-width: 320px; }
.lh-auth-stage__list li { padding: .3rem 0; padding: round(nearest, .3rem, 4px) 0; color: rgba(255,255,255,.8); font-size: .9rem; }
.lh-auth-stage__list li::before { content: "✓ "; color: var(--lwh-yellow); font-weight: 700; }
.lh-auth-stage__emblem { font-size: 3rem; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-auth-stage__copy { font-size: .82rem; color: rgba(255,255,255,.4); margin-top: 2rem; margin-top: round(nearest, 2rem, 4px); }
.lh-google-signin { margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; }
.lh-google-signin__btn-wrap { text-align: center; }
.lh-google-signin__divider { text-align: center; color: var(--lwh-grey); font-size: .82rem; margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; position: relative; }
.lh-google-signin__divider::before, .lh-google-signin__divider::after { content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--lwh-border); }
.lh-google-signin__divider::before { left: 0; }
.lh-google-signin__divider::after { right: 0; }

/* ==========================================================================
   27 — LANDING PAGES (Parent/Teacher)
   ========================================================================== */
.lh-landing__hero { background: linear-gradient(135deg, var(--lwh-purple-dark), var(--lwh-purple)); color: #fff; padding: clamp(3rem, 8vh, 5rem) 1.5rem; padding: round(nearest, clamp(3rem, 8vh, 5rem), 4px) round(nearest, 1.5rem, 4px); text-align: center; position: relative; overflow: hidden; }
.lh-landing__hero-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.lh-landing__eyebrow { color: var(--lwh-yellow); }
.lh-landing__h1 { color: #fff; font-size: clamp(2rem, 5vw, 3rem); margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-landing__lead { color: rgba(255,255,255,.8); font-size: clamp(.95rem, 2vw, 1.15rem); margin: 0 auto 2rem; margin: 0 auto round(nearest, 2rem, 4px); max-width: 600px; }
.lh-landing__section { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-landing__inner { max-width: 1200px; margin: 0 auto; }
.lh-landing__split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; gap: round(nearest, 2rem, 4px); align-items: center; }
@media (max-width: 768px) { .lh-landing__split { grid-template-columns: 1fr; } }
.lh-landing__split-text h2 { margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-landing__split-text p { color: var(--lwh-grey); }
.lh-landing__feature-list { margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; }
.lh-landing__feature-list li { padding: .3rem 0; padding: round(nearest, .3rem, 4px) 0; font-size: .92rem; }
.lh-landing__feature-list li::before { content: "✓ "; color: var(--lwh-success); font-weight: 700; }
.lh-landing__mock { background: var(--lwh-grey-light); border-radius: var(--lwh-radius); overflow: hidden; border: 1.5px solid var(--lwh-border); }
.lh-landing__mock-head { background: var(--lwh-ink); padding: .5rem .75rem; padding: round(nearest, .5rem, 4px) round(nearest, .75rem, 4px); display: flex; align-items: center; gap: .35rem; gap: round(nearest, .35rem, 4px); }
.lh-landing__mock-dot { width: 10px; height: 10px; border-radius: 50%; }
.lh-landing__mock-dot--r { background: #EF4444; }
.lh-landing__mock-dot--y { background: #F59E0B; }
.lh-landing__mock-dot--g { background: #22C55E; }
.lh-landing__mock-body { padding: 1rem; padding: round(nearest, 1rem, 4px); }
.lh-landing__mock-card { background: #fff; border-radius: var(--lwh-radius-sm); padding: .75rem; padding: round(nearest, .75rem, 4px); margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); border: 1px solid var(--lwh-border); }
.lh-landing__reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; gap: round(nearest, 1rem, 4px); }
.lh-landing__reason { display: flex; gap: .75rem; gap: round(nearest, .75rem, 4px); padding: 1rem; padding: round(nearest, 1rem, 4px); background: #fff; border: 1px solid var(--lwh-border); border-radius: var(--lwh-radius); }
.lh-landing__reason-icon { font-size: 1.5rem; flex-shrink: 0; }
.lh-landing__cta-band { background: var(--lwh-coral); color: #fff; text-align: center; padding: 2.5rem 1.5rem; padding: round(nearest, 2.5rem, 4px) round(nearest, 1.5rem, 4px); }
.lh-landing__cta-band h2 { color: #fff; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-landing__cta-band p { color: rgba(255,255,255,.85); margin-bottom: 1.25rem; margin-bottom: round(nearest, 1.25rem, 4px); }
.lh-landing__cta-row { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); justify-content: center; }

/* ==========================================================================
   28 — ASSESSMENT WIDGET (Dashboard)
   ========================================================================== */
.lh-assess-widget { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-assess-widget__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-assess-widget__title { font-family: 'Fredoka', sans-serif; font-size: 1.1rem; font-weight: 700; }
.lh-assess-widget__eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--lwh-coral); }
.lh-assess-widget__stats { display: flex; gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-assess-stat { text-align: center; }
.lh-assess-stat__num { font-family: 'Fredoka', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--lwh-coral); display: block; }
.lh-assess-stat__label { font-size: .75rem; color: var(--lwh-grey); }
.lh-assess-level { display: inline-block; padding: .15rem .4rem; padding: round(nearest, .15rem, 4px) round(nearest, .4rem, 4px); border-radius: var(--lwh-radius-xs); font-size: .72rem; font-weight: 800; }
.lh-assess-status { display: inline-block; padding: .15rem .4rem; padding: round(nearest, .15rem, 4px) round(nearest, .4rem, 4px); border-radius: var(--lwh-radius-xs); font-size: .72rem; font-weight: 800; }
.lh-assess-widget__feed { margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
.lh-assess-widget__feed-item { display: flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); padding: .4rem 0; padding: round(nearest, .4rem, 4px) 0; border-bottom: 1px solid var(--lwh-grey-light); font-size: .85rem; }
.lh-assess-widget__feed-icon { font-size: 1rem; }
.lh-assess-widget__feed-percent { font-weight: 800; color: var(--lwh-coral); margin-left: auto; }
.lh-assess-widget__feed-ago { font-size: .75rem; color: var(--lwh-grey); }
.lh-assess-widget__weak { margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
.lh-assess-widget__weak-icon { font-size: 1rem; margin-right: .25rem; margin-right: round(nearest, .25rem, 4px); }
.lh-assess-widget__weak-hint { font-size: .78rem; color: var(--lwh-grey); }
.lh-assess-widget__weak-pack a { color: var(--lwh-coral); font-weight: 700; font-size: .82rem; }
.lh-assess-widget__empty { text-align: center; padding: 2rem; padding: round(nearest, 2rem, 4px); color: var(--lwh-grey); }
.lh-assess-widget__empty-icon { font-size: 2rem; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); display: block; }
.lh-assess-widget__cta { text-align: center; margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
.lh-assess-widget__table-wrap { overflow-x: auto; }
.lh-assess-widget__section { margin-bottom: 1.5rem; margin-bottom: round(nearest, 1.5rem, 4px); }
.lh-assess-widget__h3 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }

/* ==========================================================================
   29 — AGE GATE + MISC COMPONENTS
   ========================================================================== */
.lh-agegate { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.lh-agegate__card { background: #fff; border-radius: var(--lwh-radius); padding: 2rem; padding: round(nearest, 2rem, 4px); max-width: 400px; width: 90%; text-align: center; box-shadow: var(--lwh-shadow-lg); }
.lh-agegate__h { font-family: 'Fredoka', sans-serif; font-size: 1.3rem; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-agegate__lead { color: var(--lwh-grey); font-size: .92rem; margin-bottom: 1.25rem; margin-bottom: round(nearest, 1.25rem, 4px); }
.lh-agegate__label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .25rem; margin-bottom: round(nearest, .25rem, 4px); text-align: left; }
.lh-agegate__hint { font-size: .78rem; color: var(--lwh-grey); margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); }
.lh-agegate__expired { color: var(--lwh-error); font-weight: 700; margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); }
.lh-agegate__modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.lh-agegate__modal-inner { background: #fff; border-radius: var(--lwh-radius); padding: 2rem; padding: round(nearest, 2rem, 4px); max-width: 380px; text-align: center; }

/* Child manager extras */
.lh-childmgr__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-childmgr__title { font-family: 'Fredoka', sans-serif; font-size: 1.2rem; font-weight: 700; }
.lh-childmgr__slots { font-size: .85rem; color: var(--lwh-grey); }
.lh-childmgr__info { font-size: .85rem; color: var(--lwh-ink-soft); }
.lh-childmgr__actions { display: flex; gap: .35rem; gap: round(nearest, .35rem, 4px); margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); }
.lh-childmgr__edit-btn, .lh-childmgr__remove-btn { font-size: .78rem; padding: .25rem .5rem; padding: round(nearest, .25rem, 4px) round(nearest, .5rem, 4px); border-radius: var(--lwh-radius-xs); border: 1px solid var(--lwh-border); background: #fff; cursor: pointer; }
.lh-childmgr__remove-btn { color: var(--lwh-error); border-color: var(--lwh-error); }
.lh-childmgr__modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 1rem; padding: round(nearest, 1rem, 4px); background: rgba(0,0,0,.5); backdrop-filter: blur(3px); overflow-y: auto; }
/* Respect the HTML hidden attribute — without this, the display:flex above
   overrides hidden's display:none and the modal shows on page load. The modal
   must only appear when "Add" / "Create" is clicked (JS clears hidden). */
.lh-childmgr__modal[hidden] { display: none !important; }
.lh-childmgr__modal-card { background: #fff; border-radius: var(--lwh-radius); padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); width: 100%; max-width: 480px; max-height: calc(100vh - 2rem);max-height: calc(100dvh - 2rem); overflow-y: auto; box-shadow: var(--lwh-shadow-lg); -webkit-overflow-scrolling: touch; }
.lh-childmgr__modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-childmgr__modal-close { background: none; border: 0; font-size: 1.5rem; cursor: pointer; line-height: 1; }
.lh-childmgr__modal-foot { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
@media (min-width: 600px) { .lh-childmgr__modal-card { padding: 2rem; padding: round(nearest, 2rem, 4px); } }
/* Wider on desktop with a two-column form body so it fits without scrolling. */
@media (min-width: 760px) {
  .lh-childmgr__modal-card { max-width: 760px; }
  .lh-childmgr__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; gap: 0 round(nearest, 1.5rem, 4px); }
  .lh-childmgr__form-grid .lh-childmgr__full { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .lh-childmgr__modal { padding: 0; align-items: stretch; }
  .lh-childmgr__modal-card { max-width: 100%; max-height: 100vh;max-height: 100dvh; min-height: 100vh;min-height: 100dvh; border-radius: 0; }
  .lh-childmgr__modal-foot { position: sticky; bottom: 0; background: #fff; padding-top: .75rem; padding-top: round(nearest, .75rem, 4px); }
  .lh-childmgr__modal-foot .lh-btn { flex: 1; }
}
.lh-childmgr__avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: .5rem; gap: round(nearest, .5rem, 4px); margin: .75rem 0; margin: round(nearest, .75rem, 4px) 0; }
.lh-childmgr__avpick { width: 48px; height: 48px; border-radius: 50%; font-size: 1.5rem; text-align: center; line-height: 48px; border: 2px solid var(--lwh-border); cursor: pointer; transition: border-color .15s; }
.lh-childmgr__avpick:hover, .lh-childmgr__avpick.is-selected, .lh-childmgr__avpick.is-active { border-color: var(--lwh-coral); box-shadow: 0 0 0 2px var(--lwh-coral); }
.lh-childmgr__stages, .lh-childmgr__subjects { display: flex; flex-wrap: wrap; gap: .35rem; gap: round(nearest, .35rem, 4px); margin: .5rem 0; margin: round(nearest, .5rem, 4px) 0; }
.lh-childmgr__stage-opt, .lh-childmgr__subject-opt { padding: .25rem .5rem; padding: round(nearest, .25rem, 4px) round(nearest, .5rem, 4px); border-radius: var(--lwh-radius-xs); border: 1px solid var(--lwh-border); font-size: .78rem; cursor: pointer; }
.lh-childmgr__stage-opt:hover, .lh-childmgr__subject-opt:hover { border-color: var(--lwh-coral); }
.lh-childmgr__add-card { border: 2px dashed var(--lwh-border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; gap: round(nearest, .5rem, 4px); cursor: pointer; color: var(--lwh-grey); font-weight: 700; min-height: 160px; transition: border-color .2s; border-radius: var(--lwh-radius); }
.lh-childmgr__add-card:hover { border-color: var(--lwh-coral); color: var(--lwh-coral); }
.lh-childmgr__add-icon { font-size: 2rem; }
.lh-childmgr__add-label { font-size: .95rem; }
.lh-childmgr__add-sub { font-size: .78rem; color: var(--lwh-grey); }

/* Control panel (backend) */
.lh-cpanel { padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-cpanel__lead { color: var(--lwh-grey); margin-bottom: 1.5rem; margin-bottom: round(nearest, 1.5rem, 4px); }
.lh-cpanel__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; gap: round(nearest, 1rem, 4px); margin-bottom: 2rem; margin-bottom: round(nearest, 2rem, 4px); }
.lh-cpanel__card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.25rem; padding: round(nearest, 1.25rem, 4px); }
.lh-cpanel__card--settings { background: var(--lwh-yellow-light); }
.lh-cpanel__btn { margin: .25rem; margin: round(nearest, .25rem, 4px); }
.lh-cpanel__btns { display: flex; flex-wrap: wrap; gap: .35rem; gap: round(nearest, .35rem, 4px); }

/* Brand logo */
.lh-brand { display: flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); text-decoration: none; }
.lh-brand__icon { width: 42px; height: 42px; }
/* Animated emblem: positioning context, raised above the topbar (z 1200) so
   sparkles are never clipped. overflow visible lets streaks + sparkles spill. */
.lh-brand__emblem {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; z-index: 1300; overflow: visible;
}
.lh-brand__icon {
  position: relative; z-index: 2; transform-origin: 60% 80%;
  animation: lhRooHop 2.8s ease-in-out infinite;
}
@keyframes lhRooHop { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-3deg); } }

/* Wind streaks — behind the kangaroo, stream leftward to suggest speed. */
.lh-brand__streaks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lh-brand__streaks i {
  position: absolute; left: -10px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75));
  opacity: 0; animation: lhStreak 1.4s linear infinite;
}
.lh-brand__streaks i:nth-child(1) { top: 16px; width: 18px; animation-delay: 0s; }
.lh-brand__streaks i:nth-child(2) { top: 26px; width: 24px; animation-delay: .45s; }
.lh-brand__streaks i:nth-child(3) { top: 35px; width: 14px; animation-delay: .9s; }
@keyframes lhStreak {
  0% { opacity: 0; transform: translateX(14px); }
  25% { opacity: .9; }
  70% { opacity: .5; }
  100% { opacity: 0; transform: translateX(-14px); }
}

/* Sparkles — in front, rise off the book and fade. Highest z so they sit over
   everything including the topbar edge. */
.lh-brand__sparkles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.lh-brand__sparkles i, .lh-brand__sparkles b {
  position: absolute; border-radius: 50%; opacity: 0;
  animation: lhSparkRise 2.6s ease-out infinite;
}
.lh-brand__sparkles .s1 { left: 20px; top: 4px; width: 5px; height: 5px; background: #FFD700; animation-delay: 0s; }
.lh-brand__sparkles .s2 { left: 30px; top: 1px; width: 4px; height: 4px; background: #FF4FA3; animation-delay: .6s; }
.lh-brand__sparkles .s3 { left: 13px; top: 7px; width: 4px; height: 4px; background: #2BB3FF; animation-delay: 1.1s; }
.lh-brand__sparkles .s4 { left: 36px; top: 6px; width: 5px; height: 5px; background: #5DCAA5; animation-delay: 1.6s; }
.lh-brand__sparkles .star {
  left: 26px; top: 2px; width: 9px; height: 9px; border-radius: 0; background: #FFD700;
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation: lhStarRise 2.6s ease-out infinite; animation-delay: .9s;
}
@keyframes lhSparkRise {
  0% { opacity: 0; transform: translateY(6px) scale(.4); }
  18% { opacity: 1; } 70% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-22px) scale(1.1); }
}
@keyframes lhStarRise {
  0% { opacity: 0; transform: translateY(6px) scale(.3) rotate(0); }
  20% { opacity: 1; } 60% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-24px) scale(1.15) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lh-brand__icon, .lh-brand__streaks i, .lh-brand__sparkles i, .lh-brand__sparkles b { animation: none; }
  .lh-brand__streaks i { opacity: 0; }
  .lh-brand__sparkles i, .lh-brand__sparkles b { opacity: .85; }
}
/* Footer brand wordmark: "Learnaroo" white, "Hub" yellow (matches header). */
.lh-footer .lh-brand__text-a { color: #fff; }
.lh-footer .lh-brand__text-b { color: var(--lwh-yellow); }
/* Footer newsletter copy sits on the dark footer — force white text, with the
   Privacy Policy link kept in the accent colour for contrast. */
.lh-footer__newsletter-copy h3 { color: #fff; }
.lh-footer__newsletter-disclaimer { color: rgba(255,255,255,.75); }
.lh-footer__newsletter-disclaimer a { color: var(--lwh-yellow); text-decoration: underline; }
.lh-brand__text { font-family: 'Fredoka', sans-serif; font-size: 1.2rem; font-weight: 700; }
.lh-brand__text-a { color: var(--lwh-ink); }
.lh-brand__text-b { color: var(--lwh-coral); }
.lh-brand__chip { font-size: .65rem; font-weight: 800; padding: .1rem .3rem; padding: round(nearest, .1rem, 4px) round(nearest, .3rem, 4px); border-radius: 3px; background: var(--lwh-coral-light); color: var(--lwh-coral); vertical-align: super; }

/* Avatar */
.lh-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lwh-grey-light); font-size: 1.2rem; }
.lh-avatar--preset { background: var(--lwh-yellow-light); }
.lh-avatar--custom img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }

/* Misc */
.lh-check { display: flex; align-items: center; gap: .4rem; gap: round(nearest, .4rem, 4px); }
.lh-pill { display: inline-block; padding: .15rem .4rem; padding: round(nearest, .15rem, 4px) round(nearest, .4rem, 4px); border-radius: var(--lwh-radius-pill); font-size: .72rem; font-weight: 700; }
.lh-pill--danger { background: #FEE2E2; color: #991B1B; }
.lh-empty-state { text-align: center; padding: 3rem 1.5rem; padding: round(nearest, 3rem, 4px) round(nearest, 1.5rem, 4px); color: var(--lwh-grey); }
.lh-empty-state__icon { font-size: 3rem; margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); display: block; }
.lh-field { margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-field label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .25rem; margin-bottom: round(nearest, .25rem, 4px); }
.lh-field--check { display: flex; align-items: center; gap: .4rem; gap: round(nearest, .4rem, 4px); }
.lh-field-row { display: flex; gap: .75rem; gap: round(nearest, .75rem, 4px); }
.lh-field-row > * { flex: 1; }
.lh-filter-pill { display: inline-block; padding: .25rem .5rem; padding: round(nearest, .25rem, 4px) round(nearest, .5rem, 4px); border-radius: var(--lwh-radius-pill); font-size: .78rem; font-weight: 700; border: 1.5px solid var(--lwh-border); cursor: pointer; }
.lh-filter-pill:hover { border-color: var(--lwh-coral); }
.lh-filter-pill--free  { background: #D1FAE5; border-color: #D1FAE5; color: #065F46; }
.lh-filter-pill--pro   { background: #FEF3C7; border-color: #FEF3C7; color: #92400E; }
.lh-filter-pill--elite { background: var(--lwh-purple-light); border-color: var(--lwh-purple-light); color: var(--lwh-purple); }
.lh-cta-inline { background: var(--lwh-coral-light); border-radius: var(--lwh-radius); padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); text-align: center; margin: 1.5rem 0; margin: round(nearest, 1.5rem, 4px) 0; }
.lh-cta-inline h3, .lh-cta-banner h2 { margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-managed-pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .35rem; padding: round(nearest, .15rem, 4px) round(nearest, .35rem, 4px); border-radius: var(--lwh-radius-xs); background: var(--lwh-purple-light); color: var(--lwh-purple); }
.lh-suspended-badge { background: #FEE2E2; color: #991B1B; font-size: .72rem; font-weight: 700; padding: .15rem .35rem; padding: round(nearest, .15rem, 4px) round(nearest, .35rem, 4px); border-radius: var(--lwh-radius-xs); }
.lh-sitemap { max-width: var(--lwh-container); margin: 0 auto; padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-sitemap__hero { background: linear-gradient(135deg, var(--lwh-purple-dark), var(--lwh-purple)); color: #fff; padding: 2rem 1.5rem; padding: round(nearest, 2rem, 4px) round(nearest, 1.5rem, 4px); border-radius: var(--lwh-radius); text-align: center; margin-bottom: 2rem; margin-bottom: round(nearest, 2rem, 4px); }
.lh-sitemap__h1 { color: #fff; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-sitemap__lead { color: rgba(255,255,255,.7); }
.lh-sitemap__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); }
.lh-sitemap__col h2 { font-size: 1.1rem; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-sitemap__col a { display: block; padding: .2rem 0; padding: round(nearest, .2rem, 4px) 0; color: var(--lwh-coral); font-size: .88rem; }
.lh-sitemap__count { font-size: .75rem; color: var(--lwh-grey); }


/* ==========================================================================
   30 — REMAINING COMPONENT COVERAGE
   ========================================================================== */

/* Resource header (single resource page top area) */
.lh-resource-header { display: flex; flex-wrap: wrap; gap: .75rem; gap: round(nearest, .75rem, 4px); align-items: center; padding: 1rem 0; padding: round(nearest, 1rem, 4px) 0; }
.lh-resource-header__topline { display: flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); width: 100%; }
.lh-resource-header__type { display: flex; align-items: center; gap: .25rem; gap: round(nearest, .25rem, 4px); font-size: .82rem; font-weight: 700; color: var(--lwh-grey); }
.lh-resource-header__type-icon { font-size: 1.2rem; }
.lh-resource-header__chip, .lh-resource-header__chips { display: flex; gap: .3rem; gap: round(nearest, .3rem, 4px); }
.lh-resource-header__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; gap: round(nearest, 1rem, 4px); }
.lh-resource-header__col { font-size: .85rem; }
.lh-resource-header__section-title { font-weight: 700; font-size: .78rem; color: var(--lwh-grey); text-transform: uppercase; margin-bottom: .25rem; margin-bottom: round(nearest, .25rem, 4px); }
.lh-resource-header__stage, .lh-resource-header__duration, .lh-resource-header__purpose { font-weight: 600; }
.lh-resource-header__progress { margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); }

/* Resource intro */
.lh-resource-intro { padding: 1.25rem; padding: round(nearest, 1.25rem, 4px); background: var(--lwh-grey-light); border-radius: var(--lwh-radius); margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; }
.lh-resource-intro__title { font-family: 'Fredoka', sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-resource-intro__heading { font-size: 1rem; font-weight: 700; margin: .75rem 0 .25rem; margin: round(nearest, .75rem, 4px) 0 round(nearest, .25rem, 4px); }
.lh-resource-intro__prose { font-size: .9rem; color: var(--lwh-ink-soft); line-height: 1.6; }
.lh-resource-intro__inside, .lh-resource-intro__insidelist { margin: .5rem 0; margin: round(nearest, .5rem, 4px) 0; }
.lh-resource-intro__insidelist li { padding: .2rem 0; padding: round(nearest, .2rem, 4px) 0; font-size: .88rem; }
.lh-resource-intro__guidance { margin: .75rem 0; margin: round(nearest, .75rem, 4px) 0; padding: .75rem; padding: round(nearest, .75rem, 4px); border-radius: var(--lwh-radius-sm); font-size: .88rem; }
.lh-resource-intro__guidance--check { background: #D1FAE5; }
.lh-resource-intro__guidance--parent { background: var(--lwh-coral-light); }
.lh-resource-intro__guidance--teacher { background: var(--lwh-purple-light); }
.lh-resource-intro__guidance--student { background: var(--lwh-yellow-light); }
.lh-resource-intro__segments { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); flex-wrap: wrap; margin: .5rem 0; margin: round(nearest, .5rem, 4px) 0; }
.lh-resource-intro__seglist { display: flex; gap: .25rem; gap: round(nearest, .25rem, 4px); flex-wrap: wrap; }
.lh-resource-intro__segitem, .lh-resource-intro__segref { font-size: .78rem; padding: .15rem .35rem; padding: round(nearest, .15rem, 4px) round(nearest, .35rem, 4px); border-radius: var(--lwh-radius-xs); background: var(--lwh-grey-light); }
.lh-resource-intro__related { margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
.lh-resource-intro__relatedlist { display: flex; flex-direction: column; gap: .25rem; gap: round(nearest, .25rem, 4px); }
.lh-resource-intro__relatedlink { color: var(--lwh-coral); font-weight: 600; font-size: .88rem; }
.lh-resource-intro__relatedtype { font-size: .72rem; color: var(--lwh-grey); }
.lh-resource-intro__tracking { display: flex; align-items: center; gap: .35rem; gap: round(nearest, .35rem, 4px); margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); font-size: .82rem; color: var(--lwh-success); font-weight: 700; }
.lh-resource-intro__tracking-icon { font-size: 1rem; }

/* Category landing (taxonomy archive page) */
.lh-catland__hero { background: linear-gradient(135deg, var(--lwh-purple-dark), var(--lwh-purple)); color: #fff; padding: clamp(2rem, 5vh, 3.5rem) 1.5rem; padding: round(nearest, clamp(2rem, 5vh, 3.5rem), 4px) round(nearest, 1.5rem, 4px); text-align: center; border-radius: var(--lwh-radius); margin-bottom: 1.5rem; margin-bottom: round(nearest, 1.5rem, 4px); }
.lh-catland__hero-inner { max-width: 720px; margin: 0 auto; }
.lh-catland__eyebrow { color: var(--lwh-yellow); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.lh-catland__h { color: #fff; font-size: clamp(1.5rem, 4vw, 2.5rem); margin: .5rem 0; margin: round(nearest, .5rem, 4px) 0; }
.lh-catland__lead { color: rgba(255,255,255,.8); max-width: 600px; margin: 0 auto .75rem; margin: 0 auto round(nearest, .75rem, 4px); }
.lh-catland__sub { color: rgba(255,255,255,.6); font-size: .88rem; }
.lh-catland__meta { display: flex; justify-content: center; gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); font-size: .88rem; color: rgba(255,255,255,.7); }
.lh-catland__cta { margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
.lh-catland__filters { display: flex; gap: .35rem; gap: round(nearest, .35rem, 4px); flex-wrap: wrap; justify-content: center; margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; }
.lh-catland__filterslabel { font-size: .82rem; color: var(--lwh-grey); font-weight: 600; }
.lh-catland__filterpill { padding: .3rem .6rem; padding: round(nearest, .3rem, 4px) round(nearest, .6rem, 4px); border-radius: var(--lwh-radius-pill); font-size: .78rem; font-weight: 700; border: 1.5px solid var(--lwh-border); }
.lh-catland__filterpill:hover { border-color: var(--lwh-coral); }
.lh-catland__sectionh { font-size: 1.3rem; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-catland__subgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; gap: round(nearest, 1rem, 4px); margin-bottom: 2rem; margin-bottom: round(nearest, 2rem, 4px); }
.lh-catland__subcard { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.15rem; padding: round(nearest, 1.15rem, 4px); text-decoration: none; color: var(--lwh-ink); transition: border-color .2s; }
.lh-catland__subcard:hover { border-color: var(--lwh-coral); }
.lh-catland__subcard-meta { font-size: .78rem; color: var(--lwh-grey); margin-top: .25rem; margin-top: round(nearest, .25rem, 4px); }
.lh-catland__results { margin-top: 1.5rem; margin-top: round(nearest, 1.5rem, 4px); }

/* Showcase (topic packs/collections) */
.lh-showcase { position: relative; overflow: hidden; }
.lh-showcase__viewport { overflow-x: auto; scroll-snap-type: x mandatory; display: flex; gap: 1rem; gap: round(nearest, 1rem, 4px); -webkit-overflow-scrolling: touch; }
.lh-showcase__card { flex: 0 0 280px; scroll-snap-align: start; background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.25rem; padding: round(nearest, 1.25rem, 4px); }
.lh-showcase__icon { font-size: 2rem; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-showcase__title { font-weight: 700; margin-bottom: .25rem; margin-bottom: round(nearest, .25rem, 4px); }
.lh-showcase__count { font-size: .78rem; color: var(--lwh-grey); }
.lh-showcase__badge { position: absolute; top: 8px; right: 8px; }
.lh-showcase__cta { color: var(--lwh-coral); font-weight: 700; font-size: .85rem; margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); display: block; }
.lh-showcase__track { display: flex; justify-content: center; gap: .35rem; gap: round(nearest, .35rem, 4px); margin-top: .75rem; margin-top: round(nearest, .75rem, 4px); }

/* Plans modern */
.lh-plans-modern { max-width: var(--lwh-container); margin: 0 auto; padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-plans-modern__head { text-align: center; margin-bottom: 2rem; margin-bottom: round(nearest, 2rem, 4px); }
.lh-plans-modern__h { font-size: clamp(1.5rem, 3.5vw, 2.2rem); margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-plans-modern__lead { color: var(--lwh-grey); max-width: 600px; margin: 0 auto; }
.lh-plans-modern__billing-toggle { display: flex; align-items: center; justify-content: center; gap: .5rem; gap: round(nearest, .5rem, 4px); margin: 1.5rem 0; margin: round(nearest, 1.5rem, 4px) 0; }
.lh-plans-modern__switch { width: 50px; height: 28px; background: var(--lwh-grey-light); border-radius: 14px; position: relative; cursor: pointer; border: 0; }
.lh-plans-modern__interval-btn { padding: .4rem .8rem; padding: round(nearest, .4rem, 4px) round(nearest, .8rem, 4px); border-radius: var(--lwh-radius-pill); font-weight: 700; font-size: .85rem; border: 0; cursor: pointer; background: transparent; }
.lh-plans-modern__interval-btn.is-active { background: var(--lwh-coral); color: #fff; }
.lh-plans-modern__interval-saving { font-size: .75rem; color: var(--lwh-success); font-weight: 700; }
.lh-plans-modern__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); }
.lh-plans-modern__manage { text-align: center; margin-top: 1.5rem; margin-top: round(nearest, 1.5rem, 4px); font-size: .88rem; color: var(--lwh-grey); }
.lh-plans-modern__notconfigured { text-align: center; padding: 2rem; padding: round(nearest, 2rem, 4px); color: var(--lwh-grey); }

/* Plan card extras */
.lh-plan-card__head { margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-plan-card__name { font-family: 'Fredoka', sans-serif; font-size: 1.1rem; font-weight: 700; }
.lh-plan-card__tier { font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--lwh-grey); }
.lh-plan-card__desc { font-size: .85rem; color: var(--lwh-grey); margin: .5rem 0; margin: round(nearest, .5rem, 4px) 0; }
.lh-plan-card__price-amount { font-size: 2.5rem; }
.lh-plan-card__price-currency { font-size: 1rem; vertical-align: super; }
.lh-plan-card__price-period { font-size: .82rem; color: var(--lwh-grey); }
.lh-plan-card__annual { font-size: .78rem; color: var(--lwh-grey); }
.lh-plan-card__cta { margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
.lh-plan-card__badge--current { background: var(--lwh-success); color: #fff; }

/* FAQ extras */
.lh-faq { max-width: 800px; margin: 0 auto; }
.lh-faq__head { text-align: center; margin-bottom: 2rem; margin-bottom: round(nearest, 2rem, 4px); }
.lh-faq__h { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-faq__lead { color: var(--lwh-grey); }
.lh-faq__list, .lh-faq-list { display: flex; flex-direction: column; gap: .5rem; gap: round(nearest, .5rem, 4px); }
.lh-faq__inner { max-width: 800px; margin: 0 auto; }
.lh-faq__item { border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); overflow: hidden; }
.lh-faq__q { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; padding: round(nearest, 1rem, 4px) round(nearest, 1.25rem, 4px); font-weight: 700; cursor: pointer; width: 100%; background: none; border: 0; text-align: left; }
.lh-faq__q-text { flex: 1; }
.lh-faq__q-icon { font-size: .9rem; color: var(--lwh-coral); transition: transform .2s; }
.lh-faq__a { padding: 0 1.25rem 1rem; padding: 0 round(nearest, 1.25rem, 4px) round(nearest, 1rem, 4px); color: var(--lwh-grey); font-size: .92rem; line-height: 1.6; }
.lh-faq-item__q { display: flex; justify-content: space-between; padding: 1rem; padding: round(nearest, 1rem, 4px); font-weight: 700; cursor: pointer; }
.lh-faq-item__a { padding: 0 1rem 1rem; padding: 0 round(nearest, 1rem, 4px) round(nearest, 1rem, 4px); color: var(--lwh-grey); }
.lh-faq-item__icon { color: var(--lwh-coral); }

/* Homepage extras */
.lh-home-hero__copy { position: relative; z-index: 2; max-width: 600px; }
.lh-home-hero__cta-primary { margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-homepage { display: block; }
.lh-home-section__head { text-align: center; margin-bottom: 2rem; margin-bottom: round(nearest, 2rem, 4px); }
.lh-home-types { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-home-audience { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-home-boards { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-home-why { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-home-cta { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); text-align: center; }
.lh-home-cta__inner { max-width: 600px; margin: 0 auto; }
.lh-home-cta__head h2 { margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-home-cta__lead { color: var(--lwh-grey); margin-bottom: 1.5rem; margin-bottom: round(nearest, 1.5rem, 4px); }
.lh-home-cta__actions { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); justify-content: center; }
.lh-home-trust__item { white-space: nowrap; }

/* Footer extras */
.lh-footer__inner, .lh-footer__inner--6col { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); max-width: 1200px; margin: 0 auto; padding: 2.5rem 0; padding: round(nearest, 2.5rem, 4px) 0; }
.lh-footer__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--lwh-grey); margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-footer__brandcol { grid-column: span 2; }
.lh-footer__brandcol p { font-size: .82rem; color: rgba(255,255,255,.45); line-height: 1.5; }
.lh-footer__contact { margin-top: .75rem; margin-top: round(nearest, .75rem, 4px); }
.lh-footer__contactblock { margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-footer__contactline { font-size: .82rem; color: rgba(255,255,255,.55); }
.lh-footer__newsletter { padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); background: rgba(255,255,255,.05); border-radius: var(--lwh-radius); margin: 1.5rem 0; margin: round(nearest, 1.5rem, 4px) 0; }
.lh-footer__newsletter-inner { max-width: 500px; margin: 0 auto; text-align: center; }
.lh-footer__newsletter-copy { color: rgba(255,255,255,.7); font-size: .88rem; margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-footer__newsletter-form { display: flex; gap: .35rem; gap: round(nearest, .35rem, 4px); }
.lh-footer__newsletter-form input { flex: 1; padding: .5rem .75rem; padding: round(nearest, .5rem, 4px) round(nearest, .75rem, 4px); border-radius: var(--lwh-radius-sm); border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: #fff; }
.lh-footer__newsletter-disclaimer { font-size: .72rem; color: rgba(255,255,255,.3); margin-top: .35rem; margin-top: round(nearest, .35rem, 4px); }
.lh-footer__logins { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); margin-top: .75rem; margin-top: round(nearest, .75rem, 4px); }
.lh-footer__login-pill { padding: .25rem .5rem; padding: round(nearest, .25rem, 4px) round(nearest, .5rem, 4px); border-radius: var(--lwh-radius-pill); font-size: .72rem; font-weight: 700; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.5); }
.lh-footer__tag { font-size: .72rem; color: rgba(255,255,255,.3); margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); }
.lh-footer__band { background: rgba(255,255,255,.03); padding: .75rem 1.5rem; padding: round(nearest, .75rem, 4px) round(nearest, 1.5rem, 4px); text-align: center; }
.lh-footer__bandinner { max-width: 1200px; margin: 0 auto; }
.lh-footer__bandtext { font-size: .82rem; color: rgba(255,255,255,.3); }
@media (max-width: 960px) { .lh-footer__inner, .lh-footer__inner--6col { grid-template-columns: repeat(3, 1fr); } .lh-footer__brandcol { grid-column: span 3; } }
@media (max-width: 640px) { .lh-footer__inner, .lh-footer__inner--6col { grid-template-columns: repeat(2, 1fr); } .lh-footer__brandcol { grid-column: span 2; } }

/* Misc remaining */
.lh-progress-strip { display: flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); padding: .5rem 0; padding: round(nearest, .5rem, 4px) 0; }
.lh-progress-strip__icon { font-size: 1rem; }
.lh-progress-strip__text { font-size: .85rem; font-weight: 600; }
.lh-progress-strip__sub { font-size: .78rem; color: var(--lwh-grey); }
.lh-bubble { display: inline-block; padding: .15rem .35rem; padding: round(nearest, .15rem, 4px) round(nearest, .35rem, 4px); border-radius: var(--lwh-radius-xs); font-size: .72rem; font-weight: 700; background: var(--lwh-coral-light); color: var(--lwh-coral); }
.lh-gicon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lwh-grey-light); font-size: 1.2rem; }
.lh-stars { color: var(--lwh-yellow); }
.lh-quote { font-style: italic; color: var(--lwh-ink-soft); padding: 1rem; padding: round(nearest, 1rem, 4px); border-left: 3px solid var(--lwh-coral); margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; }
.lh-status { display: inline-block; padding: .15rem .4rem; padding: round(nearest, .15rem, 4px) round(nearest, .4rem, 4px); border-radius: var(--lwh-radius-xs); font-size: .72rem; font-weight: 800; }
.lh-status--error, .lh-status--success { display: block; width: 100%; box-sizing: border-box; padding: .65rem .85rem; padding: round(nearest, .65rem, 4px) round(nearest, .85rem, 4px); border-radius: 10px; font-size: .9rem; font-weight: 700; border: 1px solid transparent; margin: .5rem 0; margin: round(nearest, .5rem, 4px) 0; }
.lh-status--error { color: #B42318; background: #FEF2F2; border-color: #FECDCA; }
.lh-status--success { color: #146C43; background: #ECFDF3; border-color: #A9E5C4; }
.lh-restrict { text-align: center; padding: 2rem; padding: round(nearest, 2rem, 4px); }
.lh-hero { position: relative; overflow: hidden; padding: clamp(3rem, 8vh, 5rem) 1.5rem; padding: round(nearest, clamp(3rem, 8vh, 5rem), 4px) round(nearest, 1.5rem, 4px); }
.lh-hero__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.lh-hero__headline { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-hero__sub { color: var(--lwh-grey); max-width: 600px; margin: 0 auto 1.5rem; margin: 0 auto round(nearest, 1.5rem, 4px); }
.lh-hero__cta { display: flex; gap: .75rem; gap: round(nearest, .75rem, 4px); justify-content: center; }
.lh-hero__emblem { font-size: 3rem; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-hero__emblem-chip { font-size: .75rem; }
.lh-hero__trust { margin-top: 1.5rem; margin-top: round(nearest, 1.5rem, 4px); font-size: .82rem; color: var(--lwh-grey); }
.lh-trust-strip { background: var(--lwh-ink); color: #fff; padding: .85rem 1.5rem; padding: round(nearest, .85rem, 4px) round(nearest, 1.5rem, 4px); }
.lh-trust-strip__inner { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 2rem; gap: round(nearest, .5rem, 4px) round(nearest, 2rem, 4px); max-width: 1200px; margin: 0 auto; }
.lh-trust-strip__item { display: flex; align-items: center; gap: .35rem; gap: round(nearest, .35rem, 4px); font-size: .85rem; font-weight: 600; }
.lh-trust-strip__icon { font-size: 1rem; }
.lh-trust-strip__title { font-weight: 700; }
.lh-header-identity { display: flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); }
.lh-header-identity__badge { font-size: .68rem; font-weight: 800; text-transform: uppercase; padding: .15rem .35rem; padding: round(nearest, .15rem, 4px) round(nearest, .35rem, 4px); border-radius: var(--lwh-radius-xs); background: var(--lwh-coral-light); color: var(--lwh-coral); }
.lh-header-identity__name { font-weight: 700; font-size: .88rem; }
.lh-header-identity__text { font-size: .82rem; }
.lh-section { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-page-hero { background: linear-gradient(135deg, var(--lwh-purple-dark), var(--lwh-purple)); color: #fff; padding: clamp(2.5rem, 6vh, 4.5rem) 1.5rem; padding: round(nearest, clamp(2.5rem, 6vh, 4.5rem), 4px) round(nearest, 1.5rem, 4px); text-align: center; position: relative; overflow: hidden; }
.lh-page-hero__inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 2; }
.lh-page-hero__h { color: #fff; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-page-hero__lead { color: rgba(255,255,255,.8); }
.lh-page-hero__cta { margin-top: 1.5rem; margin-top: round(nearest, 1.5rem, 4px); }
/* Decorative background — soft blobs + faint grid, matching the homepage hero. */
.lh-page-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lh-page-hero__blob { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .25; }
.lh-page-hero__blob--1 { width: 320px; height: 320px; background: var(--lwh-coral); top: -120px; right: -80px; }
.lh-page-hero__blob--2 { width: 220px; height: 220px; background: var(--lwh-sky); bottom: -90px; left: -60px; }
.lh-page-hero__grid {
  position: absolute; inset: 0; opacity: .10;
  background-image:
    linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 44px 44px;
}
@media (prefers-reduced-motion: reduce) { .lh-page-hero__blob { animation: none; } }
.lh-contact { max-width: 600px; margin: 0 auto; padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-login-redirect-notice { background: var(--lwh-yellow-light); border: 1.5px solid var(--lwh-yellow); border-radius: var(--lwh-radius); padding: 1rem; padding: round(nearest, 1rem, 4px); display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); align-items: center; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-login-redirect-notice__icon { font-size: 1.5rem; }
.lh-login-redirect-notice__body { font-size: .88rem; }
.lh-login-unified { max-width: 440px; margin: 0 auto; }


/* ==========================================================================
   31 — FINAL COVERAGE (BEM modifiers + remaining components)
   ========================================================================== */

/* Auth background shapes (positioned by inline styles, just need base) */
.lh-authbg__aurora { border-radius: 50%; filter: blur(60px); }
.lh-authbg__wave { border-radius: 40%; }
.lh-authbg__grid { opacity: .05; background-size: 40px 40px; background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); }
.lh-authbg__beam { background: linear-gradient(180deg, rgba(255,255,255,.1), transparent); width: 2px; }
.lh-authbg__circle { border-radius: 50%; border: 1px solid rgba(255,255,255,.1); }
.lh-authbg__dot { border-radius: 50%; background: rgba(255,255,255,.15); }
.lh-authbg__star { color: rgba(255,255,255,.3); }
.lh-authbg__particle { border-radius: 50%; background: rgba(255,255,255,.1); }
.lh-authbg__sun { border-radius: 50%; background: radial-gradient(circle, rgba(255,215,0,.2), transparent 70%); }

/* Landing page modifiers */
.lh-landing--parent .lh-landing__hero { background: linear-gradient(135deg, var(--lwh-coral-dark, #C2185B), var(--lwh-coral)); }
.lh-landing--teacher .lh-landing__hero { background: linear-gradient(135deg, var(--lwh-purple-dark), var(--lwh-purple)); }
.lh-landing--student .lh-landing__hero { background: linear-gradient(135deg, #0D47A1, #2BB3FF 60%, #9B4DFF); }
/* External authoritative links (exam boards etc.) — pill buttons. */
.lh-landing__links { display: flex; flex-wrap: wrap; gap: .75rem; gap: round(nearest, .75rem, 4px); justify-content: center; margin-top: 1.5rem; margin-top: round(nearest, 1.5rem, 4px); }
.lh-landing__extlink {
  display: inline-flex; align-items: center; gap: .4rem; gap: round(nearest, .4rem, 4px);
  background: #fff; color: var(--lwh-purple-dark); font-weight: 700;
  padding: .7rem 1.25rem;
  padding: round(nearest, .7rem, 4px) round(nearest, 1.25rem, 4px); border-radius: 999px; text-decoration: none;
  border: 1.5px solid var(--lwh-border); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lh-landing__extlink:hover { transform: translateY(-2px); box-shadow: var(--lwh-shadow-sm); border-color: var(--lwh-coral); color: var(--lwh-coral); }
.lh-landing__extlink span { font-size: .85em; opacity: .7; }
.lh-landing__links-note { text-align: center; margin-top: 1.25rem; margin-top: round(nearest, 1.25rem, 4px); color: var(--lwh-grey); }
.lh-landing__links-note a { color: var(--lwh-coral); font-weight: 700; text-decoration: none; }
.lh-landing__links-note a:hover { text-decoration: underline; }
.lh-landing__section--dashboard { background: var(--lwh-grey-light); }
.lh-landing__section--why { background: #fff; }
.lh-landing__section--plans { background: var(--lwh-grey-light); }
.lh-landing__section--included { background: #fff; }
.lh-landing__mock-bar { height: 8px; background: var(--lwh-grey-light); border-radius: 4px; margin: .35rem 0; margin: round(nearest, .35rem, 4px) 0; }
.lh-landing__mock-title { font-weight: 700; font-size: .88rem; margin-bottom: .25rem; margin-bottom: round(nearest, .25rem, 4px); }
.lh-landing__mock-sub { font-size: .78rem; color: var(--lwh-grey); }
.lh-landing__mock-row { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); align-items: center; padding: .35rem 0; padding: round(nearest, .35rem, 4px) 0; font-size: .82rem; }
.lh-landing__mock-row--alert { color: var(--lwh-coral); }
.lh-landing__plan { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-landing__plan--feat { border-color: var(--lwh-coral); }
.lh-landing__plan-tier { font-weight: 800; font-size: .82rem; color: var(--lwh-grey); text-transform: uppercase; }
.lh-landing__plan-who { font-size: .82rem; color: var(--lwh-grey); }
.lh-landing__plan-foot { margin-top: .75rem; margin-top: round(nearest, .75rem, 4px); }
.lh-landing__planpair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; gap: round(nearest, 1rem, 4px); }
.lh-landing__format { display: flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); padding: .35rem 0; padding: round(nearest, .35rem, 4px) 0; font-size: .88rem; }
.lh-landing__formats { margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; }
.lh-landing__trust { display: flex; gap: 1rem; gap: round(nearest, 1rem, 4px); flex-wrap: wrap; margin-top: 1.5rem; margin-top: round(nearest, 1.5rem, 4px); font-size: .82rem; color: var(--lwh-grey); }

/* Viewer modifiers */
.lh-viewer--paper, .lh-viewer--flashcards { }
.lh-viewer__paper { padding: 1rem; padding: round(nearest, 1rem, 4px); }
.lh-viewer__paper-frame { border: 1px solid var(--lwh-border); border-radius: var(--lwh-radius-sm); overflow: hidden; }
.lh-viewer__paper-scroll { max-height: 80vh; overflow-y: auto; }
.lh-viewer__flashcards-wrap { padding: 1rem; padding: round(nearest, 1rem, 4px); text-align: center; }
.lh-viewer__zoom-in, .lh-viewer__zoom-out, .lh-viewer__zoom-reset { background: rgba(255,255,255,.1); border: 0; color: #fff; padding: .3rem .5rem; padding: round(nearest, .3rem, 4px) round(nearest, .5rem, 4px); border-radius: var(--lwh-radius-xs); cursor: pointer; }
.lh-viewer__page-current { font-weight: 800; }
.lh-viewer__page-total { }

/* Browse (generic archive) */
.lh-browse { max-width: var(--lwh-container); margin: 0 auto; padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-browse__row { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; gap: round(nearest, 1rem, 4px); }
.lh-browse__filters { display: flex; flex-direction: column; gap: .5rem; gap: round(nearest, .5rem, 4px); }
.lh-browse__search { margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-browse__select { margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-browse__count { font-weight: 700; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-browse__empty { text-align: center; padding: 2rem; padding: round(nearest, 2rem, 4px); color: var(--lwh-grey); }
.lh-browse__pagination { display: flex; justify-content: center; gap: .35rem; gap: round(nearest, .35rem, 4px); padding: 1.5rem 0; padding: round(nearest, 1.5rem, 4px) 0; }

/* Packages (membership) */
.lh-packages { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-packages__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); }
.lh-packages__card { background: #fff; border: 2px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 2rem; padding: round(nearest, 2rem, 4px); text-align: center; }
.lh-packages__icon { font-size: 2rem; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-packages__badge { display: inline-block; padding: .2rem .5rem; padding: round(nearest, .2rem, 4px) round(nearest, .5rem, 4px); border-radius: var(--lwh-radius-pill); font-size: .72rem; font-weight: 800; background: var(--lwh-coral); color: #fff; }
.lh-packages__price { font-family: 'Fredoka', sans-serif; font-size: 2rem; font-weight: 700; margin: .75rem 0; margin: round(nearest, .75rem, 4px) 0; }
.lh-packages__blurb { font-size: .88rem; color: var(--lwh-grey); margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-packages__points { text-align: left; margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; font-size: .85rem; }
.lh-packages__points li { padding: .2rem 0; padding: round(nearest, .2rem, 4px) 0; }
.lh-packages__points li::before { content: "✓ "; color: var(--lwh-success); font-weight: 700; }
.lh-packages__foot { margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }

/* Pack anatomy */
.lh-packanatomy { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-packanatomy__inner { max-width: 1200px; margin: 0 auto; }
.lh-packanatomy__intro { text-align: center; margin-bottom: 2rem; margin-bottom: round(nearest, 2rem, 4px); }
.lh-packanatomy__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; gap: round(nearest, 1rem, 4px); }
.lh-packanatomy__card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.25rem; padding: round(nearest, 1.25rem, 4px); text-align: center; }
.lh-packanatomy__cardlink { text-decoration: none; color: var(--lwh-ink); }
.lh-packanatomy__icon { font-size: 2rem; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-packanatomy__note { font-size: .78rem; color: var(--lwh-grey); margin-top: .25rem; margin-top: round(nearest, .25rem, 4px); }

/* Featured resources */
.lh-featured { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-featured__inner { max-width: 1200px; margin: 0 auto; }
.lh-featured__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; margin-bottom: round(nearest, 1.5rem, 4px); }
.lh-featured__h { font-size: 1.3rem; }
.lh-featured__lead { color: var(--lwh-grey); }
.lh-featured__more { color: var(--lwh-coral); font-weight: 700; font-size: .88rem; }
.lh-featured__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; gap: round(nearest, 1.25rem, 4px); }

/* Lib card (resource in library) */
.lh-lib-card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); overflow: hidden; transition: border-color .2s; }
.lh-lib-card:hover { border-color: var(--lwh-coral); }
.lh-lib-card__top { padding: 1rem; padding: round(nearest, 1rem, 4px); }
.lh-lib-card__icon { font-size: 1.8rem; margin-bottom: .35rem; margin-bottom: round(nearest, .35rem, 4px); }
.lh-lib-card__title { font-weight: 700; margin-bottom: .25rem; margin-bottom: round(nearest, .25rem, 4px); }
.lh-lib-card__meta { font-size: .78rem; color: var(--lwh-grey); }
.lh-lib-card__type { font-size: .72rem; font-weight: 700; }
.lh-lib-card__tag { display: inline-block; font-size: .68rem; padding: .1rem .3rem; padding: round(nearest, .1rem, 4px) round(nearest, .3rem, 4px); border-radius: var(--lwh-radius-xs); background: var(--lwh-grey-light); }
.lh-lib-card__actions { display: flex; gap: .35rem; gap: round(nearest, .35rem, 4px); padding: .5rem 1rem; padding: round(nearest, .5rem, 4px) round(nearest, 1rem, 4px); border-top: 1px solid var(--lwh-border); }

/* Subject card */
.lh-subject-card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.25rem; padding: round(nearest, 1.25rem, 4px); text-decoration: none; color: var(--lwh-ink); transition: border-color .2s, transform .2s; }
.lh-subject-card:hover { border-color: var(--lwh-coral); transform: translateY(-3px); }
.lh-subject-card__icon { font-size: 1.8rem; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-subject-card__name { font-weight: 800; font-size: .95rem; }
.lh-subject-card__desc { font-size: .82rem; color: var(--lwh-grey); margin-top: .25rem; margin-top: round(nearest, .25rem, 4px); }
.lh-subject-card__count { font-size: .78rem; color: var(--lwh-coral); margin-top: .25rem; margin-top: round(nearest, .25rem, 4px); }
.lh-subject-card__arrow { color: var(--lwh-coral); }

/* Pagination extras */
.lh-pagination__btn { display: flex; align-items: center; gap: .25rem; gap: round(nearest, .25rem, 4px); }
.lh-pagination__num { }
.lh-pagination__gap { color: var(--lwh-grey); }
.lh-pagination__summary { font-size: .82rem; color: var(--lwh-grey); text-align: center; margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); }
.lh-pagination__controls { display: flex; justify-content: center; gap: .35rem; gap: round(nearest, .35rem, 4px); }

/* Role switch */
.lh-role-switch { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); justify-content: center; margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; }
.lh-role-switch__pill { padding: .4rem .8rem; padding: round(nearest, .4rem, 4px) round(nearest, .8rem, 4px); border-radius: var(--lwh-radius-pill); font-weight: 700; font-size: .85rem; border: 2px solid var(--lwh-border); cursor: pointer; transition: all .15s; }
.lh-role-switch__pill:hover, .lh-role-switch__pill.is-active { border-color: var(--lwh-coral); background: var(--lwh-coral-light); color: var(--lwh-coral); }
.lh-role-switch__icon { font-size: 1rem; }
.lh-role-switch__label { font-size: .85rem; }
.lh-role-switch__desc { font-size: .72rem; color: var(--lwh-grey); }

/* Resources block */
.lh-resources-block { margin: 1.5rem 0; margin: round(nearest, 1.5rem, 4px) 0; }
.lh-resources-block__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-resources-block__title { font-size: 1.2rem; font-weight: 700; }
.lh-resources-block__count { font-size: .82rem; color: var(--lwh-grey); }
.lh-resources-block__intro { color: var(--lwh-grey); margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }

/* Free wall extras */
.lh-freewall { text-align: center; padding: 3rem 1.5rem; padding: round(nearest, 3rem, 4px) round(nearest, 1.5rem, 4px); background: var(--lwh-grey-light); border-radius: var(--lwh-radius); }
.lh-freewall__icon { font-size: 3rem; margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-freewall__title { font-size: 1.3rem; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-freewall__lead { color: var(--lwh-grey); margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-freewall__actions { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); justify-content: center; }
.lh-freewall__foot { margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); font-size: .82rem; color: var(--lwh-grey); }
.lh-freecounter { display: flex; align-items: center; gap: .35rem; gap: round(nearest, .35rem, 4px); font-size: .85rem; }
.lh-freecounter__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lwh-success); }
.lh-freepill__count { font-weight: 800; }
.lh-freepill__cta { color: var(--lwh-coral); font-weight: 700; }
.lh-free-badge, .lh-freebadge-corner { position: absolute; top: 0; left: 0; padding: .2rem .5rem; padding: round(nearest, .2rem, 4px) round(nearest, .5rem, 4px); font-size: .68rem; font-weight: 800; background: var(--lwh-success); color: #fff; border-radius: 0 0 var(--lwh-radius-xs) 0; }
.lh-gate-cta { text-align: center; padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-gate-notice { background: var(--lwh-yellow-light); border-radius: var(--lwh-radius); padding: 1rem; padding: round(nearest, 1rem, 4px); margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; text-align: center; }

/* Collection cards */
.lh-collections { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; gap: round(nearest, 1rem, 4px); }
.lh-collection-card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1rem; padding: round(nearest, 1rem, 4px); text-decoration: none; color: var(--lwh-ink); }
.lh-collection-card__name { font-weight: 700; }

/* Catalogue extras */
.lh-catalogue__filterblock { margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-catalogue__filterblock--segment { }
.lh-catalogue__grid-wrap { min-width: 0; }
.lh-catalogue__head-controls { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); align-items: center; }
.lh-catalogue__hero-inner { max-width: 720px; margin: 0 auto; }
.lh-catalogue__perpage { display: flex; align-items: center; gap: .3rem; gap: round(nearest, .3rem, 4px); }
.lh-catalogue__perpage-select { width: auto; }
.lh-catalogue__search-btn { }
.lh-catalogue__drawer-close { background: none; border: 0; font-size: 1.5rem; cursor: pointer; }
.lh-catalogue__drawer-title { font-family: 'Fredoka', sans-serif; font-size: 1.1rem; font-weight: 700; }
.lh-catalogue__filter-count { font-size: .72rem; font-weight: 800; padding: .1rem .35rem; padding: round(nearest, .1rem, 4px) round(nearest, .35rem, 4px); border-radius: 50%; background: #fff; color: var(--lwh-coral); }
.lh-catalogue__filter-count.is-zero { display: none; }

/* Misc */
.lh-latest { margin: 1.5rem 0; margin: round(nearest, 1.5rem, 4px) 0; }
.lh-latest__head { display: flex; justify-content: space-between; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-latest__all a { color: var(--lwh-coral); font-weight: 700; }
.lh-latest__slider { display: flex; gap: 1rem; gap: round(nearest, 1rem, 4px); overflow-x: auto; }
.lh-stage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; gap: round(nearest, 1rem, 4px); }
.lh-stage-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; gap: round(nearest, 1rem, 4px); }
.lh-stage-card__body { flex: 1; }
.lh-stage-card__desc { font-size: .82rem; color: var(--lwh-grey); line-height: 1.4; }
.lh-stage-card__top { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); align-items: center; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-stages-section, .lh-subjects-section { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-subjects-section__inner { max-width: 1200px; margin: 0 auto; }
.lh-audiences-section { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-audiences-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; gap: round(nearest, 1.25rem, 4px); }
.lh-audience-card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-audience-card__icon { font-size: 2rem; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-audience-card__cta { color: var(--lwh-coral); font-weight: 700; font-size: .88rem; margin-top: auto; }
.lh-hubs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); }
@media (max-width: 768px) { .lh-hubs { grid-template-columns: 1fr; } }
.lh-hub { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-search { display: flex; gap: .35rem; gap: round(nearest, .35rem, 4px); margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-search__q { flex: 1; }
.lh-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; gap: round(nearest, 1rem, 4px); margin: 1.5rem 0; margin: round(nearest, 1.5rem, 4px) 0; }
.lh-popular { margin: 1.5rem 0; margin: round(nearest, 1.5rem, 4px) 0; }
.lh-entry { max-width: var(--lwh-container); margin: 0 auto; padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-btn--ghost-on-dark { color: #fff; border-color: rgba(255,255,255,.4); }
.lh-btn--white { background: #fff; color: var(--lwh-ink); border-color: #fff; }
.lh-grid { display: grid; gap: 1.25rem; gap: round(nearest, 1.25rem, 4px); }
.lh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lh-grid--cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lh-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); }
.lh-step { text-align: center; }
/* Mobile: stack steps into one centred column so a lone third step isn't
   left-aligned on its own row. */
@media (max-width: 640px) {
  .lh-steps { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; justify-items: center; }
  .lh-step { max-width: 320px; }
}
.lh-step__num { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--lwh-coral); color: #fff; font-family: 'Fredoka', sans-serif; font-size: 1.2rem; font-weight: 700; margin: 0 auto .75rem; margin: 0 auto round(nearest, .75rem, 4px); }
.lh-junior-admin { max-width: 600px; margin: 0 auto; padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-junior-admin__intro { margin-bottom: 1.5rem; margin-bottom: round(nearest, 1.5rem, 4px); }
.lh-junior-admin__group { margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-junior-admin__form { margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
.lh-junior-admin__blocked { background: #FEE2E2; border-radius: var(--lwh-radius); padding: 1rem; padding: round(nearest, 1rem, 4px); color: #991B1B; text-align: center; }
.lh-student-shelf { margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; }
.lh-jumpbar { display: flex; gap: .35rem; gap: round(nearest, .35rem, 4px); flex-wrap: wrap; padding: .5rem 0; padding: round(nearest, .5rem, 4px) 0; }
.lh-jumpbar__pill { padding: .3rem .6rem; padding: round(nearest, .3rem, 4px) round(nearest, .6rem, 4px); border-radius: var(--lwh-radius-pill); font-size: .78rem; font-weight: 700; border: 1.5px solid var(--lwh-border); }
.lh-jumpbar__pill:hover { border-color: var(--lwh-coral); }
.lh-jumpbar__sep { color: var(--lwh-grey); font-size: .78rem; }
.lh-seo-panel { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1rem; padding: round(nearest, 1rem, 4px); margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; }
.lh-seo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; gap: round(nearest, 1rem, 4px); }
.lh-seo-field { margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lh-seo-meter { height: 6px; border-radius: 3px; background: var(--lwh-grey-light); overflow: hidden; }
.lh-seo-preview { background: var(--lwh-grey-light); border-radius: var(--lwh-radius-sm); padding: 1rem; padding: round(nearest, 1rem, 4px); margin-top: .75rem; margin-top: round(nearest, .75rem, 4px); }
.lh-seo-preview__title { font-size: 1.1rem; color: #1a0dab; font-weight: 600; }
.lh-seo-preview__url { font-size: .82rem; color: #006621; }
.lh-seo-preview__desc { font-size: .85rem; color: #545454; }
.lh-seo-tabs { display: flex; gap: .25rem; gap: round(nearest, .25rem, 4px); margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-seo-tab { padding: .4rem .8rem; padding: round(nearest, .4rem, 4px) round(nearest, .8rem, 4px); border-radius: var(--lwh-radius-sm); font-size: .82rem; font-weight: 700; border: 1.5px solid var(--lwh-border); cursor: pointer; }
.lh-seo-tab.is-active { background: var(--lwh-coral); color: #fff; border-color: var(--lwh-coral); }
.lh-resource-fields { margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; }
.lh-email-editor, .lh-email-deliverability { max-width: 600px; margin: 0 auto; padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-pop-card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); overflow: hidden; }
.lh-pop-card__media { height: 120px; background: var(--lwh-grey-light); }
.lh-pop-card__body { padding: 1rem; padding: round(nearest, 1rem, 4px); }
.lh-pop-card__title { font-weight: 700; }
.lh-tab-count { font-size: .72rem; font-weight: 700; padding: .1rem .3rem; padding: round(nearest, .1rem, 4px) round(nearest, .3rem, 4px); border-radius: 50%; background: var(--lwh-coral-light); color: var(--lwh-coral); }
.lh-tier-badge { display: inline-block; padding: .2rem .5rem; padding: round(nearest, .2rem, 4px) round(nearest, .5rem, 4px); border-radius: var(--lwh-radius-xs); font-size: .72rem; font-weight: 800; }
.lh-tier-badge--free { background: #D1FAE5; color: #065F46; }
.lh-tier-badge--premium { background: var(--lwh-purple-light); color: var(--lwh-purple); }
.lh-tier-mini { font-size: .65rem; font-weight: 800; padding: .1rem .25rem; padding: round(nearest, .1rem, 4px) round(nearest, .25rem, 4px); border-radius: 3px; }
.lh-tier-pill, .lh-tier-ribbon-inline { display: inline-block; padding: .15rem .4rem; padding: round(nearest, .15rem, 4px) round(nearest, .4rem, 4px); border-radius: var(--lwh-radius-xs); font-size: .68rem; font-weight: 800; }
.lh-auth { max-width: 440px; margin: 0 auto; padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-file-pick, .lh-file-clear { cursor: pointer; }
.lh-file-display { font-size: .85rem; color: var(--lwh-grey); }
.lh-file-id { display: none; }
.lh-thumb-actions { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); }
.lh-thumb-preview { max-width: 200px; margin: .5rem 0; margin: round(nearest, .5rem, 4px) 0; }
.lh-thumb-help { font-size: .78rem; color: var(--lwh-grey); }
.lh-thumb-source { font-size: .82rem; }
.lh-social { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); }
.lh-social__btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; transition: background .15s; }
.lh-social__btn:hover { background: var(--lwh-coral); }
.lh-aud { margin: 1rem 0; margin: round(nearest, 1rem, 4px) 0; }
.lh-aud__dl dt { font-weight: 700; font-size: .88rem; }
.lh-aud__dl dd { margin: 0 0 .75rem; margin: 0 0 round(nearest, .75rem, 4px); color: var(--lwh-grey); font-size: .88rem; }
.lh-dash--student .lh-dash__h1 { color: var(--lwh-coral); }
.lh-stats-band { background: var(--lwh-coral); color: #fff; padding: 1.5rem; padding: round(nearest, 1.5rem, 4px); }
.lh-cta-banner { background: linear-gradient(135deg, var(--lwh-purple-dark), var(--lwh-purple)); color: #fff; text-align: center; padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); }
.lh-cta-banner h2, .lh-cta-banner h3 { color: #fff; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-guidance-tabs { display: flex; gap: .25rem; gap: round(nearest, .25rem, 4px); margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-guidance-tab { padding: .4rem .8rem; padding: round(nearest, .4rem, 4px) round(nearest, .8rem, 4px); font-size: .82rem; font-weight: 700; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius-sm); cursor: pointer; }
.lh-guidance-tab.is-active { background: var(--lwh-coral); color: #fff; border-color: var(--lwh-coral); }


/* ==========================================================================
   32 — VERIFIED MISSING: Classes from actual rendered HTML
   These were found by rendering real pages and cross-referencing.
   ========================================================================== */

/* Top bar track + items */
.lh-topbar__item { white-space: nowrap; font-weight: 600; }

/* Curriculum bar pill colour variants */
.lh-curricbar__pill--eyfs { border-color: #F97316; }
.lh-curricbar__pill--eyfs .lh-curricbar__age { color: #F97316; }
.lh-curricbar__pill--ks1 { border-color: #06B6D4; }
.lh-curricbar__pill--ks1 .lh-curricbar__age { color: #06B6D4; }
.lh-curricbar__pill--ks2 { border-color: #EAB308; }
.lh-curricbar__pill--ks2 .lh-curricbar__age { color: #EAB308; }
.lh-curricbar__pill--ks3 { border-color: #22C55E; }
.lh-curricbar__pill--ks3 .lh-curricbar__age { color: #22C55E; }
.lh-curricbar__pill--gcse { border-color: var(--lwh-purple); }
.lh-curricbar__pill--gcse .lh-curricbar__age { color: var(--lwh-purple); }

/* Drawer nav */
.lh-drawer__nav { margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }

/* Hero card numbered variants (positioned by grid, no unique styles needed) */
.lh-home-hero__card--1, .lh-home-hero__card--2, .lh-home-hero__card--3,
.lh-home-hero__card--4, .lh-home-hero__card--5, .lh-home-hero__card--6,
.lh-home-hero__card--7, .lh-home-hero__card--8 { /* grid auto-placement */ }

/* Eyebrow (legacy alias — old templates use lh-eyebrow, new CSS uses lwh-eyebrow) */
.lh-eyebrow {
  display: inline-block; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--lwh-coral); margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px);
}
.lh-eyebrow--light { color: var(--lwh-yellow); }

/* Stage card colour variants */
.lh-stage-card--mint  { border-top-color: #22C55E; }
.lh-stage-card--sky   { border-top-color: #06B6D4; }
.lh-stage-card--amber { border-top-color: #EAB308; }
.lh-stage-card--pink  { border-top-color: #EC4899; }
.lh-stage-card--violet { border-top-color: var(--lwh-purple); }

/* Audience tile variants */
.lh-audience-tile--parent  { border-left: 4px solid var(--lwh-coral); }
.lh-audience-tile--teacher { border-left: 4px solid var(--lwh-purple); }
.lh-audience-tile--school  { border-left: 4px solid #06B6D4; }
.lh-audience-tile--child   { border-left: 4px solid #22C55E; }

/* Subject card colour variants */
.lh-subject-card--sky    { border-top: 3px solid #06B6D4; }
.lh-subject-card--flame  { border-top: 3px solid var(--lwh-coral); }
.lh-subject-card--mint   { border-top: 3px solid #22C55E; }
.lh-subject-card--amber  { border-top: 3px solid #EAB308; }
.lh-subject-card--teal   { border-top: 3px solid #0D9488; }
.lh-subject-card--violet { border-top: 3px solid var(--lwh-purple); }
.lh-subject-card--pink   { border-top: 3px solid #EC4899; }

/* Hub section variants */
.lh-reshub__section--featured { background: #fff; }
.lh-reshub__section--latest   { background: var(--lwh-grey-light); }

/* Favourite button — login variant (shows login link instead of toggle) */
.lh-fav-btn--login { opacity: .5; }
.lh-fav-btn--login:hover { opacity: 1; }
.lh-fav-icon { font-size: 1rem; line-height: 1; }

/* Free pill sidebar */
.lh-freepill--sidebar { text-align: center; }

/* Filter dropdown internals (the actual summary/label/count/option elements) */
.lh-filterdrop__summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .75rem;
  padding: round(nearest, .55rem, 4px) round(nearest, .75rem, 4px); font-size: .88rem; font-weight: 700;
  cursor: pointer; list-style: none;
}
.lh-filterdrop__summary::-webkit-details-marker { display: none; }
.lh-filterdrop__label { flex: 1; }
.lh-filterdrop__caret { font-size: .7rem; color: var(--lwh-coral); margin-left: .35rem; margin-left: round(nearest, .35rem, 4px); transition: transform .2s; }
.lh-filterdrop[open] .lh-filterdrop__caret { transform: rotate(180deg); }
.lh-filterdrop__option {
  display: flex; align-items: center; gap: .4rem; gap: round(nearest, .4rem, 4px);
  padding: .3rem .75rem;
  padding: round(nearest, .3rem, 4px) round(nearest, .75rem, 4px); font-size: .84rem; cursor: pointer;
  transition: background .12s;
}
.lh-filterdrop__option:hover { background: var(--lwh-coral-light); }

/* Compact grid (narrower cards) */
.lh-grid--compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; gap: round(nearest, .75rem, 4px); }

/* Homepage body class */
.lh-homepage-body { }

/* Audience card variants */
.lh-audience-card--parent  .lh-audience-card__icon { color: var(--lwh-coral); }
.lh-audience-card--teacher .lh-audience-card__icon { color: var(--lwh-purple); }
.lh-audience-card--school  .lh-audience-card__icon { color: #06B6D4; }

/* Board card variants */
.lh-board-card--aqa     .lh-board-card__badge { background: #E0F2FE; color: #0C4A6E; }
.lh-board-card--edexcel  .lh-board-card__badge { background: #FCE4EC; color: #880E4F; }
.lh-board-card--ocr      .lh-board-card__badge { background: #E8F5E9; color: #1B5E20; }
.lh-board-card__cta { color: var(--lwh-coral); font-weight: 700; font-size: .88rem; margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); display: block; }

/* Type card variants */
.lh-type-card--printable .lh-type-card__icon { color: #2563EB; }
.lh-type-card--elearning .lh-type-card__icon { color: #7C3AED; }
.lh-type-card--game      .lh-type-card__icon { color: #059669; }
.lh-type-card--quiz      .lh-type-card__icon { color: #DC2626; }
.lh-type-card--flashcards .lh-type-card__icon { color: #D97706; }
.lh-type-card--paper     .lh-type-card__icon { color: #4338CA; }
.lh-type-card--book      .lh-type-card__icon { color: #0D9488; }
.lh-type-card--video     .lh-type-card__icon { color: #E11D48; }
.lh-type-card--audio     .lh-type-card__icon { color: #7C3AED; }

.lh-free-card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.25rem; padding: round(nearest, 1.25rem, 4px); }

/* ==========================================================================
   33 — CHAT LANDING PAGE (moved from inline to master stylesheet)
   ========================================================================== */
.lhc-landing { --lhc-purple: #7c3aed; }
.lhc-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #0f0a1e 0%, #1a0533 25%, #0c1445 50%, #0a192f 100%); padding: clamp(4rem, 10vh, 8rem) 1.5rem; padding: round(nearest, clamp(4rem, 10vh, 8rem), 4px) round(nearest, 1.5rem, 4px); text-align: center; color: #fff; }
.lhc-hero__particles { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.lhc-hero__content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.lhc-hero__glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(124,58,237,.3) 0%, rgba(37,99,235,.15) 40%, transparent 70%); filter: blur(60px); z-index: 1; animation: lhcPulse 4s ease-in-out infinite; }
@keyframes lhcPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity:.7; } 50% { transform: translate(-50%,-50%) scale(1.15); opacity:1; } }
.lhc-hero__badge { display: inline-block; padding: .4rem 1rem; padding: round(nearest, .4rem, 4px) round(nearest, 1rem, 4px); border-radius: var(--lwh-radius-pill); background: rgba(124,58,237,.3); border: 1px solid rgba(124,58,237,.5); font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #c4b5fd; margin-bottom: 1.25rem; margin-bottom: round(nearest, 1.25rem, 4px); animation: lhcFloat 3s ease-in-out infinite; }
@keyframes lhcFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.lhc-hero__title { font-family: 'Fredoka', sans-serif; font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 700; margin: 0 0 .75rem; margin: 0 0 round(nearest, .75rem, 4px); line-height: 1.1; }
.lhc-hero__accent { background: linear-gradient(90deg, #7c3aed, #06b6d4, #22c55e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lhc-hero__sub { font-size: clamp(1rem, 2vw, 1.2rem); color: #a5b4c8; line-height: 1.6; margin: 0 auto 2.5rem; margin: 0 auto round(nearest, 2.5rem, 4px); max-width: 580px; }
.lhc-countdown { display: flex; justify-content: center; gap: clamp(.5rem, 2vw, 1rem); gap: round(nearest, clamp(.5rem, 2vw, 1rem), 4px); margin-bottom: 1.5rem; margin-bottom: round(nearest, 1.5rem, 4px); flex-wrap: wrap; }
.lhc-countdown__unit { text-align: center; }
.lhc-countdown__num { display: block; font-family: 'Courier New', monospace; font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 900; background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.05) 100%); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: .5rem clamp(.5rem, 2vw, 1rem); padding: round(nearest, .5rem, 4px) round(nearest, clamp(.5rem, 2vw, 1rem), 4px); color: #fff; min-width: clamp(50px, 10vw, 80px); text-shadow: 0 0 20px rgba(124,58,237,.5); }
.lhc-countdown__label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: #7c8ca8; margin-top: .35rem; margin-top: round(nearest, .35rem, 4px); }
.lhc-countdown__sep { font-size: clamp(1.5rem, 4vw, 2.5rem); color: rgba(255,255,255,.2); align-self: flex-start; padding-top: .6rem; padding-top: round(nearest, .6rem, 4px); }
.lhc-hero__date { font-size: .92rem; color: #7c8ca8; font-weight: 600; }
.lhc-features { padding: clamp(3rem, 8vh, 5rem) 1.5rem; padding: round(nearest, clamp(3rem, 8vh, 5rem), 4px) round(nearest, 1.5rem, 4px); max-width: 1100px; margin: 0 auto; }
.lhc-features__h { font-family: 'Fredoka', sans-serif; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; text-align: center; margin: 0 0 2.5rem; margin: 0 0 round(nearest, 2.5rem, 4px); }
.lhc-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); }
.lhc-feature { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: 1.75rem 1.5rem; padding: round(nearest, 1.75rem, 4px) round(nearest, 1.5rem, 4px); text-align: center; transition: border-color .2s, transform .2s, box-shadow .2s; }
.lhc-feature:hover { border-color: var(--lhc-purple, #7c3aed); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(124,58,237,.12); }
.lhc-feature__icon { font-size: 2.5rem; margin-bottom: .75rem; margin-bottom: round(nearest, .75rem, 4px); }
.lhc-feature h3 { font-family: 'Fredoka', sans-serif; font-size: 1.1rem; font-weight: 700; margin: 0 0 .5rem; margin: 0 0 round(nearest, .5rem, 4px); }
.lhc-feature p { font-size: .92rem; color: var(--lwh-grey); line-height: 1.55; margin: 0; }
.lhc-cta { text-align: center; padding: clamp(3rem, 8vh, 5rem) 1.5rem; padding: round(nearest, clamp(3rem, 8vh, 5rem), 4px) round(nearest, 1.5rem, 4px); background: linear-gradient(135deg, #fef6e4, #f0f9ff); }
.lhc-cta h2 { font-family: 'Fredoka', sans-serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; margin: 0 0 .75rem; margin: 0 0 round(nearest, .75rem, 4px); }
.lhc-cta p { color: var(--lwh-grey); margin: 0 0 1.5rem; margin: 0 0 round(nearest, 1.5rem, 4px); }
.lhc-cta__note { margin-top: 1.5rem; margin-top: round(nearest, 1.5rem, 4px); font-size: .82rem; color: var(--lwh-grey); }


/* ==========================================================================
   34 — FINAL RENDER-VERIFIED GAPS (from live template test)
   ========================================================================== */

/* Subject tile colour variants (homepage) */

/* Favourites empty state */
.lh-fav-empty { text-align: center; padding: 2rem 1.5rem; padding: round(nearest, 2rem, 4px) round(nearest, 1.5rem, 4px); color: var(--lwh-grey); }
.lh-fav-empty__icon { font-size: 2.5rem; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); display: block; }

/* Auth body (login/register full-screen backgrounds) */
.lh-auth-body { min-height: 100vh;min-height: 100dvh; margin: 0; background: linear-gradient(135deg, var(--lwh-purple-dark) 0%, var(--lwh-purple) 50%, #8E24AA 100%); }
.lh-auth-body--register { background: linear-gradient(135deg, #1a0533, var(--lwh-purple), #0c1445); }
.lh-auth-body--student { background: linear-gradient(135deg, #ff6b9d, var(--lwh-purple), #3b82f6); }
.lh-auth-body--teacher { background: linear-gradient(135deg, #0D3A3F, #134E54, #1A6B73); }
.lh-auth-body--parent { background: linear-gradient(135deg, #92400E, #B45309, #D97706); }
.lh-authpage--register { }

/* Auth background aurora numbered variants */
.lh-authbg__aurora--1 { width: 500px; height: 500px; top: -150px; right: -100px; background: rgba(233,30,99,.2); border-radius: 50%; filter: blur(80px); }
.lh-authbg__aurora--2 { width: 350px; height: 350px; bottom: -100px; left: -80px; background: rgba(107,47,160,.25); border-radius: 50%; filter: blur(60px); }
.lh-authbg__aurora--3 { width: 250px; height: 250px; top: 30%; left: 40%; background: rgba(6,182,212,.15); border-radius: 50%; filter: blur(50px); }
.lh-authbg__beam--1 { height: 60%; top: 0; left: 25%; }
.lh-authbg__beam--2 { height: 40%; top: 20%; right: 20%; }
.lh-authbg__circle--1 { width: 200px; height: 200px; top: 10%; left: 15%; }
.lh-authbg__circle--2 { width: 150px; height: 150px; bottom: 20%; right: 10%; }
.lh-authbg__circle--3 { width: 100px; height: 100px; top: 60%; left: 60%; }
.lh-authbg__circle--4 { width: 80px; height: 80px; top: 30%; right: 30%; }
.lh-authbg__dot--1 { width: 6px; height: 6px; top: 20%; left: 30%; }
.lh-authbg__dot--2 { width: 4px; height: 4px; top: 50%; right: 25%; }
.lh-authbg__dot--3 { width: 5px; height: 5px; bottom: 30%; left: 50%; }
.lh-authbg__star--1 { top: 15%; right: 20%; font-size: 1.2rem; }
.lh-authbg__star--2 { bottom: 25%; left: 15%; font-size: .9rem; }
.lh-authbg__particle--1 { width: 4px; height: 4px; top: 25%; left: 20%; animation: lhcFloat 3s ease-in-out infinite; }
.lh-authbg__particle--2 { width: 3px; height: 3px; top: 55%; right: 30%; animation: lhcFloat 4s ease-in-out infinite .5s; }
.lh-authbg__particle--3 { width: 5px; height: 5px; bottom: 20%; left: 40%; animation: lhcFloat 3.5s ease-in-out infinite 1s; }
.lh-authbg__wave--1 { width: 120%; height: 200px; bottom: -50px; left: -10%; background: rgba(107,47,160,.08); transform: rotate(-3deg); }
.lh-authbg__wave--2 { width: 120%; height: 150px; bottom: -30px; left: -10%; background: rgba(233,30,99,.06); transform: rotate(2deg); }
.lh-authbg__wave--3 { width: 120%; height: 100px; bottom: -10px; left: -10%; background: rgba(6,182,212,.05); transform: rotate(-1deg); }

/* Auth shape numbered variants (forgot password) */
.lh-auth-shape--1 { width: 300px; height: 300px; top: -100px; right: -80px; background: var(--lwh-coral); opacity: .08; }
.lh-auth-shape--2 { width: 200px; height: 200px; bottom: -60px; left: -40px; background: var(--lwh-purple); opacity: .1; }
.lh-auth-shape--3 { width: 150px; height: 150px; top: 40%; left: 10%; background: var(--lwh-yellow); opacity: .06; }
.lh-auth-shape--4 { width: 100px; height: 100px; bottom: 30%; right: 15%; background: #06B6D4; opacity: .08; }

/* Plans switch tab + tier variants */
.lh-plans-modern__switch-tab { padding: .45rem .85rem; padding: round(nearest, .45rem, 4px) round(nearest, .85rem, 4px); border-radius: var(--lwh-radius-pill); font-size: .85rem; font-weight: 700; border: 0; cursor: pointer; background: transparent; color: var(--lwh-grey); transition: all .15s; }
.lh-plans-modern__switch-tab.is-active { background: var(--lwh-coral); color: #fff; }
.lh-plan-card__tier--free  { color: #065F46; }
.lh-plan-card__tier--pro   { color: #92400E; }
.lh-plan-card__tier--elite { color: var(--lwh-purple); }

/* Sitemap extras */
.lh-sitemap__xml-link { display: inline-block; font-size: .82rem; color: var(--lwh-coral); font-weight: 600; margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); }
.lh-sitemap__resources { margin-top: 2rem; margin-top: round(nearest, 2rem, 4px); }
.lh-sitemap__resource-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; gap: round(nearest, .75rem, 4px); margin-top: .75rem; margin-top: round(nearest, .75rem, 4px); }
.lh-sitemap__more { text-align: center; margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
.lh-sitemap__more a { color: var(--lwh-coral); font-weight: 700; }

.lh-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; gap: round(nearest, 1.25rem, 4px); }
.lh-register-adult { max-width: 520px; margin: 0 auto; }

/* Page hero theme variants */
.lh-page-hero--purple { background: linear-gradient(135deg, var(--lwh-purple-dark), var(--lwh-purple), #8E24AA); }
.lh-page-hero--coral  { background: linear-gradient(135deg, #880E4F, var(--lwh-coral), #FF5252); }
.lh-page-hero--flame  { background: linear-gradient(135deg, #880E4F, var(--lwh-coral), #FF5252); }
.lh-page-hero--teal   { background: linear-gradient(135deg, #004D40, #00897B, #26A69A); }
.lh-page-hero--sky    { background: linear-gradient(135deg, #0D47A1, #1976D2, #42A5F5); }
.lh-page-hero--orange { background: linear-gradient(135deg, #BF360C, #F4511E, #FF7043); }
.lh-page-hero--dark   { background: linear-gradient(135deg, var(--lwh-ink), #2D2D4E, #3D3D6E); }


/* ============================================================================
   SPRINT 38 — HOMEPAGE ENHANCEMENTS (additive; existing rules untouched)
   Mobile sliders for card rows + premium featured variant + mobile centring.
   ============================================================================ */

/* Premium featured row tint (distinguishes from free row) */
.lh-featured--premium { background: var(--lwh-grey-light); }

/* Mobile: turn card rows into swipeable scroll-snap sliders.
   Targets the existing grids used by stage cards, audience strip, and the
   featured rows. Page itself never scrolls sideways (guard below). */
@media (max-width: 679px) {
  .lh-featured__grid,
  .lh-audiences-grid,
  .lh-stage-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 1rem;
    gap: round(nearest, 1rem, 4px);
    padding-bottom: 0.75rem;
    padding-bottom: round(nearest, 0.75rem, 4px);
    scrollbar-width: none;
  }
  /* Every slide is the same width and height so no card looks larger than its
     neighbours (was rendering uneven). */
  .lh-stage-grid > * { scroll-snap-align: center; min-width: 0; height: 100%; }
  .lh-featured__grid::-webkit-scrollbar,
  .lh-audiences-grid::-webkit-scrollbar,
  .lh-stage-grid::-webkit-scrollbar { display: none; }
  .lh-featured__grid > *,
  .lh-audiences-grid > *,
  .lh-stage-grid > * { scroll-snap-align: center; }

  /* Mobile centring — no lonely left-aligned single boxes */
  .lh-hero__copy { text-align: center; }
  .lh-hero__cta { justify-content: center; }
  .lh-hero__trust { text-align: center; }
  .lh-featured__head,
  .lh-section__head { text-align: center; margin-inline: auto; }
}

/* Page-level guard: nothing should ever cause horizontal PAGE scroll */
html, body { overflow-x: clip; max-width: 100%; } /* clip (not hidden) so position:sticky header keeps working */

/* ═══════════════════════════════════════════════════════════════════
   SPRINT 39 — PLAYFUL DESKTOP HOMEPAGE ENHANCEMENT
   Scope: large screens only (min-width: 900px). Mobile/tablet below
   900px is intentionally untouched and renders exactly as before.
   These rules win by source order (appended last), no !important needed —
   except the prefers-reduced-motion override at the very end, where an
   accessibility reset legitimately must win unconditionally.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  /* ---- Section rhythm: alternating coloured bands so no two adjacent
     sections share the same flat background. This alone kills most of
     the "bland" feeling on wide screens. ---- */
  .lh-home-stages   { background: var(--lwh-mint-bg); }
  .lh-home-subjects { background: #fff; }
  .lh-home-types    { background: var(--lwh-cream); }
  .lh-home-audience { background: var(--lwh-sky-bg); }
  .lh-home-how      { background: #fff; }
  .lh-home-faq      { background: var(--lwh-purple-light); }

  /* Generous, confident vertical space on big screens. */
  .lh-home-stages, .lh-home-subjects, .lh-home-types,
  .lh-home-audience, .lh-home-how, .lh-home-faq,
  .lh-home-section { padding-top: 5.5rem; padding-top: round(nearest, 5.5rem, 4px); padding-bottom: 5.5rem; padding-bottom: round(nearest, 5.5rem, 4px); }

  /* (Sprint 39 curved-separator overlap removed — Sprint 43 panel layout with
     even margins supersedes it; keeping both caused odd gaps.) */

  /* ---- Bigger, bolder section headings with a gradient accent ---- */
  .lwh-section-head { margin-bottom: 3.5rem; margin-bottom: round(nearest, 3.5rem, 4px); }
  .lwh-section-head h2 {
    font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.08;
    letter-spacing: -0.02em; max-width: 16ch; margin-inline: auto;
  }
  .lwh-section-head .lh-eyebrow {
    font-size: .9rem; padding: .35rem 1rem; padding: round(nearest, .35rem, 4px) round(nearest, 1rem, 4px); border-radius: 999px;
    background: var(--lwh-coral-light); color: var(--lwh-coral-dark);
  }

  /* ---- Grids: use the width. Fixed sensible column counts instead of
     auto-fill packing tiny cards across a huge screen. ---- */
  .lh-stage-grid   { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); max-width: 1200px; margin-inline: auto; }
    .lh-type-grid    { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); max-width: 1100px; margin-inline: auto; }

  /* ---- Stage cards: vivid top accent, lift + tilt on hover ---- */
  .lh-stage-card {
    padding: 1.75rem 1.5rem;
    padding: round(nearest, 1.75rem, 4px) round(nearest, 1.5rem, 4px); border-top-width: 6px; border-radius: 22px;
    box-shadow: 0 6px 20px rgba(26,26,46,.07);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  }
  .lh-stage-card:hover { transform: translateY(-10px) rotate(-1.2deg) scale(1.02); box-shadow: 0 22px 44px rgba(26,26,46,.16); }
  .lh-stage-card__label { font-size: 1.6rem; }
  .lh-stage-card__arrow {
    align-self: flex-end; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; background: var(--lwh-coral-light);
    color: var(--lwh-coral); font-weight: 800; transition: transform .25s, background .25s;
  }
  .lh-stage-card:hover .lh-stage-card__arrow { transform: translateX(4px); background: var(--lwh-coral); color: #fff; }

  /* ---- Resource-type cards: gradient wash on hover ---- */
  .lh-type-card {
    padding: 2rem 1.5rem;
    padding: round(nearest, 2rem, 4px) round(nearest, 1.5rem, 4px); border-radius: 24px; border-width: 2px; position: relative; overflow: hidden;
    transition: transform .25s, box-shadow .25s, border-color .25s;
  }
  .lh-type-card::before {
    content: ""; position: absolute; inset: 0; opacity: 0;
    background: var(--lwh-grad-candy); transition: opacity .3s; z-index: 0;
  }
  .lh-type-card > * { position: relative; z-index: 1; transition: color .3s; }
  .lh-type-card .lh-type-card__icon { font-size: 2.4rem; display: block; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
  .lh-type-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(233,30,99,.2); border-color: transparent; }
  .lh-type-card:hover::before { opacity: 1; }
  .lh-type-card:hover > *, .lh-type-card:hover strong, .lh-type-card:hover p { color: #fff; }

  /* ---- Audience tiles: big, distinct, gradient-edged ---- */
  .lh-audience-tile {
    padding: 2.25rem;
    padding: round(nearest, 2.25rem, 4px); border-radius: 26px; border-width: 2px;
    transition: transform .25s, box-shadow .25s;
  }
  .lh-audience-tile:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(43,179,255,.2); }
  .lh-audience-tile__icon { font-size: 2.6rem; display: inline-block; margin-bottom: .4rem; margin-bottom: round(nearest, .4rem, 4px); }
  .lh-audience-tile h3 { font-size: 1.5rem; }
  .lh-audience-tile--parent  { border-top: 6px solid var(--lwh-bubble); }
  .lh-audience-tile--teacher { border-top: 6px solid var(--lwh-sky); }
  .lh-audience-tile--school  { border-top: 6px solid var(--lwh-lime); }

  /* ---- Plan cards: featured one lifts and gets a gradient ring ---- */
  .lh-plan-card { padding: 2.5rem 2rem; padding: round(nearest, 2.5rem, 4px) round(nearest, 2rem, 4px); border-radius: 26px; transition: transform .25s, box-shadow .25s; }
  .lh-plan-card:hover { transform: translateY(-6px); box-shadow: var(--lwh-shadow-lg); }
  .lh-plan-card--featured {
    transform: scale(1.05); border-color: var(--lwh-coral);
    box-shadow: 0 18px 44px rgba(233,30,99,.22);
  }
  .lh-plan-card--featured:hover { transform: scale(1.05) translateY(-6px); }
  .lh-plan-card__price-amount { font-size: 3rem; background: var(--lwh-grad-sunset); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

  /* ---- How-it-works: numbered discs get gradient + connecting dashes ---- */
  .lh-how-grid { max-width: 1000px; margin-inline: auto; position: relative; }
  .lh-how-step__num {
    width: 64px; height: 64px; font-size: 1.7rem; border-radius: 50%;
    background: var(--lwh-grad-candy); color: #fff; display: grid; place-items: center;
    margin: 0 auto 1rem;
    margin: 0 auto round(nearest, 1rem, 4px); box-shadow: 0 8px 20px rgba(155,77,255,.3);
  }
  .lh-how-step h3 { font-size: 1.25rem; }

  /* ---- Stats row: gradient numbers, pill chips ---- */
  .lh-stats-row { gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
  .lh-stat { background: #fff; border-radius: 20px; padding: 1.5rem 2rem; padding: round(nearest, 1.5rem, 4px) round(nearest, 2rem, 4px); box-shadow: 0 6px 18px rgba(26,26,46,.06); min-width: 180px; }
  .lh-stat__num { font-size: 2.8rem; background: var(--lwh-grad-sunset); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

  /* ---- FAQ: card-style accordions ---- */
  .lh-faq-item { background: #fff; border-radius: 16px; margin-bottom: .9rem; margin-bottom: round(nearest, .9rem, 4px); box-shadow: 0 4px 14px rgba(26,26,46,.05); border: 1px solid transparent; transition: border-color .2s; }
  .lh-faq-item[open] { border-color: var(--lwh-coral); }
  .lh-faq-item summary { padding: 1.15rem 1.4rem; padding: round(nearest, 1.15rem, 4px) round(nearest, 1.4rem, 4px); font-size: 1.05rem; }

  /* ---- HERO: richer 4-stop gradient + floating blobs + entrance ---- */
  /* Desktop: the hero fills the viewport height (minus the ~108px topbar +
     header above it) and vertically centres its content, so the whole hero is
     visible on load without scrolling. Padding trimmed to fit. Scoped to
     .lh-homepage-body so it overrides the base homepage padding rule. */
  .lh-homepage-body .lh-home-hero {
    background: var(--lwh-grad-hero);
    min-height: calc(100vh - 40px);min-height: calc(100dvh - 40px);
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 2.75rem;
    padding-top: round(nearest, 2.75rem, 4px); padding-bottom: 2.5rem; padding-bottom: round(nearest, 2.5rem, 4px); margin-bottom: 0;
  }
  .lh-home-hero__headline { font-size: clamp(2.8rem, 4.4vw, 4rem); line-height: 1.04; }

  /* Decorative floating blobs in the hero background. */
  .lh-home-hero__blob { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .35; pointer-events: none; }
  .lh-home-hero__blob--1 { width: 260px; height: 260px; background: var(--lwh-tangerine); top: -60px; left: -40px; animation: lwhFloat 9s ease-in-out infinite; }
  .lh-home-hero__blob--2 { width: 200px; height: 200px; background: var(--lwh-sky); bottom: -50px; right: 8%; animation: lwhFloat 11s ease-in-out infinite reverse; }
  .lh-home-hero__blob--3 { width: 150px; height: 150px; background: var(--lwh-yellow); top: 30%; right: -30px; animation: lwhFloat 7s ease-in-out infinite; }

  /* ---- Final CTA banner: sunset gradient + float ---- */
  .lh-home-cta-banner { background: var(--lwh-grad-sunset); padding: 5rem 2rem; padding: round(nearest, 5rem, 4px) round(nearest, 2rem, 4px); border-radius: 42px 42px 0 0; }
  .lh-home-cta-banner h2 { font-size: clamp(2rem, 3.5vw, 3rem); }

  /* ---- Staggered entrance for section heads + grids on load ---- */
  .lwh-section-head, .lh-stage-grid, .lh-subject-cards, .lh-type-grid,
  .lwh-grid--3, .lh-how-grid, .lh-stats-row {
    animation: lwhRise .7s cubic-bezier(.16,1,.3,1) both;
  }
}

@keyframes lwhFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-14px) translateX(6px); }
}
@keyframes lwhRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect users who prefer reduced motion — disable all the new animation. */
@media (prefers-reduced-motion: reduce) {
  .lh-home-hero__card, .lh-home-hero__blob,
  .lwh-section-head, .lh-stage-grid, .lh-subject-cards, .lh-type-grid,
  .lwh-grid--3, .lh-how-grid, .lh-stats-row { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   SPRINT 40 — HORIZONTAL CURRICULUM PATH IN HERO
   ═══════════════════════════════════════════════════════════════════ */

/* Mobile/base: stage stops styled like the old curriculum "jump to" pills —
   a centred grid of solid rounded chips that pop against the purple hero,
   each showing the stage and its age range. Replaces the plain chip links. */
.lh-hero-path__line { display: none; }
.lh-hero-path__stops {
  list-style: none; margin: 1rem auto 0; margin: round(nearest, 1rem, 4px) auto 0; padding: 0; max-width: 340px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; gap: round(nearest, .65rem, 4px); align-items: stretch;
  justify-content: center;
}
/* Last (GCSE) spans the full row width to balance the pair above it. */
.lh-hero-stop:nth-child(5) { grid-column: 1 / -1; width: 100%; }
.lh-hero-stop { display: flex; }
.lh-hero-stop a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem;
  gap: round(nearest, .35rem, 4px); width: 100%; text-align: center;
  background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.32);
  border-radius: 18px; padding: .85rem .75rem; padding: round(nearest, .85rem, 4px) round(nearest, .75rem, 4px); text-decoration: none;
  color: #fff; font-weight: 700; transition: transform .2s, background .2s, border-color .2s;
  backdrop-filter: blur(3px);
}
.lh-hero-stop a:active, .lh-hero-stop a:hover { background: rgba(255,255,255,.26); transform: translateY(-2px); border-color: rgba(255,255,255,.5); }
.lh-hero-stop__dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(255,255,255,.16); }
.lh-hero-stop--mint  .lh-hero-stop__dot { background: #5DCAA5; }
.lh-hero-stop--sky   .lh-hero-stop__dot { background: #85B7EB; }
.lh-hero-stop--amber .lh-hero-stop__dot { background: #EF9F27; }
.lh-hero-stop--pink  .lh-hero-stop__dot { background: #ED93B1; }
.lh-hero-stop--violet .lh-hero-stop__dot { background: #C9A7F5; }
.lh-hero-stop__label { font-family: 'Fredoka', sans-serif; font-size: 1.1rem; line-height: 1; }
.lh-hero-stop__meta { display: block; font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.78); line-height: 1.25; }
.lh-hero-stop__pop { display: none; }

.lh-home-hero__cta { align-items: stretch; }
/* Equal-height hero buttons. */
.lh-home-hero__cta .lh-btn { min-height: 60px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
/* "Free resources" button with the no-login note stacked inside it. */
.lh-btn--stack small { display: block; font-size: .68rem; font-weight: 700; opacity: .8; margin-top: .15rem; margin-top: round(nearest, .15rem, 4px); letter-spacing: .02em; }
/* Teacher / Parent / Student login row beneath the CTAs. */
.lh-home-hero__login { margin-top: 1.1rem; margin-top: round(nearest, 1.1rem, 4px); text-align: center; }
.lh-home-hero__login-label { display: block; font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.8); margin-bottom: .4rem; margin-bottom: round(nearest, .4rem, 4px); }
.lh-home-hero__login-links { display: inline-flex; gap: .5rem; gap: round(nearest, .5rem, 4px); flex-wrap: wrap; justify-content: center; }
.lh-home-hero__login-links a {
  font-weight: 800; font-size: .9rem; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.3);
  padding: .4rem 1rem;
  padding: round(nearest, .4rem, 4px) round(nearest, 1rem, 4px); border-radius: 999px; transition: background .15s, transform .15s;
}
.lh-home-hero__login-links a:hover { background: var(--lwh-yellow); color: var(--lwh-purple-dark); transform: translateY(-2px); }

/* Desktop: the real winding path with stops sitting ON the line. */
@media (min-width: 900px) {
  .lh-home-hero__inner { grid-template-columns: 1fr; text-align: center; }
  .lh-home-hero__copy { text-align: center; max-width: 760px; margin: 0 auto; }
  .lh-home-hero__bullets { justify-content: center; }

  .lh-home-hero__visual { display: block; max-width: 880px; margin: 2.5rem auto 0; margin: round(nearest, 2.5rem, 4px) auto 0; }


  /* The path area is split into two zones so NOTHING overlaps:
       • top 120px  = the winding line + the dots that sit ON it
       • below that = a single even row of label blocks (year/age),
         each directly under its dot's horizontal position, with a clear
         gap so no label ever touches the line or a neighbour. */
  .lh-hero-path { position: relative; height: 250px; overflow: visible; }
  .lh-hero-path__line { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 120px; }

  /* The stops container MUST occupy exactly the same box as the SVG line
     (full width × 120px, pinned to the top) — NOT inset:0 of the 250px path.
     Otherwise the dots' top% is measured against 250px while the curve lives in
     the top 120px, pushing every dot ~2× too far down. This was the bug. */
  .lh-hero-path__stops {
    position: absolute; top: 0; left: 0; right: 0; height: 120px;
    z-index: 3; margin: 0; padding: 0; gap: 0; display: block; max-width: none;
  }
  /* ROOT-CAUSE FIX for the dot misalignment:
     The SVG line uses viewBox "0 0 760 120" with preserveAspectRatio="none",
     so it stretches to fill the container at ANY width. Its internal
     coordinates therefore map LINEARLY to the container as percentages:
       container-left%  = viewBox-x / 760 * 100
       container-top%   = viewBox-y / 120 * 100
     Positioning each dot with BOTH left% and top% (not pixel margins) locks it
     onto the curve regardless of how wide the hero actually is — which is what
     every previous pixel/column attempt got wrong (they assumed a fixed width).
     translate(-50%,-50%) centres the dot exactly on the curve point. */
  .lh-hero-stop {
    position: absolute; width: auto; text-align: center;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: lwhStopFade .5s ease both;
    animation-delay: calc(var(--lh-stop-i) * .12s);
    z-index: 1;
  }
  /* A hovered / focused / open stop jumps above its siblings so neighbouring
     dots (e.g. KS1) can never paint over its open popover. */
  .lh-hero-stop:hover,
  .lh-hero-stop:focus-within,
  .lh-hero-stop:has(.lh-hero-stop__link.is-open) { z-index: 30; }
  /* Curve points (x,y in viewBox) → (left%, top%):
     EYFS x20,y95 → 2.6%, 79%  | KS1 x200,y43 → 26%, 36%
     KS2 x380,y70 → 50%, 58%   | KS3 x560,y66 → 74%, 55%
     GCSE x740,y40 → 97%, 33% */
  .lh-hero-stop:nth-child(1) { left: 2.6%;  top: 79.2%; }
  .lh-hero-stop:nth-child(2) { left: 26.3%; top: 35.9%; }
  .lh-hero-stop:nth-child(3) { left: 50.0%; top: 58.3%; }
  .lh-hero-stop:nth-child(4) { left: 73.7%; top: 55.2%; }
  .lh-hero-stop:nth-child(5) { left: 97.4%; top: 33.3%; }

  .lh-hero-stop a {
    flex-direction: column; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px);
    background: transparent; border: none; padding: 0;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  }
  .lh-hero-stop a:hover { background: transparent; transform: translateY(-4px); }

  .lh-hero-stop__link { display: flex; flex-direction: column; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); }
  .lh-hero-stop__dot {
    width: 30px; height: 30px;
    border: 5px solid rgba(255,255,255,.9);
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    flex: 0 0 auto; margin: 0 auto;
  }
  /* The label sits just below the dot, anchored to the dot's bottom edge
     (dot is 30px, centred on the curve point → bottom is ~15px below centre).
     top:50% + 20px places the label snug under the dot rather than hanging off
     the bottom of the taller stop box. */
  .lh-hero-stop__label {
    position: absolute; top: calc(50% + 20px); left: 50%;
    transform: translateX(-50%) translateY(8px);
    white-space: nowrap;
    opacity: 0;
    animation: lwhLabelIn .5s cubic-bezier(.16,1,.3,1) both;
    animation-delay: calc(var(--lh-stop-i, 0) * .12s + .25s);
  }
  .lh-hero-stop__meta { display: none; }

  .lh-hero-stop__label {
    font-family: 'Fredoka', sans-serif; font-size: 1.2rem; font-weight: 700;
    background: rgba(255,255,255,.18); padding: .25rem .9rem; padding: round(nearest, .25rem, 4px) round(nearest, .9rem, 4px); border-radius: 999px;
    backdrop-filter: blur(4px); display: inline-block;
  }

  /* Hover popover: appears ABOVE the dot, doesn't push layout (absolute),
     fades/lifts in. High z-index so it sits over everything cleanly. */
  .lh-hero-stop__pop {
    display: block;
    position: absolute; left: 50%; bottom: calc(100% - 70px);
    transform: translate(-50%, 8px); width: 230px;
    background: #fff; color: var(--lwh-ink); text-align: left;
    border-radius: 16px; padding: 1rem 1.1rem; padding: round(nearest, 1rem, 4px) round(nearest, 1.1rem, 4px); box-shadow: 0 18px 40px rgba(26,26,46,.28);
    opacity: 0; visibility: hidden; pointer-events: none; z-index: 20;
    transition: opacity .2s ease, transform .2s ease;
  }
  .lh-hero-stop__pop::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 9px solid transparent; border-top-color: #fff;
  }
  .lh-hero-stop:hover .lh-hero-stop__pop,
  .lh-hero-stop__link:focus-visible .lh-hero-stop__pop,
  .lh-hero-stop__link.is-open .lh-hero-stop__pop {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
  }
  .lh-hero-stop__pop-title { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: .35rem; margin-bottom: round(nearest, .35rem, 4px); }
  .lh-hero-stop__pop-text  { display: block; font-size: .82rem; line-height: 1.5; color: var(--lwh-ink-soft); }
  .lh-hero-stop__pop-cta   { display: block; margin-top: .6rem; margin-top: round(nearest, .6rem, 4px); font-weight: 700; font-size: .82rem; color: var(--lwh-coral); }
  /* Edge popovers nudge inward so they never clip off-screen, while still
     sitting directly ABOVE their dot like the middle ones. */
  .lh-hero-stop:nth-child(1) .lh-hero-stop__pop { left: 0; right: auto; transform: translate(0,8px); }
  .lh-hero-stop:nth-child(1):hover .lh-hero-stop__pop,
  .lh-hero-stop:nth-child(1) .lh-hero-stop__link.is-open .lh-hero-stop__pop { transform: translate(0,0); }
  .lh-hero-stop:nth-child(1) .lh-hero-stop__pop::after { left: 30px; right: auto; }
  /* GCSE (last): the dot is at the far right, so the popover must extend
     LEFTWARD and sit above it. Anchor its right edge just past the dot centre. */
  .lh-hero-stop:nth-child(5) .lh-hero-stop__pop { left: auto; right: 50%; margin-right: -24px; transform: translate(0,8px); }
  .lh-hero-stop:nth-child(5):hover .lh-hero-stop__pop,
  .lh-hero-stop:nth-child(5) .lh-hero-stop__link.is-open .lh-hero-stop__pop { transform: translate(0,0); }
  .lh-hero-stop:nth-child(5) .lh-hero-stop__pop::after { left: auto; right: 18px; }

}

@keyframes lwhStopFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lwhLabelIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes lwhStopPop {
  from { opacity: 0; transform: translateY(18px) scale(.6); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lh-hero-stop { animation: none !important; opacity: 1 !important; }
  .lh-hero-stop__label { animation: none !important; opacity: 1 !important; transform: translateX(-50%) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   SPRINT 41 — LIVELY HERO: pulsing dots, self-drawing path, doodles
   All pure-CSS, transform/opacity only (GPU-friendly), desktop-scoped
   for the heavy motion. Honours prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* Decorative doodle layer — hidden on small screens to keep mobile clean. */
.lh-hero-doodles { display: none; }
.lh-doodle { position: absolute; pointer-events: none; opacity: .9; }

@media (min-width: 900px) {
  .lh-hero-doodles { display: block; position: absolute; inset: 0; overflow: hidden; }

  /* SAFE ZONES: doodles live ONLY in the outer left/right margins (the
     central column is reserved for the headline + path + buttons so nothing
     ever sits behind text). Left-band doodles stay within the left ~14%,
     right-band within the right ~14%; a few hug the very top/bottom edges. */
  .lh-doodle--tree1    { width: 64px; bottom: 3%; left: 3%;   animation: lwhSway 6s ease-in-out infinite; transform-origin: bottom center; }
  .lh-doodle--tree2    { width: 54px; bottom: 3%; left: 11%;  animation: lwhSway 7.5s ease-in-out infinite; transform-origin: bottom center; }
  .lh-doodle--calc     { width: 56px; top: 12%;  left: 4%;    animation: lwhFloatRot 9s ease-in-out infinite; }
  .lh-doodle--pen      { width: 72px; bottom: 24%; left: 2%;  animation: lwhFloat 10s ease-in-out infinite; }
  .lh-doodle--star     { width: 34px; top: 30%;  left: 9%;    animation: lwhTwinkle 4s ease-in-out infinite; }

  .lh-doodle--triangle { width: 74px; bottom: 12%; right: 4%; animation: lwhFloatRot 11s ease-in-out infinite reverse; }
  .lh-doodle--pencil   { width: 76px; top: 16%;  right: 3%;   animation: lwhFloat 8s ease-in-out infinite; }
  .lh-doodle--book     { width: 62px; bottom: 26%; right: 9%; animation: lwhFloatRot 12s ease-in-out infinite; }

  /* Pulsing category dots: a ring that expands and fades, plus a gentle
     scale on the dot itself. The ring is a ::after so it doesn't shift layout. */
  .lh-hero-stop__dot { position: relative; animation: lwhDotBob 3s ease-in-out infinite; }
  .lh-hero-stop__dot::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 3px solid currentColor; opacity: 0;
    animation: lwhPulse 2.6s ease-out infinite;
  }
  .lh-hero-stop--mint   .lh-hero-stop__dot::after { color: #5DCAA5; }
  .lh-hero-stop--sky    .lh-hero-stop__dot::after { color: #85B7EB; }
  .lh-hero-stop--amber  .lh-hero-stop__dot::after { color: #EF9F27; }
  .lh-hero-stop--pink   .lh-hero-stop__dot::after { color: #ED93B1; }
  .lh-hero-stop--violet .lh-hero-stop__dot::after { color: #C9A7F5; }
  /* Stagger each dot's pulse so they ripple along the path in sequence. */
  .lh-hero-stop:nth-child(1) .lh-hero-stop__dot::after { animation-delay: 0s; }
  .lh-hero-stop:nth-child(2) .lh-hero-stop__dot::after { animation-delay: .5s; }
  .lh-hero-stop:nth-child(3) .lh-hero-stop__dot::after { animation-delay: 1s; }
  .lh-hero-stop:nth-child(4) .lh-hero-stop__dot::after { animation-delay: 1.5s; }
  .lh-hero-stop:nth-child(5) .lh-hero-stop__dot::after { animation-delay: 2s; }

  /* Route line: draws itself in on load, then the gradient dashes flow
     continuously along the path (the gradient itself also animates its
     colours via the SVG animateTransform). */
  .lh-hero-path__draw {
    animation: lwhDrawIn 1.8s ease-out both, lwhDashFlow 1.4s linear 1.8s infinite;
  }
}

/* ── Marquee clouds: slide fully across the hero, edge to edge, on a loop.
   Two layers at different speeds for depth. These run on ALL screen sizes
   (lightweight: transform-only) but stay in the top strip, clear of text. ── */
.lh-hero-clouds { position: absolute; top: 0; left: 0; right: 0; height: 38%; overflow: hidden; pointer-events: none; z-index: 0; }
.lh-hero-cloud { position: absolute; top: var(--lh-cloud-top, 12%); left: 0; width: var(--lh-cloud-w, 120px); will-change: transform; }
.lh-hero-cloud--a { --lh-cloud-top: 10%; --lh-cloud-w: 130px; animation: lwhCloudDrift 38s linear infinite; }
.lh-hero-cloud--b { --lh-cloud-top: 22%; --lh-cloud-w: 90px;  animation: lwhCloudDrift 52s linear infinite; animation-delay: -18s; }
.lh-hero-cloud--c { --lh-cloud-top: 5%;  --lh-cloud-w: 70px;  animation: lwhCloudDrift 64s linear infinite; animation-delay: -40s; }

/* ── Animated opaque grid backdrop: a faint moving grid for subtle life.
   Pure CSS gradient, GPU-cheap (one background-position animation). ── */
.lh-hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .12;
  background-image:
    linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: lwhGridShift 18s linear infinite;
}

/* ── Sparkles: a few tiny twinkling stars dotted across the backdrop. ── */
.lh-hero-sparkle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0; z-index: 0; pointer-events: none; box-shadow: 0 0 6px 1px rgba(255,255,255,.7); animation: lwhSparkle 3.5s ease-in-out infinite; }

@keyframes lwhPulse {
  0%   { transform: scale(.7); opacity: .9; }
  70%  { opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes lwhDotBob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
@keyframes lwhDrawIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lwhDashFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -26; } }
@keyframes lwhDrift {
  from { transform: translateX(-20px); }
  to   { transform: translateX(40px); }
}
@keyframes lwhSway {
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(3deg); }
}
@keyframes lwhFloatRot {
  0%,100% { transform: translateY(0) rotate(-6deg); }
  50%     { transform: translateY(-14px) rotate(6deg); }
}
@keyframes lwhTwinkle {
  0%,100% { transform: scale(1) rotate(0); opacity: .9; }
  50%     { transform: scale(1.25) rotate(20deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lh-doodle, .lh-hero-stop__dot, .lh-hero-stop__dot::after,
  .lh-hero-path__draw { animation: none !important; opacity: 1; }
}

/* Sprint 41b — keyframes for marquee clouds, moving grid, sparkles */
@keyframes lwhCloudDrift {
  from { transform: translateX(-140px); }
  to   { transform: translateX(calc(100vw + 40px)); }
}
@keyframes lwhGridShift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 48px 48px, 48px 48px; }
}
@keyframes lwhSparkle {
  0%, 100% { opacity: 0; transform: scale(.5); }
  50%      { opacity: .9; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lh-hero-cloud, .lh-hero-grid, .lh-hero-sparkle { animation: none !important; }
  .lh-hero-sparkle { opacity: .5; }
  .lh-hero-cloud--c { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   SPRINT 42 — new homepage sections: Why, Try It Now, Testimonials
   ═══════════════════════════════════════════════════════════════════ */

/* WHY value-prop columns */
.lh-home-why { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); background: #fff; }
.lh-home-why > * { max-width: 1200px; margin-inline: auto; }
.lh-why-grid { margin-top: 0; }
.lh-why-card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: 22px; padding: 2rem 1.75rem; padding: round(nearest, 2rem, 4px) round(nearest, 1.75rem, 4px); text-align: center; transition: transform .2s, box-shadow .2s, border-color .2s; }
.lh-why-card:hover { transform: translateY(-6px); box-shadow: var(--lwh-shadow-lg); }
.lh-why-card__icon { font-size: 2.6rem; display: block; margin-bottom: .6rem; margin-bottom: round(nearest, .6rem, 4px); }
.lh-why-card h3 { font-family: 'Fredoka', sans-serif; font-size: 1.4rem; margin-bottom: .5rem; margin-bottom: round(nearest, .5rem, 4px); }
.lh-why-card p { color: var(--lwh-grey); line-height: 1.55; }
.lh-why-card--student { border-top: 6px solid var(--lwh-sky); }
.lh-why-card--parent  { border-top: 6px solid var(--lwh-bubble); }
.lh-why-card--teacher { border-top: 6px solid var(--lwh-lime); }

/* Stats section (extracted from how-it-works) */
.lh-home-stats-section { padding: 2.5rem 1.5rem; padding: round(nearest, 2.5rem, 4px) round(nearest, 1.5rem, 4px); background: #fff; }
.lh-home-stats-section > * { max-width: 1200px; margin-inline: auto; }

/* TRY IT NOW quizzes */
.lh-home-try { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); background: var(--lwh-purple-light); }
.lh-home-try > * { max-width: 1200px; margin-inline: auto; }
.lh-try-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; gap: round(nearest, 1.25rem, 4px); }
.lh-quiz-card { background: #fff; border-radius: 22px; box-shadow: var(--lwh-shadow-md); overflow: hidden; border-top: 6px solid var(--lh-quiz-colour, var(--lwh-coral)); display: flex; flex-direction: column; }
.lh-quiz-card__head { padding: 1.1rem 1.25rem .5rem; padding: round(nearest, 1.1rem, 4px) round(nearest, 1.25rem, 4px) round(nearest, .5rem, 4px); }
.lh-quiz-card__icon { font-size: 1.8rem; display: block; }
.lh-quiz-card__tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--lh-quiz-colour); }
.lh-quiz-card__title { display: block; font-family: 'Fredoka', sans-serif; font-size: 1.15rem; margin-top: .15rem; margin-top: round(nearest, .15rem, 4px); }
.lh-quiz-card__body { padding: .5rem 1.25rem 1.25rem; padding: round(nearest, .5rem, 4px) round(nearest, 1.25rem, 4px) round(nearest, 1.25rem, 4px); display: flex; flex-direction: column; gap: .5rem; gap: round(nearest, .5rem, 4px); }
.lh-quiz-card__progress { font-size: .72rem; font-weight: 700; color: var(--lwh-grey); text-transform: uppercase; letter-spacing: .04em; }
.lh-quiz-card__q { font-weight: 700; font-size: 1rem; margin: .1rem 0 .4rem; margin: round(nearest, .1rem, 4px) 0 round(nearest, .4rem, 4px); }
.lh-quiz-opt { text-align: left; background: var(--lwh-grey-light); border: 2px solid transparent; border-radius: 12px; padding: .6rem .85rem; padding: round(nearest, .6rem, 4px) round(nearest, .85rem, 4px); font-weight: 700; font-size: .92rem; color: var(--lwh-ink); cursor: pointer; transition: border-color .15s, background .15s; font-family: inherit; }
.lh-quiz-opt:hover:not(:disabled) { border-color: var(--lh-quiz-colour); }
.lh-quiz-opt.is-correct { background: #E6F8EE; border-color: var(--lwh-success); color: #136c3a; }
.lh-quiz-opt.is-wrong { background: #FDECEC; border-color: var(--lwh-error); color: #9b1c1c; }
.lh-quiz-opt:disabled { cursor: default; }
.lh-quiz-next { margin-top: .4rem; margin-top: round(nearest, .4rem, 4px); align-self: flex-end; background: var(--lwh-coral); color: #fff; border: none; border-radius: 999px; padding: .5rem 1.1rem; padding: round(nearest, .5rem, 4px) round(nearest, 1.1rem, 4px); font-weight: 700; cursor: pointer; font-family: inherit; }
.lh-quiz-next--ghost { background: transparent; color: var(--lwh-coral); border: 2px solid var(--lwh-coral); }
.lh-quiz-card__result { text-align: center; padding: .75rem 0; padding: round(nearest, .75rem, 4px) 0; }
.lh-quiz-card__stars { display: block; font-size: 1.8rem; margin-bottom: .25rem; margin-bottom: round(nearest, .25rem, 4px); }
.lh-quiz-card__resultmsg { display: block; color: var(--lwh-grey); font-size: .88rem; margin-top: .25rem; margin-top: round(nearest, .25rem, 4px); }
.lh-try-foot { text-align: center; margin-top: 2rem; margin-top: round(nearest, 2rem, 4px); font-weight: 700; color: var(--lwh-ink-soft); }
.lh-try-foot a { color: var(--lwh-coral); margin-left: .35rem; margin-left: round(nearest, .35rem, 4px); }

/* TESTIMONIALS */
.lh-home-proof { padding: var(--lwh-section-pad) 1.5rem; padding: round(nearest, var(--lwh-section-pad), 4px) round(nearest, 1.5rem, 4px); background: var(--lwh-cream); }
.lh-home-proof > * { max-width: 1200px; margin-inline: auto; }
.lh-proof-card { background: #fff; border-radius: 20px; padding: 1.75rem; padding: round(nearest, 1.75rem, 4px); box-shadow: var(--lwh-shadow-md); margin: 0; }
.lh-proof-card blockquote { margin: 0 0 1rem; margin: 0 0 round(nearest, 1rem, 4px); font-size: 1.02rem; line-height: 1.55; color: var(--lwh-ink); }
.lh-proof-card__name { display: block; font-weight: 800; font-family: 'Fredoka', sans-serif; }
.lh-proof-card__role { display: block; font-size: .82rem; color: var(--lwh-grey); }

@media (min-width: 900px) {
  .lh-home-why, .lh-home-try, .lh-home-proof { padding-top: 5rem; padding-top: round(nearest, 5rem, 4px); padding-bottom: 5rem; padding-bottom: round(nearest, 5rem, 4px); }
  .lh-try-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   SPRINT 43 — DESKTOP: contained, rounded section panels with margins
   Replaces the full-bleed bands with centred rounded "cards" separated by
   healthy margins. Desktop only — mobile keeps simple stacked full-width
   sections. The hero, trust bar and final CTA stay full-bleed by design.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Page background behind the panels. */
  .lh-homepage-body .lh-site-main { background: var(--lwh-grey-light); }

  /* The content sections become centred rounded panels. */
  .lh-home-why, .lh-home-stages, .lh-home-try, .lh-home-subjects,
  .lh-home-types, .lh-home-audience, .lh-home-section, .lh-home-how,
  .lh-home-stats-section, .lh-home-faq, .lh-home-proof {
    max-width: 1240px;
    margin: 2rem auto;
    margin: round(nearest, 2rem, 4px) auto;
    border-radius: 32px;
    padding: 4.5rem 3rem;
    padding: round(nearest, 4.5rem, 4px) round(nearest, 3rem, 4px);
    overflow: hidden;
  }

  /* Cancel the old curved-top overlap trick (we use even margins now). */
  .lh-home-subjects, .lh-home-audience, .lh-home-faq {
    border-top-left-radius: 32px; border-top-right-radius: 32px;
    margin-top: 2rem;
    margin-top: round(nearest, 2rem, 4px); position: static;
  }

  /* First panel gets a little more breathing room under the trust bar. */
  .lh-home-why { margin-top: 2.5rem; margin-top: round(nearest, 2.5rem, 4px); }

  /* Inner content already constrained; let panels hold their own padding. */
  .lh-home-why > *, .lh-home-try > *, .lh-home-proof > *,
  .lh-home-stats-section > * { max-width: 1100px; }
}

/* ── No gap between the last homepage section and the footer ── */
.lh-home-cta-banner { margin-bottom: 0; }
.lh-homepage-body .lh-site-main { padding-bottom: 0; margin-bottom: 0; }
.lh-homepage-body .lh-footer { margin-top: 0; }
/* The final CTA banner stays full-bleed (not a contained panel) and sits
   flush against the footer. */
.lh-homepage-body .lh-home-cta-banner { border-radius: 0; max-width: none; margin-left: 0; margin-right: 0; }

/* ── Newsletter subscribe form (used in footer + anywhere via shortcode) ── */
.lh-news-form { display: flex; flex-direction: column; gap: .6rem; gap: round(nearest, .6rem, 4px); max-width: 420px; }
.lh-news-form input[type="email"] { width: 100%; padding: .7rem .9rem; padding: round(nearest, .7rem, 4px) round(nearest, .9rem, 4px); border-radius: 10px; border: 1px solid var(--lwh-border); font: inherit; }
.lh-news-form__roles { border: none; padding: 0; margin: 0; display: flex; gap: 1rem; gap: round(nearest, 1rem, 4px); flex-wrap: wrap; }
.lh-news-form__roles legend { font-weight: 700; font-size: .85rem; margin-bottom: .3rem; margin-bottom: round(nearest, .3rem, 4px); }
.lh-news-form__roles label, .lh-news-form__check { font-size: .85rem; display: inline-flex; align-items: center; gap: .35rem; gap: round(nearest, .35rem, 4px); }
.lh-news-form__check { align-items: flex-start; line-height: 1.4; }
.lh-news-success { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 12px; padding: 1rem 1.25rem; padding: round(nearest, 1rem, 4px) round(nearest, 1.25rem, 4px); max-width: 420px; }
.lh-news-success strong { font-family: 'Fredoka', sans-serif; font-size: 1.1rem; }
/* Footer context: light text on the dark footer. */
.lh-footer .lh-news-form__roles legend,
.lh-footer .lh-news-form__roles label,
.lh-footer .lh-news-form__check { color: rgba(255,255,255,.85); }
.lh-footer .lh-news-form__check a { color: var(--lwh-yellow); text-decoration: underline; }
.lh-footer .lh-news-success { color: #fff; }

/* ── Newsletter opt-in on the plans/checkout page ── */
.lh-plans-modern__news { display: flex; align-items: center; justify-content: center; gap: .75rem; gap: round(nearest, .75rem, 4px); flex-wrap: wrap; margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); font-size: .9rem; }
.lh-plans-modern__news-check { display: inline-flex; align-items: center; gap: .4rem; gap: round(nearest, .4rem, 4px); }
.lh-plans-modern__news-role { padding: .35rem .6rem; padding: round(nearest, .35rem, 4px) round(nearest, .6rem, 4px); border-radius: 8px; border: 1px solid var(--lwh-border); font: inherit; }

/* ═══════════════════════════════════════════════════════════════════
   Catalogue: slim promo hero with animated 3-step quick-start guide
   (replaces the tall purple sidebar hero on resource pages)
   ═══════════════════════════════════════════════════════════════════ */
.lh-catalogue__promo {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--lwh-purple-dark) 0%, var(--lwh-purple) 60%, #8E24AA 100%);
  color: #fff; border-radius: 20px; margin-bottom: 1.25rem; margin-bottom: round(nearest, 1.25rem, 4px);
  padding: 1.1rem 1.5rem;
  padding: round(nearest, 1.1rem, 4px) round(nearest, 1.5rem, 4px);
}
.lh-catalogue__promo-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lh-catalogue__promo-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; gap: round(nearest, 1.5rem, 4px); flex-wrap: wrap;
}
.lh-catalogue__promo .lh-catalogue__eyebrow { color: var(--lwh-yellow); margin-bottom: .15rem; margin-bottom: round(nearest, .15rem, 4px); }
.lh-catalogue__promo .lh-catalogue__headline { color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin: 0; }
.lh-catalogue__promo-lead {
  color: rgba(255,255,255,.82); font-size: .9rem; margin: .35rem 0 0; margin: round(nearest, .35rem, 4px) 0 0; max-width: 52ch;
  /* Keep context to two lines max so the strip stays slim. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lh-catalogue__promo-copy { min-width: 0; flex: 1 1 auto; }

/* The 3-step quick-start — compact, with a staggered fade-in animation. */
.lh-quickstart {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch; gap: .5rem; gap: round(nearest, .5rem, 4px); flex-wrap: wrap;
}
.lh-quickstart__step {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px; padding: .5rem .85rem; padding: round(nearest, .5rem, 4px) round(nearest, .85rem, 4px); min-width: 116px;
  animation: lwhQsIn .5s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--qs-i) * .15s);
}
.lh-quickstart__num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--lwh-yellow); color: var(--lwh-purple-dark);
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: .3rem; margin-bottom: round(nearest, .3rem, 4px);
}
.lh-quickstart__label { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .92rem; line-height: 1.1; }
.lh-quickstart__sub { font-size: .72rem; opacity: .8; margin-top: .1rem; margin-top: round(nearest, .1rem, 4px); }
.lh-quickstart__arrow { display: flex; align-items: center; color: rgba(255,255,255,.6); font-size: 1.2rem; }

@keyframes lwhQsIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .lh-quickstart__step { animation: none; } }

/* Stack neatly on small screens — kept deliberately SHORT so customers don't
   scroll past a tall hero to reach the resources. */
@media (max-width: 640px) {
  .lh-catalogue__promo { padding: .85rem 1rem; padding: round(nearest, .85rem, 4px) round(nearest, 1rem, 4px); }
  .lh-catalogue__promo-inner { flex-direction: column; align-items: flex-start; gap: .65rem; gap: round(nearest, .65rem, 4px); }
  /* Hide the descriptive lead on mobile — the headline alone is enough
     context, and dropping it keeps the strip compact. */
  .lh-catalogue__promo-lead { display: none; }
  .lh-quickstart { width: 100%; gap: .4rem; gap: round(nearest, .4rem, 4px); }
  .lh-quickstart__arrow { display: none; }
  /* Compact horizontal steps (icon + label inline) instead of tall stacked
     cards, so the whole strip stays short. */
  .lh-quickstart__step { flex: 1 1 0; min-width: 0; flex-direction: row; align-items: center; gap: .4rem; gap: round(nearest, .4rem, 4px); padding: .4rem .5rem; padding: round(nearest, .4rem, 4px) round(nearest, .5rem, 4px); text-align: left; }
  .lh-quickstart__num { margin-bottom: 0; flex: 0 0 auto; }
  .lh-quickstart__label { font-size: .78rem; }
  .lh-quickstart__sub { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Hero curriculum category buttons — MOBILE & TABLET ONLY.
   On desktop the animated journey map shows instead (see min-width:900px).
   Clean, centred grid with professional line icons.
   ═══════════════════════════════════════════════════════════════════ */
.lh-hero-cats {
  list-style: none; margin: 1.5rem auto 0; margin: round(nearest, 1.5rem, 4px) auto 0; padding: 0; max-width: 440px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; gap: round(nearest, .7rem, 4px);
  justify-content: center;
}
/* GCSE (5th, odd one) spans full width and centres. */
.lh-hero-cats .lh-hero-cat:nth-child(5) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
.lh-hero-cat__link {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; gap: round(nearest, .35rem, 4px);
  padding: 1rem .75rem;
  padding: round(nearest, 1rem, 4px) round(nearest, .75rem, 4px); border-radius: 18px; height: 100%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  text-decoration: none; color: #fff;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.lh-hero-cat__link:hover, .lh-hero-cat__link:focus-visible {
  transform: translateY(-3px); background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45);
}
.lh-hero-cat__icon {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: rgba(255,255,255,.16); margin-bottom: .1rem; margin-bottom: round(nearest, .1rem, 4px);
}
.lh-hero-cat__icon svg { width: 22px; height: 22px; }
.lh-hero-cat__label { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1; }
.lh-hero-cat__meta { font-size: .78rem; font-weight: 600; opacity: .82; }

/* Per-stage accent on the icon tile (matches the journey dot colours). */
.lh-hero-cat--mint   .lh-hero-cat__icon { color: #5DCAA5; }
.lh-hero-cat--sky    .lh-hero-cat__icon { color: #85B7EB; }
.lh-hero-cat--amber  .lh-hero-cat__icon { color: #EF9F27; }
.lh-hero-cat--pink   .lh-hero-cat__icon { color: #ED93B1; }
.lh-hero-cat--violet .lh-hero-cat__icon { color: #C9A7F5; }

/* DESKTOP: hide the category buttons; the journey map takes over. */
@media (min-width: 900px) {
  .lh-hero-cats { display: none; }
}
/* MOBILE & TABLET (below 900px): hide the journey map; show the buttons. */
@media (max-width: 899px) {
  .lh-hero-path { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Landing page heroes — reuse the homepage hero signature (.lh-home-hero)
   with a unique gradient per audience and a centred single-column layout
   (no right-side visual). Headers sit transparent over these heroes.
   ═══════════════════════════════════════════════════════════════════ */
.lh-home-hero--teacher { background: linear-gradient(135deg, #311B92 0%, #4A148C 45%, #6A1B9A 80%, #8E24AA 100%) !important; }
.lh-home-hero--parent  { background: linear-gradient(135deg, #880E4F 0%, #AD1457 45%, #E91E63 80%, #FF6090 100%) !important; }
.lh-home-hero--student { background: linear-gradient(135deg, #0D47A1 0%, #1976D2 40%, #2BB3FF 75%, #7C4DFF 100%) !important; }

/* Centred single-column hero (landing pages have no right-hand visual). */
.lh-home-hero__inner--center { display: block; max-width: 820px; text-align: center; }
.lh-home-hero__inner--center .lh-home-hero__copy { margin: 0 auto; }
.lh-home-hero__inner--center .lh-home-hero__cta { justify-content: center; }
.lh-home-hero__inner--center .lh-home-hero__bullets { justify-content: center; }
/* The landing heroes carry their own padding-top to clear the transparent
   header that sits over them (matches the homepage behaviour). */
.lh-landing .lh-home-hero { padding-top: 5rem; padding-top: round(nearest, 5rem, 4px); }

/* ═══════════════════════════════════════════════════════════════════
   LEARNAROO LIBRARY (/resources) — app-style hub. Brand-themed,
   responsive, pure CSS. Full-bleed via index.php; transparent header
   via lh-hero-header-body.
   ═══════════════════════════════════════════════════════════════════ */
.lh-lib { width: 100%; }
.lh-lib__hero { background: var(--lwh-grad-hero); padding: 6rem 1.5rem 2rem; padding: round(nearest, 6rem, 4px) round(nearest, 1.5rem, 4px) round(nearest, 2rem, 4px); text-align: center; }
@media (min-width: 700px) { .lh-lib__hero { padding-top: 6.5rem; padding-top: round(nearest, 6.5rem, 4px); } }
.lh-lib__hero-top { max-width: 760px; margin: 0 auto .75rem; margin: 0 auto round(nearest, .75rem, 4px); display: flex; align-items: center; justify-content: space-between; }
.lh-lib__brand { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.1rem; color: #fff; }
.lh-lib__brand-a { color: var(--lwh-yellow); }
.lh-lib__count-pill { background: rgba(255,255,255,.18); color: #fff; font-weight: 700; font-size: .78rem; padding: .35rem .85rem; padding: round(nearest, .35rem, 4px) round(nearest, .85rem, 4px); border-radius: var(--lwh-radius-pill); }
.lh-lib__h1 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.12; color: #fff; max-width: 760px; margin: 0 auto .5rem; margin: 0 auto round(nearest, .5rem, 4px); }
.lh-lib__hl { color: var(--lwh-yellow); }
.lh-lib__lead { color: rgba(255,255,255,.92); font-weight: 600; font-size: .98rem; max-width: 620px; margin: 0 auto 1.1rem; margin: 0 auto round(nearest, 1.1rem, 4px); line-height: 1.5; }
.lh-lib__search { position: relative; max-width: 540px; margin: 0 auto; display: flex; align-items: center; }
.lh-lib__search svg { position: absolute; left: 16px; color: #9b6fc4; font-size: 1.2rem; pointer-events: none; }
.lh-lib__search input { width: 100%; padding: .85rem 1rem .85rem 2.7rem; padding: round(nearest, .85rem, 4px) round(nearest, 1rem, 4px) round(nearest, .85rem, 4px) round(nearest, 2.7rem, 4px); border: 0; border-radius: var(--lwh-radius-pill); font-size: .95rem; font-family: 'Nunito', sans-serif; background: #fff; color: var(--lwh-ink); }
.lh-lib__aud { display: flex; gap: .45rem; gap: round(nearest, .45rem, 4px); max-width: 540px; margin: .8rem auto 0; margin: round(nearest, .8rem, 4px) auto 0; }
.lh-lib__aud-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; gap: round(nearest, .3rem, 4px); height: 38px; border-radius: var(--lwh-radius-pill); background: rgba(255,255,255,.16); color: #fff; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .82rem; text-decoration: none; transition: background .15s; }
.lh-lib__aud-btn:hover { background: rgba(255,255,255,.28); }
.lh-lib__aud-btn.is-active { background: var(--lwh-yellow); color: var(--lwh-purple-dark); }
.lh-lib__stats { display: flex; justify-content: space-around; background: var(--lwh-grey-light); padding: .8rem .5rem; padding: round(nearest, .8rem, 4px) round(nearest, .5rem, 4px); border-bottom: 1px solid var(--lwh-border); }
.lh-lib__stats div { text-align: center; }
.lh-lib__stats strong { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--lwh-purple-dark); }
.lh-lib__stats div:nth-child(2) strong { color: var(--lwh-coral); }
.lh-lib__stats div:nth-child(3) strong { color: var(--lwh-teal); }
.lh-lib__stats div:nth-child(4) strong { color: var(--lwh-tangerine); }
.lh-lib__stats span { font-size: .7rem; color: var(--lwh-grey); font-weight: 700; }
.lh-lib__body { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; padding: round(nearest, 1.5rem, 4px) round(nearest, 1.5rem, 4px) round(nearest, 3rem, 4px); }
.lh-lib__h2 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.25rem; color: var(--lwh-ink); margin: 1.8rem 0 .3rem; margin: round(nearest, 1.8rem, 4px) 0 round(nearest, .3rem, 4px); }
.lh-lib__h2:first-of-type { margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); }
.lh-lib__sub { font-size: .9rem; color: var(--lwh-grey); font-weight: 600; margin: 0 0 .9rem; margin: 0 0 round(nearest, .9rem, 4px); }
.lh-lib__levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: .6rem; gap: round(nearest, .6rem, 4px); }
.lh-lib-level { border-radius: var(--lwh-radius); padding: .85rem .5rem; padding: round(nearest, .85rem, 4px) round(nearest, .5rem, 4px); text-align: center; text-decoration: none; transition: transform .15s; display: block; }
.lh-lib-level:hover { transform: translateY(-3px); }
.lh-lib-level__name { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.05rem; }
.lh-lib-level__age { display: block; font-size: .72rem; font-weight: 700; }
.lh-lib__subjects { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; gap: round(nearest, .6rem, 4px); }
.lh-lib-subj { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: .7rem .8rem; padding: round(nearest, .7rem, 4px) round(nearest, .8rem, 4px); display: flex; align-items: center; gap: .65rem; gap: round(nearest, .65rem, 4px); text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
.lh-lib-subj:hover { transform: translateY(-3px); border-color: var(--lwh-coral); box-shadow: 0 10px 24px rgba(74,20,140,.10); }
.lh-lib-subj__icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.2rem; }
.lh-lib-subj__name { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .92rem; color: var(--lwh-ink); }
.lh-lib-subj__count { display: block; font-size: .72rem; color: var(--lwh-grey); font-weight: 700; }
.lh-lib-subj--all { justify-content: center; gap: .4rem; gap: round(nearest, .4rem, 4px); background: var(--lwh-grad-candy); border: 0; color: #fff; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .85rem; }
.lh-lib-subj--all:hover { color: #fff; }
.lh-lib__featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: .7rem; gap: round(nearest, .7rem, 4px); }
.lh-lib-feat { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); overflow: hidden; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.lh-lib-feat:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(74,20,140,.10); }
.lh-lib-feat__bar { display: block; height: 6px; }
.lh-lib-feat__in { display: block; padding: .7rem .85rem; padding: round(nearest, .7rem, 4px) round(nearest, .85rem, 4px); }
.lh-lib-feat__tags { display: flex; gap: .35rem; gap: round(nearest, .35rem, 4px); margin-bottom: .45rem; margin-bottom: round(nearest, .45rem, 4px); }
.lh-lib-feat__tag { background: var(--lwh-purple-light); color: var(--lwh-purple-dark); font-size: .62rem; font-weight: 700; padding: .2rem .5rem; padding: round(nearest, .2rem, 4px) round(nearest, .5rem, 4px); border-radius: var(--lwh-radius-pill); }
.lh-lib-feat__tag--type { background: var(--lwh-grey-light); color: var(--lwh-grey); }
.lh-lib-feat__title { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .9rem; color: var(--lwh-ink); line-height: 1.3; }
.lh-lib__formats { display: flex; flex-wrap: wrap; gap: .5rem; gap: round(nearest, .5rem, 4px); }
.lh-lib-chip { display: inline-flex; align-items: center; gap: .35rem; gap: round(nearest, .35rem, 4px); border-radius: var(--lwh-radius-pill); padding: .45rem .9rem; padding: round(nearest, .45rem, 4px) round(nearest, .9rem, 4px); font-size: .85rem; font-weight: 700; text-decoration: none; transition: transform .15s; }
.lh-lib-chip:hover { transform: translateY(-2px); }
.lh-lib__aud-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; gap: round(nearest, .6rem, 4px); }
.lh-lib-aud-card { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: var(--lwh-radius); padding: .85rem; padding: round(nearest, .85rem, 4px); text-decoration: none; transition: transform .15s, border-color .15s; display: block; }
.lh-lib-aud-card:hover { transform: translateY(-3px); border-color: var(--lwh-coral); }
.lh-lib-aud-card__icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.lh-lib-aud-card__name { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .92rem; color: var(--lwh-ink); margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); }
.lh-lib-aud-card__desc { display: block; font-size: .76rem; color: var(--lwh-grey); font-weight: 600; line-height: 1.45; margin-top: .15rem; margin-top: round(nearest, .15rem, 4px); }
.lh-lib__faq { display: flex; flex-direction: column; gap: .5rem; gap: round(nearest, .5rem, 4px); }
.lh-lib__faq details { background: var(--lwh-grey-light); border-radius: 14px; padding: .7rem .9rem; padding: round(nearest, .7rem, 4px) round(nearest, .9rem, 4px); }
.lh-lib__faq summary { font-family: 'Fredoka', sans-serif; font-size: .92rem; font-weight: 600; color: var(--lwh-ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.lh-lib__faq summary::-webkit-details-marker { display: none; }
.lh-lib__faq summary svg { color: var(--lwh-coral); transition: transform .2s; flex-shrink: 0; }
.lh-lib__faq details[open] summary svg { transform: rotate(45deg); }
.lh-lib__faq p { font-size: .85rem; color: var(--lwh-ink-soft); margin: .55rem 0 0; margin: round(nearest, .55rem, 4px) 0 0; font-weight: 600; line-height: 1.5; }
.lh-lib__seo { font-size: .78rem; color: var(--lwh-grey); line-height: 1.55; font-weight: 600; margin: 1.2rem 0 0; margin: round(nearest, 1.2rem, 4px) 0 0; }
.lh-lib__cta { margin-top: 1.2rem; margin-top: round(nearest, 1.2rem, 4px); background: var(--lwh-grad-sunset); border-radius: 18px; padding: 1.1rem 1.2rem; padding: round(nearest, 1.1rem, 4px) round(nearest, 1.2rem, 4px); display: flex; align-items: center; justify-content: space-between; gap: .9rem; gap: round(nearest, .9rem, 4px); flex-wrap: wrap; }
.lh-lib__cta-title { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.05rem; color: #fff; }
.lh-lib__cta-sub { display: block; font-size: .8rem; color: rgba(255,255,255,.9); font-weight: 600; }
.lh-lib__cta-btn { background: #fff; color: var(--lwh-coral-dark); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .92rem; padding: .7rem 1.3rem; padding: round(nearest, .7rem, 4px) round(nearest, 1.3rem, 4px); border-radius: var(--lwh-radius-pill); text-decoration: none; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .lh-lib-level, .lh-lib-subj, .lh-lib-feat, .lh-lib-chip, .lh-lib-aud-card { transition: none; }
  .lh-lib-level:hover, .lh-lib-subj:hover, .lh-lib-feat:hover, .lh-lib-chip:hover, .lh-lib-aud-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   FREE RESOURCES PAGE (/free-resources) — playful animated landing.
   Pure CSS/SVG, mobile-first, respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */
.lh-fr-hero { position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(135deg, #4A148C 0%, #6B2FA0 42%, #B5179E 78%, #E91E63 125%);
  padding: clamp(5rem, 11vh, 7.5rem) 1.5rem clamp(3.5rem, 9vh, 6rem);
  padding: round(nearest, clamp(5rem, 11vh, 7.5rem), 4px) round(nearest, 1.5rem, 4px) round(nearest, clamp(3.5rem, 9vh, 6rem), 4px); }
.lh-fr-hero__grid { position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 46px 46px; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent); }
.lh-fr-hero__blob { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .5; z-index: 0; }
.lh-fr-hero__blob--1 { width: 280px; height: 280px; background: var(--lwh-coral); top: -80px; left: -60px; animation: lhFrDrift 14s ease-in-out infinite; }
.lh-fr-hero__blob--2 { width: 200px; height: 200px; background: var(--lwh-tangerine); bottom: -70px; right: -40px; animation: lhFrDrift 18s ease-in-out infinite reverse; }
@keyframes lhFrDrift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px,20px); } }
.lh-fr-hero__inner { position: relative; z-index: 3; max-width: 780px; margin: 0 auto; }
.lh-fr-hero__slogan { display: inline-flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); background: var(--lwh-yellow); color: var(--lwh-purple-dark);
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .92rem; padding: .5rem 1.2rem; padding: round(nearest, .5rem, 4px) round(nearest, 1.2rem, 4px); border-radius: var(--lwh-radius-pill);
  margin-bottom: 1.2rem;
  margin-bottom: round(nearest, 1.2rem, 4px); box-shadow: 0 6px 0 rgba(0,0,0,.12); animation: lhFrWobble 4s ease-in-out infinite; transform-origin: center; }
@keyframes lhFrWobble { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.lh-fr-hero__h1 { font-family: 'Fredoka', sans-serif; font-weight: 700; color: #fff; font-size: clamp(2.5rem, 6.5vw, 4.4rem); line-height: 1.02; margin: 0 0 .8rem; margin: 0 0 round(nearest, .8rem, 4px); text-shadow: 0 4px 0 rgba(0,0,0,.10); }
.lh-fr-hero__hl { color: var(--lwh-yellow); display: inline-block; animation: lhFrPop 3s ease-in-out infinite; }
@keyframes lhFrPop { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.05) rotate(-1.5deg); } }
.lh-fr-hero__lead { font-size: clamp(1rem, 2.2vw, 1.22rem); color: rgba(255,255,255,.94); font-weight: 700; max-width: 560px; margin: 0 auto 1.6rem; margin: 0 auto round(nearest, 1.6rem, 4px); line-height: 1.5; }
.lh-fr-hero__cta { display: flex; gap: .7rem; gap: round(nearest, .7rem, 4px); justify-content: center; flex-wrap: wrap; }
.lh-fr-btn { display: inline-flex; align-items: center; gap: .45rem; gap: round(nearest, .45rem, 4px); border: 0; border-radius: var(--lwh-radius-pill);
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.05rem; padding: .95rem 1.8rem; padding: round(nearest, .95rem, 4px) round(nearest, 1.8rem, 4px); cursor: pointer; text-decoration: none; transition: transform .15s, background .15s; }
.lh-fr-btn--gold { background: var(--lwh-yellow); color: var(--lwh-purple-dark); box-shadow: 0 6px 0 #d4a800; }
.lh-fr-btn--gold:hover { transform: translateY(-3px); }
.lh-fr-btn--gold:active { transform: translateY(2px); box-shadow: 0 2px 0 #d4a800; }
.lh-fr-btn--ghost { background: rgba(255,255,255,.15); color: #fff; border: 2px solid rgba(255,255,255,.4); }
.lh-fr-btn--ghost:hover { transform: translateY(-3px); background: rgba(255,255,255,.24); }
.lh-fr-hero__stats { display: inline-flex; gap: 1.4rem; gap: round(nearest, 1.4rem, 4px); justify-content: center; margin-top: 1.8rem; margin-top: round(nearest, 1.8rem, 4px); flex-wrap: wrap; background: rgba(255,255,255,.10); padding: .8rem 1.6rem; padding: round(nearest, .8rem, 4px) round(nearest, 1.6rem, 4px); border-radius: 24px; }
.lh-fr-stat b { font-family: 'Fredoka', sans-serif; font-size: 1.5rem; color: var(--lwh-yellow); display: block; line-height: 1; }
.lh-fr-stat span { font-size: .78rem; color: rgba(255,255,255,.85); font-weight: 700; }

/* floating icons */
.lh-fr-float { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; border-radius: 20px; box-shadow: 0 12px 30px rgba(0,0,0,.22); animation: lhFrBounce 4.5s ease-in-out infinite; }
.lh-fr-float svg { width: 52%; height: 52%; }
.lh-fr-float--book { width: 66px; height: 66px; top: 16%; left: 7%; animation-delay: 0s; --r: -4deg; }
.lh-fr-float--pen  { width: 56px; height: 56px; top: 62%; left: 12%; animation-delay: -1s; --r: -10deg; }
.lh-fr-float--pdf  { width: 60px; height: 60px; top: 20%; right: 8%; animation-delay: -2.2s; --r: 7deg; }
.lh-fr-float--quiz { width: 58px; height: 58px; top: 62%; right: 10%; animation-delay: -3s; --r: -6deg; }
.lh-fr-float--dl   { width: 50px; height: 50px; top: 6%; right: 27%; animation-delay: -1.6s; }
.lh-fr-float--play { width: 50px; height: 50px; top: 9%; left: 31%; animation-delay: -2.7s; }
.lh-fr-float--bulb { width: 48px; height: 48px; top: 46%; right: 3.5%; animation-delay: -.5s; }
.lh-fr-float--star { width: 42px; height: 42px; top: 40%; left: 3.5%; animation-delay: -3.6s; --r: 8deg; }
@keyframes lhFrBounce { 0%,100% { transform: translateY(0) rotate(var(--r,0)); } 50% { transform: translateY(-20px) rotate(calc(var(--r,0) + 6deg)); } }

/* type slider */
.lh-fr-slider-wrap { max-width: 1100px; margin: 0 auto; padding: 2.2rem 1.25rem 0; padding: round(nearest, 2.2rem, 4px) round(nearest, 1.25rem, 4px) 0; }
.lh-fr-slider-head { text-align: center; }
.lh-fr-h2 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.7rem; text-align: center; margin: 0 0 .3rem; margin: 0 0 round(nearest, .3rem, 4px); color: var(--lwh-ink); }
.lh-fr-sub { text-align: center; color: var(--lwh-grey); font-weight: 600; margin: 0 auto 1.2rem; margin: 0 auto round(nearest, 1.2rem, 4px); max-width: 560px; }
.lh-fr-slider { display: flex; gap: .8rem; gap: round(nearest, .8rem, 4px); overflow-x: auto; padding: .5rem .25rem 1.2rem; padding: round(nearest, .5rem, 4px) round(nearest, .25rem, 4px) round(nearest, 1.2rem, 4px); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.lh-fr-slider::-webkit-scrollbar { height: 8px; }
.lh-fr-slider::-webkit-scrollbar-thumb { background: rgba(107,47,160,.25); border-radius: 999px; }
.lh-fr-slide { flex: 0 0 auto; width: 132px; min-height: 116px; scroll-snap-align: start; border-radius: 20px; padding: 1.1rem .8rem; padding: round(nearest, 1.1rem, 4px) round(nearest, .8rem, 4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; gap: round(nearest, .6rem, 4px); text-decoration: none; color: #fff; transition: transform .15s; box-shadow: 0 10px 24px rgba(74,20,140,.12); }
.lh-fr-slide:hover { transform: translateY(-4px); }
.lh-fr-slide__icon { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; }
.lh-fr-slide__icon svg { width: 26px; height: 26px; }
.lh-fr-slide__name { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .95rem; text-align: center; }

/* how it works */
.lh-fr-how-wrap { max-width: 1100px; margin: 0 auto; padding: 1.6rem 1.25rem 0; padding: round(nearest, 1.6rem, 4px) round(nearest, 1.25rem, 4px) 0; }
.lh-fr-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; gap: round(nearest, .8rem, 4px); margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
.lh-fr-how__step { background: #fff; border: 1.5px solid var(--lwh-border); border-radius: 18px; padding: 1.2rem; padding: round(nearest, 1.2rem, 4px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.lh-fr-how__num { width: 34px; height: 34px; border-radius: 50%; background: var(--lwh-yellow); color: var(--lwh-purple-dark); font-family: 'Fredoka', sans-serif; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: .6rem; margin-bottom: round(nearest, .6rem, 4px); }
.lh-fr-how__t { font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--lwh-ink); }
.lh-fr-how__d { font-size: .85rem; color: var(--lwh-grey); font-weight: 600; margin-top: .2rem; margin-top: round(nearest, .2rem, 4px); }

/* catalogue spacing */
.lh-fr-catalogue { max-width: 1440px; margin: 1.6rem auto 0; margin: round(nearest, 1.6rem, 4px) auto 0; padding: 0 1.75rem; padding: 0 round(nearest, 1.75rem, 4px); scroll-margin-top: 90px; }

/* sign-up band */
.lh-fr-band-wrap { max-width: 1100px; margin: 0 auto; padding: 2.4rem 1.25rem; padding: round(nearest, 2.4rem, 4px) round(nearest, 1.25rem, 4px); }
.lh-fr-band { background: linear-gradient(120deg, #FF7A1A, #E91E63 55%, #9B4DFF); border-radius: 24px; padding: 1.6rem 1.8rem; padding: round(nearest, 1.6rem, 4px) round(nearest, 1.8rem, 4px); display: flex; align-items: center; justify-content: space-between; gap: 1rem; gap: round(nearest, 1rem, 4px); flex-wrap: wrap; color: #fff; }
.lh-fr-band__t { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.3rem; }
.lh-fr-band__s { display: block; font-size: .85rem; opacity: .92; font-weight: 600; }
.lh-fr-band__btn { background: #fff; color: var(--lwh-coral-dark); font-family: 'Fredoka', sans-serif; font-weight: 700; padding: .8rem 1.5rem; padding: round(nearest, .8rem, 4px) round(nearest, 1.5rem, 4px); border-radius: var(--lwh-radius-pill); text-decoration: none; white-space: nowrap; }

@media (max-width: 760px) {
  .lh-fr-float--dl, .lh-fr-float--play, .lh-fr-float--bulb, .lh-fr-float--star { display: none; }
  .lh-fr-float--book { top: 5%; left: 3%; width: 50px; height: 50px; }
  .lh-fr-float--pen  { top: auto; bottom: 3%; left: 4%; width: 46px; height: 46px; }
  .lh-fr-float--pdf  { top: 6%; right: 3%; width: 48px; height: 48px; }
  .lh-fr-float--quiz { top: auto; bottom: 4%; right: 3%; width: 46px; height: 46px; }
  .lh-fr-how { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lh-fr-float, .lh-fr-hero__blob, .lh-fr-hero__slogan, .lh-fr-hero__hl { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   WHO ARE WE PAGE (/who-are-we) — illustrative brand-story page.
   Pure CSS/SVG, mobile-first, respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */
.lh-wa { --lwh-bg: #F4F1FA; background: var(--lwh-bg); }

/* HERO */
.lh-wa-hero { position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(135deg, #4A148C 0%, #6B2FA0 45%, #B5179E 82%, #E91E63 128%);
  padding: clamp(3.5rem, 9vh, 6rem) 1.5rem clamp(4.5rem, 10vh, 7rem);
  padding: round(nearest, clamp(3.5rem, 9vh, 6rem), 4px) round(nearest, 1.5rem, 4px) round(nearest, clamp(4.5rem, 10vh, 7rem), 4px); }
.lh-wa-hero__grid { position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 46px 46px; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent); }
.lh-wa-blob { position: absolute; border-radius: 50%; filter: blur(10px); opacity: .45; z-index: 0; }
.lh-wa-blob--1 { width: 300px; height: 300px; background: var(--lwh-coral); top: -90px; left: -70px; animation: lhWaDrift 16s ease-in-out infinite; }
.lh-wa-blob--2 { width: 220px; height: 220px; background: var(--lwh-tangerine); bottom: -60px; right: -50px; animation: lhWaDrift 20s ease-in-out infinite reverse; }
@keyframes lhWaDrift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(26px,18px); } }
.lh-wa-float { position: absolute; z-index: 1; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; animation: lhWaBob 5s ease-in-out infinite; opacity: .85; }
.lh-wa-float svg { width: 100%; height: 100%; }
.lh-wa-float--a { top: 18%; left: 10%; animation-delay: 0s; }
.lh-wa-float--b { top: 24%; right: 11%; animation-delay: -1.5s; width: 60px; height: 60px; }
.lh-wa-float--c { bottom: 22%; left: 16%; animation-delay: -3s; width: 46px; height: 46px; }
@keyframes lhWaBob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-18px) rotate(4deg); } }
.lh-wa-hero__inner { position: relative; z-index: 3; max-width: 720px; margin: 0 auto; }
.lh-wa-eyebrow { display: inline-flex; align-items: center; gap: .45rem; gap: round(nearest, .45rem, 4px); background: rgba(255,255,255,.16); color: #fff; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .85rem; padding: .45rem 1.1rem; padding: round(nearest, .45rem, 4px) round(nearest, 1.1rem, 4px); border-radius: var(--lwh-radius-pill); margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-wa-hero__h1 { font-family: 'Fredoka', sans-serif; font-weight: 700; color: #fff; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.04; margin: 0 0 .8rem; margin: 0 0 round(nearest, .8rem, 4px); text-shadow: 0 4px 0 rgba(0,0,0,.10); }
.lh-wa-hl { color: var(--lwh-yellow); }
.lh-wa-hero__lead { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: rgba(255,255,255,.94); font-weight: 600; max-width: 580px; margin: 0 auto; line-height: 1.55; }
.lh-wa-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; z-index: 2; display: block; }

/* BODY layout */
.lh-wa-body { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem 1rem; padding: 0 round(nearest, 1.25rem, 4px) round(nearest, 1rem, 4px); }
.lh-wa-kicker { display: inline-block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--lwh-coral); margin-bottom: .4rem; margin-bottom: round(nearest, .4rem, 4px); }
.lh-wa-kicker--light { color: var(--lwh-yellow); }
.lh-wa-h2 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.2rem); text-align: center; color: var(--lwh-ink); margin: 0 0 .3rem; margin: 0 0 round(nearest, .3rem, 4px); }
.lh-wa-sub { text-align: center; color: var(--lwh-grey); font-weight: 600; margin: 0 auto 1.6rem; margin: 0 auto round(nearest, 1.6rem, 4px); }

/* INTRO */
.lh-wa-intro { max-width: 760px; margin: 2.4rem auto; margin: round(nearest, 2.4rem, 4px) auto; text-align: center; }
.lh-wa-intro p { font-size: 1.08rem; line-height: 1.7; color: var(--lwh-ink-soft, #4A4A6A); margin: 0 0 1rem; margin: 0 0 round(nearest, 1rem, 4px); }

/* FOUNDER */
.lh-wa-founder { display: grid; grid-template-columns: 300px 1fr; gap: 2.2rem; gap: round(nearest, 2.2rem, 4px); align-items: center; margin: 2.8rem 0; margin: round(nearest, 2.8rem, 4px) 0; background: #fff; border: 1.5px solid var(--lwh-border); border-radius: 28px; padding: 2rem; padding: round(nearest, 2rem, 4px); box-shadow: 0 20px 50px rgba(74,20,140,.08); }
.lh-wa-founder__media { position: relative; aspect-ratio: 1; border-radius: 24px; background: linear-gradient(135deg, var(--lwh-purple), var(--lwh-coral)); display: flex; align-items: center; justify-content: center; }
.lh-wa-founder__badge { width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--lwh-purple); display: flex; align-items: center; justify-content: center; }
.lh-wa-founder__badge svg { width: 52px; height: 52px; }
.lh-wa-founder__chip { position: absolute; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .82rem; padding: .35rem .9rem; padding: round(nearest, .35rem, 4px) round(nearest, .9rem, 4px); border-radius: var(--lwh-radius-pill); box-shadow: 0 6px 16px rgba(0,0,0,.15); animation: lhWaBob 6s ease-in-out infinite; }
.lh-wa-founder__chip--1 { top: 14%; left: -10%; background: var(--lwh-yellow); color: var(--lwh-purple-dark); animation-delay: 0s; }
.lh-wa-founder__chip--2 { bottom: 18%; left: -8%; background: #fff; color: var(--lwh-coral); animation-delay: -2s; }
.lh-wa-founder__chip--3 { top: 40%; right: -10%; background: var(--lwh-teal); color: #fff; animation-delay: -4s; }
.lh-wa-founder__text h2 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--lwh-ink); margin: .1rem 0 .8rem; margin: round(nearest, .1rem, 4px) 0 round(nearest, .8rem, 4px); line-height: 1.1; }
.lh-wa-founder__text p { color: var(--lwh-ink-soft, #4A4A6A); line-height: 1.65; margin: 0 0 .9rem; margin: 0 0 round(nearest, .9rem, 4px); }
.lh-wa-quote { margin: 1.2rem 0 0; margin: round(nearest, 1.2rem, 4px) 0 0; padding: 1.2rem 1.4rem; padding: round(nearest, 1.2rem, 4px) round(nearest, 1.4rem, 4px); border-left: 4px solid var(--lwh-coral); background: var(--lwh-coral-light, #FCE4EC); border-radius: 0 16px 16px 0; }
.lh-wa-quote p { font-style: italic; color: var(--lwh-ink); margin: 0 0 .5rem; margin: 0 0 round(nearest, .5rem, 4px); }
.lh-wa-quote cite { font-style: normal; font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--lwh-coral-dark); font-size: .9rem; }

/* PILLARS */
.lh-wa-pillars { margin: 3rem 0 2rem; margin: round(nearest, 3rem, 4px) 0 round(nearest, 2rem, 4px); }
.lh-wa-pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; gap: round(nearest, 1rem, 4px); margin-top: 1.4rem; margin-top: round(nearest, 1.4rem, 4px); }
.lh-wa-pillar { border-radius: 22px; padding: 1.8rem 1.5rem; padding: round(nearest, 1.8rem, 4px) round(nearest, 1.5rem, 4px); color: #fff; position: relative; overflow: hidden; }
.lh-wa-pillar--coral { background: linear-gradient(135deg, #E91E63, #FF7A1A); }
.lh-wa-pillar--teal { background: linear-gradient(135deg, #0D9488, #2BB3FF); }
.lh-wa-pillar--purple { background: linear-gradient(135deg, #6B2FA0, #B5179E); }
.lh-wa-pillar__icon { display: flex; width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.2); align-items: center; justify-content: center; margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-wa-pillar__icon svg { width: 30px; height: 30px; }
.lh-wa-pillar h3 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.25rem; margin: 0 0 .5rem; margin: 0 0 round(nearest, .5rem, 4px); }
.lh-wa-pillar p { font-size: .92rem; line-height: 1.55; opacity: .95; margin: 0; }

/* 2030 VISION */
.lh-wa-vision { margin: 3rem 0; margin: round(nearest, 3rem, 4px) 0; border-radius: 28px; overflow: hidden;
  background: radial-gradient(circle at 20% 10%, #6B2FA0, #2A0A52 70%); color: #fff; }
.lh-wa-vision__inner { max-width: 760px; margin: 0 auto; padding: 3rem 1.8rem; padding: round(nearest, 3rem, 4px) round(nearest, 1.8rem, 4px); text-align: center; position: relative; }
.lh-wa-vision__icon { display: inline-flex; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.12); align-items: center; justify-content: center; color: var(--lwh-yellow); margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-wa-vision__icon svg { width: 42px; height: 42px; }
.lh-wa-vision h2 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.2rem); margin: .1rem 0 .9rem; margin: round(nearest, .1rem, 4px) 0 round(nearest, .9rem, 4px); }
.lh-wa-vision p { color: rgba(255,255,255,.9); line-height: 1.7; max-width: 620px; margin: 0 auto 1rem; margin: 0 auto round(nearest, 1rem, 4px); }
.lh-wa-vision__stats { display: flex; justify-content: center; gap: 1.2rem; gap: round(nearest, 1.2rem, 4px); flex-wrap: wrap; margin: 1.6rem 0; margin: round(nearest, 1.6rem, 4px) 0; }
.lh-wa-vstat { background: rgba(255,255,255,.1); border-radius: 18px; padding: 1rem 1.4rem; padding: round(nearest, 1rem, 4px) round(nearest, 1.4rem, 4px); min-width: 150px; }
.lh-wa-vstat b { display: block; font-family: 'Fredoka', sans-serif; font-size: 1.9rem; color: var(--lwh-yellow); line-height: 1; }
.lh-wa-vstat span { font-size: .8rem; color: rgba(255,255,255,.82); font-weight: 700; }
.lh-wa-vision__regions { font-weight: 700; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .5rem; gap: round(nearest, .5rem, 4px); justify-content: center; align-items: center; margin-top: 1.4rem; margin-top: round(nearest, 1.4rem, 4px); }
.lh-wa-region { background: rgba(255,255,255,.14); border-radius: var(--lwh-radius-pill); padding: .3rem .8rem; padding: round(nearest, .3rem, 4px) round(nearest, .8rem, 4px); font-size: .82rem; }
.lh-wa-vision__src { font-size: .72rem !important; color: rgba(255,255,255,.55) !important; margin-top: 1.2rem !important; margin-top: round(nearest, 1.2rem, 4px) !important; }

/* CTA */
.lh-wa-cta { text-align: center; margin: 3rem 0 3.5rem; margin: round(nearest, 3rem, 4px) 0 round(nearest, 3.5rem, 4px); background: linear-gradient(120deg, #FF7A1A, #E91E63 55%, #9B4DFF); border-radius: 28px; padding: 2.6rem 1.8rem; padding: round(nearest, 2.6rem, 4px) round(nearest, 1.8rem, 4px); color: #fff; }
.lh-wa-cta__icon { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.2); align-items: center; justify-content: center; color: #fff; margin-bottom: .8rem; margin-bottom: round(nearest, .8rem, 4px); }
.lh-wa-cta__icon svg { width: 34px; height: 34px; }
.lh-wa-cta h2 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 .5rem; margin: 0 0 round(nearest, .5rem, 4px); }
.lh-wa-cta p { color: rgba(255,255,255,.94); font-weight: 600; max-width: 520px; margin: 0 auto 1.4rem; margin: 0 auto round(nearest, 1.4rem, 4px); line-height: 1.6; }
.lh-wa-cta__btns { display: flex; gap: .7rem; gap: round(nearest, .7rem, 4px); justify-content: center; flex-wrap: wrap; }
.lh-wa-btn { display: inline-flex; align-items: center; gap: .4rem; gap: round(nearest, .4rem, 4px); border-radius: var(--lwh-radius-pill); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.05rem; padding: .95rem 1.8rem; padding: round(nearest, .95rem, 4px) round(nearest, 1.8rem, 4px); text-decoration: none; transition: transform .15s, background .15s; }
.lh-wa-btn--gold { background: var(--lwh-yellow); color: var(--lwh-purple-dark); box-shadow: 0 6px 0 #d4a800; }
.lh-wa-btn--gold:hover { transform: translateY(-3px); }
.lh-wa-btn--gold:active { transform: translateY(2px); box-shadow: 0 2px 0 #d4a800; }
.lh-wa-btn--ghost { background: rgba(255,255,255,.16); color: #fff; border: 2px solid rgba(255,255,255,.42); }
.lh-wa-btn--ghost:hover { transform: translateY(-3px); background: rgba(255,255,255,.26); }

@media (max-width: 820px) {
  .lh-wa-founder { grid-template-columns: 1fr; gap: 1.6rem; gap: round(nearest, 1.6rem, 4px); text-align: center; }
  .lh-wa-founder__media { max-width: 240px; margin: 0 auto; }
  .lh-wa-quote { text-align: left; }
  .lh-wa-pillar-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lh-wa-blob, .lh-wa-float, .lh-wa-founder__chip { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   CATALOGUE SIDEBAR — "CONTROL DECK" (wildcard). Unified panel:
   conditional top box (welcome / free-views) → search → filter list.
   Sticky on desktop; slide-up modal on mobile (auto-applies live,
   closes only on ✕). Matches the wildcard catalogue.
   ════════════════════════════════════════════════════════════════ */

/* Deck panel — turn the sidebar into one cohesive card */
.lh-catalogue__sidebar {
  background: #fff; border: 0; border-radius: 22px;
  box-shadow: 0 14px 40px rgba(74,20,140,.10); overflow: hidden;
  display: flex; flex-direction: column; gap: 0; padding: 0;
}
/* Round the top box's upper corners to match the panel (belt-and-braces with
   the panel's overflow:hidden, so the coral/welcome header is never square). */
.lh-catalogue__sidebar > .lh-deck__top:first-child,
.lh-catalogue__sidebar > .lh-deck__top { border-top-left-radius: 22px; border-top-right-radius: 22px; }

/* TOP BOX (shared) */
.lh-deck__top { position: relative; overflow: hidden; padding: 1.1rem 1.15rem; padding: round(nearest, 1.1rem, 4px) round(nearest, 1.15rem, 4px); color: #fff; }
.lh-deck__blob { position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.13); top: -40px; right: -30px; }
.lh-deck__top--free { background: linear-gradient(135deg, var(--lwh-coral), #FF5C8A); }
.lh-deck__top--user { background: linear-gradient(135deg, var(--lwh-purple), #B5179E); }
/* override the legacy pill box so it sits flush as the deck header */
.lh-catalogue__sidebar-pill.lh-deck__top--free { margin: 0; border-radius: 22px 22px 0 0; text-align: left; font-weight: 700; }
.lh-catalogue__sidebar-pill.lh-deck__top--free a { color: #fff; text-decoration: underline; }

/* Welcome (logged-in) */
.lh-deck__welcome { display: flex; align-items: center; gap: .75rem; gap: round(nearest, .75rem, 4px); position: relative; z-index: 1; }
.lh-deck__avatar { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.2rem; }
.lh-deck__welcome-txt b { font-family: 'Fredoka', sans-serif; font-size: 1rem; display: block; line-height: 1.15; }
.lh-deck__welcome-txt span { font-size: .78rem; opacity: .9; }
.lh-deck__dash-btn { display: inline-flex; align-items: center; gap: .3rem; gap: round(nearest, .3rem, 4px); margin-top: .45rem; margin-top: round(nearest, .45rem, 4px); background: #fff; color: var(--lwh-purple-dark); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .8rem; padding: .4rem .8rem; padding: round(nearest, .4rem, 4px) round(nearest, .8rem, 4px); border-radius: var(--lwh-radius-pill); text-decoration: none; }
.lh-deck__dash-btn:hover { transform: translateY(-1px); }

/* SEARCH inside deck */
.lh-catalogue__search { display: flex; gap: .5rem; gap: round(nearest, .5rem, 4px); padding: .9rem 1.15rem; padding: round(nearest, .9rem, 4px) round(nearest, 1.15rem, 4px); border-bottom: 1px solid #F2EEF8; margin: 0; }
.lh-catalogue__search-input { flex: 1; border: 2px solid var(--lwh-border); border-radius: var(--lwh-radius-pill); padding: .6rem .9rem; padding: round(nearest, .6rem, 4px) round(nearest, .9rem, 4px); font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .88rem; outline: none; transition: border-color .15s; }
.lh-catalogue__search-input:focus { border-color: var(--lwh-coral); }
.lh-catalogue__search-btn { width: 42px; height: 42px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--lwh-coral); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .9rem; }

/* FILTER ROWS — unified list with hairline dividers */
.lh-catalogue__filterblock { margin: 0; border-top: 1px solid #F2EEF8; }
.lh-filterdrop { border: 0; border-radius: 0; overflow: hidden; }
.lh-filterdrop__summary { display: flex; align-items: center; gap: .65rem; gap: round(nearest, .65rem, 4px); padding: .72rem 1.15rem; padding: round(nearest, .72rem, 4px) round(nearest, 1.15rem, 4px); cursor: pointer; list-style: none; }
.lh-filterdrop__summary::-webkit-details-marker { display: none; }
.lh-filterdrop__ic { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; background: var(--lwh-coral-light); color: var(--lwh-coral); display: flex; align-items: center; justify-content: center; }
.lh-filterdrop__ic svg { width: 15px; height: 15px; }
/* Playful per-filter icon-tile colours (keyed by data-lh-filterblock) so the
   sidebar reads as colourful and varied, echoing the colour-coded cards —
   not an all-pink panel. */
.lh-catalogue__filterblock[data-lh-filterblock="subject"]  .lh-filterdrop__ic { background:#FCE7F0; color:#E91E63; } /* coral */
.lh-catalogue__filterblock[data-lh-filterblock="stage"]    .lh-filterdrop__ic { background:#E7F4FF; color:#2B7FD4; } /* sky */
.lh-catalogue__filterblock[data-lh-filterblock="year"]     .lh-filterdrop__ic { background:#E9FBF3; color:#0D9488; } /* teal */
.lh-catalogue__filterblock[data-lh-filterblock="type"]     .lh-filterdrop__ic { background:#F3EAFF; color:#7A2FA0; } /* purple */
.lh-catalogue__filterblock[data-lh-filterblock="tier"]     .lh-filterdrop__ic { background:#FFF1E0; color:#E8590C; } /* tangerine */
.lh-catalogue__filterblock[data-lh-filterblock="audience"] .lh-filterdrop__ic { background:#FFF6D6; color:#B58A00; } /* gold */
.lh-catalogue__filterblock[data-lh-filterblock="duration"] .lh-filterdrop__ic { background:#E7F4FF; color:#185FA5; } /* deep sky */
.lh-catalogue__filterblock[data-lh-filterblock="segment"]  .lh-filterdrop__ic { background:#F9E3F2; color:#B5179E; } /* magenta */
.lh-filterdrop__label { flex: 1; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .9rem; }
/* Option 1 value treatment: plain grey text by default (no oval); a solid
   coral pill ONLY when the filter is active (.is-set). */
.lh-filterdrop__count { font-size: .76rem; font-weight: 700; color: var(--lwh-grey); white-space: nowrap; background: none; padding: 0; border-radius: 0; min-width: 0; }
.lh-filterdrop.is-set .lh-filterdrop__count { color: #fff; background: var(--lwh-coral); padding: .14rem .55rem; padding: round(nearest, .14rem, 4px) round(nearest, .55rem, 4px); border-radius: var(--lwh-radius-pill); font-size: .72rem; }
.lh-filterdrop__caret { width: 16px; height: 16px; flex: 0 0 auto; color: var(--lwh-grey); transition: transform .2s; display: flex; }
.lh-filterdrop__caret svg { width: 16px; height: 16px; }
.lh-filterdrop[open] .lh-filterdrop__caret { transform: rotate(180deg); color: var(--lwh-coral); }
.lh-filterdrop[open] { background: #FFF8FB; }
.lh-filterdrop__body { padding: 0 1.15rem .6rem 3.5rem; padding: 0 round(nearest, 1.15rem, 4px) round(nearest, .6rem, 4px) round(nearest, 3.5rem, 4px); max-height: 240px; overflow-y: auto; }
.lh-filterdrop__option { display: flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); padding: .35rem .2rem; padding: round(nearest, .35rem, 4px) round(nearest, .2rem, 4px); font-size: .85rem; font-weight: 700; cursor: pointer; border-radius: 7px; }
.lh-filterdrop__option:hover { background: transparent; color: var(--lwh-coral); }
.lh-filterdrop__option input { width: 16px; height: 16px; accent-color: var(--lwh-coral); }

/* Clear-all + updated-daily inside the deck */
.lh-catalogue__clear { padding: .6rem 1.15rem; padding: round(nearest, .6rem, 4px) round(nearest, 1.15rem, 4px); text-align: right; }

/* DESKTOP STICKY (matches the 2-column layout breakpoint) */
@media (min-width: 960px) {
  .lh-catalogue__sidebar { position: sticky; top: 1rem; max-height: calc(100vh - 2rem);max-height: calc(100dvh - 2rem); overflow-y: auto; align-self: start; }
  .lh-catalogue__sidebar::-webkit-scrollbar { width: 6px; }
  .lh-catalogue__sidebar::-webkit-scrollbar-thumb { background: #E0D8EE; border-radius: 99px; }
  .lh-catalogue__drawer-head { display: none; } /* no drawer header on desktop */
}

/* ── MOBILE/TABLET: slide-up filter MODAL (auto-applies live, ✕-only close) ── */
@media (max-width: 959px) {
  .lh-catalogue__sidebar {
    position: fixed; inset: 0; width: 100%; height: 100%; z-index: 10000;
    border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.25);
    transform: translateY(100%); transition: transform .32s cubic-bezier(.34,1.4,.6,1);
    top: auto; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column;
  }
  .lh-catalogue.is-filter-open .lh-catalogue__sidebar { transform: translateY(0); }
  /* dim backdrop */
  .lh-catalogue.is-filter-open::before { content: ""; position: fixed; inset: 0; background: rgba(26,20,48,.45); z-index: 9999; }
  /* modal header with ✕ + live indicator */
  .lh-catalogue__drawer-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; gap: round(nearest, .6rem, 4px); padding: 1rem 1.1rem .7rem; padding: round(nearest, 1rem, 4px) round(nearest, 1.1rem, 4px) round(nearest, .7rem, 4px); border-bottom: 1px solid #F2EEF8; flex: 0 0 auto; }
  .lh-catalogue__drawer-title { font-family: 'Fredoka', sans-serif; font-size: 1.05rem; margin: 0; font-weight: 700; }
  .lh-catalogue__drawer-title::after { content: " · Updating live"; color: var(--lwh-success, #22A565); font-size: .72rem; font-weight: 800; }
  .lh-catalogue__drawer-close { width: 34px; height: 34px; border-radius: 50%; background: var(--lwh-bg, #F6F4FB); border: 0; cursor: pointer; font-size: 1rem; color: var(--lwh-ink); display: flex; align-items: center; justify-content: center; }
  /* top box + search hidden inside the modal (they live on the page bar instead) */
  .lh-catalogue__sidebar .lh-deck__top,
  .lh-catalogue__sidebar .lh-catalogue__search { display: none; }
  /* scrollable filter area + sticky footer */
  .lh-catalogue__sidebar > .lh-catalogue__filterblock,
  .lh-catalogue__sidebar > .lh-catalogue__clear { flex: 0 0 auto; }
  .lh-catalogue__filterwrap { overflow-y: auto; flex: 1; }
}

/* Free-resources page: give the catalogue room to breathe on desktop —
   wider overall width (set above) plus a slightly wider sidebar column so
   neither the filters nor the card grid feel squashed. */
@media (min-width: 1025px) {
  .lh-fr-catalogue .lh-catalogue__layout { grid-template-columns: 290px 1fr; gap: 1.75rem; gap: round(nearest, 1.75rem, 4px); }
}

/* ============================================================
   Sprint 40 — Dashboard system
   Shared gamification components (rank, badges, RAG) + the three
   role dashboards. Student is playful and theme-aware; teacher and
   parent are credible and data-dense.
   ============================================================ */

/* ---- Shared: rank chip / badge ---- */
.lh-rank-chip { display:inline-flex; align-items:center; gap:.35rem; gap:round(nearest, .35rem, 4px); padding:.2rem .6rem; padding:round(nearest, .2rem, 4px) round(nearest, .6rem, 4px); border-radius:var(--lwh-radius-pill); background:color-mix(in srgb, var(--rank-color,#E91E63) 14%, #fff); border:1.5px solid var(--rank-color,#E91E63); font-weight:800; font-size:.8rem; color:var(--lwh-ink); }
.lh-rank-chip__icon { font-size:.95rem; }
.lh-rank-badge { display:inline-flex; align-items:center; gap:.45rem; gap:round(nearest, .45rem, 4px); padding:.35rem .85rem; padding:round(nearest, .35rem, 4px) round(nearest, .85rem, 4px); border-radius:var(--lwh-radius-pill); background:linear-gradient(135deg, color-mix(in srgb, var(--rank-color,#E91E63) 22%, #fff), #fff); border:2px solid var(--rank-color,#E91E63); font-family:'Fredoka',sans-serif; font-weight:700; box-shadow:0 4px 14px color-mix(in srgb, var(--rank-color,#E91E63) 25%, transparent); }
.lh-rank-badge__icon { font-size:1.25rem; }
.lh-rank-badge__name { color:var(--lwh-ink); letter-spacing:.2px; }

/* ---- Shared: RAG traffic lights ---- */
.lh-rag { display:inline-block; width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(0,0,0,.08); }
.lh-rag--red { background:#EF4444; }
.lh-rag--amber { background:#F59E0B; }
.lh-rag--green { background:#22C55E; }
.lh-rag--none { background:#E5E7EB; }

/* ============================================================
   STUDENT DASHBOARD — playful, theme-aware
   Accent driven by --lh-dash-accent (student-chosen), tint by --lh-dash-tint.
   ============================================================ */
.lh-sdash { --lh-dash-accent:#E91E63; --lh-dash-tint:#FCE4EC; max-width:var(--lwh-container); margin:0 auto; padding:1.25rem 0 3rem; padding:round(nearest, 1.25rem, 4px) 0 round(nearest, 3rem, 4px); }

/* Hero */
.lh-sdash__hero { position:relative; border-radius:24px; overflow:hidden; padding:1.6rem 1.6rem 1.2rem; padding:round(nearest, 1.6rem, 4px) round(nearest, 1.6rem, 4px) round(nearest, 1.2rem, 4px); margin-bottom:1.25rem; margin-bottom:round(nearest, 1.25rem, 4px); background:#fff; border:1px solid var(--lwh-border); box-shadow:var(--lwh-shadow-md); }
.lh-sdash__hero-bg { position:absolute; inset:0; background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--lh-dash-accent) 28%, #fff) 0%, var(--lh-dash-tint) 45%, #fff 80%); z-index:0; }
.lh-sdash__hero-bg::after { content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--lh-dash-accent) 18%, transparent) 0 12px, transparent 13px), radial-gradient(circle at 70% 75%, color-mix(in srgb, var(--lh-dash-accent) 12%, transparent) 0 8px, transparent 9px); opacity:.6; }
.lh-sdash__hero-inner { position:relative; z-index:1; display:flex; align-items:center; gap:1.1rem; gap:round(nearest, 1.1rem, 4px); flex-wrap:wrap; }
.lh-sdash__hero-avatar img, .lh-sdash__hero-avatar .lh-avatar { border:4px solid #fff; border-radius:50%; box-shadow:var(--lwh-shadow-md); }
.lh-sdash__hero-id { flex:1; min-width:200px; }
.lh-sdash__hello { font-size:1.7rem; margin:0 0 .35rem; margin:0 0 round(nearest, .35rem, 4px); color:var(--lwh-ink); }
.lh-sdash__rankline { display:flex; align-items:center; gap:.6rem; gap:round(nearest, .6rem, 4px); flex-wrap:wrap; }
.lh-sdash__points { font-weight:800; color:var(--lh-dash-accent); font-size:.95rem; }
.lh-sdash__blurb { margin:.5rem 0 0; margin:round(nearest, .5rem, 4px) 0 0; color:var(--lwh-ink-soft); font-weight:600; font-size:.9rem; }
.lh-sdash__hero-actions { display:flex; gap:.5rem; gap:round(nearest, .5rem, 4px); }
.lh-sdash__rankprog { position:relative; z-index:1; margin-top:1.1rem; margin-top:round(nearest, 1.1rem, 4px); }
.lh-sdash__rankprog-bar { height:12px; border-radius:999px; background:rgba(255,255,255,.7); overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.1); }
.lh-sdash__rankprog-fill { height:100%; border-radius:999px; background:linear-gradient(90deg, var(--lh-dash-accent), color-mix(in srgb, var(--lh-dash-accent) 55%, #FFD700)); transition:width .6s cubic-bezier(.2,.8,.2,1); }
.lh-sdash__rankprog-label { display:block; margin-top:.4rem; margin-top:round(nearest, .4rem, 4px); font-size:.8rem; font-weight:700; color:var(--lwh-ink-soft); }

/* Trackers */
.lh-sdash__trackers { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.85rem; gap:round(nearest, .85rem, 4px); margin-bottom:1.6rem; margin-bottom:round(nearest, 1.6rem, 4px); }
.lh-tracker { background:#fff; border:1.5px solid var(--lwh-border); border-radius:18px; padding:1rem .75rem; padding:round(nearest, 1rem, 4px) round(nearest, .75rem, 4px); text-align:center; transition:transform .15s, box-shadow .15s; }
.lh-tracker:hover { transform:translateY(-3px); box-shadow:var(--lwh-shadow-md); }
.lh-tracker__icon { font-size:1.7rem; display:block; }
.lh-tracker__num { display:block; font-family:'Fredoka',sans-serif; font-size:1.7rem; font-weight:700; color:var(--lh-dash-accent); line-height:1.1; }
.lh-tracker__label { font-size:.78rem; font-weight:700; color:var(--lwh-grey); }

/* Sections */
.lh-sdash__section { margin-bottom:1.8rem; margin-bottom:round(nearest, 1.8rem, 4px); }
.lh-sdash__h2 { font-size:1.2rem; margin:0 0 .9rem; margin:0 0 round(nearest, .9rem, 4px); }
.lh-sdash__hint { color:var(--lwh-grey); font-size:.85rem; margin:-.5rem 0 .9rem; margin:round(nearest, -.5rem, 4px) 0 round(nearest, .9rem, 4px); }
.lh-sdash__empty { text-align:center; padding:2.2rem; padding:round(nearest, 2.2rem, 4px); color:var(--lwh-grey); }
.lh-sdash__empty p { margin:.4rem 0 0; margin:round(nearest, .4rem, 4px) 0 0; }

/* Rewards */

/* Badge wall */
.lh-badgewall { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:1rem; gap:round(nearest, 1rem, 4px); }
.lh-badge { display:flex; flex-direction:column; align-items:center; gap:.45rem; gap:round(nearest, .45rem, 4px); text-align:center; }
.lh-badge__disc { position:relative; width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--badge-color,#FFD700) 35%, #fff)); border:3px solid var(--badge-color,#FFD700); box-shadow:0 6px 16px color-mix(in srgb, var(--badge-color,#FFD700) 35%, transparent); transition:transform .15s; }
.lh-badge:hover .lh-badge__disc { transform:rotate(-6deg) scale(1.06); }
.lh-badge__icon { font-size:2rem; }
.lh-badge__count { position:absolute; right:-6px; bottom:-6px; min-width:24px; height:24px; padding:0 5px; padding:0 4px; border-radius:999px; background:var(--lwh-ink); color:#fff; font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.lh-badge__label { font-size:.74rem; font-weight:700; color:var(--lwh-ink-soft); line-height:1.15; }

/* Student assignment shelf */
.lh-student-shelf { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.85rem; gap:round(nearest, .85rem, 4px); }
.lh-task-card { position:relative; display:flex; flex-direction:column; gap:.5rem; gap:round(nearest, .5rem, 4px); padding:1rem; padding:round(nearest, 1rem, 4px); border-radius:18px; background:#fff; border:1.5px solid var(--lwh-border); text-decoration:none; color:var(--lwh-ink); transition:transform .15s, box-shadow .15s, border-color .15s; }
.lh-task-card:hover { transform:translateY(-3px); box-shadow:var(--lwh-shadow-md); border-color:var(--lh-dash-accent); }
.lh-task-card__icon { font-size:1.8rem; }
.lh-task-card__title { font-weight:700; font-size:.92rem; line-height:1.25; }
.lh-task-card__reward { font-size:.74rem; font-weight:800; color:var(--lwh-purple); }
.lh-task-card__badge { align-self:flex-start; font-size:.74rem; font-weight:800; padding:.2rem .55rem; padding:round(nearest, .2rem, 4px) round(nearest, .55rem, 4px); border-radius:999px; background:#ECFDF5; color:var(--lwh-success); }
.lh-task-card__badge--todo { background:color-mix(in srgb, var(--lh-dash-accent) 14%, #fff); color:var(--lh-dash-accent); }
.lh-task-card--done { opacity:.7; }

/* Report cards (student read-only) */
.lh-reportlist { display:flex; flex-direction:column; gap:.85rem; gap:round(nearest, .85rem, 4px); }
.lh-report { border-radius:16px; background:#fff; border:1.5px solid var(--lwh-border); border-left-width:6px; padding:1rem 1.1rem; padding:round(nearest, 1rem, 4px) round(nearest, 1.1rem, 4px); }
.lh-report--green { border-left-color:#22C55E; }
.lh-report--amber { border-left-color:#F59E0B; }
.lh-report--red { border-left-color:#EF4444; }
.lh-report__head { display:flex; align-items:center; gap:.55rem; gap:round(nearest, .55rem, 4px); margin-bottom:.4rem; margin-bottom:round(nearest, .4rem, 4px); }
.lh-report__by { color:var(--lwh-grey); font-size:.8rem; font-weight:600; }
.lh-report__notes { font-size:.9rem; color:var(--lwh-ink-soft); }
.lh-report__notes p { margin:.3rem 0; margin:round(nearest, .3rem, 4px) 0; }

/* Theme picker */
.lh-themepicker { display:flex; flex-wrap:wrap; gap:.6rem; gap:round(nearest, .6rem, 4px); }
.lh-themepicker__swatch { width:42px; height:42px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1.5px var(--lwh-border); cursor:pointer; transition:transform .12s, box-shadow .12s; }
.lh-themepicker__swatch:hover { transform:scale(1.1); }
.lh-themepicker__swatch.is-active { box-shadow:0 0 0 3px var(--lwh-ink); transform:scale(1.1); }

/* ============================================================
   TEACHER + PARENT DASHBOARDS — credible, data-dense, calm
   Reuses shared .lh-rank-chip / .lh-rag / .lh-progress.
   ============================================================ */
.lh-tdash, .lh-pdash { max-width:var(--lwh-container); margin:0 auto; padding:1.25rem 0 3rem; padding:round(nearest, 1.25rem, 4px) 0 round(nearest, 3rem, 4px); }

/* Header */
.lh-tdash__head, .lh-pdash__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; gap:round(nearest, 1rem, 4px); flex-wrap:wrap; margin-bottom:1.25rem; margin-bottom:round(nearest, 1.25rem, 4px); }
.lh-tdash__head-id, .lh-pdash__head-id { display:flex; align-items:center; gap:.8rem; gap:round(nearest, .8rem, 4px); }
.lh-tdash__head-id img, .lh-pdash__head-id img, .lh-tdash__head-id .lh-avatar, .lh-pdash__head-id .lh-avatar { border-radius:50%; border:3px solid #fff; box-shadow:var(--lwh-shadow-sm); }
.lh-tdash__h1, .lh-pdash__h1 { font-size:1.5rem; margin:0; }
.lh-tdash__sub, .lh-pdash__sub { margin:.15rem 0 0; margin:round(nearest, .15rem, 4px) 0 0; color:var(--lwh-grey); font-size:.86rem; font-weight:600; }
.lh-tdash__head-actions, .lh-pdash__head-actions { display:flex; gap:.5rem; gap:round(nearest, .5rem, 4px); }

/* KPI strip */
.lh-tdash__kpis, .lh-pdash__kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.85rem; gap:round(nearest, .85rem, 4px); margin-bottom:1.6rem; margin-bottom:round(nearest, 1.6rem, 4px); }
.lh-kpi { background:#fff; border:1px solid var(--lwh-border); border-radius:16px; padding:1rem 1.1rem; padding:round(nearest, 1rem, 4px) round(nearest, 1.1rem, 4px); box-shadow:var(--lwh-shadow-sm); }
.lh-kpi__label { display:block; font-size:.74rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--lwh-grey); }
.lh-kpi__num { display:block; font-family:'Fredoka',sans-serif; font-size:1.9rem; font-weight:700; color:var(--lwh-ink); line-height:1.1; }
.lh-kpi__num--sm { font-size:1.25rem; }
.lh-kpi__of { font-size:.95rem; color:var(--lwh-grey); font-weight:600; }

/* Panels */
.lh-tdash__panel, .lh-pdash__panel { margin-bottom:1.6rem; margin-bottom:round(nearest, 1.6rem, 4px); }
.lh-tdash__panel-head, .lh-pdash__panel-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; gap:round(nearest, .75rem, 4px); margin-bottom:.75rem; margin-bottom:round(nearest, .75rem, 4px); flex-wrap:wrap; }
.lh-tdash__h2, .lh-pdash__h2 { font-size:1.15rem; margin:0 0 .75rem; margin:0 0 round(nearest, .75rem, 4px); }
.lh-tdash__panel-head .lh-tdash__h2 { margin:0; }
.lh-tdash__hint, .lh-pdash__hint { color:var(--lwh-grey); font-size:.84rem; }
.lh-tdash__empty, .lh-pdash__empty { text-align:center; padding:2rem; padding:round(nearest, 2rem, 4px); color:var(--lwh-grey); }

/* Roster table */
.lh-tdash__tablewrap { padding:0; overflow:hidden; }
.lh-tdash__roster { width:100%; border-collapse:collapse; font-size:.9rem; }
.lh-tdash__roster thead th { text-align:left; padding:.85rem 1rem; padding:round(nearest, .85rem, 4px) round(nearest, 1rem, 4px); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--lwh-grey); border-bottom:2px solid var(--lwh-border); background:var(--lwh-bg,#F8F6FC); }
.lh-tdash__roster tbody td { padding:.8rem 1rem; padding:round(nearest, .8rem, 4px) round(nearest, 1rem, 4px); border-bottom:1px solid var(--lwh-border); vertical-align:middle; }
.lh-tdash__roster tbody tr:last-child td { border-bottom:0; }
.lh-tdash__roster tbody tr:hover { background:color-mix(in srgb, var(--lwh-purple) 4%, #fff); }
.lh-tdash__student { display:inline-flex; align-items:center; gap:.55rem; gap:round(nearest, .55rem, 4px); }
.lh-tdash__student img, .lh-tdash__student .lh-avatar { border-radius:50%; }
.lh-tdash__badgecount { font-weight:700; }
.lh-tdash__pct { font-size:.78rem; font-weight:700; color:var(--lwh-grey); margin-left:.4rem; margin-left:round(nearest, .4rem, 4px); }

/* Shared progress bar */
.lh-progress { display:inline-block; vertical-align:middle; width:90px; height:8px; border-radius:999px; background:var(--lwh-border); overflow:hidden; }
.lh-progress__bar { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--lwh-teal,#0D9488),var(--lwh-purple,#6B2FA0)); transition:width .5s; }

/* Toggle switch */
.lh-toggle { display:inline-flex; align-items:center; gap:.5rem; gap:round(nearest, .5rem, 4px); cursor:pointer; font-weight:700; font-size:.85rem; user-select:none; }
.lh-toggle input { position:absolute; opacity:0; }
.lh-toggle__track { width:42px; height:24px; border-radius:999px; background:var(--lwh-border); position:relative; transition:background .2s; }
.lh-toggle__thumb { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.lh-toggle input:checked + .lh-toggle__track { background:var(--lwh-teal,#0D9488); }
.lh-toggle input:checked + .lh-toggle__track .lh-toggle__thumb { transform:translateX(18px); }

/* Attendance */
.lh-tdash__attendance { padding:1.1rem 1.2rem; padding:round(nearest, 1.1rem, 4px) round(nearest, 1.2rem, 4px); }
.lh-attlist { display:flex; flex-direction:column; gap:.55rem; gap:round(nearest, .55rem, 4px); margin-top:.6rem; margin-top:round(nearest, .6rem, 4px); }
.lh-attrow { display:flex; align-items:center; justify-content:space-between; gap:.75rem; gap:round(nearest, .75rem, 4px); padding:.55rem .7rem; padding:round(nearest, .55rem, 4px) round(nearest, .7rem, 4px); border:1px solid var(--lwh-border); border-radius:12px; }
.lh-attrow__name { font-weight:700; font-size:.9rem; }
.lh-attrow__opts { display:flex; gap:.3rem; gap:round(nearest, .3rem, 4px); }
.lh-attbtn { width:36px; height:36px; border-radius:10px; border:1.5px solid var(--lwh-border); background:#fff; cursor:pointer; font-size:1rem; line-height:1; transition:transform .12s, border-color .12s, background .12s; filter:grayscale(.4); opacity:.7; }
.lh-attbtn:hover { transform:translateY(-2px); }
.lh-attbtn.is-active { filter:none; opacity:1; border-width:2px; }
.lh-attbtn--present.is-active { border-color:#22C55E; background:#ECFDF5; }
.lh-attbtn--late.is-active { border-color:#F59E0B; background:#FFFBEB; }
.lh-attbtn--excused.is-active { border-color:#3B82F6; background:#EFF6FF; }
.lh-attbtn--absent.is-active { border-color:#EF4444; background:#FEF2F2; }

/* Guide */
.lh-guide { background:#fff; border:1px solid var(--lwh-border); border-radius:16px; overflow:hidden; }
.lh-guide__summary { cursor:pointer; padding:1rem 1.2rem; padding:round(nearest, 1rem, 4px) round(nearest, 1.2rem, 4px); font-weight:700; list-style:none; }
.lh-guide__summary::-webkit-details-marker { display:none; }
.lh-guide[open] .lh-guide__summary { border-bottom:1px solid var(--lwh-border); }
.lh-guide__body { padding:1rem 1.2rem; padding:round(nearest, 1rem, 4px) round(nearest, 1.2rem, 4px); color:var(--lwh-ink-soft); font-size:.9rem; }
.lh-guide__body ul { margin:.6rem 0 0; margin:round(nearest, .6rem, 4px) 0 0; padding-left:1.1rem; padding-left:round(nearest, 1.1rem, 4px); }
.lh-guide__body li { margin:.35rem 0; margin:round(nearest, .35rem, 4px) 0; }

/* Parent child cards */
.lh-childgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; gap:round(nearest, 1rem, 4px); }
.lh-childcard { background:#fff; border:1px solid var(--lwh-border); border-radius:18px; padding:1.1rem; padding:round(nearest, 1.1rem, 4px); box-shadow:var(--lwh-shadow-sm); display:flex; flex-direction:column; gap:.7rem; gap:round(nearest, .7rem, 4px); }
.lh-childcard__head { display:flex; align-items:center; gap:.6rem; gap:round(nearest, .6rem, 4px); }
.lh-childcard__head img, .lh-childcard__head .lh-avatar { border-radius:50%; }
.lh-childcard__name { display:block; font-size:1.02rem; }
.lh-childcard__id { display:flex; flex-direction:column; gap:.25rem; gap:round(nearest, .25rem, 4px); }
.lh-childcard__stats { display:flex; justify-content:space-between; gap:.5rem; gap:round(nearest, .5rem, 4px); text-align:center; }
.lh-childcard__num { display:block; font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.05rem; }
.lh-childcard__lbl { font-size:.72rem; color:var(--lwh-grey); }
.lh-childcard__nextrank { font-size:.78rem; font-weight:700; color:var(--lwh-grey); }
.lh-childcard .lh-progress { width:100%; }

/* ============================================================
   REVIEW MODAL — shared by teacher + parent
   ============================================================ */
.lh-reviewmodal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:1rem; padding:round(nearest, 1rem, 4px); background:rgba(20,12,40,.55); backdrop-filter:blur(3px); }
.lh-reviewmodal[hidden] { display:none; }
.lh-reviewmodal__card { background:#fff; border-radius:22px; width:100%; max-width:560px; max-height:90vh; overflow:auto; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.lh-reviewmodal__head { display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.4rem; padding:round(nearest, 1.2rem, 4px) round(nearest, 1.4rem, 4px); border-bottom:1px solid var(--lwh-border); position:sticky; top:0; background:#fff; }
.lh-reviewmodal__head h3 { margin:0; font-size:1.2rem; }
.lh-reviewmodal__close { border:0; background:var(--lwh-bg,#F6F4FB); width:34px; height:34px; border-radius:50%; font-size:1.3rem; cursor:pointer; line-height:1; color:var(--lwh-ink); }
.lh-reviewmodal__body { padding:1.2rem 1.4rem; padding:round(nearest, 1.2rem, 4px) round(nearest, 1.4rem, 4px); display:flex; flex-direction:column; gap:1.1rem; gap:round(nearest, 1.1rem, 4px); }
.lh-reviewmodal__controls { display:flex; gap:.8rem; gap:round(nearest, .8rem, 4px); flex-wrap:wrap; }
.lh-reviewmodal__controls label { display:flex; flex-direction:column; gap:.3rem; gap:round(nearest, .3rem, 4px); font-size:.78rem; font-weight:700; color:var(--lwh-grey); }
.lh-reviewmodal__controls select, .lh-reviewmodal__controls input { padding:.5rem .6rem; padding:round(nearest, .5rem, 4px) round(nearest, .6rem, 4px); border:1.5px solid var(--lwh-border); border-radius:10px; font-size:.9rem; font-family:inherit; }

/* KPI insight panel */
.lh-reviewmodal__kpis { display:flex; flex-wrap:wrap; gap:.6rem; gap:round(nearest, .6rem, 4px); background:var(--lwh-bg,#F8F6FC); border-radius:14px; padding:.9rem; padding:round(nearest, .9rem, 4px); }
.lh-revkpi { flex:1 1 80px; text-align:center; }
.lh-revkpi span { font-size:1.2rem; display:block; }
.lh-revkpi strong { display:block; font-family:'Fredoka',sans-serif; font-size:1.05rem; }
.lh-revkpi em { font-style:normal; font-size:.68rem; color:var(--lwh-grey); }
.lh-revkpi__note { flex-basis:100%; margin:.3rem 0 0; margin:round(nearest, .3rem, 4px) 0 0; font-size:.74rem; color:var(--lwh-grey); font-style:italic; text-align:center; }

/* RAG section rows */
.lh-reviewmodal__sections { display:flex; flex-direction:column; gap:.5rem; gap:round(nearest, .5rem, 4px); }
.lh-ragrow { display:flex; align-items:center; justify-content:space-between; gap:1rem; gap:round(nearest, 1rem, 4px); padding:.65rem .2rem; padding:round(nearest, .65rem, 4px) round(nearest, .2rem, 4px); border-bottom:1px dashed var(--lwh-border); }
.lh-ragrow__info strong { display:block; font-size:.92rem; }
.lh-ragrow__help { font-size:.74rem; color:var(--lwh-grey); }
.lh-ragrow__lights { display:flex; gap:.4rem; gap:round(nearest, .4rem, 4px); flex-shrink:0; }
.lh-raglight { width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; opacity:.35; transition:opacity .15s, transform .12s, box-shadow .15s; }
.lh-raglight:hover { transform:scale(1.12); }
.lh-raglight--red { background:#EF4444; }
.lh-raglight--amber { background:#F59E0B; }
.lh-raglight--green { background:#22C55E; }
.lh-raglight.is-active { opacity:1; box-shadow:0 0 0 3px #fff, 0 0 0 5px currentColor; }
.lh-raglight--red.is-active { color:#EF4444; }
.lh-raglight--amber.is-active { color:#F59E0B; }
.lh-raglight--green.is-active { color:#22C55E; }
.lh-reviewmodal__overall { display:flex; align-items:center; justify-content:space-between; gap:1rem; gap:round(nearest, 1rem, 4px); padding:.85rem 1rem; padding:round(nearest, .85rem, 4px) round(nearest, 1rem, 4px); background:color-mix(in srgb, var(--lwh-purple) 6%, #fff); border-radius:14px; }
.lh-reviewmodal__foot { display:flex; align-items:center; justify-content:flex-end; gap:1rem; gap:round(nearest, 1rem, 4px); padding:1.1rem 1.4rem; padding:round(nearest, 1.1rem, 4px) round(nearest, 1.4rem, 4px); border-top:1px solid var(--lwh-border); position:sticky; bottom:0; background:#fff; }
.lh-reviewmodal__status { font-size:.84rem; font-weight:700; color:var(--lwh-success); margin-right:auto; }

/* Resource page reward box */
.lh-rp-meta__box--reward { background:linear-gradient(135deg,#FFF8E1,#fff); border-color:#FFE08A; }
.lh-rp-reward__badges { display:inline-flex; gap:.25rem; gap:round(nearest, .25rem, 4px); vertical-align:middle; }
.lh-rp-reward__badge { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#fff; border:2px solid var(--badge-color,#FFD700); font-size:1rem; }
.lh-rp-reward__pts { display:inline-block; margin-left:.4rem; margin-left:round(nearest, .4rem, 4px); font-weight:800; color:var(--lwh-purple); vertical-align:middle; }

/* Small button sizes */
.lh-btn--xs { padding:.3rem .7rem; padding:round(nearest, .3rem, 4px) round(nearest, .7rem, 4px); font-size:.78rem; }

/* Mobile */
@media (max-width:640px){
	.lh-tdash__roster { font-size:.82rem; }
	.lh-tdash__roster thead th:nth-child(4), .lh-tdash__roster tbody td:nth-child(4),
	.lh-tdash__roster thead th:nth-child(5), .lh-tdash__roster tbody td:nth-child(5) { display:none; }
	.lh-ragrow { flex-direction:column; align-items:flex-start; gap:.5rem; gap:round(nearest, .5rem, 4px); }
}

/* ============================================================
   Sprint 41 — Control panel (teacher + parent shared)
   ============================================================ */
.lh-cp { max-width: var(--lwh-container); margin: 0 auto; padding: 1.25rem 0 3rem; padding: round(nearest, 1.25rem, 4px) 0 round(nearest, 3rem, 4px); }

/* Header */
.lh-cp__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; gap:round(nearest, 1rem, 4px); flex-wrap:wrap; margin-bottom:1rem; margin-bottom:round(nearest, 1rem, 4px); }
.lh-cp__head-id { display:flex; align-items:center; gap:.8rem; gap:round(nearest, .8rem, 4px); }
.lh-cp__head-id img, .lh-cp__head-id .lh-avatar { border-radius:50%; border:3px solid #fff; box-shadow:var(--lwh-shadow-sm); }
.lh-cp__h1 { font-size:1.5rem; margin:0; }
.lh-cp__sub { margin:.15rem 0 0; margin:round(nearest, .15rem, 4px) 0 0; color:var(--lwh-grey); font-size:.86rem; font-weight:600; }
.lh-cp__head-actions { display:flex; gap:.5rem; gap:round(nearest, .5rem, 4px); flex-wrap:wrap; }
.lh-cp__h2 { font-size:1.15rem; margin:0; }
.lh-cp__hint { color:var(--lwh-grey); font-size:.84rem; }
.lh-cp__empty { text-align:center; padding:2rem; padding:round(nearest, 2rem, 4px); color:var(--lwh-grey); }

/* Settings menu */
.lh-cp__settings { position:fixed; inset:0; z-index:10002; display:flex; align-items:flex-start; justify-content:center; padding:5rem 1rem 1rem; padding:round(nearest, 5rem, 4px) round(nearest, 1rem, 4px) round(nearest, 1rem, 4px); background:rgba(20,12,40,.5); backdrop-filter:blur(3px); }
.lh-cp__settings[hidden] { display:none !important; }
.lh-cp__settings-card { background:#fff; border-radius:18px; width:100%; max-width:420px; box-shadow:var(--lwh-shadow-lg); overflow:hidden; }
.lh-cp__settings-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem; padding:round(nearest, 1rem, 4px) round(nearest, 1.2rem, 4px); border-bottom:1px solid var(--lwh-border); }
.lh-cp__settings-head strong { font-size:1.05rem; }
.lh-cp__settings-close { border:0; background:var(--lwh-bg,#F6F4FB); width:32px; height:32px; border-radius:50%; font-size:1.2rem; cursor:pointer; line-height:1; }
.lh-cp__settings .lh-cp__hint { padding:.75rem 1.2rem 0; padding:round(nearest, .75rem, 4px) round(nearest, 1.2rem, 4px) 0; }
.lh-cp__settings-list { padding:.5rem 1.2rem 1.2rem; padding:round(nearest, .5rem, 4px) round(nearest, 1.2rem, 4px) round(nearest, 1.2rem, 4px); }
.lh-cp__settings-row { display:flex; align-items:center; justify-content:space-between; padding:.65rem 0; padding:round(nearest, .65rem, 4px) 0; border-bottom:1px dashed var(--lwh-border); font-weight:600; }
.lh-cp__settings-row:last-child { border-bottom:0; }
.lh-cp__settings-row.is-locked { opacity:.55; }
.lh-cp__settings-row input { width:20px; height:20px; accent-color:var(--lwh-purple,#6B2FA0); }

/* Focus bar */
.lh-cp__focusbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; gap:round(nearest, 1rem, 4px); background:color-mix(in srgb, var(--lwh-teal,#0D9488) 12%, #fff); border:1.5px solid var(--lwh-teal,#0D9488); border-radius:14px; padding:.6rem 1rem; padding:round(nearest, .6rem, 4px) round(nearest, 1rem, 4px); margin-bottom:1rem; margin-bottom:round(nearest, 1rem, 4px); }
.lh-cp__focusbar[hidden] { display:none; }
.lh-cp__focusbar-text { font-size:.9rem; }

/* Shortcuts */
.lh-cp__shortcuts { margin-bottom:1.5rem; margin-bottom:round(nearest, 1.5rem, 4px); }
.lh-cp__shortcuts-row { display:flex; gap:.6rem; gap:round(nearest, .6rem, 4px); overflow-x:auto; padding-bottom:.5rem; padding-bottom:round(nearest, .5rem, 4px); -webkit-overflow-scrolling:touch; }
.lh-cp__shortcuts-row::-webkit-scrollbar { height:6px; }
.lh-cp__shortcuts-row::-webkit-scrollbar-thumb { background:var(--lwh-border); border-radius:3px; }
.lh-shortcut { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; gap:round(nearest, .35rem, 4px); width:84px; height:84px; border-radius:18px; background:#fff; border:1.5px solid var(--lwh-border); text-decoration:none; color:var(--lwh-ink); transition:transform .12s, box-shadow .12s, border-color .12s; }
.lh-shortcut:hover { transform:translateY(-3px); box-shadow:var(--lwh-shadow-md); border-color:var(--lwh-purple,#6B2FA0); }
.lh-shortcut__icon { font-size:1.7rem; }
.lh-shortcut__label { font-size:.72rem; font-weight:700; }
.lh-cp__shortcuts-row--stages { margin-top:.4rem; margin-top:round(nearest, .4rem, 4px); }
.lh-chip-link { flex:0 0 auto; padding:.4rem .9rem; padding:round(nearest, .4rem, 4px) round(nearest, .9rem, 4px); border-radius:999px; background:var(--lwh-bg,#F6F4FB); border:1.5px solid var(--lwh-border); font-weight:700; font-size:.82rem; text-decoration:none; color:var(--lwh-ink); transition:border-color .12s, background .12s; }
.lh-chip-link:hover { border-color:var(--lwh-purple,#6B2FA0); background:#fff; }

/* KPI strip */
.lh-cp__kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.85rem; gap:round(nearest, .85rem, 4px); margin-bottom:1.6rem; margin-bottom:round(nearest, 1.6rem, 4px); }

/* Panels */
.lh-cp__panel { margin-bottom:1.6rem; margin-bottom:round(nearest, 1.6rem, 4px); }
.lh-cp__panel-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; gap:round(nearest, .75rem, 4px); margin-bottom:.85rem; margin-bottom:round(nearest, .85rem, 4px); flex-wrap:wrap; }

/* Roster tiles */

/* Progress cards */
.lh-progresscards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; gap:round(nearest, 1rem, 4px); }
.lh-progresscard { background:#fff; border:1px solid var(--lwh-border); border-radius:18px; padding:1.1rem; padding:round(nearest, 1.1rem, 4px); box-shadow:var(--lwh-shadow-sm); display:flex; flex-direction:column; gap:.7rem; gap:round(nearest, .7rem, 4px); }
.lh-progresscard__head { display:flex; align-items:center; gap:.6rem; gap:round(nearest, .6rem, 4px); }
.lh-progresscard__head img, .lh-progresscard__head .lh-avatar { border-radius:50%; }
.lh-progresscard__head strong { display:block; }
.lh-progresscard__stats { display:flex; justify-content:space-between; text-align:center; gap:.5rem; gap:round(nearest, .5rem, 4px); }
.lh-progresscard__n { display:block; font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.05rem; }
.lh-progresscard__l { font-size:.72rem; color:var(--lwh-grey); }
.lh-progresscard__foot { display:flex; align-items:center; justify-content:space-between; }
.lh-progresscard__pct { font-weight:800; }
.lh-progresscard__next { font-size:.76rem; color:var(--lwh-grey); font-weight:700; }

/* Attendance (rebuilt, practical) */
.lh-attendance { padding:1.1rem 1.2rem; padding:round(nearest, 1.1rem, 4px) round(nearest, 1.2rem, 4px); }
.lh-attendance__bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; gap:round(nearest, 1rem, 4px); flex-wrap:wrap; margin-bottom:.85rem; margin-bottom:round(nearest, .85rem, 4px); padding-bottom:.75rem; padding-bottom:round(nearest, .75rem, 4px); border-bottom:1px solid var(--lwh-border); }
.lh-attendance__date { font-weight:800; }
.lh-attendance__legend { display:flex; gap:.85rem; gap:round(nearest, .85rem, 4px); font-size:.74rem; color:var(--lwh-grey); flex-wrap:wrap; }
.lh-attendance__list { display:flex; flex-direction:column; gap:.5rem; gap:round(nearest, .5rem, 4px); }
.lh-attrow { display:flex; align-items:center; gap:.75rem; gap:round(nearest, .75rem, 4px); padding:.55rem .7rem; padding:round(nearest, .55rem, 4px) round(nearest, .7rem, 4px); border:1px solid var(--lwh-border); border-radius:12px; }
.lh-attrow__who { display:flex; align-items:center; gap:.55rem; gap:round(nearest, .55rem, 4px); flex:1; min-width:0; }
.lh-attrow__who img, .lh-attrow__who .lh-avatar { border-radius:50%; flex:0 0 auto; }
.lh-attrow__name { font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lh-attrow__rate { font-size:.78rem; font-weight:800; color:var(--lwh-grey); flex:0 0 auto; min-width:42px; text-align:right; }
.lh-attrow__opts { display:flex; gap:.3rem; gap:round(nearest, .3rem, 4px); flex:0 0 auto; }
.lh-attendance__saved { color:var(--lwh-success,#22A565); font-weight:700; margin-top:.6rem; margin-top:round(nearest, .6rem, 4px); }

/* Report cards */
.lh-reportcards { display:flex; flex-direction:column; gap:1rem; gap:round(nearest, 1rem, 4px); }
.lh-reportcard { background:#fff; border:1px solid var(--lwh-border); border-radius:18px; padding:1.1rem 1.2rem; padding:round(nearest, 1.1rem, 4px) round(nearest, 1.2rem, 4px); box-shadow:var(--lwh-shadow-sm); }
.lh-reportcard__head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; gap:round(nearest, .75rem, 4px); margin-bottom:.75rem; margin-bottom:round(nearest, .75rem, 4px); flex-wrap:wrap; }
.lh-reportcard__who { display:flex; align-items:center; gap:.55rem; gap:round(nearest, .55rem, 4px); }
.lh-reportcard__who img, .lh-reportcard__who .lh-avatar { border-radius:50%; }
.lh-reportcard__actions { display:flex; gap:.4rem; gap:round(nearest, .4rem, 4px); }
.lh-reportcard__table { width:100%; border-collapse:collapse; font-size:.88rem; }
.lh-reportcard__table th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--lwh-grey); padding:.4rem .5rem; padding:round(nearest, .4rem, 4px) round(nearest, .5rem, 4px); border-bottom:2px solid var(--lwh-border); }
.lh-reportcard__table td { padding:.5rem .5rem; padding:round(nearest, .5rem, 4px) round(nearest, .5rem, 4px); border-bottom:1px solid var(--lwh-border); }
.lh-reportcard__table tr:last-child td { border-bottom:0; }
.lh-reportcard__score { font-weight:800; }
.lh-reportcard__by { color:var(--lwh-grey); }
.lh-reportcard__empty { margin:.25rem 0 0; margin:round(nearest, .25rem, 4px) 0 0; }

/* Review modal score field */
.lh-reviewmodal__scorefield input { width:100%; padding:.5rem .6rem; padding:round(nearest, .5rem, 4px) round(nearest, .6rem, 4px); border:1.5px solid var(--lwh-border); border-radius:10px; font-size:.9rem; font-family:inherit; }

/* Small button size */
.lh-btn--xs { padding:.3rem .7rem; padding:round(nearest, .3rem, 4px) round(nearest, .7rem, 4px); font-size:.78rem; }

/* Mobile */
@media (max-width:600px){
	.lh-cp__head { flex-direction:column; align-items:flex-start; }
	.lh-attrow { flex-wrap:wrap; }
	.lh-attrow__opts { width:100%; justify-content:space-between; }
	.lh-attbtn { flex:1; }
}

/* Sprint 41b — management card doubles as focus selector */
.lh-childmgr__card { transition: box-shadow .15s, border-color .15s, transform .12s; }
.lh-childmgr__card:hover { transform: translateY(-2px); box-shadow: var(--lwh-shadow-md); }
.lh-childmgr__card.is-focused { border-color: var(--lwh-teal,#0D9488); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lwh-teal,#0D9488) 25%, transparent); }
.lh-cp__focushint { margin-top: .75rem; margin-top: round(nearest, .75rem, 4px); }

/* Sprint 42 — Assessment performance panel (real quiz data) */
.lh-assesscards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; gap:round(nearest, 1rem, 4px); }
.lh-assesscard { background:var(--card,#fff); border:1px solid var(--lwh-border); border-radius:18px; padding:1.1rem; padding:round(nearest, 1.1rem, 4px); box-shadow:var(--lwh-shadow-sm); display:flex; flex-direction:column; gap:.7rem; gap:round(nearest, .7rem, 4px); }
.lh-assesscard__head { display:flex; align-items:center; gap:.55rem; gap:round(nearest, .55rem, 4px); }
.lh-assesscard__head img, .lh-assesscard__head .lh-avatar { border-radius:50%; }
.lh-assesscard__stats { display:flex; justify-content:space-between; text-align:center; gap:.5rem; gap:round(nearest, .5rem, 4px); }
.lh-assesscard__n { display:block; font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.15rem; }
.lh-assesscard__l { font-size:.72rem; color:var(--lwh-grey); }
.lh-assesscard__tests { display:flex; flex-direction:column; gap:.35rem; gap:round(nearest, .35rem, 4px); }
.lh-assesschip { display:flex; align-items:center; justify-content:space-between; gap:.5rem; gap:round(nearest, .5rem, 4px); padding:.4rem .6rem; padding:round(nearest, .4rem, 4px) round(nearest, .6rem, 4px); border-radius:9px; font-size:.8rem; font-weight:700; border-left:4px solid; background:var(--lwh-bg,#F8F6FC); }
.lh-assesschip__name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lh-assesschip__pct { font-weight:800; flex:0 0 auto; }
.lh-assesschip--green { border-left-color:#16a34a; }
.lh-assesschip--amber { border-left-color:#F59E0B; }
.lh-assesschip--red { border-left-color:#dc2626; }
.lh-assesscard__weak { font-size:.78rem; font-weight:700; color:#92400e; background:#fffbeb; border-radius:9px; padding:.45rem .6rem; padding:round(nearest, .45rem, 4px) round(nearest, .6rem, 4px); }

/* Report card auto-stats strip */
.lh-reportcard__autostats { display:flex; flex-wrap:wrap; gap:.5rem .9rem; gap:round(nearest, .5rem, 4px) round(nearest, .9rem, 4px); padding:.6rem .2rem .85rem; padding:round(nearest, .6rem, 4px) round(nearest, .2rem, 4px) round(nearest, .85rem, 4px); margin-bottom:.4rem; margin-bottom:round(nearest, .4rem, 4px); border-bottom:1px solid var(--lwh-border); font-size:.82rem; font-weight:700; color:var(--lwh-ink-soft); }
.lh-reportcard__autostats span { white-space:nowrap; }

/* Sprint 43 — Badges & ranks panel (teacher/parent) */
.lh-badgepanels { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; gap:round(nearest, 1rem, 4px); }
.lh-badgepanel { background:var(--card,#fff); border:1px solid var(--lwh-border); border-radius:18px; padding:1.1rem; padding:round(nearest, 1.1rem, 4px); box-shadow:var(--lwh-shadow-sm); }
.lh-badgepanel__head { display:flex; align-items:center; gap:.6rem; gap:round(nearest, .6rem, 4px); }
.lh-badgepanel__head img, .lh-badgepanel__head .lh-avatar { border-radius:50%; }
.lh-badgepanel__id { flex:1; display:flex; flex-direction:column; gap:.3rem; gap:round(nearest, .3rem, 4px); }
.lh-badgepanel__id strong { font-size:1rem; }
.lh-badgepanel__pts { font-weight:800; color:var(--lwh-purple,#6B2FA0); font-size:.85rem; }
.lh-badgepanel__prog { height:8px; border-radius:999px; background:var(--lwh-border); overflow:hidden; margin-top:.7rem; margin-top:round(nearest, .7rem, 4px); }
.lh-badgepanel__progbar { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--lwh-coral,#E91E63),var(--lwh-gold,#FFB300)); }
.lh-badgepanel__next { display:block; font-size:.74rem; font-weight:700; color:var(--lwh-grey); margin-top:.35rem; margin-top:round(nearest, .35rem, 4px); }
.lh-badgepanel__wall { display:flex; flex-wrap:wrap; gap:.6rem; gap:round(nearest, .6rem, 4px); margin-top:.9rem; margin-top:round(nearest, .9rem, 4px); }
.lh-badgemini { position:relative; }
.lh-badgemini__disc { position:relative; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 30%,#fff,color-mix(in srgb,var(--badge-color,#FFD700) 35%,#fff)); border:2.5px solid var(--badge-color,#FFD700); box-shadow:0 4px 10px color-mix(in srgb,var(--badge-color,#FFD700) 30%,transparent); }
.lh-badgemini__icon { font-size:1.3rem; }
.lh-badgemini__count { position:absolute; right:-4px; bottom:-4px; min-width:20px; height:20px; padding:0 4px; border-radius:999px; background:var(--lwh-ink); color:#fff; font-size:.64rem; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }

/* Sprint 43 — Student self-edit profile */
.lh-selfedit { padding:1.2rem 1.3rem; padding:round(nearest, 1.2rem, 4px) round(nearest, 1.3rem, 4px); display:flex; flex-direction:column; gap:1.1rem; gap:round(nearest, 1.1rem, 4px); }
.lh-selfedit__row { display:flex; flex-direction:column; gap:.5rem; gap:round(nearest, .5rem, 4px); }
.lh-selfedit__label { font-weight:800; font-size:.85rem; color:var(--lwh-ink-soft); }
.lh-selfedit__nameline { display:flex; gap:.5rem; gap:round(nearest, .5rem, 4px); }
.lh-selfedit__nameline input { flex:1; padding:.6rem .8rem; padding:round(nearest, .6rem, 4px) round(nearest, .8rem, 4px); border:1.5px solid var(--lwh-border); border-radius:12px; font-family:inherit; font-size:1rem; }
.lh-avatarpicker { display:flex; flex-wrap:wrap; gap:.5rem; gap:round(nearest, .5rem, 4px); }
.lh-avatarpicker__opt { width:46px; height:46px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1.5px var(--lwh-border); cursor:pointer; font-size:1.4rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:transform .12s, box-shadow .12s; }
.lh-avatarpicker__opt:hover { transform:scale(1.1); }
.lh-avatarpicker__opt.is-active { box-shadow:0 0 0 3px var(--lh-dash-accent,#E91E63); transform:scale(1.1); }
.lh-selfedit__saved { color:var(--lwh-success,#22A565); font-weight:800; font-size:.85rem; margin:0; }

/* ============================================================
   Sprint 44 — Advanced panels: alerts, heatmap, recommendations,
   planner, shared thread, trend sparklines
   ============================================================ */

/* Smart alerts */
.lh-alerts { padding:1rem 1.2rem; padding:round(nearest, 1rem, 4px) round(nearest, 1.2rem, 4px); display:flex; flex-direction:column; gap:.6rem; gap:round(nearest, .6rem, 4px); }
.lh-alert { display:flex; gap:.7rem; gap:round(nearest, .7rem, 4px); align-items:flex-start; padding:.7rem .85rem; padding:round(nearest, .7rem, 4px) round(nearest, .85rem, 4px); border-radius:12px; font-size:.9rem; line-height:1.4; }
.lh-alert--red { background:#fef2f2; color:#991b1b; }
.lh-alert--amber { background:#fffbeb; color:#92400e; }
.lh-alert--green { background:#f0fdf4; color:#166534; }
.lh-alert__icon { flex:0 0 auto; }
.lh-alert__text strong { font-weight:800; }

/* Trend sparkline on progress cards */
.lh-progresscard__trend { display:flex; flex-direction:column; gap:.2rem; gap:round(nearest, .2rem, 4px); margin-top:.2rem; margin-top:round(nearest, .2rem, 4px); }
.lh-progresscard__trendlbl { font-size:.68rem; color:var(--lwh-grey); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.lh-spark { width:100%; height:26px; }

/* Class mastery heatmap */
.lh-heatwrap { padding:1rem 1.2rem; padding:round(nearest, 1rem, 4px) round(nearest, 1.2rem, 4px); overflow-x:auto; }
.lh-heat { border-collapse:separate; border-spacing:4px; width:100%; }
.lh-heat__corner, .lh-heat__rowh { text-align:left; font-weight:800; font-size:.8rem; white-space:nowrap; padding-right:.5rem; padding-right:round(nearest, .5rem, 4px); }
.lh-heat__colh { font-size:.68rem; color:var(--lwh-grey); font-weight:800; text-transform:uppercase; text-align:center; padding:0 .2rem .3rem; padding:0 round(nearest, .2rem, 4px) round(nearest, .3rem, 4px); vertical-align:bottom; }
.lh-heat__cell { width:48px; height:34px; border-radius:8px; text-align:center; font-weight:800; font-size:.78rem; color:#fff; }
.lh-heat__cell--h5 { background:#16a34a; }
.lh-heat__cell--h4 { background:#65a30d; }
.lh-heat__cell--h3 { background:#eab308; color:#3a3000; }
.lh-heat__cell--h2 { background:#f97316; }
.lh-heat__cell--h1 { background:#dc2626; }
.lh-heat__cell--h0 { background:#eceaf2; color:#a8a2b8; }
.lh-heat__legend { margin:.85rem 0 0; margin:round(nearest, .85rem, 4px) 0 0; }

/* Recommendations */
.lh-recs { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; gap:round(nearest, 1rem, 4px); }
.lh-rec { background:var(--card,#fff); border:1px solid var(--lwh-border); border-radius:16px; padding:1rem 1.1rem; padding:round(nearest, 1rem, 4px) round(nearest, 1.1rem, 4px); box-shadow:var(--lwh-shadow-sm); }
.lh-rec__head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; gap:round(nearest, .5rem, 4px); margin-bottom:.6rem; margin-bottom:round(nearest, .6rem, 4px); }
.lh-rec__head strong { font-size:1rem; }
.lh-rec__weak { font-size:.72rem; font-weight:800; color:#92400e; background:#fffbeb; padding:.2rem .55rem; padding:round(nearest, .2rem, 4px) round(nearest, .55rem, 4px); border-radius:999px; white-space:nowrap; }
.lh-rec__items { display:flex; flex-direction:column; gap:.4rem; gap:round(nearest, .4rem, 4px); }
.lh-rec__item { display:flex; align-items:center; justify-content:space-between; gap:.5rem; gap:round(nearest, .5rem, 4px); padding:.55rem .7rem; padding:round(nearest, .55rem, 4px) round(nearest, .7rem, 4px); border:1px solid var(--lwh-border); border-radius:11px; text-decoration:none; color:var(--lwh-ink); font-size:.86rem; transition:border-color .12s, background .12s; }
.lh-rec__item:hover { border-color:var(--lwh-purple,#6B2FA0); background:var(--lwh-bg,#F8F6FC); }
.lh-rec__title { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lh-rec__go { font-size:.78rem; font-weight:800; color:var(--lwh-purple,#6B2FA0); flex:0 0 auto; }

/* Weekly planner */
.lh-planner { display:grid; grid-template-columns:repeat(7,1fr); gap:.6rem; gap:round(nearest, .6rem, 4px); }
@media(max-width:900px){ .lh-planner { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .lh-planner { grid-template-columns:1fr; } }
.lh-planday { background:var(--card,#fff); border:1px solid var(--lwh-border); border-radius:12px; padding:.6rem; padding:round(nearest, .6rem, 4px); min-height:90px; }
.lh-planday__date { font-weight:800; font-size:.74rem; color:var(--lwh-grey); text-transform:uppercase; letter-spacing:.03em; margin-bottom:.45rem; margin-bottom:round(nearest, .45rem, 4px); padding-bottom:.3rem; padding-bottom:round(nearest, .3rem, 4px); border-bottom:1px solid var(--lwh-border); }
.lh-planday__items { display:flex; flex-direction:column; gap:.35rem; gap:round(nearest, .35rem, 4px); }
.lh-planday__none { color:var(--lwh-border); font-weight:800; }
.lh-plantask { display:flex; flex-direction:column; gap:.1rem; gap:round(nearest, .1rem, 4px); padding:.4rem .5rem; padding:round(nearest, .4rem, 4px) round(nearest, .5rem, 4px); border-radius:9px; background:var(--lwh-bg,#F8F6FC); text-decoration:none; color:var(--lwh-ink); border-left:3px solid var(--lwh-coral,#E91E63); position:relative; }
.lh-plantask.is-done { border-left-color:#22c55e; opacity:.65; }
.lh-plantask__who { font-size:.68rem; font-weight:800; color:var(--lwh-purple,#6B2FA0); }
.lh-plantask__title { font-size:.78rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lh-plantask__tick { position:absolute; right:.4rem; top:.4rem; color:#22c55e; font-weight:800; }

/* Shared home & school thread */
.lh-threads { display:flex; flex-direction:column; gap:1rem; gap:round(nearest, 1rem, 4px); }
.lh-thread { background:var(--card,#fff); border:1px solid var(--lwh-border); border-radius:16px; padding:1rem 1.1rem; padding:round(nearest, 1rem, 4px) round(nearest, 1.1rem, 4px); box-shadow:var(--lwh-shadow-sm); }
.lh-thread__head { display:flex; align-items:center; gap:.5rem; gap:round(nearest, .5rem, 4px); margin-bottom:.7rem; margin-bottom:round(nearest, .7rem, 4px); }
.lh-thread__head img, .lh-thread__head .lh-avatar { border-radius:50%; }
.lh-thread__period { border-top:1px dashed var(--lwh-border); padding-top:.7rem; padding-top:round(nearest, .7rem, 4px); margin-top:.5rem; margin-top:round(nearest, .5rem, 4px); }
.lh-thread__plabel { font-size:.74rem; font-weight:800; color:var(--lwh-grey); text-transform:uppercase; letter-spacing:.03em; margin-bottom:.5rem; margin-bottom:round(nearest, .5rem, 4px); }
.lh-thread__entries { display:flex; flex-direction:column; gap:.5rem; gap:round(nearest, .5rem, 4px); }
.lh-thread__msg { padding:.6rem .8rem; padding:round(nearest, .6rem, 4px) round(nearest, .8rem, 4px); border-radius:12px; }
.lh-thread__msg--own { background:var(--lwh-bg,#F8F6FC); border:1px solid var(--lwh-border); border-left:3px solid var(--lwh-purple,#6B2FA0); }
.lh-thread__msg--teacher { background:#eef6ff; border:1px solid #d6e8ff; }
.lh-thread__msg--parent { background:#fdf0f6; border:1px solid #f8d9e8; }
.lh-thread__msghead { display:flex; align-items:center; justify-content:space-between; gap:.5rem; gap:round(nearest, .5rem, 4px); margin-bottom:.25rem; margin-bottom:round(nearest, .25rem, 4px); }
.lh-thread__who { font-size:.78rem; font-weight:800; }
.lh-thread__body { font-size:.88rem; line-height:1.45; color:var(--lwh-ink-soft); }
.lh-thread__body--empty { color:var(--lwh-grey); font-style:italic; }

/* ============================================================
   Sprint 45 — Tabbed panels (desktop tabs / mobile accordion),
   pick-a-student prompt, and (i) info tooltips
   ============================================================ */

/* Pick-a-student prompt */
.lh-cp__pickprompt { margin-top:1.5rem; margin-top:round(nearest, 1.5rem, 4px); }
.lh-cp__pickcard { text-align:center; padding:2.5rem 1.5rem; padding:round(nearest, 2.5rem, 4px) round(nearest, 1.5rem, 4px); }
.lh-cp__pickicon { font-size:2.5rem; display:block; margin-bottom:.5rem; margin-bottom:round(nearest, .5rem, 4px); animation:lh-bobble 1.8s ease-in-out infinite; }
@keyframes lh-bobble { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.lh-cp__pickh { font-family:'Fredoka',sans-serif; font-size:1.3rem; margin:0 0 .4rem; margin:0 0 round(nearest, .4rem, 4px); }

/* Tabbed area */
.lh-cp__tabswrap { margin-top:1.5rem; margin-top:round(nearest, 1.5rem, 4px); }
/* Desktop: tabs wrap onto multiple rows so there's no horizontal scroll.
   The fade-edge wrapper only matters on narrow screens where we re-enable
   horizontal scrolling (see media query below). */
.lh-cp__tablist-wrap { position:relative; }
.lh-cp__tablist-wrap::before, .lh-cp__tablist-wrap::after { content:""; position:absolute; top:0; bottom:8px; width:32px; pointer-events:none; z-index:2; opacity:0; transition:opacity .2s; }
.lh-cp__tablist-wrap::before { left:0; background:linear-gradient(90deg, #fff, transparent); }
.lh-cp__tablist-wrap::after { right:0; background:linear-gradient(270deg, #fff, transparent); }
.lh-cp__tablist { display:flex; flex-wrap:wrap; gap:.3rem .15rem; gap:round(nearest, .3rem, 4px) round(nearest, .15rem, 4px); padding-bottom:.5rem; padding-bottom:round(nearest, .5rem, 4px); border-bottom:1.5px solid var(--lwh-border); margin-bottom:1.25rem; margin-bottom:round(nearest, 1.25rem, 4px); }
.lh-cp__tab { flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem; gap:round(nearest, .4rem, 4px); padding:.5rem .8rem; padding:round(nearest, .5rem, 4px) round(nearest, .8rem, 4px); border:0; background:transparent; border-radius:10px; cursor:pointer; font-family:'Nunito',sans-serif; font-weight:700; font-size:.85rem; color:var(--lwh-grey); position:relative; transition:color .15s, background .15s; white-space:nowrap; }
.lh-cp__tab:hover { color:var(--lwh-ink); background:var(--lwh-bg,#F6F4FB); }
.lh-cp__tab.is-active { color:#fff; background:var(--lwh-purple,#6B2FA0); }
.lh-cp__tab.is-active .lh-cp__tab-class { color:#fff; background:rgba(255,255,255,.22); opacity:1; }
.lh-cp__tab-ico { font-size:.95rem; line-height:1; flex:0 0 auto; }
.lh-cp__tab-lbl { line-height:1; }
.lh-cp__tab-class { font-size:.6rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--lwh-grey); background:var(--lwh-bg,#F1EEF8); padding:.1rem .35rem; padding:round(nearest, .1rem, 4px) round(nearest, .35rem, 4px); border-radius:5px; opacity:.85; }
/* Narrow desktop / tablet: if wrapping still overflows, allow scroll with hidden bar + fades. */
@media (max-width:980px) and (min-width:761px){
	.lh-cp__tablist { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
	.lh-cp__tablist::-webkit-scrollbar { display:none; height:0; }
	.lh-cp__tablist-wrap.has-left::before { opacity:1; }
	.lh-cp__tablist-wrap.has-right::after { opacity:1; }
	.lh-cp__tab.is-active { color:var(--lwh-purple,#6B2FA0); background:transparent; }
	.lh-cp__tab.is-active::after { content:""; position:absolute; left:.5rem; right:.5rem; bottom:-1.5px; height:2.5px; border-radius:3px 3px 0 0; background:var(--lwh-purple,#6B2FA0); }
}

/* Tab panels — only the active one shows on desktop. */
.lh-cp__tabpanel { display:none; }
.lh-cp__tabpanel.is-active { display:block; }
/* The trailing guide panel (no data-tab-panel) stays hidden inside tabs. */
.lh-cp__tabs > .lh-cp__panel:not(.lh-cp__tabpanel) { display:none; }

/* Info icon + tooltip */
.lh-info { width:20px; height:20px; border-radius:50%; border:1.5px solid var(--lwh-border); background:#fff; color:var(--lwh-grey); font-size:.72rem; font-weight:800; font-style:italic; font-family:Georgia, serif; cursor:pointer; line-height:1; display:inline-flex; align-items:center; justify-content:center; margin-left:.5rem; margin-left:round(nearest, .5rem, 4px); vertical-align:middle; flex:0 0 auto; transition:border-color .12s, color .12s, background .12s; }
.lh-info:hover, .lh-info:focus { border-color:var(--lwh-purple,#6B2FA0); color:var(--lwh-purple,#6B2FA0); background:var(--lwh-purple-light,#F3E5F5); outline:none; }
.lh-tip { position:absolute; z-index:10050; max-width:280px; background:var(--lwh-ink,#1A1A2E); color:#fff; font-size:.82rem; line-height:1.45; font-weight:600; padding:.6rem .8rem; padding:round(nearest, .6rem, 4px) round(nearest, .8rem, 4px); border-radius:10px; box-shadow:var(--lwh-shadow-lg); pointer-events:none; }
.lh-tip::before { content:""; position:absolute; top:-5px; left:14px; width:10px; height:10px; background:var(--lwh-ink,#1A1A2E); transform:rotate(45deg); }

/* Mobile (≤760px): tabs collapse into an accordion. Each panel shows its own
   tappable header; the tab bar is hidden. */
@media (max-width:760px){
	.lh-cp__tablist { display:none; }
	.lh-cp__tabpanel { display:block !important; margin-bottom:.6rem; margin-bottom:round(nearest, .6rem, 4px); border:1px solid var(--lwh-border); border-radius:14px; overflow:hidden; }
	.lh-cp__tabpanel .lh-cp__panel-head { cursor:pointer; padding:.9rem 1rem; padding:round(nearest, .9rem, 4px) round(nearest, 1rem, 4px); margin:0; background:#fff; }
	.lh-cp__tabpanel .lh-cp__panel-head::after { content:"▾"; margin-left:auto; color:var(--lwh-grey); transition:transform .2s; }
	/* Collapsed by default on mobile; the .is-active panel is expanded. Body is
	   everything in the section after the head. */
	.lh-cp__tabpanel > *:not(.lh-cp__panel-head) { display:none; padding:0 1rem 1rem; padding:0 round(nearest, 1rem, 4px) round(nearest, 1rem, 4px); }
	.lh-cp__tabpanel.is-open > *:not(.lh-cp__panel-head) { display:block; }
	.lh-cp__tabpanel.is-open .lh-cp__panel-head::after { transform:rotate(180deg); }
}

/* ============================================================
   Sprint 46 — Card assign hover label, master assign modal
   ============================================================ */
/* Card assign button: icon by default, expands to label on card hover */
.lh-res-card__assign { display:inline-flex; align-items:center; gap:.3rem; gap:round(nearest, .3rem, 4px); background:var(--lwh-purple,#6B2FA0); color:#fff; border:0; border-radius:999px; padding:.35rem .5rem; padding:round(nearest, .35rem, 4px) round(nearest, .5rem, 4px); font-size:.8rem; font-weight:800; cursor:pointer; box-shadow:var(--lwh-shadow-sm); transition:padding .15s, background .15s; }
.lh-res-card__assign:hover { background:var(--lwh-purple-dark,#4A148C); }
.lh-res-card__assign-lbl { max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width .25s, opacity .2s; }
.lh-res-card:hover .lh-res-card__assign-lbl, .lh-res-card__assign:focus .lh-res-card__assign-lbl { max-width:130px; opacity:1; }

/* Master assign modal */
.lh-master-assign[hidden]{ display:none; }
.lh-master-assign{ position:fixed; inset:0; z-index:10050; opacity:0; transition:opacity .2s; }
.lh-master-assign.is-open{ opacity:1; }
.lh-master-assign__backdrop{ position:absolute; inset:0; background:rgba(26,26,46,.55); backdrop-filter:blur(4px); }
.lh-master-assign__panel{ position:absolute; top:50%; left:50%; transform:translate(-50%,-46%) scale(.97); width:min(640px,94vw); max-height:90vh; overflow-y:auto; background:#fff; border-radius:22px; padding:1.8rem; padding:round(nearest, 1.8rem, 4px); box-shadow:var(--lwh-shadow-lg); transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.lh-master-assign.is-open .lh-master-assign__panel{ transform:translate(-50%,-50%) scale(1); }
.lh-master-assign__close{ position:absolute; top:1rem; right:1rem; background:none; border:0; font-size:1.4rem; color:var(--lwh-grey); cursor:pointer; }
.lh-master-assign__title{ font-family:'Fredoka',sans-serif; font-size:1.4rem; margin:0 0 1.2rem; margin:0 0 round(nearest, 1.2rem, 4px); }
.lh-master-assign__step{ margin-bottom:1.3rem; margin-bottom:round(nearest, 1.3rem, 4px); }
.lh-master-assign__steplabel{ display:block; font-weight:800; font-size:.9rem; color:var(--lwh-purple,#6B2FA0); margin-bottom:.6rem; margin-bottom:round(nearest, .6rem, 4px); }
.lh-master-assign__people{ display:flex; flex-wrap:wrap; gap:.5rem; gap:round(nearest, .5rem, 4px); }
.lh-master-assign__person{ display:inline-flex; align-items:center; gap:.5rem; gap:round(nearest, .5rem, 4px); border:1.5px solid var(--lwh-border); border-radius:999px; padding:.35rem .8rem .35rem .4rem; padding:round(nearest, .35rem, 4px) round(nearest, .8rem, 4px) round(nearest, .35rem, 4px) round(nearest, .4rem, 4px); cursor:pointer; transition:border-color .15s, background .15s; }
.lh-master-assign__person:hover{ border-color:var(--lwh-purple,#6B2FA0); }
.lh-master-assign__person:has(.lh-master-assign__who:checked){ border-color:var(--lwh-purple,#6B2FA0); background:var(--lwh-purple-light,#F3E5F5); }
.lh-master-assign__who{ width:18px; height:18px; accent-color:var(--lwh-purple,#6B2FA0); margin:0; }
.lh-master-assign__avatar{ width:28px; height:28px; border-radius:50%; background:var(--lwh-purple,#6B2FA0); color:#fff; font-size:.75rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.lh-master-assign__name{ font-weight:700; font-size:.9rem; }
.lh-master-assign__filters{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; gap:round(nearest, .5rem, 4px); margin-bottom:.8rem; margin-bottom:round(nearest, .8rem, 4px); }
.lh-master-assign__search{ grid-column:1 / -1; width:100%; padding:.6rem .8rem; padding:round(nearest, .6rem, 4px) round(nearest, .8rem, 4px); border:1.5px solid var(--lwh-border); border-radius:12px; font-family:inherit; font-size:.95rem; }
.lh-master-assign__filter{ padding:.55rem .6rem; padding:round(nearest, .55rem, 4px) round(nearest, .6rem, 4px); border:1.5px solid var(--lwh-border); border-radius:10px; font-family:inherit; font-size:.88rem; background:#fff; }
.lh-master-assign__results{ max-height:240px; overflow-y:auto; border:1px solid var(--lwh-border); border-radius:12px; padding:.4rem; padding:round(nearest, .4rem, 4px); display:flex; flex-direction:column; gap:.3rem; gap:round(nearest, .3rem, 4px); }
.lh-master-assign__empty{ text-align:center; color:var(--lwh-grey); font-size:.88rem; padding:1.5rem 0; padding:round(nearest, 1.5rem, 4px) 0; margin:0; }
.lh-master-assign__result{ display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; gap:round(nearest, .15rem, 4px); text-align:left; background:var(--lwh-bg,#F8F6FC); border:1.5px solid transparent; border-radius:10px; padding:.6rem .8rem; padding:round(nearest, .6rem, 4px) round(nearest, .8rem, 4px); cursor:pointer; transition:border-color .15s, background .15s; }
.lh-master-assign__result:hover{ background:#fff; border-color:var(--lwh-purple-light,#F3E5F5); }
.lh-master-assign__result.is-chosen{ border-color:var(--lwh-purple,#6B2FA0); background:var(--lwh-purple-light,#F3E5F5); }
.lh-master-assign__rtitle{ font-weight:800; font-size:.92rem; }
.lh-master-assign__rmeta{ font-size:.76rem; color:var(--lwh-grey); font-weight:700; }
.lh-master-assign__date{ padding:.6rem .8rem; padding:round(nearest, .6rem, 4px) round(nearest, .8rem, 4px); border:1.5px solid var(--lwh-border); border-radius:12px; font-family:inherit; }
.lh-master-assign__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; gap:round(nearest, 1rem, 4px); padding-top:.5rem; padding-top:round(nearest, .5rem, 4px); border-top:1px solid var(--lwh-border); }
.lh-master-assign__selected{ font-size:.85rem; color:var(--lwh-ink-soft); font-weight:700; }
.lh-master-assign__feedback{ font-size:.88rem; padding:.5rem; padding:round(nearest, .5rem, 4px); border-radius:8px; text-align:center; margin-top:.6rem; margin-top:round(nearest, .6rem, 4px); }
.lh-master-assign__feedback.is-good{ background:#D1FAE5; color:#065F46; }
.lh-master-assign__feedback.is-bad{ background:#FEE2E2; color:#991B1B; }
.lh-master-assign__feedback.is-pending{ background:var(--lwh-yellow-light,#FEF3C7); color:#92400E; }
@media(max-width:560px){ .lh-master-assign__filters{ grid-template-columns:1fr; } }

/* ============================================================
   Sprint 47 — Consolidated overview cards, review reminders,
   cadence selector
   ============================================================ */
.lh-cp__overview { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; gap:round(nearest, 1.2rem, 4px); margin-bottom:1.5rem; margin-bottom:round(nearest, 1.5rem, 4px); }
@media(max-width:820px){ .lh-cp__overview{ grid-template-columns:1fr; } }
.lh-ovcard { background:#fff; border:1px solid var(--lwh-border); border-radius:18px; padding:1.3rem; padding:round(nearest, 1.3rem, 4px); box-shadow:var(--lwh-shadow-sm); }
.lh-ovcard__head { display:flex; align-items:center; gap:.5rem; gap:round(nearest, .5rem, 4px); margin-bottom:1rem; margin-bottom:round(nearest, 1rem, 4px); }
.lh-ovcard__head h3 { font-family:'Fredoka',sans-serif; font-size:1.05rem; margin:0; }
.lh-ovcard__badgewall { display:flex; flex-wrap:wrap; gap:.6rem; gap:round(nearest, .6rem, 4px); }
.lh-ovbadge { position:relative; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 30%,#fff,color-mix(in srgb,var(--bc,#FFB300) 32%,#fff)); border:2.5px solid var(--bc,#FFB300); box-shadow:0 4px 10px color-mix(in srgb,var(--bc,#FFB300) 28%,transparent); }
.lh-ovbadge__icon { font-size:1.3rem; }
.lh-ovbadge__count { position:absolute; right:-4px; bottom:-4px; min-width:20px; height:20px; padding:0 4px; border-radius:999px; background:var(--lwh-ink); color:#fff; font-size:.64rem; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.lh-ovcard__foot { margin:.9rem 0 0; margin:round(nearest, .9rem, 4px) 0 0; font-size:.85rem; color:var(--lwh-ink-soft); }
.lh-ovstats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; gap:round(nearest, 1rem, 4px); }
.lh-ovstat { background:var(--lwh-bg,#F8F6FC); border-radius:12px; padding:.9rem 1rem; padding:round(nearest, .9rem, 4px) round(nearest, 1rem, 4px); }
.lh-ovstat__num { display:block; font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.6rem; color:var(--lwh-purple,#6B2FA0); line-height:1.1; }
.lh-ovstat__num--text { font-size:1.05rem; }
.lh-ovstat__lbl { font-size:.76rem; color:var(--lwh-ink-soft); font-weight:700; }

/* Review reminders */
.lh-cp__reminders { background:#fff; border:1px solid var(--lwh-border); border-radius:18px; padding:1.3rem; padding:round(nearest, 1.3rem, 4px); box-shadow:var(--lwh-shadow-sm); margin-bottom:1.5rem; margin-bottom:round(nearest, 1.5rem, 4px); }
.lh-reminders__cadence { margin-left:auto; font-size:.74rem; font-weight:800; color:var(--lwh-grey); text-transform:uppercase; letter-spacing:.04em; }
.lh-reminders { display:flex; flex-wrap:wrap; gap:.5rem; gap:round(nearest, .5rem, 4px); }
.lh-reminder { display:inline-flex; align-items:center; gap:.3rem; gap:round(nearest, .3rem, 4px); font-size:.85rem; font-weight:700; padding:.4rem .8rem; padding:round(nearest, .4rem, 4px) round(nearest, .8rem, 4px); border-radius:999px; }
.lh-reminder--overdue { background:rgba(233,30,99,.12); color:var(--lwh-coral-dark,#C2185B); }
.lh-reminder--upcoming { background:rgba(255,179,0,.14); color:#92400E; }
.lh-reminder--done { background:rgba(123,217,56,.16); color:#2f7d0f; }

/* Cadence selector in settings */
.lh-cp__settings-section { border-top:1px solid var(--lwh-border); margin-top:1rem; margin-top:round(nearest, 1rem, 4px); padding-top:1rem; padding-top:round(nearest, 1rem, 4px); }
.lh-cadence { display:flex; gap:.6rem; gap:round(nearest, .6rem, 4px); margin-top:.5rem; margin-top:round(nearest, .5rem, 4px); }
.lh-cadence__opt { flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem; gap:round(nearest, .4rem, 4px); border:1.5px solid var(--lwh-border); border-radius:11px; padding:.6rem; padding:round(nearest, .6rem, 4px); cursor:pointer; font-weight:800; font-size:.88rem; transition:border-color .15s, background .15s; }
.lh-cadence__opt:has(input:checked) { border-color:var(--lwh-purple,#6B2FA0); background:var(--lwh-purple-light,#F3E5F5); color:var(--lwh-purple,#6B2FA0); }
.lh-cadence__opt input { accent-color:var(--lwh-purple,#6B2FA0); }

/* ============================================================
   Sprint 48 — Uniform back-end modal system
   One canonical look for every dashboard/back-end modal. Rather
   than rewrite each modal's markup, we normalise the backdrop and
   panel of all existing modal families to identical tokens so they
   look and behave consistently.
   ============================================================ */
:root{
	--lh-modal-radius:22px;
	--lh-modal-pad:1.8rem;
	--lh-modal-maxw:560px;
	--lh-modal-backdrop:rgba(20,12,40,.55);
	--lh-modal-z:10050;
	--lh-modal-shadow:0 30px 80px rgba(20,12,40,.38);
}

/* --- Backdrops: same colour, blur, z-index across all modals --- */
.lh-assign-modal__backdrop,
.lh-master-assign__backdrop,
.lh-reviewmodal,
.lh-oops-modal,
.lh-agegate-modal,
.lh-childmgr-modal,
.lh-childmgr__modal {
	background:var(--lh-modal-backdrop) !important;
	backdrop-filter:blur(4px) !important;
}
.lh-assign-modal, .lh-master-assign { z-index:var(--lh-modal-z) !important; }
.lh-reviewmodal, .lh-oops-modal, .lh-agegate-modal, .lh-childmgr-modal, .lh-childmgr__modal { z-index:var(--lh-modal-z) !important; }

/* --- Panels: identical radius, padding, width cap, shadow --- */
.lh-assign-modal__panel,
.lh-master-assign__panel,
.lh-reviewmodal__card,
.lh-oops-modal__box,
.lh-childmgr-modal-card,
.lh-childmgr__modal-card,
.lh-agegate-modal__box {
	border-radius:var(--lh-modal-radius) !important;
	padding:var(--lh-modal-pad) !important;
	padding:round(nearest, var(--lh-modal-pad), 4px) !important;
	box-shadow:var(--lh-modal-shadow) !important;
	max-height:90vh;
	overflow-y:auto;
}
.lh-assign-modal__panel,
.lh-master-assign__panel { max-width:var(--lh-modal-maxw); width:min(var(--lh-modal-maxw),94vw); }

/* --- Uniform close button across modals --- */
.lh-assign-modal__close,
.lh-master-assign__close,
.lh-reviewmodal__close,
.lh-reviewmodal-close,
.lh-oops-modal__close,
.lh-childmgr-modal-close {
	position:absolute; top:1rem; right:1rem; width:32px; height:32px;
	display:flex; align-items:center; justify-content:center;
	background:var(--lwh-bg,#F4F1FA); border:0; border-radius:9px;
	font-size:1.1rem; color:var(--lwh-grey); cursor:pointer; line-height:1;
	transition:background .15s, color .15s;
}
.lh-assign-modal__close:hover,
.lh-master-assign__close:hover,
.lh-reviewmodal__close:hover,
.lh-reviewmodal-close:hover,
.lh-oops-modal__close:hover,
.lh-childmgr-modal-close:hover {
	background:var(--lwh-coral-light,#FCE4EC); color:var(--lwh-coral,#E91E63);
}

/* --- Uniform title --- */
.lh-assign-modal__title,
.lh-master-assign__title,
.lh-reviewmodal__title,
.lh-reviewmodal-title,
.lh-childmgr-modal-title,
.lh-oops-modal__title {
	font-family:'Fredoka',sans-serif !important; font-size:1.4rem !important;
	font-weight:700 !important; margin:0 0 1.2rem !important; margin:0 0 round(nearest, 1.2rem, 4px) !important;
}

/* Master assign — conditional topic box */
.lh-master-assign__subjectwrap { margin:.6rem 0 .8rem; margin:round(nearest, .6rem, 4px) 0 round(nearest, .8rem, 4px); padding:.7rem .8rem; padding:round(nearest, .7rem, 4px) round(nearest, .8rem, 4px); background:var(--lwh-purple-light,#F3E5F5); border-radius:12px; animation:lhSubjIn .2s ease; }
.lh-master-assign__subjectwrap[hidden] { display:none; }
.lh-master-assign__sublabel { display:block; font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--lwh-purple,#6B2FA0); margin-bottom:.35rem; margin-bottom:round(nearest, .35rem, 4px); }
.lh-master-assign__subjectwrap .lh-master-assign__filter { width:100%; }
@keyframes lhSubjIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* Sprint 49 — assignment progress bar on dashboards (trackable types) */
.lh-task-prog { display:block; height:6px; border-radius:99px; background:#ece7f5; overflow:hidden; margin:.5rem 0 .2rem; margin:round(nearest, .5rem, 4px) 0 round(nearest, .2rem, 4px); }
.lh-task-prog__fill { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--lwh-purple,#6B2FA0),var(--lwh-grape,#9B4DFF)); transition:width .3s; }
.lh-task-prog__lbl { font-size:.72rem; font-weight:800; color:var(--lwh-purple,#6B2FA0); }
/* progress bar inside adult dashboard assignment rows */
.lh-cp-assign-prog { height:6px; border-radius:99px; background:#ece7f5; overflow:hidden; margin-top:.3rem; margin-top:round(nearest, .3rem, 4px); }
.lh-cp-assign-prog__fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--lwh-purple,#6B2FA0),var(--lwh-grape,#9B4DFF)); }

/* ============================================================
   Sprint 50 — Resource page: tracker badges, prereq lock,
   "we also recommend"
   ============================================================ */
.lh-rp-trackers { display:flex; gap:.5rem; gap:round(nearest, .5rem, 4px); flex-wrap:wrap; margin:1rem 0; margin:round(nearest, 1rem, 4px) 0; }
.lh-trk { display:inline-flex; align-items:center; gap:.3rem; gap:round(nearest, .3rem, 4px); font-size:.76rem; font-weight:800; padding:.32rem .7rem; padding:round(nearest, .32rem, 4px) round(nearest, .7rem, 4px); border-radius:8px; background:#f0fdf4; color:#1f7a47; border:1px solid #c8e6d3; }
.lh-trk--off { background:#f5f5f7; color:#9aa0ad; border-color:#e5e5ea; }

.lh-rp-lock { background:#fff; border:1px solid var(--lwh-border); border-radius:18px; padding:2rem; padding:round(nearest, 2rem, 4px); text-align:center; box-shadow:var(--lwh-shadow-sm); margin:1rem 0; margin:round(nearest, 1rem, 4px) 0; }
.lh-rp-lock__icon { font-size:48px; }
.lh-rp-lock__title { font-family:'Fredoka',sans-serif; color:var(--lwh-purple,#6B2FA0); font-size:1.4rem; margin:.4rem 0; margin:round(nearest, .4rem, 4px) 0; }
.lh-rp-lock__intro { color:var(--lwh-grey); }
.lh-rp-lock__list { list-style:none; padding:0; max-width:480px; margin:1rem auto; margin:round(nearest, 1rem, 4px) auto; display:flex; flex-direction:column; gap:.5rem; gap:round(nearest, .5rem, 4px); }
.lh-rp-lock__list li { display:flex; align-items:center; justify-content:space-between; gap:1rem; gap:round(nearest, 1rem, 4px); background:var(--lwh-bg,#F7F5FB); border:1px solid var(--lwh-border); border-radius:11px; padding:.7rem 1rem; padding:round(nearest, .7rem, 4px) round(nearest, 1rem, 4px); font-weight:800; }
.lh-rp-lock__start { background:var(--lwh-purple,#6B2FA0); color:var(--lwh-yellow,#FFD700); text-decoration:none; font-size:.82rem; padding:.4rem .9rem; padding:round(nearest, .4rem, 4px) round(nearest, .9rem, 4px); border-radius:9px; }
.lh-rp-lock__actions { margin-top:1rem; margin-top:round(nearest, 1rem, 4px); }

.lh-rp-recommend { background:#fff; border:1px solid var(--lwh-border); border-radius:18px; padding:1.5rem; padding:round(nearest, 1.5rem, 4px); box-shadow:var(--lwh-shadow-sm); margin:1.2rem 0; margin:round(nearest, 1.2rem, 4px) 0; }
.lh-rp-recommend__title { font-family:'Fredoka',sans-serif; color:var(--lwh-purple,#6B2FA0); font-size:1.25rem; margin-bottom:.9rem; margin-bottom:round(nearest, .9rem, 4px); }
.lh-rp-recommend__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.7rem; gap:round(nearest, .7rem, 4px); }
.lh-rp-rec { display:flex; align-items:center; gap:.6rem; gap:round(nearest, .6rem, 4px); text-decoration:none; color:var(--lwh-ink,#1A1A2E); background:var(--lwh-bg,#F7F5FB); border:1px solid var(--lwh-border); border-radius:12px; padding:.7rem .9rem; padding:round(nearest, .7rem, 4px) round(nearest, .9rem, 4px); transition:border-color .15s, background .15s; }
.lh-rp-rec:hover { border-color:var(--lwh-grape,#9B4DFF); background:#fff; }
.lh-rp-rec__ico { width:34px; height:34px; border-radius:9px; background:#ede0fa; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex:0 0 auto; }
.lh-rp-rec__t { font-weight:800; font-size:.86rem; }

/* Student dashboard: section header with self-assign CTA */
.lh-sdash__sechead { display:flex; align-items:center; justify-content:space-between; gap:1rem; gap:round(nearest, 1rem, 4px); flex-wrap:wrap; margin-bottom:1rem; margin-bottom:round(nearest, 1rem, 4px); }
.lh-sdash__sechead .lh-sdash__h2 { margin:0; }

/* ============================================================
   Sprint 51 — Adult dashboard APP-SHELL (light default + dark toggle)
   Wraps the existing .lh-cp content in a topbar + right nav rail.
   ============================================================ */
.lh-app { --app-bg:#F7F5FB; --app-surface:#ffffff; --app-line:#e8e3f0; --app-text:#1A1A2E; --app-dim:#5a5a72; --app-rail:#ffffff; }
.lh-app[data-theme="dark"] { --app-bg:#0E0B1A; --app-surface:#171327; --app-line:#2a2342; --app-text:#F3EEFF; --app-dim:#a99fc6; --app-rail:#13101f; }
.lh-app { background:var(--app-bg); color:var(--app-text); min-height:100vh;min-height:100dvh; overflow-x:hidden; }
.lh-app__body { display:flex; align-items:flex-start; gap:0; width:100%; }
.lh-app__content { flex:1 1 auto; min-width:0; padding:1.25rem; padding:round(nearest, 1.25rem, 4px); }
.lh-app__rail { order:2; flex:0 0 auto; position:sticky; top:64px; align-self:flex-start; display:flex; flex-direction:column; gap:.35rem; gap:round(nearest, .35rem, 4px); padding:1rem .6rem; padding:round(nearest, 1rem, 4px) round(nearest, .6rem, 4px); background:var(--app-rail); border-left:1px solid var(--app-line); min-height:calc(100vh - 64px);min-height:calc(100dvh - 64px); width:66px; transition:width .2s ease; }
.lh-app__rail.is-expanded { width:214px; }
.lh-app__railtoggle { width:46px; height:46px; border:0; background:transparent; border-radius:12px; cursor:pointer; font-size:1.2rem; color:var(--app-dim); align-self:center; flex:0 0 auto; }
.lh-app__rail.is-expanded .lh-app__railtoggle { align-self:flex-start; }
.lh-app__navitem { height:46px; border-radius:12px; display:flex; align-items:center; gap:.8rem; gap:round(nearest, .8rem, 4px); font-size:1.2rem; text-decoration:none; color:var(--app-text); background:transparent; padding:0 .7rem; padding:0 round(nearest, .7rem, 4px); overflow:hidden; white-space:nowrap; transition:background .15s; }
.lh-app__navitem:hover { background:var(--app-bg); }
.lh-app__navitem.is-active { background:var(--lwh-purple,#6B2FA0); color:var(--lwh-yellow,#FFD700); }
/* Collapsed: labels hidden entirely (icons only). Expanded: labels show. */
.lh-app__navlbl { display:none; font-family:'Nunito',sans-serif; font-size:.9rem; font-weight:800; }
.lh-app__rail.is-expanded .lh-app__navlbl { display:inline; }

/* Top bar */
.lh-app__topbar { display:flex; align-items:center; gap:1rem; gap:round(nearest, 1rem, 4px); padding:.85rem 1.25rem; padding:round(nearest, .85rem, 4px) round(nearest, 1.25rem, 4px); background:var(--app-surface); border-bottom:1px solid var(--app-line); position:sticky; top:0; z-index:30; flex-wrap:wrap; }
.lh-app__brand { display:flex; align-items:center; gap:.7rem; gap:round(nearest, .7rem, 4px); }
.lh-app__brandtext { display:flex; flex-direction:column; }
.lh-app__title { font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:.45rem; gap:round(nearest, .45rem, 4px); color:var(--app-text); }
.lh-app__dot { width:9px; height:9px; border-radius:50%; background:var(--lwh-lime,#7BD938); box-shadow:0 0 8px var(--lwh-lime,#7BD938); }
.lh-app__sub { font-size:.78rem; color:var(--app-dim); }
.lh-app__topactions { margin-left:auto; display:flex; align-items:center; gap:.5rem; gap:round(nearest, .5rem, 4px); flex-wrap:wrap; }
.lh-app__themetoggle { background:var(--app-bg); border:1px solid var(--app-line); border-radius:9px; width:38px; height:38px; cursor:pointer; font-size:1rem; line-height:1; }

/* Body: content + right rail — see consolidated rules above. */

/* Dark-mode surfacing for the existing cards/sections inside the shell */
.lh-app[data-theme="dark"] .lh-card,
.lh-app[data-theme="dark"] .lh-cp__kpis,
.lh-app[data-theme="dark"] .lh-ovstat,
.lh-app[data-theme="dark"] .lh-kpi,
.lh-app[data-theme="dark"] .lh-progresscard,
.lh-app[data-theme="dark"] .lh-badgepanel { background:var(--app-surface); border-color:var(--app-line); color:var(--app-text); }
.lh-app[data-theme="dark"] .lh-cp__hint,
.lh-app[data-theme="dark"] .lh-cp__sub { color:var(--app-dim); }

/* Activity log */
.lh-activity__list { list-style:none; margin:0; padding:0; }
.lh-activity__item { display:flex; align-items:center; justify-content:space-between; gap:1rem; gap:round(nearest, 1rem, 4px); padding:.6rem .2rem; padding:round(nearest, .6rem, 4px) round(nearest, .2rem, 4px); border-bottom:1px solid var(--app-line); }
.lh-activity__item:last-child { border-bottom:0; }
.lh-activity__act { font-weight:700; font-size:.9rem; }
.lh-activity__when { font-size:.78rem; color:var(--app-dim); white-space:nowrap; }
.lh-cp__sechead { display:flex; align-items:center; gap:.5rem; gap:round(nearest, .5rem, 4px); margin:1.5rem 0 .8rem; margin:round(nearest, 1.5rem, 4px) 0 round(nearest, .8rem, 4px); }
.lh-cp__h2 { font-family:'Fredoka',sans-serif; color:var(--lwh-purple,#6B2FA0); font-size:1.25rem; margin:0; }
.lh-app[data-theme="dark"] .lh-cp__h2 { color:var(--lwh-grape,#9B4DFF); }

/* Mobile: rail becomes a bottom bar */
@media (max-width:860px){
	.lh-app__body { flex-direction:column; }
	.lh-app__rail { order:0; flex-direction:row; width:100% !important; min-height:0; border-left:0; border-bottom:1px solid var(--app-line); position:sticky; top:56px; overflow-x:auto; justify-content:space-between; }
	.lh-app__rail .lh-app__railtoggle { display:none; }
	.lh-app__rail .lh-app__navlbl { display:none; }
	.lh-app__content { width:100%; }
}

/* App-shell print styles — print/PDF ignores sticky + flex order, so give a
   clean linear layout with the topbar first and the rail hidden. */
@media print {
	.lh-app__rail { display:none !important; }
	.lh-app__body { display:block !important; }
	.lh-app__topbar { position:static !important; }
	.lh-app__content { padding:0 !important; }
	.lh-app { background:#fff !important; color:#000 !important; }
}

/* ============================================================
   Curriculum browse (/learn/) — 3-level pages. Light, fast, contentful.
   ============================================================ */
.lh-learn__wrap{max-width:1100px;margin:0 auto;padding:1.5rem 1.2rem 4rem;padding:round(nearest, 1.5rem, 4px) round(nearest, 1.2rem, 4px) round(nearest, 4rem, 4px);}
.lh-learn__top{display:flex;align-items:center;gap:1rem;gap:round(nearest, 1rem, 4px);flex-wrap:wrap;margin-bottom:1.2rem;margin-bottom:round(nearest, 1.2rem, 4px);}
.lh-learn__crumb{font-size:.82rem;color:var(--lwh-grey,#5a5a72);font-weight:700;}
.lh-learn__crumb a{color:var(--lwh-purple,#6B2FA0);text-decoration:none;}
.lh-learn__crumb .sep{opacity:.5;}
.lh-learn__ksdrop{margin-left:auto;font-size:.85rem;font-weight:800;}
.lh-learn__ksdrop select{font-family:inherit;font-weight:800;border:1.5px solid var(--lwh-border,#e9e3f3);border-radius:10px;padding:.45rem .7rem;padding:round(nearest, .45rem, 4px) round(nearest, .7rem, 4px);background:#fff;cursor:pointer;}
.lh-learn__hero{background:linear-gradient(120deg,var(--lwh-purple,#6B2FA0),var(--lwh-magenta,#8E24AA));color:#fff;border-radius:22px;padding:2rem;padding:round(nearest, 2rem, 4px);margin-bottom:1.6rem;margin-bottom:round(nearest, 1.6rem, 4px);}
.lh-learn__hero--subject{background:linear-gradient(120deg,var(--lwh-teal,#0D9488),var(--lwh-sky,#2BB3FF));}
.lh-learn__eyebrow{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.85;}
.lh-learn__h1{font-family:'Fredoka',sans-serif;font-size:2rem;margin:.3rem 0 .5rem;margin:round(nearest, .3rem, 4px) 0 round(nearest, .5rem, 4px);}
.lh-learn__lead{margin:0;max-width:680px;opacity:.95;line-height:1.55;}
.lh-learn__sectit{font-family:'Fredoka',sans-serif;color:var(--lwh-purple,#6B2FA0);font-size:1.25rem;margin:1.6rem 0 1rem;margin:round(nearest, 1.6rem, 4px) 0 round(nearest, 1rem, 4px);}
.lh-learn__grid{display:grid;gap:1rem;gap:round(nearest, 1rem, 4px);}
.lh-learn__grid--subjects{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.lh-learn__grid--topics{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));}
.lh-learn__subjcard,.lh-learn__topiccard{background:#fff;border:1px solid var(--lwh-border,#e9e3f3);border-radius:18px;padding:1.3rem;padding:round(nearest, 1.3rem, 4px);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.5rem;gap:round(nearest, .5rem, 4px);transition:transform .15s,box-shadow .15s,border-color .15s;}
.lh-learn__subjcard:hover,.lh-learn__topiccard:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(74,20,140,.1);border-color:var(--lwh-grape,#9B4DFF);}
.lh-learn__ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:#f0e7fa;}
.lh-learn__subjcard h3{font-family:'Fredoka',sans-serif;font-size:1.1rem;margin:0;}
.lh-learn__subjcard p,.lh-learn__topiccard p{margin:0;font-size:.84rem;color:var(--lwh-grey,#5a5a72);line-height:1.45;flex:1;}
.lh-learn__meta,.lh-learn__go{font-size:.74rem;font-weight:800;color:var(--lwh-purple,#6B2FA0);}
.lh-learn__topiccard h4{font-family:'Fredoka',sans-serif;font-size:1rem;margin:0 0 .3rem;margin:0 0 round(nearest, .3rem, 4px);}
/* sliders */
.lh-learn__slider{margin:1.4rem 0;margin:round(nearest, 1.4rem, 4px) 0;}
.lh-learn__track{display:flex;gap:.9rem;gap:round(nearest, .9rem, 4px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;padding-bottom:round(nearest, .5rem, 4px);-webkit-overflow-scrolling:touch;}
.lh-learn__slide{flex:0 0 200px;scroll-snap-align:start;background:#fff;border:1px solid var(--lwh-border,#e9e3f3);border-radius:14px;padding:1rem;padding:round(nearest, 1rem, 4px);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.4rem;gap:round(nearest, .4rem, 4px);transition:border-color .15s;}
.lh-learn__slide:hover{border-color:var(--lwh-grape,#9B4DFF);}
.lh-learn__slideic{font-size:1.5rem;}
.lh-learn__slidetitle{font-weight:800;font-size:.88rem;line-height:1.3;}
.lh-learn__slidemeta{font-size:.72rem;color:var(--lwh-grey,#5a5a72);text-transform:uppercase;font-weight:800;}
/* topic page */
.lh-learn__lead{margin-bottom:1.4rem;margin-bottom:round(nearest, 1.4rem, 4px);}
.lh-learn--topic .lh-learn__lead{background:#fff;border:1px solid var(--lwh-border,#e9e3f3);border-radius:16px;padding:1.4rem 1.6rem;padding:round(nearest, 1.4rem, 4px) round(nearest, 1.6rem, 4px);color:var(--lwh-grey,#5a5a72);}
.lh-learn--topic .lh-learn__h1{color:var(--lwh-ink,#1A1A2E);}
.lh-learn__filterbar{display:flex;gap:.5rem;gap:round(nearest, .5rem, 4px);flex-wrap:wrap;margin-bottom:1rem;margin-bottom:round(nearest, 1rem, 4px);}
.lh-learn__fpill{font-size:.78rem;font-weight:800;padding:.4rem .8rem;padding:round(nearest, .4rem, 4px) round(nearest, .8rem, 4px);border-radius:999px;border:1.5px solid var(--lwh-border,#e9e3f3);background:#fff;cursor:pointer;font-family:inherit;}
.lh-learn__fpill.is-active{background:var(--lwh-purple,#6B2FA0);color:#fff;border-color:var(--lwh-purple,#6B2FA0);}
.lh-learn__reslist{display:grid;gap:.7rem;gap:round(nearest, .7rem, 4px);}
.lh-learn__rescard{display:flex;align-items:center;gap:1rem;gap:round(nearest, 1rem, 4px);background:#fff;border:1px solid var(--lwh-border,#e9e3f3);border-radius:14px;padding:.9rem 1.1rem;padding:round(nearest, .9rem, 4px) round(nearest, 1.1rem, 4px);text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;}
.lh-learn__rescard:hover{border-color:var(--lwh-grape,#9B4DFF);box-shadow:0 6px 18px rgba(74,20,140,.08);}
.lh-learn__ric{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:#f0e7fa;flex:0 0 auto;}
.lh-learn__rbody{flex:1;min-width:0;display:flex;flex-direction:column;}
.lh-learn__rtitle{font-weight:800;font-size:.96rem;}
.lh-learn__rmeta{font-size:.76rem;color:var(--lwh-grey,#5a5a72);text-transform:uppercase;font-weight:700;}
.lh-learn__rgo{background:var(--lwh-purple,#6B2FA0);color:var(--lwh-yellow,#FFD700);border-radius:9px;padding:.5rem .9rem;padding:round(nearest, .5rem, 4px) round(nearest, .9rem, 4px);font-weight:800;font-size:.8rem;flex:0 0 auto;}
.lh-learn__boards{display:flex;gap:.5rem;gap:round(nearest, .5rem, 4px);flex-wrap:wrap;align-items:center;margin-bottom:1.2rem;margin-bottom:round(nearest, 1.2rem, 4px);}
.lh-learn__boardlbl{font-size:.8rem;font-weight:800;color:var(--lwh-grey,#5a5a72);}
.lh-learn__board{font-size:.78rem;font-weight:800;padding:.4rem .8rem;padding:round(nearest, .4rem, 4px) round(nearest, .8rem, 4px);border-radius:999px;border:1.5px solid var(--lwh-border,#e9e3f3);background:#fff;cursor:pointer;font-family:inherit;}
.lh-learn__board.is-active{background:var(--lwh-teal,#0D9488);color:#fff;border-color:var(--lwh-teal,#0D9488);}
.lh-learn__empty{text-align:center;padding:2.5rem 1rem;padding:round(nearest, 2.5rem, 4px) round(nearest, 1rem, 4px);color:var(--lwh-grey,#5a5a72);}
@media(max-width:700px){.lh-learn__h1{font-size:1.5rem;}.lh-learn__hero{padding:1.4rem;padding:round(nearest, 1.4rem, 4px);}}

/* ============================================================
   Homepage v2 — conversion-focused, auth-aware. Server-rendered.
   ============================================================ */
.lh-hp{--hp-ink:#16121f;--hp-dim:#5d5a6e;}
.lh-hp__hero{background:radial-gradient(120% 120% at 80% 0%,#7d3cc4 0%,var(--lwh-purple,#6B2FA0) 40%,var(--lwh-deep,#4A148C) 100%);color:#fff;overflow:hidden;position:relative;}
.lh-hp__hero::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:rgba(255,255,255,.06);right:-120px;top:-160px;}
.lh-hp__hero-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;gap:round(nearest, 2.5rem, 4px);align-items:center;padding:4.5rem 1.4rem 5rem;padding:round(nearest, 4.5rem, 4px) round(nearest, 1.4rem, 4px) round(nearest, 5rem, 4px);position:relative;z-index:1;}
.lh-hp__eyebrow{display:inline-flex;align-items:center;gap:.5rem;gap:round(nearest, .5rem, 4px);background:rgba(255,255,255,.14);padding:.4rem .9rem;padding:round(nearest, .4rem, 4px) round(nearest, .9rem, 4px);border-radius:999px;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;}
.lh-hp__eyebrow--dark{background:none;color:var(--lwh-grape,#9B4DFF);padding:0;}
.lh-hp__hero h1{font-family:'Fredoka',sans-serif;font-size:3.1rem;line-height:1.08;margin:1rem 0;margin:round(nearest, 1rem, 4px) 0;}
.lh-hp__hl{color:var(--lwh-yellow,#FFD700);}
.lh-hp__hero-sub{font-size:1.15rem;opacity:.94;margin:0 0 1.8rem;margin:0 0 round(nearest, 1.8rem, 4px);max-width:540px;}
.lh-hp__cta{display:flex;gap:.8rem;gap:round(nearest, .8rem, 4px);flex-wrap:wrap;align-items:center;}
.lh-hp__trust{display:flex;gap:1.6rem;gap:round(nearest, 1.6rem, 4px);margin-top:2rem;margin-top:round(nearest, 2rem, 4px);flex-wrap:wrap;}
.lh-hp__trust b{font-family:'Fredoka',sans-serif;font-size:1.5rem;display:block;color:var(--lwh-yellow,#FFD700);}
.lh-hp__trust span{font-size:.82rem;opacity:.85;font-weight:700;}
.lh-hp__hero-panel{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:1.4rem;padding:round(nearest, 1.4rem, 4px);}
.lh-hp__hero-panel h4{font-family:'Fredoka',sans-serif;font-size:.95rem;margin:0 0 .8rem;margin:0 0 round(nearest, .8rem, 4px);opacity:.9;}
.lh-hp__minicard{background:#fff;color:var(--hp-ink);border-radius:14px;padding:.8rem 1rem;padding:round(nearest, .8rem, 4px) round(nearest, 1rem, 4px);display:flex;align-items:center;gap:.8rem;gap:round(nearest, .8rem, 4px);margin-bottom:.6rem;margin-bottom:round(nearest, .6rem, 4px);text-decoration:none;}
.lh-hp__minicard:hover{transform:translateY(-2px);}
.lh-hp__mic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex:0 0 auto;}
.lh-hp__minicard b{font-size:.9rem;display:block;}
.lh-hp__minicard small{font-size:.74rem;color:var(--hp-dim);font-weight:700;}
.lh-hp__trustbar{background:#fff;border-bottom:1px solid var(--lwh-border,#ece6f5);display:flex;align-items:center;justify-content:center;gap:2.5rem;gap:round(nearest, 2.5rem, 4px);padding:1.3rem;padding:round(nearest, 1.3rem, 4px);flex-wrap:wrap;color:var(--hp-dim);font-weight:800;font-size:.9rem;}
.lh-hp__section{max-width:1160px;margin:0 auto;padding:4.5rem 1.4rem;padding:round(nearest, 4.5rem, 4px) round(nearest, 1.4rem, 4px);}
.lh-hp__section--tight{padding-top:0;}
.lh-hp__section--band{max-width:none;background:#fff;border-top:1px solid var(--lwh-border,#ece6f5);border-bottom:1px solid var(--lwh-border,#ece6f5);}
.lh-hp__section--band .lh-hp__sechead,.lh-hp__section--band .lh-hp__audgrid{max-width:1160px;margin-left:auto;margin-right:auto;}
.lh-hp__sechead{text-align:center;max-width:660px;margin:0 auto 2.6rem;margin:0 auto round(nearest, 2.6rem, 4px);}
.lh-hp__sechead h2{font-family:'Fredoka',sans-serif;font-size:2.1rem;margin:.5rem 0 .7rem;margin:round(nearest, .5rem, 4px) 0 round(nearest, .7rem, 4px);color:var(--hp-ink);}
.lh-hp__sechead p{margin:0;color:var(--hp-dim);font-size:1.05rem;}
.lh-hp__ksgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;gap:round(nearest, 1.1rem, 4px);}
.lh-hp__kscard{border-radius:20px;padding:1.6rem;padding:round(nearest, 1.6rem, 4px);color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.25rem;gap:round(nearest, .25rem, 4px);min-height:172px;text-decoration:none;transition:transform .15s,box-shadow .15s;}
.lh-hp__kscard:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(74,20,140,.2);}
.lh-hp__kscard--ks1{background:linear-gradient(135deg,#7d3cc4,#9B4DFF);}
.lh-hp__kscard--ks2{background:linear-gradient(135deg,#0D9488,#2BB3FF);}
.lh-hp__kscard--ks3{background:linear-gradient(135deg,#C75C00,#FF7A1A);}
.lh-hp__kscard--gcse{background:linear-gradient(135deg,#C2185B,#E91E63);}
.lh-hp__ksage{font-size:.74rem;font-weight:800;opacity:.92;text-transform:uppercase;letter-spacing:.05em;}
.lh-hp__kscard h3{font-family:'Fredoka',sans-serif;font-size:1.55rem;margin:.2rem 0;margin:round(nearest, .2rem, 4px) 0;}
.lh-hp__ksyr{font-size:.86rem;opacity:.92;}
.lh-hp__kscnt{margin-top:auto;font-size:.8rem;font-weight:800;opacity:.95;padding-top:.6rem;padding-top:round(nearest, .6rem, 4px);}
.lh-hp__ksgo{position:absolute;right:1.3rem;top:1.3rem;font-weight:900;font-size:1.3rem;opacity:.8;}
.lh-hp__typegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;gap:round(nearest, 1.2rem, 4px);}
.lh-hp__type{background:#fff;border:1px solid var(--lwh-border,#ece6f5);border-radius:18px;padding:1.6rem;padding:round(nearest, 1.6rem, 4px);transition:transform .15s,box-shadow .15s,border-color .15s;}
.lh-hp__type:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(74,20,140,.1);border-color:var(--lwh-grape,#9B4DFF);}
.lh-hp__typeic{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin-bottom:.9rem;margin-bottom:round(nearest, .9rem, 4px);}
.lh-hp__type h3{font-family:'Fredoka',sans-serif;font-size:1.15rem;margin:0 0 .4rem;margin:0 0 round(nearest, .4rem, 4px);}
.lh-hp__type p{margin:0;color:var(--hp-dim);font-size:.9rem;}
.lh-hp__audgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;gap:round(nearest, 1.2rem, 4px);}
.lh-hp__aud{border-radius:20px;padding:1.8rem;padding:round(nearest, 1.8rem, 4px);color:#fff;}
.lh-hp__aud--parent{background:linear-gradient(140deg,#6B2FA0,#8E24AA);}
.lh-hp__aud--teacher{background:linear-gradient(140deg,#0D9488,#13a99b);}
.lh-hp__aud--student{background:linear-gradient(140deg,#FF7A1A,#E91E63);}
.lh-hp__audic{font-size:2rem;}
.lh-hp__aud h3{font-family:'Fredoka',sans-serif;font-size:1.3rem;margin:.4rem 0;margin:round(nearest, .4rem, 4px) 0;}
.lh-hp__aud ul{margin:.4rem 0 0;margin:round(nearest, .4rem, 4px) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.5rem;gap:round(nearest, .5rem, 4px);}
.lh-hp__aud li{font-size:.9rem;opacity:.95;padding-left:1.5rem;padding-left:round(nearest, 1.5rem, 4px);position:relative;}
.lh-hp__aud li::before{content:"✓";position:absolute;left:0;font-weight:900;color:var(--lwh-yellow,#FFD700);}
.lh-hp__about{background:#fff;border:1px solid var(--lwh-border,#ece6f5);border-radius:24px;padding:2.6rem;padding:round(nearest, 2.6rem, 4px);display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;gap:round(nearest, 2.2rem, 4px);align-items:center;}
.lh-hp__about h2{font-family:'Fredoka',sans-serif;font-size:1.9rem;margin:.4rem 0 .8rem;margin:round(nearest, .4rem, 4px) 0 round(nearest, .8rem, 4px);}
.lh-hp__about p{color:var(--hp-dim);margin:0 0 1rem;margin:0 0 round(nearest, 1rem, 4px);}
.lh-hp__aboutstats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;gap:round(nearest, 1rem, 4px);}
.lh-hp__astat{background:var(--lwh-bg,#FAF8FD);border-radius:14px;padding:1.1rem;padding:round(nearest, 1.1rem, 4px);}
.lh-hp__astat b{font-family:'Fredoka',sans-serif;font-size:1.6rem;color:var(--lwh-purple,#6B2FA0);display:block;}
.lh-hp__astat span{font-size:.84rem;color:var(--hp-dim);font-weight:700;}
.lh-hp__welcome{background:linear-gradient(125deg,var(--lwh-teal,#0D9488),var(--lwh-sky,#2BB3FF));color:#fff;border-radius:24px;padding:2.4rem;padding:round(nearest, 2.4rem, 4px);}
.lh-hp__welcome h2{font-family:'Fredoka',sans-serif;font-size:1.8rem;margin:.4rem 0 .5rem;margin:round(nearest, .4rem, 4px) 0 round(nearest, .5rem, 4px);}
.lh-hp__welcome p{opacity:.94;margin:0 0 1.2rem;margin:0 0 round(nearest, 1.2rem, 4px);}
.lh-hp__promo{background:linear-gradient(125deg,var(--lwh-deep,#4A148C),var(--lwh-purple,#6B2FA0) 60%,var(--lwh-magenta,#8E24AA));color:#fff;border-radius:28px;padding:3rem;padding:round(nearest, 3rem, 4px);text-align:center;position:relative;overflow:hidden;}
.lh-hp__promo h2{font-family:'Fredoka',sans-serif;font-size:2.2rem;margin:.4rem 0 .6rem;margin:round(nearest, .4rem, 4px) 0 round(nearest, .6rem, 4px);}
.lh-hp__promo > p{opacity:.92;max-width:560px;margin:0 auto 1.8rem;margin:0 auto round(nearest, 1.8rem, 4px);font-size:1.08rem;}
.lh-hp__plangrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;gap:round(nearest, 1.1rem, 4px);text-align:left;margin-top:1.5rem;margin-top:round(nearest, 1.5rem, 4px);}
.lh-hp__plan{background:#fff;color:var(--hp-ink);border-radius:18px;padding:1.6rem;padding:round(nearest, 1.6rem, 4px);display:flex;flex-direction:column;}
.lh-hp__plan--feat{outline:3px solid var(--lwh-yellow,#FFD700);}
.lh-hp__ptier{font-weight:800;color:var(--lwh-purple,#6B2FA0);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;}
.lh-hp__price{font-family:'Fredoka',sans-serif;font-size:1.9rem;margin:.3rem 0;margin:round(nearest, .3rem, 4px) 0;}
.lh-hp__price small{font-size:.85rem;color:var(--hp-dim);font-weight:700;}
.lh-hp__plan ul{list-style:none;padding:0;margin:.8rem 0 1.2rem;margin:round(nearest, .8rem, 4px) 0 round(nearest, 1.2rem, 4px);display:flex;flex-direction:column;gap:.5rem;gap:round(nearest, .5rem, 4px);flex:1;}
.lh-hp__plan li{font-size:.86rem;padding-left:1.4rem;padding-left:round(nearest, 1.4rem, 4px);position:relative;}
.lh-hp__plan li::before{content:"✓";position:absolute;left:0;color:var(--lwh-teal,#0D9488);font-weight:900;}
.lh-hp__ribbon{background:var(--lwh-yellow,#FFD700);color:var(--lwh-deep,#4A148C);font-size:.7rem;font-weight:800;padding:.25rem .7rem;padding:round(nearest, .25rem, 4px) round(nearest, .7rem, 4px);border-radius:999px;align-self:flex-start;margin-bottom:.6rem;margin-bottom:round(nearest, .6rem, 4px);}
.lh-hp__finalcta{text-align:center;background:#fff;border:1px solid var(--lwh-border,#ece6f5);border-radius:24px;padding:3rem;padding:round(nearest, 3rem, 4px);}
.lh-hp__finalcta h2{font-family:'Fredoka',sans-serif;font-size:2rem;margin:0 0 .6rem;margin:0 0 round(nearest, .6rem, 4px);}
.lh-hp__finalcta p{color:var(--hp-dim);max-width:480px;margin:0 auto 1.6rem;margin:0 auto round(nearest, 1.6rem, 4px);}
.lh-hp__news{background:#fff;border:2px dashed var(--lwh-border,#ece6f5);border-radius:20px;padding:2.2rem;padding:round(nearest, 2.2rem, 4px);text-align:center;}
.lh-hp__news h3{font-family:'Fredoka',sans-serif;font-size:1.4rem;margin:0 0 .4rem;margin:0 0 round(nearest, .4rem, 4px);}
.lh-hp__news p{color:var(--hp-dim);margin:0 0 1.2rem;margin:0 0 round(nearest, 1.2rem, 4px);}
.lh-btn--hero-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5);}
.lh-btn--white{background:#fff;color:var(--lwh-purple,#6B2FA0);}
.lh-btn--lg{padding:1.1rem 2.1rem;padding:round(nearest, 1.1rem, 4px) round(nearest, 2.1rem, 4px);font-size:1.08rem;}
@media(max-width:900px){.lh-hp__hero-inner,.lh-hp__about,.lh-hp__welcome{grid-template-columns:1fr;}.lh-hp__hero h1{font-size:2.3rem;}.lh-hp__ksgrid,.lh-hp__typegrid,.lh-hp__audgrid,.lh-hp__plangrid,.lh-hp__aboutstats{grid-template-columns:1fr;}}

/* ============================================================
   Resource completion control (Sprint 41) — explicit "mark done"
   for documents & embeds that can't always self-report finishing.
   ============================================================ */
.lh-rp-complete{display:flex;align-items:center;justify-content:center;gap:.8rem;gap:round(nearest, .8rem, 4px);flex-wrap:wrap;margin:1rem 0 .5rem;margin:round(nearest, 1rem, 4px) 0 round(nearest, .5rem, 4px);padding:1rem 1.2rem;padding:round(nearest, 1rem, 4px) round(nearest, 1.2rem, 4px);background:var(--lwh-bg,#FAF8FD);border:1px solid var(--lwh-border,#ece6f5);border-radius:14px;}
.lh-rp-complete.is-done{background:#f0fdf4;border-color:#c8e6d3;}
.lh-rp-complete__btn{cursor:pointer;}
.lh-rp-complete__btn[disabled]{opacity:.7;cursor:default;}
.lh-rp-complete__done{font-family:'Fredoka',sans-serif;font-weight:700;color:#1f7a47;font-size:1.05rem;display:inline-flex;align-items:center;gap:.4rem;gap:round(nearest, .4rem, 4px);}
.lh-rp-complete--anon{justify-content:space-between;}
.lh-rp-complete__hint{font-size:.9rem;color:var(--lwh-dim,#5d5a6e);font-weight:600;}

/* ============================================================
   CATALOGUE REDESIGN (2026) — cover-band grid cards + chip/segment filters
   Markup + AJAX filter JS unchanged; this is a visual reskin only.
   ============================================================ */
/* ---- GRID: colour cover band (concept A) ---- */
.lh-res-grid:not(.lh-grid--list) .lh-rc{border-radius:22px;border:1px solid #E7E0F7;box-shadow:0 6px 18px rgba(74,20,140,.08)}
.lh-res-grid:not(.lh-grid--list) .lh-rc__spine,
.lh-res-grid:not(.lh-grid--list) .lh-rc__icon{display:none!important}
.lh-rc__cover{display:none}
.lh-res-grid:not(.lh-grid--list) .lh-rc__cover{display:flex;align-items:center;gap:.6rem;gap:round(nearest, .6rem, 4px);height:74px;padding:0 1rem;padding:0 round(nearest, 1rem, 4px);
  background:linear-gradient(135deg,var(--rc1,#6D28D9),var(--rc2,#43159E));color:#fff;position:relative;overflow:hidden}
.lh-res-grid:not(.lh-grid--list) .lh-rc__cover::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 200% at 100% 0,rgba(255,255,255,.22),transparent 50%)}
.lh-rc__cover-ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:1.3rem;flex:none;position:relative;z-index:1}
.lh-rc__cover-meta{position:relative;z-index:1;line-height:1.12}
.lh-rc__cover-type{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.92rem;display:block}
.lh-rc__cover-dur{font-size:.72rem;opacity:.92}
.lh-rc__cover-tier{position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.92);color:#0f8f4d;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.64rem;padding:.14rem .5rem;padding:round(nearest, .14rem, 4px) round(nearest, .5rem, 4px);border-radius:999px}
.lh-rc__cover-tier.lh-tier--pro{color:#6D28D9}.lh-rc__cover-tier.lh-tier--elite{color:#D11E45}
.lh-res-grid:not(.lh-grid--list) .lh-rc__title{font-family:'Baloo 2',sans-serif}
.lh-res-grid:not(.lh-grid--list) .lh-rc__main{padding-top:.9rem;padding-top:round(nearest, .9rem, 4px)}
.lh-res-grid:not(.lh-grid--list) .lh-rc__perf{display:none}
.lh-res-grid:not(.lh-grid--list) .lh-rc__foot .lh-rc__tier{display:none}
.lh-res-grid:not(.lh-grid--list) .lh-rc__go{background:#28C76F;box-shadow:0 4px 0 #0f8f4d}
/* ---- LIST: hide cover, keep the existing tidy row ---- */
.lh-grid--list .lh-rc__cover{display:none!important}
.lh-grid--list .lh-rc{border-radius:16px}

/* ============================================================
   CATALOGUE FILTER SIDEBAR — 2026 consolidated rebuild.
   This is the single authoritative styling for the whole sidebar
   (card, search, filter blocks, chip/radio options, clear, CTA).
   Appended last so it cleanly supersedes the older scattered
   .lh-filterdrop rules earlier in this file.
   ============================================================ */
.lh-catalogue__sidebar{
  background:#fff;
  border:1.5px solid var(--lwh-border);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(20,8,60,.06);
  display:flex; flex-direction:column;
}
/* free-views pill header */
.lh-catalogue__sidebar-pill.lh-deck__top--free{
  margin:0; border-radius:0; text-align:center;
  background:linear-gradient(135deg,var(--lwh-coral),#FF7AA2);
  color:#fff; padding:.85rem 1.15rem; padding:round(nearest, .85rem, 4px) round(nearest, 1.15rem, 4px); font-weight:800;
}
.lh-catalogue__sidebar-pill.lh-deck__top--free a{color:#fff;text-decoration:underline;}

/* Subject-hub → /learn/ interlink band (turns /maths/ etc. into true hubs) */
.lh-cat-stagelinks{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;gap:round(nearest, .5rem, 4px);margin:0 0 1.1rem;margin:0 0 round(nearest, 1.1rem, 4px);padding:.85rem 1rem;padding:round(nearest, .85rem, 4px) round(nearest, 1rem, 4px);background:var(--lwh-coral-light,#FCE7F0);border:1.5px solid var(--lwh-border,#EADff2);border-radius:14px;}
.lh-cat-stagelinks__lbl{font-family:'Baloo 2','Fredoka',sans-serif;font-weight:800;font-size:.9rem;color:var(--lwh-ink,#2A2150);margin-right:.15rem;margin-right:round(nearest, .15rem, 4px);}
.lh-cat-stagelinks__pill{display:inline-flex;align-items:center;gap:.3rem;gap:round(nearest, .3rem, 4px);padding:.4rem .9rem;padding:round(nearest, .4rem, 4px) round(nearest, .9rem, 4px);border-radius:var(--lwh-radius-pill,999px);background:#fff;border:1.5px solid var(--lwh-border,#EADff2);color:var(--lwh-ink,#2A2150);font-family:'Nunito',sans-serif;font-weight:800;font-size:.85rem;text-decoration:none;transition:background .15s,border-color .15s,color .15s,transform .1s;}
.lh-cat-stagelinks__pill:hover{background:var(--lwh-coral,#E91E63);border-color:var(--lwh-coral,#E91E63);color:#fff;transform:translateY(-1px);}

/* search row */
.lh-catalogue__search{display:flex;gap:.5rem;gap:round(nearest, .5rem, 4px);padding:.9rem 1.15rem;padding:round(nearest, .9rem, 4px) round(nearest, 1.15rem, 4px);border-bottom:1px solid #F1ECF9;margin:0;}
.lh-catalogue__search-input{flex:1;min-width:0;border:2px solid var(--lwh-border);border-radius:var(--lwh-radius-pill);padding:.6rem .95rem;padding:round(nearest, .6rem, 4px) round(nearest, .95rem, 4px);font-family:'Nunito',sans-serif;font-weight:700;font-size:.9rem;outline:none;transition:border-color .15s;}
.lh-catalogue__search-input:focus{border-color:var(--lwh-coral);}
.lh-catalogue__search-btn{width:44px;height:44px;flex:0 0 auto;border:0;border-radius:50%;background:var(--lwh-coral);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;}

/* filter blocks */
.lh-catalogue__sidebar .lh-catalogue__filterblock{margin:0;border:0;border-top:1px solid #F1ECF9;border-radius:0;background:transparent;}
.lh-catalogue__sidebar .lh-filterdrop{border:0;border-radius:0;overflow:visible;background:transparent;}
.lh-catalogue__sidebar .lh-filterdrop[open]{background:#FFFAFC;}
.lh-filterdrop__summary{display:flex;align-items:center;gap:.7rem;gap:round(nearest, .7rem, 4px);padding:.8rem 1.15rem;padding:round(nearest, .8rem, 4px) round(nearest, 1.15rem, 4px);cursor:pointer;list-style:none;font-family:'Baloo 2','Fredoka',sans-serif;}
.lh-filterdrop__summary::-webkit-details-marker{display:none;}
.lh-filterdrop__ic{width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:var(--lwh-coral-light);color:var(--lwh-coral);display:flex;align-items:center;justify-content:center;}
.lh-filterdrop__ic svg{width:16px;height:16px;}
.lh-filterdrop__label{flex:1;font-family:'Baloo 2','Fredoka',sans-serif;font-weight:700;font-size:.92rem;color:var(--lwh-ink);}
.lh-filterdrop__count{font-size:.76rem;font-weight:700;color:var(--lwh-grey);white-space:nowrap;background:none;padding:0;border-radius:0;}
.lh-filterdrop.is-set .lh-filterdrop__count{color:#fff;background:var(--lwh-coral);padding:.16rem .55rem;padding:round(nearest, .16rem, 4px) round(nearest, .55rem, 4px);border-radius:var(--lwh-radius-pill);font-size:.72rem;}
.lh-filterdrop__caret{width:16px;height:16px;flex:0 0 auto;color:var(--lwh-grey);transition:transform .2s;display:flex;}
.lh-filterdrop__caret svg{width:16px;height:16px;}
.lh-filterdrop[open] .lh-filterdrop__caret{transform:rotate(180deg);color:var(--lwh-coral);}

/* option body — chips that wrap, never clipped */
.lh-catalogue__sidebar .lh-filterdrop__body{
  display:flex;flex-wrap:wrap;gap:.45rem;gap:round(nearest, .45rem, 4px);
  padding:.1rem 1.15rem 1rem;
  padding:round(nearest, .1rem, 4px) round(nearest, 1.15rem, 4px) round(nearest, 1rem, 4px);
  max-height:none;overflow:visible;
}
.lh-catalogue__sidebar .lh-filterdrop__option{
  display:inline-flex;align-items:center;gap:.3rem;gap:round(nearest, .3rem, 4px);margin:0;max-width:100%;
  padding:.42rem .8rem;
  padding:round(nearest, .42rem, 4px) round(nearest, .8rem, 4px);
  border:1.5px solid var(--lwh-border);border-radius:var(--lwh-radius-pill);
  background:#fff;color:var(--lwh-ink);
  font-family:'Nunito',sans-serif;font-weight:700;font-size:.84rem;line-height:1.15;
  cursor:pointer;transition:border-color .15s,background .15s,color .15s,box-shadow .15s;
}
.lh-catalogue__sidebar .lh-filterdrop__option span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
/* hide BOTH native checkbox and radio — the chip itself shows state */
.lh-catalogue__sidebar .lh-filterdrop__option input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.lh-catalogue__sidebar .lh-filterdrop__option:hover{border-color:var(--lwh-coral);color:var(--lwh-coral);}
.lh-catalogue__sidebar .lh-filterdrop__option:has(input:checked){background:var(--lwh-coral);border-color:var(--lwh-coral);color:#fff;box-shadow:0 4px 12px rgba(233,30,99,.25);}
.lh-catalogue__sidebar .lh-filterdrop__option:has(input:checked) span{color:#fff;}
/* coloured key-stage chips when active */
[data-lh-filterblock="stage"] .lh-filterdrop__option[data-val="early-years-eyfs"]:has(input:checked),
[data-lh-filterblock="stage"] .lh-filterdrop__option[data-val="eyfs"]:has(input:checked){background:#28C76F;border-color:#28C76F;box-shadow:none;}
[data-lh-filterblock="stage"] .lh-filterdrop__option[data-val="key-stage-1"]:has(input:checked){background:#3DA5F4;border-color:#3DA5F4;box-shadow:none;}
[data-lh-filterblock="stage"] .lh-filterdrop__option[data-val="key-stage-2"]:has(input:checked){background:#FF9F1C;border-color:#FF9F1C;box-shadow:none;}
[data-lh-filterblock="stage"] .lh-filterdrop__option[data-val="key-stage-3"]:has(input:checked){background:#FF5D7D;border-color:#FF5D7D;box-shadow:none;}
[data-lh-filterblock="stage"] .lh-filterdrop__option[data-val="gcse"]:has(input:checked){background:#B57BFF;border-color:#B57BFF;box-shadow:none;}

/* clear-all link */
.lh-catalogue__clear{display:block;text-align:center;margin:0;padding:.85rem 1.15rem;padding:round(nearest, .85rem, 4px) round(nearest, 1.15rem, 4px);border-top:1px solid #F1ECF9;font-family:'Nunito',sans-serif;font-weight:800;font-size:.85rem;color:var(--lwh-coral);}
.lh-catalogue__clear:hover{background:var(--lwh-coral-light);}

/* ==========================================================================
   41 — COMPACT DROPDOWN FILTER SIDEBAR (purple). One filter open at a time
   (JS in shortcodes). On desktop each filter's options open as a FLOATING
   POPOVER, so the sidebar stays a fixed, tidy height however many are picked.
   ========================================================================== */
.lh-catalogue__search-input:focus { border-color: var(--lwh-purple, #6B2FA0); }
.lh-catalogue__search-btn { background: var(--lwh-purple, #6B2FA0); }
.lh-deck__top--free { background: linear-gradient(135deg, var(--lwh-purple, #6B2FA0), #8B43E8); }
.lh-deck__top--user { background: linear-gradient(135deg, var(--lwh-purple, #6B2FA0), #8B43E8); }
.lh-catalogue__filterblock { position: relative; }
.lh-filterdrop__summary { padding: .58rem 1.05rem; padding: round(nearest, .58rem, 4px) round(nearest, 1.05rem, 4px); }
.lh-filterdrop__ic { width: 26px; height: 26px; }
.lh-filterdrop__label { font-size: .88rem; }
.lh-filterdrop[open] .lh-filterdrop__caret { transform: rotate(180deg); color: var(--lwh-purple, #6B2FA0); }
.lh-filterdrop[open] { background: #F7F3FE; }
.lh-filterdrop.is-set .lh-filterdrop__count { background: var(--lwh-purple, #6B2FA0); color: #fff; }
.lh-filterdrop__option { font-size: .84rem; }
.lh-filterdrop__option input { accent-color: var(--lwh-purple, #6B2FA0); }
.lh-filterdrop__option:hover { background: #F3EEFC; color: var(--lwh-purple-dark, #4A148C); }
.lh-catalogue__clear { color: var(--lwh-purple, #6B2FA0); }
.lh-catalogue__clear:hover { background: #F3EEFC; }

@media (min-width: 960px) {
  .lh-catalogue__sidebar { overflow: visible; max-height: none; }
  .lh-filterdrop__summary { position: relative; z-index: 1; }
  .lh-filterdrop__body {
    position: absolute; top: calc(100% - 4px); left: .7rem; right: .7rem;
    z-index: 60; background: #fff; border: 1.5px solid var(--lwh-border, #E7E0F7);
    border-radius: 14px; padding: .45rem; padding: round(nearest, .45rem, 4px); margin: 0;
    box-shadow: 0 16px 42px rgba(74,20,140,.20);
    max-height: 300px; overflow-y: auto;
  }
  .lh-filterdrop__body .lh-filterdrop__option { padding: .42rem .55rem; padding: round(nearest, .42rem, 4px) round(nearest, .55rem, 4px); border-radius: 9px; }
}

/* ==========================================================================
   42 — SIDEBAR REVISION (user): transparent + sticky container, each filter is
   a dropdown control whose options open as a floating menu (not inline buttons),
   strictly one open at a time (JS closes the others). Purple throughout.
   ========================================================================== */
.lh-catalogue__sidebar { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; padding: 0 !important; gap: .5rem !important; gap: round(nearest, .5rem, 4px) !important; }
@media (min-width: 960px) {
  .lh-catalogue__sidebar { position: sticky; top: 1rem; align-self: start; max-height: none; overflow: visible; }
}
/* search sits flush on the transparent column */
.lh-catalogue__search { padding: 0 0 .6rem !important; padding: 0 0 round(nearest, .6rem, 4px) !important; border-bottom: 0 !important; }
.lh-catalogue__search-input:focus { border-color: var(--lwh-purple, #6B2FA0); }
.lh-catalogue__search-btn { background: var(--lwh-purple, #6B2FA0); }
/* welcome / free-views box flattened so the column reads as "no background" */
.lh-deck__top { border-radius: 14px; }

/* each filter = a self-contained rounded dropdown control */
.lh-catalogue__filterblock { position: relative; border: 0 !important; margin: 0 0 .5rem !important; margin: 0 0 round(nearest, .5rem, 4px) !important; }
.lh-filterdrop { border: 1.5px solid var(--lwh-border, #E7E0F7) !important; border-radius: 12px !important; background: #fff !important; overflow: visible !important; }
.lh-filterdrop[open] { background: #fff !important; border-color: var(--lwh-purple, #6B2FA0) !important; }
.lh-filterdrop__summary { padding: .62rem .85rem !important; padding: round(nearest, .62rem, 4px) round(nearest, .85rem, 4px) !important; }
.lh-filterdrop[open] .lh-filterdrop__caret { transform: rotate(180deg); color: var(--lwh-purple, #6B2FA0); }
.lh-filterdrop.is-set .lh-filterdrop__count { background: var(--lwh-purple, #6B2FA0); color: #fff; }

/* options open as a FLOATING dropdown menu at all widths */
.lh-filterdrop__body {
  position: absolute !important; top: calc(100% + 4px) !important; left: 0 !important; right: 0 !important;
  z-index: 70 !important; background: #fff !important; border: 1.5px solid var(--lwh-border, #E7E0F7) !important;
  border-radius: 12px !important; padding: .4rem !important; padding: round(nearest, .4rem, 4px) !important; margin: 0 !important;
  box-shadow: 0 16px 42px rgba(74,20,140,.20) !important; max-height: 300px !important; overflow-y: auto !important;
}
.lh-filterdrop__body .lh-filterdrop__option { padding: .45rem .6rem; padding: round(nearest, .45rem, 4px) round(nearest, .6rem, 4px); border-radius: 8px; font-size: .85rem; }
.lh-filterdrop__option input { accent-color: var(--lwh-purple, #6B2FA0); }
.lh-filterdrop__option:hover { background: #F3EEFC; color: var(--lwh-purple-dark, #4A148C); }
.lh-catalogue__clear { color: var(--lwh-purple, #6B2FA0); }

/* ==========================================================================
   43 — MOBILE filter modal: real designed container (the transparent rule in
   §42 is desktop-only). Purple drawer header, inline option expand for touch,
   sticky apply bar. Auto-apply behaviour is unchanged (live AJAX on change).
   ========================================================================== */
@media (max-width: 959px) {
  .lh-catalogue__sidebar { background: #fff !important; box-shadow: 0 -14px 44px rgba(44,14,99,.30) !important; border: 0 !important; border-radius: 24px 24px 0 0 !important; padding: 0 !important; overflow: hidden !important; }
  .lh-catalogue.is-filter-open::before { background: rgba(44,14,99,.55); }
  .lh-catalogue__drawer-head { background: linear-gradient(135deg, var(--lwh-purple,#6B2FA0), #8B43E8); color: #fff; border-bottom: 0; padding: 1rem 1.15rem; padding: round(nearest, 1rem, 4px) round(nearest, 1.15rem, 4px); }
  .lh-catalogue__drawer-title { color: #fff; }
  .lh-catalogue__drawer-title::after { color: #FFD23F; }
  .lh-catalogue__drawer-close { background: rgba(255,255,255,.22); color: #fff; }
  .lh-filterdrop { border: 0 !important; border-radius: 0 !important; }
  .lh-catalogue__filterblock { border-top: 1px solid #F2EEF8; }
  .lh-filterdrop[open] { background: #FAF7FF !important; }
  .lh-filterdrop__body { position: static !important; box-shadow: none !important; border: 0 !important; border-top: 1px solid #F2EEF8 !important; border-radius: 0 !important; max-height: 280px !important; }
  .lh-catalogue__drawer-apply { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #F2EEF8; padding: .7rem 1rem; padding: round(nearest, .7rem, 4px) round(nearest, 1rem, 4px); }
  .lh-catalogue__drawer-apply button { width: 100%; background: linear-gradient(135deg, var(--lwh-purple,#6B2FA0), #8B43E8); color: #fff; border: 0; border-radius: 12px; padding: .8rem; padding: round(nearest, .8rem, 4px); font-weight: 800; }
}

/* ==========================================================================
   44 — Banner + search + "Updated daily" polish (desktop, purple, lit).
   ========================================================================== */
.lh-deck__top--free, .lh-catalogue__sidebar-pill.lh-deck__top--free { background: linear-gradient(135deg, #6B2FA0, #9B4DFF 55%, #B5179E) !important; position: relative; overflow: hidden; }
.lh-deck__top--free::after { content: ""; position: absolute; top: -60%; left: -40%; width: 55%; height: 220%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform: rotate(18deg); animation: lhShine 4.8s ease-in-out infinite; pointer-events: none; }
@keyframes lhShine { 0%,100% { left: -40%; } 55% { left: 120%; } }
.lh-freepill--sidebar { background: transparent !important; }
.lh-freepill__count { color: #fff; font-weight: 800; }
.lh-freepill__cta { color: #fff; text-decoration: underline; font-weight: 800; }

.lh-catalogue__search-input { border: 2px solid var(--lwh-border,#E7E0F7); border-radius: 14px; padding: .7rem 1rem; padding: round(nearest, .7rem, 4px) round(nearest, 1rem, 4px); font-weight: 700; }
.lh-catalogue__search-input:focus { border-color: var(--lwh-purple,#6B2FA0); box-shadow: 0 0 0 4px rgba(107,42,160,.12); }
.lh-catalogue__search-btn { width: 44px !important; height: 44px !important; border-radius: 14px !important; background: linear-gradient(135deg, #6B2FA0, #9B4DFF) !important; box-shadow: 0 6px 16px rgba(107,42,160,.35); }

.lh-sidebar-cta { position: relative; overflow: hidden; background: linear-gradient(135deg, #6B2FA0, #8B43E8) !important; color: #fff; border-radius: 16px; padding: 1.1rem; padding: round(nearest, 1.1rem, 4px); text-align: center; box-shadow: 0 12px 30px rgba(74,20,140,.22); }
.lh-sidebar-cta__icon { font-size: 1.6rem; display: inline-block; animation: lhSpin 6s linear infinite; }
@keyframes lhSpin { to { transform: rotate(360deg); } }
.lh-sidebar-cta__title { display: block; color: #fff; font-size: 1.05rem; margin: .2rem 0 .3rem; margin: round(nearest, .2rem, 4px) 0 round(nearest, .3rem, 4px); }
.lh-sidebar-cta__text { color: #EEE7FF; font-size: .82rem; margin: 0 0 .7rem; margin: 0 0 round(nearest, .7rem, 4px); }
.lh-sidebar-cta__link { display: inline-block; background: #FFD23F; color: #4A148C; font-weight: 800; padding: .45rem 1rem; padding: round(nearest, .45rem, 4px) round(nearest, 1rem, 4px); border-radius: 999px; text-decoration: none; }
.lh-sidebar-cta__link:hover { transform: translateY(-1px); }

/* ==========================================================================
   45 — Sidebar socials / Trustpilot / Brainy Bunches box (beneath Updated daily)
   ========================================================================== */
.lh-sidebar-social { margin-top: .8rem; margin-top: round(nearest, .8rem, 4px); background: #fff; border: 1.5px solid var(--lwh-border,#E7E0F7); border-radius: 16px; padding: 1rem; padding: round(nearest, 1rem, 4px); text-align: center; }
.lh-sidebar-social__title { display: block; font-family: 'Fredoka', sans-serif; color: var(--lwh-ink,#2A2150); font-size: 1rem; margin-bottom: .6rem; margin-bottom: round(nearest, .6rem, 4px); }
.lh-sidebar-social__icons { display: flex; justify-content: center; gap: .5rem; gap: round(nearest, .5rem, 4px); margin-bottom: .2rem; margin-bottom: round(nearest, .2rem, 4px); }
.lh-sidebar-social__icons a { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #F3EEFC; color: var(--lwh-purple,#6B2FA0); font-weight: 800; text-decoration: none; transition: transform .15s, background .15s, color .15s; }
.lh-sidebar-social__icons a:hover { transform: translateY(-2px); background: var(--lwh-purple,#6B2FA0); color: #fff; }
.lh-sidebar-social__btn { display: block; width: 100%; box-sizing: border-box; margin-top: .5rem; margin-top: round(nearest, .5rem, 4px); padding: .6rem; padding: round(nearest, .6rem, 4px); border-radius: 12px; font-weight: 800; font-size: .84rem; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.lh-sidebar-social__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(74,20,140,.18); }
.lh-sidebar-social__btn--review { background: #00B67A; color: #fff; }
.lh-sidebar-social__btn--bunch { background: linear-gradient(135deg, var(--lwh-purple,#6B2FA0), #9B4DFF); color: #fff; }

/* ==========================================================================
   46 — Footer exam-board quick links + 3-tier explore band
   ========================================================================== */
.lh-foot__exam { max-width: 1180px; margin: 1.6rem auto 0; margin: round(nearest, 1.6rem, 4px) auto 0; padding-top: 1.2rem; padding-top: round(nearest, 1.2rem, 4px); border-top: 1px solid #3a2a6a; display: flex; align-items: center; gap: .6rem; gap: round(nearest, .6rem, 4px); flex-wrap: wrap; }
.lh-foot__exam-lbl { color: #cdbff2; font-size: .82rem; font-weight: 700; }
.lh-foot__exam a { background: #3a1f7a; border: 1px solid #4a2c92; color: #fff; border-radius: 999px; padding: .3rem .9rem; padding: round(nearest, .3rem, 4px) round(nearest, .9rem, 4px); font-size: .8rem; font-weight: 700; text-decoration: none; transition: background .15s, transform .15s; }
.lh-foot__exam a:hover { background: var(--coral,#FF3D5A); transform: translateY(-2px); }
.lh-foot__tier { max-width: 1180px; margin: 0 auto 1.4rem; margin: 0 auto round(nearest, 1.4rem, 4px); display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; gap: round(nearest, .8rem, 4px); }
.lh-foot__tier-card { background: #34186f; border: 1px solid #4a2c92; border-radius: 14px; padding: .9rem 1rem; padding: round(nearest, .9rem, 4px) round(nearest, 1rem, 4px); }
.lh-foot__tier-card b { color: #fff; font-family: 'Baloo 2', sans-serif; font-size: .92rem; display: flex; align-items: center; gap: .4rem; gap: round(nearest, .4rem, 4px); }
.lh-foot__tier-card span { color: #a99bd6; font-size: .78rem; display: block; margin-top: .2rem; margin-top: round(nearest, .2rem, 4px); }
.lh-foot__tier-card a { color: #cdbff2; }
@media (max-width: 700px){ .lh-foot__tier { grid-template-columns: 1fr; } }

/* mobile nav drawer scroll lock */
body.lh-navlock { overflow: hidden; }

/* ==========================================================================
   47 — Header burger (3-bar, white) + mobile drawer head (ui.js-driven).
   The drawer slide-in, overlay and accordion CSS already exist above; this
   just makes the burger visible on the brand header and styles the head.
   ========================================================================== */
.site .lh-burger span, header.site .lh-burger span { background: #fff; }
.lh-burger { gap: 5px; gap: 4px; }
.lh-drawer { display: flex; flex-direction: column; }
.lh-drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .8rem; padding-bottom: round(nearest, .8rem, 4px); margin-bottom: .4rem; margin-bottom: round(nearest, .4rem, 4px); border-bottom: 1px solid var(--lwh-border, #E7E0F7); }
.lh-drawer__brand { font-family: 'Baloo 2','Fredoka',sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--lwh-purple, #6B2FA0); text-decoration: none; }
.lh-drawer__brand .hub { color: var(--lwh-coral, #FF3D5A); }
.lh-drawer__close { position: static; font-size: 1.9rem; line-height: 1; background: none; border: 0; color: var(--lwh-ink, #2A2150); cursor: pointer; padding: 0 .3rem; padding: 0 round(nearest, .3rem, 4px); }
.lh-drawer__actions { margin-top: auto; display: flex; flex-direction: column; gap: .55rem; gap: round(nearest, .55rem, 4px); padding-top: 1rem; padding-top: round(nearest, 1rem, 4px); border-top: 1px solid var(--lwh-border, #E7E0F7); }
.lh-drawer__actions .lh-btn { display: block; width: 100%; text-align: center; padding: .75rem; padding: round(nearest, .75rem, 4px); border-radius: 12px; font-weight: 800; text-decoration: none; }
.lh-drawer__actions .btn-primary { background: var(--lwh-coral, #FF3D5A); color: #fff; }
.lh-drawer__actions .btn-on-dark { background: #F3EEFC; color: var(--lwh-purple-dark, #4A148C); }

/* ==========================================================================
   48 — RICH MOBILE DRAWER (.lh-drawer--rich) — colour-coded key stages,
   subjects, formats, audiences + CTA. Driven by ui.js (.lh-drawer__toggle).
   ========================================================================== */
.lh-drawer--rich { padding: 0 !important; width: min(92vw, 390px) !important; display: flex; flex-direction: column; background: #fff; }
.lh-drawer--rich .lh-drawer__head { display: none; }

.lh-dh { background: linear-gradient(135deg,#6B2FA0 0%,#8B43E8 55%,#B5179E 100%); color: #fff; padding: 16px 16px 18px; padding: 16px 16px 20px; position: relative; overflow: hidden; }
.lh-dh::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.12); top: -46px; right: -30px; }
.lh-dh__top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.lh-dh__brand { font-family: 'Baloo 2','Fredoka',sans-serif; font-weight: 800; font-size: 21px; color: #fff; text-decoration: none; }
.lh-dh__brand span { color: #FFD23F; }
.lh-dh__close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; font-size: 18px; cursor: pointer; line-height: 1; }
.lh-dh__tag { position: relative; z-index: 1; font-size: 12px; font-weight: 700; opacity: .92; margin-top: 3px; margin-top: 4px; }
.lh-dh__search { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: 12px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); border-radius: 14px; padding: 8px 12px; }
.lh-dh__search span { font-size: 15px; }
.lh-dh__search input { flex: 1; background: transparent; border: 0; outline: 0; color: #fff; font-size: 14px; font-family: inherit; font-weight: 600; }
.lh-dh__search input::placeholder { color: rgba(255,255,255,.8); }

.lh-dchips { display: flex; gap: 7px; gap: 8px; overflow-x: auto; padding: 11px 12px 9px; padding: 12px 12px 8px; border-bottom: 1px solid #F0ECFA; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lh-dchips::-webkit-scrollbar { display: none; }
.lh-dchips a { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 5px 10px; padding: 4px 12px; text-decoration: none; }
.lh-dchips a:nth-child(1) { background: #DCEEFF; color: #185FA5; }
.lh-dchips a:nth-child(2) { background: #FFE1E9; color: #C2185B; }
.lh-dchips a:nth-child(3) { background: #EEE3FF; color: #6A23CE; }
.lh-dchips a:nth-child(4) { background: #FFF3D6; color: #8a6100; }

.lh-dnav { padding: 6px 12px 2px; padding: 8px 12px 4px; }
.lh-dsec__h { width: 100%; display: flex; align-items: center; gap: 11px; gap: 12px; background: none; border: 0; padding: 11px 8px; padding: 12px 8px; cursor: pointer; text-align: left; text-decoration: none; border-top: 1px solid #F0ECFA; }
.lh-dnav > .lh-dsec__h:first-of-type { border-top: 0; }
.lh-dsec__ic { flex: 0 0 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.lh-dsec__t { flex: 1; font-family: 'Baloo 2','Fredoka',sans-serif; font-weight: 800; font-size: 15px; color: #2A2150; }
.lh-dsec__cv { color: #938BBA; font-size: 13px; transition: transform .2s; }
.lh-drawer__toggle[aria-expanded="true"] .lh-dsec__cv { transform: rotate(180deg); color: #6B2FA0; }

.lh-drawer--rich .lh-drawer__sub { padding: 2px 4px 8px; padding: 4px 4px 8px; margin: 0; }
.lh-drawer--rich .lh-drawer__sub[hidden] { display: none; }
.lh-dstages { display: flex; flex-direction: column; gap: 6px; gap: 8px; }
.lh-stage { display: flex; align-items: center; gap: 10px; gap: 12px; padding: 9px 10px; padding: 8px 12px; border-radius: 13px; background: var(--b); text-decoration: none; border: 1.5px solid transparent; transition: border-color .15s, transform .12s; font-size: 16px; }
.lh-stage:hover { border-color: var(--c); }
.lh-stage:active { transform: scale(.98); }
.lh-stage > span { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.lh-stage b { font-size: 13.5px; color: #2A2150; font-weight: 800; }
.lh-stage i { font-style: normal; font-size: 11px; color: #6c6488; font-weight: 600; }
.lh-stage em { font-style: normal; color: var(--c); font-weight: 900; font-size: 15px; }

.lh-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; gap: 8px; padding: 2px; padding: 4px; }
.lh-dgrid a { display: flex; align-items: center; gap: 7px; gap: 8px; font-size: 12.5px; font-weight: 700; color: #3a3360; background: #F7F4FD; border: 1px solid #ECE6FA; border-radius: 10px; padding: 9px; padding: 8px; text-decoration: none; }
.lh-dchipwrap { display: flex; flex-wrap: wrap; gap: 6px; gap: 8px; padding: 2px; padding: 4px; }
.lh-dchipwrap a { font-size: 12px; font-weight: 800; color: #4a3f72; background: #F3EEFC; border: 1px solid #E5DCF6; border-radius: 999px; padding: 6px 11px; padding: 8px 12px; text-decoration: none; }
.lh-dlink { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #3a3360; background: #F7F4FD; border: 1px solid #ECE6FA; border-radius: 11px; padding: 9px 11px; padding: 8px 12px; text-decoration: none; margin-bottom: 5px; margin-bottom: 4px; }

.lh-dcta { margin: 6px 12px 12px; margin: 8px 12px 12px; background: linear-gradient(135deg,#6B2FA0,#8B43E8); border-radius: 16px; padding: 14px; padding: 16px; color: #fff; position: relative; overflow: hidden; }
.lh-dcta::after { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.12); bottom: -34px; right: -22px; }
.lh-dcta__t { position: relative; z-index: 1; font-family: 'Baloo 2','Fredoka',sans-serif; font-weight: 800; font-size: 15px; }
.lh-dcta__s { position: relative; z-index: 1; font-size: 11.5px; opacity: .92; margin: 2px 0 10px; margin: 4px 0 12px; }
.lh-dcta__btn { position: relative; z-index: 1; display: block; text-align: center; background: #FFD23F; color: #4A148C; font-weight: 800; font-size: 13.5px; padding: 10px; padding: 12px; border-radius: 11px; text-decoration: none; }

.lh-dfoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid #F0ECFA; background: #FBF9FF; }
.lh-dfoot__soc { display: flex; gap: 8px; }
.lh-dfoot__soc a { width: 32px; height: 32px; border-radius: 50%; background: #F3EEFC; color: #6B2FA0; display: flex; align-items: center; justify-content: center; font-weight: 800; text-decoration: none; }
.lh-dfoot__lg { font-size: 13px; font-weight: 800; color: #6B2FA0; text-decoration: none; }

/* ==========================================================================
   49 — RICH DRAWER POLISH: consistent 16px gutters, bigger tap targets,
   softer dividers, refined icon tiles + spacing for a modern, pro feel.
   ========================================================================== */
.lh-dh { padding: 18px 16px 20px; padding: 20px 16px 20px; }
.lh-dh__brand { font-size: 22px; letter-spacing: .2px; }
.lh-dh__tag { margin-top: 4px; font-size: 12.5px; }
.lh-dh__search { margin-top: 14px; margin-top: 16px; padding: 11px 14px; padding: 12px 16px; border-radius: 16px; }
.lh-dh__search input { font-size: 15px; }

.lh-dchips { padding: 13px 16px; padding: 12px 16px; gap: 8px; }
.lh-dchips a { padding: 7px 13px; padding: 8px 12px; font-size: 12px; }

.lh-dnav { padding: 0; }
.lh-dsec__h { padding: 15px 16px; padding: 16px 16px; gap: 13px; gap: 12px; border-top-color: #F4F0FB; transition: background .12s; border-radius: 0; }
.lh-dnav > .lh-dsec__h:first-of-type { border-top: 0; }
.lh-dsec__h:hover { background: #FAF7FF; }
.lh-dsec__h:active { background: #F3EEFC; }
.lh-dsec__ic { flex: 0 0 34px; height: 34px; border-radius: 11px; font-size: 17px; }
.lh-dsec__t { font-size: 15.5px; letter-spacing: .1px; }
.lh-dsec__cv { font-size: 12px; padding-left: 2px; padding-left: 4px; }

.lh-drawer--rich .lh-drawer__sub { padding: 2px 16px 14px; padding: 4px 16px 16px; }
.lh-dstages { gap: 8px; }
.lh-stage { padding: 12px 13px; padding: 12px 12px; border-radius: 15px; gap: 12px; font-size: 18px; }
.lh-stage:hover { border-color: var(--c); transform: translateY(-1px); }
.lh-stage b { font-size: 14px; }
.lh-stage i { font-size: 11.5px; margin-top: 1px; margin-top: 0px; }
.lh-stage em { font-size: 16px; }

.lh-dgrid { gap: 8px; padding: 2px 0; padding: 4px 0; }
.lh-dgrid a { padding: 11px 12px; padding: 12px 12px; font-size: 13px; border-radius: 12px; transition: background .12s, border-color .12s; }
.lh-dgrid a:hover { background: #EFE9FB; border-color: #D9CEF3; }
.lh-dchipwrap { gap: 8px; padding: 2px 0; padding: 4px 0; }
.lh-dchipwrap a { padding: 8px 13px; padding: 8px 12px; }
.lh-dlink { padding: 11px 13px; padding: 12px 12px; border-radius: 13px; margin-bottom: 7px; margin-bottom: 8px; font-size: 13.5px; transition: background .12s; }
.lh-dlink:hover { background: #EFE9FB; }

.lh-dcta { margin: 10px 16px 14px; margin: 12px 16px 16px; padding: 16px; border-radius: 18px; }
.lh-dcta__t { font-size: 15.5px; }
.lh-dcta__btn { padding: 11px; padding: 12px; font-size: 14px; border-radius: 12px; transition: transform .12s; }
.lh-dcta__btn:active { transform: scale(.98); }

.lh-dfoot { padding: 14px 16px; padding: 16px 16px; }
.lh-dfoot__soc a { width: 34px; height: 34px; transition: background .12s, color .12s; }
.lh-dfoot__soc a:hover { background: #6B2FA0; color: #fff; }

/* smooth slide-in for the panel itself */
.lh-drawer--rich { transition: right .32s cubic-bezier(.34,1.2,.5,1); }


/* ==========================================================================
   52 — Catalogue: sticky sidebar, redesigned rounded free-views module,
   horizontal Year-group filter bar (injected above the catalogue).
   ========================================================================== */

/* (a) Sticky sidebar on desktop — robust. */
@media (min-width: 960px) {
  .lh-catalogue__layout { align-items: start; }
  .lh-catalogue__sidebar { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 1.5rem);max-height: calc(100dvh - 1.5rem); overflow-y: auto; overflow-x: visible; z-index: 5; }
  .lh-catalogue__sidebar::-webkit-scrollbar { width: 7px; }
  .lh-catalogue__sidebar::-webkit-scrollbar-thumb { background: #E0D8EE; border-radius: 99px; }
}

/* (b) Free-views module — fully rounded, popping gradient card. */
.lh-deck__top--free,
.lh-catalogue__sidebar-pill.lh-deck__top--free {
  border-radius: 18px !important;
  margin: 0 0 .85rem !important;
  margin: 0 0 round(nearest, .85rem, 4px) !important;
  padding: 15px 16px !important;
  padding: 16px 16px !important;
  background: linear-gradient(135deg, #6B2FA0 0%, #9B4DFF 58%, #B5179E 100%) !important;
  box-shadow: 0 12px 28px rgba(74,20,140,.24);
  position: relative; overflow: hidden;
}
.lh-deck__top--free::before { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.13); top: -52px; right: -34px; }
.lh-deck__top--free .lh-freepill,
.lh-deck__top--free .lh-freepill--sidebar { position: relative; z-index: 1; background: transparent !important; display: flex; flex-direction: column; gap: .5rem; gap: round(nearest, .5rem, 4px); align-items: flex-start; }
.lh-deck__top--free .lh-freepill__count { color: #fff; font-family: 'Baloo 2','Fredoka',sans-serif; font-weight: 800; font-size: .98rem; line-height: 1.2; }
.lh-deck__top--free .lh-freepill__cta { display: inline-block; background: #FFD23F; color: #4A148C; font-weight: 800; font-size: .82rem; padding: .5rem 1rem; padding: round(nearest, .5rem, 4px) round(nearest, 1rem, 4px); border-radius: 999px; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.lh-deck__top--free .lh-freepill__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }

/* (c) Year-group horizontal filter bar (above the catalogue). */
.lh-yearbar { max-width: 1640px; margin: 0 auto .9rem; margin: 0 auto round(nearest, .9rem, 4px); padding: 14px 1.75rem 0; padding: 16px round(nearest, 1.75rem, 4px) 0; display: flex; align-items: center; gap: 14px; gap: 16px; flex-wrap: wrap; }
.lh-yearbar__lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #A89FC8; flex: 0 0 auto; }
.lh-yearbar__btns { display: flex; gap: 9px; gap: 8px; flex-wrap: wrap; }
.lh-yearbtn { font-size: 13.5px; font-weight: 800; border: 2px solid var(--lwh-border,#E7E0F7); background: #fff; color: var(--lwh-ink,#2A2150); border-radius: 999px; padding: 8px 17px; padding: 8px 16px; text-decoration: none; transition: border-color .14s, transform .12s, background .14s, color .14s; white-space: nowrap; }
.lh-yearbtn:hover { border-color: var(--lwh-purple,#6B2FA0); transform: translateY(-1px); }
.lh-yearbtn.is-on { background: var(--lwh-purple,#6B2FA0); border-color: var(--lwh-purple,#6B2FA0); color: #fff; }
.lh-yearbtn.is-empty { opacity: .55; }
.lh-yearbtn small { font-size: 9px; font-weight: 800; background: #F0ECF8; color: #938BBA; border-radius: 6px; padding: 1px 5px; padding: 0px 4px; margin-left: 4px; vertical-align: middle; text-transform: uppercase; }
.lh-yearbtn.is-on small { background: rgba(255,255,255,.25); color: #fff; }
@media (max-width: 760px) { .lh-yearbar { padding: 12px 1rem 0; padding: 12px round(nearest, 1rem, 4px) 0; } }

/* ==========================================================================
   53 — Catalogue fixes: free-views height/clip, sticky sidebar (beats the
   earlier overflow:visible !important), centred + playful Year-group bar.
   ========================================================================== */

/* (1) Free-views module — stop clipping the CTA; size to content. */
.lh-catalogue__sidebar-pill.lh-deck__top--free,
.lh-deck__top--free {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 14px 16px !important;
  padding: 16px 16px !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 26px rgba(74,20,140,.24);
}
.lh-deck__top--free::before, .lh-deck__top--free::after { display: none !important; }
.lh-deck__top--free .lh-freepill,
.lh-deck__top--free .lh-freepill--sidebar {
  display: flex !important; flex-direction: column; align-items: flex-start; gap: .6rem; gap: round(nearest, .6rem, 4px);
  background: transparent !important; text-align: left !important;
}
.lh-deck__top--free .lh-freepill__count { color: #fff !important; font-family: 'Baloo 2','Fredoka',sans-serif; font-weight: 800; font-size: .95rem; line-height: 1.25; }
.lh-deck__top--free .lh-freepill__cta { display: inline-block; background: #FFD23F !important; color: #4A148C !important; font-weight: 800; font-size: .82rem; padding: .5rem 1.05rem; padding: round(nearest, .5rem, 4px) round(nearest, 1.05rem, 4px); border-radius: 999px; text-decoration: none !important; }
.lh-deck__top--free .lh-freepill__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.2); }

/* (2) Sticky sidebar — plain sticky column, no height cap, no scrollbar. */
@media (min-width: 960px) {
  .lh-fr-catalogue .lh-catalogue__layout,
  .lh-catalogue__layout { align-items: start; }
  .lh-catalogue__sidebar {
    position: sticky !important; top: 1rem !important; align-self: start !important;
    max-height: none !important; overflow: visible !important;
    z-index: 5;
  }
}

/* (3) Year-group bar — centred + playful colour pills with a bounce. */
.lh-yearbar { flex-direction: column; align-items: center; gap: 10px; gap: 12px; }
.lh-yearbar__lbl { letter-spacing: .08em; }
.lh-yearbar__btns { justify-content: center; gap: 10px; gap: 12px; }
.lh-yearbtn { font-size: 14px; font-weight: 800; padding: 9px 19px; padding: 8px 20px; border-radius: 999px; }
.lh-yearbtn:hover { transform: translateY(-2px) scale(1.04); }
.lh-yearbar__btns .lh-yearbtn:nth-child(1) { background: #EEEDFE; color: #43159E; border-color: #D6CFF6; }
.lh-yearbar__btns .lh-yearbtn:nth-child(2) { background: #E1F0FD; color: #185FA5; border-color: #BBD9F7; }
.lh-yearbar__btns .lh-yearbtn:nth-child(3) { background: #E1F7EC; color: #0F8F4D; border-color: #BBE9CF; }
.lh-yearbar__btns .lh-yearbtn:nth-child(4) { background: #FFF1DC; color: #8a5a00; border-color: #F7DDB0; }
.lh-yearbar__btns .lh-yearbtn:nth-child(5) { background: #FFE6EC; color: #b03050; border-color: #F7C2D0; }
.lh-yearbar__btns .lh-yearbtn:nth-child(6) { background: #F1E8FF; color: #7a2fd0; border-color: #DDC8F7; }
.lh-yearbtn.is-on { background: var(--lwh-purple,#6B2FA0) !important; color: #fff !important; border-color: var(--lwh-purple,#6B2FA0) !important; box-shadow: 0 7px 16px rgba(107,42,160,.32); transform: translateY(-1px); }
.lh-yearbtn.is-empty { opacity: .5; }
.lh-yearbtn.is-empty:hover { transform: none; }

/* ==========================================================================
   54 — Sidebar flex-shrink fix. The sidebar is a flex column; once it gained
   max-height + overflow-y:auto (sticky, §53) its children were shrinking to
   fit, squashing the free-views card (CTA spilled out) and the socials box.
   Lock every child to its natural height and let the column scroll instead.
   ========================================================================== */
.lh-catalogue__sidebar > * { flex-shrink: 0; }
.lh-catalogue__sidebar .lh-deck__top--free,
.lh-catalogue__sidebar .lh-social { flex-shrink: 0; }
/* free-views card can now keep its rounded clip safely (nothing overflows). */
.lh-catalogue__sidebar-pill.lh-deck__top--free,
.lh-deck__top--free { overflow: hidden !important; }

/* ==========================================================================
   55 — Futuristic catalogue control bar + colourful pagination.
   Theme-matched: purple→violet gradients, glass surface, segmented toggle.
   ========================================================================== */

/* ---- The top control deck ---- */
.lh-catalogue__main-head {
  display: flex; align-items: center; gap: 1rem; gap: round(nearest, 1rem, 4px); flex-wrap: wrap;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF7FF 100%);
  border: 1px solid #E7E0F7; border-radius: 18px;
  padding: .7rem 1rem;
  padding: round(nearest, .7rem, 4px) round(nearest, 1rem, 4px); margin-bottom: 1.1rem; margin-bottom: round(nearest, 1.1rem, 4px);
  box-shadow: 0 8px 24px rgba(74,20,140,.08);
  position: relative; overflow: hidden;
}
/* animated gradient hairline along the top edge */
.lh-catalogue__main-head::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #6B2FA0, #9B4DFF, #FF3D5A, #FFD23F, #6B2FA0);
  background-size: 300% 100%; animation: lhBarFlow 8s linear infinite;
}
@keyframes lhBarFlow { to { background-position: 300% 0; } }

/* ---- Result count: gradient number + live dot ---- */
.lh-catalogue__count {
  margin-right: auto !important; font-weight: 900 !important;
  font-family: 'Baloo 2','Fredoka',sans-serif; font-size: 1.15rem !important;
  display: inline-flex; align-items: center; gap: .5rem; gap: round(nearest, .5rem, 4px); color: #43159E;
  background: linear-gradient(120deg, #6B2FA0, #9B4DFF 60%, #B5179E);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lh-catalogue__count::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: #28C76F; -webkit-text-fill-color: #28C76F;
  box-shadow: 0 0 0 0 rgba(40,199,111,.55); animation: lhPulse 2s infinite; flex: 0 0 auto;
}
@keyframes lhPulse { 0%{box-shadow:0 0 0 0 rgba(40,199,111,.5)} 70%{box-shadow:0 0 0 7px rgba(40,199,111,0)} 100%{box-shadow:0 0 0 0 rgba(40,199,111,0)} }

.lh-catalogue__head-controls { gap: .7rem; gap: round(nearest, .7rem, 4px); }
.lh-catalogue__perpage-label, .lh-catalogue__perpage-suffix, .lh-catalogue__sort-label {
  font-size: .82rem; font-weight: 700; color: #6E6794;
}

/* ---- Custom selects (Show / Sort) ---- */
.lh-catalogue__perpage-select, .lh-catalogue__sort select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding: .45rem 2rem .45rem .8rem !important;
  padding: round(nearest, .45rem, 4px) round(nearest, 2rem, 4px) round(nearest, .45rem, 4px) round(nearest, .8rem, 4px) !important; border: 1.5px solid #E0D6F5 !important;
  border-radius: 12px !important; background: #fff !important; color: #2A2150 !important;
  font-size: .85rem !important; font-weight: 800 !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B2FA0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right .65rem center !important;
  transition: border-color .15s, box-shadow .15s;
}
.lh-catalogue__perpage-select:hover, .lh-catalogue__sort select:hover { border-color: #9B4DFF !important; }
.lh-catalogue__perpage-select:focus, .lh-catalogue__sort select:focus {
  border-color: #6B2FA0 !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(107,42,160,.18) !important;
}

/* ---- Segmented view toggle ---- */
.lh-catalogue__view-toggle {
  gap: 0 !important; background: #F1EAFD; border: 1px solid #E7E0F7;
  border-radius: 999px; padding: 3px; padding: 4px;
}
.lh-catalogue__view-btn {
  border: 0 !important; background: transparent !important; color: #8A7FB5 !important;
  border-radius: 999px !important; padding: .35rem .6rem !important; padding: round(nearest, .35rem, 4px) round(nearest, .6rem, 4px) !important; display: inline-flex;
  align-items: center; transition: all .18s;
}
.lh-catalogue__view-btn:hover { color: #6B2FA0 !important; background: rgba(107,42,160,.1) !important; }
.lh-catalogue__view-btn.is-active {
  background: linear-gradient(135deg, #6B2FA0, #9B4DFF) !important; color: #fff !important;
  box-shadow: 0 4px 12px rgba(107,42,160,.35) !important;
}

/* ---- Pagination ---- */
.lh-pagination { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center; text-align: center; gap: .8rem !important; gap: round(nearest, .8rem, 4px) !important; padding: 1.8rem 0 .5rem !important; padding: round(nearest, 1.8rem, 4px) 0 round(nearest, .5rem, 4px) !important; }
.lh-pagination__summary {
  font-size: .85rem; font-weight: 700; color: #6E6794;
  background: #F4F0FC; border: 1px solid #E7E0F7; border-radius: 999px;
  padding: .35rem .9rem;
  padding: round(nearest, .35rem, 4px) round(nearest, .9rem, 4px); margin: 0 auto;
}
.lh-pagination__controls { display: flex !important; justify-content: center !important; align-items: center; gap: .4rem !important; gap: round(nearest, .4rem, 4px) !important; flex-wrap: wrap; margin: 0 auto; width: auto; }
.lh-pagination a, .lh-pagination span,
.lh-pagination__btn, .lh-pagination__num {
  min-width: 40px !important; height: 40px !important; border-radius: 12px !important;
  border: 1.5px solid #E7E0F7 !important; color: #2A2150 !important; font-weight: 800 !important;
  background: #fff; transition: transform .12s, border-color .15s, color .15s, box-shadow .15s;
}
.lh-pagination__btn { padding: 0 .9rem !important; padding: 0 round(nearest, .9rem, 4px) !important; gap: .25rem; gap: round(nearest, .25rem, 4px); }
.lh-pagination a:hover, .lh-pagination__btn:hover, .lh-pagination__num:hover {
  border-color: #9B4DFF !important; color: #6B2FA0 !important;
  transform: translateY(-2px); box-shadow: 0 6px 14px rgba(107,42,160,.16);
}
.lh-pagination .is-current, .lh-pagination__num.is-current {
  background: linear-gradient(135deg, #6B2FA0, #9B4DFF 60%, #B5179E) !important;
  color: #fff !important; border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(107,42,160,.4) !important; transform: translateY(-1px);
}
.lh-pagination .is-disabled, .lh-pagination__btn.is-disabled {
  opacity: .4 !important; transform: none !important; box-shadow: none !important;
  border-color: #ECE7F7 !important; color: #B5AECE !important; cursor: default;
}
.lh-pagination__gap { border: 0 !important; background: transparent !important; color: #B5AECE !important; min-width: 20px !important; }

/* ==========================================================================
   56 — Active filter chips (sidebar + mobile filter modal). Built by JS from
   the live URL params; each chip removes that filter and re-runs the AJAX.
   ========================================================================== */
.lh-activechips { display: flex; flex-wrap: wrap; gap: .4rem; gap: round(nearest, .4rem, 4px); margin: .1rem 0 .7rem; margin: round(nearest, .1rem, 4px) 0 round(nearest, .7rem, 4px); }
.lh-activechip {
  display: inline-flex; align-items: center; gap: .4rem; gap: round(nearest, .4rem, 4px); cursor: pointer; line-height: 1;
  background: #F1E8FF; color: #43159E; border: 1px solid #DDC8F7; border-radius: 999px;
  padding: .34rem .72rem;
  padding: round(nearest, .34rem, 4px) round(nearest, .72rem, 4px); font-size: .8rem; font-weight: 800;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.lh-activechip:hover { background: #E3D2FB; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(107,42,160,.16); }
.lh-activechip i { font-style: normal; font-size: .72rem; opacity: .65; }
.lh-activechip--clear { background: #FFE6EC; color: #B03050; border-color: #F7C2D0; text-decoration: none; }
.lh-activechip--clear:hover { background: #FBD3DD; }

/* ==========================================================================
   57 — Engagement shelves (New this week + Most popular) inside the library
   hub. Reuses the homepage resource slider; neutralise its full-width section
   wrapper so it fits the hub body, and hide its redundant "browse all" link.
   ========================================================================== */
.lh-lib__shelves { margin: .5rem 0 1rem; margin: round(nearest, .5rem, 4px) 0 round(nearest, 1rem, 4px); }
.lh-lib__shelves .lh-rslider-sec { padding: 0 !important; margin: 0 0 1.6rem !important; margin: 0 0 round(nearest, 1.6rem, 4px) !important; background: transparent !important; }
.lh-lib__shelves .lh-rslider-sec .container { max-width: none !important; padding: 0 !important; width: 100%; }
.lh-lib__shelves .shead { margin: 0 0 .9rem !important; margin: 0 0 round(nearest, .9rem, 4px) !important; text-align: left !important; }
.lh-lib__shelves .pop-h { font-size: 1.2rem; margin-top: .4rem !important; margin-top: round(nearest, .4rem, 4px) !important; }
.lh-lib__shelves .lh-rslider + .center { display: none !important; }

/* ==========================================================================
   58 — Library page redesign: branded hero (logged-out vs role-aware),
   personal strip, free-page width, paid-CTA gating. Reuses the free-resources
   hero sub-elements (.lh-fr-hero__*, .lh-fr-float, .lh-fr-btn).
   ========================================================================== */
.lh-lx-hero { background: linear-gradient(135deg, #6B2FA0 0%, #43159E 55%, #8B43E8 100%) !important; padding: 3rem 1.25rem 2.4rem !important; padding: round(nearest, 3rem, 4px) round(nearest, 1.25rem, 4px) round(nearest, 2.4rem, 4px) !important; }
.lh-lx-hero .lh-fr-hero__blob--1 { background: #8B43E8; }
.lh-lx-hero .lh-fr-hero__blob--2 { background: #FF3D5A; }
.lh-lx-hero__free { color: rgba(255,255,255,.95); font-weight: 700; margin: 1rem 0 0; margin: round(nearest, 1rem, 4px) 0 0; font-size: .9rem; }
.lh-lx-hero__free a { color: #FFD23F; text-decoration: underline; }
.lh-lx-anchor { display: block; height: 0; scroll-margin-top: 90px; }

/* Hide the original hub hero + stat strip — the new hero replaces them. */
.lh-lx .lh-lib__hero, .lh-lx .lh-lib__stats { display: none !important; }

/* Match the free-resources page width. */
.lh-lx .lh-lib__body { max-width: 1440px !important; padding: 1.5rem 1.75rem 3rem !important; padding: round(nearest, 1.5rem, 4px) round(nearest, 1.75rem, 4px) round(nearest, 3rem, 4px) !important; }
.lh-lx-strip { max-width: 1440px; margin: 1.4rem auto .4rem; margin: round(nearest, 1.4rem, 4px) auto round(nearest, .4rem, 4px); padding: 0 1.75rem; padding: 0 round(nearest, 1.75rem, 4px); }

/* Personal strip — role action cards + student stats. */
.lh-lx-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; gap: round(nearest, .8rem, 4px); }
.lh-lx-act { background: #fff; border: 1.5px solid var(--lwh-border,#E7E0F7); border-radius: 16px; padding: 1rem 1.1rem; padding: round(nearest, 1rem, 4px) round(nearest, 1.1rem, 4px); display: block; text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
.lh-lx-act:hover { transform: translateY(-2px); border-color: var(--lwh-purple,#6B2FA0); box-shadow: 0 10px 24px rgba(74,20,140,.12); }
.lh-lx-act__ic { font-size: 1.5rem; display: block; }
.lh-lx-act__t { display: block; font-weight: 800; color: var(--lwh-ink,#2A2150); margin-top: .3rem; margin-top: round(nearest, .3rem, 4px); }
.lh-lx-act__d { display: block; font-size: .85rem; color: var(--lwh-grey,#6E6794); margin-top: .2rem; margin-top: round(nearest, .2rem, 4px); line-height: 1.4; }
.lh-lx-continue { margin-bottom: 1rem; margin-bottom: round(nearest, 1rem, 4px); }
.lh-lx-stats { display: flex; flex-wrap: wrap; gap: .7rem; gap: round(nearest, .7rem, 4px); margin-top: 1rem; margin-top: round(nearest, 1rem, 4px); }
.lh-lx-stat { background: #F4F0FC; border: 1px solid #E7E0F7; border-radius: 14px; padding: .7rem 1.1rem; padding: round(nearest, .7rem, 4px) round(nearest, 1.1rem, 4px); min-width: 120px; text-decoration: none; }
.lh-lx-stat b { display: block; font-family: 'Baloo 2','Fredoka',sans-serif; font-size: 1.15rem; color: #43159E; }
.lh-lx-stat span { font-size: .78rem; color: #6E6794; font-weight: 600; }
.lh-lx-stat--link { background: linear-gradient(135deg, #6B2FA0, #9B4DFF); border: 0; }
.lh-lx-stat--link b, .lh-lx-stat--link span { color: #fff; }

/* Hide the conversion band for paying members. */
.lh-lx--paid .lh-lib__cta { display: none !important; }

/* ==========================================================================
   59 — Assign modal (dashboard "Assign learning" + resource-page). Wide,
   no-scroll-on-desktop; learner chips (≤5) or searchable list (≥6); multi
   module select; playful. Classes: .lh-amx*  /  .lh-amx-*
   ========================================================================== */
.lh-amx{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:1rem;padding:round(nearest, 1rem, 4px);opacity:0;transition:opacity .2s}
.lh-amx.is-open{opacity:1}
.lh-amx[hidden]{display:none}
.lh-amx__backdrop{position:absolute;inset:0;background:rgba(42,33,80,.55);backdrop-filter:blur(3px)}
.lh-amx__panel{position:relative;background:#fff;border-radius:22px;width:100%;box-shadow:0 30px 80px rgba(42,33,80,.4);max-height:92vh;display:flex;flex-direction:column;transform:translateY(12px) scale(.98);transition:transform .2s;overflow:hidden}
.lh-amx.is-open .lh-amx__panel{transform:none}
.lh-amx__panel--wide{max-width:760px}
.lh-amx__panel--narrow{max-width:480px}
.lh-amx__close{position:absolute;top:12px;right:14px;background:rgba(255,255,255,.25);border:0;color:#fff;width:30px;height:30px;border-radius:50%;font-size:15px;cursor:pointer;z-index:2}
.lh-amx__head{background:linear-gradient(135deg,#6B2FA0,#9B4DFF 70%,#B5179E);color:#fff;padding:16px 20px}
.lh-amx__title{font-family:'Baloo 2','Fredoka',sans-serif;color:#fff;font-size:1.3rem;margin:0}
.lh-amx__sub{color:#EEE7FF;font-size:.85rem;margin:.25rem 0 0;margin:round(nearest, .25rem, 4px) 0 0}
.lh-amx__body{padding:16px 20px;overflow:hidden}
.lh-amx__body--cols{display:grid;grid-template-columns:1fr 1.12fr;gap:0}
.lh-amx__body--cols .lh-amx__col:first-child{padding-right:18px;padding-right:20px}
.lh-amx__body--cols .lh-amx__col:last-child{padding-left:18px;padding-left:20px;border-left:1.5px solid #EFEAFB}
.lh-amx__field{margin-bottom:14px;margin-bottom:16px}
.lh-amx__field:last-child{margin-bottom:0}
.lh-amx__step{display:block;font-size:.8rem;font-weight:800;color:#43159E;margin-bottom:8px}
.lh-amx__note{font-size:.76rem;color:#7a6f00;background:#FFF7E0;border:1px solid #F7E6B0;border-radius:10px;padding:7px 10px;padding:8px 12px;line-height:1.45;margin:8px 0 0}
.lh-amx__date{width:100%;border:1.5px solid #E0D6F5;border-radius:10px;padding:8px 10px;padding:8px 12px;font-size:.85rem;color:#2A2150}
/* learner picker */
.lh-amx-who-cb{position:absolute;opacity:0;width:0;height:0}
.lh-amx-wholist{display:flex;flex-wrap:wrap;gap:6px;gap:8px}
.lh-amx-person{display:inline-flex;align-items:center;gap:6px;gap:8px;border:1.5px solid #DDC8F7;background:#F6F1FF;color:#3C3489;border-radius:999px;padding:5px 11px;padding:4px 12px;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .12s}
.lh-amx-person:hover{border-color:#9B4DFF}
.lh-amx-person.is-on{background:#534AB7;color:#fff;border-color:#534AB7}
.lh-amx-av{width:22px;height:22px;border-radius:50%;background:#EBE3FB;color:#43159E;display:inline-flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800;flex:0 0 auto}
.lh-amx-person.is-on .lh-amx-av{background:rgba(255,255,255,.25);color:#fff}
.lh-amx-pdone{display:none;font-size:.7rem}
.lh-amx-person.is-on .lh-amx-pdone{display:inline}
.lh-amx-selall{margin-top:8px;background:none;border:0;color:#534AB7;font-size:.78rem;font-weight:800;cursor:pointer;padding:2px 0;padding:4px 0}
.lh-amx-who--many .lh-amx-wholist{display:block;max-height:148px;overflow-y:auto;border:1.5px solid #E7E0F7;border-radius:12px;background:#FBF9FF}
.lh-amx-who--many .lh-amx-person{display:flex;width:100%;border:0;border-radius:0;border-bottom:.5px solid #ECE7F7;background:transparent;color:#2A2150;padding:8px 10px;padding:8px 12px;justify-content:flex-start}
.lh-amx-who--many .lh-amx-person.is-on{background:#EEFBF4;color:#0F6E56}
.lh-amx-who--many .lh-amx-person.is-on .lh-amx-av{background:#28C76F;color:#fff}
.lh-amx-whosearch{width:100%;border:1.5px solid #E0D6F5;border-radius:10px;padding:7px 10px;padding:8px 12px;font-size:.82rem;margin-bottom:8px}
/* module search */
.lh-amx__search{width:100%;border:1.5px solid #E0D6F5;border-radius:10px;padding:8px 10px;padding:8px 12px;font-size:.85rem;margin-bottom:8px}
.lh-amx__filters{display:flex;gap:6px;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.lh-amx__filter{flex:1;min-width:120px;border:1.5px solid #E0D6F5;border-radius:10px;padding:7px 8px;padding:8px 8px;font-size:.8rem;background:#fff;color:#2A2150}
.lh-amx__results{border:1.5px solid #E7E0F7;border-radius:12px;max-height:188px;overflow-y:auto;background:#FBF9FF}
.lh-amx__empty{font-size:.82rem;color:#8A7FB5;text-align:center;padding:18px 10px;padding:20px 12px;margin:0}
.lh-amx__result{display:flex;align-items:center;gap:9px;gap:8px;width:100%;text-align:left;background:none;border:0;border-bottom:.5px solid #ECE7F7;padding:9px 11px;padding:8px 12px;cursor:pointer;transition:background .12s}
.lh-amx__result:hover{background:#F3EEFC}
.lh-amx__result.is-chosen{background:#EEFBF4}
.lh-amx__tick{width:18px;height:18px;border-radius:6px;border:1.5px solid #C9BEEB;flex:0 0 auto;position:relative}
.lh-amx__result.is-chosen .lh-amx__tick{background:#28C76F;border-color:#28C76F}
.lh-amx__result.is-chosen .lh-amx__tick:after{content:"✓";color:#fff;font-size:.66rem;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lh-amx__rtxt{display:flex;flex-direction:column;min-width:0}
.lh-amx__rtitle{font-size:.82rem;font-weight:700;color:#2A2150;line-height:1.25}
.lh-amx__rmeta{font-size:.68rem;color:#8A7FB5}
/* footer */
.lh-amx__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;gap:12px;padding:12px 20px;border-top:1.5px solid #EFEAFB;background:#FAF7FF}
.lh-amx__tally{font-size:.82rem;font-weight:700;color:#534AB7}
.lh-amx__go:disabled{opacity:.45;cursor:not-allowed}
.lh-amx__fb{padding:0 20px;font-size:.84rem;font-weight:700;min-height:0}
.lh-amx__fb:not(:empty){padding:0 20px 12px}
.lh-amx__fb.is-pending{color:#8A7FB5}
.lh-amx__fb.is-good{color:#0F8F4D}
.lh-amx__fb.is-bad{color:#C2185B}
@media(max-width:640px){
  .lh-amx__body--cols{grid-template-columns:1fr}
  .lh-amx__body--cols .lh-amx__col:first-child{padding-right:0;margin-bottom:14px;margin-bottom:16px}
  .lh-amx__body--cols .lh-amx__col:last-child{padding-left:0;border-left:0;border-top:1.5px solid #EFEAFB;padding-top:14px;padding-top:16px}
  .lh-amx__panel{max-height:94vh;overflow-y:auto}
}

/* 59b — Dashboard header: render the assign trigger as the pink pill it replaced. */
.lhcc-top .lh-master-assign-open { background: var(--pink, #FF3D5A) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 9px 16px !important; padding: 8px 16px !important; font: 700 13px system-ui !important; box-shadow: none !important; display: inline-flex; align-items: center; gap: 6px; gap: 8px; }
.lhcc-top .lh-master-assign-open:hover { filter: brightness(.95); }

/* ==========================================================================
   60 — Advanced account widget (desktop header): avatar trigger → gamified,
   role-aware card with a tailored menu. Hover (desktop) or click to open.
   ========================================================================== */
.lh-acct { position: relative; display: inline-block; }
.lh-acct__trig { display: inline-flex; align-items: center; gap: 7px; gap: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 4px 11px 4px 4px; padding: 4px 12px 4px 4px; color: #fff; font-weight: 800; font-size: .9rem; cursor: pointer; transition: background .15s; line-height: 1; }
.lh-acct__trig:hover { background: rgba(255,255,255,.24); }
.lh-acct__av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .78rem; flex: 0 0 auto; }
.lh-acct__av--guest { background: #fff; }
.lh-acct__hi { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-acct__cv { font-size: .68rem; opacity: .85; }
.lh-acct__card { position: absolute; right: 0; top: calc(100% + 12px); width: 300px; background: #fff; border-radius: 18px; box-shadow: 0 24px 64px rgba(42,33,80,.34); overflow: hidden; z-index: 1300; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.lh-acct.is-open .lh-acct__card { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .lh-acct:hover .lh-acct__card { opacity: 1; visibility: visible; transform: none; } }
.lh-acct__card:after { content: ""; position: absolute; bottom: 100%; right: 20px; border: 7px solid transparent; border-bottom-color: #fff; }
.lh-acct__top { padding: 14px; padding: 16px; color: #fff; display: flex; gap: 11px; gap: 12px; align-items: center; }
.lh-acct__big { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; flex: 0 0 auto; }
.lh-acct__nm { font-family: 'Baloo 2','Fredoka',sans-serif; font-size: 1.02rem; font-weight: 800; line-height: 1.15; color: #fff; }
.lh-acct__rl { font-size: .78rem; opacity: .94; }
.lh-acct__blurb { font-size: .82rem; color: #6E6794; margin: 0; padding: 11px 14px 4px; padding: 12px 16px 4px; line-height: 1.5; }
.lh-acct__stats { display: flex; gap: 6px; gap: 8px; padding: 11px 12px; padding: 12px 12px; background: #FAF7FF; }
.lh-acct__st { flex: 1; text-align: center; background: #fff; border: 1px solid #EFEAFB; border-radius: 11px; padding: 7px 4px; padding: 8px 4px; }
.lh-acct__st b { display: block; font-family: 'Baloo 2','Fredoka',sans-serif; font-size: 1rem; color: #43159E; }
.lh-acct__st span { font-size: .66rem; color: #8A7FB5; font-weight: 800; letter-spacing: .02em; }
.lh-acct__menu { padding: 7px; padding: 8px; }
.lh-acct__mi { display: flex; align-items: center; gap: 10px; gap: 12px; padding: 9px 11px; padding: 8px 12px; border-radius: 10px; font-size: .88rem; font-weight: 700; color: #2A2150; text-decoration: none; transition: background .12s, color .12s; }
.lh-acct__mi span { font-size: 1rem; width: 20px; text-align: center; flex: 0 0 auto; }
.lh-acct__mi:hover { background: #F3EEFC; color: #43159E; }
.lh-acct__mi--cta { background: #534AB7; color: #fff; justify-content: center; margin-top: 4px; }
.lh-acct__mi--cta:hover { background: #43159E; color: #fff; }
.lh-acct__mi--ghost { justify-content: center; color: #6E6794; }
.lh-acct__mi--out { border-top: 1px solid #EFEAFB; color: #C2185B; margin-top: 4px; }
.lh-acct__mi--out:hover { background: #FCEBEF; color: #C2185B; }
/* On mobile the burger/drawer handles the account, so hide the desktop widget. */
@media (max-width: 900px) { .lh-acct { display: none; } }

/* 60b — The header nav uses overflow:hidden (shimmer), which clips an absolutely
   positioned dropdown. Make the account card position:fixed (viewport-relative,
   no transform/filter ancestor) so it escapes the clip; JS sets top/right. */
.lh-acct__card { position: fixed !important; right: 16px; top: 62px; z-index: 100000 !important; }
.lh-acct__card:after { display: none; }

/* 59c — Resource-page assign picker: learners who already have this module. */
.lh-amx-person.is-assigned { opacity: .7; cursor: default; background: #EAF7EF; border-color: #BFE6CF; color: #0F6E56; }
.lh-amx-who--many .lh-amx-person.is-assigned { background: #EAF7EF; color: #0F6E56; }
.lh-amx-person.is-assigned:hover { transform: none; border-color: #BFE6CF; }
.lh-amx-badge { margin-left: auto; font-size: .64rem; font-weight: 800; color: #0F8F4D; background: #D8F3E3; border-radius: 999px; padding: 2px 7px; padding: 4px 8px; white-space: nowrap; }
.lh-assign-open--done { opacity: .9; }