/* Pricing page + /app/billing.php */

.pricing-hero {
  text-align: center;
  padding: 4rem 1rem 2rem;
}
.pricing-hero h1 { margin-bottom: 1rem; }
.pricing-hero p { max-width: 640px; margin: 0 auto; font-size: 1.1rem; }

.pricing-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 1100px; margin: 2rem auto;
}
.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  display: flex; flex-direction: column;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.pricing-card:hover { transform: translateY(-3px); border-color: rgba(255,107,53,0.3); }
.pricing-card.popular {
  border-color: var(--primary);
  box-shadow: 0 0 40px rgba(255,107,53,0.15);
  position: relative;
}
.pricing-card.popular::before {
  content: 'Most popular';
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff; font-size: .75rem; font-weight: 700;
  padding: .25rem .75rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .1em;
}
.pricing-card .plan-name { color: var(--secondary); font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.pricing-card .plan-price { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; }
.pricing-card .plan-price small { font-size: 1rem; font-weight: 500; color: var(--text-muted); }
.pricing-card .plan-features { list-style: none; padding: 0; margin: 1rem 0 1.5rem; flex: 1; }
.pricing-card .plan-features li { padding: .4rem 0; color: var(--text-muted); font-size: .95rem; display: flex; align-items: baseline; gap: .5rem; }
.pricing-card .plan-features li::before { content: '\2713'; color: var(--success); font-weight: 700; }
.pricing-card .plan-cta { margin-top: auto; }