/* ==========================================================================
   VPNBF — help.css
   帮助中心页专属:页顶导语区、快速入口卡、分类小节、收尾块
   ========================================================================== */

/* ---------------------------- 页顶导语区 ---------------------------- */

.help-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:52px;
  padding-bottom:10px;
}
.help-hero .wrap{position:relative;z-index:1}
.help-hero h1{margin-top:18px}
.help-hero .lead{margin-top:16px;max-width:60ch}

.help-hero .hero-glow{
  position:absolute;
  z-index:0;
  pointer-events:none;
  top:-40px;
  right:-6%;
  width:min(520px,64vw);
  height:min(420px,60vw);
  background:radial-gradient(closest-side,rgba(217,195,238,.42),rgba(217,195,238,0) 100%);
  filter:blur(22px);
}

/* ---------------------------- 快速入口卡 ---------------------------- */

.help-quick{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:30px;
  min-width:0;
}
.quick-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:20px;
  min-width:0;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--highlight),var(--shadow-card);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.quick-card:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--ink-rgb),.24);
  box-shadow:var(--highlight),var(--shadow-float);
}
.quick-card .qc-icon{
  width:38px;height:38px;border-radius:var(--r-md);
  display:grid;place-items:center;
  background:var(--bg-panel2);
  color:var(--accent);
  flex:none;
}
.quick-card .qc-icon svg{width:20px;height:20px}
.quick-card b{
  font-family:var(--font-display);
  font-size:17px;font-weight:400;
  letter-spacing:-.01em;
  color:var(--text);
  line-height:1.35;
}
.quick-card span{
  font-size:13px;
  line-height:1.6;
  color:var(--text-muted);
}

/* ---------------------------- 分类小节 ---------------------------- */

.help-cat{
  padding-top:34px;
  scroll-margin-top:calc(var(--header-h) + 78px);
}
.help-cat:first-of-type{padding-top:6px}

.cat-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:14px;
  margin-bottom:6px;
  border-bottom:1px solid var(--border);
}
.cat-head h2{margin:0}
.cat-count{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--text-muted);
  padding:2px 10px;
  border-radius:var(--r-pill);
  background:var(--bg-panel2);
  border:1px solid var(--border);
  white-space:nowrap;
}
.cat-intro{
  font-size:14px;
  line-height:1.8;
  color:var(--text-muted);
  margin:12px 0 18px;
  max-width:62ch;
}

/* 折叠项内的步骤序号沿用 .prose ol 的圆标语法,这里只收紧间距 */
.help-cat .faq-body ol,
.help-cat .faq-body ul{margin-bottom:0;gap:7px}
.help-cat .faq-body ol li,
.help-cat .faq-body ul li{font-size:14.5px;color:var(--text-muted)}
.help-cat .faq-body ul li::before{background:var(--border)}
.help-cat .faq-body strong{color:var(--text);font-weight:600}

/* ---------------------------- 收尾块 ---------------------------- */

.help-closing{margin-top:42px}

.help-next{margin-top:6px}
.help-next h2{font-size:clamp(24px,2.4vw,30px)}
.help-next p{margin-top:12px;font-size:14.5px;line-height:1.75}
.help-next .cta-row{margin-top:20px}

/* ---------------------------- 响应式 ---------------------------- */

@media (max-width:900px){
  .help-quick{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:768px){
  .help-hero{padding-top:36px}
  .help-hero .hero-glow{display:none}
  .help-cat{padding-top:26px}
}

@media (max-width:640px){
  .help-quick{grid-template-columns:minmax(0,1fr)}
  .quick-card{padding:18px}
  .cat-head{gap:8px}
  .help-next .cta-row .btn{width:100%}
}