/* ==========================================================================
   VPNYN · pricing.css
   套餐页专属:页头排布 / 计费提示 / 权益清单 / 对比表注 / 支付方式 / 开通步骤
   颜色、圆角、字体一律引用 base.css 的设计令牌,不散落硬编码值
   ========================================================================== */

/* --- 页头区(与下一区块的间距交给下一区块的顶部节奏) --------------------- */
.price-head{padding-bottom:0;}
.price-cta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:26px;
}
.chip-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:24px;
}
.chip-row>li{display:flex;min-width:0;max-width:100%;}

/* --- 计费方式提示行 ------------------------------------------------------ */
.plan-hint{
  margin:0 0 18px;
  padding:2px 0 2px 14px;
  border-left:2px solid var(--accent-24);
  font-size:13.5px;
  line-height:23px;
  color:var(--muted);
}

/* --- 所有套餐均包含 ------------------------------------------------------ */
.inc-panel{padding:30px;}
.inc-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 28px;
}
.inc-grid>*{min-width:0;}
.inc-item{display:flex;gap:12px;align-items:flex-start;}
.inc-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:var(--r-xs);
  background:var(--sage-14);
  color:var(--on-sage);
  flex:0 0 auto;
}
.inc-ico svg{display:block;}
.inc-item h3{font-size:15px;}
.inc-item p{margin-top:5px;font-size:13.5px;line-height:23px;color:var(--muted);}

/* --- 对比表 -------------------------------------------------------------- */
.cmp-block+.cmp-block{margin-top:32px;}
.cmp-block h3{margin-bottom:12px;}
.cmp-note{margin-top:12px;font-size:12.5px;line-height:21px;color:var(--muted);}

/* --- 支付方式 ------------------------------------------------------------ */
.pay-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.pay-row>*{min-width:0;}
.pay-card{
  display:flex;
  align-items:center;
  gap:13px;
  padding:18px 20px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-inner-hi);
}
.pay-name{font-size:15px;font-weight:700;letter-spacing:-.01em;}
.pay-sub{margin-top:3px;font-size:12.5px;line-height:20px;color:var(--muted);}
.pay-flow{
  margin-top:18px;
  max-width:840px;
  font-size:14px;
  line-height:25px;
  color:var(--muted);
}

/* --- 退款承诺 ------------------------------------------------------------ */
.refund-body{margin-top:18px;max-width:840px;}
.refund-body p{font-size:14.5px;line-height:26px;color:var(--muted);}
.refund-body p+p{margin-top:12px;}

/* --- 开通步骤(序号圆标走 CSS counter,窄屏不塞 CJK) ---------------------- */
.flow-steps{
  counter-reset:flow;
  display:grid;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
.flow-steps>li{
  counter-increment:flow;
  position:relative;
  padding:18px 22px 18px 68px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-inner-hi);
}
.flow-steps>li::before{
  content:"0" counter(flow);
  position:absolute;
  left:20px;
  top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:var(--r-xs);
  background:var(--accent-08);
  border:1px solid var(--accent-16);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
}
.flow-steps h3{font-size:15.5px;}
.flow-steps p{margin-top:6px;font-size:13.5px;line-height:24px;color:var(--muted);}

/* --- 响应式 -------------------------------------------------------------- */
@media (max-width:900px){
  .inc-grid{grid-template-columns:minmax(0,1fr);gap:18px;}
  .pay-row{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:640px){
  .inc-panel{padding:20px;}
  .price-cta{margin-top:22px;}
  .chip-row{margin-top:20px;}
  .flow-steps>li{padding:16px 18px 16px 60px;}
  .flow-steps>li::before{left:16px;top:16px;}
}