/* Block: FAQ */
.vx-faq { padding-top: calc(91 * var(--u)); }

.vx-faq__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(15 * var(--u)); margin-bottom: calc(50 * var(--u)); }
.vx-faq__tab { height: calc(54 * var(--u)); padding: 0 calc(30 * var(--u)) 0 calc(29 * var(--u)); border: 0; border-radius: calc(20 * var(--u)); background: #fff; color: #000; font-family: var(--vx-font-head); font-weight: 600; font-size: calc(18 * var(--u)); letter-spacing: -0.05em; white-space: nowrap; transition: background-color .2s; }
.vx-faq__tab:hover { background: var(--vx-card); }
.vx-faq__tab[aria-selected="true"] { background: var(--vx-gradient); color: #fff; }

.vx-faq__head { margin: calc(22 * var(--u)) 0 calc(65 * var(--u)); text-align: center; }
.vx-faq__head .vx-h2 { margin-top: calc(22 * var(--u)); }
.vx-faq--head-mobile .vx-faq__head { display: none; }

.vx-faq__body { position: relative; }
/* soft blue glow under the list */
.vx-faq__body::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: calc(-170 * var(--u)); width: calc(1300 * var(--u)); height: calc(560 * var(--u)); transform: translateX(-46%); background: radial-gradient(closest-side, rgba(43, 73, 159, .32), rgba(43, 73, 159, 0)); pointer-events: none; }

.vx-faq__panel { display: grid; gap: calc(17 * var(--u)); }
.vx-faq__panel[hidden] { display: none; }

.vx-faq__item { border-radius: calc(30 * var(--u)); background: #fff; color: var(--vx-ink); transition: background-color .3s; }
.vx-faq__item.is-open { background: var(--vx-black) url("../../assets/img/faq-open.webp") center bottom / cover no-repeat; color: #fff; }

.vx-faq__item:not(.is-open):hover { box-shadow: 0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(43, 73, 159, .12); }
.vx-faq__item { transition: background-color .3s, box-shadow .3s; }
.vx-faq__icon { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.vx-faq__item:not(.is-open):hover .vx-faq__icon { transform: rotate(90deg); }
.vx-faq__q { font: inherit; }
.vx-faq__q button { position: relative; display: block; width: 100%; min-height: calc(91 * var(--u)); padding: calc(27.5 * var(--u)) calc(90 * var(--u)) calc(27.5 * var(--u)) calc(39 * var(--u)); border: 0; background: none; text-align: left; font-family: var(--vx-font-head); font-weight: 600; font-size: calc(30 * var(--u)); line-height: 1.2; letter-spacing: -0.05em; transition: padding .3s; }
.vx-faq__item.is-open .vx-faq__q button { min-height: 0; padding-top: calc(45.5 * var(--u)); padding-bottom: 0; }

.vx-faq__icon { position: absolute; top: calc(16 * var(--u)); right: calc(12 * var(--u)); width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; background: linear-gradient(95deg, #2b499f 15%, #cbc82b 134%); }
.vx-faq__icon::before { content: ""; position: absolute; inset: calc(16 * var(--u)); background: #fff; -webkit-mask: url("../../assets/img/plus.svg") center / contain no-repeat; mask: url("../../assets/img/plus.svg") center / contain no-repeat; }
.vx-faq__item.is-open .vx-faq__icon::before { -webkit-mask-image: url("../../assets/img/minus.svg"); mask-image: url("../../assets/img/minus.svg"); }

/* height animation without JS measuring */
.vx-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.vx-faq__item.is-open .vx-faq__a { grid-template-rows: 1fr; }
.vx-faq__a-inner { overflow: hidden; visibility: hidden; transition: visibility .3s; }
.vx-faq__item.is-open .vx-faq__a-inner { visibility: visible; }
.vx-faq__a p { padding: calc(16.5 * var(--u)) calc(165 * var(--u)) calc(64 * var(--u)) calc(39 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(23 / 18); letter-spacing: -0.05em; }

.vx-faq__more { display: flex; flex-direction: column; align-items: center; margin-top: calc(64.5 * var(--u)); text-align: center; }
.vx-faq__more-heading { font-family: var(--vx-font-head); font-weight: 600; font-size: calc(30 * var(--u)); line-height: 1.2; letter-spacing: -0.05em; }
.vx-faq__more p { margin-top: calc(19.5 * var(--u)); color: var(--vx-grey); font-size: calc(18 * var(--u)); line-height: calc(23 / 18); letter-spacing: -0.05em; }
.vx-faq__more .vx-btn { margin-top: calc(27 * var(--u)); }

@media (max-width: 1099.98px) {
	.vx-faq { padding-top: calc(35 * var(--u)); }
	.vx-faq > .vx-container { width: auto; margin-inline: calc(26 * var(--u)); }
	.vx-faq--tabs > .vx-container { margin-inline: calc(9.5 * var(--u)); }
	.vx-faq:not(.vx-faq--tabs) { padding-top: calc(88 * var(--u)); }

	.vx-faq__tabs { gap: calc(19 * var(--u)) calc(10 * var(--u)); margin: 0 calc(10 * var(--u)) calc(45 * var(--u)); }
	.vx-faq__tab { height: calc(32 * var(--u)); padding: 0 calc(15 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(12 * var(--u)); }

	.vx-faq--head-mobile .vx-faq__head { display: block; }
	.vx-faq__head { margin: 0 0 calc(45 * var(--u)); }
	.vx-faq__head .vx-h2 { margin-top: calc(14 * var(--u)); }
	.vx-faq__head .vx-h2 em { font-family: inherit; font-style: normal; font-weight: inherit; }

	/* with tabs the list sits in a white card; without, items are white on the page */
	.vx-faq__tabs + .vx-faq__body { padding: calc(40 * var(--u)) calc(16 * var(--u)) calc(28 * var(--u)); border-radius: calc(30 * var(--u)); background: #fff; }
	.vx-faq__tabs + .vx-faq__body .vx-faq__item:not(.is-open) { background: var(--vx-card); }
	.vx-faq__body::after { display: none; }

	.vx-faq__panel { gap: calc(13 * var(--u)); }
	.vx-faq__item { border-radius: calc(19 * var(--u)); }
	.vx-faq__item.is-open { border-radius: calc(30 * var(--u)); background-image: url("../../assets/img/faq-open-mobile.webp"); }
	.vx-faq__q button { min-height: calc(60 * var(--u)); padding: calc(21.5 * var(--u)) calc(44 * var(--u)) calc(21.5 * var(--u)) calc(27.5 * var(--u)); font-size: calc(14 * var(--u)); letter-spacing: 0; }
	.vx-faq__item.is-open .vx-faq__q button { padding: calc(35 * var(--u)) calc(90 * var(--u)) 0 calc(23 * var(--u)); }

	.vx-faq__icon { top: calc(22 * var(--u)); right: calc(22 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 0; background: none; }
	.vx-faq__icon::before { inset: 0; background: #0b0c0b; -webkit-mask-image: url("../../assets/img/arrow-up.svg"); mask-image: url("../../assets/img/arrow-up.svg"); transform: rotate(90deg); transition: transform .3s; }
	.vx-faq__item.is-open .vx-faq__icon { top: calc(35 * var(--u)); right: calc(36 * var(--u)); }
	.vx-faq__item.is-open .vx-faq__icon::before { background: #fff; -webkit-mask-image: url("../../assets/img/arrow-up.svg"); mask-image: url("../../assets/img/arrow-up.svg"); transform: rotate(180deg); }

	.vx-faq__a p { max-width: calc(282 * var(--u)); padding: calc(14 * var(--u)) 0 calc(28 * var(--u)) calc(23 * var(--u)); font-weight: 400; font-size: calc(12 * var(--u)); line-height: calc(20 / 12); }

	.vx-faq__more { margin-top: calc(47 * var(--u)); }
	.vx-faq__more-heading { font-size: calc(20 * var(--u)); }
	.vx-faq__more p { max-width: calc(264 * var(--u)); margin-top: calc(14 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(20 / 12); }
	.vx-faq__more .vx-btn { margin-top: calc(15 * var(--u)); }
}