/* ============================================================================
   SB Design System — Liquid Glass
   ----------------------------------------------------------------------------
   The shared stylesheet for every SB Blazor surface (Time Tracker, Project
   Management, the Admin hub). Served from the Sb.DesignSystem RCL at
   _content/Sb.DesignSystem/sb.css — link it BEFORE the app's own app.css so
   product-specific styles can override.

   Contents: brand tokens, gradient-orb ambient background, the glass mixin,
   MudBlazor chrome re-skin (appbar, drawer, cards, buttons, inputs, tables,
   dialogs, popovers, ...), the sb-brand / mkt-footer lockups, the sb-landing
   auth-card system, sb-status error pages, and the dashboard glass system.

   The www marketing site (sites/www, Statiq) mirrors the :root tokens in
   marketing.css by hand — it is static-built and cannot consume an RCL.
   ============================================================================ */

/* -- SB brand tokens (mirror sites/www marketing.css :root) ----------------- */
:root {
    --mkt-primary:      #007AFF;
    --mkt-primary-2:    #3395FF;
    --mkt-primary-soft: rgba(0, 122, 255, 0.08);
    --mkt-text:         #1D1D1F;
    --mkt-text-soft:    #6E6E73;
    --mkt-text-faint:   #8E8E93;
    --mkt-bg:           #F8F9FB;
    --mkt-surface:      #FFFFFF;
    --mkt-surface-soft: rgba(255, 255, 255, 0.72);
    --mkt-border:       rgba(60, 60, 67, 0.12);
    --mkt-border-soft:  rgba(60, 60, 67, 0.06);
    --mkt-success:      #34C759;
    --mkt-warning:      #FF9500;
    --mkt-error:        #FF3B30;
    --mkt-radius:       16px;
    --mkt-radius-sm:    10px;
    --mkt-shadow-sm:    0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
    --mkt-shadow-lg:    0 12px 36px rgba(0, 122, 255, 0.10), 0 2px 8px rgba(0,0,0,0.06);

    /* -- Refined Professional system tokens ------------------------------- */
    /* Soft, neutral card depth (no brand glow) — the business-clean surface. */
    --mkt-shadow-card:       0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --mkt-shadow-card-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.08);
    --sb-radius-card:    12px;   /* work surfaces (cards, paper, tables) */
    --sb-radius-control: 10px;   /* buttons, inputs, selects */
    --sb-transition:     0.15s ease;            /* one motion timing, suite-wide */
    --sb-nav-active:     rgba(0, 122, 255, 0.08); /* sidebar "you are here" tint */
    --sb-page-pad:       24px;   /* page gutter + section rhythm */

    /* -- Marketing home tokens (sb-home-* logged-out landing only) ---------
       The logged-out product home (SbProductHome) is a self-contained marketing
       surface that intentionally deviates from the calm in-app palette — richer
       ink, deeper blue tint, and the per-product suite accents (Time=blue,
       PM=green, CRM=purple) used ONLY as cross-sell chip colours in the suite
       band. The primary blue still threads through --mkt-primary so a brand
       retune flows here automatically. Not mirrored in www marketing.css (www
       owns its own marketing page); these are app-landing-only. */
    --sb-home-ink:         #0B0D12;  /* near-black dark surfaces (pricing card) + ink headings */
    --sb-home-muted:       #6B7180;  /* muted copy on LIGHT bgs — AA-safe (≥4.5:1); not the fainter #9AA0AB */
    --sb-home-blue-tint:   #EAF3FF;  /* opaque blue tint — hero pill, blue feature chip */
    --sb-home-green:       #1F9D57;  /* PM suite accent */
    --sb-home-green-tint:  #EAFAF0;
    --sb-home-purple:      #6B5CFF;  /* CRM suite accent */
    --sb-home-purple-tint: #F1EDFF;
    /* Display face for the marketing home — headings, numerals (dollar figures), wordmark. Body
       stays Roboto. Loaded via Google Fonts in each app's App.razor; in-app headings are unaffected. */
    --sb-home-display: 'Schibsted Grotesk', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* -- Base ----------------------------------------------------------------- */
html, body {
    margin: 0;
    /* Near-flat professional surface — the brand colour lives in the chrome and
       accents, not in a vibrant field behind the work. Calm, business-clean. */
    background: var(--mkt-bg);
    font-family: 'Roboto', 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Subtle static ambient wash — two very faint brand-tinted blobs, no animation.
   Reads as quiet depth behind the work surfaces, never as a flashy field. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(48% 52% at 10% 0%, rgba(0, 122, 255, 0.05), transparent 72%),
        radial-gradient(42% 48% at 100% 6%, rgba(88, 86, 214, 0.04), transparent 72%);
}

/* Opt-in branded background for sign-in / landing / status surfaces — a soft,
   tasteful version of the brand orbs, much calmer than the old vibrant field.
   Add the .sb-brandbg class to <body> (or a full-bleed wrapper) on those pages. */
.sb-brandbg::before,
body.sb-brandbg::before {
    inset: -6%;
    background:
        radial-gradient(40% 46% at 16% 10%, rgba(95, 208, 255, 0.28), transparent 72%),
        radial-gradient(42% 44% at 86% 14%, rgba(106, 166, 255, 0.24), transparent 72%),
        radial-gradient(44% 48% at 22% 88%, rgba(156, 123, 255, 0.20), transparent 72%);
    filter: blur(40px) saturate(1.05);
}

