/* Entry point for CSS so Reroute picks it up on hot reload */
/* ./theme/index.css */
/*
 * CryptoBud Design System
 *
 * Convention: components/{name}.css root class is .{name}
 *   app-store-badge.css → .app-store-badge
 *   feature-list.css    → .feature-list
 * Nest children under that root (no BEM __ / --).
 */

/* ./tokens.css */
/*
 * CryptoBud design tokens
 * Source of truth for color, type, space, motion, and layout scale.
 */

:root {
	color-scheme: light dark;

	/* Color — light. Dark overrides live in prefers-color-scheme below. */
	--color-bg: #fafafa;
	--color-ink: #143819;
	--color-ink-rgb: 20 56 25;
	--color-accent: #2a7d36;
	--color-accent-rgb: 42 125 54;
	--color-muted: #8b8b8c;
	--color-surface: #ffffff;
	--color-black: #000000;
	--color-white: #ffffff;
	--color-focus: var(--color-accent);

	/* Typography */
	--font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
	--font-accent:
		'Arial Narrow', 'Archivo Narrow', 'Roboto Condensed', sans-serif;
	--font-body: 'Arial', 'Arimo', Helvetica, sans-serif;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-bold: 700;

	--leading-display: 0.92605;
	--leading-body: 1.063;
	--leading-normal: normal;

	/* Figma canvas → CSS scale (1 design px) */
	--scale: clamp(0.048px, calc(100vw / 11800), 0.104px);

	/* Derived type ramp (design px × scale) */
	--text-display: calc(700 * var(--scale));
	--text-display-accent: calc(750 * var(--scale));
	--text-feature: calc(310 * var(--scale));
	--text-store-eyebrow: calc(70 * var(--scale));
	--text-store-title: calc(200 * var(--scale));
	--text-store-lg-eyebrow: calc(92 * var(--scale));
	--text-store-lg-title: calc(270 * var(--scale));

	--tracking-display: calc(-70 * var(--scale));
	--tracking-display-accent: calc(-45 * var(--scale));
	--tracking-feature: calc(-21 * var(--scale));
	--tracking-store-eyebrow: calc(19.6 * var(--scale));
	--tracking-store-title: calc(-2 * var(--scale));
	--tracking-store-lg-eyebrow: calc(24 * var(--scale));
	--tracking-store-lg-title: calc(-4 * var(--scale));

	/* Space (Figma design-px × --scale) */
	--space-section: calc(2934 * var(--scale)); /* block → block */
	/* Shared header inset. Landing pulls its header up to this; interior pages pad to it. */
	--space-header-y: calc(720 * var(--scale));
	--space-landing-y-start: calc(1961 * var(--scale));
	--space-page-y: var(--space-landing-y-start) calc(1800 * var(--scale));
	--space-page-x: max(1.25rem, calc(240 * var(--scale)));
	--space-content-top: calc(800 * var(--scale)); /* phone top → heading */
	--space-hero-pad-top: calc(831 * var(--scale));
	--space-hero-pad-bottom: calc(1354 * var(--scale));
	--space-hero-brand-to-heading: calc(210 * var(--scale));
	--space-hero-heading-to-lede: calc(400 * var(--scale));
	--space-hero-to-cta: calc(720 * var(--scale)); /* min air above badge */
	--space-heading-to-body: calc(
		1667 * var(--scale)
	); /* heading → feature list */
	--space-feature-gap: calc(263 * var(--scale)); /* feature row → row */
	--space-feature-icon: calc(215 * var(--scale));
	--space-brand-gap: calc(75 * var(--scale));
	--space-overlap: calc(1462 * var(--scale));

	/* Size */
	--size-content: calc(11041 * var(--scale));
	/* Interior routes (header + .inner). Keep this shared or the nav drifts. */
	--size-page: calc(9800 * var(--scale));
	--size-phone: calc(6844 * var(--scale));
	--size-copy: calc(5034 * var(--scale));
	--size-brand: calc(372 * var(--scale));
	--size-wordmark-w: calc(1333 * var(--scale));
	--size-wordmark-h: calc(268 * var(--scale));
	--size-icon: calc(290 * var(--scale));
	--size-store-w: calc(1960 * var(--scale));
	--size-store-h: calc(598 * var(--scale));
	--size-store-lg-h: calc(840 * var(--scale));
	--size-mascot: calc(3200 * var(--scale));
	--radius-pill: calc(400 * var(--scale));
	--space-footer-gap: calc(720 * var(--scale));
	--space-footer-mascot-to-heading: calc(-280 * var(--scale));

	/* Breakpoints (reference only — used in media queries below) */
	--bp-tablet: 900px;
	--bp-phone: 480px;

	/* Motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast: 160ms;
	--duration-base: 220ms;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: #101010;
		--color-ink: #e6eee7;
		--color-ink-rgb: 230 238 231;
		--color-accent: #4caf58;
		--color-accent-rgb: 76 175 88;
		--color-muted: #9a9e9b;
		--color-surface: #1c1e1c;
		--color-focus: var(--color-accent);
	}
}

@media (max-width: 900px) {
	:root {
		--scale: clamp(0.055px, calc(100vw / 6200), 0.09px);
		--space-header-y: calc(480 * var(--scale));
		--space-landing-y-start: var(--space-header-y);
		--space-page-y: var(--space-landing-y-start) calc(1200 * var(--scale));
		--space-section: calc(1600 * var(--scale));
		--space-content-top: 0px;
		--space-hero-pad-top: 0px;
		--space-hero-pad-bottom: 0px;
		--space-hero-brand-to-heading: calc(120 * var(--scale));
		--space-hero-heading-to-lede: calc(280 * var(--scale));
		--space-hero-to-cta: calc(420 * var(--scale));
		--space-heading-to-body: calc(420 * var(--scale));
		--space-feature-gap: calc(180 * var(--scale));
		--space-footer-gap: calc(360 * var(--scale));
		--size-content: calc(7200 * var(--scale));
		--size-phone: calc(5200 * var(--scale));
		--size-mascot: calc(4200 * var(--scale));
		/* App Store CTAs read small on phone — bump ~20% vs desktop design-px */
		--size-store-w: calc(2360 * var(--scale));
		--size-store-h: calc(720 * var(--scale));
		--text-store-eyebrow: calc(84 * var(--scale));
		--text-store-title: calc(240 * var(--scale));
	}
}

@media (max-width: 480px) {
	:root {
		--scale: clamp(0.06px, calc(100vw / 5200), 0.085px);
		--text-display: calc(620 * var(--scale));
		--text-display-accent: calc(660 * var(--scale));
		--text-feature: calc(300 * var(--scale));
		--tracking-display: calc(-48 * var(--scale));
		--tracking-display-accent: calc(-32 * var(--scale));
		--tracking-feature: calc(-12 * var(--scale));
	}
}


/* ./fonts.css */
/* Self-hosted brand fonts (Sora) + system/open fallbacks */

