/* ==========================================================================
   VPNFH — help centre page layer
   page head · quick entries · category stack · closing block
   ========================================================================== */

.help-main{position:relative;z-index:1}

/* ---------- page head ---------- */
.help-hero{padding-top:var(--sp-7);padding-bottom:var(--sp-6)}
.help-head{max-width:860px}
.help-title{
  margin-top:12px;
  font-size:clamp(34px,4.2vw,56px);
  line-height:1.1;
  letter-spacing:-.032em;
}
.help-lead{
  margin-top:14px;
  max-width:72ch;
  font-size:16px;
  line-height:1.8;
  color:var(--text-muted);
}
.help-lead strong{font-weight:600;color:var(--text)}
.help-badges{margin-top:18px}
.help-facts{margin-top:26px}

.help-quick{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-top:18px;
}
.help-quick a{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  padding:14px 16px;
  border-radius:var(--r-card);
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-pill);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.help-quick a:hover{
  transform:translateY(-1px);
  border-color:var(--accent-line);
  box-shadow:var(--shadow-card-soft);
}
.help-quick .qk{font-size:14px;font-weight:500;color:var(--text)}
.help-quick .qn{font-size:12px;line-height:1.5;color:var(--text-faint)}

/* ---------- body column ---------- */
.help-body{padding-bottom:var(--sp-8)}
.help-cat{padding-top:var(--sp-7)}
.help-cat:first-of-type{padding-top:var(--sp-5)}
.help-cat-head{max-width:720px}
.help-cat-title{margin-top:6px}
.help-cat-lead{
  margin-top:10px;
  max-width:70ch;
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-muted);
}
.help-cat .callout{margin-top:18px}
.help-cat .table-scroll{margin-top:20px}
.help-cat .faq{margin-top:20px}
.help-cat-foot{
  margin-top:14px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--text-faint);
}

/* ---------- closing ---------- */
.help-closing{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
  margin-top:var(--sp-8);
  padding-top:var(--sp-6);
  border-top:1px solid var(--border);
}
.help-closing .callout a{white-space:nowrap}

/* ---------- responsive ---------- */
@media (max-width:768px){
  .help-hero{padding-top:var(--sp-6);padding-bottom:var(--sp-5)}
  .help-title{font-size:clamp(28px,7.2vw,38px)}
  .help-lead{font-size:15px}
  .help-cat{padding-top:var(--sp-6)}
  .help-quick{grid-template-columns:1fr 1fr}
}

@media (max-width:420px){
  .help-quick{grid-template-columns:1fr}
  .help-closing .callout a{white-space:normal}
}