/* ==========================================================================
   Nurli Kelajak — public-site light/3D redesign.

   Loaded by templates/core/landing.html and, for their shared chrome only,
   by the 4 other public pages that got the same treatment (post list,
   certificates gallery, public leaderboard, olympiad list) — never by any
   OTHER page that extends base_public.html (blog post detail without the
   list wrapper isn't touched, and critically the live olympiad/IELTS
   exam-taking flow never loads this file at all).

   Two scopes:
   - `.landing-body--light` — page-agnostic chrome shared by every one of
     those 5 pages (header, lang-switch, buttons, floating-contact widget,
     footer, WebGL canvas, color tokens). base_public.html adds this class
     whenever request.resolver_match.view_name is one of the 5 light pages.
   - `.landing-body--home` (and the sibling `--posts`/`--certs`/
     `--leaderboard`/`--olympiad` classes further down this file) — content
     that's unique to that one page's own template.

   landing.css itself is left untouched; this file loads after it, so the
   extra class on each selector here gives it higher specificity than the
   equivalent bare rule in landing.css - no `!important` needed anywhere.
   ========================================================================== */

.landing-body--light {
  /* Re-theme the shared 5-color brand palette onto light surfaces. The
     accent hues themselves (--lp-accent/-2/positive/warm) are untouched -
     they already came from the school's own logo and have fine contrast
     on white too. Only the surface/glass/text tokens change. */
  --lp-glass: rgba(255, 255, 255, 0.78);
  --lp-glass-border: rgba(15, 23, 42, 0.08);
  --lp-ink: #0f172a;
  --lp-ink-muted: #47556b;
  --lp-ink-dim: #64748b;
  --lp-surface: #ffffff;
  --lp-surface-2: #f4f7fb;
  --lp-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
  --lp-shadow-md: 0 20px 45px -12px rgba(15, 23, 42, 0.14);
  --lp-shadow-lg: 0 30px 70px -20px rgba(15, 23, 42, 0.22);

  background: var(--lp-surface-2);
  color: var(--lp-ink);
}

/* ── Branded scrollbar ─────────────────────────────────────────────────
   Unscoped (not gated by a body class) so it applies to the actual root
   scroller (html), not just <body> — WebKit only reliably themes the
   element that establishes the page's scrollbox, which isn't always the
   same as where a class lives. Safe to leave unscoped here since this
   stylesheet itself only ever loads on these light pages. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.35) transparent;
}
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(59, 130, 246, 0.32);
  border-radius: 999px;
  border: 3px solid var(--lp-surface-2);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(59, 130, 246, 0.55);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

.landing-body--light::before {
  /* Light equivalent of landing.css's dark radial-gradient wash. */
  background:
    radial-gradient(ellipse 80% 50% at 15% -10%, rgba(59, 130, 246, 0.10), transparent 55%),
    radial-gradient(ellipse 55% 40% at 90% 0%, rgba(34, 211, 238, 0.08), transparent 50%),
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(52, 211, 153, 0.06), transparent 60%);
}

/* ── WebGL ambient backdrop canvas ────────────────────────────────────── */
.landing-body--light .lp-hero-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Static fallback gradient shown until/instead of the WebGL layer (no
     WebGL support, prefers-reduced-motion, or a narrow/phone viewport -
     landing-hero-3d.js decides whether to ever touch this canvas at all). */
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(59, 130, 246, 0.07), transparent 65%);
  opacity: 0;
  transition: opacity 1.1s ease;
}
.landing-body--light .lp-hero-canvas.is-ready {
  opacity: 1;
}

/* Everything else in the page sits above the fixed canvas. These each
   need position:relative to paint above the position:fixed canvas, but
   giving them all the SAME z-index turns .landing-header and
   .landing-main into separate, equal-priority stacking contexts whose
   paint order then falls back to DOM order - .landing-main comes after
   .landing-header in base_public.html, so it would paint on top of it,
   burying the header's mobile nav drawer (z-index:99, but trapped
   inside the header's own now-lower context) under the page content
   behind it. Giving .landing-header a higher z-index than .landing-main
   keeps the open mobile nav above everything else on the page. */
