:root{--navy:#08264d;--blue:#0868e8;--blue2:#18a8ff;--pale:#eef7ff;--line:#dce6f2;--green:#0baa72;--amber:#f59e0b;--red:#e5484d;--ink:#163456;--muted:#68809b;--shadow:0 14px 42px rgba(23,69,122,.09)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#fff 0,#f7fbff 62%,#fff 100%);font-size:16px}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1200px)/2));border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);z-index:50}.brand{display:flex;align-items:center;text-decoration:none;color:#101c2e;gap:12px}.delfi{font-size:22px;font-weight:800}.orb{font-size:14px;margin-left:4px}.brand-rule{height:28px;width:1px;background:#bdcad8}.xmark{font-size:10px;line-height:1.05;color:var(--blue);font-weight:900;letter-spacing:.05em}.topbar nav{display:flex;gap:28px}.topbar nav a,.text-button{color:#294868;text-decoration:none;font-size:14px;font-weight:650}.topbar nav a:hover{color:var(--blue)}button,a{font:inherit}.button{border:0;border-radius:10px;padding:13px 18px;color:#fff;background:var(--blue);font-weight:750;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 7px 20px rgba(8,104,232,.2)}.button:hover{background:#0058ca}.button.small{padding:10px 15px;font-size:14px}.button.ghost{color:var(--blue);background:#fff;border:1px solid #b9d7fa;box-shadow:none}.text-button,.icon-button{border:0;background:none;cursor:pointer}.header-actions{display:flex;align-items:center;gap:12px}.section-shell{max-width:1200px;margin:0 auto;padding:84px 24px}.hero{min-height:680px;display:grid;grid-template-columns:.92fr 1.08fr;gap:55px;align-items:center}.eyebrow{color:var(--blue);font-size:12px;letter-spacing:.15em;font-weight:850;margin:0 0 12px}.hero h1{font-size:clamp(44px,5vw,72px);line-height:1.03;letter-spacing:-.045em;margin:0;color:var(--navy)}.hero h1 span{color:var(--blue)}.lead{font-size:18px;line-height:1.65;color:#506a86;max-width:580px}.hero-actions{display:flex;gap:12px;margin:28px 0}.trust-row{display:flex;gap:24px;color:#5a7691;font-size:13px}.system-map{height:470px;position:relative;border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at 50% 45%,#d7f1ff 0,#eef8ff 25%,#fff 61%);box-shadow:var(--shadow);overflow:hidden}.system-map:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#bfd5e722 1px,transparent 1px),linear-gradient(90deg,#bfd5e722 1px,transparent 1px);background-size:34px 34px}.sys-node{position:absolute;background:#fff;border:1px solid #cfe0f1;border-radius:14px;padding:13px;box-shadow:0 12px 28px rgba(16,63,110,.12);color:var(--navy);cursor:pointer;z-index:2;transition:.2s}.sys-node:hover,.sys-node:focus{transform:translateY(-4px);border-color:var(--blue);outline:0}.sys-node b,.sys-node small{display:block}.sys-node small{font-size:11px;color:var(--muted);margin-top:3px}.node-icon{font-size:26px;color:var(--blue)}.admin-node{left:35px;top:70px}.pda-node{right:36px;top:72px}.warehouse-node{left:50%;transform:translateX(-50%);bottom:53px}.warehouse-node:hover{transform:translate(-50%,-4px)}.cloud-node{left:50%;top:45%;transform:translate(-50%,-50%);border:0;background:transparent;box-shadow:none}.cloud-node:hover{transform:translate(-50%,-54%)}.cloud-shape{width:125px;height:78px;border-radius:50%;background:linear-gradient(135deg,#14b9ff,#075fd8);color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 15px 35px #0b8fed55}.flow-line{position:absolute;height:2px;background:#7abaf3;transform-origin:left}.line-a{left:178px;top:135px;width:155px;transform:rotate(20deg)}.line-b{right:180px;top:136px;width:145px;transform:rotate(160deg);transform-origin:right}.line-c{left:50%;top:260px;height:100px;width:2px}.flow-line i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--blue);top:-4px;animation:pulse 2.2s linear infinite}.flow-line i:nth-child(2){animation-delay:1.1s}@keyframes pulse{from{left:0;opacity:0}20%{opacity:1}to{left:100%;opacity:0}}.phone-mini{display:block;font-size:22px;color:var(--blue)}.system-status{position:absolute;bottom:12px;left:14px;font-size:12px;color:#56708b;background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 11px}.system-status span,.live-dot:before{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:6px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px}.section-head h2,.mission-heading h2{font-size:clamp(28px,3vw,42px);letter-spacing:-.03em;margin:0;color:var(--navy)}.section-head>p{max-width:440px;line-height:1.6;color:var(--muted)}.map-section{padding-top:40px}.warehouse-canvas{height:590px;border:1px solid var(--line);border-radius:24px;position:relative;overflow:hidden;background:linear-gradient(145deg,#e8f5fc,#f8fcff);box-shadow:var(--shadow)}.warehouse-canvas:before{content:"";position:absolute;inset:12%;background:repeating-linear-gradient(90deg,#d9e8f4 0 2px,transparent 2px 94px),repeating-linear-gradient(0deg,#d9e8f4 0 2px,transparent 2px 80px);transform:perspective(500px) rotateX(30deg)}.route{position:absolute;bottom:24px;left:4%;right:4%;display:grid;grid-template-columns:repeat(4,1fr);background:#273f5d;color:#fff;padding:10px;border-radius:8px;font-size:11px;letter-spacing:.12em;text-align:center}.zone{position:absolute;border:2px solid #bfd7eb;background:rgba(255,255,255,.76);border-radius:12px;padding:14px;color:#315777;min-width:130px;height:105px}.zone b,.zone span{display:block}.zone span{font-size:30px;color:#9dbbd3;margin-top:12px}.receiving{left:4%;top:35%}.aisle-a{left:27%;top:18%;height:190px}.aisle-b{left:46%;top:18%;height:190px}.putaway{left:29%;bottom:17%}.picking{right:20%;top:32%;height:175px}.shipping{right:4%;bottom:16%}.hotspot{position:absolute;z-index:3;background:#fff;border:1px solid #cbdfee;border-radius:12px;padding:10px 12px;box-shadow:0 9px 20px #163b6620;display:grid;grid-template-columns:32px auto;column-gap:8px;text-align:left;cursor:pointer;max-width:190px;transition:.2s}.hotspot:hover,.hotspot.active{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 11px 26px #0868e82d}.hotspot em{grid-row:1/3;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800}.hotspot strong{font-size:14px}.hotspot small{color:var(--muted);font-size:11px;margin-top:2px}.h1{left:3%;top:10%}.h2{left:34%;top:7%}.h3{right:3%;top:10%}.h4{right:3%;top:48%}.h5{left:8%;bottom:8%}.h6{right:25%;bottom:6%}.experience{padding-top:60px;position:relative}.mission-heading{display:flex;justify-content:space-between;align-items:start;gap:20px}.mission-heading h2{font-size:30px;max-width:860px}.demo-badge{background:#eef5fd;color:#58728e;border:1px solid var(--line);border-radius:99px;padding:8px 12px;font-size:12px}.timeline{display:grid;grid-template-columns:repeat(5,1fr);margin:32px 0}.timeline-node{position:relative;text-align:center;color:#91a3b5;font-size:12px}.timeline-node:before{content:"";display:block;width:13px;height:13px;border-radius:50%;background:#cbd8e4;margin:0 auto 8px;position:relative;z-index:2}.timeline-node:after{content:"";position:absolute;height:2px;background:#d7e2ec;top:6px;left:-50%;right:50%;z-index:1}.timeline-node:first-child:after{display:none}.timeline-node.done{color:var(--green)}.timeline-node.done:before{background:var(--green)}.timeline-node.current{color:var(--blue);font-weight:800}.timeline-node.current:before{background:var(--blue);box-shadow:0 0 0 5px #0868e822}.timeline-node small{display:block;margin-top:4px}.demo-grid{display:grid;grid-template-columns:1fr 1.2fr .88fr;gap:16px}.panel{background:#fff;border:1px solid var(--line);border-radius:16px;min-height:490px;box-shadow:0 8px 30px #214e7f0a;overflow:hidden}.panel-title{height:48px;background:#edf6ff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:var(--navy);font-weight:800;font-size:14px}.panel-title span:last-child{font-weight:600;font-size:11px;color:var(--muted)}#adminContent,#warehouseContent{padding:18px}.data-list{display:grid;gap:12px}.data-row{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid #edf2f7;padding-bottom:10px}.data-row span{font-size:13px;color:var(--muted)}.data-row b{text-align:right;font-size:14px}.progress-card{margin-top:20px;background:#f6faff;border:1px solid #deebf7;border-radius:12px;padding:14px}.progress-track{height:8px;background:#e0eaf3;border-radius:10px;overflow:hidden;margin-top:9px}.progress-fill{height:100%;background:var(--blue);transition:.35s}.result-strip{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;text-align:center;margin-top:16px;gap:7px}.result-strip>div{border:1px solid var(--line);border-radius:10px;padding:10px 4px}.result-strip span{display:block;color:var(--muted);font-size:10px}.result-strip b{font-size:20px;color:var(--navy)}.result-strip .change b{color:var(--green)}.warehouse-visual{height:260px;position:relative;border-radius:14px;background:linear-gradient(180deg,#e9f6ff,#f9fcff);border:1px solid #d5e6f4;overflow:hidden}.floor{position:absolute;inset:45% 4% 8%;border:1px solid #c7dbea;transform:skewY(-6deg);background:repeating-linear-gradient(90deg,#dfebf4 0 1px,transparent 1px 50px)}.location{position:absolute;top:33px;width:110px;height:145px;background:repeating-linear-gradient(0deg,#83a9c7 0 5px,transparent 5px 36px);border:6px solid #537d9e;border-top:10px solid #537d9e;padding:4px;color:#153a5b;font-size:11px;font-weight:800}.location.left{left:28px}.location.right{right:28px}.boxes{position:absolute;bottom:22px;left:38px;display:flex;gap:4px}.box{width:25px;height:25px;background:#d99c4c;border:2px solid #a96b25;transition:transform .7s,opacity .4s}.moving .box:nth-child(-n+3){transform:translateX(205px);animation-delay:calc(var(--i)*.08s)}.warehouse-note{margin-top:14px;font-size:13px;line-height:1.45;color:#52718e}.warehouse-note strong{color:var(--green)}.pda-panel{background:#f7fbff}.pda-shell{width:245px;margin:18px auto;background:#102b47;border-radius:30px;padding:13px 10px 17px;box-shadow:0 18px 32px #0e2f4f35}.pda-speaker{width:54px;height:4px;background:#557089;border-radius:4px;margin:0 auto 9px}.pda-screen{min-height:385px;background:#fff;border-radius:16px;padding:16px;overflow:hidden}.pda-home{height:12px;width:12px;border:1px solid #7990a5;border-radius:50%;margin:10px auto 0}.pda-screen h4{margin:0 0 4px;color:var(--blue)}.pda-screen .taskcode{font-size:11px;color:var(--muted);margin-bottom:16px}.barcode{height:58px;background:repeating-linear-gradient(90deg,#0c2237 0 2px,transparent 2px 5px,#0c2237 5px 8px,transparent 8px 11px);margin:14px 0;border:8px solid #fff}.pda-field{background:#f2f7fc;border:1px solid #dfebf5;border-radius:9px;padding:9px;margin:8px 0;font-size:12px;display:flex;justify-content:space-between}.pda-action{width:100%;border:0;border-radius:9px;padding:11px;margin-top:8px;background:var(--blue);color:#fff;font-weight:800;cursor:pointer}.pda-action.secondary{background:#fff;border:1px solid #b8d6f6;color:var(--blue)}.pda-action.warning{background:#fff7e6;border:1px solid #f8ce80;color:#9a6100}.pda-action:disabled{background:#c8d6e4;cursor:not-allowed}.qty-control{display:grid;grid-template-columns:42px 1fr 42px;gap:5px;align-items:center;margin:12px 0}.qty-control button{height:42px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:20px}.qty-control b{text-align:center;font-size:25px}.activity-panel{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}.activity-head{display:flex;justify-content:space-between;align-items:center}.activity-head h3{margin:0;color:var(--navy)}.icon-button{font-size:26px;color:var(--muted)}.activity-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.activity-item{border-left:3px solid var(--blue);background:#f7fbff;padding:9px 11px;font-size:12px;animation:slideIn .3s ease}.activity-item time{color:var(--muted);margin-right:8px}@keyframes slideIn{from{opacity:0;transform:translateY(6px)}}.dashboard{padding-top:60px}.hidden{display:none!important}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.kpi-grid article,.dashboard-grid article{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px}.kpi-grid span,.kpi-grid small{display:block;color:var(--muted);font-size:13px}.kpi-grid b{font-size:31px;color:var(--navy);display:block;margin:7px 0}.dashboard-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}.dashboard-grid h3{margin-top:0}.chart{height:210px;display:flex;gap:16px;align-items:end;border-bottom:1px solid var(--line);padding:20px}.bar-group{flex:1;display:flex;gap:3px;align-items:end;height:100%}.bar{flex:1;background:var(--blue);min-height:3px;border-radius:4px 4px 0 0}.bar.out{background:var(--amber)}#recentActivity .activity-item{margin-bottom:7px}.floating-dashboard{position:fixed;right:24px;bottom:24px;border:0;border-radius:99px;padding:14px 20px;background:var(--navy);color:#fff;font-weight:800;box-shadow:0 12px 30px #08264d55;z-index:40;cursor:pointer}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:#0c2b4a;color:#fff;border-radius:10px;padding:12px 18px;transition:.25s;z-index:80}.toast.show{opacity:1;transform:translate(-50%,0)}.error-text{color:var(--red);font-size:12px;font-weight:700}.success-text{color:var(--green);font-size:12px;font-weight:700}.trace-search{display:flex;gap:7px}.trace-search input{min-width:0;width:100%;border:1px solid var(--line);border-radius:8px;padding:10px}.trace-list{display:grid;gap:8px}.trace-event{border:1px solid var(--line);border-radius:9px;padding:9px;text-align:left;background:#fff;cursor:pointer}.trace-event:hover,.trace-event.active{border-color:var(--blue);background:#f2f8ff}.mobile-tabs{display:none}
@media(max-width:960px){.topbar nav{display:none}.hero{grid-template-columns:1fr;min-height:auto}.system-map{height:440px}.warehouse-canvas{height:650px}.demo-grid{grid-template-columns:1fr 1fr}.warehouse-panel{grid-column:1/-1;grid-row:1}.pda-panel,.admin-panel{grid-row:2}.activity-list{grid-template-columns:1fr 1fr}.kpi-grid{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:680px){body{font-size:15px}.topbar{height:64px;padding:0 14px}.delfi{font-size:18px}.header-actions .text-button{display:none}.section-shell{padding:58px 16px}.hero{padding-top:45px;gap:32px}.hero h1{font-size:44px}.hero-actions,.trust-row{flex-wrap:wrap}.system-map{height:480px}.admin-node{left:20px}.pda-node{right:18px}.warehouse-node{bottom:55px}.line-a{left:132px;width:150px}.line-b{right:130px;width:145px}.section-head,.mission-heading{align-items:start;flex-direction:column}.warehouse-canvas{height:760px}.zone{transform:scale(.82)}.receiving{left:0;top:29%}.aisle-a{left:25%;top:20%}.aisle-b{left:50%;top:20%}.putaway{left:17%;bottom:18%}.picking{right:1%;top:47%}.shipping{right:0;bottom:12%}.hotspot{max-width:155px;padding:8px}.hotspot small{display:none}.h1{left:2%;top:5%}.h2{left:auto;right:2%;top:5%}.h3{right:2%;top:33%}.h4{right:2%;top:63%}.h5{left:2%;bottom:7%}.h6{right:2%;bottom:2%}.timeline{overflow-x:auto}.timeline-node{min-width:90px}.mobile-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:#eaf3fb;padding:4px;border-radius:12px;margin:22px 0 10px}.mobile-tabs button{border:0;background:transparent;padding:10px;border-radius:9px;color:var(--muted);font-weight:750}.mobile-tabs button.active{background:#fff;color:var(--blue);box-shadow:0 3px 8px #274f761c}.demo-grid{display:block}.panel{display:none}.panel.active-mobile{display:block}.pda-shell{width:min(260px,92%)}.activity-list{grid-template-columns:1fr}.kpi-grid{grid-template-columns:1fr 1fr}.floating-dashboard{right:12px;bottom:12px}.demo-badge{display:none}}

/* Homepage hero based on the supplied visual reference */
.topbar{height:68px;background:#fff;border-bottom:0;box-shadow:0 5px 22px rgba(36,80,126,.05)}.topbar nav{gap:34px}.topbar nav a{font-size:12px;color:#203f61}
.hero.section-shell{max-width:1480px;min-height:590px;padding-top:34px;padding-bottom:38px;gap:22px;grid-template-columns:.78fr 1.22fr;background:linear-gradient(104deg,#fff 0%,#fbfdff 34%,#eef8ff 100%);border-radius:0 0 22px 22px;overflow:hidden}.hero-copy{padding-left:28px;position:relative;z-index:4}.hero-copy .eyebrow{display:none}.hero h1{font-size:clamp(42px,4.7vw,67px);max-width:610px}.hero .lead{font-size:16px;max-width:545px;line-height:1.55;margin-top:20px}.hero-actions{margin:25px 0 31px}.hero .button{border-radius:7px;padding:14px 19px}.hero .button.ghost{border-color:transparent;background:transparent;color:#173b61}.trust-row{font-size:12px;color:#547391;gap:30px}
.system-map{height:505px;border:0;border-radius:0;background-image:linear-gradient(90deg,rgba(242,249,255,.2),rgba(240,249,255,0)),url('xcloud-warehouse-reference.png');background-size:330% auto;background-position:42% 0%;box-shadow:none;overflow:visible}.system-map:before{background:linear-gradient(90deg,#eef8ff 0%,rgba(238,248,255,.2) 22%,rgba(255,255,255,0) 50%);z-index:1}.sys-node{padding:12px 15px 12px 48px;min-width:190px;border-color:#8cc9ff;border-radius:11px;text-align:left}.sys-node b{font-size:13px}.sys-node small{font-size:11px}.step-number{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:900}.admin-node{left:3%;top:62px}.pda-node{right:1%;top:88px}.warehouse-node{left:37%;bottom:35px;transform:none}.warehouse-node:hover{transform:translateY(-4px)}.cloud-node{left:48%;top:24%;z-index:3}.cloud-shape{width:112px;height:70px;font-size:13px}.flow-line{z-index:2}.line-a{left:29%;top:124px;width:145px;transform:rotate(-14deg)}.line-b{right:18%;top:152px;width:152px;transform:rotate(157deg)}.line-c{left:48%;top:178px;height:145px}.system-status{display:none}
@media(max-width:960px){.hero.section-shell{grid-template-columns:1fr;padding-top:55px}.hero-copy{padding-left:0}.system-map{height:500px;background-size:280% auto;background-position:43% 0}.warehouse-node{left:38%}}
@media(max-width:680px){.topbar{height:64px}.hero.section-shell{padding-top:42px;border-radius:0;gap:20px}.hero h1{font-size:43px}.hero .lead{font-size:15px}.hero-actions{margin-bottom:22px}.hero-actions .button{width:100%}.trust-row{gap:14px}.system-map{height:430px;margin-left:-16px;margin-right:-16px;background-size:350% auto;background-position:43% 0}.sys-node{min-width:148px;padding:9px 10px 9px 40px}.sys-node b{font-size:11px}.sys-node small{font-size:9px}.admin-node{left:2%;top:45px}.pda-node{right:1%;top:75px}.warehouse-node{left:28%;bottom:20px}.cloud-node{left:48%;top:31%}.cloud-shape{width:90px;height:58px}.line-a{left:32%;top:105px;width:95px}.line-b{right:24%;top:132px;width:105px}.line-c{left:48%;top:180px;height:110px}}

/* Official Delfi brand asset and rugged handheld mockup supplied by the user. */
.delfi-logo{display:block;width:146px;height:auto;object-fit:contain}
.brand{gap:14px}.brand-rule{height:34px;background:#b8c9dc}.xmark{font-size:11px;line-height:1.02}
.pda-panel{background:linear-gradient(180deg,#f4f9ff 0%,#eaf4fd 100%)}
.pda-shell{position:relative;width:min(306px,94%);aspect-ratio:660/1448;margin:10px auto 18px;padding:0;border-radius:0;background:transparent url('delfi-rugged-pda-v2.png') center/100% 100% no-repeat;box-shadow:none;overflow:hidden}
.pda-screen{position:absolute;left:8.64%;right:10.76%;top:11.53%;bottom:14.99%;width:auto;min-width:0;min-height:0;padding:13px 12px 10px;border-radius:0;background:#fff;overflow:auto;scrollbar-width:thin;box-shadow:inset 0 0 0 1px rgba(8,38,77,.08)}
.pda-speaker,.pda-home{display:none}
.pda-screen h4{font-size:15px;margin:0 0 3px}.pda-screen .taskcode{margin-bottom:10px}.pda-field{padding:8px 7px;margin:6px 0;font-size:11px}.pda-action{padding:10px 7px;margin-top:7px;font-size:11px}.pda-success{margin-top:12px;padding:15px 8px}.pda-success b{width:46px;height:46px;font-size:26px}.pda-success strong{font-size:17px}.barcode{height:48px;margin:9px 0}.qty-control{grid-template-columns:36px 1fr 36px;margin:9px 0}.qty-control button{height:36px}.trace-list{gap:5px}.trace-event{padding:7px;font-size:10px}
@media(max-width:680px){.delfi-logo{width:112px}.brand{gap:9px}.brand-rule{height:28px}.xmark{font-size:9px}.pda-shell{width:min(322px,96%);margin-top:8px}.pda-screen{padding:13px 12px 10px}}

/* The rugged frame is persistent; only this app viewport is re-rendered. */
.pda-shell{flex:none;isolation:isolate}
.pda-screen{padding:0;overflow:hidden}
.pda-screen *{max-width:100%;min-width:0}
.pda-appbar{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:linear-gradient(90deg,#0875ed,#0061d8);color:#fff;font-size:10px;font-weight:800;letter-spacing:-.01em}
.pda-appbar b{font-size:13px}.pda-appview{height:calc(100% - 34px);padding:12px 11px 10px;overflow-y:auto;scrollbar-width:thin;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}
.pda-appview::-webkit-scrollbar{width:4px}.pda-appview::-webkit-scrollbar-thumb{background:#a8bdd1;border-radius:6px}
.pda-appview h4{font-size:15px;margin:0 0 3px}.pda-appview .taskcode{margin-bottom:10px}
.pda-field{width:100%;overflow:hidden}.pda-field span,.pda-field b{min-width:0}.pda-field b{text-align:right;overflow-wrap:anywhere}.pda-action{display:block;max-width:100%}

/* Exact per-step crops: never zoom or reveal content from adjacent workflow panels. */
.warehouse-panel #warehouseContent{padding:14px}
.gr-workflow-image{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;object-position:center;border:1px solid #d5e6f4;border-radius:12px;background:#f8fbff}
.admin-panel.reference-mode .panel-title{display:none}.admin-panel.reference-mode #adminContent{padding:0;height:100%}
.gr-admin-reference{display:block;width:100%;height:auto;object-fit:contain;object-position:top center;border:0}
.gr-manager-reference{display:block;width:100%;height:auto;object-fit:contain;object-position:top center;border:0;background:#f7fbff}
.gr-webadmin-reference{display:block;width:100%;height:auto;object-fit:contain;object-position:center;border:0;background:#f4f7fa}
@media(min-width:961px){.demo-grid{grid-template-columns:1.08fr 1.27fr .85fr}}

/* Stronger page navigation and persistent component headers. */
.topbar{height:82px;border-bottom:1px solid #cbdced;box-shadow:0 8px 24px rgba(8,38,77,.08)}
.topbar nav{gap:4px;padding:5px;background:#f1f7fd;border:1px solid #d5e4f3;border-radius:13px;box-shadow:inset 0 1px 0 #fff}
.topbar nav a{padding:10px 17px;border-radius:9px;color:#294868;transition:background .2s,color .2s,box-shadow .2s}
.topbar nav a:hover{background:#e3effc;color:#075fd8}
.topbar nav a.active{background:#0868e8;color:#fff;box-shadow:0 5px 14px rgba(8,104,232,.24)}
.panel-title,.admin-panel.reference-mode .panel-title{display:flex;height:64px;padding:0 18px;background:linear-gradient(135deg,#eaf5ff 0%,#f7fbff 100%);border-bottom:2px solid #bdd9f4;position:relative}
.panel-title:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,#0870ec 0 36%,transparent 70%)}
.panel-title span:first-child{font-size:19px;font-weight:900;letter-spacing:-.02em}
.panel-title .panel-meta,.panel-title span:last-child{font-size:11px;font-weight:750;color:#537292;background:#fff;border:1px solid #d5e4f2;border-radius:999px;padding:6px 9px}
.panel-title .live-dot:before{vertical-align:1px}
.admin-panel.reference-mode #adminContent{padding:0}
@media(max-width:960px){.topbar{height:74px}.topbar nav{display:none}.panel-title,.admin-panel.reference-mode .panel-title{height:58px}}

/* Desktop hierarchy: Web Admin is primary; warehouse and PDA are supporting views. */
@media(min-width:961px){
  .demo-grid{grid-template-columns:minmax(0,1.85fr) minmax(0,.68fr) minmax(220px,.67fr);align-items:stretch}
  .admin-panel{min-width:0}
  .warehouse-panel{min-width:0}
  .warehouse-panel #warehouseContent{padding:10px}
  .warehouse-panel .panel-title{padding:0 10px}
  .warehouse-panel .panel-title span:first-child{font-size:15px}
  .warehouse-panel .panel-title span:last-child{padding:5px 7px;font-size:10px}
  .warehouse-panel .gr-workflow-image{max-height:430px}
  .pda-panel{min-width:220px}
  .pda-panel .panel-title{padding:0 10px}
  .pda-panel .panel-title span:first-child{font-size:17px}
  .pda-panel .panel-title .panel-meta{padding:5px 7px;font-size:9px}
  .pda-shell{width:min(238px,92%)}
}
@media(max-width:960px){.gr-workflow-image{max-height:none}.admin-panel.reference-mode #adminContent{padding:0}}

.system-map{background-image:linear-gradient(90deg,rgba(242,249,255,.08),rgba(240,249,255,0)),url('hero-home-reference.png');background-size:169% auto;background-position:right -18px}
.system-map .sys-node,.system-map .flow-line,.system-map .system-status{display:none}
@media(max-width:960px){.system-map{background-size:169% auto;background-position:right -18px}}
@media(max-width:680px){.system-map{background-size:185% auto;background-position:right -18px}}

/* Perspective warehouse map based on the supplied reference */
.warehouse-canvas{height:590px;background-image:linear-gradient(rgba(238,248,255,.05),rgba(230,244,255,.08)),url('warehouse-map-reference.png');background-size:125% auto;background-position:right center;background-repeat:no-repeat;border-color:#cfe2f3;box-shadow:0 22px 55px rgba(23,69,122,.13)}
.warehouse-canvas:before,.warehouse-canvas .zone,.warehouse-canvas .route{display:none}
.warehouse-canvas:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 18%,transparent 82%,rgba(255,255,255,.08));border-radius:inherit}
.warehouse-canvas .hotspot{z-index:4;min-width:220px;max-width:245px;grid-template-columns:38px auto;padding:13px 16px;border-width:2px;border-color:#92c6f5;background:rgba(255,255,255,.94);backdrop-filter:blur(7px);box-shadow:0 12px 30px rgba(10,52,96,.19)}
.warehouse-canvas .hotspot em{width:34px;height:34px;background:#0a6be8;box-shadow:0 0 0 6px rgba(10,107,232,.1)}
.warehouse-canvas .hotspot strong{font-size:15px;color:#09264c}.warehouse-canvas .hotspot small{font-size:12px;color:#557897}
.warehouse-canvas .hotspot:hover,.warehouse-canvas .hotspot.active{transform:translateY(-5px) scale(1.02);border-color:#0868e8;box-shadow:0 18px 38px rgba(8,104,232,.25)}
.warehouse-canvas .h1{left:12%;top:7%}.warehouse-canvas .h2{left:57%;top:18%}.warehouse-canvas .h3{right:1.5%;top:18%}.warehouse-canvas .h4{right:1.5%;top:56%}.warehouse-canvas .h5{left:20%;bottom:7%}.warehouse-canvas .h6{left:43%;right:auto;bottom:0}
.warehouse-canvas .h1 em{background:#0bab78}.warehouse-canvas .h1{border-color:#70d3b0}.warehouse-canvas .h2 em{background:#f59e0b}.warehouse-canvas .h2{border-color:#f5c66b}.warehouse-canvas .h4 em{background:#ef476f}.warehouse-canvas .h4{border-color:#f59aae}.warehouse-canvas .h5 em{background:#8358e8}.warehouse-canvas .h5{border-color:#b9a3f2}.warehouse-canvas .h6 em{background:#13a9bd}.warehouse-canvas .h6{border-color:#85d8e2}
@media(max-width:960px){.warehouse-canvas{height:610px;background-size:auto 100%;background-position:center}.warehouse-canvas .hotspot{min-width:180px;max-width:200px}.warehouse-canvas .h1{left:2%;top:5%}.warehouse-canvas .h2{left:38%;top:7%}.warehouse-canvas .h3{right:2%;top:22%}.warehouse-canvas .h4{right:2%;top:58%}.warehouse-canvas .h5{left:4%;bottom:7%}.warehouse-canvas .h6{left:42%;bottom:1%}}
@media(max-width:680px){.warehouse-canvas{height:690px;background-size:auto 100%;background-position:53% center}.warehouse-canvas .hotspot{min-width:145px;max-width:168px;padding:9px 10px;grid-template-columns:31px auto}.warehouse-canvas .hotspot em{width:29px;height:29px}.warehouse-canvas .hotspot strong{font-size:13px}.warehouse-canvas .hotspot small{display:block;font-size:10px}.warehouse-canvas .h1{left:2%;top:3%}.warehouse-canvas .h2{right:2%;left:auto;top:10%}.warehouse-canvas .h3{right:2%;top:32%}.warehouse-canvas .h4{right:2%;top:60%}.warehouse-canvas .h5{left:2%;bottom:8%}.warehouse-canvas .h6{left:35%;bottom:0}}

/* The artwork already contains the six labels; these transparent hit areas preserve interaction without duplicating them. */
.warehouse-canvas .hotspot{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;color:transparent}
.warehouse-canvas .hotspot strong,.warehouse-canvas .hotspot small{color:transparent}.warehouse-canvas .hotspot em{color:transparent;background:transparent;box-shadow:none}
.warehouse-canvas .hotspot:hover,.warehouse-canvas .hotspot.active{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.92);box-shadow:0 0 0 4px rgba(8,104,232,.2),0 16px 35px rgba(7,47,88,.18)}

/* Updated hero illustration supplied by the user */
.system-map{height:auto;aspect-ratio:1672/941;background-image:url('hero-xcloud-flow.png');background-size:cover;background-position:center;border-radius:18px;overflow:hidden;box-shadow:0 16px 42px rgba(23,69,122,.13)}
.system-map:before{display:none}
@media(max-width:960px){.system-map{height:auto;aspect-ratio:1672/941;background-size:cover;background-position:center}}
@media(max-width:680px){.system-map{height:auto;aspect-ratio:1672/941;margin-left:0;margin-right:0;background-size:cover;background-position:center;border-radius:14px}}

/* Updated interactive map: exact click regions follow the six operations in the new artwork. */
.warehouse-canvas{height:auto;aspect-ratio:1672/941;background-image:url('warehouse-overview-pm.png');background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.warehouse-canvas .hotspot{min-width:0;max-width:none;padding:0;border-radius:18px}
.warehouse-canvas .h1{left:7.4%;top:7.9%;width:27.8%;height:11.5%}
.warehouse-canvas .h2{left:49.9%;top:9.5%;width:24.5%;height:11.5%}
.warehouse-canvas .h3{left:77%;right:auto;top:15.5%;width:21.7%;height:11%}
.warehouse-canvas .h4{left:79.4%;right:auto;top:53.7%;width:20.6%;height:11%}
.warehouse-canvas .h5{left:12.5%;top:49.8%;bottom:auto;width:25.2%;height:11%}
.warehouse-canvas .h6{left:41.5%;top:73.9%;bottom:auto;width:28.5%;height:11.5%}
@media(max-width:960px){.warehouse-canvas{height:auto;aspect-ratio:1672/941;background-size:100% 100%;background-position:center}.warehouse-canvas .hotspot{min-width:0;max-width:none}}
@media(max-width:680px){.warehouse-canvas{height:auto;aspect-ratio:1672/941;background-size:100% 100%;background-position:center}.warehouse-canvas .h1{left:7.4%;top:7.9%}.warehouse-canvas .h2{left:49.9%;right:auto;top:9.5%}.warehouse-canvas .h3{left:77%;right:auto;top:15.5%}.warehouse-canvas .h4{left:79.4%;right:auto;top:53.7%}.warehouse-canvas .h5{left:12.5%;top:49.8%;bottom:auto}.warehouse-canvas .h6{left:41.5%;top:73.9%;bottom:auto}}

/* Live demo visual language derived from the supplied six-step GR screens */
.experience{max-width:1480px}.mission-heading h2{font-size:clamp(27px,2.7vw,40px);color:#071b57}.timeline{grid-template-columns:repeat(6,1fr);margin:30px 0 26px}.timeline-node{min-width:0;color:#7186a5;font-size:13px}.timeline-node:before{display:none}.timeline-node:after{top:17px;height:3px;left:-50%;right:50%;background:#bfd0e4}.timeline-index{position:relative;z-index:2;display:grid;width:36px;height:36px;place-items:center;margin:0 auto 8px;border-radius:50%;background:#b7c7da;color:#fff;font-size:16px;font-weight:850;box-shadow:0 0 0 5px #fff}.timeline-label{display:block;font-size:15px;font-weight:800;color:#516986}.timeline-node.done .timeline-index{background:#0caf72}.timeline-node.done .timeline-label{color:#079861}.timeline-node.current .timeline-index{background:#0870ec;box-shadow:0 0 0 5px #d9ebff}.timeline-node.current .timeline-label{color:#0868e8}.timeline-node small{font-size:11px}.demo-grid{grid-template-columns:.95fr 1.45fr .82fr}.panel{border-color:#cfe1f3;border-radius:15px;box-shadow:0 10px 34px rgba(26,75,126,.08)}.panel-title{height:58px;background:linear-gradient(90deg,#f4f9ff,#eaf5ff);font-size:17px;color:#082664}.panel-title:before{content:"▣";color:#0870ec;margin-right:8px}.panel-title span:first-child{margin-right:auto}.admin-panel .panel-title:before{content:"▰"}.pda-panel .panel-title:before{content:"▯"}.data-row{padding:9px 0}.data-row span{font-size:13px;color:#58749a}.data-row b{font-size:14px;color:#071b57}.status-value{color:#08a06d!important}.progress-card{background:#f0f7ff;border-color:#d3e6f8}.warehouse-panel #warehouseContent{padding:0 14px 14px}.warehouse-visual.gr-workflow{height:330px;margin-top:14px;border-radius:12px;background-size:240% auto;background-position:50% 49%;background-repeat:no-repeat;border:1px solid #cfe1f3}.gr-step-1{background-image:url('gr-step-1.png')}.gr-step-2{background-image:url('gr-step-2.png')}.gr-step-3{background-image:url('gr-step-3.png')}.gr-step-4{background-image:url('gr-step-4.png')}.gr-step-5{background-image:url('gr-step-5.png')}.gr-step-6{background-image:url('gr-step-6.png')}.gr-callout{display:flex;gap:12px;align-items:center;margin:10px 0 0;padding:12px 14px;border:1px solid #d4e7fa;border-radius:11px;background:#edf7ff;color:#315d91}.gr-callout b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#0870ec;color:#fff;font-size:17px;flex:0 0 auto}.pda-success{display:grid;place-items:center;gap:4px;margin-top:18px;padding:20px 10px;border-radius:12px;background:#e8fbf3;color:#078553}.pda-success b{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#09ac70;color:#fff;font-size:30px}.pda-success strong{font-size:20px}.pda-success span{font-size:12px}.pda-action{padding:12px}.activity-panel{border-color:#cfe1f3}
@media(max-width:960px){.timeline{overflow-x:auto;grid-template-columns:repeat(6,minmax(120px,1fr));padding-bottom:8px}.demo-grid{grid-template-columns:1fr 1fr}.warehouse-visual.gr-workflow{height:370px;background-size:220% auto}}
@media(max-width:680px){.mission-heading h2{font-size:27px}.timeline{grid-template-columns:repeat(6,110px)}.timeline-index{width:32px;height:32px}.timeline-node:after{top:15px}.timeline-label{font-size:13px}.warehouse-visual.gr-workflow{height:300px;background-size:250% auto}.panel-title{font-size:15px}}

/* Final desktop allocation override. */
@media(min-width:961px){
  .demo-grid{grid-template-columns:minmax(0,1.23fr) minmax(0,1.30fr) minmax(220px,.67fr)}
  .panel-title,.admin-panel.reference-mode .panel-title{display:flex;height:64px;padding:0 14px}
  .admin-panel{min-width:0}
  .warehouse-panel{min-width:0}
  .warehouse-panel #warehouseContent{padding:10px}
  .warehouse-panel .panel-title{padding:0 9px}
  .warehouse-panel .panel-title span:first-child{font-size:14px}
  .warehouse-panel .panel-title span:last-child{padding:4px 6px;font-size:9px}
  .warehouse-panel .gr-workflow-image{max-height:420px}
  .pda-panel{min-width:220px}
  .pda-panel .panel-title{padding:0 9px}
  .pda-panel .panel-title span:first-child{font-size:16px}
  .pda-panel .panel-title .panel-meta{padding:4px 6px;font-size:9px}
  .pda-shell{width:min(224px,90%)}
}

/* Clickable receiving steps and full-screen Web Admin preview. */
.timeline button.timeline-node{border:0;background:transparent;padding:0;cursor:pointer;font:inherit}
.timeline button.timeline-node:hover .timeline-index,.timeline button.timeline-node:focus-visible .timeline-index{transform:translateY(-2px);box-shadow:0 0 0 6px #d9ebff,0 7px 16px rgba(8,104,232,.22)}
.timeline button.timeline-node:focus-visible{outline:0}.timeline-index{transition:transform .2s,box-shadow .2s}
.admin-panel[role="button"]{cursor:zoom-in}.admin-panel[role="button"]:focus-visible{outline:3px solid #1681f5;outline-offset:3px}
.modal-open{overflow:hidden}.admin-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:2vh 2vw;background:rgba(4,20,43,.82);backdrop-filter:blur(8px)}
.admin-modal.show{display:flex}.admin-modal-dialog{width:min(1500px,96vw);height:96vh;display:flex;flex-direction:column;overflow:hidden;background:#f7fbff;border:1px solid #bcd8f3;border-radius:20px;box-shadow:0 28px 80px rgba(0,16,42,.48)}
.admin-modal-header{min-height:72px;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(135deg,#e8f4ff,#fff);border-bottom:2px solid #1681f5}
.admin-modal-header span{font-size:10px;letter-spacing:.16em;font-weight:900;color:#0870ec}.admin-modal-header h2{margin:3px 0 0;color:#08264d;font-size:22px}
.admin-modal-header button{width:42px;height:42px;border:1px solid #bdd8f2;border-radius:50%;background:#fff;color:#173e66;font-size:28px;cursor:pointer}
.admin-modal-body{flex:1;min-height:0;overflow:auto;display:grid;place-items:center;padding:18px}
.admin-modal-body>.panel-title{display:none!important}.admin-modal-body>#adminContent{width:min(1180px,100%);padding:24px;background:#fff;border:1px solid #d5e5f4;border-radius:14px;box-shadow:0 14px 34px rgba(20,64,110,.1)}
.admin-modal-body .gr-webadmin-reference{width:100%;height:calc(96vh - 110px);object-fit:contain;background:transparent}
.admin-modal-body .data-list{font-size:16px}.admin-modal-body .data-row{padding:14px}.admin-modal-body .data-row span,.admin-modal-body .data-row b{font-size:16px}
@media(max-width:680px){.admin-modal{padding:0}.admin-modal-dialog{width:100vw;height:100vh;border-radius:0}.admin-modal-header{min-height:64px}.admin-modal-header h2{font-size:17px}.admin-modal-body{padding:8px}.admin-modal-body>#adminContent{padding:12px}.admin-modal-body .gr-webadmin-reference{height:calc(100vh - 88px)}}

/* Unified live-demo workflows */
.workflow-admin{display:grid;gap:14px}.workflow-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid #c9e1f7;border-radius:12px;background:linear-gradient(135deg,#eaf6ff,#f9fcff)}.workflow-banner div{display:grid;gap:4px}.workflow-banner small{color:#0870ec;font-size:10px;font-weight:900;letter-spacing:.12em}.workflow-banner strong{color:#08264d;font-size:15px;line-height:1.35}.workflow-banner>span{flex:0 0 auto;padding:7px 10px;border-radius:99px;background:#fff;color:#0870ec;border:1px solid #bcd9f6;font-size:11px;font-weight:850}.workflow-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(180px,.65fr);gap:12px}.workflow-card,.workflow-history{border:1px solid #d9e7f4;border-radius:12px;background:#fff;padding:13px}.workflow-card h4,.workflow-history h4{margin:0 0 12px;color:#08264d;font-size:14px}.workflow-card .data-row{padding:6px 0}.workflow-card .data-row:last-child{border-bottom:0}.workflow-card .data-row span{font-size:11px}.workflow-card .data-row b{font-size:12px;max-width:62%}.history-event{position:relative;display:flex;gap:9px;padding:0 0 13px}.history-event:after{content:"";position:absolute;left:5px;top:12px;bottom:0;width:2px;background:#d7e6f4}.history-event:last-child:after{display:none}.history-event i{position:relative;z-index:2;width:12px;height:12px;border:3px solid #fff;border-radius:50%;background:#8eacd0;box-shadow:0 0 0 2px #c7d9eb;flex:0 0 auto}.history-event.current i{background:#0870ec;box-shadow:0 0 0 3px #d8eaff}.history-event div{display:grid;gap:2px}.history-event b{color:#183e66;font-size:11px}.history-event span{color:#7186a5;font-size:10px;line-height:1.35}.workflow-note{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:12px 14px;border-radius:11px;background:#eef7ff;border:1px solid #d5e8fa}.workflow-note b{color:#0870ec;font-size:12px}.workflow-note span{color:#456887;font-size:12px;line-height:1.45}.workflow-admin .progress-card{margin-top:0}.workflow-admin .result-strip{margin-top:0}.result-strip .positive b{color:#0baa72}.warehouse-stage-card{display:grid;gap:12px}.warehouse-step-copy{padding:12px 14px;border:1px solid #d8e7f5;border-radius:12px;background:#f6fbff}.warehouse-step-copy small{font-size:10px;letter-spacing:.12em;color:#0870ec;font-weight:900}.warehouse-step-copy h4{margin:4px 0;color:#08264d}.warehouse-step-copy p{margin:0;color:#55728f;font-size:12px;line-height:1.5}.report-job{min-height:355px;display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-content:center;align-items:center;padding:28px;border-radius:16px;background:linear-gradient(145deg,#e8f5ff,#fff);border:1px solid #cfe1f3}.job-icon{display:grid;place-items:center;width:64px;height:74px;border-radius:12px;background:#0baa72;color:#fff;font-weight:900;box-shadow:0 12px 25px rgba(11,170,114,.2)}.report-job small{font-size:10px;letter-spacing:.12em;color:#0870ec;font-weight:900}.report-job h4{margin:6px 0;color:#08264d;font-size:15px;overflow-wrap:anywhere}.report-job p{margin:0;color:#587594;font-size:12px;line-height:1.5}.report-job>strong{font-size:22px;color:#0870ec}.job-progress{grid-column:1/-1;height:10px;overflow:hidden;border-radius:99px;background:#dceaf6}.job-progress i,.mini-job-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0870ec,#18a8ff);transition:width .35s}.mini-job-track{height:8px;overflow:hidden;border-radius:99px;background:#dce8f2;margin:10px 0}.device-note{margin:12px 0;padding:10px;border-radius:10px;background:#eef7ff;color:#476b8e;font-size:11px;line-height:1.45;border:1px solid #d7e9fa}.admin-modal-body .workflow-admin{width:100%}.admin-modal-body .workflow-banner strong{font-size:19px}.admin-modal-body .workflow-card .data-row span,.admin-modal-body .workflow-card .data-row b{font-size:14px}.admin-modal-body .workflow-history b{font-size:13px}.admin-modal-body .workflow-history span{font-size:12px}.admin-modal-body .workflow-note b,.admin-modal-body .workflow-note span{font-size:14px}
@media(max-width:900px){.workflow-layout{grid-template-columns:1fr}.workflow-history{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.workflow-history h4{grid-column:1/-1}.history-event:after{display:none}.report-job{grid-template-columns:54px 1fr auto;padding:18px}.job-icon{width:54px;height:64px}}
@media(max-width:680px){.workflow-banner{align-items:flex-start}.workflow-banner>span{font-size:10px}.workflow-layout{grid-template-columns:1fr}.workflow-history{grid-template-columns:1fr}.workflow-note{grid-template-columns:1fr;gap:4px}.report-job{grid-template-columns:1fr;min-height:320px;text-align:center}.job-icon{margin:auto}.report-job>strong{font-size:26px}.timeline{grid-template-columns:repeat(6,110px)}}

/* Six-step putaway storyboard: reuse the supplied pixels and crop each role cleanly. */
.putaway-crop{position:relative;width:100%;overflow:hidden;background:#f3f9ff;border-radius:11px;isolation:isolate}
.putaway-crop img{position:absolute;display:block;height:auto;max-width:none;user-select:none;pointer-events:none}
.putaway-admin-crop{aspect-ratio:560/590}
.putaway-admin-crop img{width:300%;left:-2.68%;top:-35.6%}
.putaway-warehouse-crop{aspect-ratio:600/587}
.putaway-warehouse-crop img{width:280%;left:-98.33%;top:-36.3%}
.putaway-pda-crop{aspect-ratio:450/590;border-radius:0;background:transparent}
.putaway-pda-crop img{width:373.333%;left:-267.78%;top:-35.6%}
.admin-panel.putaway-reference .panel-title{display:flex}
.admin-panel.putaway-reference #adminContent{height:auto;padding:0}
.warehouse-panel.putaway-reference #warehouseContent{padding:0}
.admin-modal-body .putaway-admin-crop{width:min(720px,100%);margin:auto}
.admin-modal-body .putaway-admin-crop img{max-width:none}
@media(max-width:960px){.putaway-admin-crop,.putaway-warehouse-crop{max-width:720px;margin:auto}}

/* Interactive putaway UI uses the same Delfi device frame and dimensions as every workflow. */
.putaway-pda-ui{display:grid;gap:7px}
.putaway-step{color:#6d86a1;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;text-align:right}
.putaway-state{display:flex;align-items:center;gap:7px;padding:8px;border-radius:9px;border:1px solid #ccebdd;background:#ecfbf4;color:#08784e}
.putaway-state.info{border-color:#cfe2fa;background:#eef6ff;color:#0868e8}
.putaway-state>b{display:grid;place-items:center;width:23px;height:23px;flex:0 0 auto;border-radius:50%;background:#0bad70;color:#fff;font-size:13px}
.putaway-state.info>b{background:#0870ec}
.putaway-state span{display:grid;gap:1px}.putaway-state strong{font-size:10px;line-height:1.2}.putaway-state small{font-size:8px;line-height:1.3;color:#57718d}
.putaway-pda-ui .pda-field{margin:0;padding:7px 6px;align-items:center;gap:6px}.putaway-pda-ui .pda-field span{font-size:9px}.putaway-pda-ui .pda-field b{font-size:9px;text-align:right;overflow-wrap:anywhere}
.putaway-product{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;gap:3px 6px;align-items:center;padding:6px;border:1px solid #d8e7f5;border-radius:9px;background:#fff}
.putaway-product>span{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:#edf6ff;color:#0870ec;font-size:16px}.putaway-product .barcode{height:24px;margin:0;border:0}.putaway-product>b{font-size:9px;text-align:right}
.putaway-complete{display:grid;place-items:center;gap:3px;padding:11px 7px;border-radius:10px;background:linear-gradient(145deg,#e2fbed,#f5fff9);border:1px solid #c5eed8;text-align:center;color:#087c4f}
.putaway-complete>b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#0bad70;color:#fff;font-size:20px}.putaway-complete strong{font-size:11px;line-height:1.25}.putaway-complete small{font-size:8px;line-height:1.35;color:#4c7c67}
.putaway-pda-ui .pda-action{margin-top:2px;padding:9px 5px;font-size:9px}.putaway-pda-ui .pda-action.complete{background:#0bad70}
.putaway-final-note{padding:7px;border-radius:8px;background:#eef6ff;color:#55728f;font-size:8px;text-align:center}
.floating-dashboard{right:auto;left:24px}
@media(max-width:680px){.floating-dashboard{right:auto;left:12px}}

/* Consultation, solution design and on-site warehouse survey registration. */
.connect-section{padding-top:84px;padding-bottom:96px}.connect-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:28px}.connect-heading h2{margin:6px 0 0;font-size:clamp(32px,4vw,54px);color:#08264d}.connect-heading>p{max-width:470px;margin:0;color:#6c829c;line-height:1.7}.lead-card{display:grid;grid-template-columns:minmax(320px,.82fr) minmax(0,1.55fr);overflow:hidden;border:1px solid #cfe0f1;border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(15,59,105,.12)}.lead-intro{padding:48px 42px;background:linear-gradient(145deg,#0b3c88,#0768dc);color:#fff}.lead-kicker{margin:0 0 24px;color:#a9d0ff;font-size:11px;font-weight:900;letter-spacing:.16em}.lead-intro h3{margin:0 0 22px;font-size:clamp(28px,3vw,42px);line-height:1.12}.lead-intro>p:not(.lead-kicker){margin:0;color:#d5e8ff;line-height:1.75}.lead-benefits{display:grid;gap:20px;margin:34px 0;padding:28px 0;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}.lead-benefits>div{display:flex;gap:14px;align-items:flex-start}.lead-benefits>div>b{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:50%;background:#fff;color:#0768dc;font-size:11px}.lead-benefits span{display:grid;gap:4px}.lead-benefits strong{font-size:14px}.lead-benefits small{color:#c4dcf8;line-height:1.45}.lead-contact{display:grid;gap:10px}.lead-contact a{color:#fff;font-weight:750;text-decoration:none}.consult-form{display:grid;gap:24px;padding:42px}.form-title{display:flex;justify-content:space-between;gap:20px;align-items:end}.form-title span{color:#0870ec;font-size:10px;font-weight:900;letter-spacing:.14em}.form-title h3{margin:5px 0 0;color:#08264d;font-size:24px}.form-title small{color:#7b91a9}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.consult-form label{display:grid;gap:8px;color:#526f90;font-size:12px;font-weight:750}.consult-form input,.consult-form select,.consult-form textarea{width:100%;box-sizing:border-box;border:1px solid #cbdced;border-radius:10px;background:#fbfdff;color:#102e51;font:inherit;font-size:14px;padding:13px 14px;outline:0;transition:border-color .2s,box-shadow .2s}.consult-form input:focus,.consult-form select:focus,.consult-form textarea:focus{border-color:#0870ec;box-shadow:0 0 0 4px rgba(8,112,236,.1)}.consult-form textarea{resize:vertical;min-height:108px}.support-choice{margin:0;padding:0;border:0}.support-choice legend{margin-bottom:10px;color:#526f90;font-size:12px;font-weight:750}.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.choice-grid label{position:relative;display:block;cursor:pointer}.choice-grid input{position:absolute;opacity:0;pointer-events:none}.choice-grid span{display:grid;gap:5px;height:100%;box-sizing:border-box;padding:14px;border:1px solid #d2e2f1;border-radius:12px;background:#f8fbff;transition:.2s}.choice-grid b{color:#173e66;font-size:13px}.choice-grid small{color:#758ba3;font-weight:500;line-height:1.4}.choice-grid input:checked+span{border-color:#0870ec;background:#edf6ff;box-shadow:0 0 0 3px rgba(8,112,236,.1)}.choice-grid input:focus-visible+span{outline:2px solid #0870ec;outline-offset:2px}.consent{grid-template-columns:auto 1fr!important;align-items:start;padding:14px;border-radius:10px;background:#f1f6fb}.consent input{width:17px;height:17px;margin:1px 0 0;padding:0}.consent span{font-weight:500;line-height:1.45}.form-submit{display:flex;justify-content:space-between;gap:24px;align-items:center}.form-submit p{max-width:500px;margin:0;color:#7a90a7;font-size:11px;line-height:1.5}.form-submit .button{border:0;white-space:nowrap;cursor:pointer}.consult-result{display:none;gap:4px;padding:14px 16px;border:1px solid #bfe8d5;border-radius:10px;background:#ebfaf3;color:#08784e}.consult-result.show{display:grid}.consult-result strong{font-size:14px}.consult-result span{font-size:12px}
@media(max-width:960px){.connect-heading{align-items:start}.lead-card{grid-template-columns:1fr}.lead-intro{padding:38px}.lead-benefits{grid-template-columns:repeat(3,1fr)}.lead-benefits>div{display:grid}.consult-form{padding:36px}}
@media(max-width:680px){.connect-section{padding-top:62px;padding-bottom:74px}.connect-heading{display:grid;gap:14px}.connect-heading h2{font-size:34px}.lead-card{border-radius:16px}.lead-intro,.consult-form{padding:26px 20px}.lead-benefits{grid-template-columns:1fr}.form-title{display:grid;gap:8px}.form-grid,.choice-grid{grid-template-columns:1fr}.form-submit{align-items:stretch;flex-direction:column}.form-submit .button{width:100%}}

/* Six-step shipping storyboard: clean crops contain only the role-specific frame. */
.gi-crop{position:relative;width:100%;overflow:hidden;background:#f4f9ff;border-radius:11px;isolation:isolate}.gi-crop img{position:absolute;display:block;height:auto;max-width:none;user-select:none;pointer-events:none}.gi-admin-crop{aspect-ratio:570/566}.gi-admin-crop img{width:293.33%;left:-11.4%;top:-62.7%}.gi-warehouse-crop{aspect-ratio:611/566}.gi-warehouse-crop img{width:273.65%;left:-106.55%;top:-62.7%}.admin-panel.gi-reference #adminContent,.warehouse-panel.gi-reference #warehouseContent{padding:0;height:auto}.admin-modal-body .gi-admin-crop{width:min(760px,100%);margin:auto}.admin-modal-body .gi-admin-crop img{max-width:none}.gi-reference .panel-title{display:flex}.success-text{color:#0baa72!important}
@media(max-width:960px){.gi-admin-crop,.gi-warehouse-crop{max-width:760px;margin:auto}}

/* Executive management view based on the supplied XCloud dashboard. */
.dashboard-intro{max-width:720px!important;margin:10px 0 0!important;color:#607b98!important}.executive-dashboard-card{position:relative;display:block;width:100%;padding:0;overflow:hidden;border:1px solid #bfd6eb;border-radius:18px;background:#eaf4ff;box-shadow:0 20px 54px rgba(11,49,91,.14);cursor:zoom-in}.executive-dashboard-card img{display:block;width:100%;height:auto}.executive-dashboard-card>span{position:absolute;right:18px;bottom:18px;padding:10px 15px;border-radius:10px;background:rgba(4,38,78,.9);color:#fff;font-size:13px;font-weight:800;box-shadow:0 8px 24px rgba(3,27,58,.28)}.executive-dashboard-card:hover,.executive-dashboard-card:focus-visible{outline:3px solid #1681f5;outline-offset:4px}.dashboard-live-label{display:flex;align-items:center;gap:8px;margin:20px 0 12px;color:#55728f;font-size:13px;font-weight:750}.dashboard-live-label span{width:9px;height:9px;border-radius:50%;background:#0baa72;box-shadow:0 0 0 5px rgba(11,170,114,.12)}.executive-dashboard-full{display:block;width:100%;max-height:calc(96vh - 108px);object-fit:contain;border-radius:12px}.admin-modal.manager-view .admin-modal-dialog{width:min(1760px,98vw)}.admin-modal.manager-view .admin-modal-body{padding:10px;background:#dceafd}.lead-contact a{font-size:16px}.consult-form .form-grid:first-of-type{grid-template-columns:repeat(2,minmax(0,1fr))}.consult-form .form-grid:first-of-type label:last-child{grid-column:1/-1}
@media(max-width:680px){.executive-dashboard-card{border-radius:12px;overflow-x:auto}.executive-dashboard-card img{width:980px;max-width:none}.executive-dashboard-card>span{position:sticky;display:inline-block;left:14px;bottom:14px}.dashboard .kpi-grid{grid-template-columns:1fr 1fr}.dashboard-intro{font-size:14px}.admin-modal.manager-view .admin-modal-body{overflow:auto;display:block}.executive-dashboard-full{width:1200px;max-width:none;max-height:none}}

/* Six-step warehouse transfer: role-specific crops with a corrected completion scene. */
.transfer-crop{position:relative;width:100%;overflow:hidden;background:#f4f9ff;border-radius:11px;isolation:isolate}.transfer-crop img{position:absolute;display:block;height:auto;max-width:none;user-select:none;pointer-events:none}.transfer-admin-crop{aspect-ratio:570/566}.transfer-admin-crop img{width:293.33%;left:-11.4%;top:-62.7%}.transfer-warehouse-crop{aspect-ratio:611/566}.transfer-warehouse-crop img{width:273.65%;left:-106.55%;top:-62.7%}.admin-panel.transfer-reference #adminContent,.warehouse-panel.transfer-reference #warehouseContent{padding:0;height:auto}.transfer-reference .panel-title{display:flex}.admin-panel.transfer-reference .transfer-complete-admin{padding:14px}.admin-modal-body .transfer-admin-crop{width:min(760px,100%);margin:auto}.admin-modal-body .transfer-admin-crop img{max-width:none}.admin-modal-body .transfer-complete-admin{width:min(1180px,100%);padding:24px}.workflow-banner.complete{border-color:#bde9d4;background:linear-gradient(135deg,#e6faf1,#f8fffb)}.workflow-banner.complete small,.workflow-banner.complete span{color:#078553}.workflow-banner.complete span{border-color:#b9e8d1}.workflow-note.success{background:#eafaf3;border-color:#c2ead8}.workflow-note.success b{color:#078553}.transfer-complete-scene{position:relative;overflow:hidden;border-radius:12px;background:#e9f5ff}.transfer-complete-scene>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.transfer-complete-caption{position:absolute;left:18px;right:18px;bottom:18px;display:grid;gap:3px;padding:13px 16px;border:1px solid rgba(160,225,195,.9);border-radius:12px;background:rgba(244,255,250,.92);box-shadow:0 12px 30px rgba(4,49,34,.18);backdrop-filter:blur(8px)}.transfer-complete-caption b{color:#078553;font-size:16px}.transfer-complete-caption span{color:#315f52;font-size:12px}.transfer-mini-progress{height:8px;margin:11px 0;overflow:hidden;border-radius:99px;background:#dce8f2}.transfer-mini-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0870ec,#18a8ff)}
@media(max-width:960px){.transfer-admin-crop,.transfer-warehouse-crop{max-width:760px;margin:auto}}
@media(max-width:680px){.transfer-complete-caption{left:9px;right:9px;bottom:9px;padding:9px 11px}.transfer-complete-caption b{font-size:13px}.transfer-complete-caption span{font-size:10px}.admin-panel.transfer-reference .transfer-complete-admin{padding:10px}}