/* ─── HOW TO ORDER — горизонтальный timeline с производственной линейкой ─── */
.mh__howto {
	position: relative;
	padding-top: 8px;
}
/* Скрываем вертикальный rail из исходного концепта — у нас горизонтальный layout. */
.mh__howto-rail { display: none; }

.mh__howto-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	position: relative;
	counter-reset: howto-step;
}

/* Базовая горизонтальная линия линейки — тонкая на всю ширину между кругами. */
.mh__howto-steps::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 27px;
	height: 1.5px;
	background: var(--line-strong);
	opacity: 0.22;
	z-index: 0;
}

/* Tick-marks на линейке — короткие вертикальные риски, как на типографической
   линейке. Каждый 25% делит линию на 4 шага, sub-ticks между ними каждые 5%. */
.mh__howto-steps::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 19px;
	height: 8px;
	background-image:
		/* мажорные tick'и на 0/25/50/75/100% — длинные риски */
		linear-gradient(to right, var(--line-strong) 1.5px, transparent 1.5px),
		/* минорные tick'и каждые 5% — короткие риски */
		linear-gradient(to right, var(--line-strong) 1px, transparent 1px);
	background-size:
		25% 100%,
		5% 4px;
	background-position:
		0 0,
		0 bottom;
	background-repeat: repeat-x, repeat-x;
	opacity: 0.32;
	pointer-events: none;
	z-index: 0;
}

.mh__howto-step {
	position: relative;
	padding: 0 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	border: 0;
	z-index: 1;
}

/* Номер-кружок 01..04 над каждым шагом — «штамп» на линейке. */
.mh__howto-step::before {
	counter-increment: howto-step;
	content: counter(howto-step, decimal-leading-zero);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1.5px solid var(--ink);
	background: var(--paper);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mh-mono);
	font-size: var(--text-body-sm);
	font-weight: 600;
	color: var(--fg);
	margin-bottom: 6px;
	box-shadow: 0 0 0 6px var(--bg);    /* «вырез» в линейке вокруг кружка */
}
.mh__howto-step:last-child::before {
	background: var(--accent);
	color: var(--ink);
	border-color: var(--accent);
}

/* Метки шкалы под линейкой (mm-разметка стиля «01·25 02·50 03·75 04·100») —
   декоративные подписи как на реальной линейке. */
.mh__howto-step::after {
	content: counter(howto-step) " · " counter(howto-step, decimal-leading-zero);
	position: absolute;
	left: 18px;
	top: 64px;
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-3xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fg-quiet);
	opacity: 0.55;
}

.mh__howto-step-title {
	font-family: var(--font-mh-display);
	font-weight: 700;
	font-size: var(--text-price); /* 22px → token */
	line-height: 1.15;
	letter-spacing: -0.012em;
	margin: 26px 0 0;       /* отступ от метки шкалы */
	color: var(--fg);
}
.mh__howto-step-desc {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--fg-mute);
	margin: 0;
	max-width: 32ch;
}
.mh__howto-step-tag {
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-2xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	display: inline-block;
}

/* Mobile: вертикальная колонка, линейка скрыта. */
@media (max-width: 880px) {
	.mh__howto-steps { grid-template-columns: 1fr; }
	.mh__howto-steps::before,
	.mh__howto-steps::after { display: none; }
	.mh__howto-step { padding: 18px 0; border-bottom: 1px solid var(--line); }
	.mh__howto-step:last-child { border-bottom: 0; }
	.mh__howto-step::after { display: none; }
}