/* /Components/Dashboard/ConversationQuotaIndicator.razor.rz.scp.css */
.conversation-quota-indicator[b-e8pcv3ergy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    line-height: 1.4;
}

.conversation-quota-indicator--inline[b-e8pcv3ergy] {
    padding: 0.25rem 0.625rem;
    border: 1px solid transparent;
}

.conversation-quota-indicator--inline.conversation-quota-indicator--ok[b-e8pcv3ergy] {
    color: var(--clr-gray);
    background: var(--clr-card);
}

.conversation-quota-indicator--inline.conversation-quota-indicator--warn[b-e8pcv3ergy] {
    color: var(--clr-warning);
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.conversation-quota-indicator--inline.conversation-quota-indicator--cap[b-e8pcv3ergy] {
    color: var(--clr-error);
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.conversation-quota-indicator--banner[b-e8pcv3ergy] {
    display: flex;
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    font-size: 0.9375rem;
}

.conversation-quota-indicator--banner.conversation-quota-indicator--warn[b-e8pcv3ergy] {
    color: var(--clr-warning);
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.conversation-quota-indicator--banner.conversation-quota-indicator--cap[b-e8pcv3ergy] {
    color: var(--clr-error);
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.conversation-quota-indicator__text[b-e8pcv3ergy] {
    flex: 1;
}

.conversation-quota-indicator__cta[b-e8pcv3ergy] {
    color: inherit;
    text-decoration: underline;
    font-weight: 500;
    white-space: nowrap;
}

.conversation-quota-indicator__cta:hover[b-e8pcv3ergy] {
    text-decoration: none;
}

.conversation-quota-indicator__dismiss[b-e8pcv3ergy] {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 0.25rem;
    opacity: 0.7;
}

.conversation-quota-indicator__dismiss:hover[b-e8pcv3ergy] {
    opacity: 1;
}
/* /Components/Dashboard/RebookingCampaignPanel.razor.rz.scp.css */
.rebooking-panel[b-ar5u9ssoq6] {
    margin-top: 1.5rem;
}

.rebooking-panel__lede[b-ar5u9ssoq6] {
    margin: 0 0 1rem;
    color: var(--clr-off-white);
    line-height: 1.5;
    font-size: 0.95rem;
}

.rebooking-panel__actions[b-ar5u9ssoq6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.rebooking-panel__gate-hint[b-ar5u9ssoq6] {
    color: var(--clr-gray);
    font-size: 0.85rem;
}

.rebooking-confirm[b-ar5u9ssoq6] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.rebooking-confirm__backdrop[b-ar5u9ssoq6] {
    position: absolute;
    inset: 0;
    background: rgba(15, 16, 24, 0.85);
    backdrop-filter: blur(4px);
}

.rebooking-confirm__content[b-ar5u9ssoq6] {
    position: relative;
    background: var(--clr-dark);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    padding: 2rem;
    max-width: 32rem;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.rebooking-confirm__title[b-ar5u9ssoq6] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--clr-white);
}

.rebooking-confirm__body[b-ar5u9ssoq6] {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--clr-off-white);
    margin: 0 0 1.5rem;
}

.rebooking-confirm__actions[b-ar5u9ssoq6] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
/* /Components/Dashboard/ServiceOutageBanner.razor.rz.scp.css */
.svc-outage-banner[b-k5ejghr1fq] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}

.svc-outage-banner--degraded[b-k5ejghr1fq] {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--clr-warning);
}

.svc-outage-banner--down[b-k5ejghr1fq] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.35);
    color: var(--clr-error);
}

.svc-outage-banner--unknown[b-k5ejghr1fq] {
    background: rgba(163, 160, 184, 0.08);
    border-color: var(--clr-border-light);
    color: var(--clr-gray);
}

