/* ─── Start hub (/start) ───────────────────────────────── */

/* Persona chooser hub. Two-tone hero + the persona registry grouped by `group`,
   each group an editorial row list in the .cfu-offerings grammar. Closes with
   the shared brand CTA band. Markup: includes/start-hub-content.php */


/* ─── Page shell ─────────────────────────────────────────── */

.start-hub										{	margin: 0 calc(-1 * var(--shell-pad)) 0; }


/* ─── Hero ───────────────────────────────────────────────── */

.start-hub-hero									{	position: relative;
													padding: clamp(3.5rem, 9vw, 7rem) var(--shell-pad) clamp(2.5rem, 6vw, 4.5rem);
													background: transparent;

	.start-hub-hero-copy						{	max-width: var(--layout-wide); margin-inline: auto; }

	.start-hub-hero-lede						{	margin: 1.25em 0 0; max-width: 52ch; }
}


/* ─── Persona groups (editorial row lists) ───────────────── */

.start-hub-group								{	padding: clamp(2.5rem, 5vw, 4rem) var(--shell-pad);
													background: var(--color-ink-1);

	&:nth-of-type(even)							{	background: var(--color-ink-0); }

	.start-hub-group-head						{	max-width: var(--layout-wide); margin: 0 auto 1.5em; }
}

.start-hub-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; }

		> 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);
		}

		.start-hub-list-label					{	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);
			}
		}

		.start-hub-list-arrow					{	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; }
			.start-hub-list-label b				{	color: currentColor; }
			.start-hub-list-arrow				{	color: currentColor; transform: translateX(0.4em); }
		}
	}

	@media (max-width: 700px)					{

		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; }
			.start-hub-list-arrow				{	flex: 0 0 auto; order: 2; }
			.start-hub-list-label				{	flex: 1 1 100%; order: 3; }
			&:hover, &:focus-visible			{	padding-left: 0.75em; }
		}
	}
}