/* =========================================================================
   Mostacho — component layer
   BEM: block__element--modifier. One file-name = one block name.
   Components consume SEMANTIC tokens only (var(--action-bg), var(--text-primary)),
   never --core-* and never a literal hex (Component Library §2.4).
   No shadows, no gradients, no glass. Depth comes from contrast and hairlines.
   ========================================================================= */

/* =========================================================================
   ATOMS
   ========================================================================= */

/* ---- button ------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1-5);
	min-height: var(--tap-min);
	min-width: var(--tap-min);
	padding: var(--space-3) var(--space-4);
	border: var(--border-hairline-width) solid transparent;
	border-radius: var(--radius-card);
	font-family: var(--font-ui);
	font-size: var(--fs-ui-label);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dur-ui) var(--ease-out),
		border-color var(--dur-ui) var(--ease-out),
		transform var(--dur-micro) var(--ease-out);
}

.btn--primary {
	background-color: var(--action-bg);
	color: var(--action-fg);
}

.btn--primary:hover {
	/* Yellow at 88% brightness. No lift — no elevation tokens exist. */
	background-color: color-mix(in srgb, #000 12%, var(--action-bg));
}

.btn--secondary {
	background-color: transparent;
	color: var(--text-primary);
	border-color: var(--border-hairline);
}

.btn--secondary:hover {
	border-color: var(--text-primary);
}

.btn--tertiary {
	min-height: var(--tap-floor);
	padding: var(--space-2) 0;
	background-color: transparent;
	color: var(--text-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	white-space: normal;
}

.btn--tertiary:hover {
	text-decoration-color: var(--action-bg);
}

.btn--tertiary:visited {
	opacity: 0.85;
}

.btn:active {
	transform: scale(0.99);
	transition-duration: 120ms;
}

.btn[aria-disabled="true"],
.btn:disabled {
	cursor: not-allowed;
	background-color: var(--surface-panel);
	color: var(--text-caption);
	border-color: transparent;
	pointer-events: none;
}

.btn--secondary[aria-disabled="true"],
.btn--tertiary[aria-disabled="true"] {
	background-color: transparent;
	opacity: 0.3;
}

/* Loading: label swaps to a 1px indeterminate bar. Width is locked by the
   inline min-width JS sets before the swap, so the button cannot cause CLS. */
/*
 * One label, two lengths.
 *
 * The short label exists only so the primary CTA does not wrap below 360px.
 * Above that width it must never render — without this rule both labels paint
 * side by side and the button pushes the document wider than the viewport.
 */
.btn__label--short {
	display: none;
}

@media (max-width: 359px) {
	.btn__label--full {
		display: none;
	}

	.btn__label--short {
		display: inline;
	}
}

.btn[aria-busy="true"] .btn__label,
.btn[aria-busy="true"] .ui-icon {
	visibility: hidden;
}

.btn[aria-busy="true"]::after {
	content: "";
	position: absolute;
	inset-inline: var(--space-4);
	block-size: 1px;
	background-color: var(--action-bg);
	transform-origin: left center;
	animation: btn-indeterminate 1.2s var(--ease-out) infinite;
}

.btn[aria-busy="true"] {
	position: relative;
}

@keyframes btn-indeterminate {
	0% {
		transform: scaleX(0);
	}

	50% {
		transform: scaleX(1);
	}

	100% {
		transform: scaleX(0);
	}
}

/* Full-width when it is the section's primary action on small screens */
@media (max-width: 414px) {
	.btn--block {
		width: 100%;
	}
}

/* ---- text-link --------------------------------------------------------- */
.text-link {
	color: currentColor;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: text-decoration-color var(--dur-ui) var(--ease-out);
}

.text-link:hover {
	text-decoration-color: var(--action-bg);
}

.text-link--cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--tap-floor);
	font-family: var(--font-ui);
	font-size: var(--fs-ui-label);
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* ---- ui-icon ----------------------------------------------------------- */
.ui-icon {
	flex: none;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: square;
	stroke-linejoin: miter;
}

.ui-icon--20 {
	width: 20px;
	height: 20px;
}

.ui-icon--24 {
	width: 24px;
	height: 24px;
}

/* ---- signal-chip ------------------------------------------------------- */
.signal-chip {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 10px 12px;
	border: var(--border-hairline-width) solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-ui);
	font-size: var(--fs-ui-label);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
	animation: chip-pop var(--dur-micro) var(--ease-out) both;
}

