/* ==========================================================================
   DashboardFox Pricing Page Styles
   Page-specific styles for pricing.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page Header
   -------------------------------------------------------------------------- */
.page-header { 
    padding: calc(var(--header-height) + 60px) 24px 40px; 
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-subtle) 100%); 
    text-align: center; 
}
.page-header-inner { max-width: 700px; margin: 0 auto; }
.page-badge { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    background: var(--color-accent-soft); 
    color: var(--color-accent); 
    font-size: 14px; 
    font-weight: 600; 
    padding: 8px 16px; 
    border-radius: 100px; 
    margin-bottom: 20px; 
    border: 1px solid rgba(255, 88, 71, 0.2); 
}
.page-header h1 { 
    font-size: clamp(40px, 5vw, 56px); 
    font-weight: 800; 
    line-height: 1.1; 
    letter-spacing: -0.03em; 
    margin-bottom: 20px; 
    text-wrap: balance;
}
.page-header p { font-size: 20px; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 32px; }

/* --------------------------------------------------------------------------
   Billing Toggle
   -------------------------------------------------------------------------- */
.billing-toggle { 
    display: inline-flex; 
    align-items: center; 
    background: var(--color-surface); 
    padding: 6px; 
    border-radius: 100px; 
    border: 1px solid var(--color-border); 
}
.toggle-option { 
    padding: 12px 28px; 
    border-radius: 100px; 
    font-size: 16px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.2s; 
    color: var(--color-text-secondary); 
    background: none; 
    border: none; 
    font-family: var(--font-sans); 
    position: relative; 
}
.toggle-option.active { background: var(--color-primary); color: white; }
.toggle-option:not(.active):hover { color: var(--color-text); }
.toggle-save { 
    position: absolute; 
    top: -8px; 
    right: -8px; 
    background: var(--color-success); 
    color: white; 
    font-size: 11px; 
    font-weight: 700; 
    padding: 3px 6px; 
    border-radius: 100px; 
}

/* --------------------------------------------------------------------------
   Pricing Section
   -------------------------------------------------------------------------- */
.pricing-section { padding: 50px 24px 80px; }
.pricing-section-inner { max-width: var(--max-width); margin: 0 auto; }

/* Pricing security bar override */
.pricing-section .security-bar { margin-bottom: 40px; }

/* --------------------------------------------------------------------------
   Pricing Cards (Full version)
   -------------------------------------------------------------------------- */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 48px; }
.pricing-card { 
    background: var(--color-surface); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-xl); 
    padding: 32px 24px; 
    position: relative; 
    transition: all 0.3s; 
    display: flex; 
    flex-direction: column; 
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pricing-card.popular { border: 2px solid var(--color-primary); }
.pricing-card.popular::before { 
    content: 'Most Popular'; 
    position: absolute; 
    top: -14px; 
    left: 50%; 
    transform: translateX(-50%); 
    background: var(--color-primary); 
    color: white; 
    font-size: 13px; 
    font-weight: 700; 
    padding: 6px 16px; 
    border-radius: 100px; 
}

.early-badge { 
    display: inline-block; 
    background: var(--color-accent); 
    color: white; 
    font-size: 13px; 
    font-weight: 700; 
    padding: 4px 10px; 
    border-radius: 100px; 
    margin-bottom: 12px; 
}
.pricing-card-header { margin-bottom: 20px; }
.pricing-card-name { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.pricing-card-desc { font-size: 14px; color: var(--color-text-muted); }

.pricing-card-price { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border-subtle); }
.price-strike { font-size: 20px; color: var(--color-text-muted); text-decoration: line-through; margin-right: 8px; }
.pricing-card-price .amount { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; }
.pricing-card-price .period { font-size: 16px; color: var(--color-text-muted); }
.pricing-card-price .note { display: block; font-size: 13px; color: var(--color-success); font-weight: 600; margin-top: 4px; }
.pricing-card-price .annual-savings { display: none; font-size: 13px; color: var(--color-success); font-weight: 500; margin-top: 4px; }
.pricing-card-price .annual-savings.show { display: block; }

.pricing-card-features { list-style: none; flex-grow: 1; margin-bottom: 24px; }
.pricing-card-features li { 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
    padding: 8px 0; 
    font-size: 14px; 
    color: var(--color-text-secondary); 
}
.pricing-card-features li svg { width: 18px; height: 18px; color: var(--color-success); flex-shrink: 0; margin-top: 1px; }
.pricing-card-features li.highlight { color: var(--color-text); font-weight: 600; }

