/* ==========================================================================
   C6VPN · tutorial.css
   使用教程页专属：页首区、步骤块编号、平台小标题图标
   只消费 base.css / components.css 的令牌与组件，不重复定义已有组件。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页首区（暖纸底纹 + 蜜桃柔光，与首页同一套工艺）
   -------------------------------------------------------------------------- */
.guide-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-block:48px 8px;
  background:var(--bg);
}
.guide-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:34px 34px;
  background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,var(--mask-a),var(--mask-b) 70%,transparent);
  mask-image:linear-gradient(180deg,var(--mask-a),var(--mask-b) 70%,transparent);
  pointer-events:none;
}
.guide-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(72% 62% at 84% -12%,var(--halo-peach),transparent 68%);
  pointer-events:none;
}
.guide-hero .wrap{position:relative;z-index:1}

.guide-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:40px;
  align-items:start;
}
.guide-hero h1{
  margin-top:18px;
  font-size:clamp(32px,4vw,46px);
  line-height:1.16;
  letter-spacing:-.02em;
}
.guide-hero .sec-lead{max-width:580px}
.guide-hero .btn-row{margin-top:24px}
.guide-hero .callout{margin-top:32px}

.guide-prep{min-width:0}
.guide-prep .mono-label{display:block;margin-bottom:12px}
.guide-prep .check-list{margin-top:0}

/* --------------------------------------------------------------------------
   2. 步骤流：编号由 ::before 计数器给出，标题本身不做 flex
   -------------------------------------------------------------------------- */
.guide-flow{
  counter-reset:gstep;
  max-width:960px;
  padding-block:var(--sp-6) var(--sp-8);
}
.guide-step{
  counter-increment:gstep;
  min-width:0;
  padding-block:var(--sp-7);
  border-top:1px solid var(--border);
}
.guide-step:first-of-type{border-top:0;padding-top:var(--sp-6)}
.guide-step > h2{
  margin-bottom:var(--sp-3);
  font-size:clamp(21px,2.4vw,27px);
  line-height:1.32;
  letter-spacing:-.02em;
}
.guide-step > h2::before{
  content:counter(gstep,decimal-leading-zero);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:24px;
  margin-right:10px;
  padding:0 7px;
  border-radius:var(--r-xs);
  background:var(--tint-accent);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  vertical-align:3px;
}
.guide-step .btn-row{margin-top:var(--sp-4)}
.guide-step .mini-panel{margin:var(--sp-4) 0}
.guide-step .callout{margin-top:var(--sp-5)}

/* 平台小标题里的内联图标（h3 不做 flex，图标按行内块处理） */
.pi-inline{
  display:inline-block;
  width:18px;
  height:18px;
  margin-right:8px;
  vertical-align:-3px;
  color:var(--accent-dark);
}

/* --------------------------------------------------------------------------
   3. 响应式
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .guide-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .guide-prep{max-width:520px}
}

@media (max-width:820px){
  .guide-hero{padding-block:32px 4px}
  .guide-hero h1{font-size:clamp(28px,6.4vw,36px)}
  .guide-flow{padding-block:var(--sp-5) var(--sp-7)}
  .guide-step{padding-block:var(--sp-6)}
}

@media (max-width:640px){
  .guide-step > h2::before{
    min-width:32px;
    height:22px;
    margin-right:8px;
    font-size:10px;
  }
  .pi-inline{width:16px;height:16px;margin-right:6px}
}