/* ─── Design tokens ────────────────────────────────────── */

/* See .cursor/rules/design-system.mdc. Edit values here; consumers use var(). */

:root	{

	/* Surfaces */
	--color-ink-0: #050606;
	--color-ink-1: #0d0e0d;
	--color-ink-2: #1a1c1a;
	--color-rule: rgba(255, 255, 255, 0.08);
	--color-rule-strong: rgba(255, 255, 255, 0.16);

	/* Text */
	--color-paper: #FFFFFF;
	--color-paper-mute: rgba(255, 255, 255, 0.65);
	--color-paper-low: rgba(255, 255, 255, 0.4);
	--color-paper-quiet: rgba(255, 255, 255, 0.25);

	/* Brand */
	--color-brand: #f50c33;
	--color-brand-mute: rgba(245, 12, 51, 0.55);
	--color-brand-soft: rgba(245, 12, 51, 0.18);
	--color-brand-glow: rgba(245, 12, 51, 0.22);

	/* Accent */
	--color-accent: #4f46e5;
	--color-accent-bright: #6366f1;

	/* Class-type accents (timetable, what-we-offer) */
	--color-class-crossfit: #f50c33;
	--color-class-hyrox: #f5c518;
	--color-class-bodytone: #4ade80;
	--color-class-teens: #ff8c42;
	--color-class-open-gym: #ffffff;
	--color-class-tba: #b07cf5;

	/* Legacy aliases — prefer --color-* in new code */
	--ink-0: var(--color-ink-0);
	--ink-1: var(--color-ink-1);
	--ink-2: var(--color-ink-2);
	--rule: var(--color-rule);
	--rule-strong: var(--color-rule-strong);
	--paper: var(--color-paper);
	--paper-mute: var(--color-paper-mute);
	--paper-low: var(--color-paper-low);
	--paper-quiet: var(--color-paper-quiet);
	--brand-red: var(--color-brand);
	--brand-red-mute: var(--color-brand-mute);
	--brand-red-soft: var(--color-brand-soft);
	--brand-red-glow: var(--color-brand-glow);
	--accent-blue: var(--color-accent);
	--accent-blue-bright: var(--color-accent-bright);

	/* Content type scale (5 steps) */
	--fs-1: clamp(2.25rem, 4.5vw, 3.5rem);
	--fs-2: clamp(1.75rem, 3vw, 2.5rem);
	--fs-3: clamp(1.125rem, 1.75vw, 1.5625rem);
	--fs-4: 1rem;
	--fs-5: 0.875rem;
	--text-h1: var(--fs-1);
	--text-h2: var(--fs-2);
	--text-h3: var(--fs-3);
	--text-body: var(--fs-4);
	--text-small: var(--fs-5);

	/* Type stacks (interim) */
	--font-display: 'Helvetica Neue', 'Helvetica', 'Arial Black', system-ui, sans-serif;
	--font-text: 'Helvetica Neue', Helvetica, system-ui, sans-serif;
	--font-mono: ui-monospace, 'SF Mono', Menlo, 'Cascadia Mono', monospace;
	--track-display: -0.025em;
	--track-eyebrow: 0.18em;
	--track-mono: 0.12em;
	--shell-pad: 50px;
	--content-max: 1280px;
	--layout-wide: 1440px;
	--radius-sm: 2px;
	--radius-pill: 50px;
	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
	--dur-fast: 180ms;
	--dur-base: 240ms;
	--dur-slow: 360ms;
}

@media (max-width: 650px)					{

	:root											{	--shell-pad: 25px; }
}







/* ─── Base ─────────────────────────────────────────────── */

*, *::before, *::after						{	box-sizing: border-box; }
html, body										{	overflow-x: hidden; }

body												{	font-family: var(--font-text); font-size: var(--fs-4);
														line-height: 1.55;
														background-color: var(--color-ink-1);
														padding: var(--shell-pad);
														color: var(--color-paper);
}

.logo												{	max-width: 450px; width: 100%; }

h1													{	font-family: var(--font-display); font-size: var(--fs-1);
														line-height: 1.05; font-weight: 400;
														margin: 0 0 0.5em 0;
}

h2													{	font-size: var(--fs-2); line-height: 1.1; font-weight: 400;
														margin: 0 0 0.5em 0;
}

h2 a												{	color: var(--color-brand);
	&:active										{	color: var(--color-paper); }
	&:visited									{	color: var(--color-brand); }
}


h3													{	font-size: var(--fs-3); line-height: 1.2; font-weight: 400;
														margin: 0 0 0.5em 0;
}







/* ─── Buttons ──────────────────────────────────────────── */

.button											{	display: inline-block; padding: 0.75em 2em;
														border-radius: var(--radius-pill); background-color: var(--color-brand);
														color: var(--color-paper);
														text-decoration: none;
														transition: transform var(--dur-fast) ease-in-out;
	&:hover										{	transform: scale(1.05); }
	&:active										{	background-color: var(--color-paper); color: #000; }
}


.btn												{	display: inline-flex; align-items: center; justify-content: center;
														gap: 0.55em;
														padding: 0.85em 1.6em;
														min-height: 44px;
														border: 1px solid transparent; background: transparent;
														color: var(--color-paper); font-family: var(--font-display);
														font-size: 13px; font-weight: 700; letter-spacing: var(--track-eyebrow);
														text-transform: uppercase; text-decoration: none; line-height: 1;
														cursor: pointer;
														border-radius: var(--radius-pill);
														transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);

	/* Tactile press feedback — settles back on release. */
	&:active										{	transform: translateY(1px) scale(0.98); }

	@media screen and (max-width: 650px){	padding: 0.8em 1.3em; font-size: 12px; }
}

.btn--primary									{	background: var(--color-accent); border-color: var(--color-accent);
														color: var(--color-paper);
	&:hover										{	background: var(--color-accent-bright);
														border-color: var(--color-accent-bright);
	}
	&:focus-visible							{	outline: 2px solid var(--color-paper); outline-offset: 3px; }
}

.btn--ghost										{	background: transparent; border-color: var(--color-paper-quiet);
														color: var(--color-paper);
	&:hover										{	border-color: var(--color-paper); }
	&:focus-visible							{	outline: 2px solid var(--color-paper); outline-offset: 3px; }
}

.btn--red										{	background: var(--color-brand); border-color: var(--color-brand);
														color: var(--color-paper);
	&:hover										{	background: var(--color-paper); color: var(--color-ink-0); }
}
.btn--sm											{	padding: 0.7em 1.2em; min-height: 36px; font-size: 12px; }







/* ─── Layout & display utilities ───────────────────────── */

/* Compose in markup to avoid repeating flex/grid boilerplate. */

