/**
 * Variant CSS: stats--feature-figure-with-support
 *
 * Number hierarchy — one dominant hero metric (oversized accent figure + label
 * + a line of context) leads on the left, three supporting metrics stack on the
 * right, separated by hairlines. Unlike the egalitarian rows/cards: one flagship
 * proof leads, the rest reinforce. The hero figure takes --accent so it owns the
 * eye; supporting figures stay --ink. Static, no JS counter. Part of the `stats`
 * role.
 */

body.aibt-universal .universal-stats--feature-figure-with-support {
	padding-block: calc(clamp(3rem, 7vw, 5rem) * var(--density, 1));
}

/* Intro. */
body.aibt-universal .universal-stats--feature-figure-with-support .universal-stats__intro {
	margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}

body.aibt-universal .universal-stats--feature-figure-with-support .universal-stats__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-sm) 0 !important;
}

body.aibt-universal .universal-stats--feature-figure-with-support .universal-stats__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-stats--feature-figure-with-support .universal-stats__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

/* Grid: hero + support. */
body.aibt-universal .universal-stats--feature-figure-with-support .universal-stats__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/* ---- Hero metric ---- */
body.aibt-universal .universal-stats--feature-figure-with-support .universal-stats__hero-number {
	font-family: var(--font-display) !important;
	font-size: clamp(3.6rem, 9vw, 6.6rem) !important;
	font-weight: 700 !important;
	line-height: 0.92 !important;
	letter-spacing: -0.04em !important;
	color: var(--accent) !important;
	margin: 0 !important;
	font-variant-numeric: tabular-nums;
}

body.aibt-universal .universal-stats--feature-figure-with-support .universal-stats__hero-label {
	font-family: var(--font-display) !important;
	font-size: clamp(1.15rem, 2.4vw, 1.5rem) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--ink) !important;
	margin: clamp(0.8rem, 2vw, 1.1rem) 0 0 0 !important;
}

body.aibt-universal .universal-stats--feature-figure-with-support .universal-stats__hero-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--ink) !important;
	opacity: 0.66;
	margin: var(--space-sm) 0 0 0 !important;
	max-width: 40ch;
}

/* ---- Supporting metrics ---- */
body.aibt-universal .universal-stats--feature-figure-with-support .universal-stats__support-item {
	padding-block: calc(clamp(0.9rem, 2.4vw, 1.3rem) * var(--density, 1));
	border-top: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
}

body.aibt-universal .universal-stats--feature-figure-with-support .universal-stats__support-item:first-child {
	border-top: none;
	padding-top: 0;
}

body.aibt-universal .universal-stats--feature-figure-with-support .universal-stats__support-number {
	font-family: var(--font-display) !important;
	font-size: clamp(1.7rem, 3.4vw, 2.4rem) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: -0.03em !important;
	color: var(--ink) !important;
	margin: 0 !important;
	font-variant-numeric: tabular-nums;
}

body.aibt-universal .universal-stats--feature-figure-with-support .universal-stats__support-label {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--ink) !important;
	opacity: 0.66;
	margin: 0.25rem 0 0 0 !important;
}

/* Mobile: stack hero over support. */
@media (max-width: 781px) {
	body.aibt-universal .universal-stats--feature-figure-with-support .universal-stats__grid {
		grid-template-columns: 1fr;
		gap: clamp(1.8rem, 6vw, 2.6rem);
	}
}