/* =============================================================
   demo.css — FireDoorApp live demo styles
   Three layers:
   1. .demo-nav / standalone chrome  — no marketing CSS dependency
   2. .demo-bar                       — legacy context bar (kept for demo.php)
   3. .demo-app-shell                 — light tenant-app component styles
   ============================================================= */

/* ─── 0. STANDALONE BODY + FONTS ────────────────────────────── */

/* Font faces (same as the tenant app, loaded separately here) */
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/inter-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('assets/fonts/space-grotesk-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

.demo-standalone-body {
    margin: 0;
    padding: 0;
    background: #07080b;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.demo-hub-main {
    flex: 1;
}

.demo-main {
    flex: 1;
    background: #f7f5f0;
}


/* ─── 0b. STANDALONE NAV ─────────────────────────────────────── */

.demo-nav {
    background: #07080b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 200;
    padding: 0 24px;
    flex-shrink: 0;
}

.demo-nav__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 56px;
    gap: 8px;
}

.demo-nav__brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 8px;
}

.demo-nav__logo {
    height: 36px;
    width: auto;
    display: block;
}

.demo-nav__tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}

.demo-nav__tabs::-webkit-scrollbar { display: none; }

.demo-nav__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

.demo-nav__back {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.demo-nav__back:hover { color: rgba(255, 255, 255, 0.75); }

@media (max-width: 600px) {
    .demo-nav { padding: 0 12px; }
    .demo-nav__back { display: none; }
    .demo-nav__logo { height: 30px; }
}

/* ─── 1. DEMO CHROME ─────────────────────────────────────────── */

.demo-bar {
    background: rgba(7, 8, 11, 0.94);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0 24px;
}

.demo-bar__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
}

.demo-bar__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    margin-right: 4px;
}

.demo-bar__features {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.demo-bar__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    border: none;
    background: transparent;
    cursor: pointer;
}

.demo-bar__tab:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.85);
}

.demo-bar__tab.is-active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.demo-bar__tab svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
    flex-shrink: 0;
}

.demo-bar__tab.is-active svg {
    opacity: 1;
}

.demo-bar__divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 8px;
    flex-shrink: 0;
}

.demo-bar__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    background: #d4a017;
    color: #07080b;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.demo-bar__cta:hover {
    background: #e0ae1f;
    transform: translateY(-1px);
}

.demo-bar__cta svg {
    width: 12px;
    height: 12px;
}

/* Demo main viewport wrapper */
.demo-main {
    background: #f7f5f0;
    min-height: calc(100dvh - 52px);
}

/* Demo footer CTA strip */
.demo-footer {
    background: #07080b;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 48px 24px;
    text-align: center;
}

.demo-footer__eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d4a017;
    margin-bottom: 16px;
}

.demo-footer__headline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    color: #f3f4f6;
    letter-spacing: -0.025em;
    margin-bottom: 12px;
}

.demo-footer__sub {
    font-size: 15px;
    color: rgba(243, 244, 246, 0.55);
    margin-bottom: 28px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.demo-footer__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.demo-footer__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 24px;
    border-radius: 10px;
    background: #d4a017;
    color: #07080b;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}

.demo-footer__btn-primary:hover {
    background: #e0ae1f;
    transform: translateY(-1px);
}

.demo-footer__btn-primary svg {
    width: 14px;
    height: 14px;
}

.demo-footer__btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 24px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.demo-footer__btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}


/* ─── 2. DEMO APP SHELL — TOKEN RESET ────────────────────────── */

.demo-app-shell {
    /* Core colour tokens */
    --canvas:        #f7f5f0;
    --surface-card:  #ffffff;
    --surface-subtle: #f2efe9;
    --surface-inset: #edeae3;
    --surface-deep:  #e5e1d8;
    --ink:           #1a1815;
    --ink-2:         #3d3a34;
    --ink-3:         #6b6458;
    --ink-4:         #9a9188;
    --accent:        #c49510;
    --accent-strong: #a97807;
    --accent-soft:   rgba(196,149,16,0.10);
    --accent-border: rgba(196,149,16,0.20);
    --success:       #1e7a45;
    --success-bg:    rgba(30,122,69,0.08);
    --success-border: rgba(30,122,69,0.15);
    --danger:        #b03030;
    --danger-bg:     rgba(176,48,48,0.07);
    --danger-border: rgba(176,48,48,0.18);
    --info:          #2563a8;
    --info-bg:       rgba(37,99,168,0.08);
    --info-border:   rgba(37,99,168,0.15);
    --rule:          rgba(26,24,21,0.08);
    --rule-strong:   rgba(26,24,21,0.14);

    /* Shadow scale */
    --shadow-sm:   0 1px 3px rgba(26,24,21,.06), 0 1px 2px rgba(26,24,21,.04);
    --shadow-card: 0 1px 4px rgba(26,24,21,.06), 0 0 0 1px rgba(26,24,21,.05);
    --shadow-md:   0 12px 28px rgba(26,24,21,.08), 0 2px 6px rgba(26,24,21,.05);
    --shadow-lg:   0 20px 48px rgba(26,24,21,.12), 0 4px 12px rgba(26,24,21,.07);

    /* Radius scale */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', sans-serif;

    /* Page gutter */
    --page-gutter: 28px;

    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Reset for elements inside the shell */
.demo-app-shell *, .demo-app-shell *::before, .demo-app-shell *::after {
    box-sizing: border-box;
}

.demo-app-shell a {
    color: inherit;
    text-decoration: none;
}


/* ─── 3. PAGE INNER WRAPPER ──────────────────────────────────── */

.demo-app-shell .demo-page-inner {
    max-width: 1400px;
    padding: 0 var(--page-gutter);
    margin: 0 auto;
}


/* ─── 4. BUTTONS ─────────────────────────────────────────────── */

.demo-app-shell .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.demo-app-shell .btn-primary {
    background: var(--ink);
    color: var(--surface-card);
    border-color: var(--ink);
}

.demo-app-shell .btn-primary:hover {
    background: var(--ink-2);
    border-color: var(--ink-2);
}

.demo-app-shell .btn-secondary {
    background: var(--surface-card);
    color: var(--ink-2);
    border-color: var(--rule-strong);
    box-shadow: var(--shadow-sm);
}

.demo-app-shell .btn-secondary:hover {
    background: var(--surface-subtle);
}

.demo-app-shell .btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.demo-app-shell .btn-sm {
    padding: 6px 11px;
    font-size: 12px;
}


/* ─── 5. PAGE HEADER ─────────────────────────────────────────── */

.demo-app-shell .ph-wrap {
    background: var(--surface-card);
    border-bottom: 1px solid var(--rule);
    padding: 22px var(--page-gutter) 18px;
}

.demo-app-shell .ph-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.demo-app-shell .ph-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}

.demo-app-shell .ph-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
}

.demo-app-shell .ph-sub {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 3px;
}

.demo-app-shell .ph-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


/* ─── 6. STATS STRIP ─────────────────────────────────────────── */

.demo-app-shell .stats-strip {
    display: flex;
    gap: 14px;
    padding: 20px var(--page-gutter);
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 1400px;
    margin: 0 auto;
}

.demo-app-shell .stats-strip::-webkit-scrollbar { display: none; }

.demo-app-shell .stat-card {
    background: var(--surface-card);
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 160px;
    min-width: 150px;
}

.demo-app-shell .stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.demo-app-shell .stat-icon svg {
    width: 16px;
    height: 16px;
}

.demo-app-shell .stat-icon--accent { background: var(--accent-soft); color: var(--accent); }
.demo-app-shell .stat-icon--success { background: var(--success-bg); color: var(--success); }
.demo-app-shell .stat-icon--danger { background: var(--danger-bg); color: var(--danger); }
.demo-app-shell .stat-icon--info { background: var(--info-bg); color: var(--info); }
.demo-app-shell .stat-icon--muted { background: var(--surface-inset); color: var(--ink-3); }

.demo-app-shell .stat-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.demo-app-shell .stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.demo-app-shell .stat-value {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
}

.demo-app-shell .stat-value--danger { color: var(--danger); }
.demo-app-shell .stat-value--success { color: var(--success); }
.demo-app-shell .stat-value--accent { color: var(--accent); }

.demo-app-shell .stat-foot {
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 2px;
}


/* ─── 7. STATUS CHIPS ─────────────────────────────────────────── */

.demo-app-shell .chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
}

.demo-app-shell .chip--sched {
    background: var(--info-bg);
    color: var(--info);
    border-color: var(--info-border);
}

.demo-app-shell .chip--prog {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-color: var(--accent-border);
}

.demo-app-shell .chip--done {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success-border);
}

.demo-app-shell .chip--cancelled {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger-border);
}

.demo-app-shell .chip--pending {
    background: var(--surface-inset);
    color: var(--ink-3);
    border-color: var(--rule-strong);
}


/* ─── 8. SEVERITY PILLS ──────────────────────────────────────── */

.demo-app-shell .sev {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.demo-app-shell .sev--high { background: var(--danger-bg); color: var(--danger); }
.demo-app-shell .sev--medium { background: rgba(196,149,16,0.12); color: var(--accent-strong); }
.demo-app-shell .sev--low { background: var(--success-bg); color: var(--success); }


/* ─── 9. TABS ─────────────────────────────────────────────────── */

.demo-app-shell .tabs {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    background: var(--surface-inset);
    border-radius: 9px;
    border: 1px solid var(--rule-strong);
}

.demo-app-shell .tab {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-4);
    cursor: pointer;
    border: none;
    background: transparent;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.demo-app-shell .tab:hover {
    color: var(--ink-2);
    background: rgba(26,24,21,0.04);
}

.demo-app-shell .tab.is-active {
    background: var(--surface-card);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.demo-app-shell .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    background: var(--surface-deep);
    color: var(--ink-3);
}

.demo-app-shell .tab.is-active .tab-badge {
    background: var(--surface-inset);
}

/* Tab panels */
.demo-app-shell .tab-panel { display: none; }
.demo-app-shell .tab-panel.is-active { display: block; }


/* ─── 10. TABLES ─────────────────────────────────────────────── */

.demo-app-shell .tbl-wrap {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.demo-app-shell .tbl {
    width: 100%;
    border-collapse: collapse;
}

.demo-app-shell .tbl thead th {
    padding: 10px 18px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-4);
    background: var(--surface-card);
    border-bottom: 1px solid var(--rule);
    text-align: left;
    white-space: nowrap;
}

.demo-app-shell .tbl thead th:first-child { padding-left: 20px; }
.demo-app-shell .tbl thead th:last-child { padding-right: 20px; }

.demo-app-shell .tbl tbody tr {
    border-bottom: 1px solid var(--rule);
    transition: background 0.1s;
}

.demo-app-shell .tbl tbody tr:last-child { border-bottom: none; }

.demo-app-shell .tbl tbody tr:hover { background: var(--surface-subtle); }

.demo-app-shell .tbl tbody td {
    padding: 12px 18px;
    font-size: 13px;
    color: var(--ink-3);
    vertical-align: middle;
}

.demo-app-shell .tbl tbody td:first-child { padding-left: 20px; }
.demo-app-shell .tbl tbody td:last-child { padding-right: 20px; }

.demo-app-shell .tbl-prop {
    font-weight: 500;
    color: var(--ink);
    display: block;
    font-size: 13px;
}

.demo-app-shell .tbl-addr {
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 2px;
    display: block;
}

.demo-app-shell .tbl-date {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
}

.demo-app-shell .tbl-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
}

.demo-app-shell .tbl-count--danger { color: var(--danger); }

.demo-app-shell .tbl-inspector {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--ink-2);
}

.demo-app-shell .tbl-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface-inset);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-3);
    flex-shrink: 0;
}

.demo-app-shell .tbl-avatar--jt { background: rgba(37,99,168,0.12); color: var(--info); }
.demo-app-shell .tbl-avatar--sc { background: rgba(30,122,69,0.12); color: var(--success); }
.demo-app-shell .tbl-avatar--mp { background: rgba(196,149,16,0.12); color: var(--accent-strong); }

.demo-app-shell .tbl-client {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    background: var(--surface-inset);
    color: var(--ink-2);
    border: 1px solid var(--rule-strong);
}

.demo-app-shell .tbl-empty {
    color: var(--ink-4);
    font-style: italic;
}

/* Overflow-scrollable table container */
.demo-app-shell .tbl-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-strong) transparent;
}


/* ─── 11. FILTER RAIL ────────────────────────────────────────── */

.demo-app-shell .filter-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px var(--page-gutter);
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.demo-app-shell .filter-rail__left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.demo-app-shell .filter-rail__summary {
    font-size: 12px;
    color: var(--ink-3);
}

.demo-app-shell .filter-rail__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    background: var(--surface-card);
    color: var(--ink-2);
    border: 1px solid var(--rule-strong);
    cursor: pointer;
    transition: background 0.15s;
    box-shadow: var(--shadow-sm);
}

.demo-app-shell .filter-rail__btn:hover { background: var(--surface-subtle); }

.demo-app-shell .filter-rail__btn svg {
    width: 13px;
    height: 13px;
    color: var(--ink-3);
}

.demo-app-shell .filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}


/* ─── 12. CONTENT GRID (list area) ──────────────────────────── */

.demo-app-shell .list-area {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--page-gutter) var(--page-gutter);
}


/* ─── 13. DASHBOARD — FIELD WORK CARD ───────────────────────── */

.demo-app-shell .field-work-card {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 14px;
}

.demo-app-shell .field-work-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    /* Columns are separated by a hairline from the card background */
    background: var(--rule);
}

.demo-app-shell .field-col {
    background: var(--surface-card);
    padding: 20px 22px;
}

.demo-app-shell .field-col__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.demo-app-shell .field-col__icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.demo-app-shell .field-col__icon svg { width: 14px; height: 14px; }

