/* ==========================================================================
   VPNAY · tutorial.css
   使用教程页专属:目录条版心对齐 / 步骤主线(虚线分隔 + 圆点标记)/
   平台小节 / 正文链接 / 结尾导航卡
   ========================================================================== */

/* --------------------------------------------------------------------------
   目录条:背景满宽(直接挂在 main 下,sticky 行程 = 整页),
   内容左右对齐版心,窄屏回落为 --gutter
   -------------------------------------------------------------------------- */
.toc-tabs{
  padding-left:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));
  padding-right:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));
}

/* --------------------------------------------------------------------------
   首屏事实带
   -------------------------------------------------------------------------- */
.page-head .fact-strip{margin-top:24px}

/* --------------------------------------------------------------------------
   步骤主线
   -------------------------------------------------------------------------- */
.step{padding-top:48px;padding-bottom:48px}
.step + .step{border-top:1px dashed var(--border)}
.wrap > .step:first-child{padding-top:28px}

.step h2{position:relative;padding-left:22px}
.step h2::before{
  content:'';
  position:absolute;
  left:0;
  top:.6em;
  width:11px;
  height:11px;
  margin-top:-5.5px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 0 4px var(--accent-08);
}

.step .btn-row{margin-top:24px}
.step .plan-grid{margin:24px 0}
.step .chip-row{margin:14px 0}

/* 正文内链接:藏蓝 + 细下划线,和正文区分但不抢眼 */
.prose a{
  color:var(--accent);
  font-weight:500;
  text-decoration:underline;
  text-decoration-color:var(--accent-22);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.prose a:hover{text-decoration-color:var(--accent)}

/* --------------------------------------------------------------------------
   平台小节
   -------------------------------------------------------------------------- */
.plat-step{margin-top:32px}
.plat-step h3 .plat-ico{
  display:inline-grid;
  place-items:center;
  width:32px;
  height:32px;
  margin-right:10px;
  border-radius:var(--r-md);
  background:var(--accent-08);
  color:var(--accent);
  vertical-align:middle;
}
.plat-step h3 .plat-ico svg{width:18px;height:18px}

/* --------------------------------------------------------------------------
   装饰拓扑连线(描线目标由 motion.js 的 draw-lines 配方接管)
   -------------------------------------------------------------------------- */
.step .topology{margin:28px 0}

/* --------------------------------------------------------------------------
   结尾导航卡
   -------------------------------------------------------------------------- */
.next-card{display:flex;flex-direction:column;gap:10px}
.next-card h3{font-size:17px}
.next-card p{font-size:13.5px;line-height:1.7;color:var(--muted)}
.link-more{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  margin-top:auto;
  padding-top:8px;
  font-size:14px;
  font-weight:600;
  color:var(--accent);
}
.link-more:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  .step{padding-top:36px;padding-bottom:36px}
  .wrap > .step:first-child{padding-top:20px}
  .step h2{padding-left:20px}
  .step h2::before{width:10px;height:10px;margin-top:-5px}
  .plat-step{margin-top:26px}
}