/* Main homepage hero, matching the supplied composition. */
.hero-refresh .portrait{left:7.65%;top:0;width:37.85%;height:auto;object-fit:contain}
.hero-refresh .hero-copy{left:50%;right:4%;top:calc(80 * var(--u));bottom:calc(78 * var(--u));display:flex;flex-direction:column}
.hero-refresh .hero-copy h1{font-size:calc(96 * var(--u));line-height:.94;margin:0 0 calc(50 * var(--u))}
.hero-benefits{display:flex;flex-direction:column;gap:calc(30 * var(--u))}
.hero-benefits a{display:flex;align-items:center;gap:calc(20 * var(--u));text-decoration:none;font-size:calc(36 * var(--u));line-height:1.2;font-weight:400}
.hero-benefits svg{width:calc(40 * var(--u));height:calc(40 * var(--u));flex-shrink:0;fill:var(--blue)}
.hero-actions{margin-top:auto}
.hero-refresh .hero-actions .pill{font-size:14px}
.hero-refresh .demo{margin-left:calc(21 * var(--u))}
@media(max-width:700px){
.hero-refresh .portrait{position:relative;left:8%;top:auto;width:76%;height:auto}
.hero-refresh .hero-copy{position:relative;left:auto;right:auto;top:auto;bottom:auto;padding:28px 24px 0}
.hero-refresh .hero-copy h1{font-size:clamp(36px,8vw,56px);margin:0 0 28px;line-height:1}
.hero-benefits{gap:20px}.hero-benefits a{font-size:clamp(20px,4.8vw,30px);gap:14px}.hero-benefits svg{width:30px;height:30px}
.hero-actions{margin-top:36px}.hero-refresh .demo{margin-left:0}
}
/* A quick clockwise cascade every ten seconds. */
@keyframes hero-wheel-spin{0%{transform:rotate(0deg)}7%,100%{transform:rotate(360deg)}}
.hero-benefits svg{transform-origin:center;animation:hero-wheel-spin 10s cubic-bezier(.25,.7,.25,1) infinite;animation-delay:10s}
.hero-benefits a:nth-child(2) svg{animation-delay:10.18s}
.hero-benefits a:nth-child(3) svg{animation-delay:10.36s}
@media(prefers-reduced-motion:reduce){.hero-benefits svg{animation:none}}