body #intro{background:#f783d0;position:relative}
body #intro:before{display:none}
.hero-scenes{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none}
.hero-scene{position:absolute;inset:0;opacity:0;transform:translateX(8%);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1);background:#f783d0}
.hero-scene.is-active{opacity:1;transform:translateX(0)}
.hero-scene.scene-yellow{background:#427dff}
.hero-scene img{position:absolute;height:110%;width:61%;max-width:none;object-fit:contain;object-position:center top;left:4%;top:-10%;filter:drop-shadow(0 8px 15px #0000000b)}
.hero-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(83,12,66,.85),rgba(83,12,66,.3) 27%,transparent 53%)}
.hero-scene.scene-yellow:after{background:linear-gradient(0deg,rgba(12,37,109,.88),rgba(12,37,109,.3) 27%,transparent 53%)}
body #intro .hero-copy{position:relative;z-index:1;padding-bottom:36px}
body #intro .hero-workflow{position:relative;z-index:3}
body #intro h1{min-height:2.1em}
body #intro .lead{min-height:3.1em}
.hero-scene-controls{position:absolute;bottom:20px;left:32px;display:flex;align-items:center;gap:8px;z-index:4}
.hero-scene-controls button{appearance:none;border:1px solid #ffffff90;background:#ffffff40;width:9px;height:9px;border-radius:99px;padding:0;cursor:pointer}
.hero-scene-controls button[aria-pressed=true]{background:#fff;width:27px}
.hero-scene-controls .hero-pause{width:auto;height:25px;padding:0 11px;color:#fff;background:#00000035;font:11px Arial;border-color:#ffffff70;margin-left:5px}
.hero-scene-controls button:focus-visible{outline:3px solid white;outline-offset:4px}
@media(max-width:700px){body #intro{background:#f783d0}body #intro .hero-copy{margin-top:280px;padding-bottom:34px}body #intro h1{font-size:32px;min-height:3.1em}body #intro .lead{min-height:4.5em}.hero-scene img{height:390px;width:350px;left:calc(50% - 175px);top:-28px}.hero-scene:after{background:linear-gradient(180deg,transparent 15%,rgba(83,12,66,.77) 42%,rgba(83,12,66,.77))}.hero-scene.scene-yellow:after{background:linear-gradient(180deg,transparent 15%,rgba(12,37,109,.8) 42%,rgba(12,37,109,.8))}.hero-scene-controls{top:268px;bottom:auto;left:18px}body #intro .hero-workflow{margin-top:-10px}}
@media(prefers-reduced-motion:reduce){.hero-scene{transition:none;transform:none}}
@media(max-width:700px){.hero-scene img{top:0;left:50%;transform:translateX(-50%);height:calc(var(--hero-form-top,580px) + 14px);width:auto;max-width:none;object-fit:contain}body #intro .hero-copy{padding-bottom:8px}body #intro .lead{min-height:3.1em}}
@media(min-width:701px){.hero-scene img{left:17%}}

/* More breathing room for the desktop hero copy and carousel controls. */
@media(min-width:701px){body #intro .hero-copy{padding-left:20px;padding-bottom:56px}.hero-scene-controls{left:52px;bottom:36px}}

body #intro .hero-badge{color:#fff}

@media(min-width:701px){.hero-scene.scene-blue img{top:auto;bottom:-26px;object-position:center bottom}}

/* Crossfade at every viewport; reading stays still while the scenery changes. */
.hero-scene,.hero-scene.is-active{transform:none;transition:opacity 1.4s ease-in-out}.hero-scene-controls button{transition:width .3s ease,background-color .3s ease}
@media(prefers-reduced-motion:reduce){.hero-scene,.hero-scene-controls button{transition:none}}