/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Marketing site layout uses global app.css, no scoped styles needed */
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* Pricing page: scoped styles for Pricing.razor */

/* ── Billing toggle ────────────────────────────────────────── */
.billing-tabs[b-brpwnwhlno] {
    display: flex;
    width: fit-content;
    margin: 0 auto 2.5rem;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.25rem;
    gap: 0;
}

.billing-tab[b-brpwnwhlno] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.billing-tab.active[b-brpwnwhlno] {
    background: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.billing-tab:hover:not(.active)[b-brpwnwhlno] {
    color: var(--color-text-primary);
}

.billing-tab:focus-visible[b-brpwnwhlno] {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

.billing-save[b-brpwnwhlno] {
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

/* ── Plans grid ────────────────────────────────────────────── */
.plans-grid[b-brpwnwhlno] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* ── Plan card ─────────────────────────────────────────────── */
.plan[b-brpwnwhlno] {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 20px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.plan:hover[b-brpwnwhlno] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.plan.popular[b-brpwnwhlno] {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08), var(--shadow-lg);
}

.popular-tag[b-brpwnwhlno] {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-brand-gradient);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.plan-tier[b-brpwnwhlno] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
}

.plan.popular .plan-tier[b-brpwnwhlno] {
    color: var(--color-brand-primary);
}

.plan-price[b-brpwnwhlno] {
    display: flex;
    align-items: baseline;
    gap: 0.1rem;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.plan-price .curr[b-brpwnwhlno] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    align-self: flex-start;
    margin-top: 0.4rem;
}

.plan-price .amount[b-brpwnwhlno] {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--color-brand-deep);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.plan-price .period[b-brpwnwhlno] {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    margin-left: 0.1rem;
}

.plan-annual[b-brpwnwhlno] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    min-height: 1.1rem;
    margin-bottom: 0.85rem;
}

.plan-desc[b-brpwnwhlno] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin-bottom: 0;
}

.plan-divider[b-brpwnwhlno] {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1rem 0;
}

.plan-features[b-brpwnwhlno] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.plan-features li[b-brpwnwhlno] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.plan-features li.hl[b-brpwnwhlno] {
    color: var(--color-text-primary);
    font-weight: 500;
}

.plan-features li.plan-feature--capacity[b-brpwnwhlno] {
    align-items: flex-start;
}

.plan-feature-copy[b-brpwnwhlno] {
    min-width: 0;
}

.plan-features .y[b-brpwnwhlno] {
    color: #10b981;
    font-size: 0.8rem;
    flex-shrink: 0;
    font-weight: 700;
}

