/**
 * Variant CSS: offer--four-step-ribbon
 * Layer 2 — Path B universal offer variant (authored 2026-06-10).
 *
 * Concept: EXACTLY FOUR services as horizontal numbered steps strung on one
 * continuous connector ribbon (1 → 2 → 3 → 4). Each step centres a large
 * circular accent number sitting ON the line, with the service title + a short
 * desc beneath. A legible, sequential "how it works" path — for when the four
 * services read as an ordered journey.
 *
 * Differentiator vs sibling offer variants:
 *   - vertical-icon-rail: vertical spine, icon nodes, one per row.
 *   - numbered-grid-6-capabilities: 6-cell grid, corner numbers, no connector.
 *   - quad-card-grid (count-4 sibling): boxed 2×2 cards.
 *   THIS one: a horizontal 4-node connector ribbon (process steps).
 *
 * Tokens: semantic only (Layer 2 API). The connector + node ring are --accent;
 * the node face sits on --background so the line reads as passing behind it.
 * On hover the node fills with accent and lifts.
 */

/* == Section shell == */
body.aibt-universal .universal-offer--four-step-ribbon {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary);
}

/* Centred intro: centred children of a constrained alignfull section need
   horizontal `auto` margins or they left-shift (A8/A9). */
body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__intro {
	margin: 0 auto clamp(2.75rem, 6vh, 4.5rem) auto !important;
}

body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__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 auto var(--space-md) auto !important;
}

body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 auto !important;
}

body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-md) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: var(--space-md) auto 0 auto !important;
	max-width: 56ch;
}

/* == The ribbon == */
body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__ribbon {
	position: relative;
	gap: clamp(1rem, 2.5vw, 2rem) !important;
	align-items: flex-start !important;
}

/* Connector line: a single hairline drawn across the node centreline (the node
   radius ≈ 1.75rem, so the line sits at that y). Inset by ~1/8 so it starts and
   ends under the first/last node rather than bleeding to the section edges. */
body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__ribbon::before {
	content: "";
	position: absolute;
	top: clamp(1.4rem, 3vw, 1.75rem);
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	background: var(--divider-accent, var(--accent));
	opacity: 0.45;
	z-index: 0;
}

/* == Step == */
body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__step {
	position: relative;
	z-index: 1;
	flex: 1 1 0 !important;
	min-width: 0 !important;
	text-align: center;
}

/* Numbered node: circular accent-ringed disc on a solid --background face so the
   connector reads as passing behind it. Fills on hover. */
body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(2.8rem, 6vw, 3.5rem);
	height: clamp(2.8rem, 6vw, 3.5rem);
	margin: 0 auto var(--space-md) auto !important;
	background: var(--background) !important;
	border: 2px solid var(--accent);
	border-radius: 999px;
	font-family: var(--font-display) !important;
	font-size: var(--text-lg) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: var(--accent) !important;
	transition:
		background var(--duration-fast) var(--ease-snappy),
		color var(--duration-fast) var(--ease-snappy),
		transform var(--duration-fast) var(--ease-snappy);
}

body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__step:hover .universal-offer__step-num,
body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__step:focus-within .universal-offer__step-num {
	background: var(--accent) !important;
	color: var(--on-accent, #fff) !important;
	transform: translateY(-3px);
}

/* == Step title == */
body.aibt-universal .universal-offer--four-step-ribbon h3.universal-offer__step-title,
body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__step-title {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: var(--text-lg) !important;
	color: var(--text-primary) !important;
	margin: 0 auto var(--space-xs) auto !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	max-width: 18ch;
}

/* == Step description == */
body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__step-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-normal) !important;
	color: var(--text-secondary) !important;
	margin: 0 auto !important;
	max-width: 26ch;
}

/* == Responsive == */
/* 641-959: keep four across but tighten the gutter + drop the connector inset
   so the shorter line still spans node-to-node. */
@media (min-width: 641px) and (max-width: 959px) {
	body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__ribbon {
		gap: clamp(0.5rem, 1.5vw, 1rem) !important;
	}
	body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__ribbon::before {
		left: 12.5%;
		right: 12.5%;
	}
}

/* ≤640: stack to a vertical sequence — the connector becomes a vertical spine
   running down the left of the centred nodes is fragile, so drop the connector
   and stack centred steps with comfortable rhythm. */
@media (max-width: 640px) {
	body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__ribbon {
		flex-direction: column !important;
		gap: clamp(1.75rem, 6vw, 2.5rem) !important;
	}
	body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__ribbon::before {
		display: none;
	}
	body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__step {
		width: 100% !important;
	}
	body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__step-title,
	body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__step-desc {
		max-width: 34ch;
	}
	body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__kicker {
		letter-spacing: var(--tracking-wide) !important;
	}
}

/* == Motion respect == */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__step-num {
		transition: none;
	}
	body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__step:hover .universal-offer__step-num,
	body.aibt-universal .universal-offer--four-step-ribbon .universal-offer__step:focus-within .universal-offer__step-num {
		transform: none;
	}
}