/* ============================================================
   PLANS PAGE — DT Malware Safe
   ============================================================ */

.plans-hero {
  padding-block: var(--space-16) var(--space-12);
  text-align: center;
  background: linear-gradient(180deg, var(--primary-50) 0%, var(--bg) 100%);
}

/* ── Billing Toggle ───────────────────────────────────────── */
.billing-toggle-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-12);
}

.billing-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.billing-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.billing-btn:hover {
  color: var(--text);
}

.billing-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* ── Pricing Cards ────────────────────────────────────────── */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-20);
}

.plan-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Tier accent borders */
.plan-card.free       { border-top: 4px solid var(--safe); }
.plan-card.basic      { border-top: 4px solid var(--warning); }
.plan-card.pro        {
  border: 2px solid var(--primary);
  border-top: 4px solid var(--primary);
  box-shadow: var(--shadow-blue), var(--shadow-md);
  transform: translateY(-8px);
}
.plan-card.pro:hover  { transform: translateY(-14px); }
.plan-card.enterprise { border-top: 4px solid var(--danger); }

/* Popular badge */
.popular-badge {
  position: absolute;
  top: -1px;
  right: var(--space-6);
  background: var(--primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.plan-tier {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.free .plan-tier       { color: var(--safe); }
.basic .plan-tier      { color: #92400E; }
.pro .plan-tier        { color: var(--primary); }
.enterprise .plan-tier { color: var(--danger); }

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: var(--space-1);
}
.price-amount {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}
.price-period { font-size: 0.875rem; color: var(--text-muted); }
.plan-desc { font-size: 0.875rem; color: var(--text-muted); margin-bottom: var(--space-6); }

.plan-divider { border: none; border-top: 1px solid var(--border); margin-block: var(--space-4); }

.plan-features { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.plan-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.plan-feature svg { flex-shrink: 0; margin-top: 2px; }
.check-green { color: var(--safe); }
.check-blue  { color: var(--primary); }

/* ── Comparison Table ─────────────────────────────────────── */
.comparison-section { background: var(--bg-alt); padding-block: var(--space-16); }
.comparison-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 0.9rem;
}
.comparison-table thead th {
  background: var(--primary-50);
  padding: var(--space-4) var(--space-6);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--primary);
  border-bottom: 2px solid var(--primary-100);
  white-space: nowrap;
}
.comparison-table thead th:first-child {
  text-align: left;
  color: var(--text);
  background: var(--bg-alt);
}
.comparison-table thead th.pro-col {
  background: var(--primary);
  color: #fff;
}
.comparison-table tbody tr:nth-child(even) { background: var(--bg-alt); }
.comparison-table tbody tr:hover { background: var(--primary-50); }
.comparison-table tbody td {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
}
.comparison-table tbody td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--text);
}
.comparison-table tbody td.pro-col { background: rgba(37,99,235,0.04); font-weight: 600; }
.check-icon  { color: var(--safe); }
.dash-icon   { color: var(--border-strong); }

@media (max-width: 1024px) {
  .plans-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-card.pro { transform: none; }
  .plan-card.pro:hover { transform: translateY(-4px); }
}
@media (max-width: 640px) {
  .plans-grid { grid-template-columns: 1fr; }
}