/* Let the orbs read through the layout — content sits above at z-index 1. */
.mud-layout {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

.mud-main-content {
    /* Keep MudBlazor's default `padding-top` (clears the fixed AppBar); zero
       only the other three sides for the flush layout. Resetting `padding: 0`
       caused content — including the SbCutoverBanner — to render behind
       the AppBar. */
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    background: transparent !important;
    /* Sticky footer: fill at least the viewport (border-box, so the AppBar
       padding-top is included → exactly 100vh, no phantom scroll) and lay the
       content out as a column so a short page still pins the footer to the
       bottom instead of letting it float mid-screen. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* The footer claims the leftover vertical space so it sits at the viewport
   bottom on short pages; on tall pages this collapses to 0 and the footer's own
   top padding provides the gap (replaces .mkt-footer's fixed 64px margin here). */
.mud-main-content > .mkt-footer {
    margin-top: auto;
}

/* -- Glass utility (opt-in only) -------------------------------------------
   The suite default is now SOLID, not frosted. Frosted glass is reserved for
   focal overlays (dialogs, popovers, menus, snackbars — styled below) and the
   sign-in card. Apply .glass deliberately where a translucent surface is wanted. */
.glass {
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
}

/* -- AppBar --------------------------------------------------------------- */
.mud-appbar {
    background: var(--mkt-surface) !important;   /* solid white — clean, business chrome */
    color: var(--mkt-text) !important;
    border-bottom: 1px solid var(--mkt-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}

.mud-appbar .mud-icon-button {
    color: var(--mkt-primary) !important;
}

.mud-appbar .mud-typography {
    color: var(--mkt-text) !important;
}

/* Text buttons used as appbar nav (e.g. the Admin hub's Overview / Billing). */
.mud-appbar .mud-button-text {
    color: var(--mkt-text);
    font-weight: 500;
}

.mud-appbar .mud-button-text:hover {
    color: var(--mkt-primary) !important;
    background: var(--mkt-primary-soft) !important;
}

/* -- Drawer --------------------------------------------------------------- */
.mud-drawer {
    /* Solid rail with a hairline edge — calm and legible, no blue wash. */
    background: var(--mkt-surface) !important;
    border-right: 1px solid var(--mkt-border) !important;
    box-shadow: none !important;
}

/* The drawer has no header text now ("Navigation" was redundant chrome) — give
   the nav menu a little breathing room from the AppBar edge instead. Kept the
   .mud-drawer-header rule for any surface that still mounts one. */
.mud-drawer .mud-navmenu {
    padding-top: 12px;
}

.mud-drawer-header {
    background: transparent !important;
    border-bottom: 0.5px solid rgba(0, 122, 255, 0.10);
}

/* -- Cards & Paper -------------------------------------------------------- */
/* Clean solid work surface, suite-wide — every MudCard/MudPaper is now a plain
   white card with a hairline border and a soft, neutral shadow. No translucency,
   no backdrop-filter, no blue glow. Legible and efficient for dense data pages.
   Focal overlays (dialogs/popovers/menus/snackbars) keep their depth, below. */
.mud-card,
.mud-paper {
    background: var(--mkt-surface) !important;
    border: 1px solid var(--mkt-border) !important;
    box-shadow: var(--mkt-shadow-card) !important;
    border-radius: var(--sb-radius-card) !important;
    overflow: hidden;
}

/* Efficient, consistent card padding (20px). */
.mud-card-header {
    padding: 20px 20px 8px 20px;
}

.mud-card-content {
    padding: 8px 20px 20px 20px;
}

/* -- Nav links ------------------------------------------------------------ */
.mud-nav-link {
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 8px 12px !important;
    transition: background var(--sb-transition), color var(--sb-transition);
}

.mud-nav-link:hover {
    background: rgba(0, 122, 255, 0.06) !important;
}

.mud-nav-link.active {
    /* Standard SaaS sidebar "you are here": a soft brand-tint fill + a 3px brand
       accent bar on the leading edge + brand-coloured label/icon. Calm, legible. */
    background: var(--sb-nav-active) !important;
    color: var(--mkt-primary) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--mkt-primary);
}

.mud-nav-link.active .mud-nav-link-icon {
    color: var(--mkt-primary) !important;
}

.mud-nav-group-text {
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 8px 12px !important;
}

/* Shared nav section label — replaces the per-app crm-nav-section / pm-nav-section
   one-offs. Uppercase, faint, small; opens a grouped block in the rail. */
.sb-nav-section,
.crm-nav-section,
.pm-nav-section {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mkt-text-faint);
    padding: 14px 20px 6px;
    margin: 0;
}

/* -- Buttons -------------------------------------------------------------- */
.mud-button-filled {
    border-radius: var(--sb-radius-control) !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    /* Quiet, professional motion — no scale, no overshoot. */
    transition: background var(--sb-transition), box-shadow var(--sb-transition), filter var(--sb-transition);
}

.mud-button-filled:hover {
    filter: brightness(0.97);
    box-shadow: var(--mkt-shadow-card-hover) !important;
}
.mud-button-filled:active { filter: brightness(0.94); }

.mud-button-filled.mud-button-filled-primary {
    /* Restrained brand gradient — a touch of polish, not a flashy sweep. */
    background: linear-gradient(135deg, #1F8CFF 0%, #007AFF 100%) !important;
}
.mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: 0 4px 12px -4px rgba(0, 122, 255, 0.35) !important;
}

.mud-button-filled.mud-button-filled-error {
    background: #FF3B30 !important;
}
.mud-button-filled.mud-button-filled-error:hover {
    box-shadow: 0 4px 12px -4px rgba(255, 59, 48, 0.35) !important;
}

.mud-button-filled.mud-button-filled-success {
    background: #34C759 !important;
}
.mud-button-filled.mud-button-filled-success:hover {
    box-shadow: 0 4px 12px -4px rgba(52, 199, 89, 0.35) !important;
}

.mud-button-filled.Mui-disabled,
.mud-button-filled:disabled {
    background: rgba(118, 118, 128, 0.18) !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

.mud-button-outlined {
    border-radius: var(--sb-radius-control) !important;
    border-color: var(--mkt-border) !important;
    text-transform: none !important;
    font-weight: 500 !important;
    transition: background var(--sb-transition), border-color var(--sb-transition);
}

.mud-button-outlined:hover {
    background: rgba(0, 122, 255, 0.06) !important;
    border-color: rgba(0, 122, 255, 0.3) !important;
}

.mud-button-text {
    border-radius: var(--sb-radius-control) !important;
    text-transform: none !important;
    font-weight: 500 !important;
}

/* -- Segmented control ------------------------------------------------------
   iOS-style switcher for exclusive view choices (e.g. Day/Week/Month). Plain
   <button type="button"> children; mark the active one with class="active"
   and aria-pressed. Preferred over MudToggleGroup, whose Material chrome
   fights the glass theme. */
.sb-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    background: rgba(118, 118, 128, 0.12);
}
.sb-seg button {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mkt-text-soft);
    padding: 5px 14px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.sb-seg button:hover { color: var(--mkt-text); }
.sb-seg button.active {
    background: #fff;
    color: var(--mkt-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10), 0 0.5px 0 rgba(0, 0, 0, 0.04);
}

/* -- Toggle Group --------------------------------------------------------- */
.mud-toggle-group {
    border-radius: 12px !important;
    background: rgba(118, 118, 128, 0.08) !important;
    border: none !important;
    padding: 2px !important;
}

.mud-toggle-item {
    border-radius: 10px !important;
    border: none !important;
    text-transform: none !important;
    font-weight: 500 !important;
    color: #3C3C43 !important;
    transition: all 0.25s ease;
}

.mud-toggle-item .mud-typography,
.mud-toggle-item .mud-toggle-item-content {
    color: inherit !important;
}

.mud-toggle-item.mud-toggle-item-selected,
.mud-toggle-item.mud-selected-item {
    background: #FFFFFF !important;
    color: var(--mkt-primary) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0.5px 0 rgba(0, 0, 0, 0.04) !important;
    font-weight: 600 !important;
}

.mud-toggle-item.mud-toggle-item-selected .mud-typography,
.mud-toggle-item.mud-selected-item .mud-typography {
    color: var(--mkt-primary) !important;
}

/* -- Tabs (underline style, suite-wide) ------------------------------------
   One clean tab look — text tabs over a hairline track with a 2px brand underline
   under the active tab. Replaces MudBlazor's rounded-bar + slider default (which
   mixed a rounded pill bar with a straight underline and read as inconsistent).
   Applies regardless of each MudTabs' Rounded / Elevation / ApplyEffectsToContainer. */
.mud-tabs-tabbar {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid var(--mkt-border) !important;
    border-radius: 0 !important;
}
.mud-tabs-panels {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding-top: 16px;
}
.mud-tab {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    color: var(--mkt-text-soft) !important;
    border-radius: 0 !important;
    min-width: unset !important;
    padding: 10px 16px !important;
    transition: color var(--sb-transition), background var(--sb-transition) !important;
}
.mud-tab:hover {
    color: var(--mkt-text) !important;
    background: rgba(0, 122, 255, 0.05) !important;
}
.mud-tab .mud-icon-root { color: inherit !important; }
.mud-tab.mud-tab-active {
    color: var(--mkt-primary) !important;
    font-weight: 600 !important;
}
.mud-tab-slider {
    background: var(--mkt-primary) !important;
    height: 2px !important;
    border-radius: 2px 2px 0 0 !important;
}

/* -- Chips ---------------------------------------------------------------- */
.mud-chip {
    border-radius: 999px !important;        /* full-pill badges */
    font-weight: 600 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 12px !important;
}

.mud-chip.mud-chip-outlined {
    background: var(--mkt-surface) !important;
    border: 1px solid rgba(0, 122, 255, 0.3) !important;
    color: var(--mkt-primary) !important;
}

/* -- Links ---------------------------------------------------------------- */
.mud-link {
    color: var(--mkt-primary) !important;
    font-weight: 500;
}

/* -- Inputs / Selects / Pickers ------------------------------------------- */
/* Clean solid fields: white fill, a slate hairline border, and a subtle brand
   ring on focus. Covers MudTextField / MudSelect / MudNumericField / MudDatePicker. */
.mud-input.mud-input-outlined {
    background: var(--mkt-surface) !important;
    border-radius: var(--sb-radius-control);
}
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--sb-radius-control) !important;
    border-color: var(--mkt-border) !important;
    transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
}
.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(0, 122, 255, 0.4) !important;
}
/* Focus: a clean 1px brand border + soft ring (instead of MudBlazor's 2px). */
.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: var(--mkt-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12) !important;
}
/* Keep the error border MudBlazor sets, just add the matching red ring on focus. */
.mud-input-outlined.mud-input-error.mud-focused .mud-input-outlined-border {
    border-color: var(--mkt-error) !important;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.12) !important;
}
.mud-input.mud-input-outlined.mud-input-adorned-end {
    border-radius: var(--sb-radius-control);
}
.mud-select .mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--sb-radius-control) !important;
}

