/* How it works — 4 steps with connector */
.hiw__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: step; }
.hiw__step { position: relative; text-align: center; padding: 0 .5rem; }
.hiw__num { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1rem; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-black); font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; }
.hiw__icon { display: block; margin: 0 auto .5rem; color: var(--color-charcoal); }
.hiw__icon svg { width: 26px; height: 26px; margin-inline: auto; }
.hiw__title { margin-bottom: .4rem; }
.hiw__step p { color: var(--color-text-body); font-size: var(--fs-body-sm); }
/* connector line between step numbers (desktop) */
.hiw__step:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: calc(50% + 34px); right: calc(-50% + 34px); height: 2px; background: repeating-linear-gradient(90deg, var(--color-gray-300) 0 6px, transparent 6px 12px); }
@media (max-width: 860px) { .hiw__steps { grid-template-columns: 1fr 1fr; } .hiw__step::after { display: none; } }
@media (max-width: 480px) { .hiw__steps { grid-template-columns: 1fr; } }