/* Phase 7: text-led FAQ composition, reusing the native disclosure component. */
.faq-hero { padding-block: 132px 52px; text-align: center; }
.faq-hero .icon-circle { margin-bottom: 22px; }
.faq-hero h1 { font-size: clamp(43px, 8vw, 68px); margin-bottom: 23px; }
.faq-hero p { max-width: 710px; margin-inline: auto; margin-bottom: 27px; color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); }
.faq-content { background: var(--paper); }
.faq-layout { display: grid; gap: 42px; align-items: start; }
.faq-topics-nav > .eyebrow { margin-bottom: 20px; }
.faq-topics-nav ul { display: grid; gap: 12px; }
.faq-topics-nav a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); font-size: 14px; line-height: 1.5; text-decoration: none; }
.faq-topics-nav a:hover { border-color: var(--sage-dark); background: var(--sage); }
.faq-topics-nav a > .icon { width: 23px; height: 23px; color: var(--sage-dark); }
.faq-topics-nav a > .icon:last-child { width: 17px; height: 17px; margin-left: auto; color: var(--muted); }
.faq-demo-note { margin: 22px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.faq-demo-note .demo-badge { display: table; margin-bottom: 10px; }
.faq-topics { display: grid; gap: 42px; min-width: 0; }
.faq-topic { scroll-margin-top: 30px; }
.faq-topic-heading { display: flex; align-items: start; gap: 15px; margin-bottom: 20px; }
.faq-topic-number { flex-shrink: 0; color: var(--sage-dark); padding-top: 6px; font-size: 12px; letter-spacing: .09em; }
.faq-topic h2 { font-size: clamp(27px, 3vw, 36px); margin: 0; overflow-wrap: anywhere; }
.faq-topic-list { display: grid; gap: 12px; }
.faq-page .faq-answer a { color: var(--forest); font-weight: 600; }
.faq-page .faq-disclosure .faq-symbol::after { display: block; transform: scaleY(1); transition: transform .16s ease; }
.faq-page .faq-disclosure[open] .faq-symbol::after { transform: scaleY(0); }
.faq-help { background: var(--sage); }
.faq-help-layout { display: grid; gap: 28px; }
.faq-help-icon { display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; background: var(--paper); color: var(--sage-dark); }
.faq-help-icon .icon { width: 45px; height: 45px; }
.faq-help h2 { max-width: 650px; }
.faq-help p { color: var(--muted); max-width: 670px; font-size: 16px; }
.faq-page .mobile-menu a[aria-current="page"] { color: var(--terracotta-hover); font-weight: 700; }
@media (min-width: 600px) {
  .faq-hero { padding-block: 148px 65px; }
  .faq-topics-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-help-layout { grid-template-columns: auto 1fr; gap: 38px; align-items: start; }
}
@media (min-width: 1000px) {
  .faq-hero { padding-block: 154px 72px; }
  .faq-layout { grid-template-columns: 285px minmax(0, 1fr); gap: 64px; }
  .faq-topics-nav { position: sticky; top: 30px; }
  .faq-topics-nav ul { grid-template-columns: 1fr; }
  .faq-topics { gap: 48px; }
  .faq-help-layout { max-width: 990px; gap: 52px; }
}