/* -- Tables / DataGrid ----------------------------------------------------- */
.mud-table,
.mud-data-grid {
    border-radius: 16px !important;
    overflow: hidden;
    border: 0.5px solid rgba(60, 60, 67, 0.12);
}

.mud-table-head .mud-table-cell,
.mud-simple-table thead th {
    background: rgba(118, 118, 128, 0.04) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem;
    color: var(--mkt-text-soft);
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.12) !important;
}

.mud-table-body .mud-table-row:hover {
    background: rgba(0, 122, 255, 0.04) !important;
}

.mud-table-cell,
.mud-simple-table td {
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.08) !important;
}

/* -- Dialogs -------------------------------------------------------------- */
.mud-dialog {
    border-radius: 20px !important;
    overflow: hidden;
}

.mud-dialog .mud-paper {
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(60px) saturate(200%);
    -webkit-backdrop-filter: blur(60px) saturate(200%);
    border: 0.5px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12),
                0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.mud-dialog-title {
    padding: 20px 24px 8px 24px !important;
}

.mud-dialog-content {
    padding: 8px 24px 16px 24px !important;
}

.mud-dialog-actions {
    padding: 8px 24px 20px 24px !important;
}

/* -- Overlay / Backdrop --------------------------------------------------- */
.mud-overlay-dark {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* -- Popover -------------------------------------------------------------- */
.mud-popover-paper {
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(60px) saturate(200%);
    -webkit-backdrop-filter: blur(60px) saturate(200%);
    border: 0.5px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* -- Snackbar ------------------------------------------------------------- */
.mud-snackbar {
    border-radius: 14px !important;
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

/* -- Progress ------------------------------------------------------------- */
.mud-progress-linear {
    border-radius: 8px !important;
    overflow: hidden;
}

.mud-progress-linear .mud-progress-linear-bar {
    border-radius: 8px;
}

/* -- Menu ----------------------------------------------------------------- */
.mud-menu .mud-list {
    border-radius: 14px !important;
}

/* Menus measure their width before the item margins below apply — without
   this, the 2×6px margins overflow the popover and surface a horizontal
   scrollbar inside every menu. */
.mud-popover .mud-list {
    overflow-x: hidden;
}

.mud-menu-item {
    border-radius: 8px !important;
    margin: 2px 6px !important;
    transition: background 0.15s ease;
}

.mud-menu-item:hover {
    background: rgba(0, 122, 255, 0.08) !important;
}

/* -- Checkbox ------------------------------------------------------------- */
.mud-checkbox .mud-icon-root {
    border-radius: 6px;
}

/* -- Alert ---------------------------------------------------------------- */
.mud-alert {
    border-radius: 12px !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}

/* -- Dividers ------------------------------------------------------------- */
.mud-divider {
    border-color: rgba(60, 60, 67, 0.12) !important;
}

/* -- Badge ---------------------------------------------------------------- */
.mud-badge-content {
    font-weight: 600 !important;
    font-size: 0.7rem !important;
}

/* -- Scrollbar (WebKit) --------------------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* -- Blazor error UI ------------------------------------------------------ */
#blazor-error-ui {
    background: #ffeaa7;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ============================================================================
   Brand lockup + footer — shared with the www marketing site (sites/www) so
   every surface reads as the same brand. Brand mark sits in the AppBar; the
   footer renders at the bottom of MainLayout.
   ============================================================================ */
.sb-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none !important;
}
.sb-brand-mark { display: inline-flex; line-height: 0; }
/* The gradient squircle reads as a lit chip — give it the comp's soft blue glow. */
.sb-brand-mark svg {
    border-radius: 8px;
    box-shadow: 0 6px 16px -4px rgba(0, 122, 255, 0.5);
    transition: box-shadow 0.2s ease;
}
.sb-brand:hover .sb-brand-mark svg { box-shadow: 0 8px 20px -4px rgba(0, 122, 255, 0.65); }
.sb-brand-text {
    font-weight: 800;
    font-size: 17px;
    color: var(--mkt-text);
    letter-spacing: -0.02em;
}

.mkt-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.mkt-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}
.mkt-brand-mark { display: inline-flex; line-height: 0; }
.mkt-brand-text {
    font-weight: 700;
    font-size: 17px;
    color: var(--mkt-text);
    letter-spacing: -0.01em;
}
.mkt-footer {
    border-top: 1px solid var(--mkt-border-soft);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    padding: 56px 0 32px;
    position: relative;
    z-index: 1;
    margin-top: 64px;
}
.mkt-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 40px;
}
@media (max-width: 900px) {
    .mkt-footer-grid { grid-template-columns: 1fr 1fr; }
}
.mkt-footer-tag { color: var(--mkt-text-soft); font-size: 14px; margin-top: 12px; max-width: 320px; }
.mkt-footer-col h4 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mkt-text-faint);
    margin: 0 0 12px;
}
.mkt-footer-col a {
    display: block;
    color: var(--mkt-text);
    font-size: 14px;
    text-decoration: none !important;
    padding: 5px 0;
}
.mkt-footer-col a:hover { color: var(--mkt-primary); }
.mkt-footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--mkt-border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--mkt-text-faint);
    font-size: 13px;
    flex-wrap: wrap;
    gap: 12px;
}

