@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/assets/fonts/geist-latin.woff2") format("woff2");
}

/*
	BASE INDEX
	config:    1. design tokens  2. fonts
	reset:     3. reset (Piccalilli modern reset)
	elements:  4. global styles + typography
	form:      5. forms
	overlay:   6. overlays (dialog, tooltip)
*/

@layer config,
	reset,
	elements,
	form,
	overlay,
	compositions,
	components,
	utilities;

@layer config {
	/* --------------------------------------------------------------------------
	design tokens
	-------------------------------------------------------------------------- */
	:root {
		/* -----------------------------------------------------------------------
		color
		----------------------------------------------------------------------- */
		color-scheme: light;
		interpolate-size: allow-keywords;

		/* base — warm monochrome, cream to ink (oklch hue 78°) */
		--cream: oklch(0.9853 0.0029 84.56);
		--paper: oklch(0.9679 0.0045 78.3);
		--base-50: oklch(0.9383 0.0063 75.41);
		--base-100: oklch(0.9107 0.0075 80.72);
		--base-150: oklch(0.8801 0.0076 80.72);
		--base-200: oklch(0.8439 0.0082 73.73);
		--base-300: oklch(0.7691 0.0102 72.63);
		--base-400: oklch(0.6949 0.0117 76.57);
		--base-500: oklch(0.6095 0.0139 75.3);
		--base-600: oklch(0.5299 0.0138 79.74);
		--base-700: oklch(0.4557 0.0129 76.49);
		--base-800: oklch(0.3735 0.0114 78.18);
		--base-850: oklch(0.3106 0.0097 80.66);
		--base-900: oklch(0.2496 0.0087 75.2);
		--base-950: oklch(0.2146 0.0066 78.18);
		--ink: oklch(0.1834 0.0068 78.14);

		/* accent colors */
		--primary: oklch(0.6626 0.1817 255.91);
		--yellow: oklch(0.8654 0.1581 99.52);
		--green: oklch(0.831 0.1788 159.77);
		--magenta: oklch(0.5091 0.1937 326.83);
		--indigo: oklch(0.3799 0.139 257.73);

		/* semantic — backgrounds */
		--color-bg: var(--paper);
		--color-bg-card: var(--cream);
		--color-bg-2: var(--base-50);
		--color-bg-dark: var(--base-950);

		/* semantic — text (on light) */
		--color-text: var(--ink);
		--color-text-muted: var(
			--base-600
		); /* base-600 hits WCAG AA 4.5:1 on paper (base-500 was 3.46) */
		/* "faint" can't be both fainter than muted AND pass AA on text, so it
		   matches muted (base-300 was 1.9:1, failing on footer/labels). */
		--color-text-faint: var(--base-600);

		/* semantic — text (on dark) */
		--color-text-invert: var(--paper);
		--color-text-muted-invert: var(--base-400);
		--color-text-faint-invert: var(
			--base-400
		); /* was base-700, 2.41:1 — failed on dark footer */

		/* semantic — borders */
		--color-border: var(--base-150);
		--color-border-hover: var(--base-200);
		--color-border-active: var(--primary);

		/* semantic — accents */
		--color-accent: var(--primary);
		--color-link: oklch(from var(--primary) 0.3 0.12 h);
		--color-yellow: var(--yellow);
		--color-green: var(--green);
		--color-magenta: var(--magenta);
		--color-indigo: var(--indigo);

		/* semantic — status (L=0.55, C=0.14, hue varies) */
		--color-success: oklch(0.5502 0.1377 154.39);
		--color-warning: oklch(0.5493 0.1381 53.77);
		--color-error: oklch(0.5498 0.1403 24.93);
		--color-shadow: oklch(0 0 0);

		/* -----------------------------------------------------------------------
		spacing — two fluid primitives composed with calc()
		----------------------------------------------------------------------- */
		--gutter: clamp(1rem, 2.5vmax, 1.5rem); /* horizontal/layout — 16–24px */
		--stack: clamp(
			1.25ex,
			2.5vmax,
			1.75ex
		); /* vertical typographic rhythm — scales with current font-size */

		/* -----------------------------------------------------------------------
		typography
		----------------------------------------------------------------------- */

		/* font stacks */
		--font-family-main: "Geist", system-ui, sans-serif;
		--font-family-heading: "Geist", system-ui, sans-serif;
		--font-family-code:
			ui-monospace, menlo, monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;

		/* font properties */
		--font-weight-regular: 400;
		--font-weight-medium: 500;
		--font-weight-bold: 700;
		--font-weight: var(--font-weight-regular);

		/* font size — body (fixed rem) */
		--font-size-xs: 0.8125rem;
		--font-size-sm: 0.875rem;
		--font-size-md: 1rem;
		--font-size-lg: 1.125rem;

		/* font size — micro (uppercase micro-labels / eyebrows) */
		--font-size-micro: 0.75rem;

		/* font size — headings (fluid clamp, max = Paper spec) */
		--font-size-xl: clamp(1.125rem, 1rem + 0.25vw, 1.25rem); /* 18–20px → h3 */
		--font-size-xxl: clamp(1.5rem, 1.25rem + 0.5vw, 2rem); /* 24–32px → h2 */
		--font-size-xxxl: clamp(2.25rem, 1.75rem + 1vw, 3rem); /* 36–48px → h1 */
		--font-size-poster: clamp(3.5rem, 8vw, 7rem);

		/* line length */
		--line-length-xs: 24ch;
		--line-length-sm: 48ch;
		--line-length-md: 64ch;
		--line-length-lg: 72ch;
		--line-length-xl: 80ch;
		--measure: var(--line-length-md);

		/* grid */
		--page-gutter: min(4vw, 4em);
		--content-width: 68rem;

		/* line height */
		--line-height-xs: 0.88;
		--line-height-sm: 1.1;
		--line-height-md: 1.375;
		--line-height-lg: 1.72;
		--line-height-fluid: calc(0.6rem + 1em);

		/* letter spacing */
		--letter-spacing-sm: -0.025em;
		--letter-spacing-md: 0;
		--letter-spacing-lg: 0.1em;
		--letter-spacing-xl: 0.3em;
		--letter-spacing-micro: 0.12em;

		/* -----------------------------------------------------------------------
		borders
		----------------------------------------------------------------------- */

		/* border radius */
		--border-radius-0: 0;
		--border-radius-sm: 0.2rem;
		--border-radius-md: 0.4rem;
		--border-radius-lg: 0.8rem;
		--border-radius-xl: 1.6rem;

		/* border width */
		--border-width-sm: 0.0625rem;
		--border-width-md: 0.1rem;
		--border-width-lg: 0.25rem;

		/* -----------------------------------------------------------------------
		z-index
		----------------------------------------------------------------------- */
		--z-0: 0;
		--z-1: 1;
		--z-2: 2;
		--z-3: 3;
		--z-4: 4;
		--z-5: 5;

		/* -----------------------------------------------------------------------
		shadows
		----------------------------------------------------------------------- */
		--shadow-md:
			0 -1px 3px 0 oklch(from var(--color-shadow) l c h / 2%),
			0 1px 2px -5px oklch(from var(--color-shadow) l c h / 2%),
			0 2px 5px -5px oklch(from var(--color-shadow) l c h / 4%),
			0 4px 12px -5px oklch(from var(--color-shadow) l c h / 5%),
			0 12px 15px -5px oklch(from var(--color-shadow) l c h / 7%);
		--shadow-lg:
			0 5px 5px -2px oklch(from var(--color-shadow) l c h / 6%),
			0 10px 10px -2px oklch(from var(--color-shadow) l c h / 7%),
			0 20px 20px -2px oklch(from var(--color-shadow) l c h / 8%),
			0 40px 40px -2px oklch(from var(--color-shadow) l c h / 9%);

		/* -----------------------------------------------------------------------
		transitions
		----------------------------------------------------------------------- */
		--transition-fast: 150ms ease;
		--transition-base: 250ms ease;
		--transition-fade: 300ms ease;

		/* -----------------------------------------------------------------------
		shapes
		----------------------------------------------------------------------- */
		--shape-chevron: polygon(
			35% 0,
			80% 50%,
			35% 100%,
			28% 93%,
			62% 55%,
			66% 50%,
			66% 50%,
			62% 45%,
			28% 7%
		);
	}

	/* --------------------------------------------------------------------------
	fonts
	-------------------------------------------------------------------------- */
}