.u-container									{	width: 100%; max-width: var(--content-max); margin-inline: auto; }
.u-container--wide							{	max-width: 1280px; }
.u-container--narrow							{	max-width: 900px; }
.u-container--prose							{	max-width: 820px; }
.u-flex											{	display: flex; }
.u-flex-wrap									{	flex-wrap: wrap; }
.u-flex-col										{	flex-direction: column; }
.u-items-center								{	align-items: center; }
.u-justify-center								{	justify-content: center; }
.u-justify-between							{	justify-content: space-between; }
.u-grid											{	display: grid; }
.u-grid--2										{	grid-template-columns: repeat(2, 1fr); }
.u-grid--3										{	grid-template-columns: repeat(3, 1fr); }
.u-grid--4										{	grid-template-columns: repeat(4, 1fr); }
.u-grid--6										{	grid-template-columns: repeat(6, 1fr); }
.u-gap-xs										{	gap: 0.4em; }
.u-gap-sm										{	gap: 0.65em; }
.u-gap-md										{	gap: 1.25em; }
.u-gap-lg										{	gap: 2em; }
.u-gap-xl										{	gap: 2.5em; }
.u-cluster										{	display: flex; flex-wrap: wrap; gap: 0.65em; align-items: center; }
.u-list-reset									{	list-style: none; margin: 0; padding: 0; }
.u-pad											{	padding: 2.5em; }
.u-pad-sm										{	padding: 1.5em; }
.u-text-center									{	text-align: center; }
.u-mx-auto										{	margin-inline: auto; }
.u-max-ch										{	max-width: 50ch; }
.u-scroll-x										{	overflow-x: auto; -webkit-overflow-scrolling: touch; }

.full-bleed										{	width: 100vw;
														margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}







/* ─── CFU +++ accent (global) ──────────────────────────── */

.cfu-triple-plus								{	display: inline-flex; align-items: center;
														font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
														font-size: 20px; font-weight: 400; line-height: 1;
														letter-spacing: 0.02em;
														user-select: none;
}

.cfu-triple-plus-white						{	color: var(--color-paper); }

.cfu-triple-plus-accent						{	display: inline-block;
														color: var(--color-brand);
														transform-origin: 50% 52%;
														animation: cfu-triple-plus-spin 3s ease-in-out infinite;
}

@keyframes cfu-triple-plus-spin			{

	0%, 50%, 100%								{	transform: rotate(0deg); }
	60%											{	transform: rotate(360deg); }
}

.cfu-triple-plus--hero-tl					{	position: absolute; top: 0; left: var(--shell-pad); z-index: 4; }
.cfu-triple-plus--hero-br					{	position: absolute; right: 0.75em; bottom: 0.5em; z-index: 4; }

@media (prefers-reduced-motion: reduce){
	.cfu-triple-plus-accent					{	animation: none; }
}








/* ─── Shared brand CTA band ────────────────────────────── */

.cfu-cta-band									{	padding: clamp(4rem, 10vw, 7rem) var(--shell-pad);
														background: var(--color-brand);
														color: var(--color-ink-0); text-align: center;

	/* heading — the band's only h2 */
	h2												{	margin: 0 auto 0.5em;
														max-width: 18ch;
														font-family: var(--font-display); font-size: clamp(2rem, 5.5vw, 4rem);
														font-weight: 700; line-height: 0.95; letter-spacing: -0.02em;
														text-transform: none; color: var(--color-ink-0);
	}

	.cfu-cta-band__body						{	margin: 1em auto 2em;
														max-width: 48ch;
														font-size: var(--fs-4); line-height: 1.55; color: rgba(5, 6, 6, 0.82);
	}

	.cfu-cta-band__actions					{	display: flex; flex-wrap: wrap; gap: 0.65em; justify-content: center;
														margin: 0;
	}

	/* Light buttons on the brand-red surface */
	.btn--primary								{	background: var(--color-ink-0); border-color: var(--color-ink-0);
														color: var(--color-paper);
		&:hover									{	background: var(--color-paper); border-color: var(--color-paper);
														color: var(--color-ink-0);
		}
	}

	.btn--ghost									{	border-color: var(--color-ink-0);
														color: var(--color-ink-0);
		&:hover									{	background: var(--color-ink-0); color: var(--color-paper); }
	}

	&.cfu-cta-band--left						{	text-align: left;
		h2, .cfu-cta-band__body				{	margin-inline: 0; }
		.cfu-cta-band__actions				{	justify-content: flex-start; }
	}
}


/* ─── Shared breadcrumbs ───────────────────────────────── */

.cfu-breadcrumbs								{	font-family: var(--font-mono);

	ol											{	list-style: none; margin: 0; padding: 0;
													display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em;
	}

	li											{	display: inline-flex; align-items: center; gap: 0.5em;
													font-size: 11px; letter-spacing: var(--track-mono); text-transform: uppercase;
	}

	a											{	color: var(--color-paper-low); text-decoration: none;
													transition: color var(--dur-fast) var(--ease-out);
		&:hover									{	color: var(--color-paper); }
	}

	.cfu-breadcrumbs-sep						{	color: var(--color-paper-quiet); }

	[aria-current="page"]						{	color: var(--color-paper); }
}


/* ─── Shared offerings chooser ─────────────────────────── */

/* Editorial list of training options, used on the home page and the detail-page
   "more ways to train" block. Rows carry a .class-type-* accent token; children
   opt out at rest and inherit it on hover. Markup: core/includes/cfu-offerings.php */