@font-face {
	font-family: 'Sora';
	src:
		url('/assets/fonts/sora-400.woff2') format('woff2'),
		url('/assets/fonts/Sora-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Sora';
	src:
		url('/assets/fonts/sora-500.woff2') format('woff2'),
		url('/assets/fonts/Sora-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Sora';
	src:
		url('/assets/fonts/sora-700.woff2') format('woff2'),
		url('/assets/fonts/Sora-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Prefer local Arial Narrow; Archivo Narrow is the open webfont fallback */
@font-face {
	font-family: 'Arial Narrow';
	src:
		local('Arial Narrow Italic'),
		local('ArialNarrow-Italic'),
		url('/assets/fonts/archivo-narrow-400-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* Prefer local Arial; Arimo is metric-compatible open fallback */
@font-face {
	font-family: 'Arial';
	src:
		local('Arial'),
		local('ArialMT'),
		url('/assets/fonts/arimo-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}


/* ./base.css */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--color-bg);
}

body {
	margin: 0;
	min-height: 100%;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

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

button,
input,
textarea,
select {
	font: inherit;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4,
p {
	margin: 0;
}

:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ./components/brand.css */
.brand {
	display: flex;
	align-items: center;
	gap: var(--space-brand-gap);
	height: var(--size-brand);

	.avatar-frame {
		width: var(--size-brand);
		height: var(--size-brand);
		flex-shrink: 0;
	}

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

	.wordmark {
		width: var(--size-wordmark-w);
		height: var(--size-wordmark-h);
		flex-shrink: 0;
		background-color: var(--color-ink);
		-webkit-mask: url('/assets/images/cryptobud-wordmark.svg') center / contain
			no-repeat;
		mask: url('/assets/images/cryptobud-wordmark.svg') center / contain
			no-repeat;
	}
}


/* ./components/heading.css */
.heading {
	max-width: var(--size-copy);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: var(--text-display);
	line-height: var(--leading-display);
	letter-spacing: var(--tracking-display);
	color: var(--color-ink);
	overflow-wrap: normal;
	word-break: normal;

	.accent {
		font-family: var(--font-accent);
		font-weight: var(--weight-regular);
		font-style: italic;
		font-size: var(--text-display-accent);
		line-height: var(--leading-display);
		letter-spacing: var(--tracking-display-accent);
		color: var(--color-accent);

		.lead {
			color: var(--color-ink);
		}
	}

	&.stack > span {
		display: block;
	}
}


/* ./components/app-store-badge.css */
/* Root class matches filename: app-store-badge.css → .app-store-badge */

.app-store-badge {
	--pad-x: calc(279 * var(--scale));
	--gap: calc(105 * var(--scale));
	--logo: calc(271 * var(--scale));

	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--gap);
	width: var(--size-store-w);
	height: var(--size-store-h);
	padding-inline: var(--pad-x) calc(180 * var(--scale));
	/* Always a true capsule (ends are semicircles), regardless of height */
	border: none;
	border-radius: 999px;
	background: var(--color-black);
	color: var(--color-white);
	overflow: hidden;
	outline: none;
	transform: translateZ(0);
	-webkit-tap-highlight-color: transparent;
	transition:
		transform var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out),
		filter var(--duration-fast) var(--ease-out);

	/* Safari: filter:blur ignores overflow+radius; mask clips the fx layer
	   (not the link) so hover box-shadow stays intact. */
	.fx {
		position: absolute;
		inset: 0;
		z-index: 0;
		overflow: hidden;
		border-radius: inherit;
		pointer-events: none;
		background: var(--color-black);
		-webkit-mask-image: linear-gradient(#fff 0 0);
		mask-image: linear-gradient(#fff 0 0);
	}

	.logo {
		position: relative;
		z-index: 2;
		width: var(--logo);
		height: calc(335 * var(--scale));
		max-width: none;
		flex-shrink: 0;
		object-fit: contain;
	}

	.label {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 0;
		line-height: var(--leading-normal);
	}

	.eyebrow {
		font-family: var(--font-display);
		font-weight: var(--weight-regular);
		font-size: var(--text-store-eyebrow);
		letter-spacing: var(--tracking-store-eyebrow);
		text-transform: uppercase;
	}

	.title {
		margin-top: calc(-8 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-bold);
		font-size: var(--text-store-title);
		letter-spacing: var(--tracking-store-title);
	}

	.light {
		position: absolute;
		inset: -20% -40%;
		z-index: 1;
		background: linear-gradient(
			105deg,
			transparent 35%,
			rgb(255 255 255 / 0.08) 47%,
			rgb(255 255 255 / 0.22) 50%,
			rgb(255 255 255 / 0.08) 53%,
			transparent 65%
		);
		transform: translateX(-55%);
		filter: blur(22px);
		opacity: 0;

		&.is-flashing {
			opacity: 1;
			/* Duration must match appStoreLightFlashMs in lib/appStore.ts */
			animation: app-store-badge-light 1.1s var(--ease-out) 1 forwards;
		}
	}

	.liquid {
		position: absolute;
		inset: -40%;
		z-index: 0;
		opacity: 0.5;
		background:
			radial-gradient(
				circle at 30% 40%,
				rgb(56 196 78 / 0.82),
				transparent 42%
			),
			radial-gradient(
				circle at 70% 60%,
				rgb(255 255 255 / 0.22),
				transparent 38%
			),
			radial-gradient(circle at 50% 80%, rgb(34 148 52 / 0.55), transparent 45%);
		filter: blur(18px);
		animation: app-store-badge-liquid 7s ease-in-out infinite;
		transition: opacity var(--duration-base) var(--ease-out);
	}

	&:hover {
		transform: translateY(calc(-4 * var(--scale))) translateZ(0);
		box-shadow: 0 18px 40px rgb(var(--color-ink-rgb) / 0.18);

		.liquid {
			opacity: 0.95;
			animation-duration: 2.4s;
		}

		.light {
			background: linear-gradient(
				105deg,
				transparent 30%,
				rgb(255 255 255 / 0.12) 45%,
				rgb(255 255 255 / 0.38) 50%,
				rgb(255 255 255 / 0.12) 55%,
				transparent 70%
			);

			&.is-flashing {
				animation-duration: 0.85s;
			}
		}
	}

	&:focus-visible {
		outline: 2px solid var(--color-focus);
		outline-offset: 4px;
	}

	&:active {
		transform: translateY(calc(2 * var(--scale))) scale(0.97) translateZ(0);
		box-shadow: 0 4px 12px rgb(var(--color-ink-rgb) / 0.22);
		filter: brightness(0.92);

		.liquid {
			opacity: 0.55;
			animation-play-state: paused;
		}

		.light {
			animation-play-state: paused;
			opacity: 0.5;
		}
	}

	&.lg {
		--pad-x: calc(360 * var(--scale));
		--gap: calc(140 * var(--scale));
		--logo: calc(360 * var(--scale));
		width: fit-content;
		max-width: 100%;
		height: var(--size-store-lg-h);
		padding-inline: var(--pad-x);
		justify-content: center;
		box-sizing: border-box;

		.logo {
			height: calc(445 * var(--scale));
		}

		.eyebrow {
			font-size: var(--text-store-lg-eyebrow);
			letter-spacing: var(--tracking-store-lg-eyebrow);
		}

		.title {
			margin-top: calc(-12 * var(--scale));
			font-size: var(--text-store-lg-title);
			letter-spacing: var(--tracking-store-lg-title);
		}
	}

	&.open {
		width: fit-content;
		max-width: 100%;
		padding-inline: var(--pad-x);
		gap: 0.4em;
		font-family: var(--font-display);
		font-weight: var(--weight-bold);
		font-size: var(--text-store-title);
		letter-spacing: var(--tracking-store-title);
		white-space: nowrap;
		cursor: pointer;

		.label {
			white-space: nowrap;
		}

		.out {
			position: relative;
			z-index: 2;
			flex: none;
			width: 1em;
			height: 1em;
			overflow: visible;
			transition: transform var(--duration-fast) var(--ease-out);
		}

		&:hover .out,
		&:focus-visible .out {
			transform: translate(0.12em, -0.12em);
		}
	}

	&.forest {
		background: #0c1f0e;
		color: var(--color-white);

		.fx {
			background: #0c1f0e;
		}

		.liquid {
			opacity: 0.5;
			background:
				radial-gradient(
					circle at 28% 38%,
					rgb(56 196 78 / 0.82),
					transparent 44%
				),
				radial-gradient(
					circle at 72% 58%,
					rgb(255 255 255 / 0.18),
					transparent 38%
				),
				radial-gradient(
					circle at 48% 82%,
					rgb(34 148 52 / 0.55),
					transparent 48%
				);
		}

		&:hover {
			box-shadow: 0 22px 48px rgb(8 28 12 / 0.35);

			.liquid {
				opacity: 0.95;
			}
		}

		&:active {
			box-shadow: 0 6px 16px rgb(8 28 12 / 0.4);
		}
	}

	@media (max-width: 900px) {
		--pad-x: calc(320 * var(--scale));
		--gap: calc(120 * var(--scale));
		--logo: calc(310 * var(--scale));
		width: min(100%, var(--size-store-w));

		.logo {
			height: calc(380 * var(--scale));
		}

		&.lg {
			/*
			 * Match the hero capsule silhouette on mobile: same height, wider
			 * padding — not the tall desktop `.lg` proportions.
			 */
			--pad-x: calc(340 * var(--scale));
			--gap: calc(120 * var(--scale));
			--logo: calc(310 * var(--scale));
			width: fit-content;
			min-width: min(100%, calc(2400 * var(--scale)));
			max-width: 100%;
			height: var(--size-store-h);
			padding-inline: var(--pad-x);

			.logo {
				height: calc(380 * var(--scale));
			}

			.eyebrow {
				font-size: var(--text-store-eyebrow);
				letter-spacing: var(--tracking-store-eyebrow);
			}

			.title {
				margin-top: calc(-8 * var(--scale));
				font-size: var(--text-store-title);
				letter-spacing: var(--tracking-store-title);
			}
		}

		&.open {
			width: fit-content;
			min-width: 0;
			padding-inline: var(--pad-x);
		}
	}
}

@keyframes app-store-badge-light {
	from {
		transform: translateX(-55%);
		opacity: 0;
	}
	12%,
	88% {
		opacity: 1;
	}
	to {
		transform: translateX(55%);
		opacity: 0;
	}
}

@keyframes app-store-badge-liquid {
	0%,
	100% {
		transform: translate(-6%, -4%) scale(1) rotate(0deg);
	}
	33% {
		transform: translate(8%, 2%) scale(1.08) rotate(8deg);
	}
	66% {
		transform: translate(-2%, 8%) scale(0.96) rotate(-6deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.app-store-badge {
		.fx .light,
		.fx .liquid {
			animation: none;
		}

		.fx .light {
			opacity: 0;
		}

		.fx .liquid {
			opacity: 0.2;
			transform: none;
		}

		&:hover,
		&:active {
			transform: none;
			filter: none;
		}
	}
}


/* ./components/feature-list.css */
.feature-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-feature-gap);
	margin-top: var(--space-heading-to-body);

	.item {
		display: flex;
		align-items: center;
		gap: var(--space-feature-icon);
		min-height: var(--size-brand);

		img {
			width: auto;
			height: var(--size-icon);
			flex-shrink: 0;
			object-fit: contain;
		}

		p {
			font-family: var(--font-body);
			font-weight: var(--weight-regular);
			font-size: var(--text-feature);
			line-height: var(--leading-body);
			letter-spacing: var(--tracking-feature);
			color: var(--color-muted);
			white-space: nowrap;
		}
	}

	@media (max-width: 900px) {
		.item p {
			white-space: normal;
		}
	}
}


/* ./components/phone-mockup.css */
.phone-mockup {
	position: relative;
	width: 100%;
	max-width: var(--size-phone);
	margin-inline: auto;
	aspect-ratio: 6844 / 7362;
	overflow: hidden;
	/* Grid stretch would ignore aspect-ratio and squash landscape mockups. */
	align-self: start;

	picture {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
	}

	img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: 12% 50%;
		pointer-events: none;
		user-select: none;
	}
}


/* ./components/fomo-notification.css */
/* Root class matches filename: fomo-notification.css → .fomo-notification */
/* iOS liquid-glass lock-screen / banner replica — CSS only. */

.fomo-notification {
	/* Equal left/right gutters — avoid 100vw width math (scrollbar / asymmetry). */
	--fomo-gutter: max(
		1.15rem,
		env(safe-area-inset-left, 0px),
		env(safe-area-inset-right, 0px)
	);
	--fomo-w-max: 22.5rem;
	/* Stay under iOS 26's ~80vw sample threshold. 90vw paints the URL bar. */
	--fomo-w-safari: 79vw;
	--fomo-radius: 1.55rem;
	--fomo-pad: 0.7rem 0.85rem 0.75rem 0.7rem;
	--fomo-icon: 2.55rem;
	--fomo-gap: 0.65rem;
	--fomo-font:
		-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
		'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* Resting inset — enter animates `bottom` (not transform; transform kills frost). */
	--fomo-inset-bottom: max(
		1.75rem,
		calc(env(safe-area-inset-bottom, 0px) + 0.75rem)
	);
	--fomo-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
	--fomo-ease-leave: cubic-bezier(0.4, 0, 0.2, 1);
	--fomo-shadow:
		0 18px 40px rgb(var(--color-ink-rgb) / 0.16), 0 2px 6px rgb(0 0 0 / 0.08);

	--fomo-used-w: min(
		var(--fomo-w-max),
		var(--fomo-w-safari),
		calc(100vw - 2 * var(--fomo-gutter))
	);

	position: fixed;
	z-index: 40;
	bottom: calc(var(--fomo-inset-bottom) - 1.4rem);
	left: var(--fomo-gutter);
	right: auto;
	display: grid;
	grid-template-columns: var(--fomo-icon) minmax(0, 1fr);
	align-items: start;
	gap: var(--fomo-gap);
	width: var(--fomo-used-w);
	max-width: var(--fomo-w-safari);
	padding: var(--fomo-pad);
	border-radius: var(--fomo-radius);
	font-family: var(--fomo-font);
	color: rgb(20 20 22 / 0.96);
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	background-color: transparent;
	border: 1px solid rgb(255 255 255 / 0.55);
	box-shadow:
		var(--fomo-shadow),
		inset 0 1px 0 rgb(255 255 255 / 0.65),
		inset 0 -0.5px 0 rgb(255 255 255 / 0.2);

	opacity: 0;
	pointer-events: none;
	/* Leave is the default; enter overrides when .is-visible is set. */
	transition:
		opacity 480ms var(--fomo-ease-leave),
		bottom 480ms var(--fomo-ease-leave),
		box-shadow 180ms var(--ease-out);

	&.is-visible {
		opacity: 1;
		bottom: var(--fomo-inset-bottom);
		pointer-events: auto;
		transition:
			opacity 560ms var(--fomo-ease-enter),
			bottom 720ms var(--fomo-ease-enter),
			box-shadow 180ms var(--ease-out),
			border-color 160ms var(--ease-out);
	}

	.glass {
		position: absolute;
		inset: 0;
		z-index: 0;
		border-radius: inherit;
		overflow: hidden;
		pointer-events: none;
		background: rgb(255 255 255 / 0.28);
		backdrop-filter: blur(40px) saturate(180%);
		-webkit-backdrop-filter: blur(40px) saturate(180%);
		transition: background 160ms var(--ease-out);
		/* Safari: filter:blur on .shine ignores overflow+radius. */
		-webkit-mask-image: linear-gradient(#fff 0 0);
		mask-image: linear-gradient(#fff 0 0);

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			background: linear-gradient(
				180deg,
				rgb(255 255 255 / 0.22) 0%,
				rgb(255 255 255 / 0.06) 42%,
				rgb(255 255 255 / 0.1) 100%
			);
			box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28);
		}
	}

	.shine {
		position: absolute;
		inset: -40% -20%;
		background: linear-gradient(
			118deg,
			transparent 42%,
			rgb(255 255 255 / 0.1) 49%,
			rgb(255 255 255 / 0.28) 50.5%,
			rgb(255 255 255 / 0.1) 52%,
			transparent 60%
		);
		transform: translateX(-40%) rotate(2deg);
		animation: fomo-notification-shine 7.5s var(--ease-out) infinite;
		filter: blur(8px);
		opacity: 0.7;
	}

	.specular {
		position: absolute;
		top: 0;
		left: 10%;
		right: 10%;
		height: 38%;
		border-radius: 999px;
		background: linear-gradient(
			180deg,
			rgb(255 255 255 / 0.35),
			rgb(255 255 255 / 0)
		);
		filter: blur(8px);
		opacity: 0.4;
	}

	.icon-wrap {
		position: relative;
		z-index: 1;
		width: var(--fomo-icon);
		height: var(--fomo-icon);
		border-radius: 22.5%;
		overflow: hidden;
		background: transparent;
		box-shadow:
			0 1px 2px rgb(0 0 0 / 0.18),
			inset 0 0 0 0.5px rgb(255 255 255 / 0.18);
		flex-shrink: 0;
	}

	.icon {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.copy {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		min-width: 0;
		padding-top: 0.05rem;
	}

	.meta {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.5rem;
		margin-bottom: 0.08rem;
	}

	.app {
		font-size: 0.78rem;
		font-weight: 600;
		letter-spacing: 0.01em;
		color: rgb(60 60 67 / 0.72);
		line-height: 1.15;
	}

	.time {
		font-size: 0.72rem;
		font-weight: 400;
		color: rgb(60 60 67 / 0.55);
		line-height: 1.15;
		white-space: nowrap;
	}

	.title {
		font-size: 0.92rem;
		font-weight: 600;
		letter-spacing: -0.015em;
		line-height: 1.2;
		color: rgb(0 0 0 / 0.92);
	}

	.body {
		font-size: 0.86rem;
		font-weight: 400;
		letter-spacing: -0.01em;
		line-height: 1.28;
		color: rgb(60 60 67 / 0.88);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	&:hover {
		--fomo-shadow:
			0 22px 48px rgb(var(--color-ink-rgb) / 0.2), 0 2px 8px rgb(0 0 0 / 0.1);

		.shine {
			animation-duration: 2.4s;
		}
	}

	&:focus-visible {
		outline: 2px solid var(--color-focus);
		outline-offset: 4px;
	}

	/* Press without transform — keeps backdrop-filter frost alive. */
	&.is-visible:active {
		bottom: calc(var(--fomo-inset-bottom) - 0.2rem);
		border-color: rgb(255 255 255 / 0.4);
		--fomo-shadow:
			0 4px 14px rgb(var(--color-ink-rgb) / 0.14), 0 1px 3px rgb(0 0 0 / 0.1);
		box-shadow:
			var(--fomo-shadow),
			inset 0 1px 3px rgb(0 0 0 / 0.08),
			inset 0 1px 0 rgb(255 255 255 / 0.35);
		transition:
			bottom 110ms var(--ease-out),
			box-shadow 110ms var(--ease-out),
			border-color 110ms var(--ease-out);

		.glass {
			background: rgb(255 255 255 / 0.4);
			transition: background 110ms var(--ease-out);
		}
	}
}

@keyframes fomo-notification-shine {
	0% {
		transform: translateX(-45%) rotate(2deg);
	}
	55%,
	100% {
		transform: translateX(45%) rotate(2deg);
	}
}

@media (prefers-color-scheme: dark) {
	.fomo-notification {
		color: rgb(245 245 247 / 0.96);
		border-color: rgb(255 255 255 / 0.16);
		box-shadow:
			var(--fomo-shadow),
			inset 0 1px 0 rgb(255 255 255 / 0.18),
			inset 0 -0.5px 0 rgb(0 0 0 / 0.35);

		.glass {
			background: rgb(44 44 46 / 0.72);
		}

		.app,
		.time {
			color: rgb(235 235 245 / 0.6);
		}

		.title {
			color: rgb(255 255 255 / 0.96);
		}

		.body {
			color: rgb(235 235 245 / 0.82);
		}

		.shine {
			filter: blur(22px);
			opacity: 0.5;
		}

		&.is-visible:active {
			border-color: rgb(255 255 255 / 0.12);

			.glass {
				background: rgb(58 58 60 / 0.78);
			}
		}
	}
}

@media (max-width: 900px) {
	.fomo-notification {
		--fomo-gutter: max(
			0.75rem,
			env(safe-area-inset-left, 0px),
			env(safe-area-inset-right, 0px)
		);
		--fomo-w-max: 79vw;
	}
}

@media (max-width: 480px) {
	.fomo-notification {
		--fomo-radius: 1.35rem;
		--fomo-inset-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.fomo-notification {
		transition: opacity 200ms linear;
		bottom: var(--fomo-inset-bottom);

		&.is-visible {
			transition: opacity 200ms linear;
		}

		.shine {
			animation: none;
			opacity: 0;
		}
	}
}


/* ./components/footer-callout.css */
/* Root class matches filename: footer-callout.css → .footer-callout */

.footer-callout {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, var(--size-content));
	margin-inline: auto;
	margin-top: var(--space-section);
	padding-inline: var(--space-page-x);
	text-align: center;

	.mascot {
		position: relative;
		width: min(100%, var(--size-mascot));
		aspect-ratio: 16 / 9;
		margin-bottom: var(--space-footer-mascot-to-heading);
		overflow: hidden;
		pointer-events: none;
		user-select: none;
	}

	.clip {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center center;
		/* White plate of the clip → page background */
		mix-blend-mode: darken;
	}

	.heading {
		max-width: min(100%, calc(7200 * var(--scale)));
		margin-bottom: var(--space-footer-gap);
	}

	.app-store-badge {
		flex-shrink: 0;
	}

	@media (max-width: 900px) {
		.mascot {
			width: min(92%, calc(4800 * var(--scale)));
		}

		.heading {
			margin-bottom: calc(360 * var(--scale));
		}
	}

	@media (max-width: 480px) {
		.mascot {
			width: min(100%, calc(5200 * var(--scale)));
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.clip {
			/* Keep the poster frame; hide any residual playback. */
			visibility: visible;
		}
	}
}


/* ./components/site-footer.css */
/* Root class matches filename: site-footer.css → .site-footer */

.site-footer {
	width: min(100%, var(--size-content));
	margin-inline: auto;
	margin-top: calc(var(--space-section) / 2);
	padding-inline: var(--space-page-x);
	padding-bottom: calc(720 * var(--scale));
	text-align: center;

	.links {
		display: flex;
		justify-content: center;
		gap: calc(280 * var(--scale));
		margin-bottom: calc(280 * var(--scale));
		font-family: var(--font-accent);
		font-weight: var(--weight-medium);
		font-size: calc(180 * var(--scale));

		a {
			color: var(--color-accent);
			transition: opacity var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				opacity: 0.72;
			}
		}
	}

	.tagline {
		max-width: 36rem;
		margin-inline: auto;
		font-family: var(--font-body);
		font-size: clamp(0.875rem, 1.2vw, 0.95rem);
		line-height: var(--leading-body);
		color: var(--color-muted);

		a {
			color: inherit;
			text-decoration: underline;
			text-underline-offset: 0.18em;
			text-decoration-thickness: 1px;
			transition: opacity var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				opacity: 0.72;
			}
		}
	}
}


/* ./components/mcp-beacon.css */
/* Root class matches filename: mcp-beacon.css → .mcp-beacon */

.mcp-beacon {
	--mcp-beacon-line: rgb(var(--color-accent-rgb) / 0.28);
	--mcp-beacon-fill: rgb(var(--color-accent-rgb) / 0.14);
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto calc(720 * var(--scale));
	text-align: center;

	.prompt {
		margin: 0 0 calc(80 * var(--scale));
		font-family: var(--font-accent);
		font-style: italic;
		font-size: clamp(0.98rem, 1.5vw, 1.14rem);
		line-height: 1.2;
		color: var(--color-muted);
	}

	.stage {
		position: relative;
		display: grid;
		place-items: center;
		width: min(100%, 14rem);
		aspect-ratio: 1;

		> * {
			grid-area: 1 / 1;
			min-width: 0;
			max-width: 100%;
		}
	}

	.radar {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		pointer-events: none;
		overflow: visible;

		.outer,
		.mid,
		.inner,
		.sweep,
		.orbit {
			transform-box: view-box;
			transform-origin: 50% 50%;
		}
	}

	.ring {
		fill: none;
		stroke: var(--mcp-beacon-line);
		stroke-width: 0.65;
	}

	.ring.outer {
		stroke-dasharray: 2.6 3.4;
		animation: mcp-beacon-spin 22s linear infinite;
	}

	.ring.mid {
		stroke-dasharray: 1.6 2.8;
		opacity: 0.85;
		animation: mcp-beacon-spin 14s linear infinite reverse;
	}

	.ring.inner {
		opacity: 0.55;
	}

	.sweep {
		fill: var(--mcp-beacon-fill);
		animation: mcp-beacon-spin 5.6s linear infinite;
	}

	.orbit.far {
		animation: mcp-beacon-spin 9.5s linear infinite;
	}

	.orbit.mid-orbit {
		animation: mcp-beacon-spin 7.2s linear infinite reverse;
	}

	.orbit.near {
		animation: mcp-beacon-spin 11s linear infinite;
	}

	.bird {
		fill: var(--color-accent);
	}

	.chip {
		position: relative;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		min-height: 44px;
		padding: 0.72rem 1.05rem 0.72rem 0.9rem;
		border: 1px solid rgb(var(--color-ink-rgb) / 0.16);
		border-radius: 999px;
		background:
			radial-gradient(
				120% 160% at 12% 20%,
				rgb(var(--color-accent-rgb) / 0.12),
				transparent 58%
			),
			color-mix(in srgb, var(--color-surface) 86%, transparent);
		box-shadow:
			0 10px 28px rgb(var(--color-ink-rgb) / 0.08),
			inset 0 1px 0 color-mix(in srgb, var(--color-white) 22%, transparent);
		transition:
			transform var(--duration-base) var(--ease-out),
			border-color var(--duration-fast) var(--ease-out),
			box-shadow var(--duration-base) var(--ease-out);

		&:hover,
		&:focus-visible {
			border-color: rgb(var(--color-accent-rgb) / 0.45);
			box-shadow:
				0 14px 36px rgb(var(--color-ink-rgb) / 0.12),
				0 0 0 4px rgb(var(--color-accent-rgb) / 0.1),
				inset 0 1px 0 color-mix(in srgb, var(--color-white) 28%, transparent);
		}

		&:focus-visible {
			outline: 2px solid var(--color-focus);
			outline-offset: 4px;
		}
	}

	.stage:hover .chip,
	.stage:focus-within .chip {
		transform: translateY(-1px);
	}

	.stage:hover .radar .outer,
	.stage:hover .radar .mid,
	.stage:focus-within .radar .outer,
	.stage:focus-within .radar .mid {
		animation-duration: 6s;
	}

	.stage:hover .radar .sweep,
	.stage:focus-within .radar .sweep {
		animation-duration: 2.4s;
	}

	.reticle {
		position: absolute;
		inset: -5px;
		pointer-events: none;
	}

	.corner {
		position: absolute;
		width: 9px;
		height: 9px;
		border-color: var(--color-accent);
		border-style: solid;
		opacity: 0;
		transition:
			opacity var(--duration-base) var(--ease-out),
			inset var(--duration-base) var(--ease-out);
	}

	.corner.tl {
		top: -6px;
		left: -6px;
		border-width: 1.5px 0 0 1.5px;
	}

	.corner.tr {
		top: -6px;
		right: -6px;
		border-width: 1.5px 1.5px 0 0;
	}

	.corner.bl {
		bottom: -6px;
		left: -6px;
		border-width: 0 0 1.5px 1.5px;
	}

	.corner.br {
		right: -6px;
		bottom: -6px;
		border-width: 0 1.5px 1.5px 0;
	}

	.stage:hover .corner,
	.stage:focus-within .corner,
	.chip:focus-visible .corner {
		opacity: 1;
	}

	.stage:hover .corner.tl,
	.stage:focus-within .corner.tl,
	.chip:focus-visible .corner.tl {
		top: -9px;
		left: -9px;
	}

	.stage:hover .corner.tr,
	.stage:focus-within .corner.tr,
	.chip:focus-visible .corner.tr {
		top: -9px;
		right: -9px;
	}

	.stage:hover .corner.bl,
	.stage:focus-within .corner.bl,
	.chip:focus-visible .corner.bl {
		bottom: -9px;
		left: -9px;
	}

	.stage:hover .corner.br,
	.stage:focus-within .corner.br,
	.chip:focus-visible .corner.br {
		right: -9px;
		bottom: -9px;
	}

	.ping {
		flex: 0 0 auto;
		width: 0.55rem;
		height: 0.55rem;
		border-radius: 50%;
		background: var(--color-accent);
		box-shadow: 0 0 0 0 rgb(var(--color-accent-rgb) / 0.45);
		animation: mcp-beacon-ping 2.4s var(--ease-out) infinite;
	}

	.url {
		font-family:
			ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
		font-size: clamp(0.84rem, 2.2vw, 0.96rem);
		font-weight: 500;
		letter-spacing: -0.03em;
		color: var(--color-ink);
		white-space: nowrap;
	}

	.caret {
		flex: 0 0 auto;
		width: 1.5px;
		height: 1.05em;
		margin-left: -0.12rem;
		background: var(--color-accent);
		animation: mcp-beacon-caret 1.15s steps(1) infinite;
	}

	.copy {
		position: relative;
		z-index: 1;
		margin: calc(40 * var(--scale)) 0 0;
		padding: 0.2rem 0.45rem;
		border: 0;
		background: transparent;
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 0.68rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-muted);
		cursor: pointer;
		transition: color var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			color: var(--color-accent);
		}

		.done {
			display: none;
		}

		&.is-copied {
			color: var(--color-accent);

			.idle {
				display: none;
			}

			.done {
				display: inline;
			}
		}
	}
}

body:has(.get-app) .mcp-beacon {
	display: none;
}

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

@keyframes mcp-beacon-ping {
	0% {
		box-shadow: 0 0 0 0 rgb(var(--color-accent-rgb) / 0.42);
	}

	70% {
		box-shadow: 0 0 0 9px rgb(var(--color-accent-rgb) / 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgb(var(--color-accent-rgb) / 0);
	}
}

@keyframes mcp-beacon-caret {
	50% {
		opacity: 0;
	}
}

@media (max-width: 480px) {
	.mcp-beacon {
		.stage {
			width: min(100%, 13rem);
		}

		.url {
			font-size: 0.92rem;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.mcp-beacon {
		.caret {
			opacity: 1;
		}

		.ping {
			box-shadow: 0 0 0 3px rgb(var(--color-accent-rgb) / 0.18);
		}
	}
}


/* ./components/site-header.css */
/* Root class matches filename: site-header.css → .site-header */

.site-header {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(240 * var(--scale));
	flex-wrap: wrap;
	margin-bottom: calc(480 * var(--scale));

	.home {
		display: inline-flex;
		align-items: center;
		gap: calc(90 * var(--scale));
		min-height: 44px;
	}

	.mascot {
		display: block;
		width: calc(220 * var(--scale));
		height: calc(220 * var(--scale));
		flex-shrink: 0;
		overflow: hidden;
		border-radius: 50%;
		background: #003f0a;

		> span {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

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

	.wordmark {
		width: calc(900 * var(--scale));
		aspect-ratio: 1333 / 268;
		height: auto;
		flex-shrink: 0;
		background-color: var(--color-ink);
		-webkit-mask: url('/assets/images/cryptobud-wordmark.svg') center / contain
			no-repeat;
		mask: url('/assets/images/cryptobud-wordmark.svg') center / contain
			no-repeat;
	}

	.nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: calc(280 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(170 * var(--scale));
		padding-bottom: 0.07rem;

		a {
			color: var(--color-muted);
			transition: color var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible,
			&.is-current {
				color: var(--color-ink);
			}
		}

		> .nav-switchers {
			display: inline-flex;
			align-items: center;
			gap: 0;
			flex-shrink: 0;
		}
	}

	&.is-landing {
		justify-content: flex-end;
		margin-bottom: 0;

		.nav {
			margin-inline-start: auto;
		}
	}
}

@media (max-width: 295px) {
	.site-header {
		flex-wrap: nowrap;

		.nav {
			flex-wrap: nowrap;

			> a {
				display: none;
			}
		}
	}
}


/* ./components/locale-switcher.css */
/* Root class matches filename: locale-switcher.css → .locale-switcher */

.locale-switcher {
	position: relative;
	z-index: 1;
	flex-shrink: 0;

	&[open] {
		z-index: 4;
	}

	summary {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		margin: 0;
		padding: 0;
		list-style: none;
		border-radius: 50%;
		background: transparent;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	summary::-webkit-details-marker,
	summary::marker {
		display: none;
		content: none;
	}

	.flag {
		display: block;
		width: calc(220 * var(--scale));
		height: calc(220 * var(--scale));
		flex-shrink: 0;
		overflow: hidden;
		border-radius: 50%;
		outline: 1px solid color-mix(in srgb, var(--color-muted) 38%, transparent);
		outline-offset: 0;

		&.is-en-US {
			background: #fff;
		}

		&.is-pt-BR {
			background: #009b3a;
		}

		svg {
			display: block;
			width: 100%;
			height: 100%;
			overflow: visible;
		}
	}

	.panel {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 3;
		display: flex;
		flex-direction: column;
		min-width: 11.5rem;
		padding: 0.3rem;
		background: var(--color-surface);
		border-radius: 0.7rem;
		box-shadow:
			0 0 0 1px rgb(var(--color-ink-rgb) / 0.06),
			0 10px 28px rgb(var(--color-ink-rgb) / 0.1);
	}

	.option {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		width: 100%;
		min-height: 44px;
		padding: 0.3rem 0.7rem;
		border: 0;
		border-radius: 0.5rem;
		background: transparent;
		color: var(--color-muted);
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(150 * var(--scale));
		line-height: 1.2;
		text-align: left;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: color var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible,
		&.is-current {
			color: var(--color-ink);
		}
	}

	.name {
		min-width: 0;
	}
}


/* ./components/auth-user-menu.css */
/* Root class matches filename: auth-user-menu.css → .auth-user-menu */

.auth-user-menu {
	position: relative;
	z-index: 1;
	flex-shrink: 0;

	&[open] {
		z-index: 4;
	}

	summary {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		margin: 0;
		padding: 0;
		list-style: none;
		border-radius: 50%;
		background: transparent;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	summary::-webkit-details-marker,
	summary::marker {
		display: none;
		content: none;
	}

	.avatar {
		display: grid;
		place-items: center;
		width: calc(252 * var(--scale));
		height: calc(252 * var(--scale));
		flex-shrink: 0;
		overflow: hidden;
		border-radius: 50%;
		background: rgb(var(--color-accent-rgb) / 0.16);
		color: var(--color-accent);
		box-shadow: 0 4px 14px rgb(0 0 0 / 0.42);
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(132 * var(--scale));
		line-height: 1;
		letter-spacing: 0.02em;

		&.is-photo {
			display: block;
			object-fit: cover;
			background: rgb(var(--color-ink-rgb) / 0.08);
		}
	}

	&.is-billing .panel {
		min-width: 17.25rem;
	}

	.panel {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 3;
		display: flex;
		flex-direction: column;
		min-width: 12.25rem;
		padding: 0.35rem;
		background: var(--color-surface);
		border-radius: 0.75rem;
		box-shadow:
			0 0 0 1px rgb(var(--color-ink-rgb) / 0.06),
			0 10px 28px rgb(var(--color-ink-rgb) / 0.1);
	}

	.option {
		display: flex;
		align-items: center;
		gap: 0.55rem;
		width: 100%;
		min-height: 44px;
		padding: 0.35rem 0.75rem;
		border: 0;
		border-radius: 0.5rem;
		background: transparent;
		color: var(--color-muted);
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(150 * var(--scale));
		line-height: 1.2;
		text-align: left;
		white-space: nowrap;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition:
			color var(--duration-fast) var(--ease-out),
			background-color var(--duration-fast) var(--ease-out);

		&.is-manage {
			color: var(--color-ink);
		}

		&:hover,
		&:focus-visible {
			color: var(--color-ink);
			background: rgb(var(--color-ink-rgb) / 0.05);
		}
	}

	.icon {
		width: 1.05rem;
		height: 1.05rem;
		flex-shrink: 0;
	}

	.name {
		min-width: 0;
		white-space: nowrap;
	}
}


/* ./components/faq.css */
/* Root class matches filename: faq.css → .faq */

.faq {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: min(100%, var(--size-content));
	margin-inline: auto;
	margin-top: calc(var(--space-section) / 2);
	padding-inline: var(--space-page-x);
	text-align: left;

	/* Subtle break between download callout and FAQ */
	&::before {
		content: '';
		display: block;
		width: min(28%, calc(1800 * var(--scale)));
		height: 1px;
		margin-inline: auto;
		margin-bottom: calc(var(--space-section) / 2);
		background: rgb(var(--color-ink-rgb) / 0.14);
	}

	.heading {
		text-align: center;
		margin-inline: auto;
		margin-bottom: var(--space-footer-gap);
	}

	.all {
		align-self: center;
		margin-top: calc(420 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(170 * var(--scale));
		letter-spacing: calc(15 * var(--scale));
		color: var(--color-muted);
		transition: opacity var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			opacity: 0.72;
		}

		&:focus-visible {
			outline: 2px solid var(--color-focus);
			outline-offset: 4px;
		}
	}
}


/* ./components/faq-accordion.css */
/* Root class matches filename: faq-accordion.css → .faq-accordion */

.faq-accordion {
	display: flex;
	flex-direction: column;
	width: min(100%, calc(7200 * var(--scale)));
	margin-inline: auto;
	border-top: 1px solid rgb(var(--color-ink-rgb) / 0.12);
	text-align: left;

	> li {
		border-bottom: 1px solid rgb(var(--color-ink-rgb) / 0.12);
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: calc(240 * var(--scale));
		width: 100%;
		padding-block: calc(280 * var(--scale));
		padding-inline: 0;
		border: 0;
		background: transparent;
		color: inherit;
		text-align: left;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: color var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			color: var(--color-accent);

			.icon {
				border-color: var(--color-accent);
				color: var(--color-accent);
			}
		}

		&:focus-visible {
			outline: 2px solid var(--color-focus);
			outline-offset: 4px;
		}
	}

	.question {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(340 * var(--scale));
		line-height: 1.15;
		letter-spacing: calc(-12 * var(--scale));
		color: inherit;
	}

	.icon {
		position: relative;
		flex-shrink: 0;
		width: calc(280 * var(--scale));
		height: calc(280 * var(--scale));
		border: 1.5px solid rgb(var(--color-ink-rgb) / 0.28);
		border-radius: 50%;
		color: var(--color-ink);
		transition:
			border-color var(--duration-base) var(--ease-out),
			color var(--duration-base) var(--ease-out),
			transform var(--duration-base) var(--ease-out);
	}

	.bar {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 42%;
		height: 1.5px;
		background: currentColor;
		border-radius: 999px;
		transition: transform var(--duration-base) var(--ease-out);

		&.horizontal {
			transform: translate(-50%, -50%);
		}

		&.vertical {
			transform: translate(-50%, -50%) rotate(90deg);
		}
	}

	.is-open {
		.item {
			color: var(--color-accent);
		}

		.icon {
			border-color: var(--color-accent);
			color: var(--color-accent);
			transform: rotate(90deg);
		}

		.bar.vertical {
			transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
		}
	}

	.panel {
		display: grid;
		grid-template-rows: 0fr;
		opacity: 0;
		overflow: hidden;
		transition:
			grid-template-rows var(--duration-base) var(--ease-out),
			opacity var(--duration-base) var(--ease-out);
	}

	.is-open .panel {
		grid-template-rows: 1fr;
		opacity: 1;
	}

	.panel-inner {
		min-height: 0;
		overflow: hidden;
	}

	.answer {
		max-width: 42rem;
		padding-bottom: calc(280 * var(--scale));
		padding-inline: calc(15 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-regular);
		font-size: calc(220 * var(--scale));
		line-height: 1.5;
		letter-spacing: calc(-4 * var(--scale));
		color: color-mix(in srgb, var(--color-ink) 68%, var(--color-muted));

		a {
			color: var(--color-accent);
			text-decoration: underline;
			text-underline-offset: 0.18em;
			text-decoration-thickness: 1px;
			transition: opacity var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				opacity: 0.72;
			}
		}
	}

	.more {
		display: inline-flex;
		align-items: center;
		gap: 0.28em;
		margin-left: 0.15em;
		font-weight: var(--weight-medium);
		font-size: calc(220 * var(--scale));
		color: var(--color-accent);
		white-space: nowrap;
		transition: opacity var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			opacity: 0.72;
		}

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

	.arrow {
		flex-shrink: 0;
		width: 0.85em;
		height: 0.85em;
	}

	&.is-quiet {
		.item {
			padding-block: calc(180 * var(--scale));
			gap: calc(115 * var(--scale));

			&:hover,
			&:focus-visible {
				color: inherit;

				.icon {
					border-color: var(--color-accent);
					color: var(--color-accent);
				}
			}
		}

		.question {
			font-size: clamp(1.02rem, 1.45vw, 1.16rem);
			line-height: 1.35;
			letter-spacing: -0.02em;
		}

		.icon {
			width: 1.2em;
			height: 1.2em;
			border-width: 1px;
		}

		.is-open .item {
			color: inherit;
		}

		.answer {
			max-width: 40rem;
			padding-bottom: calc(200 * var(--scale));
			font-size: clamp(1.02rem, 1.4vw, 1.12rem);
			line-height: 1.55;
		}
	}

	@media (max-width: 900px) {
		.question {
			font-size: calc(300 * var(--scale));
		}

		&.is-quiet {
			.question {
				font-size: 1.05rem;
			}

			.item {
				padding-block: calc(150 * var(--scale));
			}

			.answer {
				font-size: 1.02rem;
				padding-bottom: calc(115 * var(--scale));
			}
		}

		.answer {
			font-size: calc(240 * var(--scale));
			padding-bottom: calc(220 * var(--scale));
		}

		.item {
			padding-block: calc(220 * var(--scale));
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.icon,
		.bar,
		.panel {
			transition: none;
		}
	}
}


/* ./components/venue-logos.css */
/* Root class matches filename: venue-logos.css → .venue-logos */

.venue-logos {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, var(--size-content));
	margin-inline: auto;
	padding-inline: var(--space-page-x);
	padding-block: var(--space-section);
	text-align: center;
	color: var(--color-muted);

	.prompt {
		margin: 0 0 calc(280 * var(--scale));
		font-family: var(--font-accent);
		font-style: italic;
		font-size: clamp(0.98rem, 1.5vw, 1.14rem);
		line-height: 1.2;
	}

	ul {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: calc(960 * var(--scale));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 8.5rem;
	}

	.mark {
		display: block;
		width: 64px;
		height: 64px;
		color: var(--color-muted);
	}

	.name {
		margin-top: calc(140 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(170 * var(--scale));
		letter-spacing: calc(8 * var(--scale));
		color: var(--color-muted);
	}

	.note {
		margin-top: calc(40 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 0.68rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.is-soon {
		.mark,
		.name {
			opacity: 0.55;
		}
	}
}

@media (max-width: 480px) {
	.venue-logos {
		ul {
			gap: 1.4rem;
		}

		.mark {
			width: 52px;
			height: 52px;
		}
	}
}


/* ./components/prose.css */
/* Root class matches filename: prose.css → .prose */

.prose {
	max-width: 40rem;
	font-family: var(--font-body);
	font-size: clamp(1.08rem, 1.55vw, 1.22rem);
	line-height: 1.75;
	letter-spacing: -0.01em;
	color: var(--color-ink);

	> :first-child {
		margin-top: 0;
	}

	> :last-child {
		margin-bottom: 0;
	}

	p {
		margin: 0 0 1.25em;
	}

	h2,
	h3,
	h4 {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		letter-spacing: -0.03em;
		color: var(--color-ink);
		text-wrap: balance;
	}

	h2 {
		margin: 2.75em 0 0.75em;
		font-size: clamp(1.5rem, 2.5vw, 1.95rem);
		line-height: 1.2;
	}

	h3 {
		margin: 2.5em 0 0.7em;
		font-size: clamp(1.28rem, 2vw, 1.5rem);
		line-height: 1.25;
	}

	h4 {
		margin: 2em 0 0.55em;
		font-size: clamp(1.1rem, 1.55vw, 1.2rem);
		line-height: 1.3;
	}

	h2 + p,
	h3 + p,
	h4 + p,
	h2 + ul,
	h3 + ul,
	h4 + ul,
	h2 + ol,
	h3 + ol,
	h4 + ol {
		margin-top: 0;
	}

	ul,
	ol {
		margin: 0 0 1.5em;
		padding-left: 1.4em;
	}

	ul {
		list-style: disc;
	}

	ol {
		list-style: decimal;
	}

	li {
		margin: 0.7em 0;
		padding-left: 0.25em;
		line-height: 1.6;
	}

	li > ul,
	li > ol {
		margin: 0.45em 0 0.65em;
	}

	strong {
		font-weight: var(--weight-bold);
	}

	em {
		font-style: italic;
	}

	a {
		color: var(--color-accent);
		text-decoration: underline;
		text-underline-offset: 0.18em;
		text-decoration-thickness: 1px;
		transition: opacity var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			opacity: 0.72;
		}
	}

	hr {
		margin: 2.4em 0;
		border: 0;
		border-top: 1px solid rgb(var(--color-ink-rgb) / 0.12);
	}

	blockquote {
		margin: 0 0 1.35em;
		padding: 0.15em 0 0.15em 1em;
		border-left: 2px solid rgb(var(--color-ink-rgb) / 0.18);
		color: var(--color-muted);
	}

	code {
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		font-size: 0.92em;
		padding: 0.1em 0.35em;
		border-radius: 0.3em;
		background: rgb(var(--color-ink-rgb) / 0.06);
	}

	pre {
		margin: 0 0 1.35em;
		padding: 1.05em 1.2em;
		overflow-x: auto;
		border-radius: 0.75rem;
		background: var(--color-surface);
		color: var(--color-ink);
		line-height: 1.55;
		white-space: pre-wrap;
		overflow-wrap: anywhere;
		tab-size: 2;
		box-shadow: inset 0 0 0 1px rgb(var(--color-ink-rgb) / 0.12);

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

		code {
			padding: 0;
			background: transparent;
			color: inherit;
			font-size: 0.82em;
			line-height: inherit;
			white-space: inherit;
			overflow-wrap: inherit;
		}
	}
}


/* ./components/code-copy.css */
/* Root class matches filename: code-copy.css → .code-copy */

.code-copy {
	position: relative;
	margin: 0 0 1.35em;

	.copy {
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		z-index: 1;
		display: grid;
		place-items: center;
		width: 1.85rem;
		height: 1.85rem;
		padding: 0;
		border: 0;
		border-radius: 0.4rem;
		background: color-mix(in srgb, var(--color-bg) 92%, transparent);
		color: var(--color-muted);
		cursor: pointer;
		transition:
			color var(--duration-fast) var(--ease-out),
			background var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			color: var(--color-accent);
			background: var(--color-surface);
		}

		&:focus-visible {
			outline: 2px solid var(--color-focus);
			outline-offset: 2px;
		}

		.glyph {
			grid-area: 1 / 1;
			width: 0.95rem;
			height: 0.95rem;
			transition:
				opacity var(--duration-base) var(--ease-out),
				transform var(--duration-base) var(--ease-out);
		}

		.idle {
			opacity: 1;
			transform: scale(1) rotate(0deg);
		}

		.done {
			opacity: 0;
			transform: scale(0.45) rotate(-24deg);
		}

		&.is-copied {
			color: var(--color-accent);

			.idle {
				opacity: 0;
				transform: scale(0.45) rotate(24deg);
			}

			.done {
				opacity: 1;
				transform: scale(1) rotate(0deg);
			}
		}
	}

	pre {
		margin: 0;
		padding-right: 2.8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.code-copy .copy .glyph {
		transition: opacity 0.01ms;
		transform: none;
	}
}


/* ./components/heading-link.css */
/* Root class matches filename: heading-link.css → .heading-link */

.heading-link {
	scroll-margin-top: 5rem;

	.copy {
		display: inline-grid;
		place-items: center;
		width: 1.15em;
		height: 1.15em;
		margin-left: 0.28em;
		vertical-align: -0.12em;
		border-radius: 0.28em;
		color: var(--color-muted);
		text-decoration: none;
		opacity: 0;
		cursor: pointer;
		transition:
			color var(--duration-fast) var(--ease-out),
			opacity var(--duration-fast) var(--ease-out),
			background var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			color: var(--color-accent);
			opacity: 1;
		}

		&:focus-visible {
			outline: 2px solid var(--color-focus);
			outline-offset: 2px;
		}

		.glyph {
			grid-area: 1 / 1;
			width: 0.72em;
			height: 0.72em;
			transition:
				opacity var(--duration-base) var(--ease-out),
				transform var(--duration-base) var(--ease-out);
		}

		.idle {
			opacity: 1;
			transform: scale(1) rotate(0deg);
		}

		.done {
			opacity: 0;
			transform: scale(0.45) rotate(-24deg);
		}

		&.is-copied {
			color: var(--color-accent);
			opacity: 1;

			.idle {
				opacity: 0;
				transform: scale(0.45) rotate(24deg);
			}

			.done {
				opacity: 1;
				transform: scale(1) rotate(0deg);
			}
		}
	}

	&:hover .copy,
	&:focus-within .copy {
		opacity: 1;
	}
}

.prose .heading-link .copy {
	color: var(--color-muted);
	text-decoration: none;

	&:hover,
	&:focus-visible {
		color: var(--color-accent);
		opacity: 1;
	}
}

@media (hover: none) {
	.heading-link .copy {
		opacity: 0.45;
	}
}

@media (prefers-reduced-motion: reduce) {
	.heading-link .copy .glyph {
		transition: opacity 0.01ms;
		transform: none;
	}
}


/* ./components/loop.css */
/* Root class matches filename: loop.css → .loop */

.loop {
	--loop-label-gap: 2.5rem;

	display: flex;
	flex-direction: column;
	gap: 2.4em;
	margin: 0 0 2.4em;
	padding: 3.4rem 0 0.4rem;
	border: 0;
	overflow: visible;

	.stage {
		position: relative;
		width: min(100%, 26rem);
		margin-inline: auto;
		aspect-ratio: 1;
		overflow: visible;
	}

	.ring {
		display: block;
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	.arc-track,
	.arc-fill {
		fill: none;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.arc-track {
		stroke: rgb(var(--color-ink-rgb) / 0.14);
		stroke-width: 2.7;
	}

	.arc-fill {
		stroke: var(--color-accent);
		stroke-width: 2.7;
	}

	.dot-track {
		fill: var(--color-bg);
		stroke: rgb(var(--color-accent-rgb) / 0.38);
		stroke-width: 0.7;
	}

	.dot-fill {
		fill: var(--color-accent);
	}

	ol {
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li {
		position: absolute;
		left: var(--label-x);
		top: var(--label-y);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.2em;
		width: 8.4rem;
		margin: 0;
		padding: 0;
		transform: translate(-50%, -50%);
		text-align: center;
		line-height: 1.25;
	}

	.mark,
	.seg {
		display: none;
	}

	.copy {
		display: contents;
	}

	.index {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 0.72rem;
		letter-spacing: 0.08em;
		color: var(--color-muted);
	}

	strong {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 1.05rem;
		letter-spacing: -0.03em;
		color: var(--color-ink);
	}

	.detail {
		max-width: 8.2rem;
		font-family: var(--font-body);
		font-size: 0.82rem;
		line-height: 1.35;
		color: var(--color-muted);
	}

	figcaption {
		margin: 2em 0 0;
		font-family: var(--font-display);
		font-size: 0.78rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: center;
		color: var(--color-muted);
	}
}

.prose .loop {
	ol {
		margin: 0;
		padding: 0;
	}

	li {
		margin: 0;
		line-height: 1.25;
	}
}

@media (min-width: 641px) {
	.loop[data-steps='4'] {
		li[data-i='0'] {
			transform: translate(-50%, calc(-100% - var(--loop-label-gap)));
		}

		li[data-i='1'] {
			align-items: flex-start;
			transform: translate(var(--loop-label-gap), -50%);
			text-align: left;
		}

		li[data-i='2'] {
			transform: translate(-50%, var(--loop-label-gap));
		}

		li[data-i='3'] {
			align-items: flex-end;
			transform: translate(calc(-100% - var(--loop-label-gap)), -50%);
			text-align: right;
		}
	}
}

@media (max-width: 640px) {
	.loop {
		--loop-cycle: 8s;
		--loop-ease: cubic-bezier(0.4, 0, 0.2, 1);
		gap: 1.8em;
		padding: 0;

		.stage {
			aspect-ratio: auto;
			width: 100%;
		}

		.ring {
			display: none;
		}

		ol {
			position: static;
			display: flex;
			flex-direction: column;
		}

		li {
			position: relative;
			left: auto;
			top: auto;
			display: grid;
			grid-template-columns: 1.15rem 1fr;
			column-gap: 0.95rem;
			align-items: start;
			width: auto;
			transform: none;
			text-align: left;
			padding-bottom: 1.45rem;
		}

		li:last-child {
			padding-bottom: 0;
		}

		.mark,
		.seg {
			display: block;
		}

		.mark {
			position: relative;
			grid-column: 1;
			width: 0.92rem;
			height: 0.92rem;
			margin-top: 0.18rem;
			justify-self: center;
		}

		.mark-ring,
		.mark-fill {
			position: absolute;
			inset: 0;
			border-radius: 50%;
		}

		.mark-ring {
			border: 1.5px solid rgb(var(--color-accent-rgb) / 0.38);
			background: var(--color-bg);
		}

		.mark-fill {
			background: var(--color-accent);
			opacity: 0;
			transform: scale(0.28);
		}

		.seg {
			position: absolute;
			left: 0.575rem;
			top: 1.22rem;
			bottom: 0.18rem;
			width: 0.28rem;
			transform: translateX(-50%);
		}

		.seg-track,
		.seg-fill {
			position: absolute;
			inset: 0;
			border-radius: 999px;
		}

		.seg-track {
			background: rgb(var(--color-ink-rgb) / 0.14);
		}

		.seg-fill {
			background: var(--color-accent);
			transform: scaleY(0);
			transform-origin: top;
		}

		.copy {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 0.18em;
			min-width: 0;
		}

		.index {
			min-width: 0;
		}

		.detail {
			max-width: none;
		}
	}

	.loop[data-steps='4'] {
		li[data-i='0'] .mark-fill {
			animation: loop-mobile-origin var(--loop-cycle) var(--loop-ease) infinite;
		}

		li[data-i='0'] .seg-fill {
			animation: loop-mobile-rail-0 var(--loop-cycle) var(--loop-ease) infinite;
		}

		li[data-i='1'] .mark-fill {
			animation: loop-mobile-dot-1 var(--loop-cycle) var(--loop-ease) infinite;
		}

		li[data-i='1'] .seg-fill {
			animation: loop-mobile-rail-1 var(--loop-cycle) var(--loop-ease) infinite;
		}

		li[data-i='2'] .mark-fill {
			animation: loop-mobile-dot-2 var(--loop-cycle) var(--loop-ease) infinite;
		}

		li[data-i='2'] .seg-fill {
			animation: loop-mobile-rail-2 var(--loop-cycle) var(--loop-ease) infinite;
		}

		li[data-i='3'] .mark-fill {
			animation: loop-mobile-dot-3 var(--loop-cycle) var(--loop-ease) infinite;
		}
	}
}

@keyframes loop-mobile-origin {
	0%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.28);
	}
}

@keyframes loop-mobile-rail-0 {
	0% {
		transform: scaleY(0);
	}

	18%,
	86% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0);
	}
}

@keyframes loop-mobile-dot-1 {
	0% {
		opacity: 0;
		transform: scale(0.28);
	}

	18%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.28);
	}
}

@keyframes loop-mobile-rail-1 {
	0%,
	20% {
		transform: scaleY(0);
	}

	38%,
	86% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0);
	}
}

@keyframes loop-mobile-dot-2 {
	0%,
	20% {
		opacity: 0;
		transform: scale(0.28);
	}

	38%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.28);
	}
}

@keyframes loop-mobile-rail-2 {
	0%,
	40% {
		transform: scaleY(0);
	}

	58%,
	86% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0);
	}
}

@keyframes loop-mobile-dot-3 {
	0%,
	40% {
		opacity: 0;
		transform: scale(0.28);
	}

	58%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.28);
	}
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
	.loop[data-steps='4'] {
		.mark-fill,
		.seg-fill {
			animation: none;
		}

		.mark-fill {
			opacity: 1;
			transform: scale(1);
		}

		.seg-fill {
			transform: scaleY(1);
		}
	}
}


/* ./components/path.css */
/* Root class matches filename: path.css → .path */

.path {
	--path-cycle: 10s;
	--path-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--path-mark: 0.92rem;
	display: flex;
	flex-direction: column;
	gap: 2em;
	margin: 0.4em 0 2.8em;
	padding: 0.4em 0 0;
	border: 0;

	.stage {
		width: 100%;
		padding-block: 2.6em 0.35em;
	}

	ol {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 10.2rem minmax(0, 1fr) 10.2rem minmax(
				0,
				1fr
			);
		align-items: start;
		column-gap: 0.15rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.node,
	.span {
		margin: 0;
		padding: 0;
	}

	.node {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.7em;
		text-align: center;
	}

	.mark {
		position: relative;
		width: var(--path-mark);
		height: var(--path-mark);
	}

	.mark-ring,
	.mark-fill {
		position: absolute;
		inset: 0;
		border-radius: 50%;
	}

	.mark-ring {
		border: 1.5px solid rgb(var(--color-accent-rgb) / 0.38);
		background: var(--color-bg);
	}

	.mark-fill {
		background: var(--color-accent);
		opacity: 0.22;
		transform: scale(0.42);
	}

	.copy {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.35em;
		min-width: 0;
	}

	strong {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 1.05rem;
		letter-spacing: -0.03em;
		color: var(--color-ink);
	}

	.detail {
		max-width: 7.4rem;
		font-family: var(--font-body);
		font-size: 0.82rem;
		line-height: 1.35;
		color: var(--color-muted);
	}

	.span {
		position: relative;
		display: flex;
		align-items: center;
		height: var(--path-mark);
		padding-inline: 0.35rem;
	}

	.out,
	.in {
		position: absolute;
		left: 50%;
		width: max-content;
		max-width: 6.8rem;
		font-family: var(--font-display);
		font-size: 0.7rem;
		letter-spacing: 0.03em;
		line-height: 1.3;
		text-align: center;
		text-wrap: balance;
		color: var(--color-muted);
		opacity: 0.42;
		transform: translateX(-50%);
	}

	.out {
		bottom: 100%;
		margin-bottom: 0.7em;
	}

	.in {
		top: 100%;
		margin-top: 0.7em;
	}

	.rail {
		position: relative;
		width: 100%;
		height: 0.32rem;
	}

	.rail-track,
	.rail-fwd,
	.rail-back {
		position: absolute;
		inset: 0;
		border-radius: 999px;
	}

	.rail-track {
		background: rgb(var(--color-ink-rgb) / 0.14);
	}

	.rail-fwd,
	.rail-back {
		background: var(--color-accent);
		transform: scaleX(0);
	}

	.rail-fwd {
		transform-origin: left center;
	}

	.rail-back {
		transform-origin: right center;
	}

	.pulse {
		position: absolute;
		top: 50%;
		left: 0;
		width: 0.48rem;
		height: 0.48rem;
		border-radius: 50%;
		background: var(--color-accent);
		opacity: 0;
		transform: translate(-50%, -50%);
	}

	figcaption {
		margin: 2em 0 0;
		font-family: var(--font-display);
		font-size: 0.78rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: center;
		color: var(--color-muted);
	}
}

.prose .path {
	ol {
		margin: 0;
		padding: 0;
	}

	li {
		margin: 0;
	}
}

.path[data-motion='ok'] {
	.node[data-i='0'] .mark-fill {
		animation: path-dot-left var(--path-cycle) var(--path-ease) infinite;
	}

	.node[data-i='1'] .mark-fill {
		animation: path-dot-mid var(--path-cycle) var(--path-ease) infinite;
	}

	.node[data-i='2'] .mark-fill {
		animation: path-dot-right var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='0'] .out {
		animation: path-label-0 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='0'] .in {
		animation: path-label-3 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='1'] .out {
		animation: path-label-1 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='1'] .in {
		animation: path-label-2 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='0'] .rail-fwd {
		animation: path-fwd-0 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='1'] .rail-fwd {
		animation: path-fwd-1 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='0'] .rail-back {
		animation: path-back-0 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='1'] .rail-back {
		animation: path-back-1 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='0'] .pulse {
		animation: path-pulse-0 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='1'] .pulse {
		animation: path-pulse-1 var(--path-cycle) var(--path-ease) infinite;
	}
}

.path[data-motion='reduce'] {
	.mark-fill {
		opacity: 1;
		transform: scale(1);
	}

	.rail-fwd,
	.rail-back {
		transform: scaleX(1);
	}

	.out,
	.in {
		opacity: 1;
	}

	.pulse {
		display: none;
	}
}

@keyframes path-label-0 {
	0%,
	22% {
		opacity: 1;
		color: var(--color-ink);
	}

	28%,
	100% {
		opacity: 0.42;
		color: var(--color-muted);
	}
}

@keyframes path-label-1 {
	0%,
	22% {
		opacity: 0.42;
	}

	25%,
	47% {
		opacity: 1;
		color: var(--color-ink);
	}

	53%,
	100% {
		opacity: 0.42;
		color: var(--color-muted);
	}
}

@keyframes path-label-2 {
	0%,
	47% {
		opacity: 0.42;
	}

	50%,
	72% {
		opacity: 1;
		color: var(--color-ink);
	}

	78%,
	100% {
		opacity: 0.42;
		color: var(--color-muted);
	}
}

@keyframes path-label-3 {
	0%,
	72% {
		opacity: 0.42;
	}

	75%,
	97% {
		opacity: 1;
		color: var(--color-ink);
	}

	100% {
		opacity: 0.42;
		color: var(--color-muted);
	}
}

@keyframes path-fwd-0 {
	0% {
		transform: scaleX(0);
	}

	18%,
	22% {
		transform: scaleX(1);
	}

	28%,
	100% {
		transform: scaleX(0);
	}
}

@keyframes path-fwd-1 {
	0%,
	25% {
		transform: scaleX(0);
	}

	43%,
	47% {
		transform: scaleX(1);
	}

	53%,
	100% {
		transform: scaleX(0);
	}
}

@keyframes path-back-0 {
	0%,
	75% {
		transform: scaleX(0);
	}

	93%,
	97% {
		transform: scaleX(1);
	}

	100% {
		transform: scaleX(0);
	}
}

@keyframes path-back-1 {
	0%,
	50% {
		transform: scaleX(0);
	}

	68%,
	72% {
		transform: scaleX(1);
	}

	78%,
	100% {
		transform: scaleX(0);
	}
}

@keyframes path-pulse-0 {
	0% {
		opacity: 0;
		left: 0;
	}

	4%,
	18% {
		opacity: 1;
		left: 100%;
	}

	22% {
		opacity: 0;
		left: 100%;
	}

	75% {
		opacity: 0;
		left: 100%;
	}

	79%,
	93% {
		opacity: 1;
		left: 0;
	}

	97%,
	100% {
		opacity: 0;
		left: 0;
	}
}

@keyframes path-pulse-1 {
	0%,
	25% {
		opacity: 0;
		left: 0;
	}

	29%,
	43% {
		opacity: 1;
		left: 100%;
	}

	47% {
		opacity: 0;
		left: 100%;
	}

	50% {
		opacity: 0;
		left: 100%;
	}

	54%,
	68% {
		opacity: 1;
		left: 0;
	}

	72%,
	100% {
		opacity: 0;
		left: 0;
	}
}

@keyframes path-dot-left {
	0%,
	72% {
		opacity: 0.22;
		transform: scale(0.42);
	}

	75%,
	97% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0.22;
		transform: scale(0.42);
	}
}

@keyframes path-dot-mid {
	0%,
	18% {
		opacity: 0.22;
		transform: scale(0.42);
	}

	22%,
	72% {
		opacity: 1;
		transform: scale(1);
	}

	78%,
	100% {
		opacity: 0.22;
		transform: scale(0.42);
	}
}

@keyframes path-dot-right {
	0%,
	43% {
		opacity: 0.22;
		transform: scale(0.42);
	}

	47%,
	72% {
		opacity: 1;
		transform: scale(1);
	}

	78%,
	100% {
		opacity: 0.22;
		transform: scale(0.42);
	}
}

@media (max-width: 640px) {
	.path {
		gap: 1.6em;
		margin-bottom: 2.2em;

		.stage {
			padding-block: 0;
		}

		ol {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			row-gap: 0;
		}

		.node {
			display: grid;
			grid-template-columns: 1.25rem 1fr;
			column-gap: 1.05rem;
			row-gap: 0;
			align-items: start;
			text-align: left;
		}

		.mark {
			width: 1.05rem;
			height: 1.05rem;
			margin-top: 0.2rem;
			justify-self: center;
		}

		.copy {
			align-items: flex-start;
			padding-block: 0.05rem 0.15rem;
		}

		.detail {
			max-width: 14rem;
		}

		.span {
			display: grid;
			grid-template-columns: 1.25rem 1fr;
			grid-template-rows: auto 1fr auto;
			column-gap: 1.05rem;
			align-items: stretch;
			width: 100%;
			height: auto;
			min-height: 5.6rem;
			padding: 0.45rem 0;
		}

		.rail {
			grid-column: 1;
			grid-row: 1 / -1;
			width: 0.34rem;
			height: 100%;
			min-height: 5.6rem;
			margin-inline: auto;
		}

		.rail-fwd,
		.rail-back {
			transform: scaleY(0);
		}

		.rail-fwd {
			transform-origin: top center;
		}

		.rail-back {
			transform-origin: bottom center;
		}

		.out,
		.in {
			position: static;
			left: auto;
			top: auto;
			bottom: auto;
			width: auto;
			max-width: 12rem;
			grid-column: 2;
			text-align: left;
			transform: none;
		}

		.out {
			grid-row: 1;
			align-self: start;
		}

		.in {
			grid-row: 3;
			align-self: end;
		}
	}

	.path[data-motion='ok'] {
		.span[data-span='0'] .rail-fwd {
			animation: path-fwd-0-mobile var(--path-cycle) var(--path-ease) infinite;
		}

		.span[data-span='1'] .rail-fwd {
			animation: path-fwd-1-mobile var(--path-cycle) var(--path-ease) infinite;
		}

		.span[data-span='0'] .rail-back {
			animation: path-back-0-mobile var(--path-cycle) var(--path-ease) infinite;
		}

		.span[data-span='1'] .rail-back {
			animation: path-back-1-mobile var(--path-cycle) var(--path-ease) infinite;
		}

		.span[data-span='0'] .pulse {
			animation: path-pulse-0-mobile var(--path-cycle) var(--path-ease) infinite;
		}

		.span[data-span='1'] .pulse {
			animation: path-pulse-1-mobile var(--path-cycle) var(--path-ease) infinite;
		}
	}

	.path[data-motion='reduce'] {
		.rail-fwd,
		.rail-back {
			transform: scaleY(1);
		}
	}
}

@keyframes path-fwd-0-mobile {
	0% {
		transform: scaleY(0);
	}

	18%,
	22% {
		transform: scaleY(1);
	}

	28%,
	100% {
		transform: scaleY(0);
	}
}

@keyframes path-fwd-1-mobile {
	0%,
	25% {
		transform: scaleY(0);
	}

	43%,
	47% {
		transform: scaleY(1);
	}

	53%,
	100% {
		transform: scaleY(0);
	}
}

@keyframes path-back-0-mobile {
	0%,
	75% {
		transform: scaleY(0);
	}

	93%,
	97% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0);
	}
}