.plan-features .n[b-brpwnwhlno] {
    color: var(--color-border-strong);
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* ── Plan CTA button ───────────────────────────────────────── */
.plan-btn[b-brpwnwhlno] {
    display: block;
    text-align: center;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    border: 1.5px solid transparent;
    margin-top: auto;
}

.plan-btn.primary[b-brpwnwhlno] {
    background: var(--color-brand-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.plan-btn.primary:hover[b-brpwnwhlno] {
    opacity: 0.9;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

.plan-btn.secondary[b-brpwnwhlno] {
    background: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}

.plan-btn.secondary:hover[b-brpwnwhlno] {
    background: var(--color-surface-muted);
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.plan-btn:focus-visible[b-brpwnwhlno] {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

/* Compare-table styles live in Components/Shared/PricingComparisonTable.razor.css
   so the home page and the standalone /pricing page can share them. */

.faq-a p + p[b-brpwnwhlno],
.faq-a ul + p[b-brpwnwhlno] {
    margin-top: 0.85rem;
}

.faq-a ul[b-brpwnwhlno] {
    margin-top: 0.6rem;
    padding-left: 1.1rem;
}

/* ── Dark mode ─────────────────────────────────────────────── */
:root[data-theme='dark'] .plan-price .amount[b-brpwnwhlno] {
    color: var(--color-text-primary);
}

:root[data-theme='dark'] .plan.popular[b-brpwnwhlno] {
    box-shadow: 0 0 0 4px rgba(122, 184, 255, 0.1), var(--shadow-lg);
}

:root[data-theme='dark'] .billing-tab.active[b-brpwnwhlno] {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1200px) {
    .plans-grid[b-brpwnwhlno] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .plans-grid[b-brpwnwhlno] {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .billing-tabs[b-brpwnwhlno] {
        margin-bottom: 2rem;
    }
}
/* /Components/Shared/PricingComparisonTable.razor.rz.scp.css */
/* PricingComparisonTable: scoped styles for the shared compare table.
   Migrated from Pricing.razor.css so the home page and the standalone
   /pricing page render the table identically.
   Blazor scoped CSS rewrites these selectors to apply only inside this
   component's root, so they won't collide with anything else. */

.compare-wrap[b-gm33pr0y5t] {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.compare-table[b-gm33pr0y5t] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 640px;
}

.compare-table th[b-gm33pr0y5t] {
    background: var(--color-surface-muted);
    padding: 0.85rem 1rem;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    white-space: nowrap;
}

.compare-table th.pop[b-gm33pr0y5t] {
    background: rgba(37, 99, 235, 0.07);
    color: var(--color-brand-primary);
}

.compare-table td[b-gm33pr0y5t] {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    text-align: center;
    vertical-align: middle;
    background: var(--color-surface);
}

.compare-table td:first-child[b-gm33pr0y5t] {
    text-align: left;
    color: var(--color-text-primary);
    font-weight: 500;
}

.compare-table td.pop[b-gm33pr0y5t] {
    background: rgba(37, 99, 235, 0.04);
}

.compare-table tr:last-child td[b-gm33pr0y5t] {
    border-bottom: none;
}

.compare-table tbody tr:hover td[b-gm33pr0y5t] {
    background: var(--color-surface-muted);
}

.compare-table tbody tr:hover td.pop[b-gm33pr0y5t] {
    background: rgba(37, 99, 235, 0.08);
}

.compare-table .ck[b-gm33pr0y5t] {
    color: #10b981;
    font-weight: 700;
}

.compare-table .no[b-gm33pr0y5t] {
    color: var(--color-border-strong);
}

/* Phone layout: each feature becomes one compact comparison card. The table
   stays in the accessibility tree, while visible plan labels are repeated via
   CSS so every value can be read without horizontal scrolling. */
@media (max-width: 599px) {
    .compare-wrap[b-gm33pr0y5t] {
        overflow: visible;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Removes the legacy home-page scroll hint now that this component no
       longer scrolls at phone widths. */
    .compare-wrap[b-gm33pr0y5t]::after {
        display: none;
    }

    .compare-table[b-gm33pr0y5t] {
        display: block;
        min-width: 0;
        font-size: 0.875rem;
    }

    .compare-table thead[b-gm33pr0y5t] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .compare-table tbody[b-gm33pr0y5t] {
        display: grid;
        gap: 1rem;
    }

    .compare-table tbody tr[b-gm33pr0y5t] {
        display: grid;
        border: 1px solid var(--color-border);
        border-radius: 16px;
        background: var(--color-surface);
        box-shadow: var(--shadow-sm);
    }

    .compare-table td[b-gm33pr0y5t],
    .compare-table td:first-child[b-gm33pr0y5t] {
        display: grid;
        grid-template-columns: minmax(6.5rem, 0.8fr) minmax(0, 1.2fr);
        align-items: center;
        gap: 1rem;
        min-width: 0;
        padding: 0.75rem 1rem;
        text-align: right;
        background: transparent;
    }

    .compare-table td:first-child[b-gm33pr0y5t] {
        display: flex;
        position: relative;
        min-height: 3.5rem;
        text-align: left;
        background: var(--color-surface-muted);
        border-radius: 15px 15px 0 0;
    }

    .compare-table td:last-child[b-gm33pr0y5t] {
        border-bottom: 0;
        border-radius: 0 0 15px 15px;
    }

    .compare-table td.pop[b-gm33pr0y5t],
    .compare-table tbody tr:hover td[b-gm33pr0y5t],
    .compare-table tbody tr:hover td.pop[b-gm33pr0y5t] {
        background: transparent;
    }

    .compare-table td.pop[b-gm33pr0y5t] {
        color: var(--color-text-primary);
        font-weight: 600;
    }

    .compare-table td:not(:first-child)[b-gm33pr0y5t]::before {
        color: var(--color-text-secondary);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-align: left;
        text-transform: uppercase;
    }

    .compare-table td:nth-child(2)[b-gm33pr0y5t]::before { content: 'Free'; }
    .compare-table td:nth-child(3)[b-gm33pr0y5t]::before { content: 'Starter'; }
    .compare-table td:nth-child(4)[b-gm33pr0y5t]::before { content: 'Pro'; color: var(--color-brand-primary); }
    .compare-table td:nth-child(5)[b-gm33pr0y5t]::before { content: 'Team'; }
    .compare-table td:nth-child(6)[b-gm33pr0y5t]::before { content: 'Enterprise'; }

}

/* ── Dark mode ─────────────────────────────────────────────── */
:root[data-theme='dark'] .compare-table td[b-gm33pr0y5t] {
    background: var(--color-surface);
}

:root[data-theme='dark'] .compare-table td.pop[b-gm33pr0y5t] {
    background: rgba(122, 184, 255, 0.05);
}

:root[data-theme='dark'] .compare-table th.pop[b-gm33pr0y5t] {
    background: rgba(122, 184, 255, 0.1);
}

:root[data-theme='dark'] .compare-table tbody tr:hover td[b-gm33pr0y5t] {
    background: var(--color-surface-muted);
}

/* ── Feature info tooltips ────────────────────────────────────
   A small `?` glyph follows each feature label. Hover / focus /
   focus-within reveals a popover with a plainspoken explanation
   of the feature and how to read its per-plan values.

   The tooltip text is in the rendered HTML (CSS visibility, not
   JS injection) so it is indexable for SEO and AI discovery.

   Positioning: tooltip pops BELOW the `?` for most rows and is
   left-aligned to the `?` so it extends rightward (avoids the
   wrapper's left edge). The last 3 rows flip to pop ABOVE so
   they don't get clipped by the wrapper's bottom edge.
   ──────────────────────────────────────────────────────────── */

.feature-info[b-gm33pr0y5t] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;                       /* tap target ≥ 24×24 */
    height: 24px;
    margin-left: 0.25rem;
    vertical-align: middle;
    cursor: help;
    outline: none;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}

.feature-info__glyph[b-gm33pr0y5t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-style: normal;
    font-family: var(--font-family-base);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-muted);
    opacity: 0.7;
    transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.feature-info:hover .feature-info__glyph[b-gm33pr0y5t],
.feature-info:focus .feature-info__glyph[b-gm33pr0y5t],
.feature-info:focus-visible .feature-info__glyph[b-gm33pr0y5t],
.feature-info:focus-within .feature-info__glyph[b-gm33pr0y5t] {
    color: var(--color-brand-primary);
    opacity: 1;
}

.feature-info:focus-visible[b-gm33pr0y5t] {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

.feature-info__tip[b-gm33pr0y5t] {
    position: absolute;
    top: calc(100% + 10px);
    left: -8px;
    z-index: 30;
    width: max-content;
    max-width: min(280px, calc(100vw - 2.5rem));
    padding: 0.6rem 0.75rem;
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.15),
        0 4px 10px rgba(15, 23, 42, 0.06);
    font-family: var(--font-family-base);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    text-wrap: pretty;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0s linear 0.18s;
}

/* Caret pointing up at the `?` */
.feature-info__tip[b-gm33pr0y5t]::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 14px;
    width: 9px;
    height: 9px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    transform: rotate(45deg);
}

.feature-info:hover .feature-info__tip[b-gm33pr0y5t],
.feature-info:focus .feature-info__tip[b-gm33pr0y5t],
.feature-info:focus-visible .feature-info__tip[b-gm33pr0y5t],
.feature-info:focus-within .feature-info__tip[b-gm33pr0y5t] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

/* Last 3 rows: flip the tooltip to pop ABOVE the `?` so it doesn't
   get clipped by the wrapper's bottom edge (the wrapper has
   overflow-x: auto, which forces overflow-y: auto in the same axis
   computation, clipping anything below the table). */
.compare-table tbody tr:nth-last-child(-n+3) .feature-info__tip[b-gm33pr0y5t] {
    top: auto;
    bottom: calc(100% + 10px);
    transform: translateY(4px);
}

.compare-table tbody tr:nth-last-child(-n+3) .feature-info:hover .feature-info__tip[b-gm33pr0y5t],
.compare-table tbody tr:nth-last-child(-n+3) .feature-info:focus .feature-info__tip[b-gm33pr0y5t],
.compare-table tbody tr:nth-last-child(-n+3) .feature-info:focus-visible .feature-info__tip[b-gm33pr0y5t],
.compare-table tbody tr:nth-last-child(-n+3) .feature-info:focus-within .feature-info__tip[b-gm33pr0y5t] {
    transform: translateY(0);
}

/* Caret flips to point downward, anchored to bottom of the tooltip */
.compare-table tbody tr:nth-last-child(-n+3) .feature-info__tip[b-gm33pr0y5t]::after {
    top: auto;
    bottom: -5px;
    border-top: none;
    border-left: none;
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}

/* Mobile: keep tooltip clear of the screen edges. The `?` sits in
   the leftmost column, extending right is safe; max-width clamp
   above already keeps the tip within the viewport. */
@media (max-width: 599px) {
    .feature-info[b-gm33pr0y5t] {
        position: static;
        width: 44px;
        height: 44px;
        margin: -0.625rem 0 -0.625rem 0.125rem;
        flex: none;
    }

    .feature-info__tip[b-gm33pr0y5t] {
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        max-width: none;
        font-size: 0.76rem;
        padding: 0.55rem 0.65rem;
    }

    .feature-info__tip[b-gm33pr0y5t]::after {
        display: none;
    }
}

/* Reduced motion: skip the slide-in animation, keep just the fade. */
@media (prefers-reduced-motion: reduce) {
    .feature-info__tip[b-gm33pr0y5t] {
        transform: none !important;
        transition: opacity 0.15s ease, visibility 0s linear 0.15s !important;
    }
}

/* Dark mode: lift the tooltip surface above the table background
   for contrast, soften the shadow against deep navy. */
:root[data-theme='dark'] .feature-info__tip[b-gm33pr0y5t] {
    background: var(--color-surface-raised, var(--color-surface-muted));
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.55),
        0 4px 12px rgba(0, 0, 0, 0.35);
}

:root[data-theme='dark'] .feature-info__tip[b-gm33pr0y5t]::after {
    background: var(--color-surface-raised, var(--color-surface-muted));
    border-color: var(--color-border-strong);
}

:root[data-theme='dark'] .feature-info:focus-visible[b-gm33pr0y5t] {
    box-shadow: 0 0 0 2px rgba(122, 184, 255, 0.45);
}