.pricing-card .btn { width: 100%; }

/* --------------------------------------------------------------------------
   All Plans Include
   -------------------------------------------------------------------------- */
.all-plans { 
    background: var(--color-bg-subtle); 
    border-radius: var(--radius-xl); 
    padding: 48px; 
    margin-bottom: 60px; 
    text-align: center; 
}
.all-plans h3 { font-size: 24px; font-weight: 700; margin-bottom: 32px; }
.all-plans-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.all-plans-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.all-plans-icon { 
    width: 48px; 
    height: 48px; 
    background: var(--color-primary-soft); 
    border-radius: var(--radius-md); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--color-primary); 
}
.all-plans-icon svg { width: 24px; height: 24px; }
.all-plans-item h4 { font-size: 16px; font-weight: 600; }
.all-plans-item p { font-size: 14px; color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   Add-Ons Section
   -------------------------------------------------------------------------- */
.addons-section { 
    background: var(--color-surface); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-xl); 
    padding: 40px; 
    margin-bottom: 60px; 
}
.addons-header { text-align: center; margin-bottom: 32px; }
.addons-header h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.addons-header p { font-size: 16px; color: var(--color-text-secondary); }
.addons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.addon-card { 
    background: var(--color-bg-subtle); 
    border: 1px solid var(--color-border-subtle); 
    border-radius: var(--radius-lg); 
    padding: 24px; 
    text-align: center; 
    transition: all 0.2s; 
}
.addon-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.addon-card-icon { 
    width: 44px; 
    height: 44px; 
    background: var(--color-primary-soft); 
    border-radius: var(--radius-md); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto 16px; 
    color: var(--color-primary); 
}
.addon-card-icon svg { width: 22px; height: 22px; }
.addon-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.addon-card-price { margin-bottom: 8px; }
.addon-card-price .addon-strike { font-size: 14px; color: var(--color-text-muted); text-decoration: line-through; margin-right: 6px; }
.addon-card-price .addon-amount { font-size: 24px; font-weight: 800; color: var(--color-text); }
.addon-card-price .addon-period { font-size: 14px; color: var(--color-text-muted); }
.addon-card-desc { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.addon-card-note { font-size: 13px; color: var(--color-success); font-weight: 600; margin-top: 10px; }
.addons-footer { text-align: center; margin-top: 24px; font-size: 14px; color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Feature Comparison Table
   -------------------------------------------------------------------------- */
.comparison-section { margin-bottom: 60px; }
.comparison-header { text-align: center; margin-bottom: 32px; }
.comparison-header h2 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.comparison-header p { font-size: 16px; color: var(--color-text-muted); }
.comparison-table-wrapper { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.comparison-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 700px; }
.comparison-table th, .comparison-table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--color-border-subtle); }
.comparison-table th { font-weight: 700; font-size: 16px; background: var(--color-bg-muted); position: sticky; top: 0; }
.comparison-table th:first-child, .comparison-table td:first-child { text-align: left; font-weight: 500; }
.comparison-table th.highlight-col { background: var(--color-bg-muted); color: var(--color-primary); }
.comparison-table td.highlight-col { background: rgba(55, 152, 255, 0.04); }
.comparison-table .table-category { 
    background: var(--color-bg-muted); 
    font-weight: 700; 
    font-size: 13px; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    color: var(--color-text-muted); 
    text-align: left !important; 
}
.comparison-table .check-icon { color: var(--color-success); font-weight: 700; }
.comparison-table .dash-icon { color: var(--color-text-muted); }
.comparison-table tbody tr:hover { background: var(--color-bg-subtle); }
.comparison-table tbody tr:hover td.highlight-col { background: rgba(55, 152, 255, 0.08); }

/* --------------------------------------------------------------------------
   Special Programs
   -------------------------------------------------------------------------- */
.special-programs { margin-bottom: 60px; }
.special-programs h3 { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 24px; }
.special-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.special-card { 
    background: var(--color-surface); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-lg); 
    padding: 28px; 
    text-align: center; 
    transition: all 0.2s; 
}
.special-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.special-card-icon { 
    width: 48px; 
    height: 48px; 
    background: var(--color-primary-soft); 
    border-radius: var(--radius-md); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto 16px; 
    color: var(--color-primary); 
}
.special-card-icon svg { width: 24px; height: 24px; }
.special-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.special-card p { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 16px; }
.special-card a { font-size: 14px; color: var(--color-primary); font-weight: 600; text-decoration: none; }
.special-card a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Self-Hosted Banner
   -------------------------------------------------------------------------- */
