/*
 * Wervingspagina voor experten (B-37). Bouwt verder op home.css (hero, stappen, lijsten, expertblok);
 * enkel tokens uit base.css.
 */

.xl-hero__login {
	margin: 16px 0 0;
}

/* Vier stappen i.p.v. drie. */
@media (min-width: 900px) {
	.xl-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1180px) {
	.xl-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Stichtersaanbod. */
.xl-founder {
	padding-top: 0;
}

.xl-founder__card {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.xl-founder__card p {
	margin: 0 0 8px;
	max-width: 70ch;
}

.xl-founder__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--accent-strong);
}

.xl-founder__icon .icon {
	width: 24px;
	height: 24px;
}

@media (max-width: 559px) {
	.xl-founder__card {
		flex-direction: column;
		gap: 12px;
	}
}

.xl-founder__left {
	color: var(--accent-strong);
}

/* Pakketten. */
.xl-prices__grid {
	margin-top: 24px;
}

.xl-tier {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.xl-tier .card__title {
	margin: 0;
}

.xl-tier__price {
	margin: 0;
	font-weight: 700;
	color: var(--accent-strong);
}

.xl-tier__desc {
	margin: 0;
	color: var(--muted);
}

.xl-tier .home-list {
	margin: 0;
}

.xl-tier__options {
	list-style: none;
	margin: auto 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 6px;
}

.xl-tier__options li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 12px;
}

.xl-tier__options .num {
	font-weight: 700;
}

/* Introductieprijs (B-65): normale prijs doorstreept, einddatum eronder. */
.xl-tier__amount {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

.xl-tier__normal {
	font-weight: 500;
	color: var(--muted);
	text-decoration-thickness: 1.5px;
}

.xl-tier__until {
	flex-basis: 100%;
	font-size: var(--fs-small);
	color: var(--accent-strong);
}

.xl-tier__intro {
	margin-left: 8px;
	vertical-align: 2px;
}

/* Veelgestelde vragen. */
.xl-faq__list {
	margin-top: 20px;
	display: grid;
	gap: 10px;
}

.xl-faq__item {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.xl-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding: 14px 20px;
	font-weight: 700;
	color: var(--accent-strong);
	cursor: pointer;
	list-style: none;
}

.xl-faq__item summary::-webkit-details-marker {
	display: none;
}

.xl-faq__item summary .icon {
	flex: none;
	transition: transform .2s ease;
}

.xl-faq__item[open] summary .icon {
	transform: rotate(180deg);
}

.xl-faq__item summary:focus-visible {
	outline: 3px solid var(--focus, var(--accent));
	outline-offset: 2px;
	border-radius: var(--radius-lg);
}

.xl-faq__item p {
	margin: 0;
	padding: 0 20px 18px;
	max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
	.xl-faq__item summary .icon {
		transition: none;
	}
}