/* A single connected sequence, horizontal on desktop and vertical on phones. */
.how .step-flow{--step-gap:50px;gap:var(--step-gap)}
.how .step-flow article{border:0;padding-top:0;min-width:0}
.how .step-flow article>span{width:44px;height:44px;font-size:14px;margin-bottom:28px;position:relative;box-shadow:0 0 0 6px #b8ef4808}
.how .step-flow article:not(:last-child)::before{content:'';position:absolute;left:62px;right:calc(-1 * var(--step-gap) + 17px);top:22px;height:1px;background:#718c45}
.how .step-flow article:not(:last-child)::after{content:'';position:absolute;right:calc(-1 * var(--step-gap) + 17px);top:18px;width:8px;height:8px;border-top:2px solid #b8ef48;border-right:2px solid #b8ef48;transform:rotate(45deg)}
@media(max-width:860px) and (min-width:601px){.how .step-flow{--step-gap:30px}.how .step-flow article>span{width:40px;height:40px}.how .step-flow article:not(:last-child)::before{top:20px;left:55px}.how .step-flow article:not(:last-child)::after{top:16px}}
@media(max-width:600px){
 .how .step-flow{--step-gap:42px}
 .how .step-flow article{grid-template-columns:40px minmax(0,1fr);gap:12px 22px;padding:0}
 .how .step-flow article>span{width:40px;height:40px;margin:0;grid-row:1/3}
 .how .step-flow h3{padding-top:6px}
 .how .step-flow article:not(:last-child)::before{left:20px;right:auto;top:54px;bottom:calc(-1 * var(--step-gap) + 14px);width:1px;height:auto}
 .how .step-flow article:not(:last-child)::after{left:16px;right:auto;top:auto;bottom:calc(-1 * var(--step-gap) + 14px);border-top:0;border-bottom:2px solid #b8ef48}
}