/* ==========================================================================
   Growth Creator Lab, one-page landing.

   Palette (GCL banner palette):
     Ink Black    #09090B  background, dark icon squares, dark text
     Signal Pink  #FF2E63  accent: glow, highlighted words, GCL icon, arrows
     Blush White  #FFF5F7  headline text, button outline, light icon squares
   (Logo Coral #FF5757 is reserved for the LinoDash logo and is not used here.)

   Type: Schibsted Grotesk (headline, open licence, chosen for its heavy,
   tight, Ahrefs-style voice) and Rink (base).
   Contrast: Blush White on Signal Pink is only 3.4:1, so small text on a pink
   fill is always Ink Black (6.1:1). No em dashes in any copy.
   ========================================================================== */

@font-face {
	font-family: "Schibsted Grotesk";
	src: url("../fonts/SchibstedGrotesk-Variable-latin.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Rink";
	src: url("../fonts/Rink-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Rink";
	src: url("../fonts/Rink-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Rink";
	src: url("../fonts/Rink-Semibold.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "Rink";
	src: url("../fonts/Rink-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

:root {
	--gcl-ink: #09090B;
	--gcl-pink: #FF2E63;
	--gcl-pink-soft: #FF5C86;
	--gcl-blush: #FFF5F7;
	--gcl-coral: #FF5757;                     /* LinoDash logo dot and dash only */

	--gcl-text: rgba(255, 245, 247, .74);     /* body copy, ~10:1 on ink */
	--gcl-muted: rgba(255, 245, 247, .6);     /* placeholder, ~7:1 */
	--gcl-line: rgba(255, 245, 247, .14);
	--gcl-surface: #121215;                   /* lifted ink for the nav and field */

	--gcl-display: "Schibsted Grotesk", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
	--gcl-body: "Rink", "Avenir Next", -apple-system, system-ui, sans-serif;

	--gcl-maxw: 1140px;
	--gcl-gutter: clamp(1rem, 5vw, 2rem);
	--gcl-ease: cubic-bezier(.22, .61, .36, 1);

	/* Background texture: a field of tapered light strands rising from the
	 * bottom of the page, Signal Pink fading up into the dark and warming to
	 * Blush White at the base. One 16px tile, repeated across the width. */
	--gcl-strand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='100' viewBox='0 0 16 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FF2E63' stop-opacity='0'/%3E%3Cstop offset='.38' stop-color='%23FF2E63' stop-opacity='.9'/%3E%3Cstop offset='.72' stop-color='%23FF5C86'/%3E%3Cstop offset='1' stop-color='%23FFF5F7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7.7 0h.6L10 100H6Z' fill='url%28%23g%29'/%3E%3C/svg%3E");
	--gcl-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

/* The page is dark only. Ink is set on both html and body so no host,
 * embed or browser default can paint a light canvas behind it. */
html {
	-webkit-text-size-adjust: 100%;
	color-scheme: dark;
	background: var(--gcl-ink);
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	color: var(--gcl-text);
	font-family: var(--gcl-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	position: relative;
	isolation: isolate;
	/* A faint pink aurora from the top right, over the ink. */
	background:
		radial-gradient(60% 45% at 88% 0%, rgba(255, 46, 99, .13), transparent 70%) no-repeat,
		var(--gcl-ink);
}

/* Texture, layer 1: the strand field. It lives on <main> so it rises from
 * the footer line, the same edge the photo stands on. */
main { position: relative; isolation: isolate; }
main::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: clamp(260px, 52vh, 580px);
	z-index: -1;
	pointer-events: none;
	background: var(--gcl-strand) 0 0 / 16px 100% repeat-x;
	opacity: .9;
	transform-origin: 50% 100%;
}
/* Two columns: the strands dim behind the copy and run at full strength at
 * the page edge and behind the photo, so the text never fights them. */
@media (min-width: 860px) {
	main::before {
		-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .3) 10%, rgba(0, 0, 0, .3) 46%, #000 60%);
		        mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .3) 10%, rgba(0, 0, 0, .3) 46%, #000 60%);
	}
}
@media (max-width: 859px) {
	/* One column: a lower, quieter field so the form stays clear. */
	main::before {
		height: clamp(110px, 16vh, 160px);
		background-size: 12px 100%;
		opacity: .6;
	}
}

/* Texture, layer 2: film grain over everything, so the flat ink reads as a
 * printed surface instead of an empty screen. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--gcl-grain);
	background-size: 180px 180px;
	opacity: .07;
	mix-blend-mode: overlay;
}

img { max-width: 100%; }

/* `hidden` always wins, even over components that set their own display. */
[hidden] { display: none !important; }

::selection { background: var(--gcl-pink); color: var(--gcl-ink); }

.gcl-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* The SVG symbol sheet takes no space. */
.gcl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Honeypot field: off-screen for people, still in the form for bots. */
.gcl-hp {
	position: absolute !important;
	left: -10000px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.gcl-skip {
	position: absolute;
	left: 1rem; top: -4rem;
	z-index: 200;
	padding: .6rem 1rem;
	background: var(--gcl-blush);
	color: var(--gcl-ink);
	border-radius: 8px;
	text-decoration: none;
}
.gcl-skip:focus { top: 1rem; }
main:focus { outline: none; }

:focus-visible {
	outline: 2px solid var(--gcl-pink);
	outline-offset: 3px;
}

/* ---- Buttons ---------------------------------------------------------- */
.gcl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 44px;
	padding: 0 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--gcl-pink);
	color: var(--gcl-ink);
	font: 600 1rem/1 var(--gcl-body);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--gcl-ease), box-shadow .25s ease;
}
.gcl-btn:hover {
	background: var(--gcl-pink-soft);
	transform: translateY(-1px);
	box-shadow: 0 0 0 1px rgba(255, 46, 99, .4), 0 12px 32px -8px rgba(255, 46, 99, .65);
}
.gcl-btn:active { transform: translateY(0); }
.gcl-btn:disabled { cursor: progress; opacity: .75; transform: none; box-shadow: none; }

.gcl-arrow {
	width: 1.1em; height: 1.1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .25s var(--gcl-ease);
}
.gcl-btn:hover .gcl-arrow { transform: translateX(3px); }

/* ---- Header: the logo, nothing else --------------------------------- */
.gcl-header {
	width: 100%;
	max-width: calc(var(--gcl-maxw) + 2 * var(--gcl-gutter));
	margin-inline: auto;
	padding: clamp(1.25rem, 3vw, 2rem) var(--gcl-gutter) 0;
	display: flex;
	align-items: center;
	gap: .85rem;
}

.gcl-logo { display: inline-flex; align-items: center; min-height: 44px; border-radius: 10px; }

/* "by linodash": a quiet endorsement after the copyright, split off by a
 * hairline, carrying the LinoDash coral dash. */
.gcl-by {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	min-height: 44px;
	padding-left: .75rem;
	border-left: 1px solid var(--gcl-line);
	color: var(--gcl-muted);
	font-size: .82rem;
	line-height: 1;
	text-decoration: none;
	border-radius: 0 8px 8px 0;
	transition: color .2s ease;
}
.gcl-by__by { font-weight: 400; }
.gcl-by__name {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	color: var(--gcl-blush);
	font-family: var(--gcl-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.03em;
}
.gcl-by__dash {
	display: inline-block;
	width: .55em;
	height: .16em;
	border-radius: 1px;
	background: var(--gcl-coral);
	transform-origin: left center;
	transition: transform .35s var(--gcl-ease);
}
.gcl-by:hover { color: var(--gcl-blush); }
.gcl-by:hover .gcl-by__dash { transform: scaleX(1.5); }
.gcl-logo img {
	display: block;
	width: auto;
	height: clamp(30px, 3.2vw, 38px);
	transition: transform .35s var(--gcl-ease), filter .35s ease;
}
.gcl-logo:hover img {
	transform: translateY(-1px);
	filter: drop-shadow(0 4px 14px rgba(255, 46, 99, .45));
}

/* ---- Hero ------------------------------------------------------------- */
main { flex: 1; display: flex; }

.gcl-hero {
	flex: 1;
	display: flex;
	overflow-x: clip;              /* the glow and chips overflow their box, never the page */
	padding: clamp(1.25rem, 3vw, 2rem) var(--gcl-gutter) clamp(3rem, 8vw, 4rem);
}

@media (max-width: 767px) {
	/* Room under the form, so the strands rise below the copy, not behind it. */
	.gcl-hero { padding-bottom: clamp(7rem, 18vh, 9rem); }
}

.gcl-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3rem);
	align-items: center;
	width: 100%;
	max-width: var(--gcl-maxw);
	margin-inline: auto;
}

@media (min-width: 860px) {
	.gcl-hero__inner {
		grid-template-columns: 56fr 44fr;
		align-items: stretch;
		min-height: min(60vh, 540px);
	}
	.gcl-hero__content { align-self: center; padding-bottom: 1.5rem; }
}

/* Big, heavy and tightly set, the way Ahrefs sets its headlines. */
.gcl-hero__title {
	margin: 0 0 1.4rem;
	max-width: 14ch;
	color: var(--gcl-blush);
	font-family: var(--gcl-display);
	font-size: clamp(2.5rem, 5.6vw, 4.4rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

/* Highlighted words in Signal Pink, with a soft glow. */
.gcl-mark {
	color: var(--gcl-pink);
	text-shadow: 0 0 28px rgba(255, 46, 99, .45);
}

.gcl-hero__subhead {
	max-width: 33rem;
	margin: 0 0 2.1rem;
	font-size: clamp(1.05rem, 1.45vw, 1.17rem);
	line-height: 1.7;
}

/* ---- Newsletter form -------------------------------------------------- */
.gcl-form {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	max-width: 34rem;
	padding: 6px 6px 6px 1.4rem;
	background: var(--gcl-surface);
	border: 1.5px solid rgba(255, 245, 247, .28);
	border-radius: 999px;
	transition: border-color .2s ease, box-shadow .3s ease;
}
.gcl-form:focus-within {
	border-color: var(--gcl-pink);
	box-shadow: 0 0 0 4px rgba(255, 46, 99, .16), 0 0 40px -6px rgba(255, 46, 99, .45);
}

.gcl-form__input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: var(--gcl-blush);
	font: 400 1rem var(--gcl-body);
	caret-color: var(--gcl-pink);
}
.gcl-form__input::placeholder { color: var(--gcl-muted); }
.gcl-form__input:focus { outline: none; }

.gcl-form__btn { min-height: 50px; padding-inline: 1.5rem 1.3rem; font-size: 1rem; }

/* The message sits in the flow under the form, so it pushes the trust row
 * down instead of landing on top of it. Empty, it takes no space. */
.gcl-form__msg {
	max-width: 34rem;
	margin: .75rem 0 0;
	padding-inline: 1.4rem;
	font-size: .9rem;
	line-height: 1.4;
}
.gcl-form__msg:empty { display: none; }
.gcl-form__msg.is-error { color: var(--gcl-pink-soft); }
.gcl-form__msg.is-ok { color: var(--gcl-blush); }

/* "Did you mean …?" under an email field. The suggestion is a button. */
.gcl-hint {
	margin: .5rem 0 0;
	color: var(--gcl-text);
	font-size: .9rem;
	line-height: 1.5;
}
.gcl-hint[hidden] { display: none; }
.gcl-hint--hero { max-width: 34rem; padding-inline: 1.4rem; }
.gcl-hint__fix {
	padding: 0;
	border: 0;
	background: none;
	color: var(--gcl-pink);
	font: 600 1em var(--gcl-body);
	line-height: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	overflow-wrap: anywhere;
}
.gcl-hint__fix:hover { color: var(--gcl-pink-soft); }

.gcl-form.is-shake { animation: gcl-shake .4s var(--gcl-ease); }
@keyframes gcl-shake {
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}

/* Phones: the field and the button split into two separate controls, the
 * field carrying its own outline and focus glow. */
@media (max-width: 479px) {
	.gcl-form {
		flex-direction: column;
		align-items: stretch;
		gap: .75rem;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}
	.gcl-form:focus-within { box-shadow: none; }
	.gcl-form__input {
		min-height: 56px;
		padding-inline: 1.25rem;
		background: var(--gcl-surface);
		border: 1.5px solid rgba(255, 245, 247, .28);
		border-radius: 999px;
		transition: border-color .2s ease, box-shadow .3s ease;
	}
	.gcl-form__input:focus {
		border-color: var(--gcl-pink);
		box-shadow: 0 0 0 4px rgba(255, 46, 99, .16), 0 0 40px -6px rgba(255, 46, 99, .45);
	}
	.gcl-form__btn { min-height: 56px; }
	.gcl-form__msg { padding-inline: 1.25rem; }
	.gcl-hint--hero { padding-inline: .25rem; }
}

/* ---- Confirmation modal ----------------------------------------------
   A native <dialog>: the browser handles the top layer, focus trapping,
   Esc to close and the inert page behind. Centred window from 600px up,
   bottom sheet on phones. */
.gcl-done {
	width: min(32rem, calc(100% - 2rem));
	max-width: none;
	max-height: calc(100dvh - 2rem);
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gcl-text);
	overflow: visible;
}
.gcl-done::backdrop {
	background: rgba(5, 5, 7, .74);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
}
/* Stop the page scrolling behind the modal (iOS included). */
html.gcl-modal-open,
html.gcl-modal-open body { overflow: hidden; }

.gcl-done__panel {
	position: relative;
	max-height: inherit;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: clamp(1.4rem, 3vw, 1.75rem);
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(255, 46, 99, .16), transparent 55%),
		var(--gcl-surface);
	border: 1px solid rgba(255, 46, 99, .35);
	border-radius: 24px;
	box-shadow: 0 0 0 4px rgba(255, 46, 99, .06), 0 40px 80px -30px rgba(255, 46, 99, .55), 0 30px 60px -20px rgba(0, 0, 0, .8);
}

.gcl-done__grip { display: none; }

.gcl-done__close {
	position: absolute;
	top: .75rem; right: .75rem;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	padding: 0;
	border: 1px solid var(--gcl-line);
	border-radius: 12px;
	background: var(--gcl-ink);
	color: var(--gcl-blush);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gcl-done__close svg {
	width: 18px; height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}
.gcl-done__close:hover { background: var(--gcl-pink); border-color: var(--gcl-pink); color: var(--gcl-ink); }

.gcl-done__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: .9rem;
	padding-right: 3rem;           /* clear of the close button */
}

/* The envelope in a Signal Pink icon square, with an ink check badge. */
.gcl-done__icon {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	border-radius: 16px;
	background: var(--gcl-pink);
	box-shadow: 0 12px 28px -10px rgba(255, 46, 99, .8);
}
.gcl-done__mail {
	width: 28px; height: 28px;
	fill: none;
	stroke: var(--gcl-blush);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.gcl-done__badge {
	position: absolute;
	right: -7px; bottom: -7px;
	display: grid;
	place-items: center;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--gcl-ink);
	border: 2px solid var(--gcl-pink);
}
.gcl-done__badge svg {
	width: 14px; height: 14px;
	fill: none;
	stroke: var(--gcl-pink);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 20;
	stroke-dashoffset: 0;
}

.gcl-done__eyebrow {
	margin: 0 0 .2rem;
	color: var(--gcl-pink);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.gcl-done__title {
	margin: 0;
	color: var(--gcl-blush);
	font-family: var(--gcl-display);
	font-size: clamp(1.45rem, 2.4vw, 1.75rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
}
.gcl-done__title:focus { outline: none; }

.gcl-done__lead,
.gcl-done__tip span { text-wrap: pretty; }
.gcl-done__lead {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.6;
}
.gcl-done__email {
	color: var(--gcl-blush);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.gcl-done__steps {
	display: grid;
	gap: .45rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}
.gcl-done__steps li {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: .97rem;
	line-height: 1.35;
}
.gcl-done__steps strong { color: var(--gcl-blush); font-weight: 600; }
.gcl-done__sender { overflow-wrap: anywhere; }
.gcl-done__num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	border-radius: 8px;
	background: var(--gcl-ink);
	border: 1px solid var(--gcl-line);
	color: var(--gcl-pink);
	font-size: .82rem;
	font-weight: 700;
}

.gcl-done__tip {
	display: flex;
	gap: .6rem;
	margin: 0 0 1.1rem;
	padding: .7rem .9rem;
	border-radius: 14px;
	background: rgba(255, 245, 247, .04);
	border: 1px dashed rgba(255, 245, 247, .16);
	color: var(--gcl-muted);
	font-size: .88rem;
	line-height: 1.5;
}
.gcl-done__tip svg {
	flex: 0 0 auto;
	width: 18px; height: 18px;
	margin-top: .1rem;
	fill: none;
	stroke: var(--gcl-pink);
	stroke-width: 2;
	stroke-linecap: round;
}

.gcl-done__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
}
.gcl-done__reset {
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gcl-blush);
	font: 500 .92rem var(--gcl-body);
	text-decoration: underline;
	text-decoration-color: rgba(255, 245, 247, .35);
	text-underline-offset: 4px;
	cursor: pointer;
	transition: color .2s ease, text-decoration-color .2s ease;
}
.gcl-done__reset:hover { color: var(--gcl-pink); text-decoration-color: var(--gcl-pink); }

/* Phones: a bottom sheet. Full width, rounded top, a grip bar, and padding
 * that clears the home indicator. Taller content scrolls inside the sheet. */
@media (max-width: 599px) {
	.gcl-done {
		width: 100%;
		max-height: calc(100dvh - .75rem);
		margin: auto 0 0;
	}
	.gcl-done__panel {
		padding: 1.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
		border-bottom: 0;
		border-radius: 24px 24px 0 0;
	}
	.gcl-done__grip {
		display: block;
		position: absolute;
		top: .55rem; left: 50%;
		width: 40px; height: 4px;
		margin-left: -20px;
		border-radius: 4px;
		background: rgba(255, 245, 247, .22);
	}
	.gcl-done__close { top: 1rem; right: .9rem; }
	.gcl-done__actions { flex-direction: column; align-items: stretch; text-align: center; gap: .25rem; }
	.gcl-done__open { min-height: 52px; }
}
/* Landscape phones: centred again, as a short sheet would hide too much. */
@media (max-height: 500px) and (min-width: 600px) {
	.gcl-done { width: min(38rem, calc(100% - 2rem)); max-height: calc(100dvh - 1rem); }
	.gcl-done__head { margin-bottom: .6rem; }
	.gcl-done__icon { width: 48px; height: 48px; }
}

/* Entrance: the window rises in (the sheet slides up on phones), the
 * envelope lands, the check draws itself, then the steps follow. */
@media (prefers-reduced-motion: no-preference) {
	.gcl-done.is-in .gcl-done__panel { animation: gcl-done-window .45s var(--gcl-ease) both; }
	.gcl-done.is-in::backdrop { animation: gcl-done-fade .35s ease both; }
	.gcl-done.is-in .gcl-done__icon { animation: gcl-done-mail .7s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
	.gcl-done.is-in .gcl-done__badge { animation: gcl-done-pop .45s cubic-bezier(.34, 1.56, .64, 1) .6s both; }
	.gcl-done.is-in .gcl-done__badge svg { animation: gcl-done-tick .45s ease-out .85s both; }
	.gcl-done.is-in .gcl-done__steps li { animation: gcl-done-in .5s var(--gcl-ease) both; }
	.gcl-done.is-in .gcl-done__steps li:nth-child(1) { animation-delay: .3s; }
	.gcl-done.is-in .gcl-done__steps li:nth-child(2) { animation-delay: .4s; }
	.gcl-done.is-in .gcl-done__steps li:nth-child(3) { animation-delay: .5s; }
	.gcl-done.is-in .gcl-done__tip,
	.gcl-done.is-in .gcl-done__actions { animation: gcl-done-in .5s var(--gcl-ease) .6s both; }

	@media (max-width: 599px) {
		.gcl-done.is-in .gcl-done__panel { animation: gcl-done-sheet .5s cubic-bezier(.16, 1, .3, 1) both; }
	}

	@keyframes gcl-done-window {
		from { opacity: 0; transform: translateY(16px) scale(.97); }
		to { opacity: 1; transform: none; }
	}
	@keyframes gcl-done-sheet {
		from { transform: translateY(100%); }
		to { transform: none; }
	}
	@keyframes gcl-done-fade {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	@keyframes gcl-done-in {
		from { opacity: 0; transform: translateY(12px); }
		to { opacity: 1; transform: none; }
	}
	@keyframes gcl-done-mail {
		from { opacity: 0; transform: translate(-14px, 8px) rotate(-12deg) scale(.8); }
		to { opacity: 1; transform: none; }
	}
	@keyframes gcl-done-pop {
		from { opacity: 0; transform: scale(0); }
		to { opacity: 1; transform: scale(1); }
	}
	@keyframes gcl-done-tick {
		from { stroke-dashoffset: 20; }
		to { stroke-dashoffset: 0; }
	}
}

/* ---- Media: photo in front of the pink blob and its glow -------------- */
.gcl-hero__media {
	position: relative;
	width: min(100%, 24rem);
	aspect-ratio: 1 / 1;
	margin-inline: auto;
}
@media (min-width: 860px) {
	.gcl-hero__media { width: min(100%, 32rem); align-self: end; }
}
/* No photo on phones, or on short landscape screens below the two-column
 * layout, where it would stack under the form and cost two screens of
 * scrolling. Keep this in step with the <source media> in index.html. */
@media (max-width: 767px), (max-width: 859px) and (max-height: 600px) {
	.gcl-hero__media { display: none; }
}
/* Wherever the photo shows, it stands on the footer line. */
@media (min-width: 860px), (min-width: 768px) and (min-height: 601px) {
	.gcl-hero { padding-bottom: 0; }
}

.gcl-hero__glow {
	position: absolute;
	inset: -12% -18% -4%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(255, 46, 99, .42), rgba(255, 46, 99, .12) 55%, transparent 75%);
	filter: blur(10px);
}

.gcl-hero__blob {
	position: absolute;
	top: 0; left: -0.85%;
	width: 101.5%;
	height: 100%;                  /* flush with the footer line, so no strand tips show under it */
	z-index: 0;
}

.gcl-hero__photo {
	position: absolute;
	left: 50%; bottom: 0;
	width: min(120%, calc(100% + 2 * var(--gcl-gutter)));   /* bleeds a little, never past the page edge */
	transform: translateX(-50%);
	z-index: 1;
}
.gcl-hero__photo img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45));
}

