/* Educators theme overrides
 * GSAP ScrollTrigger may not initialise reliably inside an SPA mount,
 * which leaves .effectFade elements stuck at opacity 0. Force them visible. */
.educators-theme .effectFade,
.educators-theme .fadeUp,
.educators-theme .fadeIn,
.educators-theme .animate-box,
.educators-theme [class*="effect"] {
  opacity: 1 !important;
  transform: none !important;
}

/* Mobile menu hamburger trigger — visible only below the lg breakpoint
 * (the desktop nav pill and CTA hide there). Styled as a glass pill to
 * match the existing header chrome. */
.educators-theme .open-mb-menu {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  color: #0f172a;
  font-size: 20px;
}
.educators-theme .open-mb-menu:hover {
  background: rgba(255, 255, 255, 0.7) !important;
}
@media (min-width: 992px) {
  .educators-theme .open-mb-menu { display: none !important; }
}
/* Ensure the offcanvas panel sits above everything when opened. */
.offcanvas-menu { z-index: 9999; }
/* Solid dark backdrop so menu links (white) are legible. */
.offcanvas-menu .offcanvas-content {
  background: #0f172a !important;
}
.offcanvas-menu .mb-menu-link,
.offcanvas-menu .mb-menu-link .text,
.offcanvas-menu .close-mb-menu,
.offcanvas-menu .logo-site { color: #fff !important; }
.offcanvas-menu .nav-ul-mb { list-style: none; padding: 0; margin: 0; }
.offcanvas-menu .nav-ul-mb li { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }

/* The template ships a fixed colour-settings panel and a custom cursor canvas
 * that bleed outside our wrapper if Bootstrap offcanvas JS positions them on
 * <body>. Hide both. */
.tf-left-bar,
.offcanvas-color,
.cursor-trail,
#goTop { display: none !important; }

/* Reset the global counter-scroll body class effect (used by ScrollSmoother). */
body.counter-scroll { overflow: visible !important; height: auto !important; }

/* UK Globe card on /students — replaces the default earth image with a
 * premium full-bleed globe pinned to the bottom of the dark card. */
.educators-theme .uk-globe-card { position: relative; overflow: hidden; }
.educators-theme .uk-globe-card .uk-globe-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -8%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%);
}

/* Recolor the template's red brand accent to the Cleo teal/green brand color
 * (HSL 168 65% 32% ≈ #1C8A6F). Override every preset variant so any
 * data-color-primary attribute still resolves to the Cleo brand. */
.educators-theme,
.educators-theme[data-color-primary=color-primary-1],
.educators-theme[data-color-primary=color-primary-2],
.educators-theme[data-color-primary=color-primary-3],
.educators-theme[data-color-primary=color-primary-4],
.educators-theme[data-color-primary=color-primary-5],
.educators-theme[data-color-primary=color-primary-6],
.educators-theme[data-color-primary=color-primary-7],
.educators-theme[data-color-primary=color-primary-8],
.educators-theme [data-color-primary] {
  --brand: hsl(168 65% 32%) !important;
}
/* School marquee pills (replaces partner logos) */
.educators-theme .school-marquee-wrap {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
/* Prevent marquee from blowing out page width on mobile */
.educators-theme .section-partner { overflow: hidden; }
.educators-theme .section-partner .container,
.educators-theme .section-partner .partner-wrap {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.educators-theme .section-partner .partner-wrap { flex-wrap: wrap; }
@media (max-width: 768px) {
  .educators-theme .school-marquee-wrap { width: 100%; flex: 1 1 100%; }
}
.educators-theme .school-marquee-wrap::after {
  position: absolute;
  content: "";
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #EDECEC 0%, rgba(237, 236, 236, 0) 14%, rgba(237, 236, 236, 0) 86%, #EDECEC 100%);
}
.educators-theme .school-marquee-track {
  align-items: center;
  animation: schoolMarquee 55s linear infinite;
  display: flex;
  flex: 0 0 auto;
  min-width: max-content;
}
.educators-theme .school-marquee-wrap:hover .school-marquee-track {
  animation-play-state: paused;
}
.educators-theme .school-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  margin: 0 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.06);
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
}
@keyframes schoolMarquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .educators-theme .school-marquee-track { animation: none; }
}

