/* ═══════════════════════════════════════════════════════════════════════
   list-a-service.css — provider landing page for /list-a-service.

   Same language as the rest of the public site: tokens from
   /custom/css/core.css, Outfit headings + Figtree body, white 16–22px
   section cards on an off-white page, red eyebrow with a lead dash,
   red-gradient primary button and one dark contrast card per pair.

   Block: .gg-las  (List A Service)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page ────────────────────────────────────────────────────────────── */
.gg-las-body{ background: var(--gg-off-white, #FAFAFA); }
.gg-las-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-las{
	width: 100%;
	padding: 18px 28px 32px;
	position: relative; z-index: 1;
	display: flex; flex-direction: column;
	gap: clamp(20px, 2.6vw, 34px);
}
@media (max-width: 700px){ .gg-las{ padding: 12px 16px 48px; gap: clamp(22px, 6vw, 34px); } }

/* ── Atoms ───────────────────────────────────────────────────────────── */
.gg-las__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;
}
/* No leading dash on this page's eyebrows (asked for: no "—" anywhere). */
.gg-las__eyebrow i{ color: var(--gg-red, #ED2938); font-size: 13px; }
.gg-las__eyebrow--light{ color: rgba(255,255,255,.85); }
.gg-las__eyebrow--light i{ color: #fff; }

.gg-las__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-las__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;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform 200ms ease, filter 200ms ease, border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.gg-las__btn i{ font-size: 15px; transition: transform 200ms ease; }
.gg-las__btn:hover i{ transform: translateX(2px); }
.gg-las__btn:focus-visible{ outline: 3px solid rgba(237,41,56,.35); outline-offset: 2px; }
.gg-las__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-las__btn--primary:hover{ filter: brightness(1.06); transform: translateY(-1px); color: #fff; }
.gg-las__btn--ghost{
	background: var(--gg-white, #fff);
	border-color: var(--gg-gray-200, #E5E7EB);
	color: var(--gg-gray-800, #1F2937);
}
.gg-las__btn--ghost:hover{ border-color: rgba(237,41,56,.4); color: var(--gg-red-deep, #B91C28); transform: translateY(-1px); }
.gg-las__btn--white{ background: #fff; color: var(--gg-red-deep, #B91C28); box-shadow: 0 12px 28px -10px rgba(0,0,0,.5); }
.gg-las__btn--white:hover{ transform: translateY(-1px); color: var(--gg-red-deep, #B91C28); }
.gg-las__btn--outline-light{ background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.gg-las__btn--outline-light:hover{ background: rgba(255,255,255,.08); color: #fff; transform: translateY(-1px); }
.gg-las__btn--block{ width: 100%; }
@media (max-width: 480px){
	.gg-las__btn{ white-space: normal; text-align: center; }
	.gg-las__hero-cta .gg-las__btn,
	.gg-las__final-actions .gg-las__btn{ flex: 1 1 100%; }
}

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.gg-las__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-las__crumbs-list li{ display: inline-flex; align-items: center; gap: 8px; }
.gg-las__crumbs-list li:not(:last-child)::after{ content: "/"; color: var(--gg-gray-300, #D1D5DB); font-weight: 500; }
.gg-las__crumbs-list a{ color: var(--gg-gray-500, #6B7280); transition: color 180ms ease; }
.gg-las__crumbs-list a:hover{ color: var(--gg-red-deep, #B91C28); }
.gg-las__crumbs-list span[aria-current]{ color: var(--gg-gray-800, #1F2937); }

/* ── Section base ────────────────────────────────────────────────────── */
.gg-las__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-las__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);
}
@media (max-width: 700px){ .gg-las__sec{ padding: 24px 16px; } }
.gg-las__sec-head{
	display: flex; flex-direction: column; gap: 8px;
	max-width: 760px;
	margin-bottom: clamp(20px, 2.4vw, 32px);
}
.gg-las__sec-title{
	font-family: var(--gg-font-head);
	font-size: clamp(24px, 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-las__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-las__sec-cta{
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	margin-top: clamp(26px, 3vw, 36px);
	text-align: center;
}
.gg-las__sec-cta-note{ font-family: var(--gg-font-body); font-size: var(--gg-text-sm, 13px); color: var(--gg-gray-500, #6B7280); margin: 0; }
.gg-las__sec-cta-note a,
.gg-las__faq-more a,
.gg-las__who-note a{ color: var(--gg-red-deep, #B91C28); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════
   1 · HERO — compact, so the step-by-step guide is on screen at load.
   Background is an AI-generated red mesh (static/list-a-service/
   hero-mesh.webp), washed out on the left so the headline stays crisp.
   ═══════════════════════════════════════════════════════════════════════ */
.gg-las__hero{
	overflow: hidden;
	padding: clamp(20px, 2.4vw, 32px) clamp(20px, 3vw, 40px);
	background:
		linear-gradient(90deg, #fff 0%, rgba(255,255,255,.94) 34%, rgba(255,255,255,.55) 58%, rgba(255,255,255,0) 80%),
		var(--las-mesh) right center / cover no-repeat,
		#fff;
	border-color: rgba(237,41,56,.16);
	box-shadow: 0 1px 2px rgba(237,41,56,.04), 0 18px 40px -24px rgba(237,41,56,.35);
}
.gg-las__hero-grid{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(20px, 3vw, 44px);
	align-items: center;
}
@media (max-width: 980px){ .gg-las__hero-grid{ grid-template-columns: minmax(0, 1fr); } }

.gg-las__hero-text{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gg-las__hero-title{
	font-family: var(--gg-font-head);
	font-size: clamp(26px, 2.9vw, 40px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.03em;
	color: var(--gg-black, #0A0A0A);
	margin: 0;
	max-width: 22ch;
}
.gg-las__hero-dek{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-base, 15px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.55;
	margin: 0;
	max-width: 56ch;
}
.gg-las__hero-cta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.gg-las__hero-cta .gg-las__btn{ padding: 11px 18px; }

/* Inline ticks beside the CTAs */
.gg-las__hero-ticks{
	list-style: none; margin: 0 0 0 6px; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
	font-family: var(--gg-font-head); font-size: 12.5px; font-weight: 700; color: var(--gg-gray-700, #374151);
}
.gg-las__hero-ticks li{ display: inline-flex; align-items: center; gap: 5px; }
.gg-las__hero-ticks i{ color: var(--gg-red, #ED2938); }

/* Photo card with the live stats as glass tiles along its bottom edge */
.gg-las__hero-media{ position: relative; margin: 0; min-width: 0; }
.gg-las__hero-img{
	display: block; width: 100%; height: auto;
	aspect-ratio: 1000 / 459; object-fit: cover;
	max-height: 230px;
	border-radius: 18px;
	border: 3px solid #fff;
	box-shadow: 0 30px 60px -30px rgba(237,41,56,.55), 0 18px 40px -24px rgba(15,23,42,.3);
	background: var(--gg-gray-100, #F3F4F6);
}
.gg-las__stats{
	position: absolute; left: 10px; right: 10px; bottom: 10px;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
	margin: 0;
}
.gg-las__stat{
	display: flex; flex-direction: column; gap: 0;
	padding: 7px 9px; min-width: 0;
	background: rgba(255,255,255,.9);
	border-radius: 11px;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	box-shadow: 0 8px 18px -10px rgba(15,23,42,.45);
}
.gg-las__stat-ico{ display: none; }
.gg-las__stat dd{
	margin: 0;
	font-family: var(--gg-font-head); font-size: 17px; font-weight: 800;
	letter-spacing: -.02em; color: var(--gg-black, #0A0A0A); line-height: 1.1;
}
.gg-las__stat dt{
	font-family: var(--gg-font-body); font-size: 10.5px; font-weight: 600; color: var(--gg-gray-500, #6B7280);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.gg-las__float{
	position: absolute;
	display: flex; align-items: center; gap: 10px;
	padding: 8px 12px 8px 8px;
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 14px;
	box-shadow: 0 18px 40px -16px rgba(15,23,42,.35);
	font-family: var(--gg-font-head);
}
.gg-las__float strong{ display: block; font-size: 12.5px; font-weight: 800; color: var(--gg-black, #0A0A0A); }
.gg-las__float small{ display: block; font-family: var(--gg-font-body); font-size: 11px; color: var(--gg-gray-500, #6B7280); }
.gg-las__float--live{ right: -8px; top: -12px; animation: gg-las-float 7s ease-in-out infinite 1s; }
.gg-las__float-ico{
	flex-shrink: 0; display: grid; place-items: center;
	width: 30px; height: 30px; border-radius: 9px;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff; font-size: 15px;
}
.gg-las__float-ico--ok{ background: var(--gg-success, #16A34A); }
@keyframes gg-las-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
@media (max-width: 980px){ .gg-las__float--live{ right: 8px; } }
/* Phones: the photo would push the guide below the fold — drop it. */
@media (max-width: 700px){
	.gg-las__hero{ background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.96)), var(--las-mesh) right top / cover no-repeat, #fff; }
	.gg-las__hero-media{ display: none; }
}
/* Short laptop screens (≤ 820px tall): tighten the hero further so the
   guide's timeline and laptop still start above the fold. */
@media (min-width: 981px) and (max-height: 820px){
	.gg-las__hero{ padding-top: 16px; padding-bottom: 16px; }
	.gg-las__hero-text{ gap: 7px; }
	.gg-las__hero-title{ font-size: clamp(24px, 2.4vw, 32px); }
	.gg-las__hero-img{ max-height: 190px; }
	.gg-las__guide-sec{ padding-top: 16px; }
	.gg-las__guide-sec > .gg-las__sec-head{ margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce){ .gg-las__float{ animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   2 · STEP-BY-STEP GUIDE  (3D laptop tour)
   Progressive: without .is-ready every panel shows in order and only the
   first screen is visible; list-a-service.js adds .is-ready and drives it.
   ═══════════════════════════════════════════════════════════════════════ */
.gg-las__guide-sec{
	scroll-margin-top: 80px;   /* lands just under the 72px sticky header */
	overflow: hidden;
	padding-top: clamp(20px, 2.4vw, 32px);
	padding-bottom: clamp(22px, 2.6vw, 36px);
	background:
		radial-gradient(900px 420px at 50% 0%, rgba(237,41,56,.07), transparent 70%),
		linear-gradient(180deg, #fff 0%, var(--gg-gray-50, #F9FAFB) 100%);
}
.gg-las__sec-head--center{ margin-inline: auto; align-items: center; text-align: center; }
.gg-las__sec-head--center .gg-las__sec-dek{ margin-inline: auto; }
.gg-las__guide-sec > .gg-las__sec-head{ margin-bottom: 14px; gap: 4px; }
.gg-las__guide-sec > .gg-las__sec-head .gg-las__sec-title{ font-size: clamp(22px, 2.3vw, 30px); }
.gg-las__guide-sec > .gg-las__sec-head .gg-las__sec-dek{ font-size: 14.5px; }

/* Have these ready */
.gg-las__prep{
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
	margin: clamp(18px, 2.2vw, 26px) auto 0;
}
.gg-las__prep-title{
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--gg-font-head); font-size: var(--gg-text-sm, 13px); font-weight: 800;
	color: var(--gg-black, #0A0A0A);
}
.gg-las__prep-title i{ color: var(--gg-red, #ED2938); }
.gg-las__prep-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gg-las__prep-list li{
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 12px; border-radius: 999px;
	background: #fff; border: 1px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-body); font-size: 12.5px; font-weight: 600; color: var(--gg-gray-700, #374151);
}
.gg-las__prep-list i{ color: var(--gg-red, #ED2938); font-size: 13px; }

/* ── Phase timeline (the step nav) ───────────────────────────────────── */
.gg-las__track{
	scroll-margin-top: 84px;   /* "See how it works" lands here: timeline + stage fill the screen */
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 14px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 20px;
	box-shadow: 0 14px 36px -28px rgba(15,23,42,.35);
}
.gg-las__track-line{
	position: absolute; left: 40px; right: 40px; top: 50%; margin-top: -1.5px;
	height: 3px; border-radius: 3px;
	background: var(--gg-gray-100, #F3F4F6);
	pointer-events: none;
}
.gg-las__track-fill{
	position: absolute; inset: 0 auto 0 0; width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	transition: width 500ms var(--gg-ease, cubic-bezier(.16,1,.3,1));
}
.gg-las__phase{
	position: relative; z-index: 1; min-width: 0;
	display: flex; align-items: center; justify-content: center; gap: 9px;
	padding: 4px 10px; border-radius: 14px;
	background: #fff;   /* sits on the progress line, so it masks it */
}
.gg-las__phase-ico{
	position: relative; z-index: 1;
	display: grid; place-items: center;
	flex-shrink: 0;
	width: 34px; height: 34px; border-radius: 11px;
	background: #fff; border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	color: var(--gg-gray-400, #9CA3AF); font-size: 15px;
	transition: all 300ms ease;
}
.gg-las__phase.is-done .gg-las__phase-ico{ border-color: rgba(237,41,56,.35); color: var(--gg-red, #ED2938); background: var(--gg-red-light, #FFF1F2); }
.gg-las__phase.is-current .gg-las__phase-ico{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	border-color: transparent; color: #fff;
	box-shadow: 0 10px 22px -8px rgba(237,41,56,.65);
}
.gg-las__phase-txt{ display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.gg-las__phase-txt strong{ font-family: var(--gg-font-head); font-size: var(--gg-text-sm, 13px); font-weight: 800; color: var(--gg-black, #0A0A0A); }
.gg-las__phase-txt small{ font-family: var(--gg-font-body); font-size: 11px; color: var(--gg-gray-500, #6B7280); }
.gg-las__phase-dots{ display: flex; flex-wrap: nowrap; gap: 5px; }
.gg-las__dot{
	position: relative;
	display: grid; place-items: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--gg-gray-100, #F3F4F6);
	color: var(--gg-gray-600, #4B5563);
	font-family: var(--gg-font-head); font-size: 11px; font-weight: 800;
	border: 1.5px solid transparent;
	transition: all 220ms ease;
}
.gg-las__dot:hover{ border-color: rgba(237,41,56,.4); color: var(--gg-red-deep, #B91C28); }
.gg-las__dot:focus-visible{ outline: 3px solid rgba(237,41,56,.35); outline-offset: 2px; }
.gg-las__dot.is-done{ background: var(--gg-red-light, #FFF1F2); color: var(--gg-red-deep, #B91C28); }
.gg-las__dot.is-active{
	background: var(--gg-red, #ED2938); color: #fff;
	box-shadow: 0 0 0 4px rgba(237,41,56,.16);
}
/* Hover label — the title of the step, on pointer devices only */
.gg-las__dot-label{
	position: absolute; bottom: calc(100% + 8px); left: 50%;
	transform: translate(-50%, 4px);
	padding: 6px 10px; border-radius: 8px;
	background: var(--gg-black, #0A0A0A); color: #fff;
	font-family: var(--gg-font-head); font-size: 11px; font-weight: 700; font-style: normal;
	white-space: nowrap; pointer-events: none;
	opacity: 0; transition: opacity 160ms ease, transform 160ms ease;
	z-index: 5;
}
@media (hover: hover){ .gg-las__dot:hover .gg-las__dot-label{ opacity: 1; transform: translate(-50%, 0); } }

/* ── Stage: device + details ─────────────────────────────────────────── */
.gg-las__gstage{
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
	gap: clamp(20px, 3vw, 44px);
	align-items: center;
}
/* Desktop: the stage is held to 75vh so laptop, step card and controls are
   all on screen together, with nothing scrolling inside the card. The
   laptop's width is derived from that height (lid ≈ .66 × width + bar,
   base and shadow ≈ 100px). */
@media (min-width: 1101px){
	.gg-las__gstage{ height: 75vh; min-height: 550px; max-height: 760px; }
	.gg-las__device{ width: 100%; max-width: max(560px, min(860px, calc((min(75vh, 760px) - 100px) * 1.5))); margin-inline: auto; }
	.gg-las__gside{ height: 75vh; min-height: 550px; max-height: 760px; }   /* explicit: a % height does not resolve inside the grid row */
	.gg-las__gcard{ flex: 1; min-height: 0; }
	.gg-las__gpanels{ flex: 1; min-height: 0; }
}
@media (max-width: 1100px){ .gg-las__gstage{ grid-template-columns: minmax(0, 1fr); } }

/* Device: laptop in perspective + phone, on a soft red glow + dot grid */
.gg-las__device::before{
	content: ""; position: absolute; inset: 4% 6% 12%; z-index: -1;
	background: radial-gradient(closest-side, rgba(237,41,56,.30), rgba(237,41,56,0));
	filter: blur(28px);
	pointer-events: none;
}
.gg-las__device::after{
	content: ""; position: absolute; inset: -4% -2% 0; z-index: -2;
	background-image: radial-gradient(rgba(15,23,42,.10) 1px, transparent 1.4px);
	background-size: 18px 18px;
	-webkit-mask: radial-gradient(ellipse at center, #000 30%, transparent 72%);
	mask: radial-gradient(ellipse at center, #000 30%, transparent 72%);
	pointer-events: none;
}
.gg-las__gstage{ position: relative; }
.gg-las__device{
	position: relative; isolation: isolate;
	perspective: 2000px;
	padding: 6px 4% 40px 2%;
}
.gg-las__laptop{
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(var(--las-rx, 6deg)) rotateY(var(--las-ry, -9deg)) rotateZ(.4deg);
	transition: transform 600ms var(--gg-ease, cubic-bezier(.16,1,.3,1));
	will-change: transform;
}
.gg-las__lid{
	position: relative;
	padding: 1.6% 1.6% 2.2%;
	border-radius: 22px 22px 8px 8px;
	background: linear-gradient(160deg, #26272b 0%, #0b0b0d 55%, #1b1c20 100%);
	box-shadow:
		0 0 0 1px #3a3b40,
		inset 0 0 0 2px #050506,
		0 40px 80px -30px rgba(15,23,42,.55),
		0 18px 36px -20px rgba(237,41,56,.35);
}
.gg-las__cam{
	position: absolute; top: .55%; left: 50%;
	width: 7px; height: 7px; margin-left: -3.5px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #4b5563, #0b0b0d 70%);
}
.gg-las__screen{
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
}
.gg-las__bar{
	position: relative; z-index: 3;
	display: flex; align-items: center; gap: 10px;
	height: 30px; padding: 0 10px;
	background: linear-gradient(180deg, #f3f4f6, #e9eaee);
	border-bottom: 1px solid #dcdde2;
}
.gg-las__bar-dots{ display: inline-flex; gap: 5px; }
.gg-las__bar-dots i{ width: 9px; height: 9px; border-radius: 50%; background: #d1d5db; }
.gg-las__bar-dots i:first-child{ background: #ED2938; }
.gg-las__url{
	flex: 1; min-width: 0;
	display: flex; align-items: center; justify-content: center; gap: 6px;
	height: 20px; padding: 0 10px;
	border-radius: 6px; background: #fff;
	font-family: var(--gg-font-body); font-size: 11px; color: var(--gg-gray-600, #4B5563);
	white-space: nowrap; overflow: hidden;
}
.gg-las__url span{ overflow: hidden; text-overflow: ellipsis; }
.gg-las__url i{ color: var(--gg-success, #16A34A); font-size: 10px; }
.gg-las__zoom{
	display: grid; place-items: center;
	width: 22px; height: 22px; border-radius: 6px;
	border: 0; background: transparent; color: var(--gg-gray-600, #4B5563);
	cursor: zoom-in;
}
.gg-las__zoom:hover{ background: #fff; color: var(--gg-red, #ED2938); }
.gg-las__shots{ position: relative; aspect-ratio: 1440 / 900; background: var(--gg-gray-50, #F9FAFB); cursor: zoom-in; }
.gg-las__shot{ position: absolute; inset: 0; margin: 0; }
.gg-las__shot img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gg-las__guide:not(.is-ready) .gg-las__shot:not(.is-active){ display: none; }
.gg-las__guide.is-ready .gg-las__shot{
	opacity: 0; transform: scale(1.015);
	transition: opacity 450ms ease, transform 650ms var(--gg-ease, cubic-bezier(.16,1,.3,1));
	pointer-events: none;
}
.gg-las__guide.is-ready .gg-las__shot.is-active{ opacity: 1; transform: none; }
.gg-las__glare{
	position: absolute; inset: 0; z-index: 4; pointer-events: none;
	background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06) 100%);
}

/* Hotspots */
.gg-las__spots{ list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.gg-las__spot{
	position: absolute; left: var(--x); top: var(--y);
	display: flex; align-items: center; gap: 6px;
	transform: translate(-13px, -50%);
	opacity: 0;
}
.gg-las__spot.is-left{ flex-direction: row-reverse; transform: translate(calc(-100% + 13px), -50%); }
.gg-las__spot b{
	position: relative;
	display: grid; place-items: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--gg-red, #ED2938); color: #fff;
	font-family: var(--gg-font-head); font-size: 12px; font-weight: 800;
	box-shadow: 0 0 0 3px #fff, 0 6px 16px -4px rgba(237,41,56,.8);
}
.gg-las__spot b::after{
	content: ""; position: absolute; inset: -3px; border-radius: 50%;
	border: 2px solid var(--gg-red, #ED2938);
	animation: gg-las-pulse 1.8s ease-out infinite;
	animation-delay: calc(var(--d) * 250ms);
}
.gg-las__spot em{
	padding: 5px 9px; border-radius: 8px;
	background: var(--gg-black, #0A0A0A); color: #fff;
	font-family: var(--gg-font-head); font-size: 11px; font-weight: 700; font-style: normal;
	white-space: nowrap;
	box-shadow: 0 8px 18px -8px rgba(0,0,0,.6);
}
@keyframes gg-las-pulse{ 0%{ transform: scale(1); opacity: .9; } 100%{ transform: scale(2.1); opacity: 0; } }
/* Resting state is visible; the animation only adds the entrance (fill: both),
   so an interrupted or skipped animation can never leave a marker hidden. */
.gg-las__shot.is-active .gg-las__spot{ opacity: 1; animation: gg-las-spot-in 420ms var(--gg-ease, cubic-bezier(.16,1,.3,1)) both; animation-delay: calc(350ms + var(--d) * 220ms); }
.gg-las__guide:not(.is-ready) .gg-las__spot{ opacity: 1; }
@keyframes gg-las-spot-in{ from{ opacity: 0; margin-top: 8px; } to{ opacity: 1; margin-top: 0; } }
@media (max-width: 700px){
	.gg-las__spot em{ display: none; }
	.gg-las__spot b{ width: 20px; height: 20px; font-size: 10px; box-shadow: 0 0 0 2px #fff, 0 4px 10px -3px rgba(237,41,56,.8); }
	.gg-las__spot, .gg-las__spot.is-left{ transform: translate(-50%, -50%); }
}

/* Laptop base (deck + hinge notch) */
.gg-las__base{
	position: relative;
	width: 114%; margin-left: -7%;
	height: clamp(12px, 1.6vw, 20px);
	border-radius: 2px 2px 18px 18px / 2px 2px 100% 100%;
	background: linear-gradient(180deg, #d9dbe0 0%, #b9bcc4 45%, #8e929c 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 28px -14px rgba(15,23,42,.55);
}
.gg-las__notch{
	position: absolute; top: 0; left: 50%;
	width: 16%; height: 45%; transform: translateX(-50%);
	border-radius: 0 0 10px 10px;
	background: linear-gradient(180deg, #9ea2ab, #c4c7ce);
}
.gg-las__floor{
	position: absolute; left: 6%; right: 6%; bottom: 16px; height: 34px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(15,23,42,.28), rgba(15,23,42,0) 70%);
	filter: blur(6px);
	z-index: -1;
}

/* Phone — only on steps that carry data-las-phone */
.gg-las__phone{
	position: absolute; right: 0; bottom: 18px;
	width: 21%; margin: 0;
	padding: .8%;
	border-radius: 30px;
	background: linear-gradient(160deg, #2a2b30, #0b0b0d);
	box-shadow: 0 0 0 1px #3a3b40, 0 30px 50px -20px rgba(15,23,42,.6), 0 12px 30px -16px rgba(237,41,56,.45);
	transform: translate(18%, 12%) rotate(5deg) scale(.9);
	opacity: 0; visibility: hidden;
	transition: all 550ms var(--gg-ease, cubic-bezier(.16,1,.3,1));
	z-index: 5;
}
.gg-las__phone img{ display: block; width: 100%; height: auto; border-radius: 24px; }
.gg-las__phone-notch{
	position: absolute; top: 2.2%; left: 50%; transform: translateX(-50%);
	width: 30%; height: 2.2%; border-radius: 999px; background: #0b0b0d; z-index: 2;
}
.gg-las__guide.has-phone .gg-las__phone{ opacity: 1; visibility: visible; transform: translate(10%, 6%) rotate(4deg); }
.gg-las__guide:not(.is-ready) .gg-las__phone{ display: none; }

/* ── Details card — content + controls in one card, sized to never scroll ── */
.gg-las__gside{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gg-las__gcard{
	position: relative;
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 22px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 34px 70px -42px rgba(15,23,42,.5), 0 20px 50px -40px rgba(237,41,56,.5);
	overflow: hidden;
}
/* Red accent rail along the top of the card */
.gg-las__gcard::before{
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2;
	background: linear-gradient(90deg, var(--gg-red, #ED2938), #ff8a93, var(--gg-red-deep, #B91C28));
}
.gg-las__gpanels{
	display: grid;
	padding: clamp(18px, 2.8vh, 28px) clamp(18px, 1.8vw, 28px) clamp(12px, 1.8vh, 18px);
}
.gg-las__gpanel{ display: flex; flex-direction: column; gap: clamp(9px, 1.5vh, 14px); min-width: 0; }
.gg-las__guide:not(.is-ready) .gg-las__gpanels{ gap: 34px; }
.gg-las__guide.is-ready .gg-las__gpanel{ grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(14px); transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms; }
/* Outgoing fades first, incoming follows — the two never overlap legibly. */
.gg-las__guide.is-ready .gg-las__gpanel.is-active{ opacity: 1; visibility: visible; transform: none; transition: opacity 300ms ease 140ms, transform 420ms var(--gg-ease, cubic-bezier(.16,1,.3,1)) 140ms, visibility 0s linear 0s; }
.gg-las__gpanel:focus-visible{ outline: 3px solid rgba(237,41,56,.3); outline-offset: 3px; }
.gg-las__sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gg-las__ghead{ display: flex; align-items: center; gap: 14px; }
.gg-las__gnum{
	flex-shrink: 0;
	font-family: var(--gg-font-head); font-weight: 800;
	font-size: clamp(36px, 5.6vh, 54px); line-height: .9; letter-spacing: -.05em;
	background: linear-gradient(160deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28) 60%, #5c0d14);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.gg-las__ghead-txt{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gg-las__gphase{
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--gg-font-head); font-size: 11px; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; color: var(--gg-red-deep, #B91C28);
}
.gg-las__gtitle{
	font-family: var(--gg-font-head);
	font-size: clamp(19px, 2.8vh, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12;
	color: var(--gg-black, #0A0A0A); margin: 0;
}
.gg-las__gtext{ margin: 0; font-family: var(--gg-font-body); font-size: clamp(13.5px, 1.8vh, 15px); line-height: 1.55; color: var(--gg-gray-600, #4B5563); }

.gg-las__gblock{
	padding: clamp(9px, 1.4vh, 12px) 12px;
	border-radius: 14px;
	background: var(--gg-gray-50, #F9FAFB);
	border: 1px solid var(--gg-gray-100, #F3F4F6);
}
.gg-las__glabel{
	display: flex; align-items: center; gap: 6px;
	margin: 0 0 8px;
	font-family: var(--gg-font-head); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--gg-gray-500, #6B7280);
}
.gg-las__glabel i{ color: var(--gg-red, #ED2938); font-size: 12px; }
.gg-las__glegend{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gg-las__glegend li{
	display: inline-flex; align-items: center; gap: 7px;
	padding: 4px 10px 4px 4px; border-radius: 999px;
	background: #fff; border: 1px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head); font-size: 12px; font-weight: 700; color: var(--gg-gray-800, #1F2937);
	cursor: default; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.gg-las__glegend li:hover, .gg-las__glegend li.is-hot{ border-color: var(--gg-red, #ED2938); background: var(--gg-red-light, #FFF1F2); transform: translateY(-1px); }
.gg-las__glegend b{
	display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
	background: var(--gg-red, #ED2938); color: #fff; font-size: 10.5px;
}
.gg-las__gcheck{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; }
.gg-las__gcheck li{ display: flex; align-items: flex-start; gap: 7px; font-family: var(--gg-font-body); font-size: 13px; line-height: 1.35; color: var(--gg-gray-700, #374151); }
.gg-las__gcheck i{
	flex-shrink: 0; display: grid; place-items: center; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%;
	background: rgba(22,163,74,.12); color: var(--gg-success, #16A34A); font-size: 11px;
}
.gg-las__gtip{
	display: flex; gap: 9px; align-items: flex-start; margin: auto 0 0;   /* sits on the card's footer, whatever the step's length */
	padding: 9px 12px; border-radius: 12px;
	background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
	border: 1px solid #FDE68A;
	font-family: var(--gg-font-body); font-size: 13px; line-height: 1.45; color: #78350F;
}
.gg-las__gtip i{ color: #D97706; font-size: 15px; line-height: 1.2; }

/* Controls — the card's footer */
.gg-las__gctrl{
	display: flex; align-items: center; gap: 10px;
	padding: 12px clamp(14px, 1.6vw, 22px);
	border-top: 1px solid var(--gg-gray-100, #F3F4F6);
	background: linear-gradient(180deg, #fff, var(--gg-gray-50, #F9FAFB));
}
.gg-las__guide:not(.is-ready) .gg-las__gctrl,
.gg-las__guide:not(.is-ready) .gg-las__ghint{ display: none; }
.gg-las__gprog{ flex: 1; min-width: 70px; display: flex; flex-direction: column; gap: 5px; }
.gg-las__gprog-txt{ font-family: var(--gg-font-head); font-size: 11.5px; font-weight: 700; color: var(--gg-gray-400, #9CA3AF); }
.gg-las__gprog-txt b{ color: var(--gg-black, #0A0A0A); font-size: 13px; }
.gg-las__gprog-bar{ display: block; height: 4px; border-radius: 4px; background: var(--gg-gray-200, #E5E7EB); overflow: hidden; }
.gg-las__gprog-bar span{
	display: block; height: 100%; width: 9%; border-radius: 4px;
	background: linear-gradient(90deg, var(--gg-red-deep, #B91C28), var(--gg-red, #ED2938));
	transition: width 500ms var(--gg-ease, cubic-bezier(.16,1,.3,1));
}
.gg-las__gbtn, .gg-las__gplay{
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 42px; min-width: 42px; padding: 0 14px; border-radius: 12px;
	font-family: var(--gg-font-head); font-size: 13px; font-weight: 700;
	border: 1.5px solid var(--gg-gray-200, #E5E7EB); background: #fff; color: var(--gg-gray-800, #1F2937);
	cursor: pointer; transition: all 200ms ease;
}
.gg-las__gbtn[data-las-prev]{ padding: 0; width: 42px; }
.gg-las__gbtn:hover, .gg-las__gplay:hover{ border-color: rgba(237,41,56,.4); color: var(--gg-red-deep, #B91C28); }
.gg-las__gbtn:disabled{ opacity: .4; cursor: not-allowed; }
.gg-las__gbtn:focus-visible, .gg-las__gplay:focus-visible{ outline: 3px solid rgba(237,41,56,.35); outline-offset: 2px; }
.gg-las__gbtn--next{
	padding: 0 18px; white-space: nowrap; flex-shrink: 0;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff; border-color: transparent;
	box-shadow: 0 12px 26px -12px rgba(237,41,56,.7);
}
.gg-las__gbtn--next:hover{ color: #fff; filter: brightness(1.06); }
.gg-las__gbtn--next i{ transition: transform 200ms ease; }
.gg-las__gbtn--next:hover i{ transform: translateX(3px); }
.gg-las__gplay{ position: relative; overflow: hidden; }
.gg-las__gplay[aria-pressed="true"]{ border-color: var(--gg-red, #ED2938); color: var(--gg-red-deep, #B91C28); background: var(--gg-red-light, #FFF1F2); }
.gg-las__gplay-bar{ position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--gg-red, #ED2938); }
.gg-las__ghint{ margin: 0; padding-left: 4px; font-family: var(--gg-font-body); font-size: 12px; color: var(--gg-gray-400, #9CA3AF); display: flex; gap: 6px; align-items: center; }
@media (hover: none){ .gg-las__ghint{ display: none; } }

/* Hovering a legend number lights up that marker on the laptop screen */
.gg-las__spot b{ transition: transform 200ms var(--gg-ease, cubic-bezier(.16,1,.3,1)), background 200ms ease; }
.gg-las__spot.is-hot{ opacity: 1 !important; animation: none !important; z-index: 2; }
.gg-las__spot.is-hot b{ transform: scale(1.3); background: var(--gg-black, #0A0A0A); }
.gg-las__spot.is-hot em{ background: var(--gg-red, #ED2938); }
.gg-las__shots.has-hot .gg-las__spot:not(.is-hot){ opacity: .35 !important; }

/* Lightbox */
.gg-las__lightbox{
	width: min(1440px, 94vw); max-width: none; max-height: 92vh;
	padding: 0; border: 0; border-radius: 14px; overflow: hidden;
	background: #0b0b0d;
	box-shadow: 0 40px 100px rgba(0,0,0,.5);
}
.gg-las__lightbox::backdrop{ background: rgba(10,10,10,.72); backdrop-filter: blur(4px); }
.gg-las__lightbox img{ display: block; width: 100%; height: auto; max-height: 92vh; object-fit: contain; }
.gg-las__lb-close{
	position: absolute; top: 10px; right: 10px; z-index: 2;
	display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
	border: 0; background: rgba(10,10,10,.75); color: #fff; font-size: 16px; cursor: pointer;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 860px){
	/* Timeline becomes a horizontal rail of phases */
	.gg-las__track{
		display: flex; gap: 18px;
		overflow-x: auto; scroll-snap-type: x proximity;
		padding: 14px 16px;
		margin-inline: -4px;
		scrollbar-width: none;
	}
	.gg-las__track::-webkit-scrollbar{ display: none; }
	.gg-las__track-line{ display: none; }
	.gg-las__phase{ flex: 0 0 auto; scroll-snap-align: center; }
	.gg-las__phase-dots{ flex-wrap: nowrap; }
	.gg-las__phase + .gg-las__phase::before{
		content: ""; position: absolute; left: -16px; top: 50%; width: 14px; height: 2px;
		background: var(--gg-gray-200, #E5E7EB);
	}
}
@media (max-width: 1100px){
	.gg-las__device{ padding: 0 6% 40px 0; max-width: 820px; margin: 0 auto; width: 100%; }
	.gg-las__laptop{ --las-rx: 4deg; --las-ry: -5deg; }
}
@media (max-width: 560px){
	.gg-las__device{ padding: 0 10% 30px 0; }
	.gg-las__lid{ border-radius: 14px 14px 6px 6px; }
	.gg-las__bar{ height: 22px; gap: 6px; padding: 0 6px; }
	.gg-las__url{ height: 15px; font-size: 9px; }
	.gg-las__bar-dots i{ width: 6px; height: 6px; }
	.gg-las__zoom{ width: 18px; height: 18px; font-size: 10px; }
	.gg-las__phone{ width: 26%; border-radius: 18px; }
	.gg-las__phone img{ border-radius: 14px; }
}
/* Small screens: the card follows the laptop; its controls move to the
   card's top edge so "Next" is tapped while the screen is still in view,
   and only the active step takes up height. */
@media (max-width: 1100px){
	.gg-las__gstage{ display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
	.gg-las__gctrl{ order: -1; border-top: 0; border-bottom: 1px solid var(--gg-gray-100, #F3F4F6); padding-top: 14px; }
	.gg-las__guide.is-ready .gg-las__gpanel:not(.is-active){ display: none; }
}
@media (max-width: 420px){
	.gg-las__gprog{ visibility: hidden; min-width: 0; }   /* the timeline above already shows progress */
	.gg-las__gbtn--next{ padding: 0 14px; }
}
@media (max-width: 560px){
	.gg-las__gcheck{ grid-template-columns: minmax(0, 1fr); }
	.gg-las__gplay span:not(.gg-las__gplay-bar){ display: none; }
	.gg-las__gplay{ padding: 0; width: 42px; }
}
@media (max-width: 560px){
	/* Grid, not a column flexbox: minmax(0,1fr) stops the chip rail's
	   content width from leaking into the heading's width. */
	.gg-las__prep{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.gg-las__prep-title{ justify-content: center; }
	.gg-las__prep-list{
		flex-wrap: nowrap; justify-content: flex-start;
		overflow-x: auto; scroll-snap-type: x proximity;
		margin-inline: -16px; padding: 2px 16px 6px;
		scrollbar-width: none;
	}
	.gg-las__prep-list::-webkit-scrollbar{ display: none; }
	.gg-las__prep-list li{ flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce){
	.gg-las__laptop, .gg-las__shot, .gg-las__gpanel, .gg-las__phone, .gg-las__track-fill{ transition: none !important; }
	.gg-las__spot b::after{ animation: none; }
	.gg-las__shot.is-active .gg-las__spot{ animation: none; opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SHARED PREMIUM PIECES
   ═══════════════════════════════════════════════════════════════════════ */
/* Scroll reveal — only once JS has armed it, so no-JS never hides content. */
.gg-las.has-reveal [data-las-reveal]{
	opacity: 0; transform: translateY(22px);
	transition: opacity 700ms ease, transform 800ms var(--gg-ease, cubic-bezier(.16,1,.3,1));
	transition-delay: var(--rd, 0ms);
}
.gg-las.has-reveal [data-las-reveal].is-in{ opacity: 1; transform: none; }

/* Monochrome site illustrations from /static/counter, tinted brand red. */
.gg-las__art{
	display: block; width: 100%; height: 100%;
	background: var(--gg-red, #ED2938);
	-webkit-mask: var(--las-art) center / contain no-repeat;
	mask: var(--las-art) center / contain no-repeat;
}

/* Browser-framed real screenshot */
.gg-las__frame{
	position: relative; margin: 0;
	border-radius: 16px; overflow: hidden;
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	box-shadow: 0 40px 80px -40px rgba(15,23,42,.45), 0 20px 40px -30px rgba(237,41,56,.35);
	transition: transform 600ms var(--gg-ease, cubic-bezier(.16,1,.3,1)), box-shadow 600ms ease;
}
.gg-las__frame img{ display: block; width: 100%; height: auto; aspect-ratio: 1440 / 900; max-height: 65vh; object-fit: cover; object-position: top; }
.gg-las__frame-bar{
	display: flex; align-items: center; gap: 5px;
	height: 28px; padding: 0 12px;
	background: linear-gradient(180deg, #f6f7f9, #eceef2);
	border-bottom: 1px solid #e3e5ea;
}
.gg-las__frame-bar > i{ width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; }
.gg-las__frame-bar > i:first-child{ background: var(--gg-red, #ED2938); }
.gg-las__frame-bar > span{
	flex: 1; min-width: 0; margin-left: 10px;
	height: 17px; line-height: 17px; padding: 0 10px; border-radius: 5px;
	background: #fff; color: var(--gg-gray-500, #6B7280);
	font-family: var(--gg-font-body); font-size: 10.5px; text-align: center;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gg-las__frame--dark{ border-color: #2a2b30; }
.gg-las__frame--dark .gg-las__frame-bar{ background: linear-gradient(180deg, #26272b, #1b1c20); border-bottom-color: #2f3036; }
.gg-las__frame--dark .gg-las__frame-bar > i:not(:first-child){ background: #3f4046; }
.gg-las__frame--dark .gg-las__frame-bar > span{ background: #0f1012; color: #9CA3AF; }

/* Floating glass notification chip */
.gg-las__chip{
	position: absolute; z-index: 3;
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px 10px 10px;
	border-radius: 14px;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,.7);
	box-shadow: 0 20px 40px -18px rgba(15,23,42,.45);
	font-family: var(--gg-font-head);
	animation: gg-las-float 7s ease-in-out infinite;
}
.gg-las__chip > i{
	display: grid; place-items: center; flex-shrink: 0;
	width: 34px; height: 34px; border-radius: 10px;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff; font-size: 15px;
}
.gg-las__chip strong{ display: block; font-size: 12.5px; font-weight: 800; color: var(--gg-black, #0A0A0A); }
.gg-las__chip small{ display: block; font-family: var(--gg-font-body); font-size: 11px; color: var(--gg-gray-500, #6B7280); }

/* Shared feature list */
.gg-las__feat{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px){ .gg-las__feat{ grid-template-columns: minmax(0, 1fr); } }
.gg-las__feat li{
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border-radius: 12px;
	background: #fff; border: 1px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head); font-size: 13.5px; font-weight: 700; color: var(--gg-gray-800, #1F2937);
	transition: border-color 200ms ease, transform 200ms ease;
}
.gg-las__feat li:hover{ border-color: rgba(237,41,56,.35); transform: translateX(2px); }
.gg-las__feat i{
	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;
}

.gg-las__free-badge{
	font-family: var(--gg-font-head); font-size: 11px; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase;
	padding: 5px 11px; border-radius: 999px;
	background: var(--gg-success, #16A34A); color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   3 · WHY LIST — bento
   ═══════════════════════════════════════════════════════════════════════ */
.gg-las__bento{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-areas:
		"hero hero a b"
		"hero hero c c"
		"cta  cta  cta cta";
	gap: 16px;
}
.gg-las__bento > :nth-child(1){ grid-area: hero; }
.gg-las__bento > :nth-child(2){ grid-area: a; }
.gg-las__bento > :nth-child(3){ grid-area: b; }
.gg-las__bento > :nth-child(4){ grid-area: c; }
.gg-las__bento > :nth-child(5){ grid-area: cta; }
@media (max-width: 1100px){
	.gg-las__bento{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "hero hero" "a b" "c c" "cta cta"; }
}
@media (max-width: 600px){
	.gg-las__bento{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "a" "b" "c" "cta"; }
}
.gg-las__bc{
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; gap: 8px;
	padding: 24px;
	border-radius: 20px;
	background: linear-gradient(180deg, #fff, var(--gg-gray-50, #F9FAFB));
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	transition: transform 300ms var(--gg-ease, cubic-bezier(.16,1,.3,1)), box-shadow 300ms ease, border-color 300ms ease;
}
.gg-las__bc:hover{ transform: translateY(-4px); border-color: rgba(237,41,56,.3); box-shadow: 0 26px 50px -30px rgba(237,41,56,.45); }
.gg-las__bc p{ margin: 0; font-family: var(--gg-font-body); font-size: 14px; line-height: 1.6; color: var(--gg-gray-600, #4B5563); }
.gg-las__bc-ico{
	display: grid; place-items: center;
	width: 60px; height: 60px; padding: 10px; margin-bottom: 6px;
	border-radius: 16px;
	background: var(--gg-red-light, #FFF1F2);
	border: 1px solid rgba(237,41,56,.14);
}
.gg-las__bc-title{
	font-family: var(--gg-font-head); font-size: var(--gg-text-lg, 18px); font-weight: 800;
	letter-spacing: -.015em; color: var(--gg-black, #0A0A0A); margin: 0;
}

/* hero tile */
.gg-las__bc--hero{
	padding: clamp(24px, 3vw, 36px);
	background:
		radial-gradient(ellipse at 100% 0%, rgba(237,41,56,.45), transparent 55%),
		radial-gradient(ellipse at 0% 100%, rgba(237,41,56,.18), transparent 50%),
		linear-gradient(160deg, #1b1b1f, var(--gg-black, #0A0A0A));
	border-color: var(--gg-black, #0A0A0A);
	min-height: 420px;
}
.gg-las__bc--hero .gg-las__bc-title{ color: #fff; font-size: clamp(22px, 2.4vw, 30px); }
.gg-las__bc--hero p{ color: rgba(255,255,255,.72); max-width: 42ch; }
.gg-las__bc-copy{ position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.gg-las__bc-ico--glass{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.gg-las__bc-ico--glass .gg-las__art{ background: #fff; }
.gg-las__bc-tags{ list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gg-las__bc-tags li{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 11px; border-radius: 999px;
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
	color: #fff; font-family: var(--gg-font-head); font-size: 12px; font-weight: 700;
}
.gg-las__bc-tags i{ color: #ff8a93; }
.gg-las__bc-shot{
	position: relative; margin: auto -36px -36px 22%;
	border-radius: 14px 0 0 0; overflow: hidden;
	border: 1px solid rgba(255,255,255,.14);
	box-shadow: 0 -20px 60px -20px rgba(237,41,56,.5);
	transform: perspective(1200px) rotateX(4deg) rotateY(-8deg);
	transform-origin: left bottom;
	transition: transform 600ms var(--gg-ease, cubic-bezier(.16,1,.3,1));
}
.gg-las__bc--hero:hover .gg-las__bc-shot{ transform: perspective(1200px) rotateX(0) rotateY(0); }
.gg-las__bc-shot img{ display: block; width: 100%; height: auto; }
.gg-las__bc-shot .gg-las__frame-bar{ height: 22px; background: #1f2024; border-bottom-color: #2a2b30; }
@media (max-width: 600px){ .gg-las__bc--hero{ min-height: 0; } .gg-las__bc-shot{ margin: 18px -24px -24px 8%; } }

/* toast + stack + badges */
.gg-las__bc-toast{
	margin-top: auto;
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border-radius: 14px;
	background: #fff; border: 1px solid var(--gg-gray-200, #E5E7EB);
	box-shadow: 0 14px 30px -18px rgba(15,23,42,.35);
	font-family: var(--gg-font-head);
	animation: gg-las-float 6s ease-in-out infinite;
}
.gg-las__bc-toast-ico{ display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--gg-red, #ED2938); color: #fff; font-size: 14px; flex-shrink: 0; }
.gg-las__bc-toast strong{ display: block; font-size: 12.5px; font-weight: 800; color: var(--gg-black, #0A0A0A); }
.gg-las__bc-toast small{ display: block; font-family: var(--gg-font-body); font-size: 11px; color: var(--gg-gray-500, #6B7280); }
.gg-las__bc-stack{ list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 6px; }
.gg-las__bc-stack li{
	display: flex; align-items: center; gap: 8px;
	padding: 8px 11px; border-radius: 10px;
	background: #fff; border: 1px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head); font-size: 12px; font-weight: 700; color: var(--gg-gray-800, #1F2937);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gg-las__bc-stack li:nth-child(2){ margin-left: 10px; }
.gg-las__bc-stack li:nth-child(3){ margin-left: 20px; }
.gg-las__bc-stack i{ font-size: 6px; color: var(--gg-success, #16A34A); }
.gg-las__bc--wide{ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px; }
.gg-las__bc--wide > div{ flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; }
.gg-las__bc--wide .gg-las__bc-ico{ margin: 0; }
.gg-las__bc-badges{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gg-las__bc-badges li{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 12px; border-radius: 999px;
	background: #fff; border: 1px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head); font-size: 12px; font-weight: 800; color: var(--gg-gray-800, #1F2937);
}
.gg-las__bc-badges i{ color: var(--gg-red, #ED2938); }

/* CTA band tile */
.gg-las__bc--cta{
	flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 24px;
	padding: 20px 28px;
	background: linear-gradient(120deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	border-color: transparent; color: #fff;
	box-shadow: 0 24px 50px -28px rgba(237,41,56,.8);
}
.gg-las__bc--cta:hover{ color: #fff; border-color: transparent; }
.gg-las__bc-cta-big{ font-family: var(--gg-font-head); font-size: clamp(40px, 4vw, 54px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.gg-las__bc-cta-txt{ flex: 1 1 260px; display: flex; flex-direction: column; }
.gg-las__bc-cta-txt strong{ font-family: var(--gg-font-head); font-size: 19px; font-weight: 800; }
.gg-las__bc-cta-txt small{ font-family: var(--gg-font-body); font-size: 14px; color: rgba(255,255,255,.85); }
.gg-las__bc-cta-go{
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 20px; border-radius: 12px;
	background: #fff; color: var(--gg-red-deep, #B91C28);
	font-family: var(--gg-font-head); font-size: 13px; font-weight: 800;
	transition: transform 200ms ease;
}
.gg-las__bc--cta:hover .gg-las__bc-cta-go{ transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════════════
   4 · REAL DEMAND — photo band
   ═══════════════════════════════════════════════════════════════════════ */
.gg-las__band{
	padding: 0; overflow: hidden;
	background: var(--gg-black, #0A0A0A);
	border-color: var(--gg-black, #0A0A0A);
	isolation: isolate;
}
.gg-las__band-bg{
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
	filter: saturate(.85);
}
.gg-las__band::before{
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgba(10,10,10,.96) 0%, rgba(10,10,10,.86) 42%, rgba(10,10,10,.35) 100%),
		radial-gradient(ellipse at 15% 100%, rgba(237,41,56,.45), transparent 55%);
}
.gg-las__band-inner{
	display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px); align-items: end;
	padding: clamp(32px, 5vw, 72px) clamp(20px, 3.4vw, 52px) clamp(24px, 3vw, 36px);
}
@media (max-width: 900px){ .gg-las__band-inner{ grid-template-columns: minmax(0, 1fr); } }
.gg-las__band-text{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; color: rgba(255,255,255,.78); font-family: var(--gg-font-body); font-size: var(--gg-text-base, 15px); line-height: 1.65; }
.gg-las__band-text p{ margin: 0; max-width: 54ch; }
.gg-las__band-text em{ color: #fff; font-style: normal; font-weight: 700; }
.gg-las__band-title{
	font-family: var(--gg-font-head); font-size: clamp(26px, 3.4vw, 42px); font-weight: 800;
	letter-spacing: -.03em; line-height: 1.08; color: #fff; margin: 0; max-width: 18ch;
}
.gg-las__band-stats{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gg-las__band-stats li{
	display: flex; flex-direction: column; gap: 2px;
	padding: 16px; border-radius: 16px;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.14);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.gg-las__band-stats strong{ font-family: var(--gg-font-head); font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1.05; }
.gg-las__band-stats span{ font-family: var(--gg-font-body); font-size: 12px; color: rgba(255,255,255,.7); }
@media (max-width: 480px){
	.gg-las__band-stats{ gap: 6px; }
	.gg-las__band-stats li{ padding: 10px; border-radius: 12px; }
	.gg-las__band-stats strong{ font-size: 20px; }
	.gg-las__band-stats span{ font-size: 10.5px; line-height: 1.3; }
}

/* Live category marquee */
.gg-las__marquee{
	display: flex; overflow: hidden;
	padding: 16px 0 22px;
	border-top: 1px solid rgba(255,255,255,.1);
	-webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.gg-las__marquee-row{
	list-style: none; margin: 0; padding: 0 5px;
	display: flex; gap: 10px; flex-shrink: 0;
	animation: gg-las-marquee 48s linear infinite;
}
.gg-las__marquee:hover .gg-las__marquee-row{ animation-play-state: paused; }
.gg-las__marquee a{
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px; border-radius: 999px;
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
	color: #fff; white-space: nowrap;
	font-family: var(--gg-font-head); font-size: 13px; font-weight: 700;
	transition: background 200ms ease, border-color 200ms ease;
}
.gg-las__marquee a:hover{ background: var(--gg-red, #ED2938); border-color: var(--gg-red, #ED2938); color: #fff; }
.gg-las__marquee a i{ color: #ff8a93; font-size: 12px; }
.gg-las__marquee a:hover i{ color: #fff; }
.gg-las__marquee small{ padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 11px; }
@keyframes gg-las-marquee{ to{ transform: translateX(-100%); } }

/* ═══════════════════════════════════════════════════════════════════════
   5 · STOREFRONT — alternating real screens
   ═══════════════════════════════════════════════════════════════════════ */
.gg-las__showcase{ display: flex; flex-direction: column; gap: clamp(36px, 5vw, 72px); }
.gg-las__show{
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 60px); align-items: center;
}
.gg-las__show--flip .gg-las__frame{ order: 2; }
@media (max-width: 980px){ .gg-las__show{ grid-template-columns: minmax(0, 1fr); } .gg-las__show--flip .gg-las__frame{ order: 0; } }
.gg-las__show .gg-las__frame{ transform: perspective(1600px) rotateY(6deg) rotateX(2deg); }
.gg-las__show--flip .gg-las__frame{ transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); }
.gg-las__show .gg-las__frame:hover{ transform: perspective(1600px) rotateY(0) rotateX(0) translateY(-4px); }
.gg-las.has-reveal .gg-las__show .gg-las__frame[data-las-reveal]:not(.is-in){ transform: perspective(1600px) rotateY(0) translateY(30px); }
@media (max-width: 980px){ .gg-las__show .gg-las__frame, .gg-las__show--flip .gg-las__frame{ transform: none; } }
.gg-las__show-copy{ display: flex; flex-direction: column; gap: 10px; }
.gg-las__show-eyebrow{
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 12px; border-radius: 999px;
	background: var(--gg-red-light, #FFF1F2); color: var(--gg-red-deep, #B91C28);
	font-family: var(--gg-font-head); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.gg-las__show-title{ font-family: var(--gg-font-head); font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.025em; color: var(--gg-black, #0A0A0A); margin: 0; }
.gg-las__show-copy > p{ margin: 0 0 8px; font-family: var(--gg-font-body); font-size: var(--gg-text-base, 15px); line-height: 1.6; color: var(--gg-gray-600, #4B5563); max-width: 52ch; }

/* ═══════════════════════════════════════════════════════════════════════
   6 · DASHBOARD — dark section, real enquiries screen
   ═══════════════════════════════════════════════════════════════════════ */
.gg-las__dash-sec{
	overflow: hidden;
	background:
		radial-gradient(ellipse at 100% 0%, rgba(237,41,56,.32), transparent 50%),
		radial-gradient(ellipse at 0% 100%, rgba(237,41,56,.14), transparent 45%),
		linear-gradient(160deg, #18181b, var(--gg-black, #0A0A0A));
	border-color: var(--gg-black, #0A0A0A);
}
.gg-las__dash-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (max-width: 1000px){ .gg-las__dash-grid{ grid-template-columns: minmax(0, 1fr); } }
.gg-las__dash-copy{ display: flex; flex-direction: column; gap: 10px; }
.gg-las__dash-title{ font-family: var(--gg-font-head); font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #fff; margin: 4px 0 0; }
.gg-las__dash-dek{ margin: 0 0 12px; font-family: var(--gg-font-body); font-size: var(--gg-text-base, 15px); color: rgba(255,255,255,.7); }
.gg-las__dash-list{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px){ .gg-las__dash-list{ grid-template-columns: minmax(0, 1fr); } }
.gg-las__dash-list li{
	display: flex; gap: 12px; align-items: flex-start;
	padding: 16px; border-radius: 16px;
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
	transition: background 200ms ease, border-color 200ms ease;
}
.gg-las__dash-list li:hover{ background: rgba(255,255,255,.07); border-color: rgba(237,41,56,.4); }
.gg-las__dash-ico{
	flex-shrink: 0; display: grid; place-items: center;
	width: 38px; height: 38px; border-radius: 11px;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff; font-size: 16px;
}
.gg-las__dash-list h3{ font-family: var(--gg-font-head); font-size: 15px; font-weight: 800; color: #fff; margin: 0 0 3px; }
.gg-las__dash-list p{ font-family: var(--gg-font-body); font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.62); margin: 0; }
.gg-las__dash-visual{ position: relative; padding: 24px 16px 30px; }
.gg-las__dash-visual .gg-las__frame{ box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06), 0 30px 80px -40px rgba(237,41,56,.6); }
.gg-las__chip--a{ top: 0; right: 0; }
.gg-las__chip--b{ bottom: 0; left: 0; animation-delay: 1.2s; }
.gg-las__chip--b > i{ background: #FBBF24; color: #78350F; }
@media (max-width: 480px){ .gg-las__chip{ padding: 7px 10px 7px 7px; } .gg-las__chip > i{ width: 28px; height: 28px; } }

/* ═══════════════════════════════════════════════════════════════════════
   7 · CATEGORIES
   ═══════════════════════════════════════════════════════════════════════ */
.gg-las__split-head{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.gg-las__split-head .gg-las__sec-head{ margin-bottom: 0; }
.gg-las__cats{
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
@media (max-width: 480px){ .gg-las__cats{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.gg-las__cats > li{ display: flex; }
.gg-las__cat{
	position: relative; flex: 1;
	display: flex; flex-direction: column; gap: 6px;
	padding: 18px; border-radius: 18px;
	background: #fff; color: inherit;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	transition: transform 300ms var(--gg-ease, cubic-bezier(.16,1,.3,1)), box-shadow 300ms ease, border-color 300ms ease;
	overflow: hidden;
}
.gg-las__cat::before{
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: radial-gradient(circle at 0% 0%, rgba(237,41,56,.10), transparent 60%);
	opacity: 0; transition: opacity 300ms ease;
}
.gg-las__cat > *{ position: relative; z-index: 1; }
.gg-las__cat:hover{ transform: translateY(-4px); border-color: rgba(237,41,56,.35); box-shadow: 0 24px 44px -28px rgba(237,41,56,.55); }
.gg-las__cat:hover::before{ opacity: 1; }
.gg-las__cat-ico{
	display: grid; place-items: center;
	width: 52px; height: 52px; margin-bottom: 6px; border-radius: 15px;
	background: linear-gradient(135deg, var(--gg-red-light, #FFF1F2), #fff);
	border: 1px solid rgba(237,41,56,.16);
	color: var(--gg-red, #ED2938); font-size: 20px;
	transition: transform 300ms var(--gg-ease, cubic-bezier(.16,1,.3,1));
}
.gg-las__cat:hover .gg-las__cat-ico{ transform: rotate(-6deg) scale(1.06); }
.gg-las__cat-ico img{ width: 30px; height: 30px; object-fit: contain; }
.gg-las__cat-name{ font-family: var(--gg-font-head); font-size: 16px; font-weight: 800; color: var(--gg-black, #0A0A0A); letter-spacing: -.01em; }
.gg-las__cat-svc{
	font-family: var(--gg-font-body); font-size: 12.5px; line-height: 1.5; color: var(--gg-gray-500, #6B7280);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gg-las__cat-foot{
	margin-top: auto; padding-top: 12px;
	display: flex; align-items: center; justify-content: space-between;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-body); font-size: 12px; color: var(--gg-gray-500, #6B7280);
}
.gg-las__cat-foot b{ font-family: var(--gg-font-head); color: var(--gg-black, #0A0A0A); font-size: 14px; }
.gg-las__cat-foot i{
	display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--gg-gray-100, #F3F4F6); color: var(--gg-gray-700, #374151);
	transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.gg-las__cat:hover .gg-las__cat-foot i{ background: var(--gg-red, #ED2938); color: #fff; transform: rotate(45deg); }

/* ═══════════════════════════════════════════════════════════════════════
   8 · CITIES — ranked bars (single hue, value labelled in text ink)
   ═══════════════════════════════════════════════════════════════════════ */
.gg-las__cities-grid{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
@media (max-width: 980px){ .gg-las__cities-grid{ grid-template-columns: minmax(0, 1fr); } }
.gg-las__cities-grid .gg-las__sec-head{ margin-bottom: 0; align-items: flex-start; }
.gg-las__cities-grid .gg-las__sec-head .gg-las__btn{ margin-top: 10px; }
@media (min-width: 981px){ .gg-las__cities-grid .gg-las__sec-head{ position: sticky; top: 110px; } }
.gg-las__rank{
	list-style: none; margin: 0; padding: 8px;
	display: grid; gap: 4px;
	background: #fff; border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 20px;
	box-shadow: 0 24px 50px -36px rgba(15,23,42,.4);
}
.gg-las__rank-row{
	display: flex; align-items: center; gap: 14px;
	padding: 12px 14px; border-radius: 14px;
	color: inherit;
	transition: background 200ms ease;
}
.gg-las__rank-row:hover{ background: var(--gg-gray-50, #F9FAFB); }
.gg-las__rank-n{
	flex-shrink: 0; width: 34px;
	font-family: var(--gg-font-head); font-size: 15px; font-weight: 800; color: var(--gg-gray-300, #D1D5DB);
}
.gg-las__rank li:first-child .gg-las__rank-n{ color: var(--gg-red, #ED2938); }
.gg-las__rank-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gg-las__rank-top{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.gg-las__rank-top strong{ font-family: var(--gg-font-head); font-size: 15px; font-weight: 800; color: var(--gg-black, #0A0A0A); }
.gg-las__rank-top strong small{ font-weight: 600; color: var(--gg-gray-500, #6B7280); font-size: 13px; }
.gg-las__rank-val{ font-family: var(--gg-font-body); font-size: 12px; color: var(--gg-gray-500, #6B7280); }
.gg-las__rank-val b{ font-family: var(--gg-font-head); color: var(--gg-gray-800, #1F2937); }
.gg-las__rank-track{ display: block; height: 6px; border-radius: 4px; background: var(--gg-gray-100, #F3F4F6); overflow: hidden; }
.gg-las__rank-bar{
	display: block; height: 100%; width: var(--w); border-radius: 4px;
	background: linear-gradient(90deg, var(--gg-red-deep, #B91C28), var(--gg-red, #ED2938));
	transform-origin: left; transition: transform 1100ms var(--gg-ease, cubic-bezier(.16,1,.3,1));
}
.gg-las.has-reveal .gg-las__rank:not(.is-in) .gg-las__rank-bar{ transform: scaleX(0); }
.gg-las__rank-go{ color: var(--gg-gray-300, #D1D5DB); transition: color 200ms ease, transform 200ms ease; }
.gg-las__rank-row:hover .gg-las__rank-go{ color: var(--gg-red, #ED2938); transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════════════
   9 · FREE + WHO
   ═══════════════════════════════════════════════════════════════════════ */
.gg-las__free-grid{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
@media (max-width: 960px){ .gg-las__free-grid{ grid-template-columns: minmax(0, 1fr); } }

/* Animated gradient border */
@property --las-angle{ syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.gg-las__price{
	position: relative; padding: 2px; border-radius: 26px;
	background: conic-gradient(from var(--las-angle), var(--gg-red, #ED2938), #ffb3b9, var(--gg-red-deep, #B91C28), #ffd5d8, var(--gg-red, #ED2938));
	animation: gg-las-spin 6s linear infinite;
	box-shadow: 0 40px 80px -40px rgba(237,41,56,.55);
}
@keyframes gg-las-spin{ to{ --las-angle: 360deg; } }
.gg-las__price-inner{
	position: relative; padding: clamp(24px, 3vw, 38px); border-radius: 24px;
	background:
		radial-gradient(ellipse at 100% 0%, rgba(237,41,56,.08), transparent 55%),
		#fff;
}
.gg-las__price-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.gg-las__price-plan{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--gg-font-head); font-size: 14px; font-weight: 800; color: var(--gg-black, #0A0A0A); }
.gg-las__price-plan i{ color: var(--gg-red, #ED2938); }
.gg-las__price-amt{ font-family: var(--gg-font-head); font-size: 20px; font-weight: 800; color: var(--gg-gray-700, #374151); margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.gg-las__price-amt span{
	font-size: clamp(56px, 6vw, 76px); letter-spacing: -.05em; line-height: .95;
	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-las__price-sub{ font-family: var(--gg-font-body); font-size: 14px; color: var(--gg-gray-500, #6B7280); margin: 10px 0 20px; }
.gg-las__price-list{ list-style: none; margin: 0 0 24px; padding: 20px 0 0; border-top: 1px dashed var(--gg-gray-200, #E5E7EB); display: grid; gap: 12px; }
.gg-las__price-list li{ display: flex; align-items: flex-start; gap: 10px; font-family: var(--gg-font-body); font-size: 15px; color: var(--gg-gray-700, #374151); }
.gg-las__price-list i{
	flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
	background: var(--gg-red-light, #FFF1F2); color: var(--gg-red, #ED2938); font-size: 12px; margin-top: 1px;
}

.gg-las__who{ display: flex; flex-direction: column; gap: 10px; }
.gg-las__who-list{ list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px){ .gg-las__who-list{ grid-template-columns: minmax(0, 1fr); } }
.gg-las__who-list li{
	display: flex; align-items: flex-start; gap: 12px;
	padding: 16px; border-radius: 16px;
	background: linear-gradient(180deg, #fff, var(--gg-gray-50, #F9FAFB));
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	transition: transform 250ms ease, border-color 250ms ease;
}
.gg-las__who-list li:hover{ transform: translateY(-3px); border-color: rgba(237,41,56,.3); }
.gg-las__who-list strong{ display: block; font-family: var(--gg-font-head); font-size: 14px; font-weight: 800; color: var(--gg-black, #0A0A0A); }
.gg-las__who-list small{ display: block; font-family: var(--gg-font-body); font-size: 12.5px; color: var(--gg-gray-500, #6B7280); margin-top: 2px; line-height: 1.45; }
.gg-las__who-ico{
	flex-shrink: 0; display: grid; place-items: center;
	width: 38px; height: 38px; border-radius: 11px;
	background: var(--gg-black, #0A0A0A); color: #fff; font-size: 16px;
}
.gg-las__who-note{ display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-family: var(--gg-font-body); font-size: 13px; color: var(--gg-gray-600, #4B5563); }
.gg-las__who-note i{ color: var(--gg-success, #16A34A); font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════════════
   10 · FAQ
   ═══════════════════════════════════════════════════════════════════════ */
.gg-las__faq-grid{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
@media (max-width: 980px){ .gg-las__faq-grid{ grid-template-columns: minmax(0, 1fr); } }
.gg-las__faq-side{ display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 981px){ .gg-las__faq-side{ position: sticky; top: 110px; } }
.gg-las__support{
	margin-top: 10px;
	display: flex; flex-direction: column; gap: 6px;
	padding: 22px; border-radius: 20px;
	background:
		radial-gradient(ellipse at 100% 0%, rgba(237,41,56,.4), transparent 60%),
		linear-gradient(160deg, #1b1b1f, var(--gg-black, #0A0A0A));
	color: rgba(255,255,255,.72);
	font-family: var(--gg-font-body); font-size: 14px;
}
.gg-las__support strong{ font-family: var(--gg-font-head); font-size: 18px; font-weight: 800; color: #fff; }
.gg-las__support p{ margin: 0 0 8px; }
.gg-las__support-ico{
	display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px; border-radius: 12px;
	background: rgba(255,255,255,.1); color: #fff; font-size: 18px;
}
.gg-las__support-links{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.gg-las__support-link{ color: #fff; font-family: var(--gg-font-head); font-size: 13px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.gg-las__support-link:hover{ color: #ff8a93; }

.gg-las__faq{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gg-las__faq-item details{
	background: #fff; border: 1px solid var(--gg-gray-200, #E5E7EB); border-radius: 16px;
	transition: border-color 250ms ease, box-shadow 250ms ease;
}
.gg-las__faq-item details[open]{ border-color: rgba(237,41,56,.35); box-shadow: 0 18px 36px -26px rgba(237,41,56,.5); }
.gg-las__faq-item summary{ display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; }
.gg-las__faq-item summary::-webkit-details-marker{ display: none; }
.gg-las__faq-item summary:focus-visible{ outline: 3px solid rgba(237,41,56,.35); outline-offset: 2px; border-radius: 16px; }
.gg-las__faq-n{ flex-shrink: 0; font-family: var(--gg-font-head); font-size: 13px; font-weight: 800; color: var(--gg-gray-300, #D1D5DB); transition: color 250ms ease; }
.gg-las__faq-item details[open] .gg-las__faq-n{ color: var(--gg-red, #ED2938); }
.gg-las__faq-q{ flex: 1; font-family: var(--gg-font-head); font-size: 16px; font-weight: 700; color: var(--gg-black, #0A0A0A); margin: 0; }
.gg-las__faq-chev{
	flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
	background: var(--gg-gray-100, #F3F4F6); color: var(--gg-gray-700, #374151);
	transition: transform 300ms var(--gg-ease, cubic-bezier(.16,1,.3,1)), background 250ms ease, color 250ms ease;
}
.gg-las__faq-item details[open] .gg-las__faq-chev{ transform: rotate(45deg); background: var(--gg-red, #ED2938); color: #fff; }
.gg-las__faq-a{ padding: 0 20px 20px 47px; }
.gg-las__faq-a p{ margin: 0; font-family: var(--gg-font-body); font-size: 15px; line-height: 1.7; color: var(--gg-gray-600, #4B5563); }
@media (max-width: 560px){ .gg-las__faq-a{ padding-left: 20px; } }

/* ═══════════════════════════════════════════════════════════════════════
   11 · FINAL CTA — dark, phone mockup
   ═══════════════════════════════════════════════════════════════════════ */
.gg-las__final{
	overflow: hidden; isolation: isolate;
	background:
		radial-gradient(ellipse at 85% 30%, rgba(237,41,56,.55), transparent 50%),
		radial-gradient(ellipse at 10% 110%, rgba(237,41,56,.25), transparent 45%),
		linear-gradient(160deg, #1a1a1d, var(--gg-black, #0A0A0A));
	border-color: var(--gg-black, #0A0A0A);
	padding-bottom: 0;
}
.gg-las__final-grid-bg{
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask: radial-gradient(ellipse at 70% 40%, #000, transparent 70%);
	mask: radial-gradient(ellipse at 70% 40%, #000, transparent 70%);
}
.gg-las__final-inner{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
@media (max-width: 900px){ .gg-las__final-inner{ grid-template-columns: minmax(0, 1fr); } }
.gg-las__final-copy{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: clamp(28px, 4vw, 56px); }
.gg-las__final-title{ font-family: var(--gg-font-head); font-size: clamp(30px, 4.2vw, 54px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; color: #fff; margin: 0; max-width: 16ch; }
.gg-las__final-title span{ background: linear-gradient(135deg, #ff6b76, var(--gg-red, #ED2938)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.gg-las__final-sub{ margin: 0; font-family: var(--gg-font-body); font-size: var(--gg-text-lg, 17px); color: rgba(255,255,255,.75); max-width: 50ch; }
.gg-las__final-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.gg-las__final-ticks{ list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--gg-font-head); font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8); }
.gg-las__final-ticks i{ color: #ff8a93; margin-right: 4px; }
.gg-las__final-visual{ position: relative; display: flex; justify-content: center; min-height: 300px; }
.gg-las__final-phone{
	position: relative; margin: 0;
	width: min(270px, 70%);
	padding: 9px 9px 0; border-radius: 40px 40px 0 0;
	background: linear-gradient(160deg, #2a2b30, #0b0b0d);
	box-shadow: 0 0 0 1px #3a3b40, 0 -20px 80px -20px rgba(237,41,56,.6);
	transform: translateY(14%);
}
.gg-las__final-phone img{ display: block; width: 100%; height: auto; border-radius: 32px 32px 0 0; }
.gg-las__final-phone .gg-las__phone-notch{ top: 18px; height: 16px; }
.gg-las__chip--c{ top: 18%; left: -2%; }
.gg-las__chip--c > i{ background: var(--gg-success, #16A34A); }
.gg-las__chip--d{ top: 48%; right: -2%; animation-delay: 1.4s; }
@media (max-width: 900px){
	.gg-las__final-visual{ min-height: 0; }
	.gg-las__final-phone{ width: min(240px, 64%); transform: translateY(8%); }
	.gg-las__chip--c{ left: 0; } .gg-las__chip--d{ right: 0; }
}

@media (prefers-reduced-motion: reduce){
	.gg-las.has-reveal [data-las-reveal]{ opacity: 1; transform: none; transition: none; }
	.gg-las__marquee-row, .gg-las__price, .gg-las__chip, .gg-las__bc-toast{ animation: none; }
	.gg-las__rank-bar{ transition: none; }
}