/**
 * VA Guide Landing Page — front-end styles.
 *
 * Every rule is scoped under `.vaglp`. There are no bare element selectors and
 * no global resets, so the plugin cannot bleed into the active theme.
 */

/* ------------------------------------------------------------------ Tokens */

.vaglp {
	/* Palette (overridden per site from the admin colour settings). */
	--vaglp-primary: #ff0e80;
	--vaglp-primary-rgb: 255, 14, 128;
	--vaglp-secondary: #082549;
	--vaglp-secondary-rgb: 8, 37, 73;
	--vaglp-blush: #fff1f5;
	--vaglp-white: #ffffff;
	--vaglp-gray: #f7f7f8;
	--vaglp-text: #172033;
	--vaglp-text-rgb: 23, 32, 51;
	--vaglp-muted: rgba(var(--vaglp-text-rgb), 0.66);
	--vaglp-line: rgba(var(--vaglp-secondary-rgb), 0.1);

	/* Type. A condensed Didone for display, a grotesque for reading, and a
	   mono for the small tracked labels. Instrument Serif ships one weight
	   only, so synthesised bold is switched off further down. */
	--vaglp-font-head: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--vaglp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--vaglp-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Shape. */
	--vaglp-radius-sm: 12px;
	--vaglp-radius: 18px;
	--vaglp-radius-lg: 24px;
	--vaglp-radius-xl: 32px;

	/* Depth. Layered ramps rather than one blur — light falls off gradually,
	   so cards read as lifted instead of outlined. */
	--vaglp-shadow-sm: 0 1px 2px rgba(var(--vaglp-secondary-rgb), 0.04), 0 3px 8px -2px rgba(var(--vaglp-secondary-rgb), 0.05);
	--vaglp-shadow: 0 1px 2px rgba(var(--vaglp-secondary-rgb), 0.04), 0 6px 14px -4px rgba(var(--vaglp-secondary-rgb), 0.07),
		0 18px 36px -12px rgba(var(--vaglp-secondary-rgb), 0.1);
	--vaglp-shadow-lg: 0 2px 4px rgba(var(--vaglp-secondary-rgb), 0.03), 0 10px 24px -8px rgba(var(--vaglp-secondary-rgb), 0.07),
		0 30px 60px -20px rgba(var(--vaglp-secondary-rgb), 0.12), 0 60px 110px -50px rgba(var(--vaglp-secondary-rgb), 0.2);
	--vaglp-shadow-pink: 0 1px 2px rgba(var(--vaglp-primary-rgb), 0.2), 0 8px 18px -6px rgba(var(--vaglp-primary-rgb), 0.34),
		0 20px 40px -16px rgba(var(--vaglp-primary-rgb), 0.36);

	/* Motion. One easing curve across the whole page keeps it coherent. */
	--vaglp-ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* Film grain. Breaks up the flat gradients so they read as a surface
	   rather than a CSS artefact — the single biggest "premium" cue here. */
	--vaglp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	/* Rhythm. */
	--vaglp-shell: 1180px;
	--vaglp-gutter: clamp(20px, 5vw, 40px);
	--vaglp-section-y: clamp(64px, 8vw, 116px);

	box-sizing: border-box;
	position: relative;
	isolation: isolate;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	margin: 0;
	padding: 0;
	color: var(--vaglp-text);
	font-family: var(--vaglp-font-body);
	font-size: 17px;
	line-height: 1.65;
	font-weight: 400;
	letter-spacing: -0.005em;
	text-align: left;
	background: var(--vaglp-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-synthesis-weight: none;
}

/* Full-bleed break-out. Themes hand the shortcode a constrained content
   column, which boxes an edge-to-edge composition; these three lines widen the
   root back to the viewport and re-centre it, whatever that column's width or
   offset happens to be.

   `--vaglp-vw` is the viewport width *excluding* the classic scrollbar, set
   from JS. The 100vw fallback is what ships without JS and is correct on any
   overlay-scrollbar platform; where a scrollbar does take layout space it
   would otherwise overshoot by exactly that width and arm a horizontal
   scrollbar of its own. `overflow-x: clip` below then keeps the tilted panel's
   shadow from re-introducing one. */
.vaglp--full {
	width: var(--vaglp-vw, 100vw);
	max-width: var(--vaglp-vw, 100vw);
	margin-inline: calc(50% - var(--vaglp-vw, 100vw) / 2);
}

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

/* :where() keeps this reset at zero specificity, so component rules further
   down win on source order. Without it `.vaglp p { padding: 0 }` silently beat
   every padded <p> in the page — the tag block, the subheading box and the
   privacy line all collapsed. */
.vaglp :where(p, h1, h2, h3, ul, li, figure) {
	margin: 0;
	padding: 0;
}

.vaglp ul {
	list-style: none;
}

.vaglp img,
.vaglp svg {
	display: block;
	max-width: 100%;
	height: auto;
}

.vaglp a {
	color: inherit;
	text-decoration: none;
}

/* Several elements below set an explicit `display`, which would otherwise beat
   the user-agent rule for [hidden]. The error slots, the alert, the success
   panel and the download button all rely on the attribute, so it has to win. */
.vaglp [hidden] {
	display: none !important;
}

.vaglp :focus-visible {
	outline: 3px solid rgba(var(--vaglp-primary-rgb), 0.5);
	outline-offset: 3px;
	border-radius: 6px;
}

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

.vaglp-shell {
	width: 100%;
	max-width: var(--vaglp-shell);
	margin-inline: auto;
	padding-inline: var(--vaglp-gutter);
}

.vaglp-section {
	position: relative;
	padding-block: var(--vaglp-section-y);
}

.vaglp-icon {
	flex: none;
}

/* ----------------------------------------------------------------- Buttons */

.vaglp .vaglp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 58px;
	padding: 17px 34px;
	border: 0;
	border-radius: 999px;
	font-family: var(--vaglp-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background-color 0.25s ease;
	will-change: transform;
}

.vaglp .vaglp-btn--primary {
	position: relative;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(135deg, var(--vaglp-primary) 0%, color-mix(in srgb, var(--vaglp-primary) 72%, #ff5fa8) 100%);
	/* Inset top highlight + bottom shade gives the pill a physical edge. */
	box-shadow: var(--vaglp-shadow-pink), inset 0 1px 0 rgba(255, 255, 255, 0.34),
		inset 0 -1px 0 rgba(var(--vaglp-secondary-rgb), 0.12);
}

.vaglp .vaglp-btn--primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.7s ease;
}

.vaglp .vaglp-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(var(--vaglp-primary-rgb), 0.22), 0 12px 24px -8px rgba(var(--vaglp-primary-rgb), 0.4),
		0 28px 52px -18px rgba(var(--vaglp-primary-rgb), 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.vaglp .vaglp-btn--primary:hover::after {
	transform: translateX(120%);
}

.vaglp .vaglp-btn--primary:active {
	transform: translateY(0);
}

.vaglp .vaglp-btn--block {
	width: 100%;
}

.vaglp .vaglp-btn__arrow {
	transition: transform 0.25s ease;
}

.vaglp .vaglp-btn:hover .vaglp-btn__arrow {
	transform: translateX(4px);
}

/* ------------------------------------------------------------- Decorations */

.vaglp-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.55;
	pointer-events: none;
}

.vaglp-blob--a {
	top: -160px;
	right: -120px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle at 30% 30%, rgba(var(--vaglp-primary-rgb), 0.34), transparent 68%);
}

.vaglp-blob--b {
	bottom: -220px;
	left: -180px;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle at 60% 40%, rgba(var(--vaglp-secondary-rgb), 0.16), transparent 70%);
}

