/* faq section (Aurix design) — measured from #faq (outline/faq@1440|1024|390, styles/faq@*.json)
   and the probed open state (clicked row, sampled per frame):
     closed card 21/21/21/24 padding, r17, rgba(255,255,255,.02) + inset highlights, blur(5px)
     open   card gap 17px before the answer, radial glow at the bottom 0.02 → 0.1, plus icon → 45°
     open/close follows the 600ms hover spring (height, icon and glow move together)
     rows open independently (opening one does not close another) */

.ax-faq__inner {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  padding-top: 153px;
}

/* ---- left column: eyebrow / h2 / description (gap 16), then the link (gap 32, as the original's "See all") */
.ax-faq__side {
  flex: 1 0 0px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.ax-faq__head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.ax-faq__title { text-align: left; text-wrap: balance; }
.ax-faq__lead { text-align: left; }

.ax-faq__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  color: rgb(255, 255, 255);
  transition: opacity var(--ax-hover);
}
.ax-faq__link:hover { opacity: 0.6; }
.ax-faq__link-label { font-size: 16px; font-weight: 500; line-height: 19.2px; white-space: pre; }
.ax-faq__link-icon { width: 16px; height: 16px; flex: none; }

/* ---- accordion */
.ax-faq__list {
  flex: 1 0 0px;
  min-width: 0;
  max-width: 908px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ax-faq__item {
  width: 100%;
  transition: transform var(--ax-hover);
}
.ax-faq__item:hover { transform: scale(1.01); }

.ax-faq__card {
  position: relative;
  border-radius: 17px;
  background-image: radial-gradient(67.8117% 100% at 50% 100%, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: rgba(129, 140, 248, 0) 0px -40px 60px -40px inset, rgba(255, 255, 255, 0.2) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.05) 0px -1px 2px 0px inset;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  overflow: hidden;
  cursor: pointer;
}
/* open state background: radial-gradient(67.8117% 100% at 50% 100%, rgba(255,255,255,.1) 0%, rgba(255,255,255,.02) 100%).
   Drawn as an overlay on the .02 base so it can fade with the spring: .02 + .0816·(1−.02) = .1 at the centre, .02 at the rim. */
.ax-faq__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(67.8117% 100% at 50% 100%, rgba(255, 255, 255, 0.0816) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity var(--ax-hover);
  pointer-events: none;
}
.ax-faq__card.is-open::before { opacity: 1; }
.ax-faq__card:has(.ax-faq__btn:focus-visible) { outline: 2px solid var(--ax-accent); outline-offset: 2px; }

.ax-faq__q { position: relative; margin: 0; font: inherit; }
.ax-faq__btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 21px 21px 0 24px;
  text-align: left;
  cursor: pointer;
}
.ax-faq__btn:focus { outline: none; }
.ax-faq__q-text {
  flex: 1 0 0px;
  min-width: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: rgb(255, 255, 255);
  white-space: pre-wrap;
}
.ax-faq__icon {
  position: relative;
  flex: none;
  width: 24px;
  height: 27px;
  color: rgb(255, 255, 255);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform var(--ax-hover);
}
.ax-faq__icon svg { width: 24px; height: 24px; }
.ax-faq__card.is-open .ax-faq__icon { transform: rotate(45deg); }

/* answer: collapses to 0 rows; the 21px under the question row stays in both states */
.ax-faq__panel {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  padding-bottom: 21px;
  transition: grid-template-rows var(--ax-hover);
}
.ax-faq__card.is-open .ax-faq__panel { grid-template-rows: 1fr; }
.ax-faq__clip {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 600ms;
}
.ax-faq__card.is-open .ax-faq__clip { visibility: visible; transition-delay: 0s; }
.ax-faq__answer { padding: 17px 21px 0 24px; }
.ax-faq__a {
  font-size: 16px;
  line-height: 20.8px;
  letter-spacing: -0.32px;
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
  white-space: pre-wrap;
}

/* measured: 810–1199 padding-top 120, columns 444/444 */
@media (max-width: 1199px) {
  .ax-faq__inner { padding-top: 120px; }
}
/* measured: ≤809 stacked (gap 56), header centred */
@media (max-width: 809px) {
  .ax-faq__inner { flex-direction: column; }
  .ax-faq__side { flex: none; width: 100%; align-items: center; }
  .ax-faq__head { align-items: center; }
  .ax-faq__title, .ax-faq__lead { text-align: center; }
  .ax-faq__list { flex: none; width: 100%; }
}