/* ==========================================================================
   VPNBu · tutorial.css
   使用教程页专属：暖纸颗粒 / 教程头 / 步骤序号标题 / 示例链接块 /
   平台索引卡 / 订阅信息插图 / 延伸阅读卡
   ========================================================================== */

/* --------------------------------------------------- 纸感颗粒（本页叠层） */
.grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)'/%3E%3C/svg%3E");
  opacity:.05;
  mix-blend-mode:multiply;
}

/* --------------------------------------------------------------- 教程头 */
.guide-hero{
  padding-top:54px;
  padding-bottom:10px;
  text-align:center;
}
.guide-hero h1{
  margin:16px auto;
  max-width:15em;
}
.guide-hero .lead{
  max-width:660px;
  margin:0 auto 24px;
}
.cta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.guide-hero .trust{margin-top:26px}
.guide-note{
  max-width:860px;
  margin:0 auto;
}

/* --------------------------------------------------------- 步骤序号标题 */
.guide-step{
  padding-top:6px;
  padding-bottom:14px;
}
.guide-step h2{
  position:relative;
  padding-left:56px;
  min-height:40px;
  margin-top:1.7em;
}
.guide-step h2::before{
  content:attr(data-step);
  position:absolute;
  left:0;
  top:1px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:0;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 1px 0 var(--hi-line);
}
.guide-step .cta-row{
  justify-content:flex-start;
  margin:18px 0 6px;
}

/* ----------------------------------------------------------- 示例链接块 */
.guide-code{
  display:block;
  margin:14px 0;
  padding:14px 16px;
  border-radius:var(--r-panel);
  background:var(--bg-panel3);
  border:1px dashed var(--border);
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-muted);
  overflow-wrap:anywhere;
}

/* --------------------------------------------------------- 平台索引卡 */
.guide-platforms{
  max-width:780px;
  margin:0 auto;
  text-align:center;
}
.guide-platforms-note{
  margin:0;
  font-size:14.5px;
  color:var(--text-muted);
}
.guide-platforms .platforms{
  max-width:430px;
  margin:16px auto 0;
}
.guide-platforms .plat{
  color:var(--text);
  border-radius:var(--r-tag);
}
.guide-platforms .plat:hover .plat-ic{
  background:var(--accent-soft);
  color:var(--accent-dark);
}

/* -------------------------------------------------- 订阅信息插图（窗口） */
.guide-figure{
  max-width:470px;
  margin:20px 0 6px;
}
.guide-figure .client-window{
  box-shadow:0 22px 44px -26px var(--accent-shadow), inset 0 1px 0 var(--hi-line);
}

/* --------------------------------------------------------- 延伸阅读卡 */
.guide-next .card{
  display:flex;
  flex-direction:column;
}
.guide-next .card-foot{
  margin-top:auto;
  align-self:flex-start;
}

/* --------------------------------------------------------------- 响应式 */
@media (max-width:640px){
  .guide-hero{padding-top:34px}
  .guide-step h2{padding-left:46px}
  .guide-step h2::before{
    width:32px;
    height:32px;
    font-size:12.5px;
  }
  .guide-figure{max-width:100%}
  .guide-step .cta-row{justify-content:center}
}