/**
 * Variant CSS: features--numbered-feature-rows
 * Layer 2 — Path B features role (2026-06-06).
 *
 * Features rendered as full-width, numbered editorial rows: an oversized accent
 * numeral (01-04) sits in a narrow left column, the title + description fill the
 * rest, and a hairline rule separates each row. No photos, no icons — pure
 * typographic hierarchy. "Why us" / key differentiators feel.
 *
 * All selectors scoped to .universal-features--numbered-feature-rows — no leak.
 */

body.aibt-universal .universal-features--numbered-feature-rows {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary);
	box-sizing: border-box;
}

body.aibt-universal .universal-features--numbered-feature-rows *,
body.aibt-universal .universal-features--numbered-feature-rows *::before,
body.aibt-universal .universal-features--numbered-feature-rows *::after {
	box-sizing: border-box;
}

/* ── Intro (left-aligned editorial header) ─────────────────────── */
body.aibt-universal .universal-features--numbered-feature-rows .universal-features__intro {
	margin-bottom: var(--space-2xl);
	max-width: 46ch;
}

body.aibt-universal .universal-features--numbered-feature-rows .universal-features__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-features--numbered-feature-rows h2.universal-features__headline,
body.aibt-universal .universal-features--numbered-feature-rows .universal-features__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-features--numbered-feature-rows .universal-features__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
}

/* ── Rows container ────────────────────────────────────────────── */
body.aibt-universal .universal-features--numbered-feature-rows .universal-features__rows {
	border-top: 1px solid var(--divider-primary);
}

/* Each row: top hairline already on container; subsequent rows add their own. */
body.aibt-universal .universal-features--numbered-feature-rows .universal-features__row {
	gap: clamp(1.25rem, 3.5vw, 3rem) !important;
	align-items: flex-start !important;
	margin: 0 !important;
	padding: clamp(1.5rem, 3.5vw, 2.75rem) 0 !important;
	border-bottom: 1px solid var(--divider-primary);
}

/* ── Numeral column ────────────────────────────────────────────── */
body.aibt-universal .universal-features--numbered-feature-rows .universal-features__numcol {
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
}

body.aibt-universal .universal-features--numbered-feature-rows .universal-features__num {
	font-family: var(--font-display) !important;
	font-size: clamp(2.6rem, 6vw, 4.25rem) !important;
	font-weight: 700 !important;
	line-height: 0.9 !important;
	letter-spacing: -0.04em !important;
	color: var(--accent) !important;
	margin: 0 !important;
	/* Optical alignment with the title cap-height. */
	margin-top: -0.08em !important;
}

/* ── Row body (title + desc) ───────────────────────────────────── */
body.aibt-universal .universal-features--numbered-feature-rows .universal-features__rowbody {
	flex-grow: 1 !important;
}

body.aibt-universal .universal-features--numbered-feature-rows h3.universal-features__row-title,
body.aibt-universal .universal-features--numbered-feature-rows .universal-features__row-title {
	font-family: var(--font-display) !important;
	font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.018em !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-xs) 0 !important;
}

body.aibt-universal .universal-features--numbered-feature-rows .universal-features__row-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	max-width: 62ch;
}

/* ── Mobile: keep the numeral above the body, never let it overflow ── */
@media (max-width: 781px) {
	body.aibt-universal .universal-features--numbered-feature-rows .universal-features__row {
		flex-direction: column !important;
		gap: var(--space-sm) !important;
	}
	body.aibt-universal .universal-features--numbered-feature-rows .universal-features__numcol,
	body.aibt-universal .universal-features--numbered-feature-rows .universal-features__rowbody {
		flex-basis: auto !important;
		width: 100% !important;
	}
	body.aibt-universal .universal-features--numbered-feature-rows .universal-features__num {
		margin-top: 0 !important;
	}
}

/* Drop wide uppercase tracking on narrow phones (A5 — never strain/wrap). */
@media (max-width: 640px) {
	body.aibt-universal .universal-features--numbered-feature-rows .universal-features__kicker {
		letter-spacing: 0 !important;
	}
}
