/* ==========================================================================
   VPNVO · pricing page layer
   scope: zh-CN/packages.html only
   ========================================================================== */

/* ---- page head ---- */

.pr-head{
  padding-top:var(--sp-7);
  padding-bottom:var(--sp-7);
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-panel) 100%);
  border-bottom:1px solid var(--border);
}
.pr-head-grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:var(--sp-6);
  align-items:start;
}
.pr-head-copy{min-width:0}
.pr-head h1{margin-top:14px}
.pr-head .lede{margin-left:0;margin-right:0;max-width:60ch}
.pr-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pr-actions .btn{flex:none;white-space:nowrap}
.pr-head-note{
  margin-top:14px;max-width:56ch;
  font-size:12.5px;line-height:1.7;color:var(--text-muted);
}

/* ---- glance card ---- */

.pr-glance{padding:18px;display:grid;gap:8px;align-content:start}
.pr-glance-title{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--text-muted);
}
.pr-glance-list{display:grid}
.pr-glance-row{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:10px;align-items:baseline;
  padding:8px 0;border-top:1px dashed var(--border);
}
.pr-glance-row:first-child{border-top:0;padding-top:2px}
.pr-glance-row dt{
  font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);
  white-space:nowrap;
}
.pr-glance-row dd{font-size:12.5px;line-height:1.5;color:var(--text);text-align:right}

/* ---- shared small print ---- */

.pr-note{margin-top:var(--sp-3);font-size:12.5px;line-height:1.7;color:var(--text-muted)}
.pr-callout{margin-top:var(--sp-5)}
.pr-callout p{font-size:13.5px;line-height:1.75}

/* ---- plan cards ---- */

.pr-fit{font-size:12.5px;line-height:1.65;color:var(--text-muted)}
.pr-limit{
  padding-top:8px;border-top:1px dashed var(--border);
  font-size:12px;line-height:1.6;color:var(--text-muted);
}

/* ---- tier guide ---- */

.pr-guide{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;margin-top:var(--sp-5);
}
.pr-guide-item{
  display:grid;gap:6px;min-width:0;
  padding:14px 16px;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-md);
}
.pr-guide-k{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--accent-dark);
}
.pr-guide-v{font-size:12.5px;line-height:1.65;color:var(--text-muted)}

/* ---- traffic packs ---- */

.pr-pack-fit{font-size:12.5px;line-height:1.6;color:var(--text-muted)}
.pr-pack-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:var(--sp-4);
}
.pr-pack-actions .pr-note{margin-top:0;max-width:52ch}
.pr-pack-actions .btn{flex:none;white-space:nowrap}

/* ---- included list ---- */

.pr-inc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pr-inc li{
  display:grid;gap:5px;min-width:0;
  padding:14px 16px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-1), var(--hi);
}
.pr-inc-k{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--accent-dark);
}
.pr-inc-v{font-size:13px;line-height:1.65;color:var(--text-muted)}

/* ---- payment methods ---- */

.pr-pay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pr-pay li{
  display:grid;gap:6px;min-width:0;
  padding:16px;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-md);
}
.pr-pay-k{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.pr-pay-v{font-size:12.5px;line-height:1.65;color:var(--text-muted)}

.pr-steps{margin-top:var(--sp-5)}

/* ---- refund block ---- */

.pr-refund{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--sp-6);
  padding:var(--sp-6);
  background:var(--bg-panel);
  border:1px solid var(--border);border-radius:var(--r-xl);
}
.pr-refund-copy{display:grid;gap:10px;align-content:start;min-width:0}
.pr-refund-copy h2{font-size:clamp(22px,2.4vw,30px);line-height:1.25}
.pr-refund-copy p{font-size:13.5px;line-height:1.75;color:var(--text-muted)}
.pr-refund-steps{margin-top:0;align-content:start}

/* ---- responsive ---- */

@media (max-width:980px){
  .pr-head-grid{grid-template-columns:1fr}
  .pr-guide{grid-template-columns:1fr}
  .pr-pay{grid-template-columns:1fr}
  .pr-refund{grid-template-columns:1fr}
}

@media (max-width:640px){
  .pr-head{padding-top:var(--sp-6);padding-bottom:var(--sp-6)}
  .pr-inc{grid-template-columns:1fr}
  .pr-refund{padding:var(--sp-5)}
  .pr-glance-row dd{text-align:left}
  .pr-actions .btn{width:100%}
  .pr-pack-actions .btn{width:100%}
}