/**
 * Components.
 *
 * Reusable UI from Web Brand System sections 7-9 and theme spec section 6. Every value comes
 * from a token; nothing here invents a colour, size or radius.
 */

/* ==========================================================================
   Buttons
   ========================================================================== */

/**
 * Buttons carry a 1 px border in every variant, including the filled ones, so a filled and
 * an outline button occupy identical space and a row of mixed buttons does not shift.
 */
.alt-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--alt-space-1);
	height: var(--form-control-height); /* 48 px, the design system's medium size. */
	padding: 0 var(--alt-space-3);
	border: var(--alt-hairline) solid transparent;
	border-radius: var(--alt-radius-control);
	font-family: var(--alt-font-body);
	font-size: var(--text-body);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: var(--shadow-none);
	transition:
		background-color var(--dur-base) var(--ease-standard),
		border-color var(--dur-base) var(--ease-standard),
		color var(--dur-base) var(--ease-standard);
}

/* Large size for a page's primary action. */
.alt-button--lg {
	height: var(--form-control-height-lg);
	padding: 0 var(--alt-space-4);
	font-size: var(--text-body-l);
}

/* Primary on light: signal-dark filled, white text. Measured 5.76:1. */
.alt-button--primary {
	background-color: var(--btn-primary-light-bg);
	border-color: var(--btn-primary-light-bg);
	color: var(--btn-primary-light-fg);
}

.alt-button--primary:hover,
.alt-button--primary:focus-visible {
	background-color: var(--btn-primary-light-bg-hover);
	border-color: var(--btn-primary-light-bg-hover);
}

/**
 * Primary on dark: signal filled with ink text, measured 6.25:1.
 *
 * The text stays dark on hover, as the brand system requires, so the hover state only
 * deepens the fill instead of inverting into a different button.
 */
.alt-button--on-dark.alt-button--primary,
.alt-section--dark .alt-button--primary,
.alt-section--dark-2 .alt-button--primary {
	background-color: var(--btn-primary-dark-bg);
	border-color: var(--btn-primary-dark-bg);
	color: var(--btn-primary-dark-fg);
}

/* The fill deepens; the text stays dark, as the brand system requires. */
.alt-button--on-dark.alt-button--primary:hover,
.alt-button--on-dark.alt-button--primary:focus-visible,
.alt-section--dark .alt-button--primary:hover,
.alt-section--dark-2 .alt-button--primary:hover {
	background-color: var(--btn-primary-dark-bg-hover);
	border-color: var(--btn-primary-dark-bg-hover);
	color: var(--btn-primary-dark-fg);
}

/* Secondary: transparent with a hairline and high-contrast text. */
.alt-button--secondary {
	background-color: transparent;
	border-color: var(--alt-ink);
	color: var(--alt-ink);
}

.alt-button--secondary:hover,
.alt-button--secondary:focus-visible {
	background-color: var(--alt-ink);
	color: var(--alt-paper);
}

.alt-section--dark .alt-button--secondary,
.alt-section--dark-2 .alt-button--secondary,
.alt-button--on-dark.alt-button--secondary {
	border-color: var(--alt-paper);
	color: var(--alt-paper);
}

.alt-section--dark .alt-button--secondary:hover,
.alt-button--on-dark.alt-button--secondary:hover {
	background-color: var(--alt-paper);
	color: var(--alt-ink);
}

/* ==========================================================================
   Site header
   ========================================================================== */

.alt-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--alt-ink);
	color: var(--alt-paper);
	/* No shadow, by design. The hairline below appears only once the header is stuck. */
	border-bottom: var(--alt-hairline) solid transparent;
}

/* Set by navigation.js once the page has scrolled past the header's resting position. */
.alt-header.is-stuck {
	border-bottom-color: var(--alt-text-muted);
}

.alt-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--alt-space-3);
	min-height: 72px;
}

@media (min-width: 1024px) {
	.alt-header__inner {
		min-height: 80px;
	}
}

