@charset "UTF-8";

@layer tokens, base, layout, components, utilities;

@layer tokens {
	:root {

		--navy-900: #0a1a33;
		--navy-800: #0f2347;
		--navy-600: #0f1b3d;

		--green-50: #ecfdf5;
		--green-100: #dcfce7;
		--green-200: #c9f3da;
		--green-500: #16a34a;
		--green-600: #15803d;
		--green-700: #166534;

		--emerald-700: #047857;
		--emerald-800: #065f46;

		--blue-100: #dbeafe;
		--blue-500: #2563eb;
		--blue-600: #1d4ed8;

		--sky-50: #f0f9ff;
		--sky-100: #e0f2fe;
		--sky-500: #0ea5e9;
		--sky-600: #0284c7;
		--sky-700: #0369a1;

		--violet-100: #ede9fe;
		--violet-700: #5b21b6;

		--red-50: #fef2f2;
		--red-100: #fee2e2;
		--red-600: #dc2626;
		--red-700: #b91c1c;

		--amber-100: #fef3c7;
		--amber-700: #b45309;

		--ink-900: #0b0d12;
		--ink-800: #1a1d24;
		--ink-700: #30333c;
		--ink-600: #4a4e58;
		--ink-500: #64748b;

		--color-accent: var(--brand-600, var(--emerald-700));
		--color-accent-hover: var(--brand-700, var(--emerald-800));
		--color-accent-surface: var(--brand-50, var(--green-50));
		--color-accent-tint: var(--brand-100, var(--green-100));
		--color-accent-tint-strong: var(--brand-200, var(--green-200));
		--color-accent-ink: var(--brand-700, var(--green-700));

		--color-text: var(--ink-800);
		--color-text-muted: var(--ink-700);
		--color-text-subtle: var(--ink-600);
		--color-heading: #0b225b;
		--color-text-inverse: #fff;
		--color-text-on-navy: #c8d1e0;
		--color-text-on-navy-dim: #9fb0d0;
		--color-accent-on-navy: var(--brand-300, #6ee7b7);

		--color-surface: #fff;
		--color-surface-sunken: #f6f7fb;
		--color-surface-inverse: var(--navy-900);
		--color-border: #e4e7ee;
		--color-border-faint: #f0f2f6;
		--color-danger: var(--amber-700);

		--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

		--text-2xs: 0.6875rem;
		--text-xs: 0.75rem;
		--text-sm: 0.8125rem;
		--text-base: 0.875rem;
		--text-md: 0.9375rem;
		--text-lg: 1rem;
		--text-xl: 1.25rem;
		--text-2xl: 1.5rem;

		--text-display: clamp(1.875rem, 10.5cqi, 3.625rem);
		--text-section: clamp(1.375rem, 1.05rem + 1.35cqi, 2rem);
		--text-panel: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
		--text-lede: clamp(0.9375rem, 0.9rem + 0.19vw, 1.0625rem);
		--text-section-lede: clamp(0.9375rem, 0.89rem + 0.28cqi, 1.0625rem);
		--text-eyebrow: clamp(0.6875rem, 0.66rem + 0.1cqi, 0.75rem);

		--leading-tight: 1.1;
		--leading-heading: 1.2;
		--leading-snug: 1.35;
		--leading-body: 1.6;

		--weight-body: 500;
		--weight-label: 600;
		--weight-strong: 700;
		--weight-heading: 800;
		--weight-display: 900;

		--space-3xs: 0.25rem;
		--space-2xs: 0.375rem;
		--space-xs: 0.5rem;
		--space-sm: 0.75rem;
		--space-md: clamp(0.875rem, 0.81rem + 0.33vw, 1rem);
		--space-lg: clamp(1.25rem, 1.11rem + 0.68vw, 1.5rem);
		--space-xl: clamp(1.5rem, 1.16rem + 1.63vw, 2rem);
		--space-2xl: clamp(2rem, 1.32rem + 3.26vw, 3rem);

		--gutter: clamp(1rem, 0.5rem + 2vw, 1.5rem);
		--section-rhythm: clamp(2.75rem, 1.65rem + 3vw, 4rem);
		--section-seam: var(--space-2xl);
		--section-header-gap: clamp(1.5rem, 1.2rem + 1.7cqi, 2.5rem);
		--measure-title: 46ch;
		--measure-lede: 58ch;
		--shell-width: 80rem;

		--masthead-logo-height: clamp(1.75rem, 1.55rem + 0.65vw, 2.125rem);
		--masthead-pad-block: var(--space-xs);
		--masthead-height: clamp(4rem, 3.6rem + 1.1vw, 4.5rem);

		--radius-sm: 0.625rem;
		--radius-md: 0.75rem;
		--radius-lg: 1rem;
		--radius-xl: 1.25rem;
		--radius-pill: 999px;

		--shadow-xs: 0 1px 3px rgb(0 0 0 / 6%);
		--shadow-sm: 0 2px 6px rgb(10 20 40 / 6%);
		--shadow-md: 0 10px 26px rgb(10 20 40 / 8%);
		--shadow-lg: 0 20px 45px rgb(10 20 40 / 25%);
		--shadow-device: 0 30px 60px rgb(10 20 40 / 30%);

		--ease: cubic-bezier(0.4, 0, 0.2, 1);
		--duration-fast: 150ms;
		--duration: 200ms;

		--motion-scale: 1;

		--focus-ring: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-accent);
	}

	@media (prefers-reduced-motion: reduce) {
		:root {
			--motion-scale: 0;
			--duration-fast: 1ms;
			--duration: 1ms;
		}
	}
}

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

	html {
		-webkit-text-size-adjust: 100%;
		touch-action: pan-x pan-y;
		scroll-behavior: smooth;
		scroll-padding-block-start: var(--masthead-height);
	}

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

	body {
		margin: 0;
		overflow-x: clip;
		font-family: var(--font-sans);
		font-weight: var(--weight-body);
		color: var(--color-text);
		background: var(--color-surface);
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

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

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

	button {
		font: inherit;
		color: inherit;
		cursor: pointer;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	figure,
	blockquote {
		margin: 0;
	}

	h1, h2, h3, h4 {
		margin: 0;
		color: var(--color-heading);
		font-weight: var(--weight-heading);
		text-wrap: balance;
	}

	p {
		color: var(--color-text-muted);
		font-weight: var(--weight-body);
		text-wrap: pretty;
	}

	strong,
	b {
		font-weight: var(--weight-strong);
		color: #293b66;
	}

	:focus-visible {
		outline: none;
		box-shadow: var(--focus-ring);
		border-radius: var(--radius-sm);
	}

	[tabindex='-1']:focus-visible {
		box-shadow: none;
	}
}

@layer layout {
	.page-shell {
		width: 100%;
		max-width: var(--shell-width);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	.page-section {
		padding-block: var(--section-rhythm);

		& > .page-shell {
			container: page-section / inline-size;
		}

		&[data-surface='sunken'] {
			background: var(--color-surface-sunken);
		}

		&:not([data-surface]) + &:not([data-surface]),
		&[data-surface='sunken'] + &[data-surface='sunken'] {
			padding-block-start: var(--section-seam);
		}
	}

	.page-section__eyebrow {
		--eyebrow-tint: var(--color-accent-tint);
		--eyebrow-fg: var(--color-accent-ink);

		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		inline-size: fit-content;
		margin-block: 0 var(--space-sm);
		padding: var(--space-3xs) var(--space-sm);
		border: 1px solid var(--eyebrow-tint);
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--eyebrow-tint) 45%, #fff);
		color: var(--eyebrow-fg);
		font-size: var(--text-eyebrow);
		font-weight: var(--weight-strong);
		line-height: var(--leading-snug);
		letter-spacing: 0.08em;
		text-transform: uppercase;

		&[data-tone='blue'] { --eyebrow-tint: var(--blue-100); --eyebrow-fg: var(--blue-600); }
		&[data-tone='sky'] { --eyebrow-tint: var(--sky-100); --eyebrow-fg: var(--sky-700); }
		&[data-tone='amber'] { --eyebrow-tint: var(--amber-100); --eyebrow-fg: var(--amber-700); }
		&[data-tone='red'] { --eyebrow-tint: var(--red-100); --eyebrow-fg: var(--red-700); }
		&[data-tone='violet'] { --eyebrow-tint: var(--violet-100); --eyebrow-fg: var(--violet-700); }

		&[data-align='center'] {
			margin-inline: auto;
		}
	}

	.page-section__title {
		font-size: var(--text-section);
		line-height: var(--leading-heading);
		letter-spacing: -0.015em;
		margin-block: 0 var(--section-header-gap);

		&:has(+ .page-section__lede) {
			margin-block-end: var(--space-sm);
		}

		&[data-align='center'] {
			max-inline-size: var(--measure-title);
			margin-inline: auto;
			text-align: center;
		}
	}

	.page-section__lede {
		font-size: var(--text-section-lede);
		font-weight: var(--weight-body);
		line-height: var(--leading-body);
		margin-block: 0 var(--section-header-gap);

		&[data-align='center'] {
			max-inline-size: var(--measure-lede);
			margin-inline: auto;
			text-align: center;
		}
	}
}

@layer components {

	.action-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-xs);
		min-block-size: 2.75rem;
		padding-block: 0.6875rem;
		padding-inline: var(--space-lg);
		border: 1.5px solid transparent;
		border-radius: var(--radius-sm);
		font-size: 0.90625rem;
		font-weight: var(--weight-heading);
		line-height: 1.2;
		white-space: nowrap;
		background: none;
		transition:
			transform var(--duration-fast) var(--ease),
			box-shadow var(--duration) var(--ease),
			background-color var(--duration-fast) var(--ease),
			border-color var(--duration-fast) var(--ease);

		&:hover {
			transform: translateY(calc(-1px * var(--motion-scale)));
		}

		&:active {
			transform: translateY(0);
		}

		&:disabled,
		&[aria-disabled='true'] {
			opacity: 0.6;
			cursor: not-allowed;
			transform: none;
		}

		&[data-variant='primary'] {
			background: var(--color-accent);
			color: var(--color-text-inverse);
			box-shadow: var(--shadow-sm);

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

		&[data-variant='navy'] {
			background: var(--navy-800);
			color: var(--color-text-inverse);

			&:hover {
				background: var(--navy-900);
			}
		}

		&[data-variant='outline'] {
			background: var(--color-surface);
			color: var(--color-accent);
			border-color: var(--color-accent);

			&:hover {
				background: color-mix(in srgb, var(--color-accent) 8%, white);
			}
		}

		&[data-variant='quiet'] {
			background: var(--color-surface);
			color: var(--color-accent);
			border-color: var(--color-accent);

			&:hover {
				background: var(--color-surface-sunken);
			}
		}

		&[data-variant='google'] {
			gap: var(--space-sm);
			background: var(--color-surface);
			color: var(--color-text);
			border-color: #d5dae4;
			font-weight: var(--weight-strong);
			box-shadow: none;

			&:hover {
				border-color: #b9c0cd;
				background: var(--color-surface-sunken);
			}
		}

		&[data-size='lg'] {
			padding-block: 0.875rem;
			padding-inline: 1.625rem;
			font-size: 0.96875rem;
			min-block-size: 3.125rem;
		}

		&[data-block] {
			inline-size: 100%;
		}

		&.is-loading {
			pointer-events: none;
			opacity: 0.75;
		}

		@media (width <= 30rem) {
			&[data-size='lg'] {
				inline-size: 100%;
			}
		}
	}

	.masthead {
		position: sticky;
		inset-block-start: 0;
		z-index: 50;
		background: color-mix(in srgb, var(--color-surface) 88%, transparent);
		backdrop-filter: blur(12px) saturate(150%);
		-webkit-backdrop-filter: blur(12px) saturate(150%);
		border-block-end: 1px solid var(--color-border);

		@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
			background: var(--color-surface);
		}

		@supports (animation-timeline: scroll()) {
			animation: masthead-elevate linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 var(--masthead-height);
		}

		@media (forced-colors: active) {
			border-block-end-color: CanvasText;
		}

		@media print {
			position: static;
			background: none;
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
	}

	.masthead__bar {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: clamp(1rem, 0.4rem + 1.7vw, 2rem);
		row-gap: 0;
		min-block-size: var(--masthead-height);
		padding-block: var(--masthead-pad-block);
		padding-inline:
			max(var(--gutter), env(safe-area-inset-left))
			max(var(--gutter), env(safe-area-inset-right));

		@media (width <= 56.25rem) {
			grid-template-columns: minmax(0, 1fr) auto;
		}
	}

	.masthead__brand {
		display: flex;
		align-items: center;
		justify-self: start;
		min-inline-size: 0;
		border-radius: var(--radius-sm);

		& img {
			block-size: var(--masthead-logo-height);
			inline-size: auto;
			max-inline-size: min(clamp(7rem, 20vw, 9.5rem), 100%);
			object-fit: contain;
			object-position: left center;
		}
	}

	.masthead__panel {
		display: contents;

		@media (width <= 56.25rem) {
			--panel-lift: calc(-0.5rem * var(--motion-scale));

			display: none;
			grid-column: 1 / -1;
			flex-direction: column;
			margin-block-start: var(--masthead-pad-block);
			border-block-start: 1px solid var(--color-border);
			max-block-size: calc(100dvh - var(--masthead-height) - var(--masthead-pad-block) - 1px);
			overflow-y: auto;
			overscroll-behavior: contain;
			opacity: 0;
			translate: 0 var(--panel-lift);
			transition:
				opacity var(--duration) var(--ease),
				translate var(--duration) var(--ease),
				display var(--duration) var(--ease);
			transition-behavior: allow-discrete;

			.masthead.is-expanded & {
				display: flex;
				opacity: 1;
				translate: 0 0;

				@starting-style {
					opacity: 0;
					translate: 0 var(--panel-lift);
				}
			}
		}
	}

	.masthead__nav {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-inline-size: 0;
		gap: clamp(1rem, 0.4rem + 1.4vw, 1.75rem);

		@media (width <= 56.25rem) {
			flex-direction: column;
			align-items: stretch;
			gap: 0;
			padding-block: var(--space-2xs);
		}
	}

	.masthead__link {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 2px;
		padding-block: var(--space-3xs);
		border-radius: var(--radius-sm);
		font-size: var(--text-md);
		font-weight: var(--weight-label);
		line-height: 1.4;
		white-space: nowrap;
		color: var(--color-text-subtle);
		transition: color var(--duration-fast) var(--ease);

		&:hover {
			color: var(--color-text);
		}

		&::after {
			content: '';
			display: block;
			block-size: 2px;
			border-radius: var(--radius-pill);
			background: currentColor;
			scale: 0 1;
			transition: scale var(--duration) var(--ease);
		}

		&:hover::after,
		&:focus-visible::after {
			scale: 1 1;
		}

		&[aria-current] {
			color: var(--color-accent-hover);

			&::after {
				scale: 1 1;
			}
		}

		@media (width <= 56.25rem) {
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			min-block-size: 3rem;
			padding-block: var(--space-sm);
			padding-inline: var(--space-2xs);

			&::after {
				display: none;
			}

			&[aria-current] {
				background: var(--color-surface-sunken);
			}
		}
	}

	.masthead__actions {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		justify-self: end;

		@media (width <= 56.25rem) {
			justify-self: stretch;
			padding-block: var(--space-xs) var(--space-sm);
			padding-inline: var(--space-2xs);

			& > * {
				flex: 1;
			}
		}
	}

	.masthead__toggle {
		display: none;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		padding: 0;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		background: var(--color-surface);
		color: var(--color-text);
		justify-self: end;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		transition:
			background-color var(--duration-fast) var(--ease),
			border-color var(--duration-fast) var(--ease),
			color var(--duration-fast) var(--ease);

		@media (width <= 56.25rem) {
			display: inline-flex;
		}

		& [data-state='open'] {
			display: none;
		}

		&[aria-expanded='true'] {
			background: var(--color-surface-sunken);
			border-color: var(--color-accent-hover);
			color: var(--color-accent-hover);

			& [data-state='closed'] {
				display: none;
			}

			& [data-state='open'] {
				display: block;
			}
		}
	}

	.hero {
		padding-block: clamp(2.75rem, 1.7rem + 4vw, 5rem) clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
		overflow: clip;
	}

	.hero__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(2rem, 0.9rem + 3.6vw, 4.5rem);
		align-items: center;

		@media (width <= 56.25rem) {
			grid-template-columns: 1fr;
			gap: var(--space-2xl);
		}
	}

	.hero__copy {
		--hero-measure: 34rem;

		container-type: inline-size;
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		& > * {
			margin-block: 0;
		}

		& > * + * {
			margin-block-start: var(--flow-space, var(--space-lg));
		}
	}

	.hero__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		padding: var(--space-3xs) var(--space-sm);
		border: 1px solid var(--color-accent-tint-strong);
		border-radius: var(--radius-pill);
		background: var(--color-accent-surface);
		color: var(--color-accent-ink);
		font-size: var(--text-xs);
		font-weight: var(--weight-strong);
		line-height: var(--leading-snug);
		letter-spacing: 0.06em;
	}

	.hero__headline {
		--flow-space: var(--space-md);

		font-size: var(--text-display);
		font-weight: var(--weight-display);
		line-height: var(--leading-tight);
		letter-spacing: -0.02em;
		text-wrap: balance;

		& [data-accent='green'] {
			color: var(--green-600);
		}

		& [data-accent='blue'] {
			color: var(--blue-600);
		}
	}

	.hero__lede {
		--flow-space: var(--space-md);

		font-size: var(--text-lede);
		line-height: var(--leading-body);
		max-inline-size: var(--hero-measure);
	}

	.hero__pillars {
		--flow-space: var(--space-2xl);

		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-md) var(--space-md);
		inline-size: 100%;
		max-inline-size: var(--hero-measure);

		@container (width < 20rem) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.hero__pillar {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		min-inline-size: 0;

		& .icon-chip {
			inline-size: 2.25rem;
			block-size: 2.25rem;
		}

		& strong {
			display: block;
			font-size: var(--text-sm);
			font-weight: var(--weight-strong);
			line-height: var(--leading-snug);
			color: var(--color-text);
		}

		& > div > span {
			display: block;
			font-size: var(--text-xs);
			font-weight: var(--weight-body);
			line-height: var(--leading-snug);
			color: var(--color-text-subtle);
			text-wrap: pretty;
		}
	}

	.hero__auth {
		--flow-space: var(--space-2xl);

		display: flex;
		flex-direction: column;
		gap: var(--space-md);
		inline-size: 100%;
		max-inline-size: var(--hero-measure);
	}

	.hero__or {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		color: var(--color-text-subtle);
		font-size: var(--text-2xs);
		font-weight: var(--weight-label);
		text-transform: uppercase;
		letter-spacing: 0.08em;

		&::before,
		&::after {
			content: '';
			flex: 1 1 auto;
			block-size: 1px;
			background: var(--color-border);
		}
	}

	.hero__signup {
		inline-size: 100%;
	}

	.hero__signup-row {
		display: flex;
		align-items: stretch;
		gap: var(--space-xs);

		@media (width <= 30rem) {
			flex-direction: column;
		}
	}

	.hero__email {
		flex: 1 1 auto;
		min-inline-size: 0;
		min-block-size: 3.125rem;
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		padding-inline: var(--space-sm);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-surface);
		transition:
			border-color var(--duration-fast) var(--ease),
			box-shadow var(--duration-fast) var(--ease);

		&:focus-within {
			border-color: var(--color-accent);
			box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 14%, transparent);
		}

		& input {
			flex: 1 1 auto;
			min-inline-size: 0;
			padding-block: var(--space-sm);
			border: none;
			outline: none;
			background: transparent;
			font: inherit;
			font-size: var(--text-base);
			font-weight: var(--weight-body);

			&:focus-visible {
				box-shadow: none;
			}

			&:-webkit-autofill {
				-webkit-text-fill-color: var(--color-text);
				-webkit-box-shadow: 0 0 0 100px var(--color-surface) inset;
				caret-color: var(--color-text);
			}

			&.is-invalid {
				color: var(--color-danger);
			}
		}

		&.is-invalid {
			border-color: var(--color-danger);
			box-shadow: 0 0 0 4px rgb(239 68 68 / 10%);
		}

		&.is-shaking {
			animation: field-shake 400ms var(--ease);
		}
	}

	.hero__error {
		margin: var(--space-2xs) 0 0;
		min-block-size: 1em;
		color: var(--color-danger);
		font-size: var(--text-xs);
		font-weight: var(--weight-label);
	}

	.hero__captcha {
		margin-block-start: var(--space-sm);
		min-block-size: 4.875rem;
	}

	.hero__terms {
		margin: 0;
		font-size: var(--text-xs);
		font-weight: var(--weight-body);
		line-height: var(--leading-snug);
		color: var(--color-text-subtle);
		text-wrap: pretty;

		& a {
			color: var(--color-accent);
			font-weight: var(--weight-label);
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: 2px;
		}
	}

	.hero__visual {
		--device-width: 14.375rem;
		--device-tilt: 8deg;
		--device-overhang: 2.375rem;
		--device-zoom: 1;
		--caps-overlap: clamp(1.5rem, 2.5vw, 2.75rem);

		position: relative;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--space-sm);
		padding-block: var(--space-lg) var(--space-xs);

		@media (width <= 75rem) {
			--device-zoom: 0.82;
		}

		@media (width <= 68.75rem) {
			--device-zoom: 0.62;
		}

		@media (width <= 56.25rem) {
			--caps-overlap: 0rem;

			grid-template-columns: minmax(0, 1fr);
		}
	}

	.hero__decor {
		position: absolute;
		z-index: 0;
		border-radius: 50%;
		opacity: 0.42;
		filter: blur(1px);

		&[data-decor='mint'] {
			inline-size: 13rem;
			block-size: 13rem;
			background: var(--green-200);
			inset-block-start: 1.25rem;
			inset-inline-start: 0;
		}

		&[data-decor='azure'] {
			inline-size: 16rem;
			block-size: 20rem;
			background: color-mix(in srgb, var(--sky-600) 45%, #fff);
			inset-block-end: 3.6875rem;
			inset-inline-end: 1rem;
		}

		&[data-decor='dots'] {
			inline-size: 6.875rem;
			block-size: 6.875rem;
			inset-block-start: 46%;
			inset-inline-start: 0;
			border-radius: 0;
			filter: none;
			opacity: 0.45;
			background-image: radial-gradient(circle, var(--navy-800) 1.5px, transparent 1.5px);
			background-size: 12px 12px;
		}

		@media (width <= 56.25rem) {
			display: none;
		}
	}

	.device-mock {
		position: relative;
		z-index: 2;
		zoom: var(--device-zoom);
		inline-size: var(--device-width);
		margin-inline: var(--device-overhang);
		padding: var(--space-xs);
		border-radius: 2.375rem;
		background: linear-gradient(180deg, #1c1c1e, #0a0a0c);
		box-shadow: var(--shadow-device), inset 0 0 0 1.5px rgb(255 255 255 / 8%);
		rotate: calc(var(--device-tilt) * -1);
		transform-origin: center;

		@media (width <= 56.25rem) {
			display: none;
		}
	}

	.device-mock__notch {
		position: absolute;
		z-index: 3;
		inset-block-start: 1.125rem;
		inset-inline-start: 50%;
		translate: -50% 0;
		inline-size: 3.5rem;
		block-size: 1rem;
		border-radius: var(--radius-pill);
		background: #0a0a0c;
	}

	.device-mock__screen {
		position: relative;
		overflow: hidden;
		padding: 2.125rem var(--space-sm) var(--space-sm);
		border-radius: 1.875rem;
		background: var(--color-surface);
	}

	.device-mock__statusbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-block-end: var(--space-xs);
		font-size: 0.625rem;
		font-weight: var(--weight-heading);
		color: var(--ink-900);

		& :is(svg, i) {
			inline-size: 12px;
			block-size: 12px;
		}

		& > div {
			display: flex;
			align-items: center;
			gap: var(--space-3xs);
		}
	}

	.device-mock__titlebar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-block-end: var(--space-sm);
		color: var(--blue-600);

		& p {
			margin: 0;
			font-size: var(--text-xs);
			font-weight: var(--weight-heading);
			color: var(--blue-600);
		}
	}

	.device-mock__timestamp {
		margin: var(--space-3xs) 0 var(--space-sm);
		text-align: center;
		font-size: 0.625rem;
		font-weight: var(--weight-strong);
		color: var(--color-text-subtle);
	}

	.device-mock__caption {
		margin: 0 0 var(--space-xs);
		font-size: var(--text-xs);
		font-weight: var(--weight-heading);
		color: var(--ink-900);
	}

	.device-mock__tabbar {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-block-start: var(--space-xs);
		padding-inline: var(--space-2xs);
	}

	.device-mock__tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		color: #9aa1ae;

		& span {
			font-size: 0.46875rem;
			font-weight: var(--weight-strong);
		}

		&[aria-current='page'] {
			color: var(--sky-500);
		}
	}

	.device-mock__fab {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 1.875rem;
		block-size: 1.875rem;
		margin-block-start: -1.125rem;
		border-radius: 50%;
		background: var(--blue-500);
		color: var(--color-text-inverse);
	}

	.score-gauge {
		position: relative;
		text-align: center;
		margin-block-end: var(--space-2xs);

		& svg {
			inline-size: 100%;
		}
	}

	.score-gauge__delta {
		position: absolute;
		inset-block-start: -2px;
		inset-inline-start: 50%;
		translate: -50% 0;
		font-size: 0.625rem;
		font-weight: var(--weight-heading);
		color: var(--sky-500);
	}

	.score-gauge__readout {
		position: absolute;
		inset-block-end: var(--space-3xs);
		inset-inline-start: 50%;
		translate: -50% 0;

		& strong {
			display: block;
			font-size: var(--text-2xl);
			color: var(--navy-900);
		}

		& span {
			font-size: 0.65625rem;
			font-weight: var(--weight-heading);
			color: var(--green-600);
		}
	}

	.score-gauge__scale {
		display: flex;
		justify-content: space-between;
		padding-inline: var(--space-2xs);
		margin-block-start: -4px;
		font-size: 0.5rem;
		font-weight: var(--weight-strong);
		color: var(--color-text-subtle);
	}

	.credit-factor {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block: 0.4375rem;
		border-block-end: 1px solid var(--color-border-faint);

		&:last-of-type {
			border-block-end: none;
		}

		& > div {
			display: flex;
			align-items: center;
			gap: var(--space-xs);
		}
	}

	.credit-factor__dot {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		inline-size: 1.25rem;
		block-size: 1.25rem;
		border-radius: 50%;
		background: var(--green-50);
		color: var(--green-700);

		& svg {
			inline-size: 11px;
			block-size: 11px;
			stroke-width: 3px;
		}
	}

	.credit-factor__name {
		font-size: var(--text-2xs);
		font-weight: var(--weight-strong);
	}

	.credit-factor__value {
		font-size: var(--text-2xs);
		font-weight: var(--weight-heading);

		&[data-tone='green'] { color: var(--green-600); }
		&[data-tone='blue'] { color: var(--sky-500); }
		&[data-tone='amber'] { color: var(--amber-700); }
	}

	.icon-chip {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		inline-size: 1.875rem;
		block-size: 1.875rem;
		padding: var(--space-xs);
		border-radius: 50%;

		&[data-size='lg'] {
			inline-size: 3.75rem;
			block-size: 3.75rem;
			margin-inline: auto;
			margin-block-end: var(--space-sm);
		}

		&[data-tone='blue'] { background: var(--blue-100); color: var(--blue-600); }
		&[data-tone='neutral'] { background: var(--color-surface-sunken); color: var(--ink-600); }
		&[data-tone='sky'] { background: var(--sky-100); color: var(--sky-600); }
		&[data-tone='amber'] { background: var(--amber-100); color: var(--amber-700); }
		&[data-tone='red'] { background: var(--red-100); color: var(--red-700); }
		&[data-tone='green'] { background: var(--green-100); color: var(--green-700); }
		&[data-tone='violet'] { background: var(--violet-100); color: var(--violet-700); }
	}

	.capability-list {
		position: relative;
		z-index: 3;
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
		margin-inline-start: calc(var(--caps-overlap) * -1);

		@media (width <= 56.25rem) {
			inline-size: 100%;
			max-inline-size: 30rem;
			margin-inline: auto;
			gap: var(--space-xs);
		}
	}

	.capability-card {
		--tone-bg: var(--color-surface-sunken);
		--tone-fg: var(--color-text);

		display: flex;
		align-items: center;
		gap: var(--space-sm);
		padding: var(--space-sm);
		border: 1px solid var(--color-border-faint);
		border-radius: var(--radius-lg);
		background: color-mix(in srgb, var(--color-surface) 90%, transparent);
		box-shadow: var(--shadow-md);
		backdrop-filter: blur(10px) saturate(140%);
		-webkit-backdrop-filter: blur(10px) saturate(140%);

		&[data-tone='blue'] { --tone-bg: var(--blue-100); --tone-fg: var(--blue-600); }
		&[data-tone='amber'] { --tone-bg: var(--amber-100); --tone-fg: var(--amber-700); }
		&[data-tone='red'] { --tone-bg: var(--red-100); --tone-fg: var(--red-700); }
		&[data-tone='green'] { --tone-bg: var(--green-100); --tone-fg: var(--green-700); }
		&[data-tone='violet'] { --tone-bg: var(--violet-100); --tone-fg: var(--violet-700); }

		& .icon-chip {
			background: var(--tone-bg);
			color: var(--tone-fg);
		}

		& strong {
			display: block;
			font-size: var(--text-sm);
			font-weight: var(--weight-strong);
			line-height: var(--leading-snug);
			color: var(--color-text);
		}

		& span {
			display: block;
			font-size: var(--text-2xs);
			font-weight: var(--weight-body);
			line-height: var(--leading-snug);
			color: var(--color-text-subtle);
		}

		@media (width > 56.25rem) {
			&:nth-child(2),
			&:nth-child(4) {
				translate: -0.625rem 0;
			}

			&:nth-child(3) {
				translate: -1.25rem 0;
			}
		}

		@media (width <= 56.25rem) {
			padding: var(--space-sm) var(--space-md);
			border-color: color-mix(in srgb, var(--tone-fg) 18%, transparent);
			background: color-mix(in srgb, var(--tone-bg) 45%, var(--color-surface));
			box-shadow: var(--shadow-xs);
			backdrop-filter: none;

			& .icon-chip {
				background: var(--color-surface);
			}

			& strong {
				font-size: var(--text-base);
			}

			& span {
				font-size: var(--text-xs);
			}
		}
	}

	.metrics-bar {
		background: var(--color-surface-inverse);
		padding-block: var(--space-lg);
	}

	.metrics-bar__row {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
		align-items: center;
		gap: var(--space-md) var(--space-lg);

		@media (width <= 75rem) {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}

		@media (width <= 47.5rem) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-lg) var(--space-md);
		}
	}

	.metric {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		min-inline-size: 0;
		color: var(--color-text-inverse);

		@media (width <= 47.5rem) {
			flex-direction: column;
			gap: var(--space-2xs);
			text-align: center;
		}

		& strong {
			display: block;
			font-size: var(--text-xl);
			font-weight: var(--weight-heading);
			line-height: var(--leading-tight);
			color: var(--color-text-inverse);
		}

		& > div:not(.avatar-stack) > span {
			display: block;
			margin-block-start: var(--space-3xs);
			font-size: clamp(0.6875rem, 0.6rem + 0.3vw, 0.8125rem);
			font-weight: var(--weight-label);
			line-height: var(--leading-snug);
			color: var(--color-text-on-navy);

			@media (width <= 20.5rem) {
				min-block-size: 2lh;
			}
		}

		&[data-variant='trust'] {
			gap: var(--space-sm);
			padding-inline-start: var(--space-lg);
			border-inline-start: 1px solid rgb(255 255 255 / 12%);

			& > div:not(.avatar-stack) > span {
				margin-block-start: 0;
				color: var(--color-text-inverse);
				font-weight: var(--weight-label);
				text-wrap: balance;
			}

			@media (width <= 75rem) {
				padding-inline-start: 0;
				border-inline-start: 0;
				grid-column: 1 / -1;
				justify-content: center;
				padding-block-start: var(--space-lg);
				border-block-start: 1px solid rgb(255 255 255 / 20%);
			}

			@media (width <= 47.5rem) {
				gap: var(--space-sm);
			}
		}
	}

	.metric__badge {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border: 1px solid rgb(255 255 255 / 22%);
		border-radius: 50%;
		background: rgb(255 255 255 / 6%);
		color: var(--color-text-inverse);
	}

	.avatar-stack {
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.avatar-token {
		display: flex;
		align-items: center;
		justify-content: center;

		flex-shrink: 0;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		margin-inline-start: -0.375rem;
		border: 2px solid var(--navy-900);
		border-radius: 50%;
		background: var(--ink-700);
		color: var(--color-text-inverse);
		font-size: var(--text-xs);
		font-weight: var(--weight-heading);
		line-height: 1;

		&[data-tone='violet'] { background: var(--violet-700); }
		&[data-tone='blue'] { background: var(--blue-600); }
		&[data-tone='green'] { background: var(--green-700); }

		&:first-child {
			margin-inline-start: 0;
		}

		&[data-variant='count'] {
			inline-size: auto;
			min-inline-size: 2.25rem;
			padding-inline: var(--space-xs);
			border-radius: var(--radius-pill);
			background: var(--color-surface);
			color: var(--navy-900);
			font-size: var(--text-2xs);
			letter-spacing: -0.01em;
		}
	}

	.press-strip {
		padding-block: var(--space-lg);
		border-block-end: 1px solid var(--color-border);
	}

	.press-strip__row {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: var(--space-sm) clamp(1.25rem, 0.4rem + 2.6vw, 2.75rem);
	}

	.press-strip__label {
		flex-basis: 100%;
		text-align: center;
		font-size: var(--text-2xs);
		font-weight: var(--weight-label);
		line-height: var(--leading-snug);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--color-text-subtle);
	}

	.press-strip__logo {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
		font-weight: var(--weight-heading);
		line-height: var(--leading-snug);
		color: var(--ink-600);

		&[data-style='italic'] {
			font-style: italic;
		}
	}

	.feature-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-lg);

		@media (width <= 56.25rem) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		@media (width <= 35rem) {
			grid-template-columns: 1fr;
		}
	}

	.feature-card {
		display: grid;
		grid-template-areas:
			'chip'
			'title'
			'copy';
		align-content: start;
		padding: var(--space-lg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-xl);
		background: var(--color-surface);
		box-shadow: var(--shadow-sm);
		transition:
			transform var(--duration) var(--ease),
			box-shadow var(--duration) var(--ease);

		&:hover {
			transform: translateY(calc(-2px * var(--motion-scale)));
			box-shadow: var(--shadow-md);
		}

		& .icon-chip {
			grid-area: chip;
			inline-size: 3rem;
			block-size: 3rem;
			margin: 0 0 var(--space-md);
		}

		& strong {
			grid-area: title;
			font-size: var(--text-lg);
			line-height: var(--leading-snug);
			margin-block-end: var(--space-2xs);
			text-wrap: balance;
		}

		& span {
			grid-area: copy;
			font-size: var(--text-base);
			font-weight: var(--weight-body);
			color: var(--color-text-muted);
			line-height: var(--leading-body);
			text-wrap: pretty;
		}

		&:nth-child(-n + 2) {
			grid-column: span 2;
			grid-template-areas:
				'chip title'
				'chip copy';
			grid-template-columns: auto minmax(0, 1fr);
			column-gap: var(--space-lg);
			align-content: center;
			padding: var(--space-xl) var(--space-lg);

			& .icon-chip {
				align-self: center;
				inline-size: 3.75rem;
				block-size: 3.75rem;
				margin: 0;
			}

			& strong {
				align-self: end;
				font-size: var(--text-xl);
			}
		}

		@media (width <= 35rem) {
			grid-template-areas:
				'chip title'
				'chip copy';
			grid-template-columns: auto minmax(0, 1fr);
			column-gap: var(--space-md);
			align-content: center;

			&:nth-child(-n + 2) {
				grid-column: span 1;
			}

			& .icon-chip {
				align-self: center;
				margin: 0;
			}
		}
	}

	.journey-grid {
		--journey-gap: var(--space-lg);

		display: grid;
		gap: var(--space-xl);
	}

	.journey-track {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--journey-gap);

		@media (width <= 56.25rem) {
			grid-template-columns: 1fr;
			gap: var(--space-xl);
		}
	}

	.journey-step {
		--journey-badge: 1.75rem;
		--step-tint: var(--color-accent-tint);
		--step-ink: var(--color-accent);
		--step-solid: var(--color-accent);

		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		&[data-tone='blue'] {
			--step-tint: var(--blue-100);
			--step-ink: var(--blue-600);
			--step-solid: var(--blue-600);
		}

		&[data-tone='violet'] {
			--step-tint: var(--violet-100);
			--step-ink: var(--violet-700);
			--step-solid: var(--violet-700);
		}

		&::after {
			content: '';
			position: absolute;
			inset-block-start: calc(var(--journey-badge) / 2 - 1px);
			inset-inline-start: calc(50% + var(--journey-badge) / 2 + var(--space-xs));
			inline-size: calc(100% + var(--journey-gap) - var(--journey-badge) - var(--space-xs) * 2);
			block-size: 2px;
			background: repeating-linear-gradient(
				to right,
				color-mix(in srgb, var(--step-solid) 55%, transparent) 0 0.375rem,
				transparent 0.375rem 0.75rem
			);
		}

		&:last-child::after {
			content: none;
		}

		& strong {
			display: block;
			font-size: var(--text-lg);
			line-height: var(--leading-snug);
			margin-block-end: var(--space-2xs);
		}

		& > span:last-child {
			max-inline-size: 36ch;
			font-size: var(--text-base);
			font-weight: var(--weight-body);
			color: var(--color-text-muted);
			line-height: var(--leading-body);
			text-wrap: pretty;
		}

		@media (width <= 56.25rem) {
			&::after {
				content: none;
			}
		}
	}

	.journey-step__index {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: var(--journey-badge);
		block-size: var(--journey-badge);
		margin-block-end: var(--space-sm);
		border-radius: 50%;
		background: var(--step-solid);
		color: var(--color-text-inverse);
		font-size: var(--text-xs);
		font-weight: var(--weight-heading);
	}

	.journey-step__glyph {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 4.5rem;
		block-size: 4.5rem;
		margin-block-end: var(--space-md);
		border: 1px solid color-mix(in srgb, var(--step-ink) 16%, #fff);
		border-radius: var(--radius-lg);
		background: var(--step-tint);
		color: var(--step-ink);
	}

	.uplift-card {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
		align-items: center;
		gap: var(--space-xl);
		padding: var(--space-lg) var(--space-xl);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-xl);
		background: var(--color-surface);
		box-shadow: var(--shadow-sm);

		@media (width <= 56.25rem) {
			grid-template-columns: 1fr;
			gap: var(--space-lg);
			padding: var(--space-lg);
		}
	}

	.uplift-card__head {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3xs);
	}

	.uplift-card__value {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		margin-block-end: var(--space-2xs);
		font-size: clamp(1.75rem, 1.45rem + 1.25cqi, 2.5rem);
		font-weight: var(--weight-display);
		line-height: var(--leading-tight);
		letter-spacing: -0.02em;
		color: var(--green-600);

		& .glyph {
			color: var(--green-500);
		}

		& span {
			font-size: var(--text-lg);
			font-weight: var(--weight-strong);
			color: var(--color-text-subtle);
		}
	}

	.uplift-card__label {
		font-size: var(--text-lg);
		font-weight: var(--weight-heading);
		color: var(--ink-900);
	}

	.uplift-card__note {
		font-size: var(--text-sm);
		font-weight: var(--weight-body);
		color: var(--color-text-muted);
	}

	.score-track {
		--score-from: 63%;
		--score-to: 76%;
		--score-bands: 279fr 90fr 70fr 111fr;
		--score-band-hue: var(--ink-500);

		display: grid;
		gap: var(--space-sm);
	}

	.score-track__rail {
		position: relative;
		display: grid;
		grid-template-columns: var(--score-bands);
		gap: 2px;
		block-size: 0.75rem;
		margin-block-start: 1.5rem;
	}

	.score-track__band {
		&:nth-child(1) {
			border-start-start-radius: var(--radius-pill);
			border-end-start-radius: var(--radius-pill);
			background: color-mix(in srgb, var(--score-band-hue) 14%, #fff);
		}

		&:nth-child(2) {
			background: color-mix(in srgb, var(--score-band-hue) 26%, #fff);
		}

		&:nth-child(3) {
			background: color-mix(in srgb, var(--score-band-hue) 40%, #fff);
		}

		&:nth-child(4) {
			border-start-end-radius: var(--radius-pill);
			border-end-end-radius: var(--radius-pill);
			background: color-mix(in srgb, var(--score-band-hue) 56%, #fff);
		}
	}

	.score-track__gain {
		position: absolute;
		inset-block: -3px;
		inset-inline-start: var(--score-from);
		inline-size: calc(var(--score-to) - var(--score-from));
		border-radius: var(--radius-pill);
		background: var(--color-accent);
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 14%, transparent);
	}

	.score-track__dot {
		position: absolute;
		inset-block-start: 50%;
		inline-size: 0.875rem;
		block-size: 0.875rem;
		translate: -50% -50%;
		border: 3px solid #fff;
		border-radius: 50%;
		box-shadow: var(--shadow-sm);

		&[data-role='from'] {
			inset-inline-start: var(--score-from);
			background: var(--ink-500);
		}

		&[data-role='to'] {
			inset-inline-start: var(--score-to);
			background: var(--color-accent);
		}

		& b {
			position: absolute;
			inset-block-end: calc(100% + var(--space-2xs));
			inset-inline-start: 50%;
			translate: -50% 0;
			font-size: var(--text-sm);
			font-weight: var(--weight-heading);
			line-height: 1;
			color: var(--ink-900);
		}
	}

	.score-track__axis {
		display: grid;
		grid-template-columns: var(--score-bands);
		gap: 2px;
		font-size: var(--text-2xs);
		font-weight: var(--weight-label);
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--color-text-subtle);

		& span {
			text-align: center;
		}

		@media (width <= 30rem) {
			font-size: 0.625rem;
			letter-spacing: 0;
		}
	}

	.plan-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto auto auto 1fr auto auto;
		column-gap: var(--space-lg);
		row-gap: var(--space-2xs);
		align-items: stretch;

		@media (width <= 56.25rem) {
			grid-template-columns: 1fr;
			grid-template-rows: none;
			row-gap: var(--space-lg);
			max-inline-size: 26.25rem;
			margin-inline: auto;
		}
	}

	.plan-card {
		position: relative;
		display: grid;
		grid-row: span 6;
		grid-template-rows: subgrid;
		padding: var(--space-xl) var(--space-lg);
		border: 1.5px solid var(--color-border);
		border-radius: var(--radius-xl);
		background: var(--color-surface);
		transition:
			transform var(--duration) var(--ease),
			box-shadow var(--duration) var(--ease);

		&:hover {
			transform: translateY(calc(-2px * var(--motion-scale)));
			box-shadow: var(--shadow-md);
		}

		&[data-emphasis='featured'] {
			border-color: var(--color-accent);
			box-shadow: var(--shadow-md);
		}

		@media (width <= 56.25rem) {
			display: flex;
			flex-direction: column;
			gap: var(--space-2xs);
		}
	}

	.plan-card__flag {
		position: absolute;
		inset-block-start: -0.75rem;
		inset-inline-end: var(--space-lg);
		padding: var(--space-3xs) var(--space-sm);
		border-radius: var(--radius-pill);
		font-size: var(--text-2xs);
		font-weight: var(--weight-heading);
		line-height: var(--leading-snug);
		letter-spacing: 0.04em;

		&[data-tone='accent'] {
			background: var(--color-accent-hover);
			color: var(--color-text-inverse);
		}

		&[data-tone='blue'] {
			background: var(--blue-100);
			color: var(--blue-600);
		}
	}

	.plan-card__head {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
	}

	.plan-card__name {
		font-size: var(--text-lg);
		font-weight: var(--weight-heading);
		line-height: var(--leading-snug);
		color: var(--color-heading);
	}

	.plan-card__price {
		display: flex;
		align-items: baseline;
		gap: var(--space-3xs);
		margin: var(--space-2xs) 0 0;
		font-size: clamp(1.75rem, 1.45rem + 1.1vw, 2.125rem);
		font-weight: var(--weight-heading);
		line-height: var(--leading-tight);
		letter-spacing: -0.02em;
		color: var(--color-heading);

		& span {
			font-size: var(--text-sm);
			font-weight: var(--weight-label);
			letter-spacing: 0;
			color: var(--color-text-subtle);
		}
	}

	.plan-card__note {
		margin: 0;
		font-size: var(--text-xs);
		font-weight: var(--weight-body);
		line-height: var(--leading-snug);
		color: var(--color-text-subtle);
		text-wrap: pretty;

		&[data-align='center'] {
			margin-block-start: var(--space-xs);
			font-weight: var(--weight-label);
			text-align: center;
		}
	}

	.plan-card__features {
		flex: 1;
		list-style: none;
		margin-block: var(--space-md);
		padding-block-start: var(--space-md);
		border-block-start: 1px solid var(--color-border-faint);

		& li {
			display: flex;
			align-items: flex-start;
			gap: var(--space-xs);
			padding-block: var(--space-2xs);
			font-size: var(--text-sm);
			font-weight: var(--weight-body);
			line-height: var(--leading-snug);
			color: var(--color-text-muted);
		}

		& svg {
			flex-shrink: 0;
			margin-block-start: 1px;
			color: var(--color-accent);
		}
	}

	.assistant-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: var(--space-2xl);
		align-items: center;

		@media (width <= 56.25rem) {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--space-xl);
		}
	}

	.assistant-copy {
		& h2 {
			font-size: var(--text-panel);
			line-height: var(--leading-heading);
			letter-spacing: -0.015em;
			margin-block-end: var(--space-sm);
			color: var(--navy-900);
		}

		& > p {
			max-inline-size: var(--measure-lede);
			font-size: var(--text-base);
			font-weight: var(--weight-label);
			line-height: var(--leading-body);
			margin-block: 0 var(--space-lg);
		}
	}

	.assistant-copy__badge {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		margin-block-end: var(--space-md);
		padding: var(--space-3xs) var(--space-sm);
		border: 1px solid var(--violet-100);
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--violet-100) 45%, #fff);
		color: var(--violet-700);
		font-size: var(--text-eyebrow);
		font-weight: var(--weight-strong);
		line-height: var(--leading-snug);
		letter-spacing: 0.08em;
	}

	.assistant-copy__list {
		list-style: none;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-xs);
		margin-block: 0 var(--space-lg);

		& li {
			display: flex;
			align-items: center;
			gap: var(--space-xs);
			padding: var(--space-sm);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-md);
			background: var(--color-surface);
			box-shadow: var(--shadow-xs);
			font-size: var(--text-sm);
			font-weight: var(--weight-strong);
			line-height: var(--leading-snug);
			text-wrap: pretty;
		}

		& li:last-child {
			grid-column: 1 / -1;
		}

		@media (width <= 34rem) {
			grid-template-columns: minmax(0, 1fr);

			& li:last-child {
				grid-column: auto;
			}
		}
	}

	.assistant-copy__actions {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-sm) var(--space-md);
	}

	.assistant-copy__note {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		font-size: var(--text-xs);
		font-weight: var(--weight-label);
		color: var(--color-text-subtle);

		& svg {
			color: var(--color-accent);
		}
	}

	.ai-console {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
		padding: var(--space-md);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-xl);
		background: linear-gradient(180deg, var(--sky-50), var(--color-surface) 45%);
		box-shadow: var(--shadow-md);
	}

	.ai-console__bar {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		padding-block-end: var(--space-sm);
		border-block-end: 1px solid var(--color-border);
	}

	.ai-console__avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		inline-size: 2.125rem;
		block-size: 2.125rem;
		border-radius: 50%;
		background: var(--navy-800);
		color: var(--color-text-inverse);
	}

	.ai-console__id {
		min-inline-size: 0;
		margin-inline-end: auto;

		& strong {
			display: block;
			font-size: var(--text-sm);
			font-weight: var(--weight-heading);
			line-height: var(--leading-snug);
			color: var(--navy-900);
		}

		& > span {
			display: flex;
			align-items: center;
			gap: var(--space-3xs);
			font-size: var(--text-2xs);
			font-weight: var(--weight-label);
			color: var(--color-text-subtle);
		}
	}

	.ai-console__pulse {
		flex-shrink: 0;
		inline-size: 0.4375rem;
		block-size: 0.4375rem;
		border-radius: 50%;
		background: var(--green-500);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-500) 20%, transparent);
	}

	.ai-console__seal {
		display: inline-flex;
		align-items: center;
		gap: var(--space-3xs);
		flex-shrink: 0;
		padding: var(--space-3xs) var(--space-xs);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		font-size: var(--text-2xs);
		font-weight: var(--weight-strong);
		color: var(--color-text-subtle);
	}

	.ai-console__thread {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
	}

	.ai-bubble {
		align-self: flex-end;
		max-inline-size: 85%;
		margin: 0;
		padding: var(--space-xs) var(--space-md);
		border-radius: var(--radius-lg) var(--radius-lg) var(--space-3xs) var(--radius-lg);
		background: var(--navy-800);
		color: var(--color-text-inverse);
		font-size: var(--text-sm);
		font-weight: var(--weight-strong);
	}

	.ai-answer {
		align-self: stretch;
		padding: var(--space-md);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--space-3xs);
		background: var(--color-surface);
		box-shadow: var(--shadow-xs);
	}

	.ai-answer__verdict {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		margin-block-end: var(--space-3xs);
		font-size: var(--text-md);
		font-weight: var(--weight-heading);
		color: var(--navy-900);

		& svg {
			color: var(--green-600);
		}
	}

	.ai-answer__lede {
		margin-block: 0 var(--space-sm);
		font-size: var(--text-xs);
		font-weight: var(--weight-label);
		color: var(--color-text-muted);
	}

	.ai-snapshot {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		padding: var(--space-xs);
		border-radius: var(--radius-md);
		background: var(--color-surface-sunken);
	}

	.ai-snapshot__stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-xs);
	}

	.ai-stat {
		padding: var(--space-sm);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		background: var(--color-surface);

		& > span {
			display: block;
			margin-block-end: var(--space-3xs);
			font-size: var(--text-2xs);
			font-weight: var(--weight-label);
			line-height: var(--leading-snug);
			color: var(--color-text-subtle);
		}

		& > b {
			display: block;
			font-size: var(--text-xl);
			font-weight: var(--weight-heading);
			line-height: var(--leading-tight);
			letter-spacing: -0.02em;
			color: var(--navy-900);
		}
	}

	.ai-meter {
		padding: var(--space-sm);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		background: var(--color-surface);
	}

	.ai-meter__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-xs);
		margin-block-end: var(--space-xs);

		& span {
			font-size: var(--text-2xs);
			font-weight: var(--weight-label);
			color: var(--color-text-subtle);
		}

		& b {
			font-size: var(--text-lg);
			font-weight: var(--weight-heading);
			line-height: 1;
			color: var(--navy-900);
		}
	}

	.ai-meter__track {
		block-size: 0.5rem;
		border-radius: var(--radius-pill);
		background: var(--green-100);
	}

	.ai-meter__fill {
		display: block;
		inline-size: 65%;
		block-size: 100%;
		border-radius: var(--radius-pill);
		background: var(--green-600);
	}

	.ai-meter__scale {
		margin-block: var(--space-2xs) 0;
		font-size: var(--text-2xs);
		font-weight: var(--weight-body);
		color: var(--color-text-subtle);
	}

	.ai-snapshot__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--space-xs) var(--space-md);
		padding: var(--space-xs) var(--space-sm);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		background: var(--color-surface);
	}

	.ai-fact {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		font-size: var(--text-xs);

		& > span {
			font-weight: var(--weight-label);
			color: var(--color-text-subtle);
		}

		& > b {
			font-weight: var(--weight-heading);
			font-variant-numeric: tabular-nums;
			color: var(--navy-900);
		}

		& > .ai-verdict {
			display: inline-flex;
			align-items: center;
			gap: var(--space-3xs);
			padding: 0.125rem var(--space-xs);
			border-radius: var(--radius-pill);
			background: var(--green-100);
			color: var(--green-700);
			font-size: var(--text-2xs);
		}
	}

	.ai-console__followups {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-2xs);

		& > span {
			font-size: var(--text-2xs);
			font-weight: var(--weight-label);
			color: var(--color-text-subtle);
		}

		& a {
			padding: var(--space-3xs) var(--space-sm);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-pill);
			background: var(--color-surface);
			color: var(--color-text-muted);
			font-size: var(--text-xs);
			font-weight: var(--weight-strong);
			transition:
				border-color var(--duration-fast) var(--ease),
				color var(--duration-fast) var(--ease);

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

	.ai-console__composer {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		padding: var(--space-2xs);
		padding-inline-start: var(--space-md);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		color: var(--color-text-subtle);
		box-shadow: var(--shadow-xs);
		transition:
			border-color var(--duration-fast) var(--ease),
			box-shadow var(--duration) var(--ease);

		& > span:first-child {
			flex: 1;
			min-inline-size: 0;
			overflow: hidden;
			font-size: var(--text-sm);
			font-weight: var(--weight-label);
			white-space: nowrap;
			text-overflow: ellipsis;
		}

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

	.ai-console__send {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		inline-size: 2rem;
		block-size: 2rem;
		border-radius: 50%;
		background: var(--color-accent);
		color: var(--color-text-inverse);
	}

	.ai-console__disclaimer {
		margin: 0;
		font-size: var(--text-2xs);
		font-weight: var(--weight-label);
		text-align: center;
		color: var(--color-text-subtle);
	}

	.proof-grid {
		display: grid;
		grid-template-columns: 1.3fr 1fr;
		gap: var(--space-2xl);
		align-items: center;

		@media (width <= 56.25rem) {
			grid-template-columns: 1fr;
			gap: var(--space-xl);
		}
	}

	.proof-panel {
		padding: var(--space-xl) var(--space-lg);
		border-radius: var(--radius-xl);
		background: var(--navy-600);

		& h3 {
			margin-block-end: var(--space-lg);
			color: var(--color-text-inverse);
			font-size: var(--text-xl);
			text-align: center;
		}
	}

	.proof-panel__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-sm);
		margin-block-end: var(--space-md);

		@media (width <= 56.25rem) {
			grid-template-columns: 1fr;
		}
	}

	.proof-panel__rating {
		margin: 0;
		text-align: center;
		font-size: var(--text-sm);
		font-weight: var(--weight-label);
		color: #dbe2f0;
	}

	.quote-card {
		padding: var(--space-sm);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-surface);
		box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%);

		& blockquote {
			margin: 0 0 var(--space-sm);
			font-size: 0.71875rem;
			font-weight: var(--weight-body);
			line-height: 1.5;
			color: var(--color-text-muted);
		}

		& figcaption {
			display: flex;
			align-items: center;
			gap: var(--space-xs);
		}

		& strong {
			display: block;
			font-size: var(--text-2xs);
			font-weight: var(--weight-strong);
			color: var(--color-text);
		}

		& figcaption span:last-child {
			font-size: var(--text-2xs);
			font-weight: var(--weight-strong);
			color: var(--green-600);
		}

		& .avatar-token {
			margin-inline-start: 0;
			border: none;
		}
	}

	.app-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		& h3 {
			margin-block-end: var(--space-sm);
			color: var(--navy-600);
			font-size: var(--text-2xl);
		}

		& p {
			margin-block-end: var(--space-lg);
			font-size: var(--text-base);
			color: #4a5568;
		}
	}

	.app-cta__stores {
		display: flex;
		justify-content: center;
		gap: var(--space-md);

		& span {
			font-size: var(--text-xs);
			font-weight: var(--weight-heading);
			color: var(--navy-600);
		}
	}

	.assurance-strip {
		padding-block: var(--space-lg);
		border-block-end: 1px solid var(--color-border);
		background: var(--color-surface-sunken);
	}

	.assurance-strip__grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-sm) clamp(0.75rem, 0.05rem + 1.5vw, 1.75rem);
	}

	.assurance-strip__item {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);

		& .icon-chip {
			inline-size: 1.75rem;
			block-size: 1.75rem;
			padding: 0;
		}

		& strong {
			font-size: var(--text-xs);
			font-weight: var(--weight-label);
			line-height: var(--leading-snug);
			color: var(--color-text-muted);
			white-space: nowrap;
		}
	}

	.faq-board {
		--faq-gap: clamp(0.625rem, 0.52rem + 0.5cqi, 1rem);
		--faq-pad-inline: clamp(0.875rem, 0.72rem + 0.7cqi, 1.375rem);
		--faq-pad-block: clamp(0.75rem, 0.65rem + 0.45cqi, 1.0625rem);
		--faq-question-size: clamp(0.875rem, 0.83rem + 0.28cqi, 1.0625rem);
		--faq-answer-size: clamp(0.8125rem, 0.79rem + 0.19cqi, 0.9375rem);
		--faq-measure: 56rem;

		display: flex;
		flex-direction: column;
		gap: clamp(1.25rem, 1rem + 1.1cqi, 2rem);
	}

	.faq-filters {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--space-xs);
	}

	.faq-filter {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		min-block-size: 2.375rem;
		padding: var(--space-2xs) var(--space-md);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		color: var(--color-text-subtle);
		font-size: clamp(0.75rem, 0.71rem + 0.22cqi, 0.875rem);
		font-weight: var(--weight-label);
		line-height: var(--leading-snug);
		white-space: nowrap;
		transition:
			border-color var(--duration) var(--ease),
			background var(--duration) var(--ease),
			color var(--duration) var(--ease);

		& svg {
			flex-shrink: 0;
			color: currentcolor;
		}

		&:hover {
			border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
			color: var(--color-text);
		}

		&[aria-pressed='true'] {
			border-color: transparent;
			background: var(--color-accent);
			color: var(--color-text-inverse);
			box-shadow: var(--shadow-sm);
		}
	}

	.faq-filter__count {
		min-inline-size: 1.375rem;
		padding-inline: var(--space-3xs);
		border-radius: var(--radius-pill);
		background: var(--color-surface-sunken);
		color: var(--color-text-subtle);
		font-size: var(--text-2xs);
		font-weight: var(--weight-strong);
		text-align: center;

		.faq-filter[aria-pressed='true'] & {
			background: rgb(255 255 255 / 22%);
			color: var(--color-text-inverse);
		}
	}

	.faq-grid {
		display: grid;
		grid-template-columns: 1fr;
		inline-size: 100%;
		max-inline-size: var(--faq-measure);
		margin-inline: auto;
		gap: var(--faq-gap);
	}

	.faq-item {
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background: var(--color-surface);
		overflow: hidden;
		transition:
			border-color var(--duration) var(--ease),
			box-shadow var(--duration) var(--ease);

		&:hover {
			border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
		}

		&.is-open {
			border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
			box-shadow: var(--shadow-sm);
		}

		&[hidden] {
			display: none;
		}
	}

	.faq-item__heading {
		margin: 0;
		font-size: inherit;
		font-weight: inherit;
	}

	.faq-item__question {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-sm);
		inline-size: 100%;
		min-block-size: 3rem;
		padding: var(--faq-pad-block) var(--faq-pad-inline);
		border: none;
		background: var(--color-surface);
		color: var(--color-text);
		font-size: var(--faq-question-size);
		font-weight: var(--weight-strong);
		line-height: var(--leading-snug);
		text-align: start;
		text-wrap: pretty;
	}

	.faq-item__marker {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		inline-size: 1.75rem;
		block-size: 1.75rem;
		border-radius: 50%;
		background: var(--color-surface-sunken);
		color: var(--color-text-subtle);
		transition:
			rotate var(--duration) var(--ease),
			background var(--duration) var(--ease),
			color var(--duration) var(--ease);

		.faq-item__question[aria-expanded='true'] & {
			rotate: 180deg;
			background: color-mix(in srgb, var(--color-accent) 12%, #fff);
			color: var(--color-accent);
		}
	}

	.faq-item__answer {
		display: grid;
		grid-template-rows: 0fr;
		padding-inline: var(--faq-pad-inline);
		padding-block-end: 0;
		font-size: var(--faq-answer-size);
		font-weight: var(--weight-body);
		line-height: var(--leading-body);
		color: var(--color-text-muted);
		transition:
			grid-template-rows var(--duration) var(--ease),
			padding-block-end var(--duration) var(--ease);

		& > * {
			overflow: hidden;
			min-block-size: 0;
		}

		& p {
			margin: 0;
			padding-block-start: var(--space-sm);
			border-block-start: 1px solid var(--color-border-faint);
			font-size: inherit;
		}

		& a {
			color: var(--color-accent);
			font-weight: var(--weight-label);
			text-decoration: underline;
			text-underline-offset: 0.15em;
		}

		.faq-item.is-open & {
			grid-template-rows: 1fr;
			padding-block-end: var(--faq-pad-block);
		}
	}

	.faq-empty {
		inline-size: 100%;
		max-inline-size: var(--faq-measure);
		margin-inline: auto;
		margin-block: 0;
		padding: var(--space-lg);
		border: 1px dashed var(--color-border);
		border-radius: var(--radius-lg);
		font-size: var(--faq-answer-size);
		font-weight: var(--weight-label);
		color: var(--color-text-subtle);
		text-align: center;
	}

	.faq-foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		inline-size: 100%;
		max-inline-size: var(--faq-measure);
		margin-inline: auto;
		gap: var(--space-sm) var(--space-md);
		padding: var(--space-md) var(--space-lg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-xl);
		background: var(--color-surface-sunken);
		text-align: center;

		& p {
			margin: 0;
			font-size: var(--faq-answer-size);
			font-weight: var(--weight-label);
			color: var(--color-text-muted);
		}
	}

	.contact-grid {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
		gap: var(--space-xl);
		align-items: stretch;

		@media (width <= 56.25rem) {
			grid-template-columns: 1fr;
		}
	}

	.contact-panel {
		display: flex;
		flex-direction: column;
		gap: var(--space-lg);
		padding: var(--space-xl) var(--space-lg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-xl);
		background: var(--color-surface-sunken);
	}

	.contact-panel__intro {
		& h3 {
			font-size: var(--text-xl);
			line-height: var(--leading-snug);
			margin-block-end: var(--space-2xs);
		}

		& p {
			margin: 0;
			font-size: var(--text-base);
			line-height: var(--leading-body);
		}
	}

	.contact-channels {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
	}

	.contact-channel {
		--channel-tint: var(--sky-100);
		--channel-ink: var(--sky-700);

		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--space-sm);
		padding: var(--space-md);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background: var(--color-surface);
		transition:
			transform var(--duration-fast) var(--ease),
			border-color var(--duration-fast) var(--ease),
			box-shadow var(--duration) var(--ease);

		&[data-tone='green'] {
			--channel-tint: var(--green-100);
			--channel-ink: var(--green-700);
		}

		&:hover {
			transform: translateY(calc(-1px * var(--motion-scale)));
			border-color: color-mix(in srgb, var(--channel-ink) 35%, var(--color-border));
			box-shadow: var(--shadow-sm);
		}

		& > .glyph {
			color: var(--color-text-subtle);
		}
	}

	.contact-channel__glyph {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		border-radius: var(--radius-md);
		background: var(--channel-tint);
		color: var(--channel-ink);
	}

	.contact-channel__body {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		min-inline-size: 0;
	}

	.contact-channel__label {
		font-size: var(--text-2xs);
		font-weight: var(--weight-label);
		line-height: var(--leading-snug);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--color-text-subtle);
	}

	.contact-channel__value {
		font-size: var(--text-md);
		font-weight: var(--weight-strong);
		line-height: var(--leading-snug);
		color: var(--color-text);
		overflow-wrap: anywhere;
	}

	.contact-channel__meta {
		font-size: var(--text-xs);
		font-weight: var(--weight-body);
		line-height: var(--leading-snug);
		color: var(--color-text-subtle);
	}

	.contact-assurances {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		margin-block-start: auto;
		padding-block-start: var(--space-lg);
		border-block-start: 1px solid var(--color-border);
		list-style: none;

		& li {
			display: flex;
			align-items: center;
			gap: var(--space-xs);
			font-size: var(--text-sm);
			font-weight: var(--weight-label);
			color: var(--color-text-muted);
		}

		& .glyph {
			color: var(--color-accent);
		}
	}

	.contact-form {
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
		padding: var(--space-xl) var(--space-lg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-xl);
		background: var(--color-surface);
		box-shadow: var(--shadow-sm);
	}

	.contact-form__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-sm);
	}

	.contact-form__title {
		font-size: var(--text-xl);
		line-height: var(--leading-snug);
	}

	.contact-form__hint {
		font-size: var(--text-xs);
		font-weight: var(--weight-label);
		color: var(--color-text-subtle);
	}

	.contact-form__footnote {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		margin: 0;
		font-size: var(--text-xs);
		font-weight: var(--weight-body);
		color: var(--color-text-subtle);
	}

	.contact-form__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-md);

		@media (width <= 35rem) {
			grid-template-columns: 1fr;
		}
	}

	.contact-form__field {
		display: flex;
		flex-direction: column;

		& label {
			display: block;
			margin-block-end: var(--space-2xs);
			font-size: var(--text-sm);
			font-weight: var(--weight-strong);
			color: var(--color-text-muted);
		}

		& :is(input, textarea) {
			inline-size: 100%;
			padding: var(--space-sm) var(--space-md);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-sm);
			font: inherit;
			font-size: var(--text-base);
			outline: none;
			transition:
				border-color var(--duration-fast) var(--ease),
				box-shadow var(--duration-fast) var(--ease);

			&:focus {
				border-color: var(--color-accent);
				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
			}
		}

		& :is(input, textarea)[aria-invalid='true'] {
			border-color: var(--red-600);

			&:focus {
				box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-600) 12%, transparent);
			}
		}

		& textarea {
			resize: vertical;
			min-block-size: 6rem;
		}
	}

	.contact-form__message {
		margin: var(--space-2xs) 0 0;
		font-size: var(--text-xs);
		font-weight: var(--weight-label);
		line-height: var(--leading-snug);
		color: var(--red-700);

		&[aria-hidden='true'] {
			display: none;
		}
	}

	.contact-form__error {
		padding: var(--space-xs) var(--space-sm);
		border: 1px solid var(--red-100);
		border-radius: var(--radius-sm);
		background: var(--red-50);
		color: var(--red-700);
		font-size: var(--text-sm);
		font-weight: var(--weight-label);
	}

	.dialog {
		position: fixed;
		inset: 0;
		z-index: 60;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-md);
	}

	.dialog__scrim {
		position: absolute;
		inset: 0;
		background: rgb(10 20 40 / 50%);
	}

	.dialog__panel {
		position: relative;
		z-index: 1;
		inline-size: 100%;
		max-inline-size: 26.25rem;
		padding: var(--space-lg);
		border-radius: var(--radius-xl);
		background: var(--color-surface);
		box-shadow: var(--shadow-lg);
	}

	.dialog__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-xs);
		margin-block-end: var(--space-sm);

		& h3 {
			font-size: 1.0625rem;

			&[data-tone='danger'] {
				display: flex;
				align-items: center;
				gap: var(--space-xs);
				color: var(--red-600);
			}
		}

		& button {
			padding: var(--space-3xs);
			border: none;
			background: none;
			color: var(--ink-500);
		}
	}

	.dialog__glyph {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border-radius: 50%;
		background: var(--green-50);
		color: var(--green-600);
	}

	.dialog__body {
		margin-block-end: var(--space-md);
		font-size: 0.84375rem;
	}

	.dialog__actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-xs);

		& a {
			font-size: var(--text-sm);
			font-weight: var(--weight-strong);
			color: var(--color-accent);
		}
	}

	.site-footer {
		padding-block-start: var(--section-rhythm);
		background: var(--color-surface-inverse);
		color: var(--color-text-on-navy);
	}

	.site-footer__cta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--space-lg);
		margin-block-end: var(--space-2xl);
		padding: var(--space-lg) var(--space-xl);
		border: 1px solid rgb(255 255 255 / 8%);
		border-radius: var(--radius-xl);
		background: var(--navy-800);

		& h3 {
			margin-block-end: var(--space-2xs);
			font-size: var(--text-panel);
			line-height: var(--leading-snug);
			color: var(--color-text-inverse);
		}

		& p {
			margin: 0;
			font-size: var(--text-base);
			font-weight: var(--weight-body);
			color: var(--color-text-on-navy-dim);
		}
	}

	.site-footer__top {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr);
		gap: var(--space-2xl);
		padding-block-end: var(--space-xl);

		@media (width <= 56.25rem) {
			grid-template-columns: 1fr;
			gap: var(--space-xl);
		}
	}

	.site-footer__brand {
		& > a {
			display: inline-flex;
			padding: var(--space-sm) var(--space-md);
			border-radius: var(--radius-lg);
			background: var(--color-surface);
		}

		& img {
			block-size: 2.25rem;
			inline-size: auto;
			max-inline-size: 11rem;
			object-fit: contain;
		}

		& p {
			margin-block: var(--space-md) var(--space-lg);
			max-inline-size: 36ch;
			font-size: var(--text-sm);
			font-weight: var(--weight-body);
			line-height: var(--leading-body);
			color: var(--color-text-on-navy-dim);
		}
	}

	.site-footer__contacts {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-xs);

		& a {
			display: inline-flex;
			align-items: center;
			gap: var(--space-xs);
			font-size: var(--text-sm);
			font-weight: var(--weight-label);
			color: var(--color-text-on-navy);
			transition: color var(--duration-fast) var(--ease);

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

		& .glyph {
			color: var(--color-accent-on-navy);
		}
	}

	.site-footer__nav {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-lg);

		@media (width <= 35rem) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.site-footer__col {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-sm);

		& h4 {
			margin-block-end: var(--space-3xs);
			font-size: var(--text-2xs);
			font-weight: var(--weight-strong);
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--color-text-on-navy-dim);
		}

		& a {
			font-size: var(--text-sm);
			font-weight: var(--weight-label);
			color: var(--color-text-on-navy);
			transition: color var(--duration-fast) var(--ease);

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

	.site-footer__bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--space-sm);
		padding-block: var(--space-md) var(--space-lg);
		border-block-start: 1px solid rgb(255 255 255 / 10%);
		font-size: var(--text-xs);
		font-weight: var(--weight-label);
		color: var(--color-text-on-navy-dim);
	}

	.site-footer__seal {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		padding: var(--space-2xs) var(--space-sm);
		border: 1px solid rgb(255 255 255 / 10%);
		border-radius: var(--radius-pill);
		background: var(--navy-800);
		color: var(--color-text-on-navy);
		font-weight: var(--weight-strong);

		& .glyph {
			color: var(--color-accent-on-navy);
		}
	}
}