@keyframes path-back-1-mobile {
	0%,
	50% {
		transform: scaleY(0);
	}

	68%,
	72% {
		transform: scaleY(1);
	}

	78%,
	100% {
		transform: scaleY(0);
	}
}

@keyframes path-pulse-0-mobile {
	0% {
		opacity: 0;
		top: 0;
		left: 50%;
	}

	4%,
	18% {
		opacity: 1;
		top: 100%;
		left: 50%;
	}

	22% {
		opacity: 0;
		top: 100%;
	}

	75% {
		opacity: 0;
		top: 100%;
	}

	79%,
	93% {
		opacity: 1;
		top: 0;
		left: 50%;
	}

	97%,
	100% {
		opacity: 0;
		top: 0;
	}
}

@keyframes path-pulse-1-mobile {
	0%,
	25% {
		opacity: 0;
		top: 0;
		left: 50%;
	}

	29%,
	43% {
		opacity: 1;
		top: 100%;
		left: 50%;
	}

	47% {
		opacity: 0;
		top: 100%;
	}

	50% {
		opacity: 0;
		top: 100%;
	}

	54%,
	68% {
		opacity: 1;
		top: 0;
		left: 50%;
	}

	72%,
	100% {
		opacity: 0;
		top: 0;
	}
}


/* ./components/lock.css */
/* Root class matches filename: lock.css → .lock */

