/* ============================================================================
 * EXPERIENCE LAYER - GlobalCove marketing pages
 * ============================================================================
 * Loaded after app.css (see App.razor). Shared by Home, Sprint, Workshop,
 * Services, About, and Contact. Page-specific layout lives in each page's
 * .razor.css; this file holds the reusable primitives (xp-*).
 *
 * MOTION ENGINE
 * - Primary: CSS scroll-driven animations (animation-timeline: view()/scroll()).
 *   They are computed from scroll POSITION, not from JS state, so they survive
 *   Blazor's SSR -> interactive DOM swap without replaying or flickering.
 * - Fallback: GlobalCoveWeb.Client.lib.module.js adds html.xp-io and toggles
 *   .is-in via IntersectionObserver when scroll timelines are unsupported.
 * - Default (un-enhanced) styles are always the FINAL, fully readable state.
 *   Motion is layered on only inside @supports + prefers-reduced-motion guards.
 * - Pinned scenes only pin at >= 992px.
 *
 * RULES: colors come from core-theme.css variables. Keyframes animate the
 * individual `translate`/`scale` properties so hover `transform` still works.
 * ========================================================================== */

/* ---------- Registered properties ---------- */

@property --xp-n {
	syntax: '<integer>';
	initial-value: 0;
	inherits: false;
}

/* ---------- Page root + color contexts ---------- */

.xp {
	--xp-bg: var(--theme-bg-primary);
	--xp-fg: var(--theme-text-primary);
	--xp-muted: var(--theme-text-secondary);
	--xp-accent: var(--primary-brand);
	--xp-accent-2: var(--secondary-brand);
	--xp-on-accent: var(--btn-primary-text);
	--xp-cta: var(--primary-brand);
	--xp-on-cta: var(--btn-primary-text);
	--xp-border: var(--card-border);
	--xp-border-strong: color-mix(in srgb, var(--theme-text-primary) 24%, transparent);
	--xp-surface: var(--card-bg);
	--xp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	/* Pull the page up under the fixed navbar so heroes run edge to edge. */
	--xp-pull: calc(var(--content-padding-top) + 1.5rem);
	/* Rendered navbar height (app.css sets .navbar min-height: 90px). Pinned
	   scenes stick just below it. */
	--xp-nav: 90px;
	position: relative;
	margin-top: calc(-1 * var(--xp-pull));
	margin-bottom: -1.5rem;
	overflow-x: clip; /* clip (not hidden) keeps sticky + scroll timelines working */
	font-family: var(--font-body);
	color: var(--xp-fg);
}

[data-theme="dark"] .xp,
.dark-theme .xp {
	--xp-accent: var(--signal);
	--xp-accent-2: var(--signal-green);
	--xp-on-accent: var(--ink-on-signal);
	--xp-cta: var(--signal);
	--xp-on-cta: var(--ink-on-signal);
}

.xp-paper { --xp-bg: var(--theme-bg-primary); }
.xp-paper-alt { --xp-bg: var(--theme-bg-secondary); }

.xp-ink {
	--xp-bg: var(--ink-bg);
	--xp-fg: var(--ink-text);
	--xp-muted: var(--ink-text-muted);
	--xp-accent: var(--signal);
	--xp-accent-2: var(--signal-green);
	--xp-on-accent: var(--ink-on-signal);
	--xp-cta: var(--signal-green);
	--xp-on-cta: var(--ink-on-signal);
	--xp-border: var(--ink-border);
	--xp-border-strong: color-mix(in srgb, var(--ink-text) 30%, transparent);
	--xp-surface: var(--ink-bg-raised);
}

.xp-brand {
	--xp-bg: var(--primary-brand);
	--xp-fg: var(--btn-primary-text);
	--xp-muted: color-mix(in srgb, var(--btn-primary-text) 80%, transparent);
	--xp-accent: var(--signal-green);
	--xp-accent-2: var(--btn-primary-text);
	--xp-on-accent: var(--ink-on-signal);
	--xp-cta: var(--btn-primary-text);
	--xp-on-cta: var(--primary-brand);
	--xp-border: color-mix(in srgb, var(--btn-primary-text) 22%, transparent);
	--xp-border-strong: color-mix(in srgb, var(--btn-primary-text) 40%, transparent);
	--xp-surface: color-mix(in srgb, var(--btn-primary-text) 8%, var(--primary-brand));
}

