/* ===================================================================
   Social proof — Split counter band
   Full-width band, 4 cells separated by vertical dividers.
   =================================================================== */

section#marquee {
	border-block: 1px solid var(--color-line);
	background: var(--color-bg-sunken);
	position: relative;
	overflow: hidden;
}
.marquee .accent {
	color: var(--color-accent);
	margin: 0 1rem;
}
.marquee__band {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.marquee__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	padding-block: 2rem;
	border-inline-start: 1px solid var(--color-line);
	/* Override default vertical reveal with horizontal left-to-right */
	opacity: 0;
	transform: translateX(-60px);
	transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
	/* Stagger: each cell delayed slightly */
	transition-delay: calc(var(--i, 0) * 100ms);
}
.marquee__cell.is-in {
	opacity: 1;
	transform: translateX(0);
}
/* When section exits past the top, cells slide out to the right */
#marquee.is-exit .marquee__cell {
	opacity: 0;
	transform: translateX(60px);
}
.marquee__cell:first-child { border-inline-start: 0; }
.marquee__num {
	font-family: var(--font-mono);
	font-size: var(--step-xl);
	font-weight: 500;
	letter-spacing: -0.04em;
	color: var(--color-fg);
	transition: color var(--dur) var(--ease-out);
}
.marquee__label {
	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	color: var(--color-fg-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

@media (max-width: 720px) {
	.marquee__band { grid-template-columns: repeat(2, 1fr); }
	.marquee__cell:nth-child(3) { border-inline-start: 0; border-block-start: 1px solid var(--color-line); }
	.marquee__cell:nth-child(4) { border-block-start: 1px solid var(--color-line); }
}
@media (prefers-reduced-motion: reduce) {
	.marquee__cell { opacity: 1 !important; transform: none !important; transition-delay: 0s; }
}