/* === PRICING PAGE STYLES — BuzzingFrame ===
   Dedicated styles for pricing.html
   Matches home.css glassmorphism aesthetic exactly
   ================================================ */

/* --- 1. HERO SECTION --- */
.pricing-page-hero {
    position: relative;
    padding: 10vh 0;
    width: 100%;
    background: transparent;
    z-index: 2;
}

.pricing-page-hero-grid {
    display: grid;
    grid-template-columns: 0.8fr 2fr;
    gap: 4vw;
}

.pricing-page-hero-sidebar {
    position: relative;
}

.pricing-page-hero-content {
    display: flex;
    flex-direction: column;
    max-width: 700px;
    padding-bottom: 20px;
}

/* pricing-page-eyebrow, pricing-page-headline, pricing-page-subline → shared.css */

.headline-logo {
    height: 1.5em;
    width: auto;
    vertical-align: -0.35em;
    margin: 0 0.15em;
    display: inline-block;
}


/* --- 2. TIER CARDS --- */
.pricing-page-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* .pricing-page-card glassmorphism/reveal/hover → shared.css */
.pricing-page-card {
    display: flex;
    flex-direction: column;
}


/* Card Header */
.pricing-page-card-header {
    padding: 30px 30px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.pricing-page-tier-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-grey);
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 15px;
}

.pricing-page-tier-name {
    font-family: var(--font-main);
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--text-white);
    margin: 0 0 8px;
    transition: color 0.3s ease;
}

.pricing-page-card:hover .pricing-page-tier-name {
    color: var(--accent-mint);
}

.pricing-page-tier-desc {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-grey);
    line-height: 1.6;
    opacity: 0.85;
}

.pricing-page-price {
    font-family: var(--font-main);
    font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    font-weight: 600;
    color: var(--text-white);
    margin-top: auto;
    padding-top: 20px;
    letter-spacing: 0.02em;
}

.pricing-page-price-period {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-grey);
    font-weight: 400;
    opacity: 0.8;
}

/* Card Body — feature list */
.pricing-page-card-body {
    padding: 25px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pricing-page-includes-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-grey);
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
}

.pricing-page-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

.pricing-page-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-grey);
    line-height: 1.6;
}

.pricing-page-feature:last-child {
    border-bottom: none;
}

.pricing-page-feature-icon {
    color: var(--accent-mint);
    font-size: 0.75rem;
    margin-top: 4px;
    flex-shrink: 0;
    opacity: 0.9;
}

.pricing-page-feature strong {
    color: var(--text-white);
    font-weight: 500;
}

/* Card Footer — CTA */
.pricing-page-card-footer {
    padding: 20px 30px 30px;
}

.pricing-page-cta {
    display: block;
    width: 100%;
    padding: 16px 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    color: var(--text-white);
    background: transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pricing-page-cta:hover {
    border-color: var(--accent-mint);
    background: var(--accent-mint);
    color: #050510;
    box-shadow: var(--shadow-glow-mint);
}

.pricing-page-cta:active {
    transform: scale(0.98);
    filter: brightness(0.9);
}

/* Guidance line below cards */
.pricing-page-guidance {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.pricing-page-guidance-text {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-white);
    font-size: 0.9rem;
    opacity: 0.85;
}


/* --- 3. COMPARISON INTERACTIVE --- */
.pricing-page-compare {
    position: relative;
    padding: 100px 0;
    width: 100%;
}

.pricing-page-compare-header {
    margin-bottom: 70px;
}

.pricing-page-subline {
    margin-top: 16px;
    opacity: 0.8;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.comp-card {
    background: var(--surface-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.3s ease, background 0.3s ease;
}

/* LEFT CARD: BuzzingFrame (Hero) */
.comp-card.bf-card {
    border: 1px solid var(--accent-mint);
    background: rgba(52, 254, 194, 0.03);
    box-shadow: 0 0 30px rgba(52, 254, 194, 0.05);
    position: relative;
    --card-accent: var(--accent-mint);
}

.comp-card-header {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    /* Alignment fixed height */
}

.comp-logo {
    height: 24px;
}

/* RIGHT CARD: Competitor */
.comp-card.competitor-card {
    background: rgba(1, 1, 2, 0.8);
    border-color: rgba(255, 255, 255, 0.05);
    --card-accent: rgba(255, 255, 255, 0.1);
}

.comp-toggles {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow-x: auto;
    height: 48px;
    /* Alignment fixed height */
    align-items: center;
}

.comp-toggle-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-grey);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.comp-toggle-btn:hover {
    color: var(--text-white);
    border-color: rgba(255, 255, 255, 0.3);
}

.comp-toggle-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    border-color: rgba(255, 255, 255, 0.2);
}

/* CONTENT LISTS */
.comp-list,
.comp-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.comp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.comp-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.comp-row:first-child {
    padding-top: 0;
}

.comp-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-grey);
    opacity: 0.6;
}