.alt-header__brand {
	margin: 0;
	font-family: var(--alt-font-display);
	font-size: 1.25rem;
	font-stretch: var(--alt-width-display-l);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.alt-header__brand-link {
	color: var(--alt-paper);
	text-decoration: none;
}

.alt-header__actions {
	display: flex;
	align-items: center;
	gap: var(--alt-space-2);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.alt-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alt-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.alt-nav__link,
.alt-nav .menu-item > a {
	display: inline-block;
	padding: var(--alt-space-1) 0;
	color: var(--alt-paper);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	/* A transparent border reserves the space the active underline will occupy, so hovering
	   never nudges the row. */
	border-bottom: 2px solid transparent;
}

.alt-nav__link:hover,
.alt-nav .menu-item > a:hover {
	border-bottom-color: var(--alt-signal);
}

/* Current page: the underline plus aria-current in markup, never colour alone. */
.alt-nav .current-menu-item > a,
.alt-nav [aria-current="page"] {
	border-bottom-color: var(--alt-signal);
}

/* Desktop nav and mobile toggle swap at the layout breakpoint. */
.alt-nav--desktop {
	display: none;
}

.alt-header__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--alt-space-1);
	min-height: 48px;
	padding: 0 var(--alt-space-2);
	background-color: transparent;
	border: var(--alt-hairline) solid var(--alt-steel-500);
	border-radius: var(--alt-radius-control);
	color: var(--alt-paper);
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.alt-header__toggle-icon {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background-color: currentColor;
}

.alt-header__toggle-icon::before,
.alt-header__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background-color: currentColor;
}

.alt-header__toggle-icon::before { top: -6px; }
.alt-header__toggle-icon::after { top: 6px; }

.alt-header__toggle[aria-expanded="true"] .alt-header__toggle-icon {
	background-color: transparent;
}

.alt-header__toggle[aria-expanded="true"] .alt-header__toggle-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.alt-header__toggle[aria-expanded="true"] .alt-header__toggle-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (min-width: 1024px) {
	.alt-nav--desktop {
		display: block;
	}

	.alt-header__toggle {
		display: none;
	}
}

/* ==========================================================================
   Mobile menu
   ========================================================================== */

/**
 * Near-full-screen panel. `hidden` is honoured by [hidden] in the reset, so with JavaScript
 * unavailable the panel stays collapsed and the desktop nav becomes visible at wider widths -
 * navigation never disappears entirely.
 */
.alt-mobile-menu {
	padding: var(--alt-space-4) var(--alt-page-padding) var(--alt-space-6);
	background-color: var(--surface-dark);
	border-top: var(--alt-hairline) solid var(--hairline-on-dark);
	max-height: calc(100vh - 72px);
	overflow-y: auto;
}

.alt-mobile-menu[hidden] {
	display: none;
}

.alt-mobile-menu .alt-nav__list {
	flex-direction: column;
	gap: 0;
}

/**
 * Mobile nav items are separated by hairlines and sized as full-width rows: a 48 px row is
 * an honest touch target, where an inline link in a stacked list is not.
 */
.alt-mobile-menu .alt-nav__item {
	border-bottom: var(--alt-hairline) solid var(--hairline-on-dark);
}

.alt-mobile-menu .alt-nav__link,
.alt-mobile-menu .menu-item > a {
	display: block;
	padding: var(--alt-space-2) 0;
	border-bottom: 0;
	font-size: 1.125rem;
}

.alt-mobile-menu__actions {
	margin-top: var(--alt-space-4);
}

.alt-mobile-menu__actions .alt-button {
	width: 100%;
}

@media (min-width: 1024px) {
	.alt-mobile-menu {
		display: none !important; /* Compatibility: beats the inline style the toggle sets. */
	}
}

/* ==========================================================================
   Site footer
   ========================================================================== */

.alt-footer {
	padding-block: var(--alt-space-6) var(--alt-space-5);
	background-color: var(--alt-ink);
	color: var(--alt-paper);
}

.alt-footer__columns {
	display: grid;
	gap: var(--alt-space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.alt-footer__columns {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

.alt-footer__brand {
	margin: 0 0 var(--alt-space-1);
	font-family: var(--alt-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.alt-footer__heading {
	margin: 0 0 var(--alt-space-2);
	font-family: var(--alt-font-mono);
	font-size: var(--text-eyebrow);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--alt-steel-500);
}

.alt-footer__list,
.alt-footer__legal-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.alt-footer__list li + li {
	margin-top: var(--alt-space-1);
}

.alt-footer a {
	color: var(--alt-paper);
	text-decoration: none;
	border-bottom: var(--alt-hairline) solid transparent;
}

.alt-footer a:hover,
.alt-footer a:focus-visible {
	border-bottom-color: var(--alt-signal);
}

.alt-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--alt-space-2);
	margin-top: var(--alt-space-6);
	padding-top: var(--alt-space-3);
	border-top: var(--alt-hairline) solid var(--hairline-on-dark);
}

.alt-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alt-space-3);
	font-size: var(--text-small);
}

