/* ==========================================================================
   VPNPX . pricing.css  (page: plans.html)
   页首价格区 / 价格一览表 / 档位说明 / 包含清单 / 支付 / 退款面板
   ========================================================================== */

/* ------------------------------------------------------------------ 页首 */
.price-hero{
  overflow-x:clip;
  max-width:100%;
}
.price-hero-head{
  max-width:780px;
  margin:0 auto 40px;
  text-align:center;
}
.price-hero-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(34px,4.2vw,56px);
  line-height:1.08;
  letter-spacing:-.03em;
  margin:0 0 16px;
  color:var(--text);
}
.price-hero-lede{
  margin:0 auto 14px;
  max-width:620px;
  font-size:16.5px;
  line-height:1.74;
  color:var(--text-muted);
}
.price-hero-fact{
  margin:0 auto 26px;
  max-width:640px;
  font-size:14.5px;
  line-height:1.78;
  color:var(--text-muted);
}
.price-hero-fact strong{
  color:var(--text);
  font-weight:700;
}
.price-hero-cta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

/* --------------------------------------------------------- 价格一览表 */
.plan-table-block{
  max-width:980px;
  margin:0 auto;
  min-width:0;
}
.plan-table-title{
  margin:0 0 12px;
  text-align:center;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--text-muted);
}
.plan-table .plan-price-cell{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--accent-dark);
  white-space:nowrap;
}

/* --------------------------------------------------------- 计费方式 tabs */
.billing-tabs{
  min-width:0;
}
.billing-tabs .tablist{
  margin:0 auto 6px;
}
.billing-tabs .tab-panel{
  padding-top:26px;
}

/* 卡片内补充说明 */
.price-fit{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ------------------------------------------------------------ 档位说明 */
.tier-notes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  min-width:0;
}
.tier-note{
  min-width:0;
  padding:22px 22px 20px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
  background:var(--surface);
  box-shadow:0 18px 40px -34px var(--accent-a35);
}
.tier-note-title{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.4;
  color:var(--accent-dark);
}
.tier-note p{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.78;
  color:var(--text-muted);
}
.tier-note .tier-note-limit{
  margin:0;
  padding-top:10px;
  border-top:1px dashed var(--border);
  font-size:13px;
  line-height:1.7;
  color:var(--text);
}

/* -------------------------------------------------------- 包含清单 */
.included-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  list-style:none;
  margin:0;
  padding:0;
  min-width:0;
}
.included-item{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  margin:0;
  padding:22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
  background:var(--surface);
  box-shadow:0 18px 40px -34px var(--accent-a35);
}
.inc-icon{
  display:block;
  flex:none;
  width:26px;
  height:26px;
  margin-bottom:2px;
  color:var(--accent);
}
.included-title{
  margin:0;
  font-size:16px;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.35;
  color:var(--text);
}
.included-text{
  margin:0;
  font-size:13.5px;
  line-height:1.72;
  color:var(--text-muted);
}

/* ---------------------------------------------------------- 对比表 */
.compare-table td{
  font-size:13.5px;
  color:var(--text-muted);
}
.compare-table tbody th{
  width:28%;
}

/* ---------------------------------------------------------- 支付方式 */
.pay-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-bottom:20px;
  min-width:0;
}
.pay-card{
  min-width:0;
  padding:22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
  background:var(--surface);
  box-shadow:0 18px 40px -34px var(--accent-a35);
}
.pay-name{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text);
}
.pay-text{
  margin:0;
  font-size:13.5px;
  line-height:1.76;
  color:var(--text-muted);
}

.pay-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  counter-reset:pay-step;
  min-width:0;
}
.pay-steps li{
  position:relative;
  min-width:0;
  margin:0;
  padding:18px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-soft);
  background-color:var(--bg-panel);
  font-size:13.5px;
  line-height:1.72;
  color:var(--text-muted);
  counter-increment:pay-step;
}
.pay-steps li::before{
  content:counter(pay-step,decimal-leading-zero);
  display:block;
  margin-bottom:6px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--accent);
}
.pay-steps strong{
  display:block;
  margin-bottom:2px;
  font-size:14px;
  font-weight:700;
  color:var(--text);
}

/* ---------------------------------------------------------- 退款面板 */
.refund-panel{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);
  gap:26px;
  align-items:start;
  padding:28px;
  border-radius:var(--radius-lg);
  border:1px solid var(--violet-a28);
  background:linear-gradient(132deg, var(--accent-a10) 0%, var(--violet-a14) 100%);
  min-width:0;
}
.refund-figure{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  min-width:0;
  padding:6px 0;
}
.refund-days{
  margin:0;
  font-family:var(--font-mono);
  font-size:clamp(44px,6vw,64px);
  font-weight:700;
  line-height:;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--accent-dark);
}
.refund-unit{
  margin-left:4px;
  font-size:.36em;
  font-weight:600;
  color:var(--text-muted);
}
.refund-label{
  margin:0;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--text-muted);
}
.refund-body{
  min-width:0;
}
.refund-body h3{
  margin:0 0 10px;
}
.refund-body p{
  margin:0 0 12px;
  font-size:14.5px;
  line-height:1.78;
  color:var(--text-muted);
}
.refund-body ul{
  margin:0 0 12px;
  padding-left:1.1em;
  font-size:14px;
  line-height:1.75;
  color:var(--text-muted);
}
.refund-body ul li{
  margin:0 0 6px;
}
.refund-body p:last-child{
  margin-bottom:0;
}

/* ------------------------------------------------------------ 断点 */
@media (max-width:1024px){
  .tier-notes{grid-template-columns:repeat(2,minmax(0,1fr));}
  .included-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pay-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .refund-panel{grid-template-columns:minmax(0,1fr);gap:20px;}
  .refund-figure{flex-direction:row;align-items:baseline;gap:12px;}
}
@media (max-width:768px){
  .price-hero-head{margin-bottom:30px;}
  .price-hero-lede{font-size:15.5px;}
  .pay-grid{grid-template-columns:minmax(0,1fr);}
  .refund-panel{padding:22px;}
  .refund-days{font-size:44px;}
  .compare-table tbody th{width:auto;}
}
@media (max-width:640px){
  .tier-notes{grid-template-columns:minmax(0,1fr);}
  .included-grid{grid-template-columns:minmax(0,1fr);}
  .pay-steps{grid-template-columns:minmax(0,1fr);}
  .price-hero-cta .btn{flex:1 1 160px;}
  .tier-note{padding:20px;}
  .pay-card{padding:20px;}
}