/* =========================================================
   Clash / FAQ page (help.html) page-specific styles.
   Only adds the page header, category heads and closing panel;
   all colors / fonts come from base.css design tokens.
   ========================================================= */

/* ---------- page header ---------- */
.faq-head{
  padding-top:46px;
  padding-bottom:28px;
}
.faq-h1{
  font-size:clamp(26px,3.6vw,40px);
  line-height:1.4;
  letter-spacing:.1em;
  margin:16px 0 0;
}
.faq-lede{
  margin:16px 0 22px;
  max-width:780px;
  font-size:15px;
  line-height:2.05;
  color:var(--ink-muted);
}
.faq-lede a{border-bottom:1px solid var(--line-gold);padding-bottom:1px;color:var(--ink)}
.faq-lede a:hover{border-bottom-color:var(--ink-muted)}

/* ---------- category blocks ---------- */
.faq-block{
  padding-top:40px;
  padding-bottom:4px;
}
.faq-cat-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:3px double var(--line-gold);
}
.faq-cat-head h2{
  font-size:21px;
  letter-spacing:.18em;
  margin:0;
}
.faq-cat-no{
  font-family:var(--font-display);
  font-size:12.5px;
  letter-spacing:.3em;
  color:var(--ink-muted);
  flex-shrink:0;
}
.faq-cat-count{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  color:var(--ink-muted);
  border:1px dotted var(--line-gold);
  padding:2px 8px;
  flex-shrink:0;
}
.faq-block .gz-faq-a a{border-bottom:1px solid var(--line-gold);padding-bottom:1px}
.faq-block .gz-faq-a a:hover{border-bottom-color:var(--ink-muted)}

/* ---------- closing guide panel ---------- */
.faq-close-panel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px 34px;
}
.faq-close-txt{flex:1 1 380px;min-width:0}
.faq-close-title{
  font-size:19px;
  letter-spacing:.14em;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px dotted var(--line-gold);
}
.faq-close-txt p{
  font-size:14px;
  line-height:2;
  color:var(--ink-muted);
  margin:0;
}
.faq-close-acts{
  flex:0 1 auto;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .faq-head{padding-top:32px;padding-bottom:22px}
  .faq-block{padding-top:30px}
  .faq-cat-head h2{font-size:18px;letter-spacing:.1em}
  .faq-cat-count{margin-left:0}
  .faq-close-acts{width:100%}
  .faq-close-acts .gz-btn{flex:1 1 100%}
}