/* ==========================================================================
   Status chip
   ========================================================================== */

/**
 * Semantic state, never brand decoration. The status word is always present: colour alone never
 * conveys state.
 *
 * The pill shape is deliberate and is the one place radius is allowed beyond 2 px - it encodes
 * state rather than brand style. The colour appears as the border and a small square marker,
 * while the label takes the region's text colour, which is what keeps it legible on light
 * backgrounds where the status hues themselves measure far below 4.5:1.
 */
.alt-status {
	display: inline-flex;
	align-items: center;
	gap: var(--alt-space-1);
	padding: 7px 12px 6px;
	border: var(--alt-hairline) solid var(--alt-status-color, var(--alt-hairline-color));
	border-radius: var(--alt-radius-chip);
	background-color: transparent;
	color: var(--alt-text);
	font-family: var(--alt-font-mono);
	font-size: var(--text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--tracking-eyebrow);
	line-height: 1;
	text-transform: uppercase;
}

.alt-status::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	background-color: var(--alt-status-color, var(--alt-text-muted));
}

.alt-status--validated { --alt-status-color: var(--status-validated); }
.alt-status--progress { --alt-status-color: var(--status-progress); }
.alt-status--request { --alt-status-color: var(--status-request); }
.alt-status--revoked { --alt-status-color: var(--alt-signal); }

/* ==========================================================================
   Heading group, datum line, callouts
   ========================================================================== */

.alt-heading-group {
	margin-bottom: var(--alt-space-5);
}

/* The datum line is a deliberate marker, used once per major region - not a divider. */
.alt-heading-group__datum,
.alt-limitations__datum {
	display: block;
	width: 56px;
	height: var(--alt-datum);
	margin-bottom: var(--alt-space-2);
	background-color: var(--alt-datum-color);
}

.alt-heading-group__title {
	margin: 0;
}

.alt-heading-group__lead {
	margin-top: var(--alt-space-2);
	font-size: var(--text-body-l);
}

.alt-callout {
	margin: 0;
	padding-left: var(--alt-space-3);
	border-left: var(--alt-datum-line) solid var(--alt-signal-dark);
}

.alt-section--dark .alt-callout,
.alt-on-dark .alt-callout {
	border-left-color: var(--alt-signal);
}

.alt-callout__label {
	display: block;
	margin-top: var(--alt-space-1);
	font-weight: 600;
}

.alt-callout__caption {
	margin-top: var(--alt-space-1);
}

.alt-callout__evidence {
	display: block;
	margin-top: 4px;
	font-size: var(--text-small);
	color: var(--alt-text-muted);
}


/* ==========================================================================
   Stat tile
   ========================================================================== */

/**
 * A hairline, not a datum line. The datum is a named device used once per region; a row of stat
 * tiles each carrying one would turn a deliberate marker into a repeating rule.
 */
.alt-stat {
	display: flex;
	flex-direction: column;
	gap: var(--alt-space-1);
	padding-top: var(--alt-space-3);
	border-top: var(--alt-hairline) solid var(--alt-hairline-color);
}

.alt-stat__label {
	display: block;
	font-size: var(--text-body);
}

/* ==========================================================================
   Cards
   ========================================================================== */

/**
 * Cards are rectangular surfaces with a hairline - no radius, no shadow. On light the surface
 * stays paper and the hairline does the separating; on dark it becomes ink-2, which is what
 * that token exists for.
 */
.alt-card {
	display: flex;
    flex-direction: column;
	border: var(--alt-hairline) solid var(--alt-hairline-color);
	background-color: transparent;
}

.alt-section--dark .alt-card,
.alt-section--dark-2 .alt-card,
.alt-on-dark .alt-card {
	border-color: var(--alt-text-muted);
	background-color: var(--alt-ink-2);
}

.alt-card__media {
	margin: 0;
}

.alt-card__media .alt-figure__image {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.alt-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--alt-space-2);
	padding: var(--alt-space-3);
}

.alt-card__title {
	margin: 0;
	font-size: var(--text-h3);
}

.alt-card__role {
	margin: 0;
}

.alt-card__facts,
.alt-card__tags {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-small);
}

.alt-card__facts li {
	padding-left: var(--alt-space-2);
	border-left: var(--alt-hairline) solid var(--alt-hairline-color);
}

.alt-card__facts li + li {
	margin-top: 6px;
}