/* -- Slim in-app footer ---------------------------------------------------
   Replaces the heavy marketing mkt-footer INSIDE the apps — one quiet line:
   © SB · a few links. The full marketing footer stays on www. Rendered by
   SbAppFooter at the bottom of each app's MainLayout (claims leftover height
   so it pins to the viewport bottom on short pages). */
.sb-appfoot {
    margin-top: auto;
    border-top: 1px solid var(--mkt-border-soft);
    background: var(--mkt-surface);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 12.5px;
    color: var(--mkt-text-faint);
    position: relative;
    z-index: 1;
}
.sb-appfoot-links { display: inline-flex; gap: 16px; flex-wrap: wrap; }
.sb-appfoot a { color: var(--mkt-text-soft); text-decoration: none; }
.sb-appfoot a:hover { color: var(--mkt-primary); }

/* ============================================================================
   Anonymous landing (home) — the branded sign-in screen anonymous/stale visitors
   land on instead of being bounced. Split hero: product pitch (left) + sign-in
   card (right) over the gradient orbs, with a cross-sell suite strip below.
   Stacks card-first under 900px — a phone visitor is almost always a returning
   user who just wants Sign in. The --single variant is the standalone card used
   by signed-out, waiting, and other one-card auth moments.
   ============================================================================ */
.sb-landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    max-width: 1000px;
    padding: 40px 20px;
}
.sb-landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 56px;
    align-items: center;
    width: 100%;
}

/* Pitch column */
.sb-landing-pitch {
    text-align: left;
}
.sb-landing-brandline {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
}
.sb-landing-brandline svg { display: block; }
.sb-landing-brandline span {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mkt-text);
}
.sb-landing-headline {
    font-size: 38px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--mkt-text);
    margin: 0 0 14px;
}
.sb-landing-lede {
    font-size: 16px;
    line-height: 1.55;
    color: var(--mkt-text-soft);
    margin: 0 0 28px;
    max-width: 46ch;
}
.sb-landing-pillars {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.sb-landing-pillar {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
}
.sb-landing-pillar-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--mkt-primary-soft);
    color: var(--mkt-primary);
}
.sb-landing-pillar-icon .mud-icon-root { font-size: 21px; }
.sb-landing-pillar strong {
    display: block;
    font-size: 15px;
    font-weight: 650;
    color: var(--mkt-text);
    margin-bottom: 2px;
}
.sb-landing-pillar p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--mkt-text-soft);
    margin: 0;
}
.sb-landing-trial {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--mkt-text-faint);
    margin: 0;
}

/* Sign-in card */
.sb-landing-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(60px) saturate(200%);
    -webkit-backdrop-filter: blur(60px) saturate(200%);
    border: 0.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06);
    padding: 44px 36px;
    text-align: center;
}
.sb-landing-mark {
    display: inline-flex;
    line-height: 0;
    margin-bottom: 20px;
    filter: drop-shadow(0 8px 20px rgba(0, 122, 255, 0.28));
}
.sb-landing-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mkt-text);
    margin: 0 0 8px;
}
.sb-landing-tag {
    font-size: 15px;
    line-height: 1.5;
    color: var(--mkt-text-soft);
    margin: 0 0 28px;
}
.sb-landing-cta {
    margin-bottom: 16px;
}
.sb-landing-alt {
    font-size: 14px;
    color: var(--mkt-text-soft);
    margin: 0 0 6px;
}
.sb-landing-alt a {
    color: var(--mkt-primary);
    font-weight: 600;
    text-decoration: none;
}
.sb-landing-alt a:hover { text-decoration: underline; }
.sb-landing-alt-sub {
    font-size: 12.5px;
    color: var(--mkt-text-faint);
    margin: 0;
}