.svc-outage-icon[b-k5ejghr1fq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: currentColor;
    color: var(--clr-near-black);
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.svc-outage-body[b-k5ejghr1fq] {
    flex: 1;
    min-width: 0;
}

.svc-outage-message[b-k5ejghr1fq] {
    margin: 0 0 0.25rem;
    font-weight: 600;
}

.svc-outage-list[b-k5ejghr1fq] {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: var(--clr-gray);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.svc-outage-list strong[b-k5ejghr1fq] {
    color: inherit;
    margin-right: 0.25rem;
}

.svc-outage-list a[b-k5ejghr1fq] {
    margin-left: 0.5rem;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.svc-outage-retry[b-k5ejghr1fq] {
    align-self: flex-start;
    flex-shrink: 0;
}
/* /Components/Dashboard/ServiceStatusPill.razor.rz.scp.css */
.svc-status-pill[b-y7xxi4qrh1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.8rem;
    line-height: 1.2;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
    color: var(--clr-gray);
}

.svc-status-dot[b-y7xxi4qrh1] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}

.svc-status-label[b-y7xxi4qrh1] {
    font-weight: 600;
}

.svc-status-message[b-y7xxi4qrh1] {
    color: var(--clr-gray);
    font-weight: 400;
    margin-left: 0.25rem;
}

.svc-status-link[b-y7xxi4qrh1] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: 0.5rem;
}

.svc-status-pill--ok[b-y7xxi4qrh1] {
    color: var(--clr-success);
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.08);
}

.svc-status-pill--degraded[b-y7xxi4qrh1] {
    color: var(--clr-warning);
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.1);
}

.svc-status-pill--down[b-y7xxi4qrh1] {
    color: var(--clr-error);
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.1);
}

.svc-status-pill--unknown[b-y7xxi4qrh1] {
    color: var(--clr-gray-mid);
    border-color: var(--clr-border);
    background: rgba(255, 255, 255, 0.02);
}
/* /Components/Layout/AdminLayout.razor.rz.scp.css */
/* === AdminLayout (component-scoped) ===
 *
 * Reuses .dashboard-main / .dashboard-topbar / .sidebar-* classes from
 * css/dashboard.css so the admin shell looks visually identical to the
 * studio dashboard shell. The only divergence is the .admin-sidebar /
 * .admin-shell wrappers and the small "Platform Admin" label, all
 * defined here.
 */

.admin-sidebar-label[b-pftosbohi0] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--clr-gray);
    padding: 0 1rem;
    margin: 0.5rem 0 0.75rem 0;
}
/* /Components/Layout/DashboardLayout.razor.rz.scp.css */
/* This component's styles live in the global bundle (wwwroot/css/…), shared site-wide.
   NB: Blazor CSS isolation DOES apply to InteractiveServer components — the earlier
   "scoped CSS does not apply" note here was incorrect. Verified by
   InkyCloud.Tests/Components/ScopedCssScopeAttributeTests. Keeping these styles global
   is an organisational choice, not a workaround. */
/* /Components/Layout/Footer.razor.rz.scp.css */
/* Styles in wwwroot/css/site.css — global classes included for layout components */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.site-wrapper[b-a4e2nj8ud5] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content[b-a4e2nj8ud5] {
    flex: 1;
    padding-top: var(--navbar-height);
}
/* /Components/Layout/NavBar.razor.rz.scp.css */
/* This component's styles live in the global bundle (wwwroot/css/…), shared site-wide.
   NB: Blazor CSS isolation DOES apply to InteractiveServer components — the earlier
   "scoped CSS does not apply" note here was incorrect. Verified by
   InkyCloud.Tests/Components/ScopedCssScopeAttributeTests. Keeping these styles global
   is an organisational choice, not a workaround. */
/* /Components/Layout/OnboardingLayout.razor.rz.scp.css */
/* This component's styles live in the global bundle (wwwroot/css/…), shared site-wide.
   NB: Blazor CSS isolation DOES apply to InteractiveServer components — the earlier
   "scoped CSS does not apply" note here was incorrect. Verified by
   InkyCloud.Tests/Components/ScopedCssScopeAttributeTests. Keeping these styles global
   is an organisational choice, not a workaround. */
