/* FAQ accordion: accessible, smooth height, mascot chat bubble answers.
   API: <div class="db-faq" data-db="faq"> <div class="db-faq__item"> <button class="db-faq__q" aria-expanded>
        <div class="db-faq__a" role="region"> <div class="db-faq__bubble"> */
.db-faq__item{border-bottom:var(--db-border)}
.db-faq__item:first-child{border-top:var(--db-border)}

.db-faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--db-s4);
  min-height:44px;padding:var(--db-s5) 0;background:none;border:0;text-align:left;font-family:var(--db-font);
  font-weight:700;font-size:var(--db-fs-lead);color:var(--fg);cursor:pointer}
.db-faq__q-icon{flex:none;width:28px;height:28px;color:var(--db-gold);
  transition:transform var(--m-dur) var(--m-ease)}
.db-faq__q[aria-expanded="true"] .db-faq__q-icon{transform:rotate(45deg)}

.db-faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--m-dur-slow) var(--m-ease)}
.db-faq__item.is-open .db-faq__a{grid-template-rows:1fr}
.db-faq__a-inner{overflow:hidden}
.db-faq__a-pad{padding:0 0 var(--db-s5);display:flex;gap:var(--db-s3);align-items:flex-start}

.db-faq__avatar{width:36px;height:36px;flex:none;border-radius:var(--db-r-pill);background:var(--db-card-2)}
.db-faq__bubble{position:relative;background:var(--db-cream);color:var(--db-ink-light);
  border-radius:var(--db-r-lg);padding:var(--db-s4) var(--db-s5);font-size:var(--db-fs-small)}
.db-faq__bubble::before{content:"";position:absolute;left:-6px;top:18px;width:14px;height:14px;
  background:var(--db-cream);border-radius:3px;transform:rotate(45deg)}

@media (prefers-reduced-motion:reduce){
  .db-faq__a{transition:none}
  .db-faq__q-icon{transition:none}
}