/* FAQ page. The hero, contents list and body card come from style/doc.css; this
   file adds the back link and the question accordion. Scoped to body.Faqs,
   because Page loads every page stylesheet on every page.

   The accordion is deliberately the same shape supportPage uses. It is not
   shared with style/support.css: that sheet is scoped to body.Support, and the
   convention here is one stylesheet per page. */

/* --- Back to where you came from --------------------------------------- */

body.Faqs .faqs-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 500;
  color: #6c5393;
  text-decoration: none;
  transition: color 0.15s ease;
}

body.Faqs .faqs-back:hover {
  color: #7e22ce; /* purple-700 */
}

body.Faqs .faqs-back:focus-visible {
  outline: 2px solid #9333ea;
  outline-offset: 3px;
  border-radius: 4px;
}

body.Faqs .faqs-back svg {
  width: 16px;
  height: 16px;
}

/* --- The accordion ------------------------------------------------------ */

body.Faqs .faqs-list {
  display: flex;
  flex-direction: column;
  gap: 12px; /* space-y-3 */
}

body.Faqs .faqs-item {
  padding: 20px;
  border: 1px solid #e6dbf0;
  border-radius: 16px; /* rounded-2xl */
  background: #ffffff;
  transition: border-color 0.15s ease;
}

body.Faqs .faqs-item:hover {
  border-color: #d8b4fe; /* purple-300 */
}

body.Faqs .faqs-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  list-style: none;
}

body.Faqs .faqs-item summary::-webkit-details-marker {
  display: none;
}

body.Faqs .faqs-item summary:focus-visible {
  outline: 2px solid #9333ea;
  outline-offset: 4px;
  border-radius: 8px;
}

body.Faqs .faqs-item h3 {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #25153c;
}

body.Faqs .faqs-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px; /* w-7 */
  height: 28px;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, #f3e8ff, #ffedd5);
  color: #7e22ce;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s ease;
}

body.Faqs .faqs-item[open] .faqs-mark {
  transform: rotate(45deg);
}

body.Faqs .faqs-item p {
  margin: 16px 0 0 !important;
  font-size: 14px;
  line-height: 22.75px;
  color: #6c5393;
}

/* --- Section spacing ---------------------------------------------------- */

/* Every section here is a heading followed by a block, so they all get the
   design's mb-6 rather than the mb-4 doc.css gives continuous prose. */
body.Faqs .doc-section > h2 {
  margin-bottom: 24px !important;
}

@media (prefers-reduced-motion: reduce) {
  body.Faqs .faqs-back,
  body.Faqs .faqs-item,
  body.Faqs .faqs-mark {
    transition: none;
  }
}