@layer components {
	.cta { background-color: var(--color-primary); color: var(--color-primary-foreground); }
	.cta__inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
		padding-block: 3.5rem;
	}
	@media (min-width: 640px) { .cta__inner { flex-direction: row; align-items: center; justify-content: space-between; } }
	.cta__copy { max-width: 36rem; }
	.cta__title { font-size: 1.5rem; }
	@media (min-width: 640px) { .cta__title { font-size: 1.875rem; } }
	.cta__description { margin-top: 0.75rem; color: var(--primary-foreground-85); }
	.cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
	.cta .btn--secondary {
		background-color: var(--color-background);
		color: var(--color-primary);
		border-color: transparent;
	}
	.cta .btn--ghost {
		color: var(--color-primary-foreground);
		border: 1px solid var(--primary-foreground-30);
	}
}