/* ============================================================
   VPNYS · deepdoc.css
   深度指南页「怎么选」专属样式
   ============================================================ */

/* ---------- 页头 ---------- */
.doc-hero{
  position:relative;
  padding-top:64px;
  padding-bottom:56px;
  border-bottom:1px solid var(--border);
  overflow-x:clip;
  max-width:100%;
}
.doc-hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset:8% 2% auto auto;
  width:min(38vw,520px);aspect-ratio:1.4/1;
  background:radial-gradient(closest-side,var(--glow),transparent 72%);
  opacity:.75;
}
.doc-hero__in{position:relative;z-index:1;max-width:860px}
.doc-hero h1{
  margin-top:18px;
  font:900 clamp(36px,5.2vw,60px)/1.1 var(--font-display);
  letter-spacing:-.025em;
}
.doc-hero__lead{
  margin-top:16px;
  max-width:640px;
  font-size:17px;
  line-height:1.7;
  color:var(--text-muted);
}
.doc-hero__meta{
  margin-top:22px;
  display:flex;flex-wrap:wrap;gap:8px 20px;
  font:600 12.5px var(--font-mono);
  color:var(--text-muted);
}
.doc-hero__meta li{display:inline-flex;align-items:center;gap:7px}
.doc-hero__meta li::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--success);flex-shrink:0;
}

/* 装饰线条画(通行清单主题) */
.doc-hero__art{
  position:absolute;z-index:0;
  right:max(24px, calc((100vw - var(--container)) / 2 + 32px));
  top:50%;transform:translateY(-50%);
  width:min(320px,26vw);height:auto;
  color:var(--hl);opacity:.45;
  pointer-events:none;
}

/* ---------- 正文主体 ---------- */
.doc-article{position:relative}
.doc-body{
  max-width:880px;
  padding-top:48px;
  padding-bottom:72px;
}
.prose{min-width:0}
.doc-intro{
  padding-top:18px;
  padding-bottom:18px;
  padding-left:20px;
  padding-right:20px;
  margin-bottom:8px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-left:3px solid var(--hl);
  border-radius:var(--r);
  font-size:15.5px;
  line-height:1.75;
  color:var(--text);
}
.prose > section + section{margin-top:60px}
.prose h2{
  font-size:clamp(25px,3vw,32px);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.25;
  margin-bottom:16px;
  text-wrap:balance;
}
.h2-num{
  display:inline-grid;place-items:center;
  width:34px;height:34px;
  margin-right:10px;
  border-radius:var(--r-sm);
  background:var(--bg-panel-2);
  font:700 13px var(--font-mono);
  color:var(--accent);
  vertical-align:2px;
}
.prose h3{
  margin-top:26px;
  margin-bottom:10px;
  font-size:19px;
  font-weight:800;
  line-height:1.4;
}
.prose p{
  margin-top:12px;
  margin-bottom:12px;
  font-size:15.5px;
  line-height:1.85;
  color:var(--text);
}
.prose a{
  color:var(--hl);
  font-weight:600;
  border-bottom:1px solid transparent;
  transition:border-color .15s;
}
.prose a:hover{border-bottom-color:var(--hl)}
.prose .callout{margin-top:22px;margin-bottom:22px}
.prose .table-scroll{margin-top:20px;margin-bottom:20px}
.prose .faq{margin-top:18px}
.prose .promo-block{margin-top:56px}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .doc-hero__art{display:none}
}
@media (max-width:768px){
  .doc-hero{padding-top:44px;padding-bottom:40px}
  .doc-hero h1{font-size:34px}
  .doc-hero__lead{font-size:15.5px}
  .doc-body{padding-top:32px;padding-bottom:56px}
  .prose > section + section{margin-top:44px}
  .prose p{font-size:15px}
  .h2-num{width:28px;height:28px;font-size:12px}
}