/* ==========================================================================
   VPNAY · pricing.css —— 套餐页(price.html)专属样式
   只补齐 components.css 未覆盖的部分:页头间距、流量包注记、包含清单、
   支付卡、开通流程步骤、退款卡、对比表注记、装饰拓扑线
   ========================================================================== */

/* ---------- 页头:主 CTA 与事实带 ---------- */
.page-head .btn-row{margin-top:28px}
.page-head .fact-strip{margin-top:28px}

/* ---------- 流量包卡片注记 ---------- */
.pack-note{font-size:13px;line-height:1.7;color:var(--muted)}

/* ---------- 所有套餐均包含 ---------- */
.incl-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.incl-grid > *{min-width:0}
.incl-item{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px 20px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
}
.incl-ico{
  display:grid;
  place-items:center;
  flex:none;
  width:38px;
  height:38px;
  border-radius:var(--r-md);
  background:var(--accent-08);
  color:var(--accent);
}
.incl-ico svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.incl-item h3{font-size:16px}
.incl-item p{font-size:13.5px;line-height:1.7;color:var(--muted)}

/* ---------- 支付方式 ---------- */
.pay-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.pay-grid > *{min-width:0}
.pay-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:20px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.pay-card h3{font-size:16px}
.pay-card p{font-size:13.5px;line-height:1.7;color:var(--muted)}

/* ---------- 装饰拓扑线(aria-hidden;draw-lines 描线目标) ---------- */
.pay-flow{margin:28px 0 0}

/* ---------- 开通流程步骤 ---------- */
.steps{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:grid;
  gap:16px;
  counter-reset:pay-step;
}
.steps li{
  position:relative;
  padding-left:46px;
  font-size:14.5px;
  line-height:1.75;
  color:var(--muted);
}
.steps li::before{
  counter-increment:pay-step;
  content:counter(pay-step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--panel);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  color:var(--accent);
}
.steps li b{display:block;margin-bottom:2px;font-size:15px;color:var(--ink)}

/* ---------- 退款卡 ---------- */
.refund-card{
  padding:26px 24px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
}
.refund-card h3{font-size:19px;font-weight:800;letter-spacing:-.02em}
.refund-card p{
  margin-top:12px;
  font-size:14.5px;
  line-height:1.8;
  color:var(--muted);
  max-width:62em;
}
.refund-points{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:10px;
  font-size:14.5px;
  line-height:1.75;
  color:var(--muted);
}
.refund-points li{display:flex;gap:10px}
.refund-points li::before{content:'✓';flex:none;color:var(--success);font-weight:700}
.refund-card .refund-note{
  margin-top:18px;
  padding-top:14px;
  border-top:1px dashed var(--border);
  font-size:13.5px;
}

/* ---------- 对比表注记 ---------- */
.compare-note{margin-top:14px;font-size:13.5px;line-height:1.7;color:var(--muted)}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  .incl-grid,.pay-grid{grid-template-columns:1fr}
  .steps li{padding-left:42px}
}