/**
 * Variant CSS: benefits--timeline-spine
 *
 * A vertical timeline — numbered circular nodes joined by a single connecting
 * line, with title + description beside each node. Benefits read as one
 * sequential "path", not disconnected rows or cards. The connector runs from a
 * node's bottom to the next node's top (never behind a node), so it needs no
 * background-matching trick and holds on any theme shade. Text stays --ink
 * (polarity-aware); the line + node ring use color-mix on --accent / --ink.
 */

body.aibt-universal .universal-benefits--timeline-spine {
	padding-block: calc(clamp(3rem, 7vw, 5.5rem) * var(--density, 1));
}

body.aibt-universal .universal-benefits--timeline-spine .universal-benefits__intro {
	margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem);
}

body.aibt-universal .universal-benefits--timeline-spine .universal-benefits__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-benefits--timeline-spine .universal-benefits__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 !important;
	max-width: 18ch;
}

/* The list carries no gap; per-item padding sets the rhythm so the connector
   math (node-bottom → next-node-top) stays exact. */
body.aibt-universal .universal-benefits--timeline-spine .universal-benefits__list {
	gap: 0 !important;
}

body.aibt-universal .universal-benefits--timeline-spine .universal-benefits__item {
	position: relative;
	gap: clamp(1rem, 2vw, 1.4rem) !important;
	padding-bottom: calc(clamp(1.8rem, 3.4vw, 2.6rem) * var(--density, 1));
	align-items: flex-start !important;
}

body.aibt-universal .universal-benefits--timeline-spine .universal-benefits__item:last-child {
	padding-bottom: 0;
}

/* Connector: from this node's bottom (48px) to the next node's top (item end). */
body.aibt-universal .universal-benefits--timeline-spine .universal-benefits__item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 23px;
	top: 48px;
	height: calc(100% - 48px);
	width: 2px;
	background: color-mix(in srgb, var(--ink) 16%, transparent);
	z-index: 0;
}

/* Circular numbered node. */
body.aibt-universal .universal-benefits--timeline-spine .universal-benefits__num {
	flex: 0 0 48px !important;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
	font-family: var(--font-display) !important;
	font-size: 0.98rem !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: var(--accent) !important;
	margin: 0 !important;
	position: relative;
	z-index: 1;
	transition: border-color var(--duration-fast, 0.18s) var(--ease-default, ease),
		background var(--duration-fast, 0.18s) var(--ease-default, ease),
		color var(--duration-fast, 0.18s) var(--ease-default, ease);
}

body.aibt-universal .universal-benefits--timeline-spine .universal-benefits__item:hover .universal-benefits__num {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--cta-text-primary, #ffffff) !important;
}

body.aibt-universal .universal-benefits--timeline-spine .universal-benefits__body {
	flex: 1 1 auto !important;
	padding-top: 0.1rem;
}

body.aibt-universal .universal-benefits--timeline-spine .universal-benefits__item-title {
	font-family: var(--font-display) !important;
	font-size: clamp(1.15rem, 1.9vw, 1.4rem) !important;
	font-weight: 600 !important;
	line-height: 1.22 !important;
	letter-spacing: -0.01em !important;
	color: var(--ink) !important;
	margin: 0 0 0.4rem 0 !important;
}

body.aibt-universal .universal-benefits--timeline-spine .universal-benefits__item-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--ink) !important;
	opacity: 0.77;
	margin: 0 !important;
	max-width: 60ch;
}

@media (max-width: 640px) {
	/* Cap the kicker's wide tracking so the uppercase label does not
	   over-stretch / risk an awkward wrap on small screens (A5). */
	body.aibt-universal .universal-benefits--timeline-spine .universal-benefits__kicker {
		letter-spacing: 0 !important;
	}
	body.aibt-universal .universal-benefits--timeline-spine .universal-benefits__num {
		flex-basis: 42px !important;
		width: 42px;
		height: 42px;
	}
	/* Re-aim the connector at the smaller node (42px). */
	body.aibt-universal .universal-benefits--timeline-spine .universal-benefits__item:not(:last-child)::before {
		left: 20px;
		top: 42px;
		height: calc(100% - 42px);
	}
}