.hero {
  position: relative;
  /* Hero's button uses its own slower ramp token (see decisions.md). */
  --button-cta-font-size: var(--font-size-button-l);
}

.hero__layout--mobile,
.hero__layout--desktop {
  padding-top: var(--header-height);
  padding-inline: var(--section-padding-x);
}
@media (max-width: 988px) {
  .hero__layout--mobile,
  .hero__layout--desktop {
    padding-top: var(--header-height-mobile);
    padding-inline: var(--section-padding-x-mobile);
  }
}

.hero__layout--mobile {
  display: none;
}

.hero__layout--desktop {
  display: flex;
  flex-direction: row;

  /* The media box takes the card's height from the row itself, so the
     first paint already has it; init() then sets the same number. */
  align-items: stretch;

  justify-content: center;

  gap: clamp(10px, calc(-0.405px + 1.48649vw), 21px);
  /* The section-spacing token's phone end, flat (her call: less air
     under the hero) — not the token itself. */
  padding-bottom: 120px;
}

.hero__card {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 112px;

  flex: 0 1 650px;
  min-width: 580px;
  padding: clamp(30px, calc(26.29px + 0.952vw), 40px)
           clamp(30px, calc(18.86px + 2.857vw), 60px)
           clamp(30px, calc(18.86px + 2.857vw), 60px);
  background: var(--color-cards-bg);
  border-radius: var(--radius-big);
}

@media (max-width: 988px) {
  .hero__card {
    border-radius: var(--radius-big-mobile);
  }
}

.hero__card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  gap: 112px;
}

.hero__tags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 4px;
}
.hero__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 15px;
  border-radius: var(--radius-label);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-label-m);
  white-space: nowrap;
}
.hero__tag--accent {
  background: var(--color-accent);
}
/* The course card's own offline colour, not a second purple. */
.hero__tag--offline {
  background: var(--color-pill-offline);
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: center;
  color: var(--color-text);
}
.hero__title {
  /* Two lines of a kind: without it the phone leaves "PRO" alone under
     a full line (her call, 2026-10-06). */
  text-wrap: balance;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-h1-hero);
  line-height: 0.97;
  letter-spacing: -0.01em;
}
.hero__body {
  margin: 0;
  width: 100%;
  max-width: 456px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-hero);
  line-height: 1.4;
}

.hero__actions {
  position: relative;
  width: 100%;
}

/* Layout-transparent: keeps .button-cta the actual flow child of
   .hero__actions, this only carries the enroll-modal trigger attributes. */
.hero__cta-trigger { display: contents; }

.hero__illustration {
  position: absolute;
  left: 20px;
  top: -59px;
  width: 132px;
  height: 71px;
  pointer-events: none;
}
.hero__illustration img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__video {
  flex: 1 1 300px;
  min-width: 280px;

  min-height: 0;
  /* The box's own shape until init() measures the card and takes over.
     Without it the first paint has no height of its own and the video
     is drawn to its file's size, then jumps. */
  aspect-ratio: 651 / 662;
  border-radius: 32px;
  overflow: hidden;
  background: var(--color-bg);
}
.hero__video video,
.hero__video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Media that must not be cut: shown whole, the box's own background
   fills the rest (the page passes the colour). Her call: it sits on the
   bottom edge and runs 20% over each side — at 150% it starts cutting
   the ears, hers to re-judge if the picture changes. */
.hero__video--whole video,
.hero__video--whole img {
  object-fit: contain;
  object-position: bottom;
  width: 140%;
  /* base.css caps images at the box width; without this the 140% above
     does nothing for a page that passes an image. */
  max-width: none;
  margin-inline: -20%;
}

@media (max-width: 1100px) {
  .hero__layout--desktop {
    flex-direction: column;
  }
  .hero__card {
    flex: none;
    min-width: 0;
    width: 100%;
  }
  .hero__video {
    flex: none;
    min-width: 0;
    width: 100%;
    max-width: none;
    /* Stacked, init() caps the height at the media's own 662; the cap
       is here too, or a wide tablet paints a taller box first. */
    max-height: 662px;
  }
}

@media (max-width: 700px) {
  .hero__layout--desktop {
    display: none;
  }
  .hero__layout--mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    padding-bottom: 120px;
  }

  .hero__card {
    align-items: flex-start;
  }
  .hero__card-top {
    align-items: flex-start;

    gap: 36px;
  }
  .hero__text {
    align-items: flex-start;
    text-align: left;
  }

  .hero__badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .hero__badges-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .hero__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;

    padding: 8px min(16px, 4.103vw);
    border-radius: 54px;
    background: #ffffff;
    color: #0f0f10;
    font-family: var(--font-primary);
    font-weight: 400;

    font-size: clamp(12px, 3.59vw, 14px);
    white-space: nowrap;
  }
  .hero__badge--wide {
    flex: none;
    width: 100%;
    padding: 8px min(10px, 2.564vw);
  }
}