/* [mainsail_button] — same look as the site's other buttons: black outline,
   10px corners, fills black on hover ("solid" is filled from the start). */
.mainsail-btn {
	display: inline-block;
	margin: 8px 0;
	padding: 16px 32px;
	border: 1px solid #000;
	border-radius: 10px;
	background: transparent;
	color: #000;
	font: 500 14px/1 var(--global-body-font-family, "Roboto", sans-serif);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mainsail-btn:hover,
.mainsail-btn:focus-visible {
	background: #000;
	color: #fff;
	border-color: #000;
}

.mainsail-btn--solid {
	background: #000;
	color: #fff;
}

.mainsail-btn--solid:hover,
.mainsail-btn--solid:focus-visible {
	background: var(--mainsail-color-accent, #24bef5);
	border-color: var(--mainsail-color-accent, #24bef5);
	color: #000;
}

@media (prefers-reduced-motion: reduce) {
	.mainsail-btn {
		transition: none;
	}
}