@layer utilities {
	.glyph {
		flex-shrink: 0;
		inline-size: 1.25rem;
		block-size: 1.25rem;

		&[data-scale='2xs'] { inline-size: 0.8125rem; block-size: 0.8125rem; }
		&[data-scale='xs'] { inline-size: 0.9375rem; block-size: 0.9375rem; }
		&[data-scale='sm'] { inline-size: 1.125rem; block-size: 1.125rem; }
		&[data-scale='lg'] { inline-size: 1.875rem; block-size: 1.875rem; }
		&[data-scale='xl'] { inline-size: 2.8125rem; block-size: 2.8125rem; }
		&[data-scale='2xl'] { inline-size: 3rem; block-size: 3rem; }
	}

	.is-hidden {
		display: none !important;
	}

	.grecaptcha-badge {
		visibility: hidden;
	}

	.to-top {
		position: fixed;
		inset-block-end: max(var(--space-lg), env(safe-area-inset-bottom));
		inset-inline-end: max(var(--space-lg), env(safe-area-inset-right));
		z-index: 40;
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		border: 1px solid var(--color-border);
		border-radius: 50%;
		background: var(--color-surface);
		color: var(--color-accent);
		box-shadow: var(--shadow-md);
		opacity: 0;
		visibility: hidden;
		translate: 0 calc(0.5rem * var(--motion-scale));
		transition:
			opacity var(--duration) var(--ease),
			translate var(--duration) var(--ease),
			border-color var(--duration-fast) var(--ease),
			visibility var(--duration) var(--ease);

		&.is-visible {
			opacity: 1;
			visibility: visible;
			translate: 0 0;
		}

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

		@media print {
			display: none;
		}
	}

	.visually-hidden:not(:focus):not(:active) {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.skip-link {
		position: absolute;
		inset-block-start: var(--space-xs);
		inset-inline-start: var(--space-xs);
		z-index: 100;
		padding: var(--space-xs) var(--space-md);
		border-radius: var(--radius-sm);
		background: var(--color-accent);
		color: var(--color-text-inverse);
		font-weight: var(--weight-strong);
		translate: 0 -200%;

		&:focus {
			translate: 0 0;
		}
	}

	@supports (-webkit-touch-callout: none) {
		:is(input, select, textarea) {
			font-size: max(1rem, var(--text-base));
		}
	}
}

@keyframes masthead-elevate {
	to {
		background: color-mix(in srgb, var(--color-surface) 97%, transparent);
		box-shadow: var(--shadow-sm);
	}
}

@keyframes field-shake {
	10%, 90% { translate: -1px 0; }
	20%, 80% { translate: 2px 0; }
	30%, 50%, 70% { translate: -4px 0; }
	40%, 60% { translate: 4px 0; }
}