.vaglp-blob--c {
	top: 32%;
	left: 44%;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(var(--vaglp-primary-rgb), 0.14), transparent 70%);
	opacity: 0.7;
}

.vaglp-blob--d {
	top: -140px;
	right: -100px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle at 40% 40%, rgba(var(--vaglp-primary-rgb), 0.22), transparent 68%);
}

.vaglp-grid-lines {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(var(--vaglp-secondary-rgb), 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--vaglp-secondary-rgb), 0.035) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 78%);
	pointer-events: none;
}

/* -------------------------------------------------------------------- Hero */

/* A four-point mesh rather than a single linear ramp: warm blush pooling top
   right, a cool navy cast bottom left, and a clean base. Reads as light in a
   room instead of a gradient. */
.vaglp-hero {
	position: relative;
	padding-block: clamp(48px, 6.5vw, 96px) clamp(64px, 8vw, 120px);
	background-color: var(--vaglp-blush);
	background-image:
		radial-gradient(60% 55% at 78% 8%, rgba(var(--vaglp-primary-rgb), 0.16) 0%, transparent 62%),
		radial-gradient(55% 50% at 12% 88%, rgba(var(--vaglp-secondary-rgb), 0.1) 0%, transparent 60%),
		radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, 0.92) 0%, transparent 58%),
		linear-gradient(178deg, #fff 0%, var(--vaglp-blush) 58%, color-mix(in srgb, var(--vaglp-blush) 72%, #fff) 100%);
	overflow: hidden;
}

/* Grain sits above the gradients but below the content. */
.vaglp-hero::after,
.vaglp-lead::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--vaglp-grain);
	opacity: 0.055;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.vaglp-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.vaglp-hero .vaglp-shell {
	position: relative;
	z-index: 1;
}

.vaglp-brandbar {
	margin-bottom: clamp(28px, 4vw, 52px);
}

.vaglp-brandbar__logo {
	width: auto;
	max-height: 44px;
}

.vaglp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.vaglp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 22px;
	padding: 8px 16px 8px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(var(--vaglp-primary-rgb), 0.18);
	box-shadow: var(--vaglp-shadow-sm);
	color: var(--vaglp-primary);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
}

.vaglp-eyebrow__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vaglp-primary);
	box-shadow: 0 0 0 4px rgba(var(--vaglp-primary-rgb), 0.16);
}

.vaglp-hero__title {
	max-width: 15ch;
	margin-bottom: 22px;
	color: var(--vaglp-secondary);
	font-family: var(--vaglp-font-head);
	font-size: clamp(2.45rem, 5.4vw, 4.35rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.022em;
}

.vaglp-accent {
	position: relative;
	display: inline;
	color: var(--vaglp-primary);
	font-style: italic;
}

.vaglp-hero__lead {
	max-width: 46ch;
	margin-bottom: 18px;
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	font-weight: 500;
	line-height: 1.55;
	color: rgba(var(--vaglp-text-rgb), 0.9);
}

.vaglp-hero__text {
	max-width: 50ch;
	margin-bottom: 32px;
	font-size: 1rem;
	line-height: 1.72;
	color: var(--vaglp-muted);
}

.vaglp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 26px;
	margin-bottom: 30px;
}

.vaglp-hero__note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--vaglp-muted);
	font-size: 13.5px;
	font-weight: 500;
}

.vaglp-hero__note .vaglp-icon {
	color: var(--vaglp-primary);
	opacity: 0.85;
}

.vaglp-ticks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	padding-top: 24px;
	border-top: 1px solid var(--vaglp-line);
}

.vaglp-ticks__item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14.5px;
	font-weight: 500;
	color: rgba(var(--vaglp-text-rgb), 0.78);
}

.vaglp-ticks__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: rgba(var(--vaglp-primary-rgb), 0.12);
	color: var(--vaglp-primary);
}

/* ------------------------------------------------------------ Book mockup */

.vaglp-hero__visual {
	display: flex;
	justify-content: center;
}

.vaglp-mockup {
	position: relative;
	display: inline-block;
	padding: 26px;
}

.vaglp-mockup__halo {
	position: absolute;
	inset: 6% 4%;
	z-index: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, rgba(var(--vaglp-primary-rgb), 0.2), transparent 66%);
	filter: blur(38px);
}

.vaglp-book {
	position: relative;
	z-index: 1;
	width: clamp(258px, 25vw, 344px);
	aspect-ratio: 3 / 4;
	border-radius: 8px 20px 20px 8px;
	background: linear-gradient(155deg, color-mix(in srgb, var(--vaglp-secondary) 92%, #123a6b) 0%, var(--vaglp-secondary) 55%, color-mix(in srgb, var(--vaglp-secondary) 82%, #000) 100%);
	box-shadow: var(--vaglp-shadow-lg);
	transform: rotate(-3.2deg);
	transform-origin: center;
	overflow: hidden;
	animation: vaglp-float 7s ease-in-out infinite;
}

.vaglp-book__spine {
	position: absolute;
	inset-block: 0;
	left: 0;
	z-index: 3;
	width: 16px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(255, 255, 255, 0.1) 62%, rgba(0, 0, 0, 0.12) 100%);
}

.vaglp-book__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vaglp-book__face {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(28px, 3.2vw, 40px) clamp(24px, 3vw, 34px) clamp(26px, 3vw, 34px) clamp(32px, 3.6vw, 44px);
	color: #fff;
}

.vaglp-book__face::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -34%;
	width: 76%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--vaglp-primary-rgb), 0.5), transparent 66%);
}

.vaglp-book__eyebrow {
	position: relative;
	margin-bottom: auto;
	color: rgba(255, 255, 255, 0.66);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
}

.vaglp-book__title {
	position: relative;
	font-family: var(--vaglp-font-head);
	font-size: clamp(1.55rem, 2.4vw, 2.1rem);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.015em;
}

.vaglp-book__rule {
	position: relative;
	display: block;
	width: 58px;
	height: 3px;
	margin-block: 18px 16px;
	border-radius: 3px;
	background: var(--vaglp-primary);
}

.vaglp-book__meta {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
}

.vaglp-book__count {
	flex: none;
	font-family: var(--vaglp-font-head);
	font-size: 2.35rem;
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, 0.2);
}

.vaglp-book__count em {
	font-style: normal;
	color: rgba(var(--vaglp-primary-rgb), 0.85);
}

.vaglp-book__footer {
	color: rgba(255, 255, 255, 0.72);
	font-size: 12.5px;
	line-height: 1.5;
}

.vaglp-book__glare {
	position: absolute;
	inset: 0;
	background: linear-gradient(108deg, rgba(255, 255, 255, 0.13) 0%, transparent 34%, transparent 68%, rgba(255, 255, 255, 0.07) 100%);
	pointer-events: none;
}

/* Badges + floating card. */

.vaglp-badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 17px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.11em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: var(--vaglp-shadow);
}

.vaglp-badge--free {
	top: 6px;
	right: -6px;
	color: #fff;
	background: var(--vaglp-primary);
	box-shadow: var(--vaglp-shadow-pink);
	animation: vaglp-float 6s ease-in-out infinite 0.6s;
}