.alt-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alt-space-1);
}

.alt-tag {
	padding: 2px var(--alt-space-1);
	border: var(--alt-hairline) solid var(--alt-hairline-color);
	font-size: var(--text-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.alt-section--dark .alt-tag {
	border-color: var(--alt-text-muted);
}

.alt-card__meta,
.alt-card__id {
	margin: 0;
	color: var(--alt-text-muted);
}


.alt-card__headline {
	margin: 0;
}

.alt-card__headline-label {
	display: block;
	font-family: var(--alt-font-mono);
	font-size: var(--text-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/**
 * Accepted and rejected readings sit in one row at identical size and weight. The brand system
 * requires equal honesty, so there is deliberately no success or warning colouring here that
 * would make one number feel like the headline and the other like a footnote.
 */
.alt-card__split {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alt-space-3);
	margin: 0;
	font-size: var(--text-small);
}

.alt-card__link {
	margin-top: auto;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	align-self: flex-start;
}

.alt-card__link:hover,
.alt-card__link:focus-visible {
	border-bottom-color: currentColor;
}

/* ==========================================================================
   Limitation block
   ========================================================================== */

/**
 * Same type sizes and colours as any other content block. There is intentionally no muted,
 * small or collapsed variant: the brand system forbids exactly those treatments, so the
 * stylesheet offers no way to apply them.
 */
.alt-limitations {
	padding: var(--alt-space-3) 0;
}

.alt-limitations__datum {
	background-color: var(--alt-signal-dark);
}

.alt-limitations__title {
	margin: 0 0 var(--alt-space-2);
	font-size: var(--text-h2);
}

.alt-limitations__list {
	margin: var(--alt-space-2) 0 0;
	padding-left: var(--alt-space-3);
}

.alt-limitations__list li + li {
	margin-top: var(--alt-space-1);
}

/* ==========================================================================
   Step list
   ========================================================================== */

/**
 * A process reads as a grid, not a column.
 *
 * Six steps stacked vertically push everything after them below the fold and make a reader scroll
 * through a list to find step four. The design system lays them out as auto-fitting cards with a
 * fixed number column, so the whole process is visible at once and the numbers align down each
 * column.
 *
 * The counter still comes from <ol>, so the order survives reordering and a screen reader
 * announces the position.
 */
.alt-steps {
	counter-reset: alt-step;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--alt-space-5) var(--alt-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.alt-steps__item {
	counter-increment: alt-step;
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: var(--alt-space-2);
	padding-top: var(--alt-space-2);
	border-top: var(--alt-hairline) solid var(--alt-hairline-color);
}

.alt-steps__item::before {
	content: counter( alt-step, decimal-leading-zero );
	font-family: var(--alt-font-mono);
	font-size: var(--text-small);
	letter-spacing: var(--tracking-mono);
	color: var(--alt-accent);
}

.alt-steps__title {
	display: block;
	font-family: var(--alt-font-display);
	font-size: var(--text-h3-mobile);
	font-weight: 700;
	line-height: var(--leading-h3);
}

.alt-steps__body {
	display: block;
	margin-top: 6px;
	font-size: var(--text-small);
	color: var(--alt-text-muted);
}

/* ==========================================================================
   Figure
   ========================================================================== */

.alt-figure {
	margin: 0;
}

.alt-figure__caption {
	margin-top: var(--alt-space-1);
	color: var(--alt-text-muted);
	font-size: var(--text-small);
	line-height: 1.4;
}


/* ==========================================================================
   CTA band
   ========================================================================== */

.alt-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--alt-space-4);
	padding: var(--alt-space-6) 0;
}

.alt-cta--dark {
	color: var(--alt-paper);
}

.alt-cta__heading {
	margin: 0;
	font-size: var(--text-h2);
}

.alt-cta__body {
	margin-top: var(--alt-space-2);
}

.alt-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alt-space-2);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.alt-faq__heading {
	margin: 0 0 var(--alt-space-3);
}

.alt-faq__item {
	border-top: var(--alt-hairline) solid var(--alt-hairline-color);
}

.alt-faq__item:last-child {
	border-bottom: var(--alt-hairline) solid var(--alt-hairline-color);
}

.alt-section--dark .alt-faq__item {
	border-top-color: var(--alt-text-muted);
}

.alt-faq__question {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--alt-space-2);
	padding: var(--alt-space-2) 0;
	cursor: pointer;
	font-family: var(--alt-font-display);
	font-size: var(--text-h3);
	font-weight: 700;
	/* The native marker is replaced by a plus/minus built from text, so it inherits colour and
	   size and needs no icon font or SVG. */
	list-style: none;
}