.cfu-offerings									{	position: relative; isolation: isolate;
													padding: clamp(5em, 12vw, 9em) var(--shell-pad);
													background: var(--color-ink-1);

	> header									{	max-width: var(--layout-wide); margin: 0 auto 4em; }

	h2											{	margin: 0; max-width: 18ch;
													font-family: var(--font-display);
													font-size: clamp(2.25rem, 5.5vw, 5rem); font-weight: 500;
													line-height: 1; letter-spacing: var(--track-display);
													color: var(--color-paper);

		b										{	font-weight: inherit; color: var(--color-brand); }
	}

	.cfu-offerings-list						{	max-width: var(--layout-wide);
													margin: 0 auto; padding: 0;
													list-style: none;

		> li									{	border-top: 1px solid var(--color-rule);
			&:last-child					{	border-bottom: 1px solid var(--color-rule); }
		}

		a										{	position: relative; display: flex; align-items: center; gap: 2em;
													padding: 1.7em 0.5em 1.7em 0;
													text-decoration: none;
													transition: padding-left var(--dur-base) var(--ease-out);
			&::before						{	content: ""; position: absolute; inset: 0;
													background: linear-gradient(90deg, currentColor 0%, transparent 35%);
													opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
													pointer-events: none;
													z-index: 0;
			}
			> *								{	position: relative; z-index: 1; }

			/* num — leading mono index */
			> span:first-child			{	flex: 0 0 4em; align-self: start;
													padding-top: 0.4em;
													font-family: var(--font-mono); font-size: 13px;
													letter-spacing: var(--track-mono); color: var(--color-paper-low);
			}

			/* name + tagline group */
			> span:nth-child(2)			{	flex: 1 1 0; min-width: 0;
													display: flex; flex-direction: column; gap: 0.4em;
			}

			b									{	font-family: var(--font-display); font-size: clamp(2rem, 5.5vw, 4.5rem);
													font-weight: 600; line-height: 0.95; letter-spacing: -0.02em;
													color: var(--color-paper);
													transition: color var(--dur-base) var(--ease-out);
			}

			i									{	font-family: var(--font-mono); font-size: 11px; font-style: normal;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--color-paper-low);
			}

			/* copy */
			> p								{	flex: 1 1 0; min-width: 0; max-width: 38ch;
													margin: 0;
													font-size: var(--fs-4); line-height: 1.5;
													color: var(--color-paper-mute);
			}

			/* arrow */
			> span:last-child				{	flex: 0 0 auto; margin-left: auto;
													font-family: var(--font-display); font-size: 1.6em;
													color: var(--color-paper-low);
													transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
			}
			&:hover, &:focus-visible	{	padding-left: 1.5em; outline: none;
				&::before					{	opacity: 0.12; }
				b, > span:last-child		{	color: currentColor; }
				> span:last-child			{	transform: translateX(0.4em); }
			}
		}
	}

	@media (max-width: 1100px)			{
		.cfu-offerings-list a				{	gap: 1.5em;
			> span:first-child			{	flex: 0 0 3em; }
			> p								{	display: none; }
		}
	}

	@media (max-width: 700px)			{

		.cfu-offerings-list a				{	flex-wrap: wrap; gap: 0.5em 1em; padding: 1.5em 0;
			> span:first-child			{	flex: 0 0 auto; padding-top: 0; align-self: center; order: 1; }
			> span:last-child				{	flex: 0 0 auto; order: 2; }
			> span:nth-child(2)			{	flex: 1 1 100%; order: 3; }
			&:hover, &:focus-visible	{	padding-left: 0.75em; }
		}
	}
}









/* ─── Page hero display (plans, FAQ, timetable) ────────── */

/* Two-tone headline: plain <span> lines + a <b> accent line (brand red). */

.cfu-display-hero								{	margin: 0 0 0.5em;
														font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 5.5rem);
														font-weight: 500; line-height: 0.95; letter-spacing: var(--track-display);
	span, b										{	display: block; }
	b												{	font-weight: inherit; color: var(--color-brand); }
}


/* ─── Shared display type (editorial bands) ────────────── */

/* Two-tone display headline shared by What We Offer + Who We Are listing/detail
   pages. Accent <b> is brand red by default; sections that need a per-page
   accent keep a prefixed `.<x>-display b` override. Modifier sizes/margins that
   differ per section stay as prefixed overrides in the section CSS. */

.cfu-display									{	margin: 0;
													font-family: var(--font-display); font-weight: 500; line-height: 0.95;
													letter-spacing: var(--track-display);
	span, b										{	display: block; }
	b											{	color: var(--color-brand); }
	&.cfu-display--hero							{	font-size: clamp(2.75rem, 8vw, 6.5rem); margin-bottom: 0.55em; }
	&.cfu-display--statement					{	font-size: clamp(2.5rem, 7vw, 5.5rem); }
	&.cfu-display--section						{	font-size: clamp(2rem, 5vw, 3.75rem); max-width: 16ch; }
	&.cfu-display--on-brand						{	color: var(--color-ink-0); max-width: 18ch;
		b										{	color: var(--color-ink-0); }
	}
}








/* ─── Typography & surface utilities ───────────────────── */

/* Skip link — visually hidden until keyboard focus, then a mono pill top-left (a11y) */

.skip-link										{	position: fixed; top: 0.75em; left: 0.75em; z-index: 1000;
														padding: 0.65em 1.25em;
														background: var(--color-ink-0); border: 1px solid var(--color-rule-strong);
														border-radius: var(--radius-pill);
														font-family: var(--font-mono); font-size: var(--fs-5);
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-paper); text-decoration: none;
														opacity: 0; transform: translateY(-150%); pointer-events: none;
														transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
	&:focus										{	opacity: 1; transform: translateY(0); pointer-events: auto;
														outline: 2px solid var(--color-paper); outline-offset: 2px;
	}
}

/* Shared eyebrow/accent label (mono Swiss style — the design direction).
   One class for every section's kicker; sections may override locally
   (e.g. the hero pill via .home-hero .eyebrow). */

.eyebrow											{	display: inline-block;
														margin: 0 0 1.5em;
														font-family: var(--font-mono); font-size: 11px; font-weight: 500;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-brand);
}

/* Display-font eyebrow — page-scoped override used by the What We Offer /
   Who We Are editorial pages (display family, bold, eyebrow tracking). */

.eyebrow--display								{	margin: 0 0 1.25em;
													font-family: var(--font-display); font-weight: 700;
													letter-spacing: var(--track-eyebrow);
}

.u-lede											{	margin: 0 0 1.75em;
														max-width: 42ch;
														font-size: var(--fs-4); line-height: 1.55;
														color: var(--color-paper-mute);
}

.u-page-intro									{	max-width: 920px; margin-bottom: clamp(2.5rem, 5vw, 4rem);
 	h1												{	font-family: var(--font-display); letter-spacing: var(--track-display); }
 }

.u-section-label								{	margin: 0 0 1.5em;
														font-size: var(--fs-3); font-weight: 600; letter-spacing: 0.04em;
														text-transform: uppercase; color: var(--color-brand);
}

.u-link											{	color: var(--color-brand); text-decoration: none;
														transition: opacity var(--dur-fast) var(--ease-out);
	&:hover										{	opacity: 0.85; }
	&:visited									{	color: var(--color-brand); }
}
.u-surface										{	background: rgba(255, 255, 255, 0.03);
														border: 1px solid var(--color-rule); border-radius: var(--radius-sm);
}
.u-surface--brand								{	background: var(--color-brand-soft);
														border: 1px solid rgba(245, 12, 51, 0.22);
														border-radius: var(--radius-sm);
}
.u-card											{	position: relative;
														display: flex; flex-direction: column;
														padding: 2em 1.75em 1.75em;
														background: rgba(255, 255, 255, 0.03);
														border: 1px solid var(--color-rule); border-radius: var(--radius-sm);
														transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
	&:hover										{	transform: translateY(-3px); border-color: var(--color-rule-strong); }
}
.u-card--featured								{	background: var(--color-brand-soft);
														border-color: rgba(245, 12, 51, 0.4);
	&:hover										{	border-color: var(--color-brand); }
}








/* Mono em-dash point lists — site-wide detail typography */

.u-points, .u-bullets						{	list-style: none; margin: 0; padding: 0; }
.u-points li, .u-bullets li				{	position: relative;
														padding-left: 1.35em; margin-bottom: 0.4em;
														font-family: var(--font-mono); font-size: 11px; line-height: 1.45;
														letter-spacing: 0.02em; color: var(--color-paper-low);
}