.comp-value {
    font-size: 1rem;
    color: var(--text-white);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: right;
}

.comp-icon {
    width: 24px;
    height: 24px;
    stroke: var(--accent-mint);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.highlight-text {
    color: var(--accent-mint);
    text-shadow: 0 0 10px rgba(52, 254, 194, 0.3);
}

/* Content Toggling */
.comp-group {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-direction: column;
}

.comp-group.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* In the competitor card, labels can be hidden on desktop for cleaner look, 
   since they align with the left card. 
   BUT on mobile they stack, so they need labels.
   Let's keep labels for clarity or hide them if we want strict alignment.
   The prompt implies "Contrast", so alignment matters. 
   Let's hide labels in the right card on desktop to force alignment check?
   No, let's keep them small/subtle to ensure context if they look at just one side.
*/



/* --- 4. FAQ SECTION (matches home.css FAQ exactly) --- */
.pricing-page-faq {
    position: relative;
    padding: 10vh 0;
    width: 100%;
    background: transparent;
    z-index: 2;
}

.pricing-page-faq-grid {
    display: grid;
    grid-template-columns: 0.8fr 2fr;
    gap: 4vw;
}

.pricing-page-faq-sidebar {
    position: relative;
}

.pricing-page-faq-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.pricing-page-faq-header {
    max-width: 600px;
    padding-bottom: 20px;
}

/* FAQ accordion → shared.css */





/* --- 6. RESPONSIVE: 1024px --- */
@media (max-width: 1024px) {
    .pricing-page-hero-grid {
        grid-template-columns: 1fr;
    }

    .pricing-page-tiers {
        grid-template-columns: repeat(3, 1fr);
    }

    /* .pricing-page-card reveal → shared.css */

    .pricing-page-faq-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 7. RESPONSIVE: 768px --- */
@media (max-width: 768px) {
    .pricing-page-tiers {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pricing-page-compare {
        padding: 70px 0;
    }

    /* Stack comparison cards on mobile */
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .comp-card {
        padding: 28px;
    }

    .comp-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 18px 0;
    }

    .comp-value {
        text-align: left;
    }

    .pricing-page-table th {
        font-size: 0.7rem;
        padding: 12px 10px;
    }

    .pricing-page-table td {
        font-size: 0.8rem;
        padding: 12px 10px;
    }

    /* .faq-question-text, .faq-question responsive → shared.css */
}

/* --- 8. RESPONSIVE: 480px --- */
@media (max-width: 480px) {
    .pricing-page-card-header {
        padding: 24px 20px 20px;
        min-height: auto;
    }

    .pricing-page-card-body {
        padding: 20px;
    }

    .pricing-page-card-footer {
        padding: 16px 20px 24px;
    }

    .pricing-page-tier-name {
        font-size: 1.2rem;
    }

    .pricing-page-compare-header {
        margin-bottom: 32px;
    }

    .pricing-page-table th {
        font-size: 0.65rem;
        padding: 10px 8px;
    }

    .pricing-page-table td {
        font-size: 0.75rem;
        padding: 10px 8px;
    }
}