.landing-body--light .landing-main,
.landing-body--light .landing-footer {
  position: relative;
  z-index: 1;
}
.landing-body--light .landing-header {
  position: relative;
  z-index: 2;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.landing-body--light .landing-header {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid var(--lp-glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: none;
}
.landing-body--light .landing-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--light .landing-header__name {
  color: var(--lp-ink);
}
.landing-body--light .landing-header__menu-toggle {
  color: var(--lp-ink);
}
.landing-body--light .landing-header__link {
  color: var(--lp-ink-muted);
}
.landing-body--light .landing-header__link:hover {
  color: var(--lp-accent-dark);
}
.landing-body--light .landing-header__link--active {
  /* landing.css marks the current page's nav link with
     `color: #f1f5f9 !important` (near-white, meant for a dark page) on a
     light-green tint - invisible once the page itself is light. Only an
     !important of equal-or-higher specificity can beat that. */
  color: var(--lp-accent-dark) !important;
  background: rgba(52, 211, 153, 0.16);
}
.landing-body--light .landing-header__btn--outline {
  color: var(--lp-ink);
  border-color: rgba(15, 23, 42, 0.16);
}
.landing-body--light .landing-header__btn--outline:hover {
  border-color: var(--lp-accent);
  color: var(--lp-accent-dark);
}
.landing-body--light .landing-header__nav {
  background: #ffffff;
  box-shadow: -20px 0 50px rgba(15, 23, 42, 0.12);
}
.landing-body--light .lang-switch__btn {
  background: #ffffff;
  color: var(--lp-ink-muted);
  border-color: rgba(15, 23, 42, 0.14);
}
.landing-body--light .lang-switch__btn:hover {
  border-color: var(--lp-accent);
  color: var(--lp-accent-dark);
}
.landing-body--light .lang-switch__btn--active {
  background: var(--lp-accent);
  color: #ffffff;
  border-color: var(--lp-accent);
}
.landing-body--light .lang-switch__btn--active:hover {
  color: #ffffff;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* landing.css's hero is built for text-overlaid-on-a-full-bleed-photo
   (.lp-hero__bg is position:absolute; inset:0, sitting behind .lp-hero__inner
   which has z-index:2). This redesign puts the photo in its own bright card
   next to the text instead, which means .lp-hero__bg has to come OUT of
   absolute positioning - and once it does, its only child (.landing-slideshow)
   is itself position:absolute/inset:0, contributing nothing to normal-flow
   sizing, so .lp-hero__bg needs an *explicit* size (flex-basis + aspect-ratio)
   or it collapses to zero height and the photos disappear entirely. */
.landing-body--home .lp-hero {
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
  min-height: 0;
  padding: 6.5rem 1.5rem 3rem;
}
.landing-body--home .lp-hero__bg {
  position: relative;
  inset: auto;
  z-index: auto;
  flex: 1 1 380px;
  max-width: 560px;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  order: 2;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: var(--lp-shadow-lg);
  border: 6px solid #ffffff;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.4s ease;
  will-change: transform;
}
.landing-body--home .lp-hero__inner {
  position: relative;
  z-index: auto;
  flex: 1 1 380px;
  order: 1;
  max-width: 620px;
  width: auto;
  margin: 0;
  padding: 0;
}
.landing-body--light .lp-eyebrow {
  color: var(--lp-accent-dark);
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.18);
}
.landing-body--light .lp-eyebrow__dot {
  background: var(--lp-accent);
}
.landing-body--home .lp-hero__title,
.landing-body--home .lp-hero__title-sub {
  color: var(--lp-ink);
}
.landing-body--home .lp-hero__title-accent {
  background: linear-gradient(120deg, var(--lp-accent-dark), var(--lp-accent) 55%, var(--lp-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing-body--home .lp-hero__desc {
  color: var(--lp-ink-muted);
}
.landing-body--home .lp-tag {
  background: #ffffff;
  color: var(--lp-ink-muted);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--home .lp-tag svg {
  color: var(--lp-positive);
}

.landing-body--home .landing-slideshow__overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, 0.55) 100%);
}
.landing-body--home .lp-slide-ctrl {
  background: rgba(255, 255, 255, 0.85);
  color: var(--lp-ink);
}
.landing-body--home .landing-slideshow__dot {
  background: rgba(255, 255, 255, 0.5);
}
.landing-body--home .landing-slideshow__dot--active {
  background: #ffffff;
}

/* Buttons (shared .lp-btn-- design system, used on all 5 light pages) */
.landing-body--light .lp-btn--primary {
  background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-dark));
  color: #ffffff;
  box-shadow: 0 14px 30px -10px rgba(59, 130, 246, 0.55);
  border: none;
}
.landing-body--light .lp-btn--primary:hover {
  box-shadow: 0 18px 38px -8px rgba(59, 130, 246, 0.6);
  transform: translateY(-2px);
}
.landing-body--light .lp-btn--warm {
  background: linear-gradient(135deg, #fbbf24, var(--lp-warm));
  color: #431407;
  border: none;
  box-shadow: 0 14px 30px -10px rgba(245, 158, 11, 0.5);
}
.landing-body--light .lp-btn--test {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  border: none;
  box-shadow: 0 14px 30px -10px rgba(99, 102, 241, 0.55);
}
.landing-body--light .lp-btn--test:hover {
  box-shadow: 0 18px 38px -8px rgba(99, 102, 241, 0.6);
  transform: translateY(-2px);
}
.landing-body--light .lp-btn--secondary {
  background: #ffffff;
  color: var(--lp-ink);
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--light .lp-btn--secondary:hover {
  border-color: var(--lp-accent);
  color: var(--lp-accent-dark);
}
.landing-body--light .lp-btn--outline {
  color: var(--lp-ink);
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: transparent;
}
.landing-body--light .lp-btn--outline:hover {
  border-color: var(--lp-accent);
  color: var(--lp-accent-dark);
}

/* ── Stats ────────────────────────────────────────────────────────────── */
.landing-body--home .lp-stats {
  background: transparent;
}
.landing-body--home .lp-stat {
  background: #ffffff;
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-sm);
  transition: transform 0.3s var(--lp-ease), box-shadow 0.3s var(--lp-ease);
}
.landing-body--home .lp-stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--lp-shadow-md);
}
.landing-body--home .lp-stat__num {
  background: linear-gradient(120deg, var(--lp-accent-dark), var(--lp-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing-body--home .lp-stat__label {
  color: var(--lp-ink-muted);
}

/* ── Academy banner ───────────────────────────────────────────────────── */
.landing-body--home .lp-academy-banner__inner {
  background: linear-gradient(120deg, rgba(59, 130, 246, 0.08), rgba(34, 211, 238, 0.06));
  border: 1px solid rgba(59, 130, 246, 0.16);
}
.landing-body--home .lp-academy-banner__text strong {
  color: var(--lp-ink);
}
.landing-body--home .lp-academy-banner__text span {
  color: var(--lp-ink-muted);
}

/* ── Section heads (shared wrapper class, used by several pages) ────────── */
.landing-body--light .lp-section-head__label {
  color: var(--lp-accent-dark);
  background: rgba(59, 130, 246, 0.08);
}
.landing-body--light .lp-section-head__title {
  color: var(--lp-ink);
}
.landing-body--light .lp-section-head__lead {
  color: var(--lp-ink-muted);
}

/* ── 3D tilt-on-hover card shell (JS writes --rx/--ry; skipped entirely on
   touch devices and prefers-reduced-motion, see landing-interactive.js) ── */
.landing-body--home .lp-bento-card,
.landing-body--home .lp-major,
.landing-body--home .lp-cert-card,
.landing-body--home .lp-post {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 0.35s var(--lp-ease), box-shadow 0.35s var(--lp-ease), border-color 0.35s var(--lp-ease);
  will-change: transform;
}

/* ── About (bento) ────────────────────────────────────────────────────── */
.landing-body--home .lp-bento-card {
  background: #ffffff;
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--home .lp-bento-card:hover {
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(59, 130, 246, 0.28);
}
.landing-body--home .lp-bento-card__icon {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(34, 211, 238, 0.08));
  color: var(--lp-accent-dark);
  border: 1px solid rgba(59, 130, 246, 0.18);
}
.landing-body--home .lp-bento-card__title {
  color: var(--lp-ink);
}
.landing-body--home .lp-bento-card__text {
  color: var(--lp-ink-muted);
}
.landing-body--home .lp-bento-card__text strong {
  color: var(--lp-ink);
}

/* ── Majors ───────────────────────────────────────────────────────────── */
.landing-body--home .lp-major {
  background: #ffffff;
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--home .lp-major:hover {
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(52, 211, 153, 0.3);
}
.landing-body--home .lp-major__icon {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.16), rgba(34, 211, 238, 0.08));
  color: #0d9488;
  border: 1px solid rgba(52, 211, 153, 0.22);
}
.landing-body--home .lp-major__title {
  color: var(--lp-ink);
}
.landing-body--home .lp-major__subs {
  color: var(--lp-ink-muted);
}

/* ── Test yourself (public quiz) teaser ──────────────────────────────── */
.landing-body--home .lp-selftest-card {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  will-change: transform;
  background: #ffffff;
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--home .lp-selftest-card:hover {
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(99, 102, 241, 0.3);
}
.landing-body--home .lp-selftest-card__icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(139, 92, 246, 0.08));
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.22);
}
.landing-body--home .lp-selftest-card__name {
  color: var(--lp-ink);
}