.u-points li::before, .u-bullets li::before		{	content: "\2014"; position: absolute; left: 0; color: var(--color-brand); }
.u-points--on-brand li, .u-bullets--on-brand li	{	color: rgba(5, 6, 6, 0.72); }
.u-points--on-brand li::before, .u-bullets--on-brand li::before	{	color: var(--color-ink-0); }

.u-bullets										{	padding: 0 0 1.5em;
														border-bottom: 1px solid var(--color-rule);
														flex: 1;
}

.u-bullets li									{	padding-top: 0.5em; padding-bottom: 0.5em; }
.u-pill											{	display: inline-flex; align-items: center;
														padding: 0.5em 1em;
														border-radius: var(--radius-pill);
														background: rgba(255, 255, 255, 0.05);
														color: var(--color-paper-mute); font-size: var(--fs-5);
														font-weight: 600; letter-spacing: var(--track-eyebrow);
														text-transform: uppercase; text-decoration: none;
														transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
	&:hover										{	background: var(--color-brand); color: var(--color-paper); }
	&:visited									{	color: var(--color-paper-mute); }
}
















/* ─── Class type colour tokens ─────────────────────────── */

.class-type-crossfit							{	color: var(--color-class-crossfit); }
.class-type-hyrox								{	color: var(--color-class-hyrox); }
.class-type-bodytone							{	color: var(--color-class-bodytone); }
.class-type-crossfit-teens						{	color: var(--color-class-teens); }
.class-type-open-gym							{	color: var(--color-class-open-gym); }
.class-type-tba									{	color: var(--color-class-tba); }








/* ─── Nav ──────────────────────────────────────────────── */

.nav												{	display: flex; align-items: center; flex-wrap: wrap;
														gap: clamp(1em, 2vw, 4em);
														margin-bottom: 3em;

	/* Logo scales fluidly with the viewport — sized off vw, not the
	   container, so flex shrinkage can never collapse it. ~8:1 lockup;
	   400px wide ≈ 50px tall. NOTE: the one-line budget just fits seven
	   links at 1201px — if the Who We Are link returns, raise the burger
	   cutoff (here, .cfu-menu and core/js/nav.js) to ~1300px. */
	.nav-logo									{	display: inline-flex; flex-shrink: 0;

		img										{	width: clamp(200px, 20vw, 400px); height: auto; display: block; }
	}

	/* With JS everything holds one line — the burger takes over (below)
	   before anything would wrap. Without JS, wrapping stays the fallback. */
	html.js &									{	flex-wrap: nowrap;

		.nav-links								{	flex-wrap: nowrap; }
	}

	.nav-links									{	list-style: none;
														margin: 0 auto 0 0; padding: 0;
														display: flex; align-items: center; flex-wrap: wrap;
														gap: clamp(0.75em, 1.6vw, 2.5em);

		> li										{	display: inline-flex; }

		a											{	position: relative; white-space: nowrap;
														color: var(--color-paper); text-decoration: none;
														font-size: clamp(11px, 0.9vw, 13px);
														font-weight: 500; letter-spacing: var(--track-eyebrow);
														text-transform: uppercase;
														transition: color var(--dur-fast) var(--ease-out);

			/* Brand-red rule draws in from the left on hover. */
			&::after								{	content: ""; position: absolute; left: 0; right: 0; bottom: -0.55em;
														height: 1px; background: var(--color-brand);
														transform: scaleX(0); transform-origin: left;
														transition: transform var(--dur-base) var(--ease-out);
			}
			&:hover::after, &:focus-visible::after	{	transform: scaleX(1); }
			&:visited							{	color: var(--color-paper); }
			&[aria-current="page"]			{	color: var(--color-brand);
				&::after							{	content: none; }
			}
		}
	}

	.nav-actions								{	display: inline-flex; gap: 0.65em; align-items: center;
														flex-shrink: 0;
	}

	/* Burger — circled hairline pair, echoes the wizard close button.
	   Hidden at desktop and without JS (the wrapped links remain the
	   no-JS fallback); shown ≤1200px by the html.js block below. */
	.nav-toggle									{	display: none; position: relative; flex-shrink: 0;
														width: 44px; height: 44px; padding: 0;
														background: none; border: 1px solid var(--color-rule-strong);
														border-radius: var(--radius-pill);
														color: var(--color-paper); cursor: pointer;
														transition: border-color var(--dur-fast) var(--ease-out);

		span										{	position: absolute; left: 50%; top: 50%;
														width: 16px; height: 1px; background: currentColor;
														transition: transform var(--dur-base) var(--ease-out);
		}
		span:first-child						{	transform: translate(-50%, calc(-50% - 3px)); }
		span:last-child							{	transform: translate(-50%, calc(-50% + 3px)); }

		&:hover, &:focus-visible			{	border-color: var(--color-paper); }
		&[aria-expanded="true"]				{
			span:first-child					{	transform: translate(-50%, -50%) rotate(45deg); }
			span:last-child						{	transform: translate(-50%, -50%) rotate(-45deg); }
		}
	}

	/* With JS, the inline links + actions give way to the burger ≤1200px
	   (the in-between range where one line can't hold everything);
	   logo left, burger right. Without JS the links keep wrapping
	   (fallback below). */
	@media screen and (max-width: 1200px)	{

		html.js &								{	gap: 1.5em; justify-content: space-between; margin-bottom: 2em;

			.nav-links, .nav-actions			{	display: none; }
			.nav-toggle							{	display: inline-flex; }
		}
	}

	/* No-JS fallback only — fluid logo + wrapped links. */
	@media screen and (max-width: 650px)		{	margin-bottom: 2em; gap: 1em;

		.nav-links								{	width: 100%; margin: 0;	gap: 1em;
			a										{	font-size: 12px; }
		}
		.nav-actions							{	width: 100%; }
	}
}

/* ─── Fullscreen mobile menu ───────────────────────────── */

/* Swiss take on the burger menu — full-viewport ink-0 sheet that wipes
   down via clip-path, hairline-ruled link rows (the .cfu-offerings row
   grammar: mono index + display label), CTAs at the bottom. Toggled by
   .nav-toggle (core/js/nav.js); desktop and no-JS never see it. */