.vaglp-badge--tasks {
	bottom: 92px;
	left: -30px;
	color: var(--vaglp-secondary);
	background: #fff;
	border: 1px solid rgba(var(--vaglp-secondary-rgb), 0.06);
	animation: vaglp-float 8s ease-in-out infinite 0.3s;
}

.vaglp-badge--tasks .vaglp-icon {
	color: var(--vaglp-primary);
}

.vaglp-floatcard {
	position: absolute;
	right: -22px;
	bottom: 18px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 220px;
	padding: 13px 18px 13px 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(var(--vaglp-secondary-rgb), 0.06);
	box-shadow: var(--vaglp-shadow);
	backdrop-filter: blur(8px);
	animation: vaglp-float 9s ease-in-out infinite 1.1s;
}

.vaglp-floatcard__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg, var(--vaglp-primary), color-mix(in srgb, var(--vaglp-primary) 70%, #ff77b4));
}

.vaglp-floatcard__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vaglp-floatcard__body strong {
	color: var(--vaglp-secondary);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
}

.vaglp-floatcard__body em {
	color: var(--vaglp-muted);
	font-size: 12px;
	font-style: normal;
	line-height: 1.3;
}

/* ------------------------------------------------------- Showcase layout */

/* Measured off a 1920 × 1080 frame. Square corners throughout — a radius
   anywhere in here would soften the editorial edge. The composition gets its
   energy from scale, contrast and three small counter-tilts; the premium read
   comes from layered shadow, not from borders or ornament.

   Each tilt is declared as `--vaglp-tilt` rather than a bare `transform`,
   because these elements also carry `.vaglp-reveal` — whose own transform
   lands later in the cascade and would otherwise flatten them. */

.vaglp-hero--showcase {
	display: flex;
	align-items: center;
	min-height: var(--vaglp-showcase-height, 100vh);
	min-height: var(--vaglp-showcase-height, 100svh);
	padding-block: clamp(48px, 6vw, 96px);
	/* The colour stays underneath the artwork as the fallback, so a missing,
	   removed or unsupported image degrades to the flat blush this hero used
	   to be rather than to bare white. */
	background-color: var(--vaglp-blush);
	background-image: var(--vaglp-hero-bg, url("../images/bg.png"));
	/* Repeated with image-set(): browsers without it discard this declaration
	   whole and keep the PNG above, while the rest get the WebP — 14 KB
	   against the PNG's 955 for the same artwork. `--vaglp-hero-bg` is set
	   from PHP only when an admin picks their own background, and carries its
	   own legibility veil when it does. */
	background-image: var(
		--vaglp-hero-bg,
		image-set(url("../images/bg.webp") type("image/webp"), url("../images/bg.png") type("image/png"))
	);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* The two radial washes that used to live here existed only to stop a flat
   colour reading as dead. The artwork does that job now, and the brighter of
   them sat right over its top-left blob and bleached it out. */
.vaglp-hero--showcase::before {
	content: none;
}

/* Grain, dialled well below the rest of the page: enough to give the blush a
   surface, not enough to be read as texture. */
.vaglp-hero--showcase::after {
	opacity: 0.032;
}

/* Measured off the reference: the tag's left edge and the photo panel's right
   edge each sit ~4.6% in from the viewport. Capped so the gutter stops growing
   on ultrawide displays, where a raw vw would strand the composition. */
.vaglp-hero--showcase .vaglp-shell--wide {
	max-width: none;
	padding-inline: clamp(20px, 4.6vw, 120px);
}

.vaglp-showcase {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
	gap: clamp(40px, 6.5vw, 130px);
	align-items: center;
}

/* Left column ------------------------------------------------------------ */

/* Sizes the headline off the column, so line one always sits on one line. */
.vaglp-showcase__copy {
	container-type: inline-size;
}

.vaglp-tag {
	--vaglp-tilt: -0.6deg;
	--vaglp-delay: 0ms;

	display: inline-block;
	margin-bottom: clamp(22px, 1.8vw, 34px);
	padding: 13px 23px 12px;
	background: var(--vaglp-secondary);
	color: #fff;
	font-family: var(--vaglp-font-mono) !important;
	font-size: clamp(9px, 0.575vw, 11.5px);
	font-weight: 500;
	letter-spacing: 0.2em;
	/* Leading and balance are here for the narrow widths where this line does
	   wrap: at 1:1 the two rows collide, and unbalanced it drops a single
	   orphaned word onto row two. The single-line height is unchanged. */
	line-height: 1.4;
	text-transform: uppercase;
	text-wrap: balance;
	transform: rotate(var(--vaglp-tilt));
	/*! transform-origin: left center; */
	box-shadow: 0 10px 24px -16px rgba(var(--vaglp-secondary-rgb), 0.75);
}

.vaglp-showcase__title {
	--vaglp-delay: 90ms;

	/* The serif's left side bearing sits the "1" a hair inside the tag above
	   it; pulling back optically aligns the two left edges. */
	margin-left: -0.02em;
	color: var(--vaglp-secondary);
	font-family: var(--vaglp-font-head) !important;
	font-size: clamp(2.6rem, 5.4vw, 6.6rem);
	font-size: clamp(2.6rem, 12.2cqw, 6.6rem);
	font-weight: 400;
	line-height: 0.92;
	letter-spacing: -0.012em;
	font-kerning: normal;
	font-variant-ligatures: common-ligatures;
}

/* The signature: roman first line, then the pink italic on its own line,
   fractionally larger because the italic's flourishes read smaller. */
.vaglp-hero--showcase .vaglp-accent {
	display: block;
	margin-top: -0.02em;
	color: var(--vaglp-primary);
	font-size: 1.04em;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.005em;
	transform: rotate(-0.6deg);
	font-family: unset;
}

.vaglp-showcase__actions {
	--vaglp-delay: 190ms;

	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: clamp(12px, 1.2vw, 23px);
	margin-top: clamp(30px, 2.5vw, 48px);
}

.vaglp-showcase__lead {
	display: flex;
	align-items: center;
	padding: 17px 25px;
	background: var(--vaglp-white);
	color: var(--vaglp-secondary);
	font-size: clamp(0.95rem, 1vw, 1.2rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
	box-shadow: 0 1px 2px rgba(var(--vaglp-secondary-rgb), 0.05),
		0 14px 28px -18px rgba(var(--vaglp-secondary-rgb), 0.4);
}

/* Square, flat CTA — a pill would fight the rest of the composition. Side by
   side the row stretches it to the white block's height; the min-height is
   what stops it collapsing to bare text height on the widths where the row
   wraps and each element sizes itself. */
.vaglp .vaglp-btn--flat {
	min-height: clamp(50px, 3.4vw, 58px);
	padding: 0 clamp(24px, 1.85vw, 36px);
	border-radius: 0;
	background: var(--vaglp-primary);
	color: #fff;
	font-family: var(--vaglp-font-mono);
	font-size: clamp(10px, 0.625vw, 12.5px);
	font-weight: 500;
	letter-spacing: 0.18em;
	box-shadow: 0 12px 26px -16px rgba(var(--vaglp-primary-rgb), 0.85);
	transition: background-color 0.25s var(--vaglp-ease), transform 0.25s var(--vaglp-ease),
		box-shadow 0.25s var(--vaglp-ease);
}

.vaglp .vaglp-btn--flat:hover {
	transform: translateY(-2px);
	background: color-mix(in srgb, var(--vaglp-primary) 88%, #000);
	box-shadow: 0 18px 34px -16px rgba(var(--vaglp-primary-rgb), 0.9);
}

.vaglp .vaglp-btn--flat:active {
	transform: translateY(0);
	box-shadow: 0 8px 18px -14px rgba(var(--vaglp-primary-rgb), 0.9);
}

.vaglp-showcase__privacy {
	--vaglp-delay: 270ms;

	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: clamp(24px, 1.9vw, 36px);
	color: rgba(var(--vaglp-secondary-rgb), 0.66);
	font-family: var(--vaglp-font-mono);
	font-size: clamp(9px, 0.575vw, 11px);
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
}

.vaglp-showcase__dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vaglp-primary);
	box-shadow: 0 0 0 4px rgba(var(--vaglp-primary-rgb), 0.12);
}

/* Right column ----------------------------------------------------------- */

.vaglp-showcase__visual {
	position: relative;
}

/* The photo is the panel. It fills this frame edge to edge and inherits the
   tilt, the square corners and the shadow, so nothing of the navy shows
   around it — the navy and its hatch are only ever seen as the placeholder
   for when no photo is set. */
.vaglp-showcase__photo {
	--vaglp-tilt: 2.3deg;
	--vaglp-delay: 120ms;

	position: relative;
	width: 87%;
	margin-left: 13%;
	aspect-ratio: 1.3;
	overflow: hidden;
	/* Off-axis navy rather than a flat fill: light falls across the panel,
	   which is what keeps a block this large from going dead. */
	background-color: unset;
	background-image: unset;
	transform: rotate(var(--vaglp-tilt));
	/* Contact shadow, mid falloff, then a wide ambient pool. */
	box-shadow: 0 2px 6px rgba(var(--vaglp-secondary-rgb), 0.1),
		0 18px 38px -20px rgba(var(--vaglp-secondary-rgb), 0.34),
		0 48px 92px -52px rgba(var(--vaglp-secondary-rgb), 0.55);
}

/* Hairline inside edge. A bright photo against the pale blush would otherwise
   dissolve into the background at its corners; the dark ring gives it a
   definite edge. The navy placeholder needs the opposite, so it flips below. */
.vaglp-showcase__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	box-shadow: inset 0 0 0 1px rgba(var(--vaglp-secondary-rgb), 0.12);
	pointer-events: none;
}