@keyframes chip-pop {
	from {
		opacity: 0;
		transform: scale(0.98);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.signal-chip--neutral {
	background-color: var(--surface-panel);
	color: var(--text-primary);
}

.signal-chip--signal {
	background-color: var(--action-bg);
	color: var(--action-fg);
}

.signal-chip--proof {
	background-color: transparent;
	border-color: var(--state-success);
	color: var(--state-success);
}

/* ---- proof-stamp ------------------------------------------------------- */
.proof-stamp {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-2);
	border: var(--border-hairline-width) solid var(--state-success);
	border-radius: var(--radius-card);
	font-size: var(--fs-body-small);
	line-height: 1.2;
	color: var(--text-primary);
}

.proof-stamp .ui-icon {
	color: var(--state-success);
}

/* ---- data-value -------------------------------------------------------- */
.data-value {
	font-family: var(--font-ui);
	font-size: var(--fs-data-value);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.data-value__unit {
	font-size: var(--fs-body);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ---- hairline ---------------------------------------------------------- */
.hairline {
	border: 0;
	border-top: var(--border-hairline-width) solid var(--border-hairline);
	margin: 0;
}

/* ---- image-slot -------------------------------------------------------- */
.image-slot {
	position: relative;
	overflow: hidden;
	background-color: var(--surface-panel);
	border-radius: var(--radius-card);
}

.image-slot--bleed {
	border-radius: var(--radius-none);
}

.image-slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No-image state — never a broken-image icon, never blank white. The centred
   moustache mark at 15% opacity lands when the PNG→SVG conversion ships. */
.image-slot--empty {
	background-color: var(--surface-panel);
	min-height: 160px;
}

/* =========================================================================
   MOLECULES
   ========================================================================= */

/* ---- proof-card -------------------------------------------------------- */
.proof-bar__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

@media (min-width: 768px) {
	.proof-bar__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-4);
	}
}

@media (min-width: 1024px) {
	.proof-bar__grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.proof-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-3);
	background-color: var(--surface-card);
	border: var(--border-hairline-width) solid var(--border-hairline);
	border-radius: var(--radius-card);
}

@media (min-width: 768px) {
	.proof-card {
		padding: var(--space-4);
	}
}

/* Accent variant — max one per page, the headline metric only. */
.proof-card--accent {
	border-color: var(--action-bg);
}

/* Value renders above its label; the DOM keeps dt before dd so a screen
   reader reads "Blended cost per lead: $7.37". */
.proof-card__pair {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--space-2);
}

.proof-card__label {
	font-size: var(--fs-body-small);
	color: var(--text-secondary);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.proof-card__value {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--fs-data-value);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}

.proof-card__delta {
	font-family: var(--font-ui);
	font-size: var(--fs-body-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--state-success);
}

.proof-card__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
}

/* ---- receipt-quote ----------------------------------------------------- */
.receipt-quote {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-3);
	background-color: var(--surface-card);
	border: var(--border-hairline-width) solid var(--border-hairline);
	border-radius: var(--radius-card);
}

@media (min-width: 768px) {
	.receipt-quote {
		padding: var(--space-4);
	}
}

.receipt-quote__text {
	margin: 0;
	font-size: var(--fs-quote);
	font-weight: 500;
	line-height: 1.4;
	color: var(--text-primary);
}

.receipt-quote__cite {
	font-size: var(--fs-body-small);
	font-style: normal;
	color: var(--text-secondary);
}

/* ---- segment-card ------------------------------------------------------ */
.segment-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
	background-color: transparent;
	border: var(--border-hairline-width) solid var(--border-hairline);
	border-radius: var(--radius-card);
	transition: border-color var(--dur-ui) var(--ease-out);
}

/* Cursor-state hook, Tier 1 CSS-native. Pointer devices only; keyboard focus
   produces the identical state so keyboard users lose nothing. */
@media (hover: hover) and (pointer: fine) {
	.segment-card:hover {
		border-color: var(--text-primary);
	}
}

.segment-card:focus-within {
	border-color: var(--text-primary);
}

.segment-card__icon {
	color: var(--text-secondary);
}

.segment-card__title {
	margin: 0;
}

.segment-card__line {
	color: var(--text-secondary);
	font-size: var(--fs-body-small);
	line-height: 1.5;
}

.segment-card__link {
	margin-block-start: auto;
}

/* ---- stepper-step ------------------------------------------------------ */
.stepper__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	counter-reset: step;
	list-style: none;
}

@media (min-width: 1024px) {
	.stepper__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-4);
	}
}

.stepper-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-block-start: var(--space-4);
}

/* Connector line-draw, 400–600ms, left→right. Transform only. */
.stepper-step::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: var(--line-system);
	background-color: var(--border-hairline);
	transform-origin: left center;
}

/* v1.2.0: triggered by reveal.js via .is-inview on .stepper__list (which
   carries .u-reveal-group), so the draw fires in every browser. Hidden state
   is gated behind html.js-anim — no JS means the line is simply visible. */
html.js-anim .stepper-step::before {
	transform: scaleX(0);
}

