@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	html,
	body {
		margin: 0;
		padding: 0;
	}
	img,
	svg {
		display: block;
		max-inline-size: 100%;
	}
	button,
	input,
	select,
	textarea {
		font: inherit;
		color: inherit;
	}
	a {
		text-decoration: none;
	}
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

@layer base {
	html {
		color-scheme: light;
		-webkit-font-smoothing: antialiased;
	}
	body {
		/* Establishes the container-query context the fluid type tokens (tokens.css)
		   read their `cqi` term from — effectively a container-relative stand-in for vw
		   that also works if this content is ever embedded in a narrower ancestor. */
		container-type: inline-size;
		background: var(--paper);
		color: var(--ink);
		font-family: var(--sans);
		font-size: 1rem;
		line-height: 1.6;
	}
	a {
		color: var(--signal);
		transition: color 150ms ease-out;

		&:hover {
			color: var(--signal-d);
		}
	}
	:focus-visible {
		outline: 2px solid var(--signal);
		outline-offset: 2px;
	}
	.screen-reader-text {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.skip-link.screen-reader-text:focus {
		position: fixed;
		inset-block-start: 8px;
		inset-inline-start: 8px;
		inline-size: auto;
		block-size: auto;
		clip-path: none;
		z-index: 999;
		background: var(--void);
		color: var(--on-dark);
		padding: 10px 16px;
		font-weight: 700;
	}

	/* Layout primitives */
	.container {
		container-type: inline-size;
		inline-size: 100%;
		max-inline-size: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-pad);

		@media (width <= 767px) {
			padding-inline: var(--container-pad-mobile);
		}
	}
	.section {
		padding-block: 88px 96px;
	}
	.section--compact {
		padding-block: 56px;
	}

	/* Typography.
	   The handoff specifies text-wrap:pretty on headings *and* lead paragraphs as a
	   deliberate, final-intent choice (not the modern-css default of `balance` for
	   headings) — kept as spec'd rather than substituted. */
	h1,
	h2,
	h3 {
		font-family: var(--disp);
		margin: 0;
		text-wrap: pretty;
	}
	.h1 {
		font-weight: 800;
		font-size: var(--text-h1);
		line-height: 1;
		letter-spacing: -0.03em;
	}
	.h2 {
		font-weight: 800;
		font-size: var(--text-h2);
		line-height: 1.02;
		letter-spacing: -0.03em;

		&.h2--sm {
			font-size: 40px;
			line-height: 1.04;
		}
	}
	.h3 {
		font-weight: 700;
		font-size: var(--text-h3);
		line-height: 1.2;
		letter-spacing: -0.02em;
	}
	.lead {
		font-size: var(--text-lead);
		line-height: 1.6;
		color: var(--ink-2);
		max-inline-size: 52ch;
		text-wrap: pretty;
	}
	.eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 14px;
		font-weight: 700;
		font-size: 11.5px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--signal);

		&::before {
			content: "";
			inline-size: 26px;
			block-size: 3px;
			background: var(--signal);
			flex: none;
		}
		&.eyebrow--on-dark {
			font-weight: 600;
			font-size: 12px;
			color: oklch(100% 0 0 / 65%);

			&::before {
				inline-size: 34px;
			}
		}
	}
	.text-signal-l {
		color: var(--signal-l);
	}
	.text-amber {
		color: var(--amber);
		font-weight: 600;
	}
	.stat-accent {
		color: var(--signal-l);
	}
	.link-on-dark {
		color: var(--on-dark);
		font-weight: 600;
		font-size: 15px;
		border-block-end: 2px solid oklch(100% 0 0 / 40%);
		padding-block-end: 3px;

		&:hover {
			color: var(--on-dark);
			border-block-end-color: var(--on-dark);
		}
	}

	.section-head {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 24px;
		flex-wrap: wrap;
		margin-block-end: 40px;
	}
	.section-head__link {
		font-weight: 700;
		font-size: 15px;
		color: var(--ink);
		border-block-end: 2px solid var(--signal);
		padding-block-end: 4px;

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

	.badge {
		display: inline-block;
		font-weight: 700;
		font-size: 9.5px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		background: var(--signal);
		color: var(--on-dark);
		padding: 3px 6px;
	}

	/* Buttons */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		block-size: 46px;
		padding-inline: 22px;
		border: none;
		font-family: var(--sans);
		font-weight: 700;
		font-size: 14.5px;
		cursor: pointer;
		transition:
			background 150ms ease-out,
			color 150ms ease-out,
			border-color 150ms ease-out;
		white-space: nowrap;

		&.btn--hero {
			block-size: 56px;
			padding-inline: 28px;
			font-size: 16.5px;
		}
		&.btn--solid {
			background: var(--signal);
			color: var(--on-dark);

			&:hover {
				background: var(--signal-d);
				color: var(--on-dark);
			}
		}
		&.btn--outline {
			border: 1px solid var(--ink);
			color: var(--ink);
			background: transparent;

			&:hover {
				background: var(--void);
				color: var(--on-dark);
			}
		}
		&.btn--outline-on-dark {
			border: 1.5px solid oklch(100% 0 0 / 40%);
			color: var(--on-dark);
			background: transparent;

			&:hover {
				background: var(--on-dark);
				color: var(--void);
			}
		}
		&.btn--full {
			inline-size: 100%;
		}
		&.btn--void {
			background: var(--void);
			color: var(--on-dark);
			block-size: 52px;
			padding-inline: 24px;
			font-size: 15.5px;

			&:hover {
				background: var(--signal);
				color: var(--on-dark);
			}
		}
	}

	/* Cards */
	.card {
		background: var(--card);
		border: 1px solid var(--line);
		color: var(--ink);
		transition: border-color 150ms ease-out;

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

	/* Forms */
	.field {
		display: grid;
		gap: 7px;

		label {
			font-weight: 700;
			font-size: 11px;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--ink-2);
		}
		input,
		select,
		textarea {
			block-size: 48px;
			padding-inline: 14px;
			border: 1px solid var(--line);
			background: var(--card);
			font-family: var(--sans);
			font-size: 1rem;
			color: var(--ink);
			inline-size: 100%;
		}
		textarea {
			block-size: auto;
			padding-block: 12px;
		}
		&.field--error {
			input,
			select,
			textarea {
				border-color: var(--signal);
			}
		}
		&.field--on-dark {
			label {
				color: oklch(100% 0 0 / 60%);
			}
			input {
				border-color: oklch(100% 0 0 / 20%);
			}
		}
	}
	.field__error {
		font-size: 13px;
		color: var(--signal);
	}
}