.faq {
    --faq-bg: #E9EEF5;
    --faq-heading: #131C2E;
    --faq-text: #131C2E;
    --faq-muted: #6D7890;
    --faq-badge-bg: #FFFFFF;
    --faq-badge-border: transparent;
    --faq-card-bg: #FFFFFF;
    --faq-card-border: transparent;
    --faq-icon: #8A94A6;
    padding: 100px 0;
    background: #E9EEF5;
}

.faq--light {
	--faq-bg: #F8FAFC;
	background: #F8FAFC;
	--faq-badge-bg: #EDF0F5;
	--faq-badge-border: #E2E6F0;
	--faq-card-border: #E2E6F0;
}

.faq--dark {
	--faq-bg: var(--color-dark-bg);
	--faq-heading: var(--color-dark-heading);
	--faq-text: var(--color-dark-heading);
	--faq-muted: #A9B3C6;
	--faq-badge-bg: rgba(226, 230, 240, 0.03);
	--faq-badge-border: var(--color-dark-border);
	--faq-card-bg: #131C2E;
	--faq-card-border: var(--color-dark-border);
	--faq-icon: #6D7890;
}

/* Badge */
.faq__badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 7px 15px;
    background: #FFFFFFCC;
    border: 1px solid #D5DEE9;
    border-radius: 40px;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #3B455A;
}
.faq--light .faq__badge {
	background: rgba(226, 230, 240, 0.2);
	border: 1px solid #D5DEE9;
	box-shadow: inset 0 -4px 10px rgba(255, 255, 255, 0.35), inset 0 1px 10px rgba(56, 63, 86, 0.1);
	border-radius: 40px;
}

.faq__badge-dot {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-primary);
}

/* Heading */
.faq__heading {
	margin: 0 0 56px;
}

.faq__heading span {
	color: var(--color-primary);
}

/* Columns */
.faq__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 20px;
}

.faq__column {
	display: flex;
	flex-direction: column;
    gap: 20px;
}

/* Item */
.faq__item {
    border: 1.5px solid #87CF00;
    border-radius: 8px;
    background: #FFFFFF;
	/* Only the colours: the height is animated on ::details-content below. */
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.faq__item[open] {
	border-color: var(--color-primary);
}

.faq__item[open] .faq__question{
    padding: 22px 23px 10px;
}

.faq__question {
    display: flex;
    align-items: center;
    gap: 16px;
	padding: 23px;
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    color: #131C2E;
    cursor: pointer;
    list-style: none;
	/* The open state trims the bottom padding - move with the panel, not in a jump. */
	transition: padding 0.3s ease;
}

/* Hide the native disclosure triangle. */
.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: 12px;
}

.faq__dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
	margin-top: 0px;
    border-radius: 50%;
    background: var(--color-primary);
}

.faq__question-text {
	flex: 1;
}

.faq__icon {
	display: flex;
	flex-shrink: 0;
	color: var(--faq-icon);
}

/* Plus turns into a minus. */
.faq__icon-bar {
	transform-box: fill-box;
	transform-origin: center;
	transition: all 0.3s;
}

.faq__item[open] .faq__icon-bar {
	opacity: 0;
	transform: rotate(90deg);
}

/*
 * Smooth open/close.
 *
 * <details name> stays the accordion engine - no JS. The panel is kept in the
 * flow while it animates: ::details-content is the box the browser toggles, so
 * animating its block-size plus content-visibility (allow-discrete) lets it
 * slide instead of snapping open.
 */
.faq__item::details-content {
	display: block;
	overflow: hidden;
	block-size: 0;
	content-visibility: hidden;
	transition:
		block-size 0.3s ease,
		content-visibility 0.3s allow-discrete;
}

.faq__item[open]::details-content {
	/* Animating to this keyword needs interpolate-size, set in main.css. */
	block-size: auto;
	content-visibility: visible;
}

/*
 * Fallback for engines without ::details-content support: the panel still
 * appears instantly there, which is the behaviour this block had before.
 */
@supports not selector(::details-content) {
	.faq__item::details-content,
	.faq__item[open]::details-content {
		block-size: auto;
		overflow: visible;
		content-visibility: visible;
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faq__item,
	.faq__item::details-content,
	.faq__question,
	.faq__icon-bar {
		transition: none;
	}
}

.faq__answer {
    padding: 0 23px 21px;
    font-size: 16px;
    line-height: 150%;
    color: #3B455A;
}

.faq__answer p {
	margin: 0 0 12px;
}

.faq__answer p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1440px) {
	.faq {
		padding: 60px 0;
	}

	.faq__badge {
		font-size: 14px;
	}

	.faq__heading {
		margin: 0 0 40px;
		font-size: 24px;
	}

	.faq__columns {
		gap: 16px;
	}

	.faq__item[open] .faq__question {
		padding: 20px 19px 7px;
		font-size: 18px;
	}

	.faq__answer {
		padding: 0 19px 18px;
		font-size: 14px;
	}

	.faq__question {
		padding: 19px;
		font-size: 18px;
	}

	.faq__column {
		gap: 16px;
	}
}

@media (max-width: 1280px){
	.faq__question{
		font-size: 18px;
	}
}

@media (max-width: 768px){
	.faq__columns {
		grid-template-columns: 1fr;
	}

	.faq__heading {
        margin: 0 0 32px;
    }

	.faq__column {
        gap: 15px;
    }
}

@media (max-width: 550px) {
	.faq {
        padding: 40px 0;
    }

	.faq__badge {
        font-size: 12px;
        gap: 9px;
        padding: 3px 10px;
        margin: 0 0 12px;
    }

	.faq__badge-dot {
		width: 8px;
		height: 8px;
	}

	.faq__heading {
        margin: 0px 0 20px;
        font-size: 18px;
    }

	.faq__item[open] .faq__question {
        font-size: 14px;
        gap: 12px;
    }

	.faq__answer {
		padding: 0 19px 14px;
        font-size: 12px;
    }

	.faq__question {
		align-items: center;
        padding: 17px 19px;
		font-size: 14px;
    }

	.faq__icon svg {
		width: 32px;
		height: 32px;
	}
}