/* Public guided trial: layered above the app without changing app layout. */
.demo-mode-banner { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px max(16px, calc((100vw - var(--max-width, 1480px))/2)); background:var(--ink); color:var(--selected); font-size:.82rem; font-weight:700; }
.demo-mode-banner span { display:flex; align-items:center; gap:8px; }.demo-mode-banner a { color:#fff; text-decoration:none; border-bottom:1px solid var(--mint); }.demo-mode-banner a:hover { color:var(--mint); }
.demo-sample-asset { display:flex; align-items:center; gap:14px; padding:14px; border:1px solid color-mix(in srgb, var(--brand-teal) 24%, transparent); background:var(--selected); color:var(--ink); margin:12px 0; }.demo-sample-asset img { width:92px; height:70px; object-fit:cover; background:linear-gradient(135deg,var(--selected),var(--mint)); }.demo-sample-asset.is-missing::before { content:'DEMO\A SOURCE'; white-space:pre; display:grid; place-items:center; width:92px; height:70px; flex:0 0 92px; color:var(--brand-teal); border:1px dashed var(--accent); font-size:.65rem; font-weight:800; text-align:center; letter-spacing:.08em; }.demo-sample-asset strong { display:block; font-size:.94rem; }.demo-sample-asset span { display:block; margin-top:3px; color:var(--muted); font-size:.8rem; }
.demo-tour-scrim { position:fixed; z-index:10020; background:color-mix(in srgb, var(--nav) 72%, transparent); pointer-events:auto; }.demo-tour-outline { position:fixed; z-index:10022; border:2px solid var(--mint); box-shadow:0 0 0 5px color-mix(in srgb, var(--mint) 18%, transparent),0 10px 30px rgba(0,0,0,.24); pointer-events:none; border-radius:4px; transition:all .14s ease; }.demo-tour-card { position:fixed; z-index:10023; width:min(370px, calc(100vw - 28px)); background:#fff; color:var(--nav-2); border:1px solid color-mix(in srgb, var(--brand-teal) 22%, transparent); box-shadow:0 20px 55px rgba(0,0,0,.32); padding:18px; border-radius:0; }.demo-tour-eyebrow { color:var(--brand-teal); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.demo-tour-title { margin:6px 0; font-size:1.08rem; font-weight:800; }.demo-tour-body { margin:0; color:var(--muted); font-size:.9rem; line-height:1.5; }.demo-tour-footer { display:flex; align-items:center; gap:8px; margin-top:15px; }.demo-tour-progress { color:var(--muted); font-size:.78rem; margin-right:auto; }.demo-tour-btn { border:1px solid #9ab6af; background:#fff; color:var(--ink); min-height:34px; padding:7px 11px; font:inherit; font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }.demo-tour-btn--primary { background:var(--brand-teal); color:#fff; border-color:var(--brand-teal); }.demo-tour-btn--exit { border:0; color:var(--muted); padding-left:0; }.demo-tour-toast { position:fixed; z-index:10040; right:18px; bottom:18px; max-width:min(380px, calc(100vw - 36px)); padding:12px 14px; color:var(--selected); background:var(--ink); box-shadow:0 10px 30px rgba(0,0,0,.25); font-size:.86rem; font-weight:700; }
.demo-tour-completion { position:fixed; inset:0; z-index:10050; display:grid; place-items:center; padding:16px; background:color-mix(in srgb, var(--nav) 82%, transparent); }
.demo-tour-completion-card { width:min(520px,100%); padding:26px 28px 24px; border:1px solid color-mix(in srgb, var(--brand-teal) 12%, transparent); border-radius:18px; background:#fff; color:var(--nav-2); text-align:center; box-shadow:0 22px 58px rgba(0,0,0,.34); }
.demo-tour-completion-card > i { display:grid; width:48px; height:48px; place-items:center; margin:0 auto 10px; border-radius:50%; color:#fff; background:var(--brand-teal); font-size:1.15rem; }
.demo-tour-completion-card h2 { margin:4px 0 8px; font-size:clamp(1.55rem,3.5vw,2.05rem); letter-spacing:-.04em; line-height:1.08; }
.demo-tour-completion-card p { margin:0 auto 8px; max-width:420px; color:var(--muted); line-height:1.45; }
.demo-tour-completion-card a { display:inline-flex; align-items:center; gap:9px; justify-content:center; min-height:42px; padding:9px 18px; border-radius:10px; color:#fff; background:var(--brand-teal); font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; }
.demo-tour-completion-card a i { color:inherit; font-size:.9em; }
.demo-tour-completion-card > br { display:none; }
.demo-tour-completion-card [data-completion-exit] { margin-top:10px !important; margin-left:10px; border-radius:10px; min-height:42px; padding:9px 18px; }
.demo-tour-welcome { position:fixed; inset:0; z-index:10060; display:grid; place-items:center; padding:16px; background:color-mix(in srgb, var(--nav) 82%, transparent); }
.demo-tour-welcome-card { width:min(520px,100%); padding:26px 28px 24px; border:1px solid color-mix(in srgb, var(--brand-teal) 12%, transparent); border-radius:18px; background:#fff; color:var(--nav-2); text-align:center; box-shadow:0 22px 58px rgba(0,0,0,.34); }
.demo-tour-welcome-icon { display:grid; width:48px; height:48px; place-items:center; margin:0 auto 10px; border-radius:50%; color:#fff; background:var(--brand-teal); font-size:1.15rem; }
.demo-tour-welcome-card h1 { margin:4px 0 8px; font-size:clamp(1.55rem,3.5vw,2.05rem); letter-spacing:-.04em; line-height:1.08; }
.demo-tour-welcome-card > p { margin:0 auto; max-width:420px; color:var(--muted); line-height:1.45; }
.demo-tour-welcome-card ul { display:grid; gap:7px; padding:0; margin:18px 0; list-style:none; text-align:left; }
.demo-tour-welcome-card li { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; background:var(--selected); color:var(--ink); font-size:.86rem; font-weight:700; }
.demo-tour-welcome-card li i { width:18px; color:var(--brand-teal); text-align:center; }
.demo-tour-welcome-actions { display:flex; justify-content:center; gap:8px; }
.demo-tour-welcome-card small { display:block; margin-top:12px; color:var(--muted); font-size:.74rem; }
@media (max-width: 700px) { .demo-mode-banner { align-items:flex-start; padding:8px 14px; font-size:.76rem; }.demo-tour-card { width:min(370px, calc(100vw - 28px)); max-height:calc(100vh - 28px); overflow-y:auto; }.demo-tour-outline { border-width:2px; }.demo-sample-asset img { width:75px; height:58px; } }
@media (max-width: 520px) { .demo-tour-completion-card [data-completion-exit] { margin-top:8px !important; margin-left:0; } }
@media (prefers-reduced-motion: reduce) { .demo-tour-outline { transition:none; } }

.demo-tour-keyboard-tip { margin:9px 0 0; color:var(--muted); font-size:.72rem; line-height:1.35; }

/* Keep every in-template demo modal centered in the viewport. */
.demo-mode .modal-backdrop,
.demo-mode .cp-overlay,
.demo-mode .demo-cogs-modal { align-items:center !important; justify-content:center !important; }

/* On wide screens, reserve a clear lane beside a highlighted modal for its tour copy. */
@media (min-width: 800px) {
    .demo-mode.demo-tour-modal-side-layout .modal-backdrop.show,
    .demo-mode.demo-tour-modal-side-layout .cp-overlay.cp-overlay--visible,
    .demo-mode.demo-tour-modal-side-layout .demo-cogs-modal.is-open {
        box-sizing: border-box;
        justify-content: center !important;
        padding: 18px 400px 18px 18px !important;
    }
    .demo-mode.demo-tour-modal-side-layout .modal-backdrop.show > .modal {
        width: 100% !important;
        max-width: min(800px, calc(100vw - 440px)) !important;
    }
    .demo-mode.demo-tour-modal-side-layout .cp-overlay.cp-overlay--visible > .cp-dialog {
        width: 100% !important;
        max-width: min(700px, calc(100vw - 440px)) !important;
    }
    .demo-mode.demo-tour-modal-side-layout .demo-cogs-modal.is-open > .demo-cogs-dialog {
        width: min(720px, 100%) !important;
        max-width: min(720px, calc(100vw - 440px)) !important;
    }
}

/* Keep template modals square and the tour's own dialog controls non-blocking. */
.demo-mode .modal,
.demo-mode .cp-dialog { border-radius:0 !important; }
.demo-tour-card,
.demo-tour-welcome-card,
.demo-tour-completion-card { border-radius:0; }
.demo-tour-welcome-card li,
.demo-tour-completion-card a,
.demo-tour-completion-card [data-completion-exit] { border-radius:0; }
.demo-tour-btn,
.demo-tour-completion-card a { transition:transform .16s ease, box-shadow .16s ease; }
.demo-mode .modal button:not(:disabled),
.demo-mode .cp-dialog button:not(:disabled) { transition:transform .16s ease, box-shadow .16s ease; }
.demo-tour-btn:hover,
.demo-tour-completion-card a:hover { transform:translateY(-2px); box-shadow:0 7px 16px color-mix(in srgb, var(--brand-teal) 18%, transparent); }
.demo-tour-btn--exit { transition:color .16s ease; }
.demo-tour-btn--exit:hover { color:var(--brand-teal); background:transparent; transform:none; box-shadow:none; }
.demo-mode .modal button:not(:disabled):hover,
.demo-mode .cp-dialog button:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 5px 12px color-mix(in srgb, var(--brand-teal) 14%, transparent); }
.demo-tour-btn:active,
.demo-tour-completion-card a:active { transform:translateY(0); }
.demo-mode .modal button:not(:disabled):active,
.demo-mode .cp-dialog button:not(:disabled):active { transform:translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .demo-tour-btn,
    .demo-tour-completion-card a,
    .demo-mode .modal button:not(:disabled),
    .demo-mode .cp-dialog button:not(:disabled) { transition:none; }
    .demo-tour-btn:hover,
    .demo-tour-completion-card a:hover,
    .demo-mode .modal button:not(:disabled):hover,
    .demo-mode .cp-dialog button:not(:disabled):hover { transform:none; }
}

/* Keep bold page and section headings in title case throughout the demo. */
.demo-mode h1,
.demo-mode h2,
.demo-mode h3,
.demo-mode h4,
.demo-mode h5,
.demo-mode h6,
.demo-mode .active-processing-title,
.demo-mode .choice-title,
.demo-mode .card-title,
.demo-mode .download-modal-title,
.demo-mode .feature-grid-title,
.demo-mode .footnotes-title,
.demo-mode .form-section-title,
.demo-mode .image-bank-panel-heading,
.demo-mode .image-bank-panel-title,
.demo-mode .image-bank-title,
.demo-mode .inv-params-section-title,
.demo-mode .outlet-usage-title,
.demo-mode .preview-image-heading,
.demo-mode .preview-media-title,
.demo-mode .saved-settings-title {
    text-transform: capitalize !important;
}