/* ==========================================================================
   Reusable pricing grid + card component
   ========================================================================== */

.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.price-card { position: relative; background: #fff; border-radius: var(--radius-lg); padding: 32px 24px 28px; border: 1.5px solid rgba(0,0,0,0.06); box-shadow: 0 2px 16px rgba(37,99,235,0.05); display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); }
.price-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(37,99,235,0.1); }

.price-card--featured { border-color: var(--color-accent); border-width: 2px; padding-top: 52px; box-shadow: 0 8px 36px rgba(37,99,235,0.18); }
.price-card--featured:hover { box-shadow: 0 14px 48px rgba(37,99,235,0.24); }

.price-featured-badge { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent)); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 6px 16px 7px; border-radius: 0 0 12px 12px; white-space: nowrap; box-shadow: 0 4px 16px rgba(37,99,235,0.35); z-index: 2; }

.price-badge-pulse { width: 5px; height: 5px; background: #fff; border-radius: 50%; animation: price-badge-blink 1.5s ease-in-out infinite; }
@keyframes price-badge-blink { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

.price-tier { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.price-tier-icon { font-size: 14px; color: #c0c8d8; }
.price-tier-icon--blue { color: var(--color-accent); }
.price-tier-icon--slate { color: #64748b; }

.price-amount-row { display: flex; align-items: baseline; gap: 5px; margin-bottom: 6px; }

.price-inactivity-note { font-size: 10.5px; color: #a0aec0; margin: 0 0 14px; line-height: 1.4; }

.price-features { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.price-features li { display: flex; align-items: center; gap: 8px; }

.price-feature-check { font-size: 10px; font-weight: 800; color: #94a3b8; flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; border-radius: 50%; }
.price-feature-check--featured { color: var(--color-accent); background: rgba(37,99,235,0.08); }

.price-footer { text-align: center; margin-top: 40px; }
.price-compare-link { display: inline-block; font-size: 13.5px; font-weight: 600; color: #4b5a78; border: 1.5px solid #d0d7e8; padding: 10px 24px; border-radius: 50px; background: #fff; transition: all var(--transition); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.price-compare-link:hover { border-color: var(--color-accent); color: var(--color-accent); }

@media (max-width: 1024px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .price-grid { grid-template-columns: 1fr; } .price-card { align-items: center; text-align: center; } .price-features li { justify-content: center; } }