.alt-faq__question::-webkit-details-marker {
	display: none;
}

.alt-faq__question::after {
	content: "+";
	font-family: var(--alt-font-mono);
	font-weight: 400;
	color: var(--alt-signal-dark);
}

.alt-faq__item[open] .alt-faq__question::after {
	content: "\2212"; /* Minus sign, not a hyphen. */
}

.alt-section--dark .alt-faq__question::after {
	color: var(--alt-signal);
}

.alt-faq__answer {
	padding-bottom: var(--alt-space-3);
}

.alt-faq__answer > :first-child {
	margin-top: 0;
}

/* ==========================================================================
   Specification table
   ========================================================================== */

.alt-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-small);
}

.alt-spec-table__caption {
	margin-bottom: var(--alt-space-2);
	font-family: var(--alt-font-mono);
	font-size: var(--text-eyebrow);
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
	color: var(--alt-text-muted);
}

.alt-spec-table th,
.alt-spec-table td {
	padding: var(--alt-space-2) var(--alt-space-3) var(--alt-space-2) 0;
	text-align: left;
	vertical-align: baseline;
	border-bottom: var(--alt-hairline) solid var(--alt-hairline-color);
}

/* Sticky header for long tables, allowed by brand system 9.9. */
.alt-spec-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: var(--alt-paper);
	border-bottom-width: var(--alt-datum-line);
	border-bottom-color: var(--alt-ink);
	font-family: var(--alt-font-mono);
	font-size: var(--text-eyebrow);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.alt-spec-table__group th {
	padding-top: var(--alt-space-4);
	font-family: var(--alt-font-mono);
	font-size: var(--text-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--alt-signal-dark);
	border-bottom-color: var(--alt-ink);
}

.alt-spec-table__value {
	white-space: nowrap;
}

.alt-spec-table__condition,
.alt-spec-table__note {
	color: var(--alt-text-muted);
}

.alt-section--dark .alt-spec-table th,
.alt-section--dark .alt-spec-table td {
	border-bottom-color: var(--alt-text-muted);
}

.alt-section--dark .alt-spec-table thead th {
	background-color: var(--alt-ink);
	border-bottom-color: var(--alt-paper);
}


.alt-section--dark .alt-spec-table__group th {
	color: var(--alt-signal);
}

/* ==========================================================================
   Download card
   ========================================================================== */

.alt-download {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--alt-space-3);
	padding: var(--alt-space-3) 0;
	border-top: var(--alt-hairline) solid var(--alt-hairline-color);
}

.alt-download:last-of-type {
	border-bottom: var(--alt-hairline) solid var(--alt-hairline-color);
}

.alt-section--dark .alt-download {
	border-top-color: var(--alt-text-muted);
}

.alt-download__title {
	margin: 0;
	font-size: var(--text-h3);
}

.alt-download__meta {
	margin: 4px 0 0;
	color: var(--alt-text-muted);
}

.alt-download__note {
	margin: 4px 0 0;
}


/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Engineering intake, not consumer checkout: visible labels, 1 px borders, no rounded pills,
 * sections separated by hairlines rather than cards. Spacing follows brand system 10.2 exactly
 * - 8 px label to control, 48-52 px control height, 24 px between fields.
 */
.alt-field + .alt-field {
	margin-top: var(--alt-space-3);
}

.alt-field__label {
	display: block;
	margin-bottom: var(--alt-space-1);
	font-weight: 600;
}

.alt-field__required {
	color: var(--alt-signal-dark);
}

.alt-section--dark .alt-field__required {
	color: var(--alt-signal);
}

/**
 * The control border is steel-700, not steel-300: an input boundary is a UI component under
 * WCAG 1.4.11 and needs 3:1, which steel-300 on paper does not reach (measured 1.54:1).
 */
.alt-field__control {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px var(--alt-space-2);
	background-color: #fff;
	/* steel-700, not the hairline colour: an input boundary is a UI component under WCAG 1.4.11
	   and needs 3:1, which steel-300 on paper does not reach (measured 1.54:1). */
	border: var(--alt-hairline) solid var(--alt-steel-700);
	border-radius: var(--alt-radius-control);
	color: var(--alt-ink);
	font-family: var(--alt-font-body);
	font-size: 1rem;
}