/* Suite cross-sell strip */
.sb-landing-suite {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid var(--mkt-border-soft);
}
.sb-landing-suite-tag {
    font-size: 13px;
    color: var(--mkt-text-faint);
}
.sb-landing-suite-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mkt-text-soft);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--mkt-border);
    background: rgba(255, 255, 255, 0.6);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.sb-landing-suite-link:hover {
    color: var(--mkt-primary);
    border-color: var(--mkt-primary);
    text-decoration: none;
}

/* Single-card variant — signed-out and other standalone auth moments reuse the
   landing card without the hero grid. Self-sufficient (carries the flex layout)
   so it also works outside AuthLayout, e.g. inside the Admin hub's MainLayout. */
.sb-landing--single {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 440px;
    gap: 20px;
}
.sb-landing-foot {
    font-size: 13px;
    color: var(--mkt-text-faint);
    margin: 0;
}
/* Forms and alerts inside the centered card read left-aligned. */
.sb-landing-card form,
.sb-landing-card .mud-alert {
    text-align: left;
}

@media (max-width: 900px) {
    .sb-landing { padding: 28px 16px; }
    .sb-landing-hero {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .sb-landing-card {
        order: -1;
        max-width: 440px;
        margin: 0 auto;
    }
    .sb-landing-pitch {
        text-align: center;
        max-width: 480px;
        margin: 0 auto;
    }
    .sb-landing-lede { margin-left: auto; margin-right: auto; }
    .sb-landing-headline { font-size: 30px; }
    .sb-landing-pillars { max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* ============================================================================
   Status pages (403 / 404 / error) — one calm pattern across the suite.
   ============================================================================ */
.sb-status {
    text-align: center;
    max-width: 480px;
    margin: 14vh auto 3rem;
    padding: 0 16px;
}
.sb-status-code {
    font-size: 84px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--mkt-primary);
    opacity: 0.18;
    margin: 0 0 10px;
}
.sb-status-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mkt-text);
    margin: 0 0 8px;
}
.sb-status-text {
    font-size: 15px;
    line-height: 1.5;
    color: var(--mkt-text-soft);
    margin: 0;
}
.sb-status-meta {
    font-size: 12.5px;
    color: var(--mkt-text-faint);
    margin: 10px 0 0;
}
.sb-status-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* ============================================================================
   Dashboard glass system — KPI tiles and content cards that are TRANSLUCENT
   (unlike the global solid .mud-card) so the gradient orbs read through. This
   is where the Liquid Glass theme becomes visible inside the apps.
   ============================================================================ */
/* -- Page header (shared) -------------------------------------------------
   The single page-title pattern for every app surface (rendered by SbPageHeader):
   .sb-page-header > .sb-page-heading(.sb-page-title + .sb-page-subtitle)
                   + .sb-page-actions. Kept alongside the legacy .dash-page-header. */
.sb-page-header {
    display: flex;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin-bottom: var(--sb-page-pad);
}
.sb-page-heading { min-width: 0; }
.sb-page-titlerow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sb-page-back {
    display: inline-flex;
    margin-left: -8px;
    color: var(--mkt-text-soft);
}
.sb-page-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dash-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* One page-title scale, suite-wide — raw <h1>, MudText Typo.h1, and .sb-page-title
   all render identically as a calm 24px/600, not the old 38px/800 marketing
   headline. Class-scoped titles (.sb-landing-title, .sb-status-code) still win. */
h1,
.mud-typography-h1,
.sb-page-title {
    font-size: clamp(21px, 2.2vw, 25px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--mkt-text);
    line-height: 1.2;
    margin: 0;
}
/* SbPageHeader renders TitleContent INSIDE this h1 — inline-flex so a leading
   colour dot / avatar aligns with the name. */
.sb-page-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
/* Legacy per-app page-title classes render at the shared scale too, so CRM and PM
   page titles match Time immediately — even before those pages migrate to
   SbPageHeader. (They sit on a MudText Typo.h4, so !important is needed to win.) */
.crm-page-title,
.pm-page-title {
    font-size: clamp(21px, 2.2vw, 25px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    color: var(--mkt-text) !important;
}
.sb-page-subtitle,
.sb-page-header p,
.dash-page-header p {
    font-size: 14px;
    color: var(--mkt-text-soft);
    margin: 3px 0 0;
}
.sb-section-label,
.dash-section-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mkt-text-faint);
    margin: 4px 0 10px 2px;
}

/* -- Small utilities (retire ad-hoc inline styles in pages) ---------------- */
.sb-text-soft  { color: var(--mkt-text-soft) !important; }
.sb-text-faint { color: var(--mkt-text-faint) !important; }
/* Entity / project colour dot — replaces inline <div style="width:12px;..."> dots. */
.sb-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
    vertical-align: middle;
}
.sb-dot--sm { width: 8px; height: 8px; }
.sb-dot--lg { width: 16px; height: 16px; }

/* -- Empty state (shared) -------------------------------------------------- */
.sb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 48px 24px;
    color: var(--mkt-text-soft);
}
.sb-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: var(--mkt-primary-soft);
    color: var(--mkt-primary);
}
.sb-empty-icon .mud-icon-root { font-size: 26px; }
.sb-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mkt-text);
    margin: 0;
}
.sb-empty-hint {
    font-size: 13.5px;
    color: var(--mkt-text-faint);
    margin: 0;
    max-width: 42ch;
}
.sb-empty-action { margin-top: 10px; }

/* -- Flat groupings inside a card -----------------------------------------
   The suite convention: each content region is ONE card; nested groupings stay
   FLAT so they never read as card-in-card. Put these on a MudPaper (or div) that
   sits inside a card. .sb-flat = seamless (no chrome); .sb-subpanel = a subtle
   inset panel (light fill) for a distinct read-only/secondary block. */
