/* Fluid hero rules: the six-stage experience scales smoothly between the
   practical phone, tablet, laptop, and large-desktop ranges. */
.hero {
  /* Give the calls-to-action, keyboard, and scroll cue separate space instead
     of compressing them into a short laptop viewport. */
  min-height: clamp(840px, 92svh, 980px);
  padding-inline: clamp(24px, 10vw, 168px);
}

.hero-copy {
  max-width: min(790px, 62vw);
}

.hero .lede {
  max-width: min(540px, 48vw);
}

.scroll-note {
  left: clamp(24px, 10vw, 168px);
}

@media (min-width: 751px) and (max-width: 1100px) {
  .hero {
    min-height: clamp(740px, 96svh, 880px);
    padding: 155px 7vw 82px;
  }

  .hero-copy { max-width: min(630px, 68vw); }
  .hero .lede { max-width: min(490px, 56vw); }
  .hero-mark { right: 5vw; bottom: 118px; transform: scale(.84); transform-origin: right bottom; }
  .scroll-note { left: 7vw; }
}

@media (max-width: 750px) {
  .hero {
    min-height: clamp(700px, 100svh, 840px);
    padding: clamp(112px, 17vh, 142px) 7vw 72px;
  }

  .hero-copy,
  .hero .lede { max-width: 100%; }

  .hero .lede { font-size: clamp(13px, 3.6vw, 16px); }
  .scroll-note { left: 7vw; }
}

@media (max-width: 430px) {
  .hero { min-height: max(720px, 100svh); }
  .hero h1 { font-size: clamp(42px, 13.2vw, 56px); }
  .hero .actions { gap: 10px; }
  .hero .actions .button { min-width: 0; padding-inline: 14px; }
}

@media (min-width: 1600px) {
  .hero { min-height: min(980px, 94svh); }
  .hero-copy { max-width: 840px; }
  .hero .lede { max-width: 590px; font-size: 17px; }
}