/* ── Our team ─────────────────────────────────────────────────────────── */
.landing-body--home .lp-team-card {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  will-change: transform;
  background: #ffffff;
  border: 1px solid var(--lp-glass-border);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--home .lp-team-card:hover {
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(59, 130, 246, 0.26);
}
.landing-body--home .lp-team-card__name {
  color: var(--lp-ink);
}
.landing-body--home .lp-team-card__title {
  color: var(--lp-ink-dim);
}
.landing-body--home .lp-team-card--1 {
  border-color: rgba(245, 158, 11, 0.3);
  background: linear-gradient(165deg, rgba(245, 158, 11, 0.07), #ffffff);
}
.landing-body--home .lp-team-card--1:hover {
  border-color: rgba(245, 158, 11, 0.5);
}
.landing-body--home .lp-team-card--1 .lp-team-card__title {
  color: #b45309;
}

/* ── Contact section band ─────────────────────────────────────────────── */
/* .landing-contact's base rule (main.css) washes the section in translucent
   dark navy (rgba(30,41,59,.3→.1)) with a blue-tinted border — meant to read
   as a subtle darkened band on a dark page. On this light page it instead
   painted a visible smoky-gray strip with a hard seam at the section edges
   (reported bug). Swap it for an equally subtle but light-appropriate wash. */
.landing-body--home .landing-contact {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.04) 0%, rgba(59, 130, 246, 0.01) 100%);
  border-top: 1px solid var(--lp-glass-border);
  border-bottom: 1px solid var(--lp-glass-border);
}

