/* Cookie Portal demo pages 2026-09-02 */
.demo-body .auth-main,
.demo-main {
    min-height: 100vh;
    background: #eef4f8;
    color: #0f172a;
}

.demo-shell {
    width: min(1240px, calc(100% - 28px));
    margin: 0 auto;
    padding: 34px 0 56px;
    display: grid;
    gap: 18px;
}

.demo-hero,
.demo-panel,
.demo-card {
    border: 1px solid #dbe5ee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .065);
}

.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 22px;
}

.demo-hero h1 {
    margin: 4px 0 8px;
    color: #0f172a;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.05;
    letter-spacing: 0;
}

.demo-hero p,
.demo-card p,
.demo-panel p {
    margin: 0;
    color: #526173;
    font-size: 13px;
    line-height: 1.55;
}

.demo-nav,
.demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.demo-nav a,
.demo-actions a,
.demo-actions button,
.demo-card a,
.demo-card button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid #0f766e;
    border-radius: 7px;
    background: #0f766e;
    color: #ffffff;
    padding: 8px 12px;
    font: 850 12px/1.1 system-ui,-apple-system,Segoe UI,sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.demo-nav a.secondary,
.demo-actions .secondary,
.demo-card .secondary {
    border-color: #d8e2eb;
    background: #f8fafc;
    color: #0f172a;
}

.demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.demo-card {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 18px;
    min-height: 210px;
}

