/* ==========================================================================
   VPNQF · pricing.css
   套餐页专属样式:价格一览表、选档说明、共同包含清单、付款与退款流程。
   所有颜色 / 圆角 / 阴影一律引用 base.css 的 :root 令牌。
   ========================================================================== */

/* ---- 价格一览表 ---- */
.price-table{min-width:660px;}
.price-table tbody th{
  white-space:nowrap;
  font-weight:700;
  color:var(--text);
}
.table-foot-note{
  margin:14px 0 0;
  max-width:80ch;
  font-size:13.5px;
  line-height:1.78;
  color:var(--text-muted);
}
.table-foot-note + .table-foot-note{margin-top:8px;}

/* ---- 选档说明 ---- */
.sub-kicker{margin-top:var(--space-7);}
.price-note-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
}
.price-note{
  min-width:0;
  padding:20px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-1);
  box-shadow:var(--shadow-soft);
}
.price-note h3{
  margin:0 0 8px;
  font-size:17px;
  letter-spacing:-.015em;
}
.price-note p{
  margin:0;
  font-size:14px;
  line-height:1.78;
  color:var(--text-muted);
}

/* ---- 流量包按钮 ---- */
.traffic-pack .btn{margin-top:10px;}

/* ---- 共同包含清单 ---- */
.included-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px 28px;
  margin:0;
  padding:0;
  list-style:none;
}
.included-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  font-size:14.5px;
  line-height:1.72;
  color:var(--text-muted);
}
.included-list svg{
  flex:none;
  width:16px;
  height:16px;
  margin-top:4px;
  color:var(--success);
}

/* ---- 对比表 ---- */
.compare-table{min-width:780px;}

/* ---- 付款方式 ---- */
.pay-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
  margin:0 0 var(--space-6);
  padding:0;
  list-style:none;
}
.pay-card{
  min-width:0;
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-1);
  box-shadow:var(--shadow-card);
}
.pay-name{
  display:block;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--text);
}
.pay-note{
  display:block;
  margin-top:6px;
  font-size:13px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ---- 流程步骤 ---- */
.price-flow{
  counter-reset:flow;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
  margin:0 0 var(--space-5);
  padding:0;
  list-style:none;
}
.price-flow li{
  position:relative;
  min-width:0;
  padding:16px 18px 16px 54px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  font-size:14px;
  line-height:1.75;
  color:var(--text-muted);
}
.price-flow li::before{
  counter-increment:flow;
  content:counter(flow,decimal-leading-zero);
  position:absolute;
  left:16px;
  top:15px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--accent);
}

@media (max-width:520px){
  .price-flow li{padding:14px 16px 14px 46px;}
  .price-flow li::before{left:14px;top:13px;}
}