/* =========================================================
   USBioLongevity — AIO content layer (2026-08-28)
   Styles for surfaces added by the AIO/AEO depth pass:
     · FAQ blocks (faq.html, devices.html, peptides.html)
     · the static, crawlable catalogue index on index.html
   Kept in its own file so assets/styles.css stays untouched.
   Every value below reuses a token already declared in
   styles.css :root — no new colours, no new type scale.
   ========================================================= */

/* ---------- FAQ ---------- */
.faq{display:grid;gap:14px;margin:0}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2vw,26px);
}
.faq-item h3{font-size:1.06rem;margin-bottom:9px;letter-spacing:-.015em}
.faq-item p{font-size:15.2px;line-height:1.62;color:var(--body);margin:0}
.faq-item p + p{margin-top:.75em}

/* Section divider inside faq.html — the three topic blocks */
.faq-block + .faq-block{margin-top:clamp(40px,5vw,66px)}
.faq-block .shead{margin-bottom:26px}

/* ---------- static catalogue index (index.html) ----------
   A plain, crawlable list of every device page. Deliberately
   quiet: this is a wayfinding block, not a second card grid. */
.cat-index{margin-top:36px}
.cat-index > h3{font-size:1.1rem;margin-bottom:4px}
.cat-index > p{font-size:14.6px;color:var(--muted);margin-bottom:24px}
.cat-index-grid{
  display:grid;gap:22px 28px;
  grid-template-columns:repeat(auto-fit,minmax(216px,1fr));
}
.cat-index-col h4{
  font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 11px;
}
.cat-index-col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.cat-index-col a{
  font-size:14.6px;line-height:1.4;color:var(--body);display:inline-block;
}
.cat-index-col a:hover{color:var(--navy-800);text-decoration:underline}