@layer reset {
	/* --------------------------------------------------------------------------
	reset (Piccalilli modern reset)
	-------------------------------------------------------------------------- */

	/* Box sizing rules */
	:where(*, *::before, *::after) {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	/* Prevent font size inflation */
	:where(html) {
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}

	/* Remove list styles on ul, ol elements with a list role */
	:where(ul, ol)[role="list"] {
		list-style: none;
	}

	/* Balance text wrapping on headings */
	:where(h1, h2, h3, h4, h5, h6) {
		text-wrap: balance;
	}

	/* Match SVG icons with text color */
	:where(svg) {
		fill: currentColor;
	}

	/* Pointer cursors for interactive elements */
	:where(input:is([type="checkbox"], [type="radio"]), select, label, button) {
		cursor: pointer;
	}

	/* Visible buttons in forced-colors / high-contrast mode */
	@media (forced-colors: active) {
		:where(button) {
			border: 1px solid;
		}
	}

	/* A elements that don't have a class get default styles */
	:where(a:not([class])) {
		text-decoration-skip-ink: auto;
		color: currentColor;
	}

	/* Make images easier to work with */
	:where(img, picture) {
		max-inline-size: 100%;
		display: block;
	}

	/* Inherit fonts for inputs and buttons */
	:where(input, button, textarea, select) {
		font: inherit;
	}
}

@layer elements {
	/* --------------------------------------------------------------------------
	global styles + typography
	-------------------------------------------------------------------------- */
	::selection {
		color: var(--color-bg);
		background-color: color-mix(
			in oklch,
			var(--color-text),
			var(--color-bg) 20%
		);
	}

	:focus-visible {
		outline: var(--border-width-md) var(--color-accent) solid;
		outline-offset: var(--border-width-md);
	}

	@media (prefers-reduced-motion: no-preference) {
		@view-transition {
			navigation: auto;
		}

		::view-transition-old(root),
		::view-transition-new(root) {
			animation-duration: 0.1s;
		}
	}

	html {
		min-block-size: 100dvh;
		scroll-padding-top: calc(var(--gutter) * 3);
		color: var(--color-text);
		background-color: var(--color-bg);
		accent-color: var(--color-accent);
		overflow-x: clip;
		font-weight: var(--font-weight);

		@media (prefers-reduced-motion: no-preference) {
			scroll-behavior: smooth;
		}
	}

	body {
		position: relative;
		display: grid;
		grid-template-columns:
			[bleed-start] 1fr
			[content-start] min(100% - var(--page-gutter) * 2, var(--content-width))
			[content-end] 1fr [bleed-end];
		grid-template-rows: auto 1fr auto;
		min-block-size: 100dvh;
		font-family: var(--font-family-main);
		font-size-adjust: from-font;
		line-height: var(--line-height-fluid);

		:where(& main, & > header, & > footer) {
			grid-column: bleed;
			display: grid;
			grid-template-columns: subgrid;

			& > * {
				grid-column: content;
				min-inline-size: 0;
			}

			& > :where(section) {
				grid-column: bleed;
				display: grid;
				grid-template-columns: subgrid;
				padding-block: calc(var(--stack) * 6);

				& > * {
					grid-column: content;
					min-inline-size: 0;
				}
			}
		}
	}

	:where(details-menu) {
		display: contents;
	}

	:where(header) {
		container-type: inline-size;
	}

	main {
		z-index: var(--z-1);
	}

	:where(header, footer) {
		padding-block: calc(var(--stack) * 0.75);
		z-index: var(--z-2);
	}

	hr {
		inline-size: 4rem;
		margin-block: calc(var(--stack) * 2);
		margin-inline: auto;
		border: 0;
		border-block-start: var(--border-width-sm) solid var(--color-accent);
	}

	:where(img, embed, object, svg, video) {
		max-inline-size: 100%;
		block-size: auto;
		line-height: var(--line-height-fluid);
	}

	:is(video, iframe[src*="youtube"], iframe[src*="vimeo"]) {
		display: block;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 16 / 9;
	}

	svg {
		flex-shrink: 0;
	}

	figcaption {
		padding-block-start: calc(var(--stack) / 2);
		font-size: var(--font-size-sm);
	}

	:where(details) {
		& > summary {
			display: flex;
			flex-wrap: nowrap;
			gap: calc(var(--gutter) / 2);
			align-items: center;
			cursor: pointer;
			color: var(--color-text);

			&::-webkit-details-marker {
				display: none;
			}

			&::before {
				position: relative;
				content: "";
				inline-size: 1em;
				block-size: 1em;
				scale: 0.9;
				background-color: currentcolor;
				clip-path: var(--shape-chevron);
			}
		}

		&[open] > summary::before {
			transform: rotate(90deg);
		}
	}

	/* typography */
	:where(article, .formatted) {
		max-inline-size: var(--line-length-xl);

		& > :where(h1, h2, blockquote, hr) {
			margin-block: calc(var(--stack) * 2);
		}

		& > :where(h3, form, img, video, picture) {
			margin-block: var(--stack);
		}

		& > :where(p, ul, ol, dl, pre, details, h4, h5, h6) {
			margin-block: calc(var(--stack) * 0.75);
		}
	}

	:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre, blockquote, form) {
		overflow-wrap: break-word;
	}

	:where(h1, h2, h3, h4, h5, h6) {
		font-family: var(--font-family-heading);
		line-height: var(--line-height-fluid);
	}

	h1 {
		font-size: var(--font-size-xxxl);
		font-weight: var(--font-weight-bold);
		letter-spacing: -0.03em;
		line-height: 1.06;
	}

	h2 {
		font-size: var(--font-size-xxl);
		font-weight: var(--font-weight-bold);
		letter-spacing: -0.03em;
		line-height: 1.14;
	}

	h3 {
		font-size: var(--font-size-xl);
		font-weight: var(--font-weight-bold);
		letter-spacing: -0.02em;
		line-height: 1.2;
	}

	:where(h4, h5, h6) {
		font-size: var(--font-size-md);
		font-weight: var(--font-weight-bold);
	}

	:where(p, ul, ol, dl, pre, blockquote) {
		line-height: var(--line-height-fluid);
		text-wrap: pretty;
	}

	:where(ul:not([class]), ol:not([class])) {
		padding-inline-start: 1.75ch;
	}

	ul {
		list-style-type: square;
	}

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

	small {
		font-size: var(--font-size-sm);
	}

	mark {
		color: inherit;
		background-color: color-mix(
			in oklch,
			var(--color-text),
			var(--color-bg) 80%
		);
	}

	:where(a, a:visited) {
		color: var(--color-link);
		text-decoration-thickness: var(--border-width-md);
		text-underline-offset: 0.15rem;
		transition:
			text-decoration-thickness 0.1s ease,
			color 0.1s ease;
	}

	@media (hover) and (pointer: fine) {
		a:hover {
			text-decoration-thickness: calc(var(--border-width-md) * 1.5);
		}
	}

	:where(pre, code) {
		color: color-mix(in oklch, var(--color-link), var(--color-text) 50%);
		background-color: var(--color-bg-2);
		border-radius: var(--border-radius-sm);
	}

	pre {
		margin-inline: calc(calc(var(--gutter) * 0.75) * -1);
		padding-block: calc(var(--stack) / 2);
		padding-inline: calc(var(--gutter) * 0.75);
		line-height: var(--line-height-md);
		overflow: auto;
	}

	code {
		font-family: var(--font-family-code);
		padding: 0.1rem calc(var(--gutter) / 2);
		font-size: 90%;
		-webkit-box-decoration-break: clone;

		:is(pre) & {
			border: none;
			background-color: transparent;
			padding-block: 0;
			padding-inline: 0;
			overflow: auto;
		}
	}

	:where(blockquote) {
		margin-inline: calc(calc(var(--gutter) * 0.75) * -1) 0;
		padding-inline-start: calc(var(--gutter) * 0.75);
		font-size: var(--font-size-md);
		border-inline-start: var(--border-width-md) solid var(--color-accent);
		text-box: trim-both cap alphabetic;

		& > p {
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-regular);
			text-wrap: balance;
		}

		& cite {
			display: block;
			font-size: var(--font-size-xs);
			font-weight: var(--font-weight-bold);
			font-style: normal;
			text-transform: uppercase;
		}
	}

	:where(dt) {
		font-weight: var(--font-weight-bold);

		dd + & {
			margin-block-start: calc(var(--stack) * 0.75);
		}
	}

	table {
		inline-size: 100%;
		border-collapse: collapse;
	}

	th,
	td {
		text-align: start;
		padding: calc(var(--gutter) * 0.75);
	}

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

	thead {
		border-block-end: var(--border-width-md) solid var(--color-border);
	}

	td {
		border-block-end: var(--border-width-sm) solid var(--color-border);
	}

	tr:last-child td {
		border-block-end: none;
	}

	.table {
		overflow-x: auto;
		border: var(--border-width-sm) solid var(--color-border);
		border-radius: var(--border-radius-md);

		&[data-variant="grid"] :is(th, td) + :is(th, td) {
			border-inline-start: var(--border-width-sm) solid var(--color-border);
		}
	}

	caption {
		caption-side: bottom;
		margin-block-start: calc(var(--stack) * 0.75);
	}

	:target {
		animation: target 1.6s 0.4s ease-out;
	}

	@keyframes target {
		0% {
			background-color: oklch(from var(--color-accent) l c h / 30%);
		}
		100% {
			background-color: transparent;
		}
	}
}

