/* =====================================================================
   LinguaFlex: redesign override (October 2026)
   Load on EVERY page as the LAST stylesheet, after all other CSS,
   including the files shared-layout.js adds at runtime.
   Direction: energetic navy hero, calm light content, solid blue buttons.
   Fonts: Plus Jakarta Sans (headings) + Inter (text).
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

/* ---------- 1. Tokens (html:root wins over every existing :root) ---------- */
html:root {
  --lf-brand: #008EFD;          /* logo blue: logo and graphics only */
  --lf-blue: #0868C9;           /* buttons, links (white text 5.5:1) */
  --lf-blue-hover: #085BB3;
  --lf-blue-50: #EEF6FF;
  --lf-blue-100: #D9EBFF;
  --lf-accent: #A144FD;         /* logo purple: icons, graphics */
  --lf-accent-text: #8B2FE8;    /* purple text (5.7:1) */
  --lf-accent-50: #F5EDFF;
  --lf-amber: #FFB020;          /* small badges only */
  --lf-navy-950: #0A1426;
  --lf-navy-900: #0F1B33;
  --lf-navy-800: #15213C;
  --lf-ink: #0F1B33;
  --lf-text: #3C4A63;
  --lf-muted: #5E6B82;
  --lf-line: #E3E8F0;
  --lf-soft: #F5F8FC;
  --lf-success: #0B7A4D;
  --lf-error: #B42318;
  --lf-accent-gradient: linear-gradient(100deg, #33A5FF 0%, #B36BFF 100%); /* hero accent words only */
  --lf-radius-sm: 8px; --lf-radius-md: 12px; --lf-radius-lg: 20px; --lf-radius-pill: 999px;
  --lf-shadow-sm: 0 1px 2px rgba(15,27,51,.06), 0 2px 8px rgba(15,27,51,.05);
  --lf-shadow-md: 0 8px 28px rgba(15,27,51,.09);
  --lf-font-head: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  --lf-font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Old variables re-pointed so existing rules follow the new palette. */
  --navy: var(--lf-navy-900);
  --navy-2: var(--lf-navy-800);
  --ink: var(--lf-ink);
  --muted: var(--lf-muted);
  --soft: var(--lf-soft);
  --line: var(--lf-line);
  --purple: var(--lf-blue);
  --purple-2: var(--lf-accent);
  --cyan: var(--lf-brand);
  --pink: var(--lf-accent);
  --green: var(--lf-success);
  --gradient: var(--lf-blue);          /* every gradient button becomes solid blue */
  --lf-navy: var(--lf-navy-900);
  --lf-purple: var(--lf-blue);
  --lf-cyan: var(--lf-brand);
  --lf-pink: var(--lf-accent);
  --lf-gradient: var(--lf-blue);
  --shadow: var(--lf-shadow-md);
  --shadow-soft: var(--lf-shadow-sm);
}

/* ---------- 2. Typography: two families only ---------- */
html body, html body p, html body li, html body a, html body button, html body input,
html body select, html body textarea, html body label, html body small, html body span,
html body .lf-coming-soon, html body .reference-footer[data-shared-footer], html body .site-footer {
  font-family: var(--lf-font-body) !important;
}
html body h1, html body h2, html body h3, html body h4,
html body .section-kicker, html body .eyebrow, html body .kicker,
html body .button, html body .price, html body .package-name, html body .step-number,
html body .site-header .main-nav a, html body .hero-metrics strong, html body .lf-coming-hero h2,
html body .lf-coming-card h3, html body .lf-coming-steps h4, html body .lf-coming-notes h4 {
  font-family: var(--lf-font-head) !important;
}
html body { color: var(--lf-text); -webkit-font-smoothing: antialiased; }
html body h1, html body h2, html body h3, html body h4 { color: inherit; letter-spacing: -0.02em !important; }
html body h1 { line-height: 1.05; }
html body h2 { line-height: 1.12; }
/* Type scale (desktop): H1 64, H2 48, H3 28/22, text 16-18. */
html body .hero h1 { font-size: clamp(40px, 5vw, 64px) !important; line-height: 1.05 !important; font-weight: 800 !important; }
html body .section-heading h2, html body .section-head h2, html body .split-copy h2, html body .partner-copy h2,
html body .school-cta h2, html body .faq-intro h2, html body .lf-london-copy h2, html body .final-cta h2 {
  font-size: clamp(30px, 3.4vw, 48px) !important; font-weight: 800 !important; line-height: 1.1 !important;
}
html body .legal-copy h2 { font-size: 24px !important; color: var(--lf-ink) !important; font-weight: 700 !important; margin-top: 32px !important; }
html body .professional-panel h2 { font-size: 26px !important; color: var(--lf-ink) !important; font-weight: 700 !important; line-height: 1.2 !important; }
html body .legal-hero h1 { font-size: clamp(36px, 4.4vw, 56px) !important; }
html body .section-kicker, html body .eyebrow {
  color: var(--lf-blue) !important; font-size: 12px !important; font-weight: 800 !important;
  letter-spacing: .1em !important; text-transform: uppercase;
}
html body p { line-height: 1.6; }
/* Nothing under 12px. */
html body .footer-copyright, html body .footer-disclosure span,
html body .footer-legal-links a, html body .footer-legal-links span, html body .footer-contact small { font-size: 12px !important; }
html body .portal-card small, html body .booking-preview small, html body .wallet-float small,
html body .portal-stats small, html body .calendar-card small { font-size: 11px !important; letter-spacing: .04em; }

/* ---------- 3. Buttons: solid blue, outline, text ---------- */
html body .button, html body button.button, html body a.button {
  border-radius: var(--lf-radius-md) !important; font-weight: 700 !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html body .button-primary, html body .site-header .nav-cta, html body #app-modal .auth-modal .auth-form .button,
html body .scanner-primary {
  background: var(--lf-blue) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: none !important;
}
html body .button-primary:hover { background: var(--lf-blue-hover) !important; }
html body .button-dark { background: var(--lf-navy-900) !important; color: #fff !important; border-radius: var(--lf-radius-md) !important; }
html body .button-white { background: #fff !important; color: var(--lf-navy-900) !important; }
html body .button:focus-visible, html body a:focus-visible, html body button:focus-visible,
html body input:focus-visible, html body select:focus-visible, html body textarea:focus-visible {
  outline: 3px solid var(--lf-blue) !important; outline-offset: 2px !important;
}

/* ---------- 4. Announcement + header ---------- */
html body > .announcement { background: var(--lf-navy-950) !important; }
html body > .site-header[data-shared-header] { background: var(--lf-navy-800) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
html body > .site-header[data-shared-header] .main-nav a { color: #C9D3E6 !important; }
html body > .site-header[data-shared-header] .main-nav a:hover,
html body > .site-header[data-shared-header] .main-nav a.active { color: #fff !important; }
html body > .site-header[data-shared-header] .main-nav a:after { background: var(--lf-brand) !important; }
html body > .site-header[data-shared-header] .mobile-drawer-actions a,
html body > .site-header[data-shared-header] .mobile-drawer-actions .primary {
  background: var(--lf-blue) !important; box-shadow: none !important;
}
html body > .site-header[data-shared-header] .mobile-drawer nav a:before { background: var(--lf-brand) !important; }
html body > .site-header[data-shared-header] .avatar-small { background: var(--lf-blue) !important; }

/* ---------- 5. Home: hero (the one energetic, dark area) ---------- */
html body .hero h1 span, html body .hero h1 .gradient-text {
  background: var(--lf-accent-gradient) !important; -webkit-background-clip: text !important;
  background-clip: text !important; color: transparent !important;
}
html body .hero .hero-proof { display: none !important; }             /* stars + letter avatars removed */
html body .hero .button-link { color: #fff !important; }
html body .hero .play-icon { color: var(--lf-blue) !important; border-color: transparent !important; }
html body .orb-one { background: radial-gradient(circle, rgba(161,68,253,.18), transparent 68%) !important; }
html body .hero-metrics .hero-benefit svg { color: var(--lf-brand) !important; }
html body .hero-metrics .hero-benefit:nth-child(even) svg { color: #B36BFF !important; }
html body .hero-metrics .hero-benefit { align-items: flex-start !important; }
html body .hero-metrics .hero-benefit strong { font-family: var(--lf-font-head) !important; }

/* ---------- 6. Home: "Find a class" / coming soon block ---------- */
html body .lf-coming-soon .lf-gradient {
  background: none !important; color: var(--lf-blue) !important; -webkit-text-fill-color: currentColor;
}
html body .lf-coming-hero .lf-gradient { color: #7CC4FF !important; }
html body .lf-coming-card h3 { color: var(--lf-ink) !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
html body .lf-coming-card a { background: var(--lf-blue) !important; border-radius: var(--lf-radius-md) !important; }
html body .lf-coming-steps h4 { font-weight: 700 !important; color: var(--lf-ink) !important; letter-spacing: -.01em !important; }
html body .lf-coming-steps .lf-icon { background: var(--lf-blue-50) !important; color: var(--lf-blue) !important; }
html body .lf-coming-steps > *:nth-child(2) .lf-icon { background: var(--lf-accent-50) !important; color: var(--lf-accent) !important; }
html body .lf-coming-notes svg { color: var(--lf-blue) !important; }
html body .classes-section { padding-bottom: 32px !important; }
/* Home only: while the catalogue is empty, keep the coming-soon block short.
   Its 3 steps repeat "How it works", which now follows directly below. */
html body main:has(.hero) .lf-coming-steps, html body main:has(.hero) .lf-coming-notes { display: none !important; }
html body main:has(.hero) .lf-coming-soon { padding-bottom: 36px !important; }

/* ---------- 7. Home: How it works ---------- */
html body .how-section { background: var(--lf-soft) !important; }
html body .step-icon { background: var(--lf-blue) !important; box-shadow: none !important; border-radius: var(--lf-radius-md) !important; }
html body .steps-grid > *:nth-child(2) .step-icon { background: var(--lf-accent) !important; }
html body .step-number { color: #E6ECF5 !important; }
html body .principle-banner { background: var(--lf-blue-50) !important; border-color: var(--lf-blue-100) !important; color: var(--lf-blue) !important; }
html body .principle-banner strong { color: var(--lf-ink) !important; }
html body .original-steps .feature-card:after { display: none !important; }

/* ---------- 8. Home: credits (the money section: colour and clear value) ---------- */
html body .credits-section {
  background: radial-gradient(60% 60% at 100% 0%, rgba(161,68,253,.10), transparent 60%),
              radial-gradient(60% 70% at 0% 100%, rgba(0,142,253,.12), transparent 60%), var(--lf-blue-50) !important;
  color: var(--lf-text) !important;
}
html body .credits-section:before, html body .credits-section:after { display: none !important; }
html body .credits-section .section-heading h2 { color: var(--lf-ink) !important; }
html body .credits-section .section-heading p { color: var(--lf-muted) !important; }
html body .credits-section .section-kicker { color: var(--lf-blue) !important; }
html body .pricing-grid { gap: 18px !important; align-items: stretch; margin-top: 36px !important; }
html body .price-card.credit-package {
  background: #fff !important; border: 1px solid var(--lf-line) !important; border-top: 5px solid var(--lf-brand) !important;
  border-radius: var(--lf-radius-lg) !important; box-shadow: var(--lf-shadow-md) !important; color: var(--lf-text) !important;
  padding: 26px 24px 24px !important; display: flex !important; flex-direction: column; position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
html body .price-card.credit-package:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,27,51,.14) !important; }
html body .price-card.lf-pkg-max { border-top-color: var(--lf-accent) !important; }
/* Recommended package: filled brand blue. */
html body .price-card.credit-package.popular {
  background: linear-gradient(165deg, #0A74E0 0%, #0857AE 100%) !important; border: 0 !important; color: #fff !important;
  box-shadow: 0 22px 50px rgba(8,104,201,.35) !important;
}
/* Same box as the white cards (5px top + 1px sides) so heights and buttons line up. */
html body .price-card.credit-package.popular { border: 1px solid transparent !important; border-top: 5px solid transparent !important; background-clip: border-box !important; }
html body .price-card.credit-package h3 {
  color: var(--lf-ink) !important; font-size: 15px !important; letter-spacing: .08em !important; font-weight: 800 !important; margin: 4px 0 14px !important;
}
html body .price-card.credit-package p.lf-tagline { font: 500 14px/1.4 var(--lf-font-body) !important; color: var(--lf-muted) !important; margin: 0 0 20px !important; min-height: 0 !important; }
html body .price-card.credit-package.popular h3 { color: #fff !important; }
html body .price-card.credit-package.popular p.lf-tagline { color: #D9EBFF !important; }
html body .price-card.credit-package .price {
  color: var(--lf-ink) !important; font-size: 46px !important; line-height: 1 !important; font-weight: 800 !important; margin: 0 0 8px !important; letter-spacing: -.02em;
}
html body .price-card.credit-package.popular .price { color: #fff !important; }
html body .price-card.credit-package p.lf-credits-line { color: var(--lf-text) !important; font-size: 15px !important; font-weight: 600; margin: 0 0 6px !important; min-height: 0 !important; }
html body .price-card.credit-package.popular p.lf-credits-line { color: #fff !important; }
.lf-features { list-style: none; margin: 0 0 22px; padding: 16px 0 0; border-top: 1px solid var(--lf-line); display: grid; gap: 10px; }
.lf-features li { display: flex; gap: 9px; align-items: center; font: 500 14px/1.35 var(--lf-font-body); color: var(--lf-text); }
.lf-features svg { width: 18px; height: 18px; flex: none; color: var(--lf-success); background: #E7F6EE; border-radius: 50%; padding: 3px; }
html body .price-card.credit-package.popular .lf-features { border-top-color: rgba(255,255,255,.22); }
html body .price-card.credit-package.popular .lf-features li { color: #fff; }
html body .price-card.credit-package.popular .lf-features svg { color: var(--lf-blue); background: #fff; }
html body .price-card.credit-package .button { margin-top: auto !important; width: 100%; min-height: 48px; font-size: 15px !important; }
html body .price-card.credit-package:not(.popular) .button-primary { background: var(--lf-blue) !important; color: #fff !important; border: 0 !important; }
html body .price-card.credit-package:not(.popular) .button-primary:hover { background: var(--lf-blue-hover) !important; }
html body .price-card.credit-package.popular .button-primary { background: #fff !important; color: var(--lf-blue) !important; }
html body .price-card.credit-package.popular .button-primary:hover { background: var(--lf-blue-50) !important; }
html body .price-card .popular-label {
  position: absolute !important; top: -13px !important; left: 50% !important; right: auto !important; transform: translateX(-50%);
  background: var(--lf-amber) !important; color: var(--lf-navy-900) !important; border-radius: var(--lf-radius-pill) !important;
  font: 800 11px/1 var(--lf-font-body) !important; letter-spacing: .06em !important; padding: 7px 14px !important; white-space: nowrap;
  text-transform: uppercase; box-shadow: 0 6px 16px rgba(255,176,32,.35) !important;
}
html body .credit-disclosure {
  text-align: center !important; color: var(--lf-text) !important; font: 500 15px/1.55 var(--lf-font-body) !important;
  max-width: 620px; margin: 34px auto 6px !important; padding: 16px 24px !important; background: rgba(255,255,255,.75);
  border: 1px solid #DCE7F5; border-radius: 16px; box-shadow: 0 6px 18px rgba(15,27,51,.05);
}
html body .credit-disclosure strong { color: var(--lf-ink, #0F1B33); font-weight: 700; }
html body .credits-section .test-note { color: var(--lf-muted) !important; justify-content: center; font-size: 14px !important; }
html body .credits-section .test-note svg { color: var(--lf-blue) !important; }

/* ---------- 9. Home: benefits, freedom map, London block ---------- */
/* "Why LinguaFlex" list: drawn line icons in soft, slightly raised tiles. */
html body .benefits-list .benefit { align-items: center !important; gap: 16px !important; }
html body .benefits-list .benefit-icon {
  flex: 0 0 50px !important; min-width: 50px !important; width: 50px !important; height: 50px !important; border-radius: 15px !important;
  display: grid !important; place-items: center; color: var(--lf-blue) !important; font-size: 0 !important;
  background: linear-gradient(150deg, #FFFFFF 0%, var(--lf-blue-50) 100%) !important;
  border: 1px solid var(--lf-blue-100) !important;
  box-shadow: 0 8px 20px rgba(8,104,201,.12), inset 0 1px 0 #fff !important;
}
html body .benefits-list .benefit:nth-child(even) .benefit-icon {
  color: var(--lf-accent-text) !important; background: linear-gradient(150deg, #FFFFFF 0%, var(--lf-accent-50) 100%) !important;
  border-color: #E6D3FF !important; box-shadow: 0 8px 20px rgba(139,47,232,.12), inset 0 1px 0 #fff !important;
}
html body .benefits-list .benefit-icon svg { width: 26px; height: 26px; stroke-width: 1.9; }
html body .benefits-list .benefit h3 { color: var(--lf-ink) !important; font-size: 18px !important; font-weight: 700 !important; margin: 0 0 3px !important; }
html body .benefits-list .benefit p { color: var(--lf-muted) !important; font-size: 15px !important; margin: 0 !important; }
html body .benefit-list > div > span, html body .benefits-list > div > span, html body .benefits-list span[class*="icon"] {
  background: var(--lf-blue-50) !important; color: var(--lf-blue) !important;
}
html body .benefit-list > div:nth-child(2) > span { background: var(--lf-accent-50) !important; color: var(--lf-accent) !important; }
html body .map-route, html body .route-purple { background: var(--lf-blue) !important; box-shadow: none !important; }
html body .r2, html body .route-pink { background: var(--lf-accent) !important; }
html body .pin i, html body .location-pin i { background: var(--lf-blue) !important; }
html body .p2 i, html body .location-pin.pin-camden i { background: var(--lf-accent) !important; }
html body .wallet-float > span, html body .map-balance > span { background: var(--lf-blue) !important; }
html body .lf-london-list svg, html body .lf-london-list i { color: var(--lf-success) !important; }

/* ---------- 10. Home: schools teaser + FAQ + final CTA ---------- */
html body .school-cta { background: var(--lf-navy-900) !important; }
html body .school-cta .section-kicker { color: #7CC4FF !important; }
html body .school-points svg { color: #7CC4FF !important; }
html body .portal-head .preview-logo, html body .preview-logo, html body .school-initials.mini { background: var(--lf-blue) !important; }
html body .date-box { background: var(--lf-blue-50) !important; color: var(--lf-blue) !important; }
html body .faq-item.open button svg, html body .faq-intro a { color: var(--lf-blue) !important; }
html body .faq-item button span { color: var(--lf-ink); }
html body .final-cta { background: var(--lf-navy-800) !important; color: #fff !important; }
html body .final-cta .section-kicker { color: #7CC4FF !important; }

/* ---------- 11. For schools ---------- */
html body .partner-hero { background: radial-gradient(90% 80% at 85% 10%, rgba(161,68,253,.22), transparent 55%), radial-gradient(70% 70% at 0% 100%, rgba(0,142,253,.18), transparent 60%), var(--lf-navy-900) !important; }
html body .gradient-text {
  background: var(--lf-accent-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}
html body main:not(:has(.partner-hero)) .gradient-text { background: none !important; color: var(--lf-blue) !important; }
html body .partner-visual {
  background: linear-gradient(160deg, rgba(0,142,253,.20), rgba(161,68,253,.20)), var(--lf-navy-800) !important;
  border: 1px solid rgba(255,255,255,.10); box-shadow: 0 24px 60px rgba(4,10,24,.35) !important;
}
html body .partner-hero .section-kicker { color: #7CC4FF !important; }
html body .partner-step b { background: var(--lf-blue) !important; }
html body .partner-step:nth-child(even) b { background: var(--lf-accent) !important; }
html body .feature-number { background: var(--lf-blue-50) !important; color: var(--lf-blue) !important; }
html body .feature-card:nth-child(2) .feature-number { background: var(--lf-accent-50) !important; color: var(--lf-accent-text) !important; }
html body .tags span, html body .demo-badge { background: var(--lf-blue-50) !important; color: var(--lf-blue) !important; }
/* Application form: the intro copy was almost invisible (1.6:1). */
html body .application-section .partner-copy p { color: var(--lf-text) !important; }
html body .application-section .partner-copy p a { color: var(--lf-blue) !important; font-weight: 600; }
html body .partner-hero .partner-copy p { color: #C9D3E6 !important; }
html body .feature-card h3 { color: var(--lf-ink) !important; }
/* Kickers on dark backgrounds need the light blue (blue on navy is too dark). */
html body .hero .eyebrow, html body .hero .section-kicker, html body .dark-section .section-kicker,
html body .dark-section .eyebrow, html body .partner-hero .section-kicker, html body .partner-hero .eyebrow {
  color: #7CC4FF !important;
}
html body .hero .eyebrow::before, html body .hero .eyebrow i, html body .hero .live-dot { background: #7CC4FF !important; }
html body .check-list span::before, html body .check-list svg { color: var(--lf-success) !important; }
html body input, html body select, html body textarea { border-radius: var(--lf-radius-sm) !important; }
html body input:focus, html body select:focus, html body textarea:focus { border-color: var(--lf-blue) !important; box-shadow: 0 0 0 3px rgba(8,104,201,.15) !important; }

/* ---------- 12. Legal, contact, help ---------- */
html body .legal-hero { background: linear-gradient(180deg, #fff, var(--lf-soft)) !important; }
html body .legal-hero h1 { color: var(--lf-ink) !important; font-weight: 800 !important; }
html body .legal-nav a:hover, html body .legal-copy a, html body .help-contact a span { color: var(--lf-blue) !important; }
html body .professional-panel { border-radius: var(--lf-radius-lg) !important; box-shadow: var(--lf-shadow-sm) !important; }
html body .contact-form-panel { grid-column: 1 / -1; }
html body .contact-form-panel > p { color: var(--lf-text); margin-bottom: 20px; }
html body .form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
html body .contact-form button { justify-self: start; }

/* ---------- 13. Footer (+ social links) ---------- */
html body > .reference-footer[data-shared-footer]:not(.dashboard-footer), html body > .site-footer[data-shared-footer] { background: var(--lf-navy-950) !important; }
html body .reference-footer .prototype-label { color: #7CC4FF !important; border-color: rgba(124,196,255,.45) !important; }
html body .reference-footer .footer-contact svg { stroke: #7CC4FF !important; }
.lf-social { display: flex; gap: 10px; margin-top: 18px; }
.lf-social a {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #C9D3E6 !important;
  transition: background-color .15s ease, color .15s ease;
}
.lf-social a:hover { background: var(--lf-blue); color: #fff !important; border-color: transparent; }
.lf-social svg { width: 18px; height: 18px; fill: currentColor; }
/* Contact page social block (light background). */
.lf-social-panel .lf-social a { background: var(--lf-blue-50); border-color: var(--lf-blue-100); color: var(--lf-blue) !important; }
.lf-social-panel .lf-social a:hover { background: var(--lf-blue); color: #fff !important; }
.lf-social-panel .lf-social { margin-top: 12px; }
.lf-social-panel .lf-social-row { display: flex; align-items: center; gap: 10px; color: var(--lf-text); font-weight: 600; }

/* ---------- 14. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after { animation: none !important; transition: none !important; }
  html body .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- 15. Mobile ---------- */
@media (max-width: 720px) {
  html body .hero h1 { font-size: 40px !important; }
  html body .section-heading h2, html body .section-head h2, html body .split-copy h2, html body .partner-copy h2,
  html body .school-cta h2, html body .faq-intro h2, html body .lf-london-copy h2, html body .final-cta h2 { font-size: 30px !important; }
  html body .price-card.credit-package { padding: 24px 20px 20px !important; }
  html body .price-card.credit-package .price { font-size: 38px !important; }
}


/* ---------- 16. Colour flow: a luminance staircase, no white "flash" ----------
   Evidence: dark text on light reads best (Piepenbrock, Mayr & Buchner, Ergonomics 2013/2014),
   and discomfort grows with the size of a sudden brightness jump (Ploumis et al., SMPTE 2019/2021;
   Zuena & Pytlarz, J. Perceptual Imaging 2024). So content stays light, but the steps between
   dark and light are graded and large areas use tinted off-white instead of pure #FFF. */
html body { background: var(--lf-soft) !important; }
/* Hero -> catalogue: start the next section in navy and grade it to the light tint;
   the dark photo card of the catalogue sits on the graded part. */
html body main:has(.hero) .classes-section {
  background: linear-gradient(180deg, var(--lf-navy-800) 0px, #22324F 70px, #8FA3C2 210px, #DCE5F1 300px, var(--lf-soft) 420px) !important;
  padding-top: 40px !important;
}
html body main:has(.hero) .lf-coming-soon { box-shadow: 0 30px 60px rgba(10,20,38,.25) !important; }
/* Middle: alternate two tinted off-whites, never large pure white fields. */
html body .how-section { background: #EEF3FA !important; }
html body section.reveal, html body .benefits-section { background: var(--lf-soft) !important; }
html body .lf-london-section { background: #EEF3FA !important; }
html body .faq-section { background: linear-gradient(180deg, var(--lf-soft) 0%, #E6EDF6 100%) !important; }
html body .schools-section { background: linear-gradient(180deg, #E6EDF6 0%, #C9D5E6 100%) !important; }
/* End: grade back into the dark footer. */
html body .final-cta { background: linear-gradient(180deg, #2A3B5E 0%, var(--lf-navy-800) 55%, #111B30 100%) !important; }
html body > .reference-footer[data-shared-footer] { border-top: 0 !important; }
/* Other pages: soft page background behind light sections. */
html body .legal-page, html body .application-section { background: var(--lf-soft) !important; }

/* ---------- 17. London block: real photo with map pins ---------- */
html body .lf-london-image.lf-london-photo {
  position: relative !important; aspect-ratio: 3 / 2; padding: 0 !important; overflow: hidden !important;
  border-radius: var(--lf-radius-lg) !important; background: var(--lf-navy-800) !important;
  box-shadow: 0 24px 60px rgba(15,27,51,.22) !important;
}
html body .lf-london-photo > img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; max-width: none !important; filter: contrast(1.08) saturate(1.12) brightness(1.03); }
.lf-london-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,38,.10) 0%, rgba(10,20,38,0) 40%, rgba(10,20,38,.28) 100%); pointer-events: none; }
.lf-route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.lf-route path { fill: none; stroke: #fff; stroke-width: .55; stroke-dasharray: 1.6 1.2; stroke-linecap: round; opacity: .95; filter: drop-shadow(0 0 .6px rgba(10,20,38,.6)); }
.lf-pin { position: absolute; z-index: 2; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.lf-pin b {
  order: -1; font: 700 13px/1 var(--lf-font-body); color: var(--lf-ink); background: #fff; padding: 7px 11px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(10,20,38,.28); white-space: nowrap;
}
.lf-pin i { position: relative; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(10,20,38,.45); }
.lf-pin i::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid currentColor; opacity: .55; }
.lf-pin-blue i::after { color: #7CC4FF; } .lf-pin-purple i::after { color: #D2A6FF; }
.lf-pin b::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.lf-pin b { position: relative; }
.lf-pin-blue i { background: var(--lf-brand); }
.lf-pin-purple i { background: var(--lf-accent); }
html body .lf-london-photo .lf-london-label { z-index: 3; top: 18px !important; left: 18px !important; bottom: auto !important; right: auto !important; }
@media (max-width: 720px) { .lf-pin b { font-size: 11px; padding: 5px 8px; } .lf-pin i { width: 12px; height: 12px; } }
/* Real map variant (OpenStreetMap data, ODbL: attribution required). */
html body .lf-london-map > img { filter: none !important; }
html body .lf-london-map::after { background: radial-gradient(120% 90% at 50% 45%, rgba(238,243,250,0) 60%, rgba(214,225,240,.55) 100%) !important; }
.lf-map-credit { position: absolute; right: 10px; bottom: 8px; z-index: 3; font: 500 11px/1 var(--lf-font-body); color: var(--lf-muted); background: rgba(255,255,255,.85); padding: 4px 7px; border-radius: 6px; }
html body .lf-london-map .lf-london-label { top: auto !important; bottom: 18px !important; left: 18px !important; }
.lf-pin-left { transform: translate(-12px, -100%); align-items: flex-start; }
.lf-pin-left b::after { left: 12px; }
.lf-map-credit { top: 10px; bottom: auto !important; }
html body .lf-london-map .lf-map-credit { top: auto; bottom: 8px !important; }
@media (max-width: 720px) {
  html body .lf-london-map .lf-london-label { max-width: 50% !important; padding: 10px 12px !important; bottom: 12px !important; left: 12px !important; }
  html body .lf-london-map .lf-london-label strong { font-size: 13px !important; }
  html body .lf-london-map .lf-london-label small { font-size: 12px !important; }
  .lf-map-credit { font-size: 10px; }
}
@media (max-width: 720px) {
  html body .lf-london-photo .lf-london-label { top: auto !important; bottom: 12px !important; left: 12px !important; max-width: 62% !important; padding: 10px 12px !important; }
  html body .lf-london-photo .lf-london-label strong { font-size: 13px !important; }
  html body .lf-london-photo .lf-london-label small { font-size: 12px !important; }
}

/* ---------- 18. Map pins v2: small location pin + frosted label beside it ---------- */
.lf-pin2 { position: absolute; z-index: 2; display: flex; align-items: center; gap: 5px; pointer-events: none;
  transform: translate(-8px, -19px); }                       /* pin tip sits exactly on the point */
.lf-pin2 svg { width: 16px; height: 20px; flex: none; overflow: visible; filter: drop-shadow(0 2px 3px rgba(5,12,26,.45)); }
.lf-pin2 svg path { fill: var(--lf-brand); stroke: #fff; stroke-width: 2; }
.lf-pin2 svg circle { fill: #fff; }
.lf-pin2 b {
  font: 600 11.5px/1 var(--lf-font-body); letter-spacing: .02em; color: #fff; white-space: nowrap;
  padding: 5px 9px 5px 8px; border-radius: 999px;
  background: rgba(10, 20, 38, .52); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 4px 14px rgba(5,12,26,.25);
}
.lf-pin2-flip { flex-direction: row-reverse; transform: translate(calc(-100% + 8px), -19px); }
@media (max-width: 720px) {
  .lf-pin2 svg { width: 13px; height: 16px; }
  .lf-pin2 { transform: translate(-6.5px, -15px); gap: 4px; }
  .lf-pin2-flip { transform: translate(calc(-100% + 6.5px), -15px); }
  .lf-pin2 b { font-size: 10.5px; padding: 4px 7px; }
}
/* Caption on the photo: same frosted language as the pins, smaller. */
html body .lf-london-photo .lf-london-label {
  background: rgba(10, 20, 38, .50) !important; border: 1px solid rgba(255,255,255,.20) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 6px 20px rgba(5,12,26,.25) !important; padding: 10px 14px !important; border-radius: 12px !important; max-width: 300px;
}
html body .lf-london-photo .lf-london-label strong { color: #fff !important; font: 700 13.5px/1.3 var(--lf-font-head) !important; }
html body .lf-london-photo .lf-london-label small { color: #D3DDEC !important; font: 500 12px/1.4 var(--lf-font-body) !important; }
@media (max-width: 720px) { .lf-pin2-mflip { flex-direction: row-reverse; transform: translate(calc(-100% + 6.5px), -15px); } }
/* Ground shadow under the pin tip so the pin stands on the ground. */
.lf-pin2-ground { position: absolute; left: 8px; top: 19px; width: 14px; height: 5px; margin: -2.5px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(5,12,26,.55), rgba(5,12,26,0)); pointer-events: none; }
.lf-pin2-flip .lf-pin2-ground { left: auto; right: 8px; margin: -2.5px -7px 0 0; }
@media (max-width: 720px) {
  .lf-pin2-ground { left: 6.5px; top: 15px; width: 11px; height: 4px; margin: -2px 0 0 -5.5px; }
  .lf-pin2-flip .lf-pin2-ground, .lf-pin2-mflip .lf-pin2-ground { left: auto; right: 6.5px; margin: -2px -5.5px 0 0; }
}
/* Depth: farther areas (higher in the photo) get smaller pins; the tip stays on its point. */
.lf-pin2 { transform: translate(-8px, -19px) scale(var(--s, 1)); transform-origin: 8px 19px; }
.lf-pin2-flip { transform: translate(calc(-100% + 8px), -19px) scale(var(--s, 1)); transform-origin: calc(100% - 8px) 19px; }
@media (max-width: 720px) {
  .lf-pin2 { transform: translate(-6.5px, -15px) scale(var(--s, 1)); transform-origin: 6.5px 15px; }
  .lf-pin2-flip, .lf-pin2-mflip { transform: translate(calc(-100% + 6.5px), -15px) scale(var(--s, 1)); transform-origin: calc(100% - 6.5px) 15px; }
}
/* Smaller caption box on the photo. */
html body .lf-london-photo .lf-london-label { padding: 7px 11px !important; border-radius: 10px !important; max-width: 230px !important; top: 14px !important; left: 14px !important; }
html body .lf-london-photo .lf-london-label strong { font-size: 12px !important; }
html body .lf-london-photo .lf-london-label small { font-size: 10.5px !important; }
@media (max-width: 720px) { html body .lf-london-photo .lf-london-label { top: auto !important; bottom: 10px !important; left: 10px !important; max-width: 190px !important; padding: 6px 9px !important; } }
html body section .lf-london-image.lf-london-photo .lf-london-label { width: auto !important; max-width: none !important; }
html body section .lf-london-image.lf-london-photo .lf-london-label strong { font: 700 12px/1.25 var(--lf-font-head) !important; }
html body section .lf-london-image.lf-london-photo .lf-london-label small { font: 500 10.5px/1.3 var(--lf-font-body) !important; white-space: nowrap; }

/* ---------- 19. Footer: no orphan separators when lines wrap ---------- */
html body .reference-footer .footer-disclosure { display: flex !important; flex-wrap: wrap; gap: 4px 14px; }
html body .reference-footer .footer-disclosure span::before, html body .reference-footer .footer-disclosure span::after { display: none !important; content: none !important; }
html body .reference-footer .footer-legal-links { display: flex !important; flex-wrap: wrap; gap: 6px 18px; }
html body .reference-footer .footer-legal-links a, html body .reference-footer .footer-legal-links span { border: 0 !important; padding: 0 !important; margin: 0 !important; }
html body .reference-footer .footer-legal-links a::before, html body .reference-footer .footer-legal-links a::after { display: none !important; content: none !important; }
@media (max-width: 720px) { html body .reference-footer .footer-disclosure, html body .reference-footer .footer-legal-links { justify-content: center; } }

/* ---------- 20. Final sweep: leftover fonts and tiny labels ---------- */
html body .portal-stats strong, html body .portal-card strong, html body .lf-coming-sign { font-family: var(--lf-font-head) !important; }
html body > .announcement, html body > .announcement a, html body > .announcement span { font-size: 12.5px !important; }
html body .prototype-label, html body .price-card .popular-label, html body .lf-coming-card .kicker,
html body .lf-coming-card [class*="kicker"], html body .lf-coming-card small { font-size: 12px !important; }
html body .hero-metrics .hero-benefit small, html body .hero-metrics .hero-benefit span, html body .hero-metrics .hero-benefit p { font-size: 13px !important; line-height: 1.4 !important; }

/* ---------- 21. Hero fills the first screen (as on the live site) ---------- */
html body main > .hero { min-height: calc(100vh - 104px) !important; min-height: calc(100svh - 104px) !important; display: flex !important; flex-direction: column; justify-content: center; }
html body .hero h1 { font-size: clamp(48px, 5.8vw, 86px) !important; line-height: 1.02 !important; }
@media (max-width: 720px) { html body .hero h1 { font-size: 44px !important; } }
html body .hero .play-icon { border: 1px solid rgba(255,255,255,.35) !important; background: rgba(255,255,255,.08) !important; color: #fff !important; }

/* ---------- 22. Scroll reveal: faint -> vivid ---------- */
.lf-rv { opacity: .12; transform: translateY(28px); filter: saturate(.3) blur(1px);
  transition: opacity .8s ease var(--d, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), filter .8s ease var(--d, 0ms); }
.lf-rv.lf-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .lf-rv { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* ---------- 23. How it works as a zigzag journey ---------- */
html body .how-section .steps-grid.lf-journey { position: relative; display: flex !important; flex-direction: column; gap: 28px !important; max-width: 940px; margin: 48px auto 0 !important; grid-template-columns: none !important; }
.lf-jline { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.lf-jline path { fill: none; stroke: #9DB4D6; stroke-width: 2.5; stroke-dasharray: 9 9; stroke-linecap: round; }
html body .lf-jcard { position: relative; z-index: 1; width: 44% !important; background: #fff !important; border: 1px solid var(--lf-line) !important;
  border-radius: 18px !important; box-shadow: var(--lf-shadow-sm) !important; padding: 26px 28px !important; margin: 0 !important; overflow: visible !important;
  transition: transform .25s ease, box-shadow .25s ease, opacity .8s ease var(--d,0ms), filter .8s ease var(--d,0ms) !important; }
html body .lf-jcard.lf-jleft { align-self: flex-start; }
html body .lf-jcard.lf-jright { align-self: flex-end; }
html body .lf-jcard:hover { transform: translateY(-6px) scale(1.015) !important; box-shadow: 0 18px 40px rgba(15,27,51,.14) !important; border-color: var(--lf-blue-100) !important; }
html body .lf-jcard .step-number { display: none !important; }
.lf-jdot { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center;
  font: 800 16px/1 var(--lf-font-head); color: #fff; background: var(--c); box-shadow: 0 0 0 6px rgba(255,255,255,.9), 0 8px 18px rgba(15,27,51,.18); }
.lf-jleft .lf-jdot { right: -16%; }
.lf-jright .lf-jdot { left: -16%; }
html body .how-section .principle-banner { max-width: 940px; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 720px) {
  html body .how-section .steps-grid.lf-journey { padding-left: 46px; gap: 20px !important; }
  html body .lf-jcard, html body .lf-jcard.lf-jleft, html body .lf-jcard.lf-jright { width: 100% !important; align-self: stretch; }
  .lf-jleft .lf-jdot, .lf-jright .lf-jdot { left: -46px; right: auto; width: 34px; height: 34px; margin-top: -17px; font-size: 14px; }
}
/* Journey v2: dots on the centre column, short connector to each card, no empty card space. */
html body .lf-jcard { height: auto !important; min-height: 0 !important; }
.lf-jleft .lf-jdot { right: auto; left: calc(113.64% - 22px); }
.lf-jright .lf-jdot { left: calc(-13.64% - 22px); }
.lf-jdot::before { content: ""; position: absolute; top: 50%; width: 30px; border-top: 2.5px dashed #9DB4D6; }
.lf-jleft .lf-jdot::before { right: 100%; margin-right: 8px; }
.lf-jright .lf-jdot::before { left: 100%; margin-left: 8px; }
@media (max-width: 720px) { .lf-jdot::before { display: none; } }
@media (max-width: 720px) {
  html body .lf-jleft .lf-jdot, html body .lf-jright .lf-jdot { left: -46px !important; right: auto !important; width: 34px; height: 34px; margin-top: -17px; font-size: 14px; }
}
/* Journey v3: wider centre column so the dots breathe. */
@media (min-width: 721px) {
  html body .lf-jcard { width: 41% !important; }
  html body .lf-jleft .lf-jdot { left: calc(121.95% - 22px) !important; right: auto !important; }
  html body .lf-jright .lf-jdot { left: calc(-21.95% - 22px) !important; }
  .lf-jdot::before { width: 44px; }
}
/* Journey v4: flowchart path (card 1 bottom -> card 2 left; card 2 bottom -> card 3 top), number badges on cards. */
html body .how-section .steps-grid.lf-journey { gap: 80px !important; padding-left: 0 !important; }
.lf-jline circle { fill: #fff; stroke: #9DB4D6; stroke-width: 2.5; }
html body .lf-jcard .lf-jdot, html body .lf-jleft .lf-jdot, html body .lf-jright .lf-jdot {
  top: -20px !important; left: 24px !important; right: auto !important; margin-top: 0 !important; width: 40px !important; height: 40px !important; font-size: 15px !important;
  box-shadow: 0 0 0 5px #fff, 0 6px 14px rgba(15,27,51,.18) !important; }
.lf-jdot::before { display: none !important; }
@media (min-width: 721px) { html body .lf-jcard { width: 44% !important; } }
@media (max-width: 720px) { html body .how-section .steps-grid.lf-journey { gap: 44px !important; } }
html body .lf-jcard .lf-jdot, html body .lf-jleft .lf-jdot, html body .lf-jright .lf-jdot { left: auto !important; right: 24px !important; }
.lf-jline { z-index: 2 !important; }
@media (min-width: 721px) { html body .how-section .steps-grid.lf-journey { gap: 120px !important; } }
.lf-jline path { stroke: #A9BEDD !important; stroke-width: 2.4 !important; stroke-dasharray: 2 9 !important; stroke-linecap: round !important; }

/* ---------- 24. Clear section "slides" + compact journey ---------- */
/* Catalogue starts as its own light section (no navy carry-over from the hero). */
html body main:has(.hero) .classes-section { background: var(--lf-soft) !important; padding-top: 88px !important; }
/* Distinct, alternating backgrounds so each section reads as a new slide. */
html body .how-section { background: #FFFFFF !important; }
html body section.reveal, html body .benefits-section { background: #FFFFFF !important; border-top: 1px solid var(--lf-line); }
html body .lf-london-section { background: #E9F0FA !important; }
html body .faq-section { background: #FFFFFF !important; }
/* Stronger reveal: faint, lower and slightly smaller -> vivid. */
.lf-rv { opacity: 0; transform: translateY(56px) scale(.985); filter: saturate(.2) blur(2px);
  transition: opacity 1s ease var(--d,0ms), transform 1s cubic-bezier(.16,.8,.24,1) var(--d,0ms), filter 1s ease var(--d,0ms); }
/* Journey: three columns in a staircase on wide screens, fits one screen. */
@media (min-width: 901px) {
  html body .how-section .steps-grid.lf-journey { flex-direction: row !important; align-items: flex-start; justify-content: space-between; gap: 0 !important; max-width: 1120px; margin-top: 36px !important; }
  html body .lf-jcard, html body .lf-jcard.lf-jleft, html body .lf-jcard.lf-jright { width: 29% !important; align-self: flex-start !important; padding: 22px 24px !important; }
  html body .how-section { padding-top: 72px !important; padding-bottom: 64px !important; }
  html body .how-section .principle-banner { max-width: 1120px; margin-top: 28px !important; }
}
@media (max-width: 900px) and (min-width: 721px) { html body .how-section .steps-grid.lf-journey { gap: 44px !important; } html body .lf-jcard { width: 100% !important; } }
/* Compact journey cards on wide screens: icon beside the title. */
@media (min-width: 901px) {
  html body .lf-jcard { display: grid !important; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 20px 22px !important; }
  html body .lf-jcard .step-icon { width: 44px !important; height: 44px !important; margin: 0 !important; grid-row: 1; }
  html body .lf-jcard h3 { grid-column: 2; margin: 0 !important; font-size: 18px !important; }
  html body .lf-jcard p { grid-column: 1 / -1; margin: 10px 0 0 !important; font-size: 14.5px !important; }
}

/* ---------- 25. Social links in official brand colours ---------- */
html body .lf-social a.lf-ig, html body .lf-social-panel .lf-social a.lf-ig {
  background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%) !important;
  border: 0 !important; color: #fff !important; border-radius: 10px; }
html body .lf-social a.lf-li, html body .lf-social-panel .lf-social a.lf-li {
  background: #0A66C2 !important; border: 0 !important; color: #fff !important; border-radius: 8px; }
html body .lf-social a.lf-ig:hover, html body .lf-social a.lf-li:hover { filter: brightness(1.1); transform: translateY(-2px); }
.lf-social a { transition: transform .15s ease, filter .15s ease !important; }

/* ---------- 26. Mobile drawer: icons, hints, staggered entrance ---------- */
html body > .site-header[data-shared-header] .mobile-drawer nav { display: grid !important; gap: 10px !important; }
html body > .site-header[data-shared-header] .mobile-drawer nav a {
  display: flex !important; align-items: center; gap: 14px; padding: 14px 14px !important; border-radius: 16px !important;
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; color: #fff !important;
  transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
html body > .site-header[data-shared-header] .mobile-drawer nav a::before { display: none !important; content: none !important; }
html body > .site-header[data-shared-header] .mobile-drawer nav a:active,
html body > .site-header[data-shared-header] .mobile-drawer nav a:hover { background: rgba(0,142,253,.12) !important; border-color: rgba(0,142,253,.35) !important; transform: translateX(4px); }
.lf-dico { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; }
.lf-dico svg { width: 22px; height: 22px; }
.lf-dico-b { background: linear-gradient(150deg, rgba(0,142,253,.28), rgba(0,142,253,.12)); color: #7CC4FF; box-shadow: inset 0 0 0 1px rgba(124,196,255,.25); }
.lf-dico-p { background: linear-gradient(150deg, rgba(161,68,253,.30), rgba(161,68,253,.12)); color: #D2A6FF; box-shadow: inset 0 0 0 1px rgba(210,166,255,.25); }
.lf-dtxt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.lf-dtxt b { font: 700 17px/1.2 var(--lf-font-head); color: #fff; }
.lf-dtxt small { font: 500 13px/1.3 var(--lf-font-body) !important; color: #9FB0CC; }
.lf-darr { width: 18px; height: 18px; color: #6F82A3; flex: none; transition: transform .2s ease, color .2s ease; }
html body .mobile-drawer nav a:hover .lf-darr, html body .mobile-drawer nav a:active .lf-darr { transform: translateX(3px); color: #7CC4FF; }
html body > .site-header[data-shared-header] .mobile-drawer-actions .primary { border-radius: 14px !important; min-height: 52px; font-size: 16px !important; }
/* Entrance: links slide in one after another each time the menu opens. */
@keyframes lfDrawerIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html body .site-header .mobile-menu-toggle[aria-expanded="true"] ~ * .mobile-drawer nav a,
html body .mobile-drawer.open nav a, html body .mobile-drawer.is-open nav a, html body .menu-open .mobile-drawer nav a,
html body .mobile-drawer[data-open] nav a { animation: lfDrawerIn .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
html body .mobile-drawer nav a { animation: lfDrawerIn .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
html body .mobile-drawer-actions { animation: lfDrawerIn .45s cubic-bezier(.2,.8,.2,1) .34s both; }
@media (prefers-reduced-motion: reduce) { html body .mobile-drawer nav a, html body .mobile-drawer-actions { animation: none !important; } }
/* Hamburger morphs into an X while the menu is open. */
html body .mobile-menu-toggle span { transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease !important; transform-origin: center; }
html body .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
html body .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; transform: scaleX(.2) !important; }
html body .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

/* ---------- 27. Mobile polish: legal menu chips, help FAQ ---------- */
@media (max-width: 720px) {
  html body .legal-nav { display: flex !important; flex-wrap: wrap; gap: 8px !important; align-items: center; margin-bottom: 18px !important; }
  html body .legal-nav strong { flex-basis: 100%; font-size: 13px !important; color: var(--lf-muted); text-transform: uppercase; letter-spacing: .06em; }
  html body .legal-nav a { font-size: 13px !important; padding: 7px 12px !important; border-radius: 999px; background: #fff; border: 1px solid var(--lf-line); color: var(--lf-ink) !important; line-height: 1.2; }
}
html body .help-grid details, html body .professional-panel details { border-bottom: 1px solid var(--lf-line); }
html body .professional-panel details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; font: 700 16px/1.35 var(--lf-font-head); color: var(--lf-ink); }
html body .professional-panel details summary::-webkit-details-marker { display: none; }
html body .professional-panel details summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--lf-blue); border-bottom: 2px solid var(--lf-blue); transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
html body .professional-panel details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
html body .professional-panel details p { margin: 0 0 14px !important; color: var(--lf-text); }
html body .help-contact a span, html body .help-contact a small { font-size: 15px !important; color: var(--lf-blue) !important; font-weight: 500; }
html body .help-contact a strong { font-size: 16px !important; color: var(--lf-ink) !important; }

/* ---------- 28. Nav targets fill the screen: only that section is visible after a menu click ---------- */
html { scroll-padding-top: var(--lf-header-h, 64px); }
@media (min-width: 901px) {
  html body main > section#how, html body main > section#credits {
    min-height: calc(100vh - var(--lf-header-h, 64px)) !important;
    display: flex !important; flex-direction: column; justify-content: center;
    padding-top: 40px !important; padding-bottom: 40px !important; box-sizing: border-box;
  }
  html body main > section#how > .container, html body main > section#credits > .container { width: 100%; }
}

/* ======================================================================
   29. FOR SCHOOLS PAGE ONLY (body.lf-fs) - nothing below affects other pages
   ====================================================================== */
/* Hero: full screen, real classroom photo, same overlay language as the home hero. */
html body.lf-fs main > .partner-hero {
  position: relative; min-height: calc(100vh - 104px); min-height: calc(100svh - 104px);
  display: flex !important; flex-direction: column; justify-content: center; padding: 72px 0 0 !important;
  background:
    linear-gradient(90deg, rgba(10,20,38,.94) 0%, rgba(10,20,38,.80) 38%, rgba(10,20,38,.35) 70%, rgba(10,20,38,.20) 100%),
    linear-gradient(0deg, rgba(10,20,38,.95) 0%, rgba(10,20,38,0) 38%),
    url("/static/images/redesign/okul-sinif.jpg") center 35% / cover no-repeat !important;
}
html body.lf-fs .partner-hero .split-grid { align-items: center; gap: 48px; }
html body.lf-fs .partner-hero h1 { color: #fff !important; font: 800 clamp(42px, 4.8vw, 72px)/1.04 var(--lf-font-head) !important; letter-spacing: -.02em !important; margin: 14px 0 18px !important; }
html body.lf-fs .partner-hero h1 .gradient-text { background: var(--lf-accent-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
html body.lf-fs .partner-hero .partner-copy p { font-size: 18px !important; color: #D3DDEC !important; max-width: 560px; }
html body.lf-fs .partner-hero .hero-actions { gap: 12px !important; margin-top: 26px; }
html body.lf-fs .partner-hero .button-ghost { background: rgba(255,255,255,.08) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important; backdrop-filter: blur(6px); }
/* Portal preview floats over the photo as frosted glass. */
html body.lf-fs .partner-visual { background: rgba(15,27,51,.45) !important; border: 1px solid rgba(255,255,255,.16) !important; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-radius: 26px !important; min-height: 0 !important; padding: 26px !important; box-shadow: 0 30px 70px rgba(5,12,26,.45) !important; }
html body.lf-fs .partner-visual .portal-card { border-radius: 18px !important; }
/* Benefit strip at the bottom of the hero (same as the home hero strip). */
.lf-fs-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 1px solid rgba(255,255,255,.12); }
.lf-fs-strip > div { display: flex; gap: 14px; align-items: flex-start; padding: 26px 22px 30px; border-left: 1px solid rgba(255,255,255,.10); }
.lf-fs-strip > div:first-child { border-left: 0; padding-left: 0; }
.lf-fs-si { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #7CC4FF; background: rgba(0,142,253,.14); box-shadow: inset 0 0 0 1px rgba(124,196,255,.22); }
.lf-fs-strip > div:nth-child(even) .lf-fs-si { color: #D2A6FF; background: rgba(161,68,253,.16); box-shadow: inset 0 0 0 1px rgba(210,166,255,.22); }
.lf-fs-si svg { width: 21px; height: 21px; }
.lf-fs-strip b { display: block; color: #fff; font: 700 15.5px/1.3 var(--lf-font-head); }
.lf-fs-strip small { display: block; color: #AEBBD3; font: 500 13.5px/1.4 var(--lf-font-body) !important; margin-top: 3px; }
/* Who we are: icon tiles like the home benefits. */
html body.lf-fs #about { background: #FFFFFF !important; }
html body.lf-fs .lf-fs-fi { width: 52px !important; height: 52px !important; border-radius: 15px !important; display: grid !important; place-items: center; margin-bottom: 16px !important; }
html body.lf-fs .lf-fs-fi svg { width: 26px; height: 26px; }
html body.lf-fs .lf-fs-fi.lf-b { color: var(--lf-blue) !important; background: linear-gradient(150deg, #fff, var(--lf-blue-50)) !important; box-shadow: 0 8px 20px rgba(8,104,201,.12), inset 0 0 0 1px var(--lf-blue-100) !important; }
html body.lf-fs .lf-fs-fi.lf-p { color: var(--lf-accent-text) !important; background: linear-gradient(150deg, #fff, var(--lf-accent-50)) !important; box-shadow: 0 8px 20px rgba(139,47,232,.12), inset 0 0 0 1px #E6D3FF !important; }
html body.lf-fs #about .feature-card { border-radius: 20px !important; padding: 30px 28px !important; box-shadow: var(--lf-shadow-sm) !important; transition: transform .25s ease, box-shadow .25s ease !important; }
html body.lf-fs #about .feature-card:hover { transform: translateY(-6px) !important; box-shadow: 0 18px 40px rgba(15,27,51,.12) !important; }
/* 5-step partner process: connected path on the dark section. */
html body.lf-fs #how { background: radial-gradient(70% 90% at 100% 0%, rgba(161,68,253,.16), transparent 60%), var(--lf-navy-900) !important; }
html body.lf-fs .lf-fs-steps { position: relative; display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 18px !important; counter-reset: s; }
html body.lf-fs .lf-fs-steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 41px; border-top: 2.4px dotted rgba(124,196,255,.45); z-index: 0; }
html body.lf-fs .lf-fs-steps .partner-step { position: relative; z-index: 1; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 18px !important; padding: 22px 20px 24px !important; text-align: left; transition: transform .25s ease, background-color .25s ease, border-color .25s ease !important; }
html body.lf-fs .lf-fs-steps .partner-step:hover { transform: translateY(-6px) !important; background: rgba(0,142,253,.10) !important; border-color: rgba(124,196,255,.35) !important; }
html body.lf-fs .lf-fs-steps .partner-step b { width: 40px !important; height: 40px !important; border-radius: 50% !important; font: 800 15px/1 var(--lf-font-head) !important; box-shadow: 0 0 0 5px var(--lf-navy-900) !important; margin-bottom: 16px !important; }
html body.lf-fs .lf-fs-steps .partner-step h3 { color: #fff !important; font-size: 18px !important; }
html body.lf-fs .lf-fs-steps .partner-step p { color: #B9C4D8 !important; font-size: 14.5px !important; }
/* Application: stronger form card. */
html body.lf-fs .application-section { background: linear-gradient(180deg, var(--lf-soft), #E9F0FA) !important; }
html body.lf-fs #partner-form { background: #fff !important; border: 1px solid var(--lf-line) !important; border-radius: 22px !important; box-shadow: 0 24px 60px rgba(15,27,51,.10) !important; padding: 30px !important; }
html body.lf-fs #partner-form input, html body.lf-fs #partner-form select, html body.lf-fs #partner-form textarea { min-height: 46px; border: 1px solid #D5DEEB !important; background: #FBFCFE !important; font-size: 15px !important; }
html body.lf-fs #partner-form label.field { font-weight: 600 !important; color: var(--lf-ink) !important; font-size: 13.5px !important; }
html body.lf-fs .application-section .check-list span { font-size: 15.5px !important; }
/* Mobile */
@media (max-width: 900px) {
  html body.lf-fs main > .partner-hero { min-height: 0; padding-top: 48px !important;
    background: linear-gradient(180deg, rgba(10,20,38,.80) 0%, rgba(10,20,38,.92) 55%, rgba(10,20,38,.98) 100%), url("/static/images/redesign/okul-sinif.jpg") 30% center / cover no-repeat !important; }
  html body.lf-fs .partner-hero h1 { font-size: 40px !important; }
  .lf-fs-strip { grid-template-columns: 1fr 1fr; margin-top: 36px; }
  .lf-fs-strip > div { padding: 18px 12px; border-left: 0; flex-direction: column; gap: 10px; }
  .lf-fs-strip > div:nth-child(odd) { padding-left: 0; }
  .lf-fs-strip > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.10); }
  html body.lf-fs .lf-fs-steps { grid-template-columns: 1fr !important; gap: 14px !important; }
  html body.lf-fs .lf-fs-steps::before { left: 39px; right: auto; top: 24px; bottom: 24px; border-top: 0; border-left: 2.4px dotted rgba(124,196,255,.45); }
  html body.lf-fs .lf-fs-steps .partner-step { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; }
  html body.lf-fs .lf-fs-steps .partner-step b { grid-row: 1 / 3; margin: 0 !important; }
  html body.lf-fs .lf-fs-steps .partner-step h3 { margin: 6px 0 4px !important; }
  html body.lf-fs .lf-fs-steps .partner-step p { grid-column: 2; margin: 0 !important; }
  html body.lf-fs #partner-form { padding: 22px !important; }
}
@media (max-width: 900px) {
  html body.lf-fs main > .partner-hero { padding-top: 260px !important;
    background: linear-gradient(180deg, rgba(10,20,38,.15) 0px, rgba(10,20,38,.55) 170px, rgba(10,20,38,.94) 300px, rgba(10,20,38,.98) 100%), url("/static/images/redesign/okul-sinif.jpg") 32% 0 / auto 420px no-repeat, var(--lf-navy-900) !important; }
}

/* ---------- 30. For schools v2: light process section, softer premium cards, founding-partner invite ---------- */
/* Hero card -> invite (frosted glass on the photo). */
html body.lf-fs .partner-visual { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.lf-fs-invite { position: relative; padding: 30px 30px 26px; border-radius: 26px; color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 30px 70px rgba(5,12,26,.40); max-width: 440px; margin-left: auto; }
.lf-fs-badge { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--lf-font-body); letter-spacing: .04em; color: var(--lf-navy-900); background: var(--lf-amber); padding: 7px 12px; border-radius: 999px; }
.lf-fs-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--lf-navy-900); box-shadow: 0 0 0 0 rgba(15,27,51,.5); animation: lfPulse 2s infinite; }
@keyframes lfPulse { 0% { box-shadow: 0 0 0 0 rgba(15,27,51,.45); } 70% { box-shadow: 0 0 0 7px rgba(15,27,51,0); } 100% { box-shadow: 0 0 0 0 rgba(15,27,51,0); } }
.lf-fs-invite h3 { color: #fff !important; font: 800 24px/1.2 var(--lf-font-head) !important; margin: 16px 0 18px !important; letter-spacing: -.01em !important; }
.lf-fs-invite ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.lf-fs-invite li { display: flex; align-items: center; gap: 12px; font: 500 15px/1.35 var(--lf-font-body); color: #E6ECF6; }
.lf-fs-ci { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #7CC4FF; background: rgba(0,142,253,.18); box-shadow: inset 0 0 0 1px rgba(124,196,255,.25); }
.lf-fs-invite li:nth-child(2) .lf-fs-ci { color: #D2A6FF; background: rgba(161,68,253,.20); box-shadow: inset 0 0 0 1px rgba(210,166,255,.25); }
.lf-fs-ci svg { width: 18px; height: 18px; }
.lf-fs-apply { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 14px; background: #fff; color: var(--lf-blue) !important; font: 700 16px/1 var(--lf-font-head); transition: transform .2s ease, box-shadow .2s ease; }
.lf-fs-apply svg { width: 18px; height: 18px; transition: transform .2s ease; }
.lf-fs-apply:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(5,12,26,.30); }
.lf-fs-apply:hover svg { transform: translateX(3px); }
.lf-fs-invite small { display: block; text-align: center; margin-top: 12px; color: #B9C6DC; font: 500 12.5px/1.3 var(--lf-font-body) !important; }

/* Process section: light, like the rest of the site. */
html body.lf-fs #how { background: linear-gradient(180deg, var(--lf-soft) 0%, #EEF3FA 100%) !important; }
html body.lf-fs #how .section-kicker { color: var(--lf-blue) !important; }
html body.lf-fs #how h2 { color: var(--lf-ink) !important; }
html body.lf-fs #how .section-head p { color: var(--lf-muted) !important; }
html body.lf-fs .lf-fs-steps { gap: 22px !important; padding: 26px 0 30px; }
html body.lf-fs .lf-fs-steps::before { display: none !important; }
html body.lf-fs .lf-fs-steps .partner-step {
  background: #fff !important; border: 1px solid #E6ECF5 !important; border-radius: 24px !important; padding: 28px 24px 26px !important;
  box-shadow: 0 1px 2px rgba(15,27,51,.04), 0 12px 32px rgba(15,27,51,.07) !important; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease !important; }
html body.lf-fs .lf-fs-steps .partner-step::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,142,253,.10), transparent 70%); pointer-events: none; }
html body.lf-fs .lf-fs-steps .partner-step:nth-of-type(even)::after { background: radial-gradient(circle, rgba(161,68,253,.10), transparent 70%); }
@media (min-width: 901px) { html body.lf-fs .lf-fs-steps .partner-step:nth-of-type(even) { margin-top: 34px !important; } }
html body.lf-fs .lf-fs-steps .partner-step:hover { transform: translateY(-8px) !important; border-color: var(--lf-blue-100) !important; box-shadow: 0 22px 48px rgba(15,27,51,.13) !important; background: #fff !important; }
html body.lf-fs .lf-fs-steps .partner-step b { width: 46px !important; height: 46px !important; font-size: 17px !important; color: #fff !important;
  background: linear-gradient(140deg, #2A9BFF, #0868C9) !important; box-shadow: 0 8px 18px rgba(8,104,201,.30) !important; }
html body.lf-fs .lf-fs-steps .partner-step:nth-of-type(even) b { background: linear-gradient(140deg, #B56BFF, #8B2FE8) !important; box-shadow: 0 8px 18px rgba(139,47,232,.30) !important; }
html body.lf-fs .lf-fs-steps .partner-step h3 { color: var(--lf-ink) !important; font: 700 19px/1.25 var(--lf-font-head) !important; margin: 0 0 8px !important; }
html body.lf-fs .lf-fs-steps .partner-step p { color: var(--lf-muted) !important; font-size: 14.5px !important; line-height: 1.55 !important; }
.lf-fs-wave { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.lf-fs-wave path { fill: none; stroke: #A9BEDD; stroke-width: 2.4; stroke-dasharray: 2 9; stroke-linecap: round; }
html body.lf-fs .lf-fs-steps .partner-step { z-index: 1; }
/* Who we are: softer, premium cards too. */
html body.lf-fs #about .feature-card { border: 1px solid #E6ECF5 !important; border-radius: 24px !important; box-shadow: 0 1px 2px rgba(15,27,51,.04), 0 12px 32px rgba(15,27,51,.07) !important; }
@media (max-width: 900px) {
  html body.lf-fs .lf-fs-steps { padding: 6px 0 10px; }
  .lf-fs-invite { margin: 8px 0 0; max-width: none; }
}

/* ---------- 31. For schools: two-phase editorial timeline with sticky intro ---------- */
html body.lf-fs #how.lf-fs-split { padding: 96px 0 !important; background: #FFFFFF !important; }
.lf-fs-grid { display: grid !important; grid-template-columns: 38fr 62fr; gap: 56px; align-items: start; max-width: 1200px; }
.lf-fs-intro { position: sticky; top: calc(var(--lf-header-h, 64px) + 40px); }
html body.lf-fs .lf-fs-intro .section-head { text-align: left !important; margin: 0 !important; max-width: none !important; }
html body.lf-fs .lf-fs-intro .section-kicker { color: var(--lf-blue) !important; }
html body.lf-fs .lf-fs-intro h2 { color: var(--lf-ink) !important; font-size: clamp(32px, 3.2vw, 44px) !important; text-align: left !important; margin: 12px 0 14px !important; }
html body.lf-fs .lf-fs-intro .section-head p { color: var(--lf-muted) !important; font-size: 17px !important; text-align: left !important; margin: 0 !important; }
.lf-fs-statement { display: flex; align-items: center; gap: 12px; margin: 28px 0 0 !important; padding-top: 22px; border-top: 1px solid var(--lf-line); font: 700 18px/1.3 var(--lf-font-head); color: var(--lf-ink) !important; }
.lf-fs-statement i { width: 28px; height: 4px; border-radius: 4px; background: var(--lf-accent); flex: none; }
.lf-fs-phases { display: grid; gap: 24px; }
.lf-fs-phase { background: var(--lf-soft); border: 1px solid #E6ECF5; border-radius: 24px; padding: 28px 30px 12px; }
.lf-fs-phase.lf-live { background: linear-gradient(160deg, #F1F7FF, #F5F8FC); border-color: var(--lf-blue-100); }
.lf-fs-plabel { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.lf-fs-plabel span { font: 800 12px/1 var(--lf-font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--lf-muted); }
.lf-fs-plabel b { font: 800 20px/1.2 var(--lf-font-head); color: var(--lf-ink); }
.lf-fs-phase.lf-live .lf-fs-plabel span { color: var(--lf-blue); }
.lf-fs-phase ol { list-style: none; margin: 0; padding: 0; position: relative; }
.lf-fs-phase ol::before { content: ""; position: absolute; left: 21px; top: 30px; bottom: 44px; width: 2px; background: linear-gradient(180deg, #CBD6E6, #E3E8F0); border-radius: 2px; }
.lf-fs-phase.lf-live ol::before { background: linear-gradient(180deg, #9FC9F5, #D9EBFF); }
.lf-fs-row { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: start; padding: 18px 16px 18px 0; margin: 0 -12px; padding-left: 12px; border-radius: 16px; transition: background-color .2s ease; }
.lf-fs-row:hover { background: rgba(255,255,255,.85); }
.lf-fs-num { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 800 15px/1 var(--lf-font-head); color: #fff; background: var(--lf-navy-900); box-shadow: 0 0 0 5px var(--lf-soft); }
.lf-fs-phase.lf-live .lf-fs-num { background: var(--lf-blue); box-shadow: 0 0 0 5px #F1F7FF; }
.lf-fs-row h3 { margin: 2px 0 4px !important; font: 700 20px/1.25 var(--lf-font-head) !important; color: var(--lf-ink) !important; }
.lf-fs-row p { margin: 0 !important; font-size: 15px !important; color: var(--lf-text) !important; line-height: 1.55 !important; }
.lf-fs-fit { color: var(--lf-text) !important; font-size: 16.5px !important; margin: 0 0 14px !important; }
@media (max-width: 900px) {
  html body.lf-fs #how.lf-fs-split { padding: 64px 0 !important; }
  .lf-fs-grid { grid-template-columns: 1fr; gap: 28px; }
  .lf-fs-intro { position: static; }
  .lf-fs-phase { padding: 20px 20px 6px; }
  .lf-fs-row { gap: 16px; padding-top: 14px; padding-bottom: 14px; }
  .lf-fs-row h3 { font-size: 18px !important; }
}
.lf-fs-phase ol::before { display: none !important; }
.lf-fs-row:not(:last-child)::after { content: ""; position: absolute; left: 33px; top: 62px; bottom: -18px; width: 2px; border-radius: 2px; background: #CBD6E6; z-index: 0; }
.lf-fs-phase.lf-live .lf-fs-row:not(:last-child)::after { background: #9FC9F5; }
@media (max-width: 900px) { .lf-fs-row:not(:last-child)::after { top: 58px; bottom: -14px; } }

/* ---------- 32. For schools: interactive portal preview under the intro ---------- */
.lf-pp { margin-top: 28px; background: #fff; border: 1px solid #E6ECF5; border-radius: 22px; box-shadow: 0 1px 2px rgba(15,27,51,.04), 0 18px 44px rgba(15,27,51,.10); overflow: hidden; }
.lf-pp-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid #EEF2F7; background: linear-gradient(180deg, #FAFCFF, #fff); }
.lf-pp-head small { display: block; font: 700 11px/1 var(--lf-font-body) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--lf-muted); margin-bottom: 5px; }
.lf-pp-head b { font: 700 16px/1.2 var(--lf-font-head); color: var(--lf-ink); }
.lf-pp-tag { font: 700 11.5px/1 var(--lf-font-body); color: var(--lf-success); background: #E7F6EE; padding: 6px 10px; border-radius: 999px; }
.lf-pp ul { list-style: none; margin: 0; padding: 6px 12px; }
.lf-pp li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 8px; border-bottom: 1px solid #F0F3F8; transition: opacity .25s ease; }
.lf-pp li:last-child { border-bottom: 0; }
.lf-pp-cl b { display: block; font: 700 14.5px/1.25 var(--lf-font-head); color: var(--lf-ink); }
.lf-pp-cl small { font: 500 12.5px/1.3 var(--lf-font-body) !important; color: var(--lf-muted); }
.lf-pp-seats { display: flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--lf-font-body); color: var(--lf-text); white-space: nowrap; }
.lf-pp-seats em { font: 800 15px/1 var(--lf-font-head); font-style: normal; color: var(--lf-blue); }
.lf-pp-seats button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid #DCE4EF; background: #fff; color: var(--lf-ink); font: 700 15px/1 var(--lf-font-body); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.lf-pp-seats button:hover { background: var(--lf-blue-50); border-color: var(--lf-blue-100); }
.lf-pp-sw { width: 40px; height: 24px; border-radius: 999px; border: 0; padding: 0; background: var(--lf-blue); position: relative; cursor: pointer; transition: background-color .2s ease; }
.lf-pp-sw i { position: absolute; top: 3px; left: 19px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,27,51,.25); transition: left .2s ease; }
.lf-pp li.lf-off .lf-pp-sw { background: #C9D3E1; }
.lf-pp li.lf-off .lf-pp-sw i { left: 3px; }
.lf-pp li.lf-off .lf-pp-cl, .lf-pp li.lf-off .lf-pp-seats { opacity: .45; }
.lf-pp-foot { display: flex; justify-content: space-between; gap: 10px; padding: 14px 20px; background: var(--lf-soft); font: 500 12.5px/1.3 var(--lf-font-body); color: var(--lf-muted); }
.lf-pp-foot b { font: 800 14px/1 var(--lf-font-head); color: var(--lf-ink); }
@media (max-width: 900px) { .lf-pp { margin-top: 22px; } .lf-pp li { grid-template-columns: 1fr auto; } .lf-pp-seats { grid-column: 1; grid-row: 2; } .lf-pp-sw { grid-column: 2; grid-row: 1 / 3; } .lf-pp-foot { flex-direction: column; } }

/* ---------- 33. For schools: A story, B seat picture, C colour rhythm ---------- */
/* A */
html body.lf-fs #about { background: #E9F0FA !important; }
.lf-story { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; margin-top: 40px; }
.lf-st { background: #fff; border: 1px solid #E1E8F2; border-radius: 24px; padding: 30px 22px 26px; text-align: center; display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 1px 2px rgba(15,27,51,.04), 0 16px 38px rgba(15,27,51,.08); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.lf-st:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(15,27,51,.13); }
.lf-st b { display: block; margin-top: 20px; color: var(--lf-ink); font: 800 19px/1.25 var(--lf-font-head); }
.lf-st span { margin-top: 6px; color: var(--lf-muted); font-size: 15px; }
.lf-mini { display: grid; grid-template-columns: repeat(4, 30px); gap: 9px; height: 96px; align-content: center; }
.lf-mini i { width: 30px; height: 30px; border-radius: 9px; background: #DCE4EF; }
.lf-mini i.on { background: #94A6C0; }
.lf-mini i.p { background: linear-gradient(150deg, #2A9BFF, #0868C9); box-shadow: 0 6px 14px rgba(8,104,201,.3); }
.lf-st .lf-coin { width: 84px; height: 84px; margin: 6px 0; border-radius: 50%; display: grid; place-items: center; font: 800 34px/1 var(--lf-font-head); color: #5A3B00;
  background: radial-gradient(circle at 35% 30%, #FFE7A6, #FFB020 70%); box-shadow: 0 12px 26px rgba(255,176,32,.38), inset 0 -4px 0 rgba(150,95,0,.18); }
.lf-arr { display: grid; place-items: center; color: #8FA9CF; }
.lf-arr svg { width: 28px; height: 28px; }
/* B */
.lf-seatpic { margin-top: 28px; background: var(--lf-soft); border: 1px solid #E6ECF5; border-radius: 24px; padding: 28px 26px 22px; }
.lf-seats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.lf-seats span { aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; background: #E1E8F2; transition: background-color .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease; }
.lf-seats svg { width: 56%; height: 56%; color: #94A6C0; transition: color .5s ease; }
.lf-seats span.lf-on { background: linear-gradient(150deg, #2A9BFF, #0868C9); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(8,104,201,.28); }
.lf-seats span.lf-on svg { color: #fff; }
.lf-seatleg { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 18px; font: 500 13.5px/1.3 var(--lf-font-body); color: var(--lf-text); }
.lf-seatleg i { display: inline-block; width: 13px; height: 13px; border-radius: 4px; background: #E1E8F2; margin-right: 7px; vertical-align: -2px; }
.lf-seatleg i.lf-on { background: #0868C9; }
/* C */
html body.lf-fs #how.lf-fs-split { background: #FFFFFF !important; }
.lf-fs-band { background: radial-gradient(60% 140% at 100% 0%, rgba(161,68,253,.25), transparent 60%), radial-gradient(50% 120% at 0% 100%, rgba(0,142,253,.20), transparent 60%), var(--lf-navy-800); padding: 56px 0; }
.lf-fs-band .container { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.lf-fs-band span { display: inline-block; font: 800 12px/1 var(--lf-font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--lf-amber); margin-bottom: 10px; }
.lf-fs-band h2 { color: #fff !important; font: 800 clamp(26px, 2.8vw, 36px)/1.15 var(--lf-font-head) !important; margin: 0 !important; max-width: 640px; }
.lf-fs-band a { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 14px; background: #fff; color: var(--lf-blue) !important; font: 700 17px/1 var(--lf-font-head); transition: transform .2s ease, box-shadow .2s ease; }
.lf-fs-band a svg { width: 19px; height: 19px; transition: transform .2s ease; }
.lf-fs-band a:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(5,12,26,.35); }
.lf-fs-band a:hover svg { transform: translateX(3px); }
html body.lf-fs .application-section { background: var(--lf-soft) !important; }
@media (max-width: 900px) {
  .lf-story { grid-template-columns: 1fr; gap: 10px; }
  .lf-arr { transform: rotate(90deg); height: 28px; }
  .lf-seats { gap: 8px; }
  .lf-fs-band { padding: 44px 0; }
  .lf-fs-band a { width: 100%; justify-content: center; }
}

/* ---------- 34. For schools: moving class-type strip ---------- */
.lf-fs-marquee { background: radial-gradient(60% 160% at 100% 0%, rgba(161,68,253,.22), transparent 60%), radial-gradient(50% 140% at 0% 100%, rgba(0,142,253,.18), transparent 60%), var(--lf-navy-800); padding: 34px 0 38px; overflow: hidden; }
.lf-fs-marquee p { text-align: center; margin: 0 0 20px !important; font: 800 12px/1 var(--lf-font-head) !important; letter-spacing: .12em; text-transform: uppercase; color: #9FB0CC !important; }
.lf-mq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lf-mq-track { display: flex; gap: 14px; width: max-content; animation: lfMarquee 46s linear infinite; }
.lf-mq:hover .lf-mq-track { animation-play-state: paused; }
.lf-mq-track span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 13px 22px; border-radius: 999px; font: 700 17px/1 var(--lf-font-head); color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.lf-mq-track span i { width: 9px; height: 9px; border-radius: 50%; background: #4DB2FF; box-shadow: 0 0 12px rgba(77,178,255,.7); }
.lf-mq-track span.lf-p i { background: #C58BFF; box-shadow: 0 0 12px rgba(197,139,255,.7); }
@keyframes lfMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) { .lf-mq-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } }
@media (max-width: 720px) { .lf-mq-track span { font-size: 15px; padding: 11px 18px; } .lf-mq-track { animation-duration: 34s; } }

/* ---------- 35. Home: "Our partner schools" logo strip (under the hero) ---------- */
.lf-partners[data-visible="false"] { display: none !important; }
.lf-partners { background: #fff; border-bottom: 1px solid var(--lf-line); padding: 34px 0 36px; overflow: hidden; }
.lf-partners-head { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.lf-partners-kicker { font: 800 12.5px/1 var(--lf-font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--lf-muted); }
.lf-partners-soon { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--lf-font-body); color: #8A5300; background: var(--lf-amber-50); border: 1px solid #FFE1A3; padding: 7px 12px; border-radius: 999px; }
.lf-partners-soon i { width: 7px; height: 7px; border-radius: 50%; background: var(--lf-amber); animation: lfPulse 2s infinite; }
.lf-partners[data-status="live"] .lf-partners-soon { display: none; }
.lf-partners-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; width: max-content; animation: lfMarquee 52s linear infinite; }
.lf-partners-mq:hover .lf-partners-track { animation-play-state: paused; }
.lf-plogo { flex: none; width: 190px; height: 72px; border-radius: 16px; display: grid; place-items: center; background: var(--lf-soft); border: 1px dashed #D3DCE9; }
.lf-plogo svg { width: 120px; height: 36px; }
.lf-plogo svg rect { fill: #C9D4E3; }
.lf-plogo:nth-child(even) svg rect:first-child { fill: #D9C6F2; }
.lf-plogo:nth-child(odd) svg rect:first-child { fill: #BCD8F7; }
/* Real logos when live: grayscale, colour on hover. */
.lf-plogo img { max-width: 150px; max-height: 44px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .25s ease, opacity .25s ease; }
.lf-plogo:hover img { filter: none; opacity: 1; }
.lf-partners[data-status="live"] .lf-plogo { background: #fff; border: 1px solid var(--lf-line); }
@media (prefers-reduced-motion: reduce) { .lf-partners-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } }
@media (max-width: 720px) { .lf-plogo { width: 150px; height: 60px; } .lf-plogo svg { width: 100px; } .lf-partners-soon { font-size: 12px; } }

/* ---------- 36. Accessibility gates: marquee pause, focus ---------- */
.lf-fs-marquee { position: relative; }
.lf-fs-marquee .lf-dup { display: contents; }
.lf-fs-marquee.lf-paused .lf-mq-track, .lf-mq:focus-within .lf-mq-track, .lf-mq:focus .lf-mq-track, .lf-mq:active .lf-mq-track { animation-play-state: paused !important; }
.lf-mq-btn { display: flex; align-items: center; gap: 7px; margin: 18px auto 0; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #D3DDEC; font: 600 13px/1 var(--lf-font-body); cursor: pointer; }
.lf-mq-btn svg { width: 14px; height: 14px; }
.lf-mq-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.lf-mq:focus-visible { outline: 3px solid #7CC4FF !important; outline-offset: 4px !important; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .lf-mq-btn { display: none; } }
/* Focus ring stays visible on dark areas (3:1+ against navy). */
html body > .announcement :focus-visible, html body > .site-header :focus-visible, html body .hero :focus-visible, html body .partner-hero :focus-visible,
html body .final-cta :focus-visible, html body .reference-footer :focus-visible, html body .school-cta :focus-visible, html body .lf-fs-marquee :focus-visible { outline-color: #7CC4FF !important; }