/* ==========================================================================
   VPNQK — pricing.css
   套餐页专属样式:首屏按钮行、档位说明块、流量包按钮、章节分隔小图
   (颜色 / 圆角 / 字体全部引用 base.css 的 :root 令牌)
   ========================================================================== */

/* ---------- 首屏次要入口 ---------- */
.pricing-hero-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:22px;
}
.pricing-hero-cta .btn{
  flex-shrink:0;
  white-space:nowrap;
}

/* ---------- 计费方式 tab ---------- */
.pricing-tabs .tablist{margin-inline:auto}
.pricing-tabs .tab-panel .plan-grid{margin-top:2px}

/* ---------- 套餐卡内的“适合”一行 ---------- */
.plan-fit{
  margin-top:-2px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ---------- 流量包卡按钮 ---------- */
.pack-cta{margin-top:12px}
.pack-cta .btn{
  width:100%;
  flex-shrink:0;
  white-space:nowrap;
}

/* ---------- 档位说明块 ---------- */
.tier-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.tier-block{
  min-width:0;
  padding:22px 24px;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
}
.tier-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px;
  margin-bottom:10px;
}
.tier-head h3{
  font-size:17px;
  line-height:1.4;
}
.tier-block p{
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-muted);
}
.tier-block p + p{margin-top:10px}
.tier-block p strong{color:var(--text)}

/* ---------- 补充说明行 ---------- */
.pricing-note{
  margin-top:16px;
  font-size:13px;
  line-height:1.8;
  color:var(--text-muted);
}

/* ---------- 章节之间的细线等距小图 ---------- */
.sec-mark{
  display:flex;
  justify-content:center;
  max-width:100%;
  padding:0 var(--gutter);
  color:var(--accent);
  opacity:.4;
}
.sec-mark svg{
  display:block;
  width:54px;
  height:54px;
  flex:none;
}

/* ---------- 窄屏 ---------- */
@media (max-width:640px){
  .pricing-hero-cta{
    flex-direction:column;
    align-items:stretch;
  }
  .pricing-hero-cta .btn{width:100%}
  .tier-block{padding:18px}
  .tier-head h3{font-size:16px}
  .sec-mark svg{width:44px;height:44px}
}