/* =========================================================
   FAQs page: a compact introduction, then a documentation-style layout.
   Desktop: a sticky category rail (as on the Privacy Notice and Terms pages)
   beside the questions. Tablet and phone: the categories become a horizontally
   scrollable bar under the header. Questions use the shared Q&A accordion
   (.qa-* in index.css); the final CTA is the solution pages' .sp-cta.
   ========================================================= */
.faq-page { background: #fff; }

/* ---------- Introduction ---------- */
.faq-intro { padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 3.5vw, 40px); background: #f7fafa; border-bottom: 1px solid #e3ebec; }
.faq-intro-inner { max-width: 1120px; margin: 0 auto; }
.faq-intro h1 { max-width: 18em; margin: 0; font-size: clamp(30px, 3vw, 42px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: #1f2d2f; text-wrap: balance; }
.faq-intro h1 + p { max-width: 40em; margin: 14px 0 0; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--body); }

/* ---------- Categories + questions ---------- */
.faq-body { padding: clamp(36px, 5vw, 56px) 0 clamp(56px, 7vw, 96px); }
.faq-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: clamp(40px, 5vw, 72px); max-width: 1120px; margin: 0 auto; align-items: start; }
.faq-cats { position: sticky; top: calc(var(--header-h) + 24px); }
.faq-cats-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-dark); }
.faq-cats ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid #e3ebec; }
.faq-cats a { display: block; margin-left: -1px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; font-size: 15px; line-height: 1.4; color: #374151; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; }
.faq-cats a:hover { color: var(--teal-dark); border-left-color: #b9d3d6; }
.faq-cats a.is-active { color: var(--teal-dark); font-weight: 500; border-left-color: var(--teal); }
.faq-cats a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

.faq-cat { scroll-margin-top: calc(var(--header-h) + 24px); }
.faq-cat + .faq-cat { margin-top: clamp(40px, 4.5vw, 56px); }
.faq-cat h2 { margin: 0 0 14px; font-size: clamp(22px, 1.8vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: #1f2d2f; }
.faq-xref { margin: 14px 0 0; font-size: 15px; }
.faq-xref a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; }
.faq-xref a:hover { color: var(--teal); }

/* tablet and phone: one column; the categories become a scrollable bar that stays under the header */
@media (max-width: 960px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* full-width white band behind the bar without widening the page */
  .faq-cats { top: var(--header-h); z-index: 5; padding: 10px 0; background: #fff; box-shadow: 0 0 0 100vmax #fff, 0 1px 0 100vmax #e3ebec; clip-path: inset(0 -100vmax -1px -100vmax); }
  .faq-cats-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .faq-cats ol { display: flex; gap: 8px; overflow-x: auto; border-left: 0; scrollbar-width: none; }
  .faq-cats ol::-webkit-scrollbar { display: none; }
  .faq-cats li { flex: none; }
  .faq-cats a { margin: 0; padding: 9px 14px; min-height: 40px; border: 1px solid #e3ebec; border-radius: 999px; font-size: 14px; white-space: nowrap; }
  .faq-cats a:hover { border-color: #b9d3d6; }
  .faq-cats a.is-active { border-color: var(--teal); background: var(--teal); color: #fff; }
  .faq-cat, .qa-item { scroll-margin-top: calc(var(--header-h) + 76px); }
}
@media (prefers-reduced-motion: reduce) { .faq-cats a { transition: none; } }