.self-hosted-banner { 
    background: var(--color-text); 
    color: white; 
    border-radius: var(--radius-xl); 
    padding: 48px; 
    display: grid; 
    grid-template-columns: 1fr auto; 
    gap: 40px; 
    align-items: center; 
    margin-bottom: 60px; 
}
.self-hosted-banner h3 { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.self-hosted-banner p { font-size: 17px; color: rgba(255,255,255,0.7); margin-bottom: 0; }
.self-hosted-banner .price { text-align: right; }
.self-hosted-banner .price .amount { font-size: 48px; font-weight: 800; color: var(--color-primary); }
.self-hosted-banner .price .note { font-size: 16px; color: rgba(255,255,255,0.6); display: block; margin-top: 4px; margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   Fair Use
   -------------------------------------------------------------------------- */
.fair-use { 
    background: var(--color-bg-subtle); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-xl); 
    padding: 36px; 
    margin-bottom: 60px; 
}
.fair-use-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.fair-use-header svg { width: 24px; height: 24px; color: var(--color-primary); }
.fair-use-header h3 { font-size: 20px; font-weight: 700; }
.fair-use > p { font-size: 16px; color: var(--color-text-secondary); margin-bottom: 24px; }
.fair-use-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.fair-use-item { display: flex; gap: 14px; }
.fair-use-item-icon { 
    width: 40px; 
    height: 40px; 
    background: var(--color-primary-soft); 
    border-radius: var(--radius-sm); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--color-primary); 
    flex-shrink: 0; 
}
.fair-use-item-icon svg { width: 20px; height: 20px; }
.fair-use-item h4 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.fair-use-item p { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.fair-use-link { font-size: 14px; color: var(--color-primary); font-weight: 600; text-decoration: none; }
.fair-use-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   FAQ Section (Pricing version)
   -------------------------------------------------------------------------- */
.faq-section { background: var(--color-bg-subtle); padding: 80px 24px; }
.faq-section-inner { max-width: 800px; margin: 0 auto; }
.faq-header { text-align: center; margin-bottom: 48px; }
.faq-header h2 { font-size: 32px; font-weight: 700; margin-bottom: 12px; }
.faq-header p { font-size: 18px; color: var(--color-text-secondary); }

/* Override FAQ styles for pricing page */
.faq-section .faq-question { padding: 24px 0; font-size: 17px; }
.faq-section .faq-question svg { width: 24px; height: 24px; }
.faq-section .faq-answer { padding-bottom: 24px; }

/* --------------------------------------------------------------------------
   Responsive - Pricing specific
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .all-plans-grid { grid-template-columns: repeat(2, 1fr); }
    .addons-grid { grid-template-columns: repeat(2, 1fr); }
    .fair-use-grid { grid-template-columns: 1fr; }
    .self-hosted-banner { grid-template-columns: 1fr; text-align: center; }
    .self-hosted-banner .price { text-align: center; }
}

@media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .all-plans-grid { grid-template-columns: 1fr; }
    .addons-grid { grid-template-columns: 1fr; }
    .special-grid { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
   Calculator CTA Banner
   -------------------------------------------------------------------------- */
.calculator-cta-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--color-primary-soft);
    border: 1px solid rgba(55, 152, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: 24px 32px;
    margin-top: 48px;
}

