/* PulsarERP — questions: a group name on one side, its questions on the other, each opening in place.
   Every answer repeats what another page already says, in fewer words, and links to it. */

/* Groups are kept apart by space only: the list's own top line is the one rule, so no two lines stack. */
.faq-group {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--space-5) var(--space-8);
  padding-block: var(--space-7);
}
.faq-group:first-child { padding-block-start: 0; }
.faq-group-title {
  display: flex; align-items: center; gap: var(--space-3); align-self: start;
  position: sticky; top: 6rem;
  font-size: var(--fs-answer); line-height: var(--lh-snug);
}
.faq-group-title .section-num { font-weight: 400; letter-spacing: 0; }

.faq-list { border-block-start: 1px solid var(--line); }
.faq { border-block-end: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding-block: var(--space-5); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; line-height: var(--lh-snug);
  transition: color var(--dur-fast) linear;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }

/* Plus that turns to minus: the upright bar turns flat. */
.faq-mark { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border: 1px solid var(--line-strong); border-radius: 50%; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 0.7rem; height: 1.5px; margin: -0.75px 0 0 -0.35rem;
  border-radius: 1px; background: currentColor;
}
.faq-mark::after { transform: rotate(90deg); transition: transform var(--dur-fast) var(--ease-out); }
.faq[open] .faq-mark { border-color: var(--accent); color: var(--accent); }
.faq[open] .faq-mark::after { transform: rotate(0deg); }

.faq-answer { display: grid; gap: var(--space-3); max-width: 42rem; padding-block-end: var(--space-6); }
.faq-answer p { color: var(--ink-2); line-height: 1.7; text-wrap: pretty; }
.faq-answer ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.faq-answer li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); color: var(--ink-2); line-height: 1.6; }
.faq-answer li svg { margin-block-start: 0.3em; color: var(--accent); }
.faq-answer .more { margin-block-start: var(--space-2); justify-self: start; }

/* ---- Narrow screens ---- */

@media (max-width: 64rem) {
  .faq-group { grid-template-columns: 1fr; gap: var(--space-4); }
  .faq-group-title { position: static; }
}
@media (max-width: 40rem) {
  .faq-group { padding-block: var(--space-6); }
  .faq summary { padding-block: var(--space-4); }
}