/* ============================================================================
   eCOMeX — Notion-inspired design system
   Single source of truth for theme tokens, base styles, and primitives.
   ========================================================================== */

:root {
    /* Text */
    --color-text:           #37352F;
    --color-text-secondary: #787774;
    --color-text-tertiary:  #9B9A97;
    --color-text-disabled:  #C7C5C0;
    --color-text-inverse:   #FFFFFF;

    /* Backgrounds */
    --color-bg:             #FFFFFF;
    --color-bg-soft:        #F7F6F3;
    --color-bg-hover:       #F1F1EF;
    --color-bg-active:      #EBEBEA;
    --color-bg-selected:    rgba(35, 131, 226, 0.07);
    --color-bg-sidebar:     #FBFBFA;

    /* Borders / dividers */
    --color-border:         #E9E9E7;
    --color-divider:        #EDECE9;
    --color-border-strong:  #D3D1CB;

    /* Accents */
    --color-accent:         #2383E2;
    --color-accent-hover:   #0B6BCB;
    --color-accent-soft:    rgba(35, 131, 226, 0.10);

    /* Status */
    --color-success:        #0F7B6C;
    --color-success-soft:   rgba(15, 123, 108, 0.10);
    --color-warning:        #CB912F;
    --color-warning-soft:   rgba(203, 145, 47, 0.10);
    --color-danger:         #E03E3E;
    --color-danger-soft:    rgba(224, 62, 62, 0.10);

    /* Radii */
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 8px;

    /* Shadows (very subtle, Notion-like) */
    --shadow-sm: rgba(15, 15, 15, 0.05) 0 1px 2px;
    --shadow-md: rgba(15, 15, 15, 0.05) 0 2px 4px, rgba(15, 15, 15, 0.05) 0 4px 12px;
    --shadow-pop: rgba(15, 15, 15, 0.10) 0 0 0 1px, rgba(15, 15, 15, 0.10) 0 3px 6px, rgba(15, 15, 15, 0.20) 0 9px 24px;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-serif: "Lyon Text", Georgia, ui-serif, serif;
    --font-mono: "SFMono-Regular", "Menlo", Consolas, "Liberation Mono", monospace;

    --text-xs:  12px;
    --text-sm:  13px;
    --text-base:14px;
    --text-md:  15px;
    --text-lg:  16px;
    --text-xl:  20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;

    --leading-tight:  1.3;
    --leading-normal: 1.5;
    --leading-loose:  1.7;

    /* Spacing scale */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Layout */
    --sidebar-width: 240px;
    --topbar-height: 44px;

    /* Transitions */
    --t-fast: 60ms ease-out;
    --t-base: 120ms ease-out;
}

/* ---------- Reset / base ---------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover { text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea, button { font-family: inherit; }
hr {
    border: 0;
    border-top: 1px solid var(--color-divider);
    margin: var(--space-4) 0;
}
h1, h2, h3, h4, h5 {
    margin: 0;
    line-height: var(--leading-tight);
    font-weight: 600;
    color: var(--color-text);
}
h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); letter-spacing: -0.01em; }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p  { margin: 0 0 var(--space-3); }
small, .text-secondary { color: var(--color-text-secondary); font-size: var(--text-sm); }
.text-tertiary { color: var(--color-text-tertiary); font-size: var(--text-sm); }
.muted { color: var(--color-text-secondary); }

/* ---------- App shell ------------------------------------------------------*/
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--color-bg-sidebar);
    border-right: 1px solid var(--color-border);
    padding: var(--space-3) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-y: auto;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar__brand {
    padding: var(--space-2) var(--space-4) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.sidebar__brand-mark {
    width: 22px; height: 22px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #1F1F1F, #4A4A4A);
    color: #FFF;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.sidebar__brand-name {
    font-weight: 600;
    font-size: var(--text-md);
    letter-spacing: -0.01em;
}
.sidebar__user {
    padding: 0 var(--space-3);
}
.sidebar__user-card {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: background var(--t-base);
}
.sidebar__user-card:hover { background: var(--color-bg-hover); }
.avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600;
}
.sidebar__user-name { font-size: var(--text-sm); font-weight: 500; }
.sidebar__user-tenant { font-size: var(--text-xs); color: var(--color-text-secondary); }

