/* Homepage recovery layer. Keep account/admin pages untouched.
   Use normal document flow so controls cannot be covered by viewport overlays. */

.home-page,
.home-page:not(:has(#result > *)) {
  height: auto !important;
  min-height: 100svh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.home-page .home-main,
.home-page:not(:has(#result > *)) .home-main {
  width: min(1240px, calc(100% - 40px));
  height: auto !important;
  min-height: 0 !important;
  margin-inline: auto;
  display: block !important;
  overflow: visible !important;
}

.home-page .hero-copy,
.home-page .search-heading,
.home-page .allowance-bar,
.home-page .trust-row,
.home-page .homepage-footer-note,
.home-page .homepage-footer-note > div {
  text-align: center;
}

.home-page .search-heading,
.home-page .trust-row {
  justify-content: center;
}

.home-page .trust-row {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 8px;
}

.home-page .trust-row > span {
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

.home-page .homepage-footer-note {
  width: 100%;
  margin: 0;
  padding: 10px 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.home-page .homepage-footer-note p {
  max-width: 760px;
  margin: 3px auto 0;
}

/* Desktop: compact header + two-column checker + government note in the first screen
   on normal laptop/desktop heights. Shorter screens may scroll rather than clip content. */
@media (min-width: 821px) {
  .home-page .site-header.home-header {
    width: min(1240px, calc(100% - 40px));
    min-height: 78px !important;
    height: auto !important;
    margin: 0 auto;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    position: relative !important;
    z-index: 20;
    border-bottom: 1px solid var(--line) !important;
  }

  .home-page .brand {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .home-page .brand img {
    width: 180px !important;
    max-width: 28vw !important;
    height: auto !important;
  }

  .home-page .home-header-actions {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .home-page .hero-shell,
  .home-page:not(:has(#result > *)) .hero-shell {
    width: 100%;
    height: auto !important;
    min-height: calc(100dvh - 158px) !important;
    padding: clamp(10px, 1.7vh, 18px) 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.78fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: clamp(28px, 4.5vw, 62px) !important;
  }

  .home-page .hero-copy h1 {
    max-width: 650px;
    margin-inline: auto;
    font-size: clamp(40px, 4.7vw, 66px) !important;
    line-height: 1 !important;
  }

  .home-page .hero-copy > p {
    max-width: 650px;
    margin: 10px auto 0 !important;
    font-size: clamp(14px, 1.2vw, 17px) !important;
    line-height: 1.42 !important;
  }

  .home-page .search-panel {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(16px, 1.8vw, 21px) !important;
    border-radius: 22px !important;
  }

  .home-page .plate {
    height: clamp(62px, 7.8vh, 72px) !important;
  }

  .home-page .primary-button {
    min-height: 46px !important;
    margin-top: 9px !important;
  }

  .home-page .homepage-footer-note {
    min-height: 70px;
    padding: 9px 0 11px !important;
  }

  .home-page .homepage-footer-note strong {
    font-size: 13px;
  }

  .home-page .homepage-footer-note p {
    font-size: 11px;
    line-height: 1.3;
  }

  .home-page .homepage-footer-note a {
    flex: 0 0 auto;
    font-size: 11px;
    white-space: nowrap;
  }
}

/* Mobile: logo and garage/sign-in button are centred in normal flow.
   No z-index stacking or fixed viewport height is used, so every control remains tappable. */
@media (max-width: 820px) {
  .home-page .site-header.home-header {
    width: min(100% - 24px, 720px);
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    position: static !important;
    overflow: visible !important;
    border-bottom: 0 !important;
  }

  .home-page .brand {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
  }

  .home-page .brand img {
    width: clamp(142px, 42vw, 180px) !important;
    max-width: 52vw !important;
    height: auto !important;
  }

  .home-page .home-header-actions {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
  }

  .home-page .home-header-actions .header-action {
    min-width: 140px !important;
    min-height: 48px !important;
    padding: 0 22px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    position: static !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .home-page .home-main,
  .home-page:not(:has(#result > *)) .home-main {
    width: min(100% - 24px, 720px);
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    overflow: visible !important;
    position: static !important;
  }

  .home-page .hero-shell,
  .home-page:not(:has(#result > *)) .hero-shell {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 0 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 16px !important;
  }

  .home-page .hero-copy .eyebrow {
    display: none !important;
  }

  .home-page .hero-copy h1 {
    margin: 0;
    font-size: clamp(30px, 8.6vw, 40px) !important;
    line-height: 1.02 !important;
  }

  .home-page .hero-copy > p {
    max-width: 620px;
    margin: 6px auto 0 !important;
    padding: 0 4px;
    font-size: clamp(11px, 3.2vw, 14px) !important;
    line-height: 1.35 !important;
  }

  .home-page .search-panel {
    width: 100%;
    margin: 0 auto;
    padding: 13px !important;
    border-radius: 20px !important;
    position: static !important;
  }

  .home-page .allowance-bar {
    min-height: 44px;
    margin: 0 0 8px !important;
    padding: 7px 9px !important;
  }

  .home-page .plate {
    height: 58px !important;
    border-radius: 13px !important;
  }

  .home-page .plate input {
    font-size: clamp(26px, 8vw, 35px) !important;
    text-align: center;
  }

  .home-page .primary-button {
    min-height: 48px !important;
    margin-top: 9px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .home-page .trust-row {
    gap: 4px;
  }

  .home-page .trust-row > span {
    font-size: clamp(8px, 2.5vw, 10px);
  }

  .home-page .homepage-footer-note {
    padding: 12px 4px 18px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .home-page .homepage-footer-note strong {
    font-size: 11px !important;
  }

  .home-page .homepage-footer-note p {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  .home-page .homepage-footer-note a {
    font-size: 10px !important;
  }
}

/* Results always use natural scrolling. */
.home-page:has(#result > *) .home-main,
.home-page:has(#result > *) .hero-shell {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}