/* Floating icon square, echoing the GCL app icon. */
.gcl-chip {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	border-radius: 28%;
	box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .7);
}
.gcl-chip svg { display: block; }
.gcl-chip--brand {
	width: clamp(58px, 6vw, 76px);
	aspect-ratio: 1;
	top: 6%;
	right: -2%;
	background: var(--gcl-pink);
	color: var(--gcl-blush);
	box-shadow: 0 0 0 1px rgba(255, 245, 247, .1), 0 18px 40px -12px rgba(255, 46, 99, .7);
}
.gcl-chip--brand svg { width: 66%; height: 66%; }

/* Fizz: bubbles rising out of the flask's mouth, so the lab reads as live.
 * Each <i> gets its own drift (--x), size (--s), wobble (--w), duration (--t)
 * and delay (--d). Hidden unless motion is allowed (see Motion below). */
.gcl-fizz {
	position: absolute;
	left: 50%;
	top: 27%;                      /* the flask's rim */
	width: 0; height: 0;
	pointer-events: none;
	display: none;
}
.gcl-fizz i {
	position: absolute;
	left: calc(var(--s) / -2);
	top: calc(var(--s) / -2);
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	border: 1.5px solid rgba(255, 245, 247, .9);
	background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .85) 0 18%, rgba(255, 245, 247, .12) 30%);
	box-shadow: 0 0 6px rgba(255, 92, 134, .55);
	opacity: 0;
}
.gcl-fizz i:nth-child(even) { background: var(--gcl-blush); border-color: transparent; }
/* Per-bubble settings live here, not in style="", because the CSP blocks inline styles. */
.gcl-fizz i:nth-child(1) { --x:-4px; --s:10px; --t:2.6s; --d:0s; --w:5px; }
.gcl-fizz i:nth-child(2) { --x:5px; --s:7px; --t:2.2s; --d:.5s; --w:-4px; }
.gcl-fizz i:nth-child(3) { --x:-1px; --s:13px; --t:3s; --d:1.1s; --w:6px; }
.gcl-fizz i:nth-child(4) { --x:7px; --s:6px; --t:1.9s; --d:1.5s; --w:-3px; }
.gcl-fizz i:nth-child(5) { --x:-7px; --s:7px; --t:2.4s; --d:1.9s; --w:4px; }
.gcl-fizz i:nth-child(6) { --x:2px; --s:8px; --t:2.8s; --d:2.4s; --w:-6px; }
.gcl-fizz i:nth-child(7) { --x:-3px; --s:4px; --t:1.8s; --d:.8s; --w:3px; }

