/* Animated heading with supporting copy in the right column. */
.hero{min-height:800px;padding-top:40px}
.hero h1.kinetic-title{width:min(1040px,94%);max-width:none;font-size:clamp(30px,5.2vw,78px);font-weight:600;letter-spacing:-.045em;line-height:1.12;padding-top:45px}
.hero h1.kinetic-title>.type-line{display:flex;align-items:center;width:max-content;white-space:nowrap;gap:.18em;transform-origin:left center}
.type-sites{font-size:1.48em;gap:.8em!important;animation:hero-sites 9s cubic-bezier(.65,0,.25,1) infinite}
.type-arrow{display:inline-flex;align-items:center;justify-content:center;width:1.55em;height:.85em;background:#7be986;border-radius:1em;font-style:normal;font-size:.8em;font-weight:400;line-height:1}
.hero h1.kinetic-title>.type-promotion{margin-top:.18em;margin-left:.55em;padding:.14em 1.05em .2em .28em;background:linear-gradient(105deg,#ff916f,#f6c4ff);border-radius:8px;animation:hero-promotion 9s cubic-bezier(.65,0,.25,1) infinite}
.hero h1.kinetic-title>.type-automation{font-size:.9em;margin-top:.34em;animation:hero-automation 9s cubic-bezier(.65,0,.25,1) infinite}
.type-automation small{font-size:.48em;font-weight:400;margin-right:.12em}
.type-plus{display:inline-flex;align-items:center;justify-content:center;width:1.2em;height:1.2em;background:#cbb4ef;border-radius:50%;font-style:normal;font-weight:400;margin-left:.55em;letter-spacing:0;line-height:1}
.hero h1.kinetic-title>.type-business{font-size:.57em;font-weight:400;margin-top:.3em;letter-spacing:-.045em}
.hero-copy{width:55%;max-width:620px;padding-top:28px}.hero-copy>p{max-width:520px}.hero-bottom{margin-top:48px}
@keyframes hero-sites{0%,100%{transform:translateX(0)}35%,65%{transform:translateX(24px)}}
@keyframes hero-promotion{0%,100%{transform:translateX(0)}35%,65%{transform:translateX(-20px)}}
@keyframes hero-automation{0%,100%{transform:translate(0,0) rotate(0)}35%,65%{transform:translate(10px,-3px) rotate(-2deg)}}
@media(max-width:900px){.hero{min-height:720px}.hero h1.kinetic-title{width:85%;font-size:5.6vw}.hero-copy{width:70%}}
@media(max-width:700px){.hero{min-height:0;padding-top:28px}.hero h1.kinetic-title{width:100%;font-size:7.4vw}.hero h1.kinetic-title>.type-promotion{border-radius:5px}.hero-copy{width:100%;padding-top:28px}.hero-bottom{margin-top:34px}.hero h1.kinetic-title>.type-business{font-size:.72em;margin-top:.5em}.type-sites{animation-name:hero-mobile-sites}.type-promotion{animation-name:hero-mobile-promotion}}
@keyframes hero-mobile-sites{0%,100%{transform:translateX(0)}35%,65%{transform:translateX(10px)}}
@keyframes hero-mobile-promotion{0%,100%{transform:translateX(0)}35%,65%{transform:translateX(-8px)}}
@media(max-width:700px){.hero h1.kinetic-title{font-size:7vw}.type-sites{gap:.65em!important}.hero h1.kinetic-title>.type-promotion{margin-left:.3em;padding-right:.7em}.type-plus{margin-left:.2em}.hero-copy{padding-top:22px}}
@media(prefers-reduced-motion:reduce){.kinetic-title .type-line{animation:none!important}}
.motion-off .kinetic-title .type-line{animation:none!important}
.hero{min-height:0;padding-bottom:24px}
.hero-aside{position:absolute;right:0;top:195px;width:25%;max-width:310px;font-size:clamp(16px,1.55vw,22px);line-height:1.6;color:var(--muted)}
.hero-copy{padding-top:12px;width:100%;max-width:none}
.hero-copy .hero-actions{margin-top:0;flex-direction:row;align-items:center}
@media(max-width:900px){.hero-aside{top:155px;width:25%;font-size:15px}.hero h1.kinetic-title{font-size:5.2vw}}
@media(max-width:700px){.hero{padding-bottom:16px}.hero h1.kinetic-title{font-size:7vw}.hero-aside{display:none}.hero-copy{padding-top:18px}}
.hero-copy{padding-top:48px}
body{overflow-x:clip}
.hero{overflow:visible;padding-bottom:40px}
.hero-brand-plane{position:absolute;right:-50px;bottom:-80px;width:34%;max-width:430px;height:auto;pointer-events:none;z-index:0}
@media(min-width:701px) and (max-width:900px){.hero-brand-plane{right:0}}
.hero-brand-note{position:absolute;right:0;top:40px;width:24%;max-width:280px;font-size:14px;line-height:1.6;color:#555e58;text-align:right;z-index:2}
@media(max-width:700px){.hero{padding-bottom:140px}.hero-brand-note{position:relative;right:auto;top:auto;width:75%;max-width:300px;margin-top:26px}.hero:has(>.hero-browser-compact){padding-bottom:0}.hero-browser-compact{position:relative;display:block;width:68%;max-width:260px;right:auto;bottom:auto;margin:24px 0 -38px auto}}
@media(max-width:700px){.hero-copy{padding-top:34px}}
