/* ==========================================================================
   FAQ (Alex, 2026-11-11): below the free proof of concept, above the footer.
   The heading and note hold still on the left while the six questions and
   their answers, all open, scroll past on the right. Nothing to click.
   Chosen from three options; the split layout is after the "Any questions?"
   and "General FAQs" layouts on Cosmos.
   ========================================================================== */

.fq { padding: 0 0 clamp(88px, 10vw, 156px); background: var(--bg); color: var(--ink); }
.fq-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.fq-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 112px); align-items: start; }

/* the left side stays put under the nav while the list scrolls */
.fq-side { position: sticky; top: calc(var(--nav-h) + 40px); display: grid; gap: 22px; justify-items: start; }
.fq-note { margin: 0; max-width: 30ch; font-size: 15.5px; line-height: 1.62; color: #61635C; text-wrap: pretty; }
.fq-note a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.fq-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.fq-item { padding: clamp(22px, 2.3vw, 34px) 0 clamp(24px, 2.6vw, 38px); border-bottom: 1px solid #D9D9D6; }
.fq-item h3 { margin: 0; font-family: var(--logo); font-weight: 400; font-size: clamp(21px, 1.95vw, 28px); line-height: 1.2; letter-spacing: -.022em; text-wrap: balance; }
.fq-item p { margin: 12px 0 0; max-width: 58ch; font-size: 16.5px; line-height: 1.55; color: #61635C; text-wrap: pretty; }

@media (max-width: 900px) {
  .fq-split { grid-template-columns: minmax(0, 1fr); }
  .fq-side { position: static; }
  .fq-note { max-width: 46ch; }
}