/* /Components/Onboarding/WorkingDaysPicker.razor.rz.scp.css */
.working-days-picker[b-rvrhl4orur] {
    margin-block: 1.25rem;
}

.day-chips[b-rvrhl4orur] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.day-chip[b-rvrhl4orur] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md);
    background: var(--clr-card);
    cursor: pointer;
    transition: border-color var(--transition-fast),
                background-color var(--transition-fast),
                color var(--transition-fast);
    user-select: none;
    font: inherit;
}

.day-chip:hover[b-rvrhl4orur] {
    border-color: var(--clr-accent);
}

.day-chip--selected[b-rvrhl4orur] {
    border-color: var(--clr-accent);
    background: var(--clr-accent);
    box-shadow: 0 0 12px var(--clr-glow);
}

.day-chip__label[b-rvrhl4orur] {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--clr-gray);
    pointer-events: none;
}

/* Solid accent fill + white label so a picked day is unmistakable on the
   dark card. The old muted 15%-opacity wash read as "nothing selected" even
   when days were saved (regression guarded by WorkingDaysPickerTests). */
.day-chip--selected .day-chip__label[b-rvrhl4orur] {
    color: var(--clr-white);
    font-weight: 600;
}

.day-chip:focus-visible[b-rvrhl4orur] {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

/* 44px minimum tap target on touch devices (compact on desktop). */
@media (pointer: coarse) {
    .day-chip[b-rvrhl4orur] {
        min-height: 44px;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
/* === About Hero === */
/* Base layout provided by .page-hero in base.css */
.about-hero[b-q1gne2v5cr]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.08), transparent 70%);
    pointer-events: none;
}

/* h1 layout provided by .page-hero h1 in base.css */

/* === Story Section === */
.about-story[b-q1gne2v5cr] {
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    max-width: var(--content-width-narrow);
    margin: 0 auto;
}

.story-content h2[b-q1gne2v5cr] {
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: 1.5rem;
}

.story-content p[b-q1gne2v5cr] {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--clr-gray);
    margin-bottom: 1.25rem;
}

/* === Mission Section === */
.about-mission[b-q1gne2v5cr] {
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    text-align: center;
    background: linear-gradient(180deg, var(--clr-primary) 0%, var(--clr-primary-deep) 100%);
    color: var(--clr-white);
    position: relative;
}

.about-mission h2[b-q1gne2v5cr] {
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--clr-white);
}

.mission-statement[b-q1gne2v5cr] {
    font-size: 1.25rem;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    color: var(--clr-gray);
}

/* === Values Section === */
.about-values[b-q1gne2v5cr] {
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    text-align: center;
}

.about-values h2[b-q1gne2v5cr] {
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: 3rem;
}

.values-grid[b-q1gne2v5cr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

/* .value-card reuses the shared .feature-card (base.css) for surface, hover and
   typography; the only delta is left-aligned text (the values section is centred). */
.value-card[b-q1gne2v5cr] {
    text-align: left;
}

/* === About CTA === */
.about-cta[b-q1gne2v5cr] {
    text-align: center;
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    background: var(--clr-dark);
    position: relative;
}

.about-cta[b-q1gne2v5cr]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border-light), transparent);
}