@layer form {
	/* --------------------------------------------------------------------------
	forms
	-------------------------------------------------------------------------- */
	form {
		inline-size: 100%;
		display: flex;
		flex-direction: column;
		gap: var(--gutter);
	}

	label {
		display: block;
		flex-grow: 1;
		flex-shrink: 1;
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height-lg);
	}

	textarea {
		inline-size: 100%;
		field-sizing: content;
		min-block-size: calc(var(--gutter) * 4);
	}

	:where(button, input, select, option, textarea) {
		color: var(--color-text);
		line-height: var(--line-height-sm);
	}

	:where(
		input:not(
			[type="range"],
			[type="button"],
			[type="submit"],
			[type="radio"],
			[type="checkbox"],
			[type="file"]
		),
		select,
		textarea
	) {
		inline-size: 100%;
		background-color: var(--color-bg-2);
		border: var(--border-width-md) solid var(--color-border);
		border-radius: var(--border-radius-sm);
		padding: calc(var(--gutter) * 0.75);
		font-weight: var(--font-weight);
		transition: border-color 0.1s ease;

		&::placeholder {
			color: var(--color-text);
			opacity: 0.5;
		}

		&:focus,
		&:focus-within {
			border-color: var(--color-accent);
			outline: none;
		}
	}

	select {
		font-weight: normal;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
		background-repeat: no-repeat;
		background-position: right calc(var(--gutter) * 0.75) center;
		background-size: var(--gutter) var(--gutter);

		@supports (appearance: base-select) {
			appearance: base-select;
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			background-image: none;

			&::picker-icon {
				content: "";
				display: block;
				inline-size: 1em;
				block-size: 0.75em;
				background-color: var(--color-text);
				clip-path: var(--shape-chevron);
				rotate: 90deg;
			}

			&::picker(select) {
				appearance: base-select;
				max-block-size: 24rem;
				max-inline-size: 24rem;
				position-try-order: normal;
				margin-block: calc(calc(var(--stack) * 2) * -1);
				margin-inline: calc(calc(var(--gutter) / 2) * -1.25);
				background-color: var(--color-bg-2);
				border: var(--border-width-sm) solid var(--color-border);
				border-radius: var(--border-radius-sm);
				padding: calc(var(--gutter) / 2);
				box-shadow: var(--shadow-md);
			}

			& legend {
				padding: calc(var(--gutter) / 2);
				font-size: var(--font-size-xs);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				text-transform: uppercase;
				opacity: 0.5;
			}

			& option {
				display: block;
				cursor: pointer;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-weight: var(--font-weight);
				padding: calc(var(--gutter) / 2);
				border-radius: var(--border-radius-sm);

				&::checkmark {
					display: none;
				}

				&[disabled] {
					opacity: 0.5;
					pointer-events: none;
				}

				&:not([disabled]) {
					@media (hover: hover) {
						&:hover {
							background-color: oklch(from var(--color-text) l c h / 10%);
						}
					}

					&:focus {
						background-color: oklch(from var(--color-text) l c h / 10%);
					}

					&:focus-visible {
						outline: none;
					}

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

	[disabled] {
		opacity: 0.5;
	}

	input[type="checkbox"],
	input[type="radio"] {
		appearance: none;
		display: inline-grid;
		place-content: center;
		inline-size: 1.2em;
		block-size: 1.2em;
		margin: 0;
		padding: 0;
		color: currentcolor;
		background-color: var(--color-bg-2);
		border: var(--border-width-md) solid var(--color-border);

		&:checked::before {
			scale: 1;
			box-shadow: inset 1em 1em var(--color-accent);
		}
	}

	input[type="radio"] {
		border-radius: 50%;
		translate: 0 0.05em;

		&::before {
			content: "";
			inline-size: 0.7em;
			block-size: 0.7em;
			border-radius: 50%;
			scale: 0;
			transition: 100ms transform ease-in-out;
			box-shadow: inset 1em 1em var(--color-text);
		}
	}

	input[type="checkbox"] {
		border-radius: var(--border-radius-sm);

		&::before {
			content: "";
			inline-size: 0.65em;
			block-size: 0.65em;
			clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
			scale: 0;
			box-shadow: inset 1em 1em var(--color-text);
		}
	}
}

@layer overlay {
	/* --------------------------------------------------------------------------
	overlays (dialog, tooltip)
	-------------------------------------------------------------------------- */
	dialog {
		inline-size: min(var(--line-length-lg), 90vw);
		margin-block: calc(var(--stack) / 2);
		margin-inline: auto;
		padding-block: var(--stack);
		padding-inline: var(--gutter);
		overflow: visible;
		background-color: var(--color-bg-2);
		border-radius: var(--border-radius-lg);
		border: var(--border-width-sm) solid
			oklch(from var(--color-border) l c h / 50%);
		box-shadow: var(--shadow-lg);
		transition:
			opacity 0.1s,
			scale 0.1s,
			overlay 0.1s allow-discrete,
			display 0.1s allow-discrete;
		opacity: 0;
		scale: 0.9;
		position: fixed;
		inset-block-start: 50dvh;
		translate: 0 -50%;

		&:focus-visible {
			outline: none;
		}

		&::backdrop {
			transition: all 0.1s ease-in-out;
			backdrop-filter: blur(0.1rem);
		}

		&:popover-open {
			opacity: 1;
			scale: 1;
		}

		&[data-variant="drawer"] {
			margin: 0;
			margin-inline-start: auto;
			inset-block-start: 0;
			block-size: 100dvh;
			max-block-size: 100dvh;
			border-radius: 0;
			border-inline-end: none;
			scale: 1;
			translate: 100% 0;
			opacity: 0;
			transition:
				opacity var(--transition-base),
				translate var(--transition-base),
				overlay var(--transition-base) allow-discrete,
				display var(--transition-base) allow-discrete;

			&:popover-open {
				opacity: 1;
				translate: 0 0;
			}

			@starting-style {
				&:popover-open {
					opacity: 0;
					translate: 100% 0;
				}
			}
		}
	}

	@starting-style {
		dialog:popover-open {
			opacity: 0;
			scale: 0.9;
		}
	}

	[role="tooltip"] {
		position: absolute;
		inset: inherit;
		position-visibility: always;
		position-try-fallbacks:
			flip-block,
			y-start span-x-end,
			y-end span-x-end,
			y-start span-x-start,
			y-end span-x-start;
		position-area: y-start span-all;
		padding-block: calc(var(--stack) / 2);
		padding-inline: calc(var(--gutter) * 0.75);
		margin-block: calc(var(--stack) / 2);
		font-size: var(--font-size-sm);
		background-color: var(--color-bg-2);
		border: var(--border-width-sm) solid
			oklch(from var(--color-border) l c h / 50%);
		border-radius: var(--border-radius-lg);
		box-shadow: var(--shadow-lg);
	}
}

/*
	COMPOSITIONS INDEX
	1. cluster
	2. flow
	3. auto-grid
	4. repel
	5. center
*/

@layer compositions {
	/* --------------------------------------------------------------------------
	cluster (https://every-layout.dev/layouts/cluster/)
	A layout that distributes items with consistent spacing.

	CUSTOM PROPERTIES
	--gutter: Space between each item (defaults to global --gutter).
	--cluster-justify (flex-start): Horizontal alignment (justify-content).
	--cluster-align (center): Vertical alignment (align-items).
	-------------------------------------------------------------------------- */
	.cluster {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gutter);
		justify-content: var(--cluster-justify, flex-start);
		align-items: var(--cluster-align, center);
	}

	/* --------------------------------------------------------------------------
	flow (https://every-layout.dev/layouts/stack/)
	Vertical spacing between siblings.
	Info: https://piccalil.li/blog/my-favourite-3-lines-of-css/
	-------------------------------------------------------------------------- */
	.flow > * + * {
		margin-block-start: var(--flow-space, 1em);
	}

	/* --------------------------------------------------------------------------
	auto-grid (https://every-layout.dev/layouts/grid/)
	A flexible layout that creates an auto-fill grid with configurable item sizes.

	CUSTOM PROPERTIES
	--gutter: Space between each item (defaults to global --gutter — 16–24px).
	--grid-min-size (16rem): Minimum item size.
	--grid-placement (auto-fill): auto-fill or auto-fit for empty track handling.

	DATA ATTRIBUTES
	[data-layout="50-50"]: Two-column 50/50 split.
	[data-layout="thirds"]: Three-column layout.
	-------------------------------------------------------------------------- */
	.auto-grid {
		display: grid;
		grid-template-columns: repeat(
				var(--grid-placement, auto-fill),
				minmax(var(--grid-min-size, 16rem), 1fr)
			);
		gap: var(--gutter);
	}

	.auto-grid[data-layout="50-50"] {
		--grid-placement: auto-fit;
		--grid-min-size: clamp(16rem, 50vw, 33rem);
	}

	.auto-grid[data-layout="thirds"] {
		--grid-placement: auto-fit;
		--grid-min-size: clamp(16rem, 33%, 20rem);
	}

	.auto-grid[data-layout="5-7"] {
		--grid-placement: auto-fit;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.auto-grid[data-layout="7-5"] {
		--grid-placement: auto-fit;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.auto-grid[data-layout="quarters"] {
		--grid-placement: auto-fit;
		--grid-min-size: clamp(12rem, 25%, 16rem);
	}

	@media (max-width: 49.999em) {
		.auto-grid[data-layout="5-7"],
		.auto-grid[data-layout="7-5"] {
			grid-template-columns: 1fr;
		}
	}

	/* --------------------------------------------------------------------------
	repel
	Pushes items apart where there is space, stacks on small viewports.

	CUSTOM PROPERTIES
	--gutter: Space between each item (defaults to global --gutter).
	--repel-align (center): Vertical alignment (align-items).
	-------------------------------------------------------------------------- */
	.repel {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: var(--repel-align, center);
		gap: var(--gutter);
	}

	/* --------------------------------------------------------------------------
	center (https://every-layout.dev/layouts/center/)
	Horizontally centers an element and caps its width to a reading measure.

	CUSTOM PROPERTIES
	--measure: Max inline size (defaults to global --measure — 64ch).
	-------------------------------------------------------------------------- */
	.center {
		box-sizing: content-box;
		margin-inline: auto;
		max-inline-size: var(--measure);
	}
}

@layer components {
	.site-head {
		position: sticky;
		inset-block-start: 0;
		z-index: var(--z-5);
		background-color: oklch(from var(--color-bg) l c h / 85%);
		backdrop-filter: blur(20px) saturate(1.5);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block: calc(var(--stack) * 0.875);
		padding-inline: max(var(--gutter), calc((100% - var(--content-width)) / 2));
	}

	/* Brand */
	.site-head__brand {
		display: flex;
		align-items: center;
		gap: calc(var(--gutter) / 2);
		text-decoration: none;
		color: var(--primary);
	}

	.site-head__brand svg {
		block-size: 40px;
		flex-shrink: 0;
	}

	.site-head__brand span {
		font-family: var(--font-family-heading);
		font-size: 18px;
		font-weight: 700;
		letter-spacing: -0.02em;
		line-height: 22px;
	}

	/* Desktop nav */
	.site-head__nav {
		display: none;
		align-items: center;
		gap: calc(var(--gutter) * 2);
	}

	.site-head__nav a {
		font-size: 14px;
		font-weight: 500;
		line-height: 18px;
		color: var(--color-text-muted);
		text-decoration: none;
		transition: color 0.15s;
	}

	.site-head__nav a:hover {
		color: var(--color-text);
	}

	/* Dropdown menus */
	.site-head__dropdown {
		position: relative;
	}

	.site-head__dropdown > ul {
		display: none;
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 50%;
		translate: -50% 0;
		list-style: none;
		padding-block: calc(var(--stack) * 0.75);
		padding-inline: 0;
		margin-block-start: var(--stack);
		inline-size: fit-content;
		white-space: nowrap;
		background-color: var(--color-bg);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius-lg);
		box-shadow: 0 8px 24px oklch(from var(--color-shadow) l c h / 0.12);
	}

	.site-head__dropdown > ul::before {
		content: "";
		position: absolute;
		inset-block-start: -16px;
		inset-inline-start: 0;
		inset-inline-end: 0;
		block-size: 16px;
	}

	.site-head__dropdown:hover > ul,
	.site-head__dropdown:focus-within > ul {
		display: flex;
		flex-direction: column;
	}

	.site-head__dropdown > ul a {
		display: flex;
		align-items: center;
		gap: calc(var(--gutter) / 2);
		padding-block: calc(var(--stack) / 2);
		padding-inline: calc(var(--gutter) / 2);
		border-radius: var(--border-radius-md);
		font-size: 14px;
		font-weight: 400;
		color: var(--color-text-muted);
		text-decoration: none;
		transition:
			color 0.15s,
			background-color 0.15s;
	}

	.site-head__dropdown > ul a:hover {
		color: var(--color-text);
		background-color: var(--color-bg-2);
	}

	/* Mega menu (Solutions) */
	.site-head__mega {
		display: none;
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		margin-block-start: var(--stack);
		inline-size: max-content;
		max-inline-size: 40rem;
		padding: calc(var(--stack) * 0.75);
		background-color: var(--color-bg);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius-lg);
		box-shadow: 0 8px 24px oklch(from var(--color-shadow) l c h / 0.12);
	}

	.site-head__mega::before {
		content: "";
		position: absolute;
		inset-block-start: -16px;
		inset-inline: 0;
		block-size: 16px;
	}

	.site-head__dropdown:hover > .site-head__mega,
	.site-head__dropdown:focus-within > .site-head__mega {
		display: grid;
		grid-template-columns: max-content 13rem;
		gap: calc(var(--gutter) * 1.5);
	}

	.site-head__mega-main {
		display: flex;
		flex-direction: column;
	}

	.site-head__mega-list a {
		display: flex;
		align-items: center;
		gap: calc(var(--gutter) / 2);
		padding-block: calc(var(--stack) / 2);
		padding-inline: calc(var(--gutter) / 2);
		border-radius: var(--border-radius-md);
		font-size: 14px;
		color: var(--color-text-muted);
		text-decoration: none;
		white-space: nowrap;
		transition:
			color 0.15s,
			background-color 0.15s;
	}

	.site-head__mega-list a:hover {
		color: var(--color-text);
		background-color: var(--color-bg-2);
	}

	.site-head__mega .site-head__mega-all {
		margin-block-start: calc(var(--stack) / 2);
		padding-block-start: calc(var(--stack) * 0.75);
		padding-inline: calc(var(--gutter) / 2);
		border-block-start: 1px solid var(--color-border);
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
		color: var(--color-accent);
	}

	/* Featured panel (POTSup) */
	.site-head__mega-feature {
		display: flex;
		flex-direction: column;
		gap: calc(var(--stack) / 4);
		padding: var(--gutter);
		border-radius: var(--border-radius-lg);
		background-color: var(--color-bg-2);
		text-decoration: none;
		transition: background-color 0.15s;
	}

	.site-head__mega-feature:hover {
		background-color: oklch(from var(--color-accent) l c h / 0.1);
	}

	.site-head__mega-feature-label {
		font-size: var(--font-size-micro);
		font-weight: 600;
		letter-spacing: var(--letter-spacing-micro);
		text-transform: uppercase;
		color: var(--color-accent);
	}

	.site-head__mega-feature-title {
		font-family: var(--font-family-heading);
		font-size: 16px;
		font-weight: 700;
		color: var(--color-text);
	}

	.site-head__mega-feature-desc {
		font-size: 13px;
		color: var(--color-text-muted);
	}

	.site-head__mega-feature-arrow {
		margin-block-start: auto;
		padding-block-start: calc(var(--stack) / 2);
		font-size: 13px;
		font-weight: 500;
		color: var(--color-accent);
	}

	.dropdown-hex {
		display: grid;
		place-items: center;
		inline-size: 22px;
		block-size: 24px;
		flex-shrink: 0;
	}

	.dropdown-hex svg {
		fill: var(--hex-fill, var(--color-text));
		grid-area: 1 / 1;
		inline-size: 22px;
		block-size: 24px;
	}

	.dropdown-hex > span {
		grid-area: 1 / 1;
		font-size: 10px;
		font-weight: 700;
		color: var(--color-bg);
	}

	@media (min-width: 50em) {
		.site-head__nav {
			display: flex;
		}
	}

	/* Right actions (phone + button) */
	.site-head__actions {
		display: none;
		align-items: center;
		gap: var(--gutter);
	}

	.site-head__phone {
		font-size: 14px;
		font-weight: 500;
		line-height: 18px;
		color: var(--color-text);
		text-decoration: none;
	}

	.site-head__phone--mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 40px;
		block-size: 40px;
	}

	.site-head__phone--mobile svg {
		inline-size: 22px;
		block-size: 22px;
		fill: currentColor;
	}

	.site-head__phone--menu {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-block: calc(var(--stack) * 0.75);
		font-size: 16px;
	}

	@media (min-width: 50em) {
		.site-head__actions {
			display: flex;
		}

		.site-head__phone--mobile {
			display: none;
		}
	}

	/* Mobile menu toggle */
	.site-head__menu {
		justify-self: end;
	}

	@media (min-width: 50em) {
		.site-head__menu {
			display: none;
		}
	}

	/* Mobile nav dialog */
	#mobile-nav {
		inline-size: calc(100vw - var(--gutter) * 2);
		inset-block-start: calc(var(--stack) * 3);
		translate: 0;
	}

	.mobile-nav__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-block-end: calc(var(--stack) * 0.75);
		margin-block-end: calc(var(--stack) * 0.75);
		border-block-end: var(--border-width-sm) solid var(--color-border);
	}

	.mobile-nav__header svg {
		block-size: 1.5rem;
		inline-size: auto;
	}

	#mobile-nav > ul {
		display: grid;
		gap: calc(var(--stack) / 2);
	}

	#mobile-nav a {
		font-size: var(--font-size-md);
		padding-block: calc(var(--stack) * 0.75);
		padding-inline: calc(var(--gutter) * 0.75);
	}

	#mobile-nav a:hover {
		background-color: var(--color-bg);
	}

	#mobile-nav details summary {
		cursor: pointer;
		list-style: none;
	}

	#mobile-nav details summary::-webkit-details-marker {
		display: none;
	}

	#mobile-nav details > ul {
		display: flex;
		flex-direction: column;
		padding-inline-start: calc(var(--gutter) * 0.75);
	}

	#mobile-nav details > ul a {
		font-size: var(--font-size-sm);
		padding-block: calc(var(--stack) / 2);
		padding-inline: calc(var(--gutter) * 0.75);
		color: var(--color-text-muted);
		text-decoration: none;
	}

	/* Mobile Solutions: WINDS hexes + featured POTSup */
	#mobile-nav .mobile-nav__winds a {
		display: flex;
		align-items: center;
		gap: calc(var(--gutter) / 2);
	}

	#mobile-nav .mobile-nav__feature {
		display: flex;
		flex-direction: column;
		gap: calc(var(--gutter) / 4);
		margin-block-start: calc(var(--stack) / 2);
		padding: var(--gutter);
		border-radius: var(--border-radius-lg);
		background-color: var(--color-bg-2);
		text-decoration: none;
	}

	#mobile-nav .mobile-nav__feature:hover {
		background-color: oklch(from var(--color-accent) l c h / 0.1);
	}

	.mobile-nav__feature-label {
		font-size: var(--font-size-micro);
		font-weight: 600;
		letter-spacing: var(--letter-spacing-micro);
		text-transform: uppercase;
		color: var(--color-accent);
	}

	.mobile-nav__feature-title {
		font-family: var(--font-family-heading);
		font-size: var(--font-size-md);
		font-weight: 700;
		color: var(--color-text);
	}

	.mobile-nav__feature-desc {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
	}

	#mobile-nav .mobile-nav__viewall {
		display: block;
		margin-block-start: calc(var(--stack) / 2);
		padding-block: calc(var(--stack) / 2);
		padding-inline: calc(var(--gutter) * 0.75);
		border-block-start: 1px solid var(--color-border);
		font-size: var(--font-size-sm);
		font-weight: 500;
		color: var(--color-accent);
		text-decoration: none;
	}
}

