.play-landing .reference-feature-visual:has(.workflow-demo){background:0 0;min-width:0;min-height:420px;overflow:visible}.workflow-demo{--wf-green:#284f42;--wf-orange:#bf5634;perspective:1100px;color:#284538;width:100%;min-height:420px;font-family:var(--font-geist-sans), Tahoma, sans-serif;isolation:isolate;grid-template-rows:auto auto;align-content:center;place-items:center;gap:64px;padding-top:24px;display:grid;position:relative}.wf-demo-ground{z-index:-1;background:radial-gradient(#d8e2bd,#e3e9d100 72%);border:1px solid #cbd6b8;border-radius:50%;width:85%;height:70%;position:absolute;transform:rotateX(57deg)translateY(65px)}.wf-stage{--wf-tilt-x:9deg;--wf-tilt-y:-13deg;width:min(440px,88%);min-height:320px;transform:rotateX(var(--wf-tilt-x)) rotateY(var(--wf-tilt-y)) rotateZ(2deg);transform-style:preserve-3d;transition:transform .45s;position:relative}@media (hover:hover) and (prefers-reduced-motion:no-preference){.workflow-demo:hover .wf-stage{--wf-tilt-x:3deg;--wf-tilt-y:-4deg}}.workflow-demo strong,.workflow-demo b{font-weight:700}.workflow-demo small{font-size:10px;line-height:1.7}.workflow-demo h4{margin:6px 0 14px;font-weight:750;line-height:1.5}.wf-window{transform-style:preserve-3d;background:#fffef7;border:1px solid #d6d9c7;border-radius:18px;position:relative;box-shadow:1px 2px #c9cfb9,3px 5px #c9cfb9,5px 8px #b9c3a8,16px 26px 25px #40563922}.wf-window-bar{background:#f7f7ed;border-bottom:1px solid #e8eadd;border-radius:18px 18px 0 0;align-items:center;gap:10px;height:43px;padding:0 14px;display:flex}.wf-window-bar strong{font-size:11px}.wf-window-bar>span:last-child{color:#6c7b61;margin-left:auto;font-size:9px}.wf-window-dots{gap:4px;display:flex}.wf-window-dots i{background:#d38362;border-radius:50%;width:5px;height:5px}.wf-window-dots i:nth-child(2){background:#e0c772}.wf-window-dots i:nth-child(3){background:#8aa279}.wf-label{color:#6b775c;font-size:10px;line-height:1.7}.wf-demo-caption{color:#647153;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;width:100%;font-size:10px;display:flex;position:relative}.wf-motion-control{color:#395b3f;cursor:pointer;min-height:44px;font:inherit;background:#f8faec;border:1px solid #cbd4b9;border-radius:99px;padding:4px 10px}.wf-motion-control:hover{background:#e2ebcf}.wf-motion-control[aria-pressed=true]{background:#d9e5c0}.wf-status{color:#486c36;white-space:nowrap;background:#ecf0dd;border-radius:99px;padding:5px 10px;font-size:10px;display:inline-block}.wf-notice{background:#fffef8;border:1px solid #dce1ce;border-radius:13px;align-items:center;gap:10px;padding:12px 16px;display:flex;position:absolute;bottom:-23px;left:14px;transform:translateZ(55px)rotate(-5deg);box-shadow:2px 4px #cbd5b8,8px 14px 24px #43533318}.wf-notice strong{font-size:12px;display:block}.wf-notice small{color:#65705d;margin-top:3px;display:block}.wf-check{color:#617c3c;background:#eaf0d6;border-radius:10px;flex-shrink:0;place-items:center;width:31px;height:31px;display:grid}.wf-pos-layout{grid-template-columns:1.15fr .85fr;min-height:274px;display:grid}.wf-pos-menu{padding:15px}.wf-pills{align-items:center;gap:12px;margin-bottom:12px;font-size:10px;display:flex}.wf-pills b{color:#fff;background:#284f42;border-radius:99px;padding:5px 8px}.wf-products{grid-template-columns:1fr 1fr;gap:9px;display:grid}.wf-product{background:#fff;border:1px solid #e4e5d8;border-radius:9px;overflow:hidden}.wf-product strong,.wf-product>span{padding:2px 8px;font-size:10px;display:block}.wf-product>span{color:#a94b2d;padding-bottom:6px}.wf-product-art{place-items:center;height:53px;display:grid}.wf-art-0{background:#f0dfc7}.wf-art-1{background:#dfe8cc}.wf-art-2{background:#e4d7bf}.wf-art-3{background:#ead4c8}.wf-cup{background:linear-gradient(90deg,#8e5c3b,#c49a6a);border:2px solid #ffffffe0;border-radius:4px 4px 9px 9px;width:26px;height:31px;display:block;position:relative;transform:rotate(-8deg);box-shadow:3px 4px #72523b24}.wf-cup:before{content:"";border:3px solid #fff5dd;border-left:0;border-radius:0 10px 10px 0;width:12px;height:15px;position:absolute;top:4px;right:-12px}.wf-cup i{background:#e9cda3;border-radius:50%;height:5px;position:absolute;top:3px;left:3px;right:3px}.wf-cup-light{background:linear-gradient(90deg,#f6eed5,#e3d0a8)}.wf-receipt{background:#f8f9ef;border-left:1px solid #e1e4d6;border-radius:0 0 18px;padding:15px 12px}.wf-receipt h4{font-size:18px}.wf-receipt>div{justify-content:space-between;padding:8px 0;font-size:10px;display:flex}.wf-receipt .wf-receipt-total{border-top:1px dashed #bec7b0;margin-top:22px;font-size:14px}.wf-button-look{text-align:center;color:#fff;background:#b94f30;border-radius:7px;margin-top:10px;padding:8px 4px;font-size:10px;display:block}.wf-demo-1 .wf-stage{min-height:350px}.wf-phone{background:#fffdf4;border:6px solid #345044;border-radius:29px;width:195px;margin-left:32px;padding:18px 10px 11px;position:relative;transform:translateZ(20px)rotate(-6deg);box-shadow:4px 5px #1b352c,13px 20px 25px #344b2d25}.wf-phone-speaker{background:#345044;border-radius:0 0 8px 8px;width:52px;height:6px;display:block;position:absolute;top:5px;left:50%;transform:translate(-50%)}.wf-phone-header{background:#edf0dd;border-radius:14px;padding:13px 7px}.wf-phone-header>span{letter-spacing:.06em;font-size:9px}.wf-phone-header h4{margin-bottom:1px;font-size:16px}.wf-phone-header small{color:#637456;font-size:9px}.wf-phone-menu{padding:10px 4px}.wf-phone-menu>div{border-bottom:1px solid #eeeee2;align-items:center;gap:12px;padding:10px 0;display:flex}.wf-phone-menu .wf-cup{flex-shrink:0;width:21px;height:27px;margin-right:3px}.wf-phone-menu strong,.wf-phone-menu small{font-size:9px;display:block}.wf-phone-menu b{text-align:center;color:#fff;background:#284f42;border-radius:50%;width:19px;height:19px;margin-left:auto;font-size:13px}.wf-phone-cart{color:#fff;background:#b95231;border-radius:10px;justify-content:space-between;padding:10px 7px;font-size:9px;display:flex}.wf-qr-card{text-align:center;background:#fffef7;border:1px solid #d8dcc9;border-radius:17px;width:164px;padding:17px 12px;position:absolute;top:70px;right:3px;transform:translateZ(70px)rotate(10deg);box-shadow:3px 5px #c9d3b7,9px 18px 20px #3f55321c}.wf-qr-card .wf-label{font-size:9px}.wf-qr-art{color:#345444;background:#fff;border-radius:8px;width:110px;height:110px;margin:12px auto;padding:8px}.wf-qr-card strong,.wf-qr-card small{display:block}.wf-qr-card strong{font-size:12px}.wf-qr-card small{color:#708060;margin-top:5px;font-size:8px}.wf-notice-qr{bottom:-6px;left:auto;right:0}.wf-stock-summary{padding:17px 21px 12px;position:relative}.wf-stock-summary h4{margin:3px 0 0;font-size:20px}.wf-stock-summary .wf-status{font-size:8px;position:absolute;top:19px;right:17px}.wf-stock-list{padding:0 20px 27px}.wf-stock-row{border-top:1px solid #ececdf;grid-template-columns:42px 1fr 52px;align-items:center;gap:13px;padding:12px 0;display:grid}.wf-stock-row strong{font-size:12px}.wf-stock-row>span:last-child{text-align:right}.wf-stock-row b{font-size:17px;display:block}.wf-stock-row small{color:#748066}.wf-stock-icon{border-radius:11px;place-items:center;width:42px;height:42px;display:grid}.wf-stock-icon>span{background:#fff9eb;border:2px solid #8f704a;border-radius:3px;width:20px;height:26px;transform:rotate(-7deg);box-shadow:3px 2px #9279553d}.wf-meter{background:#e5e9dc;border-radius:99px;width:90%;height:5px;margin-top:7px}.wf-meter i{border-radius:inherit;background:#839c5c;height:100%;display:block}.wf-stock-row:last-child .wf-meter i{background:#c37b3c}.wf-stock-alert{background:#fff4d9;border:1px solid #e3c898;border-radius:13px;align-items:center;gap:12px;padding:13px 17px;display:flex;position:absolute;bottom:-21px;right:-4px;transform:translateZ(55px)rotate(5deg);box-shadow:3px 4px #d8bb84,8px 13px 20px #6f562a12}.wf-stock-alert>span{text-align:center;color:#fff;background:#ba6b2c;border-radius:50%;width:27px;height:27px;font-weight:700}.wf-stock-alert strong,.wf-stock-alert small{display:block}.wf-stock-alert strong{font-size:12px}.wf-stock-alert small{color:#886532}.wf-attendance{padding:19px 21px 25px}.wf-shift h4{margin:2px 0;font-size:22px}.wf-shift>strong{color:#6c785e;font-size:11px}.wf-week{gap:6px;margin:15px 0;display:flex}.wf-week span{text-align:center;color:#6b745f;background:#f4f5ea;border-radius:9px;flex:1;padding:6px 2px;font-size:9px}.wf-week b{margin-top:4px;font-size:12px;display:block}.wf-week .is-today{color:#fff;background:#284f42}.wf-staff{gap:8px;display:grid}.wf-staff>div{align-items:center;gap:9px;display:flex}.wf-avatar{color:#816039;background:#eddfc1;border-radius:50%;place-items:center;width:30px;height:30px;font-size:12px;display:grid}.wf-staff strong,.wf-staff small{font-size:10px;display:block}.wf-staff small{color:#6a7b5b;font-size:8px}.wf-staff b{color:#718e4e;margin-left:auto}.wf-clock{background:repeating-conic-gradient(#a8915c 0deg 2deg,#fff9e5 2deg 30deg);border:8px solid #c66741;border-radius:50%;width:90px;height:90px;position:absolute;top:35px;right:-13px;transform:translateZ(70px)rotate(6deg);box-shadow:4px 6px #974b30,10px 12px 18px #7e4f2824}.wf-clock:before{content:"";background:#fff9e5;border-radius:50%;position:absolute;inset:7px}.wf-clock-hand{transform-origin:bottom;background:#355543;border-radius:4px;width:4px;height:22px;position:absolute;bottom:50%;left:calc(50% - 2px);transform:rotate(270deg)}.wf-clock-minute{height:28px;transform:rotate(0)}.wf-clock i{background:#b25c34;border-radius:50%;width:8px;height:8px;position:absolute;top:calc(50% - 4px);left:calc(50% - 4px)}.wf-clock b{text-align:center;color:#8e5635;width:100px;font-size:9px;position:absolute;bottom:-29px;left:-13px}.wf-report-top{justify-content:space-between;align-items:flex-start;padding:18px 22px 0;display:flex}.wf-report-top h4{letter-spacing:-.05em;margin:1px 0 9px;font-size:30px}.wf-report-top h4 span{color:#8b947c;font-size:17px}.wf-chart{justify-content:space-around;height:145px;margin:0 22px 16px;padding:5px 0 0;display:flex;position:relative}.wf-chart-grid{background:repeating-linear-gradient(0deg,#e3e7d7 0 1px,#0000 1px 32px);position:absolute;inset:0 0 23px}.wf-chart-column{z-index:1;flex-direction:column;justify-content:end;align-items:center;width:9%;height:100%;display:flex}.wf-chart-column>span{background:linear-gradient(90deg,#8ca869,#b3c490);border-radius:5px 5px 0 0;width:100%;box-shadow:4px -3px #657e4866}.wf-chart-column:nth-last-child(2)>span{background:linear-gradient(90deg,#b95332,#df8153);box-shadow:4px -3px #a44e3255}.wf-chart-column small{color:#6a745e;height:23px;margin-top:7px;font-size:9px;display:block}.wf-report-stats{border-top:1px solid #e6e8d9;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:12px 20px 20px;display:grid}.wf-report-stats span{color:#727c65;font-size:9px}.wf-report-stats b{color:#36523c;margin-top:4px;font-size:13px;display:block}.wf-report-float{background:#fffef6;border:1px solid #dce0cb;border-radius:13px;align-items:center;gap:11px;padding:12px 17px;display:flex;position:absolute;bottom:-25px;right:0;transform:translateZ(60px)rotate(4deg);box-shadow:3px 4px #cbd3b8,9px 15px 20px #3d522318}.wf-report-float strong{font-size:11px;display:block}.wf-donut{background:conic-gradient(#bf633e 0 35%,#859d5b 35% 75%,#e5d2a0 75%);border-radius:50%;width:40px;height:40px;position:relative}.wf-donut:after{content:"";background:#fffef6;border-radius:50%;position:absolute;inset:9px}.wf-branch-network{height:315px;position:relative}.wf-branch-hq{color:#fff8df;z-index:2;background:#284f42;border-radius:17px;align-items:center;gap:14px;width:240px;margin:0 auto;padding:20px;display:flex;position:relative;transform:translateZ(45px);box-shadow:3px 6px #17392e,12px 17px 20px #2b492b22}.wf-branch-hq .wf-label{color:#d3dfb6;font-size:9px}.wf-branch-hq h4{margin:3px 0;font-size:22px}.wf-branch-hq small{color:#d4dfbd;font-size:9px}.wf-hq-mark{color:#294932;background:#e4b65f;border-radius:12px;flex-shrink:0;place-items:center;width:41px;height:41px;font-size:29px;font-weight:700;display:grid}.wf-branch-lines{fill:none;stroke:#8da06b;stroke-width:2px;stroke-dasharray:5 5;width:100%;height:170px;position:absolute;top:80px;left:0}.wf-branch-nodes{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:57px;display:grid;position:relative;transform:translateZ(20px)}.wf-branch-node{background:#fffdf3;border:1px solid #d7ddc7;border-radius:13px;justify-items:center;gap:9px;padding:13px 7px;display:grid;box-shadow:3px 5px #c0cbad,8px 14px 18px #3b542120}.wf-branch-1{transform:translateY(20px)translateZ(15px)}.wf-branch-node strong{font-size:11px}.wf-branch-node>span:last-child{color:#6b7d54;white-space:nowrap;font-size:7px}.wf-branch-node>span>i{background:#7c9b55;border-radius:50%;width:4px;height:4px;display:inline-block}.wf-shop-icon{background:#f4e3bf;border:1px solid #b7bd9c;border-radius:4px;width:50px;height:43px;display:block;position:relative;box-shadow:4px 3px #ccd1b4}.wf-shop-icon>i{background:repeating-linear-gradient(90deg,#c66a46 0 7px,#fff2d3 7px 14px);border-radius:4px 4px 3px 3px;height:12px;position:absolute;top:-3px;left:-4px;right:-4px}.wf-shop-icon>b{background:#afc7a8;border:3px solid #456247;width:18px;height:17px;position:absolute;top:16px;left:6px}.wf-shop-icon>em{background:#496b51;width:12px;height:26px;position:absolute;bottom:0;right:5px}.wf-demo-5 .wf-notice{bottom:-39px;left:35px}@media (max-width:767px){.play-landing .reference-feature-visual:has(.workflow-demo){order:1;min-height:370px}.play-landing .reference-feature-copy:has(+.reference-feature-visual .workflow-demo){order:0}.workflow-demo{min-height:370px}.wf-stage{--wf-tilt-x:6deg;--wf-tilt-y:-7deg;width:min(410px,94%);transform:rotateX(var(--wf-tilt-x)) rotateY(var(--wf-tilt-y)) rotateZ(1deg)}.wf-window-bar{gap:7px;padding:0 10px}.wf-window-bar strong{font-size:10px}.wf-window-bar>span:last-child{font-size:8px}.wf-pos-menu{padding:10px}.wf-pos-layout{grid-template-columns:1.1fr .9fr;min-height:268px}.wf-pills{gap:6px;font-size:8px}.wf-products{gap:6px}.wf-product strong,.wf-product>span{padding-inline:5px;font-size:9px}.wf-receipt{padding:12px 9px}.wf-receipt>div{font-size:9px}.wf-receipt h4{font-size:16px}.wf-notice{gap:7px;padding:10px 12px;bottom:-18px;left:5px}.wf-notice strong{font-size:10px}.wf-notice small{font-size:8px}.wf-demo-1 .wf-stage{min-height:320px}.wf-phone{width:170px;margin-left:3px;padding:17px 8px 10px}.wf-phone-header{padding:10px 7px}.wf-phone-header h4{font-size:14px}.wf-phone-menu>div{gap:9px;padding:8px 0}.wf-phone-cart{padding:9px 5px;font-size:8px}.wf-qr-card{width:122px;padding:12px 7px;top:68px;right:-3px}.wf-qr-card .wf-label{font-size:8px}.wf-qr-art{width:87px;height:87px;margin:8px auto;padding:7px}.wf-qr-card strong{font-size:10px}.wf-qr-card small{font-size:7px}.wf-notice-qr{bottom:-17px;left:auto;right:0}.wf-stock-summary{padding:17px 14px 12px}.wf-stock-summary h4{font-size:16px}.wf-stock-summary .wf-status{margin-top:7px;position:static}.wf-stock-list{padding:0 14px 23px}.wf-stock-row{grid-template-columns:36px 1fr 43px;gap:9px}.wf-stock-row strong{font-size:10px}.wf-stock-row b{font-size:15px}.wf-stock-icon{width:36px;height:36px}.wf-stock-alert{padding:10px 12px;bottom:-20px}.wf-stock-alert strong{font-size:10px}.wf-stock-alert small{font-size:8px}.wf-attendance{padding:16px 14px 20px}.wf-shift h4{font-size:19px}.wf-clock{border-width:6px;width:70px;height:70px;top:40px;right:-4px}.wf-clock-hand{height:17px}.wf-clock-minute{height:22px}.wf-clock b{width:83px;font-size:8px}.wf-week{gap:4px}.wf-report-top{padding:16px 14px 0}.wf-report-top h4{font-size:25px}.wf-report-top .wf-status{padding:4px 7px;font-size:8px}.wf-chart{height:134px;margin-inline:14px}.wf-report-stats{gap:6px;padding:12px 14px 20px}.wf-report-stats span{font-size:8px}.wf-report-stats b{font-size:10px}.wf-report-float{padding:10px 12px;bottom:-16px}.wf-report-float strong{font-size:9px}.wf-report-float .wf-label{font-size:8px}.wf-donut{width:34px;height:34px}.wf-branch-hq{width:215px;padding:17px}.wf-branch-nodes{gap:6px}.wf-branch-node{padding:12px 4px}.wf-branch-node strong{font-size:9px}.wf-branch-node>span:last-child{font-size:6px}.wf-shop-icon{width:43px;height:39px}.wf-shop-icon>b{width:16px;left:4px}.wf-shop-icon>em{width:10px;right:4px}.wf-demo-5 .wf-notice{bottom:-28px;left:0}}@media (max-width:370px){.wf-stage{width:100%}.wf-window-bar>span:last-child{display:none}.wf-phone{width:154px;margin-left:0}.wf-phone-menu>div{gap:8px}.wf-phone-menu strong{font-size:8px}.wf-phone-cart{font-size:7px}.wf-qr-card{width:109px;right:-3px}.wf-qr-art{width:76px;height:76px}.wf-qr-card .wf-label{font-size:7px}.wf-qr-card strong{font-size:9px}.wf-notice small{font-size:7px}.wf-check{width:26px;height:26px}.wf-notice{padding:9px}.wf-branch-node>span:last-child{white-space:normal;text-align:center}.wf-branch-nodes{gap:5px}}@media (prefers-reduced-motion:reduce){.workflow-demo .wf-stage{transition:none;transform:none}.wf-motion-control{display:none}}@media (prefers-reduced-motion:no-preference){.workflow-demo .wf-stage{animation:7s ease-in-out infinite wf-scene-float}.workflow-demo .wf-notice,.workflow-demo .wf-stock-alert,.workflow-demo .wf-report-float{animation:4.6s ease-in-out infinite wf-card-bob}.workflow-demo .wf-product-art .wf-cup{animation:4s ease-in-out infinite wf-cup-tilt}.workflow-demo .wf-product:nth-child(2n) .wf-cup{animation-delay:-.9s}.workflow-demo .wf-qr-art{animation:3.5s ease-in-out infinite wf-qr-pulse}.workflow-demo .wf-meter i{transform-origin:0;animation:5s ease-in-out infinite wf-stock-level}.workflow-demo .wf-stock-row:nth-child(2) .wf-meter i{animation-delay:-1s}.workflow-demo .wf-clock-minute{animation:12s linear infinite wf-clock-tick}.workflow-demo .wf-chart-column>span{transform-origin:bottom;animation:4s ease-in-out infinite wf-chart-rise}.workflow-demo .wf-chart-column:nth-child(2n)>span{animation-delay:-.7s}.workflow-demo .wf-branch-node{animation:4.8s ease-in-out infinite wf-branch-bob}.workflow-demo .wf-branch-1{animation-delay:-1.6s}.workflow-demo .wf-branch-2{animation-delay:-3.2s}.workflow-demo .wf-branch-hq .wf-hq-mark{animation:4s ease-in-out infinite wf-qr-pulse}.workflow-demo[data-running=false] *,.workflow-demo[data-running=false] :before,.workflow-demo[data-running=false] :after{animation-play-state:paused!important}}@keyframes wf-scene-float{0%,to{transform:rotateX(var(--wf-tilt-x)) rotateY(var(--wf-tilt-y)) rotateZ(1deg) translateY(0)}50%{transform:rotateX(var(--wf-tilt-x)) rotateY(var(--wf-tilt-y)) rotateZ(-1deg) translateY(-7px)}}@keyframes wf-card-bob{0%,to{transform:translateZ(55px)translateY(0)rotate(-3deg)}50%{transform:translateZ(65px)translateY(-6px)rotate(1deg)}}@keyframes wf-cup-tilt{0%,to{transform:rotate(-8deg)}50%{transform:rotate(4deg)translateY(-3px)}}@keyframes wf-qr-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.035)}}@keyframes wf-stock-level{0%,to{transform:scaleX(1)}50%{transform:scaleX(.84)}}@keyframes wf-clock-tick{to{transform:rotate(360deg)}}@keyframes wf-chart-rise{0%,to{transform:scaleY(1)}50%{transform:scaleY(.76)}}@keyframes wf-branch-bob{0%,to{transform:translateY(0)translateZ(20px)}50%{transform:translateY(-9px)translateZ(30px)}}