.demo-app-shell .field-col__icon--cal { background: var(--info-bg); color: var(--info); }
.demo-app-shell .field-col__icon--alert { background: var(--danger-bg); color: var(--danger); }
.demo-app-shell .field-col__icon--inst { background: var(--accent-soft); color: var(--accent-strong); }

.demo-app-shell .field-col__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.demo-app-shell .field-col__num {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 8px;
}

.demo-app-shell .field-col__main {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 3px;
}

.demo-app-shell .field-col__hint {
    font-size: 11px;
    color: var(--ink-4);
}

.demo-app-shell .field-col__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: var(--danger-bg);
    color: var(--danger);
}

.demo-app-shell .field-col__link {
    margin-top: 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.demo-app-shell .field-col__link svg { width: 11px; height: 11px; }


/* ─── 14. DASHBOARD — QUICK ACCESS ──────────────────────────── */

.demo-app-shell .qa-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

.demo-app-shell .qa-card {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: default;
    transition: box-shadow 0.15s;
}

.demo-app-shell .qa-card:hover { box-shadow: var(--shadow-md); }

.demo-app-shell .qa-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.demo-app-shell .qa-icon svg { width: 16px; height: 16px; }
.demo-app-shell .qa-icon--insp { background: var(--info-bg); color: var(--info); }
.demo-app-shell .qa-icon--build { background: var(--accent-soft); color: var(--accent-strong); }
.demo-app-shell .qa-icon--rem { background: var(--danger-bg); color: var(--danger); }

.demo-app-shell .qa-body {
    flex: 1;
    min-width: 0;
}

.demo-app-shell .qa-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-app-shell .qa-sub {
    font-size: 11px;
    color: var(--ink-4);
}

.demo-app-shell .qa-arrow {
    color: var(--ink-4);
    flex-shrink: 0;
}
.demo-app-shell .qa-arrow svg { width: 14px; height: 14px; }


/* ─── 15. DASHBOARD — TEAM GRID ──────────────────────────────── */

.demo-app-shell .team-card {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 20px 22px;
}

.demo-app-shell .team-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.demo-app-shell .team-card-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.demo-app-shell .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.demo-app-shell .team-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid var(--rule);
    background: var(--surface-subtle);
}

.demo-app-shell .team-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.demo-app-shell .team-avatar--owner { background: rgba(196,149,16,0.15); color: var(--accent-strong); }
.demo-app-shell .team-avatar--insp1 { background: rgba(37,99,168,0.12); color: var(--info); }
.demo-app-shell .team-avatar--insp2 { background: rgba(30,122,69,0.12); color: var(--success); }

.demo-app-shell .team-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}

.demo-app-shell .team-role {
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 1px;
}

.demo-app-shell .team-status {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
}

.demo-app-shell .team-status--away { background: var(--surface-deep); }


/* ─── 16. INSPECTION SHOW HEADER ─────────────────────────────── */

.demo-app-shell .insp-show-header {
    background: var(--surface-card);
    border-bottom: 1px solid var(--rule);
    padding: 18px var(--page-gutter);
}

.demo-app-shell .insp-show-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.demo-app-shell .insp-show-header__back {
    font-size: 12px;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.demo-app-shell .insp-show-header__back svg { width: 12px; height: 12px; }

.demo-app-shell .insp-show-header__prop {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.demo-app-shell .insp-show-header__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.demo-app-shell .insp-show-header__meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--ink-3);
}

.demo-app-shell .insp-show-header__meta-item svg { width: 13px; height: 13px; color: var(--ink-4); }


/* ─── 17. KANBAN BOARD ───────────────────────────────────────── */

.demo-app-shell .kanban {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 0 var(--page-gutter) var(--page-gutter);
    max-width: 1400px;
    margin: 0 auto;
}

.demo-app-shell .kanban-lane {
    background: var(--surface-subtle);
    border-radius: var(--radius-md);
    border: 1px solid var(--rule);
    overflow: hidden;
}

.demo-app-shell .kanban-lane__head {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--rule);
    background: var(--surface-card);
}

.demo-app-shell .kanban-lane__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.demo-app-shell .kanban-lane__count {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-4);
    background: var(--surface-inset);
    padding: 1px 6px;
    border-radius: 100px;
}

.demo-app-shell .kanban-cards {
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
}

.demo-app-shell .kanban-card {
    background: var(--surface-card);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    padding: 13px 14px;
    cursor: default;
    transition: box-shadow 0.15s, transform 0.1s;
}

.demo-app-shell .kanban-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.demo-app-shell .kanban-card__comp {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}

.demo-app-shell .kanban-card__prop {
    font-size: 11px;
    color: var(--ink-3);
    margin-bottom: 8px;
    display: block;
}

.demo-app-shell .kanban-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.demo-app-shell .kanban-card__assignee {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--ink-3);
}

.demo-app-shell .kanban-card__assignee-av {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
}

.demo-app-shell .kanban-card__date {
    font-size: 10px;
    color: var(--ink-4);
}

.demo-app-shell .kanban-card__date--overdue {
    color: var(--danger);
    font-weight: 600;
}


/* ─── 18. PHONE FRAME (capture demo) ─────────────────────────── */

.demo-phone-section {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px var(--page-gutter, 24px);
}

.demo-phone-text {
    padding-top: 16px;
}

.demo-phone-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent, #c49510);
    margin-bottom: 12px;
}

.demo-phone-headline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    color: var(--ink, #1a1815);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 16px;
}

.demo-phone-body {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2, #3d3a34);
    margin-bottom: 24px;
}

.demo-phone-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.demo-phone-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-2, #3d3a34);
    line-height: 1.5;
}

.demo-phone-features li::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--success-bg, rgba(30,122,69,0.08));
    flex-shrink: 0;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8l3 3 6-6' stroke='%231e7a45' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* The phone frame itself */
.demo-phone-frame {
    width: 340px;
    margin: 0 auto;
    flex-shrink: 0;
    position: relative;
}

.demo-phone-frame__device {
    background: #1a1a1a;
    border-radius: 44px;
    padding: 12px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 30px 80px rgba(0,0,0,0.45),
        0 8px 20px rgba(0,0,0,0.2);
}

.demo-phone-frame__screen {
    border-radius: 34px;
    overflow: hidden;
    background: #f7f5f0;
    position: relative;
    aspect-ratio: 9/19;
}

.demo-phone-frame__notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 26px;
    background: #1a1a1a;
    border-radius: 100px;
    z-index: 10;
}

/* Content inside the phone screen */
.demo-phone-frame__content {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    line-height: 1.4;
    color: #1a1815;
    -webkit-font-smoothing: antialiased;
}

/* Setup bar — matches icm-mobile-setupbar */
.demo-capture-setupbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 38px 10px 8px;
    background: #f7f5f0;
    border-bottom: 1px solid rgba(26,24,21,0.08);
}

.demo-capture-setupbar__close {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #9a9188;
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
}

.demo-capture-setupbar__close svg { width: 11px; height: 11px; }

.demo-capture-setupbar__copy {
    min-width: 0;
}

.demo-capture-setupbar__eyebrow {
    margin: 0;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9a9188;
}

.demo-capture-setupbar__title {
    margin: 1px 0 0;
    font-size: 10px;
    font-weight: 700;
    color: #1a1815;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-capture-setupbar__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 100px;
    font-size: 7px;
    font-weight: 600;
    color: #1e7a45;
    background: rgba(30,122,69,0.1);
    white-space: nowrap;
}

.demo-capture-setupbar__pill-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #1e7a45;
}

/* Component bar — matches icm-mobile-compbar */
.demo-capture-compbar {
    background: #1a1815;
    color: #ffffff;
}

.demo-capture-compbar__row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 6px 4px;
}

.demo-capture-compbar__nav {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    flex-shrink: 0;
}

.demo-capture-compbar__nav svg { width: 11px; height: 11px; }

.demo-capture-compbar__copy {
    flex: 1;
    min-width: 0;
}

.demo-capture-compbar__eyebrow {
    margin: 0;
    font-size: 7px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.demo-capture-compbar__title {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-capture-compbar__count {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    flex-shrink: 0;
}

.demo-capture-compbar__save {
    font-size: 8px;
    font-weight: 600;
    color: #c49510;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    flex-shrink: 0;
}

/* Progress bar */
.demo-capture-progress {
    height: 2px;
    background: rgba(255,255,255,0.12);
}

.demo-capture-progress__fill {
    height: 100%;
    background: #c49510;
    border-radius: 1px;
    transition: width 0.3s ease;
}

/* Capture body */
.demo-capture-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f2efe9;
}

.demo-capture-body::-webkit-scrollbar { display: none; }

/* Status banner — matches icm-mobile-statusbanner */
.demo-capture-statusbanner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.05);
}

.demo-capture-statusbanner__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-capture-statusbanner__icon svg { width: 18px; height: 18px; }

.demo-capture-statusbanner--pass { border-left: 3px solid #1e7a45; }
.demo-capture-statusbanner--pass .demo-capture-statusbanner__icon { color: #1e7a45; }
.demo-capture-statusbanner--fail { border-left: 3px solid #b03030; }
.demo-capture-statusbanner--fail .demo-capture-statusbanner__icon { color: #b03030; }
.demo-capture-statusbanner--na { border-left: 3px solid #9a9188; }
.demo-capture-statusbanner--na .demo-capture-statusbanner__icon { color: #9a9188; }

.demo-capture-statusbanner__copy strong {
    display: block;
    font-size: 9px;
    font-weight: 700;
    color: #1a1815;
}

.demo-capture-statusbanner__copy p {
    margin: 1px 0 0;
    font-size: 7.5px;
    color: #9a9188;
    line-height: 1.35;
}

/* Toggle grid — matches icm-mobile-togglegrid */
.demo-capture-togglegrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
}

.demo-capture-togglebtn {
    padding: 8px 4px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    border: 1.5px solid rgba(26,24,21,0.1);
    cursor: pointer;
    background: #ffffff;
    color: #6b6458;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.demo-capture-togglebtn--pass-active,
.demo-capture-togglebtn--fail-active,
.demo-capture-togglebtn--na-active {
    background: #1a1815;
    color: #ffffff;
    border-color: #1a1815;
    box-shadow: 0 4px 12px rgba(26,24,21,0.18);
}

/* Panel — matches icm-mobile-panel */
.demo-capture-panel {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.05);
    padding: 10px 12px;
}

.demo-capture-panel__header {
    margin-bottom: 6px;
}

.demo-capture-panel__eyebrow {
    margin: 0;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9a9188;
}

.demo-capture-panel__title {
    margin: 1px 0 0;
    font-size: 9px;
    font-weight: 600;
    color: #1a1815;
}

/* Severity readout */
.demo-capture-severity-readout {
    display: flex;
    align-items: center;
    gap: 8px;
}

.demo-capture-severity-pill {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}

.demo-capture-severity-pill--high {
    background: rgba(176,48,48,0.1);
    color: #b03030;
    border: 1px solid rgba(176,48,48,0.2);
}

.demo-capture-severity-pill--medium {
    background: rgba(196,149,16,0.1);
    color: #a97807;
    border: 1px solid rgba(196,149,16,0.2);
}

.demo-capture-severity-pill--low {
    background: rgba(30,122,69,0.08);
    color: #1e7a45;
    border: 1px solid rgba(30,122,69,0.15);
}

.demo-capture-severity-note {
    margin: 0;
    font-size: 7.5px;
    color: #9a9188;
}

/* Chip grid */
.demo-capture-chipgrid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.demo-capture-chip {
    padding: 4px 9px;
    border-radius: 100px;
    font-size: 8px;
    font-weight: 500;
    background: #ffffff;
    color: #3d3a34;
    border: 1px solid rgba(26,24,21,0.12);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.demo-capture-chip--active {
    background: #1a1815;
    color: #ffffff;
    border-color: #1a1815;
    font-weight: 600;
}


/* ─── 19. DEMO HUB PAGE ──────────────────────────────────────── */

/* (Hub page uses the marketing layout — no .demo-app-shell wrapper needed) */

.demo-hub-section {
    padding: 80px 24px 100px;
    max-width: 1200px;
    margin: 0 auto;
}

.demo-hub-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lp-color-brand, #d4a017);
    margin-bottom: 16px;
    text-align: center;
}

.demo-hub-headline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 700;
    color: var(--lp-color-ink-strong, #f3f4f6);
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 16px;
    text-wrap: balance;
}

.demo-hub-sub {
    font-size: 17px;
    color: var(--lp-color-ink-muted, #6b6458);
    text-align: center;
    max-width: 520px;
    margin: 0 auto 56px;
    line-height: 1.65;
}

.demo-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.demo-hub-card {
    display: flex;
    flex-direction: column;
    background: var(--lp-color-surface, rgba(11,13,20,0.86));
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    padding: 28px 28px 24px;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
    overflow: hidden;
}

.demo-hub-card:hover {
    border-color: rgba(212,160,23,0.3);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}

.demo-hub-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: rgba(212,160,23,0.12);
    color: #d4a017;
}

.demo-hub-card__icon svg { width: 20px; height: 20px; }

.demo-hub-card__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--lp-color-ink-strong, #f3f4f6);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.demo-hub-card__desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--lp-color-ink-muted, #9a9188);
    flex: 1;
    margin-bottom: 20px;
}

.demo-hub-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #d4a017;
}

.demo-hub-card__cta svg { width: 13px; height: 13px; transition: transform 0.15s; }
.demo-hub-card:hover .demo-hub-card__cta svg { transform: translateX(3px); }

.demo-hub-trust {
    text-align: center;
    margin-top: 48px;
    font-size: 13px;
    color: rgba(243,244,246,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.demo-hub-trust span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.demo-hub-trust svg {
    width: 14px;
    height: 14px;
    color: rgba(243,244,246,0.25);
}


/* ─── 20. CONTENT SECTION WRAPPERS ──────────────────────────── */

.demo-app-shell .section-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px var(--page-gutter);
}

.demo-app-shell .section-head {
    margin-bottom: 12px;
}

.demo-app-shell .section-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.demo-app-shell .section-sub {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
}


/* ─── 21. RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 900px) {
    .demo-bar {
        padding: 0 12px;
    }

    .demo-bar__label {
        display: none;
    }

    .demo-bar__tab {
        padding: 5px 10px;
        font-size: 12px;
    }

    .demo-app-shell {
        --page-gutter: 16px;
    }

    .demo-app-shell .field-work-cols {
        grid-template-columns: 1fr;
    }

    .demo-app-shell .qa-list {
        grid-template-columns: 1fr;
    }

    .demo-app-shell .kanban {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 16px 16px;
    }

    .demo-phone-section {
        grid-template-columns: 1fr;
        padding: 32px 16px;
    }

    .demo-phone-frame {
        order: -1;
        width: 280px;
        margin: 0 auto;
    }

    .demo-hub-grid {
        grid-template-columns: 1fr;
    }

    .demo-hub-section {
        padding: 48px 16px 64px;
    }

    .demo-app-shell .stats-strip {
        padding: 16px var(--page-gutter);
    }

    .demo-app-shell .stat-card {
        flex: 0 0 min(200px, 72vw);
    }

    .demo-app-shell .filter-rail {
        padding: 12px var(--page-gutter);
    }

    .demo-app-shell .ph-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .demo-app-shell .tbl-scroll {
        margin: 0 calc(-1 * var(--page-gutter));
        padding: 0 var(--page-gutter);
        width: calc(100% + 2 * var(--page-gutter));
    }
}

@media (max-width: 600px) {
    .demo-bar__divider { display: none; }

    .demo-bar__tab span { display: none; }

    .demo-bar__tab {
        padding: 5px 8px;
    }

    .demo-app-shell .kanban {
        grid-template-columns: 1fr;
    }
}


/* ─── 20a. INSPECTIONS EXPLORE BANNER ─────────────────────── */

/* Every data row in the inspections demo table is clickable — navigates to demo/capture */
.demo-row-link {
    cursor: pointer;
    transition: background 0.12s;
}

.demo-row-link:hover {
    background: rgba(196, 149, 16, 0.06);
}

.demo-hint-row {
    cursor: pointer;
}

.demo-hint-row:hover {
    background: rgba(196, 149, 16, 0.08);
}

a.demo-explore-banner,
a.demo-explore-banner:visited {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1a1815 0%, #2d2820 100%);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(26, 24, 21, 0.18), 0 0 0 1px rgba(196, 149, 16, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.demo-explore-banner:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 36px rgba(26, 24, 21, 0.24), 0 0 0 1px rgba(196, 149, 16, 0.35);
    color: #ffffff;
    text-decoration: none;
}

.demo-explore-banner__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(196, 149, 16, 0.15);
    color: #c49510;
}

.demo-explore-banner__icon svg {
    width: 22px;
    height: 22px;
}

.demo-explore-banner__copy {
    flex: 1;
    min-width: 0;
}

.demo-explore-banner__copy strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.demo-explore-banner__copy span {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
}

.demo-explore-banner__arrow {
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 300;
    color: #c49510;
    animation: demo-arrow-bounce 1.6s ease-in-out infinite;
}

@keyframes demo-arrow-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}


/* ─── 20b. TAB GUIDANCE BANNER ────────────────────────────── */

.page-section--inspection-show .demo-tab-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    margin: 12px 28px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1a1815 0%, #2d2820 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(26, 24, 21, 0.1), 0 0 0 1px rgba(196, 149, 16, 0.15);
}

@media (max-width: 900px) {
    .page-section--inspection-show .demo-tab-banner {
        margin: 8px 16px 12px;
        padding: 10px 14px;
        gap: 10px;
    }
}

.demo-tab-banner__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(196, 149, 16, 0.15);
    color: #c49510;
}

