/*
	One stylesheet for the whole site. Layers keep the cascade predictable, so a component rule
	never needs !important to beat a base rule.
*/
@layer reset, tokens, base, layout, components, utilities;

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

	:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, fieldset) {
		margin: 0;
	}

	:where(ul, ol) {
		padding-inline-start: 0;
		list-style: none;
	}

	:where(fieldset) {
		padding: 0;
		border: 0;
		min-inline-size: 0;
	}

	:where(html) {
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}

	:where(img, picture, svg) {
		max-inline-size: 100%;
		block-size: auto;
	}

	:where(input, button, textarea, select) {
		font: inherit;
		color: inherit;
	}

	:where(table) {
		border-collapse: collapse;
	}
}

/* ----------------------------------------------------------------- tokens */
@layer tokens {
	:root {
		color-scheme: light dark;

		/* Brand ramp, derived from one hue so light and dark stay in step. */
		--BrandGreen: oklch(58% 0.11 162);
		--BrandGreenStrong: oklch(from var(--BrandGreen) calc(l - 0.08) c h);
		--BrandGreenSoft: oklch(from var(--BrandGreen) calc(l + 0.32) calc(c * 0.35) h);
		--BrandGreenWash: oklch(from var(--BrandGreen) calc(l + 0.38) calc(c * 0.18) h);

		--Ink: light-dark(oklch(28% 0.02 250), oklch(94% 0.01 250));
		--InkMuted: light-dark(oklch(48% 0.02 250), oklch(74% 0.015 250));
		--Surface: light-dark(oklch(99% 0.003 250), oklch(22% 0.015 250));
		--SurfaceRaised: light-dark(oklch(100% 0 0), oklch(26% 0.015 250));
		--SurfaceSunken: light-dark(oklch(97% 0.006 250), oklch(19% 0.015 250));
		--Line: light-dark(oklch(89% 0.008 250), oklch(34% 0.015 250));
		--LineStrong: light-dark(oklch(78% 0.012 250), oklch(45% 0.02 250));

		--Danger: light-dark(oklch(52% 0.17 25), oklch(70% 0.15 25));
		--DangerWash: light-dark(oklch(96% 0.03 25), oklch(30% 0.06 25));
		--Positive: var(--BrandGreen);
		--Info: light-dark(oklch(50% 0.11 250), oklch(78% 0.09 250));
		--InfoWash: light-dark(oklch(96% 0.03 250), oklch(30% 0.05 250));

		--FocusRing: oklch(from var(--BrandGreen) l c h / 0.45);

		/* Fluid type: comfortable on a phone, never oversized on a monitor. */
		--TextSmall: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
		--TextBase: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
		--TextLead: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
		--TextTitle: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
		--TextHero: clamp(2rem, 1.5rem + 2.6vw, 3.2rem);

		--Space2Xs: 0.25rem;
		--SpaceXs: 0.5rem;
		--SpaceSm: 0.75rem;
		--SpaceMd: 1rem;
		--SpaceLg: 1.5rem;
		--SpaceXl: 2rem;
		--Space2Xl: 3rem;

		--RadiusSm: 0.5rem;
		--RadiusMd: 0.85rem;
		--RadiusLg: 1.25rem;
		--RadiusPill: 999rem;

		/* Arrow used by .button-forward. A mask, so the stroke colour here is irrelevant. */
		--IconArrowRight: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15M13 6l6 6-6 6"/></svg>');

		--ShadowSm: 0 1px 2px light-dark(oklch(0% 0 0 / 0.06), oklch(0% 0 0 / 0.4));
		--ShadowMd: 0 12px 28px light-dark(oklch(0% 0 0 / 0.08), oklch(0% 0 0 / 0.45));

		--MeasureWide: 68rem;
		--MeasureNarrow: 42rem;

		--FontSans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		--FontMono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
	}
}