@layer components {
	.box {
		--box-bg: var(--color-bg-2);
		--box-padding: var(--gutter);
		--box-glow:
			0 1px 2px oklch(from var(--color-shadow) l c h / 0.04),
			inset -1px 1px 2px oklch(from var(--color-bg) l c h / 0.25),
			inset 1px 1px 2px oklch(from var(--color-bg) l c h / 0.25);

		background: var(--box-bg);
		border: var(--border-width-sm) solid var(--color-border);
		border-radius: var(--border-radius-md);
		padding-block: var(--box-padding);
		padding-inline: var(--box-padding);
	}

	.box__content {
		margin-block-start: var(--stack);
	}

	.box:has(> .box__content:first-child) > .box__content {
		margin-block-start: 0;
	}

	.box__heading {
		font-size: var(--box-heading-size, inherit);
		font-weight: var(--box-heading-weight, var(--font-weight-bold));
	}

	.box__subtitle {
		--flow-space: calc(var(--stack) / 2);
		font-size: var(--font-size-sm);
		color: color-mix(in oklch, currentColor 60%, transparent);
	}

	.box .button {
		--flow-space: calc(var(--stack) * 1.5);
	}

	.box:has(> img:first-child) > img:first-child {
		margin-block-start: calc(-1 * var(--box-padding));
		margin-inline: calc(-1 * var(--box-padding));
		inline-size: calc(100% + 2 * var(--box-padding));
		border-radius: calc(var(--border-radius-md) - var(--border-width-sm))
			calc(var(--border-radius-md) - var(--border-width-sm)) 0 0;
	}

	.box img {
		margin-block: 0;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}

	.box:has([href]:hover) {
		background: color-mix(in oklch, var(--color-accent) 5%, var(--box-bg));
		transition: background var(--transition-fade);
	}

	.box:has([href]:focus-visible) {
		outline: var(--border-width-md) solid var(--color-accent);
		outline-offset: var(--border-width-md);
	}

	/* Variants */
	.box[data-variant="invert"] {
		--box-bg: var(--color-text);
		color: var(--color-bg);
	}

	.box[data-variant="invert"] * {
		color: inherit;
	}

	.box[data-variant="glow"] {
		box-shadow: var(--box-glow);
	}

	.box[data-variant="yellow"] {
		--box-bg: var(--color-yellow);
		color: var(--ink);
		border-color: oklch(from var(--color-yellow) calc(l - 0.1) c h);
	}

	.box[data-variant="yellow"] * {
		color: inherit;
	}

	.box[data-variant="green"] {
		--box-bg: var(--color-green);
		color: var(--ink);
		border-color: oklch(from var(--color-green) calc(l - 0.1) c h);
	}

	.box[data-variant="green"] * {
		color: inherit;
	}

	.box[data-variant="magenta"] {
		--box-bg: var(--color-magenta);
		color: var(--color-bg);
		border-color: oklch(from var(--color-magenta) calc(l - 0.1) c h);
	}

	.box[data-variant="magenta"] * {
		color: inherit;
	}
}

