/* ═══════════════════════════════════════════════════════════════════════
   how-it-works.css — premium landing page for /how-it-works.

   Reuses tokens from /custom/css/core.css. Same red-glow / 16-radius /
   Outfit-Figtree family as the rest of the site. No max-width on the
   wrapper — content spans the full screen with the standard 28px gutter.

   Block: .gg-hiw  (How It Works)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Body / page wrapper ─────────────────────────────────────────────── */
.gg-hiw-body{ background: var(--gg-off-white, #FAFAFA); }
.gg-hiw-body::before{
	content: "";
	position: fixed; inset: 0;
	background:
		radial-gradient(1100px 460px at 8% -8%, rgba(237,41,56,.06), transparent 70%),
		radial-gradient(900px 420px at 110% 12%, rgba(237,41,56,.04), transparent 75%);
	pointer-events: none; z-index: 0;
}
.gg-hiw{ width: 100%; padding: 18px 28px 32px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }
@media (max-width: 700px){ .gg-hiw{ padding: 12px 14px 48px; gap: clamp(24px, 6vw, 36px); } }

/* ── Shared atoms ────────────────────────────────────────────────────── */
.gg-hiw__eyebrow{
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	color: var(--gg-red-deep, #B91C28);
	letter-spacing: .14em; text-transform: uppercase;
}
.gg-hiw__eyebrow::before{
	content: ""; width: 22px; height: 2px;
	background: var(--gg-red, #ED2938); border-radius: 2px;
}
.gg-hiw__eyebrow i{ color: var(--gg-red, #ED2938); font-size: 13px; }
.gg-hiw__eyebrow--light{ color: rgba(255,255,255,.82); }
.gg-hiw__eyebrow--light::before{ background: rgba(255,255,255,.55); }
.gg-hiw__eyebrow--light i{ color: #fff; }

.gg-hiw__btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 22px;
	border-radius: 12px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 700;
	letter-spacing: .03em;
	white-space: nowrap;
	transition: all 200ms ease;
	cursor: pointer;
	border: 1.5px solid transparent;
}
.gg-hiw__btn i{ font-size: 15px; transition: transform 200ms ease; }
.gg-hiw__btn--primary{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	box-shadow: 0 12px 28px -10px rgba(237,41,56,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.gg-hiw__btn--primary:hover{ filter: brightness(1.06); transform: translateY(-1px); color: #fff; }
.gg-hiw__btn--primary:hover i{ transform: translateX(2px); }
.gg-hiw__btn--ghost{
	background: var(--gg-white, #fff);
	border-color: var(--gg-gray-200, #E5E7EB);
	color: var(--gg-gray-800, #1F2937);
}
.gg-hiw__btn--ghost:hover{
	border-color: var(--gg-red-subtle, rgba(237,41,56,.4));
	color: var(--gg-red-deep, #B91C28);
	transform: translateY(-1px);
}
.gg-hiw__btn--ghost:hover i{ transform: translateX(2px); }
.gg-hiw__btn--white{
	background: #fff;
	color: var(--gg-red-deep, #B91C28);
	box-shadow: 0 12px 28px -10px rgba(0,0,0,.5);
}
.gg-hiw__btn--white:hover{ transform: translateY(-1px); }
.gg-hiw__btn--white:hover i{ transform: translateX(2px); }
.gg-hiw__btn--outline-light{
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,.32);
}
.gg-hiw__btn--outline-light:hover{ background: rgba(255,255,255,.08); color: #fff; transform: translateY(-1px); }

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.gg-hiw__crumbs{ margin-bottom: 0; }
.gg-hiw__crumbs-list{
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	color: var(--gg-gray-500, #6B7280);
}
.gg-hiw__crumbs-list li{ display: inline-flex; align-items: center; gap: 8px; }
.gg-hiw__crumbs-list li:not(:last-child)::after{ content: "/"; color: var(--gg-gray-300, #D1D5DB); font-weight: 500; }
.gg-hiw__crumbs-list a{ color: var(--gg-gray-500, #6B7280); transition: color 180ms ease; }
.gg-hiw__crumbs-list a:hover{ color: var(--gg-red-deep, #B91C28); }
.gg-hiw__crumbs-list span[aria-current]{ color: var(--gg-gray-800, #1F2937); }

/* ── Section base ────────────────────────────────────────────────────── */
.gg-hiw__sec{
	position: relative;
	background: var(--gg-white, #fff);
	border-radius: clamp(16px, 1.6vw, 22px);
	padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 44px);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.gg-hiw__sec--tint{
	background:
		radial-gradient(ellipse at top left, rgba(237,41,56,.04), transparent 55%),
		radial-gradient(ellipse at bottom right, rgba(237,41,56,.03), transparent 55%),
		var(--gg-gray-50, #F9FAFB);
	border-color: var(--gg-gray-200, #E5E7EB);
}
.gg-hiw__sec-head{
	display: flex; flex-direction: column; gap: 8px;
	max-width: 760px;
	margin-bottom: clamp(20px, 2.4vw, 32px);
}
.gg-hiw__sec-head--center{ margin-inline: auto; align-items: center; text-align: center; }
.gg-hiw__sec-title{
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-2xl, 28px), 3vw, var(--gg-text-3xl, 36px));
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.025em;
	line-height: 1.15;
	margin: 4px 0 0;
}
.gg-hiw__sec-dek{
	font-family: var(--gg-font-body);
	font-size: clamp(var(--gg-text-base, 15px), 1vw, var(--gg-text-lg, 17px));
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.6;
	margin: 0;
	max-width: 64ch;
}
.gg-hiw__sec-cta{
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	margin-top: clamp(26px, 3vw, 36px);
	text-align: center;
}
.gg-hiw__sec-cta-note{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-500, #6B7280);
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   1 · HERO
   ═══════════════════════════════════════════════════════════════════════ */
.gg-hiw__hero{
	overflow: hidden;
	background:
		radial-gradient(ellipse at top left,     rgba(237,41,56,.10) 0%, transparent 55%),
		radial-gradient(ellipse at bottom right, rgba(237,41,56,.06) 0%, transparent 55%),
		var(--gg-white, #fff);
	box-shadow: 0 1px 2px rgba(237,41,56,.04), 0 14px 36px rgba(237,41,56,.08);
}
.gg-hiw__hero-glow{
	position: absolute; top: -100px; right: -100px;
	width: 380px; height: 380px; border-radius: 50%;
	background: radial-gradient(circle, rgba(237,41,56,.22) 0%, transparent 60%);
	filter: blur(36px); pointer-events: none;
}
.gg-hiw__hero-grid{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}
@media (max-width: 980px){ .gg-hiw__hero-grid{ grid-template-columns: 1fr; } }

.gg-hiw__hero-text{ display: flex; flex-direction: column; gap: 14px; }
.gg-hiw__hero-title{
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-3xl, 32px), 4.6vw, 56px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.03em;
	color: var(--gg-black, #0A0A0A);
	margin: 4px 0 0;
}
.gg-hiw__hero-accent{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.gg-hiw__hero-dek{
	font-family: var(--gg-font-body);
	font-size: clamp(var(--gg-text-base, 15px), 1.1vw, var(--gg-text-lg, 18px));
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.6;
	margin: 0;
	max-width: 62ch;
}
.gg-hiw__hero-cta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.gg-hiw__hero-foot{
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-500, #6B7280);
	line-height: 1.55;
	max-width: 60ch;
}

/* Marketplace mockup — composed in CSS, no images. */
.gg-hiw__hero-mock{
	position: relative;
	min-height: 380px;
	padding: 30px 20px;
}
@media (max-width: 980px){ .gg-hiw__hero-mock{ min-height: 320px; } }
.gg-hiw__mock-bg{
	position: absolute; inset: 14px;
	border-radius: 24px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)) ,
		repeating-linear-gradient(0deg, transparent 0 19px, rgba(237,41,56,.05) 19px 20px),
		repeating-linear-gradient(90deg, transparent 0 19px, rgba(237,41,56,.05) 19px 20px),
		linear-gradient(135deg, var(--gg-red-light, #FFF1F2), #fff);
	border: 1px solid rgba(237,41,56,.14);
	box-shadow: 0 30px 60px -30px rgba(237,41,56,.28);
}

.gg-hiw__mock-pill{
	position: absolute;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head);
	font-size: 11px; font-weight: 700;
	color: var(--gg-gray-800, #1F2937);
	box-shadow: 0 10px 26px -10px rgba(15,23,42,.16);
	z-index: 2;
}
.gg-hiw__mock-pill i{ color: var(--gg-red, #ED2938); font-size: 12px; }
.gg-hiw__mock-pill--a{ top: 18px;  left: 4%;  animation: gg-hiw-float 6s ease-in-out infinite; }
.gg-hiw__mock-pill--b{ top: 40px;  right: 0;  animation: gg-hiw-float 7s ease-in-out infinite 1s; }
.gg-hiw__mock-pill--c{ bottom: 70px; left: -8px; animation: gg-hiw-float 8s ease-in-out infinite .5s; }
.gg-hiw__mock-pill--d{ bottom: 18px; right: 10%; animation: gg-hiw-float 6.5s ease-in-out infinite 1.4s; }
@keyframes gg-hiw-float{
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

.gg-hiw__mock-panel{
	position: relative; z-index: 1;
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 18px;
	padding: 14px;
	max-width: 480px;
	margin: 0 auto;
	box-shadow: 0 30px 60px -30px rgba(15,23,42,.18);
	display: flex; flex-direction: column; gap: 10px;
}
.gg-hiw__mock-search{
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px;
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 12px;
	background: var(--gg-gray-50, #F9FAFB);
	font-family: var(--gg-font-body);
	font-size: 13px;
}
.gg-hiw__mock-search > i{ color: var(--gg-red, #ED2938); }
.gg-hiw__mock-search-text{ flex: 1; color: var(--gg-gray-700, #374151); }
.gg-hiw__mock-search-cta{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	font-family: var(--gg-font-head);
	font-size: 11px; font-weight: 700;
	padding: 6px 11px;
	border-radius: 8px;
	letter-spacing: .03em;
}

.gg-hiw__mock-card{
	display: flex; align-items: center; gap: 12px;
	padding: 10px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
}
.gg-hiw__mock-avatar{
	flex-shrink: 0;
	display: grid; place-items: center;
	width: 38px; height: 38px;
	border-radius: 11px;
	color: #fff;
	font-size: 17px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.gg-hiw__mock-avatar--1{ background: linear-gradient(135deg, #ED2938, #B91C28); }
.gg-hiw__mock-avatar--2{ background: linear-gradient(135deg, #1F2937, #374151); }
.gg-hiw__mock-avatar--3{ background: linear-gradient(135deg, #ED2938, #6B7280); }
.gg-hiw__mock-card-body{ flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gg-hiw__mock-card-body strong{
	font-family: var(--gg-font-head);
	font-size: 13px; font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.01em;
}
.gg-hiw__mock-card-body small{
	font-family: var(--gg-font-body);
	font-size: 11px;
	color: var(--gg-gray-500, #6B7280);
	margin-top: 2px;
}
.gg-hiw__mock-card-body small i{ color: #FBBF24; font-size: 10px; }
.gg-hiw__mock-card-chip{
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 800;
	color: var(--gg-red-deep, #B91C28);
	letter-spacing: .04em; text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--gg-red-light, #FFF1F2);
}

.gg-hiw__mock-toast{
	position: absolute;
	bottom: 26px; right: -10px;
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px;
	background: #fff;
	border-radius: 14px;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	box-shadow: 0 24px 50px -20px rgba(15,23,42,.22);
	z-index: 3;
	animation: gg-hiw-pop 8s ease-in-out infinite;
}
@keyframes gg-hiw-pop{
	0%, 80%, 100% { transform: translateY(0); }
	40%, 60%      { transform: translateY(-4px); }
}
.gg-hiw__mock-toast-ico{
	display: grid; place-items: center;
	width: 34px; height: 34px;
	border-radius: 10px;
	background: linear-gradient(135deg, #16A34A, #15803D);
	color: #fff;
	font-size: 18px;
}
.gg-hiw__mock-toast strong{
	display: block;
	font-family: var(--gg-font-head);
	font-size: 12px; font-weight: 800;
	color: var(--gg-black, #0A0A0A);
}
.gg-hiw__mock-toast small{
	font-family: var(--gg-font-body);
	font-size: 11px;
	color: var(--gg-gray-500, #6B7280);
}
@media (max-width: 540px){
	.gg-hiw__mock-toast{ right: 0; bottom: 8px; }
	.gg-hiw__mock-pill--a, .gg-hiw__mock-pill--c{ left: 0; }
	.gg-hiw__mock-pill--b, .gg-hiw__mock-pill--d{ right: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   2 · WHAT IS GOGETER — 3-up feature cards
   ═══════════════════════════════════════════════════════════════════════ */
.gg-hiw__feature-grid{
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 900px){ .gg-hiw__feature-grid{ grid-template-columns: 1fr; } }
.gg-hiw__feature{
	position: relative;
	padding: 22px;
	background: var(--gg-white, #fff);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 18px;
	overflow: hidden;
	transition: transform 320ms cubic-bezier(.16,1,.3,1), border-color 320ms ease, box-shadow 320ms ease;
}
.gg-hiw__feature::after{
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: linear-gradient(90deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	transform: scaleX(0); transform-origin: left;
	transition: transform 380ms cubic-bezier(.16,1,.3,1);
}
.gg-hiw__feature:hover{
	transform: translateY(-4px);
	border-color: var(--gg-red-subtle, rgba(237,41,56,.32));
	box-shadow: 0 1px 2px rgba(237,41,56,.06), 0 18px 36px -16px rgba(237,41,56,.2);
}
.gg-hiw__feature:hover::after{ transform: scaleX(1); }
.gg-hiw__feature-ico{
	display: grid; place-items: center;
	width: 52px; height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	font-size: 22px;
	margin-bottom: 14px;
	box-shadow: 0 12px 24px -10px rgba(237,41,56,.5), inset 0 1px 0 rgba(255,255,255,.18);
}
.gg-hiw__feature-title{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-lg, 18px);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.01em;
	margin: 0 0 6px;
}
.gg-hiw__feature p{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 14px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.6;
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   3 · BUILT FOR BOTH — two large side cards
   ═══════════════════════════════════════════════════════════════════════ */
.gg-hiw__sides{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 22px);
}
@media (max-width: 900px){ .gg-hiw__sides{ grid-template-columns: 1fr; } }
.gg-hiw__side{
	position: relative;
	padding: clamp(22px, 2.4vw, 32px);
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 20px;
	overflow: hidden;
	display: flex; flex-direction: column; gap: 12px;
	transition: transform 320ms cubic-bezier(.16,1,.3,1), box-shadow 320ms ease;
}
.gg-hiw__side:hover{ transform: translateY(-4px); box-shadow: 0 22px 44px -18px rgba(15,23,42,.18); }
.gg-hiw__side--dark{
	background: linear-gradient(135deg, var(--gg-black, #0A0A0A), var(--gg-black-soft, #141414));
	border-color: transparent;
	color: #fff;
}
.gg-hiw__side--dark::before{
	content: ""; position: absolute; inset: 0;
	background:
		radial-gradient(420px 220px at 12% 120%, rgba(237,41,56,.32), transparent 70%),
		radial-gradient(360px 200px at 110% -20%, rgba(237,41,56,.2), transparent 70%);
	pointer-events: none;
}
.gg-hiw__side--dark > *{ position: relative; }
.gg-hiw__side-eyebrow{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	color: var(--gg-red, #ED2938);
	letter-spacing: .14em; text-transform: uppercase;
}
.gg-hiw__side-eyebrow--light{ color: rgba(255,255,255,.78); }
.gg-hiw__side-ico{
	width: 64px; height: 64px;
	border-radius: 18px;
	display: grid; place-items: center;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	font-size: 28px;
	box-shadow: 0 14px 28px -12px rgba(237,41,56,.5), inset 0 1px 0 rgba(255,255,255,.18);
}
.gg-hiw__side-ico--light{
	background: rgba(255,255,255,.1);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.gg-hiw__side-title{
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-xl, 22px), 2vw, var(--gg-text-2xl, 28px));
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--gg-black, #0A0A0A);
	margin: 4px 0 0;
}
.gg-hiw__side-title--light{ color: #fff; }
.gg-hiw__side p{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-base, 15px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.65;
	margin: 0;
	max-width: 50ch;
}
.gg-hiw__side-text--light{ color: rgba(255,255,255,.78) !important; }
.gg-hiw__side-cta{
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: auto; padding-top: 14px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 800;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--gg-red-deep, #B91C28);
	transition: gap 200ms ease;
}
.gg-hiw__side-cta i{ transition: transform 200ms ease; }
.gg-hiw__side-cta:hover{ gap: 12px; }
.gg-hiw__side-cta:hover i{ transform: translateX(2px); }
.gg-hiw__side-cta--light{ color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   4 / 6 · STEPS — numbered timeline cards
   ═══════════════════════════════════════════════════════════════════════ */
.gg-hiw__steps{
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
	counter-reset: hiw-step;
}
@media (max-width: 1100px){ .gg-hiw__steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){  .gg-hiw__steps{ grid-template-columns: 1fr; } }
.gg-hiw__step{
	position: relative;
	padding: 22px;
	background: var(--gg-white, #fff);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 18px;
	transition: transform 320ms cubic-bezier(.16,1,.3,1), border-color 320ms ease, box-shadow 320ms ease;
	overflow: hidden;
}
.gg-hiw__step::before{
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	transform: scaleX(0); transform-origin: left;
	transition: transform 380ms cubic-bezier(.16,1,.3,1);
}
.gg-hiw__step:hover{
	transform: translateY(-4px);
	border-color: var(--gg-red-subtle, rgba(237,41,56,.32));
	box-shadow: 0 18px 36px -16px rgba(237,41,56,.18);
}
.gg-hiw__step:hover::before{ transform: scaleX(1); }
.gg-hiw__step-num{
	position: absolute; top: 14px; right: 16px;
	font-family: var(--gg-font-head);
	font-size: clamp(36px, 4vw, 52px);
	font-weight: 800;
	letter-spacing: -.04em;
	background: linear-gradient(135deg, rgba(237,41,56,.18), rgba(237,41,56,.04));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	line-height: 1;
	pointer-events: none;
}
.gg-hiw__step-ico{
	display: grid; place-items: center;
	width: 44px; height: 44px;
	border-radius: 12px;
	background: var(--gg-red-light, #FFF1F2);
	color: var(--gg-red, #ED2938);
	font-size: 19px;
	margin-bottom: 14px;
	transition: all 320ms cubic-bezier(.22,1,.36,1);
}
.gg-hiw__step:hover .gg-hiw__step-ico{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	transform: rotate(-4deg) scale(1.05);
}
.gg-hiw__step-title{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 16px);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.01em;
	margin: 0 0 6px;
}
.gg-hiw__step p{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 14px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.6;
	margin: 0;
}

/* Business flow: steps + dashboard mockup side by side */
.gg-hiw__biz-grid{
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
	gap: clamp(16px, 2vw, 28px);
	align-items: start;
}
@media (max-width: 1100px){ .gg-hiw__biz-grid{ grid-template-columns: 1fr; } }
.gg-hiw__steps--biz{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 540px){ .gg-hiw__steps--biz{ grid-template-columns: 1fr; } }

/* Dashboard mockup card */
.gg-hiw__dash{
	background: linear-gradient(135deg, var(--gg-black, #0A0A0A), var(--gg-black-soft, #141414));
	color: #fff;
	border-radius: 20px;
	padding: 20px;
	display: flex; flex-direction: column; gap: 16px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 30px 60px -30px rgba(15,23,42,.4);
}
.gg-hiw__dash::before{
	content: ""; position: absolute; inset: 0;
	background:
		radial-gradient(380px 220px at 12% 110%, rgba(237,41,56,.34), transparent 70%),
		radial-gradient(360px 220px at 110% -10%, rgba(237,41,56,.22), transparent 70%);
	pointer-events: none;
}
.gg-hiw__dash > *{ position: relative; }
.gg-hiw__dash-head{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gg-hiw__dash-eyebrow{
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 700;
	color: rgba(255,255,255,.6);
	letter-spacing: .14em; text-transform: uppercase;
	width: 100%;
}
.gg-hiw__dash-head strong{
	font-family: var(--gg-font-head);
	font-size: 16px; font-weight: 800;
	color: #fff;
}
.gg-hiw__dash-chip{
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(237,41,56,.16);
	color: #fff;
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase;
}
.gg-hiw__dash-chip i{ color: #FBBF24; font-size: 11px; }

.gg-hiw__dash-stats{
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
	padding: 14px;
	background: rgba(255,255,255,.06);
	border-radius: 14px;
}
.gg-hiw__dash-stats div{ display: flex; flex-direction: column; gap: 2px; }
.gg-hiw__dash-stats dt{
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 600;
	color: rgba(255,255,255,.6);
	letter-spacing: .06em; text-transform: uppercase;
}
.gg-hiw__dash-stats dd{
	margin: 0;
	font-family: var(--gg-font-head);
	font-size: clamp(18px, 1.5vw, 22px);
	font-weight: 800;
	color: #fff;
	letter-spacing: -.02em;
}
.gg-hiw__dash-stats small{ font-size: 10px; color: rgba(255,255,255,.45); }

.gg-hiw__dash-inbox{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gg-hiw__dash-inbox li{
	display: flex; align-items: center; gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.08);
}
.gg-hiw__dash-inbox-dot{
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--gg-red, #ED2938);
	box-shadow: 0 0 0 3px rgba(237,41,56,.22);
	flex-shrink: 0;
}
.gg-hiw__dash-inbox-dot--cool{ background: #38BDF8; box-shadow: 0 0 0 3px rgba(56,189,248,.18); }
.gg-hiw__dash-inbox div{ flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gg-hiw__dash-inbox strong{ font-family: var(--gg-font-head); font-size: 13px; color: #fff; font-weight: 700; }
.gg-hiw__dash-inbox small{ font-family: var(--gg-font-body); font-size: 11px; color: rgba(255,255,255,.55); }
.gg-hiw__dash-inbox-time{ font-family: var(--gg-font-head); font-size: 10px; font-weight: 700; color: rgba(255,255,255,.45); letter-spacing: .04em; }

/* ═══════════════════════════════════════════════════════════════════════
   5 / 7 · BENEFIT GRID — 3x2 small cards
   ═══════════════════════════════════════════════════════════════════════ */
.gg-hiw__benefit-grid{
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 18px);
}
@media (max-width: 980px){ .gg-hiw__benefit-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px){ .gg-hiw__benefit-grid{ grid-template-columns: 1fr; } }
.gg-hiw__benefit{
	display: flex; flex-direction: column; gap: 8px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 16px;
	transition: transform 320ms cubic-bezier(.16,1,.3,1), border-color 320ms ease, box-shadow 320ms ease;
}
.gg-hiw__benefit:hover{
	transform: translateY(-3px);
	border-color: var(--gg-red-subtle, rgba(237,41,56,.32));
	box-shadow: 0 14px 28px -16px rgba(237,41,56,.18);
}
.gg-hiw__benefit-ico{
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border-radius: 11px;
	background: var(--gg-red-light, #FFF1F2);
	color: var(--gg-red, #ED2938);
	font-size: 17px;
	transition: all 320ms cubic-bezier(.22,1,.36,1);
}
.gg-hiw__benefit:hover .gg-hiw__benefit-ico{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff; transform: rotate(-4deg) scale(1.05);
}
.gg-hiw__benefit-title{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 15px);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.01em;
	margin: 0;
}
.gg-hiw__benefit p{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.55;
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   8 · SERVICE CATEGORIES — icon chips grid
   ═══════════════════════════════════════════════════════════════════════ */
.gg-hiw__cats{
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
@media (max-width: 1100px){ .gg-hiw__cats{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px){  .gg-hiw__cats{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px){  .gg-hiw__cats{ grid-template-columns: 1fr; } }
.gg-hiw__cat{
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 14px;
	color: inherit;
	transition: transform 280ms cubic-bezier(.16,1,.3,1), border-color 280ms ease, box-shadow 280ms ease;
}
.gg-hiw__cat:hover{
	transform: translateY(-2px);
	border-color: var(--gg-red-subtle, rgba(237,41,56,.32));
	box-shadow: 0 10px 22px -12px rgba(237,41,56,.22);
}
.gg-hiw__cat-ico{
	flex-shrink: 0;
	display: grid; place-items: center;
	width: 36px; height: 36px;
	border-radius: 10px;
	background: var(--gg-red-light, #FFF1F2);
	color: var(--gg-red, #ED2938);
	font-size: 15px;
	transition: all 280ms cubic-bezier(.22,1,.36,1);
}
.gg-hiw__cat:hover .gg-hiw__cat-ico{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	transform: rotate(-4deg) scale(1.05);
}
.gg-hiw__cat-label{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 700;
	color: var(--gg-gray-800, #1F2937);
	letter-spacing: -.01em;
}

/* ═══════════════════════════════════════════════════════════════════════
   9 · TRUST POINTS — icon + body rows
   ═══════════════════════════════════════════════════════════════════════ */
.gg-hiw__trust-grid{
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 18px);
}
@media (max-width: 780px){ .gg-hiw__trust-grid{ grid-template-columns: 1fr; } }
.gg-hiw__trust{
	display: flex; gap: 14px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 16px;
	transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
.gg-hiw__trust:hover{
	transform: translateY(-2px);
	border-color: var(--gg-red-subtle, rgba(237,41,56,.32));
	box-shadow: 0 14px 28px -16px rgba(237,41,56,.18);
}
.gg-hiw__trust-ico{
	flex-shrink: 0;
	display: grid; place-items: center;
	width: 46px; height: 46px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	font-size: 19px;
	box-shadow: 0 12px 24px -10px rgba(237,41,56,.5);
}
.gg-hiw__trust-title{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 15px);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.01em;
	margin: 0 0 4px;
}
.gg-hiw__trust p{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.55;
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   10 · BEFORE vs WITH — comparison
   ═══════════════════════════════════════════════════════════════════════ */
.gg-hiw__compare{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.8vw, 20px);
}
@media (max-width: 820px){ .gg-hiw__compare{ grid-template-columns: 1fr; } }
.gg-hiw__compare-col{
	padding: clamp(22px, 2.4vw, 32px);
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 18px;
}
.gg-hiw__compare-col--before{
	background:
		linear-gradient(180deg, rgba(15,23,42,.02), transparent 50%),
		#fff;
	border-color: var(--gg-gray-200, #E5E7EB);
}
.gg-hiw__compare-col--after{
	background:
		linear-gradient(180deg, rgba(237,41,56,.06), transparent 50%),
		#fff;
	border-color: var(--gg-red-subtle, rgba(237,41,56,.28));
	box-shadow: 0 20px 36px -20px rgba(237,41,56,.18);
}
.gg-hiw__compare-col header{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.gg-hiw__compare-col h3{
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-lg, 18px), 1.6vw, var(--gg-text-xl, 22px));
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.02em;
	margin: 0;
}
.gg-hiw__compare-tag{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	width: max-content;
}
.gg-hiw__compare-tag--bad{
	background: var(--gg-gray-100, #F3F4F6);
	color: var(--gg-gray-700, #374151);
}
.gg-hiw__compare-tag--good{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	box-shadow: 0 6px 14px -6px rgba(237,41,56,.5);
}
.gg-hiw__compare-col ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gg-hiw__compare-col li{
	display: flex; gap: 10px; align-items: flex-start;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 14px);
	color: var(--gg-gray-700, #374151);
	line-height: 1.55;
}
.gg-hiw__compare-col li i{
	flex-shrink: 0;
	display: grid; place-items: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	font-size: 12px;
	margin-top: 1px;
}
.gg-hiw__compare-col--before li i{ background: var(--gg-gray-200, #E5E7EB); color: var(--gg-gray-600, #4B5563); }
.gg-hiw__compare-col--after  li i{ background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28)); color: #fff; }
.gg-hiw__compare-col--after  li{ color: var(--gg-gray-800, #1F2937); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   11 · FAQ — accordion
   ═══════════════════════════════════════════════════════════════════════ */
.gg-hiw__faq{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gg-hiw__faq-item details{
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 14px;
	padding: 0;
	transition: border-color 220ms ease, box-shadow 220ms ease;
	overflow: hidden;
}
.gg-hiw__faq-item details[open]{
	border-color: var(--gg-red-subtle, rgba(237,41,56,.32));
	box-shadow: 0 14px 28px -16px rgba(237,41,56,.18);
}
.gg-hiw__faq-item summary{
	list-style: none;
	display: flex; align-items: center; gap: 14px;
	padding: 16px 20px;
	cursor: pointer;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 16px);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.01em;
}
.gg-hiw__faq-item summary::-webkit-details-marker{ display: none; }
.gg-hiw__faq-q{ flex: 1; }
.gg-hiw__faq-chev{
	flex-shrink: 0;
	display: grid; place-items: center;
	width: 30px; height: 30px;
	border-radius: 9px;
	background: var(--gg-red-light, #FFF1F2);
	color: var(--gg-red, #ED2938);
	font-size: 14px;
	transition: transform 220ms ease, background 220ms ease, color 220ms ease;
}
.gg-hiw__faq-item details[open] .gg-hiw__faq-chev{
	transform: rotate(180deg);
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
}
.gg-hiw__faq-a{
	padding: 0 20px 18px 20px;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
	margin-top: 0;
}
.gg-hiw__faq-a p{
	margin: 14px 0 0;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-base, 15px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════════════
   12 · FINAL CTA
   ═══════════════════════════════════════════════════════════════════════ */
.gg-hiw__final{
	background: linear-gradient(135deg, var(--gg-black, #0A0A0A), var(--gg-black-soft, #141414));
	color: #fff;
	border: 0;
	padding: 0;
	overflow: hidden;
}
.gg-hiw__final-glow{
	position: absolute; inset: 0;
	background:
		radial-gradient(600px 320px at 12% 120%, rgba(237,41,56,.46), transparent 70%),
		radial-gradient(500px 280px at 95% -20%, rgba(237,41,56,.3), transparent 70%);
	pointer-events: none;
}
.gg-hiw__final-inner{
	position: relative;
	padding: clamp(40px, 6vw, 80px) clamp(22px, 4vw, 56px);
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
}
.gg-hiw__final-title{
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-2xl, 30px), 4vw, 48px);
	font-weight: 800;
	color: #fff;
	letter-spacing: -.025em;
	line-height: 1.1;
	margin: 4px 0 0;
}
.gg-hiw__final-sub{
	font-family: var(--gg-font-body);
	font-size: clamp(var(--gg-text-base, 15px), 1vw, var(--gg-text-lg, 17px));
	color: rgba(255,255,255,.78);
	max-width: 60ch;
	margin: 0;
}
.gg-hiw__final-actions{
	display: flex; flex-wrap: wrap; gap: 10px;
	margin-top: 6px;
}
.gg-hiw__final-tag{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.5);
	margin: 14px 0 0;
}
@media (max-width: 560px){
	.gg-hiw__final-actions{ width: 100%; flex-direction: column; }
	.gg-hiw__final-actions .gg-hiw__btn{ width: 100%; }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
	.gg-hiw__feature, .gg-hiw__feature-ico,
	.gg-hiw__step, .gg-hiw__step-ico,
	.gg-hiw__side,
	.gg-hiw__benefit, .gg-hiw__benefit-ico,
	.gg-hiw__cat, .gg-hiw__cat-ico,
	.gg-hiw__trust,
	.gg-hiw__faq-chev,
	.gg-hiw__mock-pill, .gg-hiw__mock-toast{ transition: none !important; animation: none !important; }
}