.mud-paper.sb-flat,
.sb-flat {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.mud-paper.sb-subpanel,
.sb-subpanel {
    background: rgba(118, 118, 128, 0.06) !important;
    border: 1px solid var(--mkt-border-soft) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}

/* Date-range control — a glass pill holding the period segments and an integrated
   refresh button (matches the SB Dashboard comp; the active segment carries the
   brand action gradient rather than the comp's cyan, to stay in suite blue). */
.dash-range {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(118, 118, 128, 0.10);
    border: 1px solid var(--mkt-border-soft);
}
.dash-range-seg {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mkt-text-soft);
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.dash-range-seg:hover { color: var(--mkt-text); }
.dash-range-seg.active {
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #1F8CFF 0%, #007AFF 100%);
    box-shadow: 0 2px 6px -2px rgba(0, 122, 255, 0.5);
}
.dash-range-refresh {
    appearance: none;
    border: 0;
    background: transparent;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mkt-text-soft);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.dash-range-refresh:hover:not(:disabled) {
    background: rgba(0, 122, 255, 0.12);
    color: var(--mkt-primary);
    transform: translateY(-1px);
}
.dash-range-refresh:disabled { opacity: 0.45; cursor: default; }
.dash-range-refresh .mud-icon-root { font-size: 19px; }

/* Dashboard content card — pair with MudCard/MudPaper via Class="dash-card".
   Solid, calm surface (slightly more rounded than plain work cards). */
.mud-card.dash-card,
.mud-paper.dash-card {
    background: var(--mkt-surface) !important;
    border: 1px solid var(--mkt-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--mkt-shadow-card) !important;
}
.dash-card .mud-card-header  { padding: 20px 20px 8px 20px; }
.dash-card .mud-card-content { padding: 8px 20px 20px 20px; }
.dash-card.dash-card--lg .mud-card-header  { padding: 24px 24px 8px 24px; }
.dash-card.dash-card--lg .mud-card-content { padding: 8px 24px 24px 24px; }
.dash-card.dash-card--strip .mud-card-content { padding: 14px 20px; }

/* KPI tile — a plain div, deliberately NOT MudPaper, so it escapes the global
   card overrides. Structure: label / big tabular number / fine-print sub, with
   a tinted icon chip pinned top-right. */
.dash-kpi {
    position: relative;
    height: 100%;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--mkt-surface);
    border: 1px solid var(--mkt-border);
    box-shadow: var(--mkt-shadow-card);
    transition: transform var(--sb-transition), box-shadow var(--sb-transition);
}
.dash-kpi:hover {
    transform: translateY(-1px);
    box-shadow: var(--mkt-shadow-card-hover);
}
.dash-kpi-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mkt-text-soft);
    margin: 0 0 6px;
    padding-right: 40px; /* clear the icon chip */
}
.dash-kpi-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--mkt-text);
    font-variant-numeric: tabular-nums;
    margin: 0;
}
/* Text-on-light variants tuned for contrast (not the raw palette hues). */
.dash-kpi-value--success { color: #1E8E3E; }
.dash-kpi-value--warning { color: #B25000; }
.dash-kpi-value--error   { color: #D70015; }
.dash-kpi-sub {
    font-size: 12.5px;
    color: var(--mkt-text-faint);
    margin: 4px 0 0;
}
.dash-kpi-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mkt-primary-soft);
    color: var(--mkt-primary);
}
.dash-kpi--alert {
    border-color: rgba(255, 59, 48, 0.35);
    box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.12), var(--mkt-shadow-sm);
}
.dash-kpi--alert .dash-kpi-icon {
    background: rgba(255, 59, 48, 0.10);
    color: #D70015;
}

@media (max-width: 599.98px) {
    .dash-kpi { padding: 14px 16px; }
    .dash-kpi-value { font-size: 24px; }
}

/* ============================================================================
   Marketing home (SbProductHome) — the logged-out product landing page for
   Time / PM / CRM. A long, self-contained marketing + upsell surface that
   DELIBERATELY deviates from the calm in-app Refined-Professional rules: it
   uses richer ink, deeper tints, big editorial headings, a flat-blue final CTA
   and a dark price card. Strictly for marketing/upsell; not a work surface.

   100% CSS-driven — no JS. The header nav collapses via a media query, the
   layout reflows via auto-fit grids + clamp() (no hard breakpoints), and there
   is no animation (the prototype's only motion was a live-timer pulse, which
   this build does not use — the app preview is a static screenshot). Primary
   blue threads through --mkt-primary; per-product accents via --sb-home-*.
   ============================================================================ */
.sb-home {
    width: 100%;
    background: var(--mkt-surface);
    color: var(--sb-home-ink);
    overflow-x: hidden;
    position: relative;
    z-index: 1;
    line-height: 1.5;
}
/* NB: do NOT add a broad `.sb-home a { color: inherit }` reset — its (0,1,1) specificity beats the
   single-class button/link colour rules (.sb-home-btn--primary, .sb-home-suite-link, …), which made
   the blue "Start free" buttons render black text. Every anchor here sets its own colour explicitly. */
.sb-home-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Display face: headings, dollar figures, and the brand wordmark. Body/UI text stays the suite Roboto. */
.sb-home-logo-text,
.sb-home-h1,
.sb-home-h2,
.sb-home-card-title,
.sb-home-feature h3,
.sb-home-suite-card h3,
.sb-home-suite-price-amount,
.sb-home-price-amount,
.sb-home-cta-banner h2 {
    font-family: var(--sb-home-display);
}

