.courses {
  padding-bottom: var(--section-spacing);
}
/* On a course page it closes the page, after Free Consultation: her flat 120. */
.courses--other {
  padding-bottom: 120px;
}
.courses__cta {
  margin-top: var(--gap-content-to-cta);
  padding-inline: var(--section-padding-x);
}
@media (max-width: 988px) {
  .courses__cta { padding-inline: var(--section-padding-x-mobile); }
}
/* Equal card heights so the pill rows line up; the shared track hugs. */
.courses .scroll-track {
  align-items: stretch;
}
.courses .course-card {
  flex: none;
  scroll-snap-align: start;
  /* PROPOSED mobile anchor: 340 at 390, her main mobile width (her
     call — 305, borrowed from Teachers, read too narrow). The frame is
     1440 only, so the ramp runs 340@390 → 427@1440; recompute both ends
     together. The min keeps 20 of the next card showing below 390, where
     the page zooms instead of reflowing — it binds under 351 only. */
  width: min(calc(100vw / var(--zoom) - 50px), clamp(340px, calc(307.686px + 8.2857vw), 427px));
}