.product-demo{position:relative;max-width:1120px;margin:0 auto;padding:25px 155px 0 0;color:#242823;font-family:Inter,Arial,sans-serif;text-align:left}.product-demo *{box-sizing:border-box}.demo-dashboard{background:#f7f8fa;border:1px solid #dfe3e4;border-radius:16px;box-shadow:0 28px 80px #0002;overflow:hidden}.demo-window-bar{height:42px;display:flex;align-items:center;gap:15px;padding:0 16px;background:#fff;border-bottom:1px solid #e8e9eb;font-size:10px;color:#738075}.demo-window-dots{color:#c4c8cb;letter-spacing:4px}.demo-example{margin-left:auto;background:#f1f2f4;padding:4px 8px;border-radius:4px;font-size:9px;white-space:nowrap}.demo-app{display:grid;grid-template-columns:158px 1fr;min-height:475px}.demo-sidebar{background:#1c211e;padding:28px 15px 16px;display:flex;flex-direction:column;gap:22px;font-size:11px;color:#bfc8c1}.demo-sidebar img{width:128px;height:auto;margin-bottom:16px}.demo-menu-selected{background:#f6d947;color:#202822;border-radius:6px;padding:10px;margin:-8px}.demo-store{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:10px}.demo-store>b{padding:8px;background:#3c463d;border-radius:8px;color:#f6d947}.demo-store small{display:block;margin-top:4px;font-size:8px;color:#a0aaa2}.demo-content{padding:28px 24px}.demo-content-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.demo-content-heading small{font-size:8px;color:#7b817d;letter-spacing:1px}.demo-content-heading h3{font-size:19px;letter-spacing:-.5px;margin:8px 0 24px}.demo-content-heading h3 span{color:#c99c11}.demo-period{font-size:8px;border:1px solid #e1e4e1;border-radius:5px;padding:7px;white-space:nowrap}.demo-stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.demo-stat-grid>div{background:#fff;padding:15px 12px;border:1px solid #e4e7e5;border-radius:8px}.demo-stat-grid span{font-size:9px;color:#626c65;display:block}.demo-stat-grid strong{font-size:21px;letter-spacing:-.5px;display:block;margin:10px 0}.demo-stat-grid small{font-size:8px;color:#68766b}.demo-stat-grid .demo-stat-yellow{background:#fff3b3;border-color:#f8e68d}.demo-chart{margin-top:15px;background:#fff;padding:16px;border:1px solid #e4e7e5;border-radius:8px}.demo-chart>div:first-child{display:flex;justify-content:space-between;gap:5px;align-items:center}.demo-chart h4,.demo-activity h4{font-size:11px;margin:0;font-weight:600}.demo-chart span{font-size:8px;color:#7b817d}.demo-bars{height:108px;display:flex;align-items:end;gap:18px;border-bottom:1px solid #e5e9e6;margin-top:16px;background:repeating-linear-gradient(to top,transparent 0,transparent 34px,#f0f2ef 35px,#f0f2ef 36px)}.demo-bars i{height:var(--bar);flex:1;background:#c7d7ba;border-radius:4px 4px 0 0}.demo-bars i:nth-last-child(2){background:#e4c23f}.demo-chart-labels{display:flex;justify-content:space-around;padding-top:8px}.demo-activity{margin-top:16px;padding:16px;background:#fff;border:1px solid #e4e7e5;border-radius:8px}.demo-activity>div{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:10px}.demo-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f6ead4;color:#8e6d35}.demo-activity small{display:block;font-size:8px;color:#727b74;margin-top:5px}.demo-activity strong{margin-left:auto;color:#367958;text-align:right;font-size:12px}
.demo-phone{position:absolute;width:256px;right:0;top:0;transform:rotate(3deg);border:6px solid #222824;border-radius:38px;background:#fff;overflow:hidden;box-shadow:0 24px 65px #0004;font-family:Arial,sans-serif}.demo-phone-top{height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:9px;font-weight:bold;background:#f6f7f7}.demo-island{width:67px;height:18px;background:#222824;border-radius:12px}.demo-chat-header{height:61px;display:flex;align-items:center;gap:9px;background:#f6f7f7;padding:5px 12px;border-bottom:1px solid #dae0dd}.demo-chat-header>span{font-size:25px;color:#467c66}.demo-chat-header>span:last-child{margin-left:auto}.demo-contact-avatar{background:#dfedcb;border:1px solid #cfdcbb;width:33px;height:33px;display:grid;place-items:center;border-radius:50%;color:#457441;font-size:15px}.demo-chat-header strong{font-size:12px}.demo-chat-header small{display:block;font-size:9px;margin-top:4px;color:#76827a}.demo-chat{min-height:378px;background-color:#eee9e1;background-image:radial-gradient(#d9d5cc 1px,transparent 1px);background-size:15px 15px;padding:14px 10px 22px;display:flex;flex-direction:column;gap:12px}.demo-chat-day{align-self:center;font-size:8px;letter-spacing:.6px;background:#fff9;padding:5px 9px;border-radius:5px;color:#75746f}.demo-bubble{font-size:11px;line-height:1.5;background:#fff;border-radius:0 9px 9px 9px;padding:10px 10px 6px;max-width:93%;box-shadow:0 1px 1px #0001}.demo-bubble p{margin:0 0 7px}.demo-bubble>strong{display:block;margin-bottom:7px;font-size:11px}.demo-bubble small{display:block;text-align:right;font-size:8px;color:#839189}.demo-bubble-3{align-self:flex-end;background:#d9fbc8;border-radius:9px 0 9px 9px}.demo-bubble-3 small span{color:#53a8cf}.demo-typing{height:0;overflow:hidden;display:flex;gap:3px;align-items:center}.demo-typing i{height:4px;width:4px;background:#738474;border-radius:50%}.demo-chat-input{height:40px;display:flex;align-items:center;gap:10px;padding:5px 10px;color:#4d796a;background:#f6f7f7}.demo-chat-input>div{flex:1;background:#fff;border:1px solid #d9dddc;border-radius:15px;color:#adb5ae;font-size:10px;padding:7px}.demo-phone-home{height:4px;width:80px;margin:8px auto;background:#29372d;border-radius:4px}.demo-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;width:calc(100% + 155px);margin-top:28px;color:inherit;font-size:11px;line-height:1.6}.demo-caption>span{max-width:660px;opacity:.8}.demo-play{font:inherit;white-space:nowrap;border:1px solid currentColor;background:transparent;color:inherit;border-radius:20px;padding:9px 13px;cursor:pointer}.demo-play:hover{background:#ffffff15}.demo-play:focus-visible{outline:3px solid #e5bb38;outline-offset:3px}.product-demo.is-playing .demo-bubble{animation:demo-message 8s both}.product-demo.is-playing .demo-bubble-2{animation-delay:2s}.product-demo.is-playing .demo-bubble-3{animation-delay:4s}.product-demo.is-paused .demo-bubble{animation-play-state:paused}@keyframes demo-message{0%{opacity:0;transform:translateY(12px) scale(.96)}7%,100%{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:1000px){.product-demo{padding-right:115px}.demo-caption{width:calc(100% + 115px)}.demo-app{grid-template-columns:120px 1fr}.demo-sidebar{padding:20px 12px}.demo-sidebar img{width:97px}.demo-content{padding:24px 16px}.demo-period{display:none}.demo-stat-grid{gap:6px}.demo-stat-grid strong{font-size:18px}.demo-phone{width:235px}.demo-chat{min-height:390px}.demo-caption>span{max-width:60%}}
@media(max-width:700px){.product-demo{padding:0 0 0;display:flex;flex-direction:column;align-items:center;gap:28px}.demo-dashboard{width:100%;order:1}.demo-phone{position:relative;transform:rotate(0);width:280px;max-width:100%;top:auto;right:auto;order:0}.demo-chat{min-height:368px}.demo-bubble{font-size:12px}.demo-bubble>strong{font-size:12px}.demo-caption{order:2;margin-top:0;width:100%;flex-direction:column;gap:12px;text-align:center}.demo-caption>span{max-width:100%}.demo-app{grid-template-columns:1fr;min-height:auto}.demo-sidebar{display:none}.demo-content{padding:19px 13px}.demo-content-heading h3{font-size:18px}.demo-stat-grid>div{padding:11px 8px}.demo-stat-grid strong{font-size:17px}.demo-stat-grid small{display:none}.demo-window-bar{font-size:9px;padding:0 10px;gap:8px}.demo-window-dots{display:none}.demo-bars{height:85px}.demo-stat-grid span{font-size:8px}.demo-chart>div:first-child>span{display:none}}
@media(prefers-reduced-motion:reduce){.product-demo.is-playing .demo-bubble{animation:none!important}.demo-phone{transform:none}}

.demo-dashboard-image>img{display:block;width:100%;height:auto}.demo-dashboard-image{border:0;background:transparent}