/* Keep the hero, support card and product search in normal document flow. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(17.5rem,21.25rem);gap:clamp(2rem,4vw,4rem);padding:clamp(4rem,7vw,6.25rem) 6%;align-items:center}
.hero-content{min-width:0}
.hero-card{position:relative;inset:auto;z-index:1;align-self:end;width:100%;min-width:0;padding:2rem;border:1px solid #dce7ee;border-radius:16px;box-shadow:0 12px 32px #001b2e1a}
.hero-card span{font-size:.75rem;line-height:1.5}
.hero-card strong{font-size:1.625rem;line-height:1.2;margin:12px 0}
.hero-card p{font-size:1rem;line-height:1.6;margin:0 0 16px}
.hero-card a{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;line-height:1.4}
.home-product-search{padding:32px 6% 0}
.home-product-search form{max-width:1180px}
.home-product-search label{line-height:1.4}
.home-search-field button{flex-shrink:0;cursor:pointer}
.home-product-search + .intro{margin-top:64px}

@media(max-width:900px){
  .hero{min-height:0;grid-template-columns:minmax(0,1fr);gap:32px;padding:56px 6% 32px}
  .hero-card{align-self:stretch}
  .home-product-search{padding-top:24px}
  .home-product-search + .intro{margin-top:48px}
}

@media(max-width:560px){
  .hero{padding-top:48px;gap:28px}
  .hero-card{padding:24px}
  .home-product-search form{padding:20px;border-radius:16px}
  .home-product-search label{font-size:1.25rem;margin-bottom:16px}
}