/* ============================================================================
   Shared section primitives — headers, eyebrows, cards
   ============================================================================ */

/* ---- Section header ------------------------------------------------------ */
.section-head {
	max-width: var(--measure-wide);
	margin-bottom: clamp(var(--space-7), 5vw, var(--space-8));
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--accent-strong);
}

.section-eyebrow::before {
	content: "";
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: var(--accent);
	flex-shrink: 0;
}

.section-head--center .section-eyebrow {
	justify-content: center;
}

.section-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
	text-wrap: balance;
}

.section-intro {
	margin: var(--space-5) 0 0;
	max-width: var(--measure-narrow);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
	color: var(--text-secondary);
	text-wrap: pretty;
}

.section-head--center .section-intro {
	margin-inline: auto;
}

/* ---- Alternating band ---------------------------------------------------- */
.section--surface {
	background: var(--bg-surface);
	border-block: var(--border-hairline) solid var(--border-default);
}

.section--ink {
	background: var(--bg-inverse);
	color: var(--text-on-dark);
}

/* ============================================================================
   Benefits cards
   ============================================================================ */
.benefit-card {
	padding: clamp(var(--space-5), 3vw, var(--space-6));
	background: var(--bg-surface);
	border: var(--border-hairline) solid var(--border-default);
	border-radius: var(--radius-lg);
	transition: transform var(--dur-slow) var(--ease-out),
		box-shadow var(--dur-slow) var(--ease-out),
		border-color var(--dur-base) var(--ease-standard);
}

.benefit-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--color-graphite);
}

.benefit-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 52px;
	block-size: 52px;
	margin-bottom: var(--space-5);
	border-radius: var(--radius-md);
	background: var(--accent-wash);
	color: var(--accent-strong);
}

.benefit-card__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	letter-spacing: var(--tracking-snug);
	color: var(--text-primary);
}

.benefit-card__text {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-secondary);
}