.vaglp-showcase__photo--empty::after {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.vaglp-showcase__photo picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* The frame is landscape and the bundled photo is square, so `cover` has to
   drop roughly a quarter of its height. Biasing the crop above centre keeps
   the shelf and her face, and takes the loss out of the empty cabinets along
   the bottom — which the form card overlaps anyway. */
.vaglp-showcase__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

/* Placeholder state: hatched navy panel labelled with what belongs here. The
   fine 45° rule is the only texture — the panel gradient underneath already
   supplies the falloff, and a second sheen band over it showed as a seam. */
.vaglp-showcase__photo--empty {
	background-image: repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.05) 0 1px,
			transparent 1px 10px
		),
		linear-gradient(
			148deg,
			color-mix(in srgb, var(--vaglp-secondary) 86%, #dfe8f5) 0%,
			var(--vaglp-secondary) 46%,
			color-mix(in srgb, var(--vaglp-secondary) 88%, #000) 100%
		);
}

.vaglp-showcase__photolabel {
	position: absolute;
	z-index: 3;
	top: clamp(16px, 1.3vw, 24px);
	left: clamp(16px, 1.3vw, 24px);
	color: rgba(255, 255, 255, 0.45);
	font-family: var(--vaglp-font-mono);
	font-size: clamp(9px, 0.575vw, 11px);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* The card breaks out of the photo's bottom-left corner and leans the other
   way — the overlap and the counter-tilt tie the two halves together. */
.vaglp-showcase__form {
	--vaglp-tilt: -1.4deg;
	--vaglp-delay: 300ms;

	position: relative;
	z-index: 2;
	width: 72.8%;
	margin-top: -14.5%;
	transform: rotate(var(--vaglp-tilt));
	scroll-margin-top: 40px;
}

.vaglp-hero--showcase .vaglp-formcard {
	padding: clamp(24px, 1.7vw, 33px) clamp(22px, 1.6vw, 31px) clamp(26px, 1.8vw, 34px);
	border-radius: 0;
	background: var(--vaglp-white);
	/* Sits nearer the eye than the panel behind it, so its shadow runs both
	   tighter at the contact edge and wider in the ambient pool. */
	box-shadow: 0 1px 2px rgba(var(--vaglp-secondary-rgb), 0.05),
		0 8px 18px -10px rgba(var(--vaglp-secondary-rgb), 0.18),
		0 26px 48px -22px rgba(var(--vaglp-secondary-rgb), 0.28),
		0 56px 96px -48px rgba(var(--vaglp-secondary-rgb), 0.42),
		inset 0 0 0 1px rgba(var(--vaglp-secondary-rgb), 0.045);
}

.vaglp-hero--showcase .vaglp-formcard::before {
	content: none;
}

.vaglp-hero--showcase .vaglp-formcard__title {
	margin-bottom: clamp(16px, 1.25vw, 24px);
	color: var(--vaglp-secondary);
	font-family: var(--vaglp-font-head) !important;
	font-size: clamp(1.3rem, 1.5vw, 1.85rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.vaglp-hero--showcase .vaglp-form {
	margin-top: 0;
}

/* The rounded default is inherited from the other two layouts and reads as a
   stray in a card that is square everywhere else. */
.vaglp-hero--showcase .vaglp-form__alert {
	border-radius: 0;
}

/* Plain placeholder fields: pale blush fill, hairline pink rule, square. */
.vaglp-field--plain {
	margin-bottom: 14px;
}

.vaglp .vaglp-field--plain .vaglp-field__input {
	height: clamp(48px, 2.6vw, 50px);
	padding: 0 20px;
	/*! border: 1px solid rgba(var(--vaglp-primary-rgb), 0.2); */
	border-radius: 0;
	font-size: 16px;
	font-weight: 400;
	transition: border-color 0.2s var(--vaglp-ease), background-color 0.2s var(--vaglp-ease),
		box-shadow 0.2s var(--vaglp-ease);
}

.vaglp .vaglp-field--plain .vaglp-field__input::placeholder {
	color: rgba(var(--vaglp-text-rgb), 0.42);
	opacity: 1;
}

.vaglp .vaglp-field--plain .vaglp-field__input:hover:not(:focus) {
	border-color: rgba(var(--vaglp-primary-rgb), 0.36);
}

.vaglp .vaglp-field--plain .vaglp-field__input:focus {
	border-color: var(--vaglp-primary);
	background: var(--vaglp-white);
	box-shadow: 0 0 0 3px rgba(var(--vaglp-primary-rgb), 0.12);
}

.vaglp-field--plain.is-invalid .vaglp-field__input {
}

/* Navy submit, square, sized to the CTA on the left. */
.vaglp-hero--showcase .vaglp-submit {
	min-height: 0;
	height: clamp(50px, 2.75vw, 53px);
	margin-top: 12px;
	padding: 0 28px;
	border-radius: 0;
	background: #FF0E80;
	color: #fff;
	font-family: var(--vaglp-font-mono);
	font-size: clamp(10px, 0.625vw, 12.5px);
	font-weight: 500;
	letter-spacing: 0.18em;
	box-shadow: 0 12px 26px -18px rgba(var(--vaglp-secondary-rgb), 0.9);
	transition: background-color 0.25s var(--vaglp-ease), transform 0.25s var(--vaglp-ease),
		box-shadow 0.25s var(--vaglp-ease);
}

.vaglp-hero--showcase .vaglp-submit:hover {
	transform: translateY(-2px);
	background: color-mix(in srgb, var(--vaglp-secondary) 86%, #000);
	box-shadow: 0 18px 32px -18px rgba(var(--vaglp-secondary-rgb), 0.9);
}

.vaglp-hero--showcase .vaglp-submit:active {
	transform: translateY(0);
	box-shadow: 0 8px 18px -16px rgba(var(--vaglp-secondary-rgb), 0.9);
}

.vaglp-hero--showcase .vaglp-submit::after {
	content: none;
}

.vaglp-hero--showcase .vaglp-success {
	text-align: left;
}

.vaglp-hero--showcase .vaglp-success__mark {
	border-radius: 0;
	background: --vaglp-primary;
	box-shadow: none;
}

.vaglp-hero--showcase .vaglp-success__text {
	margin-inline: 0;
}

.vaglp-hero--showcase .vaglp-success .vaglp-btn {
	border-radius: 0;
	background: var(--vaglp-secondary);
	font-family: var(--vaglp-font-mono);
	font-weight: 500;
	letter-spacing: 0.18em;
	box-shadow: none;
}

/* --------------------------------------------------------- Centred layout */

.vaglp-hero--centered {
	padding-block: clamp(56px, 8vw, 112px) clamp(64px, 9vw, 128px);
}

.vaglp-hero--centered .vaglp-brandbar {
	text-align: center;
}

.vaglp-hero--centered .vaglp-brandbar__logo {
	margin-inline: auto;
}

/* One elevated card carrying the offer, floating over the background wash.
   Replaces the reference's hard-edged white rectangle. */
.vaglp-herocard {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin-inline: auto;
	padding: clamp(40px, 6vw, 86px) clamp(26px, 5.5vw, 92px);
	border-radius: clamp(24px, 3vw, 40px);
	background:
		radial-gradient(120% 80% at 50% -12%, rgba(var(--vaglp-primary-rgb), 0.07) 0%, transparent 62%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.86) 100%);
	box-shadow: var(--vaglp-shadow-lg);
	text-align: center;
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
}

/* Gradient hairline: bright at the top where light would catch the edge,
   fading to nothing at the base. A flat 1px border looks printed on. */
.vaglp-herocard::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	/* Plain ring by default; upgraded to the gradient hairline below only
	   where mask compositing is actually supported. */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
	pointer-events: none;
}

.vaglp-herocard__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: clamp(20px, 2.4vw, 28px);
	padding: 9px 18px;
	border-radius: 999px;
	background: rgba(var(--vaglp-primary-rgb), 0.07);
	box-shadow: inset 0 0 0 1px rgba(var(--vaglp-primary-rgb), 0.16);
	color: var(--vaglp-primary);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.45;
	text-transform: uppercase;
}

.vaglp-herocard__eyebrow::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vaglp-primary);
	box-shadow: 0 0 0 0 rgba(var(--vaglp-primary-rgb), 0.5);
	animation: vaglp-pulse 2.6s ease-out infinite;
}

