/* NZ Steps — Figma NZ/Step. */
.nz-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nz-steps .nz-steps__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* 1 px line, 14 px tick at the start, 9 px lime dot centred on the corner. */
.nz-steps__line {
	--nz-step-line: var(--nz-color-border-strong);
	--nz-step-dot: var(--nz-color-surface-accent);
	--nz-step-dot-border: var(--nz-color-text-brand);
	position: relative;
	display: block;
	height: 14px;
	background:
		linear-gradient(var(--nz-step-line), var(--nz-step-line)) 0 0 / 100% 1px no-repeat,
		linear-gradient(var(--nz-step-line), var(--nz-step-line)) 0 0 / 1px 14px no-repeat;
}

.nz-steps__line::before {
	content: "";
	position: absolute;
	top: -4px;
	left: -4px;
	box-sizing: border-box;
	width: 9px;
	height: 9px;
	border: 1.5px solid var(--nz-step-dot-border);
	border-radius: 50%;
	background-color: var(--nz-step-dot);
}

.nz-steps .nz-steps__num,
.nz-steps .nz-steps__title,
.nz-steps .nz-steps__text {
	margin: 0;
}

.nz-steps .nz-steps__num {
	font-family: var(--nz-font-family);
	font-size: var(--nz-font-size-caption);
	font-weight: 500;
	line-height: var(--nz-line-height-caption);
	color: var(--nz-color-text-muted);
}

.nz-steps .nz-steps__title {
	font-family: var(--nz-font-display);
	font-size: var(--nz-font-size-h4);
	font-weight: 600;
	line-height: var(--nz-line-height-h4);
	color: var(--nz-color-text-primary);
}

.nz-steps .nz-steps__text {
	font-family: var(--nz-font-family);
	font-size: var(--nz-font-size-small);
	line-height: var(--nz-line-height-small);
	color: var(--nz-color-text-muted);
}