/* ============================================================================
   public/assets/css/pricing.css
   Simplified 3-tier pricing comparison cards (pricing.html only). Replaces
   the old pricing-builder.css (deleted along with the Site Builder wizard).
   ============================================================================ */

.pricing-cards-grid { display: grid; gap: 24px; margin-top: 44px; }
@media (min-width: 900px) { .pricing-cards-grid { grid-template-columns: repeat(3, 1fr); } }

.pricing-card {
    position: relative;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-card);
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.pricing-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--tier-accent, hsl(var(--primary)));
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.pricing-card-price { font-family: var(--font-heading); font-size: clamp(32px, 5vw, 42px); font-weight: 700; margin-top: 12px; }
.pricing-card-price span { font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.pricing-card-delivery { margin-top: 4px; font-size: 12.5px; font-family: var(--font-mono); color: hsl(var(--muted-foreground)); }
.pricing-card-audience { margin-top: 16px; font-size: 14px; color: hsl(var(--muted-foreground)); min-height: 42px; }

.pricing-card-features { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.pricing-card-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: hsl(var(--foreground)); }
.pricing-card-features li svg { flex-shrink: 0; margin-top: 2px; color: var(--tier-accent, hsl(var(--primary))); }

.pricing-card-note { margin-top: 16px; font-size: 12px; font-style: italic; color: hsl(var(--muted-foreground)); }
.pricing-card-cta { margin-top: 24px; width: 100%; }

.pricing-loading { grid-column: 1 / -1; text-align: center; padding: 48px 0; color: hsl(var(--muted-foreground)); font-size: 14px; }

.pricing-footnotes { max-width: 620px; margin: 40px auto 0; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.pricing-addon-note, .pricing-hosting-note { font-size: 13px; color: hsl(var(--muted-foreground)); }