.vaglp-herocard__title {
	margin-inline: auto;
	max-width: 17ch;
	color: var(--vaglp-secondary);
	font-family: var(--vaglp-font-head);
	font-size: clamp(2.5rem, 6vw, 4.6rem);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.032em;
	text-wrap: balance;
}

/* A single short accent rule, in place of the two heavy horizontal lines. */
.vaglp-herocard__rule {
	display: block;
	width: 64px;
	height: 3px;
	margin: clamp(26px, 3vw, 36px) auto clamp(20px, 2.4vw, 26px);
	border-radius: 3px;
	background: linear-gradient(90deg, var(--vaglp-primary), color-mix(in srgb, var(--vaglp-primary) 55%, #ffa8cf));
}

.vaglp-herocard__lead {
	margin-inline: auto;
	max-width: 40ch;
	color: rgba(var(--vaglp-secondary-rgb), 0.92);
	font-size: clamp(1.08rem, 1.7vw, 1.32rem);
	font-weight: 500;
	line-height: 1.5;
}

.vaglp-herocard__text {
	margin: 18px auto 0;
	max-width: 52ch;
	color: var(--vaglp-muted);
	font-size: 1rem;
	line-height: 1.72;
}

.vaglp-herocard__actions {
	margin-top: clamp(30px, 3.6vw, 42px);
}

.vaglp-herocard__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
	color: var(--vaglp-muted);
	font-size: 13.5px;
	font-weight: 500;
}

.vaglp-herocard__note .vaglp-icon {
	color: var(--vaglp-primary);
	opacity: 0.85;
}

.vaglp-herocard .vaglp-ticks {
	justify-content: center;
	margin-top: clamp(28px, 3vw, 36px);
}

/* Centred lead section: the form sits alone, centred, under its heading. */

.vaglp-lead--centered .vaglp-lead__grid {
	display: block;
}

.vaglp-lead--centered .vaglp-formwrap {
	max-width: 660px;
	margin-inline: auto;
}

.vaglp-lead__title {
	margin-bottom: clamp(24px, 3vw, 34px);
	color: var(--vaglp-secondary);
	font-family: var(--vaglp-font-head);
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.018em;
	text-align: center;
}

/* First name and email share a row, mobile takes the full width — the
   reference's field arrangement, tidied up. */
.vaglp-lead--centered .vaglp-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 16px;
}

.vaglp-lead--centered .vaglp-form > * {
	grid-column: 1 / -1;
}

.vaglp-lead--centered .vaglp-field[data-vaglp-field="first_name"] {
	grid-column: 1 / 2;
}

.vaglp-lead--centered .vaglp-field[data-vaglp-field="email"] {
	grid-column: 2 / 3;
}

/* ------------------------------------------------------- Section headings */

.vaglp-section__head {
	max-width: 640px;
	margin: 0 auto clamp(38px, 4.5vw, 62px);
	text-align: center;
}

.vaglp-section__title {
	color: var(--vaglp-secondary);
	font-family: var(--vaglp-font-head);
	font-size: clamp(1.95rem, 3.6vw, 2.95rem);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.018em;
}

.vaglp-section__sub {
	margin-top: 16px;
	color: var(--vaglp-muted);
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	line-height: 1.65;
}

.vaglp-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(var(--vaglp-primary-rgb), 0.09);
	color: var(--vaglp-primary);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ Cards */

.vaglp-benefits {
	background: var(--vaglp-white);
}

.vaglp-cards {
	display: grid;
	gap: clamp(18px, 2vw, 26px);
}

.vaglp-cards--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vaglp-cards--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vaglp-card {
	position: relative;
	padding: clamp(26px, 2.6vw, 34px);
	border-radius: var(--vaglp-radius-lg);
	background: var(--vaglp-white);
	border: 1px solid var(--vaglp-line);
	box-shadow: var(--vaglp-shadow-sm);
	overflow: hidden;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.vaglp-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--vaglp-primary), color-mix(in srgb, var(--vaglp-primary) 55%, #ffa8cf));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}

/* Scoped through `.vaglp` to outrank `.vaglp-reveal.is-visible`, which ties on
   specificity and wins on source order — the lift never fired without it. */
.vaglp .vaglp-card:hover {
	transform: translateY(-5px);
	border-color: rgba(var(--vaglp-primary-rgb), 0.2);
	box-shadow: var(--vaglp-shadow);
}

.vaglp-card:hover::before {
	transform: scaleX(1);
}

.vaglp-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 20px;
	border-radius: 16px;
	color: var(--vaglp-primary);
	background: linear-gradient(140deg, rgba(var(--vaglp-primary-rgb), 0.12), rgba(var(--vaglp-primary-rgb), 0.04));
	transition: transform 0.3s ease;
}

