/* ─── Start — persona conversion pages ─────────────────── */

/* Shared template for the persona landing pages at /start/<slug>. One layout,
   one dataset per persona. Editorial full-bleed bands in the house language;
   leans on .cfu-display, .eyebrow, .u-points, .btn and the shared CTA band.
   Per-persona accent is set on the .start-p--<accent> shell via --p-accent
   (mapped to a --color-class-* token, same idea as .wwo-d--<type>). */


/* ─── Page shell + per-persona accent ────────────────────── */

.start-p										{	margin: 0 calc(-1 * var(--shell-pad)) 0;
													--p-accent: var(--color-brand);

	&.start-p--crossfit							{	--p-accent: var(--color-class-crossfit); }
	&.start-p--hyrox							{	--p-accent: var(--color-class-hyrox); }
	&.start-p--bodytone							{	--p-accent: var(--color-class-bodytone); }
	&.start-p--crossfit-teens					{	--p-accent: var(--color-class-teens); }
	&.start-p--open-gym							{	--p-accent: var(--color-class-open-gym); }
}


/* ─── Display type (section overrides on shared .cfu-display) */

.start-p-display								{

	b											{	color: var(--p-accent); }
}

.start-p-section-head							{	margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 60ch; }

.start-p-section-lede							{	margin: 1.25em 0 0;
													max-width: 58ch;
													font-size: var(--fs-4); line-height: 1.55; color: var(--color-paper-mute);
}

.start-p-actions								{	display: flex; flex-wrap: wrap; gap: 0.65em; margin: 0; }


/* ─── Breadcrumb bar ─────────────────────────────────────── */

.start-p-crumbs									{	padding: 1.25rem var(--shell-pad) 0;
													background: transparent;
}


/* ─── Hero (split copy / image) ──────────────────────────── */

.start-p-hero									{	position: relative;
													display: flex;
													min-height: min(82vh, 880px);
													background: transparent;
													padding-top: clamp(0.5rem, 2vw, 1.25rem);

	> *											{	flex: 1 1 50%; min-width: 0; }

	.cfu-triple-plus--hero-tl					{	top: clamp(0.5rem, 2vw, 1.25rem); }

	.start-p-hero-copy							{	display: flex; flex-direction: column; justify-content: center;
													padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 5vw, var(--shell-pad)) clamp(2.5rem, 5vw, 4rem);
	}

	.start-p-hero-eyebrow						{	color: var(--p-accent); }

	.start-p-hero-media							{	margin: 0; min-height: 320px; overflow: hidden;

		img										{	width: 100%; height: 100%; min-height: inherit;
													object-fit: cover; display: block;
		}
	}

	@media screen and (max-width: 1100px)		{	flex-direction: column; min-height: 0;

		.start-p-hero-media						{	order: -1; min-height: 44vh; }
	}
}

.start-p-hero-lede								{	margin: 0 0 2em;
													max-width: 46ch;
													font-size: var(--fs-3); line-height: 1.5; color: var(--color-paper-mute);
}

.start-p-hero-meta								{	list-style: none; margin: 0 0 2em; padding: 1.15em 0;
													display: flex; flex-wrap: wrap; gap: 1.25em 2.5em;
													border-top: 1px solid var(--color-rule);
													border-bottom: 1px solid var(--color-rule);

	.start-p-hero-meta-label					{	display: block; margin-bottom: 0.4em;
													font-family: var(--font-mono); font-size: 10px; font-weight: 500;
													letter-spacing: 0.16em; text-transform: uppercase;
													color: var(--color-paper-low);
	}

	.start-p-hero-meta-value					{	display: block;
													font-family: var(--font-display); font-size: 1.125rem; font-weight: 700;
													text-transform: uppercase; letter-spacing: 0.02em;
													color: var(--color-paper);
	}
}


/* ─── Mirror ("this is you") ─────────────────────────────── */

.start-p-mirror									{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													background: var(--color-ink-1);

	.start-p-mirror-inner						{	max-width: var(--layout-wide); margin-inline: auto;
													display: grid; grid-template-columns: 1.1fr 0.9fr;
													gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
	}

	.start-p-section-lede						{	max-width: 50ch; }

	.start-p-mirror-points.u-points				{	display: grid; gap: 0.75em 1.5em; align-content: start; }

	@media screen and (max-width: 900px)		{

		.start-p-mirror-inner					{	grid-template-columns: 1fr; gap: 2rem; }
	}
}


