/* ==========================================================================
   VPNVO · deepdoc layer (knowledge.html only)
   doc hero · long-form reading column · chapter rhythm
   ========================================================================== */

.doc-hero{
  position:relative;
  overflow-x:clip;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg) 62%, var(--bg-panel) 100%);
  border-bottom:1px solid var(--border);
}
.doc-hero .halo{
  top:-340px;
  right:-220px;
  width:760px;
  height:760px;
  opacity:.9;
}
.doc-hero .bg-circuit{
  height:420px;
  opacity:.7;
}
.doc-hero-inner{
  position:relative;
  z-index:2;
  padding-top:34px;
  padding-bottom:38px;
  text-align:center;
}
.doc-title{
  margin:14px 0 0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(32px, 3.6vw, 52px);
  line-height:1.08;
  letter-spacing:-.035em;
  color:var(--text);
}
.doc-lead{
  margin:16px auto 0;
  max-width:660px;
  font-size:15px;
  line-height:1.72;
  color:var(--text-muted);
}
.doc-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}
.doc-meta li{display:inline-flex;min-width:0}

.doc-wrap{
  padding-top:var(--sp-6);
  padding-bottom:var(--sp-8);
}
.doc-body{
  max-width:76ch;
  margin-inline:auto;
}
.doc-body > section{
  padding-top:var(--sp-6);
  border-top:1px solid var(--border);
}
.doc-body > section:first-of-type{
  padding-top:0;
  border-top:0;
}
.doc-body > section + section{
  margin-top:var(--sp-7);
}
.doc-body > section > h2{
  margin-top:0;
}
.doc-body > section > p:first-of-type{
  margin-top:var(--sp-3);
}
.doc-body .table-scroll{
  margin-top:var(--sp-4);
}
.doc-body .callout{
  margin-top:var(--sp-4);
}
.doc-body .faq{
  margin-top:var(--sp-4);
}

@media (max-width:768px){
  .doc-hero-inner{padding-top:24px;padding-bottom:28px}
  .doc-title{font-size:clamp(28px, 7.4vw, 38px)}
  .doc-lead{font-size:14px}
  .doc-hero .halo{top:-260px;right:-260px;width:620px;height:620px}
  .doc-hero .bg-circuit{height:300px}
}

@media (max-width:640px){
  .doc-meta{gap:6px}
  .doc-body > section + section{margin-top:var(--sp-6)}
}