/* Two native film formats share one presentation, selected by the page width. */
.product-film { margin:40px 0 56px; }
.product-film-canvas { padding:40px 32px; background:var(--surface-raised); border-radius:8px; overflow:hidden; }
.product-device { --device-scale:1; margin:auto; position:relative; width:calc(var(--device-width) * var(--device-scale)); height:calc(var(--device-height) * var(--device-scale)); }
.product-device>.device { position:absolute; top:calc(2px * var(--device-scale)); left:calc(4px * var(--device-scale)); transform:scale(var(--device-scale)); transform-origin:top left; }
.product-device .device-screen { padding:0; overflow:hidden; background:var(--bg); border:0; }
.product-device video { display:block; width:100%; height:100%; object-fit:cover; }
.product-device-mobile { display:none; }
.product-device .device-macbook-pro { height:455px; }
.product-device .device-macbook-pro .device-frame { height:439px; }
.product-device .device-macbook-pro .device-screen { height:396px; border-top:6px solid #0d0d0d; }
.product-device .device-iphone-14-pro,.product-device .device-iphone-14-pro .device-frame { height:893px; }
.product-device .device-iphone-14-pro .device-screen { height:855px; border-top:8px solid #010101; }
.product-film figcaption { margin-top:24px; }
.product-film figcaption strong { color:var(--ink); font-size:1.5rem; font-weight:600; }
.product-film figcaption p { margin:8px 0 0; max-width:72ch; }
.film-controls { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:16px; max-width:720px; margin-top:24px; }
.film-controls label { display:block; color:var(--muted); font-size:.875rem; }
.film-controls input { width:100%; min-width:0; height:44px; cursor:pointer; accent-color:var(--mint); }
.film-controls output { font-size:.875rem; font-variant-numeric:tabular-nums; color:var(--muted); }
@media(max-width:700px) {
  .product-film-canvas { padding:24px 12px; }
  .product-device-desktop { display:none; }
  .product-device-mobile { display:block; }
  .film-controls { gap:12px; }
  .product-film { margin-block:28px 40px; }
}
@media(forced-colors:active) { .product-film-canvas { background:Canvas; border:1px solid CanvasText; } }