/**
 * Utilities — small single-purpose helpers. Use sparingly; prefer a
 * component class first (see components.css).
 */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-muted { color: var(--section-text-muted, var(--color-text-muted)); }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.max-w-prose { max-width: 68ch; }
.max-w-narrow { max-width: 620px; }
.mx-auto { margin-inline: auto; }

.rounded-lg { border-radius: var(--radius-lg); }
.rounded-md { border-radius: var(--radius-md); }

.hide { display: none !important; }
@media (max-width: 767px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .hide-desktop { display: none !important; } }

.no-scroll { overflow: hidden; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
	margin-bottom: var(--space-4);
}
.eyebrow::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.section-head { max-width: 640px; margin-bottom: var(--space-9); }
.section-head--center { max-width: 640px; margin-inline: auto; text-align: center; }