/* Original miniature scenes share the website's layered blue/cream materials. */
#benefits .outcome-icon{position:relative;display:block;width:calc(100% + 20px);height:auto;aspect-ratio:3/2;margin:-8px -10px 25px;padding:0;border:0;border-radius:16px;background:none;box-shadow:none;appearance:none;cursor:pointer;perspective:700px;flex-shrink:0}
#benefits .outcome-icon:focus-visible{outline:2px solid #dfc59d;outline-offset:3px}
#benefits .benefit-scene{display:block;width:100%;height:100%;overflow:visible;transform:rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transition:transform .45s ease;filter:drop-shadow(0 12px 9px #0003)}
#benefits .bs-ground{stroke:#7d9fb6;stroke-opacity:.1}
#benefits .bs-edge{stroke:#8cacca;stroke-opacity:.55;stroke-width:1.4}
#benefits .bs-cream-edge{stroke:#fff1d7;stroke-width:1.3}
#benefits .bs-paper{fill:#d9e4f0}
#benefits .bs-lines{stroke:#b5cce1;stroke-width:3;stroke-linecap:round;stroke-opacity:.7}
#benefits .bs-route{stroke:#6688a9;stroke-width:2}
#benefits .bs-flow{stroke:#e8cfaa;stroke-width:3;stroke-linecap:round;stroke-dasharray:.13 .87;stroke-dashoffset:0;opacity:0}
#benefits .bs-check{stroke:#f4e4c7;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
#benefits .bs-piece{transform-box:fill-box;transform-origin:center}
#benefits .bs-from-left{--start-x:-27px;--start-y:-9px;--start-r:-12deg}
#benefits .bs-from-right{--start-x:29px;--start-y:-6px;--start-r:12deg}
#benefits .bs-from-bottom{--start-x:0px;--start-y:26px;--start-r:-6deg}
#benefits .bs-from-top{--start-x:8px;--start-y:-25px;--start-r:9deg}
#benefits .is-playing .bs-piece{animation:bs-assemble 2.4s cubic-bezier(.22,.7,.2,1) var(--delay,0ms) both}
#benefits .is-playing .bs-halo{animation:bs-halo 4s ease both;transform-origin:150px 110px}
#benefits .is-playing .bs-flow{animation:bs-route 1.3s ease-in-out .8s 2 both}
#benefits .is-playing .bs-flow-second{animation-delay:1.1s}
#benefits .is-playing .bs-check{animation:bs-check 1s ease 1.6s both}
#benefits .is-playing .bs-bar{animation:bs-bar 1.3s cubic-bezier(.2,.8,.2,1) var(--delay) both;transform-box:fill-box;transform-origin:bottom}
#benefits .is-playing .bs-wave{animation:bs-wave var(--speed) ease-in-out var(--delay) 6 alternate;transform-box:fill-box;transform-origin:center}
#benefits .is-playing .bs-code{animation:bs-code 1.5s ease .8s both}
@keyframes bs-assemble{0%,12%{transform:translate(var(--start-x),var(--start-y)) rotate(var(--start-r)) scale(.9);opacity:.3}58%{transform:translate(0,-3px) rotate(0deg) scale(1.025);opacity:1}78%,100%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}}
@keyframes bs-halo{0%,100%{opacity:.65;transform:scale(.9)}50%{opacity:1;transform:scale(1.13)}}
@keyframes bs-route{0%{stroke-dashoffset:1;opacity:0}15%,80%{opacity:1}100%{stroke-dashoffset:-.13;opacity:0}}
@keyframes bs-check{0%,15%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes bs-bar{0%{transform:scaleY(.15)}70%{transform:scaleY(1.08)}100%{transform:scaleY(1)}}
@keyframes bs-wave{from{transform:scaleY(.35);opacity:.6}to{transform:scaleY(1.15);opacity:1}}
@keyframes bs-code{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@media(max-width:780px){#benefits .outcome-icon{max-width:310px;margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){#benefits .outcome-icon,#benefits .outcome-icon *{animation:none!important;transition:none!important;transform:none!important}}