/* ---- Footer --------------------------------------------------------- */
.gcl-footer {
	border-top: 1px solid var(--gcl-line);
	background: var(--gcl-ink);
	position: relative;
	z-index: 2;
}

.gcl-footer__inner {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 1rem 2.5rem;
	max-width: calc(var(--gcl-maxw) + 2 * var(--gcl-gutter));
	margin-inline: auto;
	padding: 1.4rem var(--gcl-gutter);
}

.gcl-footer__copy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin: 0;
	font-size: .88rem;
	color: var(--gcl-muted);
}

.gcl-footer__links { display: flex; gap: 1.75rem; }
.gcl-footer__links a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--gcl-blush);
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
	transition: color .2s ease;
}
.gcl-footer__links a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: .7rem;
	height: 1.5px;
	border-radius: 2px;
	background: var(--gcl-pink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--gcl-ease);
}
.gcl-footer__links a:hover { color: var(--gcl-pink); }
.gcl-footer__links a:hover::after { transform: scaleX(1); }

/* "Cookie settings" is a button that looks like its sibling links. It stays
   hidden until analytics.js runs, since it does nothing without JavaScript. */
.gcl-footer__links button {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gcl-blush);
	font: 500 .9rem var(--gcl-body);
	line-height: inherit;
	cursor: pointer;
	transition: color .2s ease;
}
.gcl-footer__links button[hidden] { display: none; }
.gcl-footer__links button::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: .7rem;
	height: 1.5px;
	border-radius: 2px;
	background: var(--gcl-pink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--gcl-ease);
}
.gcl-footer__links button:hover { color: var(--gcl-pink); }
.gcl-footer__links button:hover::after { transform: scaleX(1); }