.xp-green {
	--xp-bg: var(--secondary-brand);
	--xp-fg: var(--btn-primary-text);
	--xp-muted: color-mix(in srgb, var(--btn-primary-text) 82%, transparent);
	--xp-accent: var(--btn-primary-text);
	--xp-accent-2: var(--btn-primary-text);
	--xp-on-accent: var(--secondary-brand);
	--xp-cta: var(--btn-primary-text);
	--xp-on-cta: var(--secondary-brand);
	--xp-border: color-mix(in srgb, var(--btn-primary-text) 24%, transparent);
	--xp-border-strong: color-mix(in srgb, var(--btn-primary-text) 42%, transparent);
	--xp-surface: color-mix(in srgb, var(--btn-primary-text) 8%, var(--secondary-brand));
}

.xp-paper,
.xp-paper-alt,
.xp-ink,
.xp-brand,
.xp-green {
	background-color: var(--xp-bg);
	color: var(--xp-fg);
}

/* MDI glyphs are fixed at 24px on ::before by the vendor font CSS. Inside the
   experience layer, let icons scale with the element's font-size. */
.xp .mdi::before {
	font-size: inherit;
	line-height: 1;
}

.xp a:not([class]) {
	color: var(--xp-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-thickness 0.2s ease;
}

.xp a:not([class]):hover {
	text-decoration-thickness: 2px;
}

/* ---------- Layout ---------- */

.xp-wrap {
	width: min(1240px, 100% - 48px);
	margin-inline: auto;
	position: relative;
}

.xp-wrap--narrow {
	width: min(900px, 100% - 48px);
}

.xp-section {
	position: relative;
	padding: clamp(96px, 12vw, 168px) 0;
}

.xp-section--tight {
	padding: clamp(72px, 8vw, 112px) 0;
}

.xp-head {
	max-width: 880px;
	margin-bottom: clamp(48px, 7vw, 96px);
}

.xp-head--center {
	margin-inline: auto;
	text-align: center;
}

.xp-head--center .xp-lead {
	margin-inline: auto;
}

/* ---------- Typography ---------- */

.xp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--xp-accent);
	margin-bottom: 28px;
}

.xp-eyebrow::before {
	content: '';
	width: 32px;
	height: 1px;
	background-color: currentColor;
}

.xp-head--center .xp-eyebrow::after {
	content: '';
	width: 32px;
	height: 1px;
	background-color: currentColor;
}

.xp-display {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 800;
	font-size: clamp(2.6rem, 7vw, 6.2rem);
	line-height: 0.96;
	letter-spacing: -0.038em;
	color: var(--xp-fg);
	margin: 0 0 36px;
}

.xp-display--md {
	font-size: clamp(2.4rem, 5.6vw, 5rem);
}

.xp-h2 {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 750;
	font-size: clamp(2.1rem, 4.8vw, 4.1rem);
	line-height: 1.02;
	letter-spacing: -0.026em;
	color: var(--xp-fg);
	margin: 0 0 28px;
	text-wrap: balance;
}

.xp-h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.3rem, 1.9vw, 1.65rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--xp-fg);
	margin: 0 0 12px;
	text-wrap: balance;
}

/* Accent phrase inside headlines. The class name is historical (it was a serif italic);
   it is now the heading family at a lighter weight. font-style resets the <em> italic. */
.xp-serif {
	font-family: var(--font-accent);
	font-weight: var(--font-accent-weight);
	font-style: normal;
}

.xp-accent { color: var(--xp-accent); }
.xp-accent-2 { color: var(--xp-accent-2); }

.xp-lead {
	font-size: clamp(1.1rem, 1.45vw, 1.32rem);
	line-height: 1.65;
	color: var(--xp-muted);
	max-width: 62ch;
	margin: 0 0 24px;
}

.xp-lead strong,
.xp-body strong {
	color: var(--xp-fg);
	font-weight: 700;
}

.xp-body {
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--xp-muted);
	margin: 0;
}

.xp-mono {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--xp-muted);
}

