/* ==========================================================================
   VPNFN · help.css
   仅服务「常见问题」页(questions.html):页头、分类卡、相关链接卡。
   所有颜色 / 圆角 / 字体一律引用 base.css 的设计令牌。
   ========================================================================== */

/* ===== 页头文案柱 ===== */
.page-hero{
  max-width:820px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  min-width:0;
}
.page-hero h1{margin:0;font-size:clamp(30px,4vw,52px);letter-spacing:-.025em}
.page-hero .lead{margin:0}
.page-hero .fact-row{margin-top:6px}

/* ===== 分类卡(四色糖果底,呼应首页糖果卡) ===== */
.help-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px;
}
.help-grid>*{min-width:0}

.help-card{
  display:flex;flex-direction:column;gap:8px;
  padding:22px 22px 20px;
  border-radius:var(--r-card);
  border:1px solid var(--border-soft);
  min-width:0;
  transition:transform .22s ease,box-shadow .22s ease;
}
.help-card:hover{transform:translateY(-4px);box-shadow:0 30px 50px -28px var(--shadow-g-deep)}
.help-card-lav{background:var(--candy-lav)}
.help-card-mint{background:var(--candy-mint)}
.help-card-butter{background:var(--candy-butter)}
.help-card-sky{background:var(--candy-sky)}

.help-count{
  font-family:var(--font-mono);
  font-size:11.5px;font-weight:600;letter-spacing:.08em;
  color:var(--accent-dark);
  text-transform:uppercase;
}
.help-card h3{font-size:19px;margin:0}
.help-card p{font-size:14px;line-height:1.65;color:#33413A;margin:0}
.help-go{
  margin-top:8px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:600;color:var(--accent-dark);
}
.help-go svg{
  width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;
}

/* ===== 问答主列:让 .toc-tabs 有整篇的吸顶行程 ===== */
.help-body{
  display:block;
  max-width:100%;
  min-width:0;
}
.help-body .faq-cat{scroll-margin-top:calc(var(--header-h) + var(--toc-h) + 16px)}
.help-body .faq-cat > p{
  font-size:15px;color:var(--muted);
  margin:0 0 16px;max-width:72ch;
}
.help-body .faq-cat h2{font-size:clamp(22px,2.2vw,28px);margin:0 0 10px}
.help-body .faq-cat + .faq-cat{margin-top:40px}
.help-body .callout{margin-top:40px;max-width:76ch}

/* 问答正文里的行内链在窄屏不撑破 */
.help-body .faq-body a{overflow-wrap:anywhere}

/* ===== 相关页面卡(白面板,与糖果卡区分层次) ===== */
.help-links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}
.help-links>*{min-width:0}
.help-link{
  display:flex;flex-direction:column;gap:8px;
  padding:22px;
  border-radius:var(--r-card);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--highlight),0 16px 30px -26px var(--shadow-ink);
  min-width:0;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.help-link:hover{
  transform:translateY(-4px);
  border-color:var(--accent-block);
  box-shadow:inset 0 1px 0 var(--highlight),0 30px 46px -28px var(--shadow-g-deep);
}
.help-link h3{font-size:17px;margin:0}
.help-link p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}
.help-link .help-go{margin-top:auto;padding-top:6px}

/* ===== 窄屏 ===== */
@media (max-width:768px){
  .page-hero h1{font-size:clamp(28px,7vw,40px)}
  .help-grid{grid-template-columns:1fr;gap:14px}
  .help-links{grid-template-columns:1fr;gap:14px}
  .help-card{padding:18px}
  .help-body .faq-cat + .faq-cat{margin-top:32px}
}