.dashboard-device-scene{position:relative;height:520px;margin-top:22px;isolation:isolate;background:radial-gradient(ellipse at 50% 50%,#edf8ff0a,transparent 70%)}
.device-display{background:#111;border:9px solid #111;border-radius:14px 14px 0 0;box-shadow:0 8px 22px #0003;overflow:hidden}
.device-display img{width:100%;height:100%;object-fit:fill}
.vendi-desktop{position:absolute;left:22%;top:16%;width:63%;height:56%;z-index:1}
.vendi-desktop .device-display{height:100%}.desktop-chin{height:32px;background:linear-gradient(100deg,#999,#e0e1e2,#999);border-radius:0 0 10px 10px}
.desktop-foot{width:30%;height:70px;background:linear-gradient(90deg,#999,#eee,#aaa);clip-path:polygon(30% 0,70% 0,75% 85%,100% 95%,100% 100%,0 100%,0 95%,25% 85%);margin:auto}
.vendi-laptop{position:absolute;left:11%;top:55%;width:40%;height:32%;z-index:3}
.vendi-laptop .device-display{height:100%;border-width:6px;border-radius:10px 10px 0 0}
.laptop-base{height:12px;background:linear-gradient(#d5d8db,#90979d);border-radius:0 0 50% 50%;margin:0 -8%;box-shadow:0 7px 10px #0003}
.vendi-mobile{position:absolute;right:9%;top:58%;width:11%;height:32%;border:4px solid #aaa;outline:3px solid #111;border-radius:17px;overflow:hidden;background:#fff;z-index:3}
.vendi-mobile:after{content:'';position:absolute;top:0;left:24%;width:52%;height:8px;background:#111;border-radius:0 0 8px 8px}
.vendi-mobile img{height:100%;width:100%;object-fit:cover;object-position:left}
.device-callout{position:absolute;z-index:4;background:#fff;border:1px solid #dce7ee;border-radius:12px;padding:13px;color:#334f60;box-shadow:0 5px 15px #00000010;width:25%}
.dashboard-panel .device-callout h3{font-size:14px;color:#334f60;line-height:1.3;margin-bottom:8px;font-weight:500}
.device-callout svg{display:block;width:100%;max-height:90px;overflow:hidden;border-radius:5px}
.dashboard-panel .device-callout p{font-size:10px;color:#8194a1;line-height:1.4;margin-top:7px}
.callout-samples{left:0;top:0}.callout-response{right:0;top:8%}.callout-audience{left:1%;bottom:0;width:31%}.callout-location{right:0;bottom:0;width:24%}.callout-location svg{height:100px}
@media(max-width:1199px){.dashboard-device-scene{height:440px}.dashboard-panel .device-callout h3{font-size:12px}.device-callout{padding:10px}}
@media(max-width:650px){.dashboard-device-scene{height:410px;margin-top:28px}.device-callout{width:34%;padding:8px}.callout-audience{width:43%}.callout-location{width:31%}.dashboard-panel .device-callout h3{font-size:10px}.dashboard-panel .device-callout p{font-size:8px}.device-callout svg{max-height:65px}.vendi-desktop{left:15%;top:27%;width:76%;height:37%}.vendi-laptop{left:8%;top:58%;width:48%;height:24%}.vendi-mobile{right:8%;top:58%;height:24%;width:13%}.callout-response{top:10%}.callout-samples{top:1%}.callout-location svg{height:70px}}
/* The actual dashboard stays interactive in its new pale-blue panel position. */
.connected-data-system .insights{align-items:start}
.relocated-dashboard{background:#06131c;color:#fff;margin-top:26px;padding:12px;border:1px solid #294358;border-radius:12px}
.relocated-dashboard .dash-nav{flex-wrap:wrap;gap:10px}
.relocated-dashboard .dash-nav>strong{font-size:12px}
.relocated-dashboard .dash-nav [role=tablist]{order:3;flex:1 0 100%;display:flex;justify-content:space-between;gap:2px}
.relocated-dashboard .dash-nav button{font-size:9px;padding:7px 4px}
.relocated-dashboard .dash-nav select{font-size:9px;padding:6px;margin-left:auto;max-width:100px}
.relocated-dashboard .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.relocated-dashboard .kpis article{padding:12px}
.relocated-dashboard .kpis strong{font-size:23px}
.relocated-dashboard .kpis span{font-size:10px;line-height:1.3}
.relocated-dashboard .kpis small{font-size:9px}
.relocated-dashboard .dash-charts{grid-template-columns:1fr;gap:10px;margin-top:10px}
.relocated-dashboard .dash-charts article{padding:12px}
.relocated-dashboard .dash-charts h3{font-size:12px;color:#fff}
.relocated-dashboard .chart-legend{font-size:8px}
.relocated-dashboard .profile-chart{gap:18px;min-height:150px}
.relocated-dashboard .profile-chart li{font-size:10px}
.relocated-dashboard .donut{width:100px;height:100px}
@media(min-width:1200px){.connected-data-system .relocated-dashboard .bar-chart{height:145px}}
@media(min-width:1024px){
 .relocated-dashboard .kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 .relocated-dashboard .kpis article{padding:9px 5px}
 .relocated-dashboard .kpis strong{font-size:16px}
 .relocated-dashboard .kpis span{font-size:8px}
 .relocated-dashboard .kpis small{font-size:8px}
 .relocated-dashboard .dash-charts{grid-template-columns:1fr 1fr;gap:6px}
 .relocated-dashboard .dash-charts article{padding:9px 7px}
 .relocated-dashboard .dash-charts h3{font-size:9px}
 .relocated-dashboard .chart-legend{position:static;font-size:7px;margin-bottom:6px}
 .connected-data-system .relocated-dashboard .bar-chart{height:125px}
 .relocated-dashboard .profile-chart{display:block;min-height:0}
 .relocated-dashboard .donut{width:65px;height:65px;margin:8px auto}
 .relocated-dashboard .profile-chart ul{max-width:none;padding:0;margin:0}
 .relocated-dashboard .profile-chart li{font-size:8px;margin:5px 0}
}