textarea.alt-field__control {
	min-height: 120px;
	resize: vertical;
}

.alt-field__control--file {
	padding: 10px var(--alt-space-2);
}

.alt-field__help {
	margin: var(--alt-space-1) 0 0;
	color: var(--alt-text-muted);
}

/* Error state carries a mark and text, never colour alone. */
.alt-field__error {
	display: flex;
	align-items: baseline;
	gap: var(--alt-space-1);
	margin: var(--alt-space-1) 0 0;
	color: #b32d2e;
	font-weight: 600;
}

.alt-field--error .alt-field__control {
	border-color: #b32d2e;
	border-width: 2px;
}

.alt-field__error-mark {
	font-family: var(--alt-font-mono);
}

/* Field sections are separated by a hairline, not a card. */
.alt-fieldset {
	margin: 0;
	padding: 0 0 var(--alt-space-5);
	border: 0;
	border-bottom: var(--alt-hairline) solid var(--alt-hairline-color);
}

.alt-fieldset + .alt-fieldset {
	padding-top: var(--alt-space-5);
}

.alt-fieldset__legend {
	padding: 0;
	margin-bottom: var(--alt-space-3);
	font-family: var(--alt-font-display);
	font-size: var(--text-h3);
	font-weight: 700;
}

/* ==========================================================================
   Editor-facing notices
   ========================================================================== */

/**
 * Shown only to logged-in editors, where a component refused to publish incomplete content.
 * Styled to look like a tool, not like site content, so nobody mistakes it for a design
 * element - and it never reaches a visitor.
 */
.alt-component-notice,
.alt-component-missing {
	margin: var(--alt-space-2) 0;
	padding: var(--alt-space-2);
	border-left: var(--alt-datum-line) solid var(--alt-progress);
	background-color: #fff8e5;
	color: var(--alt-ink);
	font-family: var(--alt-font-mono);
	font-size: var(--text-small);
}

/* ==========================================================================
   Fact lists
   ========================================================================== */

/**
 * A description list, used where the content is attributes of one thing rather than rows to
 * compare - asset conditions, validation context, certificate fields. Hairlines separate the
 * pairs; there is no card, per the brand system.
 */
.alt-facts {
	margin: 0;
}

.alt-facts dt {
	margin-top: var(--alt-space-2);
	padding-top: var(--alt-space-2);
	border-top: var(--alt-hairline) solid var(--alt-hairline-color);
	font-family: var(--alt-font-mono);
	font-size: var(--text-eyebrow);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--alt-text-muted);
}

.alt-facts dd {
	margin: 4px 0 0;
}

.alt-section--dark .alt-facts dt,
.alt-on-dark .alt-facts dt {
	border-top-color: var(--alt-text-muted);
	color: var(--alt-steel-500);
}

/* Inline variant for a short identity rail under a hero. */
.alt-facts--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--alt-space-5);
	margin-top: var(--alt-space-4);
}

.alt-facts--inline dt {
	margin-top: 0;
}

.alt-facts--inline dd {
	margin-bottom: var(--alt-space-2);
}

/* Two-column variant for result figures, which are short and numerous. */
@media (min-width: 768px) {
	.alt-facts--grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--alt-space-4);
	}

	.alt-facts--grid dt {
		grid-column: 1;
	}

	.alt-facts--grid dd {
		grid-column: 2;
		margin-top: var(--alt-space-2);
		padding-top: var(--alt-space-2);
		border-top: var(--alt-hairline) solid var(--alt-hairline-color);
	}
}

/* ==========================================================================
   Certificate verification
   ========================================================================== */

.alt-verify__statement {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--alt-space-2);
	margin: var(--alt-space-4) 0;
	padding-bottom: var(--alt-space-3);
	border-bottom: var(--alt-datum-line) solid var(--alt-signal);
}

.alt-facts--verify dd {
	font-size: var(--text-body-l);
}

/* ==========================================================================
   Media placeholder
   ========================================================================== */

/**
 * A media slot with no asset yet. Rendered only outside production.
 *
 * Deliberately unlovely: a diagonal hatch and mono text, so nobody mistakes it for a design
 * element or forgets it is unfinished. It states the pixel size the layout expects and what
 * the asset has to show, which makes the page itself readable as a media brief.
 */
.alt-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--alt-space-1);
	width: 100%;
	max-width: 100%;
	padding: var(--alt-space-3);
	border: var(--alt-hairline) dashed var(--alt-text-muted);
	background-color: transparent;
	background-image: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 9px,
		rgba(155, 162, 170, 0.18) 9px,
		rgba(155, 162, 170, 0.18) 10px
	);
	color: var(--alt-text-muted);
	text-align: center;
}

