<div class="scd-acc">
  <div class="scd-acc__stage" data-scd-acc="stage">
    <div class="scd-acc__item scd-acc__item--open"><div class="scd-acc__head">What is included?<span class="scd-acc__plus">+</span></div><div class="scd-acc__body">Every tier ships with the full source, lifetime updates, and priority support from our team.</div></div>
    <div class="scd-acc__item"><div class="scd-acc__head">Can I use it commercially?<span class="scd-acc__plus">+</span></div><div class="scd-acc__body">Yes &mdash; the license covers unlimited commercial projects with no attribution required.</div></div>
    <div class="scd-acc__item"><div class="scd-acc__head">Is there a refund?<span class="scd-acc__plus">+</span></div><div class="scd-acc__body">A 30-day no-questions money-back guarantee applies to all purchases.</div></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],600&family=Newsreader:wght@400&display=swap');

.scd-acc, .scd-acc *, .scd-acc *::before, .scd-acc *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-acc {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #1a1714;
  font-family: 'Newsreader', serif;
}
.scd-acc__stage { width: 320px; }
.scd-acc__item {
  background: linear-gradient(135deg,#2c2722,#231e1a);
  border: 1px solid #3d362f;
  border-radius: 14px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: margin .4s;
  cursor: pointer;
}
.scd-acc__head {
  padding: 18px 22px;
  display: flex; justify-content: space-between; align-items: center;
  color: #f0e6d6;
  font-family: 'Fraunces', serif; font-size: 1.05rem;
}
.scd-acc__plus { transition: transform .4s; color: #c89b5a; font-size: 1.3rem; }
.scd-acc__body {
  max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.3,.9,.3,1);
  padding: 0 22px;
  color: #bcae9c; line-height: 1.6; font-size: .9rem;
}
.scd-acc__item--open { margin: 14px 0; background: linear-gradient(135deg,#3a3128,#2c241c); }
.scd-acc__item--open .scd-acc__body { max-height: 120px; padding: 0 22px 20px; }
.scd-acc__item--open .scd-acc__plus { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .scd-acc__item, .scd-acc__plus, .scd-acc__body { transition: none !important; }
}

(() => {
  const root = document.querySelector('.scd-acc');
  if (!root) return;
  const acc = root.querySelector('[data-scd-acc="stage"]');
  if (!acc) return;

  acc.querySelectorAll('.scd-acc__item').forEach((it) => {
    it.addEventListener('click', () => {
      const wasOpen = it.classList.contains('scd-acc__item--open');
      acc.querySelectorAll('.scd-acc__item').forEach((x) => x.classList.remove('scd-acc__item--open'));
      if (!wasOpen) it.classList.add('scd-acc__item--open');
    });
  });
})();