.stage { min-height: 14rem; }

/* ---------- Stepper ---------- */
.wiz { --progress: 0; display: grid; gap: 1.75rem; width: min(100%, 40rem); }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; counter-reset: s; }
/* Binario e riempimento: stanno dietro ai pallini, da centro del primo a centro dell'ultimo. */
.steps::before,
.steps::after { content: ''; position: absolute; top: 1.15rem; left: 12.5%; height: 3px; border-radius: 2px; }
.steps::before { right: 12.5%; background: #2e2e2e; }
.steps::after { width: calc(75% * var(--progress)); background: var(--accent); transition: width 400ms var(--ease-out); }
.step { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0.6rem; text-align: center; }
.step__dot {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--muted);
	background: var(--bg);
	border: 2px solid #3a3a3a;
	border-radius: 50%;
	transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease, transform 250ms var(--ease-out);
}
.step__dot > * { grid-area: 1 / 1; }
.step__dot svg { width: 1.1rem; height: 1.1rem; opacity: 0; transform: scale(0.5); transition: opacity 200ms ease, transform 250ms var(--ease-out); }
.step__name { font-size: 0.82rem; font-weight: 600; color: var(--muted); transition: color 200ms ease; }
.step[data-state='current'] .step__dot { color: var(--text); border-color: var(--accent); transform: scale(1.1); box-shadow: 0 0 0 5px rgb(255 59 48 / 0.18); }
.step[data-state='current'] .step__name { color: var(--text); }
.step[data-state='done'] .step__dot { color: #fff; background: var(--accent); border-color: var(--accent); }
.step[data-state='done'] .step__n { opacity: 0; }
.step[data-state='done'] svg { opacity: 1; transform: none; }
.step[data-state='done'] .step__name { color: #cfcfcf; }

.wiz__panel { min-height: 6.5rem; padding: 1.25rem 1.4rem; background: var(--bg); border: 1px solid var(--line); border-radius: 1rem; }
.wiz__panel h3 { margin-bottom: 0.4rem; font-size: 1.2rem; }
.wiz__panel p { color: #b8b8b8; }
.wiz__nav { display: flex; justify-content: space-between; }
.btn { padding: 0.65rem 1.3rem; font: inherit; font-weight: 600; color: #fff; cursor: pointer; background: var(--accent-strong); border: 1px solid var(--accent-strong); border-radius: 0.75rem; transition: transform 160ms var(--ease-out), opacity 160ms ease, filter 160ms ease; }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover:not(:disabled) { filter: brightness(1.1); } }
.btn--ghost { color: var(--text); background: transparent; border-color: #3a3a3a; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- Timeline ---------- */
.stage--tl { align-items: start; padding-block: 2.5rem; }
.tl { position: relative; display: grid; gap: 2rem; width: min(100%, 36rem); margin: 0; padding: 0 0 0 2.2rem; list-style: none; }
.tl::before { content: ''; position: absolute; left: 0.45rem; top: 0.3rem; bottom: 0.3rem; width: 3px; background: linear-gradient(var(--accent), #2e2e2e); border-radius: 2px; }
.tl__item { position: relative; }
.tl__item::before { content: ''; position: absolute; left: -2.2rem; top: 0.35rem; width: 1rem; height: 1rem; background: var(--bg); border: 3px solid var(--accent); border-radius: 50%; }
.tl__when { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.tl__item h3 { margin: 0.2rem 0 0.3rem; font-size: 1.2rem; }
.tl__item p { color: #b8b8b8; font-size: 0.95rem; }

/* Dove il browser sa legarle allo scroll, le voci compaiono entrando nello schermo. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.tl__item { animation: tl-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
		@keyframes tl-in { from { opacity: 0; transform: translateY(1.2rem); } }
	}
}

@media (max-width: 34rem) { .step__name { font-size: 0.72rem; } }