/* ==========================================================================
   VPNYF — 帮助中心页
   页头氛围 / 快捷入口 / 分类问答 / 收尾入口
   所有颜色、圆角、阴影一律引用 :root 令牌
   ========================================================================== */

/* ---------- 页头 ---------- */
.help-head{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:44px;
  padding-bottom:30px;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}
.help-head::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(42% 70% at 50% 0%,var(--glow-cool) 0%,var(--glow-cool-0) 72%),
    radial-gradient(circle at 1px 1px,var(--dot) 1.1px,var(--dot-0) 1.6px);
  background-size:auto,24px 24px;
  pointer-events:none;
}
.help-head-inner{
  position:relative;
  z-index:1;
  max-width:var(--maxw-narrow);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  text-align:center;
}
.help-head h1{margin-top:14px}
.help-lead{
  margin:14px auto 0;
  max-width:62ch;
  font-size:15.5px;
  line-height:1.78;
  color:var(--text-muted);
}
.help-head .fact-strip{margin-top:20px}

/* ---------- 快捷入口 ---------- */
.help-tools-sec{
  padding-top:26px;
  padding-bottom:8px;
}
.help-tools{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  min-width:0;
}
.help-tool{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}
.help-tool h3{
  font-size:16px;
  letter-spacing:-.01em;
}
.help-tool p{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--text-muted);
}
.help-tool .link-more{
  margin-top:auto;
  font-size:12.5px;
}

/* ---------- 问答主体 ---------- */
.help-article{
  padding-top:10px;
  padding-bottom:calc(var(--sec-y) * .62);
  min-width:0;
}
.help-article .callout{margin-bottom:10px}

.faq-sec{
  padding-top:32px;
  padding-bottom:4px;
  min-width:0;
}
.faq-sec-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 12px;
  margin-bottom:8px;
}
.faq-sec-head h2{font-size:clamp(22px,2.4vw,28px)}
.faq-count{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border-radius:var(--r-pill);
  background:var(--accent-wash);
  border:1px solid var(--accent-line);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.faq-sec-note{
  margin:0 0 16px;
  max-width:66ch;
  font-size:13.5px;
  line-height:1.75;
  color:var(--text-muted);
}

/* ---------- 收尾入口 ---------- */
.help-more{margin-top:44px}
.help-more-card{
  min-width:0;
  padding:26px 24px;
  border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--bg-panel) 0%,var(--bg-panel-2) 100%);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
}
.help-more-card h2{font-size:clamp(20px,2.1vw,24px)}
.help-more-card p{
  margin:10px 0 0;
  max-width:66ch;
  font-size:13.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.help-more-links{
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  margin-top:14px;
}
.help-more-links a{font-size:13px}

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .help-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .help-head{padding-top:32px;padding-bottom:24px}
  .help-lead{font-size:14px}
  .help-tools-sec{padding-top:20px}
  .faq-sec{padding-top:26px}
  .help-more{margin-top:34px}
  .help-more-card{padding:20px 18px}
  .help-more-links{gap:4px 16px}
}
@media (max-width:520px){
  .help-tools{grid-template-columns:1fr}
}