@layer components {
	.button {
		--button-bg: var(--color-bg);
		--button-text: var(--color-text);
		--button-border: var(--color-accent);

		display: inline-flex;
		align-items: center;
		gap: calc(var(--gutter) / 2);
		padding-block: calc(var(--stack) * 0.6);
		padding-inline: calc(var(--gutter) * 0.6);
		background-color: var(--button-bg);
		color: var(--button-text);
		border: 1px solid var(--button-border);
		border-radius: var(--border-radius-lg);
		font-size: inherit;
		font-family: inherit;
		line-height: var(--line-height-sm);
		text-box: trim-both cap alphabetic;
		text-decoration: none;
		cursor: pointer;
		transition:
			color var(--transition-fast),
			background-color var(--transition-fast),
			border-color var(--transition-fast);
	}

	.button:visited {
		color: var(--button-text);
	}

	.button:hover {
		background-color: color-mix(
			in oklch,
			var(--button-border) 50%,
			transparent
		);
	}

	.button[aria-current] {
		background-color: color-mix(in oklch, var(--button-bg), currentcolor 20%);
	}

	.button svg {
		block-size: 1em;
		inline-size: auto;
	}

	/* Variants */
	.button[data-variant~="primary"] {
		--button-text: var(--color-accent);
	}

	.button[data-variant~="fill"] {
		--button-bg: var(--color-text);
		--button-text: var(--color-bg);
		--button-border: var(--color-text);
	}

	.button[data-variant~="primary"][data-variant~="fill"] {
		--button-bg: var(--color-accent);
		/* dark text on the bright brand blue = 6:1 (light text was 2.99, failing AA) */
		--button-text: var(--color-text);
		--button-border: var(--color-accent);
	}

	.button[data-variant~="yellow"][data-variant~="fill"] {
		--button-bg: var(--color-yellow);
		--button-text: var(--color-text);
		--button-border: var(--color-yellow);
	}

	.button[data-variant~="simple"] {
		padding-inline: 0;
		border-radius: 0;
		border-color: transparent;
		--button-bg: transparent;
	}

	.button[data-variant~="ghost"] {
		--button-bg: transparent;
		--button-text: var(--color-text-invert);
		--button-border: oklch(from var(--color-bg) l c h / 30%);
	}

	.button[data-variant~="ghost"]:hover {
		background-color: oklch(from var(--color-bg) l c h / 10%);
	}

	.button[data-variant~="lg"] {
		padding-block: calc(var(--stack) * 0.8);
		padding-inline: calc(var(--gutter) * 1.5);
	}

	.button[data-variant~="menu"] {
		border-width: 0;
		--button-bg: transparent;
		border-radius: var(--border-radius-sm);
		inline-size: 100%;
		padding-inline: calc(var(--gutter) / 2);
	}
}

@layer components {
	.client-logo {
		--logo-height: 32px;
		--logo-opacity: 0.7;

		block-size: var(--logo-height);
		opacity: var(--logo-opacity);
		filter: grayscale(1);
		transition:
			opacity 0.2s,
			filter 0.2s;
	}

	.client-logo:hover {
		opacity: 1;
		filter: grayscale(0);
	}
}

@layer components {
	.headline {
		display: flex;
		flex-direction: column;
		gap: var(--headline-spacing, calc(var(--gutter) * 0.75));
	}

	.headline > h2 {
		font-size: var(--font-size-xxl);
	}

	.headline > p {
		max-inline-size: var(--line-length-lg);
	}

	.headline[data-align="center"] {
		text-align: center;
		align-items: center;
	}
}

@layer components {
	.separator {
		--separator-color: var(--color-accent);

		display: flex;
		justify-content: center;
		align-items: center;
		gap: calc(var(--gutter) / 2);
		inline-size: 100%;
		margin-block: calc(var(--stack) * 2);
		color: var(--separator-color);
	}
}

@layer components {
	.tag {
		--tag-color: var(--color-accent);

		display: inline-flex;
		align-items: center;
		gap: calc(var(--gutter) / 2);
		padding-block: 0.125rem;
		padding-inline: calc(var(--gutter) / 2);
		border-radius: var(--border-radius-xl);
		background: oklch(from var(--tag-color) l c h / 0.12);
		color: oklch(from var(--tag-color) calc(l - 0.15) c h);
		border: var(--border-width-sm) solid
			oklch(from var(--tag-color) l c h / 0.2);
		font-size: var(--font-size-sm);
	}

	.tag svg {
		inline-size: 1em;
		block-size: 1em;
		flex-shrink: 0;
	}

	.tag:is(a, button) {
		cursor: pointer;
		text-decoration: none;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast);
	}

	.tag:is(a, button):hover {
		background: oklch(from var(--tag-color) l c h / 0.2);
		border-color: oklch(from var(--tag-color) l c h / 0.3);
	}

	.tag:is(a, button):focus-visible {
		outline: var(--border-width-md) solid var(--tag-color);
		outline-offset: var(--border-width-md);
	}

	.tag:is(a, button):active {
		background: oklch(from var(--tag-color) l c h / 0.25);
	}

	.tag:is(button) {
		background: oklch(from var(--tag-color) l c h / 0.12);
		box-shadow: none;
		font: inherit;
		margin: 0;
	}

	/* Variants */
	.tag[data-variant="muted"] {
		color: var(--color-text);
	}

	.tag[data-variant="yellow"] {
		--tag-color: var(--color-yellow);
	}

	.tag[data-variant="green"] {
		--tag-color: var(--color-green);
	}

	.tag[data-variant="magenta"] {
		--tag-color: var(--color-magenta);
	}

	.tag[data-variant="neutral"] {
		--tag-color: var(--base-400);
	}
}

@layer components {
	.cta-section {
		background-color: var(--color-bg-dark);
		padding-block: calc(var(--stack) * 4);
	}

	.cta-section__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: calc(var(--gutter) * 1.5);
	}

	@scope (.cta-section) {
		h2 {
			color: var(--color-text-invert);
			text-wrap: balance;
		}

		p {
			font-size: var(--font-size-lg);
			color: var(--color-text-muted-invert);
			max-inline-size: 52ch;
			text-wrap: balance;
		}
	}
}

@layer components {
	.topic-card {
		--flow-space: var(--stack);
		padding-block: calc(var(--stack) * 1.5);
		border-block-start: 1px solid var(--color-border);
		text-decoration: none;
		color: inherit;
	}

	@scope (.topic-card) {
		p {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}
	}
}

@layer components {
	.outcome-card {
		--flow-space: calc(var(--stack) * 2);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius-lg);
		padding: calc(var(--gutter) * 2);
	}

	@scope (.outcome-card) {
		& > p:first-child {
			font-size: var(--font-size-micro);
			font-weight: var(--font-weight-medium);
			letter-spacing: var(--letter-spacing-micro);
			text-transform: uppercase;
			color: var(--color-text-muted);
		}

		& > p:nth-child(2) {
			font-family: var(--font-family-heading);
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-bold);
			letter-spacing: -0.01em;
		}

		& > p:last-child {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}
	}
}

@layer components {
	.guide-card {
		--guide-card-accent: var(--primary);

		display: flex;
		flex-direction: column;
		text-decoration: none;
		padding: calc(var(--gutter) * 2);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius-lg);
	}

	@scope (.guide-card) {
		& > div:first-child {
			display: flex;
			align-items: center;
			gap: calc(var(--gutter) / 2);
		}

		& > div > span:first-child {
			inline-size: 8px;
			block-size: 8px;
			border-radius: 50%;
			background-color: var(--guide-card-accent);
			flex-shrink: 0;
		}

		& > div > span:last-child {
			font-size: var(--font-size-micro);
			font-weight: var(--font-weight-medium);
			letter-spacing: var(--letter-spacing-micro);
			text-transform: uppercase;
			color: var(--color-text-muted);
		}

		& > p:nth-of-type(1) {
			margin-block-start: calc(var(--gutter) * 1.5);
			font-family: var(--font-family-heading);
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-bold);
			letter-spacing: -0.02em;
			color: var(--color-text);
		}

		& > p:nth-of-type(2) {
			margin-block-start: auto;
			padding-block-start: calc(var(--gutter) * 0.75);
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}
	}
}

@layer components {
	.checklist-card {
		display: flex;
		flex-direction: column;
		text-decoration: none;
		padding: calc(var(--gutter) * 2);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius-lg);
	}

	@scope (.checklist-card) {
		& > p:nth-of-type(1) {
			font-family: var(--font-family-heading);
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-bold);
			letter-spacing: -0.02em;
			color: var(--color-text);
		}

		& > p:nth-of-type(2) {
			margin-block-start: auto;
			padding-block-start: calc(var(--gutter) * 0.75);
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}
	}
}

@layer components {
	.property-card {
		--property-card-accent: var(--primary);

		display: flex;
		flex-direction: column;
		gap: calc(var(--gutter) * 0.75);
		padding-block-start: calc(var(--stack) * 1.5);
		border-block-start: 2px solid var(--property-card-accent);
	}

	@scope (.property-card) {
		h3 {
			font-size: var(--font-size-xl);
		}

		p {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}
	}
}

@layer components {
	.stat-block {
		display: flex;
		flex-direction: column;
		gap: calc(var(--gutter) / 4);
	}

	@scope (.stat-block) {
		& > p:first-child {
			font-family: var(--font-family-heading);
			font-size: var(--font-size-xxxl);
			font-weight: 700;
			letter-spacing: -0.03em;
			color: var(--color-text-invert);
		}

		& > p:last-child {
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-medium);
			color: var(--color-text-muted-invert);
		}
	}
}

@layer components {
	.solution-row {
		padding-block: calc(var(--stack) * 3);
		border-block-start: 1px solid var(--color-border);
	}

	@scope (.solution-row) {
		& > a {
			align-items: start;
			text-decoration: none;
			color: inherit;
		}

		.solution-row__header {
			display: flex;
			gap: calc(var(--gutter) * 0.75);
			align-items: flex-start;
		}

		.solution-row__header h2 {
			font-size: var(--font-size-xxl);
			font-weight: var(--font-weight-bold);
			letter-spacing: -0.02em;
		}

		.solution-row__header > div > p {
			font-size: var(--font-size-xs);
			font-weight: 500;
			color: var(--solution-row-accent, var(--primary));
		}

		.solution-row__stat {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) / 4);
		}

		.solution-row__stat > p:first-child {
			font-family: var(--font-family-heading);
			font-size: var(--font-size-xxl);
			font-weight: 700;
			letter-spacing: -0.02em;
		}

		.solution-row__stat > p:last-child {
			font-size: var(--font-size-micro);
			font-weight: var(--font-weight-medium);
			color: var(--color-text-muted);
		}
	}
}