/* Remove orange tile behind the centre Cleo logo in features section */
.educators-theme .features-center {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.educators-theme .features-center::before,
.educators-theme .features-center::after {
  display: none !important;
}
.educators-theme .features-center img {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 180px;
  height: auto;
}

/* Section-about-us: pin Arcade demo flush with the bottom of the dark card */
.educators-theme .section-about-us .col-left {
  padding-bottom: 0 !important;
}
.educators-theme .section-about-us .arcade-demo-wrap {
  margin-bottom: 0 !important;
  border-radius: 0 0 36px 36px !important;
  overflow: hidden;
  padding-bottom: 56.25% !important;
}
/* Tighten gap between Partner With Cleo button and the demo iframe so the
 * dark card doesn't show an empty black band underneath. */
.educators-theme .section-about-us .col-left { padding-top: 18px !important; }
.educators-theme .section-about-us .col-left .position-relative.z-5 .title { margin-bottom: 14px !important; }
.educators-theme .section-about-us .col-left .arcade-demo-wrap { margin-top: 0 !important; }
.educators-theme .section-about-us .arcade-demo-wrap iframe {
  top: 0 !important;
  height: 100% !important;
}
.educators-theme .section-about-us { padding-bottom: 40px !important; }

/* Schools FAQ (.accordion-asked): tie panel visibility to the Bootstrap
 * button's .collapsed class so the answer text can't vanish while the button
 * still reads as expanded. */
.educators-theme .accordion-asked-item
  .accordion-asked-title:has(> .accordion-button:not(.collapsed))
  + .accordion-collapse {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
  overflow: visible !important;
}
.educators-theme .accordion-asked-item
  .accordion-asked-title:has(> .accordion-button.collapsed)
  + .accordion-collapse {
  display: none !important;
  height: 0 !important;
}

/* Hero: shift green aurora to warm cream tones */
.educators-theme .section-hero {
  background-color: #ffffff !important;
}

/* Keep the students hero compact on laptop and desktop screens. */
@media (min-width: 992px) {
  .educators-theme .section-hero.student-hero {
    min-height: clamp(700px, 76vh, 820px) !important;
  }
  .educators-theme .section-hero.student-hero .content-wrap {
    padding: 230px 0 90px;
  }
}

/* ---- Glass nav bar ---- */
.educators-theme .tf-header.header2 {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding-top: 14px !important;
}
.educators-theme .tf-header.header2 .header-inner {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  gap: 16px;
}
.educators-theme .tf-header.header2 .box-navigation {
  background: rgba(255, 255, 255, 0.28) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 999px !important;
  padding: 8px 22px !important;
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08) !important;
}
.educators-theme .tf-header.header2 .logo-site {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.educators-theme .tf-header.header2 .box-navigation .nav-menu-main {
  margin: 0 !important;
}
.educators-theme .tf-header.header2 .box-navigation .nav-menu-main .menu-item .item-link {
  white-space: nowrap !important;
}
.educators-theme .section-hero .hero-image {
  background: transparent !important;
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden;
  z-index: 0;
}
.educators-theme .section-hero .hero-image .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  border-radius: 0;
}

/* Scrim over hero video so the heading and copy stay legible.
 * Stronger on mobile where the video fills behind the text block. */
.educators-theme .section-hero .hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.45) 55%, rgba(255,255,255,0.7) 100%);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 768px) {
  .educators-theme .section-hero .hero-image::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0.78) 100%);
  }
}

