.demo-page { margin:0; background:#f5f8fa; color:#182f3b; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; }
.demo-page *, .demo-page *::before, .demo-page *::after { box-sizing:border-box; }
.demo-page [hidden] { display:none!important; }
.demo-page button,.demo-page input,.demo-page select { font:inherit; }
.demo-page button,.demo-page a,.demo-page select { -webkit-tap-highlight-color:transparent; }
.demo-page button { cursor:pointer; }
.demo-page button:disabled { cursor:default; opacity:.45; }
.demo-page :focus-visible { outline:3px solid #0f9388; outline-offset:4px; }
.demo-page a { color:#11665e; }
.demo-topbar { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 4%; background:#fff; border-bottom:1px solid #e4eae9; }
.demo-brand { display:flex; align-items:center; gap:12px; font-size:24px; color:#183936!important; text-decoration:none; line-height:1.1; }
.demo-brand small { display:block; margin-top:7px; font-size:9px; letter-spacing:2px; color:#6b807d; }
.demo-brand-icon { display:grid; place-items:center; background:#126f64; width:43px; height:43px; border-radius:13px; color:white; font-size:28px; }
.demo-top-actions { display:flex; align-items:center; gap:28px; }
.demo-safe { color:#647a77; font-size:12px; }.demo-safe>span,.demo-context-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#27a080; margin-right:6px; }
.demo-login { font-size:13px; font-weight:600; text-decoration:none; padding:10px 16px; border:1px solid #d7e3df; border-radius:9px; }
.demo-welcome { max-width:1160px; margin:0 auto; padding:65px 30px 25px; }
.demo-intro { text-align:center; }.demo-eyebrow { color:#27796c; font-size:11px; letter-spacing:1.5px; font-weight:700; text-transform:uppercase; }
.demo-intro h1 { font-size:clamp(36px,4.3vw,58px); line-height:1.12; letter-spacing:-2px; color:#173c37; margin:20px 0; font-weight:650; }.demo-intro h1 em { font-family:Georgia,serif; font-weight:400; color:#287d70; }
.demo-intro>p { max-width:540px; margin:0 auto; font-size:16px; line-height:1.8; color:#6a7f7c; }
.demo-role-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:50px; }
.demo-role-card { text-align:left; position:relative; display:flex; flex-direction:column; gap:16px; padding:29px; background:#fff; border:1px solid #dbe6e2; border-radius:18px; color:#607571; line-height:1.65; transition:transform .18s,box-shadow .18s; }
.demo-role-card:hover { transform:translateY(-4px); box-shadow:0 16px 35px #123c3710; }.demo-role-card--featured { border:2px solid #398978; background:#f9fdfb; padding:28px; }
.demo-role-icon { width:47px; height:47px; border-radius:12px; background:#eaf4ef; color:#287968; font-size:25px; display:grid; place-items:center; margin-bottom:5px; }
.demo-role-caption { font-size:9px; font-weight:750; letter-spacing:1.2px; color:#80928d; }.demo-role-card>strong { font-size:23px; color:#203f37; line-height:1.2; }.demo-role-tags { font-size:10px; color:#879690; margin-top:auto; padding-top:8px; }.demo-role-card b { border-top:1px solid #e5eee9; padding-top:17px; color:#246b59; display:flex; justify-content:space-between; }
.demo-recommended { position:absolute; right:19px; top:-13px; padding:4px 12px; border-radius:6px; background:#297c68; color:#fff; font-size:10px; }
.demo-welcome-footer { display:flex; justify-content:center; flex-wrap:wrap; gap:35px; margin:35px 0 22px; font-size:12px; color:#6e827b; }.demo-welcome-footer i { margin-right:5px; }
.demo-scope { text-align:center; font-size:11px; color:#73837e; line-height:1.7; }.demo-noscript { padding:20px; background:#fff5df; border-radius:10px; }
.demo-explorer { display:grid; grid-template-columns:268px minmax(0,1fr); }
.demo-sidebar { background:#fff; border-right:1px solid #e2e9e7; padding:25px 18px; height:calc(100vh - 88px); position:sticky; top:0; overflow:auto; scrollbar-width:thin; }
.demo-sidebar-intro label { font-size:9px; letter-spacing:1.5px; color:#7d8f89; font-weight:700; }.demo-sidebar-intro select { display:block; width:100%; padding:12px 8px; border:1px solid #dce8e1; border-radius:9px; margin-top:8px; color:#234e41; background:#f6faf7; font-size:12px; font-weight:650; }
.demo-search { display:flex; align-items:center; gap:7px; border:1px solid #e4eae7; border-radius:8px; padding:9px; margin:19px 0 13px; color:#7b8c84; }.demo-search input { min-width:0; width:100%; border:0; outline:none; font-size:12px; background:transparent; }
.demo-progress-label { display:flex; justify-content:space-between; align-items:center; font-size:10px; color:#7a8b85; margin-bottom:16px; }.demo-progress-label button { border:0; background:transparent; color:#197b64; font-size:10px; }
.demo-feature-group { font-size:10px; color:#81918b; text-transform:uppercase; letter-spacing:.7px; margin:22px 9px 8px; font-weight:650; }
.demo-feature { border:0; background:none; width:100%; display:flex; align-items:center; gap:8px; text-align:left; padding:10px 11px; border-radius:8px; color:#536b61; font-size:12px!important; margin-bottom:2px; line-height:1.45; }.demo-feature>span { flex:1; }.demo-feature:hover { background:#f4f8f6; }.demo-feature[aria-current="page"] { background:#eaf5ef; color:#18674f; font-weight:700; }.demo-feature>i { font-size:16px; }.demo-feature-complete { color:#20946b; }
.demo-sidebar-note { color:#83938c; font-size:11px; padding:20px 10px 0; border-top:1px solid #edf1ef; margin-top:24px; }
.demo-main { padding:25px 30px 40px; min-width:0; }.demo-context { display:flex; justify-content:space-between; gap:15px; font-size:10px; color:#72877d; letter-spacing:.3px; margin:0 2px 23px; }.demo-context-divider { margin:0 9px; color:#bdc9c2; }
.demo-guide { display:flex; align-items:flex-start; gap:15px; padding:23px; border:1px solid #cce4d9; border-radius:15px; background:#eef8f1; margin-bottom:24px; }.demo-guide-icon { flex-shrink:0; display:grid; place-items:center; width:38px; height:38px; background:#d5eddf; border-radius:12px; color:#21714e; font-size:23px; }.demo-guide-body { flex:1; min-width:0; }.demo-guide-meta { display:flex; gap:17px; align-items:center; font-size:9px; letter-spacing:1.3px; color:#4a8b64; font-weight:700; }.demo-guide-meta>span:last-child { color:#7b9c85; letter-spacing:0; }.demo-guide h2 { margin:9px 0; font-size:18px; color:#234d35; font-weight:700; }.demo-guide p { font-size:13px; line-height:1.7; color:#557160; margin:0; max-width:790px; }.demo-guide-buttons { display:flex; flex-direction:column; align-items:flex-end; gap:22px; }.demo-guide-buttons>div { display:flex; gap:7px; }.demo-step-dots { display:flex; gap:6px; margin-top:16px; }.demo-step-dots button { width:22px; height:5px; border:0; padding:0; background:#c8dfce; border-radius:4px; }.demo-step-dots button[aria-current="step"] { background:#2a8053; width:38px; }
.demo-button-primary,.demo-button-secondary { padding:9px 15px; border-radius:7px; border:1px solid #cddbd3; font-size:12px!important; font-weight:600!important; white-space:nowrap; }.demo-button-primary { background:#25794f; border-color:#25794f; color:#fff; }.demo-button-primary:hover { background:#1d6542; }.demo-button-secondary { background:#fff; color:#496753; }.demo-text-button { border:0; background:none; color:#658871; font-size:11px!important; }.demo-icon-button { border:0; background:#f0f5f2; border-radius:9px; color:#456858; font-size:25px!important; width:33px; height:33px; }
.demo-screen-bar { display:flex; justify-content:space-between; gap:12px; color:#6d8177; font-size:10px; padding:0 3px 10px; }.demo-screen-bar>span { display:flex; align-items:center; gap:7px; }.demo-sample-pill { font-size:8px; letter-spacing:1px; background:#e5ece7; border-radius:4px; padding:3px 6px; }
#demo-screen { background:#f8fafc; padding:20px; border:1px solid #e1e8ed; border-radius:14px; box-shadow:0 10px 25px #102f1910; min-height:470px; }
#demo-screen .pw { padding-top:0; }#demo-screen .pw-panel { margin-top:22px; }#demo-screen .pw-table-wrap { overflow:auto; }#demo-screen .pw-table { min-width:560px; }#demo-screen .pw-table th { white-space:nowrap; }#demo-screen .pw-table td { font-size:12px; }.demo-filter-bar { padding:0 24px 20px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.demo-filter-bar label,.demo-form-grid label { display:block; color:#627087; font-size:12px; font-weight:600; }.demo-filter-bar input,.demo-filter-bar select,.demo-form-grid input,.demo-form-grid select { display:block; width:100%; border:1px solid #dce5ef; border-radius:7px; background:white; padding:10px; margin-top:7px; color:#32455b; min-width:0; }.demo-row-button { border:1px solid #d7e4ea; background:white; color:#36718d; border-radius:6px; font-size:11px!important; padding:6px 9px; white-space:nowrap; }.demo-row-actions { display:flex; gap:5px; }.demo-status { display:inline-flex; padding:5px 10px; border-radius:20px; font-size:10px; font-weight:700; background:#fff5d7; color:#947014; }.demo-status--approved { color:#17775a; background:#e6f7ef; }.demo-status--rejected { color:#b04444; background:#fdeaea; }.demo-table-footer { padding:15px 24px; color:#8491a0; font-size:11px; border-top:1px solid #edf0f4; }.demo-highlight { outline:3px solid #22a57c!important; outline-offset:5px; border-radius:8px; }.demo-feedback { min-height:24px; padding:15px 2px 0; font-size:12px; color:#247a57; }.demo-screen-scope { margin-top:12px; }.demo-approval-lab { padding:18px 24px; border-top:1px solid #e5edf6; background:#f8fbff; border-radius:0 0 24px 24px; }.demo-approval-lab label { font-size:12px; color:#49617c; display:flex; gap:9px; align-items:center; }.demo-chain { margin-top:12px; display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:11px; color:#5c7892; }.demo-chain span { border:1px solid #d9e7ef; border-radius:6px; padding:6px 10px; background:white; }.demo-chain .is-current { border-color:#45a493; color:#15806c; background:#edfbf7; }
.demo-dialog { border:1px solid #e3ebe8; border-radius:20px; padding:0; max-width:760px; width:calc(100% - 32px); max-height:90vh; color:#294139; box-shadow:0 30px 90px #0c292b40; }.demo-dialog::backdrop { background:#19352f66; backdrop-filter:blur(3px); }.demo-dialog-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 28px; background:linear-gradient(120deg,#f0faf5,#f9fcfb); border-bottom:1px solid #e1ebe5; }.demo-dialog-header h2 { font-size:23px; margin:7px 0 0; }.demo-dialog .modal-body { padding:24px 28px; }.demo-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.demo-form-grid .demo-full-width { grid-column:1/-1; }.demo-form-hint { background:#eff8f4; padding:12px 15px; border-radius:8px; font-size:12px; line-height:1.7; color:#48795d; margin-top:16px; }.demo-dialog-footer { display:flex; align-items:center; gap:10px; padding:20px 28px; border-top:1px solid #e2ebe5; }.demo-dialog-footer>span { margin-right:auto; font-size:11px; color:#7c8f82; }.demo-detail-list { display:grid; grid-template-columns:1fr 2fr; gap:12px; font-size:13px; }.demo-detail-list dt { color:#7b8a83; font-weight:500; }.demo-detail-list dd { margin:0; overflow-wrap:anywhere; }.demo-skip { position:fixed; top:-100px; left:15px; z-index:100; padding:12px; background:#fff; }.demo-skip:focus { top:10px; }
@media(min-width:1600px) { .demo-main { max-width:1500px; width:100%; margin:0 auto; padding:30px 45px; } }
@media(max-width:1100px) { .demo-explorer { grid-template-columns:235px minmax(0,1fr); }.demo-main { padding:20px; }.demo-guide { flex-wrap:wrap; }.demo-guide-buttons { width:100%; flex-direction:row; justify-content:space-between; align-items:center; margin-left:53px; }.demo-role-card { padding:22px; }.demo-safe { display:none; } }
@media(max-width:760px) { .demo-topbar { min-height:75px; padding:16px 20px; }.demo-brand { font-size:19px; }.demo-brand small { font-size:7px; }.demo-login { font-size:11px; padding:9px; }.demo-brand-icon { width:36px; height:36px; }.demo-welcome { padding:40px 20px; }.demo-role-cards { grid-template-columns:1fr; gap:25px; margin-top:35px; }.demo-intro h1 { letter-spacing:-1px; }.demo-role-card { gap:12px; }.demo-welcome-footer { gap:16px; }.demo-explorer { display:block; }.demo-sidebar { position:static; height:auto; border-right:0; border-bottom:1px solid #dce7e0; padding:16px 20px; }#demo-feature-list { max-height:185px; overflow:auto; }.demo-sidebar-note { display:none; }.demo-search { margin-top:12px; }.demo-main { padding:20px 14px; }.demo-context { flex-wrap:wrap; font-size:9px; }.demo-guide { padding:17px; gap:10px; }.demo-guide-icon { display:none; }.demo-guide-buttons { margin-left:0; }.demo-guide h2 { font-size:17px; }#demo-screen { padding:12px; }.demo-filter-bar { grid-template-columns:1fr 1fr; padding:0 18px 18px; }.demo-form-grid { grid-template-columns:1fr; }.demo-dialog-header,.demo-dialog .modal-body,.demo-dialog-footer { padding:20px; }.demo-dialog-footer { flex-wrap:wrap; }.demo-dialog-footer>span { flex-basis:100%; }.demo-screen-bar { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .demo-page * { transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:420px) { .demo-topbar { gap:10px; padding:14px; }.demo-brand { gap:8px; font-size:17px; }.demo-brand small { letter-spacing:.7px; }.demo-login { font-size:10px; padding:8px; }.demo-top-actions { gap:0; }.demo-screen-bar { flex-wrap:wrap; } }

/* The scrim is visual only, keeping module navigation available. */
.demo-touring .demo-sidebar { z-index:44; }
#demo-picker-title { font-size:28px; color:#234e41; }
#demo-feature-picker>p { max-width:720px; line-height:1.8; color:#607571; }
.demo-feature-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; margin-top:25px; }
.demo-feature-choice { display:flex; flex-direction:column; gap:12px; text-align:left; padding:22px; border:1px solid #dbe6e2; border-radius:14px; background:#fff; color:#536b61; line-height:1.6; }
.demo-feature-choice:hover { border-color:#398978; background:#f9fdfb; }
.demo-feature-choice small { color:#6b807d; }
.demo-feature-choice strong { font-size:18px; color:#234e41; }
.demo-feature-choice b { margin-top:auto; padding-top:8px; color:#246b59; }
.demo-spotlight { position:fixed; inset:0; z-index:40; background:rgba(35,40,47,.64); pointer-events:none; }
.demo-touring .demo-guide { position:sticky; top:12px; z-index:43; box-shadow:0 12px 35px #0003; }
.demo-touring .demo-highlight { position:relative; z-index:42; }
.demo-touring .demo-highlight:not(button) { background-color:#fff; }
.demo-highlight { scroll-margin-block:260px 35px; }
.demo-guide-buttons small { font-size:10px; color:#557160; white-space:nowrap; }
.demo-module-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:24px 0; }
.demo-module-stat { padding:18px 20px; border:1px solid #e5edf6; border-radius:16px; background:#fff; }
.demo-module-stat span,.demo-module-stat small { display:block; color:#74839a; font-size:12px; }
.demo-module-stat strong { display:block; font-size:27px; color:#132238; margin:6px 0; }
#demo-screen .pb-surface .demo-filter-bar { padding:18px 0 0; }
#demo-screen .pb-surface .demo-table-footer { padding-left:0; }
@media(max-width:760px) {
 .demo-touring .demo-sidebar { position:relative; }
 .demo-module-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .demo-touring .demo-guide { top:0; }
 .demo-guide-buttons { flex-wrap:wrap; gap:10px; }
 .demo-guide-buttons small { width:100%; }
 .demo-highlight { scroll-margin-top:340px; }
}