.demo-card span,
.demo-panel span {
    color: #0f766e;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.demo-card h2,
.demo-panel h2 {
    margin: 0;
    color: #0f172a;
    font-size: 19px;
    line-height: 1.15;
}

.demo-checks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.demo-checks article {
    border: 1px solid #dbe5ee;
    border-radius: 8px;
    background: #f8fafc;
    padding: 12px;
}

.demo-checks strong,
.demo-checks small {
    display: block;
}

.demo-checks strong {
    color: #0f172a;
    font-size: 14px;
}

.demo-checks small {
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

.demo-panel {
    padding: 18px;
    display: grid;
    gap: 12px;
}

.demo-code {
    overflow: auto;
    border: 1px solid #dbe5ee;
    border-radius: 8px;
    background: #101827;
    color: #dbeafe;
    padding: 12px;
    font: 12px/1.5 Consolas,Monaco,monospace;
}

.demo-status-pill {
    display: inline-flex;
    width: max-content;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    background: #ecfeff;
    color: #0f766e;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 900;
}

@media (max-width: 980px) {
    .demo-hero,
    .demo-grid,
    .demo-checks {
        grid-template-columns: 1fr;
    }
}


/* Demo status board 2026-09-02 */
.demo-status-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.demo-status-board article {
    border: 1px solid #dbe5ee;
    border-radius: 9px;
    background: #ffffff;
    padding: 13px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
}

.demo-status-board span,
.demo-status-board strong,
.demo-status-board small {
    display: block;
    overflow-wrap: anywhere;
}

.demo-status-board span {
    color: #64748b;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.demo-status-board strong {
    margin-top: 5px;
    color: #0f172a;
    font-size: 17px;
    line-height: 1.15;
}

.demo-status-board strong[data-state="ok"] { color: #0f766e; }
.demo-status-board strong[data-state="warn"] { color: #b45309; }
.demo-status-board strong[data-state="wait"] { color: #475569; }

.demo-status-board small {
    margin-top: 5px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

.demo-code {
    max-height: 220px;
}

@media (max-width: 980px) {
    .demo-status-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .demo-status-board {
        grid-template-columns: 1fr;
    }
}


/* Demo matrix 2026-09-02 */
.demo-matrix {
    display: grid;
    grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr);
    gap: 14px;
    align-items: start;
    border: 1px solid #dbe5ee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .055);
    padding: 18px;
}

.demo-matrix > div {
    display: grid;
    gap: 7px;
}

.demo-matrix span {
    color: #0f766e;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.demo-matrix h2 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.15;
}

.demo-matrix p {
    margin: 0;
    color: #526173;
    font-size: 13px;
    line-height: 1.55;
}

.demo-matrix table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border: 1px solid #dbe5ee;
    border-radius: 8px;
    font-size: 12px;
}

.demo-matrix th,
.demo-matrix td {
    padding: 10px 11px;
    border-bottom: 1px solid #e5edf5;
    text-align: left;
    vertical-align: top;
}

.demo-matrix th {
    background: #f8fafc;
    color: #334155;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.demo-matrix tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 860px) {
    .demo-matrix {
        grid-template-columns: 1fr;
        overflow-x: auto;
    }

    .demo-matrix table {
        min-width: 640px;
    }
}


/* Privacy demo journey 2026-09-02 */
.demo-journey {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.demo-journey article {
    display: grid;
    gap: 10px;
    align-content: start;
    border: 1px solid #dbe5ee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
    padding: 16px;
}

.demo-journey span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #ecfeff;
    color: #0f766e;
    font-size: 12px;
    font-weight: 950;
}

.demo-journey strong {
    color: #0f172a;
    font-size: 16px;
    line-height: 1.15;
}

.demo-journey p {
    margin: 0;
    color: #526173;
    font-size: 12px;
    line-height: 1.5;
}

.demo-journey a,
.demo-journey button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    min-height: 34px;
    border: 1px solid #0f766e;
    border-radius: 7px;
    background: #0f766e;
    color: #ffffff;
    padding: 8px 11px;
    font: 850 12px/1.1 system-ui,-apple-system,Segoe UI,sans-serif;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 1040px) {
    .demo-journey {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .demo-journey {
        grid-template-columns: 1fr;
    }
}


/* Demo center guidance polish 2026-09-02 */
.demo-body { background: #eef4f8; color: #142033; }
.demo-main { padding: 14px 0 28px; }
.demo-shell { width: min(1500px, calc(100% - 28px)); gap: 12px; }
.demo-hero { min-height: 112px; padding: 16px; border-radius: 10px; align-items: center; }
.demo-hero h1 { font-size: clamp(24px, 2.7vw, 36px); line-height: 1.08; margin-bottom: 7px; }
.demo-hero p { font-size: 12.5px; line-height: 1.5; max-width: 820px; }
.demo-nav { gap: 6px; }
.demo-nav a { min-height: 30px; padding: 7px 10px; border-radius: 7px; font-size: 10.8px; }
.demo-status-board,
.demo-checks,
.demo-grid { gap: 8px; }
.demo-status-board article,
.demo-checks article,
.demo-card,
.demo-panel,
.demo-matrix,
.demo-journey article { border-radius: 9px; box-shadow: 0 12px 30px rgba(15,23,42,.045); }
.demo-status-board article { padding: 11px; min-height: 76px; }
.demo-status-board strong { font-size: 15px; }
.demo-checks article { min-height: 78px; }
.demo-card { min-height: 168px; padding: 14px; }
.demo-card h2 { font-size: 16px; line-height: 1.16; }
.demo-card p { font-size: 12px; line-height: 1.45; }
.demo-install-panel { grid-template-columns: minmax(0,.72fr) minmax(420px,1fr); align-items: start; }
.demo-install-copy { display: grid; gap: 6px; }
.demo-install-copy h2 { font-size: 20px; line-height: 1.12; margin: 0; }
.demo-install-copy p { font-size: 12.5px; line-height: 1.5; max-width: 760px; }
.demo-install-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.demo-install-steps article { display: grid; gap: 4px; border: 1px solid #dbe5ef; border-radius: 8px; background: #f8fafc; padding: 10px; }
.demo-install-steps strong { color: #0f172a; font-size: 12px; line-height: 1.15; }
.demo-install-steps small { color: #526173; font-size: 10.8px; line-height: 1.35; }
.demo-install-panel .demo-code { grid-column: 1 / -1; max-height: 160px; font-size: 11px; }
.secondary-code { background: #172033; color: #ccfbf1; }
.demo-install-panel .demo-actions { grid-column: 1 / -1; }
.demo-matrix { padding: 14px; }
.demo-matrix h2 { font-size: 18px; }
.demo-matrix p,
.demo-matrix td { font-size: 11.5px; }
@media (max-width: 980px) {
  .demo-install-panel,
  .demo-install-steps { grid-template-columns: 1fr; }
}


/* Demo install route clarity 2026-09-02 */
.demo-route-panel, .blocking-install-guide { border-color: #99f6e4; background: linear-gradient(135deg,#f0fdfa,#fff 72%); }
.demo-route-panel h2, .blocking-install-guide h2 { margin: 0 0 4px; font-size: 19px; line-height: 1.12; color: #0f172a; }
.demo-route-panel p { margin: 0 0 10px; color: #526174; font-size: 12px; line-height: 1.45; }
.demo-route-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.demo-route-grid article { display: grid; gap: 4px; min-height: 88px; border: 1px solid #dbe5ef; border-radius: 8px; background: #fff; padding: 10px; }
.demo-route-grid strong { color: #0f172a; font-size: 12.5px; line-height: 1.18; }
.demo-route-grid small { color: #526174; font-size: 10.8px; line-height: 1.35; }
.demo-install-panel code, .demo-route-panel code { border-radius: 5px; background: #eef6ff; color: #1e3a8a; padding: 1px 4px; }
@media(max-width:1100px){ .demo-route-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:640px){ .demo-route-grid { grid-template-columns: 1fr; } }


/* Demo cockpit minimal UX 2026-09-02 */
.demo-command-board{grid-template-columns:repeat(4,minmax(0,1fr))!important}.demo-choice-panel{display:grid;grid-template-columns:minmax(240px,.55fr) minmax(0,1.45fr);gap:12px;align-items:stretch;border:1px solid #dbe5ef;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 14px 34px rgba(15,23,42,.045);padding:14px}.demo-choice-panel h2{margin:2px 0 5px;color:#0f172a;font-size:20px;line-height:1.12}.demo-choice-panel p{margin:0;color:#526174;font-size:12px;line-height:1.45}.demo-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.demo-choice-grid a,.demo-choice-grid button{display:grid;gap:4px;align-content:start;min-height:106px;border:1px solid #dbe5ef;border-radius:9px;background:#fff;color:inherit;padding:11px;text-align:left;text-decoration:none;font:inherit;cursor:pointer;box-shadow:none;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.demo-choice-grid a:hover,.demo-choice-grid button:hover{border-color:#14b8a6;box-shadow:0 15px 32px rgba(15,118,110,.08);transform:translateY(-1px)}.demo-choice-grid span{width:max-content;border:1px solid #99f6e4;border-radius:999px;background:#ecfdf5;color:#0f766e;padding:3px 6px;font-size:9px;font-weight:950;text-transform:uppercase}.demo-choice-grid strong{color:#0f172a;font-size:13px;line-height:1.18}.demo-choice-grid small{color:#526174;font-size:10.8px;line-height:1.35}.demo-collapsible-panel{display:block!important;padding:0!important;overflow:hidden}.demo-collapsible-panel>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 14px;cursor:pointer;list-style:none}.demo-collapsible-panel>summary::-webkit-details-marker{display:none}.demo-collapsible-panel>summary span{color:#0f766e;font-size:9.5px;font-weight:950;text-transform:uppercase}.demo-collapsible-panel>summary strong{color:#0f172a;font-size:13px;line-height:1.15}.demo-collapsible-panel>summary em{border:1px solid #dbe5ef;border-radius:999px;background:#fff;color:#475569;padding:5px 8px;font-size:10px;font-style:normal;font-weight:950}.demo-collapsible-panel[open]>summary{border-bottom:1px solid #dbe5ef;background:#fbfdff}.demo-collapsible-panel[open]>summary em{border-color:#99f6e4;background:#ecfdf5;color:#047857}.demo-collapsible-panel>div,.demo-collapsible-panel>table,.demo-collapsible-panel>.demo-install-copy,.demo-collapsible-panel>.demo-install-steps,.demo-collapsible-panel>.demo-code,.demo-collapsible-panel>.demo-actions{margin:12px 14px}.demo-collapsible-panel.demo-install-panel{grid-template-columns:1fr!important}.demo-collapsible-panel.demo-install-panel[open]{display:grid!important}.demo-route-panel{padding:14px!important}.demo-route-grid article{box-shadow:none}.demo-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.demo-card{box-shadow:0 10px 26px rgba(15,23,42,.04)!important}.demo-card a,.demo-card button{min-height:32px!important;font-size:11px!important}.demo-hero{background:linear-gradient(135deg,#0f172a,#143238)!important}.demo-hero h1{max-width:760px}.demo-hero p{color:#d8e3ee!important}.demo-hero code{background:rgba(255,255,255,.12)!important;color:#ccfbf1!important}@media(max-width:1120px){.demo-command-board,.demo-choice-grid,.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.demo-choice-panel{grid-template-columns:1fr}}@media(max-width:640px){.demo-command-board,.demo-choice-grid,.demo-grid{grid-template-columns:1fr!important}.demo-collapsible-panel>summary{align-items:flex-start;flex-direction:column;padding:10px 14px}.demo-collapsible-panel>div,.demo-collapsible-panel>table,.demo-collapsible-panel>.demo-install-copy,.demo-collapsible-panel>.demo-install-steps,.demo-collapsible-panel>.demo-code,.demo-collapsible-panel>.demo-actions{margin:10px}}


/* Demo practice flow 2026-09-02 */
.demo-practice-flow{display:grid;grid-template-columns:minmax(260px,.58fr) minmax(0,1.42fr);gap:12px;align-items:stretch;border:1px solid #cfe4ee;border-radius:10px;background:linear-gradient(135deg,#ffffff,#f6fbfc 78%);box-shadow:0 14px 34px rgba(15,23,42,.045);padding:14px}.demo-practice-flow h2{margin:2px 0 5px;color:#0f172a;font-size:20px;line-height:1.12}.demo-practice-flow p{margin:0;color:#526174;font-size:12px;line-height:1.45;max-width:660px}.demo-practice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.demo-practice-grid a,.demo-practice-grid button{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 8px;align-content:start;min-height:118px;border:1px solid #dbe5ef;border-radius:9px;background:#fff;color:inherit;padding:11px;text-align:left;text-decoration:none;font:inherit;cursor:pointer;box-shadow:none;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.demo-practice-grid a:hover,.demo-practice-grid button:hover{border-color:#14b8a6;box-shadow:0 16px 34px rgba(15,118,110,.08);transform:translateY(-1px)}.demo-practice-grid span{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#eef8fb;color:#0f766e;font-size:10px;font-weight:950}.demo-practice-grid strong{align-self:center;color:#0f172a;font-size:12.8px;line-height:1.18}.demo-practice-grid small{grid-column:1/-1;color:#526174;font-size:10.8px;line-height:1.35}.demo-checks{grid-template-columns:repeat(4,minmax(0,1fr))!important}.demo-checks article{min-height:66px!important;padding:10px!important;box-shadow:none!important}.demo-checks strong{font-size:12px!important}.demo-checks small{font-size:10.7px!important}@media(max-width:1120px){.demo-practice-flow{grid-template-columns:1fr}.demo-practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.demo-practice-grid,.demo-checks{grid-template-columns:1fr!important}}


/* CP premium demo finish 2026-09-03 */
.demo-body,
.ecommerce-demo-body {
    background: #f3f4f0 !important;
    color: #171b16 !important;
    font-family: "Helvetica Neue", Inter, "Segoe UI", Arial, sans-serif !important;
    letter-spacing: 0 !important;
}
.demo-body *:not(code):not(pre),
.ecommerce-demo-body *:not(code):not(pre) {
    font-family: "Helvetica Neue", Inter, "Segoe UI", Arial, sans-serif !important;
    letter-spacing: 0 !important;
}
.demo-main {
    padding: 18px 0 32px !important;
}
.demo-shell {
    width: min(1480px, calc(100% - 36px)) !important;
    gap: 12px !important;
}
.demo-hero {
    min-height: 132px !important;
    border: 1px solid #1f2a24 !important;
    border-radius: 22px !important;
    background: radial-gradient(circle at 78% 20%, rgba(169,255,83,.18), transparent 26%), linear-gradient(135deg,#111 0%,#1d2420 58%,#143c35 100%) !important;
    box-shadow: 0 24px 64px rgba(17,17,17,.16) !important;
    overflow: hidden !important;
}
.demo-hero .eyebrow,
.demo-hero h1,
.demo-hero p {
    letter-spacing: 0 !important;
}
.demo-hero h1 {
    max-width: 760px !important;
    font-size: clamp(28px, 3vw, 44px) !important;
    font-weight: 820 !important;
    line-height: 1.02 !important;
}
.demo-hero p {
    max-width: 780px !important;
    color: rgba(255,255,255,.75) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.demo-nav {
    align-self: center !important;
    justify-content: flex-end !important;
}
.demo-nav a {
    min-height: 34px !important;
    border-radius: 999px !important;
    border-color: rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    backdrop-filter: blur(12px) !important;
}
.demo-nav a.secondary {
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.78) !important;
}
.demo-nav a:hover,
.demo-nav a:focus {
    background: #a9ff53 !important;
    border-color: #a9ff53 !important;
    color: #111 !important;
}
.demo-status-board article,
.demo-choice-panel,
.demo-practice-flow,
.demo-checks article,
.demo-card,
.demo-panel,
.demo-matrix,
.demo-journey article,
.demo-route-panel {
    border-radius: 18px !important;
    border-color: #e0e5dd !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(30,33,29,.045) !important;
}
.demo-status-board article {
    min-height: 82px !important;
    padding: 12px !important;
}
.demo-status-board span,
.demo-checks strong,
.demo-card span,
.demo-panel span,
.demo-choice-grid span,
.demo-practice-grid span {
    letter-spacing: 0 !important;
}
.demo-status-board span,
.demo-choice-grid span,
.demo-practice-grid span,
.demo-card span,
.demo-panel > span,
.demo-route-panel > div > span {
    color: #51720a !important;
}
.demo-status-board strong {
    color: #111 !important;
    font-size: 16px !important;
    font-weight: 820 !important;
}
.demo-choice-panel,
.demo-practice-flow {
    grid-template-columns: minmax(260px,.52fr) minmax(0,1.48fr) !important;
    padding: 14px !important;
}
.demo-choice-panel h2,
.demo-practice-flow h2,
.demo-matrix h2,
.demo-install-copy h2,
.demo-route-panel h2 {
    color: #111 !important;
    font-size: 20px !important;
    line-height: 1.12 !important;
    font-weight: 820 !important;
}
.demo-choice-panel p,
.demo-practice-flow p,
.demo-matrix p,
.demo-install-copy p,
.demo-route-panel p {
    color: #5f695f !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}
.demo-choice-grid a,
.demo-choice-grid button,
.demo-practice-grid a,
.demo-practice-grid button,
.demo-route-grid article,
.demo-install-steps article {
    border-radius: 16px !important;
    border-color: #e0e5dd !important;
    background: #fbfcf8 !important;
    box-shadow: none !important;
}
.demo-choice-grid a:hover,
.demo-choice-grid button:hover,
.demo-practice-grid a:hover,
.demo-practice-grid button:hover {
    border-color: #a9ff53 !important;
    background: #f8fff0 !important;
    box-shadow: 0 14px 34px rgba(30,33,29,.055) !important;
}
.demo-choice-grid span,
.demo-practice-grid span {
    border-color: #a9ff53 !important;
    background: #f0ffd9 !important;
    color: #426600 !important;
}
.demo-choice-grid strong,
.demo-practice-grid strong,
.demo-card h2,
.demo-panel h2,
.demo-route-grid strong,
.demo-install-steps strong,
.demo-journey strong {
    color: #111 !important;
    font-weight: 820 !important;
}
.demo-choice-grid small,
.demo-practice-grid small,
.demo-checks small,
.demo-card p,
.demo-route-grid small,
.demo-install-steps small,
.demo-journey p {
    color: #5f695f !important;
}
.demo-checks {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
}
.demo-checks article {
    min-height: 72px !important;
    background: #fbfcf8 !important;
}
.demo-card {
    min-height: 164px !important;
}
.demo-card a,
.demo-card button,
.demo-actions a,
.demo-actions button,
.demo-journey a,
.demo-journey button {
    border-radius: 999px !important;
    border-color: #111 !important;
    background: #111 !important;
    color: #fff !important;
    font-weight: 850 !important;
}
.demo-card a.secondary,
.demo-card button.secondary,
.demo-actions .secondary,
.demo-journey .secondary {
    background: #fff !important;
    color: #111 !important;
}
.demo-code,
.stress-log {
    border-radius: 16px !important;
    background: #111 !important;
    color: #e8f3ef !important;
    border-color: #202820 !important;
}
.demo-collapsible-panel > summary {
    min-height: 54px !important;
}
.demo-collapsible-panel > summary strong {
    color: #111 !important;
    font-size: 13px !important;
}
.demo-collapsible-panel > summary em {
    border-radius: 999px !important;
    background: #f7f8f4 !important;
    color: #111 !important;
}
.demo-route-panel {
    background: linear-gradient(135deg,#fff,#f8fff0 92%) !important;
}
.demo-route-grid article {
    min-height: 96px !important;
}
@media(max-width:1120px){
    .demo-choice-panel,.demo-practice-flow { grid-template-columns: 1fr !important; }
    .demo-nav { justify-content: flex-start !important; }
}
@media(max-width:720px){
    .demo-shell { width: min(100% - 22px, 1480px) !important; }
    .demo-hero { border-radius: 18px !important; }
    .demo-checks,.demo-status-board,.demo-choice-grid,.demo-practice-grid,.demo-grid { grid-template-columns: 1fr !important; }
}


/* Guided demo product cockpit 2026-09-03 */
.demo-body,
.demo-main {
    font-family: Inter, "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background: linear-gradient(180deg, #f7f8f4 0%, #eef2ed 100%);
}
.demo-shell {
    width: min(100% - 36px, 1480px);
    gap: 14px;
}
.demo-hero,
.demo-panel,
.demo-card,
.demo-guide-panel,
.demo-cms-panel {
    border-color: #e0e5dd;
    border-radius: 16px;
    box-shadow: 0 16px 42px rgba(30, 33, 29, .045);
}
.demo-hero {
    background: linear-gradient(135deg, #ffffff, #f8faf6 78%);
    padding: 20px;
}
.demo-hero h1 {
    font-size: clamp(26px, 2.4vw, 40px);
    font-weight: 820;
    letter-spacing: 0;
}
.demo-nav a,
.demo-actions a,
.demo-actions button,
.demo-card a,
.demo-card button,
.demo-guide-grid a,
.demo-guide-grid button {
    min-height: 34px;
    border-radius: 10px;
    border-color: #111;
    background: #111;
    color: #fff;
    font-size: 11.5px;
    font-weight: 820;
    box-shadow: none;
}
.demo-nav a.secondary,
.demo-actions .secondary,
.demo-card .secondary {
    border-color: #dfe5dc;
    background: #fff;
    color: #111;
}
.demo-nav a:hover,
.demo-actions a:hover,
.demo-actions button:hover,
.demo-card a:hover,
.demo-card button:hover,
.demo-guide-grid a:hover,
.demo-guide-grid button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(17, 17, 17, .09);
}
.demo-guide-panel,
.demo-cms-panel {
    display: grid;
    gap: 12px;
    border: 1px solid #e0e5dd;
    background: rgba(255,255,255,.9);
    padding: 16px;
}
.demo-guide-panel {
    grid-template-columns: minmax(260px, .45fr) minmax(0, 1fr);
    align-items: stretch;
}
.demo-guide-copy {
    display: grid;
    align-content: center;
    gap: 8px;
    border-radius: 14px;
    background: #111;
    color: #fff;
    padding: 18px;
}
.demo-guide-copy .eyebrow { color: #a9ff53; }
.demo-guide-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.08;
}
.demo-guide-copy p:not(.eyebrow) {
    color: rgba(255,255,255,.72);
    font-size: 12.5px;
    line-height: 1.48;
}
.demo-guide-grid,
.demo-cms-grid,
.demo-route-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.demo-cms-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.demo-guide-grid article,
.demo-cms-grid article,
.demo-route-grid article {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 132px;
    border: 1px solid #e0e5dd;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
}
.demo-guide-grid span,
.demo-cms-panel .eyebrow,
.demo-card span,
.demo-panel span {
    color: #0f766e;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}
.demo-guide-grid strong,
.demo-cms-grid strong,
.demo-route-grid strong {
    color: #111827;
    font-size: 13.5px;
    line-height: 1.18;
}
.demo-guide-grid small,
.demo-cms-grid small,
.demo-route-grid small {
    color: #647066;
    font-size: 11.3px;
    line-height: 1.38;
}
.demo-guide-grid a,
.demo-guide-grid button {
    margin-top: auto;
    width: max-content;
    max-width: 100%;
    padding: 0 11px;
    text-decoration: none;
    cursor: pointer;
}
.demo-cms-panel > div:first-child {
    display: grid;
    gap: 6px;
    max-width: 760px;
}
.demo-cms-panel h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(20px, 2vw, 30px);
}
.demo-cms-panel p:not(.eyebrow) {
    margin: 0;
    color: #647066;
    font-size: 12.5px;
    line-height: 1.48;
}
.demo-status-board article,
.demo-checks article {
    border-color: #e0e5dd;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
}
.demo-command-board article:first-child,
.demo-checks article:first-child {
    border-color: #c7f1b6;
    background: #f8fff0;
}
.demo-collapsible-panel summary {
    cursor: pointer;
    border-radius: 12px;
}
@media (max-width: 1160px) {
    .demo-guide-panel,
    .demo-guide-grid,
    .demo-cms-grid,
    .demo-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .demo-shell { width: min(100% - 20px, 100%); }
    .demo-guide-panel,
    .demo-guide-grid,
    .demo-cms-grid,
    .demo-route-grid { grid-template-columns: 1fr; }
    .demo-guide-grid article,
    .demo-cms-grid article,
    .demo-route-grid article { min-height: 0; }
}