/**
 * Variant CSS: features--icon-timeline-vertical
 * Layer 2 — Path B features role (2026-06-06).
 * Features down a vertical connector line: each node = an icon in a round
 * marker sitting ON the line, with title + desc beside it. Reads as a
 * sequence / "how it works" flow. Connector drawn on the icon column;
 * the opaque icon chip masks the line where each node sits.
 * Every selector scoped to .universal-features--icon-timeline-vertical (no leak).
 */

body.aibt-universal .universal-features--icon-timeline-vertical {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary);
}

body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__intro {
	margin-bottom: var(--space-xl);
}

body.aibt-universal .universal-features--icon-timeline-vertical .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--icon-timeline-vertical h2.universal-features__headline,
body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
	max-width: 20ch;
}

/* Each node — kill WP column min-width so the narrow icon rail holds. */
body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__node {
	gap: var(--space-lg) !important;
	margin-bottom: 0 !important;
	align-items: stretch !important;
}

body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__node-iconcol {
	flex-grow: 0 !important;
	position: relative;
	display: flex !important;
	justify-content: center;
}

/* The connector line — runs the full height of each icon column; the chip
   covers it at the node, leaving visible segments between nodes. */
body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__node-iconcol::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	background: color-mix(in srgb, var(--ink) 14%, transparent);
	z-index: 0;
}

/* First node: trim line above the marker. Last node: trim below. */
body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__node:first-child .universal-features__node-iconcol::before {
	top: 1.5rem;
}

body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__node:last-child .universal-features__node-iconcol::before {
	bottom: auto;
	height: 1.5rem;
}

/* Round marker chip — opaque so it masks the connector behind it. */
body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__node-icon {
	font-size: 1.3rem !important;
	line-height: 1 !important;
	width: 3rem;
	height: 3rem;
	flex: 0 0 auto;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--background) !important;
	border: 2px solid var(--accent) !important;
	border-radius: var(--decor-radius-pill, 999px) !important;
	margin: 0 !important;
	position: relative;
	z-index: 1;
}

/* Node body — padding-bottom creates the rhythm between rows. */
body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__node-body {
	padding-bottom: var(--space-xl) !important;
}

body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__node:last-child .universal-features__node-body {
	padding-bottom: 0 !important;
}

body.aibt-universal .universal-features--icon-timeline-vertical h3.universal-features__node-title,
body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__node-title {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: var(--text-lg) !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-xs) 0 !important;
	padding-top: 0.35rem;
}

body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__node-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: 58ch;
}

@media (max-width: 781px) {
	/* Keep the timeline intact on phones: do NOT stack columns (that would
	   break the rail). Tighten the gap and shrink the marker instead. */
	body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__node {
		gap: var(--space-md) !important;
		flex-wrap: nowrap !important;
	}
	body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__node-iconcol {
		flex-basis: 3rem !important;
		width: 3rem !important;
	}
	body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__node-body {
		flex-basis: auto !important;
		padding-bottom: var(--space-lg) !important;
		min-width: 0;
	}
	body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__node-icon {
		width: 2.6rem;
		height: 2.6rem;
		font-size: 1.15rem !important;
	}
	body.aibt-universal .universal-features--icon-timeline-vertical .universal-features__kicker {
		letter-spacing: 0 !important;
	}
}