/* Four products, four visual languages. All data stays in this demonstration. */
.workflow-demo{background:#0d1d28;padding-top:110px;padding-bottom:100px}.workflow-demo .app-playground{grid-template-columns:230px minmax(0,1fr);gap:32px}.workflow-demo .app-tabs button{padding:28px 15px;position:relative}.workflow-demo .app-tabs button[aria-pressed=true]{background:#d0e8eb;border-left:3px solid #83b6bf}.workflow-demo .app-tabs button[data-app=report][aria-pressed=true]{background:#dcebbd;border-color:#b1cc72}.workflow-demo .app-tabs button[data-app=expense][aria-pressed=true]{background:#e2ddf4;border-color:#9c8ed0}.workflow-demo .app-tabs button[data-app=booking][aria-pressed=true]{background:#f2d9c5;border-color:#d69b72}.workflow-demo .app-demo-screen{border-radius:10px;border:1px solid #5b788055;box-shadow:0 25px 80px #0003;min-width:0;background:#f4f7f8;--ink:#173b4a;--muted:#546f7a;--accent:#235f72;color:var(--ink)}.workflow-demo .app-demo-screen[data-scene=report]{background:#f5f5ec;--ink:#273929;--muted:#62705b;--accent:#3e572a}.workflow-demo .app-demo-screen[data-scene=expense]{background:#eeedf5;--ink:#302948;--muted:#6d637e;--accent:#57467b}.workflow-demo .app-demo-screen[data-scene=booking]{background:#fcf4ec;--ink:#4a382d;--muted:#7d6a58;--accent:#825735}.workflow-demo .screen-top{padding:14px 25px;border-color:#647c801f;color:var(--muted);background:#ffffff35}.workflow-demo #app-demo-content{padding:26px 30px 25px;color:var(--ink);min-height:620px}.wf-brand-row{display:flex;align-items:center;gap:20px}.wf-brand-row>strong{font-family:Georgia,serif;font-size:36px;line-height:1;letter-spacing:-2px;font-weight:500}.wf-brand-row>strong i{font-style:normal;color:var(--accent)}.wf-brand-row>span,.wf-brand-row>small{font:8px/1.6 monospace;letter-spacing:1.4px;color:var(--muted)}.wf-brand-row>small{margin-left:auto;white-space:nowrap}.wf-scene-intro{margin:20px 0 24px}.wf-scene-intro h3{font-size:23px;font-weight:500;letter-spacing:-.7px;line-height:1.5}.wf-scene-intro p{font-size:11px;line-height:1.9;color:var(--muted);margin:7px 0 0;max-width:520px}.wf-small-label{font:9px/1.6 monospace;letter-spacing:1px;color:var(--muted)}.wf-avatar{flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;width:30px;height:30px;background:#dcd4c3;color:#4e5147;border-radius:10px;font-size:11px}.wf-avatar.blue{background:#cce1e7;color:#346071}.wf-avatar.sage{background:#dce5d4;color:#526447}.wf-chat-layout{display:grid;grid-template-columns:155px minmax(0,1fr);border:1px solid #cbd8dc;border-radius:6px;overflow:hidden;min-height:338px;background:#fff}.wf-chat-nav{background:#e5edf0;padding:22px 13px;display:flex;flex-direction:column}.wf-workspace{display:flex;align-items:center;gap:9px;font:bold 22px Georgia,serif}.wf-workspace>span{font:11px/1.6 sans-serif}.wf-workspace small{display:block;font:6px monospace;letter-spacing:.5px;color:#637d87}.wf-nav-label{font:8px monospace;letter-spacing:1px;color:#5f7c88;margin:30px 0 12px;display:flex;justify-content:space-between}.wf-channel{font-size:10px;padding:10px 8px;margin:3px -4px;color:#496573}.wf-channel.active{background:#fff;border-radius:4px;color:#173b4a;display:flex;justify-content:space-between}.wf-channel b{font:8px monospace;color:#fff;background:#356d80;padding:2px 4px;border-radius:3px}.wf-chat-members{margin-top:auto;display:flex;flex-wrap:wrap;padding-top:20px;gap:4px}.wf-chat-members .wf-avatar{width:24px;height:24px;font-size:9px;border-radius:50%}.wf-chat-members small{display:block;width:100%;font-size:8px;color:#526d76;margin-top:5px}.wf-thread{padding:18px 20px}.wf-thread-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.wf-thread-head strong{font-size:12px}.wf-thread-head>span{font:7px monospace;color:#537566;white-space:nowrap}.wf-thread-head i,.wf-scan-label i{display:inline-block;width:5px;height:5px;background:#699782;border-radius:50%;margin-right:5px}.wf-date{font-size:8px;color:#7d9299;text-align:center;margin:23px 0 20px}.wf-message{display:flex;gap:9px}.wf-message>div{min-width:0;flex:1}.wf-message b{font-size:10px;font-weight:500}.wf-message time{font:8px monospace;color:#83969c;margin-left:8px}.wf-message p,.wf-reply p{font-size:11px;line-height:1.9;margin:8px 0}.wf-attachment{display:flex;align-items:center;gap:10px;background:#f0f4f5;border:1px solid #d8e1e4;border-radius:4px;padding:8px;margin-top:12px}.wf-attachment>span:nth-child(2){font-size:8px;flex:1}.wf-attachment small{display:block;font-size:7px;color:#647b85;margin-top:5px}.wf-line-art{width:49px;height:39px;display:flex;gap:3px;align-items:end;padding:8px;background:linear-gradient(140deg,#a2bfc5,#e5eff0)}.wf-line-art i{width:6px;height:20px;border:1px solid #426b79;transform:skewY(-20deg)}.wf-line-art i:nth-child(even){height:13px}.wf-reply{margin:17px 0 0 40px;padding:10px 14px;border-radius:6px 6px 0 6px;background:#e1edf2}.wf-reply small{font-size:8px;color:#4c7485}.wf-reply p{margin:3px 0}.wf-read{font-size:8px;color:#527966;text-align:right;margin-top:10px}.wf-report-top{display:flex;gap:20px;justify-content:space-between;align-items:center;padding-bottom:17px;border-bottom:1px solid #cdd3be}.wf-report-top>span:first-child{font:8px monospace;letter-spacing:1px}.wf-report-top b{display:block;font:38px/1.1 Georgia,serif;margin-top:3px;letter-spacing:-2px}.wf-report-person{font-size:11px;line-height:1.9}.wf-report-person small{font:7px monospace;letter-spacing:.5px;color:var(--muted)}.wf-report-stamp{font-size:8px;border:1px solid #a8b495;border-radius:20px;padding:7px 10px}.wf-report-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:19px}.wf-report-metric{background:#dfe9c9;padding:20px;border-radius:3px}.wf-report-metric>span{font-size:10px}.wf-report-metric>strong{font:76px/1.2 Georgia,serif;display:block;letter-spacing:-4px}.wf-report-metric>strong small{font:12px sans-serif;margin-left:8px;letter-spacing:0}.wf-bars{display:flex;align-items:end;height:60px;gap:8px;margin:8px 0 16px;border-bottom:1px solid #8da374;padding:0 0 5px}.wf-bars i{height:var(--bar);flex:1;background:#839e5e}.wf-bars i:last-child{background:#345032}.wf-metric-foot{display:flex;justify-content:space-between;font-size:8px}.wf-metric-foot b{font-weight:400}.wf-voice{padding:14px 0 0}.wf-wave{display:flex;align-items:center;justify-content:space-between;height:82px;gap:4px;padding:0 10px}.wf-wave i{height:var(--h);width:4px;background:#6e8652;border-radius:4px}.wf-voice p{font-size:11px;line-height:1.9}.wf-voice-foot{font-size:8px;display:flex;justify-content:space-between;border-top:1px solid #d4d8cb;padding-top:12px;margin-top:12px;color:var(--muted)}.wf-voice-foot b{font:9px monospace}.wf-handover{margin-top:18px;border-top:1px solid #cdd3be;padding-top:15px;display:grid;grid-template-columns:1fr 1.6fr;gap:5px}.wf-handover>span{font-size:9px;color:#61764c}.wf-handover strong{font-size:11px;font-weight:500}.wf-handover small{font-size:8px;color:var(--muted);grid-column:2}.wf-expense-layout{display:grid;grid-template-columns:1fr 1fr;gap:26px}.wf-receipt-wrap{background:#d9d2e7;border-radius:5px;min-height:340px;padding:20px 18px;display:flex;align-items:center;flex-direction:column}.wf-receipt-wrap>.wf-small-label{font-size:7px;white-space:nowrap}.wf-receipt{background:#fffcf5;color:#413e3a;padding:26px 18px 24px;margin:22px 0 18px;max-width:210px;width:100%;box-shadow:4px 9px 20px #51416620;transform:rotate(-5deg);position:relative;text-align:center;clip-path:polygon(0 0,100% 0,100% 98%,95% 100%,90% 98%,85% 100%,80% 98%,75% 100%,70% 98%,65% 100%,60% 98%,55% 100%,50% 98%,45% 100%,40% 98%,35% 100%,30% 98%,25% 100%,20% 98%,15% 100%,10% 98%,5% 100%,0 98%)}.wf-receipt>span{font:8px monospace;letter-spacing:1px}.wf-receipt>b{display:block;font:11px Georgia,serif;margin:11px 0}.wf-receipt>small{font:7px monospace;color:#7b766e}.wf-receipt-row,.wf-receipt-total{display:flex;align-items:center;justify-content:space-between;border-top:1px dashed #c5c0b7;margin-top:20px;padding-top:13px;font-size:9px}.wf-receipt-total span{font-size:7px}.wf-receipt-total strong{font:25px Georgia,serif;letter-spacing:-1px}.wf-barcode{height:22px;width:85px;margin:20px auto 8px;background:repeating-linear-gradient(90deg,#655e53 0 1px,transparent 1px 3px,#655e53 3px 5px,transparent 5px 8px)}.wf-scan-label{font-size:9px;color:#66547c}.wf-expense-heading>span{font:8px monospace;letter-spacing:1px;color:var(--muted)}.wf-expense-heading h4{font:26px/1.5 Georgia,serif;margin:12px 0 16px}.wf-approval dl{margin:0 0 19px}.wf-approval dl>div{display:flex;justify-content:space-between;font-size:9px;padding:9px 0;border-bottom:1px solid #d8d2e3;gap:10px}.wf-approval dt{color:var(--muted)}.wf-approval dd{margin:0}.wf-approval-title{display:flex;justify-content:space-between;font:7px monospace;letter-spacing:.6px;color:var(--muted)}.wf-approval-title>span{font:8px sans-serif}.wf-route{list-style:none;margin:14px 0 0;padding:0}.wf-route li{display:flex;align-items:center;gap:10px;position:relative;margin:0 0 16px}.wf-route li:not(:last-child):after{content:'';position:absolute;left:13px;top:28px;width:1px;height:17px;background:#c8bfd7}.wf-route i{font:8px monospace;font-style:normal;width:27px;height:27px;border:1px solid #c4bbd4;border-radius:50%;display:grid;place-items:center}.wf-route .current i{background:#5d4b7c;color:#fff;border-color:#5d4b7c}.wf-route strong{display:block;font-size:10px;font-weight:500}.wf-route small{display:block;font-size:8px;margin-top:4px;color:var(--muted)}.wf-route li>span{margin-left:auto}.wf-booking-top{display:flex;align-items:center;justify-content:space-between}.wf-booking-top h4{font:26px/1.4 Georgia,serif;margin:8px 0 0}.wf-booking-date{font:70px/1 Georgia,serif;letter-spacing:-4px;text-align:center}.wf-booking-date small{display:block;font:8px monospace;letter-spacing:2px;margin-top:7px}.wf-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:22px 0;padding-bottom:18px;border-bottom:1px solid #ddc9b6}.wf-week>span{text-align:center;font-size:8px;padding:8px 2px;border-radius:40px;color:var(--muted)}.wf-week b{display:block;font:18px Georgia,serif;margin-top:6px}.wf-week .selected{background:#815638;color:#fff}.wf-booking-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}.wf-agenda-header{font:7px monospace;letter-spacing:.8px;display:flex;gap:20px;color:var(--muted);margin-bottom:10px}.wf-event{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #e4d5c5}.wf-event time{font:11px monospace;color:#8e715a;flex-shrink:0}.wf-event>div{flex:1}.wf-event b{font-size:10px;font-weight:500;display:block}.wf-event small{display:block;font-size:8px;margin-top:5px;color:var(--muted)}.wf-event>span{font-size:7px;border:1px solid #d6bea9;padding:4px;border-radius:3px}.wf-event.pending{background:#ecd9c6;padding:12px 8px;margin:8px -8px 0;border:1px dashed #b68a65;border-radius:5px}.wf-slot-picker{background:#f0e1d2;border-radius:5px;padding:16px}.wf-slot-picker>b{display:block;font-size:14px;margin-top:12px}.wf-slot-picker>small{display:block;font-size:8px;margin-top:7px;color:var(--muted)}.wf-slot-picker label{font-size:9px;display:block;margin-top:19px}.workflow-demo .wf-slot-picker select{font:10px sans-serif;background:#fcf7f0;border:1px solid #c6ab91;border-radius:3px;padding:10px 5px;margin-top:7px;min-height:38px}.wf-slot-picker p{font-size:8px;line-height:1.9;color:var(--muted);margin:12px 0 0}.wf-action-row{display:flex;align-items:center;gap:18px;margin-top:23px;padding-top:20px;border-top:1px solid #67808026}.wf-action{border:0;border-radius:4px;background:var(--accent);color:#fff;padding:14px 17px;min-height:48px;display:flex;gap:25px;justify-content:space-between;align-items:center;font-size:11px;text-align:left;white-space:nowrap;transition:filter .2s}.wf-action:hover{filter:brightness(1.15)}.wf-action:focus-visible,.workflow-demo button:focus-visible,.workflow-demo select:focus-visible{outline:3px solid #a87938;outline-offset:4px}.wf-action>span{font-size:19px}.wf-action-row #demo-status{font-size:8px;color:var(--muted);line-height:1.9;flex:1;margin:0;min-height:32px}.wf-complete .wf-action-row #demo-status{color:var(--ink)}.wf-complete .wf-reply{background:#d9ece4}.wf-complete .wf-report-stamp{background:#dce8c5}.wf-complete .wf-event.pending{border-style:solid;background:#e7dac0}
@media(min-width:1400px){.workflow-demo .app-playground{grid-template-columns:270px minmax(0,1fr);gap:50px}.workflow-demo #app-demo-content{padding:30px 40px}.wf-chat-layout{grid-template-columns:180px minmax(0,1fr)}}
@media(max-width:1050px){.workflow-demo .app-playground{grid-template-columns:190px minmax(0,1fr);gap:20px}.workflow-demo .app-tabs strong{font-size:15px}.workflow-demo #app-demo-content{padding:24px 20px}.wf-brand-row>span{font-size:7px;letter-spacing:.5px}.wf-chat-layout{grid-template-columns:125px minmax(0,1fr)}.wf-chat-nav{padding:20px 9px}.wf-thread{padding:18px 14px}.wf-action-row{display:block}.wf-action-row #demo-status{margin-top:12px}.wf-expense-layout{gap:18px}}
@media(max-width:800px){.workflow-demo{padding-top:70px;padding-bottom:70px}.workflow-demo .app-playground{grid-template-columns:1fr;gap:20px}.workflow-demo .app-tabs{gap:8px}.workflow-demo .app-tabs button{padding:18px 15px;border:1px solid #526d7955;border-radius:4px}.workflow-demo .app-tabs button[aria-pressed=true]{border-left-width:3px}.workflow-demo #app-demo-content{min-height:620px;padding:25px}.wf-action-row{display:flex}.wf-action-row #demo-status{margin-top:0}.wf-chat-layout{grid-template-columns:150px minmax(0,1fr)}}
@media(max-width:520px){.workflow-demo .app-tabs button{padding:16px 10px}.workflow-demo .app-tabs strong{font-size:12px}.workflow-demo .app-tabs small{font-size:9px}.workflow-demo .screen-top{padding:12px 14px;font-size:7px}.workflow-demo .screen-top>span:last-child{display:none}.workflow-demo #app-demo-content{padding:21px 16px;min-height:675px}.wf-brand-row{gap:10px}.wf-brand-row>strong{font-size:33px}.wf-brand-row>span{max-width:110px;font-size:6px}.wf-brand-row>small{font-size:7px;letter-spacing:.5px}.wf-scene-intro h3{font-size:19px}.wf-scene-intro p{font-size:10px}.wf-chat-layout{grid-template-columns:1fr;min-height:360px}.wf-chat-nav{flex-direction:row;padding:12px 14px;align-items:center;gap:12px}.wf-workspace{font-size:18px}.wf-workspace>span{font-size:9px}.wf-nav-label,.wf-channel:not(.active),.wf-chat-members{display:none}.wf-channel.active{margin:0 0 0 auto;font-size:8px;gap:8px;padding:7px}.wf-thread{padding:17px 14px}.wf-date{margin:18px 0}.wf-message p,.wf-reply p{font-size:10px}.wf-action-row{display:block;margin-top:20px}.wf-action{width:100%;font-size:11px}.wf-action-row #demo-status{font-size:9px;margin-top:12px}.wf-report-top{gap:8px}.wf-report-top b{font-size:34px}.wf-report-person{font-size:9px}.wf-report-person small{font-size:6px}.wf-report-stamp{font-size:7px;padding:6px}.wf-report-grid{gap:14px}.wf-report-metric{padding:16px 13px}.wf-report-metric>strong{font-size:65px}.wf-bars{gap:5px}.wf-metric-foot{font-size:7px}.wf-voice p{font-size:9px}.wf-wave{padding:0 4px;gap:3px}.wf-wave i{width:3px}.wf-voice-foot{font-size:7px;gap:4px}.wf-handover{grid-template-columns:1fr;gap:7px}.wf-handover small{grid-column:1}.wf-expense-layout{gap:14px;grid-template-columns:1fr 1fr}.wf-receipt-wrap{padding:17px 8px;min-height:330px}.wf-receipt-wrap>.wf-small-label{font-size:5px;letter-spacing:0}.wf-receipt{padding:23px 10px;margin-top:24px}.wf-receipt>span{font-size:6px;letter-spacing:0}.wf-receipt>b{font-size:8px}.wf-receipt>small{font-size:5px}.wf-receipt-total{display:block}.wf-receipt-total strong{display:block;margin-top:7px;font-size:26px}.wf-receipt-row{font-size:7px}.wf-scan-label{font-size:7px}.wf-expense-heading>span{font-size:6px;letter-spacing:.4px}.wf-expense-heading h4{font-size:19px;margin-top:10px}.wf-approval dl>div{font-size:7px;gap:5px}.wf-approval-title{font-size:6px;letter-spacing:0}.wf-approval-title>span{display:none}.wf-route{margin-top:17px}.wf-route strong{font-size:9px}.wf-route small{font-size:7px;line-height:1.5}.wf-route li{gap:7px;margin-bottom:21px}.wf-route li>span{display:none}.wf-route i{width:24px;height:24px;flex-shrink:0}.wf-route li:not(:last-child):after{left:11px;top:26px;height:23px}.wf-booking-top h4{font-size:22px}.wf-booking-date{font-size:61px}.wf-week{margin:20px 0 16px;gap:3px}.wf-booking-grid{grid-template-columns:1fr;gap:17px}.wf-slot-picker{display:grid;grid-template-columns:1fr 1.1fr;column-gap:14px;padding:13px}.wf-slot-picker>.wf-small-label{font-size:7px}.wf-slot-picker>b{font-size:12px;margin-top:4px}.wf-slot-picker>small{font-size:7px;grid-column:1;margin-top:5px}.wf-slot-picker label{grid-column:2;grid-row:1/4;margin:0;font-size:8px}.wf-slot-picker p{display:none}.workflow-demo .wf-slot-picker select{font-size:9px;margin-top:6px}.wf-event{padding:11px 0}.wf-event.pending{padding:10px 8px}.wf-booking-layout+.wf-action-row{margin-top:17px}}
@media(prefers-reduced-motion:reduce){.wf-action{transition:none}}
/* Keep functional information readable at every size. */
.workflow-demo .wf-message b,.workflow-demo .wf-message p,.workflow-demo .wf-reply p{font-size:12px}.workflow-demo .wf-message time,.workflow-demo .wf-date,.workflow-demo .wf-read,.workflow-demo .wf-reply small,.workflow-demo .wf-attachment>span:nth-child(2),.workflow-demo .wf-attachment small{font-size:10px}.workflow-demo .wf-channel{font-size:11px}.workflow-demo .wf-report-person,.workflow-demo .wf-voice p,.workflow-demo .wf-handover strong{font-size:12px}.workflow-demo .wf-metric-foot,.workflow-demo .wf-voice-foot,.workflow-demo .wf-handover>span,.workflow-demo .wf-handover small{font-size:10px}.workflow-demo .wf-approval dl>div,.workflow-demo .wf-route strong{font-size:11px}.workflow-demo .wf-route small,.workflow-demo .wf-scan-label{font-size:10px}.workflow-demo .wf-event b{font-size:12px}.workflow-demo .wf-event small,.workflow-demo .wf-event>span,.workflow-demo .wf-slot-picker>small,.workflow-demo .wf-slot-picker label,.workflow-demo .wf-slot-picker p{font-size:10px}.workflow-demo .wf-slot-picker select{font-size:12px}.workflow-demo .wf-action-row #demo-status{font-size:10px}
@media(max-width:520px){.workflow-demo .wf-message b,.workflow-demo .wf-message p,.workflow-demo .wf-reply p,.workflow-demo .wf-report-person,.workflow-demo .wf-voice p,.workflow-demo .wf-handover strong,.workflow-demo .wf-event b{font-size:11px}.workflow-demo .wf-message time,.workflow-demo .wf-date,.workflow-demo .wf-read,.workflow-demo .wf-reply small,.workflow-demo .wf-attachment>span:nth-child(2),.workflow-demo .wf-attachment small,.workflow-demo .wf-channel,.workflow-demo .wf-metric-foot,.workflow-demo .wf-voice-foot,.workflow-demo .wf-handover>span,.workflow-demo .wf-handover small,.workflow-demo .wf-approval dl>div,.workflow-demo .wf-route small,.workflow-demo .wf-scan-label,.workflow-demo .wf-event small,.workflow-demo .wf-event>span,.workflow-demo .wf-slot-picker>small,.workflow-demo .wf-slot-picker label{font-size:9px}.workflow-demo .wf-route strong{font-size:10px}.workflow-demo .wf-slot-picker select{font-size:10px}.workflow-demo .wf-receipt>span,.workflow-demo .wf-receipt>small{font-size:7px}.workflow-demo .wf-receipt-row,.workflow-demo .wf-receipt-total span{font-size:8px}.workflow-demo .wf-approval dl>div{display:block}.workflow-demo .wf-approval dd{margin-top:4px}.workflow-demo .wf-route li{margin-bottom:18px}}