html.js-anim .is-inview .stepper-step::before {
	animation: line-draw 500ms var(--ease-out) both;
}

html.js-anim .is-inview .stepper-step:nth-child(2)::before {
	animation-delay: 120ms;
}

html.js-anim .is-inview .stepper-step:nth-child(3)::before {
	animation-delay: 240ms;
}

html.js-anim .is-inview .stepper-step:nth-child(4)::before {
	animation-delay: 360ms;
}

@keyframes line-draw {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

.stepper-step__number {
	font-family: var(--font-ui);
	font-size: var(--fs-section-header);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--text-secondary);
}

.stepper-step__name {
	margin: 0;
}

.stepper-step__line {
	color: var(--text-secondary);
	font-size: var(--fs-body-small);
	line-height: 1.5;
}

.stepper-step__output {
	font-family: var(--font-ui);
	font-size: var(--fs-body-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--text-primary);
}

/* ---- data-row ---------------------------------------------------------- */
.data-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-3);
	border-block-end: var(--border-hairline-width) solid var(--border-hairline);
}

.data-row__label {
	font-size: var(--fs-body-small);
	color: var(--text-secondary);
}

.data-row__value {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--fs-ui-label);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-primary);
	text-align: end;
}

/* ---- logo-lockup ------------------------------------------------------- */
.logo-lockup {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	padding-inline-end: var(--space-3);
	font-family: var(--font-body);
	font-size: var(--fs-subheading);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--text-primary);
	text-decoration: none;
}

.logo-lockup__mark {
	display: block;
	height: 28px;
	width: auto;
}

/* The footer sits on Coal. The DNA ships one black lockup and mandates the
   white version on dark surfaces (Visual DNA §2); pure black inverted is
   pure white, so one uploaded file serves both surfaces. */
.is-style-surface-dark .logo-lockup__mark {
	filter: invert(1);
}

/* Interim webp signal marks ship on an opaque white ground; multiply drops
   that ground on light surfaces (see mostacho_signal_mark()). This rule was
   documented but never written in v1.1 — the white boxes showed. Vector
   masters from the media library carry real alpha and need no blend. */
.signal-mark {
	mix-blend-mode: multiply;
}

.signal-mark--vector {
	mix-blend-mode: normal;
}

/* =========================================================================
   ORGANISMS
   ========================================================================= */

/* ---- site-header ------------------------------------------------------- */
.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background-color: var(--surface-base);
	border-block-end: var(--border-hairline-width) solid var(--border-hairline);
}

/* Sticky elements are never stacked: the consent bar shows first, so the
   header releases its sticky position while the bar is up. */
body[data-consent="pending"] .site-header {
	position: static;
}

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

.site-header__actions {
	display: none;
}

.site-nav {
	display: none;
}

.site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	padding: 0;
	background: transparent;
	border: var(--border-hairline-width) solid var(--border-hairline);
	border-radius: var(--radius-card);
	color: var(--text-primary);
	cursor: pointer;
}

@media (min-width: 1024px) {
	.site-header__toggle {
		display: none;
	}

	.site-nav,
	.site-header__actions {
		display: flex;
		align-items: center;
		gap: var(--space-4);
	}

	.site-nav__list {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		margin: 0;
		padding: 0;
		list-style: none;
	}
}

.nav-item {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	font-family: var(--font-ui);
	font-size: var(--fs-ui-label);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--text-primary);
	text-decoration: none;
	border-block-end: 2px solid transparent;
}

.nav-item:hover {
	border-block-end-color: var(--action-bg);
}

/* Current page is never signalled by colour alone. */
.nav-item[aria-current="page"] {
	border-block-end-color: var(--text-primary);
}

/* ---- mobile drawer ----------------------------------------------------- */
.site-drawer {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: none;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-3);
	background-color: var(--core-coal);
	color: var(--core-chalk);
	overflow-y: auto;
}

.site-drawer[data-state="open"] {
	display: flex;
}

.site-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.site-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	background: transparent;
	border: var(--border-hairline-width) solid rgb(244 246 248 / 12%);
	border-radius: var(--radius-card);
	color: inherit;
	cursor: pointer;
}

.site-drawer__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-drawer .nav-item {
	min-height: var(--tap-min);
	width: 100%;
	font-size: var(--fs-subheading);
	color: var(--core-chalk);
	border-block-end: var(--border-hairline-width) solid rgb(244 246 248 / 12%);
}

.site-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-block-start: auto;
}

body[data-drawer="open"] {
	overflow: hidden;
}

/* ---- hero -------------------------------------------------------------- */
.hero {
	padding-block: var(--space-7) var(--space-6);
}

@media (min-width: 768px) {
	.hero {
		padding-block: var(--space-9);
	}
}

.hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	align-items: center;
}