/* Line-mask headline: <span class="xp-line"><span>Text</span></span>
   Display headings use line-height < 1, so descenders (g, y, p) hang ~0.2em below the
   line box. The inner span carries 0.25em of bottom room so the clip never cuts them,
   and the outer negative margin cancels it so line spacing is unchanged. The padding
   sits on the inner span (not the outer) so xpLineUp's translate: 108% still starts
   the text fully below the clip edge. */
.xp-line {
	display: block;
	overflow: clip;
	margin-bottom: -0.25em;
}

.xp-line > span {
	display: block;
	padding-bottom: 0.25em;
}

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

.xp-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

.xp-btn {
	--b-bg: var(--xp-cta);
	--b-fg: var(--xp-on-cta);
	--b-fill: color-mix(in srgb, var(--xp-cta) 78%, black);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 19px 32px;
	border: 0;
	border-radius: 999px;
	background-color: var(--b-bg);
	color: var(--b-fg);
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transform: translate(var(--tx, 0px), var(--ty, 0px));
	transition: transform 0.45s var(--xp-ease), box-shadow 0.4s ease, color 0.3s ease;
}

.xp-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--b-fill);
	border-radius: inherit;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s var(--xp-ease);
}

.xp-btn:hover,
.xp-btn:focus-visible {
	color: var(--b-fg);
	text-decoration: none;
	box-shadow: 0 18px 44px -14px color-mix(in srgb, var(--b-bg) 70%, transparent);
}

.xp-btn:hover::before,
.xp-btn:focus-visible::before {
	transform: scaleX(1);
}

.xp-btn .mdi {
	font-size: 1.2rem;
	transition: transform 0.4s var(--xp-ease);
}

.xp-btn:hover .mdi-arrow-right,
.xp-btn:hover .mdi-arrow-top-right {
	transform: translateX(4px);
}

.xp-btn:focus-visible {
	outline: 2px solid var(--xp-accent-2);
	outline-offset: 4px;
}

.xp-btn--ghost {
	--b-bg: transparent;
	--b-fg: var(--xp-fg);
	--b-fill: color-mix(in srgb, var(--xp-fg) 10%, transparent);
	box-shadow: inset 0 0 0 1.5px var(--xp-border-strong);
}

.xp-btn--ghost:hover,
.xp-btn--ghost:focus-visible {
	box-shadow: inset 0 0 0 1.5px var(--xp-fg);
}

.xp-btn--lg {
	padding: 24px 40px;
	font-size: 1.12rem;
}

/* Inline arrow link */
.xp-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 650;
	color: var(--xp-accent);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 3px;
	transition: background-size 0.45s var(--xp-ease), gap 0.3s var(--xp-ease);
}

.xp-link:hover {
	color: var(--xp-accent);
	background-size: 100% 1.5px;
	gap: 12px;
	text-decoration: none;
}

/* ---------- Badges ---------- */

.xp-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--xp-border-strong);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--xp-fg);
	white-space: nowrap;
}

.xp-badge--live::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--xp-accent-2);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--xp-accent-2) 60%, transparent);
	animation: xpPulse 2s ease-out infinite;
}

@keyframes xpPulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--xp-accent-2) 60%, transparent); }
	70%, 100% { box-shadow: 0 0 0 10px transparent; }
}

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

.xp-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding: calc(var(--xp-pull) + 72px) 0 128px;
	overflow: clip;
	isolation: isolate;
}

.xp-hero--short {
	min-height: 78svh;
}

.xp-hero-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* Blueprint grid, faded at the edges */
.xp-grid {
	position: absolute;
	inset: -2px;
	background-image:
		linear-gradient(var(--ink-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
	background-size: 72px 72px;
	background-position: center top;
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 78%);
	mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 78%);
	transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -14px), 0);
}

.xp-paper .xp-grid,
.xp-paper-alt .xp-grid {
	background-image:
		linear-gradient(color-mix(in srgb, var(--primary-brand) 8%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--primary-brand) 8%, transparent) 1px, transparent 1px);
}

/* Soft light orbs: solid brand colors, blurred */
.xp-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.55;
	transform: translate3d(calc(var(--px, 0) * 40px), calc(var(--py, 0) * 40px), 0);
	transition: transform 0.6s var(--xp-ease);
}