.vaglp-card:hover .vaglp-card__icon {
	transform: scale(1.06) rotate(-3deg);
}

.vaglp-card__title {
	margin-bottom: 10px;
	color: var(--vaglp-secondary);
	font-family: var(--vaglp-font-body);
	font-size: 1.16rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.012em;
}

.vaglp-card__text {
	color: var(--vaglp-muted);
	font-size: 0.955rem;
	line-height: 1.66;
}

/* ------------------------------------------------------------------ Tiles */

.vaglp-inside {
	background: linear-gradient(180deg, var(--vaglp-gray) 0%, var(--vaglp-white) 100%);
}

.vaglp-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 20px);
}

.vaglp-tile {
	padding: clamp(22px, 2.2vw, 28px);
	border-radius: var(--vaglp-radius);
	background: var(--vaglp-white);
	border: 1px solid var(--vaglp-line);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.vaglp .vaglp-tile:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--vaglp-primary-rgb), 0.22);
	box-shadow: var(--vaglp-shadow);
}

.vaglp-tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border-radius: 13px;
	color: var(--vaglp-secondary);
	background: rgba(var(--vaglp-secondary-rgb), 0.06);
	transition: color 0.3s ease, background-color 0.3s ease;
}

.vaglp-tile:hover .vaglp-tile__icon {
	color: #fff;
	background: var(--vaglp-primary);
}

.vaglp-tile__title {
	margin-bottom: 7px;
	color: var(--vaglp-secondary);
	font-family: var(--vaglp-font-body);
	font-size: 1.03rem;
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.01em;
}

.vaglp-tile__text {
	color: var(--vaglp-muted);
	font-size: 0.895rem;
	line-height: 1.6;
}

/* -------------------------------------------------------------- Lead form */

/* Continues the hero's light rather than restarting it, so the two sections
   read as one surface with the form card bridging them. */
.vaglp-lead {
	position: relative;
	scroll-margin-top: 80px;
	background-color: var(--vaglp-blush);
	background-image:
		radial-gradient(50% 45% at 82% 100%, rgba(var(--vaglp-primary-rgb), 0.13) 0%, transparent 62%),
		radial-gradient(60% 50% at 8% 0%, rgba(255, 255, 255, 0.85) 0%, transparent 60%),
		linear-gradient(178deg, color-mix(in srgb, var(--vaglp-blush) 72%, #fff) 0%, var(--vaglp-blush) 100%);
	overflow: hidden;
}

.vaglp-lead__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.vaglp-lead .vaglp-shell {
	position: relative;
	z-index: 1;
}

.vaglp-lead__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
	gap: clamp(34px, 5vw, 76px);
	align-items: center;
}

.vaglp-lead__copy .vaglp-section__title {
	max-width: 15ch;
}

.vaglp-lead__text {
	max-width: 44ch;
	margin-top: 18px;
	color: var(--vaglp-muted);
	font-size: 1.05rem;
	line-height: 1.7;
}

.vaglp-lead__mockup {
	margin-block: 30px 6px;
}

.vaglp-mockup--small {
	padding: 0;
}

.vaglp-mockup--small .vaglp-book {
	width: 168px;
	border-radius: 6px 14px 14px 6px;
	transform: rotate(-4deg);
	animation: none;
	box-shadow: var(--vaglp-shadow);
}

.vaglp-mockup--small .vaglp-book__spine {
	width: 10px;
}

.vaglp-mockup--small .vaglp-book__face {
	padding: 18px 16px 18px 22px;
}

.vaglp-mockup--small .vaglp-book__title {
	font-size: 1rem;
	line-height: 1.2;
}

.vaglp-mockup--small .vaglp-book__eyebrow {
	font-size: 8px;
	letter-spacing: 0.16em;
}

.vaglp-mockup--small .vaglp-book__rule {
	width: 30px;
	height: 2px;
	margin-block: 10px 8px;
}

.vaglp-mockup--small .vaglp-book__count {
	font-size: 1.2rem;
}

.vaglp-mockup--small .vaglp-book__footer {
	font-size: 8.5px;
	line-height: 1.4;
}

.vaglp-formcard {
	position: relative;
	padding: clamp(28px, 3.4vw, 46px);
	border-radius: clamp(20px, 2.4vw, 32px);
	background: var(--vaglp-white);
	box-shadow: var(--vaglp-shadow-lg);
}

/* Same treatment as the hero card, so the two panels read as siblings. */
.vaglp-formcard::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(var(--vaglp-secondary-rgb), 0.06);
	pointer-events: none;
}

@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
	.vaglp-herocard::before,
	.vaglp-formcard::before {
		padding: 1px;
		box-shadow: none;
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	}

	.vaglp-herocard::before {
		background: linear-gradient(
			160deg,
			rgba(255, 255, 255, 0.95) 0%,
			rgba(var(--vaglp-primary-rgb), 0.28) 32%,
			rgba(255, 255, 255, 0.4) 62%,
			rgba(var(--vaglp-secondary-rgb), 0.08) 100%
		);
	}

	.vaglp-formcard::before {
		background: linear-gradient(
			160deg,
			rgba(255, 255, 255, 0.95) 0%,
			rgba(var(--vaglp-primary-rgb), 0.24) 34%,
			rgba(var(--vaglp-secondary-rgb), 0.07) 100%
		);
	}
}

