.demo-hero{padding-top:clamp(120px,14vw,150px)}.demo-hero-inner{text-align:center;flex-direction:column;align-items:center;display:flex}.demo-hero-title{letter-spacing:-.032em;max-width:780px;margin:26px 0 20px;font-size:clamp(40px,4vw,62px);font-weight:800;line-height:1.08}.demo-hero-sub{max-width:640px;color:var(--ash-text-soft);margin:0;font-size:17px;line-height:1.6}.demo-walkthrough-grid{grid-template-columns:280px 1fr;align-items:start;gap:24px;display:grid}.demo-tabs{flex-direction:column;gap:8px;display:flex;position:sticky;top:100px}.demo-tab{border-radius:var(--ash-radius-sm);border:1px solid var(--ash-border);background:var(--ash-surface);color:var(--ash-text-soft);text-align:left;cursor:pointer;align-items:center;gap:12px;padding:16px 18px;font-size:15px;font-weight:700;transition:border-color .2s,color .2s,background .2s;display:flex}.demo-tab:hover{border-color:var(--ash-border-strong);color:var(--ash-text)}.demo-tab--active{color:var(--ash-text);background:#16a34a24;border-color:#22c55e8c}.demo-tab-icon{font-size:18px}.demo-panel{border-radius:var(--ash-radius-lg);min-height:480px;padding:40px}.demo-panel h2{letter-spacing:-.03em;margin:0 0 12px;font-size:clamp(24px,2.6vw,32px);font-weight:900}.demo-panel p{color:var(--ash-text-soft);max-width:560px;margin:0 0 20px;font-size:16px;line-height:1.6}.demo-chips{flex-wrap:wrap;gap:8px;margin-bottom:32px;display:flex}.demo-chip{border:1px solid var(--ash-border);color:var(--ash-text-soft);background:#ffffff0a;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700}.demo-mockup-wrap{justify-content:center;display:flex}.demo-mockup{border-radius:var(--ash-radius-md);border:1px solid var(--ash-border);background:#08081299;width:min(460px,100%);padding:20px}.demo-mockup-header{color:var(--ash-text-muted);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:8px;margin-bottom:18px;font-size:12px;font-weight:800;display:flex}.demo-mockup-dot{background:#4ade80;border-radius:50%;width:8px;height:8px}.demo-pin-greeting{margin:0 0 16px;font-size:15px;font-weight:700}.demo-pin-dots{gap:10px;margin-bottom:20px;display:flex}.demo-pin-dots span{border:1px solid var(--ash-border-strong);border-radius:50%;width:12px;height:12px}.demo-pin-dots span.filled{background:#22c55e;border-color:#22c55e}.demo-pin-pad{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.demo-pin-key{border:1px solid var(--ash-border);background:#ffffff08;border-radius:12px;place-items:center;min-height:44px;font-size:15px;font-weight:700;display:grid}.demo-gps-badge{color:#4ade80;background:#22c55e1f;border:1px solid #4ade8059;border-radius:999px;margin-bottom:20px;padding:8px 14px;font-size:12.5px;font-weight:850;display:inline-flex}.demo-gps-rows,.demo-timesheet-rows{flex-direction:column;gap:12px;display:flex}.demo-gps-rows div,.demo-timesheet-rows div{border-bottom:1px solid var(--ash-border);justify-content:space-between;padding-bottom:12px;font-size:14px;display:flex}.demo-gps-rows span,.demo-timesheet-rows span{color:var(--ash-text-muted)}.demo-status-on{color:#4ade80}.demo-roster-table{border-collapse:collapse;width:100%;font-size:13px}.demo-roster-table th{color:var(--ash-text-muted);text-align:left;padding:8px 6px;font-weight:700}.demo-roster-table td{border-top:1px solid var(--ash-border);color:var(--ash-text-soft);padding:10px 6px}.demo-roster-table td:first-child{color:var(--ash-text);font-weight:800}.demo-shift-pill{color:#86efac;background:#16a34a29;border:1px solid #22c55e4d;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700;display:inline-flex}.demo-timesheet-total{border-top:1px solid var(--ash-border-strong);justify-content:space-between;margin-top:6px;padding-top:14px;font-weight:850;display:flex}.demo-csv-btn{text-align:center;background:linear-gradient(135deg,#16a34a,#0d9488);border-radius:12px;margin-top:20px;padding:12px 16px;font-size:13.5px;font-weight:800}.demo-final-inner{text-align:center;border-radius:var(--ash-radius-lg);flex-direction:column;align-items:center;padding:56px 32px;display:flex}.demo-final-inner h2{letter-spacing:-.065em;margin:26px 0 18px;font-size:clamp(34px,4.6vw,64px);font-weight:950;line-height:.96}.demo-final-inner p{max-width:480px;color:var(--ash-text-soft);margin:0 0 26px;font-size:16px}.demo-final-actions{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}@media (max-width:900px){.demo-walkthrough-grid{grid-template-columns:1fr}.demo-tabs{flex-flow:wrap;position:static}.demo-panel{padding:28px 22px}}