/* Block: Stappen. A numbered route: one row per step, number and title left, text and timing right. */
.steps-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--green);
}
.step {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--gap);
	row-gap: 10px;
	padding: 28px 0 30px;
	border-bottom: 1px solid var(--line);
}
.step-n {
	font-size: var(--fs-micro);
	color: var(--ink-soft);
	padding-top: 0.7em;
}
.step h3 { font-size: var(--fs-h3); line-height: 1.1; max-width: 16em; }
.step-text {
	display: grid;
	gap: 14px;
	justify-items: start;
	align-content: start;
	padding-top: 0.25em;
}
.step-text p { color: var(--ink-soft); max-width: 34em; }
.step-timing {
	font-size: 14px;
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--beige);
}

.steps-foot { margin-top: 40px; }

/* Inside a beige panel the timing pill needs the page colour to stand out. */
.panel .step-timing { background: var(--cream); }

@media (max-width: 900px) {
	.step { grid-template-columns: 48px minmax(0, 1fr); }
	.step-text { grid-column: 2; }
}