/* ==========================================================================
   VPNBL · help.css
   帮助中心页(zh-CN/questions.html)专属样式。
   问答本体沿用 components.css 的 .faq 折叠组件与 .toc-tabs 目录条,
   此处只补页头、章节头、结语联系块三块版面,不重复定义已有组件。
   ========================================================================== */

/* ==========================================================================
   1. 页头
   ========================================================================== */
.help-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  background:linear-gradient(180deg,var(--bg-hero-top) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--border-soft);
}
.help-hero__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:46px var(--gutter) 40px;
  text-align:center;
}
.help-hero__title{
  margin-top:6px;
  font-size:clamp(30px,3.6vw,44px);
  line-height:1.16;
}
.help-hero__sub{
  margin:14px auto 0;
  max-width:780px;
  font-size:var(--fs-lead);
  line-height:1.62;
  color:var(--text-muted);
}
.help-facts{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  min-width:0;
}

/* ==========================================================================
   2. 正文容器与导语
   ========================================================================== */
.help-doc{display:block;padding-bottom:calc(var(--sec-y) * .5)}
.help-intro{
  max-width:880px;
  padding-block:26px 0;
  font-size:15.5px;
  line-height:1.78;
  color:var(--text-muted);
}

/* ==========================================================================
   3. 章节头(图标 + 标题说明 + 条数徽章)
   ========================================================================== */
.help-sec{padding-block:34px 6px}
.help-sec__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:14px;
  margin-bottom:18px;
}
.help-sec__ico{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:none;
  border-radius:var(--r-card);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
  color:var(--accent);
}
.help-sec__ico svg{width:22px;height:22px}
.help-sec__text{flex:1 1 200px;min-width:0}
.help-sec__text h2{
  font-size:clamp(21px,2.3vw,29px);
  line-height:1.2;
}
.help-sec__text p{
  margin-top:7px;
  max-width:720px;
  font-size:14.5px;
  line-height:1.65;
  color:var(--text-muted);
}
.help-sec__count{margin-top:10px}

/* ==========================================================================
   4. 结语联系块
   ========================================================================== */
.help-contact{padding-block:30px 10px}
.help-contact__row{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ==========================================================================
   5. 响应式
   ========================================================================== */
@media (max-width:768px){
  .help-hero__inner{padding:36px var(--gutter) 32px}
  .help-intro{padding-block:22px 0}
}
@media (max-width:640px){
  .help-hero__inner{padding:30px var(--gutter) 28px}
  .help-hero__sub{font-size:16px}
  .help-facts{gap:8px;margin-top:18px}
  .help-sec{padding-block:26px 4px}
  .help-sec__ico{width:40px;height:40px}
  .help-sec__ico svg{width:20px;height:20px}
  .help-sec__text h2{font-size:21px}
}