.lock {
	--lock-cycle: 9s;
	--lock-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--lock-mark: 0.92rem;
	--lock-stop: #c24a12;
	display: flex;
	flex-direction: column;
	gap: 1.9em;
	margin: 0.55em 0 2.8em;
	padding: 0.15em 0 0;
	border: 0;

	.stage {
		display: grid;
		grid-template-columns: minmax(8.2rem, 0.95fr) minmax(7.4rem, 1.05fr) minmax(
				8.4rem,
				1fr
			);
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
			'origin fork allow'
			'origin fork deny';
		align-items: center;
		column-gap: 0.95rem;
		width: 100%;
		min-height: 11.6rem;
	}

	ol {
		display: contents;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.origin,
	.allow,
	.deny,
	.bar {
		margin: 0;
		padding: 0;
	}

	.origin {
		grid-area: origin;
		padding-right: 0.15rem;
		text-align: right;
	}

	.origin .copy {
		position: relative;
	}

	.origin .detail {
		position: absolute;
		top: 100%;
		right: 0;
		margin-top: 0.32em;
	}

	.allow {
		grid-area: allow;
		padding-left: 0.2rem;
	}

	.deny {
		grid-area: deny;
		padding-left: 0.2rem;
	}

	.bar,
	.mark {
		display: none;
	}

	.copy {
		display: flex;
		flex-direction: column;
		gap: 0.32em;
		min-width: 0;
	}

	.allow .copy,
	.deny .copy {
		align-items: flex-start;
		text-align: left;
	}

	.origin .copy {
		align-items: flex-end;
	}

	strong {
		max-width: 9.2rem;
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 1.05rem;
		letter-spacing: -0.03em;
		line-height: 1.25;
		text-wrap: balance;
		color: var(--color-ink);
	}

	.detail {
		max-width: 8.6rem;
		font-family: var(--font-body);
		font-size: 0.82rem;
		line-height: 1.35;
		text-wrap: balance;
		color: var(--color-muted);
	}

	.deny strong {
		color: rgb(var(--color-ink-rgb) / 0.55);
	}

	.fork {
		grid-area: fork;
		display: block;
		width: 100%;
		height: 100%;
		min-height: 10.6rem;
		overflow: visible;
	}

	.track,
	.fill,
	.stop-track,
	.stop,
	.stop-edge {
		fill: none;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.track,
	.stop-track {
		stroke: rgb(var(--color-ink-rgb) / 0.14);
		stroke-width: 2.5;
	}

	.fill {
		stroke: var(--color-accent);
		stroke-width: 2.5;
		stroke-dasharray: 86;
		stroke-dashoffset: 86;
	}

	.start-track,
	.allow-node-track {
		fill: var(--color-bg);
		stroke: rgb(var(--color-accent-rgb) / 0.38);
		stroke-width: 1.15;
	}

	.start-node,
	.allow-node {
		fill: var(--color-accent);
		opacity: 0.2;
		transform-box: fill-box;
		transform-origin: center;
		transform: scale(0.28);
	}

	.stop {
		stroke: var(--color-accent);
		stroke-width: 2.6;
		stroke-dasharray: 28;
		stroke-dashoffset: 28;
	}

	.stop-edge {
		stroke: var(--lock-stop);
		stroke-width: 1.15;
		stroke-dasharray: 28;
		stroke-dashoffset: 28;
	}

	figcaption {
		margin: 2em 0 0;
		font-family: var(--font-display);
		font-size: 0.78rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: center;
		color: var(--color-muted);
	}
}

.prose .lock {
	ol {
		margin: 0;
		padding: 0;
	}

	li {
		margin: 0;
		padding: 0;
	}
}

.lock[data-motion='ok'] {
	.start-node {
		animation: lock-start-node var(--lock-cycle) var(--lock-ease) infinite;
	}

	.fill.trunk {
		animation: lock-draw-trunk var(--lock-cycle) var(--lock-ease) infinite;
	}

	.fill.allow-rail {
		animation: lock-draw-allow var(--lock-cycle) var(--lock-ease) infinite;
	}

	.fill.deny-rail {
		animation: lock-draw-deny var(--lock-cycle) var(--lock-ease) infinite;
	}

	.allow-node {
		animation: lock-allow-node var(--lock-cycle) var(--lock-ease) infinite;
	}

	.stop,
	.stop-edge {
		animation: lock-stop var(--lock-cycle) var(--lock-ease) infinite;
	}

	.allow {
		animation: lock-copy-allow var(--lock-cycle) var(--lock-ease) infinite;
	}

	.deny {
		animation: lock-copy-deny var(--lock-cycle) var(--lock-ease) infinite;
	}
}

.lock[data-motion='reduce'] {
	.fill {
		stroke-dashoffset: 0;
	}

	.start-node,
	.allow-node {
		opacity: 1;
		transform: scale(1);
	}

	.stop,
	.stop-edge {
		stroke-dashoffset: 0;
	}
}

@keyframes lock-start-node {
	0%,
	6% {
		opacity: 0.2;
		transform: scale(0.28);
	}

	14%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0.2;
		transform: scale(0.28);
	}
}

@keyframes lock-draw-trunk {
	0%,
	8% {
		stroke-dashoffset: 86;
	}

	16%,
	86% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: 86;
	}
}

