/* ==========================================================================
   VPNBu · pricing.css（套餐页专属样式）
   只补充 base.css / components.css 未覆盖的局部组件，全部走 :root 令牌
   ========================================================================== */

/* ---------------------------------------------------------- 纸感颗粒层 */
.grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='pn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23pn)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  opacity:.04;
}

/* ------------------------------------------------------------ 首屏区块 */
.pricing-hero{
  text-align:center;
  padding-top:calc(var(--sec-y) * .85);
  padding-bottom:calc(var(--sec-y) * .55);
}
.pricing-hero .eyebrow{margin-bottom:18px}
.pricing-hero h1{margin:0 auto 18px;max-width:15em}
.pricing-hero .lead{max-width:780px;margin:0 auto 28px}
.pricing-hero .cta-row{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px;margin:0 0 26px;
}

/* -------------------------------------------------- 套餐区与流量包区 */
.bill-note{
  max-width:860px;
  margin:20px auto 0;
  font-size:13.5px;
  line-height:1.75;
  color:var(--text-muted);
  text-align:center;
}
.plan-fit{
  margin:0 0 16px;
  font-size:13.5px;
  line-height:1.65;
  color:var(--text-muted);
}
.plan-fit strong{color:var(--text);font-weight:600}
.pack-card .btn{margin-top:16px}

/* ------------------------------------------------------ 均包含能力格 */
.inc-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.inc-item{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-panel);
  padding:20px;
  min-width:0;
  box-shadow:inset 0 1px 0 var(--hi-line),0 18px 34px -28px var(--accent-shadow);
}
.inc-ic{
  width:40px;height:40px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;flex-shrink:0;
}
.inc-ic svg{width:20px;height:20px}
.inc-item h3{font-size:15.5px;margin:0 0 6px}
.inc-item p{margin:0;font-size:13.5px;line-height:1.65;color:var(--text-muted)}

/* -------------------------------------------------------- 对比表说明 */
.compare-caption{
  caption-side:top;
  padding:14px 16px 12px;
  text-align:left;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--text-faint);
  background:var(--bg-panel3);
  border-bottom:1px solid var(--border);
}
.table-scroll th[scope="row"]{
  color:var(--text);
  font-weight:600;
  white-space:nowrap;
}

/* ------------------------------------------------------------ 支付区 */
.pay-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-bottom:34px;
}
.pay-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-panel);
  padding:22px 20px;
  min-width:0;
  text-align:center;
  box-shadow:inset 0 1px 0 var(--hi-line),0 18px 34px -28px var(--accent-shadow);
}
.pay-ic{
  width:46px;height:46px;border-radius:14px;
  background:var(--bg-panel2);color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;flex-shrink:0;
}
.pay-ic svg{width:24px;height:24px}
.pay-card h3{font-size:16px;margin:0 0 6px}
.pay-card p{margin:0;font-size:13.5px;line-height:1.65;color:var(--text-muted)}
.pay-steps{max-width:760px;margin:0 auto}

/* ------------------------------------------------------------ 退款区 */
.refund-panel{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:30px;
  align-items:center;
  background:linear-gradient(140deg,var(--accent-soft) 0%,var(--bg-panel) 58%);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:30px 32px;
  min-width:0;
  box-shadow:inset 0 1px 0 var(--hi-line),0 26px 52px -30px var(--accent-shadow);
}
.refund-num{
  font-family:var(--font-mono);
  font-size:clamp(34px,3.8vw,50px);
  font-weight:700;
  color:var(--accent-dark);
  letter-spacing:-.03em;
  line-height:1.05;
  white-space:nowrap;
}
.refund-num small{
  display:block;
  margin-top:10px;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0;
  color:var(--text-muted);
}
.refund-body h2{margin:0 0 10px}
.refund-body p{margin:0 0 10px;font-size:14.5px;line-height:1.72;color:var(--text-muted)}
.refund-body p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ 响应式 */
@media (max-width:1100px){
  .inc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .inc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pay-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .refund-panel{grid-template-columns:1fr;gap:16px;padding:24px 20px}
  .refund-num{font-size:34px}
  .pricing-hero{padding-top:calc(var(--sec-y) * .7);padding-bottom:calc(var(--sec-y) * .45)}
}
@media (max-width:640px){
  .inc-grid{grid-template-columns:1fr}
  .pay-steps{padding-left:0}
}