/* ===================================================================
	 Q&A accordion
	 =================================================================== */

section#qa {
	background: var(--color-bg-raised);
	border-block: 1px solid var(--color-line);
	padding-block: 4rem 6rem;
}
.qa__head {
	margin-block-end: var(--space-xl);
}
.qa__head h2 {
	font-size: var(--step-2xl);
	font-weight: 500;
	letter-spacing: -0.035em;
}

.faq__group + .faq__group { margin-block-start: var(--space-xl); }
.faq__group-title {
	font-family: var(--font-mono);
	font-size: var(--step-md);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-block-end: var(--space-md);
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

.faq { display: grid; gap: 0; border-block: 1px solid var(--color-line); }
.faq__item { border-block-end: 1px solid var(--color-line); }
.faq__item:last-child { border-block-end: 0; }
.faq__q {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--space-md);
	align-items: center;
	text-align: left;
	padding-block: var(--space-md);
	font-family: var(--font-sans);
	font-size: var(--step-md);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--color-fg);
	transition: color var(--dur) var(--ease-out);
}
.faq__q .num { font-family: var(--font-mono); font-size: var(--step-2xs); color: var(--color-fg-dim); letter-spacing: 0.1em; }
.faq__q .icon {
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 1px solid var(--color-line-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-fg-muted);
	transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.faq__q .icon svg { display: block; }
.faq__q .icon .icon__v {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform var(--dur) var(--ease-out);
}
.faq__q:hover { color: var(--color-accent); }
.faq__item.is-open .faq__q { color: var(--color-accent); }
.faq__item.is-open .faq__q .icon { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.faq__item.is-open .faq__q .icon .icon__v { transform: scaleY(0); }
.faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a .inner {
	padding-block: 0 var(--space-lg);
	color: var(--color-fg-muted);
	max-width: 64ch;
	font-size: var(--step-sm);
	padding-inline-start: calc(var(--step-2xs) + var(--space-md) + 1ch);
}
.faq__a .inner p + p { margin-block-start: var(--space-sm); }

@media (max-width: 880px) {
	.qa__head { grid-template-columns: 1fr; }
	.qa__head h2 { font-size: var(--step-2xl); }
	.faq__q { font-size: var(--step-md); }
	.faq__group-title { font-size: var(--step-sm); }
}