/* ==========================================================================
   VPNFH — pricing page layer (plans.html)
   only page-specific pieces; shared components live in components.css
   ========================================================================== */

/* fact line above the summary table */
.price-brief{
  max-width:760px;
  margin:0 auto 20px;
  padding:14px 20px;
  border-radius:var(--r-card);
  border:1px solid var(--accent-line);
  background:var(--accent-soft-2);
  font-size:15px;
  line-height:1.7;
  text-align:center;
  color:var(--text);
}
.price-brief strong{font-weight:600;color:var(--accent-dark)}

/* summary table: keep five columns readable, scroll inside .table-scroll */
.price-table{min-width:760px}
.price-table td{word-break:keep-all}
.price-table .cell-mono{white-space:nowrap}

/* badge row under the table */
.price-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}

/* "who it fits" line inside plan cards */
.plan-fit{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--border);
  font-size:13px;
  line-height:1.7;
  color:var(--text-muted);
}
.plan-fit b{
  display:block;
  margin-bottom:3px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--text-faint);
}

/* prose blocks inside pricing sections */
.pricing-prose{
  max-width:760px;
  margin-top:36px;
  font-size:15px;
  line-height:1.85;
}
.pricing-prose h3{font-size:18px}
.pricing-prose > * + *{margin-top:14px}

/* "all plans include" grid */
.include-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;
}
.include-item{
  display:flex;
  gap:12px;
  min-width:0;
  padding:18px;
  border-radius:var(--r-card);
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card-soft);
}
.include-ico{
  display:grid;
  place-items:center;
  width:36px;height:36px;
  flex:none;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg-panel-2);
  color:var(--accent);
}
.include-ico svg{width:18px;height:18px}
.include-body{min-width:0}
.include-title{font-size:14.5px;font-weight:500;letter-spacing:-.01em;color:var(--text)}
.include-text{margin-top:5px;font-size:13px;line-height:1.7;color:var(--text-muted)}

/* payment tiles */
.pay-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.pay-tile{
  min-width:0;
  padding:20px;
  border-radius:var(--r-card);
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card-soft);
}
.pay-name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--text)}
.pay-text{margin-top:8px;font-size:13px;line-height:1.7;color:var(--text-muted)}

/* numbered step list */
.step-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  counter-reset:step;
}
.step-item{
  position:relative;
  padding-left:40px;
  font-size:14px;
  line-height:1.75;
  color:var(--text-muted);
  list-style:none;
}
.step-item::before{
  counter-increment:step;
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;top:0;
  display:grid;
  place-items:center;
  width:28px;height:28px;
  border-radius:50%;
  border:1px solid var(--accent-line);
  background:var(--accent-soft-2);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--accent-dark);
}
.step-item b{display:block;margin-bottom:2px;font-weight:500;color:var(--text)}

/* refund block */
.refund-panel{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:28px;
  align-items:start;
  padding:28px;
  border-radius:var(--r-panel);
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card-soft);
}
.refund-intro{min-width:0}
.refund-intro p{margin-top:12px;font-size:14px;line-height:1.8;color:var(--text-muted)}
.refund-intro .fact-chip{margin-bottom:2px}

@media (max-width:900px){
  .refund-panel{grid-template-columns:1fr;gap:22px;padding:22px}
}

@media (max-width:640px){
  .price-brief{font-size:14px;padding:12px 16px}
  .pricing-prose{font-size:14.5px;margin-top:28px}
  .step-item{padding-left:36px}
  .include-item{padding:16px}
  .pay-tile{padding:16px}
}