.educators-theme .section-hero .container {
  position: relative;
  z-index: 1;
}
.educators-theme .section-hero {
  position: relative;
}
.educators-theme .section-hero .scroll-more {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin: 0 !important;
  z-index: 1;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
@media (max-width: 991px) {
  .educators-theme .section-hero .scroll-more {
    bottom: 0;
  }
}

/* Replace orange pill with a waving hand */
.educators-theme .section-hero .content-wrap .title-icon {
  height: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.educators-theme .section-hero .content-wrap .title-icon .box,
.educators-theme .section-hero .content-wrap .title-icon .title-icon-wrap {
  display: none !important;
}
/* Hero anchor: reserves the space where the hand starts */
.educators-theme .section-hero .content-wrap .title-icon .wave-hand-anchor {
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 1;
}
/* The single hand lives in the About heading and travels up to the hero */
.educators-theme .wave-hand-slot {
  display: inline-block;
  width: 56px;
  height: 56px;
  vertical-align: middle;
  position: relative;
}
.educators-theme .wave-hand-slot .wave-hand {
  position: absolute;
  inset: 0;
  display: inline-block;
  font-size: 56px;
  line-height: 1;
  transform-origin: 70% 70%;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.12));
  will-change: transform;
  -webkit-text-fill-color: initial;
  -webkit-background-clip: initial;
  background-clip: initial;
  background: none;
  color: initial;
  z-index: 0;
}
/* Keep the case study content card above the waving hand as it lands. */
.educators-theme .section-about-us .col-left {
  position: relative;
  z-index: 1;
}
@keyframes wave-hand-anim {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(18deg); }
  30%  { transform: rotate(-12deg); }
  45%  { transform: rotate(18deg); }
  60%  { transform: rotate(-8deg); }
  75%  { transform: rotate(12deg); }
  100% { transform: rotate(0deg); }
}
.educators-theme .wave-hand-slot .wave-hand.is-waving {
  animation: wave-hand-anim 1.4s ease-in-out;
}
/* Mobile: smaller hand and anchor, same travel animation */
@media (max-width: 991px) {
  .educators-theme .section-hero .content-wrap .title-icon .wave-hand-anchor {
    width: 56px;
    height: 56px;
  }
  .educators-theme .wave-hand-slot {
    width: 40px;
    height: 40px;
  }
  .educators-theme .wave-hand-slot .wave-hand {
    font-size: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .educators-theme .wave-hand-slot .wave-hand { transition: none; animation: none; }
}

/* Process card icons: pastel green */
.educators-theme .process-card .icon {
  color: #2F7D5B;
  background: linear-gradient(180deg, #CDEDD6 0%, #A9DBB8 100%) !important;
  box-shadow:
    0px 3.44px 5.57px 0px rgba(0, 0, 0, 0.086),
    0px 22.91px 37.08px 0px rgba(47, 125, 91, 0.16),
    0px 76px 123px 0px rgba(47, 125, 91, 0.05),
    0px 5.05px 8.18px 0px rgba(47, 125, 91, 0.10),
    0px 16.98px 27.47px 0px rgba(47, 125, 91, 0.05),
    0px 56px 83px 0px rgba(47, 125, 91, 0.25),
    0px 14px 34px 0px rgba(47, 125, 91, 0.25),
    0px 1px 2px 0px rgba(47, 125, 91, 0.4),
    0px -3px 0px 0px rgba(0, 0, 0, 0.06) inset,
    0px 1px 0px 0px rgba(255, 255, 255, 0.6) inset !important;
}

/* Benefits step: number badges + labels under each step */
.educators-theme .benefits-step .benefits-step-inner {
  padding-bottom: 36px;
}
.educators-theme .benefits-step-inner .step-item .icon {
  color: #2F7D5B;
}
.educators-theme .benefits-step-inner .step-item::before {
  content: attr(data-num);
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, #CDEDD6 0%, #A9DBB8 100%);
  color: #2F7D5B;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(47, 125, 91, 0.35), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  z-index: 2;
}
.educators-theme .benefits-step-inner .step-item::after {
  content: attr(data-label);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 600;
  color: #151515;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .educators-theme .benefits-step .benefits-step-inner {
    height: auto !important;
    padding-bottom: 30px;
  }
  .educators-theme .benefits-step-inner .step-item::after {
    font-size: 11px;
  }
  .educators-theme .benefits-step-inner .step-item::before {
    width: 20px;
    height: 20px;
    font-size: 11px;
    top: -8px;
    right: -8px;
  }
}

/* Testimonial video embed — replaces static image in quote card */
.educators-theme .testimonial-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
}
.educators-theme .testimonial-video-wrap .testimonial-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Team section */
.section-team .team-card { padding: 16px 8px; }
.section-team .team-avatar {
  width: 180px;
  height: 180px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
  background: #f4f4f4;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.18);
}
.section-team .team-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.section-team .team-name { margin: 0 0 4px; font-weight: 600; }
.section-team .team-role { margin: 0; color: #666; font-size: 14px; }
@media (max-width: 575px) {
  .section-team .team-avatar { width: 130px; height: 130px; }
}

/* Keep the injected theme visible immediately on phones and slow devices.
 * The animation elements are forced visible above, so waiting for GSAP here can
 * make the hero look like it never loaded on mobile browsers. */
.educators-theme #wrapper { opacity: 1 !important; }

/* Prevent any section from causing horizontal scroll on mobile */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .educators-theme, .educators-theme #wrapper { overflow-x: hidden; max-width: 100vw; }
}

