:root { --demo-ink:#101827; --demo-muted:#6b7485; --demo-line:#e7e9ee; --demo-surface:#f7f8fa; --demo-purple:#7456e8; --demo-purple-dark:#5c3ed1; --demo-green:#148a68; }

.a3-public-shell:has(.demo-page) { width: min(1520px, calc(100% - 36px)); padding: 0; }
body:has(.demo-page) .a3-public-footer { display:none; }
.demo-page { position:relative; padding:22px 0 70px; color:#f7f8fc; }
.demo-header,.demo-intro,.demo-browser,.demo-guide { width:min(1380px,100%); margin-inline:auto; }
.demo-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:52px; }
.demo-brand { display:flex; align-items:center; gap:12px; color:#f7f8fc; text-decoration:none; }
.demo-brand>span { width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:15px;background:rgba(255,255,255,.08);font-size:1.15rem;font-weight:800; }
.demo-brand strong,.demo-brand small { display:block; }.demo-brand strong{font-size:.88rem}.demo-brand small{margin-top:2px;color:#8d99ad;font-size:.66rem}
.demo-header-actions { display:flex;align-items:center;gap:12px }.demo-safe-label,.demo-exit{border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:9px 13px;background:rgba(255,255,255,.05);color:#aeb7c6;font-size:.71rem}.demo-safe-label i,.demo-live i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#2dd4a4;box-shadow:0 0 0 4px rgba(45,212,164,.12)}.demo-exit{color:#e9edf4;text-decoration:none}
.demo-intro { display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:28px }.demo-intro>div{max-width:780px}.demo-kicker{color:#a997ff;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.demo-intro h1{margin:10px 0 0;font-size:clamp(2.1rem,4.5vw,4.8rem);font-weight:640;letter-spacing:-.065em;line-height:.98}.demo-intro>p{max-width:400px;margin:0;color:#9ba5b6;line-height:1.65}
.demo-browser { overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:30px;background:#0c1220;box-shadow:0 42px 100px rgba(0,0,0,.45) }.demo-browser-bar{height:52px;display:grid;grid-template-columns:120px 1fr 120px;align-items:center;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.1);background:#151d2d}.demo-window-dots{display:flex;gap:7px}.demo-window-dots i{width:9px;height:9px;border-radius:50%;background:#425066}.demo-window-dots i:first-child{background:#ff7169}.demo-window-dots i:nth-child(2){background:#f5c85b}.demo-window-dots i:last-child{background:#52cf83}.demo-address{justify-self:center;min-width:min(480px,80%);padding:8px 16px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(0,0,0,.18);color:#8995aa;text-align:center;font-size:.7rem}.demo-address span{color:#7a5ce8}.demo-address b{color:#c2c9d5}.demo-live{justify-self:end;color:#7c8a9f;font-size:.62rem;font-weight:800;letter-spacing:.08em}
.demo-app{min-height:710px;display:grid;grid-template-columns:90px 1fr;background:#f6f7f9}.demo-sidebar{display:flex;flex-direction:column;align-items:center;gap:5px;padding:18px 10px 14px;border-right:1px solid #e5e7eb;background:#fff}.demo-company-mark,.demo-avatar{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#7c61ec,#5b3fd0);color:white;font-size:.72rem;font-weight:800}.demo-company-mark{margin-bottom:12px}.demo-avatar{margin-top:auto;border-radius:50%;background:#20293a}.demo-sidebar button{width:68px;min-height:54px;display:grid;place-items:center;gap:1px;border:0;border-radius:12px;background:transparent;color:#9199a6;font:inherit;cursor:pointer;transition:.18s}.demo-sidebar button span{font-size:1.05rem;line-height:1}.demo-sidebar button b{font-size:.55rem;font-weight:700}.demo-sidebar button:hover,.demo-sidebar button.active{background:#f0edff;color:#6546d9}.demo-stage{min-width:0;padding:34px clamp(24px,4vw,54px);color:var(--demo-ink);overflow:hidden}.demo-view{max-width:1160px;margin:auto;animation:demo-screen-in .38s ease both}@keyframes demo-screen-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.demo-view-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:26px}.demo-view-heading small{color:#8b94a2;font-size:.65rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.demo-view-heading h2{margin:5px 0 4px;font-size:clamp(1.65rem,3vw,2.7rem);font-weight:700;letter-spacing:-.045em}.demo-view-heading p{margin:0;color:var(--demo-muted);font-size:.82rem}.demo-notification{position:relative;width:42px;height:42px;border:1px solid var(--demo-line);border-radius:13px;background:white;color:#7d8795}.demo-notification span{position:absolute;right:-3px;top:-5px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#7456e8;color:#fff;font-size:.55rem}.demo-status-chip{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;background:#e8f8f2;color:#117b5d;font-size:.62rem;font-style:normal}.demo-soft-button,.demo-action-button{border:1px solid var(--demo-line);border-radius:12px;padding:10px 14px;background:#fff;color:#344054;font-size:.72rem;font-weight:700;cursor:pointer}.demo-action-button{border:0;background:linear-gradient(135deg,var(--demo-purple),var(--demo-purple-dark));color:#fff;box-shadow:0 9px 22px rgba(116,86,232,.24)}.demo-action-button.compact{padding:11px 16px}.demo-card-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.7rem;font-weight:700}.demo-overview-grid{display:grid;grid-template-columns:1.1fr .9fr repeat(3,.58fr);gap:14px}.demo-overview-grid article{border:1px solid var(--demo-line);border-radius:19px;background:#fff;padding:18px}.demo-clock-card{grid-column:span 2}.demo-accent-card{color:#fff!important;background:linear-gradient(135deg,#252038,#171d2b)!important;border:0!important}.demo-time{display:block;margin-top:26px;font-size:2.35rem;letter-spacing:-.04em}.demo-clock-card p{color:#9ca6b6;font-size:.7rem}.demo-clock-card .demo-action-button{margin-top:13px}.demo-map-card{grid-column:span 3;position:relative;min-height:210px;overflow:hidden;padding:0!important;background:#edf0f4!important}.demo-map-grid{position:absolute;inset:0;background:linear-gradient(27deg,transparent 47%,#d5dce4 48%,#d5dce4 51%,transparent 52%),linear-gradient(112deg,transparent 44%,#fff 45%,#fff 50%,transparent 51%),linear-gradient(#dfe4ea 1px,transparent 1px),linear-gradient(90deg,#dfe4ea 1px,transparent 1px);background-size:100% 100%,100% 100%,32px 32px,32px 32px}.demo-radius{position:absolute;left:52%;top:50%;width:116px;height:116px;transform:translate(-50%,-50%);border:2px solid rgba(116,86,232,.55);border-radius:50%;background:rgba(116,86,232,.12);display:grid;place-items:center}.demo-radius i{width:17px;height:17px;border:4px solid white;border-radius:50%;background:#7456e8;box-shadow:0 3px 12px rgba(0,0,0,.28)}.demo-map-label{position:absolute;left:14px;bottom:14px;border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.92);font-size:.6rem;font-weight:700}.demo-stat strong{display:block;margin:7px 0 1px;font-size:1.7rem}.demo-stat span,.demo-stat small{color:#6d7684;font-size:.66rem}.demo-stat small{display:block}.demo-stat>i{display:block;height:4px;margin-top:17px;border-radius:99px;background:linear-gradient(90deg,#7658e8 var(--meter),#eceef2 var(--meter))}.demo-announcement{grid-column:span 2;display:flex;align-items:center;gap:12px}.demo-announcement>div{flex:1}.demo-announcement small,.demo-announcement strong,.demo-announcement p{display:block;margin:0}.demo-announcement small{color:#8a93a1;font-size:.58rem}.demo-announcement strong{margin:2px 0;font-size:.78rem}.demo-announcement p{color:#798290;font-size:.65rem}.demo-announcement>b{color:#7356e5;font-size:.62rem}.demo-mini-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#f0edff;color:#7456e8}
.demo-metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.demo-metric-row article{padding:15px;border:1px solid var(--demo-line);border-radius:16px;background:#fff}.demo-metric-row span{display:block;color:#77818f;font-size:.62rem}.demo-metric-row strong{font-size:1.55rem}.demo-metric-row em{float:right;margin-top:7px;color:#148a68;font-size:.58rem;font-style:normal}.demo-metric-row .amber{color:#b77413}.demo-metric-row .red{color:#cb4a55}.demo-table-card{overflow:hidden;border:1px solid var(--demo-line);border-radius:18px;background:#fff}.demo-table-tools{display:flex;justify-content:space-between;align-items:center;padding:17px;border-bottom:1px solid var(--demo-line)}.demo-table-tools>div{display:flex;gap:4px;padding:3px;border-radius:9px;background:#f2f3f6}.demo-table-tools button{border:0;border-radius:7px;padding:6px 10px;background:transparent;color:#7d8693;font-size:.6rem;cursor:pointer}.demo-table-tools button.active{background:#fff;color:#6344d7;box-shadow:0 2px 6px rgba(0,0,0,.08)}.demo-person-row{display:grid;grid-template-columns:38px 1.4fr .65fr .6fr .7fr;align-items:center;gap:11px;padding:13px 17px;border-bottom:1px solid #f0f1f3;font-size:.67rem}.demo-person-row:last-child{border:0}.demo-person-row strong,.demo-person-row small{display:block}.demo-person-row small{margin-top:2px;color:#87909d;font-size:.59rem}.avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;font-size:.58rem;font-weight:800}.lilac{background:#eee9ff;color:#6f4bdc}.green{background:#e1f5ed;color:#148164}.orange{background:#fff0dc;color:#b76b19}.blue{background:#e4f0ff;color:#3573bb}.demo-person-row em{width:fit-content;border-radius:99px;padding:5px 7px;font-size:.56rem;font-style:normal}.demo-person-row .on{background:#e2f6ef;color:#13805f}.demo-person-row .late{background:#fff1dc;color:#a56314}.demo-person-row .remote{background:#e8efff;color:#456db7}
.demo-people-layout{display:grid;grid-template-columns:1fr 300px;gap:16px}.demo-directory,.demo-profile-peek{border:1px solid var(--demo-line);border-radius:19px;background:#fff;padding:17px}.demo-search{padding:11px 13px;border-radius:11px;background:#f5f6f8;color:#a0a7b2;font-size:.68rem}.demo-people-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:13px}.demo-person-card{display:grid;grid-template-columns:38px 1fr;gap:1px 10px;text-align:left;border:1px solid var(--demo-line);border-radius:13px;padding:12px;background:#fff;color:var(--demo-ink);cursor:pointer}.demo-person-card:hover,.demo-person-card.selected{border-color:#9b88ed;background:#faf9ff}.demo-person-card .avatar{grid-row:span 3}.demo-person-card strong{font-size:.69rem}.demo-person-card small{color:#7f8896;font-size:.59rem}.demo-person-card em{color:#7456e8;font-size:.55rem;font-style:normal}.demo-profile-peek{text-align:center}.demo-large-avatar{width:66px;height:66px;display:grid;place-items:center;margin:0 auto 10px;border-radius:20px;background:linear-gradient(135deg,#a895ff,#6648d7);color:#fff;font-weight:800}.demo-profile-peek>small{color:#9098a5;font-size:.57rem}.demo-profile-peek h3{margin:5px 0 1px;font-size:1.1rem}.demo-profile-peek>p{margin:0 0 16px;color:#7c8593;font-size:.65rem}.demo-profile-peek>div:not(.demo-large-avatar){display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #f0f1f3;text-align:left;font-size:.59rem}.demo-profile-peek>div span{color:#89929f}.demo-profile-peek>div b{font-size:.59rem}.green-text{color:#148164}.demo-profile-peek button{width:100%;margin-top:11px;border:0;border-radius:11px;padding:10px;background:#f0edff;color:#6546d9;font-size:.64rem;font-weight:700}
.demo-approval-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px}.demo-request-list,.demo-approval-detail{border:1px solid var(--demo-line);border-radius:18px;background:#fff;padding:13px}.demo-request{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:12px;border:1px solid transparent;border-radius:13px}.demo-request.active{border-color:#a996f0;background:#faf9ff}.demo-request small,.demo-request strong,.demo-request p{display:block;margin:0}.demo-request small{color:#7c8593;font-size:.55rem}.demo-request strong{font-size:.66rem}.demo-request p{color:#8c95a2;font-size:.56rem}.demo-request em{border-radius:99px;padding:5px 7px;background:#fff3df;color:#a46619;font-size:.54rem;font-style:normal}.demo-approval-detail{padding:24px}.demo-approval-detail>small{display:block;margin-top:12px;color:#7859e6;font-size:.57rem;font-weight:800;letter-spacing:.08em}.demo-approval-detail h3{margin:6px 0;font-size:1.25rem}.demo-approval-detail>p{color:#747e8c;font-size:.7rem;line-height:1.6}.demo-date-strip{display:flex;align-items:center;justify-content:space-between;margin:17px 0;padding:13px;border-radius:12px;background:#f5f6f8}.demo-date-strip span small,.demo-date-strip span b{display:block}.demo-date-strip span small{color:#9098a5;font-size:.52rem}.demo-date-strip span b{font-size:.65rem}.demo-balance{display:flex;justify-content:space-between;padding:11px 0;font-size:.65rem}.demo-decision{display:grid;grid-template-columns:.7fr 1.3fr;gap:8px;margin-top:10px}.demo-decision button{border:1px solid var(--demo-line);border-radius:10px;padding:10px;background:white;font-size:.65rem;font-weight:700;cursor:pointer}.demo-decision .approve{border:0;background:#7456e8;color:#fff}.demo-approved-state{margin-top:10px;border-radius:10px;padding:11px;background:#e3f7ef;color:#117b5c;text-align:center;font-size:.65rem;font-weight:700}
.demo-payroll-flow{display:flex;align-items:center;margin:12px 0 27px}.demo-payroll-flow article{display:flex;align-items:center;gap:9px}.demo-payroll-flow article i{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#dff5ec;color:#12805f;font-size:.65rem;font-style:normal;font-weight:800}.demo-payroll-flow article.current i{background:#7456e8;color:white}.demo-payroll-flow small,.demo-payroll-flow strong{display:block}.demo-payroll-flow small{color:#929aa6;font-size:.5rem}.demo-payroll-flow strong{font-size:.65rem}.demo-payroll-flow>b{flex:1;height:1px;margin:0 13px;background:#dfe2e7}.demo-payroll-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:15px}.demo-payroll-total,.demo-exceptions{border:1px solid var(--demo-line);border-radius:19px;background:#fff;padding:22px}.demo-payroll-total>small{color:#8e97a4;font-size:.57rem;font-weight:800}.demo-payroll-total>strong{display:block;margin:8px 0 2px;font-size:2rem}.demo-payroll-total>p{color:#7e8794;font-size:.64rem}.demo-payroll-total>div{display:grid;gap:8px;margin-top:22px;padding-top:15px;border-top:1px solid var(--demo-line)}.demo-payroll-total span{display:flex;justify-content:space-between;color:#7d8693;font-size:.64rem}.demo-payroll-total b{color:#242d3b}.demo-exceptions>div{display:flex;justify-content:space-between;margin-bottom:14px;font-size:.68rem}.demo-exceptions>div span{color:#a46619}.demo-exceptions p{display:flex;align-items:center;gap:9px;margin:11px 0;color:#66717f;font-size:.63rem}.demo-exceptions i{width:21px;height:21px;display:grid;place-items:center;border-radius:7px;font-size:.55rem;font-style:normal}.demo-exceptions .ok{background:#e0f5ed;color:#168062}.demo-exceptions .warn{background:#fff0da;color:#b16b16}.payroll-button{float:right;margin-top:16px}
.demo-payslip-view{max-width:940px}.demo-payslip{overflow:hidden;border-radius:20px;background:#111;box-shadow:0 20px 50px rgba(0,0,0,.18);color:#f6f6f6}.demo-payslip header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #303030}.demo-payslip header>div{display:flex;align-items:center;gap:10px}.demo-payslip header>div>span{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#fff;color:#111;font-weight:900}.demo-payslip header p,.demo-payslip header small{display:block;margin:0}.demo-payslip header small{color:#999;font-size:.5rem}.demo-payslip header>b{text-align:right;color:#999;font-size:.52rem}.demo-payslip header>b strong{color:white;font-size:1.1rem}.demo-payslip-person{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:12px;padding:15px 22px;background:#181818}.demo-payslip-person small,.demo-payslip-person b{display:block}.demo-payslip-person small{color:#858585;font-size:.48rem}.demo-payslip-person b{font-size:.6rem}.demo-payslip-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:18px 22px}.demo-payslip h4{margin:0 0 9px;color:#d8cfff;font-size:.58rem;text-transform:uppercase;letter-spacing:.08em}.demo-payslip h4:not(:first-child){margin-top:18px}.demo-payslip-columns p{display:flex;justify-content:space-between;margin:7px 0;color:#aaa;font-size:.57rem}.demo-payslip-columns p b{color:#eee}.demo-payslip footer{display:grid;grid-template-columns:1fr 1fr 1.3fr;align-items:center;gap:12px;padding:15px 22px;background:#f3f0ff;color:#17131f;font-size:.56rem}.demo-payslip footer span b{display:block;margin-top:2px}.demo-payslip footer>strong{text-align:right;font-size:.7rem}
.demo-tax-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:15px}.demo-tax-summary,.demo-tax-computation{border:1px solid var(--demo-line);border-radius:19px;background:#fff;padding:22px}.demo-tax-summary>small{color:#8e97a4;font-size:.56rem}.demo-tax-summary>strong{display:block;margin-top:6px;font-size:1.8rem}.demo-tax-chart{height:150px;display:flex;align-items:end;gap:12px;margin-top:20px;padding:0 8px;border-bottom:1px solid #dfe2e7}.demo-tax-chart i{flex:1;border-radius:6px 6px 0 0;background:#ddd8f6}.demo-tax-chart i.active{background:linear-gradient(#876eef,#6447d4)}.demo-months{display:flex;justify-content:space-around;margin-top:7px;color:#9199a5;font-size:.52rem}.demo-tax-computation>div{display:flex;justify-content:space-between;margin-bottom:16px;font-size:.65rem}.demo-tax-computation p{display:flex;justify-content:space-between;margin:11px 0;color:#747e8b;font-size:.62rem}.demo-tax-computation p strong{color:#273140}.demo-tax-computation .total{font-size:.72rem}.demo-tax-computation .total strong{color:#6546d8}.demo-tax-computation>small{color:#9199a5;font-size:.54rem;line-height:1.5}.demo-info-banner{display:flex;align-items:center;gap:12px;margin-top:14px;padding:13px 16px;border:1px solid #dcd5fb;border-radius:14px;background:#f4f1ff}.demo-info-banner>span{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#7456e8;color:#fff;font-size:.62rem}.demo-info-banner p,.demo-info-banner strong{display:block;margin:0}.demo-info-banner p{color:#697381;font-size:.61rem}.demo-info-banner strong{color:#2a3341}
.demo-report-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:15px}.demo-report-options,.demo-podium{border:1px solid var(--demo-line);border-radius:19px;background:#fff;padding:19px}.demo-report-options section+section{margin-top:18px;padding-top:16px;border-top:1px solid #eceef1}.demo-report-options section>small,.demo-podium>small{display:block;margin-bottom:10px;color:#8b94a1;font-size:.53rem;font-weight:800;letter-spacing:.08em}.demo-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.demo-check-grid label,.demo-performance-setting label{font-size:.62rem}.demo-check-grid input,.demo-performance-setting input{accent-color:#7456e8}.demo-toggle-group{display:flex;gap:6px}.demo-toggle-group button{border:1px solid var(--demo-line);border-radius:9px;padding:8px 10px;background:#fff;color:#7b8491;font-size:.58rem;cursor:pointer}.demo-toggle-group button.active{border-color:#8c76ea;background:#f2efff;color:#6546d8}.demo-performance-setting{display:flex;align-items:center;justify-content:space-between;gap:10px}.demo-performance-setting span{color:#7c8592;font-size:.59rem}.demo-performance-setting input[type=number]{width:39px;border:1px solid var(--demo-line);border-radius:7px;padding:5px;text-align:center}.demo-podium{display:flex;flex-direction:column;justify-content:center}.demo-podium-row{height:190px;display:flex;align-items:end;justify-content:center;gap:5px}.demo-podium-row article{width:31%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border-radius:12px 12px 4px 4px;padding:11px 4px}.demo-podium-row span{width:30px;height:30px;display:grid;place-items:center;margin-top:-27px;border-radius:50%;background:#fff;font-size:.7rem;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.12)}.demo-podium-row b{margin-top:11px;font-size:.62rem}.demo-podium-row i{margin-top:3px;font-size:.6rem;font-style:normal}.demo-podium .silver{height:100px;background:linear-gradient(#e6e9ef,#c5cad4)}.demo-podium .gold{height:145px;background:linear-gradient(#ffe9a1,#e9b936)}.demo-podium .bronze{height:80px;background:linear-gradient(#f6c6a1,#c98552)}.demo-podium>p{margin:13px 0 0;color:#89929f;text-align:center;font-size:.53rem;line-height:1.5}
.demo-module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.demo-module-grid article{display:flex;align-items:center;gap:13px;border:1px solid var(--demo-line);border-radius:17px;padding:16px;background:#fff}.demo-module-icon{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:13px}.demo-module-icon.purple{background:#eeeaff;color:#7354e3}.demo-module-icon.green{background:#e1f6ed;color:#158362}.demo-module-icon.orange{background:#fff0dc;color:#b36a17}.demo-module-icon.blue{background:#e4f0ff;color:#356fb5}.demo-module-grid div{flex:1}.demo-module-grid small,.demo-module-grid strong,.demo-module-grid p{display:block;margin:0}.demo-module-grid small{color:#929aa6;font-size:.49rem}.demo-module-grid strong{margin:2px 0;font-size:.69rem}.demo-module-grid p{color:#7c8592;font-size:.56rem}.demo-module-grid article>b{color:#6848da;font-size:.56rem}.demo-document-strip{display:flex;align-items:center;gap:14px;margin-top:14px;border:1px solid #dcd4fb;border-radius:17px;padding:14px;background:#f6f3ff}.demo-doc-page{width:43px;height:52px;display:grid;place-items:center;border-radius:6px;background:#fff;color:#17131f;font-weight:900;box-shadow:0 5px 12px rgba(68,47,149,.15)}.demo-document-strip>div{flex:1}.demo-document-strip small,.demo-document-strip strong,.demo-document-strip p{display:block;margin:0}.demo-document-strip small{color:#7659df;font-size:.48rem}.demo-document-strip strong{font-size:.72rem}.demo-document-strip p{color:#808894;font-size:.56rem}.demo-document-strip button{border:0;border-radius:10px;padding:9px 12px;background:#7456e8;color:#fff;font-size:.6rem;font-weight:700}
.demo-finale{min-height:630px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#f7f8fc;background:radial-gradient(circle at 50% 28%,rgba(116,86,232,.4),transparent 34%),#111725;border-radius:20px}.demo-finale-mark{width:68px;height:68px;display:grid;place-items:center;margin-bottom:20px;border:1px solid rgba(255,255,255,.2);border-radius:22px;background:rgba(255,255,255,.09);font-size:1.4rem;font-weight:900}.demo-finale>small{color:#a998ff;font-size:.58rem;font-weight:800;letter-spacing:.14em}.demo-finale h2{max-width:700px;margin:10px 0;font-size:clamp(2.2rem,5vw,4.7rem);letter-spacing:-.065em;line-height:.98}.demo-finale>p{max-width:590px;color:#a2abb9;font-size:.78rem;line-height:1.7}.demo-finale-metrics{display:flex;gap:40px;margin:24px 0}.demo-finale-metrics span{color:#929dab;font-size:.6rem}.demo-finale-metrics strong{display:block;color:#fff;font-size:1.6rem}.demo-finale-actions{display:flex;gap:9px}.demo-finale-actions a,.demo-finale-actions button{border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:12px 17px;background:rgba(255,255,255,.06);color:#fff;text-decoration:none;font-size:.67rem;font-weight:700}.demo-finale-actions a{border:0;background:linear-gradient(135deg,#8064ed,#6041d2)}.demo-finale .demo-fine-print{margin-top:18px;color:#707c90;letter-spacing:0;text-transform:none}
.demo-guide{position:sticky;z-index:10;bottom:18px;display:grid;grid-template-columns:minmax(280px,1fr) minmax(160px,.6fr) auto;align-items:center;gap:25px;margin-top:18px;padding:14px 16px 14px 20px;border:1px solid rgba(255,255,255,.15);border-radius:20px;background:rgba(15,22,35,.92);box-shadow:0 20px 60px rgba(0,0,0,.38);backdrop-filter:blur(22px)}.demo-guide-copy{display:flex;align-items:center;gap:14px}.demo-guide-copy>span{flex:none;width:50px;height:50px;display:grid;place-items:center;border-radius:15px;background:rgba(116,86,232,.18);color:#ad9cff;font-size:.62rem;font-weight:800}.demo-guide-copy strong,.demo-guide-copy p{display:block;margin:0}.demo-guide-copy strong{font-size:.78rem}.demo-guide-copy p{margin-top:2px;color:#8f9aac;font-size:.62rem}.demo-progress{height:4px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.1)}.demo-progress i{display:block;width:10%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8065ee,#ab99ff);transition:width .35s ease}.demo-guide-actions{display:flex;gap:8px}.demo-control{min-width:76px;border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:11px 13px;background:rgba(255,255,255,.06);color:#d7dce5;font-size:.66rem;font-weight:700}.demo-control.primary{min-width:112px;border:0;background:linear-gradient(135deg,#7b5fea,#5d3fd1);color:#fff}.demo-control:disabled{opacity:.35}.demo-toast{position:fixed;z-index:50;left:50%;bottom:102px;transform:translate(-50%,10px);border-radius:999px;padding:10px 15px;background:#172033;color:white;font-size:.66rem;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;transition:.25s;pointer-events:none}.demo-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1000px){.demo-intro{align-items:start;flex-direction:column}.demo-intro>p{max-width:650px}.demo-app{grid-template-columns:70px 1fr}.demo-sidebar button{width:52px}.demo-sidebar button b{display:none}.demo-stage{padding:26px 20px}.demo-overview-grid{grid-template-columns:repeat(3,1fr)}.demo-clock-card{grid-column:span 2}.demo-map-card{grid-column:span 1}.demo-announcement{grid-column:span 3}.demo-guide{grid-template-columns:1fr auto}.demo-progress{display:none}}
@media(max-width:760px){.a3-public-shell:has(.demo-page){width:min(100% - 20px,1520px)}.demo-page{padding-top:12px}.demo-header{margin-bottom:32px}.demo-safe-label{display:none}.demo-intro h1{font-size:2.6rem}.demo-browser-bar{grid-template-columns:70px 1fr 55px}.demo-address{min-width:0;width:100%;overflow:hidden;white-space:nowrap}.demo-app{display:block;min-height:680px}.demo-sidebar{height:64px;flex-direction:row;overflow-x:auto;padding:7px 10px;border-right:0;border-bottom:1px solid #e5e7eb}.demo-company-mark{margin:0 6px 0 0}.demo-sidebar button{flex:none;width:45px;min-height:44px}.demo-sidebar .demo-avatar{display:none}.demo-stage{padding:22px 14px}.demo-view-heading{display:block}.demo-view-heading>button,.demo-view-heading>.demo-status-chip{margin-top:10px}.demo-overview-grid,.demo-metric-row,.demo-people-layout,.demo-approval-layout,.demo-payroll-grid,.demo-tax-grid,.demo-report-layout,.demo-module-grid{grid-template-columns:1fr}.demo-clock-card,.demo-map-card,.demo-announcement{grid-column:span 1}.demo-map-card{min-height:170px}.demo-metric-row{grid-template-columns:repeat(2,1fr)}.demo-person-row{grid-template-columns:34px 1fr auto}.demo-person-row>*:nth-child(n+4){display:none}.demo-profile-peek{display:none}.demo-payroll-flow article span{display:none}.demo-payslip-person{grid-template-columns:1fr 1fr}.demo-payslip-person span:last-child{display:none}.demo-payslip-columns{grid-template-columns:1fr;gap:5px}.demo-payslip footer{grid-template-columns:1fr 1fr}.demo-payslip footer>strong{grid-column:span 2;text-align:left}.demo-report-options{padding:14px}.demo-check-grid{grid-template-columns:repeat(2,1fr)}.demo-podium{display:none}.demo-guide{bottom:8px;display:flex;justify-content:space-between;padding:10px}.demo-guide-copy>span{width:40px;height:40px}.demo-guide-copy>div p{display:none}.demo-guide-actions .secondary{display:none}.demo-control.primary{min-width:94px}.demo-finale-metrics{gap:18px}.demo-finale-actions{flex-direction:column}.demo-browser{border-radius:20px}}

/* The demo lives inside the same shell and design tokens as the signed-in app. */
.demo-app-shell .demo-nav-button { border: 0; background: transparent; font-family: inherit; }
.demo-app-shell .a3-brand.demo-nav-button { text-align: left; }
.demo-app-shell .a3-nav-link.active { color: var(--app-primary); background: color-mix(in srgb, var(--app-primary) 8%, transparent); }
.demo-exit-link { min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 0 13px; background: var(--surface); color: var(--text-muted); font-size: .75rem; font-weight: 750; text-decoration: none; }
.demo-app-main { padding-bottom: 0; }
.demo-page { padding: 0 0 84px; color: var(--text); }
.demo-system-notice { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--app-primary) 22%, var(--border)); border-radius: 15px; background: color-mix(in srgb, var(--app-primary) 6%, var(--surface)); box-shadow: var(--shadow-sm); }
.demo-system-notice span { display: inline-flex; align-items: center; gap: 8px; color: var(--app-primary); font-size: .7rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.demo-system-notice i { width: 8px; height: 8px; border-radius: 50%; background: var(--app-primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--app-primary) 12%, transparent); }
.demo-system-notice p { margin: 0; color: var(--text-muted); font-size: .72rem; font-weight: 600; }
.demo-stage { max-width: none; min-height: 680px; padding: 0; color: var(--text); overflow: visible; }
.demo-view { max-width: none; }
.demo-view-heading h2 { color: var(--text); font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 850; }
.demo-view-heading p { color: var(--text-muted); font-size: .9rem; }
.demo-view-heading small { color: var(--app-primary); }
.demo-view article, .demo-view .demo-table-card, .demo-view .demo-directory, .demo-view .demo-profile-peek, .demo-view .demo-request-list, .demo-view .demo-approval-detail, .demo-view .demo-payroll-total, .demo-view .demo-exceptions, .demo-view .demo-tax-summary, .demo-view .demo-tax-computation, .demo-view .demo-report-options, .demo-view .demo-podium { border-color: var(--border); background-color: var(--surface); box-shadow: var(--shadow-md); }
.demo-real-map .demo-map-grid { position: absolute; inset: 0; }
.demo-real-map .demo-map-frame { position: absolute; inset: -34px; z-index: 0; width: calc(100% + 68px); height: calc(100% + 68px); border: 0; pointer-events: none; filter: saturate(.74) contrast(.94) brightness(.98); }
.demo-real-map .time-map-shade { background: linear-gradient(90deg, rgba(15,23,42,.2), rgba(15,23,42,.02) 55%, rgba(15,23,42,.08)); }
.demo-real-map .demo-radius { left: 68%; top: 47%; z-index: 2; width: 158px; height: 158px; border-color: color-mix(in srgb,var(--app-primary) 78%,white); background: color-mix(in srgb,var(--app-primary) 16%,transparent); box-shadow: 0 0 0 10px color-mix(in srgb,var(--app-primary) 7%,transparent),0 18px 45px rgba(28,36,48,.2); }
.demo-real-map .demo-radius::before { position: absolute; inset: 13px; border: 1px dashed color-mix(in srgb,var(--app-primary) 62%,white); border-radius: 50%; content: ""; }
.demo-real-map .demo-radius i { position: relative; z-index: 1; width: 28px; height: 28px; border: 4px solid #fff; border-radius: 50% 50% 50% 0; background: var(--app-primary); box-shadow: 0 7px 18px rgba(0,0,0,.3); transform: rotate(-45deg); }
.demo-real-map .demo-radius i::after { position: absolute; inset: 6px; border-radius: 50%; background: #fff; content: ""; }
.demo-real-map .demo-radius>span { position: absolute; top: calc(50% + 31px); z-index: 1; padding: 6px 9px; border: 1px solid rgba(255,255,255,.72); border-radius: 9px; background: rgba(255,255,255,.94); color: #344054; box-shadow: 0 8px 20px rgba(31,41,55,.16); font-size: .58rem; font-weight: 800; white-space: nowrap; }
.demo-guide { position: fixed; left: 50%; width: min(920px, calc(100% - 32px)); transform: translateX(-50%); border-color: var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--text); box-shadow: var(--shadow-lg); }
.demo-guide-copy>span { background: color-mix(in srgb, var(--app-primary) 10%, var(--surface)); color: var(--app-primary); }
.demo-guide-copy p { color: var(--text-muted); }
.demo-progress { background: var(--surface-2); }
.demo-progress i { width: 100%; background: var(--app-primary); transform: scaleX(.1); transform-origin: left center; transition: transform .38s cubic-bezier(.22,.8,.3,1); }
.demo-company-logo { object-fit: contain; background: #fff; }
.demo-luxury-theme :is(.office-avatar,.employee-avatar,.performer-avatar,.avatar) img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.demo-luxury-theme .office-avatar,
.demo-luxury-theme .employee-avatar,
.demo-luxury-theme .performer-avatar,
.demo-luxury-theme .demo-request .avatar { background-position: center; background-size: cover; background-repeat: no-repeat; font-size: 0; }
.demo-luxury-theme .office-group:first-child .office-person:nth-child(2) .office-avatar,
.demo-luxury-theme .employee-table tbody tr:nth-child(2) .employee-avatar,
.demo-luxury-theme .podium-card.rank-2 .performer-avatar { background-image: url('/uploads/company-delta/employees/employee-003.jpg'); }
.demo-luxury-theme .office-group:first-child .office-person:nth-child(3) .office-avatar,
.demo-luxury-theme .employee-table tbody tr:nth-child(3) .employee-avatar,
.demo-luxury-theme .podium-card.rank-3 .performer-avatar,
.demo-luxury-theme .demo-request:first-child .avatar { background-image: url('/uploads/company-delta/employees/employee-002.jpg'); }
.demo-luxury-theme .office-group:nth-child(2) .office-person .office-avatar,
.demo-luxury-theme .employee-table tbody tr:nth-child(1) .employee-avatar,
.demo-luxury-theme .podium-card.rank-1 .performer-avatar { background-image: url('/uploads/company-delta/employees/employee-004.jpg'); }
.demo-luxury-theme .demo-request:nth-child(2) .avatar { background-image: url('/uploads/company-delta/employees/employee-001.jpg'); }
.demo-luxury-theme .demo-request:nth-child(3) .avatar { background-image: url('/uploads/company-delta/employees/employee-005.jpg'); }
.demo-luxury-theme .payslip-document-mark,
.demo-luxury-theme .demo-doc-page { background: #fff url('/uploads/company-delta/branding/company-alpha-logo.png') center/82% no-repeat; color: transparent; }

/* Cinematic product-tour layer */
.demo-cinematic-intro { position: fixed; z-index: 5000; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 30px; background: #171511; color: #f8f3e9; text-align: center; }
.demo-cinematic-intro[hidden] { display: none !important; }
.demo-cinematic-intro::before,.demo-cinematic-intro::after { content:""; position:absolute; inset:0; pointer-events:none; }
.demo-cinematic-intro::before { background: radial-gradient(circle at 50% 36%, rgba(185,151,98,.2), transparent 27rem), linear-gradient(115deg, transparent 48%, rgba(255,255,255,.025) 49%, transparent 50%); background-size:auto,34px 34px; }
.demo-cinematic-intro::after { box-shadow: inset 0 0 180px rgba(0,0,0,.72); }
.demo-intro-glow { position:absolute; width:360px; height:360px; border:1px solid rgba(210,181,130,.18); border-radius:50%; animation:intro-orbit 8s linear infinite; }
.demo-intro-glow::before,.demo-intro-glow::after { content:"";position:absolute;border:1px solid rgba(210,181,130,.11);border-radius:50%;inset:28px }.demo-intro-glow::after{inset:70px}
.demo-intro-logo { position:relative;z-index:1;width:86px;height:86px;display:grid;place-items:center;border:1px solid rgba(216,190,145,.28);border-radius:24px;background:linear-gradient(145deg,rgba(216,190,145,.14),rgba(255,255,255,.04));color:#ead9bb;font-size:1.7rem;font-weight:900;letter-spacing:-.06em;box-shadow:0 24px 60px rgba(0,0,0,.35);animation:intro-rise .8s ease both }
.demo-cinematic-intro>span,.demo-cinematic-intro>h1,.demo-cinematic-intro>p,.demo-cinematic-intro>button,.demo-cinematic-intro>small{position:relative;z-index:1;animation:intro-rise .8s ease both}.demo-cinematic-intro>span{margin-top:22px;color:#c6aa7a;font-size:.65rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;animation-delay:.08s}.demo-cinematic-intro h1{max-width:850px;margin:12px 0;font-size:clamp(2.8rem,7vw,6.4rem);font-weight:620;letter-spacing:-.07em;line-height:.92;animation-delay:.14s}.demo-cinematic-intro p{max-width:590px;margin:8px 0 26px;color:#a9a092;font-size:.9rem;line-height:1.7;animation-delay:.2s}.demo-cinematic-intro button{display:flex;align-items:center;gap:10px;border:1px solid rgba(216,190,145,.25);border-radius:999px;padding:13px 20px;background:linear-gradient(135deg,#8e7450,#594630);color:white;font-size:.72rem;font-weight:800;box-shadow:0 20px 44px rgba(0,0,0,.3);animation-delay:.28s}.demo-cinematic-intro button i{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #fff}.demo-cinematic-intro>small{margin-top:13px;color:#6f685e;font-size:.58rem;animation-delay:.34s}.demo-cinematic-intro.is-opening{animation:cinematic-open .72s cubic-bezier(.7,0,.2,1) both}
.demo-narrator{display:flex;align-items:center;gap:9px;padding-right:15px;border-right:1px solid var(--border)}.demo-narrator img{width:44px;height:44px;border-radius:14px;object-fit:cover;box-shadow:0 6px 16px rgba(35,28,20,.14)}.demo-narrator span,.demo-narrator small,.demo-narrator strong{display:block}.demo-narrator small{color:var(--app-primary);font-size:.5rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.demo-narrator strong{margin-top:2px;color:var(--text);font-size:.66rem;white-space:nowrap}.demo-guide{grid-template-columns:auto minmax(260px,1fr) auto;width:min(980px,calc(100% - 32px))}.demo-guide-copy>span{border-radius:999px;width:40px;height:40px}.demo-guide-copy>span::first-letter{font-weight:900}.demo-voice{min-height:40px;border:1px solid var(--border);border-radius:12px;padding:0 11px;background:var(--surface-2);color:var(--text-muted);font-size:.62rem;font-weight:750}.demo-voice span{color:var(--app-primary)}.demo-voice.active{border-color:color-mix(in srgb,var(--app-primary) 40%,var(--border));background:color-mix(in srgb,var(--app-primary) 8%,var(--surface));color:var(--app-primary)}
.demo-stage{transition:opacity .24s ease,transform .24s ease,filter .24s ease}.demo-stage.is-leaving{opacity:0;transform:scale(.975);filter:blur(5px)}.demo-stage.is-arriving>*{animation:cinematic-scene .68s cubic-bezier(.16,.8,.25,1) both}.demo-stage.is-arriving :is(.time-card,.calendar-shell,.employee-panel,.demo-approval-detail,.payslips-panel,.payslip-sheet,.demo-tax-computation,.report-builder,.custom-design-section,.designer-stage-panel,.demo-document-strip){animation:cinematic-focus 1.1s .18s cubic-bezier(.2,.75,.25,1) both}
@keyframes intro-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes intro-orbit{to{transform:rotate(360deg)}}@keyframes cinematic-open{0%{clip-path:inset(0)}100%{clip-path:inset(0 0 100% 0)}}@keyframes cinematic-scene{from{opacity:0;transform:perspective(1000px) translateY(22px) rotateX(2deg) scale(1.018)}to{opacity:1;transform:none}}@keyframes cinematic-focus{0%,100%{box-shadow:var(--shadow-md)}45%{box-shadow:0 0 0 5px color-mix(in srgb,var(--app-primary) 12%,transparent),0 28px 65px rgba(55,42,25,.16)}}
@media(max-width:760px){.demo-narrator{display:none}.demo-guide{grid-template-columns:1fr auto}.demo-cinematic-intro h1{font-size:3.2rem}}
.demo-stage.is-arriving .tax-explainer { animation: cinematic-focus 1.1s .18s cubic-bezier(.2,.75,.25,1) both; }
@media(prefers-reduced-motion:reduce){.demo-cinematic-intro *,.demo-stage,.demo-stage *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.demo-control { border-color: var(--border); background: var(--surface-2); color: var(--text); }
.demo-control.primary { background: var(--app-primary); color: #fff; }

@media (max-width: 980px) {
    .demo-app-shell .a3-header-inner { gap: 12px; }
    .demo-app-shell .a3-brand { min-width: 210px; }
}
@media (max-width: 760px) {
    .demo-system-notice { align-items: flex-start; flex-direction: column; }
    .demo-stage { min-height: 620px; padding: 0; }
    .demo-app-shell .a3-header-tools { display: grid; gap: 10px; }
    .demo-app-shell .a3-header-tools > * { width: 100%; }
}

/* Quiet luxury treatment for the public tour only. */
.demo-luxury-theme .a3-header { background: color-mix(in srgb, #ffffff 94%, transparent); }
.demo-luxury-theme .demo-action-button,
.demo-luxury-theme .demo-decision .approve,
.demo-luxury-theme .demo-document-strip button,
.demo-luxury-theme .demo-control.primary { background: var(--demo-brand); box-shadow: 0 12px 26px color-mix(in srgb, var(--demo-brand) 22%, transparent); }
.demo-luxury-theme .demo-status-chip,
.demo-luxury-theme .demo-info-banner,
.demo-luxury-theme .demo-document-strip { border-color: color-mix(in srgb, var(--demo-brand) 32%, var(--border)); background: color-mix(in srgb, var(--demo-brand) 9%, #fff); color: var(--app-primary); }
.demo-luxury-theme .demo-request.active,
.demo-luxury-theme .demo-person-card.selected,
.demo-luxury-theme .demo-person-card:hover { border-color: var(--demo-brand); background: color-mix(in srgb, var(--demo-brand) 7%, #fff); }
.demo-luxury-theme .demo-payroll-flow article.current i,
.demo-luxury-theme .demo-info-banner > span,
.demo-luxury-theme .demo-tax-chart i.active { background: var(--demo-brand); }
.demo-luxury-theme .demo-finale { background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--demo-brand) 30%, transparent), transparent 34%), #11151b; }
.demo-luxury-theme .demo-finale-mark { border-color: color-mix(in srgb, var(--demo-brand) 45%, transparent); background: color-mix(in srgb, var(--demo-brand) 16%, transparent); color: var(--demo-brand); }
.demo-luxury-theme .demo-finale > small { color: var(--demo-brand); }
.demo-luxury-theme .demo-finale-actions a { background: var(--demo-brand); color: var(--demo-brand-ink); }
.demo-luxury-theme .payslip-employee-band > div { min-height: 92px; display: flex; flex-direction: column; justify-content: center; }

/* Company-color opening: the selected brand travels through the entire tour. */
.demo-brand-picker { position: relative; z-index: 2; width: min(680px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 18px; margin: 8px 0 24px; padding: 15px; border: 1px solid color-mix(in srgb, var(--demo-brand) 42%, rgba(255,255,255,.12)); border-radius: 24px; background: rgba(255,255,255,.055); box-shadow: 0 24px 70px rgba(0,0,0,.24); backdrop-filter: blur(18px); animation: intro-rise .8s .24s ease both; transition: border-color .3s ease, box-shadow .3s ease; }
.demo-brand-picker-copy { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 16px; padding: 2px 4px 13px; text-align: left; }
.demo-brand-picker-copy > span { grid-column: 1 / -1; color: var(--demo-brand); font-size: .52rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.demo-brand-picker-copy strong { color: #f8f3e9; font-size: .82rem; }
.demo-brand-picker-copy small { color: #a9a092; font-size: .6rem; }
.demo-brand-swatches { min-width: 0; display: flex; align-items: center; gap: 9px; }
.demo-color-swatch, .demo-custom-color { position: relative; width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.045); cursor: pointer; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.demo-cinematic-intro .demo-color-swatch { width: 38px; height: 38px; padding: 0; background: rgba(255,255,255,.045); box-shadow: none; animation: none; }
.demo-cinematic-intro .demo-color-swatch i { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 1px rgba(255,255,255,.28); }
.demo-color-swatch:hover, .demo-color-swatch.active, .demo-custom-color:hover { transform: translateY(-2px); border-color: var(--demo-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--demo-brand) 17%, transparent); outline: none; }
.demo-color-swatch.active::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border: 2px solid #11151b; border-radius: 50%; background: #fff; }
.demo-custom-color { overflow: hidden; color: #efe7da; font-size: 1rem; }
.demo-custom-color input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; cursor: pointer; }
.demo-custom-color span { pointer-events: none; }
.demo-brand-preview { min-width: 245px; display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 9px 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(7,8,10,.32); text-align: left; }
.demo-brand-preview > i { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border-radius: 10px; background: var(--demo-brand); color: var(--demo-brand-ink); font-size: .68rem; font-style: normal; font-weight: 900; }
.demo-brand-preview span { flex: 1; }
.demo-brand-preview small, .demo-brand-preview strong { display: block; }
.demo-brand-preview small { color: #7f7a72; font-size: .46rem; }
.demo-brand-preview strong { color: #f0ebe3; font-size: .58rem; }
.demo-brand-preview > b { width: 8px; height: 8px; border-radius: 50%; background: var(--demo-brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--demo-brand) 18%, transparent); }
.demo-brand-swatches, .demo-brand-preview { display: inline-flex; vertical-align: middle; }
.demo-brand-preview { position: static; grid-column: 2; grid-row: 2; }
.demo-cinematic-intro::before { background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--demo-brand) 27%, transparent), transparent 27rem), linear-gradient(115deg, transparent 48%, rgba(255,255,255,.025) 49%, transparent 50%); background-size: auto, 34px 34px; }
.demo-cinematic-intro { background: #11151b; }
.demo-intro-glow, .demo-intro-glow::before, .demo-intro-glow::after { border-color: color-mix(in srgb, var(--demo-brand) 33%, transparent); }
.demo-cinematic-intro > span { color: var(--demo-brand); }
.demo-cinematic-intro > button { border-color: var(--demo-brand); background: var(--demo-brand); color: var(--demo-brand-ink); }
.demo-luxury-theme .demo-action-button,
.demo-luxury-theme .demo-decision .approve,
.demo-luxury-theme .demo-document-strip button,
.demo-luxury-theme .demo-control.primary { background: var(--demo-brand); color: var(--demo-brand-ink); box-shadow: 0 12px 26px color-mix(in srgb, var(--demo-brand) 24%, transparent); }
.demo-luxury-theme .demo-payroll-flow article.current i,
.demo-luxury-theme .demo-info-banner > span,
.demo-luxury-theme .demo-tax-chart i.active { background: var(--demo-brand); color: var(--demo-brand-ink); }
.demo-luxury-theme .demo-finale { background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--demo-brand) 30%, transparent), transparent 34%), #171511; }
.demo-luxury-theme .demo-finale-actions a { background: var(--demo-brand); color: var(--demo-brand-ink); }

@media(max-width:760px) {
    .demo-brand-picker { display: block; padding: 13px; }
    .demo-brand-picker-copy { grid-template-columns: 1fr; }
    .demo-brand-picker-copy small { margin-top: 2px; }
    .demo-brand-swatches { justify-content: center; width: 100%; }
    .demo-brand-preview { display: none; }
}

.builder-final-grid > .reports-download-btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--app-primary); border-radius: 13px; padding: 0 17px; background: var(--app-primary); color: var(--demo-brand-ink); font-size: .72rem; font-weight: 850; text-decoration: none; box-shadow: 0 12px 26px color-mix(in srgb, var(--app-primary) 20%, transparent); transition: transform .2s ease, box-shadow .2s ease; }
.builder-final-grid > .reports-download-btn:hover { color: var(--demo-brand-ink); transform: translateY(-2px); box-shadow: 0 16px 32px color-mix(in srgb, var(--app-primary) 26%, transparent); }
.builder-final-grid > .reports-download-btn.is-ready { animation: report-ready 1s ease; }
@keyframes report-ready { 45% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--app-primary) 18%, transparent), 0 16px 32px color-mix(in srgb, var(--app-primary) 26%, transparent); } }
@media(max-width:760px) { .builder-final-grid > .reports-download-btn { width: 100%; } }

.demo-report-archive{position:fixed;z-index:42;right:22px;bottom:104px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;min-width:270px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--demo-brand) 38%,var(--border));border-radius:18px;background:color-mix(in srgb,var(--surface) 94%,transparent);color:var(--text);box-shadow:0 20px 48px rgba(25,31,39,.2);backdrop-filter:blur(18px);text-decoration:none;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.demo-report-archive>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--demo-brand);color:var(--demo-brand-ink);font-size:.58rem;font-weight:900;letter-spacing:.04em}.demo-report-archive strong,.demo-report-archive small{display:block}.demo-report-archive strong{font-size:.68rem;font-weight:850}.demo-report-archive small{margin-top:2px;color:var(--text-muted);font-size:.53rem}.demo-report-archive>b{color:var(--app-primary);font-size:1rem}.demo-report-archive:hover{border-color:var(--demo-brand);color:var(--text);transform:translateY(-3px);box-shadow:0 25px 58px color-mix(in srgb,var(--demo-brand) 19%,rgba(25,31,39,.22))}
@media(max-width:760px){.demo-report-archive{right:12px;bottom:88px;min-width:0;width:52px;height:52px;grid-template-columns:1fr;padding:7px;border-radius:16px}.demo-report-archive>span{width:38px;height:38px;margin:auto}.demo-report-archive>div,.demo-report-archive>b{display:none}}

/* Demo-only PDF artwork; the surrounding tools use the production document designer. */
.demo-custom-report-screen .custom-designer-footer { bottom: 102px; }
body:has(.demo-custom-report-screen) .demo-report-archive { bottom: 190px; }
.demo-template-stage { background: #f7f2e8; }
.demo-template-paper { position: absolute; z-index: 0; inset: 0; padding: 10% 10% 8%; background: linear-gradient(135deg, rgba(146,111,53,.07), transparent 32%), #fffdf8; color: #27231d; text-align: center; }
.demo-template-paper::before { position: absolute; inset: 4%; border: 1px solid #c9a96d; content: ""; }
.demo-template-company { display: block; color: #27231d; font-family: Georgia, serif; font-size: clamp(.8rem,1.7vw,1.35rem); font-weight: 700; letter-spacing: .15em; }
.demo-template-paper > small { display: block; margin-top: 5px; color: #9a7b45; font-size: clamp(.42rem,.75vw,.65rem); font-weight: 800; letter-spacing: .2em; }
.demo-template-paper h2 { margin: 13% 0 7%; color: #27231d; font-family: Georgia, serif; font-size: clamp(1.15rem,3vw,2.5rem); font-weight: 500; letter-spacing: .08em; }
.demo-template-paper p { max-width: 82%; margin: 4% auto 0; color: #5c554b; font-family: Georgia, serif; font-size: clamp(.46rem,1vw,.82rem); line-height: 1.75; }
.demo-template-name { width: 56%; margin: 3% auto 0; padding-bottom: 5px; border-bottom: 1px solid #9a7b45; font-family: Georgia, serif; font-size: clamp(.65rem,1.45vw,1.2rem); font-weight: 700; letter-spacing: .05em; }
.demo-template-issued { display: flex; justify-content: center; gap: 7px; margin-top: 8%; color: #5c554b; font-family: Georgia, serif; font-size: clamp(.46rem,.9vw,.74rem); }
.demo-template-signature { position: absolute; right: 12%; bottom: 11%; min-width: 30%; display: grid; }
.demo-template-signature i { color: #3b3126; font-family: "Segoe Script", cursive; font-size: clamp(.8rem,2vw,1.6rem); }
.demo-template-signature span { padding-top: 4px; border-top: 1px solid #9a7b45; font-family: Georgia, serif; font-size: clamp(.48rem,.9vw,.75rem); font-weight: 700; }
.demo-template-signature small { color: #776a5b; font-size: clamp(.4rem,.7vw,.58rem); }
.demo-document-designer-screen .placed-field { z-index: 2; }

@media(max-width:680px) {
    body:has(.demo-custom-report-screen) .demo-report-archive { bottom: 88px; }
    .demo-real-map .demo-radius { left: 62%; top: 48%; width: 128px; height: 128px; }
    .demo-custom-report-screen .custom-page-bar h1 { font-size: 2rem; }
    .demo-document-designer-screen .doc-hero { padding-inline: 2px; }
    .demo-template-paper { padding-inline: 7%; }
}