.cfu-menu											{	position: fixed; inset: 0; z-index: 900;
														display: flex; flex-direction: column;
														padding: var(--shell-pad) var(--shell-pad) 2em;
														background: var(--color-ink-0);
														visibility: hidden;
														clip-path: inset(0 0 100% 0);
														transition: clip-path 420ms var(--ease-out), visibility 0s linear 420ms;

	/* Subtle Swiss column hairlines, same device as the home hero. */
	&::before									{	content: ""; position: absolute; inset: 0;
														background-image: linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
														background-size: calc(100% / 4) 100%;
														pointer-events: none;
	}

	> *											{	position: relative; }

	&.is-open									{	visibility: visible; clip-path: inset(0 0 0 0);
														transition: clip-path 480ms var(--ease-out);
	}

	.cfu-menu-head								{	display: flex; align-items: center; justify-content: space-between;
														min-height: 44px; margin-bottom: 1em;
	}

	.cfu-menu-kicker							{	font-family: var(--font-mono); font-size: 11px;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-brand);
	}

	/* Rotated + close — same control as the wizard's. */
	.cfu-menu-close								{	display: inline-flex; align-items: center; justify-content: center;
														width: 44px; height: 44px; padding: 0;
														background: none; border: 1px solid var(--color-rule-strong);
														border-radius: var(--radius-pill);
														color: var(--color-paper-mute); font-size: 21px; line-height: 1;
														cursor: pointer;
														transform: rotate(45deg);
														transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
		&:hover, &:focus-visible			{	color: var(--color-paper); border-color: var(--color-paper);
														transform: rotate(135deg);
		}
	}

	> nav										{	flex: 1 1 auto; display: flex; min-height: 0; }

	.cfu-menu-links								{	list-style: none; width: 100%; margin: auto 0; padding: 0;
														overflow-y: auto;

		> li										{	border-top: 1px solid var(--color-rule);
			&:last-child						{	border-bottom: 1px solid var(--color-rule); }
		}

		a											{	display: flex; align-items: baseline; gap: 1.1em;
														padding: 0.5em 0.25em 0.55em 0;
														text-decoration: none;
														transition: padding-left var(--dur-base) var(--ease-out);

			i										{	flex: 0 0 2em;
														font-family: var(--font-mono); font-size: 11px; font-style: normal;
														letter-spacing: var(--track-mono);
														color: var(--color-brand);
			}

			b										{	font-family: var(--font-display);
														font-size: clamp(1.85rem, 7.5vw, 2.9rem);
														font-weight: 500; line-height: 1.15;
														letter-spacing: var(--track-display);
														color: var(--color-paper);
														transition: color var(--dur-fast) var(--ease-out);
			}

			&:hover, &:focus-visible			{	padding-left: 0.4em; outline: none;
				b									{	color: var(--color-brand); }
			}
			&[aria-current="page"] b			{	color: var(--color-brand); }
		}
	}

	.cfu-menu-actions							{	display: flex; flex-direction: column; gap: 0.65em;
														margin-top: 1.75em;

		.btn										{	width: 100%; }
	}

	/* Rows + CTAs cascade up once the sheet has wiped in; collapse back
	   quickly (no stagger) on close. */
	.cfu-menu-links > li,
	.cfu-menu-actions							{	opacity: 0; translate: 0 16px;
														transition: opacity 160ms var(--ease-out), translate 160ms var(--ease-out);
	}

	&.is-open .cfu-menu-links > li,
	&.is-open .cfu-menu-actions				{	opacity: 1; translate: 0 0;
														transition: opacity 360ms var(--ease-out) calc(140ms + 45ms * var(--i, 0)), translate 360ms var(--ease-out) calc(140ms + 45ms * var(--i, 0));
	}
}

/* Menu is burger-with-JS only (≤1200px). */
html:not(.js) .cfu-menu,
html:not(.js) .nav .nav-toggle				{	display: none; }

@media screen and (min-width: 1201px)	{
	.cfu-menu										{	display: none; }
}

/* Scroll lock while the menu is open (same device as the wizard). */
body:has(.cfu-menu.is-open)					{	overflow: hidden; }









/* ─── Footer ───────────────────────────────────────────── */

.footer											{	margin-top: 5em; padding-top: 3em;
														border-top: 1px solid rgba(255, 255, 255, 0.1);
														color: rgba(255, 255, 255, 0.85);

	/* Asymmetric column band — genuine 2-axis, stays grid */
	.footer-inner								{	display: grid; grid-template-columns: 1.1fr 1fr 1.4fr 1fr; gap: 2.5em;
														align-items: start;
	}

	.footer-brand								{
		/* Wordmark is ~8:1 — max-width keeps it inside narrow viewports
		   (height re-scales proportionally per the replaced-element
		   constraint rules). */
		img										{	height: 60px; width: auto; max-width: 100%; display: block; margin-bottom: 1em; }
		p											{	font-size: var(--fs-5); line-height: 1.55;
														opacity: 0.7; margin: 0; max-width: 18em;
		}
	}

	.footer-col									{

		h3											{	font-size: var(--fs-5); font-weight: 600; letter-spacing: 0.15em; line-height: 1;
														text-transform: uppercase; color: var(--color-brand);
														margin: 0 0 1em 0;
		}

		ul											{	list-style: none; margin: 0; padding: 0; }
		li											{	margin-bottom: 0.6em; }
		a											{	color: rgba(255, 255, 255, 0.85); text-decoration: none;
														font-size: var(--fs-4); line-height: 1.5;
														transition: color 200ms ease-in-out;
			&:hover								{	color: var(--color-brand); }
			&:visited							{	color: rgba(255, 255, 255, 0.85); }
		}

		p											{	font-size: var(--fs-4); line-height: 1.5; margin: 0 0 0.6em 0; }
		.footer-social							{	display: flex; gap: 1em; flex-wrap: wrap; margin-top: 0.75em; }
	}

	.footer-bottom								{	margin-top: 3em; padding: 1.5em 0;
														border-top: 1px solid rgba(255, 255, 255, 0.08);
														display: flex; justify-content: space-between; align-items: center;
														gap: 1em; flex-wrap: wrap;

		p											{	margin: 0; font-size: var(--fs-5); opacity: 0.55; }
	}

	@media screen and (max-width: 900px){
		.footer-inner							{	grid-template-columns: 1fr 1fr; gap: 2em; }
		.footer-brand							{	grid-column: 1 / -1; }
	}

	@media screen and (max-width: 650px){	margin-top: 3em; padding-top: 2em;
		.footer-inner							{	grid-template-columns: 1fr; gap: 2em; }
		.footer-brand							{	grid-column: auto;
			img									{	height: 50px; max-width: 100%; }
		}
		.footer-bottom							{	margin-top: 2em; }
	}
}








/* ─── Motion layer ─────────────────────────────────────── */

/* Site-wide motion system — calm, deliberate, instrument-like (see
   design-system.mdc § Motion). Three pieces:
   1. Cross-document view transitions (pure CSS, progressive).
   2. Scroll-progress hairline (pure CSS scroll timeline, progressive).
   3. Scroll-reveal — data-reveal / data-reveal-stagger, driven by
      core/js/motion.js. Content stays visible without JS (html.js gate)
      and under prefers-reduced-motion. */

/* 1. Same-origin page navigations cross-fade instead of hard-cutting.
      Browsers without support fall back to a normal jump. */

