/* ==========================================================================
   VPN31 · pricing.css
   套餐页专属:价格一览表 / 流量包卡 / 档位说明 / 付款方式 / 底部 CTA 带
   所有颜色、圆角、间距一律引用 :root 设计令牌
   ========================================================================== */

/* ---------- 页首 ---------- */

.page-head .section-head h1{margin-bottom:14px;}

.price-summary{
  margin:0 0 var(--sp-3);
  padding:14px 18px;
  border-radius:var(--r-md);
  background-color:var(--panel-2);
  border:1px solid var(--border);
  font-size:14.5px;
  line-height:1.72;
  color:var(--text);
}

.price-summary strong{
  color:var(--accent-dark);
  font-weight:650;
}

/* ---------- 价格一览表 ---------- */

.price-table{min-width:800px;}

.price-table tbody th{
  background-color:var(--panel);
  font-weight:600;
  white-space:nowrap;
}

.price-table .price-cell{
  font-family:var(--font-mono);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--accent-dark);
  white-space:nowrap;
}

.table-note{
  margin:12px 0 0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--muted);
}

/* ---------- 流量包卡片 ---------- */

.pack-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
  align-items:stretch;
}

.pack-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:24px;
  border-radius:var(--r-xl);
  background-color:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  min-width:0;
  transition:transform .22s ease, box-shadow .22s ease;
}

.pack-card:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 46px -22px var(--accent-a32);
}

.pack-name{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:650;
  letter-spacing:-.008em;
  color:var(--text);
}

.pack-price{
  display:flex;
  align-items:baseline;
  gap:2px;
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(28px, 3.4vw, 36px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--text);
}

.pack-currency{
  font-size:.55em;
  font-weight:600;
  margin-right:2px;
}

.pack-note{
  margin:0;
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
}

.pack-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--text);
}

.pack-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.pack-list li::before{
  content:"";
  flex:none;
  width:6px;
  height:10px;
  margin-top:4px;
  border-right:2px solid var(--success);
  border-bottom:2px solid var(--success);
  transform:rotate(40deg);
}

.pack-card .btn{
  margin-top:auto;
  width:100%;
  white-space:nowrap;
  flex-shrink:0;
}

/* ---------- 档位说明 ---------- */

.tier-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1px;
  background-color:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}

.tier-note{
  padding:clamp(18px, 2.2vw, 24px);
  background-color:var(--panel);
  min-width:0;
}

.tier-note h3{
  margin-bottom:8px;
  font-size:15px;
  font-weight:650;
  letter-spacing:-.008em;
}

.tier-note p{
  margin:0;
  font-size:13.5px;
  line-height:1.78;
  color:var(--muted);
}

/* ---------- 统一包含清单 ---------- */

.include-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:12px 32px;
}

/* ---------- 对比表 ---------- */

.compare-table{min-width:900px;}

.compare-table th,
.compare-table td{white-space:nowrap;}

.compare-table tbody th{
  background-color:var(--panel);
  font-weight:600;
}

/* ---------- 付款方式 ---------- */

.pay-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px;
}

.pay-card{
  padding:20px;
  border-radius:var(--r-lg);
  background-color:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  min-width:0;
}

.pay-name{
  margin-bottom:6px;
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--accent-dark);
}

.pay-note{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
}

.pay-flow{
  margin-top:var(--sp-3);
  max-width:72ch;
}

.pay-flow p{
  margin:0 0 var(--sp-2);
  font-size:14.5px;
  line-height:1.8;
  color:var(--muted);
}

.pay-flow p:last-child{margin-bottom:0;}

/* ---------- 底部 CTA 带 ---------- */

.cta-band{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  padding:clamp(20px, 2.6vw, 30px);
  border-radius:var(--r-xl);
  background-image:var(--grad-candy);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
}

.cta-band h2{
  margin-bottom:6px;
  font-size:clamp(1.3rem, 2.1vw, 1.7rem);
}

.cta-band p{
  margin:0;
  max-width:52ch;
  font-size:13.5px;
  line-height:1.72;
  color:var(--muted);
}

.cta-band .btn-primary{
  margin-left:auto;
  flex-shrink:0;
  white-space:nowrap;
}

/* ---------- 响应式 ---------- */

@media (max-width:900px){
  .pack-grid{grid-template-columns:minmax(0, 1fr);}
  .tier-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

@media (max-width:640px){
  .tier-grid{grid-template-columns:minmax(0, 1fr);}
  .cta-band .btn-primary{margin-left:0;width:100%;}
}

@media (prefers-reduced-motion: reduce){
  .pack-card{transition:none;}
  .pack-card:hover{transform:none;}
}