/* ==========================================================================
   VPNWI · pricing.css
   Page-scoped styles for zh-CN/plans.html (pricing page).
   Only layout compensation lives here; every colour comes from :root tokens.
   ========================================================================== */

/* ------------------------------ 页首 ------------------------------ */
.plans-hero{
  position:relative;
  overflow-x:clip;
  background:var(--hero-bg);
  padding-top:52px;
  padding-bottom:44px;
}
.plans-hero-glow{
  position:absolute;
  left:50%;
  top:-16%;
  width:min(840px,94%);
  height:80%;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,var(--halo),transparent 72%);
  filter:blur(26px);
  pointer-events:none;
}
.plans-hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.plans-title{margin-top:4px;}
.plans-lead{margin-top:16px;max-width:780px;}
.plans-hero .hero-cta{margin-top:22px;}
.plans-hero .trust-row{max-width:860px;}

/* ------------------------- 计费方式 tab 区 ------------------------- */
#plans .tabs{margin-bottom:22px;}
#plans .tabpanel{padding:26px 24px 24px;}

/* ------------------------- 档位说明小卡 ------------------------- */
.tier-notes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:18px;
  margin-top:20px;
}
.tier-note{
  min-width:0;
  padding:20px 22px;
  background:var(--bg-subtle);
  border:1px solid var(--border-soft);
  border-radius:var(--r-l);
}
.tier-note h3{
  font-size:15.5px;
  line-height:1.4;
  margin-bottom:9px;
}
.tier-note p{
  font-size:13.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.tier-note p+p{margin-top:9px;}

/* ------------------------- 流量包说明块 ------------------------- */
.pack-note{
  margin-top:20px;
  padding:16px 20px;
  background:var(--bg-subtle);
  border:1px solid var(--border-soft);
  border-left:3px solid var(--accent-2);
  border-radius:var(--r-m);
  font-size:14px;
  line-height:1.8;
  color:var(--text-muted);
}

/* ------------------------- 共同权益清单 ------------------------- */
.incl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(286px,1fr));
  gap:14px;
}
.incl-item{
  display:flex;
  align-items:flex-start;
  gap:13px;
  min-width:0;
  padding:17px 18px;
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:var(--r-m);
  box-shadow:var(--shadow-1);
}
.incl-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:34px;
  height:34px;
  border-radius:9px;
  background:var(--bg-inset);
  color:var(--accent);
}
.incl-ico svg{width:17px;height:17px;}
.incl-text{min-width:0;}
.incl-name{
  font-size:14px;
  font-weight:700;
  line-height:1.45;
  color:var(--text);
  overflow-wrap:anywhere;
}
.incl-note{
  margin-top:5px;
  font-size:12.5px;
  line-height:1.65;
  color:var(--text-muted);
}

/* ------------------------- 支付方式 ------------------------- */
.pay-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:16px;
}
.pay-card{
  min-width:0;
  padding:20px;
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:var(--r-l);
  box-shadow:var(--shadow-1);
}
.pay-head{display:flex;align-items:center;gap:11px;}
.pay-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:34px;
  height:34px;
  border-radius:9px;
  background:var(--bg-inset);
  color:var(--accent);
}
.pay-ico svg{width:17px;height:17px;}
.pay-name{font-size:15px;font-weight:700;color:var(--text);}
.pay-note{
  margin-top:11px;
  font-size:13px;
  line-height:1.75;
  color:var(--text-muted);
}

/* ------------------------- 退款承诺 ------------------------- */
.refund-panel{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:24px;
  align-items:start;
  padding:26px 28px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-l);
  box-shadow:var(--shadow-2);
}
.refund-note{
  margin-top:14px;
  font-size:14px;
  line-height:1.8;
  color:var(--text-muted);
}
.refund-steps{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.refund-step{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  padding:11px 14px;
  background:var(--bg-subtle);
  border:1px solid var(--border-soft);
  border-radius:var(--r-m);
  font-size:13.5px;
  line-height:1.65;
  color:var(--text-muted);
}
.refund-step span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  min-width:30px;
  height:22px;
  padding:0 7px;
  border-radius:var(--r-pill);
  background:var(--tint-accent);
  border:1px solid var(--accent-ring);
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--accent);
}

/* ------------------------- FAQ 收尾 ------------------------- */
.faq-more{
  margin-top:18px;
  font-size:13.5px;
  color:var(--text-muted);
  text-align:center;
}
.faq-more a{
  color:var(--accent);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ------------------------- 响应式 ------------------------- */
@media (max-width:900px){
  .refund-panel{grid-template-columns:1fr;padding:22px 20px;}
  #plans .tabpanel{padding:20px 16px;}
}
@media (max-width:640px){
  .plans-hero{padding-top:36px;padding-bottom:34px;}
  .plans-lead{font-size:15px;}
  .incl-grid{grid-template-columns:1fr;}
  .pay-grid{grid-template-columns:1fr;}
  .tier-notes{grid-template-columns:1fr;}
  .refund-step{font-size:13px;}
}