/* =========================================================================
   VPNSort · pricing.css
   Page-scoped layout for the pricing page. Every colour reads a :root token.
   ========================================================================= */

/* =========================================================================
   1. Page head
   ========================================================================= */

.price-head{
  display:grid;
  gap:var(--space-4);
  max-width:860px;
}

.price-head .eyebrow{justify-self:start}

.price-head .lede{max-width:70ch}

.price-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

.price-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.price-stats{margin-top:var(--space-6)}

/* =========================================================================
   2. Price tables
   ========================================================================= */

.price-table{min-width:720px}
.compare-table{min-width:820px}

.price-table th:first-child,
.price-table td:first-child,
.compare-table th:first-child,
.compare-table td:first-child{white-space:nowrap}

.price-table .price-cell{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  color:var(--accent);
  white-space:nowrap;
}

.price-table .vol-cell{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.price-table tbody tr:hover td,
.compare-table tbody tr:hover td{background:var(--accent-a06)}

.compare-table td:not(:first-child){color:var(--text-muted)}
.compare-table td.is-key{color:var(--text);font-weight:600}

.table-note{
  margin:var(--space-3) 0 0;
  font-size:12.5px;
  line-height:1.72;
  color:var(--text-muted);
  max-width:76ch;
}

/* =========================================================================
   3. Billing switch
   ========================================================================= */

.plan-switch{margin-top:var(--space-2)}

/* =========================================================================
   4. Included grid
   ========================================================================= */

.inc-card{
  display:grid;
  gap:8px;
  align-content:start;
}

.inc-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:var(--r-xs);
  background:var(--accent-a08);
  color:var(--accent);
}
.inc-icon svg{width:16px;height:16px}

.inc-title{
  margin:0;
  font-size:14.5px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.01em;
}

.inc-text{
  margin:0;
  font-size:13px;
  line-height:1.68;
  color:var(--text-muted);
}

/* =========================================================================
   5. Payment methods
   ========================================================================= */

.pay-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-4);
}
.pay-list > *{min-width:0}

.pay-item{
  display:grid;
  gap:8px;
  align-content:start;
  padding:var(--space-5);
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-soft);
}

.pay-name{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:-.01em;
}

.pay-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  flex:0 0 auto;
  border-radius:var(--r-xs);
  background:var(--accent-a08);
  color:var(--accent);
}
.pay-mark svg{width:15px;height:15px}

.pay-text{
  margin:0;
  font-size:13px;
  line-height:1.68;
  color:var(--text-muted);
}

/* =========================================================================
   6. Refund panel
   ========================================================================= */

.refund-panel{
  display:grid;
  gap:var(--space-4);
  padding:var(--space-6);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  background:linear-gradient(126deg,var(--sand-1) 0%,var(--sand-2) 62%,var(--bg-panel) 100%);
  box-shadow:var(--shadow-soft);
}

.refund-panel h2{margin:0}
.refund-panel .lede{max-width:70ch}

.refund-list{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:13.8px;
  line-height:1.72;
  color:var(--text);
}

.refund-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.refund-list li::before{
  content:"";
  width:6px;
  height:6px;
  margin-top:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--accent-a45);
}

/* =========================================================================
   7. Responsive
   ========================================================================= */

@media (max-width:900px){
  .pay-list{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:640px){
  .price-stats{margin-top:var(--space-5)}
  .refund-panel{padding:var(--space-4)}
  .price-actions{gap:10px}
}