.faq.box {
	margin-top: var(--gap-xs5);
}
.faq.box + .faq.box {
	margin-top: var(--gap-xs6);
}
.faq-heading {
	padding: var(--gap-xs5) var(--gap-xs4);
	cursor: pointer;
	background: none;
	border: none;
	width: 100%;
	text-align: left;
	gap: var(--gap-xs4);
}
.faq-heading svg {
	min-width: 35px;
}
.faq-heading svg rect,
.faq-heading svg line {
	transition: all 0.2s ease;
}
.faq-heading {
	outline: 0 !important;
}
.faq-heading:is(:hover, :focus-visible) svg rect {
	fill: var(--primary);
}

.faq-heading {
	align-items: flex-start !important;
}

.faq-heading:is(:hover, :focus-visible) svg line {
	stroke: white;
}

.hide-when-toggled {
	transition: opacity 0.1s ease;
}

main#content .faq-content {
	position: relative;
	height: 0;
	overflow: hidden;
	transition: height 0.5s ease;
}

main#content .faq-content-inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 0 32px 32px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

main#content .faq.is-open .faq-content-inner {
	opacity: 1;
}

main#content .faq.is-open .hide-when-toggled {
	opacity: 0;
}

/* Last FAQ item */
.faq:not(:has(+ .faq)) {
	margin-bottom: var(--block-gap);
}

.faq:not(:has(+ .faq)) + * {
	margin-top: 0;
}

h3.faq-title {
	margin-top: var(--block-gap);
}

.block-gap + h3.faq-title {
	margin-top: 0;
}

.faq-content-inner {
	max-width: 664px;
}