/* GC Choice Buttons — centred CTA block with a set of choice buttons.
   All appearance flows through the --gc-cb-* variable contract. */

.gc-cb {
	--gc-cb-align: center;
	--gc-cb-maxw: 820px;
	--gc-cb-gap: 18px;
	--gc-cb-btn-gap: 16px;
	--gc-cb-btn-radius: 8px;
	--gc-cb-bg: #0A0F14;
	--gc-cb-bg2: #14212B;
	--gc-cb-bg-angle: 135deg;
	--gc-cb-overlay: rgba(8,12,16,0.6);
	--gc-cb-eyebrow: #5BA7DB;
	--gc-cb-heading: #FFFFFF;
	--gc-cb-flourish: #5BA7DB;
	--gc-cb-subtext: #C7D6E2;
	--gc-cb-prompt: #5BA7DB;
	--gc-cb-p-bg: #5BA7DB;
	--gc-cb-p-bg2: #6EC1E4;
	--gc-cb-p-text: #0A0F14;
	--gc-cb-g-bg: #FFFFFF;
	--gc-cb-g-text: #5A6B75;
	--gc-cb-g-border: rgba(255,255,255,0);
	padding: 80px 24px;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	box-sizing: border-box;
}
.gc-cb *, .gc-cb *::before, .gc-cb *::after { box-sizing: border-box; }

.gc-cb--full { width: 100vw; margin-left: calc(50% - 50vw); max-width: 100vw; }
/* Edge to edge: containers are already full width, so the real gutter is the
   inner content cap. Drop it (and its side padding) so content truly fills. */
.gc-cb--full .gc-cb__inner { max-width: none; padding-left: 0; padding-right: 0; }

.gc-cb__inner {
	max-width: var(--gc-cb-maxw);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: var(--gc-cb-align);
	text-align: center;
	gap: var(--gc-cb-gap);
}
.gc-cb--txt-left .gc-cb__inner { text-align: left; }
.gc-cb--txt-right .gc-cb__inner { text-align: right; }

.gc-cb__eyebrow {
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	font-style: italic;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	color: var(--gc-cb-eyebrow);
	margin: 0;
}

.gc-cb__heading {
	position: relative;
	margin: 4px 0 0;
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-weight: 800;
	font-size: clamp(30px, 4.6vw, 56px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--gc-cb-heading);
}
.gc-cb__heading-text { display: block; }
.gc-cb__flourish {
	display: inline-block;
	width: clamp(160px, 26%, 260px);
	height: 18px;
	margin: 6px 0 0;
	color: var(--gc-cb-flourish);
}

.gc-cb__subtext {
	margin: 8px 0 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--gc-cb-subtext);
	max-width: 60ch;
}

.gc-cb__prompt {
	margin: 10px 0 0;
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-weight: 800;
	font-size: clamp(18px, 2.2vw, 24px);
	color: var(--gc-cb-prompt);
}

.gc-cb__actions {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--gc-cb-align);
	gap: var(--gc-cb-btn-gap);
}

.gc-cb__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border-radius: var(--gc-cb-btn-radius);
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform .18s ease, filter .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.gc-cb__btn:hover { transform: translateY(-2px); }
.gc-cb__btn--upper { text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }

.gc-cb__btn--primary {
	background: linear-gradient(135deg, var(--gc-cb-p-bg), var(--gc-cb-p-bg2));
	color: var(--gc-cb-p-text);
	box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--gc-cb-p-bg), transparent 35%);
}
.gc-cb__btn--primary:hover { filter: brightness(1.05); }

.gc-cb__btn--ghost {
	background: var(--gc-cb-g-bg);
	color: var(--gc-cb-g-text);
	border-color: var(--gc-cb-g-border);
}
.gc-cb__btn--ghost:hover { filter: brightness(0.97); box-shadow: 0 8px 22px -10px rgba(0,0,0,.35); }

@media (max-width: 640px) {
	.gc-cb { padding: 56px 20px; --gc-cb-gap: 12px; --gc-cb-btn-gap: 12px; }
	.gc-cb__eyebrow { font-size: 14px; }
	.gc-cb__heading { font-size: 1.7rem; }
	.gc-cb__flourish { display: none; }
	.gc-cb__subtext { font-size: 15px; line-height: 1.5; margin-top: 6px; }
	.gc-cb__prompt { font-size: 17px; margin-top: 8px; }
	.gc-cb__actions { margin-top: 10px; flex-direction: column; width: 100%; }
	.gc-cb__btn { width: 100%; min-height: 44px; padding: 14px 22px; }
}
@media (max-width: 480px) {
	.gc-cb { padding: 48px 16px; }
	.gc-cb__heading { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.gc-cb__btn:hover { transform: none; }
}