.cavinx-faq {
  --cavinx-faq-border: rgba(255, 255, 255, 0.15);
  --cavinx-faq-bg: rgba(21, 24, 36, 0.68);
  --cavinx-faq-bg-open: rgba(26, 29, 45, 0.76);
  --cavinx-faq-text: #f1f4fb;
  --cavinx-faq-muted: #c9d0df;
  --cavinx-faq-accent: #9773bc;
  display: grid;
  gap: 10px;
}

.cavinx-faq__item {
  border: 1px solid var(--cavinx-faq-border);
  border-radius: 14px;
  background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02));
  overflow: clip;
}

.cavinx-faq__item.is-open {
  background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(15,19,32,.78));
  border-color: rgba(151, 115, 188, 0.52);
  box-shadow: inset 0 0 0 1px rgba(151, 115, 188, 0.22);
}

.cavinx-faq__heading {
  margin: 0;
}

.cavinx-faq__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: 0;
  background: transparent;
  color: var(--cavinx-faq-text);
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease;
}

.cavinx-faq__button:hover {
  background: rgba(151, 115, 188, 0.08);
}

.cavinx-faq__q {
  order: 2;
  flex: 1 1 auto;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--cavinx-faq-text);
}

.cavinx-faq__icon {
  order: 1;
  width: 22px;
  height: 22px;
  position: relative;
  flex: 0 0 22px;
}

.cavinx-faq__icon::before,
.cavinx-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 3px;
  background: var(--cavinx-faq-accent);
  transform: translate(-50%, -50%);
}

.cavinx-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform .2s ease;
}

.cavinx-faq__item.is-open .cavinx-faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.cavinx-faq__panel {
  padding: 8px 18px 16px;
}

.cavinx-faq__answer,
.cavinx-faq__answer p {
  color: var(--cavinx-faq-muted);
  font-size: 16px;
  line-height: 1.6;
}

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

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

@media (max-width: 767px) {
  .cavinx-faq__button {
    padding: 14px;
  }

  .cavinx-faq__q {
    font-size: 18px;
  }

  .cavinx-faq__panel {
    padding: 8px 14px 14px;
  }

  .cavinx-faq__answer,
  .cavinx-faq__answer p {
    font-size: 15px;
  }
}