/* ── Certificates teaser ──────────────────────────────────────────────── */
.landing-body--home .lp-cert-card {
  background: #ffffff;
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--home .lp-cert-card:hover {
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(59, 130, 246, 0.26);
}
.landing-body--home .lp-cert-card__name {
  color: var(--lp-ink);
}
.landing-body--home .lp-cert-card__holder-badge {
  background: rgba(59, 130, 246, 0.1);
  color: var(--lp-accent-dark);
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.landing-body--home .lp-cert-card__holder-badge--teacher {
  background: rgba(52, 211, 153, 0.12);
  color: #0d9488;
  border-color: rgba(52, 211, 153, 0.24);
}
.landing-body--home .lp-cert-card__type,
.landing-body--home .lp-cert-card__date {
  color: var(--lp-ink-dim);
}
.landing-body--home .lp-cert-card__score {
  color: var(--lp-warm);
  font-weight: 700;
}

/* ── Recent posts ─────────────────────────────────────────────────────── */
.landing-body--home .lp-post {
  background: #ffffff;
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-sm);
  overflow: hidden;
}
.landing-body--home .lp-post:hover {
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(59, 130, 246, 0.24);
}
.landing-body--home .lp-post__placeholder {
  background: var(--lp-surface-2);
  color: var(--lp-ink-dim);
}
.landing-body--home .lp-post__date {
  color: var(--lp-ink-dim);
}
.landing-body--home .lp-post__title {
  color: var(--lp-ink);
}
.landing-body--home .lp-empty-note {
  color: var(--lp-ink-dim);
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.landing-body--home .lp-faq-item {
  background: #ffffff;
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--home .lp-faq-item[open] {
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow: var(--lp-shadow-md);
}
.landing-body--home .lp-faq-item__q {
  color: var(--lp-ink);
}
.landing-body--home .lp-faq-item__icon {
  color: var(--lp-accent);
  background: rgba(59, 130, 246, 0.1);
}
.landing-body--home .lp-faq-item[open] .lp-faq-item__icon {
  background: var(--lp-accent);
  color: #ffffff;
}
.landing-body--home .lp-faq-item__a {
  color: var(--lp-ink-muted);
}

/* ── CTA ──────────────────────────────────────────────────────────────── */
/* The vivid gradient has to go on .lp-cta__inner, not .lp-cta - that's
   where landing.css actually paints the background (a translucent "glass"
   layer using --lp-glass, which we re-point to a light color for the rest
   of the page); overriding only the outer .lp-cta would leave that glass
   layer sitting on top and washing the gradient out to a pale tint. */
.landing-body--home .lp-cta__inner {
  background: linear-gradient(120deg, var(--lp-accent-dark), var(--lp-accent) 55%, var(--lp-accent-2));
  border: none;
  border-radius: calc(var(--lp-radius) * 1.4);
  box-shadow: var(--lp-shadow-lg);
  backdrop-filter: none;
}
.landing-body--home .lp-cta__title {
  color: #ffffff;
}
.landing-body--home .lp-cta__text {
  color: rgba(255, 255, 255, 0.88);
}
.landing-body--home .lp-cta .lp-btn--primary {
  background: #ffffff;
  color: var(--lp-accent-dark);
  box-shadow: 0 14px 30px -10px rgba(15, 23, 42, 0.3);
}
.landing-body--home .lp-cta .lp-btn--secondary {
  background: rgba(15, 23, 42, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  color: #ffffff;
  font-weight: 700;
}
.landing-body--home .lp-cta .lp-btn--secondary:hover {
  background: rgba(15, 23, 42, 0.3);
  border-color: #ffffff;
  color: #ffffff;
}

/* ── Contact ──────────────────────────────────────────────────────────── */
.landing-body--home .landing-contact__block {
  background: #ffffff;
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--home .landing-contact__subtitle {
  color: var(--lp-ink);
}
.landing-body--home .landing-contact__text {
  color: var(--lp-ink-muted);
}
.landing-body--home .landing-contact__link {
  color: var(--lp-accent-dark);
}
.landing-body--home .landing-contact__link:hover {
  color: var(--lp-accent);
}

/* Contact-modal form fields reuse the shared .form-input class (defined in
   main.css for the whole app, dark by default) - re-themed here, scoped,
   so no other page's forms are affected. */
.landing-body--home .form-input {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.14);
  color: var(--lp-ink);
}
.landing-body--home .form-input:focus {
  border-color: var(--lp-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.landing-body--home .form-input::placeholder {
  color: var(--lp-ink-dim);
}
.landing-body--home .lp-form-label {
  color: var(--lp-ink-muted);
}
.landing-body--home .lp-cf-check span {
  color: var(--lp-ink-muted);
}

/* ── Floating contact button + modal (base geometry stays in main.css) ── */
.landing-body--home .floating-contact-btn {
  background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-dark));
  box-shadow: 0 14px 32px -8px rgba(59, 130, 246, 0.55);
}
.landing-body--home .floating-contact-modal__panel {
  /* landing.css sets `background: rgba(8, 12, 28, 0.95) !important` (near-
     black, meant for a dark page) - needs a matching !important here. */
  background: #ffffff !important;
  color: var(--lp-ink);
  box-shadow: var(--lp-shadow-lg);
}
.landing-body--home .floating-contact-modal__title {
  color: var(--lp-ink);
}
.landing-body--home .floating-contact-modal__close {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--lp-ink-dim);
}
.landing-body--home .floating-contact-modal__close:hover {
  /* landing.css's :hover forces `color: #93c5fd !important` (light blue,
     illegible on a light circle) - needs a matching !important too. */
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: var(--lp-accent-dark) !important;
}
.landing-body--home .floating-contact-modal__overlay {
  background: rgba(15, 23, 42, 0.4);
}

/* ── Footer (shared across every base_public.html page) ─────────────────── */
.landing-body--light .landing-footer {
  background: #ffffff;
  border-top: 1px solid var(--lp-glass-border);
}
.landing-body--light .landing-footer__text {
  color: var(--lp-ink-dim);
}
.landing-body--light .landing-footer__link {
  color: var(--lp-accent-dark);
}

/* ==========================================================================
   /posts/ — post_list.html only
   ========================================================================== */
.landing-body--posts .posts-page__title {
  color: var(--lp-ink);
}
.landing-body--posts .posts-page__intro {
  color: var(--lp-ink-muted);
}

.landing-body--posts .post-featured__link,
.landing-body--posts .post-card {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  will-change: transform;
}
.landing-body--posts .post-featured__link {
  background: #ffffff;
  border: 1px solid var(--lp-glass-border);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--posts .posts-page .post-featured__link:hover {
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(59, 130, 246, 0.26);
}
.landing-body--posts .post-featured__media,
.landing-body--posts .post-card__preview {
  background: var(--lp-surface-2);
}
.landing-body--posts .post-featured__tag {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.22);
  color: var(--lp-accent-dark);
}
.landing-body--posts .post-featured__title,
.landing-body--posts .post-card__title {
  color: var(--lp-ink);
}
.landing-body--posts .post-featured__meta,
.landing-body--posts .post-featured__stats,
.landing-body--posts .post-card__meta,
.landing-body--posts .post-card__stats,
.landing-body--posts .post-card__stat {
  color: var(--lp-ink-dim);
}
.landing-body--posts .post-card__author {
  color: var(--lp-ink-muted);
}
.landing-body--posts .post-featured__excerpt,
.landing-body--posts .post-card__excerpt {
  color: var(--lp-ink-muted);
}
.landing-body--posts .post-card__read,
.landing-body--posts .posts-page .post-card__read {
  color: var(--lp-accent-dark);
}
.landing-body--posts .post-card,
.landing-body--posts .post-card--compact {
  background: #ffffff;
  border: 1px solid var(--lp-glass-border);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--posts .post-card:hover,
.landing-body--posts .posts-page .post-card--compact:hover {
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(59, 130, 246, 0.24);
}
.landing-body--posts .posts-page .posts-empty {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.14);
  color: var(--lp-ink-dim);
}

/* ==========================================================================
   /certificates/ — public_certificates.html only
   ========================================================================== */
.landing-body--certs .pub-cert-page__title {
  color: var(--lp-ink);
}
.landing-body--certs .pub-cert-page__intro {
  color: var(--lp-ink-muted);
}
.landing-body--certs .public-glass-panel {
  box-shadow: var(--lp-shadow-md);
}
.landing-body--certs .pub-cert-filter__field label {
  color: var(--lp-ink-muted);
}
.landing-body--certs .pub-cert-filter__field input,
.landing-body--certs .pub-cert-filter__field select {
  background: #ffffff;
  color: var(--lp-ink);
  border-color: rgba(15, 23, 42, 0.14);
}
.landing-body--certs .pub-cert-filter__field input::placeholder {
  color: var(--lp-ink-dim);
}
.landing-body--certs .pub-cert-count {
  color: var(--lp-ink-dim);
}
.landing-body--certs .pub-cert-card {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  will-change: transform;
}
.landing-body--certs .pub-cert-card:hover,
.landing-body--certs .pub-cert-card:focus-visible {
  box-shadow: var(--lp-shadow-lg);
}
.landing-body--certs .pub-cert-card__media {
  background: var(--lp-surface-2);
}
.landing-body--certs .pub-cert-card__name {
  color: var(--lp-ink);
}
.landing-body--certs .pub-cert-card__holder-badge--student {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.26);
  color: var(--lp-accent-dark);
}
.landing-body--certs .pub-cert-card__holder-badge--teacher {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.32);
  color: #92400e;
}
.landing-body--certs .pub-cert-card__type {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.26);
  color: var(--lp-accent-dark);
}
.landing-body--certs .pub-cert-card__score {
  background: rgba(13, 148, 136, 0.12);
  border-color: rgba(13, 148, 136, 0.28);
  color: #0d7d6f;
}
.landing-body--certs .pub-cert-card__date {
  color: var(--lp-ink-dim);
}
.landing-body--certs .pub-cert-card__caption {
  color: var(--lp-ink-muted);
}
.landing-body--certs .pub-cert-empty {
  color: var(--lp-ink-muted);
}
.landing-body--certs .pub-cert-empty svg {
  color: var(--lp-ink-dim);
}

