/* ==========================================================================
   VPNAK — pricing.css
   zh-CN/plans.html 专属样式:页头、适配场景卡、包含清单、
   计费规则格、支付卡、四步流程、退款分栏。
   全部取值引用 base.css 的设计令牌,不写死颜色。
   ========================================================================== */

/* ---- 页头 ---- */
.ph{
  position:relative;
  overflow-x:clip;
  padding-top:46px;
  padding-bottom:40px;
  border-bottom:1px solid var(--border);
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),
    linear-gradient(180deg,var(--hero-top) 0%,var(--hero-bottom) 100%);
  background-size:32px 32px,32px 32px,100% 100%;
}
.ph-inner{max-width:840px;margin-inline:auto;text-align:center}
.ph h1{margin:16px 0 14px}
.ph .lede{margin-bottom:20px}
.ph .fact-row{justify-content:center;margin-bottom:22px}
.ph .ctas{margin-bottom:0}

/* ---- 计费方式 tab 居中 ---- */
.tabs-wrap{display:flex;justify-content:center;margin-bottom:26px}
.tabs-wrap .tabs{margin-bottom:0}

/* ---- 适配场景三卡 ---- */
.fit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fit-cell{display:flex;flex-direction:column;gap:10px;padding:24px 22px 22px;min-width:0}
.fit-cell h3{font-size:17px;letter-spacing:-.015em}
.fit-cell p{font-size:13.5px;line-height:1.75;color:var(--muted)}

/* ---- 包含清单 ---- */
.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px}
.check-grid li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.65;color:var(--muted);min-width:0}
.check-grid li b{color:var(--text);font-weight:700}
.check-grid svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--success)}

/* ---- 计费规则格 ---- */
.rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:22px}
.rule-cell{display:flex;flex-direction:column;gap:10px;min-width:0}
.rule-cell h3{font-size:17px;letter-spacing:-.015em}
.rule-cell p{font-size:13.5px;line-height:1.75;color:var(--muted)}

/* ---- 支付卡 ---- */
.pay-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pay-card{display:flex;align-items:flex-start;gap:14px;padding:20px 20px 18px;min-width:0}
.pay-mark{
  width:42px;height:42px;flex-shrink:0;border-radius:var(--radius-sm);
  display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);
  font-family:var(--font-display);font-weight:800;font-size:17px;
}
.pay-card h3{font-size:15px;margin-bottom:5px}
.pay-card p{font-size:13px;line-height:1.7;color:var(--muted)}

/* ---- 下单流程文字块 ---- */
.flow-block{margin-top:26px;max-width:820px}
.flow-block h3{font-size:19px;margin-bottom:10px}
.flow-block p{font-size:14px;line-height:1.8;color:var(--muted)}
.flow-block p+p{margin-top:10px}

/* ---- 退款分栏 ---- */
.split-2{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}
.split-2 .sec-head{margin-bottom:20px}
.steps{counter-reset:pstep;display:flex;flex-direction:column;gap:14px}
.steps li{position:relative;padding-left:44px;font-size:14px;line-height:1.7;color:var(--muted)}
.steps li b{color:var(--text);font-weight:700}
.steps li::before{
  counter-increment:pstep;content:counter(pstep);
  position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);
  font-family:var(--font-mono);font-size:12.5px;font-weight:700;
}
.refund-side{display:flex;flex-direction:column;gap:12px}
.refund-side h3{font-size:17px}
.side-list{display:flex;flex-direction:column;gap:10px}
.side-list li{
  position:relative;padding-left:16px;
  font-size:13.5px;line-height:1.7;color:var(--muted);
}
.side-list li::before{
  content:"";position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--apricot),var(--accent));
}
.side-note{font-size:12.5px;line-height:1.7;color:var(--muted);border-top:1px solid var(--border);padding-top:12px}

/* ---- 响应式 ---- */
@media (max-width:1024px){
  .check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-2{grid-template-columns:1fr;gap:22px}
}
@media (max-width:900px){
  .fit-grid{grid-template-columns:1fr;gap:16px}
  .rule-grid{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .ph{padding-top:34px;padding-bottom:30px}
  .ph-inner{text-align:left}
  .ph .fact-row{justify-content:flex-start}
  .ph .ctas{justify-content:flex-start}
  .tabs-wrap{justify-content:flex-start}
}
@media (max-width:640px){
  .check-grid{grid-template-columns:1fr}
  .ph .ctas{flex-direction:column;align-items:stretch}
}