.demo-tab-banner__icon svg { width: 20px; height: 20px; }

.demo-tab-banner__copy { flex: 1; min-width: 0; }

.demo-tab-banner__copy strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.demo-tab-banner__copy span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
}

.demo-tab-banner__close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}

.demo-tab-banner__close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

/* ─── 20c. QR LABEL SHOWCASE ─────────────────────────────── */

.demo-qr-showcase {
    margin: 12px 0 16px;
    background: var(--surface-card, #ffffff);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(196, 149, 16, 0.18);
    overflow: hidden;
}

.demo-qr-showcase__preview {
    padding: 24px;
    border-bottom: 1px solid var(--rule, rgba(0,0,0,0.07));
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-inset, #edeae3);
}

.demo-qr-showcase__frame {
    border: 2px dashed rgba(0,0,0,0.11);
    border-radius: 10px;
    padding: 6px;
    background: var(--surface-card, #ffffff);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    max-width: 280px;
    width: 100%;
}

.demo-qr-showcase__controls {
    padding: 18px;
}

.demo-qr-showcase__name {
    color: var(--ink, #1a1815);
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.demo-qr-showcase__helper {
    color: var(--ink-4, #9a9188);
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.55;
    margin: 0 0 14px;
}

.demo-qr-showcase__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.demo-qr-showcase__field-label {
    color: var(--ink-4, #9a9188);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.demo-qr-showcase__field-value {
    padding: 8px 12px;
    background: var(--surface-inset, #edeae3);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 8px;
    color: var(--ink, #1a1815);
    font-size: 13px;
    font-weight: 500;
}

.demo-qr-showcase__actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}


/* ─── 20. CAPTURE PAGE POLISH ─────────────────────────────── */

/* Phone section inside the show page tab panels */
.page-section--inspection-show .demo-phone-section {
    padding: 32px 28px;
    max-width: none;
    gap: 56px;
    grid-template-columns: 1fr 360px;
    align-items: center;
}

.page-section--inspection-show .demo-phone-text {
    padding-top: 0;
}

.page-section--inspection-show .demo-phone-headline {
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.2;
    margin-bottom: 16px;
}

.page-section--inspection-show .demo-phone-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-3, #6b6458);
    margin-bottom: 28px;
}

.page-section--inspection-show .demo-phone-features li {
    font-size: 13.5px;
    line-height: 1.5;
    padding: 5px 0;
}

/* Doors table section */
.demo-capture-doors-below {
    padding: 28px 28px 32px;
    border-top: 1px solid var(--rule, rgba(26,24,21,0.08));
}

.demo-capture-doors-below .ipi-result-meta {
    margin-bottom: 16px;
}

.demo-capture-doors-below .ipi-table-wrap {
    border: 1px solid var(--rule, rgba(26,24,21,0.08));
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
}

.demo-capture-doors-below .ipi-table {
    margin: 0;
}

.demo-capture-doors-below .ipi-table th {
    background: var(--surface-subtle, #f2efe9);
}

/* Phone frame refinement */
.page-section--inspection-show .demo-phone-frame {
    width: 320px;
}

.page-section--inspection-show .demo-phone-frame__device {
    border-radius: 40px;
    padding: 10px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 24px 64px rgba(26,24,21,0.18),
        0 8px 20px rgba(26,24,21,0.08);
}

@media (max-width: 900px) {
    .page-section--inspection-show .demo-phone-section {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 20px 16px;
    }

    .page-section--inspection-show .demo-phone-frame {
        width: 300px;
        margin: 0 auto;
    }

    .demo-capture-doors-below {
        padding: 20px 16px 24px;
    }
}


/* ─── 20d. DEMO LOGO PLACEHOLDER ──────────────────────────── */

/* "Your Logo" placeholder with dotted border — replaces the FireDoorApp wordmark
   on demo pages so visitors can imagine their own brand here. */
.topbar .demo-logo-placeholder {
    text-decoration: none;
}

.topbar .demo-logo-placeholder__inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border: 1.5px dashed rgba(154, 145, 136, 0.55);
    border-radius: 8px;
    background: rgba(247, 245, 240, 0.4);
    transition: border-color 0.15s, background 0.15s;
}

.topbar .demo-logo-placeholder:hover .demo-logo-placeholder__inner {
    border-color: var(--accent, #c49510);
    background: rgba(196, 149, 16, 0.06);
}

.topbar .demo-logo-placeholder__label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-4, #9a9188);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .topbar .demo-logo-placeholder__inner {
        height: 32px;
        padding: 0 12px;
    }
    .topbar .demo-logo-placeholder__label {
        font-size: 11px;
    }
}

/* Same placeholder inside the cp demo nav brand area */
.cp-nav .demo-logo-placeholder {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.cp-nav .demo-logo-placeholder__inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    border: 1.5px dashed rgba(154, 145, 136, 0.55);
    border-radius: 8px;
    background: rgba(247, 245, 240, 0.4);
}
.cp-nav .demo-logo-placeholder__label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-4, #9a9188);
    white-space: nowrap;
}
@media (max-width: 768px) {
    .cp-nav .demo-logo-placeholder__inner {
        height: 28px;
        padding: 0 10px;
    }
    .cp-nav .demo-logo-placeholder__label {
        font-size: 10.5px;
    }
}


/* ─── 20e. DEMO TOPBAR USER MENU (mobile) ─────────────────── */

/* On mobile widths, keep the full username visible alongside the avatar.
   Use min-width: 0 + flex shrinking + ellipsis so long names don't overflow. */
@media (max-width: 768px) {
    .topbar .top-bar-user-menu {
        min-width: 0;
        flex-shrink: 1;
    }
    .topbar .tb-user {
        min-width: 0;
        max-width: 100%;
        padding: 4px 8px;
        gap: 6px;
    }
    .topbar .tb-user .tb-uname {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12.5px;
    }
    .topbar .tb-user .tb-chevron {
        display: inline-flex;
        flex-shrink: 0;
    }
    .topbar .tb-user .tb-avatar {
        flex-shrink: 0;
    }
}


/* ─── 21. DEMO MOBILE NAV TRIGGER (tablet + mobile) ──────────── */
/* The real navigation.js removes [hidden] below 1367px to show the hamburger,
   but mobile.css only styles it visible at <= 768px. Bridge the 769-1366 gap
   here so the hamburger is actually clickable across all mobile/tablet sizes. */
@media (max-width: 1366px) {
    .topbar .mobile-nav-trigger:not([hidden]) {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        margin-right: 8px;
        gap: 4px;
        border-radius: 10px;
        border: 1px solid var(--rule-strong, rgba(26,24,21,0.14));
        background: var(--surface-card, #ffffff);
        box-shadow: var(--shadow-sm, 0 1px 3px rgba(26,24,21,0.06), 0 1px 2px rgba(26,24,21,0.04));
        cursor: pointer;
        flex-shrink: 0;
        z-index: 1650;
    }
    .topbar .mobile-nav-trigger:not([hidden]) span {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--ink-2, #3d3a34);
        border-radius: 1px;
    }
}


/* ─── 22. DEMO CAPTURE PAGE — TABLET/MOBILE OPTIMISATION ────── */

/* Capture page demo-specific mobile rules.
   The real inspection_show.css handles header collapse, layout-tags-grid stacking,
   rem-sched-grid, qr-pin-row, tl-controls etc. via [data-tab-panel="..."] selectors
   at @media (max-width: 1024px) — these now match because the demo panels have
   the data-tab-panel attribute. We only need to handle the demo-only components below. */

/* Strip the .content side padding on the inspection-show demo page at all viewports
   so the header is full width to the viewport edges (matches real app behaviour
   where the desktop :has() rule does this above 1025px — extend to all widths). */
.content:has(.page-section--inspection-show) {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 1024px) {
    /* QR showcase visual frame → fits viewport */
    .page-section--inspection-show .demo-qr-showcase__frame {
        max-width: 100%;
    }
    .page-section--inspection-show .demo-qr-showcase__actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    /* QR showcase action buttons → full width */
    .page-section--inspection-show .demo-qr-showcase__actions .btn {
        flex: 1 1 100%;
    }
    .page-section--inspection-show .demo-qr-showcase__preview {
        padding: 16px;
    }
    .page-section--inspection-show .demo-qr-showcase__controls {
        padding: 14px;
    }
    .page-section--inspection-show .floorplan-gallery {
        gap: 12px;
    }
    /* Tab guidance banner — extra tight on phone widths */
    .page-section--inspection-show .demo-tab-banner {
        flex-wrap: wrap;
    }
    .page-section--inspection-show .demo-tab-banner__copy {
        flex: 1 1 100%;
        order: 2;
    }
}


/* ─── 23. UNIFIED DEMO TABLE POLISH ─────────────────────────── */
/* Every demo page that uses the .ipi-table primitive should look identical:
   same hover state, same row dividers, same density, same typography. The
   inspections.css file already styles .inspections-page .ipi-table for the
   inspections demo, but the other demo pages (jobs, properties, clients, team,
   rams, quotes, invoices) load only their page-specific CSS — which gives them
   slight visual drift. This block re-asserts the polish on every demo table so
   they read as one consistent surface. */

/* Reset row backgrounds to white for the cleaner card-on-canvas look */
.tenant-app-shell .inspections-page .ipi-table-wrap {
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(26, 24, 21, 0.06), 0 1px 2px rgba(26, 24, 21, 0.04));
    overflow: hidden;
}

/* Header row: warm subtle background, small uppercase labels */
.tenant-app-shell .inspections-page .ipi-table thead th {
    background: var(--surface-subtle, #f2efe9);
    color: var(--ink-3, #6b6458);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
    text-align: left;
}

/* Body cells: consistent padding + bottom rule between rows */
.tenant-app-shell .inspections-page .ipi-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--rule, rgba(26, 24, 21, 0.06));
    vertical-align: top;
    font-size: 13.5px;
    color: var(--ink-2, #3d3a34);
    line-height: 1.5;
}

/* Last row: no bottom border (border-radius handles the rounded edge) */
.tenant-app-shell .inspections-page .ipi-table tbody tr:last-child td {
    border-bottom: none;
}

/* Hover: subtle warm tint across the row */
.tenant-app-shell .inspections-page .ipi-table tbody tr:hover td {
    background: rgba(196, 149, 16, 0.04);
}

/* Cells that contain a clickable link (rows with data-* hooks) get pointer cursor */
.tenant-app-shell .inspections-page .ipi-table tbody tr[data-jobs-client-link],
.tenant-app-shell .inspections-page .ipi-table tbody tr[data-properties-row],
.tenant-app-shell .inspections-page .ipi-table tbody tr[data-client-row],
.tenant-app-shell .inspections-page .ipi-table tbody tr[data-team-member-row],
.tenant-app-shell .inspections-page .ipi-table tbody tr.demo-row-link {
    cursor: pointer;
    transition: background 0.12s ease;
}

/* Identity / primary cell: name + sub typography is consistent */
.tenant-app-shell .inspections-page .ipi-table tbody td .ipi-td-insp,
.tenant-app-shell .inspections-page .ipi-table tbody td .jobs-client-table__stack,
.tenant-app-shell .inspections-page .ipi-table tbody td .clients-row-identity__copy,
.tenant-app-shell .inspections-page .ipi-table tbody td .team-row-identity__copy,
.tenant-app-shell .inspections-page .ipi-table tbody td .inv-row-secondary,
.tenant-app-shell .inspections-page .ipi-table tbody td .qpi-quote-cell,
.tenant-app-shell .inspections-page .ipi-table tbody td .qpi-client-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tenant-app-shell .inspections-page .ipi-table tbody td .ipi-td-insp-name,
.tenant-app-shell .inspections-page .ipi-table tbody td .jobs-client-table__stack > strong:first-child,
.tenant-app-shell .inspections-page .ipi-table tbody td .clients-row-identity__copy > strong,
.tenant-app-shell .inspections-page .ipi-table tbody td .team-row-identity__copy > strong,
.tenant-app-shell .inspections-page .ipi-table tbody td .inv-row-secondary > span:first-child,
.tenant-app-shell .inspections-page .ipi-table tbody td .qpi-quote-number,
.tenant-app-shell .inspections-page .ipi-table tbody td .inv-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #1a1815);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* The "muted" sub-line (address, contact role, etc.) is uniformly small + grey */
.tenant-app-shell .inspections-page .ipi-table tbody td .ipi-td-insp-sub {
    font-size: 12px;
    color: var(--ink-4, #9a9188);
    line-height: 1.45;
}

/* Status / source / role pills sit comfortably with consistent vertical spacing */
.tenant-app-shell .inspections-page .ipi-table tbody td .ipi-chip,
.tenant-app-shell .inspections-page .ipi-table tbody td .ipi-status-pill,
.tenant-app-shell .inspections-page .ipi-table tbody td .source-pill,
.tenant-app-shell .inspections-page .ipi-table tbody td .badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Action column: right-aligned, compact buttons, consistent spacing */
.tenant-app-shell .inspections-page .ipi-table tbody td.ipi-actions {
    text-align: right;
    white-space: nowrap;
    padding-top: 12px;
    padding-bottom: 12px;
}

.tenant-app-shell .inspections-page .ipi-table tbody td.ipi-actions .btn,
.tenant-app-shell .inspections-page .ipi-table tbody td.ipi-actions .ipi-row-action-btn {
    min-height: 32px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
}

/* Multiple action buttons cluster with consistent gap */
.tenant-app-shell .inspections-page .ipi-table tbody td.ipi-actions > div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

/* Right-aligned numeric columns (Total, etc.) keep their alignment */
.tenant-app-shell .inspections-page .ipi-table tbody td.text-right,
.tenant-app-shell .inspections-page .ipi-table thead th.text-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Header row sticks to the table card top edge cleanly */
.tenant-app-shell .inspections-page .ipi-table thead tr:first-child th:first-child {
    border-top-left-radius: var(--radius-md, 12px);
}
.tenant-app-shell .inspections-page .ipi-table thead tr:first-child th:last-child {
    border-top-right-radius: var(--radius-md, 12px);
}

/* Table itself: no double borders, full width inside the wrap */
.tenant-app-shell .inspections-page .ipi-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    margin: 0;
}

/* Mobile (≤900px): the inspections.css card-ification rules already apply via
   the .inspections-page wrapper. Reset wrap border so cards float on canvas. */
@media (max-width: 900px) {
    .tenant-app-shell .inspections-page .ipi-table-wrap {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }
    .tenant-app-shell .inspections-page .ipi-table thead th {
        background: transparent;
    }
    .tenant-app-shell .inspections-page .ipi-table tbody tr:hover td {
        background: transparent;
    }
}


/* ─── 24. DEMO TEAM TABLE POLISH ────────────────────────────── */

/* The real team.css already styles the team-col-select column at 48px wide,
   the last actions column at 104px wide, and the team-row-identity layout.
   These rules just handle a couple of demo-specific touches that the real
   page has via interactivity (hover state on the row, inactive opacity). */

.tenant-app-shell .team-page .ipi-table tbody tr.team-row--inactive {
    opacity: 0.62;
}

.tenant-app-shell .team-page .ipi-table .team-col-select input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent, #c49510);
}


/* ─── 25. DEMO BUTTON COLOR ENFORCEMENT ───────────────────────────
   ONLY targets actual interactive button elements. Leaves KPI cards,
   status pills, chips, dots, badges, avatars, and every other display
   indicator alone — those should keep their production colour states.

   The root cause: every "non-functional" button on the demo carries
   the `disabled` attribute, which triggers style.css:3253-3288 and
   paints btn-primary[disabled] as washed-out dark and btn-secondary
   [disabled] as beige #edeae3 with grey text. These overrides force
   them back to solid black or solid white (matching the enabled
   styling) so the demo never shows a greyed-out button. */

/* Primary buttons — solid black, white text, in any state */
.tenant-app-shell .btn-primary,
.tenant-app-shell .btn-primary:disabled,
.tenant-app-shell .btn-primary[disabled],
.tenant-app-shell .btn-primary-modern,
.tenant-app-shell .btn-primary-modern:disabled,
.tenant-app-shell .btn-primary-modern[disabled] {
    background: #1a1815 !important;
    border-color: #1a1815 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Secondary / outline / light buttons — solid white, dark text */
.tenant-app-shell .btn-secondary,
.tenant-app-shell .btn-secondary:disabled,
.tenant-app-shell .btn-secondary[disabled],
.tenant-app-shell .btn-outline,
.tenant-app-shell .btn-outline:disabled,
.tenant-app-shell .btn-outline[disabled],
.tenant-app-shell .btn-secondary-outline,
.tenant-app-shell .btn-secondary-outline:disabled,
.tenant-app-shell .btn-secondary-outline[disabled],
.tenant-app-shell .btn-light,
.tenant-app-shell .btn-light:disabled,
.tenant-app-shell .btn-light[disabled] {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
    color: #1a1815 !important;
    opacity: 1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* ipi-* primitive buttons (page header + filter rail + row actions) */
.tenant-app-shell .ipi-ph-primary,
.tenant-app-shell .ipi-ph-primary:disabled,
.tenant-app-shell .ipi-ph-primary[disabled],
.tenant-app-shell .ipi-filter-railbtn--primary,
.tenant-app-shell .ipi-filter-railbtn--primary:disabled,
.tenant-app-shell .ipi-filter-railbtn--primary[disabled],
.tenant-app-shell .ipi-row-action-btn--primary,
.tenant-app-shell .ipi-row-action-btn--primary:disabled,
.tenant-app-shell .ipi-row-action-btn--primary[disabled] {
    background: #1a1815 !important;
    border-color: #1a1815 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.tenant-app-shell .ipi-ph-secondary,
.tenant-app-shell .ipi-ph-secondary:disabled,
.tenant-app-shell .ipi-ph-secondary[disabled],
.tenant-app-shell .ipi-filter-railbtn,
.tenant-app-shell .ipi-filter-railbtn:disabled,
.tenant-app-shell .ipi-filter-railbtn[disabled],
.tenant-app-shell .ipi-row-action-btn,
.tenant-app-shell .ipi-row-action-btn:disabled,
.tenant-app-shell .ipi-row-action-btn[disabled],
.tenant-app-shell .ipi-row-action-btn--utility,
.tenant-app-shell .ipi-row-action-btn--utility:disabled,
.tenant-app-shell .ipi-row-action-btn--utility[disabled],
.tenant-app-shell .ipi-action-btn,
.tenant-app-shell .ipi-action-btn:disabled,
.tenant-app-shell .ipi-action-btn[disabled] {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
    color: #1a1815 !important;
    opacity: 1 !important;
}

/* dbp-header-btn primitive used by dashboard demo header */
.tenant-app-shell .dbp-header-btn--primary,
.tenant-app-shell .dbp-header-btn--primary:disabled,
.tenant-app-shell .dbp-header-btn--primary[disabled] {
    background: #1a1815 !important;
    color: #ffffff !important;
    border-color: #1a1815 !important;
    opacity: 1 !important;
}

.tenant-app-shell .dbp-header-btn,
.tenant-app-shell .dbp-header-btn:disabled,
.tenant-app-shell .dbp-header-btn[disabled],
.tenant-app-shell .dbp-header-btn--ghost,
.tenant-app-shell .dbp-header-btn--ghost:disabled,
.tenant-app-shell .dbp-header-btn--ghost[disabled] {
    background: #ffffff !important;
    color: #1a1815 !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
    opacity: 1 !important;
}

/* btn-ghost (used by capture "Scan tag" + schedule nav) */
.tenant-app-shell .btn-ghost,
.tenant-app-shell .btn-ghost:disabled,
.tenant-app-shell .btn-ghost[disabled] {
    background: #ffffff !important;
    color: #1a1815 !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    opacity: 1 !important;
}


/* ─── 26. DEMO BILLING — MARKETING-GRADE SALES LANDING ─────────────
   Sales/conversion landing page modelled after the marketing site
   (app/Views/landing/) — gradient orbs, gold accent eyebrows, premium
   typography, integration logos marquee, FAQ accordion, dotted CTA.
   Self-contained: re-declares the marketing --lp-* design tokens on
   .demo-bill-page itself so they cascade to descendants without
   leaking into the demo shell or any other demo page.
   Buttons stay strictly black/white per the global rule. */

.tenant-app-shell .demo-bill-page {
    /* fonts (already loaded by demo-app layout) */
    --lp-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --lp-font-display: "Space Grotesk", Inter, system-ui, sans-serif;

    /* spacing */
    --lp-space-2: 4px;
    --lp-space-3: 8px;
    --lp-space-4: 12px;
    --lp-space-5: 16px;
    --lp-space-6: 24px;
    --lp-space-7: 32px;
    --lp-space-8: 48px;
    --lp-space-9: 64px;
    --lp-space-10: 80px;
    --lp-space-11: 96px;

    /* radius */
    --lp-radius-sm: 8px;
    --lp-radius-md: 14px;
    --lp-radius-lg: 20px;
    --lp-radius-xl: 24px;
    --lp-radius-full: 999px;

    /* shadows */
    --lp-shadow-soft: 0 10px 22px rgba(15, 23, 42, 0.05);
    --lp-shadow-card: 0 16px 32px rgba(15, 23, 42, 0.07);
    --lp-shadow-hero: 0 22px 60px rgba(15, 23, 42, 0.14);
    --lp-shadow-glow: 0 0 0 1px rgba(212, 160, 23, 0.18), 0 14px 30px rgba(15, 23, 42, 0.08);

    /* colours */
    --lp-color-bg: #F4EFE6;
    --lp-color-surface: #FBF7F0;
    --lp-color-surface-soft: #EEE6D7;
    --lp-color-border-subtle: rgba(61, 58, 52, 0.14);
    --lp-color-ink-strong: #1A1917;
    --lp-color-ink-base: #3D3A34;
    --lp-color-ink-muted: #6B6458;
    --lp-color-ink-soft: #9A9188;
    --lp-color-accent: #d4a017;
    --lp-color-brand: #d4a017;
    --lp-color-brand-dark: #b88711;
    --lp-color-brand-soft: rgba(212, 160, 23, 0.12);
    --lp-color-brand-line: rgba(212, 160, 23, 0.28);
    --lp-color-brand-glow: rgba(212, 160, 23, 0.18);

    /* page surface — beige radial like the marketing site */
    position: relative;
    isolation: isolate;
    padding: 0;
    /* Break out of .content padding (28px desktop, 16px tablet/mobile)
       so the billing landing page uses the full available width inside
       the demo shell — no dead-space gutters on either side. */
    margin: 0 -28px -28px;
    background:
        radial-gradient(circle at 12% -8%, rgba(212, 160, 23, 0.16), transparent 44%),
        radial-gradient(circle at 86% 4%, rgba(61, 58, 52, 0.10), transparent 52%),
        var(--lp-color-bg);
    color: var(--lp-color-ink-strong);
    font-family: var(--lp-font-sans);
    overflow: hidden;
}

@media (max-width: 1366px) {
    .tenant-app-shell .demo-bill-page {
        margin: 0 -16px -16px;
    }
}

/* Subtle 24px grid + SVG noise overlay (mirrors marketing body::after) */
.tenant-app-shell .demo-bill-page__bgnoise {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(61, 58, 52, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61, 58, 52, 0.045) 1px, transparent 1px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
    background-size: 48px 48px, 48px 48px, 160px 160px;
    -webkit-mask-image: radial-gradient(ellipse at center top, black, transparent 70%);
    mask-image: radial-gradient(ellipse at center top, black, transparent 70%);
    opacity: 0.55;
}

/* ── Shell, sections, headings ──────────────────────────────────── */
.tenant-app-shell .demo-bill-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--lp-space-6);
    position: relative;
    z-index: 1;
}

.tenant-app-shell .demo-bill-section {
    position: relative;
    padding: clamp(64px, 8vw, 104px) 0;
}

.tenant-app-shell .demo-bill-section--hero {
    padding-top: clamp(48px, 6vw, 80px);
    padding-bottom: clamp(48px, 6vw, 80px);
}

.tenant-app-shell .demo-bill-section--muted {
    background:
        radial-gradient(circle at 12% 0%, rgba(212, 160, 23, 0.07), transparent 58%),
        radial-gradient(circle at 92% 70%, rgba(15, 19, 32, 0.06), transparent 56%),
        var(--lp-color-surface-soft);
}

.tenant-app-shell .demo-bill-section--logos {
    padding: clamp(36px, 4vw, 56px) 0;
}

.tenant-app-shell .demo-bill-section--finalcta {
    padding-top: clamp(48px, 6vw, 80px);
    padding-bottom: clamp(72px, 8vw, 112px);
}

.tenant-app-shell .demo-bill-section__head {
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.tenant-app-shell .demo-bill-section__title {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    color: var(--lp-color-ink-strong);
    max-width: 24ch;
    text-wrap: balance;
}

.tenant-app-shell .demo-bill-section__title-accent {
    display: inline-block;
    background: linear-gradient(135deg, var(--lp-color-brand) 0%, var(--lp-color-brand-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.tenant-app-shell .demo-bill-section__sub {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--lp-color-ink-muted);
    max-width: 60ch;
}

/* ── Eyebrows ──────────────────────────────────────────────────── */
.tenant-app-shell .demo-bill-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--lp-color-brand-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-color-brand-dark);
    box-shadow: 0 4px 14px rgba(212, 160, 23, 0.08);
}

.tenant-app-shell .demo-bill-eyebrow__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--lp-color-brand);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18);
    flex-shrink: 0;
}

.tenant-app-shell .demo-bill-eyebrow--hero {
    padding: 8px 16px 8px 13px;
    font-size: 11.5px;
    letter-spacing: 0.16em;
}

/* ── Tick badges (used in features + assurances) ───────────────── */
.tenant-app-shell .demo-bill-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--lp-color-brand-soft);
    color: var(--lp-color-brand-dark);
    border: 1px solid var(--lp-color-brand-line);
    flex-shrink: 0;
}

.tenant-app-shell .demo-bill-tick svg {
    width: 12px;
    height: 12px;
}

.tenant-app-shell .demo-bill-tick--gold {
    background: linear-gradient(135deg, var(--lp-color-brand), var(--lp-color-brand-dark));
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(212, 160, 23, 0.25);
}

/* ── CTAs (sit on top of the global black/white button overrides) ── */
.tenant-app-shell .demo-bill-cta {
    min-height: 48px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    gap: 8px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.tenant-app-shell .demo-bill-cta--lg {
    min-height: 52px;
    padding: 0 26px;
    font-size: 15px;
}

.tenant-app-shell .demo-bill-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(26, 24, 21, 0.18) !important;
}

.tenant-app-shell .demo-bill-cta svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Hero ──────────────────────────────────────────────────────── */
.tenant-app-shell .demo-bill-section--hero .demo-bill-shell {
    position: relative;
}

.tenant-app-shell .demo-bill-hero__orbs {
    position: absolute;
    inset: -30%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.tenant-app-shell .demo-bill-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.7;
}

.tenant-app-shell .demo-bill-orb--gold {
    width: 720px;
    height: 720px;
    top: -260px;
    left: -160px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.45), transparent 64%);
}