.alt-section--dark .alt-placeholder,
.alt-section--dark-2 .alt-placeholder,
.alt-on-dark .alt-placeholder {
	border-color: var(--alt-text-muted);
	color: var(--alt-steel-500);
}

.alt-placeholder__size {
	font-size: var(--text-body-l);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.alt-placeholder__label {
	max-width: 40ch;
	font-weight: 600;
	line-height: 1.35;
}

.alt-placeholder__note {
	max-width: 46ch;
	line-height: 1.35;
}

.alt-placeholder__flag {
	margin-top: var(--alt-space-1);
	padding: 2px var(--alt-space-1);
	border: var(--alt-hairline) solid currentColor;
	font-size: var(--text-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==========================================================================
   Homepage
   ========================================================================== */

/* Arrow link: a text link with a trailing arrow, used where the brand system asks for a
   secondary text link rather than a second button. */
.alt-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--alt-space-1);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.alt-link-arrow:hover,
.alt-link-arrow:focus-visible {
	border-bottom-color: currentColor;
}

/**
 * Proof strip: four verifiable facts, separated by hairlines. Not logos - the spec forbids
 * customer logos until at least four exist with written permission.
 */
.alt-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alt-proof__item {
	flex: 1 1 220px;
	padding: var(--alt-space-2) var(--alt-space-3) var(--alt-space-2) 0;
	font-size: var(--text-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-top: var(--alt-datum-line) solid var(--alt-signal);
}

.alt-proof__item + .alt-proof__item {
	padding-left: var(--alt-space-3);
}

/* Value cards in H-4 and deployment paths in H-9: a datum line and text, no card chrome. */
.alt-value,
.alt-path {
	display: flex;
	flex-direction: column;
	gap: var(--alt-space-1);
	padding-top: var(--alt-space-2);
	border-top: var(--alt-datum-line) solid var(--alt-signal-dark);
}

.alt-section--dark .alt-value,
.alt-section--dark-2 .alt-value,
.alt-section--dark .alt-path,
.alt-section--dark-2 .alt-path {
	border-top-color: var(--alt-signal);
}

.alt-value__title,
.alt-path__title {
	margin: 0;
	font-size: var(--text-h3);
}

.alt-value p,
.alt-path p {
	margin: 0;
}

.alt-path__who {
	color: var(--alt-text-muted);
}

.alt-section--dark-2 .alt-path__who,

.alt-path__cta {
	margin-top: auto;
	padding-top: var(--alt-space-2);
}

/**
 * The mandatory honesty line in H-5. Rendered at body size with a datum line, never as fine
 * print: the brand system requires limitations to carry the same weight as capabilities, and
 * this sentence is the limitation on every published measurement figure.
 */
.alt-honesty {
	padding-left: var(--alt-space-3);
	border-left: var(--alt-datum-line) solid var(--alt-signal);
	font-weight: 600;
}

/* Two-column comparison table in H-5: equal columns, read across. */
.alt-compare td {
	width: 50%;
	vertical-align: top;
}

/* H-3 cards stay full width on mobile rather than shrinking into a narrow column. */
@media (max-width: 1023px) {
	.alt-grid--6-6 > .alt-card {
		width: 100%;
	}
}

/* ==========================================================================
   Form placeholder
   ========================================================================== */

/**
 * Marks a form that is not connected yet. Framed and flagged, so nobody reviewing the page
 * mistakes it for a working form, and never rendered on production.
 */
.alt-form-placeholder {
	padding: var(--alt-space-3);
	border: var(--alt-hairline) dashed var(--alt-text-muted);
}

.alt-form-placeholder__flag {
	margin: 0 0 var(--alt-space-3);
	padding: 4px var(--alt-space-1);
	display: inline-block;
	border: var(--alt-hairline) solid var(--alt-progress);
	background-color: #fff8e5;
	color: var(--alt-ink);
	font-size: var(--text-eyebrow);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.alt-form-placeholder__heading {
	margin: 0 0 var(--alt-space-2);
	font-size: var(--text-h3);
}

/* A disabled fieldset must still be readable: the browser's default greying makes the field
   list hard to review, which defeats the purpose of a structure preview. */
.alt-form-placeholder fieldset[disabled] {
	opacity: 1;
	border-bottom: 0;
	padding-bottom: 0;
}

.alt-form-placeholder fieldset[disabled] .alt-field__control {
	background-color: #fff;
	color: var(--alt-text-muted);
}

/* ==========================================================================
   Checklist
   ========================================================================== */

/**
 * Used for kit contents, deliverables and capability lists. A hairline per item rather than a
 * bullet glyph: the list reads as a specification, and the marker never competes with the
 * single accent colour.
 */
.alt-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.alt-checklist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--alt-space-5);
	}
}

.alt-checklist li {
	position: relative;
	padding: var(--alt-space-2) 0 var(--alt-space-2) var(--alt-space-3);
	border-top: var(--alt-hairline) solid var(--alt-hairline-color);
}

.alt-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--alt-space-2) + 0.6em);
	width: 10px;
	height: 2px;
	background-color: var(--alt-signal-dark);
}

