/* GC Product Guide — step-by-step card carousel.
   All appearance flows through the --pg-* variable contract; defaults fall back
   to the theme tokens so an untouched widget matches the site. */

.gc-pg {
	--pg-gap: 28px;
	--pg-card: 300px;
	--pg-radius: var(--gc-radius-md, 16px);
	--pg-edge: 24px;
	--pg-fade-x: 56px;
	--pg-room-t: 14px;
	--pg-room-b: 46px;
	--pg-room-x: 12px;
	--pg-bg: var(--gc-bg, #F4F8FB);
	--pg-bg2: var(--gc-blue-light, #EAF3FA);
	--pg-bg-angle: 135deg;
	--pg-eyebrow: var(--gc-blue-dark, #3D82B3);
	--pg-title: var(--gc-ink, #14212B);
	--pg-sub: var(--gc-muted, #5A6B75);
	--pg-card-bg: var(--gc-white, #FFFFFF);
	--pg-card-border: var(--gc-woo-border, #E1E9EE);
	--pg-media-bg: var(--gc-blue-light, #EAF3FA);
	--pg-pos-x: 50%;
	--pg-pos-y: 50%;
	--pg-fit: cover;
	--pg-zoom: 1;
	--pg-step: var(--gc-blue, #5BA7DB);
	--pg-card-title: var(--gc-ink, #14212B);
	--pg-bullet: var(--gc-muted, #5A6B75);
	--pg-ic-arrow: var(--gc-blue, #5BA7DB);
	--pg-ic-check: var(--gc-blue, #5BA7DB);
	--pg-ic-lightbulb: var(--gc-accent, #F2994A);
	--pg-ic-bell: var(--gc-accent, #F2994A);
	--pg-nav-bg: var(--gc-white, #FFFFFF);
	--pg-nav-ink: var(--gc-ink, #14212B);
	padding: 72px 0;
	background: var(--pg-bg);
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
}
.gc-pg--edge { width: 100vw; margin-left: calc(50% - 50vw); max-width: 100vw; }
/* Edge to edge: fill the width and drop the inner side padding for a true bleed. */
.gc-pg--edge .gc-pg__inner { max-width: none; padding-left: 0; padding-right: 0; }
.gc-pg *, .gc-pg *::before, .gc-pg *::after { box-sizing: border-box; }

/* Dark skin — readable on the dark brand pages (matches #060C12). Placed after
   the base block so it wins on equal specificity; explicit colour controls
   (higher-specificity Elementor CSS) still override either skin. */
.gc-pg--skin-dark {
	--pg-bg: transparent;
	--pg-bg2: rgba(14, 26, 36, .6);
	--pg-eyebrow: #6EC1E4;
	--pg-title: #F4F8FB;
	--pg-sub: #AEC3D0;
	--pg-card-bg: rgba(255, 255, 255, .055);
	--pg-card-border: rgba(255, 255, 255, .14);
	--pg-media-bg: rgba(255, 255, 255, .04);
	--pg-step: #6EC1E4;
	--pg-card-title: #F4F8FB;
	--pg-bullet: #C3D2DD;
	--pg-ic-arrow: #6EC1E4;
	--pg-ic-check: #6EC1E4;
	--pg-ic-lightbulb: #F2994A;
	--pg-ic-bell: #F2994A;
	--pg-nav-bg: rgba(255, 255, 255, .12);
	--pg-nav-ink: #F4F8FB;
}
/* Frosted glass over the dark page texture. */
.gc-pg--skin-dark .gc-pg__card {
	backdrop-filter: blur(16px) saturate(1.15);
	-webkit-backdrop-filter: blur(16px) saturate(1.15);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
}
.gc-pg--skin-dark .gc-pg__nav {
	backdrop-filter: blur(10px) saturate(1.1);
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
}

.gc-pg--bg-none { background: transparent; }
.gc-pg--bg-gradient { background: linear-gradient(var(--pg-bg-angle), var(--pg-bg), var(--pg-bg2)); }
.gc-pg--bg-fade {
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--pg-bg), transparent 100%) 0%,
		var(--pg-bg) 14%, var(--pg-bg) 86%,
		color-mix(in srgb, var(--pg-bg), transparent 100%) 100%);
}

.gc-pg__inner { max-width: var(--gc-container, 1312px); margin: 0 auto; padding: 0 var(--pg-edge); }
/* Full: fill the (already full-width) page section. No 100vw hack — that
   mis-measures inside the Elementor editor canvas and offsets the row. */
.gc-pg--full .gc-pg__inner { max-width: none; }

/* Header */
.gc-pg__head { max-width: 720px; margin: 0 0 44px; }
.gc-pg--head-center .gc-pg__head { margin-left: auto; margin-right: auto; text-align: center; }
.gc-pg--head-left .gc-pg__head { text-align: left; }
.gc-pg__eyebrow { display: inline-block; margin-bottom: 14px; font-family: var(--gc-font-heading, "Manrope", sans-serif); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-eyebrow); }
.gc-pg__title { margin: 0 0 .35em; font-family: var(--gc-font-heading, "Manrope", sans-serif); font-weight: 800; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; color: var(--pg-title); }
.gc-pg__sub { margin: 0; font-size: 16px; line-height: 1.6; color: var(--pg-sub); }

/* Viewport + track */
.gc-pg__viewport { position: relative; }
.gc-pg__track {
	display: flex; gap: var(--pg-gap); margin: 0; padding: var(--pg-room-t) var(--pg-room-x) var(--pg-room-b);
	list-style: none; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
}
.gc-pg__track::-webkit-scrollbar { display: none; }
/* Only fade the track edges when the cards actually overflow the viewport;
   when every card fits, the JS drops .gc-pg--has-overflow and the mask is off. */
.gc-pg--fade-x.gc-pg--has-overflow .gc-pg__track {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--pg-fade-x), #000 calc(100% - var(--pg-fade-x)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--pg-fade-x), #000 calc(100% - var(--pg-fade-x)), transparent 100%);
}
/* grow to fill the full row when the cards fit; when there are too many they
   hold --pg-card and the row scrolls (grow has no free space to act on). */
.gc-pg__slide { flex: 1 0 min(var(--pg-card), var(--pg-card-cap, 100%)); scroll-snap-align: start; }

/* Card */
.gc-pg__card {
	display: flex; flex-direction: column; height: 100%;
	background: var(--pg-card-bg); border: 1px solid var(--pg-card-border);
	border-radius: var(--pg-radius); box-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20,33,43,.12));
	overflow: hidden;
}

/* Media + shapes */
.gc-pg__media { position: relative; display: flex; align-items: center; justify-content: center; background: var(--pg-media-bg); overflow: hidden; }
.gc-pg__media img {
	width: 100%; height: 100%; display: block;
	object-fit: var(--pg-fit, cover);
	object-position: var(--pg-pos-x, 50%) var(--pg-pos-y, 50%);
	transform: scale(var(--pg-zoom, 1));
	transform-origin: var(--pg-pos-x, 50%) var(--pg-pos-y, 50%);
}
/* Rounded + arch bleed flush to the card top and sides; the card's own radius
   and overflow:hidden clip the top corners so the image IS the top edge.
   Circle + squircle stay inset. */
.gc-pg--shape-rounded .gc-pg__media { aspect-ratio: var(--pg-ratio, 4 / 3); }
.gc-pg--shape-arch .gc-pg__media { aspect-ratio: var(--pg-ratio, 1 / 1); }
/* Arch: one smooth continuous dome. Top horizontal radii are 50% + 50% so they
   MEET at the centre (no flat top, no lumpy shoulders); vertical radius is a
   fixed height so it stays a clean wide dome, not a tall point. */
.gc-pg--shape-arch .gc-pg__card { border-radius: 50% 50% var(--pg-radius) var(--pg-radius) / var(--pg-arch, 160px) var(--pg-arch, 160px) var(--pg-radius) var(--pg-radius); }
.gc-pg--shape-squircle .gc-pg__media { margin: 20px 20px 0; aspect-ratio: var(--pg-ratio, 1 / 1); border-radius: 28% / 24%; }
.gc-pg--shape-circle .gc-pg__media { width: 168px; height: 168px; margin: 24px auto 0; border-radius: 50%; }

/* Body */
.gc-pg__body { display: flex; flex-direction: column; padding: 20px 22px 24px; flex: 1; }
.gc-pg--shape-circle .gc-pg__body { text-align: center; align-items: center; }
.gc-pg__step { font-family: var(--gc-font-heading, "Manrope", sans-serif); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--pg-step); }
.gc-pg__card-title { margin: 2px 0 14px; font-family: var(--gc-font-heading, "Manrope", sans-serif); font-weight: 800; font-size: clamp(19px, 2.4vw, 22px); line-height: 1.2; color: var(--pg-card-title); }

/* Bullets */
.gc-pg__bullets { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; text-align: left; width: 100%; }
.gc-pg__bullet { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--pg-bullet); }
.gc-pg__bullet-text { flex: 1; }
.gc-pg__ic { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--pg-ic-arrow); }
.gc-pg__ic--arrow { color: var(--pg-ic-arrow); }
.gc-pg__ic--check { color: var(--pg-ic-check); }
.gc-pg__ic--lightbulb { color: var(--pg-ic-lightbulb); }
.gc-pg__ic--bell { color: var(--pg-ic-bell); }
/* Highlight rows (lightbulb / bell) read as sub-headings. */
.gc-pg__bullet--lightbulb, .gc-pg__bullet--bell { font-weight: 700; color: var(--pg-card-title); }

/* Nav arrows */
.gc-pg__nav {
	position: absolute; top: 40%; transform: translateY(-50%); z-index: 2;
	display: none; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; border: 1px solid var(--pg-card-border);
	border-radius: 50%; background: var(--pg-nav-bg); color: var(--pg-nav-ink);
	box-shadow: var(--gc-shadow-pill, 0 6px 18px -6px rgba(20,33,43,.28)); cursor: pointer;
	transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.gc-pg--has-overflow .gc-pg__nav { display: flex; }
.gc-pg__nav svg { width: 22px; height: 22px; }
.gc-pg__nav--prev { left: -6px; }
.gc-pg__nav--next { right: -6px; }
.gc-pg__nav--next svg { transform: scaleX(-1); }
.gc-pg__nav:hover { background: var(--gc-blue, #5BA7DB); color: #fff; }
.gc-pg__nav:focus-visible { outline: 2px solid var(--gc-blue, #5BA7DB); outline-offset: 2px; }
.gc-pg__nav:disabled { opacity: .35; cursor: default; }
.gc-pg__nav:disabled:hover { background: var(--pg-nav-bg); color: var(--pg-nav-ink); }

@media (max-width: 640px) {
	.gc-pg {
		--pg-card-cap: 82vw;
		--pg-gap: 14px;
		--pg-room-t: 8px;
		--pg-room-b: 24px;
		--pg-room-x: 4px;
		--pg-fade-x: 24px;
		padding: 52px 0;
	}
	.gc-pg__nav { display: none !important; }
	.gc-pg__inner { --pg-edge: 20px; }
	.gc-pg__head { margin-bottom: 28px; }
	.gc-pg__eyebrow { margin-bottom: 8px; font-size: 11px; letter-spacing: .04em; }
	.gc-pg__title { font-size: clamp(22px, 6vw, 26px); }
	.gc-pg__sub { font-size: 14.5px; line-height: 1.5; }
	.gc-pg__body { padding: 16px 18px 18px; }
	.gc-pg__step { font-size: 12px; }
	.gc-pg__card-title { margin: 2px 0 10px; font-size: 17px; }
	.gc-pg__bullets { gap: 9px; }
	.gc-pg__bullet { gap: 8px; font-size: 14.5px; }
	.gc-pg__ic { width: 18px; height: 18px; }
	.gc-pg--shape-squircle .gc-pg__media { margin: 14px 14px 0; }
	.gc-pg--shape-circle .gc-pg__media { width: 128px; height: 128px; margin: 18px auto 0; }
	.gc-pg--shape-arch .gc-pg__card { --pg-arch: 96px; }
	.gc-pg--skin-dark .gc-pg__card { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .55); }
}

@media (max-width: 480px) {
	.gc-pg { --pg-card-cap: 86vw; padding: 44px 0; }
	.gc-pg__inner { --pg-edge: 16px; }
	.gc-pg__title { font-size: clamp(21px, 6.2vw, 23px); }
	.gc-pg__head { margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.gc-pg__track { scroll-behavior: auto; }
	.gc-pg__nav { transition: none; }
}