/* ------------------------------------------------------------------- base */
@layer base {
	html {
		scrollbar-gutter: stable;
	}

	body {
		margin: 0;
		font-family: var(--FontSans);
		font-size: var(--TextBase);
		line-height: 1.55;
		color: var(--Ink);
		background: var(--Surface);
		min-block-size: 100dvb;
		display: flex;
		flex-direction: column;
	}

	main {
		flex: 1;
	}

	h1, h2, h3, h4 {
		line-height: 1.15;
		text-wrap: balance;
		font-weight: 700;
	}

	h1 {
		font-size: var(--TextTitle);
	}

	h2 {
		font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
	}

	p {
		text-wrap: pretty;
	}

	a {
		color: var(--BrandGreenStrong);
		text-underline-offset: 0.15em;
	}

	a:hover {
		color: var(--Ink);
	}

	:focus-visible {
		outline: 3px solid var(--FocusRing);
		outline-offset: 2px;
		border-radius: var(--RadiusSm);
	}

	:target {
		scroll-margin-block-start: var(--SpaceXl);
	}

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

/* ----------------------------------------------------------------- layout */
@layer layout {
	.site-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--SpaceXs) var(--SpaceMd);
		padding: var(--SpaceXs) var(--SpaceMd);
		background: var(--SurfaceRaised);
		border-block-end: 1px solid var(--Line);
	}

	.site-header .brand {
		display: inline-flex;
		align-items: center;
		gap: var(--SpaceXs);
		min-block-size: 2.75rem;
		font-weight: 700;
		font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.2rem);
		color: var(--Ink);
		text-decoration: none;
	}

	/* The full name is a mouthful on a phone; the short form keeps the header to one row. */
	.brand-short {
		display: inline;
	}

	.brand-full {
		display: none;
	}

	@media (min-width: 30rem) {
		.site-header {
			padding: var(--SpaceSm) var(--SpaceLg);
		}

		.brand-short {
			display: none;
		}

		.brand-full {
			display: inline;
		}
	}

	.site-header nav {
		display: flex;
		align-items: center;
		gap: var(--SpaceMd);
		flex-wrap: wrap;
	}

	/*
		On the narrowest phones the header keeps to one row: the brand only. The same links are in
		the footer, so nothing becomes unreachable.
	*/
	@media (max-width: 26rem) {
		.site-header nav a:not(.button) {
			display: none;
		}
	}

	.site-header nav a:not(.button) {
		color: var(--InkMuted);
		text-decoration: none;
		font-size: var(--TextSmall);
	}

	.site-header nav a:not(.button):hover {
		color: var(--Ink);
	}

	.site-footer {
		margin-block-start: var(--Space2Xl);
		padding: var(--SpaceXl) var(--SpaceLg);
		background: var(--SurfaceSunken);
		border-block-start: 1px solid var(--Line);
		font-size: var(--TextSmall);
		color: var(--InkMuted);
	}

	.site-footer-inner {
		max-inline-size: var(--MeasureWide);
		margin-inline: auto;
		display: flex;
		flex-wrap: wrap;
		gap: var(--SpaceMd) var(--SpaceLg);
		justify-content: space-between;
	}

	.site-footer nav {
		display: flex;
		flex-wrap: wrap;
		gap: var(--SpaceMd);
	}

	.wizard {
		max-inline-size: var(--MeasureNarrow);
		margin-inline: auto;
		padding: var(--SpaceXl) var(--SpaceMd) var(--Space2Xl);
		display: grid;
		gap: var(--SpaceLg);
	}

	/*
		Grid children default to min-width:auto, so one long email address or an embedded payment
		iframe can widen the whole column and push the page sideways on a phone. Every direct child
		is allowed to shrink instead.
	*/
	.wizard > *,
	.confirmation > * {
		min-inline-size: 0;
	}

	.section {
		padding: var(--Space2Xl) var(--SpaceMd);
	}

	.section-inner {
		max-inline-size: var(--MeasureWide);
		margin-inline: auto;
		display: grid;
		gap: var(--SpaceLg);
	}

	.section.alt {
		background: var(--SurfaceSunken);
		border-block: 1px solid var(--Line);
	}

	.card-grid {
		display: grid;
		gap: var(--SpaceLg);
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	}

	.confirmation {
		max-inline-size: var(--MeasureNarrow);
		margin-inline: auto;
		padding: var(--SpaceXl) var(--SpaceMd) var(--Space2Xl);
		display: grid;
		gap: var(--SpaceMd);
	}
}