.alt-section--dark .alt-checklist li,
.alt-section--dark-2 .alt-checklist li {
	border-top-color: var(--alt-text-muted);
}

.alt-section--dark .alt-checklist li::before,
.alt-section--dark-2 .alt-checklist li::before {
	background-color: var(--alt-signal);
}

/* Neutral variant for conditions that are requirements rather than inclusions - the accent
   would read as "included", which is the opposite of what these rows say. */
.alt-checklist--neutral li::before {
	background-color: var(--alt-text-muted);
}

/* ==========================================================================
   Certificate lookup
   ========================================================================== */

.alt-lookup {
	max-width: 28rem;
	margin-top: var(--alt-space-4);
}

.alt-result {
	padding-top: var(--alt-space-2);
	border-top: var(--alt-datum-line) solid var(--alt-signal-dark);
}

.alt-result__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--alt-space-2);
	margin: 0 0 var(--alt-space-3);
	font-size: var(--text-h2);
}

/* ==========================================================================
   Course card
   ========================================================================== */

.alt-course {
	display: flex;
	flex-direction: column;
	gap: var(--alt-space-2);
	padding-top: var(--alt-space-2);
	border-top: var(--alt-datum-line) solid var(--alt-signal-dark);
}

.alt-course__title {
	margin: 0;
	font-size: var(--text-h3);
}

.alt-course__audience {
	margin: 0;
	color: var(--alt-text-muted);
}

.alt-course__items {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-small);
}

.alt-course__items li {
	padding: var(--alt-space-1) 0 var(--alt-space-1) var(--alt-space-2);
	border-left: var(--alt-hairline) solid var(--alt-hairline-color);
}

/* ==========================================================================
   Totals rail
   ========================================================================== */

/**
 * A row of figures under a hero. The brand principle is that the number is always larger than
 * its label, so the value takes the spec-value scale and the label sits above it in mono at
 * eyebrow size - the same relationship the stat tile uses, without the tile's datum line,
 * because these are counts rather than measurement claims.
 */
.alt-totals {
	display: grid;
	gap: var(--alt-space-3) var(--alt-space-5);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: var(--alt-space-5) 0 0;
	padding-top: var(--alt-space-3);
	border-top: var(--alt-hairline) solid var(--hairline-on-dark);
}

@media (min-width: 768px) {
	.alt-totals {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.alt-totals__item dt {
	margin: 0;
	font-family: var(--alt-font-mono);
	font-size: var(--text-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--alt-steel-500);
}

.alt-totals__item dd {
	margin: 4px 0 0;
}

/* ==========================================================================
   Measurement point grid
   ========================================================================== */

/**
 * One square per reading. Accepted squares are filled, rejected ones are outlined and empty -
 * present and countable, never removed. The grid is capped in width so a campaign of forty-two
 * readings reads as a block rather than a stripe.
 */
.alt-points {
	margin: 0;
}

.alt-points__grid {
	display: grid;
	grid-template-columns: repeat(14, 1fr);
	gap: 6px;
	max-width: 420px;
}

.alt-points__point {
	aspect-ratio: 1;
}

.alt-points__point--accepted {
	background-color: var(--status-validated);
}

/* Outlined, not a lighter fill: a rejected reading is a different kind of thing, not a weaker
   version of an accepted one. */
.alt-points__point--rejected {
	border: var(--alt-hairline) solid var(--status-rejected);
}

.alt-points__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alt-space-3);
	margin-top: var(--alt-space-2);
	font-size: var(--text-small);
	color: var(--alt-text-muted);
}

.alt-points__note {
	flex-basis: 100%;
}