.sidebar__section {
    padding: var(--space-1) var(--space-2);
}
.sidebar__section-title {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-tertiary);
}
.sidebar__nav-link {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 6px var(--space-3);
    margin: 1px 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.4;
    transition: background var(--t-fast), color var(--t-fast);
    cursor: pointer;
}
.sidebar__nav-link:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}
.sidebar__nav-link.is-active {
    background: var(--color-bg-active);
    color: var(--color-text);
    font-weight: 500;
}
.sidebar__nav-link.is-disabled {
    color: var(--color-text-disabled);
    cursor: not-allowed;
    pointer-events: none;
}
.sidebar__nav-link .icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
.sidebar__nav-link .badge {
    margin-left: auto;
    font-size: 10px;
    background: var(--color-bg-active);
    color: var(--color-text-secondary);
    padding: 1px 6px;
    border-radius: 999px;
}
.sidebar__footer {
    margin-top: auto;
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-divider);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

/* ---------- Main area ------------------------------------------------------*/
.main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.topbar {
    height: var(--topbar-height);
    border-bottom: 1px solid var(--color-divider);
    background: var(--color-bg);
    display: flex; align-items: center;
    padding: 0 var(--space-6);
    gap: var(--space-3);
    position: sticky; top: 0;
    z-index: 10;
}
.topbar__crumb {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.topbar__title {
    font-size: var(--text-sm);
    color: var(--color-text);
    font-weight: 500;
}
.topbar__spacer { flex: 1; }
.topbar__search {
    width: 280px;
    padding: 4px var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    color: var(--color-text);
    font-size: var(--text-sm);
    outline: none;
    transition: border var(--t-base), background var(--t-base);
}
.topbar__search:focus { border-color: var(--color-border-strong); background: var(--color-bg); }

.content {
    padding: var(--space-8) var(--space-12);
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

/* ---------- Page header ----------------------------------------------------*/
.page-header {
    margin-bottom: var(--space-6);
}
.page-header h1 { margin-bottom: var(--space-1); }
.page-header__sub { color: var(--color-text-secondary); font-size: var(--text-sm); }

/* ---------- Cards / panels -------------------------------------------------*/
.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.card + .card { margin-top: var(--space-3); }
.card__title { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--space-2); }
.card__sub   { color: var(--color-text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-3); }

/* ---------- Forms ----------------------------------------------------------*/
.field { margin-bottom: var(--space-4); }
.field__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-1);
}
.field__hint { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: var(--space-1); }
.input, .select, textarea {
    width: 100%;
    padding: 7px var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--text-sm);
    transition: border var(--t-base), box-shadow var(--t-base);
}
.input:hover, .select:hover, textarea:hover { border-color: var(--color-border-strong); }
.input:focus, .select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent-soft);
}
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* ---------- Buttons --------------------------------------------------------*/
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2);
    padding: 6px var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
    text-decoration: none;
    white-space: nowrap;
}
.btn--primary {
    background: var(--color-text);
    color: var(--color-text-inverse);
    border-color: var(--color-text);
}
.btn--primary:hover { background: #2A2A28; }
.btn--secondary {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.btn--secondary:hover { background: var(--color-bg-hover); }
.btn--ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
}
.btn--ghost:hover { background: var(--color-bg-hover); color: var(--color-text); }
.btn--danger {
    background: var(--color-bg);
    color: var(--color-danger);
    border-color: var(--color-border);
}
.btn--danger:hover { background: var(--color-danger-soft); }
.btn--block { display: flex; width: 100%; }
.btn--lg { padding: 8px var(--space-4); font-size: var(--text-md); }

/* ---------- Alerts / flash -------------------------------------------------*/
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}
.alert--success { background: var(--color-success-soft); border-color: rgba(15, 123, 108, 0.2); color: var(--color-success); }
.alert--error   { background: var(--color-danger-soft);  border-color: rgba(224, 62, 62, 0.2); color: var(--color-danger); }
.alert--warning { background: var(--color-warning-soft); border-color: rgba(203, 145, 47, 0.2); color: var(--color-warning); }

