/* route / how it works */
.how{background:var(--tint);border-radius:var(--r-lg);padding:clamp(32px,5vw,72px);position:relative;overflow:hidden}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px}
.route-svg{position:absolute;left:0;right:0;top:0;height:60px;width:100%;overflow:visible}
.route-svg path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.route-svg .bg{stroke:var(--line);stroke-dasharray:2 8}
.step{position:relative;padding-top:84px}
.step .dot{position:absolute;top:16px;left:0;width:30px;height:30px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);display:grid;place-items:center;transition:background .3s,transform .3s}
.step .dot::after{content:"";width:10px;height:10px;transform:rotate(45deg);background:var(--accent);transition:background .3s}
.step.lit .dot{background:var(--accent);transform:scale(1.1)}
.step.lit .dot::after{background:var(--sun)}
.step .n{font-family:var(--head);font-size:13px;color:var(--accent);font-weight:600}
.step h3{margin:8px 0 8px}
.step p{font-size:15px;color:var(--muted)}
@media (max-width:720px){
  .steps{grid-template-columns:1fr;gap:8px}
  .route-svg{display:none}
  .step{padding:0 0 24px 52px}
  .step .dot{top:0}
}