/* Schools demo: single muted autoplay video with a click to unmute */
.educators-theme .arcade-demo-wrap { background: #000; }
.educators-theme .schools-demo-video { cursor: pointer; }
.educators-theme .demo-sound-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}
.educators-theme .demo-sound-toggle:hover { background: rgba(15, 23, 42, 0.82); }
.educators-theme .demo-sound-toggle.is-hidden { opacity: 0; pointer-events: none; }
@media (max-width: 767px) {
  .educators-theme .demo-sound-toggle { top: 10px; right: 10px; padding: 7px 12px; font-size: 12px; }
}

/* ===== Subjects section ===== */
.educators-theme .section-subjects { background: transparent; }
.educators-theme .section-subjects .subjects-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  max-width: 880px;
  margin: 0 auto;
}
.educators-theme .section-subjects .subjects-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.educators-theme .section-subjects .subjects-table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
}
.educators-theme .section-subjects .subjects-table thead th {
  background: #f6f8f8;
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
  font-weight: 600;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.educators-theme .section-subjects .subjects-table th.col-level,
.educators-theme .section-subjects .subjects-table td.col-level {
  text-align: center;
  width: 140px;
}
.educators-theme .section-subjects .subjects-table tbody td {
  padding: 20px 28px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  vertical-align: middle;
  color: #0f172a;
}
.educators-theme .section-subjects .subjects-table tbody tr:last-child td {
  border-bottom: 0;
}
.educators-theme .section-subjects .subjects-table tbody tr:nth-child(even) td {
  background: #fbfcfc;
}
.educators-theme .section-subjects .subject-name {
  font-weight: 600;
  font-size: 17px;
  display: block;
}
.educators-theme .section-subjects .subject-meta {
  display: block;
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}
.educators-theme .section-subjects .subjects-table td.col-level .subject-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: hsl(168, 65%, 32%);
  color: #ffffff;
}
.educators-theme .section-subjects .subjects-footnote {
  font-size: 14px;
}
@media (max-width: 600px) {
  .educators-theme .section-subjects .subjects-table thead th,
  .educators-theme .section-subjects .subjects-table tbody td {
    padding: 14px 16px;
  }
  .educators-theme .section-subjects .subjects-table th.col-level,
  .educators-theme .section-subjects .subjects-table td.col-level {
    width: 80px;
  }
  .educators-theme .section-subjects .subject-name { font-size: 15px; }
}

