@media (min-width: 941px) {
  body.home-page {
    overflow-y: auto;
  }

  main.home-active {
    height: auto;
    min-height: 0;
    padding: 0 24px 48px;
    overflow: visible;
  }

  main.home-active .hero-accent {
    height: calc(100dvh - 70px);
    min-height: 0;
    margin: 0 -24px;
    padding-bottom: 0;
    border-bottom: 1px solid #126fc6;
  }

  main.home-active .hero-copy {
    position: relative;
    height: 100%;
  }

  main.home-active .hero-login-actions {
    position: absolute !important;
    right: 0 !important;
    bottom: 72px !important;
    left: 0 !important;
    margin: 0 !important;
    z-index: 5;
  }

  body.home-page footer {
    position: static;
  }
}

.homepage-how-it-works {
  margin-top: 0;
  padding-top: 16px;
  scroll-margin-top: 86px;
}

.homepage-how-it-works .how-summary {
  margin-bottom: 0 !important;
}

.homepage-how-it-works .how-summary-card {
  min-height: 190px !important;
}

.homepage-how-it-works .cards {
  margin-top: 0 !important;
  transform: translateY(-28px);
  margin-bottom: -28px;
}

/* Keep the label in normal flow instead of drawing it over the approved copy.
   Heading normalization copies computed styles inline, so these layout rules
   deliberately take precedence without changing the text or typography. */
.home-process.homepage-how-it-works .how-summary-card:has(> .how-it-works-label) {
  display: block !important;
}
.home-process.homepage-how-it-works .how-it-works-label {
  position: static !important;
  display: block !important;
  margin: 0 0 12px !important;
  text-align: left !important;
}
.home-process.homepage-how-it-works .how-primary-message {
  transform: none !important;
}

@media (max-width: 940px) {
  /* A nowrap animated wordmark must not set the grid's minimum width. */
  main.home-active .hero-accent {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  main.home-active .hero-copy {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  main.home-active .hero-copy .animated-brand {
    font-size: clamp(16px, 5.4vw, 32px) !important;
  }
  main.home-active .hero-preparedness,
  main.home-active .hero-tagline {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 650px) {
  main.home-active .hero-login-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  main.home-active .hero-login-actions .button span {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}