.tenant-app-shell .demo-bill-orb--dark {
    width: 560px;
    height: 560px;
    top: -160px;
    right: -180px;
    background: radial-gradient(circle, rgba(15, 19, 32, 0.18), transparent 64%);
}

.tenant-app-shell .demo-bill-hero {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    max-width: 820px;
    margin: 0 auto;
}

.tenant-app-shell .demo-bill-hero__title {
    margin: 6px 0 0;
    font-family: var(--lp-font-display);
    font-size: clamp(38px, 5.8vw, 64px);
    font-weight: 700;
    letter-spacing: -0.038em;
    line-height: 1.02;
    color: var(--lp-color-ink-strong);
    text-wrap: balance;
}

.tenant-app-shell .demo-bill-hero__title-accent {
    display: block;
    margin-top: 4px;
    background: linear-gradient(135deg, var(--lp-color-brand) 0%, var(--lp-color-brand-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.tenant-app-shell .demo-bill-hero__lede {
    margin: 0;
    font-size: 18px;
    line-height: 1.62;
    color: var(--lp-color-ink-muted);
    max-width: 60ch;
}

.tenant-app-shell .demo-bill-hero__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

.tenant-app-shell .demo-bill-hero__assurances {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--lp-color-ink-base);
}

.tenant-app-shell .demo-bill-hero__assurances li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

/* ── Integration logos marquee ─────────────────────────────────── */
.tenant-app-shell .demo-bill-logos__label {
    margin: 0 0 22px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-color-ink-soft);
    width: 100%;
    justify-content: center;
}

.tenant-app-shell .demo-bill-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.tenant-app-shell .demo-bill-marquee__track {
    display: inline-flex;
    align-items: center;
    gap: 56px;
    padding: 6px 0;
    animation: demo-bill-marquee 32s linear infinite;
    will-change: transform;
}

.tenant-app-shell .demo-bill-marquee:hover .demo-bill-marquee__track {
    animation-play-state: paused;
}

.tenant-app-shell .demo-bill-marquee__slide {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: var(--lp-color-surface);
    border: 1px solid var(--lp-color-border-subtle);
    padding: 12px;
    box-shadow: var(--lp-shadow-soft);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.tenant-app-shell .demo-bill-marquee__slide:hover {
    transform: translateY(-3px);
    border-color: var(--lp-color-brand-line);
    box-shadow: 0 10px 22px rgba(212, 160, 23, 0.16);
}

.tenant-app-shell .demo-bill-marquee__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@keyframes demo-bill-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .tenant-app-shell .demo-bill-marquee__track {
        animation: none;
    }
}

/* ── Pricing ───────────────────────────────────────────────────── */
.tenant-app-shell .demo-bill-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
    /* Top padding so the floating "Most popular" ribbon (top:-16px) on
       the primary plan card doesn't visually collide with the section
       header above. */
    padding-top: 16px;
}