@keyframes lock-draw-allow {
	0%,
	16% {
		stroke-dashoffset: 86;
	}

	34%,
	86% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: 86;
	}
}

@keyframes lock-draw-deny {
	0%,
	42% {
		stroke-dashoffset: 86;
	}

	56%,
	86% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: 86;
	}
}

@keyframes lock-allow-node {
	0%,
	30% {
		opacity: 0.2;
		transform: scale(0.28);
	}

	38%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0.2;
		transform: scale(0.28);
	}
}

@keyframes lock-stop {
	0%,
	54% {
		stroke-dashoffset: 28;
	}

	64%,
	86% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: 28;
	}
}

@keyframes lock-copy-allow {
	0%,
	22% {
		opacity: 0.42;
	}

	34%,
	86% {
		opacity: 1;
	}

	100% {
		opacity: 0.42;
	}
}

@keyframes lock-copy-deny {
	0%,
	48% {
		opacity: 0.34;
	}

	64%,
	86% {
		opacity: 0.88;
	}

	100% {
		opacity: 0.34;
	}
}

@media (max-width: 640px) {
	.lock {
		gap: 1.6em;
		margin-bottom: 2.2em;

		.stage {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			min-height: 0;
		}

		ol {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			row-gap: 0;
		}

		.origin,
		.allow,
		.deny {
			display: grid;
			grid-template-columns: 1.25rem 1fr;
			column-gap: 1.05rem;
			row-gap: 0;
			align-items: start;
			align-self: stretch;
			width: 100%;
			padding: 0;
			text-align: left;
		}

		.mark {
			display: block;
			position: relative;
			width: 1.05rem;
			height: 1.05rem;
			margin-top: 0.2rem;
			justify-self: center;
		}

		.mark-ring,
		.mark-fill {
			position: absolute;
			inset: 0;
			border-radius: 50%;
		}

		.mark-ring {
			border: 1.5px solid rgb(var(--color-accent-rgb) / 0.38);
			background: var(--color-bg);
		}

		.mark-fill {
			background: var(--color-accent);
			opacity: 0.22;
			transform: scale(0.42);
		}

		.deny .mark-fill {
			inset: 0.42rem 0.08rem;
			border-radius: 999px;
			background: var(--lock-stop);
		}

		.origin .copy,
		.allow .copy,
		.deny .copy {
			position: static;
			align-items: flex-start;
			padding-block: 0.05rem 0.15rem;
		}

		.origin .detail {
			position: static;
			top: auto;
			right: auto;
			margin-top: 0;
		}

		strong,
		.detail {
			max-width: 14rem;
		}

		.bar {
			display: grid;
			grid-template-columns: 1.25rem 1fr;
			column-gap: 1.05rem;
			align-items: stretch;
			width: 100%;
			height: auto;
			min-height: 5.6rem;
			padding: 0.45rem 0;
		}

		.rail {
			position: relative;
			grid-column: 1;
			width: 0.34rem;
			height: 100%;
			min-height: 5.6rem;
			margin-inline: auto;
		}

		.rail-track,
		.rail-fill {
			position: absolute;
			inset: 0;
			border-radius: 999px;
		}

		.rail-track {
			background: rgb(var(--color-ink-rgb) / 0.14);
		}

		.rail-fill {
			background: var(--color-accent);
			transform: scaleY(0);
			transform-origin: top center;
		}

		.pulse {
			position: absolute;
			top: 0;
			left: 50%;
			width: 0.48rem;
			height: 0.48rem;
			border-radius: 50%;
			background: var(--color-accent);
			opacity: 0;
			transform: translate(-50%, -50%);
		}

		.fork {
			display: none;
		}
	}

	.lock[data-motion='ok'] {
		.origin .mark-fill {
			animation: lock-dot-0 var(--lock-cycle) var(--lock-ease) infinite;
		}

		.allow .mark-fill {
			animation: lock-dot-1 var(--lock-cycle) var(--lock-ease) infinite;
		}

		.deny .mark-fill {
			animation: lock-dot-2 var(--lock-cycle) var(--lock-ease) infinite;
		}

		.bar[data-bar='0'] .rail-fill {
			animation: lock-rail-0-mobile var(--lock-cycle) var(--lock-ease) infinite;
		}

		.bar[data-bar='1'] .rail-fill {
			animation: lock-rail-1-mobile var(--lock-cycle) var(--lock-ease) infinite;
		}

		.bar[data-bar='0'] .pulse {
			animation: lock-pulse-0-mobile var(--lock-cycle) var(--lock-ease) infinite;
		}

		.bar[data-bar='1'] .pulse {
			animation: lock-pulse-1-mobile var(--lock-cycle) var(--lock-ease) infinite;
		}

		.allow,
		.deny {
			animation: none;
		}
	}

	.lock[data-motion='reduce'] {
		.mark-fill {
			opacity: 1;
			transform: scale(1);
		}

		.rail-fill {
			transform: scaleY(1);
		}

		.pulse {
			display: none;
		}
	}
}

@keyframes lock-dot-0 {
	0%,
	8% {
		opacity: 0.22;
		transform: scale(0.42);
	}

	16%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0.22;
		transform: scale(0.42);
	}
}

@keyframes lock-dot-1 {
	0%,
	28% {
		opacity: 0.22;
		transform: scale(0.42);
	}

	38%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0.22;
		transform: scale(0.42);
	}
}

@keyframes lock-dot-2 {
	0%,
	50% {
		opacity: 0.22;
		transform: scale(0.42);
	}

	60%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0.22;
		transform: scale(0.42);
	}
}

@keyframes lock-rail-0-mobile {
	0%,
	16% {
		transform: scaleY(0);
	}

	28%,
	86% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0);
	}
}

@keyframes lock-rail-1-mobile {
	0%,
	38% {
		transform: scaleY(0);
	}

	50%,
	86% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0);
	}
}

@keyframes lock-pulse-0-mobile {
	0%,
	16% {
		opacity: 0;
		top: 0;
	}

	20%,
	28% {
		opacity: 1;
		top: 100%;
	}

	32%,
	100% {
		opacity: 0;
		top: 100%;
	}
}

@keyframes lock-pulse-1-mobile {
	0%,
	38% {
		opacity: 0;
		top: 0;
	}

	42%,
	50% {
		opacity: 1;
		top: 100%;
	}

	54%,
	100% {
		opacity: 0;
		top: 100%;
	}
}


/* ./components/external-link.css */
/* Root class matches filename: external-link.css → .external-link */

.external-link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.28em;

	.icon {
		flex-shrink: 0;
		width: 0.72em;
		height: 0.72em;
		overflow: visible;
		transition: transform var(--duration-fast) var(--ease-out);
	}

	.new-tab {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	&:hover .icon,
	&:focus-visible .icon {
		transform: translate(0.12em, -0.12em);
	}
}


/* ./components/default-skeleton.css */
/* Root class matches filename: default-skeleton.css → .default-skeleton */

.default-skeleton {
	display: grid;
	place-items: center;
	flex: 1 1 auto;
	align-self: stretch;
	width: 100%;
	min-height: max(16rem, calc(100dvh - 14rem));

	.wheel {
		position: relative;
		width: 20px;
		height: 20px;
		color: var(--color-muted);

		span {
			position: absolute;
			inset: 0;
			animation: default-skeleton-spoke 1s linear infinite;

			&::after {
				content: '';
				position: absolute;
				top: 0.5px;
				left: calc(50% - 1.15px);
				width: 2.3px;
				height: 6px;
				border-radius: 999px;
				background: currentColor;
			}
		}
	}
}

@keyframes default-skeleton-spoke {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0.18;
	}
}

@media (prefers-reduced-motion: reduce) {
	.default-skeleton .wheel span {
		animation: none;
		opacity: 0.35;
	}
}


/* ./components/help.css */
/* Root class matches filename: help.css → .help */

.help {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	background: var(--color-bg);
	color: var(--color-ink);
	padding-block: var(--space-header-y) calc(1600 * var(--scale));

	.inner {
		display: flex;
		flex-direction: column;
		flex: 1;
		width: min(100%, var(--size-page));
		margin-inline: auto;
		padding-inline: var(--space-page-x);
	}

	.intro {
		margin-bottom: calc(720 * var(--scale));
		padding-bottom: calc(560 * var(--scale));
	}

	.crumb {
		margin: 0 0 calc(280 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(6 * var(--scale));
		text-transform: uppercase;
		color: var(--color-muted);

		a {
			color: var(--color-accent);
			transition: opacity var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				opacity: 0.72;
			}
		}
	}

	.heading {
		max-width: none;
		margin-bottom: calc(280 * var(--scale));
	}

	.lede {
		max-width: 36rem;
		font-family: var(--font-body);
		font-size: clamp(1.08rem, 1.55vw, 1.22rem);
		line-height: 1.4;
		color: var(--color-muted);
	}

	.faq-accordion {
		width: 100%;
		margin-inline: 0;
	}

	.faq-accordion + .lede {
		margin-top: calc(720 * var(--scale));
	}

	.back {
		margin-top: calc(720 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(200 * var(--scale));
		color: var(--color-accent);

		a {
			transition: opacity var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				opacity: 0.72;
			}

			&:focus-visible {
				outline: 2px solid var(--color-focus);
				outline-offset: 4px;
			}
		}
	}

	.article {
		.title {
			margin-bottom: calc(280 * var(--scale));
			font-family: var(--font-display);
			font-weight: var(--weight-medium);
			font-size: clamp(1.75rem, 4vw, 3rem);
			line-height: 1.1;
			letter-spacing: -0.03em;
			color: var(--color-ink);
		}

		.lede {
			margin-bottom: 0;
		}

		.intro {
			margin-bottom: calc(640 * var(--scale));
		}

		.status {
			font-family: var(--font-display);
			font-size: calc(280 * var(--scale));
			color: var(--color-muted);
		}
	}

	/* Article markdown: use .prose (theme/components/prose.css) */
	.body {
		margin-top: calc(480 * var(--scale));
	}

	.adjacent {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: calc(240 * var(--scale));
		margin-top: calc(900 * var(--scale));
		padding-top: calc(480 * var(--scale));
		border-top: 1px solid rgb(var(--color-ink-rgb) / 0.12);
	}

	.adjacent-link {
		display: flex;
		flex-direction: column;
		gap: calc(60 * var(--scale));
		min-width: 0;
		transition: color var(--duration-fast) var(--ease-out);

		&.next {
			text-align: right;
			justify-self: end;
		}

		.label {
			font-family: var(--font-display);
			font-size: calc(140 * var(--scale));
			letter-spacing: calc(6 * var(--scale));
			text-transform: uppercase;
			color: var(--color-muted);
		}

		.question {
			font-family: var(--font-display);
			font-weight: var(--weight-medium);
			font-size: calc(240 * var(--scale));
			line-height: 1.15;
			letter-spacing: calc(-12 * var(--scale));
		}

		&:hover,
		&:focus-visible {
			color: var(--color-accent);
		}

		&:focus-visible {
			outline: 2px solid var(--color-focus);
			outline-offset: 4px;
		}
	}

	@media (max-width: 900px) {
		padding-block: var(--space-header-y) calc(1200 * var(--scale));

		.adjacent {
			grid-template-columns: 1fr;
		}

		.adjacent-link.next {
			text-align: left;
			justify-self: start;
		}
	}
}


/* ./components/legal.css */
/* Root class matches filename: legal.css → .legal */

