/* FAQ block (faq-): hairline ledger of native <details>. Tokens only; phone breakpoint 720. */
.faq { --faq-dur: .3s; }
.faq-head { display: flex; flex-direction: column; gap: 12px; max-width: var(--w-prose); margin-bottom: 40px; }
.faq-empty { color: var(--muted); }
.faq-main { max-width: var(--w-prose); min-width: 0; }
.faq-item, .faq-gh { scroll-margin-top: calc(var(--header-h) + 16px); }

/* groups: a real h3 with room above it, never a kicker */
.faq-group + .faq-group { margin-top: 56px; }
.faq-gh { font-size: clamp(22px, 2.2vw, 26px); margin-bottom: 10px; }

/* the ledger: hairlines between questions */
.faq-list { border-bottom: 1px solid var(--line); }
.faq-item { border-top: 1px solid var(--line); }

.faq-q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 20px 0; cursor: pointer; border-radius: var(--radius-sm); -webkit-tap-highlight-color: transparent; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:focus-visible { outline-offset: 2px; }
.faq-qt { font-size: clamp(18px, 1.5vw, 20px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; transition: color var(--d-fast) ease; }
.faq-chev { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: transform var(--faq-dur) var(--ease), background-color var(--d) ease, color var(--d) ease; }
/* [data-closing] is set while the close animation runs, so the chevron turns back with the answer, not after it */
.faq-item[open]:not([data-closing]) > .faq-q .faq-chev { transform: rotate(90deg); background: var(--brand-soft); color: var(--brand); }

.faq-prose { max-width: 62ch; padding: 0 56px 28px 0; color: var(--muted); font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.faq-prose > * { margin: 0; }
.faq-prose > * + * { margin-top: 14px; }
.faq-prose :is(ul, ol) { padding-left: 1.3em; }
.faq-prose li + li { margin-top: 6px; }
.faq-prose li::marker { color: var(--brand); }
.faq-prose strong { color: var(--ink); font-weight: 600; }
.faq-prose :is(h1, h2, h3) { font: 600 17px/1.4 var(--font); letter-spacing: 0; color: var(--ink); }
.faq-prose a { font-weight: 500; }

.faq-contact { margin-top: 32px; }
.faq-contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 600; font-size: 17px; text-decoration: none; }
.faq-contact a svg { transition: transform var(--d) var(--ease); }

/* jump list: sticky on desktop, a wrapping row of links below 960 */
.faq-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.faq-jump a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--muted); font-weight: 600; font-size: 15px; text-decoration: none; transition: color var(--d-fast) ease; }

/* layouts */
.faq-cols { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, var(--w-prose)); column-gap: 72px; align-items: start; }
.faq-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; align-items: start; }
.faq-cols > .faq-aside, .faq-split > .faq-aside { position: sticky; top: calc(var(--header-h) + 24px); }
.faq-split .faq-head { margin-bottom: 28px; }
.faq-split .faq-main { max-width: none; }
.faq-split .faq-jump { margin-top: 0; }

@media (hover: hover) and (pointer: fine) {
  .faq-q:hover .faq-qt { color: var(--brand); }
  .faq-q:hover .faq-chev { background: var(--line); color: var(--ink); }
  .faq-item[open]:not([data-closing]) > .faq-q:hover .faq-chev { background: var(--brand-soft); color: var(--brand); }
  .faq-contact a:hover svg { transform: translateX(4px); }
  .faq-jump a:hover { color: var(--ink); }
}

@media (max-width: 960px) {
  .faq-cols, .faq-split { grid-template-columns: 1fr; }
  .faq-cols > .faq-aside, .faq-split > .faq-aside { position: static; }
  .faq-cols > .faq-aside { margin-bottom: 8px; }
  .faq-split .faq-head { margin-bottom: 16px; }
  .faq-jump ul { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
  .faq-jump a { padding: 0 14px; border: 1px solid var(--field); border-radius: var(--radius-sm); }
}
@media (max-width: 720px) {
  .faq-head { margin-bottom: 28px; }
  .faq-q { min-height: 60px; padding: 16px 0; gap: 14px; }
  .faq-chev { width: 32px; height: 32px; }
  .faq-prose { padding-right: 0; padding-bottom: 24px; font-size: 16px; }
  .faq-group + .faq-group { margin-top: 44px; }
  .faq-contact a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-chev, .faq-contact a svg { transition-property: background-color, color; }
}