@layer components {
	.industry-card {
		--industry-card-accent: var(--primary);

		display: block;
		text-decoration: none;
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius-lg);
		padding: calc(var(--gutter) * 2);
	}

	.industry-card > div {
		display: flex;
		flex-direction: column;
		gap: calc(var(--gutter) * 0.75);
		block-size: 100%;
	}

	.industry-card h2 {
		font-size: var(--font-size-xxl);
		font-weight: var(--font-weight-bold);
		letter-spacing: -0.02em;
	}

	.industry-card > div > p:first-child {
		font-size: var(--font-size-micro);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--letter-spacing-micro);
		text-transform: uppercase;
		color: var(--industry-card-accent);
	}

	.industry-card > div > p:nth-of-type(2) {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
	}

	.industry-card > div > div {
		margin-block-start: auto;
		padding-block-start: var(--stack);
		border-block-start: 1px solid var(--color-border);
		display: flex;
		gap: calc(var(--gutter) * 0.75);
		flex-wrap: wrap;
	}

	.industry-card > div > div > span {
		font-size: var(--font-size-micro);
		color: var(--color-text-muted);
	}
}

@layer components {
	@scope (.framed-statement) {
		:scope {
			border-block: 1px solid var(--color-border);
			padding-block: 0;
		}

		:scope > * {
			text-align: center;
			max-inline-size: 64ch;
			margin-inline: auto;
			border-inline: 1px solid var(--color-border);
			padding: calc(var(--stack) * 4) calc(var(--gutter) * 2.5);
		}
	}
}

@layer components {
	.hexagon-letter {
		--hex-letter-size: 40px;

		position: relative;
		display: grid;
		place-items: center;
		inline-size: var(--hex-letter-size);
		block-size: calc(var(--hex-letter-size) * 1.1);
	}

	.hexagon-letter svg {
		fill: var(--hex-fill, var(--color-text));
		grid-area: 1 / 1;
	}

	.hexagon-letter span {
		grid-area: 1 / 1;
		font-weight: var(--font-weight-bold);
		font-size: var(--font-size-sm);
		color: var(--box-bg, var(--color-bg));
	}

	[data-counter] {
		counter-reset: steps;
	}

	[data-counter] > * {
		counter-increment: steps;
	}
}

@layer components {
	.stat-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		gap: 0;
	}

	.stat-strip {
		display: flex;
		flex-direction: column;
		text-align: center;
		padding: calc(var(--stack) * 2);
	}

	.stat-strip__value {
		font-family: var(--font-family-heading);
		font-size: var(--font-size-xxxl);
		font-weight: var(--font-weight-bold);
		letter-spacing: -0.04em;
		color: var(--stat-color, var(--color-text));
	}

	.stat-strip__label {
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		line-height: 20px;
		color: var(--color-text-muted);
	}
}

@layer components {
	.winds-features {
		display: grid;
		grid-column: content;
		gap: calc(var(--stack) * 1.5);
	}

	/* 3-column row (top) */
	.winds-row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: calc(var(--gutter) * 1);
		min-inline-size: 0;
	}

	/* 2-card centered row (bottom) */
	.winds-row[data-layout="centered"] {
		grid-template-columns: repeat(2, 1fr);
		max-inline-size: 66.666%;
		margin-inline: auto;
	}

	.winds-card {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: calc(var(--stack) * 1.5);
		padding-block: calc(var(--stack) * 1.5);
		padding-inline: calc(var(--gutter) * 1.5);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius-lg);
		transition: border-color 0.2s ease;
		text-decoration: none;
		color: inherit;
		min-inline-size: 0;
	}

	@media (hover) and (prefers-reduced-motion: no-preference) {
		.winds-card:hover {
			border-color: var(--feature-color);
		}
	}

	.winds-card .hexagon-letter {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		translate: -25% -25%;
	}

	.winds-card .hexagon-letter svg {
		fill: var(--feature-color);
	}

	.winds-card__content {
		display: flex;
		flex-direction: column;
		gap: var(--stack);
	}

	.winds-card__content h3 {
		font-size: 20px;
		font-weight: var(--font-weight-bold);
		letter-spacing: -0.02em;
		line-height: 24px;
	}

	.winds-card__body {
		font-size: 15px;
		line-height: 24px;
		color: var(--color-text-muted);
	}

	.winds-card__stats {
		display: flex;
		flex-direction: column;
		gap: calc(var(--stack) / 2);
		margin-block-start: auto;
		padding-block-start: calc(var(--stack) * 0.75);
		border-block-start: 1px solid var(--color-border);
	}

	.winds-card__stat {
		display: flex;
		align-items: baseline;
		gap: calc(var(--gutter) / 2);
	}

	.winds-card__stat strong {
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
	}

	.winds-card__stat span {
		font-size: var(--font-size-xs);
		font-weight: 500;
		color: var(--color-text-muted);
	}

	/* Mobile: single column stack */
	@media (max-width: 49.999em) {
		.winds-row,
		.winds-row[data-layout="centered"] {
			grid-template-columns: 1fr;
			max-inline-size: 100%;
		}

		.winds-card {
			padding-block: var(--stack);
			padding-inline: calc(var(--gutter) * 1.25);
		}
	}

	@keyframes slide-in-from-bottom {
		from {
			opacity: 0;
			transform: translateY(6rem) scale(0.96);
		}
	}

	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			.winds-card {
				animation: slide-in-from-bottom ease-out both;
				animation-timeline: view();
				animation-range: entry 0% entry 60%;
			}
		}
	}
}

