.hero-video {
  /* Header→card gap: 8 in the desktop frame, 0 in the mobile one. */
  padding-top: calc(var(--header-height) + clamp(0px, calc(-7.57px + 1.081vw), 8px));
  padding-inline: var(--section-padding-x);
  padding-bottom: 120px; /* her flat 120, not the token — the token read as a hole */
  /* Insets shared by both compositions: the button's on desktop, the
     title's on mobile (48/51 → 26/28). */
  --hero-video-inset-x: clamp(26px, calc(5.19px + 2.973vw), 48px);
  --hero-video-inset-bottom: clamp(28px, calc(6.24px + 3.108vw), 51px);
  /* Hero's slower button ramp (see decisions.md), not the CTA token. */
  --button-cta-font-size: var(--font-size-button-l);
}
@media (max-width: 988px) {
  .hero-video {
    padding-top: calc(var(--header-height-mobile) + clamp(0px, calc(-7.57px + 1.081vw), 8px));
    padding-inline: var(--section-padding-x-mobile);
  }
}

/* Three rows: free space, title, button. The video spans all three on
   desktop and the first two on mobile, where the button drops out
   under it; its height sizes the fr row, so the card needs none. */
.hero-video__card {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr auto auto;
}
.hero-video__video {
  grid-row: 1 / 4;
  grid-column: 1;
  width: 100%;
  height: clamp(525px, calc(454.05px + 10.135vw), 600px);
  object-fit: cover;
  border-radius: var(--radius-big);
}
@media (max-width: 988px) {
  .hero-video__video { border-radius: var(--radius-big-mobile); }
}
.hero-video__title {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  margin: 0 var(--hero-video-inset-x);
  color: var(--color-cards-bg);
  font-family: var(--font-primary);
  font-weight: 500;
  /* Ramps over 390→1440, not the sitewide 700→1440 — her call, as the
     course hero: the standard ramp shrank it too fast. */
  font-size: clamp(42.88px, calc(29.09px + 3.535vw), 80px);
  line-height: 0.87;
  letter-spacing: -0.03em;
  /* The frames' 4/4/5.4 at 80px and 2.1/2.1/2.9 at 42.88 — it scales. */
  text-shadow: 0.05em 0.05em 0.0675em rgba(0, 0, 0, 0.05);
}
/* The shared CTA fills its container, so the container hugs the label. */
.hero-video__cta {
  grid-row: 3;
  grid-column: 1;
  position: relative;
  width: fit-content;
  margin: 35px var(--hero-video-inset-x) var(--hero-video-inset-bottom);
}

/* Mobile composition (the ramp's foot, where the mobile values land):
   the button leaves the card. */
@media (max-width: 699.98px) {
  .hero-video__video { grid-row: 1 / 3; }
  .hero-video__title {
    margin-bottom: var(--hero-video-inset-bottom);
    line-height: 0.98;
  }
  .hero-video__cta {
    width: auto;
    margin: 16px 0 0;
  }
}