@media (min-width: 1024px) {
	.hero__grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--space-7);
	}
}

.hero__title {
	max-width: 22ch;
}

.hero__subhead {
	max-width: 52ch;
	color: var(--text-secondary);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

/* ---- problem / fit / generic section head ------------------------------ */
.section-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: var(--measure-long-form);
}

.problem__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: var(--measure-long-form);
}

.problem__body p {
	max-width: 68ch;
}

/* ---- segment-band ------------------------------------------------------ */
.segment-band__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

@media (min-width: 768px) {
	.segment-band__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-4);
	}
}

@media (min-width: 1024px) {
	.segment-band__grid {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}

/* ---- fit --------------------------------------------------------------- */
.fit__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

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

.fit__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fit__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-1-5);
	padding-block: var(--space-2);
	border-block-end: var(--border-hairline-width) solid var(--border-hairline);
	font-size: var(--fs-body-small);
}

.fit__item .ui-icon {
	margin-block-start: 3px;
}

.fit__item--yes .ui-icon {
	color: var(--state-success);
}

.fit__item--no .ui-icon {
	color: var(--text-caption);
}

/* ---- receipts-block ---------------------------------------------------- */
.receipts__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

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

@media (min-width: 1024px) {
	.receipts__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---- final-cta-band ---------------------------------------------------- */
.final-cta {
	padding-block: var(--space-7);
}

@media (min-width: 768px) {
	.final-cta {
		padding-block: var(--space-9);
	}
}

.final-cta__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: var(--measure-long-form);
}

.final-cta__risk {
	color: var(--text-secondary);
	max-width: 62ch;
}

.final-cta__closer {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-block-start: var(--space-4);
	color: var(--text-secondary);
}

/* ---- site-footer ------------------------------------------------------- */
.site-footer {
	/*
	 * The trailing pad absorbs the fixed CTA bar. cta-bar.js publishes the
	 * measured height to --cta-bar-height and does not reset it, so the
	 * reserve is permanent once the bar exists. Keeping it on the Coal footer
	 * rather than on <body> means the reserved strip is the same colour as
	 * the footer instead of a pale gap below it.
	 */
	padding-block: var(--space-7) calc(var(--space-5) + var(--cta-bar-height));
}

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

@media (min-width: 768px) {
	.site-footer__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: var(--space-7);
	}
}

.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1024px) {
	.site-footer__nav {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.site-footer__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	font-size: var(--fs-body-small);
	color: var(--text-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	margin-block-start: var(--space-5);
	padding-block-start: var(--space-4);
	border-block-start: var(--border-hairline-width) solid var(--border-hairline);
	font-size: var(--fs-body-small);
	color: var(--text-secondary);
}

/* ---- cta-bar ----------------------------------------------------------- */
.cta-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3);
	background-color: var(--core-coal);
	color: var(--core-chalk);
	border-block-start: var(--border-hairline-width) solid rgb(244 246 248 / 12%);
	transform: translateY(100%);
	transition: transform var(--dur-ui) var(--ease-out);
}

/*
 * Narrow-screen exception, scoped to this component only.
 *
 * The bar carries microcopy AND the CTA. Below ~480px the full label plus the
 * microcopy cannot both fit, and the button ends up clipped by the body's
 * overflow-x. Inside the bar the sanctioned short label takes over earlier
 * than the global 360px breakpoint. Same label, same destination — only the
 * trigger width differs, and only here.
 */
@media (max-width: 479px) {
	.cta-bar .btn__label--full {
		display: none;
	}

	.cta-bar .btn__label--short {
		display: inline;
	}
}

.cta-bar .btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

.cta-bar[data-state="visible"] {
	transform: translateY(0);
}

.cta-bar__microcopy {
	/* Lets the microcopy shrink instead of shoving the button off-screen. */
	min-width: 0;
	font-size: var(--fs-body-small);
	color: rgb(244 246 248 / 72%);
}

@media (min-width: 768px) {
	.cta-bar {
		display: none;
	}
}

/* ---- cookie-consent-bar ------------------------------------------------ */
.cookie-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 120;
	display: none;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-3);
	background-color: var(--core-coal);
	color: var(--core-chalk);
	border-block-start: var(--border-hairline-width) solid rgb(244 246 248 / 12%);
}

.cookie-bar[data-state="visible"] {
	display: flex;
}

.cookie-bar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.cookie-bar .btn--secondary {
	color: var(--core-chalk);
	border-color: rgb(244 246 248 / 30%);
}

@media (min-width: 768px) {
	.cookie-bar {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		padding-inline: var(--space-4);
	}
}

/* -------------------------------------------------------------------------
   Mobile fold guard: an H1 line break is a desktop typographic choice, never
   a mobile one (role §13).
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	h1 br {
		display: none;
	}
}