.commerce-motion{background:#f4f4f4;color:#262626;min-height:520px}
.commerce-motion .commerce-heading{position:absolute;top:28px;left:32px;z-index:3;margin:0;font:400 22px/1.3 ScalevitySans,Arial,sans-serif;letter-spacing:-.025em}
.commerce-heading>span{display:block;font:500 9px/1.5 ScalevitySans,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#686868;margin-bottom:8px}
.flow-stations{position:absolute;inset:112px 4% auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%}
.flow-station{--activity:0;min-width:0;position:relative}
.flow-station-heading{display:flex;gap:10px;align-items:center;padding-left:10px;font:500 14px/1.4 ScalevitySans,Arial,sans-serif;color:#555}
.flow-station-heading>span{font-size:9px;color:#939393;letter-spacing:.08em}.flow-station-heading>strong{font-weight:500}
.flow-station.is-active .flow-station-heading,.flow-station.is-active .flow-station-heading>span{color:#1b17ff}
.flow-scene{position:relative;aspect-ratio:300/220;max-width:300px;margin:12px auto 0;opacity:calc(.50 + var(--activity)*.50)}
.flow-station-subtitle{position:relative;z-index:3;font:400 10px/1.5 ScalevitySans,Arial,sans-serif;text-align:center;color:#777;margin:9px 0 0}
.studio-illustration,.distribution-lines{display:block;width:100%;height:100%}
.studio-photo{position:absolute;left:55%;top:27%;width:39%;aspect-ratio:76/51}
.studio-flash{position:absolute;z-index:4;left:-2%;top:-6%;width:50%;height:56%;opacity:0;pointer-events:none;background:radial-gradient(ellipse,#fff 5%,#fff9 30%,#fff0 72%);transform:scale(1.35)}
.commerce-fallback{position:absolute;inset:0;width:100%;height:100%;display:block;background:#292929;border:3px solid #fff;box-sizing:border-box;box-shadow:0 4px 12px #0002}
.commerce-motion.is-ready .commerce-fallback{visibility:hidden}
.distribution-card{box-sizing:border-box;position:absolute;width:37%;padding:7px;background:#fff;border:1px solid #d5d5d5;border-radius:5px;box-shadow:0 7px 15px #00000008}
.distribution-card-0{left:0;top:31%}.distribution-card-1{right:0;top:4%}.distribution-card-2{right:0;bottom:4%}
.social-name{display:flex;align-items:center;gap:5px;height:15px;margin-bottom:5px;color:#555;font:400 8px/1 Arial,sans-serif;white-space:nowrap}
.social-symbol{display:flex;align-items:center;justify-content:center;width:15px;height:15px;background:#ededed;border-radius:3px;font:bold 14px/1 Arial,sans-serif}.social-in{font-size:10px;letter-spacing:-.7px}.social-name>svg{width:14px;height:14px}
.distribution-asset{width:100%;aspect-ratio:76/51;background:#e9e9e9;border-radius:2px}
.analytics-dashboard{position:absolute;box-sizing:border-box;inset:13% 1% 7%;padding:12px;background:#fff;border:1px solid #d5d5d5;border-radius:6px;box-shadow:0 9px 20px #00000008}
.analytics-top{display:flex;align-items:center;justify-content:space-between;gap:5px;font:500 10px/1.3 ScalevitySans,Arial,sans-serif;color:#4c4c4c}
.analytics-top>span:last-child{font-size:7px;font-weight:400;color:#777;white-space:nowrap}
.analytics-plot{position:absolute;left:14px;right:14px;top:36px;height:43%}
.analytics-plot>svg{display:block;width:100%;height:100%}
.analytics-kpis{position:absolute;left:12px;right:12px;bottom:11px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.analytics-kpis>div{border-top:1px solid #e4e4e4;padding-top:7px}.analytics-kpis strong{display:block;font:450 17px/1.2 ScalevitySans,Arial,sans-serif;color:#262626;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.analytics-kpis span{display:block;margin-top:4px;font:400 7px/1.3 ScalevitySans,Arial,sans-serif;color:#777}
.flow-feedback{position:absolute;z-index:3;bottom:78px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:2px 10px;background:#f4f4f4;color:#777;white-space:nowrap;font:400 10px/1.5 ScalevitySans,Arial,sans-serif}
.flow-feedback>span{font-size:19px;color:#1b17ff}.commerce-motion[data-phase="feedback"] .flow-feedback{color:#1b17ff}
.commerce-motion canvas{z-index:2;pointer-events:none}
.commerce-motion .logo-motion-caption{color:#686868;left:32px;bottom:28px;font-size:9px;letter-spacing:.04em;text-transform:none}
.commerce-motion .logo-motion-toggle{color:#555;border-color:#c8c8c8;background:#fff}
.commerce-motion .logo-motion-toggle:hover{background:#e9e9e9;border-color:#999}
.commerce-motion .logo-motion-toggle:focus-visible{outline-color:#1b17ff}
@media(min-width:651px) and (max-width:900px){.flow-stations{inset-inline:3%;gap:3%;top:128px}.commerce-motion{min-height:490px}.social-name{font-size:6px;gap:3px}.distribution-card{padding:5px}.analytics-dashboard{padding:9px;inset:9% 0 -3%}.analytics-top{font-size:8px}.analytics-top>span:last-child{font-size:6px}.analytics-plot{left:9px;right:9px;top:31px;height:36%}.analytics-kpis{left:8px;right:8px;gap:5px}.analytics-kpis strong{font-size:13px}.analytics-kpis span{font-size:6px}.flow-station-subtitle{font-size:8px;margin-top:15px}}
@media(max-width:650px){.commerce-motion{aspect-ratio:auto;height:540px;min-height:540px}.commerce-motion .commerce-heading{top:24px;left:20px;right:20px;font-size:21px;line-height:1.3}.commerce-heading>span{font-size:7px;margin-bottom:8px;letter-spacing:.09em}.flow-stations{inset:132px 20px 114px;display:block}.flow-station{position:absolute;inset:0;opacity:var(--scene-visibility,0);pointer-events:none}.flow-station:first-child{--scene-visibility:1}.flow-station-heading{font-size:16px;padding-left:0}.flow-scene{max-width:300px;opacity:1;margin-top:12px}.flow-station-subtitle{font-size:10px;margin-top:12px}.flow-feedback{bottom:78px;font-size:8px;gap:6px;padding:2px 4px}.flow-feedback>span{font-size:16px}.commerce-motion .logo-motion-caption{left:20px;bottom:28px;font-size:8px;max-width:calc(100% - 124px);line-height:1.4}.commerce-motion .logo-motion-toggle{right:15px;bottom:18px}}
@media(max-width:380px){.commerce-motion .commerce-heading{font-size:19px}.commerce-heading>span{font-size:6px}.flow-stations{inset-inline:14px;top:132px}.flow-feedback{font-size:7px}.analytics-kpis strong{font-size:14px}.analytics-top{font-size:9px}.analytics-top>span:last-child{font-size:6px}.social-name{font-size:7px}.distribution-card{padding:5px}body[data-page="digital-marketing-commerce"] .result-grid h2{font-size:26px}}