.vaglp-formcard__title {
	color: var(--vaglp-secondary);
	font-family: var(--vaglp-font-head);
	font-size: clamp(1.5rem, 2.2vw, 1.85rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.vaglp-formcard__sub {
	margin-top: 10px;
	color: var(--vaglp-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.vaglp-form {
	margin-top: 26px;
}

.vaglp-form__alert {
	margin-bottom: 18px;
	padding: 13px 16px;
	border-radius: var(--vaglp-radius-sm);
	background: #fef2f4;
	border: 1px solid #fbd0d9;
	color: #a8143b;
	font-size: 14px;
	line-height: 1.5;
}

.vaglp-field {
	margin-bottom: 16px;
}

.vaglp-field__control {
	position: relative;
}

.vaglp .vaglp-field__input {
	display: block;
	width: 100%;
	height: 62px;
	margin: 0;
	padding: 24px 18px 8px;
	border: 1.5px solid rgba(var(--vaglp-secondary-rgb), 0.13);
	border-radius: var(--vaglp-radius-sm);
	background: var(--vaglp-gray);
	color: var(--vaglp-text);
	font-family: var(--vaglp-font-body);
	font-size: 16px; /* Keeps iOS from zooming on focus. */
	font-weight: 500;
	line-height: 1.3;
	box-shadow: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.vaglp .vaglp-field__input:hover {
	border-color: rgba(var(--vaglp-secondary-rgb), 0.22);
}

.vaglp .vaglp-field__input:focus {
	outline: none;
	background: var(--vaglp-white);
	border-color: var(--vaglp-primary);
	box-shadow: 0 0 0 4px rgba(var(--vaglp-primary-rgb), 0.13), 0 6px 16px -8px rgba(var(--vaglp-primary-rgb), 0.4);
}

.vaglp-field__label {
	position: absolute;
	top: 50%;
	left: 19px;
	transform: translateY(-50%);
	color: var(--vaglp-muted);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	pointer-events: none;
	transition: transform 0.18s ease, font-size 0.18s ease, color 0.18s ease, top 0.18s ease;
}

.vaglp-field__input:focus + .vaglp-field__label,
.vaglp-field__input:not(:placeholder-shown) + .vaglp-field__label,
.vaglp-field__input:-webkit-autofill + .vaglp-field__label {
	top: 13px;
	transform: none;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(var(--vaglp-secondary-rgb), 0.62);
}

.vaglp-field__input:focus + .vaglp-field__label {
	color: var(--vaglp-primary);
}

.vaglp-field__req {
	color: var(--vaglp-primary);
}

.vaglp-field__error {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 7px;
	padding-left: 3px;
	color: #d11a48;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.vaglp-field.is-invalid .vaglp-field__input {
}

.vaglp-field.is-invalid .vaglp-field__input:focus {
	box-shadow: 0 0 0 4px rgba(239, 78, 115, 0.14);
}

.vaglp-field.is-valid .vaglp-field__input {
	border-color: rgba(16, 160, 110, 0.42);
}

.vaglp-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vaglp .vaglp-submit {
	margin-top: 10px;
}

.vaglp .vaglp-submit[disabled] {
	cursor: progress;
	opacity: 0.9;
}

.vaglp .vaglp-submit.is-loading {
	pointer-events: none;
}

.vaglp-spinner {
	display: none;
	flex: none;
	width: 18px;
	height: 18px;
	border: 2.5px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: vaglp-spin 0.7s linear infinite;
}

.vaglp-submit.is-loading .vaglp-spinner {
	display: block;
}

.vaglp-form__privacy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
	color: var(--vaglp-muted);
	font-size: 12.5px;
	line-height: 1.5;
	text-align: center;
}

.vaglp-form__privacy .vaglp-icon {
	color: rgba(var(--vaglp-secondary-rgb), 0.5);
}

/* Success panel. */

.vaglp-success {
	text-align: center;
	animation: vaglp-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.vaglp-success__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 22px;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg, var(--vaglp-primary), color-mix(in srgb, var(--vaglp-primary) 68%, #ff8bbd));
	box-shadow: var(--vaglp-shadow-pink);
}

.vaglp-success__title {
	color: var(--vaglp-secondary);
	font-family: var(--vaglp-font-head);
	font-size: clamp(1.5rem, 2.2vw, 1.9rem);
	font-weight: 600;
	line-height: 1.2;
}

.vaglp-success__text {
	max-width: 38ch;
	margin: 12px auto 26px;
	color: var(--vaglp-muted);
	font-size: 0.98rem;
	line-height: 1.65;
}

/* ------------------------------------------------------------ Trust strip */

.vaglp-trust {
	padding-block: clamp(36px, 4.5vw, 56px);
	background: var(--vaglp-white);
	border-top: 1px solid var(--vaglp-line);
}

.vaglp-trust__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 40px;
}

.vaglp-trust__heading {
	max-width: 34ch;
	color: var(--vaglp-secondary);
	font-family: var(--vaglp-font-head);
	font-size: clamp(1.05rem, 1.7vw, 1.32rem);
	font-weight: 500;
	font-style: italic;
	line-height: 1.4;
}

.vaglp-trust__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}

.vaglp-trust__list li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: rgba(var(--vaglp-text-rgb), 0.8);
	font-size: 14.5px;
	font-weight: 500;
}

.vaglp-trust__list .vaglp-icon {
	color: var(--vaglp-primary);
}

/* ----------------------------------------------------------------- Footer */

.vaglp-footer {
	padding-block: 34px;
	background: var(--vaglp-secondary);
	color: rgba(255, 255, 255, 0.72);
	font-size: 13.5px;
}

.vaglp-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
}

.vaglp-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vaglp-footer__name {
	color: #fff;
	font-family: var(--vaglp-font-head);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.2;
}

.vaglp-footer__tagline {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12.5px;
}

.vaglp-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}

.vaglp .vaglp-footer__nav a {
	color: rgba(255, 255, 255, 0.78);
	transition: color 0.2s ease;
}

.vaglp .vaglp-footer__nav a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vaglp-footer__copy {
	color: rgba(255, 255, 255, 0.5);
	font-size: 12.5px;
}

/* ------------------------------------------------------------- Animations */

@keyframes vaglp-float {
	0%,
	100% {
		transform: translateY(0) rotate(var(--vaglp-rot, -3.2deg));
	}
	50% {
		transform: translateY(-12px) rotate(var(--vaglp-rot, -3.2deg));
	}
}

.vaglp-badge--free,
.vaglp-badge--tasks,
.vaglp-floatcard {
	--vaglp-rot: 0deg;
}

@keyframes vaglp-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes vaglp-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(var(--vaglp-primary-rgb), 0.45);
	}
	70%,
	100% {
		box-shadow: 0 0 0 7px rgba(var(--vaglp-primary-rgb), 0);
	}
}

@keyframes vaglp-pop {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* The rise carries `--vaglp-tilt` through with it. Several revealed elements
   are deliberately off-axis (the tag, the photo panel, the form card), and a
   bare `transform` here would land later in the cascade and flatten them the
   moment the observer fired. Unset, the custom property resolves to 0deg. */
.vaglp-reveal {
	opacity: 0;
	/*! transform: translateY(22px) rotate(var(--vaglp-tilt, 0deg)); */
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--vaglp-delay, 0ms);
}

.vaglp-reveal.is-visible {
	opacity: 1;
	/*! transform: rotate(var(--vaglp-tilt, 0deg)); */
}

/* The hero card's contents cascade in rather than arriving as one block —
   the eye is led down the card to the CTA. */
.vaglp-js .vaglp-herocard > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s var(--vaglp-ease), transform 0.6s var(--vaglp-ease);
}

.vaglp-js .vaglp-herocard.is-visible > * {
	opacity: 1;
	transform: none;
}

.vaglp-js .vaglp-herocard.is-visible > *:nth-child(1) {
	transition-delay: 0.08s;
}
.vaglp-js .vaglp-herocard.is-visible > *:nth-child(2) {
	transition-delay: 0.16s;
}
.vaglp-js .vaglp-herocard.is-visible > *:nth-child(3) {
	transition-delay: 0.22s;
}
.vaglp-js .vaglp-herocard.is-visible > *:nth-child(4) {
	transition-delay: 0.28s;
}
.vaglp-js .vaglp-herocard.is-visible > *:nth-child(5) {
	transition-delay: 0.34s;
}
.vaglp-js .vaglp-herocard.is-visible > *:nth-child(n + 6) {
	transition-delay: 0.4s;
}

/* No JS: never hide content behind an animation that will not run. */
.vaglp:not(.vaglp-js) .vaglp-reveal {
	opacity: 1;
	transform: rotate(var(--vaglp-tilt, 0deg));
}

/* --------------------------------------------------------------- Tablet */

@media (max-width: 1080px) {
	.vaglp-cards--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vaglp-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vaglp-badge--tasks {
		left: -12px;
	}

	.vaglp-floatcard {
		right: -8px;
	}
}

