/* /faq · page scoped CSS (prefix pg-faq-). Spacing between shared blocks, the answer search in the hero, the topic list in the hero
   aside and the six grouped FAQ sections (the landing S8 block, sections/s8-faq.css, reused once per group). Nothing here restyles a
   cy- or faq- class except through a pg-faq- parent. */

/* ------------------------------------------------------------------ hero: the search under the lead */
.pg-faq-find{max-width:560px}
.pg-faq-find__label{display:block;margin-bottom:10px;font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-2)}
.pg-faq-find__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.pg-faq-find__input{flex:1 1 260px;width:auto;max-width:420px}
.pg-faq-find__count{font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}
.pg-faq-find__count:empty{display:none}

/* hero aside: the six topics as a ruled list with the number of answers (a chip row on phones) */
.pg-faq-toc__label{margin-bottom:12px;font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-2)}
.pg-faq-toc__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--pg-rule)}
.pg-faq-toc__list a,.pg-faq-toc__list a:hover{box-sizing:border-box;display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:52px;
  padding:12px 0;border-bottom:1px solid var(--pg-rule);font-size:17px;font-weight:500;line-height:1.3;color:var(--s-ink);text-decoration:none}
.pg-faq-toc__n{font-family:var(--font-mono);font-size:13px;font-weight:400;color:var(--s-ink-3);font-feature-settings:"tnum"}
.pg-faq-toc__list a[aria-disabled="true"]{color:var(--s-ink-3);pointer-events:none}
@media (any-hover:hover){.pg-faq-toc__list a:hover .pg-faq-toc__t{color:#2757C9}}
@media (max-width:899px){
  .pg-faq-toc__list{display:flex;flex-wrap:wrap;gap:8px;border-top:0}
  .pg-faq-toc__list a,.pg-faq-toc__list a:hover{align-items:center;min-height:44px;padding:10px 14px;border:0;border-radius:6px;box-shadow:inset 0 0 0 1px var(--pg-rule);font-size:15px}
  .pg-faq-toc__n{display:none}
}

/* ------------------------------------------------------------------ the six groups: one rhythm step tighter than a marketing section,
   the head (kicker, H2, one line answer) stays in view beside a long list on wide screens */
.pg-faq-group{padding-block:clamp(52px,7vw,104px)}
.pg-faq-group .pg-faq-title{font-size:clamp(30px,3.1vw,44px);line-height:1.05}   /* step 7 (29 Sep): the calm heading size, as every section heading */
.pg-faq-sum{max-width:22em;margin-top:24px;font-size:17px;line-height:1.5;color:var(--s-ink-2);text-wrap:pretty}
@media (min-width:900px){
  .pg-faq-head{position:sticky;top:calc(var(--pg-header) + 40px)}
}
.pg-faq-group .faq-a p+p{margin-top:14px}
.pg-faq-links{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:16px}
/* a command inside an answer ("How do I remove cybee?"): the look of .cy-prose code, which the S8 answers do not carry */
.pg-faq-group .faq-a code{padding:1px 6px;border-radius:6px;background:var(--s-key);box-shadow:inset 0 0 0 1px var(--s-line);font-family:var(--font-mono);font-size:.84em;white-space:nowrap}
@media (max-width:899px){.pg-faq-sum{margin-top:16px}}

/* ------------------------------------------------------------------ no match (shown by page.js only) */
.pg-faq-empty{padding-block:clamp(52px,6vw,84px)}
.pg-faq-empty__p{margin-top:16px;color:var(--s-ink-2)}
.pg-faq-empty__go{margin-top:24px}