/**
 * d0a1 Hero pages (Quickstart etc.) — packs-style hero.
 *
 * PHP moves the template H1 inside the .d0a1-pricing-hero section (badge → h1 → lead),
 * so this CSS only needs to: keep the gradient line + hairline framing the zone,
 * and make the injected .d0a1-hero-h1 look like the template title.
 */
body.d0a1-hero-page .d0a1-single-header {
	display: none; /* template h1 suppressed (render_block returns '') */
}
body.d0a1-hero-page .d0a1-pricing-hero {
	position: relative;
	padding: 56px 0 40px;
	margin-bottom: var(--d0a1-gap-xl);
	border-bottom: 1px solid var(--d0a1-border);
}
body.d0a1-hero-page .d0a1-pricing-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 3px;
	background: linear-gradient(90deg, var(--d0a1-accent), var(--d0a1-dark-accent, #22D3EE));
}
body.d0a1-theme-dark.d0a1-hero-page .d0a1-pricing-hero::before {
	background: linear-gradient(90deg, var(--d0a1-dark-accent), var(--d0a1-accent));
}
body.d0a1-hero-page .d0a1-pricing-hero .d0a1-hero-h1 {
	font-size: clamp(36px, 6vw, 52px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 var(--d0a1-gap-sm);
}
body.d0a1-hero-page .d0a1-pricing-hero .is-style-d0a1-blog-badge {
	margin-bottom: var(--d0a1-gap-sm);
}
body.d0a1-hero-page .d0a1-pricing-hero .d0a1-pricing-lead {
	font-size: 18px;
	color: var(--d0a1-secondary, #475569);
	max-width: 65ch;
	margin-left: 0 !important;
	margin-right: auto !important;
}
body.d0a1-theme-dark.d0a1-hero-page .d0a1-pricing-hero {
	border-bottom-color: var(--d0a1-dark-border);
}
body.d0a1-theme-dark.d0a1-hero-page .d0a1-pricing-hero .d0a1-hero-h1 {
	color: var(--d0a1-dark-primary);
}
body.d0a1-theme-dark.d0a1-hero-page .d0a1-pricing-hero .d0a1-pricing-lead {
	color: var(--d0a1-dark-secondary, #94A3B8);
}