/* Load after the homepage's legacy critical CSS. Keep the hero content-led:
   a viewport-height cap clips its two-row mobile stats and enlarged text. */
.hero {
  height: auto;
  max-height: none;
  min-height: min(80vh, 650px);
  min-height: min(80svh, 650px);
  padding: 64px 0 104px;
}

.hero-wrapper,
.hero-content,
.hero-text-col {
  min-width: 0;
}

.hero-content {
  padding: 0;
}

.hero-text-col,
.hero-stats {
  padding-right: 0;
}

.hero-actions {
  margin-bottom: 0;
}

.hero-actions .btn {
  max-width: 100%;
  white-space: normal;
}

.hero-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hero-stats .stat {
  min-width: 0;
}

@media (max-width: 768px) {
  .header .nav {
    max-width: 100%;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .hero {
    margin-top: 64px;
    min-height: 0;
    padding: 48px 0 88px;
  }

  .hero-wrapper {
    padding-inline: 20px;
  }

  .hero-text-col {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  .hero-actions {
    gap: 12px;
    align-items: stretch;
  }

  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 32px;
    padding-top: 24px;
  }

  .hero .hero-wave {
    height: 48px;
  }

  /* Override fixed inline dimensions in the legacy homepage markup. */
  .about-card {
    padding: 32px 20px !important;
  }

  .about-flex {
    flex-direction: column;
  }

  .about-text-col {
    min-width: 0 !important;
    width: 100%;
    overflow-wrap: anywhere;
  }

  .about-img-col {
    flex: 0 1 auto !important;
    width: 200px;
    max-width: 100%;
  }
}