FAQ Accordion

<div class="nuda-accx-faq">
  <div class="nuda-accx-faq__header">
    <span class="nuda-accx-faq__badge">FAQ</span>
    <span class="nuda-accx-faq__title">Common Questions</span>
  </div>
  <div class="nuda-accx-faq__item nuda-accx-faq__item--open">
    <div class="nuda-accx-faq__q" role="button" aria-expanded="true">
      <span class="nuda-accx-faq__num">01</span>
      <span class="nuda-accx-faq__qtext">How does billing work?</span>
      <span class="nuda-accx-faq__arrow nuda-accx-faq__arrow--up">&#8963;</span>
    </div>
    <div class="nuda-accx-faq__a">
      <p class="nuda-accx-faq__atext">Billing is monthly. You can cancel at any time from your dashboard.</p>
    </div>
  </div>
  <div class="nuda-accx-faq__item">
    <div class="nuda-accx-faq__q" role="button" aria-expanded="false">
      <span class="nuda-accx-faq__num">02</span>
      <span class="nuda-accx-faq__qtext">Can I change my plan?</span>
      <span class="nuda-accx-faq__arrow">&#8964;</span>
    </div>
  </div>
</div>

.nuda-accx-faq {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
  background: #141414;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}

.nuda-accx-faq__header {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .65rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.nuda-accx-faq__badge {
  background: #e4ff54;
  color: #000;
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .15rem .35rem;
  border-radius: 4px;
}

.nuda-accx-faq__title {
  color: #777;
  font-size: .6rem;
  font-weight: 500;
}

.nuda-accx-faq__item {
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.nuda-accx-faq__item:last-child {
  border-bottom: none;
}

.nuda-accx-faq__item--open .nuda-accx-faq__q {
  background: rgba(228,255,84,.04);
}

.nuda-accx-faq__q {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .65rem;
  cursor: pointer;
}

.nuda-accx-faq__num {
  color: #e4ff54;
  font-size: .55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: .7;
  flex-shrink: 0;
}

.nuda-accx-faq__qtext {
  color: #cfcfcf;
  font-size: .63rem;
  font-weight: 600;
  flex: 1;
}

.nuda-accx-faq__arrow {
  color: #555;
  font-size: .75rem;
  flex-shrink: 0;
  line-height: 1;
}

.nuda-accx-faq__arrow--up {
  color: #e4ff54;
}

.nuda-accx-faq__a {
  padding: 0 .65rem .5rem 1.55rem;
  animation: _nuda-accxfaq-slide .2s ease-out;
}

.nuda-accx-faq__atext {
  color: #777;
  font-size: .58rem;
  margin: 0;
  line-height: 1.6;
}

@keyframes _nuda-accxfaq-slide {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-accx-faq__a {
    animation: none;
  }
}