/* ─── Approach (alternating image/text bands) ────────────── */

/* Optional constrained header, then full-bleed image/text rows that mirror
   the What We Offer .wwo-d-feature split bands. The fallback paragraph block
   (.start-p-approach-body) is kept only for back-compat during data migration. */

.start-p-approach								{	background: var(--color-ink-0);

	.start-p-approach-head						{	max-width: var(--layout-wide); margin-inline: auto;
													padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad) clamp(2rem, 4vw, 3rem);
	}

	.start-p-approach-body						{	max-width: var(--layout-wide); margin-inline: auto;
													padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);

		p										{	margin: 0 0 1.15em;
													max-width: 58ch;
													font-size: var(--fs-3); line-height: 1.5; color: var(--color-paper-mute);

			&:last-child						{	margin-bottom: 0; }
		}
	}
}

/* Alternating split bands (mirrors .wwo-d-feature) */
.start-p-approach-row							{	display: flex;
													min-height: min(70vh, 760px);
													background: var(--color-ink-0);

	> *											{	flex: 1 1 50%; min-width: 0; }

	&.start-p-approach-row--flip				{	background: var(--color-ink-1); }
	&.start-p-approach-row--flip .start-p-approach-media	{	order: 2; }

	.start-p-approach-media						{	position: relative; margin: 0; min-height: 300px; overflow: hidden;

		img										{	position: absolute; inset: 0;
													width: 100%; height: 100%;
													object-fit: cover; display: block;
		}
	}

	.start-p-approach-copy						{	display: flex; flex-direction: column; justify-content: center;
													padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, var(--shell-pad));
	}

	.start-p-approach-title						{	margin: 0 0 0.5em;
													font-size: clamp(1.75rem, 4.5vw, 3.25rem);
	}

	.start-p-approach-row-body					{	margin: 0;
													max-width: 46ch;
													font-size: var(--fs-3); line-height: 1.6; color: var(--color-paper-mute);
	}

	@media screen and (max-width: 900px)		{	flex-direction: column; min-height: 0;

		&.start-p-approach-row--flip .start-p-approach-media	{	order: -1; }

		.start-p-approach-media					{	order: -1; aspect-ratio: 16 / 10; min-height: 0; }
	}
}


/* ─── Proof (numbered grid + optional feature image) ─────── */

.start-p-proof									{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													background: var(--color-ink-1);

	.start-p-proof-inner						{	max-width: var(--layout-wide); margin-inline: auto; }
}

/* With a feature image: image one side, the 4 points as a 2×2 grid the other */
.start-p-proof-layout--media					{	display: grid; grid-template-columns: 0.9fr 1.1fr;
													gap: clamp(2rem, 5vw, 4rem); align-items: start;

	.start-p-proof-media						{	position: relative; margin: 0;
													align-self: stretch; min-height: 340px; overflow: hidden;

		img										{	position: absolute; inset: 0;
													width: 100%; height: 100%;
													object-fit: cover; display: block;
		}
	}

	.start-p-proof-grid							{	grid-template-columns: repeat(2, minmax(0, 1fr)); }

	@media screen and (max-width: 1100px)		{	grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem);

		.start-p-proof-media					{	aspect-ratio: 16 / 9; min-height: 0; order: -1; }
	}

	@media screen and (max-width: 650px)		{

		.start-p-proof-grid						{	grid-template-columns: 1fr; }
	}
}

.start-p-proof-grid								{	list-style: none; margin: 0; padding: 0;
													display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
													gap: clamp(1.25rem, 3vw, 2.5rem);

	@media screen and (max-width: 1100px)		{	grid-template-columns: repeat(2, minmax(0, 1fr)); }

	@media screen and (max-width: 650px)		{	grid-template-columns: 1fr; }
}

.start-p-proof-point							{	border-top: 3px solid var(--p-accent); padding-top: 1.5em;

	.start-p-proof-num							{	margin: 0 0 0.6em;
													font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem);
													font-weight: 700; line-height: 1; letter-spacing: -0.04em;
													color: var(--color-paper-low);
	}

	.start-p-proof-title						{	margin: 0 0 0.65em;
													font-family: var(--font-display); font-size: 1rem; font-weight: 700;
													line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em;
													color: var(--color-paper);
	}

	.start-p-proof-body							{	margin: 0;
													font-size: var(--fs-5); line-height: 1.55; color: var(--color-paper-mute);
	}
}