/* Social links as small dark icon squares that light up pink. */
.gcl-social {
	display: flex;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gcl-social a {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: 12px;
	background: var(--gcl-surface);
	border: 1px solid var(--gcl-line);
	color: var(--gcl-blush);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .25s var(--gcl-ease), box-shadow .25s ease;
}
.gcl-social svg { width: 18px; height: 18px; fill: currentColor; }
.gcl-social a:hover {
	background: var(--gcl-pink);
	border-color: var(--gcl-pink);
	color: var(--gcl-ink);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -8px rgba(255, 46, 99, .6);
}

@media (max-width: 767px) {
	.gcl-footer__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: .5rem;
		padding-block: 1.5rem 1.75rem;
	}
	.gcl-social { order: -1; margin-bottom: .25rem; }
	.gcl-footer__copy { order: 1; justify-content: center; }
}
/* Too narrow for one line: stack the credit under the copyright, no hairline. */
@media (max-width: 399px) {
	.gcl-footer__links { flex-wrap: wrap; justify-content: center; gap: 0 1.25rem; }
	.gcl-footer__copy { flex-direction: column; gap: 0; }
	.gcl-footer__copy .gcl-by { padding-left: 0; border-left: 0; }
}

/* ---- Inner pages: shared ---------------------------------------------
   Contact and Privacy share the header, footer and type of the landing page,
   with a quieter strand field so long text never sits on top of it. */
.gcl-inner main { display: block; }
.gcl-inner main::before {
	height: clamp(120px, 18vh, 200px);
	background-size: 12px 100%;
	opacity: .32;
	-webkit-mask-image: none;
	        mask-image: none;
}

.gcl-page {
	width: 100%;
	max-width: calc(var(--gcl-maxw) + 2 * var(--gcl-gutter));
	margin-inline: auto;
	padding: clamp(2rem, 6vw, 4rem) var(--gcl-gutter) clamp(5rem, 12vw, 8rem);
}

