/**
 * pages/pricing.css — Pricing page elevation
 * Phase 6 Page-by-Page Polish
 *
 * Adds hero mesh, polishes pricing cards, refines toggle.
 */

body.pricing-page main>section:first-of-type,
body.pricing-page .pricing-hero,
body.pricing-page .hero-section {
    position: relative;
    isolation: isolate;
}

body.pricing-page main>section:first-of-type::before,
body.pricing-page .pricing-hero::before,
body.pricing-page .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 80% 50% at 30% 30%, rgba(168, 85, 247, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 75% 25%, rgba(78, 205, 196, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 50% 90%, rgba(245, 158, 11, 0.06) 0%, transparent 60%);
}

body.pricing-page main>section:first-of-type>*,
body.pricing-page .pricing-hero>*,
body.pricing-page .hero-section>* {
    position: relative;
    z-index: 1;
}

/* Pricing cards — subtle glow elevation on hover */
body.pricing-page .pricing-card,
body.pricing-page .price-card,
body.pricing-page [class*="pricing-plan"] {
    transition:
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.pricing-page .pricing-card:hover,
body.pricing-page .price-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(168, 85, 247, 0.18);
}

/* Recommended/featured plan — extra glow */
body.pricing-page .pricing-card.recommended,
body.pricing-page .pricing-card.featured,
body.pricing-page .price-card.featured {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(168, 85, 247, 0.22);
}

body.pricing-page .pricing-card.recommended:hover,
body.pricing-page .pricing-card.featured:hover {
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 0 80px rgba(168, 85, 247, 0.35);
}

/* Tab buttons (Coding/Mathematics/Custom) — spring micro-motion */
body.pricing-page .tab-button,
body.pricing-page .pricing-tab-btn {
    transition:
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.pricing-page .tab-button:hover:not(.active),
body.pricing-page .pricing-tab-btn:hover:not(.active) {
    transform: translateY(-1px);
}

/* Hero h1 — gradient highlight */
body.pricing-page main>section:first-of-type h1 {
    letter-spacing: -0.04em;
    text-wrap: balance;
}