/* -- Buttons (anchors styled as buttons — keeps the page JS- and Mud-free) -- */
.sb-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    border-radius: 11px;
    border: 1px solid transparent;
    padding: 14px 24px;
    font-size: 15.5px;
    cursor: pointer;
    transition: background var(--sb-transition), border-color var(--sb-transition), color var(--sb-transition);
}
.sb-home-btn svg { display: block; }
.sb-home-btn--sm { padding: 9px 16px; font-size: 14.5px; border-radius: 9px; }
.sb-home-btn--primary {
    background: var(--mkt-primary);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0, 122, 255, 0.28);
}
.sb-home-btn--primary:hover { background: color-mix(in srgb, var(--mkt-primary) 88%, #000); }
.sb-home-btn--ghost { background: transparent; color: var(--sb-home-ink); box-shadow: none; }
.sb-home-btn--ghost:hover { background: #f3f4f6; }
.sb-home-btn--outline {
    background: var(--mkt-surface);
    color: var(--sb-home-ink);
    border-color: #e3e6eb;
    box-shadow: none;
}
.sb-home-btn--outline:hover { background: #f7f8fa; }
.sb-home-btn--block { width: 100%; }
.sb-home-btn-play {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--sb-home-ink);
    display: inline-flex; align-items: center; justify-content: center;
}
/* On the solid-blue final CTA banner */
.sb-home-btn--on-blue {
    background: #fff; color: var(--mkt-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}
.sb-home-btn--on-blue:hover { background: #f2f6ff; }
.sb-home-btn--translucent {
    background: rgba(255, 255, 255, 0.14); color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.sb-home-btn--translucent:hover { background: rgba(255, 255, 255, 0.22); }

/* -- Header (sticky) ------------------------------------------------------- */
.sb-home-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid #eef0f3;
}
.sb-home-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 64px;
}
.sb-home-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}
.sb-home-logo-text { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--sb-home-ink); }
.sb-home-nav { display: flex; align-items: center; gap: 30px; }
.sb-home-nav a {
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    color: #3b414c;
    transition: color var(--sb-transition);
}
.sb-home-nav a:hover { color: var(--sb-home-ink); }
.sb-home-header-actions { display: flex; align-items: center; gap: 10px; }

/* -- Hero ------------------------------------------------------------------ */
.sb-home-hero { position: relative; padding: clamp(48px, 7vw, 84px) 0 40px; }
.sb-home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(1100px 480px at 78% -8%, var(--sb-home-blue-tint) 0%, rgba(234, 243, 255, 0) 60%);
}
.sb-home-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
}
.sb-home-hero-pitch { min-width: 0; }
.sb-home-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #eef5ff;
    color: var(--mkt-primary);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}
