FAQ section

<div class="faq" id="faq">
  <div class="item open"><div class="q"><span>Can I cancel anytime?</span><i class="chev"></i></div><div class="a"><div><p>Yes — cancel from account settings, no questions asked.</p></div></div></div>
  <div class="item"><div class="q"><span>Do you offer refunds?</span><i class="chev"></i></div><div class="a"><div><p>Full refund within 14 days of your first charge.</p></div></div></div>
  <div class="item"><div class="q"><span>Does it integrate with Slack?</span><i class="chev"></i></div><div class="a"><div><p>Yes, plus 20+ other tools via our API.</p></div></div></div>
  <div class="item"><div class="q"><span>Is there a free plan?</span><i class="chev"></i></div><div class="a"><div><p>A free tier covers up to 3 projects.</p></div></div></div>
</div>

.faq{width:min(90%,640px);display:flex;flex-direction:column;gap:clamp(5px,1.2vmin,8px)}
.item{background:var(--surface);border:1px solid var(--line);border-radius:8px}
.q{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:clamp(6px,1.6vmin,12px) clamp(8px,2vmin,16px);font-size:clamp(8px,1.6vmin,12px);font-weight:700}
.chev{width:clamp(6px,1.2vmin,9px);height:clamp(6px,1.2vmin,9px);border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .3s;flex:none}
.item.open .chev{transform:rotate(-135deg)}
.a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.item.open .a{grid-template-rows:1fr}
.a>div{overflow:hidden}
.a p{margin:0;padding:0 clamp(8px,2vmin,16px);font-size:clamp(7px,1.3vmin,10px);color:var(--muted)}
.item.open .a p{padding-bottom:clamp(6px,1.6vmin,12px)}

const items = document.querySelectorAll('#faq .item');
let i = 0;
setInterval(function () {
  items.forEach(function (it) { it.classList.remove('open'); });
  items[i % items.length].classList.add('open');
  i++;
}, 2200);