.xp-orb--a {
	width: min(620px, 70vw);
	aspect-ratio: 1;
	top: -18%;
	right: -12%;
	background-color: var(--primary-brand);
}

.xp-orb--b {
	width: min(440px, 55vw);
	aspect-ratio: 1;
	bottom: -22%;
	left: -10%;
	background-color: var(--secondary-brand);
	opacity: 0.45;
}

.xp-orb--c {
	width: min(300px, 40vw);
	aspect-ratio: 1;
	top: 40%;
	left: 45%;
	background-color: var(--signal);
	opacity: 0.18;
}

/* Slowly rotating geometric square accent (nested outline squares) */
.xp-geo {
	position: absolute;
	top: -120px;
	right: -120px;
	width: min(500px, 80vw);
	aspect-ratio: 1;
	border: 2px solid var(--signal-green);
	opacity: 0.35;
	rotate: 45deg;
	pointer-events: none;
}

.xp-geo::before {
	content: '';
	position: absolute;
	inset: 40px;
	border: 2px solid var(--signal-green);
	opacity: 0.5;
}

/* Corner registration ticks */
.xp-ticks::before,
.xp-ticks::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	border-color: var(--xp-border-strong);
	border-style: solid;
}

.xp-ticks::before {
	top: calc(var(--xp-pull) + 28px);
	left: 28px;
	border-width: 1px 0 0 1px;
}

.xp-ticks::after {
	bottom: 28px;
	right: 28px;
	border-width: 0 1px 1px 0;
}

.xp-hero-inner {
	position: relative;
	z-index: 1;
}

.xp-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 36px;
	translate: -50% 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--xp-muted);
	z-index: 1;
}

.xp-scroll-cue::after {
	content: '';
	width: 1px;
	height: 44px;
	background-color: var(--xp-border-strong);
	background-image: linear-gradient(var(--xp-accent-2), var(--xp-accent-2));
	background-size: 1px 14px;
	background-repeat: no-repeat;
	animation: xpCue 2.2s var(--xp-ease) infinite;
}

@keyframes xpCue {
	from { background-position: 0 -14px; }
	to { background-position: 0 44px; }
}

/* ---------- Scroll progress bar (page-level, pure CSS) ---------- */

.xp-progress {
	display: none;
}

/* ---------- Scrubbed "reading highlight" text (ScrubText component) ---------- */

.xp-scrub {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 600;
	font-size: clamp(1.7rem, 3.7vw, 3.2rem);
	line-height: 1.16;
	letter-spacing: -0.022em;
	color: var(--xp-fg);
	margin: 0;
	text-wrap: pretty;
}

.xp-scrub--sm {
	font-size: clamp(1.4rem, 2.6vw, 2.25rem);
	line-height: 1.25;
}

.xp-word--hl {
	font-family: var(--font-accent);
	font-style: normal;
	font-weight: var(--font-accent-weight);
	color: var(--xp-accent-2);
}

.xp-scrub a {
	color: var(--xp-accent);
}

/* ---------- Kinetic type band ----------
 * Giant lines that slide in from alternating sides and fill from outline to
 * solid as they land. Default = final state; motion lives in the scroll block.
 * <section class="xp-kinetic xp-paper"><span class="xp-kinetic-line"><span>Text</span></span>...</section>
 */

.xp-kinetic {
	position: relative;
	padding: clamp(80px, 10vw, 150px) 0;
	overflow: clip;
}

.xp-kinetic .xp-eyebrow {
	margin-bottom: 20px;
}

.xp-kinetic-line {
	display: block;
	padding-inline: max(24px, (100% - 1240px) / 2);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.4rem, 7vw, 7.2rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
	white-space: nowrap;
	color: var(--xp-fg);
}

.xp-kinetic-line--r {
	text-align: right;
	font-family: var(--font-accent);
	font-style: normal;
	font-weight: var(--font-accent-weight);
	color: var(--xp-accent);
}

.xp-kinetic-line > span {
	display: inline-block;
	--k-from: -34vw;
	--k-fill: var(--xp-fg);
}

.xp-kinetic-line--r > span {
	--k-from: 34vw;
	--k-fill: var(--xp-accent);
}

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

.xp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--xp-surface);
	border: 1px solid var(--xp-border);
	border-radius: 24px;
	padding: 36px 32px;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.55s var(--xp-ease), border-color 0.4s ease, box-shadow 0.5s ease;
}

