@media (min-width: 1280px) {
  .hero-title {
    font-size: clamp(62px, 5.2vw, 66px);
  }
}

@media (max-width: 1023px) {
  :root {
    --header-pad-x: 24px;
    --hero-pad-x: 28px;
    --hero-pad-top: 40px;
    --heading-size: clamp(48px, 7vw, 60px);
    --heading-mt: 20px;
    --desc-mt: 20px;
    --badge-mt: 20px;
    --button-mt: 20px;
    --trust-mt: 16px;
    --note-mt: 32px;
    --card-gutter: 32px;
    --card-mt: 36px;
    --card-pad: 32px 28px 28px;
    --page-bottom: 48px;
  }
}

@media (max-width: 767px) {
  :root {
    --header-height: 64px;
    --header-pad-x: 18px;
    --logo-size: 18px;
    --status-size: 8.5px;
    --status-tracking: 1.4px;
    --hero-pad-top: 28px;
    --hero-pad-x: 20px;
    --eyebrow-size: 10px;
    --eyebrow-tracking: 1.5px;
    --heading-size: clamp(38px, 10.5vw, 48px);
    --heading-tracking: -1px;
    --heading-mt: 16px;
    --desc-size: 15px;
    --desc-line: 1.5;
    --desc-mt: 16px;
    --badge-mt: 16px;
    --button-mt: 18px;
    --button-width: min(280px, 100%);
    --button-height: 48px;
    --trust-max: 330px;
    --trust-mt: 14px;
    --note-mt: 24px;
    --note-line: 1.55;
    --card-gutter: 24px;
    --card-pad: 28px 20px 24px;
    --card-mt: 28px;
    --form-mt: 20px;
    --form-gap: 14px;
    --form-columns: 1fr;
    --form-row-gap: 14px;
    --page-bottom: 36px;
    --footer-pad-y: 18px;
  }

  .availability-badge,
  .limited-pill {
    height: auto;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 11px;
  }

  .trust-line {
    text-align: left;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .choice-row {
    gap: 8px;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    padding-inline: var(--header-pad-x);
  }

  .site-footer__copy {
    text-align: left;
  }
}

@media (max-width: 479px) {
  :root {
    --header-pad-x: 14px;
    --logo-size: 17px;
    --status-size: 8px;
    --status-tracking: 1.2px;
    --status-dot: 6px;
    --status-gap: 6px;
    --hero-pad-x: 16px;
    --hero-pad-top: 22px;
    --heading-size: clamp(34px, 11vw, 42px);
    --heading-mt: 14px;
    --desc-mt: 14px;
    --card-gutter: 20px;
    --card-pad: 24px 16px 20px;
    --card-heading: 26px;
    --form-gap: 12px;
    --form-row-gap: 12px;
    --choice-min-height: 42px;
  }

  .site-footer__copy {
    font-size: 11px;
  }
}

@media (max-width: 359px) {
  :root {
    --header-height: 58px;
    --hero-pad-top: 18px;
    --card-gutter: 16px;
    --card-pad: 20px 14px 18px;
  }

  .launch-header {
    gap: 8px;
  }

  .launch-status {
    letter-spacing: 1px;
  }
}