.faq .wrap   { align-items: flex-start; gap: var(--space-24); }
.faq .intro  { flex: 0 1 240px; min-width: 0; }
.faq-list    { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column;
               gap: var(--space-8); padding: var(--space-8) 0 0; }

@media (max-width: 1024px) {
  .faq .wrap { gap: var(--space-16); }
}

@media (max-width: 768px) {
  .faq .wrap  { gap: var(--space-8); }
  .faq .intro { flex: 1 1 100%; max-width: none; }
}
.faq-q    { width: 100%; display: flex; align-items: center; justify-content: space-between;
            gap: var(--space-4); padding: 0; background: transparent; border: 0;
            font-family: inherit; font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium); color: inherit;
            text-align: left; cursor: pointer;
            -webkit-tap-highlight-color: transparent; }
.faq-q:focus { outline: none; }
.faq-q:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }
.faq-q svg { width: 16px; height: 16px; flex-shrink: 0;
             color: var(--color-muted-foreground);
             transition: transform 300ms ease; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a    { display: grid; grid-template-rows: 0fr; opacity: 0;
            transition: grid-template-rows 300ms ease, opacity 300ms ease; }
.faq-a > * { min-height: 0; overflow: hidden; margin: var(--space-4) 0 0;
             color: var(--color-muted-foreground); }
.faq-item.open .faq-a { grid-template-rows: 1fr; opacity: 1;
                        transition: grid-template-rows 300ms ease, opacity 300ms ease 150ms; }