.xp-card:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--xp-accent) 45%, var(--xp-border));
	box-shadow: 0 30px 60px -32px color-mix(in srgb, var(--xp-accent) 45%, transparent);
}

.xp-card .xp-body {
	font-size: 0.98rem;
}

/* Cursor spotlight: a blurred solid circle that follows the pointer (JS sets --mx/--my). */
.xp-spot::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: var(--mx, 50%);
	top: var(--my, 0%);
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--xp-accent) 24%, transparent);
	filter: blur(64px);
	translate: -50% -50%;
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.xp-spot:hover::before {
	opacity: 1;
}

.xp-card-idx {
	position: absolute;
	top: 30px;
	right: 30px;
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	color: var(--xp-muted);
}

.xp-icon {
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	border-radius: 18px;
	background-color: color-mix(in srgb, var(--xp-accent) 13%, transparent);
	color: var(--xp-accent);
	font-size: 1.65rem;
	margin-bottom: 28px;
	transition: transform 0.5s var(--xp-ease), background-color 0.4s ease, color 0.4s ease;
}

.xp-card:hover .xp-icon {
	transform: rotate(-8deg) scale(1.08);
	background-color: var(--xp-accent);
	color: var(--xp-on-accent);
}

.xp-icon--2 {
	background-color: color-mix(in srgb, var(--xp-accent-2) 14%, transparent);
	color: var(--xp-accent-2);
}

.xp-card:hover .xp-icon--2 {
	background-color: var(--xp-accent-2);
	color: var(--xp-bg);
}

.xp-grid-2,
.xp-grid-3,
.xp-grid-4 {
	display: grid;
	gap: 24px;
}

.xp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.xp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.xp-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Checklist ---------- */

.xp-checks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 32px;
}

.xp-checks li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 0;
	border-top: 1px solid var(--xp-border);
	font-weight: 600;
	color: var(--xp-fg);
	line-height: 1.45;
}

.xp-checks .mdi {
	font-size: 1.25rem;
	color: var(--xp-accent-2);
	flex-shrink: 0;
	margin-top: 1px;
}

/* ---------- Drawn timeline ---------- */

.xp-tl {
	--tl-x: 36px;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	view-timeline-name: --xp-tl;
}

.xp-tl::before,
.xp-tl::after {
	content: '';
	position: absolute;
	left: var(--tl-x);
	top: 36px;
	bottom: 36px;
	width: 2px;
	translate: -50% 0;
	background-color: var(--xp-border);
}

.xp-tl::after {
	background-color: var(--xp-accent);
	transform-origin: top;
}

.xp-tl-step {
	position: relative;
	display: grid;
	grid-template-columns: calc(var(--tl-x) * 2) 1fr;
	gap: 32px;
	padding: 0 0 64px;
}

.xp-tl-step:last-child {
	padding-bottom: 0;
}

.xp-tl-num {
	position: relative;
	z-index: 1;
	width: calc(var(--tl-x) * 2);
	height: calc(var(--tl-x) * 2);
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 2px solid var(--xp-accent);
	background-color: var(--xp-accent);
	color: var(--xp-on-accent);
	font-family: var(--font-mono);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.xp-tl-body {
	padding-top: 14px;
}

.xp-tl-body .xp-h3 {
	font-size: clamp(1.45rem, 2.4vw, 2.1rem);
}

/* ---------- Metrics / counters ---------- */

.xp-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--xp-border);
}

.xp-metric {
	padding: 40px 32px 8px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.xp-metric + .xp-metric {
	padding-left: 32px;
	border-left: 1px solid var(--xp-border);
}

.xp-metric-kicker {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--xp-accent-2);
}

.xp-count {
	position: relative;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(4rem, 9vw, 8rem);
	line-height: 0.9;
	letter-spacing: -0.035em;
	color: var(--xp-fg);
	font-variant-numeric: tabular-nums;
}

.xp-count--29 { --xp-to: 29; }
.xp-count--10 { --xp-to: 10; }
.xp-count--12 { --xp-to: 12; }
.xp-count--500 { --xp-to: 500; }

.xp-metric-label {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--xp-muted);
	max-width: 24ch;
}