.calculator-cta-banner-icon {
    width: 56px;
    height: 56px;
    background: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.calculator-cta-banner-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.calculator-cta-banner-content {
    flex: 1;
}

.calculator-cta-banner-content h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.calculator-cta-banner-content p {
    font-size: 15px;
    color: var(--color-text-secondary);
    margin: 0;
}

.calculator-cta-banner .btn {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .calculator-cta-banner {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }
    .calculator-cta-banner-content h4 { margin-bottom: 8px; }
}

/* --------------------------------------------------------------------------
   VISUAL #1: How MAU Pricing Works — Cushion Gauge
   -------------------------------------------------------------------------- */
.pmv-cushion {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin-top: 24px;
}
.pmv-cushion h4 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.pmv-cushion-desc { font-size: 15px; color: var(--color-text-secondary); margin-bottom: 20px; line-height: 1.6; }

.pmv-gauge { margin-bottom: 16px; }
.pmv-gauge-bar {
    display: flex;
    height: 40px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-muted);
}
.pmv-gauge-fill {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.pmv-gauge-label {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.pmv-gauge-included {
    background: var(--color-primary);
}
.pmv-gauge-included .pmv-gauge-label { color: white; }

.pmv-gauge-buffer {
    background: rgba(55, 152, 255, 0.25);
}
.pmv-gauge-buffer .pmv-gauge-label { color: var(--color-primary-dark); }

.pmv-gauge-remaining {
    background: var(--color-bg-muted);
}

.pmv-gauge-markers {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 8px;
    padding: 0 2px;
}
.pmv-gauge-marker-limit { font-weight: 600; color: var(--color-primary); }

.pmv-cushion-note {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* --------------------------------------------------------------------------
   VISUAL #1: How MAU Pricing Works
   -------------------------------------------------------------------------- */
.pricing-mau-visual {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 48px;
    margin-bottom: 60px;
}
.pmv-header { text-align: center; margin-bottom: 36px; }
.pmv-header h3 { font-size: 28px; font-weight: 700; margin-bottom: 10px; }
.pmv-header p { font-size: 17px; color: var(--color-text-secondary); max-width: 640px; margin: 0 auto; line-height: 1.6; }

.pmv-scenario {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
}
.pmv-scenario-setup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border-subtle);
    flex-wrap: wrap;
}
.pmv-plan-badge {
    background: var(--color-primary-soft);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 16px 24px;
    text-align: center;
}
.pmv-plan-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); display: block; margin-bottom: 4px; }
.pmv-plan-name { font-size: 24px; font-weight: 800; color: var(--color-text); }
.pmv-plan-limit { font-size: 14px; color: var(--color-text-secondary); margin-top: 4px; }
.pmv-arrow { color: var(--color-text-muted); flex-shrink: 0; }
.pmv-access-badge {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 24px;
    text-align: center;
}
.pmv-access-number { display: block; font-size: 32px; font-weight: 800; color: var(--color-text); }
.pmv-access-label { font-size: 14px; color: var(--color-text-secondary); }

.pmv-breakdown { }
.pmv-month-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}
.pmv-breakdown-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.pmv-stat {
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
}
.pmv-stat-number { font-size: 36px; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.pmv-stat-label { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.pmv-stat-detail { font-size: 14px; }

.pmv-stat-active {
    background: var(--color-primary-soft);
    border: 1px solid rgba(55, 152, 255, 0.2);
}
.pmv-stat-active .pmv-stat-number { color: var(--color-primary); }
.pmv-stat-active .pmv-stat-label { color: var(--color-text); }
.pmv-stat-active .pmv-stat-detail { color: var(--color-text-secondary); }

.pmv-stat-scheduled {
    background: var(--color-success-soft);
    border: 1px solid rgba(22, 163, 74, 0.15);
}
.pmv-stat-scheduled .pmv-stat-number { color: var(--color-success); }
.pmv-stat-scheduled .pmv-stat-label { color: var(--color-text); }
.pmv-stat-scheduled .pmv-stat-detail { color: var(--color-text-secondary); }

.pmv-stat-inactive {
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border-subtle);
}
.pmv-stat-inactive .pmv-stat-number { color: var(--color-text-muted); }
.pmv-stat-inactive .pmv-stat-label { color: var(--color-text); }
.pmv-stat-inactive .pmv-stat-detail { color: var(--color-text-secondary); }

.pmv-result {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-success-soft);
    border: 1px solid rgba(22, 163, 74, 0.15);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    font-size: 16px;
    color: var(--color-text);
}
.pmv-result svg { flex-shrink: 0; }

.pmv-tracking-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
    padding: 20px 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.pmv-tracking-note svg { flex-shrink: 0; color: var(--color-primary); margin-top: 2px; }
.pmv-tracking-note p { margin: 0; }

/* --------------------------------------------------------------------------
   VISUAL #2: Cost Contrast
   -------------------------------------------------------------------------- */
.pricing-contrast-visual {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 40px;
    margin-bottom: 60px;
    text-align: center;
}
.pricing-contrast-visual h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.pcv-subtitle { font-size: 16px; color: var(--color-text-secondary); margin-bottom: 32px; }

