.wp-block-accordion.is-style-webstacked-faq {
	--ws-faq-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
	--ws-faq-ink: var(--wp--preset--color--ink, #0c1020);
	--ws-faq-muted: var(--wp--preset--color--ink-muted, #505a70);
	--ws-faq-blue: var(--wp--preset--color--accent, #2e4efb);
	--ws-faq-line: var(--wp--preset--color--line, rgba(12, 16, 32, 0.1));
	border-top: 1px solid var(--ws-faq-line);
	color: var(--ws-faq-ink);
	font-family: var(--wp--preset--font-family--schibsted-grotesk, ui-sans-serif, sans-serif);
}

/* On dark sections the FAQ reads light-on-ink. */
.has-ink-background-color .wp-block-accordion.is-style-webstacked-faq {
	--ws-faq-ink: var(--wp--preset--color--canvas, #fbfcfa);
	--ws-faq-muted: var(--wp--preset--color--dark-copy, #bec6d0);
	--ws-faq-blue: var(--wp--preset--color--accent-soft, #afcbff);
	--ws-faq-line: var(--wp--preset--color--line-light, rgb(255 255 255 / 16%));
}

.wp-block-accordion.is-style-webstacked-faq > .wp-block-accordion-item {
	border-bottom: 1px solid var(--ws-faq-line);
	display: grid;
	grid-template-rows: auto 0fr;
	margin-block: 0;
}

.wp-block-accordion.is-style-webstacked-faq > .wp-block-accordion-item.is-open {
	grid-template-rows: auto 1fr;
}

.wp-block-accordion.is-style-webstacked-faq .wp-block-accordion-heading {
	margin: 0;
}

.wp-block-accordion.is-style-webstacked-faq .wp-block-accordion-heading__toggle {
	align-items: center;
	color: var(--ws-faq-ink);
	column-gap: 1.5rem;
	font-size: var(--wp--preset--font-size--lede, 1.2rem);
	font-weight: 600;
	justify-content: space-between;
	letter-spacing: -0.02em;
	line-height: 1.3;
	padding: 1.375rem 0.125rem;
	text-align: left;
}

.wp-block-accordion.is-style-webstacked-faq
.wp-block-accordion-heading__toggle-title {
	transition: color 0.25s ease;
}

.wp-block-accordion.is-style-webstacked-faq
.wp-block-accordion-heading__toggle:hover
.wp-block-accordion-heading__toggle-title {
	color: var(--ws-faq-blue);
	text-decoration: none;
}

.wp-block-accordion.is-style-webstacked-faq
.wp-block-accordion-heading__toggle:focus-visible {
	border-radius: 2px;
	outline: 2px solid var(--ws-faq-blue);
	outline-offset: 3px;
}

.wp-block-accordion.is-style-webstacked-faq
.wp-block-accordion-heading__toggle-icon {
	color: transparent;
	flex: 0 0 auto;
	font-size: 0;
	height: 0.875rem;
	position: relative;
	transition: transform 0.45s var(--ws-faq-ease);
	width: 0.875rem;
}

.wp-block-accordion.is-style-webstacked-faq
.wp-block-accordion-heading__toggle-icon::before,
.wp-block-accordion.is-style-webstacked-faq
.wp-block-accordion-heading__toggle-icon::after {
	background: var(--ws-faq-blue);
	border-radius: 1px;
	content: "";
	height: 2px;
	inset: 0 0 auto;
	position: absolute;
	top: 0.375rem;
}

.wp-block-accordion.is-style-webstacked-faq
.wp-block-accordion-heading__toggle-icon::after {
	transform: rotate(90deg);
}

.wp-block-accordion.is-style-webstacked-faq .wp-block-accordion-panel,
.wp-block-accordion.is-style-webstacked-faq .wp-block-accordion-panel[inert],
.wp-block-accordion.is-style-webstacked-faq
.wp-block-accordion-panel[aria-hidden="true"] {
	display: block;
	margin-block-start: 0;
	min-height: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0 0.125rem;
	transform: translateY(-0.25rem);
}

.wp-block-accordion.is-style-webstacked-faq > .wp-block-accordion-item.is-open > .wp-block-accordion-panel {
	opacity: 1;
	padding-block-end: 1.5rem;
	transform: none;
}

.wp-block-accordion.is-style-webstacked-faq .wp-block-accordion-panel > * {
	max-width: 58ch;
}

.wp-block-accordion.is-style-webstacked-faq .wp-block-accordion-panel > :first-child {
	margin-block-start: 0;
}

.wp-block-accordion.is-style-webstacked-faq .wp-block-accordion-panel > :last-child {
	margin-block-end: 0;
}

.wp-block-accordion.is-style-webstacked-faq .wp-block-accordion-panel p,
.wp-block-accordion.is-style-webstacked-faq .wp-block-accordion-panel li {
	color: var(--ws-faq-muted);
	font-size: var(--wp--preset--font-size--base, 1rem);
	line-height: 1.65;
}

.ws-faq-section {
	background: var(--wp--preset--color--surface-2, #f2f4f6);
	color: var(--wp--preset--color--ink, #0c1020);
	padding-block: clamp(4.75rem, 11vh, 9.375rem);
}

.ws-faq-section__layout {
	align-items: start;
	display: grid !important;
	gap: clamp(2.25rem, 5vw, 5.625rem);
	grid-template-columns: minmax(17.5rem, 5fr) minmax(0, 7fr);
}

.ws-faq-section__aside {
	align-self: start;
	position: sticky;
	top: 7.5rem;
}

.ws-faq-section__kicker {
	color: var(--wp--preset--color--ink-muted, #505a70);
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	margin: 0 0 1.25rem;
	text-transform: uppercase;
}

.ws-faq-section__title {
	font-family: var(--wp--preset--font-family--schibsted-grotesk, ui-sans-serif, sans-serif);
	font-size: var(--wp--preset--font-size--6-xl, 3rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1.03;
	margin: 0;
	max-width: 18ch;
}

.ws-faq-section__accent,
.ws-faq-section__lede a {
	color: var(--wp--preset--color--accent, #2e4efb);
}

.ws-faq-section__lede {
	color: var(--wp--preset--color--ink-muted, #505a70);
	font-size: var(--wp--preset--font-size--lede, 1.2rem);
	line-height: 1.6;
	margin: 1.125rem 0 0;
	max-width: 28rem;
}

.ws-faq-section__lede a {
	text-decoration: none;
}

.ws-faq-section__lede a:hover {
	text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {

	.wp-block-accordion.is-style-webstacked-faq > .wp-block-accordion-item {
		transition: grid-template-rows 0.5s var(--ws-faq-ease);
	}

	.wp-block-accordion.is-style-webstacked-faq .wp-block-accordion-panel {
		transition: opacity 0.35s ease, transform 0.5s var(--ws-faq-ease);
	}
}

@media (max-width: 920px) {

	.ws-faq-section__layout {
		grid-template-columns: 1fr;
	}

	.ws-faq-section__aside {
		position: static;
	}
}

/*
 * No JavaScript: the theme's <html class="no-js"> stays in place, so nothing
 * can toggle the items. Show every answer open and drop the +/− icon. With JS
 * the class is removed in <head> before first paint, so nothing changes.
 */
html.no-js .wp-block-accordion.is-style-webstacked-faq > .wp-block-accordion-item {
	grid-template-rows: auto 1fr;
}

html.no-js .wp-block-accordion.is-style-webstacked-faq .wp-block-accordion-panel {
	opacity: 1;
	padding-block-end: 1.5rem;
	transform: none;
}

html.no-js .wp-block-accordion.is-style-webstacked-faq .wp-block-accordion-heading__toggle {
	cursor: default;
}

html.no-js .wp-block-accordion.is-style-webstacked-faq .wp-block-accordion-heading__toggle-icon {
	display: none;
}