@layer components {
	/* -------------------------------------------------------------------------
	   resource-detail  — long-form guide / checklist pages
	   Provides: dark hero, sidebar TOC, question cards, related resources
	   ------------------------------------------------------------------------- */

	/* hero ----------------------------------------------------------------- */
	.resource-hero {
		--_hero-bg: var(--color-bg-dark);
		grid-column: bleed;
		display: grid;
		grid-template-columns: subgrid;
		background-color: var(--_hero-bg);
		padding-block: calc(var(--stack) * 6) calc(var(--stack) * 7);

		& > * {
			grid-column: content;
		}
	}

	.resource-hero .breadcrumb {
		display: flex;
		align-items: center;
		gap: calc(var(--gutter) / 2);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-medium);
	}

	.resource-hero .breadcrumb .type {
		color: var(--color-accent);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-micro);
	}

	.resource-hero .breadcrumb .sep {
		color: var(--color-text-faint-invert);
	}

	.resource-hero .breadcrumb .crumb {
		color: var(--color-text-muted-invert);
	}

	.resource-hero h1 {
		max-inline-size: 800px;
		color: var(--color-text-invert);
	}

	.resource-hero .description {
		font-size: var(--font-size-lg);
		line-height: 1.556;
		color: var(--color-text-muted-invert);
		max-inline-size: 600px;
	}

	.resource-hero .meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: calc(var(--gutter) * 2);
		padding-block-start: var(--stack);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-medium);
	}

	.resource-hero .meta dt {
		color: var(--color-text-faint-invert);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-micro);
		font-weight: var(--font-weight-medium);
	}

	.resource-hero .meta dd {
		color: var(--color-text-muted-invert);
	}

	.resource-hero .meta .accent {
		color: var(--color-accent);
	}

	/* intro + stats sidebar ------------------------------------------------ */
	.resource-intro {
		padding-block: calc(var(--stack) * 6) 0;
	}

	.resource-intro__inner {
		display: flex;
		gap: calc(var(--stack) * 6);
	}

	.resource-intro__text {
		flex: 1;
		max-inline-size: 760px;
	}

	.resource-intro__text .lead {
		font-family: var(--font-family-heading);
		font-size: clamp(1.25rem, 1rem + 0.5vw, 1.75rem);
		font-weight: 700;
		letter-spacing: -0.02em;
		line-height: 1.286;
		color: var(--color-text);
	}

	.resource-intro__stats {
		inline-size: 280px;
		flex-shrink: 0;
		padding: calc(var(--gutter) * 2);
		border-inline-start: 2px solid var(--color-border);
	}

	.resource-intro__stat {
		& + & {
			margin-block-start: calc(var(--stack) * 2);
		}
	}

	.resource-intro__stat .value {
		font-family: var(--font-family-heading);
		font-size: var(--font-size-xxxl);
		font-weight: 700;
		letter-spacing: -0.03em;
		line-height: 1;
	}

	.resource-intro__stat .label {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
		line-height: 1.385;
		margin-block-start: calc(var(--stack) / 2);
	}

	/* two-column body: TOC + content --------------------------------------- */
	.resource-body {
		padding-block: calc(var(--stack) * 6);
	}

	.resource-body__inner {
		display: flex;
		gap: calc(var(--gutter) * 2);
	}

	/* sidebar TOC */
	.resource-toc {
		inline-size: 260px;
		flex-shrink: 0;
		position: sticky;
		inset-block-start: calc(var(--stack) * 6);
		align-self: flex-start;
	}

	.resource-toc__list {
		list-style: none;
		padding: 0;
		border-inline-start: 2px solid var(--color-border);
		scroll-target-group: auto;
	}

	.resource-toc__item {
		padding: var(--stack) var(--gutter);
		font-size: var(--font-size-xs);
		font-weight: 400;
		color: var(--color-text-muted);
		transition: color var(--transition-fast);
	}

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

	/* scroll-spy: highlight TOC link whose target section is in view */
	.resource-toc__item:has(a:target-current) {
		font-weight: var(--font-weight-medium);
		color: var(--color-text);
		border-inline-start: 2px solid var(--color-accent);
		margin-inline-start: -2px;
	}

	/* content column */
	.resource-content {
		flex: 1;
		min-inline-size: 0;
	}

	/* checklist items: let the label shrink so long text wraps beside the
	   checkbox instead of pushing the whole label onto a new flex line */
	.resource-content li.box > label {
		flex: 1;
	}

	/* question card pattern ------------------------------------------------ */
	.resource-question {
		padding-block: calc(var(--stack) * 4);
		border-block-end: 1px solid var(--color-border);

		&:first-child {
			padding-block-start: 0;
		}
	}

	.resource-question__header {
		display: flex;
		align-items: flex-start;
		gap: var(--gutter);
	}

	.resource-question__number {
		font-family: var(--font-family-heading);
		font-size: 3rem;
		font-weight: 700;
		letter-spacing: -0.04em;
		line-height: 1;
		flex-shrink: 0;
		inline-size: 64px;
		color: var(--color-border);
	}

	.resource-question:first-child .resource-question__number {
		color: var(--color-accent);
	}

	.resource-question__category {
		font-size: var(--font-size-micro);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-muted);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-micro);
	}

	.resource-question h3 {
		font-size: clamp(1.125rem, 0.875rem + 0.5vw, 1.5rem);
		letter-spacing: -0.02em;
		line-height: 1.25;
	}

	/* answer cards row */
	.resource-answers {
		display: flex;
		gap: calc(var(--stack) * 1.5);
		margin-block-start: calc(var(--stack) * 2);
		padding-inline-start: calc(var(--gutter) * 4);
	}

	.resource-answer {
		flex: 1;
		padding: calc(var(--stack) * 1.5);
		border-radius: var(--border-radius-lg);
		background-color: var(--color-bg-2);
	}

	.resource-answer__label {
		font-size: var(--font-size-micro);
		font-weight: var(--font-weight-medium);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-micro);
		margin-block-end: calc(var(--gutter) / 2);
	}

	.resource-answer__label--why {
		color: var(--color-accent);
	}

	.resource-answer__label--look {
		color: var(--color-text);
	}

	.resource-answer__label--flag {
		color: var(--color-error);
	}

	.resource-answer--dark {
		background-color: var(--color-bg-dark);
		color: var(--color-text-muted-invert);
	}

	.resource-answer p {
		font-size: var(--font-size-sm);
		line-height: 1.571;
	}

	/* related callout ------------------------------------------------------ */
	.resource-callout {
		padding-block: calc(var(--stack) * 4);
		display: flex;
	}

	.resource-callout__inner {
		display: flex;
		inline-size: 100%;
		border-radius: var(--border-radius-lg);
		overflow: hidden;
	}

	.resource-callout__bar {
		inline-size: 4px;
		flex-shrink: 0;
		background-color: var(--color-yellow);
	}

	.resource-callout__body {
		padding: calc(var(--stack) * 2) calc(var(--gutter) * 2);
		background-color: var(--color-bg-2);
		flex: 1;
	}

	.resource-callout__label {
		font-size: var(--font-size-micro);
		font-weight: var(--font-weight-medium);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-micro);
		color: var(--color-yellow);
		margin-block-end: var(--gutter);
	}

	.resource-callout__title {
		font-family: var(--font-family-heading);
		font-size: 1.25rem;
		font-weight: 700;
		letter-spacing: -0.01em;
		line-height: 1.3;
		margin-block-end: var(--stack);
	}

	.resource-callout__desc {
		font-size: var(--font-size-sm);
		line-height: 1.571;
		color: var(--color-text-muted);
		margin-block-end: var(--gutter);
	}

	.resource-callout__link {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-medium);
		color: var(--color-text);
		text-decoration: none;
	}

	/* next-steps / score box ----------------------------------------------- */
	.resource-next-steps {
		margin-block-start: calc(var(--gutter) * 2);
		padding: calc(var(--stack) * 3);
		background-color: var(--color-bg-dark);
		border-radius: var(--border-radius-lg);
	}

	.resource-next-steps__label {
		font-size: var(--font-size-micro);
		font-weight: var(--font-weight-medium);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-micro);
		color: var(--color-accent);
		margin-block-end: calc(var(--gutter) / 2);
	}

	.resource-next-steps h3 {
		color: var(--color-text-invert);
		margin-block-end: calc(var(--stack) * 2);
	}

	.resource-next-steps p {
		color: var(--color-text-muted-invert);
		font-size: 0.9375rem;
		line-height: 1.6;
		max-inline-size: 640px;
	}

	.resource-scores {
		display: flex;
		gap: var(--gutter);
		margin-block-start: calc(var(--stack) * 2);
	}

	.resource-score {
		flex: 1;
		padding: var(--gutter) calc(var(--stack) * 1.5);
		border: 1px solid oklch(from var(--color-text-faint-invert) l c h / 30%);
		border-radius: var(--border-radius-lg);
	}

	.resource-score__value {
		font-family: var(--font-family-heading);
		font-size: 1.25rem;
		font-weight: 700;
		color: var(--color-text-invert);
	}

	.resource-score__desc {
		font-size: var(--font-size-xs);
		color: var(--color-text-faint-invert);
		margin-block-start: calc(var(--stack) / 2);
	}

	/* related resources section -------------------------------------------- */
	.resource-related {
		padding-block: 0 calc(var(--stack) * 6);
	}

	.resource-related__header {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		margin-block-end: calc(var(--gutter) * 2);
	}

	.resource-related__grid {
		display: flex;
		gap: calc(var(--stack) * 1.5);
	}

	.resource-related__card {
		flex: 1;
		padding: calc(var(--stack) * 2);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius-lg);
		text-decoration: none;
		color: inherit;
		transition: border-color var(--transition-fast);
	}

	.resource-related__card:hover {
		border-color: var(--color-border-hover);
	}

	.resource-related__dot {
		inline-size: 8px;
		block-size: 8px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.resource-related__type {
		font-size: var(--font-size-micro);
		font-weight: var(--font-weight-medium);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-micro);
		color: var(--color-text-muted);
	}

	.resource-related__card h4 {
		font-size: 1.125rem;
		letter-spacing: -0.01em;
		line-height: 1.333;
		margin-block: var(--gutter) var(--stack);
	}

	.resource-related__card p {
		font-size: var(--font-size-sm);
		line-height: 1.571;
		color: var(--color-text-muted);
		margin-block-end: var(--gutter);
	}

	.resource-related__card .read-link {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-medium);
		color: var(--color-text);
		text-decoration: none;
	}

	/* mobile responsive ---------------------------------------------------- */
	@media (max-width: 49.999em) {
		.resource-intro__inner {
			flex-direction: column;
			gap: calc(var(--stack) * 3);
		}

		.resource-intro__stats {
			inline-size: 100%;
			border-inline-start: none;
			border-block-start: 2px solid var(--color-border);
			padding: calc(var(--gutter) * 2) 0 0;
			display: flex;
			gap: calc(var(--gutter) * 2);
		}

		.resource-intro__stat + .resource-intro__stat {
			margin-block-start: 0;
		}

		.resource-body__inner {
			flex-direction: column;
			gap: calc(var(--stack) * 3);
		}

		.resource-toc {
			inline-size: 100%;
			position: static;
		}

		.resource-toc__list {
			display: flex;
			flex-wrap: wrap;
			gap: calc(var(--gutter) / 4) 0;
			border-inline-start: none;
			border-block-end: 2px solid var(--color-border);
			padding-block-end: calc(var(--stack) * 1.5);
		}

		.resource-toc__item {
			padding: calc(var(--stack) * 0.5) var(--stack);
		}

		.resource-toc__item:has(a:target-current) {
			border-inline-start: none;
			margin-inline-start: 0;
			border-block-end: 2px solid var(--color-accent);
			margin-block-end: -2px;
		}

		.resource-answers {
			flex-direction: column;
			padding-inline-start: 0;
		}

		.resource-scores {
			flex-direction: column;
		}

		.resource-related__grid {
			flex-direction: column;
		}
	}
}

@layer components {
	.site-foot {
		background-color: var(--color-bg-dark);
		border-block-start: 1px solid oklch(from oklch(1 0 0) l c h / 8%);
	}

	.site-foot__body {
		display: flex;
		justify-content: space-between;
		padding-block-start: calc(var(--stack) * 4);
		padding-block-end: calc(var(--stack) * 3);
	}

	@media (max-width: 49.999em) {
		.site-foot__body {
			flex-direction: column;
			gap: calc(var(--stack) * 3);
		}
	}

	.site-foot__brand {
		display: flex;
		flex-direction: column;
		gap: var(--stack);
	}

	.site-foot__brand > a:first-child {
		display: inline-block;
		inline-size: 28px;
		block-size: 33px;
		color: var(--color-text-invert);
	}

	.site-foot__brand > p {
		font-size: 13px;
		line-height: 16px;
		color: var(--color-text-faint-invert);
	}

	.site-foot__social {
		display: flex;
		gap: var(--gutter);
	}

	.site-foot__social a {
		display: block;
		inline-size: 20px;
		block-size: 20px;
		color: var(--color-text-faint-invert);
		transition: color 0.3s ease;
	}

	.site-foot__social a:hover {
		color: var(--color-text-invert);
	}

	.site-foot__nav {
		display: flex;
		gap: calc(var(--gutter) * 3);
	}

	@media (max-width: 49.999em) {
		.site-foot__nav {
			flex-wrap: wrap;
			gap: calc(var(--gutter) * 2);
		}
	}

	.site-foot__nav > div {
		display: flex;
		flex-direction: column;
		gap: var(--stack);
	}

	.site-foot__nav h2 {
		font-size: var(--font-size-micro);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--letter-spacing-micro);
		line-height: 14px;
		text-transform: uppercase;
		color: var(--color-text-invert);
	}

	.site-foot__nav ul {
		display: flex;
		flex-direction: column;
		gap: var(--stack);
	}

	.site-foot__nav a {
		font-size: 13px;
		line-height: 16px;
		color: var(--color-text-muted-invert);
		text-decoration: none;
	}

	@media (hover) and (prefers-reduced-motion: no-preference) {
		.site-foot__nav ul > li {
			transition: opacity 0.3s ease;
		}

		.site-foot__nav ul:has(li:hover) > li:not(:hover) {
			opacity: 0.25;
		}
	}

	.site-foot__bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-block: calc(var(--stack) * 1.5);
		border-block-start: 1px solid oklch(from oklch(1 0 0) l c h / 8%);
		font-size: 13px;
		line-height: 16px;
		color: var(--color-text-faint-invert);
	}

	.site-foot__legal {
		display: flex;
		gap: calc(var(--gutter) * 2);
	}

	.site-foot__legal a {
		font-size: 13px;
		line-height: 16px;
		color: var(--color-text-faint-invert);
		text-decoration: none;
	}
}

/*
	UTILITIES INDEX
	1. border
	2. color
	3. display
	4. flex
	5. grid
	6. margin
	7. padding
	8. position
	9. text
*/

