/* Features page — long-form module + extension catalogue.
   Section-header pattern, lead paragraphs, closing CTA band. */

/* ---------- Section lead paragraph (under category eyebrow + heading) ---------- */

.dt-features-lead {
	margin: 0;
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--dt-ink-soft);
	max-width: 56ch;
	margin-inline: auto;
	text-align: center;
}

/* ---------- Category section heading group ---------- */

.dt-features-cat__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 720px;
}

.dt-features-cat__tagline {
	margin: 0;
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--dt-ink-soft);
}

/* ---------- Closing CTA band (dark band before footer) ---------- */

.dt-features-cta {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) auto;
	align-items: center;
	gap: var(--space-8);
}

.dt-features-cta__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.dt-features-cta__heading {
	margin: 0;
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--dt-on-dark);
}

.dt-features-cta__sub {
	margin: 0;
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: rgba(255, 255, 255, 0.72);
	max-width: 56ch;
}

.dt-features-cta__actions {
	display: flex;
	gap: var(--space-3);
	flex-shrink: 0;
}

/* On the dark variant, the secondary button needs to be visible against
   the dark hero band. Override the default light-bg secondary look. */
.dt-features-cta .dt-button--secondary {
	color: var(--dt-on-dark);
	background: transparent;
	border-color: rgba(255, 255, 255, 0.32);
}

.dt-features-cta .dt-button--secondary:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--dt-on-dark);
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
	.dt-features-cta {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}

	.dt-features-cta__actions { flex-direction: column; align-items: stretch; }
}