/* Follow-up step illustrations (filled by step-art.js). Same hairline language as the hero art. */
.step-art{display:block;color:var(--green,#173e34)}
.step-art svg{display:block;width:100%;height:auto;overflow:visible}
.step-art svg *{transform-box:view-box}
.step-art .sa-line,.step-art .sa-soft,.step-art .sa-card,.step-art .sa-acc,.step-art .sa-dot{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.step-art .sa-card{fill:#fbf9f2}
.step-art .sa-soft{stroke-opacity:.42}
.step-art .sa-acc{stroke:var(--teal,#168976)}
.step-art .sa-thick{stroke-width:2.6}
.step-art .sa-dot{fill:#fbf9f2;transition:fill .5s ease var(--d,0s)}
.step-art .sa-fill,.step-art .sa-grid circle{fill:var(--teal,#168976);stroke:none}
.step-art .sa-grid circle{fill:currentColor;fill-opacity:.35}
.step-art .sa-ping{opacity:0}
.step-art .sa-runner{opacity:0}

/* Draw in once, when the drawing scrolls into view */
.step-art .d{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.6,.1,.2,1) var(--d,0s)}
.step-art .p{opacity:0;transform:scale(.6);transform-origin:center;transition:opacity .5s ease var(--d,0s),transform .6s cubic-bezier(.22,1,.36,1) var(--d,0s)}
.step-art .p{transform-box:fill-box}
.step-art.is-shown .d{stroke-dashoffset:0}
.step-art.is-shown .p{opacity:1;transform:none}
.step-art.is-shown .sa-dot{fill:var(--teal,#168976);stroke:var(--teal,#168976)}

/* Once drawn, the dashed links stay dashed */
.step-art .sa-dash{stroke-dasharray:3 3}

/* Hover, focus or an open preview brings each one to life */
:is(.is-live,:hover,:focus-within)>.step-art .sa-ping,.step-art.is-live .sa-ping{animation:sa-ping 1.6s ease-out infinite}
:is(.is-live,:hover,:focus-within)>.step-art .sa-env,.step-art.is-live .sa-env{animation:sa-drop 1.6s cubic-bezier(.5,0,.2,1) infinite}
:is(.is-live,:hover,:focus-within)>.step-art .sa-hand,.step-art.is-live .sa-hand{transform-origin:40px 56px;animation:sa-tick 2.4s cubic-bezier(.6,0,.2,1) infinite}
:is(.is-live,:hover,:focus-within)>.step-art .sa-typing circle,.step-art.is-live .sa-typing circle{animation:sa-type 1.1s ease-in-out infinite}
:is(.is-live,:hover,:focus-within)>.step-art .sa-typing circle:nth-child(2),.step-art.is-live .sa-typing circle:nth-child(2){animation-delay:.15s}
:is(.is-live,:hover,:focus-within)>.step-art .sa-typing circle:nth-child(3),.step-art.is-live .sa-typing circle:nth-child(3){animation-delay:.3s}
:is(.is-live,:hover,:focus-within)>.step-art .sa-runner,.step-art.is-live .sa-runner{animation:sa-run 2.6s cubic-bezier(.45,0,.25,1) infinite}
:is(.is-live,:hover,:focus-within)>.step-art .sa-nudge,.step-art.is-live .sa-nudge{animation:sa-nudge 1.4s ease-in-out infinite}
:is(.is-live,:hover,:focus-within)>.step-art .sa-check,.step-art.is-live .sa-check{animation:sa-check 2s ease-in-out infinite}
:is(.is-live,:hover,:focus-within)>.step-art .sa-star,:is(.is-live,:hover,:focus-within)>.step-art .sa-star-fill,.step-art.is-live .sa-star,.step-art.is-live .sa-star-fill{transform-origin:40px 49px;animation:sa-star 2.2s ease-in-out infinite}
:is(.is-live,:hover,:focus-within)>.step-art .sa-loop path,.step-art.is-live .sa-loop path{animation:sa-flow 1.2s linear infinite}

@keyframes sa-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
.step-art .sa-ping{transform-origin:108px 58px}
@keyframes sa-drop{0%{transform:translateY(-14px);opacity:0}25%{opacity:1}60%,100%{transform:translateY(0);opacity:1}}
@keyframes sa-tick{0%,15%{transform:rotate(0)}55%,100%{transform:rotate(60deg)}}
@keyframes sa-type{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-3px)}}
@keyframes sa-run{0%{opacity:0;transform:translateX(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(92px)}}
@keyframes sa-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
@keyframes sa-check{0%,40%{stroke-dashoffset:0}55%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes sa-star{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-8deg) scale(1.06)}}
@keyframes sa-flow{to{stroke-dashoffset:-12}}

@media(prefers-reduced-motion:reduce){
  .step-art .d{stroke-dashoffset:0;transition:none}
  .step-art .p{opacity:1;transform:none;transition:none}
  .step-art .sa-dot{fill:var(--teal,#168976);stroke:var(--teal,#168976)}
  .step-art *{animation:none!important}
}