/* ------------------------------------------------------------- components */
@layer components {
	/* Buttons ------------------------------------------------------------ */
	.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--SpaceXs);
		min-block-size: 2.75rem;
		padding: var(--SpaceXs) var(--SpaceLg);
		border: 1px solid var(--LineStrong);
		border-radius: var(--RadiusPill);
		background: var(--SurfaceRaised);
		color: var(--Ink);
		font-weight: 650;
		text-decoration: none;
		cursor: pointer;
		transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	}

	.button:hover {
		background: var(--SurfaceSunken);
		color: var(--Ink);
	}

	.button:active {
		scale: 0.985;
	}

	.button[disabled],
	.button:disabled {
		opacity: 0.55;
		cursor: not-allowed;
	}

	.button-primary {
		background: var(--BrandGreen);
		border-color: var(--BrandGreen);
		color: oklch(99% 0 0);
	}

	.button-primary:hover {
		background: var(--BrandGreenStrong);
		border-color: var(--BrandGreenStrong);
		color: oklch(99% 0 0);
	}

	/*
		Forward affordance for the action that advances a step. Drawn as a mask rather than an
		<img> or inline SVG so it inherits currentColor, stays sharp at any zoom, and costs no
		extra markup on every button.
	*/
	.button-forward::after {
		content: "";
		flex: none;
		inline-size: 1.05em;
		block-size: 1.05em;
		background: currentColor;
		mask: var(--IconArrowRight) center / contain no-repeat;
		transition: translate 0.15s ease;
	}

	.button-forward:hover::after {
		translate: 0.15em 0;
	}

	@media (prefers-reduced-motion: reduce) {
		.button-forward::after {
			transition: none;
		}

		.button-forward:hover::after {
			translate: none;
		}
	}

	/* Panels ------------------------------------------------------------- */
	.panel {
		background: var(--SurfaceRaised);
		border: 1px solid var(--Line);
		border-radius: var(--RadiusLg);
		padding: var(--SpaceLg);
		box-shadow: var(--ShadowSm);
		display: grid;
		gap: var(--SpaceMd);
		/* Named container so contents can respond to the panel's width, not the viewport's. */
		container: panel / inline-size;
	}

	.panel > * {
		min-inline-size: 0;
	}

	.panel-title {
		margin: 0;
		font-size: 1.05rem;
		font-weight: 700;
	}

	.panel-note {
		margin: 0;
		color: var(--InkMuted);
		font-size: var(--TextSmall);
	}

	.panel-edit {
		justify-self: start;
		font-size: var(--TextSmall);
	}

	.notice-panel {
		background: var(--InfoWash);
		border-color: color-mix(in oklch, var(--Info) 30%, transparent);
	}

	/* Wizard chrome ------------------------------------------------------ */
	.wizard-progress {
		display: grid;
		gap: var(--Space2Xs);
	}

	.wizard-progress-label {
		margin: 0;
		font-size: var(--TextSmall);
		color: var(--InkMuted);
		font-variant-numeric: tabular-nums;
	}

	.wizard-progress-track {
		block-size: 0.4rem;
		border-radius: var(--RadiusPill);
		background: var(--SurfaceSunken);
		border: 1px solid var(--Line);
		overflow: hidden;
	}

	.wizard-progress-fill {
		block-size: 100%;
		background: var(--BrandGreen);
		transition: inline-size 0.3s ease;
	}

	.wizard-header {
		display: grid;
		gap: var(--Space2Xs);
	}

	.wizard-subtitle {
		margin: 0;
		color: var(--InkMuted);
	}

	.wizard-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--SpaceSm);
		justify-content: space-between;
		align-items: center;
		/*
			Stand the actions clear of the panel above. Without this they crowd the card border and
			read as part of it rather than as the decision that follows it.
		*/
		margin-block-start: var(--SpaceXl);
	}

	.wizard-actions > :only-child {
		margin-inline-start: auto;
	}

	/*
		On a phone the action that moves the appeal forward takes the rest of the row, so it is an
		easy thumb target and obviously the main choice.
	*/
	@media (max-width: 30rem) {
		.wizard-actions .button-primary {
			flex: 1 1 auto;
		}
	}

	/*
		Field groups: the legend sits above the panel rather than inside its border, so the question
		reads as a heading for the card instead of a label stuck to its edge.
	*/
	.field-group {
		display: block;
		border: 0;
		padding: 0;
		margin: 0;
		min-inline-size: 0;
	}

	.group-title {
		display: block;
		padding: 0;
		margin-block-end: var(--SpaceXs);
		font-size: 1.05rem;
		font-weight: 700;
		text-wrap: balance;
	}

	.group-hint {
		display: block;
		margin-block: calc(var(--SpaceXs) * -1) var(--SpaceXs);
		color: var(--InkMuted);
		font-size: var(--TextSmall);
	}

	/* Choice lists (checkbox and radio cards) ---------------------------- */
	.choice-list {
		display: grid;
		gap: var(--SpaceXs);
	}

	.choice {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: start;
		gap: var(--SpaceSm);
		padding: var(--SpaceSm) var(--SpaceMd);
		border: 1px solid var(--Line);
		border-radius: var(--RadiusMd);
		background: var(--Surface);
		cursor: pointer;
		transition: border-color 0.15s ease, background 0.15s ease;
	}

	.choice:hover {
		border-color: var(--LineStrong);
	}

	.choice:has(.choice-input:checked) {
		border-color: var(--BrandGreen);
		background: color-mix(in oklch, var(--BrandGreen) 8%, var(--Surface));
	}

	.choice:has(.choice-input:focus-visible) {
		outline: 3px solid var(--FocusRing);
		outline-offset: 2px;
	}

	.choice-input {
		inline-size: 1.35rem;
		block-size: 1.35rem;
		margin-block-start: 0.15rem;
		accent-color: var(--BrandGreen);
	}

	.choice-text {
		display: grid;
		gap: 0.1rem;
		font-weight: 600;
	}

	.choice-hint {
		font-weight: 400;
		font-size: var(--TextSmall);
		color: var(--InkMuted);
	}

	/*
		Conditional blocks reveal themselves when the radio just above them is chosen. No JavaScript:
		:has() reads the checked state and interpolate-size animates the height from zero.
	*/
	.conditional-panel {
		display: grid;
		gap: var(--SpaceMd);
		padding-inline: var(--SpaceMd);
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		/* visibility keeps the hidden inputs out of the tab order, not just out of sight. */
		visibility: hidden;
		transition: block-size 0.2s ease, opacity 0.2s ease, padding 0.2s ease, visibility 0.2s allow-discrete;
		interpolate-size: allow-keywords;
	}

	.choice:has(.choice-input[value="on_or_after"]:checked) + .conditional-panel,
	.choice:has(.choice-input[value="yes"]:checked) + .conditional-panel,
	.choice:has(.choice-input[value="different"]:checked) + .conditional-panel {
		block-size: auto;
		opacity: 1;
		visibility: visible;
		padding-block: var(--SpaceMd);
	}

	/* Fields ------------------------------------------------------------- */
	.field {
		display: grid;
		gap: var(--Space2Xs);
	}

	.field label {
		font-weight: 600;
		font-size: var(--TextSmall);
	}

	.field input,
	.field textarea,
	.field select {
		inline-size: 100%;
		min-block-size: 2.75rem;
		padding: var(--SpaceXs) var(--SpaceSm);
		border: 1px solid var(--LineStrong);
		border-radius: var(--RadiusMd);
		background: var(--Surface);
		color: var(--Ink);
	}

	.field textarea {
		field-sizing: content;
		min-block-size: 4.5rem;
		resize: vertical;
	}

	.field input:user-invalid,
	.field textarea:user-invalid {
		border-color: var(--Danger);
	}

	/*
		Short paired fields such as state and ZIP stay side by side even on a 375px screen; anything
		that genuinely needs the width wraps on its own.
	*/
	.field-row {
		display: grid;
		gap: var(--SpaceSm);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
	}

	.field-narrow {
		max-inline-size: 12rem;
	}

	.field-hint {
		font-size: var(--TextSmall);
		color: var(--InkMuted);
	}

	/* Explains an unfamiliar value inside a definition list, on its own line beneath it. */
	.detail-hint {
		display: block;
		margin-block-start: 0.15rem;
		font-size: var(--TextSmall);
		font-weight: 400;
		line-height: 1.4;
		color: var(--InkMuted);
		text-wrap: pretty;
	}

	.field-error {
		font-size: var(--TextSmall);
		color: var(--Danger);
		font-weight: 600;
	}

	.field-error:empty {
		display: none;
	}

	.field-with-button {
		display: flex;
		gap: var(--SpaceXs);
		flex-wrap: wrap;
	}

	.field-with-button input {
		flex: 1 1 12rem;
	}

	/* Alerts ------------------------------------------------------------- */
	.alert {
		padding: var(--SpaceSm) var(--SpaceMd);
		border-radius: var(--RadiusMd);
		border: 1px solid var(--Line);
		display: grid;
		gap: var(--Space2Xs);
	}

	.alert-error {
		background: var(--DangerWash);
		border-color: color-mix(in oklch, var(--Danger) 40%, transparent);
		color: light-dark(oklch(35% 0.12 25), oklch(90% 0.06 25));
	}

	.alert-info {
		background: var(--InfoWash);
		border-color: color-mix(in oklch, var(--Info) 35%, transparent);
	}

	.alert-title {
		margin: 0;
		font-weight: 700;
	}

	.alert-list ul {
		margin: 0;
		padding-inline-start: var(--SpaceMd);
		list-style: disc;
	}

	.notice {
		padding: var(--SpaceXs) var(--SpaceMd);
		border-radius: var(--RadiusMd);
		background: var(--InfoWash);
		border: 1px solid color-mix(in oklch, var(--Info) 30%, transparent);
		font-size: var(--TextSmall);
	}

	/* Detail lists ------------------------------------------------------- */
	.detail-list {
		display: grid;
		gap: var(--SpaceXs);
		margin: 0;
	}

	/*
		Label above value on a phone, side by side once the panel is wide enough. A container query
		rather than a viewport query, so the same list behaves correctly inside a narrow panel.
	*/
	.detail-list > div {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--Space2Xs);
		padding-block: var(--SpaceXs);
		border-block-end: 1px solid var(--Line);
	}

	@container panel (min-width: 26rem) {
		.detail-list > div {
			grid-template-columns: minmax(9rem, 12rem) 1fr;
			gap: var(--SpaceSm);
			padding-block: var(--Space2Xs);
		}
	}

	.detail-list > div:last-child {
		border-block-end: 0;
	}

	.detail-list dt {
		color: var(--InkMuted);
		font-size: var(--TextSmall);
	}

	.detail-list dd {
		margin: 0;
		font-weight: 600;
		/* Long addresses and email addresses must break rather than widen the page. */
		overflow-wrap: anywhere;
	}

	.pin-value {
		font-family: var(--FontMono);
		letter-spacing: 0.02em;
	}

	.address-block {
		display: grid;
		gap: 0.1rem;
		font-style: normal;
	}

	.address-street {
		font-weight: 700;
		font-size: var(--TextLead);
	}

	.address-locality {
		color: var(--InkMuted);
	}

	/* Price -------------------------------------------------------------- */
	.price-lines {
		display: grid;
		gap: var(--SpaceXs);
		margin: 0;
	}

	.price-lines > div {
		display: flex;
		justify-content: space-between;
		gap: var(--SpaceMd);
	}

	.price-lines dd {
		margin: 0;
		font-variant-numeric: tabular-nums;
	}

	.price-discount {
		color: var(--BrandGreenStrong);
	}

	.price-total {
		border-block-start: 1px solid var(--Line);
		padding-block-start: var(--SpaceXs);
		font-weight: 700;
		font-size: var(--TextLead);
	}

	.pay-panel {
		border-color: color-mix(in oklch, var(--BrandGreen) 35%, transparent);
	}

	/* Order confirmation ------------------------------------------------- */
	.order-number-card {
		display: grid;
		gap: var(--Space2Xs);
		justify-items: center;
		text-align: center;
		padding: var(--SpaceLg);
		border-radius: var(--RadiusLg);
		background: var(--BrandGreenWash);
		border: 1px solid color-mix(in oklch, var(--BrandGreen) 30%, transparent);
	}

	.order-number {
		margin: 0;
		font-family: var(--FontMono);
		font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
		font-weight: 700;
		letter-spacing: 0.12em;
	}

	.order-number-label,
	.order-number-note {
		margin: 0;
		font-size: var(--TextSmall);
		color: var(--InkMuted);
	}

	.next-steps {
		display: grid;
		gap: var(--SpaceXs);
		padding-inline-start: var(--SpaceLg);
		list-style: decimal;
	}

	/* Hero and marketing ------------------------------------------------- */
	.hero {
		padding: var(--Space2Xl) var(--SpaceMd);
		background: linear-gradient(160deg,
			color-mix(in oklch, var(--BrandGreen) 12%, var(--Surface)),
			var(--Surface) 70%);
		border-block-end: 1px solid var(--Line);
	}

	.hero-inner {
		max-inline-size: var(--MeasureWide);
		margin-inline: auto;
		display: grid;
		gap: var(--SpaceXl);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
		align-items: center;
	}

	.hero h1 {
		font-size: var(--TextHero);
		margin-block-end: var(--SpaceXs);
	}

	.lead {
		font-size: var(--TextLead);
		color: var(--InkMuted);
	}

	.hero-address-card {
		display: grid;
		gap: var(--SpaceXs);
		padding: var(--SpaceLg);
		border-radius: var(--RadiusLg);
		background: var(--SurfaceRaised);
		border: 1px solid var(--Line);
		box-shadow: var(--ShadowMd);
		margin-block-start: var(--SpaceLg);
	}

	.address-label {
		font-weight: 700;
	}

	.address-helper {
		margin: 0;
		font-size: var(--TextSmall);
		color: var(--InkMuted);
	}

	.address-input-group {
		position: relative;
	}

	.AddressFinder {
		inline-size: 100%;
		min-block-size: 3rem;
		padding: var(--SpaceXs) var(--SpaceMd);
		border: 1px solid var(--LineStrong);
		border-radius: var(--RadiusMd);
		background: var(--Surface);
		color: var(--Ink);
		font-size: var(--TextLead);
		font-weight: 600;
	}

	.AddressFinder.searching {
		border-color: var(--BrandGreen);
	}

	.suggestions-panel {
		position: absolute;
		inset-inline: 0;
		inset-block-start: calc(100% + 0.4rem);
		z-index: 20;
		display: none;
		background: var(--SurfaceRaised);
		border: 1px solid var(--Line);
		border-radius: var(--RadiusMd);
		box-shadow: var(--ShadowMd);
		overflow: hidden;
	}

	.suggestions-panel[data-visible="true"] {
		display: block;
	}

	.suggestion-list {
		max-block-size: 16rem;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.suggestion-option {
		inline-size: 100%;
		text-align: start;
		padding: var(--SpaceSm) var(--SpaceMd);
		border: 0;
		background: transparent;
		cursor: pointer;
		font-weight: 600;
	}

	.suggestion-item + .suggestion-item .suggestion-option {
		border-block-start: 1px solid var(--Line);
	}

	.suggestion-option:hover,
	.suggestion-option.is-active {
		background: color-mix(in oklch, var(--BrandGreen) 12%, var(--Surface));
	}

	.resume-note {
		margin-block-start: var(--SpaceSm);
		font-size: var(--TextSmall);
		color: var(--InkMuted);
	}

	.trust {
		display: flex;
		flex-wrap: wrap;
		gap: var(--SpaceMd);
		margin-block-start: var(--SpaceLg);
		color: var(--InkMuted);
		font-size: var(--TextSmall);
	}

	.card {
		background: var(--SurfaceRaised);
		border: 1px solid var(--Line);
		border-radius: var(--RadiusLg);
		padding: var(--SpaceLg);
		display: grid;
		gap: var(--SpaceXs);
		align-content: start;
	}

	.step-number {
		inline-size: 2rem;
		block-size: 2rem;
		display: grid;
		place-items: center;
		border-radius: var(--RadiusSm);
		background: var(--BrandGreen);
		color: oklch(99% 0 0);
		font-weight: 700;
	}

	.faq details {
		border: 1px solid var(--Line);
		border-radius: var(--RadiusMd);
		padding: var(--SpaceSm) var(--SpaceMd);
		background: var(--SurfaceRaised);
	}

	.faq summary {
		cursor: pointer;
		font-weight: 650;
		/* Comfortable thumb target rather than a single line of text. */
		min-block-size: 2.75rem;
		display: flex;
		align-items: center;
	}

	.faq details[open] summary {
		margin-block-end: var(--SpaceXs);
	}

	.price-callout {
		display: inline-flex;
		align-items: baseline;
		gap: var(--SpaceXs);
		font-weight: 700;
	}

	.price-callout .amount {
		font-size: var(--TextTitle);
		color: var(--BrandGreenStrong);
	}

	/* Tables (admin) ----------------------------------------------------- */
	.table-scroll {
		overflow-x: auto;
		border: 1px solid var(--Line);
		border-radius: var(--RadiusMd);
		background: var(--SurfaceRaised);
	}

	.data-table {
		inline-size: 100%;
		border-collapse: collapse;
		font-size: var(--TextSmall);
		content-visibility: auto;
		contain-intrinsic-size: auto 30rem;
	}

	.data-table th,
	.data-table td {
		padding: var(--SpaceXs) var(--SpaceSm);
		text-align: start;
		border-block-end: 1px solid var(--Line);
		vertical-align: top;
	}

	.data-table thead th {
		position: sticky;
		inset-block-start: 0;
		background: var(--SurfaceSunken);
		font-weight: 700;
	}

	.data-table .muted {
		color: var(--InkMuted);
	}

	.badge {
		display: inline-block;
		padding: 0.1rem var(--SpaceXs);
		border-radius: var(--RadiusPill);
		background: var(--SurfaceSunken);
		border: 1px solid var(--Line);
		font-size: var(--TextSmall);
		font-weight: 650;
	}

	.badge-completed,
	.badge-sent {
		background: var(--BrandGreenWash);
		border-color: color-mix(in oklch, var(--BrandGreen) 30%, transparent);
	}

	.badge-failed {
		background: var(--DangerWash);
		border-color: color-mix(in oklch, var(--Danger) 35%, transparent);
	}

	.filter-form {
		display: grid;
		gap: var(--SpaceMd);
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		align-items: end;
	}

	.filter-actions {
		display: flex;
		gap: var(--SpaceXs);
		flex-wrap: wrap;
	}

	.pagination {
		display: flex;
		gap: var(--SpaceMd);
		align-items: center;
		justify-content: center;
		margin-block-start: var(--SpaceLg);
	}

	.page-header {
		max-inline-size: var(--MeasureWide);
		margin-inline: auto;
		padding: var(--SpaceXl) var(--SpaceMd) var(--SpaceMd);
	}

	.page-subtitle {
		color: var(--InkMuted);
	}

	.empty-state {
		padding: var(--SpaceXl);
		text-align: center;
		color: var(--InkMuted);
	}

	.result-count {
		max-inline-size: var(--MeasureWide);
		margin-inline: auto;
		padding-inline: var(--SpaceMd);
		color: var(--InkMuted);
		font-size: var(--TextSmall);
	}

	.login-panel {
		max-inline-size: 26rem;
		margin-inline: auto;
	}
}

/* -------------------------------------------------------------- utilities */
@layer utilities {
	.visually-hidden {
		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: 0;
		inset-inline-start: 0;
		padding: var(--SpaceXs) var(--SpaceMd);
		background: var(--SurfaceRaised);
		border: 1px solid var(--Line);
		border-radius: 0 0 var(--RadiusMd) 0;
		transform: translateY(-120%);
		z-index: 50;
	}

	.skip-link:focus-visible {
		transform: translateY(0);
	}

	.center {
		text-align: center;
	}

	.muted {
		color: var(--InkMuted);
	}
}

/* Admin tables and wide content must scroll inside their own container,
   never the page. */
@media print {
	.site-header,
	.site-footer,
	.wizard-actions,
	.pay-panel {
		display: none;
	}
}