/* Photographic desk scene. Actions remain text-only; media RGB stays untouched. */
.studio-product .product-top { position:relative; z-index:4; align-items:center; }
.studio-product .view-switch { position:relative; z-index:1; pointer-events:auto; }
.studio-product .view-switch button { min-width:44px; touch-action:manipulation; }
.studio-preview-label { color:#abb2bf; font-size:13px; }
.studio-product .device-scene { position:relative; z-index:0; width:100%; height:auto; aspect-ratio:1.36; margin:0; overflow:visible; background:none; isolation:isolate; pointer-events:none; }
.studio-desk { position:absolute; z-index:-2; width:155%; height:123%; max-width:none; left:-26%; top:-12%; object-fit:cover; pointer-events:none; mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent),linear-gradient(to bottom,transparent,#000 26%,#000 80%,transparent); mask-composite:intersect; }
.studio-product .device-scene::after { content:""; position:absolute; z-index:-1; left:-10%; right:-6%; bottom:1%; height:17%; background:radial-gradient(ellipse,#0008,transparent 70%); pointer-events:none; }
.laptop-device { position:absolute; z-index:1; width:104%; left:-8%; bottom:3%; transform:translateY(0) scale(.97); transform-origin:50% 90%; transition:transform 950ms var(--ease); }
.laptop-device>img { display:block; width:100%; height:auto; filter:none; opacity:1; mix-blend-mode:normal; }
.phone-device { position:absolute; z-index:2; width:auto; height:92%; max-height:640px; aspect-ratio:840/1871; right:-1%; bottom:2%; scale:1.09 1; transform:translateY(0) rotate(1deg) scale(.98); transform-origin:50% 95%; transition:transform 950ms var(--ease),right 950ms var(--ease); }
.phone-device>img { display:block; width:100%; height:100%; object-fit:contain; filter:none; opacity:1; mix-blend-mode:normal; }
.phone-device::after { content:""; position:absolute; z-index:-1; width:95%; height:7%; bottom:0; left:2%; background:radial-gradient(ellipse,#000b,transparent 70%); }
.hero-product[data-view=mobile] .laptop-device { transform:translateX(-8%) translateY(0) scale(.84); }
.hero-product[data-view=mobile] .phone-device { right:25%; transform:translateY(-1%) rotate(0deg) scale(1.04); }
.studio-product>.media-caption { text-align:right; font-size:11px; margin-top:14px; position:relative; z-index:2; }
@media(min-width:1700px) { .studio-product .device-scene { aspect-ratio:1.45; } }
@media(max-width:1100px) and (min-width:701px) { .studio-product .device-scene { aspect-ratio:1.13; }.laptop-device{width:113%;left:-13%;bottom:6%}.phone-device{height:90%;right:-2%;bottom:3%} }
@media(max-width:700px) {
  .studio-preview-label{font-size:12px}.studio-product .device-scene{aspect-ratio:1.26}
  .studio-desk{width:145%;height:119%;left:-22%;top:-8%}
  .laptop-device{width:112%;left:-12%;bottom:7%}.phone-device{height:89%;right:0;bottom:5%}
  .hero-product[data-view=mobile] .phone-device{right:24%;transform:rotate(0) scale(1.04)}
  .studio-product>.media-caption{font-size:10px;margin-top:10px}
}
@media(prefers-reduced-motion:reduce) { .laptop-device,.phone-device{transition:none}.hero-product[data-view=mobile] .laptop-device{transform:translateX(-8%) scale(.84)}.hero-product[data-view=mobile] .phone-device{transform:scale(1.04)} }