/* ==========================================================================
   VPNAW — pricing.css
   套餐页专属：页面头 / 档位说明 / 权益清单 / 支付方式 / 退款流程 / 收尾带
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页面头
   -------------------------------------------------------------------------- */
.page-head{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  background:linear-gradient(180deg,var(--bg-hero-top) 0%,var(--bg-hero-bot) 100%);
  padding-top:56px;
  padding-bottom:56px;
  text-align:center;
}
.page-head .wrap{max-width:900px}
.page-head h1{margin:16px 0 16px}
.page-head .lede{max-width:660px;margin-inline:auto;margin-bottom:24px}
.page-head .ctas{margin-bottom:20px}
.page-head .trust{margin-bottom:0}

/* --------------------------------------------------------------------------
   2. 价格说明小字（tab 面板下方）
   -------------------------------------------------------------------------- */
.price-note{
  max-width:760px;
  margin:20px auto 0;
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  text-align:center;
}
.price-note strong{color:var(--text)}

/* --------------------------------------------------------------------------
   3. 档位说明（无卡纯排版三列）
   -------------------------------------------------------------------------- */
.tier-notes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 30px;
  margin-top:48px;
  border-top:1px solid var(--border);
}
.tier-note{padding-top:24px;min-width:0}
.tier-note h3{font-size:18px;margin-bottom:6px}
.tier-note .tier-price{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:12px;
}
.tier-note p{font-size:14px;line-height:1.85}
.tier-note p+p{margin-top:10px}

/* --------------------------------------------------------------------------
   4. 权益清单
   -------------------------------------------------------------------------- */
.incl-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 34px;
}
.incl-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  min-width:0;
}
.incl-list svg{width:16px;height:16px;flex:0 0 16px;margin-top:4px;color:var(--success)}
.incl-note{margin-top:26px;max-width:780px}

/* --------------------------------------------------------------------------
   5. 支付方式
   -------------------------------------------------------------------------- */
.pay-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pay-grid>*{min-width:0}
.pay{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:20px 22px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:inset 0 1px 0 var(--white);
  min-width:0;
}
.pay .pay-code{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-dark);
}
.pay strong{font-size:17px;color:var(--text)}
.pay p{font-size:13px;line-height:1.75}

/* --------------------------------------------------------------------------
   6. 退款流程
   -------------------------------------------------------------------------- */
.refund-band{
  position:relative;
  overflow-x:clip;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.05),rgba(var(--accent-rgb),0) 74%);
}
.refund-panel{max-width:880px}
.refund-steps{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:20px;
  counter-reset:rf;
}
.refund-steps li{
  position:relative;
  padding-left:38px;
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
}
.refund-steps li::before{
  counter-increment:rf;
  content:counter(rf);
  position:absolute;
  left:0;
  top:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(var(--accent-rgb),.12);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
}

/* --------------------------------------------------------------------------
   7. 收尾 CTA 带
   -------------------------------------------------------------------------- */
.cta-band{
  background:linear-gradient(120deg,rgba(var(--accent-rgb),.12),rgba(255,138,0,.06) 58%,transparent);
  border-top:1px solid var(--border);
  padding-top:52px;
  padding-bottom:52px;
}
.cta-band-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  flex-wrap:wrap;
}
.cta-band-inner h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:8px}
.cta-band-inner p{font-size:15px;max-width:56ch}
.cta-band-actions{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  flex-shrink:0;
}

/* --------------------------------------------------------------------------
   8. 流量包行：窄屏允许内部换行
   -------------------------------------------------------------------------- */
.pack{flex-wrap:wrap;gap:8px 14px}

/* --------------------------------------------------------------------------
   9. 响应式
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .plan-grid{grid-template-columns:minmax(0,1fr)}
  .pack-row{grid-template-columns:minmax(0,1fr)}
  .tier-notes{grid-template-columns:minmax(0,1fr);gap:0}
  .tier-note{
    padding-top:20px;
    padding-bottom:20px;
    border-bottom:1px solid var(--border);
  }
  .tier-note:last-child{border-bottom:0}
  .pay-grid{grid-template-columns:minmax(0,1fr)}
  .incl-list{grid-template-columns:minmax(0,1fr)}
  .cta-band-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .page-head{padding-top:40px;padding-bottom:40px}
  .cta-band{padding-top:40px;padding-bottom:44px}
  .cta-band-actions{width:100%}
}