/* ---------- Auth pages -----------------------------------------------------*/
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-soft);
    padding: var(--space-6);
}
.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}
.auth-brand {
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-2); margin-bottom: var(--space-5);
}
.auth-brand .sidebar__brand-mark { width: 28px; height: 28px; font-size: 14px; }
.auth-brand .sidebar__brand-name { font-size: var(--text-lg); }
.auth-card h1 {
    font-size: var(--text-xl); margin-bottom: var(--space-1);
    text-align: center;
}
.auth-card .auth-sub {
    text-align: center; color: var(--color-text-secondary);
    font-size: var(--text-sm); margin-bottom: var(--space-5);
}
.auth-footer { text-align: center; font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-4); }
.auth-footer a { color: var(--color-accent); }
.auth-footer a:hover { text-decoration: underline; }

/* ---------- BOM tree -------------------------------------------------------*/
.bom-tree summary::-webkit-details-marker { display: none; }
.bom-tree > summary:hover {
    background: var(--color-bg-hover);
    border-radius: var(--radius-sm);
}
.bom-tree__caret {
    display: inline-block;
    width: 14px;
    color: var(--color-text-tertiary);
    transition: transform var(--t-fast);
}
.bom-tree[open] > summary > .bom-tree__caret {
    transform: rotate(90deg);
}
.bom-tree__group { padding: var(--space-1) 0; }
.bom-tree__group-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin: var(--space-1) 0;
}
.bom-tree__leaf {
    padding: 4px var(--space-2);
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}
.bom-tree__leaf:hover { background: var(--color-bg-hover); }
.bom-tree__code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* ---------- Utility --------------------------------------------------------*/
.stack > * + * { margin-top: var(--space-3); }
.stack-sm > * + * { margin-top: var(--space-2); }
.row-end { display: flex; justify-content: flex-end; gap: var(--space-2); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.kbd {
    display: inline-block;
    padding: 1px 4px;
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-secondary);
    background: var(--color-bg);
}
.icon { display: inline-block; vertical-align: middle; }

/* ---------- Stat tiles (dashboard) -----------------------------------------*/
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.stat {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--color-bg);
}
.stat__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-tertiary); }
.stat__value { font-size: var(--text-2xl); font-weight: 600; margin-top: var(--space-1); }
.stat__sub   { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: var(--space-1); }

/* ---------- User menu (sidebar) -------------------------------------------*/
.user-menu { padding: 0; margin: 0 var(--space-3); }
.user-menu summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    display: flex; align-items: center; gap: var(--space-2);
    transition: background var(--t-base);
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover { background: var(--color-bg-hover); }
.user-menu[open] summary { background: var(--color-bg-hover); }
.user-menu__label { min-width: 0; flex: 1; }
.user-menu__name { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
.user-menu__tenant { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu__caret { font-size: 10px; color: var(--color-text-tertiary); }
.user-menu__panel {
    margin-top: var(--space-1);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-1);
    box-shadow: var(--shadow-md);
}
.user-menu__email {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-divider);
    margin-bottom: var(--space-1);
    word-break: break-all;
}
.user-menu__item {
    display: block;
    padding: 6px var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-text);
    transition: background var(--t-fast);
}
.user-menu__item:hover { background: var(--color-bg-hover); }
.user-menu__item--danger { color: var(--color-danger); }
.user-menu__item--danger:hover { background: var(--color-danger-soft); }

.user-menu__panel hr { margin: var(--space-1) 0; }

/* ---------- Banners --------------------------------------------------------*/
.banner {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-warning-soft);
    border: 1px solid rgba(203, 145, 47, 0.25);
    color: var(--color-text);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}
.banner__cta { margin-left: auto; }
.banner button.btn--ghost { color: var(--color-text); }

/* ---------- Empty state ----------------------------------------------------*/
.empty {
    text-align: center;
    padding: var(--space-10) var(--space-4);
    color: var(--color-text-secondary);
}
.empty h3 { color: var(--color-text); margin-bottom: var(--space-2); }
.empty p  { color: var(--color-text-secondary); }


