/* Pricing-grid styles shared between the home pricing section
   (rendered by templates/public/home.html) and the dedicated
   /pricing page (templates/public/pricing.html).

   These rules originally lived only in home.css. When the standalone
   /pricing page shipped in PR #678 it referenced the same DOM classes
   (.pricing-card, .pricing-pro, .pricing-badge, .check-icon-*,
   .cross-icon) but only loaded style.css, so the Pro tier rendered
   white-on-white and was invisible. Splitting the rules into a
   dedicated stylesheet lets both pages reuse them without /pricing
   pulling in the full home.css (hero, event-card, date-badge …) for
   nothing.

   home.css still defines these rules locally for now to avoid touching
   the home page on the same PR — the duplication is intentional and
   benign (rules are identical). A follow-up can dedupe by removing the
   block from home.css and adding `<link rel="stylesheet" pricing.css>`
   to home.html's extra_head. */

.pricing-card {
  border-radius: 1.5rem;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  /* The shared `.pricing-card` rule in components.css sets
     overflow:hidden; we need the .pricing-badge ribbon (top: -14px)
     to escape the card frame, so locally override. */
  overflow: visible;
}
.pricing-free     { background: #ffffff; border: 1.5px solid #e5e7eb; }
.pricing-premium  { background: #ffffff; border: 1.5px solid #e5e7eb; }
/* Pro is the highlighted tier — dark gradient + "Recommended" badge. */
.pricing-pro {
  background: linear-gradient(145deg, #312e81 0%, #4338ca 40%, #5b21b6 100%);
  border: 1.5px solid rgba(165,180,252,0.25);
  box-shadow: 0 32px 80px -20px rgba(79,70,229,0.5), 0 0 0 1px rgba(99,102,241,0.2);
}
.pricing-business { background: #ffffff; border: 1.5px solid #c7d2fe; }
.pricing-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  color: #78350f;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(245,158,11,0.4);
  white-space: nowrap;
}
.check-icon-free     { color: #4f46e5; }
.check-icon-premium  { color: #4f46e5; }
.check-icon-pro      { color: #a5b4fc; }
.check-icon-business { color: #4f46e5; }
.cross-icon          { color: #d1d5db; }