.gcl-page__title {
	margin: 0 0 1.2rem;
	max-width: 16ch;
	color: var(--gcl-blush);
	font-family: var(--gcl-display);
	font-size: clamp(2.3rem, 5.4vw, 4rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.035em;
	text-wrap: balance;
}
.gcl-page__lede {
	max-width: 38rem;
	margin: 0;
	font-size: clamp(1.05rem, 1.4vw, 1.15rem);
	line-height: 1.7;
}

.gcl-page a:not(.gcl-btn) {
	color: var(--gcl-blush);
	text-decoration: underline;
	text-decoration-color: rgba(255, 46, 99, .7);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: color .2s ease, text-decoration-color .2s ease;
}
.gcl-page a:not(.gcl-btn):hover { color: var(--gcl-pink); text-decoration-color: var(--gcl-pink); }

.gcl-footer__links a[aria-current="page"] { color: var(--gcl-pink); }
.gcl-footer__links a[aria-current="page"]::after { transform: scaleX(1); }

/* ---- Contact page ----------------------------------------------------- */
.gcl-page--contact {
	display: grid;
	gap: clamp(2.5rem, 6vw, 4rem);
	align-items: start;
}
@media (min-width: 960px) {
	.gcl-page--contact { grid-template-columns: 5fr 6fr; }
	.gcl-contact__intro { position: sticky; top: 2rem; }
}

.gcl-contact__facts {
	display: grid;
	gap: 1.1rem;
	margin: 2.25rem 0 0;
	padding: 0;
	list-style: none;
}
.gcl-contact__facts li {
	display: grid;
	gap: .2rem;
	padding-left: 1rem;
	border-left: 2px solid rgba(255, 46, 99, .55);
	font-size: .98rem;
	line-height: 1.55;
}
.gcl-contact__label {
	color: var(--gcl-muted);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.gcl-contact__card {
	position: relative;
	padding: clamp(1.25rem, 4vw, 2.25rem);
	background:
		radial-gradient(110% 80% at 100% 0%, rgba(255, 46, 99, .14), transparent 55%),
		var(--gcl-surface);
	border: 1px solid rgba(255, 46, 99, .3);
	border-radius: 24px;
	box-shadow: 0 40px 80px -40px rgba(255, 46, 99, .45), 0 30px 60px -30px rgba(0, 0, 0, .8);
}

.gcl-contact { display: grid; gap: 1.35rem; }

.gcl-field { display: grid; gap: .45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.gcl-field__label {
	padding: 0;
	color: var(--gcl-blush);
	font-size: .92rem;
	font-weight: 600;
}
.gcl-field__input {
	width: 100%;
	min-height: 52px;
	padding: .8rem 1.1rem;
	background: var(--gcl-ink);
	border: 1.5px solid rgba(255, 245, 247, .22);
	border-radius: 14px;
	color: var(--gcl-blush);
	font: 400 1rem/1.5 var(--gcl-body);
	caret-color: var(--gcl-pink);
	transition: border-color .2s ease, box-shadow .3s ease;
}
.gcl-field__input--area { min-height: 9.5rem; resize: vertical; }
.gcl-field__input:hover { border-color: rgba(255, 245, 247, .36); }
.gcl-field__input:focus {
	outline: none;
	border-color: var(--gcl-pink);
	box-shadow: 0 0 0 4px rgba(255, 46, 99, .16);
}
.gcl-field__input[aria-invalid="true"] { border-color: var(--gcl-pink-soft); }
.gcl-field__err {
	margin: 0;
	color: var(--gcl-pink-soft);
	font-size: .86rem;
	line-height: 1.4;
}
.gcl-field__err:empty { display: none; }
.gcl-field__foot { display: flex; justify-content: space-between; gap: 1rem; }
.gcl-field__count {
	margin: 0 0 0 auto;
	color: var(--gcl-muted);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
}
.gcl-field__count.is-near { color: var(--gcl-pink-soft); }

/* Topics: radio buttons dressed as selectable chips. */
.gcl-topics__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .6rem;
}
@media (max-width: 479px) {
	.gcl-topics__grid { grid-template-columns: 1fr; }
}
.gcl-topic { position: relative; display: flex; cursor: pointer; }
.gcl-topic input {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
}
.gcl-topic span {
	display: flex;
	align-items: center;
	gap: .6rem;
	width: 100%;
	min-height: 48px;
	padding: .65rem .9rem;
	background: var(--gcl-ink);
	border: 1.5px solid rgba(255, 245, 247, .18);
	border-radius: 12px;
	color: var(--gcl-text);
	font-size: .92rem;
	line-height: 1.3;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.gcl-topic span::before {
	content: "";
	flex: 0 0 auto;
	width: 14px; height: 14px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 245, 247, .45);
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.gcl-topic:hover span { border-color: rgba(255, 245, 247, .36); }
.gcl-topic input:checked + span {
	border-color: var(--gcl-pink);
	background: rgba(255, 46, 99, .1);
	color: var(--gcl-blush);
}
.gcl-topic input:checked + span::before {
	border-color: var(--gcl-pink);
	background: var(--gcl-pink);
	box-shadow: inset 0 0 0 3px var(--gcl-ink);
}
.gcl-topic input:focus-visible + span { outline: 2px solid var(--gcl-pink); outline-offset: 3px; }

.gcl-contact__note { margin: 0; color: var(--gcl-muted); font-size: .86rem; line-height: 1.5; }
.gcl-contact__btn { justify-self: start; min-height: 54px; padding-inline: 1.7rem 1.5rem; }
@media (max-width: 479px) {
	.gcl-contact__btn { justify-self: stretch; }
}
.gcl-contact__msg { margin: 0; color: var(--gcl-pink-soft); font-size: .9rem; line-height: 1.45; }
.gcl-contact__msg:empty { display: none; }

/* Sent: the form gives way to a confirmation in the same card. */
.gcl-sent { display: grid; justify-items: start; gap: .9rem; padding-block: 1rem; }
.gcl-sent:focus { outline: none; }
.gcl-sent p { margin: 0; max-width: 32rem; }
.gcl-sent strong { color: var(--gcl-blush); }
.gcl-sent__badge {
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	border-radius: 28%;
	background: var(--gcl-pink);
	box-shadow: 0 18px 40px -12px rgba(255, 46, 99, .7);
}
.gcl-sent__badge svg {
	width: 28px; height: 28px;
	fill: none;
	stroke: var(--gcl-ink);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.gcl-sent__title {
	margin: .25rem 0 0;
	color: var(--gcl-blush);
	font-family: var(--gcl-display);
	font-size: clamp(1.6rem, 3vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}
.gcl-sent__again {
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gcl-blush);
	font: 500 .95rem var(--gcl-body);
	text-decoration: underline;
	text-decoration-color: rgba(255, 46, 99, .7);
	text-underline-offset: 3px;
	cursor: pointer;
}
.gcl-sent__again:hover { color: var(--gcl-pink); }

/* ---- Privacy page ----------------------------------------------------- */
.gcl-legal__head { max-width: 46rem; }
.gcl-legal__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: 1.5rem 0 0;
	color: var(--gcl-muted);
	font-size: .88rem;
}

/* At a glance: four cards, the "never" card in pink. */
.gcl-glance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
	margin: clamp(2.5rem, 6vw, 3.5rem) 0;
}
.gcl-glance__card {
	padding: 1.3rem 1.35rem;
	background: var(--gcl-surface);
	border: 1px solid var(--gcl-line);
	border-radius: 18px;
}
.gcl-glance__card h3 {
	margin: 0 0 .5rem;
	color: var(--gcl-blush);
	font-family: var(--gcl-display);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.gcl-glance__card p { margin: 0; font-size: .95rem; line-height: 1.6; }
.gcl-glance__card--never {
	background: var(--gcl-pink);
	border-color: var(--gcl-pink);
	box-shadow: 0 24px 50px -24px rgba(255, 46, 99, .8);
}
.gcl-glance__card--never h3,
.gcl-glance__card--never p { color: var(--gcl-ink); }

.gcl-legal__body { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) {
	.gcl-legal__body { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; align-items: start; }
	.gcl-toc { position: sticky; top: 2rem; max-height: calc(100vh - 4rem); overflow-y: auto; }
}

.gcl-toc {
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--gcl-line);
	border-radius: 18px;
	background: rgba(18, 18, 21, .7);
}
.gcl-toc__title {
	margin: 0 0 .6rem;
	color: var(--gcl-muted);
	font: 600 .78rem/1 var(--gcl-body);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.gcl-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
	columns: 2 12rem;
	column-gap: 1.5rem;
}
@media (min-width: 1000px) { .gcl-toc ol { columns: 1; } }
.gcl-toc li { counter-increment: toc; break-inside: avoid; }
.gcl-page .gcl-toc a {
	display: flex;
	gap: .6rem;
	padding: .38rem 0;
	color: var(--gcl-text);
	font-size: .92rem;
	line-height: 1.35;
	text-decoration: none;
}
.gcl-toc a::before {
	content: counter(toc, decimal-leading-zero);
	color: var(--gcl-pink);
	font-variant-numeric: tabular-nums;
	font-size: .8rem;
	padding-top: .1rem;
}
.gcl-page .gcl-toc a:hover { color: var(--gcl-blush); }

.gcl-prose { max-width: 46rem; min-width: 0; }
.gcl-prose section { scroll-margin-top: 1.5rem; }
.gcl-prose section + section {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--gcl-line);
}
.gcl-prose h2 {
	display: flex;
	align-items: baseline;
	gap: .8rem;
	margin: 0 0 1rem;
	color: var(--gcl-blush);
	font-family: var(--gcl-display);
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
}
.gcl-prose__num {
	color: var(--gcl-pink);
	font-size: .7em;
	font-variant-numeric: tabular-nums;
}
.gcl-prose h3 {
	margin: 1.8rem 0 .6rem;
	color: var(--gcl-blush);
	font-size: 1.05rem;
	font-weight: 600;
	scroll-margin-top: 1.5rem;
}
.gcl-prose p, .gcl-prose ul { margin: 0 0 1rem; }
.gcl-prose ul { padding-left: 1.2rem; }
.gcl-prose li { margin-bottom: .5rem; }
.gcl-prose li::marker { color: var(--gcl-pink); }
.gcl-prose strong { color: var(--gcl-blush); font-weight: 600; }
.gcl-prose code {
	padding: .1rem .35rem;
	border-radius: 6px;
	background: var(--gcl-surface);
	color: var(--gcl-blush);
	font-size: .88em;
}

/* "In plain words": a one-line summary set apart from the binding text. A
   glowing card with a pink label notched into its top edge, like a sticker
   on a lab sample. */
.gcl-prose .gcl-plain {
	position: relative;
	margin: 1.6rem 0 1.25rem;
	padding: 1.35rem 1.25rem 1.05rem;
	border: 1px solid rgba(255, 46, 99, .22);
	border-radius: 16px;
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(255, 46, 99, .16), rgba(255, 46, 99, 0) 60%),
		var(--gcl-surface);
	color: var(--gcl-blush);
	font: 500 1.02rem/1.5 var(--gcl-display);
	letter-spacing: -.005em;
}
.gcl-plain__tag {
	position: absolute;
	top: 0;
	left: 1.1rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .28rem .7rem .28rem .55rem;
	border-radius: 999px;
	background: var(--gcl-pink);
	color: var(--gcl-ink);
	font: 700 .66rem/1 var(--gcl-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	box-shadow: 0 0 0 4px var(--gcl-ink), 0 6px 18px -6px rgba(255, 46, 99, .7);
}
.gcl-plain__tag::before {
	content: "";
	width: .4rem; height: .4rem;
	border-radius: 50%;
	background: var(--gcl-ink);
}

.gcl-table {
	margin: 0 0 1.25rem;
	overflow-x: auto;
	border: 1px solid var(--gcl-line);
	border-radius: 14px;
	-webkit-overflow-scrolling: touch;
}
.gcl-table:focus-visible { outline-offset: 2px; }
.gcl-table table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: .92rem;
	line-height: 1.5;
}
.gcl-table th, .gcl-table td {
	padding: .8rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--gcl-line);
}
.gcl-table th {
	background: var(--gcl-surface);
	color: var(--gcl-blush);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.gcl-table tbody tr:last-child td { border-bottom: 0; }
.gcl-table td:first-child { color: var(--gcl-blush); }

/* Phones: each row becomes a small card, each cell labelled by its column. */
@media (max-width: 599px) {
	.gcl-table { border: 0; border-radius: 0; overflow: visible; }
	.gcl-table table { min-width: 0; }
	.gcl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.gcl-table tbody { display: grid; gap: .75rem; }
	.gcl-table tr {
		display: grid;
		gap: .6rem;
		padding: 1rem 1.1rem;
		border: 1px solid var(--gcl-line);
		border-radius: 14px;
		background: var(--gcl-surface);
	}
	.gcl-table td { display: grid; gap: .15rem; padding: 0; border: 0; }
	.gcl-table td::before {
		content: attr(data-label);
		color: var(--gcl-muted);
		font-size: .72rem;
		font-weight: 600;
		letter-spacing: .08em;
		text-transform: uppercase;
	}
	.gcl-table td:first-child { font-weight: 600; }
}

/* ---- Back to top (privacy policy) ------------------------------------ */
.gcl-totop {
	position: fixed;
	z-index: 40;
	right: 1.25rem;
	bottom: calc(1.25rem + env(safe-area-inset-bottom));
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 46, 99, .45);
	border-radius: 14px;
	background: var(--gcl-surface);
	color: var(--gcl-blush);
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .3s var(--gcl-ease), visibility 0s linear .3s, background-color .2s ease, color .2s ease;
}
.gcl-totop.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.gcl-totop:hover { background: var(--gcl-pink); color: var(--gcl-ink); }
.gcl-totop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Motion -----------------------------------------------------------
   Pure CSS entrances that start on first paint, so nothing waits for
   JavaScript and the headline is readable straight away (good for bounce
   rate and for Largest Contentful Paint). Headings only rise; the rest fades
   in quickly behind them. Reduced motion: everything is simply there. */