.legal {
	min-height: 100dvh;
	background: var(--color-bg);
	color: var(--color-ink);
	padding-block: var(--space-header-y) calc(1600 * var(--scale));

	.inner {
		width: min(100%, var(--size-page));
		margin-inline: auto;
		padding-inline: var(--space-page-x);
	}

	.crumb {
		margin: 0 0 calc(280 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(6 * var(--scale));
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.intro {
		margin-bottom: calc(640 * var(--scale));
		padding-bottom: calc(560 * var(--scale));
		border-bottom: 1px solid rgb(var(--color-ink-rgb) / 0.12);
	}

	.lede {
		max-width: 36rem;
		margin-bottom: 0;
		font-family: var(--font-body);
		font-size: clamp(1.08rem, 1.55vw, 1.22rem);
		line-height: 1.4;
		color: var(--color-muted);
	}

	.article {
		.title {
			margin-bottom: calc(280 * var(--scale));
			font-family: var(--font-display);
			font-weight: var(--weight-medium);
			font-size: clamp(1.75rem, 4vw, 3rem);
			line-height: 1.1;
			letter-spacing: -0.03em;
			color: var(--color-ink);
		}

		.status {
			font-family: var(--font-display);
			font-size: calc(280 * var(--scale));
			color: var(--color-muted);
		}
	}

	.body {
		margin-top: calc(480 * var(--scale));
	}

	.updated {
		margin: calc(720 * var(--scale)) 0 0;
		font-family: var(--font-body);
		font-size: clamp(0.875rem, 1.2vw, 0.95rem);
		line-height: var(--leading-body);
		color: var(--color-muted);
	}

	.also,
	.back {
		display: flex;
		flex-wrap: wrap;
		gap: calc(160 * var(--scale)) calc(280 * var(--scale));
		margin-top: calc(280 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(200 * var(--scale));
		color: var(--color-accent);

		a {
			transition: opacity var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				opacity: 0.72;
			}

			&:focus-visible {
				outline: 2px solid var(--color-focus);
				outline-offset: 4px;
			}
		}
	}

	.back {
		margin-top: calc(720 * var(--scale));
	}

	@media (max-width: 900px) {
		padding-block: var(--space-header-y) calc(1200 * var(--scale));
	}
}


/* ./components/mcp.css */
/* Root class matches filename: mcp.css → .mcp */

.mcp {
	min-height: 100dvh;
	background: var(--color-bg);
	color: var(--color-ink);
	padding-block: var(--space-header-y) calc(1600 * var(--scale));

	.inner {
		width: min(100%, var(--size-page));
		margin-inline: auto;
		padding-inline: var(--space-page-x);
	}

	.crumb {
		margin: 0 0 calc(280 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(6 * var(--scale));
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.intro {
		margin-bottom: calc(640 * var(--scale));
		padding-bottom: calc(560 * var(--scale));
		border-bottom: 1px solid rgb(var(--color-ink-rgb) / 0.12);
	}

	.lede {
		max-width: 36rem;
		margin-bottom: 0;
		font-family: var(--font-body);
		font-size: clamp(1.08rem, 1.55vw, 1.22rem);
		line-height: 1.4;
		color: var(--color-muted);
	}

	.article {
		.title {
			margin-bottom: calc(280 * var(--scale));
			font-family: var(--font-display);
			font-weight: var(--weight-medium);
			font-size: clamp(1.75rem, 4vw, 3rem);
			line-height: 1.1;
			letter-spacing: -0.03em;
			color: var(--color-ink);
		}

		.status {
			font-family: var(--font-display);
			font-size: calc(280 * var(--scale));
			color: var(--color-muted);
		}
	}

	.body {
		margin-top: calc(480 * var(--scale));
	}

	/* Humans never need this; Accept: text/markdown / .md still ships it. */
	.agents {
		display: none;
	}

	.updated {
		margin: calc(720 * var(--scale)) 0 0;
		font-family: var(--font-body);
		font-size: clamp(0.875rem, 1.2vw, 0.95rem);
		line-height: var(--leading-body);
		color: var(--color-muted);
	}

	.also,
	.back {
		margin-top: calc(280 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(200 * var(--scale));
		color: var(--color-accent);

		a {
			transition: opacity var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				opacity: 0.72;
			}

			&:focus-visible {
				outline: 2px solid var(--color-focus);
				outline-offset: 4px;
			}
		}
	}

	.back {
		margin-top: calc(720 * var(--scale));
	}

	@media (max-width: 900px) {
		padding-block: var(--space-header-y) calc(1200 * var(--scale));
	}
}


/* ./components/mcp-connect.css */
/* Root class matches filename: mcp-connect.css → .mcp-connect */

.mcp-connect {
	--mcp-border: rgb(var(--color-ink-rgb) / 0.14);
	--mcp-border-strong: rgb(var(--color-ink-rgb) / 0.22);
	--mcp-surface: color-mix(in srgb, var(--color-surface) 72%, transparent);
	--mcp-cursor: #111111;
	--mcp-vscode: #0078d4;
	--mcp-claude: #d97757;
	--mcp-codex: #101010;
	--mcp-grok: #111111;
	--mcp-grokbot: #2a2a2a;
	--mcp-chatgpt: #10a37f;

	margin: calc(480 * var(--scale)) 0;
	padding: calc(560 * var(--scale));
	border: 1px solid var(--mcp-border);
	border-radius: 18px;
	background:
		radial-gradient(
			120% 80% at 0% 0%,
			rgb(var(--color-accent-rgb) / 0.07),
			transparent 55%
		),
		var(--mcp-surface);
	box-shadow: 0 18px 40px rgb(var(--color-ink-rgb) / 0.05);

	.lede {
		margin: 0 0 calc(480 * var(--scale));
		max-width: 38rem;
		font-family: var(--font-body);
		font-size: clamp(1.05rem, 1.5vw, 1.15rem);
		line-height: 1.45;
		color: var(--color-muted);
	}

	.form {
		display: grid;
		gap: calc(400 * var(--scale));
		margin-bottom: calc(560 * var(--scale));
	}

	.fields {
		display: grid;
		gap: calc(280 * var(--scale));

		@media (min-width: 720px) {
			grid-template-columns: 1fr 1fr;
		}
	}

	.field {
		display: grid;
		gap: calc(140 * var(--scale));
	}

	.label {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(150 * var(--scale));
		letter-spacing: calc(6 * var(--scale));
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.field input {
		min-height: 52px;
		padding: 0.85rem 1rem;
		border: 1px solid var(--mcp-border-strong);
		border-radius: 12px;
		background: var(--color-bg);
		color: var(--color-ink);
		font-family: var(--font-body);
		font-size: 1.02rem;
		transition:
			border-color var(--duration-fast) var(--ease-out),
			box-shadow var(--duration-fast) var(--ease-out);

		&:focus,
		&:focus-visible {
			outline: none;
			border-color: var(--color-accent);
			box-shadow: 0 0 0 4px rgb(var(--color-accent-rgb) / 0.16);
		}

		&::placeholder {
			color: var(--color-muted);
		}
	}

	.modes {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.mode-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: calc(115 * var(--scale));
		margin-top: calc(140 * var(--scale));
	}

	.mode {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		min-height: 64px;
		padding: 0.7rem 0.95rem;
		border: 1px solid var(--mcp-border-strong);
		border-radius: 14px;
		background: var(--color-bg);
		cursor: pointer;
		transition:
			border-color var(--duration-fast) var(--ease-out),
			box-shadow var(--duration-fast) var(--ease-out),
			background var(--duration-fast) var(--ease-out);

		input {
			position: absolute;
			opacity: 0;
			pointer-events: none;
		}

		&.is-on {
			border-color: var(--color-accent);
			background: rgb(var(--color-accent-rgb) / 0.08);
			box-shadow: inset 0 0 0 1px rgb(var(--color-accent-rgb) / 0.25);
		}

		&:hover {
			border-color: var(--color-accent);
		}
	}

	.mode-text {
		display: grid;
		gap: 0.1rem;
	}

	.mode-title {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 1.02rem;
		color: var(--color-ink);
	}

	.mode-sub {
		font-family: var(--font-body);
		font-size: 0.88rem;
		color: var(--color-muted);
	}

	.client-groups {
		display: grid;
		gap: calc(480 * var(--scale));
	}

	.notice {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin: 0;
		min-height: 64px;
		padding: 0.7rem 0.95rem;
		border: 1px solid var(--mcp-border-strong);
		border-radius: 14px;
		background: var(--color-bg);
		color: var(--color-ink);
		font-family: var(--font-body);
		font-size: 0.98rem;
		line-height: 1.4;

		p {
			margin: 0;
		}

		.icon {
			flex: 0 0 auto;
			width: 1.25rem;
			height: 1.25rem;
			color: var(--color-ink);
		}
	}

	.guide {
		display: grid;
		gap: calc(200 * var(--scale));
	}

	.guide-top {
		display: flex;
		align-items: center;
		gap: 0.85rem;

		.label {
			margin: 0;
			margin-right: auto;
		}
	}

	.payload {
		margin: 0;
		padding: 0.85rem 1rem;
		border: 1px solid var(--mcp-border-strong);
		border-radius: 12px;
		background: var(--color-bg);
		color: var(--color-ink);
		font-family:
			ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
		font-size: 0.88rem;
		font-weight: 500;
		line-height: 1.45;
		letter-spacing: -0.03em;
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	.how {
		margin: 0;
		font-family: var(--font-body);
		font-size: 0.95rem;
		line-height: 1.4;
		color: var(--color-muted);
	}

	.copy {
		padding: 0.2rem 0.45rem;
		border: 0;
		background: transparent;
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 0.68rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-muted);
		cursor: pointer;
		transition: color var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			color: var(--color-accent);
		}

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

		.done {
			display: none;
		}

		&.is-copied {
			color: var(--color-accent);

			.idle {
				display: none;
			}

			.done {
				display: inline;
			}
		}
	}

	.open {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 0.68rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-accent);
		text-decoration: none;
		white-space: nowrap;
		transition: opacity var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			opacity: 0.72;
		}

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

	.clients {
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(115 * var(--scale));

		@media (min-width: 640px) {
			grid-template-columns: 1fr 1fr;
		}
	}

	.client {
		display: flex;
		align-items: center;
		gap: 0.85rem;
		min-height: 64px;
		padding: 0.9rem 1.1rem;
		border: 0;
		border-radius: 14px;
		color: #fff;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
		transition:
			transform var(--duration-fast) var(--ease-out),
			filter var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			filter: brightness(1.06);
			transform: translateY(-1px);
		}

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

		&.is-on {
			box-shadow: 0 0 0 2px var(--color-ink);
			filter: none;
			transform: none;
		}

		.logo {
			flex: 0 0 auto;
			width: 1.55rem;
			height: 1.55rem;
		}

		&.cursor {
			background: var(--mcp-cursor);
		}

		&.vscode {
			background: var(--mcp-vscode);
		}

		&.claude {
			background: var(--mcp-claude);
		}

		&.codex {
			background: var(--mcp-codex);
		}

		&.grok {
			background: var(--mcp-grok);
		}

		&.grokbot {
			background: var(--mcp-grokbot);
		}

		&.claude-desktop {
			background: var(--mcp-claude);
		}

		&.chatgpt {
			background: var(--mcp-chatgpt);
		}
	}

	.client-title {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 1.02rem;
		line-height: 1.2;
	}
}


/* ./components/get-app.css */
/* Root class matches filename: get-app.css → .get-app */

.get-app {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	overflow-x: clip;
	background: var(--color-bg);
	color: var(--color-ink);
	padding-block: var(--space-header-y);

	.inner {
		display: flex;
		flex-direction: column;
		flex: 1;
		width: min(100%, var(--size-page));
		margin-inline: auto;
		padding-inline: var(--space-page-x);
	}

	.stage {
		display: grid;
		flex: 1;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		align-items: center;
		align-content: center;
		column-gap: calc(480 * var(--scale));

		&.is-pending {
			grid-template-columns: 1fr;
			justify-items: center;
		}

		&.is-pending .default-skeleton {
			min-height: 0;
		}
	}

	.intro {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		min-width: 0;
	}

	.heading {
		margin-bottom: calc(400 * var(--scale));
	}

	.copy-link {
		display: inline;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		text-decoration: underline;
		text-underline-offset: 0.18em;
		cursor: pointer;
		transition: color var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			color: var(--color-accent);
		}
	}

	.qr {
		display: grid;
		justify-items: center;
		justify-self: end;
		gap: calc(200 * var(--scale));
		margin: 0;
		width: min(100%, calc(3200 * var(--scale)));
	}

	figcaption {
		margin: 2em 0 0;
		max-width: 18rem;
		font-family: var(--font-body);
		font-size: clamp(0.95rem, 1.3vw, 1.08rem);
		line-height: 1.4;
		text-align: center;
		color: var(--color-muted);
	}

	.code {
		position: relative;
		width: 100%;
		aspect-ratio: 1;
		padding: calc(220 * var(--scale));
		background: var(--color-bg);
		border: 1px solid rgb(var(--color-ink-rgb) / 0.12);
		border-radius: 18px;

		.matrix {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 1 / 1;
		}

		.mark {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 26%;
			aspect-ratio: 1;
			translate: -50% -50%;
			overflow: hidden;
			border-radius: 22.5%;
			background: var(--color-bg);
			box-shadow: 0 0 0 0.38em var(--color-bg);
		}

		.icon {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.actions {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: calc(200 * var(--scale));
		width: min(100%, 22rem);
	}

	.mail {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: calc(120 * var(--scale));
		width: 100%;
	}

	.turnstile {
		flex: 1 1 100%;
		min-height: 0;
		line-height: 0;
	}

	.field {
		flex: 1 1 10rem;
		min-width: 0;
	}

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

	.field input,
	.trap {
		width: 100%;
		min-height: 44px;
		padding-inline: 1rem;
		border: 1px solid rgb(var(--color-ink-rgb) / 0.16);
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		color: var(--color-ink);
		caret-color: var(--color-accent);
		font-family: var(--font-body);
		font-size: 1rem;
		outline: none;
		box-shadow: 0 0 0 0 rgb(var(--color-accent-rgb) / 0);
		transition:
			border-color var(--duration-base) var(--ease-out),
			box-shadow var(--duration-base) var(--ease-out);
	}

	.field input:focus,
	.field input:focus-visible {
		outline: none;
		border-color: var(--color-accent);
		box-shadow: 0 0 0 4px rgb(var(--color-accent-rgb) / 0.18);
	}

	.trap {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
	}

	.field input::placeholder {
		color: var(--color-muted);
	}

	.note {
		margin: 0;
		font-family: var(--font-body);
		font-size: clamp(0.95rem, 1.25vw, 1.05rem);
		line-height: var(--leading-body);
		color: var(--color-muted);
	}

	.cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.4em;
		min-height: 44px;
		padding-inline: 1.15rem;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--color-accent);
		color: var(--color-white);
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 1rem;
		text-decoration: none;
		cursor: pointer;
		transition: opacity var(--duration-fast) var(--ease-out);

		.out {
			flex: none;
			display: block;
			width: 1em;
			height: 1em;
			min-width: 1em;
			min-height: 1em;
			overflow: visible;
			transition: transform var(--duration-fast) var(--ease-out);
		}

		&:hover,
		&:focus-visible {
			opacity: 0.88;
		}

		&:hover .out,
		&:focus-visible .out {
			transform: translate(0.12em, -0.12em);
		}

		&:focus-visible {
			outline: 2px solid var(--color-focus);
			outline-offset: 4px;
		}
	}

	@media (max-width: 900px) {
		padding-block: var(--space-header-y);

		.stage {
			grid-template-columns: 1fr;
			row-gap: calc(560 * var(--scale));
		}

		.qr {
			justify-self: start;
			width: min(100%, calc(2800 * var(--scale)));
		}
	}

	@media (max-width: 480px) {
		.qr {
			width: min(100%, 18rem);
		}

		.actions {
			width: 100%;
		}

		.mail .cta {
			width: 100%;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.field input,
		.copy-link,
		.cta {
			transition: none;
		}
	}
}


/* ./components/checkout.css */
/* Root class matches filename: checkout.css → .checkout */

.checkout {
	min-height: 100dvh;
	background: var(--color-bg);
	color: var(--color-ink);
	padding-block: var(--space-header-y) calc(1600 * var(--scale));

	.inner {
		width: min(100%, var(--size-page));
		margin-inline: auto;
		padding-inline: var(--space-page-x);
	}

	.layout {
		display: grid;
		gap: calc(720 * var(--scale));
		align-items: start;

		@media (min-width: 900px) {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
			column-gap: calc(640 * var(--scale));
		}
	}

	.intro {
		min-width: 0;
	}

	.eyebrow {
		margin: 0 0 calc(200 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(8 * var(--scale));
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.heading {
		max-width: none;
		margin-bottom: calc(320 * var(--scale));
	}

	.lede {
		max-width: 34rem;
		margin: 0 0 calc(512 * var(--scale));
		font-family: var(--font-body);
		font-size: clamp(1.08rem, 1.55vw, 1.22rem);
		line-height: 1.4;
		color: var(--color-muted);
	}

	.lede.compact {
		margin: 0 0 calc(64 * var(--scale));
	}

	.features {
		margin: 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: calc(220 * var(--scale));
	}

	.features li {
		position: relative;
		padding-left: 1.35rem;
		font-family: var(--font-body);
		font-size: clamp(1rem, 1.4vw, 1.12rem);
		line-height: 1.4;
		color: var(--color-ink);
	}

	.features li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0.45em;
		width: 0.45rem;
		height: 0.45rem;
		border-radius: 50%;
		background: var(--color-accent);
	}

	.features a {
		color: var(--color-accent);
		text-decoration: underline;
		text-underline-offset: 0.18em;
		text-decoration-thickness: 1px;
		transition: opacity var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			opacity: 0.72;
		}
	}

	.see-more {
		display: none;
		align-items: center;
		justify-content: center;
		width: fit-content;
		margin-top: calc(280 * var(--scale));
		padding: 0;
		border: 0;
		background: transparent;
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 1rem;
		color: var(--color-accent);
		cursor: pointer;
		transition: opacity var(--duration-fast) var(--ease-out);

		&::after {
			content: '';
			width: 0.38em;
			height: 0.38em;
			margin-left: 0.45em;
			margin-top: -0.18em;
			border-right: 1.5px solid currentColor;
			border-bottom: 1.5px solid currentColor;
			transform: rotate(45deg);
		}

		&[aria-expanded='true']::after {
			margin-top: 0.12em;
			transform: rotate(-135deg);
		}

		&:hover,
		&:focus-visible {
			opacity: 0.72;
		}

		&:focus-visible {
			outline: 2px solid var(--color-focus);
			outline-offset: 4px;
		}
	}

	@media (max-width: 899px) {
		.features:not(.is-open) .more-mobile {
			display: none;
		}

		.see-more {
			display: flex;
			width: 100%;
		}
	}

	@media (min-width: 900px) {
		.features:not(.is-open) .more-desktop {
			display: none;
		}

		.see-more {
			display: flex;
		}
	}

	.offer {
		display: grid;
		gap: calc(200 * var(--scale));
		min-width: 0;
		align-content: start;

		&.is-pending {
			align-content: center;
			justify-items: center;
			min-height: 28rem;
		}

		&.is-pending .default-skeleton {
			min-height: 0;
			width: auto;
		}
	}

	.board {
		display: grid;
		gap: calc(280 * var(--scale));
		padding: calc(380 * var(--scale));
		border: 1px solid rgb(var(--color-ink-rgb) / 0.14);
		border-radius: 22px;
		background:
			radial-gradient(
				120% 80% at 0% 0%,
				rgb(var(--color-accent-rgb) / 0.08),
				transparent 55%
			),
			color-mix(in srgb, var(--color-surface) 88%, transparent);
		box-shadow: 0 18px 40px rgb(var(--color-ink-rgb) / 0.05);

		&.is-error {
			display: flex;
			flex-direction: column;
			min-height: 15rem;
		}

		&.is-error .back {
			margin-top: auto;
			padding-top: calc(280 * var(--scale));
			font-family: var(--font-display);
			font-weight: var(--weight-medium);
			font-size: calc(200 * var(--scale));
			color: var(--color-ink);

			a {
				display: inline-flex;
				align-items: center;
				gap: 0.35em;
				min-height: 1.5rem;
				color: inherit;
				text-decoration: none;
				transition: opacity var(--duration-fast) var(--ease-out);

				&:hover,
				&:focus-visible {
					opacity: 0.72;
				}

				&:focus-visible {
					outline: 2px solid var(--color-focus);
					outline-offset: 4px;
				}

				&:hover .arrow,
				&:focus-visible .arrow {
					transform: translateX(-0.18em);
				}
			}

			.arrow {
				flex-shrink: 0;
				width: 0.85em;
				height: 0.85em;
				transition: transform var(--duration-fast) var(--ease-out);
			}
		}
	}

	.plans {
		margin: 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: calc(200 * var(--scale));
	}

	.plan {
		display: grid;
		gap: calc(80 * var(--scale));
		width: 100%;
		padding: calc(280 * var(--scale)) calc(320 * var(--scale));
		border: 1.5px solid rgb(var(--color-ink-rgb) / 0.16);
		border-radius: 16px;
		background: var(--color-surface);
		color: inherit;
		text-align: left;
		cursor: pointer;
		transition:
			border-color var(--duration-fast) var(--ease-out),
			box-shadow var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			border-color: rgb(var(--color-accent-rgb) / 0.45);
			outline: none;
		}

		&.is-selected {
			border-color: var(--color-ink);
			box-shadow: 0 0 0 1px var(--color-ink);
		}
	}

	.plan-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
	}

	.plan-label {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 1.05rem;
	}

	.badge {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 0.72rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--color-accent);
		background: rgb(var(--color-accent-rgb) / 0.12);
		padding: 0.22rem 0.5rem;
		border-radius: 999px;
	}

	.plan-price {
		display: flex;
		align-items: baseline;
		gap: 0.4rem;
	}

	.stripe {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: clamp(1.6rem, 3vw, 2rem);
		letter-spacing: -0.03em;
	}

	.each {
		font-family: var(--font-body);
		color: var(--color-muted);
		font-size: 0.95rem;
	}

	.apple {
		font-family: var(--font-body);
		font-size: 0.92rem;
		color: var(--color-muted);
		text-decoration: line-through;
	}

	.pay {
		min-height: 54px;
		border: 0;
		border-radius: 999px;
		background: var(--color-ink);
		color: var(--color-bg);
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 1.02rem;
		cursor: pointer;
		transition:
			transform var(--duration-fast) var(--ease-out),
			opacity var(--duration-fast) var(--ease-out);

		&:hover:not(:disabled),
		&:focus-visible:not(:disabled) {
			transform: translateY(-1px);
			outline: none;
		}

		&:disabled {
			opacity: 0.45;
			cursor: default;
		}
	}

	.status {
		margin: 0;
		font-family: var(--font-body);
		font-size: clamp(0.74rem, 1.5vw, 0.92rem);
		line-height: 1.4;
		color: var(--color-muted);
		text-align: center;
	}

	.note {
		margin: 0;
		padding-inline: calc(115 * var(--scale));
		font-family: var(--font-body);
		font-size: 0.78rem;
		line-height: 1.4;
		text-align: center;
		color: var(--color-muted);
	}

	.auth-inline {
		display: grid;
		gap: calc(240 * var(--scale));
	}

	.auth-lede {
		margin: 0;
		font-family: var(--font-body);
		font-size: 1.02rem;
		line-height: 1.45;
		color: var(--color-muted);
	}

	.auth-actions {
		display: grid;
		gap: calc(120 * var(--scale));
	}

	.auth-apple,
	.auth-google {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.55rem;
		min-height: 52px;
		border-radius: 999px;
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 1rem;
		cursor: pointer;
		transition:
			transform var(--duration-fast) var(--ease-out),
			opacity var(--duration-fast) var(--ease-out);

		.mark {
			width: 1.15rem;
			height: 1.15rem;
			flex-shrink: 0;
		}

		&:hover:not(.is-disabled),
		&:focus-visible:not(.is-disabled) {
			transform: translateY(-1px);
			outline: none;
		}

		&.is-disabled {
			opacity: 0.45;
			cursor: default;
			pointer-events: none;
		}
	}

	.auth-google-gis {
		position: absolute;
		inset: 0;
		z-index: 1;
		opacity: 0;
		overflow: hidden;

		> div {
			width: 100% !important;
			height: 100% !important;
		}
	}

	.auth-google-face {
		position: relative;
		z-index: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.55rem;
		pointer-events: none;
	}

	.auth-apple {
		border: 0;
		background: #000;
		color: #fff;
	}

	.auth-google {
		border: 1.5px solid rgb(var(--color-ink-rgb) / 0.22);
		background: var(--color-surface);
		color: var(--color-ink);
	}

	.setup {
		gap: calc(360 * var(--scale));
	}

	.setup-back {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		width: fit-content;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 0.95rem;
		color: var(--color-ink);
		cursor: pointer;
		transition: opacity var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			opacity: 0.72;
			outline: none;
		}

		.arrow {
			flex-shrink: 0;
		}

		.setup-back-style {
			color: var(--color-ink);
			font-weight: var(--weight-medium);
		}
	}

	.setup-fieldset {
		margin: 0;
		padding: 0;
		border: 0;
		min-width: 0;
	}

	.setup-legend,
	.setup-label {
		display: block;
		margin-bottom: calc(160 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(6 * var(--scale));
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.setup-presets {
		margin: 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: calc(160 * var(--scale));
	}

	.setup-preset {
		display: grid;
		gap: calc(80 * var(--scale));
		width: 100%;
		padding: calc(260 * var(--scale)) calc(300 * var(--scale));
		border: 1.5px solid rgb(var(--color-ink-rgb) / 0.16);
		border-radius: 16px;
		background: var(--color-surface);
		color: inherit;
		text-align: left;
		cursor: pointer;
		transition:
			border-color var(--duration-fast) var(--ease-out),
			box-shadow var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			border-color: rgb(var(--color-accent-rgb) / 0.45);
			outline: none;
		}

		&.is-selected {
			border-color: var(--color-ink);
			box-shadow: 0 0 0 1px var(--color-ink);
		}
	}

	.setup-preset-title {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 1.05rem;
	}

	.setup-preset-blurb {
		font-family: var(--font-body);
		font-size: 0.95rem;
		line-height: 1.4;
		color: var(--color-muted);
	}

	.setup-preset-preview {
		display: grid;
		gap: calc(160 * var(--scale));
		margin-top: calc(80 * var(--scale));
		min-width: 0;

		&.is-loading {
			display: flex;
			align-items: center;
			gap: 0.55rem;
			min-height: 28px;
		}
	}

	.setup-preset-spinner {
		width: 14px;
		height: 14px;
		border: 2px solid rgb(var(--color-ink-rgb) / 0.18);
		border-top-color: var(--color-accent);
		border-radius: 50%;
		animation: setup-preset-spin 0.7s linear infinite;

		@media (prefers-reduced-motion: reduce) {
			animation: none;
			border-top-color: rgb(var(--color-ink-rgb) / 0.4);
		}
	}

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

	.setup-preset-loading {
		font-family: var(--font-body);
		font-size: 0.9rem;
		color: var(--color-muted);
	}

	.setup-preset-coins {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
	}

	.setup-preset-coin {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: rgb(var(--color-ink-rgb) / 0.06);
		overflow: hidden;
		object-fit: cover;
		font-family: var(--font-display);
		font-size: 0.62rem;
		font-weight: var(--weight-bold);
		letter-spacing: 0.02em;
		line-height: 1;
		color: var(--color-muted);
		text-transform: uppercase;
		user-select: none;

		&.is-image {
			display: block;
		}
	}

	.setup-preset-coin-more {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: rgb(var(--color-ink-rgb) / 0.08);
		font-family: var(--font-display);
		font-size: 0.72rem;
		font-weight: var(--weight-bold);
		color: var(--color-muted);
	}

	.setup-preset-bars {
		display: flex;
		align-items: flex-end;
		gap: 1.5px;
		height: 52px;
		width: 100%;
	}

	.setup-preset-bar {
		flex: 1 1 0;
		min-width: 2px;
		border-radius: 2px;

		&.is-up {
			background: var(--color-accent);
		}

		&.is-down {
			background: #c44b4b;
		}
	}

	.setup-preset-stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
		gap: calc(120 * var(--scale));
		padding: calc(160 * var(--scale)) calc(180 * var(--scale));
		border-radius: 12px;
		background: rgb(var(--color-ink-rgb) / 0.05);
	}

	.setup-preset-stat {
		display: grid;
		gap: 2px;
		min-width: 0;
	}

	.setup-preset-stat-label {
		font-family: var(--font-body);
		font-size: 0.78rem;
		color: var(--color-muted);
		white-space: nowrap;
	}

	.setup-preset-stat-value {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 1.05rem;
		font-variant-numeric: tabular-nums;
		letter-spacing: -0.02em;
		color: var(--color-ink);

		&.is-up {
			color: var(--color-accent);
		}

		&.is-down {
			color: #c44b4b;
		}
	}

	.setup-field {
		display: grid;
		gap: calc(120 * var(--scale));
		min-width: 0;
	}

	.setup-field input[type='range'] {
		width: 100%;
		accent-color: var(--color-accent);
	}

	.setup-budget-value {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 1.35rem;
		letter-spacing: -0.02em;
	}

	.setup-username {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: stretch;
		border: 1px solid rgb(var(--color-ink-rgb) / 0.22);
		border-radius: 12px;
		background: var(--color-bg);
		overflow: hidden;

		&:focus-within {
			border-color: var(--color-accent);
			box-shadow: 0 0 0 4px rgb(var(--color-accent-rgb) / 0.16);
		}

		input {
			min-height: 52px;
			min-width: 0;
			padding: 0.85rem 1rem;
			border: 0;
			background: transparent;
			color: var(--color-ink);
			font-family: var(--font-body);
			font-size: 1.02rem;

			&:focus,
			&:focus-visible {
				outline: none;
			}

			&::placeholder {
				color: var(--color-muted);
			}
		}
	}

	.setup-domain {
		display: flex;
		align-items: center;
		padding-inline: 0.85rem;
		border-left: 1px solid rgb(var(--color-ink-rgb) / 0.14);
		font-family: var(--font-body);
		font-size: 0.95rem;
		color: var(--color-muted);
		white-space: nowrap;
	}

	.setup-hint {
		min-height: 1.2em;
		font-family: var(--font-body);
		font-size: 0.92rem;
		color: var(--color-muted);
	}

	.setup-ready-heading {
		margin: 0 0 calc(240 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: clamp(1.4rem, 2.4vw, 1.8rem);
		letter-spacing: -0.02em;
	}

	.setup-creds {
		display: grid;
		gap: calc(280 * var(--scale));
		margin: calc(360 * var(--scale)) 0 calc(400 * var(--scale));
	}

	.setup-cred {
		display: grid;
		gap: calc(80 * var(--scale));
		min-width: 0;

		dt {
			margin: 0;
			font-family: var(--font-display);
			font-weight: var(--weight-medium);
			font-size: 0.72rem;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			color: var(--color-muted);
		}

		dd {
			display: flex;
			align-items: center;
			gap: calc(160 * var(--scale));
			margin: 0;
			min-width: 0;
		}

		code {
			flex: 1 1 auto;
			min-width: 0;
			overflow-wrap: anywhere;
			font-family: var(
				--font-mono,
				ui-monospace,
				SFMono-Regular,
				Menlo,
				monospace
			);
			font-size: 0.95rem;
			color: var(--color-ink);
		}
	}

	.setup-cred-copy {
		flex: 0 0 auto;
		padding: 0;
		border: 0;
		background: transparent;
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 0.68rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-muted);
		cursor: pointer;
		transition: color var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible,
		&.is-copied {
			color: var(--color-accent);
		}

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

	.setup-help-heading {
		margin: 0 0 calc(32 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 0.72rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.setup-help {
		display: grid;
		gap: calc(140 * var(--scale));
		margin: 0;
		padding: 0;
		list-style: none;

		a {
			color: var(--color-ink);
			text-decoration: underline;
			text-underline-offset: 0.18em;
			transition: color var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				color: var(--color-accent);
			}
		}
	}

	.setup-ready-links {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: calc(280 * var(--scale)) calc(400 * var(--scale));
		margin: calc(360 * var(--scale)) 0 0;
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 0.92rem;
	}

	.setup-ready-open {
		color: var(--color-accent);
		text-decoration: none;

		&:hover,
		&:focus-visible {
			text-decoration: underline;
			text-underline-offset: 0.18em;
		}
	}

	.setup-ready-mcp {
		color: var(--color-muted);
		text-decoration: underline;
		text-underline-offset: 0.18em;

		&:hover,
		&:focus-visible {
			color: var(--color-accent);
		}
	}

	.setup-provision {
		gap: calc(220 * var(--scale));
		justify-items: center;
		text-align: center;
	}

	.setup-provision-percent {
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: 2rem;
		letter-spacing: -0.03em;
		font-variant-numeric: tabular-nums;
	}

	.setup-provision-bar {
		width: min(100%, 16rem);
		height: 8px;
		border-radius: 999px;
		background: rgb(var(--color-ink-rgb) / 0.1);
		overflow: hidden;
	}

	.setup-provision-fill {
		display: block;
		height: 100%;
		border-radius: inherit;
		background: var(--color-accent);
		transition: width 0.45s var(--ease-out);
	}
}


/* ./components/checkout-sheet.css */
/* Root class matches filename: checkout-sheet.css → .checkout-sheet */
/* Liquid-glass sheet chrome — frosted panel only, Stripe form stays transparent. */

.checkout-sheet {
	--sheet-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
	--sheet-ease-leave: cubic-bezier(0.4, 0, 0.2, 1);
	--sheet-radius: 1.35rem;
	--sheet-gutter: 0px;
	--sheet-inset-bottom: 0px;
	--sheet-shadow:
		0 22px 48px rgb(var(--color-ink-rgb) / 0.14), 0 4px 14px rgb(0 0 0 / 0.06),
		0 0 0 0.5px rgb(var(--color-ink-rgb) / 0.04);
	--sheet-border: rgb(255 255 255 / 0.72);
	--sheet-glass-bg: rgb(255 255 255 / 0.54);
	--sheet-glass-blur: blur(48px) saturate(200%);
	--sheet-backdrop-bg: rgb(var(--color-ink-rgb) / 0.16);
	--sheet-backdrop-blur: blur(10px) saturate(150%);

	position: fixed;
	inset: 0;
	z-index: 50;
	color-scheme: light dark;
	pointer-events: none;

	&.is-open {
		pointer-events: auto;
	}

	.checkout-sheet-backdrop {
		position: absolute;
		inset: 0;
		border: 0;
		padding: 0;
		margin: 0;
		cursor: pointer;
		background: var(--sheet-backdrop-bg);
		backdrop-filter: var(--sheet-backdrop-blur);
		-webkit-backdrop-filter: var(--sheet-backdrop-blur);
		opacity: 0;
		transition: opacity 320ms var(--sheet-ease-leave);

		.is-open & {
			opacity: 1;
			transition: opacity 380ms var(--sheet-ease-enter);
		}
	}

	.checkout-sheet-panel {
		position: absolute;
		left: var(--sheet-gutter);
		right: var(--sheet-gutter);
		bottom: calc(-100% - var(--sheet-inset-bottom));
		display: flex;
		flex-direction: column;
		width: auto;
		/* svh = Safari chrome visible. dvh draws the Subscribe button under the bar. */
		height: 100svh;
		max-height: 100svh;
		overflow: hidden;
		color-scheme: light dark;
		border: 1px solid var(--sheet-border);
		border-bottom: 0;
		border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
		box-shadow:
			var(--sheet-shadow),
			inset 0 1px 0 rgb(255 255 255 / 0.88),
			inset 0 -0.5px 0 rgb(255 255 255 / 0.34);
		transition: bottom 520ms var(--sheet-ease-leave);

		.is-open & {
			bottom: var(--sheet-inset-bottom);
			transition: bottom 560ms var(--sheet-ease-enter);
		}
	}

	.checkout-sheet-glass {
		position: absolute;
		inset: 0;
		z-index: 0;
		border-radius: inherit;
		overflow: hidden;
		pointer-events: none;
		background: var(--sheet-glass-bg);
		backdrop-filter: var(--sheet-glass-blur);
		-webkit-backdrop-filter: var(--sheet-glass-blur);
		-webkit-mask-image: linear-gradient(#fff 0 0);
		mask-image: linear-gradient(#fff 0 0);

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			background: linear-gradient(
				180deg,
				rgb(255 255 255 / 0.52) 0%,
				rgb(255 255 255 / 0.2) 40%,
				rgb(250 252 250 / 0.32) 100%
			);
			box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.58);
		}

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			background: linear-gradient(
				135deg,
				rgb(var(--color-accent-rgb) / 0.06) 0%,
				transparent 42%,
				rgb(255 255 255 / 0.08) 100%
			);
			pointer-events: none;
		}

		.shine {
			position: absolute;
			inset: -40% -20%;
			background: linear-gradient(
				118deg,
				transparent 40%,
				rgb(255 255 255 / 0.12) 48%,
				rgb(255 255 255 / 0.42) 50.5%,
				rgb(255 255 255 / 0.12) 53%,
				transparent 62%
			);
			transform: translateX(-40%) rotate(2deg);
			animation: checkout-sheet-shine 8s var(--ease-out) infinite;
			filter: blur(10px);
			opacity: 0.78;
		}

		.specular {
			position: absolute;
			top: 0;
			left: 7%;
			right: 7%;
			height: 36%;
			border-radius: 999px;
			background: linear-gradient(
				180deg,
				rgb(255 255 255 / 0.62),
				rgb(255 255 255 / 0)
			);
			filter: blur(12px);
			opacity: 0.55;
		}
	}

	.checkout-sheet-chrome {
		position: relative;
		z-index: 1;
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: flex-end;
		padding: 0.45rem 0.75rem 0;
	}

	.checkout-sheet-close {
		min-height: 44px;
		padding: 0.35rem 0.65rem;
		border: 0;
		background: transparent;
		color: var(--color-muted);
		font: inherit;
		font-size: 0.95rem;
		cursor: pointer;
	}

	.checkout-sheet-body {
		position: relative;
		z-index: 1;
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
		padding: 0.35rem 0.75rem 0.5rem;
		overflow: auto;
	}

	.stripe-embed {
		display: flex;
		flex: 1;
		flex-direction: column;
		width: 100%;
		min-height: 0;
		background: transparent;

		> * {
			flex: 1;
			min-height: 0;
		}
	}
}

