/* Pricing Plan Card Styles — global, not Astro-scoped */
.grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.card { background: #111; border: 1px solid #222; border-radius: 12px; padding: 2rem; transition: all 0.2s; display: flex; flex-direction: column; }
.card:hover { border-color: #f0c04033; transform: translateY(-2px); }
.card.featured { border-color: #f0c040; }
.plan-name { font-size: 1.2rem; color: #999; margin-bottom: 0.5rem; }
.price { font-size: 2.5rem; font-weight: 700; color: #fff; }
.price span { font-size: 1rem; color: #666; }
.detail { color: #f0c040; font-size: 0.9rem; margin: 0.3rem 0 1.5rem; }
.features { list-style: none; margin-bottom: auto; padding-bottom: 2rem; }
.features li { padding: 0.3rem 0; color: #aaa; font-size: 0.9rem; }
.features li::before { content: "✓ "; color: #f0c040; }
.card .btn { display: block; text-align: center; padding: 0.8rem; border-radius: 8px; text-decoration: none; font-weight: 600; }
.btn-gold { background: #f0c040; color: #000; }
.btn-ghost { background: transparent; border: 1px solid #333; color: #ccc; }
.btn-gold:hover { background: #e0b030; }
.btn-ghost:hover { border-color: #f0c040; color: #f0c040; }