/* Layout: Hero */

.section--hero .hero__inner {
	display: grid;
	gap: var(--space-l);
	align-items: center;
}

.hero--centered .hero__inner {
	max-width: 52rem;
	text-align: center;
	justify-items: center;
}

.hero--split .hero__inner {
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.hero--split .hero__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xl);
	}
}

.hero__eyebrow {
	margin-bottom: var(--space-2xs);
	color: var(--color-accent);
	font-size: var(--text-xs);
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hero__title {
	margin-bottom: var(--space-s);
	font-size: var(--text-3xl);
	letter-spacing: -0.02em;
}

.hero__text {
	max-width: 46ch;
	margin-bottom: var(--space-m);
	color: var(--color-muted);
	font-size: var(--text-lg);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.hero--centered .hero__actions {
	justify-content: center;
}

.hero__media {
	position: relative;
}

.hero__image {
	width: 100%;
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-m);
}

/*
 * Selling-point bullets. Custom markers rather than list-style, so the bullet
 * colour follows the section (it inverts on dark backgrounds) and the hanging
 * indent stays correct when a line wraps.
 */
.hero__bullets {
	margin: 0 0 var(--space-m);
	padding: 0;
	list-style: none;
	font-weight: 700;
	text-align: left;
}

.hero__bullets li {
	position: relative;
	padding-left: 1em;
}

.hero__bullets li + li {
	margin-top: 0.35em;
}

.hero__bullets li::before {
	content: "•";
	position: absolute;
	left: 0;
}

/* Centred hero: the list stays left-aligned but the block itself centres. */
.hero--centered .hero__bullets {
	width: fit-content;
	margin-inline: auto;
}