@media (prefers-reduced-motion: no-preference) {
	.gcl-anim { animation: gcl-enter .45s var(--gcl-ease) var(--d, 0ms) both; }
	.gcl-hero__title.gcl-anim,
	.gcl-page__title.gcl-anim { animation-name: gcl-enter-rise; }
	.gcl-anim--2 { --d: 60ms; }
	.gcl-anim--3 { --d: 120ms; }
	.gcl-anim--4 { --d: 180ms; }
	@keyframes gcl-enter {
		from { opacity: 0; transform: translateY(10px); }
	}
	@keyframes gcl-enter-rise {
		from { transform: translateY(8px); }
	}

	.gcl-hero__blob { transform-origin: 50% 60%; animation: gcl-blob-in .8s cubic-bezier(.34, 1.4, .64, 1) .05s both; }
	@keyframes gcl-blob-in {
		from { opacity: 0; transform: scale(.9) rotate(-4deg); }
	}

	.gcl-hero__glow { animation: gcl-fade .9s ease both, gcl-pulse 6s ease-in-out 1s infinite; }
	@keyframes gcl-fade {
		from { opacity: 0; }
	}
	@keyframes gcl-pulse {
		50% { opacity: .65; transform: scale(.96); }
	}

	.gcl-hero__photo { animation: gcl-photo-in .6s var(--gcl-ease) .1s both; }
	@keyframes gcl-photo-in {
		from { opacity: 0; transform: translate(-50%, 16px); }
		to { opacity: 1; transform: translate(-50%, 0); }
	}

	.gcl-chip { animation: gcl-chip-in .5s cubic-bezier(.34, 1.56, .64, 1) .35s both; }
	.gcl-chip--brand { animation: gcl-chip-in .5s cubic-bezier(.34, 1.56, .64, 1) .35s both, gcl-float 5s ease-in-out 1s infinite; }
	@keyframes gcl-chip-in {
		from { opacity: 0; scale: .6; }
	}
	@keyframes gcl-float {
		50% { transform: translateY(-10px) rotate(-3deg); }
	}
	.gcl-fizz { display: block; }
	.gcl-fizz i { animation: gcl-fizz var(--t) cubic-bezier(.3, .1, .6, 1) calc(.9s + var(--d)) infinite; }
	@keyframes gcl-fizz {
		0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
		12%  { opacity: 1; transform: translate(calc(var(--x) * .3), -14px) scale(.8); }
		40%  { transform: translate(calc(var(--x) + var(--w)), -38px) scale(1); }
		70%  { opacity: .9; transform: translate(calc(var(--x) - var(--w)), -62px) scale(1.05); }
		88%  { opacity: .6; transform: translate(var(--x), -76px) scale(1.25); }
		100% { opacity: 0; transform: translate(var(--x), -82px) scale(1.7); }
	}
	.gcl-sent.is-in { animation: gcl-done-in .5s var(--gcl-ease) both; }
	/* The strands grow up from the bottom edge as the page loads. */
	main::before { transform-origin: bottom; animation: gcl-strands 1.2s cubic-bezier(.16, 1, .3, 1) .1s both; }
	@keyframes gcl-strands {
		from { transform: scaleY(0); }
	}
}

/* ---- Cookie consent ------------------------------------------------- */
/* A small card pinned bottom left, built by analytics.js. Accept and Decline
   share one style so neither is nudged. */