@view-transition									{	navigation: auto; }

::view-transition-old(root)					{	animation-duration: 160ms; }
::view-transition-new(root)					{	animation-duration: 240ms; }

/* Smooth in-page anchor scrolling (plans jump nav, FAQ, #coaches links).
   interpolate-size lets height-to-auto transitions animate (FAQ accordion). */
html												{	scroll-behavior: smooth; interpolate-size: allow-keywords; }

/* 2. Scroll-progress hairline — brand-red instrument line across the very
      top of the viewport, driven by a CSS scroll timeline. Hidden entirely
      where scroll-driven animations aren't supported. */

.cfu-scroll-progress							{	position: fixed; top: 0; left: 0; z-index: 1000;
														width: 100%; height: 2px;
														background: var(--color-brand);
														transform: scaleX(0); transform-origin: 0 50%;
														pointer-events: none;
														display: none;
}

@supports (animation-timeline: scroll())	{
	.cfu-scroll-progress						{	display: block;
														animation: cfu-scroll-progress linear both;
														animation-timeline: scroll(root);
	}
}

@keyframes cfu-scroll-progress				{
	from											{	transform: scaleX(0); }
	to												{	transform: scaleX(1); }
}

/* 3. Scroll-reveal. Max 16px travel, 400ms — entrances, not theatre.
      `translate` (not `transform`) so section transforms stay untouched.
      Stagger containers get children decorated + delayed by motion.js via
      --reveal-delay. */

html.js [data-reveal]						{	opacity: 0; translate: 0 16px;
														transition: opacity 400ms var(--ease-out) var(--reveal-delay, 0ms), translate 400ms var(--ease-out) var(--reveal-delay, 0ms);
}

html.js [data-reveal].is-inview			{	opacity: 1; translate: 0 0; }

/* ─── Schematics (gym hardware as line art) ─────────────── */

/* Engineering-drawing accents rendered by cfu_schematic() in helpers.php.
   Decorative only (aria-hidden, no pointer events). Colour via currentColor
   so placement CSS just sets `color`. Pair with data-reveal (reveal => true)
   to get the stroke draw-in below. */

.cfu-schematic									{	display: block; color: var(--color-paper-quiet);
														user-select: none; pointer-events: none;

	svg											{	display: block; width: 100%; height: auto; overflow: visible; }

	text											{	font-family: var(--font-mono); font-size: 9px;
														letter-spacing: 0.12em; text-transform: uppercase;
														fill: currentColor; stroke: none; opacity: 0.7;
	}

	.cfu-schematic-quiet						{	opacity: 0.35; }
	.cfu-schematic-accent					{	stroke: var(--color-brand); }
}

/* Scroll parallax for schematic accents — pure CSS scroll-driven (view
   timeline), so it costs nothing and degrades to static. Animates transform
   only; the reveal system owns `translate`, so the two compose. */

@supports (animation-timeline: view())	{

	@media (prefers-reduced-motion: no-preference)	{

		.cfu-parallax							{	animation: cfu-parallax linear both;
														animation-timeline: view();
		}
	}
}

@keyframes cfu-parallax						{
	from											{	transform: translateY(var(--parallax-range, 55px)); }
	to												{	transform: translateY(calc(-1 * var(--parallax-range, 55px))); }
}

/* Dial ring (ticks + brand arc) rotates slowly — instrument, not theatre. */
.cfu-schematic-rotor							{	transform-box: view-box; transform-origin: 50% 50%;
														animation: cfu-rotor-spin 45s linear infinite;
}

@keyframes cfu-rotor-spin					{
	to												{	transform: rotate(360deg); }
}

/* Stroke draw-in — every shape carries pathLength="1", so dasharray math is
   trivial. Runs when the schematic's own data-reveal goes .is-inview. */

html.js .cfu-schematic[data-reveal] :is(circle, line, rect, path, polyline)	{
														stroke-dasharray: 1; stroke-dashoffset: 1;
														transition: stroke-dashoffset 1400ms var(--ease-out) 150ms;
}

html.js .cfu-schematic[data-reveal].is-inview :is(circle, line, rect, path, polyline)	{
														stroke-dashoffset: 0;
}

/* 3D hologram plate — onion-skin layer stack tilted and spun with CSS 3D
   transforms (translateZ per layer builds the extrusion; no WebGL). */

.cfu-schematic--holo							{	perspective: 900px; }

.cfu-holo										{	position: relative; display: block; aspect-ratio: 1 / 1;
														transform-style: preserve-3d;
														transform: rotateX(58deg) rotateZ(20deg);
														animation: cfu-holo-spin 36s linear infinite;

	> *											{	position: absolute; inset: 0;
														transform: translateZ(calc(var(--z, 0) * -6px));
														opacity: calc(1 - var(--z, 0) * 0.13);
	}
}

@keyframes cfu-holo-spin						{
	from											{	transform: rotateX(58deg) rotateZ(0deg); }
	to												{	transform: rotateX(58deg) rotateZ(360deg); }
}








/* ─── Data ticker ──────────────────────────────────────── */

/* Slow full-bleed marquee of mono data strings (markup:
   core/includes/cfu-ticker.php — two identical lists; -50% loop is seamless).
   Decorative (aria-hidden). Pauses on hover; static under reduced motion. */

.cfu-ticker										{	overflow: hidden;
														border-top: 1px solid var(--color-rule);
														border-bottom: 1px solid var(--color-rule);
														background: var(--color-ink-0);

	.cfu-ticker-track							{	display: flex; width: max-content;
														animation: cfu-ticker-scroll 56s linear infinite;
	}

	&:hover .cfu-ticker-track				{	animation-play-state: paused; }

	ul												{	flex: 0 0 auto;
														display: flex; align-items: center; gap: 3.5em;
														margin: 0; padding: 1.1em 0 1.1em 3.5em; list-style: none;
	}

	li												{	display: inline-flex; align-items: center; gap: 3.5em;
														font-family: var(--font-mono); font-size: 11px;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-paper-low); white-space: nowrap;

		&::after									{	content: "+"; color: var(--color-brand); }
	}
}

@keyframes cfu-ticker-scroll					{
	to												{	transform: translateX(-50%); }
}








/* ─── Sign-up wizard ───────────────────────────────────── */

/* "Find your plan" modal — markup core/includes/cfu-signup-wizard.php
   (rendered by footer.php), logic core/js/signup-wizard.js, decision tree
   app/plans/data/wizard.json. Native <dialog>: open/close animates via
   @starting-style + transition-behavior where supported, hard-cuts
   elsewhere. Steps slide between each other; option rows cascade in. */