/* ==========================================================================
   /public-student-leaderboard/ — public_student_leaderboard.html only

   This page's entire .plb-* stylesheet is an inline <style> block in the
   template itself (not landing.css), built for a dark theme throughout -
   dark card/panel backgrounds and light/pastel text colors tuned for
   contrast against them. Every override below just gets an equal-or-two-
   class specificity edge (.landing-body--leaderboard .plb-x beats the
   inline block's bare .plb-x) so no !important is needed despite the
   inline <style> living later in the DOM than this stylesheet.
   ========================================================================== */
.landing-body--leaderboard .plb-hero__title {
  background: linear-gradient(135deg, var(--lp-ink) 10%, var(--lp-ink-muted) 55%, var(--lp-accent) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.landing-body--leaderboard .plb-grade-tab {
  background: #ffffff;
  color: var(--lp-ink-muted);
  border-color: rgba(15, 23, 42, 0.14);
}
.landing-body--leaderboard .plb-grade-tab:hover {
  border-color: var(--lp-accent);
  color: var(--lp-accent-dark);
}
.landing-body--leaderboard .plb-grade-tab--active {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: #15803d;
}
.landing-body--leaderboard .plb-split {
  border-top-color: rgba(15, 23, 42, 0.08);
}
.landing-body--leaderboard .plb-left {
  background: #ffffff;
  border-right-color: rgba(15, 23, 42, 0.08);
}
.landing-body--leaderboard .plb-row {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--leaderboard .plb-row:hover {
  border-color: rgba(59, 130, 246, 0.3);
  background: var(--lp-surface-2);
}
.landing-body--leaderboard .plb-row--gold   { border-color: rgba(234, 179, 8, 0.3); }
.landing-body--leaderboard .plb-row--silver { border-color: rgba(100, 116, 139, 0.28); }
.landing-body--leaderboard .plb-row--bronze { border-color: rgba(194, 120, 67, 0.3); }
.landing-body--leaderboard .plb-row--active {
  border-color: rgba(59, 130, 246, 0.45) !important;
  background: rgba(59, 130, 246, 0.06) !important;
  box-shadow: inset 3px 0 0 var(--lp-accent);
}
.landing-body--leaderboard .plb-rank--gold   { color: #92400e; }
.landing-body--leaderboard .plb-rank--silver { color: #475569; }
.landing-body--leaderboard .plb-rank--bronze { color: #9a3412; }
.landing-body--leaderboard .plb-list li:nth-child(8n+1) .plb-avatar { color: #16a34a; }
.landing-body--leaderboard .plb-list li:nth-child(8n+2) .plb-avatar { color: #0e7490; }
.landing-body--leaderboard .plb-list li:nth-child(8n+3) .plb-avatar { color: #7e22ce; }
.landing-body--leaderboard .plb-list li:nth-child(8n+4) .plb-avatar { color: #b45309; }
.landing-body--leaderboard .plb-list li:nth-child(8n+5) .plb-avatar { color: #1d4ed8; }
.landing-body--leaderboard .plb-list li:nth-child(8n+6) .plb-avatar { color: #be185d; }
.landing-body--leaderboard .plb-list li:nth-child(8n+7) .plb-avatar { color: #0f766e; }
.landing-body--leaderboard .plb-list li:nth-child(8n+8) .plb-avatar { color: #b91c1c; }
.landing-body--leaderboard .plb-name,
.landing-body--leaderboard .plb-score__pct {
  color: var(--lp-ink);
}
.landing-body--leaderboard .plb-score__bar {
  background: rgba(15, 23, 42, 0.08);
}
.landing-body--leaderboard .plb-trend--up { color: #16a34a; }
.landing-body--leaderboard .plb-trend--down { color: #dc2626; }
.landing-body--leaderboard .plb-prompt__icon svg {
  color: #b45309;
}
.landing-body--leaderboard .plb-back-btn {
  color: var(--lp-accent-dark);
}
.landing-body--leaderboard .plb-dp-head {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.07), rgba(34, 211, 238, 0.05));
  border-color: rgba(59, 130, 246, 0.16);
}
.landing-body--leaderboard .plb-dp-head__av {
  color: var(--lp-accent-dark);
}
.landing-body--leaderboard .plb-dp-head__name {
  color: var(--lp-ink);
}
.landing-body--leaderboard .plb-dp-head__meta {
  color: var(--lp-accent-dark);
}
.landing-body--leaderboard .plb-dp-head__avg {
  color: #15803d;
}
.landing-body--leaderboard .plb-dp-chart-wrap {
  background: var(--lp-surface-2);
  border-color: rgba(15, 23, 42, 0.08);
}
.landing-body--leaderboard .plb-dt-wrap {
  border-color: rgba(15, 23, 42, 0.08);
}
.landing-body--leaderboard .plb-dt th {
  background: var(--lp-surface-2);
  border-bottom-color: rgba(15, 23, 42, 0.08);
}
.landing-body--leaderboard .plb-dt td {
  border-top-color: rgba(15, 23, 42, 0.06);
}
.landing-body--leaderboard .plb-dt tr:hover td {
  background: rgba(15, 23, 42, 0.03);
}
.landing-body--leaderboard .plb-dt .plb-dt-subject {
  color: var(--lp-ink-muted);
  background: #ffffff;
}
.landing-body--leaderboard .plb-dt .plb-dt-good,
.landing-body--leaderboard .plb-dt .plb-dt-att {
  color: #15803d;
}
.landing-body--leaderboard .plb-dt .plb-dt-mid { color: #b45309; }
.landing-body--leaderboard .plb-dt .plb-dt-poor { color: #dc2626; }
.landing-body--leaderboard .plb-dp-ai-box {
  /* Original background is rgba(6,182,212,0.025) - basically transparent,
     so it inherited whatever sat behind it (page bg / WebGL shapes),
     making the AI feedback text illegible in places. Give it a solid
     light card surface instead. */
  background: #ffffff;
  border-color: rgba(6, 182, 212, 0.18);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--leaderboard .plb-ai-body h1,
.landing-body--leaderboard .plb-ai-body h2,
.landing-body--leaderboard .plb-ai-body h3,
.landing-body--leaderboard .plb-ai-body strong {
  color: var(--lp-ink);
}

/* ==========================================================================
   /olympiad/ — olympiad_list.html only
   ========================================================================== */
.landing-body--olympiad .olympiad-page--modern {
  background: transparent;
}
.landing-body--olympiad .olympiad-page__title {
  color: var(--lp-ink);
}
.landing-body--olympiad .olympiad-page__lead {
  color: var(--lp-ink-muted);
}
.landing-body--olympiad .olympiad-step {
  background: #ffffff;
  border: 1px solid var(--lp-glass-border);
  box-shadow: var(--lp-shadow-sm);
  color: var(--lp-ink-muted);
}
.landing-body--olympiad .olympiad-step__num {
  color: #431407;
}
.landing-body--olympiad .olympiad-card__status--open {
  background: rgba(13, 148, 136, 0.12);
  color: #0d7d6f;
  border-color: rgba(13, 148, 136, 0.28);
}
.landing-body--olympiad .olympiad-card__status--active {
  background: rgba(59, 130, 246, 0.1);
  color: var(--lp-accent-dark);
  border-color: rgba(59, 130, 246, 0.26);
}
.landing-body--olympiad .olympiad-card__status--ended {
  background: rgba(15, 23, 42, 0.06);
  color: var(--lp-ink-dim);
  border-color: rgba(15, 23, 42, 0.14);
}
.landing-body--olympiad .olympiad-section--panel {
  background: #ffffff;
  border: 1px solid var(--lp-glass-border);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--olympiad .olympiad-section__title {
  color: var(--lp-ink);
}
.landing-body--olympiad .olympiad-section__empty {
  color: var(--lp-ink-dim);
}
.landing-body--olympiad .olympiad-card {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  will-change: transform;
  background: #ffffff;
  border: 1px solid var(--lp-glass-border);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--olympiad .olympiad-card:hover {
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(59, 130, 246, 0.26);
}
.landing-body--olympiad .olympiad-card__placeholder {
  background: var(--lp-surface-2);
  color: var(--lp-ink-dim);
}
.landing-body--olympiad .olympiad-card__title {
  color: var(--lp-ink);
}
.landing-body--olympiad .olympiad-card__meta,
.landing-body--olympiad .olympiad-card__dates {
  color: var(--lp-ink-dim);
}
.landing-body--olympiad .olympiad-card__desc {
  color: var(--lp-ink-muted);
}
.landing-body--olympiad .olympiad-card__cta {
  color: var(--lp-accent-dark);
}

/* ==========================================================================
   /self-test/ — subject_list.html, quiz_list.html, register_or_resume.html.
   These share the .ied-*/.pq-* component set with the (still-dark) olympiad
   registration/exam pages, so every dark-only literal color used here needs
   an explicit light value — nothing in this block can fall back to another
   page's override. Where a rule already reads a CSS custom property (not a
   literal hex), redefining that property once on .landing-body--selftest
   re-themes every user of it for free (see --color-text-muted below).
   ========================================================================== */
.landing-body--selftest {
  /* main.css defines --color-text-muted (#94a3b8) once, site-wide, for the
     dark dashboard theme — it was never re-themed for the light pages
     because none of them used it before. Redefining it here fixes every
     .pq-* element that reads it (hero lead, teacher role/bio, card meta,
     auth-tab labels) without touching each selector individually. */
  --color-text-muted: var(--lp-ink-muted);
}

.landing-body--selftest .ied-page {
  padding: 4.5rem 1.5rem 3rem;
}
.landing-body--selftest .ied-wrap {
  max-width: 64rem; /* wider than the 52rem default — these are browsing/card-grid pages, not a narrow form */
}

/* ── Hero card ──────────────────────────────────────────────────────────── */
.landing-body--selftest .ied-hero {
  background: #ffffff;
  box-shadow: var(--lp-shadow-md);
  /* border-color intentionally left alone — .ied-hero--test's own indigo-
     tinted border (set inline on the page) is the brand accent and still
     reads fine against white; overriding it here would silently erase it
     since this rule's higher specificity would otherwise always win. */
}
.landing-body--selftest .ied-hero__title {
  color: var(--lp-ink);
}
.landing-body--selftest .ied-badge--test {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
  color: #4338ca;
}
.landing-body--selftest .ied-badge--kind {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.3);
  color: #0e7490;
}
.landing-body--selftest .ied-badge__dot--test {
  background: #6366f1;
  box-shadow: 0 0 8px #6366f1;
}
.landing-body--selftest .ied-hero__stats {
  border-top-color: var(--lp-glass-border);
}
.landing-body--selftest .ied-stat__value {
  color: var(--lp-ink);
}
.landing-body--selftest .pq-hero__glyph {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(139, 92, 246, 0.08));
  border-color: rgba(99, 102, 241, 0.22);
  color: #4f46e5;
}

/* ── Teacher panel + action card (register page) ──────────────────────── */
.landing-body--selftest .ied-panel,
.landing-body--selftest .ied-action-card {
  background: #ffffff;
  border-color: var(--lp-glass-border);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--selftest .ied-panel__title {
  color: var(--lp-ink-dim);
}
.landing-body--selftest .ied-action-card__title {
  color: var(--lp-ink);
}
.landing-body--selftest .pq-teacher__name {
  color: var(--lp-ink);
}
.landing-body--selftest .pq-teacher__cert-link {
  color: #0e7490;
}
.landing-body--selftest .ied-form__label {
  color: var(--lp-ink-muted);
}
.landing-body--selftest .ied-form .form-input {
  background: var(--lp-surface-2);
  border-color: var(--lp-glass-border);
  color: var(--lp-ink);
}
.landing-body--selftest .ied-alert--error {
  background: rgba(220, 38, 38, 0.07);
  border-color: rgba(220, 38, 38, 0.28);
  color: #b91c1c;
}
.landing-body--selftest .pq-auth-tabs {
  background: var(--lp-surface-2);
  border-color: var(--lp-glass-border);
}
.landing-body--selftest .pq-auth-tab.is-active {
  color: #4338ca;
}

/* ── Subject + quiz cards (tilt-on-hover, same mechanism as the homepage's
   bento cards / olympiad list cards — JS writes --rx/--ry) ─────────────── */
.landing-body--selftest .pq-subject-card,
.landing-body--selftest .pq-quiz-card {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  will-change: transform;
  background: #ffffff;
  border-color: var(--lp-glass-border);
  box-shadow: var(--lp-shadow-sm);
}
.landing-body--selftest .pq-subject-card:hover,
.landing-body--selftest .pq-quiz-card:hover {
  /* Keep the live JS tilt (--rx/--ry) on hover, just add a slight lift —
     without restating the transform here, the page's own inline :hover
     rule would otherwise win the cascade and replace the tilt outright. */
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0) translateY(-3px);
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(99, 102, 241, 0.3);
}
.landing-body--selftest .pq-subject-card__name,
.landing-body--selftest .pq-quiz-card__title {
  color: var(--lp-ink);
}
.landing-body--selftest .pq-subject-card__icon {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.26);
  color: #4f46e5;
}
.landing-body--selftest .pq-quiz-card__icon,
.landing-body--selftest .pq-quiz-card__kind-badge {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.26);
  color: #0e7490;
}
.landing-body--selftest .pq-quiz-card__icon--true_false,
.landing-body--selftest .pq-quiz-card__kind-badge--true_false {
  background: rgba(21, 128, 61, 0.1);
  border-color: rgba(21, 128, 61, 0.26);
  color: #15803d;
}
.landing-body--selftest .pq-quiz-card__icon--match_heading,
.landing-body--selftest .pq-quiz-card__icon--match_words,
.landing-body--selftest .pq-quiz-card__kind-badge--match_heading,
.landing-body--selftest .pq-quiz-card__kind-badge--match_words {
  background: rgba(126, 34, 206, 0.1);
  border-color: rgba(126, 34, 206, 0.26);
  color: #7e22ce;
}

/* ── Phone number picker (templates/olympiad/_phone_picker.html) ────────
   A shared include, still dark-themed by default because the olympiad/IELTS
   registration pages that also use it stay dark — every color here is a
   literal hex in the include's own inline <style>, so it needs the same
   per-selector override treatment as everything else on this page. The
   worst of it: .pp-local's text color was #f1f5f9 (near-white), which on a
   light input made whatever the visitor typed essentially invisible. */
.landing-body--selftest .pp-wrap {
  background: var(--lp-surface-2);
  border-color: var(--lp-glass-border);
}
.landing-body--selftest .pp-wrap:focus-within {
  border-color: #6366f1;
}
.landing-body--selftest .pp-flag-btn {
  background: rgba(15, 23, 42, 0.03);
  border-right-color: var(--lp-glass-border);
  color: var(--lp-ink);
}
.landing-body--selftest .pp-flag-btn:hover {
  background: rgba(15, 23, 42, 0.06);
}
.landing-body--selftest .pp-dial {
  color: var(--lp-ink-dim);
}
.landing-body--selftest .pp-local {
  color: var(--lp-ink);
}
.landing-body--selftest .pp-local::placeholder {
  color: #94a3b8;
}
.landing-body--selftest .pp-dropdown {
  background: #ffffff;
  border-color: var(--lp-glass-border);
  box-shadow: var(--lp-shadow-md);
}
.landing-body--selftest .pp-search-wrap {
  border-bottom-color: var(--lp-glass-border);
}
.landing-body--selftest .pp-search {
  background: var(--lp-surface-2);
  border-color: var(--lp-glass-border);
  color: var(--lp-ink);
}
.landing-body--selftest .pp-search:focus {
  border-color: #6366f1;
}
.landing-body--selftest .pp-list-item {
  color: var(--lp-ink-muted);
}
.landing-body--selftest .pp-list-item:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--lp-ink);
}
.landing-body--selftest .pp-list-item.is-selected {
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
}
.landing-body--selftest .pp-list-item__dial {
  color: var(--lp-ink-dim);
}
.landing-body--selftest {
  /* Read by the include's own JS when it builds the "invalid phone" error
     message with an inline style (can't be reached by a normal CSS rule —
     see the comment in _phone_picker.html's submit handler). */
  --pp-error-color: #b91c1c;
}

@media (max-width: 720px) {
  .landing-body--selftest .ied-page { padding: 3.5rem 1rem 2.25rem; }
}

/* ── prefers-reduced-motion: neutralize the tilt/hover transforms too ──── */
@media (prefers-reduced-motion: reduce) {
  .landing-body--home .lp-hero__bg,
  .landing-body--home .lp-bento-card,
  .landing-body--home .lp-major,
  .landing-body--home .lp-cert-card,
  .landing-body--home .lp-post,
  .landing-body--home .lp-selftest-card,
  .landing-body--home .lp-team-card,
  .landing-body--posts .post-featured__link,
  .landing-body--posts .post-card,
  .landing-body--certs .pub-cert-card,
  .landing-body--olympiad .olympiad-card,
  .landing-body--selftest .pq-subject-card,
  .landing-body--selftest .pq-quiz-card {
    transition: none;
  }
}