/* YELL site-wide — global overflow protection */
*, *::before, *::after { box-sizing: border-box; }
/* Clip horizontal overflow on body ONLY. Setting overflow-x on html too makes
   the body its own scroll container (no overflow propagation to the viewport),
   which stops window 'scroll' events from firing — breaking scroll-reveal,
   parallax and the roadmap after the initial scan window. Body-only lets the
   clip propagate to the viewport while normal window scrolling keeps working. */
body { overflow-x: hidden; }
/* Nav desktop/mobile switch is CSS-only on purpose. It used to be driven by
   window.innerWidth in Nav.dc.html's component state (seeded at 1200), so any
   run where componentDidMount was late or skipped painted the 1200px-wide
   desktop nav on a phone — inline display beats every rule below it, giving a
   sideways-scrolling page with no burger. Media queries cannot fail to run. */
.yell-nav-desktop { display: flex; }
.yell-nav-burger { display: none; }
.yell-nav-panel { display: none; }
@media (max-width: 900px) {
  .yell-nav-desktop { display: none; }
  .yell-nav-burger { display: inline-flex; }
  .yell-nav-panel.is-open { display: block; }
}

img { max-width: 100%; height: auto; }
image-slot { max-width: 100%; }
/* Prevent long numbers/text in stat counters from causing overflow */
[data-counter] { word-break: break-word; overflow-wrap: break-word; }

/* YELL site-wide animations — respects prefers-reduced-motion */

