/* ============================================================
   VPNEQ — 套餐页专属样式层（zh-CN/plans.html）
   仅新增本页结构类，不改写 base.css / components.css 中的组件
   ============================================================ */

/* ---------- 页头 ---------- */
.price-head{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  background:linear-gradient(180deg,var(--hero-top) 0%,var(--hero-bot) 100%);
  border-bottom:1px solid var(--border-soft);
  padding-top:64px;
  padding-bottom:64px;
}
.price-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);background-repeat:repeat;
  opacity:.045;mix-blend-mode:multiply;
}
.price-head-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);
  gap:48px;align-items:center;
}
.price-head-copy{min-width:0}
.price-kicker{margin-bottom:16px}
.price-head h1{
  font-weight:900;
  font-size:clamp(34px,5vw,60px);
  line-height:1.08;
  letter-spacing:-.03em;
}
.price-head .lead{margin-top:18px;font-size:18px;line-height:1.6;max-width:56ch;color:var(--text-muted)}
.price-head .lead strong{color:var(--text);font-weight:700}
.price-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.price-facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;font-size:13.5px;color:var(--text-muted)}
.price-facts li{display:flex;align-items:center;gap:7px;min-width:0}
.price-facts svg{width:14px;height:14px;color:var(--accent-dark);flex-shrink:0}

/* ---------- 页头侧栏摘要卡 ---------- */
.price-side{min-width:0}
.price-side-card{
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-md);
  padding:22px 22px 20px;
  box-shadow:var(--shadow-card),inset 0 1px 0 var(--paper-line);
}
.price-side-h{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:14px;
}
.price-side-list{display:flex;flex-direction:column;gap:12px}
.price-side-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;border-bottom:1px solid var(--border-soft);min-width:0;
}
.price-side-list li:last-child{padding-bottom:0;border-bottom:0}
.price-side-list .k{font-size:13.5px;color:var(--text-muted);flex-shrink:0}
.price-side-list .v{font-size:14.5px;font-weight:700;text-align:right;min-width:0}
.price-side-foot{margin-top:16px;font-size:12.5px;color:var(--text-muted)}

/* ---------- 计费形式面板 ---------- */
.price-panel{margin-top:26px}
.price-panel-note{
  margin-top:22px;font-size:13.5px;line-height:1.7;
  color:var(--text-muted);max-width:82ch;
}

/* ---------- 档位适配说明 ---------- */
.fit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:22px}
.fit-grid > *{min-width:0}
.fit-card{
  display:flex;flex-direction:column;gap:12px;min-width:0;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-md);
  padding:24px;box-shadow:inset 0 1px 0 var(--paper-line);
}
.fit-card .fit-tag{align-self:flex-start}
.fit-card h3{font-size:18px;font-weight:800;line-height:1.35}
.fit-card p{font-size:14.5px;line-height:1.7;color:var(--text-muted);margin:0}

/* ---------- 均包含清单（细线九宫格） ---------- */
.include-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;
}
.include-item{
  display:flex;gap:12px;align-items:flex-start;min-width:0;
  background:var(--bg-panel);padding:20px;
}
.include-item .ck{
  width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;
}
.include-item .ck svg{width:12px;height:12px}
.include-item .txt{min-width:0;font-size:13.5px;line-height:1.65;color:var(--text-muted)}
.include-item .txt b{display:block;font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px}

/* ---------- 支付方式 ---------- */
.pay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.pay-grid > *{min-width:0}
.pay-card{
  display:flex;flex-direction:column;gap:10px;min-width:0;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-md);
  padding:20px;box-shadow:inset 0 1px 0 var(--paper-line);
}
.pay-card .ico{
  width:40px;height:40px;border-radius:var(--r-sm);background:var(--bg-panel2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.pay-card .ico svg{width:20px;height:20px;color:var(--text)}
.pay-card .name{font-size:16px;font-weight:700}
.pay-card p{font-size:13.5px;line-height:1.7;color:var(--text-muted);margin:0}

/* ---------- 下单流程 ---------- */
.pay-flow{margin-top:48px}
.pay-flow-h{font-size:20px;font-weight:900;letter-spacing:-.02em;margin-bottom:24px}

/* ---------- 退款承诺 ---------- */
.refund-card{
  background:var(--bg-panel);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:26px;
  box-shadow:inset 0 1px 0 var(--paper-line);
}
.refund-card h3{font-size:20px;font-weight:900;letter-spacing:-.02em;margin-bottom:12px}
.refund-card p{font-size:14.5px;line-height:1.75;color:var(--text-muted)}
.refund-card p + p{margin-top:.9em}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .price-head{padding-top:48px;padding-bottom:48px}
  .price-head-inner{grid-template-columns:1fr;gap:32px}
}
@media (max-width:640px){
  .price-head h1{font-size:32px}
  .price-head .lead{font-size:16.5px}
  .price-cta .btn{flex:1 1 auto}
  .price-facts{gap:8px 16px}
  .pay-flow{margin-top:36px}
  .refund-card{padding:20px}
}