.pcv-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.pcv-card {
    border-radius: var(--radius-lg);
    padding: 28px;
    text-align: center;
}
.pcv-card-brand { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.pcv-card-model { font-size: 16px; color: var(--color-text-secondary); margin-bottom: 12px; }
.pcv-card-price { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 6px; }
.pcv-card-price span { font-size: 18px; font-weight: 500; }
.pcv-card-note { font-size: 14px; margin-bottom: 16px; }
.pcv-card-bar { height: 8px; background: var(--color-bg-muted); border-radius: 4px; overflow: hidden; }
.pcv-card-bar-fill { height: 100%; border-radius: 4px; }

.pcv-card-fox {
    background: var(--color-primary-soft);
    border: 2px solid var(--color-primary);
}
.pcv-card-fox .pcv-card-brand { color: var(--color-primary); }
.pcv-card-fox .pcv-card-price { color: var(--color-text); }
.pcv-card-fox .pcv-card-note { color: var(--color-text-secondary); }
.pcv-bar-fox { background: var(--color-primary); }

.pcv-card-competitor {
    background: var(--color-warning-soft);
    border: 1px solid rgba(255, 88, 71, 0.2);
}
.pcv-card-competitor .pcv-card-brand { color: var(--color-warning); }
.pcv-card-competitor .pcv-card-price { color: var(--color-text); }
.pcv-card-competitor .pcv-card-note { color: var(--color-text-secondary); }
.pcv-bar-competitor { background: var(--color-warning); }

.pcv-savings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    color: var(--color-text);
    padding-top: 20px;
    border-top: 1px solid var(--color-border-subtle);
}
.pcv-savings svg { color: var(--color-success); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   VISUAL #4: Stackable Add-on Blocks
   -------------------------------------------------------------------------- */
.addon-stack-visual {
    margin-bottom: 32px;
}
.addon-stack-example {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.addon-stack-block {
    border-radius: var(--radius-md);
    padding: 16px 24px;
    text-align: center;
    min-width: 120px;
}
.addon-stack-block-badge {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.addon-stack-block-value {
    font-size: 22px;
    font-weight: 800;
}
.addon-stack-plan {
    background: var(--color-primary-soft);
    border: 2px solid var(--color-primary);
}
.addon-stack-plan .addon-stack-block-badge { color: var(--color-primary); }
.addon-stack-plan .addon-stack-block-value { color: var(--color-text); }

.addon-stack-addon {
    background: var(--color-success-soft);
    border: 2px dashed var(--color-success);
}
.addon-stack-addon .addon-stack-block-badge { color: var(--color-success); }
.addon-stack-addon .addon-stack-block-value { color: var(--color-text); }

.addon-stack-result {
    background: var(--color-primary-soft);
    border: 2px solid var(--color-primary);
}
.addon-stack-result .addon-stack-block-badge { color: var(--color-primary); }
.addon-stack-result .addon-stack-block-value { color: var(--color-text); }

.addon-stack-operator {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-text-muted);
}
.addon-stack-note {
    text-align: center;
    font-size: 15px;
    color: var(--color-text-secondary);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   VISUAL #6: Before / After Scenarios
   -------------------------------------------------------------------------- */
.pricing-before-after {
    margin-bottom: 60px;
}
.pricing-before-after h3 { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 8px; }
.pba-subtitle { text-align: center; font-size: 16px; color: var(--color-text-secondary); margin-bottom: 32px; }

.pba-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.pba-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 32px;
}
.pba-card-icon {
    width: 52px;
    height: 52px;
    background: var(--color-primary-soft);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: 16px;
}
.pba-card h4 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }

.pba-comparison { display: flex; flex-direction: column; gap: 16px; }
.pba-before, .pba-after {
    border-radius: var(--radius-md);
    padding: 20px;
}
.pba-before {
    background: var(--color-warning-soft);
    border: 1px solid rgba(255, 88, 71, 0.15);
}
.pba-after {
    background: var(--color-success-soft);
    border: 1px solid rgba(22, 163, 74, 0.15);
}

.pba-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 100px;
    margin-bottom: 10px;
}
.pba-label-before { background: rgba(255, 88, 71, 0.15); color: var(--color-warning); }
.pba-label-after { background: rgba(22, 163, 74, 0.15); color: var(--color-success); }

.pba-before p, .pba-after p { font-size: 15px; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 12px; }

.pba-price-tag {
    display: inline-block;
    font-size: 20px;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: var(--radius-sm);
}
.pba-price-before { background: rgba(255, 88, 71, 0.12); color: var(--color-text); }
.pba-price-after { background: rgba(22, 163, 74, 0.12); color: var(--color-text); }

/* --------------------------------------------------------------------------
   VISUAL #5: Cloud vs Self-Hosted Deploy
   -------------------------------------------------------------------------- */
.pricing-deploy-visual {
    margin-bottom: 60px;
}
.pricing-deploy-visual h3 { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 8px; }
.pdv-subtitle { text-align: center; font-size: 16px; color: var(--color-text-secondary); margin-bottom: 32px; }

