/* Hero — README §1.2 */

/* Horizontal gutter comes from the nested .container — this section only
   carries vertical padding, or every gutter on the page double-pads. */
.hero-dark {
	position: relative;
	overflow: hidden;
	padding-top: 118px;
	padding-bottom: 124px;
}

.hero-dark__swoosh-fill {
	width: 900px;
	right: -140px;
	bottom: -90px;
	transform: rotate(-8deg);
	fill: var(--color-primary);
	opacity: 0.17;
}
.hero-dark__swoosh-stroke {
	width: 660px;
	right: 60px;
	bottom: -40px;
	transform: rotate(-8deg);
	fill: none;
	stroke: var(--color-primary);
	stroke-width: 5;
	opacity: 0.5;
}

.hero-dark__content {
	position: relative;
	max-width: 820px;
}
.hero-dark .eyebrow { margin-bottom: 26px; }
.hero-dark h1 { margin: 0; }
.hero-dark__subline {
	margin-top: 30px;
	max-width: 60ch;
	font-size: 20px;
	line-height: 1.6;
	color: var(--color-muted-dark);
}
.hero-dark__cta {
	margin-top: 44px;
	display: flex;
	align-items: center;
	gap: 32px;
}
.hero-dark__cta .btn-primary { font-size: 17px; }

@media (max-width: 767px) {
	.hero-dark { padding-top: 52px; padding-bottom: 56px; }
	.hero-dark__subline { font-size: 17px; }
	.hero-dark__cta {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.hero-dark__cta .btn-primary { justify-content: center; }
	.hero-dark__cta .link-inline { text-align: center; }
}