/* Blok: Stappenplan */
.steps{ display:grid; gap:var(--sp-4); list-style:none; margin:0; padding:0; }
@media (min-width:640px){ .steps{ grid-template-columns:repeat(2,1fr); } }
/* Vanaf 900px alle stappen op één rij, zoals in het ontwerp. Op 1000px bleef
   een rij van vier op een staande tablet als 2×2 staan, wat de tijdlijn breekt. */
@media (min-width:900px){
	.steps--n3{ grid-template-columns:repeat(3,1fr); }
	.steps--n4{ grid-template-columns:repeat(4,1fr); }
}

.step{ display:flex; flex-direction:column; gap:.7rem; }

/* Het nummer is een fijn mono-label, niet een groot displaycijfer: in het
   ontwerp leest de rij als een tijdlijn met een subtiel "01", en het rood is
   voorbehouden aan het icoon. Andersom (groot rood cijfer, blauw icoon) trok
   het cijfer alle aandacht en week het af van de USP-rij, waar het icoon ook
   rood is. */
.step__head{ display:flex; align-items:center; gap:.9rem; margin-bottom:.2rem; }
.step__num{
	font-family:var(--font-mono); font-weight:600; line-height:1;
	font-size:.8rem; letter-spacing:.1em; color:var(--accent); flex:none;
}
/* De verbindingslijn vloeit uit naar rechts en stopt bij de laatste stap. */
.step__line{
	flex:1; height:2px; border-radius:2px;
	background:linear-gradient(90deg, var(--line-strong), transparent);
}
.step:last-child .step__line{ display:none; }

.step .ico{ width:40px; height:40px; color:var(--red); margin-block:.6rem; }
.step__title{ font-size:var(--fs-h4); color:var(--ink); }
.step__text{ color:var(--ink-soft); font-size:.98rem; }
.step__link{ margin-top:.2rem; }

.band .step__num{ color:var(--brand-4); }
.band .step__line{ background:linear-gradient(90deg, rgba(255,255,255,.32), transparent); }
.band .step .ico{ color:var(--brand-4); }
.band .step__title{ color:#fff; }
.band .step__text{ color:rgba(255,255,255,.76); }