/* ---------- Spec sheet rows ---------- */

.xp-spec {
	list-style: none;
	margin: 0;
	padding: 0;
}

.xp-spec-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(180px, 260px) 1fr;
	gap: 32px;
	padding: 30px 0;
	align-items: baseline;
}

.xp-spec-row::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background-color: var(--xp-border-strong);
	transform-origin: left;
}

.xp-spec-key {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--xp-accent);
}

.xp-spec-key .mdi {
	font-size: 1.2rem;
}

.xp-spec-val {
	font-size: 1.12rem;
	line-height: 1.65;
	color: var(--xp-fg);
	margin: 0;
}

/* ---------- Pinned horizontal track (default = swipeable row) ---------- */

.xp-hs {
	position: relative;
	view-timeline-name: --xp-hs;
}

.xp-hs-stage {
	position: relative;
}

.xp-hs-track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 8px max(24px, (100% - 1240px) / 2) 24px;
	scrollbar-width: thin;
}

.xp-hs-track > * {
	flex: 0 0 min(460px, 84vw);
	scroll-snap-align: center;
}

.xp-hs-progress {
	display: none;
}

/* ---------- Big CTA panel ---------- */

.xp-cta {
	position: relative;
	border-radius: 40px;
	padding: clamp(56px, 9vw, 128px) clamp(28px, 7vw, 112px);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

.xp-cta .xp-lead {
	margin-inline: auto;
	margin-bottom: 44px;
}

.xp-cta .xp-btns {
	justify-content: center;
}

/* ---------- Giant outlined type ---------- */

.xp-outline {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(7rem, 22vw, 20rem);
	line-height: 0.8;
	letter-spacing: -0.06em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--xp-border-strong);
	user-select: none;
	pointer-events: none;
}

/* ---------- Price ---------- */

.xp-price {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(3rem, 6.5vw, 5.4rem);
	line-height: 1;
	letter-spacing: -0.032em;
	color: var(--xp-fg);
}

/* ============================================================================
 * RESPONSIVE (static layout)
 * ========================================================================== */

@media (max-width: 991.98px) {
	.xp-grid-3,
	.xp-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.xp-metrics {
		grid-template-columns: 1fr;
	}

	.xp-metric + .xp-metric {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--xp-border);
	}

	.xp-metric {
		padding: 32px 0;
	}
}

@media (max-width: 767.98px) {
	.xp-grid-2,
	.xp-grid-3,
	.xp-grid-4,
	.xp-checks {
		grid-template-columns: 1fr;
	}

	.xp-hero {
		padding-bottom: 112px;
	}

	.xp-btns {
		flex-direction: column;
		align-items: stretch;
	}

	.xp-spec-row {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 24px 0;
	}

	.xp-tl {
		--tl-x: 26px;
	}

	.xp-tl-step {
		gap: 20px;
		padding-bottom: 48px;
	}

	.xp-tl-body {
		padding-top: 6px;
	}

	.xp-cta {
		border-radius: 28px;
	}

	.xp-ticks::before,
	.xp-ticks::after {
		display: none;
	}
}

/* ============================================================================
 * MOTION - load intro (plays on first paint and each enhanced navigation)
 * lib.module.js adds html.xp-settled once the intro window has passed, so the
 * SSR -> interactive DOM swap can't replay it.
 * ========================================================================== */

@keyframes xpRise {
	from {
		opacity: 0;
		translate: 0 32px;
		filter: blur(8px);
	}

	to {
		opacity: 1;
		translate: 0 0;
		filter: blur(0);
	}
}

@keyframes xpLineUp {
	from { translate: 0 108%; rotate: 2deg; }
	to { translate: 0 0; rotate: 0deg; }
}

@keyframes xpGeoRotate {
	from { rotate: 45deg; }
	to { rotate: 405deg; }
}

@keyframes xpDrift {
	from { translate: 0 0; }
	to { translate: -6% 8%; }
}