/* ─── SCROLL REVEAL BASE ─── */
[data-anim] {
  opacity: 0;
}
[data-anim].is-visible {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* fade-up */
[data-anim="fade-up"] { transform: translateY(24px); }
[data-anim="fade-up"].is-visible {
  animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* fade-in */
[data-anim="fade-in"].is-visible {
  animation: fadeIn 0.45s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* slide-right */
[data-anim="slide-right"] { transform: translateX(32px); }
[data-anim="slide-right"].is-visible {
  animation: slideRight 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes slideRight {
  to { opacity: 1; transform: translateX(0); }
}

/* slide-left */
[data-anim="slide-left"] { transform: translateX(-32px); }
[data-anim="slide-left"].is-visible {
  animation: slideLeft 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes slideLeft {
  to { opacity: 1; transform: translateX(0); }
}

/* scale-in */
[data-anim="scale-in"] { transform: scale(0.9); }
[data-anim="scale-in"].is-visible {
  animation: scaleIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes scaleIn {
  to { opacity: 1; transform: scale(1); }
}

/* ─── STAGGER DELAYS ─── */
[data-anim-delay="1"] { animation-delay: 0.05s !important; }
[data-anim-delay="2"] { animation-delay: 0.10s !important; }
[data-anim-delay="3"] { animation-delay: 0.15s !important; }
[data-anim-delay="4"] { animation-delay: 0.20s !important; }
[data-anim-delay="5"] { animation-delay: 0.25s !important; }
[data-anim-delay="6"] { animation-delay: 0.30s !important; }
[data-anim-delay="7"] { animation-delay: 0.35s !important; }
[data-anim-delay="8"] { animation-delay: 0.40s !important; }
[data-anim-delay="9"] { animation-delay: 0.45s !important; }
[data-anim-delay="10"] { animation-delay: 0.50s !important; }
[data-anim-delay="11"] { animation-delay: 0.55s !important; }
[data-anim-delay="12"] { animation-delay: 0.60s !important; }

/* ─── BUTTON / LINK HOVER ─── */
a[href*="Apply"], a[href*="Pricing"], a[href*="Proof"],
a[href*="Program"], a[href*="Universities"], a[href*="Mentors"],
a[href*="About"], a[href*="path=university"],
section[style*="background: var(--yell-red)"] a,
.yell-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
a[href*="Apply"]:hover, a[href*="path=university"]:hover,
section[style*="background: var(--yell-red)"] a:hover,
.yell-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

/* ─── UNIFIED CARD HOVER (light cards: white→black) ─── */
.yell-hover {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.3s ease,
              background-color 0.3s ease,
              border-color 0.3s ease;
  cursor: default;
}
.yell-hover h3,
.yell-hover p,
.yell-hover span,
.yell-hover div {
  transition: color 0.3s ease;
}
.yell-hover:hover {
  transform: translateY(-5px);
  background-color: var(--yell-black) !important;
  border-color: var(--yell-red) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
}
.yell-hover:hover h3 { color: #fff !important; }
.yell-hover:hover p { color: rgba(255,255,255,0.75) !important; }
.yell-hover:hover span[style*="color: var(--yell-ink-45)"],
.yell-hover:hover span[style*="color: var(--yell-red)"] { color: var(--yell-red) !important; }
/* Stat/metric numbers set in ink black (e.g. Proof brand-card margin) would vanish
   on the black hover background — force them white. */
.yell-hover:hover div[style*="color: var(--yell-black)"] { color: #fff !important; }

/* ─── DARK CARD HOVER (already-dark cards) ─── */
.yell-hover-dark {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
  cursor: default;
}
.yell-hover-dark:hover {
  transform: translateY(-5px);
  border-color: var(--yell-red) !important;
  box-shadow: 0 16px 40px rgba(220,38,38,0.15);
}

/* ─── MODULE CARD HOVER (color flip to red) ─── */
.yell-module-hover {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  cursor: default;
}
.yell-module-hover h3,
.yell-module-hover p {
  transition: color 0.3s ease;
}
.yell-module-hover:hover {
  transform: translateY(-5px);
  background: var(--yell-red) !important;
  border-color: var(--yell-red) !important;
  box-shadow: 0 14px 36px rgba(220,38,38,0.2);
}
.yell-module-hover:hover h3 { color: #fff !important; }
.yell-module-hover:hover p { color: rgba(255,255,255,0.85) !important; }
.yell-module-hover:hover span[data-counter],
.yell-module-hover:hover > span:first-child { color: #fff !important; }

/* ─── ADVANTAGE CARD ─── */
.yell-adv-card {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: default;
}
.yell-adv-card h3,
.yell-adv-card p {
  transition: color 0.3s ease;
}
.yell-adv-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  border-color: var(--yell-red) !important;
}

/* ─── TIMELINE CARD HOVER ─── */
.yell-timeline-hover {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: default;
}
.yell-timeline-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.1);
  border-color: var(--yell-red) !important;
}

/* ─── PRICING TIER HOVER ─── */
.yell-tier-hover {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.yell-tier-hover h3,
.yell-tier-hover p,
.yell-tier-hover span,
.yell-tier-hover li,
.yell-tier-hover div {
  transition: color 0.3s ease;
}
.yell-tier-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.14);
  border-color: var(--yell-red) !important;
}

/* ─── MENTOR CARD HOVER ─── */
.yell-mentor-hover {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.yell-mentor-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.1);
  border-color: var(--yell-red) !important;
}

/* ─── STEP CARD HOVER (dark section) ─── */
.yell-step-card {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.yell-step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.3);
  border-color: var(--yell-red) !important;
}

/* ─── CTA PATH CARD ─── */
.yell-cta-path {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.yell-cta-path:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.15);
  border-color: var(--yell-red) !important;
}

/* ─── SLIDING NUMBER COUNTER ─── */
[data-counter] {
  display: inline-flex;
  align-items: baseline;
  overflow: hidden;
}
.yell-digit-col {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  position: relative;
  line-height: 1;
}
.yell-digit-strip {
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.yell-digit-strip span {
  display: block;
  height: 1em;
  line-height: 1;
  text-align: center;
}
.yell-digit-static {
  display: inline-block;
  line-height: 1;
}

/* ─── RED ACCENT BAR GROW ─── */
[data-anim="bar-grow"] {
  transform: scaleX(0);
  transform-origin: left;
}
[data-anim="bar-grow"].is-visible {
  animation: barGrow 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes barGrow {
  to { opacity: 1; transform: scaleX(1); }
}

/* ─── FAQ ACCORDION ─── */
details summary span:last-child {
  transition: transform 0.3s ease;
  display: inline-block;
}
details[open] summary span:last-child {
  transform: rotate(45deg);
}
details .yell-faq-body {
  animation: faqOpen 0.3s ease forwards;
  overflow: hidden;
}
@keyframes faqOpen {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 300px; }
}

/* ─── PARALLAX ─── */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ─── NAV LINK HOVER ─── */
header nav a {
  transition: color 0.2s ease !important;
}
footer nav a, footer a {
  transition: color 0.2s ease !important;
}
footer nav a:hover, footer a:hover {
  color: rgba(255,255,255,1) !important;
}

/* ─── ARROW LINK HOVER ─── */
a[style*="text-decoration: none"][style*="color: var(--yell-red)"] {
  transition: gap 0.2s ease;
}

/* ─── SCROLL ROADMAP ─── */
.yell-roadmap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 0 40px;
  max-width: 680px;
  margin: 0 auto;
}
.yell-roadmap-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 4px;
  height: auto;
  background: var(--yell-line);
  border-radius: 4px;
  z-index: 0;
}
.yell-roadmap-progress {
  position: absolute;
  top: 0;
  left: 14px;
  width: 4px;
  height: 0;
  background: var(--yell-red);
  border-radius: 4px;
  z-index: 1;
  transition: height 0.6s cubic-bezier(0.22,1,0.36,1);
}
.yell-roadmap-step {
  position: relative;
  z-index: 2;
  padding: 0 0 32px 0;
  text-align: left;
  opacity: 0.35;
  transform: translateX(-12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.yell-roadmap-step:last-child {
  padding-bottom: 0;
}
.yell-roadmap-step.is-active {
  opacity: 1;
  transform: translateX(0);
}
.yell-roadmap-step.is-complete {
  opacity: 0.7;
  transform: translateX(0);
}
.yell-roadmap-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--yell-line);
  border: 3px solid var(--yell-white);
  transition: background 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  position: absolute;
  left: -40px;
  top: 28px;
  z-index: 3;
  flex-shrink: 0;
}
.yell-roadmap-step.is-active .yell-roadmap-dot {
  background: var(--yell-red);
  transform: scale(1.4);
  box-shadow: 0 0 0 6px rgba(220,38,38,0.15);
}
.yell-roadmap-step.is-complete .yell-roadmap-dot {
  background: var(--yell-red);
}
.yell-roadmap-card {
  background: var(--yell-white);
  border: 1px solid var(--yell-line);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.yell-roadmap-step.is-active .yell-roadmap-card {
  border-color: var(--yell-red);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  transform: scale(1.02);
}

/* Mobile vertical roadmap */
@media (max-width: 768px) {
  .yell-roadmap {
    padding: 0 0 0 32px;
  }
  .yell-roadmap-dot {
    left: -32px;
  }
}

/* ─── RESPONSIVE: TABLET (≤1024px) ─── */
@media (max-width: 1024px) {
  /* Multi-column grids → 2 cols (both section and div) */
  section[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  div[style*="grid-template-columns: repeat(5"],
  div[style*="grid-template-columns: repeat(6"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Hero 2-col layouts → tighter gap */
  section[style*="grid-template-columns: 1.08fr"],
  section[style*="grid-template-columns: 1.05fr"] {
    gap: 32px !important;
  }
  /* Fractional 2-col layouts (div) → tighter gap */
  div[style*="grid-template-columns: 0.9fr"],
  div[style*="grid-template-columns: 0.85fr"] {
    gap: 32px !important;
  }
  /* Pricing tier cards */
  div[style*="grid-template-columns: repeat(3, 1fr)"][style*="align-items: stretch"] {
    grid-template-columns: 1fr !important;
    max-width: 480px;
    margin: 0 auto !important;
  }
  /* Reduce section padding */
  section[style*="padding: 80px 32px"],
  section[style*="padding: 72px 32px"],
  section[style*="padding: 88px 32px"],
  div[style*="padding: 80px 32px"],
  div[style*="padding: 72px 32px"],
  div[style*="padding: 56px 32px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Large headings scale down slightly */
  h1[style*="font-size: 56px"] {
    font-size: 44px !important;
    line-height: 50px !important;
  }
  h1[style*="font-size: 52px"] {
    font-size: 42px !important;
    line-height: 48px !important;
  }
  h1[style*="font-size: 48px"] {
    font-size: 38px !important;
    line-height: 44px !important;
  }
  /* Large counter/stat numbers */
  div[style*="font-size: 52px"] {
    font-size: 40px !important;
  }
  /* Contain all sections to prevent child overflow */
  section, main > div > section, main > div > div > section {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ─── RESPONSIVE: TABLET PORTRAIT (≤768px) ─── */
@media (max-width: 768px) {
  /* All multi-col grids → single column */
  section[style*="grid-template-columns: 1.08fr"],
  section[style*="grid-template-columns: 1.05fr"],
  section[style*="grid-template-columns: 0.9fr"],
  section[style*="grid-template-columns: 0.85fr"],
  section[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 0.9fr"],
  div[style*="grid-template-columns: 0.85fr"],
  div[style*="grid-template-columns: 1.4fr"],
  div[style*="grid-template-columns: repeat(2"],
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns: repeat(5"],
  div[style*="grid-template-columns: repeat(6"],
  ol[style*="grid-template-columns: repeat(5"] {
    grid-template-columns: 1fr !important;
  }
  /* Stats/counter grids keep 2-col on tablet for compact display */
  div[style*="grid-template-columns: repeat(6, 1fr)"][style*="gap: 28px"],
  div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 36px"],
  div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 28px"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Step cards (Program page) */
  [data-step-card] {
    grid-template-columns: 1fr !important;
  }
  [data-step-card] > div[style*="min-height"] {
    min-height: auto !important;
  }
  [data-step-card] img {
    height: 200px !important;
  }
  /* Section padding */
  section[style*="padding: 80px 32px"],
  section[style*="padding: 72px 32px"],
  section[style*="padding: 88px 32px"],
  div[style*="padding: 80px 32px"],
  div[style*="padding: 72px 32px"],
  div[style*="padding: 56px 32px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section[style*="padding: 24px 32px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  div[style*="padding: 20px 32px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Heading scaling */
  h1[style*="font-size: 52px"],
  h1[style*="font-size: 56px"] {
    font-size: 34px !important;
    line-height: 40px !important;
  }
  h1[style*="font-size: 48px"] {
    font-size: 32px !important;
    line-height: 38px !important;
  }
  h2[style*="font-size: 40px"] {
    font-size: 28px !important;
    line-height: 34px !important;
  }
  h2[style*="font-size: 36px"],
  h2[style*="font-size: 34px"] {
    font-size: 24px !important;
    line-height: 30px !important;
  }
  h2[style*="font-size: 32px"] {
    font-size: 24px !important;
    line-height: 30px !important;
  }
  h3[style*="font-size: 28px"] {
    font-size: 22px !important;
    line-height: 28px !important;
  }
  h3[style*="font-size: 26px"] {
    font-size: 22px !important;
    line-height: 28px !important;
  }
  /* Stat counters */
  div[style*="font-size: 52px"] {
    font-size: 36px !important;
  }
  div[style*="font-size: 48px"][style*="font-weight: 800"] {
    font-size: 36px !important;
  }
  div[style*="font-size: 44px"][style*="font-weight: 800"] {
    font-size: 34px !important;
  }
  div[style*="font-size: 64px"] {
    font-size: 44px !important;
  }
  span[style*="font-size: 72px"] {
    font-size: 48px !important;
  }
  /* Large non-heading text (40px counters, stats) */
  div[style*="font-size: 40px"][style*="line-height: 1"] {
    font-size: 32px !important;
  }
  /* 4-module cards */
  article[style*="grid-template-columns: 80px"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Image slots */
  image-slot[style*="height: 460px"],
  image-slot[style*="height: 440px"],
  image-slot[style*="height: 380px"],
  image-slot[style*="height: 340px"] {
    height: 260px !important;
  }
  /* Gap reductions */
  section[style*="gap: 56px"],
  div[style*="gap: 56px"] {
    gap: 32px !important;
  }
  section[style*="gap: 48px"],
  div[style*="gap: 48px"] {
    gap: 28px !important;
  }
  /* Pricing cards */
  div[style*="font-size: 48px"][style*="letter-spacing: -0.02em"] {
    font-size: 40px !important;
  }
  /* Section top/bottom padding */
  section[style*="padding: 80px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  section[style*="padding: 72px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  section[style*="padding: 88px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* Form grids */
  div[style*="grid-template-columns: 1fr 1fr 1fr"][style*="gap: 18px"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"][style*="gap: 10px"] {
    grid-template-columns: 1fr !important;
  }
  /* Body text */
  p[style*="font-size: 18px"] {
    font-size: 16px !important;
    line-height: 26px !important;
  }
  /* Flex wrapping for CTAs */
  div[style*="display: flex"][style*="gap: 14px"] {
    flex-wrap: wrap !important;
  }
  /* Social proof flex gap */
  div[style*="display: flex"][style*="gap: 48px"] {
    gap: 32px !important;
  }
  /* Social proof stats — stack on narrow tablets */
  div[style*="display: flex"][style*="gap: 48px"] {
    flex-wrap: wrap !important;
  }
  /* Prevent justify-content:space-between from over-spreading on single-col */
  div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
    gap: 24px !important;
  }
  /* Roadmap vertical adjustments */
  .yell-roadmap {
    max-width: 100% !important;
  }
  /* Nav container padding */
  header > div[style*="padding: 16px 32px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Ensure all grid children don't overflow parent */
  [style*="display: grid"] > * {
    min-width: 0;
  }
  /* Reduce large vertical gaps when items stack */
  section[style*="gap: 48px"],
  div[style*="gap: 48px"] {
    gap: 32px !important;
  }
  section[style*="gap: 40px"],
  div[style*="gap: 40px"] {
    gap: 28px !important;
  }
}

/* ─── RESPONSIVE: MOBILE (≤480px) ─── */
@media (max-width: 480px) {
  /* Tighter padding */
  section[style*="padding: 80px 32px"],
  section[style*="padding: 72px 32px"],
  section[style*="padding: 88px 32px"],
  div[style*="padding: 80px 32px"],
  div[style*="padding: 72px 32px"],
  div[style*="padding: 56px 32px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Section wrappers are divs (max-width:1200px; padding:80px 32px) — the
     section[...] vertical rules below never reach them, so they kept the full
     desktop 80px top+bottom on a phone. */
  div[style*="padding: 80px 32px"],
  div[style*="padding: 72px 32px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  section[style*="padding: 24px 32px"],
  div[style*="padding: 20px 32px"],
  div[style*="padding: 12px 24px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Even smaller headings */
  h1[style*="font-size: 52px"],
  h1[style*="font-size: 56px"] {
    font-size: 28px !important;
    line-height: 34px !important;
  }
  h1[style*="font-size: 48px"] {
    font-size: 26px !important;
    line-height: 32px !important;
  }
  h2[style*="font-size: 40px"] {
    font-size: 24px !important;
    line-height: 30px !important;
  }
  h2[style*="font-size: 36px"],
  h2[style*="font-size: 34px"],
  h2[style*="font-size: 32px"] {
    font-size: 22px !important;
    line-height: 28px !important;
  }
  h3[style*="font-size: 28px"],
  h3[style*="font-size: 26px"] {
    font-size: 20px !important;
    line-height: 26px !important;
  }
  h3[style*="font-size: 24px"] {
    font-size: 19px !important;
    line-height: 25px !important;
  }
  /* Stat counters */
  div[style*="font-size: 52px"] {
    font-size: 30px !important;
  }
  div[style*="font-size: 48px"][style*="font-weight: 800"],
  div[style*="font-size: 48px"][style*="line-height: 1"] {
    font-size: 32px !important;
  }
  div[style*="font-size: 44px"][style*="font-weight: 800"],
  div[style*="font-size: 44px"][style*="line-height: 1"] {
    font-size: 28px !important;
  }
  div[style*="font-size: 40px"][style*="line-height: 1"] {
    font-size: 26px !important;
  }
  span[style*="font-size: 40px"][style*="font-weight: 800"] {
    font-size: 28px !important;
  }
  /* Stats grids keep 2-col on mobile */
  div[style*="grid-template-columns: repeat(6, 1fr)"][style*="gap: 28px"],
  div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 36px"],
  div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 28px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 16px !important;
  }
  /* Section top/bottom padding */
  section[style*="padding: 80px"],
  section[style*="padding: 88px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  section[style*="padding: 72px"] {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  section[style*="padding: 64px"] {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  /* Card padding */
  div[style*="padding: 44px 36px"],
  div[style*="padding: 44px 40px"] {
    padding: 28px 20px !important;
  }
  div[style*="padding: 40px"] {
    padding: 24px !important;
  }
  div[style*="padding: 36px"] {
    padding: 24px 20px !important;
  }
  div[style*="padding: 32px"][style*="border-radius"] {
    padding: 22px 18px !important;
  }
  /* Image slots smaller */
  image-slot[style*="height: 460px"],
  image-slot[style*="height: 440px"],
  image-slot[style*="height: 380px"],
  image-slot[style*="height: 340px"] {
    height: 200px !important;
  }
  image-slot[style*="height: 260px"],
  image-slot[style*="height: 240px"] {
    height: 180px !important;
  }
  /* CTA buttons full width on mobile — horizontal button rows only.
     Exclude column layouts (e.g. the footer Contact list) so their links
     aren't stretched and centre-aligned. */
  div[style*="display: flex"][style*="gap: 14px"]:not([style*="flex-direction: column"]) > a,
  div[style*="display: flex"][style*="gap: 12px"]:not([style*="flex-direction: column"]) > a {
    flex: 1 1 100% !important;
    text-align: center !important;
  }
  /* Tags / pills wrap */
  div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 10px"] {
    gap: 8px !important;
  }
  /* Timeline phase cards */
  div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 16px"],
  div[style*="grid-template-columns: repeat(2, 1fr)"][style*="gap: 16px"] {
    grid-template-columns: 1fr !important;
  }
  /* Body text on mobile */
  p[style*="font-size: 17px"] {
    font-size: 15px !important;
    line-height: 24px !important;
  }
  /* Social proof flex gap */
  div[style*="display: flex"][style*="gap: 48px"] {
    gap: 24px !important;
  }
  /* Pricing large number */
  div[style*="font-size: 48px"][style*="letter-spacing: -0.02em"] {
    font-size: 36px !important;
  }
  /* Footer bottom bar */
  div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  /* Social proof stats — fully stack on mobile */
  div[style*="display: flex"][style*="gap: 48px"] {
    flex-direction: column !important;
    gap: 16px !important;
  }
  /* Reduce stacked grid gaps further */
  section[style*="gap: 48px"],
  div[style*="gap: 48px"] {
    gap: 24px !important;
  }
  section[style*="gap: 40px"],
  div[style*="gap: 40px"] {
    gap: 20px !important;
  }
  section[style*="gap: 32px"],
  div[style*="gap: 32px"] {
    gap: 18px !important;
  }
  /* Nav container tight padding */
  header > div[style*="padding: 16px 32px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Apply form section padding */
  section[style*="padding: 32px 32px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Ensure all grid children don't overflow */
  [style*="display: grid"] > * {
    min-width: 0;
    max-width: 100%;
  }
  /* Pricing tier max-width fits mobile */
  div[style*="grid-template-columns: repeat(3, 1fr)"][style*="align-items: stretch"] {
    max-width: 100% !important;
  }
  /* Reduce large inner padding on mobile */
  div[style*="padding: 32px 24px"],
  div[style*="padding: 28px 24px"] {
    padding: 22px 16px !important;
  }
  /* 4-col grids fall to a single column (inherited from the 768px block).
     Only short-label tiles opt back into 2-up: Apply contact cards (gap 16px)
     and the Universities stat cards (gap 28px). The Mentors core-team cards
     are excluded — a 52px avatar plus a name in a ~163px column clips longer
     names ("Catherine Kotsiopoulou") against the card edge. */
  div[style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 28px"],
  div[style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 16px"]:not(:has([data-mentor-card])) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Belt-and-braces: never let a long name push out of its card. */
  [data-mentor-card] > div {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  /* Image slots full width safety. Circle/pill slots are excluded: they are
     square avatars sized in px, and stretching them to 100% width makes the
     50% border-radius render as an ellipse (see image-slot.js shape docs). */
  image-slot:not([shape="circle"]):not([shape="pill"]) {
    width: 100% !important;
    height: auto !important;
    min-height: 180px;
  }
  /* Footer grid extra tight */
  div[style*="padding: 56px 32px"] {
    padding: 36px 16px 28px !important;
  }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .yell-hover:hover,
  .yell-hover-dark:hover,
  .yell-tier-hover:hover,
  .yell-mentor-hover:hover,
  .yell-module-hover:hover,
  .yell-step-card:hover,
  .yell-timeline-hover:hover {
    transform: none;
  }
  details summary span:last-child {
    transition: none;
  }
  .yell-digit-strip {
    transition: none !important;
  }
  .yell-roadmap-step {
    opacity: 1 !important;
    transform: none !important;
  }
  .yell-roadmap-progress {
    transition: none !important;
  }
  [data-parallax] {
    transition: none !important;
  }
}