.tenant-app-shell .demo-bill-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 44px 36px 36px;
    background: var(--lp-color-surface);
    border: 1px solid var(--lp-color-border-subtle);
    border-radius: 24px;
    box-shadow: var(--lp-shadow-card);
    /* overflow visible so the floating "Most popular" ribbon at top:-16px
       can render outside the card border without being clipped. The accent
       bar at the top of the card is given a matching border-radius below. */
    overflow: visible;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.tenant-app-shell .demo-bill-plan:hover {
    transform: translateY(-4px);
    border-color: var(--lp-color-brand-line);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.10);
}

.tenant-app-shell .demo-bill-plan--primary {
    background: linear-gradient(180deg, #fffaeb 0%, var(--lp-color-surface) 60%);
    border: 1.5px solid var(--lp-color-brand);
    box-shadow: 0 22px 60px rgba(212, 160, 23, 0.18), 0 6px 14px rgba(212, 160, 23, 0.08);
}

.tenant-app-shell .demo-bill-plan--primary:hover {
    box-shadow: 0 30px 72px rgba(212, 160, 23, 0.22), 0 8px 16px rgba(212, 160, 23, 0.12);
}

.tenant-app-shell .demo-bill-plan__accent {
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    /* Match the card's top corners so the bar follows the rounded edge
       even though the card now has overflow:visible (for the ribbon). */
    border-radius: 24px 24px 0 0;
    background: linear-gradient(90deg, transparent, var(--lp-color-brand) 50%, transparent);
    transform-origin: center;
    transform: scaleX(0.4);
    opacity: 0.6;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.tenant-app-shell .demo-bill-plan:hover .demo-bill-plan__accent {
    transform: scaleX(1);
    opacity: 1;
}

.tenant-app-shell .demo-bill-plan--primary .demo-bill-plan__accent {
    transform: scaleX(1);
    opacity: 1;
}

.tenant-app-shell .demo-bill-plan__ribbon {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--lp-color-brand), var(--lp-color-brand-dark));
    color: #ffffff;
    font-family: var(--lp-font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow:
        0 12px 28px rgba(212, 160, 23, 0.42),
        0 0 0 4px rgba(212, 160, 23, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
    white-space: nowrap;
    z-index: 2;
}

.tenant-app-shell .demo-bill-plan__ribbon svg {
    width: 14px;
    height: 14px;
}

.tenant-app-shell .demo-bill-plan__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 22px;
    border-bottom: 1px dashed var(--lp-color-border-subtle);
}

.tenant-app-shell .demo-bill-plan__pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--lp-color-bg);
    border: 1px solid var(--lp-color-border-subtle);
    color: var(--lp-color-ink-base);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tenant-app-shell .demo-bill-plan--primary .demo-bill-plan__pill {
    background: var(--lp-color-brand-soft);
    border-color: var(--lp-color-brand-line);
    color: var(--lp-color-brand-dark);
}

.tenant-app-shell .demo-bill-plan__pill svg {
    width: 13px;
    height: 13px;
}

.tenant-app-shell .demo-bill-plan__name {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--lp-color-ink-strong);
    letter-spacing: -0.012em;
}

.tenant-app-shell .demo-bill-plan__price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--lp-font-display);
    flex-wrap: wrap;
}

.tenant-app-shell .demo-bill-plan__price-figure {
    font-size: 48px;
    font-weight: 700;
    color: var(--lp-color-ink-strong);
    letter-spacing: -0.028em;
    line-height: 1;
}

.tenant-app-shell .demo-bill-plan--primary .demo-bill-plan__price-figure {
    background: linear-gradient(135deg, var(--lp-color-ink-strong) 0%, #4a3f1f 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.tenant-app-shell .demo-bill-plan__price-unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--lp-color-ink-muted);
    font-family: var(--lp-font-sans);
}

.tenant-app-shell .demo-bill-plan__pitch {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--lp-color-ink-base);
}

.tenant-app-shell .demo-bill-plan__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
    flex: 1;
}

.tenant-app-shell .demo-bill-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--lp-color-ink-base);
}

.tenant-app-shell .demo-bill-plan__cta {
    margin-top: 4px;
    align-self: stretch;
    justify-content: center;
    min-height: 52px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 14px;
    gap: 10px;
}

.tenant-app-shell .demo-bill-plan__cta svg {
    width: 16px;
    height: 16px;
}

.tenant-app-shell .demo-bill-parity {
    margin-top: 36px;
    padding: 22px 26px;
    background: var(--lp-color-surface);
    border: 1px solid var(--lp-color-border-subtle);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: var(--lp-shadow-soft);
}

.tenant-app-shell .demo-bill-parity__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-color-ink-soft);
}

.tenant-app-shell .demo-bill-parity__pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.tenant-app-shell .demo-bill-parity__pill {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--lp-color-brand-soft);
    border: 1px solid var(--lp-color-brand-line);
    color: var(--lp-color-brand-dark);
    font-size: 12.5px;
    font-weight: 600;
}

/* ── Features grid ─────────────────────────────────────────────── */
.tenant-app-shell .demo-bill-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.tenant-app-shell .demo-bill-feature {
    padding: 28px 24px;
    background: var(--lp-color-surface);
    border: 1px solid var(--lp-color-border-subtle);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--lp-shadow-soft);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    position: relative;
    overflow: hidden;
}

.tenant-app-shell .demo-bill-feature::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-color-brand-glow), transparent 70%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.tenant-app-shell .demo-bill-feature:hover {
    transform: translateY(-4px) rotate3d(0, 0, 1, -0.4deg);
    border-color: var(--lp-color-brand-line);
    box-shadow: var(--lp-shadow-card);
}

.tenant-app-shell .demo-bill-feature:hover::before {
    opacity: 1;
}

.tenant-app-shell .demo-bill-feature__icon {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    transition: transform 0.22s ease;
}

.tenant-app-shell .demo-bill-feature:hover .demo-bill-feature__icon {
    transform: scale(1.06) rotate(-4deg);
}

.tenant-app-shell .demo-bill-feature__icon--gold {
    background: linear-gradient(135deg, var(--lp-color-brand) 0%, var(--lp-color-brand-dark) 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(212, 160, 23, 0.28);
}

.tenant-app-shell .demo-bill-feature__icon--dark {
    background: var(--lp-color-ink-strong);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(26, 24, 21, 0.22);
}

.tenant-app-shell .demo-bill-feature__icon svg {
    width: 22px;
    height: 22px;
}

.tenant-app-shell .demo-bill-feature__label {
    margin: 0;
    position: relative;
    font-family: var(--lp-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--lp-color-ink-strong);
    letter-spacing: -0.01em;
}

.tenant-app-shell .demo-bill-feature__copy {
    margin: 0;
    position: relative;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--lp-color-ink-muted);
}

/* ── Steps (How it works) ──────────────────────────────────────── */
.tenant-app-shell .demo-bill-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    position: relative;
}

.tenant-app-shell .demo-bill-steps__line {
    position: absolute;
    top: 60px;
    left: 16%;
    right: 16%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--lp-color-brand-line), var(--lp-color-brand), var(--lp-color-brand-line), transparent);
    z-index: 0;
    border-radius: 999px;
}

.tenant-app-shell .demo-bill-step {
    position: relative;
    z-index: 1;
    padding: 32px 28px;
    background: var(--lp-color-surface);
    border: 1px solid var(--lp-color-border-subtle);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    box-shadow: var(--lp-shadow-soft);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.tenant-app-shell .demo-bill-step:hover {
    transform: translateY(-3px);
    border-color: var(--lp-color-brand-line);
    box-shadow: var(--lp-shadow-card);
}

.tenant-app-shell .demo-bill-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--lp-color-brand) 0%, var(--lp-color-brand-dark) 100%);
    color: #ffffff;
    font-family: var(--lp-font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 14px 28px rgba(212, 160, 23, 0.32);
}

.tenant-app-shell .demo-bill-step__title {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--lp-color-ink-strong);
    letter-spacing: -0.012em;
}

