/**
 * Closing call to action.
 *
 * Lifted out of palm-detail.css so the home page can end with the same block
 * without pulling in 22KB of project-detail rules it has no markup for.
 *
 * palm-detail.css declares --pd-* on `.mida-pd`; this block has to work outside
 * that wrapper too, so it carries the same three tokens itself. Inside a
 * `.mida-pd` article the local declaration simply wins with identical values.
 */

.mida-pd-cta {
	--pd-line: #2a2a2a;
	--pd-muted: #999;
	--pd-alt: #141414;

	padding: 4.5rem 0;
	color: #fff;
	text-align: center;
	background: var(--pd-alt);
	border-top: 1px solid var(--pd-line);
}

.mida-pd-cta h2 {
	margin: 0 0 0.75rem;
	font-size: 2rem;
	font-weight: 600;
}

.mida-pd-cta p {
	max-width: 600px;
	margin: 0 auto 2rem;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--pd-muted);
}

.mida-pd-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.mida-pd-btn {
	padding: 14px 34px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #000;
	background: #fff;
	border: 1px solid #fff;
	border-radius: var(--border_radius);
	transition: all 0.3s ease;
}

.mida-pd-btn:hover {
	color: #fff;
	background: transparent;
}

.mida-pd-btn.is-ghost {
	color: #fff;
	background: transparent;
}

.mida-pd-btn.is-ghost:hover {
	color: #000;
	background: #fff;
}

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

@media (max-width: 767px) {
	.mida-pd-cta {
		padding: 3rem 0;
	}

	.mida-pd-cta h2 {
		font-size: 1.6rem;
	}

	.mida-pd-btn {
		flex: 1 1 100%;
	}
}