@keyframes checkout-sheet-shine {
	0% {
		transform: translateX(-45%) rotate(2deg);
	}
	55%,
	100% {
		transform: translateX(45%) rotate(2deg);
	}
}

@media (prefers-color-scheme: dark) {
	.checkout-sheet {
		--sheet-shadow:
			0 22px 52px rgb(0 0 0 / 0.58), 0 4px 12px rgb(0 0 0 / 0.32),
			0 0 0 0.5px rgb(0 0 0 / 0.4);
		--sheet-border: rgb(255 255 255 / 0.06);
		--sheet-glass-bg: rgb(16 18 16 / 0.92);
		--sheet-glass-blur: blur(44px) saturate(135%);
		--sheet-backdrop-bg: rgb(0 0 0 / 0.72);
		--sheet-backdrop-blur: blur(8px) saturate(110%);

		.checkout-sheet-panel {
			box-shadow:
				var(--sheet-shadow),
				inset 0 1px 0 rgb(255 255 255 / 0.05),
				inset 0 -0.5px 0 rgb(0 0 0 / 0.28);
		}

		.checkout-sheet-glass {
			&::before {
				background: linear-gradient(
					180deg,
					rgb(255 255 255 / 0.04) 0%,
					rgb(255 255 255 / 0.01) 36%,
					rgb(0 0 0 / 0.14) 100%
				);
				box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05);
			}

			&::after {
				background: linear-gradient(
					135deg,
					rgb(var(--color-accent-rgb) / 0.03) 0%,
					transparent 52%,
					rgb(0 0 0 / 0.1) 100%
				);
			}

			.shine {
				background: linear-gradient(
					118deg,
					transparent 40%,
					rgb(255 255 255 / 0.03) 48%,
					rgb(255 255 255 / 0.08) 50.5%,
					rgb(255 255 255 / 0.03) 53%,
					transparent 62%
				);
				filter: blur(24px);
				opacity: 0.16;
			}

			.specular {
				background: linear-gradient(
					180deg,
					rgb(255 255 255 / 0.1),
					rgb(255 255 255 / 0)
				);
				filter: blur(16px);
				opacity: 0.1;
			}
		}
	}
}

@media (min-width: 900px) {
	.checkout-sheet {
		--sheet-gutter: 0;
		--sheet-inset-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
		--sheet-width: min(28rem, calc(100vw - 2.5rem));
	}

	.checkout-sheet .checkout-sheet-panel {
		left: 50%;
		right: auto;
		width: var(--sheet-width);
		height: auto;
		max-height: min(88dvh, 54rem);
		margin-left: calc(var(--sheet-width) / -2);
		border-bottom: 1px solid var(--sheet-border);
		border-radius: var(--sheet-radius);
	}

	.checkout-sheet .checkout-sheet-chrome {
		display: none;
	}

	.checkout-sheet .checkout-sheet-body {
		padding: 1.2rem 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.checkout-sheet {
		.checkout-sheet-backdrop,
		.checkout-sheet-panel {
			transition-duration: 200ms;
		}

		.checkout-sheet-glass .shine {
			animation: none;
			opacity: 0;
		}
	}
}


/* ./components/gis-prompt.css */
/* GIS injects #credential_picker_container on document.body.
   Dark pages with color-scheme: light dark get an opaque white iframe
   canvas; light matches Google's document so the canvas stays clear. */
#credential_picker_container {
	color-scheme: light;

	iframe {
		color-scheme: light;
		background: transparent;
	}
}


/* ./components/compare.css */
/* Root class matches filename: compare.css → .compare */