.tenant-app-shell .demo-bill-step__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--lp-color-ink-muted);
}

/* ── Differentiators ───────────────────────────────────────────── */
.tenant-app-shell .demo-bill-diff {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.tenant-app-shell .demo-bill-diff__card {
    position: relative;
    padding: 32px 30px;
    background: var(--lp-color-surface);
    border: 1px solid var(--lp-color-border-subtle);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--lp-shadow-soft);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.tenant-app-shell .demo-bill-diff__card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-color-brand-glow), transparent 65%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.tenant-app-shell .demo-bill-diff__card:hover {
    transform: translateY(-4px);
    border-color: var(--lp-color-brand-line);
    box-shadow: var(--lp-shadow-card);
}

.tenant-app-shell .demo-bill-diff__card:hover::before {
    opacity: 1;
}

.tenant-app-shell .demo-bill-diff__icon {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--lp-color-brand-soft);
    border: 1px solid var(--lp-color-brand-line);
    color: var(--lp-color-brand-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tenant-app-shell .demo-bill-diff__icon svg {
    width: 24px;
    height: 24px;
}

.tenant-app-shell .demo-bill-diff__title {
    margin: 0;
    position: relative;
    font-family: var(--lp-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--lp-color-ink-strong);
    letter-spacing: -0.012em;
}

.tenant-app-shell .demo-bill-diff__copy {
    margin: 0;
    position: relative;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--lp-color-ink-muted);
}

/* ── FAQ accordion ─────────────────────────────────────────────── */
.tenant-app-shell .demo-bill-faq {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: start;
}

.tenant-app-shell .demo-bill-faq__intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    text-align: left;
    position: sticky;
    top: 100px;
}

.tenant-app-shell .demo-bill-faq__intro .demo-bill-section__title {
    text-align: left;
    max-width: none;
}

.tenant-app-shell .demo-bill-faq__intro .demo-bill-section__sub {
    text-align: left;
    max-width: 36ch;
}

.tenant-app-shell .demo-bill-faq__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tenant-app-shell .demo-bill-faq__item {
    background: var(--lp-color-surface);
    border: 1px solid var(--lp-color-border-subtle);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--lp-shadow-soft);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.tenant-app-shell .demo-bill-faq__item:hover {
    border-color: var(--lp-color-brand-line);
}

.tenant-app-shell .demo-bill-faq__item[open] {
    border-color: var(--lp-color-brand);
    box-shadow: 0 14px 30px rgba(212, 160, 23, 0.12), 0 4px 10px rgba(212, 160, 23, 0.06);
}

.tenant-app-shell .demo-bill-faq__summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--lp-font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--lp-color-ink-strong);
    transition: color 0.18s ease;
}

.tenant-app-shell .demo-bill-faq__summary::-webkit-details-marker,
.tenant-app-shell .demo-bill-faq__summary::marker {
    display: none;
    content: '';
}

.tenant-app-shell .demo-bill-faq__summary:hover {
    color: var(--lp-color-brand-dark);
}

.tenant-app-shell .demo-bill-faq__icon {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--lp-color-brand);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18);
    flex-shrink: 0;
}

.tenant-app-shell .demo-bill-faq__question {
    flex: 1;
    min-width: 0;
}

.tenant-app-shell .demo-bill-faq__chev {
    width: 18px;
    height: 18px;
    color: var(--lp-color-brand-dark);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.tenant-app-shell .demo-bill-faq__item[open] .demo-bill-faq__chev {
    transform: rotate(180deg);
}

.tenant-app-shell .demo-bill-faq__panel {
    padding: 0 26px 22px;
}

.tenant-app-shell .demo-bill-faq__answer {
    margin: 0;
    padding-left: 24px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--lp-color-ink-muted);
    border-left: 2px solid var(--lp-color-brand-line);
}

/* ── Final CTA ─────────────────────────────────────────────────── */
.tenant-app-shell .demo-bill-finalcta {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22), 0 8px 22px rgba(15, 23, 42, 0.10);
}

.tenant-app-shell .demo-bill-finalcta__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 70% 80% at 18% 18%, rgba(212, 160, 23, 0.42), transparent 58%),
        radial-gradient(ellipse 60% 80% at 88% 82%, rgba(212, 160, 23, 0.22), transparent 60%),
        linear-gradient(135deg, #1a1815 0%, #2a2418 55%, #1a1815 100%);
}

.tenant-app-shell .demo-bill-finalcta__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
    background-size: 26px 26px;
    opacity: 0.55;
}

.tenant-app-shell .demo-bill-finalcta__inner {
    position: relative;
    padding: clamp(48px, 6vw, 76px) clamp(36px, 4vw, 60px);
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
    text-align: center;
}

.tenant-app-shell .demo-bill-finalcta__copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    max-width: 720px;
}

.tenant-app-shell .demo-bill-finalcta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px 8px 13px;
    border-radius: 999px;
    background: rgba(212, 160, 23, 0.18);
    border: 1px solid rgba(212, 160, 23, 0.42);
    color: #f4d98b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tenant-app-shell .demo-bill-finalcta__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #f4d98b;
    box-shadow: 0 0 0 3px rgba(244, 217, 139, 0.22);
}

.tenant-app-shell .demo-bill-finalcta__title {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.028em;
    line-height: 1.06;
    text-wrap: balance;
}

.tenant-app-shell .demo-bill-finalcta__title span {
    background: linear-gradient(135deg, #f4d98b 0%, var(--lp-color-brand) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.tenant-app-shell .demo-bill-finalcta__sub {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    max-width: 56ch;
}

.tenant-app-shell .demo-bill-finalcta__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.tenant-app-shell .demo-bill-finalcta__pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

.tenant-app-shell .demo-bill-finalcta__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.86);
    font-size: 11.5px;
    font-weight: 600;
}

.tenant-app-shell .demo-bill-finalcta__pill svg {
    width: 12px;
    height: 12px;
    color: #f4d98b;
}

/* Final CTA buttons: white-on-dark inverted (overrides global black) */
.tenant-app-shell .demo-bill-finalcta .btn-primary,
.tenant-app-shell .demo-bill-finalcta .btn-primary:disabled,
.tenant-app-shell .demo-bill-finalcta .btn-primary[disabled] {
    background: #ffffff !important;
    color: var(--lp-color-ink-strong) !important;
    border-color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30) !important;
}

.tenant-app-shell .demo-bill-finalcta .btn-secondary,
.tenant-app-shell .demo-bill-finalcta .btn-secondary:disabled,
.tenant-app-shell .demo-bill-finalcta .btn-secondary[disabled] {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    backdrop-filter: blur(6px);
}

.tenant-app-shell .demo-bill-finalcta .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

/* ── Tablet (≤ 1080px) ─────────────────────────────────────────── */
@media (max-width: 1080px) {
    .tenant-app-shell .demo-bill-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tenant-app-shell .demo-bill-faq {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .tenant-app-shell .demo-bill-faq__intro {
        position: static;
    }
}

/* ── Mobile (≤ 900px) ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .tenant-app-shell .demo-bill-section {
        padding: 56px 0;
    }
    .tenant-app-shell .demo-bill-shell {
        padding: 0 18px;
    }
    .tenant-app-shell .demo-bill-orb--gold {
        width: 480px;
        height: 480px;
    }
    .tenant-app-shell .demo-bill-orb--dark {
        width: 360px;
        height: 360px;
    }
    .tenant-app-shell .demo-bill-hero__title {
        font-size: clamp(32px, 8vw, 44px);
    }
    .tenant-app-shell .demo-bill-marquee__slide {
        width: 56px;
        height: 56px;
    }
    .tenant-app-shell .demo-bill-marquee__track {
        gap: 36px;
    }
    .tenant-app-shell .demo-bill-plans,
    .tenant-app-shell .demo-bill-features,
    .tenant-app-shell .demo-bill-steps,
    .tenant-app-shell .demo-bill-diff {
        grid-template-columns: 1fr;
    }
    .tenant-app-shell .demo-bill-steps__line {
        display: none;
    }
    .tenant-app-shell .demo-bill-finalcta__inner {
        padding: 44px 28px;
    }
    .tenant-app-shell .demo-bill-finalcta__actions {
        align-self: stretch;
    }
    .tenant-app-shell .demo-bill-finalcta__actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}


/* ─── 27. DEMO WATERMARK ──────────────────────────────────────────
   Single big diagonal "DEMO" pinned to the viewport, click-through,
   above every modal/drawer. Lives in app/Views/layout/demo-app.php
   as <div class="demo-watermark" aria-hidden="true">DEMO</div>. */

.tenant-app-shell .demo-watermark {
    position: fixed;
    inset: 0;
    z-index: 2147483600;          /* near max int — above any modal */

    /* never block clicks / never selectable */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;

    /* center the text in the viewport */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;

    /* visual */
    font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(160px, 24vw, 380px);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
    color: rgba(26, 24, 21, 0.035);   /* very subtle ink-black at 3.5% */
    text-transform: uppercase;
    transform: rotate(-30deg);
    transform-origin: center center;
    text-shadow: none;
}

@media print {
    .tenant-app-shell .demo-watermark {
        display: none;
    }
}


/* ─── 27b. DEMO MODE BANNER ─────────────────────────────────────────
   Persistent thin strip at the very top of every demo page. Makes it
   immediately obvious the visitor is in a demo environment with sample
   data, not the live product. Always visible, never dismissible (the
   "Start free trial" CTA is the exit path).

   Sits ABOVE the sidebar topbar — pushed to the top of body via order
   or position. Uses the gold accent colour to match the brand while
   signalling "this is different from the real product". */

.tenant-app-shell .demo-mode-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483500;       /* just below the watermark, above everything else */
    background: linear-gradient(135deg, #c49510, #a97807);
    color: #fff;
    font-family: var(--font-body, Inter, system-ui, sans-serif);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    text-align: center;
    padding: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.tenant-app-shell .demo-mode-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 7px 16px;
    flex-wrap: wrap;
}

.tenant-app-shell .demo-mode-banner__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tenant-app-shell .demo-mode-banner__text {
    white-space: nowrap;
}

.tenant-app-shell .demo-mode-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 4px;
    background: #fff;
    color: #a97807;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease;
}

.tenant-app-shell .demo-mode-banner__cta:hover {
    background: #f8f5ee;
    transform: translateX(1px);
}

.tenant-app-shell .demo-mode-banner__cta svg {
    transition: transform 0.15s ease;
}

.tenant-app-shell .demo-mode-banner__cta:hover svg {
    transform: translateX(2px);
}

/* Push the entire tenant-app-shell content down by the banner height.
 * The banner is ~32px (7px padding * 2 + 12.5px font + gaps). Using
 * a fixed body padding-top so the sidebar, topbar, and content area
 * all shift down uniformly. */
.tenant-app-shell {
    padding-top: 32px;
}

/* Sidebar is a grid child of .app-shell (grid-row: 2), not fixed —
 * the legacy `top: 32px; height: calc(100% - 32px)` override here was
 * compensating for the old `.app-shell { height: 100vh }` overflowing
 * the body by 32px (the banner). With `.app-shell` now correctly sized
 * to `100vh - 32px`, the sidebar fills the grid track via the default
 * `align-self: stretch`. No explicit height needed. Leaving this hook
 * empty so future demo-only sidebar tweaks have a place to land. */
.tenant-app-shell .sidebar { /* intentionally empty — grid track handles height */ }

/* The topbar is also fixed — shift it down. */
.tenant-app-shell .top-bar {
    top: 32px;
}

/* The .app-shell grid is hard-coded to height: 100vh in style.css. With
 * the demo banner pushing the body down by 32px (padding-top above),
 * a 100vh app-shell overflows the body's content-box by 32px and gets
 * clipped by `body.tenant-app-shell { overflow: hidden }`. The clipped
 * strip is exactly where the sidebar's "Back to website" footer link
 * and the content area's `.demo-end-cta` (final CTA) sit, so both
 * appear half cut off. Constrain the shell to the body's actual
 * content-box height so the sidebar footer + final CTA are fully
 * visible. Mobile (≤ 768 px) restores body padding-top: 0 below, so
 * the shell at 100vh is correct there — keep it untouched in the
 * mobile media query. */
.tenant-app-shell .app-shell {
    height: calc(100vh - 32px);
    min-height: calc(100vh - 32px);
}
@supports (height: 100dvh) {
    .tenant-app-shell .app-shell {
        height: calc(100dvh - 32px);
        min-height: calc(100dvh - 32px);
    }
}

/* Mobile: banner flows in normal document order (above .app-shell) so its
 * natural height always matches the space reserved for it. Keeping it
 * position:fixed caused the banner to overhang the topbar whenever its
 * content height exceeded the guessed 28px padding — most obvious on
 * narrow viewports where the toggle pill + CTA push the row taller. */
@media (max-width: 768px) {
    .tenant-app-shell .demo-mode-banner {
        position: static;
    }
    .tenant-app-shell .demo-mode-banner__inner {
        padding: 6px 12px;
        gap: 8px;
    }
    .tenant-app-shell .demo-mode-banner__text {
        font-size: 11.5px;
    }
    .tenant-app-shell .demo-mode-banner__badge {
        font-size: 9px;
    }
    .tenant-app-shell {
        padding-top: 0;
    }
    .tenant-app-shell .sidebar {
        /* Sidebar is a grid child — height comes from the grid track.
         * Mobile resets here are no-ops now that the desktop rule has
         * been emptied (kept as a hook for future mobile-only tweaks). */
    }
    .tenant-app-shell .top-bar {
        top: 0;
    }
    /* Mobile: banner flows in normal document order, body padding-top: 0,
     * so the app-shell goes back to occupying the full viewport. */
    .tenant-app-shell .app-shell {
        height: 100vh;
        min-height: 100vh;
    }
    @supports (height: 100dvh) {
        .tenant-app-shell .app-shell {
            height: 100dvh;
            min-height: 100dvh;
        }
    }
}