/* ─── Path (what you'd actually do here) ─────────────────── */

.start-p-path									{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													background: var(--color-ink-0);

	.start-p-path-inner							{	max-width: var(--layout-wide); margin-inline: auto; }

	.start-p-path-actions						{	margin: clamp(2rem, 4vw, 3rem) 0 0; }
}

.start-p-path-steps								{	list-style: none; margin: 0; padding: 0;
													display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
													gap: clamp(1.25rem, 3vw, 2.5rem);

	@media screen and (max-width: 1100px)		{	grid-template-columns: repeat(2, minmax(0, 1fr)); }

	@media screen and (max-width: 650px)		{	grid-template-columns: 1fr; }
}

.start-p-path-step								{	position: relative;
													border-top: 1px solid var(--color-rule-strong); padding-top: 1.5em;

	.start-p-path-num							{	margin: 0 0 0.6em;
													font-family: var(--font-mono); font-size: 12px; font-weight: 500;
													letter-spacing: var(--track-mono); color: var(--p-accent);
	}

	.start-p-path-title							{	margin: 0 0 0.5em;
													font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
													line-height: 1.15; letter-spacing: -0.01em; color: var(--color-paper);
	}

	.start-p-path-body							{	margin: 0;
													font-size: var(--fs-5); line-height: 1.55; color: var(--color-paper-mute);
	}
}


/* ─── Objections (Q&A) ───────────────────────────────────── */

.start-p-objections								{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													background: var(--color-ink-1);

	.start-p-objections-inner					{	max-width: var(--layout-wide); margin-inline: auto;
													display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr);
													gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
	}

	.start-p-section-head						{	margin-bottom: 0; }

	@media screen and (max-width: 900px)		{

		.start-p-objections-inner				{	grid-template-columns: 1fr; gap: 2rem; }
	}
}

.start-p-objections-list						{	list-style: none; margin: 0; padding: 0;
													display: grid; gap: 0;
}

.start-p-objection								{	padding: clamp(1.5rem, 3vw, 2em) 0;
													border-bottom: 1px solid var(--color-rule);

	&:first-child								{	padding-top: 0; }
	&:last-child								{	border-bottom: none; padding-bottom: 0; }

	.start-p-objection-q						{	margin: 0 0 0.6em;
													font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
													line-height: 1.25; letter-spacing: -0.01em; color: var(--color-paper);
	}

	.start-p-objection-a						{	margin: 0;
													max-width: 64ch;
													font-size: var(--fs-4); line-height: 1.6; color: var(--color-paper-mute);
	}
}


/* ─── Testimonial band ───────────────────────────────────── */

.start-p-testimonial							{	padding: clamp(4rem, 9vw, 7rem) var(--shell-pad);
													background: var(--color-brand); color: var(--color-ink-0);

	.start-p-testimonial-inner					{	max-width: var(--layout-wide); margin-inline: auto; }

	.cfu-triple-plus							{	margin-bottom: 1.5em; }

	.start-p-testimonial-quote					{	margin: 0; max-width: 24ch;

		p										{	margin: 0;
													font-family: var(--font-display); font-size: clamp(1.75rem, 4.5vw, 3.25rem);
													font-weight: 500; line-height: 1.1; letter-spacing: var(--track-display);
													color: var(--color-ink-0);
		}
	}

	.start-p-testimonial-cite					{	margin: 1.75em 0 0;
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: rgba(5, 6, 6, 0.7);

		b										{	color: var(--color-ink-0); }
		span									{	display: block; margin-top: 0.4em; }
	}
}


/* ─── Convert (offer steps + lead form, two-column) ──────── */

/* Merged conversion band: reassurance copy + numbered "what happens next"
   steps on the left, the lead-form panel on the right. Collapses to one
   column (offer first, then form) on narrow screens. Single-column variants
   handle personas with only the offer or only the form. */

.start-p-convert								{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													background: var(--color-ink-1);

	.start-p-convert-inner						{	max-width: var(--layout-wide); margin-inline: auto;
													display: grid; grid-template-columns: 1.05fr 0.95fr;
													gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
	}

	.start-p-convert-inner--form-only			{	grid-template-columns: minmax(0, 760px); justify-content: center; }
	.start-p-convert-inner--offer-only			{	grid-template-columns: minmax(0, var(--layout-wide)); }

	.start-p-convert-offer .start-p-section-head	{	margin-bottom: clamp(2rem, 4vw, 3rem); }

	@media screen and (max-width: 900px)		{

		.start-p-convert-inner					{	grid-template-columns: 1fr; gap: 2.5rem; }
	}
}