.gcl-consent {
	position: fixed;
	z-index: 50;
	left: 1.25rem;
	bottom: 1.25rem;
	width: min(24rem, calc(100% - 2.5rem));
	padding: 1.25rem 1.25rem 1.1rem;
	border: 1px solid var(--gcl-line);
	border-radius: 18px;
	background: var(--gcl-surface);
	color: var(--gcl-text);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 46, 99, .08);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .3s ease, transform .4s var(--gcl-ease);
}
.gcl-consent.is-in { opacity: 1; transform: none; }
.gcl-consent[hidden] { display: none; }
.gcl-consent::before {
	content: "";
	position: absolute;
	top: -1px; left: 1.25rem;
	width: 2.5rem; height: 2px;
	border-radius: 2px;
	background: var(--gcl-pink);
}
.gcl-consent__title {
	margin: 0 0 .4rem;
	font: 700 1.05rem/1.25 var(--gcl-display);
	letter-spacing: -.01em;
	color: var(--gcl-blush);
}
.gcl-consent__text {
	margin: 0 0 1rem;
	font: 400 .9rem/1.5 var(--gcl-body);
}
.gcl-consent__text a {
	color: var(--gcl-blush);
	text-decoration-color: var(--gcl-pink);
	text-underline-offset: 3px;
}
.gcl-consent__text a:hover { color: var(--gcl-pink); }
.gcl-consent__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6rem;
}
.gcl-consent__btn {
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid rgba(255, 245, 247, .28);
	border-radius: 999px;
	background: transparent;
	color: var(--gcl-blush);
	font: 600 .95rem/1 var(--gcl-body);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gcl-consent__btn:hover {
	border-color: var(--gcl-pink);
	background: var(--gcl-pink);
	color: var(--gcl-ink);
}
.gcl-consent__btn[aria-pressed="true"] { border-color: var(--gcl-pink); color: var(--gcl-pink); }
.gcl-consent__btn[aria-pressed="true"]:hover { color: var(--gcl-ink); }

/* Short screens (phones on their side): one compact strip, text beside the
   buttons, so the banner never covers more than a third of the view. */
@media (max-height: 500px) {
	.gcl-consent {
		left: .75rem;
		right: .75rem;
		bottom: calc(.5rem + env(safe-area-inset-bottom));
		width: auto;
		max-width: 46rem;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: .25rem 1rem;
		padding: .7rem .9rem;
	}
	.gcl-consent__title { margin: 0; font-size: .95rem; grid-column: 1; }
	.gcl-consent__text { margin: 0; font-size: .82rem; line-height: 1.4; grid-column: 1; }
	.gcl-consent__actions { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: auto auto; }
	.gcl-consent__btn { padding: 0 1.1rem; }
}

@media (max-width: 599px) {
	.gcl-consent {
		left: .75rem;
		bottom: calc(.75rem + env(safe-area-inset-bottom));
		width: calc(100% - 1.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- 404: a failed experiment ---------------------------------------- */
/* Copy on the left, a confused flask between two 4s on the right. On phones
   the flask comes first so the joke lands before the scroll. */
.gcl-lost {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 900px) {
	.gcl-lost { grid-template-columns: 6fr 5fr; }
}

.gcl-lost__tag {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1.1rem;
	padding: .4rem .8rem .4rem .6rem;
	border: 1px dashed rgba(255, 46, 99, .55);
	border-radius: 8px;
	color: var(--gcl-pink);
	font: 600 .74rem/1 var(--gcl-body);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.gcl-lost__tag::before {
	content: "";
	width: .5rem; height: .5rem;
	border-radius: 50%;
	background: var(--gcl-pink);
	box-shadow: 0 0 10px rgba(255, 46, 99, .9);
	animation: gcl-blink 1.4s steps(2, jump-none) infinite;
}

.gcl-lost__copy .gcl-page__lede { margin-bottom: 1.6rem; }

/* Lab notes: a clipboard card with a pink clip. */
.gcl-lost__notes {
	position: relative;
	margin: 0 0 1.75rem;
	padding: 1.4rem 1.25rem 1rem;
	border: 1px solid var(--gcl-line);
	border-radius: 16px;
	background:
		repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 245, 247, .05) 31px 32px),
		var(--gcl-surface);
	max-width: 32rem;
}
.gcl-lost__notes::before {
	content: "";
	position: absolute;
	top: -7px; left: 50%;
	width: 4.5rem; height: 12px;
	margin-left: -2.25rem;
	border-radius: 0 0 8px 8px;
	background: var(--gcl-pink);
	box-shadow: 0 4px 14px -4px rgba(255, 46, 99, .8);
}
.gcl-lost__notes-title {
	margin: 0 0 .6rem;
	color: var(--gcl-muted);
	font: 600 .72rem/1 var(--gcl-body);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.gcl-lost__notes dl { margin: 0; }
.gcl-lost__notes dl > div {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: .75rem;
	padding: .45rem 0;
}
.gcl-lost__notes dt {
	color: var(--gcl-pink);
	font: 600 .9rem/1.5 var(--gcl-body);
}
.gcl-lost__notes dd {
	margin: 0;
	color: var(--gcl-blush);
	font: 400 .95rem/1.5 var(--gcl-body);
}

.gcl-lost__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
	margin-bottom: 1.1rem;
}
.gcl-page a.gcl-lost__ghost {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.3rem;
	border: 1px solid rgba(255, 245, 247, .28);
	border-radius: 999px;
	color: var(--gcl-blush);
	font: 600 1rem/1 var(--gcl-body);
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}
.gcl-page a.gcl-lost__ghost:hover { border-color: var(--gcl-pink); color: var(--gcl-pink); }
.gcl-lost__report { margin: 0; color: var(--gcl-muted); font-size: .92rem; }

/* The figure: 4, flask, 4. */
.gcl-lost__lab {
	position: relative;
	margin: 0;
	display: grid;
	justify-items: center;
}
.gcl-lost__code {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	gap: .02em;
	font: 800 clamp(7rem, 26vw, 14rem)/.8 var(--gcl-display);
	letter-spacing: -.06em;
	color: var(--gcl-blush);
}
.gcl-lost__digit {
	text-shadow: 0 0 40px rgba(255, 46, 99, .35);
	animation: gcl-shiver 6s ease-in-out infinite;
}
.gcl-lost__digit:last-child { animation-delay: -3s; }

.gcl-lost__flask {
	position: relative;
	width: .9em;
	margin-inline: .02em;
	transform-origin: 50% 100%;
	animation: gcl-wobble 3.2s ease-in-out infinite;
}
.gcl-lost__flask svg { display: block; width: 100%; height: auto; overflow: visible; }
.gcl-lost__rim { fill: var(--gcl-blush); }
.gcl-lost__glass {
	fill: rgba(255, 245, 247, .04);
	stroke: var(--gcl-blush);
	stroke-width: 8;
	stroke-linejoin: round;
}
.gcl-lost__liquid {
	fill: var(--gcl-pink);
	animation: gcl-slosh 2.4s linear infinite;
}
.gcl-lost__bubble {
	fill: rgba(255, 245, 247, .75);
	transform-box: fill-box;
	transform-origin: center;
	animation: gcl-rise 2.6s ease-in infinite;
}
.gcl-lost__bubble:nth-of-type(2) { animation-duration: 2.1s; animation-delay: .6s; }
.gcl-lost__bubble:nth-of-type(3) { animation-duration: 3s; animation-delay: 1.2s; }
.gcl-lost__bubble:nth-of-type(4) { animation-duration: 1.8s; animation-delay: 1.7s; }

.gcl-lost__white { fill: var(--gcl-blush); }
.gcl-lost__eyes { fill: var(--gcl-ink); animation: gcl-look 4s ease-in-out infinite; }
.gcl-lost__brow { fill: none; stroke: var(--gcl-ink); stroke-width: 6; stroke-linecap: round; }
.gcl-lost__mouth { fill: var(--gcl-ink); }
.gcl-lost__sweat {
	fill: #9ED8FF;
	opacity: 0;
	animation: gcl-sweat 3.2s ease-in infinite;
}

/* Bubbles that escape through the neck and pop. */
.gcl-lost__escape {
	position: absolute;
	left: 50%;
	top: 0;
	width: 0; height: 0;
}
.gcl-lost__escape i {
	position: absolute;
	left: -.04em;
	width: .08em; height: .08em;
	border: 2px solid var(--gcl-pink-soft);
	border-radius: 50%;
	opacity: 0;
	animation: gcl-escape 2.8s ease-out infinite;
}
.gcl-lost__escape i:nth-child(2) { width: .05em; height: .05em; animation-delay: .9s; --gcl-drift: .14em; }
.gcl-lost__escape i:nth-child(3) { width: .06em; height: .06em; animation-delay: 1.8s; --gcl-drift: -.12em; }

.gcl-lost__puddle {
	width: min(22rem, 80%);
	height: 1.4rem;
	margin-top: -.5rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 46, 99, .55), rgba(255, 46, 99, 0));
	filter: blur(2px);
	animation: gcl-puddle 3.2s ease-in-out infinite;
}
.gcl-lost__caption {
	margin-top: .9rem;
	color: var(--gcl-muted);
	font: italic 400 .85rem/1.4 var(--gcl-body);
}

@media (max-width: 899px) {
	.gcl-lost__lab { order: -1; }
}
@media (max-width: 479px) {
	.gcl-lost__notes dl > div { grid-template-columns: 1fr; gap: .1rem; }
}

@keyframes gcl-wobble {
	0%, 100% { transform: rotate(-6deg); }
	50% { transform: rotate(6deg); }
}
@keyframes gcl-shiver {
	0%, 90%, 100% { transform: none; }
	92% { transform: translateX(-3px) rotate(-2deg); }
	94% { transform: translateX(3px) rotate(2deg); }
	96% { transform: translateX(-2px); }
}
@keyframes gcl-slosh {
	from { transform: translateX(0); }
	to { transform: translateX(100px); }
}
@keyframes gcl-rise {
	0% { transform: translateY(0) scale(.6); opacity: 0; }
	15% { opacity: 1; }
	100% { transform: translateY(-70px) scale(1.1); opacity: 0; }
}
@keyframes gcl-look {
	0%, 20%, 100% { transform: translateX(0); }
	30%, 45% { transform: translateX(-6px); }
	55%, 70% { transform: translateX(6px); }
}
@keyframes gcl-sweat {
	0%, 40% { opacity: 0; transform: translateY(0); }
	55% { opacity: 1; }
	100% { opacity: 0; transform: translateY(22px); }
}
@keyframes gcl-escape {
	0% { transform: translate(0, 0) scale(.4); opacity: 0; }
	20% { opacity: 1; }
	80% { transform: translate(var(--gcl-drift, 0), -.55em) scale(1); opacity: 1; }
	100% { transform: translate(var(--gcl-drift, 0), -.62em) scale(1.6); opacity: 0; }
}
@keyframes gcl-puddle {
	0%, 100% { transform: scaleX(.92); }
	50% { transform: scaleX(1.05); }
}
@keyframes gcl-blink {
	50% { opacity: .25; }
}

/* ---- Exit-intent popup ------------------------------------------------ */
/* Built by exit.js on the same shell as the signup confirmation. Two columns:
   a beaker boiling over on the left, the pitch and the form on the right.
   On phones it is a bottom sheet with the beaker as a short banner on top. */
.gcl-exit { width: min(50rem, calc(100% - 2rem)); }
.gcl-exit .gcl-exit__panel {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	padding: 0;
}

.gcl-exit__art {
	position: relative;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: .75rem;
	padding: 2rem 1rem 1.25rem;
	border-right: 1px solid rgba(255, 46, 99, .2);
	border-radius: 23px 0 0 23px;
	background:
		radial-gradient(60% 40% at 50% 78%, rgba(255, 140, 70, .32), transparent 70%),
		radial-gradient(80% 60% at 50% 40%, rgba(255, 46, 99, .22), transparent 70%),
		var(--gcl-ink);
	overflow: hidden;
	animation: gcl-exit-heat 2.4s ease-in-out infinite;
}
.gcl-exit .gcl-done__close { z-index: 2; }
.gcl-exit__lab { width: min(100%, 18rem); height: auto; overflow: visible; }
.gcl-exit__caption {
	margin: 0;
	color: var(--gcl-muted);
	font: italic 400 .85rem/1.4 var(--gcl-body);
	text-align: center;
}

.gcl-exit__shadow { fill: rgba(0, 0, 0, .55); }
.gcl-exit__metal { fill: #3A3A42; }
.gcl-exit__legs { fill: none; stroke: #3A3A42; stroke-width: 6; stroke-linecap: round; }
.gcl-exit__glass {
	fill: rgba(255, 245, 247, .05);
	stroke: var(--gcl-blush);
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.gcl-exit__ticks { fill: none; stroke: rgba(255, 245, 247, .55); stroke-width: 3; stroke-linecap: round; }
.gcl-exit__liquid { fill: var(--gcl-pink); animation: gcl-exit-boil 1s linear infinite; }
.gcl-exit__liquid--back { fill: var(--gcl-pink-soft); opacity: .6; animation-duration: 1.6s; animation-direction: reverse; }

.gcl-exit__bubble,
.gcl-exit__pop,
.gcl-exit__burst,
.gcl-exit__mercury,
.gcl-exit__flame,
.gcl-exit__steam path {
	transform-box: fill-box;
}
.gcl-exit__bubble {
	fill: rgba(255, 245, 247, .8);
	transform-origin: center;
	animation: gcl-exit-rise 1.2s ease-in infinite;
}
.gcl-exit__bubble:nth-of-type(2) { animation-duration: .9s; animation-delay: .3s; }
.gcl-exit__bubble:nth-of-type(3) { animation-duration: 1.4s; animation-delay: .6s; }
.gcl-exit__bubble:nth-of-type(4) { animation-duration: .8s; animation-delay: .15s; }
.gcl-exit__bubble:nth-of-type(5) { animation-duration: 1.1s; animation-delay: .8s; }

/* Foam jumping out over the rim. */
.gcl-exit__pop {
	fill: none;
	stroke: var(--gcl-pink-soft);
	stroke-width: 3;
	transform-origin: center;
	opacity: 0;
	animation: gcl-exit-pop 1.5s ease-out infinite;
}
.gcl-exit__pop:nth-of-type(2) { animation-delay: .5s; --gcl-hop: 8px; }
.gcl-exit__pop:nth-of-type(3) { animation-delay: 1s; --gcl-hop: -10px; }

.gcl-exit__beaker { animation: gcl-exit-rattle .18s steps(2, jump-none) infinite; }

/* A thermometer that has seen enough. */
.gcl-exit__thermo { transform: rotate(16deg); transform-origin: 147px 150px; }
.gcl-exit__thermo-body { fill: var(--gcl-blush); }
.gcl-exit__mercury {
	fill: #FF5757;
	transform-origin: bottom;
	animation: gcl-exit-mercury 2.8s cubic-bezier(.5, 0, .9, .6) infinite;
}
.gcl-exit__burst {
	fill: #FFC15E;
	transform-origin: center;
	opacity: 0;
	animation: gcl-exit-burst 2.8s ease-out infinite;
}

.gcl-exit__flame { transform-origin: bottom; animation: gcl-exit-flicker .35s ease-in-out infinite alternate; }
.gcl-exit__flame--left { animation-duration: .28s; animation-delay: -.1s; }
.gcl-exit__flame--right { animation-duration: .31s; animation-delay: -.2s; }
.gcl-exit__flame-out { fill: #FF5757; }
.gcl-exit__flame-mid { fill: #FF8A4C; }
.gcl-exit__flame-in { fill: #FFC15E; }

.gcl-exit__steam path {
	fill: none;
	stroke: rgba(255, 245, 247, .45);
	stroke-width: 5;
	stroke-linecap: round;
	opacity: 0;
	animation: gcl-exit-steam 2.4s ease-out infinite;
}
.gcl-exit__steam path:nth-child(2) { animation-delay: .8s; }
.gcl-exit__steam path:nth-child(3) { animation-delay: 1.6s; }

.gcl-exit__body { padding: 2.4rem 1.75rem 1.5rem; }
.gcl-exit__title { margin: 0 2.5rem .75rem 0; }
.gcl-exit__lead { margin-bottom: 1.25rem; }

.gcl-exit__form { display: grid; gap: .6rem; }
.gcl-exit__input {
	min-height: 52px;
	padding: 0 1.25rem;
	border: 1.5px solid rgba(255, 245, 247, .28);
	border-radius: 999px;
	background: var(--gcl-ink);
	color: var(--gcl-blush);
	font: 400 1rem var(--gcl-body);
	caret-color: var(--gcl-pink);
	transition: border-color .2s ease, box-shadow .3s ease;
}
.gcl-exit__input::placeholder { color: var(--gcl-muted); }
/* Small screens: the full placeholder still fits (the typed text stays
   16px so iPhones do not zoom in). */
@media (max-width: 599px), (max-height: 500px) {
	.gcl-exit__input { padding-inline: 1rem; }
	.gcl-exit__input::placeholder { font-size: .86rem; }
}
.gcl-exit__input:focus {
	outline: none;
	border-color: var(--gcl-pink);
	box-shadow: 0 0 0 4px rgba(255, 46, 99, .16);
}
.gcl-exit__input[aria-invalid="true"] { border-color: var(--gcl-pink); }
.gcl-exit__btn { min-height: 52px; width: 100%; }

.gcl-exit__msg {
	margin: .6rem 0 0;
	font-size: .9rem;
	line-height: 1.4;
}
.gcl-exit__msg:empty { display: none; }
.gcl-exit__msg.is-error { color: var(--gcl-pink-soft); }

.gcl-exit__fine {
	margin: .75rem 0 0;
	color: var(--gcl-muted);
	font-size: .84rem;
	line-height: 1.45;
}

.gcl-exit__skip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: .25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gcl-muted);
	font: 500 .9rem var(--gcl-body);
	text-decoration: underline;
	text-decoration-color: rgba(255, 245, 247, .25);
	text-underline-offset: 4px;
	cursor: pointer;
	transition: color .2s ease;
}
.gcl-exit__skip:hover { color: var(--gcl-blush); }

.gcl-exit__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.25rem;
}
.gcl-exit__actions .gcl-exit__skip { margin: 0; }

@media (max-width: 599px) {
	.gcl-exit { width: 100%; }
	.gcl-exit .gcl-exit__panel { grid-template-columns: 1fr; padding: 0; }
	.gcl-exit__art {
		grid-template-columns: auto 1fr;
		align-items: center;
		justify-items: start;
		gap: 1rem;
		padding: 1.1rem 4rem .5rem 1.25rem;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 46, 99, .2);
		border-radius: 24px 24px 0 0;
	}
	.gcl-exit__lab { width: 6rem; }
	.gcl-exit__caption { text-align: left; }
	.gcl-exit__body { padding: 1.1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); }
	.gcl-exit__lead { margin-bottom: 1rem; }
	.gcl-exit__title { margin-right: 0; }
	.gcl-exit__actions { flex-direction: column; align-items: stretch; }
	.gcl-exit__actions .gcl-exit__skip { justify-content: center; }
	.gcl-exit__skip { width: 100%; justify-content: center; }
}
/* Landscape phones: no room for the art. */
@media (max-height: 500px) and (min-width: 600px) {
	.gcl-exit .gcl-exit__panel { grid-template-columns: 1fr; }
	.gcl-exit__art { display: none; }
}

@keyframes gcl-exit-heat {
	0%, 100% { background-size: 100% 100%, 100% 100%, auto; }
	50% { background-size: 112% 118%, 100% 100%, auto; }
}
@keyframes gcl-exit-boil {
	from { transform: translateX(0); }
	to { transform: translateX(30px); }
}
@keyframes gcl-exit-rise {
	0% { transform: translateY(0) scale(.5); opacity: 0; }
	15% { opacity: 1; }
	100% { transform: translateY(-82px) scale(1.15); opacity: 0; }
}
@keyframes gcl-exit-pop {
	0% { transform: translate(0, 6px) scale(.4); opacity: 0; }
	30% { opacity: 1; }
	100% { transform: translate(var(--gcl-hop, 0), -26px) scale(1.4); opacity: 0; }
}
@keyframes gcl-exit-rattle {
	from { transform: translate(-.6px, 0) rotate(-.4deg); }
	to { transform: translate(.6px, -.5px) rotate(.4deg); }
}
@keyframes gcl-exit-mercury {
	0% { transform: scaleY(.25); }
	80%, 100% { transform: scaleY(1); }
}
@keyframes gcl-exit-burst {
	0%, 76% { transform: scale(0); opacity: 0; }
	84% { transform: scale(1.2); opacity: 1; }
	100% { transform: scale(1.5) rotate(25deg); opacity: 0; }
}
@keyframes gcl-exit-flicker {
	from { transform: scale(.94, .86); }
	to { transform: scale(1.04, 1.1); }
}
@keyframes gcl-exit-steam {
	0% { transform: translateY(10px); opacity: 0; }
	30% { opacity: 1; }
	100% { transform: translateY(-22px); opacity: 0; }
}

/* Short screens: tighter popups so they fit without scrolling where they can.
   Phones held upright but small (iPhone SE size) first, then any screen
   under 500px tall, where the beaker steps aside for the pitch and form. */
@media (max-width: 599px) and (max-height: 700px) {
	.gcl-exit__art { padding: .8rem 4rem .4rem 1.25rem; }
	.gcl-exit__lab { width: 4.75rem; }
	.gcl-exit__caption { font-size: .8rem; }
	.gcl-exit__body { padding-top: .9rem; }
	.gcl-exit__title { font-size: 1.35rem; margin-bottom: .5rem; }
	.gcl-exit__lead { font-size: .92rem; line-height: 1.5; margin-bottom: .85rem; }
	.gcl-exit__input, .gcl-exit__btn { min-height: 48px; }
	.gcl-exit__fine { margin-top: .5rem; font-size: .8rem; }
	.gcl-exit__skip { margin-top: 0; }

	.gcl-done__panel { padding-top: 1.4rem; }
	.gcl-done__head { margin-bottom: .6rem; }
	.gcl-done__lead { margin-bottom: .75rem; font-size: .95rem; }
	.gcl-done__steps { gap: .35rem; margin-bottom: .6rem; }
	.gcl-done__tip { margin-bottom: .6rem; padding-block: .55rem; }
}
@media (max-height: 500px) {
	.gcl-exit { width: min(35rem, calc(100% - 2rem)); margin: auto; max-height: calc(100dvh - 1rem); }
	.gcl-exit .gcl-exit__panel { grid-template-columns: 1fr; border-radius: 20px; border-bottom: 1px solid rgba(255, 46, 99, .35); }
	.gcl-exit__art { display: none; }
	.gcl-exit .gcl-done__grip { display: none; }
	.gcl-exit__body { padding: 1rem 1.25rem .75rem; }
	.gcl-exit__title { font-size: 1.25rem; margin: 0 3rem .4rem 0; }
	.gcl-exit__lead { font-size: .88rem; line-height: 1.45; margin-bottom: .7rem; }
	.gcl-exit__form { grid-template-columns: 1fr auto; }
	.gcl-exit__input, .gcl-exit__btn { min-height: 46px; }
	.gcl-exit__btn { width: auto; padding-inline: 1rem; font-size: .92rem; gap: .4rem; }
	.gcl-exit__fine { margin-top: .4rem; font-size: .78rem; }
	.gcl-exit__skip { margin-top: 0; }
	.gcl-exit .gcl-done__close { top: .6rem; right: .6rem; }

	.gcl-done:not(.gcl-exit) { width: min(40rem, calc(100% - 2rem)); margin: auto; max-height: calc(100dvh - 1rem); }
	.gcl-done:not(.gcl-exit) .gcl-done__panel { padding: 1rem 1.25rem; border-radius: 20px; border-bottom: 1px solid rgba(255, 46, 99, .35); }
	.gcl-done:not(.gcl-exit) .gcl-done__grip { display: none; }
	.gcl-done__head { margin-bottom: .5rem; }
	.gcl-done__icon { width: 40px; height: 40px; }
	.gcl-done__title { font-size: 1.25rem; }
	.gcl-done__lead { margin-bottom: .6rem; font-size: .92rem; line-height: 1.5; }
	.gcl-done__steps { grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .6rem; }
	.gcl-done__steps li { font-size: .82rem; }
	.gcl-done__tip { margin-bottom: .6rem; padding: .5rem .75rem; }
}
/* Very short screens (small phones on their side): the spam-folder tip
   gives way so the steps and the button fit. */
@media (max-height: 360px) {
	.gcl-done:not(.gcl-exit) .gcl-done__tip { display: none; }
}