/* Ultra-narrow — hide the explanatory text, keep badge + CTA */
@media (max-width: 420px) {
    .tenant-app-shell .demo-mode-banner__text {
        display: none;
    }
}

@media print {
    .tenant-app-shell .demo-mode-banner {
        display: none;
    }
    .tenant-app-shell {
        padding-top: 0;
    }
}

/* ─── 27b. LIVE-DEMO MODE TOGGLE (tenant ↔ client-portal) ──────────
   A 2-segment pill sitting in the live-demo banner. Swaps the viewer
   between /demo/* (tenant dashboard) and /demo/cp/* (client portal).
   Keyed off the existing .demo-mode-banner__inner flex row. */
.tenant-app-shell .demo-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    margin: 0 4px 0 auto;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}
.tenant-app-shell .demo-mode-toggle__seg {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    border-radius: 999px;
    transition: background 0.14s ease, color 0.14s ease;
    white-space: nowrap;
}
.tenant-app-shell .demo-mode-toggle__seg:hover {
    color: #ffffff;
}
.tenant-app-shell .demo-mode-toggle__seg.is-active {
    background: rgba(255, 255, 255, 0.92);
    color: #1a1815;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}
@media (max-width: 560px) {
    .tenant-app-shell .demo-mode-toggle__seg {
        padding: 3px 9px;
        font-size: 11px;
    }
}
@media (max-width: 420px) {
    /* Compact: hide the inactive label, show a short glyph set */
    .tenant-app-shell .demo-mode-toggle__seg {
        padding: 3px 8px;
    }
}

/* ─── 27c. CP-DEMO LAYOUT SHELL ───────────────────────────────────
   The client-portal demo uses a different layout (demo-cp-app.php)
   — no tenant sidebar, no tenant topbar. The banner, watermark and
   end-CTA from the tenant demo still apply via the shared body class
   .tenant-app-shell. The cp view provides its own cp-nav + cp-sidebar. */
/* CP demo shell: unlock the tenant-app-shell's fixed viewport.
   body.tenant-app-shell has height:100vh; overflow:hidden so the tenant
   layout can give its .content element its own scroll. The cp views use
   a .cp-shell grid with min-height:100vh and expect document scroll
   (same as the real authenticated cp). Restore that here. */
body.cp-demo-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    background: var(--canvas, #f7f5f0);
}
@supports (height: 100dvh) {
    body.cp-demo-shell {
        min-height: 100dvh;
    }
}
.cp-demo-shell .cp-demo-main {
    padding-top: 0;
}
/* Push content below the fixed banner. */
.cp-demo-shell.tenant-app-shell {
    padding-top: 32px;
}
@media (max-width: 768px) {
    /* Banner flows in normal document order on mobile — see section 27
     * mobile override. No padding-top compensation needed. */
    .cp-demo-shell.tenant-app-shell {
        padding-top: 0;
    }
}
/* Inner cp-shell should fill at least the viewport minus banner. */
.cp-demo-shell .cp-shell {
    min-height: calc(100vh - 32px);
}
@supports (height: 100dvh) {
    .cp-demo-shell .cp-shell {
        min-height: calc(100dvh - 32px);
    }
}
@media (max-width: 768px) {
    .cp-demo-shell .cp-shell {
        min-height: auto;
    }
}
/* End-of-content CTA in the cp demo: the .cp-shell grid has a 56px
   sidebar column on desktop. Mirror that offset on the wrapper so the
   CTA centres relative to the cp-main content area, not the viewport.
   On mobile the cp-shell collapses to a stacked flex column, so drop
   the offset.
   Specificity note: the base rule `.tenant-app-shell .demo-end-cta`
   (section 28 below) sets `margin: 32px 0 8px` at equal specificity
   and later source order. Stack .cp-demo-shell.tenant-app-shell to
   win specificity AND use !important on margin as belt-and-braces. */
/* Mirror exactly the cp-main content bounds so the CTA aligns with
   the content above it: sidebar (56px) + cp-main padding-left (18px)
   = 74px. cp-main padding-right = 24px. On mobile the cp-shell
   collapses to a stacked flex and cp-main uses padding 0 12px. */
.cp-demo-end-wrap {
    padding: 0 24px 0 74px;
}
.cp-demo-shell.tenant-app-shell .demo-end-cta--cp {
    max-width: 960px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 24px !important;
    margin-bottom: 40px !important;
}
@media (max-width: 900px) {
    .cp-demo-end-wrap {
        padding: 0 12px;
    }
}

/* Read-only demo: disable any form submit buttons inside cp views.
   Navigation <a> links stay live — they've been rewritten to /demo/cp/*
   by the buffer rewriter. */
.cp-demo-shell form button[type="submit"] {
    cursor: not-allowed;
    opacity: 0.6;
}
.cp-demo-shell form button[type="submit"]:hover {
    opacity: 0.7;
}

/* PDF download links: the demo has no real PDFs, so fade them out and
   show a "not in demo" cursor. The buffer rewriter still sends clicks
   to the nearest HTML equivalent as a safe fallback. */
.cp-demo-shell [data-cp-demo-pdf] {
    opacity: 0.5;
    cursor: not-allowed;
    position: relative;
}
.cp-demo-shell [data-cp-demo-pdf]:hover {
    opacity: 0.65;
}

/* ─── 28. DEMO GUIDED TOUR ────────────────────────────────────────
   Self-contained demo-only tour: welcome modal on first visit,
   bottom-right floating panel after that, "Take the tour" button
   in the topbar always available. Lives in app/Views/layout/demo-app.php
   markup + public/assets/js/demo-tour.js + step config in
   app/Views/demo/_tour_steps.php. Buttons inherit Section 25's
   black/white enforcement. */

/* ── Topbar launch button (gold accent so it stands out) ── */
.tenant-app-shell .demo-tour-launch {
    background: linear-gradient(135deg, #c49510, #a97807) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(196, 149, 16, 0.30) !important;
    font-weight: 600 !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.tenant-app-shell .demo-tour-launch:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(196, 149, 16, 0.38) !important;
    filter: brightness(1.05);
}

.tenant-app-shell .demo-tour-launch svg {
    width: 14px;
    height: 14px;
    color: #ffffff;
}

/* ── Conversion CTAs — topbar "Start free trial" button + tour final-step
      "Start my free trial" button. Both are scoped overrides of the Section 25
      black/white button rule so they render in solid brand gold. These are the
      ONLY exceptions alongside .demo-tour-launch and .demo-bill-finalcta. ── */
.tenant-app-shell .demo-trial-cta,
.tenant-app-shell .demo-tour__btn--cta.btn,
.tenant-app-shell .demo-tour__btn--cta.btn-primary,
.tenant-app-shell .demo-tour__btn--cta.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #c49510, #a97807) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(196, 149, 16, 0.30) !important;
    font-weight: 700 !important;
    font-size: 13px;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    cursor: pointer;
    white-space: nowrap;
}

.tenant-app-shell .demo-trial-cta:hover,
.tenant-app-shell .demo-tour__btn--cta.btn:hover,
.tenant-app-shell .demo-tour__btn--cta.btn-primary:hover,
.tenant-app-shell .demo-tour__btn--cta.btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(196, 149, 16, 0.38) !important;
    filter: brightness(1.05);
    color: #ffffff !important;
}

.tenant-app-shell .demo-trial-cta:focus-visible,
.tenant-app-shell .demo-tour__btn--cta:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.tenant-app-shell .demo-trial-cta svg,
.tenant-app-shell .demo-tour__btn--cta svg {
    width: 14px;
    height: 14px;
    color: #ffffff;
    flex-shrink: 0;
}

/* Topbar: prevent the CTA from getting crushed on narrower widths */
.tenant-app-shell .topbar .demo-trial-cta {
    margin-left: 8px;
}

/* ── Mobile (≤768px) ────────────────────────────────────────────────
   CRITICAL: mobile.css contains a production-tenant rule
   `.tb-btn { display: none }` at line 429-432 that hides ALL .tb-btn
   elements below 768px (it then selectively re-shows only
   `.tb-btn.top-bar-guided-tour` for the real tenant). Our demo buttons
   don't carry that class, so without this override both the tour
   launch AND the trial CTA disappear on mobile.

   The tour must stay available in the topbar on phones — it's the
   primary re-entry path for the guided walkthrough. The trial CTA is
   the primary conversion affordance. Neither is optional.

   Layout on mobile:
     [≡ hamburger] [logo] <spacer> [tour icon 38×38] [Start free trial]
*/
@media (max-width: 768px) {
    .tenant-app-shell .demo-tour-launch,
    .tenant-app-shell .demo-trial-cta {
        display: inline-flex !important;
    }

    /* Tour launch: compact icon-only square on mobile (matches the real
       tenant's mobile tour button at mobile.css line 435) */
    .tenant-app-shell .demo-tour-launch {
        width: 38px;
        min-width: 38px;
        height: 38px;
        padding: 0 !important;
        justify-content: center;
        flex-shrink: 0;
    }
    .tenant-app-shell .demo-tour-launch span {
        display: none;
    }
    .tenant-app-shell .demo-tour-launch svg {
        width: 16px;
        height: 16px;
    }

    /* Trial CTA: tighter padding + no arrow icon, label stays visible
       because "Start free trial" is the page's most important pixel */
    .tenant-app-shell .topbar .demo-trial-cta {
        padding: 9px 14px;
        font-size: 12.5px;
        flex-shrink: 0;
        margin-left: 0;
    }
    .tenant-app-shell .demo-trial-cta svg {
        display: none;
    }
}

/* Ultra-narrow phones (≤380px, e.g. iPhone SE portrait): trim padding
   further so the tour icon + full "Start free trial" label both fit
   without pushing the logo off-screen */
@media (max-width: 380px) {
    .tenant-app-shell .topbar .demo-trial-cta {
        padding: 9px 11px;
        font-size: 12px;
        letter-spacing: 0;
    }
}

/* ── End-of-content conversion banner ────────────────────────────────
   Single layout-injected card visible at the bottom of every demo page
   except /demo/billing. Catches the long-scroller signal — anyone who
   reaches the bottom of any page is high-intent. Primary action is the
   trial CTA; secondary (when mapped) deep-links to the matching marketing
   /platform/* page. */
.tenant-app-shell .demo-end-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px;
    margin: 32px 0 8px;
    padding: 22px 26px;
    background: linear-gradient(135deg, #ffffff 0%, #faf7f0 100%);
    border: 1px solid rgba(196, 149, 16, 0.22);
    border-radius: 16px;
    box-shadow:
        0 1px 3px rgba(26, 24, 21, 0.06),
        0 18px 40px -16px rgba(196, 149, 16, 0.18);
    position: relative;
    overflow: hidden;
}

.tenant-app-shell .demo-end-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(196, 149, 16, 0.08), transparent 60%);
    pointer-events: none;
}

.tenant-app-shell .demo-end-cta__icon {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #c49510, #a97807);
    color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(196, 149, 16, 0.30);
}

.tenant-app-shell .demo-end-cta__icon svg {
    width: 26px;
    height: 26px;
}

.tenant-app-shell .demo-end-cta__copy {
    position: relative;
    min-width: 0;
}

.tenant-app-shell .demo-end-cta__eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a97807;
}

.tenant-app-shell .demo-end-cta__title {
    margin: 0 0 6px;
    font-family: var(--font-display, 'Space Grotesk'), 'Inter', system-ui, sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1815;
}

.tenant-app-shell .demo-end-cta__sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6b6458;
}

.tenant-app-shell .demo-end-cta__actions {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    flex-shrink: 0;
    min-width: 220px;
}

.tenant-app-shell .demo-end-cta__primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #c49510, #a97807) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(196, 149, 16, 0.30);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    white-space: nowrap;
}

.tenant-app-shell .demo-end-cta__primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(196, 149, 16, 0.38);
    filter: brightness(1.05);
    color: #ffffff !important;
}

.tenant-app-shell .demo-end-cta__primary:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.tenant-app-shell .demo-end-cta__primary svg {
    width: 14px;
    height: 14px;
    color: #ffffff;
    flex-shrink: 0;
}

.tenant-app-shell .demo-end-cta__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    background: transparent;
    color: #3d3a34 !important;
    border: 1px solid rgba(26, 24, 21, 0.14);
    border-radius: 10px;
    font-weight: 600;
    font-size: 12.5px;
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
    white-space: nowrap;
}

.tenant-app-shell .demo-end-cta__secondary:hover {
    color: #1a1815 !important;
    border-color: rgba(196, 149, 16, 0.42);
    background: rgba(196, 149, 16, 0.06);
}

.tenant-app-shell .demo-end-cta__secondary svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Tablet (≤1100px): condense to two columns — icon left of copy, actions
   wrap onto a second row. */
@media (max-width: 1100px) {
    .tenant-app-shell .demo-end-cta {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 16px 18px;
    }
    .tenant-app-shell .demo-end-cta__actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
    }
    .tenant-app-shell .demo-end-cta__primary,
    .tenant-app-shell .demo-end-cta__secondary {
        flex: 1 1 auto;
    }
}

/* Mobile (≤640px): stack the icon above the copy, full-width buttons
   one above the other for easy thumb taps. */
@media (max-width: 640px) {
    .tenant-app-shell .demo-end-cta {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        text-align: center;
        padding: 22px 18px;
        gap: 14px;
    }
    .tenant-app-shell .demo-end-cta__icon {
        margin: 0 auto;
    }
    .tenant-app-shell .demo-end-cta__title {
        font-size: 19px;
    }
    .tenant-app-shell .demo-end-cta__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
}

/* Reduced motion: drop the hover lift transitions */
@media (prefers-reduced-motion: reduce) {
    .tenant-app-shell .demo-end-cta__primary,
    .tenant-app-shell .demo-end-cta__secondary {
        transition: none;
    }
    .tenant-app-shell .demo-end-cta__primary:hover {
        transform: none;
    }
}

