/* Jurisio FAQ page. Builds on about.css (.ab tokens, CTA band, footer) and
   keeps every answer visible so search engines and readers can quote it. */
@media (prefers-reduced-motion: no-preference) {
  html:has(body.fq) { scroll-behavior: smooth; }
}

.fq-main { padding-top: 64px; }
.fq-main:focus { outline: none; }

.fq-intro,
.fq-group {
  width: min(1120px, calc(100% - 48px));
  margin-inline: auto;
}

.fq-intro { padding: clamp(56px, 8vw, 104px) 0 clamp(36px, 4vw, 56px); }
.fq .fq-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ab-moss-deep);
}
.fq .fq-eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.fq-intro h1 {
  font: 500 clamp(40px, 5.6vw, 76px)/1.02 var(--ab-display);
  letter-spacing: -.03em; color: var(--ab-ink); text-wrap: balance;
}
.fq .fq-lede {
  margin-top: 20px; max-width: 58ch;
  font-size: 18px; line-height: 1.55; color: var(--ab-ink-2); text-wrap: pretty;
}

.fq-toc ul {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 32px 0 0; padding: 0; list-style: none;
}
.fq-toc a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
  border: 1px solid rgba(22, 36, 31, .22); border-radius: 999px; background: var(--ab-card);
  font-size: 14px; font-weight: 500; color: var(--ab-ink); text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.fq-toc a:hover { border-color: var(--ab-ink); background: #fff; }

.fq-group {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px;
  padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--ab-line);
  scroll-margin-top: 80px;
}
.fq .fq-group h2 {
  align-self: start; position: sticky; top: 96px;
  font: 500 clamp(28px, 2.8vw, 36px)/1.1 var(--ab-display); letter-spacing: -.02em; color: var(--ab-ink);
}
.fq-list { display: flex; flex-direction: column; }
.fq-item { padding: 24px 0; border-top: 1px solid var(--ab-line); scroll-margin-top: 80px; }
.fq-item:first-child { padding-top: 4px; border-top: 0; }
.fq .fq-item h3 { font: 600 18px/1.4 var(--ab-sans); letter-spacing: 0; color: var(--ab-ink); }
.fq .fq-item p {
  margin-top: 10px; max-width: 68ch;
  font-size: 16px; line-height: 1.65; color: var(--ab-ink-2); text-wrap: pretty;
}
.fq .fq-item a,
.fq .ab-cta-side p a { color: var(--ab-moss-deep); text-decoration: underline; text-underline-offset: 3px; }
.fq .fq-item a:hover { color: var(--ab-ink); }
.fq a:focus-visible { outline: 2px solid var(--ab-moss-deep); outline-offset: 3px; border-radius: 4px; }

.fq .ab-cta { margin-top: clamp(32px, 5vw, 64px); }

@media (max-width: 760px) {
  .fq-intro,
  .fq-group { width: calc(100% - 32px); }
  .fq-main { padding-top: 56px; }
  .fq-intro { padding-top: 40px; }
  .fq .fq-lede { font-size: 17px; }
  .fq-group { grid-template-columns: 1fr; gap: 20px; }
  .fq .fq-group h2 { position: static; }
  .fq .fq-item p { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .fq-toc a { transition: none; }
}