/* Home page: hero on the blue cover and the section backgrounds. Components live in components.css. */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;min-height:540px;padding-block:40px 64px}
.hero-copy{position:relative;z-index:2;max-width:600px}
.hero-pretitle{font-size:14px;margin-bottom:24px;display:flex;align-items:center;gap:10px;opacity:.92}
.hero-pretitle::before{content:"";width:22px;height:1px;background:currentColor}
.hero h1{font-size:clamp(44px,4.6vw,64px);line-height:1.02;letter-spacing:-1.6px;font-weight:300;margin-bottom:26px}
.hero h1 strong{display:block;font-weight:500}
.hero-description{max-width:500px;font-size:18px;line-height:1.6;margin-bottom:32px;color:#ffffffe6}
.hero-actions .button-white{min-height:50px;padding-inline:30px;font-size:14px}

.embedded-section{background:var(--tint-warm)}
.steps-section{background:var(--tint-soft)}
.faq-section{border-top:1px solid var(--border)}

@media (max-width:920px){
  .hero{grid-template-columns:1fr}
}
@media (max-width:720px){
  .hero{padding-block:24px 8px;min-height:0}
  .hero h1{font-size:clamp(36px,10.5vw,48px);letter-spacing:-1px;text-wrap:balance}
  .hero-description{font-size:16px}
}