/* Align both columns at their start: a taller action column must not push the
   headline away from the brand. These rules affect the landing hero only. */
.site-header{padding-block:16px}
.product-hero{padding-top:12px}
.product-hero>.hero-intro{align-items:start;gap:48px;margin-bottom:30px}
.hero-title .hero-title-line{display:block;color:var(--text)}
.hero-title .hero-title-accent{color:#52765a}
.hero-reveal{display:inline-block}
.hero-context{padding-top:2px}
.hero-context>p{font-size:14px;line-height:1.8;max-width:42ch;margin-bottom:0;text-wrap:pretty}
.hero-context .hero-actions{gap:12px 22px;margin-top:19px}
.hero-context .intro-link{font-size:11px;min-height:44px;display:inline-flex;align-items:center}
.hero-arriving .hero-reveal{animation:hero-copy-in .72s cubic-bezier(.2,.7,.2,1) both}
.hero-arriving .hero-title-accent .hero-reveal:nth-child(1){animation-delay:.1s}
.hero-arriving .hero-title-accent .hero-reveal:nth-child(2){animation-delay:.2s}
.hero-arriving .hero-title-accent .hero-reveal:nth-child(3){animation-delay:.3s}
@keyframes hero-copy-in{from{opacity:0;transform:translateY(.32em)}to{opacity:1;transform:none}}
@media(max-width:1100px){.product-hero>.hero-intro{gap:28px}.hero-context>p{font-size:13px}.hero-context .hero-actions{gap:8px 16px}.hero-context .intro-link{font-size:10px}}
@media(max-width:800px){.product-hero>.hero-intro{gap:22px}.hero-context{display:block;max-width:600px}.hero-context>p{max-width:56ch}.hero-context .hero-actions{margin-top:16px}}
@media(max-width:640px){.site-header{padding-block:15px}.product-hero{padding-top:10px}.product-hero>.hero-intro{gap:19px;margin-bottom:26px}.hero-context>p{font-size:13px;line-height:1.85;max-width:39ch}.hero-context .hero-actions{gap:8px 17px}.hero-context .intro-link{font-size:11px}.hero-context .intro-note{margin-top:10px}.local-proof{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.hero-arriving .hero-reveal{animation:none}}