.about-cta h2[b-q1gne2v5cr] {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .values-grid[b-q1gne2v5cr] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* This component's styles live in the global bundle (wwwroot/css/…), shared site-wide.
   NB: Blazor CSS isolation DOES apply to InteractiveServer components — the earlier
   "scoped CSS does not apply" note here was incorrect. Verified by
   InkyCloud.Tests/Components/ScopedCssScopeAttributeTests. Keeping these styles global
   is an organisational choice, not a workaround. */
/* /Components/Pages/Dashboard/Referrals.razor.rz.scp.css */
/* === Referrals page (component-scoped) ===
 *
 * .referral-card, .referral-rewards-summary, .referrals-table, and
 * .warning-pill have been moved to global dashboard/shell.css so the
 * admin Payouts + Suppliers pages get them too. Only Referrals-specific
 * decoration (code pill, share row, share buttons) lives here. */

.referral-code-row[b-n77yleebvx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.referral-code-pill[b-n77yleebvx] {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.95rem;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid var(--clr-accent);
    border-radius: var(--radius-sm);
    color: var(--clr-accent-light);
    user-select: all;
}

.referral-share-url[b-n77yleebvx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 0.85rem 0;
}

.referral-share-url code[b-n77yleebvx] {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 0.3rem 0.55rem;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    color: var(--clr-off-white);
    word-break: break-all;
}

.referral-share-buttons[b-n77yleebvx] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* /Components/Pages/Dashboard/Subscription.razor.rz.scp.css */
/* ── Current plan card ─────────────────────────────────── */
.sub-current[b-nm5ax2sui3] {
    background: var(--clr-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg, 1rem);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

/* "No Plan" pill shown in the no-subscription state. Mirrors the red
   .sidebar-plan-badge--none treatment so the two read consistently. */
.sub-current__badge[b-nm5ax2sui3] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
}

.sub-current__badge--none[b-nm5ax2sui3] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--clr-error);
}

.sub-current__plan[b-nm5ax2sui3] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.sub-current__name[b-nm5ax2sui3] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--clr-white);
}

/* Explanatory line under the plan name for lifetime/beta subscribers, making
   the locked-in price unambiguous (e.g. "£200/month for life, first month
   free"). Quieter than the plan name so it reads as supporting detail. */
.sub-current__lifetime-note[b-nm5ax2sui3] {
    margin: -0.5rem 0 1rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--clr-gray);
    max-width: 46ch;
}

.sub-current__details[b-nm5ax2sui3] {
    flex: 1;
}

.sub-current__row[b-nm5ax2sui3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--clr-border-light, var(--clr-border));
}

.sub-current__row:last-child[b-nm5ax2sui3] {
    border-bottom: none;
}

.sub-current__label[b-nm5ax2sui3] {
    font-size: 0.9rem;
    color: var(--clr-gray);
}

.sub-current__value[b-nm5ax2sui3] {
    font-weight: 600;
}

.sub-current__value--muted[b-nm5ax2sui3] {
    font-weight: 400;
    color: var(--clr-gray);
    font-style: italic;
}

/* Catalog list price shown struck-through next to a lifetime/beta subscriber's
   real locked-in rate, so the discount is visually obvious (e.g. "£500 £200/
   month"). Quieter than the live rate it sits beside. */
.sub-current__price-was[b-nm5ax2sui3] {
    text-decoration: line-through;
    color: var(--clr-gray);
    font-weight: 400;
    margin-right: 0.4rem;
}

/* Supporting note under the Price row for a special-rate subscriber whose exact
   figure we don't assert client-side (referral discount, or a price we can't
   confidently match) — points them at Manage Billing for the precise amount. */
.sub-current__price-note[b-nm5ax2sui3] {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--clr-gray);
    max-width: 46ch;
}

.sub-current__message[b-nm5ax2sui3] {
    margin: 0.75rem 0 0;
    color: var(--clr-gray);
}

.sub-current__actions[b-nm5ax2sui3] {
    margin-top: 1.25rem;
    display: flex;
    gap: 0.75rem;
}

