/* =============================================================
   VPNEM —— pricing.css
   套餐页专属:页头排版 / 周期切换居中 / 套餐卡补充行 /
   共同权益清单 / 支付方式卡 / 退款流程容器 / FAQ 补充链接
   (只新增本页独有类,不覆盖 base.css 与 components.css 的既有组件)
   ============================================================= */

/* —— 页头 —— */
.price-top{padding-top:44px;padding-bottom:56px}
.price-copy{max-width:780px;margin-inline:auto;text-align:center}
.price-title{
  margin-top:20px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(34px,4.6vw,52px);
  line-height:1.08;
  letter-spacing:-0.02em;
}
.price-copy .cta-row{justify-content:center}
.price-copy .hero-desc{max-width:60ch;margin-inline:auto}
.price-copy .trust{justify-content:center}

/* —— 周期切换与套餐卡补充行 —— */
.price-tabs > .cycle-tabs{
  display:flex;
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  justify-content:center;
}
.plan-for{font-size:14px;line-height:1.62;color:var(--muted)}
.plan-note{
  margin-top:20px;
  margin-inline:auto;
  max-width:66ch;
  font-size:14.5px;
  line-height:1.72;
  color:var(--muted);
  text-align:center;
}
.plan-note strong{color:var(--text);font-weight:600}

/* —— 所有套餐均包含 —— */
.incl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}
.incl-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:20px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:0 10px 24px var(--tint-ink-04);
}
.incl-item > div{min-width:0}
.incl-mark{
  flex:none;
  width:22px;
  height:22px;
  margin-top:2px;
  border-radius:50%;
  background:var(--tint-success-14);
  display:grid;
  place-items:center;
}
.incl-mark svg{
  width:12px;
  height:12px;
  fill:none;
  stroke:var(--success);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.incl-item h3{font-size:15.5px;line-height:1.42}
.incl-item p{margin-top:6px;font-size:13.5px;line-height:1.62;color:var(--muted)}

/* —— 支付方式 —— */
.pay-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.pay-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  padding:22px 20px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
}
.pay-card > *{max-width:100%}
.pay-name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:20px;
  letter-spacing:-0.01em;
  line-height:1.3;
}
.pay-note{font-size:14px;line-height:1.66;color:var(--muted)}
.pay-card .tag{margin-top:auto}

/* —— 退款流程 —— */
.refund-wrap{
  display:flex;
  flex-direction:column;
  gap:26px;
  max-width:760px;
  margin-inline:auto;
}
.refund-wrap .callout{font-size:15px}

/* —— 区块尾注 / FAQ 补充链接 —— */
.sec-foot{margin-top:22px}
.faq-more{
  margin-top:18px;
  font-size:14.5px;
  line-height:1.7;
  color:var(--muted);
  text-align:center;
}
.faq-more a{
  color:var(--accent);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* —— 响应式 —— */
@media (max-width:768px){
  .price-top{padding-top:32px;padding-bottom:44px}
  .price-title{font-size:34px}
}
@media (max-width:640px){
  .price-tabs > .cycle-tabs{width:100%}
  .incl-grid{grid-template-columns:minmax(0,1fr)}
  .pay-grid{grid-template-columns:minmax(0,1fr)}
}