@media (prefers-reduced-motion: no-preference) {
	html:not(.xp-settled) .xp-rise {
		animation: xpRise 1.1s var(--xp-ease) both;
	}

	html:not(.xp-settled) .xp-line > span {
		animation: xpLineUp 1.15s cubic-bezier(0.2, 0.9, 0.1, 1) both;
	}

	.xp-d1 { animation-delay: 0.08s !important; }
	.xp-d2 { animation-delay: 0.18s !important; }
	.xp-d3 { animation-delay: 0.28s !important; }
	.xp-d4 { animation-delay: 0.38s !important; }
	.xp-d5 { animation-delay: 0.5s !important; }
	.xp-d6 { animation-delay: 0.62s !important; }

	.xp-line:nth-child(2) > span { animation-delay: 0.1s; }
	.xp-line:nth-child(3) > span { animation-delay: 0.2s; }
	.xp-line:nth-child(4) > span { animation-delay: 0.3s; }

	.xp-geo {
		animation: xpGeoRotate 120s linear infinite;
	}

	.xp-orb--a {
		animation: xpDrift 16s ease-in-out infinite alternate;
	}

	.xp-orb--b {
		animation: xpDrift 20s ease-in-out infinite alternate-reverse;
	}
}

/* ============================================================================
 * MOTION - scroll-driven (Chrome/Edge/Safari 26+). Hydration-proof.
 * ========================================================================== */

@keyframes xpReveal {
	from {
		opacity: 0;
		translate: 0 64px;
		scale: 0.97;
	}

	to {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}
}

@keyframes xpWord {
	from { opacity: 0.14; }
	to { opacity: 1; }
}