.sub-status--active[b-nm5ax2sui3] {
    color: var(--clr-success, #22c55e);
}

.sub-status--pastdue[b-nm5ax2sui3] {
    color: var(--clr-error, #ef4444);
}

.sub-portal-hint[b-nm5ax2sui3] {
    font-size: 0.85rem;
    color: var(--clr-gray);
    margin-top: 0.5rem;
}

/* ── Section headings ─────────────────────────────────── */
.sub-section-title[b-nm5ax2sui3] {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.sub-section-desc[b-nm5ax2sui3] {
    color: var(--clr-gray);
    margin: 0 0 1rem;
    max-width: 640px;
}

/* ── Plan grid ────────────────────────────────────────────
 * Card visuals (tier-card, tier-badge, tier-price, tier-features) come from
 * the shared css/pages/pricing.css so the dashboard matches /pricing exactly.
 * Rules here only layer on the dashboard-specific "current plan" state.
 */
.sub-tier-grid[b-nm5ax2sui3] {
    margin: 1rem 0 1.5rem;
}

/* Green accent on the card the studio is currently on. Wins over the
   shared tier-card border by sharing the same selector specificity but
   being scoped (the scoped attribute is appended to both halves). */
.tier-card--current[b-nm5ax2sui3],
.tier-card--current:hover[b-nm5ax2sui3] {
    border-color: var(--clr-success);
    box-shadow: 0 0 24px rgba(34, 197, 94, 0.18);
}

.tier-badge--current[b-nm5ax2sui3] {
    background: var(--clr-success);
    color: var(--clr-white);
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .sub-current__plan[b-nm5ax2sui3] {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* Narrow phones: the Period row's value ("14 Mar – 13 Apr 2026") collided
   with its label on a space-between flex row. Let labels and values wrap
   onto separate lines, and stack the Lifetime pill below the tier name so
   "Gold" no longer crashes into it. */
@media (max-width: 480px) {
    .sub-current__row[b-nm5ax2sui3] {
        flex-wrap: wrap;
        gap: 0.25rem 0.75rem;
    }

    .sub-current__value[b-nm5ax2sui3] {
        flex-basis: 100%;
    }

    .sub-current__lifetime-badge[b-nm5ax2sui3] {
        display: block;
        margin: 0.4rem 0 0;
    }
}
/* /Components/Pages/Features.razor.rz.scp.css */
/* === Features Hero === */
/* Base layout provided by .page-hero in base.css */
.features-hero[b-864a5xynoa]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.08), transparent 70%);
    pointer-events: none;
}

/* h1 layout provided by .page-hero h1 in base.css */

/* === Features Grid === */
.features-list[b-864a5xynoa] {
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-grid[b-864a5xynoa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.feature-icon[b-864a5xynoa] {
    font-size: 1.5rem;
}

/* === Features CTA === */
.features-cta[b-864a5xynoa] {
    text-align: center;
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    background: linear-gradient(180deg, var(--clr-primary) 0%, var(--clr-primary-deep) 100%);
    color: var(--clr-white);
}

.features-cta h2[b-864a5xynoa] {
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--clr-white);
}

@media (max-width: 768px) {
    .feature-grid[b-864a5xynoa] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* === Hero — Cinematic === */
.hero[b-7g3acshnx8] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Subtract the navbar offset (.main-content has padding-top: var(--navbar-height)).
       Using 100vh here made the hero 100vh + 68px tall, forcing a vertical scrollbar
       on first paint and pushing the content slightly low. */
    min-height: calc(100vh - var(--navbar-height));
    text-align: center;
    overflow: hidden;
    padding: 6rem 2rem;
}

.hero-bg[b-7g3acshnx8] {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, var(--clr-primary-deep) 0%, var(--clr-black) 100%);
}

.hero-grain[b-7g3acshnx8] {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    pointer-events: none;
}

.hero-glow[b-7g3acshnx8] {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.3;
    pointer-events: none;
}

.hero-glow--left[b-7g3acshnx8] {
    top: -100px;
    left: -200px;
    background: var(--clr-accent);
}

.hero-glow--right[b-7g3acshnx8] {
    bottom: -150px;
    right: -200px;
    background: var(--clr-gradient-end);
}

.hero-grid-pattern[b-7g3acshnx8] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(124, 58, 237, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 20%, transparent 70%);
    pointer-events: none;
}

.hero-content[b-7g3acshnx8] {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero-eyebrow[b-7g3acshnx8] {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--clr-accent-light);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    padding: 0.4rem 1.2rem;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 100px;
    background: rgba(124, 58, 237, 0.08);
}


.hero-title[b-7g3acshnx8] {
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--clr-white);
    margin-bottom: 1.5rem;
}

