faq-list {
	display: block;

	.intro {
		margin-bottom: 1.5em;
		padding-right: 1.5em;
	}

	.item-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	picture {
		max-width: 400px;
		border-radius: var(--fill-corners);
		overflow: clip;
	}

	figure {
		margin-bottom: var(--common-gap);
	}

	/* Wide: sticky intro left, questions right — mirrors feature-grid / team. */
	@media (width >= 900px) {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		align-items: start;

		.intro {
			grid-column: 1 / 4;
			position: sticky;
			top: 100px;
			margin-bottom: 0;
		}

		.item-list {
			grid-column: 4 / 12;

			margin-top: -1em;
		}
	}

	details {
		border-bottom: 1px solid color-mix(in oklch, var(--ink-primary) 12%, transparent);

		&[open] summary {
			padding-bottom: 0.5em;
		}
	}

	summary {
		display: flex;
		align-items: center;
		gap: 1em;
		padding: 1em 0;
		font-size: var(--step-up-1);
		font-weight: 500;
		line-height: 1.3;
		cursor: pointer;
		list-style: none;

		&::-webkit-details-marker {
			display: none;
		}

		&::after {
			content: '+';
			margin-left: auto;
			font-weight: 300;
			font-size: 1.3em;
			line-height: 1;
			color: var(--ink-secondary);
			transition: transform 0.2s;
		}
	}

	details[open] summary::after {
		content: '−';
	}

	.answer {
		padding-block: 0 1.5em;
		color: var(--ink-secondary);

		max-width: 60ch;

		p + p,
		p + ol,
		p + ul {
			margin-top: 1em;
		}

		ol, ul {
			padding-left: 1.5em;
			margin: 0;

			display: grid;
			gap: 0.8em;

			li {
				padding-left: 0.7em;
			}
		}

		ol {
			padding-left: 1.1em;
		}
	}
}