.pdv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.pdv-option {
    border-radius: var(--radius-xl);
    padding: 32px;
    position: relative;
}
.pdv-option-cloud {
    background: var(--color-surface);
    border: 2px solid var(--color-primary);
}
.pdv-option-selfhosted {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}
.pdv-option-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: white;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 100px;
}

.pdv-diagram { margin-bottom: 20px; }
.pdv-diagram-box {
    border-radius: var(--radius-md);
    padding: 20px;
}
.pdv-box-managed {
    background: var(--color-primary-soft);
    border: 1px dashed rgba(55, 152, 255, 0.3);
}
.pdv-box-yours {
    background: var(--color-bg-subtle);
    border: 1px dashed var(--color-border);
}
.pdv-box-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.pdv-box-managed .pdv-box-label { color: var(--color-primary); }
.pdv-box-yours .pdv-box-label { color: var(--color-text-muted); }

.pdv-box-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pdv-box-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-secondary);
}
.pdv-box-item svg { flex-shrink: 0; }
.pdv-box-managed .pdv-box-item svg { color: var(--color-primary); }
.pdv-box-yours .pdv-box-item svg { color: var(--color-text-muted); }

.pdv-option h4 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.pdv-option p { font-size: 15px; color: var(--color-text-secondary); margin-bottom: 16px; line-height: 1.5; }

.pdv-price { margin-bottom: 16px; }
.pdv-price-amount { font-size: 36px; font-weight: 800; color: var(--color-text); }
.pdv-price-label { font-size: 16px; color: var(--color-text-muted); margin-left: 4px; }

.pdv-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pdv-features span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--color-text-secondary);
}
.pdv-features svg { width: 18px; height: 18px; color: var(--color-success); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Responsive — New Visual Sections
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .pcv-cards { grid-template-columns: 1fr; }
    .pba-grid { grid-template-columns: 1fr; }
    .pdv-grid { grid-template-columns: 1fr; }
    .pdv-option-cloud { order: 1; }
    .pdv-option-selfhosted { order: 2; }
}

@media (max-width: 768px) {
    .pricing-mau-visual { padding: 28px; }
    .pmv-scenario { padding: 20px; }
    .pmv-scenario-setup { flex-direction: column; gap: 16px; }
    .pmv-breakdown-cards { grid-template-columns: 1fr; }
    .pmv-arrow { transform: rotate(90deg); }
    .pmv-cushion { padding: 20px; }
    .pmv-gauge-label { font-size: 13px; }
    .pricing-contrast-visual { padding: 28px; }
    .pcv-card-price { font-size: 32px; }
    .addon-stack-example { flex-direction: column; gap: 8px; }
    .addon-stack-block { min-width: unset; width: 100%; max-width: 200px; }
    .pba-card { padding: 24px; }
    .pdv-option { padding: 24px; }
    .pdv-box-items { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Comparison Table Tooltips
   -------------------------------------------------------------------------- */
.feature-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tooltip-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-bg-muted);
    border-radius: 50%;
    cursor: help;
    flex-shrink: 0;
    font-style: normal;
}
.tooltip-icon:hover,
.tooltip-icon.active {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}
.tooltip-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    background: var(--color-text);
    color: white;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    width: 280px;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 100;
    box-shadow: var(--shadow-lg);
}
.tooltip-icon:hover::after,
.tooltip-icon.active::after {
    opacity: 1;
    visibility: visible;
}
.tooltip-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-radius: 50%;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .tooltip-icon::after {
        width: 220px;
        bottom: auto;
        top: calc(100% + 8px);
    }
}

/* --------------------------------------------------------------------------
   All Plans — Competitive Sub-labels
   -------------------------------------------------------------------------- */
.all-plans-competitive-note { display: block; font-size: 13px; font-weight: 700; color: var(--color-accent); letter-spacing: 0.01em; margin-top: 4px; }

/* --------------------------------------------------------------------------
   Anchor CTA below pricing cards
   -------------------------------------------------------------------------- */
.pricing-calc-anchor { text-align: center; font-size: 15px; color: var(--color-text-secondary); margin: -24px 0 40px; }
.pricing-calc-anchor a { font-weight: 600; color: var(--color-primary); }
.pricing-calc-anchor a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Lite Inline Calculator
   -------------------------------------------------------------------------- */
.lite-calc {
    background: var(--color-surface);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-xl);
    padding: 48px;
    margin-bottom: 60px;
}
.lite-calc-header { text-align: center; margin-bottom: 36px; }
.lite-calc-header h3 { font-size: clamp(22px, 2.5vw, 30px); font-weight: 800; margin-bottom: 10px; line-height: 1.2; }
.lite-calc-header p { font-size: 16px; color: var(--color-text-secondary); line-height: 1.6; }
.lite-calc-header p a { color: var(--color-primary); font-weight: 600; }
.lite-calc-header p a:hover { text-decoration: underline; }