.hero-gradient-text[b-7g3acshnx8] {
    background: linear-gradient(135deg, var(--clr-gradient-start), var(--clr-gradient-end), var(--clr-gradient-accent));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift-b-7g3acshnx8 6s ease infinite;
}

@keyframes gradient-shift-b-7g3acshnx8 {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero-subtitle[b-7g3acshnx8] {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.7;
    color: var(--clr-gray);
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

/* .hero-ctas consolidated into the global .cta-actions utility (base.css). */

/* .btn-glow moved to global buttons.css so it applies on every page that uses it
   (About, Features, Pricing, LegalAccept, Subscription), not just Home. */

/* === Section Divider === */
.section-divider[b-7g3acshnx8] {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border-light), transparent);
    max-width: 600px;
    margin: 0 auto;
}

/* === Features Section === */
.features-highlight[b-7g3acshnx8] {
    padding: clamp(5rem, 10vw, 8rem) 2rem;
    text-align: center;
    background: var(--clr-black);
}

.features-highlight-inner[b-7g3acshnx8] {
    max-width: 1200px;
    margin: 0 auto;
}

.features-highlight h2[b-7g3acshnx8] {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 3.5rem;
    color: var(--clr-white);
}

.feature-grid[b-7g3acshnx8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

/* text-align override — base.css .feature-card has no text-align set */
.feature-card[b-7g3acshnx8] {
    text-align: left;
}

/* === Stats Bar === */
.stats-bar[b-7g3acshnx8] {
    padding: 3rem 2rem;
    background: var(--clr-dark);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

.stats-bar-inner[b-7g3acshnx8] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(3rem, 8vw, 6rem);
    max-width: 800px;
    margin: 0 auto;
}

.stat-item[b-7g3acshnx8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.stat-number[b-7g3acshnx8] {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--clr-accent-light), var(--clr-gradient-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-7g3acshnx8] {
    font-size: 0.9rem;
    color: var(--clr-gray);
    text-align: center;
}

/* === Pricing Preview ===
 *
 * Plan-card / price / feature styling lives in css/pages/pricing.css —
 * shared with the dedicated /pricing page so both surfaces stay in sync.
 * This file keeps only the section-level layout for the home page's
 * preview block (background, padding, heading sizing).
 */
.pricing-preview[b-7g3acshnx8] {
    padding: clamp(5rem, 10vw, 8rem) 2rem;
    background: var(--clr-dark);
}

/* === Referral Banner === */
.referral-banner[b-7g3acshnx8] {
    margin-top: 2.5rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(37, 99, 235, 0.08));
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: var(--radius-lg);
    text-align: center;
}

.referral-banner strong[b-7g3acshnx8] {
    font-size: 1.15rem;
    color: var(--clr-white);
    display: block;
    margin-bottom: 0.35rem;
}

.referral-banner p[b-7g3acshnx8] {
    font-size: 0.95rem;
    color: var(--clr-gray);
    margin: 0;
}

.referral-banner + .btn[b-7g3acshnx8] {
    margin-top: 1.5rem;
}

/* === CTA Section === */
.cta-section[b-7g3acshnx8] {
    padding: clamp(5rem, 10vw, 8rem) 2rem;
    text-align: center;
    background: linear-gradient(180deg, var(--clr-primary) 0%, var(--clr-primary-deep) 100%);
    color: var(--clr-white);
    position: relative;
}

.cta-section-inner[b-7g3acshnx8] {
    max-width: 600px;
    margin: 0 auto;
}

.cta-section h2[b-7g3acshnx8] {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--clr-white);
}

