/* steps.css — the numbered engagement process.
   Counter-driven, so reordering the markup renumbers itself and nobody has to
   remember to renumber by hand. */

.gnt-steps {
	counter-reset: gnt-step;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gnt-steps--five  { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.gnt-steps li {
	counter-increment: gnt-step;
	padding-top: var(--space-6);
	border-top: var(--border-width-thin) solid var(--color-border-subtle);
}

.gnt-steps li::before {
	content: counter(gnt-step, decimal-leading-zero);
	display: block;
	margin-bottom: var(--space-3);
	font-family: var(--font-heading);
	font-weight: var(--font-weight-bold);
	font-size: var(--text-h3);
	line-height: 1;
	color: var(--color-accent-rule);
	font-variant-numeric: tabular-nums;
}

.gnt-steps__title {
	margin: 0 0 var(--space-2);
	font-size: var(--text-h3);
	line-height: var(--text-h3-lh);
	font-weight: var(--font-weight-semibold);
}

.gnt-steps__text {
	margin: 0;
	font-size: var(--text-body);
	line-height: var(--text-body-lh);
	color: var(--color-text-muted);
}

@media (max-width: 1024px) {
	.gnt-steps,
	.gnt-steps--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.gnt-steps,
	.gnt-steps--five { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}