.sb-home-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mkt-primary); }
.sb-home-h1 {
    font-weight: 700;
    font-size: clamp(38px, 6.4vw, 62px);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 22px 0 0;
}
.sb-home-h1-muted { color: #9aa0ab; }
.sb-home-lede {
    font-size: clamp(16.5px, 2.2vw, 19px);
    line-height: 1.55;
    color: #565b66;
    max-width: 30em;
    margin: 22px 0 0;
}
.sb-home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sb-home-trust {
    font-size: 13.5px;
    color: var(--sb-home-muted);
    margin: 22px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.sb-home-trust .sb-home-trust-sep { color: #d6dae1; }

/* -- Sign-in card (solid white — handoff spec; not the frosted .sb-landing-card) -- */
.sb-home-card {
    width: 100%;
    max-width: 430px;
    justify-self: center;
    background: var(--mkt-surface);
    border: 1px solid #eaecf0;
    border-radius: 20px;
    padding: 40px 34px;
    box-shadow: 0 26px 60px -20px rgba(11, 13, 18, 0.18), 0 4px 14px rgba(11, 13, 18, 0.05);
    text-align: center;
}
.sb-home-card-mark {
    display: inline-flex;
    line-height: 0;
    border-radius: 17px;
    filter: drop-shadow(0 10px 28px rgba(0, 122, 255, 0.4));
}
.sb-home-card-title { font-weight: 700; font-size: 30px; letter-spacing: -0.02em; margin: 22px 0 0; }
.sb-home-card-tag { font-size: 16px; color: #6b7180; margin: 8px 0 0; }
.sb-home-card .sb-home-btn { margin-top: 28px; padding: 16px; font-size: 16px; font-weight: 700; border-radius: 13px; }
.sb-home-card-alt { margin-top: 24px; font-size: 15px; color: #6b7180; }
.sb-home-card-alt a { color: var(--mkt-primary); font-weight: 700; text-decoration: none; }
.sb-home-card-alt a:hover { text-decoration: underline; }
.sb-home-card-sub { font-size: 13.5px; color: var(--sb-home-muted); margin: 8px 0 0; }

/* -- App preview (static screenshot inside a browser frame) ---------------- */
.sb-home-preview { padding: 32px 0 clamp(56px, 8vw, 96px); }
.sb-home-preview-scroll { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.sb-home-preview-frame {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e7e9ee;
    box-shadow: 0 40px 90px -30px rgba(11, 13, 18, 0.32);
    background: var(--mkt-surface);
}
.sb-home-preview-chrome {
    height: 42px;
    background: #f6f7f9;
    border-bottom: 1px solid #eceef2;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
}
.sb-home-preview-dot { width: 11px; height: 11px; border-radius: 50%; }
.sb-home-preview-dot--r { background: #ff5f57; }
.sb-home-preview-dot--y { background: #febc2e; }
.sb-home-preview-dot--g { background: #28c840; }
.sb-home-preview-url {
    margin: 0 auto;
    background: var(--mkt-surface);
    border: 1px solid #e7e9ee;
    color: #8a8f99;
    font-size: 12px;
    padding: 4px 14px;
    border-radius: 7px;
}
.sb-home-preview-shot { display: block; width: 100%; height: auto; }
.sb-home-preview-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    aspect-ratio: 16 / 10;
    background:
        radial-gradient(60% 60% at 50% 0%, #f4f8ff 0%, rgba(244, 248, 255, 0) 70%),
        var(--mkt-bg);
    color: var(--sb-home-muted);
    text-align: center;
    padding: 24px;
}
.sb-home-preview-ph-label { font-size: 14px; font-weight: 600; color: #6b7180; }
.sb-home-preview-ph-hint { font-size: 12.5px; color: var(--sb-home-muted); }

/* -- Generic section + headings -------------------------------------------- */
.sb-home-section { padding: 40px 0 clamp(56px, 8vw, 96px); }
.sb-home-eyebrow {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--mkt-primary);
    text-transform: uppercase;
}
.sb-home-h2 {
    font-weight: 700;
    font-size: clamp(29px, 4.6vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 14px 0 0;
}
.sb-home-intro { max-width: 680px; }
.sb-home-lead { font-size: 17.5px; color: #565b66; line-height: 1.55; margin: 14px 0 0; }

/* -- Features (3-up cards) ------------------------------------------------- */
.sb-home-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 22px;
    margin-top: 48px;
}
.sb-home-feature {
    background: var(--mkt-surface);
    border: 1px solid #eaecf0;
    border-radius: 18px;
    padding: 26px;
}
.sb-home-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--sb-accent-tint, var(--sb-home-blue-tint));
    color: var(--sb-accent, var(--mkt-primary));
    display: flex;
    align-items: center;
    justify-content: center;
}
.sb-home-feature h3 { font-weight: 700; font-size: 19px; margin: 18px 0 0; }
.sb-home-feature p { font-size: 14.5px; color: #6b7180; line-height: 1.55; margin: 9px 0 0; }

/* -- Suite upsell band ----------------------------------------------------- */
.sb-home-suite {
    padding: clamp(56px, 8vw, 84px) 0;
    background: #f6f7f9;
    border-top: 1px solid #eef0f3;
    border-bottom: 1px solid #eef0f3;
}
.sb-home-suite-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.sb-home-suite-head-copy { max-width: 620px; }
.sb-home-suite-price {
    background: var(--mkt-surface);
    border: 1px solid #eaecf0;
    border-radius: 14px;
    padding: 14px 18px;
}
.sb-home-suite-price-label { font-size: 13px; color: #6b7180; }
.sb-home-suite-price-amount { font-weight: 700; font-size: 22px; }
.sb-home-suite-price-amount span { font-size: 13px; color: var(--sb-home-muted); font-weight: 500; }
.sb-home-suite-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 22px;
    margin-top: 42px;
}
.sb-home-suite-card {
    position: relative;
    background: var(--mkt-surface);
    border: 1px solid #eaecf0;
    border-radius: 18px;
    padding: 26px;
}
.sb-home-suite-card--current {
    border: 1.5px solid var(--sb-accent, var(--mkt-primary));
    box-shadow: 0 14px 36px -18px color-mix(in srgb, var(--sb-accent, var(--mkt-primary)) 65%, transparent);
}
.sb-home-suite-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--sb-accent-tint, var(--sb-home-blue-tint));
    color: var(--sb-accent, var(--mkt-primary));
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}
.sb-home-suite-icon { display: inline-flex; line-height: 0; border-radius: 13px; }
.sb-home-suite-icon--current { filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--sb-accent, var(--mkt-primary)) 45%, transparent)); }
.sb-home-suite-card h3 { font-weight: 700; font-size: 19px; margin: 18px 0 0; }
.sb-home-suite-card p { font-size: 14px; color: #6b7180; line-height: 1.55; margin: 8px 0 0; }
.sb-home-suite-link {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--sb-accent, var(--mkt-primary));
}
.sb-home-suite-link:hover { text-decoration: underline; }

/* -- Pricing teaser -------------------------------------------------------- */
.sb-home-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
}
.sb-home-pricing-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.sb-home-price-card {
    background: var(--sb-home-ink);
    border-radius: 22px;
    padding: 34px;
    color: #fff;
}
.sb-home-price-amount-row { display: flex; align-items: baseline; gap: 8px; }
.sb-home-price-amount { font-weight: 700; font-size: 56px; letter-spacing: -0.02em; }
.sb-home-price-per { color: #9aa0ab; font-size: 16px; }
.sb-home-price-divider { height: 1px; background: #1f242c; margin: 24px 0; }
.sb-home-price-list { display: flex; flex-direction: column; gap: 14px; }
.sb-home-price-row { display: flex; align-items: center; gap: 11px; font-size: 15px; }
.sb-home-price-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sb-home-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sb-home-price-foot { margin-top: 26px; font-size: 13px; color: #9aa0ab; }

/* -- Final CTA (flat solid-blue block) ------------------------------------- */
.sb-home-cta { padding: 0 0 clamp(56px, 8vw, 96px); }
.sb-home-cta-banner {
    position: relative;
    overflow: hidden;
    background: var(--mkt-primary);
    border-radius: 24px;
    padding: clamp(44px, 6vw, 64px) clamp(24px, 4vw, 48px);
    text-align: center;
}
.sb-home-cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(700px 320px at 50% -30%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%);
}
.sb-home-cta-inner { position: relative; }
.sb-home-cta-banner h2 {
    font-weight: 700;
    font-size: clamp(30px, 5vw, 44px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
}
.sb-home-cta-banner p {
    font-size: 18px;
    /* Full white on brand blue (#007AFF ≈ 4:1) — a deliberate marketing-hero exception to the
       4.5:1 AA bar; raised from 0.86 alpha for max legibility without darkening the brand banner. */
    color: #fff;
    margin: 16px auto 0;
    max-width: 30em;
    line-height: 1.5;
}
.sb-home-cta-actions { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* -- Marketing footer (shared SbMarketingFooter) --------------------------- */
.sb-home-footer {
    border-top: 1px solid #eef0f3;
    background: #fafbfc;
    padding: 56px 0 40px;
    position: relative;
    z-index: 1;
}
.sb-home-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 32px;
}
.sb-home-footer-brand-row { display: flex; align-items: center; gap: 11px; }
.sb-home-footer-tag { font-size: 14px; color: #6b7180; line-height: 1.55; margin: 16px 0 0; max-width: 24em; }
.sb-home-footer-col h4 {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sb-home-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}
.sb-home-footer-links { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sb-home-footer-links a {
    text-decoration: none;
    font-size: 14px;
    color: #3b414c;
    transition: color var(--sb-transition);
}
.sb-home-footer-links a:hover { color: var(--mkt-primary); }
.sb-home-footer-bottom {
    border-top: 1px solid #eef0f3;
    margin-top: 40px;
    padding-top: 24px;
    font-size: 13px;
    color: var(--sb-home-muted);
}

/* Header nav is the one JS-free responsive rule: hide the centre links on
   narrow screens; the logo + Sign in / Start free buttons always remain. */
@media (max-width: 760px) {
    .sb-home-nav { display: none; }
}

/* Branded keyboard focus ring (matches the in-app system; the page is keyboard-navigable with no
   outline:none anywhere, this just makes the ring on-brand). White ring on the solid-blue CTA. */
.sb-home-btn:focus-visible,
.sb-home-logo:focus-visible,
.sb-home-nav a:focus-visible,
.sb-home-suite-link:focus-visible,
.sb-home-footer-links a:focus-visible {
    outline: 2px solid var(--mkt-primary);
    outline-offset: 2px;
}
.sb-home-cta-banner .sb-home-btn:focus-visible { outline-color: #fff; }

/* Anchor targets clear the 64px sticky header so the jumped-to heading isn't hidden behind it.
   Smooth-scroll only when the user hasn't asked for reduced motion; scoped to the marketing page
   so in-app scrolling is unaffected. JS-free. */
.sb-home section[id] { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: no-preference) {
    html:has(.sb-home) { scroll-behavior: smooth; }
}