/* ==========================================================================
   faq.html — page-specific rules (tokens only, no new colours)
   ========================================================================== */

/* ---------- "Jump to" row under the hero: label + tag links, one hairline below ---------- */
.faq-jump { padding: 40px 0; border-bottom: 1px solid var(--line); }
.faq-jump .grid { align-items: center; }
.faq-jump .tags { gap: 10px; }
a.tag { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
a.tag:hover { background: var(--black); color: var(--white); }

/* Hero meta: the e-mail is a link — show it */
.page-hero__meta a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur) var(--ease); }
.page-hero__meta a:hover { color: var(--white); }

/* ---------- Topic group: label + outlined number in column 1, accordion in 2–4 ---------- */
.faq-group { scroll-margin-top: 96px; }
/* style.css re-applies .section--tight padding inside its media queries, which cancels
   .section--flush-top below 1023px — keep consecutive groups flush at every width */
.faq-group.section--flush-top { padding-top: 0; }
.faq-group__aside { display: flex; flex-direction: column; align-items: flex-start; }
.faq-group__num { margin-top: 40px; margin-left: -3px; }
.faq-group__count { margin-top: 20px; font-size: 14px; line-height: 1.3; color: var(--ink-75); }
.faq-group .faq__a p { max-width: 900px; }
.faq-group .faq__a a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; color: var(--black); }
.faq-group .faq__a a:hover { text-decoration-color: transparent; }

/* ---------- Dark "Didn't find it?" band ---------- */
.faq-cta__title { max-width: 1015px; }
.faq-cta__lead { max-width: 670px; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .faq-jump { padding: 32px 0; }
  .faq-jump .grid { row-gap: 20px; }
  .faq-group { scroll-margin-top: 80px; }
  /* label left, outlined number right, count on its own line below */
  .faq-group__aside { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
  .faq-group__aside .label { margin-right: auto; }
  .faq-group__num { margin-top: 0; margin-left: 0; font-size: clamp(32px, 4.5vw, 48px); }
  .faq-group__count { width: 100%; margin-top: 0; }
}

@media (max-width: 639px) {
  .faq-jump { padding: 24px 0; }
  .faq-jump .grid { row-gap: 16px; }
  .faq-group { scroll-margin-top: 72px; }
  .faq-group__aside { gap: 12px 16px; }
  .faq-group__num { font-size: 32px; }
  .faq-cta__lead { max-width: none; }
}