/* ---------- Notifications bell --------------------------------------------*/
.bell { position: relative; margin-left: var(--space-2); }
.bell__summary {
    list-style: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    position: relative;
    display: inline-flex;
    align-items: center;
}
.bell__summary::-webkit-details-marker { display: none; }
.bell__summary:hover { background: var(--color-bg-hover); color: var(--color-text); }
.bell__icon { display: inline-flex; }
.bell__badge {
    position: absolute;
    top: 0; right: 0;
    background: var(--color-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    line-height: 14px;
}
.bell__panel {
    position: absolute;
    right: 0; top: calc(100% + 4px);
    width: 360px;
    max-height: 480px;
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 50;
}
.bell__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-divider);
}
.bell__list {}
.bell__item {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-divider);
    color: var(--color-text);
    text-decoration: none;
}
.bell__item:hover { background: var(--color-bg-hover); }
.bell__item--unread { background: rgba(60, 100, 200, 0.04); }
.bell__title { font-size: var(--text-sm); font-weight: 500; }
.bell__body  { font-size: 11px; margin-top: 2px; line-height: 1.4; }
.bell__meta  { font-size: 10px; margin-top: 4px; }
.bell__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-size: 11px;
}
.bell__mark-all {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 11px;
    padding: 0;
}
.bell__mark-all:hover { color: var(--color-text); }

/* ---------- Hamburger + install button (topbar) ---------------------------*/
.topbar__hamburger,
.topbar__install {
    display: none;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 12px;
    color: var(--color-text-secondary);
    cursor: pointer;
    margin-left: var(--space-2);
}
.topbar__hamburger:hover,
.topbar__install:hover {
    color: var(--color-text);
    background: var(--color-bg-hover);
}
.topbar__install { color: var(--color-accent); border-color: var(--color-accent); }

