/* fx-steps-draw: a "how it works" list whose line fills as you read down it; each step lights up when the line
   reaches it. Without JS (and with reduced motion) the line is full and every step is lit. */
[data-fx~="steps-draw"]{--p:1;position:relative;list-style:none;margin:0;padding:0 0 0 64px;counter-reset:sd}
[data-fx~="steps-draw"]:before,[data-fx~="steps-draw"] .sd-fill{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;border-radius:2px;background:var(--line,#d9d1c3)}
[data-fx~="steps-draw"] .sd-fill{background:var(--a,#d9622b);transform-origin:top;transform:scaleY(var(--p));will-change:transform}
[data-fx~="steps-draw"]>li{position:relative;counter-increment:sd;padding:6px 0 clamp(28px,4vw,44px)}
[data-fx~="steps-draw"]>li:last-child{padding-bottom:0}
[data-fx~="steps-draw"]>li:before{content:counter(sd);position:absolute;left:-64px;top:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 17px/1 var(--hf,system-ui);background:var(--bg,#f5f1ea);color:var(--ink,#1d2430);box-shadow:inset 0 0 0 2px var(--line,#d9d1c3);transition:background .35s,color .35s,box-shadow .35s,transform .35s cubic-bezier(.2,.7,.1,1)}
[data-fx~="steps-draw"]>li.sd-on:before{background:var(--a,#d9622b);color:var(--on-a,#1d2430);box-shadow:inset 0 0 0 2px var(--a,#d9622b);transform:scale(1.06)}
.fx-js [data-fx~="steps-draw"].sd-live>li:not(.sd-on)>*{opacity:.55;transition:opacity .35s}
.fx-js [data-fx~="steps-draw"].sd-live>li.sd-on>*{opacity:1;transition:opacity .35s}
@media (prefers-reduced-motion:reduce){[data-fx~="steps-draw"]{--p:1!important}[data-fx~="steps-draw"]>li>*{opacity:1!important}}