.start-p-offer-steps							{	list-style: none; margin: 0; padding: 0;
													display: grid; gap: 0;
													counter-reset: none;

	.start-p-offer-step							{	display: flex; align-items: baseline; gap: 1.25em;
													padding: 1.1em 0;
													border-bottom: 1px solid var(--color-rule);

		&:last-child							{	border-bottom: none; }
	}

	.start-p-offer-num							{	flex: 0 0 auto;
													font-family: var(--font-mono); font-size: 12px; font-weight: 500;
													letter-spacing: var(--track-mono); color: var(--p-accent);
	}

	.start-p-offer-text							{	font-size: var(--fs-4); line-height: 1.55; color: var(--color-paper-mute); }
}


/* ─── Lead form panel (right column of .start-p-convert) ─── */

.start-p-lead-panel								{	padding: clamp(1.75em, 3.5vw, 2.75em);
													background: var(--color-ink-0);
													border: 1px solid var(--color-rule);
													border-top: 3px solid var(--p-accent);

	.start-p-lead-heading						{	margin: 0 0 0.75em;
													font-family: var(--font-display);
													font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500;
													line-height: 1.05; letter-spacing: var(--track-display);
													color: var(--color-paper);

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

	.start-p-lead-note							{	margin: 0 0 2em;
													max-width: 56ch;
													font-size: var(--fs-4); line-height: 1.55; color: var(--color-paper-mute);
	}
}

.start-lead-form								{	display: grid; grid-template-columns: 1fr 1fr;
													gap: 1.1em 1.25em;
}

.start-lead-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);

		i										{	font-style: normal; text-transform: none;
													color: var(--color-paper-quiet);
		}
	}

	input, select, textarea						{	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); }
	}

	textarea									{	resize: vertical; min-height: 6em; }
}

.start-lead-field--wide							{	grid-column: 1 / -1; }

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

.start-lead-error								{	grid-column: 1 / -1; margin: 0;
													font-size: var(--fs-5); color: var(--color-brand);
}

.start-lead-actions								{	grid-column: 1 / -1; margin: 0.25em 0 0; }


/* ─── Lead success (swapped in by start-lead.js) ─────────── */

.start-p-lead-success							{	outline: none;
													animation: start-lead-success-in 360ms var(--ease-out) both;

	.start-p-lead-success-kicker				{	margin: 0 0 1em;
													font-family: var(--font-mono); font-size: 11px;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--color-brand);
	}

	.start-p-lead-success-line					{	margin: 0 0 0.5em;
													font-family: var(--font-display);
													font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500;
													line-height: 1.05; letter-spacing: var(--track-display);
													color: var(--color-paper);

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

	p											{	max-width: 48ch;
													font-size: var(--fs-5); line-height: 1.55; color: var(--color-paper-mute);
	}
}

@keyframes start-lead-success-in				{
	from										{	opacity: 0; translate: 0 14px; }
	to											{	opacity: 1; translate: 0 0; }
}


/* ─── Drop-in band (Visitor persona) ─────────────────────── */

.start-p-dropin									{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													background: var(--color-ink-0);

	.start-p-dropin-inner						{	max-width: 56ch; margin-inline: auto; text-align: center; }

	.start-p-dropin-heading						{	margin: 0 0 0.6em;
													font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.75rem);
													font-weight: 500; line-height: 1.1; letter-spacing: var(--track-display);
													color: var(--color-paper);
	}

	.start-p-dropin-body						{	margin: 0 0 2em;
													font-size: var(--fs-3); line-height: 1.5; color: var(--color-paper-mute);
	}

	.start-p-dropin-actions						{	margin: 0; }

	.start-p-dropin-note						{	margin: 1.5em 0 0;
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--color-paper-low);
	}
}


/* ─── Mobile (shared) ────────────────────────────────────── */

@media screen and (max-width: 650px)			{

	.start-p-actions							{	flex-direction: column; align-items: stretch;

		.btn									{	width: 100%; justify-content: center; }
	}

	.start-lead-form							{	grid-template-columns: 1fr; }
}


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

	.start-p-lead-success						{	animation: none; }
}