.compare {
	--compare-table-max: min(calc(100vw - 2 * var(--space-page-x)), 112rem);
	--compare-table-half: min(calc(50vw - var(--space-page-x)), 56rem);
	min-height: 100dvh;
	overflow-x: clip;
	background: var(--color-bg);
	color: var(--color-ink);
	padding-block: var(--space-header-y) calc(1600 * var(--scale));

	.inner {
		width: min(100%, var(--size-page));
		margin-inline: auto;
		padding-inline: var(--space-page-x);
	}

	.intro {
		margin-bottom: calc(720 * var(--scale));
		padding-bottom: calc(560 * var(--scale));
		border-bottom: 1px solid rgb(var(--color-ink-rgb) / 0.12);
	}

	.intro .eyebrow,
	.compare-cta > .eyebrow {
		display: inline-flex;
		align-items: center;
		gap: calc(90 * var(--scale));
		margin-bottom: calc(140 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(8 * var(--scale));
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.heading {
		max-width: none;
		margin-bottom: calc(280 * var(--scale));
	}

	.intro .title {
		margin-bottom: calc(280 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: clamp(1.75rem, 4vw, 3rem);
		line-height: 1.1;
		letter-spacing: -0.03em;
		color: var(--color-ink);

		.accent {
			font-family: var(--font-accent);
			font-style: italic;
			font-weight: var(--weight-regular);
			color: var(--color-accent);
		}
	}

	.lede {
		max-width: 40rem;
		font-family: var(--font-body);
		font-size: clamp(1.08rem, 1.55vw, 1.22rem);
		line-height: 1.45;
		color: var(--color-muted);
	}

	.intro .checked {
		margin-top: calc(200 * var(--scale));
	}

	.checked {
		margin-top: calc(480 * var(--scale));
		font-family: var(--font-display);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(4 * var(--scale));
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.block {
		margin-top: calc(720 * var(--scale));
	}

	.axis-grid {
		margin-bottom: calc(480 * var(--scale));

		h2 {
			margin-bottom: calc(280 * var(--scale));
			font-family: var(--font-display);
			font-weight: var(--weight-medium);
			font-size: clamp(1.5rem, 2.5vw, 1.95rem);
			letter-spacing: -0.03em;
		}
	}

	.cards {
		margin-top: calc(900 * var(--scale));

		h2 {
			margin-bottom: calc(360 * var(--scale));
			font-family: var(--font-display);
			font-weight: var(--weight-medium);
			font-size: clamp(1.5rem, 2.5vw, 1.95rem);
			letter-spacing: -0.03em;
		}

		> ul {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: calc(240 * var(--scale));
		}
	}

	.card {
		display: flex;
		flex-direction: column;
		gap: calc(140 * var(--scale));
		height: 100%;
		padding: calc(320 * var(--scale));
		border: 1px solid rgb(var(--color-ink-rgb) / 0.12);
		border-radius: calc(115 * var(--scale));
		transition:
			border-color var(--duration-fast) var(--ease-out),
			color var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			border-color: var(--color-accent);

			.more {
				opacity: 0.72;
			}

			.arrow {
				transform: translateX(0.18em);
			}
		}

		.card-vs {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			gap: calc(80 * var(--scale));
			font-family: var(--font-display);
			font-weight: var(--weight-medium);
			font-size: calc(180 * var(--scale));
			letter-spacing: calc(-4 * var(--scale));
			white-space: nowrap;

			.mark {
				width: 1.2em;
				height: 1.2em;
			}

			.vs {
				font-size: 0.62em;
				letter-spacing: calc(6 * var(--scale));
				text-transform: uppercase;
				color: var(--color-muted);
			}
		}

		p {
			font-family: var(--font-body);
			font-size: calc(200 * var(--scale));
			line-height: 1.45;
			color: var(--color-muted);
		}
	}

	.more {
		display: inline-flex;
		align-items: center;
		gap: 0.28em;
		margin-top: auto;
		padding-top: calc(115 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(180 * var(--scale));
		color: var(--color-accent);
		white-space: nowrap;
	}

	.arrow {
		flex-shrink: 0;
		width: 0.85em;
		height: 0.85em;
		transition: transform var(--duration-fast) var(--ease-out);
	}

	.method {
		margin-top: calc(900 * var(--scale));
		max-width: 40rem;
	}

	.marks {
		margin-top: calc(360 * var(--scale));

		.note {
			max-width: 44rem;
			font-family: var(--font-display);
			font-size: max(0.72rem, calc(140 * var(--scale)));
			letter-spacing: calc(4 * var(--scale));
			text-transform: uppercase;
			line-height: 1.5;
			color: var(--color-muted);

			span {
				display: block;
			}

			span + span {
				margin-top: 0.35em;
			}

			strong {
				font-weight: var(--weight-medium);
				color: var(--color-ink);
			}
		}

		ul {
			display: none;
		}
	}

	.claim-list {
		margin: 0 0 1.5em;
		padding-left: 1.4em;
		list-style: disc;

		li {
			margin: 0.7em 0;
			padding-left: 0.25em;
			line-height: 1.6;
		}
	}

	.footnotes {
		margin-left: 0.15em;
		font-family: var(--font-display);
		font-size: 0.72em;
		font-weight: var(--weight-medium);
		letter-spacing: 0;

		a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 1.35em;
			min-height: 1.35em;
			padding-inline: 0.2em;
			color: var(--color-accent);
			text-decoration: none;
		}
	}

	.compare-faq {
		margin-top: calc(720 * var(--scale));

		h2 {
			margin-bottom: calc(280 * var(--scale));
			font-family: var(--font-display);
			font-weight: var(--weight-medium);
			font-size: clamp(1.5rem, 2.5vw, 1.95rem);
			letter-spacing: -0.03em;
		}

		.faq-accordion {
			width: 100%;
			margin-inline: 0;
		}
	}

	.adjacent {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: calc(240 * var(--scale));
		margin-top: calc(900 * var(--scale));
		padding-top: calc(480 * var(--scale));
		border-top: 1px solid rgb(var(--color-ink-rgb) / 0.12);
	}

	.adjacent-link {
		display: flex;
		flex-direction: column;
		gap: calc(60 * var(--scale));
		min-width: 0;
		transition: color var(--duration-fast) var(--ease-out);

		&.next {
			text-align: right;
			justify-self: end;
		}

		.label {
			font-family: var(--font-display);
			font-size: calc(140 * var(--scale));
			letter-spacing: calc(6 * var(--scale));
			text-transform: uppercase;
			color: var(--color-muted);
		}

		.question {
			font-family: var(--font-display);
			font-weight: var(--weight-medium);
			font-size: calc(240 * var(--scale));
			line-height: 1.15;
			letter-spacing: calc(-12 * var(--scale));
		}

		&:hover,
		&:focus-visible {
			color: var(--color-accent);
		}
	}

	@media (max-width: 900px) {
		padding-block: var(--space-header-y) calc(1200 * var(--scale));

		.cards > ul {
			grid-template-columns: 1fr;
		}

		.adjacent {
			grid-template-columns: 1fr;
		}

		.adjacent-link.next {
			text-align: left;
			justify-self: start;
		}

		.marks {
			margin-top: 1.35rem;

			.note {
				display: none;
			}

			ul {
				display: flex;
				flex-direction: column;
				gap: 0.45rem;
			}

			li {
				display: grid;
				grid-template-columns: 6.25rem 1fr;
				align-items: center;
				column-gap: 0.75rem;
			}

			.score {
				width: 100%;
				justify-content: center;
			}

			p {
				margin: 0;
				font-family: var(--font-body);
				font-size: 0.95rem;
				line-height: 1.4;
				color: var(--color-muted);
				text-transform: none;
				letter-spacing: 0;
			}
		}
	}

	@media (min-width: 600px) and (max-width: 900px) {
		.marks ul {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 1.25rem;
		}

		.marks li {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.55rem;
			text-align: center;
		}

		.marks .score {
			width: auto;
		}
	}
}

.compare-matrix-wrap,
.axis-table-wrap {
	isolation: isolate;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	padding-block: calc(115 * var(--scale));
	-webkit-overflow-scrolling: touch;
}

.compare-matrix-wrap {
	--compare-ours-outset: max(0.9rem, calc(200 * var(--scale)));
	--compare-ours-pop: max(0.75rem, calc(170 * var(--scale)));
	--compare-label-w: 11.5rem;
	display: grid;
	grid-template-columns: var(--compare-label-w) repeat(6, minmax(0, 1fr));
	align-items: stretch;
	width: var(--compare-table-max);
	max-width: none;
	margin-left: calc(50% - var(--compare-table-half));
	padding: var(--compare-ours-outset);
	overflow: visible;

	.ours-card {
		grid-column: 7;
		grid-row: 1;
		margin-block: calc(-1 * var(--compare-ours-pop)) 1.2rem;
		margin-inline: calc(-1 * var(--compare-ours-pop));
		border-radius: calc(200 * var(--scale));
		background: linear-gradient(
			to top,
			color-mix(in srgb, var(--color-surface) 78%, var(--color-accent)),
			color-mix(in srgb, var(--color-surface) 91%, var(--color-accent)) 42%,
			var(--color-surface)
		);
		box-shadow:
			0 0 0 1px rgb(var(--color-ink-rgb) / 0.05),
			0 1px 1px -0.5px rgb(var(--color-ink-rgb) / 0.05),
			0 3px 3px -1.5px rgb(var(--color-ink-rgb) / 0.05),
			0 6px 6px -3px rgb(var(--color-ink-rgb) / 0.05),
			0 12px 12px -6px rgb(var(--color-ink-rgb) / 0.04),
			0 24px 24px -12px rgb(var(--color-ink-rgb) / 0.04);
		pointer-events: none;
	}

	.compare-matrix {
		grid-column: 1 / -1;
		grid-row: 1;
		position: relative;
		z-index: 1;

		caption {
			padding-top: calc(280 * var(--scale));
		}
	}
}

.axis-table-wrap {
	--compare-leaf-bleed: max(0.75rem, calc(180 * var(--scale)));
	width: calc(100% + 2 * var(--compare-leaf-bleed));
	max-width: none;
	margin-inline: calc(-1 * var(--compare-leaf-bleed));
}

.compare-matrix,
.axis-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-family: var(--font-body);
	font-size: max(0.95rem, calc(190 * var(--scale)));
	line-height: 1.4;

	caption {
		caption-side: bottom;
		padding-top: calc(115 * var(--scale));
		text-align: left;
		font-family: var(--font-display);
		font-size: max(0.72rem, calc(110 * var(--scale)));
		letter-spacing: calc(4 * var(--scale));
		text-transform: uppercase;
		color: var(--color-muted);
	}

	th,
	td {
		padding: calc(200 * var(--scale)) calc(115 * var(--scale));
		border-bottom: 1px solid rgb(var(--color-ink-rgb) / 0.12);
		vertical-align: top;
		text-align: left;
	}

	thead th {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: max(0.7rem, calc(115 * var(--scale)));
		letter-spacing: calc(6 * var(--scale));
		text-transform: uppercase;
		color: var(--color-muted);
		white-space: nowrap;
		vertical-align: middle;
	}

	.col-link {
		display: inline-flex;
		align-items: center;
		gap: 0.22em;
		color: inherit;
		text-decoration: none;
		transition: color var(--duration-fast) var(--ease-out);

		.arrow {
			width: 0.85em;
			height: 0.85em;
			opacity: 0.38;
			transform: translateX(-0.15em);
			transition:
				transform var(--duration-base) var(--ease-out),
				opacity var(--duration-fast) var(--ease-out);
		}

		&:hover,
		&:focus-visible {
			color: var(--color-accent);

			.arrow {
				opacity: 1;
				transform: translateX(0.1em);
			}
		}

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

	tbody th {
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: max(0.95rem, calc(200 * var(--scale)));
		letter-spacing: calc(-6 * var(--scale));
		min-width: calc(1800 * var(--scale));
	}

	.axis-table thead th:not(:first-child),
	.axis-table td {
		min-width: 8.75rem;
	}

	.cell-brand {
		display: none;
	}

	a {
		color: var(--color-accent);
	}

	.ours {
		position: relative;
		z-index: 1;
		background: transparent;
	}

	tbody tr:last-child .ours {
		border-bottom: 0;

		&::before {
			content: '';
			position: absolute;
			z-index: -1;
			pointer-events: none;
			inset-inline: calc(40 * var(--scale));
			bottom: 0;
			height: 200vh;
			border-radius: calc(115 * var(--scale));
			background: linear-gradient(
				to top,
				rgb(var(--color-accent-rgb) / 0.2),
				rgb(var(--color-accent-rgb) / 0.08) 42%,
				rgb(var(--color-accent-rgb) / 0.035)
			);
		}
	}
}

.compare-matrix tbody tr:last-child th,
.compare-matrix tbody tr:last-child td {
	border-bottom: 0;
}

.compare-matrix tbody tr:last-child .ours::before {
	content: none;
}

.axis-table .ours {
	padding-inline: calc(280 * var(--scale));
}

.compare-matrix {
	table-layout: fixed;
	width: 100%;

	tbody th,
	thead th:first-child {
		width: var(--compare-label-w);
		min-width: 0;
	}

	thead th:not(:first-child),
	td {
		min-width: 0;
	}

	thead th:nth-last-child(2),
	td:nth-last-child(2) {
		padding-inline-end: calc(
			160 * var(--scale) + var(--compare-ours-pop) + 0.2rem
		);
	}

	.col-link {
		position: relative;
		max-width: 100%;
		padding-inline-end: 1.2em;
		vertical-align: middle;

		.arrow {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
		}

		&:hover .arrow,
		&:focus-visible .arrow {
			transform: translate(0.1em, -50%);
		}
	}

	.axis-label {
		max-width: none;
	}
}

.axis-label {
	display: block;
	max-width: 12rem;
}

.cell-copy {
	margin-top: calc(80 * var(--scale));
	color: var(--color-muted);
	font-size: max(0.88rem, calc(170 * var(--scale)));
	line-height: 1.45;
}

@media (max-width: 1280px) and (min-width: 901px) {
	.compare-matrix-wrap {
		--compare-label-w: 9.5rem;
	}

	.compare-matrix {
		th,
		td {
			padding: calc(115 * var(--scale)) calc(100 * var(--scale));
		}

		thead th:nth-last-child(2),
		td:nth-last-child(2) {
			padding-inline-end: calc(
				100 * var(--scale) + var(--compare-ours-pop) + 0.2rem
			);
		}

		thead th {
			letter-spacing: calc(2 * var(--scale));
			font-size: max(0.62rem, calc(140 * var(--scale)));
		}

		tbody th {
			width: var(--compare-label-w);
			font-size: max(0.82rem, calc(175 * var(--scale)));
		}

		.cell-copy {
			font-size: max(0.78rem, calc(150 * var(--scale)));
		}

		.compare-brand .mark {
			width: 1em;
			height: 1em;
		}
	}
}

.score {
	display: inline-flex;
	align-items: center;
	padding: 0.15em 0.55em;
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: max(0.68rem, calc(140 * var(--scale)));
	letter-spacing: calc(4 * var(--scale));
	text-transform: uppercase;

	&.yes {
		background: var(--color-accent);
		color: var(--color-white);
	}

	&.partial {
		background: #f6e59b;
		color: #6f5608;
	}

	&.no {
		background: #f5c9a8;
		color: #c24a12;
	}
}

@media (max-width: 900px) {
	.compare-matrix-wrap,
	.axis-table-wrap {
		display: block;
		width: 100%;
		margin-inline: 0;
		overflow: visible;
		padding-inline: 0;
		padding-block: 0;
	}

	.compare-matrix-wrap .ours-card {
		display: none;
	}

	.compare-matrix {
		min-width: 0;
	}

	.compare-matrix,
	.axis-table {
		display: block;
		width: 100%;

		caption {
			display: block;
			width: 100%;
			max-width: none;
			padding: 0 0 1rem;
			line-height: 1.45;
			text-align: center;
		}

		thead {
			display: none;
		}

		tbody {
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}

		tr {
			display: flex;
			flex-direction: column;
			padding: 1rem 0.7rem 0.35rem;
			border: 1px solid rgb(var(--color-ink-rgb) / 0.12);
			border-radius: calc(115 * var(--scale));
			background: var(--color-bg);
		}

		th,
		td {
			padding: 0;
			border-bottom: 0;
			min-width: 0;
		}

		tbody th {
			margin-bottom: 0.15rem;
			padding-bottom: 0.7rem;
			border-bottom: 1px solid rgb(var(--color-ink-rgb) / 0.12);
			font-size: 1.05rem;
			letter-spacing: -0.03em;
		}

		td {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			grid-template-areas:
				'brand score'
				'copy copy';
			align-items: center;
			gap: 0.35rem 0.75rem;
			padding: 0.85rem 0;
			border-top: 1px solid rgb(var(--color-ink-rgb) / 0.08);
		}

		td:first-of-type {
			border-top: 0;
		}

		td:nth-last-child(2) {
			padding-inline-end: 0;
		}

		.cell-brand {
			display: inline-flex;
			grid-area: brand;
			min-width: 0;
			font-family: var(--font-display);
			font-weight: var(--weight-medium);
			font-size: 0.82rem;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			color: var(--color-ink);
		}

		.score {
			grid-area: score;
			justify-self: end;
		}

		.cell-copy {
			grid-area: copy;
			margin-top: 0;
		}

		.ours {
			z-index: auto;
			margin-inline: -0.45rem;
			margin-bottom: -0.07rem;
			padding: 0.75rem 0.45rem;
			border-radius: calc(120 * var(--scale));
			background: rgb(var(--color-accent-rgb) / 0.08);
			border-bottom-color: transparent;
		}

		tbody tr:last-child .ours::before {
			content: none;
		}
	}

	.axis-label {
		max-width: none;
	}
}

.compare-sources {
	margin-top: calc(900 * var(--scale));
	padding-top: calc(480 * var(--scale));
	border-top: 1px solid rgb(var(--color-ink-rgb) / 0.12);

	h2 {
		margin-bottom: calc(115 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: clamp(1.5rem, 2.5vw, 1.95rem);
		letter-spacing: -0.03em;
	}

	.lede {
		margin-bottom: calc(280 * var(--scale));
		max-width: 40rem;
		font-family: var(--font-body);
		font-size: clamp(1.02rem, 1.4vw, 1.12rem);
		line-height: 1.5;
		color: var(--color-muted);
	}

	ol {
		display: flex;
		flex-direction: column;
		gap: calc(120 * var(--scale));
	}

	li {
		display: flex;
		gap: 0.5em;
		font-family: var(--font-body);
		font-size: clamp(0.98rem, 1.3vw, 1.08rem);
		line-height: 1.45;
		scroll-margin-top: 5rem;

		&[hidden] {
			display: none;
		}

		&:target {
			margin-inline: -0.4rem;
			padding-inline: 0.4rem;
			border-radius: 0.35rem;
			background: rgb(var(--color-accent-rgb) / 0.08);
		}
	}

	.toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		margin-top: calc(280 * var(--scale));
		padding: 0;
		border: 0;
		background: transparent;
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(180 * var(--scale));
		color: var(--color-accent);
		cursor: pointer;
		transition: opacity var(--duration-fast) var(--ease-out);

		.icon {
			position: relative;
			flex-shrink: 0;
			width: 1.15em;
			height: 1.15em;
			border: 1.5px solid currentColor;
			border-radius: 50%;
			transition: transform var(--duration-base) var(--ease-out);
		}

		.bar {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 42%;
			height: 1.5px;
			background: currentColor;
			border-radius: 999px;
			transition: transform var(--duration-base) var(--ease-out);

			&.horizontal {
				transform: translate(-50%, -50%);
			}

			&.vertical {
				transform: translate(-50%, -50%) rotate(90deg);
			}
		}

		&[aria-expanded='true'] {
			.icon {
				transform: rotate(90deg);
			}

			.bar.vertical {
				transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
			}
		}

		&:hover,
		&:focus-visible {
			opacity: 0.72;
		}
	}

	.index {
		flex-shrink: 0;
		color: var(--color-muted);
		font-family: var(--font-display);
		font-size: 0.9em;
	}

	a {
		color: var(--color-accent);
		text-decoration: underline;
		text-underline-offset: 0.18em;
	}

	@media (max-width: 900px) {
		a {
			flex: 1;
			min-width: 0;
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			gap: 0.5em;

			.icon {
				margin-inline-start: 0;
			}
		}
	}
}

.compare-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(280 * var(--scale));
	margin-top: calc(900 * var(--scale));
	padding-top: calc(560 * var(--scale));
	border-top: 1px solid rgb(var(--color-ink-rgb) / 0.12);

	> .eyebrow {
		margin-bottom: 0;
	}

	.heading {
		margin-bottom: 0;
	}
}


/* ./components/compare-brand.css */
/* Root class matches filename: compare-brand.css → .compare-brand */

.compare-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	white-space: nowrap;
	vertical-align: middle;

	.mark {
		display: block;
		width: 1.15em;
		height: 1.15em;
		flex-shrink: 0;
		overflow: hidden;
		border-radius: 50%;

		> span {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

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

	&.logo-only .name {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}


/* ./components/landing.css */
.landing {
	width: 100%;
	overflow-x: clip;
	background: var(--color-bg);
	padding-block: var(--space-page-y);
	padding-bottom: 0;

	> .site-header {
		position: relative;
		z-index: 2;
		width: min(100%, var(--size-page));
		margin-inline: auto;
		margin-top: calc(var(--space-header-y) - var(--space-landing-y-start));
		margin-bottom: calc(640 * var(--scale));
		padding-inline: var(--space-page-x);
	}

	.section {
		display: grid;
		grid-template-columns: minmax(0, 6844fr) minmax(0, 5034fr);
		align-items: stretch;
		column-gap: 0;
		width: min(100%, var(--size-content));
		margin-inline: auto;
		padding-inline: var(--space-page-x);

		& + .section {
			margin-top: var(--space-section);
		}
	}

	/* Text column (badge internals stay under .app-store-badge) */
	.content {
		display: flex;
		flex-direction: column;
		min-width: 0;
		padding-top: var(--space-content-top);
		/* Figma: copy overlaps phone ~14% */
		margin-left: calc(var(--space-overlap) * -1);
		padding-left: calc(var(--space-overlap) * 0.08);
		position: relative;
		z-index: 1;

		&.hero {
			justify-content: space-between;
			gap: var(--space-hero-to-cta);
			padding-top: var(--space-hero-pad-top);
			padding-bottom: var(--space-hero-pad-bottom);
			min-height: 100%;

			.heading {
				margin-top: var(--space-hero-brand-to-heading);
			}

			.lede {
				margin-top: var(--space-hero-heading-to-lede);
				max-width: 22rem;
				font-family: var(--font-body);
				font-size: clamp(1.05rem, 1.45vw, 1.18rem);
				line-height: 1.4;
				color: var(--color-muted);
			}
		}
	}

	@media (max-width: 900px) {
		.section {
			grid-template-columns: 1fr;
			row-gap: calc(420 * var(--scale));
		}

		.content {
			margin-left: 0;
			padding-left: 0;
			min-height: auto;
			justify-content: flex-start;

			&.hero {
				padding-top: 0;
				padding-bottom: 0;
			}
		}
	}
}

.not-found {
	display: grid;
	min-height: 100dvh;
	place-items: center;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: clamp(2rem, 6vw, 4rem);
}