@keyframes xpGrowX {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes xpGrowY {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes xpCount {
	from { --xp-n: 0; }
	to { --xp-n: var(--xp-to); }
}

@keyframes xpParallax {
	from { translate: 0 var(--par, 90px); }
	to { translate: 0 calc(var(--par, 90px) * -1); }
}

@keyframes xpHeroOut {
	to {
		opacity: 0;
		translate: 0 -80px;
		scale: 0.96;
	}
}

@keyframes xpZoom {
	from {
		scale: 0.86;
		opacity: 0.4;
	}

	to {
		scale: 1;
		opacity: 1;
	}
}

@keyframes xpWipe {
	from { clip-path: inset(5% 3.5% 0 3.5% round 48px); }
	to { clip-path: inset(0 0 0 0 round 0); }
}

@keyframes xpDotOn {
	from {
		background-color: var(--xp-bg);
		color: var(--xp-accent);
		box-shadow: 0 0 0 0 transparent;
	}

	to {
		background-color: var(--xp-accent);
		color: var(--xp-on-accent);
		box-shadow: 0 0 0 10px color-mix(in srgb, var(--xp-accent) 16%, transparent);
	}
}

@keyframes xpDim {
	from { opacity: 0.28; }
	to { opacity: 1; }
}

@keyframes xpHs {
	to { transform: translateX(calc(-100% + 100vw - 17px)); }
}

@keyframes xpKinetic {
	from {
		translate: var(--k-from) 0;
		color: transparent;
		-webkit-text-stroke-color: var(--k-fill);
	}

	to {
		translate: 0 0;
		color: var(--k-fill);
		-webkit-text-stroke-color: transparent;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* Page scroll progress bar */
		.xp-progress {
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 3px;
			z-index: 1100;
			background-color: var(--signal-green);
			transform-origin: left center;
			animation: xpGrowX linear both;
			animation-timeline: scroll(root block);
			pointer-events: none;
		}

		/* Reveal on enter */
		.xp-reveal,
		.xp-stagger > * {
			animation: xpReveal linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 26%;
		}

		.xp-stagger > :nth-child(2) { animation-range: entry 8% cover 30%; }
		.xp-stagger > :nth-child(3) { animation-range: entry 16% cover 34%; }
		.xp-stagger > :nth-child(4) { animation-range: entry 24% cover 38%; }
		.xp-stagger > :nth-child(5) { animation-range: entry 32% cover 42%; }
		.xp-stagger > :nth-child(6) { animation-range: entry 40% cover 46%; }

		/* Word-by-word reading highlight */
		.xp-word {
			animation: xpWord linear both;
			animation-timeline: view();
			animation-range: cover 16% cover 40%;
		}

		/* Hero drifts away as you leave it */
		.xp-hero-inner {
			animation: xpHeroOut linear both;
			animation-timeline: view();
			animation-range: exit 10% exit 90%;
		}

		/* Parallax */
		.xp-parallax {
			animation: xpParallax linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}

		.xp-parallax--fast { --par: 180px; }
		.xp-parallax--slow { --par: 50px; }

		/* Section wipes open from a rounded card to full bleed */
		.xp-wipe {
			animation: xpWipe linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}

		/* CTA panels scale up into place */
		.xp-zoom {
			animation: xpZoom linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 40%;
		}

		/* Kinetic band: lines slide in from alternating sides, outline -> solid */
		.xp-kinetic-line > span {
			-webkit-text-stroke-width: 1.5px;
			animation: xpKinetic linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 48%;
		}

		/* Timeline line draws as you read; dots light up as reached */
		.xp-tl::after {
			animation: xpGrowY linear both;
			animation-timeline: --xp-tl;
			animation-range: cover 14% cover 64%;
		}

		.xp-tl-num {
			animation: xpDotOn linear both;
			animation-timeline: view();
			animation-range: cover 30% cover 38%;
		}

		.xp-tl-body {
			animation: xpDim linear both;
			animation-timeline: view();
			animation-range: entry 30% cover 36%;
		}

		/* Spec rows draw their rule */
		.xp-spec-row::before {
			animation: xpGrowX linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 30%;
		}

		/* Counting metrics. Real text stays for assistive tech; the animated
		   number is decorative (alt text "" hides it from screen readers). */
		.xp-count {
			counter-reset: xpn var(--xp-n);
			animation: xpCount linear both;
			animation-timeline: view();
			animation-range: entry 30% cover 42%;
		}

		.xp-count::after {
			content: counter(xpn) / "";
		}

		.xp-count > .xp-count-num {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip-path: inset(50%);
			white-space: nowrap;
		}

		/* Pinned horizontal track (desktop only) */
		@media (min-width: 992px) {
			.xp-hs {
				height: var(--hs-h, 320vh);
			}

			.xp-hs-stage {
				position: sticky;
				top: var(--xp-nav);
				height: calc(100vh - var(--xp-nav));
				display: flex;
				flex-direction: column;
				justify-content: center;
				overflow: hidden;
			}

			.xp-hs-track {
				overflow: visible;
				width: max-content;
				scroll-snap-type: none;
				padding-inline: max(48px, (100vw - 1240px) / 2);
				animation: xpHs linear both;
				animation-timeline: --xp-hs;
				animation-range: contain 4% contain 96%;
			}

			.xp-hs-track > * {
				flex-basis: min(520px, 38vw);
			}

			.xp-hs-progress {
				display: block;
				width: min(1240px, 100% - 96px);
				margin: 40px auto 0;
				height: 2px;
				background-color: var(--xp-border);
			}

			.xp-hs-progress > span {
				display: block;
				height: 100%;
				background-color: var(--xp-accent-2);
				transform-origin: left center;
				animation: xpGrowX linear both;
				animation-timeline: --xp-hs;
				animation-range: contain 4% contain 96%;
			}
		}
	}
}

/* ============================================================================
 * MOTION - IntersectionObserver fallback (html.xp-io set by lib.module.js)
 * ========================================================================== */

html.xp-io .xp-reveal,
html.xp-io .xp-stagger > * {
	transition: opacity 0.9s var(--xp-ease), translate 0.9s var(--xp-ease);
}

html.xp-io .xp-reveal:not(.is-in),
html.xp-io .xp-stagger > :not(.is-in) {
	opacity: 0;
	translate: 0 48px;
}

html.xp-io .xp-stagger > :nth-child(2) { transition-delay: 0.08s; }
html.xp-io .xp-stagger > :nth-child(3) { transition-delay: 0.16s; }
html.xp-io .xp-stagger > :nth-child(4) { transition-delay: 0.24s; }
html.xp-io .xp-stagger > :nth-child(5) { transition-delay: 0.32s; }
html.xp-io .xp-stagger > :nth-child(6) { transition-delay: 0.4s; }

html.xp-io .xp-instant {
	transition: none !important;
}

/* ============================================================================
 * Reduced motion: safety net. Everything above is already opt-in, this stops
 * the ambient loops (marquee, orbs, pulses) too.
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.xp *,
	.xp *::before,
	.xp *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}