/* Student demo video panel */
.educators-theme .student-demo-video {
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
}
.educators-theme .student-demo-video .student-demo-video-el {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

/* Collapse the large empty gap below the about/video section on phones.
 * The base template forces min-height: 100vh below 1439px, which leaves a
 * huge void under the demo video on mobile. */
@media (max-width: 767px) {
  .educators-theme .section-about-us {
    min-height: auto !important;
    padding-top: 40px !important;
    padding-bottom: 24px !important;
  }
  .educators-theme .section-about-us .box-quotes.student-demo-video {
    margin-bottom: 0 !important;
  }
}

/* Class Beyond social proof video collage */
.educators-theme .student-proof {
  position: relative;
  isolation: isolate;
  min-height: 760px;
  overflow: hidden;
  background: #FFFFFF;
}
.educators-theme .student-proof-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 34px 14px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
.educators-theme .student-proof-tile {
  overflow: hidden;
  border-radius: 10px;
}
.educators-theme .student-proof-tile video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
.educators-theme .student-proof-wall > .student-proof-tile:nth-child(4n + 1) { transform: translateY(18px); }
.educators-theme .student-proof-wall > .student-proof-tile:nth-child(4n + 3) { transform: translateY(-22px); }
.educators-theme .student-proof-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  pointer-events: none;
}
.educators-theme .student-proof-overlay > * { pointer-events: auto; }
.educators-theme .student-proof-overlay h2 {
  max-width: 900px;
  margin: 0;
  color: hsl(var(--foreground));
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow: 0 0 18px #FFFFFF, 0 0 42px #FFFFFF, 0 6px 30px rgba(255, 255, 255, .9);
}
.educators-theme .student-proof-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 36px;
  padding: 12px 28px;
  border: 1.5px solid hsl(var(--foreground));
  border-radius: 999px;
  background: hsl(var(--foreground));
  box-shadow: 0 10px 26px rgba(17, 17, 17, .22);
  color: hsl(var(--background));
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.educators-theme .student-proof-button:hover {
  color: hsl(var(--background));
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(17, 17, 17, .28);
}
@media (max-width: 920px) {
  .educators-theme .student-proof { min-height: 680px; }
  .educators-theme .student-proof-wall > .student-proof-tile:nth-child(n) { transform: none; }
  .educators-theme .student-proof-wall > .student-proof-tile:nth-child(4n + 1) { transform: translateY(18px); }
  .educators-theme .student-proof-wall > .student-proof-tile:nth-child(4n + 3) { transform: translateY(-22px); }
}
@media (max-width: 640px) {
  .educators-theme .student-proof { min-height: 720px; }
  .educators-theme .student-proof-wall { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 26px 10px; }
  .educators-theme .student-proof-wall > .student-proof-tile:nth-child(n) { transform: none; }
  .educators-theme .student-proof-wall > .student-proof-tile:nth-child(2n) { transform: translateY(16px); }
  .educators-theme .student-proof-overlay h2 { max-width: 350px; font-size: clamp(34px, 10vw, 44px); }
  .educators-theme .student-proof-button { margin-top: 28px; }
}

/* Persistent Connected learning walkthrough */
.educators-theme .services-image {
  width: calc(50% - 24px);
  max-width: calc(50% - 24px);
  left: 12px;
  height: auto;
  aspect-ratio: 16 / 9;
}
.educators-theme .services-image .services-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.educators-theme .section-services .col-left {
  margin-bottom: 450px;
}
@media (max-width: 991px) {
  .educators-theme .services-image {
    width: min(680px, 100%);
    max-width: 100%;
    left: auto;
    height: auto;
  }
  .educators-theme .section-services .col-left {
    margin-bottom: 0;
  }
}

/* Notes section: notebook screenshot under a centred heading */
.educators-theme .section-notes {
  padding: 24px 0 8px;
}
.educators-theme .section-notes .notes-title {
  text-align: center;
  font-family: "Urbanist", sans-serif;
  font-size: 48px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--primary);
  margin: 0 0 12px;
}
.educators-theme .section-notes .notes-sub {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 32px;
  font-size: 17px;
  line-height: 1.6;
  color: #4B5563;
}
.educators-theme .section-notes .notes-shot-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, #EAF6EF 0%, #F7FAF8 100%);
  border: 1px solid #E2EAE5;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
}
.educators-theme .section-notes .notes-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
@media (max-width: 767px) {
  .educators-theme .section-notes {
    padding: 16px 0 4px;
  }
  .educators-theme .section-notes .notes-title {
    font-size: 36px;
    line-height: 1.15;
  }
  .educators-theme .section-notes .notes-sub {
    font-size: 15px;
    margin-bottom: 20px;
  }
  .educators-theme .section-notes .notes-shot-wrap {
    padding: 10px;
    border-radius: 18px;
  }
}

