@charset "utf-8";
/* ============================================================================
   VPNTA · pricing.css
   套餐页专属：价格一览 / 月订阅卡 / 流量包卡 / 包含清单 / 支付与流程 /
   退款面板 / 底部 CTA 带。颜色全部引用 base.css 令牌。
   ========================================================================== */

/* —— 页首 —— */
.price-hero{
  position:relative;
  max-width:100%;
  overflow-x:clip;
  padding-top:clamp(30px,4.4vw,58px);
  padding-bottom:clamp(20px,3vw,36px);
  background:linear-gradient(180deg,var(--glass-55),var(--glass-00) 72%);
}
.price-hero .mono-label{margin-bottom:14px;}
.price-hero .lede{margin-top:16px;max-width:60ch;}

.price-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:24px;
}

.hero-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:22px;
}

/* —— 价格一览表下方的锚点跳转 —— */
.price-jump{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.price-jump .chip{
  min-height:30px;
  padding:0 12px;
  color:var(--accent-dark);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.price-jump .chip:hover{
  border-color:var(--accent);
  background:var(--accent-06);
}

/* —— 月订阅卡片补充 —— */
.plan-note{
  font-size:12.5px;
  line-height:1.68;
  color:var(--text-muted);
}
.plan-foot{
  margin-top:20px;
  font-size:13px;
  line-height:1.72;
  color:var(--text-muted);
  max-width:78ch;
}

/* —— 流量包 —— */
.pack-grid{
  display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:22px;
}
.pack-grid > *{min-width:0;}

.pack-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:24px 22px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--glass-98),var(--bg-panel));
  box-shadow:var(--shadow-soft),inset 0 1px 0 var(--surface);
}
.pack-tag{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:24px;
  padding:0 10px;
  border-radius:var(--r-xs);
  background:var(--violet-13);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--accent-dark);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pack-name{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--text-muted);
}
.pack-price{
  font-family:var(--font-display);
  font-size:clamp(30px,3.4vw,38px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--text);
}
.pack-size{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:26px;
  padding:0 10px;
  border-radius:var(--r-xs);
  background:var(--accent-09);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--accent-dark);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pack-note{
  font-size:13px;
  line-height:1.72;
  color:var(--text-muted);
}
.pack-card .btn{
  margin-top:auto;
  width:100%;
}

/* 流量包说明与卡片之间留白 */
#packs .callout{margin-top:22px;}

/* —— 所有套餐均包含 —— */
.include-panel{margin-top:22px;}
.include-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 28px;
}
.include-list li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:14px;
  line-height:1.72;
  color:var(--text);
  min-width:0;
}
.include-list .tick{
  width:14px;
  height:14px;
  margin-top:4px;
}

/* —— 支付方式 —— */
.pay-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}
.pay-grid > *{min-width:0;}

.pay-card{
  padding:20px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-soft),inset 0 1px 0 var(--surface);
}
.pay-name{
  display:block;
  font-family:var(--font-display);
  font-size:15.5px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
}
.pay-note{
  margin-top:8px;
  font-size:13px;
  line-height:1.72;
  color:var(--text-muted);
}

/* —— 开通流程 —— */
.flow-block{margin-top:clamp(26px,3.2vw,40px);}
.flow-block > h3{margin-bottom:18px;}

/* —— 退款面板 —— */
.refund-panel{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,3vw,36px);
  align-items:center;
}
.refund-num{
  font-family:var(--font-display);
  font-size:clamp(48px,7vw,76px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--accent-dark);
}
.refund-num small{
  display:block;
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--text-muted);
  white-space:nowrap;
}
.refund-body > h2{
  font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem);
}
.refund-body > p{
  margin-top:10px;
  font-size:14.5px;
  line-height:1.78;
  color:var(--text-muted);
}
.refund-body .row{margin-top:16px;}

/* —— 底部 CTA 带 —— */
.cta-band{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:clamp(22px,3vw,34px);
  border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--ink-900),var(--ink-800));
  box-shadow:var(--term-shadow);
}
.cta-band-body{flex:1 1 280px;min-width:0;}
.cta-band h2{
  color:var(--on-ink);
  font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);
}
.cta-band p{
  margin-top:8px;
  font-size:14px;
  line-height:1.72;
  color:var(--on-ink-mid);
}
.cta-band .btn{flex-shrink:0;white-space:nowrap;}

/* —— 响应式 —— */
@media (max-width:980px){
  .pack-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pay-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:768px){
  .refund-panel{grid-template-columns:1fr;align-items:start;}
  .refund-num{font-size:clamp(44px,10vw,60px);}
}

@media (max-width:640px){
  .price-actions{width:100%;}
  .price-actions .btn{flex:1 1 100%;}
  .pack-grid{grid-template-columns:1fr;}
  .pay-grid{grid-template-columns:1fr;}
  .include-list{grid-template-columns:1fr;gap:10px;}
  .refund-body .row .btn{flex:1 1 100%;}
  .cta-band .btn{width:100%;}
}