.lite-calc-body { max-width: 760px; margin: 0 auto; }

.lite-calc-inputs { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.lite-calc-input-group { flex: 1; }
.lite-calc-input-group label { display: block; font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.lite-calc-hint { font-size: 13px; color: var(--color-text-muted); margin: 0 0 10px; line-height: 1.4; }
.lite-calc-input-row { display: flex; align-items: center; gap: 10px; }
.lite-calc-input-row input {
    width: 100%;
    padding: 12px 16px;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg-subtle);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.2s, box-shadow 0.2s;
    -moz-appearance: textfield;
}
.lite-calc-input-row input::-webkit-outer-spin-button,
.lite-calc-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; }
.lite-calc-input-row input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.lite-calc-input-row span { font-size: 14px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }

.lite-calc-divider { display: flex; align-items: center; padding-bottom: 24px; color: var(--color-text-muted); flex-shrink: 0; }
.lite-calc-divider svg { width: 24px; height: 24px; opacity: 0.4; }

.lite-calc-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    background: var(--color-primary-soft);
    border-radius: var(--radius-md);
    margin-bottom: 28px;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.lite-calc-note svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; margin-top: 1px; }
.lite-calc-note strong { color: var(--color-text); }

.lite-result-card {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    transition: all 0.25s;
}
.lite-result-card.lite-result-starter,
.lite-result-card.lite-result-growth,
.lite-result-card.lite-result-scale { background: var(--color-success-soft); border-color: rgba(22, 163, 74, 0.2); }

.lite-result-tier { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-success); margin-bottom: 6px; }
.lite-result-card.lite-result-enterprise .lite-result-tier { color: var(--color-text-muted); }
.lite-result-price { font-size: clamp(32px, 4vw, 44px); font-weight: 800; color: var(--color-text); line-height: 1; margin-bottom: 8px; }
.lite-result-price span { font-size: 18px; font-weight: 500; color: var(--color-text-secondary); }

.lite-result-breakdown { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.lite-result-breakdown span { font-size: 14px; color: var(--color-text-secondary); }
.lite-result-annual { font-size: 13px !important; color: var(--color-success) !important; font-weight: 600; }

.lite-result-desc { font-size: 15px; color: var(--color-text-secondary); line-height: 1.6; padding-top: 16px; border-top: 1px solid var(--color-border-subtle); margin-bottom: 16px; }
.lite-result-desc strong { color: var(--color-text); }

.lite-result-upgrade-note { font-size: 14px; color: var(--color-text-secondary); background: var(--color-primary-soft); border-left: 3px solid var(--color-primary); padding: 10px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 16px; line-height: 1.5; }

.lite-result-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Simple MAU Explainer
   -------------------------------------------------------------------------- */
.mau-simple { background: var(--color-bg-subtle); border-radius: var(--radius-xl); padding: 48px; margin-bottom: 60px; }
.mau-simple-header { text-align: center; margin-bottom: 36px; }
.mau-simple-header h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; margin-bottom: 10px; }
.mau-simple-header p { font-size: 16px; color: var(--color-text-secondary); max-width: 540px; margin: 0 auto; line-height: 1.6; }
.mau-simple-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mau-simple-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mau-simple-icon { width: 48px; height: 48px; background: var(--color-primary-soft); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-primary); }
.mau-simple-icon svg { width: 24px; height: 24px; }
.mau-simple-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 0; }
.mau-simple-card p { font-size: 14px; color: var(--color-text-secondary); line-height: 1.65; margin: 0; }

/* --------------------------------------------------------------------------
   Why Cheaper Callout
   -------------------------------------------------------------------------- */
.why-cheaper-callout { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 48px; margin-bottom: 60px; }
.why-cheaper-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.why-cheaper-header svg { width: 28px; height: 28px; color: var(--color-primary); flex-shrink: 0; }
.why-cheaper-header h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.2; margin: 0; }
.why-cheaper-intro { font-size: 16px; color: var(--color-text-secondary); margin: 0 0 32px; padding-left: 42px; }
.why-cheaper-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.why-cheaper-item { display: flex; flex-direction: column; gap: 10px; }
.why-cheaper-num { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: var(--color-primary); opacity: 0.6; }
.why-cheaper-item h4 { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0; }
.why-cheaper-item p { font-size: 15px; color: var(--color-text-secondary); line-height: 1.65; margin: 0; }