@layer utilities {
	/* --------------------------------------------------------------------------
	border: adjust border appearance
	-------------------------------------------------------------------------- */
	.radius-md {
		border-radius: var(--border-radius-md);
	}
	.radius-lg {
		border-radius: var(--border-radius-lg);
	}
	.radius-full {
		border-radius: 100%;
	}

	/* --------------------------------------------------------------------------
	color: modify color on the fly
	-------------------------------------------------------------------------- */
	.color {
		/* pick the property you want to affect... */
		&.--text {
			--color-text: var(--property);
		}

		/* ... and map it do a different color */
		&.--use-accent {
			--property: var(--color-accent);
		}
		&.--use-green {
			--property: var(--color-green);
		}
		&.--use-yellow {
			--property: var(--color-yellow);
		}
		&.--use-magenta {
			--property: var(--color-magenta);
		}
		&.--use-invert {
			--property: var(--color-text-invert);
		}
		&.--use-invert-muted {
			--property: var(--color-text-muted-invert);
		}
		&.--use-invert-faint {
			--property: var(--color-text-faint-invert);
		}
	}

	/* --------------------------------------------------------------------------
	display: manipulate the visual display of elements
	-------------------------------------------------------------------------- */
	.block {
		display: block;
	}

	/* --------------------------------------------------------------------------
	flex: simple sub-layouts
	-------------------------------------------------------------------------- */
	.flex {
		display: flex;
		flex-wrap: wrap;
	}

	.gap-xs {
		gap: calc(var(--gutter) / 2);
	}
	.gap-sm {
		gap: calc(var(--gutter) * 0.75);
	}
	.gap-md {
		gap: var(--gutter);
	}
	.gap-lg {
		gap: calc(var(--gutter) * 2);
	}
	.gap-xl {
		gap: calc(var(--gutter) * 3);
	}

	.align-items-center {
		align-items: center;
	}

	.justify-center {
		justify-content: center;
	}
	.justify-between {
		justify-content: space-between;
	}

	.column {
		flex-direction: column;
	}
	.no-wrap {
		flex-wrap: nowrap;
	}

	@media (max-width: 49.999em) {
		.column\@sm {
			flex-direction: column;
		}
	}

	/* --------------------------------------------------------------------------
	margin: adjust spacing between elements
	-------------------------------------------------------------------------- */
	.mt-0 {
		margin-block-start: 0;
	}
	.mt-xs {
		margin-block-start: calc(var(--stack) / 2);
	}
	.mt-sm {
		margin-block-start: calc(var(--stack) * 0.75);
	}
	.mt-md {
		margin-block-start: var(--stack);
	}
	.mt-lg {
		margin-block-start: calc(var(--stack) * 2);
	}
	.mt-xl {
		margin-block-start: calc(var(--stack) * 3);
	}
	.mb-0 {
		margin-block-end: 0;
	}
	.mb-xs {
		margin-block-end: calc(var(--stack) / 2);
	}
	.mb-sm {
		margin-block-end: calc(var(--stack) * 0.75);
	}
	.mb-md {
		margin-block-end: var(--stack);
	}
	.mb-lg {
		margin-block-end: calc(var(--stack) * 2);
	}

	/* --------------------------------------------------------------------------
	padding: adjust space inside elements
	-------------------------------------------------------------------------- */
	.py-lg {
		padding-block: calc(var(--stack) * 2);
	}
	.py-xl {
		padding-block: calc(var(--stack) * 3);
	}
	.py-xxl {
		padding-block: calc(var(--stack) * 4);
	}

	.p-xs {
		padding: calc(var(--gutter) / 2);
	}
	.p-sm {
		padding: calc(var(--gutter) * 0.75);
	}
	.p-md {
		padding: var(--gutter);
	}
	.p-lg {
		padding: calc(var(--gutter) * 2);
	}

	.pt-md {
		padding-block-start: var(--stack);
	}
	.pb-lg {
		padding-block-end: calc(var(--stack) * 2);
	}

	/* --------------------------------------------------------------------------
	grid: override grid-column placement
	-------------------------------------------------------------------------- */
	.bleed {
		grid-column: bleed;
	}
	.prose {
		max-inline-size: 85ch;
	}

	/* --------------------------------------------------------------------------
	position: manipulate position across breakpoints
	-------------------------------------------------------------------------- */
	.h-screen {
		block-size: 100dvh;
	}
	.w-full {
		inline-size: 100%;
	}

	/* --------------------------------------------------------------------------
	text: decouple semantics from presentation
	-------------------------------------------------------------------------- */
	.font-size-xs {
		font-size: var(--font-size-xs);
	}
	.font-size-sm {
		font-size: var(--font-size-sm);
	}
	.font-size-md {
		font-size: var(--font-size-md);
	}
	.font-size-lg {
		font-size: var(--font-size-lg);
	}
	.font-size-xl {
		font-size: var(--font-size-xl);
	}
	.font-size-xxl {
		font-size: var(--font-size-xxl);
	}
	.font-size-xxxl {
		font-size: var(--font-size-xxxl);
	}
	.font-size-poster {
		font-size: var(--font-size-poster);
	}

	.font-weight-medium {
		font-weight: var(--font-weight-medium);
	}
	.font-weight-bold {
		font-weight: var(--font-weight-bold);
	}

	.text-center {
		text-align: center;
	}

	.eyebrow {
		font-size: var(--font-size-micro);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--letter-spacing-micro);
		line-height: 1.33;
		text-transform: uppercase;
		/* muted gray meets WCAG AA on light bg (brand blue was 2.84:1, failing).
		   Eyebrows on dark sections override to --color-text-muted-invert. */
		color: var(--color-text-muted);
	}

	.eyebrow + :is(h1, h2, h3, h4, h5, h6) {
		--flow-space: calc(var(--stack) / 2);
	}

	/* Eyebrows on dark sections use the inverted muted token so small
	   uppercase text still meets AA contrast. */
	.eyebrow--invert {
		color: var(--color-text-muted-invert);
	}

	.line-length-md {
		max-inline-size: var(--line-length-md);
	}
	.line-length-lg {
		max-inline-size: var(--line-length-lg);
	}

	.line-height-xs {
		line-height: var(--line-height-xs);
	}
	.line-height-md {
		line-height: var(--line-height-md);
	}

	.letter-spacing-sm {
		letter-spacing: var(--letter-spacing-sm);
	}
	.letter-spacing-md {
		letter-spacing: var(--letter-spacing-md);
	}
	.letter-spacing-lg {
		letter-spacing: var(--letter-spacing-lg);
	}

	.balance {
		text-wrap: balance;
	}
	@media (hover) and (prefers-reduced-motion: no-preference) {
		.sibling-dim {
			transition: opacity 0.3s ease;
		}

		main:has(.sibling-dim:hover) .sibling-dim:not(:hover) {
			opacity: 0.25;
		}
	}

	.hex-grid-bg {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='12,9 14.6,10.5 14.6,13.5 12,15 9.4,13.5 9.4,10.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E");
	}

	.unlisted {
		list-style-type: none;
	}
	.uppercase {
		text-transform: uppercase;
	}
}

@layer components {
	.hero-carousel-section {
		position: relative;
		overflow: clip;
		background-color: var(--color-bg-dark);
	}

	.hero-carousel,
	.hero-carousel__scrim {
		position: absolute;
		inset: 0;
		grid-column: bleed;
	}

	/* on desktop, confine the imagery to the right portion so the text has its own clean space on the left */
	@media (min-width: 50em) {
		.hero-carousel {
			-webkit-mask-image: linear-gradient(
				to right,
				transparent 25%,
				oklch(0 0 0) 60%
			);
			mask-image: linear-gradient(to right, transparent 25%, oklch(0 0 0) 60%);
		}
	}

	.hero-slide {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity 1s ease-in-out;
		background: var(--slide-bg, var(--color-bg-dark));
	}

	.hero-slide.is-active {
		opacity: 1;
	}

	.hero-carousel__scrim {
		background: linear-gradient(
			to right,
			rgba(20, 18, 15, 0.78) 0%,
			rgba(20, 18, 15, 0.55) 55%,
			rgba(20, 18, 15, 0.35) 100%
		);
		pointer-events: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.hero-slide {
			transition: none;
		}
	}
}

@layer components {
	@scope (.home) {
		/* Section 2: Trust Strip */
		.home-trust {
			padding-block: calc(var(--stack) * 2);
			border-block: 1px solid var(--color-border);
		}

		.home-trust__inner {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) * 1.5);
			align-items: center;
		}

		.home-trust__label {
			font-size: var(--font-size-micro);
			font-weight: var(--font-weight-medium);
			letter-spacing: var(--letter-spacing-micro);
			text-transform: uppercase;
			color: var(--color-text-faint);
		}

		.home-trust__logos {
			display: flex;
			flex-wrap: wrap;
			gap: calc(var(--gutter) * 1.25);
			justify-content: center;
			align-items: center;
		}

		/* Section header (h2 + optional aside on right) */
		.home-section-header {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			gap: calc(var(--gutter) * 2);
			flex-wrap: wrap;
		}

		.home-section-header h2 {
			max-inline-size: 600px;
		}

		.home-section-header__aside {
			max-inline-size: 400px;
			color: var(--color-text-muted);
		}

		/* Section 3: Reality & pain points (editorial, no boxes) */
		.home-reality {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: calc(var(--gutter) * 1.5) calc(var(--gutter) * 3);
		}

		/* Header uses the same tracks as the items grid so the aside sits over the right column */
		.home-reality__header {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: calc(var(--gutter) * 1.5) calc(var(--gutter) * 3);
			align-items: start;
		}

		.home-reality__header h2 {
			max-inline-size: none;
		}

		.home-reality__header .home-section-header__aside {
			max-inline-size: none;
		}

		.home-reality__item h3 {
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-bold);
			letter-spacing: -0.02em;
			margin-block-end: calc(var(--stack) * 0.5);
		}

		.home-reality__item p {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
			max-inline-size: 45ch;
		}

		@media (max-width: 49.999em) {
			.home-reality,
			.home-reality__header {
				grid-template-columns: 1fr;
			}
		}

		/* Flush sections (no block padding so a following section runs into them) */
		.home-flush-end {
			padding-block-end: 0;
		}

		.home-flush {
			padding-block: 0;
		}

		/* WINDS row top spacing */
		.home-winds-row {
			padding-block-start: calc(var(--stack) * 3);
		}

		/* Section 8: Process step */
		.home-process {
			background-color: var(--color-bg-dark);
		}

		.home-process h2,
		.home-process h3 {
			color: var(--color-text-invert);
		}

		.home-process p {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted-invert);
		}

		.home-process__grid {
			gap: calc(var(--gutter) * 2);
		}

		.home-process__grid h3 {
			display: flex;
			align-items: baseline;
			gap: calc(var(--gutter) / 2);
		}

		.home-process__grid h3::before {
			content: counter(steps, decimal-leading-zero);
			color: var(--primary);
			font-variant-numeric: tabular-nums;
			font-weight: var(--font-weight-medium);
		}

		/* Section 10: Outcomes grid */
		.home-outcomes {
			padding-block-start: calc(var(--stack) * 3);
			--grid-min-size: clamp(16rem, 40vw, 28rem);
			gap: var(--gutter);
		}
	}
}