/* ── Exit-intent modal ───────────────────────────────────────────────
   Fires once per session when the cursor leaves the top of the viewport
   on hover-capable devices. Visually mirrors the welcome modal but is
   slightly more compact and uses a gold-edge accent. Suppressed on
   /demo/billing and on touch-only devices (handled in JS). */
.tenant-app-shell .demo-exit-intent {
    position: fixed;
    inset: 0;
    z-index: 2147483450;          /* below tour welcome modal (2147483500), above tour panel */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
}

.tenant-app-shell .demo-exit-intent.is-active {
    opacity: 1;
    pointer-events: auto;
}

.tenant-app-shell .demo-exit-intent[hidden] {
    display: none !important;
}

.tenant-app-shell .demo-exit-intent__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
}

.tenant-app-shell .demo-exit-intent__panel {
    position: relative;
    width: min(440px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 32px 30px 26px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow:
        0 30px 60px rgba(15, 23, 42, 0.32),
        0 0 0 1px rgba(196, 149, 16, 0.18);
    text-align: center;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.32s cubic-bezier(0.18, 0.8, 0.32, 1.05);
}

.tenant-app-shell .demo-exit-intent.is-active .demo-exit-intent__panel {
    transform: translateY(0) scale(1);
}

.tenant-app-shell .demo-exit-intent__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    color: #6b6458;
    border: none;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.tenant-app-shell .demo-exit-intent__close:hover {
    background: rgba(26, 24, 21, 0.06);
    color: #1a1815;
}

.tenant-app-shell .demo-exit-intent__close:focus-visible {
    outline: 2px solid #c49510;
    outline-offset: 2px;
}

.tenant-app-shell .demo-exit-intent__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, #c49510, #a97807);
    color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(196, 149, 16, 0.32);
}

.tenant-app-shell .demo-exit-intent__icon svg {
    width: 28px;
    height: 28px;
}

.tenant-app-shell .demo-exit-intent__eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a97807;
}

.tenant-app-shell .demo-exit-intent__title {
    margin: 0 0 10px;
    font-family: var(--font-display, 'Space Grotesk'), 'Inter', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1815;
}

.tenant-app-shell .demo-exit-intent__sub {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.55;
    color: #3d3a34;
}

.tenant-app-shell .demo-exit-intent__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.tenant-app-shell .demo-exit-intent__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    background: linear-gradient(135deg, #c49510, #a97807) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(196, 149, 16, 0.34);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.tenant-app-shell .demo-exit-intent__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(196, 149, 16, 0.42);
    filter: brightness(1.05);
    color: #ffffff !important;
}

.tenant-app-shell .demo-exit-intent__cta:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.tenant-app-shell .demo-exit-intent__cta svg {
    width: 14px;
    height: 14px;
    color: #ffffff;
    flex-shrink: 0;
}

.tenant-app-shell .demo-exit-intent__tour {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    background: transparent;
    color: #3d3a34;
    border: 1px solid rgba(26, 24, 21, 0.16);
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.tenant-app-shell .demo-exit-intent__tour:hover {
    color: #1a1815;
    border-color: rgba(196, 149, 16, 0.42);
    background: rgba(196, 149, 16, 0.06);
}

.tenant-app-shell .demo-exit-intent__tour:focus-visible {
    outline: 2px solid #c49510;
    outline-offset: 2px;
}

.tenant-app-shell .demo-exit-intent__micro {
    margin: 0;
    font-size: 11.5px;
    color: #9a9188;
}

/* Reduced motion: drop the panel entrance + button hover transforms */
@media (prefers-reduced-motion: reduce) {
    .tenant-app-shell .demo-exit-intent,
    .tenant-app-shell .demo-exit-intent__panel,
    .tenant-app-shell .demo-exit-intent__cta {
        transition: none;
    }
    .tenant-app-shell .demo-exit-intent.is-active .demo-exit-intent__panel {
        transform: none;
    }
    .tenant-app-shell .demo-exit-intent__cta:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tenant-app-shell .demo-trial-cta,
    .tenant-app-shell .demo-tour__btn--cta.btn,
    .tenant-app-shell .demo-tour__btn--cta.btn-primary,
    .tenant-app-shell .demo-tour__btn--cta.btn-secondary {
        transition: none;
    }
    .tenant-app-shell .demo-trial-cta:hover,
    .tenant-app-shell .demo-tour__btn--cta.btn:hover,
    .tenant-app-shell .demo-tour__btn--cta.btn-primary:hover,
    .tenant-app-shell .demo-tour__btn--cta.btn-secondary:hover {
        transform: none;
    }
}

/* ── Welcome modal (centred, blocks everything but the watermark) ── */
.tenant-app-shell .demo-tour-welcome {
    position: fixed;
    inset: 0;
    z-index: 2147483500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: demo-tour-fade-in 0.22s ease-out;
}

.tenant-app-shell .demo-tour-welcome[hidden] {
    display: none !important;
}

.tenant-app-shell .demo-tour-welcome__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 24, 21, 0.46);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

.tenant-app-shell .demo-tour-welcome__panel {
    position: relative;
    max-width: 480px;
    width: 100%;
    padding: 40px 36px 32px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.32), 0 8px 22px rgba(15, 23, 42, 0.14);
    text-align: center;
    animation: demo-tour-pop 0.28s cubic-bezier(0.2, 0.9, 0.4, 1);
    isolation: isolate;
}

.tenant-app-shell .demo-tour-welcome__panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(90deg, transparent, #c49510 30%, #c49510 70%, transparent);
    z-index: -1;
}

.tenant-app-shell .demo-tour-welcome__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 0;
    background: rgba(26, 24, 21, 0.05);
    color: #6b6458;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.tenant-app-shell .demo-tour-welcome__close:hover {
    background: rgba(26, 24, 21, 0.12);
    color: #1a1815;
}

.tenant-app-shell .demo-tour-welcome__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #c49510, #a97807);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(196, 149, 16, 0.32);
}

.tenant-app-shell .demo-tour-welcome__icon svg {
    width: 28px;
    height: 28px;
}

.tenant-app-shell .demo-tour-welcome__title {
    margin: 0 0 10px;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1a1815;
}

.tenant-app-shell .demo-tour-welcome__sub {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.55;
    color: #6b6458;
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
}

.tenant-app-shell .demo-tour-welcome__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.tenant-app-shell .demo-tour-welcome__cta,
.tenant-app-shell .demo-tour-welcome__actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 14.5px;
    font-weight: 600;
    border-radius: 12px;
    gap: 8px;
}

.tenant-app-shell .demo-tour-welcome__cta svg,
.tenant-app-shell .demo-tour-welcome__actions .btn svg {
    width: 16px;
    height: 16px;
}

.tenant-app-shell .demo-tour-welcome__micro {
    margin: 0;
    font-size: 11.5px;
    color: #9a9188;
    letter-spacing: 0.04em;
}

/* ── Floating tour panel (bottom-right) ── */
.tenant-app-shell .demo-tour {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 360px;
    max-width: calc(100vw - 48px);
    z-index: 2147483400;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(26, 24, 21, 0.10);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.20), 0 6px 14px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    animation: demo-tour-slide-in 0.30s cubic-bezier(0.2, 0.9, 0.4, 1);
    isolation: isolate;
}

.tenant-app-shell .demo-tour[hidden] {
    display: none !important;
}

.tenant-app-shell .demo-tour::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #c49510 0%, #a97807 100%);
    z-index: 1;
}

.tenant-app-shell .demo-tour__header {
    padding: 18px 20px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tenant-app-shell .demo-tour__progress-wrap {
    flex: 1;
    min-width: 0;
}

.tenant-app-shell .demo-tour__progress-text {
    display: block;
    font-family: Inter, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9a9188;
    margin-bottom: 8px;
}

.tenant-app-shell .demo-tour__progress-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(26, 24, 21, 0.08);
    overflow: hidden;
}

.tenant-app-shell .demo-tour__progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #c49510, #a97807);
    border-radius: 999px;
    transition: width 0.32s ease;
    box-shadow: 0 0 8px rgba(196, 149, 16, 0.42);
}

.tenant-app-shell .demo-tour__close {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 0;
    background: rgba(26, 24, 21, 0.05);
    color: #6b6458;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.tenant-app-shell .demo-tour__close:hover {
    background: rgba(26, 24, 21, 0.12);
    color: #1a1815;
}

.tenant-app-shell .demo-tour__body {
    padding: 4px 20px 18px;
}

.tenant-app-shell .demo-tour__eyebrow {
    margin: 0 0 8px;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a97807;
}

.tenant-app-shell .demo-tour__title {
    margin: 0 0 10px;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1.22;
    color: #1a1815;
}

.tenant-app-shell .demo-tour__copy {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.58;
    color: #6b6458;
}

.tenant-app-shell .demo-tour__footer {
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(26, 24, 21, 0.06);
    background: rgba(26, 24, 21, 0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.tenant-app-shell .demo-tour__nav {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.tenant-app-shell .demo-tour__btn {
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
}

.tenant-app-shell .demo-tour__btn svg {
    width: 14px;
    height: 14px;
}

.tenant-app-shell .demo-tour__btn--skip {
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
}

.tenant-app-shell .demo-tour__btn[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ── Animations ── */
@keyframes demo-tour-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes demo-tour-pop {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes demo-tour-slide-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .tenant-app-shell .demo-tour-welcome,
    .tenant-app-shell .demo-tour-welcome__panel,
    .tenant-app-shell .demo-tour {
        animation: none;
    }
}

/* ── Mobile (≤ 900px) ── */
@media (max-width: 900px) {
    .tenant-app-shell .demo-tour {
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
        max-width: none;
    }
    .tenant-app-shell .demo-tour-welcome__panel {
        padding: 32px 24px 24px;
    }
    .tenant-app-shell .demo-tour-launch {
        padding: 0 12px;
    }
    .tenant-app-shell .demo-tour-launch span {
        display: none;
    }
}


/* ── DEMO TOUR SPOTLIGHT (polished) ───────────────────────────────
   Frosted-glass backdrop blur dim, multi-layer gold ring with a
   white inner edge, spring scale-in entrance, slower elegant pulse,
   smooth position transitions. The whole container is fixed-positioned
   so it can sit on top of the demo's overflow-hidden .content scroll
   container. JS computes the highlighted element's bounding rect on
   every step change, scroll, and resize, then updates the overlay
   clip-path and the ring position via inline styles. */

.tenant-app-shell .demo-tour-spotlight {
    position: fixed;
    inset: 0;
    z-index: 2147483380;     /* below tour panel (2147483400), above page content */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.tenant-app-shell .demo-tour-spotlight.is-active {
    opacity: 1;
}

.tenant-app-shell .demo-tour-spotlight[hidden] {
    display: none !important;
}

/* Dim overlay — frosted glass via backdrop-filter, with a clip-path
   hole at the target. Saturate dial-down + slight brightness drop
   gives the unspotlit area a "deactivated" feel without going pitch
   black. Falls back gracefully on browsers without backdrop-filter. */
.tenant-app-shell .demo-tour-spotlight__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(3px) saturate(0.85) brightness(0.92);
    -webkit-backdrop-filter: blur(3px) saturate(0.85) brightness(0.92);
    transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Crisp gold ring — positioned via inline style by the JS.
   The ring's position, size, AND border-radius are all set inline by
   the JS so they exactly match the spotlit element's geometry. The
   visual is a single solid 3px gold border + a thin 1px gold hairline
   spread + a tiny opacity-only "presence" pulse. Zero blur radius
   anywhere, zero soft halo to bleed into a fuzzy edge. */
.tenant-app-shell .demo-tour-spotlight__ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 3px solid #c49510;
    border-radius: 12px;          /* fallback — JS overrides per element */
    background: transparent;
    box-shadow:
        0 0 0 1px rgba(196, 149, 16, 0.85);
    transform: scale(1);
    transform-origin: center center;
    transform-box: fill-box;
    transition:
        top       0.42s cubic-bezier(0.4, 0, 0.2, 1),
        left      0.42s cubic-bezier(0.4, 0, 0.2, 1),
        width     0.42s cubic-bezier(0.4, 0, 0.2, 1),
        height    0.42s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.42s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);   /* spring overshoot */
}

/* Spring scale-in: when JS adds .is-entering, the ring starts slightly
   compressed; removing the class snaps to scale(1) with overshoot. */
.tenant-app-shell .demo-tour-spotlight__ring.is-entering {
    transform: scale(0.96);
}

/* Crisp pulse — modulates ONLY the alpha of the single hairline
   spread shadow. Spread radius stays pinned at 1px so the edge
   never moves and never blurs. The eye sees a subtle rhythmic glow
   instead of a breathing fuzz. */
@keyframes demo-tour-spotlight-pulse {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(196, 149, 16, 0.85);
    }
    50% {
        box-shadow: 0 0 0 1px rgba(196, 149, 16, 1);
    }
}

.tenant-app-shell .demo-tour-spotlight.is-active .demo-tour-spotlight__ring {
    animation: demo-tour-spotlight-pulse 2.4s ease-in-out infinite;
}

/* Pause the pulse during the spring entrance so it doesn't fight the
   scale animation. */
.tenant-app-shell .demo-tour-spotlight__ring.is-entering {
    animation: none;
}

/* Tour panel body crossfade — when JS swaps step content, the body
   wrapper briefly fades and slides up before the new content paints. */
.tenant-app-shell .demo-tour__body {
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.tenant-app-shell .demo-tour__body.is-fading {
    opacity: 0;
    transform: translateY(6px);
}

@media (prefers-reduced-motion: reduce) {
    .tenant-app-shell .demo-tour-spotlight,
    .tenant-app-shell .demo-tour-spotlight__overlay,
    .tenant-app-shell .demo-tour-spotlight__ring,
    .tenant-app-shell .demo-tour__body {
        animation: none !important;
        transition: none !important;
    }
}