/**
 * Shared button component — a circle that grows into a pill on hover.
 * Loaded on every front-end page so all CTAs behave the same.
 */

body .c-pill,
body .cg-btn,
body .cg-form .cg-btn,
body .c-form button[type="submit"],
body .c-search__form button[type="submit"] {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 64px;
	padding: 0 32px 0 80px;
	border: 0;
	border-radius: 32px;
	background: transparent;
	font-family: "Antonio", "Arimo", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.35s ease;
	cursor: pointer;
}

body .c-pill::after,
body .cg-btn::after,
body .cg-form .cg-btn::after,
body .c-form button[type="submit"]::after,
body .c-search__form button[type="submit"]::after {
	content: "";
	position: absolute;
	left: 2px;
	top: 50%;
	width: 60px;
	height: 60px;
	margin-top: -30px;
	border-radius: 50%;
	background: var(--accent);
	z-index: -1;
	transition: width 0.4s ease, border-radius 0.4s ease, left 0.4s ease;
}

body .c-pill:hover,
body .c-pill:focus-visible,
body .cg-btn:hover,
body .cg-btn:focus-visible,
body .cg-form .cg-btn:hover,
body .c-form button[type="submit"]:hover,
body .c-search__form button[type="submit"]:hover {
	color: #fff;
	background: transparent;
	border-color: transparent;
}

body .c-pill:hover::after,
body .c-pill:focus-visible::after,
body .cg-btn:hover::after,
body .cg-btn:focus-visible::after,
body .cg-form .cg-btn:hover::after,
body .c-form button[type="submit"]:hover::after,
body .c-search__form button[type="submit"]:hover::after {
	left: 0;
	width: 100%;
	border-radius: 32px;
}


/* the wide button keeps the source's fixed 230×64 box */
body .c-pill--wide { width: 230px; padding: 0 29px 0 62px; border: 0; }
body .cg-form .cg-btn { justify-self: start; margin-top: 14px; }