/* ==========================================================================
   VPNAF — deepdoc.css(完全指南页专属)
   1. 页头  2. 阶段路线图  3. 章节  4. 步骤列表  5. 页尾  6. 响应式
   ========================================================================== */

/* ---------- 1. 页头 ---------- */
.doc-hero{padding-block:clamp(40px,5vw,64px) clamp(18px,2.6vw,28px);}
.doc-hero h1{margin-bottom:18px;}
.doc-hero .lede{max-width:66ch;}
.doc-intro{
  margin-top:14px;
  max-width:66ch;
  font-size:15.5px;
  line-height:1.72;
  color:var(--text-muted);
}
.doc-intro a{
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.doc-intro a:hover{color:var(--accent-ink);}
.doc-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.doc-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:24px;
}

/* ---------- 2. 阶段路线图 ---------- */
.stage-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:clamp(28px,3.6vw,44px);
}
.stage{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:18px;
  border-radius:var(--radius-lg);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--white),var(--shadow-card);
  min-width:0;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.stage:hover{
  transform:translateY(-2px);
  border-color:var(--accent-dark);
  box-shadow:var(--shadow-lift),inset 0 1px 0 var(--white);
}
.stage__num{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.1em;
  color:var(--accent-ink);
}
.stage__title{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--text);
}
.stage__text{
  font-size:13px;
  line-height:1.55;
  color:var(--text-muted);
}

/* ---------- 3. 章节 ---------- */
.doc-body{padding-block:clamp(10px,1.6vw,18px) 0;}
.chapter{padding-block:clamp(32px,4vw,52px);}
.chapter + .chapter{border-top:1px solid var(--border);}
.chapter .kicker{margin-bottom:10px;}
.chapter h2{margin-bottom:clamp(14px,2vw,20px);}
.chapter .prose{max-width:74ch;}
.chapter .prose > h3:first-of-type{margin-top:1.2em;}
.doc-body pre{margin:1.2em 0;}

/* ---------- 4. 步骤列表 ---------- */
.prose .steps{
  counter-reset:step;
  display:grid;
  gap:12px;
  margin:1.2em 0;
  padding:0;
  list-style:none;
}
.prose .steps > li{
  position:relative;
  counter-increment:step;
  margin-block:0;
  padding-left:44px;
  min-height:30px;
  font-size:15.5px;
  line-height:1.7;
  color:var(--text);
}
.prose .steps > li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--row-current);
  color:var(--accent-ink);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.02em;
}
.prose .steps strong{color:var(--text);font-weight:700;}

/* ---------- 5. 页尾 ---------- */
.doc-foot{padding-block:clamp(24px,3vw,40px) 0;}

/* ---------- 6. 响应式 ---------- */
@media (max-width:900px){
  .stage-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:640px){
  .stage-grid{grid-template-columns:minmax(0,1fr);gap:10px;}
  .stage{padding:16px;}
  .doc-cta{gap:10px;}
  .doc-cta .cta-ghost{width:100%;justify-content:center;}
  .chapter .prose{max-width:none;}
  .prose .steps > li{padding-left:40px;font-size:15px;}
  .prose .steps > li::before{width:28px;height:28px;font-size:11px;}
}

@media (prefers-reduced-motion:reduce){
  .stage,.stage:hover{transform:none;transition:none;}
}