/* FAQ page (/faq) only, direction B: a ruled group index (sticky on desktop; js/pages/faq.js
   sets aria-current on the group on screen, which turns full ink) beside the question
   groups, each a display title over the shared .faq-list accordions (site.css). Everything else
   comes from css/b.css. */

/* ── Hero: breadcrumb; the hairline under the hero kept inside the content edges ── */
.fq-page .breadcrumb { align-items: center; color: #50545B; margin-bottom: 26px; }
.fq-page .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; transition: color .2s ease; }
.fq-page .breadcrumb a:hover { color: var(--ember-dark); }
.fq-page .ph-lede > .link-ul:only-child, .fq-still p > .link-ul:only-child { display: inline; padding: 0 0 1px; color: var(--ink); }

/* ── Layout: index beside the groups ── */
.fq-body { display: grid; gap: 48px; padding-top: clamp(48px, 6vw, 88px); }
@media (min-width: 1024px) {
  .fq-body { grid-template-columns: 3fr 9fr; column-gap: clamp(48px, 6vw, 96px); }
  .fq-index { position: sticky; top: calc(var(--hdr) + 32px); align-self: start; }
}

/* ── The group index ── */
.fq-rail { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.fq-rail a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px;
  border-bottom: 1px solid var(--rule); font-size: 16px; font-weight: 500; color: #3E4148; transition: color .2s ease; }
.fq-rail a span { font-size: 15.5px; font-weight: 400; color: #50545B; font-variant-numeric: tabular-nums; }
.fq-rail a:hover { color: var(--ink); }
/* The group on screen reads in full ink and weight; no marker, so nothing looks "selected" before the reader scrolls */
.fq-rail a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.fq-index-cta { margin-top: 32px; display: none; }
.fq-index-cta .btn-ink { width: 100%; }
.fq-index-cta p { margin-top: 10px; font-size: 15.5px; color: #50545B; text-align: center; }
@media (min-width: 1024px) { .fq-index-cta { display: block; } }
@media (max-width: 1023px) {
  .fq-rail { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; border-top-color: var(--rule); }
  .fq-rail a[aria-current="true"] { font-weight: 500; color: #3E4148; }
}
@media (max-width: 359px) { .fq-rail { grid-template-columns: 1fr; } }

/* ── A group ── */
.fq-group { scroll-margin-top: calc(var(--hdr) + 24px); }
.fq-group + .fq-group { margin-top: clamp(64px, 7vw, 96px); }
.fq-group-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 32px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.fq-group-title { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.03em; }
.fq-group-head p { font-size: 16.5px; }
.fq-group .faq-list { border-top: 0; }
.fq-group .faq-list details p { color: #4A4E56; }

/* ── Still have a question ── */
.fq-still { margin-top: clamp(72px, 8vw, 112px); padding: clamp(32px, 4vw, 48px) 0 0; border-top: 1px solid var(--ink); display: grid; gap: 14px; }
.fq-still-title { font-size: clamp(30px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.025em; }
.fq-still p { font-size: 17.5px; color: #4A4E56; max-width: 52ch; }
@media (min-width: 900px) { .fq-still { grid-template-columns: 1fr 1fr; align-items: baseline; column-gap: 48px; } }