/* ─── Plans ────────────────────────────────────────────── */

.plans											{	position: relative; max-width: var(--layout-wide); margin-bottom: 0; }


/* ─── Intro ──────────────────────────────────────────────── */

.plans-intro									{	max-width: 820px;
													margin-bottom: 3.5em;

	.u-lede										{	max-width: 48ch; }

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

		.u-cluster								{	flex-direction: column; align-items: stretch;

			.btn								{	width: 100%; }
		}
	}
}


/* ─── Barbell schematic (hero background) ───────────────── */

/* Oversized engineering drawing behind the intro — anchored to the right
   half so it bleeds under the hero copy. z-index -1 keeps it behind the
   text without any stacking gymnastics; parallax drifts it on scroll. */
.plans-schematic								{	position: absolute; z-index: -1;
													top: clamp(3em, 8vw, 7em); right: -4%;
													width: min(78%, 1100px);
													--parallax-range: 70px;
													/* Between --color-rule (0.08) and -strong (0.16) — a whisper. */
													color: rgba(255, 255, 255, 0.11);

	@media screen and (max-width: 900px)		{	display: none; }
}


/* ─── Sticky jump nav ───────────────────────────────────── */

.plans-jump										{	position: sticky; top: 0; z-index: 5;
													display: flex; flex-wrap: wrap; gap: 0.45em;
													margin: 0 calc(-1 * var(--shell-pad)) 4em;
													padding: 0.85em var(--shell-pad);
													border-top: 1px solid var(--color-rule-strong);
													border-bottom: 1px solid var(--color-rule-strong);

	@media screen and (max-width: 650px)		{	flex-wrap: nowrap; overflow-x: auto;
													-webkit-overflow-scrolling: touch;

		.u-pill									{	flex: 0 0 auto; }
	}
}


/* ─── Plan groups ────────────────────────────────────────── */

.plans-group									{	margin-bottom: clamp(3.5rem, 6vw, 5.5em);
													scroll-margin-top: 5em;

	@media screen and (max-width: 650px)		{	margin-bottom: 2.75em; }
}

.plans-group-header								{	max-width: 920px;
													margin-bottom: 2.25em; padding-top: 0.4em;
													border-top: 3px solid var(--color-brand);

	h2											{	margin: 0.45em 0 0.35em;
													font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.75rem);
													font-weight: 700; line-height: 0.95; letter-spacing: -0.025em;
													text-transform: uppercase; color: var(--color-paper);
	}

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


/* ─── Plan grid & cards ──────────────────────────────────── */

.plans-grid										{	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
													gap: clamp(1rem, 1.75vw, 1.5rem);

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

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

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

.plan-card										{	position: relative;
													display: flex; flex-direction: column;
													padding: clamp(1.5rem, 2vw, 1.85rem) clamp(1.35rem, 1.75vw, 1.65rem) clamp(1.5rem, 2vw, 1.75rem);
													background: transparent; border: 1px solid var(--color-rule);
													border-top: 3px solid var(--color-rule-strong); border-radius: 0;
													transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
	&:hover										{	background: var(--color-ink-0); border-top-color: var(--color-brand); }

	&.plan-card--featured						{	background: var(--color-ink-0); border-top-color: var(--color-brand); }

	&.plan-card--accent							{	border-top-color: var(--color-accent); }

	/* badge — absolute, conditional */
	.plan-badge									{	position: absolute; top: 1em; right: 1.25em;
													margin: 0; padding: 0.35em 0.75em;
													border-radius: var(--radius-pill); background: var(--color-brand);
													color: var(--color-paper); font-family: var(--font-display);
													font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
													text-transform: uppercase; line-height: 1;
	}

	&.plan-card--accent .plan-badge				{	background: var(--color-accent); }

	h3											{	margin: 0 0 0.95em;
													font-family: var(--font-display);
													font-size: clamp(1.05rem, 1.4vw, 1.35rem); font-weight: 700;
													line-height: 1.05; letter-spacing: -0.005em; text-transform: uppercase;
	}

	.plan-price									{	display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25em;
													margin: 0 0 1em;
													line-height: 1; color: var(--color-paper);

		.plan-price-currency, .plan-price-cents	{	align-self: flex-start;
													padding-top: 0.45em;
													font-family: var(--font-display);
													font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 500;
													opacity: 0.75;
		}

		.plan-price-dollars						{	font-family: var(--font-display);
													font-size: clamp(2.75rem, 4.75vw, 3.75rem); font-weight: 700;
													letter-spacing: -0.04em; line-height: 0.85;
		}

		.plan-price-unit						{	width: 100%;
													padding-top: 0.4em;
													font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
													text-transform: uppercase; color: var(--color-paper-low);
		}
	}

	.plan-tagline								{	min-height: 2.85em;
													margin: 0 0 1.25em;
													font-size: var(--fs-5); line-height: 1.5;
													color: var(--color-paper-mute);
	}

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

	/* CTA — the card's only link */
	a											{	margin-top: auto; width: 100%; }

	&.plan-card--featured a						{	background: var(--color-brand); border-color: var(--color-brand);
													color: var(--color-paper);
		&:hover									{	background: var(--color-paper);
													color: var(--color-ink-0);
													border-color: var(--color-paper);
		}
	}

	&.plan-card--accent a						{	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);
													color: var(--color-paper);
		}
	}

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

		.plan-tagline							{	min-height: 0; }
	}
}


/* ─── Empty state ────────────────────────────────────────── */

.plans-empty									{	padding: 2em;
													background: var(--color-ink-0);
													border: 1px solid var(--color-rule-strong);
													font-size: var(--fs-4); color: var(--color-paper-mute);
													text-align: center;
}


/* ─── Bottom CTA (shared .cfu-cta-band in global.css) ─────── */

.plans + .cfu-cta-band							{	margin-top: 0; }

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

	.cfu-cta-band__actions						{	flex-direction: column; align-items: stretch;

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