/* Subject picker: replaces the trusted-by marquee */
.educators-theme .section-subject-picker {
  padding: 24px 0 48px;
}
.educators-theme .section-subject-picker .subject-picker-title {
  text-align: center;
  font-family: "Urbanist", sans-serif;
  font-size: 48px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--primary);
  margin: 0 0 24px;
}
.educators-theme .section-subject-picker .subject-picker-card {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 24px 28px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.educators-theme .section-subject-picker .subject-picker-field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.educators-theme .section-subject-picker .subject-picker-field label {
  font-size: 14px;
  font-weight: 600;
  color: #1F2937;
}
.educators-theme .section-subject-picker .subject-picker-field select {
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  line-height: 50px;
  padding: 0 14px;
  border: 1px solid #D7DBE0;
  border-radius: 10px;
  background-color: #F3F4F6;
  color: #374151;
  font-size: 16px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.educators-theme .section-subject-picker .subject-picker-field select:focus {
  outline: 2px solid rgba(47, 125, 91, 0.45);
  outline-offset: 1px;
}
.educators-theme .section-subject-picker .subject-picker-field select option {
  background-color: #FFFFFF;
  color: #1F2937;
}
.educators-theme .section-subject-picker .subject-picker-cta {
  flex: 0 0 auto;
  height: 52px;
  padding: 14px 32px;
  white-space: nowrap;
  cursor: pointer;
}
@media (max-width: 767px) {
  .educators-theme .section-subject-picker {
    padding: 16px 0 32px;
  }
  .educators-theme .section-subject-picker .subject-picker-title {
    font-size: 36px;
    line-height: 1.15;
  }
  .educators-theme .section-subject-picker .subject-picker-card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
  }
  .educators-theme .section-subject-picker .subject-picker-cta {
    width: 100%;
  }
}

/* Awards section: inline badge instead of placeholder logo images.
   Safari on iOS/iPadOS collapsed the old SVG <img> to zero size. */
.educators-theme .awards-item .award-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
}
.educators-theme .awards-item .award-badge svg {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: block;
}
.educators-theme .awards-item .award-badge span {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
/* Any remaining image in the awards/statistic block keeps intrinsic size on iOS */
.educators-theme .section-awards img,
.educators-theme .section-statistic img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Soft glow lights for the black section (replaces broken PNG streaks) */
.educators-theme .box-black .light-glow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  height: 120px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(52, 199, 160, 0.35), rgba(52, 199, 160, 0));
  filter: blur(24px);
  z-index: 0;
}
.educators-theme .box-black .light-glow-top { top: -40px; }
.educators-theme .box-black .light-glow-bot { bottom: -40px; }
@media (max-width: 991px) {
  .educators-theme .box-black .light-glow { width: 260px; height: 70px; }
}

/* Hero free forever badge */
.educators-theme .section-hero .hero-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 26px auto 0;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(47, 125, 91, 0.10);
  color: #2F7D5B;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.educators-theme .section-hero .hero-free-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2F7D5B;
}

/* Hero 3X accent */
.educators-theme .section-hero .title .accent-3x {
  background: linear-gradient(180deg, #3FA47A 0%, #2F7D5B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #2F7D5B;
}

/* Hero proposal recipient name in theme green */
.educators-theme .recipient-name {
  color: #2F7D5B;
  font-weight: 600;
}

/* Hero school name in baby blue */
.educators-theme .school-name {
  color: #89CFF0;
  -webkit-text-fill-color: #89CFF0;
}