/* Motion is local to the benefit currently hovered or focused. */
.service-benefit .benefit-icon{min-width:0;position:relative;display:grid;place-items:center;width:56px;height:56px;flex:0 0 56px;pointer-events:none}
.service-benefit .benefit-symbol{display:block;width:36px;height:36px;overflow:visible;transform-origin:center;transition:transform .22s ease}
.service-benefit .range-symbol{width:40px;height:40px}
.service-benefit:focus-visible{outline:2px solid #0DAC55;outline-offset:8px;border-radius:6px}
.range-tile{transform-box:fill-box;transform-origin:center;fill:transparent;--tile-color:#0DAC55;--step:0}
.tile-red{--tile-color:#E74343;--step:0}.tile-blue{--tile-color:#2F80ED;--step:1}.tile-yellow{--tile-color:#F2C94C;--step:2}.tile-green{--tile-color:#0DAC55;--step:3}
.benefit-range:is(:hover,:focus-visible) .range-tile{animation:benefit-tile-cycle 2.4s ease-in-out infinite;animation-delay:calc(var(--step)*.6s)}
@keyframes benefit-tile-cycle{0%,25%,100%{transform:scale(1);fill:transparent;filter:none}8%,18%{transform:scale(1.32);fill:var(--tile-color);filter:drop-shadow(0 1px 1px #00000033)}}
.shield-body{fill:transparent;transition:fill .22s ease}.shield-check{transition:stroke .22s ease}.shield-sweep{opacity:0;transform:translateX(-12px) skewX(-18deg)}
.benefit-supply:is(:hover,:focus-visible) .benefit-symbol,.benefit-warehouse:is(:hover,:focus-visible) .benefit-symbol{transform:scale(1.2)}
.benefit-supply:is(:hover,:focus-visible) .shield-body{fill:#0DAC55}
.benefit-supply:is(:hover,:focus-visible) .shield-check{stroke:#ffffff}
.benefit-supply:is(:hover,:focus-visible) .shield-sweep{animation:benefit-light-sweep 1.9s ease-in-out infinite}
@keyframes benefit-light-sweep{0%{transform:translateX(-12px) skewX(-18deg);opacity:0}15%{opacity:1}70%{transform:translateX(53px) skewX(-18deg);opacity:1}80%,100%{transform:translateX(53px) skewX(-18deg);opacity:0}}
.service-benefit .cold-snowflake{position:absolute;top:0;left:44px;width:18px;height:18px;color:#93DDF5;opacity:0;transform:translateY(-3px);transition:opacity .2s ease}
.service-benefit .wind-gust{position:absolute;top:17px;left:-8px;width:68px;height:38px;color:#93DDF5;opacity:0;stroke-dasharray:16 58;stroke-dashoffset:72;pointer-events:none}
.benefit-warehouse:is(:hover,:focus-visible) .cold-snowflake{opacity:1;animation:benefit-snow-drift 2.4s ease-in-out infinite}
.benefit-warehouse:is(:hover,:focus-visible) .wind-gust{animation:benefit-wind 1.45s linear infinite}
.benefit-warehouse:is(:hover,:focus-visible) .wind-gust path:nth-child(2){stroke-dasharray:24 50}
.benefit-warehouse:is(:hover,:focus-visible) .wind-gust path:nth-child(3){stroke-dasharray:12 62}
@keyframes benefit-snow-drift{0%,100%{transform:translate(0,-2px) rotate(-8deg)}50%{transform:translate(3px,3px) rotate(15deg)}}
@keyframes benefit-wind{0%{stroke-dashoffset:72;opacity:0}22%,72%{opacity:.85}100%{stroke-dashoffset:-2;opacity:0}}
@media(max-width:850px){.service-benefit .benefit-icon{width:52px;height:52px;flex-basis:52px}.service-benefit .benefit-symbol{width:34px;height:34px}.service-benefit .range-symbol{width:38px;height:38px}.service-benefit .cold-snowflake{left:40px;width:17px;height:17px}.service-benefit .wind-gust{width:64px}}
@media(prefers-reduced-motion:reduce){.service-benefit *{animation:none!important;transition:none!important}.benefit-range:is(:hover,:focus-visible) .range-tile{fill:var(--tile-color);transform:none;filter:none}.benefit-supply:is(:hover,:focus-visible) .benefit-symbol,.benefit-warehouse:is(:hover,:focus-visible) .benefit-symbol{transform:none}.benefit-warehouse:is(:hover,:focus-visible) .cold-snowflake{transform:none}.benefit-warehouse:is(:hover,:focus-visible) .wind-gust{opacity:.6;stroke-dashoffset:0;stroke-dasharray:none}}