/* Keeps the opening hero balanced on narrow screens. */
@media (max-width: 760px) {
  .top-nav {
    min-height: 64px;
  }

  .hero {
    display: block !important;
    min-height: calc(100svh - 64px) !important;
    padding: 0 !important;
  }

  .hero-content {
    align-items: center !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    min-height: calc(100svh - 64px);
    padding: 48px 20px 112px !important;
    width: 100% !important;
  }

  .hero-logo {
    height: 70px !important;
    margin: 0 auto 12px !important;
    width: 150px !important;
  }

  .hero .eyebrow {
    margin: 0 0 14px !important;
  }

  .hero h1 {
    margin: 0 auto !important;
    max-width: 340px;
  }

  .hero h1 small {
    font-size: clamp(25px, 7.2vw, 32px) !important;
    line-height: 1.06 !important;
  }

  .hero h1 em {
    font-size: 39px !important;
    line-height: .68 !important;
    margin: 3px 0 !important;
  }

  .hero-date {
    margin: 20px 0 17px !important;
  }

  .countdown {
    gap: 7px !important;
    margin-top: 0 !important;
  }

  .countdown span {
    height: 54px !important;
    width: 54px !important;
  }

  .hero:after {
    bottom: -10px !important;
    height: 390px !important;
    opacity: .18 !important;
    width: min(72vw, 290px) !important;
  }

  .scroll-hint {
    bottom: 22px !important;
  }
}

@media (max-width: 360px) {
  .hero-content { padding-inline: 12px !important; }
  .countdown { gap: 5px !important; }
  .countdown span { height: 50px !important; width: 50px !important; }
}