/* --------------------------------------------------------------------------
   Responsive — New Sections
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .why-cheaper-grid { grid-template-columns: 1fr; gap: 24px; }
    .mau-simple-cards { grid-template-columns: 1fr; gap: 16px; }
    .why-cheaper-intro { padding-left: 0; }
    .lite-calc { padding: 32px 28px; }
}

@media (max-width: 768px) {
    .lite-calc { padding: 28px 20px; }
    .lite-calc-inputs { flex-direction: column; align-items: stretch; gap: 20px; }
    .lite-calc-divider { display: none; }
    .lite-result-actions { flex-direction: column; }
    .lite-result-actions .btn { width: 100%; text-align: center; justify-content: center; }
    .mau-simple { padding: 28px 20px; }
    .why-cheaper-callout { padding: 28px 20px; }
    .why-cheaper-header { flex-wrap: wrap; }
    .pricing-calc-anchor { margin-top: -16px; }
}
/* --------------------------------------------------------------------------
   Builder video section
   -------------------------------------------------------------------------- */
.sec-product-intro {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.sec-product-intro .section-label {
    display: inline-block;
    margin-bottom: 12px;
}

.sec-product-intro h2 {
    font-size: clamp(28px, 3.5vw, 36px);
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
}

.sec-product-intro p {
    font-size: 17px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.sec-product-video {
    width: 100%;
}

@media (max-width: 768px) {
    .sec-product-intro h2 { font-size: 26px; }
    .browser-url { display: none; }
}

/* ==========================================================================
   ADD TO pricing.css — new sections for revised page
   ========================================================================== */

/* --------------------------------------------------------------------------
   Billing Toggle Row — above cards
   -------------------------------------------------------------------------- */
.pricing-toggle-row {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

/* --------------------------------------------------------------------------
   On-Premise Callout (pulled from homepage.css — needed on pricing too)
   -------------------------------------------------------------------------- */
.onprem-callout {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.onprem-callout-content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 1;
    min-width: 280px;
}
.onprem-callout-icon {
    width: 52px;
    height: 52px;
    background: var(--color-primary-soft);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}
.onprem-callout-icon svg {
    width: 26px;
    height: 26px;
}
.onprem-callout-text h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}
.onprem-callout-text p {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .onprem-callout {
        flex-direction: column;
        padding: 28px 24px;
    }
    .onprem-callout .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}


/* --------------------------------------------------------------------------
   Pricing Card — tier capability callout line item
   -------------------------------------------------------------------------- */
.pricing-card-feature-callout {
    color: var(--color-primary) !important;
    font-size: 13px !important;
    font-style: italic;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-subtle);
}
.pricing-card-feature-callout svg {
    color: var(--color-primary) !important;
    width: 16px !important;
    height: 16px !important;
}

/* --------------------------------------------------------------------------
   Tier Capability Section
   -------------------------------------------------------------------------- */
.tier-capability {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 48px;
    margin-bottom: 60px;
}

.tier-capability-header {
    text-align: center;
    margin-bottom: 36px;
}
.tier-capability-header h3 {
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.2;
}
.tier-capability-header p {
    font-size: 17px;
    color: var(--color-text-secondary);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.tier-capability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.tier-capability-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
}
.tier-capability-card--featured {
    border: 2px solid var(--color-primary);
}

.tier-capability-name {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 4px;
}
.tier-capability-mau {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.tier-capability-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.tier-capability-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.tier-capability-list svg {
    width: 16px;
    height: 16px;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 2px;
}

.tier-capability-fit {
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 600;
    font-style: italic;
    margin: 0;
    line-height: 1.4;
}

.tier-capability-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.tier-capability-note svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-primary);
    margin-top: 2px;
}
.tier-capability-note p {
    margin: 0;
}
.tier-capability-note a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}
.tier-capability-note a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Comparison Table — CTA row at bottom
   -------------------------------------------------------------------------- */
.comparison-table-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px;
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    flex-wrap: wrap;
}
.comparison-table-cta p {
    font-size: 16px;
    color: var(--color-text-secondary);
    margin: 0;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Responsive — new sections
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .tier-capability { padding: 32px 28px; }
    .tier-capability-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 768px) {
    .tier-capability { padding: 28px 20px; }
    .comparison-table-cta { flex-direction: column; text-align: center; padding: 24px; }
    .comparison-table-cta .btn { width: 100%; text-align: center; justify-content: center; }
}