/* ============================================================
   VPNBQ — pricing.css
   套餐页专属样式：页头氛围层、套餐卡补充信息、
   包含清单、支付卡、退款步骤、正文补充段落
   ============================================================ */

/* ---------- 页头：斜光束 + 细颗粒噪点 ---------- */
.plans-head{
  position:relative;
  overflow-x:clip;
  padding-top:64px;
  padding-bottom:36px;
}
.plans-head::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 36%,var(--tint-05) 50%,transparent 64%);
}
.plans-head::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.04;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px;
}
.plans-head > .wrap{position:relative;z-index:1}
.plans-head .badge{margin-bottom:22px}
.plans-head .lede{margin-top:18px;max-width:640px}
.plans-head .btn-row{margin-top:28px}

.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin-top:24px;
  font-size:13px;
  color:var(--text-2);
}
.trust-row span{display:inline-flex;align-items:center;gap:7px;min-width:0}
.trust-row svg{flex-shrink:0;color:var(--accent)}

.jump-row{margin-top:26px}
.jump-row .chip{transition:border-color .15s,color .15s}
.jump-row .chip:hover{border-color:var(--accent-2);color:var(--accent)}

/* ---------- 区块内标题与网格间距 ---------- */
.sec-head + .plan-grid,
.sec-head + .pack-grid,
.sec-head + .inc-grid,
.sec-head + .pay-grid,
.sec-head + .table-scroll{margin-top:32px}
.sec-head + .callout{margin-top:8px}

/* ---------- 套餐卡补充信息 ---------- */
.plan-grid-gap{gap:20px}
.plan-for{
  margin-top:12px;
  font-size:13px;
  line-height:1.7;
  color:var(--text-2);
}
.plan-card .plan-for{min-height:66px}

/* ---------- 流量包卡按钮 ---------- */
.pack-card .btn{align-self:flex-start;margin-top:6px;flex-shrink:0;white-space:nowrap}

/* ---------- 正文补充段落 ---------- */
.plans-copy{
  max-width:820px;
  margin-top:30px;
  min-width:0;
}
.plans-copy p{
  margin:14px 0;
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-2);
}
.plans-copy p strong{color:var(--text)}
.plans-copy a{color:var(--accent);border-bottom:1px solid var(--tint-16)}
.plans-copy a:hover{border-bottom-color:var(--accent)}

/* ---------- 所有套餐均包含 ---------- */
.inc-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.inc-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
  padding:20px 18px 22px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
}
.inc-item > div{min-width:0}
.inc-item h3{font-size:14.5px;font-weight:600;margin-bottom:6px}
.inc-item p{font-size:13px;line-height:1.7;color:var(--text-2)}

/* ---------- 支付方式 ---------- */
.pay-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.pay-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:24px 22px 24px;
  background:var(--bg-panel);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-panel);
}
.pay-card h3{font-size:15px;font-weight:600}
.pay-card p{font-size:13.5px;line-height:1.75;color:var(--text-2)}

/* ---------- 退款步骤 ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}
.step{
  min-width:0;
  padding:20px 20px 22px;
  border-radius:var(--r-lg);
  background:var(--bg-panel-2);
  border:1px solid var(--border-soft);
}
.step-idx{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--accent);
  margin-bottom:10px;
}
.step h3{font-size:14.5px;font-weight:600;margin-bottom:6px}
.step p{font-size:13px;line-height:1.7;color:var(--text-2)}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .inc-grid,.pay-grid,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .plans-head{padding-top:44px;padding-bottom:26px}
  .plan-card .plan-for{min-height:0}
  .inc-grid,.pay-grid,.steps{grid-template-columns:1fr}
  .plans-copy{margin-top:24px}
}
@media (max-width:640px){
  .plans-head::before{background:linear-gradient(112deg,transparent 30%,var(--tint-05) 50%,transparent 70%)}
  .trust-row{gap:8px 14px}
  .pack-card .btn{align-self:stretch;width:100%}
}