/* Shared button styles — pill-shaped, per every CTA across the mockups. */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.75em;
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out, transform 180ms ease-out;
	white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
	transform: translateY(-1px);
}

/* Solid navy — primary action on light backgrounds (header, hero). */
.btn--navy {
	background: var(--navy);
	color: var(--paper);
}
.btn--navy:hover,
.btn--navy:focus-visible {
	background: var(--navy-dark);
	color: var(--paper);
}

/* Outline navy — secondary action on light backgrounds. */
.btn--outline {
	background: transparent;
	color: var(--navy);
	border-color: var(--navy);
}
.btn--outline:hover,
.btn--outline:focus-visible {
	background: var(--navy);
	color: var(--paper);
}

/* Solid cyan — primary action on dark backgrounds (CTA band, dark process band). */
.btn--cyan {
	background: var(--cyan);
	color: var(--navy);
}
.btn--cyan:hover,
.btn--cyan:focus-visible {
	background: var(--paper);
	color: var(--navy);
}

/* Outline light — secondary action on dark backgrounds. */
.btn--outline-light {
	background: transparent;
	color: var(--paper);
	border-color: rgba(255, 255, 255, 0.5);
}
.btn--outline-light:hover,
.btn--outline-light:focus-visible {
	background: var(--paper);
	color: var(--navy);
	border-color: var(--paper);
}

/* Phones: buttons were the most oversized element — smaller type and padding. */
@media (max-width: 640px) {
	.btn {
		padding: 0.75em 1.4em;
		font-size: 0.875rem; /* ~13px at the 15px phone root */
	}
}