.faq {
	position: relative;
	padding-block: var(--air-6);
}
.faq .section-label {
	margin-top: var(--sp-5);
	margin-bottom: var(--air-6);
}
.faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.faq__item {
	position: relative;
}
.faq__q {
	display: block;
	width: 100%;
	padding: var(--air-1) var(--air-3);
	border: 0;
	border-radius: var(--r-lg);
	background: var(--panel);
	color: var(--ink);
	font-family: inherit;
	font-size: var(--fs-4);
	font-weight: var(--fw-text);
	line-height: var(--lh-snug);
	text-align: left;
	cursor: pointer;
	transition:
		background-color var(--dur) var(--ease),
		color var(--dur) var(--ease);
	-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
	.faq__item:hover .faq__q,
	.faq__item:focus-within .faq__q {
		background: var(--fill);
		color: var(--on-fill);
	}
}
.faq__item.is-open .faq__q {
	background: var(--fill);
	color: var(--on-fill);
}
.faq__a {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 5;
	width: min(420 * var(--px), 78vw);
	padding: var(--air-2) var(--air-2);
	border-radius: var(--r-lg);
	background: var(--ink);
	color: var(--field);
	box-shadow: 0 calc(14 * var(--px)) calc(34 * var(--px)) calc(-16 * var(--px)) color-mix(in srgb, var(--ink) 45%, transparent);
	font-size: var(--fs-3);
	line-height: var(--lh-text);
	transform: translateY(calc(-50% + var(--nudge, 16 * var(--px))));
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--dur) var(--ease),
		visibility 0s linear var(--dur);
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
	.faq__item:hover .faq__a,
	.faq__item:focus-within .faq__a {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}
}
.faq__item.is-open .faq__a {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
	.faq__list:has(.faq__item:hover, .faq__item:focus-within) .faq__item.is-open:not(:hover, :focus-within) .faq__q {
		background: var(--panel);
		color: var(--ink);
		transition-delay: 0s;
	}
	.faq__list:has(.faq__item:hover, .faq__item:focus-within) .faq__item.is-open:not(:hover, :focus-within) .faq__a {
		opacity: 0;
		visibility: hidden;
		transition-delay: 0s, var(--dur);
	}
	.faq__item.is-open:not(:hover, :focus-within) .faq__q {
		transition-delay: calc(var(--dur) * 1.5);
	}
	.faq__item.is-open:not(:hover, :focus-within) .faq__a {
		transition-delay: calc(var(--dur) * 1.5), calc(var(--dur) * 1.5);
	}
}
@media (prefers-reduced-motion: reduce) {
	.faq__a { transition: none; }
}
@media (max-width: 760px) {
	.faq__a {
		position: static;
		right: auto;
		left: auto;
		display: grid;
		grid-template-rows: 0fr;
		width: auto;
		margin-top: 0;
		padding-block: 0;
		transform: none;
		transition:
			grid-template-rows var(--dur) var(--ease),
			margin-top var(--dur) var(--ease),
			padding-block var(--dur) var(--ease),
			opacity var(--dur) var(--ease),
			visibility 0s linear var(--dur);
	}
	.faq__a-text {
		min-height: 0;
		overflow: hidden;
	}
	.faq__item.is-open .faq__a {
		grid-template-rows: 1fr;
		margin-top: var(--sp-2);
		padding-block: var(--air-2);
	}
}