/* ==========================================================================
   MaxxedOut — Counters band
   ========================================================================== */

.mxo-scope.mxo-stats {
	--stat-size: clamp(46px, 4.6vw, 68px);
	--mx-pad-t: clamp(72px, 7vw, 104px);
	--mx-pad-b: clamp(72px, 7vw, 104px);
}
.mxo-scope .mxo-stats__slashes {
	position: absolute;
	right: -4%;
	top: -20%;
	display: flex;
	gap: 28px;
	height: 140%;
	opacity: 0.08;
	pointer-events: none;
}
.mxo-scope .mxo-stats__slashes i {
	display: block;
	width: 90px;
	height: 100%;
	background: var(--mx-white);
	transform: skewX(var(--mx-slant));
}
.mxo-scope.mxo-surface--white .mxo-stats__slashes i,
.mxo-scope.mxo-surface--mist .mxo-stats__slashes i { background: var(--mx-blue); }
.mxo-scope.mxo-surface--white .mxo-stats__slashes,
.mxo-scope.mxo-surface--mist .mxo-stats__slashes { opacity: 0.05; }

.mxo-scope .mxo-stats__row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr));
}
.mxo-scope .mxo-stat {
	position: relative;
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 6px clamp(18px, 2.6vw, 40px);
}
.mxo-scope .mxo-stat:first-child { padding-left: 0; }
.mxo-scope .mxo-stat + .mxo-stat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: var(--s-line);
}
.mxo-scope .mxo-stat__num {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-size: var(--stat-size);
	font-weight: 760;
	font-stretch: 108%;
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--s-ink);
	font-variant-numeric: tabular-nums;
}
.mxo-scope .mxo-stat__num em {
	font-style: normal;
	font-size: 0.5em;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--s-accent);
}
.mxo-scope .mxo-stat__label {
	margin-top: 6px;
	font-size: 18px;
	font-weight: 650;
	line-height: 1.3;
	color: var(--s-ink);
}
.mxo-scope .mxo-stat__text {
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--s-body);
}

@media (max-width: 1024px) {
	.mxo-scope .mxo-stats__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 44px 0;
	}
	.mxo-scope .mxo-stat:nth-child(odd) { padding-left: 0; }
	.mxo-scope .mxo-stat:nth-child(odd)::before { display: none; }
}
@media (max-width: 480px) {
	.mxo-scope .mxo-stats__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.mxo-scope .mxo-stat { padding: 26px 0; }
	.mxo-scope .mxo-stat + .mxo-stat::before {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
		display: block;
	}
	.mxo-scope .mxo-stat:first-child { padding-top: 0; }
}