/* Tablet: the composition holds, but the columns are close enough together
   that the full tilts start reading as a mistake rather than a choice, so
   they ease off with the gap. */
@media (max-width: 1080px) {
	/* Below the desktop frame the composition is compact enough that filling
	   the viewport just banks dead space above and below it on tall screens,
	   so the section goes back to sizing off its own content. */
	.vaglp-hero--showcase {
		min-height: 0;
	}

	.vaglp-showcase {
		gap: 40px;
	}

	.vaglp-showcase__photo {
		--vaglp-tilt: 1.6deg;

		width: 92%;
		margin-left: 8%;
	}

	.vaglp-showcase__form {
		--vaglp-tilt: -1deg;

		width: 84%;
		margin-top: -13%;
	}
}

@media (max-width: 900px) {
	.vaglp {
		font-size: 16px;
	}

	/* Stack: copy, then photo, then the form at full width. The overlap and
	   all three tilts go — they only read at desktop scale — and the hero
	   stops filling the viewport, since stacked content sets its own height. */
	.vaglp-hero--showcase {
		display: block;
		min-height: 0;
	}

	.vaglp-showcase {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	/* Zeroing the token rather than the transform: the reveal rule that
	   composes it is more specific than anything declared in here. */
	.vaglp-tag,
	.vaglp-showcase__photo,
	.vaglp-showcase__form {
		--vaglp-tilt: 0deg;
	}

	.vaglp-showcase__title {
		margin-left: 0;
		font-size: clamp(2.4rem, 9.5cqw, 4.4rem);
	}

	.vaglp-showcase__photo {
		width: 100%;
		margin-left: 0;
		aspect-ratio: 1.5;
	}

	.vaglp-showcase__form {
		width: 100%;
		margin-top: 28px;
	}

	.vaglp-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 46px;
		text-align: left;
	}

	.vaglp-hero__title {
		max-width: 18ch;
	}

	.vaglp-lead__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.vaglp-lead__copy .vaglp-section__title {
		max-width: 20ch;
	}

	.vaglp-lead__mockup {
		display: none;
	}

	.vaglp-cards--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vaglp-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vaglp-trust__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --------------------------------------------------------------- Mobile */

@media (max-width: 640px) {
	.vaglp {
		--vaglp-section-y: clamp(52px, 12vw, 72px);
	}

	.vaglp-hero {
		padding-block: 36px 56px;
	}

	/* Subheading and CTA stack and go full width. */
	.vaglp-showcase__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.vaglp-showcase__lead {
		justify-content: center;
		text-align: center;
	}

	.vaglp .vaglp-showcase__actions .vaglp-btn--flat {
		width: 100%;
	}

	.vaglp-showcase__photo {
		aspect-ratio: 1.35;
	}

	.vaglp-showcase__privacy {
		letter-spacing: 0.12em;
		justify-content: center;
	}

	.vaglp-hero__title {
		max-width: none;
		font-size: clamp(2.15rem, 10.5vw, 2.75rem);
	}

	.vaglp-hero__lead,
	.vaglp-hero__text {
		max-width: none;
	}

	.vaglp-hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.vaglp .vaglp-hero__actions .vaglp-btn {
		width: 100%;
	}

	.vaglp-hero__note {
		justify-content: center;
	}

	.vaglp-mockup {
		padding: 18px 14px;
	}

	.vaglp-book {
		width: min(215px, 62vw);
	}

	/* Fewer decorative elements on small screens. */
	.vaglp-floatcard,
	.vaglp-grid-lines,
	.vaglp-blob--c {
		display: none;
	}

	.vaglp-badge {
		padding: 8px 13px;
		font-size: 10.5px;
	}

	.vaglp-badge--tasks {
		bottom: 46px;
		left: 0;
	}

	.vaglp-badge--free {
		top: 2px;
		right: 0;
	}

	.vaglp-cards--3,
	.vaglp-cards--4,
	.vaglp-tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	.vaglp-section__head {
		text-align: left;
		margin-inline: 0;
	}

	.vaglp-formcard {
		padding: 24px 20px 26px;
		border-radius: var(--vaglp-radius-lg);
	}

	/* The centred card stays centred on mobile — it is the whole page. */
	.vaglp-herocard {
		padding: 32px 22px 36px;
		border-radius: var(--vaglp-radius-lg);
	}

	.vaglp-herocard__title {
		max-width: none;
		font-size: clamp(2rem, 9.5vw, 2.6rem);
	}

	.vaglp .vaglp-herocard__actions .vaglp-btn {
		width: 100%;
	}

	.vaglp-lead--centered .vaglp-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.vaglp-lead--centered .vaglp-field[data-vaglp-field="first_name"],
	.vaglp-lead--centered .vaglp-field[data-vaglp-field="email"] {
		grid-column: 1 / -1;
	}

	.vaglp-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

/* Below the desktop breakpoint the hero stacks, and the guide mockup slots in
   directly under the headline — the order that reads best on a phone. The copy
   wrapper is dissolved with `display: contents` so its children become flex
   items of the hero grid and can be ordered individually. */

@media (max-width: 900px) {
	.vaglp-hero__grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.vaglp-hero__copy {
		display: contents;
	}

	.vaglp-eyebrow {
		order: 1;
		align-self: flex-start;
	}

	.vaglp-hero__title {
		order: 2;
		margin-bottom: 4px;
	}

	.vaglp-hero__visual {
		order: 3;
		margin-block: 26px 30px;
	}

	.vaglp-hero__lead {
		order: 4;
	}

	.vaglp-hero__text {
		order: 5;
	}

	.vaglp-hero__actions {
		order: 6;
	}

	.vaglp-ticks {
		order: 7;
	}
}

/* ------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.vaglp *,
	.vaglp *::before,
	.vaglp *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	/* The composition's tilts are static geometry, not motion, so they stay.
	   Only the rise is dropped. */
	.vaglp-reveal {
		opacity: 1;
		transform: rotate(var(--vaglp-tilt, 0deg));
	}

	.vaglp-js .vaglp-herocard > * {
		opacity: 1;
		transform: none;
	}

	.vaglp-book,
	.vaglp-badge--free,
	.vaglp-badge--tasks,
	.vaglp-floatcard,
	.vaglp-herocard__eyebrow::before {
		animation: none;
	}

	.vaglp-spinner {
		animation: vaglp-spin 1.2s linear infinite !important;
	}
}

/* --------------------------------------------------- Fallback for no CSS
   color-mix support (older Safari/Firefox): the mixed values degrade to the
   base colour rather than to transparent. */

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.vaglp {
	}

	.vaglp .vaglp-btn--primary {
		background: var(--vaglp-primary);
	}

	.vaglp-book {
		background: var(--vaglp-secondary);
	}

	.vaglp-hero {
		background: linear-gradient(168deg, var(--vaglp-white) 0%, var(--vaglp-blush) 100%);
	}

	.vaglp-lead {
		background: var(--vaglp-blush);
	}

	.vaglp-herocard__rule {
		background: var(--vaglp-primary);
	}

	.vaglp-card__icon,
	.vaglp-floatcard__icon,
	.vaglp-success__mark {
		background: rgba(var(--vaglp-primary-rgb), 0.12);
	}

	.vaglp-floatcard__icon,
	.vaglp-success__mark {
		background: var(--vaglp-primary);
	}
}


@media (max-width: 480px) {
.vaglp-showcase__copy { text-align: center;}
}