/*
 * Hand-written styles — NOT part of the Carrd export.
 * Carrd re-exports overwrite index.html, main.css and main.js, but leave this
 * file alone. After a re-export, re-add in index.html:
 *   <link rel="stylesheet" href="assets/custom.css" />
 *   the .cta markup in the hero (#container03)
 */

.cta {
	display: flex;
	justify-content: var(--flex-alignment, center);
}

.cta-button {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 1em;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
	text-align: center;
	color: #27401E;
	background-color: #50EB97;
	border: 1px solid #50EB97;
	border-radius: 2rem;
	padding: 0.9em 1.75em;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cta-button:hover,
.cta-button:focus-visible {
	background-color: transparent;
	color: #50EB97;
	transform: translateY(-1px);
}

.cta-button:focus-visible {
	outline: 2px solid #50EB97;
	outline-offset: 3px;
}

.cta-button:active {
	transform: translateY(0);
}

/* Arrow nudges on hover; hidden from screen readers via aria-hidden in markup. */
.cta-button .arrow {
	transition: transform 0.2s ease;
}

.cta-button:hover .arrow,
.cta-button:focus-visible .arrow {
	transform: translateX(3px);
}

@media (max-width: 480px) {
	.cta-button {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cta-button,
	.cta-button .arrow {
		transition: none;
		transform: none !important;
	}
}