.native-product-demo{position:relative;height:720px;margin:48px 0 0;overflow:hidden;border:0;border-radius:0;background:transparent;user-select:none;-webkit-user-select:none;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 112px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 112px),transparent 100%)}
.native-product-demo>iframe{display:block;width:100%;height:100%;border:0;background:transparent;pointer-events:none;user-select:none;-webkit-user-select:none}
@media(min-width:801px){.native-product-demo>iframe{position:absolute;left:-288px;width:calc(100% + 288px)}}
/* Preserve a desktop browsing viewport; scale and crop the illustration only. */
@media(max-width:800px){
 .native-product-demo{height:var(--demo-crop-height,360px);-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--demo-bottom-fade,56px)),transparent 100%),linear-gradient(to right,#000 0,#000 calc(100% - var(--demo-right-fade,24px)),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--demo-bottom-fade,56px)),transparent 100%),linear-gradient(to right,#000 0,#000 calc(100% - var(--demo-right-fade,24px)),transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
 .native-product-demo>iframe{position:absolute;top:0;left:calc(-288px * var(--demo-scale,.5));width:1408px;min-width:1408px;max-width:none;height:900px;transform:scale(var(--demo-scale,.5));transform-origin:top left}
}
@media(max-width:600px){.native-product-demo{margin-top:32px}}

.native-product-demo>iframe{transition:transform .65s cubic-bezier(.22,1,.36,1);will-change:transform}
@media(prefers-reduced-motion:reduce){.native-product-demo>iframe{transition:none}}

/* Both crop edges dissolve while the camera focuses on a primary action. */
.native-product-demo[data-zoomed="true"]{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--demo-bottom-fade,112px)),transparent 100%),linear-gradient(to right,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--demo-bottom-fade,112px)),transparent 100%),linear-gradient(to right,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-width:800px){.native-product-demo[data-zoomed="true"]{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--demo-bottom-fade,56px)),transparent 100%),linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--demo-bottom-fade,56px)),transparent 100%),linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}}

.native-product-demo[data-zoomed="true"]{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px,#000 calc(100% - var(--demo-bottom-fade,112px)),transparent 100%),linear-gradient(to right,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 28px,#000 calc(100% - var(--demo-bottom-fade,112px)),transparent 100%),linear-gradient(to right,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%)}
@media(max-width:800px){.native-product-demo[data-zoomed="true"]{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16px,#000 calc(100% - var(--demo-bottom-fade,56px)),transparent 100%),linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16px,#000 calc(100% - var(--demo-bottom-fade,56px)),transparent 100%),linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}}