.cta-section p[b-7g3acshnx8] {
    font-size: 1.15rem;
    color: var(--clr-gray);
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

/* === Responsive === */
@media (max-width: 768px) {
    .hero[b-7g3acshnx8] {
        min-height: 90vh;
        padding: 5rem 1.5rem;
    }

    .hero-glow[b-7g3acshnx8] {
        width: 350px;
        height: 350px;
        filter: blur(80px);
    }

    .hero-grid-pattern[b-7g3acshnx8] {
        background-size: 50px 50px;
    }

    .feature-grid[b-7g3acshnx8] {
        grid-template-columns: 1fr;
    }

    .feature-card[b-7g3acshnx8] {
        text-align: left;
    }

    .stats-bar-inner[b-7g3acshnx8] {
        gap: 1.5rem 2rem;
    }

    .plan-cards[b-7g3acshnx8] {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .plan-card--featured[b-7g3acshnx8] {
        transform: none;
    }

    .plan-card--featured:hover[b-7g3acshnx8] {
        transform: translateY(-6px);
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* This component's styles live in the global bundle (wwwroot/css/…), shared site-wide.
   NB: Blazor CSS isolation DOES apply to InteractiveServer components — the earlier
   "scoped CSS does not apply" note here was incorrect. Verified by
   InkyCloud.Tests/Components/ScopedCssScopeAttributeTests. Keeping these styles global
   is an organisational choice, not a workaround. */
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found-section[b-mfkrffemxy] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--clr-dark);
    position: relative;
    overflow: hidden;
}

.not-found-section[b-mfkrffemxy]::before {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.06), transparent 70%);
    pointer-events: none;
}

.not-found-content[b-mfkrffemxy] {
    max-width: 500px;
    position: relative;
}

.not-found-code[b-mfkrffemxy] {
    font-family: var(--font-display);
    font-size: 7rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--clr-accent), var(--clr-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.35;
    line-height: 1;
    margin-bottom: 1rem;
}

.not-found-content h1[b-mfkrffemxy] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: 1rem;
}

.not-found-content p[b-mfkrffemxy] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--clr-gray);
    margin-bottom: 2rem;
}
/* /Components/Pages/Onboarding/Billing.razor.rz.scp.css */
.billing-plan-grid[b-8tgkndpr7u] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.billing-plan-card[b-8tgkndpr7u] {
    position: relative;
    background: var(--clr-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg, 1rem);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.billing-plan-card:hover[b-8tgkndpr7u] {
    border-color: var(--clr-accent);
    box-shadow: var(--shadow-card-hover);
}

.billing-plan-card--featured[b-8tgkndpr7u] {
    border-color: var(--clr-accent);
    box-shadow: var(--shadow-card-hover);
}

.billing-plan-badge[b-8tgkndpr7u] {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--clr-accent);
    color: var(--clr-white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 1rem;
    border-radius: 999px;
    white-space: nowrap;
}

.billing-plan-card h2[b-8tgkndpr7u] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0.5rem 0 0.25rem;
}

.billing-plan-price[b-8tgkndpr7u] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--clr-white);
    margin-bottom: 1rem;
}

.billing-plan-price span[b-8tgkndpr7u] {
    font-size: 1rem;
    font-weight: 400;
    color: var(--clr-gray);
}

.billing-plan-card ul[b-8tgkndpr7u] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
    width: 100%;
}

.billing-plan-card li[b-8tgkndpr7u] {
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: var(--clr-gray);
    border-bottom: 1px solid var(--clr-border-light, var(--clr-border));
}

.billing-plan-card li:last-child[b-8tgkndpr7u] {
    border-bottom: none;
}

.billing-plan-card li[b-8tgkndpr7u]::before {
    content: "\2713\00a0";
    color: var(--clr-accent);
    font-weight: 600;
}

.billing-plan-card .btn[b-8tgkndpr7u] {
    margin-top: auto;
    width: 100%;
}

.billing-return-status[b-8tgkndpr7u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;
}

