/* FAQ accordion (spec §4.14). Closed: max-height 0 / opacity 0; open: 384px / 1; 300ms ease-out. */
.faq { max-width: var(--container-3xl); margin-inline: auto; display: flex; flex-direction: column; gap: calc(var(--spacing) * 4); }
.faq__item {
	border-radius: var(--radius-3xl);
	border: 1px solid var(--color-gray-100);
	background-color: var(--color-white);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.faq__button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc(var(--spacing) * 5) calc(var(--spacing) * 6);
	text-align: start;
	border-radius: var(--radius-3xl);
}
.faq__button:focus { outline: none; box-shadow: 0 0 0 2px var(--color-orange-50a); }
.faq__question { padding-inline-end: calc(var(--spacing) * 4); font-size: var(--text-base); line-height: var(--text-base-lh); font-weight: var(--font-weight-medium); color: var(--color-brand-dark); }
.faq__chevron { flex-shrink: 0; color: var(--color-gray-400); transition: rotate var(--duration-base) var(--ease-out); }
.faq__button[aria-expanded="true"] .faq__chevron { rotate: 180deg; }
/* Without JS every answer stays readable. */
.js .faq__panel {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transition: max-height var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}
.js .faq__panel.is-open {
	max-height: 384px;
	opacity: 1;
	visibility: visible;
	transition: max-height var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), visibility 0s;
}
.faq__answer { padding: 0 calc(var(--spacing) * 6) calc(var(--spacing) * 5); color: var(--color-gray-600); font-size: var(--text-base); line-height: var(--text-base-lh); }