/* ==========================================================================
   VPNFN · pricing.css
   套餐页专属样式:页头、套餐卡补充、流量包卡、包含清单、
   支付方式、退款面板、装饰连线。
   颜色 / 圆角 / 字体一律引用 :root 令牌,不写硬编码色值。
   ========================================================================== */

/* ===== 页头 ===== */
.price-hero{padding-block:56px 40px}
.price-hero .kicker{margin-bottom:14px}
.price-hero h1{margin-bottom:16px}
.price-hero .lead{margin-bottom:24px}
.price-hero .fact-row{margin-bottom:26px}
.price-hero .fact-chip b{
  font-variant-numeric:tabular-nums;
  display:inline-block;
  min-width:4ch;
}
.price-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* ===== 套餐卡补充 ===== */
.plan-desc{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0}

.plan-d-detail-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:28px;
}
.plan-detail-grid>*{min-width:0}
.plan-detail{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:22px;
  box-shadow:inset 0 1px 0 var(--highlight),0 16px 30px -28px var(--shadow-ink);
  min-width:0;
}
.plan-detail h3{font-size:17px;margin-bottom:10px}
.plan-detail p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 10px}
.plan-detail p:last-child{margin-bottom:0}

/* ===== 流量包卡 ===== */
.pack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pack-grid>*{min-width:0}
.pack-card{
  display:flex;flex-direction:column;gap:14px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:24px;
  box-shadow:inset 0 1px 0 var(--highlight),0 18px 34px -26px var(--shadow-ink);
  transition:transform .2s e ase,box-shadow .2s ease,border-color .2s ease;
  min-width:0;
}
.pack-card:hover{
  transform:translateY(-4px);
  border-color:var(--accent-block);
  box-shadow:inset 0 1px 0 var(--highlight),0 30px 46px -28px var(--shadow-g-deep);
}
.pack-size{
  display:inline-flex;align-items:baseline;gap:6px;
  font-family:var(--font-mono);color:var(--accent-dark);
}
.pack-size b{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1}
.pack-size span{font-size:13px;color:var(--muted)}
.pack-price{display:flex;align-items:baseline;gap:8px}
.pack-price b{font-family:var(--font-display);font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1}
.pack-price span{font-size:13.5px;color:var(--muted)}
.pack-card p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}
.pack-card .btn{margin-top:auto}

/* ===== 所有套餐均包含 ===== */
.include-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.include-grid>*{min-width:0}
.include-item{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:var(--r-md);
  padding:18px;
  box-shadow:inset 0 1px 0 var(--highlight);
  min-width:0;
}
.include-item svg{
  width:20px;height:20px;flex:0 0 auto;margin-top:2px;
  fill:none;stroke:var(--accent);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.include-item h3{font-size:15.5px;margin:0 0 4px}
.include-item p{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0}

/* ===== 装饰连线 ===== */
.topo-lines{
  display:block;width:100%;height:auto;max-width:100%;
  margin:0 0 20px;opacity:.55;
}

/* ===== 支付方式 ===== */
.pay-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;margin-bottom:26px;
}
.pay-grid>*{min-width:0}
.pay-card{
  display:flex;flex-direction:column;gap:8px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:20px;
  box-shadow:inset 0 1px 0 var(--highlight);
  min-width:0;
}
.pay-mark{
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;color:var(--accent-dark);
}
.pay-card b{font-family:var(--font-display);font-size:17px;font-weight:800}
.pay-card span:last-child{font-size:13.5px;line-height:1.65;color:var(--muted)}

.pay-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  counter-reset:pay-step;
}
.pay-steps>*{min-width:0}
.pay-steps li{
  counter-increment:pay-step;
  background:var(--bg-panel-2);
  border:1px solid var(--border-soft);
  border-radius:var(--r-md);
  padding:18px;
  font-size:13.5px;line-height:1.65;color:var(--muted);
  min-width:0;
}
.pay-steps li::before{
  content:counter(pay-step,decimal-leading-zero);
  display:block;margin-bottom:8px;
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.1em;color:var(--accent-dark);
}
.pay-steps li b{display:block;font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px}

/* ===== 退款面板 ===== */
.refund-panel{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:30px;
  box-shadow:inset 0 1px 0 var(--highlight),0 22px 40px -30px var(--shadow-ink);
  min-width:0;
}
.refund-panel h2{margin-bottom:14px}
.refund-panel > p{font-size:15px;line-height:1.75;color:var(--muted);max-width:72ch}
.refund-steps{
  display:flex;flex-direction:column;gap:10px;
  margin-top:20px;max-width:72ch;
  counter-reset:refund-step;
}
.refund-steps li{
  counter-increment:refund-step;
  position:relative;padding-left:38px;
  font-size:14.5px;line-height:1.7;color:var(--muted);
}
.refund-steps li::before{
  content:counter(refund-step);
  position:absolute;left:0;top:.08em;
  display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--accent-tint);color:var(--accent-dark);
  font-family:var(--font-mono);font-size:12.5px;font-weight:700;
}

/* ===== 响应式 ===== */
@media (max-width:1024px){
  .plan-detail-grid{grid-template-columns:1fr}
  .pack-grid{grid-template-columns:1fr}
  .pay-steps{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  .price-hero{padding-block:40px 32px}
  .pay-steps{grid-template-columns:1fr}
  .refund-panel{padding:22px}
  .topo-lines{margin-bottom:14px}
}