/* ---------- Mobile responsive (<=768px) -----------------------------------*/
@media (max-width: 768px) {
    /* Sidebar becomes a slide-out drawer; main column takes full width. */
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        top: 0; left: 0;
        width: min(280px, 80vw);
        height: 100vh;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 180ms ease;
        box-shadow: 2px 0 12px rgba(0,0,0,0.06);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open::after {
        content: "";
        position: fixed; inset: 0; z-index: 99;
        background: rgba(0,0,0,0.35);
    }
    .topbar__hamburger { display: inline-flex; align-items: center; gap: 6px; }

    /* Topbar tightens: hide breadcrumb chrome, search shrinks. */
    .topbar { gap: 4px; padding: 8px 12px; }
    .topbar__crumb, .topbar__title { font-size: 12px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar__search { width: 140px; min-width: 0; }

    /* Page padding shrinks on narrow screens. */
    .content { padding: var(--space-3) var(--space-3); }

    /* Multi-column layouts stack. */
    .row-2 { grid-template-columns: 1fr !important; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }

    /* Inline forms in chat / discussion stack composer fields. */
    .card .row-2[style*="grid-template-columns: 1fr auto"] { grid-template-columns: 1fr !important; }

    /* Tables stay legible — horizontal scroll wrapper instead of squishing. */
    .card table { display: block; overflow-x: auto; white-space: nowrap; }
    .card table thead, .card table tbody { display: table; width: max-content; min-width: 100%; }
    .card table tr { display: table-row; }
    .card table th, .card table td { display: table-cell; }

    /* Bell panel becomes near-fullwidth so it fits. */
    .bell__panel { width: min(340px, calc(100vw - 24px)); right: -8px; }

    /* Page header buttons wrap. */
    .page-header.row-between { flex-wrap: wrap; gap: var(--space-2); }
    .page-header.row-between > div { flex: 1 1 100%; }
    .page-header.row-between > div + div { flex-basis: auto; }
}

/* Hide install button by default; JS shows it when beforeinstallprompt fires. */
.topbar__install { display: none; }
.is-installable .topbar__install { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================ */
/* MARKETING HOMEPAGE                                            */
/* ============================================================ */
body.marketing { background: #fcfcfc; color: var(--color-text); }
body.marketing main { display: block; }
body.marketing .app-shell { display: block; min-height: 0; }

.mkt-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* Top nav */
.mkt-nav {
    background: rgba(252, 252, 252, 0.92);
    backdrop-filter: saturate(150%) blur(8px);
    border-bottom: 1px solid var(--color-divider);
    position: sticky; top: 0; z-index: 50;
}
.mkt-nav__inner {
    max-width: 1100px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; gap: 32px;
}
.mkt-nav__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--color-text); font-weight: 600; }
.mkt-nav__brand-mark {
    width: 26px; height: 26px; border-radius: 7px;
    background: #1a1a1a; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 14px;
}
.mkt-nav__brand-name { font-size: 16px; }
.mkt-nav__links { display: flex; gap: 24px; flex: 1; }
.mkt-nav__links a { color: var(--color-text-secondary); text-decoration: none; font-size: 14px; }
.mkt-nav__links a:hover { color: var(--color-text); }
.mkt-nav__cta { display: flex; gap: 8px; }

/* Marketing-only buttons */
.mkt-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 14px;
    font-size: 14px; font-weight: 500;
    border-radius: 8px; border: 1px solid var(--color-border);
    text-decoration: none; cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.mkt-btn--primary { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.mkt-btn--primary:hover { background: #000; }
.mkt-btn--ghost { background: transparent; color: var(--color-text); }
.mkt-btn--ghost:hover { background: var(--color-bg-hover); }
.mkt-btn--lg { padding: 12px 22px; font-size: 15px; }
.mkt-btn--block { display: flex; width: 100%; }

/* Hero */
.mkt-hero { padding: 72px 0 40px; text-align: center; }
.mkt-hero__pill {
    display: inline-block; padding: 4px 12px;
    background: var(--color-bg-hover); border: 1px solid var(--color-divider);
    border-radius: 999px; font-size: 12px;
    color: var(--color-text-secondary); margin-bottom: 24px;
}
.mkt-hero__title {
    font-size: clamp(32px, 5vw, 56px); line-height: 1.1; font-weight: 600;
    letter-spacing: -0.02em; margin: 0 0 20px;
}
.mkt-hero__title-accent { color: var(--color-text-secondary); font-weight: 500; }
.mkt-hero__sub {
    max-width: 640px; margin: 0 auto 28px;
    font-size: 17px; line-height: 1.55; color: var(--color-text-secondary);
}
.mkt-hero__cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.mkt-hero__meta { font-size: 12px; color: var(--color-text-tertiary); }
.mkt-hero__shot { margin-top: 56px; }

/* Mock product window */
.mkt-window {
    max-width: 920px; margin: 0 auto;
    background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
    overflow: hidden; box-shadow: 0 24px 48px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
    text-align: left;
}
.mkt-window__bar {
    background: #f5f5f5; border-bottom: 1px solid var(--color-divider);
    padding: 8px 14px; display: flex; align-items: center; gap: 6px;
}
.mkt-window__dot { width: 11px; height: 11px; border-radius: 50%; background: #d4d4d4; }
.mkt-window__dot:nth-child(1) { background: #ff5f56; }
.mkt-window__dot:nth-child(2) { background: #ffbd2e; }
.mkt-window__dot:nth-child(3) { background: #27c93f; }
.mkt-window__url {
    margin-left: 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px; color: var(--color-text-tertiary);
}
.mkt-window__body { padding: 24px; }
.mkt-window__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.mkt-tile { padding: 14px; border: 1px solid var(--color-divider); border-radius: 8px; }
.mkt-tile__l { font-size: 11px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.mkt-tile__v { font-size: 24px; font-weight: 600; margin-top: 4px; }
.mkt-tile__s { font-size: 11px; color: var(--color-text-tertiary); margin-top: 4px; }
.mkt-window__ai {
    background: var(--color-bg-hover); border-left: 3px solid var(--color-accent);
    border-radius: 6px; padding: 14px; font-size: 13px; line-height: 1.55;
}
.mkt-window__ai p { margin: 6px 0 0; }
.mkt-window__ai strong { color: var(--color-text); }

/* Sections */
.mkt-section { padding: 72px 0; }
.mkt-section__title {
    text-align: center; font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.2; font-weight: 600; letter-spacing: -0.015em;
    margin: 0 0 12px;
}
.mkt-section__sub {
    text-align: center; max-width: 560px; margin: 0 auto 40px;
    color: var(--color-text-secondary); font-size: 16px; line-height: 1.5;
}
.mkt-eyebrow {
    color: var(--color-accent); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
    margin-bottom: 12px;
}
.mkt-eyebrow--center { text-align: center; }

/* Pain */
.mkt-pain { background: var(--color-bg-hover); }
.mkt-pain__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mkt-pain__card { background: #fff; border: 1px solid var(--color-divider); border-radius: 12px; padding: 28px 24px; }
.mkt-pain__num { color: var(--color-text-tertiary); font-family: ui-monospace, monospace; font-size: 12px; margin-bottom: 12px; }
.mkt-pain__card h3 { margin: 0 0 8px; font-size: 17px; }
.mkt-pain__card p { margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 1.55; }

/* Pillars */
.mkt-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mkt-pillar { padding: 24px 20px; border: 1px solid var(--color-divider); border-radius: 10px; transition: border-color 150ms ease; }
.mkt-pillar:hover { border-color: var(--color-text-tertiary); }
.mkt-pillar h3 { margin: 0 0 8px; font-size: 17px; }
.mkt-pillar p { margin: 0; color: var(--color-text-secondary); font-size: 13px; line-height: 1.55; }

/* Feature rows */
.mkt-feature-row__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mkt-feature-row--reverse .mkt-feature-row__inner { direction: rtl; }
.mkt-feature-row--reverse .mkt-feature-row__copy,
.mkt-feature-row--reverse .mkt-feature-row__shot { direction: ltr; }
.mkt-feature-row__copy h2 { font-size: clamp(22px, 2.8vw, 30px); line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 16px; }
.mkt-feature-row__copy p { color: var(--color-text-secondary); font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.mkt-feature-row__copy code { background: var(--color-bg-hover); padding: 2px 6px; border-radius: 4px; font-size: 12px; font-family: ui-monospace, monospace; }
.mkt-checklist { list-style: none; padding: 0; margin: 16px 0 0; }
.mkt-checklist li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 14px; color: var(--color-text-secondary); }
.mkt-checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--color-success); font-weight: 700; }

/* Mock table inside window */
.mkt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mkt-table th, .mkt-table td { padding: 8px 4px; border-bottom: 1px solid var(--color-divider); text-align: left; }
.mkt-table th { color: var(--color-text-tertiary); font-weight: 500; font-size: 11px; }
.mkt-table .r { text-align: right; font-weight: 500; }

/* Mock launch panel */
.mkt-launch__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mkt-launch__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mkt-launch__stat { padding: 10px; border: 1px solid var(--color-divider); border-radius: 6px; font-size: 12px; }
.mkt-launch__stat span { color: var(--color-text-tertiary); }
.mkt-launch__stat strong { display: block; font-size: 18px; margin-top: 2px; }
.mkt-launch__msg { font-size: 12px; color: var(--color-text-secondary); padding: 6px 10px; background: var(--color-bg-hover); border-radius: 4px; margin-bottom: 6px; }
.mkt-launch__msg em { color: var(--color-text-tertiary); font-style: normal; margin-right: 6px; }
.mkt-pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--color-bg-hover); color: var(--color-text-secondary); }
.mkt-pill--accent { background: var(--color-accent); color: #fff; }

/* AI section */
.mkt-ai { background: #1a1a1a; color: #fff; }
.mkt-ai .mkt-section__title, .mkt-ai .mkt-eyebrow { color: #fff; }
.mkt-ai .mkt-section__sub { color: rgba(255,255,255,0.7); }
.mkt-ai__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mkt-ai__card { padding: 22px 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; }
.mkt-ai__card h4 { margin: 0 0 8px; font-size: 15px; color: #fff; }
.mkt-ai__card p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.7); }

/* Trust */
.mkt-trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 800px; margin: 0 auto; }
.mkt-trust__grid h4 { margin: 0 0 6px; font-size: 16px; }
.mkt-trust__grid p { margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 1.55; }

/* Pricing */
.mkt-pricing { background: var(--color-bg-hover); }
.mkt-pricing__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1080px; margin: 0 auto; }
.mkt-price-card { position: relative; background: #fff; padding: 28px 22px; border: 1px solid var(--color-divider); border-radius: 12px; display: flex; flex-direction: column; }
.mkt-price-card--featured { border-color: #1a1a1a; box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.mkt-price-card__badge { position: absolute; top: -10px; right: 16px; background: #1a1a1a; color: #fff; font-size: 10px; padding: 3px 10px; border-radius: 999px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.mkt-price-card h3 { margin: 0 0 4px; font-size: 18px; }
.mkt-price-card__tag { color: var(--color-text-tertiary); font-size: 12px; margin: 0 0 16px; min-height: 30px; }
.mkt-price-card__price { font-size: 28px; font-weight: 600; margin-bottom: 18px; }
.mkt-price-card__price span { font-size: 13px; font-weight: 400; color: var(--color-text-tertiary); }
.mkt-price-card__features { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.mkt-price-card__features li { font-size: 13px; padding: 6px 0; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-divider); }
.mkt-price-card__features li:last-child { border-bottom: none; }

/* FAQ */
.mkt-faq__list { max-width: 720px; margin: 0 auto; }
.mkt-faq details { border-bottom: 1px solid var(--color-divider); padding: 16px 4px; }
.mkt-faq summary { cursor: pointer; font-weight: 500; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.mkt-faq summary::-webkit-details-marker { display: none; }
.mkt-faq summary::after { content: "+"; color: var(--color-text-tertiary); font-size: 20px; }
.mkt-faq details[open] summary::after { content: "-"; }
.mkt-faq p { margin: 12px 0 0; color: var(--color-text-secondary); font-size: 14px; line-height: 1.55; }

/* Final CTA */
.mkt-final-cta { background: #1a1a1a; color: #fff; text-align: center; padding: 80px 0; }
.mkt-final-cta h2 { font-size: clamp(28px, 4vw, 42px); margin: 0 0 12px; font-weight: 600; }
.mkt-final-cta p { color: rgba(255,255,255,0.7); margin: 0 0 28px; font-size: 16px; }
.mkt-final-cta .mkt-btn--primary { background: #fff; color: #1a1a1a; border-color: #fff; }
.mkt-final-cta .mkt-btn--primary:hover { background: #f0f0f0; }

/* Footer */
.mkt-footer { background: #fafafa; border-top: 1px solid var(--color-divider); padding: 56px 0 0; }
.mkt-footer__inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 2fr; gap: 56px; }
.mkt-footer__tag { color: var(--color-text-tertiary); font-size: 13px; margin: 8px 0 0; }
.mkt-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mkt-footer__cols h5 { font-size: 12px; margin: 0 0 12px; text-transform: uppercase; color: var(--color-text-tertiary); letter-spacing: 0.04em; }
.mkt-footer__cols a { display: block; color: var(--color-text-secondary); font-size: 14px; padding: 4px 0; text-decoration: none; }
.mkt-footer__cols a:hover { color: var(--color-text); }
.mkt-footer__bar { margin-top: 48px; padding: 20px 24px; border-top: 1px solid var(--color-divider); text-align: center; font-size: 12px; color: var(--color-text-tertiary); }

/* 6-pillar grid (3-col on desktop) */
.mkt-pillars--six { grid-template-columns: repeat(3, 1fr); }

/* 2-plan pricing grid centered */
.mkt-pricing__grid--two { grid-template-columns: repeat(2, 1fr); max-width: 720px; }

/* Marketplaces / channels */
.mkt-channels { background: #fafafa; }
.mkt-channels__grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
    max-width: 900px; margin: 0 auto;
}
.mkt-channel {
    padding: 14px 10px; border: 1px solid var(--color-divider);
    border-radius: 8px; background: #fff; text-align: center;
    font-size: 13px; color: var(--color-text-secondary);
    transition: border-color 150ms ease, color 150ms ease;
}
.mkt-channel:hover { border-color: var(--color-text-tertiary); color: var(--color-text); }
.mkt-channels__note { text-align: center; margin-top: 24px; font-size: 13px; color: var(--color-text-tertiary); }

/* Mobile */
@media (max-width: 768px) {
    .mkt-nav__inner { gap: 12px; }
    .mkt-nav__links { display: none; }
    .mkt-section { padding: 56px 0; }
    .mkt-hero { padding: 48px 0 24px; }
    .mkt-pain__grid,
    .mkt-pillars,
    .mkt-pillars--six,
    .mkt-ai__grid { grid-template-columns: 1fr; }
    .mkt-trust__grid { grid-template-columns: 1fr; }
    .mkt-pricing__grid,
    .mkt-pricing__grid--two { grid-template-columns: 1fr; }
    .mkt-feature-row__inner { grid-template-columns: 1fr; gap: 32px; }
    .mkt-feature-row--reverse .mkt-feature-row__inner { direction: ltr; }
    .mkt-window__row { grid-template-columns: repeat(2, 1fr); }
    .mkt-channels__grid { grid-template-columns: repeat(2, 1fr); }
    .mkt-footer__inner { grid-template-columns: 1fr; gap: 32px; }
    .mkt-footer__cols { grid-template-columns: repeat(3, 1fr); }
}