.cfu-wizard										{	width: min(680px, calc(100% - 2 * var(--shell-pad)));
														max-height: calc(100dvh - 2 * var(--shell-pad));
														margin: auto; padding: 0;
														border: 0; background: transparent; color: var(--color-paper);
														opacity: 0; translate: 0 18px; scale: 0.985;
														transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-out), display var(--dur-base) allow-discrete, overlay var(--dur-base) allow-discrete;

	&[open]										{	opacity: 1; translate: 0 0; scale: 1;

		@starting-style							{	opacity: 0; translate: 0 18px; scale: 0.985; }
	}

	&::backdrop									{	background: rgba(5, 6, 6, 0.55);
														transition: background var(--dur-base) var(--ease-out), display var(--dur-base) allow-discrete, overlay var(--dur-base) allow-discrete;
	}

	&[open]::backdrop							{	background: rgba(5, 6, 6, 0.82);

		@starting-style							{	background: rgba(5, 6, 6, 0); }
	}

	.cfu-wizard-frame							{	position: relative;
														display: flex; flex-direction: column;
														max-height: calc(100dvh - 2 * var(--shell-pad));
														padding: clamp(1.5em, 4vw, 2.5em);
														background: var(--color-ink-0);
														border: 1px solid var(--color-rule-strong);
	}

	/* Registration marks — framing, not decoration */
	.cfu-wizard-mark							{	position: absolute;
														font-family: var(--font-mono); font-size: 14px; line-height: 1;
														color: var(--color-paper-quiet); user-select: none;
	}
	.cfu-wizard-mark--tl						{	top: 0.5em; left: 0.6em; }
	.cfu-wizard-mark--br						{	bottom: 0.5em; right: 0.6em; }

	/* Top rail — kicker / step counter / close */
	.cfu-wizard-top							{	display: flex; align-items: center; gap: 1.5em;
														padding-bottom: 1.25em; margin-bottom: 1.75em;
														border-bottom: 1px solid var(--color-rule);
	}

	.cfu-wizard-kicker						{	font-family: var(--font-mono); font-size: 11px; font-weight: 500;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-brand);
	}

	.cfu-wizard-counter						{	margin-left: auto;
														font-family: var(--font-mono); font-size: 11px;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-paper-low);
	}

	.cfu-wizard-close							{	display: inline-flex; align-items: center; justify-content: center;
														width: 34px; height: 34px; padding: 0;
														background: none; border: 1px solid var(--color-rule-strong);
														border-radius: var(--radius-pill);
														color: var(--color-paper-mute); font-size: 19px; line-height: 1;
														cursor: pointer;
														transform: rotate(45deg);
														transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
		&:hover, &:focus-visible			{	color: var(--color-paper); border-color: var(--color-paper);
														transform: rotate(135deg);
		}
	}

	/* Stage — one step visible at a time, scrolls when tall */
	.cfu-wizard-stage							{	flex: 1 1 auto; min-height: 0; overflow-y: auto;
														scrollbar-width: thin;
	}

	.cfu-wizard-step							{	outline: none;
														animation: cfu-wizard-in 300ms var(--ease-out) both;
	}
	.cfu-wizard-step--back					{	animation-name: cfu-wizard-in-back; }
	.cfu-wizard-step.is-exit				{	animation: cfu-wizard-out 150ms var(--ease-out) both; }
	.cfu-wizard-step.is-exit--back			{	animation-name: cfu-wizard-out-back; }

	.cfu-wizard-eyebrow						{	display: block; margin: 0 0 1em;
														font-family: var(--font-mono); font-size: 11px; font-weight: 500;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-brand);
	}

	.cfu-wizard-heading						{	margin: 0;
														font-family: var(--font-display);
														font-size: clamp(1.75rem, 4.5vw, 2.6rem); font-weight: 500;
														line-height: 1; letter-spacing: var(--track-display);

		b											{	font-weight: inherit; color: var(--color-brand); }
	}

	.cfu-wizard-note							{	margin: 0.9em 0 0; max-width: 46ch;
														font-size: var(--fs-5); line-height: 1.55;
														color: var(--color-paper-mute);
	}

	/* Option rows — type-led, hairline-separated, cascading entrance */
	.cfu-wizard-options						{	list-style: none; margin: 1.75em 0 0; padding: 0;

		> li										{	border-top: 1px solid var(--color-rule);
														opacity: 0;
														animation: cfu-wizard-in 360ms var(--ease-out) forwards;
														animation-delay: calc(50ms * var(--i, 0) + 80ms);
			&:last-child						{	border-bottom: 1px solid var(--color-rule); }
		}
	}

	.cfu-wizard-option						{	display: flex; align-items: center; gap: 1.25em;
														width: 100%; padding: 1.05em 0.25em;
														background: none; border: 0; color: inherit;
														font: inherit; text-align: left; cursor: pointer;
														transition: padding-left var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);

		.cfu-wizard-option-num				{	flex: 0 0 auto;
														font-family: var(--font-mono); font-size: 11px;
														letter-spacing: var(--track-mono); color: var(--color-paper-low);
		}

		.cfu-wizard-option-body				{	flex: 1 1 0; min-width: 0;
														display: flex; flex-direction: column; gap: 0.25em;

			b										{	font-family: var(--font-display);
														font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 600;
														line-height: 1.1; letter-spacing: -0.01em;
														transition: color var(--dur-fast) var(--ease-out);
			}

			i										{	font-size: var(--fs-5); font-style: normal; line-height: 1.45;
														color: var(--color-paper-mute);
			}
		}

		.cfu-wizard-option-arrow				{	flex: 0 0 auto;
														font-family: var(--font-display); font-size: 1.2em;
														color: var(--color-paper-low);
														transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
		}

		&:hover, &:focus-visible			{	padding-left: 0.85em; outline: none;
														background: linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 65%);

			.cfu-wizard-option-body b		{	color: var(--color-brand); }
			.cfu-wizard-option-arrow		{	color: var(--color-brand); transform: translateX(0.35em); }
		}
	}

	.cfu-wizard-option-badge				{	display: inline-block; margin-left: 0.85em;
														padding: 0.3em 0.8em; vertical-align: middle;
														border-radius: var(--radius-pill); background: var(--color-brand);
														font-family: var(--font-mono); font-size: 9px; font-weight: 500;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-paper);
	}

	/* Drop-in fast lane — quiet utility row (accent-blue, like the plans
	   page drop-in callout) */
	.cfu-wizard-dropin						{	display: flex; align-items: baseline; gap: 0.85em;
														width: 100%; margin-top: 1.5em; padding: 1em 0.25em 0;
														background: none; border: 0; border-top: 1px dashed var(--color-rule-strong);
														font: inherit; text-align: left; cursor: pointer; color: inherit;

		> span:first-child					{	font-family: var(--font-mono); font-size: 11px;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-paper-low);
		}

		b											{	font-family: var(--font-display); font-size: var(--fs-4);
														font-weight: 600; letter-spacing: -0.01em;
														color: var(--color-paper);
														transition: color var(--dur-fast) var(--ease-out);
		}

		.cfu-wizard-option-arrow				{	margin-left: auto; font-size: 1em; }

		&:hover, &:focus-visible			{	outline: none;
			b										{	color: var(--color-accent-bright); }
			.cfu-wizard-option-arrow		{	color: var(--color-accent-bright); transform: translateX(0.35em); }
		}
	}

	/* Result card */
	.cfu-wizard-card							{	margin-top: 1.5em; padding: 1.6em 1.5em 1.5em;
														background: var(--color-ink-1);
														border: 1px solid var(--color-rule);
														border-top: 3px solid var(--color-brand);
	}

	.cfu-wizard-card-badge					{	display: inline-block; margin-bottom: 1em;
														padding: 0.3em 0.8em;
														border-radius: var(--radius-pill); background: var(--color-brand);
														font-family: var(--font-mono); font-size: 9px; font-weight: 500;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-paper);
	}

	.cfu-wizard-card-name					{	margin: 0;
														font-family: var(--font-display);
														font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600;
														line-height: 1.05; letter-spacing: -0.01em;
	}

	.cfu-wizard-card-price					{	display: flex; align-items: baseline; gap: 0.1em;
														margin: 0.5em 0 0;

		.cfu-wizard-card-currency,
		.cfu-wizard-card-cents				{	font-family: var(--font-display); font-size: 1.1rem;
														font-weight: 500; color: var(--color-paper-mute);
		}

		.cfu-wizard-card-dollars				{	font-family: var(--font-display);
														font-size: clamp(2.4rem, 5vw, 3.25rem); font-weight: 700;
														line-height: 1; letter-spacing: -0.04em;
		}

		.cfu-wizard-card-unit					{	margin-left: 0.75em;
														font-family: var(--font-mono); font-size: 11px;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-paper-low);
		}
	}

	.cfu-wizard-card-tagline				{	margin: 0.75em 0 0; max-width: 46ch;
														font-size: var(--fs-5); line-height: 1.55;
														color: var(--color-paper-mute);
	}

	.cfu-wizard-card-points					{	margin-top: 1.1em; }

	.cfu-wizard-card-note					{	margin: 1.25em 0 0; padding: 0.85em 1em;
														border-left: 2px solid var(--color-rule-strong);
														background: rgba(255, 255, 255, 0.03);
														font-size: var(--fs-5); line-height: 1.55;
														color: var(--color-paper-mute);
	}

	.cfu-wizard-card-note--newcomer		{	border-left-color: var(--color-brand);
														background: rgba(245, 12, 51, 0.07);
	}

	.cfu-wizard-actions						{	display: flex; flex-wrap: wrap; gap: 0.65em;
														margin: 1.75em 0 0;
	}

	/* Lead-capture form */
	.cfu-wizard-form							{	display: grid; grid-template-columns: 1fr 1fr;
														gap: 1.1em 1.25em;
														margin-top: 1.75em;

		.cfu-wizard-actions,
		.cfu-wizard-error						{	grid-column: 1 / -1; margin-top: 0; }
	}

	.cfu-wizard-field							{	display: flex; flex-direction: column; gap: 0.45em;

		> span									{	font-family: var(--font-mono); font-size: 11px;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-paper-low);
		}

		input, select							{	padding: 0.75em 0.9em;
														background: var(--color-ink-1);
														border: 1px solid var(--color-rule-strong);
														border-radius: var(--radius-sm);
														color: var(--color-paper); font: inherit;
														transition: border-color var(--dur-fast) var(--ease-out);
			&:focus								{	outline: none; border-color: var(--color-paper); }
		}
	}

	.cfu-wizard-hp								{	position: absolute; left: -10000px; top: auto;
														width: 1px; height: 1px; overflow: hidden;
	}

	.cfu-wizard-error							{	margin: 0; font-size: var(--fs-5); color: var(--color-brand); }

	/* Bottom rail — back / compare-all */
	.cfu-wizard-foot							{	display: flex; align-items: center; justify-content: space-between;
														gap: 1.5em;
														padding-top: 1.25em; margin-top: 1.75em;
														border-top: 1px solid var(--color-rule);
	}

	.cfu-wizard-back							{	padding: 0; background: none; border: 0; cursor: pointer;
														font-family: var(--font-mono); font-size: 11px;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-paper-low);
														transition: color var(--dur-fast) var(--ease-out);
		&:hover, &:focus-visible			{	color: var(--color-paper); outline: none; }
	}

	.cfu-wizard-all							{	margin-left: auto;
														font-family: var(--font-mono); font-size: 11px;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-paper-low); text-decoration: none;
														transition: color var(--dur-fast) var(--ease-out);
		&:hover, &:focus-visible			{	color: var(--color-paper); }
	}

	@media (max-width: 650px)				{

		.cfu-wizard-frame						{	padding: 1.4em 1.25em; }
		.cfu-wizard-form						{	grid-template-columns: 1fr; }
		.cfu-wizard-option					{	gap: 0.85em; }
		.cfu-wizard-dropin					{	flex-wrap: wrap; }
	}
}