.billing-return-spinner[b-8tgkndpr7u] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--clr-border);
    border-top-color: var(--clr-accent);
    border-radius: 50%;
    animation: billing-spin-b-8tgkndpr7u 0.8s linear infinite;
}

@keyframes billing-spin-b-8tgkndpr7u {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .billing-plan-grid[b-8tgkndpr7u] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .billing-plan-card--featured[b-8tgkndpr7u] {
        order: -1;
    }
}
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* === Pricing page (component-scoped) ===
 *
 * Tier-card / price / feature-list styling has been centralised in
 * css/pages/pricing.css. This scoped file now holds only the pricing-page
 * decorative bits that don't fit the shared visual language —
 * specifically, the hero glow.
 *
 * If you find yourself adding tier-card rules here, add them to the
 * shared pricing.css instead. Scoped rules outweigh shared on specificity
 * and the divergence becomes a maintenance trap (we lost half a session
 * to that on 2026-05-01 — see project memory).
 */

.pricing-hero[b-1kq25cg0p8]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.08), transparent 70%);
    pointer-events: none;
}

.pricing-faq[b-1kq25cg0p8]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border-light), transparent);
}

.pricing-faq p a[b-1kq25cg0p8] {
    color: var(--clr-accent-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pricing-faq p a:hover[b-1kq25cg0p8] {
    color: var(--clr-white);
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* Legal page styles are shared with Terms — see wwwroot/css/pages/legal.css (global). */
/* /Components/Pages/Register.razor.rz.scp.css */
/* This component's styles live in the global bundle (wwwroot/css/…), shared site-wide.
   NB: Blazor CSS isolation DOES apply to InteractiveServer components — the earlier
   "scoped CSS does not apply" note here was incorrect. Verified by
   InkyCloud.Tests/Components/ScopedCssScopeAttributeTests. Keeping these styles global
   is an organisational choice, not a workaround. */
/* /Components/Pages/Terms.razor.rz.scp.css */
/* Legal page styles are shared with Privacy — see wwwroot/css/pages/legal.css (global). */
/* /Components/Shared/ToggleSwitch.razor.rz.scp.css */
.toggle-switch[b-uwht6711bu] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
}

/* Hide native checkbox */
.toggle-switch input[type="checkbox"][b-uwht6711bu] {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.toggle-switch__track[b-uwht6711bu] {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 0.75rem;
    background: var(--clr-border-light);
    border: 1px solid var(--clr-border-light);
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast);
}

.toggle-switch--on .toggle-switch__track[b-uwht6711bu] {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
}

.toggle-switch__thumb[b-uwht6711bu] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--clr-gray);
    transition: transform var(--transition-fast),
                background-color var(--transition-fast);
}

.toggle-switch--on .toggle-switch__thumb[b-uwht6711bu] {
    transform: translateX(1.25rem);
    background: var(--clr-white);
}

.toggle-switch__label[b-uwht6711bu] {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--clr-gray);
    transition: color var(--transition-fast);
}

.toggle-switch--on .toggle-switch__label[b-uwht6711bu] {
    color: var(--clr-accent-light);
}

/* Focus ring on track when checkbox is focused */
.toggle-switch:has(input:focus-visible) .toggle-switch__track[b-uwht6711bu] {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

/* Hover */
.toggle-switch:hover .toggle-switch__track[b-uwht6711bu] {
    border-color: var(--clr-accent);
}

/* Disabled */
.toggle-switch--disabled[b-uwht6711bu] {
    cursor: not-allowed;
    opacity: 0.5;
}

.toggle-switch--disabled:hover .toggle-switch__track[b-uwht6711bu] {
    border-color: var(--clr-border-light);
}

/* The label wraps the 24px track + text; give the whole control a 44px tap
   target on touch devices without enlarging the track visual. */
@media (pointer: coarse) {
    .toggle-switch[b-uwht6711bu] {
        min-height: 44px;
    }
}