/* Final launch-readiness refinements. */

:focus-visible {
  outline: 3px solid #c7f36b;
  outline-offset: 3px;
}

.hero {
  height: min(900px, calc(100svh - 34px));
  min-height: 700px;
  max-height: 900px;
}

.hero-media {
  background:
    linear-gradient(90deg, rgba(2, 15, 17, .96) 0%, rgba(2, 15, 17, .84) 40%, rgba(2, 15, 17, .28) 76%, rgba(2, 15, 17, .20) 100%),
    linear-gradient(0deg, rgba(2, 15, 17, .48), transparent 48%),
    url('../images/production-line-bottles.webp') center / cover;
}

.hero-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 116px;
  padding-bottom: 72px;
}

.hero-note,
.footer-top > p,
.footer-links a,
.footer-links span,
.footer-bottom,
.process-step p {
  color: #a9b9b7;
}

.solution-card p,
.info-card p,
.section-heading > p,
.codes-copy > p:not(.kicker),
.contact-copy > p:not(.kicker) {
  color: #b7c5c3;
}

.lead-modal[hidden] {
  display: none !important;
}

.modal-card {
  border-top: 4px solid #1bc7ad;
}

@media (max-width: 980px) {
  .hero {
    height: min(860px, calc(100svh - 34px));
    min-height: 700px;
    max-height: 860px;
  }

  .hero-content {
    padding-top: 108px;
    padding-bottom: 60px;
  }
}

@media (max-width: 760px) {
  .hero {
    height: 100svh;
    min-height: 0;
    max-height: 820px;
  }

  .hero-media {
    background:
      linear-gradient(90deg, rgba(2, 15, 17, .94), rgba(2, 15, 17, .58)),
      url('../images/production-line-bottles.webp') 63% center / cover;
  }

  .hero-content {
    padding-top: 100px;
    padding-bottom: 36px;
  }

  .hero-proof {
    margin-top: 28px;
  }
}

@media (max-height: 760px) and (min-width: 761px) {
  .hero {
    min-height: min(620px, calc(100svh - 34px));
  }

  .hero-content {
    padding-top: 100px;
    padding-bottom: 38px;
  }

  .hero h1 {
    font-size: clamp(48px, 6vw, 68px);
    margin-bottom: 20px;
  }

  .hero-lead {
    font-size: 16px;
    margin-bottom: 22px;
  }

  .hero-proof {
    margin-top: 28px;
  }

  .scroll-cue {
    bottom: 24px;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .hero-content {
    padding-top: 78px;
    padding-bottom: 22px;
  }

  .hero .eyebrow {
    margin-bottom: 14px;
  }

  .hero h1 {
    font-size: 36px;
    margin-bottom: 17px;
  }

  .hero-lead {
    font-size: 14px;
    line-height: 1.48;
    margin-bottom: 17px;
  }

  .hero-proof,
  .hero-note {
    display: none;
  }

  .hero .button {
    min-height: 45px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}