/* Lock page scroll behind the open modal */
body:has(.cfu-wizard[open])					{	overflow: hidden; }

@keyframes cfu-wizard-in						{
	from											{	opacity: 0; translate: 0 14px; }
	to												{	opacity: 1; translate: 0 0; }
}

@keyframes cfu-wizard-in-back				{
	from											{	opacity: 0; translate: 0 -14px; }
	to												{	opacity: 1; translate: 0 0; }
}

@keyframes cfu-wizard-out					{
	to												{	opacity: 0; translate: 0 -10px; }
}

@keyframes cfu-wizard-out-back				{
	to												{	opacity: 0; translate: 0 10px; }
}








@media (prefers-reduced-motion: reduce)	{

	html											{	scroll-behavior: auto; }

	html.js [data-reveal]					{	opacity: 1; translate: none; transition: none; }

	html.js .cfu-schematic[data-reveal] :is(circle, line, rect, path, polyline)	{
													stroke-dashoffset: 0; transition: none;
	}

	.cfu-schematic-rotor,
	.cfu-holo,
	.cfu-ticker .cfu-ticker-track			{	animation: none; }

	.cfu-wizard,
	.cfu-wizard::backdrop					{	transition: none; }

	.cfu-wizard .cfu-wizard-step,
	.cfu-wizard .cfu-wizard-options > li	{	animation: none; opacity: 1; translate: none; }

	.cfu-wizard .cfu-wizard-close			{	transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }

	.cfu-menu, .cfu-menu.is-open,
	.cfu-menu.is-open .cfu-menu-links > li,
	.cfu-menu.is-open .cfu-menu-actions,
	.cfu-menu .cfu-menu-links > li,
	.cfu-menu .cfu-menu-actions				{	transition: none; }

	.cfu-menu .cfu-menu-close				{	transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }

	.cfu-scroll-progress						{	display: none; }

	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*)				{	animation: none !important; }
}