/* ─── FAQ ──────────────────────────────────────────────── */

.faq											{	max-width: 1440px; margin-bottom: 0; }

.faq-intro										{	max-width: none;
													margin-bottom: 3.5em;

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

	a											{	color: var(--color-brand); text-decoration: none;
		&:visited								{	color: var(--color-brand); }
	}
}

#faq-sections									{	counter-reset: faq-section; }


/* ─── Expand / collapse controls ─────────────────────────── */

.faq-toolbar									{	display: flex; justify-content: flex-end; margin-bottom: 2.5em; }

.faq-toggle-all									{	display: inline-flex; align-items: center; gap: 0.5em;
													margin: 0; padding: 0;
													border: none; background: transparent;
													cursor: pointer;
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: 0.08em; text-transform: uppercase;
													color: var(--color-paper-mute);
													transition: color var(--dur-fast) var(--ease-out);
													-webkit-tap-highlight-color: transparent;

	.faq-toggle-all-icon						{	font-size: 1.25rem; line-height: 1; color: var(--color-brand); }
	&:hover, &:focus-visible					{	color: var(--color-paper); }
	&:focus-visible								{	outline: 2px solid var(--color-brand); outline-offset: 4px; }
}


/* ─── Sections ───────────────────────────────────────────── */

.faq-section									{	display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
													column-gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
													margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 0.75em;
													counter-increment: faq-section;
													border-top: 3px solid var(--color-brand);

	> .faq-item									{	grid-column: 2; }

	@media screen and (max-width: 900px)		{	grid-template-columns: 1fr; row-gap: 1.5rem;

		> .faq-item								{	grid-column: 1; }
	}

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

.faq-section-heading							{	margin: 0;
													grid-column: 1; grid-row: 1;
													position: sticky; top: clamp(1rem, 2vw, 1.5rem);

	@media screen and (max-width: 900px)		{	position: static; }
}

.faq-section-toggle								{	display: flex; flex-direction: column; align-items: flex-start;
													gap: 0.6em;
													width: 100%;
													margin: 0; padding: 0;
													border: none; background: transparent;
													cursor: pointer;
													text-align: left; font-family: var(--font-display);
													color: var(--color-paper);
													transition: color var(--dur-fast) var(--ease-out);
													-webkit-tap-highlight-color: transparent;
	&::before									{	content: counter(faq-section, decimal-leading-zero);
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: var(--track-mono); color: var(--color-brand);
													line-height: 1;
	}

	/* heading label */
	span:first-child							{	display: block;
													font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.4rem);
													font-weight: 700; line-height: 0.95; letter-spacing: -0.02em;
													text-transform: uppercase;
	}

	.faq-section-toggle-icon					{	display: inline-flex; align-items: center; gap: 0.45em;
													margin-top: 0.5em;
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--color-paper-low); line-height: 1;
		&::before								{	content: "+"; font-size: 1.05rem; color: var(--color-brand); }
		&::after								{	content: "Expand section"; }
	}
	&[aria-expanded="true"] .faq-section-toggle-icon::before	{	content: "−"; }
	&[aria-expanded="true"] .faq-section-toggle-icon::after	{	content: "Collapse section"; }
	&:hover span:first-child, &:focus-visible span:first-child	{	color: var(--color-brand); }
	&:focus-visible								{	outline: 2px solid var(--color-brand); outline-offset: 4px; }
}


/* ─── Accordion items ────────────────────────────────────── */

.faq-item										{	border: none; border-bottom: 1px solid var(--color-rule);
													background: transparent;
													transition: background var(--dur-base) var(--ease-out);
	&:first-of-type								{	border-top: none; }

	summary										{	position: relative;
													list-style: none;
													cursor: pointer;
													padding: 1.25em 2.75em 1.25em clamp(1rem, 2vw, 1.5rem);
													font-family: var(--font-display);
													font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 600;
													line-height: 1.3; letter-spacing: -0.005em; color: var(--color-paper);
													transition: color var(--dur-fast) var(--ease-out);
													-webkit-tap-highlight-color: transparent;
		&::-webkit-details-marker				{	display: none; }
		&::after								{	content: "+";
													position: absolute; right: clamp(1rem, 2vw, 1.5rem); top: 50%;
													margin-top: -0.55em;
													font-family: var(--font-mono); font-size: 1.4rem; font-weight: 500;
													line-height: 1; color: var(--color-brand);
		}
		&:hover									{	color: var(--color-brand); }
		&:focus-visible							{	outline: 2px solid var(--color-brand); outline-offset: 4px; }
	}
	&[open] summary::after						{	content: "−"; }

	/* answer body */
	> div										{	padding: 0 clamp(1rem, 2vw, 1.5rem) 1.5em;
													font-size: var(--fs-4); line-height: 1.65;
													color: var(--color-paper-mute);

		a										{	color: var(--color-brand); text-decoration: none;
			&:visited							{	color: var(--color-brand); }
		}

		p										{	margin: 0 0 1em;
			&:last-child						{	margin-bottom: 0; }
		}

		ul										{	margin: 0 0 1em; padding: 0;
													list-style: none;

			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);
				&::before						{	content: "—"; position: absolute; left: 0; color: var(--color-brand); }
			}
		}

		ol										{	margin: 0 0 1em; padding-left: 1.5em;

			li									{	margin-bottom: 0.4em; }
		}
	}

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

		summary									{	padding: 1.1em 2.25em 1.1em 1rem;
													font-size: var(--fs-4);
			&::after							{	right: 1rem; }
		}

		> div									{	padding-right: 1rem; padding-left: 1rem; padding-bottom: 1.25em; }
	}
}

.faq-cta										{	display: inline-flex; align-items: center; gap: 0.35em;
													margin-top: 0.25em;
													font-family: var(--font-display); font-size: 11px; font-weight: 700;
													letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
													color: var(--color-brand);
													transition: gap var(--dur-fast) var(--ease-out);
	&:hover										{	gap: 0.55em; opacity: 0.85; }
}


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

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